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ẽ… 153 trang · Ho Chi Minh City 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: Ho Chi Minh City University of Technology and Education
• Chuyên ngành: Information Technology
• Đề tài: Building A Sell Course Website Using ReactJS And 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

Tóm tắt

I. Tổng Quan Về 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 công nghệ số. Việc áp dụng ReactJS và SpringBoot giúp tạo ra một nền tảng học tập trực tuyến hiệu quả. ReactJS cung cấp giao diện người dùng linh hoạt, trong khi SpringBoot đảm bảo backend mạnh mẽ và dễ dàng mở rộng. Sự kết hợp này không chỉ giúp tối ưu hóa trải nghiệm người dùng mà còn nâng cao hiệu suất của website.

1.1. Lợi Ích Của Việc Sử Dụng ReactJS Trong Xây Dựng Website

Sử dụng ReactJS mang lại nhiều lợi ích cho việc phát triển giao diện người dùng. Nó cho phép tạo ra các thành phần tái sử dụng, giúp tiết kiệm thời gian và công sức. Hơn nữa, ReactJS hỗ trợ cập nhật giao diện một cách nhanh chóng mà không cần tải lại trang, tạo trải nghiệm mượt mà cho người dùng.

1.2. Tại Sao Nên Chọn SpringBoot Cho Backend

SpringBoot là một framework mạnh mẽ cho việc phát triển ứng dụng Java. Nó giúp giảm thiểu thời gian cấu hình và cho phép phát triển nhanh chóng các ứng dụng web. Với SpringBoot, việc quản lý cơ sở dữ liệu và bảo mật cũng trở nên dễ dàng hơn, giúp các nhà phát triển tập trung vào việc xây dựng tính năng.

II. Thách Thức Trong Việc 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 mang lại nhiều lợi ích, nhưng cũng không thiếu thách thức. Các vấn đề như bảo mật thông tin người dùng, tối ưu hóa hiệu suất và khả năng mở rộng là những yếu tố cần được xem xét kỹ lưỡng. Đặc biệt, việc tích hợp giữa ReactJS và SpringBoot có thể gặp khó khăn nếu không có kế hoạch rõ ràng.

2.1. Vấn Đề Bảo Mật Thông Tin Người Dùng

Bảo mật thông tin người dùng là một trong những thách thức lớn nhất khi xây dựng website. Cần phải áp dụng các biện pháp bảo mật như mã hóa dữ liệu và xác thực người dùng để đảm bảo an toàn cho thông tin cá nhân.

2.2. Tối Ưu Hóa 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 phải tối ưu hóa mã nguồn và sử dụng các công nghệ như CDN để giảm thời gian tải trang. Việc này đặc biệt quan trọng khi lượng người dùng tăng cao.

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. Bắt đầu từ việc lên kế hoạch thiết kế giao diện, phát triển backend cho đến việc triển khai và bảo trì. Việc sử dụng ReactJS cho frontend và SpringBoot cho backend sẽ giúp tối ưu hóa quy trình này.

3.1. Lập Kế Hoạch Thiết Kế Giao Diện

Thiết kế giao diện người dùng cần phải thân thiện và dễ sử dụng. Sử dụng ReactJS để tạo ra các thành phần giao diện có thể tái sử dụng, giúp tiết kiệm thời gian phát triển và nâng cao trải nghiệm người dùng.

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

Sử dụng SpringBoot để phát triển backend giúp giảm thiểu thời gian cấu hình và tăng tốc độ phát triển. Cần chú ý đến việc quản lý cơ sở dữ liệu và bảo mật thông tin người dùng trong quá trình phát triển.

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à nền tảng kết nối giữa giảng viên và học viên. Các tính năng như quản lý khóa học, viết blog và thống kê giúp nâng cao trải nghiệm học tập. Việc áp dụng ReactJS và SpringBoot trong thực tế đã chứng minh hiệu quả trong việc phát triển các ứng dụng học tập trực tuyến.

4.1. Quản Lý Khóa Học Trực Tuyến

