Xây dựng website thương mại điện tử bán giày

Đồ án xây dựng website thương mại điện tử bán giày bằng Spring Boot và ReactJS - UTE

• Tác giả: Vũ Tiến Đạt
• Người hướng dẫn: ThS. Nguyễn Trần Thi Văn
• Trường học: Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng website thương mại điện tử bán giày
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan về website thương mại điện tử bán giày tại ĐH Sư phạm Kỹ thuật TP

Đề tài xây dựng website thương mại điện tử bán giày là đồ án tốt nghiệp của sinh viên Vũ Tiến Đạt và Hoàng Đại Nghĩa, ngành Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP.HCM, hoàn thành tháng 6 năm 2024 dưới sự hướng dẫn của ThS. Nguyễn Trần Thị Vân. Dự án hướng tới việc xây dựng một nền tảng thương mại điện tử hoàn chỉnh, cho phép khách hàng tìm kiếm, xem chi tiết và đặt mua sản phẩm giày với nhiều danh mục đa dạng. Hệ thống hỗ trợ thanh toán trực tuyến qua VNPay và thanh toán khi nhận hàng. Phía quản trị viên có thể theo dõi, quản lý tài khoản, đơn hàng, sản phẩm và danh mục một cách hiệu quả. Đây là mô hình ứng dụng thực tiễn, phản ánh xu hướng chuyển đổi số trong ngành bán lẻ giày dép tại Việt Nam. Đồ án sử dụng công nghệ hiện đại gồm Next.js, React, Redux ở phía frontend và Spring Boot, Spring Data JPA, MySQL ở phía backend, đáp ứng tiêu chuẩn phát triển phần mềm chuyên nghiệp trong môi trường học thuật.

1.1. Mục tiêu và phạm vi của đồ án tốt nghiệp

Đồ án đặt ra mục tiêu xây dựng một website bán giày đầy đủ chức năng, phục vụ cả khách hàng lẫn quản trị viên. Phạm vi dự án bao gồm nghiên cứu mô hình thương mại điện tử, phân tích quy trình kinh doanh và xác định yêu cầu hệ thống. Sản phẩm cuối cùng là một website hoạt động thực tế, hỗ trợ đặt hàng, thanh toán và quản lý nội dung sản phẩm theo nhiều danh mục khác nhau. Thời gian thực hiện từ tháng 2 đến tháng 6 năm 2024.

1.2. Ý nghĩa thực tiễn của website thương mại điện tử bán giày

Website thương mại điện tử bán giày có ý nghĩa thực tiễn cao trong bối cảnh thương mại điện tử phát triển mạnh tại Việt Nam. Dự án không chỉ là sản phẩm học thuật mà còn là mô hình có thể triển khai thực tế cho các cửa hàng giày vừa và nhỏ. Việc tích hợp thanh toán VNPay giúp hệ thống phù hợp với thói quen thanh toán của người dùng Việt Nam, nâng cao trải nghiệm mua sắm và tối ưu doanh thu cho doanh nghiệp.

II. Phân tích yêu cầu và bài toán xây dựng website bán giày trực tuyến

Trước khi xây dựng hệ thống, nhóm sinh viên tiến hành phân tích chi tiết các quy trình kinh doanh của một cửa hàng giày trực tuyến. Bài toán đặt ra gồm hai nhóm tác nhân chính: khách hàng và quản trị viên. Khách hàng cần có khả năng đăng ký tài khoản, tìm kiếm sản phẩm, xem chi tiết thông tin giày theo màu sắc, kích thước và số lượng, thêm vào giỏ hàng và hoàn tất thanh toán. Quản trị viên cần công cụ để quản lý sản phẩm, danh mục, thương hiệu, đơn hàng và tài khoản khách hàng. Hệ thống phải đảm bảo cập nhật trạng thái đơn hàng theo thời gian thực và cung cấp báo cáo thống kê. Các use case được mô hình hóa rõ ràng qua sơ đồ UML, bao gồm đăng nhập, tìm kiếm sản phẩm, quản lý giỏ hàng, thanh toán, xem lịch sử đơn hàng, cùng các chức năng quản trị như cập nhật thông tin khách hàng, thương hiệu và thống kê doanh thu. Đây là nền tảng thiết yếu để xây dựng kiến trúc hệ thống chuẩn xác.

2.1. Yêu cầu chức năng đối với người dùng và quản trị viên

Hệ thống xác định hai nhóm yêu cầu chức năng riêng biệt. Đối với khách hàng: đăng ký, đăng nhập, tìm kiếm và lọc sản phẩm, chọn màu sắc và kích thước, quản lý giỏ hàng, thanh toán trực tuyến hoặc khi nhận hàng, xem lịch sử đơn hàng. Đối với quản trị viên: quản lý danh mục sản phẩm, thương hiệu, tài khoản khách hàng, trạng thái đơn hàng và xem báo cáo thống kê kinh doanh. Mỗi use case đều được đặc tả chi tiết theo chuẩn UML.

2.2. Các vấn đề kỹ thuật và thách thức khi phát triển hệ thống

Quá trình phân tích xác định nhiều thách thức kỹ thuật quan trọng. Tích hợp cổng thanh toán VNPay đòi hỏi xử lý bảo mật nghiêm ngặt. Đồng bộ trạng thái đơn hàng giữa frontend và backend cần cơ chế cập nhật hiệu quả. Quản lý giỏ hàng với nhiều biến thể sản phẩm (màu sắc, kích thước) tăng độ phức tạp xử lý dữ liệu. Ngoài ra, thiết kế cơ sở dữ liệu phải đảm bảo tính toàn vẹn dữ liệu khi xử lý đồng thời nhiều đơn hàng từ nhiều người dùng khác nhau.

III. Giải pháp công nghệ xây dựng website thương mại điện tử bán giày hiện đại

