Mô tả dữ liệu

: THIẾT KẾ HỆ THỐNG

5.1.3 Mô tả dữ liệu

5.1.3.1 Product

Bảng 5.1: Table Product

# Field name Data type Allow null

1 IDPRODUCT varchar(50) 2 NAMEPRO varchar(50)  3 GENERALPIC Text  4 IDPROTYPE varchar(50)  5 DESCRIPTION Varchar(200)  6 PRICE Float  7 IdAccount varchar(50)  8 STATE varchar(20)  9 CHECKED Tyniint(1)  10 BOUGHT Tyniint(1) 

Chương 5: Thiết kế hệ thống 54 5.1.3.2 ProductType

Bảng 5.2: Table ProductType

# Field name Data type Allow null

1 IDPRODUCTTYPE varchar(50)

2 NAMETYPE varchar(30) 

5.1.3.3 Invoice

Bảng 5.3: Table Invoice

# Field name Data type Allow null

1 IdInvoice varchar(50) 2 Sum int(11)  3 Date Date  4 IdAccount varchar(50)  5 Point Int(11)  6 Shipped varchar(20)  5.1.3.4 DetailInvoice Bảng 5.4: Table DetailInvoice

# Field name Data type Allow null

1 IdInvoice varchar(50)

2 IDPRODUCT varchar(50)

5.1.3.5 Cart

Bảng 5.5: Table Cart

# Field name Data type Allow null

1 IdAccount varchar(50)

2 IDPRODUCT varchar(50)

5.1.3.6 Accounts

Bảng 5.6: Table Accounts

# Field name Data type Allow null

2 UserName varchar(50) 3 Avatar Text 4 AccountType varchar(50) 5 Phone varchar(50) 6 Point Int(11) 5.1.3.7 Account Bảng 5.7: Table Account

# Field name Data type Allow null

1 IdAccount varchar(50)

2 EMAIL varchar(50)

3 Password varchar(50)

5.1.3.8 CommentRating

Bảng 5.8: Table CommentRating

# Field name Data type Allow null

1 IDCMT varchar(50) 2 IdAccount varchar(50) 3 RATINGSTART varchar(50) 4 CONTENT varchar(100) 5 DATE Date 6 IdAccountRATED varchar(30)

Chương 5: Thiết kế hệ thống 56

5.2 Thiết kế giao diện

5.2.1 Giao diện người dùng

Bảng 5.9: Các màn hình của người dùng

ID Screen name Mô tả Ghi chú

SCU01 Standby Screen Màn hình chờ

SCU02 Login screen Màn hình trang đăng nhập

SCU03 Register screen Màn hình trang đăng kí

SCU04 Reset password

screen

Màn hình hiển thị khi khách hàng quên mật khẩu

SCU05 Home Page Màn hình trang chủ khi khách hàng đăng nhập thành công

SCU06 Product List Sreen Màn hình hiển thị sản phẩm của một danh mục cụ thể

SCU07 Product Detail

Screen

Màn hình hiển thị thông tin chi tiết sản phẩm

SCU08

Edit Product’s Information Screen

Màn hình hiển thị tác vụ chỉnh sửa thông tin sản phẩm cho người đăng bán

SCU09 Delete Product

Screen

Màn hình xóa sản phẩm cho người đăng bán

SCU10 Search Screen Màn hình tìm kiếm

SCU11a

Account Detail Information Screen / Product

Màn hình hiển thị thông tin chi tiết tài khoản của chủ sở hữu

SCU11b

Account Detail Information Screen / Comments

Màn hình hiển thị thông tin chi tiết tài khoản của chủ sở hữu

SCU12 Upload Product

Screen Màn hình đăng bán

SCU13a User Screen / On

sale Product

Màn hình hiển thị các sản phẩm đang bán của khách hàng

SCU13b User Screen /

Pending

Màn hình hiển thị các sản phẩm đang chờ kiểm duyệt

SCU13c User Screen / Sold

Product

Màn hình hiển thị các sản phẩm đã bán

SCU13d User Screen /

Account

Màn hình hiển thị thông tin chi tiết tài khoản

SCU14 Cart Màn hình hiển thị giỏ hàng

SCU15b Payment Screen /

Result Màn hình hiển thị kết quả thanh toán 5.2.1.1 SCU01: Standby Screen

Chương 5: Thiết kế hệ thống 58 5.2.1.2 SCU02: Login Screen

