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-

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE HỌC TIẾNG
ANH SỬ DỤNG MERN STACK
GVHD : TS. LÊ VĂN VINH
SVTH: TRẦN PHƯƠNG LINH
MSSV: 18110146
SVTH: VÕ NGỌC PHONG
MSSV: 18110174

Tp. Hồ Chí Minh, tháng 6 năm 2022

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-

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE HỌC TIẾNG
ANH SỬ DỤNG MERN STACK
GVHD : TS. LÊ VĂN VINH
SVTH: TRẦN PHƯƠNG LINH
MSSV: 18110146
SVTH: VÕ NGỌC PHONG
MSSV: 18110174

Tp. Hồ Chí Minh, tháng 6 năm 2022

Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM Cộng Hòa Xã Hội Chủ Nghĩa Việt Nam
Độc lập – Tự do – Hạnh phúc
Khoa Đào Tạo Chất Lượng Cao
-***

***-Tp. Hồ Chí Minh, ngày 20 tháng 06 năm 2022

NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP
Họ và tên sinh viên: Trần Phương Linh .............. MSSV: 18110146
Họ và tên sinh viên: Võ Ngọc Phong .................. MSSV: 18110174
Chuyên ngành: Công Nghệ Phần Mềm ............... Lớp: 18110CLC
Giáo viên hướng dẫn: TS. Lê Văn Vinh
Ngày giao đề tài: 07/03/2022 ............. Ngày nộp đề tài: 18/06/2022
1. Tên đề tài:
Xây dựng website học tiếng Anh sử dụng Mern Stack.
2. Các số liệu, tài liệu ban đầu
Khảo sát hiện trạng thông qua các ứng dụng học tiếng Anh phổ biến hiện nay và áp
dụng những thông tin tìm hiểu được vào đồ án.
3. Nội dung thuyết minh và tính toán
- 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, Restful API, MongoDB để 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.
- 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.
- Xây dựng một website để quản lý thông tin hệ thống cho người tạo nội dung
và quản trị viên.
4. Sản phẩm
Website học tiếng Anh sử dụng Mern Stack với đầy đủ các tính năng cơ bản cho
phía người dùng và người quản trị viên.
Trưởng ngành

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

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
.......................................................................................................................................
.......................................................................................................................................
.................................................................................................................
...

...
ình 4.11. Kết quả kiểm thử test case TC_AW_02

200

Hình 4.12. Kết quả kiểm thử test case TC_AW_03
4.2.2.4. Kết quả kiểm thử chức năng Thêm người dùng
Bảng 4.7. 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ử
kiểm thử

TC_AU_01 Kiểm tra phản hồi
của
ứng
dụng khi
người
dùng nhập thông tin
chính xác.

-

Chọn
Họ tên: “Phuong Linh”
mục
Email: “tranphuonglinh
“Quản lý
[email protected]”
người
Phân quyền: “user”
dùng”
Click
icon
Add tại
trang
quản lý
Nhập họ
tên
201

Kết quả Kết
mong
quả
đợi
thực
tế

Kết
quả

Hiển thị Như Đạt
thông
mong
báo
đợi
thành
công,
quay lại
trong
quản lý
người
dùng

-

Nhập

-

email
Chọn
phân
quyền

-

TC_AU_02 Kiểm
phản

Nhấn
nút
“Thêm”.

tra -

Chọn

Họ tên: “Phuong Linh”

Hiển thị Như

hồi

mục

Email:

thông

mong

báo
“This
email
already
exists”

đợi

của
ứng
dụng khi
người
dùng thêm tài khoản
email đã

“Quản lý “tranphuonglinh19226
người
@gmail.com”
dùng”
Phân quyền: “user”
Click
icon
Add tại

tồn 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”.

202

Đạt

Hình 4.13. Kết quả kiểm thử test case TC_AU_01

Hình 4.14. Kết quả kiểm thử test case TC_AU_02

203

PHẦN KẾT
LUẬN

204

5.1. KẾT QUẢ ĐẠT ĐƯỢC
Nhóm thực hiện đã sử dụng công nghệ chính là Mern Stack để xây dựng website,
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. Nhóm đã á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
5.2. ƯU ĐIỂM
-

Giao diện dễ nhìn, thân thiện với người 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.

-

Chức năng làm bài thi thử theo sát với format Toeic.
Ứng dụng có các trò chơi giúp người dùng có thể ghi nhớ từ vựng tốt hơn.

5.3. NHƯỢC ĐIỂM VÀ HƯỚNG PHÁT TRIỂN
Một số chức năng có thể phát triển thêm trong tương lai để cải tiến ứng dụng như:
-

Chức năng quản lý tiến độ học.
Chức năng kiểm tra trình độ người dùng.
Chức năng học theo lộ trình.

205

TÀI LIỆU THAM KHẢO
[1]

Topdev.vn,

Expressjs

là

gì.

Tất

tần

tật

về

Express.js,

https://topdev.vn/blog/express-js-la-gi/
[2] topdev.vn, JSON Web Token là gì, https://topdev.vn/blog/json-web-token-la-gi/

206