CHƯƠNG 4 : Thiết Kế
4.4. Thiết kế giao diện
4.4.2 Mơ tả chi tiết các màn hình
4.4.2.1. Màn hình “Đăng nhập”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Kiểm tra Email Kiểm tra Email Khi hành động onblur xảy ra
Kiểm tra Email nếu rỗng thì sẽ báo lỗi
2 Kiểm tra mật khẩu Kiểm tra mật khẩu Khi hành động onblur xảy ra
Kiểm tra mật khẩu nếu rỗng thì sẽ báo lỗi
3 Quên mật
khẩu
Tạo mật khẩu mới
Khi người dùng click vào “Quên mật khẩu”
4 Xác nhận đăng nhập Xác nhận đăng nhập Từ người dùng, người dùng click vào nút “Đăng nhập” hoặc
bấm enter 5 Đăng ký tài khoản Chuyển sang màn hình “Đăng ký”
Khi người dùng click vào “Đăng ký ngay”.
6 Thoát Chuyển về
Trang chủ
Khi người dùng click vào nút (X)
Thuật toán cho xử lí “Xác nhận đăng nhập” (xử lý có STT 4)
Bước 1: Người dùng thực hiện điều kiện gọi của xử lý 3
Bước 2: Mở cổng kết nối để gọi Restful API, thực hiện gửi request với phương thức POST.
Bước 3: Server nhận gói request, mở kết nối với CSDL để tiến hành xác nhận tính hợp lệ của tên đăng nhập và mật khẩu.
Bước 4: Trả về trạng thái 200 OK nếu thành công, ngược lại trả về trạng thái báo lỗi tương ứng.
4.4.2.2. Màn hình ”Quên mật khẩu”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Kiểm tra email Kiểm tra email
Khi người dung click button “Send”
Báo lỗi khi để trống input email hoặc không đúng định dạng email. 2 Gửi mã code tới email người dung Gửi mã code tới email người dùng
Khi người dung click button “Send”
4.4.2.3. Màn hình “Đặt lại mật khẩu”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Kiểm tra
verify code
Kiểm tra verify code
Khi người dùng click vào button “Send”
Báo lỗi khi người dung bỏ trống verify code input.
2 Kiểm tra mật khẩu mới
Kiểm tra mật khẩu mới
Khi người dùng click vào button “Send”
Báo lỗi khi người dùng bỏ trống mật khẩu mới input.
3 Cập nhật mật khẩu mới
Cập nhật mật khẩu mới
Khi người dùng click button “Send”
Cập nhật mật khẩu mới của người dùng vào hệ thống.
4.4.2.2. Màn hình “Đăng ký”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Kiểm tra Tên Kiểm tra Tên Khi hành động onblur xảy ra
Kiểm tra Tên nếu rỗng thì sẽ báo lỗi
2 Kiểm tra Họ Kiểm tra Họ Khi hành động onblur xảy ra
Kiểm tra Họ nếu rỗng thì sẽ báo lỗi
3 Kiểm tra Tên đăng nhập
Kiểm tra Tên đăng nhập
Khi hành động onblur xảy ra
Kiểm tra Tê đăng nhập nếu rỗng thì sẽ báo lỗi
Email Email xảy ra 5 Kiểm tra mật khẩu Kiểm tra mật khẩu Khi hành động onblur xảy ra
Kiểm tra mật khẩu nếu rỗng thì sẽ báo lỗi
6 Kiểm tra Mật khẩu xác nhận Kiểm tra Mật khẩu xác nhận Khi hành động onblur xảy ra
Kiểm tra mật khẩu nếu rỗng thì sẽ báo lỗi
7 Xác nhận đăng ký Xác nhận đăng ký Từ người dùng, người dùng click vào nút “Đăng ký” hoặc bấm enter
Mật khẩu và mật khẩu xác nhận phải giống nhau.
8 Thoát Chuyển về
Trang chủ
Khi người dùng click vào nút (X)
Thuật tốn cho xử lí “Xác nhận đăng nhập” (xử lý có STT 7)
Bước 1: Người dùng thực hiện điều kiện gọi của xử lý 7
Bước 2: Mở cổng kết nối để gọi Restful API, thực hiện gửi request với phương thức PUT.
Bước 3: Server nhận gói request, mở kết nối với CSDL để tiến hành xác nhận tính hợp lệ của tên đăng nhập và email.
Bước 4: Trả về trạng thái 200 OK nếu thành công, ngược lại trả về trạng thái báo lỗi tương ứng.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Di chuyển tới trang chủ
Di chuyển tới trang chủ
Khi người dùng click vào text “Trang chủ” hoặc click vào LOGO
2 Di chuyển tới giao diện chính của trang kiểm tra
Di chuyển đến giao diện chính của trang kiểm tra
Khi click vào text kiểm tra
3 Hiển thị danh sách màn hình kiểm tra
Hiển thi danh sách màn hình kiểm tra
Khi người dùng di chuyển chuột vào text kiểm tra thì danh sách màn hình kiểm tra xổ xuống.
4 Di chuyển đến trang “Thông tin kỳ thi”
Di chuyển đến trand “Thông tin kỳ thi”
Khi người dùng click vào text “Thông tin kỳ thi”
5 Di chuyển đến trang “Thảo luận”
Di chuyển đến trang “Thảo luận”
Khi người dùng click vào “Thảo luận”
6 Mở pop up “Đóng góp”
Pop up “Đóng góp hiện ra”, người dùng có thể thực hiện chức năng đóng góp cho hệ thống.
Khi người dùng click vào “Đóng góp”.
7 Thực hiện tìm kiếm
Tìm kiếm đề thi theo nội dung được nhập trong input “Tìm kiếm”
Khi người dùng nhập thơng tin cần tìm kiếm vào input “tìm kiếm” và click vào icon “Tìm kiếm”.
8 Hiển thị pop up thông tin tài khoản
Hiển thị pop up thông tin tài khoản
Khi người dùng click vào profile.
4.4.2.4. Màn hình “Thơng tin kỳ thi”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Di chuyển tới tiêu đề
Di chuyển tới tiêu đề
Khi người dùng click vào tiêu đề bên trái.
4.4.2.5. Màn hình “Thơng tin tài khoản”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Chỉnh sửa tên người dùng Chỉnh sửa tên người dùng Khi hành động onblur xảy ra
Thông báo lỗi nếu tên người dùng trống
2 Chỉnh sửa email người dùng Chỉnh sửa email người dùng Khi hành động onblur xảy ra
Thông báo lỗi nếu email người dùng trống
3 Lưu thông tin chỉnh sửa
Lưu thông tin chỉnh sửa
Khi người dùng click vào button “Lưu”
4 Hủy chỉnh sửa Hủy chỉnh sửa thông tin
Khi người dùng click vào button “Hủy”
4.4.2.6. Màn hình “Thảo luận”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Hiển thị chi tiết nội dung thảo luận
Hiển thị chi tiết nội dung thảo luận
Khi người dùng click vào tiêu đề.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú 1 Sắp xếp danh sách đề thi Sắp xếp danh sách đề thi theo thứ tự tăng dần hoặc giảm dần
Khi người dùng click vào dropdown thứ tự và chọn thứ tự mong muốn. 2 Thực hiện bài test Chuyển tới trang làm bài test
Khi người dùng click vào một trong những bài test hiện hành.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Điểu khiển thanh menu
Ẩn hiện menu làm bài thi
Khi người dùng click vào button điều khiển.
2 Chọn câu hỏi Di chuyển tới câu hỏi xác định.
Khi người dùng click vào button số câu hỏi.
3 Nộp bài thi Nộp bài thi và nhận kết quả làm bài
Khi người dùng click vào button “Nộp bài”.
4 Xem trước bài thi
Hiển thị Popup danh sách số câu hỏi và câu trả lời của người dùng
Khi người dùng click vào button “Xem trước”.
5 Xem đáp án bài thi
Hiển thị đáp án bài thi
Khi người dùng click vào button “Đáp án”.
Điều kiện trước đó người dùng đã hồn thành bài thi 6 Chuyển phần kế tiếp Di chuyển sang phần thi tiếp theo
Khi người dùng click vào button ”Tiếp theo”.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Chạy file nghe Chạy file nghe và bắt đầu thi
Khi người dùng click vào button có biểu tượng Play
2 Chọn câu hỏi Di chuyển tới câu hỏi xác định.
Khi người dùng click vào button số câu hỏi.
3 Nộp bài thi Nộp bài thi và nhận kết quả làm bài
Khi người dùng click vào button “Nộp bài”.
4 Xem trước bài thi
Hiển thị Popup danh sách số câu hỏi và câu trả lời của người dùng
Khi người dùng click vào button “Xem trước”.
5 Xem đáp án bài thi
Hiển thị đáp án bài thi
Khi người dùng click vào button “Đáp án”.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Kiểm tra
Test name
Kiểm tra Test name
Khi sự kiện onblur xảy ra
Thông báo lỗi khi Test name trống.
2 Kiểm tra đường dẫn ảnh Kiểm tra đường dẫn ảnh
Khi sự kiện onblur xảy ra
Thông báo lỗi khi đường dẫn ảnh trống.
3 Kiểm tra
level
Kiểm tra level
Thông báo lỗi khi chưa chọn level.
4 Kiểm tra
thông tin thời gian làm bài
Kiểm tra thông tin thời gian làm bài
Thông báo lỗi khi thông tin thời gian làm bài trống.
5 Kiểm tra file Kiểm tra file Thông báo lỗi khi chưa chọn file test.
6 Lưu đề thi mới
Lưu đề tho đã mới
Khi người dùn click vào button “Lưu”.
7 Xóa đề thi Xóa đề thi Khi người dùn click vào button “Xóa”.
8 Sửa đề thi Sửa đề thi Khi người dùn click vào button “Sửa”.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Kiểm tra Test name
Kiểm tra Test name
Khi sự kiện onblur xảy ra
Thông báo lỗi khi Test name trống.
3 Kiểm tra đường dẫn đến ảnh Kiểm tra đường dẫn ảnh
Khi sự kiện onblur xảy ra
Thông báo lỗi khi đường dẫn link trống.
4 Chỉnh sửa mức độ của đề thi Chỉnh sửa mức độ của đề thi
Khi người dùng click vào button Lưu.
5 Lưu đề thi đã chỉnh sửa
Lưu đề thi đã chỉnh sửa.
Khi người dùng click vào button Lưu.
6 Hủy chỉnh sửa câu hỏi
Hủy chỉnh sửa câu hỏi
Khi người dùng click vào button Đóng.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Kiểm tra Tên người dùng
Kiểm tra tên người dùng
Khi người dùng click button “Lưu”
Thông báo lỗi khi tên người dùng để trống. 2 Kiểm tra email Kiểm tra email Khi người dùng click button “Lưu”
Thông báo lỗi khi email để trống hoặc không đúng định dạng email. 3 Phân quyền cho người dùng Phân quyền cho người dùng Khi người dùng click vào button “Lưu”.
Người dùng phải chọn một trong số các lựa chọn. 4 Kiểm tra mật khẩu Kiểm tra mật khẩu Khi người dùng click vào button “Lưu”.
Báo lỗi khi mật khẩu để trống hoặc quá ngắn. 5 Lưu thông tin người dùng mới Lưu thông tin người dùng mới Khi người dùng click vào button “Lưu”.
Lưu thông tin người dùng mới vào hệ thống. 6 Xóa người dùng Xóa người dùng Khi người dùng click vào button “Xóa”.
Xóa người dùng đó ra khỏi hệ thống.
7 Sửa đề thi Sửa đề thi Khi người dùn click vào button “Sửa”.
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú 1 Cập nhật phân quyền cho User Cập nhật phân quyền cho User Khi người dùng click button Lưu
2 Cập nhật đánh giá mức độ hoạt động của người dùng Cập nhật đánh giá mức độ hoạt động của người dùng Khi người dùng click button “Lưu”
Báo lỗi khi người dùng nhập sai định dạng. 3 Cập nhật huy hiệu của học viên Cập nhật huy hiệu của học viên Khi người dùng click vào button Lưu. 4 Lưu thông tin người dùng đang cập nhật Lưu thông tin người dùng đang cập nhật Khi người dùng click vào button Lưu.
Cập nhật lại thông tin người dùng vào hệ thống.
5 Hủy chỉnh sửa câu hỏi
Hủy chỉnh sửa câu hỏi
Khi người dùng click vào button Đóng.
4.4.2.14. Màn hình “Chi tiết chủ đề thảo luận”
STT Tên xử lí Ý nghĩa Điều kiện gọi Ghi chú
1 Bình luận trả lời nội dung thảo luận
Bình luận trả lời nội dung thảo luận
Khi người dùng click vào button “Trả lời”.