Xây dựng ứng dụng web tạo đề thi và bài tập hỗ trợ dạy học trực tuyến bello quiz

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN

XÂY DỰNG ỨNG DỤNG WEB TẠO ĐỀ THI VÀ
BÀI TẬP HỖ TRỢ DẠY HỌC TRỰC TUYẾN
BELLO QUIZ

GVHD: ThS. MAI ANH THƠ
SVTH : LÊ VĂN CƯỜNG
TRẦN BẢO DUY

SKL011401

Tp. Hồ Chí Minh, tháng 07/2023


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM
🙞🕮🙜

LÊ VĂN CƯỜNG – 19110332
TRẦN BẢO DUY – 19110339

Đề tài:

XÂY DỰNG ỨNG DỤNG WEB

TẠO ĐỀ THI VÀ BÀI TẬP HỖ TRỢ
DẠY HỌC TRỰC TUYẾN
BELLO QUIZ
KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CƠNG NGHỆ THƠNG TIN
GIÁO VIÊN HƯỚNG DẪN
ThS. MAI ANH THƠ

KHÓA 2019 – 2023


ĐH SƯ PHẠM KỸ THUẬT TP. HCM
KHOA CNTT
*******

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ÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1: Lê Văn Cường

MSSV 1: 19110332

Họ và tên Sinh viên 2: Trần Bảo Duy

MSSV 2: 19110339

Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng ứng dụng web tạo đề thi và bài tập hỗ trợ dạy học trực tuyến
– Bello Quizz

Họ và tên Giáo viên hướng dẫn: ThS. Mai Anh Thơ
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:

2. Ưu điểm:

3. Khuyết điểm:

4. Đề nghị cho bảo vệ hay không?
5. Đánh giá loại:
6. Điểm:
Tp. Hồ Chí Minh, ngày

tháng

Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)

năm 2023


ĐH SƯ PHẠM KỸ THUẬT TP. HCM
KHOA CNTT
*******

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ÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Lê Văn Cường

MSSV 1: 19110332

Họ và tên Sinh viên 2: Trần Bảo Duy

MSSV 2: 19110339

Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng ứng dụng web tạo đề thi và bài tập hỗ trợ dạy học trực tuyến
– Bello Quizz
Họ và tên Giáo viên phản biện: TS. Lê Văn Vinh
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:

2. Ưu điểm:

3. Khuyết điểm:

4. Đề nghị cho bảo vệ hay không?
5. Đánh giá loại:
6. Điểm:
Tp. Hồ Chí Minh, ngày

tháng

Giáo viên phản biện
(Ký & ghi rõ họ tên)

năm 2023

LỜI CẢM ƠN
Lời đầu tiên, cho phép nhóm thực hiện đề tài được gửi lời cảm ơn đế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 cho sinh viên chúng em được học tập, trau dồi và tích lũy nền tảng
kiến thức vững chắc, phục vụ cho quá trình thực hiện đề tài này.
Bên cạnh đó, nhóm xin gửi lời cảm ơn chân thành và sâu sắc nhất đến ThS. Mai
Anh Thơ – giáo viên hướng dẫn nhóm thực hiện Khóa luận tốt nghiệp. Trong suốt q
trình thực hiện đề tài, cô đã tận tâm chỉ bảo nhiệt tình, kịp thời góp ý, sửa chữa để giúp
nhóm hồn thiện hơn.
Tuy nhiên, vì kiến thức là vơ tận. Đồng thời với các lý do khách quan như giới
hạn về mặt thời gian, số lượng công việc cần phải thực hiện là tương đối lớn đối với
nhóm 2 người. 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 hi vọng nhận được sự góp ý tận tình của q thầy (cơ), để từ đó có thể hồn
thiện đề tài một cách tốt nhất có thể.
Xin chân thành cảm ơn!
Nhóm thực hiện
Lê Văn Cường – 19110332
Trần Bảo Duy – 19110339

i


Trường ĐH Sư Phạm Kỹ Thuật TP.HCM
Khoa Công nghệ Thông tin

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP
Họ và tên Sinh viên 1: Lê Văn Cường

MSSV 1: 19110332

