Khóa Luận Tốt Nghiệp Đề Tài Xây Dựng Website Kinh Doanh Khóa Học Online.pdf

v

KHÓA LUẬN TỐT NGHIỆP Đề 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

NHÓM SINH VIÊN THỰC HIỆN NGUYỄN NGỌC TRUNG – 19110490 NGUYỄN PHÚC THANH TOÀN – 19110479

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

□□&□□

v

KHÓA LUẬN TỐT NGHIỆP Đề 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

NHÓM SINH VIÊN THỰC HIỆN NGUYỄN NGỌC TRUNG – 19110490 NGUYỄN PHÚC THANH TOÀN – 19110479

TP Hồ Chí Minh, Tháng 07, 2023

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

□□&□□

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪ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 khóa học online

Họ và tên Giáo viên hướng dẫn: ThS Nguyễn Minh Đạo

Tp Hồ Chí Minh, ngày tháng năm 2023

Giáo viên hướng dẫn

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ơ

Tp Hồ Chí Minh, ngày 27 tháng 6 năm 2023

Giảng viên phản biện

(Ký và ghi rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất đến với 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 cho nhóm được học tập, phát triển nền tảng kiến thức sâu sắc và thực hiện đề tài này

Bên cạnh đó nhóm thực hiện xin gửi đến thầy Nguyễn Minh Đạo lời cảm ơn sâu sắc nhất Trải qua một quá trình dài học tập và thực hiện đề tài trong thời gian qua Thầy đã tận tâm chỉ bảo nhiệt tình nhóm thực hiện trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đề tài này

Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh nghiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và thực tập ở các công ty Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy Nguyễn Minh Đạo đã tặng cho nhóm một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đã giúp và thôi thúc nhóm hoàn thành được đề tài Đây sẽ là hành trang vô cùng lớn của cho nhóm trước khi bước ra một cuộc sống mới

Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp nhóm thực hiện đã rất cố gắng để hoàn thành một cách tốt nhất Chính vì vậy việc xảy ra những thiếu sót là điều khó có thể tránh khỏi Nhóm thực hiện hi vọng nhận được sự góp ý tận tình của quý thầy (cô) qua đó nhóm có thể rút ra được bài học kinh nghiệm và hoàn thiện và cải thiện nâng cấp lại sản phẩm của mình một cách tốt nhất có thể

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:

1 Lý thuyết:

Tìm hiểu về các công nghệ: Spring Boot, Spring Security, React JS, Restful API, Redux Toolkit, Json Web Token (JWT)

2 Thực hành:

- 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 làm Framework để thiết kế và xử lý giao diện web cho

Đề cương viết luận văn:

1 PHẦN MỞ ĐẦU

1.1 Tính cấp thiết của đề tài 1.2 Đối tượng nghiên cứu 1.3 Phạm vi nghiên cứu 1.4 Mục tiêu đề tài

1.5 Ý nghĩa khoa học và thực tiễn

2 PHẦN NỘI DUNG

1 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Spring Boot Framework

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

3.2 Thiết kế giao diện

4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ

Thiết kế usecase và mô hình hóa yêu cầu Thiết kế cơ sở dữ liệu

2 05/03/2023 – 15/03/2023

Tìm hiểu thư viện ReactJS, Material UI Tìm hiểu framework Spring Boot Tìm hiểu Spring Security, JWT

16/03/2023 – 23/03/2023

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

3 24/03/2023 – 10/04/2023

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

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

Xây dựng Giao diện người dùng cho hệ thống

4 11/04/2023 – 25/04/2023

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

5 26/04/2023 – 11/05/2023

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

6 12/05/2023 – 30/05/2023

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

7 31/052023 – 06/06/2023 Kiểm thử chương trình

Tìm hiểu quá trình deploy sản phẩm

8 07/06/2023 – 15/06/2023

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

MỤC LỤC

PHẦN MỞ ĐẦU 1

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1

2 ĐỐI TƯỢNG NGHIÊN CỨU 1

3 PHẠM VI NGHIÊN CỨU 2

4 MỤC TIÊU ĐỀ TÀI 2

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 2

PHẦN NỘI DUNG 3

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3

1.1 SPRING BOOT FRAMEWORK 3

1.1.1 Khái niệm 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.2 SPRING SECURITY 5

1.2.1 Khái niệm 5

1.2.2 Cơ chế hoạt động của Spring Security 5

1.2.3 Ưu điểm của Spring Security 6

1.3 MYSQL 6

1.3.1 Khái niệm 6

1.3.2 Cách hoạt động của MYSQL 6

1.3.3 Ưu điểm của MySQL 7

1.3.4 Nhược điểm của MySQL 7

1.4 RESTFUL API 7

1.4.1 Khái niệm 7

1.4.2 Cách hoạt động của RESTFUL API 8

1.5 JSON WEB TOKEN (JWT) 8

1.5.1 Khái niệm JWT 8

1.5.2 Các thành phần của JWT 8

1.5.3 Ưu điểm của JWT 9

2.2.1 Yêu cầu chức năng 18

2.2.2 Yêu cầu phi chức năng 20

2.3 MÔ HÌNH HÓA YÊU CẦU 21

2.3.1 Lược đồ Use Case 21

2.3.2 Đặc tả Use Case 24

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 99

3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 99

3.1.2 Mô tả chi tiết bảng dữ liệu 100

3.2 THIẾT KẾ GIAO DIỆN 122

3.2.1 Giao diện cho Admin và Teacher 122

4.1.2 Giao diện cho người dùng (Student, Teacher) 147

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 170

4.1 CÀI ĐẶT PHẦN MỀM 170

4.1.1 Cài đặt ứng dụng, thư viện cần thiết 170

4.1.2 Cài đặt phía Backend 171

4.1.3 Cài đặt phía Frontend 172

DANH MỤC HÌNH ẢNH

Hình 1: Kiến trúc phân lớp của SpringBoot 3

Hình 2: SpringBoot flow architecture 4

Hình 3: Cơ chế hoạt động của Spring Security 5

Hình 4: Ví dụ về Header của JWT 8

Hình 5: Ví dụ về Payload của JWT 9

Hình 6: Tổ chức dữ liệu trên AWS S3 10

Hình 7: Giao diện website khảo sát Unica 16

Hình 8: Giao diện Website khảo sát F8 – Học lập trình để đi làm 17

Hình 9: Use Case cho Admin 21

Hình 10: Use Case cho Teacher 22

Hình 11: Use Case cho người có phân quyền là Reviewer 22

Hình 12: Use Case cho người có phân quyền là User 23

Hình 13: : Sequence Diagram cho chức năng gửi yêu cầu duyệt khoá học mới 24

Hình 14: Sequence Diagram thêm loại khoá học mới 26

Hình 15: Sequence Diagram chức năng thêm mới mã khuyến mãi 28

Hình 16: Sequence Diagram chức năng cập nhật thông tin mã khuyến mãi 30

Hình 17: Sequence Diagram xem lịch sử đơn hàng 32

Hình 18: 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 33

Hình 19: Sequence Diagram cho chức năng thêm khoá học vào giỏ hàng 35

Hình 20: Sequence Diagram đánh giá khoá học đã mua 36

Hình 21: Sequence Diagram chức năng đăng xuất 38

Hình 22: Sequence Diagram chức năng đăng nhập 39

Hình 23: Sequence Diagram chức năng đăng ký tài khoản 41

Hình 24: Sequence Diagram chức năng thanh toán 43

Hình 25: Sequence Diagram chức năng xem đánh giá khoá học 46

Hình 26: Sequence Diagram tìm kiếm các khoá học 47

Hình 27: Sequence Diagram yêu cầu trở thành giảng viên 49

Hình 28: Sequence Diagram xoá khoá học khỏi giỏ hàng 51

Hình 30: Sequence Diagram tạo lịch nhắc hẹn học tập 54

Hình 31: Sequence Diagram chức năng tạo câu hỏi thảo luận 55

Hình 32: Sequence Diagram chức năng xem danh sách bài giảng 57

Hình 33: Sequence Diagram chức năng trả lời thảo luận trong bài học 59

Hình 34: Sequence Diagram chức năng xoá thảo luận trong bài giảng 60

Hình 35: Sequence Diagram chức năng xem thông báo từ giảng viên 63

Hình 36:Sequence Diagram chức năng 64

Hình 37: Sequence Diagram thêm ghi chú cho bài giảng 66

Hình 38: Sequence Diagram cho chức năng xoá ghi chú 68

Hình 39: Sequence Diagram chức năng thực hiện bài Test 70

Hình 40: Sequence Diagram chức năng đánh dấu bài học là hoàn thành 72

Hình 41: Sequence Diagram chức năng bỏ đánh dầu hoàn thành bài học 74

Hình 42: Sequence Diagram chức năng xem danh sách giảng viên 76

Hình 43: Sequence Dìagram chức năng xem danh sách reviewers 77

Hình 44: Sequence Diagram chức năng xem bài giảng 78

Hình 45:Sequence Diagram chức năng thêm khoá học vào danh sách yêu thích 80

Hình 46: Sequence Diagram chức năng xem danh sách khoá học yêu thích 81

Hình 47: Sequence Diagram xoá khoá học khỏi danh sách yêu thích 82

Hình 48:Sequence Diagram chức năng xem danh sách yêu câu phê duyệt trở thành giảng viên 84

Hình 49: Sequence Diagram đăng ký account reviewer 86

Hình 50: Sequence Diagram chức năng xem danh sách reviewer 88

Hình 51: Sequence Diagram chức năng xem danh sách khoá học chưa được duyệt 89

Hình 52: Sequence Diagram chức năng nhận task kiểm duyệt 91

Hình 53: Sequence Diagram chức năng duyệt yêu cầu tạo mới khoá học 93

Hình 54: Sequence Diagram chức năng cập nhật bài giảng 95

Hình 55: Sequence Diagram xem danh sách mã khuyến mãi 97

Hình 56: Lược đồ ERD 99

Hình 57: Giao diện trang đăng nhập 122

Hình 58: Giao diện trang quên mật khẩu 123

Hình 59: Giao diện trang Dashboard 124

Hình 60: Giao diện trang DashBoard thể hiện doanh thu 124

Hình 61: Giao diện trang quản lý khoá học 125

Hình 62: Giao diện trang chỉnh sửa thông tin tổng quan khoá học 127

Hình 63: Giao diện trang chỉnh sửa nội dung bài học 127

Hình 64: Giao diện trạng thêm mới chapter 129

Hình 65: Giao diện trang chỉnh sửa bài học 130

Hình 66: Giao diện trang quản lý yêu cầu phê duyệt khoá học 131

Hình 67: Giao diện trang đăng kí thông tin khoá học mới 132

Hình 68: Giao diện trang đăng ký nội dung khoá học mới 132

Hình 69: Giao diện trang xem lại nội dung khoá học mới 132

Hình 70: Giao diện trang quản lý bình luận 134

Hình 71: Giao diện trang thêm mới bình luận 135

Hình 72: Giao diện trang quản lý đơn hàng 135

Hình 73: Giao diện trang quản lý coupon 136

Hình 74: Giao diện trang thêm mới coupon 137

Hình 75: Giao diện trang chỉnh sửa coupon 137

Hình 76: Giao diện trang quản lý thông tin tài khoản 138

Hình 77: Giao diện trang thay đổi mật khẩu 139

Hình 78: Giao diện trang quản lý khóa học 140

Hình 79: Giao diện trang thêm mới và sửa loại khóa học 141

Hình 80: Giao diện trang quản lý phương thức thanh toán 142

Hình 81: Giao diện trang thêm mới và chỉnh sửa phương thức thanh toán 143

Hình 82: Giao diện trang phê duyệt yêu cầu trở thành giảng viên 144

Hình 83: Giao diện trang quản lý người kiểm duyệt 145

Hình 84: Giao diện trang thêm mới người kiểm duyệt 146

Hình 85: Giao diện trang đăng nhập 147

Hình 86: Giao diện trang đăng ký tài khoản 148

Hình 87: Giao diện trang quên mật khẩu 149

Hình 88: Giao diện Header 150

Hình 89: Giao diện Banner 150

Hình 91: Giao diện người tạo web 152

Hình 92: Giao diện Footer 153

Hình 93: Giao diện trang danh sách khóa học 153

Hình 94: Giao diện trang chi tiết khóa học 154

Hình 95: Giao diện trang chi tiết khóa học 155

Hình 96: Giao diện trang phòng học 156

Hình 97: Giao diện chức năng note trong khóa học 157

Hình 98: Giao diện chức năng hỏi đáp trong khóa học 158

Hình 99: Giao diện chức năng phản hồi câu hỏi 159

Hình 100: Giao diện chức năng thêm lịch học 160

Hình 101: Giao diện chức năng hiển thị thông báo của giảng viên 161

Hình 102: Giao diện chức năng hỏi đáp với AI 162

Hình 103: Giao diện trang thông tin cá nhân 163

Hình 104: Giao diện trang lịch sử mua hàng 164

Hình 105: Giao diện trang lịch sử mua hàng 164

Hình 106: Giao diện trang danh sách giảng viên 165

Hình 107: Giao diện trang chi tiết giảng viên 166

Hình 108: Giao diện trang giỏ hàng 167

Hình 109: Giao diện trang khóa học của tôi (Tab khóa học đã mua) 168

Hình 110: Giao diện trang khóa học của tôi (Tab khóa học yêu thích) 168

Hình 111: Cấu trúc thư mục Front End (User) 172

Hình 112: Cấu trúc thư mục Front End (Admin, Teacher, Reviewer) 173

DANH MỤC BẢNG BIỂU

Bảng 1: Đặc tả UseCase gửi yêu cầu phê duyệt khoá học mới 24

Bảng 2: Đặc tả Use Case thêm loại khóa học 26

Bảng 3: Đặc tả Use Case thêm mới mã khuyến mãi 28

Bảng 4: Đặc tả Use Case sửa thông tin mã khuyến mãi 30

Bảng 5: Đặc tả Use Case xem lịch sử đơn hàng 32

Bảng 6: Đặc tả Use Case chấp nhận yêu cầu trở thành giảng viên 33

Bảng 7: Đặc tả Use Case thêm khoá học vào giỏ hàng 35

Bảng 8: Đặc tả Use Case đánh giá khóa học đã mua 36

Bảng 9: Đặc tả Use Case chức năng đăng xuất 38

Bảng 10: Đặc tả Use Case đăng nhập 39

Bảng 11: Đặc tả Use Case đăng ký tài khoản 41

Bảng 12: Đặc tả Use Case thanh toán đơn hàng 43

Bảng 13: Đặc tả Use Case xem đánh giá khóa học 46

Bảng 14: Đặc tả Use Case chức năng tìm kiếm khoá học 47

Bảng 15: : Đặc tả Use Case yêu cầu trở thành giảng viên 49

Bảng 16: Đặc tả UseCase xoá khoá học khỏi giỏ hàng 51

Bảng 17: Đặc tả UseCase trao đổi thông tin với ChatBot 52

Bảng 18: Đặc tả UseCase tạo lịch nhắc hẹn học tập 54

Bảng 19: Đặc tả Use Case tạo câu hỏi thảo luận 56

Bảng 20: Đặc tả Use chức năng xem danh sách thảo luận 57

Bảng 21 Đặc tả UseCase chứuc năng trả lời thảo luận 59

Bảng 22: Đặc tả Use Case chức năng xoá thảo luận trong bài giảng 61

Bảng 23: Đặc tả Use Case xem thông báo từ giảng viên 63

Bảng 24: Đặc tả UseCase chức năng xem danh sách ghi chú 64

Bảng 25: Đặc tả Use Case thêm ghi chú 66

Bảng 26: Đặc tả Usecase chức năng xoá ghi chú 68

Bảng 27: Đặc tả Use Case thực hiện bài Quiz 70

Bảng 28: Đặc tả Use Case chức năng đánh dấu hoàn thành bài học 73

Bảng 29: Đặc tả Use Case bỏ đánh dấu hoàn thành khoá học 75

Bảng 30: Đặc tả Use case xem danh sách giảng viên 76

Bảng 31: Đặc tả Use Case xem thông tin chi tiết giảng viên 77

Bảng 32: Đặc tả Use Case xem bài giảng 79

Bảng 33: Đặc tả Use Case năng thêm khoá học vào danh sách yêu thích 80

Bảng 34: Đặc tả UseCase chức năng xem danh sách khoá học yêu thích 81

Bảng 35: Đặc tả Use Case xoá khoá học khỏi danh sách yêu thích 82

Bảng 36: Đặc tả Use Case xem danh sách yêu cầu phê duyệt thành giảng viên 84

Bảng 37: Đặc tả Use Case đăng ký reviewer 86

Bảng 38: Đặc tả Use Case xem danh sách reviewer 88

Bảng 39: Đặc tả Use Case xem danh sách khoá học chưa đưa duyệt 89

Bảng 40: Đặc tả Use Case nhận task kiểm duyệt 91

Bảng 41: Đặc tả Use Case gửi kêt quả yêu cầu duyệt khoá học 93

Bảng 42: Đặc tả Use Case cập nhật bài giảng 95

Bảng 43; Đặc tả Use Case xem mã khuyến mãi 97

Bảng 44: Mô tả chi tiết bảng Account 100

Bảng 45: Mô tả chi tiết bảng UserDetail 100

Bảng 46: Mô tả chi tiết bảng Cart 101

Bảng 47: Mô tả chi tiết bảng Cart Detail 101

Bảng 48: Mô tả bảng Category 102

Bảng 49: Mô tả chi tiết bảng Chapters 102

Bảng 50: Mô tả chi tiết bảng Coupon 103

Bảng 51: Mô tả chi tiết bảng courses 104

Bảng 52: Mô tả chi tiết bảng courses_paid 105

Bảng 53: Mô tả chi tiết bảng Courses Video 105

Bảng 54: Mô tả chi tiết bảng Note 106

Bảng 55: Mô tả chi tiết bảng Orders 106

Bảng 56: Mô tả chi tiết bảng Order Detail 107

Bảng 57: Mô tả chi tết bảng Payment 108

Bảng 58: Mô tả chi tiết bảng Register_Teacher_Form 108

Bảng 59: Mô tả chi tiết bảng ResourceCourses 109

Bảng 60: Mô tả chi tiết bảng reviews 109

Bảng 61: Mô tả chi tiết bảng role 109

Bảng 62: Mô tả chi tiết bảng token 110

Bảng 63: Mô tả chi tiết bảng Announcement 110

Bảng 64: Mô tả chi tiết bảng course_summary_info_register 111

Bảng 65: Mô tả chi tiết bảng discuss 112

Bảng 66: Mô tả chi tiết bảng learning_process 113

Bảng 67: Mô tả chi tiết bảng learning_process_learned_lectures 114

Bảng 68: Mô tả chi tiết bảng lectures 114

Bảng 69: Mô tả chi tiết bảng quiz_answer 115

Bảng 70: Mô tả chi tiết bảng quiz_question 116

Bảng 71: Mô tả chi tiết bảng quiz_stat 116

Bảng 72: Mô tả chi tiết bảng register_chapter 117

Bảng 73: Mô tả chi tiết bảng register_course_session 118

Bảng 74: Mô tả chi tiết bảng register_lectures 119

Bảng 75: Mô tả chi tiết bảng reviewer_role 120

Bảng 76: Mô tả chi tiết bảng teacher_profile 120

Bảng 77: Mô tả chi tiết bảng wish_list 121

Bảng 78: Mô tả trang đăng nhập 122

Bảng 79: Mô tả trang quên mật khẩu 123

Bảng 80: Mô tả trang Dashboard 124

Bảng 81: Mô tả trang quản lý khoá học 125

Bảng 82: Mô tả giao diện trang chỉnh sửa khoá học 127

Bảng 83: Mô tả trang thêm mới chapter 129

Bảng 84: Mô tả trang chỉnh sửa bài học 130

Bảng 85: Mô tả giao diện trang quản lý yêu cầu phê duyệt khoá học 131

Bảng 86: Mô tả chi tiết trang đăng ký khoá học mới 132

Bảng 87: Mô tả chi tiết trang quản lý bình luận 134

Bảng 88: Mô tả chi tiết trang thêm mới bình luận 135

Bảng 89: Mô tả chi tiết trang quản lý đơn hàng 136

Bảng 90: Mô tả chi tiết trang quản lý coupon 136

Bảng 92: Mô tả chi tiết trang quản lý thông tin tài khoản 138

Bảng 93: Mô tả chi tiết trang thay đổi mật khẩu 139

Bảng 94: Mô tả chi tiết trang quản lý khóa học 140

Bảng 95: Mô tả chi tiết trang thêm mới và sửa loại khóa học 141

Bảng 96: Mô tả chi tiết trang quản lý phương thức thanh toán 142

Bảng 97: Mô tả chi tiết trang thêm mới và chỉnh sửa phương thức thanh toán 143

Bảng 98: Mô tả chi tiết trang phê duyệt yêu cầu trở thành giảng viên 144

Bảng 99: Mô tả chi tiết trang quản lý người kiểm duyệt 145

Bảng 100: Mô tả chi tiết trang thêm mới người kiểm duyệt 146

Bảng 101: Mô tả chi tiết trang đăng nhập 147

Bảng 102: Mô tả chi tiết trang đăng ký tài khoản 148

Bảng 103: Mô tả chi tiết trang quên mật khẩu 149

Bảng 104: Mô tả chi tiết Header 150

Bảng 105: Mô tả chi tiết Banner 151

Bảng 106: Mô tả chi tiết top 4 khóa học 151

Bảng 107: Mô tả chi tiết người tạo web 152

Bảng 108: Mô tả chi tiết Footer 153

Bảng 109: Mô tả chi tiết trang danh sách khóa học 154

Bảng 110: Mô tả chi tiết trang chi tiết khóa học 155

Bảng 111: Mô tả chi tiết trang phòng học 156

Bảng 112: Mô tả chi tiết chức năng note trong khóa học 157

Bảng 113: Mô tả chi tiết chức năng hỏi đáp 158

Bảng 114: Mô tả chi tiết chức năng phản hồi câu hỏi 159

Bảng 115: Mô tả chi tiết chức năng tạo lịch học 160

Bảng 116: Mô tả chi tiết chức năng hiển thị thông báo của giảng viên 161

Bảng 117: Mô tả chi tiết chức năng hỏi đáp với AI 162

Bảng 118: Mô tả chi tiết trang thông tin cá nhân 163

Bảng 119: Mô tả chi tiết trang lịch sử mua hàng 164

Bảng 120: Mô tả chi tiết trang danh sách giảng viên 165

Bảng 121: Mô tả chi tiết trang chi tiết giảng viên 166

Bảng 122: Mô tả chi tiết trang giỏ hàng 167

Bảng 123: Mô tả chi tiết trang khóa học của tôi 168

Bảng 124: Các phần mền cần cài đặt 170

Bảng 125: Kiểm thử chức năng đăng nhập với trường hợp không điền username 175

Bảng 126: Kiểm thử chức năng đăng nhập với trường hợp username không có trong hệ thống 176

Bảng 127: Kiểm thử chức năng đăng nhập với trường hợp password không đúng 177

Bảng 128: : Kiểm thử chức năng đăng nhập trường hợp dữ liệu đúng 178

Bảng 129: Kiểm thử chức năng đăng ký với username đã có trên thệ thống 179

Bảng 130: Kiểm thử chức năng đăng ký với bộ dữ liệu đúng 180

Bảng 131: Kiểm thử chức năng tìm kiếm khóa học 181

Bảng 132: Kiểm thử chức năng thay đổi ảnh đại diện 182

Bảng 133: Kiểm thử chức năng thanh toán 183

Bảng 134: Kiểm thử chức năng thanh toán với trường hợp không chọn sản phẩm nào trong giỏ hàng 184

Bảng 135: Kiểm thử chức năng xóa sản phẩm khỏi giỏ hàng 185

Bảng 136: Kiểm thử chức năng thêm sản phẩm vào giỏ hàng 186

Bảng 137: Kiểm thử chức năng thêm sản phẩm vào giỏ hàng trường hợp sản phẩm đã có trong giỏ hàng 187

Bảng 138: Kiểm thử chức năng đánh giá khóa học đã mua 188

Bảng 139: Kiểm thử chức năng đánh giá khóa học đã mua 189

Bảng 140: Kiểm thử chức năng xóa đánh giá 190

Bảng 141: Kiểm thử chức năng thêm vào danh sách yêu thích 191

Bảng 142: Kiểm thử chức năng xóa khóa học khỏi danh sách yêu thích 192

Bảng 143: Kiểm thử chức năng thêm ghi chú 193

Bảng 144: Kiểm thử chức năng xóa ghi chú 194

Bảng 145: Kiểm thử chức năng thêm câu hỏi 195

Bảng 146: Kiểm thử chức năng xóa câu hỏi 196

Bảng 147: Kiểm thử chức năng trả lời câu hỏi 197

Bảng 148: Kiểm thử chức năng hỏi đáp với AI 199

Bảng 149: Kiểm thử chức năng đánh dấu hoàn thành bài học 200

Bảng 150: Kiểm thử chức năng bỏ đánh dấu hoàn thành bài học 201

Bảng 152: Kiểm thử chức năng duyệt yêu cầu trở thành giảng viên 204 Bảng 153: Kiểm thử chức năng đăng ký tạo khóa học 205 Bảng 154: Kiểm thử chức năng phê duyệt khóa học trường hợp khóa học cần chỉnh sửa lại để được duyệt 206 Bảng 155: Kiểm thử chức năng đăng ký tạo khóa học trường hợp đã được yêu cầu chỉnh sửa để được phê duyệt 207 Bảng 156: Kiểm thử chức năng phê duyệt khóa học trường hợp khóa học được phép duyệt 209 Bảng 157: Kiểm thử chức năng phê duyệt khóa học trường hợp khóa học bị từ chối 210 Bảng 158: Kiểm thử chức năng xóa khóa học 211 Bảng 159: Kiểm thử chức năng chỉnh sửa khóa học trường hợp sửa trường public 212 Bảng 160: Kiểm thử chức năng chỉnh sửa khóa học trường hợp sửa trường public 213 Bảng 161: Kiểm thử chức năng thay đổi thứ tự chapter trong khóa học 214 Bảng 162: 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 215 Bảng 163: 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 217 Bảng 164: Kiểm thử chức năng xóa bài học 219

DANH MỤC CÁC TỪ VIẾT TẮT

1 AWS Amazon Web Services

2 API Application Programming Interface 3 HTTP HyperText Transfer Protocol 4 CORS Cross-origin resource sharing 5 CSRF Cross-site Request Forgery 6 XML Extensible Markup Language 7 DI Dependency Injection

8 RDMS Relational Database Management System

10 HTML Hypertext Markup Language

11 HAMC A hashed message authentication code

14 SHA Secure Hash Algorithm 15 JDK Java Development Kit 16 IE8 Internet Explorer 8

17 CSS Cascading Style Sheets 18 JRE Java Runtime Environment 19 JSP Java server Page

20 JVM Java Virtual Machine 21 SEO Search Engine Optimization 22 DOM Document Object Model

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Hiện nay, việc xây dựng và ứng dụng công nghệ thông tin vào đời sống đã trở thành mục tiêu cấp thiết của toàn xã hội Bởi nó không chỉ giúp đẩy nhanh tốc độ phát triển của xã hội mà còn góp phần 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 thời buổi dịch bệnh Covid hiện nay, việc ứng dụng công nghệ thông tin vào đời sống còn góp phần hạn chế dịch bệnh Tuy nhiên, vẫn còn nhiều khó khăn, bất cập trong việc đưa công nghệ thông tin vào từng mảng của đời sống cũng như trong kết nối giữa người cung và người cầu Nắm bắt được điều đó, nhóm chọn nghiên cứu đề tài “Xây dựng website kinh doanh khóa học online” Với đề tài, nhóm hy vọng vừa góp phần thúc đẩy việc phát triển công nghệ thông tin vừa tạo ra một trang web giúp kết nối giữa người bán và người mua Đây sẽ là nơi, mà người mua được quyền xem xét, lựa chọn những khóa học online mà mình cần thiết mà không cần phải qua trung gian người tư vấn nào cả Còn người bán sẽ có cơ hội giới thiệu về những ưu điểm của khóa học cung cấp, cách thức liên hệ, ưu đãi, … Mà không cần tốn phí cho các trang quảng cáo Đặc biệt, nhóm mong rằng trang web này sẽ phát thêm một tín hiệu tích cực trong việc đưa người Việt Nam đế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) để làm lớp bảo mật cho hệ thống Để gọi đến các API có yêu cầu xác thực, ứng dụng phải cung cấp JWT trong header của request