Website cho phép giảng viên quản lý khóa học một cách dễ dàng. Họ có thể thêm, sửa, xóa khóa học và theo dõi tiến độ học tập của học viên. Điều này giúp nâng cao chất lượng giảng dạy và học tập.

4.2. Tính Năng Viết Blog Chia Sẻ Kiến Thức

Tính năng viết blog giúp giảng viên và học viên chia sẻ kiến thức, kinh nghiệm học tập. Điều này không chỉ tạo ra một cộng đồng học tập mà còn giúp nâng cao giá trị của website.

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

Với sự phát triển không ngừng của công nghệ, website bán khóa học sẽ ngày càng trở nên phổ biến. Việc áp dụng ReactJS và SpringBoot sẽ giúp các nhà phát triển tạo ra những sản phẩm chất lượng, đáp ứng nhu cầu học tập ngày càng cao của người dùng. Tương lai của giáo dục trực tuyến hứa hẹn sẽ rất tươi sáng.

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. Nhu cầu học tập linh hoạt và tiện lợi sẽ thúc đẩy sự phát triển của các nền tảng học trực tuyến. Việc xây dựng website bán khóa học sẽ là một cơ hội lớn cho các nhà phát triển.

5.2. Tương Lai Của Công Nghệ Trong Giáo Dục

Công nghệ sẽ tiếp tục đóng vai trò quan trọng trong giáo dục. Việc áp dụng các công nghệ mới như trí tuệ nhân tạo và học máy sẽ giúp nâng cao chất lượng giảng dạy và học tập. Website bán khóa học sẽ cần phải thích nghi với những thay đổi này để đáp ứng nhu cầu của người dùng.

Nội dung chính

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

Sự phát triển mạnh mẽ của mạng Internet và các thiết bị công nghệ hiện đại đã thúc đẩy các mô hình giáo dục trực tuyến (E-Learning) phát triển tại nhiều quốc gia trên thế giới như Mỹ, Hàn Quốc, Nhật Bản. Tại Việt Nam, trong bối cảnh cuộc Cách mạng Công nghiệp 4.0, việc ứng dụng công nghệ thông tin vào giảng dạy và học tập trở thành nhu cầu thiết yếu. Mô hình học tập trực tuyến cho phép người học linh hoạt về thời gian và địa điểm, không bị ràng buộc bởi việc di chuyển hay khung giờ cố định trên lớp học truyền thống. Nhu cầu học tập qua mạng Internet hiện nay mở rộng ở nhiều lứa tuổi và trình độ, từ học sinh phổ thông, sinh viên cao đẳng - đại học cho đến học viên tại các trung tâm đào tạo nghề và chuyên môn.

Xuất phát từ thực tiễn đó, đề tài khóa luận tốt nghiệp ngành Công nghệ Thông tin (chuyên ngành Công nghệ Phần mềm) tại Trường Đại học Sư phạm Kỹ thuật TP.HCM với tiêu đề "Xây Dựng Website Bán Khóa Học Sử Dụng ReactJS và SpringBoot" (mã số lưu trữ: SKL 009499) được thực hiện bởi nhóm sinh viên Nguyễn Quyết Sinh (MSSV: 18110354) và Chu Thanh Thông (MSSV: 18110365), dưới sự hướng dẫn của TS. Lê Vĩnh Thịnh và phản biện bởi TS. Huỳnh Xuân Phụng.

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

1. Về mặt lý thuyết:
   • Nghiên cứu nguyên lý hoạt động và tính năng của ngôn ngữ lập trình Java và JavaScript.
   • Tìm hiểu chuyên sâu framework Spring Boot (các thành phần Auto Configuration, Embedded Servers, Profiles...).
   • Tìm hiểu thư viện ReactJS dành cho phát triển giao diện người dùng (JSX, Virtual DOM, Component, State, Props).
   • Nghiên cứu hệ quản trị cơ sở dữ liệu quan hệ MySQL.
