(Đồ án tốt nghiệp) Xây dựng website quản lý tham quan của phòng Quan hệ doanh nghiệp tại Trường Đại học Sư phạm Kỹ thuật TP.HCM

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE QUẢN LÝ THAM QUAN CỦA
PHÒNG QUAN HỆ DOANH NGHIỆP TẠI TRƯỜNG
ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
SVTH 1: ĐỖ THỊ THANH NGÂN

MSSV: 17110187

SVTH 2: NGUYỄN TRẦN THANH TRÚC

MSSV: 17110245

Khóa: K17
Ngành: CÔNG NGHỆ THÔNG TIN
GVHD: THS. NGUYỄN MINH ĐẠO

Tp. HỒ CHÍ MINH, tháng 07 năm 2021


LỜI CẢM ƠN
Lời đầu tiên, cho phép nhóm em được gửi lời cảm ơn chân thành đến thầy
Nguyễn Minh Đạo, người đã phụ trách hướng dẫn nhóm chúng em trong việc thực
hiện và hoàn thành bài báo cáo một cách tốt và hiệu quả nhất. Những sự chỉ dạy, nhật
xét, đóng góp ý kiến từ thầy đã góp phần rất quan trọng trong việc giúp chúng em
hoàn hành đề tài một cách hồn thiện nhất. Cảm ơn các thầy cơ trong khoa Cơng
Nghệ Thơng Tin đã ln nhiệt tình, cống hiến, tận tình giải đáp các thắc mắc của
chúng em. Bên cạnh đó, chúng em xin được cảm ơn các bạn cùng khóa, các anh chị

khóa trên đã khơng ngần ngại chia sẻ các thơng tin, kinh nghiệm bổ ích giúp chúng
em hồn thiện hơn đề tài của mình. Báo cáo được thực hiện trong một khoảng thời
gian có hạn, cùng với những hạn chế về mặt kiến thức nên việc sai sót là điều khơng
thể tránh khỏi trong q trình thực hiện. Chúng em kính mong nhận được những lời
nhận xét, ý kiến đóng góp quý báo từ quý Thầy Cơ để chúng em có thêm kinh nghiệm
và hồn thành tốt hơn những đề tài sau này.
Chúng em xin chân thành cảm ơn!

i


TĨM TẮT BẰNG TIẾNG VIỆT
1. Các vấn đề nghiên cứu
-

Tìm hiểu về Single page application (Angular), Spring Boot và MongoDB giải
quyết bài toán cho hệ thống cung cấp dịch vụ sử dụng API cho website quản lý
tham quan của phòng Quan hệ Doanh nghiệp.

-

Tìm hiểu về nghiệp vụ quản lý tham quan.

2. Các vấn đề phát sinh
-

Phía khách hàng thay đổi một số nghiệp vụ trong quá trình xây dựng website.

-

Không hiểu rõ mong muốn của khách hàng.

3. Các phương pháp giải quyết vấn đề
-

Tái sử dụng và thêm một số chức năng để phù hợp với nghiệp vụ thay đổi.

-

Tiến hành nhiều cuộc thảo luận để giải quyết vần đề được đưa ra.

4. Kết quả đạt được
-

Website quản lý tham quan.

-

Xây dựng được hệ thống dễ dàng bảo trì, phát triển và mở rộng.

ii


TÓM TẮT BẰNG TIẾNG ANH
1. Research issues
- Learn about Single page application (Angular), Spring Boot and MongoDB to
solve the problem of service delivery system using API for the tour management
website of the Business Relations Department.
- Learn about tour management profession.
2. Problems arise

- The client side changes some operations during the construction of the website.
- Not understanding what the customer wants.
3. Problem Solving Methods
- Reuse and add some functionality to accommodate changing business.
- Conduct a lot of discussions to solve the problem raised.
4. Results achieved
- Website management visit.
- Build a system that is easy to maintain, develop and expand.

iii


MỤC LỤC
LỜI CẢM ƠN ..............................................................................................................i
TÓM TẮT BẰNG TIẾNG VIỆT ............................................................................... ii
TÓM TẮT BẰNG TIẾNG ANH .............................................................................. iii
MỤC LỤC ..................................................................................................................iv
DANH MỤC TỪ VIẾT TẮT .................................................................................. viii
DANH MỤC BẢNG ..................................................................................................ix
DANH MỤC HÌNH ẢNH ...................................................................................... xiii
CHƯƠNG 1.

TỔNG QUAN ..................................................................................1

1.1. Tính cấp thiết và mục tiêu của đề tài .............................................................1
1.1.1.

Tính cấp thiết của đề tài ......................................................................1

1.1.2.

Mục đích của đề tài .............................................................................1

1.2. Đối tượng, phạm vi và phương pháp thực hiện .............................................2
1.2.1.

Đối tượng nghiên cứu ..........................................................................2

1.2.2.

Phạm vi ................................................................................................2

1.2.3.

Phương pháp thực hiện ........................................................................2

