Xây Dựng Website Bán Khóa Học Sử Dụng ReactJS Và SpringBoot

Xây dựng website bán khóa học là một trong những xu hướng phát triển mạnh mẽ trong thời đại… 153 trang · HCMC University of Technology and Education · 2022.

• Tác giả: Nguyen Quyet Sinh
• Người hướng dẫn: Ph.D. Vinh Thinh Le
• Trường học: HCMC University of Technology and Education
• Chuyên ngành: Information Technology
• Đề tài: Xây Dựng Website Bán Khóa Học Với ReactJS Và SpringBoot
• Loại tài liệu: graduation thesis
• Năm xuất bản: 2022
• Địa điểm: Ho Chi Minh City

Mục lục chi tiết

• PREFACE
• 1. CHƯƠNG 1: THEORETICAL BASIS
• 1.1. What is Java language?
• 1.2. Features of the Java language
• 1.3. Advantages of Java
• 1.4. Disadvantages of Java
• 1.5. What is JavaScript?
• 1.6. Advantages of JavaScript
• 1.7. Disadvantages of JavaScript
• 1.8. How JavaScript works
• 1.9. What is Spring?
• 1.10. Advantages of Spring
• 1.11. What is Springboot?
• 1.12. Features of Springboot
• 1.13. Advantages of Springboot
• 1.14. Disadvantages of Springboot
• 1.15. Distinguish Springboot, SpringMVC and Spring
• 1.16. What is ReactJS?
• 1.17. Features of ReactJS
• 1.18. Advantages of ReactJS
• 1.19. Disadvantages of ReactJS
• 1.20. Difference between Angular and React
• 1.21. What is MySQL?
• 1.22. Advantages of MySQL
• 1.23. Disadvantages of MySQL
• 2. CHƯƠNG 2: CURRENT STATUS SURVEY
• 2.1. FUNIX
• 3. CHƯƠNG 3: SYSTEM ANALYSIS AND DESIGN
• 3.1. Client side feature
• 3.2. Admin side feature
• 3.3. USE CASE DIAGRAM AND USE CASE DESCRIPTION
• 3.3.1. Use case diagram
• 3.3.2. Use case description
• 3.3.3. Login, Register UI
• 3.3.4. Customer UI
• 4. CHƯƠNG 4: INSTALL AND TEST
• 4.1. COMPARE WITH REFERENCED WEBSITES
• REFERENCES
• ACKNOWLEDGMENTS

Tóm tắt

I. Tổng Quan Về Xây Dựng Website Bán Khóa Học Với ReactJS Và SpringBoot

Xây dựng website bán khóa học là một trong những xu hướng phát triển mạnh mẽ trong thời đại công nghệ số. Sự kết hợp giữa ReactJS và SpringBoot mang lại nhiều lợi ích cho việc phát triển ứng dụng web. ReactJS giúp tạo ra giao diện người dùng tương tác, trong khi SpringBoot cung cấp nền tảng vững chắc cho backend. Bài viết này sẽ đi sâu vào các khía cạnh quan trọng của việc xây dựng website bán khóa học.

1.1. Tại Sao Nên Chọn ReactJS Và SpringBoot

ReactJS và SpringBoot là hai công nghệ phổ biến trong phát triển web. ReactJS cho phép xây dựng giao diện người dùng linh hoạt và dễ bảo trì, trong khi SpringBoot giúp phát triển backend nhanh chóng với cấu trúc rõ ràng. Sự kết hợp này giúp tối ưu hóa quy trình phát triển và nâng cao trải nghiệm người dùng.

1.2. Lợi Ích Của Việc Bán Khóa Học Trực Tuyến

Bán khóa học trực tuyến mang lại nhiều lợi ích cho cả người học và người dạy. Người học có thể tiếp cận kiến thức mọi lúc, mọi nơi, trong khi người dạy có thể mở rộng đối tượng học viên mà không bị giới hạn về địa lý. Điều này tạo ra một môi trường học tập linh hoạt và hiệu quả.

II. Những Thách Thức Khi Xây Dựng Website Bán Khóa Học

Mặc dù việc xây dựng website bán khóa học với ReactJS và SpringBoot mang lại nhiều lợi ích, nhưng cũng không thiếu những thách thức. Các vấn đề như bảo mật, hiệu suất và khả năng mở rộng cần được xem xét kỹ lưỡng. Việc quản lý dữ liệu và tích hợp hệ thống thanh toán cũng là những yếu tố quan trọng.

2.1. Vấn Đề Bảo Mật Trong Giao Dịch Trực Tuyến

Bảo mật là một trong những yếu tố quan trọng nhất khi xây dựng website bán khóa học. Cần đảm bảo rằng thông tin người dùng và giao dịch được bảo vệ an toàn. Việc sử dụng API RESTful và mã hóa dữ liệu là những biện pháp cần thiết để bảo vệ thông tin.

2.2. Tối Ưu Hiệu Suất Website

Hiệu suất của website ảnh hưởng trực tiếp đến trải nghiệm người dùng. Cần tối ưu hóa mã nguồn và sử dụng các công nghệ như caching để giảm thời gian tải trang. Việc kiểm tra hiệu suất định kỳ cũng rất quan trọng để đảm bảo website hoạt động mượt mà.

III. Phương Pháp Xây Dựng Website Bán Khóa Học Hiệu Quả

Để xây dựng một website bán khóa học hiệu quả, cần có một quy trình rõ ràng. Việc phân tích yêu cầu, thiết kế giao diện và phát triển backend là những bước quan trọng. Sử dụng ReactJS cho frontend và SpringBoot cho backend sẽ giúp tối ưu hóa quy trình phát triển.

3.1. Phân Tích Yêu Cầu Và Thiết Kế Giao Diện

Phân tích yêu cầu là bước đầu tiên trong quá trình phát triển. Cần xác định rõ các tính năng cần có như quản lý khóa học, thanh toán và tương tác người dùng. Thiết kế giao diện cần thân thiện và dễ sử dụng để thu hút người học.

3.2. Phát Triển Backend Với SpringBoot

SpringBoot cung cấp một nền tảng mạnh mẽ cho việc phát triển backend. Việc sử dụng SpringBoot giúp giảm thiểu thời gian phát triển và dễ dàng tích hợp với các dịch vụ khác. Cần chú ý đến việc xây dựng API RESTful để kết nối với frontend.

