xây dựng website kinh doanh thời trang sử dụng reactjs và spring boot

Đặc trưng chính của React là kiến trúc dựa trên thành phần component-based architecture, trong đó giao diện người dùng được chia thành các thành phần nhỏ, độc lập và tái sử dụng.. Khái n

TỔNG QUAN

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

Với sự phát triển của internet, Mua hàng online đã không còn một khái niệm mới mẻ, nó đã trở nên phổ biến hơn bao giờ hết Chỉ với một chiếc máy tính hoặc một chiếc điện thoại thông minh có kết nối mạng và một cú “click chọn”, ta đã có thể mua bất cứ thứ gì mình muốn Nhất là nhu cầu mua sắm quần áo của mọi người ngày càng được nâng cao

Với sự phát triển bùng nổ của công nghệ thông tin, các xu hướng mua sắm tiêu dùng đang ngày thay đổi và phát triển Người tiêu dùng đang dần chuyển sang các phương pháp mua sắm hiện đại thay vì các phương pháp mua sắm truyền thống Bên cạnh đó việc mua sắm trực tuyến cũng ngày càng phát triển

Xuất phát từ thực tiễn, với mong muốn tạo ra một ứng dụng giúp người dùng mua sắm các sản phẩm yêu thích của mình ở bất cứ đâu Bên cạnh đó, ứng dụng cũng giúp cho các doanh nghiệp dễ dàng quản lý và phát triển sản phẩm Vì lý do trên, Nhóm em quyết định phát triển đề tài “Xây dựng website kinh doanh thời trang sử dụng Reactjs và Spring Boot”.

Mục đích của đề tài

Xây dựng một website kinh doanh thời trang cho các chủ cửa hàng vừa và nhỏ muốn tạo dựng một thương hiệu Là sản phẩm có vai trò trung gian giúp tăng trải nghiệm mua/bán giữa người mua và người bán Website cũng cho phép thương hiệu được tiếp cận với khách hàng trên toàn quốc, mở rộng ra toàn cầu.

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

Đối với đề tài trên, đối tượng nghiên cứu dựa vào nhu cầu mua hàng trực tuyến của khách hàng Ngoài ra giúp cho doanh nghiệp, cửa hàng quản lý được doanh thu, hàng hóa và các vấn đề liên quan khác.

Phạm vi nghiên cứu

Ứng dụng sẽ bao gồm các chức năng, yêu cầu nghiệm vụ của một doanh nghiệp, cửa hàng thời trang trong thực tế bao gồm: Phân quyền, mua hàng, quản lý đơn hàng, quản lý thông tin nhân viên và khách hàng… Để thực hiện được các vấn đề trên thì ta sử dụng APIs, và kết nối APIs để hiển thị cho người dùng bằng ReactJS.

CƠ SỞ LÝ THUYẾT

MySQL

2.1.1 Cơ sở dữ liệu SQL

Cơ sở dữ liệu SQL (Ngôn ngữ truy vấn có cấu trúc) là một hệ thống quản lý cơ sở dữ liệu quan hệ phổ biến và mạnh mẽ SQL cho phép tạo, sắp xếp, truy vấn và quản lý dữ liệu Người dùng có thể tương tác với cơ sở dữ liệu bằng các lệnh SELECT, INSERT, UPDATE và DELETE SQL sử dụng cấu trúc bảng cấu trúc và quan hệ giữa các bảng thông qua khóa ngoại Nó được sử dụng rộng rãi trong các hệ thống thông tin doanh nghiệp, ứng dụng web và di động SQL cung cấp tính bảo mật, độ tin cậy và hiệu suất cao Nó được hỗ trợ bởi nhiều hệ thống quản lý cơ sở dữ liệu như MySQL, PostgreSQL, Oracle và SQL Server SQL vẫn tiếp tục đóng vai trò quan trọng trong quản lý và truy xuất hiệu quả dữ liệu

MySQL là một hệ quản trị cơ sở dữ liệu phổ biến và mạnh mẽ, được sử dụng rộng rãi trên nhiều nền tảng Đây là một hệ quản trị cơ sở dữ liệu mã nguồn mở và miễn phí, phát triển bởi một cộng đồng người dùng đông đảo

Các tính năng của MySQL:

● MySQL hỗ trợ ngôn ngữ truy vấn SQL (Structured Query Language) mạnh mẽ, giúp thực hiện các thao tác truy vấn và quản lý dữ liệu dễ dàng

● Nó hỗ trợ mô hình hóa dữ liệu quan hệ (relational data model) và hỗ trợ các khóa ngoại (foreign keys) để duy trì tính toàn vẹn dữ liệu

● MySQL có khả năng xử lý dữ liệu lớn và hiệu suất cao, giúp xử lý tải công việc nặng và đáp ứng cho các ứng dụng có lưu lượng truy cập cao

● Nó cung cấp tính năng đa người dùng và quyền truy cập kiểm soát, cho phép quản trị viên thiết lập các quyền truy cập và giới hạn cho người dùng

● MySQL hỗ trợ các tính năng bảo mật như mã hóa dữ liệu, xác thực người dùng và kiểm tra tính toàn vẹn dữ liệu Ưu điểm của MySQL:

● MySQL là một hệ quản trị cơ sở dữ liệu miễn phí và mã nguồn mở, giúp giảm chi phí cho việc triển khai và sử dụng

● Nó có cộng đồng người dùng đông đảo, nơi người dùng có thể tìm kiếm hỗ trợ và chia sẻ kiến thức với nhau

● MySQL cung cấp khả năng mở rộng dễ dàng, cho phép thêm các máy chủ cơ sở dữ liệu mới và phân chia công việc để tăng hiệu suất và khả năng chịu tải

● Nó được hỗ trợ trên nhiều nền tảng và hệ điều hành, bao gồm Windows, Linux và macOS

● MySQL có hạn chế về tính năng so với các hệ quản trị cơ sở dữ liệu cao cấp khác như Oracle hoặc SQL Server

● Một số tính năng tiên tiến như quản lý nhân viên, quản lý kho hay khả năng phân tích dữ liệu phức tạp có thể hạn chế trong MySQL

● Hiệu suất của MySQL có thể bị ảnh hưởng trong một số tình huống khi cơ sở dữ liệu trở nên rất lớn hoặc có lưu lượng truy cập cao.

Spring Boot

Spring là một framework Java phổ biến được sử dụng rộng rãi để phát triển ứng dụng doanh nghiệp Nó cung cấp các tính năng như Dependency Injection, quản lý giao dịch, xử lý ngoại lệ và nhiều hơn nữa Các lợi ích của Spring bao gồm sự tách biệt giữa logic kinh doanh và phần cài đặt kỹ thuật, giải mã boilerplate, tăng năng suất và có một cộng đồng hỗ trợ lớn

Spring Boot là một framework dựa trên Java được thiết kế để đơn giản hóa việc phát triển các ứng dụng độc lập và chất lượng cao Nó cung cấp một cách tiếp cận theo quy ước hơn là cấu hình, giảm bớt mã boilerplate và cho phép các nhà phát triển nhanh chóng tạo ra các ứng dụng mạnh mẽ và có khả năng mở rộng

Các tính năng chính của Spring boot bao gồm:

- Tự động cấu hình: Spring Boot tự động cấu hình các thành phần khác nhau dựa trên các phụ thuộc và giá trị mặc định hợp lý Điều này loại bỏ một phần lớn việc cấu hình thủ công cần thiết trong các ứng dụng Spring truyền thống

- Máy chủ nhúng: Spring Boot bao gồm một máy chủ servlet nhúng (ví dụ: Tomcat, Jetty) cho phép ứng dụng chạy như các tệp JAR độc lập mà không cần triển khai lên máy chủ riêng biệt

- Spring Data JPA: Spring Boot tích hợp với Spring Data JPA, giúp đơn giản hóa việc tương tác với cơ sở dữ liệu bằng cung cấp một API nhất quán và dễ sử dụng để làm việc với các cơ sở dữ liệu khác nhau

- Spring Security: Spring Boot tích hợp với Spring Security, cho phép nhà phát triển thêm các tính năng xác thực và ủy quyền vào ứng dụng của họ với cấu hình tối thiểu

- Hỗ trợ cho kiến trúc microservices: Spring Boot rất phù hợp cho việc xây dựng kiến trúc microservices Nó cung cấp các tính năng như phát hiện dịch vụ, cấu hình phân tán và bộ chia mạch thông qua tích hợp với Spring Cloud.

ReactJS Framework

React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook Nó là một công cụ mạnh mẽ để xây dựng giao diện người dùng tương tác cho các ứng dụng web và di động Đặc trưng chính của React là kiến trúc dựa trên thành phần (component-based architecture), trong đó giao diện người dùng được chia thành các thành phần nhỏ, độc lập và tái sử dụng

Khái niệm cơ bản của React là sử dụng các thành phần (components) để xây dựng giao diện người dùng Mỗi thành phần đại diện cho một phần của giao diện, có thể là một khung hình, một nút nhấn, một danh sách, hoặc thậm chí một trang đầy đủ Các thành phần này có thể được xây dựng bằng cách kết hợp các thành phần nhỏ hơn và được sắp xếp thành một cây thành phần phức tạp

