Đồ án xây dựng website quản lý rạp chiếu phim

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

XÂY DỰNG WEBSITE QUẢN LÝ RẠP CHIẾU PHIM

GV HƯỚNG DẪN:
THS. TRẦN THỊ HỒNG YẾN
SV THỰC HIỆN:
ĐỖ PHÚ QUANG – 20521800
VÕ ĐÌNH NGHĨA – 20521659

TP. HỒ CHÍ MINH, 2023


LỜI CẢM ƠN
Để hoàn thành đồ án “Xây dựng trang web quản lý rạp chiếu phim”, lời đầu
tiên chúng em xin gửi lời cảm ơn chân thành đến cô Trần Thị Hồng Yến đã tận tình
giúp đỡ, đưa ra những định hướng cũng như những lời khuyên quý báu cho quá
trình phát triển đồ án của chúng em. Những bài học, kinh nghiệm được cô truyền
dạy sẽ luôn là hành trang vững chắc cho quá trình học tập và làm việc của chúng
em. Bên cạnh đó, chúng em cũng khơng qn gửi lời cảm ơn đến tồn thể q thầy
cơ đã và đang giảng dạy tại Trường Đại học Công nghệ thơng tin đã giúp chúng em
có được những nền tảng kiến thức vững chắc để có thể tìm hiểu và hồn thiện sản
phẩm đã đề ra.
Trong q trình phát triển đồ án, do còn thiếu kinh nghiệm thực tiễn trong
việc xây dựng sản phẩm, những sai sót của nhóm là điều khơng thể tránh khỏi.
Chính vì vậy, chúng em rất sẵn lịng đón nhận những góp ý, đánh giá từ cơ để có thể

tạo ra một sản phẩm hồn thiện, chỉnh chu hơn.
Lời cuối, chúng em xin kính chúc cô luôn dồi dào sức khỏe, thành công
trong sự nghiệp và cuộc sống!
TP.HCM, ngày 24 tháng 06 năm 2023
Nhóm sinh viên thực hiện
Đỗ Phú Quang – Võ Đình Nghĩa

2


ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI: XÂY DỰNG TRANG WEB QUẢN LÝ RẠP CHIẾU PHIM
Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 27/02/2023 đến ngày 17/06/2023
Sinh viên thực hiện:
Đỗ Phú Quang - 20521800
Võ Đình Nghĩa - 20521659
Nội dung đề tài:
1. Giới thiệu
Trong những năm gần đây, nền kinh tế thế giới nói chung và Việt Nam nói
riêng đã có sự phát triển vượt bậc, kéo theo đó là nhu cầu giải trí của xã hội ngày
càng cao. Để đáp ứng nhu cầu con người, nhiều ngành cơng nghiệp giải trí đang
dần được đẩy mạnh cả về quy mô lẫn chất lượng, đặc biệt là công nghiệp điện
ảnh. Trong quá khứ, để xem một bộ phim tại rạp, người xem phải đến trực tiếp
điểm bán vé để mua vé, vừa phức tạp lại rất tốn thời gian. Tuy nhiên, trong thời
đại 4.0 với sự bùng nổ của Internet như hiện nay, việc có một phần mềm đặt vé
xem phim sẽ cung cấp cho người dùng một cách dễ dàng, tiện lợi và nhanh chóng
để đặt vé. Hiểu được điều đó, nhóm em quyết định lựa chọn đề tài “Xây dựng
website quản lý rạp chiếu phim”, không những giúp giảm thiểu thời gian và nỗ
lực cần thiết của khách hàng để mua vé mà còn giúp người quản lý rạp quản lý

nhân lực, tài nguyên, doanh thu một cách hiệu quả.
2. Mô tả chi tiết mục tiêu
‒ Hiểu về ReactJs, NextJs, Typescript, NodeJs, ExpressJs và cách áp dụng
những công nghệ này vào đồ án.
‒ Hiểu về State Management và cách sử dụng các thư viện như Redux Toolkit,

3


Redux Saga
‒ Xây dựng được phần mềm Quản lý rạp phim với các tính năng như: Đặt vé,
Quản lý phim, Quản lý lịch chiếu,…
3. Phạm vi
o Phạm vi môi trường
‒ Triển khai sản phẩm trên môi trường web.
o Phạm vi chức năng
‒ Client
+ Xem danh sách phim đang chiếu, sắp chiếu.
+ Xem lịch chiếu.
+ Đặt vé.
+ Xem bài viết.
+ Đánh giá phim.
+ Xem lịch sử giao dịch.
+ Quản lý thông tin cá nhân.
‒ Admin
+ Đặt vé (Nhân viên tại quầy).
+ Quản lý phim.
+ Quản lý lịch chiếu.
+ Quản lý phòng chiếu.
+ Quản lý menu.

+ Quản lý diễn viên.
+ Quản lý nhân viên.
+ Quản lý bài viết.
+ Quản lý báo cáo.
4. Đối tượng
‒ Người dùng có nhu cầu đặt vé xem phim.
‒ Chủ rạp phim, quản lý và các nhân viên của rạp.
5. Phương pháp thực hiện

4


