Đồ án xây dựng website thương mại điện tử buôn bán điện thoại

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU12 1.1 Khảo sát hiện trạng

Đặc tả

Bảng 1.1 Bảng mô tả yêu cầu chức năng của hệ thống

Yêu cầu Mô tả Chi tiết

Yêu cầu nghiệp vụ Bảo mật Bảo mật thông tin, phiên làm việc của người dùng bằng JWT

Phân quyền người dùng trong hệ thống: Có

4 quyền cơ bản được xác định trong trang web là: ADMIN (người quản trị hệ thống), MANAGER (người quản trị cửa hàng) USER (ngườ dùng ứng dụng), SHIPPER (người dùng ứng dụng với chức năng giao hàng).

Lưu trữ Thông tin người dùng, sản phẩm, danh mục, thương hiệu, được lưu trữ trên bộ nhớ của cơ sở dữ liệu PostgreSQL.

Thư viện hình ảnh được lưu trữ trên Cloudinary và lưu trữ trong cơ sở dữ liệu dưới dạng url

Tra cứu Tìm sản phẩm: Hiển thị sản phẩm được yêu cầu tìm kiếm.

Tìm sản phẩm theo danh mục: Hiển thị danh sách sản phẩm theo từng danh mục và có hiển thị phân trangDanh sách giỏ hàng : Hiển thị các sản phẩm được chọn mua trong giỏ hàng

Danh sách hóa đơn và chi tiết hóa đơn:

Hiển thị danh sách các hóa đơn đã đặt của người dùng và chi tiết của hóa đơn

Danh sách sản phẩm yêu thích: Hiển thị danh sách sản phẩm mà người dùng yêu thích

Danh sách mã giảm giá: Hiển thị danh sách mã giảm giá

Tính toán Thống kê các thông tin như số người dùng, số đơn hàng, số sản phẩm, tổng giá trị hóa đơn.

Chức năng quản lý Chức năng Đăng ký tài khoản của người Đăng nhập dùng Đăng nhập bằng Google, Facebook Quản lý thông tin cá nhân Đổi mật khẩu Quên mật khẩu Quản lý thông tin địa chỉ Thêm, xóa, sửa giỏ hàng Thanh toán, đặt hàng Quản lý danh sách sản phẩm yêu thích Quản lý danh sách đơn hàng

Quản lý danh sách mã giảm giá

Quản lý Thêm, xóa, sửa danh mục danh mục sản phẩm

Quản lý Thêm, xóa, sửa thương hiệu thương hiệu

Quản lý sản Thêm, xóa, sửa sản phẩm phẩm

Quản lý mã Thêm, xóa, sửa mã giảm giá giảm giá

Quản lý Xem đánh giá đánh giá Ẩn đánh giá

Quản lý đơn Xem đơn hàng hàng

Xác nhận vận chuyển Hủy đơn hàng

Chức năng tự động Gửi thông Gửi thông báo khi người dùng xác nhận đặt báo hàng và tình trạng đơn hàng

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

Bảng 1.2 Bảng mô tả yêu cầu phi chức năng của hệ thống

Yêu cầu Mô tả Chi tiết

Chương trình xây Xây dựng Sử dụng Spring Boot và React. dựng trên tiêu chuẩn mô hình

Cấu trúc request và response theo mẫu Code cần có comment

Thiết bị sử dụng Trình duyệt Hỗ trợ Chrome version ≥ 40.0 web

Hỗ trợ Microsoft Edge version ≥ 88.0

Tốc độ và thời gian Tốc độ và Thời gian tối đa xử lý dữ liệu : 10 giây xử lý thời gian xử

Trong lúc xử lý phải hiển thị loading để lý phải tránh gây hiểu nhầm nhanh

Thông báo Đưa thông Thông báo cụ thể về lỗi, cách sử dụng, báo cụ thể thông tin thao tác một cách cụ thể nhất, không lan man.

Bảo mật trên trình Thông tin Tự động đăng xuất sau khoảng 10 phút duyệt session không hoạt động của người dùng.

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

1.3.1 Lược đồ use case tổng quan

Hình 1.5 Lược đồ use case tổng quan

Hình 1.6 Lược đồ use case phân hệ quản trị

1.3.2 Lược đồ use case chi tiết

1.3.2.1 Use case xác thực người dùng

Hình 1.7 Use case quản lý xác thực người dùng

Use Case Xác thực người dùng

Description Người dùng đăng nhập vào hệ thống để sử dụng dịch vụ

Trigger Người dùng muốn đăng nhập vào website phoneshop

Pre-Condition - Người dùng phải có sẵn tài khoản (số điện thoại, facebook, google)

- Tài khoản đã được phân quyền

- Thiết bị người dùng được kết nối internet khi sử dụng

Post-Condition - Người dùng đăng nhập thành công vào hệ thống

- Hệ thống thông báo đăng nhập thành công

Basic Flow 1 Người dùng truy cập vào website phoneshop

2 Người dùng nhập tài khoản của website và chọn đăng nhập

3 Hệ thống xác thực thông tin đăng nhập thành công và cho phép người dùng truy cập website

Alternative 2.1 Người dùng chọn phương thức đăng nhập bằng

Flow gmail, facebook, số điện thoại.

2.2 Người dùng chọn phương thức đăng nhập hoặc nhập tài khoản và tiến hành đăng nhập

2.3 Hệ thống chuyển sang trang đăng nhập của google, facebook hoặc đăng nhập bằng số điện thoại.

2.4 Google, Facebook xác thực thông tin đăng nhập và tiếp tục use case 3

Exception 3.1 Hệ thống xác thực thông tin đăng nhập không thành

Flow công và tiến hành thông báo

3.1.1 Người dùng chọn lệnh quên mật khẩu

3.1.2 Người dùng chọn lệnh đăng ký

Non- NFR1.1-1 Mật khẩu của người dùng phải được hash

1.3.2.2 Use case đăng ký tài khoản

Hình 1.8 Use case đăng ký tài khoản

Bảng 1.4 Bảng mô tả Use case đăng ký tài khoản

Use Case Đăng ký tài khoản

Description Tài khoản khách tiến hành đăng ký tài khoản bằng số điện thoại và mật khẩu

Trigger Người dùng muốn đăng ký tài khoản trên hệ thống

Pre-Condition - Truy cập vào trang web và thực hiện điền form đăng ký

Basic Flow 1 Người dùng điền form đăng ký

2 Hệ thống ghi nhận mẫu đăng ký

3 Hệ thống xuất thông báo cho người dùng

Alternative 2.1 Nếu tồn tại số điện thoại hoặc form sai yêu cầu thì xuất

2.2 Nếu thỏa mãn điều kiện thì tiến hành lưu người dùng vào hệ thống.

1.3.2.3 Use case xem sản phẩm

Hình 1.9 Use case xem sản phẩm Bảng 1.5 Bảng mô tả Use case xem sản phẩm

Use Case Xem chi tiết sản phẩm

Description Xem chi tiết sản phẩm

Trigger Người dùng muốn xem thông tin chi tiết của sản phẩm

Pre-Condition Truy cập vào một sản phẩm

Basic Flow 1 Người dùng nhấp vào một sản phẩm

2 Chọn các chức năng về sản phẩm

3 Tiến hành lưu thông tin vào hệ thống

Alternative A.F Thêm vào giỏ hàng: Thiện chức năng thêm sản phẩm

Flow vào giỏ hàng

A.F So sánh sản phẩm : Thiện chức năng so sánh sản phẩm

A.F Yêu thích sản phẩm : Thực hiện chức năng yêu thích sản phẩm nếu đã đăng nhập Và yêu cầu đăng nhập khi chưa đăng nhập

1.3.2.4 Use case tìm kiếm sản phẩm

Hình 1.10 Use case tìm kiếm sản phẩm Bảng 1.6 Bảng mô tả Use case tìm kiếm sản phẩm

Use Case Tìm kiếm sản phẩm

Description Người dùng muốn tìm kiếm sản phẩm theo yêu cầu

Trigger Người dùng muốn tìm kiếm sản phẩm

Basic Flow 1 Người dùng chọn phương thức tìm kiếm

2 Hiển thị thông tin danh sách sản phẩm theo yêu cầu

Alternative A.F Theo danh mục: Thiện chức năng tìm kiếm theo danh

A.F Theo thương hiệu: Thiện chức năng tìm kiếm theo thương hiệu yêu cầu A.F Theo từ khóa: Thiện chức năng tìm kiếm theo từ khóa yêu cầu

1.3.2.5 Use case xem giỏ hàng

Hình 1.11 Use case xem giỏ hàng Bảng 1.7 Bảng mô tả Use case xem giỏ hàng

Use Case Xem giỏ hàng

Description Cho phép người dùng xem giỏ hàng

Trigger Người dùng thêm sản phẩm vào giỏ hàng

Basic Flow 1 Người dùng nhấp vào Xem giỏ hàng

2 Chọn các chức năng với giỏ hàng

Alternative A.F Cập nhật giỏ hàng: Thiện chức năng thay đổi sản phẩm,

Flow số lượng trong giỏ hàng

A.F Xóa giỏ hàng: Xóa thông tin giỏ hàng

A.F Thanh toán: Thực hiện chức năng thanh toán nếu đã đăng nhập Và yêu cầu đăng nhập khi chưa đăng nhập

1.3.2.6 Use case quản lý tài khoản

Hình 1.12 Use case quản lý tài khoản Bảng 1.8 Bảng mô tả Use case quản lý tài khoản

Use Case Quản lý tài khoản

Description Cho phép người dùng quản lý tài khoản

Trigger Người dùng muốn quản lý tài khoản của mình

Pre-Condition - Người dùng đã đăng nhập vào hệ thống

- Nhấp vào chức năng quản lý tài khoản

Basic Flow 1 Người dùng truy cập vào trang quản lý tài khoản

2 Hệ thống hiển thị danh sách chức năng quản lý tài khoản

3 Nguời dùng chọn chức năng quản lý

Alternative A.F Chỉnh sửa thông tin: Thực hiện chức năng chỉnh sửa

Flow thông tin người dùng

A.F Đổi mật khẩu: Thực hiện chức năng đổi mật khẩu A.F Mã giảm giá: Thực hiện chức năng quản lý mã giảm giá A.F Lịch sử mua hàng : Thực hiện chức năng xem lịch sử mua hàng Và nếu đơn hàng đã giao thành công thì có thể tiến hành đánh giá