Một ưu điểm quan trọng của React là khả năng tái sử dụng các thành phần Nhờ vào kiến trúc thành phần, các thành phần có thể được sử dụng lại trong nhiều nơi khác nhau trong ứng dụng Điều này giúp tối ưu quy trình phát triển, giảm thiểu việc viết lại mã và giữ cho mã nguồn dễ bảo trì Bên cạnh đó, react cũng sử dụng Virtual DOM (DOM ảo) để cải thiện hiệu suất Thay vì tương tác trực tiếp với DOM thực tế, React tạo ra một bản sao của DOM gọi là Virtual DOM Khi trạng thái của thành phần thay đổi, React so sánh Virtual DOM mới với Virtual DOM cũ và chỉ cập nhật những phần thay đổi tương ứng trên DOM thực tế Điều này giúp tối ưu quá trình cập nhật giao diện và tăng tốc độ hiển thị

Không chỉ là một thư viện giao diện người dùng, React còn tích hợp tốt với các thư viện và framework khác, cho phép xây dựng ứng dụng web phức tạp và linh hoạt Ngoài ra, React cũng có một cộng đồng phát triển lớn, với nhiều tài liệu và công cụ hỗ trợ

Tổng thể, React là một công cụ mạnh mẽ để xây dựng giao diện người dùng tương tác, với kiến trúc dựa trên thành phần, khả năng tái sử dụng và sử dụng Virtual DOM để cải thiện hiệu suất

2.3.2 Component-based Architecture (Kiến trúc dựa trên thành phần)

Kiến trúc dựa trên thành phần (Component-based Architecture) là một khía cạnh quan trọng của React Được xây dựng trên triết lý "Chia để trị" (Divide and Conquer), kiến trúc này tách giao diện người dùng thành các thành phần nhỏ hơn, mỗi thành phần đảm nhận một chức năng cụ thể trong ứng dụng

Mỗi thành phần trong React đóng vai trò như một khối xây dựng độc lập, chứa mã JavaScript, HTML và CSS của riêng nó Điều này giúp phát triển giao diện, việc quản lý mã nguồn, tái sử dụng mã và phát triển song song một cách dễ dàng Việc sắp xếp thành phần thành cây thành phần giúp tạo ra sự tổ chức rõ ràng Thành phần cha có thể truyền dữ liệu và chức năng xuống các thành phần con thông qua props, tạo sự kết nối và tương tác linh hoạt giữa các thành phần Mỗi thành phần có trạng thái (state) riêng, cho phép nắm bắt và quản lý dữ liệu của riêng nó Điều này giúp tăng tính tương tác trong việc xử lý dữ liệu và cập nhật giao diện

Kiến trúc dựa trên thành phần trong React cung cấp một cách tiếp cận tổ chức và quản lý giao diện người dùng hiệu quả Nó giúp tách biệt logic của ứng dụng và giao diện người dùng, tạo điều kiện cho việc phát triển độc lập và tái sử dụng thành phần, đồng thời cung cấp sự tương tác và linh hoạt trong quá trình phát triển ứng dụng React

Virtual DOM hay DOM ảo là một bản sao của DOM thực tế được React tạo ra và sử dụng để quản lý người dùng Khi trạng thái của các thành phần trong React thay đổi, React sẽ tạo ra một Virtual DOM mới, so sánh nó với Virtual DOM cũ và xác định các phần cần cập nhật trên DOM thực tế Thay vì tương tác trực tiếp với DOM thực tế - một quá trình tốn kém và mất nhiều hiệu năng, React sử dụng Virtual DOM để cập nhật giao diện một cách hiệu quả Qua quá trình so sánh, React chỉ cập nhật những phần thay đổi duy nhất trên DOM thực tế Điều này giúp tối ưu hóa hiệu suất, giảm thiểu tác động lên DOM và làm cho ứng dụng chạy mượt hơn

Sử dụng Virtual DOM cũng giúp đơn giản hóa quá trình phát triển Lập trình viên có thể tạo và chỉnh sửa các thành phần trong Virtual DOM, mà không cần phải quan tâm đến việc trực tiếp tương tác với DOM thực tế Khi các thay đổi được áp dụng trên Virtual DOM, React sẽ tự động áp dụng các cập nhật tương ứng lên DOM thực tế một cách hiệu quả

Khi xây dựng ứng dụng phức tạp, việc quản lý trạng thái của các thành phần trở nên phức tạp hơn Đó là lúc State Management đóng vai trò quan trọng trong việc tổ chức và điều khiển trạng thái của ứng dụng

State trong React đại diện cho trạng thái của một thành phần hoặc toàn bộ ứng dụng

Nó bao gồm các dữ liệu có thể thay đổi trong quá trình chạy, chẳng hạn như thông tin người dùng nhập, trạng thái hiển thị, hoặc dữ liệu từ API Khi trạng thái thay đổi, giao diện người dùng sẽ được cập nhật một cách tự động để phản ánh trạng thái mới

Quản lý trạng thái có thể trở nên phức tạp khi ứng dụng có nhiều thành phần chia sẻ cùng một trạng thái hoặc khi trạng thái cần được cập nhật và truyền đi trong toàn bộ ứng dụng Trong trường hợp này, một số thư viện được phát triển nhằm hỗ trợ quản lý trạng thái như Redux hoặc MobX, …

2.3.5 Component Lifecycle (Vòng đời của thành phần)

Component Lifecycle (Vòng đời của thành phần) mô tả các giai đoạn và sự kiện mà một thành phần đi qua từ khi được tạo ra cho đến khi bị hủy

Có ba giai đoạn chính trong vòng đời của một thành phần React:

- Mounting (Gắn kết): Giai đoạn này xảy ra khi một thành phần được tạo ra và được thêm vào cây thành phần Trong giai đoạn này, các sự kiện như constructor, componentWillMount, render và componentDidMount được kích hoạt Constructor được sử dụng để khởi tạo trạng thái và thiết lập các biến ban đầu componentWillMount và componentDidMount được sử dụng để thực hiện các thao tác chuẩn bị và tương tác với DOM hoặc dữ liệu

Các nội dung liên quan khác

JSON Web Token (JWT) là một tiêu chuẩn truyền thông tin xác thực an toàn giữa các ứng dụng Nó sử dụng chuỗi JSON để mã hóa thông tin và chữ ký số để đảm bảo tính toàn vẹn JWT có tính di động, dễ tích hợp và tin cậy Tuy nhiên, nó cũng có hạn chế về kích thước dữ liệu và không thể hủy bỏ

JWT có ba phần chính: Header, Payload và Signature Header chứa thông tin về thuật toán mã hóa được sử dụng Payload chứa dữ liệu chứng thực như thông tin người dùng, quyền truy cập và thông tin tùy chỉnh Signature được tạo bằng cách ký số Header, Payload và một khóa bí mật hoặc khóa công khai, đảm bảo tính toàn vẹn và xác thực của JWT

MySQL Workbench là một công cụ quản lý cơ sở dữ liệu MySQL miễn phí và mã nguồn mở Với giao diện đồ họa mạnh mẽ, nó cho phép quản lý kết nối và cơ sở dữ liệu, thiết kế và mô hình hóa cấu trúc, viết và tối ưu hóa truy vấn, mô phỏng và đảm bảo tính toàn vẹn dữ liệu, cũng như thực hiện sao lưu và phục hồi dữ liệu Điều này giúp tối ưu hóa quy trình làm việc với MySQL thông qua một công cụ dễ sử dụng và trực quan

Vite.js là một công cụ phát triển ứng dụng web siêu nhanh được xây dựng trên nền tảng Node.js Nó giúp tăng tốc độ phát triển và hiệu suất của ứng dụng web bằng cách sử dụng công nghệ ESM (ECMAScript Modules) và hỗ trợ môi trường phát triển cực kỳ nhanh chóng

Với Vite.js, việc xây dựng ứng dụng web trở nên đơn giản hơn bằng cách sử dụng TypeScript hoặc JavaScript để viết mã nguồn Nó cung cấp một cấu trúc dự án mạnh mẽ, hỗ trợ tự động tải lại (hot module replacement) và phân giải các module tĩnh để tăng tốc độ tải trang Vite.js sử dụng một cách tiếp cận mới trong việc phát triển ứng dụng web bằng việc sử dụng ESM thay vì bundling truyền thống Vite.js sử dụng ESM để tải và xử lý các module riêng lẻ khi chúng được yêu cầu Điều này giúp tăng tốc độ phát triển bằng cách loại bỏ quá trình bundling trước và giảm thời gian phát triển khi có thay đổi trong mã nguồn Một trong những đặc điểm nổi bật của Vite.js là khả năng hỗ trợ nhiều ngôn ngữ lập trình như TypeScript, JavaScript, Vue.js và React Điều này giúp dễ dàng tạo ra ứng dụng web sử dụng các công nghệ phổ biến này và tận dụng hiệu suất và tính năng mạnh mẽ của Vite.js

Các thành phần của Vite.js:

- ESM (ECMAScript Modules): Vite.js sử dụng ESM làm cơ sở cho việc phân giải các module Điều này cho phép tải và xử lý các module riêng lẻ khi chúng được yêu cầu, thay vì tạo một bundle lớn như trong quá trình bundling truyền thống Điều này giúp tăng tốc độ tải trang và tăng hiệu suất của ứng dụng

