(Đồ án hcmute) tìm hiểu và áp dụng công nghệ mern stack để xây dựng demo website bán hàng thời trang

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

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

TÌM HIỂU VÀ ÁP DỤNG CƠNG NGHỆ MERN STACK ĐỂ
XÂY DỰNG DEMO WEBSITE BÁN HÀNG THỜI TRANG

GVHD: NGUYỄN THIÊN BẢO
SVTT: NGUYỄN THỊ THỨC
MSSV: 15110329
SVTH: ĐÀO HOÀN VŨ
MSSV: 15110373

SKL 0 0 5 7 5 4

Tp. Hồ Chí Minh, 2019

do an


9

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 THỊ THỨC - 15110329

ĐÀO HỒN VŨ – 15110373

Đề tài:
TÌM HIỂU VÀ ÁP DỤNG CÔNG NGHỆ MERN STACK ĐỂ
XÂY DỰNG DEMO WEBSITE BÁN HÀNG THỜI TRANG

KHOÁ LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN
TS. NGUYỄN THIÊN BẢO
KHÓA 2015 - 2019

do an


9

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 THỊ THỨC - 15110329

ĐÀO HỒN VŨ – 15110373

Đề tài:
TÌM HIỂU VÀ ÁP DỤNG CÔNG NGHỆ MERN STACK ĐỂ
XÂY DỰNG DEMO WEBSITE BÁN HÀNG THỜI TRANG

KHOÁ LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN
TS. NGUYỄN THIÊN BẢO
KHÓA 2015 - 2019

do an


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

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

KHOA CNTT

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

*****

*****

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên SV thực hiện 1: Nguyễn Thị Thức

Mã số SV: 15110329

Họ và tên SV thực hiện 2: Đào Hoàn Vũ

Mã số SV: 15110373

Ngành: Cơng nghệ thơng tin

Tên đề tài: Tìm hiểu và áp dụng công nghệ MERN stack để xây dựng demo website bán
hàng thời trang.
Họ và tên giáo viên hướng dẫn: T.S Nguyễn Thiên Bảo
NHẬN XÉT:
1.

Về nội dung đề tài và khối lượng cơng việc thực hiện:
Về cơ bản nhóm đã đạt được các mục tiêu mà đề tài đã đặt ra như:
• Về lí thuyết: Đã tìm hiểu được các kiến thức cơ bản của các thành phần trong
mô hình MERN stack.
• Về project: Sản phẩm hồn thành đã đạt được các nội dung như: Thao tác được
với cơ sở dữ liệu NoSQL là MongoDB để thao tác với big data thông qua sự hỗ
trợ của mongoose khi thao tác trên code NodeJS. Nhóm đã tìm hiểu và tạo các
API bằng NodeJS và framework của NodeJS là ExpressJS để nhiều thiết bị khác
nhau có thể sử dụng chung nguồn dữ liệu. Áp dụng thư viện redux để xây dựng
giao diện khá đẹp và đầy đủ chức năng.

2.

Ưu điểm:
• Trong q trình xây dựng website, các thành viên của nhóm thường gặp giáo
viên hướng dẫn để được giải đáp các thắc mắc về đề tài.
• Qua thời gian làm khóa luận đã nâng cao được khả năng tự học, tự tìm kiếm tài
liệu của các thành viên

3.

Khuyết điểm:
• Vì cơng nghệ MERN là một kiến thức tương đối mới đối với các thành viên

trong nhóm nên đã mất thời gian nhiều trong tìm kiếm tài liệu để học và áp dụng.
• Với thời gian có hạn, nên chưa xây dựng được một ứng dụng mang tính chuyên
nghiệp.

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

• Ứng dụng có nhiều tính năng chưa được hồn thành như:
-

Chưa tích hợp được API của các cổng thanh toán trực tuyến.

-

Chưa thực hiện được chức năng thống kê các sản phẩm bán ra của cửa
hàng.

-

Đưa ra danh sách các sản phẩm có liên quan đến sản phẩm mà khách hàng
muốn mua.

• Bất đồng về quan điểm giữa các thành viên trong nhóm.
4.
5.
6.

Đồng ý cho phản biện hay không? …………………

Đánh giá loại: …………
Điểm: ………
TP.HCM, ngày
tháng
năm 2019
Giáo viên hướng dẫn

TS. Nguyễn Thiên Bảo

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

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

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

KHOA CNTT

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

*****

*****

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên SV thực hiện 1: Nguyễn Thị Thức

Mã số SV: 15110329

Họ và tên SV thực hiện 2: Đào Hồn Vũ

Mã số SV: 15110373

Ngành: Cơng nghệ thơng tin

Tên đề tài: Tìm hiểu và áp dụng cơng nghệ MERN stack để xây dựng demo website bán
hàng thời trang.
Họ và tên giáo viên phản biện: T.S Nguyễn Thành Sơn
NHẬN XÉT:
1.
Về nội dung đề tài và khối lượng công việc thực hiện:
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
2.
Ưu điểm:
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
3.
Khuyết điểm:
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
……………………………………………………………………………………………
4.

