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” là công trình nghiên cứu của tôi và bạn Lê Tuấn Khải. Những phần sử
dụng tài liệu tham khảo trong đồ án đã được nêu rõ trong phần tài liệu tham khảo.
Các số liệu, kết quả trình bày trong đồ án là hoàn toàn trung thực, nếu sai tôi xin
chịu hoàn toàn trách nhiệm và chịu mọi kỷ luật của bộ môn và nhà trường đề ra.

Hồ Chí Minh, tháng 5 năm 2020

Sinh viên thực hiện

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
1. CHƯƠNG 1. GIỚI THIỆU ...................................................................................... 1
1.1. Lý do chọn đề tài ...............................................................................................1
1.2. Phạm vi đề tài.....................................................................................................1
1.3. Phương pháp nghiên cứu ..................................................................................2
1.4. Bố cục luận văn .................................................................................................2
2. CHƯƠNG 2. CƠ SỞ LÝ THUYẾT .......................................................................3
2.1. Ngôn ngữ lập trình Java ....................................................................................3
2.1.1. Java và lịch sử phát triển............................................................................3
2.2. Spring framework..............................................................................................5
2.2.1. Tổng quan Spring.......................................................................................5
2.2.2. Lịch sử phát triển........................................................................................6
2.2.3. Một số khái niệm chính .............................................................................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 về VueJS ................................................................................19
2.3.2. Các đặc trưng của VueJS .........................................................................21
2.3.3. Ưu điểm của VueJS..................................................................................22
2.4. MySQL.............................................................................................................23

i
 2.4.1. Tổng quan về SQL...................................................................................23
2.4.2. MySQL .....................................................................................................24
2.4.3. Ưu điểm và nhược điểm của MySQL ...................................................27
2.5. Bootstrap và 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ụ của Firebase .........................................................................32
2.7.4. Các tính năng chính .................................................................................33
3. CHƯƠNG 3. THIẾT KẾ VÀ CÀI ĐẶT CHƯƠNG TRÌNH ............................37
3.1. Thiết kế cơ sở dữ 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. Sơ đồ usecase ...................................................................................................43
3.3.1. Class Diagram ..........................................................................................45
3.3.2. Sequency diagram ....................................................................................46
3.3.3. Biểu đồ phân cấp chức năng ...................................................................49
3.4. Giao diện và chức năng...................................................................................49
3.4.1. Một số giao diện chính ............................................................................49
3.4.2. Một số chức năng nổi bật ........................................................................56
4. CHƯƠNG 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ...................................59
4.1. Kết quả đạt được..............................................................................................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 của chương trình bình thường............................... 8
Hình 2.2 Servlet Container................................................................................ 9
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 của Spring MVC ......................................... 14
Hình 2.7 Luồng xử lý một request trong spring MVC ................................... 16
Hình 2.8 Single Page Application ................................................................... 21
Hình 2.9 Mô hình MVVM trong VueJS ......................................................... 21
Hình 2.10 One-way binding và 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ụ của Firebase ............................................................... 32
Hình 2.14 Realtime Database.......................................................................... 33
Hình 2.15 Đồng bộ hoá thời gian thực ............................................................ 34
Hình 2.16 Authentication bằng 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 đồ tuần tự đăng nhập ............................................................... 46
Hình 3.8 Biểu đồ tuần tự thêm người dùng..................................................... 47
Hình 3.9 Biểu đồ tuần tự 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 năng .......................................................... 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 các actor ....................................................................... 43
Bảng 3.15 Danh sách các 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ở dữ 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
 1. CHƯƠNG 1. GIỚI THIỆU
1.1. Lý do chọn đề tài
Ngày nay đời sống con người ngày một nâng cao, các nhu cầu vui chơi, giải
trí ngày càng phát triển cả về mặt số lượng và chất lượng.
Xem phim trực tuyến là một loại hình giải trí nhẹ nhàng ra đời và phát triển
mạnh mẽ từ khi có nền công nghiệp công nghệ thông tin. Thị trường phim là
một thị trường đa dạng và rất phong phú. Sản phẩm phim rất phong phú về mặt
thể loại, từ hành động, lãng mạng, kinh dị,… đều đã có mặt trên thị trường
nhằm phục vụ nhu cầu giải trí của con người. Thị trường phim ở từng quốc gia,
khu vực cũng tương đối khác nhau.
Vì vậy nhóm chúng tôi chọn làm website xem phim trực tuyến để phục vụ
nhu cầu xem phim giải trí của con người hiện nay.
1.2. Phạm vi đề tài

Luận văn sẽ tập trung trình bày kết quả nghiên cứu của chúng tôi về các
nội dung sau: Spring framework, VueJS framework, MySQL, Boostrap và
Maven. Mỗi phần chúng tôi sẽ giới thiệu sơ lược và trình bày những nội dung
cơ bản nhất, những điểm mạnh hay lợi ích mà nó mang lại cho các nhà phát
triển phần mềm.

Cụ thể về Spring framework chúng tôi sẽ tập trung tìm hiểu và trình bày 3
module: Spring boot, Spring MVC và Spring Security.

Sau khi tìm hiểu chúng tôi sẽ vận dụng kết quả tìm hiểu được vào việc xây
dựng một ứng dụng nhằm mục đích minh họa cho phần lý thuyết đã trình bày.
Chúng tôi sẽ xây dựng một web xem phim trực tuyến.

1
1.3. Phương pháp nghiên cứu

Tìm kiếm và nghiên cứu các tài liệu về Spring Framework và các công
nghệ có liên quan đến việc phát triển một ứng dụng web enterprise như VueJS,
MySQL, Maven của các tác giả trong và ngoài nước, các bài báo, thông tin
trên mạng,… sau đó chọn lọc và sắp xếp lại theo ý tưởng của mình.

Dựa trên kết quả tìm hiểu được để xây dựng một ứng dụng web xem phim
trực tuyến có áp dụng tất cả những nội dung đã nghiên cứu nhằm mục đích
minh họa cho phần cơ sở lý thuyết sẽ trình bày trong nội dung luận văn này.
Các công cụ hỗ trợ nghiên cứu
1. Microsoft Word:dùng để viết tài liệu báo cáo
2. Microsoft Project: dùng để phân công nhiệm vụ cập nhật tiến độ dự án
3. Visio: dùng để vẽ các biểu đồ
4. Visual Studio Code: dùng để code front end
5. IntelliJ: dùng để code back end
6. Web server for chorme: làm server ảo chứa hình ảnh của trang web
7. MySQL Workbench: dùng để lưu trữ cơ sở dữ liệu

1.4. Bố cục luận văn

Trong phần này chúng tôi sẽ trình bày ngắn gọn về nội dung chính của
từng phần trong luận văn nhằm giúp cho người đọc dễ dàng theo dõi.

Chương 1: Giới thiệu tổng quan về cơ quan thực tập; lý do và tính cấp thiết
để thực hiện đề tài này. Trong chương này còn trình bày về các vấn đề cụ thể
cần phải giải quyết và hướng giải quyết cho từng vấn đề; phạm vi cũng như
phương pháp nghiên cứu đề tài.

Chương 2: Trình bày về cơ sở lý thuyết được sử dụng trong đề tài bao gồm
các nội dung về ngôn ngữ lập trình Java, Spring framework, VueJS, MySQL
2
và Bootstrap:

Trong phần Spring framework chúng tôi sẽ giới thiệu sơ lược về

framework này và một số khái niệm liên quan, tiếp theo sẽ trình bày về 3
module là Spring Boot, Spring MVC và Spring Security.
- Phần VueJS sẽ trình bày tổng quan về framework này và những đ ặc
trưng nổi bật của nó.
- Phần tiếp theo trình bày về MySQL, các dạng của MySQL; giới thiệu về
MySQL và ưu điểm của hệ quản trị CSDL này.
- Phần cuối cùng sẽ giới thiệu về Bootstrap và tính năng responsive mà
Bootstrap hỗ trợ trong việc xây dựng giao diện người dùng cho ứng dụng
web.

