Đồ án lập trình ứng dụng với java website học tập dream chaser

Tính cá nhân hóa: Cung cấp tính năng cá nhân hóa, giúp người dùng theodõi tiến độ học tập của họ, nhận được gợi ý khóa học phù hợp với sở thích và mục tiêu học tập của mình.. - 1.1.3 Tổn

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCM

ĐỒ ÁN LẬP TRÌNH ỨNG DỤNG VỚI JAVA

WEBSITE HỌC TẬP DREAM CHASER

Chuyên ngành: CÔNG NGHỆ PHẦN MỀM

Giảng viên hướng dẫn : LÊ NGUYÊN KHANH

Sinh viên thực hiện :

1 Nguyễn Danh Thành MSSV: 2180608730 Lớp: 21DTHE5

TP Hồ Chí Minh, 2024

Mục Lục

LỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

CHƯƠNG 1: TỔNG QUAN 3

1.1 N HIỆM VỤ ĐỒ ÁN 3

- 1.1.1 Đặt vấn đề 3

- 1.1.2 Mục tiêu đề tài 3

- 1.1.3 Tổng quan và cơ sở lý luận 4

- 1.1.4 Nội dung và phương pháp nghiên cứu 4

1.2 C ẤU TRÚC ĐỒ ÁN 5

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 6

2.1 K HÁI NIỆM 6

- 2.1.1 Kiến trúc Restful API 6

- 2.1.2 Mô hình MVC 6

- 2.1.3 Phương pháp SPA 7

2.2 C ÔNG NGHỆ 9

- 2.2.1 Java Spring Boot 9

- 2.2.2 ReactJS 10

- 2.2.3 MySQL 11

- 2.2.4 GitHub 12

2.3 C Ơ SỞ DỮ LIỆU 14

- 2.3.1 Đặc tả yêu cầu 14

- 2.3.2 Thuộc tính thực thể 17

2.4 M Ô HÌNH 20

- 2.4.1 Mô hình UseCase 20

- 2.4.2 Mô hình ERD 21

- 2.4.3 Mô hình Class 21

- 2.4.4 Mô hình Activity 22

2.4.4.1 Activity Diagram cho chức năng Đăng nhập 22

2.4.4.2 Activity Diagram cho chức năng Đăng ký 23

2.4.4.3 Activity Diagram cho chức năng Mua khóa học 24

- 2.4.5 Mô hình Sequence 25

2.4.5.1 Sequence Diagram cho Đăng nhập 25

CHƯƠNG 3: KẾT QUẢ THỰC NGHIỆM 26

3.1 K IỂM THỬ 26

3.2 K ẾT QUẢ 29

- 3.2.1 Backend Server 29

- 3.2.2 Quản lý của Admin 29

- 3.2.3 Giao diện người dùng 31

CHƯƠNG 4: KẾT LUẬN VÀ KIẾN NGHỊ 34

4.1 K ẾT LUẬN CHUNG 34

4.3 Đ ÓNG GÓP 34 4.4 Đ Ề XUẤT 34

TÀI LIỆU THAM KHẢO 36

Mục lục hình ảnh

HÌNH 2.2.1: JAVA SPRING BOOT 9

HÌNH 2.2.2: REACTJS 10

HÌNH 2.2.3: MYSQL 11

HÌNH 2.2.4: GITHUB 12

HÌNH 2.4.1: MÔ HÌNH USECASE 20

HÌNH 2.4.2: MÔ HÌNH ERD 21

HÌNH 2.4.3: MÔ HÌNH CLASS 21

HÌNH 2.4.4.1: MÔ HÌNH ACTIVITY ĐĂNG NHẬP 22

HÌNH 2.4.4.2: MÔ HÌNH ACTIVITY ĐĂNG KÝ 23

HÌNH 2.4.4.3 ACTIVITY DIAGRAM CHO CHỨC NĂNG MUA KHÓA HỌC 24

HÌNH 2.4.4.3: MÔ HÌNH ACTIVITY MUA KHÓA HỌC 24

HÌNH 2.4.5.1: MÔ HÌNH SEQUENCE ĐĂNG NHẬP 25

HÌNH 3.2.2.1: GIAO DIỆN TỔNG QUAN 29

HÌNH 3.2.2.2: GIAO DIỆN QUẢN LÝ TRANG DANH MỤC 30

HÌNH 3.2.2.3: GIAO DIỆN TRANG QUẢN LÝ KHÓA HỌC 30

HÌNH 3.2.3.1: GIAO DIỆN ĐĂNG NHẬP 31