1.3. Kết quả dự kiến đạt được...............................................................................2
CHƯƠNG 2.

CƠ SỞ LÝ THUYẾT .......................................................................3

2.1. Spring Framework .........................................................................................3
2.1.1.

Một số khái niệm chính .......................................................................3

2.1.2.

Các module ..........................................................................................6

2.2. Spring Boot ....................................................................................................7
2.2.1.

Tổng quan về Spring Boot...................................................................7

2.2.2.

Tạo một Spring Boot Application .......................................................8
iv


2.3. Angular ..........................................................................................................8
2.3.1.

Tổng quan về Angular .........................................................................8

2.3.2.

Mơ tả ....................................................................................................8

2.3.3.

Mơ hình ...............................................................................................8

2.4. MongoDB ....................................................................................................10
2.4.1.

Mơ hình .............................................................................................10

2.4.2.

Đặc trưng ...........................................................................................11

2.4.3.

Ưu điểm .............................................................................................12

2.4.4.

Nhược điểm .......................................................................................12

2.5. Các công nghệ và thư viện khác ..................................................................12
2.5.1.

JSON Web Token ..............................................................................12

2.5.2.

Ant Design of Angular ......................................................................13

CHƯƠNG 3.

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU ............14

3.1. Khảo sát hiện trạng ......................................................................................14
3.2. Xác định yêu cầu .........................................................................................15
3.2.1.

Yêu cầu chức năng ............................................................................15

3.2.2.

Yêu cầu phi chức năng ......................................................................18

CHƯƠNG 4.

ĐẶC TẢ CHỨC NĂNG ................................................................19

4.1. Định nghĩa usecase ......................................................................................19
4.1.1.

Actor ..................................................................................................19

4.1.2.

Usecase ..............................................................................................20

4.2. Lược đồ use case .........................................................................................24
4.3. Đặc tả use case .............................................................................................28
4.3.1.

Quản lý lĩnh vực ................................................................................28

v


4.3.2.
CHƯƠNG 5.

Quản lý chuyến tham quan ................................................................31

THIẾT KẾ ỨNG DỤNG ...............................................................44

5.1. Thiết kế dữ liệu ............................................................................................44
5.1.1.

Sơ đồ thiết kế dữ liệu .........................................................................44

5.1.2.

Mô tả sơ đồ thiết kế dữ liệu ...............................................................45

5.2. Lược đồ lớp (Class Diagram) ......................................................................62
5.3. Sơ đồ tuần tự (Sequence Diagram) ..............................................................63
5.3.1.

Sequence Hủy đăng ký dẫn đoàn ......................................................63

5.3.2.

Sequence Đăng ký chuyến ................................................................64

5.3.3.

Sequence Đăng ký dẫn đoàn .............................................................65

5.3.4.

Sequence Thực hiện khảo sát ............................................................66

5.3.5.

Sequence Thêm mới sinh viên vào chuyến bằng form .....................67

5.3.6.

Sequence Thêm mới lĩnh vực ............................................................67

5.3.7.

Sequence Cập nhật lĩnh vực ..............................................................68

5.3.8.

Sequence Thay đổi trạng thái lĩnh vực ..............................................69

5.4. Thiết kế giao diện ........................................................................................69
5.4.1.

Phía người dùng.................................................................................69

5.4.2.

Phía admin .........................................................................................72

5.4.3.

Phía cộng tác viên..............................................................................92

5.4.4.

Phía giảng viên ................................................................................103

5.4.5.

Phía sinh viên, doanh nghiệp ...........................................................115

CHƯƠNG 6.

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG ....................................118

6.1. Cài đặt ứng dụng ........................................................................................118
6.1.1.

Thư viện và môi trường phát triển...................................................118

vi


6.1.2.

Lệnh cài đặt và chạy chương trình ..................................................118

6.1.3.

Các bước cài đặt ..............................................................................118

6.2. Kiểm thử phần mềm ..................................................................................119
6.2.1.

Chức năng thêm mới cộng tác viên .................................................119

6.2.2.

Chức năng đăng ký, hủy đăng ký dẫn đoàn ....................................120

6.2.3.

Chức năng đăng ký chuyến tham quan quyền giảng viên ...............121

CHƯƠNG 7.

KẾT LUẬN ..................................................................................123

7.1. Kết quả đạt được ........................................................................................123
7.2. Ưu điểm và nhược điểm ............................................................................123
7.2.1.

Ưu điểm ...........................................................................................123

7.2.2.

Nhược điểm .....................................................................................123

7.2.3.

Khó khăn .........................................................................................124

7.3. Kinh nghiệm đạt được ...............................................................................124
7.4. Hướng phát triển trong tương lai ...............................................................125
TÀI LIỆU THAM KHẢO .......................................................................................126

vii


DANH MỤC TỪ VIẾT TẮT
DI: Depedency Injection.
IoC: Inversion of Control.
JWT: JSON Web Token.
HTTP: Hyper Text Transfer Protocol.
API: Application Programming Interface.
MIT: Massachusetts Institute of Technology.

viii


DANH MỤC BẢNG
Bảng 2.1. Ưu khuyết điểm của DI...............................................................................5
Bảng 4.1. Actor .........................................................................................................19
Bảng 4.2. Usecase .....................................................................................................20
Bảng 4.3. Đặc tả use case "Xem danh sách lĩnh vực"...............................................28
Bảng 4.4. Đặc tả use case "Cập nhật lĩnh vực". ........................................................29
Bảng 4.5. Đặc tả use case "Thay đổi trạng thái lĩnh vực". ........................................29
Bảng 4.6. Đặc tả use case "Tìm kiếm lĩnh vực"........................................................30
Bảng 4.7. Đặc tả use case "Thêm mới lĩnh vực".......................................................30
Bảng 4.8. Đặc tả use case "Xem danh sách chuyến tham quan theo trạng thái" ......31
Bảng 4.9. Đặc tả use case "Tìm kiếm chuyến tham quan" .......................................32
Bảng 4.10. Đặc tả use case "Xem theo trạng thái chờ duyệt" ...................................32
Bảng 4.11. Đặc tả use case "Xem theo trạng thái đang xử lý" .................................33
Bảng 4.12. Đặc tả use case "Xem theo trạng thái sẵn sàng chưa có đợt" .................33
Bảng 4.13. Đặc tả use case "Xem theo trạng thái sẵn sàng" .....................................34

Bảng 4.14. Đặc tả use case "Xem theo trạng thái hủy" ............................................35
Bảng 4.15. Đặc tả use case "Upload file quyết định của BGH" ...............................35
Bảng 4.16. Đặc tả use case "Xem danh sách cộng tác viên" ....................................36
Bảng 4.17. Đặc tả use case "Xét duyệt cộng tác viên" .............................................36
Bảng 4.18. Đặc tả use case "Xem danh sách sinh viên tham quan" .........................37
Bảng 4.19. Đặc tả use case "Thêm mới sinh viên tham quan" .................................37
Bảng 4.20. Đặc tả use case "Import danh sách sinh viên" ........................................38
Bảng 4.21. Đặc tả use case "Điểm danh bù sinh viên" .............................................39
Bảng 4.22. Đặc tả use case "Filter chuyến tham quan" ............................................41
Bảng 4.23. Đặc tả use case "Thêm mới chuyến tham quan" ....................................42
Bảng 4.24. Đặc tả use case "Lưu trữ hồ sơ"..............................................................42
Bảng 4.25. Đặc tả use case "Xem timeline graphic" ................................................43
Bảng 5.1. Mô tả collection bai-viet ...........................................................................45
Bảng 5.2. Mô tả collection banner ............................................................................46
ix


Bảng 5.3. Mô tả collection cau-hinh-he-thong .........................................................46
Bảng 5.4. Mô tả collection chuyen-tham-quan .........................................................46
Bảng 5.5, Mô tả collection cong-tac-vien .................................................................48
Bảng 5.6. Mô tả collection doanh-nghiep .................................................................48
Bảng 5.7. Mô tả collection dot-tham-quan ...............................................................49
Bảng 5.8. Mô tả collection file-huong-dan ...............................................................50
Bảng 5.9. Mô tả collection giang-vien ......................................................................50
Bảng 5.10. Mô tả collection hoc-ham .......................................................................51
Bảng 5.11. Mô tả collection hoc-vi ...........................................................................51
Bảng 5.12. Mô tả collection ket-qua-khao-sat-cong-tac-vien ...................................52
Bảng 5.13. Mô tả collection ket-qua-khao-sat-doanh-nghiep ...................................52
Bảng 5.14. Mô tả collection ket-qua-khao-sat-sinh-vien ..........................................53
Bảng 5.15. Mô tả collection khoa .............................................................................53

Bảng 5.16. Mô tả collection my-file .........................................................................53
Bảng 5.17. Mô tả collection nganh ...........................................................................54
Bảng 5.18. Mô tả collection side-banner ..................................................................54
Bảng 5.19. Mô tả collection sinh-vien ......................................................................55
Bảng 5.20. Mô tả collection tai-khoan ......................................................................55
Bảng 5.21. Mô tả collection van-ban-bieu-mau ........................................................56
Bảng 5.22. Mô tả collection xac-thuc-token .............................................................56
Bảng 5.23. Mô tả document cau-hoi-khao-sat-cong-tac-vien ...................................56
Bảng 5.24. Mô tả document cau-hoi-khao-sat-doanh-nghiep ...................................58
Bảng 5.25. Mô tả document cau-hoi-khao-sat-sinh-vien ..........................................58
Bảng 5.26. Mô tả document cong-tac-vien-dan-doan ...............................................59
Bảng 5.27. Mô tả document dia-diem .......................................................................59
Bảng 5.28. Mô tả document GPS ..............................................................................60
Bảng 5.29. Mô tả document ket-qua-khao-sat ..........................................................60
Bảng 5.30. Mô tả document linh-vuc ........................................................................60
Bảng 5.31. Mô tả document phuong-tien ..................................................................60

