Xây dựng website bán hàng với react ExpressJS và quy chuẩn JWT (báo cáo cuối kì đồ án 1)

Thế nên, tình trạng đó đã thúc đẩy người mua vào việc mua hàng hóa online thông qua các ứng dụng thương mại hoặc thông qua các website, về mặt người bán thì cũng thúc đẩy họ thay vì đầu

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Mã sinh viên 2 : 19521652

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Xây dựng Website bán hàng với React-ExpressJS và quy chuẩn JWT Cán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện:Từ ngày: 21/02/2022 đến ngày 10/6/2022

Sinh viên thực hiện:

Phạm Võ Di Thiên - 19522267 Vòng Minh Huỳnh - 19521652

Nội dung đề tài:

Lí do chọn đề tài

Khách quan:

Trong nền kinh tế hiện nay, nhu cầu trao đổi hàng hóa (mua, bán) diễn ra

vô cùng sôi nổi và dường như đó là những hoạt động luôn luôn hiện hữu Nhu cầu của người mua hàng càng tăng thì khả năng đáp ứng, cung cấp của người bán cũng tăng theo Thế nhưng việc mua bán trực tiếp đã trở nên quá lỗi thời và khiến cho chi phí về mặt đầu tư của người bán hàng trở nên ngày càng lớn, cộng hưởng thêm đó là người mua hàng trong xã hội công nghệ hiện nay lại càng không có nhu cầu đi ra ngoài gặp trực tiếp người bán hàng

Điều đó lại càng có ý nghĩa và đúng đắn nhất là trong tình hình đại dịch Covid-19 hiện thời, người ta lại càng quan ngại việc đi ra ngoài để mua hàng hóa Thế nên, tình trạng đó đã thúc đẩy người mua vào việc mua hàng hóa online thông qua các ứng dụng thương mại hoặc thông qua các website, về mặt người bán thì cũng thúc đẩy họ thay vì đầu tư vào việc thuê mặt bằng hay mở rộng mặt bằng bán trực tiếp thì họ dùng chi phí đó để đầu tư vào phát triển một hệ thống, ứng dụng, website phục vụ cho việc kinh doanh của mình đặc biệt là các doanh nghiệp lớn, các cửa hàng lớn Bởi lẽ việc đầu tư đó giúp họ tiết kiệm được cho

phí và công sức hơn nhiều cộng thêm nó sẽ giúp họ bảo vệ được sức khỏe giữa đại dịch Nhận thấy được sự cần thiết, sự thực tế của vấn đề nên chúng em đã chọn đề tài “Xây dựng website bán hàng” để phục vụ cho đồ án 1 Một đề tài thực

tế, tính ứng dụng cao và sự đại trà cũng giúp phần nào cho việc thực hiện đồ án này trở nên ý nghĩa hơn

Chủ quan:

Trong quá trình học tập tại trường, chúng em muốn trải nghiệm khả năng thực hiện nhiều loại đồ án vận hành trên nhiều nền tảng khác nhau Nhận thấy được sự hấp dẫn của việc xây dựng một website hỗ trợ bán hàng nên chúng em quyết định chọn đề tài này để thực hiện cho môn Đồ án 1 Đồ án này mang ý nghĩa về việc lần đầu trải nghiệm xây dựng một website đối với nhóm

Mục tiêu đề tài

• Xây dựng một website giúp người dùng có thể mua hàng, thanh toán online

và có thể sử dụng website tại cái counter ở cửa hàng đẻ thanh toán Đồng

thời website phân quyền cho chủ sở hữu sử dụng

• Có hệ thống quản lí kho hàng, quản lí nhân viên

• Xây dựng được hệ thống khuyến nghị sản phẩm đến khách hàng, hệ thống

thanh toán online

• Xây dựng được UI cho website phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lí nhờ vào ứng dụng tốt ngôn ngữ JS, công nghệ mới

ReatcJS, ExpressJS và chuẩn bảo mật JWT

Phạm vi đề tài

Đề tài tập trung xây dựng website giải quyết bài toán e-commerce bao gồm

ba phân quyền người dùng: Admin - Staff - Manager - Customer - Guest

• Quản lý đơn đặt hàng, giỏ hàng, thanh toán

• Thống kê báo cáo, tìm kiếm

Đối tượng sử dụng

• Người dùng có nhu cầu mua laptop và các phụ kiện liên quan trực tuyến hoặc tại cửa hàng

• Chủ cửa hàng để quản lý sản phẩm, nhân viên

• Nhân viên để kiểm tra đơn hàng, quản lý chi nhánh

Phương pháp thực hiện

• Tìm hiểu, phân tích, ứng dụng quy trình xây dựng một website bằng ReactJS

• Phân tích các giải pháp của các website tương tự trên thị trường

• Thực hiện khảo sát nhu cầu, tình trạng thực tế của người dùng và mua bán hàng online thông qua website

Công nghệ sử dụng

• Front-end: ReactJS – ReduxToolkit

• Back-end: GoogleAPI/NodeJS, ExpressJS, Mongoose connected MongoDB, Sequelize connected PostgreSQL

• Security Standard: JWT

• Database: MongoDB, PostgreSQL, Firebase (nếu có làm chức năng đăng nhập qua Facebook)

Kết quả mong đợi

• Nắm bắt và áp dụng được công nghệ mới để xây dựng hoàn thiện sản phẩm của đề tài

• Xây dựng được website đáp ứng đủ các chức năng đã đề ra

• Giao diện website đơn giản, dễ sử dụng đối với người dùng

• Website có tính phát triển để có thể mở rộng chức năng trong tương lai

• Thành thục ngôn ngữ JS, sử dụng tốt công nghệ phát triển đã chọn

Kế hoạch thực hiện:

thành viên 1 (Thiên) thành viên 2 (Huỳnh) Tuần 1