HÌNH 3.2.3.2: GIAO DIỆN ĐĂNG KÝ 31

HÌNH 3.2.3.3: GIAO DIỆN TRANG CHỦ 32

HÌNH 3.2.3.4: GIAO DIỆN KHÓA HỌC ERROR! BOOKMARK NOT DEFINED. HÌNH 3.2.3.4: GIAO DIỆN CHI TIẾT KHÓA HỌC 32

HÌNH 3.2.3.5: GIAO DIỆN HỌC TẬP 33

HÌNH 3.2.3.6: GIAO DIỆN THANH TOÁN 33

Lời cảm ơn

Lời cảm ơn đến các thầy cô trong khoa đã giúp đỡ, quan tâm và theo dõi quátrình học tập và nghiên cứu của chúng em trong suốt thời gian qua Chúng em rấtbiết ơn sự quan tâm và động viên từ các thầy cô đã giúp chúng em vượt qua nhữngthử thách trong quá trình học tập và nghiên cứu

Đặc biệt, chúng em muốn gửi lời cảm ơn chân thành đến giảng viên hướngdẫn là thầy Trần Đăng Khoa, thầy đã giúp đỡ chúng em rất nhiều trong quá trìnhthực hiện đồ án tốt nghiệp Thầy đã dành thời gian quý báu để hướng dẫn chúng

em trong từng bước của đồ án, tận tình giải đáp các thắc mắc và đưa ra những gợi

ý quý giá về phương pháp nghiên cụ và giải quyết vấn đề

Nhờ sự hỗ trợ và tư vấn của thầy, chúng em đã có được những kiến thức, kỹnăng và kinh nghiệm quan trọng để hoàn thành đồ án cơ sở Chúng em cảm thấymay mắn khi được học tập và làm việc dưới sự hướng dẫn của quý thầy tận tâm vàgiàu kinh nghiệm như vậy

Chúng em xin gửi lời cảm ơn sâu sắc đến quý thầy, vì đã đóng góp khôngnhỏ vào sự thành công của đồ án cơ sở của chúng em Chúng em sẽ luôn mangtrong mình những giá trị mà hai thầy đã truyền đạt, và sẽ cố gắng áp dụng kiếnthức và kinh nghiệm đó để phát triển sự nghiệp trong tương lai

1

Lời cam đoan

Chúng em cam kết rằng đồ án "Website Dream Chaser" là công trình nghiêncứu của riêng chúng em dưới sự hướng dẫn của thầy Trần Đăng Khoa và không có

sự sao chép từ bất kỳ nguồn tài liệu nào khác, trừ khi được trích dẫn rõ ràng.Chúng em đã tự mình thực hiện việc nghiên cứu, phân tích, thiết kế và càiđặt website Dream Chaser, với mục đích đánh giá và cải thiện khả năng của mìnhtrong lập trình web Trong quá trình làm đồ án, tôi đã tìm hiểu và áp dụng các côngnghệ mới nhất, như HTML, CSS, Spring Boot, Angular, mySQL, để xây dựngđược một website đầy đủ chức năng và thân thiện với người dùng

Chúng em cũng cam đoan rằng tất cả các thông tin và dữ liệu được sử dụngtrong đồ án này là chính xác và được thu thập từ các nguồn đáng tin cậy Chúng

em đã kiểm tra kỹ lưỡng và xác nhận tính chính xác của các thông tin và dữ liệunày trước khi sử dụng trong đồ án của mình

Chúng em xin cam đoan sự chính trực và trung thực của mình trong quátrình nghiên cứu và hoàn thành đồ án này Chúng em đã hoàn thành tất cả cácnhiệm vụ được yêu cầu trong đồ án, theo đúng tiến độ và đạt được các mục tiêu đề

ra Chúng em đã tận dụng tối đa thời gian và nỗ lực của mình để hoàn thành đồ ánnày một cách chân thành và trung thực

Cuối cùng, chúng em xin cảm ơn sự giúp đỡ và hỗ trợ của thầy Trần ĐăngKhoa trong suốt quá trình thực hiện đồ án này

TP Hồ Chí Minh, Ngày 21/06/2023

2

Hiện nay, trên thị trường đã xuất hiện nhiều website học online, tuy nhiênkhông phải tất cả đều đáp ứng được nhu cầu của người dùng Các website nàythường bị thiếu tính năng, khó sử dụng hoặc không đảm bảo tính bảo mật thông tincho người dùng Điều này làm cho người dùng cảm thấy khó chịu và khó tiếp cậnvới các thông tin và kiến thức về công nghệ

