lOMoARcPSD|17838488

TRƯỜ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:
1. Cao Văn Lâm

Mã SV:

Lớp:

2. Nguyễn Văn An

Mã SV:

Lớp:

3. Nguyễn Văn An

Mã SV:

Lớp:

GIẢNG VIÊN HƯỚNG DẪN:
PGS.TS Lê Đắc Nhường

Hải Phòng, năm 2022
Downloaded by hây hay ()


lOMoARcPSD|17838488

THÔNG TIN DỰ ÁN
(PROJECT INFORMATION)
Dự án viết tắt
DrugStore
(Project Acronym)
XÂY DỰNG WEBSITE BÁN THUỐC DỰA TRÊN NỀN
Tên dự án
TẢNG LARAVEL
(Project title)
Ngày bắt đầu
Ngày kết thúc
04/10/2021
04/12/2021
(Start Date)
(End Date)
Khoa
Khoa Công Nghệ Thông Tin, Trường Đại học Hải Phòng
(Lead Institution)
Name: PGS.TS Lê Đắc Nhường
Người hướng dẫn
Email:
(Project Mentor)
Phone: 0901982883

Đơn vị triển khai Đặng Ngọc Khải
Email:
sản phẩm
(Product Owner) Phone: 0934747602
Phamvantuan0111099@gmail 0364656860
Trưởng nhóm
.com
Quản lý dự án
Phạm Văn Tuân
(Project Manager
&Scrum Master)

0705253605
Nguyễn Hữu Khoa
Thành viên
0376206224
(Team Members)
Nguyễn Văn Hợp

Downloaded by hây hay ()


lOMoARcPSD|17838488

TÀI LIỆU DỰ ÁN
(DOCUMENT INFORMATION)
Dự án
(Project)

XÂY DỰNG WEBSITE BÁN THUỐC DỰA TRÊN NỀN

TẢNG LARAVEL

Tên tài liệu
(Document Title)
Người lập
(Creator)

User Interface
Nguyễn Văn Lâm + An

LỊCH SỬ THAY ĐỔI
(REVISION HISTORY)
Version

Người lập

Ngày

Mô tả (Description)

1.0

Vũ Cao Lân

10/2021

Create Document

1.0


Nguyễn Văn An

10/2021

Create Document

PHÊ DUYỆT TÀI LIỆU
(DOCUMENT APPROVAL)
Họ và tên
(Name)

Vai trò
(Role)

MR. Nguyễn Quốc Long

Mentor/ Product Owner

Đặng Ngọc Khải

Scrum Master

Phạm Văn Tuân

Team Member

Nguyễn Hữu Khoa

Team Member


Nguyễn Văn Hợp

Team Member

Ngày
(Date)

Downloaded by hây hay ()

Chữ ký
(Signature)


lOMoARcPSD|17838488

MỤ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

Downloaded by hây hay ()


lOMoARcPSD|17838488

1. GIỚI THIỆU
Mục đích
Tài liệu này giúp hiểu rõ hơn về giao diện của xây dựng ứng dụng và website bán thuốc.
Hiển thị chi tiết và mô tả các chức năng.
/>
Downloaded by hây hay ()


lOMoARcPSD|17838488


Wireframing Tool for Professionals

/>
Downloaded by hây hay ()


lOMoARcPSD|17838488

2. GIAO DIỆN VÀ ĐĂC TẢ GIAO DIỆN
2.1 Giao diện trang chủ

Downloaded by hây hay ()


lOMoARcPSD|17838488

2.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ị
Nhập tài khoản, mật khẩu
truy
cập
Nội dung hiển thị
Mục

Loại
Dữ liệu
“Email”
Textbox
Text
“Mật khẩu”
Textbox
Text
“Nhớ tài khoản”

Checkbox

Text

“Quên mật
Khẩu”
Hành động
Tên hành động
“Đăng nhập”

Link

Liên kết

Mô tả
Nhập vào email
Nhập vào mật
khẩu
Nhớ tài khoản cho
trang web.

Tìm lại mật khẩu

Mơ tả
Thành công
Không thành công
Click để đăng nhậpChuyển đến trang quản lý Thông báo lỗi
vào hệ thống

Downloaded by hây hay ()


lOMoARcPSD|17838488

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ị
Mục
Loại
Dữ liệu
“Email”
Textbox
Text
“Mật Khẩu”
Textbox