Nhóm phát triển lựa chọn kiến trúc ứng dụng web phân tách frontend và backend rõ ràng. Phía frontend sử dụng Next.js kết hợp React và Redux để quản lý trạng thái ứng dụng. React hoạt động theo mô hình component-based, cho phép tái sử dụng giao diện ở nhiều nơi với các trạng thái khác nhau. JSX — ngôn ngữ mở rộng của JavaScript — được biên dịch trước khi chạy, giúp phát hiện lỗi sớm trong quá trình phát triển. Redux đảm nhận quản lý trạng thái toàn cục, đặc biệt hữu ích cho giỏ hàng và thông tin xác thực người dùng. Phía backend, Spring Boot được áp dụng theo nguyên tắc Convention over Configuration, giúp giảm thiểu cấu hình thủ công và tăng tốc độ phát triển. Spring Data JPA đơn giản hóa thao tác với cơ sở dữ liệu MySQL. Bootstrap hỗ trợ xây dựng giao diện responsive, thân thiện trên mọi thiết bị. Toàn bộ kiến trúc tuân thủ mô hình RESTful API, đảm bảo khả năng mở rộng và bảo trì lâu dài cho hệ thống.

3.1. Công nghệ frontend Next.js React và Redux trong phát triển giao diện

Next.js cung cấp khả năng server-side rendering và tối ưu SEO cho website thương mại điện tử. React xây dựng giao diện từ các component độc lập, mỗi component có state riêng và cập nhật tự động khi dữ liệu thay đổi. Props giúp các component truyền dữ liệu cho nhau một cách có kiểm soát. Redux quản lý state toàn cục, đồng bộ thông tin giỏ hàng và trạng thái đăng nhập xuyên suốt ứng dụng. Bootstrap đảm bảo giao diện hiển thị tốt trên cả máy tính và thiết bị di động.

3.2. Công nghệ backend Spring Boot Spring Data JPA và MySQL

Spring Boot giúp xây dựng API RESTful nhanh chóng với cấu hình tối thiểu nhờ nguyên tắc Convention over Configuration. Spring Data JPA cung cấp lớp trừu tượng hóa truy cập cơ sở dữ liệu, giảm thiểu mã lặp khi thao tác với MySQL. Hệ thống cơ sở dữ liệu MySQL lưu trữ toàn bộ thông tin sản phẩm, đơn hàng, tài khoản và danh mục. Tích hợp VNPay được thực hiện tại tầng backend với xác thực chữ ký bảo mật, đảm bảo an toàn giao dịch thanh toán trực tuyến.

IV. Kết luận và ứng dụng thực tiễn của đồ án website bán giày trực tuyến

Đồ án tốt nghiệp xây dựng website thương mại điện tử bán giày tại ĐH Sư phạm Kỹ thuật TP.HCM đã hoàn thành mục tiêu đề ra: xây dựng một hệ thống bán hàng trực tuyến hoàn chỉnh với đầy đủ chức năng cho cả khách hàng lẫn quản trị viên. Hệ thống thể hiện khả năng vận dụng các công nghệ hiện đại trong phát triển phần mềm, từ React và Next.js ở frontend đến Spring Boot và MySQL ở backend. Sản phẩm có giá trị ứng dụng thực tiễn cao: doanh nghiệp nhỏ và vừa trong ngành giày dép có thể tham khảo mô hình này để số hóa hoạt động kinh doanh. Đây cũng là nền tảng để mở rộng thêm các tính năng như đánh giá sản phẩm, chương trình khuyến mãi, gợi ý sản phẩm bằng AI hoặc ứng dụng di động. Đồ án khẳng định chất lượng đào tạo ngành Công nghệ Thông tin của Trường ĐH Sư phạm Kỹ thuật TP.HCM trong việc gắn kết lý thuyết với thực tiễn phát triển phần mềm thương mại điện tử.

4.1. Kết quả đạt được và hướng phát triển trong tương lai

Hệ thống hoàn thiện với đầy đủ luồng nghiệp vụ: đăng ký, đăng nhập, tìm kiếm sản phẩm, quản lý giỏ hàng, thanh toán VNPay và quản trị toàn diện. Hướng phát triển tương lai bao gồm tích hợp module đánh giá và xếp hạng sản phẩm, thêm tính năng gợi ý sản phẩm dựa trên hành vi người dùng, phát triển ứng dụng di động và tối ưu hiệu năng hệ thống khi lượng người dùng tăng cao thông qua caching và load balancing.

4.2. Bài học kinh nghiệm và đóng góp của đồ án cho sinh viên IT

Đồ án cung cấp bài học thực tiễn quý giá về quy trình phát triển phần mềm từ phân tích yêu cầu đến triển khai sản phẩm. Sinh viên tích lũy kinh nghiệm làm việc với kiến trúc microservice-oriented, tích hợp cổng thanh toán thực tế và quản lý dự án theo nhóm. Kết quả này phản ánh năng lực đào tạo thực hành của ĐH Sư phạm Kỹ thuật TP.HCM, nơi sinh viên được tiếp cận công nghệ sát với nhu cầu thị trường lao động hiện đại trong ngành công nghệ thông tin.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh công nghệ thông tin và các ứng dụng phần mềm phát triển mạnh mẽ, năng suất cùng hiệu quả lao động trong nhiều lĩnh vực kinh tế - xã hội đã được nâng cao rõ rệt. Việc ứng dụng thương mại điện tử vào hoạt động bán lẻ ngày càng trở nên thiết yếu. Xuất phát từ thực tiễn đó, đề tài khóa luận tốt nghiệp ngành Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh với tên đề tài "Building An E-Commerce Website For Selling Shoes" (Xây dựng website thương mại điện tử bán giày) được thực hiện bởi nhóm sinh viên Vũ Tiến Đạt và Hoàng Đại Nghĩa, dưới sự hướng dẫn của ThS. Nguyễn Trần Thi Văn và phản biện của TS. Lê Vĩnh Thịnh.

Lý do lựa chọn đề tài được nhóm tác giả xác định dựa trên ba thế mạnh và khía cạnh trọng tâm:

• Khả năng tiếp cận thị trường rộng lớn (Wide Market Reach): Nền tảng thương mại điện tử cho phép doanh nghiệp mở rộng quy mô kinh doanh không chỉ ở phạm vi nội địa mà còn vươn ra thị trường quốc tế, xóa bỏ rào cản về mặt vị trí địa lý trong việc tiếp cận khách hàng.
• Tính năng trưng bày và tìm kiếm (Display and Search Features): Hỗ trợ trình bày các mẫu giày một cách trực quan, hấp dẫn, kết hợp công cụ tìm kiếm giúp người tiêu dùng dễ dàng định vị và lựa chọn sản phẩm theo nhu cầu cá nhân.
• Quy trình đặt hàng và thanh toán trực tuyến (Online Ordering and Payment): Nâng cao trải nghiệm mua sắm, tối ưu hóa các bước giao dịch và giảm thiểu ma sát trong khâu thanh toán.

Mục tiêu của dự án được cụ thể hóa thành 3 nhiệm vụ chính:

1. Mở rộng thị trường và tiếp cận khách hàng (Market Expansion and Customer Reach): Tăng cường năng lực tiếp cận thị trường địa phương lẫn quốc tế, thu hút số lượng lớn khách hàng mới qua nền tảng số.
2. Nâng cao trải nghiệm mua sắm (Enhance Shopping Experience): Thiết lập quy trình mua sắm trực tuyến thuận tiện, an toàn, từ tìm kiếm thông tin, lựa chọn sản phẩm đến đặt hàng và thanh toán trực tuyến.
3. Quản lý kho hàng hiệu quả (Efficient Inventory Management): Xây dựng hệ thống theo dõi và quản lý hàng tồn kho nhằm hạn chế rủi ro thiếu hụt hoặc dư thừa hàng hóa, duy trì sự cân bằng giữa cung và cầu.

Đối tượng và phạm vi nghiên cứu của đề tài bao gồm:

• Đối tượng nghiên cứu: Nghiên cứu các vấn đề cốt lõi về hiển thị sản phẩm và cơ chế tìm kiếm đa tiêu chí; phân tích thị trường giày dép nhằm nắm bắt xu hướng tiêu dùng, thị hiếu khách hàng và đối thủ cạnh tranh.
• Phạm vi nghiên cứu: Xây dựng một website thương mại điện tử chuyên doanh giày dép tích hợp thanh toán trực tuyến. Thời gian triển khai thực hiện đề tài từ ngày 25/02/2024 (giao đề tài) đến ngày 17/06/2024 (nộp báo cáo khóa luận).

Cơ sở lý thuyết và phương pháp

Khóa luận được xây dựng dựa trên nền tảng kiến trúc phần mềm phân lớp theo mô hình MVC (Model - View - Controller), kết hợp các công nghệ và thư viện hiện đại:

• Công nghệ phía máy khách (Client-side): ReactJS, Redux Toolkit, Next.js, Bootstrap, HTML, CSS và JavaScript. Trong đó, ReactJS là thư viện JavaScript mã nguồn mở do Facebook phát triển (ra mắt năm 2013), hoạt động dựa trên cơ chế DOM ảo (Virtual DOM) giúp tối ưu hóa quá trình kết xuất giao diện khi dữ liệu thay đổi, liên kết dữ liệu một chiều (one-way data flow) từ thành phần cha sang con thông qua Props, quản lý trạng thái động nội tại bằng State, cùng cú pháp mở rộng JSX được biên dịch tĩnh giúp phát hiện lỗi sớm.
• Công nghệ phía máy chủ (Server-side): Framework Spring Boot kết hợp Spring Data JPA. Spring Boot tuân thủ triết lý "Convention over Configuration" giúp giảm thiểu mã cấu hình rườm rà, tích hợp sẵn các web container nhúng (như Tomcat, Jetty, Undertow) cho phép đóng gói ứng dụng thành tệp JAR độc lập, hỗ trợ tính năng tự động cấu hình (Auto-Configuration) và hệ thống Spring Boot Starters. Phân hệ Spring Data JPA đóng vai trò đơn giản hóa tầng truy xuất dữ liệu (Data Access Layer), tự động hóa việc khởi tạo các kho lưu trữ (repository interfaces) phục vụ truy vấn dữ liệu mà không cần viết nhiều mã nguồn thủ công.
• Hệ quản trị cơ sở dữ liệu: MySQL được lựa chọn để lưu trữ toàn bộ dữ liệu quan hệ của hệ thống.
• Cổng thanh toán tích hợp: Hệ thống thanh toán trực tuyến VNPay được sử dụng làm phương thức thanh toán điện tử chính.

Phương pháp nghiên cứu và phát triển phần mềm được nhóm tác giả áp dụng:

• Phương pháp đối chuẩn thực tế (Benchmarking): Phân tích, khảo sát cấu trúc giao diện và quy trình xử lý đơn hàng của các nền tảng thương mại điện tử giày dép quốc tế lớn gồm Adidas (adidas.vn), Nike (nike.vn) và Puma (puma.com).
• Phương pháp mô hình hóa yêu cầu: Xác định các tác nhân (Actors), phân loại yêu cầu chức năng (Functional Requirements) và yêu cầu phi chức năng (Non-Functional Requirements).
• Phương pháp phân tích và thiết kế hướng đối tượng: Xây dựng biểu đồ ca sử dụng (Use Case Diagram), đặc tả chi tiết từng ca sử dụng (Use Case Specifications), lập biểu đồ tuần tự (Sequence Diagram), thiết kế lược đồ cơ sở dữ liệu quan hệ và mô hình hóa thành phần giao diện người dùng.

Nguồn dữ liệu của nghiên cứu là các đặc tả nghiệp vụ bán hàng thực tế, tập dữ liệu danh mục phân cấp, nhãn hiệu giày và thông tin giao dịch được thiết kế chuẩn hóa trong 15 bảng quan hệ tại cơ sở dữ liệu MySQL.

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc tách biệt giữa giao diện người dùng (Frontend) và xử lý nghiệp vụ máy chủ (Backend), giao tiếp thông qua các điểm cuối dịch vụ.