- AWS S3 Bucket để lưu trữ các video khóa học, tài liệu và hình ảnh

3 PHẠM VI NGHIÊN CỨU

Trong đề tài tiểu luận chuyên ngành, chủ yếu tập trung vào xử lý nghiệp vụ của một trang web chuyên kinh doanh các khóa học online như: xem và tìm kiếm các khóa học, mua khóa học và cho phép người dùng học trực tiếp trên trang web cũng như các tính năng bổ trợ cho việc học như tạo ghi chú, tạo các bình luận để thảo luận bên dưới các video của khóa học, trao đổi thông tin với chatbot sử dụng ChatGPT, thêm lịch nhắc học và thanh toán, kiểm tra các khóa học đã mua

Phần quản trị sẽ tập trung vào các nghiệp vụ như quản lý sản phẩm, quản lý các khóa học, giáo viên trên hệ thống, quản lý doanh thu, duyệt nội dung khóa học đăng ký mới, xử lý các yêu cầu trở thành giảng viên của người dùng,

4 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

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

1.1.1 Khái niệm

Spring Boot là một extension của Spring Framework giúp loại bỏ các bước cấu hình phức tạp mà Spring bắt buộc Spring Boot là dự án phát triển bởi ngôn ngữ Java và được dùng để phát triển các ứng dụng thuộc dạng stand-alone và production-grade

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ó

