Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh chuyển đổi số và sự phát triển của công nghệ thông tin, việc ứng dụng các nền tảng trực tuyến vào hoạt động thương mại dịch vụ đã trở thành xu hướng tất yếu. Đối với ngành điện ảnh và dịch vụ giải trí, thói quen tiêu dùng của khách hàng có sự chuyển dịch rõ rệt từ phương thức mua vé trực tiếp tại quầy sang đặt vé trực tuyến qua Internet nhằm tiết kiệm thời gian, công sức và chủ động lựa chọn vị trí chỗ ngồi cũng như nắm bắt các chương trình ưu đãi. Về phía các đơn vị vận hành rạp chiếu phim, việc ứng dụng hệ thống số hóa giúp tối ưu hóa quy trình quản lý suất chiếu, phòng vé, ghế ngồi và kiểm soát doanh thu tập trung.

Từ thực tiễn đó, tác giả Nguyễn Đức Trung (ngành Công nghệ thông tin, Trường Đại học Phenikaa) đã thực hiện đồ án tốt nghiệp với đề tài "Xây dựng website đặt vé xem phim trực tuyến" dưới sự hướng dẫn của ThS. Vũ Quang Dũng.

Mục tiêu và nhiệm vụ nghiên cứu của đồ án được xác định cụ thể như sau:

  1. Nghiên cứu tổng quan về quy trình nghiệp vụ bán vé, quản lý rạp và hành vi người dùng trong hệ thống bán vé xem phim trực tuyến.
  2. Ứng dụng các kiến thức và công nghệ lập trình web front-end gồm HTML5, CSS3, JavaScript và thư viện ReactJS, kết hợp các công cụ quản lý trạng thái và giao tiếp dữ liệu qua REST API để thiết kế, xây dựng ứng dụng web.
  3. Hiện thực hóa hệ thống với 2 phân hệ chức năng rõ ràng: phân hệ người dùng (xem thông tin phim, tra cứu lịch chiếu theo cụm rạp, đặt vé trực tuyến, quản lý lịch sử đặt vé) và phân hệ quản trị viên (quản lý danh mục phim, quản lý cụm rạp, thiết lập lịch chiếu, quản lý người dùng và các giao dịch đặt vé).
  4. Phân tích, thiết kế hệ thống thông qua các mô hình UML (sơ đồ phân rã chức năng, biểu đồ Use Case, biểu đồ tuần tự, biểu đồ hoạt động) và kiểm thử giao diện trên môi trường hosting thực tế.

Đối tượng và phạm vi nghiên cứu của đề tài:

  • Đối tượng nghiên cứu: Quy trình phân tích, thiết kế và triển khai website đặt vé xem phim trực tuyến; cấu trúc dữ liệu và tương tác người dùng trên nền tảng Single Page Application (SPA).
  • Phạm vi nghiên cứu:
    • Về không gian và nghiệp vụ: Tập trung vào các nghiệp vụ đặt vé tại cụm rạp, quản trị lịch chiếu và danh sách phim; triển khai thử nghiệm trên môi trường máy chủ hosting.
    • Về mặt công nghệ: Tập trung vào phát triển phía máy khách (Client-side) sử dụng hệ sinh thái ReactJS kết nối với hệ thống REST API có sẵn; phạm vi lưu trữ phiên làm việc của người dùng được giới hạn thông qua cơ chế LocalStorage của trình duyệt web.

Cơ sở lý thuyết và phương pháp