Họ và tên Sinh viên 2: Trần Bảo Duy

MSSV 2: 19110339

Thời gian làm khóa luận:
Chuyên ngành: Cơng nghệ phần mềm
Tên khóa luận tốt nghiệp: Xây dựng ứng dụng web tạo đề thi và bài tập hỗ trợ dạy
học trực tuyến – Bello Quizz
Giáo viên hướng dẫn: ThS. Mai Anh Thơ
Nhiệm vụ của khóa luận:
1. Tìm hiểu về các công nghệ: MongoDB, ExpressJS, NodeJS, ReactJS, Restful API,
Json Web Token.
2. Sử dụng Restful API, NodeJS, ExpressJS để xây dựng Backend, viết các API cho
các module trong hệ thống.
3. Sử dụng ReactJS, Redux, Material UI để xây dựng và xử lý giao diện Website cho
người dùng.
4. Sử dụng MongoDB để lưu trữ dữ liệu của người dùng trong hệ thống.
5. Sử dụng Json Web Token để xác thực và phân quyền cho hệ thống các API, đảm
bảo tính bảo mật cho hệ thống.
6. Tích hợp thanh tốn trực tuyến với VNPay, MoMo, đăng nhập bằng tài khoản
Google, Facebook.
Đề cương khóa luận:
PHẦN MỞ ĐẦU
1. Tính cấp thiết của đề tài
2. Mục đích của đề tài
3. Cách tiếp cận và phương pháp nghiên cứu
3.1. Đối tượng nghiên cứu
3.2. Phạm vi nghiên cứu

4. Ý nghĩa khoa học và thực tiễn
PHẦN NỘI DUNG
CHƯƠNG 1. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
1.1. Khảo sát hiện trạng
1.2. Xác định yêu cầu
CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
ii


2.1. Kiến trúc hệ thống
2.2. Các công nghệ áp dụng
CHƯƠNG 3. THIẾT KẾ PHẦN MỀM
3.1. Mơ hình hố u cầu
3.2. Lược đồ lớp
3.3. Thiết kế CSDL
CHƯƠNG 4. THIẾT KẾ GIAO DIỆN
4.1. Giao diện của Người dùng
4.2. Giao diện của Quản trị viên
CHƯƠNG 5. CÀI ĐẶT VÀ KIỂM THỬ
5.1. Cài đặt
5.2. Kiểm thử
PHẦN KẾT LUẬN
1. Kết quả đạt được
2. Ưu điểm
3. Nhược điểm
4. Hướng phát triển
TÀI LIỆU THAM KHẢO

iii

KẾ HOẠCH THỰC HIỆN
STT

Thời gian

Nhiệm vụ

Sản phẩm

Ghi chú

- Khảo sát hiện trạng của 5
trang web: TheExam,
1

13/03/2023

- Khảo sát hiện trạng.

Exam24, TestCenter, Azota,

19/03/2023

- Xác định yêu cầu.

Utex.
- Phân tích yêu cầu chức năng
cho hệ thống.

2

20/03/2023
26/03/2023

- Thiết kế lược đồ Use case.
- Thiết kế use case

- Viết đặc tả use case cho
từng chức năng.
- Xây dựng lược đồ lớp của

- Thiết kế cơ sở dữ
3

27/03/2023
09/04/2023

liệu.
- Thiết kế các lược
đồ tuần tự.

hệ thống.
- Xây dựng các lược đồ tuần
tự cho từng use case dựa
trên đặc tả.
- Thiết kế cơ sở dữ liệu.
- Phân tích và lựa chọn cơng
nghệ sử dụng để đáp ứng
u cầu hệ thống.

- Tìm hiểu cơ sở lý thuyết về

4

10/04/2023
16/04/2023

- Tìm hiểu cơ sở lý
thuyết.

ReactJS, Redux Toolkit,
MaterialUI để xây dựng
Frontend cho hệ thống.
- Tìm hiểu cơ sở lý thuyết về
MongoDB, ExpressJS,
NodeJS, Restful API để xây
dựng Backend cho hệ thống.
- Nghiên cứu cách xây dựng

5

17/04/2023
23/04/2023