Chương 3: Sau khi tìm hiểu về Spring, VueJS, MySQL và Bootstrap

chương này trình bày phần phân tích, thiết kế và cài đặt ứng dụng xem phim
trực tuyến sử dụng các công nghệ vừa nêu.

Chương 4: Những kết quả đạt được, thảo luận những vấn đề khó khăn và
đưa ra hướng phát triển trong tương lai.

2. CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1. Ngôn ngữ lập trình Java
2.1.1. Java và lịch sử phát triển

Java là một ngôn ngữ lập trình dạng lập trình hướng đối tượng (OOP).
Khác với phần lớn ngôn ngữ lập trình thông thường, thay vì biên dịch mã
nguồn thành mã máy hoặc thông dịch mã nguồn khi chạy, Java được thiết kế
để biên dịch mã nguồn thành bytecode, bytecode sau đó sẽ được môi trường
thực thi (runtime environment) chạy.

3
 Cú pháp Java được vay mượn nhiều từ C và C++ nhưng có cú pháp hướng
đối tượng đơn giản hơn và ít tính năng xử lý cấp thấp hơn. Do đó việc viết một
chương trình bằng Java dễ hơn, đơn giản hơn, đỡ tốn công sửa lỗi hơn.

Java được khởi đầu bởi James - Gosling và bạn đồng nghiệp ở Sun
Microsystems năm 1991. Ban đầu ngôn ngữ này được gọi là Oak (có nghĩa là
cây sồi) do bên ngoài cơ quan của ông Gosling có trồng nhiều loại cây này.

Java được phát hành vào năm 1994. Sau khi Oracle mua lại công ty Sun
Microsystems năm 2009 - 2010, Oracle đã mô tả họ là "người quản lý công
nghệ Java với cam kết không ngừng để bồi dưỡng một cộng đồng tham gia và
minh bạch".

Lịch sử phiên bản java:

1. JDK 1.0 (23 tháng 01, 1996)

2. JDK 1.1 (19 tháng 2, 1997)
3. J2SE 1.2 (Playground) 08 tháng 12, 1998
4. J2SE 1.3 (Kestrel) 08 tháng 5, 2000
5. J2SE 1.4.0 (Merlin) 06 tháng 02, 2002
6. J2SE 5 (1.5.0) (Tiger) 30 tháng 9, 2004
7. Java SE 6 (còn gọi là Mustang), được công bố 11 tháng 12 năm 2006.
8. Java SE 7 (còn gọi là Dolphin), được bắt đầu từ tháng 8 năm 2006
và công bố ngày 28 tháng 7 năm 2011.
9. JDK 8, 18 tháng 3 năm 2014
10. JDK 9, 21 tháng 9 năm 2017
11. JDK 10, 20 tháng 3 năm 2018

4
2.2. Spring framework
2.2.1. Tổng quan Spring

Spring framework, hay ngắn hơn là Spring, là một cấu trúc dùng để xây
dựng chương trình ứng dụng mã nguồn mở dành cho ngôn ngữ lập trình Java.
Phiên bản đầu tiên của nó do Rod Johnson viết và đã được ông xuất bản cùng
với quyển sách đầu tay Expert One-on-One JavaEE Design and Development
(Nhà xuất bản Wrox Press, Tháng 10 năm 2002).

Kiến trúc của Spring framework được ra mắt công chúng lần đầu tiên hồi
tháng 6 năm 2003 dưới Giấy phép Apache - phiên bản 2.0. Phiên bản 1.0 đánh
dấu mốc thành đạt đầu tiên được xuất bản vào tháng 3 năm 2004 và tiếp đó
vào tháng 9 năm 2004, tháng 3 năm 2005.

Tuy Spring framework không bắt buộc người ta phải tuân theo một mô
hình lập trình cụ thể nào, song nó lan truyền rộng rải trong cộng đồng những
người viết chương trình dùng Java, như một hình thức chủ yếu thay thế cho
mô hình Enterprise Java Bean. Theo thiết kế, bộ framework này giải phóng lập
trình viên dùng Java, cho phép họ nhiều quyền tự do hơn và đồng thời cung
cấp một giải pháp tiện lợi, đầy đủ dẫn chứng bằng tài liệu, dễ dàng sử dụng,
phù hợp với những thực hành thông dụng trong công nghệ phần mềm.

Bên cạnh những đặc trưng nền tảng của Spring framework là những cái có
thể dùng được trong bất cứ một chương trình ứng dụng Java nào, rất nhiều các
mở rộng và tiến bộ trong việc kiến tạo các trình ứng dụng dành cho nền tảng
mạng web (web-based application) dựa trên nền Java Enterprise cũng tồn tại
nữa. Spring framework nổi tiếng cũng một phần do chính đặc thù kể trên và
được giới thương mại công nhận như một nền tảng kiến trúc có tầm quan trọng
trong chiến lược kiến tạo phần mềm.

5
2.2.2. Lịch sử phát triển

Phần đầu tiên của Spring framework ban đầu nguyên được Rod Johnson
viết vào năm 2000. Vào năm 2001, những mô hình lập trình cho các trình ứng
dụng Web được đại đa số sử dụng đều do Java Servlet API và Enterprise Java
Bean cung cấp.

Năm 2003 thành lập dự án phát tại Sourceforge để phát triển Spring. Sau
khi phát triển trên nền tảng ban đầu hơn một năm họ đã phát hành phiên bản
đầu tiên (1.0) vào tháng 3 năm 2004.

Spring framework đã làm cho những kỹ thuật vốn không được biết đến
mấy trở nên những kỹ thuật được mọi người ưa chuộng trong một thời gian
ngắn ngủi. Một trong những kỹ thuật nổi tiếng hơn cả là kỹ thuật “đảo ngược
quyền điều khiển” (Inversion of Control, IoC).

Năm 2005 cho thấy mức độ hưởng ứng nâng cao hơn những năm trước,
nguyên do cũng vì những phiên bản mới được giới thiệu với những cột mốc
đáng kể và những tính năng mới được thêm vào. Diễn đàn Spring (Spring
Forum) ra đời cuối năm 2004 cũng góp phần không nhỏ trong việc nâng cao
tính phổ biến của bộ framework và từ đó đến nay đã sinh trưởng trở thành một
nguồn thông tin quan trọng, giúp đỡ cho người sử dụng.

Vào tháng 12 năm 2005, hội thảo đầu tiên về Spring Framework đã được
tổ chức tại Miami, Florida thu hút 300 nhà phát triển trong 3 ngày và tiếp theo
đó cuộc hội thảo ở Antwerp vào tháng 6 năm 2006, thu hút hơn 400 người.
2.2.3. Một số khái niệm chính

Hai trong những thành phần chủ chốt và là nền tảng tạo nên sức mạnh của
Spring chính là IoC và DI.

6
2.2.3.1.1. Inversion of Control (IoC)
IoC Container trong Spring được xây dựng dựa trên nguyên lý Inversion of
Control (đảo ngược điều khiển) đã xuất hiện khá lâu trong các mẫu hình thiết
kế (design pattern), và được phổ biến rộng rãi nhờ Robert C. Martin và Martin
Fowler. Để hiểu về Spring, trước tiên chúng ta cần hiểu khái niệm IoC là gì?
Muốn vậy, chúng ta cần trả lời câu hỏi: Control (điều khiển) trong chương
trình phần mềm là gì, và Inversion (sự đảo ngược) đối với điều khiển trong
ngữ cảnh này được hiểu như thế nào?

Khái niệm Control Flow (tạm dịch là luồng thực thi) được sử dụng cho
trình tự thực hiện các câu lệnh, chỉ thị hoặc lời gọi hàm trong một chương
trình, khi chương trình này thực thi.

Do chương trình ngày càng phức tạp, nên các lập trình viên áp dụng
phương pháp lập trình hướng đối tượng nhằm phân loại, chia tách các chức
năng và gom thành các đối tượng. Các lập trình viên còn tạo dựng các thư viện
tạo sẵn để có thể sử dụng lại. Luồng thực thi của chương trình, trong những
tình huống cần xem xét ở mức tổng thể, không còn quan tâm đến các bước
thực thi câu lệnh cụ thể nữa, mà chỉ xem xét đến quá trình gọi phương thức của
các đối tượng trong ứng dụng cũng như các đối tượng của thư viện dựng sẵn.

