ĐỒ án tìm HIỂU về NODEJS và REACTJS và xây DỰNG WEBSITE QUẢN lý bán GIÀY (đồ án SE121 l21 PMCL)

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM -🙚🙘🕮🙚🙘 - BÁO CÁO ĐỒ ÁN TÌM HIỂU VỀ NODEJS VÀ REACTJS VÀ XÂY DỰNG WEBSITE QUẢN LÝ BÁN GIÀY Giảng viên hướng dẫn: Thái Thuỵ Hàn Uyển Nhóm thực hiện: Trần Duy Khánh 18520075 Nguyễn Hữu Trí 18521528 TPHCM, tháng năm 2021 Nợi dung CHƯƠNG 1: THƠNG TIN CHUNG CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu React JS 2.1.1 Khái niệm 2.1.2 Kiến thức 2.1.3 Ưu điểm: 2.1.4 Nhược điểm: 2.1.5 Redux 2.2 Giới thiệu NodeJS 2.2.1 Đặc điểm Node.js: 2.2.2 Các thành phần quan trọng Node.js: 2.2.3 Ưu điểm: 2.2.4 Nhược điểm: 2.3 Xây dựng sở liệu 2.3.1 Cơ sở liệu MySql 2.3.2 Hệ quản trị sở liệu FireBase 10 10 10 15 16 17 18 19 19 21 21 22 22 22 23 CHƯƠNG 3: PHÁT BIỂU BÀI TOÁN 3.1 Khảo sát trạng 3.1.1 Phát biểu toán 3.1.2 Khảo sát 3.2 Yêu cầu hệ thống 3.2.1 Sơ đồ tổ chức hệ thống 3.2.2 Chức nhiệm vụ phận 3.2.2.1 Chủ cửa hàng 3.2.2.2 Bộ phận bán hàng 3.2.2.3 Bộ phận kế toán 3.2.2.4 Bộ phận kho 3.3 Danh sách yêu cầu 3.4 Danh sách biểu mẫu 3.4.1 Biểu mẫu quy định 3.4.2 Biểu mẫu quy định 3.4.3 Biểu mẫu quy định 3.4.4 Biểu mẫu quy định 3.4.5 Biểu mẫu quy định 3.4.6 Biểu mẫu quy định 2.8.7 Biểu mẫu quy định 2.8.8 Biểu mẫu 2.8.9 Biểu mẫu 2.8.10 Biểu mẫu 10 24 24 24 25 30 30 31 31 31 32 32 41 41 41 42 43 43 44 45 46 46 47 47 CHƯƠNG 4: MÔ HÌNH USECASE 48 Mơ hình Usecase tổng qt Danh sách Actor Danh sách Usecase Đặc tả Usecase 4.4.1 Đặc tả use case "Đăng nhập" 4.4.2 Đặc tả use case "Đăng xuất" 4.4.3 Đặc tả use case "Thay đổi mật khẩu" 4.4.4 Đặc tả use case "Quản lý nhập hàng" 4.4.4.1 Quản lý nhập hàng 4.4.4.2 Lập phiếu nhập hàng 4.4.4.3 Sửa phiếu nhập hàng 4.4.4.4 Xóa phiếu bán hàng 4.4.5 Đặc tả use case "Quản lý nhập kho" 4.4.5.1 Quản lý nhập kho 4.4.5.2 Lập phiếu nhập kho 4.4.5.3 Xóa phiếu nhập kho 4.4.5.4 Sửa phiếu nhập kho 4.4.6 Đặc tả use case "Quản lý nhà cung cấp" 4.4.6.1 Quản lý nhà cung cấp 4.4.6.2 Thêm nhà cung cấp 4.4.6.3 Xóa nhà cung cấp 4.4.6.4 Sửa nhà cung cấp 4.4.7 Đặc tả use case "Quản lý người dùng" 4.4.7.1 Quản lý người dùng 4.4.7.2 Thêm người dùng 4.4.7.3 Xóa người dùng 4.4.7.4 Sửa thơng tin người dung 4.4.8 Đặc tả use case "Quản lý giỏ hàng" 4.4.8.1 Quản lý giỏ hang 4.4.8.2 Thêm giỏ hàng 4.4.8.3 Xóa giỏ hàng 4.4.8.4 Sửa giỏ hàng 4.4.9 Đặc tả use case "Quản lý sản phẩm" 4.4.9.1 Quản lý sản phẩm 4.4.9.2 Thêm sản phẩm 4.4.9.3 Xóa sản phẩm 4.4.9.4 Sửa thơng tin sản phẩm 4.4.9.5 Tìm kiếm sản phẩm 4.4.10 Đặc tả use case "Báo cáo bán hàng" 4.4.11 Đặc tả use case "Báo cáo lợi nhuận" 4.4.12 Đặc tả use case "Thay đổi quy định" 4.4.12.1 Thay đổi quy định 4.4.12.2 Thay đổi số lượng tồn tối thiểu 4.4.12.3 Thay đổi tỷ lệ lợi nhuận 4.4.13 Đặc tả use case "Lập phiếu chi" 4.4.14 Đặc tả use case "Quản lý bán hàng" 4.1 4.2 4.3 4.4 48 49 49 53 53 54 54 55 55 56 58 59 60 60 61 63 64 65 65 67 68 69 70 70 71 73 73 75 75 76 77 78 80 80 81 82 83 85 86 87 88 88 89 90 92 93 4.4.14.1 4.4.14.2 4.4.14.3 4.4.14.4 Quản lý bán hàng Thêm phiếu bán hàng Xóa phiếu bán hàng Sửa phiếu bán hàng 93 94 95 96 CHƯƠNG 5: PHÂN TÍCH 5.1 Sơ đồ lớp ( mức phân tích) 5.2 Danh sách lớp đối tượng quan hệ 5.3 Mô tả chi tiết lớp đối tượng 5.1.1 PhieuNhapKho 5.1.2 ChiTietPhieuNhapKho 5.1.3 PhieuDatHang 5.1.4 ChiTietPhieuDatHang 5.1.5 PhieuChi 5.1.6 NhaCungCap 5.1.7 HangSanXuat 5.1.8 NguoiDung 5.1.9 ChucVu 5.1.10 PhanQuyen 5.1.11 Quyen 5.1.12 PhieuBanHang 5.1.13 ChiTietPhieuBanHang 5.1.14 GioHang 5.1.15 ChiTietGioHang 5.1.16 BaoCaoLoiNhuan 5.1.17 ChiTietBaoCaoLoiNhuan 5.1.18 BaoCaoBanHang 5.1.19 ChiTietBaoCaoBanHang 5.1.20 Giay 5.1.21 ChiTietGiay 5.1.22 Size 5.1.23 Mau 99 99 100 101 101 101 102 103 104 105 106 107 108 108 109 109 110 111 112 113 114 114 115 116 117 118 119 CHƯƠNG 6: THIẾT KẾ CƠ SỞ DỮ LIỆU 6.1 Sơ đồ lớp ( mức phân tích) 6.2 Danh Sách Bảng 6.3 Mô tả chi tiết lớp đối tượng 6.1.1 PhieuNhapKho 6.1.2 ChiTietPhieuNhapKho 6.1.3 PhieuDatHang 6.1.4 ChiTietPhieuDatHang 6.1.5 PhieuChi 6.1.6 NhaCungCap 6.1.7 HangSanXuat 6.1.8 NguoiDung 6.1.9 ChucVu 120 120 121 122 122 122 122 123 123 124 124 124 125 6.1.10 6.1.11 6.1.12 6.1.13 6.1.14 6.1.15 6.1.16 6.1.17 6.1.18 6.1.19 6.1.20 6.1.21 6.1.22 6.1.23 PhanQuyen Quyen PhieuBanHang ChiTietPhieuBanHang GioHang ChiTietGioHang BaoCaoLoiNhuan ChiTietBaoCaoLoiNhuan BaoCaoBanHang ChiTietBaoCaoBanHang Giay ChiTietGiay Size Mau 125 126 126 126 127 127 127 128 128 129 129 129 130 130 CHƯƠNG 7: THIẾT KẾ KIẾN TRÚC 7.1 Kiến trúc hệ thống 7.2 Mô tả chi tiết hệ thống 7.2.1 Mô hinh MVC 130 130 130 130 CHƯƠNG 8: THIẾT KẾ MÀN HÌNH 8.1 Danh sách hình 8.2 Mơ tả hình 8.2.1 Màn hình đăng nhập 8.2.2 Trang quản trị 8.2.3 Danh sách phiếu bán hàng 8.2.4 Lập phiếu bán hàng 8.2.5 Danh sách phiếu đặt hàng 8.2.6 Lập phiếu đặt hàng 8.2.7 Danh sách phiếu chi 8.2.8 Lập phiếu chi 8.2.9 Danh sách phiếu nhập kho 8.2.10 Lập phiếu nhập kho 8.2.11 Danh sách sản phẩm 8.2.12 Thêm/sửa sản phẩm 8.2.13 Danh sách hãng sản xuất 8.2.14 Thêm/Sửa hãng sản xuất 8.2.15 Danh sách nhà cung cấp 8.2.16 Thêm/sửa nhà cung cấp 8.2.17 Danh sách người dùng 8.2.18 Danh sách giỏ hàng 131 131 133 133 135 137 139 143 145 147 149 150 153 155 157 160 162 164 166 167 170 CHƯƠNG 9: THỬ NGHIỆM VÀ ĐÁNH GIÁ 9.1 Môi trường thử nghiệm 9.2 Kết thử nghiệm 9.3 Đánh giá sản phẩm 171 171 171 173 CHƯƠNG 10: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 10.1 Kết luận 10.2 Hướng phát triển 10.3 Tài liệu tham khảo 173 173 173 173 Nhận xét giảng viên ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… LỜI CẢM ƠN Đầu tiên, 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ô khoaCông nghệ phần mềm giúp cho 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 cô Thái Thuỵ Hàn Uyển (giảng viên hướng dẫn đồ án mã nguồn mở) người trực tiếp đứng lớp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến q báo chúng em hồn thành tốt báo cáo 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 vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, trình thực hiện, 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 học tập hành trang để chúng em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý Thầy Cơ! CHƯƠNG 1: THƠNG TIN CHUNG 1.1 Tên đề tài: Quản Lý Bán Giày 1.2 Môi trường phát triển ứng dụng : NodeJs ReactJs - Hệ điều hành: Microsoft Windows - Hệ quản trị sở liệu: MongoDB - Cơng cụ phân tích thiết kế: Draw.io - Công cụ xây dựng ứng dụng: Visual Studio Code 1.3 Thơng tin nhóm MSSV Họ tên 18520075 Trần Duy Khánh 18520075@gm.uit.edu.vn 18521528 Nguyễn Hữu Trí 18521528@gm.uit.edu.vn ST Điện thoại Email T CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu React JS - React JS thư viện Javascript xây dựng kỹ sư Facebook, nhiều công ty tiếng sử dụng để phát triển sản phẩm họ Yahoo, Airbnb tất nhiên nội Facebook, Instagram Nó phù hợp với dự án lớn có tính mở rộng dự án nhỏ • Đặc tính React JS - Tư tưởng React JS xây dựng lên components có tính tái sử dụng, dễ dàng cho việc chia nhỏ vấn đề, testing Nó giúp dễ dàng quản lý, mở rộng hệ thống, điều Angular JS địi hỏi cấu trúc, cách viết code phải thật tối ưu - React JS giữ components trạng thái stateless (nhiều có thể) khiến ta dễ dàng quản lý chẳng khác trang static HTML Bản thân components khơng có trạng thái (state) nhận đầu vào từ bên ngồi thị dựa vào đầu vào đó, điêu lý giải lại mang tính tái sử dụng (reuse) dễ dàng cho việc test 2.1.1 Khái niệm • Component - React xây dựng xung quanh component, không dùng template framework khác Ta tạo component cách extend Component sau 10 8.2.13 Danh sách hãng sản xuất a) Thiết kế wireframe Hình 6.22.13a: Danh sách hãng sản xuất STT Tên Kiểu Chức btnThem button Thêm hãng sản xuất chuoiTimKiem input/text Nhập chuỗi tìm kiếm timTheoKhoa button Tìm theo từ khố danhSach table Bảng danh sách hãng sản xuất btnSua button Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý 160 Sửa thông tin hãng sản xuất Chọn button Thêm nhà Chuyển sang trang thêm hãng sản xuất cung cấp Chọn button Search (theo Tìm kiếm hãng sản xuất theo chuỗi trạng thái hay chuỗi) Chọn button Sửa (trong Sửa thông tin hang sản xuất bảng danh sách) b) Giao diện danh sách hãng sản xuất Hình 6.23.13b: Trang Danh sách hãng sãn xuất 161 8.2.14 Thêm/Sửa hãng sản xuất a) Thiết kế wireframe Hình 6.24.14a: Thêm/sửa hãng sản xuất b) Giao diện thêm/sửa hãng sản xuất 162 Hình 6.25.14b: Popup thêm/sửa hãng sản xuất 163 8.2.15 Danh sách nhà cung cấp a) Thiết kế wireframe Hình 6.26.15a: Danh sách nhà cung cấp STT Tên Kiểu Chức btnThem button Thêm nhà cung cấp chuoiTimKiem input/text Nhập chuỗi tìm kiếm timTheoKhoa button Tìm theo từ khố danhSach table Bảng danh sách nhà cung cấp btnSua button Sửa thông tin nhà cung cấp 164 Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý Chọn button Thêm nhà Chuyển sang trang thêm nhà cung cấp cung cấp Chọn button Search (theo Tìm kiếm nhà cung cấp theo chuỗi trạng thái hay chuỗi) Chọn button Sửa (trong Sửa thông tin nhà cung cấp bảng danh sách) b) Giao diện nhà cung cấp Hình 6.27.15b: Trang Danh sách nhà cung cấp 165 8.2.16 Thêm/sửa nhà cung cấp a) Thiết kế wireframe Hình 6.28.16a: Danh sách khách hàng Mơ tả đối tượng hình STT Tên Kiểu Chức btnLuu button Lưu thông tin nhà cung cấp btnQuayLai button Quay lại trang danh sách tenNhaCungCap input/text Tên nhà cung cấp diaChi input/text Địa soDienThoai input/text Số điện thoại email input/text Email 166 Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý Chọn button Lưu Kiểm tra thông tin lưu thông tin nhà cung cấp xuống CSDL Chọn button Quay lại Quay lại trang danh sách b) Giao diện thêm/sửa nhà cung cấp Hình 6.29.16b: Danh sách nhà cung cấp web 8.2.17 Danh sách người dùng a) Thiết kế wireframe Hình 6.30.18a: Danh sách khách hàng 167 Hình 6.31.18a: Danh sách người dùng Mơ tả đối tượng hình STT Tên Kiểu Chức btnThem button Thêm người dùng chuoiTimKiem input/text Nhập chuỗi tìm kiếm timTheoKhoa button Tìm theo từ khoá danhSach table Bảng danh sách người dùng btnXem button Xem thông tin người dùng btnSua button Sửa thông tin người dùng Danh sách biến cố xử lý tương ứng STT Biến cố Xử lý 168 Chọn button Thêm người Chuyển sang trang thêm người dùng dùng Chọn button Search (theo Tìm kiếm người dùng theo trạng thái hay chuỗi) theo chuỗi Chọn button Xem (trong Hiển thị thông tin chi tiết người dùng bảng danh sách) Chọn button Sửa (trong Sửa thông tin người dùng bảng danh sách) b) Giao diện danh sách người dung Hình 6.32.18b: Danh sách khách hàng 169 8.2.18 Danh sách giỏ hàng a) Thiết kế wireframe Hình 6.33.18a: Danh sách giỏ hàng Mơ tả đối tượng hình STT Tên Kiểu Chức btnThem button Thêm người dùng chuoiTimKiem input/text Nhập chuỗi tìm kiếm timTheoKhoa button Tìm theo từ khoá danhSach table Bảng danh sách giỏ hàng btnXem button Xem thông tin giỏ hàng Danh sách biến cố xử lý tương ứng 170 STT Biến cố Xử lý Chọn button Xác nhận Xác nhận giỏ hàng để tạo hóa đơn Chọn button Search (theo Tìm kiếm người dùng theo trạng thái hay chuỗi) theo chuỗi Chọn button Xem (trong Hiển thị thông tin chi tiết giỏ hàng bảng danh sách) b) Giao diện danh sách giỏ hàng Hình 6.34.18b: Danh sách giỏ hàng CHƯƠNG 9: THỬ NGHIỆM VÀ ĐÁNH GIÁ 9.1 Môi trường thử nghiệm - Hệ điều hành window 10 Ubuntu 20.04 - Trình duyệt Chrome version 91.-4.4472 (64-bit) - Visual studio code 9.2 Kết thử nghiệm 171 Hình 9.2 a: Trang chủ cửa hàng Hình 9.2 b: Trang quản trị 172 9.3 Đánh giá sản phẩm - Ứng dụng thực chức đề - Tốc độ load liệu từ Firebase chấp nhận CHƯƠNG 10: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 10.1 Kết luận Dựa kết đề tài này, có ba nội dung trình bày cơng nghệ ReactJS NodeJS, tài liệu xây dựng Website bán giày thử nghiệm, đánh giá ứng dụng nói Ứng dụng có đầy đủ chức đề ban đầu 10.2 Hướng phát triển Đề tài hoàn thành số yêu cầu ban đầu đề Thế nhưng, số hạn chế định Đề tài dừng việc khảo sát ứng dụng liên quan, xây dựng dựa chức Web có thị trường Hơn số chức cịn đơn giản, tính thẩm mỹ trải nghiệm cho người dùng chưa cao để trang bán hàng thực Để cải tiến thêm: • Xây dựng bổ sung thêm tính chưa hồn thành • Tăng UI UX website để nâng cao trải nghiệm cho người dùng • Thêm tính tốn ví điện tử trực tiếp Website • Hồn thiện tính LiveChat xây dựng chatbot cho Website 10.3 Tài liệu tham khảo 1) https://reactjs.org/docs/getting-started.html 2) https://stackoverflow.com/ 3) https://viblo.asia/newest 4) https://trungquandev.com/nodejs-xac-thuc-nguoi-dung-su-dung-jwt-tokenrefreshtoken/ 173 5) https://www.youtube.com/user/TechGuyWeb 174 ... Sơ đồ tổ chức hệ thống Cửa hàng giày có phận sau: 30 Trong đó: ● Chủ cửa hàng: Quản lý phận khác ● Bộ phận bán hàng: Chuyên bán hàng giao tiếp với khách ● Bộ phận quản lý kho: Quản lý, bảo quản. .. mua bán mặt hàng thời trang ngày tăng cao, số đôi giày – phụ kiện thời trang thiết yếu sống hàng ngày Đặt nhu cầu cho cửa hàng bán giày công cụ quản giúp đỡ quản lý cửa hàng Vì phần mềm Quản Lý. .. 93 4.4.14.1 4.4.14.2 4.4.14.3 4.4.14.4 Quản lý bán hàng Thêm phiếu bán hàng Xóa phiếu bán hàng Sửa phiếu bán hàng 93 94 95 96 CHƯƠNG 5: PHÂN TÍCH 5.1 Sơ đồ lớp ( mức phân tích) 5.2 Danh sách lớp