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à q thầy cơ. Trong q 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, q 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 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 125. Kết quả kiểm thử test case TC_SI_02..................................................189
Hình 126. Kết quả kiểm thử test case TC_SI_03..................................................190
Hình 127. Kết quả kiểm thử test case TC_SU_01.................................................194
Hình 128. Kết quả kiểm thử test case TC_SU_01.................................................194
Hình 129. Kết quả kiểm thử test case TC_SU_02.................................................195
Hình 130. Kết quả kiểm thử test case TC_SU_03.................................................195
Hình 131. Kết quả kiểm thử test case TC_SU_04.................................................196
Hình 132. Kết quả kiểm thử test case TC_SU_05.................................................196
Hình 133. Kết quả kiểm thử test case TC_AW_01...............................................200
Hình 134. Kết quả kiểm thử test case TC_AW_02...............................................200
IX


Hình 135. Kết quả kiểm thử test case TC_AW_03...............................................201
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ế tồ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 ngồ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 số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