Xây dựng website bán balo sử dụng asp net core và reactjs

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN BALO SỬ DỤNG ASP.NET CORE VÀ REACTJS GVHD: TS LÊ VĂN VINH SVTH : NGUYỄN ĐỨC MẠNH PHẠM VĂN THẮNG S K L0 Tp Hồ Chí Minh, năm 2023 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN -  - KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG WEBSITE BÁN BALO SỬ DỤNG ASP.NET CORE VÀ REACTJS GIẢNG VIÊN HƯỚNG DẪN: TS LÊ VĂN VINH SINH VIÊN THỰC HIỆN NGUYỄN ĐỨC MẠNH– 19110396 PHẠM VĂN THẮNG – 19110463 KHĨA 2019 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày tháng năm 2023 NHIỆM VỤ ĐỀ TÀI Họ tên sinh viên 1: Nguyễn Đức Mạnh MSSV 1: 19110396 Họ tên sinh viên 2: Phạm Văn Thắng MSSV 2: 19110463 Thời gian thực hiện: Từ 13/02/2023 đến 30/06/2023 Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng website bán balo sử dụng ASP.NET Core ReactJS Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh Nội dung: Lý thuyết: - Tìm hiểu cơng nghệ: ReactJS, ASP.NET Core, PostgreSQL, Json Web Token - Khảo sát website khác có chủ đề để cải thiện chức trải nghiệm người dùng Thực hành: - Áp dụng công nghệ vào Website kinh doanh sản phẩm balo TRƯỞNG NGHÀNH (Ký, ghi rõ họ tên) GIÁO VIÊN HƯỚNG DẪN (Ký, ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ******** ******** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên 1: Nguyễn Đức Mạnh MSSV 1: 19110396 Họ tên sinh viên 2: Phạm Văn Thắng MSSV 2: 19110463 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán balo sử dụng ASP.NET Core ReactJS Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh NHẬN XÉT Về nội dung đề tài khối lượng thực …………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………… …………………………………………………………………………………………… Ưu điểm …………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………… …………………………………………………………………………………………… Khuyết điểm …………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………… …………………………………………………………………………………………… Đề nghị cho bảo vệ hay không? ………………………………………………………………………………………………………………… Đánh giá loại ………………………………………………………………………………………………………………… Điểm ………………………………………………………………………………………………………………… Tp Hồ Chí Minh, ngày tháng năm 2023 Giáo viên hướng dẫn (Ký ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ******** ******** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên 1: Phạm Văn Thắng MSSV 1: 19110463 Họ tên sinh viên 2: Nguyễn Đức Mạnh MSSV 2: 19110396 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán balo sử dụng ASP.NET Core ReactJS Họ tên Giáo viên phản biện: ThS Trương Thị Ngọc Phượng NHẬN XÉT Về nội dung đề tài khối lượng thực …………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………… …………………………………………………………………………………………… Ưu điểm …………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………… …………………………………………………………………………………………… Khuyết điểm …………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………… …………………………………………………………………………………………… Đề nghị cho bảo vệ hay không? ………………………………………………………………………………………………………………… Đánh giá loại ………………………………………………………………………………………………………………… Điểm ………………………………………………………………………………………………………………… Tp Hồ Chí Minh, ngày tháng năm 2023 Giáo viên hướng dẫn (Ký ghi rõ họ tên) LỜI CẢM ƠN Lời mở đầu, nhóm em xin phép gửi lời cảm ơn chân thành đến Khoa Công Nghệ Thông Tin - Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm chúng em học tập môi trường tốt để trau dồi kiến thức, phát triển tư móng vững để thực đề tài cách tốt Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn chân thành sâu sắc đến thầy Lê Văn Vinh Thầy tận tâm giúp đỡ đưa góp ý quý giá cho nhóm chúng em phát triển tốt từ lúc đăng ký đề tài lúc kết thúc tiểu luận Nhờ kiến thức chuyên ngành từ thầy cô kinh nghiệm từ thực tế ngồi xã hội thơng qua thời gian học tập trường thực tập công ty Tất điều cung cấp cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Đây hành trang vô lớn chúng em trước bước sống Chúng em cố gắng hoàn thành đề tài cách tốt nhất, nhiên cịn nhiều thiếu sót khó tránh khỏi Chúng em hy vọng nhận lời đóng góp từ q thầy để qua chúng em rút học kinh nghiệm tiếp tục hồn thiện sản phẩm cách chu hồn tốt Nhóm thực Phạm Văn Thắng - 19110463 Nguyễn Đức Mạnh - 19110396 MỤC LỤC LỜI CẢM ƠN MỤC LỤC PHẦN MỞ ĐẦU 13 Tính cấp thiết đề tài 13 Mục tiêu đề tài 13 Đối tượng nghiên cứu 14 Phạm vi nghiên cứu 14 Phân công 14 PHẦN NỘI DUNG 15 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 15 1.1 ReactJS 15 1.2 ASP.NET Core 15 1.3 PostgreSQL 16 1.4 Json Web Token 17 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HĨA U CẦU 18 2.1 Khảo sát trạng 18 2.2 Kết luận khảo sát 21 2.3 Kiến trúc chung hệ thống 21 2.4 Xác định yêu cầu 21 2.5 Mơ hình hóa u cầu 23 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ 33 3.1 Lược đồ lớp 33 3.2 Lược đồ 34 3.3 Thiết kế sở liệu 57 3.4 Thiết kế giao diện 65 CHƯƠNG 4: CÀI ĐẶT PHẦN MỀM VÀ KIỂM THỬ 84 4.1 Cài đặt phần mềm 84 4.2 Kiểm thử 85 PHẦN KẾT LUẬN 100 Kết đạt 100 1.1 Về lý thuyết 100 1.2 Về ứng dụng 100 1.3 Về thành viên nhóm 100 Ưu điểm 101 Nhược điểm 101 TÀI LIỆU THAM KHẢO 102 DANH MỤC HÌNH ẢNH Hình Website "Saigon Swangger” 18 Hình Website “balohanghieu” 19 Hình Website “balocenter” 20 Hình Kiến trúc chung hệ thống 21 Hình Sơ đồ use case phía khách hàng 23 Hình Sơ đồ use case phía quản trị viên 24 Hình Sơ đồ lớp baloshop 33 Hình Sơ đồ Đăng nhập 34 Hình Sơ đồ Đăng ký 35 Hình 10 Sơ đồ Cập nhật thông tin cá nhân 36 Hình 11 Sơ đồ Xem thông tin chi tiết sản phẩm 37 Hình 12 Sơ đồ tìm kiếm sản phẩm 38 Hình 13 Sơ đồ Lọc sản phẩm 38 Hình 14 Sơ đồ Thêm sản phẩm vào giỏ hàng 39 Hình 15 Sơ đồ Xóa sản phẩm khỏi giỏ hàng 39 Hình 16 Sơ đồ Đặt hàng 40 Hình 17 Sơ đồ Thống kê doanh thu 41 Hình 18 Sơ đồ Thêm sản phẩm 42 Hình 19 Sơ đồ Cập nhật sản phẩm 43 Hình 20 Sơ đồ tuẩn tự Xóa sản phẩm 44 Hình 21 Sơ đồ Thêm phân loại 45 Hình 22 Sơ đồ Cập nhật phân loại 46 Hình 23 Sơ đồ Xóa phân loại 47 Hình 24 Sơ đồ Thêm thương hiệu 48 Hình 25 Sơ đồ Cập nhật thương hiệu 49 Hình 26 Sơ đồ Xóa thương hiệu 50 Hình 27 Sơ đồ Thêm nhân viên 51 Hình 28 Sơ đồ Cập nhật trang thái hoạt động cho nhân viên 52 Hình 29 Sơ đồ Cập nhật trạng thái hoạt động cho khách hàng 53 Hình 30 Sơ đồ Thêm tin tức 54 Hình 31 Sơ đồ cập nhật tin tức 55 Hình 32 Sơ đồ xóa tin tức 56 Hình 33 Sơ đồ usecase phía quản trị viên 57 Hình 34 Trang đăng ký 65 Hình 35 Trang đăng nhập 66 Hình 36 Trang chủ 67 Hình 37 Trang chi tiết sản phẩm 68 Hình 38 Trang thơng tin tài khoản 69 Hình 39 Bộ lọc 70 Hình 40 Trang địa 71 Hình 41 Trang liên hệ 72 Hình 42 Trang chọn địa nhận hàng 73 Hình 43 Trang giỏ hàng 74 Hình 44 Trang toán 75 Hình 45 Trang tin tức 76 Hình 46 Trang điều khiển 77 Hình 47 Trang quản lý nhân viên 79 Hình 48 Trang quản lý đơn hàng 80 Hình 49 Trang quản lý sản phẩm 81 Hình 50 Trang thêm sản phẩm 82 Hình 51 Trang thống kê doanh thu 83 Hình 52 Test case chức kiểm thử 85 Hình 53 Test case chức đăng ký 86 Hình 54 Test case giao diện trang chủ 86 Hình 55 Test case chức mua hàng chưa đăng nhập 87 Hình 56 Kiểm thử chức mua hàng đăng nhập 88 Hình 57 Test case chức xóa sản phẩm giỏ hàng 88 Hình 58 Test case chức tăng / giảm số lượng sản phẩm giỏ hàng 89 Hình 59 Test case chức mua hàng không nhập địa 90 Hình 60 Test case chức toán đơn hàng phương thức Momo 91 Hình 61 Test case chức xem lịch sử đơn hàng 92 Hình 62 Test case chức xem chi tiết sản phẩm 92 Hình 63 Test case chức lọc liệu sản phẩm 93 Hình 64 Test case giao diện trang thống kê 94 Hình 65 Test case giao diện trang đơn hàng 94 Hình 66 Test case giao diện trang đơn hàng 95 Hình 67 Test case giao diện trang Nhân viên 95 Hình 68 Test case giao diện trang quản lý sản phẩm 96 Hình 69 Test case giao diện trang quản lý thương hiệu 97 Hình 70 Test case giao diện trang quản lý phân loại sản phẩm 98 Hình 71 Kiểm thử chức xác nhận đơn hàng 99