Nhom01 CLCTV BaoCaoTLCN

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.
HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
NGÀNH CÔNG NGHỆ THÔNG TIN
---o0o---
TIỂU LUẬN CHUYÊN NGÀNH
XÂY DỰNG WEBSITE HỌC TIẾNG

ANH SỬ DỤNG MERN STACK
GVHD : TS. LÊ VĂN VINH
SINH VIÊN THỰC HIỆN MSSV
TRẦN PHƯƠNG LINH 18110146
VÕ NGỌC PHONG 18110174
Tp. Hồ Chí Minh, tháng 12 năm 2021

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO
NGÀNH CÔNG NGHỆ THÔNG TIN
---o0o---
TIỂU LUẬN CHUYÊN NGÀNH
XÂY DỰNG WEBSITE HỌC TIẾNG

ANH SỬ DỤNG MERN STACK
GVHD : TS. LÊ VĂN VINH
SINH VIÊN THỰC HIỆN MSSV
TRẦN PHƯƠNG LINH 18110146
VÕ NGỌC PHONG 18110174
Tp. Hồ Chí Minh, tháng 12 năm 2021

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
Giáo viên hướng dẫn
Lê Văn Vinh
NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
Giáo viên phản biện
LỜI CẢM ƠN
Lời đầu tiên, nhóm sinh viên thực hiện báo cáo xin gửi lời cảm ơn chân
thành nhất đến nhà trường và quý thầy cô. Trong quá trình học tập tại trường Đại
học Sư phạm kỹ thuật thành phố Hồ Chí Minh, quý thầy cô đã tạo nhiều điều kiện
cho chúng em được học tập tốt nhất, truyền đạt những kiến thức nền tảng và chuyên
ngành, cũng như hỗ trợ, giúp đỡ khi nhóm gặp khó khăn trong quá trình học tập và
trong lúc thực hiện đồ án
Tiếp đó, nhóm sinh viên thực hiện báo cáo xin gửi lời cảm ơn sâu sắc đến
thầy Lê Văn Vinh – người đã hướng dẫn, giúp đỡ cho nhóm trong suốt quá trình
thực hiện đề tài.
Do có những hạn chế về kiến thức và thiếu kinh nghiệm trong việc tìm hiểu
thực tế, vì thế nhóm chúng em còn có nhiều thiếu sót, nhóm hy vọng nhận được
những ý kiến đóng góp quý báu từ quý thầy cô để rút ra kinh nghiệm cho các đồ án
khác trong tương lai. Nhóm thực hiện xin chân thành cảm ơn.
Lời cuối cùng, nhóm chúng em xin chúc thầy cô có thật nhiều sức khỏe để
tiếp tục thực hiện sứ mệnh cao cả của mình đó chính là truyền đạt những kiến thức
bổ ích cho nhiều thế hệ sinh viên tiếp theo. Chúng em xin bày tỏ lòng biết ơn thầy
cô rất nhiều!
Nhóm thực hiện
Trần Phương Linh
Võ Ngọc Phong
TÓM TẮT
1. Các vấn đề nghiên cứu
- Tìm hiểu về các hệ thống tương tự, phân tích để tìm ra điểm mạnh và phù
hợp để áp dụng.
- Tìm hiểu về Reactjs, Framework Expressjs của Nodejs để giải quyết vấn đề
cung cấp dịch vụ API cho hệ thống học tiếng Anh trực tuyến.
2. Các vấn đề phát sinh
- Bảo mật là một trong những yêu cầu quan trọng cho website thực tế.
- Không thể lưu video, audio bằng Blob.
3. Các phương pháp giải quyết vấn đề
- Sử dụng JWT để cải thiện yêu cầu bảo mật cho website.
- Chuyển đổi video, audio về chuỗi base64 và lưu chuỗi đó vào database.
4. Kết quả đạt được
- Hệ thống học tiếng Anh trực tuyến bao gồm: giao diện cho phía người dùng
và giao diện phía người quản trị.
- Giao diện dễ sử dụng, thân thiện và thu hút người dùng.
- Dễ dàng quản lý, sửa chữa và mở rộng.
MỤC LỤC
MỤC LỤC BẢNG....................................................................................................I
MỤC LỤC HÌNH ẢNH..........................................................................................V
DANH MỤC CÁC TỪ VIẾT TẮT......................................................................XI
PHẦN MỞ ĐẦU......................................................................................................1
1.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI................................................................1
1.2. MỤC ĐÍCH CỦA ĐỀ TÀI...........................................................................1
1.3. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU...........................1
1.3.1. Đối tượng nghiên cứu................................................................................2
1.3.2. Phạm vi nghiên cứu...................................................................................2
1.4. PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN....................................3
1.5. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC.............................................................3
PHẦN NỘI DUNG..................................................................................................4
Chương 1. CƠ SỞ LÝ THUYẾT.......................................................................4
1.1. NODEJS [1].................................................................................................4
1.1.1. Định nghĩa về NodeJS...............................................................................4
1.1.2. Các tính năng của NodeJS.........................................................................4
1.1.3. Đối tượng và ứng dụng của NodeJS...........................................................5
1.1.4. Một số ưu, nhược điểm của NodeJS..........................................................5
1.1.5. Sử dụng NodeJS trong đề tài......................................................................6
1.2. EXPRESSJS.................................................................................................7
1.2.1. Định nghĩa về ExpressJS [2]......................................................................7
1.2.2. Tại sao nên sử dụng Expressjs trong lập trình web? [3].............................7
1.2.3. Những tính năng của Expressjs là gì?[3]....................................................8
1.2.4. Sử dụng ExpressJS trong đề tài..................................................................9
1.3. MONGODB [4]...........................................................................................9
1.3.1. Giới thiệu về MongoDB............................................................................9
1.3.2. Sử dụng MongoDB mang lại những lợi ích gì?.......................................10
1.3.3. MongoDB có những ưu và nhược điểm gì?.............................................11
1.3.4. Sử dụng MongoDB trong đề tài...............................................................13
1.4. RESTFUL API [5].....................................................................................13
1.4.1. Các khái niệm..........................................................................................13
1.4.2. Cách thức hoạt động................................................................................14
1.4.3. Sử dụng RESTFUL API trong đề tài........................................................14
1.5. REACTJS...................................................................................................14
1.5.1. Reactjs là gì [6]........................................................................................14
1.5.2. Đặc trưng của ReactJS [7]........................................................................15
1.5.3. Sử dùng ReactJS trong đề tài...................................................................17
1.6. JSON WEB TOKEN [8]............................................................................17
1.6.1. Định nghĩa JSON Web Token..................................................................17
1.6.2. Cấu trúc của một JWT.............................................................................17
1.6.3. Flow hệ thống sử dụng JWT....................................................................19
1.6.4. Hệ thống Verify chuỗi JWT thế nào?.......................................................20
1.6.5. Khi nào sử dụng JWT?.............................................................................21
1.6.6. Sử dụng JSON Web Token trong hệ thống..............................................21
Chương 2. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU............21
2.1. KHẢO SÁT HIỆN TRẠNG......................................................................21
2.1.1. Duolingo..................................................................................................21
2.1.2. Elllo.........................................................................................................22
2.1.3. BBC English............................................................................................23
2.1.4. Voca.vn....................................................................................................24
2.1.5. Busuu.......................................................................................................26
2.1.5.1.Các chức năng chính...............................................................................26
2.1.6. Kết luận....................................................................................................27
2.2. XÁC ĐỊNH YÊU CẦU..............................................................................27
2.2.1. Yêu cầu chức năng...................................................................................27
2.2.2. Yêu cầu phi chức năng.............................................................................30
2.3. MÔ HÌNH HÓA YÊU CẦU......................................................................31
2.3.1. Lược đồ Usecase......................................................................................31
2.4. MÔ TẢ USECASE....................................................................................33
2.4.1. Chức năng của “Khách vãng lai”.............................................................33
2.4.2. Chức năng của “Người dùng”..................................................................36
2.4.3. Chức năng của “Người tạo nội dung”......................................................55
2.4.4. Chức năng của “Người quản trị”..............................................................90
Chương 3. THIẾT KẾ PHẦN MỀM.............................................................104
3.1. LƯỢC ĐỒ LỚP.......................................................................................104
3.2. LƯỢC ĐỒ TUẦN TỰ.............................................................................104
3.2.1. Khách vãng lai.......................................................................................104
3.2.2. Người dùng............................................................................................105
3.2.3. Người tạo nội dung................................................................................112
3.2.4. Người quản trị........................................................................................126
3.3. THIẾT KẾ CƠ SỞ DỮ LIỆU..................................................................132
3.3.1. Lược đồ cơ sở dữ liệu............................................................................133
3.3.2. Mô tả các bảng.......................................................................................133
3.4. THIẾT KẾ GIAO DIỆN..........................................................................138
3.4.1. Giao diện Người dùng và Khách vãng lai..............................................138
3.4.2. Giao diện Người quản trị và Người tạo nội dung...................................160
Chương 4. CÀI ĐẶT VÀ KIỂM THỬ..........................................................184
4.1. CÀI ĐẶT.................................................................................................184
4.1.1. Cài đặt ứng dụng....................................................................................184
4.1.2. Công cụ dùng trong dự án......................................................................185
4.1.3. Công nghệ dùng trong dự án..................................................................186
4.2. KIỂM THỬ..............................................................................................186
4.2.1. Các trường hợp kiểm thử.......................................................................186
4.2.2. Kết quả kiểm thử....................................................................................187
PHẦN KẾT LUẬN..............................................................................................204
5.1. KẾT QUẢ ĐẠT ĐƯỢC...........................................................................204
5.2. ƯU ĐIỂM................................................................................................204
5.3. NHƯỢC ĐIỂM........................................................................................204
5.4. HƯỚNG PHÁT TRIỂN...........................................................................204
TÀI LIỆU THAM KHẢO...................................................................................204
-
MỤC LỤC BẢNG
Bảng 1. Bảng chức năng của Người quản trị...........................................................28
Bảng 2. Bảng chức năng của Người tạo nội dung...................................................28
Bảng 3. Bảng chức năng của Người dùng được xác thực........................................29
Bảng 4. Bảng chức năng của Khách vãng lai..........................................................30
Bảng 5. Bảng mô tả chức năng Đăng ký.................................................................34
Bảng 6. Bảng mô tả chức năng đăng nhập..............................................................36
Bảng 7. Bảng mô tả chức năng đăng xuất...............................................................38
Bảng 8. Bảng mô tả chức năng học bảng phiên âm.................................................40
Bảng 9. Bảng mô tả chức năng học ngữ pháp.........................................................42
Bảng 10. Bảng mô tả chức năng học từ vựng..........................................................44
Bảng 11. Bảng mô tả chức năng học bài luyện nghe...............................................46
Bảng 12. Bảng mô tả chức năng đổi mật khẩu........................................................48
Bảng 13. Bảng mô tả chức năng Chỉnh sửa thông tin cá nhân................................50
Bảng 14. Bảng mô tả chức năng chơi trò chơi........................................................52
Bảng 15. Bảng mô tả chức năng xem bảng xếp hạng..............................................54
Bảng 16. Bảng mô tả chức năng Xem danh sách bài nghe......................................56
Bảng 17. Bảng mô tả chức năng thêm bài nghe......................................................58
Bảng 18. Bảng mô tả chức năng chỉnh sửa bài nghe...............................................60
Bảng 19. Bảng mô tả chức năng Xóa bài nghe........................................................63
Bảng 20. Bảng mô tả chức năng Xem danh sách ngữ pháp.....................................65
Bảng 21. Bảng mô tả chức năng them ngữ pháp.....................................................67
Bảng 22. Bảng mô tả chức năng Sửa ngữ pháp.......................................................70
Bảng 23. Bảng mô tả chức năng Xóa ngữ pháp......................................................73
Bảng 24. Bảng mô tả chức năng Xem danh sách từ vựng.......................................75
Bảng 25. Bảng mô tả chức năng Thêm từ vựng......................................................77
Bảng 26. Bảng mô tả chức năng Sửa từ vựng.........................................................80
I
Bảng 27. Bảng mô tả chức Xóa từ vựng.................................................................82
Bảng 28. Bảng mô tả chức năng Thêm bài trắc nghiệm..........................................84
Bảng 29. Bảng mô tả chức năng Thêm bài trắc nghiệm..........................................87
Bảng 30. Bảng mô tả chức năng Khóa tài khoản....................................................90
Bảng 31. Bảng mô tả chức năng Mở khóa tài khoản...............................................92
Bảng 32. Bảng mô tả chức năng phân quyền người dùng.......................................94
Bảng 33. Bảng mô tả chức năng Thêm người dùng................................................96
Bảng 34. Bảng mô tả chức năng chỉnh sửa người dùng..........................................98
Bảng 35. Bảng mô tả chức năng Xem danh sách người dùng...............................100
Bảng 36. Bảng mô tả chức năng Xem thống kê....................................................102
Bảng 37. Bảng Grammars.....................................................................................133
Bảng 38. Bảng Highscores....................................................................................134
Bảng 39. Bảng IPA...............................................................................................134
Bảng 40. Bảng Listenings.....................................................................................135
Bảng 41. Bảng Questions......................................................................................135
Bảng 42. Bảng Quizzes.........................................................................................136
Bảng 43. Bảng Users.............................................................................................136
Bảng 44. Bảng Words...........................................................................................137
Bảng 45. Bảng mô tả Giao diện Đăng nhập..........................................................139
Bảng 46. Bảng mô tả Giao diện Đăng ký..............................................................140
Bảng 47. Bảng mô tả giao diện Quên mật khẩu....................................................142
Bảng 48. Bảng mô tả giao diện Đặt lại mật khẩu..................................................142
Bảng 49. Bảng mô tả giao diện Trang chủ............................................................144
Bảng 50. Bảng mô tả giao diện chủ đề bài nghe...................................................146
Bảng 51. Bảng mô tả giao diện danh sách bài nghe..............................................146
Bảng 52. Bảng mô tả giao diện chi tiết bài nghe...................................................147
Bảng 53. Bảng mô tả giao diện cấp độ của ngữ pháp............................................148
II
Bảng 54. Bảng mô tả giao diện danh sách ngữ pháp của cấp dộ...........................149
Bảng 55. Bảng mô tả giao diện chi tiết ngữ pháp..................................................150
Bảng 56. Bảng mô tả giao diện chủ đề của từ vựng..............................................151
Bảng 57. Bảng mô tả giao diện danh sách từ vựng theo hai chế độ xem...............152
Bảng 58. Bảng mô tả giao diện danh sách phiên âm.............................................154
Bảng 59. Bảng mô tả giao diện chi tiết phiên âm..................................................155
Bảng 60. Bảng mô tả giao diện danh sách trò choie..............................................156
Bảng 61. Bảng mô tả giao diện Bảng xếp hạng.....................................................157
Bảng 62. Bảng mô tả giao dện trò chơi Hãy chọn từ đúng....................................158
Bảng 63. Bảng mô tả giao diện trò chơi Ghép từ..................................................159
Bảng 64. Bảng mô tả giao diện trò chơi Tay nhanh hơn nào.................................160
Bảng 65. Bảng mô tả Giao diện quản lý từ vựng..................................................161
Bảng 66. Bảng mô tả Giao diện Thêm từ vựng.....................................................162
Bảng 67. Bảng mô tả giao diện Sửa từ vựng.........................................................164
Bảng 68. Bảng mô tả giao diện quản lý bài nghe..................................................165
Bảng 69. Bảng mô tả giao diện Thêm bài nghe.....................................................167
Bảng 70. Bảng mô tả giao diện Sửa bài nghe........................................................168
Bảng 71. Bảng mô tả Giao diện quản lý bài trắc nghiệm......................................170
Bảng 72. Bảng mô tả giao diện chi tiết bài trắc nghiệm........................................171
Bảng 73. Bảng mô tả giao diện thêm câu hỏi........................................................172
Bảng 74. Bảng mô tả giao diện sửa câu hỏi..........................................................173
Bảng 75. Bảng mô tả giao diện quản lý ngữ pháp.................................................174
Bảng 76. Bảng mô tả giao diện chi tiết ngữ pháp..................................................175
Bảng 77. Bảng mô tả giao diện thêm ngữ pháp.....................................................176
Bảng 78. Bảng mô tả giao diện sửa ngữ pháp.......................................................178
Bảng 79. Bảng mô tả giao diện quản lý người dùng.............................................180
Bảng 80. Bảng mô tả giao diện chi tiết người dùng..............................................181
III
Bảng 81. Bảng mô tả giao diện thêm tài khoản.....................................................182
Bảng 82. Bảng mô tả giao diện sửa người dùng....................................................183
Bảng 83. Bảng mô tả giao diện trang chủ Admin..................................................184
Bảng 84. Bảng công cụ dùng trong dự án.............................................................185
Bảng 85. Bảng công nghệ dùng trong dự án.........................................................186
Bảng 86. Các trường hợp kiểm thử.......................................................................186
Bảng 87. Kết quả kiểm thử chức năng Đăng nhập................................................187
Bảng 88. Kết quả kiểm thử chức năng Đăng ký....................................................190
Bảng 89. Kết quả kiểm thử chức năng Thêm từ vựng...........................................196
Bảng 90. Kết quả kiểm thử chức năng Thêm người dùng.....................................201
IV
MỤC LỤC HÌNH ẢNH
Hình 1. Cấu trúc một API được xây dựng với ExpressJS.........................................7
Hình 2. Express.js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website. .9
Hình 3. MongoDB..................................................................................................10
Hình 4. Hình minh họa chức năng truy vấn cơ sở dữ liệu đặc biệt..........................11
Hình 5. Hình minh họa ưu điểm của MongoDB.....................................................12
Hình 6. Hình minh hoa nhược điểm của MongoDB...............................................13
Hình 7. JSX............................................................................................................. 15
Hình 8. Luồng dữ liệu một chiều............................................................................16
Hình 9. Virtual DOM..............................................................................................16
Hình 10. JSON Web Token....................................................................................17
Hình 11. JWT.........................................................................................................18
Hình 12. Header......................................................................................................18
Hình 13. JWT format..............................................................................................20
Hình 14. Màn hình trang chủ website Doulingo.....................................................22
Hình 15. Màn hình trang chủ website Ello..............................................................23
Hình 16. Màn hình trang chủ website BBC English...............................................24
Hình 17. Màn hình trang chủ website Voca.vn.......................................................25
Hình 18. Màn hình trang chủ website Busuu..........................................................26
Hình 19. Lược đồ chức năng Người quản trị và Người tạo nội dung......................32
Hình 20. Lược đồ chức năng của Khách vãng lai và Người dùng...........................33
Hình 21. Lược đồ chức năng Đăng ký....................................................................34
Hình 22. Lược đồ chức năng Đăng nhập................................................................36
Hình 23. Lược đồ chức năng Đăng xuất.................................................................38
Hình 24. Lược đồ chức năng học bảng phiên âm....................................................40
Hình 25. Lược đồ chức năng học ngữ pháp............................................................42
Hình 26. Lược đồ chức năng học từ vựng...............................................................44
V
Hình 27. Lược đồ chức năng học bài luyện nghe....................................................46
Hình 28. Lược đồ chức năng Đổi mật khẩu............................................................48
Hình 29. Lược đồ chức năng Chỉnh sửa thông tin cá nhân.....................................50
Hình 30. Lược đồ chức năng chơi trò chơi.............................................................52
Hình 31. Lược đồ chức năng Xem bảng xếp hạng..................................................54
Hình 32. Lược đồ chức năng Xem danh sách bài nghe...........................................56
Hình 33. Lược đồ chức năng Thêm tệp nghe..........................................................58
Hình 34. Lược đồ chức năng chỉnh sửa bài nghe....................................................60
Hình 35. Lược đồ chức năng Xóa bài nghe.............................................................63
Hình 36. Lược đồ chức năng Xem danh sách ngữ pháp..........................................65
Hình 37. Lược đồ chức năng Thêm ngữ pháp.........................................................67
Hình 38. Lược đồ chức năng Sửa ngữ pháp............................................................70
Hình 39. Lược đồ chức năng xóa ngữ pháp............................................................73
Hình 40. Lược đồ chức năng Xem danh sách từ vựng............................................75
Hình 41. Lược đồ chức năng Thêm từ vựng...........................................................77
Hình 42. Lược đồ chức năng Sửa từ vựng..............................................................80
Hình 43. Lược đồ chức năng Xóa từ vựng..............................................................82
Hình 44. Lược đồ chức năng Thêm bài trắc nghiệm...............................................84
Hình 45. Lược đồ chức năng Thêm bài trắc nghiệm...............................................87
Hình 46. Lược đồ chức năng Khóa tài khoản..........................................................90
Hình 47. Lược đồ chức năng Mở khóa tài khoản....................................................92
Hình 48. Lược đồ chức năng Phân quyền người dùng............................................94
Hình 49. Lược đồ chức năng Thêm người dùng.....................................................96
Hình 50. Lược đồ chức năng Chỉnh sửa người dùng..............................................98
Hình 51. Lược đồ chức năng Xem danh sách người dùng....................................100
Hình 52. Lược đồ chức năng Xem thống kê.........................................................102
Hình 53. Lược đồ lớp website Learning English..................................................104
VI
Hình 54. Lược đồ tuần tự chức năng Đăng ký......................................................105
Hình 55. Lược đồ tuần tự chức năng Đăng nhập..................................................106
Hình 56. Lược đồ tuần tự chức năng Đăng xuất...................................................107
Hình 57. Lược đồ tuần tự chức năng Học phiên âm..............................................108
Hình 58. Lược đồ tuần tự chức năng Học ngữ pháp.............................................109
Hình 59. Lược đồ tuần tự chức năng Học từ vựng................................................110
Hình 60. Lược đồ tuần tự chức năng Học bài nghe...............................................111
Hình 61. Lược đồ tuần tự chức năng Đổi mật khẩu..............................................112
Hình 62. Lược đồ tuần tự chức năng Xem danh sách bài nghe.............................113
Hình 63. Lược đồ tuần tự chức năng Thêm bài nghe............................................114
Hình 64. Lược đồ tuần tự chức năng Chỉnh sửa bài nghe.....................................115
Hình 65. Lược đồ tuần tự chức năng Xóa bài nghe...............................................116
Hình 66. Lược đồ tuần tự chức năng Xem danh sách ngữ pháp............................117
Hình 67. Lược đồ tuần tự chức năng Thêm ngữ pháp...........................................118
Hình 68. Lược đồ tuần tự chức năng Chỉnh sửa ngữ pháp....................................119
Hình 69. Lược đồ tuần tự chức năng Xóa ngữ pháp.............................................120
Hình 70. Lược đồ tuần tự chức năng Xem danh sách từ vựng..............................121
Hình 71. Lược đồ tuần tự chức năng Thêm từ vựng.............................................122
Hình 72. Lược đồ tuần tự chức năng Chỉnh sửa từ vựng......................................123
Hình 73. Lược đồ tuần tự chức năng Xóa từ vựng................................................124
Hình 74. Lược đồ tuần tự chức năng Thêm bài trắc nghiệm.................................125
Hình 75. Lược đồ tuần tự chức năng Chỉnh sửa bài trắc nghiệm..........................126
Hình 76. Lược đồ tuần tự chức năng Khóa tài khoản............................................127
Hình 77. Lược đồ tuần tự chức năng Mở khóa tài khoản......................................128
Hình 78. Lược đồ tuần tự chức năng Phân quyền người dùng..............................129
Hình 79. Lược đồ tuần tự chức năng Thêm người dùng.......................................130
Hình 80. Lược đồ tuần tự chức năng Chỉnh sửa người dùng.................................131
VII
Hình 81. Lược đồ tuần tự Xem danh sách người dùng..........................................132
Hình 82. Lược đồ tuần tự chức năng Xem thống kế.............................................132
Hình 83. Lược đồ Cơ sở dữ liệu............................................................................133
Hình 84. Giao diện Đăng nhập..............................................................................139
Hình 85. Giao diện Đăng ký.................................................................................140
Hình 86. Giao diện quên mật khẩu........................................................................141
Hình 87. Giao diện Đặt lại mật khẩu.....................................................................142
Hình 88. Giao diện trang chủ................................................................................144
Hình 89. Giao diện chủ đề bài nghe......................................................................145
Hình 90. Giao diện Danh sách bài nghe của một chủ đề.......................................146
Hình 91. Giao diện chi tiết bài nghe.....................................................................147
Hình 92. Giao diện cấp độ của ngữ pháp..............................................................148
Hình 93. Giao diện Danh sách ngữ pháp của cấp độ.............................................149
Hình 94. Giao diện chi tiết ngữ pháp....................................................................150
Hình 95. Giao diện chủ đề của từ vựng.................................................................151
Hình 96. Danh sách từ vựng theo chế độ gallery..................................................152
Hình 97. Danh sách từ vựng theo chế độ slide......................................................152
Hình 98. Giao diện Danh sách phiên âm...............................................................154
Hình 99. Giao diện Chi tiết phiên âm....................................................................155
Hình 100. Giao diện Danh sách các trò chơi.........................................................156
Hình 101. Giao diện Bảng xếp hạng.....................................................................157
Hình 102. Giao diện trò chơi Hãy chọn từ đúng...................................................158
Hình 103. Giao diện trò chơi Ghép từ...................................................................159
Hình 104. Giao diện trò chơi Tay nhanh hơn não.................................................160
Hình 105. Giao diện Quản lý từ vựng...................................................................161
Hình 106. Giao diện Thêm từ vựng......................................................................162
Hình 107. Giao diện Sửa từ vựng.........................................................................164
VIII
Hình 108. Giao diện Quản lý bài nghe..................................................................165
Hình 109. Giao diện Thêm bài nghe.....................................................................167
Hình 110. Giao diện Sửa bài nghe........................................................................168
Hình 111. Giao diện Quản lý bài trắc nghiệm.......................................................170
Hình 112. Giao diện Chi tiết bài trắc nghiệm........................................................171
Hình 113. Giao diện Thêm câu hỏi.......................................................................172
Hình 114. Giao diện Sửa câu hỏi..........................................................................173
Hình 115. Giao diện Quản lý ngữ pháp................................................................174
Hình 116. Giao diện Chi tiết ngữ pháp.................................................................175
Hình 117. Giao diện Thêm ngữ pháp....................................................................176
Hình 118. Giao diện Sửa ngữ pháp.......................................................................178
Hình 119. Giao diện Quản lý người dùng.............................................................180
Hình 120. Giao diện Chi tiết người dùng..............................................................181
Hình 121. Giao diện thêm người dùng..................................................................182
Hình 122. Giao diện sửa người dùng....................................................................183
Hình 123. Giao diện Trang chủ Admin.................................................................184
Hình 124. Kết quả kiểm thử test case TC_SI_01..................................................189
Hình 127. Kết quả kiểm thử test case TC_SU_01.................................................194
Hình 133. Kết quả kiểm thử test case TC_AW_01...............................................200
IX
Hình 136. Kết quả kiểm thử test case TC_AU_01................................................203
Hình 137. Kết quả kiểm thử test case TC_AU_02................................................203
X
DANH MỤC CÁC TỪ VIẾT TẮT
API: Application Programming Interface
BSON: Binary JSON
CLI: Command line interface
DOM: Document Object Model
HTML: Hyper Text Markup Language
HTTP: Hyper Text Transfer Protocol
IDE: Integrated Development Environment
JSON: JavaScript Object Notation
JSON: JavaScript Object Notation
JSX: JavaScript + XML
JWT: JSON Web Token
MAC: Media Access Control
MERN STACK: bộ công nghệ mã nguồn mở liên quan đến JavaScript, bao gồm
các công nghệ: MongoDB, Express, React/React Native và Nodejs.
MIT: Massachusetts Institute of Technology
I/O: Input/Output
URL: Uniform Resource Locator
XML: Extensible Markup Language
XI
PHẦN MỞ ĐẦU
1.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong xu thế hội nhập kinh tế thế giới như hiện nay, ngôn ngữ được coi là một yếu
tố quan trong. Nó chính là công cụ để giúp cho mọi người dân tại các quốc gia khác
nhau có thể hiểu nhau, giao lưu kinh tế, văn hóa xã hội và cùng nhau phát triển. Tuy
nhiên, các quốc gia khác nhau có một ngôn ngữ khác nhau. Chỉnh vì vậy mà đã tạo
ra rào cản giữa các quốc gia dân tộc có sự bất đồng về ngôn ngữ. Trước xu thế toàn
cầu, hội nhập kinh tế sâu rộng như hiện nay cùng với nhu cầu hợp tác, giao lưu kinh
tế, văn hóa – xã hội giữa các quốc gia, đòi hỏi phải có một ngôn ngữ thống nhất làm
ngôn ngữ giao tiếp chung cho mọi người trên khắp thế giới. Theo các chuyên gia
ngôn ngữ học, tiếng Anh là một trong những ngôn ngữ dễ học và dễ giao tiếp nhất.
Ngoài ra, do sự ảnh hưởng các nước phát triển trong nhiều lĩnh vực, nên tiếng Anh
càng được sử dụng phổ biến hơn. Do đó, ngày nay, tiếng Anh được xem là một
ngôn ngữ chung, một hành lang quan trọng cho mọi người.
Tiếng Anh có vai trò vô cùng quan trọng, nó không chỉ là công cụ giao tiếp giữa
mọi người với nhau, mà tạo cơ hội thăng tiến cho những người đang làm việc, và
nhất là những người đang làm việc trong những doanh nghiệp nước ngoài, và còn là
một trong những điều kiện quyết định tương lai của hầu hết sinh viên khi tốt
nghiệp.
Nhận thấy được tầm quan trọng của tiếng Anh, nhóm chúng em đã quyết định
chọn đề tài “Xây dựng trang web học tiếng Anh sử dụng MERN STACK” để giúp
mọi người có thể học và rèn luyện tiếng Anh, củng cố thêm vốn từ vựng của mình.
1.2. MỤC ĐÍCH CỦA ĐỀ TÀI
Các mục tiêu của dự án nằm trong danh sách dưới đây:
- Phát triển hai mô-đun chính. Đầu tiên là hệ thống quản lý bao gồm các tính năng
cần thiết giúp quản trị viên và người tạo nội dung có thể quản lý dữ liệu của trang
web. Phần thứ hai tập trung vào trang web của người dùng, giúp người dùng có thể
luyện nghe, học, chơi các trò chơi nhỏ để củng cố thêm vốn từ vựng và rèn luyện kỹ
năng luyện nghe.
- Bên cạnh việc thực hiện chức năng chính, hệ thống phải đáp ứng các yêu cầu phi
chức năng như xác thực giữa người dùng và máy chủ, áp dụng phương pháp mã hóa
mật khẩu người dùng và thiết lập cơ chế phân quyền cho toàn hệ thống.
1
1.3. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
1.3.1. Đối tượng nghiên cứu
Đối với đề tài “Xây dựng trang web học tiếng Anh sử dụng MERN STACK”,
đối tượng nghiên cứu dựa trên những nhu cầu cần thiết phải học tiếng Anh. Đồng
thời kèm theo đó là các công nghệ áp dụng để tạo ra ứng dụng. Cụ thể như sau:
 Tập trung nghiên cứu Restful API, NodeJS, ExpressJS để xây dựng nên hệ
thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng nhất.
 Áp dụng cơ sở dữ liệu noSQL là MongoDB để lưu trữ dữ liệu người dùng
của hệ thống.
 Về phần bảo mật hệ thống, tiến hành nghiên cứu công nghệ Json Web Token
làm bảo mật cho hệ thống, tất cả các luồng dữ liệu vào ra đều được kiểm soát
thông qua Token. Người dùng bắt buộc phải đăng nhập vào hệ thống để có
một Token riêng và mỗi request từ phía người dùng đều phải thông qua một
“cánh cửa” Interceptor và Token là “chìa khóa”.
 Về phần hiển thị cho người sử dụng cuối nhóm chúng em tiến hành nghiên
cứu Framework ReactJS và một số thư viện được hỗ trợ cho ReactJS để xây
dựng và xử lý giao diện và cho người dùng sử dụng.
1.3.2. Phạm vi nghiên cứu
Đề tài “Xây dựng trang web học tiếng Anh sử dụng MERN STACK” chủ yếu
tập trung vào các chức năng cơ bản của một trang web học tiếng Anh trực tuyến bao
gồm 2 phần là phần Quản trị và phần Người dùng.
Trong phần Quản trị, tập trung vào các nghiệp vụ như:
 Quản lý tài khoản
 Quản lý bài nghe
 Quản lý ngữ pháp
 Quản lý từ vựng
 Quản lý bài trắc nghiệm
Trong phần Người dùng tập trung vào:
 Đăng ký
 Đăng nhập
2
 Học bài nghe
 Học ngữ pháp
 Học phát âm
 Học từ vựng
 Chơi trò chơi
1.4. PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN
Hầu hết các website học tiếng anh đã được xây dựng và ra mắt rất nhiều, có nhiều
tính năng từ cơ bản đến phức tạp. Tuy nhiên một số ứng dụng vẫn có những nhược
điểm sau:
- Có tính phí người dùng.
- Giao diện còn hơi khó sử dụng đối với một số người mới dùng lần đầu.
- Các trang web hầu như chỉ chuyên về một tính năng nhất định.
1.5. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Xây dựng một trang web học tiếng Anh trực tuyến với các tính năng cơ bản, đáp
ứng được nhu cầu học tiếng Anh cho người dùng.
3
PHẦN NỘI DUNG
Chương 1. CƠ SỞ LÝ THUYẾT
1.1. NODEJS [1]
1.3.3. Định nghĩa về NodeJS
NodeJS là một mã nguồn mở, đa nền tảng, chạy trên môi trường JavaSript, được
xây dựng trên V8 JavaScript engine của Chrome - V8 thực thi mã JavaScript bên
ngoài trình duyệt. Nó được tạo ra vào năm 2009 đi kèm với một lợi thế chính -
NodeJS cho phép thực hiện lập trình bất đồng bộ.
Ở chế độ đồng bộ thực thi từng dòng và tiến hành thực thi dòng tiếp theo khi
dòng hiện tại đã thực thi xong.
Khi bất đồng bộ thực thi tất cả dòng code cùng một lúc.
NodeJS là một nền tảng được xây dựng trên JavaScript runtime của Chrome với
mục đích xây dựng các ứng dụng mạng nhanh chóng và có thể mở rộng được một
cách dễ dàng hơn. NodeJS sử dụng mô hình I/O lập trình theo sự kiện, non-
blocking, do đó nodeJS khá gọn nhẹ và hiệu quả - công cụ hoàn hảo cho các ứng
dụng chuyên sâu về dữ liệu theo thời gian thực chạy trên các thiết bị phân tán.
NodeJS là môi trường runtime mã nguồn mở đa nền tảng, được sử dụng để phát
triển các ứng dụng mạng và ứng dụng server-side. Các ứng dụng NodeJS được viết
bằng JavaScript và có thể chạy trong NodeJS runtime trên OS X, Microsoft
Windows và Linux.
NodeJS cũng cung cấp một thư viện bao gồm rất nhiều các module JavaScript
khác nhau nhằm đơn giản hóa việc phát triển các ứng dụng web, qua đó giảm thiểu
tình trạng sử dụng quá nhiều Node.js.
1.3.4. Các tính năng của NodeJS
Lập trình hướng sự kiện và không đồng bộ: Toàn bộ API trong thư viện NodeJS đều
không đồng bộ, hay không bị chặn. Về cơ bản điều này có nghĩa là một server sử
dụng NodeJS sẽ không bao giờ chờ một API trả về dữ liệu. Server sẽ chuyển sang
API kế tiếp sau khi gọi API đó và cơ chế thông báo của Events trong NodeJS giúp
server nhận được phản hồi từ lần gọi API trước.
Cực kỳ nhanh chóng: Được xây dựng trên Công cụ JavaScript V8 của Google
Chrome, thư viện NodeJS có khả năng xử lý mã vô cùng nhanh.
4
Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng một mô
hình luồng đơn với vòng lặp sự kiện/event. Cơ chế event cho phép máy chủ phản
hồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các server
truyền thống hỗ trợ giới hạn các thread để xử lý yêu cầu. NodeJS sử dụng một
chương trình đơn luồng, cùng một chương trình có thể cung cấp dịch vụ cho một số
lượng yêu cầu lớn hơn so với các máy chủ truyền thống như Apache HTTP Server.
Không có buffer - Các ứng dụng NodeJS không có vùng nhớ tạm thời (buffer) cho
bất kỳ dữ liệu nào. Các ứng dụng này chỉ đơn giản xuất dữ liệu theo khối.
License - NodeJS được phát hành theo giấy phép MIT.
1.3.5. Đối tượng và ứng dụng của NodeJS
1.3.5.1. Đối tượng
Các công ty đang sử dụng Nodejs có thể kể đến một số tên tuổi lớn như eBay,
General Electric, GoDaddy, Microsoft, PayPal, Uber, Wikipin, Yahoo, và Yammer
1.3.5.2. Ứng dụng
- Hệ thống Notification - Giống như Facebook hay Twitter.
- Websocket server - Các máy chủ web socket như là Online Chat, Game
Server…
- Fast File Upload Client - Các chương trình upload file tốc độ cao.
- Ad Server - Các máy chủ quảng cáo.
- Cloud Services - Các dịch vụ đám mây.
- RESTful API - Những ứng dụng mà được sử dụng cho các ứng dụng khác
thông qua API.
- Any Real-time Data Application - Bất kỳ một ứng dụng nào có yêu cầu về
tốc độ thời gian thực.
- Ứng dụng Single Page Application (SPA) - Những ứng dụng này thường
request rất nhiều đến server thông qua AJAX
- Ứng dụng truy vấn tới NoSQL database - Như MongoDB, CouchDB, …
- Ứng dụng CLI - Các công cụ sử dụng command-line.
1.3.6. Một số ưu, nhược điểm của NodeJS
1.3.6.1. Ưu điểm
5
- Nhận và xử lý nhiều kết nối chỉ với một single-thread giúp hệ thống tốn ít
RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy
vấn.
- NodeJS tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ vì áp
dụng ưu điểm non-blocking I/O của Javascript.
- Với cơ chế event-driven, non-blocking I/O (Input/Output) và mô hình kết
hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Website làm bằng
JSON.
- Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh. Rất
phù hợp để áp dụng NodeJS để xây dựng các ứng dụng Single page
Application, các ứng dụng không muốn tải lại trang, gồm rất nhiều request từ
người dùng cần sự hoạt động nhanh, các **ứng dụng thời gian thực **như
ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter, …
- NodeJS sẽ tận dụng tối đa Unix để hoạt động. Tức là NodeJS có thể xử lý
hàng nghìn process và trả ra một luồng khiến cho hiệu xuất hoạt động đạt
mức tối đa nhất và tuyệt vời nhất.
- Streaming Data: Các web thông thường gửi HTTP request và nhận phản hồi
lại (Luồng dữ liệu). Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽ
xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt
động cho các luồng dữ liệu khác.
- Viết được cho cả 2 phía server và client. Chạy đa nền tảng trên Windows,
MAC hoặc Linux. Hơn nữa cộng đồng NodeJS rất lớn và hoàn toàn miễn
phí.
1.3.6.2. Nhược điểm
- Rất hạn chế khi áp dụng NodeJS khi xây dựng ứng dụng nặng, tốn tài
nguyên. Bởi vì NodeJS được viết bằng C++ & Javascript, nên phải thông qua
thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút.
- Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên host
không phải là điều dễ dàng.
- Thiếu sự kiểm duyệt chất lượng các module NodeJS.
1.3.7. Sử dụng NodeJS trong đề tài
Sử dụng NodeJS để làm môi trường xây dựng website bên phía server.
6
1.6. EXPRESSJS
1.4.1. Định nghĩa về ExpressJS [2]
ExpressJS là một framework được xây dựng trên nền tảng của NodeJS. Nó cung
cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. ExpressJS hỗ trợ các
method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.
Hình 1. Cấu trúc một API được xây dựng với ExpressJS
1.4.2. Tại sao nên sử dụng Expressjs trong lập trình web? [3]
1.4.2.1. Sự phổ biến của Javascript
Javascript là một ngôn ngữ lập trình được sử dụng rộng rãi hiện nay, dễ đọc
và được hỗ trợ ở mọi nơi. Mà Expressjs lại hỗ trợ Javascript, do đó nếu bạn đã biết
đến Javascript thì chắc chắn việc lập trình bằng Express.js là vô cùng đơn giản.
Ngay cả những người mới bắt đầu tham gia vào lĩnh vực phát triển web này cũng có
thể sử dụng Expressjs.
Javascript là ngôn ngữ lập trình dễ học với cả những người không có bất kỳ
kiến thức gì về ngôn ngữ lập trình khác. Chính vì tính phổ biến, dễ học và dễ sử
dụng này mà Express.js cho phép các tài năng trẻ tham gia và đạt được nhiều thành
công trong phát triển ứng dụng web.
1.4.2.2. Hỗ trợ xây dựng website một cách nhanh chóng
Thời gian chính là tài sản quý giá của bất kỳ doanh nghiệp nào. Hơn thế, nhiều lập
trình viên còn phải chịu áp lực xây dựng các ứng dụng web một cách hiệu quả trong
7
thời gian ngắn. Nhưng để thực hiện tốt công việc này cần rất nhiều thời gian và
Express.js chính là công cụ cứu cánh cho các nhà lập trình.
Express.js có thể giúp làm giảm một nửa thời gian viết mã mà vẫn xây dựng lên các
ứng dụng web hiệu quả. Không chỉ trợ giúp về mặt thời gian Expressjs còn làm
giảm những áp lực cần thiết để xây dựng với sự trợ giúp của các tính năng khác
nhau của nó. Express js còn cung cấp một phần mềm trung gian đảm nhận nhiệm vụ
đưa ra các quyết định để phản hồi chính xác những yêu cầu của khách hàng.
Nếu không có Express.js, các lập trình viên phải viết mã code riêng để xây dựng
nên thành phần định tuyến. Đó là một công việc vô cùng tẻ nhạt và tốn thời gian.
Express.js đã giúp cho công việc này trở nên đơn giản và hiệu quả hơn rất nhiều.
1.4.2.3. Express.js hoàn toàn miễn phí
Một trong những yếu tố để tổ chức, doanh nghiệp nên sử dụng công cụ, ứng
dụng nào chính là chi phí. Với một ứng dụng web với nhiều tính năng tuyệt vời như
vậy mà lại không tốn một chút kinh phí nào thì không có lý do gì để không sử dụng
nó.
1.4.3. Những tính năng của Expressjs là gì?[3]
- Phát triển máy chủ nhanh chóng: Expressjs cung cấp nhiều tính năng dưới
dạng các hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình. Điều này
đã loại bỏ nhu cầu viết mã từ đó tiết kiệm được thời gian.
- Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền
truy cập vào cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm
trung gian khác. Phần mềm Middleware này chịu trách nhiệm chính cho việc
tổ chức có hệ thống các chức năng của Express.js.
- Định tuyến - Routing: Express js cung cấp cơ chế định tuyến giúp duy trì
trạng thái của website với sự trợ giúp của URL.
- Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js cung
cấp cho phép các nhà xây dựng nội dung động trên các website bằng cách tạo
dựng các mẫu HTML ở phía máy chủ.
- Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể
thiết đi việc gỡ lỗi. Giờ đây với Expressjs việc gỡ lỗi đã trở nên dễ dàng hơn
nhờ khả năng xác định chính xác các phần ứng dụng web có lỗi.
8
Hình 2. Express.js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website
1.4.4. Sử dụng ExpressJS trong đề tài
ExpressJs được dùng để xây dựng các API bên phía server cho website.
1.7. MONGODB [4]
1.5.1. Giới thiệu về MongoDB
MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, được thiết kế
hướng theo đối tượng và hỗ trợ trên đa nền tảng. Các bảng MongoDB có cấu trúc
linh hoạt, cho phép dữ liệu không cần tuân theo bất kỳ dạng cấu trúc nào.
MongoDB hoạt động trên collection, hướng tài liệu kiểu JSON thay cho bảng để
tăng tốc độ truy vấn. MongoDB có chức năng định hướng tài liệu cung cấp, hiệu
suất cao, tính sẵn sàng cao và khả năng mở rộng dễ dàng.
9
Hình 3. MongoDB
Collection trong MongoDB về bản chất thì có thể hiểu là nhóm các
document, một collection sẽ chứa các tập document.
Ở MongoDB, các collection không theo bản chất cũ vì các document không
tuân theo cấu trúc, nghĩa là các document trong một collection không có cấu trúc cố
định như nhau (không cần chia ra các cột để lưu trữ), vậy thì không cần phải định
nghĩa thành phần các cột trong một collection như trong cơ sở dữ liệu quan hệ.
Giải thích thêm về NoSQL được nhắc đến ở khái niệm MongoDB
NoSQL là cơ sở dữ liệu được xây dựng dành riêng cho các ứng dụng hiện
đại, dữ liệu lưu trữ lớn và ứng dụng nền web thời gian thực. NoSQL cần đơn giản
trong thiết kế, kiểm soát tính khả dụng tốt và yêu cầu database lưu trữ dữ liệu dung
lượng cực lớn, tăng khả năng chịu lỗi tốt, thực hiện các truy vấn tốc độ cao không
đòi hỏi năng lực phần cứng và tài nguyên hệ thống.
1.5.2. Sử dụng MongoDB mang lại những lợi ích gì?
Nhờ vào tính linh hoạt và sự đa dạng hóa trong cách thức chuyển hóa cơ sở dữ
liệu, MongoDB trở thành giải pháp đáng tin cậy đối với nhiều doanh nghiệp.
MongoDB không chỉ là một cơ sở dữ liệu dựa trên tài liệu điển hình, mà nó còn nổi
bật nhờ vào một số tính năng khác như sau.
1.5.2.1. Truy vấn cơ sở dữ liệu đặc biệt
Thay vì sử dụng các lược đồ để xác định trước thì MongoDB lại sử dụng một
trong những lợi thế của mình là khả năng xử lý dữ liệu mà không cần lược đồ xác
định. Để nâng cao tính tối ưu và khả năng tiếp cận với các nhà phát triển,
10
MongoDB đã sử dụng ngôn ngữ truy vấn tương tự như cơ sở dữ liệu SQL. Với khả
năng này, MongoDB sẽ giúp chúng ta đơn giản hóa việc sắp xếp, truy vấn, cập nhật
và xuất dữ liệu của mình thông qua các phương pháp phổ biến khác.
Hình 4. Hình minh họa chức năng truy vấn cơ sở dữ liệu đặc biệt
1.5.2.2. Cân bằng tải
Để đảm bảo tính khả dụng và độ tin cậy của dịch vụ, yêu cầu quy mô ứng
dụng đám mây của doanh nghiệp phải tăng lên. MongoDB sẽ duy trì sự cân bằng
thông qua sự phân phối các tập dữ liệu trên nhiều máy ảo cùng lúc, có thể thực hiện
tác vụ đọc và ghi ở mức có thể chấp nhận. Đối với MongoDB dữ liệu lưu trữ được
mở rộng tính qui mô theo chiều ngang, đây được gọi là Sharding. Dựa vào điều này,
các tổ chức, doanh nghiệp sẽ tiết kiệm được chi phí mở rộng theo chiều dọc của
phần cứng, trong khi khả năng hoạt động trên đám mây vẫn giữ nguyên.
1.5.2.3. Hỗ trợ đa ngôn ngữ
Đây là một trong những điều tuyệt vời khi nhắc đến MongoDB, các phiên bản
được cập nhật và phát triển liên tục nhằm hỗ trợ cho quá trình điều khiển các ngôn
ngữ lập trình phổ biến như Python, PHP, Ruby, C++, Javascript, …
1.5.3. MongoDB có những ưu và nhược điểm gì?
1.5.3.1. Ưu điểm
- MongoDB là một cơ sở dữ liệu hướng tài liệu, sử dụng bộ nhờ nội tại,
truy cập dễ dàng nhờ vào việc lập ra các chỉ mục, tăng tốc độ phản hồi
11
truy vấn nhanh. Theo đánh giá thì tốc độ MongoDB có thể nhanh hơn
100 lần so với cơ sở dữ liệu quan hệ.
- Sự linh hoạt của cơ sở dữ liệu: MongoDB sử dụng lưu trữ dữ liệu dưới
dạng Document JSON nên mỗi collection sẽ có kích cỡ khác nhau và các
document cũng khác nhau. Do sử dụng cơ sở dữ liệu không có lược đồ
nên điều này mang lại sử linh hoạt và tự do lưu trữ dữ liệu thuộc nhiều
loại khác nhau.
- Khả năng mở rộng: Lợi thế về cơ sở dữ liệu theo chiều ngang, vì vậy, khi
xử lý một dữ liệu lớn thì chúng ta có thể phân phối cho nhiều máy.
- Đội ngũ hỗ trợ chuyên nghiệp: Khi gặp phải bất kỳ sự cố nào chúng ta có
thể liên hệ trực tiếp đến hệ thống hỗ trợ để xử lý kịp thời.
- Tính khả dụng cao: MongoDB không chỉ có các tính năng về sao chép
mà có thể sử dụng gridFS (có thể lưu trữ và truy xuất các tệp vượt quá
kích thước 16MB). Các tính năng giúp tăng tính khả dụng và đạt hiệu
suất cao.
Hình 5. Hình minh họa ưu điểm của MongoDB

- Do MongoDB không có tính ràng buộc. Do đó, người dùng phải thực sự
cẩn trọng khi thao tác để tránh những sai số không đáng có.
- Các dữ liệu lớn hơn 16MB sẽ không được lưu trữ do giới hạn về kích
thước lưu trữ.
12
- MongoDB không được phép Joins như cơ sở dữ liệu quan hệ. Để sử dụng
chức năng Joins, chúng ta có thể thêm Coding theo cách thủ công, vì là
thủ công nên có thể làm chậm quá trình và bị ảnh hưởng đến hiệu suất.
- Lồng dữ liệu trong BSON bị hạn chế, không được phép lồng những dữ
liệu hơn 100 cấp.
- Không có chức năng Joins nên sẽ có sự dư thừa dữ liệu, điều này là dung
lượng bộ nhớ tăng không cần thiết.
Hình 6. Hình minh hoa nhược điểm của MongoDB

