Thiết kế và xây dựng website thương mại Điện tử bán thực phẩm Đồ Án tốt nghiệp ngành công nghệ thông tin

Phát biểu bài toán : Trong các cửa hàng bán thực phẩm sạch hiện nay, khi mua hàng trực tiếp, khách hàng phải dành thời gian để đến cửa hàng và chờ đợi trong hàng đợi.. Khách hàng phải đ

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

GVHD: PGS TS HOÀNG VĂN DŨNG SVTH: NGUYỄN ĐÌNH DUY

NGUYỄN MINH TUẤNTHIẾT KẾ VÀ XÂY DỰNG

WEBSITE THƯƠNG MẠI ĐIỆN TỬ BÁN THỰC PHẨM

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

KHOA CÔNG NGHỆ THÔNG TIN -****** -

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

THIẾT KẾ VÀ XÂY DỰNG WEBSITE

THƯƠNG MẠI ĐIỆN TỬ BÁN THỰC PHẨM

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

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

***

Tp Hồ Chí Minh, ngày tháng năm 2024

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

Họ và Tên sinh viên

Họ và tên Sinh viên 2 : Nguyễn Minh Tuấn MSSV 2: 20110594

Ngành: Công nghệ Thông tin

Tên đề tài: Thiết kế và xây dựng website thương mại điện tử bán thực phẩm

Họ và tên Giáo viên hướng dẫn: PGS.TS Hoàng Văn Dũng

Tp Hồ Chí Minh, ngày tháng năm 2024

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

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

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

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

***

Tp Hồ Chí Minh, tháng 07 năm 2024

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và Tên sinh viên

Họ và tên Sinh viên 2 : Nguyễn Minh Tuấn MSSV 3: 20110594

Ngành: Công nghệ Thông tin

Tên đề tài: Thiết kế và xây dựng website thương mại điện tử bán thực phẩm

Họ và tên Giáo viên phản biện: ………

Tp Hồ Chí Minh, ngày tháng năm 2024

Giáo viên phản biện

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

LỜI CẢM ƠN

Để hoàn thành tốt bài báo cáo này, nhóm em xin gửi lời cảm ơn chân thành đến giảng viên PGS.TS Hoàng Văn Dũng, người đã trực tiếp hỗ trợ chúng em trong suốt quá trình làm báo cáo Chúng em cảm ơn thầy đã đưa ra những lời khuyên từ kinh nghiệm thực tiễn của mình để định hướng cho chúng em đi đúng với yêu cầu của báo cáo đã chọn, luôn giải đáp thắc mắc và đưa ra những góp ý, chỉnh sửa kịp thời giúp nhóm em khắc phục nhược điểm và hoàn thành tốt cũng như đúng thời hạn đã đề ra

Em cũng xin gửi lời cảm ơn chân thành các quý thầy cô trong khoa Đào tạo Chất Lượng Cao nói chung và ngành Công Nghệ Thông Tin nói riêng đã tận tình truyền đạt những kiến thức cần thiết giúp chúng em có nền tảng để làm nên đề tài này,

đã tạo điều kiện để chúng em có thể tìm hiểu và thực hiện tốt đề tài Cùng với đó, chúng em xin được gửi cảm ơn đến các bạn cùng khóa đã cung cấp nhiều thông tin và kiến thức hữu ích giúp chúng em có thể hoàn thiện hơn đề tài của mình

Đề tài và bài báo cáo được nhóm em thực hiện trong khoảng thời gian ngắn, với những kiến thức còn hạn chế cùng nhiều hạn chế khác về mặt kĩ thuật và kinh nghiệm trong việc thực hiện một dự án phần mềm Do đó, trong quá trình làm nên đề tài có những thiếu sót là điều không thể tránh khỏi nên em rất mong nhận được những ý kiến đóng góp quý báu của các quý thầy cô để kiến thức của em được hoàn thiện hơn và nhóm em có thể làm tốt hơn nữa trong khóa luận tốt nghiệp

Nhóm em xin chân thành cảm ơn

Cuối lời, nhóm em kính chúc quý thầy, quý cô luôn dồi dào sức khỏe và thành công hơn nữa trong sự nghiệp trồng người Một lần nữa nhóm 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

***

Tp Hồ Chí Minh, tháng 07 năm 2024

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên sinh viên:

Họ và Tên SV thực hiện 1: Nguyễn Đình Duy MSSV: 20110453

Họ và Tên SV thực hiện 2: Nguyễn Minh Tuấn MSSV: 20110594

Thời gian làm luận văn : Từ ngày 04/03/2024 Đến ngày 15/06/2024

Chuyên ngành: Công nghệ thông tin

Tên luận văn: Thiết kế và xây dựng website thương mại điện tử bán thực phẩm

GV hướng dẫn: PGS.TS Hoàng Văn Dũng

Nhiệm Vụ Của Luận Văn :

1 Xây dựng một nền tảng bán hàng trực tuyến đơn giản và hiệu quả, giúp người tiêu dùng dễ dàng mua sắm các sản phẩm thực phẩm sạch mọi lúc, mọi nơi …

2 Giải quyết những khó khăn gặp phải, giảm thiểu rủi ro trong quá trình quản lý việc mua bán thực phẩm …

3 Áp dụng những kiến thức, kĩ năng đã học trong 4 năm để thiết kế giải pháp cho

1 bài toán thực tế

Đề cương viết luận văn :

Phần MỞ ĐẦU

1 Phát biểu bài toán

2 Mục đích, yêu cầu thực hiện

3 Phạm vi và đối tượng nghiên cứu

4 Cấu trúc của khóa luận tốt nghiệp

5 Ý nghĩa khoa học và thực tiễn

6 Phương pháp nghiên cứu

Phần NỘI DUNG (chia thành từng chương)

Chương 1 : KHẢO SÁT CÁC GIẢI PHÁP LIÊN QUAN

