Chương 3 XÂY DỰNG HỆ THỐNG
3.4. Thiết kế giao diện
3.4.1.3 Mô tả chi tiết giao diện
3.4.1.3.1. Giao diện đăng ký
Hình 3.42: Phác thảo giao diện đăng ký ở Web
STT Tên thành phần Loại Mô tả thành phần
1 Tên TextBox Nhập tên
2 Họ TextBox Nhập họ
97
4 Tên đăng nhập TextBox Nhập tên đăng nhập
5 Mật khẩu TextBox Nhập mật khẩu
6 Đăng ký Button Đăng ký tài khoản và chuyển sang màn hình trang chủ
7 Đăng nhập Button Chuyển sang màn hình đăng nhập
Bảng 3.34: Mơ tả giao diện đăng ký ở Web
3.4.1.3.2. Giao diện đăng nhập
Hình 3.43: Phác thảo giao diện đăng nhập ở Web
STT Tên thành phần Loại Mô tả thành phần
98
2 Mật khẩu TextBox Nhập mật khẩu
3 Đăng nhập Button Đăng nhập người dùng vào hệ thống
4 Đăng ký Button Chuyển sang màn hình đăng ký Bảng 3.35: Mô tả giao diện đăng nhập ở Web
3.4.1.3.3. Giao diện trang chủ
Hình 3.44: Phác thảo giao diện trang chủ ở Web
STT Tên thành phần Loại Mô tả thành phần
99
2 Video Video /
Button
Nhấp vào video sẽ hiển thị video chi tiết
3 Avatar Picture /
Button
Nhấp vào sẽ chuyển đến các video hiện có của người dùng 4 Upload button Button Nhấp vào sẽ chuyển sang màn
hình đăng tải video Bảng 3.36: Mô tả giao diện trang chủ ở Web
3.4.1.3.4. Giao diện xem bài viết
Hình 3.45: Phác thảo giao diện xem bài viết
STT Tên thành phần Loại Mô tả thành phần
100 2 Nút comment Button
Nhấn nút comment sẽ chuyển con trỏ bàn phím đến phần bình luận để người dùng tiện lợi nhập bình luận
3 Khu vực bình luận Textbox Người dùng có thể nhập bình luận tuỳ thích ở đây
4 Nút Post Button
Sau khi nhập bình luận người dùng nhấn nút Post để đăng tải bình luận
Bảng 3.37: Mô tả giao diện xem bài viết ở Web
3.4.1.3.5. Giao diện quản lý video
Hình 3.46: Phác thảo giao diện quản lý video ở Web
101
1 Nút upload video Button Chuyển sang màn hình đăng tải video
2 Nút chỉnh sửa Button Chuyển sang màn hình chỉnh sửa video
3 Nút xóa Textbox Hiển thị màn hình xác nhận xóa video
Bảng 3.38: Mô tả giao diện quản lý video ở Web
3.4.1.3.6. Giao diện chỉnh sửa thơng tin video
Hình 3.47: Phác thảo giao diện chỉnh sửa thông tin video ở Web
STT Tên thành phần Loại Mô tả thành phần
102
2 Mô tả TextBox Mô tả video
3 Nút Save Button Lưu chỉnh sửa
4 Nút Reset Button Reset các field đã nhập về lại mặc định
Bảng 3.39: Mô tả giao diện chỉnh sửa thông tin video ở Web
3.4.1.3.7. Giao diện xóa video
Hình 3.48: Phác thảo giao diện xóa video ở Web
STT Tên thành phần Loại Mô tả thành phần
1 Xác nhận xóa CheckBox Xác nhận chắc chắn xóa
2 Nút Cancel Button Huỷ thao tác xóa và trở về màn hình videos
103
3 Nút Delete Button Thực hiện thao tác video Bảng 3.40: Mơ tả giao diện xóa video ở Web
3.4.1.3.8. Giao diện đăng tải video
Khi đăng tải video trải qua 3 bước:
- Chọn hoặc kéo thả video từ máy tính - Đăng tải và xem kết quả xét bản quyền
3.4.1.3.9. Giao diện chọn video từ thiết bị
Hình 3.49: Phác thảo giao diện chọn video từ thiết bị ở Web
STT Tên thành phần Loại Mô tả thành phần
1 Drag video area Drag area
Kéo thả video từ máy tính. Sau khi kéo thả thành công sẽ chuyển qua bước 2.
104 2 Browse files Text Button
Nhấn để mở thư mục trong máy để chọn video. Sau khi chọn video thành công sẽ tự động chuyển sang bước 2.
3 Back to videos Button Trở về danh sách video của bản thân
Bảng 3.41: Mô tả giao diện chọn video từ thiết bị ở Web
3.4.1.3.10. Giao diện xem trạng thái bản quyền
Hình 3.50: Phác thảo giao diện xem trạng thái bản quyền ở Web
STT Tên thành phần Loại Mô tả thành phần
1 Close Button Thoát khỏi dialog Bảng 3.42: Mô tả giao diện của xem trạng thái bản quyền ở Web
105
3.4.1.3.11. Giao diện quản lý người dùng
Hình 3.51: Phác thảo giao diện quản lý người dùng ở Web
STT Tên thành phần Loại Mô tả thành phần
1 Ban Button Nhấn vào sẽ hiển thị màn hình xác nhận cấm người dùng
106
3.4.1.3.12. Giao diện cấm người dùng
Hình 3.52: Phác thảo giao diện cấm người dùng ở Web
STT Tên thành phần Loại Mô tả thành phần
1 Xác nhận cấm người
dùng Checkbox
Xác nhận chắc chắn muốn cấm người dùng
2 Ban User Button Thực hiện thao tác cấm người dùng
3 Cancel Button Huỷ thao tác cấm, quay trở về danh sách người dùng
107