‒ Tìm hiểu các cơng nghệ Front-end như ReactJs, NextJs, Typescript,
TailwindCSS, MUI.
‒ Tìm hiểu các cơng nghệ Back-end như NodeJs, ExpressJs, MongoDB,
Mongoose.
‒ Tìm hiểu về State Management và các thư viện như Redux Toolkit, Redux
Saga.
‒ Khảo sát thực trạng các trang web đặt vé xem phim trên thị trường như
CGV, Starlight, LotteCinema, GalaxyCinema,…, và các nghiệp vụ quản lý
rạp chiếu phim từ đó tiến hành phân tích, xác định các yêu cầu cụ thể cho
đề tài.
‒ Phân tích thiết kế hệ thống ứng dụng.
‒ Tiến hành nghiên cứu thiết kế wireframe cho trang web.
‒ Tiến hành xây dựng trang web.
‒ Tiến hành triển khai và kiểm thử chức năng.
6. Công nghệ
‒ Front-end: ReactJs, NextJs, Typescript, TailwindCSS, MUI.
‒ State Management: Redux Toolkit, Redux Saga.
‒ Back-end: NodeJs, ExpressJs.

‒ Database: MongoDB.
‒ API Documentation: Postman.
‒ Source Control: Github.
7. Kết quả mong đợi
‒ Tìm hiểu và áp dụng các công nghệ mới trong việc xây dựng phần mềm
Quản lý rạp chiếu phim.
‒ Hiểu rõ các nghiệp vụ, chức năng của một phần mềm Quản lý rạp chiếu
phim.
‒ Xây dựng được phần mềm Quản lý rạp chiếu phim đáp ứng được các yêu
cầu về giao diện và chức năng đã đề ra.
‒ Có thể thay đổi linh hoạt giao diện, mở rộng thêm tính năng trong việc

5


phát triển phần mềm trong tương lai.
Kế hoạch thực hiện:
STT

Tên cơng việc

Thời gian dự kiến

Thành viên thực hiện

1

Tìm hiểu đề tài, nghiên cứu

27/2/2023 – 5/3/2023

Cả nhóm

6/3/2023 – 12/3/2023

Cả nhóm

các phần mềm sẵn có, xác
định các chức năng nghiệp
vụ của phần mềm.
2

Nghiên cứu và lựa chọn
cơng nghệ sử dụng.

3

Tìm hiểu quy trình thiết kế

13/3/2023 – 26/3/2023 Cả nhóm

UI/UX và thiết kế wireframe
cho ứng dụng.
4

Khởi tạo và cài đặt các cấu

27/3/2023 – 31/3/2023 Võ Đình Nghĩa

hình Source Code Back-end.

5

Khởi tạo và cài đặt các cấu

27/3/2023 – 31/3/2023 Đỗ Phú Quang

hình Source Code Front-end.
6

Xây dựng giao diện trang

1/4/2023 – 20/4/2023

Đỗ Phú Quang

1/4/2023 – 20/4/2023

Võ Đình Nghĩa

Admin.
7

Xây dựng các API cho trang
Admin.

8

Kết nối các API vào trang

21/4/2023 – 30/4/2023 Cả nhóm

Admin, chỉnh sửa các API
nếu cần thiết.

6


9

Xây dựng giao diện trang

1/5/2023 – 20/5/2023

Đỗ Phú Quang

1/5/2023 – 20/5/2023

Võ Đình Nghĩa

Client.
10

Xây dựng các API cho trang
Client.

11

Kết nối các API vào trang

21/5/2023 – 31/5/2023 Cả nhóm

Admin, chỉnh sửa các API
nếu cần thiết.
12

Kiểm thử phần mềm và sửa

1/6/2023 – 7/6/2023

Cả nhóm

Cả nhóm

lỗi.
13

Hồn thiện báo cáo.

8/6/2023 – 10/6/2023

14

Thời gian dự phịng.

11/6/2023 – 17/6/2023

Xác nhận của CBHD

TP. HCM, ngày 13 tháng 02 năm 2023

(Ký tên và ghi rõ họ tên)

Sinh viên
(Ký tên và ghi rõ họ tên)

Đỗ Phú Quang
ThS. Trần Thị Hồng Yến

TP. HCM, ngày 13 tháng 02 năm 2023
Sinh viên
(Ký tên và ghi rõ họ tên)

Võ Đình Nghĩa

7


MỤC LỤC
LỜI CẢM ƠN .............................................................................................................2
ĐỀ CƯƠNG CHI TIẾT ..............................................................................................2
MỤC LỤC ...................................................................................................................8
DANH MỤC HÌNH ẢNH ........................................................................................12
DANH MỤC BẢNG .................................................................................................15
Chương 1.

GIỚI THIỆU ĐỀ TÀI........................................................................17

1.1. Lý do chọn đề tài ............................................................................................17
1.2. Phạm vi nghiên cứu ........................................................................................17
1.3. Đối tượng nghiên cứu.....................................................................................18

1.4. Phương pháp nghiên cứu ................................................................................18
1.5. Khảo sát thực tế và giải pháp .........................................................................19
1.5.1. Khảo sát ứng dụng trên thị trường ..........................................................19
1.5.2. Giải pháp .................................................................................................20
Chương 2.

CÔNG NGHỆ SỬ DỤNG .................................................................21