Đồ án xây dựng dựa trên nền tảng lý thuyết phát triển ứng dụng web hiện đại và các công cụ lập trình giao diện người dùng:

  • Khung công nghệ nền tảng:

    • HTML5 & CSS3: Định hình cấu trúc và tạo phong cách giao diện hiển thị cho các thành phần trang web.
    • JavaScript (ES6+): Xử lý logic phía client, điều hướng sự kiện và thao tác dữ liệu động.
    • ReactJS (phiên bản hỗ trợ React Hooks): Thư viện xây dựng giao diện người dùng dựa trên kiến trúc Component, cơ chế JSX, quản lý luồng dữ liệu thông qua Props/State và tối ưu hóa hiệu năng cập nhật giao diện bằng Virtual DOM.
    • Redux Thunk & Axios: Thư viện gửi yêu cầu HTTP Client (GET, POST, PUT, DELETE) đến máy chủ và middleware xử lý các action bất đồng bộ (asynchronous actions) trong việc đồng bộ hóa dữ liệu từ REST API.
    • Formik & Yup: Bộ đôi thư viện quản lý trạng thái biểu mẫu (form state) và định nghĩa lược đồ (schema) để kiểm thực dữ liệu đầu vào (validation).
    • Thư viện UI: Tích hợp Ant Design, Material-UI (MUI) và Tailwind CSS nhằm chuẩn hóa các thành phần giao diện theo chuẩn thiết kế hiện đại.
    • LocalStorage (HTML5): Quản lý lưu trữ phiên làm việc (session), trạng thái đăng nhập và dữ liệu người dùng tạm thời phía máy khách.

  • Phương pháp nghiên cứu:

    • Phương pháp phân tích và thiết kế hệ thống hướng đối tượng: Sử dụng ngôn ngữ mô hình hóa thống nhất (UML) để phân tích yêu cầu, xây dựng sơ đồ phân rã chức năng, biểu đồ Use Case tổng quan/chi tiết, biểu đồ tuần tự (Sequence Diagram) và biểu đồ hoạt động (Activity Diagram).
    • Phương pháp thực nghiệm phát triển phần mềm: Cài đặt mã nguồn, cấu hình môi trường lập trình qua Visual Studio Code, quản lý phiên bản với Git/GitHub và bộ quản lý gói npm, tiến hành ráp nối các endpoint API và chạy thử nghiệm hệ thống.
    • Phương pháp trao đổi chuyên gia: Làm việc định kỳ, tiếp thu đánh giá và định hướng kỹ thuật từ giảng viên hướng dẫn (ThS. Vũ Quang Dũng) và giảng viên phản biện (TS. Mai Thúy Nga).

  • Nguồn dữ liệu: Dữ liệu hệ thống được cung cấp qua 4 nhóm REST API chính: API Quản lý đặt vé (QuanLyDatVe), API Quản lý người dùng (QuanLyNguoiDung), API Quản lý phim (QuanLyPhim), và API Quản lý rạp (QuanLyRap).

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình kiến trúc phân tầng phía client tương tác với dịch vụ backend qua giao thức RESTful. Việc phân quyền được chia thành 2 vai trò chính: Khách hàng (User) và Quản trị viên (Admin).

Nhóm chức năng Vai trò Mô tả chi tiết nghiệp vụ Ràng buộc kỹ thuật & Xử lý ngoại lệ
Xác thực & Tài khoản User / Admin Đăng ký tài khoản, đăng nhập, đổi mật khẩu, xem thông tin cá nhân và lịch sử đặt vé; Đăng xuất khỏi hệ thống. Kiểm tra trùng lặp email, định dạng số điện thoại, mật khẩu khớp; Đăng xuất sẽ xóa thông tin phiên trong LocalStorage.
Tra cứu thông tin User Xem danh sách phim đang chiếu, phim sắp chiếu; xem chi tiết nội dung, trailer, lịch chiếu theo từng cụm rạp. Dữ liệu đồng bộ qua API QuanLyPhim và QuanLyRap; lọc theo hệ thống rạp và suất chiếu.
Đặt vé xem phim User Chọn suất chiếu, lựa chọn sơ đồ ghế ngồi trực quan, kiểm tra giá vé và xác nhận đặt vé. Giới hạn: Mỗi lần chỉ được đặt tối đa 6 ghế; bắt buộc phải chọn ghế trước khi chuyển bước thanh toán.
Quản trị phim & Rạp Admin Thêm mới, cập nhật, xóa, tìm kiếm phim; quản lý danh sách hệ thống rạp, cụm rạp và lịch chiếu. Không được phép xóa hệ thống rạp nếu rạp đó đang có lịch chiếu phim hoạt động.
Quản trị người dùng Admin Tìm kiếm, xem danh sách, phân quyền chức vụ, thêm mới, sửa hoặc xóa tài khoản trong hệ thống. Ràng buộc: Không được xóa tài khoản người dùng nếu tài khoản đó đã phát sinh lịch sử giao dịch đặt vé.

