Đồ án tốt nghiệp: Xây dựng website đặt vé xem phim và đánh giá phim bằng Angular và ASP.NET Core

Khám phá đồ án tốt nghiệp chi tiết về xây dựng website đánh giá phim và đặt vé xem phim bằng Angular và ASP.NET Core. Tìm hiểu công nghệ và quy trình phát

• Tác giả: Tôn Nữ Như Quỳnh
• Người hướng dẫn: PhD. Lê Văn Vinh
• Trường học: Trường Đại học Công nghệ Giáo dục TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ Thông tin
• Đề tài: Xây dựng website đánh giá phim và đặt vé xem phim bằng Angular và ASP.NET Core
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2021
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Tổng quan về xây dựng website đặt vé và đánh giá phim

Xây dựng một website đặt vé xem phim và đánh giá phim là một dự án phần mềm điển hình, đòi hỏi sự kết hợp giữa giao diện người dùng hiện đại và backend mạnh mẽ. Kiến trúc Single Page Application (SPA) thường được ưu tiên để mang lại trải nghiệm mượt mà. Ở phía client, framework Angular cung cấp một nền tảng vững chắc để phát triển giao diện động và tương tác. Ở phía server, ASP.NET Core hoạt động như một backend linh hoạt, xây dựng các RESTful API để xử lý logic nghiệp vụ và kết nối cơ sở dữ liệu. Sự kết hợp này tạo ra một hệ thống toàn diện, cho phép người dùng duyệt phim, đọc đánh giá, chọn ghế và thanh toán trực tuyến một cách tiện lợi. Dự án không chỉ giải quyết bài toán kỹ thuật mà còn hướng tới trải nghiệm người dùng liền mạch.

1.1. Kiến trúc SPA với Angular

Angular là một framework JavaScript mạnh mẽ được phát triển bởi Google, lý tưởng để xây dựng các ứng dụng SPA. Trong dự án website phim, Angular chịu trách nhiệm quản lý toàn bộ giao diện phía người dùng. Các component tái sử dụng giúp xây dựng giao diện phức tạp từ các phần nhỏ hơn, như danh sách phim, chi tiết suất chiếu hay form đặt vé. Hệ thống routing của Angular cho phép điều hướng giữa các trang mà không cần tải lại toàn bộ trang, tạo cảm giác ứng dụng desktop. Việc sử dụng TypeScript giúp mã nguồn dễ bảo trì và phát triển hơn trong các dự án lớn.

1.2. Backend với ASP.NET Core và API

ASP.NET Core là framework đa nền tảng, hiệu suất cao để xây dựng các dịch vụ web hiện đại. Trong dự án này, nó đóng vai trò backend, cung cấp các API RESTful để phục vụ dữ liệu cho ứng dụng Angular. Các API này xử lý các thao tác như lấy danh sách phim, xác thực người dùng, lưu đánh giá và xử lý đơn đặt vé. ASP.NET Core tích hợp tốt với Entity Framework Core để tương tác với cơ sở dữ liệu SQL Server. Kiến trúc này tách biệt rõ ràng giữa frontend và backend, giúp hệ thống dễ mở rộng, bảo trì và có thể phục vụ nhiều loại client khác nhau.

II. Phân tích vấn đề và thách thức kỹ thuật

Việc phát triển một hệ thống đặt vé phim trực tuyến không đơn giản. Nhiều vấn đề kỹ thuật và nghiệp vụ cần được giải quyết. Đầu tiên là bảo mật. Hệ thống xử lý thông tin nhạy cảm như thông tin tài khoản và thanh toán của người dùng, do đó phải áp dụng các cơ chế bảo mật mạnh như JWT (JSON Web Tokens) để xác thực và phân quyền. Thứ hai là khả năng mở rộng. Hệ thống phải chịu tải lớn vào giờ cao điểm khi có phim bom tấn ra mắt, đòi hỏi kiến trúc backend phải được tối ưu. Thứ ba là trải nghiệm người dùng. Quy trình đặt vé, từ chọn phim, chọn ghế đến thanh toán, phải nhanh chóng, trực quan và không lỗi. Cuối cùng, tích hợp cổng thanh toán bên thứ ba (như PayPal) tại thị trường Việt Nam cũng đặt ra thách thức về tính tương thích và tuân thủ quy định.

2.1. Yêu cầu về bảo mật và xác thực