2.1. ReactJs............................................................................................................21
2.1.1. Giới thiệu.................................................................................................21
2.1.2. Ưu điểm ...................................................................................................22
2.1.3. Nhược điểm .............................................................................................22
2.2. NextJs .............................................................................................................22
2.2.1. Giới thiệu.................................................................................................22
2.2.2. Ưu điểm ...................................................................................................23
2.2.3. Nhược điểm .............................................................................................23

8


2.3. MUI (Material UI)..........................................................................................23
2.3.1. Giới thiệu.................................................................................................24
2.3.2. Ưu điểm ...................................................................................................24
2.3.3. Nhược điểm .............................................................................................24
2.4. TailwindCSS ..................................................................................................25
2.4.1. Giới thiệu.................................................................................................25
2.4.2. Ưu điểm ...................................................................................................25
2.4.3. Nhược điểm .............................................................................................26
2.5. NodeJs ............................................................................................................26
2.5.1. Giới thiệu.................................................................................................27

2.5.2. Ưu điểm ...................................................................................................27
2.5.3. Nhược điểm .............................................................................................27
2.6. ExpressJs ........................................................................................................27
2.6.1. Giới thiệu.................................................................................................28
2.6.2. Ưu điểm ...................................................................................................28
2.6.3. Nhược điểm .............................................................................................28
2.7. MongoDB .......................................................................................................28
2.7.1. Giới thiệu.................................................................................................29
2.7.2. Ưu điểm ...................................................................................................29
2.7.3. Nhược điểm .............................................................................................29
2.8. Mongoose .......................................................................................................30
2.8.1. Giới thiệu.................................................................................................30
2.8.2. Ưu điểm ...................................................................................................30
2.8.3. Nhược điểm .............................................................................................30

9


Chương 3.

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .......................................32

3.1. Phân tích yêu cầu ...........................................................................................32
3.1.1. Đăng ký ...................................................................................................32
3.1.2. Đăng nhập ...............................................................................................32
3.1.3. Xem trang thống kê nhanh (Trang Admin) .............................................32
3.1.4. Đặt vé (Trang Admin + Client) ...............................................................32
3.1.5. Quản lý phim (Trang Admin) .................................................................33
3.1.6. Quản lý lịch chiếu (Trang Admin) ..........................................................33
3.1.7. Quản lý phòng chiếu (Trang Admin) ......................................................33

3.1.8. Quản lý đồ ăn nhẹ (Trang Admin) ..........................................................34
3.1.9. Quản lý diễn viên (Trang Admin) ...........................................................34
3.1.10. Quản lý nhân viên (Trang Admin) ........................................................34
3.1.11. Quản lý bài viết (Trang Admin) ............................................................35
3.1.12. Quản lý giao dịch (Trang Admin) .........................................................35
3.1.13. Quản lý báo cáo (Trang Admin) ...........................................................35
3.1.14. Quản lý thể loại phim (Trang Admin) ..................................................35
3.1.15. Quản lý loại phòng chiếu (Trang Admin) .............................................36
3.1.16. Quản lý thông tin cá nhân (Trang Admin) ............................................36
3.1.17. Xem danh sách lịch chiếu (Trang Client) .............................................36
3.1.18. Xem danh sách phim và chi tiết phim (Trang Client) ...........................36
3.1.19. Đánh giá và bình luận ...........................................................................36
3.1.20. Xem danh sách phim và chi tiết diễn viên (Trang Client) ....................37
3.1.21. Xem danh sách phim và chi tiết bài viết (Trang Client) .......................37
3.1.22. Quản lý tài khoản ..................................................................................37

10


3.2. Thiết kế hệ thống ............................................................................................38
3.2.1. Sơ đồ Use Case .......................................................................................38
3.2.2. Danh sách Actor ......................................................................................39
3.2.3. Danh sách Use Case ................................................................................39
3.2.4. Đặc tả Use Case ......................................................................................42
3.3. Thiết kế dữ liệu ..............................................................................................67
3.3.1. Sơ đồ lớp .................................................................................................67
3.3.2. Sơ đồ lớp .................................................................................................67
3.3.3. Mô tả chi tiết bảng dữ liệu ......................................................................68
Chương 4.

XÂY DỰNG ỨNG DỤNG ...............................................................76

4.1. Danh sách màn hình .......................................................................................76
4.1.1. Danh sách màn hình trang Admin...........................................................76
4.1.2. Danh sách màn hình trang Client ............................................................77
4.2. Chi tiết màn hình ............................................................................................78
4.2.1. Trang Admin ...........................................................................................78
4.2.2. Trang Client ..........................................................................................128
Chương 5.

TỔNG KẾT .....................................................................................149

5.1. Ưu điểm ........................................................................................................149
5.2. Nhược điểm ..................................................................................................149
5.3. Hướng phát triển ..........................................................................................150
TÀI LIỆU THAM KHẢO .......................................................................................151

11


DANH MỤC HÌNH ẢNH
Hình 2.1. Logo ReactJS ............................................................................................21
Hình 2.2. Logo NextJS ..............................................................................................22
Hình 2.3. Logo Material UI.......................................................................................23
Hình 2.4. Logo TailwindCSS ....................................................................................25
Hình 2.5. Logo NodeJS .............................................................................................26
Hình 2.6. Logo ExpressJS .........................................................................................27
Hình 2.7. Logo MongoDB ........................................................................................28
Hình 2.8. Logo Mongoose ........................................................................................30
Hình 3.1. Sơ đồ Use Case trang Admin ....................................................................38