Hệ thống sử dụng các thuật ngữ nghiệp vụ chuẩn mực trong lĩnh vực rạp chiếu phim:

  • Hệ thống rạp: Tập hợp các rạp chiếu phim thuộc cùng một tổ chức hoặc thương hiệu, hoạt động tại nhiều địa phương với dịch vụ đồng nhất.
  • Cụm rạp: Nhóm các phòng chiếu phim nằm tại cùng một địa điểm hoặc khu vực địa lý cụ thể thuộc một hệ thống rạp.
  • Lịch chiếu phim: Danh sách các suất chiếu cụ thể trong khung thời gian nhất định tại một cụm rạp, bao gồm thông tin về giờ chiếu, tên phim và mã phòng chiếu.

Nội dung chính theo từng chương

Mở đầu

Phần mở đầu nêu rõ tính cấp thiết của việc áp dụng tin học hóa vào đời sống kinh tế - xã hội, đặc biệt là tiềm năng của mô hình bán lẻ vé xem phim trực tuyến đối với các doanh nghiệp điện ảnh. Tác giả chỉ ra lợi ích kép: giúp khách hàng tiết kiệm thời gian, dễ dàng tiếp cận ưu đãi và chọn vị trí ghế; đồng thời hỗ trợ doanh nghiệp tối ưu chiến dịch quảng bá, mở rộng khả năng tiếp cận thị trường và quản lý doanh thu hiệu quả. Mục tiêu tổng quát của đồ án là xây dựng hoàn chỉnh một website đặt vé xem phim linh hoạt, dễ quản lý và thân thiện với người dùng dựa trên các công nghệ web hiện đại.

Chương 1: Tổng quan

Chương 1 trình bày tổng quan về đề tài, lợi ích và kiến trúc tổng thể của website đặt vé xem phim.

  • Phân tích lợi ích: Đối với doanh nghiệp, website là kênh quảng bá thương hiệu, tiếp cận khách hàng tiềm năng, tối ưu hóa SEO và tự động hóa quy trình phân phối vé. Đối với khách hàng, website mang lại tính thuận tiện, hiển thị thông tin phim/lịch chiếu đa dạng và hỗ trợ thanh toán an toàn.
  • Kiến trúc tổng thể: Bao gồm các phân vùng chức năng: Trang chủ, Lịch chiếu phim (chia theo phim đang chiếu/sắp chiếu), Danh sách cụm rạp trên toàn quốc, Trang chi tiết tin tức, Trang chi tiết phim, Trang đặt vé và chiến lược tối ưu hóa công cụ tìm kiếm (SEO).
  • Các yếu tố cốt lõi khi xây dựng: Xác định rõ 9 yếu tố cần chú trọng gồm: mục tiêu hệ thống, phân tích thị trường/đối thủ, chất lượng nội dung, thiết kế giao diện (UI/UX), tính tương thích đa thiết bị (Responsive), phân quyền đăng ký/đăng nhập, kiểm thử và sửa lỗi, triển khai máy chủ và theo dõi đo lường hiệu suất chuyển đổi.
  • Công nghệ và công cụ: Khái quát chi tiết về HTML, CSS, JavaScript; cấu trúc hoạt động 5 bước của ReactJS (Khởi tạo Component $\rightarrow$ Render Component $\rightarrow$ Tạo Virtual DOM $\rightarrow$ So sánh Virtual DOM với Real DOM $\rightarrow$ Cập nhật Real DOM); ứng dụng của LocalStorage trong lưu trữ cặp khóa-giá trị (key-value); vai trò của Axios và Redux Thunk trong xử lý logic bất đồng bộ; cùng các thư viện hỗ trợ như Formik, Yup, Ant Design, Material-UI và Tailwind CSS.