1 Tìm hiểu các giải pháp liên quan

2 Kết luận sau khi khảo sát

Chương 2: CỞ SỞ LÝ THUYẾT

1 Công cụ và môi trường

2 Các công nghệ sử dụng

Chương 3 : PHÂN TÍCH THIẾT KẾ

4 Trình bày các kết quả thử nghiệm

5 Giới thiệu kết quả giao diện phần mềm

Phần KẾT LUẬN

1 Kết quả đạt được

2 Ưu nhược điểm hệ thống

3 Hướng phát triển

Tài liệu tham khảo

[1] S Grainger, Pro React 16, Apress, 2019

[2] A Banks and E Porcello, Learning React, O'Reilly Media, 2020

[3] D Flanagan, JavaScript: The Definitive Guide, O'Reilly Media, 2020

[4] B Holt, Complete Intro to React, v8, Frontend Masters, 2023

[5] OpenJS Foundation - Node js guides - https://nodejs.org/en/docs/guides/

[6] Mongoose - Mongoose guides - https://mongoosejs.com/docs/index.html

Phụ lục

KẾ HOẠCH THỰC HIỆN

(Ghi rõ từng thời gian tiến hành các công việc của luận văn, thời gian thí nghiệm, thăm

5 Tuần

9-11

Phát triển chức năng Voucher (cho sản phẩm, loại sản phẩm, khách hàng), tạo giao diện quản lý khuyến mãi cho Admin

Thêm biểu đồ phân tích sản lượng sản phẩm bán ra và chi tiêu của khách hàng theo tuần, tháng năm

Tìm hiểu về Cluster Module và Reverse Proxy để xử

lý nhiều Request cùng lúc tốt hơn Viết báo cáo

Đã xong

TP.Hồ chí Minh, ngày 5 tháng 8 năm 2024

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

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

Ý kiến của giáo viên hướng dẫn

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

MỤC LỤC

MỞ ĐẦU 1

1 Phát biểu bài toán : 1

2 Mục đích, yêu cầu thực hiện:……… 1

3 Phạm vi và đối tượng nghiên cứu:……… 2

4 Cấu trúc của khóa luận tốt nghiệp:……… 2

5 Ý nghĩa khoa học và thực tiễn : 3

6 Phương pháp nghiên cứu : 3

NỘI DUNG 4

CHƯƠNG 1: KHẢO SÁT CÁC GIẢI PHÁP LIÊN QUAN 4

1 Tìm hiểu các giải pháp liên quan : 4

1.1 Bách hóa xanh ( https://www.bachhoaxanh.com/ ) : 4

1.2 Siêu thị WinMart ( https://winmart.vn/) : 6

1.3 Satra Food (https://satrafoods.com.vn/) : 10

2 Kết luận sau khi khảo sát : 12

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 13

1 Công cụ và môi trường : 13

2 Các công nghệ sử dụng : 13

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ 17

1 Thiết kế chức năng : 17

2 Đặc tả chức năng : 17

3 Vai trò người dùng : 20

3.1 Đối với khách hàng (Users) : 20

3.2 Đối với quản trị viên (Admin) : 20

4 UseCase Diagram : 22

5 Đặc tả UseCase :………23

5.1 Sign up 23

5.2 Sign in 26

5.3 Log out 29

5.4 Search product by name 30

5.5 Add/Delete/Update product 32

5.6 Update Status Order 35

5.7 Add product to cart 37

5.8 Filter Product by category/price 39

5.9 Remove/Update cart product 41

5.10 Check Out 43

5.11 Place Order 45

5.12 View Cart 47

5.13 View detail product 48

5.14 View all order 51

5.15 Forgot Password ……… 52

5.16 Customize Slider ……….55

5.17 Add/Delete/Update category………57

5.18 Update account information……….61

5.19 Add product to wishList……… 63

5.20 View Product in wishList………64

5.21 Change Password……… 66

5.22 Add review 67

5.23 View Order……… 70

5.24 View all User………72

5.25 Update Role……… 74

5.26 Filter Order by Date……… 77

5.27 Sort the list of best-selling products by date………80

5.28 Filter User and Sort users total amount by date……… 82

5.29 Use Discount 83

5.30 Add/Delete/Update Discount………87

5.31 Use Redeem point 89

6 Class Diagram : 93

7 Đặc tả các data table: 93

7.1 Bảng category: 93

7.2 Bảng user: 94

7.3 Bảng customzie: 94

7.4 Bảng review: 94

7.5 Bảng product: 95

7.7 Bảng discount 96

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 97

1 Triển khai hệ thống 97

1.1 Các API (Back-end) 97

1.2 Giao diện (Front-end) 101

1.3 Cấu hình các dịch vụ trực tuyến 103

2 Cách cài đặt 106

3 Mô tả quá trình đánh giá thử nghiệm, mô tả về dữ liệu cấu hình phần cứng, các tham số thiết lập :………107

4 Trình bày các kết quả thử nghiệm : 109

4.1 Chỉnh sửa ảnh của sản phẩm 109

4.2 Tạo banner 110

4.3 Thay đổi password 112

4.4 Chỉnh sửa ảnh đại điện của user 114

4.5 Lọc sản phẩm theo loại sản phẩm 115

4.6 Update trạng thái đơn hàng 116

4.7 Xóa đơn hàng 117

4.8 Hiển thị sản phẩm khi hết hàng 118

4.9 Đăng nhập khi nhập email chưa được kích hoạt bằng OTP mail 119

4.10 Giao diện hiển thị giỏ hàng 120

4.11 Bộ lọc sản phẩm 121

4.12 Danh mục sản phẩm 121

4.13 Tìm kiếm sản phẩm 122

4.14 Trở về trang chủ 123

4.15 Thêm yêu thích vào sản phẩm 123

4.16 Thêm sản phẩm yêu thích 124

4.17 Hiển thị chi tiết sản phẩm 125

4.18 Thêm sản phẩm khi còn hàng vào giỏ hàng 125

4.19 Thêm sản phẩm khi hết hàng vào giỏ hàng 126

4.20 Tăng số lượng sản phẩm rồi thêm vào giỏ hàng 127

4.21 Hiển thị tất cả order (admin) 128

4.22 Hiển thị My Orders của khách hàng 129

4.23 Hiển thị My Account của khách hàng 130

4.24 Hiển thị Setting của khách hàng 131

4.25 Thanh toán với thẻ visa 132

4.26 Xóa sản phẩm ra khỏi cart 133

4.27 Giảm số lượng sản phẩm trong giỏ hàng 134

4.28 Checkout khi trong cart không có sản phẩm 134

4.29 Đánh giá sản phẩm chỉ chọn số sao không nhập phần review 135

5 Giới thiệu kết quả giao diện phần mềm 136

5.1 Phía khách hàng: 136

5.2 Phía Admin:……… 141

KẾT LUẬN 144

1 Kết quả đạt được : 144

2 Ưu nhược điểm hệ thống : 144

2.1 Ưu điểm: 144

2.2 Nhược điểm: 144

3 Hướng phát triển : 144

TÀI LIỆU THAM KHẢO 145

PHỤ LỤC 146

DANH MỤC HÌNH VẼ

Hình 1 : Home Page bachhoaxanh.com 4

Hình 2: Trang đánh giá bachhoaxanh.com 5

Hình 3: Trang Cart bachhoaxanh.com 5

Hình 4: Trang thanh toán bachhoaxanh.com 6

Hình 5: Header bachhoaxanh.com 6

Hình 6: Home Page https://winmart.vn/ 7

Hình 7: Chi tiết sản phẩm https://winmart.vn/ 7

Hình 8: Cart https://winmart.vn/ 8

Hình 9: Trang thanh toán https://winmart.vn/ 8

Hình 10: Trang chọn phương thức thanh toán https://winmart.vn/ 9

Hình 11: Trang danh sách sản phẩm https://winmart.vn/ 9

Hình 12: Trang đăng nhập https://winmart.vn/ 9

Hình 13: Trang chọn khu vực https://winmart.vn/ 10

Hình 14: Trang Footer https://winmart.vn/ 10

Hình 15: Trang HomePage https://satrafoods.com.vn/ 11

Hình 16: Trang Danh mục sản phẩm https://satrafoods.com.vn/ 11

Hình 17: UseCase diagram 22

Hình 18: Activity Diagram Sign up 25

Hình 19: Sequence Diagram Sign Up 26

Hình 20: Activity Diagram Sign in 28

Hình 21: Sequence Diagram Sign in 28

Hình 22: Activity Diagram Log out 29

Hình 23: Sequence Diagram Log out 30

Hình 24: Activity Diagram Search product by name 31

Hình 25: Sequence Diagram Search product by name 32

Hình 26: Activity Diagram Add/Delete/Update product 34

Hình 27: Sequence Diagram Add/Delete/Update product 34

Hình 28: Activity Diagram Update Status Order 36

Hình 29: Sequence Diagram Update Status Order 36

Hình 30: Activity Diagram Add product to cart 38

Hình 31: Sequence Diagram Add product to cart 38

Hình 32: Activity Diagram Filter Product by category/price 40

Hình 33: Sequence Diagram Filter Product by category/price 40

Hình 34: Activity Diagram Remove/Update cart product 42

Hình 35: Sequence Diagram Remove/Update cart product 43

Hình 36: Activity Diagram Check Out 44

Hình 37: Sequence Diagram Check out 44

Hình 38: Activity Diagram Place Order 46

Hình 39: Sequence Diagram Place Order 46

Hình 40: Activity Diagram View Cart 48

Hình 41: Sequence Diagram View cart 48

Hình 42: Activity Diagram View Detail Product 50

Hình 43: Sequence Diagram View Detail product 50

Hình 44: Activity Diagram View all Order 52

Hình 45 : Sequence diagram View all Order 52

Hình 46: Activity Diagram Forgot Password 54

Hình 47 : Sequence diagram Forgot Password 55

Hình 48: Activity Diagram Customize slider 57

Hình 49 : Sequence diagram Customize slider 57

Hình 50: Activity Diagram Add/Delete/Update category 59

Hình 51: Sequence diagram Add/Delete/Update category 60

Hình 52: Activity Diagram Update account information 61

Hình 53: Sequence Diagram Update account information 62

Hình 54: Activity Diagram Add product to Wishlist 63

Hình 55: Sequence Diagram Add product to WishList 63

Hình 56: Activity Diagram View product in wishList 64

Hình 57: Sequence Diagram View product in wishlist 65

Hình 58: Activity Diagram Change password 66

Hình 59: Sequence Diagram Change Password 67

Hình 60: Activity Diagram Add review 68

Hình 61: Sequence Diagram Add review 69

Hình 62: Activity Diagram View order 70

Hình 63: Sequence Diagram View order 71

Hình 64: Activity Diagram View all User 72

Hình 65: Sequence Diagram View all user 73

Hình 66: Activity Diagram Update Role 75

Hình 67: Sequence Diagram Update Role 76

Hình 68: Activity Diagram Filter Order by Date 78

Hình 69: Sequence Diagram Filter Order by Date 79

Hình 70: Sequence Diagram Sort the list of best-selling products by date 81

Hình 71: Activity Diagram Filter customers by purchase amount 82

Hình 72: Sequence Diagram Filter User and Sort users total amount by Date 83

Hình 73: Activity Diagram Use discount 85

Hình 74: Sequence Diagram Use discount 86

Hình 75: Activity Diagram Add/Delete/Update discount 88

Hình 76: Sequence Diagram Add_Delete_Update Discount 89

Hình 77: Activity Diagram Redeem Point 90

Hình 78: Sequence Diagram Redeem point 91

Hình 79: Activity Diagram Add/Delete/Update redeem points 91

Hình 80: Sequence Diagram Add/Delete/Update redeem point 92

Hình 81: Class Diagram 93

Hình 82: Kiến trúc hệ thống 97

Hình 83: Bố trí thư mục 97

Hình 84: Tổ chức code Back-end 98

Hình 86: Ví dụ về các routes để xử lý các chức năng liên quan đến product 100

Hình 87: Kết nối cơ sở dữ liệu trong app.js 101

Hình 88: Cấu trúc thư mục client 101

Hình 89: Các components thuộc giao diện Admin 102

Hình 90: Các components thuộc giao diện Shop 102

Hình 91: Cấu hình Cloudinary 103

Hình 92: Upload hình ảnh của người dùng lên Cloudinary 103

Hình 93: Cấu hình và thực hiện gửi mail 104

Hình 94: Cấu hình Braintree 105

Hình 95: Hàm thực thi thanh toán 105

Hình 96: Tích hợp Dialogflow 106

Hình 97: Giao diện HomePage 136

Hình 98: Giao diện HomePage (chính sách và dịch vụ) 136

Hình 99: Giao diện trang Footer 137

Hình 100: Giao diện danh mục sản phẩm 137

Hình 101: Filter theo ”Nước mắm” 138

Hình 102: Filter sản phẩm có giá bé hơn 50.000 138

Hình 103 Search sản phẩm có tên “Vịt” 138

Hình 104: Giao diện trang chi tiết sản phẩm 139

Hình 105: Giao diện Cart 139

Hình 106: Giao diện trang thanh toán 140

Hình 107 giao diện trang My Orders 140

Hình 108: Giao diện chính và tùy biến banner của Admin 141

Hình 109: Giao diện Category 141

Hình 110: Giao diện Product 142

Hình 111: Giao diện Order 142

Hình 112: Giao diện thống kê Product đã bán theo Date 143

Hình 113: Giao diện thống kê User theo Date và số tiền đã mua hàng 143

DANH MỤC BẢNG BIỂU

Bảng 1: Đặc tả chức năng 17

Bảng 2: Đặc tả UseCase Sign Up 23

Bảng 3: Đặc tả UseCase Sign in 27

Bảng 4: Đặc tả UseCase Log out 29

Bảng 5: Đặc tả UseCase Search product by name 30

Bảng 6: Đặc tả UseCase Add/Delete/Update product 32

Bảng 7: Đặc tả UseCase Update Status Order 35

Bảng 8: Đặc tả UseCase Add product to cart 37

Bảng 9: Đặc tả UseCase Filter Product by category/price 39

Bảng 10: Đặc tả UseCase Remove/Update cart product 41

Bảng 11: Đặc tả UseCase Check Out 43

Bảng 12: Đặc tả UseCase Place Order 45

Bảng 13: Đặc tả UseCase View Cart 47

Bảng 14: Đặc tả UseCase View Detail Product 48

Bảng 15: Đặc tả UseCase View all Order 51

Bảng 16 : Đặc tả UseCase Forgot Password 53

Bảng 17: Đặc tả UseCase Customize slider 55

Bảng 18: Đặc tả UseCase Add/Delete/Update category 57

Bảng 19: Đặc tả UseCase Update account information 60

Bảng 20: Đặc tả UseCase Add product to Wishlist 62

Bảng 21: Đặc tả UseCase View product in wishList 63

Bảng 22: Đặc tả UseCase Change password 65

Bảng 23: Đặc tả UseCase Add review 67

Bảng 24: Đặc tả UseCase View order 69

Bảng 25: Đặc tả UseCase View all User 71

Bảng 26: Đặc tả UseCase View order 73

Bảng 27: Bảng Category 93

Bảng 28: Bảng User 94

Bảng 29: Bảng Customzie 94

Bảng 30: Bảng review 94

Bảng 31: Bảng Product 95

Bảng 32: Bảng Order 95

LỜI NÓI ĐẦU

Ngày nay, công nghệ thông tin được xem là ngành mũi nhọn, là động lực quan trọng thúc đẩy sự phát triển của các lĩnh vực khác của đời sống kinh tế, văn hóa, xã hội… Đặc biệt trong thời gian gần đây, chúng ta có thể nhận thấy sự phát triển từng ngày của công nghệ thông tin Ngày nay, việc mua sắm, làm việc, đọc báo, xem tin tức v.v… đang ngày càng trở nên thuận tiện hơn, người ta có thể thực hiện mọi thứ mà không cần thiết phải bước ra khỏi nhà bằng cách sử dụng mạng internet Mô hình này

đã được triển khai rộng rãi trên các nước đã phát triển, tuy nhiên ở nước ta do mặt bằng hạ tầng viễn thông chưa phát triển lắm nên việc triển khai còn gặp nhiều khó khăn, đặc biệt là trong lĩnh vực thanh toán điện tử

Trong một vài năm tới, thương mại điện tử chắc chắn sẽ được triển khai tại nước

ta, khi đó, chúng ta sẽ nhận thấy sự bùng nổ của thương mại điện tử, của những cửa hàng chỉ tồn tại thực sự trên mạng internet – cửa hàng ảo v.v… khi đó chỉ cần có mạng internet, người ta có thể ngồi ở nhà và làm được mọi việc, từ đi chợ, mua sắm, làm việc đến giao dịch qua mạng

Cũng thuộc một trong những lĩnh vực mua sắm phổ biến ngày nay, thương mại điện tử nói chung là một trong những lĩnh vực đã được triển khai khá rộng rãi Nhưng

mô hình bán thực phẩm sạch lại còn ít được mọi người quan tâm Với ý định thử nghiệm mô hình bán thực phẩm sạch nói chung, chúng em đã nghiên cứu, tìm hiểu và quyết định chọn bán thực phẩm sạch qua mạng làm đề tài nghiên cứu môn học nhằm tìm hiểu kĩ hơn về mô hình này

MỞ ĐẦU

1 Phát biểu bài toán :

Trong các cửa hàng bán thực phẩm sạch hiện nay, khi mua hàng trực tiếp, khách hàng phải dành thời gian để đến cửa hàng và chờ đợi trong hàng đợi Điều này có thể tốn thời gian và gây phiền toái, đặc biệt khi khách hàng có công việc bận rộn hoặc sống ở xa cửa hàng Ngoài ra, việc tiếp cận cửa hàng cũng có thể là một vấn đề, đặc biệt đối với những người sống ở khu vực hẻo lánh hoặc không có nhiều lựa chọn cửa hàng Cửa hàng có giới hạn về không gian, do đó, lựa chọn sản phẩm cũng bị hạn chế Khách hàng có thể không tìm thấy mọi loại hàng họ cần mua hoặc không có sự đa dạng về thương hiệu và mẫu mãMua sắm trực tiếp tại cửa hàng có thể làm khó khăn trong việc so sánh giá cả Khách hàng phải đi từ cửa hàng này đến cửa hàng khác để

tin chi tiết về sản phẩm và không thể sử dụng các tính năng tìm kiếm và bộ lọc để tìm kiếm sản phẩm một cách dễ dàng Để giải quyết các bất lợi trên chúng em đã xây dựng một trang web thương mại điện tử chuyên bán thực phẩm sạch là một đề tài vô cùng cấp thiết và mang lại nhiều lợi ích

Trang web sẽ mang lại trải nghiệm mua sắm thuận tiện cho người tiêu dùng Họ có thể lựa chọn và đặt mua các sản phẩm thực phẩm sạch mọi lúc, mọi nơi thông qua giao diện trực tuyến Người tiêu dùng có thể xem thông tin chi tiết về nguồn gốc xuất xứ, cách bảo quản và các thông tin liên quan đến thực phẩm sạch để đảm bảo chất lượng

và an toàn thực phẩm

Cho phép doanh nghiệp mở rộng thị trường của họ từ cấp địa phương lên cấp quốc gia hoặc quốc tế thông qua mô hình kinh doanh trực tuyến Tối ưu hóa quảng cáo và khuyến mãi: Sử dụng các chiến lược quảng cáo và khuyến mãi trực tuyến để thu hút khách hàng và tăng cường tính cạnh tranh trong ngành

Tóm lại, xây dựng một trang web thương mại điện tử chuyên về thực phẩm sạch không chỉ mang lại lợi ích cho người tiêu dùng mà còn góp phần vào sự phát triển bền vững và hỗ trợ cho doanh nghiệp địa phương Đây là một đề tài cực kỳ cấp thiết trong bối cảnh ngày nay với sự quan tâm ngày càng tăng về sức khỏe và môi trường

2 Mục đích, yêu cầu thực hiện :

Mục đích : Xây dựng một nền tảng bán hàng trực tuyến đơn giản và hiệu quả,

giúp người tiêu dùng dễ dàng mua sắm các sản phẩm thực phẩm sạch mọi lúc, mọi nơi Trang web sẽ tập trung vào cung cấp thông tin chi tiết về nguồn gốc và chất lượng của sản phẩm để đảm bảo an toàn thực phẩm Mục tiêu là tối ưu hóa trải nghiệm mua sắm

Yêu cầu thực hiện : Xây dựng website gồm các chức năng chính:

Phía USER:

1 Đăng ký, đăng nhập, đăng xuất

2 Cập nhật thông tin tài khoản

3 Quên mật khẩu

4 Đổi mật khẩu

5 Tìm kiếm theo tên , loại, giá sản phẩm

6 Đánh giá sản phẩm

7 Thêm sản phẩm vào giỏ hàng

8 Thanh toán online qua Paypal, CreditCard

9 Gửi biên lai qua email user

10 Xem lịch sử thanh toán của bản thân

15 Thống kê lượng user, đơn hàng, sản phẩm hiện có

16 Thống kê số tiền chi tiêu của từng user

17 Chỉnh sửa role cho user

18 Xem , chỉnh sửa trạng thái Orders

19 Thống kê quản lý các Orders trong hôm nay

20 Xem, thêm, xóa, cập nhật thông tin sản phẩm

21 Tùy biến các banner

22 Xem, thêm, xóa, cập nhật thông tin loại sản phẩm

23 Xem, thêm, xóa, cập nhật thông tin mã giảm giá

3 Phạm vi và đối tượng nghiên cứu :

Đối tượng nghiên cứu : Nghiên cứu thiết kế và xây dựng website bán thực

1 Phát biểu bài toán

2 Mục đích, yêu cầu thực hiện

3 Phạm vi và đối tượng nghiên cứu

4 Cấu trúc của khóa luận tốt nghiệp

5 Ý nghĩa khoa học và thực tiễn

6 Phương pháp nghiên cứu

Phần NỘI DUNG (chia thành từng chương)

Chương 1 : KHẢO SÁT CÁC GIẢI PHÁP LIÊN QUAN

Chương 2: CỞ SỞ LÝ THUYẾT

Chương 3 : PHÂN TÍCH THIẾT KẾ

Chương 4 : CÀI ĐẶT VÀ KIỂM THỬ

Chương 5 : KẾT LUẬN

DANH MỤC TÀI LIỆU THAM KHẢO

PHỤ LỤC

5 Ý nghĩa khoa học và thực tiễn :

Hệ thống bán thực phẩm sạch được xây dựng dựa trên những nhu cầu thực tế của khách hàng và nhà quản lý nhằm giải quyết những khó khăn gặp phải, giảm thiểu rủi

ro trong quá trình quản lý việc mua bán thực phẩm Hệ thống hướng tới các đối tượng

là khách hàng và những nhân viên quản lý của doanh nghiệp Hệ thống có các chức năng chính bao gồm: quản lý sản phẩm, quản lý đơn hàng, quản lý loại sản phẩm, quản

lý người dùng và quản lý thông tin khách hàng Các chức năng này giúp người quản lý

dễ dàng điều khiển quá trình hoạt động của doanh nghiệp và rất thuận tiện để khách hàng có thể mua được sản phẩm

6 Phương pháp nghiên cứu :

Trong bài tiểu luận này, em sử dụng phương pháp phân tích, phương pháp mô phỏng, phương pháp nghiên cứu thực tiễn làm phương pháp nghiên cứu chủ đạo nhằm làm rõ quy trình cách thức để có thể đặt thực phẩm sạch và quy trình quản lý, thanh toán qua Paypal, VisaCard,… từ đó xây dựng Website HomeMarket bán thực phẩm sạch

NỘI DUNG CHƯƠNG 1: KHẢO SÁT CÁC GIẢI PHÁP LIÊN QUAN

1 Tìm hiểu các giải pháp liên quan :

Khảo sát 3 Website Mua Thực Phẩm Online nổi tiếng của Việt Nam hiện nay và đánh giá các website dựa trên các tiêu chí :

- Hiệu suất và Tốc độ tải

- Giao diện

- Tính năng

- Hạn chế

- Chăm sóc khách hàng và hỗ trợ

1.1 Bách hóa xanh ( https://www.bachhoaxanh.com/ ) :

Hình 1 : Home Page bachhoaxanh.com

Đặc điểm: Đây là 1 trang web thương mại điện tử lớn có đa dạng các sản phẩm

từ thực phẩm cho đến hàng tiêu dùng hằng ngày

Hiệu suất và Tốc độ tải: Trang website có tốc độ tải nhanh để cung cấp trải

nghiệm người dùng tốt 9/10

Giao diện: Trang chủ của website có các banner khuyến mãi về các sự kiện giảm

giá sản phẩm đang được quan tâm như tết, giáng sinh, các dịp lễ , Trang web tổ chức danh mục sản phẩm bên tay trái giúp người dùng dễ dàng tìm kiếm Giao diện khá thân thiện và dễ sử dụng 9/10

Tính năng Trang web có tích hợp các tính năng tương tác như đánh giá sản

phẩm, bình luận, đặt câu hỏi

Hình 2: Trang đánh giá bachhoaxanh.com

Tính năng giỏ hàng và thanh toán mua hàng trên trang web là linh hoạt và thuận tiện

Hình 3: Trang Cart bachhoaxanh.com

Chấp nhận nhiều hình thức khác nhau như tiền mặt, chuyển khoản, thẻ visa, ví điện tử MoMo, ZaloPay , VNPay,

Hình 4: Trang thanh toán bachhoaxanh.com

Có chức năng chat trực tiếp với nhân viên Tính năng tìm kiếm để đảm bảo khả năng tìm kiếm thông tin nhanh chóng Đăng nhập và đăng kí bằng số điện thoại Có thể chọn vị trí hiện tại để được hiển thị các khuyến mãi tương ứng với từng khu vực

Hạn chế: Tuy nhiên vì số lượng sản phẩm quá nhiều dẫn đến người dùng khi

dùng lần đầu dễ bị rối 3 mục này được sắp xếp không hợp lý , font chữ thô

Hình 5: Header bachhoaxanh.com

Phần responsive một số thiết bị vẫn chưa tương thích

1.2 Siêu thị WinMart ( https://winmart.vn/) :

Đặc điểm : Hệ thống siêu thị và chuỗi cửa hàng WinMart là hai thương hiệu bán

lẻ thuộc Tập Đoàn Masan Group Ra đời từ năm 2014 cho đến nay, hệ thống WinMart không ngừng phát triển vươn lên, ra mắt với hơn 131 siêu thị WinMart phủ rộng khắp Việt Nam, mang đến cho người tiêu dùng sự lựa chọn đa dạng về chất lượng hàng hóa

và dịch vụ, đáp ứng đầy đủ nhu cầu trải nghiệm mua sắm từ bình dân đến cao cấp của mọi khách hàng

Tốc độ tải: 9.5/10

Giao diện: Trang chủ của website có các banner khuyến mãi về các sự kiện giảm

giá các sản phẩm

Hình 6: Home Page https://winmart.vn/

Trang web với danh mục sản phẩm bên tay trái với hình ảnh trực quan của sản phẩm giúp người dùng dễ dàng tìm kiếm

Hình 7: Chi tiết sản phẩm https://winmart.vn/

Giao diện trang chủ trình bày sản phẩm theo thứ tự của danh mục sản phẩm nên sản phẩm không bị xáo trộn, dễ dàng tìm kiếm

• Tính năng: có đầy đủ tính năng cần thiết của 1 website bán thực phẩm sạch,

Tính năng giỏ hàng với chức năng như tăng giảm số lượng sản phẩm, xóa sản phẩm, xóa toàn bộ sản phẩm trong giỏ hàng, áp dụng phiếu ưu đãi giảm giá, v.v

Hình 8: Cart https://winmart.vn/

Phần thanh toán cho chủ động chọn thời gian giao hàng trong những khung giờ cụ thể và phương thức thanh toán cho chọn giữa trực tiếp hoặc online

Hình 9: Trang thanh toán https://winmart.vn/

Hình thức online chấp nhận nhiều hình thức khác nhau như thẻ nội địa và tài khoản ngân hàng, thẻ thanh toán quốc tế, VNPay, v.v

Hình 10: Trang chọn phương thức thanh toán https://winmart.vn/

Tính năng tìm kiếm giúp tìm kiếm thông tin sản phẩm người dùng muốn nhanh chóng

Hình 11: Trang danh sách sản phẩm https://winmart.vn/

Đăng nhập và đăng ký hội viên

Hình 12: Trang đăng nhập https://winmart.vn/

Hình 13: Trang chọn khu vực https://winmart.vn/

Cung cấp đầy đủ thông tinh về doanh nghiệp, hỗ trợ khách hàng, chăm sóc khách hàng, kết nối với doanh nghiệp qua các mạng xã hội, v.v

Hình 14: Trang Footer https://winmart.vn/

1.3 Satra Food (https://satrafoods.com.vn/) :

Đặc điểm: nổi bật với mô hình kinh doanh đa dạng và chất lượng sản phẩm Với

vị trí thuận lợi, cửa hàng nhỏ gọn nhưng đầy đủ từ thực phẩm tươi sống đến đồ gia dụng,SatraFood đáp ứng nhanh chóng nhu cầu mua sắm hàng ngày của khách hàng Chú trọng đến chất lượng, các chương trình khuyến mãi và sử dụng công nghệ, SatraFood không chỉ là địa điểm mua sắm mà còn là đối tác đáng tin cậy, giúp mọi gia đình có cuộc sống tiện lợi và an yên.SatraFood không ngừng sáng tạo, áp dụng công nghệ hiện đại để quản lý hàng hóa và cải thiện trải nghiệm mua sắm Điều này giúp tối

ưu hóa quy trình bán hàng và đảm bảo rằng khách hàng luôn được phục vụ một cách

hiệu quả nhất Nhờ những đặc điểm này, SatraFood không chỉ là nơi mua sắm, mà còn

là nguồn động viên cho cuộc sống năng động và tiện ích của mọi gia đình

Hình 15: Trang HomePage https://satrafoods.com.vn/

Tốc độ tải: 8.5/10

Giao diện: Satra đã làm tốt thiết kế nổi bật được các khuyến mãi hiện có khi

người dùng truy cập vào hệ thống Về tổng quan thiết kế vẫn chưa đem lại sự mới mẻ,

chuyên nghiệp Không có responsive Đáp ứng 8/10

Hình 16: Trang Danh mục sản phẩm https://satrafoods.com.vn/

Tính năng: có đầy đủ các tính năng của 1 web bán thực phẩm sạch Có tính năng

hỗ trợ khán giả mua hàng và thanh toán online tại website với nhiều chương trình ưu

đãi hấp dẫn Tối ưu được quy trình đăng ký, thanh toán đáp ứng được 8.5/10

còn cứng cáp , màu sắc chưa ăn ý với nhau , không có responsive chỉ đáp ứng được 6/10

2 Kết luận sau khi khảo sát :

tác thanh toán online, quy trình đặt hàng Qua các hệ thống khảo sát cho chúng ta có cái nhìn chung về mô hình bán thực phẩm sạch online từ đó xây dựng website với các tính năng cần thiết và không mắc phải các hạn chế của các web đã có

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

1 Công cụ và môi trường :

Visual Studio Code

2 Các công nghệ sử dụng :

ReactJS :

ReactJS là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể tái sử dụng lại được [1] Một trong những điểm hấp dẫn của ReactJS là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau ReactJS so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM [2]

Virtual DOM: Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ

xử lý của ứng dụng ReactJS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật [3] ReactJS còn sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi Với các đặc điểm ở trên, ReactJS dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện [4]

Ví dụ như trên Facebook: Newsfeed của bạn cùng lúc sẽ có các status khác nhau

và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó ReactJS sẽ rất hữu ích để sử dụng

JSX: Là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript JSX

có các đặc điểm sau:

+ Nhanh hơn (Faster): JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javascript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript

+ An toàn hơn (Safer): Ngược với Javascript, JSX là kiểu statically-typed, nghĩa

là nó được biên dịch trước khi chạy, giống như (Java, C++) Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch

lập trình viên Javascript có thể sử dụng

Components: ReactJS được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong ReactJS, chúng ta xây dựng trang web

sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong ReactJS có một trạng thái riêng, có thể thay đổi và ReactJS sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ ReactJS đều là component Chúng sẽ giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo Props và State:

+ Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Props là bất biến + State: thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời render lại để cập nhật giao diện

NodeJS :

NodeJS là một nền tảng dựa vào Chrome Javascript runtime để xây dựng các ứng dụng nhanh, có độ lớn NodeJS sử dụng các phần phát sinh các sự kiện (event- driven),

mô hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả cho các ứng dụng về

dữ liệu thời gian thực chạy trên các thiết bị phân tán [5]

NodeJS là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía Server và các ứng dụng liên quan đến mạng Ứng dụng Node.js được viết bằng Javascript và có thể chạy trong môi trường NodeJS trên hệ điều hành Window, Linux, [5]

NodeJS cũng cung cấp cho chúng ta các module Javascript đa dạng, có thể đơn giản hóa sự phát triển của các ứng dụng web sử dụng NodeJS với các phần mở rộng

NodeJS hoạt động với một luồng duy nhất và có khả năng asynchronous (bất đồng bộ) Không giống như server được viết bằng PHP thì mỗi ông request đến server thì server sẽ tạo ra một thread để xử lý trong khi đó server node xử lý mọi hành động trong một thread duy nhất Với cách thiết kế như vậy NodeJS sẽ hỗ trợ trang web một

số điều như:

+ Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ (none- blocking), nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu

về Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các

sự kiện của NodeJS giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước

+ Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu

+ Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License

Cách hoạt động: NodeJS sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì, NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử

lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được

sử dụng không hiệu quả Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng luồng đơn (Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép

hỗ trợ hàng chục ngàn kết nối đồng thời [5]

Express là một web application framework for NodeJS, nó cung cấp cho chúng những rất nhiều tính năng mạnh mẽ trên nền tảng web Express rất dễ dàng để phát triển các ứng dụng nhanh dựa trên NodeJS cho các ứng dụng web Express hỗ trợ các phương thức HTTP và middleware tạo ra 1 API rất mạnh mẽ và sử dụng dễ dàng hơn Các tính năng của Express framework phải kể đến như:

+ Cho phép thiết lập các lớp trung gian để trả về các HTTP request

+ Định nghĩa routing có thể được sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

+ Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template

MongoDB :

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là cơ sở dữ liệu thuộc NoSQL và được hàng triệu người sử dụng MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như cơ sở dữ liệu quan hệ nên truy vấn sẽ rất nhanh

Với cơ sở dữ liệu quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server, ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row, MongoDB sẽ dùng các document thay cho row trong RDBMS Các collection trong MongoDB được cấu

nhất định.Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB [6]

Một số câu lệnh cơ bản trên MongoDB:

- Tạo cơ sở dữ liệu: use test

- Tạo bảng: db.createCollection('students')

- Insert dữ liệu: db.students.insert({name:'thanh', gender: 'male'})

- Cập nhật: db.students.update({_id:1},{$set: {name: 'thanh update'}})

- Xóa dữ liệu: db.students.remove({_id: 1})

- Tìm kiếm tất cả: db.students.find({})

- Tìm kiếm: db.students.find({name: 'thanh'})

Ưu điểm của MongoDB:

- Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

- Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

- Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL

Nhược điểm của mongoDB:

- Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value

do đó key sẽ bị lặp lại Không hỗ trợ join nên dễ bị dư thừa dữ liệu

- MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với MongoDB thì phải hết sức cẩn thận

- Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điều này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ

1 Thiết kế chức năng :

Phía USER:

1 Đăng ký, đăng nhập, đăng xuất

2 Cập nhật thông tin tài khoản

3 Quên mật khẩu

4 Đổi mật khẩu

5 Tìm kiếm theo tên , loại, giá sản phẩm

6 Đánh giá sản phẩm

7 Thêm sản phẩm vào giỏ hàng

8 Thanh toán online qua Paypal, CreditCard

9 Gửi biên lai qua email user

10 Xem lịch sử thanh toán của bản than

15 Thống kê lượng user, đơn hàng, sản phẩm hiện có

16 Thống kê số tiền chi tiêu của từng user

17 Chỉnh sửa role cho user

18 Xem , chỉnh sửa trạng thái Orders

19 Thống kê quản lý các Orders trong hôm nay

20 Xem, thêm, xóa, cập nhật thông tin sản phẩm

21 Tùy biến các banner

22 Xem, thêm, xóa, cập nhật thông tin loại sản phẩm

23 Tạo các mã khuyến mãi

2 Đặc tả chức năng :

Bảng 1: Đặc tả chức năng

STT TÊN CHỨC NĂNG MÔ TẢ

email

● Please input your Email, Password

mới

User sẽ nhận các thông báo như:

OTP đã được gửi qua email

tên, số điện thoại, ảnh đại diện, …

Các tính năng:

trong tên chỉ được phép có chữ và khoảng trắng, 1 tên có tối đa 5 từ, 1 từ có tối đa 6 ký

tự, giữa 2 từ chỉ được phép có 1 khoảng trắng,

số cuối (tổng 10 số)

tiết sản phẩm

User xem thông tin chi tiết của sản phẩm

User có thể xem các sản phẩm có trong WishList

và them 1 sản phẩm bất kì vào Wishlist

khoản facebook để nhắn tin trực tiếp với fanpage facebook của website HomeMarket

trong ngày hôm nay

Admin xem bảng thống kê order trong ngày hôm nay

sửa hoặc xóa

Admin kiểm tra thông tin loại sản phẩm và có thể chỉnh sửa/xóa

29 Tích điểm khi mua

hàng

Khi mua hàng người dùng có thể tích điểm và sử dụng điểm đó để đổi các mã khuyễn mã

3 Vai trò người dùng :

3.1 Đối với khách hàng (Users) :

- Khách hàng có thể xem tất cả các sản phẩm hiện đang bán trên hệ thống website

- Khách hàng có thể đăng ký tài khoản bằng email, sau đó xác nhận OTP gửi về mail để sử dụng thao tác checkout và thanh toán

- Khách hàng có thể đăng nhập bằng email

- Khách hàng có thể đăng nhập và đăng xuất tài khoản của mình

- Khách hàng có thể lọc sản phẩm theo loại, giá, tìm sản phẩm theo tên

- Khách hàng có thể quên mật khẩu, đổi mật khẩu

- Khách hàng có thể thanh toán bằng paypal,vnpay hoặc thẻ ngân hàng Sau đó tích điểm và sử dụng điểm đó để đổi các mã khuyến mãi

- Khách hàng có thể gửi bình luận phản hồi và đánh giá

- Khách hàng có thể thay đổi thông tin cá nhân

- Khách hàng có thể xem lại lịch sử đặt hàng

- Khách hàng có thể thêm sản phẩm vào giỏ hàng

- Khách hàng có thể thêm sản phẩm vào WishList

- Khách hàng có thể chat với admin qua messenger

3.2 Đối với quản trị viên (Admin) :

- Quản trị viên có thể thống kê quản lý các thanh toán đã được người dùng thanh toán cho hệ thống, lịch sử giao dịch, các đơn hàng đã mua, có phần biểu đồ để có cái nhìn tổng quan hơn

- Quản trị viên có thể thống kê xem thông tin user, xem tổng số lượng đơn hàng, tổng số tiền mà user đã chi trả cho hệ thống

- Quản trị viên có thể xem và cập nhật trạng thái các đơn hàng

- Quản trị viên có thể thêm, chỉnh sửa, xóa sản phẩm

- Quản trị viên có thể thêm, chỉnh sửa, xóa loại sản phẩm

- Quản trị viên có thể tùy biến các banner

- Quản trị viên có thể biết được những sản phẩm bán chạy nhất, những người dùng chi nhiều tiền nhất trong 1 khoảng thời gian bất kì

- Quản trị viên quản lý các mã khuyến mãi dễ dàng

4 UseCase Diagram :

Hình 17: UseCase diagram