được sử dụng để xử lý các HTTP request, xác thực, chuyển đổi các JSON sang Java Object và ngược lại

hiện các lệnh kiểm tra để đảm bảo tính đúng đắng của dự liệu, logic, etc

trữ, cập nhật, truy vấn hoặc xoá dữ liệu

với dữ liệu có thể đồng bộ với nhiều database server 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 sẽ bao gồm tất cả các xử lý về business logic, thao tác với dữ liệu thông qua các Repository và ánh xạ dữ liệu từ database sang model class

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

Hình 2: SpringBoot flow architecture

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.2 SPRING SECURITY 1.2.1 Khái niệm

Spring Security là một trong những core feature quan trọng của Spring Framework, giúp phân quyền và xác thực người dùng trước khi cho phép họ truy cập vào các tài nguyên của hệ thống

1.2.2 Cơ chế hoạt động của Spring Security

Mỗi request vào hệ thống sẽ được trải qua một tập các Filter, tập các filter này

được quản lý bởi một springSecurityFilterChain Bản chất fillterProxy này giữ một tập

các filter đã được định nghĩa trước và lần lượt cho request đi qua từng filter một

Hình 3: Cơ chế hoạt động của Spring Security

Với mỗi Filter, sẽ có một authenticationProvider phù hợp tương ứng Mỗi