- Tìm hiểu cơ sở lý
thuyết.

website hồn chỉnh bằng
cơng nghệ Mern stack.
- Tìm hiểu chức năng đăng

nhập với Google, Facebook.

iv


- Tìm hiểu cơng cụ thanh tốn
online VNPay và MoMo.
- Tiến hành triển

- Xây dựng các API xử lý các
chức năng theo use case đề

khai code server.
6

24/04/2023

- Tiến hành xây dựng

14/05/2023

giao diện và code

ra.
- Xây dựng các trang giao

xử lý phía front-

diện đảm nhận hiển thị các

end.

chức năng của hệ thống.

- Tích hợp xử lý giao
diện với các chức
7

15/05/2023
04/06/2023

- Các chức năng ở giao diện

năng của API.
- Điều chỉnh và hoàn
thiện các chức năng

gọi và nhận kết quả xử lý từ
các API tương ứng.

của hệ thống.
- Xây dựng kịch bản

8

05/06/2023
25/06/2023

kiểm thử.
- Tiến hành kiểm thử

ứng dụng và viết

26/06/2023
02/07/2023

- Hoàn thiện báo cáo.

Giáo viên hướng dẫn
(Ký và ghi rõ họ tên)

toàn ứng dụng.
- Tiến hành sửa lỗi dựa trên
kết quả kiểm thử.

báo cáo lỗi.
9

- Viết kịch bản kiểm thử cho

- Viết và hồn chỉnh bản báo
cáo.

Tp. Hồ Chí Minh, ngày tháng 7 năm 2023
Người viết đề cương
(Ký và ghi rõ họ tên)

v


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

Từ viết tắt

STT

Từ đầy đủ

1

CNTT

Công nghệ Thông tin

2

CSDL

Cơ sở dữ liệu

vi


MỤC LỤC
LỜI CẢM ƠN ...................................................................................................................i
ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP .................................................................. ii
KẾ HOẠCH THỰC HIỆN .............................................................................................iv
DANH MỤC TỪ VIẾT TẮT .........................................................................................vi
MỤC LỤC .................................................................................................................... vii
MỤC LỤC BẢNG ...........................................................................................................x
MỤC LỤC HÌNH ẢNH ...............................................................................................xiv
PHẦN MỞ ĐẦU .............................................................................................................1

1.

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

2.

MỤC TIÊU CỦA ĐỀ TÀI ..................................................................................1

3.

CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU .................................2

3.1.

Đối tượng nghiên cứu ......................................................................................2

3.2.

Phạm vi nghiên cứu .........................................................................................3

4.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN .........................................................3

PHẦN NỘI DUNG ..........................................................................................................4
CHƯƠNG 1. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU ...................4
1.1. KHẢO SÁT HIỆN TRẠNG .............................................................................4
1.1.1. TheExam....................................................................................................4
1.1.2. Exam24h ....................................................................................................5
1.1.3. TestCenter..................................................................................................6

1.1.4. Azota ..........................................................................................................7
1.1.5. Hệ thống dạy học số Utex .........................................................................8
1.1.6. Kết luận .....................................................................................................9
1.2. XÁC ĐỊNH YÊU CẦU ....................................................................................9
1.2.1. Yêu cầu chức năng ........................................................................................9
1.2.2. Yêu cầu phi chức năng ................................................................................13
vii


CHƯƠNG 2. CƠ SỞ LÝ THUYẾT ..........................................................................14
2.1. KIẾN TRÚC CỦA HỆ THỐNG ....................................................................14
2.1.1. Kiến trúc chung của hệ thống ..................................................................14
2.1.2. Cơng nghệ sử dụng ..................................................................................14
2.2. CÁC CƠNG NGHỆ ÁP DỤNG .....................................................................16
2.2.1. MONGODB ............................................................................................16
2.2.2. NODEJS ..................................................................................................18
2.2.3. EXPRESSJS ............................................................................................19
2.2.4. REACTJS ................................................................................................20
2.2.5. REDUX ...................................................................................................23
2.2.6. RESTFUL API ........................................................................................24
2.2.7. Các công nghệ khác .................................................................................25
CHƯƠNG 3. THIẾT KẾ PHẦN MỀM ....................................................................26
3.1. MƠ HÌNH HĨA U CẦU ..........................................................................26
3.1.1. Lược đồ Use case ....................................................................................26
3.1.2. Đặc tả lược đồ Use case ..........................................................................28
3.2. LƯỢC ĐỒ LỚP ............................................................................................107
3.3. THIẾT KẾ CSDL .........................................................................................108
3.3.1. Lược đồ thực thể ....................................................................................108
3.3.2. Mô tả chi tiết các bảng...........................................................................109
CHƯƠNG 4. THIẾT KẾ GIAO DIỆN ...................................................................120

