Đồ án xây dựng website bán đồ nội thất online

ĐẠ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 ĐỒ NỘI THẤT ONLINE GV HƯỚNG DẪN: Nguyễn Tấn Toàn SV THỰC HIỆN: 20521767 - Nguyễn Hoàng Phúc 20521833 - Nguyễn Thanh Sang 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 Sau q trình học tập rèn luyện khoa Cơng nghệ phần mềm trường Đại học Công nghệ thông tin - ĐHQG TP.HCM chúng em trang bị kiến thức bản, kỹ thực tế để lần đầu thực Đồ án Chúng em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ thông tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng tin Chúng em muốn gửi lời cảm ơn chân thành đến thầy Nguyễn Tấn Tồn, người tận tình hướng dẫn giúp đỡ chúng em Những lời khuyên quý báu thầy khơng giúp chúng em hồn thành đề tài mà cịn tài sản vơ giá để chúng em vững bước đường học tập lập nghiệp sau Cuối cùng, chúng em xin cảm ơn gia đình, tất thầy khoa, bạn bè bạn lớp PMCL2020.2, người sẵn sàng đồng hành giúp đỡ chúng em học tập sống Tuy nhiên trình nghiên cứu đề tài, kiến thức chuyên ngành hạn chế nên chúng em cịn nhiều thiếu sót tìm hiểu, đánh giá, trình bày đề tài Rất mong nhận quan tâm, góp ý thầy để đề tài chúng em đầy đủ hoàn chỉnh Chúng em xin chân thành cảm ơn Thành phố Hồ Chí Minh, 06 tháng 07 năm 2023 Nhóm sinh viên thực Nguyễn Hồng Phúc Nguyễn Thanh Sang MỤC LỤC Chương MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.3 Đối tượng sử dụng .2 1.4 Phạm vi 1.5 Công nghệ sử dụng 1.6 Liên kết Chương CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ .4 2.1 ReactJS 2.1.1 Virtual DOM 2.1.2 Component .5 2.1.3 JSX 2.1.4 Props & State 2.1.5 React Lifecycle .6 2.2 NodeJS 2.3 ExpressJS 2.4 MongoDB .9 Chương THIẾT KẾ HỆ THỐNG 11 3.1 Kiến trúc hệ thống: Mơ hình Client – Server 11 3.2 Yêu cầu chức 12 3.2.1 Sơ đồ Use case 12 3.2.2 Danh sách actor 13 3.2.3 Danh sách use case 13 3.2.4 Đặc tả use case 15 Chương THIẾT KẾ CƠ SỞ DỮ LIỆU 33 4.1 Sơ đồ lớp 33 4.2 Danh sách quan hệ 33 4.2.1 Bảng CUSTOMER 33 4.2.2 Bảng STAFF 34 4.2.3 Bảng PRODUCT 34 4.2.4 Bảng PRODUCT_IMAGE 35 4.2.5 Bảng PRODUCT_COLOR 35 4.2.6 Bảng PRODUCT_DIMENSION 35 4.2.7 Bảng CATEGORY 36 4.2.8 Bảng SUBCATEGORY 36 4.2.9 Bảng COLOR 36 4.2.10 Bảng SUPPLIER 36 4.2.11 Bảng CART 37 4.2.12 Bảng CART_ITEM 37 4.2.13 Bảng ORDER 37 4.2.14 Bảng ORDER_ITEM 38 4.2.15 Bảng IMPORT 38 4.2.16 Bảng IMPORT_DETAIL 38 4.2.17 Bảng FEEDBACK 38 4.2.18 Bảng FEEDBACK_IMAGE 39 4.2.19 Bảng ADDRESS 39 4.2.20 Bảng DISCOUNT 40 4.2.21 Bảng WISHLIST 40 4.2.22 Bảng PAYMENT 40 4.2.23 Bảng ATTACHMENT 40 Chương THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 41 5.1 Màn hình trang chủ 41 5.2 Màn hình đăng nhập / đăng ký 42 5.3 Màn hình quên mật 43 5.4 Màn hình sản phẩm 43 5.5 Màn hình chi tiết sản phẩm 44 5.6 Màn hình giỏ hàng 45 5.7 Màn hình đặt hàng 46 5.8 Màn hình thơng tin tài khoản 47 5.9 Màn hình danh sách địa 47 5.10 Màn hình danh sách hóa đơn 48 5.11 Màn hình chi tiết hóa đơn 49 5.12 Màn hình đánh giá sản phẩm 50 5.13 Màn hình đổi mật 51 5.14 Màn hình danh sách sản phẩm yêu thích 52 5.15 Màn hình chúng tơi 53 5.16 Màn hình đăng nhập (nhân viên) 53 5.17 Màn hình trang chủ 54 5.18 Màn hình đổi mật 55 5.19 Màn hình quản lý sản phẩm 56 5.20 Màn hình thêm sản phẩm 57 5.21 Màn hình chi tiết sản phẩm 58 5.22 Màn hình chỉnh sửa sản phẩm 59 5.23 Màn hình quản lý danh sách nhập kho 60 5.24 Màn hình chi tiết nhập kho 61 5.25 Màn hình nhập kho 61 5.26 Màn hình thêm sản phẩm nhập kho 62 5.27 Màn hình quản lý đơn hàng 63 5.28 Màn hình chi tiết đơn hàng 64 5.29 Màn hình quản lý khách hàng 65 5.30 Màn hình chi tiết khách hàng 65 5.31 Màn hình quản lý nhân viên 66 5.32 Màn hình thêm nhân viên 67 5.33 Màn hình chỉnh sửa nhân viên 68 5.34 Màn hình quản lý đợt giảm giá 69 5.35 Màn hình thêm đợt giảm giá 70 5.36 Màn hình chỉnh sửa đợt giảm giá 71 5.37 Màn hình áp dụng đợt giảm giá cho sản phẩm 72 5.38 Màn hình quản lý loại sản phẩm 73 5.39 Màn hình thêm loại sản phẩm 73 5.40 Màn hình chỉnh sửa loại sản phẩm 74 5.41 Màn hình quản lý loại phịng 74 5.42 Màn hình thêm loại phịng 75 5.43 Màn hình chỉnh sửa loại phịng 75 5.44 Màn hình quản lý màu 76 5.45 Màn hình thêm màu 77 5.46 Màn hình chỉnh sửa màu 78 5.47 Màn hình quản lý nhà cung cấp 79 5.48 Màn hình thêm nhà cung cấp 79 5.49 Màn hình chỉnh sửa nhà cung cấp 80 Chương CÀI ĐẶT VÀ KIỂM THỬ 81 6.1 Môi trường cài đặt thử nghiệm 81 6.2 Kết đánh giá 81 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 82 7.1 Kết đạt 82 7.2 Hạn chế 82 7.3 Hướng phát triển 82 BẢNG PHÂN CÔNG CÔNG VIỆC 83 TÀI LIỆU THAM KHẢO 84 DANH MỤC HÌNH ẢNH Hình 1: ReactJS Hình 2: NodeJS Hình 3: ExpressJS Hình 4: MongoDB 10 Hình 5: Sơ đồ Use case cho đối tượng khách hàng 12 Hình 6: Sơ đồ Use case cho đối tượng nhân viên 12 Hình 7: Sơ đồ lớp 33 Hình 8: Màn hình trang chủ 42 Hình 9: Màn hình đăng nhập / đăng ký 42 Hình 10: Màn hình quên mật 43 Hình 11: Màn hình sản phẩm 43 Hình 12: Màn hình chi tiết sản phẩm 44 Hình 13: Màn hình giỏ hàng 45 Hình 14: Màn hình đặt hàng 46 Hình 15: Màn hình thơng tin tài khoản 47 Hình 16: Màn hình danh sách địa 47 Hình 17: Màn hình danh sách hóa đơn 48 Hình 18: Màn hình chi tiết hóa đơn 49 Hình 19: Màn hình đánh giá sản phẩm 50 Hình 20: Màn hình đổi mật 51 Hình 21: Màn hình danh sách sản phẩm yêu thích 52 Hình 22: Màn hình chúng tơi 53 Hình 23: Màn hình đăng nhập (nhân viên) 53 Hình 24: Màn hình trang chủ 54 Hình 25: Màn hình đổi mật 55 Hình 26: Màn hình quản lý sản phẩm 56 Hình 27: Màn hình thêm sản phẩm 57 Hình 28: Màn hình chi tiết sản phẩm 58 Hình 29: Màn hình chỉnh sửa sản phẩm 59 Hình 30: Màn hình quản lý danh sách nhập kho 60 Hình 31: Màn hình chi tiết nhập kho 61 Hình 32: Màn hình nhập kho 62 Hình 33: Màn hình thêm sản phẩm nhập kho 62 Hình 34: Màn hình quản lý đơn hàng 63 Hình 35: Màn hình chi tiết đơn hàng 64 Hình 36: Màn hình quản lý khách hàng 65 Hình 37: Màn hình chi tiết khách hàng 65 Hình 38: Màn hình quản lý nhân viên 66 Hình 39: Màn hình thêm nhân viên 67 Hình 40: Màn hình chỉnh sửa nhân viên 68 Hình 41: Màn hình quản lý đợt giảm giá 69 Hình 42: Màn hình thêm đợt giảm giá 70 Hình 43: Màn hình chỉnh sửa đợt giảm giá 71 Hình 44: Màn hình áp dụng đợt giảm giá cho sản phẩm 72 Hình 45: Màn hình quản lý loại sản phẩm 73 Hình 46: Màn hình thêm loại sản phẩm 73 Hình 47: Màn hình chỉnh sửa loại sản phẩm 74 Hình 48: Màn hình quản lý loại phịng 74 Hình 49: Màn hình thêm loại phịng 75 Hình 50: Màn hình chỉnh sửa loại phịng 75 Hình 51: Màn hình quản lý màu 76 Hình 52: Màn hình thêm màu 77 Hình 53: Màn hình chỉnh sửa màu 78 Hình 54: Màn hình quản lý nhà cung cấp 79 Hình 55: Màn hình thêm nhà cung cấp 79 Hình 56: Màn hình chỉnh sửa nhà cung cấp 80 5.35 Màn hình thêm đợt giảm giá Hình 42: Màn hình thêm đợt giảm giá Biến cố Xử lý Nhấn icon X Hủy thao tác trở hình trước Nhấn nút “Xác nhận” Thêm đợt giảm giá vào database Nhấn nút “Hủy bỏ” Hủy thao tác trở hình trước STT 70 5.36 Màn hình chỉnh sửa đợt giảm giá Hình 43: Màn hình chỉnh sửa đợt giảm giá Biến cố Xử lý Nhấn icon X Hủy thao tác trở hình trước Nhấn nút “Xác nhận” Cập nhật thông tin đợt giảm giá vào database Nhấn nút “Hủy bỏ” Hủy thao tác trở hình trước STT 71 5.37 Màn hình áp dụng đợt giảm giá cho sản phẩm Hình 44: Màn hình áp dụng đợt giảm giá cho sản phẩm Biến cố Xử lý Nhấn icon X Hủy thao tác trở hình trước Nhấn nút “Xác nhận” Áp dụng đợt giảm giá cho sản phẩm chọn Nhấn nút “Hủy bỏ” Hủy thao tác trở hình trước STT 72 5.38 Màn hình quản lý loại sản phẩm Hình 45: Màn hình quản lý loại sản phẩm 5.39 Màn hình thêm loại sản phẩm Hình 46: Màn hình thêm loại sản phẩm 73 5.40 Màn hình chỉnh sửa loại sản phẩm Hình 47: Màn hình chỉnh sửa loại sản phẩm 5.41 Màn hình quản lý loại phịng Hình 48: Màn hình quản lý loại phịng 74 5.42 Màn hình thêm loại phịng Hình 49: Màn hình thêm loại phịng 5.43 Màn hình chỉnh sửa loại phịng Hình 50: Màn hình chỉnh sửa loại phịng 75 5.44 Màn hình quản lý màu Hình 51: Màn hình quản lý màu 76 5.45 Màn hình thêm màu Hình 52: Màn hình thêm màu 77 5.46 Màn hình chỉnh sửa màu Hình 53: Màn hình chỉnh sửa màu 78 5.47 Màn hình quản lý nhà cung cấp Hình 54: Màn hình quản lý nhà cung cấp 5.48 Màn hình thêm nhà cung cấp Hình 55: Màn hình thêm nhà cung cấp 79 5.49 Màn hình chỉnh sửa nhà cung cấp Hình 56: Màn hình chỉnh sửa nhà cung cấp 80 Chương CÀI ĐẶT VÀ KIỂM THỬ 6.1 Môi trường cài đặt thử nghiệm - Môi trường phát triển: Visual Studio Code - Môi trường quản lý phiên source code: Github - Deploy Front-end: Vercel - Deploy Back-end: Render 6.2 Kết đánh giá - Giao diện thân thiện, dễ sử dụng, dễ tiếp cận - Các chức hoàn thiện khơng gặp phải lỗi q nghiêm trọng - Tốc độ tải trang, tốc độ phản hồi hệ thống chưa tối ưu ổn định, không ảnh hưởng nhiều đến trải nghiệm người dùng - Có thể đảm bảo bảo mật thông tin người dùng 81 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 - Kết đạt Hiểu rõ HTML, CSS, TypeScript, JavaScript thư viện ReactJS để triển Front-end cho website - Hiểu rõ NodeJS, ExpressJS Mongoose để phát triển Back-end - Biết thêm cách sử dụng Figma để thiết kế giao diện người dùng - Biết thêm tảng deploy website Vercel, Render - Hiểu rõ quy trình phát triển website 7.2 Hạn chế - Tốc độ hệ thống chưa tối ưu việc xử lý lượng liệu lớn - Một số chức chưa tối ưu tính tiện dụng người dùng - Bảo mật chặt chẽ thơng tin khách hàng khó khăn - Số lượng chức cho khách hàng chưa đầy đủ so với kế hoạch ban đầu quản lý thời gian chưa hiệu 7.3 - Hướng phát triển Bổ sung chức mới: Tương tác với người bán chatbox, dịch vụ tư vấn nội thất góc cảm hứng nội thất, quản lý feedback để loại bỏ feedback nhạy cảm, thống kê doanh thu cho khách hàng - Tối ưu hóa chức để thuận tiện cho người dùng - Tối ưu tốc độ hệ thống, tăng cường bảo mật - Phát triển ứng dụng mobile để tiếp cận thêm với đối tượng khách hàng 82 BẢNG PHÂN CƠNG CƠNG VIỆC Cơng việc Nguyễn Hồng Phúc - 20521767 Nguyễn Thanh Sang - 20521833 Thiết kế UI x x Thiết kế sở liệu x x Code Front-end cho website khách hàng x Code Front-end cho website admin x Code Back-end x Testing x x Viết báo cáo x x 83 TÀI LIỆU THAM KHẢO - ReactJS: https://react.dev/reference/react - TailwindCSS: https://tailwindcss.com/docs/installation - MaterialUI: https://mui.com/material-ui/getting-started/ - ExpressJS: https://expressjs.com - Mongoose: https://mongoosejs.com/docs/ 84