1.3.2.7 Use case quên mật khẩu

Hình 1.13 Use case quên mật khẩu Bảng 1.9 Bảng mô tả Use case quên mật khẩu

Use Case Quên mật khẩu

Description Người dùng tiến hành đặt lại mật khẩu

Trigger Người dùng quên mật khẩu

Pre-Condition - Người dùng phải có sẵn tài khoản trên hệ thống

- Chọn chức năng Quên sản phẩm

Basic Flow 1 Nhập thông tin để tiến hành nhận lại mật khẩu

2 Hệ thống gửi form nhận lại mật khẩu

3 Hệ thống thay đổi mật khẩu cho người dùng

Hình 1.14 Use case giao hàng Bảng 1.10 Bảng mô tả Use case giao hàng

Description Cho phép shipper tiến hành giao hàng

Trigger Shipper thực hiện giao hàng

Pre-Condition - Đã đăng nhập vào hệ thống

- Người dùng phải có phân quyền là SHIPPER

- Người dùng vào trang Quản lý tài khoản

- Người dùng đã được ADMIN, MANAGER thông báo có đơn giao hàng đã được tạo

Basic Flow 1 Shipper thực hiện xem danh sách đơn giao hàng

2 Tiến hành chức năng giao hàng

1.3.2.9 Use case thống kê hệ thống

Hình 1.15 Use case thống kê hệ thống

Bảng 1.11 Bảng mô tả Use case thống kê hệ thống

Use Case Thống kê hệ thống

Description Cho phép admin xem các thống kê trong hệ thống

Trigger Admin muốn xem thống kê hệ thống

- Người dùng phải có phân quyền là ADMIN

Basic Flow 1 Truy cập vào trang thống kê hệ thống

1.3.2.10 Use case quản lý danh mục

Hình 1.16 Use case quản lý danh mục Bảng 1.12 Bảng mô tả Use case quản lý danh mục

Use Case Quản lý danh mục

Description Cho phép admin quản lý danh mục

Trigger Admin muốn quản lý danh mục

- Truy cập vào trang quản trị ADMIN

Basic Flow 1 Admin chọn mục “Quản lý danh mục”

2 Chọn các chức năng trong quản lý danh mục

Alternative A.F Thêm danh mục: Thực hiện chức năng thêm danh mục

Flow A.F Sửa danh mục: Thực hiện chức năng sửa thông tin của danh mục A.F Ẩn danh mục: Thực hiện chức nâng ẩn danh mục

Business Rules 1 Các tên danh mục phải đảm bảo hợp lý với hệ thống

2 Chắc chắn là không còn sản phẩm nào trong danh mục mới có thể ẩn danh mục

1.3.2.11 Use case quản lý thương hiệu

Bảng 1.13 Bảng mô tả Use case quản lý thương hiệu

Use Case Quản lý thương hiệu

Description Cho phép admin quản lý thương hiệu

Trigger Admin muốn quản lý thương hiệu

Basic Flow 1 Admin chọn quản lý thương hiệu

2 Admin chọn các chức năng trong mục quản lý thương hiệu

Alternative A.F Thêm thương hiệu: Thực hiện chức năng thêm thương

A.F Sửa thương hiệu: Thực hiện chức năng sửa thương hiệu A.F Ẩn thương hiệu: Thực hiện chức năng ẩn thương hiệu

Business Rules - Các thương hiệu phải được thêm, sửa, ẩn một cách hợp lệ

1.3.2.12 Use Case quản lý sản phẩm

Hình 1.18 Use Case quản lý sản phẩm Bảng 1.14 Bảng mô tả Use case quản lý sản phẩm

Use Case Quản lý sản phẩm

Description Cho phép admin quản lý sản phẩm

Trigger Admin và Manager muốn quản lý sản phẩm

- Người dùng phải có phân quyền là ADMIN hoặcMANAGER

- Truy cập vào trang quản trị ADMIN, MANAGER

Basic Flow 1 Admin hoặc Manager chọn quản lý sản phẩm

2 Admin hoặc Manager chọn các chức năng trong mục quản lý sản phẩm

Alternative A.F Thêm sản phẩm: Thực hiện chức năng thêm sản phẩm

Flow A.F Sửa sản phẩm: Thực hiện chức năng sửa sản phẩm

A.F Ẩn sản phẩm: Thực hiện chức năng ẩn sản phẩm

Business Rules - Các sản phẩm phải được thêm, sửa, ẩn một cách hợp lệ

1.3.2.13 Use Case quản lý mã giảm giá

Hình 1.19 Use Case quản lý mã giảm giá

Bảng 1.15 Bảng mô tả Use case quản lý mã giảm giá

Use Case Quản lý mã giảm giá

Description Cho phép Admin, Manager quản lý mã giảm giá

Trigger Admin, Manager muốn quản lý mã giảm giá

- Người dùng phải có phân quyền là ADMIN, MANAGER

Basic Flow 1 Admin, Manager chọn quản lý mã giảm giá

2 Admin, Manager chọn các chức năng trong mục quản lý mã giảm giá

Alternative A.F Thêm mã giảm giá: Thực hiện chức năng thêm mã giảm

A.F Sửa mã giảm giá: Thực hiện chức năng sửa mã giảm giá A.F Ẩn mã giảm giá: Thực hiện chức năng ẩn mã giảm giá

Business Rules - Các mã giảm giá phải được thêm, sửa, ẩn một cách hợp lệ

1.3.2.14 Use Case quản lý thuộc tính

Hình 1.20 Use Case quản lý thuộc tính Bảng 1.16 Bảng mô tả Use case quản lý thuộc tính

Use Case Quản lý thuộc tính

Description Cho phép admin quản lý thuộc tính

Trigger Admin, muốn quản lý thuộc tính

Basic Flow 1 Admin chọn quản lý thuộc tính

2 Admin chọn các chức năng trong mục quản lý thuộc tính

Alternative A.F Thêm thuộc tính: Thực hiện chức năng thêm thuộc tính

Flow A.F Sửa thuộc tính: Thực hiện chức năng sửa thuộc tính

Business Rules - Các thuộc tính phải được thêm, sửa, ẩn một cách hợp lệ

1.3.2.15 Use Case quản lý đơn hàng

Hình 1.21 Use Case quản lý đơn hàng

Bảng 1.17 Bảng mô tả Use case quản lý đơn hàng

Use Case Quản lý đơn hàng

Description Cho phép admin, manager quản lý đơn hàng

Trigger Admin, Manager muốn quản lý đơn hàng

Basic Flow 1 Admin, Manager chọn quản lý đơn hàng

2 Admin, Manager chọn các chức năng trong mục quản lý đơn hàng

Alternative A.F Xem đơn hàng: Thực hiện chức năng xem đơn hàng

Flow A.F Hủy đơn hàng: Thực hiện chức năng hủy đơn hàng

Bảng 1.18 Bảng mô tả Use case quản lý đơn hàng

Use Case Xem đơn hàng

Description Cho phép admin, manager xem đơn hàng

Trigger Admin, Manager muốn xem đơn hàng

Basic Flow 1 Admin, Manager chọn xem đơn hàng

2 Admin, Manager chọn các chức năng trong mục xem đơn hàng

Alternative A.F Chọn giao hàng: Thực hiện chức năng chọn giao hàng

Flow A.F In hóa đơn: Thực hiện chức năng in đơn hàng

1.3.2.16 Use Case quản lý đánh giá

Hình 1.22 Use Case quản lý đánh giá Bảng 1.19 Bảng mô tả Use case quản lý đánh giá

Use Case Quản lý đánh giá

Description Cho phép admin, manager quản lý đánh giá

Trigger Admin, Manager muốn quản lý đánh giá

Basic Flow 1 Admin, Manager chọn quản lý đánh giá

2 Admin, Manager chọn các chức năng trong mục quản lý đánh giá

Alternative A.F Xem đánh giá: Thực hiện chức năng xem đánh giá

Flow A.F Ẩn đánh giá: Thực hiện chức năng ẩn đánh giá

1.3.2.17 Use Case quản lý người dùng

Hình 1.23 Use Case quản lý người dùng Bảng 1.20 Bảng mô tả Use case quản lý người dùng

Use Case Quản lý người dùng

Description Cho phép admin quản lý người dùng

Trigger Admin muốn quản lý đánh giá

Basic Flow 1 Admin chọn quản lý người dùng

2 Admin chọn các chức năng trong mục quản lý người dùng

Alternative A.F Xem người dùng: Thực hiện chức năng xem người

A.F Nâng quyền người dùng: Thực hiện chức năng nâng quyền người dùng A.F Khóa tài khoản: Thực hiện chức năng khóa người dùng

Hình 1.24 Use Case đăng xuất Bảng 1.21 Bảng mô tả Use case đăng xuất

Description Cho phép người dùng đăng xuất khỏi hệ thống

Trigger Người dùng muốn đăng xuất khỏi hệ thống

Basic Flow 1 Người dùng truy cập vào trang quản lý người dùng

CƠ SỞ LÝ THUYẾT

Spring framework

Spring Boot là một công cụ giúp chúng ta phát triển các ứng dụng web và các microservice với Spring Framework một cách nhanh chóng và dễ dàng hơn Thông qua Spring Boot, việc cấu hình Spring sẽ được giảm thiểu một cách tối đa Spring Boot hỗ trợ các bộ chứa nhúng (Embedded containers) giúp các ứng dụng web có thể chạy độc lập mà không cần triển khai chúng lên các Web Server [1]

2.1.2 Các chức năng chính của Spring Boot

Các chức năng của Spring Boot [1] :

- Spring Boot được dùng để tạo các ứng dụng độc lập dựa trên Spring.

- Cung cấp rất nhiều các plugin để phát triển và test các ứng dụng Spring Boot nhanh chóng sử dụng các công cụ như Maven và Gradle.

- Có thể nhúng trực tiếp Tomcat, Jetty hoặc Undertow giúp chạy các ứng dụng web mà không cần phải triển khai file WAR.

- Stater Dependency giúp chạy các cấu hình Maven trở nên đơn giản hơn.

- Không sinh ra code cấu hình, không yêu cầu phải cấu hình bằng XML.