Chương 2: Phân tích hệ thống

Chương 2 là trọng tâm kỹ thuật của đồ án, tập trung vào việc mô hình hóa yêu cầu và nghiệp vụ của hệ thống:

  • Nội dung công việc & Yêu cầu hệ thống: Xác định chi tiết các tiêu chuẩn giao diện thân thiện cho người dùng, bảng phân quyền hệ thống cho User và Admin, các yêu cầu an toàn thông tin và tính toàn vẹn dữ liệu qua xác thực tài khoản.
  • Sơ đồ phân rã chức năng: Hệ thống được phân rã thành 7 phân hệ chính: Quản lý hệ thống, Quản lý danh sách phim, Quản lý lịch chiếu phim, Quản lý tài khoản, Quản lý hệ thống rạp, Quản lý thông tin cá nhân và Đặt vé.
  • Đặc tả Use Case: Mô hình hóa Use Case tổng quan và 9 bảng đặc tả Use Case chi tiết (Đăng ký/đăng nhập, Quản lý hệ thống rạp, Quản lý danh sách phim, Quản lý tài khoản, Quản lý thông tin cá nhân, Quản lý lịch chiếu phim, Đặt vé phim, Đăng xuất). Mỗi bảng đều xác định rõ: Tác nhân (Actor), Mô tả, Điều kiện tiên quyết, Luồng sự kiện chính và Luồng sự kiện rẽ nhánh (A1) để xử lý các lỗi dữ liệu.
  • Biểu đồ tuần tự và Biểu đồ hoạt động: Xây dựng chuỗi tương tác tuần tự và lưu đồ hoạt động cho từng chức năng như: đăng ký, đăng nhập, quản lý rạp, quản lý phim, quản lý tài khoản, quản lý thông tin cá nhân, quản lý lịch chiếu và quy trình đặt vé.
  • Cấu trúc API: Hệ thống hóa 4 nhóm API dịch vụ: API Quản lý đặt vé (QuanLyDatVe), API Quản lý người dùng (QuanLyNguoiDung), API Quản lý phim (QuanLyPhim), API Quản lý rạp (QuanLyRap).

Chương 3: Phát triển website

Chương 3 trình bày kết quả hiện thực hóa giao diện và trải nghiệm thực tế của ứng dụng web:

  • Giao diện phân hệ người dùng:
    • Trang chủ: Hiển thị banner quảng cáo, danh sách phim nổi bật, thanh điều hướng nhanh.
    • Trang đăng ký / đăng nhập: Form tiếp nhận thông tin người dùng với cơ chế kiểm tra lỗi trực quan.
    • Trang thông tin tài khoản & Lịch sử đặt vé: Cho phép người dùng theo dõi chi tiết các giao dịch vé đã đặt (tên phim, số ghế, rạp chiếu, thời gian, giá tiền).
    • Trang chi tiết phim & Đặt vé: Trình chiếu trailer, tóm tắt nội dung, đánh giá, danh sách suất chiếu theo rạp và giao diện chọn ghế trực quan.
  • Giao diện phân hệ quản trị (Admin Dashboard):
    • Trang quản lý người dùng: Bảng dữ liệu người dùng, form thêm mới và chỉnh sửa quyền hạn tài khoản.
    • Trang quản lý danh sách phim: Danh mục phim, công cụ cập nhật poster, trailer và nội dung mô tả.
    • Trang quản lý hệ thống rạp, cụm rạp và lịch chiếu: Quản lý thông tin địa điểm rạp và điều phối thời gian chiếu phim.

Chương 4: Kết luận

Chương 4 tổng kết các kết quả kỹ thuật đã hoàn thành, nêu rõ hướng phát triển hoàn thiện tính năng trong tương lai và đề cập đến vấn đề đạo đức, trách nhiệm nghề nghiệp của người làm công nghệ thông tin trong việc bảo vệ dữ liệu người dùng và phát triển phần mềm an toàn.