Việc tận dụng các chức năng MongoDB giúp mang lại hiệu suất hoạt động tốt
hơn. Chúng ta nên cân nhắc việc lựa chọn phù hợp với nhu cầu của mình để có thể
vận hành tốt MongoDB trong công việc.
1.5.4. Sử dụng MongoDB trong đề tài
Sử dụng MongoDB để xậy dựng cơ sở dữ liệu NoSQL cho ứng dung.
1.8. RESTFUL API [5]
1.6.1. Các khái niệm
API (Application Programming Interface) là một tập các quy tắc và cơ chế mà
theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay
thành phần khác. API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở
những kiểu dữ liệu phổ biến như JSON hay XML.
13
REST (REpresentational State Transfer) 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. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số
thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, …
đến một URL để xử lý dữ liệu.
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 resource. 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 (web, mobile…) khác nhau
giao tiếp với nhau.
Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP
method (như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng
dụng web để quản các resource. RESTful không quy định logic code ứng dụng và
không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework
nào cũng có thể sử dụng để thiết kế một RESTful API.
1.6.2. Cách thức hoạt động
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.6.3. Sử dụng RESTFUL API trong đề tài
RESTFUL API được dùng làm giao thức giao tiếp giữa Client và Server trong
ứng dụng.
1.9. REACTJS
1.7.1. Reactjs là gì [6]
React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng
(UI). Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương
pháp mới để render trang web.
14
Components của công cụ này được phát triển bởi Facebook. Nó được ra mắt
như một công cụ JavaScript mã nguồn mở vào năm 2013. Hiện tại, nó đã đi trước
các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất
thời bấy giờ.
1.7.2. Đặc trưng của ReactJS [7]
Những đặc điểm nổi bật của ReactJS:
1.7.2.1. JSX
Hình 7. JSX
Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang
web thì sẽ dùng JSX. JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho
phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các
subcomponent. JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với
code JavaScript tương đương.
1.7.2.2. Redux
Một thành phần cực kỳ quan trọng, không một react developer nào mà không
biết.
- Single-way data flow (Luồng dữ liệu một chiều)
15
Hình 8. Luồng dữ liệu một chiều
ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS
chia nhỏ view thành các component nhỏ có mối quan hệ chặt chẽ với nhau. Tại sao
chúng ta phải quan tâm tới cấu trúc và mối quan hệ giữa các component trong
ReactJS? Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu một
chiều từ cha xuống con. Việc ReactJS sử dụng one-way data flow có thể gây ra một
chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án.
Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như
chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình.
- Virtual DOM
Hình 9. Virtual DOM

Những Framework sử dụng Virtual DOM như ReactJS khi Virtual DOM
thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản
16
ánh được sự thay đổi đó. Do Virtual DOM vừa đóng vai trò là Model, vừa đóng vai
trò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và
ngược lại. Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử
DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding. Điều này làm cho tốc
độ ứng dụng tăng lên đáng kể – một lợi thế không thể tuyệt vời hơn khi sử dụng
Virtual-DOM.
1.7.3. Sử dùng ReactJS trong đề tài
ReactJS được dùng để xây dựng các giao diện bên phía Client cho ứng dụng.
1.10. JSON WEB TOKEN [8]
1.8.1. Định nghĩa JSON Web Token
Json Web Token là một chuỗi mã hóa mà nguồn gốc ban đầu là một chuỗi
JSON. Chuỗi thông tin dạng JSON bằng phương pháp mã hóa nào đó, nó trở thành
1 chuỗi ký tự lộn xộn nhìn vào sẽ rất khó hiểu.
Như vậy, Bảo mật JWT là phương pháp xác thực quyền truy cập
(Authentication) bằng JSON Web Token.
1.8.2. Cấu trúc của một JWT
Dưới đây là 1 JSON Web Token
Hình 10. JSON Web Token

JWT trên bao gồm 3 phần:
- Header
- Payload
- Signature
17
Hình 11. JWT
1.8.2.1. Header
Header bao gồm hai phần chính:
 typ – Loại token (mặc định là JWT – cho biết đây là một Token JWT)
 alg – Thuật toán đã dùng để mã hóa (HMAC SHA256 – HS256 hoặc

RSA).
Hình 12. Header

Chuỗi JSON trên sau khi được mã hóa base64url sẽ trở thành như sau:
1.8.2.2. Payload
Là nơi chứa các nội dung của thông tin (claim). Thông tin truyền đi có thể là mô tả
của 1 thực thể (ví dụ như người dùng) hoặc cũng có thể là các thông tin bổ sung
thêm cho phần Header. Chúng được chia làm 3 loại: reserved, public và private
- Reserved: là những thông tin đã được quy định ở trong IANA JSON Web
Token Claims registry. Những thông tin này không có cái nào là bắt buộc
18
cả. Tuy nhiên tùy vào từng ưng dụng bạn implement mà hãy ràng buộc yêu
cầu bắt buộc đối với những thông tin cần thiết
 iss (issuer): tổ chức phát hành token (không bắt buộc)
 sub (subject): chủ đề của token (không bắt buộc)
 aud (audience): đối tượng sử dụng token (không bắt buộc)
 exp (expired time): thời điểm token sẽ hết hạn (không bắt buộc)
 nbf (not before time): token sẽ chưa hợp lệ trước thời điểm này
 iat (issued at): thời điểm token được phát hành, tính theo UNIX
time
 jti: JWT ID
- Public: Khóa có thể define tùy theo ý muốn của người sử dụng JWT. Tuy
nhiên để tránh trùng lặp, khó nên được quy định ở trong IANA JSON Web
Token Registry hoặc là 1 URI có chứa không gian tên không bị trùng lặp.
- Private: Phần thông tin thêm dùng để truyền qua giữa các client.
Ví dụ:
1.8.2.3. Signature
Phần chữ ký được tạo bằng cách kết hợp 2 phần Header + Payload, rồi mã hóa nó
lại bằng 1 giải thuật encode bất kỳ ví dụ như HMAC SHA-256
Tổng lại 3 phần, có chuỗi JWT như sau
1.8.3. Flow hệ thống sử dụng JWT
19
Hình 13. JWT format
Nhìn vào hình ta có thể thấy flow đi như sau:
1. User thực hiện login bằng cách gửi id/password hay sử dụng các tài khoản
mạng xã hội lên phía Authentication Server (Server xác thực)
2. Authentication Server tiếp nhận các dữ liệu mà User gửi lên để phục vụ
cho việc xác thực người dùng. Trong trường hợp thành công,
Authentication Server sẽ tạo một JWT và trả về cho người dùng thông
qua response.
3. Người dùng nhận được JWT do Authentication Server vừa mới trả về làm
“chìa khóa” để thực hiện các “lệnh” tiếp theo đối với Application Server.
4. Application Server trước khi thực hiện yêu cầu được gọi từ phía User, sẽ
verify JWT gửi lên. Nếu OK, tiếp tục thực hiện yêu cầu được gọi.
1.8.4. Hệ thống Verify chuỗi JWT thế nào?
- Chuỗi JWT có cấu trúc H.P.S được Client gửi lên. Server sẽ làm tương tự
như sau
 Set S1 = S
 Set S2 = HMAC(SHA256(H.P) với secret key của hệ thống)

(Giả sử hệ thống sử dụng encryption algorithms SHA256)
 So sánh S1 == S2?
20
- Nếu S1 và S2 khớp nhau, tức là chữ ký hợp lệ, hệ thống mới tiếp decode
payload và tục kiểm tra các data trong payload. Ví dụ trường exp (expiration
date).
1.8.5. Khi nào sử dụng JWT?
Với JWT, chúng ta không cần phải giữ session data trên server để xác thực user.
Luồng đi như sau:
- Người dùng gọi authentication service để gửi username/password.
- Authentication service phản hồi cho người dùng mã JWT, cái này sẽ định
nghĩa xem user là ai.
- Người dùng yêu cầu truy cập một dịch vụ được bảo mật bằng việc gửi
token lên.
- Lớp bảo mật sẽ check chữ ký trên token và nếu đó là quyền truy cập hợp
lệ thì được tiếp tục truy cập.
Các sessions sẽ có thời hạn hết hạn và cần phải được xử lý kiểu xoá đi các session
hết hạn này. JWT hoàn toàn có thể sở hữu chính expiry date của chính nó kèm với
dữ liệu user. Cho nên khi tầng Security check authen của JWT, nó có thể check
expiry time của token và đơn giản là từ chối truy cập.
Nếu không sử dụng session thì bạn mới có thể ứng dụng tạo một service thuần
RESTful, bởi vì một service thuần RESTful được định nghĩa là phải stateless. Với
dung lượng nhỏ, JWT có thể được gửi lên với mọi request cũng giống như session
cookie. Nhưng ko giống với session cookie, nó ko cần phải trỏ đến bất kì dữ liệu
nào được lưu trữ trên server, bản thân JWT đã có dữ liệu.
1.8.6. Sử dụng JSON Web Token trong hệ thống
JSON Web Token được dùng làm giao thức xác thực quyền truy cập của người
dùng trong hệ thống.
Chương 2. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

2.1. KHẢO SÁT HIỆN TRẠNG
2.1.1. Duolingo
Duolingo là là ứng dụng được ra đời để giúp chúng ta học ngôn ngữ với hơn 35
ngôn ngữ khác trên thế giới, kèm theo nhiều phương pháp học khác nhau.
21
Hình 14. Màn hình trang chủ website Doulingo
2.1.1.1. Các chức năng chính
- Lựa chọn nhiều ngôn ngữ muốn học.
- Hiển thị các chủ đề theo lộ trình từ dễ đến khó.
- Đặt mục tiêu hằng ngày và nhắc nhở chúng ta hoàn thành nó.
- Bảng xếp hạng trình độ học.
- Diễn đàn trao đổi.
2.1.1.2. Ưu điểm
- Có nhiều ngôn ngữ để lựa chọn.
- Giao diện thân thiện, dễ sử dụng.
- Số lượng bài học lớn.
- Được thiết kế đầy đủ từ cơ bản đến nâng cao.
- Chỉ phù hợp với những người mất gốc và muốn học lại từ đầu.
- Dễ gây nhàm chán với những người có kiến thức từ trước.
2.1.2. Elllo
Elllo là một trang cực kỳ nổi tiếng về việc học tiếng Anh, đặc biệt là việc học nghe.
Có hơn 1300 bài học nghe trên trang web này. Ngoài ra trang web còn có rất nhiều
video và các công cụ học tập khác giúp chúng ta cải thiện việc học ngôn ngữ.
22
Hình 15. Màn hình trang chủ website Ello
- Học bài nghe qua video, script và làm bài trắc nghiệm.
- Học bài ngữ pháp qua các chủ đề, video, script và làm bài trắc nghiệm.
- Tìm kiếm và lọc danh sách bài nghe theo chủ đề.
- Cho phép download tài liệu.
2.1.2.2. Ưu điểm
- Các bài học được chia làm nhiều chủ đề và cấp độ khác nhau.
- Tất cả bài học đều có transcript và bài tập từ vựng đi kèm và đồng thời còn
cho phép người học tải về để sử dụng offline.
- Số lượng bài tập tự luyện lớn.
- Có các bài học phù hợp cho cả giáo viên và sinh viên.
- Trang web cung cấp miễn phí tài liệu cho người dùng muốn học theo lộ
trình.
- Website có cấu trúc phức tạp.
- Không sắp xếp bài học để học theo thứ tự
- Khó tiếp cận với người mới bắt đầu.
2.1.3. BBC English
BBC Learning English là trang web học tiếng anh online chuyên về chủ đề ngữ
pháp, từ vựng, phát âm, tìm hiểu bí quyết dạy tiếng Anh…, ngoài ra bạn cũng có thể
23
tự kiểm tra trình độ tiếng Anh qua các bài thi trực tuyến. Bên cạnh đó còn có rất
nhiều bài luyện nghe có thể download ngay tại website về máy để ôn tập mỗi ngày
hiệu quả hơn.
Hình 16. Màn hình trang chủ website BBC English

- Nghe video và học các bài luyện nghe theo từng mục.
- Học phiên âm theo bài giảng.
- Kiểm tra trình độ.
- Học ngữ pháp qua bài giảng và thực hành.
- Học các khóa học từ Lower-intermediate đến Towards Advanced.
2.1.3.2. Ưu điểm
- Có nhiều video bài giảng hay và phong phú.
- Số lượng mục bài học nhiều và được nâng dần lên.
- Có nhiều bài học phù hợp cho cả giảng viên và học sinh.
- Giao diện đẹp, dễ nhìn và dễ sử dụng.
- Trang web phù hợp cho những người có trình độ tiếng Anh khá trở lên.
2.1.4. Voca.vn
Đây là website học về từ vựng tiếng Anh thông minh. Cũng chính là một trong
những trang web học tiếng Anh trực tuyến, miễn phí mà thông minh của cộng đồng
Anh ngữ English Me. Trang web Voca.vn được coi như một hệ thống chuyên dành
24
để học từ vựng tiếng Anh. Đây là trang web học từ vựng tiếng Anh hàng đầu tại
Việt Nam tính tới thời điểm hiện tại.
Hình 17. Màn hình trang chủ website Voca.vn

- Tra cứu từ điển.
- Ghim và học từ vựng.
- Làm đề thi thử tiếng anh THPT.
- Làm Test trình độ.
- Học ngữ pháp, từ vựng, phiên âm theo từng mức độ.
2.1.4.2. Ưu điểm
- Phương pháp học hiệu quả, sinh động, dễ hiểu.
- Tính năng nhắc nhở ôn tập tự động.
- Tính năng đo lường cho phép người học biết được sự tiến bộ của bản thân
theo thời gian.
- Giao diện đẹp, dễ hiểu.
- Thư viện từ vựng khá phong phú, nội dung được đầu tư kỹ lưỡng.
- Cho phép bạn có thể trải nghiệm miễn phí 1 bộ từ trong thư viện để tìm hiểu
cặn kẽ về cách học trước khi quyết định trả phí để học các bộ từ vựng khác.
- Kho tài liệu phong phú danh cho những người muốn học tiếng Anh từ cơ bản
đến nâng cao.
25
- Sau khi học những bộ từ miễn phí ban đầu thì bạn phải trả phí để học các bộ
từ vựng khác
- Đây chưa phải là trang web tối ưu cho những ai cần hoàn thiện cả 4 kỹ năng,
nó chủ yếu giúp bạn nâng cao vốn từ vựng.
2.1.5. Busuu
Busuu là trang web học ngoại ngữ cung cấp các khóa học về kĩ năng viết, nâng cao
vốn từ vựng, kĩ năng đọc hiểu, … Bên cạnh các khóa học còn có phương pháp học
tiếng Anh bằng cách tham gia vào diễn đàn và nói chuyê ̣n, giao lưu với các thành
viên đến từ nhiều nước trên thế giới.
Hình 18. Màn hình trang chủ website Busuu

- Học các bài học với các chủ đề khác nhau.
- Học và thực hành các kỹ năng ngôn ngữ: nói, phát âm, ngữ pháp, nghe,
chính tả, ghi nhớ, cụm từ.
- Diễn đàn để giao tiếp, tương tác.
- Thống kê tình trạng học của người dùng mỗi ngày.
- Cho phép học đa ngôn ngữ.
2.1.5.2. Ưu điểm
- Học đa ngôn ngữ.
- Giao diện thân thiện, dễ sử dụng.
- Trang web chia thành các bài học để học các kỹ năng.
26
- Ngôn ngữ được chia thành nhiều bài học từ dễ đến khó.
- Diễn đàn trao đổi giúp chúng ta tương tác với người khác trong hệ thống.
- Nắm được tiến độ học tập.
- Số lượng bài tập còn hạn chế
- Phải trả phí để sử dụng đầy đủ.
2.1.6. Kết luận
Qua dữ liệu khảo sát được từ 5 website học tiếng Anh uy tín hiện nay, chúng
em đã tổng hợp lại được những yêu cầu chức năng cho đề tài “Xây dựng trang web
học tiếng Anh sử dụng MERN STACK” như sau:
Đề tài là xây dựng một trang web học tiếng Anh nên chức năng phải có là
các bài học về ngữ pháp, từ vựng, phiên âm, luyện nghe. Giao diện học phải dễ nhìn
và bắt mắt, gây hứng thú cho người học.
Có thể có một số trò chơi nhỏ để giúp người dùng có thể ghi nhớ từ vựng tốt
hơn.
Phát triển các tính CRUD cho người quản trị và người tạo nội dung để quản
lý các đối tượng như tài khoản, từ vựng, bài nghe, ngữ pháp, bài trắc nghiệm.
2.2. XÁC ĐỊNH YÊU CẦU
2.2.1. Yêu cầu chức năng
2.2.1.1. Người dùng hệ thống
Dựa trên kết quả khảo sát và kiểm tra các hệ thống hiện tại, chúng em xác định các
tác nhân chính của hệ thống như sau:
 Người quản trị: sử dụng hệ thống với đặc quyền cao nhất. Người thực hiện các
chức năng quản trị hệ thống, đó là quản lý người dùng, ngữ pháp, các bài
luyện nghe, từ vựng, bài trắc nghiệm và xem các thống kê. Các chức năng
quản trị cấp cao trong hệ thống này phải được đăng nhập.
 Người tạo nội dung: dưới sự kiểm soát của Người quản trị, Người tạo nội dung
có quyền quản lý ngữ pháp, các bài trắc nghiệm, bài luyện nghe, từ vựng. Các
chức năng quản trị trong hệ thống này phải được đăng nhập.
 Người dùng được xác thực: có thể xem các bài luyện nghe, học ngữ pháp, từ
vựng, bảng phiên âm, chơi các trò chơi ôn tập và xem bảng xếp hạng của các
trò chơi. Các chức năng người dùng này phải được đăng nhập
27
 Khách vãng lai: đăng ký tài khoản để đăng nhập vào hệ thống.
Các chức năng của Người quản trị
Bảng 1. Bảng chức năng của Người quản trị
STT Chức năng Mô tả
1 Khóa người dùng Khóa tài khoản của người dùng
2 Mở khóa người dùng Mở khóa tài khoản của người dùng
3 Phân quyền người dùng Phân quyền truy cập cho người dùng
trong hệ thống
4 Thống kê Xem thống kê số lượng người dùng, số

lượng ngữ pháp, bài nghe, từ vựng, bài
trắc nghệm của hệ thống
5 Thêm người dùng Thêm một tài khoản người dùng vào hệ
thống
6 Chỉnh sửa người dùng Chỉnh sửa thông tin tài khoản người
dùng trong hệ thống
7 Xem danh sách người dùng Xem danh sách người dùng trong hệ
thống
Các chức năng của Người tạo nội dung

Bảng 2. Bảng chức năng của Người tạo nội dung
1 Thêm bài nghe Thêm một bài nghe vào hệ thống
2 Chỉnh sửa bài nghe Chỉnh sửa một bài nghe trong hệ thống
3 Xóa bài nghe Xóa một bài nghe trong hệ thống
4 Thêm ngữ pháp Thêm ngữ pháp vào hệ thống
5 Chỉnh sửa ngữ pháp Chỉnh sửa ngữ pháp trong hệ thống
28
6 Xóa ngữ pháp Xóa ngữ pháp trong hệ thống
7 Thêm từ vựng Thêm từ vựng mới vào hệ thống
8 Chỉnh sửa từ vựng Chỉnh sửa từ vựng trong hệ thống
9 Xóa từ vựng Xóa từ vựng trong hệ thống
10 Thêm bài trắc nghiệm Thêm bài trắc nghiệm của tệp luyện
nghe hoặc ngữ pháp vào hệ thống
11 Chỉnh sửa bài trắc nghiệm Chỉnh sửa câu hỏi và các đáp án của câu
hỏi trong bài trắc nghiêm
12 Xem danh sách bài nghe Xem, tìm kiếm và lọc danh sách bài
nghe
13 Xem danh sách ngữ pháp Xem, tìm kiếm và lọc danh sách ngữ
pháp
14 Xem danh sách từ vựng Xem, tìm kiếm và lọc danh sách từ vựng
Các chức năng của Người dùng được xác thực

Bảng 3. Bảng chức năng của Người dùng được xác thực
1 Đăng nhập Cho phép người dùng đăng nhập để truy

cập vào hệ thống
2 Học bảng phiên âm Người dùng xem video bài giảng và chi
tiết của âm, nghe audio cách phát âm
3 Học ngữ pháp Người dùng xem các chủ đề và ví dụ của

ngữ pháp, xem video và script bài giảng
ngữ pháp
4 Học bài luyện nghe Người dùng xem video và script, trả lời
các câu hỏi trắc nghiệm của video
5 Chỉnh sửa thông tin cá nhân Người dùng có thể chỉnh sửa thông tin
cá nhân của mình
29
6 Đổi mật khẩu Người dùng có thể đổi mật khẩu tài
khoản đăng nhập
7 Học từ vựng Xem nghĩa và nghe audio các từ vựng
8 Chơi các trò chơi Chơi ba trò chơi là: Hãy chọn từ đúng,
Ghép từ, Tay nhanh hơn não
9 Xem bảng xếp hạng Xem bảng xếp hạng người chơi trong
các trò chơi
10 Đăng xuất Đăng xuất tài khoản
30
Các chức năng của Khách vãng lai
Bảng 4. Bảng chức năng của Khách vãng lai
1 Đăng ký Cho phép đăng ký tài khoản để truy cập

vào hệ thống
2.2.2. Yêu cầu phi chức năng

- Giao diện dễ sử dụng, thân thiện và bắt mắt.
- Tốc độ load video và bài học nhanh.
- Tốc độ upload video, audio không quá một phút.
- Database có dung lượng lưu trữ dữ liệu lớn.
- Tốc độ tìm kiếm nhanh và chính xác.
- Tốc độ xử lý các thao tác nhanh chóng và chính xác.
- Có thể thiết kế thêm các chức năng theo yêu cầu.
- Thời gian truyền tải nội dung giữa các thiết bị nhanh.
- Trải nghiệm người dùng.
2.3. MÔ HÌNH HÓA YÊU CẦU
2.3.1. Lược đồ Usecase
2.3.1.1. Lược đồ chức năng của Người quản trị và Người tạo nội dung
31
uc UC_Admin
Phan quyen nguoi

dung Khoa tai khoan
Mo khoa tai khoan
Them nguoi dung
«include» «include» «include»

«include»
Chinh sua nguoi
dung
Quan ly nguoi dung «include»
«include» Xem danh sach

nguoi dung
Xem thong ke
Nguoi quan tri
Dang xuat
Them bai nghe
Chinh sua bai nghe
Xoa bai nghe
Dang nhap
Xem danh sach bai
«include» «include» nghe Xem danh sach ngu
«include» phap
«include»
Quan ly bai nghe

Xoa ngu phap
«include»
«include»
Quan ly ngu phap

«include» Chinh sua ngu phap
«include»
Nguoi tao noi dung
Them ngu phap
Them tu vung
«include»
Quan ly tu vung
«include» Xoa tu vung
«include»
«include»
Xem danh sach tu
vung
Chinh sua tu vung
Them bai trac

Quan ly bai trac nghiem
«include»
nghiem
«include»
Chinh sua bai trac
Chinh sua thong tin nghiem
ca nhan
«extend» Doi mat khau
Hình 19. Lược đồ chức năng Người quản trị và Người tạo nội dung
2.3.1.2. Lược đồ chức năng của Người dùng và Khách vãng lai
32
uc UC_User
Dang ky
Dang nhap Doi mat khau

«extend»
Khach vang lai
Dang xuat
«extend»
Chinh sua thong tin

ca nhan
Nghe video
«include»
Hoc ngu phap
«include»
«include»
Xem file script
«include»
«include»
Hoc bai nghe

«include» Lam quiz
Nguoi dung
Hoc tu vung
Xem bang xep hang
Hoc bang phien am Choi tro choi
Hình 20. Lược đồ chức năng của Khách vãng lai và Người dùng
2.4. MÔ TẢ USECASE
2.4.1. Chức năng của “Khách vãng lai”
2.4.1.1. Use case “Đăng ký”
33
uc Usecases
Learning English Website
Dang ky
Khach vang lai
Hình 21. Lược đồ chức năng Đăng ký

Bảng 5. Bảng mô tả chức năng Đăng ký
USE CASE – LEW-US_UC_01
Use Case ID LEW-US_UC_01 Phiên bản use 1.0

case
Tên use case Đăng ký
Tác giả Võ Ngọc Phong
Ngày tháng 10/10/2021 Mức độ Cao
Đối tượng sử dụng:

 Người dùng chưa có tài khoản
Tổng quan:
 Cho phép người dùng tạo tài khoản để đăng nhập vào hệ thống với quyền
là Người dùng
Mục tiêu:
 Người dùng sẽ tạo được tài khoản để đăng nhập vào hệ thống
Kích hoạt:
 Người dùng truy cập vào trang web.
 Người dùng nhấp vào “Đăng ký” trên thanh điều hướng.
Tiền điều kiện:
 Người dùng chưa có tài khoản trên website.
Hậu điều kiện:
 Thành công: Người dùng đăng ký thành công tài khoản để đăng nhập vào
34
hệ thống.
 Không thành công: Hiển thị thông báo lỗi.
Dòng sự kiện chính:
Bước Hành động tác nhân Phản ứng hệ thống
1 Người dùng click vào “Đăng Trang web chuyển hướng đến trang
ký” ở phía bên phải của thanh “Đăng ký”
điều hướng.
2 Người dùng nhập tên, email, [Ngoại lệ 1]

mật khẩu, xác nhận mật khẩu [Ngoại lệ 2]
[Ngoại lệ 3]
3 Người dùng click vào “Đăng Hiển thị thông báo "Đăng ký thành
ký” công" và chuyển về Trang chủ
[Ngoại lệ 4]
Dòng sự kiện thay thế:

Ngoại lệ:
ST Hành động tác nhân Phản ứng hệ thống

T
1 Người dùng để trống một trong Lỗi xuất hiện dưới phần nhập ở các
các trường tên, email, mật khẩu, trường là “Input value.”
xác nhận mật khẩu hoặc bỏ trống
tất cả
2 Email không đúng định dạng Lỗi xuất hiện dưới phần nhập email
người dùng “Email không hợp lệ”
3 Password có chiều dài dưới 6 ký tự Lỗi xuất hiện dưới phần nhập mật
khẩu “Mật khẩu tối thiểu 6 ký tự.”
4 Email đã tồn tại trong hệ thống Lỗi xuất hiện dưới phần nhập tên
người dùng “Email đã tồn tại.”
Mối liên hệ:
35
Các ràng buộc:
 Email: đúng định dạng và chưa tồn tại trong hệ thống.
 Password: có chiều dài tối thiểu 6 ký tự.
2.4.2. Chức năng của “Người dùng”

2.4.2.1. Use case “Đăng nhập”
uc Usecases
Dang nhap
Nguoi dung Nguoi quan tri
Nguoi tao noi dung
Hình 22. Lược đồ chức năng Đăng nhập

Bảng 6. Bảng mô tả chức năng đăng nhập

case
Tên use case Đăng nhập
Tác giả Trần Phương Linh

 Người dùng được xác thực
Tổng quan:
 Cho phép người dùng đã xác thực đăng nhập vào hệ thống
Mục tiêu:
 Người dùng được truy cập vào website theo phân quyền mặc định
36
Kích hoạt:
 Người dùng cần đăng nhập trang web cho một số chức năng cụ thể.
 Người dùng nhấp vào “Đăng nhập” trên thanh điều hướng.
 Người dùng chưa đăng nhập vào website.
 Thành công: Người dùng đã đăng nhập vào trang web theo vai trò cụ thể.
1 Người dùng click vào “Đăng Trang web chuyển hướng đến trang
nhập” ở phía bên phải của thanh Đăng nhập
điều hướng
2 Người dùng nhập email và [Ngoại lệ 1]

password [Ngoại lệ 2]
3 Người dùng click vào “Đăng Đóng của sổ Đăng nhập. Ở bên phải
nhập” của thanh điều hướng sẽ có tên
người dùng của người dùng
[Ngoại lệ 3]
[Ngoại lệ 4]
[Ngoại lệ 5]

Ngoại lệ:

T
1 Người dùng để trống email hoặc Lỗi xuất hiện dưới phần nhập email
password hoặc cả hai trường đều hoặc password
trống
37
2 Password ngắn hơn 6 ký tự Lỗi xuất hiện dưới phần nhập mật
khẩu “Mật khẩu tối thiểu 6 ký tự.”
3 Email không tồn tại Hiển thị thông báo lỗi “Email không
tồn tại.”
4 Password không đúng Hiển thị thông báo lỗi “Mật khẩu
không chính xác.”
5 Tài khoản đã bị kháo Hiển thị thông báo lỗi “Tài khoản đã
bị khóa”
Mối liên hệ:

Các ràng buộc Business:
 Password: có chiều dài tối thiểu 6 ký tự.
2.4.2.2. Use case “Đăng xuất”

uc Usecases
Dang xuat
Nguoi dung
Nguoi quan tri
Nguoi tao noi dung
Hình 23. Lược đồ chức năng Đăng xuất

Bảng 7. Bảng mô tả chức năng đăng xuất

case
Tên use case Đăng xuất
38
Ngày tháng 10/10/2020 Mức độ Thấp

Tổng quan:
 Cho phép người dùng đã xác thực đăng xuất tài khoản
Mục tiêu:
 Người dùng được đăng xuất tài khoản
Kích hoạt:
 Người dùng nhấp vào icon Avatar.
 Người dùng chọn “Đăng xuất”.
 Người dùng đã đăng nhập vào website.
 Thành công: Người dùng đăng xuất được tài khoản
1 Người dùng nhấp vào icon Trang web hiển thị các tùy chọn
Avatar “Thông tin cá nhân”, “Cài đặt”,
“Đăng xuất”
2 Người dùng chọn “Đăng xuất” Hiển thị thông báo đăng xuất thành
công. Quay lại trang chủ khi chưa
đăng nhập

Ngoại lệ:
Mối liên hệ:
39
2.4.2.3. Use case “Học bảng phiên âm”
uc Usecases
Hoc bang phien am
Nguoi dung he thong
Hình 24. Lược đồ chức năng học bảng phiên âm

Bảng 8. Bảng mô tả chức năng học bảng phiên âm

case
Tên use case Học bảng phiên âm

 Người đã có tài khoản trong hệ thống
Tổng quan:
 Cho phép người dùng học các phiên âm, nghe video bài giảng dạy phát
âm trong tiếng Anh.
Mục tiêu:
 Người dùng sẽ học được các phiên âm trong tiếng Anh
Kích hoạt:
 Người dùng click vào mục “Pronunciation”.
 Người dùng đã đăng nhập vào website.
40
 Thành công: Người dùng vào được trang Bảng phiên âm.
1 Người dùng click vào Trang web hiển danh sách bảng
“Pronunciation” phiên âm
2 Người dùng chọn một phiên âm Trang web hiển trang chi tiết phiên
cần học âm
3 Người dùng click vào video để Phát video bài giảng

nghe bài giảng về cách phát âm
4 Người dùng click vào Hiển thị danh sách phiên âm liên
“Relative” quan cùng loại

Ngoại lệ:
Mối liên hệ:
Các ràng buộc:
2.4.2.4. Use case “Học ngữ pháp”

uc Usecases
Hoc ngu phap
Nguoi dung he thong
Hình 25. Lược đồ chức năng học ngữ pháp

Bảng 9. Bảng mô tả chức năng học ngữ pháp
41
case
Tên use case Học ngữ pháp

 Người dùng đã tài khoản trong hệ thống
Tổng quan:
 Cho phép người dùng học ngữ pháp và xem video bài giảng của ngữ pháp
trong tiếng Anh.
Mục tiêu:
 Người dùng sẽ học được các cấu trúc ngữ pháp trong tiếng Anh
Kích hoạt:
 Người dùng nhấp vào nút “Grammar”.
 Người dùng đã đăng nhập vào hệ thống
 Thành công: Người dùng vào được trang Ngữ pháp.
1 Người dùng nhấp vào nút Trang web chuyển đến trang ngữ
“Grammar” pháp
2 Người dùng chọn mức độ của Trang web chuyển đến trang danh
ngữ pháp sách ngữ pháp của mức độ được
chọn
3 Người dùng chọn một ngữ pháp Trang web hiển trang chi tiết ngữ
cần học pháp
4 Người dùng click vào video để Phát video bài giảng
42
nghe bài giảng ngữ pháp
5 Người dùng chọn lần lượt các Hiển thị nội dung các tab người
tab để xem script, ngữ pháp và dùng đã chọn
làm câu hỏi trắc nghiệm

Ngoại lệ:
Mối liên hệ:
Các ràng buộc:
2.4.2.5. Use case “Học từ vựng”

uc Usecases
Hoc tu vung
Nguoi dung he thong
Hình 26. Lược đồ chức năng học từ vựng

Bảng 10. Bảng mô tả chức năng học từ vựng

case
Tên use case Học từ vựng

 Người dùng đã tài khoản trong hệ thống
Tổng quan:
43
 Cho phép người dùng học nhiều từ vựng mới theo nhiều chủ đề các nhau.
Mục tiêu:
 Người dùng học từ vựng theo các chủ đề.
Kích hoạt:
 Người dùng nhấp vào nút “Vocabulary”.
 Thành công: Người dùng vào được trang Từ vựng.
1 Người dùng nhấp vào nút Trang web chuyển đến trang hiển thỉ
“Vocabulary” các chủ đề của từ vựng
2 Người dùng chọn một chủ đề Trang web chuyển đến trang hiển thị
từ vựng của chủ đề vừa chọn
3 Người dùng chọn icon “Speak” Phát audio cách đọc từ vựng
để nghe cách đọc của từ vựng
4 Người dùng click icon “Next” Hiển thị từ vựng tiếp theo của chủ
để học từ tiếp theo đề
[Thay thế 1]
5 Người dùng chọn icon “Slide” Hiển thị slide từ vựng

để học từ vựng theo giao diện
slide
[Thay thế 2]
1 Người dùng click vào icon Hiển thị lại từ vựng vừa xem
“Prev”
44
2 Người dùng chọn icon Hiển thị từ vựng theo gallery
“Gallery” để học từ vựng theo
giao diện slide
Ngoại lệ:
Mối liên hệ:
Các ràng buộc:
2.4.2.6. Use case “Học bài luyện nghe”

uc Usecases
Hoc bai nghe
Nguoi dung he thong
Hình 27. Lược đồ chức năng học bài luyện nghe

Bảng 11. Bảng mô tả chức năng học bài luyện nghe

case
Tên use case Học bài nghe

Tổng quan:
 Cho phép người dùng đã xác thực nghe video, xem script và trả lời các
câu hỏi của phần Listenning.
45
Mục tiêu:
 Người dùng có thể nghe video, xem script và trả lời các câu hỏi để cải
thiện kỹ năng nghe.
Kích hoạt:
 Người dùng cần đăng nhập trang web.
 Người dùng click vào “Listenning”.
 Người dùng đã đăng nhặp vào website.
Post conditions:
 Thành công: trang web hiển thị video tiếng anh
1 Người dùng click vào Trang web chuyển hướng đến trang
“Listenning” ở trang chủ hệ Listenning
thống
2 Người dùng chọn một chủ đề Trang web chuyển hướng đến trang
luyện nghe hiển thị danh sách bài nghe của chủ
đề được chọn
3 Người dung chọn một bài nghe Trang web chuyển hướng đến trang
học bài nghe
4 Người dùng click vào video để Phát video

luyện nghe
5 Người dùng click vào “Script” Hiển thị file script của video
để xem file script của video
6 Người dùng click vào “Quiz” để Hiển thị các câu trắc nghiệm của
trả lời các câu hỏi video
7 Người dùng chọn đáp án Tick xanh vào đáp án người dùng đã
chọn
8 Người dùng click vào “Check Hiển thị kết quả “v” nếu người dung
46
Answer” chọn đúng và “x” nếu người dungf
chọn sai
9 Người dùng click vào “Reset Hủy các câu trả lời người dùng đã
Quiz” chọn, tải lại trang Quiz trống
10 Người dùng click vào “Show Hiển thị các đáp án màu xanh là đáp
Answer” án của các câu trắc nghiệm

Ngoại lệ:
Mối liên hệ:
2.4.2.7. Use case “Đổi mật khẩu”

uc Usecases
Doi mat khau
Nguoi quan tri Nguoi dung
Nguoi tao noi dung
Hình 28. Lược đồ chức năng Đổi mật khẩu

Bảng 12. Bảng mô tả chức năng đổi mật khẩu

case
Tên use case Đổi mật khẩu
47
Ngày tháng 10/10/2020 Mức độ Trung bình

Tổng quan:
 Cho phép người dùng thay đổi mật khẩu tài khoản.
Mục tiêu:
 Người dùng được truy cập vào website theo phân quyền mặc định.
Kích hoạt:
 Người dùng click vào icon “Avatar” trên thanh điều hướng.
 Người dụng chọn “Thông tin cá nhân”.
 Người dùng click vào “Chỉnh sửa”.
 Người dùng đã đăng nhập vào hệ thống.

 Thành công: Trang web quay trở lại trang thông tin người dùng.
 Không thành công: Trang web hiện lỗi.
1 Người dùng click vào icon Hiển thị các tùy chọn “Thông tin cá
“Avatar” trên thanh điều hướng nhân”, “Cài đặt”, “Đăng xuất”.
2 Người dụng chọn “Thông tin cá Hệ thống chuyển đến trang thông tin
nhân” chi tiết người dùng
4 Người dùng nhập các thông tin [Ngoại lệ 1]

đầu vào cần thiết: “Mật khẩu”, [Ngoại lệ 2]
“Xác nhận mật khẩu”
5 Người dùng click “Chỉnh sửa” Thông báo đổi thành công. Quay lại
[Thay thế 1] trang thông tin cá nhân người dùng
48
1 Người dùng click “Hủy bỏ” Hủy các thay đổi và quay lại trang
thông tin cá nhân người dùng
Ngoại lệ:

T
1 Người dùng nhập mật khẩu mới Lỗi xuất hiện dưới phần nhập mật
dưới 6 ký tự khẩu mới “Mật khẩu phải tối thiểu 6
ký tự.”
2 Mật khẩu mới và mật khẩu xác Lỗi xuất hiện dưới phần nhập mật
nhận không khớp khẩu xác nhận “Xác nhận mật khẩu
không khớp.”
Mối liên hệ:

 Mật khẩu mới: có chiều dài tối thiểu 6 ký tự.
2.4.2.8. Use case “Chỉnh sửa thông tin cá nhân”

uc Usecases
Chinh sua thong tin ca

nhan
Nguoi quan tri
Nguoi dung
Nguoi tao noi dung
Hình 29. Lược đồ chức năng Chỉnh sửa thông tin cá nhân
49
Bảng 13. Bảng mô tả chức năng Chỉnh sửa thông tin cá nhân

case
Tên use case Chỉnh sửa thông tin cá nhân

Tổng quan:
 Cho phép người dùng chỉnh sửa thông tin cá nhân.
Mục tiêu:
 Người dùng được truy cập vào website theo phân quyền mặc định.
Kích hoạt:
 Người dùng click vào icon “Avatar” trên thanh điều hướng.
 Người dụng chọn “Thông tin cá nhân”.
 Người dùng click vào “Chỉnh sửa”.

 Thành công: Trang web quay trở lại trang thông tin người dùng.
 Không thành công: Trang web hiện lỗi.
1 Người dùng click vào icon Hiển thị các tùy chọn “Thông tin cá
“Avatar” trên thanh điều hướng nhân”, “Cài đặt”, “Đăng xuất”.
2 Người dụng chọn “Thông tin cá Hệ thống chuyển đến trang thông tin
50
nhân” chi tiết người dùng
4 Người dùng chỉnh sửa tên Hiển thị thông tin chỉnh sửa
5 Người dùng click “Chỉnh sửa” Thông báo đổi thành công. Quay lại
[Thay thế 1] trang thông tin cá nhân người dùng
1 Người dùng click “Hủy bỏ” Hủy các thay đổi và quay lại trang
thông tin cá nhân người dùng
Ngoại lệ:
Mối liên hệ:
2.4.2.9. Use case “Chơi trò chơi”

uc Usecases
Choi tro choi
Nguoi dung he thong
Hình 30. Lược đồ chức năng chơi trò chơi

Bảng 14. Bảng mô tả chức năng chơi trò chơi

case
Tên use case Chơi trò chơi

51
 Người dùng hệ thống
Tổng quan:
 Chức năng gồm ba trò chơi là: “Hãy chọn từ đúng”, “Tay nhanh hơn não”,
“Ghép từ”.
Mục tiêu:
 Người dùng chơi trò chơi để kiểm tra khả năng ghi nhớ từ vựng.
Kích hoạt:
 Người dùng click vào “Playing Games”.

 Thành công: Cho phép người dùng chơi các trò chơi.
1 Người dùng click vào “Playing Chuyển đến trang hiển thi các trò
Games” chơi
2 Người dùng click vào “Hãy Chuyển đến trang chơi trò chơi
chọn từ đúng” “Hãy chọn từ đúng”
[Thay thế 1]
[Thay thế 2]
1 Người dùng click vào “Ghép từ” Chuyển đến trang chơi trò chơi
“Ghép từ”
2 Người dùng click vào “Tay Chuyển đến trang chơi trò chơi “Tay
52
nhanh hơn não” nhanh hơn não”
Ngoại lệ:
Mối liên hệ:
2.4.2.10. Use case “Xem bảng xếp hạng”

uc Usecases
Xem bang xep hang
Nguoi dung
Hình 31. Lược đồ chức năng Xem bảng xếp hạng

Bảng 15. Bảng mô tả chức năng xem bảng xếp hạng

case
Tên use case Xem bảng xếp hạng

 Người dùng hệ thống
Tổng quan:
 Người dung có thể xem bảng xếp hạng người dùng có nhiều coin nhất và
bảng xếp hạng của ba trò chơi là: “Hãy chọn từ đúng”, “Tay nhanh hơn
não”, “Ghép từ”.
Mục tiêu:
53
 Người dùng xem bảng xếp bạng các trò chơi và số coin.
Kích hoạt:
 Người dùng click vào “Playing Games”.

 Thành công: Cho phép người dùng chơi các trò chơi.
1 Người dùng click vào “Playing Chuyển đến trang hiển thi các trò
Games” chơi
2 Người dùng click vào “Xem Chuyển đến trang hiển thị bảng
bảng xếp hạng” bảng người dung có nhiều coin nhất,
các bảng xếp hạng của các trò chơi
“Hãy chọn từ đúng”, “Ghép từ”,
“Tay nhanh hơn não”

Ngoại lệ:
Mối liên hệ:
2.4.3. Chức năng của “Người tạo nội dung”

2.4.3.1. Use case “Xem danh sách bài nghe”
54
uc Usecases
Xem danh sach bai

nghe
Nguoi quan tri
Admin
Hình 32. Lược đồ chức năng Xem danh sách bài nghe
Bảng 16. Bảng mô tả chức năng Xem danh sách bài nghe
USE CASE – LEW-AS_UC_01
Use Case ID LEW-AS_UC_01 Phiên bản use 1.0

case
Tên use case Xem danh sách bài nghe

 Người quản trị hệ thống, người tạo nội dung
Tổng quan:
 Cho phép người quản trị hoặc người tạo nội dung xem danh sách bài nghe
trong hệ thống
Mục tiêu:
 Hiển thị danh sách bài luyện nghe trong hệ thống.
Kích hoạt:
 Người dùng cần đăng nhập trang web với quyền quản trị viên hoặc quyền
tạo nội dung.
 Người dùng click vào “Quản lý bài nghe”.
 Người dùng đã đăng nhập vào website với quyền quản trị hoặc quyền tạo
nội dung.
55
 Thành công: hiển thị danh sách bài luyện nghe
1 Người dùng click vào “Quản lý Trang web hiển thị danh sách các
bài nghe” ở trang chủ hệ thống tệp nghe của hệ thống
2 Người dùng click vào icon Hiển thị hộp thoại lọc theo chủ đề
“Setting” để lọc danh sách theo
chủ đề
3 Người dùng chọn chủ đề Hiển thị thông tin người dùng đã
chọn
4 Người dùng click “OK” Hiển thị danh sách bài nghe được
[Thay thế 1] lọc theo chủ đề được chọn
5 Người dùng chọn icon “Filter” Hiển thị các tùy chọn “Newest”,
để lọc bài nghe mới nhất hoặc “Oldest”
cũ nhất
6 Người dùng chọn “Newest” Hiển thị bài nghe được sắp xếp từ
[Thay thế 2] mới nhất đến cũ nhất
7 Người dùng gõ tên bài nghe vào Hiển thị danh sách bài nghe có tên
ô tìm kiếm đúng và gần đúng với từ khóa tìm
kiếm
[Ngoại lệ 1]
1 Người dùng chọn “Cancel” Đóng hộp thoại
2 Người dùng chọn “Oldest” Hiển thị bài nghe được sắp xếp từ cũ
nhất đến mới nhất
Ngoại lệ:
56
1 Không tìm thấy bài nghe có tên Hiển thị “No result”
trùng với từ khóa tìm kiếm
Mối liên hệ:

2.4.3.2. Use case “Thêm tệp nghe”

uc Usecases
Them tep nghe
Nguoi quan tri Nguoi tao noi dung
Hình 33. Lược đồ chức năng Thêm tệp nghe

Bảng 17. Bảng mô tả chức năng thêm bài nghe

case
Tên use case Thêm tệp nghe

Tổng quan:
 Cho phép người quản trị hoặc người tạo nội dung thêm một tệp nghe mới.
Mục tiêu:
 Một bài nghe mới được thêm vào database.
57
Kích hoạt:
tạo nội dung.
 Người dùng click vào icon “Add”.
nội dung.
 Thành công: thêm tệp nghe mới vào danh sách tệp nghe.
2 Người dùng click vào icon Trang web chuyển hướng đến trang
“Add” thêm tệp nghe mới
3 Người dùng thêm tên, mô tả, Hiển thị thông tin người dùng đã
chủ đề, script, hình ảnh, và thêm
upload video
[Thay thế 1]
4 Người dùng click “Save” Hiển thị thông báo “Thêm bài nghe
[Thay thế 2] thành công”
[Ngoại lệ 1]
[Ngoại lệ 2]
1 Người dùng chọn thêm link Hiển thị thông tin người dùng nhập
youtube video
58
2 Người dùng click vào “Return” Quay lại trang quản lý bài nghe
Ngoại lệ:

T
1 Người dùng không nhập đầy đủ Hiển thị thông báo “Error, không thể
các trường thông tin bắt buộc tạo listening”
2 Người dùng thêm link video không Hiển thị thông báo “Link video is
phải link youtube invalid.”
Mối liên hệ:

 Link video phải là link youtube.
2.4.3.3. Use case “Chỉnh sửa tệp nghe”

uc Usecases
Chinh sua tep nghe
Nguoi quan tri Nguoi tao noi dung
Hình 34. Lược đồ chức năng chỉnh sửa bài nghe

Bảng 18. Bảng mô tả chức năng chỉnh sửa bài nghe

case
Tên use case Chỉnh sửa tệp nghe
59
Tổng quan:
 Cho phép người quản trị chỉnh sửa các tệp nghe của hệ thống
Mục tiêu:
 Câp nhật các tệp nghe trong database.
Kích hoạt:
tạo nội dung.
 Người dùng click icon “Edit” của tệp cần chỉnh sửa
nội dung.
 Thành công: cấp nhật tệp nghe sau chỉnh sửa trong danh sách tệp nghe.
2 Người dùng click icon “Edit” Trang web chuyển hướng đến trang
của tệp cần chỉnh sửa chi tiết tệp nghe
3 Người dùng chỉnh sửa tên, mô Hiển thị thông tin người dùng đã
tả, chủ đề, hình ảnh, script và chỉnh sửa
upload video
[Thay thế 1]
4 Người dùng click “Save” Hiển thị thông báo “Chỉnh sửa
[Thay thế 2] listening thành công”
60
[Ngoại lệ 1]
[Ngoại lệ 2]
youtube video
2 Người dùng click vào “Return” Quay lại trang quản lý bài nghe
Ngoại lệ:

T
các trường thông tin bắt buộc chỉnh sửa listening”
Mối liên hệ:

2.4.3.4. Use case “Xóa tệp nghe”

uc Usecases
Xoa bai nghe
Nguoi tao noi dung

Admin
Hình 35. Lược đồ chức năng Xóa bài nghe

Bảng 19. Bảng mô tả chức năng Xóa bài nghe
61

case
Tên use case Xóa bài nghe

 Người dùng có tài khoản với quyền là Người tạo nội dung và Người quản
trị
Tổng quan:
 Cho phép xóa tệp nghe và bài trắc nghiệm của tệp trong hệ thống
Mục tiêu:
 Người dùng sẽ xóa tệp nghe trong hệ thống
Kích hoạt:
 Người dùng cần đăng nhập trang web với quyền Người quản trị hoặc
người tạo nội dung.
 Người dùng click vào icon “Delete” tại tệp nghe muốn xóa.
 Người dùng phải đăng nhập vào hệ thống với tài khoản với quyền Người
tạo nội dung hoặc Người quản trị
 Thành công: hiển thị thông báo “Xóa bài nghe thành công.”
 Không thành công: Hiển thị thông báo lỗi “Error, không thể xóa bài nghe.”
1 Người dùng click vào “Quản lý Trang web chuyển sang trang Quản
bài nghe” lý danh sách bài luyện nghe
62
2 Người dùng click vào icon Trang web hiển thị hộp thoại thông
“Delete” ở tệp luyện nghe muốn báo “Bạn có muốn xóa bài nghe?”
xóa
3 Người dùng chọn “Yes” Đóng hộp thoai, hiển thị thông báo
[Thay thế 1] “Xóa bài nghe thành công.” và cập
nhật lại danh sách tệp luyện nghe
[Ngoại lệ 1]
Dòng sự kiện thay thế
1 Người dùng click vào “No” Đóng hộp thoại thông báo
Ngoại lệ:

T
1 Không thể xóa được bài nghe Hiển thị thông báo lỗi “Error, không
thể xóa bài nghe”
Mối liên hệ:

2.4.3.5. Use case “Xem danh sách ngữ pháp”

uc Usecases
Xem danh sach ngữ

pháp
Nguoi quan tri
Admin
Hình 36. Lược đồ chức năng Xem danh sách ngữ pháp
Bảng 20. Bảng mô tả chức năng Xem danh sách ngữ pháp
63

case
Tên use case Xem danh sách ngữ pháp

Tổng quan:
 Cho phép người quản trị hoặc người tạo nội dung xem danh sách ngữ
pháp trong hệ thống
Mục tiêu:
 Hiển thị danh sách bài ngữ pháp trong hệ thống.
Kích hoạt:
tạo nội dung.
 Người dùng click vào “Quản lý ngữ pháp”.
nội dung.
 Thành công: hiển thị danh sách ngữ pháp
ngữ pháp” ở trang chủ hệ thống ngữ pháp của hệ thống
2 Người dùng click vào icon Hiển thị hộp thoại lọc theo mức độ
“Setting” để lọc danh sách theo
64
mức độ
3 Người dùng chọn mức độ Hiển thị thông tin người dùng đã
chọn
4 Người dùng click “OK” Hiển thị danh sách ngữ pháp được
[Thay thế 1] lọc theo mức độ được chọn
5 Người dùng chọn icon “Filter” Hiển thị các tùy chọn “Newest”,
để lọc ngữ pháp mới nhất hoặc “Oldest”
cũ nhất
6 Người dùng chọn “Newest” Hiển thị ngữ pháp được sắp xếp từ
[Thay thế 2] mới nhất đến cũ nhất
7 Người dùng gõ tên ngữ pháp Hiển thị danh sách ngữ pháp có tên
vào ô tìm kiếm đúng và gần đúng với từ khóa tìm
kiếm
[Ngoại lệ 1]
2 Người dùng chọn “Oldest” Hiển thị ngữ pháp được sắp xếp từ
cũ nhất đến mới nhất
Ngoại lệ:
1 Không tìm thấy ngữ pháp có Hiển thị “No result”

tên trùng với từ khóa tìm kiếm
2.4.3.6. Use case “Thêm ngữ pháp”
65
Hình 37. Lược đồ chức năng Thêm ngữ pháp
Bảng 21. Bảng mô tả chức năng them ngữ pháp

case
Tên use case Thêm ngữ pháp

trị
Tổng quan:
 Cho phép thêm cấu trúc ngữ pháp vào trong hệ thống
Mục tiêu:
 Người dùng sẽ thêm được cấu trúc ngữ pháp vào trong hệ thống
Kích hoạt:
66
 Người dùng phải đăng nhập vào hệ thống với tài khoản có quyền là Người
 Thành công: Người dùng thêm ngữ pháp thành công
 Không thành công: Người dùng thêm ngữ pháp không thành công
1 Người dùng click vào “Quản lý Trang web hiển thị danh sách ngữ
ngữ pháp” pháp của hệ thống
"Add" phía trên danh sách ngữ thêm ngữ pháp
pháp
3 Người dùng thêm tiêu đề. Nội Hiển thị thông tin người dùng đã
dung, mức độ, script, hình ảnh, thêm
và upload video và audio
[Thay thế 1]
4 Người dùng click vào icon Hiển thị hộp thoại thêm chủ đề
“Add” để thêm các chủ đề cho
ngữ pháp
5 Người dùng nhập chủ đề và các Hiển thị nội dung người dùng nhập
ví dụ
[Thay thế 3]
6 Người dùng click “Save” Lưu lại chủ đề vừa thêm và đóng
[Thay thế 3] hộp thoại
7 Người dùng click “Save” Hiển thị thông báo “Thêm ngữ pháp
[Thay thế 2] thành công”
[Ngoại lệ 1]
[Ngoại lệ 2]
67
youtube video
2 Người dùng click vào “Return” Quay lại trang quản lý ngữ pháp
3 Người dùng click “Cancel” Đóng hộp thoại
Ngoại lệ:

T
các trường thông tin bắt buộc tạo ngữ pháp”
Mối liên hệ:

2.4.3.7. Use case “Chỉnh sửa ngữ pháp”
Hình 38. Lược đồ chức năng Sửa ngữ pháp

Bảng 22. Bảng mô tả chức năng Sửa ngữ pháp
68

case
Tên use case Sửa ngữ pháp

trị
Tổng quan:
 Cho phép sửa cấu trúc ngữ pháp vào trong hệ thống
Mục tiêu:
 Người dùng sẽ sửa được cấu trúc ngữ pháp trong hệ thống
Kích hoạt:
 Người dùng click vào icon “Edit” tại ngữ pháp muốn chỉnh sửa.
 Thành công: Người dùng sửa cấu trúc ngữ pháp thành công
 Không thành công: Người dùng sửa ngữ pháp không thành công
1 Người dùng click vào “Quản lý Trang web hiển thị danh sách ngữ
69
ngữ pháp” pháp của hệ thống
2 Người dùng click vào icon Trang web hiển thị tất cả thông tin
“Edit” ở cấu trúc ngữ pháp về cấu trúc ngữ pháp đã chọn
muốn sửa
3 Người dùng chỉnh sửa tiêu đề, Hiển thị thông tin người dùng đã
nội dung, mức độ, script, hình chỉnh sửa
ảnh, và upload video và audio
[Thay thế 1]
4 Người dùng click vào icon Hiển thị hộp thoại thêm chủ đề
“Add” để thêm các chủ đề cho
ngữ pháp
[Thay thế 4]
[Thay thế 5]
5 Người dùng nhập chủ đề và các Hiển thị nội dung người dùng nhập
ví dụ
[Thay thế 3]
6 Người dùng click “Save” Lưu lại chủ đề và đóng hộp thoại
[Thay thế 3] thêm
7 Người dùng click “Save” Hiển thị thông báo “Chỉnh sửa ngữ
[Thay thế 2] pháp thành công”
[Ngoại lệ 1]
[Ngoại lệ 2]
youtube video
2 Người dùng click vào “Return” Quay lại trang quản lý ngữ pháp
3 Người dùng click “Cancel” Đóng hộp thoại
70
4 Người dùng click vào ngữ pháp Hiển thị hộp thoại thông tin chủ đề
của ngữ pháp
5 Người dùng click icon “Delete” Xóa chủ đề của ngữ pháp
tại chủ đề của ngữ pháp
Ngoại lệ:

T
các trường thông tin bắt buộc tạo ngữ pháp”
Mối liên hệ:

2.4.3.8. Use case “Xóa ngữ pháp”
Hình 39. Lược đồ chức năng xóa ngữ pháp

Bảng 23. Bảng mô tả chức năng Xóa ngữ pháp

case
71
Tên use case Xóa ngữ pháp

trị
Tổng quan:
 Cho phép xóa cấu trúc ngữ pháp trong hệ thống
Mục tiêu:
 Người dùng sẽ xóa cấu trúc ngữ pháp trong hệ thống
Kích hoạt:
 Người dùng click vào icon “Delete” tại ngữ pháp muốn xóa.
 Thành công: Người dùng xóa cấu trúc ngữ pháp thành công
 Không thành công: Người dùng xóa cấu trúc ngữ pháp không thành công
1 Người dùng click vào “Quản lý Trang web chuyển sang trang Quản
ngữ pháp” lý ngữ pháp
2 Người dùng click vào icon Trang web hiển thị hộp thoại thông
“Delete” ở cấu trúc ngữ pháp
72
muốn xóa báo “Bạn có muốn xóa ngữ pháp?”
3 Người dùng chọn “Yes” Đóng hộp thoai, hiển thị thông báo
[Thay thế 1] “Xóa ngữ pháp thành công.” và cập
nhật lại danh sách ngữ pháp
[Ngoại lệ 1]
1 Người dùng click vào “No” Đóng hộp thoại thông báo
Ngoại lệ:

T
1 Không thể xóa được ngữ pháp Hiển thị thông báo lỗi “Error, không
thể xóa ngữ pháp.”
Mối liên hệ:

2.4.3.9. Use case “Xem danh sách từ vựng”

uc Usecases
Xem danh sach tu vung
Nguoi quan tri

Admin
Hình 40. Lược đồ chức năng Xem danh sách từ vựng

Bảng 24. Bảng mô tả chức năng Xem danh sách từ vựng
73
case
Tên use case Xem danh sách từ vựng

Tổng quan:
 Cho phép người quản trị hoặc người tạo nội dung xem danh sách từ vựng
trong hệ thống
Mục tiêu:
 Hiển thị danh sách bài từ vựng trong hệ thống.
Kích hoạt:
tạo nội dung.
 Người dùng click vào “Quản lý từ vựng”.
nội dung.
 Thành công: hiển thị danh sách từ vựng

1 Người dùng click vào “Quản lý Trang web hiển thị danh sách các từ
từ vựng” ở trang chủ hệ thống vựng của hệ thống
2 Người dùng click vào icon Hiển thị hộp thoại lọc
“Setting” để lọc danh sách
3 Người dùng chọn loại từ, Hiển thị thông tin người dùng đã
74
chuyên ngành, cấp bậc, chủ đề chọn
4 Người dùng click “OK” Hiển thị danh sách từ vựng được lọc
[Thay thế 1]
5 Người dùng chọn icon “Filter” Hiển thị các tùy chọn “A->Z”, “Z-
để sắp xếp từ vựng >A”, “Random”
6 Người dùng chọn “A->Z” Hiển thị từ vựng được sắp xếp theo
[Thay thế 2] thứ tự từ A đến Z
[Thay thế 3]
7 Người dùng nhập từ vào khung Hiển thị danh sách từ có kết quả
tìm kiếm đúng và gần đúng với từ khóa được
tìm kiếm
[Ngoại lệ 1]
2 Người dùng chọn “Z->A” Hiển thị từ vựng được sắp xếp theo
thứ tự từ Z đến A
3 Người dùng chọn “Random” Hiển thị từ vựng được sắp xếp theo
thứ tự ngẫu nhiên
Ngoại lệ:
1 Không tìm thấy kết quả tìm Hiển thị “No result.”
kiếm
Mối liên hệ:

2.4.3.10. Use case “Thêm từ vựng”
75
Hình 41. Lược đồ chức năng Thêm từ vựng
Bảng 25. Bảng mô tả chức năng Thêm từ vựng

case
Tên use case Thêm từ vựng

trị
Tổng quan:
 Cho phép thêm từ vựng vào trong hệ thống
Mục tiêu:
 Người dùng sẽ thêm được từ vựng vào trong hệ thống
Kích hoạt:
76
Post conditions:
 Thành công: Người dùng thêm từ vựng thành công
 Không thành công: Người dùng thêm từ vựng không thành công
1 Người dùng click vào “Quản lý Trang web chuyển sang trang hiển
từ vựng” thị danh sách từ vựng của hệ thống
2 Người dùng click vào icon Trang web hiển thị hộp thoại để
"Add" phía trên danh sách từ thêm từ vựng
vựng
3 Người dùng nhập và chọn từ, Hiển thị thông tin người dùng đã
nghĩa của từ, cấp bậc, ký âm, nhập
loại từ, chuyên ngành, chủ đề,
câu ví dụ, từ đồng nghĩa, từ trái
nghĩa, ghi chú của từ vựng
4 Người dùng click vào nút Trang web xuất hiện thông báo
“Thêm từ” “Thêm từ thành công”
[Thay thế 1] [Ngoại lệ 1]
[Ngoại lệ 2]
1 Người dùng click vào “Quay Hủy bỏ các thao tác thêm và quay
lại” về trang quản lý từ vựng
Ngoại lệ:
77
T
các trường bắt buộc hoặc bỏ trống trường thông tin.
tất cả
2 Người dùng thêm từ trùng với từ Hiển thị thông báo “Từ đã tồn tại
đã tạo trong database trong từ điển”
Mối liên hệ:

2.4.3.11. Use case “Sửa từ vựng”
Hình 42. Lược đồ chức năng Sửa từ vựng

Bảng 26. Bảng mô tả chức năng Sửa từ vựng

case
Tên use case Sửa từ vựng

78
trị
Tổng quan:
 Cho phép sửa từ vựng vào trong hệ thống
Mục tiêu:
 Người dùng sẽ sửa được từ vựng trong hệ thống
Kích hoạt:
 Người dùng click vào icon “Edit” tại từ vựng muốn chỉnh sửa.
 Thành công: Người dùng sửa từ vựng thành công
 Không thành công: Người dùng sửa từ vựng không thành công
2 Người dùng click vào icon Trang web hiển thị hộp thoại hiển
“Edit” ở từ vựng muốn sửa thị tất cả thông tin về từ vựng đã
chọn
3 Người dùng chỉnh sửa và chọn Hiển thị thông tin người dùng đã
lại nghĩa của từ, cấp bậc, ký âm, chỉnh sửa
loại từ, chuyên ngành, chủ đề,
câu ví dụ, từ đồng nghĩa, từ trái
nghĩa, ghi chú của từ vựng
4 Người dùng click vào nút “Sửa Trang web xuất hiện thông báo
79
từ” “Chỉnh sửa từ thành công”
[Thay thế 1] [Ngoại lệ 1]
1 Người dùng click vào “Cancel” Đóng hộp thoại thêm từ vựng
Ngoại lệ:

T
các trường bắt buộc hoặc bỏ trống trường thông tin.
tất cả
Mối liên hệ:

2.4.3.12. Use case “Xóa từ vựng”
Hình 43. Lược đồ chức năng Xóa từ vựng

Bảng 27. Bảng mô tả chức Xóa từ vựng

case
80
Tên use case Xóa từ vựng

 Người tạo nội dung và Người quản trị
Tổng quan:
 Cho phép xóa từ vựng trong hệ thống
Mục tiêu:
 Người dùng sẽ xóa từ vựng trong hệ thống
Kích hoạt:
 Người dùng click vào icon “Delete” tại từ vựng muốn xóa.
 Thành công: Người dùng xóa từ vựng thành công
 Không thành công: Người dùng xóa từ vựng không thành công
2 Người dùng click vào icon Trang web hiển thị hộp thoại xác
“Delete” ở từ vựng muốn xóa nhận “Bạn có muốn xóa từ vựng?”
3 Người dùng chọn “Yes” Đóng hộp thoại xác nhận, hiển thị
thông báo “Xóa từ vựng thành
81
[Thay thế 1] công.” và cập nhật lại danh sách từ
vựng.
[Ngoại lệ 1]
1 Người dùng click vào “No” Đóng hộp thoại xác nhận
Ngoại lệ:

T
1 Không thể xóa được từ vựng Hiển thị thông báo lỗi “Error, không
thể xóa từ vựng.”
Mối liên hệ:

2.4.3.13. Use case “Thêm bài trắc nghiệm”

uc Usecases
Them bai trac nghiem
Nguoi tao noi dung

Admin
Hình 44. Lược đồ chức năng Thêm bài trắc nghiệm

Bảng 28. Bảng mô tả chức năng Thêm bài trắc nghiệm

case
Tên use case Thêm bài trắc nghiệm
82

trị
Tổng quan:
 Cho phép thêm bài trắc nghiệm của các bài luyện nghe và ngữ pháp trong
hệ thống
Mục tiêu:
 Người dùng sẽ thêm được bài trắc nghiệm mới
Kích hoạt:
 Người dùng click vào “Quản lý bài trắc nghiệm”.
 Người dùng click vào bài nghe hoặc ngữ pháp muốn thêm bài trắc nghiệm
 Thành công: Người dùng thêm bài trắc nghiệm thành công
 Không thành công: Người dùng thêm bài trắc nghiệm không thành công
1 Người dùng click vào “Quản lý Trang web hiển thị danh sách bài
bài trắc nghiệm” nghe và ngữ pháp của hệ thống
2 Người dùng click vào “Thêm Trang web chuyển hướng đến trang
quiz” và tiếp tục click vào icon thêm câu hỏi cho bài trắc nghiệm
“Add”
83
3 Người dùng nhập đầy đủ câu Hiển thị nội dung người dùng đã
hỏi, các đáp án cho câu hỏi và nhập
check tại đáp án đúng
4 Người dùng click vào “Thêm” Trang web xuất hiện thông báo
[Thay thế 1] “Thêm thành công” và quay về
trang hiển thị câu hỏi của bài trắc
nghiệm
[Ngoại lệ 1]
[Ngoại lệ 2]
[Ngoại lệ 3]
[Ngoại lệ 4]
1 Người dùng click vào “Quay Quay về trang câu hỏi của bài trắc
lại” nghiệm
Ngoại lệ:

T
1 Người dùng không check đáp án Hiển thị thông báo lỗi “Please check
đúng the correct answer”.
2 Người dùng để trống câu hỏi Hiển thị lỗi tại trường them câu hỏi
3 Người dùng chỉ nhập một đáp án Hiển thị lỗi “Error, câu hỏi không
hợp lệ”
4 Người dùng check chọn đáp án Hiển thị lỗi “Error, câu hỏi không
đúng cho tất cả các đáp án được hợp lệ”
nhập
Mối liên hệ:
84
 Nhập 2-3 đáp án cho câu hỏi
2.4.3.14. Use case “Chỉnh sửa bài trắc nghiệm”

uc Usecases
Chinh sua bai trac

nghiem
Nguoi tao noi dung
Nguoi quan tri
Hình 45. Lược đồ chức năng Thêm bài trắc nghiệm

Bảng 29. Bảng mô tả chức năng Thêm bài trắc nghiệm

case
Tên use case Chỉnh sửa bài trắc nghiệm

trị
Tổng quan:
 Cho phép chỉnh sửa bài trắc nghiệm của các bài luyện nghe và ngữ pháp
trong hệ thống
Mục tiêu:
 Người dùng sẽ chỉnh sửa bài trắc nghiệm của hệ thống.
Kích hoạt:
85
 Người dùng click vào “Quản lý bài trắc nghiệm”.
 Người dùng click vào bài nghe hoặc ngữ pháp muốn chỉnh sửa bài trắc
nghiệm
 Thành công: Người dùng chỉnh sửa bài trắc nghiệm thành công
 Không thành công: Người dùng chỉnh sửa bài trắc nghiệm không thành
công
1 Người dùng click vào “Quản lý Trang web hiển thị danh sách bài
bài trắc nghiệm” nghe và ngữ pháp của hệ thống
“Add” thêm câu hỏi cho bài trắc nghiệm
3 Người dùng đầy đủ nhập câu Hiển thị nội dung người dùng đã
hỏi, các đáp án cho câu hỏi và nhập
check tại đáp án đúng
4 Người dùng click vào “Thêm” Trang web xuất hiện thông báo
[Thay thế 1] “Thêm thành công” và quay về
nghiệm
[Ngoại lệ 1]
[Ngoại lệ 2]
[Ngoại lệ 3]
[Ngoại lệ 4]
86
5 Người dùng click vào câu hỏi Trang web chuyển hướng đến trang
muốn chỉnh sửa chỉnh sửa câu hỏi cho bài trắc
nghiệm
6 Người dùng chỉnh sửa câu hỏi, Hiển thị nội dung người dùng đã
các đáp án cho câu hỏi và check nhập
tại đáp án đúng
7 Người dùng click vào “Sửa” Trang web xuất hiện thông báo
[Thay thế 1] “Chỉnh sửa thành công” và quay về
nghiệm
[Ngoại lệ 1]
[Ngoại lệ 2]
[Ngoại lệ 3]
[Ngoại lệ 4]
8 Người dùng clicl và icon Hiển thị hộp thoại thống báo “Bạn
“Delete” tại câu hỏi muốn xóa có muốn xóa câu hỏi?”
9 Người dùng chọn “OK” Xóa câu hỏi, đóng hộp thoại và tải
[Thay thế 2] lại trang
1 Người dùng click vào “Quay Quay về trang câu hỏi của bài trắc
lại” nghiệm
Ngoại lệ:

T
1 Người dùng không check đáp án Hiển thị thông báo lỗi “Please check
87
đúng the correct answer”.
2 Người dùng để trống câu hỏi Hiển thị lỗi tại trường them câu hỏi
3 Người dùng chỉ nhập một đáp án Hiển thị lỗi “Error, câu hỏi không
hợp lệ”
4 Người dùng check chọn đáp án Hiển thị lỗi “Error, câu hỏi không
đúng cho tất cả các đáp án được hợp lệ”
nhập
Mối liên hệ:

 Nhập 2-3 đáp án cho câu hỏi
2.4.4. Chức năng của “Người quản trị”

2.4.4.1. Use case “Khóa tài khoản”
uc Usecases
Khoa tai khoan
Nguoi quan tri
Hình 46. Lược đồ chức năng Khóa tài khoản

Bảng 30. Bảng mô tả chức năng Khóa tài khoản

case
Tên use case Khóa tài khoản
88
 Người quản trị

Tổng quan:
 Cho phép người quản trị khóa người dùng.

Mục tiêu:
 Người dùng bị khóa sẽ không thể truy cập vào website

Kích hoạt:
 Quản trị click vào “Quản lý người dùng”.

 Quản trị chọn một tài khoản muốn khóa.
 Quản trị click vào “Khóa tài khoản”.
 Người dùng đã đăng nhập vào hệ thống với quyền quản trị viên.
 Thành công: Trang web thông báo “Account was blocked.”

 Không thành công: Trang web hiện thông báo “Couldn’t block account.”
1 Quản trị click vào “Quản lý Hiển thị danh sách người dùng trong
người dùng” hệ thống
2 Quản trị chọn một tài khoản Chuyển hướng đến trang chi tiết
muốn khóa người dùng
3 Quản trị click vào “Khóa tài Hiển thị thông báo “Account was
khoản” blocked”
[Ngoại lệ 1]
89
Ngoại lệ:

T
1 Khóa tài khoản không thành công Đóng hộp thoai. Hiển thị thông báo
“Couldn’t block account”.
Mối liên hệ:

2.4.4.2. Use case “Mở khóa tài khoản”

uc Usecases
Mo khoa tai khoan
Nguoi quan tri
Hình 47. Lược đồ chức năng Mở khóa tài khoản

Bảng 31. Bảng mô tả chức năng Mở khóa tài khoản

case
Tên use case Mở khóa tài khoản

Tổng quan:
 Cho phép người quản trị mở khóa tài khoản người dùng.
90
Mục tiêu:
 Người dùng có thể truy cập vào website
Kích hoạt:

 Quản trị chọn một tài khoản mở muốn khóa.
 Quản trị click vào “Mở khóa tài khoản”.
 Thành công: Trang web thông báo “Account was unblocked.”.

 Không thành công: Trang web hiện thông báo “Couldn’t unblock
account.”.
muốn mở khóa người dùng
3 Quản trị click vào “Mở khóa tài Hiển thị thông báo “Account was
khoản” unblocked”
[Ngoại lệ 1]

Ngoại lệ:

T
1 Khóa tài khoản không thành công Đóng hộp thoai. Hiển thị thông báo
91
“Couldn’t unblock account”.
Mối liên hệ:

2.4.4.3. Use case “Phân quyền người dùng”

uc Usecases
Phan quyen nguoi

dung
Nguoi quan tri
Hình 48. Lược đồ chức năng Phân quyền người dùng

Bảng 32. Bảng mô tả chức năng phân quyền người dùng

case
Tên use case Phân quyền người dùng

Tổng quan:
 Cho phép người quản trị cấp quyền truy cập cho người dùng.
Mục tiêu:
 Người dùng truy cập vào hệ thống theo quyền mặc định.
Kích hoạt:
92
 Quản trị click chọn một tài khoản người dùng.
 Thành công: Trang web thông báo “Chỉnh sửa tài khoản thành công.”.
 Không thành công: Trang web hiện thông báo “Không thể chỉnh sửa tài
khoản”.
muốn chỉnh sửa người dùng
3 Quản trị click vào “Chỉnh sửa” Chuyển hướng đến trang chỉnh sửa
4 Quản trị thay đổi quyền của Hiển thị thông tin được thay đổi
người dùng
5 Quản trị click “Sửa” Hiển thị thông báo “Chỉnh sửa tài
[Thay thế 1] khoản thành công”, quay về trang
chi tiết người dùng
[Ngoại lệ 1]
1 Người dùng chọn “Quay lại” Quay về trang chi tiết người dùng
Ngoại lệ:
93
T
1 Phân quyền không thành công Đóng hộp thoai. Hiển thị thông báo
“Chỉnh sửa tài khoản không thành
công”.
Mối liên hệ:

2.4.4.4. Use case “Thêm người dùng”

uc Usecases
Them nguoi dung
Nguoi quan tri
Hình 49. Lược đồ chức năng Thêm người dùng

Bảng 33. Bảng mô tả chức năng Thêm người dùng

case
Tên use case Thêm người dùng

Tổng quan:
 Cho phép người quản trị thêm người dùng vào hệ thống.
94
Mục tiêu:
 Quản trị chỉnh thêm được người dùng
Kích hoạt:

 Thành công: Trang web thông báo “Thêm tài khoản thành công.”.
 Không thành công: Trang web hiện thông báo “Không thể thêm tài
khoản”.
2 Quản trị click vào icon “Add” Chuyển hướng đến trang thêm
người dùng
3 Quản trị nhập email, tên và chọn Hiển thị thông tin quản trị nhập
quyền cho người dùng
4 Quản trị click “Thêm” Hiển thị thông báo “Thêm tài khoản
[Thay thế 1] thành công”, quay về trang danh
sách người dùng
[Ngoại lệ 1]
1 Người dùng chọn “Quay lại” Quay về trang danh sách người
dùng
95
Ngoại lệ:

T
1 Quản trị nhập email đã tồn tại Hiển thị thông báo “Email đã tồn tại”
Mối liên hệ:

2.4.4.5. Use case “Chỉnh sửa người dùng”

uc Usecases
Chinh sua nguoi dung
Nguoi quan tri
Hình 50. Lược đồ chức năng Chỉnh sửa người dùng

Bảng 34. Bảng mô tả chức năng chỉnh sửa người dùng

case
Tên use case Chỉnh sửa người dùng

Tổng quan:
 Cho phép người quản trị chỉnh sửa thông tin cho người dùng.
Mục tiêu:
 Người quản trị chỉnh sửa thông tin người dùng.
96
Kích hoạt:

 Thành công: Trang web thông báo “Chỉnh sửa tài khoản thành công.”.
 Không thành công: Trang web hiện thông báo “Không thể chỉnh sửa tài
khoản”.
muốn chỉnh sửa người dùng
3 Quản trị click vào “Chỉnh sửa” Chuyển hướng đến trang chỉnh sửa
4 Quản trị chỉnh sửa tên, tài khoản Hiển thị thông tin được thay đổi
email của người dùng
5 Quản trị click “Sửa” Hiển thị thông báo “Chỉnh sửa tài
[Thay thế 1] khoản thành công”, quay về trang
chi tiết người dùng
[Ngoại lệ 1]
[Ngoại lệ 2]
1 Người dùng chọn “Quay lại” Quay về trang chi tiết người dùng
97
Ngoại lệ:

T
1 Người dùng để trống các trường Hiển thị lỗi tại các trường thông tin
bắt buộc đó.
2 Email đã tồn tại Hiển thị lỗi “Email đã tồn tại.”
Mối liên hệ:

2.4.4.6. Use case “Xem danh sách người dùng”

uc Usecases
Xem danh sach nguoi

dung
Nguoi quan tri
Hình 51. Lược đồ chức năng Xem danh sách người dùng
Bảng 35. Bảng mô tả chức năng Xem danh sách người dùng

case
Tên use case Xem danh sách người dùng

Tổng quan:
98
 Cho phép người quản trị xem danh sách người dùng trong hệ thống.
Mục tiêu:
 Người quản trị xem được danh sách người dùng của hệ thống
Kích hoạt:

 Thành công: Hiển thị danh sách người dùng.


Ngoại lệ:
Mối liên hệ:
2.4.4.7. Use case “Xem thống kê”

uc Usecases
Xem thong ke
Nguoi quan tri
Hình 52. Lược đồ chức năng Xem thống kê
99
Bảng 36. Bảng mô tả chức năng Xem thống kê

case
Tên use case Xem thống kê

Tổng quan:
 Cho phép người quản trị xem danh sách thống kê số lượng người dùng,
bài nghe, ngữ pháp, tự vựng, bài trắc nghiệm.
Mục tiêu:
 Người quản trị xem được danh sách thống kê số lượng người dùng, bài
nghe, ngữ pháp, tự vựng, bài trắc nghiệm.
Kích hoạt:
 Quản trị click vào “Thống kê”.

 Thành công: Hiển thị danh sách người dùng.

1 Quản trị click vào “Thống kê” Hiển thị số lượng người dùng, bài
nghe, ngữ pháp, tự vựng, bài trắc
nghiệm của hệ thống
100
Ngoại lệ:
Mối liên hệ:
101
Chương 3. THIẾT KẾ PHẦN MỀM
4.1. LƯỢC ĐỒ LỚP
4.2. LƯỢC ĐỒ TUẦN TỰ
class LearningEnglish
User
HighScore Vocabulary
Game
+ Avatar: String
+ Coin: Number + AccountId: Schema.Types.ObjectId + getWordPackCWG(): json + Antonyms: [String]
+ Email: String 0...1 + Coin: Number
0...* 0...* + getWordPackFS(): json + Examples: [String]
+ Name: String + IsChecked: Boolean
+ IsLocked: Number + getWordPackWMG(): json
0...3 + Level: String
+ Name: String + getLeaderboard(): json
+ Password: String 0...* + Mean: String
+ postScore(): json
+ RoleType: String + Note: String
+ Phonetic: String
+ activateEmail(): json + Picture: String
+ addUser() : json Statistics 0...* + Specialty: String
+ editUser() : json + Synonyms: [String]
+ forgotPassword(): json + countGrammar(): json
+ Topics: String
+ countListening(): json
+ getAccessToken(): json + Type: String
+ getAllUsers(): json + countQuiz(): json
+ Word: String
+ getTopCoin(): json + countUser(): json
+ getUserDetails(): json + countWord(): json + deleteWord(): json
+ getUserInfo(): json + getAllWords(): json
Listening
+ lockUser() : json + getByTopic(): json
+ login(): json + CreateDate: Date + getSearchWord(): json
+ logout(): json + Description: String + getTopics(): json
+ putUpdateUserCoin( ): json + Image: String + getTotalWordPack(): json
+ register( ): json + Name: String + getTotalWordPackTopic(): json
Quiz
+ resetPassword(): json + Script: String + getWordByWord(): json
+ unlockUser(): json + Topic: String + ListeningId: ObjectId + getWordDetails(): json
+ updateAvatar(): json + Video: String + getWordPack(): json
+ deleteById(): json + postContributeWord(): json
+ updatePassword(): json
+ deleteListen(): json 0...1 1 + getAllQuizzes(): json + putContributeWord(): json
+ updateProfile(): json
+ getAll(): json + getById(): json
+ getByTopic(): json + getByListeningId(): json
+ getDetails(): json + postQuiz(): json
IPA + getListening(): json Grammar
+ getSearchListen(): json 0...* 1
+ Description: String + getTopics(): json + Audio: String
+ Examples: [Schema.Types.Map] + Content: String Grammar_Item
+ postListening(): json
+ Image: String + putListen(): json + Image: String
1 + Content: String
+ Phonetic: String + Items: Schema.Types.Map 1
0...1 + Example: [String]
+ Title: String + Level: String
Question
+ Type: String + Script: String
+ Video: String + Answers: [Schema.Types.Map] + Title: String 0...*
Answer + Video: String
+ getById(): json + Content: String
+ getIPARelative( ): json + Content: string + QuizId: ObjectId + deleteById(): json
+ getIPAsByType( ): json + IsCorrect: boolean 1 + deleteById(): json + getAllGrammars(): json
+ QuestionId: ObjectId 2...3 + getById(): json
+ getById(): json
+ getByQuizId() : json + getByLevel(): json
+ postQuestion() : json + getGrammar( ): json
+ putQuestion(): json + getLevels(): json
+ getSearchGrammar(): json
+ postGrammar(): json
+ putGrammar( ): json
Hình 53. Lược đồ lớp website Learning English

3.1.1. Khách vãng lai
3.2.1.1. Lược đồ Đăng ký
102
sd Dang Ky
KhachVangLai
Main Login Register UserController User
Nhan button Dang Ky()
Den trang Dang Ky()
Nhap Ten nguoi dung, Email, Mat khau, Xac

thuc mat khau()
Click button Dang Ky()
Dang ky tai khoan (ten, email, mat khau)
Tim kiem nguoi dung (email)
alt
[Nguoi dung nhap day du thong tin]

alt
return(): user
[Tim thay nguoi dung voi email tuong tu]
return(): error message

show error message()
[Thanh cong] return(): null
Ma hoa mat
khau, gui email
return() : success den email tai
khoan vua dang
ky()
Thong bao dang ky
thanh cong()
Di den trang Dang nhap()
[Mat khau duoi 6 ky tu]

[Xac thuc mat khau va mat khau khong trung khop]
[Nguoi dung dien day du thong tin]

Hình 54. Lược đồ tuần tự chức năng Đăng ký

3.2.2. Người dùng
103
3.2.2.1. Lược đồ Đăng nhập
sd Dang Nhap
NguoiDung
Main Login UserController User
Nhan button Dang Nhap()
Den trang Dang Nhap( )
Nhap Email va Mat khau()
Click button Dang Nhap( )
alt

Xac thuc nguoi dung (Email, Mat khau)
Tim kiem user( )
alt return( ): user, message
[Email khong ton tai]

return( ): error message
[Mat khau khong dung]

[Tai khoan bi khoa]

return(): error
message
[Thanh Cong] return() : success
Di den trang chu nguoi dung( )
[Nguoi dung de trong Email hoac Mat khau]
Hình 55. Lược đồ tuần tự chức năng Đăng nhập

3.2.2.2. Lược đồ Đăng xuất
104
sd Dang xuat
NguoiDung
TrangChu QuanLyNguoiDung
click avatar()
click Dang xuat( )
Dang xuat tai khoan( )
return() : success
reload( )
Thong bao Dang xuat thanh cong( )
Hình 56. Lược đồ tuần tự chức năng Đăng xuất

3.2.2.3. Lược đồ Học bảng phiên âm
105
sd Hoc phien am
NguoiDung
ManHinhTrangChu ManHinhPhienAm QuanLyPhienAm IPAs
click button Pronunciation()
Di den trang phien am()
Lay danh sach phien am()
Tim kiem phien am()
return(): danh sach phien

am
return(): danh sach phien am
Chon mot phien am()
Lay chi tiet phien am(id)
Tim kiem phien am(id)
return(): phien am
return(): phien am
opt
[Nguoi dung click Relative Pronunciation]

click Relative pronunciation()
Lay danh sach phien am cung loai(type)
Tim kiem cac phien am cung loai(type)

Hình 57. Lược đồ tuần tự chức năng Học phiên âm

3.2.2.4. Lược đồ Học ngữ pháp
106
sd Hoc ngu phap
NguoiDung
MucDoNguPhap DanhSachNguPhap ChiTietNguPhap QuanLyBaiNghe Listenning Quiz Question
Chon mot muc do()

Di den trang danh
sach ngu phap( ) Lay danh sach
ngu phap(level)
Tim kiem ngu phap( level)
return() : list
Hien thi danh sach grammar
()
Chon mot ngu phap()
Di den trang chi tiet

( grammarid)
Lay ngu phap va quiz Lay ngu phap
( grammarid) (grammarid)
return() : grammar
Tim kiem bai trac nghiem(grammarid)
return( ): quiz
Lay danh sach cau hoi cua quiz(quizid)

return(): list question
return(): grammar, quiz
opt Nguoi dung chon Quiz click Quiz( )
Chon dap an( )
opt Chon CheckAnswer

click CheckAnswer
()
Hien thi ket qua dung, sai

()
opt Chon ResetQuiz
clickResetQuiz
()
reload( )
opt Chon ShowAnswer

clickShowAnswer
()
Hien thi dap an cac cau hoi()
opt Nguoi dung chon Grammar

Click Grammar()
Hình 58. Lược đồ tuần tự chức năng Học ngữ pháp
107
3.2.2.5. Lược đồ học từ vựng
sd Hoc tu vung
NguoiDung
ChuDeTuVung GalleryTuVung SlideTuVung QuanLyTuVung Word
Chon mot chu de( )

Di den trang gallery( )
Lay danh sach tu(topic)
Tim kiem tu vung(topic)
return(): list word

Hien thi danh sach tu()
opt Xem danh sach o che do gallery
Click icon Next( )
Hien thi danh sach 7 tu vung tiep theo()
click icon Prev()
Hien thi danh sach 7 tu vung truoc do()
opt Xem danh sach o che do Slide
click icon Slide()
Chuyen sang che do silde( )
click icon Next( )
Hien thi tu tiep theo()
click icon Prev()
Hien thi tu da xem truoc do()
Hình 59. Lược đồ tuần tự chức năng Học từ vựng
108
3.2.2.6. Lược đồ Học bài nghe
sd Hoc bai nghe
NguoiDung
ChuDeBaiNghe DanhSachBaiNghe ChiTietBaiNghe QuanLyBaiNghe Listenning Quiz Question
Chon mot chu de()

Di den trang danh
sach bai nghe() Lay danh sach
bai nghe(topic)
Tim kiem bai nghe(topic)
return(): list listenning
Hien thi danh sach()
Chon mot bai nghe()
Di den trang chi tiet(listeningid)

Lay bai nghe va quiz
(listeningid) Lay bai nghe(listeningid)
return(): listening
Tim kiem bai trac nghiem(listeningid)
return(): quiz

return(): list question
return(): listening, quiz
opt Nguoi dung chon Quiz

click Quiz()
Chon dap an()
opt Chon CheckAnsw er

click CheckAnswer()
Hien thi ket qua dung, sai()
opt Nguoi dung chon ResetQuiz
clickResetQuiz()
reload()
opt Chon Show Answ er

clickShowAnswer()
Hien thi dap an cac cau hoi()
Hình 60. Lược đồ tuần tự chức năng Học bài nghe
109
3.2.2.7. Lược đồ Đổi mật khẩu
sd Doi mat khau
NguoiDung
TrangChu ThongTinCaNhan QuanLyNguoiDung User
Click avatar tren thanh navigation()
Chon muc Thong tin ca nhan()
Hien thi thong tin nguoi dung()
Click button Chinh sua()

Di den
trang chinh
sua()
ChinhSuaThongTin
Nhap mat khau moi va xac nhan mat khau()
click Save()
alt Kiem tra hop le

[Mat khau duoi 6 ky tu]
Thong bao loi()
[Mat khau moi va xac nhan mat khau khong trung khop]
Thong bao loi()
Doi mat khau(mat khau) Doi mat khau cua tai

khoan(mat khau)
alt return(): success

[T hanh cong] return(): success,
message
Thong bao doi thanh cong()
[T hat bai]
return(): error
Thong bao loi()
Hình 61. Lược đồ tuần tự chức năng Đổi mật khẩu

3.2.3. Người tạo nội dung
3.2.3.1. Xem danh sách bài nghe
110
sd Xem danh sach bai nghe
NguoiTaoNoiDung
ManHinhTrangChu QuanLyBaiNghe QuanLyBaiNghe Listening
click Quan ly bai nghe( )

Di den trang quan ly bai nghe()
Lay danh sach bai nghe trong he
thong() Lay danh sach bai nghe( )
return( ): list listening
Hien thi danh sach bai nghe()
opt Tim kiem bai nghe

Nhap ten bai nghe()
Tim kiem danh sach bai nghe co ten giong
voi tu khoa tim kiem( name)
Tim kiem danh sach
bai nghe(name)
alt return( ): list listening

[Ket qua tim kiem khac null] Hien thi danh sach bai nghe()
[Ket qua tim kiem la null] return() : null

Hien thi "No result"( )
opt Che do xem bai nghe

click icon Filter( )
Chon mot trong hai tuy chon "Newest" hoac "Oldest"()

Lay danh sach theo thu tu Lay danh sach theo thu tu(type)
(type)

opt Loc danh sach bai nghe

click icon Setting( )
Hien thi hop thoai loc( )
HopThoaiLoc
Chon chu de bai nghe muon loc( )
click button OK()
Dong hop thoai( )
Lay danh sach bai nghe(topic)

Tim kiem bai nghe(topic)

Hien thi danh sach loc()
Hình 62. Lược đồ tuần tự chức năng Xem danh sách bài nghe
111
3.2.3.2. Thêm bài nghe
sd Them bai nghe
NguoiTaoNoiDung
QuanLyBaiNghe ThemBaiNghe QuanLyBaiNghe Listenning
click icon Add()
Nhap ten, chu de, mo ta, video, hinh anh, script()
click button Them

()
alt
[Link youtube khong hop le]

[Nguoi dung nhap day du thong tin] Them bai nghe()

Tao moi bai nghe()
alt
return(): error message return(): null
[That bai]
[Thanh cong]
return(): listening
return(): success
Thong bao them thanh cong()
[Nguoi dung de trong cac thong tin bat buoc]

show error mesage()
Hình 63. Lược đồ tuần tự chức năng Thêm bài nghe

3.2.3.3. Chỉnh sửa bài nghe
112
sd Chinh sua bai nghe
NguoiTaoNoiDung
QuanLyBaiNghe ChinhSuaBaiNghe QuanLyBaiNghe Listenning
click icon Edit tai bai nghe can

chinh sua()
Di den trang chi tiet bai nghe()
Tim kiem bai nghe

( id)
Tim kiem bai nghe(id)
return() : listening
return(): listening
Nhap ten, chu de, mo ta, video, hinh anh, script( )
click button Sua()
alt
[Nguoi dung day du cac thong tin] Chinh sua bai nghe( )
Tim kiem va chinh sua bai nghe( )
alt return() : null

return() : error message
[That bai]
[Thanh cong] return() : listening
return() : success
Thong bao chinh sua thanh cong( )
[Nguoi dung de trong cac truong thong tin bat buoc]
show error mesage()
Hình 64. Lược đồ tuần tự chức năng Chỉnh sửa bài nghe
113
3.2.3.4. Xóa bài nghe
sd Xoa bai nghe
NguoiTaoNoiDung
QuanLyBaiNghe QuanLyBaiNghe Listening
click icon Delete tai bai nghe()
Hien thi hop thoai xac nhan( )
DialogXacNhan
alt
[Nguoi dung click OK] Dong hop thoai( )
Xoa bai nghe( id)

Tim kiem va xoa bai nghe( id)
alt
return() : true
[Thanh cong]
return() : success
reload( )
[That bai] return() : false

Thong bao xoa khong thanh cong()
[Nguoi dung click Cancel]
Dong hop thoai( )
Hình 65. Lược đồ tuần tự chức năng Xóa bài nghe

3.2.3.5. Xem danh sách ngữ pháp
114
sd Xem danh sach ngu phap
NguoiTaoNoiDung
ManHinhTrangChu QuanLyNguPhap QuanLyNguPhap Grammar
click Quan ly ngu phap()

Di den trang quan ly ngu phap()
Lay danh sach ngu phap trong he
thong() Lay danh sach ngu phap( )
return() : list grammar
Hien thi danh sach ngu phap()
opt Tim kiem ngu phap

Nhap ten ngu phap()
Tim kiem danh sach ngu phap co ten giong
voi tu khoa tim kiem(name)
Tim kiem danh sach
ngu phap(name)
alt return() : list grammar

[Ket qua tim kiem khac null] Hien thi danh sach ngu phap()
[Ket qua tim kiem la null] return(): null

Hien thi "No result"()
opt Sap xep ngu phap

click icon Filter()
Chon mot trong hai tuy chon "Newest" hoac " Oldest" ()
Lay danh sach ngu phap theo
Lay danh sach theo thu tu(type)
thu tu(type)

Hien thi danh sach ngu phap()
opt Che do xem

click icon Setting()
Hien thi hop thoai loc()
HopThoaiLoc
Chon muc do ngu phap muon loc
()
click button OK()
Dong hop thoai()
Lay danh sach ngu phap(level)

Tim kiem ngu phap(level)

Hình 66. Lược đồ tuần tự chức năng Xem danh sách ngữ pháp
115
3.2.3.6. Thêm ngữ pháp
sd Them ngu phap
NguoiTaoNoiDung
QuanLyNguPhap ThemNguPhap QuanLyNguPhap Grammar
click icon Add( )
Nhap tieu de, noi dung, video, hinh anh, audio,

script( )
click icon Add de them cac chu de cho ngu phap( )
Hien thi hop thoai( )
HopThoaiThemChuDe
Nhap chu de, noi dung( )
alt
[Nguoi dung click Save] Dong hop thoai( )

Them chu de moi vao danh
sach chu de( )
Dong hop thoai( )
click button Them()
Them ngu phap moi( )

Them ngu phap vao database()
alt
alt return() : null

[That bai]
show error mesage( )
[Thanh cong]
return() : grammar
return(): success
Thong bao them

thanh cong( )
Hình 67. Lược đồ tuần tự chức năng Thêm ngữ pháp
116
3.2.3.7. Chỉnh sửa ngữ pháp
sd Chinh sua ngu phap
NguoiTaoNoiDung
QuanLyNguPhap ChinhSuaNguPhap QuanLyNguPhap Grammar
click icon Edit tai ngu phap( )
Di den trang chi tiet ngu phap( ) Lay chi tiet ngu phap( id)
Tim kiem ngu phap(id)
return() :
Hien thi chi tiet ngu phap() grammar
Nhap tieu de, noi dung, video, hinh anh, audio,
script()
opt Them chu de cho ngu phap

click icon Add de them cac chu de cho ngu phap( )
Hien thi hop thoai()
Nhap chu de, noi dung( ) HopThoaiThemChuDe
alt
[Nguoi dung chon Save] Them chu de moi vao danh

Dong hop thoai()
sach chu de( )
[Nguoi dung cho Cancel] Dong hop thoai()
opt Chinh sua chu de ngu phap

click vao chu de( )
Hien thi hop thoai()
Chinh sua ten chu de, noi dung()
alt
Dong hop thoai()
[Nguoi dung click Save] Luu chu de chinh sua()

Dong hop thoai()
click button Sua( )
alt Chinh sua ngu phap() Tim kiem va chinh

sua ngu phap()
alt return( ): grammar

return() : success
[Thanh cong]
[That bai] return() : null

show error
message( )
[Nguoi dung de trong thong tin bat buoc]


Hình 68. Lược đồ tuần tự chức năng Chỉnh sửa ngữ pháp
3.2.3.8. Xóa ngữ pháp
117
sd Xoa ngu phap
NguoiTaoNoiDung
QuanLyNguPhap QuanLyNguPhap Grammar
click icon Delete tai bai nghe( )
Hien thi hop thoai xac nhan( )
DialogXacNhan
alt
Dong hop thoai( )
[Nguoi dung click OK]
Xoa ngu phap( id)

Tim kiem va xoa ngu phap( id)
alt
return() : true
[Thanh cong]
return() : success
reload( )
[That cong] return() : false
Dong hop thoai( )
Hình 69. Lược đồ tuần tự chức năng Xóa ngữ pháp

3.2.3.9. Xem danh sách từ vựng
118
sd Xem danh sach tu vung
NguoiTaoNoiDung
ManHinhTrangChu QuanLyTuVung QuanLyTuVung Word
click Quan ly bai nghe( )

Di den trang quan ly tu vung()
Lay danh sach tu vung trong he
thong() Lay danh sach tu vung( )
return(): list word
opt Tim kiem tu
Nhap tu()
Tim kiem tu gan dung va dung voi tu khoa
tim kiem(word)
Tim kiem danh sach
tu(name)
alt return(): list word

[Ket qua tim kiem khac null] Hien thi danh sach tu( )
[Ket qua tim kiem la null]

return() : null
Hien thi "No result"( )
opt Sap xep tu vung
click icon Filter()
Chon mot trong hai tuy chon "A->z", " Z->A",

"Random"() Lay danh sach theo thu tu
Lay danh sach theo thu tu(type)
(type)
return(): list word

Hien thi danh sach tu( )
opt Loc danh sach tu vung
click icon Setting()
Hien thi hop thoai loc()
HopThoaiLoc
Chon chu de, loai tu, chuyen
nganh, cap bac tu muon loc()
click button OK()
Dong hop thoai()
Lay danh sach tu( )

Tim kiem bai nghe()
return(): list word

Hình 70. Lược đồ tuần tự chức năng Xem danh sách từ vựng
119
3.2.3.10. Thêm từ vựng
sd Them tu vung
NguoiTaoNoiDung
QuanLyTuVung ThemTuVung QuanLyTuVung Word
click icon Add()
Nhap day du cac thong tin bat buoc hoac khong

bat buoc ()
click button Them()
alt
[Cau vi du khong chua tu vung moi]

show error message( )
[Nguoi dung nhap day du thong tin] Tim kiem tu vung

( word)
Tim kiem tu vung(word)
alt
return() : null
[Tu chua ton tai]
Them tu vung moi()
Them tu vung moi()
alt return() : null

[That bai] return(): error message
[Thanh cong] return() : word
return(): success
Thong bao them thanh cong( )
[Tu da ton tai] retutrn() : word
Hình 71. Lược đồ tuần tự chức năng Thêm từ vựng

3.2.3.11. Chỉnh sửa từ vựng
120
sd Chinh sua tu vung
NguoiTaoNoiDung
QuanLyTuVung ChinhSuaTuVung QuanLyTuVung Word
click icon Edit tai tu muon chinh sua()

Di den trang chinh sua tu()
Lay chi tiet tu(id)
Tim kiem tu vung(id)
return(): word
Hien thi chi tiet tu vung()
Nhap day du cac thong tin bat buoc hoac khong

bat buoc ()
click button Sua()
alt
[Cau vi du khong chua tu vung moi]


Chinh sua tu
vung() Tim kiem va chinh
sua tu( )
alt
[That bai]
return( ): null
[Thanh cong]
return(): word
return( ): success
Thong bao chinh sua thanh
cong()
Hình 72. Lược đồ tuần tự chức năng Chỉnh sửa từ vựng
3.2.3.12. Xóa từ vựng
121
sd Xoa tu vung
NguoiTaoNoiDung
QuanLyTuVung QuanLyTuVung Word
click icon Delete tai bai nghe( )
Hien thi hop thoai xac nhan()
DialogXacNhan
alt
[Nguoi dung click OK] Dong hop thoai( )
Xoa tu vung(id)
Tim kiem va xoa tu vung(id)
alt
return() : true
return(): success
[Thanh cong]
reload( )
[That bai] return() : false


Dong hop thoai( )
Hình 73. Lược đồ tuần tự chức năng Xóa từ vựng

3.2.3.13. Thêm bài trắc nghiệm
122
sd Them bai trac nghiem
NguoiTaoNoiDung
QuanLyBaiTracNghiem ChiTietBaiTracNghiem ThemCauHoi QuanLyBaiTracNghiem QuanLyCauHoi Quiz Question
click vao mot bai nghe

hoac ngu phap()
Di den trarng chi tiet()
click button Them()
Tao bai trac nghiem ()

Tao bai trac nghiem()
return(): success return(): quiz
click icon Add()
Di den trang them cau hoi()
Nhap cau hoi, dap an, chon dap an dung()
Them cau hoi(quizid)
Them cau hoi cho bai trac nghiem(quizid)
alt
return(): question
[Thanh cong]
return(): success
Quay lai trang chi tiet quiz()
[That bai] return(): null
Hình 74. Lược đồ tuần tự chức năng Thêm bài trắc nghiệm
3.2.3.14. Chỉnh sửa bài trắc nghiệm
123
sd Chinh sua bai trac nghiem
NguoiTaoNoiDung
QuanLyBaiTracNghiem ChiTietBaiTracNghiem ChinhSuaCauHoi QuanLyCauHoi Question
click vao mot bai nghe

hoac ngu phap( )
Di den trang chi tiet()

Lay danh sach cau hoi(quizid)
return( ): list question

Hien thi cau hoi cua quiz( )
opt Chinh sua cau hoi cua quiz

click icon Edit tai cau hoi()
Di den trang chinh sua()
Chinh sua cau hoi, dap an, chon dap an dung()
Chinh sua cau hoi

( questionid)
Tim kiem va chinh sua cau
hoi(questionid)
alt
return( ): question
[Thanh cong] return(): success
Quay lai trang chi tiet quiz()
[That bai] return( ): null

opt Xoa cau hoi cua quiz
click icon Delete tai cau hoi( )

Hien thi hop thoai xac
nhan()
HopThoaiXacNhan
alt
Dong hop thoai( )
[Nguoi dung chon OK]
Xoa cau hoi(questionid)
Xoa cau hoi( questionid)
return( ): true
return(): success
reload( )
[Nguoi dung chon Cancel]

Dong hop thoai( )
Hình 75. Lược đồ tuần tự chức năng Chỉnh sửa bài trắc nghiệm
3.2.4. Người quản trị
124
3.2.4.1. Lược đồ Khóa tài khoản
sd Khoa nguoi dung
Nguoi quan tri

TrangChu QuanLyNguoiDung ChiTietNguoiDung QuanLyNguoiDung User
click Quan ly nguoi dung()
Den trang danh sach nguoi dung()
Lay danh sach nguoi dung()
return(): list user
Hien thi danh sach nguoi dung()
Chon mot tai khoan muon khoa()
Hien thi trang chi tiet()
click Khoa tai khoan()
Khoa tai khoan(id)
Khoa tai khoan(id)
alt return(): true

[Thanh cong] return(): success
Thong bao khoa thanh cong()
[That bai] return(): false

Thong bao loi()
Hình 76. Lược đồ tuần tự chức năng Khóa tài khoản
125
3.2.4.2. Lược đồ Mở khóa tài khoản
sd Mo khoa tai khoan
Nguoi quan tri

TrangChu QuanLyNguoiDung ChiTietNguoiDung QuanLyNguoiDung User
click Quan ly nguoi dung( )
Den trang danh sach nguoi dung

()
return( ): list
user
Hien thi danh sach nguoi dung
()
Chon mot tai khoan muon mo

khoa()
Hien thi trang chi tiet

()
click Mo khoa tai khoan()
Mo khoa tai khoan(id)
Mo khoa tai khoan( id)
alt
return( ): true
[Thanh cong]
return(): success
Thong bao mo khoa thanh

cong()
[That bai] return(): false

Thong bao loi()
Hình 77. Lược đồ tuần tự chức năng Mở khóa tài khoản

3.2.4.3. Lược đồ Phân quyền người dùng
126
sd Phan quyen nguoi dung
NguoiQuanTri
TrangChu QuanLyNguoiDung ChiTietNguoiDung ChinhSuaNguoiDung QuanLyNguoiDung User

Hien thi danh sach
nguoi dung()
Chon mot tai khoan()
Hien thi chi tiet nguoi dung()
click Chinh sua()
Chon quyen nguoi dung

()
(roleType)
Chinh sua nguoi dung(roleType)
return(): user
return(): success
Thong bao chinh sua thanh cong()
Hình 78. Lược đồ tuần tự chức năng Phân quyền người dùng
3.2.4.4. Lược đồ thêm người dùng
127
sd Them nguoi dung
NguoiQuanTri
TrangChu QuanLyNguoiDung ThemNguoiDung QuanLyNguoiDung User
Di den trang quan ly()
click icon Add()
Den trang them nguoi dung()
Nhap email, ten, chon quyen cho nguoi dung()
click button Them()
Them nguoi dung()
Tim kiem nguoi dung(email)
alt
return(): null
[Thanh cong]
Them nguoi dung()
return(): success
return(): success
[That bai] return(): user
Thong bao tai khoan da ton tai()
Hình 79. Lược đồ tuần tự chức năng Thêm người dùng

3.2.4.5. Lược đồ chỉnh sửa người dùng
128
sd Chinh sua nguoi dung
NguoiQuanTri
TrangChu QuanLyNguoiDung ChiTietNguoiDung ChinhSuaNguoiDung QuanLyNguoiDung User

Hien thi danh sach
nguoi dung()
Chọn mot tai khoan()
Hien thi chi tiet nguoi dung( )
click Chinh sua()
Chinh sua ten va email( )

( email, ten)
Tim kiem nguoi dung
( email)
alt return() : null
[Thanh Cong]
Chinh sua nguoi dung( email, ten)
return(): user
return(): success
Thong bao chinh sua thanh cong()
[Email da ton tai] return(): error message
Thong bao email da ton tai()
Hình 80. Lược đồ tuần tự chức năng Chỉnh sửa người dùng
3.2.4.6. Lược đồ Xem danh sách người dùng
129
sd Xem danh sach nguoi dung
NguoiQuanTri
TrangChu QuanLyNguoiDung QuanLyNguoiDung User

Di den trang danh
sach nguoi dung()
Lay tat ca nguoi dung()
return(): list user
return(): list user
Hien thi danh sach nguoi dung()
Hình 81. Lược đồ tuần tự Xem danh sách người dùng

3.2.4.7. Lược đồ Xem thống kê
sd Xem thong ke
NguoiQuanTri Database
TrangChu ThongKe QuanLyThongKe
click Thong ke()
Di den trang Thong ke() Dem so luong bai nghe, ngu phap,
tu vung, bai trac nghiem, nguoi
dung()
Dem so luong bai nghe, ngu phap, tu
vung, bai trac nghiem, nguoi dung()
return(): so luong bai nghe,

ngu phap, tu vung, bai trac
return(): so luong bai nghe, ngu phap, tu nghiem, nguoi dung
vung, bai trac nghiem, nguoi dung
Hien thi so luong bai nghe, ngu phap,

tu vung, bai trac nghiem, nguoi dung( )
Hình 82. Lược đồ tuần tự chức năng Xem thống kế

4.3. THIẾT KẾ CƠ SỞ DỮ LIỆU
130
3.3.1. Lược đồ cơ sở dữ liệu
Hình 83. Lược đồ Cơ sở dữ liệu

3.3.2. Mô tả các bảng
3.3.2.1. Bảng Grammars
Bảng 37. Bảng Grammars
STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id ObjectId Mã ngữ pháp
2 Title String Tiêu đề của ngữ pháp
3 Content String Nội dung của ngữ pháp
4 Video String Link video của ngữ pháp
5 Audio String Link audio của ngữ pháp
6 Image String Link hình ảnh minh họa của ngữ

pháp
7 Script String Phụ đề của video ngữ pháp
8 Level Number Cấp độ của ngữ pháp
131
9 Item Array Các điểm, ví dụ của ngữ pháp
3.3.2.2. Bảng Highscores

Bảng 38. Bảng Highscores
1 id ObjectId Mã của highscore
2 Name String Tên game
3 AccountId ObjectId Mã tài khoản
4 Coin String Số điểm
3.3.2.3. Bảng IPAs

Bảng 39. Bảng IPA
1 id ObjectId Mã phiên âm
2 Audio String Link audio của phiên âm
3 Type String Loại phiên âm
4 Examples Array Danh sách ví dụ của phiên âm
5 Phonetic String Ký âm của phiên âm
6 Video String Link video của phiên âm
7 Image String Link hình ảnh minh họa của phiên
132
âm
8 Title String Tiêu đề của phiên âm
3.3.2.4. Bảng Listenings

Bảng 40. Bảng Listenings
1 id ObjectId Mã bài nghe
2 Name String Tên bài nghe
3 Topic String Chủ đề của bài nghe
4 Description String Mô tả của bài nghẻ
5 Video String Link video của bài nghe
6 Image String Link hình ảnh minh họa của bài nghe
7 Script String Phụ đề của video bài nghe
8 CreateDate Date Ngày tạo bài nghe
3.3.2.5. Bảng Questions

Bảng 41. Bảng Questions
1 id ObjectId Mã câu hỏi
2 Content String Nội dung câu hỏi
133
3 QuizId String Mã quiz
4 Answers Array Danh sách các câu trả lời
3.3.2.6. Bảng Quizzes

Bảng 42. Bảng Quizzes
1 id ObjectId Mã quiz
2 ListeningId String Mã bài nghe
3.3.2.7. Bảng Users

Bảng 43. Bảng Users
1 id ObjectId Mã người dùng
2 Name String Tên người dùng
3 Email String Email của người dùng
4 Password String Mật khẩu của người dùng Mật khẩu

đã được
mã hóa
5 Coin Number Số điểm hiện có của người dùng
6 RoleType String Loại tài khoản của người dùng

(admin, instructor, user)
134
7 IsLocked Boolean Tình trạng tài khoản người dùng
(đang khóa hoặc hoạt động)
3.3.2.8. Bảng Words

Bảng 44. Bảng Words
1 id ObjectId Mã từ vựng
2 Level String Cấp độ của từ vựng
3 Examples Array Danh sách ví dụ của từ vựng
4 Specialty String Chuyên ngành của từ vựng
5 Topics Array Chủ đề của từ vựng
6 Synonyms Array Danh sách từ đồng nghĩa của từ vựng
7 Word String Tên từ vựng
8 Picture Number Link hình ảnh minh họa của từ vựng
9 Note String Ghi chú về từ vựng
10 Type String Từ loại của từ vựng
11 Phonetic String Phiên âm của từ vựng
12 Mean String Nghĩa của từ vựng
4.4. THIẾT KẾ GIAO DIỆN
135
3.4.1. Giao diện Người dùng và Khách vãng lai
3.4.1.1. Đăng nhập
Hình 84. Giao diện Đăng nhập

Bảng 45. Bảng mô tả Giao diện Đăng nhập
STT Loại Ý nghĩa
1 Textbox Nhập email của người dùng
2 Textbox Nhập password của người dùng
3 Icon Hiện/ẩn mật khẩu dưới dạng ký tự tường minh
136
4 Link Link chuyển sang trang quên mật khẩu
5 Button Nhấn vào để đăng nhập vào hệ thống
6 Link Link chuyển sang trang đăng ký
3.4.1.2. Đăng ký
Hình 85. Giao diện Đăng ký

Bảng 46. Bảng mô tả Giao diện Đăng ký
137
2 Textbox Nhập họ tên của người dùng
3 Textbox Nhập mật khẩu của người dùng
5 Textbox Nhập lại mật khẩu của người dùng
6 Icon Hiện/ẩn xác nhận mật khẩu dưới dạng ký tự tường

minh
7 Button Nhấn vào để đăng ký tài khoản và gửi mail xác

nhận về email đã đăng ký
8 Link Link chuyển sang trang đăng nhập
3.4.1.3. Quên mật khẩu
Hình 86. Giao diện quên mật khẩu

Bảng 47. Bảng mô tả giao diện Quên mật khẩu
138
2 Button Nhấn vào để gửi email xác nhận
3.4.1.4. Đổi mật khẩu
Hình 87. Giao diện Đặt lại mật khẩu

Bảng 48. Bảng mô tả giao diện Đặt lại mật khẩu
1 Textbox Nhập mật khẩu của người dùng
139
3 Textbox Nhập lại mật khẩu của người dùng
4 Icon Hiện/ẩn xác nhận mật khẩu dưới dạng ký tự tường

minh
5 Button Nhấn vào để đổi mật khẩu mới
3.4.1.5. Trang chủ
140
Hình 88. Giao diện trang chủ
Bảng 49. Bảng mô tả giao diện Trang chủ
1 Link Link chuyển về trang chủ
141
2 Link Link chuyển sang trang Nghe
3 Link Link chuyển sang trang Ngữ pháp
4 Link Link chuyển sang trang Từ vựng
5 Link Link chuyển sang trang Phát âm
6 Link Link chuyển sang trang Từ điển
7 Link Link chuyển sang trang Game
8 Button Nhấn vào để chuyển sang trang Đăng ký
9 Button Nhấn vào để chuyển sang trang Đăng nhập
3.4.1.6. Chủ đề bài nghe
Hình 89. Giao diện chủ đề bài nghe

Bảng 50. Bảng mô tả giao diện chủ đề bài nghe
142
1 Link Nhấn vào chủ đề bất kỳ sẽ chuyển sang trang danh
sách bài nghe của chủ đề đó
3.4.1.7. Danh sách bài nghe của một chủ đề
Hình 90. Giao diện Danh sách bài nghe của một chủ đề
Bảng 51. Bảng mô tả giao diện danh sách bài nghe
1 Link Nhấn vào bài nghe bất kỳ sẽ chuyển sang trang chi
tiết bài nghe
3.4.1.8. Chi tiết bài nghe
143
Hình 91. Giao diện chi tiết bài nghe
Bảng 52. Bảng mô tả giao diện chi tiết bài nghe
1 Video Video của bài nghe
2 Tab Nhấn vào để chuyển sang tab Phụ đề của bài nghe
3 Tab Nhấn vào để chuyển sang tab Quiz của bài nghe
4 Checkbox Check vào để chọn đáp án của câu hỏi
5 Button Nhấn vào để kiểm tra kết quả bài quiz
144
6 Button Nhấn vào để đưa quiz về trạng thái ban đầu
7 Button Nhấn vào để hiện đáp án đúng của tất cả câu hỏi
3.4.1.9. Cấp độ của ngữ pháp
Hình 92. Giao diện cấp độ của ngữ pháp

Bảng 53. Bảng mô tả giao diện cấp độ của ngữ pháp
1 Link Nhấn vào cấp độ bất kỳ sẽ chuyển sang trang danh

sách ngữ pháp của cấp độ đó
3.4.1.10. Danh sách ngữ pháp của cấp độ
145
Hình 93. Giao diện Danh sách ngữ pháp của cấp độ
Bảng 54. Bảng mô tả giao diện danh sách ngữ pháp của cấp dộ
1 Link Nhấn vào ngữ pháp bất kỳ sẽ chuyển sang trang

chi tiết ngữ pháp
3.4.1.11. Chi tiết ngữ pháp
146
Hình 94. Giao diện chi tiết ngữ pháp
Bảng 55. Bảng mô tả giao diện chi tiết ngữ pháp
1 Video Video của ngữ pháp
2 Audio Audio của ngữ pháp
3 Tab Nhấn vào để chuyển sang tab Phụ đề của video

ngữ pháp
4 Tab Nhấn vào để chuyển sang tab Danh sách các chủ
đề của ngữ pháp
147
5 Tab Nhấn vào để chuyển sang tab Quiz của ngữ pháp
6 Checkbox Check vào để chọn đáp án của câu hỏi
7 Button Nhấn vào để kiểm tra kết quả bài quiz
8 Button Nhấn vào để đưa quiz về trạng thái ban đầu
9 Button Nhấn vào để hiện đáp án đúng của tất cả câu hỏi
3.4.1.12. Chủ đề của từ vựng
Hình 95. Giao diện chủ đề của từ vựng

Bảng 56. Bảng mô tả giao diện chủ đề của từ vựng
1 Link Nhấn vào chủ đề bất kỳ sẽ chuyển sang trang danh

sách từ vựng của chủ đề đó
148
3.4.1.13. Danh sách từ vựng theo hai chế độ gallery và slide
Hình 96. Danh sách từ vựng theo chế độ gallery
Hình 97. Danh sách từ vựng theo chế độ slide

Bảng 57. Bảng mô tả giao diện danh sách từ vựng theo hai chế độ xem
1 Icon Nhấn vào để danh sách từ vựng hiển thị ở chế độ

Collection
2 Icon Nhấn vào để danh sách từ vựng hiển thị ở chế độ

Item
149
3 List Danh sách các từ vựng theo từng trang (chế độ
Collection)
4 Icon Nhấn vào để chuyển sang trang hoặc từ trước đó
5 Icon Nhấn vào để chuyển sang trang hoặc từ tiếp theo
6 Text Nghĩa của từ vựng
7 Text Từ vựng
8 Icon Nhấn vào để hệ thống đọc từ vựng đó
9 Text Loại từ
10 Text Phiên âm của từ vựng
11 Text Ví dụ của từ vựng
12 Image Hình ảnh minh họa của từ vựng
3.4.1.14. Danh sách phiên âm
150
Hình 98. Giao diện Danh sách phiên âm
Bảng 58. Bảng mô tả giao diện danh sách phiên âm
1 Text Loại phiên âm
2 Link Nhấn vào phiên âm bất kỳ sẽ chuyển sang trang

chi tiết của phiên âm đó
3.4.1.15. Chi tiết phiên âm
151
Hình 99. Giao diện Chi tiết phiên âm
Bảng 59. Bảng mô tả giao diện chi tiết phiên âm
1 Video Video của phiên âm
2 Text Phiên âm
3 Text Ví dụ của phiên âm
4 Icon Nhấn vào để hệ thống đọc phiên âm
5 List Danh sách các phiên âm cùng loại
6 Button Quay trở về trang phát âm
3.4.1.16. Danh sách các trò chơi
152
Hình 100. Giao diện Danh sách các trò chơi
Bảng 60. Bảng mô tả giao diện danh sách trò choie
1 Button Nhấn vào để vào chơi game Hãy chọn từ đúng
2 Button Nhấn vào để vào chơi game Ghép từ
3 Button Nhấn vào để vào chơi game Tay nhanh hơn não
4 Button Nhấn vào để xem bảng xếp hạng
3.4.1.17. Bảng xếp hạng
153
Hình 101. Giao diện Bảng xếp hạng
Bảng 61. Bảng mô tả giao diện Bảng xếp hạng
1 List Bảng xếp hạng người chơi có nhiều điểm nhất hệ

thống
2 List Bảng xếp hạng game Hãy chọn từ đúng
3 List Bảng xếp hạng game Ghép từ
4 List Bảng xếp hạng game Tay nhanh hơn não
3.4.1.18. Trò chơi Hãy chọn từ đúng
154
Hình 102. Giao diện trò chơi Hãy chọn từ đúng
Bảng 62. Bảng mô tả giao dện trò chơi Hãy chọn từ đúng
1 Text Câu hỏi hiện tại
2 Text Số câu đúng
3 Text Số câu sai
4 Text Câu hỏi
5 Button Câu trả lời
3.4.1.19. Trò chơi Ghép từ
155
Hình 103. Giao diện trò chơi Ghép từ
Bảng 63. Bảng mô tả giao diện trò chơi Ghép từ
2 Text Số câu đúng
3 Text Số câu sai
4 Icon Hiển thị chi tiết từ của câu hỏi
5 Text Câu hỏi
6 Icon Nhấn vào hệ thống sẽ đọc từ của câu hỏi
7 Icon Nhấn vào để chấp nhận sai câu hỏi hiện tại và
chuyển sang câu tiếp theo
8 List Danh sách các ký tự để ghép lại câu trả lời
3.4.1.20. Trò chơi Tay nhanh hơn não

156
Hình 104. Giao diện trò chơi Tay nhanh hơn não
Bảng 64. Bảng mô tả giao diện trò chơi Tay nhanh hơn nào
2 Text Số điểm hiện tại
3 Text Câu hỏi
4 Icon Nhấn vào hệ thống sẽ đọc từ của câu hỏi
5 List Danh sách hình ảnh (câu trả lời)
6 Bar Thanh thời gian
3.4.2. Giao diện Người quản trị và Người tạo nội dung
3.4.2.1. Quản lý từ vựng
157
Hình 105. Giao diện Quản lý từ vựng
Bảng 65. Bảng mô tả Giao diện quản lý từ vựng
1 Icon Nhấn vào để chuyển sang trang thêm từ vựng
2 Icon Sắp xếp danh sách từ vựng theo các tiêu chí
3 Icon Nhấn vào để lọc danh sách từ vựng theo tiêu chí
4 Input Tìm kiếm từ vựng
5 List Danh sách từ vựng
6 Icon Nhấn vào để chuyển sang trang sửa từ vựng
7 Icon Nhấn vào để xóa từ vựng
158
3.4.2.2. Thêm từ vựng
Hình 106. Giao diện Thêm từ vựng

Bảng 66. Bảng mô tả Giao diện Thêm từ vựng
1 Input file Thêm hình ảnh minh họa cho từ vựng
2 Input Nhập từ vựng
3 Input Nhập nghĩa của từ vựng
4 Input Nhập phiên âm của từ vựng
5 Select Chọn từ loại của từ vựng
6 Select Chọn cấp độ của từ vựng
7 Select Chọn chuyên ngành cho từ vựng
8 Input Nhập ví dụ cho từ vựng
159
9 Input Nhập các từ đồng nghĩa cho từ vựng
10 Input Nhập các từ trái nghĩa cho từ vựng
11 Input Nhập ghi chú cho từ vựng
12 Select Chọn chủ đề cho từ vựng
13 Button Nhấn vào để quay lại trang quản lý từ vựng
14 Button Nhấn để thêm từ vựng mới
3.4.2.3. Sửa từ vựng
Hình 107. Giao diện Sửa từ vựng

Bảng 67. Bảng mô tả giao diện Sửa từ vựng
1 Input file Thêm hình ảnh minh họa cho từ vựng
160
2 Input Nhập từ vựng
3 Input Nhập nghĩa của từ vựng
4 Input Nhập phiên âm của từ vựng
5 Select Chọn từ loại của từ vựng
6 Select Chọn cấp độ của từ vựng
7 Select Chọn chuyên ngành cho từ vựng
8 Input Nhập ví dụ cho từ vựng
9 Input Nhập các từ đồng nghĩa cho từ vựng
10 Input Nhập các từ trái nghĩa cho từ vựng
11 Input Nhập ghi chú cho từ vựng
12 Select Chọn chủ đề cho từ vựng
13 Button Nhấn vào để quay lại trang quản lý từ vựng
14 Button Nhấn để sửa từ vựng
3.4.2.4. Quản lý bài nghe
161
Hình 108. Giao diện Quản lý bài nghe
Bảng 68. Bảng mô tả giao diện quản lý bài nghe
1 Icon Nhấn vào để chuyển sang trang thêm bài nghe
2 Icon Sắp xếp danh sách bài nghe theo các tiêu chí
3 Icon Nhấn vào để lọc danh sách bài nghe theo các tiêu
chí
4 Input Tìm kiếm bài nghe
5 List Danh sách bài nghe
6 Icon Nhấn vào để chuyển sang trang sửa bài nghe
7 Icon Nhấn vào để xóa bài nghe
162
3.4.2.5. Thêm bài nghe
Hình 109. Giao diện Thêm bài nghe

Bảng 69. Bảng mô tả giao diện Thêm bài nghe
1 Input Thêm hình ảnh minh họa cho bài nghe
2 Input Nhập tên bài nghe
3 Input Nhập mô tả cho bài nghe
4 Select Chọn chủ đề cho bài nghe
5 Tab Nhấn vào để chuyển sang tab Upload
6 Tab Nhấn vào để chuyển sang tab Link
163
7 Input Thêm video cho bài nghe
8 Text Editor Nhập phụ đề cho video bài nghe
9 Button Nhấn vào để quay lại trang quản lý bài nghe
10 Button Nhấn vào để tạo bài nghe
3.4.2.6. Sửa bài nghe
Hình 110. Giao diện Sửa bài nghe

Bảng 70. Bảng mô tả giao diện Sửa bài nghe
2 Input Nhập tên bài nghe
164
3 Input Nhập mô tả cho bài nghe
4 Select Chọn chủ đề cho bài nghe
7 Input Thêm video cho bài nghe
8 Text Editor Nhập phụ đề cho video bài nghe
9 Button Nhấn vào để quay lại trang quản lý bài nghe
10 Button Nhấn vào để sửa bài nghe
3.4.2.7. Quản lý bài trắc nghiệm
165
Hình 111. Giao diện Quản lý bài trắc nghiệm
Bảng 71. Bảng mô tả Giao diện quản lý bài trắc nghiệm
1 Icon Nhấn vào để lọc quiz theo ngữ pháp hay bài nghe
2 List Danh sách ngữ pháp và bài nghe, nhấn vào một bài
để chuyển sang trang chi tiết quiz của bài đó
3.4.2.8. Chi tiết bài trắc nghiệm
166
Hình 112. Giao diện Chi tiết bài trắc nghiệm
Bảng 72. Bảng mô tả giao diện chi tiết bài trắc nghiệm
1 Icon Nhấn vào để chuyển sang trang thêm câu hỏi
2 Text Câu hỏi
3 Text Câu trả lời
4 Icon Đáp án đúng
5 Icon Nhấn vào để chuyển sang trang sửa câu hỏi
6 Icon Nhấn vào để xóa câu hỏi
3.4.2.9. Thêm câu hỏi
167
Hình 113. Giao diện Thêm câu hỏi
Bảng 73. Bảng mô tả giao diện thêm câu hỏi
1 Input Nhập nội dung câu hỏi
2 Input Nhập đáp án thứ nhất
3 Input Nhập đáp án thứ hai
4 Input Nhập đáp án thứ ba
5 Icon Nhấn vào chọn đáp án đúng
6 Button Nhấn vào để quay lại trang chi tiết quiz
7 Button Nhấn vào để tạo câu hỏi
3.4.2.10. Sửa câu hỏi
168
Hình 114. Giao diện Sửa câu hỏi
Bảng 74. Bảng mô tả giao diện sửa câu hỏi
1 Input Nhập nội dung câu hỏi
2 Input Nhập đáp án thứ nhất
3 Input Nhập đáp án thứ hai
4 Input Nhập đáp án thứ ba
5 Icon Nhấn vào chọn đáp án đúng
6 Button Nhấn vào để quay lại trang chi tiết quiz
7 Button Nhấn vào để sửa câu hỏi
3.4.2.11. Quản lý ngữ pháp
169
Hình 115. Giao diện Quản lý ngữ pháp
Bảng 75. Bảng mô tả giao diện quản lý ngữ pháp
1 Icon Nhấn vào chuyển sang trang thêm ngữ pháp
2 Icon Nhấn vào để lọc ngữ pháp theo các tiêu chí
3 Input Nhập để tìm kiếm ngữ pháp
4 List Danh sách ngữ pháp, nhấn vào một bài bất kỳ sẽ
chuyển sang trang chi tiết của bài đó
5 Icon Nhấn vào để chuyển sang sửa ngữ pháp
6 Icon Nhấn vào để xóa ngữ pháp
3.4.2.12. Chi tiết ngữ pháp
170
Hình 116. Giao diện Chi tiết ngữ pháp
Bảng 76. Bảng mô tả giao diện chi tiết ngữ pháp
1 Video Video của ngữ pháp
2 Tab Nhấn vào để chuyển sang tab Script
3 Tab Nhấn vào để chuyển sang tab Grammar
4 List Danh sách các chủ đề ngữ pháp
5 Button Nhấn vào để quay lại trang quản lý ngữ pháp
171
6 Button Nhấn vào để chuyển tới trang sửa ngữ pháp
3.4.2.13. Thêm ngữ pháp
Hình 117. Giao diện Thêm ngữ pháp

Bảng 77. Bảng mô tả giao diện thêm ngữ pháp
172
2 Input Nhập tên ngữ pháp
3 Input Nhập nội dung ngữ pháp
4 Select Chọn cấp độ cho ngữ pháp
7 Tab Nhấn vào để chuyển sang tab Audio
8 Input Thêm video cho ngữ pháp
9 Text Editor Nhập phụ đề cho video ngữ pháp
11 Icon Nhấn vào để mở hộp thoại thêm chủ đề ngữ pháp
13 Button Nhấn vào để tạo ngữ pháp
3.4.2.14. Sửa ngữ pháp
173
Hình 118. Giao diện Sửa ngữ pháp
Bảng 78. Bảng mô tả giao diện sửa ngữ pháp
2 Input Nhập tên ngữ pháp
3 Input Nhập nội dung ngữ pháp
4 Select Chọn cấp độ cho ngữ pháp
174
7 Tab Nhấn vào để chuyển sang tab Audio
8 Input Thêm video cho ngữ pháp
9 Text Editor Nhập phụ đề cho video ngữ pháp
11 Icon Nhấn vào để mở hộp thoại thêm chủ đề ngữ pháp
12 Icon Nhấn vào để xóa chủ đề ngữ pháp
14 Button Nhấn vào để sửa ngữ pháp
3.4.2.15. Quản lý người dùng
Hình 119. Giao diện Quản lý người dùng
175
Bảng 79. Bảng mô tả giao diện quản lý người dùng
1 Icon Nhấn vào chuyển sang trang thêm người dùng
2 Image Avatar người dùng
3 Text Tên người dùng, nhấn vào để chuyển sang trang chi
tiết người dùng
4 Text Loại tài khoản người dùng
5 Text Tình trạng của người dùng
3.4.2.16. Chi tiết người dùng
Hình 120. Giao diện Chi tiết người dùng

Bảng 80. Bảng mô tả giao diện chi tiết người dùng
176
1 Image Avatar người dùng
2 Text Tên người dùng
3 Text Loại tài khoản người dùng
4 Text Email người dùng
5 Text Ngày tạo
6 Text Số điểm hiện có
7 Button Nhấn vào để chuyển sang trang sửa tài khoản

người dùng
8 Button Nhấn vào để khóa tài khoản (tài khoản đang hoạt
động) hoặc mở tài khoản (tài khoản bị khóa)
3.4.2.17. Thêm tài khoản
177
Hình 121. Giao diện thêm người dùng
Bảng 81. Bảng mô tả giao diện thêm tài khoản
1 Input Thêm ảnh người dùng
2 Input Nhập email người dùng
3 Input Nhập họ tên người dùng
4 Select Chọn loại tài khoản
5 Button Nhấn vào để quay lại trang quản lý người dùng
6 Button Nhấn vào để tạo tài khoản
3.4.2.18. Sửa người dùng
178
Hình 122. Giao diện sửa người dùng
Bảng 82. Bảng mô tả giao diện sửa người dùng
1 Input Thêm ảnh người dùng
2 Input Nhập email người dùng
3 Input Nhập họ tên người dùng
4 Select Chọn loại tài khoản
5 Button Nhấn vào để quay lại trang quản lý người dùng
6 Button Nhấn vào để sửa tài khoản
3.4.2.19. Trang chủ admin
179
Hình 123. Giao diện Trang chủ Admin
Bảng 83. Bảng mô tả giao diện trang chủ Admin
1 Bar Sidebar chứa các mục quản lý chính
2 List Thống kê
Chương 4. CÀI ĐẶT VÀ KIỂM THỬ

5.1. CÀI ĐẶT
4.1.1. Cài đặt ứng dụng
Để có thể chạy được ứng dụng, máy tính phải có các yêu cầu sau:
- Cài đặt npm.
- Cài đặt NodeJS.
- Cài đặt ReactJS.
- Windows Terminal hoặc Command Prompt.
Các bước để tiến hành cài đặt:
Bước 1: Clone hoặc download project từ link githut:
https://github.com/phongvn2611/LearningEnglishWebsite/tree/main
Bước 2: Khởi chạy back-end.
180
- Sau khi clone project về máy, chuột phải vào thư mục backend và chọn
“Open in Windows Terminal”.
- Chạy lệnh “npm i” để cập nhật các thư viện và package cần thiết để project
hoạt động.
- Tiếp tục chạy lệnh “npm start” trên Windows Terminal để bắt đầu chạy
back-end.
Bước 3: Khởi chạy front-end (admin và user)
- Chọn “Terminal” và nhấn “New Terminal”.
- Chạy lệnh “npm i” để cập nhật các thư viện và package cần thiết để project
hoạt động.
- Tiếp tục chạy lệnh “npm start” trên Windows Terminal để bắt đầu chạy
back-end.
4.1.2. Công cụ dùng trong dự án
Bảng 84. Bảng công cụ dùng trong dự án
Công cụ Tên
Môi trường NodeJs
IDE Visual Studio Code
DBMS MongoDB
Quản lý source code Github
Trình duyệt Google Chrome, Microsoft

Edge.
Hệ điều hành Windows 10.
Các công cụ thiết kế khác Draw.io, Enterprise Architect
4.1.3. Công nghệ dùng trong dự án

Bảng 85. Bảng công nghệ dùng trong dự án
Giao thức giao tiếp REST API

giữa Client và Server JSON Web Token
Giao diện người ReactJs 17.0.2

dùng của ứng dụng
181
web
BackEnd Nodejs sử dụng framework Expressjs
Database MongoDb Atlats
Deloy server Heroku
Nodemailer (Gửi mail xác thực)

Dịch vụ
Cloudinary (upload video, hình ảnh, audio)
5.2. KIỂM THỬ

Trong dự án này, chúng em sử dụng phương pháp kiểm thử hộp đen để kiểm tra các
chức năng chính của ứng dụng. Ưu điểm lớn nhất của kiểm thử hộp đen là nó khá
phù hợp để kiểm thử một phần lớn mã hoặc các chức năng chính của hệ thống, rất
thuận tiện cho việc phát triển phần mềm nhanh chóng. Các chức năng sẽ được kiểm
tra là:
 Người dùng: Đăng nhập, đăng ký.

 Quản trị viên: Thêm một từ vựng mới, thêm một bài nghe mới.
1.2.1. Các trường hợp kiểm thử
Bảng 86. Các trường hợp kiểm thử
STT Tác nhân hệ Chức năng Mô tả

thống
1 Người dùng Đăng nhập Kiểm tra phản hồi của trang web khi người
xác thực dùng điền vào biểu mẫu đăng nhập và nhấn nút
“Đăng nhập”.
2 Khách vãng lai Đăng ký Kiểm tra phản hồi của trang web khi khách
vãng lai điền vào biểu mẫu đăng ký và nhấn nút
“Đăng Ký”.
3 Người tạo nội Thêm từ vựng Kiểm tra phản hồi của trang web khi người tạo
dung nội dung điền vào biểu mẫu thêm từ và nhấn
nút “Thêm từ”.
4 Người quản trị Thêm người Kiểm tra phản hồi của trang web khi người
182
dùng quản trị điền vào biểu mẫu thêm người dùng và
nhấn nút “Thêm”.
4.1.4. Kết quả kiểm thử

4.1.4.1. Kết quả kiểm thử chức năng Đăng nhập
Bảng 87. Kết quả kiểm thử chức năng Đăng nhập
STT Mô tả Các bước Dữ liệu thử Kết quả Kết Kết

kiểm thử mong đợi quả quả
thực
tế
TC_SI_ Kiểm tra - Click Email: Thông Như Đạt

01 phản hồi button “18110146@stud báo đăng mon
của ứng “Đăng ent. nhập g đợi
dụng khi nhập” tại hcmute.edu.vn” thành
người trang công và
Mật khẩu:
dùng chủ điều
“123456”
nhập - Nhập hướng
thông tin email đến trang
đăng - Nhập chủ.
nhập mật khẩu
chính - Nhấn nút
xác. “Đăng
nhập”.

02 phản hồi button “1811@student. báo lỗi mon
của ứng “Đăng hcmute.edu.vn” xuất hiện g đợi
dụng khi nhập” tại phía trên
Mật khẩu:
người trang tài khoản
“123456”
dùng chủ người
nhập - Nhập tài dùng:
thông tin khoản “This
đăng - Nhập email
nhập does not
183
email mật khẩu exist”
không Nhấn nút
chính “Đăng
xác. nhập”.

03 phản hồi button “18110146@stud báo lỗi mon
của ứng “Đăng ent. xuất hiện g đợi
dụng khi nhập” tại hcmute.edu.vn” phía trên
người trang tài khoản
Mật khẩu:
dùng chủ người
“123456789”
nhập - Nhập tài dùng:
thông tin khoản “Passwor
đăng - Nhập d is
nhập mật mật khẩu incorrect”
khẩu - Nhấn nút
không “Đăng
chính nhập”.
xác.
Hình 124. Kết quả kiểm thử test case TC_SI_01
184

1.1.2.2. Kết quả kiểm thử chức năng Đăng ký
Bảng 88. Kết quả kiểm thử chức năng Đăng ký
STT Mô tả Các bước Dữ liệu thử Kết Kết Kết

kiểm thử quả quả quả
mong thự
185
đợi c tế
TC_SU_ Kiểm tra - Click Họ tên: “Phuong Người Như Đạt

01 phản hồi button Linh” dùng mon
của ứng “Đăng Email: đăng g
dụng khi ký” tại “tranphuonglinh ký đợi
người trang thành
1507@gmail.com”
dùng chủ công,
nhập - Nhập Mật khẩu: “123456” gửi
thông tin họ tên Nhập lại mật mail
đăng ký - Nhập khẩu:”123456” xác
chính email thực tài
xác. - Nhập khoản
mật và
khẩu chuyển
- Nhập hướng
lại mật đến
khẩu trang
- Nhấn đăng
nút nhập
“Đăng
ký”.
TC_SU_ Kiểm tra - Click Họ tên: “Phuong Thông Như Đạt

02 phản hồi button Linh” báo lỗi mon
của ứng “Đăng Email: xuất g
dụng khi ký” tại “18110146@student. hiện đợi
người trang phía
hcmute.edu.vn”
dùng chủ trên tài
đăng ký - Nhập Mật khẩu: “123456” khoản
email đã họ tên Nhập lại mật người
tồn tại. - Nhập khẩu:”123456” dùng:
email “This
- Nhập email
mật already
khẩu exists”
- Nhập
186
lại mật
khẩu
Nhấn
nút
“Đăng
ký”.

của ứng “Đăng Email: tại xác g
dụng khi ký” tại “18110146@student. nhận đợi
người trang mật
hcmute.edu.vn”
dùng chủ khẩu
nhập mật - Nhập Mật khẩu: “123456” “Nhập
khẩu và họ tên Nhập lại mật xác
xác nhận - Nhập khẩu:”123456789” nhận
mật khẩu email mật
không - Nhập khẩu
trùng mật không
khớp khẩu trùng
- Nhập khớp”
lại mật
khẩu
- Nhấn
nút
“Đăng
ký”

của ứng “Đăng Email: tại g
dụng khi ký” tại “tranphuonglinh trường đợi
người trang nhập
1507gmail.com”
dùng chủ “Email
nhập - Nhập Mật khẩu: “123456” không
email họ tên Nhập lại mật hợp lệ”
không - Nhập
187
hợp lệ email khẩu:”123456”
- Nhập
mật
khẩu
- Nhập
lại mật
khẩu
- Nhấn
nút
“Đăng
ký”.

của ứng “Đăng Email: tại mật g
dụng khi ký” tại “tranphuonglinh khẩu đợi
người trang “Mật
1507gmail.com”
dùng chủ khẩu ít
nhập mật - Nhập Mật khẩu: “12345” nhất 6
khẩu họ tên Nhập lại mật ký tự”
dưới 6 ký - Nhập khẩu:”123456”
tự email
- Nhập
mật
khẩu
- Nhập
lại mật
khẩu
- Nhấn
nút
“Đăng
ký”.
188
Hình 127. Kết quả kiểm thử test case TC_SU_01
189
190

1.1.1.3. Kết quả kiểm thử chức năng Thêm từ vựng
Bảng 89. Kết quả kiểm thử chức năng Thêm từ vựng
STT Mô tả Các bước Dữ liệu thử Kết Kết Trạn

191
kiểm thử quả quả g
mong thự thái
đợi c tế
TC_AW_ Kiểm tra - Chọn Từ: “studying” Hiển Như Đạt

01 phản hồi mục Nghĩa của từ: “học, thị mon
của ứng “Quản nghiên cứu” thông g
dụng khi lý từ báo đợi
Phiên âm: “studying”
người vựng” “Thêm
dùng - Click Loại từ: “động từ” từ
nhập icon Chủ đề: “Khác” thành
thông tin Add công”
Chuyên ngành:
đầy đủ tại
“Không”
và chính trang
xác. quản Cấp bậc: “Chưa xác
lý định”
- Nhập
từ
- Nhập
nghĩa
của từ
- Nhập
phiên
âm
- Chọn
loại từ
- Chọn
chủ đề
- Chọn
chuyê
n
ngành
- Chọn
cấp
bậc
TC_AW_ Kiểm tra - Chọn Từ: “study” Hiển Như Đạt

192
dụng khi lý từ Phiên âm: “studying” báo đợi
người vựng” “Từ
Loại từ: “động từ”
dùng - Click study
thêm từ icon Chủ đề: “Khác” (v) đã
đã tồn Add Chuyên ngành: tồn tại
tại tại “Không” trong
trang từ
Cấp bậc: “Chưa xác
quản điển”
định”
lý
- Nhập
từ
- Nhập
nghĩa
của từ
- Nhập
phiên
âm
- Chọn
loại từ
- Chọn
chủ đề
- Chọn
chuyê
n
ngành
Chọn
cấp
bậc
TC_AW_ Kiểm tra - Chọn Từ: “studying” Hiển Như Đạt

dụng khi lý từ báo đợi
Phiên âm: “studying”
người vựng” “Câu
193
dùng - Click Loại từ: “động từ” ví dụ
thêm từ icon Chủ đề: “Khác” phải
có câu ví Add chứa từ
Chuyên ngành:
dụ tại vựng
“Không”
không trang mới”
chứa từ quản Cấp bậc: “Chưa xác
vựng lý định”
mới - Nhập Câu ví dụ: “I study
từ English”
- Nhập
nghĩa
của từ
- Nhập
phiên
âm
- Chọn
loại từ
- Chọn
chủ đề
- Chọn
chuyê
n
ngành
- Chọn
cấp
bậc
- Nhập
câu ví
dụ
194
Hình 133. Kết quả kiểm thử test case TC_AW_01
195
4.1.4.4. Kết quả kiểm thử chức năng Thêm người dùng
Bảng 90. Kết quả kiểm thử chức năng Thêm người dùng
STT Mô tả Các bước Dữ liệu thử Kết Kết Kết

kiểm thử quả quả quả
mong thự
đợi c tế
TC_AU_ Kiểm tra - Chọn Họ tên: “Phuong Hiển Như Đạt

01 phản hồi mục Linh” thị mon
của ứng “Quản Email: thông g
dụng khi lý “tranphuonglinh báo đợi
người người thành
1507@gmail.com”
dùng dùng” công,
nhập - Click Phân quyền: “user” quay
thông tin icon lại
chính Add trong
xác. tại quản lý
trang người
quản dùng
lý
196
- Nhập
họ tên
- Nhập
email
- Chọn
phân
quyền
- Nhấn
nút
“Thêm
”.
TC_AU_ Kiểm tra - Chọn Họ tên: “Phuong Hiển Như Đạt

02 phản hồi mục Linh” thị mon
của ứng “Quản Email: thông g
dụng khi lý “tranphuonglinh19226 báo đợi
người người “This
@gmail.com”
dùng dùng” email
thêm tài - Click Phân quyền: “user” already
khoản icon exists”
email đã Add
tồn tại tại
trang
quản
lý
- Nhập
họ tên
- Nhập
email
- Chọn
phân
quyền
Nhấn
nút
“Thêm
”.
197
Hình 136. Kết quả kiểm thử test case TC_AU_01
Hình 137. Kết quả kiểm thử test case TC_AU_02
198
PHẦN KẾT LUẬN
6.1. KẾT QUẢ ĐẠT ĐƯỢC
Dự án đã hoàn thiện 100%, cung cấp cái nhìn tổng quan về kiến trúc và thiết kế hệ
thống, hoàn thiện tất cả các chức năng của ứng dụng đã đề ra ngay từ đầu. Từ đó có
cái nhìn tổng quan cho hoạt động của hệ thống học tiếng Anh trực tuyến. Chúng em
đã áp dụng những kiến thức đã học cũng như những kiến thức tự tìm tòi mới để xây
dựng trang web của mình.
Link truy cập website dự án: https://englishwebsite.herokuapp.com/
Link Github source code:
https://github.com/phongvn2611/LearningEnglishWebsite/tree/main
6.2. ƯU ĐIỂM
- Giao diện thân thiện với người dùng, dễ sử dụng.
- Hệ thống đáp ứng được các chức năng cơ bản của một website học tiếng Anh
trực tuyến.
- Ứng dụng dễ bảo trì và nâng cấp.
6.3. NHƯỢC ĐIỂM
- Chưa thể hạn chế hết tất cả trường hợp lỗi của web.
- Các chức năng của trang web còn khá đơn giản.
- Chưa có chức năng quản lý tiến độ học.
6.4. HƯỚNG PHÁT TRIỂN
- Cần thiết kế thêm chức năng quản lý tiến độ học của người dùng.
- Cải thiện thêm các chức năng phân loại bài học theo các trình độ khác nhau.
- Tạo các diễn đàn giao lưu tiếng anh trực tuyến.
- Cần thêm các chức năng kiểm tra trình độ người dung.
- Thiết kế thêm chức năng cho phép người dùng thi thử qua các bài kiểm tra
trực tuyến.
- Thêm chức năng tra cứu từ điển.
- Thêm chức năng ghim và học từ vựng.
199
TÀI LIỆU THAM KHẢO
[1] Doan Van Phu, Tổng quan về NodeJS - Một số điểm khác biệt với PHP,
viblo.asia, 15/10/2020, https://viblo.asia/p/tong-quan-ve-nodejs-mot-so-diem-khac-
biet-voi-php-1Je5E9945nL
[2] Topdev.vn, Expressjs là gì. Tất tần tật về
Express.js, /https://topdev.vn/blog/express-js-la-gi/
[3] Pokimobile.vn, Expressjs Là Gì – Tất Tần Tật Về Khái Niệm Express,
https://pokimobile.vn/expressjs-la-gi-1639669048#Expressjs_la_gi
[4] Tuấn Thanh, MongoDB là gì? Tìm hiểu chi tiết về MongoDB, wiki.tino.org,
https://wiki.tino.org/mongodb-la-gi/
[5] Lê Đức Mạnh, RESTful API là gì, viblo.asia, 05/09/2020,
https://viblo.asia/p/restful-api-la-gi-1Je5EDJ4lnL
[6] Hai G, React là gì. Và nó hoạt động như thế nào, hostinger.vn, 23/03/2020,
https://www.hostinger.vn/huong-dan/react-la-gi-va-no-hoat-dong-nhu-the-nao
[7] topdev.vn, ReactJS – Những điều bạn cần phải biết,
https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/
[8] topdev.vn, JSON Web Token là gì, https://topdev.vn/blog/json-web-token-la-gi/
200

Nhom01 CLCTV BaoCaoTLCN

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Nhom01 CLCTV BaoCaoTLCN

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.

TIỂU LUẬN CHUYÊN NGÀNH

XÂY DỰNG WEBSITE HỌC TIẾNG

Tp. Hồ Chí Minh, tháng 12 năm 2021

TIỂU LUẬN CHUYÊN NGÀNH

XÂY DỰNG WEBSITE HỌC TIẾNG

Tp. Hồ Chí Minh, tháng 12 năm 2021

Hình 5. Hình minh họa ưu điểm của MongoDB

Hình 6. Hình minh hoa nhược điểm của MongoDB

Hình 9. Virtual DOM

Hình 10. JSON Web Token

 alg – Thuật toán đã dùng để mã hóa (HMAC SHA256 – HS256 hoặc

Hình 12. Header

 iss (issuer): tổ chức phát hành token (không bắt buộc)

 sub (subject): chủ đề của token (không bắt buộc)

 aud (audience): đối tượng sử dụng token (không bắt buộc)

Tổng lại 3 phần, có chuỗi JWT như sau

1.8.3. Flow hệ thống sử dụng JWT

 Set S2 = HMAC(SHA256(H.P) với secret key của hệ thống)

Chương 2. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Hình 16. Màn hình trang chủ website BBC English

Hình 17. Màn hình trang chủ website Voca.vn

Hình 18. Màn hình trang chủ website Busuu

STT Chức năng Mô tả

1 Khóa người dùng Khóa tài khoản của người dùng

2 Mở khóa người dùng Mở khóa tài khoản của người dùng

4 Thống kê Xem thống kê số lượng người dùng, số

Các chức năng của Người tạo nội dung

STT Chức năng Mô tả

1 Thêm bài nghe Thêm một bài nghe vào hệ thống

3 Xóa bài nghe Xóa một bài nghe trong hệ thống

4 Thêm ngữ pháp Thêm ngữ pháp vào hệ thống

7 Thêm từ vựng Thêm từ vựng mới vào hệ thống

8 Chỉnh sửa từ vựng Chỉnh sửa từ vựng trong hệ thống

9 Xóa từ vựng Xóa từ vựng trong hệ thống

Các chức năng của Người dùng được xác thực

STT Chức năng Mô tả

1 Đăng nhập Cho phép người dùng đăng nhập để truy

3 Học ngữ pháp Người dùng xem các chủ đề và ví dụ của

7 Học từ vựng Xem nghĩa và nghe audio các từ vựng

10 Đăng xuất Đăng xuất tài khoản

STT Chức năng Mô tả

1 Đăng ký Cho phép đăng ký tài khoản để truy cập

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

Phan quyen nguoi

«include» «include» «include»

«include» Xem danh sach

Xoa bai nghe

Quan ly bai nghe

Quan ly ngu phap

Them bai trac

Dang nhap Doi mat khau

Chinh sua thong tin

Hoc ngu phap

Hoc bai nghe

Xem bang xep hang

Hoc bang phien am Choi tro choi

Learning English Website

Khach vang lai

Hình 21. Lược đồ chức năng Đăng ký

USE CASE – LEW-US_UC_01

Use Case ID LEW-US_UC_01 Phiên bản use 1.0

Tên use case Đăng ký