Báo cáo thực tập Tìm hiểu Framework vuejs, Java spring boot và xây dựng website xem phim online

TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN - BÁO CÁO THỰC TẬP TỐT NGHIỆP TÌM HIỂU FRAMEWORK VUEJS, JAVA SPRING BOOT VÀ XÂY DỰNG WEBSITE XEM PHIM ONLINE NGÀNH: Công nghệ thông tin CHUYÊN NGÀNH: Công nghệ thông tin NGƯỜI HƯỚNG DẪN SINH VIÊN THỰC HIỆN: ThS Vũ Đình Long Bùi Văn Quang; MSSV1651120115 Lê Tuấn Khải; MSSV: 1651120096 TP HỒ CHÍ MINH – Năm 2020 TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN - Bùi Văn Quang & Lê Tuấn Khải TÌM HIỂU FRAMEWORK VUEJS, JAVA SPRING BOOT VÀ XÂY DỰNG WEBSITE XEM PHIM ONLINE NGÀNH: Công nghệ thông tin CHUYÊN NGÀNH: Công nghệ thông tin BÁO CÁO THỰC TẬP TỐT NGHIỆP NGƯỜI HƯỚNG DẪN ThS Vũ Đình Long TP HỒ CHÍ MINH – Năm 2020 LỜI CAM ĐOAN Tôi xin cam đoan đồ án tốt nghiệp “Xây dựng website xem phim trực tuyến” cơng trình nghiên cứu tơi bạn Lê Tuấn Khải Những phần sử dụng tài liệu tham khảo đồ án nêu rõ phần tài liệu tham khảo Các số liệu, kết trình bày đồ án hoàn toàn trung thực, sai tơi xin chịu hồn tồn trách nhiệm chịu kỷ luật môn nhà trường đề Hồ Chí Minh, tháng năm 2020 Sinh viên thực Bùi Văn Quang & Lê Tuấn Khải MỤC LỤC LỜI CAM ĐOAN .3 MỤC LỤC i DANH MỤC HÌNH ẢNH iv DANH MỤC BẢNG BIỂU vi DANH MỤC CÁC TỪ VIẾT TẮT vii CHƯƠNG GIỚI THIỆU 1.1 Lý chọn đề tài .1 1.2 Phạm vi đề tài 1.3 Phương pháp nghiên cứu 1.4 Bố cục luận văn CHƯƠNG CƠ SỞ LÝ THUYẾT .3 2.1 Ngôn ngữ lập trình Java 2.1.1 2.2 Java lịch sử phát triển Spring framework 2.2.1 Tổng quan Spring .5 2.2.2 Lịch sử phát triển 2.2.3 Một số khái niệm .6 2.2.4 Spring boot 12 2.2.5 Srping MVC .12 2.2.6 Spring Security 16 2.3 VueJS 19 2.3.1 Tổng quan VueJS 19 2.3.2 Các đặc trưng VueJS 21 2.3.3 Ưu điểm VueJS 22 2.4 MySQL 23 i 2.4.1 Tổng quan SQL 23 2.4.2 MySQL .24 2.4.3 Ưu điểm nhược điểm MySQL 27 2.5 Bootstrap Responsive .28 2.6 Đặc thù hệ thống 30 2.6.1 Tổng quan hệ thống 30 2.6.2 Cơ cấu hệ thống 31 2.7 Google Firebase .31 2.7.1 Khái niệm 31 2.7.2 Lịch sử phát triển 32 2.7.3 Các dịch vụ Firebase 32 2.7.4 Các tính 33 CHƯƠNG THIẾT KẾ VÀ CÀI ĐẶT CHƯƠNG TRÌNH 37 3.1 Thiết kế sở liệu 37 3.1.1 Bảng actor_has_movie 37 3.1.2 Bảng actors .37 3.1.3 Bảng comments 37 3.1.4 Bảng countries 38 3.1.5 Bảng directors 38 3.1.6 Bảng favorites 38 3.1.7 Bảng genre_has_movie 39 3.1.8 Bảng genres 39 3.1.9 Bảng images .39 3.1.10 Bảng movies .39 3.1.11 Bảng rates 40 3.1.12 Bảng users .40 3.1.13 Bảng user_role 41 3.2 RESTful API 41 ii 3.3 3.3.1 Class Diagram 45 3.3.2 Sequency diagram 46 3.3.3 Biểu đồ phân cấp chức 49 3.4 Sơ đồ usecase 43 Giao diện chức 49 3.4.1 Một số giao diện 49 3.4.2 Một số chức bật 56 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 59 4.1 Kết đạt 59 4.2 Hạn chế .59 4.3 Hướng phát triển 60 TÀI LIỆU THAM KHẢO .60 Website 60 iii DANH MỤC HÌNH ẢNH Hình 2.1 Luồng điều khiển chương trình bình thường Hình 2.2 Servlet Container Hình 2.3 : Kiểm thử đơn vị với JUnit 10 Hình 2.4 Mơ hình ứng dụng áp dụng IoC 11 Hình 2.5 Kiến trúc module Spring MVC 13 Hình 2.6 Sơ đồ luồng hoạt động Spring MVC 14 Hình 2.7 Luồng xử lý request spring MVC 16 Hình 2.8 Single Page Application 21 Hình 2.9 Mơ hình MVVM VueJS 21 Hình 2.10 One-way binding Two-way binding 22 Hình 2.11 Mơ hình hoạt động MySQL 27 Hình 2.12 Tổng quan hệ thống 30 Hình 2.13 Các dịch vụ Firebase 32 Hình 2.14 Realtime Database 33 Hình 2.15 Đồng hố thời gian thực 34 Hình 2.16 Authentication firebase 35 Hình 2.17 Firebase Cloud Messaging 36 Hình 3.1 RESTful API trang home 42 Hình 3.2 RESTful API Movie 42 Hình 3.4 RESTful API User Role 42 Hình 3.5 Sơ đồ usecase 44 Hình 3.6 Class diagram 45 Hình 3.7 Biểu đồ đăng nhập 46 Hình 3.8 Biểu đồ thêm người dùng 47 Hình 3.9 Biểu đồ cập nhật thơng tin người dùng 48 iv Hình 3.10 Biểu đồ phân cấp chức 49 Hình 3.11 Trang thể loại 50 Hình 3.12 Trang chủ 51 Hình 3.13 Trang xem phim 52 Hình 3.14 Trang thêm tài khoản người dùng 53 Hình 3.15 Trang quản lý người dùng 54 Hình 3.16 Trang quản lý phim 55 Hình 3.17 Trang login 56 Hình 3.18 Ứng dụng với ngôn ngữ tiếng Việt 57 Hình 3.19 Ứng dụng với ngơn ngữ tiếng Anh 58 v DANH MỤC BẢNG BIỂU Bảng 2.1 Phân loại người dùng hệ thống 31 Bảng 3.1 Bảng actor_has_movie 37 Bảng 3.3 Bảng comments 37 Bảng 3.4 Bảng countries 38 Bảng 3.5 Bảng directors 38 Bảng 3.6 Bảng favorites 38 Bảng 3.7 Bảng genre_has_movie 39 Bảng 3.8 Bảng genres 39 Bảng 3.9 Bảng images 39 Bảng 3.10 Bảng movies 40 Bảng 3.11 Bảng rates 40 Bảng 3.12 Bảng users 41 Bảng 3.13 Bảng user_role 41 Bảng 3.14 Danh sách actor 43 Bảng 3.15 Danh sách usecase 43 vi DANH MỤC CÁC TỪ VIẾT TẮT AJAX Asynchronous JavaScript and XML AOP Aspect – oriented programming API Application programming interface CSDL Cở sở liệu DAO Data Access Object DOM Document Object Model EJB Enterprise Java Bean HTML HyperText Markup Language IoC Inversion of Control JSM Java Message System vii 3.3.2 Sequency diagram System User Account Send request login Require username & password Type username & password Send username & password check username & password return result return notificaion Hình 3.6 Biểu đồ đăng nhập 46 List Users Admin Create User :Users Press button create user Open enter infomation & click create button Check validate [if false] notify error validate createUser() [if true] query into database [if true] confirm success and view list users after create [if false] confirm error Hình 3.7 Biểu đồ thêm người dùng 47 List Users Admin Create User :Users Press button edit user Open enter infomation & click save button Check validate [if false] notify error validate updateUser() [if true] query into database [if true] confirm success and view list users after create [if false] confirm error Hình 3.8 Biểu đồ cập nhật thông tin người dùng 48 3.3.3 Biểu đồ phân cấp chức Người quản trị Quản lý người dùng Quản lý phim Thêm người dùng Thêm phim Cập nhật người dùng Cập nhật phim Quản lý phân quyền Cập nhật quyền Quản lý thể loại Quản lý diễn viên Thêm thể loại Thêm diễn viên Cập nhật thể loại Cập nhật diễn viên Xoá thể loại Xoá diễn viên Thêm quyền Xố người dùng Xố phim Hình 3.9 Biểu đồ phân cấp chức 3.4 Giao diện chức 3.4.1 Một số giao diện 49 Hình 3.10 Trang thể loại 50 Hình 3.11 Trang chủ 51 Hình 3.12 Trang xem phim 52 Hình 3.13 Trang thêm tài khoản người dùng 53 Hình 3.14 Trang quản lý người dùng 54 Hình 3.15 Trang quản lý phim 55 Hình 3.16 Trang login 3.4.2 Một số chức bật Tính đa ngơn ngữ ứng dụng Ứng dụng hỗ trợ ngôn ngữ Tiếng Việt Tiếng Anh 56 Hình 3.17 Ứng dụng với ngơn ngữ tiếng Việt 57 Hình 3.18 Ứng dụng với ngơn ngữ tiếng Anh 58 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt Nghiên cứu trình bày cách có hệ thống nội dung Spring framework, VueJS,MySQL số công nghệ, kỹ thuật khác việc xây dựng ứng dụng Java enterprise web Về mặt lý thuyết: - Nắm kiến trúc tổng quan Spring Framework nguyên lý chế hoạt động framework - Nắm mô hình web MVC Spring framework chế để bảo mật ứng dụng web hỗ trợ module Spring Security Về mặt ứng dụng: - Xây dựng ứng dụng web dạng SPA mà việc giao tiếp với server thông qua RESTful service với hỗ trợ VueJS - Thiết kế giao diện người dùng với HTM5 Bootstrap có hỗ trợ responsive - Xây dựng thành công web xem phim trực tuyến với đầy đủ chức 4.2 Hạn chế Các chức ứng dụng hoàn thành tốt, nhiên yêu cầu phạm vi đề tài dừng lại mức demo công nghệ nên ứng dụng chưa hấp dẫn Hạn chế vật chất, khơng có host internet có cài đặt đầy đủ phần mềm cần thiết tạo khó khăn việc thực demo chương trình internet Vấn đề triển khai cơng nghệ nêu khơng khó 59 mặt kỹ thuật phải xây dựng sở hạ tầng đầy đủ tốt để thực thi ứng dụng 4.3 Hướng phát triển Tiếp tục tìm hiểu số chế xác thực phân quyền module Spring Security chế xác thực Oauth, Oauth2, OpenID,… để xây dựng ứng dụng với chế bảo mật Bên cạnh tiếp tục tìm hiểu module lại Spring Framework Spring AOP nhằm tích hợp vào hệ thống để thực số chức đặc biệt ghi log người dùng Tìm hiểu web socket kết hợp với VueJS để hướng đến việc xây dựng ứng dụng web động với thời gian thực TÀI LIỆU THAM KHẢO [1] Ben Alex, Luke Taylo Spring Security Reference Documentation [2] Ho Ngoc Tung.2014 Single Page Web Application with Restful API And AngularJS Helsinki Metropolia University of Applied Sciences [3] Praveen Gupta Spring Web MVC Framework for rapid open source J2EE application development a case study International Journal of Engineering Science and Technology, Vol.2(6), 2010, 1684-1689 [4] Rod Johnson, Juergen Hoeller, Keith Donald, Colin Sampaleanu, Rob Harrop, Thomas Risberg, Spring Framework Reference Documentation 4.1.4.RELEASE Website - https://vueschool.io/lessons/vue-router-nested-routes - https://www.baeldung.com/rest-with-spring-course - https://vuejs.org/v2/guide/ 60 ... Quang & Lê Tuấn Khải TÌM HIỂU FRAMEWORK VUEJS, JAVA SPRING BOOT VÀ XÂY DỰNG WEBSITE XEM PHIM ONLINE NGÀNH: Công nghệ thông tin CHUYÊN NGÀNH: Công nghệ thông tin BÁO CÁO THỰC TẬP TỐT NGHIỆP NGƯỜI... triển phần mềm Cụ thể Spring framework tập trung tìm hiểu trình bày module: Spring boot, Spring MVC Spring Security Sau tìm hiểu chúng tơi vận dụng kết tìm hiểu vào việc xây dựng ứng dụng nhằm mục... lập trình Java, Spring framework, VueJS, MySQL Bootstrap: Trong phần Spring framework giới thiệu sơ lược framework số khái niệm liên quan, trình bày module Spring Boot, Spring MVC Spring Security