(21/2 – 27/2)

• Publish, thu thập, tổng hợp kết quả khảo sát

• Quan sát, phân tích các website tương tự hiện có trên thị trường

• Tạo form và câu hỏi khảo sát về nhu cầu và tình trạng thực tế sử dụng, khảo sát về chức năng của website mua bán hàng trực tuyến

Tuần 2

(28/2 – 6/3)

• Phân tích đề tài, xây dụng thiết

kế UI, database, các chức năng của ứng dụng

• Lên timeline cho dự án

• Tìm hiểu Template cho báo cáo cuối kì

• Tìm hiểu các thư viện kiểm thử

• Tìm hiểu các thuật toán cho hệ thống khuyến nghị sản phẩm

• Tìm hiểu công nghệ, công cụ

• Tạo timeline cho dự án

• Tham khảo mẫu, template các tài liệu báo cáo đồ án

• Vẽ sơ đồ database cơ bản

• Tìm hiểu công nghệ, công

cụ và ngôn ngữ đã chọn (Chủ yếu là Front-end)

• Tìm hiểu cách sử dụng MongoDB

• Tìm hiểu giải pháp thanh toán trực tuyến

Tuần 3

(7/3 – 13/3)

• Tạo repo github cho Server, tìm hiểu qua về các boilerplate cho Server

• Tạo database cho project ở cả 2 database là MongoDB và PostgreSQL

• Tìm hiểu cách kết nối Server

• Tạo repo github cho Client, tìm hiểu về các boilerplate cho Client,

• Tìm hiểu và cài đặt Redux toolkit cho project

với MongoDB và PostgreSQL

Tuần 4

(14/3 – 20/3)

• Học cách sử dụng Sequelize – PostgreSQL, tạo các Model cho các entries

• Deloy Database PostgreSQL lên Heroku

Hoàn thành chức năng:

• Đăng kí, đăng nhập

• Xác thực gmail bằng GoogleAPI/Nodejs

• Tìm hiểu đăng nhập qua Facebook (FirebaseAPI/ Authentication)(nếu có thể) Cài đặt các màn hình phân quyền sau khi đăng nhập Tuần 6

(28/3 – 3/4)

• Kiểm tra tính đúng đắn của các Token gửi từ Server và kiểm tra Client có thực hiện lấy lại refreshToken khi Token hết hạn

• Thiết kế giao diện ban đầu cho phân quyền Admin:

• Viết các API liên quan bằng thư viện Axios

• Hoàn thành chức năng thêm,

Thiết kế giao diện ban đầu cho phân quyền Checking staff:

• Viết các API liên quan bằng thư viện Axios

• Hoàn thành chức năng Quản

lý các đơn hàng

• Hoàn thành chức năng xem Lịch sử các đơn hàng

• Viết các API liên quan bằng thư viện Axios

• Hoàn thành chức năng Quản

lý kho tại chi nhánh

• Hoàn thành quản lý doanh thu toàn hệ thống

• Hoàn thành chức năng Quản

lí doanh thu

• Hoàn thành chức năng Quản

lý lịch sử mua hàng tại chi nhánh

• Chức năng xuất Bill (nếu có thể) (Hiển thị hóa đơn của cửa hàng)

và đơn hàng tại chi nhánh)

• Tìm hiểu các thư viện kiểm thử

• Tiến hành kiểm thử các hàm Validate của hệ thống

• Hoàn thành tài liệu kiểm thử (ở mức đơn giản nếu có thể)

• Thiết lập tài khoản Cloudinary để thực hiện việc lưu trữ hình ảnh thông tin khách hàng Tuần 11

và áp dụng vào hệ thống Tuần 12

(9/5 – 15/5)

• Tìm hiểu thuật toán Lọc cộng tác để tiến hành thực hiện hệ thống khuyến nghị sản phẩm bằng code Python

• Tiến hành code hệ thống khuyến nghị và đưa vào trang web để hỗ trợ khách hàng

• Tiến hành test qua hết lại các chức năng của hệ thống, tiến hành sủa lỗi nếu có

• Note các lỗi gặp phải vào tập tài liệu System List nếu

có

Tuần 13

(16/5 – 22/5)

• Deloy Server bằng Heroku

• Deloy Client bằng Vercel

• Hoàn thành tập tài liệu kiểm thử

• Viết tài liệu báo cáo

Tuần 14

(23/5 – 29/5)

Tuần 15 Hoàn thành tài liệu báo cáo Chuẩn bị slide thuyết trình

tên)

Thiên Phạm Võ Di Thiên

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

tên)

Huynh Vòng Minh Huỳnh

LỜI CẢM ƠN

CHUẨN JWT’ là minh chứng cho quá trình cố gắng không ngừng trong việc tìm tòi, học hỏi trong suốt quãng thời gian vừa mà chúng em dành qua cho môn học Thể hiện khả năng của bản thân trong việc áp dụng kiến thức chuyên môn vào giải quyết một bài toán mới mà chúng em chưa từng trải nghiệm trước đó

Trong quá trình thực hiện đồ án, em đã nhận được sự hướng dẫn tận tình từ quý thầy cô, sự giúp đỡ và hỗ trợ từ gia đình cũng như bạn bè Một cách đặc biệt, em xin được gửi lời cảm ơn chân thành đến:

• Các thầy cô trường Đại học Công nghệ Thông Tin nói chung và cô Trần Thị Hồng Yến nói riêng đã tận tình truyền đạt kiến thức và đưa cho em những ý kiến trong suốt thời gian học tập Đó là tài sản quý báu đã giúp em hoàn thành

đồ án và cũng là hành trang cho con đường sự nghiệp của bản thân sau này

• Các thành viên trong nhóm đã luôn nổ lực phấn đấu, lắng nghe và luôn sẵn sàng hỗ trợ nhau trong suốt cả quá trình học tập và thực hiện đồ án Để đạt được kết quả như ngày hôm nay