Kết quả và đóng góp

  • Kết quả thực tế đạt được:

    • Xây dựng thành công ứng dụng web đặt vé xem phim trực tuyến với đầy đủ các tính năng cơ bản theo mục tiêu đề ra cho cả 2 đối tượng người dùng (Khách hàng và Quản trị viên).
    • Hoàn thiện hệ thống phân tích thiết kế với 7 chức năng chính, 9 bảng mô tả use case chi tiết kèm luồng rẽ nhánh và hệ thống biểu đồ UML hoàn chỉnh.
    • Tích hợp thành công 4 phân nhóm REST API (QuanLyDatVe, QuanLyNguoiDung, QuanLyPhim, QuanLyRap), xử lý mượt mà việc hiển thị dữ liệu động, đặt vé và lưu trữ phiên qua LocalStorage.
    • Thiết lập các quy tắc ràng buộc nghiệp vụ chặt chẽ: chặn hành vi xóa dữ liệu rạp đang có lịch chiếu hoặc người dùng đã có đơn đặt vé; giới hạn mỗi giao dịch chỉ được chọn tối đa 6 ghế.

  • Đóng góp của đồ án:

    • Cung cấp một tài liệu phân tích thiết kế hệ thống chi tiết cho mô hình bán vé rạp chiếu phim, kết nối chặt chẽ giữa nghiệp vụ thực tế và thiết kế ca sử dụng (Use Case).
    • Thể hiện phương pháp tích hợp đồng bộ các thư viện giao diện người dùng (Ant Design, MUI, Tailwind CSS) với kiến trúc ReactJS, Redux Thunk và Axios, tạo tài liệu tham khảo thực tế cho các dự án xây dựng ứng dụng Single Page Application (SPA).

Hạn chế và hướng nghiên cứu tiếp

  • Hạn chế của đề tài (dựa trên văn bản và nhận xét phản biện):

    • Về mặt học thuật và trình bày: Theo nhận xét của giảng viên phản biện (TS. Mai Thúy Nga), báo cáo còn một số lỗi chính tả và dấu câu; việc phân rã sơ đồ use case mức 2 đối với ca sử dụng "Nhập thông tin" là chưa thực sự cần thiết mà nên lồng ghép vào mô tả luồng sự kiện; các biểu đồ tuần tự cần được phân rã chi tiết hơn đối với các lớp thành phần thay vì chỉ gom chung vào đối tượng "Hệ thống".
    • Về mặt tính năng: Hệ thống quản lý bán vé chủ yếu tập trung vào phần tương tác máy khách (Front-end) kết nối API có sẵn; tính năng thanh toán trực tuyến qua các cổng ví điện tử (Momo, ZaloPay, ShopeePay) mới dừng lại ở bước mô phỏng giao dịch theo luồng nghiệp vụ mà chưa tích hợp cổng thanh toán Sandbox/Production thực tế.

  • Hướng nghiên cứu và phát triển tiếp:

    • Tiếp tục hoàn thiện và phát triển các tính năng nâng cao nếu được đầu tư nguồn lực.
    • Tích hợp chính thức các cổng thanh toán trực tuyến và nâng cấp cơ chế xác thực bảo mật tài khoản.
    • Chuẩn hóa và tối ưu hóa sâu hơn các biểu đồ phân tích thiết kế hệ thống phần mềm.

Giá trị tham khảo

Đồ án là nguồn tư liệu học thuật và kỹ thuật phù hợp cho:

  • Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Tham khảo quy trình phân tích thiết kế hướng đối tượng bằng UML cho một hệ thống thương mại dịch vụ; học hỏi cách tổ chức dự án ReactJS kết hợp Redux Thunk, Axios, Formik và các thư viện UI (Tailwind CSS, Ant Design, Material-UI).
  • Người làm đề tài về hệ thống bán vé hoặc thương mại điện tử: Có thể tham khảo trực tiếp cách xây dựng các bảng đặc tả Use Case chi tiết (luồng chính, luồng rẽ nhánh A1) và các ràng buộc toàn vẹn dữ liệu nghiệp vụ rạp chiếu phim trong Chương 2.

