Bài thực hành số 1 2 thiết kế gd

BÀI THỰC HÀNH
THIẾT KẾ GIAO DIỆN PHẦN MỀM
Buổi 1. Thiết kế giao diện ứng dụng winform

I. Mục tiêu
- Xây dựng giao diện ứng dụng winform dựa trên công cụ diagrams.
- Nắm được cách thiết kế trên công cụ thiết kế giao diện diagrams.
- Tư duy được giao diện các màn hình chức năng của phần mềm để thực hiện thiết
kế.
II. Nội dung
- Thiết kế giao diện quản lý danh mục thông tin sách với các yêu cầu sau:
+ Các thông tin cần lưu trữ khi có thêm một đầu sách được nhập về thư viện
là: mã sách, tên sách, năm xuất bản, ảnh bìa, tình trạng, thể loại,...
+ Có thể thêm, sửa, xố, lưu hoặc xuất ra thơng tin sách có trong thư viện.
+ Giao diện phải thể hiện số lượng sách có trong thư viện.
+ Có thể quay về giao diện trước/tiến đến giao diện sau
+ Có thể tìm kiếm sách theo từ khoá.
- Các bước thực hiện:
+ Tạo file thiết kế trên diagrams
+ Xây dựng giao diện đăng nhập ứng dụng
+ Xây dựng giao diện danh mục thông tin sách
+ Xây dựng giao diện thêm mới sách
+ Hoàn thiện bài thực hành
1. Tạo file thiết kế trên diagrams
Truy cập địa chỉ:
/>- Chọn nơi lưu file thiết kế:
- Chọn Thiết bị để lưu file thiết kế vào máy tính. Có thể chọn Drive, Dropbox… để
lưu file thiết kế online


- Nhập Email sau đó bấm Tiếp theo, nhập mật khẩu sau đó tiếp theo.

- Bấm vào Tạo biểu đồ mới để tạo file thiết kế mới.

- Đặt tên cho file thiết kế.
- Chọn vào biểu đồ trống.
- Cuối cùng bấm vào Tạo để khởi tạo biểu đồ


- Chọn thư mục lưu file thiết kế:

- Giao diện làm việc của công cụ.


- Thực hiện kéo thả các đối tượng để thiết kế giao diện.
+ 1 là các hình khối, biểu tượng để sử dụng xây dựng thiết kế
+ 2 là các trang thiết kế
+ 3 là khung dùng để chỉnh sửa, phong cách thiết kế
+ 4 là menu chức năng của công cụ
+ Trung tâm là nơi thiết kế.

2. Xây dựng giao diện đăng nhập ứng dụng quản lý thông tin sách
- Khởi động phần mềm quản lý thư viện, phần mềm sẽ có giao diện đăng nhập phần
mềm.


Gợi ý giao diện đăng nhập phần mềm
Tiến hành thực hiện thiết kế giao diện:
+ Sử dụng frame Rectangle đặt vào trung tâm giao diện thiết kế. Điều chỉnh kích
thước frame.

+ Sử dụng text để tạo text cho frame


+ Thực hiện thêm ô nhập tài khoản và mật khẩu:
+ Điều chỉnh kích thước phù hợp với màn hình.

+ Thêm check box Nhớ mật khẩu:


+ Thêm dòng text Nhớ mật khẩu.
+ Thêm Button Đăng nhập
+ Sử dụng cơng cụ tìm kiếm để tìm kiếm các button. Nhập từ khố tìm kiếm, sau
đó enter.
+ Chọn button thích hợp đặt vào frame, điều chỉnh kích thước button căn giữa.

- Thêm text Quên mật khẩu?


- Chọn vào tab Trang-1, bấm vào đổi tên, thực hiện đổi tên thành: Màn hình đăng
nhập.

- Như vậy là chúng ta đã thiết kế được giao diện đăng nhập của phần mềm.
3. Xây dựng giao diện danh mục thông tin sách
- Phân tích các thơng tin cần hiển thị: Đăng nhập phần mềm thành công, hiển thị
danh mục sách trong thư viện.
+ Hiển thị số lượng sách trong kho.
+ Có các button Thêm mới, sửa, xố dữ liệu
+ Có textbox tìm kiếm sách theo tên sách
+ Có selectbox tìm kiếm sách theo loại sách

+ Có button tìm kiếm, button bỏ điều kiện lọc


Gợi ý giao diện danh mục sách
Tiến hành thiết kế giao diện:
- Bấm vào dấu + để thực hiện tạo 1 tab mới để thiết kế giao diện:


+ Sử dụng frame Rectangle đặt vào trung tâm giao diện thiết kế. Điều chỉnh kích
thước frame.

+ Sử dụng text kéo thả vào khung mới tạo để thực hiện nhập các ơ text:

“Phần mềm quản lý thư viện” góc trên cùng bên trái
“Xin chào: Admin” góc trên cùng bên phải
“DANG MỤC THÔNG TIN SÁCH”: ở giữa in đậm


- Thiết kế bảng hiển thị dữ liệu danh mục sách:
+ Nhập table để tìm kiếm các bảng, chọn vào bảng và kéo thả vào khung giao diện
đang thiết kế.

+ Chọn vào icon table ở thanh menu, thực hiện chèn thêm các cột và các dòng của
bảng phù hợp với dữ liệu cần hiển thị..


- Chúng ta xác định cần hiển thị các thông tin của sách bao gồm:
+ Cột đầu tiên sẽ là: STT
+ Tên sách
+ Năm xuất bản

+ Thể loại
+ Tình trạng
+ Ảnh bìa
+ Hành động ( Sửa, xố sách)


- Tiến hành chọn vào các ô, nhập tên cột cho các ơ.

- Ở cột Hành động, sẽ có 2 button đó là sửa và xố đối với mỗi dịng. Ý nghĩa:
Dùng để Sửa xoá bản ghi:


- Phía dưới bảng dữ liệu, chúng ta cần có phân trang, mỗi màn hình chỉ hiển thị 10
hoặc 20 bản ghi. Button phân trang dùng để chuyển sang trang dữ liệu trước hoặc
tiếp theo.

- Phía trên bảng dữ liệu cần hiển thị số lượng sách. Kéo thả text vào khung đang
thiết kế vào điền label:
“Danh mục sách”: Bên dưới DANH MỤC THÔNG TIN SÁCH


“Tổng số: <Số lượng sách hiện tại của phần mềm> để giá trị tạm là 105” đặt bên
phải Danh mục sách

- Thiết kế bộ lọc cho danh mục sách:
Ý nghĩa: Dùng để tìm kiếm sách trong phần mềm theo các tiêu chí.
+ Tên sách: Kiểu input - Ý nghĩa: Nhập tên sách cần tìm kiếm
+ Chọn thể loại sách: Kiểu selectbox - Ý nghĩa: Để chọn thể loại sách cần tìm
kiếm
+ Bỏ lọc: Kiểu Button - Ý nghĩa: Bấm bỏ lọc sẽ reset giá trị mặc địng của Ô nhập

tên sách và selectbox Chọn thể loại sách
+ Tìm kiếm: Kiểu Button - Ý nghĩa: Bấm Tìm kiếm sẽ tìm kiếm tất cả các sách
phù hợp với điều kiện của Ô nhập tên sách và selectbox Chọn thể loại sách.


- Thiết kế button Thêm mới. Kéo thả button vào khung thiết kế. Nhập label thêm
mới cho button.
+ Ý nghĩa: Khi bấm vào thêm mới sẽ hiển thị ra một form để nhập các thông tin
sách cần thêm mới.


- Nhấn vào Tab Trang-2 chọn Đổi tên: Màn hình danh mục sách
4. Xây dựng giao diện thêm mới sách
- Phân tích: Bấm vào button Thêm mới ở màn hình danh mục sách sẽ hiển thị
modal nhập các thông tin:
+ Mã sách, tên sách, năm xuất bản, ảnh bìa, tình trạng, thể loại,...
+ Có button Lưu dữ liệu.
+ Có button Huỷ

Gợi ý giao diện thêm mới thông tin sách
Tiến hành thực hiện thiết kế giao diện:
- Bấm vào + để thực hiện thêm mới tab mới:


+ Sử dụng frame Rectangle đặt vào trung tâm giao diện thiết kế. Điều chỉnh kích
thước frame.

+ Sử dụng text để tạo text cho frame
“Phần mềm quản lý thư viện” góc trên cùng bên trái

“THÊM MỚI THÔNG TIN SÁCH”: in đậm ở giữa

- Thiết kế các ô nhập, chọn các trường dữ liệu của sách cần thêm mới:
+ Tên sách: input – Nhập tên sách
+ Năm xuất bản: input – Nhâp năm xuất bản
+ Thể loại: selectbox – Chọn thể loại sách
+ Tình trạng: selectbox – Chọn tình trạng
+ Ảnh bìa: selectbox – Chọn ảnh đại diện từ máy tính
- Kéo thả rectangle và text thực hiện thiết kế các trường dữ liệu: