Đồ án tốt nghiệp - Tìm hiểu công nghệ Mern Stack và áp dụng xây dựng website đặt bàn nhà hàng

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM

NGUYỄN PHẠM MẠNH HÓA – 21110885
NGUYỄN THÀNH NHƠN - 21110907

ĐỀ TÀI:

TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP
DỤNG XÂY DỰNG WEBSITE ĐẶT BÀN NHÀ HÀNG
KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIẢNG VIÊN HƯỚNG DẪN
THS. NGUYỄN THỦY AN

BỘ GIÁO DỤC VÀ ĐÀO TẠO

ĐỒ ÁN TỐT NGHIỆP
KHÓAĐỀ
2021
- 2025
TÀI:

TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP
DỤNG XÂY DỰNG WEBSITE ĐẶT BÀN NHÀ HÀNG

2

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM

NGUYỄN PHẠM MẠNH HÓA – 21110885
NGUYỄN THÀNH NHƠN - 21110907

ĐỀ TÀI:

TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP
DỤNG XÂY DỰNG WEBSITE ĐẶT BÀN NHÀ HÀNG
KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIẢNG VIÊN HƯỚNG DẪN
THS. NGUYỄN THỦY AN

BỘ GIÁO DỤC VÀ ĐÀO TẠO

ĐỒ ÁN TỐT NGHIỆP
KHÓAĐỀ
2021
- 2025
TÀI:

TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP
DỤNG XÂY DỰNG WEBSITE ĐẶT BÀN NHÀ HÀNG

Trường Đại học Sư phạm Kỹ thuật

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

TP. Hồ Chí Minh

Độc lập – Tự do – Hạnh phúc

Khoa Công nghệ thông tin
_____________________________

_________________________________________

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
Họ và tên sinh viên 1: Nguyễn Phạm Mạnh Hóa

MSSV: 21110885

Họ và tên sinh viên 2: Nguyễn Thành Nhơn

MSSV: 21110907

Ngành: Công nghệ thông tin
Giảng viên hướng dẫn: ThS. Nguyễn Thủy An
Ngày nhận đề tài: 08/02/2025

Ngày nộp đề tài: 13/06/2025

Tên đề tài: TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG
WEBSITE ĐẶT BÀN NHÀ HÀNG.
Nội dung thực hiện đề tài: Tìm hiểu và triển khai công nghệ MERN Stack cho dự án:
o Front-end: ReactJS.
o Back-end: Express.
o Database: MongoDB Atlas.
o Xây dựng website đặt bàn sử dụng công nghệ MERN Stack.
Đề cương viết luận văn:
MỤC LỤC
1. Phần MỞ ĐẦU
1.1. Tính cấp thiết của đề tài
1.2. Mục tiêu của đề tài
1.3. Nội dung nghiên cứu
1.4. Phương pháp nghiên cứu
2. Phần NỘI DUNG
Chương 1: Cơ sở lý thuyết
1.1. Giới thiệu về Technical Stack
1.2. Giới thiệu về MERN Stack
1.3. Giới thiệu về MongoDB
1.4. Giới thiệu về ExpressJS

1.5. Giới thiệu về ReactJS
1.6. Giới thiệu về NodeJS
1.7. Giới thiệu về Redux
Chương 2: Khảo sát và phân tích yêu cầu
2.1. Khảo sát hiện trạng
2.2. Phân tích yêu cầu
2.3. Chức năng các actors
2.4. Lược đồ use case
2.5. Đặc tả use case
Chương 3: Thiết kế hệ thống
3.1. Class diagram
3.2. Sequence diagram
3.3. Entity relation diagram
3.4. Thiết kế giao diện
Chương 4: Cài đặt và kiểm thử
4.1. Các công cụ
4.2. Cá
...

...
iếp thu được nhiều kiến thức và kỹ năng quan trọng:
Nắm được quy trình xây dựng và phát triển một ứng dụng web hoàn chỉnh.
Biết cách sử dụng các công cụ hỗ trợ lập trình như React và Redux.
Làm việc với cơ sở dữ liệu NoSQL MongoDB.
Ứng dụng các công nghệ mới để phát triển website.
Tăng cường khả năng giải quyết vấn đề và cải thiện kỹ năng làm việc nhóm.
Source code dự án:
Source code:
+ Backend: https://github.com/NPMH1909/TLCN-SERVER
+ Frontend: https://github.com/nhonNguyenAbc/TLCN-Client
Deloy: https://tlcn-client.vercel.app/
3.2. ƯU ĐIỂM
Giao diện được thiết kế đơn giản, thân thiện và dễ sử dụng đối với người dùng.
Website đã được triển khai và hoạt động ổn định.
Các chức năng chính được xây dựng rõ ràng, giúp người dùng dễ dàng thao tác.
Cho phép người dùng đánh giá nhà hàng, chia sẻ nhận xét về sản phẩm.
Cung cấp video ngắn và các đánh giá từ khách hàng khác để người dùng có cái nhìn
tổng quan về không gian nhà hàng, từ đó lựa chọn địa điểm phù hợp.

3.3. HẠN CHẾ
Website vẫn chưa được tối ưu hóa về hiệu suất hoạt động.
Nhóm còn thiếu kiến thức thực tiễn và chuyên sâu về công nghệ hiện đại.
Tính năng tìm kiếm và bảo mật chưa đạt được hiệu quả cao.
3.4. HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI
Tiếp tục tối ưu hóa website để nâng cao tốc độ và hiệu suất.
Tăng cường hệ thống bảo mật để bảo vệ dữ liệu người dùng.

126

Với những định hướng này, nhóm hy vọng rằng trong tương lai, website sẽ không chỉ
mang đến trải nghiệm người dùng tốt hơn mà còn giúp tiết kiệm chi phí, thời gian và
đóng góp vào việc nâng cao chất lượng dịch vụ và đời sống của người dùng.

127

DANH MỤC TÀI LIỆU THAM KHẢO
[1] Hoàng Mirs, Giới thiệu MERN Stack, VIBLO, 12/07/2017. [Online]. Available:

https://viblo.asia/p/gioi-thieu-mern-stack-bWrZnv4vZxw. [Accessed 11/02/2025].
[2] MongoDB, The website about MongoDB Atlas, MongoDB, [Online]. Available:

https://www.mongodb.com/atlas/database. [Accessed 11/02/2025].
[3] The website about Express JS, Meta, [Online]. Available: https://expressjs.com/.

[Accessed 11/02/2025].
[4] React JS Document, Meta, [Online]. Available: https://reactjs.org/. [Accessed

11/02/2025].
[5] Node JS Document, OpenJS Foundation, [Online]. Available: https://nodejs.org/.

[Accessed 11/02/2025].
[6] Redux Document, [Online]. Available: https://redux.js.org/. [Accessed

11/02/2025].
[7] The website about payment by Momo, MoMo, [Online]. Available:

https://developers.momo.vn/v3/vi/docs/payment/guides/home. [Accessed
11/02/1025].

128