đồ án 2 xây dựng website bán mỹ phẩm cho nữ

3.2 Mục tiêu đề tài Với những vấn đề đề cập ở trên, mục tiêu của đề tài cung cấp cho người sử dụng ứng dụng khắc phục các khuyết điểm của cửa hàng mỹ phẩm truyền thống bằng cách ứng dụng

GIỚI THIỆU CHUNG

Tên đề tài

Xây dựng website bán mỹ phẩm cho nữ.

Thông tin sinh viên

- Họ và tên: Nguyễn Bá Công

- Họ và tên: Nguyễn Minh Duy

Môi trường phát triển

- Công cụ quản lý CSDL: MySQL

- Công cụ vẽ sơ đồ phân tích thiết kế: StarUML

- Công cụ xây dựng ứng dụng: Visual Studio Code

- Công cụ quản lý mã nguồn: Github.

Môi trường triển khai

Giới thiệu công nghệ sử dụng

ReactJS

- ReactJS là một thư viện JavaScript phổ biến và mạnh mẽ được sử dụng cho việc xây dựng giao diện người dùng (UI) động và tương tác trên nền web Được phát triển bởi Facebook, ReactJS cho phép bạn xây dựng các ứng dụng web độc lập, tái sử dụng và dễ bảo trì

- ReactJS sử dụng mô hình component, trong đó mọi thành phần giao diện đều được xem như các "components" riêng biệt Các components có thể được xếp chồng lên nhau để tạo thành các giao diện phức tạp và có thể tái sử dụng lại trong nhiều phần của ứng dụng Điều này giúp tăng tính module và sự linh hoạt trong quá trình phát triển

- Một điểm đáng chú ý của ReactJS là khả năng quản lý trạng thái (state) của ứng dụng ReactJS cung cấp một cách tiếp cận hiệu quả để quản lý và cập nhật trạng thái của các components, giúp bạn xây dựng giao diện động và phản hồi nhanh chóng với các thay đổi trong dữ liệu

- ReactJS cũng có cộng đồng phát triển mạnh mẽ, với nhiều tài liệu, công cụ và các thư viện bổ trợ khác nhau Các công cụ như React Router cho điều hướng, Redux cho quản lý trạng thái toàn cục, và Axios cho gửi yêu cầu HTTP là chỉ một số ví dụ.

NodeJS

- Node.js là một môi trường chạy code JavaScript phía server Dựa trên JavaScript Engine của Google Chrome, Node.js cho phép xây dựng các ứng dụng máy chủ hiệu quả, linh hoạt và có khả năng mở rộng

- Với Node.js, bạn có thể viết JavaScript để xử lý các tác vụ máy chủ như xây dựng API, quản lý tệp tin, xử lý yêu cầu HTTP, và tương tác với cơ sở dữ liệu Node.js

4 cung cấp các công cụ và thư viện phong phú để giúp bạn xây dựng các ứng dụng web, dịch vụ web và ứng dụng phần mềm phức tạp

- Một trong những lợi ích lớn của Node.js là kiến trúc không chặn (non-blocking architecture), cho phép xử lý đa luồng hiệu quả và đồng thời xử lý hàng ngàn kết nối mà không gây tắc nghẽn Điều này giúp tăng hiệu suất và khả năng mở rộng của ứng dụng, đồng thời cung cấp trải nghiệm đáng tin cậy cho người dùng

- Ngoài ra, Node.js có một hệ sinh thái phát triển mạnh mẽ với hàng ngàn các module và gói mã nguồn mở có sẵn thông qua NPM (Node Package Manager) Bạn có thể sử dụng NPM để tìm kiếm, cài đặt và quản lý các gói phần mềm từ cộng đồng, giúp nâng cao năng suất và tiết kiệm thời gian phát triển.

ExpresJS

- Express.js là một framework web phía máy chủ được xây dựng dựa trên Node.js Với Express.js, bạn có thể nhanh chóng và dễ dàng xây dựng các ứng dụng web và API mạnh mẽ

- Express.js tập trung vào việc tạo ra các ứng dụng web đơn giản, nhẹ nhàng và linh hoạt Nó cung cấp một cách tiếp cận đơn giản để định nghĩa các tuyến đường (routes), xử lý yêu cầu và phản hồi, quản lý trạng thái và gửi dữ liệu đến và từ cơ sở dữ liệu

- Với cú pháp rõ ràng và hướng dẫn tốt, Express.js giúp bạn nhanh chóng xây dựng các ứng dụng web linh hoạt và dễ bảo trì Nó cho phép bạn tạo các middleware tùy chỉnh để xử lý các yêu cầu trung gian, kiểm soát quyền truy cập và thực hiện các chức năng phụ trợ khác

- Express.js cũng có một cộng đồng phát triển đông đảo và hệ sinh thái mở rộng

- với nhiều middleware và gói mở rộng hữu ích Bạn có thể sử dụng các middleware

- như Body-parser, Cookie-parser, và Passport để giúp xử lý dữ liệu và xác thực.

ViteJS

ViteJS là công cụ tương tự webpack, Rollup, Parcel …

Mục đích của Vite là giải quyết những bài toán hiệu năng của các Javascript tool hiện tại

- Tốc độ khởi động server nhanh:

Vite cải thiện tốc độ khởi động của dev server bằng cách chia các modules thành 2 nhóm: dependencies và source code

• Dependencies là hầu hết plain javascript không thay đổi trong quá trình dev Một số dependencies lớn (ví dụ component libraries với hàng trăm modules) khá tốn kém để xử lý Vite pre-bundles các dependencies này sử dụng esbuild Esbuild viết bằng Go và pre-bundles nhanh gấp 10-100x các bundler khác dựa trên javasript

• Source code chứa non-plain javascript cần chuyển đổi (ví dụ JSX, CSS, Vue

…), và được edit thường xuyên Tất cả source code không cần thiết phải load cùng lúc Vite xử lý source code qua native ESM Điều này cho phép trình duyệt đảm nhận 1 phần công việc bundler Vite chỉ cần chuyển đổi và xử lý source code khi browser request nó Code đằng sau import động chỉ được xử lý khi thật sự sử dụng trên màn hình hiện tại

Khi 1 file được chỉnh sửa trong hệ thống bundler-based, sẽ là không hiệu quả khi build lại toàn bộ bundle Tốc độ update sẽ chậm lại khi dự án lớn lên Ở 1 số bundler, dev server chạy bundling trong memory do vậy chỉ cần vô hiệu hóa 1 phần module graph khi 1 file thay đổi, nhưng nó vẫn cần cấu trúc lại toàn bộ bundle và reload web page Cấu trúc lại bundle là tốn kém, và tải lại page sẽ làm mất trạng thái hiện tại của 22 ứng dụng Cho nên