Hình 3.2. Sơ đồ Use Case trang Client .....................................................................39
Hình 3.3. Sơ đồ lớp của hệ thống ..............................................................................67
Hình 4.1. Màn hình "Đăng nhập" ..............................................................................78
Hình 4.2. Màn hình “Quên mật khẩu” ......................................................................79
Hình 4.3. Màn hình “Cập nhật mật khẩu” .................................................................80
Hình 4.4. Màn hình “Thống kê nhanh” .....................................................................81
Hình 4.5. Màn hình “Đặt vé” (Chọn suất chiếu) .......................................................82
Hình 4.6. Màn hình “Đặt vé” (Chọn ghế) .................................................................83
Hình 4.7. Màn hình “Đặt vé” (Chọn bắp nước) ........................................................84
Hình 4.8. Màn hình “Đặt vé” (Thanh tốn) ..............................................................85
Hình 4.9. Màn hình “Đặt vé” (Thanh tốn thành cơng) ............................................86
Hình 4.10. Màn hình “Danh sách phim” ...................................................................87
Hình 4.11. Màn hình “Thêm phim” ..........................................................................88
Hình 4.12. Màn hình “Chỉnh sửa phim” ...................................................................89
Hình 4.13. Màn hình “Danh sách lịch chiếu” ...........................................................90
Hình 4.14. Màn hình “Thêm lịch chiếu” ...................................................................91
Hình 4.15. Màn hình “Chỉnh sửa lịch chiếu” ............................................................92
Hình 4.16. Màn hình “Danh sách phịng chiếu” .......................................................93
Hình 4.17. Màn hình thêm phịng chiếu ....................................................................94

12


Hình 4.18. Màn hình “Chỉnh sửa phịng chiếu” ........................................................95
Hình 4.19. Màn hình “Danh sách đồ ăn nhẹ” ...........................................................96
Hình 4.20. Màn hình “Thêm đồ ăn nhẹ” ...................................................................97
Hình 4.21. Màn hình “Chỉnh sửa đồ ăn nhẹ” ............................................................98
Hình 4.22. Màn hình “Danh sách diễn viên” ............................................................99
Hình 4.23. Màn hình “Thêm diễn viên” ..................................................................100
Hình 4.24. Màn hình “Chỉnh sửa diễn viên” ...........................................................101

Hình 4.25. Màn hình “Danh sách nhân viên” .........................................................102
Hình 4.26. Màn hình “Thêm nhân viên” .................................................................103
Hình 4.27. Màn hình “Chỉnh sửa nhân viên” ..........................................................104
Hình 4.28. Màn hình “Danh sách bài viết” (Tất cả) ...............................................105
Hình 4.29. Màn hình “Danh sách bài viết” (Cá nhân) ............................................106
Hình 4.30. Màn hình “Xem bài viết” ......................................................................107
Hình 4.31. Màn hình “Thêm bài viết” ....................................................................108
Hình 4.32. Màn hình “Chỉnh sửa bài viết”..............................................................109
Hình 4.33. Màn hình “Danh sách giao dịch” ..........................................................110
Hình 4.34. Màn hình “Chi tiết giao dịch” ...............................................................111
Hình 4.35. Màn hình “Báo cáo” (Báo cáo chung theo ngày – dạng danh sách) .....112
Hình 4.36. Màn hình “Báo cáo” (Báo cáo chung theo ngày – dạng biểu đồ) .........113
Hình 4.37. Màn hình “Báo cáo” (Báo cáo chung theo tháng – dạng danh sách) ....114
Hình 4.38. Màn hình “Báo cáo” (Báo cáo chung theo tháng – dạng biểu đồ) ........115
Hình 4.39. Màn hình “Báo cáo” (Báo cáo chung theo năm – dạng danh sách) ......116
Hình 4.40. Màn hình “Báo cáo” (Báo cáo chung theo năm – dạng biểu đồ) ..........117
Hình 4.41. Màn hình “Báo cáo” (Báo cáo phim theo ngày) ...................................118
Hình 4.42. Màn hình “Báo cáo” (Báo cáo phim – dạng danh sách) .......................119
Hình 4.43. Màn hình “Báo cáo” (Báo cáo phim – dạng biểu đồ) ...........................120
Hình 4.44. Màn hình “Danh sách thể loại phim” ....................................................121
Hình 4.45. Màn hình “Thêm thể loại phim” ...........................................................122
Hình 4.46. Màn hình “Chỉnh sửa thể loại phim” ....................................................123

13


Hình 4.47. Màn hình “Danh sách loại phịng chiếu” ..............................................124
Hình 4.48. Màn hình “Thêm loại phịng chiếu” ......................................................125
Hình 4.49. Màn hình “Chỉnh sửa loại phịng chiếu” ...............................................126
Hình 4.50. Màn hình “Chỉnh sửa thơng tin cá nhân” ..............................................127