• Lời cuối cùng, em xin dành lời cảm ơn gửi tới gia đình, anh chị, bạn bè đã luôn bên cạnh để động viên và đóng góp ý kiến trong quá trình hoàn thành đồ

án này

Thành phố Hồ Chí Minh, ngày 03 tháng 06 năm 2022

MỤC LỤC

Chương 1: GIỚI THIỆU ĐỀ TÀI 1

1.1 Tên Website: 1

1.2 Mô tả Website: 1

1.3 Lý do chọn thiết kế Website: 1

1.4 Sơ đồ sitemap của Website: 2

1.5 Công nghệ sử dụng: 2

1.6 Môi trường thiết kế: 3

1.7 Công cụ hỗ trợ: 3

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

2.1 Lập trình Javascript: 4

2.1.1 JavaScipt là gì ? 4

2.1.2 Đặc điểm nổi bật của Javascript 4

2.2 Front-end: 4

2.2.1 React JS 4

2.2.2 Redux Toolkit 5

2.3 Back-end 6

2.3.1 ExpressJS 6

2.3.2 Nodemailer 7

2.3.3 Sequelize connected PostgreSQL 8

2.3.4 Mongoose 8

2.3.5 Cloudinary 9

2.3.6 JWT 10

2.4 Database 11

2.4.1 MongoDB 11

2.4.2 PostgreSQL 12

Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 14

3.1 Sơ đồ thực thể ERD 14

3.1.1 Bảng Product 14

3.1.2 Bảng Product Image 15

3.1.3 Bảng Feature 15

3.1.4 Bảng Cart 15

3.1.5 Bảng Stock 15

3.1.6 Bảng Branch 16

3.1.7 Bảng Invoice 17

3.1.8 Bảng Account 17

3.1.9 Bảng Notification 18

3.1.10 Bảng Comment 18

3.1.11 Bảng Invoice Item 19

3.1.12 Bảng Favorite 19

3.1.13 Bảng Patron Discount 20

3.2 Sơ đồ liên kết màn hình 21

3.3 Sơ đồ phân rã chức năng 22

3.3.1 Admin 22

3.3.2 Customer 23

3.3.3 Manager 23

3.3.4 Staff 24

3.3.5 Guest 25

3.4 Sơ đồ Use-case 25

3.5 Đặc tả Use-case 27

3.4.1 Đăng nhập 27

3.4.2 Đăng ký 27

3.4.3 Quên mật khẩu 29

3.4.4 Đăng xuất 30

3.4.5 Xem Hàng hóa 31

3.4.6 Chỉnh sửa hàng hóa 31

3.4.7 Thêm hàng hóa 32

3.4.8 Xóa hàng hóa 33

3.4.9 Cập nhật thông tin cá nhân 34

3.4.10 Bình luận hàng hóa 35

3.4.11 Thêm, sửa, xóa nhân viên 36

3.4.12 Xem doanh thu 37

3.4.13 Tìm kiếm hàng hóa 38

3.4.14 Nhập hóa đơn, bán hàng trực tiếp tại chi nhánh 39

3.4.15 Duyệt và kiểm tra thanh toán của đơn hàng online 39

3.4.16 Phân tích dữ liệu hàng hóa 40

3.4.17 In hóa đơn 41

3.4.18 Thêm hàng hóa vào giỏ hàng, yêu thích 42

3.4.19 Đưa hàng hóa từ yêu thích sang giỏ hàng 43

3.4.20 Cập nhật số lượng hay xóa hàng hóa từ giỏ hàng 44

3.4.21 Thanh toán 44

3.5 Sơ đồ kiến trúc hệ thống 46

3.6 Sơ đồ DFD 46

3.6.1 Đăng nhập 46

3.6.2 Đăng ký 47

3.6.3 Cập nhật thông tin cá nhân 47

3.6.4 Bình luận sản phẩm 48

3.6.5 Thanh toán hóa đơn 48

3.6.6 Xem chi tiết hàng hóa 49

3.6.7 Thêm vào giỏ hàng 49

3.6.8 Thêm vào yêu thích 50

3.6.9 Tăng giảm số lượng hàng hóa 50

3.6.10 Check hóa đơn 51

3.6.11 Kiểm tra hóa đơn đã hoàn thành 51

3.6.12 Thêm hóa hàng 52

3.6.13 Cập nhật hàng hóa 52

3.6.14 Xóa hàng hóa 53

3.6.15 Thêm nhân viên 53

3.6.16 Đổi mật khẩu 54

3.7 Giải pháp 54

Chương 4: THIẾT KẾ TEMPLATE 55

4.1 Phác thảo layout Website: 55

4.1.1 Home Page 55

4.1.2 Sign In Page 56

4.1.3 Sign Up Page 57

4.1.4 Guest Cart Page 57

4.1.5 Display Product Page 58

4.1.6 Detail Product Page 58

4.1.7 Product Manager Page 60

4.1.8 Staff Manager Page 60

4.1.9 Add Product Page 61

4.1.10 Edit Product Page 61

4.1.11 Drawer 62

4.1.12 Stock Manager Page 63

4.1.13 Add Stock Modal 63

4.1.14 Revenue Page 64

4.1.15 Data Analysis Page 64

4.1.16 Detail Product Modal 65

4.1.17 Add Manager Page 66

4.1.18 My Place Page 66

4.1.19 My Cart Page 67

4.1.20 My Order Page 67

4.1.21 My Favorite Page 68

4.1.22 Pre-Access To Profile Page 68

4.1.23 Profile Page 69

4.1.24 Checkout Now Page 69

4.1.25 Payment Page 70

4.2 Giao diện Template: 70

4.2.1 Home Page 70

