Mô tả chi tiết các giao diện chính

Một phần của tài liệu xây dựng hệ thống quản lý nề nếp trong trường trung học phổ thông (khóa luận tốt nghiệp) (Trang 95 - 128)

- 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

Một phần của tài liệu xây dựng hệ thống quản lý nề nếp trong trường trung học phổ thông (khóa luận tốt nghiệp) (Trang 95 - 128)