xây dựng website bán giày sneakerhead store

Mục tiêu của đề tài Xây dựng một Website bán giày sneaker online với giao diện thân thiện, dễ tiếp cận, quy trình tìm kiếm sản phẩm, đặt hàng một cách dễ dàng và đa dạng các hình thức t

Tính cấp thiết của đề tài

Với nền công nghiệp 4.0 hiện nay, kinh doanh mua bán là một nhu cầu không thể thiếu cho mọi người Trong số các mặt hàng thời trang, giày dép là một sản phẩm rất quan trọng cho mỗi cá nhân Nhưng việc tìm được một đôi giày ưng ý không phải là dễ dàng, bởi thị trường có quá nhiều loại giày với kiểu dáng, chất lượng, giá cả khác biệt, khiến người dùng khó chọn được đôi giày phù hợp với nhu cầu của mình Thêm vào đó, cũng có nhiều nhà cung cấp không đảm bảo uy tín

Với những lý do kể trên, các website bán hàng trực tuyến ra đời để cung cấp cho người dùng những thông tin đáng tin cậy, giúp cho việc mua sắm trở nên thuận tiện hơn Người dùng sẽ có thể chọn được sản phẩm ưng ý cho bản thân mà không lo về chất lượng

Các website bán hàng trực tuyến đã tạo ra một cách mua sắm mới cho chúng ta, khi chỉ cần một cú nhấp chuột là có thể có được tất cả các thông tin cần thiết Nhóm nghiên cứu của chúng tôi đã chọn đề tài “Xây dựng website bán giày SneakerHead Store” cho Khóa luận tốt nghiệp.

Mục tiêu của đề tài

Xây dựng một Website bán giày sneaker online với giao diện thân thiện, dễ tiếp cận, quy trình tìm kiếm sản phẩm, đặt hàng một cách dễ dàng và đa dạng các hình thức thanh toán

Xây dựng một Website quản lý cửa hàng giày sneaker với đầy đủ những tính năng quản trị và hiển thị thông tin, thống kê một cách trực quan nhất, giúp người dùng dễ dàng theo dõi và quản lý.

Cách tiếp cận và phương pháp nghiên cứu

Đối tượng nghiên cứu

Đối tượng nghiên cứu trong đề tài “Xây dựng website bán giày SneakerHead Store” được nhóm nghiên cứu thông qua các khảo sát thực tế gồm có:

- Sử dụng các cấu trúc, tính năng, ưu điểm, độ tin cậy và khía cạnh bảo mật của Spring Boot và ReactJS trong việc tích hợp vào đề tài

- Tìm hiểu các trang web tương đồng để nắm bắt cách chúng hoạt động, quy trình tìm kiếm sản phẩm, đặt hàng và những tính năng quan trọng cho một trang web mua sắm giày dép trực tuyến Sau đó, nhóm đã áp dụng kiến thức thu được vào dự án

- Dựa trên đặc điểm và nhu cầu sử dụng của người dùng, thiết kế chức năng sao cho tương thích và phản ánh nhu cầu của họ Cung cấp các giải pháp để đối mặt với những khó khăn mà người dùng có thể gặp phải

- Quản lý và nhân viên cửa hàng: Phân tích và đáp ứng những kỹ năng và nhu cầu quản lý cũng như thao tác mà đội ngũ quản lý và nhân viên cửa hàng cần sử dụng Điều này bao gồm việc tối ưu hóa giao diện người dùng và các chức năng hỗ trợ quản lý, đồng thời cung cấp các công cụ hiệu quả nhằm giúp nhân viên thực hiện các nhiệm vụ hàng ngày một cách thuận tiện và hiệu quả.

Phạm vi đề tài

Nhóm đã định rõ phạm vi mà họ sẽ nghiên cứu và tuân thủ các quy tắc cụ thể Dưới đây là danh sách các phạm vi mà nhóm đã xác định:

- Về phần công nghệ, nhóm tập trung vào việc sử dụng các công nghệ back-end như Spring Boot, Front-end như ReactJS, và cơ sở dữ liệu MongoDb Ngoài ra, nhóm cũng tích hợp các công nghệ hỗ trợ của bên thứ 3 khác như Paypal, VnPay, GHN, Google,

Từ những công nghệ này, nhóm áp dụng kỹ năng lập trình và kiến thức đã học để xây dựng cấu trúc và chức năng của trang web

- Liên quan đến đối tượng mà trang web hướng đến, nhóm tập trung nghiên cứu và phát triển các chức năng nhằm đáp ứng nhu cầu của khách hàng, những đối tượng có nhu cầu mua sắm, săn các sản phẩm giày Sneaker online

- Về môi trường hoạt động, trang web được thiết kế để hoạt động trong lĩnh vực mua sắm, chủ yếu tập trung vào việc cung cấp dịch vụ tìm kiếm, mua sắm các sản phẩm giày Sneaker tại cửa hàng Đồng thời, trang web này cung cấp một quy trình đặt hàng và thanh toán để một cách thuận tiện

- Về mặt kỹ năng vận hành, đối với người dùng, chỉ cần thực hiện các thao tác như tìm kiếm sản phẩm, xem chi tiết sản phẩm, thêm sản phẩm vào giỏ hàng, đặt hàng, thanh toán và đánh giá sản phẩm Trong khi đó, đối với quản lý và nhân viên, yêu cầu có nghiệp vụ trong các công việc như tạo mới, xóa, cập nhật, và quan sát các dữ liệu như thông tin về người dùng, sản phẩm, danh mục sản phẩm, nhãn hàng, đơn hàng.

Phân tích những công trình có liên quan

Website thứ nhất: Adidas Việt Nam

Link website: https://www.adidas.com.vn

Khảo sát website Adidas Việt Nam

Lý do chọn: Adidas là một thương hiệu thời trang đa quốc gia có nguồn gốc từ Đức, được biết đến với các sản phẩm chất lượng cao, đa dạng mẫu mã, đối tượng người dùng.Trang chủ Adidas Việt Nam là một website phân phối online các sản phẩm giày dép, quần áo, phụ kiện thể thao chính hãng của Adidas tại Việt Nam

Hình 1 Giao diện trang chủ Adidas Việt Nam

Hình 2 Giao diện trang xem chi tiết đơn hàng Adidas Việt Nam

Các chức năng của website:

- Đăng ký/đăng nhập tài khoản, đăng nhập tài khoản với bên thứ 3

- Xem danh sách sản phẩm: Website cho phép người dùng có thể xem danh sách các sản phẩm theo từng danh mục

- Xem chi tiết sản phẩm: Người dùng có thể xem chi tiết của một sản phẩm bất kỳ

- Xem hướng dẫn chọn size giày: Người dùng có thể xem hướng dẫn chọn size giày dựa vào kích thước của bàn chân

- Thêm sản phẩm vào danh mục yêu thích: Người dùng có thể thêm bất kỳ sản phẩm nào vào danh mục yêu thích

- Tìm kiếm, sắp xếp và lọc sản phẩm: Website cho phép người dùng tìm kiếm sản phẩm theo tên Bên cạnh đó người dùng cũng có thể áp dụng bộ lọc hoặc sắp xếp sản phẩm để dễ dàng xem các sản phẩm

- Đánh giá sản phẩm: Người dùng có thể đánh giá sản phẩm từ 1 đến 5 sao và có thể viết những đánh giá cho sản phẩm mà mình đã mua

- Thêm sản phẩm vào giỏ hàng: Người dùng có thể thêm một sản phẩm mình muốn mua vào giỏ hàng

- Đặt hàng và thanh toán: Đặt hàng với các phương thức thanh toán được chấp nhận như là thanh toán khi nhận hàng, thẻ Mastercard và thẻ Visa

- Theo dõi đơn hàng: Người dùng có thể theo dõi lịch trình đơn hàng của mình Ưu điểm:

- Giao diện thân thiện, dễ sử dụng

- Màu sắc hài hoà, hiệu ứng đẹp, mượt mà

- Mỗi dòng sản phẩm sẽ có một chuyện về dòng sản phẩm, tạo nên giá trị tinh thần cho sản phẩm

- Đầy đủ chức năng đáp ứng hầu hết nhu cầu người dùng

- Website dồn rất nhiều nội dung vào một trang, làm cho người dùng bị rối mắt dùng khi tìm kiếm, xem sản phẩm và đặt hàng

- Chưa hỗ trợ nhiều phương thức thanh toán online

Website thứ hai: Bounty Sneakers

Link website: https://bountysneakers.com

Khảo sát website Bounty Sneakers

Lý do chọn: Bounty Sneakers là một cửa hàng chuyên cung cấp các mặt hàng giày dép, phụ kiện thể thao chính hãng của rất nhiều thương hiệu lớn trên thế giới: Nike, Adidas, MLB, uy tín và chất lượng hàng đầu tại Hà Nội Trang chủ Bounty Sneakers là một website phân phối online toàn quốc các sản phẩm giày dép, phụ kiện thể thao chính hãng của Bounty Sneakers với đa dạng mẫu mã dành cho cả nam và nữ Tất cả các sản phẩm tại Bounty Sneakers 100% là hàng chính hãng nhập ngoại từ cửa hàng Adidas, Nike chính thống các nước Anh, Mỹ, Nhật với chất lượng được kiểm duyệt Đầy đủ tem, tag và phụ kiện

Hình 3 Trang chủ Bounty Sneakers

Hình 4 Trang chi tiết sản phẩm Bounty Sneakers

- Xem hướng dẫn chọn size giày: Người dùng có thể xem hướng dẫn chọn size giày dựa vào kích thước của bàn chân

- Tìm kiếm sản phẩm: Website cho phép người dùng tìm kiếm sản phẩm theo tên

- Nhập mã giảm giá: Website cho phép người dùng nhập những mã giảm giá để giảm giá cho hóa đơn mua hàng

- Đặt hàng và thanh toán: Đặt hàng với các phương thức thanh toán được chấp nhận như là thanh toán khi nhận hàng, chuyển khoản qua ngân hàng và thanh toán trả sau Fundiin

- Nhắn tin, gọi điện cho đội ngũ tư vấn: Người dùng có thể nhắn tin, gọi điện cho cửa hàng để được tư vấn về các sản phẩm, tư vấn chọn size, phương thức thanh toán,

- Hệ thống mã giảm giá giúp kích thích người tiêu dùng mua hàng

- Phương thức thanh toán đa dạng, thuận tiện cho khách hàng thanh toán

- Website chưa hỗ trợ người dùng lọc, sắp xếp danh sách tìm kiếm sản phẩm theo mức giá

- Chưa hỗ trợ người dùng thêm sản phẩm vào danh mục yêu thích.

Website thứ ba: KingShoes

Link website: https://kingshoes.vn

Lý do chọn: KingShoes là một cửa hàng chuyên cung cấp các mặt hàng giày sneaker, phụ kiện thể thao chính hãng của Nike, Adidas, uy tín và chất lượng hàng đầu tại Thành phố Hồ Chí Minh Bên cạnh đó, cửa hàng KingShoes là một trong những nơi sưu tầm có khối lượng giày hiếm siêu khủng Có những mẫu giày cực kì hype được giới sưu tầm săn lùng, thậm chí nhiều mẫu lạ mới mà hiếm shop nào có Trang chủ KingShoes là một website phân phối online các sản phẩm giày sneaker, phụ kiện thể thao chính hãng với đa dạng mẫu mã, kể cả những mẫu rất hiếm trên thị trường giày Sneaker

Hình 6 Trang chi tiết sản phẩm KingShoes

- Đặt hàng và thanh toán: Đặt hàng với các phương thức thanh toán được chấp nhận như là thanh toán khi nhận hàng, chuyển khoản qua ngân hàng

- Xem tin tức về các sản phẩm mới, các tin tức về cửa hàng Ưu điểm:

- Phương thức thanh toán đa dạng, thuận tiện cho khách hàng thanh toán

- Chưa hỗ trợ chức năng đăng ký/đăng nhập tài khoản

- Chưa hỗ trợ chức năng đánh giá sản phẩm

- Chưa hỗ trợ người dùng theo dõi trạng thái đơn hàng.

Website thứ tư: Tiệm giày cũ Sài Gòn

Link website: https://www.tiemgiaycusaigon.com

Khảo sát website Tiệm giày cũ Sài Gòn

Lý do chọn: Tiệm giày cũ Sài Gòn là một cửa hàng chuyên cung cấp các mặt hàng giày sneaker, phụ kiện thể thao chính hãng Secondhand của rất nhiều thương hiệu, uy tín và chất lượng hàng đầu tại Thành phố Hồ Chí Minh Trang chủ Tiệm giày cũ Sài

Gòn là một website phân phối online các sản phẩm giày sneaker, phụ kiện thể thao Secondhand với đa dạng mẫu mã, thiết kế, phù hợp cho cả nam và nữ, và đặc biệt là cam kết tất cả các sản phẩm đều là hàng chính hãng

Hình 7 Trang chủ Tiệm giày cũ Sài Gòn

Hình 8 Trang chi tiết sản phẩm Tiệm giày cũ Sài Gòn

- Đặt hàng và thanh toán: Đặt hàng với phương thức thanh toán COD

- Theo dõi trạng thái đơn hàng: Website cho phép người dùng theo dõi trạng thái vận chuyển của các đơn hàng đã đặt Ưu điểm:

- Chưa hỗ trợ nhiều phương thức thanh toán, chưa hỗ trợ thanh toán online

- Chưa hỗ trợ chức năng đánh giá sản phẩm.

Đánh giá tổng kết

Bảng 1 Bảng tổng kết khảo sát

+ Bố cục hài hòa, thân thiện với người dùng

+ Trang chủ với màu sắc hài hòa, năng động, thể hiện những nội dung đặc sắc nhất, khách quan nhất cho người dùng

GIAO DIỆN + Các danh mục sản phẩm trực quan, dễ dàng quan sát

- Nhóm rút kinh nghiệm: tham khảo được cách thiết kế, sáng tạo bố cục trang web kết hợp cùng các màu sắc hài hòa để tạo ra một trang web thân thiện với người dùng

+ Đa dạng về các mẫu mã sản phẩm với nhiều đối tượng khác nhau

+ Hình ảnh sản phẩm nổi bật, tạo sự thích thú cho người mua đối với sản phẩm

+ Thông tin sản phẩm được thể hiện một cách chi tiết, đầy đủ, đem lại sự tin cậy đối với người dùng

- Nhóm rút kinh nghiệm: tham khảo được cách sắp xếp, thể hiện các nội dung, hình ảnh, các thông tin sản phẩm một cách khoa học và hài hòa, tạo nên sự thân thiện, sự đáng tin cậy đối với người dùng

+ Dễ dàng đăng nhập với đa dạng về phương thức đăng nhập tài khoản

+ Dễ dàng đặt hàng với những thao tác cơ bản + Dễ dàng thanh toán với đa dạng phương thức thanh toán

- Nhóm rút kinh nghiệm: tham khảo được các tính năng cần có cho hệ thống để đảm bảo quá trình trải nghiệm của khách hàng được tốt nhất

Sau khi khảo sát và đánh giá nhiều website, nhóm sẽ lựa chọn những điểm nổi bật của mỗi website để xây dựng một website hoàn chỉnh, hiệu quả và thân thiện với người dùng khi trải nghiệm mua sắm trực tuyến tại hệ thống.

Kết quả dự kiến đạt được

Thành công trong việc xây dựng một trang web cung cấp các sản phẩm giày dép online chính hãng uy tín với trải nghiệm mua sắm mượt mà, nhanh chóng và thuận tiện Với một hệ thống bảo mật cao và sự tích hợp linh hoạt trong quản lý, trang web sẽ làm hài lòng kể cả các khách hàng mua sắm khó tính nhất

Tối ưu hóa quy trình nghiệp vụ để đáp ứng tốt nhất nhu cầu của người dùng, đồng thời khai thác các điểm mạnh đặc biệt của trang web trong lĩnh vực mua sắm online Sự linh hoạt trong tối ưu hóa và quản lý tài nguyên giúp hệ thống cung cấp giải pháp hiệu quả cho các vấn đề thực tế mà cả người dùng và quản lý có thể đối mặt

CƠ SỞ LÝ THUYẾT

Các tiêu chính đánh giá một website bán giày dép

1.1.1 Website có độ tin cậy cao

Uy tín là điều quan trọng nhất cho một website bán hàng trên Internet, nơi kết nối khách hàng và cửa hàng Sản phẩm, giá cả, chất lượng và hình ảnh phải chân thực với thực tế Ngoài ra, việc bảo vệ thông tin người dùng cũng rất cần thiết Những đánh giá từ người dùng sau khi mua hàng sẽ tăng cường sự tin tưởng của những khách hàng tiềm năng

