2.3 Giao diện đăng nhập người dùngĐặc tả giao diện: Hiển thị Đăng nhập người dùng Mô tả Hiển thị giao diện đăng nhập Hiển thị truy cập Nhập tài khoản, mật khẩu Nội dung hiển thị khẩu Hàn
Trang 1TRƯỜNG ĐẠI HỌC HẢI PHÒNG
KHOA CÔNG NGHỆ THÔNG TIN
_
TÀI LIỆU USER INTERFACE
XÂY DỰNG WEBSITE BÁN THUỐC DỰA
TRÊN NỀN TẢNG LARAVEL
NHÓM SINH VIÊN THỰC HIỆN:
Trang 2THÔNG TIN DỰ ÁN (PROJECT INFORMATION)
Trang 3TÀI LIỆU DỰ ÁN (DOCUMENT INFORMATION)
Version Người lập Ngày Mô tả (Description)
1.0 Nguyễn Văn An 10/2021 Create Document
PHÊ DUYỆT TÀI LIỆU (DOCUMENT APPROVAL)
MR Nguyễn Quốc Long Mentor/ Product Owner
Trang 4MỤC LỤC
THÔNG TIN DỰ ÁN 2
(PROJECT INFORMATION) 2
TÀI LIỆU DỰ ÁN 3
(DOCUMENT INFORMATION) 3
LỊCH SỬ THAY ĐỔI 3
(REVISION HISTORY) 3
PHÊ DUYỆT TÀI LIỆU 3
(DOCUMENT APPROVAL) 3
MỤC LỤC 4
1 GIỚI THIỆU 5
2 GIAO DIỆN VÀ ĐĂC TẢ GIAO DIỆN 5
2.1 Giao diện trang chủ 5
2.2 Giao diện đăng nhập Admin 6
2.3 Giao diện đăng nhập người dùng 7
2.4 Giao diện đăng kí người dùng 8
2.5 Giao diện danh sách người dùng 9
2.6 Giao diện tạo mới danh sách người dùng 10
2.7 Giao diện danh sách khách hàng 11
2.8 Giao diện tạo mới danh sách khách hàng 11
2.9 Giao diện danh mục sản phẩm 13
2.10 Giao diện tạo mới danh mục sản phẩm 14
2.11 Giao diện danh sách sản phẩm 15
2.12 Giao diện tạo mới danh sách sản phẩm 16
2.13 Giao diện tạo mới chi tiết sản phẩm 17
2.14 Giao diện tạo mới tin tức 18
2.16 Giao diện danh mục tin tức 18
2.18 Giao diện tạo mới danh mục tin tức 20
2.19 Giao diện tạo mới danh mục hóa đơn 21
Trang 6Wireframing Tool for Professionals
https://wireframesketcher.com/
Trang 72 GIAO DIỆN VÀ ĐĂC TẢ GIAO DIỆN
2.1 Giao diện trang chủ
Trang 82.2 Giao diện đăng nhập Admin
Đặc tả giao diện:
Hiển thị Đăng nhập admin
Mô tả Hiển thị giao diện đăng nhập admin
Hiển thị
truy cập
Nhập tài khoản, mật khẩu
Nội dung hiển thị
Tên hành động Mô tả Thành công Không thành công
“Đăng nhập” Click để đăng nhập
vào hệ thống
Chuyển đến trang quản lý Thông báo lỗi
Trang 92.3 Giao diện đăng nhập người dùng
Đặc tả giao diện:
Hiển thị Đăng nhập người dùng
Mô tả Hiển thị giao diện đăng nhập
Hiển thị truy cập Nhập tài khoản, mật khẩu
Nội dung hiển thị
khẩu
Hành động
“Đăng nhập” Click để đăng nhập
vào hệ thống Chuyển đến trang quản lý Thông báo lỗi
Trang 102.4 Giao diện đăng kí người dùng
Đặc tả giao diện:
Hiển thị Đăng kí người dùng
Mô tả Hiển thị giao diện đăng kí
Hiển thị truy
Nội dung hiển thị
dùng
khẩu
“Nhập lại mật
khẩu”
Hành động
công
“Đăng kí” Click để đăng kí
vào hệ thống Chuyển đến trang quản lý Thông báo lỗi
User Interface
Trang 112.5 Giao diện danh sách người dùng
Đặc tả giao diện:
Hiển thị Giao diện của admin
Mô tả Hiển thị giao diện danh sách người dùng của admin
Hiển thị truy
cập
Click vào chức năng danh sách người dùng
Nội dung hiển thị
Hành động
Trang 122.6 Giao diện tạo mới danh sách người dùng
Đặc tả giao diện:
Mô tả Hiển thị giao diện thêm mới
Hiển thị truy cập Nhập vào thông tin
Nội dung hiển thị
Thông báo lỗi cho người dùng
User Interface
Trang 132.7 Giao diện danh sách khách hàng
Đặc tả giao diện:
Hiển thị Giao diện của admin
Mô tả Hiển thị giao diện danh sách khách hàng của admin
Hiển thị truy
cập
Click vào chức năng danh sách khách hàng
Nội dung hiển thị
Trang 14Đặc tả giao diện:
Mô tả Hiển thị giao diện đăng nhập
Hiển thị truy cập Nhập tài khoản, mật khẩu
Nội dung hiển thị
“Tên khách
thoại
chọn)Hành động
“Thêm mới danh
Trang 152.9 Giao diện danh mục sản phẩm
Đặc tả giao diện:
Hiển thị Giao diện của admin
Mô tả Hiển thị giao diện danh mục sản phẩm của admin
Hiển thị truy
cập
Click vào chức năng danh mục sản phẩm
Nội dung hiển thị
Trang 162.10 Giao diện tạo mới danh mục sản phẩm
Đặc tả giao diện:
Hiển thị Thêm mới danh mục sản phẩm
Mô tả Hiển thị giao diện thêm mới danh mục sản phẩm
Hiển thị truy cập Nhập thông tin
Nội dung hiển thị
mục
Hành động
“Thêm mới
danh mục” Click để thêm mới danh mục Thông báo đã thêm thànhcông
Chuyển đến trang thôngtin
Thông báo lỗi chongười dùng
User Interface
Trang 172.11 Giao diện danh sách sản phẩm
Đặc tả giao diện:
Hiển thị Giao diện của admin
Mô tả Hiển thị giao diện danh sách sản phẩm của admin
Hiển thị truy
cập
Click vào chức năng danh sách sản phẩm
Nội dung hiển thị
Hành động
Trang 182.12 Giao diện tạo mới danh sách sản phẩm
Đặc tả giao diện:
Hiển thị Thêm mới danh sách sản phẩm
Mô tả Hiển thị trang thêm mới danh sách sản phẩm
Hiển thị truy cập Nhập thông tin
Nội dung hiển thị
phẩm” Click để thêm mới sản phẩm Thông báo đã thêm thànhcông
Chuyển đến trang thôngtin
Thông báo lỗi chongười dùng
Trang 192.13 Giao diện tạo mới chi tiết sản phẩm
Đặc tả giao diện:
Hiển thị Tạo mới chi tiết sản phẩm
Mô tả Hiển thị trang tạo mới chi tiết sản phẩm
Hiển thị truy cập Nhập thông tin
Nội dung hiển thị
phẩm cần thêm
“Ngày sản xuất” dateTime picker Date & Time Chọn ngày sản
xuất
“Ngày hết hạn” dateTime picker Date & Time Chọn ngày hết hạn
Hành động
Trang 202.14 Giao diện tạo mới tin tức
Đặc tả giao diện:
Hiển thị Tạo mới tin tức
Mô tả Hiển thị trang tạo mới tin tức
Hiển thị truy cập Nhập thông tin
Nội dung hiển thị
tức
đăng tin
“Chọn hình
Hành động
“Thêm mới hoá
Trang 21Đặc tả giao diện
Hiển thị Giao diện của admin
Mô tả Hiển thị giao diện danh mục sản phẩm của admin
Hiển thị truy
cập
Click vào chức năng danh mục sản phẩm
Nội dung hiển thị
Trang 222.18 Giao diện tạo mới danh mục tin tức
Đặc tả giao diện:
Hiển thị Tạo mới danh mục tin tức
Mô tả Hiển thị trang tạo mới danh mục tin tức
Hiển thị truy cập Nhập thông tin
Nội dung hiển thị
“Tên danh mục
danh mụcHành động
Trang 232.19 Giao diện tạo mới danh mục hóa đơn
Đặc tả giao diện:
Hiển thị Tạo mới danh mục hóa đơn
Mô tả Hiển thị trang tạo mới danh mục hóa đơn
Hiển thị truy cập Nhập thông tin
Nội dung hiển thị
“Thông tin