Text
Hành động
Tên hành động
“Đăng nhập”

Mô tả
Click để đăng nhập
vào hệ thống

Thành công
Chuyển đến trang quản lý

Downloaded by hây hay ()

Mô tả
Nhập vào email
Nhập vào mật
khẩu
Không thành công
Thông báo lỗi


lOMoARcPSD|17838488

User Interface

2.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í
Nhập tài khoản, mật khẩu
Hiển thị truy
cập
Nội dung hiển thị
Mục
Loại
Dữ liệu
“Họ và Tên”
Textbox
Text
“Email”
“Mật Khẩu”

Textbox
Textbox

Text
Text

“Nhập lại mật
khẩu”
“Số điện thoại”

Textbox

Text


Mô tả
Nhập tên người
dùng
Nhập vào email
Nhập vào mật
khẩu
Nhập lại mật khẩu

Textbox

Number

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

Hành động
Tên hành động
“Đăng kí”

Mơ tả

Thành cơng

Click để đăng kí
vào hệ thống

Không thành
công
Chuyển đến trang quản lý Thông báo lỗi

10 | P a g


Downloaded by hây hay ()


lOMoARcPSD|17838488

User Interface

2.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

Click vào chức năng danh sách người dùng

cập
Nội dung hiển thị
Mục

Loại

Dữ liệu


Mô tả

“Sửa”

Button

Nhấp chuột

Sửa danh sách người dùng

“Xóa”

Button

Nhập chuột

Xóa danh sách người dùng

Hành động
Tên hành

Mô tả

Thành công

động
Click danh
sách người
dùng


Không thành
công

Sau khi người dùng Click
vào chức năng danh sách
người dùng

Hiển thị vào trang
danh sách người
dùng

11 | P a g

Downloaded by hây hay ()


lOMoARcPSD|17838488

User Interface

2.6 Giao diện tạo mới danh sách người dùng

Đặc tả giao diện:
Hiển thị
Mô tả
Hiển thị truy cập
Nội dung hiển thị
Mục
“Họ”

“Tên”
“Email”
“Mật khẩu”
“Nhập lại mật khẩu”
“Địa chỉ”
“Số điện thoại”
“Hình ảnh”
“Loại tài khoản”
Hành động
Tên hành động
“Thêm mới
người dùng”

Tạo mới người dùng
Hiển thị giao diện thêm mới
Nhập vào thông tin
Loại
Textbox
Textbox
Textbox
Textbox
Textbox
Textbox
Textbox
Inputfield
Combo box

Dữ liệu
Text
Text

Text
Text
Text
Text
Text
URL
Text

Mô tả
Nhập vào họ
Nhập vào tên
Nhập vào email
Nhập vào mật khẩu
Nhập lại mật khẩu
Nhập vào địa chỉ
Nhập vào số điện thoại
Chọn hình ảnh
Chọn loại tài khoản

Mô tả
Click để thêm
mới người
dùng

Thành công
Thông báo đã
thêm thành công
Chuyển đến
trang thông tin


Không thành công
Thông báo lỗi cho người
dùng

12 | P a g

Downloaded by hây hay ()


lOMoARcPSD|17838488

User Interface

2.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

Click vào chức năng danh sách khách hàng

cập
Nội dung hiển thị

Mục

Loại

Dữ liệu

Mô tả

“Sửa”

Button

Nhấp chuột

Sửa danh sách khách hàng

“Xóa”

Button

Nhập chuột

Xóa danh sách khách hàng

Hành động
Tên hành

Mô tả

Thành công


động

Không thành
công

Click danh

Sau khi người dùng Click

Hiển thị vào trang

sách khách

vào chức năng danh sách

danh sách khách hàng

hàng

khách hàng

2.8 Giao diện tạo mới danh sách khách hàng
13 | P a g

Downloaded by hây hay ()


lOMoARcPSD|17838488


User Interface

Đặc tả giao diện:
Hiển thị
Mô tả
Hiển thị truy cập
Nội dung hiển thị
Mục
“Tên khách
hàng”
“Email”
“Địa chỉ”
“Số điện thoại”

Đăng nhập
Hiển thị giao diện đăng nhập
Nhập tài khoản, mật khẩu

“Mô tả”

Loại
Textbox

Dữ liệu
Text

Mô tả
Nhập vào tên