Một website có độ tin cậy cao cần đáp ứng những tiêu chí sau đây:

- Giao diện thân thiện với người dùng, trải nghiệm mua sắm mượt mà và thuận tiện

- Luôn đảm bảo thông tin hỗ trợ khách hàng 1 cách tốt nhất, giải quyết khiếu nại, đảm bảo chính sách đổi trả, bảo hành minh bạch, rõ ràng

- Cung cấp thông tin chi tiết về chi phí vận chuyển, thời gian giao hàng, theo dõi trạng thái của đơn hàng

- Sở hữu chứng chỉ SSL (Secure Sockets Layer) giúp đảm bảo an toàn tuyệt đối cho thông tin của khách hàng khi được chuyển đến máy chủ

Hình 9 Tiêu chí website có tính bảo mật

1.1.2 Thiết kế của giao diện

Giao diện trang web là một yếu tố quan trọng khiến người dùng quyết định sử dụng Trong thời đại công nghệ ngày nay, người dùng thích những trang web có giao diện đẹp mắt, tính năng phong phú và trải nghiệm tiện lợi Với các trang web bán hàng trực tuyến, giao diện và bố cục phải đảm bảo tiêu chuẩn để hỗ trợ việc mua sắm và tạo ra trải nghiệm tốt cho khách hàng, để họ có thể trở lại mua hàng nhiều lần

Hình 10 Thiết kế giao diện website thân thiện với người dùng

1.1.3 Nội dung của trang web

Nội dung là điều quan trọng nhất cho trang web bán giày thành công, nó không những cung cấp thông tin về sản phẩm mà còn phản ánh sự chuyên nghiệp và sáng tạo Sản phẩm được mô tả kỹ lưỡng, hình ảnh sản phẩm và thông tin về nguồn gốc, chất liệu đều góp phần tạo ra trải nghiệm mua sắm tốt Nội dung cũng bao gồm bài đánh giá, câu chuyện về sản phẩm, và hướng dẫn chọn size, hướng dẫn chăm sóc giày, giúp tăng cường sự tin tưởng và tương tác giữa trang web và khách hàng

Hình 11 Nội dung là một yếu tố quan trọng của website 1.1.4 Tối ưu hóa trải nghiệm mua sắm của khách hàng Để giữ cho khách hàng duy trì thói quen truy cập và sử dụng trang web đặt giày online, điều quan trọng nhất là đảm bảo mang đến cho họ một trải nghiệm tốt nhất có thể Tất cả các thao tác, từ việc đăng ký, đăng nhập, chọn sản phẩm, mua hàng đến việc bình luận đều được thiết kế để tối ưu hóa trải nghiệm toàn diện và thuận lợi nhất cho người dùng

1.1.5 Hiệu suất của website Để đạt được hiệu suất cao, việc quản lý tình trạng quá tải là một yếu tố quan trọng mà trang web cần chú ý Đặc biệt, trang web mua hàng online, nơi dữ liệu được cập nhật liên tục, đặt ra thách thức lớn trong việc duy trì trải nghiệm người dùng mượt mà, chuẩn xác và không bị gián đoạn.

Kiến trúc hệ thống

Hình 12 Kiến trúc hệ thống

1.2.1 Tổng quan công nghệ sử dụng

Dự án được xây dựng trên cơ sở kiến trúc ứng dụng web cơ bản, đảm bảo rằng ứng dụng có khả năng hoạt động đồng thời và mượt mà Dự án bao gồm ba mã nguồn (chương trình con) chạy đồng thời cùng nhau:

- Mã nguồn từ phía máy khách (frontend): Đoạn mã này thực thi trực tiếp trên trình duyệt và xử lý đầu vào từ người dùng Được xây dựng bằng framework ReactJs

- Mã nguồn từ phía máy chủ (backend): Được triển khai trên máy chủ và xử lý các yêu cầu HTTP Sử dụng Spring Boot, một module của Spring Framework để xây dựng Cơ sở dữ liệu tương tác với backend thông qua MongoDB

- Ngoài ra, dự án còn tích hợp một số công nghệ khác như Railway, Vercel, để hỗ trợ và bổ sung cho hệ thống chính

1.2.2 Chi tiết công nghệ áp dụngc

React.js, một thư viện JavaScript được phát triển bởi Facebook, là một công cụ mã nguồn mở được thiết kế để tối ưu hóa công việc phức tạp của việc xây dựng giao diện người dùng Một giao diện người dùng được xây dựng bằng React trong đó mỗi thành phần đều có trách nhiệm tạo ra một đoạn mã HTML nhỏ gọn và có thể tái sử dụng

Các khái niệm trong Reactjs:

Khi thực hiện render một JSX element, các virtual DOM object sẽ được cập nhật khi virtual DOM được cập nhật ReactJS so sánh virtual DOM với virtual DOM trước đó để đảm bảo rằng trước khi thực hiện cập nhật, cập nhật trên DOM thật sẽ được thực hiện sau đó và hiển thị trên màn hình

Sử dụng virtual DOM giúp tiết kiệm tài nguyên và tăng tốc độ xử lý vì virtual DOM tập trung vào việc cập nhật duy nhất một item

Hình 13 Virtual Dom trong Reactjs [1]

JSX là viết tắt của JavaScript XML, một cú pháp mở rộng giúp cho việc viết HTML trong React trở nên đơn giản hơn đối với các lập trình viên Thay vì sử dụng JavaScript thông thường, React sử dụng JSX để tạo ra các khuôn mẫu

Component là cho phép ta phân chia đoạn mã của giao diện người dùng thành các phần độc lập với nhau, nhằm mục đích quản lý và sử dụng lại một cách thuận tiện

Redux là một thư viện JavaScript mã nguồn mở được sử dụng để quản lý trạng thái của ứng dụng Nó giúp viết các ứng dụng React hoạt động một cách nhất quán, chạy trên nhiều môi trường khác nhau (client, server và native) và dễ dàng kiểm tra Redux có một số ưu điểm sau:

- Tính nhất quán: Redux đảm bảo rằng trạng thái của ứng dụng luôn nhất quán

- Tính tái sử dụng: Redux giúp tái sử dụng mã trạng thái

- Tính dễ kiểm tra: Redux giúp kiểm tra trạng thái của ứng dụng một cách dễ dàng Cách Redux hoạt động:

Redux hoạt động dựa trên mô hình trạng thái duy nhất, được lưu trữ trong một đối tượng store Các thay đổi đối với trạng thái được thực hiện thông qua các hành động, và được gửi đến store Store sau đó áp dụng các hành động này để cập nhật trạng thái Các thành phần chính của Redux:

- Store: Lưu trữ trạng thái của ứng dụng

- Action: Đại diện cho một thay đổi đối với trạng thái

- Reducer: Là một hàm cập nhật trạng thái dựa trên hành động

Hình 14 Nguyên lý vận hành của Redux [2]

Các thư viện Front-end khác

- Axios: là một thư viện máy khách HTTP dựa trên các Promise, giúp tạo ra sự dễ dàng trong việc gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST và thực hiện các hoạt động CRUD

- Material UI:Thư viện React Components Material UI được Google phát triển theo phong cách thiết kế Material Design.Tập trung vào việc tạo ra các giao diện người dùng đẹp mắt, dễ sử dụng và thân thiện, Material Design là một hệ thống thiết kế được Google phát triển

-Next UI/Material Tailwind: cũng là thư viện các React Component hỗ trợ xây dựng giao diện với các component hấp dẫn và nhiều tùy chọn để lập trình viên có thể thể hiện sự sáng tạo và chỉnh sửa theo ý muốn

Vercel là một nền tảng đám mây được thiết kế để hỗ trợ quá trình phát triển và triển khai ứng dụng web một cách nhanh chóng và thuận tiện Được xây dựng để giảm bớt gánh nặng về cấu hình máy chủ, Vercel cho phép người dùng xây dựng, triển khai và quản lý các ứng dụng web mà không cần phải lo lắng về chi tiết kỹ thuật của hệ thống máy chủ

Spring Boot là một dự án phát triển bởi JAV (ngôn ngữ java) trong hệ sinh thái Spring framework giúp cho các lập trình viên đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển business cho ứng dụng Spring Boot sẽ tự động cấu hình Spring dựa trên các dependencies đã thêm trước đó vào dự án Và ngoài ra các server (Tomcat, Jetty) cũng được nhúng vào ứng dụng, vì thế có thể chạy ở bất cứ đâu có java chạy là được Nhờ đó mà các nhà phát triển sẽ tập trung hơn để giải quyết các vấn đề doanh nghiệp

Hình 15 Từ Spring Framework đến Spring Boot [5]

MongoDB, hệ quản trị cơ sở dữ liệu mã nguồn mở thuộc loại NoSQL, được hàng triệu người sử dụng Nó hoạt động dựa trên các khái niệm Collection và Document, độc đáo với hiệu suất cao, khả dụng tốt và khả năng mở rộng dễ dàng

Các tính năng của MongoDB

- Truy vấn Ad-Hoc: Hỗ trợ truy vấn linh hoạt bằng cách sử dụng trường, phạm vi và biểu thức để trả về kết quả tài liệu cụ thể

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Phân tích hệ thống

Xây dựng trang web chuyên về mua sắm giày sneaker trực tuyến, hỗ trợ quản lý cửa hàng một cách hiệu quả Trang web được thiết kế để đáp ứng nhu cầu của người dùng bằng cách cung cấp các chức năng như tìm kiếm, xem sản phẩm, đặt hàng, thanh toán và đánh giá sản phẩm Đặc biệt, trang web còn tích hợp chatbox thông minh để hỗ trợ khách hàng trong việc tư vấn về sản phẩm, giải đáp thắc mắc về các chính sách đặt hàng, thanh toán và bảo hành

Người dùng truy cập vào website, xem danh sách sản phẩm và lựa chọn sản phẩm để thêm vào giỏ hàng

Nếu người dùng chưa biết size giày của mình, họ có thể sử dụng chức năng “Hướng dẫn chọn size giày”

Sau đó khách hàng tiến hành điền thông tin nhận hàng và chọn phương thức thanh toán Đơn hàng sẽ được tự động tạo và khách hàng có thể sử dụng mã đơn hàng để theo dõi trạng thái của đơn hàng

Nhân viên khi tiếp nhận đơn hàng cập nhật trạng thái đơn hàng, đóng gói, gửi hàng cho bên thứ 3 kèm theo cập nhật trạng thái đơn hàng

Khách hàng khi nhận được hàng thì đơn hàng sẽ được xác nhận là thành công và đánh giá sản phẩm

2.1.3 Xác định tác nhân và chức năng của hệ thống

Các tác nhân của hệ thống

Dựa trên kết quả khảo sát, thu thập thông tin trên hệ thống hiện có sẵn trước đó, nhóm quyết định những người đóng vai trò chủ chốt trong hệ thống hệ thống như sau:

- Khách vãng lai (Guest): Người dùng chưa đăng nhập hoặc không có tài khoản trong hệ thống

- Khách hàng đã xác thực (User): Là người dùng có tài khoản trong hệ thống

- Nhân viên (Staff): là người dùng chịu trách nhiệm quản lý sản phẩm, quản lý các đơn đặt hàng và yêu cầu từ quản trị viên

- Quản trị viên (Admin): Người có quyền hạn cao nhất trong hệ thống, điều hành và quản lý mọi hoạt động của hệ thống

Phân hệ người dùng hệ thống và chức năng

- Khách hàng vãng lai (Guest):

● Xem danh sách, chi tiết sản phẩm

- Khách hàng đã xác thực (User): Thừa hưởng các chức năng như khách vãng lai và thêm các chức năng khác như là:

● Xem, chỉnh sửa thông tin cá nhân

● Khôi phục lại mật khẩu

● Quản lý giỏ hàng (Thêm, sửa, xóa, xem sản phẩm trong giỏ hàng) o Đặt hàng o Thanh toán trực tuyến

● Xem danh sách đơn hàng đã đặt

● Quản lý sản phẩm (thêm, sửa, xóa, xem sản phẩm)

● Xác nhận, hủy đơn hàng

- Quản trị viên (Admin): Thừa hưởng các chức năng như nhân viên và thêm các chức năng khác như là:

● Quản lý tài khoản (Thêm, xóa, xem tài khoản)

● Quản lý danh mục (Thêm, sửa xóa, xem danh mục)

● Quản lý nhãn hàng (Thêm, sửa xóa, xem nhãn hàng)

Yêu cầu chức năng nghiệp vụ

Bảng 2 Bảng yêu cầu chức năng nghiệp vụ phía khách hàng

STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú

1 Tìm kiếm sản phẩm bằng từ khóa (tên, mô tả) Tra cứu

2 Xem danh sách sản phẩm Tra cứu

3 Xem chi tiết sản phẩm Tra cứu

4 Xem danh sách đơn hàng đã đặt Tra cứu

5 Thêm, chỉnh sửa thông tin, số lượng sản phẩm trong giỏ hàng

7 Thêm đánh giá cho sản phẩm đã mua Lưu trữ

8 Chỉnh sửa thông tin cá nhân Lưu trữ

9 Tính tổng giá trị đơn hàng Tính toán

Bảng 3 Bảng yêu cầu chức năng nghiệp vụ phía quản trị

1 Xem, lọc danh sách sản phẩm Tra cứu

2 Xem, lọc danh sách tài khoản Tra cứu

3 Xem, lọc danh sách danh mục Tra cứu

4 Xem, lọc danh sách nhãn hàng Tra cứu

5 Xem, lọc danh sách đơn hàng Tra cứu

6 Thêm, chỉnh sửa thông tin sản phẩm Lưu trữ

7 Thêm thông tin tài khoản mới Lưu trữ

8 Thêm, chỉnh sửa thông tin danh mục mới

9 Thêm, chỉnh sửa thông tin nhãn hàng mới Lưu trữ

10 Xác nhận, hủy đơn hàng Lưu trữ

11 Thống kê doanh thu của cửa hàng theo ngày, tháng, năm

12 Thống kê số lượng sản phẩm theo trạng thái Kết xuất

Yêu cầu chức năng hệ thống

Bảng 4 Bảng yêu cầu chức năng hệ thống

1 Cung cấp chức năng phân quyền người dùng

Phân quyền cho phía quản trị gồm: quản trị viên và nhân viên Phía khách hàng gồm: khách hàng đã xác thực và khách vãng lai

2 Cung cấp chức năng đăng nhập tài khoản qua bên thứ 3 Đăng nhập bằng tài khoản

3 Cung cấp chức năng khôi phục mật khẩu Khôi phục mật khẩu bằng cách gửi mã xác thực về email của người dùng

4 Cung cấp chức năng thanh toán online

Thanh toán online bằng các hình thức: PayPal, VNPAY

5 Cung cấp chức năng xuất CSV Xuất các thống kê thành file

2.1.4.2.Yêu cầu phi chức năng

Bảng 5 Bảng yêu cầu phi chức năng

1 Giao diện bắt mắt và thân thiện với người dùng Tính tiện dụng

2 Tốc độ xử lý và tìm kiếm nhanh chóng, chính xác

3 Có độ tin cậy cao Tính hiệu quả

4 Các thông tin cá nhân của người dùng phải được bảo mật và mã hóa Tính bảo mật

5 Có thể dễ dàng mở rộng quy mô hệ thống Tính tiến hóa

Mô hình hóa yêu cầu

Hình 18 Sơ đồ Use case phía khách hàng

Hình 19 Sơ đồ Use case phía quản trị viên 2.2.2 Đặc tả các Use case

Bảng 6 Bảng đặc tả Use case “Đăng ký”

Tên use case Đăng ký

Mô tả Người dùng đăng ký tài khoản

Tác nhân Khách hàng mới,chưa đăng ký

Hậu điều kiện Thông báo đăng ký thành công và thông tin người dùng dược lưu trên database

Luồng sự kiện Tác nhân Hệ thống

1.Người dùng ấn vào nút đăng ký trên header

2.Hệ thống đưa người dùng đến trang “Đăng ký”, 3.Người dùng điền đầy đủ thông 4.Hệ thống tạo tài khoản với

29 tin và ấn nút “Gửi mã xác nhận” trạng thái “unverified” và gửi mã xác nhận tời email (E2) 5.Người dùng nhập mã xác thực và ấn nút “Đăng ký”(E1)