Hình 4.51. Màn hình “Đăng nhập” .........................................................................128
Hình 4.52. Màn hình “Đăng ký” .............................................................................129
Hình 4.53. Màn hình “Quên mật khẩu” ..................................................................130
Hình 4.54. Màn hình “Cập nhật mật khẩu” .............................................................131
Hình 4.55. Màn hình “Trang chủ” ..........................................................................132
Hình 4.56. Màn hình “Danh sách lịch chiếu” .........................................................134
Hình 4.57. Màn hình “Danh sách phim” .................................................................135
Hình 4.58. Màn hình “Chi tiết phim” ......................................................................136
Hình 4.59. Màn hình “Thể loại phim” ....................................................................138
Hình 4.60. Màn hình “Diễn viên” ...........................................................................139
Hình 4.61. Màn hình “Chi tiết diễn viên” ...............................................................140
Hình 4.62. Màn hình “Bài viết” ..............................................................................141
Hình 4.63. Màn hình “Chi tiết bài viết” ..................................................................142
Hình 4.64. Màn hình “Tài khoản” ...........................................................................143
Hình 4.65. Màn hình “Chi tiết giao dịch” (Chưa gửi đánh giá) ..............................144
Hình 4.66. Màn hình “Chi tiết giao dịch” (Đã gửi đánh giá) ..................................144
Hình 4.67. Màn hình “Đặt vé” (Chọn ghế) .............................................................145
Hình 4.68. Màn hình “Đặt vé” (Chọn bắp nước) ....................................................146
Hình 4.69. Màn hình “Đặt vé” (Thanh tốn ) .........................................................147
Hình 4.70. Màn hình “Đặt vé” (Thanh tốn thành công) ........................................148

14


DANH MỤC BẢNG
Bảng 3.1. Danh sách Actor .......................................................................................39
Bảng 3.2. Danh sách Use Case..................................................................................39
Bảng 3.3. Đặc tả Use Case Đăng nhập .....................................................................42
Bảng 3.4. Đặc tả Use Case Đăng xuất ......................................................................43
Bảng 3.5. Đặc tả Use Case Đăng ký .........................................................................43

Bảng 3.6. Đặc tả Use Case Quên mật khẩu ..............................................................44
Bảng 3.7. Đặc tả Use Case Đặt vé ............................................................................45
Bảng 3.8. Đặc tả Use Case Quản lý thông tin cá nhân .............................................46
Bảng 3.9. Đặc tả Use Case Quản lý giao dịch ..........................................................46
Bảng 3.10. Đặc tả Use Case Quản lý bài viết ...........................................................47
Bảng 3.11. Đặc tả Use Case Quản lý loại phòng chiếu ............................................48
Bảng 3.12. Đặc tả Use Case Quản lý phòng chiếu ...................................................49
Bảng 3.13. Đặc tả Use Case Quản lý thể loại phim ..................................................51
Bảng 3.14. Đặc tả Use Case Quản lý phim ...............................................................52
Bảng 3.15. Đặc tả Use Case Quản lý diễn viên ........................................................53
Bảng 3.16. Đặc tả Use Case Quản lý lịch chiếu .......................................................55
Bảng 3.17. Đặc tả Use Case Quản lý đồ ăn nhẹ........................................................56
Bảng 3.18. Đặc tả Use Case Quản lý nhân sự cấp thấp ............................................57
Bảng 3.19. Đăc tả Use Case Thống kê nhanh ...........................................................59
Bảng 3.20. Đặc tả Use Case Quản lý báo cáo ...........................................................59
Bảng 3.21. Đặc tả Use Case Quản lý nhân sự cấp cao .............................................61
Bảng 3.22. Đặc tả Use Case Xem bài viết ................................................................62
Bảng 3.23. Đặc tả Use Case Quản lý giao dịch cá nhân ...........................................63
Bảng 3.24. Đặc tả Use Case Xem danh sách phim ...................................................64
Bảng 3.25. Đặc tả Use Case Xem danh sách diễn viên ............................................65
Bảng 3.26. Đặc tả Use Case Đặt vé nhanh ................................................................66
Bảng 3.27. Danh sách các bảng trong cơ sở dữ liệu .................................................67
Bảng 3.28. Mô tả chi tiết bảng Account ...................................................................68

15


Bảng 3.29. Mô tả chi tiết bảng User .........................................................................68
Bảng 3.30. Mô tả chi tiết bảng RoomType ...............................................................69
Bảng 3.31. Mô tả chi tiết bảng Room .......................................................................69

Bảng 3.32. Mô tả chi tiết bảng Seat ..........................................................................70
Bảng 3.33. Mô tả chi tiết bảng Genre .......................................................................70
Bảng 3.34. Mô tả chi tiết bảng Movie .......................................................................70
Bảng 3.35. Mô tả chi tiết bảng Actor ........................................................................71
Bảng 3.36. Mô tả chi tiết bảng ShowTime ...............................................................71
Bảng 3.37. Mô tả chi tiết bảng Ticket .......................................................................72
Bảng 3.38. Mô tả chi tiết bảng Item ..........................................................................72
Bảng 3.39. Mô tả chi tiết bảng Transaction ..............................................................73
Bảng 3.40. Mô tả chi tiết bảng Comment .................................................................73
Bảng 3.41. Mô tả chi tiết bảng Rating ......................................................................74
Bảng 3.42. Mô tả chi tiết bảng Post ..........................................................................74
Bảng 4.1. Danh sách màn hình trang Admin ............................................................76
Bảng 4.2. Danh sách màn hình trang Client .............................................................77