Bảng 5.10: Đặc tả màn hình SCU02

No Name Require Format Reference Note

1 Nhập email True Input Nhập email đã đăng ký

2 Nhập mật khẩu True Input

Nhập mật khẩu đã đăng ký. Mật khẩu sẽ hiển thị dạng “******”

3 Quên mật khẩu True Href Click vào sẽ mở màn

hình SCU04

4 Button Đăng

nhập True Button

Click vào để tiến hành các tác vụ khác. Đăng nhập thành công

5 Đăng ký ngay True Href Click vào sẽ mở màn

hình SCU03 6, 7 Button Đăng nhập bằng Facebook / Google True Button Click vào sẽ mở màn hình đăng nhập với facebook/google

5.2.1.3 SCU03: Register Screen

Chương 5: Thiết kế hệ thống 60

Bảng 5.11: Đặc tả màn hình SCU03

No Name Require Format Reference Note

1 Nhập email True Input Nhập email

2 Nhập mật khẩu True Input

Nhập mật khẩu . Mật khẩu sẽ hiển thị dạng “******”

3 Nhập lại mật

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

4 Button Đăng ký True Button

Click sẽ tiến hành các tác vụ khác. Đăng ký tài khoản thành công

5.2.1.4 SCU04: Reset Password Screen

Bảng 5.12: Đặc tả màn hình SCU04

No Name Require Format Reference Note

1 Nhập email True Input Nhập email đã

đăng ký

2 Button Gửi True Button

Sau khi click, hệ thống sẽ gửi mật khẩu mới đến email đã nhập

3 Đăng ký ngay True Href Click sẽ mở màn

hình SCU03 5.2.1.5 SCU05: Home Page

Chương 5: Thiết kế hệ thống 62

Bảng 5.13: Đặc tả màn hình SCU05

No Name Require Format Reference Note

1 Logo True Image Click sẽ reload trang chủ

2 Thanh tìm

kiếm True Input

Nhập tên sản phẩm cần tìm

3 Icon Giỏ hàng True Icon Click sẽ mở màn hình

SCU14

4 Icon “Kebab” True Button

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới”

5 Icon “Home” True Icon

Click vào sẽ mở màn hình trang chủ hiển thị các danh mục sản phẩm

6 Icon “User” True Icon Click vào sẽ mở màn

hình SCU13a

7 Hình minh họa

cho danh mục True Image

Data từ API

Click vào sẽ hiển thị các sản phẩm có trong danh mục. Mở màn hình SCU06

8 Tên danh mục True Text Data từ API

5.2.1.6 SCU06: Product List Sreen

Bảng 5.14: Đặc tả màn hình SCU06

No Name Require Format Reference Note

1 Icon “Back” True Icon Click sẽ quay về trang

chủ danh mục sản phẩm

2 Thanh tìm

kiếm True Input

Nhập tên sản phẩm cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn hình SCU14

Chương 5: Thiết kế hệ thống 64

4 Icon “Kebab” True Icon

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới”

5 Icon “Home” True Icon

Click vào sẽ mở màn hình trang chủ hiển thị các danh mục sản phẩm

6 Icon “User” True Icon Click vào sẽ mở màn

hình SCU13a

7 Hình minh họa

cho sản phẩm True Image

Data từ API

Click vào sẽ hiển thị các sản phẩm có trong danh mục. Mở màn hình SCU07

8 Tên sản phẩm True Text Data từ API

9 Giá tiền True Text Data từ

5.2.1.7 SCU07: Product Detail Screen

Bảng 5.15: Đặc tả màn hình SCU07

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn hình

SCU14

Chương 5: Thiết kế hệ thống 66

5 Icon carousel True Icon

Hiển thị số lượng hình của sản phẩm, chuyển trạng thái hiển thị

6 Tên sản phẩm True Text Data từ API

7 Thông tin sản

phẩm True Text

Data từ API

8 Giá tiền True Text Data từ

API

9 Button “Thêm

vào giỏ hàng” True Button

Click sẽ thêm sản phẩm vào giỏ hàng

10 Nội dung True Text Data từ

API

Hiển thị nội dung tóm tắt (nếu có) của sản phẩm

5.2.1.8 SCU08: Edit Product’s Information Screen

Bảng 5.16: Đặc tả màn hình SCU08

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn hình

SCU14