x


Bảng 5.32. Mô tả document sinh-vien-tham-quan ....................................................61
Bảng 5.33. Mô tả màn hình phía admin ....................................................................69
Bảng 5.34. Mơ tả màn hình đăng nhập .....................................................................70
Bảng 5.35. Mơ tả màn hình qn mật khẩu ..............................................................71
Bảng 5.36. Mơ tả màn hình phía admin ....................................................................72
Bảng 5.37. Mơ tả màn hình danh sách chuyến tham quan........................................73
Bảng 5.38. Mơ tả màn hình thêm mới chuyến tham quan ........................................76
Bảng 5.39. Mơ tả màn hình chỉnh sửa danh sách sinh viên ......................................80
Bảng 5.40. Mơ tả màn hình thêm sinh viên tham quan ............................................81
Bảng 5.41. Mơ tả màn hình điểm danh bù ................................................................82

Bảng 5.42. Mơ tả màn hình nhập danh sách sinh viên..............................................83
Bảng 5.43. Mơ tả màn hình chỉnh sửa danh sách cộng tác viên ...............................85
Bảng 5.44. Thêm cộng tác viên dẫn đồn .................................................................86
Bảng 5.45, Mơ tả màn hình chỉnh sửa chuyến tham quan ........................................87
Bảng 5.46. Mơ tả màn hình uploadfile quyết định của BGH ...................................91
Bảng 5.47. Mô tả màn hình phía cộng tác viên.........................................................92
Bảng 5.48. Mơ tả màn hình chính phía cộng tác viên ...............................................94
Bảng 5.49. Mơ tả màn hình xem thơng tin chuyến tham quan .................................95
Bảng 5.50. Mơ tả màn hình xác nhận đăng ký chuyến tham quan ...........................96
Bảng 5.51. Mơ tả màn hình điểm danh chuyến ........................................................97
Bảng 5.52. Mơ tả màn hình checkin/ checkout .........................................................98
Bảng 5.53. Màn hình điểm danh sinh viên ...............................................................99
Bảng 5.54. Mơ tả màn hình điểm danh bằng QR code ...........................................100
Bảng 5.55. Mơ tả màn hình điểm danh nhập liệu ...................................................101
Bảng 5.56. Mơ tả màn hình khảo sát .......................................................................102
Bảng 5.57. Mơ tả màn hình thực hiện khảo sát.......................................................102
Bảng 5.58. Mơ tả màn hình phía giảng viên ...........................................................103
Bảng 5.59. Mơ tả màn hình chính của giảng viên...................................................105
Bảng 5.60. Mơ tả màn hình thêm mới chuyến tham quan ......................................106

xi


Bảng 5.61. Mơ tả màn hình thêm mới doanh nghiệp ..............................................109
Bảng 5.62. Mơ tả màn hình chỉnh sửa chuyến tham quan ......................................112
Bảng 5.63. Mơ tả màn hình phía sinh viên, doanh nghiệp ......................................115
Bảng 5.64. Mơ tả màn hình chính phía sinh viên doanh nghiệp .............................116
Bảng 5.65. Mơ tả màn hình thực hiện khảo sát.......................................................117
Bảng 6.1. Danh sách thư viện và môi trường phát triển cần thiết trong sản phẩm .118
Bảng 6.2. Danh sách các lệnh cài đặt và chạy chương trình ...................................118

Bảng 6.3. Kiểm thử chức năng thêm mới cộng tác viên .........................................119
Bảng 6.4. Kiểm thử chức năng đăng ký, hủy đăng ký dẫn đoàn ............................120
Bảng 6.5. Kiểm tra chức năng đăng ký chuyến tham quan quyền giảng viên ........121
Bảng 7.1. Các khó khăn về cơng nghệ. ...................................................................124
Bảng 7.2. Các khó khăn về quy trình thực hiện ......................................................124

xii


DANH MỤC HÌNH ẢNH
Hình 2.1. Mơ hình ứng dụng áp dụng IoC ..................................................................4
Hình 2.2. Các module của Spring Framework ............................................................6
Hình 2.3. Các thành phần cơ bản trong angular ..........................................................9
Hình 2.4. Cách hoạt động giữa các thành phần trong Angular ...................................9
Hình 2.5. Cấu trúc Json Web Token .........................................................................13
Hình 4.1. Lược đồ usecase tổng quan .......................................................................24
Hình 4.2. Lược đồ use case actor Admin ..................................................................25
Hình 4.3. Lược đồ use case actor Cộng tác viên .......................................................26
Hình 4.4. Lược đồ use case actor Doanh nghiệp ......................................................27
Hình 4.5. Lược đồ use case actor Sinh viên ..............................................................27
Hình 4.6. Use case quản lý lĩnh vực..........................................................................28
Hình 4.7. Use case quản lý chuyến tham quan .........................................................31
Hình 5.1. Sơ đồ thiết kế dữ liệu (1) ...........................................................................44
Hình 5.2. Sơ đồ thiết kế dữ liệu (2) ...........................................................................45
Hình 5.3. Lược đồ lớp ...............................................................................................62
Hình 5.4. Sequence Hủy đăng ký dẫn đồn ..............................................................63
Hình 5.5. Sequence Đăng ký chuyến ........................................................................64
Hình 5.6. Sequence Đăng ký dẫn đồn .....................................................................65
Hình 5.7. Sequence Thực hiện khảo sát ....................................................................66
Hình 5.8. Sequence Thêm mới sinh viên vào chuyến bằng form .............................67