2. Về mặt thực hành:
   • Khảo sát các nền tảng học trực tuyến và bán khóa học hiện hành nhằm rút ra ưu và nhược điểm.
   • Phân tích yêu cầu hệ thống và thiết kế cơ sở dữ liệu, ca sử dụng (Use Case), biểu đồ lớp (Class Diagram), biểu đồ thực thể mối quan hệ (ERD).
   • Xây dựng hoàn chỉnh một website thương mại điện tử phục vụ việc mua bán khóa học và học tập trực tuyến với hai phân hệ chính: Khách hàng (Client/Customer) và Quản trị viên (Admin).
   • Tiến hành kiểm thử các chức năng của hệ thống.

Phạm vi nghiên cứu của đề tài bao gồm việc thiết kế và triển khai ứng dụng web toàn diện (Full-stack Web Application) phục vụ đối tượng người học trực tuyến và ban quản trị khóa học, được triển khai thực hiện trong thời gian từ ngày 22/02/2021 đến ngày 30/06/2021 (hoàn thiện báo cáo bảo vệ vào tháng 06 - 07/2022).

---

Cơ sở lý thuyết và phương pháp nghiên cứu

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

Đề tài sử dụng các nền tảng công nghệ chính sau để xây dựng ứng dụng:

• Ngôn ngữ Java & Spring Boot Framework: Java là ngôn ngữ lập trình hướng đối tượng, đa nền tảng dựa trên máy ảo Java (JVM) với tiêu chí "Write Once, Run Anywhere" (WORA), hỗ trợ đa luồng (Multi-threading) và cơ chế dọn rác tự động (Garbage Collection). Spring Boot là module phát triển ứng dụng nhanh (RAD) thuộc Spring Framework, tích hợp sẵn máy chủ (Embedded Server như Tomcat, Jetty), loại bỏ cấu hình XML phức tạp và cung cấp cơ chế Auto Configuration để tối ưu hóa việc phát triển RESTful Web API.
• Ngôn ngữ JavaScript & Thư viện ReactJS: JavaScript đảm nhận việc xử lý logic phía máy khách (Client-side). ReactJS là thư viện JavaScript mã nguồn mở do Facebook phát triển, tập trung vào tầng giao diện (View), sử dụng cú pháp JSX và cơ chế Virtual DOM giúp tối ưu hiệu năng render giao diện theo từng Component độc lập có quản lý State và Props.
• Hệ quản trị cơ sở dữ liệu MySQL: Hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) mã nguồn mở do Oracle hỗ trợ, sử dụng ngôn ngữ truy vấn SQL, đảm bảo tính bảo mật và khả năng mở rộng dữ liệu.

Tiêu chí so sánh	Spring Framework truyền thống	Spring Boot
Mục đích chính	Framework Java EE toàn diện, xây dựng ứng dụng lỏng lẻo (loosely coupled)	Tập trung phát triển ứng dụng độc lập và REST APIs nhanh chóng
Cấu hình (Configuration)	Phải cấu hình thủ công nhiều tệp XML hoặc Java Config	Tự động cấu hình (Auto-configuration), không bắt buộc dùng XML
Máy chủ triển khai	Cần cài đặt và cấu hình Server bên ngoài (Tomcat, JBoss...)	Tích hợp sẵn máy chủ nhúng (Embedded Tomcat, Jetty, Undertow)
Quản lý phụ thuộc	Khai báo thủ công từng thư viện và phiên bản trong pom.xml	Sử dụng các gói spring-boot-starter-* tự động quản lý phiên bản
Boilerplate Code	Lượng mã lặp lại (boilerplate) lớn	Giảm thiểu tối đa lượng mã lặp lại

Tiêu chí so sánh	Thư viện ReactJS	Framework Angular
Bản chất kiến trúc	Thư viện giao diện (UI Library), tập trung vào tầng View	Framework hoàn chỉnh (Full-featured MVC Framework)
Cơ chế ràng buộc dữ liệu	Ràng buộc một chiều (One-way data binding)	Hỗ trợ ràng buộc hai chiều (Two-way data binding)
Mô hình DOM	Virtual DOM (tạo DOM ảo và chỉ cập nhật phần tử thay đổi)	Incremental DOM (so sánh trực tiếp với DOM trước đó)
Ngôn ngữ phát triển	JavaScript kết hợp JSX (hoặc TypeScript tùy chọn)	TypeScript là ngôn ngữ mặc định

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