Câu hỏi thường gặp

1. Hệ thống quy định số lượng ghế tối đa mà một người dùng có thể đặt trong một lượt giao dịch là bao nhiêu?
Theo đặc tả Use Case đặt vé phim (Bảng 2.9, luồng sự kiện rẽ nhánh A1), hệ thống thiết lập giới hạn mỗi lần người dùng chỉ được đặt tối đa 6 ghế. Nếu chọn vượt quá số lượng này, hệ thống sẽ phát cảnh báo: "Mỗi lần chỉ được đặt tối đa 6 ghế".

2. Quản trị viên gặp những ràng buộc nghiệp vụ nào khi thực hiện thao tác xóa một hệ thống rạp hoặc một tài khoản người dùng?
Dựa trên đặc tả Use Case tại Bảng 2.4 và Bảng 2.6:

  • Đối với hệ thống rạp: Không thể xóa hệ thống rạp nếu rạp đó đang có lịch chiếu phim hoạt động (Hệ thống sẽ thông báo: "Không thể xóa hệ thống rạp này vì có lịch chiếu phim").
  • Đối với tài khoản người dùng: Không thể xóa tài khoản nếu người dùng đó đã từng thực hiện đặt vé trên website (Hệ thống sẽ thông báo: "Người dùng này đã đặt vé xem phim không thể xóa!").

3. Cơ chế quản lý phiên đăng nhập và đăng xuất của người dùng trên website được xử lý như thế nào?
Hệ thống sử dụng LocalStorage của HTML5 để lưu trữ thông tin phiên làm việc sau khi đăng nhập thành công. Khi người dùng thực hiện chức năng đăng xuất (Use case đăng xuất, Bảng 2.10), hệ thống sẽ tiến hành xóa dữ liệu phiên trong LocalStorage và đưa người dùng ra khỏi trạng thái xác thực.

4. Dữ liệu của website được phân chia và quản lý qua các nhóm API nào?
Hệ thống kết nối với 4 nhóm REST API chính gồm: API Quản lý đặt vé (QuanLyDatVe), API Quản lý người dùng (QuanLyNguoiDung), API Quản lý phim (QuanLyPhim) và API Quản lý rạp (QuanLyRap).

5. Giảng viên phản biện (TS. Mai Thúy Nga) đã chỉ ra những điểm cần cải thiện nào trong báo cáo đồ án?
Giảng viên phản biện đã chỉ ra 3 điểm hạn chế về mặt nội dung và hình thức:

  • Cần chú ý sửa các lỗi đặt sai dấu câu và ngữ pháp trong văn bản.
  • Không cần thiết phải phân rã sơ đồ use case mức 2 đối với use case "Nhập thông tin" mà nên mô tả chi tiết trong luồng sự kiện.
  • Các biểu đồ tuần tự cần có đầy đủ các loại lớp, nên phân rã chi tiết đối tượng "Hệ thống".

Kết luận

Đồ án tốt nghiệp "Xây dựng website đặt vé xem phim trực tuyến" của sinh viên Nguyễn Đức Trung đã hoàn thành đầy đủ các mục tiêu cốt lõi về phân tích, thiết kế và lập trình giao diện ứng dụng web đặt vé. Thông qua việc ứng dụng hiệu quả công nghệ ReactJS kết hợp Redux Thunk, Axios và hệ thống REST API, tác giả đã hiện thực hóa thành công các tính năng nghiệp vụ cho cả người dùng và quản trị viên với giao diện trực quan, khoa học. Mặc dù còn một số điểm cần hoàn thiện về chuẩn hóa biểu đồ UML và tích hợp cổng thanh toán thực tế, đồ án vẫn là một tài liệu tham khảo có giá trị ứng dụng cao cho sinh viên ngành Công nghệ thông tin trong việc phát triển các ứng dụng web bán hàng và dịch vụ trực tuyến.