Hình 5.9. Sequence Thêm mới lĩnh vực....................................................................67
Hình 5.10. Sequence Cập nhật lĩnh vực ....................................................................68
Hình 5.11. Sequence Thay đổi trạng thái lĩnh vực....................................................69
Hình 5.12. Màn hình đăng nhập ................................................................................70
Hình 5.13. Màn hình quên mật khẩu .........................................................................71
Hình 5.14. Màn hình danh sách chuyến tham quan ..................................................73
Hình 5.15. Màn hình thêm mới chuyến tham quan...................................................76
Hình 5.16. Màn hình chỉnh sửa danh sách sinh viên ................................................80
xiii


Hình 5.17. Màn hình thêm sinh viên tham quan .......................................................81
Hình 5.18. Màn hình điểm danh bù...........................................................................82
Hình 5.19. Màn hình nhập danh sách sinh viên ........................................................83
Hình 5.20. Màn hình chỉnh sửa danh sách cộng tác viên..........................................84
Hình 5.21. Thêm cộng tác viên dẫn đồn .................................................................85
Hình 5.22. Màn hình chỉnh sửa chuyến tham quan ..................................................86
Hình 5.23. Màn hình upload file quyết định của BGH .............................................91
Hình 5.24. Màn hình chính phía cộng tác viên .........................................................93
Hình 5.25. Màn hình xem thơng tin chuyến tham quan ............................................95
Hình 5.26. Màn hình xác nhận đăng ký chuyến........................................................96
Hình 5.27. Màn hình điểm danh chuyến ...................................................................97
Hình 5.28. Màn hình checkin/ checkout ...................................................................98
Hình 5.29. Màn hình điểm danh sinh viên ................................................................99
Hình 5.30. Màn hình điểm danh bằng QR code......................................................100
Hình 5.31. Màn hình điểm danh nhập liệu ..............................................................100
Hình 5.32. Màn hình khảo sát .................................................................................101
Hình 5.33. Màn hình thực hiện khảo sát .................................................................102
Hình 5.34. Màn hình chính của giảng viên .............................................................104
Hình 5.35. Màn hình thêm mới chuyến tham quan.................................................105

Hình 5.36. Màn hình thêm mới doanh nghiệp ........................................................109
Hình 5.37. Giao diện chỉnh sửa chuyến tham quan ................................................111
Hình 5.38. Màn hình chính phía sinh viên, doanh nghiệp ......................................116
Hình 5.39. Màn hình khảo sát .................................................................................117
Hình 6.1. Các thư mục trong “quan-ly-tham-quan”................................................119

xiv


CHƯƠNG 1. TỔNG QUAN
1.1.

Tính cấp thiết và mục tiêu của đề tài
1.1.1. Tính cấp thiết của đề tài

Tham quan tại doanh nghiệp là hoạt động thường xuyên của Phòng Quan hệ
Doanh nghiệp nhằm rút ngắn khoảng cách giữa lý thuyết và thực tiễn, giúp sinh viên
cập nhật kiến thức thực tế và có cái nhìn cận cảnh hơn về mơi trường làm việc trong
tương lai.
Ngày nay, doanh nghiệp có xu hướng tìm kiếm sinh viên từ các trường về thực
tập và đào tạo, hoạt động tham quan doanh nghiệp càng được chú trọng hơn, nâng
cao cả về chất lượng lẫn số lượng. Không chỉ đơn thuần là “tham quan”, trải nghiệm
thực tế về môi trường làm việc, giao lưu với các anh chị quản lý, ban lãnh đạo công
ty, được nghe những kinh nghiệm và kỹ năng làm việc.
Vì lẽ đó, phịng Quan hệ Doanh nghiệp cần phải có một website để quản lý
lượng lớn các chuyến tham quan, nắm bắt thơng tin, trạng thái của các chuyến một
cách chính xác nhất.

1.1.2. Mục đích của đề tài
Đề tài “XÂY DỰNG WEBSITE QUẢN LÝ THAM QUAN CỦA PHÒNG