Nhóm tác giả đã kết hợp các phương pháp nghiên cứu kỹ thuật phần mềm:

1. Nghiên cứu tài liệu lý thuyết: Thu thập và phân tích tài liệu kỹ thuật về Java, JavaScript, Spring Boot, ReactJS từ tài liệu trực tuyến và bài giảng video chuyên ngành.
2. Khảo sát hiện trạng (Current status survey): Khảo sát đối chuẩn 5 website giáo dục trực tuyến gồm: Udemy, F8, W3Schools, Codelearn và FUNiX nhằm phân tích điểm mạnh, điểm yếu làm căn cứ xây dựng yêu cầu chức năng.
3. Phân tích và thiết kế hệ thống: Sử dụng ngôn ngữ mô hình hóa UML để xây dựng sơ đồ ca sử dụng (Use Case Diagram), đặc tả ca sử dụng (Use Case Description), sơ đồ lớp (Class Diagram), mô hình thực thể quan hệ (ERD).
4. Thực nghiệm và kiểm thử phần mềm: Lập trình thực tế hệ thống web theo mô hình phân tách Frontend - Backend và tiến hành kiểm thử các trường hợp sử dụng (Test Case System).

Hệ thống khảo sát	Ưu điểm ghi nhận	Hạn chế ghi nhận
Udemy	Quy mô toàn cầu, đa ngôn ngữ, hỗ trợ thanh toán PayPal, nhiều khóa học khuyến mãi	Giá thành tương đối cao, thiếu chức năng thi đánh giá lại tiến độ học
F8	Khóa học cơ bản miễn phí, hỗ trợ ghi chú theo mốc thời gian video, có bài kiểm tra từng video	Nội dung chưa đa dạng, chỉ quản trị viên website mới được đăng tải khóa học
W3Schools	Tài liệu súc tích, cho phép thực hành viết mã trực tiếp, có bài thi đánh giá	Bản chất là tài liệu đọc, phần bài học bằng video còn hạn chế
Codelearn	Hỗ trợ thử thách lập trình, bảng xếp hạng, thống kê kỹ năng, tổ chức thi đấu có giải	Số lượng bài học hạn chế, chủ yếu là nội dung miễn phí, phạm vi trong nước
FUNiX	Giảng viên chọn lọc, cấp chứng chỉ liên kết đối tác, có người nhắc nhở tiến độ	Chi phí học tập còn tương đối cao

---

Nội dung chính theo từng chương của đồ án

Lời mở đầu (Preface)

Trình bày tính cấp thiết của đề tài trong bối cảnh E-Learning trở thành xu thế giáo dục tất yếu. Xác định rõ mục tiêu, nhiệm vụ và kết quả kỳ vọng: nắm vững cấu trúc Spring Boot và ReactJS, đồng thời hoàn thành sản phẩm website bán khóa học hoạt động thực tế.

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

Hệ thống hóa toàn bộ kiến thức nền tảng:

• Tổng quan ngôn ngữ Java (lịch sử từ Sun Microsystems đến Oracle, tiêu chuẩn WORA, JVM, Garbage Collector).
• Ngôn ngữ JavaScript (cơ chế thông dịch phía Client, tương tác trình duyệt).
• Spring Framework và Spring Boot (cơ chế IoC Container, Dependency Injection, Auto Configuration, Profiles, máy chủ nhúng).
• Thư viện ReactJS (kiến trúc Component, JSX, State, Props, Virtual DOM).
• Hệ quản trị MySQL và các đặc tính bảo mật, xử lý giao dịch dữ liệu.

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

Khảo sát chi tiết thực trạng các hệ thống đào tạo và bán khóa học trực tuyến (Udemy, F8, W3Schools, Codelearn, FUNiX). Đưa ra các so sánh về tính năng tương tác của người học, hình thức kiểm tra đánh giá, chi phí và khả năng chia sẻ cộng đồng để định hình các phân hệ cần xây dựng.

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

