6. Bố cục báo cáo
4.1.4MÀN HÌNH TÌM KIẾM
4.1.4.1Thiết kế giao diện
Hình 4.7: Thiết kế giao diện tìm kiếm
- 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> (adsbygoogle = window.adsbygoogle || []).push({});
4 Chi tiết phim Thẻ <p>
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 (adsbygoogle = window.adsbygoogle || []).push({});
Choose plan Xử lý chính - Mô tả xử lý:
+ 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ý (adsbygoogle = window.adsbygoogle || []).push({});
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ú
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 (adsbygoogle = window.adsbygoogle || []).push({});
113
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> (adsbygoogle = window.adsbygoogle || []).push({});
4 Quyền Thẻ <p>
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 (adsbygoogle = window.adsbygoogle || []).push({});
118 CHƯƠNG 5: LẬP TRÌNH
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 so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM.
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascript có thể sử dụng.
React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.
Props và State:
- Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render. Props là bất biến.
- State: thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời render lại để cập nhật UI.
120 5.1.3 Redux-Saga [8]
Redux là một predictable state management tool cho các ứng dụng Javascript. Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của
Facebook. Do vậy Redux thường dùng kết hợp với React.
Redux-Saga là một thư viện redux middleware, giúp quản lý những side effect
trong ứng dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối đa tính năng Generators (function*) của ES6, nó cho phép ta viết async code nhìn giống như là synchronos.
Đối với logic của saga, ta cung cấp một hàm cho saga, chính hàm này là hàm
đứng ra xem xét các action trước khi vào store, nếu là action được gọi thì nó sẽ thực thi hàm sẽ được thực thi, hàm cung cấp cho saga chính là hàm hook. Điều đặc biệt của hàm hook này nó là một generator function, trong generator function này có yield và mỗi khi yield ta sẽ trả về một plain object. Object trả về đó được gọi “Effect object”. Effect object này đơn giản chỉ là một object