6.Hệ thống kiểm tra mã xác thực đúng và đổi trạng thái tài khoản thành “activated”(E3)

Luồng ngoại lệ E1:Người dùng không điền đủ thông tin, không đúng số điện thoại, mật khẩu không đủ độ dài ít nhất 6 ký tự, xác nhận lại mật khẩu không đúng thì hiện thông báo lỗi

E2:Nếu email đã tồn tại thì hiện thông báo lỗi E3:Người dùng không nhập đúng mã xác thực thì hiện thông báo lỗi

Bảng 7 Bảng đặc tả Use case “Đăng nhập”

Tên Use case Đăng nhập

Mô tả Khách hàng đăng nhập tài khoản vào hệ thống

Tác nhân Khách hàng đã được xác thực

Hậu điều kiện Người dùng được chuyển đến “Trang chủ”

1 Người dùng ấn nút “Đăng nhập” trên thanh header

2 Hệ thống hiển thị modal

3 Người dùng nhập tài khoản và mật khẩu, sau đó ấn vào nút “Đăng nhập” (A1)

4 Hệ thống kiểm duyệt thông tin tài khoản trong hệ thống(E1) (A2)

5 Hệ thống trả về thông tin người dùng cùng với

1 Người dùng nhấn chọn đăng nhập bằng Google để đăng nhập bằng tài khoản của bên thứ 3

2 Hệ thống chuyển hướng sang trang đăng nhập của Google

3 Người dùng đăng nhập và được Google xác thực, sau đó Google gửi thông tin về hệ thống

Use case tiếp tục bước 4

A2: Nếu sử dụng thông tin đăng nhập của Google và tài khoản không tồn tại trên hệ thống, tài khoản sẽ được tạo tự động

Use case tiếp tục bước 5

E1: Người dùng nhập sai tài khoản hoặc mật khẩu sẽ hiển thị thông báo sai tài khoản hoặc mật khẩu

E2: Tài khoản chưa được xác minh thì người dùng phải nhập mã xác minh được gửi tới email của người dùng

Bảng 8 Bảng đặc tả Use case “Đổi mật khẩu”

Tên Use case Đổi mật khẩu

Mô tả Khách hàng đổi mật khẩu bằng tài khoản đã đăng ký trên hệ thống (Chức năng này không áp dụng cho tài khoản được đăng nhập từ bên thứ 3)

Tác nhân Khách hàng đã xác thực

Tiền điều kiện Khách hàng đã tiến hành đăng nhập thành công vào hệ thống

Hậu điều kiện Mật khẩu mới được cập nhật thành công và lưu vào cơ sở dữ liệu

1 Người dùng nhấn vào biểu tượng 2 Hệ thống chuyển hướng

Luồng sự kiện avatar ở tiêu đề trang web rồi chọn

“Thông tin cá nhân” đến trang “Thông tin cá nhân”

3 Người dùng nhấn vào nút “Đổi mật khẩu” 4 Hệ thống hiển thị

5 Người dùng nhập các thông tin như mật khẩu cũ, mật khẩu mới và nhập lại mật khẩu mới sau đó nhấn nút “Thay đổi” (E1)

6 Hệ thống kiểm tra mật khẩu cũ và tiến hành mã hóa mật khẩu mới sau đó lưu vào cơ sở dữ liệu (E2)

E1: Hiển thị thông báo lỗi nếu trường mật khẩu mới và nhập lại mật khẩu mới không trùng khớp

E2: Hiển thị thông báo lỗi nếu mật khẩu cũ không đúng

Bảng 9 Bảng đặc tả Use case “Chỉnh sửa thông tin cá nhân”

Tên use case Chỉnh sửa thông tin cá nhân

Mô tả Người dùng chỉnh sửa thông tin cá nhân

Tác nhân Người dùng đã xác thực

Tiền điều kiện Người dùng đã tiến hành đăng nhập

Hậu điều kiện Thông tin mà người dùng chỉnh sửa được lưu lại trên database

1.Người dùng ấn vào tên mình trên thanh header và ấn vào “Thông tin cá nhân”

2.Hệ thống đưa người dùng đến trang “Chỉnh sửa thông tin cá nhân”, 3.Người dùng thay đổi thông tin cá nhân và ấn nút “Lưu” (E1)

4.Hệ thống lưu lại các thông tin mà người dùng chỉnh sửa

E1:Người dùng bỏ trống tên, số điện thoại, địa chỉ hoặc nhập không đúng định dạng thì hiện thông báo lỗi

Bảng 10 Bảng đặc tả Use case Khôi phục mật khẩu

Tên use case Khôi phục mật khẩu

Mô tả Người dùng khôi phục lại mật khẩu của tài khoản đã được đăng ký

(Không thực hiện được chức năng này đối với tài khoản đăng nhập bằng bên thứ 3)

Tiền điều kiện Người dùng đang ở trang “Khôi phục mật khẩu” sau khi ấn vào “Quên mật khẩu” ở trang “Đang nhập”

Hậu điều kiện Người dùng thay đổi mật khẩu thành công và lưu lại trên database

Hiện thông báo và chuyển người dùng về “Trang chủ”

1.Người dùng nhập email của mình và ấn nút “Gửi mã xác thực” (E1)

2.Hệ thống gửi mã xác thực đến email cần khôi phục và chuyển đến màn hình “Xác thực”.(E2) 3.Người dùng nhập mã xác thực và ấn nút “Nhập mã xác thực”

4.Hệ thống xác thực mã thành công và chuyển đến màn hình “Khôi phục mật khẩu”

5.Người dùng điền “Mật khẩu mới”,”Xác nhận lại mật khẩu mới” và ấn nút “Đổi mật khẩu”.(E4)

6.Hệ thống tiến hành mã hóa mật khẩu và cập nhật

Luồng ngoại lệ E1:Người dùng điền không đúng định dạng email thì hiện thông báo lỗi

E2:Nếu không tìm thấy tài khoản đang hoạt động có email tương ứng thì hiện thông báo lỗi

E3:Người dùng nhập sai mã xác thực thì hiện thông báo lỗi E4:Hiện thông báo lỗi nếu trường “Mật khẩu mới” và “Xác nhận lại mật khẩu mới” không trùng khớp hoặc không hợp lệ

Bảng 11 Bảng đặc tả Use case “Tìm kiếm sản phẩm”

Tên Use case Tìm kiếm sản phẩm

Mô tả Khách hàng tìm kiếm sản phẩm

Tác nhân Khách vãng lai, tài khoản đã xác thực

Hậu điều kiện Danh sách các sản phẩm được hiển thị theo từ khóa tìm kiếm

1 Người dùng nhập từ khóa muốn tìm kiếm ở ô “Tìm kiếm” và nhấn vào biểu tượng kính lúp ở “Trang chủ”(E1)

2 Hệ thống tiến hành tìm kiếm các sản phẩm dựa trên các từ khóa và trả lại danh sách sản phẩm về cho người dùng (E2)

E1: Người dùng không nhập gì sẽ hiển thị thông báo lỗi E2: Khi không tìm thấy sản phẩm nào tương ứng với từ khóa thì hiển thị thông báo “Không tìm thấy sản phẩm nào.”

Bảng 12 Bảng đặc tả Use case “Xem chi tiết sản phẩm”

Tên use case Xem chi tiết sản phẩm

Mô tả Người dùng xem chi tiết 1 sản phẩm bất kỳ của website

Tác nhân Khách hàng chưa đăng ký hoặc đã đăng ký tài khoản rồi

Tiền điều kiện Người dùng đã truy cập đến trang xem danh sách sản phẩm

Hậu điều kiện Thông tin chi tiết của sản phẩm được hiển trị

1.Người dùng ấn vào một sản phẩm muốn xem thông tin chi tiết

2.Hệ thống lấy thông tin sản phẩm và đưa người dùng đến trang xem thông tin chi tiết

Luồng ngoại lệ E1:Nếu sản phẩm không tồn tại thì hiện thông báo lỗi

Bảng 13 Bảng đặc tả Use case “Thêm sản phẩm vào giỏ hàng”

Tên Use case Thêm sản phẩm vào giỏ hàng

Mô tả Khách hàng thêm một sản phẩm vào trong giỏ hàng

Tiền điều kiện Khách hàng đã tiến hình đăng nhập hệ thống và truy cập vào trang chi tiết sản phẩm

Hậu điều kiện Sản phẩm được thêm thành công vào giỏ hàng và hiển thị thông báo cho người dùng

1 Người dùng chọn màu sắc, kích thước của sản phẩm cần thêm vào giỏ hàng, sau đó nhấn nút “Thêm vào giỏ hàng”

2 Hệ thống kiểm tra số lượng trong kho của sản phẩm (E1)

3 Hệ thống thêm sản phẩm mới vào giỏ hàng (A1) (A2)

Luồng thay thế A1: Cập nhật số lượng sản phẩm nếu sản phẩm đã có trong giỏ hàng A2: Tạo một giỏ hàng và thêm các mặt hàng vào giỏ hàng mới tạo nếu khách hàng chưa có giỏ hàng,

Luồng ngoại lệ E1: Khi sản phẩm không đủ số lượng hoặc không tồn tại thì hiển thị thông báo lỗi

Bảng 14 Bảng đặc tả Use case “Xóa sản phẩm khỏi giỏ hàng”

Tên Use case Xóa sản phẩm khỏi giỏ hàng

Mô tả Khách hàng xóa một sản phẩm ra khỏi giỏ hàng

Tiền điều kiện Người dùng đã tiến hành đăng nhập, truy cập đến giỏ hàng và giỏ hàng có sản phẩm

Hậu điều kiện Thông tin giỏ hàng được cập nhật và hệ thống hiển thị thông báo cho người dùng

1 Người dùng nhấn vào biểu tượng

“thùng rác” 2 Hệ thống xóa sản phẩm ra khỏi giỏ hàng giỏ hàng (E1)

Luồng ngoại lệ E1: Nếu sản phẩm không tồn tại trong giỏ hàng thì hiển thị thông báo lỗi

Bảng 15 Bảng đặc tả Use case “Chỉnh sửa số lượng sản phẩm”

Tên use case Chỉnh sửa số lượng sản phẩm

Mô tả Người dùng thay đổi số lượng sản phẩm trong giỏ hàng

Tiền điều kiện Người dùng đã đăng nhập và truy cập đến giỏ hàng giỏ hàng có sản phẩm

Hậu điều kiện Hệ thống lưu thông tin số lượng sản phẩm trong giỏ hàng và hiển

36 thị thông báo đến người dùng

1.Người dùng ấn vào nút “+”,”-“ để thay đổi số lượng sản phẩm

2.Hệ thống cập nhật lại số lượng của sản phẩm trong giỏ hàng (E1)

Luồng ngoại lệ E1:Nếu vượt qua số lượng sản phẩm trong kho thì hiện thông báo lỗi

Bảng 16 Bảng đặc tả Use case “Đặt hàng”

Tên use case Đặt hàng

Mô tả Người dùng tiến hành đặt hàng

Tiền điều kiện Người dùng đã đăng nhập và đến giỏ hàng để đặt hàng, giỏ hàng có sản phẩm

Hậu điều kiện Hệ thống lưu thông tin đặt hàng và hiển thị thông báo cho người dùng

1.Người dùng ấn vào nút

2.Hệ thống đưa người dùng đến trang đặt hàng

3.Người dùng điền đầy đủ thông tin đặt hàng và nhấn nút “Đặt hàng”(E1)

4.Hệ thống cập nhật trạng thái đơn hàng và số lượng sản phẩm (E2) (A1)

Luồng thay thế A1:Nếu người dùng chọn phương thức thành toán bên thứ 3

(Paypal,Vnpay) thì sau bước 4 thực hiện thêm các bước sau: 1.Hệ thống đưa người dùng đến trang thanh toán của bên thứ

2.Người dùng tiến hành thanh toán Sau đó bên thứ 3 sẽ gửi thông tin đơn hàng về hệ thống

3.Hệ thống cập nhật trạng thái đơn hàng và lưu lại thông tin thanh toán

Luồng ngoại lệ E1:Hiển thị thông báo lỗi nếu người dùng không nhập đầy đủ thông tin E2:Hiển thị thông báo lỗi nếu vượt quá số lượng sản phẩm

Bảng 17 Bảng đặc tả Use case “Đánh giá sản phẩm”

Tên Use case Đặt hàng

Mô tả Khách hàng đánh giá sản phẩm

Tác nhân Khách hàng đã mua sản phẩm

Tiền điều kiện Khách hàng đã tiến hành đăng nhập vào hệ thống và truy cập vào trang “Chi tiết đơn hàng”

Hậu điều kiện Thông tin đánh giá sản phẩm được lưu vào cơ sở dữ liệu và hiển thị thông báo

1 Người dùng nhấn chọn mục

“Đánh giá” của sản phẩm cần đánh giá

3.Người dùng đánh giá số sao, phản hồi nội dung muốn đánh giá và nhấn nút “Gửi”(E1)

4 Hệ thống lưu lại thông tin đánh giá (E2)

E1: Hiển thị thông báo lỗi khi người dùng không nhập đủ thông tin

E2: Hiển thị thông báo lỗi nếu người dùng đã đánh giá sản phẩm rồi

Bảng 18 Bảng đặc tả Use case “Xem danh sách đơn hàng”

Tên use case Xem danh sách đơn hàng

Mô tả Người dùng xem danh sách đơn hàng

Tiền điều kiện Người dùng đã đăng nhập

Hậu điều kiện Hệ thống hiển thị danh sách tất cả đơn hàng của người dùng

1.Người dùng ấn vào tên mình trên header và ấn

2.Hệ thống lấy thông tin các đơn hàng của người dùng và đưa người dùng đến trang

Luồng ngoại lệ E1:Hiển thị thông báo không có đơn hàng nào

Bảng 19 Bảng đặc tả Use case “Huỷ đơn hàng”

Tên Use case Huỷ đơn hàng

Mô tả Khách hàng huỷ đơn hàng khi đơn hàng khi chưa cửa hàng chưa xác nhận đơn

Tiền điều kiện Khách hàng đăng nhập, truy cập vào trang “Đơn hàng của bạn”

Hậu điều kiện Hệ thống thay đổi thông tin của đơn hàng và thông báo

1 Người dùng chọn vào mã đơn hàng của đơn hàng cần hủy

2 Hệ thống chuyển đến trang “Chi tiết đơn hàng”

3 Người dùng nhấn nút “Huỷ đơn hàng” 4 Hệ thống thay đổi trạng thái đơn hàng thành

Luồng ngoại lệ E1: Nếu đơn hàng đã được xác nhận hoặc đang vận chuyển thì hiển thị thông báo lỗi

Bảng 20 Bảng đặc tả Use case “Xác nhận đã nhận được hàng”

Tên use case Xác nhận đã nhận được hàng

Mô tả Khách hàng xác nhận đã nhận được hàng

Tiền điều kiện Người dùng đăng nhập, truy cập vào trang “Đơn hàng”

Hậu điều kiện Hệ thống lưu lại thông tin của đơn hàng và thông báo cho người dùng

1.Người dùng ấn vào mã của đơn hàng bất kỳ

2.Hệ thống chuyển đến trang xem “Chi tiết đơn hàng”

3.Người dùng nhấn nút “Đã nhận hàng” 4.Hệ thống cập nhật lại trạng thái của đơn hàng là

Luồng ngoại lệ E1:Nếu đơn hàng đã được xác nhận trước đó thì hiện thông báo lỗi

Bảng 21 Bảng đặc tả Use case “Thêm tài khoản”

Tên use case Thêm tài khoản

Mô tả Quản trị viên thêm một tài khoản mới

Tác nhân Quản trị viên

Tiền điều kiện Quản trị viên đăng nhập vào trang quản trị

Hậu điều kiện Tài khoản được thêm vào database

1.Quản trị viên chọn mục “Tài khoản” và chọn “Quản lý tài khoản” ở thanh Sidebar bên trái

2.Hệ thống hiển thị danh sách tất cả các tài khoản người dùng

3.Quản trị viên ấn vào nút “Thêm tài khoản”

4.Hệ thống hiển thị ra Modal “Thêm tài khoản” 5.Quản trị viên tiến hành nhập tất cả các thông tin của tài khoản và

6.Hệ thống thêm tài khoản vào database và thông báo

40 ấn nút “Lưu” (E1) cho quản trị viên

Luồng ngoại lệ E1:Thông báo lỗi khi không nhập đủ các thông tin tài khoản hoặc email tài khoản đã tồn tài

