3.4.1. Frontend
a. Giao diện trang chủ
Giao diện trang chủ hiển thị các thơng báo của hệ thống.
Hình 3.26: Giao diện trang chủ
b. Giao diện đăng nhập
Người dùng nhập tên tài khoản và mật khẩu để đăng nhập.
Hình 3.28: Giao diện đăng nhập
c. Giao diện thông tin sinh viên
Giao diện xem thông tin sinh viên của tài khoản hiện tại đang đăng nhập.
d. Giao diện thông tin hộ chiếu
Giao diện xem thơng tin hộ chiếu gồm hình ảnh hộ chiếu và các thong tin.
Hình 3.30: Giao diện thơng tin hộ chiếu
e. Giao diện thông tin visa
Hiển thị giao diện thông tin visa.
f. Giao diện chỉnh sửa thông tin tài khoản
g. Giao diện chỉnh sửa hộ chiếu
Hiển thị giao diện chỉnh sửa thông tin hộ chiếu, có thời gian mở và đóng chỉnh sửa hộ chiếu.
Hình 3.33: Giao diện chỉnh sửa hộ chiếu
h. Giao diện chỉnh sửa visa
Hình 3.34: Giao diện chỉnh sửa visa 3.4.2. Backend
a. Quản lý tài khoản Admin
- Danh sách tài khoản Admin: Hiển thị bảng các tài khoản gồm tên tài khoản, email.
Hình 3.35: Giao diện danh sách tài khoản Admin
- Thêm tài khoản Admin: Hiển thị các input gồm tên tài khoản, email, mật khẩu và nhập lại mật khẩu.
- Chỉnh sửa tài khoản Admin: Hiển thị các input gồm email, đổi mật khẩu và nhập lại mật khẩu.
Hình 3.37: Giao diện chỉnh sửa tài khoản Admin
b. Quản lý tài khoản Người đăng bài
- Danh sách tài khoản Người đăng bài: Tương tự như Admin
- Thêm tài khoản Người đăng bài: Tương tự như Admin.
Hình 3.39: Giao diện thêm tài khoản Người đăng bài
- Chỉnh sửa tài khoản Người đăng bài: Tương tự như Admin.
Hình 3.40: Giao diện chỉnh sửa tài khoản Người đăng bài
c. Quản lý tài khoản Sinh viên
- Danh sách tài khoản Sinh viên: Tài khoản sinh viên hiển thị bảng danh sách sinh viên bao gồm tên tài khoản, email, mã sinh viên, họ tên,CMND, giới tính, ngày sinh, dân tộc, quốc tịch, lớp, địa chỉ, số điện thoại, số hộ chiếu và số thẻ visa.
- Thêm tài khoản Sinh viên:
d. Quản lý lớp
- Danh sách lớp: Hiển thị bảng danh sách gồm tên lớp và số lượng sinh viên.
Hình 3.44: Giao diện danh sách lớp
- Thêm lớp: Có một input là tên lớp.
Hình 3.45: Giao diện thêm lớp
- Chỉnh sửa lớp: Có một input là tên lớp.
Hình 3.46: Giao diện chỉnh sửa lớp
- Danh sách mở chỉnh sửa: Hiển thị danh sách mở chỉnh sửa.
Hình 3.47: Giao diện danh sách mở chỉnh sửa
- Thêm mở chỉnh sửa: Hiển thị giao diện các input gồm tiêu đề chỉnh sửa, ngày mở, ngày đóng, mở cho (Hộ chiếu và visa, hộ chiếu, visa) và nút tùy chọn gửi thông báo qua email lưu học sinh.
Hình 3.49: Nội dung email thơng báo mở cập nhật
- Chỉnh sửa mở chỉnh sửa: Chỉnh sửa lại thông tin mở chỉnh sửa gồm các input tiêu đề, ngày mở, ngày đóng và mở cho (Hộ chiếu và visa, Hộ chiếu, Visa).
f. Quản lý hộ chiếu
- Danh sách hộ chiếu: Hiển thị danh sách hộ chiếu.
Hình 3.51: Giao diện danh sách hộ chiếu
- Chỉnh sửa hộ chiếu: Hiển thị giao diện các input chỉnh sửa hộ chiếu.
g. Quản lý visa
- Danh sách visa: Hiển thị danh sách các visa lưu học sinh.
Hình 3.53: Giao diện danh sách visa
- Chỉnh sửa visa: Hiển thị giao diện các input chỉnh sửa visa.
h. Quản lý thông báo
- Danh sách thông báo: Hiển thị danh sách các thơng báo trên hệ thống.
Hình 3.55: Giao diện danh sách thông báo
- Thêm thông báo: Hiển thị các input thêm thông báo gồm tiêu đề, nội dung và nút gửi thông báo qua email.
Hình 3.56: Giao diện thêm thơng báo
- Chỉnh sửa thông báo: Hiển thị giao diện chỉnh sửa thông báo.
CHƯƠNG 4 KẾT LUẬN