Đồ án xây dựng website bán quần áo sử dụng spring boot 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 NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN QUẦN ÁO SỬ DỤNG SPRING BOOT VÀ REACTJS GVHD: TS LÊ VĂN VINH SVTH : PHẠM ĐINH QUỐC HÒA TRẦN ANH TIẾN SKL010873 Tp Hồ Chí Minh, năm 2023 Đ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 HƯỚNG DẪN Họ tên sinh viên 1: Phạm Đinh Quốc Hòa MSSV 1: 19110365 Họ tên sinh viên 2: Trần Anh Tiến MSSV 2: 19110471 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán quần áo sử dụng Spring Boot 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 Đinh Quốc Hòa MSSV 1: 19110365 Họ tên sinh viên 2: Trần Anh Tiến MSSV 2: 19110471 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán quần áo sử dụng Spring Boot ReactJS Họ tên Giáo viên phản biện: ThS Mai Anh Thơ 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 phản biện (Ký ghi rõ họ tên) LỜI CẢM ƠN Lời đầu tiên, nhóm xin phép gửi lời cảm ơn chân thành đến với 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 trau dồi, học tập phát triển tảng kiến thức vững để thực đề tài Bên cạnh đó, nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn chân thành sâu sắc Thầy tận tâm hướng dẫn nhiệt tình đưa góp ý quý báu cho nhóm chúng em suốt trình từ lúc bắt đầu kết thúc đề tài Nhờ có tảng kiến thức chuyên ngành vững cộng thêm với kinh nhiệm yêu cầu thực tế xã hội thông qua việc học trường thực tập công ty Tập thể thầy cô Khoa Công Nghệ Thông Tin đặc biệt thầy Lê Văn Vinh đem đến 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 Đặc biệt điều giúp thơi thúc chúng em hồn thành đề tài Đây hành trang vô lớn chúng em trước bước sống Tuy nhiên lượng kiến thức vô tận với khả hạn hẹp chúng em cố gắng để hồn thành cách tốt Chính việc xảy thiếu sót điều khó tránh khỏi Chúng em hi vọng nhận góp ý tận tình q thầy (cơ) qua chúng em rút học kinh nghiệm hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt Chúng em xin chân thành cảm ơn! Nhóm thực Phạm Đinh Quốc Hòa – 19110365 Trần Anh Tiến – 19110471 Trường Đại học Sư phạm Kỹ thuật TP.HCM Khoa Công nghệ Thông tin ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên sinh viên 1: Phạm Đinh Quốc Hòa MSSV 1: 19110365 Họ tên sinh viên 2: Trần Anh Tiến MSSV 2: 19110471 Thời gian làm luận văn: Từ 13/02/2023 đến 10/07/2023 Chuyên ngành: Công nghệ phần mềm Tên luận văn: Xây dựng website bán quần áo sử dụng Spring Boot ReactJS Giáo viên hướng dẫn: TS Lê Văn Vinh Nhiệm vụ luận văn: Lý thuyết - Tìm hiểu cơng nghệ: ReactJS, JSON Web Token, Spring Boot Thực hành - Sử dụng Spring Boot để xây dưng Back-end, xây dựng API cho module hệ thống - Sử dụng MySQL làm hệ quản trị sở liệu để lưu trữ liệu hệ thống - Ứng dụng JSON Web Token để xác thực phân quyền cho hệ thống API cho người dùng - Ứng dụng thư viện ReactJS để xây dựng xử lý giao diện Website cho người dùng Đề cương: MỤC LỤC PHẦN MỞ ĐẦU Tính cấp thiết đề tài Đối tượng nghiên cứu Phạm vi nghiên cứu Mục tiêu đề tài PHẦN NỘI DUNG Chương Cơ sở lý thuyết 1.1 Các công nghệ sử dụng front–end 1.2 Các công nghệ sử dụng back–end Chương Khảo sát trạng mơ hình hóa yêu cầu 2.1 Khảo sát trạng 2.2 Kiến trúc chung hệ thống 2.3 Xác định yêu cầu 2.4 Mơ hình hóa u cầu Chương Thiết kế phần mềm 3.1 Lược đồ 3.2 Lược đồ lớp 3.3 Thiết kế sở liệu 3.4 Thiết kế giao diện Chương Cài đặt kiểm thử 4.1 Cài đặt 4.2 Kiểm thử PHẦN KẾT LUẬN Kết đạt Ưu điểm Nhược điểm Hướng phát triển TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN STT Thời gian Công việc Ghi 13/02/2023 – 20/03/2023 21/03/2023 – 07/04/2023 08/04/2023 – 17/04/2023  Khảo sát trạng  Thiết kế usecase mơ hình hóa u cầu  Thiết kế sở liệu  Tìm hiểu thư viện ReactJS JavaScript  Tìm hiểu Spring Boot Spring Security  Tìm hiểu tảng AWS Elastic Beanstalk AWS S3  Tìm hiểu JSON Web Token để ứng dụng vào xác thực phân quyền API hệ thống  Tìm hiểu SQL MySQL để áp dụng vào lưu trữ liệu người dùng hệ thống  Tiến hành phát triển API dựa kiến thức tìm hiểu tài liệu  Tiến hành xây dựng giao diện người dùng cho hệ thống 18/04/2023 – 08/05/2023 09/05/2023 – 09/06/2023 09/06/2023 – 20/06/2023  Kiểm thử chương trình tiến hành sửa lỗi 21/06/2023 – 10/07/2023  Viết hoàn thiện báo cáo  Kết hợp phần xây dựng lại với (giao diện, API, sở liệu)  Tìm hiểu, sửa đổi hệ thống để hoàn thiện Ngày……tháng……năm 2023 Ý kiến giáo viên hướng dẫn Người viết đề cương (ký ghi rõ họ tên) MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP MỤC LỤC DANH MỤC BẢNG BIỂU DANH MỤC HÌNH ẢNH 11 PHẦN MỞ ĐẦU 15 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 15 ĐỐI TƯỢNG NGHIÊN CỨU .15 PHẠM VI NGHIÊN CỨU .16 MỤC TIÊU CỦA ĐỀ TÀI 16 PHẦN NỘI DUNG 18 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU 18 1.1 KHẢO SÁT HIỆN TRẠNG 18 1.2 XÁC ĐỊNH YÊU CẦU 21 1.2.1 CHƯƠNG 2.1 Yêu cầu chức 21 CƠ SỞ LÝ THUYẾT 24 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 24 2.1.1 Thư viện ReactJS 24 2.1.2 Tailwind CSS .26 2.1.3 Axios 31 2.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END 33 2.2.1 RESTFUL API 33 2.2.2 Spring Boot 34 2.2.3 MySQL 35 2.2.4 Ứng dụng Spring boot vào đề tài 35 2.3 CHƯƠNG KIẾN TRÚC CHUNG CỦA HỆ THỐNG .39 THIẾT KẾ PHẦN MỀM 40 3.1 MƠ HÌNH HĨA U CẦU 40 3.1.1 Lược đồ Use case 40 3.1.2 Đặc tả Use case phía Người dùng 43 3.1.3 Đặc tả Use case phía quản trị viên 58 3.2 LƯỢC ĐỒ TUẦN TỰ 75 3.3 LƯỢC ĐỒ LỚP 98 3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 99 3.4.1 Lược đồ thực thể kết hợp (ERD) 99 3.4.2 Chi tiết bảng liệu 99 3.5 THIẾT KẾ GIAO DIỆN 111 3.5.1 Màn hình giao diện phía người dùng .111 3.5.2 Màn hình giao diện phía quản trị viên .130 CHƯƠNG 4.1 CÀI ĐẶT VÀ KIỂM THỬ 154 CÀI ĐẶT 154 4.1.1 Yêu cầu hệ thống 154 4.1.2 Các bước tiến hành 154 4.2 KIỂM THỬ 155 4.2.1 Kế hoạch kiểm thử 155 4.2.2 Quy trình kiểm thử 158 4.2.3 Kết kiểm thử 159 PHẦN KẾT LUẬN .165 KẾT QUẢ ĐẠT ĐƯỢC .165 ƯU ĐIỂM 165 NHƯỢC ĐIỂM 165 HƯỚNG PHÁT TRIỂN 165 TÀI LIỆU THAM KHẢO 166 DANH MỤC BẢNG BIỂU Bảng 1.1 Bảng yêu cầu nghiệp vụ 22 Bảng 3.1 Mô tả Use case “Đăng ký” 43 Bảng 3.2 Mô tả Use case “Đăng nhập” 44 Bảng 3.3 Mô tả Use case “Chỉnh sửa thông tin tài khoản” 45 Bảng 3.4 Mô tả Use case “Đổi mật khẩu” 46 Bảng 3.5 Mô tả Use case “Xem chi tiết thông tin sản phẩm” 47 Bảng 3.6 Mô tả Use case “Xem chi tiết thông tin sản phẩm” 47 Bảng 3.7 Mơ tả Use case “Xóa sản phẩm khỏi giỏ hàng” 48 Bảng 3.8 Mô tả Use case “Thêm địa nhận hàng” 49 Bảng 3.9 Mô tả Use case “Chỉnh sửa địa nhận hàng” 50 Bảng 3.10 Mơ tả Use case “Xóa địa nhận hàng” 51 Bảng 3.11 Mô tả Usecase “Xem lịch sử mua hàng” 52 Bảng 3.12 Mô tả Use case “Đặt hàng” 52 Bảng 3.13 Mô tả Use case “Hủy đơn hàng” 53 Bảng 3.14 Mô tả Use case “Tìm kiếm sản phẩm” 54 Bảng 3.15 Mô tả Use case “Tìm kiếm sản phẩm” 55 Bảng 3.16 Mơ tả Use case “Tìm kiếm sản phẩm” 56 Bảng 3.17 Mô tả Use case “Áp dụng voucher cho đơn hàng” 56 Bảng 3.18 Mơ tả Use case “Thêm thuộc tính kích cỡ” 58 Bảng 3.19 Mô tả Use case “Sửa thuộc tính kích cỡ” 58 Bảng 3.20 Mô tả Use case “Xóa thuộc tính kích cỡ” 59 Bảng 3.21 Mô tả Use case “Thêm thuộc tính màu sắc” 60 Bảng 3.22 Mô tả Use case “Chỉnh sửa thuộc tính màu sắc” 61 Bảng 3.23 Mơ tả Use case “Xóa thuộc tính màu sắc” 62