Đồng ý cho bảo vệ hay không? ………….
5.
Đánh giá loại: …………
6.
Điểm: ………
TP.HCM, ngày
tháng
năm 2019
Giáo viên phản biện

TS. Nguyễn Thành Sơn

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

LỜI CẢM ƠN
Đề tài “Tìm hiểu và áp dụng cơng nghệ MERN để xây dựng website bán hàng
thời trang” là nội dung chúng em chọn để nghiên cứu và hồn thành khóa luận tốt
nghiệp chun ngành cơng nghệ phần mềm.
Để hồn thành q trình nghiên cứu và hoàn thiện luận văn này, lời đầu tiên cho
phép chúng em xin chân thành cảm ơn sâu sắc đến thầy Nguyễn Thiên Bảo. Thầy
đã trực tiếp chỉ bảo và hướng dẫn chúng em trong suốt quá trình nghiên cứu để
chúng em hoàn thiện luận văn. Ngoài ra chúng em cũng xin chân thành cảm ơn các
thầy cô trong khoa Cơng nghệ thơng tin đã đóng góp những ý kiến quý báu cho luận
văn được ngày càng hoàn thiện hơn.
Chúng em cũng xin chân thành cảm ơn bố mẹ đã nuôi nấng, dạy dỗ chúng em,
luôn bên cạnh cổ vũ, tiếp thêm tinh thần, luôn ủng hộ và lắng nghe chúng em để
chúng em có được như ngày hôm nay.

Nhân dịp này, chúng em cũng xin cảm ơn lãnh đạo và các anh chị đang công tác
tại trường đã tạo điều kiện, thời gian, cơ sở vật chất cho chúng em trong suốt quá
trình nghiên cứu.
Trân trọng cảm ơn!

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

Trường ĐH Sư Phạm Kỹ Thuật TP.HCM
Khoa: CNTT

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và Tên SV thực hiện 1: Nguyễn Thị Thức

Mã Số SV:

15110329

Họ và Tên SV thực hiện 2: Đào Hoàn Vũ

Mã Số SV:

15110373

Thời gian làm luận văn: Từ:

Đến:

30/06/2019

01/03/2019

Chuyên ngành: Công nghệ phần mềm
Tên luận văn: Tìm hiểu và áp dụng cơng nghệ MERN stack để xây dựng demo website bán
hàng thời trang.
GV hướng dẫn: TS. Nguyễn Thiên Bảo
Nhiệm Vụ Của Luận Văn:
1. Tìm hiểu được các thành phần trong MERN stack (MongoDB, ExpressJS, ReactJS,
NodeJS).
2. Xây dựng được các Restful API từ NodeJS, sử dụng framework là ExpressJS.
3. Sử dụng ReactJS và thư viện Redux để nâng cao khả năng quản lí ở phía front-end
cho trang web.
4. Kết hợp API trong project ReactJS để thao tác với cơ sở dữ liệu.
5. Hoàn thành trang web phục vụ mua bán hàng thời trang.
Đề cương viết luận văn:
MỤC LỤC
1. Chương 1: MỞ ĐẦU
1.1. Sự cần thiết của đề tài
1.2. Mục đích của đề tài
1.3. Đối tượng và phạm vi nghiên cứu
1.4. Phân tích những cơng trình có liên quan
1.5. Kết quả dự kiến đạt được
2. Chương 2: CƠ SỞ LÍ THUYẾT
2.1. Cơng nghệ MERN STACK
2.2. RestFul API
2.3. Mongoose
2.4. Redux
3. Chương 3: PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG

3.1. Đặc tả yêu cầu
3.2. Lược đồ use case
3.3. Lược đồ cơ sở dữ liệu

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

3.4. Thiết kế giao diện
3.5. Thiết kế xử lí
4. Chương 4: CÀI ĐẶT VÀ KIỂM THỬ
4.1. Cài đặt
4.2. Kiểm thử
5. Chương 5: KẾT LUẬN
5.1. Kết quả đạt được
5.2. Ưu, nhược điểm
5.3. Hướng phát triển của đề tài
TÀI LIỆU THAM KHẢO
KẾ HOẠCH THỰC HIỆN
STT

Thời gian

Công việc

Ghi chú

03/03 đến 17/03

Khảo sát hiện trạng và xác định yêu cầu và
thiết kế cơ sở dữ liệu.

17/03 đến 31/03

Hiện thực hóa các đối tượng trong cơ sở
dữ liệu.

3

31/03 đến 07/04

Tạo API

4

07/04 đến 14/04

Tạo API

5

14/04 đến 28/04

Kết hợp API đã viết vào trang web.

6

28/04 đến 12/05

Xây dựng chức năng login.

12/05 đến 19/05

Phân loại sản phẩm trên trang chủ (dành
cho nam và nữ).

1
2

7
8

19/05 đến
26/05

Xây dựng chức năng tìm kiếm sản phẩm.

26/05 đến 09/06
Xây dựng và sửa lỗi chức năng giỏ hàng.

9
09/06 đến 16/06

Hoàn thành chức năng giỏ hàng.

10
16/06 đến 23/06

Public trang web lên host.

11

Viết báo cáo.

12 23/06 đến 30/06

Hoàn thành luận văn.

Xác nhận của giáo viên hướng dẫn