Các lập trình viên, khi xây dựng ứng dụng từ đầu, đã thực hiện hai nhiệm
vụ: trực tiếp điều khiển luồng thực thi của chương trình và xây dựng các chức
năng để đáp ứng nghiệp vụ của ứng dụng. Thực tế, có nhiều chương trình hoặc
bộ phận trong chương trình có luồng thực thi rất giống nhau, chẳng hạn phần
tương tác với HTTP trong các ứng dụng web, phần unit testing trong các ứng
dụng,… Việc trực tiếp tạo dựng và kiểm soát luồng thực thi của chương trình
lặp đi lặp lại khi xây dựng nhiều ứng dụng sẽ làm mất nhiều công sức, chi phí,

7
tạo ra sự nhàm chán và dễ phát sinh lỗi. Điều này tạo ra động lực cũng như môi
trường để nguyên lý đảo ngược điều khiển nảy nở và phát triển.

Hình 2.1 Luồng điều khiển của chương trình bình thường

Vậy sự “đảo ngược” (inversion) luồng điều khiển chương trình trong ngữ
cảnh này được hiểu như thế nào? Chúng ta hãy xem xét 2 ví dụ dưới đây.

Ví dụ 1: Ứng dụng web trong Java với JavaServlet

Khi lập trình ứng dụng web bằng JavaServlet cần thực hiện các bước lập trình
như sau:

8
Tạo lớp đối tượng kế thừa từ HttpServlet, override các phương thức doGet(),
doPost(),…
- Đăng ký trong file cấu hình Deployment Descriptor tương ứng Servlet này với
đường dẫn xác định.
đến? Ai chịu trách nhiệm chuyển đổi các thông điệp HTTP (HTTP Request
và HTTP Response) thành các đối tượng Java (HttpServletRequest và
HttpServletResponse) để truyền cho các hàm doGet(), doPost()? Đó chính
là Servlet Container.

Hình 2.2 Servlet Container

Ví dụ 2: Lập trình kiểm thử đơn vị (Unit testing) với Junit

Trong quá trình phát triển các thành phần chức năng của ứng dụng, chúng ta
thường áp dụng kiểm thử đơn vị để đảm bảo chức năng đó vẫn chạy đúng
trong suốt quá trình ứng dụng được mở rộng và phát triển thêm. Để tạo bộ unit
test, chúng ta chỉ cần tạo một lớp đối tượng, định nghĩa các phương thức khởi
tạo, phương thức kết thúc và các phương thức test. Sau đó, chúng ta chỉ việc
chạy bộ test để kiểm thử.

9
 Việc điều khiển trình tự thực thi các phương thức được giao cho thư viện
bên ngoài đảm nhiệm chẳng hạn như TestNG hoặc JUnit.

Hình 2.3 : Kiểm thử đơn vị với JUnit

Với hai ví dụ trên, chúng ta nhận thấy trong các ứng dụng đã có sự thay
đổi vai trò. Ứng dụng không còn ôm đồm vừa trực tiếp tạo dựng và kiểm soát
luồng thực thi, vừa xây dựng chức năng nghiệp vụ. Việc kiểm soát luồng thực
thi được tách khỏi chức năng nghiệp vụ và bị đẩy ra bên ngoài. Người lập trình
đã ủy thác việc kiểm soát luồng thực thi ứng dụng cho một thành phần (thường
là thư viện dựng sẵn) bên ngoài đảm nhiệm, chỉ còn tập trung vào chức năng
chính của ứng dụng.

10
 Hình 2.4 Mô hình ứng dụng áp dụng IoC

Như vậy, khái niệm “đảo ngược” ở đây chính là chuyển nhiệm vụ kiểm
soát lưu trình thực thi từ ứng dụng cho một thành phần chuyên trách (thường
là một thư viện phần mềm khung – framework – dựng sẵn ở bên ngoài). Ứng
dụng chính chúng ta quan tâm phát triển không kiểm soát việc điều khiển luồng
thực thi nữa, mà chỉ tập trung vào việc định nghĩa chức năng. Thư viện phần
mềm khung chuyên trách kiểm soát điều khiển sẽ dựa trên mô tả trong cấu
hình của ứng dụng để thay mặt ứng dụng điều phối luồng thực thi trong
chương trình.

Dễ dàng nhận thấy thư viện phần mềm khung này khác với các thư viện
thông thường ở chỗ: thư viện thông thường cung cấp các chức năng và chờ
được ứng dụng gọi đến, còn thư viện phần mềm khung tạo dựng luồng thực
thi và gọi đến các chức năng của ứng dụng.

Nói một cách ngắn gọn IoC là một design pattern và tập hợp các kỹ thuật
lập trình liên quan, trong đó luồng thực thi của một hệ thống bị đảo ngược so
với cách tương tác truyền thống [3, tr1]. IoC trong Spring cũng hoàn toàn
mang ý nghĩa như trên. Trong Spring các đối tượng chính để xây dựng ứng
dụng thì được quản lý bởi Spring IoC container. Và IoC container gọi các đối
tượng đó là các bean. Một bean chỉ đơn giản là một đối tượng được khởi tạo

11
và quản lý bởi Spring IoC container.

2.2.3.2. Dependency Injection (DI)

Dependency Injection là khả năng liên kết giữa các thành phần lại với
nhau, đó chính là việc các thuộc tính trong một đối tượng được “tiêm chích”
(injection) để tham chiếu lần lượt đến các đối tượng khác. Dependency
Injection trong Spring hoạt động dựa trên Java Reflection.
2.2.4. Spring boot
2.2.4.1. Khái niệm

Spring Boot là một dự án phát triển bởi JAVA (ngôn ngữ java) trong hệ
sinh thái Spring framework. Nó giúp cho các lập trình viên chúng ta đơn giản
hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát
triển business cho ứng dụng.
2.2.4.2. Ưu điểm của Spring boot
1. Có các tính năng của Spring Framework.

2. Tạo ứng dụng độc lập, có thể chạy bằng java -jar (cho cả java web)
3. Nhúng trực tiếp các ứng dụng server (Tomcat, Jetty…) do đó không cần
phải triển khai file WAR
4. Cấu hình ít, tự động cậu hình bất kì khi nào có thể (Giảm thời gian viết
code, tăng năng suất)
5. Không yêu cầu XML config…
6. Cung cấp nhiều plugin
7. Chuẩn cho Microservices (Cloud support; giảm việc setup, config; các
thư viện hỗ trợ…)
2.2.5. Srping MVC
2.2.5.1. Tổng quan về spring MVC

Spring MVC là một module con trong Spring framework, cung cấp kiến

12
trúc Model-View-Controller và các components sẵn có để sử dụng và phát
triển ứng dụng web một cách linh hoạt.

Hình 2.5 Kiến trúc module Spring MVC

Mô hình MVC là kết quả của việc tách các khía cạnh khác nhau của ứng
dụng (logic đầu vào, các xử lý logic, UI) trong khi đó cung cấp một sự kết hợp
giữa các thành phần đó một cách “lỏng lẻo”.

Model: đóng gói dữ liệu ứng dụng và bao gồm các POJO.

View: Chịu trách nhiệm nhận giá trị của model và vẽ ra trang HTML mà
trình duyệt có thể hiển thị được.

13
 Controller: Chịu trách nhiệm nhận và xử lý các yêu cầu từ người dùng và
tạo các model phù hợp và trả về cho view.

Spring MVC được thiết kế xung quanh DispatcherServlet để xử lý tất cả các

HTTP request và HTTP response. Luồng xử lý các yêu cầu của
DispatcherServlet được minh họa theo hình 2.6:

Hình 2.6 Sơ đồ luồng hoạt động của Spring MVC

Đây là chuỗi sự kiện tương ứng khi nhận một yêu cầu HTTP gửi đến
DispatcherServlet:

1. Sau khi nhận một HTTP request, DispatcherServlet gửi yêu cầu đến
HandlerMapping (một bản đồ cấu hình URL) để xác định controller nào
sẽ xử lý yêu cầu này.
2. Controller sẽ nhận các request và gọi các phương thức dịch vụ
(service methods) phù hợp dựa trên việc sử dụng các method
GET/POST… Nếu yêu cầu đó cần truy xuất cơ sở dữ liệu thì Controller
sẽ ủy nhiệm cho một business logic hay nhiều hơn một model để lấy

14
 thông tin và gửi dữ liệu về cho Controller. Lúc này Controller đóng gói
mô hình dữ liệu và tên của một view sẽ được tải lên thành đối tượng
ModelAndView và gửi trả về cho DispathcherServlet
3. DispatcherServlet gửi gói ModelAndView cho ViewResolver để tìm
xem view (thông thường là một trang JSP, HTML) nào sẽ được load
lên.
4. Sau khi hoàn tất, DispatcherServlet sẽ chuyển dữ liệu từ model đến
view và cuối cùng hiển thị trên trình duyệt.
2.2.5.2. DispathcherServlet

DispathcherServlet là thành phần tiếp nhận tất cả các request từ browser,

điều khiển luồng xử lý và trung chuyển giữa các thành phần (components)
trong MVC. Hơn thế nữa, nó còn tích hợp các Spring IoC container, cho phép
ta sử dụng đến tất cả các tính năng của Spring [4, tr439].
Hình 2.7 sẽ cho chúng ta thấy luồng xử lý một request trong Spring MVC
và DispatcherServlet chính là Front controller.

15
 Hình 2.7 Luồng xử lý một request trong spring MVC

DispatcherServlet thực sự là một Servlet (nó thừa kế từ lớp cơ sở

HttpServlet), và được khai báo trong tập tin web.xml của ứng dụng web. Các
requests muốn DispatcherServlet xử lý sẽ phải được ánh xạ bằng cách sử
dụng một bộ ánh xạ URL trong cùng một tập tin web.xml.
2.2.6. Spring Security
2.2.6.1. Tổng quan về Spring Security

Spring Security cung cấp một giải pháp bảo mật toàn diện cho các ứng
dụng enterprise dựa trên J2EE, Spring Security cố gắng để cung cấp cho chúng
ta một hệ thống bảo mật hữu ích và dễ dàng để cấu hình cho các dự án được
phát triển dựa trên Spring framework [1, tr2].

Vào năm 2003, Spring Security ban đầu chỉ là một dự án nhỏ và độc lập với
Spring với tên gọi là “The Acegi Security System for Spring”. Đến tháng
3/2004 một dự án chính thức được thành lập để phát triển nó. Khoảng một

16
năm sau khi dự án được giới thiệu Acegi Security chính thức trở thành một dự
án con (subproject) của Spring Framework. Phiên bản 1.0.0 được giới thiệu
vào tháng 5/2006 sau hơn hai năm rưỡi phát triển với hàng trăm cải tiến đáng
kể. Cuối năm 2007 Acegi Security chính thức trở thành một project của Spring
và được đổi tên thành Spring Security.
Hai nhiệm vụ chính của việc bảo mật ứng dụng là "xác thực"
(authentication) và "ủy quyền" (authorization) hay "kiểm soát truy cập"
(access-control) [1, tr2], đây cũng chính là hai phần chính của Spring Security.

Xác thực là quá trình xác nhận và chứng thực một principal (một principal
thường có nghĩa là một người sử dụng, thiết bị hoặc một số hệ thống khác mà
có thể thực hiện một hành động trong ứng dụng) [1, tr2].

Uỷ quyền đề cập đến quá trình quyết định có một principal được phép thực
hiện những hành động gì trong phạm vi ứng dụng của chúng ta [1, tr2]. Để
được ủy quyền thì quá trình xác thực là cần thiết và phải được thực hiện trước,
ủy quyền chỉ được thực hiện khi xác thực thành công [1, tr2]. Đây là những
khái niệm rất phổ biến cho hầu hết các ứng dụng và nó không phải là riêng
của Spring Security.

Ở một mức độ xác thực, Spring Security hỗ trợ một loạt các mô hình xác
thực. Hầu hết các mô hình xác thực này hoặc được cung cấp bởi bên thứ ba,
hoặc được phát triển bởi các cơ quan như IETF (Internet Engineering Task
Force) [1, tr2]. Ngoài ra, Spring Security còn cung cấp các mô hình xác thực
riêng cho mình. Cụ thể, Spring Security hiện đang hỗ trợ tích hợp xác thực
với tất cả các công nghệ này:

- HTTP BASIC authentication headers (an IEFT RFC-based standard)

- HTTP Digest authentication headers (an IEFT RFC-based standard)
- HTTP X.509 client certificate exchange (an IEFT RFC-based standard)

17
- LDAP (một phương pháp xác thực cross-platform phổ biến thường
được sử dụng trong các môi trường lớn)
- Form-based authentication
- OpenID authentication
- Authentication based on pre-established request headers (such as
Computer Associates Siteminder)
- JA-SIG Central Authentication Service (hay còn gọi là CAS, một mã
nguồn mở single sign)
- Transparent authentication context propagation for Remote Method
Invocation (RMI) and HttpInvoker (a Spring remoting protocol)
- Automatic "remember-me" authentication
- Anonymous authentication
- Run-as authentication
- Java Authentication and Authorization Service (JAAS)
- JEE container autentication
- Kerberos
- Java Open Source Single Sign On (JOSSO)
- OpenNMS Network Management Platform
- AppFuse
- AndroMDA
- Mule ESB
- Direct Web Request (DWR)
- Grails
- Tapestry
- Jtrac
- Jasypt
- Roller

18
 - Elastic Path
- Atlassian Crowd

Nhiều công ty phần mềm áp dụng Spring Security vì nó cung cấp những
mô hình xác thực một cách linh hoạt [1, tr3]. Làm như vậy cho phép các công
ty phần mềm nhanh chóng tích hợp các giải pháp của họ với bất cứ khách hàng
nào, mà không thực hiện rất nhiều kỹ thuật hoặc yêu cầu khách hàng phải thay
đổi môi trường. Nếu không có cơ chế xác thực phù hợp với nhu cầu của khách
hàng, Spring Security là một nền tảng mở và nó thực sự đơn giản để viết cơ
chế xác thực của riêng chúng ta [1, tr3].

Đôi khi chỉ xác thực là không đủ, chúng ta cũng cần phải quan tâm đến
việc nó tích hợp vào ứng dụng như thế nào. Ví dụ, chúng ta có thể muốn đảm
bảo rằng tất cả các request chỉ đến qua HTTPS, để bảo vệ mật khẩu khỏi bị
nghe trộm hay từ các cuộc tấn công man-in-the-middle. Điều này đặc biệt hữu
ích để bảo vệ quá trình phát hiện mật khẩu từ các cuộc tấn công brute force,
hoặc chỉ đơn giản là để làm cho nó khó khăn hơn cho người dùng để sao chép
nội dung quan trọng của ứng dụng. Để giúp chúng ta đạt được những mục tiêu
này, Spring Security hỗ trợ "channel security", cùng với JCaptcha để giải
quyết những yêu cầu trên.
2.3. VueJS
2.3.1. Tổng quan về VueJS

Công nghệ HTML hỗ trợ tốt cho các trang web tĩnh, kiểu như trước năm
2000 vậy. Khi chúng ta xây dựng 1 trang web với PHP, Node/Express, hay
Ruby thì nó cũng chỉ là một trang web tĩnh với nội dung được thay đổi khi
chúng ta gửi request về máy chủ, máy chủ sẽ render 1 trang với nội dung tương
ứng. Tuy nhiên mọi thứ đã thay đổi nhiều từ sự phát triển của HTML5, nhất là
khi có sự hổ trợ từ những tập đoàn công nghệ lớn như Google, Yahoo,

19
Facebook, và sự tập hợp đông đảo của cộng đồng mã nguồn mở.

Ngoài ra sự thành công của jQuery đã khiến JavaScript được nhiều người
yêu thích vì tính đơn giản và dễ sử dụng. Việc phát triển một website sử dụng
AJAX thì không khó, chúng ta có thể dùng jQuery để làm việc này với $.ajax
tuy nhiên làm thế nào để xây dựng một phần mềm có thể mở rộng, dễ test,
nâng cấp và bảo trì thì không hề đơn giản vì bản thân JavaScript không được
thiết kế ngay từ đầu để làm những việc này. Do đó sự ra đời của những
framework hỗ trợ lập trình viên xây dựng ứng dụng web 1 cách có hệ thống
đã ra đời như ReactJS, , AngularJS,và VueJS

Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive
– tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác
với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo
hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước.
Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện
lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự
án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC
(single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ
dàng nhu cầu xây dựng những ứng dụng một trang (SPA - Single-Page
Applications) với độ phức tạp cao hơn nhiều

Ngày nay các ứng dụng web hiện đại thường được xây dựng như một
Single Page Application (SPA) và VueJS là một framework tuyệt vời để xây
dựng 1 SPA.

Một Single Page Application là một ứng dụng web hiển thị vừa vặn trên
một mặt của trang với mục đích giúp người dùng có trải nghiệm giống như
đang dùng ứng dụng trên desktop và làm tăng hiệu suất của ứng dụng [2, tr7].
Hay nói một cách khác là ứng dụng chạy bên trong trình duyệt mà không yêu

20
cầu phải tải lại toàn bộ trang web mỗi lần sử dụng.

Hình 2.8 Single Page Application

2.3.2. Các đặc trưng của VueJS

Dưới đây là những đặc trưng nổi bật của AngularJS: kiến trúc MVVM,
Two-way binding, Routing, , Form validation, Testing

Hình 2.9 Mô hình MVVM trong VueJS

2.3.2.1. Two-way binding

21
 Để hiểu rõ hơn về two-way binding ta sẽ xem xét one-way binding trước.
Khi làm việc với các mô hình MVC framework khác chúng ta sẽ rơi vào
trường hợp model và view chỉ được ghép với nhau một lần duy nhất, vì vậy
mọi sự cập nhật dữ liệu từ một trong hai lớp đó đều không liên quan gì đến
lớp còn lại. Hệ quả là developer phải viết thêm phần “đồng bộ hóa” giữa hai
lớp này. Đó chính là one-way binding.
Tuy nhiên VueJS có thể thực hiện được cả hai chiều, đó chính là two-way
binding. Hay nói một cách khác two-way binding trong AngularJS là tính năng
đồng bộ hóa giữa model và view. Quá trình đồng bộ luôn xảy ra giữa model
và view. Mọi sự thay đổi dữ liệu trong lớp này, ngay lập tức được cập nhật
vào lớp kia [7, 11]. Chúng ta chỉ cần “bind” một lần, và mọi thứ hoạt động
trơn tru. Hình 2-19 sẽ cho thấy rõ hơn về one-way binding và two-way
binding.

Hình 2.10 One-way binding và Two-way binding

2.3.3. Ưu điểm của VueJS

1. Kích thước nhỏ gọn: Tỷ lệ thành công của JavaScript framework sẽ phụ thuộc
vào kích thước của nó. Kích thước càng nhỏ thì công năng sử dụng càng nhiều.
Kích thước của vue.js framework là 18–21KB, người dùng sẽ không mất thời gian
để tải xuống và sử dụng. Tuy nhiên, điều này không có nghĩa là tốc độ chạy của

22
 vue.js thấp do kích thước nhỏ. Thay vào đó, vue.js đánh bại tất cả các khung công
tác cồng kềnh như React.js, Angular.js và Ember.js.
2. Dễ dàng tìm hiểu và phát triển ứng dụng: Một trong những lý do framework
này phổ biến là nó tương đối dễ hiểu. Nhờ cấu trúc đơn giản của vue.js, người dùng
có thể dễ dàng thêm phần mềm vào dự án website đang thực hiện của mình. Cả
hai mô hình quy mô nhỏ cũng như quy mô lớn đều có thể được phát triển thông
qua framework này, do đó tiết kiệm rất nhiều thời gian. Trong trường hợp xảy ra
bất kỳ vấn đề nào, người dùng cũng có thể dễ dàng tìm ra các khu vực lỗi. Tất cả
là nhờ cấu trúc đơn giản của vue.js.
3. Tích hợp đơn giản: Vue.js cũng là phần mềm được các web developer sử dụng
khá phổ biến nhờ dễ dàng trong quá trình tích hợp với các ứng dụng hiện có. Sự
tiện lợi này xuất phát từ vue.js được xây dựng dựa trên JavaScript framework và
do đó, có thể tích hợp được vào các ứng dụng khác xây dựng trên JavaScript tương
đối đơn giản. Như vậy, vue.js sẽ rất hữu ích cho các công việc như phát triển các
ứng dụng web mới và thay đổi các ứng dụng đã có từ trước đó. Có được khả năng
tích hợp này là nhờ Vue.js có tất cả các yếu tố sẵn sàng.

2.4. MySQL
2.4.1. Tổng quan về SQL
SQL là viết tắt của Structured Query Language là ngôn ngữ truy vấn có
cấu trúc. Nó là một ngôn ngữ, là tập hợp các lệnh để tương tác với cơ sở dữ
liệu. Dùng để lưu trữ, thao tác và truy xuất dữ liệu được lưu trữ trong một cơ
sở dữ liệu quan hệ. Trong thực tế, SQL là ngôn ngữ chuẩn được sử dụng hầu
hết cho hệ cơ sở dữ liệu quan hệ. Tất cả các hệ thống quản lý cơ sở dữ liệu quan
hệ (RDMS) như MySQL, MS Access, Oracle, Postgres và SQL Server… đều
sử dụng SQL làm ngôn ngữ cơ sở dữ liệu chuẩn.
SQL bắt đầu từ những năm 1970, khi các kỹ sư của IBM là Donald
Chamberlin và Raymond Boyce thiết kế phiên bản đầu tiên để tương tác và

23
lấy dữ liệu được lưu trữ trong hệ thống cơ sở dữ liệu của công ty. Họ gọi nó là
SEQUEL, mặc dù sau đó họ buộc phải thay đổi nó do các vấn đề bản quyền.
SQL được sử dụng phổ biến vì nó có các ưu điểm sau:

 Cho phép truy cập dữ liệu trong các hệ thống quản lý cơ sở dữ liệu
quan hệ.
 Cho phép mô tả dữ liệu.
 Cho phép xác định dữ liệu trong cơ sở dữ liệu và thao tác dữ liệu đó.
 Cho phép nhúng trong các ngôn ngữ khác sử dụng mô-đun SQL, thư
viện và trình biên dịch trước.
 Cho phép tạo và thả các cơ sở dữ liệu và bảng.
 Cho phép tạo chế độ view, thủ tục lưu trữ, chức năng trong cơ sở dữ
liệu.
 Cho phép thiết lập quyền trên các bảng, thủ tục và view.

Hầu như công ty nào lớn cũng cần xây dựng một hệ thống để lưu trữ cơ sở
dữ liệu. Mọi thứ trong cơ sở dữ liệu này sẽ được diễn tả ra thành nhiều bảng,
có mối quan hệ với nhau. Để truy vấn và lấy dữ liệu từ các bảng này nhằm
tổng hợp thành thông tin nào đó, người ta dùng đến SQL thông qua các câu
query.
2.4.2. MySQL
MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational
Database Management System, viết tắt là RDBMS) hoạt động theo mô hình
client-server. RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý
các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng.

MySQL là một trong số các phần mềm RDBMS. RDBMS và MySQL

thường được cho là một vì độ phổ biến quá lớn của MySQL. Các ứng dụng

24
web lớn nhất như Facebook, Twitter, YouTube, Google, và Yahoo! đều dùng
MySQL cho mục đích lưu trữ dữ liệu. Kể cả khi ban đầu nó chỉ được dùng rất
hạn chế nhưng giờ nó đã tương thích với nhiều hạ tầng máy tính quan trọng
như Linux, macOS, Microsoft Windows, và Ubuntu.

Giải thích các thuật ngữ sử dụng ở trên.

Database
Database là tập hợp dữ liệu theo cùng một cấu trúc. Hãy thử nghĩ về việc
chụp hình tự sướng: bạn nhấn nút chụp ảnh về chính bản thân bạn. Hình ảnh là
dữ liệu, thư viện lưu ảnh là cơ sở dữ liệu. Cơ sở dữ liệu, hay database, là nơi
chứa và sắp đặt dữ liệu. Dữ liệu được đặt trong một bộ dữ liệu chung, dataset,
được tổ chức sắp xếp giống như một bảng tính vậy. Mỗi “bảng” này có liên hệ
với nhau theo cách nào đó. Vì vậy từ Relational (liên hệ) trong RDBMS có ý
nghĩa như vậy. Nếu phần mềm không hỗ trợ mô hình dữ liệu quan hệ với nhau
như vậy thì gọi là DBMS.

Open source
Open source dịch là mã nguồn mở, có nghĩa là ai cũng có thể dùng và chỉnh
sửa nó. Bất kỳ ai cũng có thể cài đặt phần mềmn ày. Bạn cũng có thể học cách
tùy chỉnh phần mềm theo nhu cầu của bạn. Tuy nhiên, giấy phép GPL (GNU
Public License) quyết định bạn có thể làm gì tùy vào điều kiện nhất định. Phiên
bản thương mại cũng được xuất bản nếu bạn cần thêm chủ quyền linh hoạt và
hỗ trợ cao cấp.

Mô hình Client-server
Máy tính cài đặt và chạy phần mềm RDBMS được gọi là client (máy
khách). Mỗi khi chúng cần truy cập dữ liệu, chúng kết nối tới máy chủ (server)
RDBMS. Cách thức này chính là mô hình “client-server”.

25
MySQL Server
MySQL Server là máy tính hay một hệ các máy tính cài đặt phần mềm
MySQL dành cho server để giúp bạn lưu trữ dữ liệu trên đó, để máy khách có
thể truy cập vào quản lý. Dữ liệu này được đặt trong các bảng, và các bảng có
mối liên hệ với nhau. MySQL server nhanh, an toàn, đáng tin cậy. Phần mềm
MySQL cũng miễn phí và được phát triển, phân phối và hỗ trợ bởi Oracle
Corporation.

MySQL Client
MySQL client không hẵn phải cài phần mềm MySQL của Oracle mà là nói
chung của mọi phần mềm có thể thực hiện truy vấn lên một MySQL server và
nhận kết quả trả về. MySQL client điển hình là đoạn mã PHP script trên một
máy tính hay trên cùng server dùng để kết nối tới cơ sở dữ liệu MySQL
database. Phpmyadmin cũng là một MySQL client có giao diện người dùng.
Một số công cụ miễn phí dùng làm MySQL là:

 MySQL Workbench (Mac, Windows, Linux), Miễn phí, mã nguồn mở

 Sequel Pro (Mac), miễn phí, mã nguồn mở
 HeidiSQL (Windows; chạy trên Mac hoặc Linux bằng WINE emulator),
miễn phí
 phpMyAdmin (web app), miễn phí, mã nguồn mở

26
 Hình 2.11 Mô hình hoạt động MySQL

Hình 2.11 giải thích cấu trúc cơ bản về việc giao tiếp giữa client-server model.
Một máy client sẽ liên lạc với máy server trong một mạng nhất định. Mỗi client
có thể gửi một request từ giao diện người dùng (Graphical user interface – GUI)
trên màn hình, và server sẽ trả về kết quả như mong muốn. Miễn là cả hai hiểu
nhau. Cách vận hành chính trong môi trường MySQL cũng như vậy:

1. MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa sự liên quan giữa các
bảng đó.
2. Client sẽ gửi yêu cầu SQL bằng một lệnh đặc biệt trên MySQL.
3. Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy
client.

2.4.3. Ưu điểm và nhược điểm của MySQL

2.4.3.1. Ưu điểm

Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và

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.

27
 Độ 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 khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp
cao.

Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ
từ một hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp.

Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và
hơn thế nữa nó có thể được mở rộng nếu cần thiết.

Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc
rất hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi.

2.4.3.2. Nhược điểm

Giới hạn: Theo thiết kế, MySQL không có ý định làm tất cả và nó đi kèm
với các hạn chế về chức năng mà một vào ứng dụng có thể cần.

Độ tin cậy: Cách các chức năng cụ thể được xử lý với MySQL (ví dụ tài
liệu tham khảo, các giao dịch, kiểm toán,…) làm cho nó kém tin cậy hơn so với
một số hệ quản trị cơ sở dữ liệu quan hệ khác.

Dung lượng hạn chế: Nếu số bản ghi của bạn lớn dần lên thì việc truy xuất
dữ liệu của bạn là khá khó khăn, khi đó chúng ta sẽ phải áp dụng nhiều biện
pháp để tăng tốc độ truy xuất dữ liệu như là chia tải database này ra nhiều
server, hoặc tạo cache MySQL

2.5. Bootstrap và Responsive

Bootstrap là front-end framework, là một bộ sưu tập miễn phí các công cụ
để tạo ra các trang web và các ứng dụng web. Bootstrap bao gồm HTML và
CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các button và các thành
phần giao diện khác, cũng như mở rộng tùy chọn JavaScript.

28
 Boostrap định nghĩa sẵn các class CSS giúp người thiết kế giao diện
website tiết kiệm rất nhiều thời gian. Các thư viện Bootstrap có những đoạn
mã sẵn sàng cho chúng ta áp dùng vào website của mình mà không phải tốn
quá nhiều thời gian để tự viết.

Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị
trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát triển giao diện website
đang rất được ưu chuộng hiện nay. Bootstrap cung cấp tính năng responsive
và mobile first, nghĩa là làm cho trang web có thể tự co giãn để tương thích
với mọi thiết bị khác nhau, từ điện thoại di động đến máy tính bảng, máy tính
xách tay, máy tính để bàn,...

Một khía cạnh khác là responsive web design làm cho trang web cung cấp
được trải nghiệm tuyệt vời cho người dùng trên nhiều thiết bị, kích thước màn
hình khác nhau. Đây là một đặc điểm vô cùng quan trọng vì chúng ta không
thể lường trước được các thiết bị, kích thước màn hình sẽ sử dụng để truy cập
vào trang web. Một trang có thể hoạt động tốt bất kể sự biến đổi sẽ cung cấp
một trải nghiệm người dùng tốt và nhất quán hơn một trang được thiết kế cho
một loại thiết bị và kích thước màn hình cụ thể.

29
2.6. Đặc thù hệ thống
2.6.1. Tổng quan hệ thống

Người dùng
Hiển thị dữ liệu
View
cho người dùng (5)

Truyển dữ liệu cho view (4)

Gửi yêu cầu (1) Controller Xử lý yêu cầu (2) Model

Trả kết quả truy vấn (3)

Hình 2.12 Tổng quan hệ thống

Hệ thống gồm 2 trang là trang xem phim và trang quản trị

Trang xem phim gồm
 Trang danh sách phim: gồm danh sách các phim lẻ và phim bộ
 Trang chi tiết phim: hiển thị chi tiết tên phim, diễn viên, thời lượng , bình
luận có trong bộ phim, đánh giá, phim mà người dùng đã chọn
 Trang phim theo thể loại: danh sách các phim theo thể loại người dùng
đã chọn
 Trang xem phim: trang để phát phim cho người dùng xem
 Trang đăng nhập đăng ký.

Trang quản trị gồm:

 Trang đăng nhập đăng ký
 Trang quản lý người dùng
Trang quản lý người dùng có các chức năng như: thêm xoá sửa người dùng,
chọn làm admin, bỏ chọn làm admin
 Trang quản lý phim

30
 Trang quản lý phim trong đó có các chức năng như: thêm xoá sửa phim,
quản lý bình luận, xoá những bình luận không phù hợp, quản lý quốc gia,
quản lý diễn viên,…

2.6.2. Cơ cấu hệ thống

Hệ thống có 3 loại người dùng
Bảng 2.1 Phân loại người dùng hệ thống

STT Kiểu người dùng Chức năng

1 Người dùng không có tài khoản trên website Khi truy cập vào website
có thể xem phim và sử
dụng chức năng tìm kiếm
2 Người dùng có tài khoản trên website Ngoài sử dụng các chức
năng như xem phim và tìm
kiếm thì kiểm tài khoản
này có thể comment,
download phim và yêu
cầu post phim
3 Người dùng là Admin của hệ thống Quản lý các tài khoản của
người dùng và quản trị nội
dung của website

2.7. Google Firebase

2.7.1. Khái niệm
Firebase là một nền tảng phát triển ứng dụng web và mobile, cung cấp cho
các nhà phát triển một bộ công cụ và dịch vụ giúp họ phát triển các ứng chất
lượng cao, tăng trưởng lượng người dùng và kiếm được nhiều lợi nhuận hơn.

31
2.7.2. Lịch sử phát triển
Năm 2011, startup tiền thân của Firebase được thành lập, được gọi là
Envolve. Nó cung cấp cho các nhà phát triển API cho phép tích hợp tính năng
nhắn tin trực tuyến vào trang web của họ.
Điều thú vị là các nhà phát triển sử dụng Envolve không chỉ để làm nhắn tin
trực tuyến. Họ sử dụng Envolve để đồng bộ hóa dữ liệu ứng dụng, chẳng hạn
như một trạng thái game giữa các user trong thời gian thực.

Điều đó đã dẫn đến các nhà sáng lập của Envolve tách riêng hệ thống chat
và kiến trúc realtime. Năm 2012, Firebase được tạo như một công ty cung
cấp Backend as a Service với tính năng realtime.

Sau khi được Google mua lại năm 2014, Firebase nhanh chóng phát triển
thành một nền tảng đa chức năng như ngày nay
2.7.3. Các dịch vụ của Firebase
Firebase chia các dịch vụ của nó thành 3 nhóm:

Hình 2.13 Các dịch vụ của Firebase

32
2.7.4. Các tính năng chính
1. Realtime Database
Firebase Realtime Database là một cơ sở dữ liệu NoSQL trên đám
mây cho phép bạn lưu trữ và đồng bộ hóa dữ liệu giữa các user trong thời
gian thực.
Realtime Database cơ bản chỉ là một đối tượng JSON lớn mà các nhà
phát triển có thể quản lý thời gian thực.

Hình 2.14 Realtime Database

Chỉ với một API duy nhất, Realtime Database cung cấp cho ứng dụng của
bạn cả giá trị hiện tại của dữ liệu và bất kì cập nhật mới nào.

33
 Hình 2.15 Đồng bộ hoá thời gian thực

Đồng bộ hóa thời gian thực giúp người dùng truy cập dữ liệu của họ dễ dàng
từ bất kì thiết bị nào cũng như tương tác với các người dùng khác.

Một lợi ích tuyệt vời khác của Realtime Database là nó cung cấp SDKs cho
cả web và mobile, cho phép bạn xây dựng ứng dụng mà không cần server.

Khi người dùng ngoại tuyến, Realtime Databse SDKs sử dụng local cache
trên trình duyệt để lưu trữ thay đổi. Khi thiết bị online các dữ liệu đó sẽ được tự
động đồng bộ hóa.

Realtime Database cũng tích hợp với Firebase Authentication để cung cấp
một tiến trình xác thực đơn giản và trực quan.

2. Authentication

34
 Hình 2.16 Authentication bằng firebase

Firebase Authentication cung cấp dịch vụ backend, SDKs sẵn sàng sử dụng,
và các thư viện UI được làm sẵn để giúp ứng dụng của bạn xác thực người dùng.

Thông thường, bạn phải mất cả tháng để xây dựng hệ thống xác thực và
thường xuyên phải bảo trì nó. Nhưng nếu bạn sử dụng Firebase, bạn chỉ dưới 10
dòng code để xử lý mọi thứ, bao gồm cả những thao tác phức tạp như sát nhập
tài khoản.

Bạn có thể xác thực người dùng qua các phương thức như: Email, Phone
number, Facebook, Google, Twitter, ...

Sử dụng Firebase Authentication giúp dễ dang hơn cho việc xây dựng hệ
thống xác thực an toàn, trong khi cũng cải thiện trải nghiệm cho người dùng.

Firebase Authentication được phát triển bởi những người đã tạo ra Google
Signin, Smart Lock và Chrome Password Manager.

35
 3. Firebase Cloud Messaging (FCM)

Hình 2.17 Firebase Cloud Messaging

Firebase Cloud Messaging cung cấp một kết nối hiệu quả và đáng tin cậy
giữa server và thiết bị của bạn, cho phép bạn gửi và nhận tin nhắn hoặc thông
báo trên iOS, Android và Web mà không mất thêm chi phí.

Bạn có thể gửi tin nhắn thông báo (giới hạn 2KB) hoặc tin nhắn dữ liệu (giới
hạn 4KB).

Sử dụng FCM, bạn có thể dễ dàng xác định đối tượng mục tiêu với các phân
khúc được định nghĩa trước hoặc do bạn tự định nghĩa, sử dụng nhân khẩu học
và hành vi. Bạn có thể gửi tin nhắn tới một nhóm các thiết bị được đăng kí theo
các chủ đề xác định, hoặc bạn có thể nhận được chi tiết như một thiết bị duy
nhất.

FCM có thể gửi tin nhắn ngay lập tức hoặc trong tương lai theo múi giờ của
người dùng. Bạn có thể gửi dữ liệu tùy chỉnh như cài đặt độ ưu tiên, âm thanh,
ngày hết hạn, và cũng theo dõi các sự kiện tùy chỉnh.

36
 Điều tuyệt vời nhất là hầu như không cần thêm bất kì code nào! FCM được
tích hợp hoàn toàn với Firebase Analytics, cho phép bạn khả năng theo dõi chi
tiết các hoạt động.

3. CHƯƠNG 3. THIẾT KẾ VÀ CÀI ĐẶT CHƯƠNG TRÌNH

3.1. Thiết kế cơ sở dữ liệu
3.1.1. Bảng actor_has_movie
Dùng để lưu diễn viên có trong phim
Bảng 3.1 Bảng actor_has_movie

STT Tên field Kiểu dữ liệu

1 Id Int
2 Movie_id Int
3 User_id Int
4 Description Varchar
3.1.2. Bảng actors
Dùng để lưu diễn viên
Bảng 3.2 Bảng actors

STT Tên field Kiểu dữ liệu

1 Id Int
2 Name Varchar
3 Description Varchar
3.1.3. Bảng comments
Dùng để lưu bình luận của người dùng
Bảng 3.2 Bảng comments

37
 STT Tên field Kiểu dữ liệu
1 Id Int
2 Movie_id Int
3 User_id Int
4 Description Varchar
3.1.4. Bảng countries
Dùng để lưu thông tin các nước
Bảng 3.3 Bảng countries

STT Tên field Kiểu dữ liệu

1 Id Int
2 Name Varchar
3.1.5. Bảng directors
Dùng để lưu thông tin đạo diễn
Bảng 3.4 Bảng directors

STT Tên field Kiểu dữ liệu

1 Id Int
2 Name Varchar
3 Description Varchar
3.1.6. Bảng favorites
Dùng để lưu phim yêu thích

Bảng 3.5 Bảng favorites

STT Tên field Kiểu dữ liệu

1 Id Int
2 Movie_id Int

38
 STT Tên field Kiểu dữ liệu
3 User_id Int
3.1.7. Bảng genre_has_movie
Dùng để lưu thể loại có phim
Bảng 3.6 Bảng genre_has_movie

STT Tên field Kiểu dữ liệu

1 Id Int
2 Movie_id Int
3 Gener_id Int
3.1.8. Bảng genres
Dùng để lưu thể loại
Bảng 3.7 Bảng genres

