(Đồ án tốt nghiệp) Ứng dụng Mern Stack xây dựng Wesite bán giày

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Ệ PHẦN MỀM

ỨNG DỤNG MERN STACK XÂY
DỰNG WEBSITE BÁN GIÀY

GVHD: TS. LÊ VĨNH THỊNH
SVTH: NGUYỄN THANH GIÀU
MSSV: 16110317
SVTH: TRẦN VĂN LUYỆN
MSSV: 16110385

SKL 0 0 7 1 5 0

Tp. Hồ Chí Minh, năm 2020


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM

NGUYỄN THANH GIÀU - 16110317
TRẦN VĂN LUYỆN - 16110385
Đề Tài:

ỨNG DỤNG MERN STACK
XÂY DỰNG WEBSITE BÁN GIÀY

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN
TS. LÊ VĨNH THỊNH

KHÓA 2016 - 2020


Đ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 Sinh viên 1: Nguyễn Thanh Giàu

MSSV 1: 16110317

Họ và tên Sinh viên 2: Trần Văn Luyện

MSSV 2: 16110385

Ngành: Công nghệ Thông tin
Tên đề tài: ỨNG DỤNG MERN STACK VÀ XÂY DỰNG WEBSITE BÁN GIÀY
Họ và tên Giáo viên hướng dẫn: TS. Lê Vĩnh Thịnh

NHẬN XÉT:
1. Về nội dung đề tài & khối lượng thực hiện:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
2. Ưu điểm:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
3. Khuyết điểm:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
4. Đề nghị cho bảo vệ hay không? ...................................................................................
5. Đánh giá loại: ...............................................................................................................
6. Điểm:.............................................................................................................................
Tp. Hồ Chí Minh, ngày

tháng

Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)

năm 2020

Đ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 Sinh viên 1: Nguyễn Thanh Giàu

MSSV 1: 16110317

Họ và tên Sinh viên 2: Trần Văn Luyện

MSSV 2: 16110385

Ngành: Công nghệ Thông tin
Tên đề tài: ỨNG DỤNG MERN STACK VÀ XÂY DỰNG WEBSITE BÁN GIÀY
Họ và tên Giáo viên phản biện: TS. Huỳnh Xuân Phụng
NHẬN XÉT:
1. Về nội dung đề tài & khối lượng thực hiện:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
2. Ưu điểm:
...........................................................................................................................................

...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
3. Khuyết điểm:
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
4. Đề nghị cho bảo vệ hay không? ...................................................................................
5. Đánh giá loại: ...............................................................................................................
6. Điểm:.............................................................................................................................
Tp. Hồ Chí Minh, ngày

tháng

Giáo viên phản biện
(Ký & ghi rõ họ tên)

năm 2020


LỜI CẢM ƠN
Trong suốt bốn năm học tại trường, trải qua một quá trình dài cho việc học tập và nghiên
cứu, tích lũy kiến thức cho các mơn học đại cương cũng như các mơn chun ngành thì
chúng em đã nhận được nhiều kết quả tốt, cùng với những điểm số chất lượng thì kiến thức
lẫn kinh nghiệm chúng em đều tích lũy được cho bản thân để rồi giúp chúng em bước đến
chặng đường cuối cùng của thời sinh viên - thực hiện khóa luận tốt nghiệp. Chính vì vậy,
nhân cơ hội này chúng em xin cảm ơn đến trường ĐH Sư phạm Kỹ thuật TPHCM đã tạo
điều kiện về cơ sở vật chất cũng như các điều kiện cần thiết khác để chúng em có thể tập
trung nghiên cứu hồn thành tốt các đề tài của các mơn học, và đặc biệt là đề tài khóa luận

tốt nghiệp trong học kì này.
Một lời cảm ơn chân thành thứ hai, chúng em gửi đến khoa Công nghệ thông tin của
trường đã tạo điều kiện cho chúng em có cơ hội học tập và rèn luyện, hỗ trợ chúng em
nghiên cứu thực hiện các đề tài để tích lũy thêm nhiều kinh nghiệm cho bản thân.
Và đặc biệt, chúng em xin gửi lời cảm ơn đến thầy Lê Vĩnh Thịnh - giảng viên hướng
dẫn nhóm thực hiện khóa luận tốt nghiệp kỹ sư. Thầy ln nhiệt tình hướng dẫn, theo sát
chúng em trong quá trình thực hiện đề tài. Hơn nữa, ở mỗi buổi báo cáo tiến độ, thầy góp
ý đề tài một cách chi tiết, cặn kẽ và hướng chúng em đến những gì thực tế nhất để chúng
em rút kinh nghiệm để chỉnh sửa, nâng cấp và thực hiện đề tài ngày một tốt hơn.
Mặc dù nhóm đã mất một khoảng thời gian khá dài để có thể hồn thành đề tài nhưng
cũng khơng tránh khỏi những thiếu sót, kính mong q thầy cơ nhiệt tình góp ý để nhóm
có thêm được nhiều kinh nghiệm hơn cho cơng việc sau này.
Chúng em xin chân thành cảm ơn!


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN
---------------

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và tên sinh viên 1: Nguyễn Thanh Giàu

MSSV: 16110317

Họ và tên sinh viên 2: Trần Văn Luyện

MSSV: 16110385

Thời gian làm luận văn: từ ngày 31/3/2020 đến ngày 27/7/2020
Chuyên ngành: Công nghệ phần mềm

Tên đề tài: ỨNG DỤNG MERN STACK VÀ XÂY DỰNG WEBSITE BÁN GIÀY
Giảng viên hướng dẫn: TS. Lê Vĩnh Thịnh
Nhiệm vụ của luận văn:
1. Tìm hiểu các kiến thức cơ bản và nâng cao về cơ sở dữ liệu NoSQL MongoDB,
framework ExpressJS, framework ReactJS, NodeJS (Javascript runtime).
2. Tìm hiểu cách kết hợp MongoDB, ExpressJS, ReactJS và NodeJS để tạo thành một web
application hoàn chỉnh.
3. Lập kế hoạch phát triển cho đề tài, xác định được phạm vi của đề tài.
4. Xác định mơ hình phát triển đề tài.
5. Xây dựng giao diện cho website.
6. Viết code back-end xây dựng các chức năng cho website.
7. Tìm hiểu các phương thức thanh tốn không tiền mặt và ứng dụng.
Đề cương luận văn:
MỤC LỤC
PHẦN MỞ ĐẦU
1. Tính cấp thiết của đề tài
2. Mục tiêu của đề tài
3. Đối tượng và phạm vi nghiên cứu
4. Dự kiến kết quả đạt được
5. Kết cấu của đề tài
PHẦN NỘI DUNG
1. CHƯƠNG 1. KHẢO SÁT HIỆN TRẠNG
1.1. Phân tích ưu điểm, nhược điểm của một số website
1.2. Đánh giá chung


2. CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1. Giới thiệu chung về công nghệ sử dụng
2.2. Giới thiệu hệ quản trị CSDL MongoDB
2.3. Giới thiệu NodeJS

2.4. Giới thiệu ExpressJS
2.5. Giới thiệu ReactJS
3. CHƯƠNG 3. XÁC ĐỊNH VÀ MƠ HÌNH HĨA U CẦU
3.1. Xác định u cầu
3.2. Mơ hình hóa u cầu
4. CHƯƠNG 4. THIẾT KẾ PHẦN MỀM
4.1. Thiết kế hệ thống
4.2. Thiết kế CSDL
4.3. Thiết kế giao diện
5. CHƯƠNG 5. CÀI ĐẶT, KIỂM THỬ PHẦN MỀM
5.1. Cài đặt
5.2. Kiểm thử phần mềm
PHẦN KẾT LUẬN
1. Kết quả đạt được
2. Ưu điểm
3. Nhược điểm
4. Hướng phát triển
TÀI LIỆU THAM KHẢO
KẾ HOẠCH THỰC HIỆN
STT
1

Thời gian
30/3/2020 - 6/4/2020

Cơng việc
Tìm hiểu các kiến thức cơ bản, cần thiết
về các thành phần trong MERN stack và

2

6/4/2020 - 13/4/2020

sự kết hợp giữa chúng để áp dụng vào đề
tài.
Khảo sát hiện trạng và xác định yêu cầu

3

13/4/2020 - 20/4/2020

4

20/4/2020 - 27/4/2020

Mơ hình hóa u cầu, thiết kế hệ thống

5

27/4/2020 - 4/5/2020

và thiết kế CSDL

cho dự án.

Ghi chú


6

4/5/2020 - 11/5/2020

7

11/5/2020 - 18/5/2020

8

18/5/2020 - 25/5/2020

9

25/5/2020 - 1/6/2020

10

1/6/2020 - 8/6/2020

11

8/6/2020 - 15/6/2020

12

15/6/2020 - 22/6/2020

13

22/6/2020/ - 29/6/2020

14

29/6/2020 - 6/7/2020

15

6/7/2020 - 13/7/2020

16

13/7/2020 - 20/7/2020

17

20/7/2020 - 27/7/2020

Xây dựng giao diện, thiết kế xử lý
Xây dựng giao diện, thiết kế xử lý
Xây dựng chức năng của User

Xây dựng chức năng của Admin
Lên kế hoạch và kiểm thử phần mềm
Hoàn thành các báo cáo, bài thuyết trình
Kiểm tra tổng thể lại website, báo cáo,
bài thuyết trình, quay video demo

Ngày

tháng

năm 2020

Người viết đề cương
Ý kiến của giáo viên hướng dẫn
......................................................................
......................................................................
......................................................................

(Ký và ghi rõ họ tên)


MỤC LỤC
PHẦN 1. 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. ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU ..........................................................1
4. DỰ KIẾN KẾT QUẢ ĐẠT ĐƯỢC ...........................................................................2
5. KẾT CẤU CỦA ĐỀ TÀI ............................................................................................2
PHẦN 2: NỘI DUNG.........................................................................................................4
1. CHƯƠNG 1. KHẢO SÁT HIỆN TRẠNG ................................................................4
1.1. PHÂN TÍCH ƯU ĐIỂM, NHƯỢC ĐIỂM CỦA MỘT SỐ WEBSITE ....................4
1.1.1. Website />1.1.2. Website ................................................................................7
1.1.3. Website ..............................................9
1.1.4. Website ......................................................................11
1.2. ĐÁNH GIÁ CHUNG ..............................................................................................14
2. CHƯƠNG 2: CƠ SỞ LÝ THUYẾT ........................................................................16
2.1. TỔNG QUAN VỀ CÔNG NGHỆ SỬ DỤNG ........................................................16
2.1.1. Khái quát về Technical Stack............................................................................16
2.1.2. Khái quát về MERN Stack ................................................................................16
2.2. GIỚI THIỆU VỀ HỆ QUẢN TRỊ CSDL MONGODB ..........................................17

2.2.1. Khái quát về NoSQL .........................................................................................17
2.2.2. Khái quát về MongoDB ....................................................................................18
2.2.3. Mongoose ..........................................................................................................18
2.3. GIỚI THIỆU VỀ NODEJS .....................................................................................18
2.3.1. Khái quát về NodeJS .........................................................................................18
2.3.2. Đặc điểm của NodeJS .......................................................................................18
2.3.3. NPM (NodeJS Package Manager) ....................................................................20
2.3.4. Nhược điểm của NodeJS ...................................................................................20
2.4. GIỚI THIỆU VỀ EXPRESSJS ...............................................................................21
2.4.1. Khái quát về ExpressJS .....................................................................................21
2.4.2. Đặc điểm của ExpressJS ...................................................................................21
2.4.3. Restful API ........................................................................................................21
2.4.4. Tại sao sử dụng Express trong việc quản lý Rest API ......................................21
2.5. GIỚI THIỆU VỀ REACTJS ...................................................................................21


2.5.1. Khái quát về ReactJS ........................................................................................21
2.5.2. Đặc điểm của ReactJS .......................................................................................21
2.5.3. Tại sao lại sử dụng ReactJS làm Front-end framework? ..................................22
3. CHƯƠNG 3: XÁC ĐỊNH VÀ MƠ HÌNH HĨA U CẦU .................................23
3.1. XÁC ĐỊNH U CẦU ...........................................................................................23
3.2. MƠ HÌNH HĨA YÊU CẦU ...................................................................................32
3.2.1. Các lược đồ Use case ........................................................................................32
3.3.2. Đặc tả, luồng xử lý Use case .............................................................................37
4. CHƯƠNG 4: THIẾT KẾ PHẦN MỀM ..................................................................48
4.1. THIẾT KẾ HỆ THỐNG ..........................................................................................48
4.1.1. Lược đồ Sequence .............................................................................................48
4.2. THIẾT KẾ CỞ SỞ DỮ LIỆU .................................................................................57
4.2.1. Lược đồ quan hệ ................................................................................................57
4.2.2. Các Collection ...................................................................................................57