Ngày

tháng

năm 2019

Người viết đề cương

TS. Nguyễn Thiên Bảo

Nguyễn Thị Thức

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

MỤC LỤC
LỜI CẢM ƠN...................................................................................................................... .

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP ........................................................................ .
DANH MỤC HÌNH ẢNH................................................................................................... .
DANH MỤC CÁC BẢNG ...................................................................................................
CHƯƠNG 1: MỞ ĐẦU ........................................................................................... 1

1.
1.1.

SỰ CẦN THIẾT CỦA ĐỀ TÀI .............................................................................1

1.2.

MỤC ĐÍCH CỦA ĐỀ TÀI.....................................................................................3

1.3.

ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU .......................................................3

1.4.

PHÂN TÍCH NHỮNG CƠNG TRÌNH CĨ LIÊN QUAN ....................................3

1.5.

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC .......................................................................4
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG ............................................................ 5

2.

2.1 CÁC WEBSITE TƯƠNG TỰ ....................................................................................5

2.1.1 Zara ......................................................................................................................5
2.1.2 MWC Store ..........................................................................................................5
2.2 YÊU CẦU CỦA WEBSITE .......................................................................................6
3. CHƯƠNG 3: CƠ SỞ LÍ THUYẾT .............................................................................. 7
3.1 CÔNG NGHỆ MERN STACK ..................................................................................7
3.1.1

MongoDB ........................................................................................................9

3.1.2

NodeJS ...........................................................................................................22

3.1.3

ExpressJS .......................................................................................................26

3.1.4

ReactJS ..........................................................................................................31

3.2

RESTFUL API .....................................................................................................38

3.2.1

Các thành phần .............................................................................................. 38

3.2.2

Cách hoạt động .............................................................................................. 39

3.2.3

Authentication và dữ liệu trả về ....................................................................40

3.3

MONGOOSE .......................................................................................................42

3.3.1

Định nghĩa .....................................................................................................42

3.3.2

Thiết lập Mongoose .......................................................................................43

3.3.3

Định nghĩa schema cho Mongoose................................................................ 44

3.3.4

Tạo và lưu những model của Mongoose .......................................................46

3.3.5

Xác thực dữ liệu trong schema ......................................................................47

3.3.6

Một số thao tác với cơ sở dữ liệu ..................................................................48

3.4

REDUX ................................................................................................................50

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

3.4.1

Giới thiệu .......................................................................................................50

3.4.2

Các nguyên tắc cơ bản của Redux .................................................................51

3.4.3

Tính ứng dụng của Redux .............................................................................52

CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG ................................. 53

4.
4.1

4.1.1

Yêu cầu chức năng nghiệp vụ........................................................................53

4.1.2

Yêu cầu chức năng hệ thống..........................................................................54

4.1.3

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

4.2

LƯỢC ĐỒ USE CASE ........................................................................................55

4.2.1

Lược đồ use case tổng quát ...........................................................................55

4.2.2

Danh sách các use case ..................................................................................55

4.3

CƠ SỞ DỮ LIỆU .................................................................................................61

4.3.1

Category Document .......................................................................................61

4.3.2

Orders Document ..........................................................................................62

4.3.3

Employees Document ....................................................................................65

4.3.4

Customer Document ......................................................................................66

4.4

THIẾT KẾ GIAO DIỆN ......................................................................................68

4.4.2

Thiết kế giao diện cho khách hàng ................................................................ 68

4.4.3

Thiết kế giao diện cho nhân viên ...................................................................73

4.4.4

Thiết kế giao diện cho admin: .......................................................................79

4.5

5

ĐẶC TẢ YÊU CẦU ............................................................................................ 53

THIẾT KẾ XỬ LÍ ................................................................................................ 80

4.5.2

Khách hàng ....................................................................................................80

4.5.3

Quản lí ...........................................................................................................81

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ ............................................................... 83
5.3

CÀI ĐẶT ..............................................................................................................83

5.4

KIỂM THỬ ..........................................................................................................86

5.4.2

Test phần khách hàng ....................................................................................86

5.4.3

Test phần member .........................................................................................88

5.4.4

Test phần admin............................................................................................. 93

6. CHƯƠNG 6: KẾT LUẬN ........................................................................................... 94
6.1 KẾT QUẢ ĐẠT ĐƯỢC ...........................................................................................94
6.2

ƯU, NHƯỢC ĐIỂM ............................................................................................ 94

6.2.1

Ưu điểm .........................................................................................................94

6.2.2

Nhược điểm ....................................................................................................95

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

6.3

HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI................................................................ 95

TÀI LIỆU THAM KHẢO ............................................................................................... 96

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

DANH MỤC HÌNH ẢNH
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình

Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình

Hình
Hình
Hình
Hình
Hình
Hình