- Dev Server: Vite.js cung cấp một máy chủ phát triển tích hợp (dev server) để phục vụ ứng dụng trong quá trình phát triển Máy chủ này hỗ trợ tự động tải lại (hot module replacement), cho phép thấy ngay lập tức các thay đổi trong mã nguồn mà không cần làm mới trang

- Plugin: Vite.js hỗ trợ việc mở rộng và tùy chỉnh thông qua các plugin Từ đó có thể sử dụng các plugin có sẵn hoặc tự viết plugin để mở rộng chức năng của Vite.js hoặc tích hợp với các công nghệ khác như Vue.js hay React

- Cấu trúc dự án: Vite.js có một cấu trúc dự án tiêu chuẩn giúp tổ chức và quản lý mã nguồn một cách dễ dàng Có thể tạo mới một dự án Vite.js sử dụng lệnh cài đặt và tạo ra các tệp mã nguồn cần thiết cho ứng dụng

Với những thành phần này, Vite.js mang đến một cách tiếp cận hiệu suất và phát triển nhanh chóng cho việc xây dựng ứng dụng web Bằng cách sử dụng ESM và các công nghệ tiên tiến khác, Vite.js tối ưu hóa quá trình phát triển và cung cấp trải nghiệm tốt hơn cho lập trình viên.

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

Khảo sát hiện trạng

3.1.1 Tiến hành khảo sát a) Website “sly clothing”: https://slyclothing.vn/top/

Hình 1 Trang Web Sly clothing

- Xem danh sách sản phẩm: Cho phép xem sản phẩm theo các danh mục chỉ định

- Trang chi tiết sản phẩm: Xem chi tiết sản phẩm và đặt hàng

- Chức năng tìm kiếm: Tìm kiếm sản phẩm theo tên

- Quản lý danh mục theo sản phẩm thể loại Ưu điểm

- Giao diện đẹp mắt, dễ dàng thao tác cho người sử dụng

- Có nhiều sản phẩm đa dạng

- Chưa xem được quá trình giao hàng

- Chưa có hệ thống thanh toán online b) Website “Coolmate”: https://www.coolmate.me/

- Giao diện hiển thị danh sách và danh mục sản phẩm

- Tìm kiếm: Tìm kiếm các sản phẩm theo tên và loại sản phẩm

- Giao diện đẹp mắt, dễ dàng thao tác cho người sử dụng

Chưa xem được quá trình giao hàng c) Website “Yame”: https://yame.vn/

- Tìm kiếm và lọc sản phẩm: Tìm kiếm sản phẩm theo tên và phân loại sản phẩm theo bộ lọc

- Có tương đối các chức năng của một trang web bán hàng

- Giao diện còn rối mắt, chưa thân thiện với người dùng

- Chưa có chức năng thanh toán online

- Không xem được lịch sử đặt hàng d) Website “Shein”: https://www.shein.com.vn/?

Hình 4 Trang web của Shein

- Tìm kiếm và lọc sản phẩm: Tìm kiếm sản phẩm theo tên và phân loại sản phẩm theo bộ lộc

- Có tương đối đầy đủ tính năng của một trang web bán hàng

- Giao diện còn rối mắt, chưa thân thiện với người dùng

- Giao diện còn lỗi font trên một số trình duyệt

- Chưa có chức năng thanh toán online

- Không xem được lịch sử đặt hàng

Dựa trên khảo sát trên, ta có thể rút ra một số kết luận:

- Giao diện đẹp mắt và dễ sử dụng là một yếu tố quan trọng để tạo ra trải nghiệm mua hàng trực tuyến tốt

- Đa dạng sản phẩm là một ưu điểm quan trọng, vì khách hàng có nhiều lựa chọn

- Cung cấp thông tin về quá trình giao hàng là một yếu tố nên có

- Nên cung cấp ít một hệ thống thanh toán trực tuyến.

Kiến trúc của hệ thống

Hình 5 Kiến trúc của hệ thống

Danh sách các tác nhân của hệ thống

STT Tác nhân Chú giải

1 Guest Người dùng đã truy cập vào trang web nhưng chưa đăng nhập

2 User Người dùng đã đăng ký tài khoản và đã đăng nhập vào trang web

3 Admin Người quản trị hệ thống

Bảng 1 Danh sách tác nhân hệ thống

Danh sách yêu cầu

3.4.1 Danh sách yêu cầu chức năng

Danh sách yêu cầu chức năng nghiệp vụ

STT Yêu cầu Loại yêu cầu Chú giải

1 User có thể đăng nhập vào hệ thống Lưu trữ - User cần nhập email và mật khẩu

Guest có thể đăng ký tài khoản mới với vai trò

Lưu trữ - Guest cần nhập email, mật khẩu, số điện thoại, họ, tên

User có thể thay đổi mật khẩu khi quên (quên mật khẩu)

- Đường dẫn đổi mật khẩu được gửi đến email do Guest nhập

- User nhấn vào đường dẫn sẽ được chuyển đến trang đổi mật khẩu và sau đó User nhập mật khẩu mới

Guest và User có thể xem, tìm kiếm thông tin về sản phẩm

- Có thể tìm kiếm theo tên, theo danh mục

5 User chỉnh sửa thông tin của tài khoản mình

User có thể cập nhật các thông tin như: họ tên, địa chỉ, số điện thoại, …

User có thể xem, chọn size và màu của sản phẩm

Với mỗi size sẽ có màu và giá tương ứng User có thể click chọn size và màu của sản phẩm

7 User có thể thêm sản phẩm vào giỏ hàng Lưu trữ User thêm sản phẩm vào giỏ hàng với số lượng tùy chỉnh không nhỏ hơn 1

8 User có thể đặt hàng Lưu trữ

Sau khi đã thêm hàng vào giỏ, User chọn đặt hàng và thanh toán Online hoặc thanh toán khi nhận hàng

9 User có thể xoá sản phẩm ra khỏi giỏ hàng Lưu trữ User xoá sản phẩm không muốn mua ra khỏi giỏ hàng

10 User có thể bình luận về một sản phẩm Lưu trữ User bình luận trong một sản phẩm

11 User có thể xóa bình luận của bản thân Lưu trữ User xóa bình luận của bản thân

12 Admin có thể xem danh sách toàn bộ sản phẩm Kết xuất Admin xem toàn bộ danh sách sản phẩm hiện đang có

13 Admin có thể thêm sản phẩm mới Lưu trữ Admin tạo thêm một sản phẩm mới với option cho sản phẩm đó

Admin có thể chỉnh sửa, cập nhật thông tin cho sản phẩm

Lưu trữ Admin cập nhật thông tin cho một sản phẩm đã có

15 Admin có thể xóa một sản phẩm Lưu trữ Admin xóa sản phẩm

16 Admin có thể thêm mới một danh mục Lưu trữ Admin tạo mới một danh mục thể loại

Admin có thể chỉnh sửa, cập nhật thông tin cho danh mục

Lưu trữ Admin cập nhật tên cho danh mục đã có

18 Admin có thể xóa một danh mục Lưu trữ Admin xóa danh mục

19 Admin có thể cập nhật đơn hàng Lưu trữ Admin cập nhật trạng thái đơn hàng

20 Admin có thể xem thống kê doanh thu Kết xuất Admin xem thống kê về tổng số đơn hàng hay doanh thu theo ngày, tháng,

21 Admin có thể cấm/mở tài khoản của user Lưu trữ Admin cấm hoặc mở lại tài khoản cho user

22 Admin có thể cập nhật vai trò của user

Admin cập nhật vai trò (role) cho một tài khoản user thành admin

23 Admin có thể xem danh sách các user Kết xuất Admin xem danh sách toàn bộ tài khoản user hiện có

24 User có thể cập nhật số lượng trong giỏ hàng Lưu trữ User có thể cập nhật số lượng Item trong giỏ hàng

Bảng 2 Danh sách yêu cầu chức năng nghiệp vụ

Danh sách yêu cầu chức năng hệ thống

STT Yêu cầu Mô tả Chú giải

1 Người dùng có thể thay đổi mật khẩu

Bảng 3 Danh sách chức năng hệ thống

3.4.2 Danh sách yêu cầu phi chức năng

Danh sách yêu cầu phi chức năng

STT Yêu cầu Loại yêu cầu Chú giải

1 Thao tác trên website nhanh chóng, mượt mà Tính hiệu quả

2 Giao diện đơn giản, dễ sử dụng Tính tiện dụng

3 Sử dụng màu sắc hài hòa, dễ chịu Tính tiện dụng

4 Bảo mật thông tin User Tính bảo mật

5 Admin sẽ có một trang riêng để quản lý Tính tiện dụng và tính sẵn sàng

Bảng 4 Danh sách yêu cầu phi chức năng

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

Lược đồ Use case cho người dùng

Lược đồ Use case cho Admin quản lý hệ thống

Description Người dùng đăng nhập vào hệ thống

Pre-conditions Người dùng đã được tạo tài khoản trong hệ thống

- Nếu đăng nhập thành công: Người dùng được xác thực và hệ thống hiển thị nội dung trang chủ

- Nếu đăng nhập không thành công: Người dùng không truy cập được vào hệ thống

Use case bắt đầu khi người dùng cần thực hiện chức năng nào đó của hệ thống cần xác thực quyền truy cập

1 Hệ thống hiển thị các cách thức đăng nhập cho người dùng lựa chọn

2 Người dùng nhập tài khoản và mật khẩu