Bảng 22 Bảng đặc tả Use case “Cập nhật trạng thái tài khoản”

Tên Use case Cập nhật trạng thái tài khoản

Mô tả Quản trị viên cập nhật trạng thái của một tài khoản bất kỳ

Tiền điều kiện Quản trị viên đăng nhập vào hệ thống

Hậu điều kiện Tài khoản bị vô hiệu hoá

1 Quản trị viên nhấn vào mục “Tài khoản” ở Sidebar bên trái và chọn

2 Hệ thống hiển thị danh sách các tài khoản

3.Quản trị viên nhấn vào biểu tượng cây bút ở tài khoản muốn cập nhật trạng thái

4 Hệ thống hiển thị Modal “Chỉnh sửa tài khoản”

5.Quản trị viên chọn trạng thái muốn thay đổi cho tài khoản và nhấn nút “Lưu”

6 Hệ thống cập nhật trạng thái mới của tài khoản và hiển thị thông báo (E1)

E1: Khi tài khoản không tồn tại sẽ hiển thị thông báo cập nhật tài khoản thất bại

Bảng 23 Bảng đặc tả Use case “Thêm danh mục”

Tên use case Thêm danh mục

Mô tả Quản trị viên thêm một danh mục mới

Tiền điều kiện Quản trị viên đăng nhập vào trang quản trị và ở trang “Quản lý”

Hậu điều kiện Danh mục được thêm vào database

1.Quản trị viên chọn mục “Danh mục” và chọn “Quản lý danh mục” ở thanh Sidebar bên trái

2.Hệ thống hiển thị danh sách tất cả các danh mục

3.Quản trị viên ấn vào nút “Thêm danh mục”

4.Hệ thống hiển thị ra Modal “Thêm danh mục” 5.Quản trị viên tiến hành nhập tên danh mục và chọn danh mục cha rồi ấn nút “Lưu” (E1)

6.Hệ thống thêm danh mục mới vào database và thông báo cho quản trị viên (E2)

Luồng ngoại lệ E1:Thông báo lỗi khi không nhập đủ các thông tin của danh mục hoặc danh mục đã tồn tài

E2:Hiện thông báo lỗi nếu tên danh mục đã tồn tại

Bảng 24 Bảng đặc tả Use case “Chỉnh sửa danh mục”

Tên Use case Chỉnh sửa danh mục

Mô tả Quản trị viên cập nhật thông tin của danh mục

Hậu điều kiện Thông tin danh mục được cập nhật vào cơ sở dữ liệu

1 Quản trị viên nhấn vào mục

“Danh mục” ở Sidebar bên trái và chọn “Quản lý danh mục”

2 Hệ thống hiển thị danh sách tất cả danh mục

3.Quản trị viên nhấn vào biểu tượng “cây bút” của danh mục cần được chỉnh sửa

4 Hệ thống hiển thị Modal “Chỉnh sửa thông tin danh mục”

5.Quản trị viên nhập thông tin cần chỉnh sửa và nhấn “Lưu” (E1)

6 Hệ thống cập nhật thông tin mới của danh mục và hiển thị thông báo (E2)

Luồng ngoại lệ E1: Nếu không nhập đủ thông tin danh mục hoặc tên danh mục đã tồn tại, hiện thông báo lỗi

E2: Nếu tên danh mục đã tồn tại, hiện thông báo lỗi

Bảng 25 Bảng đặc tả Use case “Cập nhật trạng thái danh mục”

Tên use case Cập nhật trạng thái danh mục

Mô tả Quản trị viên cập nhật trạng thái của một danh mục

Hậu điều kiện Trạng thái của danh mục được cập nhật

1.Quản trị viên chọn mục “Danh mục” và chọn “Quản lý danh mục” ở thanh Sidebar bên trái

2.Hệ thống hiển thị danh sách tất cả các danh mục

3.Quản trị viên ấn vào biểu tượng “cây bút” của danh mục cần chỉnh sửa

4.Hệ thống hiển thị ra Modal Chỉnh sửa thông tin của danh mục

5.Quản trị viên cập nhật trạng thái của danh mục và ấn “Lưu”

6.Hệ thống tiến hành lưu lại trạng thái danh mục và hiển thị thông báo (E1)

Luồng ngoại lệ E1:Nếu danh mục không tồn tại thì hiện thông báo lỗi

Bảng 26 Bảng đặc tả Use case “Thêm nhãn hàng”

Tên Use case Thêm nhãn hàng

Mô tả Quản trị viên thêm một nhãn hàng mới

Hậu điều kiện Thông tin danh mục được cập nhật vào cơ sở dữ liệu

“Nhãn hàng” ở Sidebar bên trái và chọn vào mục “Quản lý nhãn hàng”

2 Hệ thống hiển thị danh sách tất cả nhãn hàng

4 Hệ thống hiển thị Modal “Thêm nhãn hàng”

5.Quản trị viên nhập tên, hình ảnh của nhãn hàng và nhấn nút “Lưu”

6 Hệ thống cập nhật thông tin nhãn hàng mới và hiển thị thông báo (E2)

Luồng ngoại lệ E1: Nếu thông tin nhãn hàng không nhập đầy đủ, hiện thông báo lỗi

E2: Nếu tên nhãn hàng đã tồn tại, hiện thông báo lỗi

Bảng 27 Bảng đặc tả Use case “Chỉnh sửa nhãn hàng”

Tên use case Chỉnh sửa nhãn hàng

Mô tả Quản trị viên chỉnh sửa thông tin của nhãn hàng

Hậu điều kiện Thông tin nhãn hàng được cập nhật trên hệ thống

1.Quản trị viên chọn mục “Nhãn 2.Hệ thống hiển thị danh sách

44 hàng” và chọn “Quản lý nhãn hàng” ở thanh Sidebar bên trái tất cả các nhãn hàng

3.Quản trị viên ấn vào biểu tượng “cây bút” của danh mục cần chỉnh sửa

4.Hệ thống hiển thị ra Modal Chỉnh sửa thông tin của danh mục

5.Quản trị viên chỉnh sửa thông tin nhãn hàng và ấn “Lưu” (E1)

6.Hệ thống tiến hành lưu lại thông tin nhãn hàng và hiển thị thông báo (E2)

Luồng ngoại lệ E1:Nếu không nhập đầy đủ thông tin của nhãn hàng thì thông báo lỗi

E2:Nếu tên nhãn hàng đã tồn tại thì hiển thị thông báo lỗi

Bảng 28 Bảng đặc tả Use case “Cập nhật trạng thái nhãn hàng”

Tên Use case Cập nhật trạng thái nhãn hàng

Mô tả Quản trị viên cập nhật trạng thái của nhãn hàng

Hậu điều kiện Nhãn hàng được cập nhật trạng thái mới

“Nhãn hàng” ở Sidebar bên trái và chọn mục “Quản lý nhãn hàng”

2 Hệ thống hiển thị danh sách tất cả nhãn hàng

3.Quản trị viên ấn vào biểu tượng

“cây bút” của nhãn hàng cần chỉnh sửa

4 Hệ thống hiển thị Modal “Chỉnh sửa thông tin nhãn hàng”

5.Quản trị viên chọn trạng thái cần cập nhật cho nhãn hàng và nhấn nút 6 Hệ thống lưu lại thông tin trạng thái mới của

“Lưu” nhãn hàng và hiển thị thông báo (E1)

Luồng ngoại lệ E1: Nếu nhãn hàng không tồn tại, hiển thị thông báo lỗi

Bảng 29 Bảng đặc tả Use case “Thêm sản phẩm”

Tên use case Thêm sản phẩm

Mô tả Quản trị viên thêm một sản phẩm mới

Tác nhân Quản trị viên,nhân viên

Tiền điều kiện Quản trị viên,nhân viên đăng nhập vào trang quản trị

Hậu điều kiện Sản phẩm được thêm vào hệ thống

1.Quản trị viên chọn mục “Sản phẩm” và chọn “Quản lý sản phẩm” ở thanh Sidebar bên trái

2.Hệ thống hiển thị danh sách tất cả các sản phẩm

3.Quản trị viên ấn vào nút “Thêm sản phẩm”

4.Hệ thống chuyển đến trang “Thêm sản phẩm” 5.Quản trị viên nhập thông tin sản phẩm mới và ấn “Lưu”(E1)

6.Hệ thống tiến hành lưu lại thông tin sản phẩm (E2)

Luồng ngoại lệ E1:Nếu không nhập đầy đủ thông tin sản phẩm thì hiện thông báo lỗi

E2:Hiển thị thông báo lỗi nếu tên sản phẩm đã tồn tại

Bảng 30 Bảng đặc tả Use case “Chỉnh sửa sản phẩm”

Tên Use case Chỉnh sửa sản phẩm

Mô tả Quản trị viên cập nhật thông tin sản phẩm

Tác nhân Quản trị viên, nhân viên

Hậu điều kiện Thông tin của sản phẩm được cập nhật vào cơ sở dữ liệu

1 Quản trị viên nhấn vào mục “Sản phẩm” ở Sidebar bên trái và chọn mục “Quản lý sản phẩm”

2 Hệ thống hiển thị danh sách tất cả sản phẩm

3 Quản trị viên nhấn vào mục có biểu tượng “cây bút” của sản phẩm muốn chỉnh sửa

4 Hệ thống chuyển đến trang “Chỉnh sửa sản phẩm”

5 Nhập các thông tin cần mớ của sản phẩm và nhấn nút “Lưu” (E1)

6 Hệ thống cập nhật thông tin sản phẩm và hiển thị thông báo (E2)

Luồng ngoại lệ E1: Nếu thông tin sản phẩm không nhập đầy đủ, hiện thông báo lỗi

E1: Nếu tên sản phẩm đã tồn tại, hiện thông báo lỗi

Bảng 31 Bảng đặc tả Use case “Cập nhật trạng thái sản phẩm”

Tên use case Cập nhật trạng thái sản phẩm

Mô tả Quản trị viên cập nhật trạng thái của một sản phẩm

Hậu điều kiện Sản phẩm được cập nhật trạng thái

2.Hệ thống hiển thị danh sách tất cả các sản phẩm

3.Quản trị viên ấn biểu tượng “cây 4.Hệ thống hiển thị Modal

47 bút” của sản phẩm cần cập nhật “Cập nhật trạng thái sản phẩm”

5.Quản trị viên chọn trạng thái cho sản phẩm và ấn “Lưu”

6.Hệ thống tiến hành lưu lại thông tin và hiển thị thông báo

Bảng 32 Bảng đặc tả Use case “Thêm phiên bản”

Tên Use case Thêm phiên bản

Mô tả Quản trị viên thêm một phiên bản của một sản phẩm

Tiền điều kiện Quản trị viên đăng nhập hệ thống

Hậu điều kiện Thông tin của phiên bản sản phẩm được thêm vào cơ sở dữ liệu

1 Quản trị viên nhấn vào mục “Sản phẩm” ở Sidebar bên trái và chọn mục “Quản lý sản phẩm”

3 Quản trị viên nhấn vào mục có biểu tượng “cây bút” của sản phẩm muốn thêm phiên bản (A1)

5 Quản trị viên nhấn nút “+” ngang dòng chữ “Các phiên bản”

6 Hệ thống hiển thị Modal “Thêm phiên bản”

7 Quản trị viên nhập các thông tin của phiên bản (size, số lượng, phí cộng thêm), chọn màu, chọn ảnh sau đó nhấn nút “Lưu” (E1)

8 Hệ thống lưu thông tin của phiên bản và hiển thị thông báo (E2)

Luồng thay thế A1: Quản trị viên nhấn nút “Thêm sản phẩm”, sau đó thêm mới một sản phẩm và tiếp tục thêm phiên bản của sản phẩm đó

Luồng ngoại lệ E1: Nếu thông tin phiên bản sản phẩm không nhập đầy đủ, hiện thông báo lỗi

E2: Nếu màu của phiên bản đã tồn tại, hiện thông báo lỗi

Bảng 33 Bảng đặc tả Use case “Chỉnh sửa phiên bản”

Tên use case Chỉnh sửa phiên bản

Mô tả Người dùng chỉnh sửa phiên bản của một sản phẩm bất kỳ

Hậu điều kiện Các thông tin phiên bản sản phẩm được lưu lại trên database

2.Hệ thống hiển thị ra danh sách tất cả các sản phẩm

3.Quản trị viên ấn vào nút biểu tượng “cây bút” của sản phẩm cần chỉnh sửa phiên bản

4.Hệ thống chuyển đến trang chỉnh sửa sản phẩm

5 Quản trị viên ấn vào nút biểu tượng “cây bút” của phiên bản cần chỉnh sửa trong bảng “Các phiên bản”

6.Hệ thống hiển thị Modal

7.Quản trị viên tiến hành chỉnh sửa các thông tin của phiên bản (số lượng, màu, size ,phí thêm) sau đó ấn “Lưu” (E1)

8.Hệ thống tiến hành lưu lại thông tin phiên bản và hiển thị thông báo (E2)

Luồng ngoại lệ E1:Nếu không nhập đầy đủ thông tin của phiên bản sản phẩm thì hiển thị thông báo lỗi E2:Nếu màu của phiên bản đã tồn tại thì hiển thị thông báo lỗi

Bảng 34 Bảng đặc tả Use case “Thêm thông số”

Tên Use case Thêm thông số

Mô tả Quản trị viên thêm thông số cho sản phẩm

Hậu điều kiện Thông tin phiên bản sản phẩm được lưu vào cơ sở dữ liệu

1 Quản trị viên nhấn vào mục“Sản phẩm” ở Sidebar bên trái và chọn mục “Quản lý sản phẩm”

3 Quản trị viên nhấn vào mục có biểu tượng “cây bút” của sản phẩm muốn thêm thông số (A1)

5 Quản trị viên nhấn nút “+” ngang dòng chữ “Các thông số” 6 Hệ thống hiển thị

7 Quản trị viên nhập các thông tin (thông số, giá trị), sau đó nhấn nút

8 Hệ thống cập nhật thông tin thông số và hiển thị thông báo (E1)

Luồng thay thế A1: Quản trị viên nhấn vào nút “Thêm sản phẩm”, sau đó thêm mới một sản phẩm, thêm phiên bản sản phẩm (có thể bỏ qua), sau đó thêm thông số sản phẩm

Luồng ngoại lệ E1: Nếu thông tin thông số sản phẩm không nhập đầy đủ, hiện thông báo lỗi

E2: Nếu tên thông số đã tồn tại, hiện thông báo lỗi

Bảng 35 Bảng đặc tả Use case “Chỉnh sửa thông số”

Tên use case Chỉnh sửa thông số

Mô tả Quản trị viên chỉnh sửa một thông số của một sản phẩm bất kỳ

Hậu điều kiện Các thông tin thông số sản phẩm được cập nhật lại trên database

2.Hệ thống hiển thị ra danh sách tất cả các sản phẩm

3.Quản trị viên ấn vào nút biểu tượng “cây bút” của sản phẩm cần chỉnh sửa thông số

4.Hệ thống chuyển đến trang chỉnh sửa sản phẩm

5 Quản trị viên ấn vào nút biểu tượng “cây bút” của thông số cần chỉnh sửa trong bảng “Các thông số”

6.Hệ thống hiển thị Modal

7.Quản trị viên tiến hành chỉnh sửa các thông tin của thông số (giá trị, tên thông số) sau đó ấn

8.Hệ thống tiến hành lưu lại thông tin thông số và hiển thị thông báo (E2)

Luồng ngoại lệ E1:Nếu không nhập đầy đủ thông tin thông số sản phẩm thì hiển thị thông báo lỗi E2:Nếu tên thông số của sản phẩm đã tồn tại thì hiển thị thông báo lỗi

Bảng 36 Bảng đặc tả Use case “Xác nhận đơn hàng”

Tên Use case Xác nhận đơn hàng

Mô tả Quản trị viên xác nhận đơn hàng

Hậu điều kiện Đơn hàng được cập nhật trạng thái

“Đơn hàng” ở Sidebar bên trái và chọn mục “Quản lý đơn hàng”

2 Hệ thống hiển thị danh sách tất cả đơn hàng

3 Quản trị viên nhấn vào mục có biểu tượng “con mắt” của đơn hàng muốn xác nhận

5 Quản trị viên nhấn nút “Xác nhận đơn hàng”

6 Hệ thống cập nhật thông tin trạng thái mới của đơn hàng và hiển thị thông báo (E1)

Luồng ngoại lệ E1: Nếu đơn hàng không tồn tại hoặc không ở trạng thái