Tầng kiến trúc	Công nghệ sử dụng	Vai trò kỹ thuật trong hệ thống
Giao diện (Frontend)	ReactJS, Redux Toolkit, Bootstrap, HTML/CSS/JS	Xây dựng giao diện tương tác người dùng, quản lý trạng thái luồng dữ liệu một chiều, tối ưu kết xuất qua Virtual DOM.
Nghiệp vụ (Backend)	Spring Boot, Spring Data JPA	Xử lý logic nghiệp vụ theo mô hình MVC, cung cấp dịch vụ xác thực, điều hướng xử lý đơn hàng và tích hợp API.
Lưu trữ dữ liệu	MySQL	Quản lý và lưu trữ dữ liệu có cấu trúc cho toàn bộ sản phẩm, danh mục, tài khoản, giỏ hàng và lịch sử đơn hàng.
Thanh toán tích hợp	VNPay Gateway	Xử lý giao dịch thanh toán trực tuyến an toàn cho khách hàng bên cạnh phương thức trả sau.

Các yêu cầu phi chức năng của hệ thống được xác định theo chuẩn kỹ thuật gồm 6 tiêu chí:

STT	Yêu cầu phi chức năng (Non-Functional Requirements)	Mô tả chi tiết
1	Giao diện thân thiện (Easy to use interface)	Thiết kế trực quan, dễ thao tác cho người mua hàng và quản trị viên.
2	Tốc độ xử lý (Process data as quickly as possible)	Tối ưu hóa thời gian phản hồi và xử lý dữ liệu hệ thống.
3	Bảo mật thông tin (Ensure security of personal information)	Bảo vệ an toàn dữ liệu định danh và thông tin cá nhân của khách hàng.
4	Khả năng mở rộng (Simple to update and expand in the future)	Kiến trúc module hóa, thuận tiện cho việc nâng cấp tính năng sau này.
5	Tính toàn vẹn (Maintain high integrity for customers)	Đảm bảo tính nhất quán và chính xác của dữ liệu giao dịch.
6	Cá nhân hóa (Personalize user experience)	Tối ưu hóa trải nghiệm mua sắm dựa trên thao tác của từng người dùng.

Lược đồ cơ sở dữ liệu quan hệ của hệ thống bao gồm 15 thực thể bảng dữ liệu:

1. Product: Lưu trữ thông tin chi tiết về các mẫu giày (tên, giá cả, mô tả).
2. Brand: Danh mục các thương hiệu phân phối.
3. Cart: Quản lý giỏ hàng của khách hàng.
4. Comment: Lưu trữ bình luận, đánh giá của khách hàng về sản phẩm.
5. User: Lưu trữ thông tin định danh và tài khoản người dùng.
6. Orders: Quản lý thông tin chung về đơn đặt hàng và trạng thái đơn.
7. Order_line: Quản lý chi tiết từng dòng sản phẩm thuộc đơn hàng.
8. Child category: Danh mục phân loại sản phẩm cấp con.
9. Role: Danh mục phân quyền và vai trò trong hệ thống.
10. User role: Bảng trung gian liên kết phân quyền người dùng và vai trò.
11. Comment image: Quản lý hình ảnh đính kèm trong các bình luận đánh giá.
12. Parent category: Danh mục phân loại sản phẩm cấp cha.
13. Refresh token: Quản lý mã làm mới phiên đăng nhập để xác thực an toàn.
14. Product size: Quản lý các tùy chọn kích cỡ của từng mẫu giày.
15. Product image secondaries: Lưu trữ tập hợp các ảnh phụ chi tiết của sản phẩm.

Nội dung chính theo từng chương

Chương 1: Giới thiệu đề tài (Introduction)

Chương 1 trình bày tổng quan về bối cảnh chuyển dịch số trong hoạt động bán lẻ, làm rõ tính tất yếu của việc xây dựng một website chuyên kinh doanh mặt hàng giày dép. Tác giả phân tích tiềm năng của việc mở rộng thị trường vượt khỏi biên giới địa lý, khả năng tối ưu hóa trải nghiệm người dùng thông qua công cụ tìm kiếm và cơ chế đặt hàng trực tuyến. Chương này xác định rõ mục tiêu kép: tạo kênh mua sắm trực tuyến thuận tiện cho khách hàng và xây dựng giải pháp quản trị kho hàng chính xác, giảm thiểu tình trạng đứt gãy nguồn cung hoặc ứ đọng tồn kho. Kết quả kỳ vọng là một hệ thống thương mại điện tử vận hành trơn tru từ khâu duyệt sản phẩm, đánh giá, tương tác cho đến xử lý đơn hàng.

Chương 2: Cơ sở lý thuyết (Theoretical Basis)

Nội dung chương 2 tập trung giải trình các nền tảng lý thuyết và công nghệ cốt lõi phục vụ xây dựng hệ thống:

• Kiến trúc tổng thể: Ứng dụng mô hình MVC phối hợp giữa React.js, Redux Toolkit ở tầng giao diện và Spring Boot, Spring Data JPA ở tầng máy chủ.
• Thư viện ReactJS: Phân tích cơ chế hoạt động của Virtual DOM giúp hạn chế việc tính toán lại toàn bộ cây DOM thực tế; luồng dữ liệu một chiều qua Props; cách thức quản lý trạng thái động bằng State; vòng đời kết xuất của các Component; và lợi ích của cú pháp JSX trong tối ưu tốc độ thực thi cũng như rà soát lỗi tĩnh trước khi chạy.
• Framework Spring Boot: Làm rõ các đặc tính nổi bật như quy ước thay cấu hình (Convention over Configuration), máy chủ web nhúng, cơ chế Auto-Configuration và bộ công cụ Spring Boot DevTools cùng Actuator.
• Phân hệ Spring Data JPA: Trình bày vai trò giảm thiểu mã nguồn lặp lại (boilerplate code) ở tầng truy xuất dữ liệu, tự động ánh xạ quan hệ thực thể và hỗ trợ sẵn các nghiệp vụ cơ bản như phân trang và kiểm tra dữ liệu.