1 số bundlers hỗ trợ Hot Module Replacement (HMR): cho phép 1 module có thể “hot replace” mà không ảnh hưởng đến toàn bộ page Tuy nhiên thực tế tốc độ HMR cũng giảm đi đáng kể khi kích thước ứng dụng tăng lên

Tailwind CSS

Tailwind CSS là một framework CSS utility-first, được phát triển bởi Adam Wathan Tailwind CSS cung cấp một tập hợp các lớp CSS được tích hợp sẵn mà chúng ta có thể sử dụng trong ứng dụng của mình Các lớp CSS này được gọi là "utility classes" và chúng cung cấp các thuộc tính CSS khác nhau, chẳng hạn như màu sắc, kích thước, vị trí, v.v Ưu điểm của Tailwind CSS:

- Tăng tốc độ phát triển: Tailwind CSS giúp chúng ta tăng tốc độ phát triển giao diện web bằng cách cung cấp các lớp CSS có sẵn Chúng ta không cần phải viết CSS từ đầu, mà chỉ cần sử dụng các lớp CSS có sẵn để áp dụng các quy tắc và kiểu dáng cho các phần tử trong giao diện

- Tăng tính linh hoạt: Tailwind CSS cung cấp một số lượng lớn các lớp CSS với các thuộc tính và quy tắc CSS khác nhau Điều này giúp chúng ta tạo ra các giao diện web linh hoạt và đáp ứng với nhiều nhu cầu khác nhau

- Tăng tính maintainability: Tailwind CSS sử dụng các cú pháp CSS đơn giản và dễ hiểu Điều này giúp chúng ta dễ dàng maintain và nâng cấp giao diện web trong tương lai

Nhược điểm của Tailwind CSS

- Có thể khó học: Tailwind CSS sử dụng một số cú pháp CSS mới và khác biệt so với CSS truyền thống Điều này có thể khiến người mới bắt đầu khó học

- Có thể dẫn đến CSS bloat: Nếu chúng ta không cẩn thận, việc sử dụng quá nhiều lớp CSS có thể dẫn đến CSS bloat, làm tăng kích thước của file CSS và ảnh hưởng đến hiệu suất của ứng dụng

Tailwind CSS là một framework CSS utility-first mạnh mẽ và linh hoạt Tailwind CSS có thể giúp chúng ta tăng tốc độ phát triển, tăng tính linh hoạt và tính maintainability của giao diện web Tuy nhiên, Tailwind CSS cũng có một số nhược điểm như khó học và có thể dẫn đến CSS bloat

PHÁT BIỂU BÀI TOÁN

Đặt vấn đề

Hiện nay, vẫn tồn tại các cửa hàng mỹ phẩm truyền thống chưa có website cho riêng họ Có thể kể ra một số bất cập như sau:

- Việc đặt hàng, mua hàng, xem hàng phải xảy ra vào lúc cửa hàng đang mở cửa, không có sẵn theo thời gian của khách

- Quản lý đơn hàng, hàng tồn thường phải ghi chép bằng tay hoặc lưu trữ không có tổ chức tốt

- Việc gợi ý các mặt hàng đi kèm thường phải phụ thuộc vào trí nhớ của người bán hàng nên có thể nhầm lẫn hoặc sai sót khiến việc gợi ý có thể không đạt được kết quả mong muốn

- Không có khả năng quảng bá cửa hàng qua mạng internet hoặc bị hạn chế vào các nhóm trên mạng xã hội, các nhóm chat.

Mục tiêu đề tài

Với những vấn đề đề cập ở trên, mục tiêu của đề tài cung cấp cho người sử dụng ứng dụng khắc phục các khuyết điểm của cửa hàng mỹ phẩm truyền thống bằng cách ứng dụng công nghệ thông tin:

- Quản lý và giám sát hiệu quả: Mục tiêu chính của hệ thống là cung cấp một phương pháp quản lý hiệu quả cho các mặt hàng, đơn hàng Hệ thống sẽ giúp bạn theo dõi thông tin về các mặt hàng (ngày nhập, nơi nhập, giá, hạn sử dụng, …) và đơn hàng (ngày đặt, số lượng, chi tiết sản phẩm, …) Điều này sẽ giúp bạn tăng cường khả năng quản lý và tối ưu hóa hoạt động mua bán của cửa hàng mỹ phẩm cho nữ

- Cung cấp công cụ như theo dõi, đánh giá, báo cáo doanh thu về các mặt hàng giúp cho cửa hàng có những thay đổi phù hợp với hoạt động

- Gợi ý các mặc hàng thường được mua chung để kích thích khách hàng mua sắm

Đối tượng phạm vi nghiên cứu

Các đối tượng liên quan đến ứng dụng:

- Chủ cửa hàng: Hệ thống sẽ được sử dụng bởi chủ cửa hàng, để giám sát và quản lý các hoạt động mua bán, bao gồm thông tin về các mặt hàng, đơn hàng, các chương trình giảm giá, kiểm soát quyền truy cập của người dùng

- Khách hàng: Khách hàng sử dụng website là một đối tượng quan trọng của hệ thống Họ có thể sử dụng để xem các mặt hàng, đặt hàng, theo dõi tình trạng đơn hàng

- Thiết kế và phát triển hệ thống: Nghiên cứu có thể tập trung vào thiết kế và phát triển hệ thống website bán hàng mỹ phẩm cho nữ, bao gồm việc xác định yêu cầu chức năng và phi chức năng, lựa chọn các công nghệ phù hợp, phân tích use-case, phân tích thiết kế các mô hình phục vụ việc phát triển, xây dựng cơ sở dữ liệu, phát triển giao diện người dùng và tích hợp các thành phần hệ thống

- Quản lý dữ liệu và thông tin: Nghiên cứu có thể tập trung vào cách quản lý dữ liệu và thông tin liên quan đến website bán hàng mỹ phẩm cho nữ Điều này có thể bao gồm việc xây dựng cơ sở dữ liệu cho việc lưu trữ thông tin mặt hàng, lịch sử giao dịch, thanh toán và các thông tin khác Nghiên cứu cũng có thể tập trung vào cách thu thập, xử lý và phân tích dữ liệu để đưa ra thông tin hữu ích cho việc bán hàng mỹ phẩm cho nữ

- An ninh và bảo mật: Nghiên cứu có thể tập trung vào cách đảm bảo an ninh và bảo mật trong hệ thống website bán hàng mỹ phẩm cho nữ Điều này có thể bao gồm việc phân tích các rủi ro an ninh, xác thực và quản lý quyền truy cập, giám sát và ghi lại hoạt động, và áp dụng các biện pháp bảo mật để bảo vệ tài sản của cửa hàng

Công cụ sử dụng

Trong quá trình thực hiện đề tài, nhóm đã sử dụng một số công cụ để phục vụ cho việc triển khai đề tài, bao gồm:

- Công cụ quản lý CSDL: MySQL

- Công cụ vẽ sơ đồ phân tích thiết kế: StarUML