3 Hệ thống kiểm tra các trường đã được nhập đủ hay chưa

4 Hệ thống xác thực tài khoản và mật khẩu

5 Hệ thống xác định vai trò của người dùng

6 Hệ thống hiển thị thông báo Đăng nhập thành công

7 Hệ thống mở màn hình trang chủ và mở các chức năng được phép truy cập của người dùng

Nếu người dùng chọn Tài khoản đăng nhập không chính xác Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo Đăng nhập không thành công

2 Hệ thống yêu cầu người dùng đăng nhập lại

Description Khách vãng lai đăng ký vào hệ thống

- Nếu đăng ký thành công: Người dùng được xác thực và hệ thống hiển thị nội dung trang chủ

- Nếu đăng ký không thành công: Yêu cầu người dùng nhập lại thông tin

Use case bắt đầu khi người dùng cần thực hiện chức năng nào đó của hệ thống cần xác thực quyền truy cập

1 Hệ thống hiển thị các cách thức đăng nhập cho người dùng lựa chọn

2 Người dùng nhập thông tin khách hàng, Name đăng nhập và mật khẩu

3 Hệ thống kiểm tra thông tin đăng nhập và mật khẩu trên hệ thống

4 Hệ thống xác định vai trò của người dùng

5 Hệ thống hiển thị thông báo Đăng ký thành công

6 Hệ thống mở màn hình trang chủ và mở các chức năng được phép truy cập của người dùng

Nếu người dùng chọn Tài khoản đăng ký không hợp lệ hoặc thiếu trường thông tin Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo Đăng ký không thành công

2 Hệ thống yêu cầu người dùng nhập lại

3 Use case Chỉnh sửa thông tin tài khoản

Name Chỉnh sửa thông tin tài khoản

Description Người dùng chỉnh sửa thông tin tài khoản

Pre-conditions Đã thực hiện UC-001

- Nếu chỉnh sửa thông tin thành công: Hệ thống thông báo chỉnh sửa thông tin thành công

- Nếu đăng nhập không thành công: Hệ thống thông báo chỉnh sửa không thành công và quay về Trang chủ

Use case bắt đầu khi người dùng chọn chức năng Chỉnh sửa thông tin tài khoản

1 Hệ thống hiển thị các trường thông tin mà người dùng có thể chỉnh sửa

2 Người dùng chỉnh sửa thông tin tài khoản

3 Người dùng chọn nút Lưu

4 Hệ thống kiểm tra các trường thông tin đã hoàn thành

5 Hệ thống xác minh quyền của tài khoản

6 Hệ thống lưu thông tin chỉnh sửa tài khoản

7 Hệ thống hiển thị kết quả lưu dữ liệu

Nếu dữ liệu người dùng nhập vào không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo Chỉnh sửa thông thành công

2 Hệ thống yêu cầu người dùng nhập lại thông tin

3 Bước 2 ở Luồng cơ bản được thực hiện

Bảng 7 Usecase chỉnh sửa thông tin tài khoản

4 Use case Xem thông tin chi tiết sản phẩm

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

Description Người dùng xem chi tiết thông tin sản phẩm

Pre-conditions Người dùng truy cập thành công vào trang web

- Nếu xem thông tin thành công: Hệ thống hiển thị thông tin chi tiết của sản phẩm

- Nếu xem thông tin không thành công: Hệ thống thông báo không tìm thấy sản phẩm Quay về Trang chủ

Use case bắt đầu khi người dùng chọn sản phẩm cần xem thông tin chi tiết

1 Hệ thống kiểm tra thông tin sản phẩm đã chọn

2 Hệ thống truy vấn thông tin chi tiết của sản phẩm

3 Hệ thống hiển thị thông tin chi tiết của sản phẩm

Nếu sản phẩm được chọn không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo không tìm thấy trang

Bảng 8 Usecase xem thông tin chi tiết sản phẩm

5 Use case Tìm Kiếm sản phẩm

Name Tìm kiếm sản phẩm

Description Người dùng tra cứu sản phẩm trong danh mục

Pre-conditions Người dùng truy cập thành công vào trang web

- Nếu tìm kiếm thành công: Hệ thống hiển thị danh sản phẩm sản phẩm hợp lệ

- Nếu tìm kiếm không thành công: Hệ thống thông báo không tìm thấy sản phẩm

Use case bắt đầu khi người dùng chọn chức năng tìm kiếm sản phẩm

1 Người dùng nhập thông tin của sản phẩm cần tra cứu

2 Người dùng tuỳ chọn Bộ lọc và Sắp xếp cho kết quả tra cứu

3 Người dùng chọn biểu tượng Tra cứu

4 Hệ thống kiểm tra dữ liệu nhập vào

5 Hệ thống truy vấn các sản phẩm theo thông tin được nhập vào

6 Hệ thống hiển thị danh sản phẩm sản phẩm cần tra cứu

Nếu thông tin sản phẩm nhập vào không hợp lệ Những công việc sau được thực hiện:

1 Hiển thị thông báo không tìm thấy sản phẩm

Bảng 9 Usecase tìm kiếm sản phẩm

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

Name Thêm sản phẩm vào giỏ hàng

Description Người dùng thêm sản phẩm vào giỏ hàng

- Nếu thêm sản phẩm vào giỏ hàng thành công: Hệ thống thông báo thành công

- Nếu thêm sản phẩm vào giỏ không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn thêm sản phẩm vào giỏ hàng

1 Hệ thống kiểm tra thông tin sản phẩm được chọn

3 Hệ thống yêu cầu xác nhận thao tác

4 Người dùng chọn Xác nhận

5 Hệ thống lưu thông tin sản phẩm vào giỏ hàng

6 Hệ thống thông báo kết quả thêm sản phẩm vào giỏ hàng

Alternative Flow Ở bước 1 và 3, nếu sản phẩm được chọn đã tồn tại Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo lý do thêm không thành công

2 Hệ thống yêu cầu chọn sản phẩm khác

3 Quay lại bước 1 ở luồng cơ bản

Bảng 10 Usecase Thêm sản phẩm vào giỏ hàng

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

Name Xóa sản phẩm khỏi giỏ hàng

Short Description Người dùng xóa sản phẩm khỏi giỏ hàng

Pre-conditions Người dùng đã thực hiện UC-006

- Nếu xoá sản phẩm thành công: Hệ thống thông báo thành công

- Nếu xoá sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn biểu tượng Xóa sản phẩm:

1 Người dùng chọn Sản phẩm cần xóa khỏi giỏ hàng

2 Người dùng chọn biểu tượng Xóa

7 Hệ thống xoá thông tin Sản phẩm ở Giỏ hàng

8 Hệ thống thông báo kết quả xóa sản phẩm khỏi giỏ hàng

Alternative Flow Ở bước 1 và 3, nếu sản phẩm được chọn đã tồn tại Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo lý do thêm không thành công

2 Hệ thống yêu cầu chọn sản phẩm khác

3 Quay lại bước 1 ở luồng cơ bản

Bảng 11 Usecase Xóa sản phẩm khỏi giỏ

8 Use case Đặt đơn hàng

Short Description Người dùng có thể đặt đơn hàng sản phẩm trực tuyến

- Nếu đặt đơn hàng thành công: Hệ thống hiển thị kết quả thông báo thành công

- Nếu tìm kiếm không thành công: Hệ thống thông báo kết quả không thành công

Use case bắt đầu khi người dùng chọn Chức năng đặt mua

1 Người dùng sẽ hiển thị màn hình nhập thông tin thanh toán cần thiết

2 Người dùng nhập thông tin người dùng

3 Hệ thống kiểm tra thanh thông tin

4 Người dùng kiểm tra lại thông tin đơn hàng

5 Người dùng nhấn xác nhận

6 Hệ thống Xử lý đơn hàng

7 Người dùng chọn phương thức thanh toán

8 Hệ thống kiểm tra thanh toán

9 Hệ thống thông báo đơn hàng thành công

Nếu đặt hàng không thành công, những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo thanh toán không thành công

2 Hệ thống quay lại trang chủ

Bảng 12 Usecase Đặt đơn hàng

9 Use case Thêm bình luận Sản phẩm

Name Thêm bình luận Sản phẩm

Short Description Người dùng thêm các bình luận vào sản phẩm

- Nếu thêm bình luận thành công: Hệ thống thông báo thành công và hiển thị bình luận đó trong trang chi tiết sản phẩm

- Nếu thêm bình luận không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn Chức năng bình luận

1 Người dùng chọn sản phẩm muốn bình luận

2 Người dùng tiến hành soạn thảo văn bản bình luận

3 Người dùng tiến hành đăng tải

4 Hệ thống tiến hành kiểm tra thông tin sản phẩm đăng tải bình luận

5 Hệ thống kiểm tra nội dung bình luận

6 Hệ thống tiến hành lưu trữ bình luận cho sản phẩm

7 Hệ thống thông báo thành công và hiển thị bình luận đã thêm

Nếu thêm bình luận không thành công, những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo thêm bình luận không thành công

2 Hệ thống quay lại bước 1

Bảng 13 Usecase Thêm bình luận cho sản phẩm

10 Use case Xóa bình luận

Name Xóa bình luận sản phẩm

Short Description Người dùng Xóa các bình luận của mình ở sản phẩm

- Nếu thêm Xóa bình luận thành công: Hệ thống thông báo thành công