Chương 3: Thu thập và mô hình hóa yêu cầu hệ thống (System Requirements Capturing and Modelling)

Chương 3 bắt đầu bằng việc khảo sát thực nghiệm 3 hệ thống thương mại điện tử lớn gồm Adidas, Nike và Puma nhằm trích xuất các luồng nghiệp vụ chuẩn: lọc sản phẩm theo nhóm, chọn kích cỡ và số lượng, lựa chọn hình thức thanh toán và đặt hàng. Từ đó, tác giả phân chia hệ thống thành 3 nhóm tác nhân chính:

• Khách vãng lai (Guest): Người dùng chưa đăng ký tài khoản, được phép xem sản phẩm, tìm kiếm, lọc theo danh mục và xem thông tin chi tiết sản phẩm.
• Khách hàng (Customer): Người dùng đã có tài khoản, thực hiện các thao tác đăng nhập, đăng xuất, quản lý giỏ hàng (thêm, xem, sửa), tạo danh sách yêu thích (Wishlist), tiến hành thanh toán (Checkout), xem lịch sử đơn hàng, chỉnh sửa hồ sơ và đổi mật khẩu.
• Quản trị viên (Admin): Tài khoản quản trị toàn quyền, thực hiện quản lý danh mục sản phẩm (thêm, sửa, xóa), quản lý nhãn hàng, quản lý đơn hàng đã thanh toán và cập nhật trạng thái đơn, quản lý tài khoản khách hàng, thiết lập giá khuyến mãi (Edit sale) và theo dõi thống kê doanh thu (Store revenue statistics).