- Công cụ xây dựng ứng dụng: Visual Studio 2022

- Công cụ quản lý mã nguồn: Github.

Tính ứng dụng

Tin học hóa trong quá trình bán hàng mỹ phẩm cho nữ, khắt phục những nhươc điểm của cửa hàng bán mỹ phẩm cho nữ truyền thống, có thể được triển khai trong các cửa hàng vừa và nhỏ Hệ thống giúp quản lý mặt hàng, một cách tiện lợi cho chủ cửa hàng và khách hàng

KHẢO SÁT HIỆN TRẠNG NGƯỜI DÙNG

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

- Quy trình người dùng tạo giỏ hàng và đặt hàng

- Quy trình quản lý sản phẩm của cửa hàng

- Quy trình quản lý quyền của người dùng

- Quy trình xác nhận đơn hàng

- Quy trình xác thực người dùng

- Quy trình quản lý sự kiện giảm giá

Hình 4.1.1 Hình trang chủ Hasaki

Hình 4.1.2 Hình xem danh mục sản phẩm của Hasaki

Hình 4.1.3 Hình chi tiết sản phẩm của Hasaki

- Thông tin sản phẩm chi tiết, đầy đủ thông tin

• Thông tin thành phẩn, sản phẩm

- Quá nhiều thông tin chi tiết:

• Mật độ quảng cáo nhiều, làm cho người dùng khó phân biệt thông tin sản phẩm với quảng cáo

• Thông tin sản phẩm A thì có chứa thông tin sản phẩm B, C,…

- Sử dụng nhiều màu sắc sáng, nổi bật làm người dùng dễ phân tâm

Hình 4.1.4 Hình trang chủ Pharmacity

Hình 4.1.5 Hình chi tiết sản phẩm của Pharmacity

- Mật độ thông tin ít, cô đặc làm người dùng không bị choáng ngợp

- Màu sắc dịu nhẹ, không làm người dùng bị phân tâm

- Quá ít thông tin về sản phẩm.

Yêu cầu phần mềm

4.2.1.1 Quản lý sản phẩm của cửa hàng

- Thêm, xóa, sửa sản phẩm hiện có cho cửa hàng

- Cập nhật số lượng khi xác nhận đơn đặt hàng

- Tìm kiếm sản phẩm theo người dùng nhập vào, theo danh mục, lọc kết quả tìm kiếm

4.2.1.2 Quản lý sự kiện giảm giá

- Thêm, xóa, sửa sự kiện giảm giá

- Cập nhật thông tin sản phẩm theo sự kiện giảm giá

4.2.1.3 Quản lý đặt hàng, đơn hàng

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

- Người dùng xóa, sửa số lượng sản phẩm có trong giỏ hàng của mình

- Người dùng theo dõi tình trạng đơn hàng

- Admin tiếp nhận/ hủy đơn hàng

- Admin theo dõi tình trạng tất cả đơn hàng

- Người dùng đăng ký/ đăng nhập vào hệ thống

- Người dùng thay đổi thông tin cá nhân/ mật khẩu

- Người dùng tự vô hiệu hóa tài khoản của mình

- Admin vô hiệu hóa tài khoản của user

4.2.1.5 Quản lý đánh giá sản phẩm:

- Người dùng thêm/xóa đánh giá của bản thân cho sản phẩm

4.2.2 Yêu cầu phi chức năng

- Thiết kế giao diện đơn giản, hài hòa, bắt mắt với trọng tâm phù hợp với nữ

- Dễ thao tác đảm bảo tính tương tác cao, thuận tiện cho người dùng sử dụng

- Các thao tác chuyển trang không rườm ra nhằm đảm bảo trải nghiệm tốt nhất cho người dùng

- Màu sắc giao diện không gây khó chịu cho mắt người dùng, kích thích người dùng mua hàng

4.2.2.2 Yêu cầu về vận hành

- Hệ thống có thể chạy được trên máy tính bàn, máy tính xách tay

- Hệ thống có thể chạy trên các trình duyệt sau đây: Microsoft Edge, Google Chrome, Opera

- Hệ thống hiển thị đầy đủ các thông tin cần thiết

- Hệ thống thực hiện chính xác các thao tác truy vấn cơ sở dữ liệu dựa trên thao tác của người dùng

4.2.2.3 Yêu cầu về hiệu suất

- Hệ thống có thể chạy 24/7 mà không gặp phải các lỗi nghiêm trọng dẫn đến sập hệ thống, thất thoát dữ liệu,…

- Thời gian phản hồi của hệ thống đảm bảo đủ nhanh và mượt mà (thời gian phản hồi chậm nhất không quá 1.5 giây)

- Hệ thống có thể thực đa tác vụ đối với các thao tác và xử lý trên hệ thống

4.2.2.4 Yêu cầu về bảo mật

- Thực hiện việc phân quyền trên hệ thống

- Dữ liệu không bị thất thoát trong quá trình làm việc trên hệ thống

USE CASE

Sơ đồ Use case

Hình 5.1.1 Sơ đồ use case tổng quát

Danh sách các use-case

STT Tên Actor Ý nghĩa/ Ghi chú

1 Admin Người quản lý website

2 Guest Khách hàng chưa đăng nhập

3 User Khách hàng đăng nhập với tài khoản tạo

Bảng 5.2.1 Danh sách các Actor

5.2.2 Danh sách các Use-case

STT Tên use case Ý nghĩa

1 Đăng nhập Admin Admin đăng nhập vào website

2 Quản lý sự kiện giảm giá Admin quản lý các sự kiện giảm giá

3 Thêm sự kiện giảm giá Admin thêm các sự kiện giảm giá cho sản phẩm theo danh mục, hãng

Chỉnh sửa sự kiện giảm giá Admin có thể thay đổi thông tin sự kiện: tên, mức giảm giá, ngày bắt đầu, kết thúc và danh mục hoặc hãng

5 Xóa sự kiện giảm giá Admin có thể xóa sự kiện giảm giá

6 Quản lý kho hàng Admin quản lý kho hàng trên website

7 Thêm sản phẩm Admin thêm sản phẩm

8 Xóa sản phẩm Admin xóa sản phẩm

9 Chỉnh sửa sản phẩm Admin chỉnh sửa thông tin sản phẩm

10 Quản lý tài khoản user Admin quản lý tài khoản user

11 Vô hiệu hóa tài khoản user Admin có khả năng vô hiệu hóa tài khoản user

12 Kích hoạt tài khoản user Admin có khả năng kích hoạt tài khoản user

13 Đăng ký Guest đăng ký tài khoản

14 Đăng nhập Guest đăng nhập vào tài khoản

15 Xem sản phẩm User, Guest xem được sản phẩm

16 Xem danh sách sản phẩm User, Guest xem danh sách sản phẩm

17 Lọc danh sách User, Guest lọc danh sách sản phẩm

