Thiết Kế Giao Diện Người Dùngtên Đề Tài Thiết Kế Giao Diện Cho Hệ Thống.pdf

lOMoARcPSD|38544120

ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Tên đề tài:

THIẾT KẾ GIAO DIỆN CHO HỆ THỐNG

Sinh viên thực hiện : Nguyễn Hồ Thành Nhân
Mã sinh viên : 21115053120337
Lớp học phần : 123TKGDND03
Ngày bảo về : 29/12/2023

ĐÀ NẴNG, THÁNG 12/2023

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

MỤC LỤC

CHƯƠNG 1. MỞ ĐẦU..............................................................................2
1.1. Tên đề tài.................................................................................................2
1.2. Tìm hiểu hoạt động thực tế....................................................................2
1.3. Quy trình nghiệp vụ trên hệ thống phần mềm/website........................2
1.4. Liệt kê tất cả Software Requirement.....................................................2

1.5. Xây dựng sơ đồ usecase..........................................................................2

CHƯƠNG 2. THIẾT KẾ GIAO DIỆN....................................................1
2.1. Liệt kê usecase lựa chọn cho báo cáo cuối kỳ........................................1
2.1.1. Nhân Viên Kho................................................................................1
2.1.2. Đại lý...............................................................................................1
2.2. Thiết kế giao diện cho usecase “Quản lý sản phẩm”............................1
2.2.1. Kịch bản cho Use-case “Quản lý sản phẩm”...................................1
2.2.2. Giao diện của usecae “Quản lý sản phẩm”......................................2
2.2.3. Sơ đồ hoạt động của usecase “Quản lý sản phẩm”..........................4
2.3. Thiết kế giao diện cho usecase “Thống kê nhập xuất”.........................4
2.3.1. Giao diện của usecae “Thống kê nhập xuất”...................................5
2.3.2. Sơ đồ hoạt động của usecase “Thống kê nhập xuất”.......................6
2.4. Thiết kế giao diện cho usecase “Đăng ký tài khoản”............................6
2.4.1. Giao diện của usecae “Đăng ký tài khoản”......................................7
2.4.2. Sơ đồ hoạt động của usecase “Đăng ký tài khoản”..........................9

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

DANH MỤC HÌNH ẢNH

Hình 2.1: Hình 3.5: Giao diện cho use-case Quản lý sản phẩm...........................3
Hình 2.2: Hình 3.5: Sơ đồ hoạt động cho use-case Quản lý sản phẩm.................4
Hình 2.3: Hình 3.5: Giao diện hoạt động cho use-case Thống kê nhập xuất........5
Hình 2.4: Hình 3.5: Sơ đồ hoạt động cho use-case Thống kê nhập xuất .............6
Hình 2.5: Hình 3.5: Giao diện cho use-case Đăng ký tài khoản...........................8
Hình 2.6: Hình 3.5: Sơ đồ hoạt động cho use-case Đăng ký tài khoản.................9

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

CHƯƠNG 1. MỞ ĐẦU

1.1. Tên đề tài
Tên đề tài: Xây dựng website quản lý phân phối hàng hóa cho Cơng ty TNHH giày

Myn
1.2. Tìm hiểu hoạt động thực tế

Mục tiêu chung của dự án là xây dựng một hệ thống website quản lý phân phối
hàng hóa hồn chỉnh và hoạt động một cách hiệu quả để giúp công ty TNHH
giày Myn cải thiện quá trình phân phối sản phẩm của họ. Về mục tiêu cụ thể, dự
án hướng đến một website có thể:

 Tối ưu hóa q trình lập kế hoạch vận chuyển
 Quản lý tồn kho hiệu quả
 Tăng tính thống nhất trong q trình phân phối
 Thiết kế hệ thống có giao diện thân thiện với người dùng, có tính linh

hoạt để có thể mở rộng và tùy chỉnh dựa trên nhu cầu của công ty
trong tương lai
1.3. Quy trình nghiệp vụ trên hệ thống phần mềm/website
Vẽ sơ đồ nghiệp vụ kèm lời giải thích của từng End User.
1.4. Liệt kê tất cả Software Requirement
Theo hướng dẫn môn PTTK HĐT
1.5. Xây dựng sơ đồ usecase

21115053120106 – Bùi Đức Chính 2

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

21115053120106 – Bùi Đức Chính 3

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

CHƯƠNG 2. THIẾT KẾ GIAO DIỆN

2.1. Liệt kê usecase lựa chọn cho báo cáo cuối kỳ
Đăng ký tài khoản(Đại Lý), Quản lý sản shẩm, Thống kê nhập xuất

2.1.1. Nhân Viên Kho

2.1.1.1. Quản lý sản phẩm
2.1.1.2. Thống kê nhập xuất.
2.1.2. Đại lý

2.1.2.1. Đăng ký tài khoản
2.2. Thiết kế giao diện cho usecase “Quản lý sản phẩm”
2.2.1. Kịch bản cho Use-case “Quản lý sản phẩm”

Sử dụng file Scenario mẫu (dạng Table) đã đính kèm ở mục tài liệu như sau:

ST Use case Order

T name

1. Description Nhân viên kho muốn xem hoặc cập nhật thông tin sản
phẩm sản phẩm của công ty trên website

2. Actors Nhân viên kho

3. Input Nhân viên kho đăng nhập thành công

Muốn xem hoặc cập nhật thông tin sản phẩm

4. Output Thông tin sản phẩm đã được cập nhật