4.2.2 Sign In Page 72

4.2.3 Sign Up Page 73

4.2.4 Guest Cart Page 73

4.2.5 Display Product Page 74

4.2.6 Detail Product Page 75

4.2.7 Product Manager Page 76

4.2.8 Staff Manager Page 76

4.2.9 SAdd Product Page 77

4.2.10 Edit Product Page 77

4.2.11 Drawer 78

4.2.12 Stock Manager Page 79

4.2.13 Add Stock Modal 79

4.2.14 Revenue Page 79

4.2.15 Data Analysis Page 80

4.2.16 Detail Product Modal 80

4.2.17 Add Manager Page 81

4.2.18 My Place Page 81

4.2.19 My Cart Page 81

4.2.20 My Orders Page 82

4.2.21 My Favorite Page 82

4.2.22 Pre-Access To Profile Page 83

4.2.23 Profile Page 83

4.2.24 Checkout Now Page 84

4.2.25 Payment Page 85

4.3 Thu thập dữ liệu Website: 85

4.4 Các kỹ thuật thiết kế: 87

Chương 5: XÂY DỰNG WEBSITE 99

5.1 Home page: 99

5.1.1 Giao diện: 99

5.1.2 Mô tả: 99

5.2 Sign In Page 100

5.2.1 Giao diện 100

5.2.2 Mô tả 100

5.3 Sign Up Page 101

5.3.1 Giao diện 101

5.3.2 Mô tả 101

5.4 Guest Cart Page 102

5.4.1 Giao diện 102

5.4.2 Mô tả 102

5.5 Display Product Page 103

5.5.1 Giao diện 103

5.5.2 Mô tả 104

5.6 Detail Product Page 105

5.6.1 Giao diện 105

5.6.2 Mô tả 106

5.7 Product Manager Page 107

5.7.1 Giao diện 107

5.7.2 Mô tả 107

5.8 Staff Manager Page 108

5.8.1 Giao diện 108

5.8.2 Mô tả 109

5.9 Add Product Page 109

5.9.1 Giao diện 109

5.9.2 Mô tả 110

5.10 Edit Product Page 111

5.10.1 Giao diện 111

5.10.2 Mô tả 112

5.11 Drawer 113

5.11.1 Giao diện 113

5.11.2 Mô tả 113

5.12 Stock Manager Page 114

5.12.1 Giao diện 114

5.12.2 Mô tả 114

5.13 Add Stock Modal 115

5.13.1 Giao diện: 115

5.13.2 Mô tả: 116

5.14 Revenue Page 116

5.14.1 Giao diện 116

5.14.2 Mô tả 117

5.15 Data Analysis Page 117

5.15.1 Giao diện 117

5.15.2 Mô tả 118

5.16 Detail Product Modal 118

5.16.1 Giao diện 118

5.16.2 Mô tả 119

5.17 Add Manager Page 119

5.17.1 Giao diện 119

5.17.2 Mô tả 120

5.18 My Place Page 121

5.18.1 Giao diện 121

5.18.2 Mô tả 121

5.19 My Cart Page 122

5.19.1 Giao diện 122

5.19.2 Mô tả 123

5.20 My Order Page 124

5.20.1 Giao diện 124

5.20.2 Mô tả 125

5.21 My Favorite Page 126

5.21.1 Giao diện 126

5.21.2 Mô tả 126

5.22 Pre-Access To Profile Page 127

5.22.1 Giao diện 128

5.22.2 Mô tả 128

5.23 Profile Page 129

5.23.1 Giao diện 129

5.23.2 Mô tả 129

5.24 Checkout Now Page 131

5.24.1 Giao diện 131

5.24.2 Mô tả 131

5.25 Payment Page 132

5.25.1 Giao diện 132

5.25.2 Mô tả 132

Chương 6: KẾT LUẬN 134

6.1 Ưu điểm của đồ án: 134

6.1.1 Về giao diện 134

6.1.2 Về chức năng (khả năng ứng dụng thực tế) 134

6.2 Hạn chế của đồ án: 134

6.3 Hướng phát triển của đồ án: 134

MỤC LỤC HÌNH ẢNH

Hình 1 1 Sơ đồ sitemap của website 2

Hình 2 1 Sơ đồ hoạt động của redux toolkit 6

Hình 2 2 Logo express JS 6

Hình 2 3 Giao diện Nodemailer 7

Hình 2 4 Đặc điểm Sequelize 8

Hình 2 5 Logo Mongoose 9

Hình 2 6 Logo Cloudinary 9

Hình 2 7 Chuẩn JWT 10

Hình 2 8 Cấu trúc JWT 10

Hình 2 9 Token JWT 11

Hình 2 10 Hàm kiểm tra Token 11

Hình 2 11 Logo MongoDB 12

Hình 2 12 Logo PostgreSQL 12

Hình 3 1 Sơ đồ thực thể ERD 14

Hình 3 2 Sơ đồ liên kết màn hình 22

Hình 3 3 Phân rã chức năng của Admin 22

Hình 3 4 Phân rã chức năng của Customer 23

Hình 3 5 Phân rã chức năng của Manager 24

Hình 3 6 Phân rã chức năng của Staff 24

Hình 3 7 Phân rã chức năng của Guest 25

Hình 3 8 Sơ đồ use-case chi tiết 26

Hình 3 9 DFD Đăng nhập 46

Hình 3 10 DFD Đăng ký tài khoản 47

Hình 3 11 DFD Cập nhật thông tin cá nhân 47

Hình 3 12 DFD Bình luận sản phẩm 48

Hình 3 13 DFD Than toán hóa đơn 48

Hình 3 14 DFD Xem chi tiết hàng hóa 49

Hình 3 15 DFD Thêm vào giỏ hàng 49

Hình 3 16 DFD Thêm vào danh sách hàng hóa yêu thích 50