16


Chương 1. GIỚI THIỆU ĐỀ TÀI
1.1. Lý do chọn đề tài
Hiện nay, Internet đã và đang trở thành một phần khơng thể thiếu trong cuộc
sống của chúng ta. Ngồi việc cung cấp nhiều tiện ích giải trí như xem video, trò
chơi điện tử,… hay mang đến một kho tàng tri thức khổng lồ bằng cách cho phép
chúng ta đọc sách, báo điện tử, theo dõi tin tức hằng ngày, Internet cũng đang dần
biến những cơng việc mang tính thủ cơng, đặc biệt là trong lĩnh vực kinh doanh
thành những công việc mang tính tự động, số hóa. Quy trình quản lý rạp chiếu cũng
như đặt vé xem phim là một trong những ví dụ điển hình. Trong thời kì Internet
chưa phổ biến, tồn bộ những cơng việc như quản lý tình hình của rạp, tạo xuất
chiếu phim, in vé, mua bán vé giữa khách hàng và nhân viên,… đều phụ thuộc hồn
tồn vào việc ghi chép thủ cơng cũng như trao đổi thông tin trực tiếp giữa người với
người. Cách làm này mang lại một số nhược điểm đáng quan ngại: tính chính xác

của thơng tin, khả năng lưu trữ thơng tin, bất cập về mặt thời gian. Q trình kê
khai, tính tốn thủ cơng hồn tồn phụ thuộc vào nhân viên, do đó những sai sót
trong thơng tin là khơng thể tránh khỏi. Bên cạnh đó, việc những thơng tin này được
lưu trữ trên tài liệu giấy sẽ có rủi ro bị hư hỏng, thất lạc. Ngoài ra, một số cơng việc
như mua bán vé địi hỏi sự thống nhất về mặt thời gian giữa nhân viên và khách
hàng cũng là một sự bất tiện. Với sự phổ biến của Internet, các phần mềm nói chung
và ứng dụng quản lý rạp chiếu phim nói riêng ra đời đã giải quyết hoàn toàn những
bất cập kể trên, giúp đơn giản hóa cơng việc của con người. Nhận thấy đây là một
chủ đề mang tính thực tế cao, nhóm em quyết định xây dựng trang web quản lý rạp
chiếu phim nhằm giúp việc quản lý và giao dịch trở nên thuận tiện, hiệu quả hơn.
1.2. Phạm vi nghiên cứu
‒

Trong đồ án này, chúng em sẽ tập trung tìm hiểu về các bài tốn quản lý người
dùng và các quy trình nghiệp vụ trong phạm vi đề tài, từ đó xây dựng một trang
web quản lý rạp chiếu phim hoàn chỉnh.

17


1.3. Đối tượng nghiên cứu
Các cơng nghệ:
‒

Ngơn ngữ lập trình: JavaScript, TypeScript.

‒

Framework: ExpressJS, NextJS.

‒

Database: MongoDB.

‒

Thư viện hỗ trợ: ReactJS, Mongoose, Material UI, TailwindCSS, Redux Saga,
Redux Toolkit.

Đối tượng trong phạm vi đề tài hướng đến:
‒

Bộ phận quản lý, nhân viên của các rạp chiếu phim có nhu cầu tự động hóa quy
trình quản lý.

‒

Khách hàng có nhu cầu đặt vé xem phim trực tuyến.

1.4. Phương pháp nghiên cứu
‒

Nghiên cứu các ứng dụng, trang web hiện có trên thị trường, từ đó rút ra những
ưu, nhược điểm của các ứng dụng đó (CGV, Cinestar,…).

‒

Tham khảo ý kiến của giảng viên hướng dẫn để đạt được kết quả tốt nhất cho đề
tài.

‒

Tìm hiểu các cơng nghệ Front-end như ReactJs, NextJs, Typescript,
TailwindCSS, MUI.

‒

Tìm hiểu các cơng nghệ Back-end như NodeJs, ExpressJs, MongoDB,
Mongoose.

‒

Tìm hiểu về State Management và các thư viện như Redux Toolkit, Redux Saga.

18


1.5. Khảo sát thực tế và giải pháp
1.5.1. Khảo sát ứng dụng trên thị trường
Qua khảo sát các ứng dụng trên thị trường, chúng em có chọn lọc ra được
một số ứng dụng nổi bật tương ứng với lĩnh vực đã chọn: Website CGV, Website
Lotte Cinema, Website Galaxy Cinema, Website BHD Star.
• Website CGV
‒ Ưu điểm:
+ Giao diện đơn giản, dễ sử dụng.
+ Các thành phần trong trang web sử dụng nhiều hình ảnh minh họa.
‒ Nhược điểm:
+ Giao diện tương đối cũ, thiếu sức hút so với các trang web hiện nay.
+ Một số thơng tin phim cịn thiếu điểm đánh giá, bình luận,…
+ Khơng cho phép tìm kiếm phim, khơng thể lọc phim dựa trên thể loại.