AuthenticationProvider sẽ chịu trách nhiệm cho một phương cách xác thực của hệ thống

thông tin liên quan đến User bao gồm các thông tin cơ bản và thông tin mang tính phần quyền của user Các thông tin này được gói gọn lại trong một cài đặt cụ thể của

Với dữ liệu có được từ userDetailsService, AuthenticationProvider tiến hành xác

thực với dữ liệu đầu vào từ request Nếu việc Xác thực thành công, Một

Object Authentication Sẽ được lưu vào trong SecurityContextHolder của spring Việc

xác thực kết thúc

1.2.3 Ưu điểm của Spring Security

● Lợi ích lớn nhất của Spring Security là giúp tích hợp tính năng xác thực và phân quyền một cách dễ dàng vào ứng dụng của mình

● Ngoài ra Spring Security còn giúp chống lại CSRF attack Bảo vệ Session Fixation Mã hóa mật khẩu Cache control X-XSS-Protection …

1.3 MYSQL

1.3.1 Khái niệm

MySQL là một hệ thống quản lý cơ sở dữ liệu quan hệ mã nguồn mở (RDBMS) dựa trên ngôn ngữ truy vấn có cấu trúc ( SQL) được phát triển, phân phối và hỗ trợ bởi tập đoàn Oracle MySQL chạy trên hầu hết tất cả các nền tảng, bao gồm cả Linux , UNIX và Windows