Hình 3 17 DFD Tăng giảm số lượng hàng hóa 50

Hình 3 18 DFD Check hóa đơn 51

Hình 3 19 DFD Kiểm tra hóa đơn đã hoàn thành thanh thoán và giao hàng 51

Hình 3 20 DFD Thêm hàng hóa 52

Hình 3 21 DFD Cập nhật hàng hóa 52

Hình 3 22 DFD Xóa hàng hóa 53

Hình 3 23 DFD Thêm nhân viên 53

Hình 3 24 DFD Đổi mật khẩu 54

Hình 4 1 Home Page Layout 56

Hình 4 2 Sign In Page Layout 56

Hình 4 3 Sign Up Page Layout 57

Hình 4 4 Guest Cart Page Layout 57

Hình 4 5 Display Product Page Layout 58

Hình 4 6 Detail Product Page Layout 60

Hình 4 7 Product Manager Page Layout 60

Hình 4 8 Staff Manager Page Layout 61

Hình 4 9 Add Product Page Layout 61

Hình 4 10 Edit Product Page Layout 62

Hình 4 11 Drawer Layout 63

Hình 4 12 Stock Manager Page Layout 63

Hình 4 13 Add Stock Modal Layout 64

Hình 4 14 Revenue Page Layout 64

Hình 4 15 Data Analysis Page Layout 64

Hình 4 16 Detail Product Modal Layout 65

Hình 4 17 Add Manager Page Layout 66

Hình 4 18 My Place Page Layout 66

Hình 4 19 My Cart Page Layout 67

Hình 4 20 My Order Page Layout 67

Hình 4 21 My Favorite Page Layout 68

Hình 4 22 Pre-Access To Profile Page Layout 68

Hình 4 23 Profile Page Layout 69 Hình 4 24 Checkout Now Page Layout 69 Hình 4 25 Payment Page 70 Hình 4 26 Home Page Template 72 Hình 4 27 Sign In Page Template 73 Hình 4 28 Sign Up Page Template 73 Hình 4 29 Guest Cart Page Template 74 Hình 4 30 Display Product Page Template 74 Hình 4 31 Detail Product Page Template 76 Hình 4 32 Product Manager Page Template 76 Hình 4 33 Staff Manager Page Template 76 Hình 4 34 Add Product Page Template 77 Hình 4 35 Edit Product Page Template 78 Hình 4 36 Drawer Template 78 Hình 4 37 Stock Manager Page Template 79 Hình 4 38 Add Stock Modal Template 79 Hình 4 39 Revenue Page Template 79 Hình 4 40 Data Analysis Page Template 80 Hình 4 41 Detail Product Modal Template 80 Hình 4 42 Add Manager Page Template 81 Hình 4 43 My Place Page Template 81 Hình 4 44 My Cart Page Template 82 Hình 4 45 My Orders Page Template 82 Hình 4 46 My Favorite Page Template 83 Hình 4 47 Pre-Access To Profile Page Template 83 Hình 4 48 Profile Page Template 84 Hình 4 49 Checkout Now Page Template 84 Hình 4 50 Payment Page Template 85 Hình 4 51 Nguồn thu thập hình ảnh 86 Hình 4 52 Logo của ComeBuy 87 Hình 4 53 Figma tổng quát toàn bộ thiết kế của ComeBuy 87 Hình 4 54 Trang thư viện MUI 88

Hình 5 1 Giao diện Home Page 99Hình 5 2 Giao diện Sign In Page 100Hình 5 3 Giao diện Sign Up Page 101Hình 5 4 Giao diện Guest Cart Page 102Hình 5 5 Giao diện Display Product Page 104Hình 5 6 Giao diện Detail Product Page 106Hình 5 7 Giao diện Product Manager Page 107Hình 5 8 Giao diện Staff Manager Page 108Hình 5 9 Giao diện Add Product Page 110Hình 5 10 Giao diện Edit Product Page 112Hình 5 11 Giao diện Drawer 113Hình 5 12 Hiao diện Stock Manager Page 114Hình 5 13 Giao diện Add Stock Modal 116Hình 5 14 Giao diện Revenue Page 117Hình 5 15 Giao diện Data Analysis Page 118Hình 5 16 Giao diện Detail Product Modal 119Hình 5 17 Giao diện Add Manager Page 120Hình 5 18 Giao diện My Place Page 121Hình 5 19 Giao diện My Cart Page 123Hình 5 20 Giao diện My Order Page 124Hình 5 21 Giao diện My Favorite Page 126Hình 5 22 Giao diện Pre-Access To Profile Page 128Hình 5 23 Giao diện Profile Page 129Hình 5 24 Giao diện Checkout Now Page 131Hình 5 25 Giao diện Payment Page 132

DANH MỤC BẢNG BIỂU

