Website thương mại điện tử chuyên mua bán giày

Trang TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN Đề tài: WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHUYÊN MUA BÁN GIÀY Giảng viên hướng dẫn : Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Đức Chí Đạt 19521334 Nguyễn Ngọc Phúc 19520224 TP Hồ Chí Minh, tháng năm 2022 Trang TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN Đề tài: WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHUYÊN MUA BÁN GIÀY Giảng viên hướng dẫn : Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Đức Chí Đạt 19521334 Nguyễn Ngọc Phúc 19520224 TP Hồ Chí Minh, tháng năm 2022 Trang Lời mở đầu Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công Nghệ Phần Mềm giúp cho nhóm chúng em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm chúng em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới Thầy Huỳnh Tuấn Anh Đã giúp nhóm chúng em hồn thành tốt báo cáo mơn học Trong thời gian học đề tài, nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, nhóm chúng em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, nhóm chúng em khơng tránh khỏi thiếu sót Chính vậy, nhóm chúng em mong nhận góp ý từ phía Thầy Cơ nhằm hồn thiện kiến thức mà nhóm chúng em học tập hành trang để nhóm chúng em thực tiếp đề tài khác tương lai Nhóm em xin chân thành cảm ơn quý Thầy Cô! Trang NHẬN XÉT CỦA GIẢNG VIÊN ……………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Trang Mục lục Danh mục hình ảnh 10 Danh mục bảng biểu 12 Chương I 16 Tổng quan Lý chọn đề tài 16 Mục tiêu 17 Phạm vi 17 Người dùng 18 Phương pháp nghiên cứu 18 Chương II Cơ sở lý thuyết & Tổng quan công nghệ 19 Giới thiệu React JS 19 Giới thiệu MongoDB 21 2.1 Các đặc điểm MongoDB 21 2.2 Ưu nhược điểm MongoDB 22 2.2.1 Ưu điểm 22 2.2.2 Nhược điểm 24 Kiến trúc hệ thống 3.1 Kiến trúc hệ thống 25 3.2 Mơ hình kiến trúc hệ thống 25 Mô tả chi tiết thành phần hệ thống Chương III 25 Phân tích thiết kế ứng dụng Yêu cầu nghiệp vụ 26 27 27 Trang 1.1 Danh sách yêu cầu nghiệp vụ 27 1.2 Nhập sản phẩm 28 1.2.1 1.3 1.3.1 Biểu mẫu Lập hóa đơn bán hàng Biểu mẫu Use case 2.1 28 28 28 29 Mơ hình Use Case 29 2.1.1 Use case tổng quát 29 2.1.2 Use case quản lý sản phẩm 30 2.1.3 Use case đăng nhập 30 2.1.4 Use case quản lý khách hàng 31 2.1.5 Use case quản lý đơn hàng 31 2.1.6 Use case quản lý doanh thu 32 2.1.7 Use case mua hàng 32 2.1.8 Use case bán hàng 33 2.1.9 Use case quản lý tài khoản 33 2.2 Danh sách Actor 34 2.3 Danh sách Use case 35 2.3.1 Danh sách 35 2.3.2 Đăng nhập admin 35 2.3.3 Đăng nhập customer 37 2.3.4 Quản lý sản phẩm 38 2.3.5 Thêm thông tin 40 2.3.6 Sửa thơng tin 42 2.3.7 Xóa thơng tin 43 2.3.8 Tìm kiếm thơng tin 45 2.3.9 Báo cáo doanh thu 46 2.3.10 Quản lý khách hàng 47 Trang 2.3.10.1 Thêm khách hàng 47 2.3.10.2 Cập nhật thông tin khách hàng 49 2.3.11 52 2.3.11.2 Đổi mật 54 2.3.11.3 Hiển thị danh sách sản phẩm theo dõi 55 2.3.11.4 Hiển thị lịch sử mua hàng, bán hàng 57 Quản lý đơn hàng 58 2.3.12.1 Tạo đơn hàng 58 Activity 61 Cập nhật sản phẩm 61 3.1.1 Sơ đồ trạng thái 61 3.1.2 Bảng mô tả trạng thái 62 3.1 3.2 Mua hàng(Customer) 62 3.2.1 Sơ đồ trạng thái 62 3.2.2 Bảng mô tả trạng thái 63 3.3 Bán hàng ( Customer) 64 3.3.1 Sơ đồ trạng thái 64 3.3.2 Bảng mô tả trạng thái 64 3.4 52 2.3.11.1 Chỉnh sửa thông tin 2.3.12 Quản lý tài khoản (Customer) Báo cáo doanh thu 65 3.4.1 Sơ đồ trạng thái 65 3.4.2 Bảng mô tả trạng thái 65 Sơ đồ lớp 67 4.1 Sơ đồ lớp (Mức phân tích) 67 4.2 Danh sách lớp đối tượng quan hệ 68 4.3 Mô tả chi tiết đối tượng 68 4.3.1 Categories 68 Trang 4.3.1.1 Danh sách thuộc tính 68 4.3.1.2 Danh sách tính 68 4.3.2 Products 4.3.2.1 Danh sách thuộc tính 69 4.3.2.2 Danh sách tính 69 4.3.3 Follows 70 4.3.3.1 Danh sách thuộc tính 70 4.3.3.2 Danh sách phương thức 70 4.3.4 Sales 71 4.3.4.1 Danh sách thuộc tính 71 4.3.4.2 Danh sách phương thức 71 4.3.5 Orders 72 4.3.5.1 Danh sách thuộc tính 72 4.3.5.2 Danh sách phương thức 72 4.3.6 Users 73 4.3.6.1 Danh sách thuộc tính 73 4.3.6.2 Danh sách phương thức 73 4.3.7 PortfolioItem 4.3.7.1 Danh sách thuộc tính 4.3.8 69 Authenticates 74 74 74 4.3.8.1 Danh sách thuộc tính 74 4.3.8.2 Danh sách phương thức 75 Thiết kế CSDL 76 5.1 Sơ đồ logic 76 5.2 Mô tả chi tiết thành phần sơ đồ logic 77 5.2.1 User 77 5.2.2 Admin 77 5.2.3 Customer 78 5.2.4 Categories 78 5.2.5 Product 78 Trang 5.2.6 Orders 79 5.2.7 Sales 79 Thiết kế giao diện 80 6.1 Danh sách hình 80 6.2 Mơ tả chi tiết hình 81 6.2.1 Signin (Admin) 81 6.2.2 SlideBar (Admin) 82 6.2.3 NavBar (Admin) 83 6.2.4 Dashboard (Admin) 84 6.2.5 Customer (Admin) 85 6.2.6 AddCustomer (Admin) 86 6.2.7 FixCustomer (Admin) 87 6.2.8 Products (Admin) 88 6.2.9 AddProduct (Admin) 89 6.2.10 FixProduct (Admin) 90 6.2.11 Orders (Admin) 91 6.2.12 Analytics (Admin) 92 6.2.13 Login (Customer) 93 6.2.14 Signup (Customer) 94 6.2.15 Navbar (Customer) 95 6.2.16 Home (Customer) 97 6.2.17 Product (Customer) 100 6.2.18 ProductDetail (Customer) 102 6.2.19 ViewAsk (Customer) 104 6.2.20 ViewBid (Customer) 105 6.2.21 ViewSale (Customer) 106 6.2.22 Buy select (Customer) 107 6.2.23 Sell select (Customer) 108 6.2.24 Address (Customer) 109 6.2.25 Sell (Customer) 110 Trang 10 6.2.26 Profile (Customer) 111 6.2.27 ResetPasswrod (Customer) 112 6.2.28 Buying Guide (Customer) 113 6.2.29 Selling Guide (Customer) 114 6.2.30 Following (Customer) 115 Component diagram 116 Deploy diagram 116 Chương IV Tổng quan 116 Kết 116 Hạn chế 117 Hướng phát triển 117 Bảng phân công công việc 118 Tài liệu tham khảo 118 Danh mục hình ảnh Hình Khả mở rộng Horizontal Scalability 19 Hình Chi tiết thành phần hệ thống 21 Hình Biểu mẫu nhập sản phẩm 23 Hình Biểu mẫu hóa đơn bán hàng 23 Hình Use case tổng quát 24 Hình Use case quản lý sản phẩm 25 Hình 10 Use case đăng nhập 25 Hình 11 Use case quản lý khách hàng 26 Hình 12 Use case quản lý đơn hàng 26 Trang 104 6.2.19 ViewAsk (Customer) Hình 55 Giao diện xem giá bán hàng Mô tả đối tượng hình Kiểu Table STT Tên AllAsk Cancel Button Chức Hiển thị danh sách giá yêu cầu Thoát Bảng 81 Đối tượng xem giá bán hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button Thoát Xử lý Trở giao diện chi tiết sản phẩm Bảng 82 Biến cố xử lý tương ứng xem giá bán hàng Trang 105 6.2.20 ViewBid (Customer) Hình 55 Giao diện xem giá mua hàng Mô tả đối tượng hình Kiểu Table Button STT Tên AllBid Cancel Chức Hiển thị danh sách giá chi trả Thoát Bảng 83 Đối tượng xem giá mua hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button Thoát Xử lý Trở giao diện chi tiết sản phẩm Bảng 84 Biến cố xử lý tương ứng xem giá mua hàng Trang 106 6.2.21 ViewSale (Customer) Hình 55 Giao diện xem đơn hàng Mô tả đối tượng hình Kiểu Table Button STT Tên AllBid Cancel Chức Hiển thị danh sách giá chi trả Thoát Bảng 85 Đối tượng xem đơn hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button Thoát Xử lý Trở giao diện chi tiết sản phẩm Bảng 86 Biến cố xử lý tương ứng xem đơn hàng Trang 107 6.2.22 Buy select (Customer) Hình 55 Giao diện mua hàng Mơ tả đối tượng hình STT Tên selectSize placeBid buyNow Next Close Kiểu Select Button Button Button Button Chức Chọn kích thước sản phẩm Nhập giá chi trả Mua Tiếp tục Đóng trang mua hàng Bảng 87 Đối tượng mua hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn selectSize Chọn buyNow Chọn placeBid Chọn next Xử lý Hiển thị giá u cầu thấp tương ứng Đóng placeBid Mở ô placeBid Mở trang nhập thông tin mua ngay, thông báo cập nhật giá trả giá Bảng 88 Biến cố xử lý tương ứng mua hàng Trang 108 6.2.23 Sell select (Customer) Hình 55 Giao diện bán hàng Mô tả đối tượng hình STT Tên selectSize placeAsk sellNow Next Close Kiểu Select Button Button Button Button Chức Chọn kích thước sản phẩm Nhập giá yêu cầu Bán Tiếp tục Đóng trang mua hàng Bảng 89 Đối tượng bán hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn selectSize Chọn sellNow Chọn placeAsk Chọn next Xử lý Hiển thị giá yêu cầu thấp tương ứng Đóng placeAsk Mở placeAsk Mở trang nhập thơng tin bán ngay, thông báo cập nhật giá trả giá Bảng 90 Biến cố xử lý tương ứng bán hàng Trang 109 6.2.24 Address (Customer) Hình 55 Giao diện địa Mơ tả đối tượng hình STT Tên phoneNumber yourAddress Save Close Kiểu Input /Number Input/Text Button Button Chức Nhập số điện thoại Nhập địa giao hàng Đạt hàng thành cơng Đóng trang địa Bảng 91 Đối tượng địa Danh sách biến cố xử lý tương ứng STT Biến cố Chọn save Chọn close Xử lý Thông báo đặt hàng thành cơng Đóng trang địa Bảng 92 Biến cố xử lý tương ứng địa Trang 110 6.2.25 Sell (Customer) Hình 55 Giao diện tìm bán hàng Mơ tả đối tượng hình STT Tên searchArea productList Kiểu Input /Text List Chức Nhập tên sản phẩm Danh sách sản phẩm theo tên Bảng 93 Đối tượng tìm bán hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn sản phẩm Xử lý Vào trang chi tiết sản phẩm Bảng 94 Biến cố xử lý tương ứng tìm bán hàng Trang 111 6.2.26 Profile (Customer) Hình 55 Giao diện thơng tin người dùng Mơ tả đối tượng hình STT Kiểu Label Button List Tên Profile ResetPassword SlideBar Chức Thông tin người dùng Mở trang edit password Mở trang liên quan Bảng 95 Đối tượng thông tin người dùng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button ResetPassword Chọn label slideBar Chọn logout Xử lý Mở trang chỉnh sửa password Mở trang tương ứng Đăng xuất Bảng 96 Biến cố xử lý tương ứng thơng tin người dùng Trang 112 6.2.27 ResetPasswrod (Customer) Hình 55 Giao diện đổi mật Mô tả đối tượng hình STT Kiểu Input/Password Input/Password Input/Password Tên CurrentPassword NewPassword ReEnterPassword Chức Nhập password trước Nhập password Nhập lại password Bảng 97 Đối tượng đổi mật Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button saveChange Chọn button Close Xử lý Lưu password Đóng trang resetPassword Bảng 98 Biến cố xử lý tương ứng đổi mật Trang 113 6.2.28 Buying Guide (Customer) Hình 55 Giao diện lịch sử mua hàng Mơ tả đối tượng hình STT Tên Current Kiểu Tab Pending Tab History Tab Chức Mở tab current bảng current Mở tab pending bảng pending Mở tab history bảng history Bảng 99 Đối tượng lịch sử mua hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn tab Chọn pagePagination Xử lý Mở trang có tên tab tương ứng Đi đến trang có số trang tương ứng Bảng 100 Biến cố xử lý tương ứng lịch sử mua hàng Trang 114 6.2.29 Selling Guide (Customer) Hình 55 Giao diện lịch sử bán hàng Mô tả đối tượng hình STT Tên Current Kiểu Tab Pending Tab History Tab Chức Mở tab current bảng current Mở tab pending bảng pending Mở tab history bảng history Bảng 101 Đối tượng lịch sử bán hàng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn tab Chọn pagePagination Xử lý Mở trang có tên tab tương ứng Đi đến trang có số trang tương ứng Bảng 102 Biến cố xử lý tương ứng lịch sử bán hàng Trang 115 6.2.30 Following (Customer) Hình 55 Giao diện danh sách theo dõi Mô tả đối tượng hình STT Tên Following Kiểu Table Icon Delete Chức Danh sách sản phẩm theo dõi Xóa sản phẩm khỏi danh sách theo dõi Bảng 103 Đối tượng danh sách theo dõi Danh sách biến cố xử lý tương ứng STT Biến cố Chọn icon Delete Xử lý Xóa sản phẩm tương ứng danh sách theo dõi Bảng 104 Biến cố xử lý tương ứng danh sách theo dõi Trang 116 Component diagram Hình 57 Component Diagram Deploy diagram Hình 58 Deploy Diagram Chương IV Tổng quan Kết Sau thời gian thực đề tài, chương trình hồn thành đạt số kết sau: Trang 117 - Hiểu rõ quy trình quản lý bán giày - Hiểu rõ vấn đề việc dựng website thương mại điện tử - Xây dựng thành công website mua bán giày đáp ứng nhu cầu đặt khách hàng - Giao diện chương trình thân thiện, dễ sử dụng, - Hiểu nắm kiến thức mơ hình Client - Server, EntityFramework, Repository, MongoDB - Luyện tập HTML, CSS, Javascript Hạn chế Do hạn chế mặt thời gian kinh phí nên nhóm hoàn thành mức độ hoàn thành yêu cầu đặt đề tài Nhóm chưa có chức tính cho sản phẩm, tốn online, quản lý đăng cho người dùng, nhiên nhóm cố gắng hồn thiện dự án Hướng phát triển Đề tài quản lý cửa hàng bán quần áo phổ biến có khả cao việc đưa vào ứng dụng thực tiễn Tuy nhiên hạn chế thời gian nghiên cứu kinh nghiệm, nhóm phát triển mức độ hoàn thành yêu cầu đặt đề tài, tốc độ xử lý chưa hồn thiện Nhóm cố gắng tìm hiểu sâu có phương pháp quản lý hệ thống xử lý khối liệu lớn với hiệu cao, mở rộng phạm vi dự án Trang 118 Bảng phân công công việc ST Hồn thành Cơng việc giao Tên sinh viên T Nguyễn Đức Chí Đạt Nguyễn Ngọc Phúc 100% 100% - Code FrontEnd - Làm báo cáo - Phân tích thiết kế Diagram - Code Backend - Thiết kế liệu - Tạo sở liệu Bảng 105 Phân công công việc Tài liệu tham khảo ● Các thư viện HTML – CSS : React-Bootstrap Documentation , MUI ● Tài liệu mongoDB : MongoDB Documentation ● Các học JavaScript website https://www.w3schools.com/ ● Tài liệu NodeJS : Documentation | Node.js (nodejs.org) ● Các hướng dẫn Youtube Stack Overflow - Where Developers Learn, Share, & Build Careers ... hàng bán hàng ● Nghiên cứu sở lý thuyết việc phát triển hệ thống thông tin quản lý thương mại điện tử Website mua bán giày ● Xây dựng hệ thống thương mại điện tử quản lý Website mua bán giày. .. buôn bán trở nên đơn giản Phạm vi Quy trình quản lý bán hàng, doanh thu sản phẩm, đổi trả Website mua bán giày Quy trình bán hàng thơng qua website Các vấn đề cần giải trình quản lý bn bán Website. ..Trang TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN Đề tài: WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHUYÊN MUA BÁN GIÀY Giảng viên hướng dẫn : Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Đức