SCP007 User Info screen

Một phần của tài liệu Xây dựng website bán giày sử dụng net core và reactjs đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin (Trang 98)

1. Screen flow cho web phía khách hàng

1.7. SCP007 User Info screen

Hình 4. 10.Màn hình thông tin khách hàng

No Name Required Type Reference Note

1 Dropdown thông tin người dùng

Button Click chuyển đến màn

hình SCP007 2 Dropdown đơn hàng

của bạn

Button Click chuyển đến màn

hình SCP008 3 Dropdown đổi mật

khẩu

Button Click chuyển đến màn

hình SCP012

4

Dropdown đăng xuất Button Đăng xuất khỏi tài

khoản và chuyển đến màn hình SCP001 5 Sidebar thông tin

người dùng

Button Click chuyển đến màn

hình SCP007 6 Sidebar đơn hàng của

bạn

Button Click chuyển đến màn

hình SCP008

7 Sidebar đổi sổ địa chỉ Button Click chuyển đến màn

hình SCP010

8 Sidebar đổi mật khẩu Button Click chuyển đến màn

9 Tên người dùng tài khoản

True Input

10 Số điện thoại người dùng

True Input

11 Email đăng ký của tài khoản

True Input

12 Ngày tháng năm sinh True Input

13

Cập nhật tài khoản True Checkbox Nếu check và sẽ có

thể sửa thông tin tài khoản

14 Chọn ảnh Avatar True Input

15 Hiển thị ảnh Avatar Image

16

Cập nhật tài khoản Button Sau khi click sẽ hiển

thị thông báo cập nhật thành công nếu đúng các điều kiện sửa đổi.Nếu sai sẽ hiển thị báo lỗi.

Bảng 4. 7. Mô tả SCP007 User info screen 1.8. SCP008 User order screen

No Name Required Type Reference Note

1 Ngày đặt hàng Text Data từ API

2 Tổng tiền dành cho đơn hàng

Text Data từ API

3 Hình thức thanh toán Text Data từ API

4 Trạng thái đơn hàng Text Data từ API

5 Số lượng đơn hàng trên 1 đơn danh sách

Select- Option

6 Hủy đơn hàng Button Click sẽ hiển thị

thông báo hủy đơn hàng và chuyển trạng thái đơn hàng thanh Cancel

7 Chi tiết đơn hàng Button Click chuyển đến

SCP009

Bảng 4. 8. Mô tả SCP008 User order screen 1.9. SCP009 User order info screen

No Name Required Type Reference Note 1 Thông tin người đặt

hàng

Text Data từ API

2 Trạng thái đơn hàng Text Data từ API

3 Chi tiết sản phẩm đặt Text Data từ API

4 Hủy đơn hàng Text Click vào sẽ chuyển

trạng thái đơn hàng thành “Cancelled” và chuyển đến màn hình

SCP008

Bảng 4. 9. Mô tả SCP009 User order info screen 1.10. SCP010 User address manage screen

Hình 4. 13.Màn hình quản lý sổ địa chỉ

No Name Required Type Reference Note

1 Thêm địa chỉ mới Button Click sẽ chuyển đến

màn hình SCP011 2 Tên người nhập địa

chỉ

Text Data từ API

3 Trạng thái đặt làm địa chỉ mặc định

4 Địa chỉ Text Data từ API

5 Số điện thoại Text Data từ API

6 Chỉnh sửa thông tin Button Click vào chuyển đến

màn hình chỉnh sửa cấu trúc giống màn hình SCP011

7 Xóa địa chỉ Button Click vào xóa đi địa

chỉ đã chọn

Bảng 4. 10. Mô tả SCP010 User address manage screen 1.11. SCP011 User address add screen

Hình 4. 14.Màn hình thêm địa chỉ mới

No Name Required Type Reference Note

1 Họ và tên True Text

2 Số điện thoại True Text

3 Thành phố True Select-

Option

4 Quận huyện True Select-

Option

5 Phường xã True Select-

6 Địa chỉ True Text Gồm số nhà , tên đường và một số chi tiết khác

7 Chọn làm địa chỉ mặc định

True Checkbox Click vào để đặt làm

địa chỉ mặc định

8 Thêm địa chỉ Button Click vào để thêm địa

chỉ mới thành công sẽ thông báo thành công và chuyển đến màn hình SCP010. Nếu có lỗi sẽ báo lỗi ở nơi sai.

9 Hủy thêm địa chỉ Button Chuyển đến màn hình

SC010

Bảng 4. 11. Mô tả SCP011 User address add screen 1.12. SCP012 Change password screen

No Name Required Type Reference Note

1 Mật khẩu cũ True Text