Textbox

Textbox
Textbox

Text
Text
Text

Textbox

Text

Nhập vào email
Nhập vào địa chỉ
Nhập vào số điện
thoại
Thêm mô tả(tuỳ
chọn)

Hành động
Tên hành động
Mô tả
“Thêm mới danh Click để thêm mới
sách khách
người dùng
hàng”

Thành công
Thông báo đã thêm thành
công
Chuyển đến trang thông

tin

Không thành công
Thông báo lỗi cho
người dùng

14 | P a g

Downloaded by hây hay ()


lOMoARcPSD|17838488

User Interface

2.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

Click vào chức năng danh mục sản phẩm


cập
Nội dung hiển thị
Mục

Loại

Dữ liệu

Mô tả

“Sửa”

Button

Nhấp chuột

Sửa danh mục sản phẩm

“Xóa”

Button

Nhập chuột

Xóa danh mục sản phẩm

Hành động
Tên hành

Mô tả


Thành công

động

Không thành
công

Click danh

Sau khi người dùng Click

mục sản

vào chức năng danh mục sản danh mục sản phẩm

phẩm

phẩm

Hiển thị vào trang

15 | P a g

Downloaded by hây hay ()


lOMoARcPSD|17838488

User Interface


2.10 Giao diện tạo mới danh mục sản phẩm

Đặc tả giao diện:
Hiển thị
Mô tả
Hiển thị truy cập
Nội dung hiển thị
Mục
“Tên danh mục”

Thêm mới danh mục sản phẩm
Hiển thị giao diện thêm mới danh mục sản phẩm
Nhập thơng tin
Loại
Textbox

Dữ liệu
Text

“Tình trạng”
“Mô tả”
Hành động
Tên hành động
“Thêm mới
danh mục”

Combo box
Textbox


Text
Text

Mô tả
Click để thêm mới
danh mục

Thành công
Thông báo đã thêm thành
công
Chuyển đến trang thơng
tin

Mơ tả
Nhập vào tên danh
mục
Chọn tình trạng
Nhập vào mơ tả
Khơng thành công
Thông báo lỗi cho
người dùng

16 | P a g

Downloaded by hây hay ()


lOMoARcPSD|17838488

User Interface


2.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

Click vào chức năng danh sách sản phẩm

cập
Nội dung hiển thị
Mục

Loại

Dữ liệu

Mô tả

“Sửa”

Button


Nhấp chuột

Sửa danh sách sản phẩm

“Xóa”

Button

Nhập chuột

Xóa danh sách sản phẩm

Hành động
Tên hành

Mô tả

Thành công

động
Click danh
sách sản
phẩm

Không thành
công

Sau khi người dùng Click
vào chức năng danh sách sản
phẩm


Hiển thị vào trang
danh sách sản phẩm

17 | P a g

Downloaded by hây hay ()


lOMoARcPSD|17838488

2.12 Giao diện tạo mới danh sách sản phẩm

Đặc tả giao diện:
Hiển thị
Mô tả
Hiển thị truy cập
Nội dung hiển thị
Mục
“Tên sản phẩm”

Thêm mới danh sách sản phẩm
Hiển thị trang thêm mới danh sách sản phẩm
Nhập thông tin
Loại
Textbox

Dữ liệu
Text


“Mô tả”

Textbox

Text

“Nội dung”

Textbox

Text

“Giá tiền”
Hành động
Tên hành động
“Thêm mới sản
phẩm”

Textbox

Text

Mô tả
Click để thêm mới
sản phẩm

Thành công
Thông báo đã thêm thành
công
Chuyển đến trang thông

tin

Downloaded by hây hay ()

Mô tả
Nhập vào tên sản
phẩm
Nhập vào mô tả
sản phẩm
Nhập vào nội dung
sản phẩm
Nhập vào giá tiền
Không thành công
Thông báo lỗi cho
người dùng


lOMoARcPSD|17838488

2.13 Giao diện tạo mới chi tiết sản phẩm

Đặc tả giao diện:
Hiển thị
Mô tả
Hiển thị truy cập
Nội dung hiển thị
Mục
“Mã sản phẩm”

Tạo mới chi tiết sản phẩm

Hiển thị trang tạo mới chi tiết sản phẩm
Nhập thông tin
Loại
Combo box

Dữ liệu
Text

“Ngày sản xuất” dateTime picker