1. Website Zara .................................................................................................................................................. 5
2. Website MWC Store ....................................................................................................................................... 5
3. Công nghệ MERN STACK............................................................................................................................ 7
4. Hệ quản trị cơ sở dữ liệu MongoDB............................................................................................................. 9
5. Mô tả _id trong MongoDB .......................................................................................................................... 10
6. Mô tả Collection trong MongoDB .............................................................................................................. 10
7. Mô tả Cursor trong MongoDB .................................................................................................................... 11
8. Ví dụ Document trong MongoDB ............................................................................................................... 11
9. Ví dụ về Indexes trong MongoDB............................................................................................................... 12
10. Ví dụ về cấu trúc dữ liệu của MongoDB và SQL ..................................................................................... 13
11. Cơ chế hoạt động của MongoDB .............................................................................................................. 17
12. Lợi thế ít Schema trong MongoDB ........................................................................................................... 19
13. Khả năng mở rộng của MongoDB............................................................................................................ 20
14. Cách lưu trữ và cho phép truy cập của MongoDB .................................................................................. 20
15. Minh họa NodeJS ...................................................................................................................................... 22
16. Minh họa ExpressJS ................................................................................................................................. 26
17. Minh họa cấu trúc của ExpressJS ............................................................................................................ 27
18. Hoạt động của ExpressJS ......................................................................................................................... 28
19. Quá trình nhận request và trả lại respone của ExpressJS ....................................................................... 29
20. Code ví dụ về điều kiện phản hồi của ExpressJS ..................................................................................... 29
21. Thư viện ReactJS....................................................................................................................................... 31
22. Ví dụ về phân nhóm theo tính năng hoặc theo routes ............................................................................. 32
23. Ví dụ về phân nhóm theo loại file ............................................................................................................. 32

24. So sánh thay đổi của props và state trong component ............................................................................. 37
25. Giới thiệu mơ hình hoạt động của Restful API ........................................................................................ 38
26. Minh họa framework Mongoose ............................................................................................................... 42
27. Thư viện Redux ......................................................................................................................................... 50
28. Cách hoạt động của Redux ....................................................................................................................... 51
29. Use case tổng quát ..................................................................................................................................... 55
30. Use case đăng nhập ................................................................................................................................... 55
31. Use case quản lý mã giảm giá ................................................................................................................... 56
32. Use case quản lý loại sản phẩm ................................................................................................................ 57
33. Use case quản lý sản phẩm ....................................................................................................................... 58
34. Use case quản lý khách hàng .................................................................................................................... 59
35. Use case quản lý giỏ hàng ......................................................................................................................... 60
39. Giao diện màn hình đăng nhập ................................................................................................................ 68
40. Giao diện màn hình quản lý thông tin của khách hàng .......................................................................... 69
41. Giao diện màn hình xem giỏ hàng............................................................................................................ 71
42. Giao diện màn hình thêm sản phẩm vào giỏ hàng................................................................................... 72
43. Giao diện thêm sản phẩm vào giỏ hàng #2............................................................................................... 72
44. Giao diện màn hình quản lý thông tin nhân viên .................................................................................... 73
45. Giao diện màn hình hiển thị danh sách sản phẩm .................................................................................. 74
46. Giao diện màn hình xem thơng tin sản phẩm .......................................................................................... 75
47. Giao diện màn hình xem thơng tin chi tiết sản phẩm .............................................................................. 76
48. Giao diện màn hình hiển thị danh sách các loại sản phẩm ..................................................................... 77
49. Giao diện màn hình hiển thị đơn hàng..................................................................................................... 78
50. Giao diện màn hình xem danh sách nhân viên ........................................................................................ 79
51. Giao diện màn hình chi tiết nhân viên ..................................................................................................... 80
52. Lược đồ tuần tự màn hình đăng nhập ...................................................................................................... 80
53. Lược đồ tuần tự màn hình chỉnh sửa thơng tin cá nhân ......................................................................... 81
54. Lược đồ tuần tự màn hình xóa nhân viên ................................................................................................ 81
55. Lược đồ tuần tự màn hình thêm nhân viên .............................................................................................. 82
56. Cài đặt các thư viện cần thiết cho API ..................................................................................................... 83

57. Cài đặt thư viện cần thiết cho API ............................................................................................................ 83
59. Trở lại thư mục mern-stack-app ............................................................................................................... 84
60. Chạy npm run dev...................................................................................................................................... 84
61. Kết quả sau khi cài đặt .............................................................................................................................. 85

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

DANH MỤC CÁC BẢNG
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng

Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng
Bảng

1. So sánh giữa RDBMS và MongoDB .......................................................................................................... 13
2. Các dữ liệu trong MongoDB ....................................................................................................................... 13
3. Một số câu lệnh thường được sử dụng trong MongoDB .......................................................................... 15
4. Use case đăng nhập ..................................................................................................................................... 55
5. Use case quản lý mã giảm giá ..................................................................................................................... 56
6. Use case quản lý loại sản phẩm .................................................................................................................. 57
7. Use case quản lý sản phẩm ......................................................................................................................... 58
8. Use case quản lý khách hàng ...................................................................................................................... 59
9. Use case quản lý giỏ hàng ........................................................................................................................... 60
22. Mô tả giao diện đăng nhập ....................................................................................................................... 68
23. Mơ tả giao diện màn hình thơng tin cá nhân ........................................................................................... 69
24. Mô tả giao diện màn hình xem giỏ hàng.................................................................................................. 70
25. Mơ tả giao diện thêm sản phẩm vào giỏ hàng.......................................................................................... 73
26. Mơ tả màn hình thơng tin cá nhân ........................................................................................................... 74
27. Mơ tả màn hình hiển thị danh sách sản phẩm......................................................................................... 75
28. Mô tả màn hình xem thơng tin sản phẩm ................................................................................................ 76
29. Mơ tả màn hình xem thơng tin chi tiết sản phẩm .................................................................................... 77