IV. Ứng Dụng Thực Tiễn Của Website Bán Khóa Học

Website bán khóa học không chỉ là nơi cung cấp kiến thức mà còn là một công cụ quản lý hiệu quả. Các tính năng như quản lý người dùng, thống kê khóa học và hệ thống thanh toán giúp tối ưu hóa quy trình học tập. Việc áp dụng công nghệ hiện đại như ReactJS và SpringBoot sẽ nâng cao trải nghiệm người dùng.

4.1. Quản Lý Khóa Học Và Người Dùng

Hệ thống quản lý khóa học cho phép người dạy dễ dàng cập nhật nội dung và theo dõi tiến độ học tập của người học. Quản lý người dùng giúp tạo ra một cộng đồng học tập tích cực và hỗ trợ lẫn nhau.

4.2. Hệ Thống Thanh Toán An Toàn

Hệ thống thanh toán cần được thiết kế an toàn và dễ sử dụng. Việc tích hợp các phương thức thanh toán phổ biến như thẻ tín dụng và ví điện tử sẽ giúp người học dễ dàng thực hiện giao dịch.

V. Kết Luận Về Tương Lai Của Website Bán Khóa Học

Xây dựng website bán khóa học với ReactJS và SpringBoot không chỉ là một xu hướng mà còn là một nhu cầu thiết yếu trong thời đại số. Tương lai của giáo dục trực tuyến sẽ ngày càng phát triển với sự hỗ trợ của công nghệ. Việc áp dụng các công nghệ mới sẽ giúp nâng cao chất lượng giáo dục và mở rộng cơ hội học tập cho mọi người.

5.1. Xu Hướng Phát Triển Giáo Dục Trực Tuyến

Giáo dục trực tuyến đang trở thành xu hướng toàn cầu. Việc áp dụng công nghệ vào giáo dục sẽ giúp nâng cao chất lượng và hiệu quả học tập. Các nền tảng học trực tuyến sẽ ngày càng đa dạng và phong phú.

5.2. Cơ Hội Và Thách Thức Trong Tương Lai

Mặc dù có nhiều cơ hội phát triển, nhưng cũng cần đối mặt với những thách thức như cạnh tranh và yêu cầu về chất lượng. Việc không ngừng cải tiến và đổi mới sẽ là yếu tố quyết định cho sự thành công của website bán khóa học.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh cuộc Cách mạng Công nghiệp 4.0 đang diễn ra mạnh mẽ, việc ứng dụng công nghệ thông tin vào lĩnh vực giáo dục đã thúc đẩy sự phát triển của các mô hình đào tạo trực tuyến (E-Learning). Tại các quốc gia phát triển như Hoa Kỳ, Hàn Quốc và Nhật Bản, giáo dục trực tuyến đã trở thành phương thức phổ biến nhờ khả năng xóa bỏ rào cản về không gian và thời gian. Tại Việt Nam, nhu cầu học tập linh hoạt, chủ động sắp xếp thời gian ngày càng mở rộng từ bậc đại học, cao đẳng đến các cấp học phổ thông và các trung tâm đào tạo chuyên môn.

Mặc dù thị trường đã xuất hiện nhiều nền tảng học trực tuyến, nhiều hệ thống vẫn bộc lộ những hạn chế nhất định như chi phí cao, thiếu công cụ tự đánh giá tiến độ học tập, hoặc giao diện và tính năng chưa tối ưu hóa trải nghiệm người dùng mới. Nhằm giải quyết các vấn đề thực tiễn đó, đề tài "Xây dựng website bán khóa học với ReactJS và SpringBoot" (tên tiếng Anh: Building a sell course website with ReactJS and SpringBoot) đã được thực hiện.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài được xác định cụ thể:

1. Tìm hiểu cơ sở lý thuyết về ngôn ngữ lập trình Java, JavaScript và các công nghệ phát triển ứng dụng web bao gồm ReactJS, Spring Boot và hệ quản trị cơ sở dữ liệu quan hệ MySQL.
2. Khảo sát hiện trạng một số nền tảng học trực tuyến tiêu biểu để phân tích ưu điểm, nhược điểm và rút ra các yêu cầu chức năng.
3. Phân tích, thiết kế hệ thống bao gồm sơ đồ ca sử dụng (Use Case), sơ đồ lớp (Class Diagram), sơ đồ quan hệ thực thể (ERD) và mô hình cơ sở dữ liệu.
4. Triển khai xây dựng website bán và học khóa học trực tuyến hoàn chỉnh với hai phân hệ chính: phân hệ người dùng (Customer/Client side) và phân hệ quản trị (Admin side).
5. Thực hiện kiểm thử hệ thống (System Testing) và đối chiếu kết quả đạt được với các website tham chiếu.

Về phạm vi và đối tượng nghiên cứu:

• Đối tượng nghiên cứu: Quy trình vận hành của hệ thống thương mại điện tử kết hợp học trực tuyến (mua khóa học, xem bài giảng video, làm bài kiểm tra trắc nghiệm, viết blog, tạo ghi chú, cấp chứng chỉ) và kỹ thuật phát triển ứng dụng web Full-stack sử dụng kiến trúc phân tách Frontend (ReactJS) và Backend (Spring Boot RESTful API).
• Phạm vi không gian và tổ chức: Đồ án tốt nghiệp đại học chuyên ngành Công nghệ phần mềm, Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (HCMUTE), mã số lưu trữ tài liệu SKL 008573.
• Phạm vi thời gian: Đề tài được triển khai thực hiện và hoàn thành nghiệm thu, bảo vệ trong giai đoạn 2021 – 2022 dưới sự hướng dẫn của TS. Lê Vĩnh Thịnh và cán bộ phản biện là TS. Huỳnh Xuân Phụng.

---

Cơ sở lý thuyết và phương pháp

Khung lý thuyết và công nghệ sử dụng

Nghiên cứu xây dựng trên nền tảng các công nghệ phần mềm tiêu chuẩn trong phát triển ứng dụng web phân tán:

• Ngôn ngữ Java và Spring Framework / Spring Boot: Java là ngôn ngữ lập trình hướng đối tượng độc lập nền tảng dựa trên nguyên lý "Write Once, Run Anywhere" (WORA), vận hành thông qua máy ảo Java (JVM), hỗ trợ xử lý đa luồng (Multi-threading) và quản lý bộ nhớ tự động bằng cơ chế Garbage Collection. Spring Boot là một mô-đun mở rộng từ Spring Framework nhằm cung cấp khả năng phát triển ứng dụng nhanh (Rapid Application Development - RAD). Spring Boot loại bỏ nhu cầu cấu hình XML phức tạp, hỗ trợ cấu hình tự động (Auto-configuration), tích hợp máy chủ nhúng Tomcat/Jetty và chuẩn hóa việc phát triển các dịch vụ RESTful API độc lập.
• Ngôn ngữ JavaScript và Thư viện ReactJS: JavaScript hoạt động phía máy khách (Client-side), xử lý các tương tác động trên trình duyệt. ReactJS là thư viện mã nguồn mở do Facebook phát triển, tập trung vào tầng giao diện (View). ReactJS ứng dụng mô hình Component hóa giao diện, cú pháp mở rộng JSX, cơ chế luồng dữ liệu một chiều (Props/State) và công nghệ DOM ảo (Virtual DOM) giúp tối ưu hóa tốc độ cập nhật giao diện người dùng.
• Hệ quản trị cơ sở dữ liệu quan hệ MySQL: Hệ thống quản trị cơ sở dữ liệu nguồn mở dựa trên ngôn ngữ SQL, cung cấp khả năng lưu trữ, xử lý giao dịch an toàn và tối ưu hóa truy vấn dữ liệu cho các ứng dụng web quy mô lớn.

Công nghệ / Thành phần	Vai trò trong hệ thống	Đặc tính kỹ thuật nổi bật
Java / Spring Boot	Backend API Server	Cấu hình tự động (Auto-config), máy chủ nhúng Tomcat, cung cấp RESTful API, quản lý phụ thuộc qua Starter POM
ReactJS / JavaScript	Frontend Client	Virtual DOM, kiến trúc dựa trên Component độc lập, cú pháp JSX, tích hợp thư viện giao diện Material-UI
MySQL	Cơ sở dữ liệu quan hệ	Quản lý bảng dữ liệu người dùng, khóa học, đơn hàng, bài viết blog, hỗ trợ toàn vẹn quan hệ thực thể

Tác giả đã lập các bảng so sánh lý thuyết chi tiết để làm rõ lý do lựa chọn công nghệ:

• So sánh Spring Boot và Spring truyền thống: Spring Boot giảm thiểu mã khuôn mẫu (boilerplate code), loại bỏ tệp cấu hình triển khai (deployment descriptor) và hỗ trợ máy chủ nhúng sẵn có thay vì phải cấu hình máy chủ thủ công như Spring.
• So sánh Spring Boot và Spring MVC: Spring Boot đóng gói các ứng dụng dựa trên Spring với các cấu hình mặc định hợp lý và xử lý đa tầng (Presentation, Business, Persistence, Database), trong khi Spring MVC thuần túy là khung làm việc dựa trên mô hình Model-View-Controller cho tầng web.
• So sánh ReactJS và Angular: React là thư viện tập trung vào thành phần giao diện, sử dụng Virtual DOM và hỗ trợ linh hoạt cấu trúc dự án, trong khi Angular là một Framework hoàn chỉnh sử dụng TypeScript, hỗ trợ ràng buộc dữ liệu hai chiều (Two-way data binding) và Incremental DOM.

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

• Phương pháp thu thập và nghiên cứu tài liệu: Nghiên cứu tài liệu kỹ thuật chuyên sâu về cú pháp, kiến trúc hoạt động của Java, JavaScript, Spring Boot Framework và ReactJS thông qua tài liệu chính thống và các khóa học trực tuyến.
• Phương pháp phân tích và khảo sát hiện trạng: Khảo sát trực tiếp các nền tảng E-Learning phổ biến trong và ngoài nước (Udemy, F8, W3Schools, Codelearn, Funix) để phân tích mô hình chức năng, giao diện và các mặt hạn chế của từng hệ thống.
• Phương pháp phân tích và thiết kế hướng đối tượng (OOAD): Sử dụng ngôn ngữ mô hình hóa hợp nhất (UML) để xây dựng biểu đồ ca sử dụng (Use Case Diagram), mô tả kịch bản sử dụng, thiết kế sơ đồ lớp (Class Diagram), sơ đồ quan hệ thực thể (ERD) và mô hình cơ sở dữ liệu quan hệ.
• Phương pháp kiểm nghiệm và đánh giá phần mềm: Thiết kế bảng kịch bản kiểm thử hệ thống (System Test Cases) nhằm kiểm tra tính chính xác của các luồng nghiệp vụ trên cả giao diện người dùng và giao diện quản trị.

---

Khảo sát hiện trạng các nền tảng E-Learning tham chiếu

Nhóm tác giả đã tiến hành khảo sát và đánh giá 5 website đào tạo trực tuyến nhằm rút ra cơ sở thực tiễn cho việc thiết kế hệ thống:

Nền tảng khảo sát	Ưu điểm ghi nhận	Hạn chế ghi nhận
Udemy	Quy mô toàn cầu, hỗ trợ đa ngôn ngữ, danh mục khóa học đa dạng, hỗ trợ thanh toán quốc tế qua PayPal, thường xuyên có chương trình ưu đãi.	Mức giá khóa học tương đối cao so với mặt bằng chung; thiếu hệ thống bài thi đánh giá sát sao quá trình tiến bộ của người học.
F8	Cung cấp bài học lập trình miễn phí cho người mới bắt đầu, hỗ trợ ghi chú mốc thời gian trên video, có bài kiểm tra qua từng video, hỗ trợ đóng góp bài viết.	Nội dung khóa học chưa thực sự đa dạng, quyền đăng tải khóa học chỉ giới hạn ở quản trị viên/chủ sở hữu website.
W3Schools	Nguồn tài liệu lập trình ngắn gọn, chuẩn hóa; tích hợp công cụ chạy và chỉnh sửa mã nguồn trực tiếp trên trình duyệt; cung cấp bài tập kiểm tra kiến thức.	Bản chất chủ yếu là hệ thống tài liệu đọc; tính năng học qua video bài giảng còn hạn chế về số lượng bài học.
Codelearn	Nền tảng do FPT hỗ trợ, tích hợp hệ thống thử thách thuật toán (coding challenge), bảng xếp hạng kỹ năng, diễn đàn hỏi đáp và các cuộc thi lập trình có thưởng.	Số lượng bài học còn ít, chủ yếu tập trung vào các bài học cơ bản miễn phí, thiếu các khóa học nâng cao chuyên sâu; phạm vi phục vụ trong nước.
Funix	Bài giảng được xây dựng từ đội ngũ chọn lọc, cấp chứng chỉ liên kết doanh nghiệp, có cán bộ hỗ trợ (Hannah/Mentor) theo dõi tiến độ học viên.	Học phí cao; mô hình phụ thuộc nhiều vào nhân sự hỗ trợ trực tiếp.

