Đồ án xây dựng website quản lý tiệm bánh xuancake

ĐẠ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 QUẢN LÝ TIỆM BÁNH XUANCAKE Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Nơng Ngọc Xn Hồng – 19521541 TP Hồ Chính Minh, 2023 NHẬN XÉT LỜI CẢM ƠN Lời em xin chân thành cảm ơn hướng dẫn tận tình Trần Thị Hồng Yến hỗ trợ thông tin cần thiết giải đáp thắc mắc cho em suốt trình thực đề tài Em muốn dành lời cảm ơn chân thành đến bạn giúp đỡ, góp ý, tài liệu liên quan để tham khảo lợi đáng kể em Vì kiến thức kinh nghiệm em cịn hạn chế nên khơng thể tránh khỏi sai sót q trình thực đồ án Vì lẽ đó, em ln mang thái độ cầu thị mong muốn nhận góp ý, phản hồi quý báu từ Từ tự rút kinh nghiệm, khắc phục hạn chế, đồng thời ngày phát triển, hoàn thiện sản phẩm thân cách nghiêm túc tự giác Một lần nữa, nhóm em xin chân thành cảm ơn Nhóm thực Trường Đại học Công nghệ Thông tin, tháng năm 2023 MỤC LỤC ĐỀ CƯƠNG CHI TIẾT 10 CHƯƠNG 1: GIỚI THIỆU CHUNG 13 1.1 Lý chọn đề tài 13 1.2 Điểm bật đề tài 13 1.3 Mô tả đề tài 13 1.4 Công nghệ sử dụng 13 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 15 2.1 Tổng quan ReactJS 15 2.2 Tổng quan Firebase 16 2.3 Tổng quan Bootstrap 17 2.4 Tổng quan MongoDB 17 2.5 Tổng quan NodeJS 18 2.6 Tổng quan ExpressJS 19 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21 3.1 Phân tích yêu cầu hệ thống 21 Yêu cầu chức 21 Yêu cầu phi chức 22 3.2 Kiến trúc hệ thống 22 Mô tả kiến trúc Front-End 22 Mô tả kiến trúc Back-End 23 CHƯƠNG 4: HIỆN THỰC HỆ THỐNG 24 4.1 Sơ đồ Use case 24 4.2 Sơ đồ Activity 25 4.2.1 Đăng ký 25 4.2.2 Đăng nhập 27 4.2.3 Reset mật 29 4.2.4 Xem chi tiết sản phẩm 32 4.2.5 Quản lí giỏ hàng 34 4.2.6 Quản lý hóa đơn (Khách hàng) 35 4.2.6.1 Xem lịch sử mua hàng 35 4.2.6.2 Hủy hóa đơn 37 4.2.6.3 Tạo hóa đơn 38 4.2.7 Comment sản phẩm 39 4.2.8 Quản lý hóa đơn (Quản lý) 41 4.2.8.1 Sửa hóa đơn 41 4.2.8.2 Tìm kiếm hóa đơn 43 4.2.9 Quản lý sản phẩm 45 4.2.10 Thống kê doanh thu 47 4.3 Sơ đồ Class 48 4.3.1 Quản lý sản phẩm 48 4.3.2 Quản lý hóa đơn 48 4.3.3 Authentication 49 4.4 Thiết kế liệu 49 4.4.1 Danh sách đối tượng hệ thống 50 4.4.2 Dữ liệu người dùng 50 4.4.3 Dữ liệu bánh 50 4.4.4 Dữ liệu hóa đơn 51 4.5 Thiết kế giao diện 52 4.5.1 Màn hình đăng nhập 52 4.5.2 Màn hình đăng kí 53 4.5.3 Màn hình Reset Password 53 4.5.4 Màn hình Landing Page 55 4.5.5 Màn hình About 59 4.5.6 Màn hình Cake 60 4.5.7 Màn hình Cake Detail 61 4.5.8 Màn hình Cart 63 4.5.9 Màn hình Order 64 4.5.10 Màn hình Order history 65 4.5.11 Màn hình Management 65 4.5.12 Màn hình Cake Management 66 4.5.13 Màn hình Statistic Management 68 4.5.14 Màn hình Order management 69 KẾT LUẬN 71 Kết đạt 71 Ưu điểm 71 Nhược điểm giải pháp 71 TÀI LIỆU THAM KHẢO 72 DANH MỤC BẢNG Bảng Yêu cầu chức Bảng Kiến trúc Back-end Bảng Đặc tả yêu cầu chức “Đăng Ký” Bảng Đặc tả yêu cầu chức “Đăng Nhập” Bảng Đặc tả yêu cầu chức “Reset mật khẩu” Bảng Đặc tả yêu cầu chức “Đăng xuất” Bảng Đặc tả yêu cầu chức “Xem chi tiết sản phẩm” Bảng Đặc tả yêu cầu chức “Chỉnh sửa giỏ hàng” Bảng Đặc tả yêu cầu chức “Xem lịch sử mua hàng” Bảng 10 Đặc tả yêu cầu chức “Hủy hóa đơn” Bảng 11 Đặc tả yêu cầu chức “Tạo hóa đơn” Bảng 12 Đặc tả yêu cầu chức “Comment sản phẩm” Bảng 13 Đặc tả yêu cầu chức “Sửa hóa đơn” Bảng 14 Đặc tả yêu cầu chức “Xóa hóa đơn” Bảng 15 Đặc tả yêu cầu chức “Tìm kiếm hóa đơn” Bảng 16 Đặc tả yêu cầu chức “Quản lý sản phẩm” Bảng 17 Đặc tả yêu cầu chức “Thống kê doanh thu” Bảng 18 Danh sách đối tượng hệ thống Bảng 19 Dữ liệu người dùng Bảng 20 Dữ liệu bánh Bảng 21 Dữ liệu hóa đơn Bảng 22 Mơ tả hình đăng nhập Bảng 23 Mơ tả hình đăng kí Bảng 24 Mơ tả hình reset password Bảng 25 Mơ tả hình email reset Bảng 26 Mô tả navigation bar Bảng 27 Mô tả thành phần ảnh quảng cáo Bảng 28 Mô tả thành phần Thông tin shop Bảng 29 Mô tả hình Cake Bảng 30 Mơ tả hình Cake detail Bảng 31 Mơ tả hình cart Bảng 32 Mơ tả hình Order Bảng 33 Mơ tả hình Order History Bảng 34 Mơ tả hình Management Bảng 35 Mơ tả hình Cake Management Bảng 36 Mơ tả edit form Cake Management Bảng 37 Mô tả hình Order Management Bảng 38 Mơ tả hình Order Management 21 23 26 28 30 32 33 34 35 37 38 40 41 42 44 46 47 50 50 50 51 52 53 53 54 56 57 58 60 61 63 64 65 65 66 67 69 70 DANH MỤC HÌNH ẢNH Hình 15 Hình 16 Hình 17 Hình 17 Hình 18 Hình 19 Hình 23 Hình 24 Hình 25 Hình 10 27 Hình 11 29 Hình 12 31 Hình 13 32 Hình 14 34 Hình 15 35 Hình 16 37 Hình 17 38 Hình 18 39 Hình 19 41 Hình 20 42 Hình 21 43 Hình 22 45 Hình 23 47 Hình 24 48 Hình 25 48 Hình 26 49 Hình 27 49 Hình 28 52 Hình 29 53 Hình 30 53 Hình 31 54 Hình 32 54 Hình 33 54 Hình 34 55 Hình 35 56 Hình 36 57 Hình 37 58 Hình 38 58 Hình 39 59 Hình 40 60 Hình 41 60 Hình 42 61 Hình 43 62 Hình 44 62 Hình 45 63 Hình 46 63 Hình 47 64 Hình 48 65 Hình 49 65 Hình 50 66 Hình 51 66 Hình 52 67 Hình 53 67 Hình 54 68 Hình 55 68 Hình 56 69 Hình 57 69 Hình 58 70 Hình 59 70 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG WEBSITE QUẢN LÝ TIỆM BÁNH XUANCAKE Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Sinh viên thực hiện: Nơng Ngọc Xn Hồng – 19521541 Nội dung đề tài: Giới thiệu: • Hiện chủ cửa hàng tiệm bánh gặp phải nhiều khó khăn việc quản lý định lượng nguyên vật liệu để làm bánh, số lượng bánh cần sản xuất ngày, quản lý tiền mặt, phiên làm việc nhân viên báo cáo lợi nhuận hàng ngày, hàng tháng quản lý đơn hàng Nếu tiến hành công việc cách thủ công gặp nhiều khó khăn gặp nguy nhầm lẫn việc giao sản phẩm cho khách, lãng phí nguồn nguyên vật liệu Để giải việc cần website quản lý tiệm bánh cho chủ tiệm • Một số ưu điểm sử dụng website quản lý tiệm bánh - Dễ dàng quản lý giảm thiểu nhầm lẫn việc giao sản phẩm cho khách, lãng phí nguồn nguyên vật liệu, giảm doanh thu cửa hàng - Giúp chủ cửa hàng có nhìn tổng quan doanh thu loại bánh, kho nguyên vật liệu, lợi nhuận - Tiếp cận với nhiều người hơn: nhờ website mà chủ cửa hàng quảng bá tiệm dễ dàng với người Nắm bắt nhu cầu đó, em chọn đề tài với mong muốn xây dựng website giúp quản lý tiệm bánh giúp cho chủ tiệm dễ dàng quản lý Mục tiêu: -Xây dựng website quản lý tiệm bánh đáp ứng được: • Có giao diện dễ nhìn, dễ sử dụng • Tính cần có website quản lý tiệm bánh • Có thể phát triển thêm tương lai Đối tượng: Các chủ tiệm bánh có nhu cầu quản lý tiệm bánh Phạm vi: • Phạm vi mơi trường: Triển khai đề tài môi trường web 10 Hình 37 Hình 38 Bảng 28 Mơ tả thành phần Thông tin shop Biến cố Chọn Read More Xử lý Điều hướng đến About 58 4.5.5 Màn hình About Hình 39 59 4.5.6 Màn hình Cake Hình 40 Hình 41 Bảng 29 Mơ tả hình Cake Biến cố Chọn Add to cart Xử lý Thêm sản phẩm vào giỏ hàng 60 Chọn See details Điều hướng đến trang Cake Details 4.5.7 Màn hình Cake Detail Hình 42 Bảng 30 Mơ tả hình Cake detail Biến cố Chọn Add to cart Chọn Add comment nhấn icon gửi Chọn Go back to shop Xử lý Thêm sản phẩm vào giỏ hàng Thêm comment người dùng vào trang sản phẩm Điều hướng đến trang Our cake 61 Hình 43 Hình 44 62 4.5.8 Màn hình Cart Hình 45 Hình 46 Bảng 31 Mơ tả hình cart Biến cố Chọn Clear All Chọn Quantity Chọn icon thùng rác Chọn Create Order Chọn Continue Shopping Xử lý Xóa tồn item giỏ hàng Tăng/ giảm số lượng sản phẩm Xóa sản phẩm khỏi giỏ hàng Tạo hóa đơn Điều hướng đến Our Cake 63 4.5.9 Màn hình Order Hình 47 Bảng 32 Mơ tả hình Order Biến cố Chọn Confirm Order Chọn Cancel Order Xử lý Lưu hóa đơn vào database Xóa thơng tin hóa đơn 64 4.5.10 Màn hình Order history Hình 48 Bảng 33 Mơ tả hình Order History Biến cố Chọn Cancel Order 4.5.11 Xử lý Hủy đơn Màn hình Management Hình 49 Bảng 34 Mơ tả hình Management Biến cố Chọn Cake Management Chọn Statistic Management Chọn User Management Chọn Order Management Xử lý Điều hướng đến Cake Management Điều hướng đến Statistic Management Điều hướng đến User Management Điều hướng đến Order Management 65 4.5.12 Màn hình Cake Management Hình 50 Bảng 35 Mơ tả hình Cake Management Biến cố Nhập liệu vào Search Chọn Add Chọn Edit Chọn Delete Xử lý Hiển thị sản phẩm theo keyword Hiển thị form thêm thông tin sản phẩm Hiển thị thông tin sản phẩm Xóa sản phẩm database trang Hình 51 66 Hình 52 Hình 53 Bảng 36 Mơ tả edit form Cake Management Biến cố Chọn Save Chọn Add Xử lý Lưu thông tin vào database Thêm thông tin vào database 67 4.5.13 Màn hình Statistic Management Hình 54 Hình 55 68 Hình 56 4.5.14 Màn hình Order management Hình 57 Bảng 37 Mơ tả hình Order Management Biến cố Nhập liệu vào Search Chọn Edit Chọn Delete Xử lý Hiển thị Order theo keyword Hiển thị thơng tin sản phẩm Xóa Order database trang 69 Hình 58 Hình 59 Bảng 38 Mơ tả hình Order Management Biến cố Chọn Save Chọn Dropdown menu Chọn Dropdown menu Xử lý Lưu thông tin vào database Đổi trạng thái đơn Đổi trạng thái toán 70 KẾT LUẬN Kết đạt Tạo sản phẩm hồn chỉnh, có chức quản lý cho tiệm bánh Ngồi em áp dụng kiến thức tìm hiểu quy trình tạo website chuyên nghiệp Học nhiều cơng nghệ kỹ thuật lập trình mới, có kiến thức chuyên sâu ReactJS, NodeJs Firebase Cuối học cách sử dụng công nghệ hỗ trợ Backend Postman, mongoDB, firestore… Ưu điểm Website dễ dàng sử dụng, giao diện thân thiện, chức quản lý đầy đủ dễ dàng thống kê thêm mới, cập nhật, tìm kiếm Nhược điểm giải pháp - - Báo cáo chưa đầy đủ Một số chức chưa thể hoàn thiện: o Chatbot tư vấn o Thống kê loại bánh yêu thích o Đề cử sản phẩm mua nhiều… Giải pháp: tiếp tục học hỏi tham khảo từ internet để phát triển thêm chức chưa thực sản phẩm tương lai, cải thiện hệ thống nâng cao tốc độ xử lý website 71 TÀI LIỆU THAM KHẢO (2023, April) Được truy lục từ Boostrap: https://react-bootstrap.github.io/ (2023, May) Được truy lục từ Express Generator: https://viblo.asia/ (2023, April) Được truy lục từ Stackoverflow: https://stackoverflow.com/ (2023, March) Được truy lục từ REACTJS: https://react.dev/ (2023, May) Được truy lục từ MongoDB: https://www.mongodb.com/ (2023, May) Được truy lục từ Postman: https://www.postman.com/ (2023, March) Được truy lục từ MDB: https://mdbootstrap.com/ (2023, March) Được truy lục từ NodeJS Docs: https://nodejs.org/en/docs (2023, March) Được truy lục từ Firebase: https://firebase.google.com/ 72