Chương 3 tổng hợp 31 nghiệp vụ chức năng chính của hệ sinh thái website bán giày thông qua bảng danh mục thao tác hệ thống (Table 2: System's Operations) và xác lập bảng 6 yêu cầu phi chức năng.

Chương 4: Phân tích và thiết kế hệ thống (System Analysis and Design)

Chương 4 là phần nội dung trọng tâm của đồ án, hiện thực hóa các yêu cầu thành mô hình kỹ thuật chi tiết:

• Biểu đồ chức năng và Use Case: Thiết kế sơ đồ phân rã chức năng (Functional diagram), sơ đồ Use Case phía khách hàng (Customer side) và phía quản trị (Admin side).
• Đặc tả ca sử dụng chi tiết (Use Case Specifications): Xây dựng bảng đặc tả các bước thực thi từ tiền điều kiện, hành vi người dùng, phản hồi hệ thống cho 13 nghiệp vụ quan trọng gồm: Đăng nhập (Login), Đăng ký (Sign up), Quên mật khẩu qua mã OTP gửi về email (Forgot Password), Đổi thông tin hồ sơ (Change Profile), Thêm sản phẩm vào giỏ từ trang chi tiết (Add to cart), Kiểm tra giỏ hàng (Check cart), Thanh toán đơn hàng (Payment), Đăng nhập Admin (Log in Admin), Đổi mật khẩu Admin (Change Password of Admin), Cập nhật sản phẩm (Update Product), Cập nhật khách hàng (Update Customers), Cập nhật thương hiệu (Update Brands) và Quản lý thống kê (Manage statistic).
• Biểu đồ tuần tự (Sequence Diagrams): Mô hình hóa tuần tự tương tác giữa người dùng, giao diện, bộ điều khiển và cơ sở dữ liệu cho các luồng thao tác: Đăng nhập, Đăng ký, Tìm kiếm sản phẩm, Thanh toán, Xem lịch sử đơn hàng, Quản lý giỏ hàng và Thêm mới sản phẩm.
• Thiết kế cơ sở dữ liệu và thành phần giao diện: Chi tiết hóa cấu trúc 15 bảng dữ liệu MySQL cùng bảng mô tả các đối tượng giao diện (Interface Objects) từ trang chủ, trang chi tiết, giỏ hàng, thanh toán đến toàn bộ giao diện bảng điều khiển quản trị (Dashboard, Customers, Brands, Products, Orders).

Chương 5: Hiện thực hóa và kiểm thử (Implementation and Testing)

Chương 5 đúc kết quá trình chuyển giao từ thiết kế sang sản phẩm phần mềm hoạt động thực tế. Nội dung bao gồm việc tổng kết các kiến thức và kỹ năng nhóm tác giả đã tích lũy trong quá trình phát triển (lập trình React, cấu hình Spring Boot, thiết kế bảng dữ liệu MySQL), mô tả chi tiết về sản phẩm hoàn thiện, đồng thời đưa ra các đánh giá khách quan về ưu điểm và hạn chế (Advantages and Disadvantages) của hệ thống trong môi trường thử nghiệm.

Kết quả và đóng góp

Đồ án đã đạt được các kết quả kỹ thuật cụ thể theo đúng mục tiêu đặt ra:

• Xây dựng thành công hệ sinh thái website thương mại điện tử hoàn chỉnh cho ngành hàng giày dép với 31 chức năng nghiệp vụ, phân định rõ ràng giữa phân hệ người mua (Customer) và phân hệ quản trị (Admin).
• Tích hợp cổng thanh toán trực tuyến VNPay song song với hình thức thanh toán khi nhận hàng, cung cấp tùy chọn đa dạng cho người mua.
• Thiết lập quy trình đặt lại mật khẩu bảo mật sử dụng mã xác thực một lần (OTP) gửi qua thư điện tử (ValidateOtp, ResetPassword).
• Cấu trúc hệ thống dữ liệu quan hệ chuẩn hóa gồm 15 bảng, hỗ trợ phân loại sản phẩm đa cấp (Parent category và Child category), quản lý đa biến thể kích cỡ (Product size), ảnh phụ (Product image secondaries) và phân quyền dựa trên vai trò (Role, User role).

Về mặt đóng góp, đề tài tự xác định việc ứng dụng kết hợp thành công giữa kiến trúc Spring Boot hướng RESTful và thư viện giao diện ReactJS, tạo ra giải pháp có tính module hóa cao, dễ dàng quản lý trạng thái và đồng bộ hóa giỏ hàng theo thời gian thực. Đồ án đưa ra bộ tài liệu đặc tả ca sử dụng và thiết kế giao diện chuẩn mực, có thể áp dụng làm tài liệu tham khảo cho các bài toán thương mại điện tử chuyên ngành.

Hạn chế và hướng nghiên cứu tiếp

Hạn chế của đồ án:

• Thời gian thực hiện dự án tương đối ngắn (khoảng 4 tháng, từ cuối tháng 2/2024 đến giữa tháng 6/2024), kiến thức và kỹ năng thực tế của nhóm sinh viên trong việc quản lý dự án phần mềm quy mô lớn còn có những giới hạn nhất định, dẫn đến một số chức năng chuyên sâu chưa được tối ưu hóa toàn diện.
• Hệ thống mới dừng lại ở việc đáp ứng các luồng giao dịch cơ bản, chưa triển khai các thuật toán gợi ý sản phẩm nâng cao hoặc xử lý đồng thời tải trọng lớn trong môi trường phân tán thực tế.

Hướng phát triển tiếp theo được tác giả ghi nhận:

• Tiếp tục nghiên cứu sâu hơn về thị trường giày dép nhằm nắm bắt các biến động về thị hiếu tiêu dùng để bổ sung các tính năng cá nhân hóa chuyên sâu.
• Nâng cao năng lực bảo mật hệ thống và mở rộng kiến trúc để sẵn sàng chuyển đổi sang mô hình vi dịch vụ (Microservices) dựa trên nền tảng sẵn có của Spring Boot.

Giá trị tham khảo

Báo cáo khóa luận có giá trị tham khảo rõ ràng đối với:

• Sinh viên chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm và Hệ thống Thông tin đang chuẩn bị làm đồ án môn học hoặc khóa luận tốt nghiệp về xây dựng ứng dụng web thương mại điện tử.
• Các nhà phát triển muốn nghiên cứu mô hình kết hợp thực tế giữa Spring Boot (Spring Data JPA) và ReactJS (Redux Toolkit), đặc biệt là quy trình thiết kế cơ sở dữ liệu quan hệ nhiều thực thể phục vụ quản lý sản phẩm có nhiều biến thể (kích cỡ, màu sắc, ảnh phụ).
• Phần đáng tham khảo nhất trong tài liệu là hệ thống 13 bảng đặc tả ca sử dụng chi tiết (từ Bảng 5 đến Bảng 17) và danh mục 15 bảng thiết kế dữ liệu (từ Bảng 18 đến Bảng 32) tại Chương 4, cung cấp cấu trúc mẫu chuẩn cho giai đoạn phân tích thiết kế phần mềm.

Câu hỏi thường gặp

1. Kiến trúc công nghệ chủ đạo được sử dụng để xây dựng website bán giày trong đồ án là gì?

Hệ thống sử dụng kiến trúc MVC với sự tách biệt giữa Frontend và Backend. Phía giao diện (Client-side) sử dụng ReactJS kết hợp Redux Toolkit, Next.js và Bootstrap. Phía máy chủ (Server-side) xây dựng bằng Spring Boot kết hợp Spring Data JPA để truy xuất cơ sở dữ liệu quan hệ MySQL.

2. Hệ thống phân chia quyền hạn của người dùng thành những nhóm tác nhân nào?

Hệ thống xác định 3 nhóm tác nhân (Actors): Khách vãng lai (Guest - người chưa có tài khoản, chỉ được xem và tìm kiếm sản phẩm), Khách hàng (Customer - người đã đăng ký và đăng nhập, có quyền quản lý giỏ hàng, thanh toán, xem lịch sử đơn, đổi mật khẩu) và Quản trị viên (Admin - có toàn quyền quản lý sản phẩm, danh mục, thương hiệu, khách hàng, đơn hàng và xem thống kê).

3. Quy trình khôi phục mật khẩu (Forgot Password) của người dùng được thiết kế gồm những bước nào?

Theo đặc tả Use Case tại Bảng 7 và các sơ đồ giao diện liên quan, quy trình gồm 6 bước: (1) Truy cập hệ thống; (2) Vào trang Đăng nhập; (3) Nhấn vào liên kết "Forgot password"; (4) Nhập địa chỉ email để nhận mã OTP; (5) Nhập mã OTP đã nhận (ValidateOtp); (6) Nhập mật khẩu mới và xác nhận lại mật khẩu (ResetPassword).

4. Cơ sở dữ liệu của dự án gồm bao nhiêu bảng và các thực thể nào dùng để quản lý cấu trúc phân loại sản phẩm?

Cơ sở dữ liệu bao gồm 15 bảng quan hệ. Trong đó, cấu trúc phân loại và chi tiết sản phẩm được quản lý thông qua các bảng: Parent category (danh mục cha), Child category (danh mục con), Brand (thương hiệu), Product (sản phẩm), Product size (kích cỡ sản phẩm) và Product image secondaries (hình ảnh phụ của sản phẩm).

5. Phương thức thanh toán trực tuyến nào được tích hợp vào hệ thống?

Bên cạnh hình thức trả sau (pay later/nhận hàng thanh toán), website sử dụng VNPay làm phương thức thanh toán trực tuyến chính nhằm xử lý các đơn đặt hàng trực tuyến của khách hàng.

Kết luận

Khóa luận tốt nghiệp "Building An E-Commerce Website For Selling Shoes" của sinh viên Vũ Tiến Đạt và Hoàng Đại Nghĩa đã hoàn thành mục tiêu xây dựng một nền tảng thương mại điện tử chuyên ngành giày dép với đầy đủ các nghiệp vụ từ tìm kiếm, giỏ hàng, đặt hàng đến thanh toán trực tuyến qua VNPay. Tài liệu thể hiện quy trình phân tích và thiết kế phần mềm bài bản thông qua việc đặc tả chi tiết 31 thao tác nghiệp vụ, 13 ca sử dụng cốt lõi và 15 bảng cơ sở dữ liệu quan hệ trên nền tảng công nghệ ReactJS, Spring Boot và MySQL. Đồ án là tài liệu kỹ thuật có giá trị tham khảo thiết thực cho sinh viên ngành Công nghệ Thông tin trong việc phát triển các ứng dụng web bán hàng phân lớp theo chuẩn học thuật.

Trích đoạn nội dung tài liệu

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS MAJOR: INFORMATION TECHNOLOGY BUILDING AN E-COMMERCE WEBSITE FOR SELLING SHOES INSTRUCTOR: NGUYEN TRAN THI VAN STUDENT: VU TIEN DAT HOANG DAI NGHIA Ho Chi Minh city, June 2024 HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING ---------------  --------------- GRADUATION PROJECT BUILDING AN E-COMMERCE WEBSITE FOR SELLING SHOES Instructor: Nguyen Tran Thi Van, MSc. Students: Vu Tien Dat 19110075 Hoang Dai Nghia 19110091 Ho Chi Minh City, June 2024 HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING ---------------  --------------- GRADUATION PROJECT BUILDING AN E-COMMERCE WEBSITE FOR SELLING SHOES Instructor: Nguyen Tran Thi Van, MSc. Students: Vu Tien Dat 19110075 Hoang Dai Nghia 19110091 Ho Chi Minh City, June 2024 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness ******* ---- Ho Chi Minh City, February 27th, 2024 CAPSTONE PROJECT OBJECTIVES Student’s name: 1. Vu Tien Dat ID: 19110075 2.

Hoang Dai Nghia ID: 19110091 Major: Information technology Instructor: Nguyen Tran Thi Van, MSc. Date of assignment: February 25,2024 Date of submission: June 17, 2024 1- Project title: Building An E-Commerce Website For Selling Shoes 2- Initial materials provided by supervisor: None 3- Contents of the project: Theory: - Reactjs - Spring Boot - Bootstrap - MySQL Practice: Build a website selling shoes in many different categories with basic functions: - Research into the model of e-commerce websites - Analyze business processes and determine problem requirements - Building an e-commerce website using the following technologies: + Research and learn Nextjs, React, Redux, HTML, CSS, Javascript, Spring Boot, Spring Data Jpa, MySQL. + Build a website using a basic store platform to sell products to customers, using VNPay as the main payment method. - Enable website admins to oversee accounts, orders, products, and categories efficiently.

- Enable website admins to review and modify order statuses for new orders. - Provide customers with the ability to search and view product details. - Allow customers to select color/size/quantity, manage their cart, and complete orders with payment options (pay later and online). 4- Final products: An e-commerce website for selling shoe products.

HEAD OF INFORMATION TECHNOLOGY INSTRUCTOR PROGRAM (Sign with full name) (Sign with full name) Nguyễn Trần Thi Văn THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness ******* INSTRUCTOR’S EVALUATION SHEET Student’s name: 1. Vu Tien Dat ID: 19110075 2. Hoang Dai Nghia ID: 19110091 Major: Information technology Project title: Building An E-Commerce Website For Selling Shoes Instructor: Nguyen Tran Thi Van, MSc. Content of project:.

Approval for oral defense? (Approved or denied) .) Ho Chi Minh City, June, 2024 INSTRUCTOR (Sign with full name) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness ******* REVIEWER’S EVALUATION SHEET Student’s name: 1. Vu Tien Dat ID: 19110075 2. Hoang Dai Nghia ID: 19110091 Major: Information technology Project title: Building An E-Commerce Website For Selling Shoes Reviewer: Le Vinh Thinh, PhD. Content and workload of the project:.