Date & Time

“Ngày hết hạn”
“Giá”
“Số lượng”
Hành động
Tên hành động
“Thêm mới hố
đơn xuất nhập”

dateTime picker
Textbox
Textbox

Date & Time
Text
Text

Mơ tả
Click để thêm mới

hố đơn

Thành cơng
Thơng báo đã thêm thành
cơn
Chuyển đến trang thông
tin

Downloaded by hây hay ()

Mô tả
Chọn mã sản
phẩm cần thêm
Chọn ngày sản
xuất
Chọn ngày hết hạn
Nhập giá tiền
Nhập số lượng

Không thành công
Thông báo lỗi cho
người dùng


lOMoARcPSD|17838488

2.14 Giao diện tạo mới tin tức

Đặc tả giao diện:
Hiển thị

Mô tả
Hiển thị truy cập
Nội dung hiển thị
Mục
“Tiêu đề”
“Mô tả”
“Nội dung”
“Tình trạng”

Tạo mới tin tức
Hiển thị trang tạo mới tin tức
Nhập thơng tin
Loại
Text
Text
Text
Combo box

Dữ liệu
Text
Text
Text
Text

“Danh Mục”
“User_ID”

Combo box
Text


Text
Text

“Chọn hình
ảnh”
Hành động
Tên hành động
“Thêm mới hố
đơn xuất nhập”

Image

Image

Mơ tả
Click để thêm mới
hố đơn

Thành công
Thông báo đã thêm thành
côn
Chuyển đến trang thông
tin

2.16 Giao diện danh mục tin tức

Downloaded by hây hay ()

Mô tả
Tiêu đề tin tức

Mơ tả tin tức
Nội dung tin tức
Tình trạng của tin
tức
Danh mục tin tức
UserID người
đăng tin
Hình ảnh của tin
tức

Khơng thành công
Thông báo lỗi cho
người dùng


lOMoARcPSD|17838488

Đặ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

Click vào chức năng danh mục sản phẩm


cập
Nội dung hiển thị
Mục

Loại

Dữ liệu

Mơ tả

“Sửa”

Button

Nhấp chuột

Sửa danh mục sản phẩm

“Xóa”

Button

Nhập chuột

Xóa danh mục sản phẩm

Hành động
Tên hành

Mô tả


Thành công

động

Không thành
công

Click danh

Sau khi người dùng Click

Hiển thị vào trang

mục sản

vào chức năng danh mục sản

danh mục sản phẩm

phẩm

phẩm

Downloaded by hây hay ()


lOMoARcPSD|17838488

2.18 Giao diện tạo mới danh mục tin tức


Đặc tả giao diện:
Hiển thị
Mô tả
Hiển thị truy cập
Nội dung hiển thị
Mục
“Tên danh mục
tin tức”
“Tình trạng”
Hành động
Tên hành động
“Thêm mới
danh mục tin
tức”

Tạo mới danh mục tin tức
Hiển thị trang tạo mới danh mục tin tức
Nhập thông tin
Loại
Textbox

Dữ liệu
Text

Combo box

Text

Mô tả

Click để thêm mới
danh mục tin tức

Thành công
Thông báo đã thêm thành
công
Chuyển đến trang thông
tin

Downloaded by hây hay ()

Mô tả
Nhập tên danh
mục tin tức
Tình trạng của
danh mục

Khơng thành cơng
Thơng báo lỗi cho
người dùng


lOMoARcPSD|17838488

2.19 Giao diện tạo mới danh mục hóa đơn

Đặc tả giao diện:
Hiển thị
Mô tả
Hiển thị truy cập

Nội dung hiển thị
Mục
“Thông tin
khách hàng”
“Ghi chú”
“Thể loại”
Hành động
Tên hành động
“Thêm mới
danh mục hóa
đơn”

Tạo mới danh mục hóa đơn
Hiển thị trang tạo mới danh mục hóa đơn
Nhập thơng tin
Loại
Combo box

Dữ liệu
Text

Text
Combo box

Text
Text

Mơ tả
Thơng tin khách
hàng

Ghi chú
Thể loại hóa đơn

Mơ tả
Click để thêm mới
danh mục hóa đơn

Thành cơng
Thơng báo đã thêm thành
cơng

Khơng thành cơng
Thơng báo lỗi cho
người dùng

Downloaded by hây hay ()