30. Mô tả giao diện hiển thị danh sách các loại sản phẩm ............................................................................ 78
31. Mơ tả màn hình xem danh sách nhân viên .............................................................................................. 79
32. Test màn hình đăng nhập ......................................................................................................................... 86
33. Test màn hình thơng tin cá nhân .............................................................................................................. 86
34. Test màn hình xem giỏ hàng..................................................................................................................... 87
35. Test màn hình thêm sản phẩm vào giỏ hàng............................................................................................ 88
36. Test màn hình xem thơng tin nhân viên ................................................................................................... 88
37. Test màn hình xem danh sách sản phẩm ................................................................................................. 88
38. Test màn hình xem thơng tin chi tiết sản phẩm ....................................................................................... 89
39. Test màn hình xem danh sách mã giảm giá ............................................................................................. 90
40. Test màn hình xem thơng tin khách hàng ................................................................................................ 91
41. Test màn hình xem danh sách các loại sản phẩm ................................................................................... 91
42. Test màn hình xem đơn hàng ................................................................................................................... 92
43. Test màn hình danh sách nhân viên ........................................................................................................ 93

do an


1. CHƯƠNG 1: MỞ ĐẦU
1.1.

SỰ CẦN THIẾT CỦA ĐỀ TÀI
Thế giới đang ngày càng phát triển, kéo theo đó là sự phát triển khơng ngừng

của nền khoa học nói chung và cơng nghệ thơng tin nói riêng. Ngày nay cơng nghệ
thông tin là điều không thể thiếu trong hầu hết các lĩnh vực, trong đó có kinh doanh,
cụ thể là kinh doanh các mặt hàng thời trang. Nếu không thiết kế web, bạn đã vơ tình
bỏ qua khoảng 90% lượng khách hàng đến với mình mà khơng hề hay biết. Vậy thì
tại sao website lại có ma lực giúp chủ cửa hàng tiếp cận một lượng khách hàng lớn
đến như vậy? Dưới đây là những lí do chính để trả lời cho câu hỏi này:

Thứ nhất: bạn sẽ có thể tăng khả năng tiếp cận khách hàng của mình: Nếu cửa
hàng khơng có trang web riêng, khách hàng sẽ chỉ có thể mua sản phẩm, nhận dịch
vụ và tương tác với chủ cửa hàng trong giờ hành chính. Điều này khiến các dịch vụ
cũng như hoạt động của cửa hàng bị giới hạn. Một cửa hàng có thể thu hút được khách
địa phương nhưng lại là hạn chế đối với những khách hàng ở khu vực khác. Tuy nhiên,
khi cửa hàng xây dựng một trang web riêng thì phạm vị khách hàng sẽ không bị giới
hạn. Cơ hội nhận được đơn đặt hàng của khách từ khắp mọi nơi trên đất nước sẽ ngày
càng tăng cao.
Thứ hai: Quản lý hàng hóa dễ dàng: Nếu bạn bán hàng trên facebook? rõ ràng
bạn phải xem xét rất nhiều thứ để biết được hàng đó cịn hay hết, đặc biệt nếu bạn là
chủ và có một nhân viên khác bán hàng. Nếu bạn đang có một vài cửa hàng ở các
quận khác nhau, nếu muốn biết số hàng này còn hay hết bạn sẽ phải xem xét sổ sách
thống kế rất phức tạp. Hoặc phải đợi cuối tuần hoặc cuối tháng nhân viên tổng kết lại
bạn mới nắm được việc kinh doanh của mình tiến triển như thế nào. Nếu bạn đang
dùng một phần mềm được lập trình để quản lý kinh doanh? cũng được đấy. Nhưng
chưa phải là tốt nhất! Chắc chắn bạn khơng thể dùng điện thoại của mình để check
các thống kê được. Nhưng hệ thống quản trị của website làm được tất cả những việc
đó, ngay cả khi bạn chỉ cầm một chiếc smartphone khi đang đi du lịch.
Thứ ba: Dịch vụ chăm sóc khách hàng hiệu quả: Mọi người đều dễ dàng gõ
một câu hỏi khi thắc mắc về sản phẩm của bạn khi phần comment được tích hợp trên
website hơn là cầm điện thoại lên để alo.

1

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

Thứ tư: Website là nền tảng cho thương mại điện tử: Một người đi làm 8h/ngày

