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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 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 21115053120106 – Bùi Đức Chính 2 Downloaded by Uy vu Nguyen (tailieuso.11@gmail.com) lOMoARcPSD|38544120 21115053120106 – Bùi Đức Chính 3 Downloaded by Uy vu Nguyen (tailieuso.11@gmail.com) 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 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 (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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com) 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 (tailieuso.11@gmail.com)