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 hoàn chỉnh và hoạt động một cách hiệu quả để giúp công ty TNHH giày Myn cả
Trang 1ĐẠ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
Trang 2MỤ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
Trang 3DANH 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
Trang 4CHƯƠ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 hoà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 quá 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 quá 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
Trang 521115053120106 – Bùi Đức Chính 3
Trang 6CHƯƠ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
T
Use case
name
Order
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
Muốn xem hoặc cập nhật thông tin sản phẩm
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 toàn bộ thông tin sản phẩm
Nhấn vào nút “Xóa” -> click xóa để xóa toàn bộ thông tin sản phẩm
6 Alternative
昀氀ow
bước phát
sinh trong
Basic 昀氀ow)
昀氀ow
trường hợp
Trang 7ngoạ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
Trang 8Sau đó ấ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
Trang 9Hình 2.1: Hình 3.5: Giao diện cho use-case Quản lý sản phẩm.
Trang 10Hì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
T
Use case
name
Order
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
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
Trang 11xuất->kết thúc hoạt động của use case
13 Alternative
昀氀ow
bước phát
sinh trong
Basic 昀氀ow)
昀氀ow
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.
Trang 12Hì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
T
Use case
name
Order
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
17 Input Các thông tin cần thiết để đăng ký tài khoản đại lý
Đạ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->
Trang 13hệ 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
bước phát
sinh trong
Basic 昀氀ow)
昀氀ow
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ý”
Trang 14Hì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.
Trang 152.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.