6. Bố cục báo cáo
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
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.
- Nó dễ dàng để bạn tương tác các ứng dụng Spring Boot với các hệ sinh thái của Spring như Spring JDBC, Spring ORM, Spring Data, Spring Security etc.
- Nó đi theo cách tiếp cận “Nguyên tắc cấu hình mặc định” để giảm thiểu thời gian và nỗ lực cần thiết để phát triển ứng dụng.
- Nó cung cấp các Server nhúng (Embedded HTTP servers) như là Tomcat, Jetty …. để phát triển và test các ứng dụng web nhanh chóng và dễ dàng. - Nó cung cấp công cụ CLI (Command Line Interface) dể phát triển và test các ứng dụng Spring Boot(Java hoặc Groovy) từ các dòng lệnh (command prompt) rất dễ dàng và nhanh chóng.
- Nó cung cấp rất nhiều các plugin để phát triển và test các ứng dụng Spring Boot nhanh chóng sử dụng các công cụ Build như Maven và Gradle - Nó cung cấp nhiều plugin để làm việc với các cơ sở dữ liệu nhúng
(embedded database) và các cơ sở dữ liệu lưu trữ trên bộ nhớ (in-memory Databases) một cách dễ dàng.
123 5.2.3 REST API [12]
REST (REpresentational State Transfer) được đưa ra vào năm 2000, trong luận văn tiến sĩ của Roy Thomas Fielding (đồng sáng lập giao thức HTTP). Nó là một dạng chuyển đổi cấu trúc dữ liệu, là một phong cách kiến trúc cho việc thiết kế các ứng dụng có kết nối. Nó sử dụng HTTP đơn giản để tạo cho giao tiếp giữa các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL để xử lý dữ liệu.
API (Application Programming Interface) là giao diện lập trình ứng dụng giúp tạo ra các phương thức kết nối với các thư viện và ứng dụng khác nhau.
REST API là một ứng dụng chuyển đổi cấu trúc dữ liệu có các phương thức để kết nối với các thư viện và ứng dụng khác. REST API không được xem là một công nghệ, nó là một giải pháp để tạo ra các ứng dụng web services thay thế cho các kiểu khác như SOAP, WSDL (Web Service Definition Language),…
Các ưu điểm của Rest
- Giúp cho ứng dụng trở nên rõ ràng hơn.
- REST URL đại diện cho resource chứ không phải là hành động.
- Dữ liệu được trả về với nhiều định dạng khác nhau như: xml,
html, rss, json …
- Code đơn giản và ngắn gọn.
- REST chú trọng vào tài nguyên hệ thống.
5.2.4 Spring Security [13]
Spring Security là một dự án nổi bật trong hệ sinh thái Spring. Spring Security cung cấp các dịch vụ bảo mật toàn diện cho các ứng dụng doanh nghiệp có nền tảng Java EE.
Spring Security cung cấp 2 cơ chế cơ bản:
- Authentication (xác thực): là tiến trình thiết lập một principal. Principal có thể hiểu là một người, hoặc một thiết bị, hoặc một hệ thống nào đó có thể thực hiện một hành động trong ứng dụng của bạn. - Authorization (phân quyền) hay Access-control: là tiến trình quyết
định xem một principal có được phép thực hiện một hành động trong ứng dụng của bạn hay không. Trước khi diễn tiến tới Authorization, principal cần phải được thiết lập bởi Authentication.
5.2.5 Spring JPA [14]
JPA (Java Persistence API) là 1 giao diện lập trình ứng dụng Java, nó mô tả cách quản lý các mối quan hệ dữ liệu trong ứng dụng sử dụng Java Platform.
124
JPA cung cấp một mô hình POJO persistence cho phép ánh xạ các table/các
mối quan hệ giữa các table trong database sang các class/mối quan hệ giữa các object.
Kiến trúc JPA:
Hình 5.1: Kiến trúc JPA 5.3HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MYSQL [15]
MySQL là tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet. MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ. Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD,
NETBSD, Novell NetWare, SGI Irix, Solaris, SunOS,…
MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL).
MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngôn ngữ khác, nó làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl,…
MySQL có nhiều đặc điểm cuốn hút: