Báo cáo đồ án 2 xây dựng website học lập trình

CHƯƠNG 1: GIỚI THIỆU CHUNG vì vấn đề về chi phí, về nguồn tài liệu học tập được cung cấp một cách đầy đủ và toàn diện thì rất khó.Hiểu được nỗi đau này, là một trong những sinh viên học

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

NGUYỄN TRUNG HIẾU - 19521508

NGUYỄN TIẾN DŨNG - 19521398

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG WEBSITE HỌC LẬP TRÌNH

Building a website to learn programming

GIẢNG VIÊN HƯỚNG DẪN THS HUỲNH TUẤN ANH

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

NGUYỄN TRUNG HIẾU - 19521508

NGUYỄN TIẾN DŨNG - 19521398

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG WEBSITE HỌC LẬP TRÌNH

Building a website to learn programming

GIẢNG VIÊN HƯỚNG DẪN THS HUỲNH TUẤN ANH

TP HỒ CHÍ MINH, 2022

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ Phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, chúng em đã được trang bị những kiến thức và những kỹ năng cơ bản để có thể hoàn thành các đồ án môn học

Đồ án 2 là môn học mang lại cho sinh viên cái nhìn mới trong việc áp dụng những kiến thức đã có để giải quyết các vấn đề thực tế Môn học cũng như là một thử thách và cơ hội để sinh viên có thể rèn luyện và hoàn thiện bản thân qua những kinh nghiệm, kỹ năng khi làm đồ án

Chúng em xin gửi lời cảm ơn đến thầy HUỲNH TUẤN ANH đã tận tình quan tâm, giúp đỡ và hướng dẫn nhóm trong suốt quá trình làm đồ án Qua những lời góp ý, chỉ bảo của thầy mà nhóm có thể hoàn thành đồ án tốt hơn

Nhóm cũng xin cảm ơn tất cả các thầy cô, anh chị, bạn bè đã giúp đỡ, hỗ trợ trong suốt quá trình nhóm hoàn thành đồ án

Trong quá trình học tập và hoàn thiện đồ án còn gặp nhiều sai sót, chúng em mong nhận được sự góp ý của quý thầy cô và các bạn để có thể hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

TP HCM, ngày 25 tháng 12 năm 2022

CHƯƠNG 2: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI 3

1.4.7 Tham gia khóa học 17

CHƯƠNG 1: GIỚI THIỆU CHUNG

vì vấn đề về chi phí, về nguồn tài liệu học tập được cung cấp một cách đầy đủ và toàn diện thì rất khó.Hiểu được nỗi đau này, là một trong những sinh viên học công nghệ thông tin, chúng em đã quyết định xây dựng một trang web học lập trình thông qua những video và bài tập lí thuyết theo hình thức trắc nghiệm, thực hành theo hình thức coding để đem đến nguồn tài nguyên học tập bổ ích cho mọi người

3 Đối tượng nghiên cứu

● Người làm đề tài:

○ Sinh viên đang học tập và nghiên cứu tại trường Đại học Công nghệ Thông tin – ĐHQG Tp Hồ Chí Minh

● Công nghệ, công cụ phát triển:

○ Visual Studio Code

○ Rest API

○ MySQL

● Thiết kế giao diện:

○ Phác thảo và thiết kế giao diện sử dụng công cụ Figma

● Đối tượng trong phạm vi đề tài hướng đến:

○ Sinh viên, học sinh có nhu cầu học lập trình

○ Những doanh nghiệp phân phối hàng hóa trong và ngoài nước

○ Người tiêu dùng trong nước và (có thể) ngoài nước

5 Phương pháp nghiên cứu

● Cách tiếp cận: Website được xây dựng dựa trên mô hình MVC trên môi trường

đa nền tảng

● Phương pháp nghiên cứu:

○ Phương pháp đọc tài liệu

○ Phương pháp phân tích các website hiện nay đã xây dựng bằng cách sử dụng ReactJs,NodeJs (SERN stack)

○ Phương pháp thực nghiệm

CHƯƠNG 2: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI

1 Tổng quan về JavaScript

1.1 Tổng quan

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp

và nhúng vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động

JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng Là một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp:

HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…

JavaScript: Tạo nên những nội dung “động” trên website Cùng tìm hiểu rõ hơn

ở phần dưới đây

JS là viết tắt của JavaScript, khi có JS bạn sẽ hiểu đó đang nói đến JavaScript Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend

Bạn thử truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứng slide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp tất cả các chức năng này đều được xử lý bằng Javascript đấy các bạn ạ

Trong những năm gần đây, sự xuất hiện của các framework như NodeJS (chuyên code backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend khác như Angular, jQuery, ReactJS ra đời, giúp tạo ra một cơn sốt với từ khóa Javascript Fullstack

● JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau

● Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác

● JS còn có thể được gắn trên một số các element hoặc những events của các trang web

● Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng

● Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database

● Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop, Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính năng)

● Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau

1.3 Nhược điểm

Bên cạnh những ưu điểm kể trên thì JS vẫn có những nhược điểm riêng tương

tự như các ngôn ngữ lập trình khác hiện nay Cụ thể:

● JS Code Snippet khá lớn

● JS dễ bị các hacker và scammer khai thác hơn

● JS cũng không có khả năng đa luồng hoặc đa dạng xử lý

● Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng

● Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự không đồng nhất

● Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file

● JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối mạng

ReactJS có các tính năng hết sức nổi bật bao gồm:

● JSX: viết tắt của JavaScript extension, nó là React extension , giúp cho việc thay đổi cây DOM dễ dàng hơn bằng HTML-style code đơn giản Nó là một trong những tính năng tốt và dễ sử dụng

● Components: Một trang web được xây dựng bằng ReactJS là một sự kết hợp nhiều component lại với nhau chứ không phải chung một Template như bình thường Các component cũng như các hàm JavaScript bình thường, giúp tạo

ra các code dễ dàng bằng cách tách các logic ra thành các đoạn code độc lập

có thể tái sử dụng Chúng ta có thể sử dụng component dưới dạng function hoặc class, ngoài ra các component còn có state và props

● Virtual DOM: ReactJS tạo một thứ gọi là Virtual DOM (DOM ảo) Đúng như tên gọi, nó là một copy của DOM thật trên trang web đó ReactJS dùng những DOM ảo đó để tìm đúng những DOM thật cần được cập nhật khi có bất kỳ sự kiện nào làm các thành phần bên trong nó thay đổi

● Javascript Expressions: Biểu thức JS có thể sử dụng trong file jsx hoặc js bằng cách sử dụng cặp dấu ngoặc nhọn “{}”

● Vì ReactJS sử dụng DOM ảo để cache cấu trúc dữ liệu trong bộ nhớ và chỉ những thay đổi cuối cùng mới được cập nhật vào trong DOM trình duyệt Điều này làm cho ứng dụng trở nên nhanh hơn

● Bạn có thể tạo các component theo từng chức năng mà bạn muốn bằng cách

sử dụng tính năng react component Các component này có thể tái sử dụng theo nhu cầu của bạn, đồng thời việc tạo các component theo từng chức năng cũng giúp cho việc bảo trì sau này trở nên dễ dàng hơn

● ReactJS là một opensource, vì vậy cũng rất dễ cho những bạn mới bắt đầu tìm hiểu nó

● Trong những năm gần đây, ReactJS đang trở nên phổ biến hơn và được duy trì bởi Facebook và Instagram Ngoài ra nó cũng được sử dụng bởi các công

ty nổi tiếng như Apple, Netflix, …

● Facebook vẫn đang duy trì, phát triển, và cho ra những thay đổi mới Vì thế bạn cứ yên tâm sử dụng ReactJS cho những dự án của bạn hoặc những dự án dành do doanh nghiệp

● ReactJS có thể được sử dụng để xây dựng giao diện người dùng cho cả các ứng dụng dành cho máy tính và các ứng dụng di động

● Dễ dàng cho việc test và debug, vì hầu hết các code đều được thực hiện bằng JavaScript chứ không phải bằng HTML

2.3 Nhược điểm

● Vì hầu hết code được viết dưới dạng JSX, tức là HTML và CSS là một phần của JavaScript, nó không giống như những framework khác vẫn tách biệt giữa HTML và CSS nên những bạn mới làm quen với ReactJS sẽ hơi lúng túng và dễ nhầm lẫn giữa JSX và HTML Tuy nhiên bạn sẽ nhanh chóng quen với cách kết hợp này của React mà thôi

● Một nhược điểm nữa của ReactJS đó là dung lượng các file của nó hơi lớn

3 Tổng quan về NodeJs

3.1 Tổng quan

Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8

xây dựng được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình

và giảm thời gian ở mức thấp nhất

Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì, Node js có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao

Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả Chính vì lẽ đó giải pháp mà Node js đưa ra là sử dụng luồng đơn (Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời

3.2 Ưu điểm

● IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

● Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

● Chia sẻ cùng code ở cả phía client và server

● NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ

● Cộng đồng hỗ trợ tích cực

● Cho phép stream các file có kích thước lớn

3.3 Nhược điểm

● Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình

đa lõi trong các phần cứng cấp server hiện nay

● Khó thao tác với cơ sử dữ liệu quan hệ

● Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác

4.2 Ưu điểm

ExpressJS sẽ giúp tổ chức kiến trúc back-end của mình ExpressJs có thể triển khai website với mô hình MVC – một mô hình web phổ biến, giúp cho việc bảo trì tương đối dễ dàng

Một số tính năng của ExpressJs:

• Phát triển máy chủ nhanh hơn: cung cấp cho bạn nhiều tính năng phổ biến của Node.js dưới dạng hàm có thể dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này sẽ giúp rút ngắn thời gian để viết code

• Định tuyến: cung cấp cơ chế định tuyến cao giúp duy trì trạng thái của trang web

• Khuôn mẫu: cung cấp các công cụ tạo khuôn mẫu cho phép các nhà phát triển tạo nội dung động trên các trang web bằng việc xây dựng các mẫu HTML ở phía máy chủ

• Gỡ lỗi: cung cấp một cơ chế có khả năng xác định chính xác phần ứng dụng web có lỗi

4.3 Nhược điểm

ExpressJS là một framework của NodeJS nên hầu như sẽ có những điểm yếu mà NodeJS gặp phải

5 Tổng quan về MySQL

5.1 Tổng quan

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server Với RDBMS là viết tắt của Relational Database Management System

MySQL được đánh giá cao nhờ việc tích hợp với Apache và PHP Không chỉ vậy, việc có tính tương thích với nhiều trình duyệt, với nhiều hệ điều hành tiêu biểu như Ubuntu, Linux, macOS, Windows càng giúp việc sử dụng MySQL được tin tưởng và ưa chuộng nhiều hơn

5.2 Ưu điểm

MySQL được ưa chuộc trong các ứng dụng website nhờ một số ưu điểm sau:

• MySQL là một cơ sở dữ liệu tốc độ cao, ổn định dễ sử dụng và có thể hoạt động được trên nhiều hệ điều hành khác nhau

• MySQL có độ bảo mật cao, thích hợp cho các ứng dụng truy cập CSDL trên internet

• Có khả năng xử lý rất nhiều dữ liệu và có thể mở rộng nếu cần thiết

• MySQL hoàn toàn miễn phí sử dụng

CHƯƠNG 3: XÂY DỰNG HỆ THỐNG

1 Mô hình use-case

thống

1.3 Danh sách Use-case

2 Đăng xuất Cho phép người dùng thoát khỏi tài

khoản đang sử dụng

3 Xem thông tin cá nhân Cho phép người dùng xem lại thông

tin cá nhân đã đăng ký từ trước

4 Chỉnh sửa thông tin cá

Xem các thông tin về các khóa học

6 Xem chi tiết khóa học Xem các thông tin chi tiết về 1 khóa

học đã chọn

7 Tham gia khóa học Tham gia khóa học và bắt đầu học

8 Chọn/ điều chỉnh bài giảng Điều hướng các bài giảng có trong

11 Xem chi tiết blog Xem thông tin chi tiết bên trong 1 blog

đã chọn

12 Xem bài tập Xem thông tin bài tập online

13 Nộp bài tập Nộp bài tập online

14 Bình luận ở bài giảng Để lại bình luận hoặc thắc mắc liên

quan đến bài giảng

15 Bình luận ở blog Để lại bình luận hoặc thắc mắc liên

Điều kiện kích hoạt Người dùng khởi động hệ thống

Trạng thái hệ thống trước khi bắt

Luồng sự kiện chính 1 Người dùng truy cập vào trang web

2 Người dùng nhập tài khoản, mật khẩu và chọn lệnh đăng nhập

3 Hệ thống xác thực thông tin đăng nhập thành công

và cho phép người dùng truy cập ứng dụng

Luồng sự kiện phụ Không

Mở rộng - Hệ thống xác thực thông tin đăng nhập không thành

công và hiển thị thông báo

+ TH1: Người dùng hủy đăng nhập

Use case dừng lại

Các yêu cầu đặc biệt Không

1.4.2 Đăng xuất

Mục đích Đăng xuất khỏi hệ thống

Điều kiện kích hoạt Người dùng chọn chức năng đăng xuất

Trạng thái hệ thống trước khi bắt

đầu use-case

- Tài khoản đã được đăng nhập

Trạng thái hệ thống sau khi thực

hiện use-case

- Người dùng đăng xuất thành công

Luồng sự kiện chính 1 Người dùng truy cập vào trang web

2 Người dùng chọn chức năng đăng xuất

3 Hệ thống xác thực và cho phép người dùng đăng xuất khỏi hệ thống

Luồng sự kiện phụ Không

Mở rộng - Hệ thống xác thực đăng xuất không thành công và

hiển thị thông báo

+ TH1: Người dùng hủy đăng xuất

Use case dừng lại

Các yêu cầu đặc biệt Không

1.4.3 Xem thông tin cá nhân

Tên use case Xem thông tin cá nhân

Mục đích Cho phép người dùng xem thông tin cá nhân của mình

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi thực

hiện use-case

Không

Luồng sự kiện chính 1 Người dùng mở màn hình cá nhân

2 Người dùng chọn lệnh thông tin cá nhân

3 Hệ thống truy cập vào dữ liệu và cập nhật thông tin người dùng trên màn hình

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không

1.4.4 Chỉnh sửa thông tin cá nhân

Tên use case Chỉnh sửa thông tin cá nhân

Mục đích Cho phép người dùng chỉnh sửa thông tin cá nhân của

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi thực

hiện use-case

- Hệ thống cập nhật lại thông tin mới của người dùng vào dữ liệu

Luồng sự kiện chính 1 Người dùng chọn chỉnh sửa thông tin cá nhân trong

màn hình thông tin cá nhân

2 Người dùng nhập những thông tin muốn thay đổi

và chọn lệnh thay đổi thông tin

3 Hệ thống xác nhận cập nhật thông tin thành công, cập nhật lại dữ liệu và quay lại màn hình thông tin cá nhân

Luồng sự kiện phụ Không

Mở rộng Hệ thống xác nhận cập nhật thông tin thất bại:

TH1: Người dùng hủy thay đổi thông tin cá nhân Use case dừng lại

TH2: Người dùng nhập lại thông tin muốn thay đổi Use case quay lại bước 2

Các yêu cầu đặc biệt Không

- Người dùng đã đăng nhập thành công

- Hệ thống có đầy đủ thông tin về các sản phẩm Trạng thái hệ thống sau khi thực

hiện use-case

- Hiển thị thông tin về các khóa học hiện có

Luồng sự kiện chính 1 Hệ thống truy cập vào dữ liệu để lấy ra thông tin về

Các yêu cầu đặc biệt Không

1.4.6 Xem chi tiết khóa học

Tên use case Xem chi tiết khóa học

Mục đích Xem chi tiết thông tin khóa học mà người dùng muốn

tham gia

Điều kiện kích hoạt - Người dùng đã đăng nhập thành công vào phần

mềm

- Người dùng chọn vào khóa học muốn xem

Trạng thái hệ thống trước khi bắt

đầu use-case

- Người dùng đã đăng nhập thành công

- Hệ thống có đầy đủ thông tin về các khóa học Trạng thái hệ thống sau khi thực

hiện use-case

- Hiển thị thông tin khóa học mà người dùng muốn xem

Luồng sự kiện chính 1 Người dùng chọn khóa học mà mình muốn xem

2 Hệ thống truy cập vào dữ liệu để lấy ra thông tin về khóa học mà người dùng muốn xem

3 Chuyển sang màn hình thông tin khóa học cho phép người dùng xem thông tin chi tiết về khóa học Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không

1.4.7 Tham gia khóa học

Tên use case Tham gia khóa học

Mục đích Tham gia vào khóa học mà người dùng muốn học

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi thực

hiện use-case

- Hệ thống cập nhật thông tin vào dữ liệu

Luồng sự kiện chính 1 Người dùng xem thông tin về khóa học

2 Người dùng chọn lệnh bắt đầu học/ tham gia

3 Chuyển sang màn hình khóa học để người dùng bắt đầu học

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không

1.4.8 Chọn/ điều chỉnh bài giảng

Tên use case Chọn/Điều chỉnh bài giảng

Mục đích Cho phép người dùng tương tác và điều hướng bài

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi thực

hiện use-case

- Hệ thống cập nhật thông tin vào dữ liệu

Luồng sự kiện chính 1 Người dùng chọn bài giảng muốn học ( trừ các bài

giảng bị khóa do chưa hoàn thành bài giảng trước)

2 Hệ thống chuyển sang bài giảng mà người dùng mong muốn

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không

1.4.9 Xem các khóa học của bản thân

Tên use case Xem các khóa học của bản thân

Mục đích Cho phép người dùng xem các khóa học mà bản thân

- Người dùng đã đăng nhập thành công

Trạng thái hệ thống sau khi thực

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Các đơn hàng hiển thị theo 3 trạng thái (Đang chờ xác

nhận, Đang giao, Đã hoàn thành)

1.4.10 Xem các Blog