“pending”, hiển thị thông báo lỗi

Bảng 37 Bảng đặc tả Use case “Hủy đơn hàng”

Tên use case Hủy đơn hàng

Mô tả Người dùng hủy một đơn hàng bất kỳ

Hậu điều kiện Trạng thái của đơn hàng được cập nhật

1.Người dùng chọn mục “Đơn hàng” và chọn “Quản lý đơn hàng” ở thanh Sidebar bên trái

2.Hệ thống hiển thị danh sách tất cả các đơn hàng

3 Người dùng ấn vào nút biểu tượng “con mắt” của đơn hàng

4.Hệ thống hiển thị Modal thông tin của đơn hàng 5.Người dùng nhấn chọn “Hủy đơn hàng” 6.Hệ thống tiến hành lưu lại thông

52 tin và hiển thị thông báo (E1)

Luồng ngoại lệ E1:HIện thông báo lỗi nếu đơn hàng không ở trạng thái

“pending” hoặc đơn hàng không tồn tại

Bảng 38 Bảng đặc tả Use case “Xem thống kê”

Tên Use case Xem thống kê

Mô tả Quản trị viên xem thống kê

Hậu điều kiện Các thông tin thống kê của cửa hàng được hiển thị

“Thống kê” ở Sidebar bên trái và chọn “Xem thống kê”

2 Hệ thống hiển thị thông tin thống kê về (Tài khoản, Sản phẩm, Đơn hàng, Danh mục, Nhãn hàng) của cửa hàng

3 Quản trị viên chọn thời gian bắt đầu, thời gian kết thúc và nhấn nút

4 Hệ thống xuất biểu đồ doanh số theo ngày

Bảng 39 Bảng đặc tả Use case “Xuất CSV”

Tên use case Xuất CSV

Mô tả Quản trị viên xuất file CSV để lưu dữ liệu của cửa hàng

Hậu điều kiện Thông tin của cửa hàng được lưu trữ bằng file csv

1.Người dùng ấn nút “Xuất CSV” 2.Hệ thống xuất ra file

CSV và lưu về máy

Bảng 40 Bảng đặc tả Use case “Xác nhận giao hàng”

Tên Use case Xác nhận đơn hàng

Mô tả Quản trị viên xác nhận đơn hàng

Hậu điều kiện Đơn hàng được lên đơn bên giao hàng thành công và hiển thị thông báo

“Đơn hàng” ở Sidebar bên trái và chọn “Quản lý đơn hàng”

2 Hệ thống hiển thị danh sách tất cả đơn hàng

3 Quản trị viên nhấn vào nút có biểu tượng “con mắt” của đơn hàng muốn xác nhận

5 Quản trị viên nhấn nút “Giao hàng”

6 Hệ thống lên đơn hàng đến bên thứ 3 và cập nhật

54 trạng thái đơn hàng là

Luồng ngoại lệ E1:Nếu đơn hàng không tồn tại hoặc không ở trạng thái

“prepare”, hiển thị thông báo lỗi

E2: Nếu yêu cầu giao hàng được chuyển đi không thành công hoặc trả về trạng thái khác 200, hiển thị thông báo lỗi

Hình 20 Lược đồ tuần tự của “Đăng ký”

Hình 21 Lược đồ tuần tự của “Đăng nhập”

Hình 22 Lược đồ tuần tự của “Đổi mật khẩu

Hình 23 Lược đồ tuần tự của “Chỉnh sửa thông tin cá nhân”

Hình 24 Lược đồ tuần tự của “Khôi phục mật khẩu”

Hình 25 Lược đồ tuần tự của “Tìm kiếm sản phẩm”

Hình 26 Lược đồ tuần tự của “Xem chi tiết sản phẩm”

Hình 27 Lược đồ tuần tự của “Thêm sản phẩm vào giỏ hàng”

Hình 28 Lược đồ tuần tự của “Chỉnh sửa số lượng sản phẩm”

Hình 29 Lược đồ tuần tự của “Xóa sản phẩm khỏi giỏ hàng”

Hình 30 Lược đồ tuần tự của “Đặt hàng”

Hình 31 Lược đồ tuần tự của “Đánh giá sản phẩm”

Hình 32 Lược đồ tuần tự của “Xem danh sách đơn hàng”

Hình 33 Lược đồ tuần tự của “Hủy đơn hàng”

Hình 34 Lược đồ tuần tự của “Xác nhận đã nhận hàng”

Hình 35 Lược đồ tuần tự của “Thêm tài khoản”

Hình 36 Lược đồ tuần tự của “Cập nhật trạng thái tài khoản”

Hình 37 Lược đồ tuần tự của “Thêm nhãn hàng”

Hình 38 Lược đồ tuần tự của “Chỉnh sửa nhãn hàng”

Hình 39 Lược đồ tuần tự của “Cập nhật trạng thái nhãn hàng”

Hình 40 Lược đồ tuần tự của “Thêm danh mục”

Hình 41 Lược đồ tuần tự của “Chỉnh sửa danh mục”

Hình 42 Lược đồ tuần tự của “Cập nhật trạng thái danh mục”

Hình 43 Lược đồ tuần tự của “Thêm sản phẩm”

Hình 44 Lược đồ tuần tự của “Chỉnh sửa sản phẩm”

Hình 45 Lược đồ tuần tự của “Cập nhật trạng thái sản phẩm”

Hình 46 Lược đồ tuần tự của “Thêm phiên bản”

Hình 47 Lược đồ tuần tự của “Chỉnh sửa phiên bản”

Hình 48 Lược đồ tuần tự của “Thêm thông số”

Hình 49 Lược đồ tuần tự của “Chỉnh sửa thông số”

Hình 50 Lược đồ tuần tự của “Xác nhận đơn hàng”

Hình 51 Lược đồ tuần tự của “Huỷ đơn hàng”

Hình 52 Lược đồ tuần tự của “Xem thống kê”

Hình 53 Lược đồ tuần tự của “Xuất CSV”

Hình 54 Lược đồ lớp (Class Diagram)

2.2.5.Thiết kế cơ sở dữ liệu

2.2.5.1.Lược đồ cơ sở dữ liệu

Hình 55 Lược đồ cơ sở dữ liệu

2.2.5.2 Chi tiết bảng dữ liệu

Bảng 41 Bảng chi tiết dữ liệu của “users”

Tên thuộc tính Kiểu Mô tả Ghi chú

_id ObjectId Mã của người dùng được tạo tự động name String Tên của người dùng email String Email đăng nhập tài khoản password String Mật khẩu đăng nhập phone String Số điện thoại province Int32 Mã tỉnh/thành district Int32 Mã quận/huyện ward Int32 Mã phường/xã address String Địa chỉ chi tiết role String Phân quyền gender String Giới tính avatar String Đường dẫn đến hình ảnh đại diện provider String Bên cung cấp tài khoản state String Trạng thái của tài khoản createdDate Date Thời gian khởi tạo lastModifiedDate Date Thời gian chỉnh sửa cuối cùng

Bảng 42 Bảng chi tiết dữ liệu của “brands”

_id ObjectId Mã nhãn hàng được tạo tự động name String Tên nhãn hàng image String Đường dẫn đến hình ảnh nhãn hàng state String Trạng thái nhãn hàng

Bảng 43 Bảng chi tiết dữ liệu của “categories”

_id ObjectId Mã danh mục được tạo tự động name String Tên danh mục root Boolean Là danh mục cha subCategories Array(ObjectId),

Danh sách danh mục con state String Trạng thái của danh mục

Bảng 44 Bảng chi tiết dữ liệu của “products”

_id ObjectId Mã sản phẩm được tạo tự động name String Tên sản phẩm

91 description String Mô tả của sản phẩm price Decimal128 Giá của sản phẩm discount Int32 Phần trăm giảm giá của sản phẩm category ObjectId,

Mã danh mục brand ObjectId,

Mã nhãn hàng rate Double Số điểm bình chọn của sản phẩm

Tối đa là 5 attr Array(Object) Danh sách các thông số sản phẩm attr.name String Tên thông số Thuộc tính con của “attr” attr.value String Giá trị của thông số Thuộc tính con của “attr” state String Trạng thái của sản phẩm images Array(Object) Danh sách hình ảnh của sản phẩm images.imageId String Mã hình ảnh Thuộc tính con của

“images” images.url String Đường dẫn đến hình ảnh

“images” images.thumbnail Boolean Là hình chính của sản phẩm

“images” images.color String Màu sắc của sản phẩm trong hình Thuộc tính con của

“images” createdDate Date Thời gian khởi tạo lastModifiedDate Date Thời gian chỉnh sửa cuối cùng

Bảng 45 Bảng chi tiết dữ liệu của “product_option”

_id ObjectId Mã phiên bản của sản phẩm được tạo tự động name String Tên của phiên bản variant Array(Object) Danh sách biến thể của phiên bản variant.id String Mã của biến thể Thuộc tính con của “variant” variant.color String Màu của biến thể Thuộc tính con của “variant” variant.stock Int64 Số lượng trong kho của biến thể Thuộc tính con của “variant” extraFee Decimal128 Phí cộng thêm product ObjectId,

Bảng 46 Bảng chi tiết dữ liệu của “orders”

_id ObjectId Mã đơn hàng được tạo tự động user ObjectId,

Mã người dùng deliveryDetail Object Chi tiết thông tin cần giao hàng deliveryDetail receiveName

String Tên của người nhận

String Số điện thoại của người nhận Thuộc tính con của

String Mã tỉnh thành người của người nhận

String Mã quận huyện người nhận Thuộc tính con của

String Mã phường xã người nhận

String Địa chỉ chi tiết của người nhận Thuộc tính con của

Object Thông tin chi tiết giao hàng Thuộc tính con của

“deliveryDetail” paymentDetail Object Chi tiết thông tin thanh toán paymentDetail paymentId

String Mã thanh toán Thuộc tính con của

“paymentDetail” paymentDetail String Loại thanh toán Thuộc tính con của

String Token trả về với thanh toán của bên thứ 3

Object Thông tin chi tiết thanh toán

“paymentDetail” createdDate Date Thời gian khởi tạo lastModifiedDate Date Thời gian chỉnh sửa cuối cùng

Bảng 47 Bảng chi tiết dữ liệu của “order_items”

_id ObjectId Mã sản phẩm trong đơn hàng được tạo tự động item ObjectId,

Mã phiên bản của sản phẩm color String Màu của sản phẩm quantity Int64 Số lượng của sản phẩm reviewed Boolean Trạng thái đánh giá của sản phẩm order ObjectId,

Bảng 48 Bảng chi tiết dữ liệu của “reviews”

_id ObjectId Mã đánh giá được tạo tự động content String Nội dung đánh giá rate Double Số điểm được đánh giá user ObjectId,

Mã khách hàng đã đánh giá product ObjectId,

Mã sản phẩm được đánh giá orderItem ObjectId,

Mã sản phẩm trong đơn hàng được đánh giá enable Boolean Được hiển thị createdDate Date Thời gian khởi tạo lastModifiedDate Date Thời gian chỉnh sửa cuối cùng

Thiết kế hệ thống

2.3.1 Thiết kế và xác định cấu trúc giao diện a Giao diện khách hàng, người dùng

- Xem thông tin cá nhân, cập nhật thông tin,

- Xem thông tin chi tiết sản phẩm

- Xem các đánh giá sản phẩm

- Giao diện tìm kiếm sản phẩm

- Giao diện trang đặt hàng

- Giao diện trang đơn hàng của tôi

- Giao diện chi tiết đơn hàng

- Giao diện đánh giá đơn hàng b Giao diện trang quản lý

- Quản lý giá sản phẩm

- Quản lý các danh mục

- Quản lý các nhãn hàng

- Quản lý đơn hàng c Giao diện nhân viên

2.3.2 Phân tích thiết kế a Giao diện khách hàng, người dùng

Hình 56 Giao diện đăng nhập Bảng 49 Bảng chi tiết màn hình Đăng nhập

STT Tên xử lý Thuộc tính Sự kiện

1 Tài khoản (Email) Text Input Điền tên tài khoản (email)

2 Mật khẩu Text Input Điền mật khẩu

3 Quên mật khẩu Link Nhấn vào để chuyển đến trang “Khôi phục mật khẩu”

4 Ẩn/hiện mật khẩu Button Nhấn để chuyển đổi trạng thái ẩn, hiện mật khẩu

5 Đăng nhập Button Nhấn vào để “Đăng nhập”

Button Nhấn vào để chuyển đến trang đăng nhập bằng tài khoản của Google

7 Đăng ký Link Nhấn vào để chuyển đến trang “Đăng ký”

Hình 57 Giao diện đăng ký

Bảng 50 Bảng chi tiết màn hình Đăng ký

1 Tên Text Input Điền tên người dùng

2 Giới tính Dropdown Chọn giới tính

3 Email Input Điền email đăng ký

4 Tỉnh/Thành phố Dropdown Chọn Tỉnh/Thành phố

5 Quận/Huyện Dropdown Chọn Quận/Huyện

6 Phường/Xã Dropdown Chọn Phường/Xã

7 Địa chỉ Input Điền địa chỉ cụ thể

8 Số điện thoại Input Điền số điện thoại

9 Mật khẩu Input Điền mật khẩu

10 Nhập lại mật khẩu Input Điền lại mật khẩu

12 Gửi mã xác nhận Button Nhấn vào để tiến hành tạo tài khoản và gửi email xác thực

13 Đăng nhập ngay Link Nhấn vào để chuyển sang trang đăng nhập

14 Nhập mã xác nhận Input Nhập mã xác nhận OTP

15 Đăng ký Button Nhấn vào để đăng ký tài khoản

Hình 58 Trang khôi phục mật khẩu

Bảng 51 Bảng chi tiết màn hình Khôi phục mật khẩu

1 Email Input Điền Email khôi phục mật khẩu

2 Gửi mã xác nhận Button Nhấn vào sẽ tiến hành gửi email xác thực

3 Nhập mã otp Input Nhập mã otp

Hình 59 Giao diện Navbar cho khách vãng lai

Hình 60 Giao diện Navbar cho khách đã đăng nhập

4 Quay lại Button Nhấn để quay lại bước trước đó

5 Gửi lại mã Button Nhấn vào để gửi lại mã otp

6 Nhập mã xác thực Button Nhấn vào để kiểm tra mã xác thực được nhập

7 Mật khẩu Input Điền mật khẩu mới

8 Xác nhận lại mật khẩu Input Điền lại mật khẩu mới

9 Quay lại Button Nhấn để quay lại bước trước đó

11 Đổi mật khẩu Button Nhấn để cập nhật mật khẩu mới

Hình 61 Giao diện các sản phẩm tại Trang chủ Bảng 52 Bảng chi tiết màn hình Trang chủ

1 Trang chủ Link Nhấn vào để chuyển đến “Trang chuyển”

2 Sản phẩm Link Khi di chuột vào sẽ hiển thị danh sách các danh mục và khi nhấn vào danh mục sẽ chuyển đến trang “Danh sách sản phẩm” tương ứng

- Xem thông tin cá nhân, cập nhật thông tin

3 Tìm kiếm Input Gõ từ khóa cần tìm kiếm

4 Nút Tìm kiếm Button Khi nhấn nút sẽ chuyển đến trang “Danh sách sản phẩm” dựa theo từ khóa tìm kiếm

5 Đăng nhập Button Nhấn vào để chuyển đến trang

6 Đăng ký Button Nhấn vào để chuyển đến trang

7 Nút Giỏ hàng Button Nhấn vào sẽ chuyển đến trang

8 Ảnh đại diện Dropdown Nhấn vào sẽ hiển thị các mục: Đơn hàng của tôi, Thông tin cá nhân, Đăng xuất

9 Slider Slider Bấm vào các mũi tên hai bên hoặc nhấn vào nút tròn ở phía dưới để chuyển đổi giữa các hình ảnh tương ứng

10 Messenger Button Nhấn vào để hiển thị khung trò chuyện thông qua Messenger

11 Thẻ sản phẩm Card Nhấn vào để chuyển đến trang

Hình 62 Giao diện trang Chỉnh sửa thông tin cá nhân

Bảng 53 Bảng chi tiết màn hình trang Chỉnh sửa thông tin cá nhân:

1 Ảnh đại diện Button Nhấn để hiển thị modal đổi ảnh đại diện

3 Số diện thoại Input Nhập số điện thoại

4 Tỉnh/Thành phố Select Chọn tỉnh, thành phố

5 Quận/Huyện Select Chọn quận, huyện