Xác định danh mục yêu cầu chức năng chi tiết cho hai phía người dùng:

• Phân hệ Client (Người dùng / Học viên): 20 chức năng cốt lõi (Đăng ký/Đăng nhập, Quản lý tài khoản, Đổi mật khẩu, Đổi ảnh đại diện, Xem danh sách khóa học, Xem chi tiết khóa học, Mua khóa học, Quản lý khóa học cá nhân, Học online qua video, Xem danh sách blog, Đọc blog, Viết blog, Quản lý blog cá nhân, Bình luận blog/khóa học, Đánh giá khóa học, Tạo ghi chú khi học, Lên lịch học, Làm bài thi/quiz cuối khóa, Nhận/tải chứng chỉ, Hướng dẫn người dùng mới).
• Phân hệ Admin (Quản trị viên): 9 chức năng quản lý chính (Đăng nhập, Quản lý đơn hàng, Quản lý người dùng, Quản lý khóa học, Thêm/sửa khóa học, Quản lý video bài giảng, Quản lý bài viết blog, Khóa/mở khóa blog, Thống kê hệ thống).
• Xây dựng hệ thống tài liệu thiết kế gồm sơ đồ Use Case, 28 bảng đặc tả giao diện và luồng xử lý chi tiết (từ Bảng 6 đến Bảng 33), Sơ đồ lớp (Class Diagram) và Sơ đồ thực thể quan hệ (ERD).

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

Tiến hành lập trình giao diện người dùng và các API backend; thực hiện kết nối cơ sở dữ liệu MySQL. Tiến hành kiểm thử hệ thống thông qua bảng Test Case chi tiết (Bảng 34), so sánh kết quả sản phẩm với các trang web tham khảo ban đầu và đề xuất định hướng phát triển.

---

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

Kiến trúc công nghệ hệ thống

Hệ thống được thiết kế theo mô hình tách biệt Frontend - Backend kết nối qua giao thức RESTful API:

• Tầng Client (Frontend): Xây dựng bằng ReactJS, quản lý trạng thái bằng State/Props, chia nhỏ giao diện thành các Component độc lập (Header, CourseList, CourseDetail, VideoPlayer, NoteBox, BlogEditor...).
• Tầng Server (Backend): Xây dựng bằng Spring Boot với cấu trúc nhiều tầng gồm: Presentation Layer (Controller tiếp nhận REST request), Business Layer (Service xử lý logic nghiệp vụ), Persistence Layer (Repository/DAO truy xuất dữ liệu) và Database Layer.
• Tầng Dữ liệu (Database): Sử dụng MySQL lưu trữ các thực thể thông tin người dùng, đơn hàng, khóa học, video bài học, ghi chú, bài viết blog, bình luận và chứng chỉ.

+-------------------------------------------------------------------+
|                        CLIENT (ReactJS UI)                        |
|  [Trang chủ] [Chi tiết khóa học] [Học Online] [Viết Blog] [Admin] |
+---------------------------------+---------------------------------+
                                  |
                                  | RESTful APIs (HTTP / JSON)
                                  v
+-------------------------------------------------------------------+
|                      BACKEND (Spring Boot)                        |
|  - Presentation Layer: REST Controllers                           |
|  - Business Layer: Service Implementations                        |
|  - Persistence Layer: Data Access & Spring Data                   |
+---------------------------------+---------------------------------+
                                  |
                                  | JDBC / ORM Queries
                                  v
+-------------------------------------------------------------------+
|                        DATABASE (MySQL)                           |
|  Users, Courses, Orders, Videos, Blogs, Notes, Certificates       |
+-------------------------------------------------------------------+

Chi tiết các chức năng người dùng

Hệ thống được thiết kế với hai nhóm tác nhân chính:

1. Nhóm chức năng Khách hàng (Customer / Student):

   • Tài khoản: Đăng ký, đăng nhập hệ thống, cập nhật thông tin cá nhân, thay đổi mật khẩu và đổi hình ảnh đại diện (avatar).
   • Giao dịch khóa học: Tìm kiếm, duyệt danh mục khóa học, xem chi tiết lộ trình học tập, thực hiện mua khóa học và quản lý danh sách các khóa học đã sở hữu.
   • Không gian học tập trực tuyến: Xem video bài giảng, ghi chép nội dung học tập theo thời gian thực (Note UI), sử dụng công cụ hỗ trợ học tập, lên lịch học cá nhân.
   • Kiểm tra và cấp chứng chỉ: Làm bài kiểm tra tổng kết (Quiz/Final Exam) sau khi hoàn thành toàn bộ bài học và nhận/tải chứng chỉ hoàn thành khóa học (Certificate UI).
   • Cộng đồng và tương tác: Đọc các bài chia sẻ kiến thức, viết bài blog mới, quản lý bài viết cá nhân, bình luận và xếp hạng đánh giá chất lượng khóa học.

2. Nhóm chức năng Quản trị viên (Admin):

   • Bảng điều khiển (Dashboard): Theo dõi số liệu tổng quan của toàn hệ thống.
   • Quản lý đơn hàng (Order Management): Tiếp nhận, tra cứu và xử lý các giao dịch mua khóa học của học viên.
   • Quản lý nội dung đào tạo: Thêm mới khóa học, cập nhật thông tin/giá khóa học, quản lý danh sách và tải lên video bài giảng.
   • Quản lý thành viên & bài viết: Theo dõi danh sách tài khoản khách hàng, kiểm duyệt bài viết blog của cộng đồng (cho phép hiển thị hoặc khóa bài viết vi phạm).
   • Thống kê (Statistics): Thống kê doanh thu, số lượng đơn hàng, số lượng học viên đăng ký.

---

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

Kết quả đạt được

• Về mặt kỹ thuật: Làm chủ phương pháp tích hợp giữa Spring Boot (Backend) và ReactJS (Frontend) thông qua kiến trúc RESTful API; thiết kế được hệ thống cơ sở dữ liệu quan hệ hoàn chỉnh trên MySQL đáp ứng đầy đủ các mối quan hệ thực thể giữa người dùng, khóa học, đơn hàng và bài viết.
• Về mặt sản phẩm phần mề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 với đầy đủ 20 chức năng phía Client và 9 chức năng quản trị phía Admin.
• Về kiểm thử: Xây dựng và thực hiện bộ kịch bản kiểm thử (Test Case System - Bảng 34) đảm bảo các luồng chức năng đăng ký, xác thực, mua khóa học, học qua video và quản lý dữ liệu vận hành chính xác.

Đóng góp thực tiễn của đề tài

• Cung cấp một giải pháp nền tảng học trực tuyến tích hợp cả hai khía cạnh: thương mại (bán khóa học) và đào tạo (học qua video, ghi chú bài học, làm quiz kiểm tra, cấp chứng chỉ tự động).
• Bổ sung không gian chia sẻ kiến thức dạng Blog cộng đồng, cho phép người học chủ động viết bài, thảo luận và đánh giá khóa học, khắc phục nhược điểm thiếu tính tương tác xã hội của một số nền tảng học tập truyền thống.

---

Hạn chế và hướng phát triển

Hạn chế ghi nhận

• Dữ liệu và các bài tập thực hành chưa đạt mức độ đa dạng chuyên sâu so với các nền tảng thương mại quốc tế quy mô lớn.
• Khả năng xử lý khi lượng bản ghi cơ sở dữ liệu tăng đột biến (nhược điểm giới hạn hiệu năng của MySQL khi mở rộng quy mô lớn nếu chưa có giải pháp phân tán cơ sở dữ liệu hoặc bộ nhớ đệm cache chuyên biệt).

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

• Nâng cấp hệ thống bảo mật và phân quyền chuyên sâu hơn cho nhiều vai trò người dùng (Giảng viên, Cộng tác viên, Quản trị viên cao cấp).
• Bổ sung các cổng thanh toán trực tuyến tự động đa dạng (thanh toán qua ví điện tử, thẻ ngân hàng nội địa và quốc tế).
• Mở rộng chức năng kiểm thử, phân tích dữ liệu học tập và tối ưu hóa hiệu năng truy xuất cơ sở dữ liệu trên máy chủ.