4.2.4. Mô tả dữ liệu .....................................................................................................58
4.3. THIẾT KẾ GIAO DIỆN ..........................................................................................62
4.3.1. Màn hình đăng nhập ..........................................................................................62
4.3.2. Màn hình đăng ký..............................................................................................64
4.3.3. Màn hình quên mật khẩu ...................................................................................66
4.3.4. Màn hình trang chủ ...........................................................................................68
4.3.5. Màn hình Quản lý tài khoản ..............................................................................74
4.3.6. Màn hình thơng tin cá nhân ...............................................................................75
4.3.7. Màn hình Thay đổi thơng tin cá nhân ...............................................................77
4.3.8. Màn hình Đổi mật khẩu ....................................................................................79
4.3.9. Màn hình Quản lý danh sách sản phẩm u thích ............................................81
4.3.10. Màn hình Lịch sử đơn hàng ............................................................................83
4.3.11. Màn hình Danh mục sản phẩm .......................................................................85
4.3.12. Màn hình Chi tiết sản phẩm ............................................................................88
4.3.13. Màn hình Liên hệ ............................................................................................92
4.3.14. Màn hình Tìm kiếm sản phẩm ........................................................................94
4.3.15. Màn hình Tin nhắn ..........................................................................................95
4.3.16. Màn hình Giỏ hàng..........................................................................................96
4.3.17. Màn hình Xác nhận đơn hàng và thanh tốn ..................................................98
4.3.18. Màn hình Dashboard Admin .........................................................................107


4.3.19. Màn hình Quản lý User .................................................................................111
4.3.20. Màn hình Thêm user .....................................................................................113
4.3.21. Màn hình Sửa user ........................................................................................114
4.3.22. Màn hình Quản lý sản phẩm .........................................................................116
4.3.23. Màn hình Thêm sản phẩm .............................................................................118
4.3.24. Màn hình Chỉnh sửa thơng tin sản phẩm ......................................................120
4.3.25. Màn hình Xác nhận xóa ................................................................................122
4.3.26. Màn hình Quản lý danh mục sản phẩm.........................................................123

4.3.27. Màn hình Chi tiết danh mục sản phẩm .........................................................125
4.3.28. Màn hình Thêm danh mục sản phẩm ............................................................127
4.3.29. Màn hình Chỉnh sửa danh mục sản phẩm .....................................................129
4.3.30. Màn hình Quản lý đơn hàng..........................................................................132
4.3.31. Màn hình Chi tiết đơn hàng ..........................................................................134
4.3.32. Màn hình Cập nhật trạng thái đơn hàng ........................................................135
4.3.32. Màn hình Quản lý tin nhắn ...........................................................................136
4.3.33. Màn hình Thêm tin nhắn ...............................................................................138
4.3.34. Màn hình Chat ...............................................................................................139
5. CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM ......................................141
5.1. CÀI ĐẶT ...............................................................................................................141
5.1.1. Chuẩn bị môi trường .......................................................................................141
5.1.2. Các bước tiến hành ..........................................................................................141
5.2. KIỂM THỬ PHẦN MỀM .....................................................................................142
5.2.1. Chiến lược và kế hoạch kiểm thử....................................................................142
5.2.2. Một số kỹ thuật kiểm thử dùng trong dự án ....................................................143
5.2.3. Quy trình kiểm thử ..........................................................................................143
5.2.4. Test case ..........................................................................................................145
PHẦN 3: KẾT LUẬN ....................................................................................................153
1. KẾT QUẢ ĐẠT ĐƯỢC .........................................................................................153
2. ƯU ĐIỂM ................................................................................................................153
3. NHƯỢC ĐIỂM .......................................................................................................154
4. HƯỚNG PHÁT TRIỂN .........................................................................................154
DANH MỤC TÀI LIỆU THAM KHẢO......................................................................155


DANH MỤC HÌNH ẢNH
Hình 1.1: Trang chủ website bitis.com.vn ...................................................................................... 5
Hình 1.2: Trang sản phẩm website bitis.com.vn ............................................................................. 5
Hình 1.3: Chi tiết sản phẩm website bitis.com.vn ........................................................................... 5

Hình 1.4: Trang tìm kiếm webite bitis.com.vn ............................................................................... 6
Hình 1.5: Trang chi tiết giỏ hàng website bitis.com.vn .................................................................. 6
Hình 1.6: Trang sản phẩm u thích website bitis.com.vn ............................................................. 6
Hình 1.7: Trang tìm cửa hàng website bitis.com.vn ....................................................................... 7
Hình 1.8: Trang chủ website vinagiay.vn ....................................................................................... 8
Hình 1.9: Trang chủ website vinagiay.vn ....................................................................................... 8
Hình 1.10: Trang tìm kiếm website vinagiay.vn ............................................................................. 8
Hình 1.11: Trang mua hàng website vinagiay.vn ............................................................................ 9
Hình 1.12: Trang hệ thống phân phối website vinagiay.vn ............................................................ 9
Hình 1.13: Trang chủ website buywholesalefootwear.com .......................................................... 10
Hình 1.14: Trang mua sản phẩm website buywholesalefootwear.com ......................................... 11
Hình 1.15: Trang thanh tốn sản phẩm website buywholesalefootwear.com ............................... 11
Hình 1.16: Trang chủ wesbite addidas.com .................................................................................. 12
Hình 1.17: Trang danh mục sản phẩm website addidas.com ........................................................ 13
Hình 1.18: Trang chi tiết sản phẩm website addidas.com ............................................................. 13
Hình 1.19: Trang Ratings & Reviews website addidas.com ......................................................... 13
Hình 1.20: Trang giỏ hàng website addidas.com .......................................................................... 14
Hình 1.21: Trang chat trực tuyến website addidas.com ................................................................ 14
Hình 2.1: Mơ hình họa động của Mongoose ................................................................................. 18
Hình 2.2: Multi thread trên hệ thống cũ ........................................................................................ 19
Hình 2.3: Single Thread ................................................................................................................ 19
Hình 2.4: Event driven NodeJS ..................................................................................................... 20
Hình 2.5: Hình ảnh về luồng dữ liệu trong ReactJS...................................................................... 22
Hình 3.1: Lượt đồ Use case chung của website ............................................................................ 32
Hình 3.2: Lược đồ chi tiết Use case Đăng nhập ............................................................................ 32
Hình 3.3: Lược đồ chi tiết Use case Quản lý giỏ hàng ................................................................. 32
Hình 3.4: Lược đồ chi tiết Use case Quản lý Tài khoản ............................................................... 33
Hình 3.5: Lượt đồ chi tiết Use case Quản lý Danh sách u thích................................................ 33
Hình 3.6: Lượt đồ chi tiết Use case Lịch sử Đơn hàng ................................................................. 33
Hình 3.7: Lượt đồ chi tiết Use case Đánh giá Sản phẩm .............................................................. 34