Spring Security là một phần của Spring Framework, hỗ trợ việc triển khai các biện pháp bảo mật ở tầng ứng dụng Spring Security hoạt động xoay quanh 2 vấn đề chính là xử lý xác thực và xử lý bảo mật ở cấp độ Web request Spring Security là một framework mạnh và có độ tuỳ biến cao, do đó các lập trình viên có thể sử dụng các cấu hình có sẵn của nó hoặc tuỳ chỉnh theo các bài toán được đặt ra trong hệ thống [2]

2.1.4 Các chức năng chính Spring Security

Các chức năng của Spring Security đem lại cho người dùng như [2] :

- Tích hợp các Servlet API.

- Tích hợp tuỳ chọn với Spring Web MVC.

- Cung cấp các sự bảo vệ chống lại các cuộc tấn công như session fixation, clickjacking, CSRF,

- Hỗ trợ toàn diện và có thể mở rộng cho cả xác thực và phân quyền.

2.1.5 Giới thiệu Spring Data JPA

Spring Data JPA là một công nghệ trong Spring Boot cung cấp cho chúng ta các tính năng để dễ dàng tương tác với cơ sở dữ liệu Nó là một phần mở rộng của JPA (Java Persistence API) và sử dụng Hibernate để thực hiện các thao tác trên cơ sở dữ liệu Với Spring Data JPA, chúng ta không cần phải viết các truy vấn SQL trực tiếp mà có thể sử dụng các phương thức được tạo tự động từ các Repository Interface để thực hiện các truy vấn đó Ngoài ra, Spring Data JPA cũng cung cấp cho chúng ta các tính năng như Paging and Sorting, Query By Example, Specification, Native Queries,

giúp tăng tính linh hoạt và hiệu suất trong ứng dụng [3]

2.1.6 Các chức năng chính Spring Data JPA

Các chức năng của Spring Data JPA [3] :

- Tính linh hoạt cao: Spring Data JPA cung cấp cho chúng ta nhiều tính năng như Paging and Sorting, Query By Example, Specification, Native Queries, giúp tăng tính linh hoạt và đơn giản hóa việc truy vấn dữ liệu trong ứng dụng.

- Giảm thiểu sự lặp lại của mã: Spring Data JPA giúp giảm thiểu sự lặp lại của mã thông qua việc tạo tự động các phương thức từ các khai báo Repository Interface, giúp tăng tính linh hoạt và dễ bảo trì cho ứng dụng.

- Tích hợp tốt với Spring Boot: Spring Data JPA tích hợp tốt với Spring Boot, giúp cho việc sử dụng trở nên đơn giản và dễ dàng hơn.

-Tính tương thích cao: Spring Data JPA tương thích với nhiều loại cơ sở dữ liệu, bao gồm cả MySQL, PostgreSQL, Oracle, Microsoft SQL Server, MongoDB, Cassandra, Neo4j, vv Điều này giúp cho việc chuyển đổi giữa các cơ sở dữ liệu trở nên dễ dàng hơn.

- Được hỗ trợ bởi cộng đồng lớn: Spring Data JPA là một công nghệ phổ biến và được sử dụng rộng rãi trong cộng đồng lập trình Spring, do đó có rất nhiều tài liệu và hỗ trợ từ cộng đồng lập trình viên trên toàn thế giới.

- Tính bảo mật cao: Spring Data JPA giúp cho việc xử lý các câu lệnh truy vấn dữ liệu trở nên an toàn hơn, vì nó sử dụng các cơ chế bảo mật được tích hợp trong JPA, giúp tránh được các lỗ hổng bảo mật như SQL Injection.2.2

ReactJS hay react là một thư viện, được viết bằng JavaScript, dùng để xây dựng hơn 94000 trang web đang sử dụng Mục đích chính đó chính là mỗi website sử dụng reactJS thì phải chạy thật mượt hoặc thật nhanh, có khả năng mở rộng cao và đơn giản thực hiện [4]

Về cơ bản, các chức năng của reactJS thường xuất phát từ việc tập trung các phần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ giao diện của người dùng từ một cách phức tạp và biến nó trở thành các phần mềm đơn giản Hiểu đơn giản thì các render dữ liệu không chỉ được thực hiện ở vị trí server mà còn ở vị trí client khi sử dụng reactJS [4]

Hiện nay, reactJS thường được dùng để thiết kế bố cục cho trang web, nhưng hạn chế đó chính là cấu trúc khó Thay vào đó sử dụng JSX và nhúng vào các đoạn HTML và javascript, bạn sẽ thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu các code khi biên soạn, vừa giúp ích cho người lập trình tiện cho việc biên dịch [4]

Khi sử dụng react JS người dùng có thể khai thác được nhiều chức năng khác nhau, trong đó phải kể đến [4] :

- Viết ứng dụng trực tiếp trên JavaScript

- Phá vỡ những cấu trúc UI phức tạp, biến chúng trở thành các component độc lập.

- Chuyển các dữ liệu đã được tùy biến đến một UI component cụ thể

- Thay đổi trạng thái cho nhiều component (child) trên ứng dụng nhưng không làm ảnh hưởng tới các component gốc (parent) đang ở trạng thái Stateful.

- Biết được chính xác khi nào cần render lại hoặc khi nào cần bỏ đi các DOM chính.

PostgreSQL

PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ-đối tượng (object- relational database management system) có mục đích chung, hệ thống cơ sở dữ liệu mã nguồn mở tiên tiến nhất hiện nay PostgreSQL là một phần mềm mã nguồn mở miễn phí Mã nguồn của phần mềm khả dụng theo license của PostgreSQL, một license nguồn mở tự do Theo đó, bạn sẽ được tự do sử dụng, sửa đổi và phân phốiPostgreSQL dưới mọi hình thức.PostgreSQL không yêu cầu quá nhiều công tác bảo

PostgreSQL, chi phí sở hữu sẽ thấp hơn so với các hệ thống quản trị dữ liệu khác [5]

PostgreSQL sở hữu một hệ chức năng đa dạng giúp hỗ trợ các nhà phát triển xây dựng app, các nhà quản trị bảo vệ toàn vẹn dữ liệu, và tạo ra một môi trường chịu lỗi fault-tolerant giúp bạn quản lý dữ liệu bất kể tập dữ liệu lớn hay nhỏ Bên cạnh hệ thống nguồn mở và miễn phí, PostgreSQL cũng có khả năng mở rộng tuyệt vời Dưới đây là hệ chức năng vô cùng đa dạng của PostgreSQL [5] :

+Nguyên hàm: Số nguyên, số, chuỗi, Boolean

+Cấu trúc: Date/Time, Array, Phạm vi, UUID

+Document: JSON/JSONB, XML, Key-value (Hstore)

+Hình học: Điểm, Đường thẳng, Vòng tròn, Đa giác

+Tùy chỉnh: Composite, Các kiểu tùy chỉnh

+Ràng buộc loại trừ

+Khóa hàm số/ Explicit Locks, Khóa khuyến nghị/ Advisory Locks

+Lập danh mục: B-tree, Multicolumn, Expressions, Partial

+Lập danh mục nâng cao: GiST, SP-Gist, KNN Gist, GIN, BRIN, Bloom filters +Trình lập kế hoạch / trình tối ưu hóa truy vấn phức tạp, quét index-only, thống kê số liệu trên nhiều cột.

+Giao tác, Giao tác dạng nest (thông qua lưu điểm)

+Điều khiển đồng thời nhiều phiên bản (MVCC)

+Truy vấn đọc song song

+Tất cả các mức độ giao dịch độc lập được xác định trong tiêu chuẩn SQL, bao gồm cả Serializable

+Độ tin cậy, phục hồi sau thảm hoạ

+Replication: Không đồng bộ, Đồng bộ, Logical

+ Khôi phục điểm-theo-thời gian (Point-in-time-recovery - PITR), active standbys

+Xác thực: GSSAPI, SSPI, LDAP, SCRAM-SHA-256, Certificate và các hình thức khác

+Hệ thống kiểm soát truy cập mạnh mẽ

+Bảo mật cấp độ cột và hàng

+Ngôn ngữ thủ tục: PL / PGSQL, Perl, Python (và nhiều ngôn ngữ khác)

+Trình wrapper dữ liệu ngoài: kết nối với các cơ sở dữ liệu hoặc luồng khác với giao diện SQL chuẩn

+Và nhiều tiện ích mở rộng cung cấp chức năng bổ sung, bao gồm cả PostGIS

+Hỗ trợ các bộ ký tự quốc tế, ví dụ: thông qua ICU collations

+Tìm kiếm văn bản đầy đủ

Cloudinary

Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình ảnh bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery.Với cloudinary bạn có thể dễ dàng upload ảnh lên cloud, tự động thực thi các thao tác với ảnh một cách thông minh mà không cần phải cài đặt bất kì một phần mềm phức tạp nào khác. Cloudinary cung cấp các APIs toàn diện và màn hình quản lý giúp chúng ta dễ dàng tích hợp vào các trang web và ứng dụng di động [6]

Cloudinary cung cấp một Ruby Gem để dễ dàng cho việc tương tác với các app viết bởi ngôn ngữ Ruby với một số framework như là Rails hay Sinatra với các tương tác chính sau [6] :

- Xây dựng các URL để chuyển đổi và thao tác với hình ảnh

- API wrappers: upload image, quản lý và nhiều thứ khác

- Upload image trực tiếp từ trình duyệt sử dụng một jQuery plugin.

- Tích hợp với Active Record

- Hình ảnh tĩnh đồng bộ với CDN delivery

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

Lược đồ lớp

Lược đồ tuần tự

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

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

Hình 3.4 Lược đồ tuần tự “Đăng nhập bằng google”

Hình 3.5 Lược đồ tuần tự “Đăng nhập bằng facebook”

Hình 3.6 Lược đồ tuần tự “Quên mật khẩu”

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

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

3.1.9 Thêm địa chỉ người dùng

Hình 3.9 Lược đồ tuần tự “Thêm địa chỉ người dùng”

Hình 3.10 Lược đồ tuần tự “Chỉnh sửa địa chỉ”

Hình 3.11 Lược đồ tuần tự “Xóa địa chỉ”

Hình 3.12 Lược đồ tuần tự “Thêm đánh giá”

Hình 3.13 Lược đồ tuần tự “Chỉnh sửa đánh giá”

Hình 3.14 Lược đồ tuần tự “Xóa đánh giá”

Hình 3.15 Lược đồ tuần tự “Yêu thích sản phẩm”

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

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

3.2.16 Xóa sản phẩm trong giỏ hàng

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

Hình 3.18 Lược đồ tuần tự “Tiến hành đặt hàng”

Hình 3.19 Lược đồ tuần tự “Đặt hàng với COD”

Hình 3.20 Lược đồ tuần tự “Thanh toán với Paypal”

3.2.20 Thanh toán với Momo QR

Hình 3.21 Lược đồ tuần tự “Thanh toán với Momo QR”

3.2.21 Thanh toán với Momo ATM

Hình 3.22 Lược đồ tuần tự “Thanh toán với Momo ATM”

3.2.22 Thay đổi ảnh đại diện

Hình 3.23 Lược đồ tuần tự “Thay đổi ảnh đại diện”

Hình 3.24 Lược đồ tuần tự “Nhận mã giảm giá”

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

Hình 3.26 Lược đồ tuần tự “Sửa danh mục”

Hình 3.27 Lược đồ tuần tự “Xóa danh mục”

Hình 3.28 Lược đồ tuần tự “Thêm thương hiệu”

Hình 3.29 Lược đồ tuần tự “Chỉnh sửa thương hiệu”

Hình 3.30 Lược đồ tuần tự “Xóa thương hiệu”

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

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

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

Hình 3.34 Lược đồ tuần tự “Thêm mã giảm giá”

3.2.34 Chỉnh sửa mã giảm giá

Hình 3.35 Lược đồ tuần tự “Chỉnh sửa mã giảm giá”

Hình 3.36 Lược đồ tuần tự “Xóa mã giảm giá”

Hình 3.37 Lược đồ tuần tự “Ẩn đánh giá”

Cơ sở dữ liệu

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

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

Bảng 3.1 Bảng danh sách các bảng trong cơ sở dữ liệu

STT Tên bảng Tên cột Mô tả

1 users user_id Chứa các thông tin lưu trữ người dùng active birth_date country create_at email facebook_auth full_name gender google_auth img nick_name password phone status update_at

2 roles id Chứa thông tin các phân quyền trong name hệ thống

3 user_role user_id Chứa thông tin phân quyền của role_id người dùng

4 voucher voucher_id Chứa thông tin mã giảm giá của amount người dùng create_at expired_date from_date status to_date type value

5 user_voucher voucher_id user_id Chứa thông tin các mã giảm giá của người dùng

6 user_notifications notification_id Chứa các thông báo của người date_create dùng message status type uuid

7 brands brand_id Chứa các thông tin thương hiệu address_details commune_id district_id province_id brand_description logo brand_name brand_phone year_create

8 products product_id Chứa thông tin sản phẩm create_at product_description product_discount product_inventory product_name product_price product_sell_amount product_status brand_id category_id

9 list_img_products img_id Chứa thông tin danh sách hình url ảnh của sản phẩm product_id

10 favorite_list user_id Chứa danh sách sản phẩm yêu product_id thích của người dùng

11 category category_id Chứa danh sách các danh mục category_name parent_id

12 attribute attribute_id Chứa danh sách tên thuộc tính name

13 attribute_options id Chứa danh sách các lựa chọn của value thuộc tính attribute_id

14 attribute_ id options_detail value Chứa danh sách chênh lệch giá trị attribute_option_id của các thuộc tính product_id với mỗi sản phẩm

15 carts cart_id Chứa danh sách các giỏ hàng của active người dùng quantity status order_id product_id user_id

16 cart_entity_list_ cart_entity_cart_id Chứa danh sách attribute_option người dùng lựa list_attribute_option chọn các thuộc tính

17 orders order_id Chứa thông tin đơn hàng create_date del_status expected_date name status_payment total user_address payment_type ship_type user_order voucher_order status

18 address id Chứa thông tin địa chỉ nhận hàng address_detail commune company_name district full_name phone_number province address_type user

19 address_type id Chứa các loại địa chỉ address_type_name

20 ships ship_id Chứa các phương thức giao hàng ship_price ship_type

21 payments payment_id Chứa các phương thức thanh toán payment_name

22 product_ratings id date message Chứa danh sách đánh giá của rating_point người dùng product_id user_id

23 rating_comments id Chứa các bình luận về sản phẩm comment rating_id user_id

24 rating_product_like id Chứa các đánh giá của người dùng rating_id user_id

25 rating_images id Chứa danh sách hình ảnh đánh giá image_id rating_id

26 shipping id Chứa danh sách giao hàng shipper_id state update_at order_id image_1 image_2 image_3

Thiết kế giao diện

Hình 3.39 Giao diện trang chủ - 1

Bảng 3.2 Chi tiết trang chủ

STT Tên Định dạng Tham chiếu Sự kiện

1 Logo Trang web Link Trang chủ Nhấn vào sẽ chuyển đến trang chủ

2 Danh mục Drop List Danh sách Nhấn vào sẽ xuất hiện danh mục danh sách danh mục

Từ khóa dùng Nhấn vào và nhập từ

3 Ô tìm kiếm TextField khóa và nhấn Enter để để tìm kiếm tìm kiếm

Gọi đến tổng Khi nhấn vào thực hiện

4 Nút gọi điện Button gọi điện đến số điện thoại đài của tổng đài

5 Giỏ hàng Link Trang giỏ Nhấn vào sẽ chuyển đến hàng trang giỏ hàng

6 Đăng nhập Button Trang đăng Nhấn và chuyển hướng nhập đến trang đăng nhập

Trang chi tiết Nhấn và chuyển tiếp đến

7 Quảng cáo Image sản phẩm được quảng sản phẩm cáo trên hình

8 Nút quay lại Button Trang chủ Nhấn và chuyển đổi về quảng cáo trước quảng cáo phía trước

9 Nút tiếp tục xem Button Trang chủ Nhấn và chuyển đổi về quảng cáo sau quảng cáo phía sau

Trang chi tiết Nhấn và chuyển tiếp đến

10 Quảng cáo Image sản phẩm được quảng sản phẩm cáo trên hình

11 Nút chat Button Thực hiện chat Nhấn và thực hiện chat với facebook với fanpage của cửa hàng

Chi tiết sản Nhấn và chuyển hướng

12 Sản phẩm Card View phẩm được đến trang chi tiết sản đánh giá cao phẩm được đánh giá cao

13 Sản phẩm Card View phẩm được đến trang chi tiết sản yêu thích phẩm được yêu thích

14 Sản phẩm Card View đến trang chi tiết sản phẩm phẩm

Hiển thị thêm Khi nhấn thực hiện xuất

15 Xem thêm Button hiện thêm các sản phẩm sản phẩm khác

Chứa các thông tin trang web

Chuyển hướng vào các thông tin trang web

3.4.2 Giao diện trang đăng nhập

Hình 3.42 Giao diện trang đăng nhập Bảng 3.4 Chi tiết trang đăng nhập

Số điện thoại Nhập số điện thoại để

1 Ô điện thoại TextField dùng để đăng đăng nhập nhập

Mật khẩu Nhập mật khẩu để đăng

2 Ô mật khẩu TextField dùng để đăng nhập nhập

3 Đăng nhập Button Thực hiện Nhấn vào sẽ thực hiện đăng nhập đăng nhập

Trang quên Nhấn vào sẽ chuyển

4 Quên mật khẩu Link hướng đến trang quên mật khẩu mật khẩu

5 Đăng ký Link Trang đăng ký Nhấn vào sẽ chuyển hướng đến trang đăng ký Đăng nhập Khi nhấn vào thực hiện

6 Login Facebook Button chuyển hướng đến đăng với Facebook nhập bằng Facebook Đăng nhập Khi nhấn vào thực hiện

7 Login Google Button chuyển hướng đến đăng với Google nhập bằng Google

3.4.3 Giao diện trang đăng ký

Hình 3.43 Giao diện trang đăng ký Bảng 3.4 Chi tiết trang đăng ký

1 Đóng trang Button Đóng trang Khi nhấn vào thực hiện đăng ký đóng trang đăng ký

Số điện thoại Nhập số điện thoại để

2 Ô điện thoại TextField dùng để đăng đăng ký ký

Mật khẩu Nhập mật khẩu để đăng

3 Ô mật khẩu TextField dùng để đăng ký ký

4 Ô nhập lại mật TextField khẩu dùng để Nhập lại mật khẩu để khẩu xác nhận đăng xác nhận đăng ký ký

5 Đăng ký Button Đăng ký Nhấn vào sẽ thực hiện đăng ký tài khoản Đăng nhập Khi nhấn vào thực hiện

6 Login Facebook Button chuyển hướng đến đăng với Facebook nhập bằng Facebook Đăng nhập Khi nhấn vào thực hiện

7 Login Google Button chuyển hướng đến đăng với Google nhập bằng Google

3.4.4 Giao diện trang quên mật khẩu

Hình 3.44 Giao diện trang quên mật khẩu Bảng 3.5 Chi tiết trang quên mật khẩu

STT Tên Định dạng Tham chiếu Sự kiện Đóng trang Khi nhấn vào thực hiện

1 Đóng trang Button đóng trang quên mật quên mật khẩu khẩu

2 Nút trở về Button Đăng nhập Nhấn vào sẽ thực hiện trở về trang đăng nhập

3 Ô điện thoại/ TextField email dùng để Nhập số điện thoại hoặc email lấy lại mật email để lấy lại mật khẩu khẩu

4 Lấy lại mật khẩu Button Quên mật Nhấn vào sẽ thực hiện khẩu nhận lại mật khẩu

3.4.5 Giao diện danh mục sản phẩm

Hình 3.45 Giao diện danh mục sản phẩm Bảng 3.6 Chi tiết danh mục sản phẩm

Trang tìm Khi nhấn vào thực hiện

1 Danh mục Link kiếm sản chuyển hướng đến trang phẩm theo tìm sản phẩm theo danh danh mục mục

3.4.6 Giao diện tìm sản phẩm theo danh mục

Hình 3.46 Giao diện tìm sản phẩm theo danh mục – 1