- Nếu thêm Xóa bình luận không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn biểu tượng xóa

1 Người dùng chọn Bình luận cần xóa

2 Người dùng chọn biểu tượng xóa dưới bình luận

3 Hệ thống kiểm tra thông tin bình luận

6 Hệ thống Xóa bình luận ở cơ sở dữ liệu

7 Hệ thống thông báo kết quả xóa bình luận thành công

Nếu xóa bình luận không thành công, những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo thêm bình luận không thành công

2 Hệ thống quay lại bước 1

Bảng 14 Usecase Xóa bình luận

Short Description Người dùng đăng xuất ra khỏi hệ thống

Post-conditions Nếu đăng xuất thành công: Người dùng thoát khỏi hệ thống

Use case bắt đầu khi người dùng muốn thoát khỏi hệ thống:

1 Hệ thống hiển thị các xác nhận thoát khỏi hệ thống

2 Hệ thống xóa đi token của người dùng

3 Hệ thống hiển thị trang chủ cho người dùng

12 Use case Thêm mới sản phẩm

Name Thêm mới sản phẩm

Short Description Người dùng thêm sản phẩm vào danh sách sản phẩm

Pre-conditions Người dùng đã đăng nhập vào hệ thống với quyền admin

- Nếu thêm sản phẩm thành công: Hệ thống thông báo thành công

- Nếu thêm sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Main Flow Use case bắt đầu khi người dùng chọn chức năng Thêm sản phẩm vào danh sách sản phẩm

1 Hệ thống hiển thị các trường thông tin cần nhập và nơi tải ảnh sản phẩm lên

2 Người dùng nhập thông tin và tải file sản phẩm

5 Hệ thống kiểm tra thông tin sản phẩm được nhập

6 Hệ thống hiển thị thông tin đã nhập

7 Hệ thống lưu thông tin sản phẩm và tiến hành tải sản phẩm lên danh sách sản phẩm

8 Hệ thống thông báo kết quả thêm sản phẩm vào danh sách sản phẩm

Alternative Flow Ở bước 2, nếu người dùng nhập thông tin không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo thông tin không hợp lệ

2 Hệ thống yêu cầu nhập lại thông tin Quay lại bước 1 ở luồng cơ bản

Bảng 16 Usecase Thêm mới sản phẩm

13 Use case Sửa thông tin sản phẩm

Name Sửa thông tin sản phẩm

Short Description Người dùng sửa thông tin sản phẩm

Pre-conditions Người dùng đã đăng nhập vào hệ thống

- Nếu thêm sản phẩm vào danh sách sản phẩm thành công: Hệ thống thông báo thành công

- Nếu thêm sản phẩm vào danh sách không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn chức năng Sửa sản phẩm

1 Hệ thống hiển thị các trường thông tin có thể sửa

2 Người dùng nhập thông tin cần chỉnh sửa

5 Hệ thống kiểm tra thông tin sản phẩm được nhập

6 Hệ thống hiển thị thông tin đã nhập

7 Hệ thống lưu thông tin sản phẩm và tiến hành tải lại thông tin sản phẩm lên danh sách sản phẩm

8 Hệ thống thông báo kết quả sửa thông tin sản phẩm

Alternative Flow Ở bước 2, nếu người dùng nhập thông tin không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo thông tin không hợp lệ

Bảng 17 Usecase Chỉnh sửa thông tin sản phẩm

14 Use case Xóa sản phẩm

Short Description Người dùng xóa sản phẩm khỏi danh sách sản phẩm

- Nếu xoá sản phẩm thành công: Hệ thống thông báo thành công

- Nếu xoá sản phẩm không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng chọn biểu tượng Xóa sản phẩm:

1 Người dùng chọn Sản phẩm cần xoá

2 Người dùng chọn biểu tượng Xóa

7 Hệ thống xoá thông tin Sản phẩm khỏi danh sách sản phẩm

8 Hệ thống thông báo kết quả xóa sản phẩm khỏi danh sách sản phẩm

Alternative Flow Ở bước 1 và 3, nếu Sản phẩm được chọn không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo lý do xoá không thành công

2 Hệ thống yêu cầu chọn Sản phẩm khác Quay lại bước 1 ở luồng cơ bản

Bảng 18 Usecase xóa sản phẩm

15 Use case Chỉnh sửa thông tin người dùng

Name Chỉnh sửa thông tin người dùng

Short Description Người dùng chỉnh sửa thông tin vai trò (Role) cho tài khoản người dùng

- Nếu chỉnh sửa thành công: Hệ thống thông báo thành công

- Nếu chỉnh sửa không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng tại trang quản lý người dùng và cần chỉnh sửa thông tin tài khoản người dùng

1 Người dùng chọn tài khoản cần chỉnh sửa

2 Người dùng tiền hành chỉnh sửa trên các trường được phép chỉnh sửa

3 Người dùng chọn nút Chỉnh sửa

4 Hệ thống xác minh quyền của tài khoản và thông tin được chỉnh sửa

7 Hệ thống thay đổi thông tin của người dùng

8 Hệ thống thông báo kết quả tài khoản chỉnh sửa

Alternative Flow Ở bước 4, nếu thông tin được nhập không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo lý do chỉnh sửa không thành công

Bảng 19 Usecase chỉnh sửa vai trò user

16 Use case Cấm tài khoản người dùng

Name Cấm tài khoản người dùng

Short Description Người dùng muốn cấm tài khoản người dùng

- Nếu cấm thành công: Hệ thống thông báo thành công

- Nếu cấm không thành công: Hệ thống thông báo không thành công Yêu cầu người người dùng thực hiện lại

Use case bắt đầu khi người dùng tại trang quản lý người dùng và cần cấm tài khoản người dùng

1 Người dùng chọn tài khoản cần cấm

2 Người dùng chọn nút Cấm

3 Người dùng Nhập lý do cấm (nếu có)

7 Hệ thống cấm tài khoản của người dùng

8 Hệ thống thông báo kết quả thực hiện

Bảng 20 Usecase cấm tài khoản user

17 Use case Thêm mới loại sản phẩm

Name Thêm mới loại sản phẩm

Short Description Admin thêm một thể loại sản phẩm

Pre-conditions Phải đăng nhập trang web với tài khoản admin

- Nếu thêm thành công: Hệ thống hiển thị thể loại mới đó trong danh sách các thể loại

- Nếu thêm không thành công: Hệ thống thông báo không thành công

Usecase bắt đầu khi người dùng chọn chức năng thêm mới thể loại sản phẩm:

1 Hệ thống hiển thị các trường thông tin cần nhập cho thể loại mới

2 Người dùng nhập các trường thông tin

4 Hệ thống xác minh quyền tài khoản

5 Hệ thống kiểm tra thông tin các trường được nhập

6 Hệ thống lưu lại thông tin thể loại mới

7 Hệ thống hiển thị thể loại mới trong danh sách các thể loại

Alternative Flow Ở bước 5, nếu hệ thống kiểm tra thông tin không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống hiển thị thông báo yêu cầu nhập lại thông tin

Bảng 21 Usecase thêm mới danh mục

18 Use case Chỉnh sửa thể loại sản phẩm

Name Chỉnh sửa thể loại sản phẩm

Short Description Chỉnh sửa tên của một thể loại sản phẩm

- Nếu chỉnh sửa thành công: Hệ thống thông báo thành công

- Nếu thêm không thành công: Hệ thống thông báo không thành công

Usecase bắt đầu khi người dùng chọn chức năng chỉnh sửa thể loại sản phẩm:

1 Người dùng chọn thể loại muốn chỉnh sửa

3 Người dùng nhập các trường thông tin cần thiết

6 Hệ thống kiểm tra thông tin các trường được nhập

7 Hệ thống lưu lại thông tin được chỉnh sửa

8 Hệ thống hiển thị thông báo kết quả chỉnh sửa

1 Hệ thống hiển thị thông báo yêu cầu nhập lại thông tin

Bảng 22 Usecase chỉnh sửa danh mục

19 Use case Xóa thể loại sản phẩm

Name Xóa thể loại sản phẩm

Short Description Xóa một thể loại sản phẩm

- Nếu xóa thành công: Hệ thống thông báo thành công

- Nếu xóa không thành công: Hệ thống thông báo không thành công

Usecase bắt đầu khi người dùng chọn chức năng Xóa thể loại sản phẩm:

1 Người dùng chọn thể loại muốn xóa

6 Hệ thống xóa thông tin thể loại được chọn

7 Hệ thống hiển thị thông báo kết quả xóa thể loại

Alternative Flow Ở bước 4, nếu người dùng không chọn Xác nhận Những công việc sau được thực hiện:

Bảng 23 Usecase xoá danh mục

20 Use case Cập nhật đơn hàng

Name Cập nhật đơn hàng

Short Description Admin cập nhật trạng thái của một đơn hàng

- Nếu cập nhật thành công: Hệ thống thông báo thành công

- Nếu cập nhật không thành công: Hệ thống thông báo không thành công

Usecase bắt đầu khi người dùng cập nhật trạng thái đơn hàng:

1 Người dùng chọn đơn hàng cần cập nhật trạng thái

2 Người dùng chọn trạng thái cho đơn hàng

3 Người dùng chọn Cập nhật

5 Hệ thống kiểm tra thông tin đơn hàng được cập nhật

