Xây dựng hệ thống quản lí cửa hàng ký gửi quần áo cũ

ĐẠ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 hệ thống quản lí cửa hàng ký gửi quần áo cũ Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực : Huỳnh Mình Chí Mã sinh viên : 20521130 Sinh viên thực : Nguyễn Hữu Trung Kiên Mã sinh viên : 205211489 TP HỒ CHÍ MINH, 2023 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… Ngày…tháng……năm 2023 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Đầu tiên, xin gửi lời cảm ơn chân thành đến Cô Trần Thị Hồng Yến – giảng viên môn Nhập môn Công nghệ phần mềm Cô trực tiếp hướng dẫn, tận tình chia sẻ kiến thức, hỗ trợ đóng góp ý kiến quý báu để giúp chúng tơi hồn thành thật tốt đồ án báo cáo Trong thời đại cơng nghệ phát triển mạnh mẽ vượt bậc ngày nay, việc quản lý kinh doanh cửa hàng ký gửi quần áo cũ địi hỏi hiệu tiện lợi Chính nhận thức điều thúc đẩy xây dựng ứng dụng web "PlanB" hệ thống quản lí cửa hàng ký gửi quần áo cũ, nhằm hỗ trợ chủ cửa hàng việc quản lý hàng hóa, bán hàng tối ưu hóa quy trình kinh doanh Đồng thời, ứng dụng mang đến cho khách hàng trải nghiệm mua sắm trực tuyến thuận tiện dễ dàng tìm kiếm sản phẩm quần áo chất lượng từ cửa hàng ký gửi Trong trình thực đồ án, không tránh khỏi thách thức sai sót, hỗ trợ góp ý chân thành từ Cô giúp vượt qua khó khăn hồn thiện đồ án cách tốt Chúng xin cam kết tiếp thu áp dụng kinh nghiệm quý báu để nâng cao khả thực dự án tương lai Một lần nữa, xin chân thành cảm ơn Cô Trần Thị Hồng Yến hy vọng đóng góp Cơ tiếp tục giúp đỡ hỗ trợ chúng tơi hành trình học tập nghiên cứu tương lai Xin chân thành cảm ơn q thầy ! Nhóm sinh viên thực hiện: Huỳnh Minh Chí - 20521130 Nguyễn Hữu Trung Kiên - 20521489 MỤC LỤC CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Đặt vấn đề .2 1.2 Giải Pháp 1.3 Mục tiêu đề tài .2 1.4 Đối tượng sử dụng .3 1.5 Công cụ sử dụng 1.6 Phạm vi nghiên cứu 1.7 Tổng quan đồ án CHƯƠNG 2: TÌM HIỂU CƠ SỞ LÝ THUYẾT 2.1 Thiết kế giao diện người dùng Figma 2.2 Ngơn ngữ lập trình JavaScript 2.3 ReactJS 10 2.4 NodeJS 12 2.5 Phần mềm lập trình VSCode 13 2.6 Dịch vụ Github 16 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 18 3.1 ĐẶC TẢ USE CASE .18 3.2 PHÂN TÍCH HỆ THỐNG 32 3.3 THIẾT KẾ DỮ LIỆU .33 CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG 38 4.1 THIẾT KẾ GIAO DIỆN .38 4.2 CÀI ĐẶT VÀ THỬ NGHIỆM 52 CHƯƠNG 5: NHẬN XÉT VÀ KẾT LUẬN 53 5.1 Kết đạt 53 5.2 Hạn chế 53 5.3 Hướng phát triển 54 TÀI LIỆU THAM KHẢO 56 DANH MỤC BẢNG Bảng 3.1 Danh sách Use Case .18 Bảng 3.2 Use case Đăng nhập 19 Bảng 3.3 Use case Đăng xuất 20 Bảng 3.4 Use case Quản lý Ký gửi .21 Bảng 3.5 Use case Quản lý Thanh toánng 3.5 Use case Quảng 3.5 Use case Quản lý Thanh toánn lý Thanh toán 22 Bảng 3.5 Use case Quản lý Thanh toánng 3.6 Use case Quảng 3.5 Use case Quản lý Thanh tốnn lý Hóa đơnn 23 Bảng 3.5 Use case Quản lý Thanh toánng 3.7 Use case Quảng 3.5 Use case Quản lý Thanh toánn lý Khách hàng 24 Bảng 3.5 Use case Quản lý Thanh toánng 3.8 Use case Quảng 3.5 Use case Quản lý Thanh toánn lý Sảng 3.5 Use case Quản lý Thanh toánn phẩmm 26 Bảng 3.5 Use case Quản lý Thanh toánng 3.9 Use case Biểu đồu đồ 27 Bảng 3.5 Use case Quản lý Thanh toánng 3.10 Use case Quảng 3.5 Use case Quản lý Thanh toánn lý Nhân viên 28 Bảng 3.5 Use case Quản lý Thanh toánng 3.11 Use case Quảng 3.5 Use case Quản lý Thanh tốnn lý Chấm cơngm công 29 Bảng 3.5 Use case Quản lý Thanh toánng 3.12 Use case Báo cáo 30 Bảng 3.5 Use case Quản lý Thanh toánng 3.13 Use case Quảng 3.5 Use case Quản lý Thanh toánn lý Tài khoảng 3.5 Use case Quản lý Thanh toánn 31 Bảng 3.5 Use case Quản lý Thanh toánng 3.14 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Khách hàng 34 Bảng 3.5 Use case Quản lý Thanh toánng 3.15 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Nhân viên 34 Bảng 3.5 Use case Quản lý Thanh toánng 3.16 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Sảng 3.5 Use case Quản lý Thanh toánn phẩmm .35 Bảng 3.5 Use case Quản lý Thanh toánng 3.17 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Ký gửii .35 Bảng 3.5 Use case Quản lý Thanh toánng 3.18 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Hóa đơnn Ký gửii chi tiếtt 36 Bảng 3.5 Use case Quản lý Thanh toánng 3.19 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Sảng 3.5 Use case Quản lý Thanh toánn phẩmm bán 36 Bảng 3.5 Use case Quản lý Thanh toánng 3.20 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Lươnng .37 Bảng 3.5 Use case Quản lý Thanh toánng 3.21 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính Sảng 3.5 Use case Quản lý Thanh tốnn phẩmm trảng 3.5 Use case Quản lý Thanh toán lạii .37 Bảng 3.5 Use case Quản lý Thanh toánng 3.22 Bảng 3.5 Use case Quản lý Thanh tốnng thuộc tính Khách hàngc tính doanh thu 37 Bảng 3.5 Use case Quản lý Thanh toánng 4.1 Danh sách hình .39 Bảng 3.5 Use case Quản lý Thanh tốnng 4.2 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Đăng nhậpp 40 Bảng 3.5 Use case Quản lý Thanh tốnng 4.3 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Trang chủ 41 Bảng 3.5 Use case Quản lý Thanh tốnng 4.4 Mơ tảng 3.5 Use case Quản lý Thanh toán cách sửi dụng hình Đăng nhậpng hình Ký gửii 41 Bảng 3.5 Use case Quản lý Thanh tốnng 4.5 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Thơng tin sảng 3.5 Use case Quản lý Thanh toánn phẩmm .42 Bảng 3.5 Use case Quản lý Thanh tốnng 4.6 Mơ tảng 3.5 Use case Quản lý Thanh toán cách sửi dụng hình Đăng nhậpng hình Thanh tốn 43 Bảng 3.5 Use case Quản lý Thanh tốnng 4.7 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Quảng 3.5 Use case Quản lý Thanh tốnn lý Hóa đơnn 44 Bảng 3.5 Use case Quản lý Thanh tốnng 4.8 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Chi tiếtt Hóa đơnn Ký gửii 45 Bảng 3.5 Use case Quản lý Thanh tốnng 4.9 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Quảng 3.5 Use case Quản lý Thanh tốnn lý Khách hàng .45 Bảng 3.5 Use case Quản lý Thanh tốnng 4.10 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Thơng tin Khách hàng 46 Bảng 3.5 Use case Quản lý Thanh toánng 4.11 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Quảng 3.5 Use case Quản lý Thanh toánng lý Sảng 3.5 Use case Quản lý Thanh toánn phẩmm .47 Bảng 3.5 Use case Quản lý Thanh tốnng 4.12 Mơ tảng 3.5 Use case Quản lý Thanh toán cách sửi dụng hình Đăng nhậpng hình Chỉnh sửa Sản phẩmnh sửia Sảng 3.5 Use case Quản lý Thanh toánn phẩmm 47 Bảng 3.5 Use case Quản lý Thanh tốnng 4.13 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Biểu đồu đồ .48 Bảng 3.5 Use case Quản lý Thanh toánng 4.14 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Quảng 3.5 Use case Quản lý Thanh toánn lý Nhân viên 49 Bảng 3.5 Use case Quản lý Thanh tốnng 4.15 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Thơng tin Nhân viên 49 Bảng 3.5 Use case Quản lý Thanh tốnng 4.16 Mơ tảng 3.5 Use case Quản lý Thanh toán cách sửi dụng hình Đăng nhậpng hình Thơng tin Nhân viên 50 Bảng 3.5 Use case Quản lý Thanh tốnng 4.17 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Lịch làm việcch làm việcc 51 Bảng 3.5 Use case Quản lý Thanh tốnng 4.18 Mơ tảng 3.5 Use case Quản lý Thanh tốn cách sửi dụng hình Đăng nhậpng hình Báo cáo 51 Bảng 3.5 Use case Quản lý Thanh tốnng 4.19 Mơ tảng 3.5 Use case Quản lý Thanh toán cách sửi dụng hình Đăng nhậpng hình Quảng 3.5 Use case Quản lý Thanh toánn lý Tài khoảng 3.5 Use case Quản lý Thanh toánn 52 Bảng 3.5 Use case Quản lý Thanh tốnng 4.20 Mơ tảng 3.5 Use case Quản lý Thanh toán cách sửi dụng hình Đăng nhậpng hình thơng tin Tài khoảng 3.5 Use case Quản lý Thanh toánn .53 DANH MỤC HÌNH Hình Figma Hình 2 JavaScript .8 Hình ReactJS 10 Hình NodeJS 12 Hình Visual Studio Code 14 Hình Github 16 Hình Sơ đồ Use case 18 Hình 3.2 Mơ hình MVC 32 Hình 3.3 Sơn đồ Cơn sở liệu liệu liệcu .34 Hình 4.1 Màn hình Đăng nhậpp .39 Hình 4.2 Màn hình Trang chủ 39 Hình 4.3 Màn hình Ký gửii 40 Hình 4.4 Thơng tin sảng 3.5 Use case Quản lý Thanh toánn phẩmm 41 Hình 4.5 Màn hình Thanh toán 42 Hình 4.6 Màn hình Quảng 3.5 Use case Quản lý Thanh tốnn lý Hóa đơnn 43 Hình 4.7 Chi tiếtt Hóa đơnn Ký gửii .43 Hình 4.8 Màn hình Quảng 3.5 Use case Quản lý Thanh toánn lý Khách hàng 44 Hình 4.9 Thơng tin Khách hàng 45 Hình 4.10 Màn hình Quảng 3.5 Use case Quản lý Thanh toánn lý Sảng 3.5 Use case Quản lý Thanh toánn phẩmm 45 Hình 4.11 Chỉnh sửa Sản phẩmnh sửia Sảng 3.5 Use case Quản lý Thanh toánn phẩmm 46 Hình 4.12 Màn hình Biểu đồu đồ 47 Hình 4.13 Màn hình Quảng 3.5 Use case Quản lý Thanh toánn lý Nhân viên 47 Hình 4.14 Thêm Nhân viên 48 Hình 4.15 Thơng tin Nhân viên 49 Hình 4.16 Màn hình Lịch làm việcch làm việcc .49 Hình 4.17 Màn hình Báo cáo 50 Hình 4.18 Màn hình Quảng 3.5 Use case Quản lý Thanh toánn lý Tài khoảng 3.5 Use case Quản lý Thanh toánn 51 Hình 4.19 Màn hình Thơng tin Tài khoảng 3.5 Use case Quản lý Thanh toánn .51 TÓM TẮT ĐỒ ÁN "PlanB" website quản lí cửa hàng ký gửi quần áo cũ, thiết kế nhằm hỗ trợ hiệu quản lí cửa hàng, chợ đồ cũ cá nhân bán đồ secondhand Với giao diện trực quan dễ sử dụng, "PlanB" cung cấp tính quản lí hàng hóa, bán hàng thống kê, giúp chủ cửa hàng tối ưu hóa quy trình kinh doanh Website giúp cho người dùng quản lí kiểm soát mặt hàng cửa hàng, bao gồm thơng tin chi tiết, tình trạng, giá thơng tin liên quan khác Ngồi ra, "PlanB" cung cấp chức bán hàng, cho phép người dùng thực giao dịch mua bán cách thuận tiện nhanh chóng Đặc biệt, "PlanB" cung cấp tính thống kê, giúp chủ cửa hàng theo dõi hiệu suất kinh doanh, xem thông số doanh thu, số lượng sản phẩm bán số liên quan khác Nhờ đó, người dùng đưa định thơng minh tối ưu hóa hoạt động kinh doanh Với mục tiêu đơn giản hóa quản lí tối ưu hóa quy trình kinh doanh, "PlanB" giải pháp tiện ích cho cửa hàng, chợ đồ cũ cá nhân bán đồ secondhand, giúp họ nâng cao hiệu suất đạt thành công việc kinh doanh sản phẩm secondhand Đồ án bao gồm chương phần tài liệu tham khảo: - Chương 1: giới thiệu chung đề tài: đặt vấn đề, giải pháp, mục tiêu đề tài, đối tượng sử dụng, công cụ sử dụng, phạm vi nghiên cứu tổng quan đồ án - Chương 2: nói tổng quan sở lý thuyết để xây dựng hệ thống bao gồm: Figma, ReactJS, NodeJS, VSCode, Github - Chương 3: Phân tích thiết kế hệ thống bao gồm đặc tả Use case, phân tích hệ thống thiết kế liệu - Chương 4: Xây dựng hệ thống: tổng quan giao diện hệ thống cài đặt thử nghiệm hệ thống - Chương 5: nhận xét kết luận hệ thống bao gồm: kết đạt được, hạn chế hướng phát triển hệ thống