Hình 3.47 Giao diện tìm sản phẩm theo danh mục – 2

Bảng 3.7 Chi tiết trang tìm sản phẩm theo danh mục

1 Danh mục con Link Tìm kiếm theo Nhấn vào sẽ thực hiện danh mục tìm kiếm theo danh mục Ô sản phẩm Trang chi tiết Nhấn vào sẽ chuyển

2 Card View hướng đến trang chi tiết khuyến mãi sản phẩm sản phẩm

3 Tiêu chí sắp xếp Tab Sắp xếp sản Nhấn vào sẽ sắp xếp sản phẩm phẩm theo tiêu chí

Trang chi tiết Nhấn vào sẽ chuyển

4 Ô sản phẩm Card View hướng đến trang chi tiết sản phẩm sản phẩm

3.4.7 Giao diện chi tiết sản phẩm

Hình 3.48 Giao diện chi tiết sản phẩm – 1

Hình 3.49 Giao diện chi tiết sản phẩm – 2

Bảng 3.8 Chi tiết trang chi tiết sản phẩm

Thuộc tính Khi nhấn vào thực hiện

1 Thuộc tính Button chọn thuộc tính sản sản phẩm phẩm

Thêm vào giỏ Thêm vào giỏ Nhấn vào sẽ thực hiện

2 Button thêm sản phẩm vào giỏ hàng hàng hàng

Yêu thích sản Yêu thích sản Nhấn vào sẽ thêm sản

3 Button phẩm vào danh sách yêu phẩm phẩm thích

4 Hình ảnh sản Image Hình ảnh sản Nhấn vào sẽ hiện hình phẩm phẩm ảnh sản phẩm

5 Xem thông số chi Button Hiện đầy đủ Hiện đầy đủ thông số chi tiết thông số tiết của sản phẩm

6 Thêm sản phẩm Button Trang so sánh Thực hiện thêm sản để so sánh sản phẩm phẩm vào để so sánh

7 Trang so sánh Button Trang so sánh Thực hiện tiến vào trang sản phẩm sản phẩm so sánh sản phẩm

9 Tiêu chí sắp xếp Tab Sắp xếp đánh Nhấn vào sẽ sắp xếp đánh giá giá đánh giá theo tiêu chí

10 Ô bình luận TextField Bình luận Nhấn vào bình luận

11 Thêm bình luận Button Thêm bình Nhấn để thêm bình luận luận

Hình 3.50 Giao diện giỏ hàng

Bảng 3.9 Chi tiết trang giỏ hàng

Chọn sản Khi nhấn vào thực hiện

1 Chọn thanh toán CheckBox chọn sản phẩm thanh phẩm toán

Tăng số lượng Nhấn vào sẽ thực hiện

3 Tăng số lượng Button tăng số lượng sản phẩm sản phẩm trong giỏ hàng

4 Ô số lượng TextField Số lượng sản Thay đổi số lượng sản phẩm phẩm

5 Xóa sản phẩm Button Xóa sản phẩm Nhấn vào sẽ xóa sản khỏi giỏ hàng khỏi giỏ hàng phẩm khỏi giỏ hàng

Thực hiện Nhấn vào sẽ thực hiện

6 Thanh toán Button thanh toán các sản phẩm thanh toán được chọn

Tiếp tục mua Khi nhấn vào thực hiện

7 Button Trang chủ chuyển hướng về trang hàng chủ

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

Hình 3.51 Giao diện trang tìm kiếm sản phẩm Bảng 3.10 Chi tiết trang tìm kiếm sản phẩm

Tìm sản phẩm Nhấn vào sẽ chuyển

1 Thương hiệu Card View theo thương hướng đến trang tìm sản hiệu phẩm theo thương hiệu

2 Tiêu chí sắp xếp Tab Sắp xếp sản Nhấn vào sẽ sắp xếp sản sản phẩm phẩm phẩm theo tiêu chí

3.4.10 Giao diện trang chủ sau khi đăng nhập

Hình 3.52 Giao diện trang chủ sau khi đăng nhập Bảng 3.11 Chi tiết trang chủ sau khi đăng nhập

Quản lý tài Quản lý tài Nhấn vào sẽ chuyển

1 Link hướng đến trang quản lý khoản khoản tài khoản

3.4.11 Giao diện trang quản lý tài khoản

Hình 3.53 Giao diện trang quản lý tài khoản

Bảng 3.12 Chi tiết trang quản lý tài khoản

STT Tên Định Tham chiếu Sự kiện dạng

1 Trang chủ Link Trang chủ Nhấn vào sẽ chuyển đến người dùng trang chủ người dùng

Lịch sử đơn Lịch sử đơn Nhấn vào sẽ chuyển

2 Link hướng đến lịch sử mua hàng hàng hàng

Sản phẩm yêu Sản phẩm yêu Nhấn vào sẽ chuyển đến

3 Link trang danh sách sản thích thích phẩm yêu thích Ưu đãi của Nhấn vào sẽ chuyển đến

4 Ưu đãi của bạn Link trang danh sách mã bạn giảm giá

Thông tin tài Thông tin tài Nhấn vào sẽ chuyển đến

5 Link trang quản lý thông tin khoản khoản tài khoản

Khi nhấn vào thực hiện

6 Đăng xuất Button Đăng xuất đăng xuất khỏi phiên làm việc

Nhấn vào sẽ chuyển đến

7 Chi tiết ưu đãi Link Chi tiết ưu đãi trang quản lý thông tin ưu đãi

Chi tiết đơn Nhấn vào sẽ chuyển đến

8 Chi tiết đơn hàng Link trang quản lý thông tin hàng đơn hàng

Chi tiết sản Chi tiết sản Nhấn vào sẽ chuyển đến

9 Link phẩm yêu trang quản lý sản phẩm phẩm yêu thích thích yêu thích

Nhấn vào sẽ chuyển đến

10 Thông báo Button Thông báo trang thông báo cho người dùng

3.4.12 Giao diện trang lịch sử đơn hàng

Hình 3.54 Giao diện trang lịch sử đơn hàng Bảng 3.13 Chi tiết trang lịch sử đơn hàng

1 Tiêu chí sắp xếp Tab Sắp xếp đơn Nhấn vào sẽ sắp xếp đơn đơn hàng hàng hàng theo tiêu chí

2 Mã đơn vận Link Chi tiết hóa Nhấn vào sẽ hướng đến đơn chi tiết hóa đơn

3 Xem chi tiết Link Chi tiết hóa Nhấn vào sẽ hướng đến đơn chi tiết hóa đơn

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

Hình 3.55 Giao diện trang chi tiết đơn hàng Bảng 3.14 Chi tiết trang chi tiết đơn hàng

STT Tên Định dạng Tham chiếu Sự kiện Đánh giá sản Đánh giá sản Nhấn vào sẽ chuyển

1 Link hướng đến trang đánh phẩm phẩm giá

3.4.14 Giao diện trang sản phẩm yêu thích

Hình 3.56 Giao diện trang sản phẩm yêu thích Bảng 3.15 Chi tiết trang trang sản phẩm yêu thích

3.4.15 Giao diện trang ưu đãi của bạn

Bảng 3.16 Chi tiết trang ưu đãi của bạn

1 Nhận mã giảm Button Danh sách mã hướng đến danh sách mã giá giảm giá giảm giá public để người dùng thực hiện nhận

3.4.16 Giao diện trang thông tin người dùng

Hình 3.58 Giao diện trang thông tin người dùng Bảng 3.17 Chi tiết trang thông tin người dùng

Thay đổi ảnh Khi nhấn vào thực hiện

1 Ảnh đại diện Avatar chọn thay đổi ảnh đại đại diện diện

Thay đổi để thực hiện

2 Họ và tên TextField Ô họ và tên chỉnh sửa tên người dùng

3 Chọn giới tính Select Chọn giới tính Nhấn vào để thực hiện thay đổi giới tính

4 Nickname TextField Ô nickname thực hiện thay đổi thông tin người dùng

5 Email Button Chỉnh sửa Nhấn vào sẽ thực hiện

6 Sinh nhật Button Chỉnh sửa Thực hiện chỉnh sửa ngày sinh ngày sinh

Chỉnh sửa địa Khi nhấn vào thực hiện

7 Địa chỉ Button chuyển hướng về trang chỉ địa chỉ người dùng

8 Đổi mật khẩu Button Đổi mật khẩu chuyển đến trang đổi mật khẩu

9 Thay đổi thông Button Thông tin Thực hiện thay đổi thông tin người dùng người dùng tin người dùng

3.4.17 Giao diện trang đổi mật khẩu

Hình 3.59 Giao diện trang đổi mật khẩu Bảng 3.18 Chi tiết trang đổi mật khẩu

1 Mật khẩu hiện tại TextField Mật khẩu hiện Nhập vào mật khẩu hiện tại tại để đổi mật khẩu

2 Mật khẩu mới TextField Mật khẩu mới Nhập vào mật khẩu mới để đổi mật khẩu

Nhập lại mật Nhập lại mật Nhập vào nhập lại mật

3 TextField khẩu mới để đổi mật khẩu khẩu khẩu

4 Lưu thay đổi Button Lưu thay đổi Thực hiện thay đổi mật khẩu

3.4.18 Giao diện trang thay đổi địa chỉ

Hình 3.60 Giao diện trang thay đổi địa chỉ Bảng 3.19 Chi tiết trang thay đổi địa chỉ

Khi nhấn vào thực hiện

1 Thêm địa chỉ Button Thêm địa chỉ chuyển hướng đến trang thêm địa chỉ

Chỉnh sửa địa Khi nhấn vào thực hiện

2 Chỉnh sửa địa chỉ Button chuyển hướng đến trang chỉ sửa địa chỉ

3 Xóa địa chỉ Button Xóa địa chỉ Khi nhấn thực hiện xóa địa chỉ

3.4.19 Giao diện trang thêm địa chỉ

Hình 3.61 Giao diện trang thêm địa chỉ

Bảng 3.20 Chi tiết trang thêm địa chỉ

1 Họ và tên TextField Họ và tên Nhập vào tên người nhận hàng

2 Công ty TextField Công ty Nhập vào tên công ty để dễ dàng nhận hàng

3 Số điện thoại TextField Số điện thoại Nhập vào số điện thoại người nhận hàng