6 Hệ thống lưu lại trạng thái mới của đơn hàng đó

7 Hệ thống hiển thị kết quả cập nhật đơn hàng

1 Hệ thống hiển thị thông báo cập nhật thất bại

Bảng 24 Usecase cập nhật trạng thái đơn hàng

21 Use case Thống kê tổng số đơn hàng

Name Thống kê tổng số đơn hàng

Short Description Admin thống kê số lượng đơn hàng theo ngày/tháng/năm/tất cả đến hiện tại

- Nếu thống kê thành công: Hệ thống hiển thị số lượng đơn hàng theo tùy chọn

- Nếu thống kê không thành công: Hệ thống thông báo không thành công

Usecase bắt đầu khi người dùng truy cập chức năng thống kê đơn hàng:

1 Người dùng truy cập chức năng thống kê

2 Người dùng chọn ngày tháng năm theo ý muốn

5 Hệ thống kiểm tra thông tin người dùng nhập

6 Hệ thống lọc đơn hàng theo thông tin người dùng nhập

7 Hệ thống hiển thị kết quả thống kê đơn hàng

1 Hệ thống hiển thị thông báo yêu cầu nhập lại ngày tháng năm

Bảng 25 Usecase thống kê tổng số đơn hàng

22 Use case Thanh toán online

Short Description User đặt hàng và thanh toán online thông qua VNPAY

- Nếu thanh toán thành công: Hệ thống hiển thị thông tin thanh toán thành công

- Nếu thống kê không thành công: Hệ thống hiển thị thông tin thanh toán không thành công

Usecase bắt đầu khi người dùng nhấn “thanh toán đơn hàng”:

1 Hệ thống chuyển đến trang thanh toán của VNPAY

2 Người dùng chọn thanh toán qua ngân hàng

3 Người dùng chọn ngân hàng của tài khoản mình

4 Người dùng nhập các trường thông tin cần thiết

5 Hệ thống VNPAY kiểm tra thông tin người dùng nhập

6 Hệ thống VNPAY xác nhận thanh toán

7 Hệ thống hiển thị kết quả thanh toán đơn hàng

1 Hệ thống hiển thị thông báo yêu cầu nhập lại

Bảng 26 Use case Thanh toán online

THIẾT KẾ HỆ THỐNG

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

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

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

4.1.3 Mô tả chi tiết lược đồ lớp

STT Thuộc tính Kiểu Mô tả

1 id bigint Mã người dùng

3 phone string Số điện thoại

6 Password string Mật khẩu đã được encrypt

7 name string Tên người dùng

9 Role string Vai trò của người dùng (USER hoặc ADMIN)

1 id bigint Mã danh mục

2 name string Tên danh mục

3 deleted bit Danh mục bị xóa hay chưa

1 id bigint Mã danh mục con

2 name string Tên danh mục con

3 deleted bit Danh mục con bị xóa hay chưa

4 Category_id bigint Mã danh mục cha

1 id bigint Mã bình luận

3 deleted bit Đánh dấu bị xóa hay chưa

4 product_id bigint Mã sản phẩm

5 Create_time TimeStamp Thời gian được tạo

6 User_id bigint Mã người dùng

1 id bigint Mã bình luận con

4 comment_id bigint Mã bình luận cha

5 Create_time TimeStamp Thời gian được tạo

6 User_id bigint Mã người dùng

1 id bigint Mã sản phẩm

2 description string Mô tả của sản phẩm

4 category_id bigint Mã danh mục

5 subcategory_id bigint Mã danh mục con

6 name string Tên sản phẩm

7 Is_feature bit Đánh dấu có là sản phẩm phổ biến hay không

8 video string Đường dẫn video (nếu có)

2 name string Tên của option

5 price bigDecimal Giá của option

1 id bigint Mã hình ảnh

2 name string Tên màu sắc

1 id bigint Mã hình ảnh

2 url_image string Đường dẫn của hình ảnh

5 color_id bigint Mã màu sắc

2 inventory int Số lượng item trong kho

4 Product_option_id bigint Mã option

5 color_id bigint Mã màu sắc

1 id bigint Mã giỏ hàng

2 quantity int Số lượng của 1 item

3 item_id bigint Mã item

4 user_id bigint Mã người dùng

1 id bigint Mã đơn hàng

2 createTime timestamp Thời gian được tạo

4 status string Trạng thái đơn hàng

5 user_id bigint Mã người dùng

1 id bigint Mã chi tiết đơn hàng

2 Delivery_address string Địa chỉ nhận hàng

3 Delivery_date timestamp Ngày giao hàng

5 Receiver_name string Tên người nhận

6 Receiver_phone string Số điện thoại người nhận

7 Total_price bigDecimal Tổng giá trị của đơn hàng

8 Order_Id bigint Mã đơn hàng

1 id bigint Mã item trong đơn hàng

2 quantity int Số lượng của 1 item trong đơn

3 price bigDecimal Tổng giá của item = quantity x Item price

4 Item_id bigint Mã Item

8 Order_Id bigint Mã đơn hàng

Thiết kế xử lý

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

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

4.2.3 Chức năng Xem sản phẩm theo danh mục

Chức năng xem sản phẩm theo danh mục:

Hình 12 Lược đồ tuần tự của Xem sản phẩm

4.2.4 Chức năng Xem chi tiết sản phẩm

Chức năng xem chi tiết sản phẩm:

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

4.2.5 Chức năng xem thông tin tài khoản

Chức năng xem thông tin tài khoản:

Hình 14 Lược đồ tuần tự của xem thông tin tài khoản

4.2.6 Chức năng Chỉnh sửa thông tin

Chức năng chỉnh sửa thông tin:

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

4.2.7 Chức năng Thêm sản phẩm vào giỏ hàng

Chức năng thêm sản phẩm vào giỏ hàng:

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

4.2.8 Chức năng chỉnh sửa số lượng trong giỏ hàng

Chức năng chỉnh sửa số lượng trong giỏ hàng:

Hình 17 Lược đồ tuần tự của chỉnh sửa số lượng trong giỏ

4.2.9 Chức năng Xóa sản phẩm khỏi giỏ hàng

Chức năng xóa sản phẩm khỏi giỏ hàng:

Hình 18 Lược đồ tuần tự của Xóa sản phẩm khỏi giỏ

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

Hình 20 Lược đồ tuần tự của Tạo bình luận

4.2.12 Chức năng Xóa bình luận của bản thân

Chức năng xóa bình luận của bản thân:

Hình 21 Lược đồ tuần tự của Xóa bình luận

4.2.12 Chức năng Thêm sản phẩm

Chức năng thêm sản phẩm:

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

4.2.13 Chức năng Cập nhật thông tin sản phẩm

Chức năng cập nhật thông tin sản phẩm:

Hình 23 Lược đồ tuần tự của Cập nhật thông tin sản phẩm

4.2.14 Chức năng Xóa Sản phẩm

Chức năng xóa sản phẩm:

Hình 24 Lược đồ tuần tự của Xóa sản phẩm

4.2.15 Chức năng Thêm mới danh mục

Chức năng thêm mới danh mục:

Hình 25 Lược đồ tuần tự của thêm mới danh mục

4.2.16 Chức năng Chỉnh sửa tên danh mục

Chức năng chỉnh sửa tên danh mục:

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

4.2.17 Chức năng Xoá danh mục

Chức năng xóa danh mục:

Hình 27 Lược đồ tuần tự của Xoá danh mục

4.2.18 Chức năng Cập nhật trạng thái đơn hàng

Chức năng cập nhật trạng thái đơn hàng:

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

4.2.19 Chức năng xem danh sách người dùng

Chức năng xem danh sách người dùng:

Hình 29 Lược đồ tuần tự của xem danh sách người dùng

4.2.20 Chức năng Cấm/gỡ cấm người dùng

Chức năng cấm/ gỡ cấm người dùng:

Hình 30 Lược đồ tuần tự của Cấm người dùng

4.2.21 Chức năng Xem danh sách tất cả đơn hàng

Chức năng xem danh sách tất cả đơn hàng:

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

4.2.22 Chức năng Xem danh sách tất cả sản phẩm

Chức năng xem danh sách tất cả sản phẩm:

Hình 32 Lược đồ tuần tự của Xem danh sách sản phẩm

4.2.23 Chức năng Xem danh sách tất cả danh mục

Chức năng xem danh sách tất cả danh mục

Hình 33 Lược đồ tuần tự của xem danh sách danh mục

Thiết kế giao diện

4.3.1 Giao diện phía người dùng

STT Tên màn hình Mô tả

SCU001 Header Thanh header hiển thị ở mọi trang trên website

SCU002 Home Trang chủ của website phía User

SCU003 Login Trang đăng nhập

SCU004 Register Trang đăng ký

SCU005 Product Trang danh sách sản phẩm

SCU006 Product detail Trang chi tiết sản phẩm

SCU007 Cart page Trang giỏ hàng

SCU008 Order history Page Trang danh sách đơn hàng đã đặt

SCU009 Profile Trang thông tin tài khoản của người dùng

Bảng 41 Các Giao diện phía người dùng a) SCU001 Thanh Header:

STT Tên Định dạng Tham chiếu đến Hành động

1 Icon Image Link Home Page Khi click, sẽ di chuyển đến màn hình Home

2 Home button Link Home Page Khi click, sẽ di chuyển đến màn hình Home