Hình 3.8: Lượt đồ chi tiết Use case Xác nhận và thanh tốn online đơn hàng ............................. 34
Hình 3.9: Lượt đồ chi tiết Use case Chat ...................................................................................... 34
Hình 3.10: Lượt đồ chi tiết Use case Quản lý User ...................................................................... 35
Hình 3.11: Lượt đồ chi tiết Use case Quản lý Sản phẩm .............................................................. 35
Hình 3.12: Lượt đồ chi tiết Use case Quản lý Danh mục Sản phẩm............................................. 35
Hình 3.13: Lượt đồ chi tiết Use case Quản lý Đơn hàng .............................................................. 36
Hình 3.14: Lượt đồ chi tiết Use case Quản lý Tin nhắn ................................................................ 36
Hình 3.15: Lượt đồ chi tiết Use case Xem thống kê ..................................................................... 36
Hình 4.1: Sequence Diagram Đăng nhập qua Facebook/Google .................................................. 48
Hình 4.2: Sequence Diagram Đăng nhập bằng Email/SĐT .......................................................... 49
Hình 4.3: Sequence Diagram Đăng ký .......................................................................................... 49
Hình 4.4: Sequence Diagram Quên mật khẩu ............................................................................... 50
Hình 4.5: Sequence Diagram Thay đổi thơng tin .......................................................................... 51
Hình 4.6: Sequence Diagram Đổi mật khẩu .................................................................................. 51


Hình 4.7: Sequence Diagram Hủy đơn hàng ................................................................................. 52
Hình 4.8: Sequence Diagram Xác nhận đơn hàng và thanh toán .................................................. 53
Hình 4.9: Sequence Diagram Thêm user ...................................................................................... 54
Hình 4.10: Sequence Diagram Sửa user ........................................................................................ 54
Hình 4.11: Sequence Diagram Xóa user ....................................................................................... 55
Hình 4.12: Sequence Diagram Tìm kiếm user .............................................................................. 55
Hình 4.13: Sequence Diagram Thêm Sự kiện sale ........................................................................ 56
Hình 4.14: Lượt đồ Quan hệ.......................................................................................................... 57
Hình 4.15: Đối tượng trên màn hình Đăng nhập ........................................................................... 62
Hình 4.16: Xử lý trên màn hình Đăng nhập .................................................................................. 62
Hình 4.17: Đối tượng trên màn hình Đăng ký .............................................................................. 64
Hình 4.18: Xử lý trên màn hình Đăng ký ...................................................................................... 65
Hình 4.19: Đối tượng trên màn hình Quên mật khẩu .................................................................... 66
Hình 4.20: Xử lý trên màn hình Quên mật khẩu ........................................................................... 67

Hình 4.21: Đối tượng trên màn hình Trang chủ ............................................................................ 69
Hình 4.22: Xử lý trên màn hình Trang chủ ................................................................................... 71
Hình 4.23: Đối tượng trên màn hình Quản lý tài khoản ................................................................ 74
Hình 4.24: Xử lý trên màn hình Quản lý tài khoản ....................................................................... 74
Hình 4.25: Đối tượng trên màn hình Thơng tin cá nhân ............................................................... 75
Hình 4.26: Xử lý trên màn hình Thơng tin cá nhân ...................................................................... 76
Hình 4.27: Đối tượng trên màn hình Thay đổi thơng tin cá nhân ................................................. 77
Hình 4.28: Xử lý trên màn hình Thay đổi thơng tin cá nhân ........................................................ 78
Hình 4.29: Đối tượng trên màn hình Đổi mật khẩu ...................................................................... 79
Hình 4.30: Xử lý trên màn hình Quên mật khẩu ........................................................................... 80
Hình 4.31: Đối tượng trên màn hình Quản lý danh sách sản phẩm u thích .............................. 81
Hình 4.32: Xử lý trên màn hình Quản lý danh sách sản phẩm u thích ...................................... 82
Hình 4.33: Đối tượng trên màn hình Lịch sử đơn hàng ................................................................ 83
Hình 4.34: Xử lý trên màn hình Lịch sử đơn hàng ....................................................................... 84
Hình 4.35: Đối tượng trên màn hình Danh mục sản phẩm ........................................................... 85
Hình 4.36: Xử lý trên màn hình Danh mục sản phẩm................................................................... 86
Hình 4.37: Đối tượng trên màn hình Chi tiết sản phẩm ................................................................ 88
Hình 4.38: Xử lý trên màn hình Chi tiết sản phẩm ....................................................................... 90
Hình 4.39: Đối tượng trên màn hình Liên hệ ................................................................................ 92
Hình 4.40: Xử lý trên màn hình Liên hệ ....................................................................................... 93
Hình 4.41: Đối tượng trên màn hình Tìm kiếm sản phẩm ............................................................ 94
Hình 4.42: Xử lý trên màn hình Tìm kiếm sản phẩm ................................................................... 94
Hình 4.43: Đối tượng trên màn hình Tin nhắn .............................................................................. 95
Hình 4.44: Xử lý trên màn hình Tin nhắn ..................................................................................... 96
Hình 4.45: Đối tượng trên màn hình Giỏ hàng ............................................................................. 96
Hình 4.46: Xử lý trên màn hình Giỏ hàng..................................................................................... 97
Hình 4.47: Đối tượng trên màn hình Xác nhận đơn hàng và thanh tốn..................................... 100
Hình 4.48: Xử lý trên màn hình Xác nhận đơn hàng và đơn hàng.............................................. 105
Hình 4.49: Đối tượng trên màn hình Thống kê ........................................................................... 108
Hình 4.50: Xử lý trên màn hình Thống kê .................................................................................. 110

Hình 4.51: Đối tượng trên màn hình Quản lý user ...................................................................... 111
Hình 4.52: Xử lý trên màn hình Quản lý user ............................................................................. 112
Hình 4.53: Đối tượng trên màn hình Thêm user ......................................................................... 113
Hình 4.54: Xử lý trên màn hình Thêm user ................................................................................ 114


