Phát triển website quản lý bán hàng thời trang sober sử dụng reactjs, nodejs, mongo đồ án tốt nghiệp

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI: PHÁT TRIỂN WEBSITE QUẢN LÝ BÁN HÀNG THỜI TRANG SOBER Sinh viên thực : Nguyễn Văn Công Ngày sinh : 28 / 09 /1999 Lớp : DCCNTT8.10 Khoa : Công nghệ thông tin Mã sinh viên : 1752480201006 Giáo viên hướng dẫn : ThS Đỗ Thị Huyền Bắc Ninh – Năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á NGUYỄN VĂN CÔNG TÊN ĐỀ TÀI: PHÁT TRIỂN WEBSITE QUẢN LÝ BÁN HÀNG THỜI TRANG SOBER Giáo viên hướng dẫn: ThS Đỗ Thị Huyền Bắc Ninh – Năm 2022 Năm 2022 Nguyễn Văn Công Khoa: CNTT LỜI CẢM ƠN Lời em xin trân thành cảm ơn quý thầy cô giúp em thực đề tài Đặc biệt cô Đỗ Thị Huyền tận tình hướng dẫn, giúp đỡ, bảo em suốt thời gian thực khóa luận tốt nghiệp Đồng thời em xin trân trọng cảm ơn tình cảm q báu mà thầy trường Đại Học Công Nghệ Đông Á truyền đạt cho em những kinh nghiệm, kỹ thuật cách thức việc xây dựng đề tài Tuy nhiên thời gian hạn chế em chưa thể phát huy hết ý tưởng, khả hỗ trợ ngôn ngữ lập trình kỹ thuật lập trình vào đề tài Trong thời gian thực đề tài không tránh khỏi thiếu xót, Em mong nhận đóng góp từ q thầy bạn Em xin chân thành cảm ơn Bắc Ninh, ngày … tháng … năm … Sinh viên thực thiện Nguyễn Văn Công Năm 2022 Nguyễn Văn Công Khoa: CNTT LỜI CAM ĐOAN Em cam đoan “Phát triển website bán hàng thời trang sober” đề tài nghiên cứu em Những kết số liệu báo cáo thực tập tốt nghiệp thực phát triển bời thân, không chép nguồn khác Em hoàn toàn chịu trách nhiệm trước nhà trường cam đoan Em xin chân thành cảm ơn Bắc Ninh, ngày … tháng … năm … Sinh viên thực thiện Nguyễn Văn Công Năm 2022 Nguyễn Văn Công Khoa: CNTT MỤC LỤC LỜI CẢM ƠN ii LỜI CAM ĐOAN iii DANH MỤC TỪ VIẾT TẮT DANH MỤC HÌNH VẼ DANH MỤC BẢNG BIỂU MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tổng quan đề tài 1.1.1 Đặt vấn đề 1.1.2 Mô tả đề tài 1.1.3 Mục tiêu đề tài 1.1.4 Phạm vi đề tài CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Mongo DB 2.1.1 Cơ sở liệu NoSQL 2.1.2 Cơ sở liệu MongoDB 11 2.2 ExpressJS 12 2.2.1 ExpressJs 12 2.2.2 Routing ExpressJS 13 2.2.3 Middleware ExpressJS 14 2.3 ReactJS 15 2.3.1 React ? .15 2.3.2 JSX 15 2.3.3 Ưu nhược điểm ReactJS 16 2.4 NodeJS 17 2.4.1 Giới thiệu NodeJS 17 2.4.2 Ứng dụng NodeJS 17 2.4.3 Ưu nhược điểm Nodejs .18 2.5 Socket.io 19 2.5.1 Giới thiệu socket.io .19 2.5.2 Ứng dụng socket.io 20 2.5.3 Ưu điểm socket.io .20 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .21 3.1 Biểu đồ hoạt động 21 Năm 2022 Nguyễn Văn Công Khoa: CNTT 3.1.1 Biểu đồ hoạt động chức thêm/xóa/sửa giỏ hàng .21 3.1.2 Biểu đồ hoạt động chức thêm/xóa/sửa sản phẩm 22 3.1.3 Biểu đồ hoạt động chức thêm/xóa/sửa danh mục sản phẩm 23 3.1.4 Biểu đồ hoạt động chức tìm kiếm 24 3.1.5 Biểu đồ hoạt động chức đặt hàng 25 3.2 Biểu đồ ca sử dụng 26 3.2.1 Biểu đồ ca sử dụng tổng quát 26 3.2.2 Biểu đồ ca sử dụng khách hàng tìm kiếm sản phẩm 27 3.2.3 Biểu đồ ca sử dụng khách hàng toán 28 3.2.4 Biểu đồ ca sử dụng thêm sản phẩm vào giỏ hàng .29 3.2.5 Biểu đồ ca sử dụng quản lý danh mục sản phẩm 30 3.2.6 Biểu đồ ca sử dụng quản lý đơn hàng 31 3.2.7 Biểu đồ ca sử dụng quản lý sản phẩm 32 3.3 Biểu đồ 33 3.3.1 Biểu đồ đăng nhập 33 3.3.2 Biểu đồ cập nhật danh mục sản phẩm 34 3.3.3 Biểu đồ thêm danh mục sản phẩm 35 3.3.4 Biểu đồ xóa danh mục sản phẩm 36 3.3.5 Biểu đồ thêm sản phẩm 37 3.3.6 Biểu đồ cập nhật sản phẩm 38 3.3.7 Biểu đồ xóa sản phẩm 39 3.3.8 Biểu đồ đăng ký 40 3.3.9 Biểu đồ tìm kiếm sản phẩm 41 3.3.10 Biểu đồ thêm sản phẩm vào giỏ hàng 42 3.3.11 Biểu đồ cập nhật sản phẩm vào giỏ hàng 43 3.3.12 Biểu đồ xóa sản phẩm khỏi giỏ hàng 44 3.3.13 Biểu đồ toán từ giỏ hàng 45 3.3.14 Biểu đồ toán qua zalo pay .45 3.3.15 46 3.4 Mơ hình thực thể liên kết ERD 46 3.5 Thiết kế sở liệu .47 3.5.1 Thiết kế sở liệu mức logic .47 3.5.2 Thiết kế sở liệu mức vật lý .47 3.6 Thiết kế giao diện 50 3.6.1 Giao diện trang chủ 50 3.6.2 Giao diện trang sản phẩm 50 3.6.3 Giao diện trang admin dashboard 51 Năm 2022 Nguyễn Văn Công Khoa: CNTT 3.6.4 Giao diện trang user dashboard .51 3.6.5 Giao diện trang đăng ký 52 3.6.6 Giao diện trang đăng nhập .52 3.6.7 Giao diện trang quản lý sản phẩm 53 3.6.8 Giao diện trang thêm sản phẩm .53 3.6.9 Giao diện trang sửa thông tin sản phẩm 54 3.6.10 Giao diện trang quản lý subcribers 55 3.6.11 Giao diện trang thêm subcribers 55 3.6.12 Giao diện trang quản lý giỏ hàng 56 3.6.13 Giao diện trang quản lý đơn hàng 56 3.6.14 Giao diện trang xem chi tiết sản phẩm 57 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 57 4.1 Kết đạt 57 4.2 Hạn chế đề tài 57 4.3 Hướng phát triển 58 TÀI LIỆU THAM KHẢO 59 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT DANH MỤC TỪ VIẾT TẮT STT Ký hiệu Viết đầy đủ RDBMS Relational Database Management System JSON Javascript Object Notation API Application Programming Interface CRUD Create, Read, Update, Delete NPM Node package manager DOM Document Object Model JSX Javascript XML HTTP Hypertext Transfer Protocol URL Uniform Resource Locator Năm 2022 NGUYỄN VĂN CƠNG Khoa: CNTT DANH MỤC HÌNH VẼ Hình 1.1 Cấu trúc Document MongoDB 11 Hình 1.2 Code ví dụ Route 13 Hình 2.1 Biểu đồ hoạt động chức thêm/xóa/sửa giỏ hàng 21 Hình 2.2 Biểu đồ hoạt động chức thêm/xóa/sửa sản phẩm 22 Hình 2.3 Biểu đồ hoạt động chức thêm/xóa/sửa danh mục 23 Hình 2.4 Biểu đồ hoạt động chức tìm kiếm 24 Hình 2.5 Biểu đồ hoạt động chức đặt hàng 25 Hình 2.6 Biểu đồ ca sử dụng tổng quát 26 Hình 2.7 Biểu đồ ca sử dụng chức tìm kiếm sản phẩm 27 Hình 2.8 Biểu đồ ca sử dụng khách hàng toán 28 Hình 2.9 Biểu đồ ca sử dụng thêm sản phẩm vào giỏ hàng 29 Hình 2.10 Biểu đồ ca sử dụng quản lý danh mục sản phẩm 30 Hình 2.11 Biểu đồ ca sử dụng quản lý đơn hàng 31 Hình 2.12 Biểu đồ ca sử dụng quản lý sản phẩm 32 Hình 2.13 Biểu đồ đăng nhập 33 Hình 2.14 Biểu đồ cập nhật danh mục sản phẩm 34 Hình 2.15 Biểu đồ thêm dan mục sản phẩm 35 Hình 2.16 Biểu đồ xóa danh mục sản phẩm 36 Hình 2.17 Biểu đồ thêm sản phẩm 37 Hình 2.18 Biểu đồ cập nhật sản phẩm 38 Hình 2.19 Biểu đồ xóa sản phẩm 39 Hình 2.20 Biểu đồ đăng ký 40 Hình 2.21 Biểu đồ tìm kiếm sản phẩm 41 Hình 2.22 Biểu đồ thêm sản phẩm vào giỏ hàng 42 Hình 2.23 Biểu đồ cập nhật vào giỏ hàng 43 Hình 2.24 Biểu đồ xóa sản phẩm khỏi giỏ hàng 44 Hình 2.25 Mơ hình thực thể liên kết 46 Hình 2.26 Biểu đồ tốn qua zalo pay 46 Hình 3.1 Quan hệ document 47 Năm 2022 NGUYỄN VĂN CƠNG Khoa: CNTT Hình 3.2 Giao diện trang chủ 50 Hình 3.3 Giao diện trang sản phẩm 50 Hình 3.4 Giao diện trang admin dashboard 51 Hình 3.5 Giao diện trang user dashboard 51 Hình 3.6 Giao diện trang đăng ký 52 Hình 3.7 Giao diện trang đăng nhập 52 Hình 3.8 Giao diện trang quản lý sản phẩm 53 Hình 3.9 Giao diện trang thêm sản phẩm 53 Hình 3.10 Giao diện trang sửa thông tin sản phẩm 54 Hình 3.11 Giao diện trang quản lý subcribers 55 Hình 3.12 Giao diện trang sửa danh mục sản phẩm Error! Bookmark not defined Hình 3.13 Giao diện trang giỏ hàng 56 Hình 3.14 Giao diện trang quản lý đơn hàng 56 Hình 3.15 Giao diện trang xem chi tiết sản phẩm 57 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.3.13 Biểu đồ tốn từ giỏ hàng Hình 3.25 Biểu đồ toán từ giỏ hàng 3.3.14 Biểu đồ tốn qua zalo pay Hình 3.26 Biểu đồ toán qua zalo pay 45 Năm 2022 NGUYỄN VĂN CƠNG Khoa: CNTT 3.3.15 3.4 Mơ hình thực thể liên kết ERD Hình 3.26 Mơ hình thực thể liên kết 46 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.5 Thiết kế sở liệu 3.5.1 Thiết kế sở liệu mức logic Hình 3.25 Quan hệ document 3.5.2 Thiết kế sở liệu mức vật lý 3.5.2.1 Bảng User STT Tên trường Kiểu liệu Rằng buộc Mô tả Primary key Mã tài khoản _id objectId userAvt String ảnh người dùng userName String Tên người dùng userTinh String Tỉnh thành phố userHuyen String Huyện userAddress String Địa người dùng userPhone Number Số điện thoại người dùng userEmail String Email người dùng userPassword String Password người dùng 10 userRole String Quyền, vai trò 11 userCreateDay datetime Ngày tạo user 47 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT Bảng 3.1 Bảng user 3.5.2.2 Bảng Category STT Tên trường Kiểu liệu Rằng buộc Mô tả _id String Primary key Mã danh mục cateName String Tên danh mục Bảng 3.2 Category 3.5.2.3 Bảng Product STT Tên trường Kiểu liệu Rằng buộc Mô tả Primary key Mã đơn sản phẩm _id ObjectId productImg Array ảnh sản phẩm productSize array Size sản phẩm productVote Array Đánh giá sản phẩm productName String Tên sản phẩm Product sale Number Giá sale sản phẩm productPrice Number Giá sản phẩm productFinalPrice Number Giá cuối sản phẩm productGroupCate String 10 productCate String Nhóm sản phẩm productSex String Sản phẩm cho giới tính productDate Datetime Ngày tạo sản phẩm productDes String Mô tả sản phẩm productSoId Number Mã sản phẩm Thuộc nhóm danh mục sản phẩm Bảng 3.3 Bảng product 48 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.5.2.4 Bảng Order STT Tên trường Kiểu liệu Rằng buộc Mô tả Primary key Mã đơn hàng _id objectId orderList Array Danh sách order orderId Number Mã order orderName String Tên order orderEmail String Mail order orderPhone String Số điện thoại orderAddress String Địa orderTinh String Tỉnh thành phố 10 orderHuyen string Huyện 11 orderTotal number Tổng toán String Phương thức toán datetime Ngày order 12 13 orderPayment Method orderDate Bảng 3.4 Bảng orders 49 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6 Thiết kế giao diện 3.6.1 Giao diện trang chủ Hình 3.26 Giao diện trang chủ 3.6.2 Giao diện trang sản phẩm Hình 3.27 Giao diện trang sản phẩm 50 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6.3 Giao diện trang admin dashboard Hình 3.28 Giao diện trang admin dashboard 3.6.4 Giao diện trang user dashboard Hình 3.29 Giao diện trang user dashboard 51 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6.5 Giao diện trang đăng ký Hình 3.30 Giao diện trang đăng ký 3.6.6 Giao diện trang đăng nhập Hình 3.31 Giao diện trang đăng nhập 52 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6.7 Giao diện trang quản lý sản phẩm Hình 3.32 Giao diện trang quản lý sản phẩm 3.6.8 Giao diện trang thêm sản phẩm Hình 3.33 Giao diện trang thêm sản phẩm 53 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6.9 Giao diện trang sửa thơng tin sản phẩm Hình 3.34 Giao diện trang sửa thông tin sản phẩm 54 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6.10 Giao diện trang quản lý subcribers Hình 3.35 Giao diện trang quản lý subcribers 3.6.11 Giao diện trang thêm subcribers Hình 3.36 Giao diện trang thêm subcribers 55 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6.12 Giao diện trang quản lý giỏ hàng Hình 3.37 Giao diện trang giỏ hàng 3.6.13 Giao diện trang quản lý đơn hàng Hình 3.38 Giao diện trang quản lý đơn hàng 56 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 3.6.14 Giao diện trang xem chi tiết sản phẩm Hình 3.39 Giao diện trang xem chi tiết sản phẩm CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt Phần mềm có giao diện dễ nhìn, thân thiện với người sử dụng Sau nghiên cứu, em xây dựng website quản lý bán hàng thời trang cho hãng thời trang sober, thay cách bán hàng truyền thống Phần mềm có ứng dụng thực tiễn cửa hàng muốn thay đổi cách kinh doanh từ truyền thống sang trực tuyến 4.2 Hạn chế đề tài Đề tài xây dựng website bán hàng hồn thành xong khơng tránh khỏi thiếu xót hạn chế định: - Website thiếu chức năng, chưa hồn thiện - Kỹ phân tích hệ thống cịn nhiều hạn chế - Chưa có chức lưu, phục hồi liệu 57 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT 4.3 Hướng phát triển Tiếp tục bổ sung chức mà website chưa có để phần mềm ứng dụng rộng rãi hàng Tiếp tục hồn thiện chương trình hi vọng đáp ứng nhu cầu người sử dụng Hoàn thiện chức lưu phục hồi liệu cho chương trình Phát triển phần mềm để triển khai nhiều cửa hàng khác Phát triển ứng dụng tảng di động 58 Năm 2022 NGUYỄN VĂN CÔNG Khoa: CNTT TÀI LIỆU THAM KHẢO Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node By Vasan Subramanian https://expressjs.com https://www.mongodb.com https://www.nodejs.com http://www.reactjs.org 59