III. THIẾT KẾ HỆ THỐNG
4. Thiết kế giao diện
- Giao diện của hệ thống được thiết kế phục vụ chủ yếu 2 đối tượng chính là Quản trị viên và nhân viên khách sạn. Khách hàng cũng có thể xem 1 số giao diện khi đến khách sạn như là xem danh sách phòng trống hoặc xem lịch sử thuê phòng của bản thân.
+ Giao diện thống kê: quản trị viên và nhân viên có thể xem thống kê các thông số của khách sạn như thống kê số lượng khách hàng, thống kê nhận trả phòng.
+ Giao diện quản lý phòng: Dùng để hiển thị danh sách các phòng có trong khách sạn bao gồm cả những phòng còn trống và đã cho thuê. Tại giao diện này, quản trị viên cũng có thể thêm, sửa, xóa các phòng và thêm thông tin thuê phòng cho khách hàng mới. Với nhân viên, cũng có thể thực hiện các chức năng tương tự, trừ xóa phòng.
+ Giao diện quản lý nhân viên: Chỉ quản trị viên mới có quyền thao tác với chức năng này. Tại đây, quản trị viên có quyền xem, thêm, sửa, xóa các nhân viên trong khách sạn.
+ Giao diện quản lý khách hàng: Cả quản trị viên và nhân viên đều có thể sử dụng chức năng này để theo dõi, chỉnh sửa về các thông tin của khách hàng.
+ Giao diện quản lý thuê, trả phòng: Chức năng được thực hiện bởi cả quản trị viên và nhân viên. Tại đây có thể quản lý chi tiết và chính xác các thông tin về việc thuê phòng cũng như trả phòng của khách hàng.
4.2. Thiết kế màn hình
4.2.1. Giao diện quản lý phòng
Khi truy cập vào quản lý phòng, giao diện sẽ hiển thị ra với menu ở bên trái bao gồm các chức năng như thống kê, quản lý phòng, quản lý người dùng, khách hàng, quản lý thuê, trả phòng.
Header chung của hệ thống sẽ bao gồm tên hệ thống, tên chức năng, phần đăng xuất, đổi mật khẩu và thông tin cá nhân của người dùng.
Giao diện quản lý phòng bao gồm 1 bảng danh sách thông tin cơ bản của các phòng. Khi click vào phòng, thông tin chi tiết của phòng sẽ được hiển thị ở bên phải. Có thể sửa, xóa và thuê phòng nếu như phòng còn trống. Ngoài ra, cũng có thể xuất Excel báo cáo danh sách phòng.
Ngoài ra, còn có bộ lọc tìm kiếm combobox và ô tìm kiếm textbox để có thể thực hiện chức năng lọc và tìm kiếm.
Hình 13: Giao diện quản lý phòng
STT Tên Kiểu Mô tả
1 listRoom DatagridView Hiển thị danh sách phòng dưới dạng bảng.
Các thông tin cơ bản của phòng bao gồm:
Mã phòng, Giá, Trạng thái, Loại phòng
2 panelDetailRoom Panel Khi click vào một hàng bất kỳ trên danh sách phòng hệ thống hiển thị chi tiết của phòng đó trên panel.
3 textBoxSearch TextBox
4 textBoxIdRoom TextBox Ô để hiển thị mã của phòng
5 textBoxTypeRoom TextBox Ô để hiển thị loại của phòng
6 textBoxPriceRoo m
TextBox Ô hiển thị giá dạng VNĐ của phòng
7 depcriptionRoom TextBox Ô hiển thị mô tả về phòng: vị trí phòng, diện tích, tiện nghi, số
lượng người ở….
8 btnExportExcel button Click vào nút xuất excel để xuất danh sách phòng dạng excel.
9 btnAddRoom button Click vào nút thêm để
thêm mới phòng.
10 btnDeleteRoom button Click vào nút xóa để xóa phòng.
11 btnEditRoom button Click vào nút sửa để sửa các thông tin của phòng.
12 btnRentRoom button Click vào nút thuê phòng để cho thuê phòng.
13 comboboxSearch ComboBox Khi click vào combobox hiển thị danh sách trạng thái của phòng bao gồm: Phòng trống, Phòng đã thuê
13 labelFilter label Bộ lọc tìm kiếm
14 labelSearch label Nhập thông tin tìm kiếm
15 labelId label Mã phòng
16 labelType label Loại phòng
17 labelPrice label Giá phòng
18 labelDecription label Mô tả
4.2.2. Giao diện thêm phòng mới
Khi click vào “Thêm”, 1 cửa sổ hiện nên giúp cho quản trị viên có quyền thêm phòng mới. Các thông tin chi tiết của phòng được hiển thị để nhập một cách dễ dàng. Sau khi nhập có thể click vào “Thêm” để thêm mới hoặc “Hủy”
để trở lại.
Hình 14: Giao diện thêm phòng mới
STT Tên Kiểu Mô tả
1 textBoxIdRoom TextBox Ô để nhập mã của phòng 2 textBoxDescription TextBox Ô để nhập mô tả về
phòng: Vị trí phòng, số người, diện tích,
3 comboBoxTypeRoo m
ComboBox Click vào để chọn loại phòng
4 image PictureBox Click vào để lựa chọn ảnh cho phòng
5 btnCancel button Click vào để đóng form thêm phòng
6 btnAdd button Click vào để lưu thông tin
vừa nhập
labelId label Mã Phòng
labelDescription label Mô tả
labelImage label Ảnh
labelPrice label Giá
4.2.3. Giao diện thuê phòng
Khi click vào “Thuê phòng”, một cửa sổ để nhân viên nhập thông tin của khách hàng được hiện ra như hình bên dưới.
Hình 15: Giao diện thuê phòng
STT Tên Kiểu Mô tả
1 textBoxId TextBox Ô nhập mã khách hàng
2 textBoxName TextBox Ô nhập tên khách hàng
3 textBoxPhoneNumber TextBox Ô nhập số điện thoại khách hàng
4 textBoxEmail TextBox Ô nhập email khách hàng
5 textBoxAddress TextBox Ô nhập địa chỉ khách hàng
6 textBoxIdRoom TextBox Ô hiển thị mã phòng
7 textBoxPriceRoom TextBox Ô hiển thị giá phòng
8 Date DateTimeTi
ker
Ô để lựa chọn ngày tháng năm sinh khách hàng 9 comboBoxMale ComboBox Ô lựa chọn giới tính
khách hàng
10 btnCancel button Click để đóng form thêm
mới khách hàng
11 btnSave button Click để lưu thông tin vừa nhập
12 image PictureBox Chọn ảnh của khách
hàng
13 labelId label Mã khách hàng
14 labelName label Tên khách hàng
15 labelDate label Ngày sinh khách hàng
16 labelPhoneNumber label Số diện thoại khách hàng
17 labelEmail label Email của khách hàng
18 labelAddress label Địa chỉ của khách hàng
19 labelPrice label Giá
20 labelIdRoom label Mã phòng
4.2.4. Giao diện quản lý thuê, trả phòng
Giao diện bao gồm 1 bảng danh sách thông tin thuê, trả phòng của khách hàng. Nhân viên có thể xem thông tin chi tiết và chỉnh sửa các thông tin. Sau khi khách hàng đã trả phòng, chỉ cần click vào button “Trả phòng” để tiến hành thay đổi dữ liệu.
Ngoài ra tại giao diện cũng có bộ lọc, tìm kiếm và button “Xuất Excel”
phục vụ các chức năng tương ứng cho người dùng.
Hình 16: Giao diện quản lý thuê, trả phòng
STT Tên Kiểu Mô tả
1 listRoom DatagridVie
w
Hiển thị danh sách phòng đang thuê bao gồm: Mã phòng, Khách hàng, Ngày thuê, Ngày trả, Trả phòng
2 comboBoxFilter ComboBox Khi click vào comboBox hiển thị: Phòng đã trả, phòng chưa trả
3 textBoxSearch textBox Ô để nhập nội dung tìm kiếm
4 btnExportExcel button Xuất danh sách thuê, trả phòng dạng excel
5 btnDetail button Click vào chi tiết để xem chi tiết thuê, trả phòng
6 labelFilter label Bộ lọc tìm kiếm
7 labelSearch label Nhập thông tin tìm kiếm
4.3. Các chuẩn mực giao diện
Giao diện hệ thống được hiển thị dưới dạng cửa sổ với kích thước 1400x900.
Ngôn ngữ được sử dụng trên giao diện toàn bộ là tiếng Việt.
Đặt phím tắt để đóng form là Alt + F4.
Các đối tượng trong form được căn chỉnh khoảng cách đều nhau, đều các đường biên.
Các button chức năng nào đang khả dụng sẽ được làm nổi bật, các button bị vô hiệu hoá sẽ bị ẩn.
Các label màu nền trong suốt.