Hình 4.55: Đối tượng trên màn hình Sửa user ............................................................................ 114
Hình 4.56: Xử lý trên màn hình Sửa user.................................................................................... 115
Hình 4.57: Đối tượng trên màn hình Quản lý sản phẩm ............................................................. 116
Hình 4.58: Xử lý trên màn hình Quản lý sản phẩm .................................................................... 117
Hình 4.59: Đối tượng trên màn hình Thêm sản phẩm................................................................. 118
Hình 4.60: Xử lý trên màn hình Thêm sản phẩm ........................................................................ 119
Hình 4.61: Đối tượng trên màn hình Chỉnh sửa thơng tin sản phẩm .......................................... 120
Hình 4.62: Xử lý trên màn hình Chỉnh sửa thơng tin sản phẩm.................................................. 121
Hình 4.63: Đối tượng trên màn hình Xác nhận xóa .................................................................... 122
Hình 4.64: Xử lý trên màn hình Xác nhận xóa ........................................................................... 123
Hình 4.65: Đối tượng trên màn hình Quản lý danh mục sản phẩm ............................................ 123
Hình 4.66: Xử lý trên màn hình Quản lý danh mục sản phẩm .................................................... 124
Hình 4.67: Đối tượng trên màn hình Chi tiết danh mục sản phẩm ............................................. 125
Hình 4.68: Xử lý trên màn hình Chi tiết danh mục sản phẩm..................................................... 126
Hình 4.69: Đối tượng trên màn hình Thêm danh mục sản phẩm ................................................ 127
Hình 4.70: Xử lý trên màn hình Thêm danh mục sản phẩm ....................................................... 128
Hình 4.71: Đối tượng trên màn hình Chỉnh sửa danh mục sản phẩm ......................................... 129
Hình 4.72: Xử lý trên màn hình Chỉnh sửa danh mục sản phẩm ................................................ 130
Hình 4.73: Đối tượng trên màn hình Quản lý đơn hàng.............................................................. 132
Hình 4.74: Xử lý trên màn hình Quản lý đơn hàng ..................................................................... 133
Hình 4.75: Đối tượng trên màn hình Chi tiết đơn hàng .............................................................. 134
Hình 4.76: Xử lý trên màn hình Chi tiết đơn hàng...................................................................... 135
Hình 4.77: Đối tượng trên màn hình Cập nhật trạng thái đơn hàng ............................................ 135
Hình 4.78: Xử lý trên màn hình Cập nhật trạng thái đơn hàng ................................................... 136

Hình 4.79: Đối tượng trên màn hình Quản lý tin nhắn ............................................................... 136
Hình 4.80: Xử lý trên màn hình Quản lý tin nhắn ....................................................................... 137
Hình 4.81: Đối tượng trên màn hình Thêm tin nhắn ................................................................... 138
Hình 4.82: Xử lý trên màn hình Thêm tin nhắn .......................................................................... 138
Hình 4.83: Đối tượng trên màn hình Chat................................................................................... 139
Hình 4.84: Xử lý trên màn hình Chat .......................................................................................... 140
Hình 5.1: Danh sách Collection .................................................................................................. 141
Hình 5.2: Test case màn hình Đăng nhập.................................................................................... 145
Hình 5.3: Test case màn hình Quên mật khẩu............................................................................. 146
Hình 5.4: Test case màn hình Trang chủ user ............................................................................. 147
Hình 5.5: Test case màn hình Chi tiết sản phẩm ......................................................................... 148
Hình 5.6: Test case màn hình Danh mục sản phẩm .................................................................... 149
Hình 5.7: Test case màn hình Lịch sử đơn hàng ......................................................................... 150
Hình 5.8: Test case màn hình Thanh tốn ................................................................................... 151
Hình 5.9: Test case màn hình Thống kê ...................................................................................... 152


DANH MỤC BẢNG BIỂU
Bảng 3.1: Xác định và mô tả chức năng của Actor Guest............................................................. 26
Bảng 3.2: Xác định và mô tả chức năng của Actor User .............................................................. 28
Bảng 3.3: Xác định và mô tả chức năng của Actor Admin ........................................................... 31
Bảng 3.4: Bảng đặc tả, luồng xử lý Đăng nhập bằng Email/SĐT ................................................. 37
Bảng 3.5: Bảng đặc tả, luồng xử lý Đăng nhập bằng Facebook, Google...................................... 37
Bảng 3.6: Bảng đặc tả, luồng xử lý Đăng ký ................................................................................ 38
Bảng 3.7: Bảng đặc tả, luồng xử lý Quên mật khẩu ...................................................................... 38
Bảng 3.8: Bảng đặc tả, luồng xử lý Thông tin cá nhân ................................................................. 38
Bảng 3.9: Bảng đặc tả, luồng xử lý Cập nhật thông tin cá nhân ................................................... 39
Bảng 3.10: Bảng đặc tả, luồng xử lý Đổi mật khẩu ..................................................................... 39
Bảng 3.11: Bảng đặc tả, luồng xử lý Xem danh sách yêu thích .................................................... 39
Bảng 3.12: Bảng đặc tả, luồng xử lý Thêm danh sách yêu thích .................................................. 40

Bảng 3.13: Bảng đặc tả, luồng xử lý Xóa khỏi danh sách yêu tu thích ........................................ 40
Bảng 3.14: Bảng đặc tả, luồng xử lý Xem danh sách đơn hàng ................................................... 40
Bảng 3.15: Bảng đặc tả, luồng xử lý Hủy đơn hàng ..................................................................... 41
Bảng 3.16: Bảng đặc tả, luồng xử lý Lọc đơn hàng ...................................................................... 41
Bảng 3.17: Bảng đặc tả, luồng xử lý Danh mục sản phẩm ........................................................... 41
Bảng 3.18: Bảng đặc tả, luồng xử lý Chi tiết sản phẩm ................................................................ 41
Bảng 3.19: Bảng đặc tả, luồng xử lý Tìm kiếm sản phẩm ............................................................ 42
Bảng 3.20: Bảng đặc tả, luồng xử lý Chat .................................................................................... 42
Bảng 3.21: Bảng đặc tả, luồng xử lý Thêm sản phẩm vào giỏ hàng ............................................. 42
Bảng 3.22: Bảng đặc tả, luồng xử lý Xóa sản phẩm khỏi giỏ hàng .............................................. 43
Bảng 3.23: Bảng đặc tả, luồng xử lý Xác nhận đơn hàng ............................................................. 43
Bảng 3.24: Bảng đặc tả, luồng xử lý Thanh toán Online .............................................................. 44
Bảng 3.25: Bảng đặc tả, luồng xử lý Xem danh sách user/sản phẩm/danh mục sản phẩm/đơn
hàng/tin nhắn ................................................................................................................................. 44
Bảng 3.26: Bảng đặc tả, luồng xử lý Thêm user/sản phẩm/danh mục sản phẩm/đơn hàng/tin nhắn
....................................................................................................................................................... 44
Bảng 3.27: Bảng đặc tả, luồng xử lý Sửa user/sản phẩm/danh mục sản phẩm ............................. 45
Bảng 3.28: Bảng đặc tả, luồng xử lý Xóa user/sản phẩm/danh mục sản phẩm/đơn hàng ........... 45
Bảng 3.29: Bảng đặc tả, luồng xử lý Tìm kiếm user ..................................................................... 45
Bảng 3.30: Bảng đặc tả, luồng xử lý Tìm kiếm sản phẩm ............................................................ 46
Bảng 3.31: Bảng đặc tả, luồng xử lý Xem chi tiết danh mục sản phẩm/Đơn hàng....................... 46
Bảng 3.32: Bảng đặc tả, luồng xử lý Thêm sự kiện sale cho Danh mục sản phẩm ...................... 46
Bảng 3.33: Bảng đặc tả, luồng xử lý Cập nhật trạng thái đơn hàng.............................................. 47
Bảng 3.34: Bảng đặc tả, luồng xử lý Xem thống kê ..................................................................... 47
Bảng 3.35: Bảng đặc tả, luồng xử lý Gửi tin nhắn ........................................................................ 47
Bảng 4.1: Thuộc tính của các collection users, products, productcategories,messages ................ 57
Bảng 4.2: Thuộc tính của các collection orders, statistics,chats ................................................... 58
Bảng 4.3: Mô tả dữ liệu collection users ....................................................................................... 59
Bảng 4.4: Mô tả dữ liệu collection productcategories................................................................... 59
Bảng 4.5: Mô tả dữ liệu collection products ................................................................................. 60