Vì vậy, để giải quyết vấn đề này, chúng em đã quyết định xây dựng mộtwebsite học online mới, có tính năng đầy đủ, thân thiện với người dùng và đảmbảo tính bảo mật thông tin Website học online này sẽ cung cấp cho người dùngmột nơi để học tập, giao lưu, chia sẻ và học hỏi về các khóa học và công nghệ mớinhất trên thị trường Ngoài ra, website sẽ có tính năng quản lý mục tiêu cá nhân đểgiúp người dùng dễ dàng trong việc học tập

Với mục tiêu đó, chúng em đã tiến hành nghiên cứu và phát triển website họconline Dream Chaser, với mong muốn đáp ứng được nhu cầu của người dùng,đồng thời đóng góp vào sự phát triển của cộng đồng học online Dream Chaser sẽ

là một nơi để các bạn học sinh, sinh viên có thể tham gia học các khóa học trựctuyến , phát triển kỹ năng của bản thân và hoàn thành mục tiêu mà mình đề ra

an ninh mạng, khoa học dữ liệu, trí tuệ nhân tạo, và nhiều hơn nữa

2 Chất lượng nội dung: Đảm bảo chất lượng của các khóa học thông qua việchợp tác với các chuyên gia hàng đầu trong ngành, cung cấp tài liệu, videohướng dẫn, bài tập và dự án thực hành chất lượng cao

3

3 Trải nghiệm người dùng tốt: Tạo ra một giao diện người dùng thân thiện, dễ

sử dụng và tương tác để người dùng có thể dễ dàng tìm kiếm, mua và tiếpcận các khóa học một cách thuận tiện

4 Tính cá nhân hóa: Cung cấp tính năng cá nhân hóa, giúp người dùng theodõi tiến độ học tập của họ, nhận được gợi ý khóa học phù hợp với sở thích

và mục tiêu học tập của mình

5 Bảo mật và tin cậy: Đảm bảo tính bảo mật của thông tin cá nhân và giaodịch tài chính của người dùng thông qua các biện pháp bảo mật hiện đại vàchuẩn mực an ninh thông tin

6 Hỗ trợ khách hàng: Cung cấp dịch vụ hỗ trợ khách hàng 24/7 để giải đápmọi thắc mắc và hỗ trợ kỹ thuật cho người dùng một cách nhanh chóng vàhiệu quả

- 1.1.3 Tổng quan và cơ sở lý luận

Đề tài "Website Học Online Dream Chaser", đây là một nền tảng trực tuyếnđược tạo ra với mục tiêu cung cấp các khóa học, tài liệu và nguồn thông tin chấtlượng cao về lĩnh vực công nghệ thông tin cho người học Trang web này nhằmmang đến một trải nghiệm học tập linh hoạt, hiệu quả và đáng tin cậy cho nhữngngười quan tâm đến công nghệ thông tin Trang web học online về công nghệthông tin của chúng tôi được thiết kế với mục đích giúp người học dễ dàng tiếp cận

và nắm bắt kiến thức mới nhất trong lĩnh vực công nghệ thông tin Chúng tôi cungcấp một loạt các khóa học từ cơ bản đến nâng cao, từ lập trình, mạng máy tính, anninh mạng, đến khoa học dữ liệu và trí tuệ nhân tạo

Cơ sở lý luận của một website học online về công nghệ thông tin có thể dựatrên các nguyên lý và lý thuyết trong lĩnh vực giáo dục trực tuyến, công nghệ thôngtin, và học tập trực tuyến Đồng thời, đề tài cũng sẽ tập trung vào các yếu tố thiết

kế giao diện, tính năng, tính thân thiện với người dùng, tính bảo mật và tính ổnđịnh của website

- 1.1.4 Nội dung và phương pháp nghiên cứu

Đối tượng nghiên cứu của đề tài này là website học online Phạm vi nghiên cứubao gồm các yêu cầu, thiết kế, tính năng, tính thân thiện với người dùng, tính bảomật và tính ổn định của website diễn đàn Để đạt được mục tiêu của đề tài, phươngpháp nghiên cứu sẽ bao gồm các bước sau:

- Tiến hành nghiên cứu thị trường để tìm hiểu về các website học online côngnghệ đã có trên thị trường Điều này giúp xác định các yếu tố cần thiết đểxây dựng một website diễn đàn công nghệ hiệu quả

- Tìm hiểu về các công nghệ và kỹ thuật phát triển website để xác định cáccông nghệ phù hợp để xây dựng website học online