Bảng 3 1 Bảng mô tả Product 14Bảng 3 2 Bảng mô tả Image 15Bảng 3 3 Bảng mô tả Feature 15Bảng 3 4 Bảng mô tả Cart 15Bảng 3 5 Bảng mô tả Stock 16Bảng 3 6 Bảng mô tả Branch 16Bảng 3 7 Bảng mô tả Invoice 17Bảng 3 8 Bảng mô tả Account 17Bảng 3 9 Bảng mô tả Notification 18Bảng 3 10 Bảng mô tả Comment 18Bảng 3 11 Bảng mô tả Invoice Item 19Bảng 3 12 Bảng mô tả Favorite 19Bảng 3 13 Bảng mô tả Patron Discount 20Bảng 3 14 Đặc tả Đăng nhập 27Bảng 3 15 Đặc tả Đăng kí 28Bảng 3 16 Đặc tả Quên mật khẩu 29Bảng 3 17 Đặc tả Đăng xuất 30Bảng 3 18 Đặc tả Xem hàng hóa 31Bảng 3 19 Đặc tả Chỉnh sửa hàng hóa 31Bảng 3 20 Đặc tả Thêm hàng hóa 32Bảng 3 21 Đặc tả Xóa hàng hóa 33Bảng 3 22 Đặc tả Cập nhật thông tin 34Bảng 3 23 Đặc tả Bình luận hàng hóa 35Bảng 3 24 Đặc tả Thêm, sửa, xóa nhân viên 36Bảng 3 25 Đặc tả Xem doanh thu 37Bảng 3 26 Đặc tả Tìm kiếm hàng hóa 38Bảng 3 27 Đặc tả Nhập hóa đơn, bán hàng trực tiếp tại các chi nhánh 39Bảng 3 28 Đặc tả Duyệt và kiểm tra thanh toán của đơn hàng 39Bảng 3 29 Đặc tả Phân tích dữ liệu hàng hóa 40Bảng 3 30 Đặc tả In hóa đơn 41Bảng 3 31 Đặc tả Thêm hàng hóa vào giỏ hàng và yêu thích 42Bảng 3 32 Đặc tả Đưa hàng hóa từ yêu thích sang giỏ hàng 43

Bảng 3 33 Đặc tả Cập nhật số lượng hay xóa hàng hóa từ giỏ hàng 44Bảng 3 34 Đặc tả Thanh toán 44

Bảng 5 1 Mô tả giao diện Home Page 99Bảng 5 2 Mô tả giao diện Sign In Page 100Bảng 5 3 Mô tả giao diện Sign Up Page 101Bảng 5 4 Mô tả giao diện Guest Cart Page 103Bảng 5 5 Mô tả giao diện Display Product Page 104Bảng 5 6 Mô tả giao diện Detail Product Page 106Bảng 5 7 Mô tả giao diện Product Manager Page 107Bảng 5 8 Mô tả giao diện Staff Manager Page 109Bảng 5 9 Mô tả giao diện Add Product Page 110Bảng 5 10 Mô tả giao diện Drawer 113Bảng 5 11 Mô tả giao diện Stock Manager Page 114Bảng 5 12 Mô tả giao diện Add Stock Modal 116Bảng 5 13 Mô tả giao diện Revenue Page 117Bảng 5 14 Mô tả giao diện Data Analysis Page 118Bảng 5 15 Mô tả giao diện Detail Product Modal 119Bảng 5 16 Mô tả giao diện Add Manager Page 120Bảng 5 17 Mô tả giao diện My Place Page 121Bảng 5 18 Mô tả giao diện My Cart Page 123Bảng 5 19 Mô tả giao diện My Order Page 125Bảng 5 20 Mô tả giao diện My Favorite Page 126Bảng 5 21 Mô tả giao diện Pre-Access To Profile Page 128Bảng 5 22 Mô tả giao diện Profile Page 129Bảng 5 23 Mô tả giao diện Checkout Now Page 131Bảng 5 24 Mô tả giao diện Payment Page 132

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

Tp.HCM, ngày … tháng 12 năm 2021

GVHD

ThS Trần Thị Hồng Yến

Chương 1:

GIỚI THIỆU ĐỀ TÀI

1.1 Tên Website

Website có tên gọi: ComeBuy

- Link repo Client: https://github.com/pvdthien310/ComeBuyClient

- Link repo Server: https://github.com/pvdthien310/ComeBuyServer

- Website: https://comebuy-site-offical.netlify.app

1.2 Mô tả Website

- Ngay từ cái tên người dùng cũng đã biết mục đích của website Với cái tên dễ hiểu và đơn giản , phần nào cũng giúp người dùng biết được mục đích của họ đến với website Come tức là đến với – như một lời mời gọi; Buy tức là mua Tên website ngụ ý kêu gọi người dùng , khách hành đến khám phá và mua những mặt hàng mình cần và đặc biệt

cụ thể ở đây ComeBuy cung cấp các mặt hàng laptop từ nhiều các thương hiệu nổi tiếng và phổ biến từ Dell, Acer cho đến Apple,…

- Website ComeBuy cung cấp các chức năng cho hai phía đối tượng người dùng: chủ shop (Owner) và khách hàng (Customer) Mô tả một cách sơ lược, đối với Owner, ComeBuy cho phép họ quản lí hàng hóa, quản lí việc mua bán, quản lí nhân viên, quản

lí doanh thu,…Ngược lại đối với Customer, ComeBuy cho phép họ lưu trữ thông tin cá nhân liên kết tài khoản và thực hiện mua hàng và thanh toán bằng các hình thức khác nhau ngay trên website hoặc có thể mua hàng trực tiếp từ shop để được thực hiện thanh toán bằng tiền mặt và order qua chức năng order trực tiếp thông qua quản lí tại các chi nhánh trên website

- ComeBuy được xây dựng bằng React JS và các thư viện hỗ trợ, kĩ thuật hỗ trợ khác,…nhằm đáp ứng việc mang lại một thiết kế dễ dùng, hợp thị hiếu, thu hút người dùng và độ bảo mật tốt

1.3 Lý do chọn thiết kế Website

Khách quan

- Trong nền kinh tế hiện nay, nhu cầu trao đổi hàng hóa (mua, bán) diễn ra vô cùng sôi nổi và dường như đó là những hoạt động luôn luôn hiện hữu Nhu cầu của người mua hàng càng tăng thì khả năng đáp ứng, cung cấp của người bán cũng tăng theo Thế nhưng việc mua bán trực tiếp đã trở nên quá lỗi thời và khiến cho chi phí về mặt đầu tư