Approval for oral defense? (Approved or denied) .) Ho Chi Minh City, June, 2024 REVIEWER (Sign with full name) ACKNOWLEDGEMENTS In order to successfully complete this topic and report, I would like to send my sincere thanks to the students who supported me during the project writing process. I thank you for answering my questions and giving me advice and quick corrections to help me resolve my weaknesses and complete the project well and on time as set by the Faculty. The topic and report were carried out in a short period of time, with limited knowledge and many different techniques and experiences in implementing a project. Therefore, in the process of working, it is inevitable that the topic will have shortcomings, so I look forward to receiving your valuable comments so that my knowledge can be more complete and I can do better.

even better next time. Thank you sincerely. In closing, I respectfully wish you good health and greater success in your career. Once again I sincerely thank.

Thank you sincerely! Ho Chi Minh City, June, 2024 Student group implements Vu Tien Dat Hoang Dai Nghia TABLE OF CONTENTS CHAPTER 01: INTRODUCTION. Reason for choosing the topic. Purpose of project. 2 CHAPTER 02: THEORETICAL BASIS.

5 CHAPTER 03: SYSTEM REQUIREMENTS CAPTURING AND MODELLING. Non-Functional requirements. 12 CHAPTER 04: SYSTEM ANALYSIS AND DESIGN. Use Case Specifications.

Change profile information. Add to cart. Log in Admin. Change Password of Admin.

Database table details. User Interface Design. 59 CHAPTER 05: IMPLEMENTATION AND TESTING. Knowledge and skills.

About the product. Advantages and Disadvantages. 90 LIST OF FIGURES Figure 1: Architecture diagram. 3 Figure 2: Page interface adidas.

7 Figure 3: Page interface nike. 9 Figure 5: Functional diagram. 14 Figure 6: Usecase Customer. 15 Figure 7: Admin Usecase Diagram.

16 Figure 8: Login sequence. 27 Figure 9: Login sequence. 28 Figure 10: Login sequence. 29 Figure 11: Login sequence.

30 Figure 12: Login sequence. 30 Figure 13: Login sequence. 31 Figure 14: Login sequence. 32 Figure 15: Register sequence.

34 Figure 17: Login Interface. 43 Figure 18: Register Interface. 44 Figure 19: ForgotPassword Interface. 46 Figure 20: ValidateOtp Interface.

47 Figure 21: ResetPassword Interface. 48 Figure 22: Email Reset Interface. 49 Figure 23: HomePage Interface. 50 Figure 24: HomePage Interface.