18 Quản lý giỏ hàng User quản lý giỏ hàng của mình

19 Thêm vào giỏ hàng User thêm sản phẩm vào giỏ hàng

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

21 Chỉnh sửa giỏ hàng User chỉnh sửa thông tin về giỏ hàng

22 Thanh toán giỏ hàng User thanh toán giỏ hàng

23 Quản lý đánh giá sản phẩm User quản lý đánh giá sản phẩm

24 Thêm đánh giá User viết đánh giá sản phẩm

25 Xóa đánh giá User xóa đánh giá sản phẩm

26 Sửa đánh giá User chỉnh sửa đánh giá sản phẩm

27 Quản lý tài khoản User quản lý tài khoản của mình

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

29 Vô hiệu hóa tài khoản User vô hiệu hóa tài khoản

30 Thay đổi mật khẩu User có thể thay đổi mật khẩu tài khoản của mình

Bảng 5.2.2 Danh sách các use case

Đặc tả use-case

5.3.1.1 Use case đăng nhập Admin

5.3.1.1.1 Đặc tả use case đăng nhập Admin

Tên Use-case Đăng nhập admin

Mô tả Use-case Đăng nhập vào hệ thống

Kích hoạt (Trigger) Mở ứng dụng

Use-case liên quan Không có

Tiền điều kiện Hệ thống cần kết nối với cơ sở dữ liệu

Hậu điều kiện Admin được thông báo đăng nhập thành công

Luồng sự kiện chính 1 Admin nhập thông tin đăng nhập

2 Hệ thống xác thực thông tin thành công

3 Hệ thống thông báo đăng nhập thành công

Luồng sự kiện phụ 2a Hệ thống thông báo người dùng đã đăng nhập bằng tài khoản của người đã bị vô hiệu hóa Lúc này admin quay lại bước 1

2b Hệ thống thông báo người dùng nhập sai thông tin đăng nhập Lúc này admin quay lại bước 1

Luồng sự kiện ngoại lệ Admin thoát khỏi màn hình đăng nhập Use-case đăng nhập admmin dừng lại

Bảng 5.3.1 Đặc tả use case đăng nhập Admin

5.3.2 Quản lý sự kiện giảm giá

5.3.2.1 Use case thêm sự kiện

5.3.2.1.1 Đặc tả use case thêm sự kiện

Tên Use-case Thêm sự kiện

Mô tả Use-case Thêm sự kiện giảm giá

Kích hoạt (Trigger) Admin nhấn vào nút sự kiện

Tiền điều kiện Admin đăng nhập thành công

Website kết nối được cơ sở dữ liệu

Phải có sản phẩm, giá để giảm giá

Hậu điều kiện Giá sản phẩm giảm theo phần trăm admin nhập

Luồng sự kiện chính 1 Admin nhấn vào sự kiện

2 Admin nhấn nút thêm sự kiện

3 Admin nhập thông tin sự kiện

Luồng sự kiện ngoại lệ

Bảng 5.3.2 Đặc tả use case thêm sự kiện

5.3.2.2 Use case chỉnh sửa sự kiện

5.3.2.2.1 Đặc tả use case chỉnh sửa sự kiện

Tên Use-case Chỉnh sửa sự kiện

Mô tả Use-case Chỉnh sửa sự kiện giảm giá

Kích hoạt (Trigger) Admin nhấn vào nút thay đổi

Hậu điều kiện Thông tin sự kiện được thay đổi

Luồng sự kiện chính 1 Admin nhấn vào nút thay đổi

2 Admin nhập thông tin cần thay đổi

Bảng 5.3.3 Đặc tả use case chỉnh sửa sự kiện

5.3.2.3 Use case xóa sự kiện

5.3.2.3.1 Đặc tả use case xóa sự kiện

Tên Use-case Xóa sự kiện

Mô tả Use-case Xóa sự kiện giảm giá

Kích hoạt (Trigger) Admin nhấn vào nút sự kiện

Hậu điều kiện Sự kiện được xóa

Luồng sự kiện chính 1 Admin nhấn vào sự kiện

2 Admin chọn sự kiện cần xóa

Bảng 5.3.4 Đặc tả use case xóa sự kiện

5.3.3.1 Use case thêm sản phẩm

5.3.3.1.1 Đặc tả use case thêm sản phẩm

Tên Use-case Thêm sản phẩm

Mô tả Use-case Thêm sản phẩm vào kho cửa hàng

Kích hoạt (Trigger) Nhấn vào nút Thêm sản phẩm

Tiền điều kiện Đăng nhập vào website

Website kết nối được với cơ sở dữ liệu

Hậu điều kiện Sản phẩm được thêm vào cơ sở dữ liệu

Luồng sự kiện chính 1 Admin nhấn vào nút Thêm sản phẩm

2 Admin nhập tên, số lượng và giá sản phẩm

Luồng sự kiện phụ 2a Hệ thống thông báo admin nhập số lượng, giá âm Lúc này admin cần thay đổi số lượng, giá

Luồng sự kiện ngoại lệ Admin thoát khỏi màn hình Thêm sản phẩm Use case thêm sản phẩm dừng lại

Bảng 5.3.5 Đặc tả use case thêm sản phẩm

5.3.3.2 Use case xóa sản phẩm

5.3.3.2.1 Đặc tả use case xóa sản phẩm

Tên Use-case Xóa sản phẩm

Mô tả Use-case Xóa sản phẩm ra khỏi kho

Kích hoạt (Trigger) Admin nhấn nút Xóa

Tiền điều kiện Cần có sản phẩm trong kho để xóa

Admin đăng nhập vào website

Hậu điều kiện Sản phẩm bị xóa khỏi cơ sở dữ liệu

Luồng sự kiện chính 1 Admin lựa chọn sản phẩm cần xóa

3 Admin nhập số lượng cần xóa

Luồng sự kiện phụ 3a Hệ thống thông báo admin nhập số lượng Lúc này admin cần nhập lại số lượng

Luồng sự kiện ngoại lệ Admin thoát khỏi màn hình Xóa sản phẩm Use case xóa sản phẩm dừng lại

Bảng 5.3.6 Đặc tả use case xóa sản phẩm

5.3.3.3 Use case chỉnh sửa sản phẩm

5.3.3.3.1 Đặ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ả Use-case Chỉnh sửa số lượng, giá, tên sản phẩm

Kích hoạt (Trigger) Admin nhấn vào chỉnh sửa

Tiền điều kiện Admin đăng nhập vào tài khoản

Web kết nối được cơ sở dữ liệu

Cần có sản phẩm trước khi chỉnh sửa

Hậu điều kiện Thông tin sản phẩm được thay đổi thành công

Luồng sự kiện chính 1 Admin nhấn vào nút chỉnh sửa

2 Chỉnh sửa thông tin theo ý muốn