1.3.2 Cách hoạt động của MYSQL

Trong môi trường MySQL, máy khách (client) và máy chủ (server) tương tác qua lại với nhau theo nguyên lý:

● MySQL đang tạo ra bảng để có thể lưu trữ dữ liệu và định nghĩa về sự liên

quan giữa những bảng đó

● Client sẽ trực tiếp gửi yêu cầu SQL bằng 1 lệnh đặc biệt có trên MySQL ● Ứng dụng tại server sẽ tiến hành phản hồi thông tin cũng như trả về những

1.3.3 Ưu điểm của MySQL

Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và hoạt

động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh

Độ bảo mật cao: MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên

Internet khi sở hữu nhiều tính năng bảo mật thậm chí là ở cấp cao

Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ từ một

hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp

Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và hơn

thế nữa nó có thể được mở rộng nếu cần thiết

hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi

1.3.4 Nhược điểm của MySQL

Giới hạn: Theo thiết kế, MySQL không có ý định làm tất cả và nó đi kèm với các

hạn chế về chức năng mà một vào ứng dụng có thể cần

Dung lượng hạn chế: Nếu số bản ghi của bạn lớn dần lên thì việc truy xuất dữ

liệu của bạn là khá khó khăn, khi đó chúng ta sẽ phải áp dụng nhiều biện pháp để tăng