4.1. Giao diện của người dùng ............................................................................120
4.1.1. Sơ đồ luồng màn hình (Screen Flow) ....................................................120
4.1.2. Chi tiết về Giao diện nền tối (Dark Theme) ..........................................124
4.1.3. Chi tiết giao diện ...................................................................................124
4.2. Giao diện của Quản trị viên ..........................................................................158
4.2.1. Sơ đồ luồng màn hình (Screen Flow) ....................................................158
viii


4.2.2. Chi tiết giao diện ...................................................................................159
CHƯƠNG 5. CÀI ĐẶT VÀ KIỂM THỬ ...............................................................164
5.1. CÀI ĐẶT ......................................................................................................164
5.1.1. Yêu cầu hệ thống ...................................................................................164
5.1.2. Cài đặt Backend .....................................................................................164
5.1.3. Cài đặt Frontend ....................................................................................164
5.2. KIỂM THỬ ..................................................................................................164
5.2.1. Các trường hợp kiểm thử .......................................................................164
5.2.2. Kết quả kiểm thử ...................................................................................166
PHẦN KẾT LUẬN .....................................................................................................179
1.

KẾT QUẢ ĐẠT ĐƯỢC ..................................................................................179

2.

ƯU ĐIỂM ........................................................................................................179

3.

NHƯỢC ĐIỂM ...............................................................................................180

4.

HƯỚNG PHÁT TRIỂN ..................................................................................180

ix


MỤC LỤC BẢNG
Bảng 1. Yêu cầu chức năng .............................................................................................9
Bảng 2. Yêu cầu phi chức năng .....................................................................................13
Bảng 3. Đặc tả Use case Đăng ký tài khoản ..................................................................28
Bảng 4. Đặc tả Use case Đăng nhập ..............................................................................31
Bảng 5. Đặc tả Use case Đăng xuất ...............................................................................35
Bảng 6. Đặc tả Use case Đặt lại mật khẩu .....................................................................36
Bảng 7. Đặc tả Use case Gửi lại đường dẫn kích hoạt ..................................................39
Bảng 8. Đặc tả Use case Thay đổi thông tin cá nhân ....................................................42
Bảng 9. Đặc tả Use case Thay đổi ảnh đại diện ............................................................44
Bảng 10. Đặc tả Use case Nâng cấp tài khoản lên Premium.........................................46
Bảng 11. Đặc tả Use case Change Password - Thay đổi mật khẩu ...............................48
Bảng 12. Đặc tả Use case Tạo khoá học mới ................................................................50
Bảng 13. Đặc tả Use case Cập nhật khoá học ...............................................................51
Bảng 14. Đặc tả Use case Tham gia khóa học ..............................................................53
Bảng 15. Đặc tả Use case Rời khỏi khoá học ................................................................55
Bảng 16. Đặc tả Use case Thêm học viên vào khố học ...............................................56
Bảng 17. Đặc tả Use case Xóa học viên khỏi khoá học ................................................58
Bảng 18. Đặc tả Use case Tạo đề thi .............................................................................59
Bảng 19. Đặc tả Use case Chỉnh sửa đề thi ...................................................................62
Bảng 20. Đặc tả Use case Xoá đề thi.............................................................................64
Bảng 21. Đặc tả Use case Tham gia bài thi ...................................................................65