4 Tỉnh thành phố Select Tỉnh thành Chọn tỉnh thành phố

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

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

7 Địa chỉ cụ thể TextField Địa chỉ cụ thể Nhập địa chỉ cụ thể

8 Loại địa chỉ RadioButton Loại địa chỉ Chọn loại địa chỉ

9 Đặt làm địa chỉ CheckBox Đặt làm địa Chọn đặt làm mặc định mặc định chỉ mặc định

10 Thêm địa chỉ Button Thêm địa chỉ Thêm địa chỉ

3.4.20 Giao diện giỏ hàng sau khi đăng nhập

Hình 3.62 Giao diện giỏ hàng sau khi đăng nhập Bảng 3.21 Chi tiết giỏ hàng sau khi đăng nhập

1 Sản phẩm bên Card View Sản phẩm bên Được hiển thị trong giỏ trong giỏ hàng trong giỏ hàng hàng khi đăng nhập

3.4.21 Giao diện thông tin thanh toán

Hình 3.63 Giao diện thông tin thanh toán

Bảng 3.22 Chi tiết trang thông tin thanh toán

1 Trở về Link Trang giỏ Khi nhấn vào trở về hàng trang giỏ hàng

Chỉnh sửa thông Trang chỉnh Khi nhấn vào trở về

2 Link sửa thông tin trang chỉnh sửa thông tin người dùng người dùng tin người dùng

3 Chọn loại giao Radio Loại giao Chọn loại giao hàng hàng Button hàng

4 Thay đổi địa chỉ Select Danh sách địa Hiện danh sách địa chỉ chỉ thực hiện thay đổi

Trang áp Khi nhấn vào chuyển

5 Tiếp tục Link dụng mã hướng đến trang áp giảm giá dụng mã giảm giá

6 Tiếp tục mua hàng Link Trang chủ Khi nhấn vào chuyển hướng đến trang chủ

3.4.22 Giao diện dùng mã giảm giá

Hình 3.64 Giao diện dùng mã giảm giá

Bảng 3.23 Chi tiết trang dùng mã giảm giá

Trang thông Khi nhấn vào trở về

1 Trở về Link trang thông tin thanh tin thanh toán toán

Thay đổi mã Danh sách mã Hiện danh sách mã

2 Select giảm giá thực hiện thay giảm giá giảm giá đổi

Trang áp Khi nhấn vào chuyển

3 Tiếp tục Link dụng mã hướng đến trang áp giảm giá dụng mã giảm giá

4 Tiếp tục mua hàng Link Trang chủ Khi nhấn vào chuyển hướng đến trang chủ

Hình 3.65 Giao diện thanh toán

Bảng 3.24 Chi tiết trang thanh toán

1 Chỉnh sửa thông Link Trang giỏ Khi nhấn vào trở về tin sản phẩm hàng trang giỏ hàng

2 Chọn loại thanh Radio Loại thanh Chọn loại thanh toán toán Button toán

3 Thanh toán Button Thanh toán Tiến hành thanh toán

4 Tiếp tục mua Link Trang chủ Khi nhấn vào chuyển hàng hướng đến trang chủ

3.4.24 Giao diện đánh giá sản phẩm

Hình 3.66 Giao diện đánh giá sản phẩm

Bảng 3.25 Chi tiết trang đánh giá sản phẩm

1 Đánh giá TextField Đánh giá Nhập đánh giá để thực hiện đánh giá

2 Hình ảnh Button Hình ảnh thêm hình ảnh của sản phẩm đánh giá

3 Số sao TextField Số sao Nhập số sao để thực hiện đánh giá sản phẩm

4 Thêm đánh giá Button Thêm đánh Thực hiện thêm đánh giá giá

3.4.25 Giao diện trang giao hàng

Hình 3.67 Giao diện trang giao hàng

Bảng 3.26 Chi tiết trang giao hàng

Trang danh Nhấn vào và chuyển

1 Giao hàng Button hướng đến trang quản sách đơn vận lý đơn vận

Trang chi tiết Nhấn vào và chuyển

2 Xem đơn vận Button hướng đến trang chi tiết đơn vận đơn vận

3 Hủy đơn vận Button Thực hiện Nhấn vào để hủy đơn hủy đơn vận vận

3.4.26 Giao diện trang chi tiết giao hàng

Hình 3.68 Giao diện trang chi tiết giao hàng

Bảng 3.27 Chi tiết trang giao hàng

Trang danh Nhấn vào và chuyển

1 Trở về Link hướng đến trang quản sách đơn vận lý đơn vận

2 Hình ảnh Image Thêm hình Nhấn vào để thêm hình ảnh giao hàng ảnh giao hàng

Xác nhận giao Thực hiện Nhấn vào để tiến hành

3 Button giao hàng cho hàng giao hàng khách hàng

3.4.27 Giao diện trang đăng nhập Admin

Hình 3.69 Giao diện trang đăng nhập Admin

Bảng 3.28 Chi tiết trang đăng nhập Admin

1 Số điện thoại Text Field Ô số điện Nhập vào số điện thoại thoại admin

2 Mật khẩu Text Field Ô mật khẩu Nhập vào mật khẩu admin

Trang chủ Khi đăng nhập thành

3 Đăng nhập Button công chuyển hướng admin đến trang chủ admin

3.4.28 Giao diện trang chủ Admin

Hình 3.70 Giao diện Trang chủ Admin

Bảng 3.29 Chi tiết trang chủ Admin

1 Trang chủ Link Trang chủ Khi nhấn vào chuyển hướng đến trang chủ

Danh mục sản Danh mục Khi nhấn vào chuyển

2 Link hướng đến trang danh phẩm sản phẩm mục sản phẩm

3 Thương hiệu Link Thương hiệu hướng đến trang thương hiệu

Công cụ khuyến Công cụ Khi nhấn vào chuyển

4 Button hướng đến trang công mãi khuyến mãi cụ khuyến mãi

5 Sản phẩm Link Sản phẩm hướng đến trang sản phẩm

6 Thuộc tính Link Thuộc tính hướng đến trang thuộc tính

7 Đơn hàng Link Đơn hàng hướng đến trang đơn hàng

Quản lý đánh Quản lý đánh Khi nhấn vào chuyển

8 Link hướng đến trang quản giá giá lý đánh giá

Quản lý người Quản lý Khi nhấn vào chuyển

9 Link hướng đến trang quản dùng người dùng lý người dùng

Quản lý người Quản lý Khi nhấn vào chuyển

12 Link hướng đến trang quản dùng người dùng lý người dùng

13 Doanh thu Link Đơn hàng hướng đến trang đơn hàng

3.4.29 Giao diện đăng nhập Manager

Hình 3.71 Giao diện trang đăng nhập Manager

Bảng 3.30 Chi tiết trang đăng nhập Manager

1 Số điện thoại Text Field Ô số điện Nhập vào số điện thoại thoại manager

2 Mật khẩu Text Field Ô mật khẩu Nhập vào mật khẩu manager

Trang chủ Khi đăng nhập thành

3 Đăng nhập Button công chuyển hướng manager đến trang chủ manager

3.4.30 Giao diện trang chủ Manager

Hình 3.72 Giao diện trang chủ Manager

Bảng 3.31 Chi tiết trang chủ Manager

Công cụ khuyến Công cụ Khi nhấn vào chuyển

1 Button hướng đến trang công mãi khuyến mãi cụ khuyến mãi

Quản lý đánh Quản lý đánh Khi nhấn vào chuyển

4 Link hướng đến trang quản giá giá lý đánh giá

3.4.31 Giao diện trang danh mục sản phẩm

Hình 3.73 Giao diện trang danh mục sản phẩm

Bảng 3.32 Chi tiết trang danh mục sản phẩm

1 Tìm kiếm TextField Tìm kiếm Nhập từ khóa để thực hiện tìm kiếm

Thêm danh Nhấn vào sẽ điều

2 Thêm danh mục Link hướng đến trang thêm mục danh mục

Sửa danh Nhấn vào sẽ điều

3 Sửa danh mục Link hướng đến trang sửa mục danh mục

4 Xóa danh mục Button Xóa danh Thực hiện xóa danh mục mục

3.4.32 Giao diện thêm danh mục

Hình 3.74 Giao diện thêm danh mục

Bảng 3.33 Chi tiết trang thêm danh mục

Danh mục Chọn danh mục cha để

1 Danh mục cha Select thực hiện thêm danh cha mục

Tên danh Nhập tên danh mục vào

2 Tên danh mục TextField để thực hiện thêm danh mục mục

3 Thêm danh mục Button Thêm danh Thực hiện thêm danh mục mục

3.4.33 Giao diện trang quản lý thương hiệu

Hình 3.75 Giao diện trang quản lý thương hiệu

Bảng 3.34 Chi tiết trang quản lý thương hiệu

Thêm thương Thêm thương Khi nhấn vào thực hiện

1 Link đi đến trang thêm hiệu hiệu thương hiệu

2 Tìm kiếm TextField Tìm kiếm Nhập từ khóa để thực hiện tìm thương hiệu

3 Nút tìm kiếm Button Nút tìm kiếm thương hiệu bằng từ khóa

Sửa thương Nhấn vào sẽ điều

4 Sửa thương hiệu Link hướng đến trang sửa hiệu thương hiệu

5 Xóa thương hiệu Button Xóa thương Thực hiện xóa thương hiệu hiệu

3.4.34 Giao diện thêm thương hiệu

Hình 3.76 Giao diện thêm thương hiệu

Bảng 3.35 Chi tiết trang thêm thương hiệu

1 Tên thương hiệu TextField Tên thương Nhập vào tên thương hiệu hiệu

2 Mô tả TextField Mô tả Nhập vào mô tả thương hiệu

3 Địa chỉ TextField Địa chỉ Nhập vào địa chỉ cụ thể của thương hiệu

4 Quốc gia Select Quốc gia Nhập quốc gia của thương hiệu

5 Liên hệ TextField Liên hệ Nhập số điện thoại để liên hệ với thương hiệu

6 Tỉnh thành phố Select Tỉnh thành Chọn tỉnh thành phố

7 Quận/ huyện Select Quận/ huyện Chọn quận/ huyện

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

9 Địa chỉ cụ thể TextField Địa chỉ cụ thể Nhập địa chỉ cụ thể