4 Hình minh họa True Image Data từ

Chương 5: Thiết kế hệ thống 68 chuyển trạng thái hiển thị

6 Tên sản phẩm True Text Data từ API

7 Thông tin sản

phẩm True Text

Data từ API

8 Giá tiền True Text Data từ

API

9 Button “Sửa

thông tin” True Button

Click sẽ mở màn hình chỉnh sửa thông tin sản phẩm

10 Nội dung True Text Data từ

API

Hiển thị nội dung tóm tắt (nếu có) của sản phẩm

5.2.1.9 SCU09: Delete Product Screen

Bảng 5.17: Đặc tả màn hình SCU09

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn hình

SCU14

4 Hình minh họa

sản phẩm True Image

Data từ API

Chương 5: Thiết kế hệ thống 70 chuyển trạng thái hiển thị

6 Tên sản phẩm True Text Data từ API

7 Thông tin sản

phẩm True Text

Data từ API

8 Giá tiền True Text Data từ

API

9 Button “Xóa” True Button

Click sẽ xóa sản phẩm ra khỏi danh sách bán

10 Nội dung True Text Data từ

API

Hiển thị nội dung tóm tắt (nếu có) của sản phẩm

5.2.1.10 SCU10: Search Screen

Bảng 5.18: Đặc tả màn hình SCU10

No Name Require Format Reference Note

1 Logo True Image Click sẽ reload trang

chủ 2 Thanh tìm kiếm, có chứa từ khóa True Input

3 Icon Giỏ hàng True Icon Click sẽ mở màn hình

SCU14

Chương 5: Thiết kế hệ thống 72

4 Icon “Kebab” True Button

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới” 7 Hình minh họa sản phẩm True Image Data từ API

Click vào sẽ hiển thị chi tiết sản phẩm. Mở màn hình SCU07

8 Tên sản phẩm True Text Data từ API

Hiển thị kết quả theo từ khóa đã nhập ở thanh tìm kiếm

9 Giá tiền True Text Data từ

5.2.1.11 SCU011a: Account Detail Information Screen / Product

Bảng 5.19: Đặc tả màn hình SCU11a

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn hình

SCU14

Chương 5: Thiết kế hệ thống 74

4 Icon “Kebab” True Icon

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới”

5 Avatar True Image Data từ

API

Ảnh đại diện của khách hàng

6 Thông tin True Text Data từ API

Thông tin bao gồm:

• Họ tên

• Địa chỉ

• Số điện thoại

7 Rating True Icon

Người dùng đánh giá bằng cách chọn số sao

8 Nội dung đánh

giá True Input

Nhập nội dung đánh giá

9 Đánh giá True Button Click sẽ được ghi

nhận đánh giá

10 Tab “Bình luận” True Text

Hiển thị bình luận của sản phẩm. Click sẽ mở màn hình SCU11b

11 Tab “Sản phẩm” True Text

Click vào sẽ hiển thị các sản phẩm của người dùng đó. 12 Hình minh họa sản phẩm True Image Data từ API

Click vào sẽ hiển thị chi tiết sản phẩm. Mở màn hình SCU07

13 Tên sản phẩm True Text Data từ API

14 Giá tiền True Text Data từ

5.2.1.12 SCU011b: Account Detail Information Screen / Comments

Bảng 5.20: Đặc tả màn hình SCU11b

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn

hình SCU14

Chương 5: Thiết kế hệ thống 76

4 Icon “Kebab” True Icon

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới”

5 Avatar True Image Data từ

API

Ảnh đại diện của khách hàng

6 Thông tin True Text Data từ API

Thông tin bao gồm:

• Họ tên

• Địa chỉ

• Số điện thoại

7 Rating True Icon

Người dùng đánh giá bằng cách chọn số sao

8 Nội dung đánh

giá True Input

Nhập nội dung đánh giá

9 Đánh giá True Button Click sẽ được ghi

nhận đánh giá

10 Tab “Bình luận” True Text Hiển thị bình luận của sản phẩm.

11 Tab “Sản phẩm” True Text

Click vào sẽ hiển thị các sản phẩm của người dùng đó. Mở màn hình SCU011a

12 Avatar người

bình luận True Image

Data từ API

13 Tên người bình

luận True Text

Data từ API

14 Ngày bình luận True Date Data từ API

15 Nội dung bình

5.2.1.13 SCU12: Upload Product Screen