• Website Lotte Cinema
‒ Ưu điểm:
+ Giao diện đơn giản, dễ sử dụng.
+ Phần phân tích phim dựa trên đánh giá tương đối mới lạ.
‒ Nhược điểm:
+ Không quản lý thể loại phim, khơng cho phép tìm kiếm phim.
+ Thơng tin đánh giá phim hiển thị tương đối sơ sài.
• Website Galaxy Cinema
‒ Ưu điểm:
+ Giao diện đẹp, bắt mắt.
+ Quản lý nhiều trường thông tin như phim, thể loại, bài viết, diễn viên,...
+ Hỗ trợ nhiều tiêu chí cho bộ lọc.
‒ Nhược điểm:
+ Thường xuyên bị lỗi trong quá trình lọc phim theo thể loại.
• Website BHD Star

19


‒ Ưu điểm:
+ Giao diện đẹp, bắt mắt, dễ sử dụng.
‒ Nhược điểm:
+ Một số phần của bố cục giao diện hiển thị chưa hợp lý (banner quảng cáo
quá to,…).
+ Không linh hoạt trong cách hiển thị danh sách phim.
+ Khơng cho phép tìm kiếm phim, khơng thể lọc phim dựa trên thể loại.
1.5.2. Giải pháp
Với những phân tích thơng qua việc tìm hiểu các sản phẩm trên, chúng em đã
đưa ra một số giải pháp cho sản phẩm như sau:
‒ Tổ chức:

+ Sản phẩm sẽ hướng đến đối tượng sử dụng là các rạp phim có quy mơ vừa và
nhỏ, phần mềm chỉ quản lý tối đa 1 rạp 1 lần (Không cho phép quản lý nhiều
rạp).
+ Đối tượng sử dụng sẽ bao gồm chủ rạp, quản lý, nhân viên, khách hàng đặt
vé.
‒ Nghiệp vụ:
+ Khách hàng: Cho phép đặt vé, xem thơng tin phim, bình luận, đánh giá phim,
xem bài viết, diễn viên.
+ Quản trị: Quản lý phim, thể loại phim, diễn viên, phòng, loại phòng, combo
bắp nước, lịch chiếu, giao dịch, bài viết, nhân viên.
‒ Tin học:
+ Sản phẩm cuối cùng là một website nên có thể chạy trên nhiều loại thiết bị
(điện thoại, máy tính bảng,...).
+ Yêu cầu internet để truy cập.
+ Có hỗ trợ responsive website để tối ưu trải nghiệm người dùng.

20


Chương 2. CƠNG NGHỆ SỬ DỤNG
2.1. ReactJs
2.1.1. Giới thiệu

Hình 2.1. Logo ReactJS
‒ ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi Facebook
với mục đích tạo ra những ứng dụng web một cách nhanh chóng, hiệu quả, giảm
thiểu lượng code so với việc sử dụng Javascript thuần.
‒ ReactJS sử dụng cách tiếp cận "component-based" để xây dựng giao diện người
dùng. Mỗi thành phần (component) trong ReactJS đại diện cho một phần nhỏ
của giao diện và có thể tái sử dụng, kết hợp và tương tác với nhau để tạo thành

các trang web phức tạp.
‒ ReactJS sử dụng cú pháp JSX, một phần mở rộng của JavaScript, để viết các
thành phần giao diện. JSX cho phép tạo ra các thẻ HTML tương tự như cách
chúng ta viết trong các trang web, giúp code ngắn gọn và dễ đọc.
‒ ReactJS sử dụng một Virtual DOM (cấu trúc cây ảo) để tối ưu việc cập nhật và
hiển thị giao diện. Thay vì cập nhật trực tiếp DOM thực, ReactJS so sánh và cập
nhật chỉ những phần thay đổi trên Virtual DOM.
‒ ReactJS giúp quản lý trạng thái ứng dụng một cách hiệu quả thông qua việc sử
dụng các state (trạng thái) và lifecycle methods (các phương thức vòng đời).

21


2.1.2. Ưu điểm
‒ Mang lại hiệu suất cao nhờ việc sử dụng Virtual DOM và cơ chế cập nhật thông
minh.
‒ Việc quản lý trạng thái một cách hiệu quả giúp ứng dụng dễ dàng bảo trì, mở
rộng và kiểm thử.
‒ Tăng tính tái sử dụng nhờ cách tiếp cận “component-based”, giảm thiểu việc lặp
code.
2.1.3. Nhược điểm
‒ React chỉ là một View Library, do đó việc tích hợp React vào một MVC
framework truyền thống sẽ cần cấu hình thêm.
‒ ReactJS có kích thước tương đối lớn so với các thư viện JavaScript khác, điều
này có thể ảnh hưởng đến thời gian tải trang.
2.2. NextJs

Hình 2.2. Logo NextJS
2.2.1. Giới thiệu
NextJs là một framework front-end React được phát triển dưới dạng opensource bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang

web static. Next.js xây dựng dựa trên thư viện React, có nghĩa là các ứng dụng
Next.js sử dụng core của React và chỉ thêm các tính năng bổ sung. Việc triển khai
ứng dụng SSR cho phép máy chủ truy cập tất cả dữ liệu được yêu cầu và xử lý
JavaScript cùng nhau để hiển thị trang. Sau đó, trang được gửi lại tồn bộ cho trình

22