Bảo mật là yêu cầu tiên quyết cho một website thương mại điện tử. Hệ thống cần bảo vệ tài khoản người dùng và dữ liệu giao dịch. Các mối đe dọa phổ biến bao gồm tấn công Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF) và đánh cắp thông tin đăng nhập. Giải pháp là triển khai xác thực dựa trên token, cụ thể là JWT. Khi người dùng đăng nhập, server sẽ trả về một token chứa thông tin người dùng đã mã hóa. Client sẽ gửi token này trong header của mỗi request API. Server chỉ cần xác thực token mà không cần lưu trữ session, giúp tăng tính stateless và khả năng mở rộng ngang của hệ thống.

2.2. Bài toán tích hợp thanh toán và quản lý trạng thái

Tích hợp cổng thanh toán quốc tế như Stripe hay PayPal đòi hỏi quá trình xử lý phức tạp. Hệ thống phải điều hướng người dùng đến trang thanh toán của bên thứ ba, xử lý callback (phản hồi) sau thanh toán và cập nhật trạng thái đơn vé một cách an toàn. Một thách thức khác là quản lý trạng thái đặt vé thời gian thực. Khi nhiều người cùng đặt một suất chiếu, hệ thống phải ngăn chặn tình trạng đặt cùng một ghế. Điều này đòi hỏi cơ chế khóa lạc quan hoặc bi quan ở tầng cơ sở dữ liệu để đảm bảo tính toàn vẹn dữ liệu, tránh bán vé quá số lượng chỗ ngồi.

III. Giải pháp triển khai với Angular và ASP

Để giải quyết các vấn đề trên, kiến trúc kết hợp Angular và ASP.NET Core được áp dụng một cách chiến lược. Ở phía client, Angular quản lý trạng thái ứng dụng phức tạp, đảm bảo giao diện cập nhật tức thời khi người dùng tương tác. Các service trong Angular xử lý việc gọi API đến backend. Ở phía server, ASP.NET Core xây dựng các controller chuyên biệt để xử lý từng nhóm chức năng (ví dụ: MovieController, BookingController). Middleware trong ASP.NET Core được sử dụng để xử lý cross-cutting concerns như ghi log, xử lý lỗi toàn cục và quan trọng nhất là xác thực JWT. Cổng thanh toán được tích hợp thông qua một service riêng biệt, tách biệt logic thanh toán khỏi logic nghiệp vụ chính.

3.1. Triển khai xác thực và phân quyền bằng JWT

Giải pháp xác thực được triển khai theo chu trình: Người dùng gửi thông tin đăng nhập đến một endpoint (ví dụ: /api/auth/login) của ASP.NET Core. Server xác minh thông tin và nếu hợp lệ, tạo ra một JWT chứa claims như UserId, Role và thời gian hết hạn. Token này được trả về client. Ứng dụng Angular lưu token này (thường trong localStorage) và đính kèm nó vào header 'Authorization' của mọi request API tiếp theo. Ở phía server, một middleware xác thực sẽ giải mã và xác thực token này trước khi cho phép request đi đến controller tương ứng. Phân quyền được thực hiện dựa trên vai trò (role) trong claims của token.

3.2. Xây dựng quy trình đặt vé và thanh toán

Quy trình đặt vé được thiết kế dưới dạng một wizard nhiều bước trên giao diện Angular: Chọn phim -> Chọn suất chiếu -> Chọn ghế -> Xác nhận và thanh toán. Trạng thái giỏ vé được lưu trữ tạm thời ở client. Khi người dùng tiến hành thanh toán, ứng dụng Angular sẽ gọi API tới ASP.NET Core để khởi tạo giao dịch. Backend sẽ tạo một đơn hàng tạm thời, giữ chỗ ghế và gọi API của cổng thanh toán (như PayPal) để tạo một thanh toán. Người dùng được chuyển hướng đến trang thanh toán của PayPal. Sau khi thanh toán thành công, PayPal gửi một callback đến một webhook được định nghĩa trước trong ASP.NET Core. Backend xử lý callback này, xác nhận thanh toán và cập nhật trạng thái đơn vé thành 'Đã thanh toán' trong cơ sở dữ liệu.

IV. Kết luận và ứng dụng thực tiễn của dự án

Dự án xây dựng website đặt vé xem phim và đánh giá phim với Angular và ASP.NET Core đã hoàn thành các mục tiêu đề ra. Hệ thống cung cấp một nền tảng toàn diện cho phép người dùng tương tác với nội dung điện ảnh và thực hiện giao dịch trực tuyến. Kiến trúc frontend-backend tách biệt đảm bảo tính linh hoạt và khả năng bảo trì cao. Các giải pháp kỹ thuật như JWT và tích hợp cổng thanh toán đã giải quyết hiệu quả các thách thức về bảo mật và nghiệp vụ. Dự án không chỉ là một bài tập học thuật mà còn là một sản phẩm có tiềm năng ứng dụng thực tế. Nó có thể được triển khai cho các rạp chiếu phim nhỏ hoặc là nền tảng cho một startup trong lĩnh vực giải trí.