QUAN HỆ DOANH NGHIỆP TẠI TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
TP.HCM” đặt ra các vấn đề trọng tâm về mục tiêu mà sinh viên nghiên cứu cần thực
hiện được bao gồm:
- Sử dụng công nghệ, kỹ thuật, thư viện ứng dụng và quá trình phát triển phần
mềm, mang lại giá trị nhanh nhất cho khách hàng, bao gồm: các công nghệ
giúp phát triển ứng dụng web đa nền tảng, các công nghệ ứng dụng giúp phát
triển dự án nhanh nhất, độc lập nhất và dễ dàng triển khai cho các môi trường
khác nhau.
- Xây dựng website quản lý tham quan cho phòng Quan hệ Doanh nghiệp giúp
các thầy cô dễ dàng quản lý thông tin của các chuyến tham quan được tổ chức,
doanh nghiệp hợp tác với nhà trường. Từ đó, xem xét và kết hợp với giảng
viên để tạo ra chuyến tham quan bổ ích cho các bạn sinh viên.
- Sản phẩm là một trang web nên yêu cầu giao diện thân thiện với người dùng,
phù hợp với chủ đề mà khách hàng hướng đến. Sản phẩm cũng bắt buộc phải
sử dụng được trên nhiều trình duyệt cũng như nhiều loại thiết bị di động đồng
thời các tính năng có thể hoạt động tốt, giao diện khơng có q nhiều biến
động giữa các thiết bị, trình duyệt.
1


Đối tượng, phạm vi và phương pháp thực hiện

1.2.

1.2.1. Đối tượng nghiên cứu
Đồ án được thực hiện xoay quanh hai đối tượng trọng tâm, bao gồm: công
nghệ và kiến thức thực tế về việc quản lý, xử lý các nghiệp vụ mà khách hàng u
cầu.
Trong đó, đối tượng cơng nghệ bao gồm các đối tượng nghiên cứu bắt buộc
như mã nguồn mở Java Spring Boot, Angular framework, cơ sở dữ liệu NoSQL

MongoDB. Ngoài việc kết hợp các đối tượng nghiên cứu cơng nghệ, một số thư viện
có giá trị như JWT (Json Web Token), Ant Design cũng được nghiên cứu để xây
dựng giao diện website được tốt hơn.
Đối tượng khách hàng hướng đến là nhóm đối tượng có nhu cầu tổ chức, quản
lý các chuyến tham quan đến doanh nghiệp, bao gồm các quy trình đăng ký trực tuyến
từ giảng viên, xem xét các thông tin đưa ra các trạng thái của chuyến để thuận tiện
cho việc theo dõi, quản lý người dùng, quản lý các danh mục, thống kê các kết quả
khảo sát theo thời gian cho trước.

1.2.2. Phạm vi
Phạm vi thực hiện được đặt ở mức độ tổng quát, nắm được kiến thức chung
cho nội dung thực hiện và vận dụng từng nội dung kiến thức vào sản phẩm thực tế,
không đặt nặng lý thuyết.

1.2.3. Phương pháp thực hiện
Nghiên cứu, tìm hiểu các tài liệu và trang web liên quan đến công nghệ ứng
dụng.
Tham khảo ý kiến của giảng viên hướng dẫn, khách hàng, bạn bè xung quanh,
những người có kinh nghiệm liên quan đến các vấn đề đang gặp phải để tạo ra độ
chính xác của sản phẩm.

Kết quả dự kiến đạt được

1.3.
-

Hiểu được các kiến thức về chức năng, cách thức hoạt động của Java Spring
Boot và Angular trong việc xây dựng website.
Xây dựng hoàn thành một website quản lý tham quan với những kiến thức đã
tìm hiểu.

2


CHƯƠNG 2. CƠ SỞ LÝ THUYẾT
2.1.

Spring Framework
2.1.1.

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 [1].
2.1.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.
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í, 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.

3


Hình 2.1. 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 số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. 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 và quản lý bởi Spring IoC container.
2.1.1.2.

Dependency Injection (DI)

Với cách code thông thường, các module cấp cao sẽ gọi các module cấp thấp.
Module cấp cao sẽ phụ thuộc và module cấp thấp, điều đó tạo ra các dependency. Khi

4


module cấp thấp thay đổi, module cấp cao phải thay đổi theo. Một thay đổi sẽ kéo
theo hàng loạt thay đổi, giảm khả năng bảo trì của code.
Vì thế DI ra đời, Hiện nay, một số DI container như Unity, StructureMap v…v,
hỗ trợ trong việc cài đặt và áp dụng Dependency Injection vào code, tuy nhiên vẫn có
thể gọi chúng là IoC Container, ý nghĩa tương tự nhau [1].
➢ Có thể hiểu Dependency Injection một cách đơn giản như sau:
• Các module không giao tiếp với nhau mà thông qua interface.
• Module cấp thấp sẽ implement interface
• Module cấp cao sẽ gọi module cấp thấp thơng qua interface.
• Việc khởi tạo các module cấp thấp do DI container thực hiện.
➢ Các dạng Dependency Injection:
• Constructor Injection: Các dependency sẽ được container truyền vào (inject
vào) 1 class thông qua constructor của class đó. Đây là cách thơng dụng nhất.
• Setter Injection: Các dependency sẽ được truyền vào 1 class thông qua các
hàm Setter.
• Interface Injection: Class cần inject sẽ implement 1 interface. Interface này
chứa 1 hàm tên Inject. Container sẽ injection dependency vào 1 class thông