Luồng sự kiện phụ 2a Hệ thống thông báo số lượng, giá thay đổi bị âm Yêu cầu admin nhập lại thông tin,

Luồng sự kiện ngoại lệ Admin thoát khỏi màn hình Chỉnh sửa sản phẩm Use case chỉnh sửa sản phẩm dừng lại

Bảng 5.3.7 Đặc tả use case chỉnh sửa sản phẩm

5.3.4 Quản lý tài khoản user

5.3.4.1 Use case vô hiệu hóa tài khoản user

5.3.4.1.1 Đặc tả use case vô hiệu hóa tài khoản user

Tên Use-case Vô hiệu hóa tài khoản user

Mô tả Use-case Admin có khả năng vô hiệu hóa tài khoản user tùy trường hợp bất khả kháng

Kích hoạt (Trigger) Admin nhấn nút vô hiệu hóa

Tiền điều kiện Admin đăng nhập vào website

Cần có dữ liệu user để vô hiệu hóa

Hậu điều kiện Tài khoản user bị vô hiệu hóa

Luồng sự kiện chính 1.Admin lựa chọn user cần vô hiệu hóa

2 Admin nhấn nút vô hiệu hóa

Luồng sự kiện phụ 3a Admin nhấn nút Hủy Tài khoản user không bị vô hiệu hóa

Luồng sự kiện ngoại lệ Admin thoát khỏi màn hình vô hiệu hóa user Use case vô hiệu hóa user dừng lại

Bảng 5.3.8 Đặc tả use case vô hiệu hóa tài khoản user

5.3.4.2 Use case kích hoạt tìak hoản user

5.3.4.2.1 Đặc tả use case kích hoạt tài khoản user

Tên Use-case Kích hoạt tài khoản user

Mô tả Use-case Admin có khả năng kích hoạt tài khoản user tùy trường hợp

Kích hoạt (Trigger) Admin nhấn nút kích hoạt

Tiền điều kiện Admin đăng nhập vào website

Cần có dữ liệu user để vô hiệu hóa

Hậu điều kiện Tài khoản user được kích hoạt

Luồng sự kiện chính 1.Admin lựa chọn user cần kích hoạt

2 Admin nhấn nút vô hiệu hóa

Luồng sự kiện phụ 3a Admin nhấn nút Hủy Tài khoản user không được kích hoạt

Luồng sự kiện ngoại lệ Admin thoát khỏi màn hình kích hoạt user Use case kích hoạt user dừng lại

Bảng 5.3.9 Đặc tả use case kích hoạt tài khoản user

5.3.5.1.1 Đặc tả use case đăng ký

Tên Use-case Đăng ký

Mô tả Use-case Guest có thể đăng ký nếu chưa có tài khoản

Kích hoạt (Trigger) Bấm nút đăng ký

Tiền điều kiện Guest truy cập vào website

Hậu điều kiện Thông báo đăng ký thành công

Luồng sự kiện chính 1 Guest bấm nút đăng ký

2 Guest điền thông tin tài khoản và xác nhận

3 Hệ thống kiểm tra thông tin tài khoản

4 Hệ thống thông báo đăng ký tài khoản thành công

5 Hệ thống chuyển sang màn hình đăng nhập

Luồng sự kiện phụ 4a Thông tin tài khoản đã tồn tại hoặc không đúng Lúc này hệ thống sẽ thông báo để người dùng nhập lại

Luồng sự kiện ngoại lệ Không có

Bảng 5.3.10 Đặc tả use case đăng ký

5.3.6.1.1 Đặc tả use case đăng nhập

Tên Use-case Đăng nhập

Mô tả Use-case User nếu có tài khoản có thể đăng nhập vào hệ thống

Kích hoạt (Trigger) User bấm nút đăng nhập

Hậu điều kiện Chuyển qua trang chủ sau khi đăng nhập thành công

Luồng sự kiện chính 1 User bấm vào nút đăng nhập

2 User nhập thông tin đăng nhập và xác nhận

3 Hệ thống kiểm tra thông tin đăng nhập

4 Hệ thống thông báo đăng nhập thành công

5 Hệ thống chuyển sang trang chủ

Luồng sự kiện phụ 4a Sai thông tin đăng nhập Khi đó hệ thống thông báo với người dùng

Bảng 5.3.11 Đặc tả use case đăng nhập

5.3.7.1 Use case xem sản phẩm

5.3.7.1.1 Đặc tả use case xem sản phẩm

Tên Use-case Xem sản phẩm

Mô tả Use-case Guest có thể xem các sản phẩm có trong danh sách các sản phẩm được hiển thị trên web

Kích hoạt (Trigger) Guest bấm vào một sản phẩm

Hậu điều kiện Hệ thống hiển thị trang chi tiết sản phẩm

Luồng sự kiện chính 1 Guest bấm vào sản phẩm bất kỳ trong danh sách

2 Hệ thống hiển thị trang chi tiết sản phẩm

Luồng sự kiện phụ Không có

Bảng 5.3.12 Đặc tả use case xem sản phẩm

5.3.8 Xem danh sách sản phẩm

5.3.8.1 Use case xem danh sách sản phẩm

5.3.8.1.1 Đặc tả use case xem danh sách sản phẩm

Tên Use-case Xem danh sách sản phẩm

Mô tả Use-case Guest có thể xem danh sách các sản phẩm của một danh mục nào đó

Kích hoạt (Trigger) Guest bấm vào một danh mục

Use-case liên quan : Xem sản phẩm

Hậu điều kiện Hệ thống hiển thị danh sách các sản phẩm theo danh mục tương ứng

Luồng sự kiện chính 1 Guest bấm vào danh mục của danh sách sản phẩm cần xem

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

Bảng 5.3.13 Đặc tả use case xem danh sách sản phẩm

5.3.9.1 Use case lọc danh sách

5.3.9.1.1 Đặc tả use case lọc danh sách

Tên Use-case Lọc danh sách

Mô tả Use-case Guest có thể lọc danh sách các sản phẩm được hiển thị

Kích hoạt (Trigger) Guest chọn các điều kiện cho bộ lọc

Use-case liên quan : Xem danh sách sản phẩm

Hậu điều kiện Hệ thống hiển thị danh sách các sản phẩm theo danh mục tương ứng

Luồng sự kiện chính 1 Guest chọn các điều kiện lọc phù hợp

2 Hệ thống hiển thị danh sách sản phẩm theo điều kiện lọc

Bảng 5.3.14 Đặc tả use case lọc danh sách

5.3.10.1 Use case thêm vào giỏ hàng

5.3.10.1.1 Đặc tả use case thêm vào giỏ hàng

Tên Use-case Thêm vào giỏ hàng

Mô tả Use-case Guest có thể thêm hàng mình muốn mua vào giỏ

Kích hoạt (Trigger) Guest bấm nút “Thêm vào giỏ hàng”