- Thiết kế giao diện và tính năng cho website học online Điều này bao gồmviệc xác định các tính năng cần có để tạo ra một trải nghiệm người dùng tốt

4

nhất và thân thiện nhất Các tính năng này có thể bao gồm chức năng tìmkiếm, chức năng đăng ký và đăng nhập, chức năng tham gia học, chức năngmua khóa học, chức năng bình luận.

- Tiến hành kiểm thử và đánh giá tính năng của website Điều này giúp xácđịnh các vấn đề và lỗi trong quá trình phát triển, và từ đó cải thiện tính ổnđịnh và tính bảo mật của website

- Đưa website học online Dream Chaser vào hoạt động và quản lý hoạt độngcủa website Điều này bao gồm việc quản lý thành viên, quản lý khóa học,quản lý tính năng và nội dung của website

- Đánh giá hiệu quả của website học online Điều này giúp đánh giá xemwebsite đã đáp ứng được các mục tiêu được đề ra hay chưa, từ đó cải thiện

và phát triển website trong tương lai

1.2 Cấu trúc đồ án

Cấu trúc đồ án bao gồm các chương với những nội dung như sau:

 Chương 1 TỔNG QUAN: Giới thiệu về đề tài, tóm tắt những lý thuyết,nghiên cứu trước đây có liên quan đến đề tài

 Chương 2 CƠ SỞ LÝ THUYẾT: Trình bày các khái niệm và phương phápgiải quyết vấn đề của tác giả bao gồm mô tả các công nghệ, hệ thống, cácràng buộc hoặc các giải pháp mới, những mô hình toán, lý giải xây dựng môhình, …

 Chương 3 KẾT QUẢ THỰC NGHIỆM: Mô tả công việc thực nghiệm đề tài

đã tiến hành, các kết quả nghiên cứu lý thuyết, kết quả thực nghiệm đạtđược Đối với các đề tài ứng dụng có kết quả là sản phẩm phần mềm phải có

hồ sơ thiết kế, cài đặt, giao diện…

 Chương 4 KẾT LUẬN VÀ KIẾN NGHỊ: Nêu những kết luận chung, khẳngđịnh những kết quả đạt được, những đóng góp, đề xuất mới và kiến

5

Chương 2: Cơ sở lý thuyết

- 2.1.1 Kiến trúc Restful API

RESTful API là một kiểu kiến trúc phần mềm được sử dụng để thiết kế các dịch

vụ web (web services) một cách đơn giản, linh hoạt và dễ dàng hiểu REST là viếttắt của Representational State Transfer, là một phong cách thiết kế các giao diệnứng dụng phân tán

- Resource: Tài nguyên là một đối tượng hoặc dữ liệu mà một ứng dụng có thểtruy cập hoặc thao tác Mỗi tài nguyên được định danh bằng một URI(Uniform Resource Identifier)

- Method: Phương thức là các hành động mà ứng dụng có thể thực hiện đốivới các tài nguyên, thường là các phương thức HTTP như GET, POST,PUT, DELETE

- Stateless: RESTful API là stateless, nghĩa là mọi yêu cầu từ client đều chứa

đủ thông tin cần thiết để xử lý yêu cầu, không cần phụ thuộc vào trạng tháicủa server trước đó

- Representation: Biểu diễn là cách mà dữ liệu được truyền tải giữa client vàserver, thường sử dụng các định dạng như JSON, XML

- Uniform Interface: RESTful API cung cấp một giao diện thao tác đồng nhấtgiữa client và server, dễ dàng hiểu và sử dụng

- Tương tác Client-Server: RESTful API tách biệt rõ ràng giữa client vàserver, cho phép phát triển và triển khai chúng độc lập nhau

- Layered System: RESTful API cho phép sử dụng cấu trúc lớp, trong đó mỗilớp có thể xử lý yêu cầu từ client trước khi chuyển tiếp đến lớp tiếp theo

- Cacheable: RESTful API có thể được cache để cải thiện hiệu suất và giảmtải cho server

RESTful API cung cấp một cách tiếp cận linh hoạt và hiệu quả để xây dựng cácdịch vụ web, đặc biệt là trong các ứng dụng phân tán và ứng dụng sử dụng côngnghệ web hiện đại

- 2.1.2 Mô hình MVC

Mô hình MVC (Model-View-Controller) là một mô hình thiết kế phần mềmđược sử dụng rộng rãi trong lập trình web để phân chia các thành phần của ứngdụng web thành ba phần chính: Model, View và Controller Mô hình MVC giúpcho việc phát triển ứng dụng web trở nên dễ dàng hơn bằng cách phân chia ứngdụng thành các thành phần độc lập và có thể tái sử dụng