Bảng 5.21: Đặc tả màn hình SCU12

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn hình

Chương 5: Thiết kế hệ thống 78

4 Icon “Kebab” True Icon

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới” 5 Thêm hình ảnh sản phẩm True Button Click sẽ cho phép thêm ảnh sản phẩm

6 Nhập tựa đề sách True Input

7 Thông tin sách True Input Data từ API

Hiển thị thông tin. Bao gồm: • Phân loại • Người bán • Địa chỉ • Tình trạng 8 Dropdown Phân

loại True Input

Data từ API

Click vào dropdown, sẽ hiển thị các lựa chọn danh mục sách. Bao gồm: • Truyện tranh • Sách chuyên ngành • Tạp chí • Tiểu thuyết • Sách khoa học • Sách kỹ năng – Phương châm sống • Giáo trình • Thể loại khác

9 Giá tiền True Input

10 Button “Thêm” True Button Click sẽ thêm một sản phẩm mới

11 Nội dung giới

thiệu sách True Input

Nhập nội dung giới thiệu sách

5.2.1.14 SCU13a: User Screen / On sale Product

Bảng 5.22: Đặc tả màn hình SCU13a

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

Nhập tên sản phẩm

Chương 5: Thiết kế hệ thống 80

3 Icon Giỏ hàng True Image Click sẽ mở màn hình

SCU14

4 Icon “Kebab” True Icon

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới”

5 Icon “Home” True Icon

Click vào sẽ mở màn hình trang chủ hiển thị các danh mục sản phẩm

6 Icon “User” True Icon Click vào sẽ mở màn

hình SCU13a

7 Tab “Đang bán” True Text Hiển thị số lượng các sản phẩm đang bán

8 Tab “Đang chờ” True Text Hiển thị số lượng sản

phẩm đang chờ duyệt

9 Tab “Đã bán” True Text Hiển thị số lượng sản

phẩm đã bán

10 Tab “Tài khoản” True Text

Hiển thị thông tin chi tiết tài khoản người dùng

11 Hình minh họa

cho sản phẩm True Image

Data từ API

Click vào sẽ hiển thị các sản phẩm có trong danh mục. Mở màn hình SCU07

12 Tên sản phẩm True Text Data từ API

13 Giá tiền True Text Data từ

5.2.1.15 SCU13b: User Screen / Pending

Bảng 5.23: Đặc tả màn hình SCU13b

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

3 Icon Giỏ hàng True Image Click sẽ mở màn hình

Chương 5: Thiết kế hệ thống 82

4 Icon “Kebab” True Icon

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới”

5 Icon “Home” True Icon

Click vào sẽ mở màn hình trang chủ hiển thị các danh mục sản phẩm

6 Icon “User” True Icon Click vào sẽ mở màn

hình SCU13a

7 Tab “Đang bán” True Text Hiển thị số lượng các sản phẩm đang bán

8 Tab “Đang chờ” True Text Hiển thị số lượng sản

phẩm đang chờ duyệt

9 Tab “Đã bán” True Text Hiển thị số lượng sản

phẩm đã bán

10 Tab “Tài khoản” True Text

Hiển thị thông tin chi tiết tài khoản người dùng

11 Hình minh họa

cho sản phẩm True Image

Data từ API

Click vào sẽ hiển thị các sản phẩm có trong danh mục. Mở màn hình SCU07

12 Tên sản phẩm True Text Data từ API

13 Giá tiền True Text Data từ

5.2.1.16 SCU13c: User Screen / Sold Product

Bảng 5.24: Đặc tả màn hình SCU13c

No Name Require Format Reference Note

1 Icon “Back” True Icon

Click sẽ quay về trang chủ danh mục sản phẩm

2 Thanh tìm kiếm True Input Nhập tên sản phẩm

cần tìm

Chương 5: Thiết kế hệ thống 84

4 Icon “Kebab” True Icon

Click sẽ ra thêm 2 tác vụ. “Đăng xuất” và “Thêm sản phẩm mới”

5 Icon “Home” True Icon

Click vào sẽ mở màn hình trang chủ hiển thị các danh mục sản phẩm

6 Icon “User” True Icon Click vào sẽ mở màn

hình SCU13a

7 Tab “Đang bán” True Text Hiển thị số lượng các sản phẩm đang bán

8 Tab “Đang chờ” True Text Hiển thị số lượng sản