trong xã hội công nghệ hiện nay lại càng không có nhu cầu đi ra ngoài gặp trực tiếp người bán hàng Điều đó lại càng có ý nghĩa và đúng đắn nhất là trong tình hình đại dịch Covid-19 hiện thời, người ta lại càng quan ngại việc đi ra ngoài để mua hàng hóa Thế nên, tình trạng đó đã thúc đẩy người mua vào việc mua hàng hóa online thông qua các ứng dụng thương mại hoặc thông qua các website, về mặt người bán thì cũng thúc đẩy họ thay vì đầu tư vào việc thuê mặt bằng hay mở rộng mặt bằng bán trực tiếp thì họ dùng chi phí đó để đầu tư vào phát triển một hệ thống, ứng dụng, website phục vụ cho việc kinh doanh của mình đặc biệt là các doanh nghiệp lớn, các cửa hàng lớn Bởi lẽ việc đầu tư đó giúp họ tiết kiệm được cho phí và công sức hơn nhiều cộng thêm nó sẽ giúp họ bảo vệ được sức khỏe giữa đại dịch Nhận thấy được sự cần thiết, sự thực tế của vấn đề nên chúng em đã chọn đề tài “Xây dựng website bán hàng” để phục vụ cho

đồ án 1 Một đề tài thực tế, tính ứng dụng cao và sự đại trà cũng giúp phần nào cho việc thực hiện đồ án này trở nên ý nghĩa hơn

Chủ quan:

Trong quá trình học tập tại trường, chúng em muốn trải nghiệm khả năng thực hiện nhiều loại đồ án vận hành trên nhiều nền tảng khác nhau Nhận thấy được sự hấp dẫn của việc xây dựng một website hỗ trợ bán hàng nên chúng em quyết định chọn đề tài này để thực hiện cho môn Đồ án 1 Đồ án này mang ý nghĩa về việc lần đầu trải nghiệm xây dựng một website đối với nhóm

1.4 Sơ đồ sitemap của Website

Hình 1 1 Sơ đồ sitemap của website

1.5 Công nghệ sử dụng

- Lập trình xử lý sự kiện với Javascript

- Front-end: ReactJS – ReduxToolkit

- Back-end: GoogleAPI/NodeJS, ExpressJS, Mongoose connected MongoDB, Sequelize connected PostgreSQL, Nodemailer, Cloudinary

- Security Standard: JWT

- Database: MongoDB, PostgreSQL, Firebase (nếu có làm chức năng đăng nhập qua Facebook)

- Thư viện chính: Material UI

1.6 Môi trường thiết kế

- Visual Studio Code

1.7 Công cụ hỗ trợ

- Postman

- Trình duyện Cốc Cốc, Chrome, Microsoft Edge

• HTML: Giúp bạn thêm nội dung cho trang web

• CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web

• JavaScript: Cải thiện cách hoạt động của trang web

- JavaScript là ngôn ngữ lập trình mang đến sự sinh động của website Nó khác với HTML (thường chuyên cho nội dung) và CSS (thường chuyên dùng cho phong cách),

và khác hẵn với PHP (chạy trên server chứ không chạy dưới máy client)

2.1.2 Đặc điểm nổi bật của Javascript

- Bạn không cần một compiler vì web browser có thể biên dịch nó bằng HTML;

- Nó dễ học hơn các ngôn ngữ lập trình khác;

- Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;

- Nó có thể được gắn trên một số element của trang web hoặc event của trang web như

là thông qua click chuột hoặc di chuột tới;

- JS hoạt động trên nhiều trình duyệt, nền tảng,…;

- Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;

- Nó giúp website tương tác tốt hơn với khách truy cập;

- Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

2.2 Front-end

2.2.1 React JS

- ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

- Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ra trong khi coding, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm: JSX và Virtual DOM

- Đặc điểm nổi bật:

• Phù hợp với đa dạng thể loại website

• Tái sử dụng các Component

• Có thể sử dụng cho cả Mobile application

• Thân thiện với SEO

• "Định cấu hình Redux Store quá phức tạp"

• "Dev phải thêm rất nhiều packages để Redux có thể làm bất cứ điều gì hữu ích"

• "Redux yêu cầu quá nhiều mã code sẵn"

- Redux toolkit có thể ' không giải quyết mọi trường hợp sử dụng, nhưng với tinh thần của create-react-app, redux toolkit có thể cố gắng cung cấp một số công cụ tóm tắt quá trình thiết lập và xử lý các trường hợp sử dụng phổ biến nhất, cũng như bao gồm một

số tiện ích hữu ích sẽ cho phép người dùng đơn giản hóa mã ứng dụng của họ

- Bộ công cụ Redux toollkit cũng bao gồm khả năng tìm nạp và lưu trữ dữ liệu mạnh mẽ tên là "Truy vấn RTK" Nó được bao gồm trong gói như một tập hợp các điểm đầu vào riêng biệt Nó là tùy chọn, nhưng có thể loại bỏ nhu cầu tự viết tay logic tìm nạp dữ liệu

- Những công cụ này sẽ mang lại lợi ích cho tất cả người dùng Redux Cho dù bạn là người dùng Redux hoàn toàn mới đang thiết lập dự án đầu tiên của mình hay là người dùng có kinh nghiệm muốn đơn giản hóa ứng dụng hiện có, Bộ công cụ Redux có thể giúp bạn làm cho mã Redux của mình tốt hơn

- Flow hoạt động của redux toolkit

Hình 2 1 Sơ đồ hoạt động của redux toolkit

- Vì Express js chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát triển Expressjs cũng là một khuôn khổ của Node.js do đó hầu hết các mã code đã được viết sẵn cho các lập trình viên có thể làm việc

- Nhờ có Expressjs mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web, nhiều web hoặc kết hợp Do có dung lượng khá nhẹ, Expressjs giúp cho việc tổ chức các ứng dụng web thành một kiến trúc MVC có tổ chức hơn Để có thể sử dụng được mã nguồn này, chúng ta cần phải biết về Javascript và HTML