Bảng 22. Đặc tả Use case Tạo câu hỏi mới ...................................................................68
Bảng 23. Đặc tả Use case Chỉnh sửa câu hỏi trong đề thi .............................................70
Bảng 24. Đặc tả Use case Xóa câu hỏi trong đề thi ......................................................72
Bảng 25. Đặc tả Use case Tạo câu hỏi cho đề thi từ File ..............................................73
Bảng 26. Đặc tả Use case Tạo ngân hàng câu hỏi mới .................................................75
Bảng 27. Đặc tả Use case Sửa ngân hàng câu hỏi .........................................................77
Bảng 28. Đặc tả Use case Xoá ngân hàng câu hỏi ........................................................79
Bảng 29. Đặc tả Use case Tạo bài tập mới ....................................................................81
Bảng 30. Đặc tả Use case Xem thống kê bài nộp của bài tập .......................................83
Bảng 31. Đặc tả Use case Sửa bài tập ...........................................................................84
x


Bảng 32. Đặc tả Use case Xóa bài tập trong khóa học ..................................................86
Bảng 33. Đặc tả Use case Chấm điểm bài nộp của bài tập ...........................................88
Bảng 34. Đặc tả Use case Nộp bài làm của bài tập .......................................................89
Bảng 35. Đặc tả Use case Sửa bài nộp của bài tập ........................................................91
Bảng 36. Đặc tả Use case Sửa bài nộp của bài tập ........................................................92
Bảng 37. Đặc tả Use case Tạo bài giảng .......................................................................93
Bảng 38: Đặc tả Usecase sửa bài giảng .........................................................................95
Bảng 39. Đặc tả Usecase Xoá bài giảng ........................................................................97
Bảng 40. Đặc tả Usecase Nạp tiền.................................................................................99
Bảng 41. Đặc tả Use case Xem thống kê khóa học .....................................................100
Bảng 42. Đặc tả Use case Quản lý khóa học ...............................................................101
Bảng 43. Đặc tả Use case Quản lý người dùng ...........................................................102
Bảng 44. Đặc tả Use case Chỉnh sửa quyền người dùng .............................................103
Bảng 45. Đặc tả Use case Thống kê doanh thu ...........................................................105
Bảng 46. Bảng Người dùng – User .............................................................................109
Bảng 47. Bảng Khóa học – Course .............................................................................110
Bảng 48. Bảng Câu hỏi - Question ..............................................................................111

Bảng 49. Bảng Câu trả lời – Answer ...........................................................................111
Bảng 50. Bảng Ngân hàng câu hỏi – Question_bank ..................................................112
Bảng 51. Bảng Đề thi - Exam ......................................................................................112
Bảng 52. Bảng Làm đề thi – Take_exam ....................................................................113
Bảng 53. Bảng Nhật ký bài thi – Exam_logs ..............................................................114
Bảng 54. Bảng Bài tập - Assignment ..........................................................................115
Bảng 55. Bài nộp - Submit_assignment ......................................................................116
Bảng 56. Bảng Hóa đơn - Bill .....................................................................................116
Bảng 57. Bảng Hóa đơn - Lesson ................................................................................117
Bảng 58. Bảng Hóa đơn - Lesson ................................................................................117
Bảng 59. Bảng Hóa đơn - Lesson ................................................................................118
Bảng 60. Bảng Hóa đơn - Lesson ................................................................................118
Bảng 61. Danh sách các giao diện của Người dùng ....................................................121
Bảng 62. So sánh thay đổi màu nền sáng và tối ..........................................................124
Bảng 63. Chi tiết giao diện Trang chủ .........................................................................124
xi


Bảng 64. Chi tiết giao diện trang Đăng ký ..................................................................125
Bảng 65. Chi tiết giao diện trang Đăng nhập ..............................................................126
Bảng 66. Chi tiết giao diện trang Thông tin cá nhân ...................................................127
Bảng 67. Chi tiết giao diện Menu ảnh đại diện ...........................................................128
Bảng 68. Chi tiết giao diện Nâng cấp tài khoản ..........................................................129
Bảng 69. Chi tiết giao diện trang Đổi mật khẩu ..........................................................129
Bảng 70. Chi tiết giao diện trang Danh sách khoá học ...............................................130
Bảng 71. Chi tiết giao diện trang Tạo khoá học mới...................................................131
Bảng 72. Chi tiết giao diện trang Danh sách đề thi .....................................................132
Bảng 73. Chi tiết giao diện trang Danh sách bài tập ...................................................133
Bảng 74. Chi tiết giao diện trang Danh sách học viên ................................................134
Bảng 75. Chi tiết giao diện trang Thêm học viên ........................................................135