4.1. Đánh giá ưu điểm của ngăn xếp công nghệ

Sự kết hợp Angular và ASP.NET Core mang lại nhiều ưu điểm. Angular cung cấp một framework có cấu trúc rõ ràng, giúp phát triển giao diện phức tạp một cách có tổ chức. Các tính năng như two-way data binding, dependency injection và hệ thống module mạnh mẽ tăng tốc độ phát triển. Ở phía server, ASP.NET Core nổi tiếng với hiệu suất cao, hỗ trợ dependency injection và tích hợp sâu với hệ sinh thái Microsoft. Việc sử dụng C# giúp viết mã an toàn kiểu dữ liệu. Cặp đôi này tạo thành một ngăn xếp công nghệ hiện đại, được cộng đồng hỗ trợ rộng rãi, phù hợp cho các dự án doanh nghiệp yêu cầu độ tin cậy và khả năng mở rộng.

4.2. Hướng phát triển và mở rộng trong tương lai

Hệ thống hiện tại có tiềm năng mở rộng đáng kể. Về mặt tính năng, có thể tích hợp hệ thống gợi ý phim (Recommendation System) sử dụng các thuật toán machine learning để phân tích lịch sử xem và đánh giá, từ đó đề xuất phim phù hợp cho từng người dùng. Về mặt kỹ thuật, kiến trúc có thể được chuyển đổi sang microservices để tách riêng các dịch vụ như dịch vụ thanh toán, dịch vụ đánh giá và dịch vụ quản lý suất chiếu. Điều này giúp mỗi dịch vụ có thể được phát triển, triển khai và mở rộng một cách độc lập. Việc tích hợp thêm các kênh thanh toán nội địa phổ biến tại Việt Nam cũng là một hướng phát triển cần thiết để tăng tính ứng dụng.

Trích đoạn nội dung tài liệu

HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING  GRADUATE THESIS BUILD A MOVIE REVIEWS AND TICKETS BOOKING WEBSITE WITH ANGULAR AND ASP .NET CORE STUDENT NAME: STUDENT ID TON NU NHU QUYNH 17110214 NGUYEN NGOC TU DUYEN 17110116 School Year: 2017-2021 Major: Information Technology Advisor: PhD. LE VAN VINH Tp. Ho Chi Minh, July 2021 Graduate Thesis ASSURANCE We assure that this project is our own implementation. We do not copy, use any material or source code of others without specifying the source.

We assume responsibility for violations. Ho Chi Minh, July 19th 2020 Tôn Nữ Như Quỳnh Nguyễn Ngọc Tú Duyên Graduate Thesis MANY THANKS In this fact, there are no successes that are not associated with support or assistance, whether more or less, directly or indirectly by others. Now I would like to send this sincere thanks to PhD. Lê Văn Vinh, who directly guided us to complete this project, has supported and transmitted motivation to us in the process of choosing topics, instructions and comments.

Although we do not ask much, but when asking the teacher for help, it is the motivation for us to complete the course. Without the instructions and practical experiences of the teacher, our group think this report will be difficult to complete on time. Once again, I would like to thank the teacher. I also would like to thank the teachers of the Faculty of Information Technology, Ho Chi Minh City University of Technical Education for teaching the student groups to report, help and support answers so that our report can complete the project implementation process.

Due to limited time, limited knowledge and many other worries, there is an inevitable problem, so I look forward to receiving your valuable suggestions for my knowledge. more complete later. We sincerely thank you. Ho Chi Minh, July 19th 2021 Tôn Nữ Như Quỳnh Nguyễn Ngọc Tú Duyên i Graduate Thesis SUMMARY INFORMATION BY ENGLISH 1.

Research issues - Learn about similar systems, analyze to find the strengths and suitability to apply. - Learn about Single Page Application (Angular), ASP. Net Core to solve the problem of service providers using APIs for movie rating and tickets booking website. - Learn about Recommendation System to suggest some suitable movies for user.

Issues arising - Security is an important requirement for a real website. - Stripe payment method is not applied in Viet Nam yet. Problem solving - Use JWT to improve security requirements. - Replace with Paypal payment method.

Results - Movie Review and Tickets Booking include: website for end – user side and website for admin side. - Easy to use, user-friendly interface. - Personalization of users through suggesting movies that may be suitable. - Easy to manage, repair and expand.

