4.13 .Chặn tài khoản
7. Thiết kế giao diện
7.2. Mô tả chi tiết các màn hình
7.2.1. Đăng nhập
Mô tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 Tài khoản input/text Nhập tên đăng nhập
2 Mật khẩu input/password Nhập mật khẩu
3 Đăng nhập button Đăng nhập
Bảng 54 Đối tượng trên màn hình Đăng nhập
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn button Đăng nhập Đăng nhập vào trang quản trị (Admin)
Bảng 55 Danh sách biến cố và xử lý tương ứng của màn hình Đăng nhập Hình 26 Giao diện đăng nhập
98
7.2.2. SlideBar
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 btnLich Button Hiển thị trang lịch
99
2 btnCauLacBo Button Hiển thị các thẻ câu lạc bộ
3 btnTinnhan Button Hiển thị trang tin nhắn cá
nhân
4 btnQuảnLyCLB Button Hiển thị trang quản lý câu lạc
bộ
5 btnQuanLyTaiKhoan Button Hiển thị trang quản lý tài khoản
6 btnThongtincanhan Button Hiển thị trang thông tin cá nhân
7 btnDangXuat Button Trở về trang đăng nhập
Bảng 56 Đối tượng trên SlideBar
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn button Lịch trình Hiển thị màn hình lịch trình 2 Chọn button Câu lạc bộ của
bạn
Chuyển sang màn hình các câu lạc bộ
3 Chọn button tin nhắn Chuyển sang màn hình tin nhắn cá nhân 4 Chọn button quản lý CLB Chuyển sang màn hình quản lý câu lạc bộ 5 Chọn button quản lý tài
khoản
Chuyển sang màn hình quản lý tài khoản
6 Chọn button thông tin cá nhân
Chuyển sang màn hình thơng tin cá nhân
7 Chọn button đăng xuất Chuyển sang màn hình đăng nhập
100
7.2.3. SlideBarClub
Mô tả các đối tượng trên màn hình
101
STT Tên Kiểu Chức năng
1 Avata Image Hiển thị ảnh CLB
2 buttonBack Button Trở về trang trước
3 Hoạt động Button Hiển thị màn hình hoạt động
4 Thành viên Button Hiển thị màn hình thành viên
5 Lịch hoạt động Button Hiển thị lịch trình của CLB
6 Tin nhắn Button Hiển thị màn hình tin nhắn
nhóm
7 Qũy CLB Button Tab quản lý quỹ
Bảng 58 Đối tượng trên SlideBarClub
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 btnBack Trở về trang CLB
2 btnAcitivy Chuyển sang màn hình hoạt động
3 btnPerson Chuyển sang màn hình thành viên
4 btnCalendar Chuyển sang màn hình lịch trình CLB
5 btnMessage Chuyển sang màn hình tin nhắn CLB
6 btnFund Chuyển sang màn hình quỹ
102
7.2.4. Lịch hoạt động
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 Lịch Table Hiện thị ngày các thứ trong
tuần
2 Today Button Hiển thị ngày hôm này
3 btnNext Button Chuyển tháng kế tiếp
4 June 2022 Button Chọn thời gian mong muốn
5 Chi tiết deadline Form Hiện thị card chưa thông tin
hoạt động
Bảng 60 Đối tượng trên Lịch hoạt động
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn button btnToday Hiển thị các deadline vào ngày hiện tại
103 2 Chọn button back Hiển thị Lịch ở tháng trước
3 Chọn buttonNext Hiển thị Lịch ở tháng tiếp theo 4 Chọn buttonDate Chọn thời gian bất kì
5 Chọn 1 deadline bất kì Hiển thị chi tiết deadline đó
Bảng 61 Biến cố và xử lý tương ứng trên Lịch hoạt động
7.2.5. Tab Câu lạc bộ của tôi
Mô tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimKiem Input/Text Nhập chuỗi tìm kiếm
2 iconSearch Icon Tìm theo từ khóa
3 btnThemCLB Button Thêm CLB
4 Card div Hiển thị card CLB
Bảng 62 Đối tượng trên Tab câu lạc bộ của tôi
Danh sách biến cố và xử lý tương ứng
104
STT Biến cố Xử lý
1 Chọn icon Search (trong thanh Tìm kiếm..)
Tìm kiếm các CLB theo các từ khóa và hiển thị ở bên dưới
2 Chọn buttonAddClub Hiển thị Form thêm câu lạc bộ 3 Chọn Card Club Chuyển tới màn hình câu lạc bộ
Bảng 63 Biến cố và xử lý tương ứng trên Tab câu lạc bộ của tơi
7.2.6. Màn hình thêm câu lạc bộ
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 Ảnh đại diện Button Chọn ảnh CLB
2 Tên CLB Text/Input Nhập thông tin CLB
3 Mô tả CLB Text/Input Nhập mô tả CLB
105
4 Trưởng CLB Select Chọn trưởng clb
5 Thủ quỹ Select Chọn thủ quỹ
Bảng 64 Đối tượng trên Thêm CLB
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn TextInput Nhập thông tin
2 Chọn btnImage Upload file ảnh lên
3 Chọn select Chọn thành viên cho chức vụ
4 Chọn Lưu Lưu thông tin câu lạc bộ
5 Chọn Hủy Đóng form
Bảng 65 Biến cố và xử lý tương ứng trên Thêm CLB
7.2.7. Tab tin nhắn
106 Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimKiem Input/Text Nhập chuỗi tìm kiếm
2 iconSearch Icon Tìm theo từ khóa
3 MessageItem Button Hiển thị tin nhắn của từng cá
nhân
4 Nhập tin nhắn TextInput Nhập thông tin cần nhắn
5 Send Button Gửi tin nhắn
6 Icon 3 chấm Button Xóa tin nhắn
Bảng 66 Đối tượng trên tab tin nhắn
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search (trong thanh Tìm kiếm..)
Tìm kiếm tài khoản cần nhắn theo các từ khóa và hiển thị ở bên dưới
2 Chọn icon 3 chấm Để xóa các cuộc hội thoại
3 TextInput Nhập tin nhắn
4 btnSend Gửi tin nhắn
107
7.2.8. Tab quản lý câu lạc bộ
Mô tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimKiem Input/Text Nhập thông tin khách hàng
2 iconSearch Icon Tìm kiếm thơng tin khách
hàng theo từ khóa
3 btnXuatFile Button Xuất file danh sách khách
hàng
4 danhSachCLB Table Bảng danh sách CLB
5 btnThêmCLB Button Thêm câu lạc bộ
6 iconUpdate Butto Hiển thị màn hình chỉnh sửa
7 iconBlock Button Chặn câu lạc bộ
8 iconDelete Button Xóa CLB
Bảng 68 Đối tượng trên Tab quản lý CLB Hình 33 Giao diện Tab quản lý câu lạc bộ
108 Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search (trong thanh Tìm kiếm..)
Tìm kiếm các sản phẩn theo từ khóa trong textBox Tìm kiếm... và hiển thị bảng bên dưới 2 Chọn button Xuất File Xuất ra file exel danh sách CLB
3 Chọn iconUpdate Hiển thị form chỉnh sửa
4 Chọn iconBlock Chặn CLB
5 Chọn iconDelete Xóa CLB
6 Chon btnAddClub Hiển thị form thêm CLB
Bảng 69 Biến cố và xử lý tương ứng trên Tab quản lý CLB
7.2.9. Chỉnh sửa CLB
109
Hình 37 Giao diện chỉnh sửa câu lạc bộ Hình 35 Giao diện chỉnh sửa câu lạc bộ
110 Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimkiem Input/Text Nhập tên cần tìm.
2 iconSearch Icon tìm kiếm theo ký tự trong
textBox Tìm kiếm
3 Tên CLB Input/Text Nhập tên CLB
4 Mô tả CLB Input/Text Mô tả CLB
5 danhSach table Bảng danh sách thành viên
6 iconPromote Button Thăng chức vụ cho thành
viên
7 iconDelete Icon Xóa thành viên
8 Chọn thành viên để thêm CheckBox Chọn thành viên cần thêm
9 Thêm Button Thêm thành viên
10 btnHủy Button Đóng form
Bảng 70 Đối tượng trên Màn hình chỉnh sửa CLB
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search Tìm kiếm thơng tin tên thành viên text box
2 Chọn TextInput Nhập thông tin
3 Chọn iconPromote Chuyển chức vụ
4 Chọn iconDelete Xóa thành viên khỏi CLB
5 Chọn checkbok Thêm thành viên
111
7.2.10. Tab quản lý tài khoản
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimkiem Input/Text Nhập mã sản phẩm hoặc tên
tài khoản.
2 iconSearch Icon tìm kiếm theo ký tự trong
textBox Tìm kiếm
3 Nhập file Button Nhập file
4 Xuất file Button Xuất file excel
5 Thêm tài khoản Button Hiển thị màn mình thêm tài
khoản
6 Danh sách tài khoản Table Hiển thị danh sách thông tin tài khoản
112
7 IconBlock Button Chặn tài khoản
Bảng 72 Đối tượng trên Tab quản lý tài khoản
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search Tìm kiếm thơng tin tên thành viên text box
2 Chọn TextInput Nhập thông tin
3 Chọn iconBlock Chặn tài khoản
4 Chọn button Thêm tài khoản
Hiển thị màn hình thêm tài khoản
5 Chọn button Xuất/nhập file Xuât/nhập file
Bảng 73 Biến cố và xử lý tương ứng của tab quản lý tài khoản
7.2.11. Tab thông tin cá nhân
113
Hình 40 Giao diện tab thơng tin cá nhân
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 Thông tin Label Hiển thị thông tin
2 Thông tin cần sửa Input/Text Nhập tên sản phẩm
3 Giới tính Select Input Chọn loại
4 Lưu Button Lưu thông tin
5 Hủy Button Đóng form
6 Chỉnh sửa Button Hiển thị màn hình chỉnh sửa
Bảng 74 Đối tượng của Thông tin cá nhân
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn button Lưu Lưu thông tin
114
3 Button Hủy Đóng form chỉnh sửa
4 TextInput Nhập thông tin cần sửa vào
5 ButtonImage Chọn ảnh từ thư viện lên
Bảng 75 Biến cố và xử lý tương ứng của Thông tin cá nhân
7.2.12. Tab hoạt động trong club
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimkiem Input/Text Nhập tên hoạt động cần tìm
2 iconSearch Icon tìm kiếm theo ký tự trong
textBox Tìm kiếm
3 Card Hoạt động button Chọn hoạt động
4 Thêm hoạt động button Thêm hoạt động
Bảng 76 Đối tượng của Tab hoạt động Hình 40 Giao diện Tab hoạt động trong câu lạc bộ
115 Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search Tìm kiếm thơng tin tên hoạt động trong text box
2 Chọn TextInput Nhập thông tin
3 Chọn button Card Activity Chuyển tới giao diện chi tiết hoạt động 4 Chọn button Thêm (trong
bảng danh sách)
Hiển thị giao diện thêm hoạt động
Bảng 77 Biến cố và xử lý tương ứng của Tab hoạt động
7.2.13. Thêm hoạt động
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 Tên hoạt động Text/input Nhập tin hoạt động
116
2 Ngày bắt đầu DatePicker Chọn thời gian bắt đầu
3 Ngày kết thúc DatePicker Chọn thời gian kết thúc
4 Lưu Button Lưu thơng tin
5 Hủy Button Đóng form thêm
Bảng 78 Đối tượng của Thêm hoạt động
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn text/input Nhập thông tin cần lưu
2 Chọn Lưu Lưu thơng tin
3 Chọn Hủy Đóng giao diện thêm hoạt động
Bảng 79 Biến cố và xử lý tương ứng của Thêm hoạt động
7.2.14. Chi tiết hoạt động
Hình 43 Giao diện Chi tiết hoạt động
Hình 44 Giao diện chi tiết hoạt động
117
STT Biến cố Xử lý
1 Chọn thêm thẻ Nhập thông tin vào input vừa hiện ra
2 Chọn Lưu Thêm thẻ công việc vào bảng
3 Chọn 1 thẻ bất kì Hiển thị giao diện chi tiết thẻ 4 Chọn button Tham gia Nhận task công việc
5 Chọn button Thành viên Thêm thành viên vào task 6 Text thêm mô tả Nhập thông tin cần mô tả
Bảng 80 Biến cố và xử lý tương ứng của Giao diện chi tiết hoạt động
7.2.15. Tab thành viên
Mô tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimkiem Input/Text Nhập tên hoạt động cần tìm
118
2 iconSearch Icon tìm kiếm theo ký tự trong
textBox Tìm kiếm
3 Danh sách thành viên Table Hiển thị thông tin thành viên
4 Thêm thành viên Button Hiển thị giao diện thêm thành
viên
5 Đuổi thành viên Button Xóa thành viên khỏi câu lạc
bộ
Bảng 81 Đối tượng của Tab thành viên
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search Tìm kiếm thơng tin thành viên trong text box
2 Chọn TextInput Nhập thông tin
3 Chọn button thêm thành viên
Hiển thị giao diện thêm thành viên
4 Tick vào 1 thành viên ở bảng, chọn button đuổi thành viên
Xóa thành viên khỏi câu lạc bộ
119
7.2.16. Tab nhóm
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimkiem Input/Text Nhập tên hoạt động cần tìm
2 iconSearch Icon tìm kiếm theo ký tự trong
textBox Tìm kiếm
3 Buttn Thêm nhóm Button Hiển thị giao diện thêm nhóm
4 Danh sách các nhóm Table Hiển thị thơng tin các nhóm
5 Icon chỉnh sửa Button Hiển thị giao diện chỉnh sửa
6 Icon thùng rác Button Xóa nhóm
Bảng 83 Đối tượng của tab nhóm
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
120 1 Chọn icon Search Tìm kiếm thơng tin nhóm trong text box
2 Chọn TextInput Nhập thông tin
3 Button thêm Hiển thị giao diện thêm nhóm
4 Button chỉnh sửa Hiển thị giao diện chỉnh sửa
5 Button xóa Xóa nhóm
Bảng 84 Biến cố và xử lý tương ứng của tab nhóm
7.2.17. Thêm thành viên và thêm nhóm
121
Hình 48 Giao diện Thêm nhóm mới
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimkiem Input/Text Nhập tên hoạt động cần tìm
2 iconSearch Icon tìm kiếm theo ký tự trong
textBox Tìm kiếm
3 Danh sách thành viên Table Hiển thị thông tin thành viên
4 Lưu Button Lưu thông tin đã thêm
Bảng 85 Đối tượng của Tab thêm thành viên/nhóm
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search Tìm kiếm thơng tin nhóm trong text box
122 3 Tick 1 hoặc nhiều thành
viên cần thêm, chọn thêm
Thêm thành viên
Bảng 86 Biến cố và xử lý tương ứng của thêm thành viên, thêm nhóm
7.2.18. Tab nhắn tin nhóm
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 Nhập tin nhắn Input Nhập tin nhắn cần nhắn
2 Send Button Gửi tin nhắn
3 Icon tệp Button Chọn tệp
Bảng 87 Đối tượng của tab nhắn tin nhóm
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn textinput Nhập tin nhắn cần nhắn
2 Chọn send Gửi tin nhắn
123
Bảng 88 Biến cố và xử lý tương ứng của tab nhắn tin nhóm
7.2.19. Tab quỹ
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 tbTimkiem Input/Text Nhập tên phiếu cần tìm
2 iconSearch Icon tìm kiếm theo ký tự trong
textBox Tìm kiếm
3 Danh sách phiếu Table Hiển thị thông tin phiếu
thu/chi
4 Thêm phiếu Button Thêm phiếu
Bảng 89 Đối tượng của Tab quỹ
Danh sách biến cố và xử lý tương ứng
STT Biến cố Xử lý
1 Chọn icon Search Tìm kiếm thơng tin phiếu trong text box
124
2 Chọn TextInput Nhập thông tin
3 Chọn thêm phiếu Hiển thị giao diện thêm phiếu
Bảng 90 Biến cố và xử lý tương ứng của Tab quỹ
7.2.20. Thêm phiếu
Mơ tả các đối tượng trên màn hình
STT Tên Kiểu Chức năng
1 Thu Buton Loại phiếu thu
2 Chi Button Loại phiếu chi
3 Số tiền thu/chi Text/input Nhập thông tin
4 Nội dung phiếu Text/input Nhập thông tin
5 Icon upload Button Chọn tệp tải lên
6 Lưu/Hủy Button Lưu/ đóng form
Bảng 91 Đối tượng của thêm phiếu
Danh sách biến cố và xử lý tương ứng