Hậu điều kiện Thêm sản phẩm vào giỏ hàng của guest tương ứng

Luồng sự kiện chính 1 Guest bấm nút “Thêm vào giỏ hàng” của sản phẩm cần thêm

2 Hệ thống kiểm tra sản phẩm còn hàng

3 Hệ thống thêm sản phẩm vào giỏ hàng của guest tương ứng

Luồng sự kiện phụ 2a Sản phẩm hết hàng, khi đó hệ thống thông báo sản phẩm hết hàng

Bảng 5.3.15 Đặc tả use case thêm vào giỏ hàng

5.3.10.2 Use case xóa hàng khỏi giỏ

5.3.10.2.1 Đặc tả use case xóa hàng khỏi giỏ

Tên Use-case Xóa hàng khỏi giỏ

Mô tả Use-case Guest có thể xóa hàng mình đã thêm vào giỏ

Kích hoạt (Trigger) Guest bấm nút “Xóa hàng”

Guest đã có hàng trong giỏ

Hậu điều kiện Xóa sản phẩm khỏi giỏ hàng của guest tương ứng

Luồng sự kiện chính 1 Guest bấm nút “Xóa hàng” của sản phẩm cần xóa và xác nhận

2 Hệ thống xóa sản phẩm khỏi giỏ hàng của guest tương ứng

Bảng 5.3.16 Đặc tả use case xóa hàng khỏi giỏ

5.3.10.3 Use case chỉnh sửa giỏ hàng

5.3.10.3.1 Đặc tả use case chỉnh sửa giỏ hàng

Tên Use-case Chỉnh sửa giỏ hàng

Mô tả Use-case Guest có thể chỉnh sửa số lượng sản phẩm cần mua

Kích hoạt (Trigger) Guest bấm nút tăng hoặc giảm hàng

Guest đã có hàng trong giỏ

Hậu điều kiện Số lượng sản phẩm tăng giảm tương ứng

Luồng sự kiện chính 1 Guest bấm nút tăng giảm của sản phẩm cần thay đổi số lượng

2 Hệ thống tăng giảm sản phẩm trong giỏ tương ứng

Luồng sự kiện phụ 2a Sản phẩm không còn đủ hoặc hết hàng Lúc này hệ thống sẽ thông báo sản phẩm không còn đủ

Bảng 5.3.17 Đặc tả use case chỉnh sửa giỏ hàng

5.3.11.1 Use case thanh toán giỏ hàng

5.3.11.1.1 Đặc tả use case thanh toán giỏ hàng

Tên Use-case Thanh toán giỏ hàng

Mô tả Use-case User thanh toán giỏ hàng

Kích hoạt (Trigger) User bấm nút “Thanh toán”

Tiền điều kiện User đăng nhập vào hệ thống

User đã có hàng trong giỏ

Hàng trong giỏ còn hàng

Hậu điều kiện Hệ thống thông báo thanh toán thành công/ đã đặt đơn giao hàng

Luồng sự kiện chính 1 User bấm nút “Thanh toán”

2 User chọn phương thức giao hàng

3 User chọn phương thức thanh toán và xác nhận

4 Hệ thống tạo đơn hàng theo thông tin tương ứng

Luồng sự kiện phụ 3a User chọn phương thức thanh toán bằng ngân hàng Lúc này hệ thống sẽ điều hướng trang web sang các trang thanh toán tương ứng

3a1 Hệ thống xác nhận thanh toán thành công từ trang web thanh toán

3a2 Hệ thống xác nhận thanh toán không thành công Lúc này hệ thống thông báo thanh toán không thành công

Bảng 5.3.18 Đặc tả use case thanh toán giỏ hàng

5.3.12 Quản lý đánh giá sản phẩm

5.3.12.1 Use case thêm đánh giá

5.3.12.1.1 Đặc tả use case thêm đánh giá

Tên Use-case Thêm đánh giá

Mô tả Use-case User đánh giá sản phẩm mình đã mua

Kích hoạt (Trigger) User bấm nút “Đăng đánh giá”

Hậu điều kiện Đánh giá của User được đăng lên website

Luồng sự kiện chính 1 User chọn số sao cho sản phẩm cần đánh giá

2 User nhập nội dung đánh giá và xác nhận

3 Hệ thống đăng bài đánh giá của user cho sản phẩm tương ứng

Bảng 5.3.19 Đặc tả use case thêm đánh giá

5.3.12.2 Use case xóa đánh giá

5.3.12.2.1 Đặc tả use case xóa đánh giá

Tên Use-case Xóa đánh giá

Mô tả Use-case User xóa đánh giá mà bản thân đã đăng

Kích hoạt (Trigger) User bấm nút “Xóa đánh giá”

User đã đăng đánh giá

Hậu điều kiện Đánh giá của User được xóa khỏi website

Luồng sự kiện chính 1 User bấm nút “Xóa đánh giá” và xác nhận

2 Hệ thống xóa đánh giá của user

Bảng 5.3.20 Đặc tả use case xóa đánh giá

5.3.12.3 Use case sửa đánh giá

5.3.12.3.1 Đặc tả use case sửa đánh giá

Tên Use-case Sửa đánh giá

Mô tả Use-case User sửa đánh giá mình đã đăng

Kích hoạt (Trigger) User bấm nút “Sửa đánh giá”

User đã đăng đánh giá

Hậu điều kiện Đánh giá của User được cập nhật

Luồng sự kiện chính 1 User bấm nút sửa đánh giá

2 User nhập nội dung đánh giá mới

3 User bấm nút “Hoàn tất”

4 Hệ thống lưu và hiển thị nội dung đánh giá mới

Bảng 5.3.21 Đặc tả use case sửa đánh giá

5.3.13.1 Use case chỉnh sửa thông tin

5.3.13.1.1 Đặc tả use case chỉnh sửa thông tin

Tên Use-case Chỉnh sửa thông tin

Mô tả Use-case User có thể chỉnh sửa thông tin cá nhân tùy theo mong muốn của user

Kích hoạt (Trigger) User nhấn vào chỉnh sửa thông tin

Tiền điều kiện User đăng nhập vào website

Hậu điều kiện Thông tin được chỉnh sửa theo ý muốn của user

Luồng sự kiện chính 1 User nhấn vào nút chỉnh sửa

2 User điền các thông tin cần sửa chữa

3 User nhấn vào nút Lưu

Luồng sự kiện phụ 3a User nhấn vào nút Hủy Website sẽ không ghi nhận sự thay đổi

Luồng sự kiện ngoại lệ User thoát khỏi màn hình Chỉnh sửa thông tin Use case chỉnh sửa thông tin dừng lại

Bảng 5.3.22 Đặc tả use case chỉnh sửa thông tin

5.3.13.2 Use case vô hiệu hóa tài khoản

5.3.13.2.1 Đặc tả use case vô hiệu hóa tài khoản