---

Thiết kế và triển khai hệ thống

Kiến trúc phân hệ và danh mục chức năng

Hệ thống được thiết kế theo mô hình tách biệt hoàn toàn giữa giao diện người dùng và máy chủ logic nghiệp vụ:

• Frontend (Client-side): Ứng dụng Single Page Application (SPA) phát triển bằng ReactJS, giao tiếp với máy chủ thông qua giao thức HTTP/HTTPS và định dạng dữ liệu JSON.
• Backend (Server-side): Kiến trúc dịch vụ phân tầng viết bằng Spring Boot, xử lý xác thực, logic nghiệp vụ, xử lý đơn hàng, điều phối bài giảng và kết nối cơ sở dữ liệu MySQL.

+-------------------------------------------------------------------+
|                     NGƯỜI DÙNG & QUẢN TRỊ VIÊN                    |
+-------------------------------------------------------------------+
+-------------------------------------------------------------------+
|                   TẦNG TRÌNH DIỄN (FRONTEND)                      |
|                  ReactJS SPA / Material-UI                        |
|  - Phân hệ Khách hàng (20 tính năng)                              |
|  - Phân hệ Quản trị Dashboard & Điều hành                         |
+-------------------------------------------------------------------+
                          RESTful API (JSON)
+-------------------------------------------------------------------+
|                   TẦNG NGHIỆP VỤ (BACKEND API)                    |
|                      Spring Boot Framework                        |
|  - Controller Layer (REST Endpoints)                              |
|  - Service Layer (Business Logic & Transactions)                  |
|  - Repository Layer (Spring Data / Persistence)                   |
+-------------------------------------------------------------------+
                           JDBC / ORM Driver
+-------------------------------------------------------------------+
|                   TẦNG DỮ LIỆU (DATABASE LAYER)                   |
|                        MySQL RDBMS Server                         |
|  (User, Course, Video, Order, Blog, Comment, Note, Certificate)   |
+-------------------------------------------------------------------+

Phân hệ người dùng (Client-side / Customer UI)

Phân hệ người dùng cung cấp 20 chức năng chính được mô tả chi tiết:

1. Sign up / Log in: Đăng ký tài khoản mới và đăng nhập vào hệ thống thông qua email và mật khẩu.
2. Manage account: Quản lý và cập nhật thông tin hồ sơ cá nhân của người dùng.
3. Change password: Thay đổi mật khẩu tài khoản với cơ chế xác thực mật khẩu cũ và kiểm tra tính trùng khớp của mật khẩu mới.
4. Change avatar: Cập nhật ảnh đại diện cá nhân lưu trữ trên hệ thống.
5. View course list: Hiển thị danh sách các khóa học hiện có trên website mà người dùng chưa đăng ký mua.
6. View course details: Xem thông tin chi tiết về nội dung, giảng viên, đề cương bài học và mức giá của khóa học.
7. Buy Course: Thực hiện quy trình đặt mua và thanh toán khóa học trực tuyến.
8. Manage personal course: Quản lý danh sách các khóa học mà tài khoản đã thanh toán thành công.
9. Learn Online: Giao diện học trực tuyến với trình phát video bài giảng chuyên dụng.
10. View list blog: Xem danh sách các bài viết chia sẻ kiến thức trên website.
11. Read blog: Đọc nội dung chi tiết của từng bài viết.
12. Write blog: Soạn thảo và xuất bản bài viết chia sẻ kiến thức mới lên cộng đồng.
13. Manage personal blog: Quản lý danh sách các bài viết do chính người dùng tạo ra.
14. Comment blog / course: Gửi bình luận, trao đổi ý kiến tại từng bài viết hoặc bài giảng khóa học.
15. Review course: Đánh giá xếp hạng sao và viết phản hồi chất lượng về khóa học.
16. Note: Công cụ tạo và lưu trữ ghi chú cá nhân gắn liền với nội dung bài học.
17. Schedule learning: Thiết lập thời gian biểu và lịch nhắc nhở học tập cá nhân.
18. Do quiz: Thực hiện bài kiểm tra trắc nghiệm cuối khóa để đánh giá mức độ tiếp thu kiến thức.
19. Certificate: Xem và tải về chứng chỉ hoàn thành khóa học sau khi vượt qua bài kiểm tra.
20. Guide for newbie: Hệ thống hướng dẫn thao tác sử dụng website cho người dùng mới.

Phân hệ quản trị (Admin-side UI)

Phân hệ dành riêng cho quản trị viên vận hành hệ thống:

• Dashboard & Statistics: Thống kê tổng quan về doanh thu, số lượng đơn hàng, số lượng người dùng và khóa học.
• Order management: Quản lý, tra cứu và xử lý trạng thái các đơn đặt hàng khóa học.
• User management: Quản lý danh sách tài khoản khách hàng, thông tin đăng ký và phân quyền truy cập.
• Course management: Quản lý danh mục khóa học (thêm mới khóa học, chỉnh sửa thông tin, cập nhật học phí).
• Video management: Quản lý danh sách các video bài giảng cấu thành từng khóa học cụ thể.
• Blog management: Quản lý bài viết cộng đồng, hỗ trợ tính năng khóa (Lock) hoặc mở khóa (Unlock) bài viết vi phạm tiêu chuẩn nội dung.

---

Nội dung chính theo từng chương

Chương 1: Cơ sở lý thuyết (Theoretical Basis)

