Xây dựng website bán hàng với react expressjs và quy chuẩn jwt
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 (3.93 MB, 110 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
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 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
ngồ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 nhóm đã 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, nhóm 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 nhóm 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 tố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.
• Tích hợp được tính năng thanh tốn trực tuyến vào ứng dụng.
• Áp dụng thành cơng quy chuẩn JWT vào trong đồ án để tăng tính bảo mật
cho tồn bộ ứng dụng.
• Biết cách sử dụng Cloudinary và sử dụng API upload ảnh ở server-side để
tăng tính bảo mật.
• Website được deloy đầy đủ để có thể sử dụng.
Kế hoạch thực hiện:
Tuần
Tuần 1
(21/2 – 27/2)
Công việc
Công việc
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 thực
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ế 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
• 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
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 là
(Chủ yếu là Front-end).
• Tìm hiểu cách sử dụng
MongoDB.
Back-end).
• Tìm hiểu về cách sử dụng
database
cụ và ngơn ngữ đã chọn
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ìm
• Tạo repo github cho Client,
hiểu qua về các boilerplate cho
tìm hiểu về các boilerplate
Server.
cho Client.
• Tạo database cho project ở cả 2
database
là
MongoDB
và
• Tìm hiểu và cài đặt Redux
toolkit cho project.
PostgreSQL.
• Tìm hiểu cách kết nối Server
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 tra phân quyền Checking staff:
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ư • Hoàn thành chức năng xem
viện Axios.
Lịch sử các đơn hàng.
• Hồn thành chức năng thêm,
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 thư Thiết kế giao diện ban đầu cho
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 thư • Hồn thành chức năng Quản lí
viện Axios.
doanh thu.
• Hồn thành chức năng quản lý • Hoà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 thư • Tìm hiểu các thư viện kiểm
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 và • Hồn thành tài liệu kiểm thử
đơn hàng tại chi nhánh).
Tuần 10
(25/4 – 1/5)
(ở mức đơn giản nếu có thể)
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
thư viện Axios
• Hồn thành UI hiển thị danh
sách các sản phẩm
• Hồn thành chức năng thêm
vào gỏi hàng, đặt hàng
quyền customer:
• Viết các API liên quan
bằng thư viện Axios
• Hồn thành chức năng
thay đổi thơng tin cá nhân
• 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
(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 toá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 các
tác để tiến hành thực hiện hệ
chức năng của hệ thống, tiến
thống khuyến nghị sản phẩm
hành sủa lỗi nếu có.
bằng code Python
• Tiến hành code hệ thống
• Note các lỗi gặp phải vào tập
tài liệu System List nếu có
khuyến nghị và đưa vào trang
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
Tiến hành báo cáo
Tiến hành báo cáo
(23/5 – 29/5)
Tuần 15
(30/5 – 5/6)
Tuần 16
(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)
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 qng thời gian mà nhóm dành 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 chun mơn vào giải quyết một bài tốn mới mà
nhóm chưa từng trải nghiệm trước đó.
Trong q trình thực hiện đồ án, nhóm đã 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, nhóm 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 nhóm những ý
kiến trong suốt thời gian học tập. Đó là tài sản q báu đã giúp nhóm hồ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, nhóm 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 q trình hồn thành đồ
án này.
Thành phố Hồ Chí Minh, ngày 03 tháng 06 năm 2022
Nhóm sinh viên thực hiện
MỤC LỤC
ĐỀ CƯƠNG CHI TIẾT ............................................................................................................. 3
LỜI CẢM ƠN ............................................................................................................................ 9
MỤC LỤC ................................................................................................................................ 10
MỤC LỤC HÌNH ẢNH ........................................................................................................... 17
DANH MỤC BẢNG BIỂU ..................................................................................................... 20
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 ....................................................................................................................... 7
2.3.4. Mongoose ........................................................................................................................................................... 8
2.3.5. Cloudinary ......................................................................................................................................................... 8
2.3.6. JWT .................................................................................................................................................................... 9
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 .......................................................... 13
3.1 Sơ đồ thực thể ERD ....................................................................................................... 13
3.1.1. Bảng Product ................................................................................................................................................... 13
3.1.2. Bảng Product Image ........................................................................................................................................ 14
3.1.3. Bảng Feature.................................................................................................................................................... 14
3.1.4. Bảng Cart ......................................................................................................................................................... 14
3.1.5. Bảng Stock........................................................................................................................................................ 15
3.1.6. Bảng Branch .................................................................................................................................................... 15
3.1.7. Bảng Invoice .................................................................................................................................................... 16
3.1.8. Bảng Account ................................................................................................................................................... 16
3.1.9. Bảng Notification ............................................................................................................................................. 17
3.1.10. Bảng Comment ................................................................................................................................................. 17
3.1.11. Bảng Invoice Item ............................................................................................................................................ 18
3.1.12. Bảng Favorite .................................................................................................................................................. 18
3.1.13. Bảng Patron Discount ...................................................................................................................................... 19
3.2 Sơ đồ liên kết màn hình ................................................................................................. 20
3.3 Sơ đồ phân rã chức năng ................................................................................................ 21
3.3.1. Admin .................................................................................................................................................................. 21
3.3.2. Customer ............................................................................................................................................................. 22
3.3.3. Manager.............................................................................................................................................................. 22
3.3.4. Staff ..................................................................................................................................................................... 23
3.3.5. Guest ................................................................................................................................................................... 23
3.4. Sơ đồ Use-case ........................................................................................................... 23
3.5. Đặc tả Use-case .......................................................................................................... 25
3.4.1. Đăng nhập .......................................................................................................................................................... 25
3.4.2. Đăng ký ............................................................................................................................................................... 25
3.4.3. Quên mật khẩu .................................................................................................................................................... 27
3.4.4. Đăng xuất ........................................................................................................................................................... 27
3.4.5. Xem Hàng hóa .................................................................................................................................................... 28
3.4.6. Chỉnh sửa hàng hóa ............................................................................................................................................ 29
3.4.7. Thêm hàng hóa ................................................................................................................................................... 29
3.4.8. Xóa hàng hóa ...................................................................................................................................................... 30
3.4.9. Cập nhật thơng tin cá nhân................................................................................................................................. 31
3.4.10. Bình luận hàng hóa ........................................................................................................................................... 32
3.4.11. Thêm, sửa, xóa nhân viên ................................................................................................................................. 33
3.4.12. Xem doanh thu .................................................................................................................................................. 33
3.4.13. Tìm kiếm hàng hóa............................................................................................................................................ 34
3.4.14. Nhập hóa đơn, bán hàng trực tiếp tại chi nhánh .............................................................................................. 35
3.4.15. Duyệt và kiểm tra thanh toán của đơn hàng online .......................................................................................... 36
3.4.16. Phân tích dữ liệu hàng hóa ............................................................................................................................... 37
3.4.17. In hóa đơn ......................................................................................................................................................... 37
3.4.18. Thêm hàng hóa vào giỏ hàng, u thích ........................................................................................................... 38
3.4.19. Đưa hàng hóa từ u thích sang giỏ hàng ........................................................................................................ 39
3.4.20. Cập nhật số lượng hay xóa hàng hóa từ giỏ hàng ............................................................................................ 39
3.4.21. Thanh toán ........................................................................................................................................................ 40
3.5. Sơ đồ kiến trúc hệ thống ............................................................................................... 41
3.6. Sơ đồ DFD .................................................................................................................... 42
3.6.1. Đăng nhập .......................................................................................................................................................... 42
3.6.2. Đăng ký ............................................................................................................................................................... 42
3.6.3. Cập nhật thông tin cá nhân................................................................................................................................. 43
3.6.4. Bình luận sản phẩm ............................................................................................................................................ 43
3.6.5. Thanh tốn hóa đơn ............................................................................................................................................ 44
3.6.6. Xem chi tiết hàng hóa ......................................................................................................................................... 44
3.6.7. Thêm vào giỏ hàng.............................................................................................................................................. 45
3.6.8. Thêm vào u thích ............................................................................................................................................. 45
3.6.9. Tăng giảm số lượng hàng hóa ............................................................................................................................ 46
3.6.10. Check hóa đơn .................................................................................................................................................. 46
3.6.11. Kiểm tra hóa đơn đã hồn thành ...................................................................................................................... 47
3.6.12. Thêm hóa hàng ................................................................................................................................................. 47
3.6.13. Cập nhật hàng hóa............................................................................................................................................ 48
3.6.14. Xóa hàng hóa .................................................................................................................................................... 48
3.6.15. Thêm nhân viên ................................................................................................................................................. 49
3.6.16. Đổi mật khẩu..................................................................................................................................................... 49
3.7. Giải pháp ....................................................................................................................... 49
Chương 4: XÂY DỰNG WEBSITE ....................................................................................... 50
4.1. Home page: ................................................................................................................. 50
4.1.1. Giao diện: ........................................................................................................................................................ 50
4.1.2. Mô tả: ............................................................................................................................................................... 50
4.2. Sign In Page ................................................................................................................ 51
4.2.1. Giao diện .......................................................................................................................................................... 51
4.2.2. Mô tả ................................................................................................................................................................ 51
4.3. Sign Up Page .............................................................................................................. 52
4.3.1. Giao diện .......................................................................................................................................................... 52
4.3.2. Mô tả ................................................................................................................................................................ 52
4.4. Guest Cart Page .......................................................................................................... 53
4.4.1. Giao diện .......................................................................................................................................................... 53
4.4.2. Mô tả ................................................................................................................................................................ 53
4.5. Display Product Page ................................................................................................. 54
4.5.1. Giao diện .......................................................................................................................................................... 54
4.5.2. Mô tả ................................................................................................................................................................ 55
4.6. Detail Product Page .................................................................................................... 56
4.6.1. Giao diện .......................................................................................................................................................... 56
4.6.2. Mô tả ................................................................................................................................................................ 57
4.7. Product Manager Page ................................................................................................ 58
4.7.1. Giao diện .......................................................................................................................................................... 58
4.7.2. Mô tả ................................................................................................................................................................ 58
4.8. Staff Manager Page .................................................................................................... 59
4.8.1. Giao diện .......................................................................................................................................................... 59
4.8.2. Mô tả ................................................................................................................................................................ 59
4.9. Add Product Page ....................................................................................................... 60
4.9.1. Giao diện .......................................................................................................................................................... 60
4.9.2. Mô tả ................................................................................................................................................................ 61
4.10. Edit Product Page ....................................................................................................... 62
4.10.1. Giao diện .......................................................................................................................................................... 62
4.10.2. Mô tả ................................................................................................................................................................ 63
4.11. Drawer ........................................................................................................................ 64
4.11.1. Giao diện .......................................................................................................................................................... 64
4.11.2. Mô tả ................................................................................................................................................................ 64
4.12. Stock Manager Page ................................................................................................... 65
4.12.1. Giao diện .......................................................................................................................................................... 65
4.12.2. Mô tả ................................................................................................................................................................ 65
4.13. Add Stock Modal ........................................................................................................ 66
4.13.1. Giao diện: ........................................................................................................................................................ 66
4.13.2. Mô tả: ............................................................................................................................................................... 67
4.14. Revenue Page ............................................................................................................. 67
4.14.1. Giao diện .......................................................................................................................................................... 67
4.14.2. Mô tả ................................................................................................................................................................ 67
4.15. Data Analysis Page ..................................................................................................... 68
4.15.1. Giao diện .......................................................................................................................................................... 68
4.15.2. Mô tả ................................................................................................................................................................ 69
4.16. Detail Product Modal ................................................................................................. 69
4.16.1. Giao diện .......................................................................................................................................................... 69
4.16.2. Mô tả ................................................................................................................................................................ 70
4.17. Add Manager Page ..................................................................................................... 70
4.17.1. Giao diện .......................................................................................................................................................... 70
4.17.2. Mô tả ................................................................................................................................................................ 70
4.18. My Place Page ............................................................................................................ 71
4.18.1. Giao diện .......................................................................................................................................................... 71
4.18.2. Mô tả ................................................................................................................................................................ 72
4.19. My Cart Page .............................................................................................................. 73
4.19.1. Giao diện .......................................................................................................................................................... 73
4.19.2. Mô tả ................................................................................................................................................................ 73
4.20. My Order Page ........................................................................................................... 74
4.20.1. Giao diện .......................................................................................................................................................... 74
4.20.2. Mô tả ................................................................................................................................................................ 75
4.21. My Favorite Page ....................................................................................................... 76
4.21.1. Giao diện .......................................................................................................................................................... 76
4.21.2. Mô tả ................................................................................................................................................................ 77
4.22. Pre-Access To Profile Page ........................................................................................ 78
4.22.1. Giao diện .......................................................................................................................................................... 78
4.22.2. Mô tả ................................................................................................................................................................ 79
4.23. Profile Page ................................................................................................................ 80
4.23.1. Giao diện .......................................................................................................................................................... 80
4.23.2. Mô tả ................................................................................................................................................................ 80
4.24. Checkout Now Page ................................................................................................... 81
4.24.1. Giao diện .......................................................................................................................................................... 81
4.24.2. Mô tả ................................................................................................................................................................ 82
4.25. Payment Page ............................................................................................................. 83
4.25.1. Giao diện .......................................................................................................................................................... 83
4.25.2. Mô tả ................................................................................................................................................................ 83
Chương 5: KẾT LUẬN ........................................................................................................... 84
5.1. Ưu điểm của đồ án: ..................................................................................................... 84
5.1.1. Về giao diện ..................................................................................................................................................... 84
5.1.2. Về chức năng (khả năng ứng dụng thực tế)...................................................................................................... 84
5.2. Hạn chế của đồ án: ..................................................................................................... 84
5.3. Hướng phát triển của đồ án: ....................................................................................... 85
TÀI LIỆU THAM KHẢO........................................................................................................ 86
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 ............................................................................................................................................. 8
Hình 2. 6 Logo Cloudinary ........................................................................................................................................... 9
Hình 2. 7 Chuẩn JWT ..................................................................................................................................................... 9
Hình 2. 8 Cấu trúc JWT ............................................................................................................................................... 10
Hình 2. 9 Token JWT.................................................................................................................................................... 10
Hình 2. 10 Hàm kiểm tra Token ................................................................................................................................ 11
Hình 2. 11 Logo MongoDB ........................................................................................................................................ 11
Hình 2. 12 Logo PostgreSQL ..................................................................................................................................... 12
Hình 3. 1 Sơ đồ thực thể ERD .................................................................................................................................... 13
Hình 3. 2 Sơ đồ liên kết màn hình............................................................................................................................. 21
Hình 3. 3 Phân rã chức năng của Admin ................................................................................................................. 21
Hình 3. 4 Phân rã chức năng của Customer ........................................................................................................... 22
Hình 3. 5 Phân rã chức năng của Manager ............................................................................................................. 22
Hình 3. 6 Phân rã chức năng của Staff..................................................................................................................... 23
Hình 3. 7 Phân rã chức năng của Guest ................................................................................................................... 23
Hình 3. 8 Sơ đồ use-case chi tiết ............................................................................................................................... 25
Hình 3. 9 DFD Đăng nhập ........................................................................................................................................... 42
Hình 3. 10 DFD Đăng ký tài khoản .......................................................................................................................... 42
Hình 3. 11 DFD Cập nhật thơng tin cá nhân .......................................................................................................... 43
Hình 3. 12 DFD Bình luận sản phẩm ....................................................................................................................... 43
Hình 3. 13 DFD Than tốn hóa đơn ......................................................................................................................... 44
Hình 3. 14 DFD Xem chi tiết hàng hóa ................................................................................................................... 44
Hình 3. 15 DFD Thêm vào giỏ hàng ........................................................................................................................ 45
Hình 3. 16 DFD Thêm vào danh sách hàng hóa yêu thích................................................................................. 45
Hình 3. 17 DFD Tăng giảm số lượng hàng hóa .................................................................................................... 46
Hình 3. 18 DFD Check hóa đơn ................................................................................................................................ 46
Hình 3. 19 DFD Kiểm tra hóa đơn đã hồn thành thanh thốn và giao hàng ............................................... 47
Hình 3. 20 DFD Thêm hàng hóa ............................................................................................................................... 47
Hình 3. 21 DFD Cập nhật hàng hóa ......................................................................................................................... 48
Hình 3. 22 DFD Xóa hàng hóa................................................................................................................................... 48
Hình 3. 23 DFD Thêm nhân viên .............................................................................................................................. 49
Hình 3. 24 DFD Đổi mật khẩu ................................................................................................................................... 49
Hình 4. 1 Giao diện Home Page ...........................................................................................................50
Hình 4. 2 Giao diện Sign In Page .........................................................................................................51
Hình 4. 3 Giao diện Sign Up Page........................................................................................................52
Hình 4. 4 Giao diện Guest Cart Page....................................................................................................53
Hình 4. 5 Giao diện Display Product Page ...........................................................................................55
Hình 4. 6 Giao diện Detail Product Page..............................................................................................57
Hình 4. 7 Giao diện Product Manager Page .........................................................................................58
Hình 4. 8 Giao diện Staff Manager Page ..............................................................................................59
Hình 4. 9 Giao diện Add Product Page ................................................................................................61
Hình 4. 10 Giao diện Edit Product Page ...............................................................................................63
Hình 4. 11 Giao diện Drawer................................................................................................................64
Hình 4. 12 Hiao diện Stock Manager Page ..........................................................................................65
Hình 4. 13 Giao diện Add Stock Modal ...............................................................................................66
Hình 4. 14 Giao diện Revenue Page .....................................................................................................67
Hình 4. 15 Giao diện Data Analysis Page ............................................................................................68
Hình 4. 16 Giao diện Detail Product Modal .........................................................................................69
Hình 4. 17 Giao diện Add Manager Page .............................................................................................70
Hình 4. 18 Giao diện My Place Page....................................................................................................72
Hình 4. 19 Giao diện My Cart Page .....................................................................................................73
Hình 4. 20 Giao diện My Order Page ...................................................................................................75
Hình 4. 21 Giao diện My Favorite Page ...............................................................................................76
Hình 4. 22 Giao diện Pre-Access To Profile Page ...............................................................................78
Hình 4. 23 Giao diện Profile Page ........................................................................................................80
Hình 4. 24 Giao diện Checkout Now Page ...........................................................................................82
Hình 4. 25 Giao diện Payment Page .....................................................................................................83
DANH MỤC BẢNG BIỂU
Bảng 3. 1 Bảng mô tả Product ..............................................................................................................13
Bảng 3. 2 Bảng mô tả Image ................................................................................................................14
Bảng 3. 3 Bảng mô tả Feature ..............................................................................................................14
Bảng 3. 4 Bảng mô tả Cart ...................................................................................................................14
Bảng 3. 5 Bảng mô tả Stock .................................................................................................................15
Bảng 3. 6 Bảng mô tả Branch ...............................................................................................................15
Bảng 3. 7 Bảng mô tả Invoice ..............................................................................................................16
Bảng 3. 8 Bảng mô tả Account .............................................................................................................16
Bảng 3. 9 Bảng mô tả Notification .......................................................................................................17
Bảng 3. 10 Bảng mô tả Comment.........................................................................................................17
Bảng 3. 11 Bảng mô tả Invoice Item ....................................................................................................18
Bảng 3. 12 Bảng mô tả Favorite ...........................................................................................................18
Bảng 3. 13 Bảng mô tả Patron Discount .............................................................................................19
Bảng 3. 14 Đặc tả Đăng nhập ...............................................................................................................25
Bảng 3. 15 Đặc tả Đăng kí ....................................................................................................................25
Bảng 3. 16 Đặc tả Quên mật khẩu ........................................................................................................27
Bảng 3. 17 Đặc tả Đăng xuất ...............................................................................................................27
Bảng 3. 18 Đặc tả Xem hàng hóa .........................................................................................................28
Bảng 3. 19 Đặc tả Chỉnh sửa hàng hóa .................................................................................................29
Bảng 3. 20 Đặc tả Thêm hàng hóa........................................................................................................29
Bảng 3. 21 Đặc tả Xóa hàng hóa .........................................................................................................30
Bảng 3. 22 Đặc tả Cập nhật thông tin ...................................................................................................31
Bảng 3. 23 Đặc tả Bình luận hàng hóa .................................................................................................32
Bảng 3. 24 Đặc tả Thêm, sửa, xóa nhân viên .......................................................................................33
Bảng 3. 25 Đặc tả Xem doanh thu ........................................................................................................33
Bảng 3. 26 Đặc tả Tìm kiếm hàng hóa .................................................................................................34
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 ..............................................35
Bảng 3. 28 Đặc tả Duyệt và kiểm tra thanh toán của đơn hàng ...........................................................36
Bảng 3. 29 Đặc tả Phân tích dữ liệu hàng hóa .....................................................................................37
Bảng 3. 30 Đặc tả In hóa đơn ..............................................................................................................37
Bảng 3. 31 Đặc tả Thêm hàng hóa vào giỏ hàng và yêu thích ............................................................38
Bảng 3. 32 Đặc tả Đưa hàng hóa từ u thích sang giỏ hàng ...............................................................39
Bảng 3. 33 Đặc tả Cập nhật số lượng hay xóa hàng hóa từ giỏ hàng ...................................................39
Bảng 3. 34 Đặc tả Thanh tốn ..............................................................................................................40
Bảng 4. 1 Mơ tả giao diện Home Page .................................................................................................50
Bảng 4. 2 Mô tả giao diện Sign in Page ...............................................................................................51
Bảng 4. 3 Mô tả giao diện Sign Up Page..............................................................................................52
Bảng 4. 4 Mô tả giao diện Guest Cart Page..........................................................................................54
Bảng 4. 5 Mô tả giao diện Display Product Page .................................................................................55
Bảng 4. 6 Mô tả giao diện Detail Product Page....................................................................................57
Bảng 4. 7 Mô tả giao diện Product Manager Page ...............................................................................58
Bảng 4. 8 Mô tả giao diện Staff Manager Page ....................................................................................60
Bảng 4. 9 Mô tả giao diện Add Product Page ......................................................................................61
Bảng 4. 10 Mô tả giao diện Drawer......................................................................................................64
Bảng 4. 11 Mô tả giao diện Stock Manager Page ................................................................................65
Bảng 4. 12 Mô tả giao diện Add Stock Modal .....................................................................................67
Bảng 4. 13 Mô tả giao diện Revenue Page ...........................................................................................68
Bảng 4. 14 Mô tả giao diện Data Analysis Page ..................................................................................69
Bảng 4. 15 Mô tả giao diện Detail Product Modal ...............................................................................70
Bảng 4. 16 Mô tả giao diện Add Manager Page ...................................................................................71
Bảng 4. 17 Mô tả giao diện My Place Page..........................................................................................72
Bảng 4. 18 Mô tả giao diện My Cart Page ...........................................................................................73
Bảng 4. 19 Mô tả giao diện My Order Page .........................................................................................75
Bảng 4. 20 Mô tả giao diện My Favorite Page .....................................................................................77
Bảng 4. 21 Mô tả giao diện Pre-Access to Profile Page .......................................................................79
Bảng 4. 22 Mô tả giao diện Profile Page ..............................................................................................80
Bảng 4. 23 Mô tả giao diện Checkout Now Page .................................................................................82
Bảng 4. 24 Mô tả giao diện Payment Page ...........................................................................................83
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
......................................................................................................................................................
Tp.HCM, ngày … tháng 6 năm 2022
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: />
-
Link repo Server: />
-
Website:
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ư 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
1