Tên Use-case Vô hiệu hóa tài khoản

Mô tả Use-case User có thể tự vô hiệu hóa tài khoản của mình

Kích hoạt (Trigger) User nhấn Vô hiệu hóa

Website kết nối cơ sở dữ liệu

Hậu điều kiện Tài khoản user bị vô hiệu hóa

Luồng sự kiện chính 1 User nhấn vào nút Vô hiệu hóa

2 User nhấn vào nút Đồng ý

Luồng sự kiện phụ 2a User nhấn vào nút Hủy Website không vô hiệu hóa tài khoản user

Luồng sự kiện ngoại lệ User thoát khỏi màn hình Vô hiệu hóa Use case vô hiệu hóa dừng lại

Bảng 5.3.23 Đặc tả use case vô hiệu hóa tài khoản

5.3.13.3 Use case thay đổi mật khẩu

5.3.13.3.1 Đặc tả use case thay đổi mật khẩu

Tên Use-case Thay đổi mật khẩu

Mô tả Use-case User có khả năng thay đổi mật khẩu tài khoản

Kích hoạt (Trigger) User nhấn nút thông tin cá nhân

Hậu điều kiện Mật khẩu user được thay đổi

Luồng sự kiện chính 1.User nhập mật khẩu cũ

2 User nhập mật khẩu mới

3 User nhập mật khẩu mới lại lần nữa

4 Mật khẩu tài khoản User được thay đổi

Luồng sự kiện ngoại lệ Admin thoát khỏi màn hình thông tin cá nhân Use case thay đổi mật khẩu dừng lại

Bảng 5.3.24 Đặc tả use case thay đổi mật khẩu

THIẾT KẾ CƠ SỞ DỮ LIỆU

Sơ đồ ERD

Mô tả chi tiết

Tên trường Kiểu dữ liệu Ràng buộc Mô tả id INT Khóa chính Id tài khoản admin username VARCHAR(50) Not null Username tài khoản admin password VARCHAR(255) Not null Password tài khoản admin

Bảng 6.2.1 Bảng mô tả Admins