6

- Model: là thành phần chứa dữ liệu và các phương thức liên quan đến dữ liệu.Trong mô hình MVC, model đóng vai trò là trung tâm của ứng dụng, nơi lưutrữ và xử lý dữ liệu Model có thể giao tiếp với cơ sở dữ liệu hoặc các tàinguyên khác để lấy hoặc lưu trữ dữ liệu.

- View: là thành phần chứa giao diện người dùng View thường được thựchiện bằng HTML, CSS và JavaScript, và có nhiệm vụ hiển thị dữ liệu từmodel cho người dùng View không thực hiện thao tác trực tiếp với dữ liệu,

mà chỉ hiển thị nó theo cách được định nghĩa trong controller

- Controller: là thành phần điều khiển luồng xử lý của ứng dụng Controllernhận các yêu cầu từ người dùng thông qua giao diện người dùng và xử lý nóbằng cách thực hiện các hoạt động liên quan đến model và view Controller

là nơi xác định xem model nào sẽ được sử dụng để lấy dữ liệu và view nào

sẽ được sử dụng để hiển thị dữ liệu

Mô hình MVC giúp cho việc phát triển ứng dụng web trở nên dễ dàng hơn bằngcách phân chia ứng dụng thành các thành phần độc lập và có thể tái sử dụng Điềunày giúp cho việc bảo trì và mở rộng ứng dụng trở nên dễ dàng hơn Ngoài ra, môhình MVC còn giúp cho các nhà phát triển có thể tập trung vào từng phần của ứngdụng một cách độc lập, không ảnh hưởng đến các phần khác của ứng dụng

- 2.1.3 Phương pháp SPA

Single Page Application (SPA) là một loại ứng dụng web mà tất cả các trang vànội dung của ứng dụng được tải về một lần duy nhất khi người dùng truy cập lầnđầu tiên Sau đó, các trang mới hoặc nội dung được tải xuống bằng cách sử dụngJavaScript mà không cần phải tải lại trang hoàn toàn

 HTML, CSS và JavaScript: SPA sử dụng HTML, CSS và JavaScript để tạo

ra giao diện người dùng và quản lý tương tác với người dùng

 AJAX: SPA sử dụng công nghệ AJAX (Asynchronous JavaScript and XML)

để tải dữ liệu từ máy chủ mà không cần phải tải lại toàn bộ trang web

 Router: SPA thường sử dụng một router để quản lý các trạng thái của ứngdụng và điều hướng giữa các trang hoặc thành phần khác nhau mà khôngcần phải tải lại toàn bộ trang

 MVC hoặc MVVM: SPA thường tuân thủ mô hình MVC Controller) hoặc MVVM (Model-View-ViewModel) để tổ chức mã nguồn

