Xây dựng website thương mại điện tử kinh doanh đồ thể thao

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 KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ KINH DOANH ĐỒ THỂ THAO GVHD: TH.S MAI ANH THƠ SVTH: NGUYỄN LÂM GIA KHANG NGUYỄN THÀNH CƠNG SKL009480 Tp Hồ Chí Minh, tháng 6/2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO -   - BÁO CÁO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ KINH DOANH ĐỒ THỂ THAO GVHD: Th.S Mai Anh Thơ SVTH: Nguyễn Lâm Gia Khang 18110132 Nguyễn Thành Cơng 18110086 Khóa: 2018 Lớp: 18110CLST3 TP Hồ Chí Minh, tháng 06, năm 2022 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 Lâm Gia Khang Nguyễn Thành Công MSSV: 18110132 Lớp: 18110CLST3 MSSV: 18110086 Lớp: 18110CLST3 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website thương mại điện tử kinh doanh đồ thể thao Họ và tên giáo viên hướng dẫn: Th.S Mai Anh Thơ 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 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 2021 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 Lâm Gia Khang Nguyễn Thành Công MSSV: 18110132 Lớp: 18110CLST3 MSSV: 18110086 Lớp: 18110CLST3 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website thương mại điện tử kinh doanh đồ thể thao Họ và tên giáo viên phản biện: TS Lê Vĩnh Thịnh 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 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 2021 LỜI CẢM ƠN Lời cảm ơn nhóm gửi lời cảm ơn đến giáo viên hướng dẫn cô Mai Anh Thơ, người dành nhiều thời gian tâm huyết giúp đỡ chúng em q trình hồn thành khóa luận tốt nghiệp Nhóm em xin cảm ơn thầy cô trường Đại Học Sư phạm kỹ thuật Thành phố Hồ Chí Minh và đặc biệt là Khoa đào tạo chất lượng cao tạo điều kiện tốt cho chúng em để hoàn thành luận văn Trong q trình thực nhóm gặp nhiều khó khăn hạn chế mặt kiến thức nên khơng tránh khỏi sai sót Do đó, nhóm chúng em mong nhận sự góp ý chân thành thầy bạn Những ý kiến đóng góp kiến thức quý báu để nhóm em rút kinh nghiệm hoàn thiện dự án Lời cuối cùng, em xin kính chúc q thầy nhiều sức khỏe, thành cơng hạnh phúc Nhóm thực xin chân thành cám ơn Mục lục DANH MỤC HÌNH ẢNH I CHƯƠNG 1: TỔNG QUAN 1.1 LÝ DO CHỌN ĐỀ TÀI 1.2 MỤC TIÊU ĐỀ TÀI 1.3 PHƯƠNG PHÁP THỰC HIỆN CHƯƠNG 2: KHẢO SÁT THỰC TRẠNG 2.1 TRANG WEB SPORTER.VN 2.2 TRANG WEB SPORT1.VN 2.3 TRANG WEB THETHAOKIMTHANH.VN 2.4 TRANG WEB DRAHA.VN 2.5 KẾT LUẬN CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 TÀI LIỆU ĐẶC TẢ YÊU CẦU 3.2 LƯỢC ĐỒ USECASE 10 3.3 ĐẶC TẢ USECASE 13 3.3.1 Xem sản phẩm 13 3.3.2 Xem chi tiết sản phẩm 14 3.3.3 Đăng ký 15 3.3.4 Đăng nhập 16 3.3.5 Xem thông tin tài khoản 18 3.3.6 Thêm vào giỏ hàng 19 3.3.7 Đặt hàng 20 3.3.8 Xem lịch sử đặt hàng 22 3.3.9 Xem chi tiết đơn hàng 23 3.3.10 Bình luận 25 3.3.11 Tạo cửa hàng 26 3.3.12 Chỉnh sửa cửa hàng 28 3.3.13 Thêm sản phẩm 29 3.3.15 Chỉnh sửa thông tin sản phẩm 31 3.3.16 Xử lý đơn hàng 33 3.3.17 Thống kê 34 3.3.18 Lấy thông tin đơn hàng cần giao 36 3.3.19 Đơn hàng nhận 37 3.3.20 Đơn hàng giao 38 3.3.21 Quản lý người dùng 40 3.3.22 Quản lý cửa hàng 41 3.3.23 Quản lý đơn hàng 43 3.3.24 Quản lý sản phẩm 44 3.3.25 So sánh sản phẩm 46 3.3.26 Quản lí mã giảm giá 48 3.3.27 Chia sẻ đơn hàng 49 3.3.28 Tạo mã khuyến 50 3.4 LƯỢC ĐỒ LỚP 53 3.5 PHÂN TÍCH LƯỢC ĐỒ CƠ SỞ DỮ LIỆU 53 CHƯƠNG 4: CÁC CÔNG NGHỆ SỬ DỤNG 56 4.1 MƠ HÌNH HỆ THỐNG 56 4.2 TỔNG QUAN VỀ REACTJS 56 4.2.1 React-DOM 57 4.2.2 JSX 58 4.2.3 React icon 59 4.3 TỔNG QUAN VỀ SPRING FRAMEWORK 59 4.3.1 Spring boot 59 4.3.2 Spring data JPA 60 4.3.3 Spring security 61 4.4 TỔNG QUAN VỀ MYSQL 64 4.5 TỔNG QUAN VỀ NODEJS 64 4.6 TỔNG QUAN VỀ MONGODB 64 4.7 PAYPAL API 64 4.8 GOOGLE API 65 4.9 ỨNG DỤNG XÂY DỰNG KIẾN TRÚC HỆ THỐNG 65 4.9.1 Presentation layer 65 4.9.1.1 View 65 4.9.1.2 Model 67 4.9.1.3 Controller 67 4.9.2 Business logic layer 67 4.9.3 Data access layer 68 4.9.4 Các lớp khác 68 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 69 5.1 CÀI ĐẶT 69 5.1.1 Trang chủ 69 5.1.2 Form đăng ký 69 5.1.3 Form đăng nhập 70 5.1.4 Trang thông tin tài khoản 71 5.1.5 Trang thay đổi mật 72 5.1.6 Trang đơn hàng đặt 72 5.1.7 Trang thông tin chi tiết đơn hàng 73 5.1.8 Form nhận xét sản phẩm 73 5.1.9 Trang thông tin sản phẩm 74 5.1.10 Giỏ hàng 74 5.1.11 Thanh toán 75 5.1.12 Thanh toán paypal 75 5.1.13 Trang quản lý cửa hàng 76 5.1.14 Form tạo cửa hàng 77 5.1.15 Cập nhật cửa hàng 77 5.1.16 Xem sản phẩm chờ cửa hàng 78 5.1.17 Xem thống kê cửa hàng 78 5.1.18 Xóa cửa hàng 79 5.1.19 Xem sản phẩm cửa hàng 79 5.1.20 Form tạo sản phẩm 80 5.1.21 Cập nhật thông tin sản phẩm 81 5.1.22 Cập nhật thông tin riêng sản phẩm 81 5.1.23 Xóa sản phẩm 82 5.1.24 Trang quản lý đơn hàng shipper 82 5.1.25 Đơn hàng nhận 83 5.1.26 Đơn hàng giao 83 5.1.27 Quản lý người dùng admin 84 5.1.28 Quản lý cửa hàng admin 84 5.1.29 Quản lý đơn hàng admin 85 5.1.30 Quản lý sản phẩm admin 85 5.1.31 So sánh giá 86 5.1.32 Chia sẻ đơn hàng 86 5.1.33 Đăng nhập số điện thoại 87 5.1.34 Quên mật 87 5.1.35 Mã giảm giá 87 5.1.36 Khôi phục cửa hàng 88 5.1.37 Khôi phục sản phẩm 88 5.1.38 Doanh thu 89 5.1.39 Tổng đơn hàng 90 5.2 KIỂM THỬ 90 5.2.1 Đăng ký 90 5.2.2 Xem lịch sử đơn hàng 91 5.2.3 Quản lý thông tin tài khoản 91 5.2.4 Đăng nhập 92 5.2.5 Quản lý cửa hàng 93 5.2.6 Xóa cửa hàng 93 5.2.7 Quản lý sản phẩm 94 CHƯƠNG 6: KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN 95 6.1 KẾT QUẢ ĐẠT ĐƯỢC 95 6.1.1 VỀ MẶT LÝ THUYẾT 95 6.1.2 VỀ MẶT HIỆN THỰC 95 6.2 HẠN CHẾ 95 6.3 HƯỚNG PHÁT TRIỂN 96 TÀI LIỆU THAM KHẢO 97 CÁC LIÊN KẾT TÀI LIỆU 97 DANH MỤC HÌNH ẢNH Hình 1: trang web sporter.vn Hình 2: trang web sport1.vn Hình 3: Trang web thethaokimthanh.vn Hình 4: trang web draha.vn Hình 1: lược đồ usecase 10 Hình 2: view products sequence diagram 14 Hình 3: view detail product sequence diagram 15 Hình 4: Signup sequence diagram 16 Hình 5: login sequence diagram 18 Hình 6: View information sequence diagram 19 Hình 7: Add product to cart 20 Hình 8: order sequence diagram 22 Hình 10: order history sequence diagram 23 Hình 11: Order details sequence diagram 24 Hình 12: comment sequence diagram 26 Hình 13: create store sequence diagram 28 Hình 14: Update store sequence diagram 29 Hình 15: create product sequence diagram 31 Hình 16: Update product sequence diagram 32 Hình 17: Solve order sequence diagram 34 Hình 18: Static sequence diagram 35 Hình 19: Get list order already ship 37 Hình 20: Get list recieved order already ship 38 Hình 21: Get list order by shipperId 40 Hình 22: Manage user sequence diagram 41 Hình 23: Manage user sequence diagram 43 Hình 24: manage orders sequence diagram 44 Hình 25: manage product sequence diagram 46 Hình 26: Comparing product sequence diagram 47 Hình 27: Manage coupon 49 Hình 28: Sharing cart sequence diagram 50 Hình 30: Create voucher 52 Hình 31: class diagram 53 Hình 32: sở liệu mysql 53 Hình 33: sở liệu mongodb 54 Hình 34: khơi phục cửa hàng 88 Hình 35: khơi phục sản phẩm 89 Hình 36: Doanh thu 89 Hình 1: mơ hình hệ thống 56 Hình 2: React-DOM 58 Hình 3: JSX 58 i Mô tả: Trang hiển thị đơn hàng giao 5.1.27 Quản lý người dùng admin Hình 28: quản lý người dùng admin Mô tả: Trang hiển thị thông tin tất người dùng hệ thống Ở hiển thị thông tin liên lạc, thông tin cá nhân cho biết người có vai trị 5.1.28 Quản lý cửa hàng admin Hình 29: quản lý cửa hàng admin 84 Mô tả: Trang hiển thị thông tin tất cửa hàng hệ thống Có thể xóa cửa hàng nếu phát có bất thường xảy cửa hàng 5.1.29 Quản lý đơn hàng admin Hình 30: quản lý đơn hàng admin Mô tả: Trang hiển thị thông tin đơn hàng hệ thống trạng thái chúng 5.1.30 Quản lý sản phẩm admin Hình 31: quản lý sản phẩm admin 85 Mô tả: Trang hiển thị sản phẩm tồn hệ thống bao gồm thơng tin cửa hàng bán sản phẩm Nếu phát sản phẩm bất thường tiến hành xóa sản phẩm 5.1.31 So sánh giá Hình 32: So sánh giá Mô tả: bấm vào sản phẩm hệ thống tự động liệt kê giá sản phẩm giống giúp khách hàng tối ưu lựa chọn 5.1.32 Chia sẻ đơn hàng Hình 33: chia sẻ đơn hàng 86 Mô tả: Người dùng sử dụng mã share code để chia sẻ đơn hàng chung với bạn bè Mỗi khách hàng chỉnh sửa sản phẩm khơng thể chỉnh sửa sản phẩm người khác 5.1.33 Đăng nhập số điện thoại Hình 34: đăng nhập số điện thoại Mô tả: người dùng sử dụng số điện thoại để mua hàng không cần đăng ký tài khoản 5.1.34 Quên mật Hình 35: Qn mật Mơ tả: người dùng sử dụng tên đăng nhập để lấy lại mật 5.1.35 Mã giảm giá 87 Hình 36: mã giảm giá Mơ tả: Người bán hàng thêm mã giảm giá vào sản phẩm 5.1.36 Khôi phục cửa hàng Hình 32: khơi phục cửa hàng Mơ tả: người bán hàng xóa cửa hàng vào trang khôi phục cửa hàng để phục hồi lại 5.1.37 Khơi phục sản phẩm 88 Hình 33: khơi phục sản phẩm Mơ tả: Khi người bán hàng xóa sản phẩm, người bán hàng vào mục khôi phục sản phẩm để khôi phục sản phẩm xóa 5.1.38 Doanh thu Hình 34: Doanh thu Mơ tả: admin thống kê doanh thu tồn trang web theo ngày, tháng, quý, năm và khoảng thời gian tùy ý 89 5.1.39 Tổng đơn hàng Mô tả: admin hủy đơn hàng người dùng yêu cầu Lưu ý: đơn hàng chuẩn bị xong khơng thể hủy 5.2 Kiểm thử 5.2.1 Đăng ký Test Test case Title Đăng ký Đăng ký tên tài khoản dùng Test Steps Test Data Expected Actual Result Result Mở ứng dụng Nhập họ Đăng ký Như tên: Bùi Đức không thành mong công đợi Click chọn Huy đăng ký Chọn ngày, Nhập họ tháng, năm sinh: 30/11/2000 tên Chọn ngày, Nhập email: tháng, năm sinh huy18110117@ gmail.com Nhập email Nhập tên tài khoản: 90 Status Pass Nhập tên tài buiduchuy khoản Nhập Nhập mật mật khẩu: Huy3011200 Nhập lại mật Nhập lại mật khẩu: Nhập địa Huy3011200 Nhập địa chỉ: 10 Nhập số 147 tân lập điện thoại Nhập số điện 10 Chọn giới thoại: 0797772505 tính Chọn giới 11 Click đăng tính: Nam ký 5.2.2 Xem lịch sử đơn hàng Test Test case Title Đơn hàng Xem lịch sử đơn hàng Test Steps Test Data Mở ứng dụng Click chọn đơn hàng Expected Actual Result Result Status Hiển thị lịch Như sử đơn hàng mong đợi Pass Expected Result Status Click vào đơn hàng 5.2.3 Quản lý thông tin tài khoản Test case Test Title Test Steps Test Data 91 Actual Result Quản Khác Mở ứng dụng lý h Click chọn thông hàng đăng nhập tin tài Điền thơng khoản thay tin tài khoản Hồ sơ đổi người thông Điền mật dùng tin thành công Nhập tên: Bùi Sửa thông Như Pass Đức Huy1 tin thành mong đợi Nhập email: công huy18110117@ gmail.com Nhập phone: 0797772505 Click đăng Nhập địa chỉ: 147 tân lâp nhập Click vào tài Chọn ngày, tháng, năm sinh: khoản 30/11/2000 Sửa tên Chọn giới Sửa email tính: Nam Sửa phone 10 Sửa địa 11 Sửa nhật sinh 12 Chọn giới tính 13 Click lưu thơng tin 5.2.4 Đăng nhập Test Test case Title Đăng nhập Đăng nhập Test Steps truy cập https://group9cn pmm.herokuapp com/ Test Data Expected Actual Result Result vai trò= người Đăng nhập Như dùng thành công mong đợi Tên đăng nhập = khanguser 92 Status Pass Nhập Tên mật = đăng nhập giakhang123 mật Click Đăng nhập 5.2.5 Quản lý cửa hàng Test Test case Title Verify on Expected Actual Result Result Quản truy cập Tên đăng nhập = hiển lý cửa https://group9cn congadmin thông thị Như tin mong enterin hàng g valid userid and passwo rd, the custom er can Test Steps Test Data pmm.herokuapp mật = 123 list com/admin hàng Status Pass cửa đợi Nhập Tên đăng nhập mật Click Đăng nhập Click Tất cửa hàng login 5.2.6 Xóa cửa hàng Test case Test Title Test Steps Test Data Xóa cửa Xóa cửa truy cập Tên đăng nhập = Xóa cửa Như https://group9cn congadmin hàng thành mong hàng hàng pmm.herokuapp mật = 123 công com/admin Nhập Tên đăng nhập 93 Expected Result Actual Result đợi Status Pass mật Click Đăng nhập click Tất cửa hàng click xóa Stt=1 click ok thực lại từ bước - 5.2.7 Quản lý sản phẩm Test case Test Title Test Steps Quản Quản lý truy Test Data cập Tên đăng nhập = hiển sản lý sản https://group9cn congadmin phẩm phẩm Expected Result thông pmm.herokuapp mật = 123 list com/admin phẩm Nhập Tên đăng nhập mật Click Đăng nhập click Tất sản phẩm 94 Actual Result thị Như tin mong sản đợi Status Pass Chương 6: KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết đạt Nhóm thực tự đánh giá hoàn thành yêu cầu khóa luận Tất tài liệu api hình ảnh kiểm thử bổ sung đầy đủ Qua luận văn nhóm học thêm nhiều kiến thức spring framework, MERN stack phương pháp thiết kế ứng dụng kiến thức liên quan đến việc làm việc nhóm, xử lý tình xung đột github có nhìn khái qt ứng dụng hình thành thế Tuy nhiên trình làm luận văn khơng thể tránh thiếu sót, nhóm tiếp tục hồn thiện phát triển dự án tiếp theo 6.1.1 Về mặt lý thuyết Nhóm nghiên cứu tìm hiểu kiến thức về: - Cách hoạt động sử dụng: MERN stack, spring framework Cách thiết kế, phân tích triển khai sở liệu: mysql, mongodb Biết cách phân tích, đánh giá và hoàn thiện website thương mại điện tử 6.1.2 Về mặt thực Nhóm hoàn thiện chức năng: - Guest: Đăng ký, xem sản phẩm - User: Thêm sản phẩm vào giỏ hàng, mua hàng, tốn, đăng nhập, đăng xuất, xem thơng tin tài khoản, chỉnh sửa thông tin tài khoản, chỉnh sửa giỏ hàng, bình luận, xem lịch sử mua hàng, đặt chung giỏ hàng Người bán hàng: đăng ký, đăng nhập, đăng xuất, quản lý cửa hàng, quản lý sản phẩm, quản lý đơn hàng, thống kê Người giao hàng: đăng ký, đăng nhập, đăng xuất, xem đơn hàng chuẩn bị xong, nhận hàng, giao hàng, xem đơn hàng giao thành công Người quản trị hệ thống: quản lý tất người dùng, quản lý tất người bán hàng, quản lý tất người giao hàng, quản lý tất sản phẩm, quản lý tất cửa - hàng 6.2 Hạn chế Các tính hoàn thiện mức nhiên vài hạn chế: - Thanh tốn trực tún áp dụng ví paypal Chưa hoàn thiện tính nhận đơn shipper giúp giảm chi phí 95 - Lần đầu triển khai hệ thống server riêng biệt nên hệ thống gặp lỗi 6.3 Hướng phát triển Trong thời gian tiếp theo, nhóm thực cố gắng cải thiện web với giao diện tính hơn, đáp ứng đầy đủ yêu cầu người dùng Chức tốn thơng qua đa dạng ví điện tử thực hiện, đồng thời, tối ưu hóa chi phí giao hàng Các vấn đề cịn lại trang web, nhóm tiến hành tìm kiếm tài liệu để học hỏi nhiều nhằm tích luỹ kiến thức việc tạo lập trang web hoàn thiện Song song với việc trên, nhóm thực tiến hành kiểm tra lại trang web tìm cách nâng cấp để làm giảm vấn đề cịn hạn chế phần mềm Nhóm tiếp tục phát triển web theo công nghệ MERN stack spring framework cố gắng cung cấp phiên thời gian tới, đồng thời củng cố kiến thức để ứng dụng việc bảo mật vào web để hoàn thiện ứng dụng 96 TÀI LIỆU THAM KHẢO Nhân Đặng, React gì? Phân biệt khác React JS với React Native, thegioididong.com, link: https://www.thegioididong.com/hoi-dap/react-la-gi-phanbiet-su-khac-nhau-giua-react-js-voi-react1318152?fbclid=IwAR2zlcfAq1Tu08UBPUQkM11zFVnYqaVGZNzObbqQcZdK3j6l qBv67-xOyl8 MySQL Là Gì? Tổng Quan Về Hệ Quản Trị Dữ Liệu MySQL, http://sqladvice.com/, link: http://sqladvice.com/mysql-la-gi-tong-quan-ve-he-quan-tri-du-lieu-mysql/ CÁC LIÊN KẾT TÀI LIỆU Front-end: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/FrontEnd/FE/beg roupfe Backend: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/BackEnd/begrou p2 System design: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/System%20Desi gn Report: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/Report Heroku: https://utesportingstore.herokuapp.com/ 97 S K L 0