Bảng 4.6: Mô tả dữ liệu collection orders ..................................................................................... 60
Bảng 4.7: Mô tả dữ liệu collection messages ................................................................................ 61
Bảng 4.8: Mô tả dữ liệu collection statistics ................................................................................. 61
Bảng 4.9: Mô tả dữ liệu collection chats ....................................................................................... 61
Bảng 4.10: Bảng mơ tả đối tượng màn hình Đăng nhập ............................................................... 62


Bảng 4.11: Bảng mơ tả xử lý trên màn hình Đăng nhập ............................................................... 63
Bảng 4.12: Bảng mô tả đối tượng màn hình Đăng ký ................................................................... 64
Bảng 4.13: Bảng mơ tả xử lý trên màn hình Đăng ký ................................................................... 65
Bảng 4.14: Bảng mơ tả đối tượng màn hình Qn mật khẩu ........................................................ 66
Bảng 4.15: Bảng mô tả xử lý trên màn hình Qn mật khẩu ........................................................ 68
Bảng 4.16: Bảng mơ tả đối tượng màn hình Trang chủ Guest ...................................................... 70
Bảng 4.17: Bảng mơ tả xử lý trên màn hình Trang chủ Guest ...................................................... 73
Bảng 4.18: Bảng mô tả đối tượng màn hình Quản lý tài khoản .................................................... 74
Bảng 4.19: Bảng mơ tả xử lý trên màn hình Quản lý tài khoản .................................................... 75
Bảng 4.20: Bảng mơ tả đối tượng màn hình Thông tin cá nhân ................................................... 75
Bảng 4.21: Bảng mô tả xử lý trên màn hình Thơng tin cá nhân ................................................... 76
Bảng 4.22: Bảng mơ tả đối tượng màn hình Thay đổi thông tin cá nhân ..................................... 77
Bảng 4.23: Bảng mô tả xử lý trên màn hình Thay đổi thơng tin cá nhân ..................................... 78
Bảng 4.24: Bảng mô tả đối tượng màn hình Đổi mật khẩu ........................................................... 79
Bảng 4.25: Bảng mơ tả xử lý trên màn hình Đổi mật khẩu ........................................................... 80
Bảng 4.26: Bảng mơ tả đối tượng màn hình Quản lý danh sách sản phẩm yêu thích ................... 81
Bảng 4.27: Bảng mơ tả xử lý trên màn hình Quản lý danh sách sản phẩm yêu thích ................... 82
Bảng 4.28: Bảng mơ tả đối tượng màn hình Lịch sử đơn hàng .................................................... 83
Bảng 4.29: Bảng mô tả xử lý trên màn hình Lịch sử đơn hàng .................................................... 84
Bảng 4.30: Bảng mơ tả đối tượng màn hình Danh mục sản phẩm ................................................ 86
Bảng 4.31: Bảng mơ tả xử lý trên màn hình Danh mục sản phẩm ................................................ 87
Bảng 4.32: Bảng mô tả đối tượng màn hình Chi tiết sản phẩm .................................................... 89
Bảng 4.33: Bảng mơ tả xử lý trên màn hình Chi tiết sản phẩm .................................................... 91

Bảng 4.34: Bảng mô tả đối tượng màn hình Liên hệ .................................................................... 93
Bảng 4.35: Bảng mơ tả xử lý trên màn hình Liên hệ .................................................................... 93
Bảng 4.36: Bảng mơ tả đối tượng màn hình Tìm kiếm sản phẩm................................................. 94
Bảng 4.37: Bảng mô tả xử lý trên màn hình Tìm kiếm sản phẩm................................................. 95
Bảng 4.38: Bảng mơ tả đối tượng màn hình Tin nhắn .................................................................. 95
Bảng 4.39: Bảng mơ tả xử lý trên màn hình Tin nhắn .................................................................. 96
Bảng 4.40: Bảng mơ tả đối tượng màn hình Giỏ hàng.................................................................. 97
Bảng 4.41: Bảng mô tả xử lý trên màn hình Giỏ hàng .................................................................. 97
Bảng 4.42: Bảng mơ tả đối tượng màn hình Xác nhận đơn hàng và thanh tốn ......................... 102
Bảng 4.43: Bảng mơ tả xử lý trên màn hình Xác nhận đơn hàng và thanh tốn ......................... 107
Bảng 4.44: Bảng mơ tả đối tượng màn hình Thống kê ............................................................... 109
Bảng 4.45: Bảng mô tả xử lý trên màn hình Thống kê ............................................................... 111
Bảng 4.46: Bảng mơ tả đối tượng màn hình Quản lý user .......................................................... 112
Bảng 4.47: Bảng mơ tả xử lý trên màn hình Quản lý user .......................................................... 113
Bảng 4.48: Bảng mô tả đối tượng màn hình Thêm user ............................................................. 113
Bảng 4.49: Bảng mơ tả xử lý trên màn hình Thêm user ............................................................. 114
Bảng 4.50: Bảng mơ tả đối tượng màn hình Sửa user................................................................. 115
Bảng 4.51: Bảng mơ tả xử lý trên màn hình Sửa user................................................................. 115
Bảng 4.52: Bảng mơ tả đối tượng màn hình Quản lý sản phẩm ................................................. 116
Bảng 4.53: Bảng mô tả xử lý trên màn hình Quản lý sản phẩm ................................................. 117
Bảng 4.54: Bảng mơ tả đối tượng màn hình Thêm sản phẩm ..................................................... 118
Bảng 4.55: Bảng mô tả xử lý trên màn hình Thêm sản phẩm ..................................................... 119
Bảng 4.56: Bảng mơ tả đối tượng màn hình Chỉnh sửa thơng tin sản phẩm............................... 121
Bảng 4.57: Bảng mô tả xử lý trên màn hình Chỉnh sửa thơng tin sản phẩm............................... 122
Bảng 4.58: Bảng mơ tả đối tượng màn hình Xác nhận xóa ........................................................ 122