3 About Link About Page Khi click, sẽ di chuyển đến trang

4 Men Link Men’s Product Khi click, sẽ di chuyển đến trang sản phẩm cho đàn ông

5 Women Link Women’s Product Khi click, sẽ di chuyển đến trang sản phẩm cho phụ nữ

Khi click, sẽ di chuyển đến trang sản phẩm cho trẻ em

7 Cart Link Cart Page Khi click, sẽ di chuyển đến trang giỏ hàng

Button Profile Page Khi click, sẽ di chuyển đến trang thông tin cá nhân

Khi click, sẽ chuyển đến trang login (hoặc tiến hành đăng xuất người dùng)

Bảng 42 Thành phần thanh header b) SCU002 Home:

Hình 36 Feature product trên Home page

1 Shop Now Button Product page Truy vấn theo kết quả được nhập vào ô input

Khi click, sẽ chuyển đến trang chi tiết sản phẩm của sản phẩm #1

Bảng 43 Thành phần trang Home c) SCU003 Login:

3 Đăng ký Link Register page Nhấn vào sẽ chuyển đến trang đăng ký

4 Nút đăng nhập Button Nhấn vào sẽ thực thi việc đăng nhập

Bảng 44 Thành phần trang login d) SCU004 Register:

4 Xác nhận mật khẩu Input

6 Đăng nhập Link Nhấn vào sẽ chuyển sang trang đăng nhập

7 Đăng ký Button Nhấn vào sẽ thực thi việc đăng ký

Bảng 45 Thành phần trang Register e) SCU005 Product:

1 Search Input Input Truy vấn theo kết quả được nhập vào ô input

List Buttons Khi click sẽ thực hiện lọc sản phẩm theo danh mục được chọn

3 Colors List Buttons Khi click sẽ thực hiện lọc sản phẩm theo màu được chọn

4 Price Range Khi kéo sẽ lọc sản phẩm theo giá được kéo

5 Clear Filter Button Khi click sẽ bỏ tất cả lọc và hiển thị tất cả các sản phẩm

6 Item Display Button Khi click sẽ đổi kiểu trưng bày danh sách sản phẩm thành ít chi tiết hơn

Khi click sẽ đổi kiểu trưng bày danh sách sản phẩm thành chi tiết hơn

8 Sort Sort Input Khi click sẽ hiện ra các lựa chọn để sắp xếp danh sách sản phẩm

9 Product Link Product detail page

Khi click sẽ chuyển đến trang chi tiết của sản phẩm đó

Bảng 46 Thành phần trang product f) SCU006 Product Detail:

3 Giảm số lượng Button Khi nhấn vào sẽ giảm số lượng sản phẩm

4 Tăng số lượng Button Khi nhấn vào sẽ tăng số lượng sản phẩm

5 Thêm vào giỏ hàng Button

Khi nhấn vào sẽ thực hiện hành động thêm sản phẩm đã chọn vào giỏ hàng

6 Quay về Button Nhấn vào sẽ chuyển sang trang đăng nhập

7 Tham chiếu địa chỉ Link Nhấn vào sẽ chuyển sang chủ

8 Color Button Khi click sẽ chọn màu cho sản phẩm

Bảng 47 Thành phần trang Product detail g) SCU007 Cart page:

1 Shopping Button Product page Khi click sẽ chuyển về trang sản phẩm

2 Decrease Button Giảm số lượng của Item đi 1

3 Increase Button Tăng số lượng của Item lên 1

4 Remove Button Khi click sẽ xoá sản phẩm khỏi giỏ hàng

5 Update Cart Button Khi click, chuyển đến màn hình

6 Order List Button Khi click sẽ chuyển hướng đến trang đơn hàng

Name Input Nhập tên người nhận

8 Receiver phone Input Nhập số điện thoại người nhận

9 Address Input Nhập địa chỉ

10 Checkout Button Khi click sẽ tiến hành đặt đơn hàng

Bản 48 Thành phần trang Cart h) SCU008 Order Page:

Hình 42 SCU008 Orders page i) SCU009 Profile page:

Information Button Form Update Khi click sẽ hiện pop-up form chỉnh sửa thông tin tài khoản

Password Button Khi click sẽ hiện form đổi mật khẩu tài khoản

Bảng 49 Thành phần trang Profile

STT Tên màn hình Mô tả

SCA001 Login Màn hình dành cho Admin đăng nhập vào hệ thống website quản lý

SCA002 Navbar Thanh điều hướng ngang và dọc đều có ở mọi trang trong hệ thống quản lý

SCA003 DashBoard Trang dashboard hiển thị số liệu thống kê của hệ thống SCA004 Manage Customers

Màn hình hiển thị danh sách người dùng với các thông tin cơ bản và Admin có thể kích hoạt hoặc chặn tài khoản người dùng

Màn hình quản lý các sản phẩm, cho phép Admin xem danh sách sản phẩm, thêm sản phẩm và chỉnh sửa sản phẩm

SCA006 Create product Màn hình phụ giúp Admin tạo mới sản phẩm

SCA007 Update product Màn hình phụ hỗ trợ Admin cập nhật các sản phẩm hiển thị trong danh sách

Màn hình quản lý các danh mục, cho phép Admin xem danh sách danh mục, thêm, chỉnh sửa và xóa danh mục

SCA009 Create category Màn hình phụ giúp Admin tạo mới danh mục

SCA010 Update category Màn hình phụ giúp Admin cập nhật lại các danh mục có trong danh sách

SCA011 Manage Order Màn hình quản lý các đơn hàng cho phép Admin xem danh sách đơn hàng và cập nhật các đơn hàng

Bảng 50 Các giao diện phía Admin a) SCA001 Login

1 Receiver account Input Nhập email tài khoản của admin

2 Receiver password Input Nhập mật khẩu của admin

3 Login Button Manage Product page

Khi click, sẽ kiểm tra tài khoản và mật khẩu được nhập Nếu tài khoản chính xác thì sẽ chuyển đến trang Dashboard Ngược lại sẽ báo lỗi

Bảng 51 Thành phần trang Login b) SCA002 Navbar & Sidebar

1 Button Khi click, thanh Nav sẽ thu lại

Khi click, sẽ di chuyển đến màn hình Dashboard

Khi click, sẽ di chuyển đến màn hình Customer

Khi click, sẽ di chuyển đến màn hình Category

5 Order Link Manage Order Khi click, sẽ di chuyển đến màn hình Order

Khi click, sẽ di chuyển đến màn hình Products

Bảng 53 Thành phần thanh Nav c) SCA003-Dashboard

Khi trỏ chuột đến từng phần của biểu đồ, sẽ hiển thị số lượng từng đơn hàng

2 Số lượng sản phẩm Text

3 Số lượng danh mục Text

Số lượng tài khoản User đang hoạt động

Số lượng tài khoản User đang bị cấm

6 Danh sách đơn hàng gần đây Text

Bảng 54 Thành phần trang DashBoard d) SCA004 Manage Customer

1 Role Button Khi click, sẽ chuyển role của User thành Admin và ngược lại

2 Trạng thái Button Khi click, sẽ thực hiện cấm hoặc mở cấm người dùng

3 Số dòng trên trang Select

Khi click sẽ hiện số lượng dòng cho user chọn, muốn hiển thị trên 1 trang

4 Chuyển trang Button Khi click, sẽ chuyển đến trang tiếp theo (nếu có)

Bảng 55 Thành phần Manage Customer e) SCA005 Manage Product

1 Columns Button Khi click sẽ hiển thị danh sách các cột cho user chọn để hiển thị

2 Filters Button Khi click sẽ hiển thị các lựa chọn filter cho user chọn

3 Density Button Khi click sẽ hiển thị các cách hiển thị danh sách

Khi click sẽ hiện cửa sổ cho user chọn nơi lưu file excel của sản phẩm

5 Nút tạo sản phẩm Button Create

Khi click sẽ hiển thị Form tạo sản phẩm

6 Nút cập nhật sản phẩm Button Update

Khi click sẽ hiển thị Form cập nhật sản phẩm

7 Xoá sản phẩm Button Khi click sẽ thực hiện xoá sản phẩm

Bảng 56 Thành phần trang Manage Product f) SCA006 Create product’s form

Hình 53 SCA008 Form Create product

STT Tên Định dạng Hành động

1 Receiver tên sản phẩm Input Nhập tên sản phẩm

2 Receiver mô tả sản phẩm Input Nhập mô tả sản phẩm

3 Lựa chọn danh mục Select Lựa chọn danh mục trong danh sách

4 Lựa chọn danh mục phụ Select

Lựa chọn danh mục phụ trong danh sách và danh sách này tương ứng với danh mục chính được chọn

5 Receiver tên option Input Nhập tên option

6 Receiver giá option Input Nhập giá option

7 Lựa chọn màu cho item Select Lựa chọn màu của item

8 Receiver số lượng item Input Nhập số lượng item

9 Nút thêm item Button Khi click, item sẽ được thêm vào option

10 Receiver địa chỉ hình ảnh Input Nhập địa chỉ hình ảnh cho màu item tương ứng

11 Nút hủy tạo sản phẩm Button Khi click, Form create sẽ bị đóng

12 Nút tạo sản phẩm Button Khi click, sẽ tạo sản phẩm với những thông tin được cung cấp

13 Hint Khi trỏ chuột sẽ hiện gợi ý cho user

