- Giao diện đăng nhập trên website:
Hình 3.9 Giao diện đăng nhập trên website
Bảng 3.68 Bảng mô tả các thành phần giao diện đăng nhập trên website
STT Tên thành phần Loại Cách sử dụng
1 Email Textbox Nhập tên tài khoản 2 Mật khẩu Textbox Nhập mật khẩu
3 Đăng nhập Button Click để tiến hành đăng nhập với tài khoản và mật khẩu đã nhập
83 - Giao diện quản lý khách thuê trên website:
Hình 3.10 Giao diện quản lý khách thuê trên website
Bảng 3.69 Bảng mô tả các thành phần giao diện quản lý khách thuê trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách khách
thuê DataGrid
2 Thêm Button
Click hiển thị modal thêm khách thuê mới.
3 Icon sửa Icon
Chọn 1 khách thuê, click để hiển thị modal cập nhật khách thuê.
84 4 Icon xóa Icon
Chọn 1 khách thuê trong danh sách, click để hiển thị modal xác nhận xóa khách thuê.
- Giao diện quản lý người dùng trên website:
Hình 3.11 Giao diện quản lý người dùng trên website
Bảng 3.70 Bảng mô tả các thành phần giao diện quản lý người dùng trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách người
dùng DataGrid
2 Thêm Button
85 3 Icon sửa Icon
Chọn 1 người dùng trong danh sách người dùng, click để hiển thị modal cập nhật người dùng.
4 Icon xóa Icon
Chọn 1 người dùng trong danh sách người dùng, click để hiển thị modal xác nhận xóa người dùng.
5 Thanh search tìm
kiếm người dùng Textbox Nhập tên người dùng mới tìm kiếm
6 Combobox lọc người dùng theo vai trò Combobox Chọn vai trò muốn lọc.
86
Hình 3.12 Giao diện quản lý vai trò trên website
Bảng 3.71 Bảng mô tả các thành phần giao diện quản lý vai trò trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các
vai trò DataGrid
2 Thêm Button
Click hiển thị modal thêm vai trò.
3 Icon sửa Icon
Chọn 1 vai trò trong danh sách vai trò, click để hiển thị modal cập nhật vai trò
4 Icon xóa Icon
Chọn 1 vai trò trong danh sách vai trò, click để hiển thị modal xác nhận xóa vai trò.
5 Icon thông tin chi
tiết vai trò Icon
Chọn 1 vai trò trong danh sách vai trò, click để hiển thị modal cho phép xem và chỉnh sửa các quyền của vai trò.
87 - Giao diện quản lý học sinh trên website:
Hình 3.13 Giao diện quản lý học sinh trên website
Bảng 3.72 Bảng mô tả các thành phần giao diện quản lý học sinh trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách học
sinh DataGrid
2 Thêm Button
Click hiển thị modal thêm học sinh.
3 Combobox lọc
theo lớp Combobox
Chọn lớp muốn lọc
4 Combobox lọc
theo khối Combobox
Chọn khối muốn lọc.
5 Icon sửa Icon Chọn 1 học sinh trong danh sách học sinh, click để hiển thị modal cập nhật học sinh.
88 6 Icon xóa Icon
Chọn 1 học sinh trong danh sách học sinh, click để hiển thị modal xác nhận xóa học sinh.
7 Thanh search tìm
học sinh Nhập tên học sinh cần tìm kiếm
8
Icon tải xuống file Excel danh sách học sinh mẫu
Icon
Click tải xuống file Excel danh sách học sinh mẫu.
9 Icon nhập danh
sách học sinh Icon
Click chọn file Excel danh sách học sinh mẫu đã điền thông tin để nhập dữ liệu học sinh từ file Excel.
89
Hình 3.14 Giao diện quản lý quy định nề nếp trên website
Bảng 3.73 Bảng mô tả các thành phần giao diện quản lý quy định nề nếp trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các
quy định DataGrid
2 Thêm Button
Click hiển thị modal thêm quy định.
3 Combobox lọc quy định theo tiêu chí Combobox Chọn tiêu chí muốn lọc. 4 Combobox lọc quy định theo loại quy định Combobox
Chọn loại quy định muốn lọc.
5 Icon sửa Icon
Chọn 1 quy định trong danh sách quy định, click để hiển thị modal cập nhật quy định.
6 Icon xóa Icon
Chọn 1 quy định trong danh sách quy định, click để hiển thị modal xác nhận xóa quy định.
90 7 Thanh search tìm
kiếm quy định Nhập tên quy định cần tìm kiếm
8
Icon tải xuống file Excel danh sách quy định mẫu
Icon
Click tải xuống file Excel danh sách quy định mẫu.
9 Icon nhập danh
sách quy định Icon
Click chọn file Excel danh sách quy định mẫu đã điền thông tin để nhập dữ liệu quy định từ file Excel.
- Giao diện quản lý tiêu chí nề nếp trên website:
Hình 3.15 Giao diện quản lý tiêu chí nề nếp trên website
Bảng 3.74 Bảng mô tả các thành phần giao diện quản lý tiêu chí nề nếp trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các
tiêu chí DataGrid
91 3 Icon sửa Icon
Chọn 1 tiêu chí trong danh sách tiêu chí, click để hiển thị modal cập nhật tiêu chí.
4 Icon xóa Icon
Chọn 1 tiêu chí trong danh sách tiêu chí, click để hiển thị modal xác nhận xóa tiêu chí.
5 Thanh search tìm
kiếm tiêu chí Nhập tên tiêu chí cần tìm kiếm
6
Icon tải xuống file Excel danh sách tiêu chí mẫu
Icon
Click tải xuống file Excel danh sách tiêu chí mẫu.
7 Icon nhập danh
sách tiêu chí Icon
Click chọn file Excel danh sách tiêu chí mẫu đã điền thông tin để nhập dữ liệu tiêu chí từ file Excel.
92 - Giao diện trang chủ trên website:
Hình 3.16 Giao diện biểu đồ TOP 5 lớp có điểm nề nếp cao nhất theo tuần
93 - Giao diện duyệt phiếu chấm trên website:
Hình 3.18 Giao diện duyệt phiếu chấm trên website
Bảng 3.75 Bảng mô tả các thành phần giao diện duyệt phiếu chấm trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách phiếu
chấm nề nếp List Card
2 Chọn ngày chấm Time Picker
Click lọc các phiếu chấm theo ngày đã chọn.
3 Hôm nay, tuần
này Button
Click lọc các phiếu chấm theo ngày hôm nay và tuần
4 Combobox trạng
thái phiếu chấm Button
94 5 Card phiếu chấm
nề nếp Card
Hiển thị thông tin người chấm, lớp được chấm, thời gian tạo; icon xem chi tiết và icon xem thêm để thực hiện hành động. 6 Icon xem chi tiết Liên kết Click chuyển sang màn hình chi tiết phiếu
chấm.
7 Icon xem thêm
(dấu …) Icon
Click hiển thị 3 lựa chọn: xem chi tiết, chấp nhận, từ chối phiếu chấm.
- Giao diện chi tiết phiếu chấm trên website:
Hình 3.19 Giao diện chi tiết phiếu chấm trên website
Bảng 3.76 Bảng mô tả các thành phần giao diện chi tiết phiếu chấm trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các
95 2 Card thông tin
phiếu chấm Card
Hiển thị thông tin thời gian chấm, người chấm, trạng thái phiếu chấm
3 Card lớp vi phạm Card
Hiển thị thông tin lớp vi phạm, số điểm trừ, số vi phạm; Khi chọn một lớp hiển thị chi tiết các vi phạm của lớp đó (tên vi phạm, tiêu chí, số điểm, học sinh vi phạm), icon xem chi tiết học sinh vi phạm, click hiển thị modal.
4 Từ chối Button Click chuyển trạng thái phiếu chấm từ đang chờ duyệt sang đã từ chối
5 Phê duyệt Button Click chuyển trạng thái phiếu chấm từ đang chờ duyệt sang đã duyệt
- Giao diện duyệt sổ đầu bài trên website:
Hình 3.20 Giao diện duyệt sổ đầu bài trên website
Bảng 3.77 Bảng mô tả các thành phần giao diện duyệt sổ đầu bài trên website
96 1 Danh sách phiếu
chấm sổ đầu bài List Card 2 Chọn ngày chấm Time
Picker Click lọc các phiếu chấm theo ngày đã chọn 3 Hôm nay, tuần
này Button
Click lọc các phiếu chấm theo ngày hôm nay và tuần
4 Combobox trạng
thái phiếu chấm Button Chọn trạng thái phiếu chấm 5 Card phiếu chấm
sổ đầu bài Card
Hiển thị thông tin lớp được chấm, điểm, số buổi vắng, trạng thái, thời gian tạo
6 Icon xem chi tiết Icon Click hiển thị ảnh minh chứng sổ đầu bài. 7 Icon xem thêm
(dấu …) Icon
Click hiển thị 3 lựa chọn: xem chi tiết, chấp nhận, từ chối
- Giao diện quản lý phiếu chấm điểm nề nếp của tôi trên website:
Hình 3.21 Giao diện quản lý phiếu chấm điểm nề nếp của tôi trên website Bảng 3.78 Bảng mô tả các thành phần giao diện quản lý phiếu chấm điểm nề nếp
của tôi trên website
97 1 Danh sách phiếu chấm nề nếp đã chấm List Card
Click vào card nào sẽ hiển thị chi tiết các vi phạm của các lớp ứng với phiếu chấm nề nếp đã chọn. Hiển thị ở bên phải.
2 Chọn ngày chấm Time
Picker Click lọc các phiếu chấm theo ngày đã chọn 3 Hôm nay, tuần
này Button
Click lọc các phiếu chấm theo ngày hôm nay và tuần
4 Combobox trạng
thái phiếu chấm Button Chọn trạng thái phiếu chấm 5 Card phiếu chấm
nề nếp Card
Hiển thị thông tin lớp được chấm, trạng thái, thời gian tạo
6 Icon xem chi tiết Icon Click chuyển sang màn hình chi tiết phiếu chấm
7 Icon xem thêm
(dấu …) Icon
Click hiển thị 3 lựa chọn: xem chi tiết, cập nhật, xóa
8 Tạo phiếu chấm Button Click chuyển sang màn hình tạo phiếu chấm
- Giao diện tạo/cập nhật phiếu chấm vi phạm trên website:
98
Bảng 3.79 Bảng mô tả các thành phần giao diện tạo/cập nhật phiếu chấm vi phạm trên website
STT Tên thành phần Loại Cách sử dụng
1 Chọn lớp Combobox Click chọn lớp cần chấm 2 Tiêu chí Conbobox Click chọn tiêu chí 3 Chọn vi phạm Combobox Click chọn vi phạm
4 Icon add Icon Add lớp để chấm vi phạm, add vi phạm, add học sinh vi phạm
5 Icon sub Icon Xóa lớp chấm vi phạm, xóa vi phạm, xóa học sinh trong danh sách học sinh vi phạm 6 Icon học sinh Icon Click để add danh sách học sinh vi phạm 7 Icon done Icon Hoàn tất danh sách học sinh vi phạm 8 Gửi phiếu chấm Button Tạo phiếu chấm vi phạm, khi đó phiếu
chấm ở trạng thái đang chờ duyệt
- Giao diện quản lý phiếu nộp sổ đầu bài của tôi trên website:
99
Bảng 3.80 Bảng mô tả các thành phần giao diện quản lý phiếu nộp sổ đầu bài của tôi trên website
STT Tên thành phần Loại Cách sử dụng
1 Danh sách phiếu
chấm sổ đầu bài List Card 2 Chọn ngày chấm Time
Picker Click lọc các phiếu chấm theo ngày đã chọn 3 Hôm nay, tuần
này Button
Click lọc các phiếu chấm theo ngày hôm nay và tuần
4 Combobox trạng
thái phiếu chấm Button Chọn trạng thái phiếu chấm 5 Card phiếu chấm
sổ đầu bài Card
Hiển thị thông tin lớp được chấm, điểm, số buổi vắng, trạng thái, thời gian tạo
6 Icon xem chi tiết Liên kết Click hiển thị modal ảnh minh chứng thông tin sổ đầu bài
7 Icon xem thêm
(dấu …) Icon
Click hiển thị 3 option: xem chi tiết, cập nhật, xóa
8 Button nộp sổ
đầu bài Button
Click chuyển sang màn hình tạo phiếu chấm sổ đầu bài
100
- Giao diện tạo/cập nhật phiếu chấm sổ đầu bài trên website:
Hình 3.24 Giao diện tạo/cập nhật phiếu chấm sổ đầu bài trên website
Bảng 3.81 Bảng mô tả các thành phần giao diện tạo/cập nhật phiếu chấm sổ đầu bài trên website
STT Tên thành phần Loại Cách sử dụng
1 Tổng điểm Text Input Nhập số điểm trung bình sổ đầu bài 2 Số lượt vắng Text Input Nhập số buổi vắng
3 Ảnh Choose
Image
Chọn ảnh
101
- Giao diện phân công học sinh trực cờ đỏ trên website:
Hình 3.25 Giao diện phân công học sinh trực cờ đỏ trên website
Bảng 3.82 Bảng mô tả các thành phần giao diện phân công học sinh trực cờ đỏ trên website
STT Tên thành phần Loại Cách sử dụng
1 Chọn lớp Combobox Click chọn lớp của cờ đỏ muốn phân lịch (option)
2 Chọn cờ đỏ Combobox Chọn cờ đỏ muốn phân lịch 3 Lịch trực từ Date Picker Chọn ngày bắt đầu trực 4 Đến ngày Date Picker Chọn ngày kết thúc trực
5 Icon Add Icon Thêm cờ đỏ vào danh sách phân lịch trực 6 Icon Sub Icon Xóa cờ đỏ khỏi danh sách phân lịch trực 7 Danh sách cờ đỏ được phân lịch trực List Card 8 Thẻ học sinh nằm trong danh sách
Card Hiển thị thông tin tên và lớp của cờ đỏ, Icon sub
102 cờ đỏ được phân
lịch
9 Danh sách các lớp
Checkbox Chọn thẻ cờ đỏ muốn phân lịch sau đó tích vào những lớp muốn phân lịch cho cờ đỏ đó
10 Phân công lịch trực
Button Hoàn tất phân công lịch trực, hiển thị bảng kết quả
Hình 3.26 Giao diện quản lý phân công học sinh trực cờ đỏ trên website - Giao diện phân công học sinh nộp sổ đầu bài trên website:
103
Bảng 3.83 Bảng mô tả các thành phần giao diện phân công học sinh nộp sổ đầu bài trên website
STT Tên thành phần Loại Cách sử dụng
1 Học sinh nộp sổ
đầu bài Combobox Chọn học sinh nộp SĐB của lớp 2 Lưu phân công Button Click xác nhận lưu lịch phân công
Hình 3.28 Giao diện quản lý phân công học sinh giữ sổ đầu bài trên website - Giao diện xếp hạng thi đua nề nếp trên website:
104
Bảng 3.84 Bảng mô tả các thành phần giao diện xếp hạng thi đua nề nếp trên website
STT Tên thành phần Loại Cách sử dụng
1 Chọn loại xếp
hạng Combobox
Chọn loại xếp hạng muốn xem
2 Chọn thời gian
xem xếp hạng List button
Chọn thời gian xem xếp hạng.
3 Bắt đầu từ Date Hiển thị thời gian bắt đầu tính xếp hạng 4 Đến ngày Date Hiển thị thời gian kết thúc tính xếp hạng 5 Icon Download Icon Click lưu file Excel xếp hạng nề nếp các
lớp
6 Danh sách lớp và
thứ hạng ListView
Hiển thị thông tin thứ hạng, lớp, giáo viên chủ nhiệm, lượt vắng, lượt vi phạm, điểm trừ, điểm sổ đầu bài, điểm nề nếp, điểm thi đua
- Giao diện thống kê trên website:
105
Bảng 3.85 Bảng mô tả các thành phần giao diện thống kê trên website
STT Tên thành phần Loại Cách sử dụng
1 Loại thống kê Combobox
Click chọn loại thống kê: Học sinh vi phạm, lớp vi phạm, lỗi vi phạm
2 Xếp hạng tuần Button Click thực hiện thống kê theo tuần. 3 Xếp hạng tháng Button Click thực hiện thống kê theo tháng 4 Xếp hạng học kỳ Button Click thực hiện thống kê theo học kỳ 5 Bắt đầu từ Date Hiển thị thời gian bắt đầu thống kê 6 Đến ngày Date Hiển thị thời gian kết thúc thống kê 7 Icon Download Icon Click lưu file excel thống kê
8
Danh sách thống kê theo loại thống kê đã chọn
ListView
9 Icon xem chi tiết Icon
Hiển thị thông tin chi tiết các học sinh vi phạm của lớp/các học sinh vi phạm của một lỗi/các lỗi vi phạm của một học sinh
10 Icon gửi email Icon Gửi email các lỗi vi phạm của lớp/học sinh tới giáo viên chủ nhiệm
106
Hình 3.31 Giao diện thống kê lỗi vi phạm trên website
107 - Giao diện trang chủ trên ứng dụng di động:
Hình 3.33 Giao diện trang chủ trên ứng dụng di động
Bảng 3.86 Bảng mô tả các thành phần giao diện trang chủ trên ứng dụng di động
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các lớp có thể chấm List
Click 1 lớp chuyển sang màn hình thêm vi phạm của lớp đó
2 Thanh tìm kiếm Nhập tên lớp muốn tìm