Bảng 4.59: Bảng mơ tả xử lý trên màn hình Xác nhận xóa ........................................................ 123
Bảng 4.60: Bảng mơ tả đối tượng màn hình Quản lý danh mục sản phẩm ................................. 124
Bảng 4.61: Bảng mơ tả xử lý trên màn hình Quản lý danh mục sản phẩm ................................. 125

Bảng 4.62: Bảng mơ tả đối tượng màn hình Chi tiết danh mục sản phẩm .................................. 126
Bảng 4.63: Bảng mô tả xử lý trên màn hình Chi tiết danh muc5san3 phẩm ............................... 127
Bảng 4.64: Bảng mơ tả đối tượng màn hình Thêm danh mục sản phẩm .................................... 128
Bảng 4.65: Bảng mô tả xử lý trên màn hình Thêm danh mục sản phẩm .................................... 129
Bảng 4.66: Bảng mơ tả đối tượng màn hình Chỉnh sửa danh mục sản phẩm ............................. 130
Bảng 4.67: Bảng mô tả xử lý trên màn hình Chỉnh sửa danh mục sản phẩm ............................. 131
Bảng 4.68: Bảng mô tả đối tượng màn hình Quản lý đơn hàng .................................................. 132
Bảng 4.69: Bảng mơ tả xử lý trên màn hình Quản lý đơn hàng .................................................. 133
Bảng 4.70: Bảng mô tả đối tượng màn hình Chi tiết đơn hàng................................................... 134
Bảng 4.71: Bảng mơ tả xử lý trên màn hình Chi tiết đơn hàng................................................... 135
Bảng 4.72: Bảng mơ tả đối tượng màn hình Cập nhật trạng thái đơnhàng ................................. 136
Bảng 4.73: Bảng mô tả xử lý trên màn hình Cập nhật trạng thái đơn hàng ................................ 136
Bảng 4.74: Bảng mơ tả đối tượng màn hình Quản lý tin nhắn .................................................... 137
Bảng 4.75: Bảng mô tả xử lý trên màn hình Quản lý tin nhắn .................................................... 137
Bảng 4.76: Bảng mơ tả đối tượng màn hình Thêm tin nhắn ....................................................... 138
Bảng 4.77: Bảng mô tả xử lý trên màn hình Thêm tin nhắn ....................................................... 138
Bảng 4.78: Bảng mơ tả đối tượng màn hình Chat ....................................................................... 139
Bảng 4.79: Bảng mơ tả xử lý trên màn hình Chat ....................................................................... 140


PHẦN 1. MỞ ĐẦU
1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI:
Ngày nay công nghệ ngày càng một phát triển, việc mua hàng không chỉ đơn thuần là
đến ngay cửa hàng mới có thể mua được mà việc mua hàng đã trở nên đa dạng hình thức
hơn, trong đó mua hàng trực tuyến trên các website đang dần trở nên phổ biến, thuận tiện
và trở nên một trong những lựa chọn hàng đầu của người tiêu dùng. Chính vì vậy, việc tạo
ra những webiste thương mại điện tử chưa bao giờ là hết cần thiết đối với các doanh nghiệp,
các chủ cửa hàng hoặc cá nhân kinh doanh một mặt hàng nào đó. Nhưng vấn đề là chúng
ta phải biết phát huy những ưu điểm của những website có sẵn trên thị trường cùng với
việc hạn chế đi những khuyết điểm mà các website đó đang mắc phải để đáp ứng tốt hơn

nhu cầu ngày càng cao của người tiêu dùng.
2. MỤC TIÊU CỦA ĐỀ TÀI
Xây dựng website bán các mặt hàng giày nam nữ, giày trẻ em với sự phong phú các
nhãn hiệu nổi tiếng, uy tín với nhiều kiểu dáng để phục vụ cho nhu cầu sinh hoạt cũng như
nhu cầu thời trang làm đẹp cho mọi người ở mọi lứa tuổi.
Sản phẩm cần đạt các yêu cầu sau:
 Về phía khách hàng:
- Giao diện đẹp, dễ sử dụng, dễ dàng thao tác, rõ ràng, thân thiện.
- Thông tin sản phẩm thể hiện chính xác, cập nhật thường xuyên.
- Dễ dàng chọn, xem sản phẩm, mua sản phẩm
- Các thông tin quan trọng cần được làm nổi bật để khách hàng dễ nắm bắt.
- Dễ dàng đăng ký tài khoản và quản lý tài khoản.
- Có tính bảo mật cao.
 Về phía người quản lý:
- Hệ thống dễ dàng trong việc quản lý sản phẩm, quản lý tài khoản.
- Hệ thống chạy ổn định, dễ bảo trì.
- Có khả năng phân quyền cho người sử dụng.
- Có tính bảo mật cao.
3. ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU
3.1. Đối tượng nghiên cứu
Nhu cầu mua sắm của khách hàng, nhu cầu quản lý của chủ doanh nghiệp, chủ cửa
hàng hoặc cá nhân kinh doanh khác.
1


Nghiên cứu về công nghệ sử dụng: MERN STACK
 MongoDB: nghiên cứu cách làm việc với collection, thực thi các câu query để
truy vấn dữ liệu.
 ExpressJS: nghiên cứu cách sử dụng các tính năng như routing, middlewares,
template engines, … để tạo web application.

 ReactJS: nghiên cứu cách sử dụng một component để render html, hiểu được
vòng đời của component, quản lý state, props của component, …
 NodeJS: nghiên cứu cú pháp, câu lệnh của javascript nói chung và của NodeJS