(Model-View-và quản lý dữ liệu, hiển thị (Model-View-và logic ứng dụng

 Performance: SPA cung cấp trải nghiệm người dùng mượt mà và nhanhchóng hơn, do không cần tải lại toàn bộ trang web mỗi khi người dùng thựchiện hành động

 Client-side Rendering: Trong SPA, việc rendering được thực hiện phần lớntrên phía máy khách (client-side), giúp giảm bớt công việc cho máy chủ vàcải thiện hiệu suất

7

 State Management: SPA thường sử dụng các thư viện hoặc frameworks nhưRedux, Vuex để quản lý trạng thái ứng dụng và chia sẻ dữ liệu giữa cácthành phần

 SEO (Search Engine Optimization): Mặc dù SPA có thể gặp khó khăn trongviệc tối ưu hóa cho các công cụ tìm kiếm, nhưng các kỹ thuật như server-side rendering hoặc pre-rendering có thể được sử dụng để cải thiện điều này.Single Page Application đã trở thành một xu hướng phổ biến trong phát triểnweb hiện đại, mang lại trải nghiệm người dùng tốt hơn và hiệu suất cao hơn chocác ứng dụng web

8

2.2 Công nghệ

- 2.2.1 Java Spring Boot

Hình 2.2.1: Java Spring Boot

Java Spring Boot là một framework phát triển ứng dụng web và microservices trênnền tảng Java, được xây dựng trên cơ sở của Spring Framework

- Đặc điểm của Java Spring Boot

 Tính đơn giản và tiện lợi: Spring Boot giúp giảm bớt sự phức tạp củaviệc cấu hình và triển khai ứng dụng bằng cách cung cấp các cấu hìnhmặc định tự động và tích hợp sẵn

 Tích hợp sẵn với Spring Framework: Spring Boot được xây dựng trên cơ

sở của Spring Framework, nên tích hợp nhiều tính năng của SpringFramework như Dependency Injection, Aspect-Oriented Programming(AOP), và Spring MVC

 Embedded Server: Spring Boot đi kèm với các máy chủ nhúng nhưTomcat, Jetty hoặc Undertow, giúp bạn triển khai ứng dụng một cách dễdàng mà không cần phải cấu hình máy chủ riêng biệt

 Auto-Configuration: Spring Boot cung cấp các cấu hình mặc định tựđộng dựa trên các thư viện mà bạn sử dụng trong dự án của mình, giúpgiảm thời gian cấu hình và tăng hiệu suất phát triển

 Spring Boot Starter: Spring Boot Starter là các module mà bạn có thể sửdụng để cấu hình ứng dụng của mình dễ dàng hơn, bao gồm các gói phụthuộc, cấu hình và các bean cần thiết

- Thành phần của Java Spring Boot

 Spring Boot Starter: Cung cấp các dependency tự động để bắt đầu pháttriển ứng dụng, bao gồm các module như spring-boot-starter-web, spring-boot-starter-data-jpa, spring-boot-starter-security, và nhiều hơn nữa

9

 Spring Boot Auto-Configuration: Tự động cấu hình các thành phần củaứng dụng dựa trên các thư viện và các cấu hình mặc định EmbeddedServer: Cung cấp máy chủ nhúng như Tomcat, Jetty hoặc Undertow đểchạy ứng dụng Spring Boot.

 Spring Boot Actuator: Cung cấp các tiện ích giám sát và quản lý ứngdụng, bao gồm các endpoint để kiểm tra trạng thái, metrics, logging vànhiều hơn nữa

 Spring Boot DevTools: Cung cấp các công cụ hỗ trợ phát triển như táikhởi động nhanh chóng (hot reloading) và debug dễ dàng hơn

 Spring Boot CLI (Command Line Interface): Cung cấp một giao diệndòng lệnh để tạo và chạy ứng dụng Spring Boot một cách nhanh chóng.Spring Boot Testing: Hỗ trợ cho việc viết các bài kiểm tra và kiểm thửcho ứng dụng bằng cách sử dụng các framework như JUnit và TestNG

- 2.2.2 ReactJS

Hình 2.2.2: ReactJS

- React là một thư viện JavaScript front-end mã nguồn mở và miễn phí để xây

dựng giao diện người dùng dựa trên các thành phần UI riêng lẻ Nó đượcphát triển và duy trì bởi Meta và cộng đồng các nhà phát triển và công ty cánhân

- Đặc điểm của React:

o Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cúpháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa codeHTML và Javascript Ta có thể them vào các đoạn HTML vào tronghàm render mà không cần phải nối chuỗi Đây là đặc tính thú vị củaReactjs Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạođối tượng HTML bằng bộ biến đổi JSX

o Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quêncài đặt ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạndebug code dễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ có

10

cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOMthông thường.

o Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test casegiao diện vì virtual DOM được cài đặt hoàn toàn bằng JS

- 2.2.3 MySQL

Hình 2.2.3: MySQLMySQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở phổ biến, được

sử dụng rộng rãi trên toàn thế giới cho các ứng dụng web và ứng dụng doanhnghiệp

- Đặc điểm của MySQL

 Mã nguồn mở và Miễn phí: MySQL là một hệ quản trị cơ sở dữ liệu mãnguồn mở, miễn phí cho sử dụng và phân phối

 Đa Nền Tảng: MySQL hỗ trợ đa nền tảng, có thể chạy trên nhiều hệ điềuhành như Windows, Linux, macOS, và các nền tảng khác

 Hiệu Suất Cao: MySQL được tối ưu hóa để đạt được hiệu suất cao, cókhả năng xử lý hàng nghìn truy vấn mỗi giây trên các cơ sở dữ liệu lớn

 Bảo mật: MySQL cung cấp nhiều tính năng bảo mật như quản lý ngườidùng, quyền truy cập, mã hóa dữ liệu và SSL

 Dễ Sử Dụng: MySQL có một giao diện dễ sử dụng và cú pháp SQL rấtlinh hoạt, giúp người dùng thực hiện các thao tác cơ sở dữ liệu một cách

 MySQL Server: MySQL Server là thành phần chính của hệ quản trị cơ sở

dữ liệu MySQL Nó là nơi lưu trữ và quản lý các cơ sở dữ liệu, bảng, và

dữ liệu

 MySQL Client: MySQL Client là các công cụ hoặc ứng dụng cho phépngười dùng tương tác với MySQL Server, thực hiện các truy vấn SQL,quản lý cơ sở dữ liệu và thực hiện các tác vụ khác

 Cơ sở dữ liệu: Cơ sở dữ liệu trong MySQL là nơi lưu trữ các bảng và dữliệu Mỗi cơ sở dữ liệu có thể chứa nhiều bảng và được xác định bằng tênduy nhất

 Bảng (Table): Bảng là một tập hợp các dòng và cột dữ liệu, được tổ chứcthành các hàng và cột Mỗi bảng có một tên duy nhất và các cột địnhnghĩa các trường dữ liệu

 Trường (Field): Trường là một phần của một bảng, đại diện cho một loại

dữ liệu cụ thể như số nguyên, chuỗi, hoặc ngày tháng

 Truy vấn (Query): Truy vấn là một lệnh được sử dụng để truy xuất hoặcthay đổi dữ liệu trong cơ sở dữ liệu, thường được viết bằng ngôn ngữSQL

- 2.2.4 GitHub

Hình 2.2.4: GitHubGitHub là một dịch vụ nổi tiếng cung cấp kho lưu trữ mã nguồn Git cho các dự

án phần mềm Github có đầy đủ những tính năng của Git, ngoài ra nó còn bổ sungnhững tính năng về social để các developer tương tác với nhau

12

- Vài thông tin về Git:

 Là công cụ giúp quản lý source code tổ chức theo dạng dữ liệu phân tán

 Giúp đồng bộ source code của team lên 1 server

 Hỗ trợ các thao tác kiểm tra source code trong quá trình làm việc (diff,check modifications, show history, merge source, …)

GitHub có 2 phiên bản: miễn phí và trả phí Với phiên bản có phí thường đượccác doanh nghiệp sử dụng để tăng khả năng quản lý team cũng như phân quyềnbảo mật dự án

Còn lại thì phần lớn chúng ta đều sử dụng Github với tài khoản miễn phí để lưutrữ source code

GitHub cung cấp các tính năng social networking như feeds, followers, vànetwork graph để các developer học hỏi kinh nghiệm của nhau thông qua lịch sửcommit

Nếu một comment để mô tả và giải thích một đoạn code Thì với Github,commit message chính là phần mô tả hành động mà bạn thực hiện trên sourcecode

GitHub trở thành một yếu tố có sức ảnh hưởng lớn trong cộng động nguồn mở.Cùng với Linkedin, Github được coi là một sự thay thế cho CV của bạn Các nhàtuyển dụng cũng rất hay tham khảo Github profile để hiểu về năng lực coding củaứng viên

- Tính năng của GitHub

 GitHub được coi là một mạng xã hội dành cho lập trình viên lớn nhất và

dễ dùng nhất với các tính năng cốt lõi như: Wiki, issue, thống kê, đổi tênproject, project được đặt vào namespace là user

 Watch project: theo dõi hoạt động của project của người khác Xem quátrình người

 ta phát triển phần mềm thế nào, project phát triển ra sao

 Follow user: theo dõi hoạt động của người khác

 Có 2 cách tiếp cận GitHub: Tạo project của riêng mình Contribute choproject có sẵn: fork project có sẵn của người khác, sửa đổi, sau đó đềnghị họ cập nhật sửa đổi của mình (tạo pull request)

- Một vài khái niệm về Git bạn cần nắm

 git: là prefix của các lệnh được sử dụng dưới CLI

 branch: được hiểu như là nhánh, thể hiện sự phân chia các version khi 2version đó có sự sai khác nhất định và 2 version đều có sự khác nhau

 commit: là một điểm trên cây công việc (Work Tree) hay gọi là cây pháttriển công việc

 clone: được gọi là nhân bản, hay thực hiện nhân bản Sử dụng để clonecác project, repository trên các hệ thống chạy trên cơ sở là git, ví dụ như:

13

bitbucket, github, gitlab, cor (1 sản phẩm mã nguồn mở cho phép ngườidùng tự tạo git server cho riêng mình trên vps, server), … Việc clone này

sẽ sao chép repository tại commit mình mong muốn, dùng để tiếp tụcphát triển Thao tác này sẽ tải toàn bộ mã nguồn, dữ liệu về máy tính củabạn

 folk: Folk là thao tác thực hiện sao chép repository của chủ sở hữu khác

về git account của mình sử dụng và đối xử như 1 repository do mình tạora

 repository: Kho quản lý dữ liệu, là nơi lưu trữ các dữ liệu, mã nguồn củaproject

 tag: sử dụng để đánh dấu một commit khi bạn có quá nhiều commit tớimức không thể kiểm soát được

 remote: sử dụng để điều khiển các nhánh từ một repository trên gitserver, đối xử với các nhánh trên remote tương tự như đối xử với cácnhánh trên local

 diff: So sánh sự sai khác giữa phiên bản hiện tại với phiên bản muốn sosánh, nó sẽ thể hiện các sự khác nhau

 gitignore: file mặc định của git sử dụng để loại bỏ (ignore) các thư mục,file mà mình không muốn push lên git server

2.3 Cơ sở dữ liệu

- 2.3.1 Đặc tả yêu cầu

 Website Dream Chaser là một website học trực tuyến nhằm mục đíchcung cấp các khóa học miễn phí và trả phí cho học sinh, sinh viên muốnhọc về ngành Công nghệ thông tin

 Trước tiên nói về phần người dùng, người dùng sẽ tạo tài khoản bằngcách cung cấp đầy đủ các thông tin về: họ tên, số điện thoại, ngày sinh,địa chỉ email Ngoài ra người dùng có thể sử dụng Google, Facebook,Github để đăng ký nhanh chóng nhờ việc sử dụng Open Id

 Sau khi đăng ký xong, hệ thống sẽ gửi đường dẫn xác thực tài khoản vềđịa chỉ email mà người dùng đã nhập, nếu người dùng bỏ lỡ phần xácthực tài khoản thì người dùng có thể nhấn vào phần gửi lại đường dẫnxác nhận tài khoản Khi đăng ký thành công người dùng có thể sử dụng

để đăng nhập vào trang web, xem thông tin tài khoản, cập nhật thông tintài khoản, thay đổi mật khẩu

14

 Về phần chính của trang web, đầu tiên khi đến với giao diện chính, cácdanh mục khóa học sẽ được hiện lên với cái thông tin tóm tắt như: tiêu

đề, mô tả ngắn gọn, thể loại, hình ảnh demo

 Những danh mục bao gồm: Khóa học đề xuất, khóa học được xem nhiềunhất và khóa học mới nhất Ngoài ra trên thanh tiêu đề trang web sẽ chứanhững thao tác nhanh như, tìm kiếm, xem theo thể loại, xem theo loạikhóa học

 Khi người dùng nhấn vào xem chi tiết khóa học thì các thông tin sẽ đượchiện ra bao gồm: tiêu đề, nội dung, người đăng, ngày đăng, video khóahọc và danh sách tệp đính kèm(Nếu có) Người dùng có thể bình luậntrực tiếp trên khóa học nhưng khi sử dụng tính năng này thì đăng nhập làyêu cầu bắt buộc

 Đặc biệt khi bình luận trên trang web sẽ có phần kiểm tra những bìnhluận tiêu cực tự động, bình luận có thể bị ẩn hoặc xóa đi tùy vào mức độnghiêm trọng Người dùng có thể chọn học đăng ký những khóa họcmiễn phí để học ngay, hoặc mua những khóa học có trả phí bằng cáchthanh toán qua các cổng thanh toán như VN Pay hoặc Momo được cungcấp

 Khi trong quá trình tham gia học một khóa học tại trang Web người dùng

sẽ được ghi nhận tiến độ khi học một bài giảng trong một khoảng thờigian nhất định, sau đó người dùng có thể chuyển qua các bài học tiếptheo của khóa học đó Ngươi dùng có thể quản lý những khóa học màmình đăng ký, theo dõi cũng như quản lý tiến độ các khóa học mà mìnhđang học, khi hoàn thành một khóa học người dùng sẽ thực hiện bài kiểmtra được đính kèm trong khóa học để xác nhận hoàn thành khóa học

 Về phần quản lý trang web, quản trị viên sẽ có cách chức năng liên quanđến cách chức năng của trang web và phân quyền trên hệ thống Quản trịviên có thể gán quyền cho các hành động trên trang web, quản trị viên cóthể xóa các tài khoản trên hệ thống, quản trị viên cũng có thể cấp quyềnhoặc xóa quyền của các tài khoản

 Ngoài ra quản trị viên cũng có các chức năng quản lý về khóa học, bìnhluận Quản trị viên được thiết kế những công cụ quản lý cơ bản dànhriêng cho quản trị viên nhằm giúp việc quản lý, thống kê và định hướngphát triển cho khác khóa học sau này tại Website

15