TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việc ứng dụng công nghệ thông tin vào đời sống hiện nay đã trở thành mục tiêu cấp thiết, giúp đẩy nhanh sự phát triển xã hội và khắc phục những khó khăn về khoảng cách, nhân lực và hiệu năng, đặc biệt trong bối cảnh dịch bệnh Covid-19 Tuy nhiên, vẫn tồn tại nhiều thách thức trong việc tích hợp công nghệ thông tin vào từng lĩnh vực và kết nối giữa người cung và người cầu Nhằm giải quyết vấn đề này, nhóm đã chọn nghiên cứu đề tài “Xây dựng website kinh doanh khóa học online”, với hy vọng tạo ra một nền tảng kết nối hiệu quả giữa người bán và người mua, giúp người học dễ dàng lựa chọn khóa học online mà không cần qua trung gian Đồng thời, người bán có cơ hội giới thiệu ưu điểm khóa học và các ưu đãi mà không phải chi phí quảng cáo Trang web này sẽ góp phần thúc đẩy việc học online cho người Việt Nam một cách dễ dàng và hiệu quả hơn.
MỤC TIÊU ĐỀ TÀI
Trong quá trình hoàn thiện đề tài, nhóm thực hiện đã đặt ra những mục tiêu sau:
- Xây dựng một trang kinh doanh khóa học online với những chức năng cơ bản cho người dùng và giáo viên của các khóa học
- Xây dựng được giao diện thân thiện với người sử dụng, dễ sử dụng và thao tác
- Áp dụng được các hình thức thanh toán như VNPAY vào hệ thống website
- Áp dụng được dịch vụ AWS S3 để lưu trữ dữ liệu cho hệ thống
Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Đề tài tập trung vào việc nâng cao kỹ năng lập trình và nghiên cứu công nghệ mới, nhằm đáp ứng nhu cầu học online của người dùng Mục tiêu là xây dựng một hệ thống hỗ trợ học tập trực tuyến ngày càng thuận lợi, đồng thời tạo ra một nền tảng kết nối các giảng viên để chia sẻ kiến thức trên nhiều lĩnh vực khác nhau.
CƠ SỞ LÝ THUYẾT
BOOTSTRAP
2 Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU
2.3 Mô hình hoá yêu cầu
3 Chương 3: THIẾT KẾ HỆ THỐNG
3.1 Thiết kế cơ sở dữ liệu
4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ
STT Thời gian thực hiện Công việc Ghi chú
Thiết kế usecase và mô hình hóa yêu cầu
Thiết kế cơ sở dữ liệu
Tìm hiểu thư viện ReactJS, Material UI Tìm hiểu framework Spring Boot Tìm hiểu Spring Security, JWT
Tiến hành tổ chức cấu trúc project Xây dựng các tables của cơ sở dử liệu
Tạo các Entities trong Spring Boot và mapping với cơ sở dữ liệu
Xây dựng API cho các chức năng cơ bản dành cho người dùng có phân quyền là User
Xây dựng Giao diện người dùng cho hệ thống
Tp Hồ Chí Minh, ngày tháng năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương
(Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên)
Kết hợp các phần đã xây dựng (giao diện, APIs, database)
Xây dựng giao diện cho trang Admin Tiến hàng tạo các APIs cho Admin
Xây dựng chức năng nâng cao là các tool học tập cho người dùng
Tiến hàng code tính năng cho phép có thêm bài Test, file bài giảng cho các khoá học
Xây dựng tính năng quản lý khoá học cho giảng viên
Xây dựng tính năng phê duyệt khoá học, đăng ký khoá học mới
Kiểm thử chương trình Tìm hiểu quá trình deploy sản phẩm
Viết script CI/CD Tìm hiểu AWS CloudFront Tiến hành deploy sản phẩm
9 16/06/2023 – 21/06/2023 Kiểm thử chương trình và tiến hành sửa lỗi
10 22/06/2023 – 07/07/2023 Viết và hoàn thiện báo cáo
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 2
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3
1.1.2 Kiến trúc và cách hoạt động của Spring Boot 3
1.1.3 Ưu điểm của Spring Boot 4
1.1.4 Nhược điểm của Spring Boot 5
1.1.5 Ứng dụng vào đề tài 5
1.2.2 Cơ chế hoạt động của Spring Security 10
1.2.3 Ưu điểm của Spring Security 10
1.2.4 Ứng dụng Spring Security vào đề tài 11
1.3.2 Cách hoạt động của MYSQL 13
1.3.5 Ứng dụng MySQL vào đề tài 14
1.4.2 Cách hoạt động của RESTFUL API 15
1.4.3 Ứng dụng REST API vào đề tài 16
1.5.2 Các thành phần của JWT 17
1.6.2 Cách tổ chức dữ liệu của AWS S3 19
1.6.3 Ứng dụng AWS S3 vào đề tài 20
1.7.2 Các thành phần của React: 22
1.7.3 Ưu và nhược điểm của ReactJS 23
1.7.4 Ứng dụng ReactJS vào đề tài 24
1.8.3 Ứng dụng Redux vào đề tài 28
1.9.4 Ứng dụng Material UI vào đề tài 31
1.10.3 Ứng dụng Bootstrap vào đề tài 32
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 35
2.1.2 Yêu cầu bài toán của đề tài 37
2.2.2 Yêu cầu phi chức năng 39
2.3 MÔ HÌNH HÓA YÊU CẦU 39
CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 87
3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 88
3.2.2 Mô tả chi tiết bảng dữ liệu 89
3.3.1 Giao diện cho Admin và Teacher 108
4.1.2 Giao diện cho người dùng 118
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 130
4.1.1 Cài đặt ứng dụng, thư viện cần thiết 130
4.2.4 Các trường hợp kiểm thử 134
Hình 1: Kiến trúc phân lớp của SpringBoot 3
Hình 4: Ví dụ về Controller được cấu hình trong đề tài 6
Hình 5: Cấu trúc service trong backend 6
Hình 6: Ví dụ về class Service trong backend 7
Hình 7: Cấu trúc thư mục repository 7
Hình 8: Ví dụ về Repository 8
Hình 9: Cấu hình database trong file application.properties 8
Hình 10: Các class DTO trong server 9
Hình 11: Cơ chế hoạt động của Spring Security 10
Hình 12: Cấu hình Spring Security 11
Hình 14: Xử lý trả ra token khi user login thành công 12
Hình 15: Xử lý data trả ra khi user login không thành công 12
Hình 16: Xử lý Exception trong Spring 13
Hình 17: Cấu hình kết nối tới MySQL 15
Hình 19: Class cấu hình data trả ra cho client 17
Hình 20: Ví dụ về Header của JWT 18
Hình 21: Ví dụ về Payload của JWT 18
Hình 22: Tổ chức dữ liệu trên AWS S3 19
Hình 25: AWS CloudFront được sử dụng 21
Hình 26: Script Deploy Client lên S3 21
Hình 27: Tổ chức thư mục trong Legacy 24
Hình 29: Sử dụng component TeacherCard ở Component OurTeacher 25
Hình 30: Tổ chức Route trong Legacy trong thư mục MainRoute 26
Hình 31: Ví dụ url /courses sẽ render ra trang danh sách khóa học 27
Hình 32; Ví dụ điều hướng Route trong component Header 27
Hình 33: Ví dụ khởi tạo global state cart ở file cartRedux.js trong thư mục redux 29
Hình 34: Ví dụ bỏ các global state vào store ở file store.js trong thư mục redux 29
Hình 35: Ví dụ bọc store vào cả app ở thư mục index.js 30
Hình 36; : Ví dụ sử dụng global state ở component Header 30
Hình 37: Ví dụ về componet DatePicker để tạo component 31
Hình 38: Ví dụ sử dụng bootstrap và react-bootstrap 33
Hình 39: Ví dụ responsive trên màn hình cỡ trung bình trở lên 33
Hình 40: Ví dụ responsive trên màn hình cỡ nhỏ 34
Hình 41: Giao diện website khảo sát Unica 35
Hình 42: Giao diện Website khảo sát F8 – Học lập trình để đi làm 36
Hình 43: Use Case cho Admin 39
Hình 44: Use Case cho Teacher 40
Hình 45: Use Case cho người có phân quyền là Reviewer 40
Hình 46: Use Case cho người có phân quyền là User 41
Hình 47: : Sequence Diagram cho chức năng gửi yêu cầu duyệt khoá học mới 42
Hình 48: Sequence Diagram chức năng gửi kết quả phê duyệt yêu cầu trở thành giảng viên 44
Hình 49: Sequence Diagram đánh giá khoá học đã mua 46
Hình 50: Sequence Diagram chức năng đăng nhập 47
Hình 51: Sequence Diagram chức năng đăng ký tài khoản 49
Hình 52: Sequence Diagram chức năng thanh toán 51
Hình 53: Sequence Diagram yêu cầu trở thành giảng viên 54
Hình 54: Sequence Diagram chức năng trao đổi thông tin với chatBot 56
Hình 55: Sequence Diagram tạo lịch nhắc hẹn học tập 58
Hình 56: Sequence Diagram chức năng tạo câu hỏi thảo luận 60
Hình 57: Sequence Diagram chức năng xem danh sách bài giảng 61
Hình 58: Sequence Diagram chức năng xoá thảo luận trong bài giảng 63
Hình 59: Sequence Diagram chức năng xem thông báo từ giảng viên 65
Hình 60:Sequence Diagram chức năng 66
Hình 61: Sequence Diagram thêm ghi chú cho bài giảng 68
Hình 62: Sequence Diagram chức năng thực hiện bài Test 70
Hình 63: Sequence Diagram chức năng đánh dấu bài học là hoàn thành 72
Hình 64: Sequence Diagram chức năng xem danh sách giảng viên 74
Hình 65:Sequence Diagram chức năng thêm khoá học vào danh sách yêu thích 75
Hình 66:Sequence Diagram chức năng xem danh sách yêu câu phê duyệt trở thành giảng viên 77
Hình 67: Sequence Diagram đăng ký account reviewer 79
Hình 68: Sequence Diagram chức năng nhận task kiểm duyệt 81
Hình 69: Sequence Diagram chức năng duyệt yêu cầu tạo mới khoá học 83
Hình 70: Sequence Diagram chức năng cập nhật bài giảng 85
Hình 73: Giao diện trang đăng nhập 108
Hình 74: Giao diện trang quản lý khoá học 109
Hình 75: Giao diện trang chỉnh sửa thông tin tổng quan khoá học 110
Hình 76: Giao diện trang chỉnh sửa nội dung bài học 110
Hình 77: Giao diện trạng thêm mới chapter 112
Hình 78: Giao diện trang chỉnh sửa bài học 113
Hình 79: Giao diện trang quản lý yêu cầu phê duyệt khoá học 114
Hình 81: Giao diện trang đăng kí thông tin khoá học mới 114
Hình 81: Giao diện trang quản lý khóa học 115
Hình 82: Giao diện trang phê duyệt yêu cầu trở thành giảng viên 116
Hình 83: Giao diện trang thêm mới người kiểm duyệt 117
Hình 84: Giao diện trang đăng ký tài khoản 118
Hình 85: Giao diện trang danh sách khóa học 119
Hình 86: Giao diện trang chi tiết khóa học 120
Hình 87: Giao diện trang chi tiết khóa học 120
Hình 88: Giao diện trang phòng học 121
Hình 89: Giao diện chức năng note trong khóa học 122
Hình 90: Giao diện chức năng hỏi đáp trong khóa học 123
Hình 91: Giao diện chức năng thêm lịch học 124
Hình 92: Giao diện chức năng hiển thị thông báo của giảng viên 125
Hình 93: Giao diện chức năng hỏi đáp với AI 125
Hình 94: Giao diện trang lịch sử mua hàng 126
Hình 95: Giao diện trang lịch sử mua hàng 127
Hình 96: Giao diện trang chi tiết giảng viên 128
Hình 97: Giao diện trang giỏ hàng 129
Hình 98: Cấu trúc thư mục phía Backend 131
Hình 99: File cấu hình SpringBoot 131
Hình 100: Cấu trúc thư mục Front End (User) 132
Hình 101: Cấu trúc thư mục Front End (Admin, Teacher, Reviewer) 133
Bảng 1: Đặc tả UseCase gửi yêu cầu phê duyệt khoá học mới 42
Bảng 2: Đặc tả Use Case chấp nhận yêu cầu trở thành giảng viên 44
Bảng 3: Đặc tả Use Case đánh giá khóa học đã mua 46
Bảng 4: Đặc tả Use Case đăng nhập 47
Bảng 5: Đặc tả Use Case đăng ký tài khoản 49
Bảng 6: Đặc tả Use Case thanh toán đơn hàng 51
Bảng 7: : Đặc tả Use Case yêu cầu trở thành giảng viên 54
Bảng 8: Đặc tả UseCase trao đổi thông tin với ChatBot 56
Bảng 9: Đặc tả UseCase tạo lịch nhắc hẹn học tập 58
Bảng 10: Đặc tả Use Case tạo câu hỏi thảo luận 60
Bảng 11: Đặc tả Use chức năng xem danh sách thảo luận 61
Bảng 12: Đặc tả Use Case chức năng xoá thảo luận trong bài giảng 63
Bảng 13: Đặc tả Use Case xem thông báo từ giảng viên 65
Bảng 14: Đặc tả UseCase chức năng xem danh sách ghi chú 66
Bảng 15: Đặc tả Use Case thêm ghi chú 68
Bảng 16: Đặc tả Use Case thực hiện bài Quiz 70
Bảng 17: Đặc tả Use Case chức năng đánh dấu hoàn thành bài học 73
Bảng 18: Đặc tả Use case xem danh sách giảng viên 74
Bảng 19: Đặc tả Use Case năng thêm khoá học vào danh sách yêu thích 75
Bảng 20: Đặc tả Use Case xem danh sách yêu cầu phê duyệt thành giảng viên 77
Bảng 21: Đặc tả Use Case đăng ký reviewer 79
Bảng 22: Đặc tả Use Case nhận task kiểm duyệt 81
Bảng 23: Đặc tả Use Case gửi kêt quả yêu cầu duyệt khoá học 83
Bảng 24: Đặc tả Use Case cập nhật bài giảng 85
Bảng 25: Mô tả chi tiết bảng Account 89
Bảng 26: Mô tả chi tiết bảng UserDetail 89
Bảng 27: Mô tả chi tiết bảng Cart 90
Bảng 28: Mô tả chi tiết bảng Cart Detail 90
Bảng 29: Mô tả bảng Category 91
Bảng 30: Mô tả chi tiết bảng Chapters 91
Bảng 31: Mô tả chi tiết bảng Coupon 92
Bảng 32: Mô tả chi tiết bảng courses 93
Bảng 33: Mô tả chi tiết bảng courses_paid 94
Bảng 34: Mô tả chi tiết bảng Note 94
Bảng 35: Mô tả chi tiết bảng Orders 94
Bảng 36: Mô tả chi tiết bảng Order Detail 95
Bảng 37: Mô tả chi tết bảng Payment 96
Bảng 38: Mô tả chi tiết bảng Register_Teacher_Form 96
Bảng 39: Mô tả chi tiết bảng reviews 97
Bảng 40: Mô tả chi tiết bảng role 97
Bảng 41: Mô tả chi tiết bảng Announcement 97
Bảng 42: Mô tả chi tiết bảng course_summary_info_register 98
Bảng 43: Mô tả chi tiết bảng discuss 99
Bảng 44: Mô tả chi tiết bảng learning_process 100
Bảng 45: Mô tả chi tiết bảng lectures 101
Bảng 46: Mô tả chi tiết bảng quiz_answer 102
Bảng 47: Mô tả chi tiết bảng quiz_question 103
Bảng 48: Mô tả chi tiết bảng register_chapter 103
Bảng 49: Mô tả chi tiết bảng register_course_session 104
Bảng 50: Mô tả chi tiết bảng register_lectures 105
Bảng 51: Mô tả chi tiết bảng reviewer_role 106
Bảng 52: Mô tả chi tiết bảng teacher_profile 106
Bảng 53: Mô tả chi tiết bảng wish_list 107
Bảng 54: Mô tả trang đăng nhập 108
Bảng 55: Mô tả trang quản lý khoá học 109
Bảng 56: Mô tả giao diện trang chỉnh sửa khoá học 110
Bảng 57: Mô tả trang thêm mới chapter 112
Bảng 58: Mô tả trang chỉnh sửa bài học 113
Bảng 59: Mô tả giao diện trang quản lý yêu cầu phê duyệt khoá học 114
Bảng 60: Mô tả chi tiết trang quản lý khóa học 115
Bảng 61: Mô tả chi tiết trang phê duyệt yêu cầu trở thành giảng viên 116
Bảng 62: Mô tả chi tiết trang thêm mới người kiểm duyệt 117
Bảng 63: Mô tả chi tiết trang đăng ký tài khoản 118
Bảng 64: Mô tả chi tiết trang danh sách khóa học 119
Bảng 65: Mô tả chi tiết trang chi tiết khóa học 120
Bảng 66: Mô tả chi tiết trang phòng học 121
Bảng 67: Mô tả chi tiết chức năng note trong khóa học 122
Bảng 68: Mô tả chi tiết chức năng hỏi đáp 123
Bảng 69: Mô tả chi tiết chức năng tạo lịch học 124
Bảng 70: Mô tả chi tiết chức năng hiển thị thông báo của giảng viên 125
Bảng 71: Mô tả chi tiết chức năng hỏi đáp với AI 126
Bảng 72: Mô tả chi tiết trang lịch sử mua hàng 127
Bảng 73: Mô tả chi tiết trang chi tiết giảng viên 128
Bảng 74: Mô tả chi tiết trang giỏ hàng 129
Bảng 75: Các phần mền cần cài đặt 130
Bảng 76: : Kiểm thử chức năng đăng nhập trường hợp dữ liệu đúng 134
Bảng 77: Kiểm thử chức năng đăng ký với bộ dữ liệu đúng 135
Bảng 78: Kiểm thử chức năng tìm kiếm khóa học 136
Bảng 79: Kiểm thử chức năng thanh toán 137
Bảng 80: Kiểm thử chức năng thêm sản phẩm vào giỏ hàng 138
Bảng 81: Kiểm thử chức năng đánh giá khóa học đã mua 139
Bảng 82: Kiểm thử chức năng thêm ghi chú 140
Bảng 83: Kiểm thử chức năng thêm câu hỏi 141
Bảng 84: Kiểm thử chức năng hỏi đáp với AI 142
Bảng 85: Kiểm thử chức năng đánh dấu hoàn thành bài học 143
Bảng 86: Kiểm thử chức năng gửi yêu cầu trở thành giảng viên 144
Bảng 87: Kiểm thử chức năng duyệt yêu cầu trở thành giảng viên 146
Bảng 88: Kiểm thử chức năng đăng ký tạo khóa học 147
Bảng 89: Kiểm thử chức năng phê duyệt khóa học trường hợp được phép duyệt 148
Bảng 90: Kiểm thử chức năng thêm mới bài học trường hợp bài học là video 149
Bảng 91: Kiểm thử chức năng thêm mới bài học trường hợp bài học là quiz 150
DANH MỤC CÁC TỪ VIẾT TẮT
STT Từ viết tắt Ý nghĩa
4 CORS Cross-origin resource sharing
5 CSRF Cross-site Request Forgery
8 RDMS Relational Database Management System
9 CSDL Cơ sở dữ liệu
11 HAMC A hashed message authentication code
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Việc xây dựng và ứng dụng công nghệ thông tin hiện nay đã trở thành mục tiêu cấp thiết, không chỉ thúc đẩy sự phát triển xã hội mà còn khắc phục khó khăn về khoảng cách và hiệu suất, đặc biệt trong bối cảnh dịch bệnh Covid-19 Tuy nhiên, vẫn còn nhiều thách thức trong việc áp dụng công nghệ thông tin vào đời sống Nhằm giải quyết vấn đề này, nhóm đã chọn nghiên cứu đề tài “Xây dựng website kinh doanh khóa học online”, với mong muốn tạo ra một nền tảng kết nối giữa người bán và người mua Trang web sẽ cho phép người mua dễ dàng lựa chọn khóa học online mà không cần trung gian, trong khi người bán có cơ hội giới thiệu ưu điểm của khóa học mà không tốn phí quảng cáo Nhóm hy vọng rằng website này sẽ góp phần thúc đẩy việc học online cho người Việt Nam một cách hiệu quả và thuận tiện hơn.
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu học tập mọi lúc, mọi nơi của người dùng, không bị giới hạn về thời gian cũng như địa điểm, chỉ cần thiết bị thông minh có thể truy cập được Internet là có thể học được Đồng thời, đề tài cũng nghiên cứu các công nghệ để hoàn thiện sản phẩm một cách hoàn chỉnh nhất, bao gồm:
- Spring Boot kết hợp với Spring Security, Spring Data JPA để xây dựng phần server cho website
- Thư viện ReactJS để thiết kế và xây dựng giao diện cho người dùng
- Cơ sở dữ liệu MySQL để lưu trữ dữ liệu cho hệ thống
JSON Web Token (JWT) là một giải pháp bảo mật quan trọng cho hệ thống Để truy cập các API yêu cầu xác thực, ứng dụng cần cung cấp JWT trong phần header của yêu cầu.
- AWS S3 Bucket để lưu trữ các video khóa học, tài liệu và hình ảnh
Trong tiểu luận chuyên ngành, chúng tôi tập trung vào việc phát triển một trang web kinh doanh khóa học online, cung cấp các chức năng như tìm kiếm và mua khóa học, cho phép người dùng học trực tiếp trên nền tảng Trang web còn tích hợp các tính năng bổ trợ như tạo ghi chú, bình luận thảo luận dưới video, giao tiếp với chatbot ChatGPT, thiết lập lịch nhắc học và quản lý thanh toán, cũng như kiểm tra các khóa học đã mua.
Phần quản trị tập trung vào việc quản lý sản phẩm, khóa học, và giáo viên trong hệ thống Nó bao gồm quản lý doanh thu, duyệt nội dung khóa học mới đăng ký, và xử lý yêu cầu trở thành giảng viên từ người dùng.
Trong quá trình hoàn thiện đề tài, nhóm thực hiện đã đặt ra những mục tiêu sau:
- Xây dựng một trang kinh doanh khóa học online với những chức năng cơ bản cho người dùng và giáo viên của các khóa học
- Xây dựng được giao diện thân thiện với người sử dụng, dễ sử dụng và thao tác
- Áp dụng được các hình thức thanh toán như VNPAY vào hệ thống website
- Áp dụng được dịch vụ AWS S3 để lưu trữ dữ liệu cho hệ thống
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công nghệ mới và đáp ứng nhu cầu học online của người dùng Mục đích giúp tạo ra một hệ thống có thể giúp cho việc học tập thông qua Internet trở nên ngày càng thuận lời Đồng thời, cung cấp một nơi kết nối các giảng viên , cùng chia sẻ các kiến thức trên nhiều lĩnh vực
PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
Spring Boot is an extension of the Spring Framework that simplifies the configuration process required by Spring Developed in Java, Spring Boot is designed for creating stand-alone, production-grade applications efficiently.
1.1.2 Kiến trúc và cách hoạt động của Spring Boot
Spring Boot tuân theo kiến trúc phân lớp, trong đó mỗi lớp giao tiếp với lớp ngay bên dưới hoặc bên trên của nó
The Presentation Layer is the topmost layer of a Spring Boot application, responsible for handling HTTP requests, performing authentication, and converting JSON to Java objects and vice versa.
Lớp Kinh Doanh: Lớp này đảm nhận vai trò xử lý các nghiệp vụ của dự án, thực hiện các lệnh kiểm tra nhằm đảm bảo tính chính xác của dữ liệu và logic.
Persistence Layer: Nó bao gồm tất cả các xử lý về thao tác với database như lưu trữ, cập nhật, truy vấn hoặc xoá dữ liệu
Lớp cơ sở dữ liệu có thể bao gồm nhiều cơ sở dữ liệu, cho phép thao tác với dữ liệu được đồng bộ hóa trên nhiều máy chủ cơ sở dữ liệu khác nhau.
Hình 1: Kiến trúc phân lớp của SpringBoot
Kiến trúc Spring Boot dựa trên Spring framework Vì vậy, nó chủ yếu sử dụng tất cả các tính năng và module của Spring MVC, Spring Core, v.v.,
Khi có một HTTP request đến server, Controller sẽ xử lý và gọi các Service tương ứng để xử lý business
Service Layer bao gồm tất cả các xử lý liên quan đến business logic, thực hiện thao tác với dữ liệu thông qua các Repository, và ánh xạ dữ liệu từ cơ sở dữ liệu sang lớp mô hình.
1.1.3 Ưu điểm của Spring Boot
- Phát triển các ứng dụng dựa trên Spring một cách tiết kiệm thời gian và dễ dàng
- Tự động cấu hình tất cả các components cho một ứng dụng Spring
- Các máy chủ nhúng được tạo sẵn (Tomcat, Jetty và Undertow), dẫn đến việc triển khai ứng dụng được tăng tốc và hiệu quả hơn
- Không có cấu hình XML
- Nhiều lựa chọn bổ sung, hỗ trợ nhà phát triển làm việc với cơ sở dữ liệu được nhúng vào trong bộ nhớ
- Dễ dàng truy cập cơ sở dữ liệu và các dịch vụ hàng đợi như MySQL, Oracle, MongoDB, Redis, ActiveMQ và các dịch vụ khác
- Có nhiều plugins để phát triển bằng các công cụ như Maven hoặc Gradle
1.1.4 Nhược điểm của Spring Boot
Bên cạnh những ưu điểm trên, thì Spring Boot vẫn có một số các nhược điểm như:
- Spring Boot tạo ra nhiều phụ thuộc không được sử dụng dẫn đến kích thước tệp triển khai lớn
- Quá trình chuyển đổi các dự án Spring cũ hoặc dự án Spring hiện có thành các ứng dụng Spring Boot nhiều khó khăn và tốn thời gian
1.1.5 Ứng dụng vào đề tài
Trong đề tài của nhóm, Backend được viết hoàn toàn bằng SpringBoot theo kiến trúc Monolithic Được tổ chức theo mô hình 3 lớp (three-layer):
Presentation Layer: là tầng được sử dụng để xử lý các HTTP request Bao gồm các file JAVA được đánh dấu với anotation là @RestController hoặc @Controller
When a client sends a request to the server, it first passes through the Front Controller before reaching the configured Controllers This built-in controller serves several important functions.
- Phân giải request, tìm coi request gọi tới method nào của controller nào để gọi đúng tới đó
- Các data của request sẽ được parse ra và mapping tương ứng vào các tham số controller method (có @RequeSstParam, @PathVariable, @Header, tương ứng)
Hình 4: Ví dụ về Controller được cấu hình trong đề tài
Business Layer: là tầng chứa các files được đánh dấu với anotation là @Service, được dùng để xử lý các logic hệ thống
Hình 5: Cấu trúc service trong backend
In this topic, the service is divided into two main packages: the Interface and its Implementation Other components that wish to utilize the functions within the service must declare the Interfaces as properties Classes that utilize the service will interact with the service class accordingly.
7 giao tiếp với nhau thông qua Interface, chỉ những hàm hay method được khai báo trong interface thì các class khác mới được sử dụng
Hình 6: Ví dụ về class Service trong backend
Persistence Layer: bao gồm các Repository Interface được thừa kế từ
JPARepository, được dùng để thao tác với database
Hình 7: Cấu trúc thư mục repository
JPARepository là một kho dữ liệu cung cấp nhiều phương thức thao tác với cơ sở dữ liệu mà không cần định nghĩa các hàm riêng lẻ Nó được kế thừa từ PagingAndSortingRepository, cho phép thực hiện các phương thức sắp xếp dữ liệu và các thao tác CRUD cơ bản một cách hiệu quả.
Hình 8: Ví dụ về Repository
JPARepository sẽ nhận 2 tham số đầu vào là Entity class và kiểu dữ liệu của ID của Entity đó
To connect to the database, it is essential to configure the connection details, including the connection string, username, and password, in the application.properties file.
Hình 9: Cấu hình database trong file application.properties
KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU
XÁC ĐỊNH YÊU CẦU
2.3 Mô hình hoá yêu cầu
3 Chương 3: THIẾT KẾ HỆ THỐNG
3.1 Thiết kế cơ sở dữ liệu
4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ
STT Thời gian thực hiện Công việc Ghi chú
Thiết kế usecase và mô hình hóa yêu cầu
Thiết kế cơ sở dữ liệu
Tìm hiểu thư viện ReactJS, Material UI Tìm hiểu framework Spring Boot Tìm hiểu Spring Security, JWT
Tiến hành tổ chức cấu trúc project Xây dựng các tables của cơ sở dử liệu
Tạo các Entities trong Spring Boot và mapping với cơ sở dữ liệu
Xây dựng API cho các chức năng cơ bản dành cho người dùng có phân quyền là User
Xây dựng Giao diện người dùng cho hệ thống
Tp Hồ Chí Minh, ngày tháng năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương
(Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên)
Kết hợp các phần đã xây dựng (giao diện, APIs, database)
Xây dựng giao diện cho trang Admin Tiến hàng tạo các APIs cho Admin
Xây dựng chức năng nâng cao là các tool học tập cho người dùng
Tiến hàng code tính năng cho phép có thêm bài Test, file bài giảng cho các khoá học
Xây dựng tính năng quản lý khoá học cho giảng viên
Xây dựng tính năng phê duyệt khoá học, đăng ký khoá học mới
Kiểm thử chương trình Tìm hiểu quá trình deploy sản phẩm
Viết script CI/CD Tìm hiểu AWS CloudFront Tiến hành deploy sản phẩm
9 16/06/2023 – 21/06/2023 Kiểm thử chương trình và tiến hành sửa lỗi
10 22/06/2023 – 07/07/2023 Viết và hoàn thiện báo cáo
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 2
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3
1.1.2 Kiến trúc và cách hoạt động của Spring Boot 3
1.1.3 Ưu điểm của Spring Boot 4
1.1.4 Nhược điểm của Spring Boot 5
1.1.5 Ứng dụng vào đề tài 5
1.2.2 Cơ chế hoạt động của Spring Security 10
1.2.3 Ưu điểm của Spring Security 10
1.2.4 Ứng dụng Spring Security vào đề tài 11
1.3.2 Cách hoạt động của MYSQL 13
1.3.5 Ứng dụng MySQL vào đề tài 14
1.4.2 Cách hoạt động của RESTFUL API 15
1.4.3 Ứng dụng REST API vào đề tài 16
1.5.2 Các thành phần của JWT 17
1.6.2 Cách tổ chức dữ liệu của AWS S3 19
1.6.3 Ứng dụng AWS S3 vào đề tài 20
1.7.2 Các thành phần của React: 22
1.7.3 Ưu và nhược điểm của ReactJS 23
1.7.4 Ứng dụng ReactJS vào đề tài 24
1.8.3 Ứng dụng Redux vào đề tài 28
1.9.4 Ứng dụng Material UI vào đề tài 31
1.10.3 Ứng dụng Bootstrap vào đề tài 32
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 35
2.1.2 Yêu cầu bài toán của đề tài 37
2.2.2 Yêu cầu phi chức năng 39
2.3 MÔ HÌNH HÓA YÊU CẦU 39
CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 87
3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 88
3.2.2 Mô tả chi tiết bảng dữ liệu 89
3.3.1 Giao diện cho Admin và Teacher 108
4.1.2 Giao diện cho người dùng 118
CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 130
4.1.1 Cài đặt ứng dụng, thư viện cần thiết 130
4.2.4 Các trường hợp kiểm thử 134
Hình 1: Kiến trúc phân lớp của SpringBoot 3
Hình 4: Ví dụ về Controller được cấu hình trong đề tài 6
Hình 5: Cấu trúc service trong backend 6
Hình 6: Ví dụ về class Service trong backend 7
Hình 7: Cấu trúc thư mục repository 7
Hình 8: Ví dụ về Repository 8
Hình 9: Cấu hình database trong file application.properties 8
Hình 10: Các class DTO trong server 9
Hình 11: Cơ chế hoạt động của Spring Security 10
Hình 12: Cấu hình Spring Security 11
Hình 14: Xử lý trả ra token khi user login thành công 12
Hình 15: Xử lý data trả ra khi user login không thành công 12
Hình 16: Xử lý Exception trong Spring 13
Hình 17: Cấu hình kết nối tới MySQL 15
Hình 19: Class cấu hình data trả ra cho client 17
Hình 20: Ví dụ về Header của JWT 18
Hình 21: Ví dụ về Payload của JWT 18
Hình 22: Tổ chức dữ liệu trên AWS S3 19
Hình 25: AWS CloudFront được sử dụng 21
Hình 26: Script Deploy Client lên S3 21
Hình 27: Tổ chức thư mục trong Legacy 24
Hình 29: Sử dụng component TeacherCard ở Component OurTeacher 25
Hình 30: Tổ chức Route trong Legacy trong thư mục MainRoute 26
Hình 31: Ví dụ url /courses sẽ render ra trang danh sách khóa học 27
Hình 32; Ví dụ điều hướng Route trong component Header 27
Hình 33: Ví dụ khởi tạo global state cart ở file cartRedux.js trong thư mục redux 29
Hình 34: Ví dụ bỏ các global state vào store ở file store.js trong thư mục redux 29
Hình 35: Ví dụ bọc store vào cả app ở thư mục index.js 30
Hình 36; : Ví dụ sử dụng global state ở component Header 30
Hình 37: Ví dụ về componet DatePicker để tạo component 31
Hình 38: Ví dụ sử dụng bootstrap và react-bootstrap 33
Hình 39: Ví dụ responsive trên màn hình cỡ trung bình trở lên 33
Hình 40: Ví dụ responsive trên màn hình cỡ nhỏ 34
Hình 41: Giao diện website khảo sát Unica 35
Hình 42: Giao diện Website khảo sát F8 – Học lập trình để đi làm 36
Hình 43: Use Case cho Admin 39
Hình 44: Use Case cho Teacher 40
Hình 45: Use Case cho người có phân quyền là Reviewer 40
Hình 46: Use Case cho người có phân quyền là User 41
Hình 47: : Sequence Diagram cho chức năng gửi yêu cầu duyệt khoá học mới 42
Hình 48: Sequence Diagram chức năng gửi kết quả phê duyệt yêu cầu trở thành giảng viên 44
Hình 49: Sequence Diagram đánh giá khoá học đã mua 46
Hình 50: Sequence Diagram chức năng đăng nhập 47
Hình 51: Sequence Diagram chức năng đăng ký tài khoản 49
Hình 52: Sequence Diagram chức năng thanh toán 51
Hình 53: Sequence Diagram yêu cầu trở thành giảng viên 54
Hình 54: Sequence Diagram chức năng trao đổi thông tin với chatBot 56
Hình 55: Sequence Diagram tạo lịch nhắc hẹn học tập 58
Hình 56: Sequence Diagram chức năng tạo câu hỏi thảo luận 60
Hình 57: Sequence Diagram chức năng xem danh sách bài giảng 61
Hình 58: Sequence Diagram chức năng xoá thảo luận trong bài giảng 63
Hình 59: Sequence Diagram chức năng xem thông báo từ giảng viên 65
Hình 60:Sequence Diagram chức năng 66
Hình 61: Sequence Diagram thêm ghi chú cho bài giảng 68
Hình 62: Sequence Diagram chức năng thực hiện bài Test 70
Hình 63: Sequence Diagram chức năng đánh dấu bài học là hoàn thành 72
Hình 64: Sequence Diagram chức năng xem danh sách giảng viên 74
Hình 65:Sequence Diagram chức năng thêm khoá học vào danh sách yêu thích 75
Hình 66:Sequence Diagram chức năng xem danh sách yêu câu phê duyệt trở thành giảng viên 77
Hình 67: Sequence Diagram đăng ký account reviewer 79
Hình 68: Sequence Diagram chức năng nhận task kiểm duyệt 81
Hình 69: Sequence Diagram chức năng duyệt yêu cầu tạo mới khoá học 83
Hình 70: Sequence Diagram chức năng cập nhật bài giảng 85
Hình 73: Giao diện trang đăng nhập 108
Hình 74: Giao diện trang quản lý khoá học 109
Hình 75: Giao diện trang chỉnh sửa thông tin tổng quan khoá học 110
Hình 76: Giao diện trang chỉnh sửa nội dung bài học 110
Hình 77: Giao diện trạng thêm mới chapter 112
Hình 78: Giao diện trang chỉnh sửa bài học 113
Hình 79: Giao diện trang quản lý yêu cầu phê duyệt khoá học 114
Hình 81: Giao diện trang đăng kí thông tin khoá học mới 114
Hình 81: Giao diện trang quản lý khóa học 115
Hình 82: Giao diện trang phê duyệt yêu cầu trở thành giảng viên 116
Hình 83: Giao diện trang thêm mới người kiểm duyệt 117
Hình 84: Giao diện trang đăng ký tài khoản 118
Hình 85: Giao diện trang danh sách khóa học 119
Hình 86: Giao diện trang chi tiết khóa học 120
Hình 87: Giao diện trang chi tiết khóa học 120
Hình 88: Giao diện trang phòng học 121
Hình 89: Giao diện chức năng note trong khóa học 122
Hình 90: Giao diện chức năng hỏi đáp trong khóa học 123
Hình 91: Giao diện chức năng thêm lịch học 124
Hình 92: Giao diện chức năng hiển thị thông báo của giảng viên 125
Hình 93: Giao diện chức năng hỏi đáp với AI 125
Hình 94: Giao diện trang lịch sử mua hàng 126
Hình 95: Giao diện trang lịch sử mua hàng 127
Hình 96: Giao diện trang chi tiết giảng viên 128
Hình 97: Giao diện trang giỏ hàng 129
Hình 98: Cấu trúc thư mục phía Backend 131
Hình 99: File cấu hình SpringBoot 131
Hình 100: Cấu trúc thư mục Front End (User) 132
Hình 101: Cấu trúc thư mục Front End (Admin, Teacher, Reviewer) 133
Bảng 1: Đặc tả UseCase gửi yêu cầu phê duyệt khoá học mới 42
Bảng 2: Đặc tả Use Case chấp nhận yêu cầu trở thành giảng viên 44
Bảng 3: Đặc tả Use Case đánh giá khóa học đã mua 46
Bảng 4: Đặc tả Use Case đăng nhập 47
Bảng 5: Đặc tả Use Case đăng ký tài khoản 49
Bảng 6: Đặc tả Use Case thanh toán đơn hàng 51
Bảng 7: : Đặc tả Use Case yêu cầu trở thành giảng viên 54
Bảng 8: Đặc tả UseCase trao đổi thông tin với ChatBot 56
Bảng 9: Đặc tả UseCase tạo lịch nhắc hẹn học tập 58
Bảng 10: Đặc tả Use Case tạo câu hỏi thảo luận 60
Bảng 11: Đặc tả Use chức năng xem danh sách thảo luận 61
Bảng 12: Đặc tả Use Case chức năng xoá thảo luận trong bài giảng 63
Bảng 13: Đặc tả Use Case xem thông báo từ giảng viên 65
Bảng 14: Đặc tả UseCase chức năng xem danh sách ghi chú 66
Bảng 15: Đặc tả Use Case thêm ghi chú 68
Bảng 16: Đặc tả Use Case thực hiện bài Quiz 70
Bảng 17: Đặc tả Use Case chức năng đánh dấu hoàn thành bài học 73
Bảng 18: Đặc tả Use case xem danh sách giảng viên 74
Bảng 19: Đặc tả Use Case năng thêm khoá học vào danh sách yêu thích 75
Bảng 20: Đặc tả Use Case xem danh sách yêu cầu phê duyệt thành giảng viên 77
Bảng 21: Đặc tả Use Case đăng ký reviewer 79
Bảng 22: Đặc tả Use Case nhận task kiểm duyệt 81
Bảng 23: Đặc tả Use Case gửi kêt quả yêu cầu duyệt khoá học 83
Bảng 24: Đặc tả Use Case cập nhật bài giảng 85
Bảng 25: Mô tả chi tiết bảng Account 89
Bảng 26: Mô tả chi tiết bảng UserDetail 89
Bảng 27: Mô tả chi tiết bảng Cart 90
Bảng 28: Mô tả chi tiết bảng Cart Detail 90
Bảng 29: Mô tả bảng Category 91
Bảng 30: Mô tả chi tiết bảng Chapters 91
Bảng 31: Mô tả chi tiết bảng Coupon 92
Bảng 32: Mô tả chi tiết bảng courses 93
Bảng 33: Mô tả chi tiết bảng courses_paid 94
Bảng 34: Mô tả chi tiết bảng Note 94
Bảng 35: Mô tả chi tiết bảng Orders 94
Bảng 36: Mô tả chi tiết bảng Order Detail 95
Bảng 37: Mô tả chi tết bảng Payment 96
Bảng 38: Mô tả chi tiết bảng Register_Teacher_Form 96
Bảng 39: Mô tả chi tiết bảng reviews 97
Bảng 40: Mô tả chi tiết bảng role 97
Bảng 41: Mô tả chi tiết bảng Announcement 97
Bảng 42: Mô tả chi tiết bảng course_summary_info_register 98
Bảng 43: Mô tả chi tiết bảng discuss 99
Bảng 44: Mô tả chi tiết bảng learning_process 100
Bảng 45: Mô tả chi tiết bảng lectures 101
Bảng 46: Mô tả chi tiết bảng quiz_answer 102
Bảng 47: Mô tả chi tiết bảng quiz_question 103
Bảng 48: Mô tả chi tiết bảng register_chapter 103
Bảng 49: Mô tả chi tiết bảng register_course_session 104
Bảng 50: Mô tả chi tiết bảng register_lectures 105
Bảng 51: Mô tả chi tiết bảng reviewer_role 106
Bảng 52: Mô tả chi tiết bảng teacher_profile 106
Bảng 53: Mô tả chi tiết bảng wish_list 107
Bảng 54: Mô tả trang đăng nhập 108
Bảng 55: Mô tả trang quản lý khoá học 109
Bảng 56: Mô tả giao diện trang chỉnh sửa khoá học 110
Bảng 57: Mô tả trang thêm mới chapter 112
Bảng 58: Mô tả trang chỉnh sửa bài học 113
Bảng 59: Mô tả giao diện trang quản lý yêu cầu phê duyệt khoá học 114
Bảng 60: Mô tả chi tiết trang quản lý khóa học 115
Bảng 61: Mô tả chi tiết trang phê duyệt yêu cầu trở thành giảng viên 116
Bảng 62: Mô tả chi tiết trang thêm mới người kiểm duyệt 117
Bảng 63: Mô tả chi tiết trang đăng ký tài khoản 118
Bảng 64: Mô tả chi tiết trang danh sách khóa học 119
Bảng 65: Mô tả chi tiết trang chi tiết khóa học 120
Bảng 66: Mô tả chi tiết trang phòng học 121
Bảng 67: Mô tả chi tiết chức năng note trong khóa học 122
Bảng 68: Mô tả chi tiết chức năng hỏi đáp 123
Bảng 69: Mô tả chi tiết chức năng tạo lịch học 124
Bảng 70: Mô tả chi tiết chức năng hiển thị thông báo của giảng viên 125
Bảng 71: Mô tả chi tiết chức năng hỏi đáp với AI 126
Bảng 72: Mô tả chi tiết trang lịch sử mua hàng 127
Bảng 73: Mô tả chi tiết trang chi tiết giảng viên 128
Bảng 74: Mô tả chi tiết trang giỏ hàng 129
Bảng 75: Các phần mền cần cài đặt 130
Bảng 76: : Kiểm thử chức năng đăng nhập trường hợp dữ liệu đúng 134
Bảng 77: Kiểm thử chức năng đăng ký với bộ dữ liệu đúng 135
Bảng 78: Kiểm thử chức năng tìm kiếm khóa học 136
Bảng 79: Kiểm thử chức năng thanh toán 137
Bảng 80: Kiểm thử chức năng thêm sản phẩm vào giỏ hàng 138
Bảng 81: Kiểm thử chức năng đánh giá khóa học đã mua 139
Bảng 82: Kiểm thử chức năng thêm ghi chú 140
Bảng 83: Kiểm thử chức năng thêm câu hỏi 141
Bảng 84: Kiểm thử chức năng hỏi đáp với AI 142
Bảng 85: Kiểm thử chức năng đánh dấu hoàn thành bài học 143
Bảng 86: Kiểm thử chức năng gửi yêu cầu trở thành giảng viên 144
Bảng 87: Kiểm thử chức năng duyệt yêu cầu trở thành giảng viên 146
Bảng 88: Kiểm thử chức năng đăng ký tạo khóa học 147
Bảng 89: Kiểm thử chức năng phê duyệt khóa học trường hợp được phép duyệt 148
Bảng 90: Kiểm thử chức năng thêm mới bài học trường hợp bài học là video 149
Bảng 91: Kiểm thử chức năng thêm mới bài học trường hợp bài học là quiz 150
DANH MỤC CÁC TỪ VIẾT TẮT
STT Từ viết tắt Ý nghĩa
4 CORS Cross-origin resource sharing
5 CSRF Cross-site Request Forgery
8 RDMS Relational Database Management System
9 CSDL Cơ sở dữ liệu
11 HAMC A hashed message authentication code
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Hiện nay, việc ứng dụng công nghệ thông tin vào đời sống là một mục tiêu cấp thiết, giúp đẩy nhanh sự phát triển xã hội và khắc phục các khó khăn về khoảng cách, nhân lực và hiệu năng, đặc biệt trong bối cảnh dịch bệnh Covid Tuy nhiên, vẫn tồn tại nhiều khó khăn trong việc áp dụng công nghệ thông tin trong các lĩnh vực khác nhau và kết nối giữa người cung và người cầu Nhằm giải quyết vấn đề này, nhóm đã chọn nghiên cứu đề tài “Xây dựng website kinh doanh khóa học online”, với hy vọng thúc đẩy phát triển công nghệ thông tin và tạo ra một nền tảng kết nối giữa người bán và người mua Trang web sẽ cho phép người mua tự do xem xét và lựa chọn các khóa học online cần thiết mà không cần qua trung gian, trong khi người bán có cơ hội giới thiệu ưu điểm của khóa học mà không tốn phí quảng cáo Nhóm mong muốn rằng trang web này sẽ góp phần thúc đẩy việc học online cho người Việt Nam một cách dễ dàng và hiệu quả hơn.
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu học tập mọi lúc, mọi nơi của người dùng, không bị giới hạn về thời gian cũng như địa điểm, chỉ cần thiết bị thông minh có thể truy cập được Internet là có thể học được Đồng thời, đề tài cũng nghiên cứu các công nghệ để hoàn thiện sản phẩm một cách hoàn chỉnh nhất, bao gồm:
- Spring Boot kết hợp với Spring Security, Spring Data JPA để xây dựng phần server cho website
- Thư viện ReactJS để thiết kế và xây dựng giao diện cho người dùng
- Cơ sở dữ liệu MySQL để lưu trữ dữ liệu cho hệ thống
JSON Web Token (JWT) là một giải pháp bảo mật hiệu quả cho hệ thống Để truy cập các API yêu cầu xác thực, ứng dụng cần cung cấp JWT trong phần header của yêu cầu.
- AWS S3 Bucket để lưu trữ các video khóa học, tài liệu và hình ảnh
Trong tiểu luận chuyên ngành, nội dung chủ yếu tập trung vào việc phát triển một trang web chuyên cung cấp khóa học online Trang web cho phép người dùng tìm kiếm, xem và mua các khóa học, đồng thời hỗ trợ học trực tiếp với các tính năng như tạo ghi chú, bình luận thảo luận dưới video, và tương tác với chatbot sử dụng ChatGPT Ngoài ra, người dùng có thể thêm lịch nhắc học, thực hiện thanh toán và kiểm tra các khóa học đã mua.
Phần quản trị sẽ đảm nhận các nhiệm vụ quan trọng như quản lý sản phẩm, theo dõi các khóa học và giáo viên trên hệ thống, quản lý doanh thu, phê duyệt nội dung khóa học mới đăng ký, cũng như xử lý yêu cầu trở thành giảng viên từ người dùng.
Trong quá trình hoàn thiện đề tài, nhóm thực hiện đã đặt ra những mục tiêu sau:
- Xây dựng một trang kinh doanh khóa học online với những chức năng cơ bản cho người dùng và giáo viên của các khóa học
- Xây dựng được giao diện thân thiện với người sử dụng, dễ sử dụng và thao tác
- Áp dụng được các hình thức thanh toán như VNPAY vào hệ thống website
- Áp dụng được dịch vụ AWS S3 để lưu trữ dữ liệu cho hệ thống
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công nghệ mới và đáp ứng nhu cầu học online của người dùng Mục đích giúp tạo ra một hệ thống có thể giúp cho việc học tập thông qua Internet trở nên ngày càng thuận lời Đồng thời, cung cấp một nơi kết nối các giảng viên , cùng chia sẻ các kiến thức trên nhiều lĩnh vực
PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
Spring Boot is an extension of the Spring Framework that simplifies the configuration process required by Spring Developed in Java, Spring Boot is designed for creating stand-alone and production-grade applications efficiently.
1.1.2 Kiến trúc và cách hoạt động của Spring Boot
Spring Boot tuân theo kiến trúc phân lớp, trong đó mỗi lớp giao tiếp với lớp ngay bên dưới hoặc bên trên của nó
The Presentation Layer is the topmost layer of a Spring Boot application, responsible for handling HTTP requests, authentication, and converting JSON data to Java Objects and vice versa.
Lớp Kinh Doanh: Lớp này đảm nhiệm việc xử lý các nghiệp vụ của dự án, thực hiện các lệnh kiểm tra để đảm bảo tính chính xác của dữ liệu và logic.
Persistence Layer: Nó bao gồm tất cả các xử lý về thao tác với database như lưu trữ, cập nhật, truy vấn hoặc xoá dữ liệu
Lớp cơ sở dữ liệu có khả năng tích hợp nhiều cơ sở dữ liệu, cho phép các thao tác với dữ liệu được đồng bộ hóa trên nhiều máy chủ cơ sở dữ liệu khác nhau.
Hình 1: Kiến trúc phân lớp của SpringBoot
Kiến trúc Spring Boot dựa trên Spring framework Vì vậy, nó chủ yếu sử dụng tất cả các tính năng và module của Spring MVC, Spring Core, v.v.,
Khi có một HTTP request đến server, Controller sẽ xử lý và gọi các Service tương ứng để xử lý business
Service Layer bao gồm toàn bộ xử lý logic kinh doanh, thực hiện thao tác với dữ liệu thông qua các Repository, và ánh xạ dữ liệu từ cơ sở dữ liệu sang lớp mô hình.
1.1.3 Ưu điểm của Spring Boot
- Phát triển các ứng dụng dựa trên Spring một cách tiết kiệm thời gian và dễ dàng
- Tự động cấu hình tất cả các components cho một ứng dụng Spring
- Các máy chủ nhúng được tạo sẵn (Tomcat, Jetty và Undertow), dẫn đến việc triển khai ứng dụng được tăng tốc và hiệu quả hơn
- Không có cấu hình XML
- Nhiều lựa chọn bổ sung, hỗ trợ nhà phát triển làm việc với cơ sở dữ liệu được nhúng vào trong bộ nhớ
- Dễ dàng truy cập cơ sở dữ liệu và các dịch vụ hàng đợi như MySQL, Oracle, MongoDB, Redis, ActiveMQ và các dịch vụ khác
- Có nhiều plugins để phát triển bằng các công cụ như Maven hoặc Gradle
1.1.4 Nhược điểm của Spring Boot
Bên cạnh những ưu điểm trên, thì Spring Boot vẫn có một số các nhược điểm như:
- Spring Boot tạo ra nhiều phụ thuộc không được sử dụng dẫn đến kích thước tệp triển khai lớn
- Quá trình chuyển đổi các dự án Spring cũ hoặc dự án Spring hiện có thành các ứng dụng Spring Boot nhiều khó khăn và tốn thời gian
1.1.5 Ứng dụng vào đề tài
Trong đề tài của nhóm, Backend được viết hoàn toàn bằng SpringBoot theo kiến trúc Monolithic Được tổ chức theo mô hình 3 lớp (three-layer):
Presentation Layer: là tầng được sử dụng để xử lý các HTTP request Bao gồm các file JAVA được đánh dấu với anotation là @RestController hoặc @Controller
When a client sends a request to the server, it first passes through the Front Controller before reaching the configured Controllers This pre-existing controller serves a specific purpose.
- Phân giải request, tìm coi request gọi tới method nào của controller nào để gọi đúng tới đó
- Các data của request sẽ được parse ra và mapping tương ứng vào các tham số controller method (có @RequeSstParam, @PathVariable, @Header, tương ứng)
Hình 4: Ví dụ về Controller được cấu hình trong đề tài
Business Layer: là tầng chứa các files được đánh dấu với anotation là @Service, được dùng để xử lý các logic hệ thống
Hình 5: Cấu trúc service trong backend
In this topic, the service is divided into two main packages: the Interface and its Implementation Other components that wish to utilize the functions within the service must declare the Interfaces as a property Classes that use the service will interact with the service layer accordingly.
7 giao tiếp với nhau thông qua Interface, chỉ những hàm hay method được khai báo trong interface thì các class khác mới được sử dụng
Hình 6: Ví dụ về class Service trong backend
Persistence Layer: bao gồm các Repository Interface được thừa kế từ
JPARepository, được dùng để thao tác với database
Hình 7: Cấu trúc thư mục repository
JPARepository là một repository mạnh mẽ giúp thao tác với cơ sở dữ liệu mà không cần định nghĩa các hàm cụ thể Nó được kế thừa từ PagingAndSortingRepository, cung cấp các phương thức để sắp xếp dữ liệu và thực hiện các thao tác CRUD cơ bản.
Hình 8: Ví dụ về Repository
JPARepository sẽ nhận 2 tham số đầu vào là Entity class và kiểu dữ liệu của ID của Entity đó
To connect to the database, it is essential to configure the connection string, username, and password within the application.properties file This setup ensures a successful connection to the database.
Hình 9: Cấu hình database trong file application.properties
MÔ HÌNH HÓA YÊU CẦU
Hình 43: Use Case cho Admin
Hình 44: Use Case cho Teacher
Hình 45: Use Case cho người có phân quyền là Reviewer
Hình 46: Use Case cho người có phân quyền là User
2.3.2.1 Use Case gửi yêu cầu phê duyệt khoá học mới
Bảng 1: Đặc tả UseCase gửi yêu cầu phê duyệt khoá học mới
UC01 Đăng ký khóa học mới
Brief description Teacher đăng ký tạo mới một khóa học
Tác nhân đăng nhập thành công và có quyền đăng ký tạo khóa học
Hình 47: : Sequence Diagram cho chức năng gửi yêu cầu duyệt khoá học mới
Hệ thống lưu dữ liệu và thông báo gửi yêu cầu phê duyệt khoá học mới thành công
Use case bắt đầu khi người dùng nhấn nút “Thêm mới” ở trang danh sách đăng ký khóa học
1 Người dùng nhấn nút “Thêm mới” ở trang danh sách đăng ký khóa học
2 Hệ thống chuyển sang trang thêm mới khóa học
3 Người dùng nhập thông tin khóa học ở form đăng ký thông tin tổng quát khoá học
5 Hệ thống chuyển sang form đăng ký nội dung bài giảng khoá học
6 Người dùng nhập thông tin nội dung bài giảng của khóa học
8 Hệ thống chuyển sang form xem lại lại thông tin tổng quát và nội dung bài giảng
10 Hệ thống thông báo lưu thành công và cập nhật dữ liệu
4.(1) Khi người dùng nhập sai thông tin hệ thống sẽ thông báo lỗi và Use case quay lại Bước 3
7.(1) Khi người dùng nhập sai thông tin hệ thống sẽ thông báo lỗi và Use case quay lại Bước 6
7.(1) Người dùng nhấn “Prev” use case quay lại Bước
9.(1) Người dùng nhấn “Prev” use case quay lại Bước
Tên khóa học, loại khóa học, ngôn ngữ, giá, mô tả không được để trống
2.3.2.2 Use Case phê duyệt yêu cầu trở thành giảng viên
Bảng 2: Đặc tả Use Case chấp nhận yêu cầu trở thành giảng viên UC06 Chấp nhận yêu cầu trở thành giáo viên
Hình 48: Sequence Diagram chức năng gửi kết quả phê duyệt yêu cầu trở thành giảng viên
Brief description Tác nhân chấp nhận một yêu cầu trở thành giáo viên
Tác nhân đăng nhập thành công và có quyền duyệt yêu cầu trở thành giáo viên
Post-conditions Hệ thống lưu dữ liệu và thông báo duyệt thành công
Use case bắt đầu khi người dùng nhấn nút “Chấp nhận” hoặc “Từ chối” ở trang danh sách yêu cầu trở thành giáo viên ở tab “Chưa xử lý”
1 Người dùng nhấn Action ở mỗi dòng dữ liệu trong danh sách khóa học sau đó ấn nút chấp nhận yêu cầu
2 Hệ thống thông báo thành công và cập nhật dữ liệu
2.3.2.3 Use Case đánh giá khóa học đã mua
Bảng 3: Đặc tả Use Case đánh giá khóa học đã mua
UC08 Đánh giá khóa học đã mua
Brief description User hoặc Teacher đánh giá khóa học đã mua
Pre-conditions Người dùng đã có tài khoản và đã đăng nhập vào hệ thống thành công, người dùng đã mua khóa học
Post-conditions Hệ thống lưu lại thông tin đánh giá của người dùng
Use Case bắt đầu khi người dùng đăng nhập thành công, và truy cập vào trang chi tiết khóa học:
1 Người dùng chọn tab “Đánh giá” trong trang chi tiết khóa học
2 Hệ thống hiển thị danh sách các đánh giá và ô nhập đánh giá cho người dùng
3 Người dùng nhập đánh giá
Hình 49: Sequence Diagram đánh giá khoá học đã mua
4 Nhấn nút “Đánh giá” để gửi đánh giá khóa học
5 Hệ thống lưu lại đánh giá của người dùng và hiển thị lại danh sách các đánh giá
Business Rule Bình luận không được chứa các từ phản cảm
Bảng 4: Đặc tả Use Case đăng nhập
UC10 Đăng nhập tài khoản
Hình 50: Sequence Diagram chức năng đăng nhập
Brief description Tác nhân đăng nhập tài khoản đã có trên hệ thống
Pre-conditions Tác nhân đã có tài khoản trên hệ thống
Post-conditions Hệ thống tạo được access token và lưu phiên đăng nhập của người dùng
Tác nhân thực hiện đăng nhập vào trang web của cửa hàng
1 Tác nhấn bấm nút “Đăng nhập” trên Header
2 Hệ thống hiển thị ra trang nhập thông tin đăng nhập
3 Tác nhân nhập username và mật khẩu đã có trên hệ thống
4 Nhấn nút “Đăng nhập” để gửi thông tin đăng nhập cho hệ thống
5 Hệ thống xác thực thông tin đăng nhập của tác nhân (1)
6 Hệ thống lưu lại access token của tác nhân vào cookie, thông báo đăng nhập thành công và chuyển sang trang chủ
Alternative flow 7.(1) Sai thông tin hệ thống báo lỗi và Use case quay lại
2.3.2.5 Use Case đăng ký tài khoản
Bảng 5: Đặc tả Use Case đăng ký tài khoản
UC11 Đăng ký tài khoản
Brief description User đăng kí tài khoản trên hệ thống
Pre-conditions Người dùng chưa có tài khoản trên hệ thống
Post-conditions Hệ thống lưu lại thông tin tài khoản của người dùng
Tác nhân thực hiện đăng ký tài khoản vào trang web của cửa hàng
1 Tác nhấn bấm nút “Đăng ký” trên Header
2 Hệ thống hiển thị ra trang nhập thông tin đăng ký tài khoản
Hình 51: Sequence Diagram chức năng đăng ký tài khoản
3 Tác nhân nhập các thông tin đăng ký mà hệ thống yêu cầu: họ tên, email, số điện thoại, giới tính, ngày sinh, tên đăng nhập, mật khẩu
4 Nhấn nút “Đăng ký” để gửi thông tin đăng ký cho hệ thống (1)
5 Hệ thống xác thực thông tin đăng ký của tác nhân
6 Hệ thống lưu lại thông tin đăng ký, tạo tài khoản cho người dùng
7 Hệ thống chuyển người dùng sang trang “Đăng nhập”
4.(1) Thông tin tác nhân điền không đầy đủ theo biểu mẫu yêu cầu:
Hiển thị thông báo các trường còn chưa nhập dữ liệu, và bắt người dùng nhập tiếp các thông tin còn thiếu
5.(1) Tài khoản đăng nhập đã tồn tại:
Hiển thị thông báo tên đăng nhập đã tồn tại trên hệ thống, cho người dùng nhập lại tên đăng nhập khác
5.(2) Password ít hơn 6 ký tự
Hiển thị thông báo password phải đủ 8 ký tự, bắt người dùng nhập lại mật khẩu
5.(3) Số điện thoại không đúng mẫu
Hiển thị thông báo số điện thoại phải là số, không được chứa ký tự chữ cái, ký tự đặc biệt
5.(4) Email đã tồn tại trên hệ thống
Hiển thị thông báo email đã tồn tại trên hệ thống, vui lòng chọn email khác
2.3.2.6 Use Case thanh toán đơn hàng
Bảng 6: Đặc tả Use Case thanh toán đơn hàng
UC12 Thanh toán đơn hàng
Brief description Tác nhân thanh toán đơn hàng trong giỏ hàng
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Hình 52: Sequence Diagram chức năng thanh toán
Post-conditions Hệ thống cập nhật đơn hàng cho tác nhân
Use Case diễn ra khi tác nhân bấm nút “Thanh toán” trong trang giỏ hàng:
1 Tác nhấn bấm nút “Thanh toán” trên trang giỏ hàng
2 Hệ thống kiểm tra thông tin sản phẩm cần mua của tác nhân (1) (2)
3 Hệ thống gửi yêu cầu thanh toán sang trang thanh toán VNPAY (1)
4 Hệ thống chuyển người dùng sang cổng thanh toán của VNPAY
5 Người dùng chọn hình thức thanh toán được VNPAY hỗ trợ và nhập thông tin theo yêu cầu
6 Người dùng bấm nút thanh toán để thanh toán đơn hàng
7 Hệ thống nhận kết quả thanh toán của VNPAY, kiểm tra dữ liệu và cập nhật đơn hàng (1)
8 Hệ thống gửi mail thông báo đến người dùng mua hàng thành công
9 Hệ thống chuyển người dùng đến trang kết quả thanh toán đơn hàng
2.(1) Không có sản phẩm nào trong yêu cầu được gửi lên
Hiển thị thông báo không có sản phẩm nào cần thanh toán Use Case quay lại Bước 1
2.(2) Người dùng nhập mã giảm giá nhưng mã giảm giá không hợp lệ
Hiển thị thông báo mã giảm giá không hợp lệ, yêu cầu chọn lại mã giảm giá Use Case quay lại Bước 1
3.(1) Hệ thống gửi yêu cầu thanh toán sang VNPAY thất bại
Hiển thị thông báo có lỗi xảy ra trong quá trình thanh toán
4.(1) Tài khoản đăng nhập không tồn tại:
Hiển thị thông báo tài khoản này không tồn tại trên hệ thống
Use Case quay lại Bước 1
5.(1) Tài khoản đã có token để reset mật khẩu trước đó và còn hiệu lực
Hiển thị thông báo đã gửi yêu cầu reset mật khẩu trước đó, chờ 5 phút để thực hiện lại yêu cầu
Use Case quay lại Bước 1
7.(1) Thanh toán đơn hàng không thành công
Chuyển người dùng sang trang kết quả thanh toán đơn hàng không thành công
Use Case quay lại Bước 1
2.3.2.7 Use Case yêu cầu trở thành giảng viên
Bảng 7: : Đặc tả Use Case yêu cầu trở thành giảng viên
UC15 Yêu cầu trở thành giảng viên
Brief description Tác nhân yêu cầu trở thành giảng viên của hệ thống
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống lưu lại yêu cầu của người dùng
Basic flow Use Case diễn ra khi tác nhân chọn “Yêu cầu trở thành giảng viên” trong trang thông tin cá nhân:
Hình 53: Sequence Diagram yêu cầu trở thành giảng viên
1 Tác nhân chọn nút “Yêu cầu trở thành giảng viên” trong trang thông tin cá nhân
2 Hệ thống hiển thị form nhập dữ liệu cho tác nhân
3 Tác nhân nhập các thông tin hệ thống yêu cầu: số điện thoại, nghề nghiệp hiện tai, kinh nghiệm giảng dạy, chủ đề giảng dạy
4 Tác nhân bấm nút “Lưu” để nộp yêu cầu cho hệ thống (1)
5 Hệ thống xác thực các thông tin (1)
6 Hệ thống gửi mail thông báo đã tiếp nhận yêu cầu cho người đùng
7 Hệ thống gửi thông báo lưu yêu cầu thành công
4.(1) Tác nhân chưa nhập đủ thông tin theo yêu cầu
Hiển thị thông báo còn thiếu dữ liệu và bắt tác nhân nhập lại
Use Case quay lại bước 3
5.(1) Số điện thoại nhập chưa đúng
Hiển thị thông báo số điện thoại chưa đúng, chỉ được chứa chữ số
Use Case quay lại bước 3
Số điện thoại không được để trống, chỉ chứ 10 ký tự số Chủ đề giảng dạy không được để trống
Kinh nghiệm giảng dạy không được để trống Nghề nghiệp hiện tại không được để trống
2.3.2.8 Use Case chức năng trao đổi thông tin với ChatBot
Hình 54: Sequence Diagram chức năng trao đổi thông tin với chatBot
Bảng 8: Đặc tả UseCase trao đổi thông tin với ChatBot
UC17 Trao đổi thông tin với chatbot
Brief description Tác nhân thực hiện việc nhắn tin, trao đổi thông tin với chatbot
Pre-conditions User đã đăng nhập thành công vào hệ thống
Post-conditions Hệ thống trả lời lại câu hỏi do người dùng đặt ra trong chatbot
Use Case diễn ra khi tác nhân nhập nội dung và nhấn nút gửi trong tab chatbot ở trang xem bài giảng
1 Tác nhân chọn tab ChatBot trong trang xem bài giảng
2 Tác nhân nhập nội dung tin nhắn muốn gửi tới chatbot và nhấn nút gửi
3 Hệ thống gọi sang ChatGPTService để nhận được câu trả lời cho câu hỏi của người dùng
4 Hệ thống lưu lại tin nhắn của người dùng và phản hòi của chatGPT
5 Hệ thống trả về câu trả lời cho người dùng
2.3.2.9 Use Case tạo lịch nhắc hẹn học tập
Hình 55: Sequence Diagram tạo lịch nhắc hẹn học tập
Bảng 9: Đặc tả UseCase tạo lịch nhắc hẹn học tập
UC18 Tạo lịch nhắc hẹn học tập
Brief description Tác nhân thực hiện việc tạo lịch nhắc hẹn học tập
Pre-conditions User đã đăng nhập thành công vào hệ thống
Post-conditions Hệ thống tạo lịch nhắc hẹn trên Google Calendar của
User và thông báo thành công
Use Case diễn ra khi tác nhấn nút thêm lịch học trong trang xem bài bài giảng
1 Tác nhân chọn tab Lịch trong trang xem bài giảng
2 Tác nhân nhập nội dung lịch nhắc hẹn và thời gian gửi thông báo nhắc hẹn
3 Tác nhân đăng nhập và cấp quyền cho hệ thống có thể truy cập vào Google Calendar của user
4 Hệ thống gửi yêu cầu được phép truy cập vào Google Calendar của user tới Google Service
5 Hệ thống gửi yêu cầu thêm lịch học nhắc hẹn tới Google Service
6 Hệ thống thông báo thành công
2.3.2.10 Use Case tạo câu hỏi thảo luận
Hình 56: Sequence Diagram chức năng tạo câu hỏi thảo luận Bảng 10: Đặc tả Use Case tạo câu hỏi thảo luận
UC19 Tạo câu hỏi thảo luận
Brief description Tác nhân thực hiện việc tạo câu hỏi thảo luận
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn tạo câu hỏi
Post-conditions Hệ thống tạo lưu lại dữ liệu và thông báo thành công
Use Case diễn ra khi tác nhân điền nội dung câu hỏi và nhấn nút “thêm câu hỏi”
1 Tác nhân chọn tab Q&A trong trang xem bài giảng
2 Tác nhân nhập nội dung lịch câu hỏi
3 Tách nhân nhấn nút “thêm câu hỏi”
2.3.2.11 Use Case chức năng xem danh sách thảo luận trong bài học
Bảng 11: Đặc tả Use chức năng xem danh sách thảo luận
4 Hệ thống lưu lại câu hỏi
5 Hệ thống thông báo lưu câu hỏi thành công
Extension point Ở bước 4, nếu hệ thống lưu lại câu hỏi không thành công thì sẽ thực hiện các câu việc sau:
1 Thông báo lưu lại câu hỏi không thành công cho người dùng
UC20 Tạo câu hỏi thảo luận
Hình 57: Sequence Diagram chức năng xem danh sách bài giảng
Brief description Tác nhân thực hiện việc xem danh sách thảo luận trong bài học
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn xem câu hỏi
Post-conditions Hệ thống hiển thị danh thảo luận cho người dùng
Use Case diễn ra khi tác nhân chọn tab Q&A
1 Tác nhân chọn tab Q&A trong trang xem bài giảng
2 Hệ thống lấy danh sách các câu thảo luận có trong bài học
3 Hệ thống hiển thị danh sách các câu hỏi cho người dùng
2.3.2.12 Use Case chức năng xoá thảo luận trong bài giảng
Hình 58: Sequence Diagram chức năng xoá thảo luận trong bài giảng
Bảng 12: Đặc tả Use Case chức năng xoá thảo luận trong bài giảng
UC22 Tạo câu hỏi thảo luận
Brief description Tác nhân thực hiện việc xoá câu thảo luận của mình trong bài học
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn xem câu hỏi
Post-conditions Hệ thống cập nhật lại dữ liệu và cho thông báo xoá câu trả lời thành công
Basic flow Use Case diễn ra khi tác nhân thực hiện việc xoá câu trả lời cho câu thảo luận
1 Tác nhân chọn tab Q&A trong trang xem bài giảng
2 Tác nhân chọn câu thảo luận muốn xoá
3 Tác nhân nhấn nút xoá
4 Hệ thống kiểm tra xem có câu thảo luận bị xoá có phải của user hay không
5 Hệ thống cập nhật dữ liệu
6 Hệ thống thông báo xoá câu trả lời thành công
Alternative flow Ở bước 4, nếu hệ thống kiểm tra câu thảo luận không phải của người dùng thì sẽ thực hiện các công việc sau:
1 Thông báo xoá câu thảo luận không phải của người dùng
2 Use case quay lại bước 1 Ở bước 5, nếu hệ thống cập nhật dữ liệu không thành công thì sẽ thực hiện các công việc sau:
1 Thông báo xoá câu trả lời thất bại
2 Use case quay lại bước 1
2.3.2.13 Use Case xem thông báo từ giảng viên
Bảng 13: Đặc tả Use Case xem thông báo từ giảng viên
UC23 Xem thông báo từ giảng viên
Brief description Tác nhân thực hiện xem danh sách thông báo từ giảng viên trong khoá học
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn xem câu hỏi
Post-conditions Hệ thống lấy danh sách thông báo cho user
Use Case diễn ra khi tác nhân thực hiện việc xoá câu trả lời cho câu thảo luận
1 Tác nhân chọn tab thông báo trong trang xem bài giảng
Hình 59: Sequence Diagram chức năng xem thông báo từ giảng viên
2.3.2.14 Use Case xem danh sách ghi chú của user
Bảng 14: Đặc tả UseCase chức năng xem danh sách ghi chú
2 Hệ thống lấy danh sách các thông bảo từ giảng viên trong khoá học
3 Hệ thống hiển thị danh sách thông báo
UC34 Xem danh sách ghi chú
Brief description Tác nhân thực hiện xem danh sách ghi chú trong khoá học
Hình 60:Sequence Diagram chức năng
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn xem câu hỏi
Post-conditions Hệ thống lấy danh sách ghi chú cho user
Use Case diễn ra khi tác nhân thực hiện việc xoá câu trả lời cho câu thảo luận
1 Tác nhân chọn tab Note trong trang xem bài giảng
2 Hệ thống lấy danh sách các ghi chú của người dùng
3 Hệ thống hiển thị danh sách thông báo
2.3.2.15 Use Case thêm ghi chú trong bài giảng
Bảng 15: Đặc tả Use Case thêm ghi chú
Brief description Tác nhân thực hiện thêm ghi chú trong khoá học
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn xem câu hỏi
Post-conditions Hệ thống lưu lại ghi chú và thông báo thêm ghi chú thành công
Use Case diễn ra khi tác nhân thực hiện việc thêm ghi chú cho bài giảng
1 Tác nhân chọn tab Note trong trang xem bài giảng
2 Tác nhân chọn nút “thêm ghi chú”
3 Tác nhân nhập nội dung ghi chú
Hình 61: Sequence Diagram thêm ghi chú cho bài giảng
4 Tác nhân bấm nút lưu
5 Hệ thống lưu lại ghi chú của người dùng
6 Hệ thống thông báo lưu thành công
Extension point Ở bước 5, nếu hệ thống lưu ghi chú thất bại thì sẽ thực hiện các bước sau:
1 Hệ thống thông báo tạo ghi chú thất bại
2 Use case quay lại bước 3
2.3.2.16 Use Case thực hiện bài test trắc nghiệm
Bảng 16: Đặc tả Use Case thực hiện bài Quiz
UC27 Thực hiện bài Quiz
Brief description Tác nhân thực hiện việc làm bài test trong khoá học
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn xem câu hỏi
Hình 62: Sequence Diagram chức năng thực hiện bài Test
Post-conditions Hệ thống hiển thị danh sách câu hỏi trong bài và chấm bài làm sau khi người dùng nộp bài
Use Case diễn ra khi tác nhân thực hiện bài test trong khoá học đã mua:
1 Tác nhân chọn bài test ở phần danh sách bài giảng
2 Tác nhân nhấn nút “Start Quiz” để thực hiện bài test
3 Hệ thống lấy danh sách các câu hỏi và lựa chọn của bài test hiển thị cho người dùng
4 Tác nhân chọn đáp án cho từng câu hỏi
5 Tác nhân nhấn nút nộp bài test
6 Hệ thống kiểm tra đáp án của từng câu hỏi và tính toán kết quả bài test
7 Hệ thống lưu lại kết quả bài test
8 Hệ thống thông báo kết quả bài test cho người dùng
Extension point Ở bước 5, nếu người dùng chưa làm chọn đáp án cho tất cả các câu thì sẽ thực hiện các bước sau:
1 Hệ thống thông báo người dùng chưa làm xong bài test
2 Use case quay lại bước 4
2.3.2.17 Use Case đánh dấu hoàn thành bài học
Hình 63: Sequence Diagram chức năng đánh dấu bài học là hoàn thành
Bảng 17: Đặc tả Use Case chức năng đánh dấu hoàn thành bài học
UC28 Đánh dấu hoàn thành bài học
Brief description Tác nhân thực hiện việc đánh dấu hoàn thành bài học trong khoá học
Pre-conditions User đã đăng nhập thành công vào hệ thống và đã mua khoá học muốn xem câu hỏi
Post-conditions Hệ thống lưu lại bài học được đánh dấu hoàn thành và thông báo cập nhật thành công
Use Case diễn ra khi tác nhân thực hiện việc thêm ghi chú cho bài giảng
1 Tác nhân click vào ô checkbox đánh dấu hoàn thành khoá học ở bài học cần đánh dấu
2 Hệ thống cập nhật lại tiến độ học tập của người dùng tại khoá học đó
3 Hệ thống thông báo cập nhật tiến độ thành công
Extension point Ở bước 2, nếu hệ thống lưu ghi chú thất bại thì sẽ thực hiện các bước sau:
1 Hệ thống thông báo cập nhật tiến độ thất bại
2 Use case quay lại bước 1
2.3.2.18 Use Case xem danh sách giảng viên
Bảng 18: Đặc tả Use case xem danh sách giảng viên
UC30 Xem danh sách giảng viên
Brief description Tác nhân thực hiện việc xem danh sách giảng viên có trên hệ thống
Pre-conditions Tác nhân có tài khoản với quyền Admin và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống hiển thị danh sách giảng viên
Use Case diễn ra khi tác nhân chọn quản lý giảng viên ở menu:
1 Tác nhân chọn menu quản lý giảng viên
2 Hệ thống lấy danh sách giảng viên có trên hệ thống
3 Hệ thống hiển thị danh sách giảng viên
Hình 64: Sequence Diagram chức năng xem danh sách giảng viên
2.3.2.19 UseCase thêm khoá học vào danh sách yêu thích
Bảng 19: Đặc tả Use Case năng thêm khoá học vào danh sách yêu thích
UC33 Thêm khóa học vào danh sách yêu thích
Brief description Tác nhân thực hiện việc thêm khóa học vào danh sách yêu thích
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống hiển thị thông báo thêm thành công
Hình 65:Sequence Diagram chức năng thêm khoá học vào danh sách yêu thích
Use Case diễn ra khi tác nhân nhấn vào nút hình “Trái tim” trong trang danh sách khóa học
1 Tác nhân nhấn nút hình “Trái tim” trong trang danh sách khóa học
2 Hệ thống lưu lại dữ liệu và hiển thị thông báo thêm thành công
Business Rule Khóa học này chưa thuộc danh sách yêu thích trước đó
2.3.2.20 Use Case xem danh sách yêu cầu phê duyệt thành giảng viên
Bảng 20: Đặc tả Use Case xem danh sách yêu cầu phê duyệt thành giảng viên
UC36 Xem danh sách yêu cầu phê duyệt thành giảng viên
Brief description Tác nhân thực hiện việc xem danh sách yêu cầu phê duyệt thành giảng viên
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống hiển thị danh sách yêu cầu
Hình 66:Sequence Diagram chức năng xem danh sách yêu câu phê duyệt trở thành giảng viên
Use Case diễn ra khi tác nhân nhấn “Danh sách yêu cầu trở thành giảng viên” trong sidebar của web
1 Tác nhân nhấn nút “Danh sách yêu cầu trở thành giảng viên” trong sidebar của web
2 Hệ thống lấy dữ liệu và hiển thị danh sách yêu cầu trở thành giảng viên
2.3.2.21 Use Case đăng ký account reviewer
Bảng 21: Đặc tả Use Case đăng ký reviewer
UC37 Đăng ký account reviewer
Brief description Tác nhân thực hiện việc đăng ký tài khoản reviewer
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống lưu lại dữ liệu và thông báo thêm thành công
Basic flow Use Case diễn ra khi tác nhân nhấn “Thêm mới” trong trang danh sách người kiểm duyệt
Hình 67: Sequence Diagram đăng ký account reviewer
1 Tác nhân nhấn nút “Thêm mới” trong trang danh sách người kiểm duyệt
2 Hệ thống chuyển sang trang thêm mới người kiểm duyệt
3 Tác nhân điền thông tin yêu cầu
4 Tác nhân nhấn nút “Lưu” (1)
5 Hệ thống xác thực dữ liệu
6 Hệ thống thông báo thêm thành công và lưu lại dữ liệu
Alternative flow Hệ thống xác thực thông tin không chính xác và Use
Extension point 4.(1) Tác nhân nhấn nút “Hủy” Use Case kết thúc
Business Rule Username, password, Họ tên, ngày sinh, giới tính, sdt, email là những trường bắt buộc nhập
2.3.2.22 Use Case nhận task kiểm duyệt yêu cầu tạo khoá học cho reviewer
Bảng 22: Đặc tả Use Case nhận task kiểm duyệt UC40 Nhận task kiểm duyệt yêu cầu tạo khóa học
Brief description Tác nhân thực hiện việc nhận nhiệm vụ kiểm duyệt yêu cầu tạo khóa học
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống lưu lại dữ liêu và hiển thị thông báo nhận thành công
Hình 68: Sequence Diagram chức năng nhận task kiểm duyệt
Use Case diễn ra khi tác nhân nhấn “Nhận nhiệm vụ” trong trang chi tiết yêu cầu phê duyệt khóa học
1 Tác nhân nhấn nút “Nhận nhiệm vụ” trong trang chi tiết yêu cầu phê duyệt khóa học
2 Hệ thống lưu dữ liệu và thông báo nhận thành công
Business Rule Khóa học phải thuộc chuyên môn của người duyệt
2.3.2.23 Use Case gửi kết quả phê duyệt khoá học
Bảng 23: Đặc tả Use Case gửi kêt quả yêu cầu duyệt khoá học
UC41 Duyệt yêu cầu tạo khóa học
Brief description Tác nhân thực hiện việc duyệt yêu cầu tạo khóa học
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống lưu lại dữ liêu và hiển thị thông báo duyệt thành công
Hình 69: Sequence Diagram chức năng duyệt yêu cầu tạo mới khoá học
Use Case diễn ra khi tác nhân nhấn “Duyệt” trong trang chi tiết yêu cầu phê duyệt khóa học
1 Tác nhân nhấn nút “Duyệt” trong trang chi tiết yêu cầu phê duyệt khóa học
2 Hệ thống hiển thị thông báo xác nhận duyệt khóa học
4 Hệ thống lưu dữ liệu và hiển thị thông báo duyệt thành công
Extension point 3.(1) Tác nhân nhấn “Hủy” Use Case kết thúc
Business Rule Khóa học phải thuộc chuyên môn của người duyệt
2.3.2.24 Use Case cập nhật nhật bài giảng
Bảng 24: Đặc tả Use Case cập nhật bài giảng
UC42 Cập nhật bài giảng
Brief description Tác nhân thực hiện việc cập nhật bài giảng trong khóa học
Pre-conditions Tác nhân có tài khoản và đã đăng nhập vào hệ thống thành công
Post-conditions Hệ thống lưu lại dữ liêu và hiển thị thông báo cập nhật thành công
Use Case diễn ra khi tác nhân nhấn “Sửa” trong trang quản lý khóa học
1 Tác nhân nhấn nút “sửa” trong trang quản lý khóa học
Hình 70: Sequence Diagram chức năng cập nhật bài giảng
2 Hệ thống chuyển sang trang chi tiết khóa học
3 Tác nhân chỉnh sửa thông tin bài học
5 Hệ thống xác thực dữ liệu
6 Hệ thống hiển thị thông báo cập nhật thành công
Alternative flow Hệ thống xác thực dữ liệu không hợp lệ và Use Case quay lại bước 3
Extension point 4.(1) Tác nhân nhấn “Hủy” Use Case kết thúc
THIẾT KẾ HỆ THỐNG
LƯỢC ĐỒ LỚP
THIẾT KẾ CƠ SỞ DỮ LIỆU
3.2.2 Mô tả chi tiết bảng dữ liệu
Bảng 25: Mô tả chi tiết bảng Account
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 user_name VARCHAR(255) Tên đăng nhập của người dùng
2 password VARCHAR(10) Mật khẩu đăng nhập của người dùng
Mật khẩu phải được mã hóa
3 role_id VARCHAR(255) Mã định danh của role Khóa ngoại tham chiếu đến bảng role
Bảng 26: Mô tả chi tiết bảng UserDetail
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
Tên đăng nhập của người dùng
Khóa ngoại tham chiếu đến bảng Account
2 avatar VARCHAR(255) Link ảnh đại diện của người dùng
3 birthday DATE Ngày tháng năm sinh của người dùng
4 Email VARCHAR(50) Email của người dùng Email phải là duy nhất
5 fullname VARCHAR(50) Họ và tên người dùng đăng ký
6 phone VARCHAR(10) Số điện thoại của người dùng
7 gender VARCHAR(10) Giới tính của người dùng
Bảng 27: Mô tả chi tiết bảng Cart
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 user_name VARCHAR(255) Tên đăng nhập của người dùng
Khóa chính, khóa ngoại tham chiếu đến bảng Account
Tổng giá tiền sản phẩm trong giỏ hàng tính theo đơn giá sản phẩm
Tổng giá tiền cần trả khi trừ đi các khuyến mãi
Bảng 28: Mô tả chi tiết bảng Cart Detail
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của Cart
Khóa chính, khóa ngoại tham chiếu đến bảng Account
2 course_id VARCHAR(10) Mã định danh của khóa học
Khóa ngoại tham chiếu đến trường
Tổng giá tiền cần trả khi trừ đi các khuyến mãi
Khóa ngoại tham chiếu đến trường user_name của bảng Account
Bảng 29: Mô tả bảng Category
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id VARCHAR(10) Mã định danh của
2 name VARCHAR(50) Tên của chủ đề khóa học
3 is_active BIT(1) Trạng thái của category có còn kinh doanh hay không
Bảng 30: Mô tả chi tiết bảng Chapters
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 Id INT Mã định danh của chapter
2 chapter_name VARCHAR(255) Tên của chapter
3 course_id VARCHAR(225) Mã định danh khóa học
Khóa ngoại tham chiếu đến trường id của bảng courses
4 offset INT Vị trí của chapter, dùng để sắp xếp các chapter theo thứ tự giá trị offset giảm dần
5 blocked INT Thể hiện trạng thái của chapter có bị khoá hay không
6 num_videos INT Số lượng video trong chapter
Bảng 31: Mô tả chi tiết bảng Coupon
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 code VARCHAR(255) Mã định danh của coupon
2 name VARCHAR(50) Tên hiển thị của coupon
Loại coupon thanh toán, giảm giá theo
% hoặc giảm giá trực tiếp
4 expired_date DATE Ngày hết hạn của coupon
5 start_date DATE Ngay coupon có hiệu lực
6 create_date DATE Ngày tạo coupon
7 update_date DATE Ngày lần cuối cập nhật coupon
Người tạo coupon Khóa ngoại tham chiếu đến trường user_name trong bảng Account
9 description VARCHAR(255) Mô tả chi tiết coupon
10 value DOUBLE Giá trị của coupon
11 num INT Số lượng coupon được khởi tạo
12 number_of_remain INT Số lượt sử dụng còn lại của coupon
13 is_active TINYINT(1) Trạng thái của coupon
Bảng 32: Mô tả chi tiết bảng courses
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id VARCHAR(255) Mã định danh của khóa học
2 category_id VARCHAR(10) Mã định danh loại khóa học
Khóa ngoại tham chiếu đến trường id của bảng category
3 language VARCHAR(50) Loại ngôn ngữ của khóa học giảng dạy
4 name VARCHAR(255) Tên mô tả khóa học
5 description TEXT Mô tả chi tiết khóa học
6 user_created VARCHAR(255) Người tạo khóa học Khóa ngoại tham chiếu đến trường user_name trong bảng Account
7 price DOUBLE Giá trị của khoá học
8 is_public TINYINT(1) Trường xác định xem khóa học có miễn phí hay không
9 create_date DATE Ngày tạo khóa học
10 update_date DATE Lần cuối cập nhật khóa học
11 num_students INT Số lượng học sinh trong khóa học
12 is_active TINYINT(1) Trang thái khóa học còn kinh doanh hay không
13 avatar VARCHAR(255) Link ảnh mô tả khóa học
Bảng 33: Mô tả chi tiết bảng courses_paid
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của courses_paid
2 buy_date DATE Ngày mua khóa học
Mã định danh khóa học Khóa ngoại tham chiếu đến trường id của bảng courses
Tên đăng nhập của người dùng
Khóa ngoại tham chiếu đến trường user_name của bảng Account
Bảng 34: Mô tả chi tiết bảng Note
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của note Khóa chính
2 at_time VARCHAR(255) Thời điểm tạo ghi chú trên video
3 content VARCHAR(255) Nội dung ghi chú
Tên đăng nhập của người dùng
Khóa ngoại tham chiếu đến trường user_name của bảng Account
Mã định danh của video Khóa ngoại tham chiếu đến trường id của bảng coursesvideo
Bảng 35: Mô tả chi tiết bảng Orders
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id VARCHAR(255) Mã định danh của order Khóa chính
2 username VARCHAR(255) Tên đăng nhập của người dùng
Khóa ngoại tham chiếu đến trường user_name của bảng Account
3 payment_id VARCHAR(10) Mã định danh của payment
Khóa ngoại tham chiếu đến trường id của bảng Payments
4 total_price DOUBLE Tổng giá tiền tính theo giá sản phẩm
5 payment_price DOUBLE Tổng giá tiền cần trả sau khi trừ đi giảm giá
6 qty INT Số lượng khóa học trong giỏ hàng
7 create_date DATE Ngày tạo đơn hàng
8 is_active TINYINT(1) Trạng thái đơn hàng
9 coupon_code VARCHAR(255) Mã định danh coupon Khóa ngoại tham chiếu đến trường code của bảng coupons
Bảng 36: Mô tả chi tiết bảng Order Detail
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id VARCHAR(10) Mã định danh của order detail
2 order_id VARCHAR(255) Mã định danh của order Khóa ngoại tham chiếu đến trường id của bảng Orders
3 course_id VARCHAR(10) Mã định danh của courses
Khóa ngoại tham chiếu đến trường id của bảng courses
4 price Double Giá của khóa học tại thời điểm mua
5 user_name VARCHAR(255) Tên đăng nhập của người dùng
Khóa ngoại tham chiếu đến trường user_name của bảng Account
Bảng 37: Mô tả chi tết bảng Payment
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id VARCHAR(10) Mã định danh của payment
2 name VARCHAR(100) Tên mô tả hình thức payment
3 is_active BIT(1) Trạng thái payment
Bảng 38: Mô tả chi tiết bảng Register_Teacher_Form
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của form Khóa chính
2 address VARCHAR(255) Địa chỉ của người yêu cầu trở thành giảng viên
3 current_job VARCHAR(255) Nghề nghiệp hiện tại của người dùng
4 email VARCHAR(255) Email của người dùng
5 exp_describe VARCHAR(255) Kinh nghiệm giảng dạy của người dùng
6 phone VARCHAR(255) Số điện thoại để liên hệ của người dùng
7 submit_time VARCHAR(255) Thời gian submit form
8 teaching_topic VARCHAR(255) Chủ đề giảng dạy
9 username VARCHAR(255) Tên đăng nhập của người dùng
Khóa ngoại tham chiếu đến trường user_name của bảng Account
10 status VARCHAR(255) Trạng thái của yêu cầu
Bảng 39: Mô tả chi tiết bảng reviews
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của review
Mã định danh của khóa học
Khóa ngoại tham chiếu đến trường id của bảng courses
3 content TEXT Nội dung đánh giá
4 rate double Số sao đánh giá
5 create_date DATE Ngày tạo đánh giá
6 update_date DATE Ngày cập nhật đánh giá
Tên đăng nhập của người dùng
Khóa ngoại tham chiếu đến trường user_name của bảng Account
Bảng 40: Mô tả chi tiết bảng role
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id VARCHAR(10) Mã định danh của role Khóa chính
2 name VARCHAR(50) Tên hiển thị của role
Bảng 41: Mô tả chi tiết bảng Announcement
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của announcement
2 content TEXT Nội dung thông báo của giảng viên
3 create_date DATETIME Ngày tạo thông báo
4 owner VARCHAR(255) username của người giảng
5 update_date DATETIME Ngày cập nhật nội dung thông báo
Mã định danh của khóa học Khóa ngoại tham chiếu đến trường id của bảng courses
Bảng 42: Mô tả chi tiết bảng course_summary_info_register
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id VARCHAR(255) Mã định danh của khóa học
Mã định danh loại khóa học
Khóa ngoại tham chiếu đến trường id của bảng category
3 language VARCHAR(50) Loại ngôn ngữ của khóa học giảng dạy
4 name VARCHAR(255) Tên mô tả khóa học
5 description TEXT Mô tả chi tiết khóa học
6 price DOUBLE Giá bán của khoá học
Trường xác định xem khóa học có miễn phí hay không
Mã định danh của register_session
Khoá ngoại tham chiếu đến trường id của bảng register_session
9 active_when_aprrov ed BIT(1)
Trường xác định xem khoá học có được bán ngay sau khi được phê duyệt hay không
10 avatar VARCHAR(255) Link ảnh mô tả khóa học
Bảng 43: Mô tả chi tiết bảng discuss
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của discuss
Mã định danh của chapter
Khóa ngoại tham chiếu đến trường id của bảng chapter
3 content TEXT Nội dung thảo luận do user nhập vào
4 course_id VARCHAR(255) Mã định danh khoá học
5 created_date DATETIME Ngày tạo khoá học
Mã định danh của lecture
Khóa ngoại tham chiếu đến trường id của bảng lecture
7 num_likes INT Số lượt yêu thích của bài thảo luận
Số lượt không yêu thích của bài thảo luận
Khoá ngoại tham chiếu đến chính id của discuss để xác định xem đây có phải là một câu trả lời của 1 discuss khác
10 updated_date DATETIME Ngày cập nhật discuss
11 title VARCHAR(255) Tiêu đề của discuss
12 username VARCHAR(255) Người tạo discuss Khóa ngoại tham chiếu đến trường
Bảng 44: Mô tả chi tiết bảng learning_process
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của learning_process
2 create_date DATETIME Ngày tạo process
3 update_date DATETIME Ngày cập nhật tiến trình học
4 current_chapter INT Thể hiện người dùng đang học đến chapter nào trong khoá học
Khóa ngoại tham chiếu đến trường id của bảng chapters
5 current_lecture_id INT Thể hiện người dùng đang học đến bài nào trong khoá học
Khóa ngoại tham chiếu đến trường id của bảng lecture
6 current_time_video INT thời gian video mà người học đang học đến
7 last_date_learning DATETIME Ngày học gần đây nhất của người dùng
INT Tổng số bài học đã hoàn thành
9 username VARCHAR(255) Tên người dùng Khóa ngoại tham chiếu đến trường username của bảng account
10 course_id VARCHAR(255) Mã định danh của khoá học
Khóa ngoại tham chiếu đến trường id của bảng courses
11 learned_lectures VARCHAR(255) Các bài học mà người dùng đã học qua
101 total_lectures INT Tổng số bài học trong khoá học
12 percent_completed DOUBLE Phần trăm hoàn thành khoá học
Bảng 45: Mô tả chi tiết bảng lectures
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của lectures
2 blocked BIT(1) Thể hiện bài học có bị khoá hay không
Nội dung bài học do giảng viên nhập, là 1 đoạn text đối với lecture_typ PRESENTATION
4 create_date DATETIME Ngày tạo bài học
Mô tả video bài học hoặc slide bài giảng có ý nghĩa gì
6 lecture_type VARCHAR(255) phân loại bài học thuộc QUIZ,
7 link VARCHAR(255) đường link chứa video hoặc file bài giảng
Tổng số câu hỏi cần trả lời đúng nếu bài học thuộc dạng QUIZ
9 offset INT Thể hiện thứ tự của bài học
10 summary VARCHAR(255) Mô tả tóm tắt nội dung bài QUIZ
11 title VARCHAR(255) Tiêu đề của bài học type VARCHAR(255) thể hiện cho lecture type ở dạng PRESENTATION là một đoạn TEXT hay file được upload
12 update_date DATETIME ngày cập nhật bài học
13 chapter_id INT mã định danh chapter, thể hiện bài học này ở chapter nào
Khoá ngoại tham chiếu đến trường id của bảng chapters
14 owner VARCHAR(255) người sở hữu bài học Khoá ngoại tham chiếu đến trường username của bảng account
15 transcript_url VARCHAR(255) đường link dẫn đến file vtt chứa phụ đề của video
Bảng 46: Mô tả chi tiết bảng quiz_answer
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của quiz_answer
2 create_date DATETIME ngày tạo record
3 update_date DATETIME thời gian update
4 content TEXT Nội dung câu trả lời dành cho câu hỏi
5 is_correct BIT(1) Đánh dấu rằng câu trả lời này đúng hay sai
6 question_id INT Mã định danh câu hỏi
Khoá ngoại tham chiếu đến trường id của quảng quiz question
7 why_correct TEXT Mô tả chi tiết cho người dùng biết rằng tại sao câu trả lời này đúng
Bảng 47: Mô tả chi tiết bảng quiz_question
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của quiz_answer
2 create_date DATETIME ngày tạo record
3 update_date DATETIME thời gian update
4 content TEXT Nội dung câu hỏi
5 question_type VARCHAR(255) thể loại câu hỏi, có thể là chọn một hoặc chọn nhiều đáp án
Mã định danh câu bài học
Khoá ngoại tham chiếu đến trường id của bảng lectures
Bảng 48: Mô tả chi tiết bảng register_chapter
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của register_chapter
2 chapter_name VARCHAR(255) Tiêu đề của chapter
Thứ tự của chapter trong register_course_sess ion
Mã định danh của register_course_sess ion
Tham chiếu đến trường id của bảng register_course_s ession
Bảng 49: Mô tả chi tiết bảng register_course_session
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
Mã định danh của register_course_sess ion
2 create_date DATETIME Ngày tạo
4 update_date DATETIME Ngày cập nhật
5 active_when_aprrov ed BIT(1)
Thể hiện rằng người giảng viên có muốn cho người dùng mua khoá học ngay khi người kiểm duyệt chấp nhận bài học
Bước đăng kí thông tin khoá học mà giảng viên đang thực hiện
7 status VARCHAR(255) Trạng thái request
8 submitted_time DATETIME Ngày gửi yêu cầu cho người duyệt
9 register_user VARCHAR(255) account người giảng viên đăng kí
Khoá ngoại tham chiếu đến trường username của bảng account
Lý do người kiểm duyệt không phê duyệt yêu cầu tạo khoá học, chỉ có khi status được cập nhật là NEED_EDIT hoặc REJECTED
11 reviewer VARCHAR(255) người duyệt yêu cầu Khoá ngoại tham chiếu đến trường username của bảng account
12 update_status_time DATETIME thời gian cập nhật trang thái của yêu cầu
Bảng 50: Mô tả chi tiết bảng register_lectures
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của lectures
2 blocked BIT(1) Thể hiện bài học có bị khoá hay không
Nội dung bài học do giảng viên nhập, là 1 đoạn text đối với lecture_typ PRESENTATION
4 create_date DATETIME Ngày tạo bài học
Mô tả video bài học hoặc slide bài giảng có ý nghĩa gì
6 lecture_type VARCHAR(255) phân loại bài học thuộc QUIZ,
7 link VARCHAR(255) đường link chứa video hoặc file bài giảng
Tổng số câu hỏi cần trả lời đúng nếu bài học thuộc dạng QUIZ
9 offset INT Thể hiện thứ tự của bài học
10 summary VARCHAR(255) Mô tả tóm tắt nội dung bài QUIZ
11 title VARCHAR(255) Tiêu đề của bài học
12 type VARCHAR(255) thể hiện cho lecture type ở dạng PRESENTATION là một đoạn TEXT hay file được upload
13 update_date DATETIME ngày cập nhật bài học
14 chapter_id INT mã định danh chapter, thể hiện bài học này ở chapter nào
Khoá ngoại tham chiếu đến trường id của bảng chapters
15 owner VARCHAR(255) người sở hữu bài học Khoá ngoại tham chiếu đến trường username của bảng account
Bảng 51: Mô tả chi tiết bảng reviewer_role
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của review_role
2 category_id VARCHAR(255) Loại content mà người phê duyệt được duyệt
Khoá ngoại tham chiếu đến trường idcủa bảng category
4 username VARCHAR(255) account của người kiểm duyệt
Khoá ngoại tham chiếu đến trường username của bảng account
Bảng 52: Mô tả chi tiết bảng teacher_profile
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của teacher_profile
Mô tả bản thân, tụ giới thiệu của teacher
4 caption VARCHAR(255) title teacher muốn thêm vào, có thể có hoặc không
5 facebook_link VARCHAR(255) đường link trang cá nhân facebook
6 linkedin_link VARCHAR(255) đường link trang cá nhân trên linkedin
7 youtube_link VARCHAR(255) đường link dẫn đến channel trên youtube
Tên định danh của người dùng
Khoá ngoại tham chiếu đến trường username của bảng account
Bảng 53: Mô tả chi tiết bảng wish_list
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id INT Mã định danh của teacher_profile Khóa chính
2 create_date DATETIME ngày tạo record
3 update_date DATETIME ngày cập nhật
4 username VARCHAR(255) account người dùng
Khoá ngoại tham chiếu đến trường username của bảng account
5 course_id VARCHAR(255) mã định danh khoá học
Khoá ngoại tham chiếu đến trường id của bảng courses
THIẾT KẾ GIAO DIỆN
3.3.1 Giao diện cho Admin và Teacher
3.3.1.1 Giao diện trang đăng nhập
Hình 73: Giao diện trang đăng nhập Bảng 54: Mô tả trang đăng nhập
1 Thẻ Tiêu đề trang đăng nhập
2 Thẻ Ô nhập tên đăng nhập
3 Thẻ Ô nhập mật khẩu
4 Thẻ Đường dẫn đến trang quên mật khẩu
5 Thẻ Ảnh chủ đề trang đăng nhập
6 Thẻ Nút đăng nhập
3.3.1.2 Giao diện trang quản lý khóa học
Hình 74: Giao diện trang quản lý khoá học Bảng 55: Mô tả trang quản lý khoá học
1 Thẻ
Tiêu đề danh mục của trang quản lí
Nội dung bảng dữ liệu
3 Thẻ Đường dẫn đến trang thêm mới danh mục
4 Thẻ , Thanh navigate của bảng để dẫn đến page dữ liệu tiếp theo
5 Thẻ Chứa các thao tác với dòng dữ liệu
3.3.1.4 Giao diện trang chỉnh sửa khóa học
Hình 75: Giao diện trang chỉnh sửa thông tin tổng quan khoá học
Hình 76: Giao diện trang chỉnh sửa nội dung bài học Bảng 56: Mô tả giao diện trang chỉnh sửa khoá học
1 Gồm các thẻ,,
Nút chuyển giữa các tab dữ liệu
3 Thẻ Nút để lưu dữ liệu, hủy nhập
Chapter trong khóa học ( Tên chapter, nội dung trong chapter)
Lecture trong chapter tương ứng (Loại bài học, tên bài học, video, tài liệu, quiz, )
6 Thẻ Nút thêm mới bài học trong chapter tương ứng
3.3.1.5 Giao diện Thêm mới và sửa chapter
Bảng 57: Mô tả trang thêm mới chapter
2 Gồm thẻ , Nút đóng form
3 Thẻ button Nút để lưu dữ liệu
Hình 77: Giao diện trạng thêm mới chapter
4.1.1.1 Giao diện thêm mới và sửa bài học
Bảng 58: Mô tả trang chỉnh sửa bài học
2 Gồm thẻ , Nút đóng form
Form nhập dữ liệu bài học
4 Thẻ Nút lưu dữ liệu
Hình 78: Giao diện trang chỉnh sửa bài học
4.1.1.2 Giao diện quản lý yêu cầu phê duyệt khóa học
Hình 79: Giao diện trang quản lý yêu cầu phê duyệt khoá học Bảng 59: Mô tả giao diện trang quản lý yêu cầu phê duyệt khoá học
2 Gồm thẻ , Nút chuyển tới trang thêm mới
Hình 80: Giao diện trang đăng kí thông tin khoá học mới
4.1.1.3 Giao diện trang quản lý loại khóa học
Hình 81: Giao diện trang quản lý khóa học Bảng 60: Mô tả chi tiết trang quản lý khóa học
Bảng dữ liệu đơn hàng
2 Thẻ Nút chuyển sang trang thêm mới
4.1.1.4 Giao diện trang phê duyệt yêu cầu trở thành giảng viên
Hình 82: Giao diện trang phê duyệt yêu cầu trở thành giảng viên Bảng 61: Mô tả chi tiết trang phê duyệt yêu cầu trở thành giảng viên
Nút chuyển giữa các tab dữ liệu
4.1.1.5 Giao diện trang thêm mới người kiểm duyệt
Hình 83: Giao diện trang thêm mới người kiểm duyệt Bảng 62: Mô tả chi tiết trang thêm mới người kiểm duyệt
2 Thẻ Nút lưu dữ liệu và nút hủy
4.1.2 Giao diện cho người dùng
4.1.2.1 Giao diện trang đăng ký tài khoản
Hình 84: Giao diện trang đăng ký tài khoản Bảng 63: Mô tả chi tiết trang đăng ký tài khoản
1 Thẻ Combobox chọn giới tính
2 Thẻ Ô nhập ngày tháng năm sinh
3 Thẻ Đường dẫn đến trang đăng nhập
4 Thẻ Nút đăng kí
4.1.2.2 Giao diện trang danh sách khóa học
Hình 85: Giao diện trang danh sách khóa học Bảng 64: Mô tả chi tiết trang danh sách khóa học
Bộ lọc khóa học
, Thông tin chi tiết khóa học 3 Thẻ Nút load thêm khóa học khác 4.1.2.3 Giao diện trang chi tiết khóa học Hình 86: Giao diện trang chi tiết khóa học Hình 87: Giao diện trang chi tiết khóa học Bảng 65: Mô tả chi tiết trang chi tiết khóa học Thông tin chi tiết khóa học 2 Thẻ Ảnh đại diện trang chi tiết khóa học 3 Thẻ Nút thêm vào giỏ hàng Form đánh giá khóa học Hình 88: Giao diện trang phòng học Bảng 66: Mô tả chi tiết trang phòng học 1 Thẻ Nút trở về trang chủ 2 Thẻ Tiến độ học tập 3 Thẻ Video đang phát hiện tại Thông tin video khóa học 5 Thẻ Nút chuyển đến video tiếp theo Danh sách chapter và video của khóa học Nút chuyển giữa các tab chức năng trong phòng học 4.1.2.5 Giao diện chức năng note trong khóa học Hình 89: Giao diện chức năng note trong khóa học Bảng 67: Mô tả chi tiết chức năng note trong khóa học 2 Thẻ Nút thêm ghi chú 4.1.2.6 Giao diện chức năng hỏi đáp trong khóa học Hình 90: Giao diện chức năng hỏi đáp trong khóa học Bảng 68: Mô tả chi tiết chức năng hỏi đáp , Form nhập dữ liệu 2 Thẻ Nút thêm câu hỏi , , Danh sách các câu hỏi , Bộ lọc câu hỏi 4.1.2.7 Giao diện chức năng thêm lịch học Hình 91: Giao diện chức năng thêm lịch học Bảng 69: Mô tả chi tiết chức năng tạo lịch học 1 Thẻ Nút thêm lịch học Label các bước tạo lịch học 4 Thẻ Hoạt ảnh tạo lịch học 5 Thẻ Nút chuyển sang bước tiếp hoặc lùi về bước trước 7 Gồm cá các thẻ , Nút đăng nhập với Google 4.1.2.10 Giao diện chức năng thông báo của giảng viên Hình 92: Giao diện chức năng hiển thị thông báo của giảng viên Bảng 70: Mô tả chi tiết chức năng hiển thị thông báo của giảng viên Dữ liệu danh sách những thông báo của giảng viên 4.1.2.11 Giao diện chức năng hỏi đáp với AI Hình 93: Giao diện chức năng hỏi đáp với AI Bảng 71: Mô tả chi tiết chức năng hỏi đáp với AI Dữ liệu câu hỏi của người dùng Dữ liệu câu trả lời của AI 4 Thẻ Nút thêm câu hỏi 4.1.2.12 Giao diện trang lịch sử mua hàng Hình 94: Giao diện trang lịch sử mua hàng Hình 95: Giao diện trang lịch sử mua hàng Bảng 72: Mô tả chi tiết trang lịch sử mua hàng 1 Gồm các thẻ , Tiêu đề danh mục
2 Gồm thẻ ,, Thông tin của đơn hàng 3 Thẻ Nút mở form chi tiết đơn hàng 5 Gồm thẻ ,, Thông tin chi tiết đơn hàng Thông tin chi tiết khóa học trong đơn hàng 7 Thẻ Nút đóng form chi tiết 4.1.2.13 Giao diện trang chi tiết giảng viên Hình 96: Giao diện trang chi tiết giảng viên Bảng 73: Mô tả chi tiết trang chi tiết giảng viên Thông tin chi tiết của giảng viên 2 Gồm thẻ , Liên kết đến các website của giảng viên 3 Gồm các thẻ , , Dữ liệu thông tin khóa học của giảng viên 4.1.2.14 Giao diện trang giỏ hàng Hình 97: Giao diện trang giỏ hàng Bảng 74: Mô tả chi tiết trang giỏ hàng 1 Thẻ Thông tin của khóa học trong giỏ hàng 3 Thẻ Nút chọn sản phẩm thanh toán 4 Thẻ Nút xóa sản phẩm khỏi giỏ hàng Form nhập dữ liệu coupon 6 Thẻ Nút sử dụng coupon STT Thời gian thực hiện Công việc Ghi chú Thiết kế usecase và mô hình hóa yêu cầu Thiết kế cơ sở dữ liệu Tìm hiểu thư viện ReactJS, Material UI Tìm hiểu framework Spring Boot Tìm hiểu Spring Security, JWT Tiến hành tổ chức cấu trúc project Xây dựng các tables của cơ sở dử liệu Tạo các Entities trong Spring Boot và mapping với cơ sở dữ liệu Xây dựng API cho các chức năng cơ bản dành cho người dùng có phân quyền là User Xây dựng Giao diện người dùng cho hệ thống Tp Hồ Chí Minh, ngày tháng năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương (Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên) Kết hợp các phần đã xây dựng (giao diện, APIs, database) Xây dựng giao diện cho trang Admin Tiến hàng tạo các APIs cho Admin Xây dựng chức năng nâng cao là các tool học tập cho người dùng Tiến hàng code tính năng cho phép có thêm bài Test, file bài giảng cho các khoá học Xây dựng tính năng quản lý khoá học cho giảng viên Xây dựng tính năng phê duyệt khoá học, đăng ký khoá học mới Kiểm thử chương trình Tìm hiểu quá trình deploy sản phẩm Viết script CI/CD Tìm hiểu AWS CloudFront Tiến hành deploy sản phẩm 9 16/06/2023 – 21/06/2023 Kiểm thử chương trình và tiến hành sửa lỗi 10 22/06/2023 – 07/07/2023 Viết và hoàn thiện báo cáo 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1 5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 2 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3 1.1.2 Kiến trúc và cách hoạt động của Spring Boot 3 1.1.3 Ưu điểm của Spring Boot 4 1.1.4 Nhược điểm của Spring Boot 5 1.1.5 Ứng dụng vào đề tài 5 1.2.2 Cơ chế hoạt động của Spring Security 10 1.2.3 Ưu điểm của Spring Security 10 1.2.4 Ứng dụng Spring Security vào đề tài 11 1.3.2 Cách hoạt động của MYSQL 13 1.3.5 Ứng dụng MySQL vào đề tài 14 1.4.2 Cách hoạt động của RESTFUL API 15 1.4.3 Ứng dụng REST API vào đề tài 16 1.5.2 Các thành phần của JWT 17 1.6.2 Cách tổ chức dữ liệu của AWS S3 19 1.6.3 Ứng dụng AWS S3 vào đề tài 20 1.7.2 Các thành phần của React: 22 1.7.3 Ưu và nhược điểm của ReactJS 23 1.7.4 Ứng dụng ReactJS vào đề tài 24 1.8.3 Ứng dụng Redux vào đề tài 28 1.9.4 Ứng dụng Material UI vào đề tài 31 1.10.3 Ứng dụng Bootstrap vào đề tài 32 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 35 2.1.2 Yêu cầu bài toán của đề tài 37 2.2.2 Yêu cầu phi chức năng 39 2.3 MÔ HÌNH HÓA YÊU CẦU 39 CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 87 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 88 3.2.2 Mô tả chi tiết bảng dữ liệu 89 3.3.1 Giao diện cho Admin và Teacher 108 4.1.2 Giao diện cho người dùng 118 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 130 4.1.1 Cài đặt ứng dụng, thư viện cần thiết 130 4.2.4 Các trường hợp kiểm thử 134 Hình 1: Kiến trúc phân lớp của SpringBoot 3 Hình 4: Ví dụ về Controller được cấu hình trong đề tài 6 Hình 5: Cấu trúc service trong backend 6 Hình 6: Ví dụ về class Service trong backend 7 Hình 7: Cấu trúc thư mục repository 7 Hình 8: Ví dụ về Repository 8 Hình 9: Cấu hình database trong file application.properties 8 Hình 10: Các class DTO trong server 9 Hình 11: Cơ chế hoạt động của Spring Security 10 Hình 12: Cấu hình Spring Security 11 Hình 14: Xử lý trả ra token khi user login thành công 12 Hình 15: Xử lý data trả ra khi user login không thành công 12 Hình 16: Xử lý Exception trong Spring 13 Hình 17: Cấu hình kết nối tới MySQL 15 Hình 19: Class cấu hình data trả ra cho client 17 Hình 20: Ví dụ về Header của JWT 18 Hình 21: Ví dụ về Payload của JWT 18 Hình 22: Tổ chức dữ liệu trên AWS S3 19 Hình 25: AWS CloudFront được sử dụng 21 Hình 26: Script Deploy Client lên S3 21 Hình 27: Tổ chức thư mục trong Legacy 24 Hình 29: Sử dụng component TeacherCard ở Component OurTeacher 25 Hình 30: Tổ chức Route trong Legacy trong thư mục MainRoute 26 Hình 31: Ví dụ url /courses sẽ render ra trang danh sách khóa học 27 Hình 32; Ví dụ điều hướng Route trong component Header 27 Hình 33: Ví dụ khởi tạo global state cart ở file cartRedux.js trong thư mục redux 29 Hình 34: Ví dụ bỏ các global state vào store ở file store.js trong thư mục redux 29 Hình 35: Ví dụ bọc store vào cả app ở thư mục index.js 30 Hình 36; : Ví dụ sử dụng global state ở component Header 30 Hình 37: Ví dụ về componet DatePicker để tạo component 31 Hình 38: Ví dụ sử dụng bootstrap và react-bootstrap 33 Hình 39: Ví dụ responsive trên màn hình cỡ trung bình trở lên 33 Hình 40: Ví dụ responsive trên màn hình cỡ nhỏ 34 Hình 41: Giao diện website khảo sát Unica 35 Hình 42: Giao diện Website khảo sát F8 – Học lập trình để đi làm 36 Hình 43: Use Case cho Admin 39 Hình 44: Use Case cho Teacher 40 Hình 45: Use Case cho người có phân quyền là Reviewer 40 Hình 46: Use Case cho người có phân quyền là User 41 Hình 47: : Sequence Diagram cho chức năng gửi yêu cầu duyệt khoá học mới 42 Hình 48: Sequence Diagram chức năng gửi kết quả phê duyệt yêu cầu trở thành giảng viên 44 Hình 49: Sequence Diagram đánh giá khoá học đã mua 46 Hình 50: Sequence Diagram chức năng đăng nhập 47 Hình 51: Sequence Diagram chức năng đăng ký tài khoản 49 Hình 52: Sequence Diagram chức năng thanh toán 51 Hình 53: Sequence Diagram yêu cầu trở thành giảng viên 54 Hình 54: Sequence Diagram chức năng trao đổi thông tin với chatBot 56 Hình 55: Sequence Diagram tạo lịch nhắc hẹn học tập 58 Hình 56: Sequence Diagram chức năng tạo câu hỏi thảo luận 60 Hình 57: Sequence Diagram chức năng xem danh sách bài giảng 61 Hình 58: Sequence Diagram chức năng xoá thảo luận trong bài giảng 63 Hình 59: Sequence Diagram chức năng xem thông báo từ giảng viên 65 Hình 60:Sequence Diagram chức năng 66 Hình 61: Sequence Diagram thêm ghi chú cho bài giảng 68 Hình 62: Sequence Diagram chức năng thực hiện bài Test 70 Hình 63: Sequence Diagram chức năng đánh dấu bài học là hoàn thành 72 Hình 64: Sequence Diagram chức năng xem danh sách giảng viên 74 Hình 65:Sequence Diagram chức năng thêm khoá học vào danh sách yêu thích 75 Hình 66:Sequence Diagram chức năng xem danh sách yêu câu phê duyệt trở thành giảng viên 77 Hình 67: Sequence Diagram đăng ký account reviewer 79 Hình 68: Sequence Diagram chức năng nhận task kiểm duyệt 81 Hình 69: Sequence Diagram chức năng duyệt yêu cầu tạo mới khoá học 83 Hình 70: Sequence Diagram chức năng cập nhật bài giảng 85 Hình 73: Giao diện trang đăng nhập 108 Hình 74: Giao diện trang quản lý khoá học 109 Hình 75: Giao diện trang chỉnh sửa thông tin tổng quan khoá học 110 Hình 76: Giao diện trang chỉnh sửa nội dung bài học 110 Hình 77: Giao diện trạng thêm mới chapter 112 Hình 78: Giao diện trang chỉnh sửa bài học 113 Hình 79: Giao diện trang quản lý yêu cầu phê duyệt khoá học 114 Hình 81: Giao diện trang đăng kí thông tin khoá học mới 114 Hình 81: Giao diện trang quản lý khóa học 115 Hình 82: Giao diện trang phê duyệt yêu cầu trở thành giảng viên 116 Hình 83: Giao diện trang thêm mới người kiểm duyệt 117 Hình 84: Giao diện trang đăng ký tài khoản 118 Hình 85: Giao diện trang danh sách khóa học 119 Hình 86: Giao diện trang chi tiết khóa học 120 Hình 87: Giao diện trang chi tiết khóa học 120 Hình 88: Giao diện trang phòng học 121 Hình 89: Giao diện chức năng note trong khóa học 122 Hình 90: Giao diện chức năng hỏi đáp trong khóa học 123 Hình 91: Giao diện chức năng thêm lịch học 124 Hình 92: Giao diện chức năng hiển thị thông báo của giảng viên 125 Hình 93: Giao diện chức năng hỏi đáp với AI 125 Hình 94: Giao diện trang lịch sử mua hàng 126 Hình 95: Giao diện trang lịch sử mua hàng 127 Hình 96: Giao diện trang chi tiết giảng viên 128 Hình 97: Giao diện trang giỏ hàng 129 Hình 98: Cấu trúc thư mục phía Backend 131 Hình 99: File cấu hình SpringBoot 131 Hình 100: Cấu trúc thư mục Front End (User) 132 Hình 101: Cấu trúc thư mục Front End (Admin, Teacher, Reviewer) 133 Bảng 1: Đặc tả UseCase gửi yêu cầu phê duyệt khoá học mới 42 Bảng 2: Đặc tả Use Case chấp nhận yêu cầu trở thành giảng viên 44 Bảng 3: Đặc tả Use Case đánh giá khóa học đã mua 46 Bảng 4: Đặc tả Use Case đăng nhập 47 Bảng 5: Đặc tả Use Case đăng ký tài khoản 49 Bảng 6: Đặc tả Use Case thanh toán đơn hàng 51 Bảng 7: : Đặc tả Use Case yêu cầu trở thành giảng viên 54 Bảng 8: Đặc tả UseCase trao đổi thông tin với ChatBot 56 Bảng 9: Đặc tả UseCase tạo lịch nhắc hẹn học tập 58 Bảng 10: Đặc tả Use Case tạo câu hỏi thảo luận 60 Bảng 11: Đặc tả Use chức năng xem danh sách thảo luận 61 Bảng 12: Đặc tả Use Case chức năng xoá thảo luận trong bài giảng 63 Bảng 13: Đặc tả Use Case xem thông báo từ giảng viên 65 Bảng 14: Đặc tả UseCase chức năng xem danh sách ghi chú 66 Bảng 15: Đặc tả Use Case thêm ghi chú 68 Bảng 16: Đặc tả Use Case thực hiện bài Quiz 70 Bảng 17: Đặc tả Use Case chức năng đánh dấu hoàn thành bài học 73 Bảng 18: Đặc tả Use case xem danh sách giảng viên 74 Bảng 19: Đặc tả Use Case năng thêm khoá học vào danh sách yêu thích 75 Bảng 20: Đặc tả Use Case xem danh sách yêu cầu phê duyệt thành giảng viên 77 Bảng 21: Đặc tả Use Case đăng ký reviewer 79 Bảng 22: Đặc tả Use Case nhận task kiểm duyệt 81 Bảng 23: Đặc tả Use Case gửi kêt quả yêu cầu duyệt khoá học 83 Bảng 24: Đặc tả Use Case cập nhật bài giảng 85 Bảng 25: Mô tả chi tiết bảng Account 89 Bảng 26: Mô tả chi tiết bảng UserDetail 89 Bảng 27: Mô tả chi tiết bảng Cart 90 Bảng 28: Mô tả chi tiết bảng Cart Detail 90 Bảng 29: Mô tả bảng Category 91 Bảng 30: Mô tả chi tiết bảng Chapters 91 Bảng 31: Mô tả chi tiết bảng Coupon 92 Bảng 32: Mô tả chi tiết bảng courses 93 Bảng 33: Mô tả chi tiết bảng courses_paid 94 Bảng 34: Mô tả chi tiết bảng Note 94 Bảng 35: Mô tả chi tiết bảng Orders 94 Bảng 36: Mô tả chi tiết bảng Order Detail 95 Bảng 37: Mô tả chi tết bảng Payment 96 Bảng 38: Mô tả chi tiết bảng Register_Teacher_Form 96 Bảng 39: Mô tả chi tiết bảng reviews 97 Bảng 40: Mô tả chi tiết bảng role 97 Bảng 41: Mô tả chi tiết bảng Announcement 97 Bảng 42: Mô tả chi tiết bảng course_summary_info_register 98 Bảng 43: Mô tả chi tiết bảng discuss 99 Bảng 44: Mô tả chi tiết bảng learning_process 100 Bảng 45: Mô tả chi tiết bảng lectures 101 Bảng 46: Mô tả chi tiết bảng quiz_answer 102 Bảng 47: Mô tả chi tiết bảng quiz_question 103 Bảng 48: Mô tả chi tiết bảng register_chapter 103 Bảng 49: Mô tả chi tiết bảng register_course_session 104 Bảng 50: Mô tả chi tiết bảng register_lectures 105 Bảng 51: Mô tả chi tiết bảng reviewer_role 106 Bảng 52: Mô tả chi tiết bảng teacher_profile 106 Bảng 53: Mô tả chi tiết bảng wish_list 107 Bảng 54: Mô tả trang đăng nhập 108 Bảng 55: Mô tả trang quản lý khoá học 109 Bảng 56: Mô tả giao diện trang chỉnh sửa khoá học 110 Bảng 57: Mô tả trang thêm mới chapter 112 Bảng 58: Mô tả trang chỉnh sửa bài học 113 Bảng 59: Mô tả giao diện trang quản lý yêu cầu phê duyệt khoá học 114 Bảng 60: Mô tả chi tiết trang quản lý khóa học 115 Bảng 61: Mô tả chi tiết trang phê duyệt yêu cầu trở thành giảng viên 116 Bảng 62: Mô tả chi tiết trang thêm mới người kiểm duyệt 117 Bảng 63: Mô tả chi tiết trang đăng ký tài khoản 118 Bảng 64: Mô tả chi tiết trang danh sách khóa học 119 Bảng 65: Mô tả chi tiết trang chi tiết khóa học 120 Bảng 66: Mô tả chi tiết trang phòng học 121 Bảng 67: Mô tả chi tiết chức năng note trong khóa học 122 Bảng 68: Mô tả chi tiết chức năng hỏi đáp 123 Bảng 69: Mô tả chi tiết chức năng tạo lịch học 124 Bảng 70: Mô tả chi tiết chức năng hiển thị thông báo của giảng viên 125 Bảng 71: Mô tả chi tiết chức năng hỏi đáp với AI 126 Bảng 72: Mô tả chi tiết trang lịch sử mua hàng 127 Bảng 73: Mô tả chi tiết trang chi tiết giảng viên 128 Bảng 74: Mô tả chi tiết trang giỏ hàng 129 Bảng 75: Các phần mền cần cài đặt 130 Bảng 76: : Kiểm thử chức năng đăng nhập trường hợp dữ liệu đúng 134 Bảng 77: Kiểm thử chức năng đăng ký với bộ dữ liệu đúng 135 Bảng 78: Kiểm thử chức năng tìm kiếm khóa học 136 Bảng 79: Kiểm thử chức năng thanh toán 137 Bảng 80: Kiểm thử chức năng thêm sản phẩm vào giỏ hàng 138 Bảng 81: Kiểm thử chức năng đánh giá khóa học đã mua 139 Bảng 82: Kiểm thử chức năng thêm ghi chú 140 Bảng 83: Kiểm thử chức năng thêm câu hỏi 141 Bảng 84: Kiểm thử chức năng hỏi đáp với AI 142 Bảng 85: Kiểm thử chức năng đánh dấu hoàn thành bài học 143 Bảng 86: Kiểm thử chức năng gửi yêu cầu trở thành giảng viên 144 Bảng 87: Kiểm thử chức năng duyệt yêu cầu trở thành giảng viên 146 Bảng 88: Kiểm thử chức năng đăng ký tạo khóa học 147 Bảng 89: Kiểm thử chức năng phê duyệt khóa học trường hợp được phép duyệt 148 Bảng 90: Kiểm thử chức năng thêm mới bài học trường hợp bài học là video 149 Bảng 91: Kiểm thử chức năng thêm mới bài học trường hợp bài học là quiz 150 DANH MỤC CÁC TỪ VIẾT TẮT STT Từ viết tắt Ý nghĩa 4 CORS Cross-origin resource sharing 5 CSRF Cross-site Request Forgery 8 RDMS Relational Database Management System 9 CSDL Cơ sở dữ liệu 11 HAMC A hashed message authentication code 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Việc ứng dụng công nghệ thông tin vào đời sống hiện nay đã trở thành mục tiêu cấp thiết, giúp đẩy nhanh sự phát triển xã hội và khắc phục những khó khăn về khoảng cách, nhân lực và hiệu năng, đặc biệt trong bối cảnh dịch bệnh Covid Tuy nhiên, vẫn tồn tại nhiều khó khăn trong việc tích hợp công nghệ thông tin vào các lĩnh vực cụ thể và kết nối giữa người cung và người cầu Nhóm nghiên cứu đã chọn đề tài “Xây dựng website kinh doanh khóa học online” với hy vọng thúc đẩy phát triển công nghệ thông tin và tạo ra một nền tảng kết nối giữa người bán và người mua, cho phép người mua dễ dàng lựa chọn khóa học online mà không cần trung gian Người bán có thể giới thiệu ưu điểm khóa học và các ưu đãi mà không phải chi phí cho quảng cáo Mục tiêu của nhóm là tạo ra một trang web giúp người Việt Nam tiếp cận việc học online một cách dễ dàng và hiệu quả hơn. 2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu học tập mọi lúc, mọi nơi của người dùng, không bị giới hạn về thời gian cũng như địa điểm, chỉ cần thiết bị thông minh có thể truy cập được Internet là có thể học được Đồng thời, đề tài cũng nghiên cứu các công nghệ để hoàn thiện sản phẩm một cách hoàn chỉnh nhất, bao gồm: - Spring Boot kết hợp với Spring Security, Spring Data JPA để xây dựng phần server cho website - Thư viện ReactJS để thiết kế và xây dựng giao diện cho người dùng - Cơ sở dữ liệu MySQL để lưu trữ dữ liệu cho hệ thống JSON Web Token (JWT) được sử dụng như một lớp bảo mật cho hệ thống Để truy cập các API yêu cầu xác thực, ứng dụng cần cung cấp JWT trong phần header của yêu cầu. - AWS S3 Bucket để lưu trữ các video khóa học, tài liệu và hình ảnh Trong tiểu luận chuyên ngành, chúng tôi tập trung vào việc phát triển một trang web chuyên cung cấp các khóa học online, cho phép người dùng dễ dàng tìm kiếm, xem và mua khóa học Trang web cũng hỗ trợ người dùng học trực tiếp với các tính năng bổ trợ như tạo ghi chú, bình luận thảo luận dưới video, giao tiếp với chatbot sử dụng ChatGPT, thiết lập lịch nhắc học và quản lý thanh toán, cũng như kiểm tra các khóa học đã mua. Phần quản trị sẽ tập trung vào việc quản lý sản phẩm, khóa học, giáo viên, doanh thu, duyệt nội dung khóa học mới đăng ký và xử lý yêu cầu trở thành giảng viên từ người dùng. Trong quá trình hoàn thiện đề tài, nhóm thực hiện đã đặt ra những mục tiêu sau: - Xây dựng một trang kinh doanh khóa học online với những chức năng cơ bản cho người dùng và giáo viên của các khóa học - Xây dựng được giao diện thân thiện với người sử dụng, dễ sử dụng và thao tác - Áp dụng được các hình thức thanh toán như VNPAY vào hệ thống website - Áp dụng được dịch vụ AWS S3 để lưu trữ dữ liệu cho hệ thống 5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công nghệ mới và đáp ứng nhu cầu học online của người dùng Mục đích giúp tạo ra một hệ thống có thể giúp cho việc học tập thông qua Internet trở nên ngày càng thuận lời Đồng thời, cung cấp một nơi kết nối các giảng viên , cùng chia sẻ các kiến thức trên nhiều lĩnh vực PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Spring Boot is an extension of the Spring Framework that simplifies the complex configuration steps required by Spring Developed in Java, Spring Boot is designed for creating stand-alone, production-grade applications. 1.1.2 Kiến trúc và cách hoạt động của Spring Boot Spring Boot tuân theo kiến trúc phân lớp, trong đó mỗi lớp giao tiếp với lớp ngay bên dưới hoặc bên trên của nó The Presentation Layer is the topmost layer of a Spring Boot application, responsible for handling HTTP requests, performing authentication, and converting JSON to Java Objects and vice versa. Lớp Kinh Doanh: Lớp này đảm nhận việc xử lý các nghiệp vụ của dự án, thực hiện các lệnh kiểm tra nhằm đảm bảo tính chính xác của dữ liệu và logic. Persistence Layer: Nó bao gồm tất cả các xử lý về thao tác với database như lưu trữ, cập nhật, truy vấn hoặc xoá dữ liệu Lớp cơ sở dữ liệu có khả năng bao gồm nhiều cơ sở dữ liệu, cho phép thao tác với dữ liệu được đồng bộ hóa trên nhiều máy chủ cơ sở dữ liệu khác nhau. Hình 1: Kiến trúc phân lớp của SpringBoot Kiến trúc Spring Boot dựa trên Spring framework Vì vậy, nó chủ yếu sử dụng tất cả các tính năng và module của Spring MVC, Spring Core, v.v., Khi có một HTTP request đến server, Controller sẽ xử lý và gọi các Service tương ứng để xử lý business Service Layer bao gồm tất cả các xử lý liên quan đến business logic, thực hiện thao tác với dữ liệu thông qua các Repository, và ánh xạ dữ liệu từ cơ sở dữ liệu sang lớp model. 1.1.3 Ưu điểm của Spring Boot - Phát triển các ứng dụng dựa trên Spring một cách tiết kiệm thời gian và dễ dàng - Tự động cấu hình tất cả các components cho một ứng dụng Spring - Các máy chủ nhúng được tạo sẵn (Tomcat, Jetty và Undertow), dẫn đến việc triển khai ứng dụng được tăng tốc và hiệu quả hơn - Không có cấu hình XML - Nhiều lựa chọn bổ sung, hỗ trợ nhà phát triển làm việc với cơ sở dữ liệu được nhúng vào trong bộ nhớ - Dễ dàng truy cập cơ sở dữ liệu và các dịch vụ hàng đợi như MySQL, Oracle, MongoDB, Redis, ActiveMQ và các dịch vụ khác - Có nhiều plugins để phát triển bằng các công cụ như Maven hoặc Gradle 1.1.4 Nhược điểm của Spring Boot Bên cạnh những ưu điểm trên, thì Spring Boot vẫn có một số các nhược điểm như: - Spring Boot tạo ra nhiều phụ thuộc không được sử dụng dẫn đến kích thước tệp triển khai lớn - Quá trình chuyển đổi các dự án Spring cũ hoặc dự án Spring hiện có thành các ứng dụng Spring Boot nhiều khó khăn và tốn thời gian 1.1.5 Ứng dụng vào đề tài Trong đề tài của nhóm, Backend được viết hoàn toàn bằng SpringBoot theo kiến trúc Monolithic Được tổ chức theo mô hình 3 lớp (three-layer): Presentation Layer: là tầng được sử dụng để xử lý các HTTP request Bao gồm các file JAVA được đánh dấu với anotation là @RestController hoặc @Controller When a client sends a request to the server, the request first passes through the Front Controller before reaching the configured Controllers This pre-configured controller serves a specific purpose. - Phân giải request, tìm coi request gọi tới method nào của controller nào để gọi đúng tới đó - Các data của request sẽ được parse ra và mapping tương ứng vào các tham số controller method (có @RequeSstParam, @PathVariable, @Header, tương ứng) Hình 4: Ví dụ về Controller được cấu hình trong đề tài Business Layer: là tầng chứa các files được đánh dấu với anotation là @Service, được dùng để xử lý các logic hệ thống Hình 5: Cấu trúc service trong backend In this topic, the service is divided into two main packages: the Interface and its Implementation Other areas that wish to utilize functions from the service must declare the Interfaces as a property Classes that use the service and the service class itself will be interconnected through this structure. 7 giao tiếp với nhau thông qua Interface, chỉ những hàm hay method được khai báo trong interface thì các class khác mới được sử dụng Hình 6: Ví dụ về class Service trong backend Persistence Layer: bao gồm các Repository Interface được thừa kế từ JPARepository, được dùng để thao tác với database Hình 7: Cấu trúc thư mục repository JPARepository là một kho dữ liệu cung cấp nhiều phương thức thao tác với cơ sở dữ liệu mà không cần định nghĩa hàm, được kế thừa từ PagingAndSortingRepository, hỗ trợ các phương thức sắp xếp dữ liệu và thực hiện các thao tác CRUD cơ bản. Hình 8: Ví dụ về Repository JPARepository sẽ nhận 2 tham số đầu vào là Entity class và kiểu dữ liệu của ID của Entity đó To connect to the database, it is essential to configure the connection string, username, and password in the application.properties file This setup ensures a successful connection to the database. Hình 9: Cấu hình database trong file application.properties 4 Đề nghị cho bảo vệ hay không? Tp Hồ Chí Minh, ngày tháng năm 2023 (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ và tên Sinh viên 1: Nguyễn Phúc Thanh Toàn MSSV 1: 19110479 Họ và tên Sinh viên 2: Nguyễn Ngọc Trung MSSV 2: 19110490 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website kinh doanh khoá học online Họ và tên Giảng viên phản biện: ThS Mai Anh Thơ 1 Về nội dung đề tài và khối lượng thực hiện: 4 Đề nghị cho bảo vệ hay không? Tp Hồ Chí Minh, ngày tháng năm (Ký và ghi rõ họ tên) Chúng tôi xin chân thành cảm ơn Khoa Công Nghệ Thông Tin - Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện thuận lợi cho nhóm trong việc học tập, phát triển kiến thức và thực hiện đề tài này. Nhóm thực hiện xin gửi lời cảm ơn chân thành đến thầy Nguyễn Minh Đạo vì sự tận tâm và nhiệt tình chỉ bảo trong suốt quá trình học tập và thực hiện đề tài Sự hỗ trợ của thầy đã giúp nhóm vượt qua những khó khăn từ lúc bắt đầu cho đến khi hoàn thành đề tài. Nhờ vào nền tảng kiến thức chuyên ngành vững chắc và kinh nghiệm thực tế từ việc học và thực tập, nhóm đã nhận được khối lượng kiến thức và kinh nghiệm quý giá từ các thầy cô Khoa Công Nghệ Thông Tin, đặc biệt là thầy Nguyễn Minh Đạo Điều này không chỉ giúp nhóm hoàn thành đề tài mà còn là hành trang quan trọng trước khi bước vào cuộc sống mới. Mặc dù nhóm thực hiện đã nỗ lực hết mình để hoàn thành công việc, nhưng do lượng kiến thức vô tận và khả năng hạn chế, việc xảy ra thiếu sót là điều không thể tránh khỏi Chúng tôi rất mong nhận được những ý kiến đóng góp quý báu từ các thầy (cô) để có thể rút ra bài học kinh nghiệm, từ đó hoàn thiện và nâng cấp sản phẩm một cách tốt nhất. Nhóm thực hiện xin chân thành cảm ơn! Nhóm thực hiện Nguyễn Phúc Thanh Toàn – 19110479 Nguyễn Ngọc Trung – 19110490 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ và tên Sinh viên 1: Nguyễn Phúc Thanh Toàn MSSV 1: 19110479 Họ và tên Sinh viên 2: Nguyễn Ngọc Trung MSSV 2: 19110490 Thời gian làm luận văn: 14/03/2023 – 10/07/2023 Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng website kinh doanh khóa học online Giáo viên hướng dẫn: ThS Nguyễn Minh Đạo Nhiệm vụ của luận văn: Tìm hiểu về các công nghệ: Spring Boot, Spring Security, React JS, Restful API, Redux Toolkit, Json Web Token (JWT) - Sử dụng Restful API, Spring Boot để viết APIs cho các module trong hệ thống - Sử dụng MySQL để lưu trữ dữ liệu người dùng của hệ thống - Sử dụng dịch vụ AWS S3 Bucket cho việc lưu trữ video, tài liệu, hình ảnh cho hệ thống - Sử dụng Json Web Token kết hợp với Spring Security để xác thực và ủy quyền cho hệ thống APIs hoạt động tốt và hiệu quả - Sử dụng React JS để thiết kế và xử lý giao diện web cho người dùng thao tác - Sử dụng VNPAY API cho người dùng thanh toán khi mua khóa học trên hệ thống - Sử dụng AWS CloudFront và Ubuntu Server trên Digital Ocean để deploy hệ thống Đề cương viết luận văn: 1.1 Tính cấp thiết của đề tài 1.5 Ý nghĩa khoa học và thực tiễn 1 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 2 Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 2.3 Mô hình hoá yêu cầu 3 Chương 3: THIẾT KẾ HỆ THỐNG 3.1 Thiết kế cơ sở dữ liệu 4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ STT Thời gian thực hiện Công việc Ghi chú Thiết kế usecase và mô hình hóa yêu cầu Thiết kế cơ sở dữ liệu Tìm hiểu thư viện ReactJS, Material UI Tìm hiểu framework Spring Boot Tìm hiểu Spring Security, JWT Tiến hành tổ chức cấu trúc project Xây dựng các tables của cơ sở dử liệu Tạo các Entities trong Spring Boot và mapping với cơ sở dữ liệu Xây dựng API cho các chức năng cơ bản dành cho người dùng có phân quyền là User Xây dựng Giao diện người dùng cho hệ thống Tp Hồ Chí Minh, ngày tháng năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương (Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên) Kết hợp các phần đã xây dựng (giao diện, APIs, database) Xây dựng giao diện cho trang Admin Tiến hàng tạo các APIs cho Admin Xây dựng chức năng nâng cao là các tool học tập cho người dùng Tiến hàng code tính năng cho phép có thêm bài Test, file bài giảng cho các khoá học Xây dựng tính năng quản lý khoá học cho giảng viên Xây dựng tính năng phê duyệt khoá học, đăng ký khoá học mới Kiểm thử chương trình Tìm hiểu quá trình deploy sản phẩm Viết script CI/CD Tìm hiểu AWS CloudFront Tiến hành deploy sản phẩm 9 16/06/2023 – 21/06/2023 Kiểm thử chương trình và tiến hành sửa lỗi 10 22/06/2023 – 07/07/2023 Viết và hoàn thiện báo cáo 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1 5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 2 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3 1.1.2 Kiến trúc và cách hoạt động của Spring Boot 3 1.1.3 Ưu điểm của Spring Boot 4 1.1.4 Nhược điểm của Spring Boot 5 1.1.5 Ứng dụng vào đề tài 5 1.2.2 Cơ chế hoạt động của Spring Security 10 1.2.3 Ưu điểm của Spring Security 10 1.2.4 Ứng dụng Spring Security vào đề tài 11 1.3.2 Cách hoạt động của MYSQL 13 1.3.5 Ứng dụng MySQL vào đề tài 14 1.4.2 Cách hoạt động của RESTFUL API 15 1.4.3 Ứng dụng REST API vào đề tài 16 1.5.2 Các thành phần của JWT 17 1.6.2 Cách tổ chức dữ liệu của AWS S3 19 1.6.3 Ứng dụng AWS S3 vào đề tài 20 1.7.2 Các thành phần của React: 22 1.7.3 Ưu và nhược điểm của ReactJS 23 1.7.4 Ứng dụng ReactJS vào đề tài 24 1.8.3 Ứng dụng Redux vào đề tài 28 1.9.4 Ứng dụng Material UI vào đề tài 31 1.10.3 Ứng dụng Bootstrap vào đề tài 32 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 35 2.1.2 Yêu cầu bài toán của đề tài 37 2.2.2 Yêu cầu phi chức năng 39 2.3 MÔ HÌNH HÓA YÊU CẦU 39 CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 87 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 88 3.2.2 Mô tả chi tiết bảng dữ liệu 89 3.3.1 Giao diện cho Admin và Teacher 108 4.1.2 Giao diện cho người dùng 118 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 130 4.1.1 Cài đặt ứng dụng, thư viện cần thiết 130 4.2.4 Các trường hợp kiểm thử 134 Hình 1: Kiến trúc phân lớp của SpringBoot 3 Hình 4: Ví dụ về Controller được cấu hình trong đề tài 6 Hình 5: Cấu trúc service trong backend 6 Hình 6: Ví dụ về class Service trong backend 7 Hình 7: Cấu trúc thư mục repository 7 Hình 8: Ví dụ về Repository 8 Hình 9: Cấu hình database trong file application.properties 8 Hình 10: Các class DTO trong server 9 Hình 11: Cơ chế hoạt động của Spring Security 10 Hình 12: Cấu hình Spring Security 11 Hình 14: Xử lý trả ra token khi user login thành công 12 Hình 15: Xử lý data trả ra khi user login không thành công 12 Hình 16: Xử lý Exception trong Spring 13 Hình 17: Cấu hình kết nối tới MySQL 15 Hình 19: Class cấu hình data trả ra cho client 17 Hình 20: Ví dụ về Header của JWT 18 Hình 21: Ví dụ về Payload của JWT 18 Hình 22: Tổ chức dữ liệu trên AWS S3 19 Hình 25: AWS CloudFront được sử dụng 21 Hình 26: Script Deploy Client lên S3 21 Hình 27: Tổ chức thư mục trong Legacy 24 Hình 29: Sử dụng component TeacherCard ở Component OurTeacher 25 Hình 30: Tổ chức Route trong Legacy trong thư mục MainRoute 26 Hình 31: Ví dụ url /courses sẽ render ra trang danh sách khóa học 27 Hình 32; Ví dụ điều hướng Route trong component Header 27 Hình 33: Ví dụ khởi tạo global state cart ở file cartRedux.js trong thư mục redux 29 Hình 34: Ví dụ bỏ các global state vào store ở file store.js trong thư mục redux 29 Hình 35: Ví dụ bọc store vào cả app ở thư mục index.js 30 Hình 36; : Ví dụ sử dụng global state ở component Header 30 Hình 37: Ví dụ về componet DatePicker để tạo component 31 Hình 38: Ví dụ sử dụng bootstrap và react-bootstrap 33 Hình 39: Ví dụ responsive trên màn hình cỡ trung bình trở lên 33 Hình 40: Ví dụ responsive trên màn hình cỡ nhỏ 34 Hình 41: Giao diện website khảo sát Unica 35 Hình 42: Giao diện Website khảo sát F8 – Học lập trình để đi làm 36 Hình 43: Use Case cho Admin 39 Hình 44: Use Case cho Teacher 40 Hình 45: Use Case cho người có phân quyền là Reviewer 40 Hình 46: Use Case cho người có phân quyền là User 41 Hình 47: : Sequence Diagram cho chức năng gửi yêu cầu duyệt khoá học mới 42 Hình 48: Sequence Diagram chức năng gửi kết quả phê duyệt yêu cầu trở thành giảng viên 44 Hình 49: Sequence Diagram đánh giá khoá học đã mua 46 Hình 50: Sequence Diagram chức năng đăng nhập 47 Hình 51: Sequence Diagram chức năng đăng ký tài khoản 49 Hình 52: Sequence Diagram chức năng thanh toán 51 Hình 53: Sequence Diagram yêu cầu trở thành giảng viên 54 Hình 54: Sequence Diagram chức năng trao đổi thông tin với chatBot 56 Hình 55: Sequence Diagram tạo lịch nhắc hẹn học tập 58 Hình 56: Sequence Diagram chức năng tạo câu hỏi thảo luận 60 Hình 57: Sequence Diagram chức năng xem danh sách bài giảng 61 Hình 58: Sequence Diagram chức năng xoá thảo luận trong bài giảng 63 Hình 59: Sequence Diagram chức năng xem thông báo từ giảng viên 65 Hình 60:Sequence Diagram chức năng 66 Hình 61: Sequence Diagram thêm ghi chú cho bài giảng 68 Hình 62: Sequence Diagram chức năng thực hiện bài Test 70 Hình 63: Sequence Diagram chức năng đánh dấu bài học là hoàn thành 72 Hình 64: Sequence Diagram chức năng xem danh sách giảng viên 74 Hình 65:Sequence Diagram chức năng thêm khoá học vào danh sách yêu thích 75 Hình 66:Sequence Diagram chức năng xem danh sách yêu câu phê duyệt trở thành giảng viên 77 Hình 67: Sequence Diagram đăng ký account reviewer 79 Hình 68: Sequence Diagram chức năng nhận task kiểm duyệt 81 Hình 69: Sequence Diagram chức năng duyệt yêu cầu tạo mới khoá học 83 Hình 70: Sequence Diagram chức năng cập nhật bài giảng 85 Hình 73: Giao diện trang đăng nhập 108 Hình 74: Giao diện trang quản lý khoá học 109 Hình 75: Giao diện trang chỉnh sửa thông tin tổng quan khoá học 110 Hình 76: Giao diện trang chỉnh sửa nội dung bài học 110 Hình 77: Giao diện trạng thêm mới chapter 112 Hình 78: Giao diện trang chỉnh sửa bài học 113 Hình 79: Giao diện trang quản lý yêu cầu phê duyệt khoá học 114 Hình 81: Giao diện trang đăng kí thông tin khoá học mới 114 Hình 81: Giao diện trang quản lý khóa học 115 Hình 82: Giao diện trang phê duyệt yêu cầu trở thành giảng viên 116 Hình 83: Giao diện trang thêm mới người kiểm duyệt 117 Hình 84: Giao diện trang đăng ký tài khoản 118 Hình 85: Giao diện trang danh sách khóa học 119 Hình 86: Giao diện trang chi tiết khóa học 120 Hình 87: Giao diện trang chi tiết khóa học 120 Hình 88: Giao diện trang phòng học 121 Hình 89: Giao diện chức năng note trong khóa học 122 Hình 90: Giao diện chức năng hỏi đáp trong khóa học 123 Hình 91: Giao diện chức năng thêm lịch học 124 Hình 92: Giao diện chức năng hiển thị thông báo của giảng viên 125 Hình 93: Giao diện chức năng hỏi đáp với AI 125 Hình 94: Giao diện trang lịch sử mua hàng 126 Hình 95: Giao diện trang lịch sử mua hàng 127 Hình 96: Giao diện trang chi tiết giảng viên 128 Hình 97: Giao diện trang giỏ hàng 129 Hình 98: Cấu trúc thư mục phía Backend 131 Hình 99: File cấu hình SpringBoot 131 Hình 100: Cấu trúc thư mục Front End (User) 132 Hình 101: Cấu trúc thư mục Front End (Admin, Teacher, Reviewer) 133 Bảng 1: Đặc tả UseCase gửi yêu cầu phê duyệt khoá học mới 42 Bảng 2: Đặc tả Use Case chấp nhận yêu cầu trở thành giảng viên 44 Bảng 3: Đặc tả Use Case đánh giá khóa học đã mua 46 Bảng 4: Đặc tả Use Case đăng nhập 47 Bảng 5: Đặc tả Use Case đăng ký tài khoản 49 Bảng 6: Đặc tả Use Case thanh toán đơn hàng 51 Bảng 7: : Đặc tả Use Case yêu cầu trở thành giảng viên 54 Bảng 8: Đặc tả UseCase trao đổi thông tin với ChatBot 56 Bảng 9: Đặc tả UseCase tạo lịch nhắc hẹn học tập 58 Bảng 10: Đặc tả Use Case tạo câu hỏi thảo luận 60 Bảng 11: Đặc tả Use chức năng xem danh sách thảo luận 61 Bảng 12: Đặc tả Use Case chức năng xoá thảo luận trong bài giảng 63 Bảng 13: Đặc tả Use Case xem thông báo từ giảng viên 65 Bảng 14: Đặc tả UseCase chức năng xem danh sách ghi chú 66 Bảng 15: Đặc tả Use Case thêm ghi chú 68 Bảng 16: Đặc tả Use Case thực hiện bài Quiz 70 Bảng 17: Đặc tả Use Case chức năng đánh dấu hoàn thành bài học 73 Bảng 18: Đặc tả Use case xem danh sách giảng viên 74 Bảng 19: Đặc tả Use Case năng thêm khoá học vào danh sách yêu thích 75 Bảng 20: Đặc tả Use Case xem danh sách yêu cầu phê duyệt thành giảng viên 77 Bảng 21: Đặc tả Use Case đăng ký reviewer 79 Bảng 22: Đặc tả Use Case nhận task kiểm duyệt 81 Bảng 23: Đặc tả Use Case gửi kêt quả yêu cầu duyệt khoá học 83 Bảng 24: Đặc tả Use Case cập nhật bài giảng 85 Bảng 25: Mô tả chi tiết bảng Account 89 Bảng 26: Mô tả chi tiết bảng UserDetail 89 Bảng 27: Mô tả chi tiết bảng Cart 90 Bảng 28: Mô tả chi tiết bảng Cart Detail 90 Bảng 29: Mô tả bảng Category 91 Bảng 30: Mô tả chi tiết bảng Chapters 91 Bảng 31: Mô tả chi tiết bảng Coupon 92 Bảng 32: Mô tả chi tiết bảng courses 93 Bảng 33: Mô tả chi tiết bảng courses_paid 94 Bảng 34: Mô tả chi tiết bảng Note 94 Bảng 35: Mô tả chi tiết bảng Orders 94 Bảng 36: Mô tả chi tiết bảng Order Detail 95 Bảng 37: Mô tả chi tết bảng Payment 96 Bảng 38: Mô tả chi tiết bảng Register_Teacher_Form 96 Bảng 39: Mô tả chi tiết bảng reviews 97 Bảng 40: Mô tả chi tiết bảng role 97 Bảng 41: Mô tả chi tiết bảng Announcement 97 Bảng 42: Mô tả chi tiết bảng course_summary_info_register 98 Bảng 43: Mô tả chi tiết bảng discuss 99 Bảng 44: Mô tả chi tiết bảng learning_process 100 Bảng 45: Mô tả chi tiết bảng lectures 101 Bảng 46: Mô tả chi tiết bảng quiz_answer 102 Bảng 47: Mô tả chi tiết bảng quiz_question 103 Bảng 48: Mô tả chi tiết bảng register_chapter 103 Bảng 49: Mô tả chi tiết bảng register_course_session 104 Bảng 50: Mô tả chi tiết bảng register_lectures 105 Bảng 51: Mô tả chi tiết bảng reviewer_role 106 Bảng 52: Mô tả chi tiết bảng teacher_profile 106 Bảng 53: Mô tả chi tiết bảng wish_list 107 Bảng 54: Mô tả trang đăng nhập 108 Bảng 55: Mô tả trang quản lý khoá học 109 Bảng 56: Mô tả giao diện trang chỉnh sửa khoá học 110 Bảng 57: Mô tả trang thêm mới chapter 112 Bảng 58: Mô tả trang chỉnh sửa bài học 113 Bảng 59: Mô tả giao diện trang quản lý yêu cầu phê duyệt khoá học 114 Bảng 60: Mô tả chi tiết trang quản lý khóa học 115 Bảng 61: Mô tả chi tiết trang phê duyệt yêu cầu trở thành giảng viên 116 Bảng 62: Mô tả chi tiết trang thêm mới người kiểm duyệt 117 Bảng 63: Mô tả chi tiết trang đăng ký tài khoản 118 Bảng 64: Mô tả chi tiết trang danh sách khóa học 119 Bảng 65: Mô tả chi tiết trang chi tiết khóa học 120 Bảng 66: Mô tả chi tiết trang phòng học 121 Bảng 67: Mô tả chi tiết chức năng note trong khóa học 122 Bảng 68: Mô tả chi tiết chức năng hỏi đáp 123 Bảng 69: Mô tả chi tiết chức năng tạo lịch học 124 Bảng 70: Mô tả chi tiết chức năng hiển thị thông báo của giảng viên 125 Bảng 71: Mô tả chi tiết chức năng hỏi đáp với AI 126 Bảng 72: Mô tả chi tiết trang lịch sử mua hàng 127 Bảng 73: Mô tả chi tiết trang chi tiết giảng viên 128 Bảng 74: Mô tả chi tiết trang giỏ hàng 129 Bảng 75: Các phần mền cần cài đặt 130 Bảng 76: : Kiểm thử chức năng đăng nhập trường hợp dữ liệu đúng 134 Bảng 77: Kiểm thử chức năng đăng ký với bộ dữ liệu đúng 135 Bảng 78: Kiểm thử chức năng tìm kiếm khóa học 136 Bảng 79: Kiểm thử chức năng thanh toán 137 Bảng 80: Kiểm thử chức năng thêm sản phẩm vào giỏ hàng 138 Bảng 81: Kiểm thử chức năng đánh giá khóa học đã mua 139 Bảng 82: Kiểm thử chức năng thêm ghi chú 140 Bảng 83: Kiểm thử chức năng thêm câu hỏi 141 Bảng 84: Kiểm thử chức năng hỏi đáp với AI 142 Bảng 85: Kiểm thử chức năng đánh dấu hoàn thành bài học 143 Bảng 86: Kiểm thử chức năng gửi yêu cầu trở thành giảng viên 144 Bảng 87: Kiểm thử chức năng duyệt yêu cầu trở thành giảng viên 146 Bảng 88: Kiểm thử chức năng đăng ký tạo khóa học 147 Bảng 89: Kiểm thử chức năng phê duyệt khóa học trường hợp được phép duyệt 148 Bảng 90: Kiểm thử chức năng thêm mới bài học trường hợp bài học là video 149 Bảng 91: Kiểm thử chức năng thêm mới bài học trường hợp bài học là quiz 150 DANH MỤC CÁC TỪ VIẾT TẮT STT Từ viết tắt Ý nghĩa 4 CORS Cross-origin resource sharing 5 CSRF Cross-site Request Forgery 8 RDMS Relational Database Management System 9 CSDL Cơ sở dữ liệu 11 HAMC A hashed message authentication code 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Hiện nay, việc ứng dụng công nghệ thông tin trong đời sống là mục tiêu cấp thiết, góp phần phát triển xã hội và khắc phục khó khăn về khoảng cách, nhân lực Đặc biệt trong bối cảnh dịch bệnh Covid, công nghệ thông tin giúp hạn chế lây lan Tuy nhiên, vẫn còn nhiều thách thức trong việc áp dụng công nghệ vào các lĩnh vực và kết nối người cung cấp với người tiêu dùng Nhóm nghiên cứu đã chọn đề tài “Xây dựng website kinh doanh khóa học online” nhằm thúc đẩy phát triển công nghệ thông tin và tạo ra nền tảng kết nối giữa người bán và người mua Trang web sẽ cho phép người mua dễ dàng lựa chọn khóa học online mà không cần trung gian, trong khi người bán có cơ hội giới thiệu ưu điểm của khóa học mà không tốn chi phí quảng cáo Nhóm hy vọng rằng website này sẽ góp phần vào việc thúc đẩy học online hiệu quả cho người Việt Nam. 2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu học tập mọi lúc, mọi nơi của người dùng, không bị giới hạn về thời gian cũng như địa điểm, chỉ cần thiết bị thông minh có thể truy cập được Internet là có thể học được Đồng thời, đề tài cũng nghiên cứu các công nghệ để hoàn thiện sản phẩm một cách hoàn chỉnh nhất, bao gồm: - Spring Boot kết hợp với Spring Security, Spring Data JPA để xây dựng phần server cho website - Thư viện ReactJS để thiết kế và xây dựng giao diện cho người dùng - Cơ sở dữ liệu MySQL để lưu trữ dữ liệu cho hệ thống JSON Web Token (JWT) đóng vai trò quan trọng trong việc bảo mật hệ thống Để truy cập các API yêu cầu xác thực, ứng dụng cần cung cấp JWT trong phần header của yêu cầu. - AWS S3 Bucket để lưu trữ các video khóa học, tài liệu và hình ảnh Trong tiểu luận chuyên ngành, chúng tôi tập trung vào việc phát triển một trang web kinh doanh khóa học online, cho phép người dùng dễ dàng tìm kiếm, mua và học trực tuyến Trang web cung cấp nhiều tính năng bổ trợ như ghi chú, bình luận dưới video, giao tiếp với chatbot ChatGPT, tạo lịch nhắc học và quản lý thanh toán, cũng như kiểm tra các khóa học đã mua. Phần quản trị sẽ chú trọng vào việc quản lý sản phẩm, khóa học, giáo viên trong hệ thống, theo dõi doanh thu, phê duyệt nội dung khóa học mới đăng ký, và xử lý yêu cầu của người dùng muốn trở thành giảng viên. Trong quá trình hoàn thiện đề tài, nhóm thực hiện đã đặt ra những mục tiêu sau: - Xây dựng một trang kinh doanh khóa học online với những chức năng cơ bản cho người dùng và giáo viên của các khóa học - Xây dựng được giao diện thân thiện với người sử dụng, dễ sử dụng và thao tác - Áp dụng được các hình thức thanh toán như VNPAY vào hệ thống website - Áp dụng được dịch vụ AWS S3 để lưu trữ dữ liệu cho hệ thống 5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công nghệ mới và đáp ứng nhu cầu học online của người dùng Mục đích giúp tạo ra một hệ thống có thể giúp cho việc học tập thông qua Internet trở nên ngày càng thuận lời Đồng thời, cung cấp một nơi kết nối các giảng viên , cùng chia sẻ các kiến thức trên nhiều lĩnh vực PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Spring Boot is an extension of the Spring Framework designed to simplify the complex configuration steps required by Spring Developed in Java, Spring Boot is used for creating stand-alone, production-grade applications. 1.1.2 Kiến trúc và cách hoạt động của Spring Boot Spring Boot tuân theo kiến trúc phân lớp, trong đó mỗi lớp giao tiếp với lớp ngay bên dưới hoặc bên trên của nó The Presentation Layer is the topmost tier of a Spring Boot application, responsible for handling HTTP requests, performing authentication, and converting JSON data to Java Objects and vice versa. Layer kinh doanh đảm nhận vai trò xử lý các nghiệp vụ của dự án, thực hiện các lệnh kiểm tra nhằm đảm bảo tính chính xác của dữ liệu và logic. Persistence Layer: Nó bao gồm tất cả các xử lý về thao tác với database như lưu trữ, cập nhật, truy vấn hoặc xoá dữ liệu Lớp cơ sở dữ liệu có thể bao gồm nhiều cơ sở dữ liệu khác nhau, cho phép một thao tác dữ liệu được đồng bộ hóa với nhiều máy chủ cơ sở dữ liệu khác nhau. Hình 1: Kiến trúc phân lớp của SpringBoot Kiến trúc Spring Boot dựa trên Spring framework Vì vậy, nó chủ yếu sử dụng tất cả các tính năng và module của Spring MVC, Spring Core, v.v., Khi có một HTTP request đến server, Controller sẽ xử lý và gọi các Service tương ứng để xử lý business Trong Service Layer, tất cả các xử lý liên quan đến business logic được thực hiện, bao gồm thao tác với dữ liệu thông qua các Repository và ánh xạ dữ liệu từ cơ sở dữ liệu sang các lớp mô hình. 1.1.3 Ưu điểm của Spring Boot - Phát triển các ứng dụng dựa trên Spring một cách tiết kiệm thời gian và dễ dàng - Tự động cấu hình tất cả các components cho một ứng dụng Spring - Các máy chủ nhúng được tạo sẵn (Tomcat, Jetty và Undertow), dẫn đến việc triển khai ứng dụng được tăng tốc và hiệu quả hơn - Không có cấu hình XML - Nhiều lựa chọn bổ sung, hỗ trợ nhà phát triển làm việc với cơ sở dữ liệu được nhúng vào trong bộ nhớ - Dễ dàng truy cập cơ sở dữ liệu và các dịch vụ hàng đợi như MySQL, Oracle, MongoDB, Redis, ActiveMQ và các dịch vụ khác - Có nhiều plugins để phát triển bằng các công cụ như Maven hoặc Gradle 1.1.4 Nhược điểm của Spring Boot Bên cạnh những ưu điểm trên, thì Spring Boot vẫn có một số các nhược điểm như: - Spring Boot tạo ra nhiều phụ thuộc không được sử dụng dẫn đến kích thước tệp triển khai lớn - Quá trình chuyển đổi các dự án Spring cũ hoặc dự án Spring hiện có thành các ứng dụng Spring Boot nhiều khó khăn và tốn thời gian 1.1.5 Ứng dụng vào đề tài Trong đề tài của nhóm, Backend được viết hoàn toàn bằng SpringBoot theo kiến trúc Monolithic Được tổ chức theo mô hình 3 lớp (three-layer): Presentation Layer: là tầng được sử dụng để xử lý các HTTP request Bao gồm các file JAVA được đánh dấu với anotation là @RestController hoặc @Controller Mặc dù nhóm đã đạt được nhiều ưu điểm, nhưng do hạn chế về thời gian và kiến thức, vẫn còn một số nhược điểm cần được cải thiện và khắc phục. - Chưa tích hợp đăng nhập bằng Google, github, facebook,… - Chưa tích hợp chat trực tiếp với giảng viên - Giao diện một số trang còn chưa đẹp mắt Dựa trên những nhược điểm đã được nêu, để kế thừa và phát huy các ưu điểm đã đạt được, một số hướng phát triển tiếp theo của ứng dụng sẽ được đề xuất. - Trong tương lai nhóm sẽ tích hợp đăng nhập bằng google, facebook, github,… - Xây dựng tính năng hỗ trợ chat trực tiếp với giảng viên - Xây dựng hệ thống hưởng hoa hồng cho chủ web khi học sinh thanh toán thành công khóa học do giáo viên đăng bán Tiêu đề danh mục
CÀI ĐẶT VÀ KIỂM THỬ
KIỂM THỬ PHẦN MỀM
ƯU ĐIỂM
NHƯỢC ĐIỂM
HƯỚNG PHÁT TRIỂN