STT Tên field Kiểu dữ liệu

1 Id Int
2 Name Varchar
3 Slug Varchar
3.1.9. Bảng images
Dùng để lưu hình ảnh
Bảng 3.8 Bảng images

STT Tên field Kiểu dữ liệu

1 Id Int
2 url Varchar
3 Alt Varchar
3.1.10. Bảng movies
Dùng để lưu thông tin phim

39
 Bảng 3.9 Bảng movies

STT Tên field Kiểu dữ liệu

1 Id Int
2 country_id Int
3 image_id Int
4 Banner_id Int
1 Name Varchar
2 Slug Varchar
3 Description Varchar
4 Release_year Int
5 Num_view Int
6 Run_time int
7 Rate Int
8 Num_rate int
3.1.11. Bảng rates
Dùng để lưu đánh giá phim
Bảng 3.10 Bảng rates

STT Tên field Kiểu dữ liệu

1 Id Int
2 Movie_id Int
3 User_id Int
4 title Varchar
5 Rate Int
6 Description Varchar
3.1.12. Bảng users
Dùng để lưu thông tin người dùng

40
 Bảng 3.11 Bảng users

STT Tên field Kiểu dữ liệu

1 Id Int
2 User_role_id Int
3 country_id Int
4 Username Varchar
5 Password Varchar
6 Email Varchar
7 Firstname Varchar
8 Lastname Varchar
3.1.13. Bảng user_role
Dùng để lưu vai trò người dùng
Bảng 3.12 Bảng user_role

STT Tên field Kiểu dữ liệu

1 Id Int
2 name Varchar
3.2. RESTful API

Hình 3.1, 3.2, 3.3 và 3.4 trình bày các REST API mà phía back-end
(Spring boot) đã xây dựng để phía fornt-end (VueJS) sử dụng.

41
Hình 3.1 RESTful API trang home

Hình 3.2 RESTful API Movie

Hình 3.3 RESTful API User

Hình 3.3 RESTful API User Role

42
3.3. Sơ đồ usecase
Bảng 3.13 Danh sách các actor

STT Actor Vai trò

1 User User là đối tượng chính tác động trực tiếp và nhiều
nhất vào hệ thống.
User có thể thực hiện hầu như các chức năng của ứng
dụng.
2 Admin Admin là actor kế thừa actor user và thêm các chức
năng quản trị

Bảng dưới đây trình bày các chức năng chính của ứng dụng.
Bảng 3.14 Danh sách các usecase

STT Chức năng Mô tả

1 Login Xác thực và phân quyền cho người dùng khi họ
sử dụng ứng dụng
2 Logout Thoát khỏi phiên làm việc.
3 Sign up Đăng ký tài khoản để sử dụng ứng dụng
4 Change password Thay đổi mật khẩu người dùng
5 Add movie Thêm một phim mới
6 Edit movie Chỉnh sửa thông phim
7 Delete movie Xóa phim
8 Play movie Phát phim
9 Add user Thêm người dùng
10 Edit user Chỉnh sửa thông tin người dùng
11 Delete user Xóa người dùng

43
 Dưới đây là sơ đồ mối quan hệ giữa các actor với actor, actor với use
case và use case và use case.

Đăng nhập
Quản lý người dùng

admin
Người dùng
Xem phim
Quản lý thể loại
Bình luận

Chức năng của người dùng Cập nhật mật khẩu Chức năng của admin Quản lý diễn viên

Tạo mới
Cập nhật thông tin cá nhân

Cập nhật
Quản lý phim

Xoá

Xem

Hình 3.4 Sơ đồ usecase

44
3.3.1. Class Diagram
1
n
movies actors
comments
-ID(PK): int 1 -ID(PK): int
country_id: int(20) name:varchar(255) -ID(PK): int
image_id: int(20) description:varchar(255) movie_id:int(20)
banner_id:int(20) birthday: timestamp user_id:int(20)
n
name: varchar(255) description:varchar(255)
slug:varchar(255)
description:
varchar(255) genres
num_view:int(20) -ID(PK): int genres_has_movie
run_time:int(20) 1 name:varchar(255) 1 n
num_rate:int(20) slug:varchar(2550 -ID(PK): int
movie_id:int(20)
1 genre_id:int(20)
1

users
n
-ID(PK): int
n
avatar_id:int(20) favorite
user_role_id:int(20) user_role
country_id:int(20) -ID(PK): int
n
username:varchar(255) -ID(PK): int movie_id:int(20)
1
firstname:varchar(255) name:varchar(255) user_id:int(20)
lastname:varchar(255) description:varchar(255)
email:varchar(255)
password:varchar(255)
description: varchar(255)

Hình 3.5 Class diagram

45
3.3.2. Sequency diagram

User System 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 đồ tuần tự đăng nhập

46
 <<GUI>> <<GUI>> <<Model>>
Admin
List Users 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 đồ tuần tự thêm người dùng

47
 <<GUI>> <<GUI>> <<Model>>
Admin
List Users 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 đồ tuần tự cập nhật thông tin người dùng

48
3.3.3. Biểu đồ phân cấp chức năng

Người quản trị

Quản lý người Quản lý phân Quản lý diễn

Quản lý phim Quản lý thể loại
dùng quyền viên

Thêm người Thêm phim Thêm diễn viên

Thêm thể loại
dùng Cập nhật quyền

Cập nhật người Cập nhật diễn

Cập nhật phim Cập nhật thể loại
dùng viên

Thêm quyền

Xoá người dùng Xoá phim Xoá thể loại Xoá diễn viên

Hình 3.9 Biểu đồ phân cấp chức năng

3.4. Giao diện và chức năng

3.4.1. Một số giao diện chính

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 năng nổi bật

Tính năng đa ngôn ngữ của ứng dụng. Ứng dụng hỗ trợ 2 ngôn ngữ
là Tiếng Việt và 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
 4. CHƯƠNG 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
4.1. Kết quả đạt được

Nghiên cứu và trình bày một cách có hệ thống các nội dung cơ bản về
Spring framework, VueJS,MySQL và một số công nghệ, kỹ thuật khác
trong việc xây dựng một ứng dụng Java enterprise trên nền web.

Về mặt lý thuyết:

- Nắm được kiến trúc tổng quan của Spring Framework cũng như các
nguyên lý cơ bản và cơ chế hoạt động của framework này.
- Nắm được mô hình web MVC trong Spring framework và các cơ
chế để bảo mật một ứng dụng web được hỗ trợ trong module Spring
Security.

Về mặt ứng dụng:

- Xây dựng được ứng dụng web dạng SPA mà việc giao tiếp với server
thông qua RESTful service với sự hỗ trợ của VueJS.
- Thiết kế giao diện người dùng với HTM5 và Bootstrap có hỗ trợ
responsive.
- Xây dựng thành công web xem phim trực tuyến với đầy đủ các chức năng
cơ bản.
4.2. Hạn chế

Các chức năng cơ bản của ứng dụng đã hoàn thành tốt, tuy nhiên do
yêu cầu và phạm vi đề tài chỉ 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ề vật chất, không có host trên internet có cài đặt đầy đủ các
phần mềm cần thiết tạo khó khăn trong việc thực hiện demo chương trình
trên internet. Vấn đề triển khai những công nghệ nêu trên không khó về

59
mặt kỹ thuật nhưng phải xây dựng một cơ sở hạ tầng đầy đủ và tốt để có
thể thực thi ứng dụng.
4.3. Hướng phát triển

Tiếp tục tìm hiểu về một số cơ chế xác thực và phân quyền trong
module Spring Security như cơ chế xác thực Oauth, Oauth2, OpenID,…
để xây dựng ứng dụng với cơ chế bảo mật hơn.

Bên cạnh đó tiếp tục tìm hiểu các module còn lại của Spring Framework
như Spring AOP nhằm tích hợp vào hệ thống để thực hiện một số chức
năng đặc biệt như ghi log người dùng.

Tìm hiểu về web socket và kết hợp với VueJS để hướng đến việc xây
dựng một ứ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