2 Mật khẩu mới True Text

3 Đổi mật khẩu Button Click vào khi thành

công sẽ hiển thị thông báo thành công. Thất bại sẽ hiển thị thông báo lỗi

Bảng 4. 12. Mô tả SCP012 Change password

2. Srceen flow cho web phía admin

1.1. SAP001 Login admin screen

No Name Required Type Reference Note

1 Tài khoản đăng nhập True Input

2 Mật khẩu True Input Hiển thị dưới dạng

“******”

3 Đăng nhập Button Khi click sẽ xác nhận

người dùng, đồng thời vào trang mà hình SAP002

Bảng 4. 13. Mô tả SAP001 Login admin screen 1.2 SAP002 Dashboard screen

Hình 4.2. 2.Màn hình dashboard

No Name Required Type Reference Note

1 Wellcome “Name” DropDown Data từ API

2 Bài viết Button Khi click, chuyển đến

màn hình SAP003

3 Sản phẩm Button Khi click, chuyển đến

màn hình SAP005

4 Màu Button Khi click, chuyển đến

5 Thương hiệu Button Khi click, chuyển đến màn hình SAP008

6 Danh mục Button Khi click, chuyển đến

màn hình SAP009

7 Kích thước Button Khi click, chuyển đến

màn hình SAP0010

8 Đơn hàng Button Khi click, chuyển đến

màn hình SAP0011

9 Tài khoản Button Khi click, chuyển đến

màn hình SAP0012

10 Đánh giá sản phẩm Button Khi click, chuyển đến

màn hình SAP0013

11 Doanh thu Button Khi click, chuyển đến

màn hình SAP0014

Bảng 4. 14. Mô tả SAP002 Dashboard screen 1.3. SAP003 Post Management screen

No Name Required Type Reference Note 1 Filter bài viết theo tên true Input

2 Thêm bài viết Button Khi click, chuyển đến

màn hình SAP007 3 Chọn số lượng bài

viết hiển thị trên 1 trang của bảng

Select- option

4 Số thư tự bài viết Text

5 Tiêu đề bài viết Text Data từ API

6 Ngày đăng bài viết Text Data từ API

7 Trạng thái hiển thị bài viết

Text Data từ API

8 Đăng bài viết Button Khi click thay đổi

trạng thái đăng bài viết từ false thành true

9 Gỡ bài viết Button Khi click thay đổi

trạng thái đăng bài viết từ true thành false

10 Xóa bài viết Button Khi click xóa bài viết

11 Sửa bài viết Button Khi click, chuyển đến

màn hình SAP004

12 Chi tiết bài viết Button Khi click, chuyển đến

màn hình SAP004

1.4. SAP004 Post Add/Post Edit/Post Detail screen

Hình 4.2. 4.Màn hình thêm bài viết 1

No Name Required Type Reference Note

1 Tiêu đề bài viết True Input

2 Mô tả bài viết True Input

3 Ảnh đại diện bài viết True Image- Upload

4 Nội dung bài viết True Input

5 Hiển thị bài viết True Checkbox Click để chọn trạng

thái có hiển thị bài viết hay không

6 Lưu Button Click tạo data trong

database và chuyển về màn hình SAP003

7 Hủy Button Khi click, chuyển đến

màn hình SAP003

Bảng 4. 16. Mô tả SAP004 Post Add/Post Edit/ Post detail screen 1.5. SAP005 Product Management screen

No Name Required Type Reference Note

1 Thêm sản phẩm Button Khi click, chuyển đến

màn hình SAP006

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

3 Giá sản phẩm Text Data từ API

4 Thương hiệu sản phẩm

Text Data từ API

5 Danh mục sản phẩm Text Data từ API

6 Chi tiết sản phẩm theo màu

List Data từ API

7 Màu sản phẩm Text Data từ API

8 Kích thước sản phẩm theo màu

Text Data từ API

9 Số lượng sản phẩm Text Data từ API

10 Xóa sản phẩm Button

11 Sửa sản phẩm Button Khi click, chuyển đến

màn hình SAP006

12 Ẩn chi tiết sản phẩm Button Click ẩn thông tin chi

tiết sản phẩm 13 Hiện chi tiết sản

phẩm

Button Click hiện thông tin

chi tiết sản phẩm

1.6. SAP006 Product Add/Edit

No Name Required Type Reference Note

1 Tên sản phẩm True Input

2 Giá True Input

3 Danh mục True Select-

option

Data từ API

4 Thương hiệu True Select-

option

Data từ API

5 Mô tả sản phẩm True Input

6 Màu sản phẩm True Select-

option

Data từ API

7 Kích thước sản phẩm True Select- option

Data từ API