10 Thêm thương Button Thêm thương Thêm thương hiệu hiệu hiệu

3.4.35 Giao diện quản lý mã giảm giá

Hình 3.77 Giao diện quản lý mã giảm giá

Bảng 3.36 Chi tiết trang quản lý mã giảm giá

Thêm Mã giảm Thêm mã Khi nhấn vào thực hiện

1 Link đi đến trang thêm mã giá giảm giá giảm giá

2 Tìm kiếm TextField Tìm kiếm Nhập từ khóa để thực hiện tìm mã giảm giá

Sửa mã giảm Nhấn vào sẽ điều

3 Sửa mã giảm giá Link hướng đến trang sửa giá mã giảm giá

4 Xóa mã giảm Button Xóa mã giảm Thực hiện xóa mã giảm giá giá giá

3.4.36 Giao diện thêm mã giảm giá

Hình 3.78 Giao diện thêm mã giảm giá

Bảng 3.37 Chi tiết trang thêm mã giảm giá

1 Tên mã giảm giá TextField Tên mã giảm Nhập vào tên mã giảm giá giá

2 Số lượng TextField Số lượng Nhập vào số lượng mã giảm giá

3 Giá trị TextField Giá trị Nhập vào giá trị mã giảm giá

4 Trạng thái RadioButton Trạng thái Chọn trạng thái mã giảm giá

Thời gian bắt Thời gian bắt Nhập vào thời gian bắt

5 Input đầu hiệu lực của mã đầu đầu giảm giá

Thời gian kết Thời gian kết Nhập vào thời gian hết

6 Input hiệu lực của mã giảm thúc thúc giá

7 Thêm mã giảm giá Button Thêm mã giảm giá Thêm mã giảm giá

3.4.37 Giao diện quản lý sản phẩm

Hình 3.79 Giao diện quản lý sản phẩm

Bảng 3.38 Chi tiết trang quản lý sản phẩm

Thêm sản Khi nhấn vào thực hiện

1 Thêm sản phẩm Link đi đến trang thêm sản phẩm phẩm

2 Tìm kiếm TextField Tìm kiếm Nhập từ khóa để thực hiện tìm sản phẩm

3 Nút tìm kiếm Button Nút tìm kiếm Thực hiện tìm kiếm sản phẩm bằng từ khóa

Sắp xếp sản Thực hiện sắp xếp sản

4 Chọn sắp xếp Tab phẩm theo tiêu chí đã phẩm chọn

5 Sửa sản phẩm Link Sửa sản phẩm hướng đến trang sửa sản phẩm

6 Xóa sản phẩm Button Xóa sản Thực hiện xóa sản phẩm phẩm

3.4.38 Giao diện thêm sản phẩm

Hình 3.80 Giao diện thêm sản phẩm

Bảng 3.39 Chi tiết trang thêm sản phẩm

1 Tên sản phẩm TextField Tên sản phẩm Nhập vào tên sản phẩm

2 Danh mục TextField Danh mục Chọn danh mục cho sản phẩm

3 Thương hiệu TextField Thương hiệu Chọn thương hiệu cho sản phẩm

4 Hình ảnh Avatar Hình ảnh Thêm hình ảnh cho sản phẩm

5 Mô tả TextField Mô tả Nhập vào mô tả của sản phẩm

6 Giá cả TextField Giá cả Nhập vào giá cả của sản phẩm

7 Số lượng TextField Số lượng Nhập vào số lượng sản phẩm

8 Giảm giá TextField Giảm giá Nhập hệ số giảm giá cho sản phẩm

9 Thuộc tính Button Thuộc tính Thực hiện thêm thuộc tính

10 Thêm sản phẩm Button Thêm sản Thực hiện thêm sản phẩm phẩm

3.4.39 Giao diện quản lý thuộc tính

Hình 3.81 Giao diện quản lý thuộc tính

Bảng 3.40 Chi tiết trang quản lý thuộc tính

Thêm thuộc Khi nhấn vào thực hiện

1 Thêm thuộc tính Link đi đến trang thêm thuộc tính tính

2 Tìm kiếm TextField Tìm kiếm Nhập từ khóa để thực hiện tìm thuộc tính

3 Nút tìm kiếm Button Nút tìm kiếm Thực hiện tìm kiếm thuộc tính bằng từ khóa

Xem thuộc Nhấn vào sẽ điều

4 Xem thuộc tính Link hướng đến trang chi tiết tính thuộc tính

3.4.40 Giao diện thêm thuộc tính

Hình 3.82 Giao diện thêm thuộc tính

Bảng 3.41 Chi tiết trang thêm thuộc tính

1 ID TextField ID Nhập ID để thêm thuộc tính

Tên thuộc Nhập tên thuộc tính

2 Tên thuộc tính TextField vào để thực hiện thêm tính thuộc tính

3 Thêm thuộc tính Button Thêm thuộc Thực hiện thêm thuộc tính tính

3.4.41 Giao diện quản lý đơn hàng

Hình 3.83 Giao diện quản lý đơn hàng

Bảng 3.42 Chi tiết trang quản lý đơn hàng

1 Chọn thuộc tính Select Chọn thuộc Chọn thuộc tính cho tính tìm kiếm

2 Tìm kiếm TextField Tìm kiếm Nhập từ khóa cần tìm kiếm cho đơn hàng

3 Nút tìm kiếm Button Nút tìm kiếm Thực hiện tìm kiếm hóa đơn theo từ khóa

4 Sắp xếp Tab Sắp xếp Sắp xếp đơn hàng theo tiêu chí

5 Xem chi tiết Link Xem chi tiết Khi nhấn chuyển đến trang chi tiết đơn hàng

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

Hình 3.84 Giao diện chi tiết đơn hàng – 1

Bảng 3.43 Chi tiết trang chi tiết đơn hàng

1 Xuất hóa đơn Button Hóa đơn Thực hiện Xuất hóa đơn pdf của đơn hàng

Chọn người giao Danh sách Thực hiện chọn người

2 Select người giao hàng giao hàng hàng

Thực hiện Thực hiện vận chuyển

3 Vận chuyển Buton vận chuyển đơn hàng đơn hàng

4 Hủy đơn Button Hủy đơn Thực hiện hủy đơn hàng

3.4.43 Giao diện quản lý đánh giá

Hình 3.86 Giao diện quản lý đánh giá

Bảng 3.45 Chi tiết trang quản lý quản lý đánh giá

1 Chọn thuộc tính Select Chọn thuộc Chọn thuộc tính cho tính tìm kiếm

2 Tìm kiếm TextField Tìm kiếm Nhập từ khóa cần tìm kiếm cho đánh giá

3 Nút tìm kiếm Button Nút tìm kiếm Thực hiện tìm kiếm đánh giá theo từ khóa

4 Sắp xếp Tab Sắp xếp Sắp xếp đánh giá theo tiêu chí

5 Xem chi tiết Link Xem chi tiết Khi nhấn chuyển đến trang chi tiết đánh giá

3.4.44 Giao diện quản lý người dùng

Hình 3.87 Giao diện quản lý người dùng

Bảng 3.45 Chi tiết trang quản lý quản lý người dùng

1 Tìm kiếm TextField Tìm kiếm Nhập từ khóa cần tìm kiếm cho người dùng

2 Nút tìm kiếm Button Nút tìm kiếm người dùng theo từ khóa

3 Xem chi tiết Link Xem chi tiết trang chi tiết người dùng

3.4.45 Giao diện quản lý chi tiết người dùng

Hình 3.88 Giao diện quản lý chi tiết người dùng

Bảng 3.46 Chi tiết trang quản lý quản lý chi tiết người dùng

1 Quyền người Select Danh sách Chọn quyền cho người dùng các quyền dùng

Thực hiện Nhấn vào và thực hiện chỉnh sửa

2 Nút chỉnh sửa Button chỉnh sửa quyền cho quyền cho người dùng người dùng

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

Kiểm thử

Trong phạm vi của tiểu luận, nhóm đã thực hiện đề tài và tiến hành kiểm thử hộp đen để kiểm tra các chức năng chính của ứng dụng Kiểm thử hộp đen rất phù hợp để việc phát triển nhanh một phần mềm.

Bảng 4.1 Bảng danh sách các chức năng kiểm thử

Phạm vi kiểm thử Chức năng kiểm thử

Kiểm thử chức năng - Kiểm thử giao diện của trang đăng nhập và đăng - Kiểm thử chức năng đăng nhập bằng số điện thoại ký - Kiểm thử chức năng đăng nhập bằng Google

- Kiểm thử chức năng đăng nhập bằng Facebook

- Kiểm thử chức năng quên mật khẩu

Kiểm thử trang chi - Kiểm thử giao diện của trang tiết sản phẩm - Kiểm thử thông tin sản phẩm

- Kiểm thử chức năng yêu thích sản phẩm

- Kiểm thử chức năng thêm sản phẩm vào giỏ hàng

Kiểm thử trang giỏ - Kiểm thử giao diện của trang hàng - Kiểm thử thông tin giỏ hàng

- Kiểm thử tăng giảm số lượng

- Kiểm thử thay đổi giá khi tăng – giảm đơn hàng

- Kiểm thử chức năng đặt hàng

Kiểm thử trang - Kiểm thử giao diện của trang

Admin - Kiểm thử chức năng thêm danh mục sản phẩm

- Kiểm thử chức năng thêm thương hiệu sản phẩm

- Kiểm thử chức năng quản lý đơn hàng

- Kiểm thử chức năng giao hàng

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

- Kiểm thử chức năng thêm mã giảm giá

- Kiểm thử chức năng thống kê

- Kiểm thử chức năng thêm thuộc tính

Kiểm thử trang quản - Kiểm thử giao diện của trang lý tài khoản - Kiểm thử tính thông tin người dùng

- Kiểm thử chức năng sửa thông tin người dùng

- Kiểm thử chức năng sản phẩm yêu thích

- Kiểm thử chức năng lịch sử đơn hàng

- Kiểm thử chức năng mã giảm giá

- Kiểm thử chức năng giao hàng

- Kiểm thử chức năng đăng xuất

Kiểm thử trang đặt - Kiểm thử giao diện trang hàng - Kiểm thử thông tin đặt hàng

- Kiểm thử thông tin địa chỉ giao hàng