qua việc gọi hàm Inject của interface đó. Đây là cách rườm rà và ít được sử
dụng nhất.
➢ Ưu khuyết điểm của DI:
Bảng 2.1. Ưu khuyết điểm của DI
Ưu điểm

Khuyết điểm

•
•
•
•

•

Giảm sự kết dính giữa các module
Code dễ bảo trì, dễ thay thế module
Rất dễ test và viết Unit Test
Dễ dàng thấy quan hệ giữa các module
(Vì các dependecy đều được inject vào
constructor)

•

•
•

Khái niệm DI khá “khó tiêu”, các
developer mới sẽ gặp khó khăn khi học
Sử dụng interface nên đơi khi sẽ khó

debug, do khơng biết chính xác module
nào được gọi
Các object được khởi tạo tồn bộ ngay
từ đầu, có thể làm giảm performance
Làm tăng độ phức tạp của code

5


2.1.2.

Các module

Hình 2.2. Các module của Spring Framework

Spring Core: Core package là phần cơ bản nhất của Spring, cung cấp những
đặc tính như IoC (Inversion of Control) và DI (Dependency Injection). Khái niệm cơ
bản là BeanFactory, một cài đặt của Factory pattern, cho phép “móc nối” sự phụ thuộc
giữa các đối tượng trong file cấu hình.
Spring Context: Spring context là một file cấu hình để cung cấp thơng tin ngữ
cảnh của Spring. Spring context cung cấp các service như JNDI access, EJB
integration, e-mail, internalization, validation, và scheduling functionality.
Spring AOP (Aspect – Oriented Programming): Spring AOP module tích
hợp chức năng lập trình hướng khía cạnh vào Spring framework thơng qua cấu hình
của nó. Spring AOP module cung cấp các dịch vụ quản lý giao dịch cho các đối tượng
trong bất kỳ ứng dụng nào sử dụng Spring. Với Spring AOP chúng ta có thể tích hợp
declarative transaction management vào trong ứng dụng mà không cần dựa vào EJB
component. Spring AOP module cũng đưa lập trình metadata vào trong Spring. Sử
dụng cái này chúng ta có thể thêm annotation vào source code để hướng dẫn Spring
nơi và làm thế nào để liên hệ với aspect.

Spring DAO (Data Access Object): Tầng JDBC và DAO đưa ra một cây
phân cấp exception để quản lý kết nối đến database, điều khiển exception và thông
báo lỗi được ném bởi vendor của database. Tầng exception đơn giản điều khiển lỗi
và giảm khối lượng code mà chúng ta cần viết như mở và đóng kết nối. Hình 2.6: Các

6


module của Spring framework 15 Module này cũng cung cấp các dịch vụ quản lý
giao dịch cho các đối tượng trong ứng dụng Spring.
Spring ORM (Object Relational Mapping): Spring có thể tích hợp với một
vài ORM framework để cung cấp Object Relation tool bao gồm: JDO, Hibernate,
OJB và iBatis SQL Maps.
Spring Web: Nằm trên application context module, cung cấp context cho các
ứng dụng web. Spring cũng hỗ trợ tích hợp với Struts, JSF và Webwork. Web module
cũng làm giảm bớt các công việc điều khiển nhiều request và gắn các tham số của
request vào các đối tượng domain.
Spring MVC: MVC Framework thì cài đặt đầy đủ đặc tính của MVC pattern
để xây dựng các ứng dụng Web. MVC framework thì cấu hình thơng qua giao diện
và chứa được một số kỹ thuật view bao gồm: JSP, Velocity, Tiles và generation of
PDF và Excel file.

2.2.

Spring Boot
2.2.1.

Tổng quan về Spring Boot

Spring Boot là một module của Spring Framework cung cấp các tính năng

RAD (Rapid Aplication Development) để phát triển ứng dụng nhanh. Nếu như trước
đây, công đoạn khởi tạo một dự án Spring khá vất vả từ việc khai báo các dependency
trong file pom.xml cho đến cấu hình bằng XML hoặc annotation phức tạp, thì giờ đây
với Spring Boot, chúng ta có thể tạo các ứng dụng Spring một cách nhanh chóng và
cấu hình cũng đơn giản hơn [1].
Dưới đây là một số tính năng nổi bật của Spring Boot:
• Có các tính năng của Spring Framework
• Tạo ứng dụng độc lập, có thể chạy bằng java-jar (cho cả java web)
• Cung cấp một loạt các tính năng phi chức năng phổ biến cho các dự án lớn
như những trực tiếp Web Server như Tomcat, Jetty, …
• 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 xuất)
• Khơng u cầu XML config
• Cung cấp nhiều plugin
• Chuẩn cho Microservices (Cloud support; giảm việc setup, config; các thư
viện hỗ trợ…)

7


2.2.2.
-

2.3.

Tạo một Spring Boot Application

Java 1.8 trở lên
Gradle 2.3+ hoặc Maven 3.0+
Spring Framework 5.x.x.BUILD-SNAPSHOT