Bảng 76. Chi tiết giao diện trang Tạo đề thi ...............................................................136
Bảng 77. Chi tiết giao diện trang Danh sách câu hỏi ..................................................137
Bảng 78. Chi tiết giao diện Tạo câu hỏi ......................................................................138
Bảng 79. Chi tiết giao diện Form Sửa câu hỏi ............................................................139
Bảng 80. Chi tiết giao diện Thêm câu hỏi bằng ngân hàng câu hỏi ............................139
Bảng 81. Chi tiết giao diện Thêm câu hỏi bằng File câu hỏi ......................................140
Bảng 82. Chi tiết giao diện trang Thống kê kết quả đề thi ..........................................141
Bảng 83. Chi tiết giao diện trang Tạo bài tập mới ......................................................142
Bảng 84. Chi tiết giao diện trang Danh sách bài nộp ..................................................143
Bảng 85. Chi tiết giao diện Hộp thoại chấm điểm bài nộp .........................................144
Bảng 86. Chi tiết giao diện thống kê khoá học ...........................................................145
Bảng 87. Chi tiết giao diện thống kê khoá học ...........................................................145
Bảng 88. Chi tiết giao diện trang Danh sách đề thi .....................................................146
Bảng 89. Chi tiết giao diện trang Danh sách bài tập ...................................................146
Bảng 90. Chi tiết giao diện trang Làm đề thi ..............................................................147
Bảng 91. Chi tiết giao diện trang Kết quả làm đề thi ..................................................148
Bảng 92. Chi tiết giao diện trang Xem lại đề thi .........................................................149
Bảng 93. Chi tiết giao diện trang Nộp bài làm cho bài tập .........................................150
Bảng 94. Chi tiết giao diện trang Sửa bài nộp .............................................................150
Bảng 95. Chi tiết giao diện thống kê khoá học ...........................................................151
xii


Bảng 96. Chi tiết giao diện tham gia vào khoá học .....................................................152
Bảng 97. Chi tiết giao diện trang Tạo bài tập mới ......................................................153
Bảng 98. Chi tiết giao diện trang Thêm bài giảng.......................................................154
Bảng 99. Chi tiết giao diện trang Chỉnh sửa bài giảng ................................................155
Bảng 100. Chi tiết giao diện trang Nạp tiền ................................................................156
Bảng 101. Chi tiết giao diện trang Rút tiền .................................................................156
Bảng 102. Chi tiết giao diện trang Tìm kiếm khố học ..............................................157

Bảng 103. Danh sách giao diện của Quản trị viên ......................................................158
Bảng 104. Chi tiết giao diện Sidebar dạng mở rộng ...................................................159
Bảng 105. Chi tiết giao diện trang Tổng quan người dùng .........................................160
Bảng 106. Chi tiết giao diện trang Phân quyền người dùng .......................................161
Bảng 107. Chi tiết giao diện trang Quản lý khoá học .................................................162
Bảng 108. Các trường hợp kiểm thử ...........................................................................164
Bảng 109. Kiểm thử chức năng Đăng ký bằng Google ...............................................166
Bảng 110. Kiểm thử chức năng Chỉnh sửa thông tin cá nhân .....................................166
Bảng 111. Kiểm thử chức năng cập nhật thông tin cá nhân ........................................167
Bảng 112. Kiểm thử chức năng Tạo khóa học ............................................................168
Bảng 113. Kiểm thử chức năng tạo đề thi trong khóa học ..........................................169
Bảng 114. Kiểm thử chức năng thêm học viên vào Khóa học ....................................170
Bảng 115. Kiểm thử chức năng tạo mới Ngân hàng câu hỏi trong khóa học .............171
Bảng 116. Kiểm thử chức năng tạo bài tập trong khóa học ........................................172
Bảng 117. Kiểm thử chức năng làm bài thi .................................................................173
Bảng 118. Kiểm thử chức năng nộp bài tập ................................................................174
Bảng 119. Kiểm thử chức năng tạo bài giảng trong khóa học ....................................175
Bảng 120. Kiểm thử chức năng cập nhật nội dung bài giảng trong khóa học ............176
Bảng 121. Kiểm thử chức năng xóa bài giảng trong khóa học ...................................177