6 Phường/Xã Select Chọn phường, xã

7 Địa chỉ Input Nhập địa chỉ

8 Giới tính Select Chọn giới tính

9 Đổi mật khẩu Button Ấn để hiện modal đổi mật khẩu

10 Lưu Button Lưu thông tin thay đổi

Hình 63 Giao diện Modal đổi mật khẩu

Bảng 54 Bảng chi tiết màn hình Modal đổi mật khẩu:

1 Icon cross tắt modal Icon Nhấn để tắt modal

2 Mật khẩu cũ Input Nhập mật khẩu cũ

3 Mật khẩu mới Input Nhập mật khẩu mới

4 Nhập lại mật khẩu mới Input Nhập lại mật khẩu mới

5 Hiện mật khẩu Check Box Hiện mật khẩu

6 Hủy bỏ Button Nhấn để hủy thay đổi mật khẩu và tắt modal

7 Thay đổi Button Nhấn để thay đổi mật khẩu

- Xem thông tin chi tiết sản phẩm

Hình 64 Giao diện trang Chi tiết sản phẩm Bảng 55 Bảng chi tiết màn hình trang Chi tiết sản phẩm:

1 Chọn size Radio Button Chọn size của sản phẩm

2 Chọn màu Radio Button Chọn màu của sản phẩm

3 Thêm vào giỏ hàng Button Nhấn để thêm sản phẩm vào giỏ hàng

4 Đi đến giỏ hàng Link Nhấn để chuyển sang trang

5 Ảnh sản phẩm Image Nhấn để xem ảnh sản phẩm

6 Danh sách các đánh giá của sản phẩm

List Hiển thị các đánh giá của sản phẩm

7 Phân trang các đánh giá của sản phẩm

Pagination Nhấn để xem các trang đánh giá sản phẩm

- Giao diện tìm kiếm sản phẩm

Hình 65 Giao diện trang Tìm kiếm sản phẩm

Hình 66 Hình Giao diện Popover Lọc sản phẩm Bảng 56 Bảng chi tiết màn hình trang Tìm kiếm sản phẩm:

1 Lọc sản phẩm Button Mở popover lọc sản phẩm

2 Sắp xếp sản phẩm Select Chọn các tiêu chí để hiện thị sản phẩm được sắp xếp

3 Xem chi tiết sản phẩm Link Nhấn để chuyển sang trang xem chi tiết sản phẩm

4 Phân trang danh sách sản phẩm

Pagination Nhấn để xem các trang sản phẩm

5 Chọn khoảng giá cần lọc Process Kéo chọn khoảng giá muốn lọc

6 Chọn giới tính Check Box Chọn giới tính muốn lọc

7 Lọc sản phẩm Button Nhấn để lọc sản phẩm

8 Hủy lọc Button Nhấn để hủy lọc sản phẩm

Hình 67 Giao diện trang Giỏ hàng Bảng 57 Bảng chi tiết màn hình trang Giỏ hàng:

1 Tăng giảm số lượng sản phẩm

Nhấn +/- để tăng giảm số lượng sản phẩm

2 Xóa sản phẩm khỏi giỏ hàng Icon Nhấn để xóa sản phẩm khỏi giỏ hàng

3 Đặt hàng Link Nhấn để chuyển sang trang đặt hàng

- Giao diện trang đặt hàng

Hình 68 Giao diện trang Đặt hàng Bảng 58 Bảng chi tiết màn hình trang Đặt hàng:

1 Tỉnh/Thành Select Chọn tỉnh,thành

2 Quận/Huyện Select Chọn quận huyện

3 Phường/Xã Select Chọn phường xã

4 Địa chỉ Textarea Nhập địa chỉ

5 Họ tên Input Nhập họ tên

6 Số điện thoại Input Nhập số điện thoại

8 Phương thức vận chuyển Select Chọn phương thức vận chuyển

9 Phương thức thanh toán Radio Button Chọn phương thức thanh toán

10 Đặt hàng Button Nhấn để đặt hàng

11 Quay lại giỏ hàng Button Nhấn để quay lại giỏ hàng

- Giao diện trang đơn hàng của tôi

Hình 69 Giao diện trang Đơn hàng của tôi Bảng 59 Bảng chi tiết màn hình trang Đơn hàng của tôi:

1 Mã đơn hàng Link Nhấn để chuyển sang trang xem chi tiết đơn hàng

2 Phân trang đơn hàng Pagination Nhấn để xem các trang đơn hàng

- Giao diện chi tiết đơn hàng

Hình 70 Giao diện trang Chi tiết đơn hàng Bảng 60 Bảng chi tiết màn hình trang Chi tiết đơn hàng:

1 Đơn hàng của tôi Link Nhấn để quay về trang đơn hàng

2 Danh sách sản phẩm đặt hàng

List Hiển thị các sản phẩm đặt hàng

3 Trạng thái đơn hàng Stepper Hiển thị trạng thái đơn hàng

4 Hủy đơn hàng Button Nhấn để hủy đơn hàng

5 Phản hồi Button Nhấn để mở modal đánh giá

- Giao diện đánh giá đơn hàng

Hình 71 Giao diện Modal đánh giá sản phẩm Bảng 61 Bảng chi tiết màn hình Modal đánh giá sản phẩm:

1 Đánh giá sao Rating Chọn số sao đánh giá

2 Nội dung đánh giá Textarea Nhập nội dung đánh giá

3 Hủy bỏ Stepper Nhấn để hủy bỏ đánh giá

4 Nhận xét Button Nhấn để lưu đánh giá

5 Icon tắt modal Button Nhấn để tắt màn hình modal

114 b Giao diện trang quản lý

Hình 72 Sidebar của quản trị viên và nhân viên

Bảng 62 Bảng chi tiết Sidebar

1 Tên người dùng Dropdown Nhấn vào để hiện mục “Đăng xuất”

2 Thống kê Dropdown Nhấn vào để xem tùy chọn:

“Xem thống kê” – Nhấn vào để chuyển đến trang “Thống kê”

3 Tài khoản Dropdown Nhấn vào để xem tùy chọn:

“Quản lý tài khoản” – Nhấn vào để chuyển đến trang “Quản lý tài khoản”

4 Sản phẩm Dropdown Nhấn vào để xem các tùy chọn:

“Quản lý sản phẩm” – Nhấn vào sẽ chuyển đến trang “Quản lý sản phẩm”

“Quản lý giá sản phẩm” – Nhấn vào sẽ chuyển đến trang “Quản lý giá sản phẩm”

5 Danh mục Dropdown Nhấn vào để xem tùy chọn:

“Quản lý danh mục” – Nhấn vào để chuyển đến trang “Quản lý danh mục”

6 Nhãn hàng Dropdown Nhấn vào để xem tùy chọn:

“Quản lý nhãn hàng” – Nhấn vào sẽ chuyển đến trang “Quản lý nhãn hàng”

7 Đơn hàng Dropdown Nhấn vào để xem tùy chọn:

“Quản lý đơn hàng” – Nhấn vào sẽ chuyển đến trang “Quản lý đơn hàng”

Hình 73 Trang thống kê Bảng 63 Bảng chi tiết trang Thống kê

1 Thẻ thống kê số lượng Card Thống kê số lượng

2 Thời gian Dropdown Nhấn vào để xem tùy chọn:

Chọn “Thời điểm bắt đầu” của bộ lọc

Chọn “Thời điểm kết thúc” của bộ lọc

5 Xem thống kê Button Nhấn vào để hiển thị ra “Bảng thống kê”

Hình 74 Trang quản lý tài khoản Bảng 64 Bảng chi tiết trang Quản lý tài khoản

6 Bảng thống kê Chart Thông kế số lượng sản phẩm, doanh số theo thời gian

1 Bảng danh sách tài khoản

Table Xem danh sách các tài khoản Nhấn vào mục

“Phân quyền” để sắp xếp lại bảng theo phân quyền Nhấn vào mục “Trạng thái” để sắp xếp tài khoản theo trạng thái

2 Xuất CSV Button Xuất danh sách thành file CSV

3 Thêm tài khoản Button Nhấn vào để hiện modal “Thêm tài khoản”

Button Nhấn vào để hiện modal “Chỉnh sửa tài khoản”

5 Phân trang Pagination Nhấn vào để chuyển qua lại giữa các trang danh sách tài khoản

6 Tên người dùng Text Input Admin nhập tên người dùng cần tạo tài khoản

7 Email Text Input Admin nhập Email cần tạo tài khoản

8 Mật khẩu Text Input Admin tạo mật khẩu cho tài khoản

9 Vai trò Radio button Admin chọn phân quyền cho tài khoản

10 Hủy Button Nhấn vào để đóng modal

11 Lưu Button Nhấn vào để lưu thông tin tài khoản

12 Trạng thái Radio button Admin cập nhật phân quyền cho tài khoản

Hình 75 Trang quản lý sản phẩm Bảng 65 Bảng chi tiết trang Quản lý sản phẩm

1 Bảng danh sách sản phẩm

Table Xem danh sách các sản phẩm Nhấn vào mỗi cột có dấu “*” phía sau của bảng để sắp xếp lại bảng

2 Xuất CSV Button Xuất danh sách thành file CSV

3 Thêm sản phẩm Button Nhấn vào để hiện modal “Thêm sản phẩm”

Button Nhấn vào để hiện modal “Chỉnh sửa sản phẩm”

Button Nhấn vào để hiển thị modal “Xóa sản phẩm”

6 Phân trang Pagination Nhấn vào để chuyển qua lại giữa các trang danh sách sản phẩm

7 Trạng thái Radio button Admin cập nhật trạng thái cho sản phẩm

8 Hủy Button Nhấn vào để đóng modal

9 Lưu Button Nhấn vào để lưu thông tin sản phẩm

Hình 76 Trang thêm sản phẩm Bảng 66 Bảng chi tiết trang Thêm sản phẩm

1 Tên sản phẩm Text Input Điền tên sản phẩm

2 Giá sản phẩm Text Input Điền giá sản phẩm

3 Giảm giá Text Input Điền số phần trăm giảm giá của sản phẩm

4 Danh mục Dropdown Chọn Danh mục cho sản phẩm

5 Nhãn hàng Dropdown Chọn Nhãn hàng cho sản phẩm

6 Mô tả Text Input Điền mô tả cho sản phẩm

7 Xong Button Nhấn vào để chuyển về trang “Quản lý sản phẩm”

8 Lưu Button Nhấn vào để tiến hành lưu “thông tin sản phẩm”, “phiên bản” hoặc “thông số” của sản phẩm

9 Size Text Input Điền Size cho phiên bản của sản phẩm

10 Số lượng Text Input Điền Số lượng cho phiên bản của sản phẩm

11 Màu ColorPicker Chọn màu cho phiên bản của sản phẩm

12 Phí cộng thêm Text Input Điền phí cộng thêm cho phiên bản của sản phẩm

13 Tải ảnh Button Nhấn vào để tải hình ảnh lên

14 Nút “Mũi tên sang phải”

Button Nhấn vào để chuyển qua bước “Thêm thông số”

15 Thông số Text Input Điền tên thông số của sản phẩm

16 Giá trị Text Input Điền giá trị thông số của sản phẩm

Hình 77 Trang chỉnh sửa sản phẩm Bảng 67 Bảng chi tiết trang Chỉnh sửa sản phẩm

1 Tên sản phẩm Text Input Hiển thị tên sản phẩm, cho phép người dùng thay đổi tên sản phẩm

2 Giá sản phẩm Text Input Hiển thị giá của sản phẩm, cho phép người dùng thay đổi giá của sản phẩm

3 Giảm giá Text Input Hiển thị phần trăm giảm giá của sản phẩm, cho phép người dùng thay đổi phần trăm giảm giá

4 Danh mục Dropdown Hiển thị Danh mục của sản phẩm, cho phép người dùng thay đổi danh mục của sản phẩm

5 Nhãn hàng Dropdown Hiển thị Nhãn hàng của sản phẩm, cho phép người dùng thay đổi nhãn hàng của sản phẩm

6 Mô tả Text Input Hiển thị Mô tả của sản phẩm, cho phép người dùng thay đổi mô tả của sản phẩm

7 Lưu Button Lưu lại thông tin sản phẩm

8 Bảng danh sách phiên bản

Table Hiển thị các danh sách phiên bản của sản phẩm

Button Nhấn vào để hiện modal “Thêm phiên bản”

Button Nhấn vào để hiện modal “Chỉnh sửa phiên bản”

11 Bảng danh sách thông số

Table Hiển thị các danh sách thông số của sản phẩm

Button Nhấn vào để hiện modal “Thêm thông số”

Button Nhấn vào để hiện modal “Chỉnh sửa thông số”

14 Nút “Hủy” Button Nhấn vào để trở về trang “Quản lý sản phẩm”

15 Thêm hình ảnh Button Nhấn vào để hiện modal “Thêm hình ảnh”

List Hiển thị danh sách các hình của sản phẩm

Button Nhấn vào để xóa hình ra khỏi danh sách

- Quản lý giá sản phẩm

Hình 78 Trang Quản lý giá sản phẩm Bảng 68 Bảng chi tiết trang Quản lý giá sản phẩm

- Quản lý các danh mục

1 Danh sách sản phẩm List Hiển thị danh sách các sản phẩm

2 Giá mới Text Input Nhập giá mới cho sản phẩm

3 Giảm giá mới Text Input Nhập phần trăm giảm giá mới cho sản phẩm

4 Icon “Dấu Tích” Button Nhấn vào để lưu giá, giảm giá mới cho sản phẩm

Hình 79 Trang Quản lý danh mục Bảng 69 Bảng chi tiết trang Quản lý danh mục

1 Lọc danh mục Button Bấm vào để lọc các danh mục hiển thị

2 Danh sách danh mục List Hiển thị các danh mục

3 Xuất CSV Button Nhấn vào để xuất danh sách thành file CSV

4 Thêm danh mục Button Nhấn vào để hiển thị Modal

- Quản lý các nhãn hàng

5 Icon “Cây bút” Button Nhấn vào để hiển thị Modal

6 Phân trang Pagination Nhấn vào để chuyển qua lại giữa các trang danh mục

7 Tên danh mục mới Text Input Nhập tên danh mục mới

8 Danh mục cha Dropdown Chọn danh mục cha cho danh mục

9 Hủy Button Nhấn vào để tắt modal

10 Lưu Button Nhấn vào để lưu lại thông tin của danh mục

11 Tên danh mục Text Input Hiển thị tên danh mục, nhập tên danh mục mới để thay đổi tên cho danh mục

12 Trạng thái Radio Button Nhấn vào để chọn trạng thái mới cho danh mục

Hình 80 Trang Quản lý nhãn hàng Bảng 70 Bảng chi tiết trang Quản lý nhãn hàng

1 Lọc nhãn hàng Button Bấm vào để lọc các nhãn hàng hiển thị

2 Danh sách nhãn hàng List Hiển thị các nhãn hàng

4 Thêm nhãn hàng Button Nhấn vào để hiển thị Modal

5 Icon “Cây bút” Button Nhấn vào để hiển thị Modal

7 Tên nhãn hàng mới Text Input Nhập tên nhãn hàng mới

8 Tải hình ảnh lên Button Nhấn vào để tải hình ảnh của nhãn hàng lên

9 Hủy Button Nhấn vào để tắt modal

10 Lưu Button Nhấn vào để lưu lại thông tin của danh mục

11 Tên nhãn hàng Text Input Hiển thị tên nhãn hàng, nhập tên nhãn hàng mới để thay đổi tên cho nhãn hàng

12 Trạng thái Radio Button Nhấn vào để chọn trạng thái mới cho nhãn hàng

Hình 81 Trang Quản lý đơn hàng Bảng 71 Bảng chi tiết trang Quản lý đơn hàng

1 Danh sách đơn hàng List Hiển thị các đơn hàng

3 Icon “Con mẳt” Button Nhấn vào để hiển thị Modal

“Xem chi tiết đơn hàng”

5 Danh sách sản phẩm List Hiển thị danh sách các sản phẩm của đơn hàng

6 Bảng chi tiết thông tin đơn hàng

Table Hiển thị các thông tin chi tiết

7 Hủy đơn hàng Button Nhấn vào để hủy đơn hàng

8 Xác nhận đơn hàng Button Nhấn vào để xác nhận đơn hàng

TRIỂN KHAI VÀ KIỂM THỬ HỆ THỐNG

Triển khai hệ thống

3.1.1 Triển khai hệ thống Frontend