8 Số lượng sản phẩm True Input

9 Xóa kích thước sản phẩm khỏi màu sản phẩm Button 10 Thêm kích thước sản phẩm vào màu sản phẩm Button 11 Ảnh sản phẩm theo màu True Image- upload 12 Loại bỏ màu sản phẩm Button

13 Thêm màu sản phẩm Button

14 Lưu Button Click tạo data trong

database và chuyển về màn hình SAP005

15 Hủy Button Khi click, chuyển đến

màn hình SAP005

1.7. SAP007 Color Management screen

Hình 4.2. 8.Màn hình quản lý màu

No Name Required Type Reference Note

1 Số thứ tự màu Text

2 Tên màu Text Data từ API

3 Xóa màu Button

4 Thêm màu mới Button Click sẽ mở modal

nhập màu mới

5 Tên màu mới True Input

6 Save Button Click sẽ lưu dữ liều

và data và đóng modal

7 Close Button Click đóng modal

Bảng 4. 19. Mô tả SAP007 Color management screen 1.8. SAP008 Brand Management screen

Hình 4.2. 11.Màn hình thên thương hiệu

No Name Required Type Reference Note

1 Số thứ tự thương hiệu Text

2 Tên thương hiệu Text Data từ API

3 Xóa thương hiệu Button

4 Thêm thương hiệu mới

Button Click sẽ mở modal

nhập thương hiệu mới

5 Tên thương hiệu mới True Input

6 Save Button Click sẽ lưu dữ liều

và data và đóng modal

7 Close Button Click đóng modal

1.9. SAP009 Category Management screen

Hình 4.2. 12.Màn hình quản lý danh mục

No Name Required Type Reference Note

1 Số thứ tự danh mục Text

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

3 Giới tính của danh mục

Text Data từ API

4 Xóa danh mục Button

5 Thêm danh mục mới Button Click sẽ mở modal

nhập danh mục mới 6 Nhập tên danh mục mới True Input 7 Chọn giới tính mà danh mục nhắm vào True Select- option

8 Save Button Click sẽ lưu dữ liều

và data và đóng modal

9 Close Button Click đóng modal

Bảng 4. 21. Mô tả SAP009 Category management screen 1.10. SAP010 Size Management screen

Hình 4.2. 15.Màn hình thêm kích thước

No Name Required Type Reference Note

1 Số thứ tự kích thước Text

2 Tên kích thước Text Data từ API

3 Xóa kích thước Button

4 Thêm kích thước mới Button Click sẽ mở modal

nhập kích thước mới

5 Tên kích thước mới True Input

6 Save Button Click sẽ lưu dữ liều

và data và đóng modal

7 Close Button Click đóng modal

1.11. SAP011 Order Management screen

Hình 4.2. 16.Màn hình quản lý đơn hàng

No Name Required Type Reference Note

1 Ngày đặt hàng Text Data từ API

2 Tổng tiền của đơn hàng

Text Data từ API

3 Trạng thái đơn hàng Text Data từ API

4 Chấp thuận đơn hàng Button Click sẽ thay đổi

trạng thái đơn hàng thành “Delivering”

5 Từ chối đơn hàng Button Click sẽ thay đổi

trạng thái đơn hàng thành “Cancelled”

7 Thông tin người đặt hàng

Form Data từ API

8 Ảnh sản phẩm Image Data từ API

9 Thông tin về sản phẩm

Text Data từ API

10 Đơn giá sản phẩm Text Data từ API

11 Số lượng sản phẩm Text Data từ API

12 Tổng giá thành 1 sản phẩm dựa trên số lượng

Text Data từ API

14 Ẩn chi tiết đơn hàng Button

Bảng 4. 23. Mô tả SAP011 Order management 1.12. SAP012 Account Management

No Name Required Type Reference Note

1 Tên tài khoản Text Data từ API

2 Ngày tạo tài khoản Text Data từ API

3 Vài trò của tài khoản Text Data từ API

4 Ngày online gần đây Text Data từ API

5 Số giờ online Text Data từ API

6 Loại tài khoản Text Data từ API Còn có loại tài khoản

Facebook, Google

7 Tình trạng tài khoản Label Data từ API

8 Khóa tài khoản Button

Bảng 4. 24. Mô tả SAP012 Account management 1.13. SAP013 Rating Management screen

No Name Required Type Reference Note

1 Tên danh mục Text

2 Danh mục số lượng theo sao

Text

3 Danh sách sản phẩm phân loại theo sao

Table Data từ API

4 Nút ẩn hiện comment Button

5 Nút xóa comment Button

Bảng 4. 25. Mô tả SAP012 Rating Management Screen 1.14. SAP014 Revenue Management screen