IDE hỗ trợ Spring Tool Suit

Angular
2.3.1.

Tổng quan về Angular

Angular là một Javascript framework xây dựng ứng dụng web mã nguồn mở
(open source) hoạt động ở phía người dùng (client-side) sử dụng HTML, CSS và
ngơn ngữ lập trình Typescript. Angular là chữ A trong MEAN. Trước đây chữ A
trong MEAN Stack thường được biết tới AngularJS, nhưng sau năm 2012, Angular
đã được Google tiếp quản và phát triển lên Angular 2 rồi tới Angular 4 tiếp đến
Angluar 9 và phiên bản mới nhất hiện nay là Angular 12. Angular là một Web
Framework làm việc ở phía Front-end giúp thuận lợi trong việc tạo các Single Page
web Application [2].

2.3.2.

Mô tả

React hoạt động dựa trên 5 thành phần cơ bản là: virtual DOM, JSX,
Components, Props và State.

2.3.3.

Mơ hình

Angular hoạt động dựa trên 8 thành phần cơ bản là Module, Component,
Template, Metadata, Data binding, Service, Directive, Dependency injection

8


Hình 2.3. Các thành phần cơ bản trong angular

Hoạt động giữa các thành phần trong angular sẽ được mô tả như dưới đây

Hình 2.4. Cách hoạt động giữa các thành phần trong Angular

Các thành phần như component, service, directive, template, ... sẽ được khai
báo và đóng gói trong các Module. Trong các module, các component, service,
directive bản chất đều là các class bình thường trong TypeScript, để giúp angular hiểu
và nhận biết đâu và component, đâu là directive, angular cung cấp sẵn các decorator
(một mẫu design pattern) để gắn vào các class như @Component để nhận biết
component, @Directive để nhận biết directive… Trong các decorator này, người
dùng có thể cung cấp các metadata để khai báo tên (selector) thành phần đó, khai báo
component sẽ gắn với giao diện template html và css là gì. Với service thì khơng có

9


decorator nhận diện và nó giống như một class TypeScript thông thường. Như vậy,
angular đã nhận diện được các thành phần trong nó.
Trong q trình hoạt động, template sẽ được dùng để khởi tạo giao diện. Nhờ
các directive và data binding, template sẽ trải qua giai đoạn xử lý, sửa đổi để tạo ra
giao diện hiển thị thật sự trên màn hình, các sự kiện từ DOM (Document Object
Model đại diện cho trang giao diện) sẽ liên tục được theo dõi và qua đó, component
và directive sẽ có các phản hồi tương ứng. Từ các phản hồi của directive và
component, đối tượng đại diện cho giao diện là DOM có thể nhận được những thay
đổi và những thay đổi đó sẽ tự động được trình duyệt cập nhật và hiển thị trên màn

hình. Các service sẽ đóng vai trị là thành phần hỗ trợ xử lý, có thể sử dụng lại trong
nhiều component nhờ dependency injection.
Angular được biết đến là có nhiệm vụ thực thi Single Page Application và giao
diện hiển thị trên màn hình của người dùng cũng chỉ có một trang html duy nhất.
Nhưng mỗi component lại có phần template đính kèm và sẽ nằm tách rời ở nhiều file,
angular sẽ cần gom tất cả phần template đang sử dụng, hợp lại thành một template
thống nhất để hiển thị trên màn hình.
Trong một ứng dụng angular có thể có rất nhiều module, mỗi module lại có
nhiều component, service…. Trong tất cả sẽ có một module là root module. Module
cũng là một class TypeScript và được gắn decorator @NgModule, bên trong nó là
các metadata. Với root module thì sẽ có một metadata đặc biệt là “bootstrap”, nó chứa
mảng các component sẽ được chọn để khởi động ban đầu. Thông thường các ứng
dụng angular sẽ có sẵn một component được chọn để khởi động là AppComponent
ngay từ khi tạo project. Khi ứng dụng angular mới khởi động, trang giao diện sẽ là
nội dung từ trang index.html với styles.css.

2.4.

MongoDB
2.4.1.

Mơ hình

MongoDB hệ quản trị cơ sở dữ liệu mã nguồn mở (open-source) thuộc họ cơ
sở dữ liệu phi quan hệ (NoSQL) [3].
MongoDB được phát triển từ năm 2007 bởi một tổ chức tên là MongoDB Inc
có trụ sở tại New York. Tại thời điểm đó MongoDB được phát triển như là một nền
tảng dịch vụ (Platform as a services - PAAS). Đến năm 2009 MongoDB đã được
chính thức giới thiệu trên thị trường như một máy chủ cơ sở dữ liệu mã nguồn mở
(open-source database server) được duy trì và phát triển bởi tổ chức MongoDB Inc.

Tại thời điểm đó đã có nhiều tổ chức lớn và vừa như SourceForge, Foursquare, eBay
sử dụng MongoDB để phát triển cơ sở dữ liệu của họ.

10