Chương này tập trung trình bày tổng quan và phân tích chuyên sâu các công nghệ nền tảng cấu thành hệ thống. Nội dung bao gồm lịch sử phát triển của ngôn ngữ Java từ dự án Oak (1991) của James Gosling tại Sun Microsystems đến khi thuộc sở hữu của Oracle (2010), các đặc trưng về tính hướng đối tượng, cơ chế thông dịch bytecode qua JVM, tính năng đa luồng và an toàn bộ nhớ. Đối với JavaScript, chương làm rõ nguyên lý thực thi phía client và ưu nhược điểm khi nhúng vào HTML.

Chương 1 đi sâu phân tích kiến trúc Spring Framework và mô-đun Spring Boot với các tính năng: Auto-Configuration, SpringApplication runner, Embedded Server (Tomcat, Jetty, Undertow), Externalized Configuration và Profiles. Nhóm tác giả xây dựng 3 bảng so sánh kỹ thuật gồm: Bảng 1 (Sự khác biệt giữa Spring Boot và Spring), Bảng 2 (Sự khác biệt giữa Spring Boot và Spring MVC) và Bảng 3 (Sự khác biệt giữa Angular và ReactJS). Thư viện ReactJS được phân tích qua 4 khái niệm cốt lõi: JSX, Component, Props và State cùng cơ chế hoạt động của Virtual DOM. Cuối cùng, hệ quản trị cơ sở dữ liệu quan hệ MySQL được đánh giá về tính bảo mật, khả năng mở rộng và tốc độ xử lý truy vấn.

Chương 2: Khảo sát hiện trạng (Current Status Survey)

Chương 2 trình bày kết quả khảo sát thực tế 5 nền tảng học trực tuyến: Udemy, F8, W3Schools, Codelearn và Funix. Tại mỗi hệ thống, tác giả phân tích chi tiết hình ảnh giao diện thực tế, mô hình cung cấp bài học, các tính năng tương tác hỗ trợ học viên và chỉ ra các điểm hạn chế về chi phí, tính năng kiểm tra đánh giá hoặc mức độ phong phú của dữ liệu bài giảng. Những đánh giá này đóng vai trò làm căn cứ thực tiễn để nhóm tác giả xác định các tính năng cần xây dựng cho website của đề tài.

Chương 3: Phân tích và thiết kế hệ thống (System Analysis and Design)

Chương 3 là phần trọng tâm về kỹ thuật của đồ án, mô tả chi tiết:

• Danh mục yêu cầu chức năng phía người dùng (Bảng 4 với 20 chức năng) và phía quản trị viên (Bảng 5).
• Thiết kế sơ đồ ca sử dụng tổng quát (Use Case Diagram - Hình 6) và mô tả đặc tả chi tiết từng Use Case từ Bảng 6 đến Bảng 15.
• Thiết kế kiến trúc dữ liệu thông qua Sơ đồ lớp (Class Diagram - Hình 7), Sơ đồ quan hệ thực thể (ERD Diagram - Hình 8) và Mô hình cơ sở dữ liệu vật lý (Database Model - Hình 9).
• Thiết kế giao diện người dùng và đặc tả luồng xử lý Input - Process - Output cho hơn 28 màn hình chức năng (từ Hình 10 đến Hình 38 và tương ứng từ Bảng 16 đến Bảng 33), bao gồm: Giao diện đăng nhập/đăng ký, Dashboard quản trị, Quản lý đơn hàng, Quản lý khóa học, Thêm/sửa khóa học, Quản lý video, Quản lý blog, Quản lý khách hàng, Trang chủ người dùng, Chi tiết khóa học, Mua khóa học, Giao diện học trực tuyến (Learning course UI), Giao diện ghi chú (Note UI), Công cụ học tập (Learning Tools UI), Chứng chỉ hoàn thành (Certificate UI) và Giao diện xử lý lỗi truy cập.

Chương 4: Cài đặt và kiểm thử (Install and Test)

Chương 4 mô tả quá trình cài đặt triển khai phần mềm, thiết lập môi trường thực thi cho Spring Boot và ReactJS kết nối cơ sở dữ liệu MySQL. Nội dung chương trình bày bảng kịch bản kiểm thử hệ thống (Bảng 34: Test Case System) nhằm kiểm tra tính đúng đắn của các chức năng đăng nhập, đăng ký, tìm kiếm, mua khóa học, xem video, ghi chú và các chức năng quản trị. Đồng thời, chương thực hiện việc đối chiếu, so sánh các tính năng của sản phẩm hoàn thiện với các website tham chiếu đã khảo sát ở Chương 2.

---

Kết quả và đóng góp

Kết quả chính đạt được

• Về mặt lý thuyết: Nhóm nghiên cứu đã hệ thống hóa cơ sở lý luận và kỹ thuật lập trình Full-stack hiện đại, làm rõ cơ chế phối hợp giữa Spring Boot (REST API backend) và ReactJS (Single Page Application frontend), cũng như ưu nhược điểm của các công nghệ liên quan thông qua các bảng so sánh tiêu chuẩn.
• Về mặt thực nghiệm / sản phẩm: Xây dựng thành công hệ thống website bán khóa học và học trực tuyến hoạt động hoàn chỉnh, đáp ứng đầy đủ 20 chức năng phía người dùng (Client side) và 6 phân hệ quản lý phía quản trị (Admin side).
• Hệ thống dữ liệu và giao diện: Thiết kế chi tiết 38 sơ đồ/màn hình giao diện và 34 bảng đặc tả kỹ thuật, hoàn thành bộ kịch bản kiểm thử hệ thống (Test Cases) xác nhận tính ổn định của các luồng nghiệp vụ mua hàng, xem bài giảng, làm bài kiểm tra trắc nghiệm, tạo ghi chú và cấp phát chứng chỉ tự động.

Đóng góp của đề tài

• Đề xuất và hiện thực hóa mô hình học trực tuyến tích hợp đồng thời giữa việc tiếp thu kiến thức qua video, tự ghi chú theo thời gian thực (real-time note-taking), kiểm tra đánh giá tự động (Quiz) và môi trường viết blog chia sẻ kiến thức cộng đồng.
• Cung cấp tài liệu thiết kế hệ thống chi tiết từ sơ đồ Use Case, Class Diagram, ERD đến đặc tả giao diện theo chuẩn công nghệ phần mềm, làm tài liệu tham khảo cho các dự án phát triển web thương mại điện tử giáo dục.

