3. Sơ đồ tuần tự (Sequence Diagram)
3.16. Sequence xem chi tiết bài viết
Hình 3. 35. Sequence Xem chi tiết bài viết 3.17. Sequence quản lý bài viết
a. Sequence thêm bài viết
b. Sequence sửa đổi bài viết
Hình 3. 37. Sequence sửa bài viết
c. Sequence xóa bài viết
d. Sequence đăng bài viết và hủy đăng bài viết
CHƯƠNG IV: THIẾT KẾ GIAO DIỆN
1. Screen flow cho web phía khách hàng
1.1. SCP001 Home screen
No Name Required Type Reference Note 1 Logo trang web trên
header
Link Khi click, chuyển đến màn
hình SCP001
2 Thông tin liên hệ Text Thông tin khách hàng có thể
liện hệ nếu gặp rắc rối 3 Menu chức năng bao
gồm (Đăng nhập/đăng ký/ kích hoạt tài khoản)
List Khi click “Tất cả sản phẩm”
sẽ chuyển đến trang SCP003. Còn “Đăng nhập”, ”Đăng ký”, “Kích hoạt tài” khoản sẽ mở các Modal .
4 Menu loại sản phẩm category
List Link Chuyển trang đến trang sản phẩm SCP003 và lọc sản phẩm đã chọn 5 Thanh tìm kiếm sản phẩm True Input + Button
Sau khi tên sản phẩm muốn tìm Click”Tìm kiếm” sẽ chuyển đến trang SCP003 và hiện sản phẩm cần tìm.
6 Giỏ hàng Button Hiển thị số lượng sản phẩm
hiện có trong giỏ hàng.Sau khi click sẽ chuyển đến trang SCP005 thông giỏ hàng 7 Slider quản bá trang
web
Slider
8 Tiêu đề bài viết Text Data từ
API
Click sẽ chuyển đến trang SCP002
9 Ảnh đại diện bài viết Image Data từ
API
Click sẽ chuyển đến trang SCP002
10 Mô tả bài viết Text Data từ
API
11 Danh sách trang Button Click chuyển trang của danh
sách bài viết
1.2. SCP002 Post detail screen
No Name Required Type Reference Note
1 Breadcrum trang chủ Link Khi click, chuyển đến
màn hình SCP001 2 Breadcrum tên trang
bài viết đang xem
Text Data từ API Thông tin khách hàng có thể liện hệ nếu gặp rắc rối
3 Tiêu đề bài viết Text Data từ API
4 Ngày đăng bài viết Text Data từ API
5 Nội dung bài viết Input +
Button
Data từ API
6 Danh sách bài viết gợi ý
List Link Data từ API Hiển thị danh sách bài viết mới nhất. Click vào sẽ chuyển sang bài viết mới giống màn hình SCP002
7 Hình đại diện bài viết Image
8 Tiêu đề bài viết Text Data từ API Click sẽ chuyển đến
trang SCP002 9 Nút quay lại trang chủ Button Data từ API Click sẽ chuyển đến
trang SCP001
1.3. SCP003 Product screen
Hình 4. 3.Màn hình danh sách sản phẩm
No Name Required Type Reference Note
1
Tên người dùng sau khi đăng nhập
Text Data từ API Khi click sẽ hiện dropdown lựa chọn chức năng sau đăng nhập
2
Ảnh đại diện của người dùng sau khi đăng nhập
Text Data từ API Khi click sẽ hiện dropdown lựa chọn chức năng sau đăng nhập
3 Danh sách sản phẩm List Data từ API Hiển thị các sản phẩm
4 Ảnh đại diện của sản phẩm
Image Data từ API Click sẽ chuyển đến màn hình SCP004
5 Tên sản phẩm Text Data từ API Click sẽ chuyển đến
màn hình SCP004 6 Số sao sản phẩm được
đánh giá
List Data từ API
7 Giá sản phẩm Text Data từ API
8 Màu sản phẩm Text Data từ API
9 Filter sản phẩm Dropdown
list
Data từ API Click sẽ thu gọn vào
10 Danh sách lọc theo thương hiệu sản phẩm/Tên thương hiệu sản phẩm Checkbox- list/Text
Data từ API Khi check vào
checkbox sẽ filter sản phẩm theo thương hiệu đã click 11 Danh sách lọc theo màu sản phẩm/Tên màu sản phẩm Checkbox- list/Text
Data từ API Khi check vào
checkbox sẽ filter sản phẩm theo màu đã click
12 Danh sách sản phẩm gợi ý
List Data từ API
13 Tên sản phẩm được gợi ý
Link Data từ API Click sẽ chuyển đến màn hình SCP004 14 Giá sản phẩm được
gợi ý
Text Data từ API
15 Ảnh đại diện sản phẩm
Image Data từ API Click sẽ chuyển đến màn hình SCP004
1.4. SCP004 Product detail screen
No Name Required Type Reference Note 1 Ảnh sản phẩm theo
màu của sản phẩm
Image Data từ API
2 Breadcrum tên sản phẩm đang chọn
Text Data từ API
3 Tên sản phẩm Text Data từ API
4 Giá sản phẩm Text Data từ API
5 Màu sản phẩm và size của sản phẩm
Text Data từ API
6 Số lượng sản phẩm còn tồn kho
Text Data từ API
7
Mua sản phẩm Button Click vào số lượng
sản phẩm sẽ giảm và 1 sản phẩm được click sẽ chuyển vào giỏ hàng
8
Chọn màu sản phẩm List Link Data từ API Click vào sẽ đổi ảnh sản phẩm theo màu, đồng thởi đổi danh sách mua sản phẩm gồm (Màu sản phẩm và size của sản phẩm, số lượng trong kho)
9 Dịch vụ ưu đại List
10 Mô tả sản phẩm Text + Image Data từ API 11 Tổng đánh đến từ khác hàng đối với sản phẩm
List Data từ API
12 Avatar người dùng Image Data từ API
13 Tên người dùng Text Data từ API
14 Đánh giá sao Text Data từ API
16
Đánh giá Button Click sẽ lưu bình luận
vào data và hiển thị dưới phần bình luận sản phẩm
17 Số lượng bình luận của sản phẩm
Text Data từ API
18
Hiện bình luận/Ẩn bình luận
Button Click vào sẽ hiện bình
luận của sản
phẩm.Click vào “Ẩn bình luận” sẽ thu gọn các bình luận lại 19 Ngày đăng bình luận
cùng tên người đăng
Text Data từ API
20
Phản hồi bình luận Button Click vào sẽ tạo
khung phản hồi bình luận 21 Khung nhập phản hồi bình luận True Text 22 Đăng phản hồi bình luận
Button Sau kho click sẽ đăng
bình luận con phản hồi cho bình luận cha phía trên
1.5. SCP005 CartProduct screen
Hình 4. 6.Màn hình giỏ hàng (có sản phẩm)
No Name Required Type Reference Note
1 Tên người mua hàng Text Data từ API
2 Số điện thoại người mua
Text Data từ API
3 Địa chỉ người mua Text Data từ API
4 Đổi địa chỉ giao hàng Link Data từ API Click chuyển đến màn hình SCP00
5 Ảnh sản phẩm đã cho vào giỏ
Image Data từ API
6 Thông tin sản phẩm Text Data từ API
7
Đơn giá 1 sản phẩm nhân với số lượng sản phẩm
True Text Data từ API
8 Tổng tiền của 1 sản phẩm với số lượng … Text 9 Loại sản phẩm khỏi giỏ hàng
Button Click vào sản phẩm
sẽ bị loại bỏ khỏi giỏ hàng
10 Tổng tiền người mua phải trả Text 11 Lựa chọn phương thức thanh toán True Radio button 12
Đặt hàng Button Sau khi Click sẽ
thông báo đặt hàng thành công và chuyển đến màn hình giỏ hàng trống
13 Tiếp tục mua sắm Button Click sẽ chuyển đến
màn hình SCP003
14 Tiếp tục mua sắm Button Click sẽ chuyển đến
màn hình SCP003
1.6. SCP006 Login Modal/Register modal
Hình 4. 8.Modal login
No Name Required Type Reference Note 1 Email đă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 web dành cho khách hàng
4 Hủy đăng nhập Button Đóng modal đăng nhập
5 Đăng nhập bằng Facebook
Button Khi click, chuyển đến màn
hình LoginByFacebook 6 Đăng nhập bằng
Button Khi click, chuyển đến màn
hình LoginByGoogle
7 Quên mật khẩu Button Khi click, chuyển đến Modal
quên mật khẩu
8 Đăng ký Button Khi click, chuyển đến Modal
Đăng ký
9 Đóng Modal Button
10 Tên người dùng True Input 11 Địa chỉ email True Input 12 Số điện thoại True Input
13 Tạo mật khẩu True Input Hiển thị dưới dạng “******”
14 Xác thực lại mật khẩu
True Input Hiển thị dưới dạng “******”
15
Đăng ký Button Khi click, nếu thành công sẽ
thông báo ra màn hình ngược lại show thông báo lỗi ra màn hình
16 Đăng nhập ngay Button Đóng modal Đăng ký chuyển
sang modal Đăng nhập
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-