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 THỂ THAO GVHD: THS NGUYỄN MINH ĐẠO SVTH: NGUYỄN VĂN ĐẠT HỒNG MINH THÀNH SKL009251 Tp.Hồ Chí Minh, tháng 12/2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN QUẦN ÁO THỂ THAO SVTH: NGUYỄN VĂN ĐẠT MSSV: 16110050 SVTH: HỒNG MINH THÀNH MSSV: 18110196 Ngành: CƠNG NGHỆ PHẦN MỀM GVHD: ThS NGUYỄN MINH ĐẠO TP Hồ Chí Minh, tháng 12 năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN QUẦN ÁO THỂ THAO SVTH: NGUYỄN VĂN ĐẠT MSSV: 16110050 SVTH: HỒNG MINH THÀNH MSSV: 18110196 Ngành: CƠNG NGHỆ PHẦN MỀM GVHD: ThS NGUYỄN MINH ĐẠO TP Hồ Chí Minh, tháng 12 năm 2022 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 21 Tháng 12 năm 2022 NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Nguyễn Văn Đạt MSSV: 16110050 Ngành: Công Nghệ Thông Tin Lớp: 16110CLST1 Họ tên sinh viên: Hoàng Minh Thành MSSV: 18110196 Ngành: Công Nghệ Thông Tin Lớp: 18110CLST1 Giảng viên hướng dẫn: ThS Nguyễn Minh Đạo Ngày nhận đề tài: 05/09/2022 Ngày nộp đề tài: 21/12/2022 Tên đề tài: Xây dựng website bán quần áo thể thao Các số liệu, tài liệu ban đầu: Khảo sát trạng thông qua website thương mại điện tử phổ biến áp dụng thơng tin tìm vào đồ án Nội dung thực đề tài: Xây dựng ứng dụng web cho phép khách hàng đặt hàng trực tuyến từ cửa hàng Xây dựng trang web quản lý để quản lý thông tin xác nhận đơn đặt hàng khách hàng Sản Phẩm: Trang web bán quần áo thể thao trực tuyến TRƯỞNG NGÀNH (Ký & ghi rõ họ tên) GIẢNG VIÊN HƯỚNG DẪN (Ký & ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độ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: Nguyễn Văn Đạt MSSV: 16110050 Họ tên sinh viên: Hồng Minh Thành MSSV: 18110196 Ngành: Cơng Nghệ Thơng Tin Tên đề tài: Website bán quần áo thể thao trực tuyến Họ tên Giáo viên hướng dẫn: ThS Nguyễn Minh Đạo NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Ưu điểm: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Khuyết điểm: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Đề ngh cho bảo vệ hay không? …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Đánh giá loại:…………………………………………………………………… Điểm:…………… (Bằng Chữ:……………………………………………… ) Tp Hồ Chí Minh, ngày tháng 12 năm 2022 Giảng viên hướng dẫn (Ký & ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độ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: Nguyễn Văn Đạt MSSV: 16110050 Họ tên sinh viên: Hoàng Minh Thành MSSV: 18110196 Ngành: Công Nghệ Thông Tin Tên đề tài: Website bán quần áo thể thao trực tuyến Họ tên Giáo viên phản biện: TS Lê Văn Vinh NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Ưu điểm: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Khuyết điểm: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Đề ngh cho bảo vệ hay không? …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Đánh giá loại:…………………………………………………………… ……… Điểm:……………(Bằng Chữ: ………………………………… ……….) Tp Hồ Chí Minh, ngày tháng 12 năm 2022 Giảng viên hướng dẫn (Ký & ghi rõ họ tên) Khóa Luận Tốt Nghiệp LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Đào tạo Chất Lượng cao – Ngành 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, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh nhóm chúng em xin gửi đến thầy Nguyễn Minh Đạo lời cảm ơn sâu sắc Trải qua trình dài học tập thực đề tài thời gian qua Thầy tận tâm bảo nhiệt tình 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 nghiệ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 Nguyễn Minh Đạo tặng 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 sinh viên thực Khoa ĐT CLC – ĐH SPKT TP.HCM |1 Khóa Luận Tốt Nghiệp MỤC LỤC LỜI CẢM ƠN MỤC LỤC DANH MỤC HÌNH DANH MỤC BẢNG Chương MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.3 Đối tượng phạm vi nghiên cứu 1.3.1 Đối tượng 1.3.2 Phạm vi nghiên cứu 1.4 Kết dự kiến đạt 10 1.4.1 Phía người quản tr 10 1.4.2 Phía người dùng 10 Chương 2.1 CƠ SỞ LÝ THUYẾT 11 Tổng quan Java 11 2.1.1 Một số khái niệm Java 11 2.1.2 Ưu điểm Java 11 2.1.3 Nhược điểm Java 11 2.2 Tổng quan Spring Boot 11 2.2.1 Một số khái niệm Spring Boot 12 2.2.2 Ưu điểm Spring Boot 12 2.2.3 Nhược điểm Spring Boot 12 2.2.4 Môi trường phát triển Spring Boot 12 2.3 Tổng quan MongoDB 12 2.3.1 Một số khái niệm MongoDB 12 2.3.2 Ưu điểm MongoDB 13 2.3.3 Nhược điểm MongoDB 13 2.3.4 Môi trường phát triển MongoDB 13 2.4 Tổng quan HTML 13 Khoa ĐT CLC – ĐH SPKT TP.HCM |2 Khóa Luận Tốt Nghiệp 2.5 Tổng quan CSS 14 2.6 Tổng quan Javascript 14 2.7 Tổng quan React JS 14 2.8 Môi trường phát triển React JS 15 2.9 Kiến trúc React JS 15 2.9.1 Component 15 2.9.2 Functional Component 15 2.9.3 Class Component 15 2.9.4 Props 15 2.9.5 State 16 2.9.6 Hook 16 2.9.7 Effect Hook 16 2.9.8 Life Cycle 16 Cài đặt môi trường cho React JS 17 2.10 Chương 3.1 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 18 Khảo sát trạng 18 3.1.1 Adidas: https://www.adidas.com.vn/ 18 3.1.2 Sport1: https://sport1.vn/ 22 3.2 Xác đ nh yêu cầu 24 3.2.1 Lược đồ Usecase 24 3.2.2 Bảng Requirement dành cho Usecase 26 3.2.3 Đặc tả Usecase 29 Chương 4.1 THIẾT KẾ ỨNG DỤNG 60 Sơ đồ Class Diagram 60 4.1.1 Sơ đồ thiết kế class diagram 60 4.1.2 Mô tả thiết kế class diagram 60 4.2 Sơ đồ 69 4.3 Thiết kế giao diện 81 4.4.1 SCP001 Giao diện trang đăng nhập 81 4.4.2 SCP002 Giao diện trang đăng ký 83 Khoa ĐT CLC – ĐH SPKT TP.HCM |3 Khóa Luận Tốt Nghiệp 4.4.3 SCP003 Giao diện trang chủ 85 4.4.4 SCP004 Giao diện trang hiển th sản phẩm 87 4.4.5 SCP005 Giao diện trang danh mục 89 4.4.6 SCP006 Giao diện trang giỏ hàng 90 4.4.7 SCP007 Giao diện trang toán 91 4.4.8 SCP008 Giao diện trang đơn hàng 91 4.4.9 SCP009 Giao diện trang Admin 92 4.4.10 SCP010 Giao diện trang quản lý khách hàng 95 4.4.11 SCP011 Giao diện trang quản lý sản phẩm 97 4.4.12 SCP012 Giao diện trang quản lý đơn hàng 100 4.4.13 SCP013 Giao diện trang quản lý danh mục 101 4.4.14 SCP014 Giao diện trang quản lý Admin 102 4.4.15 SCP015 Giao diện trang quản lý thông tin cá nhân 104 Chương CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 105 5.1 Cài đặt ứng dụng 105 5.2 Kiểm thử phần mềm 114 Chương 6.1 KẾT LUẬN 117 Kết đạt 117 6.1.1 Kiến thức tìm hiểu 117 6.1.2 Về chương trình xây dựng 117 6.1.3 Ưu khuyết điểm 117 6.2 Hướng phát triển 117 BẢNG NHỮNG TỪ VIẾT TẮT 118 TÀI LIỆU THAM KHẢO 119 Khoa ĐT CLC – ĐH SPKT TP.HCM |4 Khóa Luận Tốt Nghiệp Hình MongoDB tạo kết nối Bước 5: Chọn Connect your application Khoa ĐT CLC – ĐH SPKT TP.HCM | 107 Khóa Luận Tốt Nghiệp Hình MongoDB tạo kết nối (tt) Bước 6: Chọn loại ngôn ngữ mà bạn sử dụng version Bước 7: Sau chọn, MongoDB sinh cho chuổi kết nối 5.1.2 Cài đặt Back-End u cầu: Máy tính phải có Java Maven Bước 1: Download source code từ https://github.com/NVDNVD/sportswear-be.git Bước 2: Cài đặt package Maven Khoa ĐT CLC – ĐH SPKT TP.HCM | 108 Khóa Luận Tốt Nghiệp Hình 5 Back-End cài đặt package Bước 3: Mở file application.yml để chỉnh sửa đường dẫn đến MongoDB Hình Back-End chỉnh sửa kết nơi MongoDB Khoa ĐT CLC – ĐH SPKT TP.HCM | 109 Khóa Luận Tốt Nghiệp Bước 4: Chạy ứng dụng Maven Hình Back-End Chạy ứng dụng Ứng dụng chạy localhost:8080 Khoa ĐT CLC – ĐH SPKT TP.HCM | 110 Khóa Luận Tốt Nghiệp Hình Back-End trang chủ 5.1.3 Cài đặt Front-End Để chạy trang web cần cài đặt thành phần sau: - Cần cài đặt Visual Studio Code để chạy Front-end - Cần cài đặt npm - Cần cài đặt NodeJS - Cần cài đặt ReactJS Link github: https://github.com/Zoro1011/KLTN_FE.git Các bước để tiến hành cài đặt: - Front-end: Download source code từ: https://github.com/Zoro1011/KLTN_FE.git Mở ứng dụng Visual Studio Code Khoa ĐT CLC – ĐH SPKT TP.HCM | 111 Khóa Luận Tốt Nghiệp Hình Cài đặt thư viện Front-end Mở Terminal nhấn “npm install” để tiến hành tải thư viện phụ thuộc node_modules Hình 10 Khởi chạy Front-end Sau cài đặt thư viện xong, dùng lệnh “npm run dev” để tiến hành chạy Front-end Sau khởi chạy xong truy cập vào http://localhost:3000/ để truy cập vào trang chủ Khoa ĐT CLC – ĐH SPKT TP.HCM | 112 Khóa Luận Tốt Nghiệp Hình 11 Chạy thành công Front-end Khoa ĐT CLC – ĐH SPKT TP.HCM | 113 Khóa Luận Tốt Nghiệp 5.2 Kiểm thử phần mềm Bảng Bảng kiểm thử phần mềm ID Test Case Description Expected Output Result TC_01 Chức đăng ký Người dùng đăng ký Pass tài khoản thành công, trường hợp thất bại báo lỗi TC_02 Chức đăng nhập Người dùng, Admin Pass đăng nhập với quyền tương ứng, trường hợp thất bại báo lỗi TC_03 Chức đăng xuất Người dùng Admin Pass đăng xuất thành công, trường hợp thất bại báo lỗi TC_04 Chức tìm kiếm Người dùng tìm kiếm Pass sản phẩm thành cơng, trường hợp thất bại báo lỗi TC_05 Xem danh sách sản phẩm Danh sách sản phẩm Pass hiển th thành công, trường hợp thất bại báo lỗi Khoa ĐT CLC – ĐH SPKT TP.HCM | 114 Khóa Luận Tốt Nghiệp TC_06 Xem danh sách danh mục Danh mục hiển th thành Pass công trường hợp thất bại báo lỗi TC_07 Xem chi tiết sản phẩm Người dùng chọn Pass xem chi tiết sản phẩm thành công trường hợp thất bại báo lỗi TC_08 Thêm sản phẩm vào giỏ Người dùng thêm sản hàng Pass phẩm vào giỏ hàng thành công, trường hợp thất bại báo lỗi TC_09 Đặt hàng Người dùng đặt hàng Fail thành công, trường hợp thất bại báo lỗi TC_10 Quản lý tài khoản cá nhân Người dùng xem Pass tài khoản cá nhân, chỉnh sửa thông tin cá nhân thành công, trường hợp thất bại báo lỗi TC_11 Thống kê Admin xem Fail thống kê doanh thu, trường hợp thất bại báo lỗi Khoa ĐT CLC – ĐH SPKT TP.HCM | 115 Khóa Luận Tốt Nghiệp TC_12 Quản lý tài khoản, thơng tin Admin sửa / xóa người dùng Pass tài khoản, thơng tin người dùng thành công, trường hợp thất bại báo lỗi TC_13 Quản lý sản phẩm Admin thêm/ xóa Pass / sửa sản phẩm thành cơng, trường hợp thất bại báo lỗi TC_14 Quản lý đơn hàng Admin xem danh sách Fail đơn hàng, xử lý đơn hàng thành công, trường hợp thất bại báo lỗi TC_15 Quản lý danh mục Admin tạo danh Fail mục xóa danh mục Khoa ĐT CLC – ĐH SPKT TP.HCM | 116 Khóa Luận Tốt Nghiệp Chương KẾT LUẬN 6.1 Kết đạt 6.1.1 Kiến thức tìm hiểu Nắm bắt công nghệ Spring Boot, MongoDB, ReactJS áp dụng vào khóa luận tốt nghiệp nhiên cịn số khó khăn nên ứng dụng chưa thật hồn chỉnh 6.1.2 Về chương trình xây dựng Xây dựng trang web với chức như: xem sản phẩm, thêm sửa xóa sản phẩm, thêm sản phẩm vào giỏ hàng, mua sản phẩm, kiểm duyệt đơn hàng, quản lý đơn hàng, 6.1.3 Ưu khuyết điểm Ưu điểm: - Thiết kế giao diện thân thiện, dễ sử dụng Khuyết điểm: - Vẫn thiếu số tính để nâng cao trải nghiệm người dùng - Ứng dụng chưa hỗ trợ nhiều hình thức xác thực đăng nhập Facebook, - Chưa có tính tính tốn chi phí giao hàng - Chưa xây dựng chức chat để hỗ trợ khách hàng 6.2 Hướng phát triển - Mở rộng dự án, có thêm nhiều tính hơn(chat trực tiếp, chat qua bên thứ 3, ) Thêm hình thức tốn Khoa ĐT CLC – ĐH SPKT TP.HCM | 117 Khóa Luận Tốt Nghiệp BẢNG NHỮNG TỪ VIẾT TẮT STT Từ Viết tắt JVM JDK JRE HTML CSS JS TS Ý nghĩa Java Virtual Machine Java Development Kit Java Runtime Environment Hypertext Markup Language Cascading Style Sheets JavaScript TypeScript Khoa ĐT CLC – ĐH SPKT TP.HCM | 118 Khóa Luận Tốt Nghiệp TÀI LIỆU THAM KHẢO [1] Nội dung: Tìm hiểu Java Link: https://www.tutorialspoint.com/java8/index.htm [2] Nội dung: Tìm hiểu Spring Boot Link: https://vietnix.vn/spring-boot-la-gi/ [3] Nội dung: Tìm hiểu Dependency Injection Link: https://viettuts.vn/spring/dependency-injection-trong-spring [4] Nội dung: Tìm hiểu Aspect Oriented Programming Link: https://viblo.asia/p/aop-la-gi-uu-nhuoc-diem-cua-aop-aspect-orientedprogramming-trong-java-3P0lPk2oZox [5] Nội dung: Tìm hiểu MongoDB Link: https://www.tutorialspoint.com/mongodb/index.htm [6] Nội dung: Tìm hiểu HTML Link: https://wiki.matbao.net/html-la-gi-nen-tang-lap-trinh-web-cho-nguoi-moi-bat- dau/ [7] Nội dung: Tìm hiểu CSS Link: https://topdev.vn/blog/css-la-gi/ [8] Nội dung: Tìm hiểu JavaScript Link: https://vietnix.vn/javascript-la-gi/ [9] Nội dung: Tìm hiểu ReactJS Khoa ĐT CLC – ĐH SPKT TP.HCM | 119 Khóa Luận Tốt Nghiệp Link: https://reactjs.org/tutorial/tutorial.html Nội dung: Tìm hiểu khác đặc tính class funcion component [10] Link:https://viblo.asia/p/react-js-hieu-ve-functional-va-class-componentsQbq5QpkRlD8 [11] Nội dung: Tìm hiểu State Props Link:https://viblo.asia/p/component-state-va-props-trong-react-native-Eb85oM34Z2G [12] Nội dung: Tìm hiểu lifecycle ReactJS Link: https://viblo.asia/p/lifecycle-component-trong-reactjs-gGJ59jzxKX2 Khoa ĐT CLC – ĐH SPKT TP.HCM | 120 S K L 0