Môi trường: Đã cài đặt NodeJS (từ phiên bản 16.13.0 trở lên)

Công cụ: Visual Studio Code hoặc các công cụ tương đương để chạy FE

Bước 1: Thực hiện clone hoặc tải xuống hai dự án sau từ github:

Client: https://github.com/1vinhpx2001/webbangiay

Admin: https://github.com/1vinhpx2001/sneakerheadadmin

Bước 2: Cài đặt các packages và thư viện cần thiết theo câu lệnh: npm install

Bước 3: Chạy dự án theo câu lệnh: npm start sau khi đã cài tất cả các thư viện hoàn tất

3.1.2 Triển khai hệ thống Backend

Môi trường: Đã cài đặt Java JDK (từ phiên bản 11.0.12 trở lên)

Công cụ: IntelliJ IDE hoặc các công cụ tương đương để chạy dự án BE

Bước 1: Thực hiện clone hoặc tải xuống dự án từ github https://github.com/quocthai-er/sneaker-store-backend

Bước 2: Mở dự án bằng IntelliJ IDE hoặc các công cụ tương đương và tiến hành chạy dự án

Thông tin về cơ sở dữ liệu

Link truy cập cơ sở dữ liệu: https://www.mongodb.com

Chuỗi kết nối: mongodb+srv://quocthai253:7VMnLx3PONvoG28Z@cluster0.inyremj.mongodb.net/? retryWrites=true&w=majority

Hình 82 Cài đặt Database Tài khoản Trang Quản trị viên:

Kiểm thử hệ thống

Trong dự án này, nhóm sử dụng phương pháp kiểm thử hộp đen để đánh giá các chức năng chính của hệ thống trên trang web Phương pháp này được chọn vì tính phù hợp cao khi kiểm thử các chức năng chính, đồng thời mang lại sự thuận tiện trong quá trình phát triển hệ thống trong khoảng thời gian ngắn Các chức năng cụ thể sẽ được kiểm thử và liệt kê chi tiết như sau:

- Phía người dùng: Đăng ký, đăng nhập, quên mật khẩu, đổi mật khẩu, chỉnh sửa thông tin cá nhân, tìm kiếm sản phẩm, xem chi tiết sản phẩm, thêm sản phẩm vào giỏ hàng, quản lý giỏ hàng, đặt hàng, đánh giá sản phẩm, xem lịch sử đơn hàng

- Phía quản trị: Đăng nhập, xem thống kê, quản lý thái tài khoản, quản lý danh mục, quản lý nhãn hàng, quản lý sản phẩm, thêm sản phẩm, xác nhận đơn hàng, hủy đơn hàng

Bảng 72 Kiểm thử phía người dùng

STT Mô tả Các bước thực hiện Kết quả mong đợi Kết quả thực tế

1 Chức năng Đăng ký Bước 1: Nhấn vào nút

“Đăng ký” tại trang chủ Bước 2: Điền đầy đủ thông tin đăng ký Bước 3: Nhấn vào nút

“Gửi mã xác nhận” để nhận mã xác nhận Bước 4: Nhập mã xác nhận

“Đăng ký” Đăng ký thành công Như mong đợi

“Đăng nhập” tại trang Đăng nhập thành công

133 chủ Bước 2: Nhập thông tin tài khoản đã được đăng ký Bước 3: Ấn vào nút đăng nhập

3 Chức năng đăng nhập bằng

“Đăng nhập” tại trang chủ

Bước 3: Chọn tài khoản Google để đăng nhập Đăng nhập thành cồng

Bước 1: Người dùng nhấn vào nút Quên mật khẩu tại trang đăng nhập Bước 2: Nhập Email cần khôi phục mật khẩu Bước 3: Nhấn nút gửi mã xác thực Bước 4: Nhập mã xác thực và nhấn nút gửi mã xác thực

Bước 5: Điền mật khẩu mới, nhập lại mật khẩu mới và nhấn nút Lưu Đổi mật khẩu thành công

5 Chức năng Đổi mật khẩu

Bước 1: Người dùng nhấn vào nút Đổi mật khẩu tại trang thông tin cá nhân Bước 2: Điền mật khẩu cũ, mật khẩu mới, nhập lại mật khẩu mới

Bước 3: Nhấn nút Thay đổi Đổi mật khẩu thành công

Chỉnh sửa thông tin cá nhân

Bước 1: Người dùng vào trang Thông tin cá nhân

Chỉnh sửa thông tin cá nhân thành công

134 chỉnh sửa thông tin cá nhân cần cập nhật Bước 3: Nhấn nút Lưu

7 Chức năng tìm kiếm sản phẩm

Bước 1: Người dùng gõ từ khóa tìm kiếm vào thanh search

Bước 2: Nhấn vào Icon Search

Tìm kiếm sản phẩm thành công

8 Chức năng xem chi tiết sản phẩm

Bước 1: Người dùng đưa chọn vào Sản phẩm cần xem chi tiết

Xem chi tiết sản phẩm thành công

9 Chức năng thêm sản phẩm

Bước 1: Người dùng chọn size, màu sắc của sản phẩm tại trang Xem chi tiết sản phẩm

Bước 2: Nhấn vào nút Thêm vào giỏ hàng

Sản phẩm được thêm vào giỏ hàng

10 Chức năng Đặt hàng Bước 1: Vào trang giỏ hàng, ấn vào nút Đặt hàng

Bước 2: Nhập các thông tin giao hàng

Bước 3: Chọn Phương thức thanh toán

Bước 4: Nhấn vào nút Đặt hàng Đặt hàng thành công Như mong đợi

11 Chức năng xem lịch sử Đơn hàng, chi tiết đơn hàng

Bước 1: Người dùng nhấn vào Tên người dùng trên thành header, sau đó chọn vào trang Đơn hàng của tôi

Bước 2: Nhấn vào mã đơn hàng của Đơn hàng cần kiểm tra

Xem lịch sử đơn hàng, chi tiết đơn hàng thành công

12 Chức năng Đánh giá sản phẩm

Bước 1: Người dùng vào trang Xem chi tiết đơn hàng của đơn hàng đang có trạng thái đã Hoàn tất Đánh giá sản phẩm thành công

Bước 2: Nhấn vào nút Đánh giá tại sản phẩm cần đánh giá

Bước 3: Chọn số sao, điền nội dung đánh giá và ấn nút Nhận xét

Bảng 73 Kiểm thử phía Quản trị viên

STT Mô tả Các bước thực hiện Kết quả mong đợi Kết quả thực tế

Bước 1: Nhấn vào mục Xem thông kế tại thanh sidebar bên trái

Bước 2: Chọn xem thông kế theo ngày/tháng/năm Bước 3: Chọn ngày bắt đầu và kết thúc

Bước 4: Nhấn nút xem thống kê

Xem thống kê thành công

Bước 1: Nhấn vào mục quản lý tài khoản tại thanh sidebar bên trái Bước 2: Chọn vào nút Thêm tài khoản Bước 3: Nhập các thông tin tài khoản

Thêm tài khoản thành công

“Quản lý sản phẩm” tại thanh sidebar bên trái Bước 2: Nhấn vào nút Thêm sản phẩm Bước 3: Nhập đầy đủ thông tin sản phẩm Bước 4: Nhấn nút

Thêm sản phẩm thành công

“Quản lý sản phẩm” tại

Thêm phiên bản thành công

136 phiên bản sản phẩm thanh sidebar bên trái Bước 2: Nhấn vào nút biểu tượng cây bút tại sản phẩm muốn thêm phiên bản

“+” tại mục Phiên bản Bước 4: Nhập các thông tin phiên bản

Chỉnh sửa thông tin sản phẩm

“Quản lý sản phẩm” tại thanh sidebar bên trái Bước 2: Nhấn vào nút biểu tượng cây bút tại sản phẩm muốn chỉnh sửa

Bước 3: Nhập các thông tin cần chỉnh sửa

Chỉnh sửa thông tin thành công

“Quản lý đơn hàng” tại thanh sidebar bên trái Bước 2: Chọn vào đơn hàng cần cập nhật trạng thái

Bước 3: Nhấn các nút cập nhật trạng thái cho đơn hàng (Xác nhận đơn hàng, Giao hàng, Xác nhận thành công)

Cập nhật trạng thái đơn hàng thành công

Sau quá trình kiểm thử nhóm đề tài thu được bảng tổng kết kết quả thử nghiệm

Bảng 74 Một số thử nghiệm và số liệu

STT Nội dung thử nghiệm Số liệu

1 Số lượng yêu cầu chức năng 21

2 Số testcase trung bình được liệt kê trên mỗi yêu cầu 5

3 Tổng số testcase trên tất cả requirement 101

4 Tổng số testcase đã thực thi 101

7 Tổng số testcase bị chặn 0

8 Tổng số testcase không được thực thi 0

10 Tổng số khiếm khuyết chấp nhận được 2

11 Số khiếm khuyết được pending 2

12 Số khiếm khuyết được sửa 0

Tỉ lệ thực thi testcase được xác định với công thức số testcase đã thực thi trên tổng số testcase được liệt kê là 100% Độ hiệu quả của testcase xác định bởi số khuyết điểm được tìm thấy trên số testcase thực thi là 4%

Tỉ lệ testcase failed xác định bởi tổng số testcase bị thất bại trên tổng số testcase thực thi là 4%

Tỉ lệ testcase bị blocked xác định bằng tổng số testcase bị block trên tổng số testcase thực thi 0%

Tỉ lệ khiếm khuyết được sửa xác định bởi tổng số khiếm khuyết đã được sửa trên tổng số khiếm khuyết được tìm thấy 0%

Tỉ lệ khiếm khuyết chấp nhận được xác định bằng tổng số khiếm khuyết chấp nhận được trên tổng số khiếm khuyết được tìm thấy 50%

Tỉ lệ khiếm khuyết bị pending xác định bằng tổng số khiếm khuyết bị pending trên tổng số khiếm khuyết được báo cáo 50%

3.2.2 Đánh giá kết quả thử nghiệm

Mục tiêu cơ bản là phát triển một hệ thống mua sắm giày Sneaker trực tuyến và thực hiện thử nghiệm để đảm bảo đáp ứng được các yêu cầu chức năng cơ bản được mô tả trong phạm vi dự án Mặc dù có khả năng mở rộng để xử lý dữ liệu lớn, nhưng kết quả thử nghiệm chưa thể cung cấp thông tin chi tiết về khả năng mở rộng thực sự do chỉ được thử nghiệm trong một môi trường nhỏ với lượng dữ liệu tương đối ít Các thử nghiệm thực hiện trong môi trường nhỏ như vậy có thể không phản ánh chính xác hiệu suất khi hoạt động trên các hệ thống khác nhau và trong các tình huống khác nhau

Kết luận: Sau quá trình phát triển, hệ thống đã được kiểm thử và kết quả đã được tổng hợp thông qua nội dung của các bài thử nghiệm, từ đó có thể đưa ra đánh giá về quá trình chạy thử

Ưu điểm

Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 2024

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ự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên Sinh viên: Phan Quốc Thái Mã số sinh viên: 19110284

Họ và tên Sinh viên: Phạm Xuân Vinh Mã số sinh viên: 19110011

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng Website bán giày SneakerHead Store

Giảng viên phản biện: ThS Mai Thị Anh Thơ

1 Về nội dung đề tài & khối lượng thực hiện:

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 2024

Giảng viên phản biện (Ký & ghi rõ họ tên)

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

Lời đầu tiên, chúng em xin gửi lời biết ơn sâu sắc đến thầy Hoàng Văn Dũng, người đã hỗ trợ nhóm từ lúc chọn đề tài, hướng dẫn, đánh giá và góp ý cũng như cấp tài liệu tham khảo để nhóm làm báo cáo tốt và hiệu quả nhất Những lời dạy, nhận xét, ý kiến từ thầy đã đóng vai trò rất quan trọng trong việc giúp chúng em hoàn thiện đề tài

Chúng em xin bày tỏ lòng biết ơn đến các quý thầy cô khoa Công Nghệ Thông Tin đã hỗ trợ, giúp đỡ chúng em và cung cấp cho chúng em rất nhiều thông tin và kiến thức bổ ích để chúng em làm xong dự án

Do thời gian và kinh nghiệm của sinh viên có giới hạn, bài báo cáo này có thể có những sai sót Chúng em rất mong nhận được những góp ý chân thành của các thầy cô để nhóm có thể hoàn thiện hệ thống hơn trong tương lai

Chúng em xin chân thành cảm ơn! vii

1 Tính cấp thiết của đề tài 1

2 Mục tiêu của đề tài 1

3 Cách tiếp cận và phương pháp nghiên cứu 1

4 Phân tích những công trình có liên quan 2

4.1 Website thứ nhất: Adidas Việt Nam 2

4.2 Website thứ hai: Bounty Sneakers 5

4.4 Website thứ tư: Tiệm giày cũ Sài Gòn 9

5 Kết quả dự kiến đạt được 12

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 14

1.1 Các tiêu chính đánh giá một website bán giày dép 14

1.1.1 Website có độ tin cậy cao 14

1.1.2 Thiết kế của giao diện 15

1.1.3 Nội dung của trang web 15

1.1.4 Tối ưu hóa trải nghiệm mua sắm của khách hàng 16

1.2.1 Tổng quan công nghệ sử dụng 17

1.2.2 Chi tiết công nghệ áp dụngc 17

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 23

2.1.2 Quy trình nghiệp vụ 23 viii

2.1.3 Xác định tác nhân và chức năng của hệ thống 23

2.2 Mô hình hóa yêu cầu 27

2.2.2 Đặc tả các Use case 28

2.2.5.Thiết kế cơ sở dữ liệu 88

2.3.1 Thiết kế và xác định cấu trúc giao diện 95

CHƯƠNG 3: TRIỂN KHAI VÀ KIỂM THỬ HỆ THỐNG 131

3.1.1 Triển khai hệ thống Frontend 131

3.1.2 Triển khai hệ thống Backend 131

3.2.2 Đánh giá kết quả thử nghiệm 138

4 Hướng phát triển của đề tài 140 ix

Hình 1 Giao diện trang chủ Adidas Việt Nam 3

Hình 2 Giao diện trang xem chi tiết đơn hàng Adidas Việt Nam 3

Hình 3 Trang chủ Bounty Sneakers 5

Hình 4 Trang chi tiết sản phẩm Bounty Sneakers 6

Hình 6 Trang chi tiết sản phẩm KingShoes 8

Hình 7 Trang chủ Tiệm giày cũ Sài Gòn 10

Hình 8 Trang chi tiết sản phẩm Tiệm giày cũ Sài Gòn 10

Hình 9 Tiêu chí website có tính bảo mật 14

Hình 10 Thiết kế giao diện website thân thiện với người dùng 15

Hình 11 Nội dung là một yếu tố quan trọng của website 16

Hình 12 Kiến trúc hệ thống 16

Hình 13 Virtual Dom trong Reactjs [1] 18

Hình 14 Nguyên lý vận hành của Redux [2] 19

Hình 15 Từ Spring Framework đến Spring Boot [5] 20

Hình 17 Cấu trúc của Json Web Token [6] 22

Hình 18 Sơ đồ Use case phía khách hàng 27

Hình 19 Sơ đồ Use case phía quản trị viên 28

Hình 20 Lược đồ tuần tự của “Đăng ký” 55

Hình 21 Lược đồ tuần tự của “Đăng nhập” 56

Hình 22 Lược đồ tuần tự của “Đổi mật khẩu 57

Hình 23 Lược đồ tuần tự của “Chỉnh sửa thông tin cá nhân” 58

Hình 24 Lược đồ tuần tự của “Khôi phục mật khẩu” 59

Hình 25 Lược đồ tuần tự của “Tìm kiếm sản phẩm” 60

Hình 26 Lược đồ tuần tự của “Xem chi tiết sản phẩm” 61

Hình 27 Lược đồ tuần tự của “Thêm sản phẩm vào giỏ hàng” 62

Hình 28 Lược đồ tuần tự của “Chỉnh sửa số lượng sản phẩm” 63

Hình 29 Lược đồ tuần tự của “Xóa sản phẩm khỏi giỏ hàng” 63

Hình 30 Lược đồ tuần tự của “Đặt hàng” 64

Hình 31 Lược đồ tuần tự của “Đánh giá sản phẩm” 65

Hình 32 Lược đồ tuần tự của “Xem danh sách đơn hàng” 66

Hình 33 Lược đồ tuần tự của “Hủy đơn hàng” 67

Hình 34 Lược đồ tuần tự của “Xác nhận đã nhận hàng” 68

Hình 35 Lược đồ tuần tự của “Thêm tài khoản” 69

Hình 36 Lược đồ tuần tự của “Cập nhật trạng thái tài khoản” 70

Hình 37 Lược đồ tuần tự của “Thêm nhãn hàng” 71

Hình 38 Lược đồ tuần tự của “Chỉnh sửa nhãn hàng” 72 x

Hình 39 Lược đồ tuần tự của “Cập nhật trạng thái nhãn hàng” 73

Hình 40 Lược đồ tuần tự của “Thêm danh mục” 74

Hình 41 Lược đồ tuần tự của “Chỉnh sửa danh mục” 75

Hình 42 Lược đồ tuần tự của “Cập nhật trạng thái danh mục” 76

Hình 43 Lược đồ tuần tự của “Thêm sản phẩm” 77

Hình 44 Lược đồ tuần tự của “Chỉnh sửa sản phẩm” 78

Hình 45 Lược đồ tuần tự của “Cập nhật trạng thái sản phẩm” 79

Hình 46 Lược đồ tuần tự của “Thêm phiên bản” 80

Hình 47 Lược đồ tuần tự của “Chỉnh sửa phiên bản” 81

Hình 48 Lược đồ tuần tự của “Thêm thông số” 82

Hình 49 Lược đồ tuần tự của “Chỉnh sửa thông số” 83

Hình 50 Lược đồ tuần tự của “Xác nhận đơn hàng” 84

Hình 51 Lược đồ tuần tự của “Huỷ đơn hàng” 85

Hình 52 Lược đồ tuần tự của “Xem thống kê” 86

Hình 53 Lược đồ tuần tự của “Xuất CSV” 86

Hình 54 Lược đồ lớp (Class Diagram) 87

Hình 55 Lược đồ cơ sở dữ liệu 88

Hình 56 Giao diện đăng nhập 97

Hình 57 Giao diện đăng ký 98

Hình 58 Trang khôi phục mật khẩu 100

Hình 59 Giao diện Navbar cho khách vãng lai 101

Hình 60 Giao diện Navbar cho khách đã đăng nhập 101

Hình 61 Giao diện các sản phẩm tại Trang chủ 102

Hình 62 Giao diện trang Chỉnh sửa thông tin cá nhân 104

Hình 63 Giao diện Modal đổi mật khẩu 105

Hình 64 Giao diện trang Chi tiết sản phẩm 107

Hình 65 Giao diện trang Tìm kiếm sản phẩm 108

Hình 66 Hình Giao diện Popover Lọc sản phẩm 108

Hình 67 Giao diện trang Giỏ hàng 109

Hình 68 Giao diện trang Đặt hàng 110

Hình 69 Giao diện trang Đơn hàng của tôi 111

Hình 70 Giao diện trang Chi tiết đơn hàng 112

Hình 71 Giao diện Modal đánh giá sản phẩm 113

Hình 72 Sidebar của quản trị viên và nhân viên 114

Hình 74 Trang quản lý tài khoản 117

Hình 75 Trang quản lý sản phẩm 119

Hình 76 Trang thêm sản phẩm 120

Hình 77 Trang chỉnh sửa sản phẩm 122

Hình 78 Trang Quản lý giá sản phẩm 124 xi

Hình 79 Trang Quản lý danh mục 125

Hình 80 Trang Quản lý nhãn hàng 127

Hình 81 Trang Quản lý đơn hàng 129

Hình 82 Cài đặt Database 132 xii

Bảng 1 Bảng tổng kết khảo sát 11

Bảng 2 Bảng yêu cầu chức năng nghiệp vụ phía khách hàng 24

Bảng 3 Bảng yêu cầu chức năng nghiệp vụ phía quản trị 25

Bảng 4 Bảng yêu cầu chức năng hệ thống 26

Bảng 5 Bảng yêu cầu phi chức năng 26

Bảng 6 Bảng đặc tả Use case “Đăng ký” 28

Bảng 7 Bảng đặc tả Use case “Đăng nhập” 29

Bảng 8 Bảng đặc tả Use case “Đổi mật khẩu” 30

Bảng 9 Bảng đặc tả Use case “Chỉnh sửa thông tin cá nhân” 31

Bảng 10 Bảng đặc tả Use case Khôi phục mật khẩu 32

Bảng 11 Bảng đặc tả Use case “Tìm kiếm sản phẩm” 33

Bảng 12 Bảng đặc tả Use case “Xem chi tiết sản phẩm” 33

Bảng 13 Bảng đặc tả Use case “Thêm sản phẩm vào giỏ hàng” 34

Bảng 14 Bảng đặc tả Use case “Xóa sản phẩm khỏi giỏ hàng” 35

Bảng 15 Bảng đặc tả Use case “Chỉnh sửa số lượng sản phẩm” 35

Bảng 16 Bảng đặc tả Use case “Đặt hàng” 36

Bảng 17 Bảng đặc tả Use case “Đánh giá sản phẩm” 37

Bảng 18 Bảng đặc tả Use case “Xem danh sách đơn hàng” 37

Bảng 19 Bảng đặc tả Use case “Huỷ đơn hàng” 38

Bảng 20 Bảng đặc tả Use case “Xác nhận đã nhận được hàng” 38

Bảng 21 Bảng đặc tả Use case “Thêm tài khoản” 39

Bảng 22 Bảng đặc tả Use case “Cập nhật trạng thái tài khoản” 40

Bảng 23 Bảng đặc tả Use case “Thêm danh mục” 40

Bảng 24 Bảng đặc tả Use case “Chỉnh sửa danh mục” 41

Bảng 25 Bảng đặc tả Use case “Cập nhật trạng thái danh mục” 42

Bảng 26 Bảng đặc tả Use case “Thêm nhãn hàng” 42

Bảng 27 Bảng đặc tả Use case “Chỉnh sửa nhãn hàng” 43

Bảng 28 Bảng đặc tả Use case “Cập nhật trạng thái nhãn hàng” 44

Bảng 29 Bảng đặc tả Use case “Thêm sản phẩm” 45

Bảng 30 Bảng đặc tả Use case “Chỉnh sửa sản phẩm” 45

Bảng 31 Bảng đặc tả Use case “Cập nhật trạng thái sản phẩm” 46

Bảng 32 Bảng đặc tả Use case “Thêm phiên bản” 47

Bảng 33 Bảng đặc tả Use case “Chỉnh sửa phiên bản” 48

Bảng 34 Bảng đặc tả Use case “Thêm thông số” 49

Bảng 35 Bảng đặc tả Use case “Chỉnh sửa thông số” 49

Bảng 36 Bảng đặc tả Use case “Xác nhận đơn hàng” 50

Bảng 37 Bảng đặc tả Use case “Hủy đơn hàng” 51

Bảng 38 Bảng đặc tả Use case “Xem thống kê” 52 xiii

Bảng 39 Bảng đặc tả Use case “Xuất CSV” 53

Bảng 40 Bảng đặc tả Use case “Xác nhận giao hàng” 53

Bảng 41 Bảng chi tiết dữ liệu của “users” 89

Bảng 42 Bảng chi tiết dữ liệu của “brands” 90

Bảng 43 Bảng chi tiết dữ liệu của “categories” 90

Bảng 44 Bảng chi tiết dữ liệu của “products” 90

Bảng 45 Bảng chi tiết dữ liệu của “product_option” 92

Bảng 46 Bảng chi tiết dữ liệu của “orders” 93

Bảng 47 Bảng chi tiết dữ liệu của “order_items” 94

Bảng 48 Bảng chi tiết dữ liệu của “reviews” 94

Bảng 49 Bảng chi tiết màn hình Đăng nhập 97

Bảng 50 Bảng chi tiết màn hình Đăng ký 98

Bảng 51 Bảng chi tiết màn hình Khôi phục mật khẩu 100

Bảng 52 Bảng chi tiết màn hình Trang chủ 102

Bảng 53 Bảng chi tiết màn hình trang Chỉnh sửa thông tin cá nhân: 104

Bảng 54 Bảng chi tiết màn hình Modal đổi mật khẩu: 106

Bảng 55 Bảng chi tiết màn hình trang Chi tiết sản phẩm: 107

Bảng 56 Bảng chi tiết màn hình trang Tìm kiếm sản phẩm: 108

Bảng 57 Bảng chi tiết màn hình trang Giỏ hàng: 109

Bảng 58 Bảng chi tiết màn hình trang Đặt hàng: 110

Bảng 59 Bảng chi tiết màn hình trang Đơn hàng của tôi: 111

Bảng 60 Bảng chi tiết màn hình trang Chi tiết đơn hàng: 112

Bảng 61 Bảng chi tiết màn hình Modal đánh giá sản phẩm: 113

Bảng 62 Bảng chi tiết Sidebar 115

Bảng 63 Bảng chi tiết trang Thống kê 116

Bảng 64 Bảng chi tiết trang Quản lý tài khoản 117

Bảng 65 Bảng chi tiết trang Quản lý sản phẩm 119

Bảng 66 Bảng chi tiết trang Thêm sản phẩm 120

Bảng 67 Bảng chi tiết trang Chỉnh sửa sản phẩm 122

Bảng 68 Bảng chi tiết trang Quản lý giá sản phẩm 124

Bảng 69 Bảng chi tiết trang Quản lý danh mục 125

Bảng 70 Bảng chi tiết trang Quản lý nhãn hàng 127

Bảng 71 Bảng chi tiết trang Quản lý đơn hàng 129

Bảng 72 Kiểm thử phía người dùng 132

Bảng 73 Kiểm thử phía Quản trị viên 135

Bảng 74 Một số thử nghiệm và số liệu 136

1 Tính cấp thiết của đề tài

Với nền công nghiệp 4.0 hiện nay, kinh doanh mua bán là một nhu cầu không thể thiếu cho mọi người Trong số các mặt hàng thời trang, giày dép là một sản phẩm rất quan trọng cho mỗi cá nhân Nhưng việc tìm được một đôi giày ưng ý không phải là dễ dàng, bởi thị trường có quá nhiều loại giày với kiểu dáng, chất lượng, giá cả khác biệt, khiến người dùng khó chọn được đôi giày phù hợp với nhu cầu của mình Thêm vào đó, cũng có nhiều nhà cung cấp không đảm bảo uy tín

Với những lý do kể trên, các website bán hàng trực tuyến ra đời để cung cấp cho người dùng những thông tin đáng tin cậy, giúp cho việc mua sắm trở nên thuận tiện hơn Người dùng sẽ có thể chọn được sản phẩm ưng ý cho bản thân mà không lo về chất lượng

Các website bán hàng trực tuyến đã tạo ra một cách mua sắm mới cho chúng ta, khi chỉ cần một cú nhấp chuột là có thể có được tất cả các thông tin cần thiết Nhóm nghiên cứu của chúng tôi đã chọn đề tài “Xây dựng website bán giày SneakerHead Store” cho Khóa luận tốt nghiệp

2 Mục tiêu của đề tài

Xây dựng một Website bán giày sneaker online với giao diện thân thiện, dễ tiếp cận, quy trình tìm kiếm sản phẩm, đặt hàng một cách dễ dàng và đa dạng các hình thức thanh toán

Xây dựng một Website quản lý cửa hàng giày sneaker với đầy đủ những tính năng quản trị và hiển thị thông tin, thống kê một cách trực quan nhất, giúp người dùng dễ dàng theo dõi và quản lý

3 Cách tiếp cận và phương pháp nghiên cứu

3.1 Đối tượng nghiên cứu Đối tượng nghiên cứu trong đề tài “Xây dựng website bán giày SneakerHead Store” được nhóm nghiên cứu thông qua các khảo sát thực tế gồm có:

- Sử dụng các cấu trúc, tính năng, ưu điểm, độ tin cậy và khía cạnh bảo mật của Spring Boot và ReactJS trong việc tích hợp vào đề tài

- Tìm hiểu các trang web tương đồng để nắm bắt cách chúng hoạt động, quy trình tìm kiếm sản phẩm, đặt hàng và những tính năng quan trọng cho một trang web mua sắm giày dép trực tuyến Sau đó, nhóm đã áp dụng kiến thức thu được vào dự án

- Dựa trên đặc điểm và nhu cầu sử dụng của người dùng, thiết kế chức năng sao cho tương thích và phản ánh nhu cầu của họ Cung cấp các giải pháp để đối mặt với những khó khăn mà người dùng có thể gặp phải

- Quản lý và nhân viên cửa hàng: Phân tích và đáp ứng những kỹ năng và nhu cầu quản lý cũng như thao tác mà đội ngũ quản lý và nhân viên cửa hàng cần sử dụng Điều này bao gồm việc tối ưu hóa giao diện người dùng và các chức năng hỗ trợ quản lý, đồng thời cung cấp các công cụ hiệu quả nhằm giúp nhân viên thực hiện các nhiệm vụ hàng ngày một cách thuận tiện và hiệu quả

Nhóm đã định rõ phạm vi mà họ sẽ nghiên cứu và tuân thủ các quy tắc cụ thể Dưới đây là danh sách các phạm vi mà nhóm đã xác định:

- Về phần công nghệ, nhóm tập trung vào việc sử dụng các công nghệ back-end như Spring Boot, Front-end như ReactJS, và cơ sở dữ liệu MongoDb Ngoài ra, nhóm cũng tích hợp các công nghệ hỗ trợ của bên thứ 3 khác như Paypal, VnPay, GHN, Google,

Từ những công nghệ này, nhóm áp dụng kỹ năng lập trình và kiến thức đã học để xây dựng cấu trúc và chức năng của trang web

- Liên quan đến đối tượng mà trang web hướng đến, nhóm tập trung nghiên cứu và phát triển các chức năng nhằm đáp ứng nhu cầu của khách hàng, những đối tượng có nhu cầu mua sắm, săn các sản phẩm giày Sneaker online

Hướng phát triển của đề tài

- Nâng cấp thêm các chức năng hỗ trợ việc tìm kiếm sản phẩm như: Tìm kiếm sản phẩm qua hình ảnh, giọng nói, sử dụng chatbox

- AI gợi ý những sản phẩm đang Hot cho quản trị viên để cửa hàng biết để nhập hàng về

- Xây dựng thêm hệ thống đặt hàng trên mobile

DANH MỤC TÀI LIỆU THAM KHẢO

[1] ReactJS là gì? Những điều bạn cần biết về ReactJS https://200lab.io/blog/reactjs-la-gi/ (Accessed on 11/06/2023)

[2] Redux là gì? Hiểu rõ cơ bản cách dùng Redux https://topdev.vn/blog/redux-la-gi/ (Accessed on 11/06/2023)

[3]Reactjs Docs https://legacy.reactjs.org/ (Accessed on 11/06/2023)

[4]Tailwindcss Docs https://tailwindcss.com/docs/responsive-design (Accessed on 11/06/2023)

Learn Spring Boot Tutorial - javatpoint (Accessed on 11/06/2023)

[6] What is a JWT? Understanding JSON Web Tokens https://supertokens.com/blog/what-is-jwt (Accessed on 11/06/2023)

[7] The MongoDB 7.0 Manual https://docs.mongodb.com/manual (Accessed on 12/09/2023)

[8] Hướng dẫn sử dụng thư viện lưu trữ ảnh Cloudinary https://cloudinary.com/documentation/java_integration (Accessed on 12/09/2023) [9] Google Identity (2023), Tích hợp đăng nhập bằng tài khoản Google https://developers.google.com/identity/protocols/oauth2 (Accessed on 15/10/2023) [10] Paypal (2023), Get started with PayPal https://developer.paypal.com/api/rest (Accessed on 25/10/2023)

[11] VNPAY (2023), Hướng dẫn tích hợp Cổng thanh toán VNPAY https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop (Accessed on 25/10/2023) [12] Hướng dẫn Deploy project trên Railway https://viblo.asia/p/deploy-project-laravel-tren-railway-EoW4obwrVml

[13] Tích hợp API Giaohangnhanh https://api.ghn.vn/home/docs/detail (Accessed on 20/10/2023)

[14] Những kiến thức mà bạn cần viết về MongoDB https://aptech.fpt.edu.vn/mongodb-la-gi.html (Accessed on 12/09/2023)

Tiêu đề	Xây Dựng Website Bán Giày SneakerHead Store
Tác giả	Phan Quốc Thái, Phạm Xuân Vinh
Người hướng dẫn	PGS. TS. Hoàng Văn Dũng
Trường học	Trường Đạ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
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2024
Thành phố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	156
Dung lượng	10,05 MB