Tên trường Kiểu dữ liệu Ràng buộc Mô tả id INT Khóa chính Id tài khoản user username VARCHAR(50) Not null, unique Username tài khoản user password VARCHAR(255) Not null Password tài khoản user name VARCHAR(40) Not null Tên user phone_number VARCHAR(12) Not null, unique Số điện thoại user adress VARCHAR(255) Địa chỉ nhà user date_of_birth DATETIME is_active BOOLEAN defaultValue: true Xác định trạng thái tài khoản (0:

Bảng 6.2.2 Bảng mô tả Users

Tên trường Kiểu dữ liệu Ràng buộc Mô tả id INT Khóa chính Id cho sự kiện giảm giá event_name VARCHAR(100) Tên sự kiện start_date DATE Ngày bắt đầu end_date DATE Ngày kết thúc discount_percentage INT Phần trăm giảm is_active BOOLEAN Trạng thái hoạt động brand VARCHAR(100) Hãng có sự kiện category VARCHAR(100) Danh mục có sự kiện

Bảng 6.2.3 Bảng mô tả Saleevents

Tên trường Kiểu dữ liệu Ràng buộc Mô tả id INT Khóa chính Id của sản phẩm image_urls TEXT Lưu trữ trường dữ liệu ảnh name VARCHAR(500) Tên sản phẩm price DECIMAL(10,3) Giá sản phẩm brand VARCHAR(100) Hãng sản phẩm category VARCHAR(100) Danh mục sản phẩm ingredients LONGTEXT Thành phần sản phẩm quantity INT Số lượng sản phẩm hiện có

53 product_information TEXT Thông tin sản phẩm use_information TEXT Cách dùng sản phẩm specifications TEXT Thông tin thêm của sản phẩm is_on_sale BOOLEAN Trạng thái sale của sản phẩm user_rating DECIMAL(3,2) Đánh giá của user rate_count INT Số lượng đánh giá sold_count INT Số lượng được bán sale_event_id INT Khóa ngoại

Id của sự kiện giảm giá

Bảng 6.2.4 Bảng mô tả Items

Tên trường Kiểu dữ liệu Ràng buộc Mô tả id INT Khóa chính Id của đánh giá comment_text TEXT Not null Thông tin đánh giá comment_date DATE Not null Ngày đánh giá user_id INT Khóa ngoại

Id user item_id INT Khóa ngoại

Bảng 6.2.5 Bảng mô tả Comments

Tên trường Kiểu dữ liệu Ràng buộc Mô tả

54 id INT Khóa chính Id của cart item quantity INT Số lượng sản phẩm trong giỏ user_id INT Khóa ngoại

Id user item_id INT Khóa ngoại

Bảng 6.2.6 Bảng mô tả Carts

Tên trường Kiểu dữ liệu Ràng buộc Mô tả id INT Khóa chính Id của hóa đơn order_date DATE Ngày tạo hóa đơn total_amount DECIMAL(10,3) Tổng tiền shipping_fee DECIMAL(10,3) Phí vận chuyển is_confỉm BOOLEAN defaultValue: 0

Trạng thái của đơn (0: chưa thay đổi, 1 là chấp nhận, 2 là từ chối) dateconfirmed DATE Ngày được chấp nhận daterejected DATE Ngày bị từ chối user_id INT Khóa ngoại

Bảng 6.2.7 Bảng mô tả Orders

Tên trường Kiểu dữ liệu Ràng buộc Mô tả id INT Khóa chính Id của sản phẩm trong đơn quantity INT Số lượng sản phẩm trong đơn order_id INT Khóa ngoại

Id hóa đơn item_id INT Khóa ngoại

Bảng 6.2.8 Bảng mô tả Orderitems

THIẾT KẾ GIAO DIỆN

Màn hình trang chủ

Hình 7.1.1 Màn hình trang chủ

Hình 7.1.2 Các danh mục sản phẩm

Hình 7.1.3 Dropdown các chức năng của user

STT Tên Kiểu Chức năng

1 btnHome Link Thực hiện chuyển đến trang chủ

2 subNavCategory Dropdown Dropdown chọn danh mục cần tìm

3 inputSearch Input Vùng nhập liệu cho việc tìm kiếm

4 btnSearch Button Thực hiện việc tìm kiếm

5 btnProfile (chưa đăng nhập) Button Mở modal đăng nhập/ đăng ký

6 btnProfile (đã đăng nhập) Dropdown Hiển thị các chức năng của user

7 btnCart Link Thực hiện chuyển đến trang giỏ hàng

8 CarouselHotItem Carousel Danh sách các sản phẩm bán chạy

Danh sách các sản phẩm được người dùng đánh giá cao

10 btnAboutUs Link Thực hiện chuyển đến trang About us

11 itemCard Card Các thẻ thông tin vắng tắt sản phẩm

Bảng 7.1.1 Mô tả trang chủ

Màn hình danh sách sản phẩm theo danh mục

Hình 7.2.1 Màn hình danh sách sản phẩm theo danh mục

Hình 7.2.2 Các tiêu chí lọc kết quả

1 radioFilterOrder Radio Lựa chọn sắp xếp sản phẩm theo thứ

2 checkboxFilterOption Checkbox Lựa chọn các hạng mục cần lọc

Thực hiện việc di chuyển giữa các trang sản phẩm kế

Bảng 7.2.1 Mô tả danh sách sản phẩm theo danh mục

Màn hình kết quả tìm kiếm

Hình 7.3.1 Màn hình kết quả tìm kiếm

Lựa chọn sắp xếp sản phẩm theo thứ tự nào

2 pagination Pagination Thực hiện việc di

61 chuyển giữa các trang sản phẩm kế

Bảng 7.3.1 Mô tả kết quả tìm kiếm

Màn hình chi tiết sản phẩm

Hình 7.4.1 Màn hình chi tiết sản phẩm (có giảm giá)

Hình 7.4.2 Tab thông số sản phẩm

Hình 7.4.3 Tab thành phần sản phẩm

Hình 4.3 Tab thành phần sản phẩm

Hình 7.4.4 Tab hướng dẫn sử dụng

Hình 7.4.6 Màn hình chi tiết sản phẩm (không có giảm giá)

1 tabProductSpec Tab Chuyển qua tab thông số sản phẩm

Chuyển qua tab thành phần sản phẩm

3 tabUseInformation Tab Chuyển qua tab hướng dẫn sử dụng

4 tabComment Tab Chuyển qua tab đánh giá

ComboBox chọn số lượng sản phẩm cần mua

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

Bảng 7.4.1 Mô tả chi tiết sản phẩm

Màn hình thông tin người dùng

Hình 7.5.1 Màn hình thông tin người dùng

1 inputName Input Nhập liệu thông tin tên

2 inputDateOfBirth Input Nhập liệu thông tin ngày sinh

3 inputPhoneNumber Input Nhập liệu thông tin số điện thoại

4 inputAddress Input Nhập liệu thông tin địa chỉ

5 inputOldPassword Input Nhập liệu thông tin mật khẩu cũ

6 inputNewPassword Input Nhập liệu thông tin mật khẩu mới

Nhập liệu thông tin mật khẩu mới 1 lần nữa

8 btnChangePassword Button Thay đổi mật khẩu

Thay đổi thông tin theo thông tin đã nhập

Bảng 7.5.1 Mô tả thông tin người dùng

Màn hình giỏ hàng của người dùng

Hình 7.6.1 Màn hình giỏ hàng của người dùng

1 inputQuantity Input Nhập liệu thông tin số lượng sản phẩm

2 btnDelete Button Thực hiện việc xóa sản phẩm

3 btnCreateOrder Button Thực hiện việc tạo hóa đơn

Bảng 7.6.1 Mô tả giỏ hàng người dùng

Màn hình đơn hàng của người dùng

Hình 7.7.1 Màn hình đơn hàng của người dùng

1 tabOrderCreated Tab Chuyển qua tab hóa đơn mới tạo

2 tabOrderConfirmed Tab Chuyển qua tab hóa đơn được chấp nhận

3 tabOrderRejected Tab Chuyển qua tab hóa đơn bị từ chối

Bảng 7.7.1 Mô tả đơn hàng người dùng

Modal đăng nhập/ đăng ký

1 inputUsername Input Nhập liệu thông tin tài khoản

2 inputPassword Input Nhập liệu thông tin mật khẩu

Thực hiện việc đóng màn hình đăng nhập

4 btnLogin Button Thực hiện việc đăng nhập

5 tabLogin Tab Chuyển qua tab đăng nhập

7 tabRegister Tab Chuyển qua tab đăng kí

Bảng 7.8.1 Mô tả đăng nhập

1 inputName Input Nhập liệu thông tin tên nhân vật

2 inputPhoneNumber Input Nhập liệu thông tin số điện thoại

3 inputAddress Input Nhập liệu thông tin địa chỉ

4 inputUsername Input Nhập liệu thông tin tên tài khoản

5 inputPassword Input Nhập liệu thông tin mật khẩu

6 inputPasswordAgain Input Nhập liệu thông tin mật khẩu lần nữa

7 btnClose Button Thực hiện việc đóng màn hình đăng ký

8 btnRegister Button Thực hiện việc đăng ký

Bảng 7.8.2 Mô tả đăng ký

Màn hình quản lý hàng hóa của Admin

Hình 7.9.1 Màn hình quản lý hàng hóa của Admin

1 tabItem Tab Lựa chọn sắp xếp

69 sản phẩm theo thứ tự nào

2 tabSaleEvent Tab Lựa chọn các hạng mục cần tìm

Thực hiện việc chuyển đến trang kế tiếp

Thực hiện việc chuyển đến trang trước đó

Thực hiện việc di chuyển giữa các trang sản phẩm

6 dropDownCol DropDown Chọn cột cần hiển thị trên bảng

7 dropDownRow DropDown Chọn số hàng cần hiển thị trên bảng

Bảng 7.9.1 Mô tả quản lý hàng hóa

Màn hình quản lý chương trình giảm giá của Admin

Hình 7.10.1 Màn hình quản lý chương trình giảm giá của Admin

Thực hiện thêm chương trình giảm giá

2 btnMoreOptions Button Thực hiện mở rộng các chức năng thêm

Thực hiện việc chỉnh sửa chương trình

4 btnDelete Button Thực hiện việc xóa chương trình

Bảng 7.10.1 Mô tả quản lý chương trình giảm giá

Màn hình quản lý người dùng người dùng của Admin

Hình 7.11.1 Màn hình quản lý người dùng của Admin

Thực hiện việc vô hiệu hóa tài khoản người dùng

Thực hiện việc kích hoạt tài khoản người dùng

Bảng 7.11.1 Mô tả quản lý người dùng

Màn hình đơn hàng của Admin

Hình 7.12.1 Màn hình đơn hàng của Admin

1 btnAcceptOrder Button Chấp nhận đơn hàng

2 btnDenyOrder Button Từ chối đơn hàng

Chuyển sang tab đơn hàng chờ chấp nhận

Chuyển sang tab đơn hàng đã được chấp nhận

Chuyển sang tab đơn hàng đã bị từ chối

Bảng 7.12.1 Mô tả đơn hàng

Màn hình về chúng tôi

Hình 7.13.1 Màn hình về chúng tôi

1 linkLogoHome Link Chuyển về màn hình trang chủ

Bảng 7.13.1 Mô tả về chúng tôi

Màn hình không tìm thấy trang

Hình 7.14.1 Màn hình không tìm thấy trang

Định dạng
Số trang	88
Dung lượng	3,02 MB