nói riêng; sử dụng được npm để install các package cần thiết cho ứng dụng web.
3.2. Phạm vi nghiên cứu
Đối với đề tài này cũng như nhiều website thương mại điện tử khác, nhóm sẽ tập trung
vào phía khách hàng nhiều hơn cũng như là hỗ trợ tốt nhất cho khách hàng trong các quá
trình tìm kiếm sản phẩm, chọn sản phẩm, mua sản phẩm, xác thực đơn hàng, thanh tốn
online, chat trực tuyến song song với đó ở phía người quản lý sẽ có những chức năng khơng
thể thiếu như quản lý user, sản phẩm, danh mục, đơn hàng và thống kê.
4. DỰ KIẾN KẾT QUẢ ĐẠT ĐƯỢC:
Kết quả của quá trình nghiên cứu và thực hiện project mà nhóm mong muốn đạt được
sẽ là một website bán giày hướng đến nhu cầu thực tế của khách hàng nhằm tạo ra một
website vừa dễ dàng sử dụng vừa áp dụng được các công nghệ, xu hướng bán hàng cũng
như thanh toán hiện đại ngày nay để hỗ trợ tốt nhất cho khách hàng cũng như quản trị viên
của website.
5. KẾT CẤU CỦA ĐỀ TÀI:
Đề tài được chia ra 3 phần chính: Phần mở đầu, phần nội dung và phần kết luận.
+ Phần mở đầu: Tính cấp thiết của đề tài, đối tượng và phạm vi nghiên cứu của đề tài.
+ Phần nội dung: được chia thành 5 chương
 Chương 1. Khảo sát hiện trạng: khảo sát những website bán giày có trên thị
trường, phân tích ưu nhược điểm và rút ra nhận xét chung.
 Chương 2. Cơ sở lý thuyết: trình bày tổng quan những điểm lý thuyết mà nhóm
đã nghiên cứu và tìm hiểu trong q trình thực hiện đề tài.
 Chương 3. Xác định và mơ hình hóa yêu cầu: xác định yêu cầu của các nghiệp
vụ cả về chức năng và phi chức năng của đề tài; thể hiện các chức năng của từng
actor trên use case và phân tích luồng xử lý cho từng chức năng.
2

 Chương 4. Thiết kế phần mềm: trình bày thiết kế hệ thống, thiết kế cơ sở dữ
liệu và thiết kế về giao diện của đề tài.
 Chương 5. Cài đặt và kiểm thử phần mềm: Các bước cài đặt mơi trường cần
thiết để chạy project, trình bày chiến lược, kế hoạch kiểm thử cũng như các test
case chi tiết cho các chức năng quan trọng.
+ Phần kết luận: Kết quả đạt được, nêu ưu điểm, nhược điểm của đề tài và hướng
phát triển.

3


PHẦN 2: NỘI DUNG
1. CHƯƠNG 1. KHẢO SÁT HIỆN TRẠNG
1.1. PHÂN TÍCH ƯU ĐIỂM, NHƯỢC ĐIỂM CỦA MỘT SỐ WEBSITE
1.1.1. Website />1.1.1.1. Ưu điểm
- Thiết kế giao diện đẹp, dễ nhìn và sử dụng.
- Sản phẩm được phân theo nhóm người dùng, giúp khách hàng dễ lựa chọn.
- Thông tin sản phẩm được hiển thị rõ ràng, đầy đủ.
- Các chức năng cần thiết như: đăng nhập, đăng ký, tìm kiếm, thông báo hiển thị rõ ràng.
- Chức năng giỏ hàng tiện lợi, dễ sử dụng.
- Cung cấp sản phẩm gợi ý và các chi nhánh trên cả nước.
- Có mục tin tức cung cấp thông tin khuyến mãi và hoạt động.
- Thuận tiện lấy lại mật khẩu khi quên mật khẩu.
- Chức năng chat với nhân viên thông qua facebook.
1.1.1.2. Nhược điểm
- Menu điều hướng đến trang chủ hiển thị khá mờ, khó nhìn.
- Chức năng đăng kí cịn hạn chế, chỉ cho đăng khí bằng gmail vì khơng phải ai cũng sử
dụng gmail.
- Chức năng tìm kiếm cịn khá đơn giản, chưa có gợi ý tìm kiếm cho người dùng.
1.1.1.3. Một số giao diện của website

 Giao diện trang chủ:

4


Hình 1.1: Trang chủ website bitis.com.vn

 Giao diện sản phẩm: được phân theo nhóm người dùng

Hình 1.2: Trang sản phẩm website bitis.com.vn

 Giao diện danh mục thông tin từng sản phẩm

Hình 1.3: Chi tiết sản phẩm website bitis.com.vn

5


 Giao diện tìm kiếm

Hình 1.4: Trang tìm kiếm webite bitis.com.vn

 Giao diện giỏ hàng

Hình 1.5: Trang chi tiết giỏ hàng website bitis.com.vn

 Giao diện sản phẩm u thích

Hình 1.6: Trang sản phẩm yêu thích website bitis.com.vn

6


 Giao diện tìm cửa hàng

Hình 1.7: Trang tìm cửa hàng website bitis.com.vn

1.1.2. Website />1.1.2.1. Ưu điểm
- Trang chủ đơn giản, dễ nhìn, dễ tương tác, phân chia menu phù hợp.
- Trên trang chủ có phân chia và hiển thị sản phẩm theo từng loại giúp khách hàng dễ
dàng lựa chọn.
- Khi mua hàng có hiển thị những sản phẩm liên quan.
- Chức năng tìm kiếm hoạt động khá tốt, hiển thị đầy đủ thơng tin của sản phẩm như:
hình ảnh, tên sản phẩm, giá sản phẩm, …
- Có chức năng xem các hệ thống phân phối trên bản đồ để người dùng có thể lựa chọn
địa điểm đặt hàng phù hợp hoặc thuận tiện cho việc mua offline.
1.1.2.2. Nhược điểm
- Sản phẩm trên trang chủ khá ít, mỗi loại sản phẩm chỉ hiển thị đúng 4 sản phẩm cố
định, hạn chế sự lựa chọn của khách hàng.
- Khơng có menu điều hướng đến trang chủ riêng, muốn đến trang chủ khách hàng phải
click vào logo, nhưng chức năng này khơng phải ai cũng biết.
- Khơng có chức năng đăng ký thành viên, đăng nhập.
- Trang chủ nhìn chung dễ sử dụng nhưng còn đơn điệu và chưa hấp dẫn được khách
hàng

7


1.1.2.3. Một số giao diện của website
 Giao diện trang chủ:

Hình 1.8: Trang chủ website vinagiay.vn

Hình 1.9: Trang chủ website vinagiay.vn

 Giao diện tìm kiếm

Hình 1.10: Trang tìm kiếm website vinagiay.vn

8