thì sẽ có rất ít thời gian đi mua sắm ở cửa hàng hay các trung tâm mua sắm offline.
Đó là lý do mà bán hàng online ngày càng phát triển.
Thứ năm: Xây dựng thương hiệu: Bạn nghĩ bán hàng qua facebook bằng cách
live stream tặng quà, khuyến mãi … là bạn đang bán hàng online? Không hẳn vậy.
Thực tế là có đến gần 90% lượng khách hàng lựa chọn sản phẩm của shop có website
riêng hơn là những shop khác. Bởi lẽ: Xây dựng thương hiệu là điều đáng quan tâm
của một doanh nghiệp và trang web sẽ giúp doanh nghiệp làm điều này. Nó phản ánh
một hình ảnh chuyên nghiệp thông qua giao diện và các hoạt động của doanh nghiệp.
Địa chỉ email, tên miền và cách giao tiếp với khách hàng qua website giúp doanh
nghiệp xây dựng uy tín và sự tin cậy cho khách hàng, tạo dựng thương hiệu và truyền
bá hình ảnh trên tồn thế giới.
Thứ sáu: Hoạt động 24/7: Với Website chuyên nghiệp, cửa hàng của bạn dường
như không bao giờ ngừng làm việc để phục vụ khách hàng, từ đó, giúp bạn tiết kiệm
về thời gian lẫn chi phí.
Website sẽ hoạt động 24/7, bất cứ khi nào khách hàng cần, kể cả giờ nghỉ của
nhân viên hoặc ngày nghỉ lễ. Thông qua Website, khách hàng dễ dàng tiếp cận hơn
với cửa hàng, sử dụng dịch vụ của bạn một cách dễ dàng nhất dù họ ở nơi đâu, bất cứ
lúc nào.
Thứ 7: Với khả năng phối đồ khá tinh tường của các nhân viên thì khơng những
chọn một chiếc áo, chiếc quần hay đơi giày, … Mà khách hàng có thể lựa chọn nguyên
một set đồ để dự một sự kiện, một buổi tiệc nào đó thơng qua chức năng đề xuất của
website. Điều này chẳng những tạo sự linh động trong cách bán hàng mà còn giúp
tăng doanh số một cách đáng kể.
Hơn thế nữa, bạn có thể đưa những thắc mắc thường gặp của khách hàng lên
website và thiết lập hệ thống trả lời những câu hỏi đó. Sẽ tiết kiệm rất nhiều thời gian
trả lời điện thoại hoặc thuê riêng một nhân viên hỗ trợ.
Bên cạnh việc đã có được một trang web, việc trang web đó hoạt động như thế
nào để đáp ứng được nhu cầu của người dùng cũng là một vấn đề rất đáng được quan
tâm. Với một trang web truyền thống, khi người dùng yêu cầu một trang web, thì
2

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

server sẽ tính tốn và trả về trang web đó cho người dùng tồn bộ trang web dưới dạng
mã html. Hầu như khơng có bất kỳ sự liên kết nào giữa 2 yêu cầu gần nhau. Do đó khi
có nhiều yêu cầu được diễn ra thì sẽ làm q trình tính tốn diễn ra lâu hơn, bởi hệ
thống phải tính tốn nhiều thành phần trước khi trả về một trang web hồn chỉnh, điều
đó khiến cho performance của trang web khá chậm. Chính vì các lí do đó mà SPAs
(single page applications) đã được ra đời. Sau khi load trang web ở lần đầu tiên, ở
những lần sau, khi chuyển trang khác, client sẽ gửi những request để nhận dữ liệu cần
thiết (thường là phần nội dung). Việc này mang đến trải nghiệm cho người dùng web
tốt hơn, giảm thời gian phải load lại tồn bộ trang web cồng kềnh, tiết kiệm băng thơng
cũng như thời gian chờ đợi. Việc này là trái ngược hoàn toàn với trang web truyền
thống khi toàn bộ trang web phải load lại mỗi khi chuyển trang.
Có quá nhiều lý do để trả lời cho một câu hỏi: Vì sao cần phải có một website
kinh doanh thời trang hồn hảo, chạy nhanh? Vậy nên website kinh doanh là một phần
không thể thiếu đối với các shop thời trang trong thời kỳ hiện đại của thế giới ngày
nay.
1.2.

MỤC ĐÍCH CỦA ĐỀ TÀI
Đề tài “Tìm hiểu và áp dụng cơng nghệ MERN STACK để xây dựng website

bán hàng thời trang” thuộc hướng tìm hiểu cơng nghệ để từ đó xây dựng ứng dụng.
Mục tiêu của đề tài là tìm hiểu các kiến thức cơ bản của MERN STACK trong việc
áp dụng để xây dựng một trang web theo hướng Single Page Applications.

1.3.

ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU
- Đối tượng nghiên cứu: Công nghệ MERN STACK.
- Phạm vi nghiên cứu: Ứng dụng của công nghệ MERN STACK trong xây

dựng một trang web.
1.4.

PHÂN TÍCH NHỮNG CƠNG TRÌNH CĨ LIÊN QUAN
Trong q trình làm tiểu luận, nhóm đã tham khảo các trang web trên internet

về bán hàng online như: Shopee, Lazada, … Để nắm bắt được xu hướng ưa thích
giao diện của người dùng về trang web bán hàng trực tuyến và đưa ra giao diện phù
hợp. Ngồi ra, nhóm cũng có tham khảo các dự án bằng ReactJS và NodeJS thông
qua các kênh youtube để hoàn thành website.
3

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

1.5.

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
- Tìm hiểu các kiến thức cơ bản về công nghệ MERN STACK trong xây dựng