tốc độ truy xuất dữ liệu như là chia tải database này ra nhiều server, hoặc tạo cache

MySQL

1.4 RESTFUL API 1.4.1 Khái niệm

REST: là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy, REST gửi một yêu cầu HTTP như GET, POST, DELETE … đến một URL để xử lý dữ liệu Hoạt động dựa chủ yếu trên phương thức CRUD ( Create, Read, Update, Delete) tương đương với 4 giao thức HTTP: POST, GET, PUT, DELETE

RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các tài nguyên RESTful là một trong những kiểu thiết kế API được

sử dụng phổ biến ngày nay để cho các ứng dụng khác nhau (như web, mobile) giao tiếp với nhau

1.4.2 Cách hoạt động của RESTFUL API

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng

- GET (SELECT): Trả về một Resource hoặc một danh sách Resource - POST (CREATE): Tạo mới một Resource

- PUT (UPDATE): Cập nhật thông tin cho Resource - DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa

1.5 JSON WEB TOKEN (JWT) 1.5.1 Khái niệm JWT

JSON Web Mã (JWT) là một chuẩn mở (RFC 7519) định nghĩa một cách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa các bên dưới dạng đối tượng JSON Thông tin này có thể được xác minh và đáng tin cậy vì nó có chứa chữ ký số JWT có thể được ký bằng một thuật toán bí mật (với thuật toán HMAC) hoặc một public / private key sử dụng mã hoá RSA

