Professional Documents
Culture Documents
Thiết Kế Phần Mềm Xử Lý Và Giao Diện
Thiết Kế Phần Mềm Xử Lý Và Giao Diện
2 05/26/2024
Tổng quan
• Khái niệm:
Khoa Công Nghệ Thông Tin
Hồ sơ Hồ sơ
Phân tích Thiết kế Thực hiện
Phân tích Thiết kế
3 05/26/2024
Tổng quan
o d
gia
iết kế
D1 D2 Th
- Kiểu dữ liệu
Khối xử lý Thiết kế xử lý - Hằng, biến
- Hàm, đơn thể, lớp đối tượng
D3 D4
Thiết
kế dữ
liệu
4 05/26/2024
Thiết kế giao diện
• Thiết kế giao diện: Mô tả chi tiết cách thức
giao tiếp giữa người sử dụng và phần mềm
• Màn hình giao diện
– Nội dung
– Hình thức trình bày
– Biến cố phải xử lý
– Lập danh sách các biến cố:
STT Điều kiện kích hoạt Xử lý Ghi chú
...
05/26/2024 5
Thiết kế giao diện
...
05/26/2024 6
Thiết kế Xử lý
• Thiết kế xử lý: Mô tả chi tiết hệ thống các hàm
xử lý (cùng với các hằng, biến, kiểu liên quan)
của phần mềm
• Danh sách các kiểu dữ liệu xử lý
STT Kiểu dữ liệu Ý nghĩa Ghi chú
• Phân tích, thiết kế chức năng tra cứu học sinh theo lớp
Khoa Công Nghệ Thông Tin
9 05/26/2024
Ví dụ (tt)
(1)
Cách 1
10 05/26/2024
Ví dụ (tt)
(0)
Cách 2
11 05/26/2024
Ví dụ (tt)
(1)
(0)
(2)
Cách 3
12 05/26/2024
Ví dụ (tt)
2. Thiết kế
b. Thiết kế giao diện
Danh sách các biến cố
STT Điều kiện kích hoạt Xử lý
0 Khởi động màn hình ???
05/26/2024 13
Ví dụ (tt)
2. Thiết kế xử lý
STT Hàm Tham số Kiểu trả về Thuật giải Ghi chú
1 Xuất danh ?
sách lớp
2 Xuất danh ?
sách học
sinh
... ...
Người dùng
D1: Lớp được chọn
D2: Danh sách lớp, Danh sách học sinh
D1 D2 trong lớp được chọn
D3: Danh sách lớp, Danh sách học sinh
Thuật toán xử lý
Tra cứu học sinh
Đọc D3, Xuất danh sách lớp
theo lớp
Nhập D1
Tính D2 (DS học sinh trong lớp được chọn)
D3
Xuất D2 (DS học sinh trong lớp được chọn)
15 05/26/2024
Thiết kế giao diện
Tầm quan trọng của giao diện
WAN
Multimedia
LAN
Dial
Giao dịch điện tử
DSL Wireless
…..
05/26/2024
Xử lý thông tin 17
Tìm kiếm thông tin
Các thành phần của giao diện
Giao diện
Multimedia tương tác
Giao diện
Giao diện
nhập liệu Giao diện
kết xuất Tài liệu điện tử
05/26/2024
Xử lý thông tin 18
Tìm kiếm thông tin
Mục tiêu
• Mục tiêu: mô tả chi tiết cách thức giao tiếp giữa người dùng và
Khoa Công Nghệ Thông Tin
phần mềm trong quá trình thực hiện các nghiệp vụ liên quan
Người dùng
D1 D2
Xử lý
D3 D4
19 05/26/2024
THIẾT KẾ GD – Thiết bị
• Thiết bị vào và ra
– Màn hình
Khoa Công Nghệ Thông Tin
21 05/26/2024
THIẾT KẾ GD - Loại giao diện
Khoa Công Nghệ Thông Tin
22 05/26/2024
TKGD – Loại giao diện
Khoa Công Nghệ Thông Tin
23 05/26/2024
TKGD – Hình thức tương tác
Khoa Công Nghệ Thông Tin
24 05/26/2024
TKGD – Hình thức tương tác
Khoa Công Nghệ Thông Tin
25 05/26/2024
TKGD – Hình thức tương tác
26 05/26/2024
THIẾT KẾ GD – Các vấn đề
Khoa Công Nghệ Thông Tin
27 05/26/2024
TKGD– Các vấn đề
Khoa Công Nghệ Thông Tin
30 05/26/2024
TKGD – Các vấn đề
Khoa Công Nghệ Thông Tin
31 05/26/2024
TKGD - Tính kỹ nghệ
Khoa Công Nghệ Thông Tin
32 05/26/2024
Các yêu cầu chất lượng
– Dễ học
– Thứ tự nhập trực quan, dễ sử dụng
• Tính hiệu quả
– Quy trình nhập đơn giản nhất, tự nhiên nhất
– Tận dụng những bước xử lý trên màn hình
– Tránh thêm những công đoạn (thao tác) thừa (không cần thiết)
– Tốc độ thực hiện nhanh
• Tính tiến hóa
– Các tùy chọn về nội dung
– Hình thức trình bày
– Biến cố phải xử lý
33 05/26/2024
Tính dễ dùng
–Tính thân thiện
Chức năng dễ hiểu
Khoa Công Nghệ Thông Tin
34 05/26/2024
Tính dễ dùng
35 05/26/2024
Tính nhất quán: “chuẩn”
- Chuẩn về dữ liệu: tên gọi, chiều dài, kiểu, cách trình bày
–Chuẩn về mã
Khoa Công Nghệ Thông Tin
Độc lập với việc Tin học hóa, có ý nghĩa về mặt nghiệp vụ
=> xem như dữ liệu bình thường
Do yêu cầu của việc Tin học hóa => đừng làm rối cho NSD
–Chuẩn về cấu trúc hệ thống
Cách trình bày thực đơn (bảng chọn)
Cách trình bày các thành phần trên màn hình
Cách xử lý trên màn hình
–Chuẩn về sưu liệu:
Hướng dẫn trực tuyến
Hướng dẫn trong tài liệu
36 05/26/2024
Các yêu cầu chất lượng
• Thói quen phải tôn trọng => bắt buộc phải tôn
trọng
– Quen với phím enter khi nhập liệu, phím khác
• Thói quen chưa hợp lý hoặc mâu thuẫn với kỹ thuật
=> Phải trao đổi, thuyết phục và thống nhất với
người sử dụng
37 05/26/2024
Kỹ thuật nâng cao chất lượng
3. Xử lý lỗi
Khoa Công Nghệ Thông Tin
• Xét phần mềm Quản lý học sinh với chức năng tiếp nhận
Khoa Công Nghệ Thông Tin
05/26/2024
41
Khoa Công Nghệ Thông Tin
Ví dụ
4 Ch_Phai A_Checkbox
5 Lb_Ngaysinh A_Datetime
… … … … … … …
05/26/2024 42
Ví dụ
• Mô tả các biến cố ?
STT Biến Kiểu Ý nghĩa Ghi chú
1 Mở màn ... ... ...
hình
2
05/26/2024 43
Ví dụ
2 Xuất danh ?
sách học
sinh
... ...
05/26/2024 44
Ví dụ
05/26/2024 45
Bài tập
• Xét phần mềm quản lý giải bóng đá với các yêu cầu sau:
Khoa Công Nghệ Thông Tin
• Ghi nhận kết quả thi đấu, chỉ yêu cầu ghi nhận:
Khoa Công Nghệ Thông Tin
– Tỉ số
• Lập bảng xếp hạng:
– Hạng được dựa trên các tiêu chí sau:
• Điểm số
• Hiệu số
• Số bàn thắng
– Điểm cho mỗi trân thua là 0, hòa là 1, thắng là 3
1. Hãy lập sơ đồ luồng dữ liệu cho mỗi yêu cầu (4)
2. Lập sơ đồ logic dữ liệu (bản ghi logic)
3. Thiết kế màn hình giao diện cho từng yêu cầu.
47 05/26/2024
Bài tập
(4)
2. Thiết kế màn hình giao diện cho từng yêu cầu.
3. Thiết kế thành phần xử lý
48 05/26/2024
Giao diện ghi nhận KQTĐ
• Cách 1:
Khoa Công Nghệ Thông Tin
49 05/26/2024
Giao diện ghi nhận KQTĐ
• Cách 2:
Khoa Công Nghệ Thông Tin
50 05/26/2024
Giao diện ghi nhận KQTĐ
• Cách 3:
Khoa Công Nghệ Thông Tin
51 05/26/2024
Giao diện ghi nhận KQTĐ
• Cách 4:
Khoa Công Nghệ Thông Tin
52 05/26/2024
Giao diện ghi nhận KQTĐ
• Cách 5:
Khoa Công Nghệ Thông Tin
53 05/26/2024
Thiết kế giao diện
54 05/26/2024
Một số định hướng về thiết kế giao diện
1) Chỉ hiển thị những thông tin phù hợp với ngữ cảnh
hiện tại
2) Dùng tên, từ viết tắt và màu gợi nhớ
3) Cho phép tương tác trực quan
4) Tạo thông báo lỗi có ý nghĩa
5) Hiển thị dữ liệu ở nhiều dạng khác nhau trong cửa sổ
6) Thiết lập biểu diễn tượng tự
7) Sử dụng không gian màn hình một cách tối ưu
56 05/26/2024
Một số định hướng về thiết kế giao diện
• Hạn chế input trực tiếp (có thể chọn lựa từ một số dữ
liệu có sẵn)
• Nên đồng nhất giữa thông tin input và hiển thị
• Nên cho phép tuỳ biến input
• Cấm các chức năng không thích hợp trong ngữ cảnh hiện
tại
• Cho phép input ở nhiều dạng khác nhau
• Để cho người sử dụng kiểm soát dòng sự kiện tương tác
• Tự động tính các giá trị input cho người sử dụng nếu có
thể
57 05/26/2024
Ví dụ 1
05/26/2024
58
Khoa Công Nghệ Thông Tin
Ví dụ 1
05/26/2024
59
Khoa Công Nghệ Thông Tin
TK TĐ THEO HƯỚNG TIN HỌC
•Các chức năng được phân nhóm theo ý nghĩa tin học
•Ví dụ: PM quản lý giáo vụ
Khoa Công Nghệ Thông Tin
60 05/26/2024
TK TĐ THEO HƯỚNG ĐỐI
TƯỢNG
Các chức năng được phân nhóm theo đối tượng
Khoa Công Nghệ Thông Tin
61 05/26/2024
TK TĐ THEO HƯỚNG NGHIỆP VỤ
62 05/26/2024
Thiết kế giao diện nhập
63 05/26/2024
Thiết kế giao diện nhập
Phát hiện sai sót và kiểm tra ràng buộc toàn vẹn
– Kiểm
tra ngay?
Khoa Công Nghệ Thông Tin
•Danh mục
Khoa Công Nghệ Thông Tin
66 05/26/2024
Thiết kế giao diện xuất
• Nội dung:
- Dữ liệu trong HTTT
Khoa Công Nghệ Thông Tin
69 05/26/2024
Thiết kế đối thoại
•Đặc điểm:
–Giao diện tương tác
Khoa Công Nghệ Thông Tin
70 05/26/2024
Thiết kế đối thoại
71 05/26/2024
Thiết kế đối thoại – mức ngữ nghĩa
72 05/26/2024
Thiết kế đối thoại – mức cú pháp
- Biểu tượng đi kèm tên gọi ngắn gọn, súc tích và nhất quán
- Cách sử dụng các vật thể: ý nghĩa khi nhấn bên trái/ phải,
nhấn đúp trên mouse…
- Cách di chuyển con trỏ
- Cách dùng màu:
+ Phân biệt các cửa sổ khác nhau lần lượt được mở ra
+ Tạo mối liên hệ giữa các đối tượng thông tin
+ Tình trạng khác nhau của đối tượng
+ Gây chú ý đặc biệt
- Các màu phải hòa hợp
74 05/26/2024
Hệ thống thực đơn (Menu)
•Hệ thống
•Danh mục
Khoa Công Nghệ Thông Tin
05/26/2024
77
Khoa Công Nghệ Thông Tin
Menu
05/26/2024
78
Khoa Công Nghệ Thông Tin
Hệ thống thực đơn chính
•Hệ thống
–Cấu hình hệ thống
Khoa Công Nghệ Thông Tin
–Đăng nhập
–Đổi mật khẩu
–Thoát
•Danh mục
–Danh mục nhân viên
–Danh mục quận huyện
–Danh mục tỉnh thành
–Danh mục hàng hóa
–….
79 05/26/2024
Hệ thống thực đơn chính
Khoa Công Nghệ Thông Tin
80 05/26/2024
Hệ thống thực đơn chính
•Tra cứu (tìn kiếm)
–Tra cứu điểm thi
Khoa Công Nghệ Thông Tin
83 05/26/2024
Phân loại màn hình
85 05/26/2024
Tính nhất quán
Khoa Công Nghệ Thông Tin
86 05/26/2024
Tính trực quan
Khoa Công Nghệ Thông Tin
87 05/26/2024
Tính trực quan
Khoa Công Nghệ Thông Tin
88 05/26/2024
Tính trực quan
Khoa Công Nghệ Thông Tin
89 05/26/2024
Ví dụ
90 05/26/2024
Ví dụ
91 05/26/2024
Ví dụ
•Tính hiệu
Khoa Công Nghệ Thông Tin
quả
92 05/26/2024
Ví dụ
93 05/26/2024
05/26/2024
94
Khoa Công Nghệ Thông Tin
Ví dụ về menu
95 05/26/2024
Ví dụ về menu
96 05/26/2024
Menu quản lý thư viện
97 05/26/2024
Menu quản lý thư viện
98 05/26/2024
Quản lý thư viện
99 05/26/2024
Menu quản lý thư viện
10 05/26/2024
Menu quản lý thư viện
10 05/26/2024
Menu quản lý thư viện
10 05/26/2024
Menu quản lý thư viện
10 05/26/2024
Menu quản lý thư viện
10 05/26/2024
Màn hình tra cứu
–Động: Số lượng thuộc tính trong danh sách do NSD quyết định .
•Chi tiết:
–Xác định chi tiết trong khoảng thời gian từ ngày …… đến ngày
–Có nhiều nút điều khiển khác nhau cho các chi tiết khác nhau
10 05/26/2024
Bài tập
• Cho CSDL của phần mềm quản lý bán hàng như sau:
Khoa Công Nghệ Thông Tin
• Hãy thiết kế giao diện và mô tả các thành phần của giao diện:
– Lập phiếu nhập, lập phiếu xuất
– Tra cứu hàng hóa
10 05/26/2024
Thiết kế Xử lý
Thiết kế xử lý
sách, thanh lý ……
– Nghiệp vụ của giáo vụ : phân công giảng dạy……….
• Mức thiết kế: xử lý là thể hiện nghiệp vụ lên máy tính
thành những hàm, thủ tục
• Mức lập trình : là những lệnh của một ngôn ngữ lập
trình hay môi trường lập trình.
• Mức sử dụng : là những chức năng hay nút điều
khiển mà người sử dụng sẽ chọn để thực hiện
nghiệp vụ của mình
10 05/26/2024
Thiết kế xử lý
Thiết kế
NN lập trình
11 05/26/2024
Thiết kế xử lý
• Kết quả:
Khoa Công Nghệ Thông Tin
11 05/26/2024
Thiết kế xử lý
• Ký hiệu:
Khoa Công Nghệ Thông Tin
Tên hàm
11 05/26/2024
Thiết kế xử lý
• Xét màn hình tiếp nhận học sinh mới như sau:
Khoa Công Nghệ Thông Tin
11 05/26/2024
Ví dụ
• Hãy:
Khoa Công Nghệ Thông Tin
11 05/26/2024
Ví dụ - Mô tả biến cố
• Biến cố 0:
Khoa Công Nghệ Thông Tin
1 Kết thúc - Kiểm tra ngày sinh hợp lệ và xuất Tuổi theo qui
nhập ngày thông báo lỗi nếu không hợp lệ định 1520
sinh
2 Kết thúc - Ghi nhận vị trí của lớp được chọn Chuẩn bị khi
chọn lớp trong danh sách lớp ghi hồ sơ
3 Nhấn nút - Kiểm tra hồ sơ hợp lệ Mã và tên
ghi - Nếu hợp lệ thì nhập hồ sơ học sinh phải khác
và ghi hồ sơ học sinh. Xuất thông báo rỗng
05/26/2024 119
Ví dụ - Danh sách các hàm xử lý
05/26/2024 120
Ví dụ - Lập sơ đồ phối hợp
• Xử lý biến cố 0
Khoa Công Nghệ Thông Tin
(1)
12 05/26/2024
Ví dụ - Lập sơ đồ phối hợp
12 05/26/2024
Ví dụ - Lập sơ đồ phối hợp
(6)
Hàm Xử lý biến cố 0 Xuất hồ sơ học sinh mới
XL_Doc_Ghi XL_Nhap_Xuat
Doc_Danh_Dach Xuat_Danh_Dach
05/26/2024 123
Ví dụ - Lập sơ đồ phối hợp
• Xử lý biến cố 1
Khoa Công Nghệ Thông Tin
– Dùng 1 hàm
• Xử lý biến cố 2
–?
• Xử lý biến cố 3
–?
12 05/26/2024
Ví dụ
05/26/2024
12
Khoa Công Nghệ Thông Tin
Ví dụ
STT Tên xử lý Điều kiện gọi thực hiện Ý nghĩa Ghi chú
Khoa Công Nghệ Thông Tin
Xuất phát từ
người dùng
12 05/26/2024
Ví dụ
–Ý nghĩa:
–Điều kiện thực hiện
–Sơ đồ luồng dữ liệu
–Thuật giải
•Bước 1:
•Bước 2:
•…
•Bước n:
12 05/26/2024
Bài tập
dụ trên.
2. Đánh giá các sơ đồ phối hợp dựa trên các tính chất
- Tính đúng đắn
- Tính tái sử dụng
- Tính dễ bảo trì
- Tính dễ mang chuyển
-…
12 05/26/2024
Bài tập
•1 biểu đồ
2. Vẽ biểu đồ luồng dữ liệu (DFD) cho từng mức của BFD
• Tùy theo, thường là 5 biểu đồ
3. Chuẩn hóa mẫu dữ liệu thành các thực thể mà đạt
được tối thiểu 3 NF
• Thường làm 3 bước
• Vẽ biểu đồ thực thể liên kết (ERD)
12 05/26/2024