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)
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.51 MB, 163 trang )
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
Báo cáo đồ án 1
XÂY DỰNG WEBSITE BÁN HÀNG VỚI
REACT-EXPRESSJS VÀ QUY CHUẨN JWT
Giảng viên hướng dẫn :
ThS. Trần Thị Hồng Yến
Sinh viên thực hiện 1 :
Phạm Võ Di Thiên
Mã sinh viên 1
19522267
:
Sinh viên thực hiện 2 :
Vòng Minh Huỳnh
Mã sinh viên 2
:
19521652
Lớp
:
SE121.M21
TP HCM, tháng 06 năm 2022
ĐỀ 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 ln 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 tố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 tố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
Phạm vi môi trường:
Triển khai sản phẩm đề tài trên mơi trường web.
Phạm vi chức năng:
• Quản lý danh mục, sản phẩm
• Quản lý khách hàng, nhân viên, tài khoản cá nhân
• 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 hồ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:
Tuần
Công việc
Công việc
Tuần 1
(21/2 – 27/2)
thành viên 1 (Thiên)
thành viên 2 (Huỳnh)
• Publish, thu thập, tổng hợp kết
• Tạo form và câu hỏi khảo
sát về nhu cầu và tình trạng
quả khảo sát.
• Quan sát, phân tích các website
tương tự hiện có trên thị
(28/2 – 6/3)
chức năng của website mua
bán hàng trực tuyến
trường.
Tuần 2
thực tế sử dụng, khảo sát về
• Phân tích đề tài, xây dụng thiết
• Phân thích đề tài, xây dựng
kế UI, database, các chức năng
thiết kế UI, database, chốt
của ứng dụng
các chức năng website
• Lên timeline cho dự án
• Tạo timeline cho dự án
• Tìm hiểu Template cho báo cáo
• Tham khảo mẫu, template
các tài liệu báo cáo đồ án
cuối kì
• Tìm hiểu các thư viện kiểm thử
• Vẽ sơ đồ database cơ bản
• Tìm hiểu các thuật tốn cho hệ
• Tìm hiểu cơng nghệ, cơng
cụ và ngơn ngữ đã chọn
thống khuyến nghị sản phẩm
• Tìm hiểu cơng nghệ, cơng cụ
và ngơn ngữ đã chọn (Chủ yếu
• Tìm hiểu cách sử dụng
MongoDB
là Back-end)
• Tìm hiểu về cách sử dụng
database
(Chủ yếu là Front-end)
PostgreSQL
và
• Tìm hiểu giải pháp thanh
tốn trực tuyến
MongoDB
Tuần 3
(7/3 – 13/3)
• Tạo repo github cho Server,
• Tạo repo github cho Client,
tìm hiểu qua về các boilerplate
tìm hiểu về các boilerplate
cho Server.
cho Client,
• Tạo database cho project ở cả 2
database
là
MongoDB
và
PostgreSQL
• Tìm hiểu cách kết nối Server
• 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 – • Học sử dụng thư viện MUI
PostgreSQL, tạo các Model cho • Tìm hiểu GoogleAPI/Nodejs
các entries
• Tìm hiểu JWT
• Tìm
hiểu
thư
viện
ảnh
Cloudianry để lưu các assets
Tuần 5
(21/3 – 27/3)
• Cài đặt JWT phía Server Hồn thành chức năng:
(getAccessToken,
• Đăng kí, đăng nhập
refreshToken,
• Xác
lưu
trữ
removeToken),
Token
bên
dưới
MongoDB
• Deloy Database PostgreSQL
lên Heroku
thực
gmail
bằng
GoogleAPI/Nodejs
• Tìm hiểu đăng nhập qua
(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
• Kiểm tra tính đúng đắn của các Thiết kế giao diện ban đầu cho
(28/3 – 3/4)
Token gửi từ Server và kiểm phân quyền Checking staff:
tra Client có thực hiện lấy lại • Viết các API liên quan bằng
refreshToken khi Token hết
thư viện Axios
hạn
• Hồn thành chức năng Quản
• Thiết kế giao diện ban đầu cho
lý các đơn hàng
phân quyền Admin:
• Viết các API liên quan bằng
thư viện Axios
• Hồn thành chức năng thêm,
• Hồn thành chức năng xem
Lịch sử các đơn hàng
sửa, xóa sản phẩm
Tuần 7
(4/4 – 10/4)
• Viết các API liên quan bằng Thiết kế giao diện ban đầu cho
thư viện Axios
phân quyền Manager tại chi
• Hồn thành chức năng thêm, nhánh:
sửa, xóa nhân viên
• Viết các API liên quan bằng
thư viện Axios
• Hồn thành chức năng Quản
lý kho tại chi nhánh
Tuần 8
(11/4 – 17/4)
• Viết các API liên quan bằng • Hồn thành chức năng Quản
thư viện Axios
lí doanh thu
• Hồn thành chức năng quản lý • Hồn thành chức năng Quản
kho hệ thống, phân phối sản
lý lịch sử mua hàng tại chi
phẩm
nhánh
• Hồn thành quản lý doanh thu • Chức năng xuất Bill (nếu có
tồn hệ thống
thể) (Hiển thị hóa đơn của
cửa hàng)
Tuần 9
(18/4 – 24/4)
• Viết các API liên quan bằng • Tìm hiểu các thư viện kiểm
thư viện Axios
thử
• Hồn thành chức năng quản lý • Tiến hành kiểm thử các hàm
lịch sử đơn hàng toàn hệ thống
Validate của hệ thống
( bao gồm đơn hàng đặt từ web • Hồn thành tài liệu kiểm thử
và đơn hàng tại chi nhánh)
(ở mức đơn giản nếu có thể)
Tuần 10
(25/4 – 1/5)
Thiết kế giao diện cho phân quyền Thiết kế giao diện cho phân
customer:
• Viết các API liên quan bằng
quyền customer:
• Viết các API liên quan
thư viện Axios
• Hồn thành UI hiển thị danh
bằng thư viện Axios
• Hồn thành chức năng
sách các sản phẩm
• Hồn thành chức năng thêm
thay đổi thơng tin cá nhân
• Thiết
vào gỏi hàng, đặt hàng
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
(2/5 – 8/5)
Hồn thành chức năng bình luận Tiến hành tìm hiểu phương thức
cho các sản phẩm
thanh tốn trực tuyến bằng
Paypal được hỗ trợ bởi Nodejs
và áp dụng vào hệ thống
Tuần 12
(9/5 – 15/5)
• Tìm hiểu thuật tốn Lọc cộng
• Tiến hành test qua hết lại
tác để tiến hành thực hiện hệ
các chức năng của hệ thống,
thống khuyến nghị sản phẩm
tiến hành sủa lỗi nếu có.
bằng code Python
• Tiến hành code hệ thống
khuyến nghị và đưa vào trang
• Note các lỗi gặp phải vào
tập tài liệu System List nếu
có
web để hỗ trợ khách hàng
Tuần 13
• Deloy Server bằng Heroku
(16/5 – 22/5)
• Deloy Client bằng Vercel
• Hồ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
Vẽ sơ đồ cho báo cáo
Vẽ sơ đồ cho báo cáo
Hoàn thành tài liệu báo cáo
Chuẩn bị slide thuyết trình
(23/5 – 29/5)
Tuần 15
(30/5 – 5/6)
Tuần 16
Tiến hành báo cáo
Tiến hành báo cáo
(5/6 – 10/6)
TP. HCM, ngày 7 tháng 3 năm 2022
Xác nhận của CBHD
(Ký tên và ghi rõ họ tên)
Trần Thị Hồng Yến
Sinh viên
Sinh viên
(Ký tên và ghi rõ họ
(Ký tên và ghi rõ họ
tên)
tên)
Thiên
Huynh
Phạm Võ Di Thiên
Vòng Minh Huỳnh
LỜI CẢM ƠN
Đồ án ‘XÂY DỰNG WEBSITE BÁN HÀNG VỚI REACT-EXPRESSJS VÀ QUY
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 q trình thực hiện đồ án, em đã nhận được sự hướng dẫn tận tình từ q
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 đã ln 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è đã
ln bên cạnh để động viên và đóng góp ý kiến trong quá trình hồn thành đồ
án này.
Thành phố Hồ Chí Minh, ngày 03 tháng 06 năm 2022
Sinh viên 1
Sinh viên 2
Phạm Võ Di Thiên
Vòng Minh Huỳnh
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ừ 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 tố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 tố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 đã hồ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 tố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 đã hồn thành thanh thố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 qt tồ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 ...........................................................................................................99
Hình 5. 2 Giao diện Sign In Page .......................................................................................................100
Hình 5. 3 Giao diện Sign Up Page......................................................................................................101
Hình 5. 4 Giao diện Guest Cart Page..................................................................................................102
Hình 5. 5 Giao diện Display Product Page .........................................................................................104
Hình 5. 6 Giao diện Detail Product Page............................................................................................106
Hình 5. 7 Giao diện Product Manager Page .......................................................................................107
Hình 5. 8 Giao diện Staff Manager Page ............................................................................................108
Hình 5. 9 Giao diện Add Product Page ..............................................................................................110
Hình 5. 10 Giao diện Edit Product Page .............................................................................................112
Hình 5. 11 Giao diện Drawer..............................................................................................................113
Hình 5. 12 Hiao diện Stock Manager Page ........................................................................................114
Hình 5. 13 Giao diện Add Stock Modal .............................................................................................116
Hình 5. 14 Giao diện Revenue Page ...................................................................................................117
Hình 5. 15 Giao diện Data Analysis Page ..........................................................................................118
Hình 5. 16 Giao diện Detail Product Modal .......................................................................................119
Hình 5. 17 Giao diện Add Manager Page ...........................................................................................120
Hình 5. 18 Giao diện My Place Page..................................................................................................121
Hình 5. 19 Giao diện My Cart Page ...................................................................................................123
Hình 5. 20 Giao diện My Order Page .................................................................................................124
Hình 5. 21 Giao diện My Favorite Page .............................................................................................126
Hình 5. 22 Giao diện Pre-Access To Profile Page .............................................................................128
Hình 5. 23 Giao diện Profile Page ......................................................................................................129
Hình 5. 24 Giao diện Checkout Now Page .........................................................................................131
Hì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 ..............................................................................................................14
Bảng 3. 2 Bảng mô tả Image ................................................................................................................15
Bảng 3. 3 Bảng mô tả Feature ..............................................................................................................15
Bảng 3. 4 Bảng mô tả Cart ...................................................................................................................15
Bảng 3. 5 Bảng mô tả Stock .................................................................................................................16
Bảng 3. 6 Bảng mô tả Branch ...............................................................................................................16
Bảng 3. 7 Bảng mô tả Invoice ..............................................................................................................17
Bảng 3. 8 Bảng mô tả Account .............................................................................................................17
Bảng 3. 9 Bảng mô tả Notification .......................................................................................................18
Bảng 3. 10 Bảng mô tả Comment.........................................................................................................18
Bảng 3. 11 Bảng mô tả Invoice Item ....................................................................................................19
Bảng 3. 12 Bảng mô tả Favorite ...........................................................................................................19
Bảng 3. 13 Bảng mô tả Patron Discount .............................................................................................20
Bảng 3. 14 Đặc tả Đăng nhập ...............................................................................................................27
Bảng 3. 15 Đặc tả Đăng kí ....................................................................................................................28
Bảng 3. 16 Đặc tả Quên mật khẩu ........................................................................................................29
Bảng 3. 17 Đặc tả Đăng xuất ...............................................................................................................30
Bảng 3. 18 Đặc tả Xem hàng hóa .........................................................................................................31
Bảng 3. 19 Đặc tả Chỉnh sửa hàng hóa .................................................................................................31
Bảng 3. 20 Đặc tả Thêm hàng hóa........................................................................................................32
Bảng 3. 21 Đặc tả Xóa hàng hóa .........................................................................................................33
Bảng 3. 22 Đặc tả Cập nhật thông tin ...................................................................................................34
Bảng 3. 23 Đặc tả Bình luận hàng hóa .................................................................................................35
Bảng 3. 24 Đặc tả Thêm, sửa, xóa nhân viên .......................................................................................36
Bảng 3. 25 Đặc tả Xem doanh thu ........................................................................................................37
Bảng 3. 26 Đặc tả Tìm kiếm hàng hóa .................................................................................................38
Bả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 ..............................................39
Bảng 3. 28 Đặc tả Duyệt và kiểm tra thanh toán của đơn hàng ...........................................................39
Bảng 3. 29 Đặc tả Phân tích dữ liệu hàng hóa .....................................................................................40
Bảng 3. 30 Đặc tả In hóa đơn ..............................................................................................................41
Bảng 3. 31 Đặc tả Thêm hàng hóa vào giỏ hàng và yêu thích ............................................................42
Bảng 3. 32 Đặc tả Đưa hàng hóa từ 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 ...................................................44
Bảng 3. 34 Đặc tả Thanh tốn ..............................................................................................................44
Bảng 5. 1 Mơ tả giao diện Home Page .................................................................................................99
Bảng 5. 2 Mô tả giao diện Sign In Page .............................................................................................100
Bảng 5. 3 Mô tả giao diện Sign Up Page............................................................................................101
Bảng 5. 4 Mô tả giao diện Guest Cart Page........................................................................................103
Bảng 5. 5 Mô tả giao diện Display Product Page ...............................................................................104
Bảng 5. 6 Mô tả giao diện Detail Product Page..................................................................................106
Bảng 5. 7 Mô tả giao diện Product Manager Page .............................................................................107
Bảng 5. 8 Mô tả giao diện Staff Manager Page ..................................................................................109
Bảng 5. 9 Mô tả giao diện Add Product Page ....................................................................................110
Bảng 5. 10 Mô tả giao diện Drawer....................................................................................................113
Bảng 5. 11 Mô tả giao diện Stock Manager Page ..............................................................................114
Bảng 5. 12 Mô tả giao diện Add Stock Modal ...................................................................................116
Bảng 5. 13 Mô tả giao diện Revenue Page .........................................................................................117
Bảng 5. 14 Mô tả giao diện Data Analysis Page ................................................................................118
Bảng 5. 15 Mô tả giao diện Detail Product Modal .............................................................................119
Bảng 5. 16 Mô tả giao diện Add Manager Page .................................................................................120
Bảng 5. 17 Mô tả giao diện My Place Page........................................................................................121
Bảng 5. 18 Mô tả giao diện My Cart Page .........................................................................................123
Bảng 5. 19 Mô tả giao diện My Order Page .......................................................................................125
Bảng 5. 20 Mô tả giao diện My Favorite Page ..................................................................................126
Bảng 5. 21 Mô tả giao diện Pre-Access To Profile Page ...................................................................128
Bảng 5. 22 Mô tả giao diện Profile Page ...........................................................................................129
Bảng 5. 23 Mô tả giao diện Checkout Now Page ...............................................................................131
Bảng 5. 24 Mô tả giao diện Payment Page ........................................................................................132