---

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích cho:

• Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Sinh viên chuẩn bị làm đồ án chuyên ngành hoặc khóa luận tốt nghiệp về phát triển ứng dụng web full-stack có thể tham khảo quy trình phân tích ca sử dụng, thiết kế biểu đồ lớp, ERD và cách phân chia tầng kiến trúc.
• Lập trình viên mới bắt đầu với Spring Boot và ReactJS: Tài liệu cung cấp phần so sánh trực quan giữa các công nghệ (Spring Boot vs Spring MVC, ReactJS vs Angular), bảng đặc tả giao diện (UI descriptions) và thiết kế ca kiểm thử thực tế.

---

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

1. Đồ án sử dụng công nghệ nào để phát triển Frontend, Backend và Cơ sở dữ liệu?

Hệ thống sử dụng thư viện ReactJS cho tầng giao diện người dùng (Frontend), framework Spring Boot (ngôn ngữ Java) để xây dựng hệ thống xử lý nghiệp vụ và RESTful API (Backend), và hệ quản trị cơ sở dữ liệu quan hệ MySQL để lưu trữ dữ liệu.

2. Sự khác biệt căn bản giữa Spring Boot và Spring Framework truyền thống được đề cập trong đồ án là gì?

Theo phân tích tại Chương 1 (Bảng 1), Spring Boot nổi bật hơn Spring truyền thống nhờ cơ chế tự động cấu hình (Auto-configuration), tích hợp sẵn máy chủ nhúng (như Tomcat, Jetty) giúp chạy trực tiếp tệp JAR mà không cần cài đặt Web Server bên ngoài, loại bỏ việc cấu hình tệp XML phức tạp và quản lý gói phụ thuộc dễ dàng qua spring-boot-starter.

3. Phân hệ người học (Client) hỗ trợ những tính năng tương tác học tập nào?

Phân hệ Client cung cấp các tính năng học tập trực tuyến chuyên sâu bao gồm: xem video bài giảng, ghi chép bài học trực tiếp (Note UI), lên lịch học tập cá nhân, làm bài kiểm tra trắc nghiệm cuối khóa (Quiz/Final Exam), xem/tải chứng chỉ sau khi hoàn thành và tham gia viết bài, bình luận trên chuyên mục Blog chia sẻ kiến thức.

4. Nhóm tác giả đã khảo sát những website học trực tuyến nào để làm cơ sở thiết kế?

Nhóm tác giả đã tiến hành khảo sát hiện trạng 5 website đào tạo và bán khóa học trực tuyến gồm: Udemy, F8, W3Schools, Codelearn và FUNiX nhằm phân tích các ưu điểm và hạn chế về chi phí, hình thức đánh giá, khả năng tương tác cộng đồng.

---

Kết luận

Khóa luận tốt nghiệp "Xây Dựng Website Bán Khóa Học Sử Dụng ReactJS và SpringBoot" của sinh viên Nguyễn Quyết Sinh và Chu Thanh Thông tại Trường Đại học Sư phạm Kỹ thuật TP.HCM đã hoàn thành đầy đủ các mục tiêu nghiên cứu lý thuyết và thực hành phần mềm được giao. Đề tài đã phân tích chi tiết cơ sở lý thuyết về Java, JavaScript, Spring Boot, ReactJS, MySQL; đồng thời khảo sát thực trạng các nền tảng E-Learning hiện có để thiết kế hệ thống hoàn chỉnh. Sản phẩm phần mềm đáp ứng đầy đủ các quy trình từ quản lý đơn hàng, quản lý khóa học, học tập qua video, kiểm tra đánh giá đến chia sẻ bài viết cộng đồng, đóng vai trò là một tài liệu tham khảo kỹ thuật phần mềm có cấu trúc rõ ràng và tính ứng dụng thực tế.

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 USING REACTJS AND SPRINGBOOT LECTURER: Ph.D LE VINH THINH STUDENT: NGUYEN QUYET SINH THONG CHU THANH SKL 009499 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.