6. Bố cục báo cáo
4.3.1 MÀN HÌNH GIAO DIỆN ĐĂNG NHẬP ADMIN
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ú
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
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>
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
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 bình thường nhưng chứa thông tin đặc biệt dùng để chỉ dẫn middleware của Redux thực thi các hoạt động khác ví dụ như gọi một hàm async khác hay put một action tới store. Để tạo ra effect object đề cập ở trên thì ta gọi hàm từ thư viện của saga là redux-saga/effects.
5.1.4 JSON Web Token [9]
JSON Web Mã (JWT) là một chuẩn mở (RFC 7519) định nghĩa một cách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa các bên dưới dạng đối tượng JSON. Thông tin này có thể được xác minh và đáng tin cậy vì nó có chứa chữ ký số. JWTs có thể được ký bằng một thuật toán bí mật (với thuật toán HMAC) hoặc một public / private key sử dụng mã hoá RSA.
Ba thành phần của JWT:
- Header: bao gồm hai phần chính: loại token (mặc định là JWT - Thông tin này cho biết đây là một Token JWT) và thuật toán đã dùng để mã hóa (HMAC SHA256 - HS256 hoặc RSA).
- Payload: chứa các claims. Claims là một các biểu thức về một thực thể (chẳng hạn user) và một số metadata phụ trợ. Có 3 loại claims thường gặp trong Payload: reserved, public và private claims.
- Signature: Chữ ký Signature trong JWT là một chuỗi được mã hóa bởi
header, payload cùng với một chuỗi bí mật theo nguyên tắc sau:
HMACSHA256( base64UrlEncode(header) + "." +
121
header và payload nên Signature có thể dùng để kiểm tra tính toàn vẹn của dữ liệu khi truyền tải.
5.2 NGÔN NGỮ LẬP TRÌNH JAVA, SPRING FRAMEWORK, RESTFULL API CRUD, SPRING SECURITY VÀ SPRING JPA
5.2.1 Java [10]
Java là một ngôn ngữ lập lập trình, được phát triển bởi Sun Microsystem vào năm 1995, là ngôn ngữ kế thừa trực tiếp từ C/C++ và là một ngôn ngữ lập trình hướng đối tượng.
Java được sử dụng với các mục đích sau:
- Phát triển ứng dụng cho các thiết bị điện tử thông minh, các ứng dụng cho doanh nghiệp với quy mô lớn.
- Tạo các trang web có nội dung động (web applet), nâng cao chức năng của server.
- Phát triển nhiều loại ứng dụng khác nhau: Cơ sở dữ liệu, mạng, Internet, viễn thông, giải trí,...
Java có những đặc điểm cơ bản như sau:
- Đơn giản và quen thuộc: Vì Java kế thừa trực tiếp từ C/C++ nên nó có những đặc điểm của ngôn ngữ này, Java đơn giản vì mặc dù dựa trên cơ sở C++ nhưng Sun đã cẩn thận lược bỏ các tính năng khó nhất của của C++ để làm cho ngôn ngữ này dễ sử dụng hơn.
- Hướng đối tượng và quen thuộc.
- Mạnh mẽ (thể hiện ở cơ chế tự động thu gom rác - Garbage Collection) và an toàn.
- Kiến trúc trung lập, độc lập nền tảng và có tính khả chuyển (Portability). - Hiệu suất cao.
- Máy ảo (biên dịch và thông dịch). - Phân tán.
- Đa nhiệm: Ngôn ngữ Java cho phép xâ dựng trình ứng dụng, trong đó
nhiều quá trình có thể xảy ra đồng thời. Tính đa nhiệm cho phép các nhà lập trình có thể biên soạn phần mềm đáp ứng tốt hơn, tương tác tốt hơn và thực hiện theo thời gian thực.
5.2.2 Spring Framework [11]
Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng triệu lập trình viên. Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng lại code…
122 Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng
2MB; trong suốt: hoạt động một cách trong suốt với lập trình viên)
Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng người dùng rất lơn.
Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency Injection và Aspect Oriented Programming.
Những tính năng core (cốt lõi) của Spring có thể được sử dụng để phát triển Java Desktop, ứng dụng mobile, Java Web. Mục tiêu chính của Spring là giúp phát triển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO (Plain Old Java Object)
Các lợi ích của Spring Boot:
- Dễ dàng để phát triển các ứng dụng dựa trên Spring với Java hoặc Groovy - Giảm thiểu thời gian phát triển và tăng năng xuất
- Nó tránh việc phải viết nhiều mã nguyên mẫu (boilerplate Code), Annotations và các cấu hình XML.