Bảng 57 Thành phần Form create product g) SCA007 Form Update Product

Hình 54 SCA009 Update product Form

STT Tên Định dạng Hành động

1 Receiver tên sản phẩm Input Nhập tên sản phẩm

2 Receiver mô tả sản phẩm Input Nhập mô tả sản phẩm

3 Receiver địa chỉ hình ảnh Input Nhập địa chỉ hình ảnh cho màu item tương ứng

4 Nút hủy cập nhật sản phẩm Button Khi click, Form update sẽ bị đóng

5 Nút cập nhật sản phẩm Button Khi click, sẽ cập nhật sản phẩm với những thông tin được cung cấp

Bảng 58 Thành phần Form update product h) SCA008 Manage Category, SCA009 Form Create Category, SCA010 Form Update Category

Khi click sẽ hiện cửa sổ cho user chọn nơi lưu file excel của danh mục

5 Nút tạo danh mục Button Create category

Khi click sẽ hiển thị Form tạo danh mục

6 Nút cập nhật danh mục Button Update category

Khi click sẽ hiển thị Form cập nhật danh mục

7 Xoá danh mục Button Khi click sẽ thực hiện xoá danh mục

10 Category’s name Input Nhập tên của danh mục mới

11 Category’s group Input Chọn nhóm danh mục mà nó thuộc về

12 Create Button Khi click tiến hành tạo mới danh mục

Khi click sẽ huỷ bỏ trường đã nhập và quay lại trang danh sách danh mục

14 Category’s name Input Nhập tên mới muốn cập nhật của danh mục

15 Update Button Khi click sẽ tiến hành lưu tên của danh mục đã chỉnh sửa

Khi click sẽ huỷ bỏ trường đã nhập và quay lại trang danh sách danh mục

Bảng 59 Thành phần trang Manage Category i) SCA011 Manage orders

4 Export Button Khi click sẽ hiện cửa sổ cho user chọn nơi lưu file excel của đơn hàng

5 Cập nhật trạng thái thanh toán Button Khi click sẽ tiến hành cập nhật trạng thái thành “Paid” hoặc “Unpaid”

6 Cập nhật trạng thái đơn hàng Button Khi click sẽ hiển thị danh sách trạng thái đơn hàng cho user chọn

Bảng 60 Thành phần trang Manage Orders

CÀI ĐẶT VÀ KIỂM THỬ

Yêu cầu hệ thống

Ứng dụng cần có các yêu cầu sau để có thể chạy được:

- Visual Studio Code (VS Code)

Các bước cài đặt

Bước 1: Tải hoặc clone project từ GitLab:

- Backend: https://gitlab.com/xuanbachvt1/dambishop.git

- Frontend (Client): https://gitlab.com/giangnguyen010801/dambishop_fe_client_final.git

- Frontend (Admin): https://gitlab.com/giangnguyen010801/dambishop_fe_admin_final.git

- Sau khi tải phần Backend về hãy dùng IntelliJ IDEA để mở folder project

- Đợi các thư viện của project được tải hoàn tất

- Nhấn chọn “maven” ở thanh công cụ bên phải mở mở maven

- Chọn maven > Plugins > spring-boot > double click vào spring-boot:run

Bước 3: Khởi chạy Frontend (client):

- Sau khi tải phần Frontend cho client về, nhấn chuột phải chọn “Open in Terminal” để màn hình Terminal hiện ra và nhập lệnh “code ” để mở phần Frontend cho Client trong VS Code

- Tiếp theo, nhấn tổ hợp phím “Ctrl + `” để terminal hiện ra trong VS Code và nhập lệnh “npm install” để tải các thư viện cần thiết cho phần Frontend (client)

- Cuối cùng nhập lệnh “npm run dev” ở terminal của VS Code để chạy phần Frontend (client)

Bước 4: Khởi chạy Frontend (Admin):

- Sau khi tải phần Frontend cho Admin về, nhấn chuột phải chọn “Open in Terminal” để màn hình Terminal hiện ra và nhập lệnh “code ” để mở phần Frontend cho Admin trong VS Code

- Kế tiếp, nhấn tổ hợp phím “Ctrl + `” để màn hình terminal của VS Code hiện ra và nhập lệnh “npm install” để tải các thư viện cần thiết cho phần Frontend (Admin)

- Tiếp theo, nhập lệnh “npm start” ở terminal của VS Code để chạy phần Frontend (Admin).

Kiểm thử

Dự án sẽ sử dụng phương pháp kiểm thử hộp đen để tiến hành kiểm thử các chức năng chính của trang web Bởi sự tiện lợi về mặt thời gian của phương pháp rất phù hợp với việc phát triển ứng dụng trong thời gian ngắn

5.3.1 Kiểm thử chức năng phía người dùng (User, Guest)

STT Mô tả Các bước thực hiện Kết quả mong đợi Kết quả thực tế Trạng thái

1 Kiểm thử chức năng đăng ký tài khoản

- Sau đó điền các thông tin cần thiết như tên, email, mật khẩu, giới tính, số điện thoại, địa chỉ

- Chọn “Register” Đăng ký thành công

2 Kiểm thử chức năng đăng nhập

- Nhấn chọn “Login” trên thanh Nav

- Điền email và mật khẩu

- Chọn “Login” Đăng nhập thành công

3 Kiểm thử chức năng chỉnh sửa

- Chọn “Profile” ở trên thanh Nav

Như mong đợi Đạt thông tin tài khoản

- Nhập các trường thông tin cần thiết

4 Kiểm thử chức năng thêm sản phẩm vào giỏ hàng

- Tại trang chi tiết sản phẩm

- Click chọn “Add to Cart”

5 Kiểm thử chức năng xóa sản phẩm khỏi giỏ hàng

Sản phẩm biến mất khỏi giỏ hàng và tổng tiền đơn hàng giảm đúng bằng lượng sản phẩm vừa được xoá

6 Kiểm thử chức năng đặt hàng

- Nhập đầy đủ các trường thông tin cần thiết cho người nhận

Thông báo đặt hàng thành công và đơn hàng ở trạng thái

7 Kiểm thử chức năng xem lịch sử đơn đặt hàng

- Click nút “Your List Order”

Chuyển hướng đến trang danh sách đơn hàng đã đặt

8 Kiểm thử chức năng lọc sản phẩm theo màu

- Click chọn 1 màu tại thanh menu bên trái

Hiển thị sản phẩm được lọc theo màu được chọn

9 Kiểm thử chức năng lọc sản phẩm theo danh mục

- Click chọn 1 danh mục tại thanh menu bên trái

Hiển thị sản phẩm thuộc danh mục được chọn

10 Kiểm thử chức năng thanh toán

- Nhập đầy đủ các trường thông tin cần thiết cho người nhận

Chuyển hướng đến trang thông báo thanh toán thành công

Tạo mới đơn hàng thành công

- Kiểm tra thông tin giá trị thanh toán với giá trị đơn hàng

- Nhập thông tin thẻ ngân hàng dành cho việc Kiểm thử:

Bảng 63 Kiểm thử chức năng phía người dùng

5.3.2 Kiểm thử chức năng phía người quản trị hệ thống (Admin)

STT Mô tả Các bước thực hiện Kết quả mong đợi

Kết quả thực tế Trạng thái

1 Kiểm thử chức năng thêm sản phẩm

Tại trang Quản lý sản phẩm

- Nhập các trường thông tin cần thiết cho product mới như: tên, size, màu, giá, link ảnh, số lượng trong kho

Hệ thống thông báo tạo sản phẩm thành công

2 Kiểm thử chức năng chỉnh sửa thông tin sản phẩm

Tại trang Quản lý sản phẩm

- Click “Update Product” tại sản phẩm muốn cập nhật

- Nhập các trường thông tin mới cần thiết cho product như: tên, size, màu, giá, link ảnh, số lượng trong kho

Hiển thị thông báo cập nhật thành công

3 Kiểm thử chức năng thêm mới danh mục

Tại trang Quản lý danh mục

Thông báo tạo thành công danh mục mới

- Nhập tên danh mục mới và chọn nhóm danh mục

4 Kiểm thử chức năng chỉnh sửa danh mục

- Click “Update Category” tại danh mục muốn cập nhật

- Nhập tên mới cho danh mục

Thông báo chỉnh sửa thành công danh mục

5 Kiểm thử chức năng xoá danh mục

- Click “Delete Category” tại danh mục muốn xoá

Thông báo xóa thành công danh mục

6 Kiểm thử chức năng xác nhận trạng thái đơn hàng

Tại trang Quản lý đơn hàng

- Click “status” của đơn hàng và chọn trạng thái mong muốn Đơn hàng phía User được cập nhật trạng thái thành công

7 Kiểm thử chức năng cấm/mở cấm người dùng

Tại trang Quản lý người dùng

- Click “Deactive” tại người dùng muốn cấm

Thông báo cập nhật thành công và người dùng không truy cập được vào hệ thống nữa

Bảng 64 Kiểm thử chức năng phía Admin

Tiêu đề	Xây dựng website kinh doanh thời trang sử dụng ReactJS và Spring Boot
Tác giả	Nguyễn Trường Giang, Nguyễn Xuân Bách
Người hướng dẫn	THS. Nguyễn Trần Thi Văn
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	Khóa luậ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	119
Dung lượng	7,52 MB