một ứng dụng web bao gồm các đặc điểm và chức năng như:
+

Thêm, sửa, xóa các đối tượng được quản lí bởi website như: sản phẩm,

khách hàng, nhân viên, danh sách các loại sản phẩm, … Tùy theo chức năng của
từng người dùng (nhân viên và khách hàng).
+

Chọn và đặt hàng online.

+

Giao diện thân thiện với người dùng, chức năng dễ dàng thao tác.

+

Các thông tin của các đối tượng được bảo mật tốt.

- Tìm hiểu mơ hình MVC áp dụng trong lập trình hướng đối tượng để phát
triển ứng dụng rõ ràng, nhanh chóng, đơn giản và dễ nâng cấp, bảo trì hơn.

4

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

2. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG
2.1 CÁC WEBSITE TƯƠNG TỰ
2.1.1 Zara

Hình 1. Website Zara

Ấn tượng đầu tiên của Zara là silde lớn có các animation chuyển động liên tục,
tránh gây nhàm chán khi khách hàng truy cập vào.
2.1.2 MWC Store

Hình 2. Website MWC Store

MWC store là trang web chuyên bán các loại giày, dép. Thế mạnh của MWC là có
các nút để phân loại sản phẩm trên, giúp khách hàng dễ dàng hiểu được và sử
dụng.

5

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

2.2 YÊU CẦU CỦA WEBSITE
- Thao tác được với cơ sở dữ liệu NoSQL là MongoDB đang được sử dụng rất
rộng rãi hiện nay để thao tác với big data thông qua sự hỗ trợ của mongoose khi
thao tác trên code NodeJS. Với cơ sở dữ liệu, nhóm đã có thể hiểu được cấu trúc
của một document và thao tác để thêm mới, sửa, và xóa đi các thành phần của
document, lấy dữ liệu mong muốn từ document trong cơ sở dữ liệu.
- Với nhu cầu hiện tại, phần lớn các trang web được thiết kế với phần lấy dữ liệu
là sử dụng các API (Resful API) để nhiều thiết bị khác nhau có thể sử dụng chung
nguồn dữ liệu. Chính vì vậy, nhóm đã tìm hiểu và tạo các API bằng NodeJS và
framework của NodeJS là ExpressJS.

- Về phía Client: Phần giao diện với người sử dụng được viết bằng ReactJS và áp
dụng thư viện nâng cao hơn là Redux để hoàn thành giao diện. Về cơ bản, trang
web đã có thể thực hiện các thao tác cho người khách hàng có thể đăng kí tài
khoản mới, xem các sản phẩm, xem chi tiết sản phẩm, thêm sản phẩm vào giỏ
hàng và đăng nhập vào hệ thống để thực hiện mua hàng. Về phía những người
quản trị trang web: có thể quản lí thông tin tất cả các đối tượng liên quan đến cửa
hàng như: sản phẩm, loại sản phẩm, mã giảm giá, danh sách nhân viên, khách
hàng, … Đồng thời, người sử dụng có thể thao tác để sửa chữa thơng tin cá nhân
của mình.

6

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

3. CHƯƠNG 3: CƠ SỞ LÍ THUYẾT
3.1 CƠNG NGHỆ MERN STACK
Một ứng dụng web được xây dựng dựa trên sự kết hợp của nhiều công nghệ
khác nhau, sự kết hợp của các công nghệ lại với nhau như vậy được gọi là “stack”.
Một trong những stack nổi tiếng là LAMP (sự kết hợp giữa Linux, Apache, MySQL
và PHP, đều là những thành phần mã nguồn mở). Khi sự phát triển web ngày càng
phát triển và tính tương tác ngày càng nổi bật thì SPAs (single page applications)
lại trở nên phổ biến hơn. Một ứng dụng web SPA thay vì việc gọi lên server để tải
lại toàn bộ nội dung của trang sau mỗi lần có request từ phía client sẽ chỉ gọi lên
server để lấy các nội dung cần thiết cần được thay đổi. Chính điều này đã dẫn đến
yêu cầu ngày càng nâng cao về ngơn ngữ xử lí ở phía front-end.

Hình 3. Công nghệ MERN STACK

MEAN (MongoDB, Express, AngularJS, Node.js) STACK là một trong những
bộ công cụ mã nguồn mở áp dụng theo mơ hình SPAs (single page applications)
cùng với việc áp dụng cơ sở dữ liệu NoSQL. Trong stack này:
- AngularJS đóng vai trị là một front-end framework dựa trên mơ hình MVC
(model-view-controller).
- MongoDB dùng để lưu trữ dữ liệu là một hệ quản trị cơ sở dữ liệu NoSQL
rất phổ biến.
- NodeJS: là một JavaScript runtime.
Trước NodeJS, các nhà phát triển phần mềm sẽ phải sử dụng các ngôn ngữ
khác nhau như PHP, Java, ASP.NET, … chạy trên máy chủ và JavaScript sẽ chạy
7

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