No Name Required Type Reference Note

1 Tên danh mục Text

2 Đơn hàng và doanh thu trong ngày

Text Data từ API

3 Đơn hàng bị hủy trong ngày

Text Data từ API

4 Tỉ lệ doanh thu so với hôm qua

Text Data từ API

5 Tổng doanh thu Text Data từ API Thông số hiện theo

option (6) người dùng chọn

6 Option chọn để thống kê (theo ngày, theo tuần, theo tháng)

Button

7 Biểu đồ thể hiện doanh thu

Chart Data từ API Thông số hiện theo option (6) người dùng chọn

CHƯƠNG V: CÀI ĐẶT VÀ KIỂM THỬ

1. Cài đặt ứng dụng

❖ Máy phải có cài đặt npm ❖ Máy có cài đặt NodeJS ❖ Máy phải cài đặt SQL server

❖ Máy phải cài đặt trước Visual Studio Các bước cài đặt:

Ở bài hướng dẫn này, nhóm sử dụng IDE là Visual Studio Code:

Bước 1: Clone hoặc download project từ link github:

https://github.com/Thanhnhan77620/Khoa-Luan-Tot-Nghiep.git

Bước 2:

Một thư mục có tên là “Khoa-Luan-Tot-Nghiep” sẽ xuất hiện sau khi clone project từ github hoặc giải nén file đính kèm báo cáo. Tiến hành vào thư mục “Khoa-Luan-Tot-Nghiep”

Bước 3:

Sau khi vào được thư mục “Khoa-Luan-Tot-Nghiep” (như hình), Tiến vào thư mục “Reference” và mở file “SQLQuery.sql” để cài đặt database SQL

Hình 5. 2. Thư mục reference

Bước 4: Mở thư mục “Shop-Shose-FE-Client” chúng ta click chuột phải chọn “Open with

Code” để tiến hành cài đặt trang web bên khách hàng. Mở thư mục “Shop-Shose-FE-Manage” click chuột phải chọn “Open with Code” để tiến hành cài đặt trang web bên admin:

Hình 5. 3. Mở front-end bằng visual code

Bước 5: Sau khi mở được project bằng Visual Studio Code, chọn “Terminal” trên thanh

Hình 5. 4. Giao diện visual studio code

Bước 6: Sau khi cửa sổ Command Line tích hợp hiện ra, chạy lệnh “yarn install” (bên manager

front-end sử dụng “npm install”) để cập nhật những thư viện, package còn thiếu trên máy mà Project cần

Bước 7: Sau khi lệnh npm install kết thúc, mở thêm một cửa sổ Command Line nữa bằng cách

nhấn vào nút “Split Terminal” trên thanh taskbar của cửa sổ Command Line. Tạm dừng bên front end chúng ta vào thư mục “Shop-Shose-BE” để khỏi động backend. Nhấn chọn file “Shop-Shose-BE.sln”.

Hình 5. 6. Thư mục back-end

Bước 8: Sau màn hình visual studio hiện lên chúng ta nhấn vào nút khỏi chạy sau đây để khỏi

chạy back-end.

Bước 9: Sau khi nhấn chạy back-end sẽ hiển thị terminal như sau:

Hình 5. 8. Khởi động back-end

Bước 10: Sau khi chạy back-end chúng ta trở về màn hình front-end và tiến khởi màn hình

front end mà chúng ta muốn chạy ở đây là màn hình khác hàng (client). Bằng các gõ lệnh “npm start” vào terminal. Nhấn enter để chạy lệnh:

Bước 11: Terminal cùng hiện ra như hình và trình duyệt web sẽ tự động chạy trang web lên.

Hoặc có thể chạy tay bằng cách mở trình duyệt web và nhập url: https://localhost:3006/

Hình 5. 10. Kết quả chạy thành công React

2. Kiểm thử phần mềm

Sau khi thực hiện xong việc kiểm thử thì nhóm xin trình bày một số test case tiêu biểu.

2.1 Chức năng đăng ký

ID Test Case

Description Test steps Expected Output Result

SignUp_001 Đăng ký tài khoản user

1. Nhập các thông tin yêu cầu trên màn hình: địa chỉ Email, Tên đầy đủ, Mật khẩu và xác nhận mật khẩu 2. Nhấn nút Đăng ký

Đăng ký thành công thông báo thành công và đóng Modal đăng ký

Pass

SignUp_002 Kiểm tra bỏ trống những trường đánh dấu sao 1. Bỏ trống các trường đánh dấu

Một phần của tài liệu Xây dựng website bán giày sử dụng net core và reactjs đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin (Trang 98)

Tải bản đầy đủ (PDF)

(133 trang)