---

Hạn chế và hướng nghiên cứu tiếp

Hạn chế

• Hệ thống tập trung chủ yếu vào việc hiện thực hóa các chức năng cốt lõi của quy trình mua và học khóa học ở mức độ đồ án tốt nghiệp đại học, các giải pháp phân tán chịu tải cao và tối ưu bộ nhớ đệm (Caching) cho cơ sở dữ liệu MySQL chưa được triển khai sâu.
• Các hình thức thanh toán và kiểm tra trắc nghiệm còn ở dạng quy trình mô phỏng chuẩn hóa, chưa tích hợp sâu các cổng thanh toán quốc tế phức tạp hay thuật toán sinh đề thi thích ứng.

Hướng phát triển tiếp

• Tích hợp thêm các cổng thanh toán trực tuyến đa dạng và bảo mật nâng cao.
• Nâng cấp hệ thống bài tập thực hành tương tác (viết và chạy mã trực tiếp tương tự như các nền tảng W3Schools hay Codelearn).
• Tối ưu hóa hiệu năng máy chủ backend, triển khai hệ thống kiến trúc Microservices và áp dụng các giải pháp phân tán cơ sở dữ liệu khi số lượng người dùng tăng trưởng quy mô lớn.

---

Giá trị tham khảo

Tài liệu đồ án tốt nghiệp này mang lại giá trị tham khảo thực tiễn cho:

• Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Nguồn tài liệu tham khảo toàn diện về phương pháp phân tích, thiết kế hệ thống phần mềm hướng đối tượng (OOAD) sử dụng UML, thiết kế ERD và mô hình hóa cơ sở dữ liệu quan hệ.
• Lập trình viên phát triển Web Full-stack: Cung cấp tài liệu so sánh lý thuyết chi tiết giữa các framework (Spring Boot vs Spring vs Spring MVC; ReactJS vs Angular) và mô hình triển khai ứng dụng tách biệt ReactJS - Spring Boot REST API kết hợp cơ sở dữ liệu MySQL.
• Người nghiên cứu hệ thống E-Learning: Cung cấp khung chức năng chuẩn hóa cho một cổng đào tạo trực tuyến bao gồm quản lý bài giảng, video player, trắc nghiệm đánh giá, hệ thống ghi chú cá nhân và mạng xã hội blog học tập.

---

Câu hỏi thường gặp

1. Sự khác biệt căn bản giữa Spring Boot và Spring Framework được nhóm tác giả chỉ ra trong đồ án là gì?

Theo Bảng 1 của đồ án, Spring Boot cung cấp tính năng cấu hình tự động (Auto-configuration) dựa trên các dependency khai báo trong starter POM, tích hợp sẵn máy chủ nhúng (Tomcat, Jetty) giúp tạo ứng dụng chạy độc lập (Stand-alone) mà không cần tệp mô tả triển khai (deployment descriptor) hay cấu hình XML phức tạp như Spring truyền thống. Ngoài ra, Spring Boot cung cấp công cụ dòng lệnh (CLI) và tích hợp sẵn cấu hình bảo mật thông qua spring-boot-starter-security.

2. Nhóm tác giả đã khảo sát những website nào và chỉ ra nhược điểm gì của nền tảng Udemy?

Nhóm tác giả đã tiến hành khảo sát 5 website đào tạo trực tuyến: Udemy, F8, W3Schools, Codelearn và Funix. Đối với nền tảng Udemy, tác giả đánh giá ưu điểm là quy mô toàn cầu, đa ngôn ngữ và hỗ trợ thanh toán PayPal; tuy nhiên nhược điểm là mức học phí tương đối đắt đỏ so với nhiều đối tượng người học và hệ thống chưa có nơi tổ chức thi cử để đánh giá lại toàn diện quá trình tiến bộ của học viên.

3. Phân hệ người dùng (Client-side) của website bao gồm những tính năng học tập và tương tác nào?

Theo Bảng 4 của đồ án, phân hệ khách hàng bao gồm 20 tính năng. Các tính năng học tập và tương tác chính bao gồm: xem danh sách và chi tiết khóa học, mua khóa học, học trực tuyến qua video (Learn Online), tạo ghi chú khi đang học (Note), đặt lịch học tập (Schedule learning), làm bài kiểm tra cuối khóa (Do quiz), xem và tải chứng chỉ hoàn thành (Certificate), viết và đọc bài viết chia sẻ kinh nghiệm (Write/Read blog), bình luận và đánh giá khóa học (Review/Comment).

4. Tại sao nhóm tác giả lại lựa chọn thư viện ReactJS thay vì Angular cho phần Frontend?

Theo phân tích tại Bảng 3, ReactJS là thư viện linh hoạt tập trung vào tầng giao diện (UI Component) sử dụng Virtual DOM giúp tối ưu hóa hiệu năng render khi dữ liệu thay đổi và cho phép tùy biến cấu trúc ứng dụng linh hoạt cùng cú pháp JSX. Trong khi đó, Angular là một framework hoàn chỉnh có dung lượng nặng hơn, ràng buộc quy chuẩn thiết kế chặt chẽ và sử dụng Incremental DOM.

5. Phân hệ quản trị (Admin side) của hệ thống hỗ trợ những chức năng quản lý cụ thể nào?

Theo Bảng 5 và các sơ đồ thiết kế trong đồ án, phân hệ quản trị cung cấp các công cụ cho người điều hành gồm: Đăng nhập quản trị, Bảng thống kê tổng quan (Dashboard/Statistics), Quản lý đơn đặt hàng của học viên (Order management), Quản lý tài khoản người dùng (Customer management), Quản lý danh mục khóa học (Course management - thêm, sửa, xóa), Quản lý video bài giảng (Video management) và Quản lý hệ thống bài viết blog (Blog management - bao gồm chức năng khóa hoặc mở khóa bài viết).

---

Kết luận

