6. Bố cục báo cáo
4.1CÁC MÀN HÌNH GIAO DIỆN CỦA GUEST
4.1.1.1Thiết kế giao diện
- Mô tả màn hình
Bảng 4.1: Bảng mô tả màn hình đăng nhập
STT Tên đối tượng Kiểu
1 Tài khoản Thẻ <input> 2 Mật khẩu Thẻ <input>
3 Lưu đăng nhập Checkbox
4 Đăng Nhập Thẻ <Button>
5 Đăng ký Thẻ <a>
6 Quên mật khẩu Thẻ <a> Hình 4.1: Màn hình đăng
95 4.1.1.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.2: Thiết kế xử lý giao diện đăng nhập - Lập danh sách các xử lý
Bảng 4.2: Bảng mô tả danh sách của xử lý của login
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Lưu đăng nhập Khi click vào checkbox lưu đăng nhập Nhớ người
dùng đăng nhập 2 Đăng nhập bằng tài khoản và
mật khẩu
Khi Click Button "Đăng nhập" Xử lý chính
3 Chuyển sang quên mật khẩu Khi Click "Quên mật khẩu?" Xử lý chính 4 Chuyển sang đăng ký Khi Click "Đăng ký" Xử lý chính - Mô tả xử lý:
+ Đăng nhập: Tương tự phần 2.3.1.7 + Quên mật khẩu: tương tự mục 2.3.1.8 + Chuyển sang đăng ký: tương tự 2.3.1.6
96 4.1.2 MÀN HÌNH ĐĂNG KÝ TÀI KHOẢN
4.1.2.1Thiết kế giao diện
Hình 4.3: Thiết kế giao diện đăng ký - Mô tả màn hình
Bảng 4.3: Bảng mô tả màn hình đăng ký
STT Tên đối tượng Kiểu
1 Tên Thẻ <input>
2 Tài khoản Thẻ <input> 3 Mật khẩu Thẻ <input> 4 Chính sách bảo mật Checkbox 5 Đăng ký Thẻ <Button>
97 4.1.2.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.4: Xử lý giao diện đăng ký - Lập danh sách các xử lý
Bảng 4.4: Bảng mô tả danh sách xử lý của register
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Chính sách bảo mật Khi Click vào checkbox (adsbygoogle = window.adsbygoogle || []).push({});
2 Đăng ký Khi Click Button "Register" Xử lý chính
3 Đăng nhập Khi Click vào “Đăng nhập” Xử lý chính
- Mô tả xử lý:
+ Đăng ký: Tương tự phần 2.3.1.6
98 4.1.3 MÀN HÌNH TRANG CHỦ
4.1.3.1Thiết kế giao diện
Hình 4.5: Giao diện trang chủ - Mô tả màn hình
Bảng 4.5: Bảng mô tả màn hình trang chủ
STT Tên đối tượng Kiểu
1 Logo website Thẻ <img>
2 Trang chủ Thẻ <a>
3 Thể loại Thẻ <a>
4 Nâng cấp tài khoản Thẻ <a>
5 Tìm kiếm Thẻ <Button>
99
7 Phim mới của mùa Thẻ <h3>
8 Thẻ phim
Ảnh tiêu biểu : <img> Tên phim : <a> Năm sản xuất : <p> Sao đánh giá : <svg>
9 Phim mới Thẻ <h3>
10 Năm phát hành Thẻ <ul>
11 Phim lẻ Thẻ <ul>
12 Phim dài tập Thẻ <ul>
13 Phim hoạt hình Thẻ <ul>
4.1.3.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.6: Xử lý giao diện trang chủ - Lập danh sách các xử lý
100 Bảng 4.6: Bảng mô tả danh sách xử lý trang chủ
Mô tả xử lý: Tương tự mục 2.3.1.1
4.1.4 MÀN HÌNH TÌM KIẾM 4.1.4.1Thiết kế giao diện 4.1.4.1Thiết kế giao diện
Hình 4.7: Thiết kế giao diện tìm kiếm (adsbygoogle = window.adsbygoogle || []).push({});
- Mô tả màn hình
Bảng 4.7: Bảng mô tả màn hình tìm kiếm
STT Tên đối tượng Kiểu
1 Thể loại Thẻ <ul>
2 Chất lượng Thẻ <ul>
3 IMBd Slide bar
4 Năm phát hành Slide bar
5 Tìm kiếm Thẻ <Button>
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Chuyển hướng về trang chủ Nhấn vào Trang chủ hoặc logo
2 Chuyển sang thể loại Nhấn vào nút Thể loại 3 Chuyển sang nâng cấp tài khoản Nhấn vào nút Nâng cấp tài khoản
4 Tìm kiếm Nhấn vào nút kính lúp
5 Điều hướng sang đăng nhập Nhấn vào nút đăng nhập 6 Hiển thị Trailer video Khi nhấn vào ảnh tiêu biểu 7 Chuyển sang tab khác Khi nhấn vào các tab tương ứng
101 4.1.4.2 Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.8: Thiết kế xử lý tìm kiếm - Lập danh sách các xử lý
Bảng 4.8: Bảng mô danh sách của xử lý của tìm kiếm
- Mô tả xử lý:
+ Điều hướng sang trang chi tiết phim: Tương tự mục 2.3.1.5 + Hiển thị phim thuộc từ khóa tìm kiếm: Tương tự mục 2.3.1.2
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Chọn thể loại Khi nhấn vào thể loại Xử lý hiển thị 2 Chọn chất lượng Khi nhấn vào chất lượng Xử lý hiển thị
3 Chọn IMBd Khi nhấn vào IMBd Xử lý hiển thị
4 Chọn năm phát hành Khi nhấn vào năm phát hành Xử lý hiển thị 5 Tìm kiếm Khi ấn vào button tìm kiếm Xử lý chính
102 4.1.5 MÀN HÌNH CHI TIẾT PHIM
4.1.5.1Thiết kế giao diện
Hình 4.9: Thiết kế giao diện chi tiết phim - Mô tả màn hình
Bảng 4.9: Bảng mô tả màn hình chi tiết phim
STT Tên đối tượng Kiểu
1 Tên phim Thẻ <h3>
2 Thể loại Thẻ <h3>
3 Rating, chất lượng, độ tuổi Thẻ <ul>
4 Chi tiết phim Thẻ <p> (adsbygoogle = window.adsbygoogle || []).push({});
5 Xem phim Thẻ <video>
6 Danh sách tập Thẻ <table>,<tr>, <td> 4.1.5.2Thiết kế xử lý
103 - Đánh số các nút trên màn hình giao diện
Hình 4.10: Thiết kế xử lý chi tiết phim - Lập danh sách các xử lý
Bảng 4.10: Bảng mô tả danh sách xử lý của màn hình chi tiết phim
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Chuyển sang xem phim Khi người dùng click vào nút play Xử lý chính 2 Hiển thị thông tin tập phim Khi trang được load Xử lý chính - Mô tả xử lý
+ Chuyển sang xem phim: Tương tự mục 2.3.1.3 + Hiển thị thông tin chi tiết phim: Tương tự mục 2.3.1.5
104 4.2CÁC MÀN HÌNH GIAO DIỆN CỦA MEMBER
4.2.1 MÀN HÌNH XEM VÀ UPDATE VIP 4.2.1.1 Thiết kế giao diện 4.2.1.1 Thiết kế giao diện
- Mô tả màn hình
Hình 4.11: Giao diện Member - Mô tả màn hình
Bảng 4.11: Bảng mô tả màn hình Member
STT Tên đối tượng Kiểu
1 Avatar Thẻ <img>
2 Tên Thẻ <h3>
105 4 Bảng thông tin Thẻ <table>,<tr>, <td> 5 Bảng thay đổi mật khẩu Thẻ <table>,<tr>, <td>,
<input>
6 Logout Thẻ <Button>
7 Save Thẻ <Button>
8 Change Thẻ <Button>
9 Bảng thông tin các gói vip Thẻ <table>,<tr>, <td> 10 Choose plan Thẻ <Button> 4.2.1.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.12: Xử lý giao diện member - Lập danh sách các xử lý
106 Bảng 4.12: Bảng mô danh sách xử lý của màn hình Member
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Logout Khi trang User được load
2 Save Khi người dùng click vào button save Xử lý chính
3 Change Khi người dùng click vào button
change Xử lý chính 4 Choose plan Khi người dùng click vào button
Choose plan Xử lý chính - Mô tả xử lý: (adsbygoogle = window.adsbygoogle || []).push({});
+ Update vip member sẽ được xử lý tương tự mục 2.3.2.1 + Đăng xuất sẽ được xử lý tương tự mục 2.3.2.3
+ Thay đổi thông tin đăng nhập sẽ được xử lý tương tự mục 2.3.2.7 + Thay đổi mật khẩu sẽ được xử lý tương tự mục 2.3.2.8
107 4.3CÁC MÀN HÌNH GIAO DIỆN CỦA ADMIN
4.3.1 MÀN HÌNH GIAO DIỆN ĐĂNG NHẬP ADMIN 4.3.1.1Thiết kế giao diện 4.3.1.1Thiết kế giao diện
Hình 4.13: Giao diện đăng nhập Admin - Mô tả màn hình
Bảng 4.13: Bảng mô tả màn hình đăng nhập Admin
STT Tên đối tượng Kiểu
1 Email Thẻ <input>
2 Password Thẻ <input> 3 Login with Google Thẻ <Button> 4 Login with Facebook Thẻ <Button> 5 Forget password Thẻ <a href>
108 4.3.1.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.14: Xử lý giao diện đăng nhập - Lập danh sách các xử lý
Bảng 4.14: Bảng mô tả danh sách xử lý của màn hình đăng nhập
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Đăng nhập bằng Google Khi Click Button "Google"
2 Đăng nhập bằng Facebook Khi Click Button "Facebook" 3 Quên mật khẩu Khi click vào “Forget password” 4 Đăng nhập bằng email và
password
Khi Click Button "Log in"
109 4.3.2 MÀN HÌNH GIAO DIỆN QUẢN LÝ CHỦ ĐỀ PHIM
4.3.2.1Thiết kế giao diện
Hình 4.15: Giao diện quản lý chủ đề phim
- Mô tả màn hình
Bảng 4.15: Bảng mô tả màn hình quản lý chủ đề phim
STT Tên đối tượng Kiểu
1 Order by Menu dropdown
2 Search Thẻ <input>
3 Add New Thẻ <Button> 4 Hành động Thẻ <Button> 5 Danh sách thể loại Thẻ<table>,<tr>, <td>
110 4.3.2.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.16: Xử lý giao diện quản lý chủ đề phim - Lập danh sách các xử lý
Bảng 4.16: Bảng mô tả danh sách xử lý của màn hình quản lý chủ đề phim STT Tên xử lý Điều kiện gọi thực hiện Ghi chú (adsbygoogle = window.adsbygoogle || []).push({});
1 Sắp xếp Click button “Order by” 2 Tìm kiếm Click button kính lúp 3 Thêm mới Click button “Add New” 4 Sửa, xóa Click dropdown menu và chọn
hành động tương ứng - Mô tả xử lý:
+ Quản lý danh sách chủ đề: tương tự mục 2.3.4.2 + Thêm mới: tương tự mục 2.3.4.3
+ Xoá: tương tự mục 2.3.4.4 + Sửa: tương tự mục 2.3.4.5 + Tìm kiếm: tương tự mục 2.3.1.2
111 4.3.3 MÀN HÌNH GIAO DIỆN QUẢN LÝ PHIM
4.3.3.1Thiết kế giao diện
Hình 4.17: Giao diện quản lý phim
- Mô tả màn hình
Bảng 4.17: Bảng mô tả màn hình quản lý phim
STT Tên đối tượng Kiểu
1 Danh sách phim Thẻ <h3>
2 Order by Menu dropdown
3 Search Thẻ <input>
4 Add New Thẻ <Button>
5 Hành động Thẻ <Button>
6 Thẻ phim Thẻ <img>
4.3.3.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.18: Xử lý giao diện quản lý phim - Lập danh sách các xử lý
112 Bảng 4.18: Bảng mô tả danh sách xử lý của màn hình quản lý phim
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Sắp xếp Click button “Order by”
2 Tìm kiếm Click button kính lúp
3 Thêm mới Click button “Add New”
4 Sửa, xóa Click dropdown menu và
chọn hành động tương ứng - Mô tả xử lý: + Thêm: tương tự mục 2.3.4.6 + Sửa: tương tự mục 2.3.4.7 + Xoá: tương tự mục 2.3.4.8 + Tìm kiếm: tương tự mục 2.3.1.2
4.3.4 MÀN HÌNH GIAO DIỆN CHI TIẾT PHIM 4.3.4.1Thiết kế giao diện 4.3.4.1Thiết kế giao diện
Hình 4.19: Giao diện chi tiết phim
- Mô tả màn hình
113 (adsbygoogle = window.adsbygoogle || []).push({});
STT Tên đối tượng Kiểu
1 Tên phim và thông tin chi tiết Thẻ <h3>, <tab>
2 Sửa phim Thẻ <tab>
3 Review Thẻ <tab> 4 Poster Thẻ <img> 5 Nội dung Thẻ <p> 6 Điểm số Thẻ <p> 7 Năm phát hành Thẻ <p> 8 Thể loại Thẻ <badge> 9 Chất lượng Thẻ <p> 10 Ngôn ngữ Thẻ <p> 11 Bảng bình luận Thẻ <p>
12 Thời gian đăng và người đăng Thẻ <p>
13 Nội dung bình luận Thẻ <p>
14 Xóa bình luận Thẻ <button>
15 Change status Thẻ <button>
16 Quốc gia Thẻ <p>
17 Độ tuổi Thẻ <p>
18 Visible Thẻ <p>
4.3.4.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.20: Xử lý giao diện chi tiết phim - Lập danh sách các xử lý
114 Bảng 4.20: Bảng mô tả danh sách xử lý của chi tiết phim
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Chuyển qua tab sửa phim Click tab “Sửa phim”
2 Chuyển qua tab review Click tab “Review” Giao diện và xử lý tương tự như
bình luận 3 Xóa bình luận Click button “Xóa”
4 Change Status Click button “Change Status” - Mô tả xử lý:
+ Sửa phim: tương tự mục 2.3.4.7 +Xóa bình luận: 2.3.20
+ Review: có giao diện và xử lý hoàn toàn tương tự bình luận + Change status: tương tự mục 2.3.4.8
4.3.5 MÀN HÌNH GIAO DIỆN QUẢN LÝ NGƯỜI DÙNG 4.3.5.1 Thiết kế giao diện 4.3.5.1 Thiết kế giao diện
Hình 4.21: Giao diện quản lý người dùng
- Mô tả màn hình
Bảng 4.21: Bảng mô tả màn hình quản lý người dùng
STT Tên đối tượng Kiểu
1 Danh sách phim yêu thích Thẻ <h3>
2 Avatar Thẻ <img>
3 Username Thẻ <p>
4 Quyền Thẻ <p> (adsbygoogle = window.adsbygoogle || []).push({});
115 4.3.5.2Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.22: Xử lý giao diện quản lý người dùng - Lập danh sách các xử lý
Bảng 4.22: Bảng mô tả danh sách xử lý của quản lý người dùng
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Hiện danh sách phim yêu thích Click button “Favorite”
2 Check all hoặc hủy check all Click button ô trống hoặc ô có dấu stick
3 Check Click vào button checkbox
- Mô tả xử lý:
+ Quản lý danh sách: tương tự mục 2.3.4.9 + Hiện danh sách phim yêu thích: 2.3.4.21
116 4.3.6 MÀN HÌNH GIAO DIỆN QUẢN LÝ DIỄN VIÊN
4.3.6.1 Thiết kế giao diện
Hình 4.23: Giao diện quản lý diễn viên
- Mô tả màn hình
Bảng 4.23: Bảng mô tả màn hình quản lý người dùng
STT Tên đối tượng Kiểu
1 Danh sách diễn viên Thẻ <h3>
2 ADD NEW Thẻ <button>
3 Avatar Thẻ <img>
4 Tên diễn viên Thẻ <p>
5 Quốc gia Thẻ <p>
4.3.6.2 Thiết kế xử lý
- Đánh số các nút trên màn hình giao diện
Hình 4.24: Xử lý giao diện quản lý người dùng - Lập danh sách các xử lý
117 Bảng 4.24: Bảng mô tả danh sách xử lý của quản lý người dùng
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú 1 Thêm diễn viên Click button “Add new”
2 Check all hoặc hủy check all Click button ô trống hoặc ô có dấu stick
3 Check Click vào button checkbox
- Mô tả xử lý:
+ Quản lý danh sách: tương tự mục 2.3.4.15 + Thêm diễn viên: 2.3.4.18
118 CHƯƠNG 5: LẬP TRÌNH (adsbygoogle = window.adsbygoogle || []).push({});
5.1NGÔN NGỮ LẬP TRÌNH JAVASCRIPT, REACT.JS, REDUX-SAGA VÀ JSON WEB TOKEN (JWT)
5.1.1 JavaScript [6]
JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web (HTML, CSS, JS).
JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế. Sau đây chỉ là một số lợi ích của JavaScript:
- Không cần một compiler vì web browser có thể biên dịch nó bằng HTML - Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn
- Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới
- JS hoạt động trên nhiều trình duyệt, nền tảng, …
- Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database
- Nó giúp website tương tác tốt hơn với khách truy cập - Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác 5.1.2 React.js [7]
React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác.
Nếu như AngularJS là một Framework cho phép nhúng code javascript trong code html thông qua các attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn
React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử
119 dụng lại được. React được sử dụng tại Facebook trong production,
và www.instagram.com được viết hoàn toàn trên React.
Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React