1.5.2 Các thành phần của JWT

Cấu trúc của JWT gồm 3 thành phần chính: Header, Payload, Signature

cho biết đây là một Token JWT) và thuật toán đã dùng để mã hóa (HMAC SHA256 - HS256 hoặc RSA)

Hình 4: Ví dụ về Header của JWT

Payload: chứa các the claims Claims thường chứa các thuộc tính như :typically, thông tin user và các dữ liệu bổ sung Có 3 loại claims: registered, public, và private claims

- Registered claims: Đây là một tập hợp các claims được xác định trước không bắt buộc nhưng được khuyến nghị, để cung cấp một tập hợp các claims hữu ích, có thể tương tác Thường là: iss (nhà phát hành), exp (thời gian hết hạn), sub (chủ đề), aud (audience) và những thứ khác

- Public claims: Chúng có thể được xác định theo ý muốn của những người sử dụng JWT

- Private claims: Đây là các claims tùy chỉnh được tạo để chia sẻ thông tin giữa các bên đồng ý sử dụng chúng và không phải là các registered hay public claims

Hình 5: Ví dụ về Payload của JWT

với cập nhật phần Payload kèm theo cùng một chuỗi secret

1.5.3 Ưu điểm của JWT

- Sử dụng an toàn hơn nhờ vào thuật toán HMAC, dễ dàng chia sẻ

- Phổ biến hơn bởi bộ phận phân tích cú pháp JSON không hề xa lạ trong các ngôn ngữ lập trình khi chúng có thể tạo ra bản đồ trực tiếp hướng đến nhiều đối tượng khác nhau

- Nhỏ gọn hơn nhiều XML khác, chúng được mã hóa thông minh và được đánh giá là sự lựa chọn cực kỳ ấn tượng trong môi trường làm việc

- Xử lý một cách nhanh gọn, dễ dàng trong các nền tảng internet, bởi thế người dùng có thể kết nối bất cứ trên thiết bị nào, kể cả là những thiết bị di động cá nhân

1.6 AWS S3 BUCKET 1.6.1 AWS S3 là gì?

Amazon S3 là viết tắt của cụm từ Amazon Simple Storage Service: Là dịch vụ đám mây lưu trữ do đó bạn có thể tải lên các tệp, các tài liệu, các dữ liệu tải về của người dùng hoặc các bản sao lưu

1.6.2 Cách tổ chức dữ liệu của AWS S3

Dữ liệu trên S3 được tổ chức dưới dạng bucket

Hình 6: Tổ chức dữ liệu trên AWS S3

1 Bucket là một đơn vị lưu trữ logic trong S3, chứa các đối tượng bao gồm dữ liệu và siêu dữ liệu

Trước khi thêm bất kì dữ liệu nào lên S3, cần phải tạo 1 bucket nơi sẽ được sử dụng để lưu trữ dữ liệu

1.7 REACTJS

1.7.1 Giới thiệu về ReactJS

ReactJS là thư viện JavaScript được sử dụng để xây dựng các thành phần UI có thể tái sử dụng Theo tài liệu chính thức của React, sau đây là định nghĩa:

React là một thư viện để xây dựng giao diện người dùng có thể kết hợp Nó khuyến khích việc tạo ra các thành phần giao diện người dùng có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời gian Rất nhiều người sử dụng React làm V (View) trong

MVC React trừu tượng hóa DOM khỏi bạn, cung cấp mô hình lập trình đơn giản hơn và hiệu suất tốt hơn React cũng có thể hiển thị trên máy chủ bằng Node và nó có thể cung cấp năng lượng cho các ứng dụng gốc bằng React Native React triển khai luồng dữ liệu phản ứng một chiều, điều này giúp giảm bớt phần soạn sẵn và dễ lý luận hơn so với ràng buộc dữ liệu truyền thống

1.7.2 Các thành phần của React:

JSXlà 1 cú pháp mở rộng cho JavaScript, là kết hợp của JavaScript và XML Nó chuyển đổi cú pháp dạng gần như XML về thành JavaScript, giúp chúng ta có thể code ReactJS bằng cú pháp của XML thay vì phải dùng JavaScript

ra các mã html thuần, 1 điều quan trọng khác đó là nó cho phép ta chia nhỏ đoạn code của UI thành những phần độc lập với nhau, với mục đích để tiện cho việc quản lý và tái sử dụng Trong React tên của Component sẽ được dùng để làm tên thẻ và cách sử dụng tương tự với các thẻ tag trong html

Component Nếu coi Component như là đối tượng trong lập trình OOP thì Props giống như là những miêu tả về tính chất, đặc trưng của 1 đối tượng Để định nghĩa Props thì ta khai báo chúng ở bên trong dấu {} của Component

Trong React, State được dùng để biểu diễn trạng thái của Component Tức là giá trị của State có thể thay đổi được, trái ngược hoàn toàn với Props là 1 giá trị bất biến

Luồng dữ liệu một chiều và Flux – React triển khai luồng dữ liệu một chiều giúp dễ dàng suy luận về ứng dụng của mình Flux là một mẫu giúp giữ dữ liệu của không theo hướng

1.7.3 Ưu và nhược điểm của ReactJS

Ưu điểm của React:

- Sử dụng DOM ảo là một đối tượng JavaScript Điều này sẽ cải thiện hiệu suất ứng dụng, vì DOM ảo JavaScript nhanh hơn DOM thông thường

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

- Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn debug code dễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường

- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về

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

- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi

- Có thể được sử dụng trên máy khách và máy chủ cũng như với các khuôn khổ khác

- Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì các ứng dụng lớn hơn

Nhược điểm:

- Chỉ bao gồm tầng View của ứng dụng, do đó vẫn cần chọn các công nghệ khác để có được bộ công cụ hoàn chỉnh để phát triển

- Sử dụng khuôn mẫu nội tuyến và JSX, điều này có vẻ khó xử đối với một số

1.8 REDUX

1.8.1 Giới thiệu về Redux

Redux là một thư viện quản lý trạng thái phục vụ cho ứng dụng javascript Chúng ta có thể sử dụng redux với các thư viện, framework giao diện như react, angular, vue hoặc javascript thuần Redux có kích thước nhỏ gọn (chỉ khoảng 2Kb) nhưng chứa một hệ sinh thái bổ trợ rất lớn

1.8.2 Nguyên tắc

Redux có 3 nguyên tắc chính, bao gồm:

- Nguồn duy nhất: Các trạng thái của ứng dụng sẽ được lưu trữ trong một đối tượng duy nhất, điều này giúp cho trạng thái ở các phần khác nhau của ứng dụng sẽ được đồng bộ với nhau, giúp ứng dụng dễ dàng được kiểm thử

- Trạng thái chỉ được đọc: Các trạng thái sẽ không thể bị chính sửa trực tiếp, cách duy nhất để thay đổi trạng thái là gửi đi một hành động cụ thể, vì vậy mà các thay đổi của trạng thái sẽ được diễn ra theo một trình tự nghiêm ngặt, vì vậy mà các thay đổi đó có thể được ghi nhận, lưu trữ và phát lại

- Những thay đổi về trạng thái được thực hiện bởi những hàm thuần tùy: Các reducer là những hàm thuần túy chỉ nhận vào trạng thái cũ và hành động và trả ra trạng thái mới Bởi vì các reducer chỉ là hàm nên ta dễ dàng kiểm soát thứ tự được gọi của chúng

1.8.3 Ưu điểm của Redux

Redux sở hữu những ưu điểm:

- Các trạng thái giữa các thành phần được chuyển đổi ổn định và dễ dàng - Tích hợp dễ dàng với React do có cùng cấu trúc Flux

- Dễ dàng bảo trì: Cách tổ chức cấu trúc mã của redux khiến cho ứng dụng viết bằng redux dễ bảo trì

- Dễ kiểm thử: Ứng dụng viết bằng redux được hỗ trợ công cụ Redux dev tool rất mạnh mẽ, có thể xem các hành động được thực hiện, trình chiếu lại các hành động đó tại một thời điểm bất kỳ

1.9 MATERIAL UI 1.9.1 Giới thiệu

Material UI là một thư viện các React Component đã được tích hợp thêm cả Google's Material Design Theo như giới thiệu trên trang chủ thì được xây dựng nhờ tình cảm với React và Google's Material Design Do đó mà phần hướng dẫn trên trang chủ của Material UI cũng đã nói nên sử dụng Material UI với React

Material UI đem đến cho bạn và trang web của bạn một giao diện hoàn toàn mới, với những button, textfield, toogle được design theo một phong cách mới lạ, thay vì việc nhà nhà người người dùng Bootstrap như hiện nay

1.9.2 Ưu điểm

- Material-UI cũng cấp khá đầy đủ các component để có thể tạo ra một trang web một cách nhanh chóng hơn, mà không phải đi ngồi css từng tí một - Tài liệu đa dạng, dễ đọc, dễ hiểu

1.9.3 Nhược điểm

- Khó custom theo ý muốn

- Phải install nhiều package, import nhiều khiến code trông rất dài, phức tạp

1.10 BOOTSTRAP 1.10.1 Giới thiệu

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,

1.10.2 Ưu điểm

- Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt

- Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị Iphones, tablets, và desktops Tính năng này khiến cho người dùng tiết kiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay

- Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với IE browser, Bootstrap chỉ hỗ trợ từ IE9 trở lên Điều này vô cùng dễ hiểu vì IE8 không support HTML5 và CSS3.

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

2.1 KHẢO SÁT HIỆN TRẠNG 2.1.1 Các website khảo sát

Unica là một trong những siêu thị học trực tuyến lớn nhất Việt Nam với hơn 200 khóa học chất lượng từ các chuyên gia, diễn giả hàng đầu Việt Nam trong đủ các lĩnh vực, cùng các giảng viên nhiều năm kinh nghiệm hướng dẫn chi tiết qua các khóa huấn luyện online, sự hỗ trợ online cũng là thế mạnh đưa các khóa học trên Unica gần gũi và dễ áp dụng hơn bao giờ hết

Ưu điểm:

- Chỉ cần thanh toán 1 lần là được sở hữu khóa học mãi mãi - Có thể học mọi lúc mọi nơi chỉ cần máy tính kết nối internet - Unica sẽ hoàn tiền nếu bạn không hài lòng

- Unica sẽ gửi mã kích hoạt khóa học đến người dùng hoàn toàn miễn phí

Nhược điểm:

- Đối với khóa học gốc (không khuyến mãi) thì giá thành tương đối cao

Hình 7: Giao diện website khảo sát Unica

2.1.1.2 F8-Học lập trình để đi làm

F8 là một website dạy lập trình miễn phí dành cho tất cả mọi người Với hệ thống khóa học lập trình đa dạng từ cơ bản đến nâng cao, F8 mang lại chất lượng hiệu quả học tập cực kì cao và được phần lớn đông đảo các bạn học sinh sinh viên ngành CNTT và ngoài ngành lựa chọn để học tập

Ưu điểm:

- Hầu hết các khóa học cơ bản đến nâng cao trên F8 đều miễn phí - Kiến thức được dạy trên F8 đều áp dụng khi đi làm

- Tài khoản được bảo mật tốt ở F8 không bắt buộc người dùng chia sẻ quá nhiều thông tin của bản thân và quảng cáo cho F8

Hình 8: Giao diện Website khảo sát F8 – Học lập trình để đi làm