Đồ án xây dựng website bán quần áo

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE BÁN QUẦN ÁO GV HƯỚNG DẪN: THS TRẦN THỊ HỒNG YẾN SV THỰC HIỆN: TRẦN ĐÌNH KHƠI - 20520224 BÙI MINH TUẤN - 20520342 TP HỒ CHÍ MINH, 2023 LỜI CẢM ƠN Đồ án “Xây dựng website bán quần áo online” sản phẩm mà nhóm bỏ nhiều tâm huyết để hồn thiện Bên cạnh đó, khơng thể khơng nhắc đến hỗ trợ, đóng góp từ q thầy Nhóm muốn gửi lời cảm ơn sâu sắc đến Ths.Trần Thị Hồng Yến tận tình hướng dẫn, đưa góp ý, định hướng để nhóm hồn thành đồ án Chúng em biết ơn ghi nhớ học Ngồi ra, nhóm xin gửi lời cảm ơn đến quý thầy cô trường Đại học Công nghệ Thông tin - người mang đến cho chúng em kỹ năng, kiến thức cần thiết góp phần khơng nhỏ vào q trình thực đồ án Trong q trình thực đồ án, nhóm gặp sai sót, chúng em mong nhận góp ý, hỗ trợ từ để hồn thiện đồ án đồ án tương lai TP.HCM, ngày 29 tháng 06 năm 2023 Nhóm sinh viên thực Trần Đình Khơi - Bùi Minh Tuấn MỤC LỤC TÓM TẮT ĐỒ ÁN Chương GIỚI THIỆU CHUNG 1.1 Lý chọn đề tài: .2 1.2 Mục đích: 1.3 Đối tượng: 1.4 Phạm vi nghiên cứu: .3 1.5 Hiện trạng: 1.6 Giải vấn đề: Chương CƠ SỞ LÝ THUYẾT 2.1 NextJS: .6 2.1.1 Giới thiệu: 2.1.2 Lý sử dụng: 2.2 ReactJS: 2.2.1 Giới thiệu: 2.2.2 Lý sử dụng: 10 2.3 NodeJS: 11 2.3.1 Giới thiệu: .11 2.3.2 Lý sử dụng: 12 2.4 ExpressJS: 13 2.4.1 Giới thiệu: .13 2.4.2 Lý sử dụng: 14 2.5 MongoDB: 15 2.5.1 Giới thiệu: .15 2.5.2 Lý sử dụng: 16 2.6 Socket.io: 17 2.6.1 Giới thiệu: .17 2.6.2 Lý sử dụng: 18 2.7 Redux: 19 2.7.1 Giới thiệu: .19 2.7.2 Lý sử dụng: 21 Chương THIẾT KẾ HỆ THỐNG: 22 3.1 Kiến trúc hệ thống: 22 3.1.1 Sơ đồ kiến trúc: .22 3.1.2 Mô tả hệ thống: .23 3.2 Phân tích yêu cầu: 24 3.3 Thiết kế hệ thống: 30 3.3.1 Sơ đồ use case: 30 3.3.2 Danh sách actor: 31 3.3.3 Danh sách use case: 32 3.3.4 Đặc tả Use Case: .35 3.4 Thiết kế liệu: .70 3.4.1 Sơ đồ logic: .70 3.4.2 Mô tả bảng liệu: 71 3.4.2.1 Bảng Account: 71 3.4.2.2 Bảng Customer: 71 3.4.2.3 Bảng Cart: 72 3.4.2.4 Bảng Address: 72 3.4.2.5 Bảng Category: .73 3.4.2.6 Bảng Type: .73 3.4.2.7 Bảng Order: 74 3.4.2.8 Bảng Product: 75 3.4.2.9 Bảng Promotion: 76 3.4.2.10 Bảng Receipt: 76 3.4.2.11 Bảng Role: 77 3.4.2.12 Bảng Staff: .77 3.4.2.13 Bảng ProductImage: .78 3.4.2.14 Bảng ProductSize: 78 3.4.2.15 Bảng ProductReceipt: 78 Chương TRIỂN KHAI ỨNG DỤNG 79 4.1 Danh sách hình: 79 4.2 Thiết kế hình: 82 4.2.1 Màn hình Đăng nhập: 82 4.2.2 Màn hình Quên mật khẩu: .83 4.2.3 Màn hình Khôi phục mật khẩu: .83 4.2.4 Màn hình Dashboard: 84 4.2.5 Màn hình Quản lý nhân viên: 85 4.2.6 Màn hình Quản lý khách hàng: .86 4.2.7 Màn hình Quản lý sản phẩm: 87 4.2.8 Màn hình Quản lý danh mục sản phẩm: 89 4.2.9 Màn hình Quản lý phiếu nhập kho: 90 4.2.10 Màn hình Quản lý đơn hàng: 92 4.2.11 Màn hình Quản lý mã khuyến mãi: .94 4.2.12 Màn hình Quản lý thông tin cá nhân: 95 4.2.13 Màn hình Trang chủ: .96 4.2.14 Màn hình Đăng nhập: 97 4.2.15 Màn hình Đăng ký: .98 4.2.16 Màn hình Khôi phục mật khẩu: 99 4.2.17 Màn hình Cập nhật mật mới: 99 4.2.18 Màn hình Giỏ hàng: 100 4.2.19 Màn hình Danh sách u thích: 101 4.2.20 Màn hình Thanh tốn: 102 4.2.21 Màn hình Tìm kiếm sản phẩm: 106 4.2.22 Màn hình Chi tiết sản phẩm: .107 4.2.23 Màn hình Gửi yêu cầu tư vấn: 108 4.2.24 Màn hình Quản lý thơng tin cá nhân: 109 4.2.25 Màn hình Bộ lọc sản phẩm: 112 4.2.26 Màn hình Danh sách sản phẩm theo loại: 113 4.2.27 Màn hình Chương trình khuyến mãi: 114 Chương TỔNG KẾT 115 5.1 Kết luận: .115 5.1.1 Kết đạt được: 115 5.1.2 Ưu điểm: 116 5.1.3 Nhược điểm: 117 5.2 Hướng phát triển: 117 TÀI LIỆU THAM KHẢO 118 PHỤ LỤC HÌNH Hình 2.1 Logo Next.js Hình 2.2 Logo ReactJS .9 Hình 2.3 Logo NodeJS 11 Hình 2.4 Logo ExpressJS 13 Hình 2.5 Logo MongoDB 15 Hình 2.6 Logo Socket.io 17 Hình 2.7 Logo Redux 19 Hình 2.8 Kiến trúc Redux 20 Hình 3.1 Kiến trúc hệ thống 22 Hình 3.2 Sơ đồ UseCase phía Admin .30 Hình 3.3 Sơ đồ UseCase phía Client 31 Hình 3.4 Sơ đồ logic 70 Hình 4.1 Màn hình Đăng nhập 82 Hình 4.2 Màn hình Quên mật 83 Hình 4.3 Màn hình Khơi phục mật 83 Hình 4.4 Màn hình Dashboard 84 Hình 4.5 Màn hình Danh sách nhân viên 85 Hình 4.6 Màn hình Thêm nhân viên 85 Hình 4.7 Màn hình Chỉnh sửa thơng tin nhân viên 86 Hình 4.8 Màn hình Danh sách khách hàng .86 Hình 4.9 Màn hình Thơng tin chi tiết khách hàng 87 Hình 4.10 Màn hình Quản lý sản phẩm 87 Hình 4.11 Màn hình thêm sản phẩm 88 Hình 4.12 Màn hình Chỉnh sửa thông tin sản phẩm 89 Hình 4.13 Màn hình Danh sách danh mục sản phẩm 89 Hình 4.14 Màn hình Thêm Danh mục sản phẩm 89 Hình 4.15 Màn hình Chỉnh sửa danh mục sản phẩm 90 Hình 4.16 Màn hình Danh sách phiếu nhập kho .90 Hình 4.17 Màn hình Thêm phiếu nhập kho 91 Hình 4.18 Màn hình Chỉnh sửa phiếu nhập kho .91 Hình 4.19 Màn hình Danh sách đơn hàng .92 Hình 4.20 Màn hình Cập nhật trạng thái đơn hàng 93 Hình 4.21 Màn hình Danh sách mã khuyến .94 Hình 4.22 Màn hình Thêm mã khuyến 94 Hình 4.23 Màn hình Chỉnh sửa mã khuyến .95 Hình 4.24 Màn hình quản lý thơng tin cá nhân 95 Hình 4.25 Màn hình Trang chủ 96 Hình 4.26 Màn hình Đăng nhập 97 Hình 4.27 Màn hình đăng ký 98 Hình 4.28 Màn hình Khơi phục mật 99 Hình 4.29 Màn hình Cập nhật mật 99 Hình 4.30 Màn hình Giỏ hàng .100 Hình 4.31 Màn hình Danh sách u thích .101 Hình 4.32 Màn hình Đăng nhập toán 102 Hình 4.33 Màn hình Cung cấp thơng tin đặt hàng 103 Hình 4.34 Màn hình Lựa chọn phương thức tốn ưu đãi 104 Hình 4.35 Màn hình Thanh tốn thành công 105 Hình 4.36 Màn hình Tìm kiếm sản phẩm .106 Hình 4.37 Màn hình Chi tiết sản phẩm 107 Hình 4.38 Màn hình Gửi yêu cầu tư vấn 108 Hình 4.39 Màn hình Quản lý thơng tin cá nhân 109 Hình 4.40 Màn hình Lịch sử mua hàng 110 Hình 4.41 Màn hình Địa mua hàng 110 Hình 4.42 Màn hình Ưu đãi bạn .111 Hình 4.43 Màn hình Bộ lọc sản phẩm 112 Hình 4.44 Màn hình Danh sách sản phẩm theo loại .113 Hình 4.45 Màn hình Chương trình khuyến 114 PHỤ LỤC BẢNG Bảng 3.1 Danh sách actor 31 Bảng 3.2 Danh sách Use Case 32 Bảng 3.3 Use Case Đăng nhập .35 Bảng 3.4 Use Case Quên mật 36 Bảng 3.5 Use Case Quản lý nhân viên 37 Bảng 3.6 Use Case Quản lý khách hàng 39 Bảng 3.7 Use Case Quản lý sản phẩm 40 Bảng 3.8 UseCase Quản lý danh mục sản phẩm .42 Bảng 3.9 Use Case Quản lý khuyến 44 Bảng 3.10 Use Case Quản lý đơn hàng 46 Bảng 3.11 Use Case Quản lý doanh thu 47 Bảng 3.12 Use Case Quản lý thông tin cá nhân 48 Bảng 3.13 Use Case Thay đổi mật 49 Bảng 3.14 Use Case Đăng nhập 50 Bảng 3.15 Use Case Đăng ký 51 Bảng 3.16 UseCase Quên mật 52 Bảng 3.17 Use Case Thêm sản phẩm vào giỏ hàng 54 Bảng 3.18 Use Case Thêm sản phẩm vào Danh sách yêu thích .55 Bảng 3.19 Use Case Xóa sản phẩm khỏi giỏ hàng 56 Bảng 3.20 Use Case Xóa sản phẩm khỏi Danh sách yêu thích 57 Bảng 3.21 Use Case Thanh toán .58 Bảng 3.22 Use Case Quản lý mã khuyến 60 Bảng 3.23 Use Case Tìm kiếm sản phẩm 61 Bảng 3.24 Use Case Xem danh sách sản phẩm 62 Bảng 3.25 Use Case Xem chi tiết sản phẩm .63 Bảng 3.26 Use Case Gửi yêu cầu tư vấn 64 Bảng 3.27 Use Case Quản lý thông tin cá nhân 65 Bảng 3.28 Use Case Quản lý địa giao hàng 66 - Ngoài ra, người dùng kiểm tra lại chi tiết đơn hàng - Sau điền thơng tin hệ thống kiểm tra hợp lệ, người dùng chuyển đến bước ➢ Lựa chọn phương thức tốn ưu đãi: Hình 4.34 Màn hình Lựa chọn phương thức toán ưu đãi - Người dùng áp dụng mã khuyến họ lưu trước - Trang web hỗ trợ hình thức toán Thanh toán nhận hàng Thanh toán online qua VNPay Đối với phương thức toán qua VNPay, người dùng chuyển trang tốn VNPay, có hỗ trợ nhiều hình thức toán khác VNPay cung cấp - Người dùng xuất hóa đơn cho cơng ty có nhu cầu 104 - Bên cạnh đó, trang web có hiển thị thơng tin đơn hàng để người dùng kiểm tra lại trước bấm toán ➢ Thanh tốn thành cơng: Hình 4.35 Màn hình Thanh tốn thành công - Sau đặt hàng thành công, trang web hiển thị thông báo thông tin liên quan đến trình gửi nhận hàng - Người dùng bấm trở trang chủ để tiếp tục mua hàng 105 4.2.21 Màn hình Tìm kiếm sản phẩm: Hình 4.36 Màn hình Tìm kiếm sản phẩm 106 - Để tìm kiếm sản phẩm, người dùng nhập từ khóa vào tìm kiếm bấm vào biểu tượng hình kính lúp đầu trang - Hệ thống lọc sản phẩm liên quan đến từ khóa hiển thị danh sách tương ứng lên hình - Ngồi ra, người dùng chọn từ khóa sẵn có mà khơng cần phải nhập 4.2.22 Màn hình Chi tiết sản phẩm: Hình 4.37 Màn hình Chi tiết sản phẩm 107 - Ở trang chi tiết sản phẩm, người dùng xem nhiều thơng tin sản phẩm - Bên cạnh đó, trang web có hỗ trợ chọn size giúp người dùng lựa chọn size sản phẩm phù hợp - Người dùng thay đổi size, số lượng thêm giỏ hàng thêm vào danh sách yêu thích - Bên danh sách sản phẩm liên quan mà hệ thống gợi ý cho người dùng 4.2.23 Màn hình Gửi yêu cầu tư vấn: Hình 4.38 Màn hình Gửi yêu cầu tư vấn - Người dùng bấm vào biểu tượng Messenger trang web, hình hiển thị khung chat nhỏ - Người dùng nhập câu hỏi cần giải đáp chọn từ câu hỏi sẵn có - Chatbot trả lời người dùng dựa thông tin cửa hàng hiển thị câu trả lời sau vài giây 108 4.2.24 Màn hình Quản lý thơng tin cá nhân: Hình 4.39 Màn hình Quản lý thơng tin cá nhân 109 Hình 4.40 Màn hình Lịch sử mua hàng Hình 4.41 Màn hình Địa mua hàng 110 Hình 4.42 Màn hình Ưu đãi bạn - Người dùng xem chỉnh sửa thơng tin cá nhân thân - Ngồi ra, người dùng thay đổi mật tài khoản - Sau chọn mục “Lịch sử mua hàng”, trang web hiển thị bảng chứa tất đơn hàng người dùng - Với đơn hàng, người dùng xem lại thơng tin đặt hàng danh sách sản phẩm - Sau chọn mục “Địa giao hàng”, trang web hiển thị danh sách địa giao hàng mà người dùng thêm trước - Bên cạnh đó, người dùng thêm/chỉnh sửa/xóa địa thay đổi địa mặc định - Sau chọn mục “Ưu đãi bạn”, người dùng xem danh sách mã khuyến lưu xóa mã khỏi danh sách 111 4.2.25 Màn hình Bộ lọc sản phẩm: Hình 4.43 Màn hình Bộ lọc sản phẩm - Sau người dùng bấm vào danh mục sản phẩm bất kỳ, trang web hiển thị danh sách sản phẩm tương ứng kèm với lọc - Bộ lọc bao gồm dòng sản phẩm, khoảng giá tiền, chất liệu, họa tiết Người dùng thay đổi lọc trang web hiển thị kết tương ứng - Ngoài ra, trang web cho phép xếp danh sách sản phẩm theo giá từ thấp đến cao, từ cao đến thấp theo tiêu chí bán chạy 112 4.2.26 Màn hình Danh sách sản phẩm theo loại: Hình 4.44 Màn hình Danh sách sản phẩm theo loại - Ở giao diện này, trang web hiển thị danh sách sản phẩm theo loại áo thun, quần 113 4.2.27 Màn hình Chương trình khuyến mãi: Hình 4.45 Màn hình Chương trình khuyến - Trang web hiển thị chương trình khuyến mã giảm giá áp dụng cửa hàng - Người dùng lưu lại nhiều mã giảm giá để áp dụng cho đơn hàng 114 Chương TỔNG KẾT 5.1 Kết luận: 5.1.1 Kết đạt được: - Hồn thành tất tính đề theo kế hoạch: Trong trình thực dự án, chúng em nỗ lực để hồn thành triển khai tất tính đề xuất kế hoạch ban đầu Để đảm bảo việc hoàn thành chất lượng đáp ứng u cầu, nhóm tích cực tham gia vào q trình phân tích, thiết kế, triển khai tính cách cẩn thận Chúng em đưa lựa chọn kỹ thuật chiến lược phát triển phù hợp, sử dụng công nghệ đại tiên tiến để đảm bảo tính bảo mật hiệu suất hệ thống Đồng thời, nhóm đảm bảo việc tích hợp tính vào hệ thống chung diễn cách liền mạch, tránh gây ảnh hưởng đến tính tồn - Hiểu nghiệp vụ trang web bán hàng online: Trước bắt đầu triển khai dự án, nhóm dành thời gian nghiên cứu tìm hiểu cách chi tiết nghiệp vụ trang web bán hàng online Điều bao gồm việc phân tích quy trình mua hàng, quản lý sản phẩm, tốn vận chuyển hàng hóa, xử lý đơn hàng quản lý khách hàng Chúng em tiếp cận khía cạnh nghiệp vụ để hiểu rõ yêu cầu cụ thể khách hàng doanh nghiệp, từ xác định chức cần thiết để đáp ứng nhu cầu cải thiện trải nghiệm người dùng Bằng cách làm điều này, nhóm xây dựng sở vững cho việc triển khai dự án cách hiệu đáng tin cậy - Hiểu biết thêm cơng nghệ phát triển web: Trong q trình làm việc dự án, nhóm khơng dừng lại việc áp dụng công nghệ phát triển web quen thuộc, mà tiến xa để nắm vững xu hướng cơng nghệ Nhóm tham gia vào khóa học, đọc sách 115 nghiên cứu tài liệu liên quan để cập nhật kiến thức ngơn ngữ lập trình, framework thư viện Chúng em áp dụng kiến thức vào đồ án, tận dụng sức mạnh cơng nghệ tiên tiến để tối ưu hóa hiệu suất tính bảo mật trang web Bằng cách làm việc này, nhóm đảm bảo dự án không đáp ứng yêu cầu mà cịn mở rộng phát triển tương lai - Cải thiện thêm kỹ lập trình: Trong trình thực dự án, chúng em không ngừng rèn luyện phát triển kỹ lập trình Để đảm bảo mã nguồn dự án chất lượng dễ bảo trì, nhóm trọng viết mã theo chuẩn, sử dụng cấu trúc liệu thuật toán hiệu Chúng em tận dụng hội học hỏi từ người có kinh nghiệm chia sẻ kiến thức với thành viên nhóm Từ đó, nhóm cải thiện mở rộng kiến thức lập trình mình, trở nên tự tin việc đối mặt với thách thức kỹ thuật dự án đáp ứng yêu cầu đề - Biết cách giao tiếp, phối hợp với trình làm việc nhóm: Mỗi thành viên nhận thức việc làm nhóm yếu tố quan trọng q trình thực đồ án Các thành viên chủ động tham gia vào họp nhóm, trao đổi thơng tin ý kiến để hiểu rõ phần đồ án đồng thời đưa ý kiến góp ý để cải thiện hoạt động chung Chúng em lắng nghe tôn trọng ý kiến nhau, tạo điều kiện để thành viên chia sẻ ý tưởng kiến thức Đồng thời, nhóm thể đồng lịng việc giải xung đột khó khăn q trình làm việc nhóm 5.1.2 Ưu điểm: - Hỗ trợ quy trình đặt hàng tốn rõ ràng, dễ hiểu, dễ sử dụng 116 - Cho phép toán online với VNPay với đa dạng hình thức để người dùng dễ dàng lựa chọn - Người dùng tương tác với chatbot Đây tính tích hợp với ChatGPT Khi người dùng có vấn đề cần giải đáp, họ gửi câu hỏi cho chatbot chatbot đưa câu trả lời mà không cần nhân viên cửa hàng phải kiểm tra tin nhắn - Trang web bán hàng sử dụng cơng nghệ NextJS, nâng cao mặt tối ưu máy tìm kiếm trải nghiệm người dùng - Giao diện trang web đơn giản, dễ sử dụng, tương thích nhiều thiết bị, nhiều kích thước hình Người dùng truy cập sử dụng trang web thiết bị có kết nối internet - Trang web cung cấp hình ảnh sản phẩm trực quan, bắt mắt giúp dễ kích thích nhu cầu mua hàng người dùng 5.1.3 Nhược điểm: - Cơ sở liệu host tảng Render đưa trạng thái ngủ khơng có u cầu gửi đến Nên sau khoảng thời gian truy cập lại, trang cần thời gian để đánh thức Render - Chưa có tính Theo dõi hành trình đơn hàng - Chưa hỗ trợ quản lý kiện mở bán sản phẩm cửa hàng 5.2 Hướng phát triển: - Phát triển thêm chức Theo dõi hành trình đơn hàng - Khắc phục tình trạng ngủ server để tối ưu trải nghiệm người dùng truy cập trang - Hỗ trợ chức quản lý kiện mở bán cửa hàng 117 TÀI LIỆU THAM KHẢO [1] "Chatfuel," [Online] Available: https://chatfuel.com/ [Accessed 15 2023] [2] "Ant Design," [Online] Available: https://ant.design/ [Accessed 14 2023] [3] "Material UI," [Online] Available: https://mui.com/ [Accessed 20 2023] [4] "MongoDB," [Online] Available: https://www.mongodb.com/ [Accessed 10 2023] [5] "Socket.io," [Online] Available: https://socket.io/ [Accessed 2023] [6] D Abramov, "Redux," [Online] Available: https://redux.js.org/ [Accessed 20 2023] [7] Meta, "React," [Online] Available: https://react.dev/ [Accessed 10 2023] [8] Vercel, "Next.js," [Online] Available: https://nextjs.org/ [Accessed 20 2023] [9] R Dahl, "NodeJS," [Online] Available: https://nodejs.org/en [Accessed 25 2023] [10] VNPay, "VNPAY," [Online] Available: https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/ [Accessed 2023] 118