duyệt và ngay lập tức được hiển thị. SSR cho phép các trang web load trong thời
gian nhỏ nhất và tăng trải nghiệm người dùng với khả năng phản hồi nhanh hơn.
2.2.2. Ưu điểm
‒ Ứng dụng NextJs tải nhanh hơn đáng kể so với ứng dụng ReactJs do được
render phía Server.
‒ Hỗ trợ các tính năng cho static web.
‒ Đối với những ai đã có kinh nghiệm làm việc với ReactJs thì việc tiếp tập
NextJs sẽ là một việc dễ dàng.
‒ Tự động code splitting cho các page nhằm tối ưu hoá performance khi load
trang.
‒ Dễ dàng xây dựng các API internal thơng qua các API routes tích hợp sẵn và tạo
các endpoint API.
‒ Nhanh chóng thêm các plugin để tùy chỉnh Next.js theo các nhu cầu cụ thể.
2.2.3. Nhược điểm
‒ Khi có q nhiều trang cần pre-render thì cần tốn nhiều thời gian build.
‒ Nếu người học đi sâu vào NextJs mà chưa xây dựng chắc nền tảng thì dễ bị phụ
thuộc và khó có thể tiếp thu một framework mới.
2.3. MUI (Material UI)

Hình 2.3. Logo Material UI

23

2.3.1. Giới thiệu
MUI (Material UI) là một thư viện giao diện người dùng (UI) phát triển bởi
Google và được xây dựng trên React. Nó cung cấp các thành phần giao diện người
dùng đẹp mắt, linh hoạt và dễ sử dụng theo phong cách thiết kế Material Design.
2.3.2. Ưu điểm
‒ MUI cung cấp các thành phần giao diện người dùng được thiết kế theo nguyên
tắc của Material Design từ Google, giúp ứng dụng có giao diện hiện đại, hấp dẫn
và tương thích trên nhiều thiết bị.
‒ MUI cung cấp một bộ sưu tập rộng lớn các thành phần giao diện như Button,
TextField, Dialog, Table, …. giúp xây dựng giao diện ứng dụng nhanh chóng và
tiết kiệm thời gian phát triển.
‒ Tuỳ chỉnh linh hoạt: MUI cho phép tùy chỉnh các thành phần giao diện người
dùng theo nhu cầu. Chúng ta có thể tùy chỉnh màu sắc, kiểu dáng và các thuộc
tính khác để phù hợp với thiết kế và thương hiệu của sản phẩm đang phát triển.
‒ Hỗ trợ TypeScript: MUI hỗ trợ TypeScript, cho phép phát triển ứng dụng với
tính nhất quán và kiểm tra mã nguồn dễ dàng hơn.
‒ Cộng đồng phát triển lớn: MUI có một cộng đồng rộng lớn với nhiều tài liệu, ví
dụ và hỗ trợ từ cộng đồng. Chúng ta có thể tìm thấy nhiều tài nguyên hữu ích và
giải đáp các thắc mắc một cách nhanh chóng.
2.3.3. Nhược điểm
‒ Kích thước tệp tin lớn vì MUI cung cấp một bộ sưu tập rộng lớn các thành phần
giao diện người dùng. Điều này có thể ảnh hưởng đến thời gian tải trang và tăng
kích thước ứng dụng.
‒ Tùy chỉnh phức tạp: Mặc dù MUI cho phép tùy chỉnh, việc tùy chỉnh chi tiết các
thành phần có thể địi hỏi kiến thức sâu về CSS và JavaScript. Điều này có thể
gây khó khăn cho những người mới bắt đầu.

24

‒ Khả năng tương thích ngược: Do MUI được phát triển trên cơ sở các tiêu chuẩn
hiện đại và mới nhất, việc tương thích với các trình duyệt cũ hơn có thể gặp một
số vấn đề.
2.4. TailwindCSS

Hình 2.4. Logo TailwindCSS
2.4.1. Giới thiệu
TailwindCSS là một framework CSS ưu tiên sự tiện ích và dễ dàng chỉnh
sửa. Ngược lại với các framework CSS khác, Tailwind CSS không cung cấp các
class CSS phức tạp, cứng nhắc khó chỉnh sửa như là “forms, table, card,
carousel,…” như của Bootstrap hay Material Design CSS, mà Tailwind chỉ cung
cấp các class cho các style cấp thấp như “padding, color, cursor, border, light,…”.
Điều này giúp lập trình viên linh động trong việc sửa chữa các thành phần trong
website theo ý muốn của lập trình viên chứ khơng bị gị bó như những framework
trước đây.
2.4.2. Ưu điểm
‒ Tùy chỉnh linh hoạt: Tailwind CSS cho phép tùy chỉnh và xây dựng giao diện
người dùng theo ý muốn của. Bằng cách sử dụng các lớp CSS đã có sẵn hoặc tạo
các lớp tùy chỉnh, có thể tạo ra các kiểu thiết kế độc đáo và phù hợp với yêu cầu
cụ thể của dự án.
‒ Phát triển sản phẩm nhanh chóng: Với TailwindCSS, chúng ta không cần phải
viết CSS từ đầu hoặc tìm hiểu cú pháp của một framework CSS cụ thể. Chúng ta
có thể sử dụng các lớp CSS có sẵn để áp dụng kiểu và cấu trúc giao diện người

25