xiii


MỤC LỤC HÌNH ẢNH
Hình 1. Trang chủ Exam24h ...........................................................................................5
Hình 2. Trang chủ website TestCenter.vn .......................................................................6
Hình 3. Trang chủ Azota.vn ............................................................................................7
Hình 4. Trang chủ Utex ...................................................................................................8
Hình 5. Kiến trúc chung của hệ thống ...........................................................................14
Hình 6. DOM ảo trong ReactJS .....................................................................................21

Hình 7. Hoạt động của Redux .......................................................................................23
Hình 8. Use case tổng quan người dùng (User side) .....................................................26
Hình 9. Use case tổng quan người dùng (User side) .....................................................27
Hình 10. Use case tổng quan (Admin side) ...................................................................28
Hình 11. Lược đồ tuần tự Đăng ký tài khoản ................................................................31
Hình 12. Lược đồ tuần tự Đăng nhập ............................................................................34
Hình 13. Lược đồ tuần tự Đăng nhập ............................................................................35
Hình 14. Lược đồ tuần tự Đăng xuất .............................................................................36
Hình 15. Lược đồ tuần tự Đặt lại mật khẩu ...................................................................39
Hình 16. Lược đồ tuần tự Gửi lại đường dẫn kích hoạt ................................................42
Hình 17. Lược đồ tuần tự Cập nhật thông tin cá nhân ..................................................44
Hình 18. Lược đồ tuần tự Cập nhật ảnh đại diện ..........................................................46
Hình 19. Lược đồ tuần tự Nâng cấp tài khoản ..............................................................47
Hình 20. Lược đồ tuần tự Đổi mật khẩu ........................................................................49
Hình 21. Lược đồ tuần tự Tạo khố học ........................................................................51
Hình 22. Lược đồ tuần tự Chỉnh sửa khố học..............................................................53
Hình 23. Lược đồ tuần tự Tham gia khố học ...............................................................55
Hình 24. Lược đồ tuần tự Rời khỏi khố học ................................................................56
Hình 25. Lược đồ tuần tự Thêm học viên vào khoá học ...............................................58
Hình 26. Lược đồ tuần tự Xố học viên khỏi khố học ................................................59
Hình 27. Lược đồ tuần tự Tạo đề thi mới ......................................................................61
Hình 28. Lược đồ tuần tự Cập nhật đề thi .....................................................................64
Hình 29. Lược đồ tuần tự Xố đề thi .............................................................................65
Hình 30. Lược đồ tuần tự Tham gia làm đề thi .............................................................68
Hình 31. Lược đồ tuần tự Tạo câu hỏi...........................................................................70
xiv


Hình 32. Lược đồ tuần tự Cập nhật câu hỏi ..................................................................72
Hình 33. Lược đồ tuần tự Xố câu hỏi trong đề thi.......................................................73