trong trình duyệt máy khách. Giờ đây với NodeJS, các nhà phát triển có thể sử dụng
JavaScript trên máy chủ cũng như máy khách. NodeJS cho phép JavaScript chạy
mà khơng cần trình duyệt và thường được sử dụng để chạy các máy chủ web. Một
chương trình sẽ nhận source code và:
• Phân tích source và thực thi từng đơn vị có thể.
• Cung cấp một vài object để javascript có thể tương tác với thế giới
bên ngoài
NodeJS được xây dựng trên JavaScript runtime V8 của chrome để đáp ứng nhu
cầu phát triển nhanh và có thể mở rộng của ứng dụng. Để tương tác với mơi trường,
V8 cung cấp các lớp template bọc ngồi các object và function được viết bởi C++.
Các function C++ này có thể làm nhiệm vụ đọc – ghi file system, thao tác
networking hoặc giao tiếp các tiến trình khác trong hệ thống. Các biến được cung

cấp bởi các thư viện, đón nhận source và thực thi nó.
- ExpressJS là một web framework được xây dựng bằng javascript chạy trên
nền NodeJS. Nó hỗ trợ thêm nhiều tính năng cần có của một web framework như:
routing, middlewares, …
Bản thân NodeJS có thể làm được mọi thứ nhưng ExpressJS được ra đời để
các thao tác được thực hiện dễ dàng hơn.
Ưu điểm của việc sử dụng ExpressJS:
• Có khả năng sử dụng cho Sass, Less, Stylus.
• Nhanh, nhẹ.
• Thích hợp đối với mơ hình MVC.
• Định tuyến.
• Tính linh hoạt.
React được phát triển bởi facebook đã được phổ biến rộng rãi và thay thế được
Angular trong MEAN STACK. Do đó “A” được thay bằng “R” để tạo thành MERN
STACK. React không phải là một framework theo mơ hình MVC như Angular mà
chỉ là một thư viện để xây dựng giao diện người dùng. Giống như Angular, React
cũng chia ứng dụng thành các phần (components) để quản lí. Mỗi component có thể
giữ trạng thái riêng và component cha có thể chuyển trạng thái xuống các component
con hoặc ngược lại thông qua các hàm gọi lại (callback functions).
8

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

3.1.1 MongoDB

Hình 4. Hệ quản trị cơ sở dữ liệu MongoDB

3.1.1.1 Định nghĩa:
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu
NoSQL (*) hàng đầu, được hàng triệu người sử dụng. MongoDB được viết bằng
C++. Nó được thiết kế theo kiểu hướng đối tượng, các bảng trong MongoDB được
cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ trên bảng không cần tuân theo
một cấu trúc nhất định nào cả (điều này rất thích hợp làm big data).
NoSQL là 1 dạng CSDL mã nguồn mở không sử dụng Transact-SQL để truy
vấn thông tin. NoSQL viết tắt bởi: Non-Relational SQL, hay có nơi thường gọi là
Not-Only SQL. CSDL này được phát triển trên Javascript Framework với kiểu dữ
liệu JSON. (Cú pháp của JSON là “key:value”) NoSQL ra đời như là 1 mảnh vá cho
những khuyết điểm và thiếu xót cũng như hạn chế của mơ hình dữ liệu quan hệ
RDBMS về tốc độ, tính năng, khả năng mở rộng, memory cache, ...
Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái
niệm Collections và Documents, nó cung cấp hiệu suất cao, tính khả dụng cao và
khả năng mở rộng dễ dàng.
((*) />
3.1.1.2 Các thuật ngữ hay được sử dụng trong MongoDB:

9

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

- _id: Là trường bắt buộc có trong mỗi document. Trường _id đại diện cho một
giá trị duy nhất trong document MongoDB. Trường _id cũng có thể được hiểu là
khóa chính trong document. Nếu bạn thêm mới một document thì MongoDB sẽ tự
động sinh ra một _id đại diện cho document đó và là duy nhất trong cơ sở dữ liệu
MongoDB.

Hình 5. Mơ tả _id trong MongoDB

- Collection: Là nhóm của nhiều document trong MongoDB. Collection có thể
được hiểu là một bảng tương ứng trong cơ sở dữ liệu RDBMS (Relational Database
Management System). Collection nằm trong một cơ sở dữ liệu duy nhất. Các
collection không phải định nghĩa các cột, các hàng hay kiểu dữ liệu trước.

Hình 6. Mơ tả Collection trong MongoDB

10

do an


Tìm hiểu và áp dụng cơng nghệ Mern để xây dựng demo website bán hàng thời trang

- Cursor: Đây là một con trỏ đến tập kết quả của một truy vấn. Máy khách có
thể lặp qua một con trỏ để lấy kết quả.

Hình 7. Mơ tả Cursor trong MongoDB

- Database: Nơi chứa các Collection, giống với cơ sở dữ liệu RDMS chúng
chứa các bảng. Mỗi Database có một tập tin riêng lưu trữ trên bộ nhớ vật lý. Một
mấy chủ MongoDB có thể chứa nhiều Database.
- Document: Một bản ghi thuộc một Collection thì được gọi là một Document.
Các Document lần lượt bao gồm các trường tên và giá trị.

Hình 8. Ví dụ Document trong MongoDB

- Field: Là một cặp name – value trong một document. Một document có thể
có không hoặc nhiều trường. Các trường giống các cột ở cơ sở dữ liệu quan hệ.

11

do an