Đồ án tốt nghiệp "Xây dựng website bán khóa học với ReactJS và SpringBoot" của sinh viên Nguyễn Quyết Sinh và Chu Thanh Thông (Trường Đại học Sư phạm Kỹ thuật TP.HCM) đã hoàn thành đầy đủ các mục tiêu đề ra về mặt lý thuyết và thực tiễn. Đề tài đã hệ thống hóa cơ sở khoa học về lập trình web hiện đại, phân tích so sánh các công nghệ then chốt và khảo sát thực trạng các nền tảng E-Learning tiêu biểu. Hệ thống phần mềm được thiết kế bài bản theo quy trình kỹ thuật phần mềm chuẩn mực, hiện thực hóa thành công một nền tảng bán và học khóa học trực tuyến đa tính năng, góp phần đáp ứng nhu cầu chuyển đổi số và học tập linh hoạt trong kỷ nguyên số.

Trích đoạn nội dung tài liệu

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A SELL COURSE WEBSITE WITH REACTJS AND SPRINGBOOT LECTURER: Ph.D LE VINH THINH STUDENT: NGUYEN QUYET SINH THONG CHU THANH SKL 008573 Ho Chi Minh City, July 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY  GRADUATION THESIS BUILDING A SELL COURSE WEBSITE WITH REACTJS AND SPRINGBOOT Instructor: Vinh Thinh Le, Ph. Student Name: Quyet Sinh Nguyen ID: 18110354 Student Name: Chu Thanh Thong ID: 18110365 Ho Chi Minh City, June 2022 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INFORMATION TECHNOLOGY  GRADUATION THESIS BUILDING A SELL COURSE WEBSITE USING REACTJS AND SPRINGBOOT Instructor: Vinh Thinh Le, Ph. Student Name: Quyet Sinh Nguyen ID: 18110354 Student Name: Chu Thanh Thong ID: 18110365 Ho Chi Minh City, June 2022 HCM University of Technology and Education SOCIALIST REPUBLIC OF VIETNAM FACULTY OF INFORMATION TECHNOLOGY Independence – Freedom - Happiness _______________ ________________ GRADUATION THESIS TASK Student name: Quyet Sinh Nguyen ID: 18110354 Student name: Chu Thanh Thong ID: 18110365 Major: Information Technology Project title: Build a selling course website using ReactJS and Springboot Content: Theory: -Learn the Java programming language -Learn the Java Script programming language -Learn about ReactJS technology -Learn about Springboot technology Practice: - Build a website with some basic features as follows:  Purchase courses and learn online  Write and read blogs  Admin's management  Statistics Execution time: from February 22, 2021, to June 30, 2021 Signature of student:. Signature of student:.

Ho Chi Minh, June 2022 HEAD OF INFORMATION TECHNOLOGY INSTRUCTOR (Name and signature) (Name and signature) HCM University of Technology and Education SOCIALIST REPUBLIC OF VIETNAM FACULTY OF INFORMATION TECHNOLOGY Independence – Freedom - Happiness _______________ ________________ ASSESSMENT FORM OF INSTRUCTOR Student name: Quyet Sinh Nguyen ID: 18110354 Student name: Chu Thanh Thong ID: 18110365 Major: Information Technology. Project title: Build a selling course website using ReactJS and Springboot Name of instructor: Vinh Thinh Le Ph. On content of topic & workload done:. Recommend for defense or not? 5.

Mark: Ho Chi Minh, June 2022 Instructor HCM University of Technology and Education SOCIALIST REPUBLIC OF VIETNAM FACULTY OF INFORMATION TECHNOLOGY Independence – Freedom - Happiness _______________ ________________ ASSESSMENT FORM OF REVIEWER Student name: Quyet Sinh Nguyen ID: 18110354 Student name: Chu Thanh Thong ID: 18110365 Major: Information Technology. Project title: Build a selling course website using ReactJS and Springboot Name of reviewer: Xuan Phung Huynh Ph. On content of topic & workload done:. Recommend for defense or not? 5.

Mark: Ho Chi Minh, June 2022 Reviewer HCMC University of Technology and Education Faculty of Information Technology OUTLINE OF THE GRADUATION THESIS Full name of the first student: Quyet Sinh Nguyen ID: 18110354 Full name of the second student: Chu Thanh Thong ID: 18110365 Dissertation time: From: To: Specialized: Software Technology Project name: Build a selling course website using ReactJS and Springboot Instructor: Vinh Thinh Le Ph. Learn about ReactJS and Springboot 2. Build a website to sell courses Outline of the graduation thesis: TABLE OF CONTENT PREFACE 1. REASON FOR CHOOSING THE TOPIC 2.

PURPOSE AND TASKS PERFORMED 2. EXPECTED RESULTS ACHIEVED CHAPTER 1: THEORETICAL BASIS 1. What is Java language? 1. Features of the Java language 1.

Advantages of Java 1. Disadvantages of Java 1. What is JavaScript? 1. Advantages of JavaScript 1.

Disadvantages of JavaScript 1. How JavaScript works 1. What is Spring? 1. Advantages of Spring 1.

What is Springboot? 1. Features of Springboot 1. Advantages of Springboot 1.6 Disadvantages of Springboot 1. Distinguish Springboot, SpringMVC and Spring 1.

What is ReactJS? 1. Features of ReactJS 1. Advantages of ReactJS 1. Disadvantages of ReactJS 1.

What is MySQL? 1. Advantages of MySQL 1. Disadvantages of MySQL CHAPTER 2: CURRENT STATUS SURVEY 2. FUNIX CHAPTER 3: SYSTEM ANALYSIS AND DESIGN 3.

Client side feature 3. Admin side feature 3. USE CASE DIAGRAM AND USE CASE DESCRIPTION 3. Use case diagram 3.

Use case description 3. Login, Register UI 3.3 Customer UI CHAPTER 4: INSTALL AND TEST 4. COMPARE WITH REFERENCED WEBSITES 5. DEVELOPMENT DIRECTION REFERENCES IMPLEMENTATION PLAN Number Time Task Note Ho Chi Minh City, Jan 2022 Outline writer Quyet Sinh Nguyen Opinion of instructor (Name and signature) ACKNOWLEDGMENTS With our deepest gratitude, we would like to thank Mr.Vinh Thinh Le, the lecturer at the Faculty of Information Technology, Ho Chi Minh City University of Technology and Education, who enthusiastically guided and gave suggestions during the process of making this thesis.