- Kiểm thử thông tin thêm mã giảm giá

- Kiểm thử chức năng đặt hàng với COD

- Kiểm thử chức năng đặt hàng với Paypal

- Kiểm thử chức năng đặt hàng với Momo QR

- Kiểm thử chức năng đặt hàng với Momo ATM

Bảng 4.2 Bảng danh sách các kết quả kiểm thử

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

Kiểm thử giao - Nhấn vào nút đăng Trang giao diện đăng

1 diện của trang nhập nhập xuất hiện Đạt đăng nhập

Kiểm thử giao - Nhấn vào nút đăng Trang giao diện đăng

2 diện của trang nhập ký xuất hiện Đạt đăng ký - Chuyển sang trang đăng ký

Kiểm thử giao - Nhấn vào nút đăng Trang giao diện quên

3 diện của trang nhập mật khẩu xuất hiện Đạt quên mật khẩu - Chuyển sang trang quên mật khẩu

Kiểm thử chức - Nhấn vào nút đăng Xuất hiện thông báo (

4 năng đăng nhập nhập thành công, sai mật Đạt

- Nhập thông tin số khẩu, không tồn tại tài điện thoại và mật khoản, sai định dạng khẩu đầu vào)

Kiểm thử chức - Nhấn vào nút đăng Xuất hiện thông báo ( năng đăng ký nhập thành công, tồn tại số

5 - Chuyển sang trang điện thoại, sai định Đạt đăng ký dạng đầu vào)

- Nhập thông tin đăng ký tài khoản

Kiểm thử chức - Nhấn vào nút đăng Xuất hiện thông báo ( năng quên mật nhập thành công, không tồn

6 khẩu - Chuyển sang trang tại số điện thoại, sai Đạt quên mật khẩu định dạng đầu vào)

- Nhập thông tin tài khoản

Kiểm thử chức - Nhấn vào nút đăng Điều hướng đến trang

7 năng đăng nhập nhập đăng nhập Google Đạt bằng Google - Nhấn vào icon

Kiểm thử chức - Nhấn vào nút đăng Điều hướng đến trang

8 năng đăng nhập nhập đăng nhập Facebook Đạt bằng Facebook - Nhấn vào icon

Kiểm thử giao - Nhấn vào một sản Xuất hiện trang chi tiết

9 diện trang chi phẩm bất kì sản phẩm Đạt tiết sản phẩm

Kiểm tra thông - Nhấn vào một sản Thông tin sản phẩm

10 tin sản phẩm phẩm bất kì xuất hiện đúng với dữ Đạt liệu được lưu trữ

Kiểm thử chức - Nhấn vào một sản Xuất hiện thông báo(

11 năng yêu thích phẩm bất kì thành công, không Đạt sản phẩm - Nhấn nút yêu thích thành công, yêu cầu đăng nhập)

Kiểm thử chức - Nhấn vào một sản Xuất hiện thông báo(

12 năng thêm sản phẩm bất kì thành công, không Đạt phẩm vào giỏ - Nhấn nút thêm vào thành công, yêu cầu hàng giỏ hàng đăng nhập)

Kiểm thử giao - Nhấn vào icon giỏ Trang giỏ hàng xuất

13 diện giỏ hàng hàng hiện Đạt

Kiểm thông tin - Nhấn vào icon giỏ Các sản phẩm xuất

14 giỏ hàng hàng hiện trong giỏ hàng Đạt đúng với lưu trữ

Kiểm thử tăng - Nhấn vào icon giỏ Các sản phẩm được giảm số lượng hàng tăng giảm và theo ràng

15 sản phẩm - Thực hiện tăng buộc >0 và không quá Đạt giảm một sản phẩm số lượng của sản phẩm trong giỏ hàng

Kiểm thử chức - Nhấn vào icon giỏ Các sản phẩm được năng đặt hàng hàng thay đôi trạng thái và

16 - Chọn các sản phẩm số lượng và điều Đạt

- Nhấn nút đặt hàng hướng sang trang thanh toán

Kiểm thử giao - Truy cập trang Xuất hiện trang admin

17 diện trang admin Đạt admin

Kiểm thử chức - Truy cập trang Thông báo ( thành năng thêm danh danh mục sản phẩm công, thất bại)

18 mục sản phẩm - Nhấn nút thêm Đạt danh mục

- Nhập form thêm danh mục sản phẩm

Kiểm thử chức - Truy cập trang Xuất hiện thông tin

19 năng quản lý quản lý đơn hàng đơn hàng Đạt đơn hàng

Kiểm thử chức - Truy cập vào trang Thông báo ( Thành năng giao hàng chi tiết đơn hàng công hoặc thất bại)

20 - Chọn người vận Đạt chuyển và tiến hành giao hàng

Kiểm thử chức - Truy cập trang Thông báo ( thành năng thêm sản quản lý sản phẩm công, thất bại)

21 phẩm - Nhấn nút thêm sản Đạt phẩm

- Nhập form thêm sản phẩm

Kiểm thử chức - Truy cập trang Thông báo ( thành năng thêm quản lý thương công, thất bại) thương hiệu hiệu

22 - Nhấn nút thêm Đạt thương hiệu

- Nhập form thêm thương hiệu

Kiểm thử chức - Truy cập trang Thông báo ( thành

23 năng thêm mã quản lý mã giảm công, thất bại) Đạt giảm giá giá

- Nhấn nút thêm mã giảm giá

- Nhập form thêm thêm mã giảm giá

Kiểm thử chức - Truy cập trang chủ Xuất hiện thống kê

24 năng thống kê admin Đạt

Kiểm thử chức - Truy cập trang Thông báo ( thành năng thêm thuộc quản lý thuộc tính công, thất bại)

25 tính - Nhấn nút thêm Đạt thuộc tính

- Nhập form thêm thêm thuộc tính

Kiểm thử giao - Nhấn vào nút quản Xuất hiện trang quản lý

26 diện trang quản lý tài khoản sau khi tài khoản Đạt lý tài khoản đăng nhập thành công

Kiểm thử thông - Nhấn vào nút quản Thông tin xuất hiện

27 tin người dùng lý tài khoản sau khi đúng với lưu trữ trong Đạt đăng nhập thành cơ sở dữ liệu công

Kiểm thử chức - Nhấn vào nút quản Thông báo ( thành năng sửa thông lý tài khoản sau khi công, thất bại) tin người dùng đăng nhập thành công

28 - Nhấn vào mục Đạt thông tin người dùng

Kiểm thử chức - Nhấn vào nút quản Thông tin xuất hiện năng sản phẩm lý tài khoản sau khi đúng với lưu trữ trong

29 yêu thích đăng nhập thành cơ sở dữ liệu Đạt công

- Nhấn vào mục sản phẩm yêu thích

Kiểm thử chức - Nhấn vào nút quản Thông tin xuất hiện năng lịch sử đơn lý tài khoản sau khi đúng với lưu trữ trong

30 hàng đăng nhập thành cơ sở dữ liệu Đạt công

- Nhấn vào mục lịch sử đơn hàng

Kiểm thử chức - Nhấn vào nút quản Thông tin xuất hiện năng mã giảm lý tài khoản sau khi đúng với lưu trữ trong

31 giá đăng nhập thành cơ sở dữ liệu Đạt công

- Nhấn vào quản lý mã giảm giá

Thực hiện chức - Nhấn vào mục giao Xuất hiện thông báo năng giao hàng hàng (Thành công hoặc thất

- Chọn đơn hàng cần bại)

- Thực hiện thêm hình ảnh để xác nhận giao hàng

Kiểm thử chức - Nhấn vào nút quản Đăng xuất khỏi hệ năng đăng xuất lý tài khoản sau khi thống thành công

33 đăng nhập thành Đạt công

- Nhấn vào nút đăng xuất

Kiểm thử giao - Nhấn vào nút đặt Xuất hiện trang đặt

34 diện trang đặt hàng sau khi chọn hàng, thông báo lỗi Đạt hàng sản phẩm ở giỏ hàng

Kiểm thử thông - Nhấn vào nút đặt Thông tin xuất hiện

35 tin đặt hàng hàng sau khi chọn đúng với lưu trữ trong Đạt sản phẩm ở giỏ cơ sở dữ liệu hàng

Kiểm thử thông - Nhấn vào nút đặt Xuất hiện địa chỉ người

36 tin địa chỉ giao hàng sau khi chọn dùng hoặc điều hướng Đạt hàng sản phẩm ở giỏ đến trang thêm địa chỉ hàng

Kiểm thử thông - Nhấn vào nút đặt Xuất hiện mã giảm giá tin thêm mã hàng sau khi chọn của người dùng và giảm giá sản phẩm ở giỏ trang áp dụng mã giảm

- Nhấn nút tiếp tục để tiến hành áp dụng mã giảm giá

Kiểm thử chức - Nhấn vào nút đặt Thông báo (thành năng đặt hàng hàng sau khi chọn công, thất bại) với COD sản phẩm ở giỏ hàng

38 - Nhấn nút tiếp tục Đạt để tiến hành áp dụng mã giảm giá

- Sau khi áp dụng mã giảm giá nhấn nút tiếp tục

- Chọn thanh toán khi nhận hàng

Kiểm thử chức - Nhấn vào nút đặt Điều hướng đến trang năng đặt hàng hàng sau khi chọn thanh toán với Paypal với Paypal sản phẩm ở giỏ hàng

39 để tiến hành áp Đạt dụng mã giảm giá

- Chọn thanh toán với Paypal

Kiểm thử chức - Nhấn vào nút đặt Điều hướng đến trang năng đặt hàng hàng sau khi chọn thanh toán với Momo với Momo QR sản phẩm ở giỏ QR hàng

40 để tiến hành áp Đạt dụng mã giảm giá

- Chọn thanh toán với Momo QR

Kiểm thử chức - Nhấn vào nút đặt Điều hướng đến trang

41 năng đặt hàng hàng sau khi chọn thanh toán với Momo Đạt với Momo ATM sản phẩm ở giỏ ATM hàng

-Nhấn nút tiếp tục để tiến hành áp dụng mã giảm giá

-Sau khi áp dụng mã giảm giá nhấn nút tiếp tục

-Chọn thanh toán với Momo ATM

Định dạng
Số trang	171
Dung lượng	9,49 MB