5. Basic 昀氀ow Nhân viên kho vào mục quản lý sản phẩm

Nhập thông tin sản phẩm cần thêm ở giao diện cập
nhật sản phẩm 1 -> click thêm để thêm sản phẩm

Nhấn vào nút “Sửa” -> click sửa để sửa tồn bộ thơng
tin sản phẩm

Nhấn vào nút “Xóa” -> click xóa để xóa tồn bộ thơng
tin sản phẩm

6. Alternative
昀氀ow

(nêu các

bước phát

sinh trong

Basic 昀氀ow)

7. Exception
昀氀ow

(Nêu các

trường hợp

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

ngoại lệ của
Basic 昀氀ow)
2.2.2. Giao diện của usecae “Quản lý sản phẩm”

Đầu tiên nhập thông tin thêm sản phẩm_1

Sau đó ấn button thêm để thêm sản phẩm, Thông tin sản phẩm sẽ được đưa vào
table Sản phẩm

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

Sau đó ấn button ‘SỬA’ để thêm sản phẩm, Thông tin sản phẩm sẽ được đưa vào

table Sản phẩm

Sau đó ấn button ‘XĨA’ để thêm sản phẩm, Thơng tin sản phẩm sẽ được xóa table
Sản phẩm

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

Hình 2.1: Hình 3.5: Giao diện cho use-case Quản lý sản phẩm.

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

2.2.3. Sơ đồ hoạt động của usecase “Quản lý sản phẩm”

Hình 2.1: Hình 3.5: Sơ đồ hoạt động cho use-case Quản lý sản phẩm.

2.3. Thiết kế giao diện cho usecase “Thống kê nhập xuất”
Sử dụng file Scenario mẫu (dạng Table) đã đính kèm ở mục tài liệu như sau:

ST Use case Order
T name

8. Description Nhân viên kho muốn xem lại báo cáo thống kê phiếu
nhập, xuất

9. Actors Nhân viên kho

10. Input Nhân viên kho đăng nhập thành công

11. Output Xem thông tin báo cáo thống kê

12. Basic 昀氀ow Nhân viên kho sau khi đăng nhập thành công vào mục
thống kê

Chọn xem báo cáo thống kê theo từng năm hoặc diễn
biến thay đổi trong 3 năm gần đây

Sau khi xem xong nếu không hoạt động sẽ đăng xuất-

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

>kết thúc hoạt động của use case

13. Alternative
昀氀ow

(nêu các

bước phát

sinh trong

Basic 昀氀ow)

14. Exception

昀氀ow

(Nêu các

trường hợp

ngoại lệ của

Basic 昀氀ow)

2.3.1. Giao diện của usecae “Thống kê nhập xuất”
(một usecase có thể có nhiều giao diện, mỗi hình ảnh chụp giao diện cần có chú

thích số thứ tự hình và tên hình ở phía dưới của hình)

Có thể chọn xem thống kê theo từng năm hoặc biểu đồ biểu diễn sự biến đổi trong 3
năm gần đây

Hình 2.1: Hình 3.5: Giao diện hoạt động cho use-case Thống kê nhập xuất.

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

2.3.2. Sơ đồ hoạt động của usecase “Thống kê nhập xuất”

Hình 2.1: Hình 3.5: Sơ đồ hoạt động cho use-case Thống kê nhập xuất .

2.4. Thiết kế giao diện cho usecase “Đăng ký tài khoản”
Sử dụng file Scenario mẫu (dạng Table) đã đính kèm ở mục tài liệu như sau:

ST Use case Order
T name

15. Description Đại lý muốn đăng ký tài khoản để truy cập vào hệ
thống

Qua quản trị viên

16. Actors Quản trị viên

17. Input Các thông tin cần thiết để đăng ký tài khoản đại lý

18. Output Hệ thống thông báo đã đăng ký thành công

Đại lý có thể đăng nhập và thao tác với website

19. Basic 昀氀ow Quản trị viên đăng nhập vào tài khoản

Click vào đăng ký đại lý để đăng ký tài khoản (Giao
diện đăng ký tài khoản)

Sau khi nhập tài khoản và mật khẩu thì bấm tiếp tục->

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

hệ thống nhảy sang trang nhập thông tin

Hệ thống thơng báo đăng ký thành cơng sau đó có thể
đăng nhập và thao tác với website-> kết thúc hoạt
động của usecase đăng ký

20. Alternative
昀氀ow

(nêu các

bước phát

sinh trong

Basic 昀氀ow)

21. Exception
昀氀ow

(Nêu các

trường hợp

ngoại lệ của

Basic 昀氀ow)

2.4.1. Giao diện của usecae “Đăng ký tài khoản”
(một usecase có thể có nhiều giao diện, mỗi hình ảnh chụp giao diện cần có chú

thích số thứ tự hình và tên hình ở phía dưới của hình)

Nhập đầy đủ các thơng tin vào textbox sau đó click “đăng ký”

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

Hình 2.1: Hình 3.5: Giao diện cho use-case Đăng ký tài khoản.
3. Ghi chú:
+ Đăng xuất: Dấu ba chấm gạch ngang.

Downloaded by Uy vu Nguyen ()

lOMoARcPSD|38544120

2.4.2. Sơ đồ hoạt động của usecase “Đăng ký tài khoản”

Hình 2.1: Hình 3.5: Sơ đồ hoạt động cho use-case Đăng ký tài khoản.

Downloaded by Uy vu Nguyen ()