ii Graduate Thesis SUMMARY INFORMATION BY VIETNAMESE 1. Các vấn đề nghiên cứu - Tìm hiểu về các hệ thống tương tự, phân tích để tìm ra điểm mạnh và phù hợp để áp dụng. - Tìm hiểu về Single Page Application (Angular), ASP. Net Core để giải quyết vấn đề cung cấp dịch vụ API cho hệ thống đánh giá phim và đặt vé.

- Tìm hiểu về Recommendation System (Hệ thống gợi ý) để gợi ý một số bộ phim phù hợp với user. Các vấn đề phát sinh - Bảo mật là một trong những yêu cầu quan trọng cho website thực tế. - Phương thức thanh toán Stripe chưa được hỗ trợ tại Việt Nam. Các phương pháp giải quyết vấn đề - Sử dụng JWT để cải thiện yêu cầu bảo mật cho website.

- Thay thế bằng phương thức thanh toán Paypal. Kết quả đạt được - Hệ thống Movie Review and Tickets Booking bao gồm: website cho phía người dùng cuối và website cho phía admin. - Giao diện dễ sử dụng, thân thiện với người dùng. - Tính cá nhân hóa cho user thông qua việc gợi ý các bộ phim có thể phù hợp.

- Dễ dàng quản lý, sửa chữa và mở rộng. iii Graduate Thesis Table of Contents MANY THANKS .i SUMMARY INFORMATION BY ENGLISH .ii SUMMARY INFORMATION BY VIETNAMESE. iii ABBREVIATION LIST. viii TABLE LIST .ix FIGURE LIST.

1 Urgency and objectives of project. The urgency of project. 1 Objects, scope and methods of research. SURVEY AND USER REQUIREMENT.

Actor of system. Document Management System. Non-functional Requirement. 105 Overview of ASP.

Introduction to ASP. 105 iv Graduate Thesis 3. Introduction to Web APIs in ASP. Advantages of ASP.NET Core in Project.

Introduction to Angular. Angular in Project. Introduce to Recommendation System. Matrix Factorization Algorithm.

Advantages of Matrix Factorization. Recommendation System with MF in Project. 109 Json Web Token. Introduce to Json Web Token.

Json Web Token in Project. Class diagram description of “CinemaChain_API”. Class digram description of “MovieReviewsAndTickets”. Write Review and Rate.

Search Movies and Post. Update Movie’s Details. Share Post to Facebook. Write Review and Rate.

150 State Machine Diagram. Movie Reviews & Tickets API. End-user Website. IMPLEMENTATION AND TESTING.

176 Tools in Project. 177 Technologies in Project. 180 vi Graduate Thesis Chapter 6. 191 vii Graduate Thesis ABBREVIATION LIST UC: Use case MRATB-US: Movie Rating And Ticket Booking – User Side MRATB-AS: Movie Rating And Ticket Booking – Admin Side API: Application Programming Interface JWT: Json Web Token RS: Recommender Systems CF: Collaborative Filtering MF: Matrix Factorization EF Core: Entity Framework Core SCU: Screen User SCA: Screen Admin MLModels: Machine Learning Models SEO: Search Engine Optimization viii Graduate Thesis TABLE LIST Table 2.

Super Admin’s functions. Authorized User functions. Description for MRATB_US Login. Description for MRATB_US Reset password.

Description for MRATB_US Like movie. Description for MRATB_US Write a review and rate. Description for MRATB_US Like or Dislike a review. Description for MRATB_US Logout.

Description for MRATB_US Update profile. Description for MRATB_US Change password. Description for MRATB_US View watchlist. Description for MRATB_US View order history.

Description for MRATB_US Edit review. Description for MRATB_US Delete review. Description for MRATB_US Register. Description for MRATB_US View upcoming movies.

Description for MRATB_US View movies in theaters. Description for MRATB_US View movie's details. Description for MRATB_US View movie's showtimes. Description for MRATB_US Book tickets.

Description for MRATB_US Search movies. Description for MRATB_US View cinemas. Description for MRATB_US View cinema's details. Description for MRATB_US View cinema chain.

Description for MRATB_US View post. Description for MRATB_AS Add movie. Description for MRATB_AS Update movie's details. Description for MRATB_AS Update movie's casts.

Description for MRATB_AS Delete movie. Description for MRATB_AS Block user. Description for MRATB_AS Unblock user .64 ix Graduate Thesis Table 2. Description for MRATB_AS Delete user.

Description for MRATB_AS Create task. Description for MRATB_AS Edit task. Description for MRATB_AS View post. Description for MRATB_AS Approve post.