Although he was quite busy, he did not hesitate to guide and give us suggestions. His comments helped us a lot in orienting and completing our thesis. However, because of the limited professional knowledge and the lack of practical experience, the content of the report cannot avoid errors, we would like to receive suggestions, guidance, and criticism from the instructors and reviewers to make the software better. Thesis implementation group Quyet Sinh Nguyen Chu Thanh Thong SUMARY With the development of the Internet, the development of online teaching solutions has become a joy for many people with limited time.

The development of the internet along with that applied to learning became much easier. So we can study anywhere, anytime according to our needs. Almost everyone learns to take advantage of their free time, to arrange their study to become the most convenient and effective way. Accordingly, online learning has gradually become an inevitable trend in all fields and all levels.

For that reason, we decided to build an online teaching website to provide everyone with an effective, reliable learning environment, providing the best learning experience. The website has several functions: Customer site:  Login  Register  Account Management  Buy and learn the course  Read and write knowledge-sharing blogs  Comments on the course/blog  course assessment  Create notes  Book a class schedule Admin site:  Login  Order management  User management  Course Management  Blog management  Statistics The tools are used:  Frontend: ReactJS  Backend: Springboot  Database: MySQL TABLE OF CONTENT PREFACE. REASON FOR CHOOSING THE TOPIC. PURPOSE AND TASKS PERFORMED.

EXPECTED RESULTS ACHIEVED. 2 CHAPTER 1: THEORETICAL BASIS. 3 What is Java language?. 3 Features of the Java language.

3 Advantages of Java. 5 Disadvantages of Java. 6 What is JavaScript?. 6 Advantages of JavaScript.

6 Disadvantages of JavaScript. 6 How JavaScript works. What is Spring?. Advantages of Spring?.

What is Springboot?. Features of Springboot. Advantages of Springboot. Disadvantage of Springboot.

Distinguish Springboot, SpringMVC and Spring. What is ReactJS?. Features of ReactJS. Advantages of ReactJS.

Disadvantages of ReactJS. Difference between Angular and React. What is MySQL?. Advantages of MySQL.

Disadvantages of MySQL. 19 CHAPTER 2: CURRENT STATUS SURVEY. 24 CHAPTER 3: SYSTEM ANALYSIS AND DESIGN. 26 Client side feature.

26 Admin side feature. 31 USE CASE DIAGRAM AND USE CASE DESCRIPTION. 34 Use case diagram. 34 Use case description.

87 Login, Register UI. 100 CHAPTER 4: INSTALL AND TEST. COMPARE WITH REFERENCED WEBSITES. 130 LIST OF TABLE Table 1 : Difference between Springboot and Spring.

11 Table 2 : Difference between Springboot and SpringMVC. 13 Table 3 : Difference between Angular and React. 17 Table 4 : Client side feature. 26 Table 5 : Admin side feature.

31 Table 6 : Login UI description. 87 Table 7 : UI Sign up description. 88 Table 8 : Dashboard UI description. 89 Table 9 : Order management UI description.

91 Table 10 : Course management UI description. 92 Table 11 : Add new course UI description. 94 Table 12 : Edit course UI description. 95 Table 13 : Video management UI description.

97 Table 14 : Blog management UI description. 97 Table 15 : Customer management UI description. 99 Table 16 : Customer homepage UI description. 102 Table 17 : Course list UI description.

104 Table 18 : Course details UI description. 107 Table 19 : Course purchase description. 108 Table 20 : List of purchased courses UI description. 108 Table 21 : Edit personal account information UI description.

109 Table 22 : Password change description. 110 Table 23 : Change avatar UI description. 111 Table 24 : Blog UI description. 111 Table 25 : Detail blog UI description.

113 Table 26 : Write blog UI description. 114 Table 27 : My Blog UI description. 115 Table 28 : Access error UI description. 115 Table 29 : Unlock/ Lock Blog UI description.

116 Table 30 : Learning course UI description. 117 Table 31 : Note UI description. 119 Table 32 : Learning Tools UI description. 120 Table 33 : Certificate UI description.

121 Table 34 : Test Case System. 122 LIST OF IMAGE Image 1 : Udemy website. 21 Image 3 : W3 Schools website. 22 Image 4 : Codelearn website.

23 Image 5 : Funix website. 24 Image 6 : Use case diagram. 34 Image 7 : Class diagram. 66 Image 8 : ERD Diagram.

85 Image 9 : Database Model. 86 Image 10 : Login UI. 87 Image 11 : Sign up UI. 88 Image 12 : Dashboard UI.

89 Image 13 : Order management UI. 91 Image 14 : Course management UI. 92 Image 15 : Add new course UI. 93 Image 16 : Edit course UI.

95 Image 17 : Video management UI. 96 Image 18 : Blog management UI. 97 Image 19 : Customer management UI. 98 Image 20 : Customer homepage UI.

102 Image 21 : Course list UI. 104 Image 22 : Course details UI. 106 Image 23 : Course purchase UI. 107 Image 24 : List of purchased courses UI.

108 Image 25 : Edit personal account information UI. 109 Image 26 : Password change UI. 110 Image 27 : Change avatar UI. 110 Image 28 : Blog UI.

111 Image 29 : Detail blog UI. 112 Image 30 : Write blog UI. 113 Image 31 : My Blog UI. 114 Image 32 : Access error UI.

115 Image 33 : Unlock/ Lock Blog UI. 116 Image 34 : Learning course UI. 117 Image 35 : Overview course UI. 118 Image 36 : Note UI.

119 Image 37 : Learning Tools UI. 120 Image 38 : Certificate UI. REASON FOR CHOOSING THE TOPIC With the development of the Internet and modern technology, the educational process is increasingly developing, especially online education models. In many developed countries in the world such as the US, Korea, and Japan.

the form of E- Learning education is increasingly developing. In Vietnam, in the context of the whole country towards the 4.0 revolution, the application of modern technology in education is increasingly focused. Smart learning models through the online environment are strongly developed. Students only need to register as a member via devices connected to the Internet to be able to study anywhere.

No need to go to class every day, wait for the teacher, or have to arrange a time to travel to class. Online learning is no longer confined to college and university students, but also extends to all levels from elementary to junior high, and high school, at professional training centers, and leaders. Learning becomes simple and effective when you know how to use technology devices and a virtual Internet environment to absorb real knowledge. For that reason, my group decided to choose the topic of building a website to sell courses.