Hình 34. Lược đồ tuần tự Tạo ngân hàng câu hỏi .........................................................75
Hình 35. Lược đồ tuần tự Tạo ngân hàng câu hỏi .........................................................77
Hình 36. Lược đồ tuần tự Cập nhật ngân hàng câu hỏi .................................................79
Hình 37. Lược đồ tuần tự Xố ngân hàng câu hỏi ........................................................80
Hình 38. Lược đồ tuần tự Tạo bài tập ...........................................................................82
Hình 39. Lược đồ tuần tự Lấy thơng tin bài tập ............................................................84
Hình 40. Lược đồ tuần tự Cập nhật thơng tin bài tập ....................................................86
Hình 41. Lược đồ tuần tự Xố bài tập ...........................................................................87
Hình 42. Lược đồ tuần tự Chấm điểm bài nộp ..............................................................89
Hình 43. Lược đồ tuần tự Tạo bài nộp cho bài tập ........................................................90
Hình 44. Lược đồ tuần tự Cập nhật bài nộp cho bài tập ................................................92
Hình 45. Lược đồ tuần tự Xố bài nộp của bài tập .......................................................93
Hình 46. Lược đồ tuần tự Tạo bài giảng .......................................................................95
Hình 47. Lược đồ tuần tự Sửa bài giảng .......................................................................97
Hình 48. Lược đồ tuần tự Xố bài giảng .......................................................................98
Hình 49. Lược đồ tuần tự Nạp tiền ..............................................................................100
Hình 50. Lược đồ tuần tự Thống kê khố học .............................................................101
Hình 51. Lược đồ tuần tự Quản lý khố học ...............................................................102
Hình 52. Lược đồ tuần tự Thống kê người dùng .........................................................103
Hình 53. Lược đồ tuần tự Cập nhật quyền người dùng ...............................................104
Hình 54. Lược đồ tuần tự Thống kê doanh thu ...........................................................106
Hình 55. Lược đồ lớp ..................................................................................................107
Hình 56. Lược đồ thực thể ...........................................................................................108
Hình 57. Screen Flow của Khách ................................................................................120
Hình 58. Screen Flow của Giáo viên ...........................................................................120
Hình 59. Screen Flow của Học viên ............................................................................121
Hình 60. Giao diện Trang chủ .....................................................................................124
Hình 61. Giao diện trang Đăng ký...............................................................................125
Hình 62. Giao diện trang Đăng nhập ...........................................................................126
Hình 63. Giao diện trang Thơng tin cá nhân ...............................................................127

xv


Hình 64. Giao diện Menu ảnh đại diện........................................................................128
Hình 65. Giao diện Nâng cấp tài khoản ......................................................................129
Hình 66. Giao diện Đổi mật khẩu ................................................................................129
Hình 67. Giao diện Danh sách khóa học .....................................................................130
Hình 68. Giao diện Tạo khóa học ................................................................................131
Hình 69. Giao diện Danh sách đề thi ...........................................................................132
Hình 70. Giao diện Danh sách bài tập .........................................................................133
Hình 71. Giao diện Danh sách học viên ......................................................................134
Hình 72. Giao diện Thêm học viên .............................................................................135
Hình 73. Giao diện Tạo đề thi .....................................................................................135
Hình 74. Giao diện Danh sách câu hỏi ........................................................................137
Hình 75. Giao diện Tạo câu hỏi...................................................................................138
Hình 76. Giao diện Sửa câu hỏi ...................................................................................139
Hình 77. Giao diện Thêm câu hỏi bằng ngân hàng câu hỏi ........................................139
Hình 78. Giao diện Thêm câu hỏi bằng File câu hỏi ...................................................140
Hình 79. Giao diện Thống kê kết quả đề thi ...............................................................141
Hình 80. Giao diện Tạo bài tập mới ............................................................................142
Hình 81. Giao diện Danh sách bài nộp ........................................................................143
Hình 82. Giao diện Chấm điểm bài nộp ......................................................................144
Hình 83. Giao diện Thống kê khố học .......................................................................144
Hình 84. Giao diện Thống kê của giáo viên ................................................................145
Hình 85. Giao diện Danh sách đề thi ...........................................................................145
Hình 86. Giao diện Danh sách bài tập .........................................................................146
Hình 87. Giao diện Trang làm đề thi ...........................................................................147
Hình 88. Giao diện Kết quả bài thi ..............................................................................148
Hình 89. Giao diện Xem lại đề thi ...............................................................................149
Hình 90. Giao diện Nộp bài làm cho bài tập ...............................................................149

Hình 91. Giao diện Nộp bài làm cho bài tập ...............................................................150
Hình 92. Giao diện Nộp bài làm cho bài tập ...............................................................150
Hình 93. Giao diện Thống kê của giáo viên ................................................................151
Hình 94. Giao diện Tham gia vào khố học ................................................................152
Hình 95. Giao diện Nội dung bài giảng .......................................................................153
xvi