Đồ án 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 SKL010874 Tp Hồ Chí Minh, năm 2023 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 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM HCM KHOA CÔNG NGHỆ Độc lập – Tự – Hạnh phúc ******** THÔNG TIN ******** 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 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM HCM KHOA CÔNG NGHỆ Độc lập – Tự – Hạnh phúc ******** THÔNG TIN ******** 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 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 DANH MỤC BẢNG BIỂU Bảng Đặc tả usecase đăng nhập 25 Bảng Đặc tả usecase đăng ký 26 Bảng Đặc tả usecase chỉnh sửa thông tin cá nhân 27 Bảng Đặc tả usecase xem thông tin chi tiết balo 28 Bảng Đặc tả usecase tra cứu thông tin balo 28 Bảng Đặc tả usecase thêm sản phẩm vào giỏ hàng 29 Bảng Đặc tả usecase xóa sản phẩm khỏi giỏ hàng 29 Bảng Đặc tả usecase toán đơn hàng 30 Bảng Đặc tả usecase thêm/ cập nhật/ xóa sản phẩm 31 Bảng 10 Đặc tả usecase thống kê 31 Bảng 11 Đặc tả usecase / cập nhật/ xóa tin tức 32 Bảng 12 Chi tiết bảng Product 58 Bảng 13 Chi tiết bảng User 58 Bảng 14 Chi tiết bảng Account 59 Bảng 15 Chi tiết bảng Invoice 59 Bảng 16 Chi tiết bảng Invoice Detail 60 Bảng 17 Chi tiết bảng Image Product 60 Bảng 18 Chi tiết bảng Product Review 60 Bảng 19 Chi tiết bảng Product Review Reaction 60 Bảng 20 Chi tiết bảng Product Review Image 61 Bảng 21 Chi tiết bảng File Upload 61 Bảng 22 Chi tiết bảng Category 61 Bảng 23 Chi tiết bảng Invoice Detail 61 Bảng 24 Chi tiết bảng Cart 62 Bảng 25 Chi tiết bảng Brand 62 Bảng 26 Chi tiết bảng Post 62 Bảng 27 Chi tiết bảng Post Image 62 Bảng 28 Chi tiết bảng Address 63 Bảng 29 Chi tiết bảng Token 63 Bảng 30 Chi tiết bảng Mail 64 Bảng 31 Chi tiết bảng MailLog 64 Bảng 32 Mô tả giao diện Trang đăng ký 65 Bảng 33 Mô tả giao diện Trang đăng nhập 66 Bảng 34 Mô tả giao diện Trang chủ 68 Bảng 35 Mô tả chi tiết Trang chi tiết sản phẩm 68 Bảng 36 Mô tả giao diện Đổi thông tin tài khoản 69 Bảng 37 Mô tả giao diện Bộ lọc 70 Bảng 38 Mô tả chi tiết Trang địa 71 Bảng 39 Mô tả chi tiết Trang liên hệ 72 10