51 Figure 25: HomePage Interface. 51 Figure 26: ShopNow Interface. 52 Figure 27: Profile Interface. 53 Figure 28: DetailPage Interface.

54 Figure 29: Cart Interface. 55 Figure 30: PaymentPage Interface. 56 Figure 31: Order Interface. 57 Figure 32: Login Admin Interface.

59 Figure 33: Reset Password Admin Interface. 60 Figure 34: Change Profile Admin Interface. 61 Figure 35: PageProducts Interface. 63 Figure 36: PageProducts Interface.

63 Figure 37: Update Product Interface. 65 Figure 38: Order Admin Interface Interface. 66 Figure 39: Order Admin Interface Interface. 66 Figure 40: Brands Admin Interface Interface.

68 Figure 41: Dashboard Interface. 69 Figure 42: Customers Interface. 70 Figure 43: MySQL Database. 72 Figure 44: Code Environment.

74 Figure 47: Spring boot. 74 LIST OF TABLES Table 1: Authorization. 10 Table 2: System's Operations. 11 Table 3: Non-Functional requirements.

12 Table 4: Modelling requirement. 13 Table 5: Login usecase specification. 17 Table 6: Register usecase specification. 18 Table 7: Forgot password usecase specification.

19 Table 8: Change profile usecase specification. 20 Table 9: Add to cart usecase specification. 21 Table 10: Check cart usecase specification. 22 Table 11: Payment usecase specification.

23 Table 12: Log in Admin usecase specification. 23 Table 13: Change Password of Admin usecase specification. 24 Table 14: Update Product usecase specification. 24 Table 15: Update Customers usecase specification.

25 Table 16: Update Brands usecase specification. 26 Table 17: Manage statistic usecase specification. 26 Table 18: Product table. 35 Table 19: Brand table.

36 Table 20: Cart table. 36 Table 21: Comment table. 37 Table 22: User table. 38 Table 23: Orders table.

39 Table 24: Order_line table. 39 Table 25: Child category table. 40 Table 26: Role table. 40 Table 27: User role table.

41 Table 28: Comment image table. 41 Table 29: Parent category table. 41 Table 30: Refresh token table. 42 Table 31: Product size table.

42 Table 32: Product image secondaries table. 42 Table 33: Login Interface Object. 43 Table 34: Register Interface Object. 45 Table 35: ForgotPassword Interface Object.

46 Table 36: ValidateOtp Interface Object. 47 Table 37: ResetPassword Interface Object. 48 Table 38: Email Reset Interface Object. 49 Table 39: HomePage Interface Object.

50 Table 40: HomePage Interface Object. 51 Table 41: ShopNow Interface Object. 52 Table 42: Profile Interface Object. 53 Table 43: DetailPage Interface Object.

54 Table 44: Cart Interface Object. 55 Table 45: PaymentPage Interface Object. 56 Table 46: Order Interface Object. 58 Table 47: Login Admin Interface Object.

59 Table 48: Reset Password Admin Object. 60 Table 49: Change Profile Admin Object. 62 Table 50: PageProducts Object. 64 Table 51: Update Product Object.

65 Table 52: Order Admin Interface Object. 67 Table 53: Brands Admin Interface Object. 68 Table 54: Dashboard Interface object. 70 Table 55: Customers Interface object.

71 Table 56: Modelling requireme. 86 CHAPTER 01: INTRODUCTION CHAPTER 01: INTRODUCTION 1. Reason for choosing the topic Today, with the strong development of information technology and application software programs, productivity and efficiency of work have increased. Information technology has been increasingly applied in various socio-economic sectors.

Building an e-commerce website specializing in selling shoes can bring many benefits and add value to your business. Here are the strengths and essential aspects of this topic: Wide Market Reach: An e-commerce website allows you to expand your business not only locally but internationally. You can reach customers everywhere without being limited by geographical location. Display and Search Features: An e-commerce website can showcase your products attractively, along with search features to help users easily find and select products based on their needs.

Online Ordering and Payment: The online ordering and payment process enhances the shopping experience for customers and reduces friction in transactions. Purpose of project Market Expansion and Customer Reach: Enhance the ability to access and expand the market, not only at the local level but also internationally. The goal is to attract a large number of new customers through the online platform. Enhance Shopping Experience: Create a convenient, easy, and secure online shopping experience for customers.

This includes the ordering process, online payment, and convenient search features. Efficient Inventory Management: Build an inventory management system to minimize the risk of stockouts or excess inventory. This helps maintain a balance between supply and demand. Object & scope The topic focuses on researching basic content and issues related to displaying your products in an attractive way, accompanied by a search feature to help users easily find and choose products according to their needs their request.

Research the footwear market to understand shopping trends, customer preferences, and competitors. Identify passion and specific market needs. Page | 1 CHAPTER 01: INTRODUCTION 1. Expected results Expected outcomes include the development of a vibrant footwear marketplace where users enjoy seamless interactions, from browsing and purchasing to commenting and rating.

Streamlined functions for shoppers and administrators ensure efficient order management and administrative controls, contributing to a successful, user-centric online footwear Page | 2 CHAPTER 02: THEORETICAL BASIS CHAPTER 02: THEORETICAL BASIS 2. System Architecture We use React.js and Redux Toolkit to craft the website's UI, followed by employing Spring Boot within the Spring Data JPA to build the back-end. Before updating the MySQL database, various logic events are implemented, all within the framework of the MVC model. Figure 1: Architecture diagram 2.

React ReactJS is an open source developed by Facebook, launched in 2013, itself a Javascript library used to build interactions with components on the website. One of the most outstanding features of ReactJS is that data rendering can be done not only on the Server layer but also on the Client layer.Virtual DOM Virtual DOM technology helps increase application performance. Only the root node has state and when it changes, it will restructure the entire thing, which means that the DOM tree will also have to change partly, which will affect processing speed. React JS uses Page | 3 CHAPTER 02: THEORETICAL BASIS Virtual DOM to improve this problem.

Virtual DOM is a Javascript object, each object contains all the information necessary to create a DOM, when data changes it will calculate the change.