Description for MRATB_AS Add cinema chain. Description for MRATB_AS Update cinema's information. Description for MRATB_AS Delete cinema chains. Description for MRATB_AS Add admin.

Description for MRATB_AS Delete admin. Description for MRATB_AS Block admin. Description for MRATB_AS Unblock admin. Description for MRATB_AS Add cinemas.

Description for MRATB_AS Delete cinema. Description for MRATB_AS Add category. Description for MRATB_AS Create post. Description for MRATB_AS Delete post.

Description for MRATB_US Edit post. Description for MRATB_AS Review post. Description for MRATB_US Send post. Description for MRATB_US Accept task.

Description for class Cinema. Description for class CinemaChain. Description for class City. Description for class MoviesInCinemaChain.

Description for class Order. Description for class Room. Description for class RoomType. Description for class ScreenFormat.

Description for class Seat. Description for class SeatInOrder. Description for class SeatType. Description for class SeatTypeInChain.

Description for class Showtime. Description for class CheckoutInfo. Description for class User .119 x Graduate Thesis Table 4. Description for class Account.

Description for class Cast. Description for class Cinema. Description for class CinemaChain. Description for class Genre.

Description for class Language. Description for class Movie. Description for class MovieLike. Description for class MovieStatus.

Description for class Order. Description for class Review. Description for class ReviewLike. Description for class Role.

Description for class SeatsInOrder. Description for class Notification. Description for class Post. Description for class Task.

Description for class PostType. Description for class PostTheme. Influence of Constraint on User uniqueness. Influence of Constraint on Posting a review.

Influence of Constraint on Creating Admin/ Writer account. Influence of Constraint on Managing accounts. Influence of Constraint on Accepting task. Influence of Constraint on Accepting task.

Influence of Constraint on Editing task. Component of CinemaChainAPI description. Component of MainBackEndAPI description. List of screens in user website.

End user’s navbar objects. Movies In Theater Screen’s objects. Seats Screen’s objects. List of screens in admin website.

Admin’s navbar objects. Manage Accounts Screen’s objects. Manage Movies Screen’s objects .174 xi Graduate Thesis Table 5. Tools using for project.

Technologies using for project. Test results of Login function. Test results of Book tickets function. Test results of Add a movie function .187 xii Graduate Thesis FIGURE LIST Figure 2.

Overview website functionality. Book tickets function. Usecase diagram for Admin's system. Usecase diagram for End – user’s system.

Json web token structure. Class diagram of CinemaChainAPI. Class diagram of MovieReviews&TicketsAPI. Sequence diagram Login function.

Sequence diagram Add movie function. Sequence diagram Write review and rate function. Sequence diagram Book tickets function. Sequence diagram Search Movies and Posts function.

Sequence diagram Change Password function. Sequence diagram Update Movie’s Details function. Sequence diagram Share Post to Facebook function. Sequence diagram Block Admin function.

Sequence diagram Send Post function. Sequence diagram Register function. Sequence diagram Add Admin function. Sequence diagram Create Post function.

Sequence diagram Create Task function. Sequence diagram Accept Task function. Database diagram of CinemaChainAPI. Database diagram of MainBackendA.

Activity diagram Add movie function. Activity diagram Write review and rate function. State machine diagram Login function. State machine diagram Book tickets function.

Component diagram of CinemaChainAPI. Component diagram of MainbackendAPI. Screen flow for Guest in End user website .157 xiii Graduate Thesis Figure 4. Screen flow for Authorized user in End user website.

Screen flow for Writer in End user website. Navbar of Guest. Navbar of Authorized user. SCU002 - Movies In Theater Screen.

SCU005a - Seats Screen. Screen flow for Admin in Admin website. Screen flow for Super Admin in Admin website. Navbar of Admin.

Navbar of Super Admin. SCA004 - Manage Accounts Screen. Dialog Add Admin/Writer of SCA004. SCA005 - Manage Movies Screen’s objects.

Overview of architectural design for system. Expected & Actual result of TC_LI_01. Expected & Actual result of TC_LI_02. Expected & Actual result of TC_LI_03.

Expected & Actual result of TC_BT_01. Expected & Actual result of TC_BT_02. Expected & Actual result of TC_AM_01. Expected & Actual result of TC_AM_02 .189 xiv Graduate Thesis Chapter 1.

INTRODUCTION Urgency and objectives of project 1. The urgency of project Sometimes you see a movie coming out and find it interesting, but don't know if its content is right for you? You want reviews from people who have seen it? Or you simply want to know what the movie is about before taking the time to watch.