- Expressjs cũng là một phần của công nghệ giúp quản lý các ứng dụng web một cách

dễ dàng hơn hay còn được gọi là ngăn xếp phần mềm MEAN Nhờ có thư viện Javascript của Express js đã giúp cho các nhà lập trình xây dựng nên các ứng dụng web hiệu quả và nhanh chóng hơn Expressjs cũng được sử dụng để nâng cao các chức năng của Node.js

2.3.2 Nodemailer

Hình 2 3 Giao diện Nodemailer

- Nodemailer là một mô-đun cho các ứng dụng Node.js để cho phép gửi email dễ dàng

Dự án bắt đầu trở lại vào năm 2010 khi không có tùy chọn lành mạnh để gửi email, ngày nay nó là giải pháp mà hầu hết người dùng Node.js sử dụng theo mặc định

- Tính năng và đặc điểm của Nodemailer:

- Một mô-đun duy nhất không có phụ thuộc nào - mã dễ dàng kiểm tra, vì không có góc tối

- Tập trung nhiều vào bảo mật, không ai thích lỗ hổng RCE

- Hỗ trợ Unicode để sử dụng bất kỳ ký tự nào, bao gồm biểu tượng cảm xúc

- Hỗ trợ Windows - bạn có thể cài đặt nó với npm trên Windows chỉ giống như bất kỳ mô-đun nào khác, không có phần phụ thuộc đã biên dịch Sử dụng không rắc rối từ

- Sử dụng nội dung HTML, cũng như thay thế văn bản thuần túy

- Thêm tệp đính kèm vào thư

- Các tệp đính kèm hình ảnh được nhúng cho nội dung HTML - thiết kế của bạn không

- Proxy cho kết nối SMTP

- Mã ES6 - không còn tình trạng rò rỉ bộ nhớ không chủ ý, do các tài khoản kiểm tra email được tạo tự động của var được nâng cấp từ Ethereal.email

2.3.3 Sequelize connected PostgreSQL

- Sequelize là một ORM (ánh xạ quan hệ đối tượng) dựa trên hứa hẹn, Node.js dành cho Postgres, MySQL, MariaDB, SQLite và Microsoft SQL Server Nó có tính năng hỗ trợ giao dịch vững chắc, quan hệ, tải nhanh, đọc sao chép và hơn thế nữa

- Một điều tuyệt vời về Sequelize là nó không quan tâm đến cơ sở dữ liệu bên dưới của bạn Bạn có thể dễ dàng chuyển đổi cơ sở dữ liệu bằng cách điều chỉnh tệp cấu hình và

mã của bạn hầu như sẽ được giữ nguyên

Hình 2 4 Đặc điểm Sequelize

2.3.4 Mongoose

2.3.5 Cloudinary

Hình 2 6 Logo Cloudinary

- Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình

ảnh bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery

- Với cloudinary bạn có thể dễ dàng upload ảnh lên cloud, tự động thực thi các thao tác với ảnh một cách thông minh mà không cần phải cài đặt bất kì một phần mềm phức tạp nào khác Cloudinary cung cấp các APIs toàn diện và màn hình quản lý giúp chúng

ta dễ dàng tích hợp vào các trang web và ứng dụng di động

- Cloudinary cung cấp một Ruby Gem để dễ dàng cho việc tương tác với các app viết bởi ngôn ngữ Ruby với một số framwork như là Rails hay Sinatra với các tương tác chính sau:

- Xây dựng các URL để chuyển đổi và thao tác với hình ảnh

- Rails view helper cho việc nhúng và thay đổi hình ảnh

- Upload image trực tiếp từ trình duyệt sử dụng một jQuery plugin

- Tích hợp với Active Record

Hình 2 8 Cấu trúc JWT

Hình 2 9 Token JWT

Hình 2 10 Hàm kiểm tra Token

- Hàm kiểm tra token xem token có đúng hay không Nếu đúng thì sẽ thực hiện các request như thêm, sửa, xóa,…các dữ liệu quan trọng của hệ thống Nếu sai sẽ trả về lỗi

2.4 Database

2.4.1 MongoDB

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 trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc 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

2.4.2 PostgreSQL

Hình 2 12 Logo PostgreSQL

- PostgreSQL là một hệ thống cơ sở dữ liệu quan hệ đối tượng mã nguồn mở, mạnh mẽ,

sử dụng và mở rộng ngôn ngữ SQL kết hợp với nhiều tính năng giúp lưu trữ và chia tỷ

lệ một cách an toàn các khối lượng công việc dữ liệu phức tạp nhất Nguồn gốc của PostgreSQL có từ năm 1986 như một phần của dự án POSTGRES tại Đại học California ở Berkeley và đã có hơn 30 năm phát triển tích cực trên nền tảng cốt lõi

- PostgreSQL đã tạo được danh tiếng mạnh mẽ về kiến trúc đã được chứng minh, độ tin cậy, tính toàn vẹn của dữ liệu, bộ tính năng mạnh mẽ, khả năng mở rộng và sự cống hiến của cộng đồng nguồn mở đằng sau phần mềm để liên tục cung cấp các giải pháp hiệu quả và sáng tạo Không có gì ngạc nhiên khi PostgreSQL đã trở thành cơ sở dữ liệu quan hệ nguồn mở được nhiều người và tổ chức lựa chọn

- Trong đồ án hiện tại chúng em lựa chọn PostgreSQL vì đây là CSDL được nhiều sự tin tưởng từ các lập trình viên đồng thời, trong những đồ án trước chúng em đã làm qua các CSDL NON-SQL và nhận ra được sự thiếu chặc chẽ của các CSDL đó nên ở môn

phẩm, phân biệt các sản phẩm

ram, memory, gpu, cpu, name,

brand, description, weight,

origin, screenDimension,

externalOIPort, battery,

phẩm