Xây dựng website đặt vé xem phim online

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

Ngày nay, việc ứng dụng công nghệ thông tin để tối ưu hóa trải nghiệm người dùng là yếu tố then chốt trong mọi lĩnh vực Trong ngành rạp chiếu phim, nhu cầu này càng trở nên thiết yếu khi nhu cầu giải trí của người dùng ngày càng tăng, dẫn đến lượng người xem ngày một lớn Điều này cho thấy tiềm năng và sức ảnh hưởng mạnh mẽ của lĩnh vực rạp chiếu phim.

Nhu cầu sử dụng các trang đặt vé trực tuyến ngày càng tăng cao trên toàn cầu, dần thay thế hình thức đặt vé thủ công truyền thống Với nhịp sống bận rộn hiện nay, việc đặt vé trực tuyến trở thành lựa chọn ưu tiên cho người dùng nhờ vào sự tiện lợi và khả năng truy cập mọi lúc, mọi nơi.

Nhận thức được tầm quan trọng của chuyển đổi số trong việc đặt vé trực tuyến, nhóm nghiên cứu đã quyết định chọn đề tài "Xây dựng website đặt vé xem phim online" cho Khóa luận tốt nghiệp.

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

Cung cấp giải pháp đặt vé online cho rạp chiếu phim giúp khách hàng tiết kiệm thời gian, giảm thiểu tình trạng chờ đợi và xếp hàng Quy trình chọn vé, đặt vé và thanh toán trở nên thuận tiện hơn, mang lại trải nghiệm tốt cho người dùng.

Quản lý vé và doanh thu trở nên dễ dàng hơn so với phương pháp bán vé truyền thống Thông tin và thống kê được trình bày một cách trực quan, giúp người quản lý theo dõi hiệu quả hơn.

Cách tiếp cận và phương pháp nghiên cứu

Phạm vi nghiên cứu

Nhóm sinh viên đã xác định phạm vi nghiên cứu của mình và thực hiện các quy tắc liên quan Dưới đây là các phạm vi mà nhóm đã liệt kê:

Nhóm tập trung vào việc áp dụng công nghệ hiện đại trong phát triển web, sử dụng Spring Boot cho back-end và ReactJS cho front-end, cùng với MySQL làm cơ sở dữ liệu Ngoài ra, nhóm cũng khai thác các công nghệ hỗ trợ như Circle CI để tối ưu hóa quy trình phát triển Từ đó, các thành viên vận dụng kỹ năng lập trình và kiến thức đã học để xây dựng cấu trúc và chức năng cho trang web một cách hiệu quả.

Website phục vụ đối tượng người dùng bao gồm khách hàng và thành viên đã đăng ký tài khoản Đồng thời, nó cũng nhắm đến các rạp chiếu phim trong nước và các hệ thống rạp lớn tại Việt Nam.

Website hoạt động trong lĩnh vực giải trí, chuyên cung cấp dịch vụ đặt vé xem phim tại các rạp Quy trình đặt vé và thanh toán được thiết kế để giúp chủ rạp phim quản lý dễ dàng hơn, đồng thời tiết kiệm chi phí in ấn.

Kỹ năng vận hành là yếu tố quan trọng đối với cả người dùng và quản lý Người dùng chỉ cần thực hiện các thao tác như xem, tìm kiếm, lựa chọn, viết nội dung trong chức năng review phim và thanh toán Trong khi đó, quản lý và nhân viên cần có nghiệp vụ chuyên môn để thực hiện các nhiệm vụ như tạo mới, xóa, cập nhật và theo dõi dữ liệu liên quan đến phim, lịch chiếu, nội dung review của người dùng, tin tức, sự kiện và doanh thu.

Phân tích những công trình có liên quan

Website thứ nhất: CGV

Link website: https://www.cgv.vn

Lý do chọn: CJ CGV là chuỗi rạp chiếu phim đa quốc gia của Hàn Quốc, ngoài thị trường nội địa,

CGV, viết tắt từ ba từ "Cultural", "Great" và "Vital", hiện có mặt trên toàn cầu với 142 địa điểm và 681 màn hình tại Hàn Quốc, cung cấp hơn 100.000 ghế ngồi cho khán giả.

Tiêu chí khảo sát Điểm nổi bật Phù hợp phục vụ cho đề tài

Bài học rút ra cho đề tài

- Bố cục bắt mắt, phù hợp với thị hiếu bạn đọc

- Tin tức nổi bật và mới nhất về phim được cập nhật liên tục

- Tốc độ tải rất nhanh chóng Đáng để học hỏi

- Học hỏi cách thiết kế giao diện có thể bao hàm nhiều lĩnh vực hot trên thị trường

- Đẩy tin tức nóng hỏi lên đầu

- Xử lý tốc độ truyền ổn định

Dịch vụ của người dùng

- Giao diện chọn rạp và đặt vé thuận tiện và trực quan

- Có hệ thống điểm thưởng Đáng để học hỏi

- Học hỏi giao diện đặt vé và cách sắp xếp bố cục đặt vé để thuận tiện nhất cho người dùng

- Học hỏi chức năng điểm thưởng

- Nội dung được chọn lọc kỹ lưỡng và chính xác, đa dạng các thể loại phim

Các sự kiện và ưu đãi được hiển thị ngay dưới các bộ phim hot, giúp người dùng dễ dàng theo dõi các khuyến mãi hấp dẫn Đây là một cách làm đáng để học hỏi.

- Xử lý khối lượng dữ liệu lớn với tốc độ ổn định

- Luôn cập nhật phim, sự kiện và khuyến mãi mới

- Trải nghiệm hoàn toàn thuận tiện, nội dung rất khoa học, bài bản

- Tốc độ load dữ liệu luôn ổn định, đảm bảo có thể dùng tại bất kỳ thời điểm nào Đáng để học hỏi

- Kết hợp hài hòa giữa sự đơn giản trong cách sử dụng website để người dùng dễ dàng thao tác các chức năng trên website

Bảng 1 Khảo sát website CGV

Hình 1 Giao diện chọn ghế ngồi

Hình 2 Giao diện chọn rạp

Website thứ hai: Book My Show

Link website: https://in.bookmyshow.com/

Lý do chọn website đặt vé xem phim này là vì đây là một nền tảng lâu đời, cho phép người dùng đặt vé tại nhiều quốc gia trên toàn thế giới Với hệ thống các cụm rạp phong phú, người dùng có thể dễ dàng đặt vé tại các thành phố lớn như Mumbai, Bengaluru, Pune và Kochi.

- Phong cách rất trang trọng

- Thể hiện những bộ phim nổi bật nhất cùng với giao diện quảng cáo bắt mắt

- Có thêm danh mục lọc cái thể loại phim ở trang chủ giúp người dùng có trải nghiệm chọn phim tốt hơn

Người dùng có thể tham gia các sự kiện online streaming, cho phép đăng ký và xem trực tiếp trên trang web hoặc các nền tảng streaming khác nhau, mang lại cơ hội học hỏi quý giá.

- Trình bày bố cục rất khéo léo và trang trọng

- Tốc độ load dữ liệu trên trang chủ rất nhanh và mượt mà

- Có thêm phần Trending Searches Right Now giúp người dùng có thể tham khảo các bộ phim được tìm kiếm gần đây với tần suất cao nhất

- Có thể đăng nhập thông qua Google, Email, Apple

- Có khả năng thanh toán quốc tế và các kênh thanh toán như Visa, Master Card Đáng để học hỏi

- Thêm dịch vụ đăng nhập khác ngoài tài khoản mặc định cho người dùng

- Có khả năng thanh toán thông qua các kênh thanh toán trong nước Việc

7 làm kênh thanh toán ngoài nước sẽ phát sinh rất nhiều chi phí cho nên không phù hợp với mô hình sinh viên

- Nội dung được chọn lọc rất kĩ và chính xác vì đây là trang web đa quốc gia

- Có rất nhiều danh mục khác nhau cũng như các sự kiện được cập nhật liên tục Đáng để học hỏi

- Phù hợp để học hỏi trong việc xử lý dữ liệu và các bộ phim có xu hướng dễ tiếp cận người dùng nhất

- Học hỏi cách đặt bố cục các danh mục

Trải nghiệm đặc biệt khi được tiếp cận một website đa quốc gia với nhiều dịch vụ hấp dẫn Đáng để học hỏi

Học hỏi cách sàng lọc nội dung, sắp xếp bố cục, xử lý đặt vé và chọn rạp cũng như cách tiếp cận các khách hàng khác nhau

Bảng 2 Khảo sát website Bookmyshow

Hình 3 Giao diện trang chủ Book my Show

Hình 4 Nội dung danh mục tạo ra sức hấp dẫn của website

Website thứ ba: Galaxy Cine

Link website: https://www.galaxycine.vn/

KHẢO SÁT WEBSITE GALAXY CINEMA

Galaxy Cinema, được thành lập từ năm 2003, là một trong những công ty tư nhân đầu tiên trong lĩnh vực điện ảnh tại Việt Nam Với thương hiệu vững mạnh, Galaxy Cinema đã trở thành một trong 10 địa điểm vui chơi giải trí được yêu thích nhất, thu hút hàng triệu lượt khách đến xem phim nhờ vào hệ thống rạp chiếu phim hiện đại và chất lượng dịch vụ tốt.

Rạp chiếu phim thu hút khán giả nhờ không khí thân thiện và dịch vụ chất lượng cao Trang web cho phép đặt và mua vé dễ dàng chỉ với vài bước đơn giản, mang lại sự tiện lợi tối đa cho người dùng mà không cần phải đến rạp.

- Bố cục rất ưa nhìn, bắt mắt, thể hiện được các nội dung, mục đích

- Giao diện mới mẻ, cuốn hút, thể hiện cho người dùng rất nhiều phim

- Nền trang web sáng, tươi mới thể hiện sự hiện đại, dễ nhìn Đáng để học hỏi

- Nên xử lý các poster, slider trên website đẹp, thẩm mỹ cao

- Đưa nhiều phim hot, phim đang chiếu lên trên

- Thể hiện chức năng chính của đặt vé xem phim ngay từ khi vào website

- Đưa bình luận phim và những blog điện ảnh vào

- Người dùng đăng ký thông qua số điện thoại, email

- Người dùng có các chức năng chính như đặt vé nhanh, xem nội dung và lịch chiếu cá phim

- Tìm kiếm thông tin về rạp, ngày chiếu phim Đáng để học hỏi

- Nên liên kết nhiều nền tảng mạng xã hội vì thị hiếu về MXH ngày càng tăng cao

- Đưa các chức năng chính lên đầu trang tạo sự thuận tiện

- Ngoài ra người dùng còn được hưởng các ưu đãi, khuyến mãi

- Mới mẻ, chân thực với các bình luận phim

- Nội dung được chọn lọc kỹ lưỡng, đa dạng về mọi thể loại

- Các xuất chiếu của phim đến từ nguồn chính thống của Galaxy Cinema

- Các phim mới được cập nhật mỗi ngày

- Luôn có phần tin liên quan đi kèm theo bài viết khiến cho người đọc rất hứng thú khi tìm kiếm, đặt vé các phim

- Cập nhật những sự kiện mới mẻ, độc đáo, liên quan đến điện ảnh trong và ngoài nước Đáng để học hỏi

- Luôn cập nhật phim mới

- Xử lý phần tin liên quan khéo léo

- Trải nghiệm hoàn toàn thuận tiện, nội dung rất khoa học, bài bản

- Cảm thấy phù hợp và thuận tiện hơn khi không cần ra trực tiếp rạp phim để đặt vé Đáng để học hỏi

- Kết hợp hài hòa giữa sự đơn giản trong cách sử dụng website và sự độc đáo, phong phú về mặt nội dung mà website mang lại

- Tốc độ load dữ liệu luôn ổn định, đảm bảo có thể dùng tại bất kỳ thời điểm nào

Bảng 3 Khảo sát website Galaxy Cinema

Hình 6 Giao diện bình luận phim/blog điện ảnh

Hình 7 Giao diện chọn ghế

Website thứ tư: PVR Cinemas

Link website: https://www.pvrcinemas.com/

KHẢO SÁT WEBSITE PVR CINEMAS

PVR Cinemas là website thuộc công ty PVR, dẫn đầu thị trường với số lượng rạp chiếu phim lớn nhất tại Ấn Độ Kể từ năm 1997, thương hiệu này đã cách mạng hóa ngành công nghiệp điện ảnh và thay đổi cách thức người dân thưởng thức phim trong nước.

- Giao diện nổi bật và dễ nhìn với hai tone màu chính là đen và vàng

- Phối màu đơn giản nhưng mang đậm tính chất của một rạp chiếu phim hiện đại

- Bố cục đẹp mắt, vừa tầm nhìn và không quá ngợp Đáng để học hỏi

- Các poster, slider được chú trọng và đưa vào đầu trang

- Tập trung về màu sắc giao diện, tối giản nhưng phối màu phù hợp với sở thích người dùng

- Đầy đủ các chức năng tìm kiếm, trình bày phim ngay

13 cả khi vào trang chủ

- Người dùng chọn thành phố để lọc ra những bộ phim phù hợp

- Người dùng có thể đăng nhập/đăng ký tài khoản hoặc liên kết tài khoản với Google, Facebook

- Người dùng có thể chọn các loại hình rạp chiếu phim, công nghệ chiếu phim

- Có tính năng tìm kiếm bằng giọng nói Đáng để học hỏi

- Đưa các tính năng thân thiện và giúp ta xác định chính xác được phân vùng người dùng ngay từ bước đầu vào trang web

- Liên kết mạng xã hội

- Mới mẻ, đa dạng, hiện đại, đầu tư các công nghệ

- Áp dụng công nghệ AI vào tính năng tìm kiếm

- Chủ yếu trình bày các phim Ấn Độ phù hợp với thị hiếu người Ấn Độ với từng khu vực

- Các xuất chiếu của phim đến từ nguồn chính thống của PVR

- Các phim mới được cập nhật mỗi ngày Đáng để học hỏi

- Luôn cập nhật phim mới

- Xử lý phần tin liên quan khéo léo

- Không có tương tác, đánh giá, bình luận cho người dùng

- Cảm giác đặt vé rất chuyên nghiệp, thể hiện các thông tin đơn giản, dễ hiểu, người dùng dễ dàng đặt được vé nhanh chóng

- Cảm thấy phù hợp và thuận tiện hơn khi không cần ra trực tiếp rạp phim để đặt vé

- Tốc độ load dữ liệu luôn ổn định, đảm bảo có thể dùng tại bất kỳ thời điểm nào Đáng để học hỏi

- Nên xây dựng các tính năng độc đáo, các hình thức hài hòa với nhau

- Truyền tải nội dung và thông tin về phim để người dùng nắm rõ

Bảng 4 Khảo sát website PVR Cinemas

Hình 8 Giao diện trang chủ PVR Cinemas

Hình 9 Tính năng tìm kiếm bằng giọng nói

Hình 10 Giao diện đặt vé

Hình 11 Giao diện xem trailer phim

Hình 12 Thể hiện thông tin về phim

Đánh giá tổng kết

+ Bố cục phù hợp để thể hiện cả hình ảnh và nội dung

+ Các danh mục được thể hiện rất chi tiết

+ Trang chủ bắt mắt, thu hút

+ Các tin tức nổi bật được thể hiện ngay ở đầu trang

+ Tông màu tươi sáng, dễ chịu

PVR Cinemas là trang web được đánh giá cao nhất nhờ vào tông màu nổi bật và các khung hình sáng tạo, thu hút người xem Danh mục của trang web được bố trí ấn tượng, tạo cảm giác hấp dẫn cho người dùng.

- Bài học cho dự án của nhóm: học hỏi được cách sáng tạo trong bố cục, kết hợp với sự đơn giản và hợp thị hiếu cho bạn đọc

+ Thông tin luôn được cập nhật liên tục mỗi ngày

+ Đa dạng về thể loại phim và nội dung khuyến mãi

+ Có hình ảnh minh họa và trailer

+ Những thông tin chi tiết của bộ phim được hiển thị đầy đủ

- Trang web được đánh giá cao nhất: Galaxy Cinema

Lĩnh vực phim ảnh ngày càng phong phú, với thông tin khuyến mãi luôn được cập nhật nhanh chóng và tích hợp nhận xét từ các blog phim Điều này đã giúp Galaxy Cinema trở thành lựa chọn hàng đầu của người Việt trong thị trường rạp chiếu phim.

Dự án của nhóm đã rút ra bài học quan trọng về cách sắp xếp bố cục nội dung cho các thể loại phim và thông tin khuyến mãi Cần tránh tình trạng hiển thị quá nhiều thông tin không cần thiết, điều này sẽ giúp người dùng không bị rối và dễ dàng tiếp cận thông tin quan trọng hơn.

+ Có thể đăng nhập dễ dàng

+ Có thể liên kết với các nền tảng Mạng xã hội

+ Chức năng chính là đặt vé dễ dàng thao tác

- Trang web được đánh giá cao nhất:

+ Về tiện ích: Galaxy Cinema (đều đáp ứng đầy đủ các nhu cầu cơ bản của người dùng, đặc biệt là chức năng đặt vé xem phim)

+ Về bảo mật: CGV (có sử dụng xác thực bằng email sau khi đăng ký)

Dự án của nhóm đã rút ra bài học quan trọng là cần nắm vững các tính năng cơ bản để đáp ứng nhu cầu người dùng, đồng thời tăng cường bảo mật cho website.

NHƯỢC ĐIỂM Các trang web đều là những thương hiệu lớn nên hầu như không có nhiều nhược điểm

Bảng 5 Đánh giá tổng kết khảo sát

Sau khi khảo sát và đánh giá nhiều website, nhóm sẽ tận dụng những điểm mạnh riêng biệt của từng trang để tạo ra một website hoàn thiện và tối ưu, nhằm nâng cao trải nghiệm đặt vé xem phim cho người dùng.

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

Xây dựng một website đặt vé xem phim online cần đảm bảo tính ổn định, tốc độ nhanh và sự thuận tiện cho người dùng Đặc biệt, cần chú trọng đến tính bảo mật cao và ứng dụng hiệu quả trong quản lý, phục vụ cho cả kinh doanh và giải trí Website phải đáp ứng quy trình nghiệp vụ một cách linh hoạt, khai thác tối đa những lợi thế trong lĩnh vực giải trí và mua bán vé Đồng thời, cần đưa ra những giải pháp thiết thực để giải quyết các vấn đề mà người dùng và quản lý thường gặp phải.

CƠ SỞ LÝ THUYẾT

Kiến trúc hệ thống

Hình 19 Kiến trúc hệ thống

1.2.1 Tổng quan công nghệ sử dụng

Dự án được phát triển dựa trên kiến trúc ứng dụng web cơ bản, đảm bảo khả năng hoạt động đồng thời và mượt mà Nó bao gồm hai chương trình con khác nhau chạy song song.

- Code từ phía máy khách (frontend): Đoạn code này nằm trong browser và phản hồi input (đầu vào) của người dùng Sử dụng framework ReactJs xây dựng

Mã phía máy chủ (backend) là mã chạy trên máy chủ, chịu trách nhiệm phản hồi các yêu cầu HTTP Để phát triển backend, chúng ta sử dụng Spring Boot, một module của Spring Framework Cơ sở dữ liệu tương tác với backend thông qua MySQL.

- Ngoài ra dự án còn sử dụng một số công nghệ khác để bổ trợ cho hệ thống chính như Circleci, Docker, Cadence Workflow, …

1.2.2 Chi tiết công nghệ áp dụng

- Một trong những ưu điểm mà ReactJS mang lại là một thư viện mạnh mẽ, có thể render dữ liệu ngay cả ở tầng Server và Client a JSX:

- JSX hay JavaScript Extension, là một thành phần giúp chúng ta thay đổi được cấu trúc cây DOM bằng các HTML-style code đơn giản.[1]

- Dưới đây là một đoạn code ví dụ về JSX:

Hình 21 Ví dụ về cú pháp JSX

- Ngoài ra chúng có các thẻ con trong thẻ chứa thẻ con đó như cấu trúc HTML:[1]

Hình 22 Cấu trúc thẻ tương tự HTML

Đối với các website lớn, đặc biệt là những trang web có nhiều tương tác từ người dùng, hiệu suất website có thể bị ảnh hưởng nghiêm trọng Mỗi khi người dùng nhấn vào tính năng yêu cầu tải lại trang, toàn bộ cây DOM sẽ phải được tải lại, gây ra sự chậm trễ trong trải nghiệm người dùng.

Sử dụng JSX giúp cập nhật cây DOM một cách hiệu quả, nhờ vào Virtual DOM (DOM ảo) mà ReactJS đã khởi tạo.

Hình 23 Ví dụ về DOM

Tóm lại, ReactJS đưa cho chúng ta nhiều ưu điểm vượt trội như sau:

- Phù hợp và được hỗ trợ hầu hết các trình duyệt web hiện nay

- Khả năng tái sử dụng các code, các component hiệu quả cao

- Hỗ trợ React Native cho phiên bản Mobile

- Hỗ trợ SEO, hiển thị website ở top đầu tìm kiếm trên Google (sử dụng các phương pháp như isomorphic)

- Dễ dàng debug với nhiều công cụ hỗ trợ ví dụ như Redux Devtool,…

- Trở thành trending trên hầu hết tất cả mọi nơi trên thế giới c Redux:

Redux là một công cụ quản lý trạng thái dự đoán được cho các ứng dụng JavaScript Nó hỗ trợ việc phát triển ứng dụng một cách nhất quán và có thể hoạt động hiệu quả trong nhiều môi trường khác nhau.

Redux, inspired by the Elm programming language and Facebook's Flux architecture, is designed to work seamlessly with React, making it easy to test and implement in client, server, and native applications.

Hình 24 Ví dụ về Redux

Redux lưu trữ state của ứng dụng trong store, cho phép mọi component truy cập đến bất kỳ state nào trong toàn bộ dự án web Cấu trúc hoạt động của Redux bao gồm ba thành phần chính: Action, Store và Reducer.

- Action được gửi đi bằng các store.dispatch(), chúng đều có một type để quy định action đó:[3]

Hình 25 Ví dụ về Action

Các trạng thái này được lưu trữ dưới dạng các đối tượng, xác định cách mà trạng thái của ứng dụng thay đổi khi phản hồi với một hành động được gửi đến store trong Reducer.

Hình 26 Ví dụ về Reducer

Store trong Redux giúp lưu trữ trạng thái ứng dụng một cách duy nhất, cho phép truy cập và cập nhật các state đã lưu Ngoài ra, nó cũng hỗ trợ việc đăng ký và hủy đăng ký các listeners thông qua các phương thức trợ giúp.

Hình 27 Ví dụ về tạo store

Các action thực hiện trên một state luôn trả về một state mới, khiến cho state này trở nên đơn giản và dễ đoán Sau khi đã hiểu rõ hơn về Redux, hãy quay lại ví dụ về component Login để khám phá cách Redux có thể hỗ trợ chúng ta.

Hình 29 Nguyên lý hoạt động của Redux

Cài đặt ứng dụng react trên Visual Studio Code

Mở ứng dụng Visual Studio Code và truy cập thư mục chứa dự án Sau đó, triển khai dự án React bằng lệnh "npx create-react-app ".

Hình 30 Triển khai ứng dụng React

Trên màn hình Github, tại nhánh main tiến hành sao chép URL của dự án để đến bước Clone source:

Một màn hình sẽ hiển thị ra như sau:

Tại một cửa sổ mới của ứng dụng Visual Studio Code, ta nhấn chọn Clone Git Repository để clone source của nhóm về:

Hình 32 Chọn Clone Git Repository để clone source

Tiến hành dán đoạn URL vừa sao chép vào ô sau và nhấn enter, sau đó chọn thư mục đường dẫn để lưu dự án trên máy tính:

Hình 33 Dán URL của github repository

Chờ cho đến khi hoàn tất quá trình clone source từ github, kết quả sẽ hiển thị dưới ảnh sau khi hoàn thành:

Hình 34 Hoàn tất quá trình clone dự án về máy

Cấu trúc thư mục của dự án bao gồm các thư mục chính như node_modules, nơi chứa các thư viện quan trọng cho việc render trang web, và thư mục public, nơi có file index.html chạy đầu tiên cùng các liên kết đến thư viện hỗ trợ và logo của website Thư mục src chứa các đoạn code chính, bên cạnh đó còn có các tệp tin quan trọng khác như gitignore, package-lock.json, package.json và một số tệp liên quan đến đồ án.

Trong quá trình source có thay đổi, người dùng có thể gõ “git pull” trên terminal tại nhánh main để cập nhật nội dung thay đổi về máy

Bước tiếp theo, người dùng tiến hành cài đặt lần đầu khi vừa lấy source code về máy bằng câu lệnh “npm i –force”:

Hình 35 Cài đặt lần đầu

Quá trình cài đặt diễn ra nhanh chóng trong vòng một phút, sau khi hoàn tất, thư mục node_modules sẽ xuất hiện và các tệp package-lock.json, package.json sẽ được cập nhật Để khởi chạy ứng dụng, người dùng chỉ cần sử dụng lệnh “npm start”, giúp dự án chạy trên http://localhost:3000, và trình duyệt mặc định sẽ tự động mở dự án.

Hình 36 Khởi chạy dự án

Kết quả phía command line của terminal sẽ hiển thị:

Hình 37 Kết quả hiển thị trên Terminal

Nhóm đã chọn công nghệ Spring Boot để phát triển hệ thống, mang lại tính năng RAD (Phát triển Ứng dụng Nhanh) và khả năng mở rộng cao Hệ thống được xây dựng bằng Spring Boot cũng dễ dàng tương thích với các hệ thống khác.

Cadence Workflow Engine, phát triển tại Uber và mã nguồn mở theo giấy phép MIT, được nhóm sử dụng để xây dựng hệ thống đặt vé độc lập, phục vụ cho việc đặt và giữ vé cho người dùng Lý do chọn Cadence Workflow là vì sự linh hoạt và khả năng mở rộng vượt trội, cho phép xử lý hàng chục nghìn cập nhật mỗi giây và hàng tỷ quy trình công việc mở Các luồng công việc được lập trình theo hướng đối tượng, đảm bảo trạng thái của chúng, bao gồm ngăn xếp và biến cục bộ, được bảo toàn ngay cả khi máy chủ gặp lỗi Nếu hệ thống chính gặp sự cố, hệ thống đặt vé vẫn duy trì hoạt động và tự động kết nối lại khi hệ thống chính khôi phục Mặc dù Cadence yêu cầu triển khai Cassandra làm cơ sở dữ liệu mặc định, nhóm đã chọn sử dụng Cassandra cho dự án này.

Cài đặt và triển khai server đặt vé Cadence Workflow

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Phân tích hệ thống

Xây dựng một website đặt vé xem phim trực tuyến giúp quản lý rạp chiếu phim hiệu quả Trang web cho phép người dùng dễ dàng đặt vé, thanh toán và đăng bài review phim Người dùng còn có cơ hội trở thành cộng tác viên của hệ thống rạp để nhận hoa hồng Đặc biệt, trang web tích hợp chatbox thông minh, hỗ trợ những người không rành về công nghệ trong việc đặt vé một cách dễ dàng.

2.1.2 Phân hệ người dùng hệ thống và chức năng

- Có thể đăng ký tài khoản

Truy cập vào website cho phép người dùng xem nội dung trên trang chủ, bao gồm danh sách các phim đang chiếu và sắp chiếu, thông tin khuyến mãi của rạp, trailer phim, cũng như danh sách và nội dung chi tiết các bài review cùng lượt tương tác với từng bài review.

- Có thể xem lịch chiếu của phim

- Thanh toán vé tại quầy

Người dùng đã đăng ký (User)

- Đăng nhập bằng tài khoản cá nhân

- Xem lịch chiếu của phim

Truy cập vào website cho phép người dùng xem nội dung trên trang chủ, bao gồm danh sách các phim đang chiếu và sắp chiếu, thông tin khuyến mãi của rạp, trailer phim, cùng với danh sách và nội dung chi tiết các bài review, cũng như các lượt tương tác với các bài review đó.

- Xem lịch sử đặt vé

- Xem các hóa đơn đã thanh toán

- Chỉnh sửa thông tin cá nhân

- Xem trang cá nhân của người dùng khác

- Đăng bài viết review phim

- Lưu danh sách bài viết review yêu thích

- Bình luận vào bài viết review

Nhân viên rạp phim (Staff)

- Đăng và chỉnh sửa thông tin các bộ phim đang chiếu, sắp chiếu

- Đăng nhập dưới tài khoản đã được Admin cấp

- Chỉnh sửa thông tin cá nhân

- Đăng và chỉnh sửa thông tin tin tức và khuyến mãi của rạp

- Đặt vé tại rạp dành cho người dùng tới tận rạp mua vé

Quản lý hệ thống (Admin)

- Tạo tài khoản cho nhân viên rạp phim

- Quản lý lịch chiếu, phim, chi nhánh rạp và phòng chiếu

- Quản lý bài đăng bao gồm cả review và tin tức khuyến mãi

- Xem được dashboard thống kê doanh thu, khách hàng

2.1.3 Cụ thể hóa các chức năng

Có 4 Actors chính – 4 người dùng sẽ sử dụng Website: Quản trị viên (Admin), Nhân viên rạp phim (Staff), Người dùng đã đăng ký (User), Khách vãng lai (Guest)

Quản lý hệ thống (Admin) có quyền kiểm soát toàn bộ hoạt động của hệ thống, bao gồm việc cấp Username và Password cho nhân viên rạp phim để họ có thể đăng nhập và thực hiện các chức năng cần thiết trong hệ thống.

Nhân viên rạp phim có nhiệm vụ chính là quản lý thông tin về các bộ phim đang chiếu và sắp chiếu, đồng thời cập nhật tin tức và khuyến mãi của rạp Họ cũng hỗ trợ người dùng trong việc đặt vé trực tiếp tại rạp để phục vụ nhu cầu mua vé.

Khách vãng lai có thể truy cập website để tìm hiểu thông tin trên trang chủ, xem chi tiết phim, trailer, bài review, thông tin khuyến mãi và lịch chiếu phim Ngoài ra, họ cũng có thể đặt vé và thanh toán trực tiếp tại quầy.

Người dùng đã đăng ký là phiên bản nâng cấp của Guest, cho phép họ đăng nhập vào trang web để xem trang chủ, lịch chiếu phim, đặt vé và thanh toán trực tuyến Ngoài ra, người dùng đã đăng ký còn có khả năng viết đánh giá phim và tương tác với các bài viết của người dùng khác.

Hình 49 Lượt đồ chức năng

STT Quyền Chức năng Mô tả

Khách Đăng ký tài khoản Khách (guest) khi vào page được đăng ký tài khoản người dùng

Xem danh sách phim, review, sự kiện, lịch chiếu phim

Khách hàng và người dùng có quyền truy cập vào danh sách các bộ phim đang chiếu và sắp chiếu, cùng với các bài viết đánh giá phim và tin tức sự kiện liên quan đến rạp.

4 Đặt vé tại quầy Người dùng đến quầy, chọn chỗ ngồi, xuất thành vé

5 Thanh toán vé tại quầy Người dùng trả tiền vé đã đặt cho nhân viên tại quầy

Người dùng có thể dễ dàng đăng ký tài khoản và thực hiện việc đăng nhập để truy cập các tính năng của hệ thống Sau khi sử dụng, người dùng có quyền đăng xuất để kết thúc phiên làm việc.

7 Thanh toán vé tại quầy Người dùng trả tiền vé đã đặt cho nhân viên tại quầy

Xem lịch chiếu phim Hiển thị lịch chiếu các bộ phim đang chiếu, gồm các thông tin về suất chiếu, phim, rạp

9 Đặt vé xem phim Người dùng được chọn phim, rạp và suất chiếu, sau đó chọn ghế và tiến hành đến bước tiếp theo

Tìm kiếm và xem thông tin phim

Sử dụng thanh tìm kiếm, chọn phim, thông tin chi tiết phim sẽ được hiển thị

Xem lịch sử mua vé, thanh toán vé đã đặt

Người dùng đã đặt vé có thể xem lại các vé đã đặt, vé nào còn hạn thanh toán sẽ cho phép người dùng thanh toán

Xem thông tin sự kiện khuyến mãi

Các thông tin sự kiện, khuyến mãi sẽ được hiển thị trên trang chủ

Chỉnh sửa thông tin cá nhân

Người dùng được phép chỉnh sửa tên người dùng trong thông tin tài khoản

14 Đổi mật khẩu Người dùng được phép đổi mật khẩu trong thông tin tài khoản

15 Đăng ký thành viên Người dùng được phép đăng ký thành viên trong thông tin tài khoản

16 Xem trang cá nhân người khác

Người dùng được phép xem thông tin cá nhân người khác

17 Bình luận về bài Review Người dùng được bình luận về bài review trên website

Lưu danh sách các bài Review yêu thích

Người dùng được phép thêm các bài review yêu thích vào một danh sách, tiện cho việc xem và theo dõi

19 Thích bài Review Người dùng được bày tỏ sự yêu thích thông qua nút like

20 Xem và Viết bài review Các bài Review được đăng tải sẽ hiển thị, cho phép người dùng

44 xem, ngoài ra có thể viết review phim đó sau khi đặt vé

Tạo tài khoản nhân viên Quản lý hệ thống được tạo nhiều tài khoản với quyền nhân viên

Xem và chỉnh sửa tất cả tài khoản

Hiển thị danh sách các tài khoản, trừ tài khoản admin, xem và chỉnh sửa thông tin các tài khoản, trừ email và mật khẩu

23 Xem các bài đăng Xem được các bài đăng gồm tin tức, khuyến mãi, review

Xem thống kê, biểu đồ số liệu, doanh thu, doanh thu đáng nhận được, danh sách người dùng thân thiết

Nhân viên Đăng, chỉnh sửa thông tin các bộ phim đang chiếu, sắp chiếu Được phép đăng, chỉnh sửa thông tin các bộ phim đang chiếu, sắp chiếu

26 Đăng nhập tài khoản nhân viên

Nhân viên đăng nhập tài khoản với quyền nhân viên

27 Đăng, chỉnh sửa thông tin tin tức, khuyến mãi Được phép đăng, chỉnh sửa thông tin tin tức, khuyến mãi

28 Đặt vé cho người dùng khi người dùng đến rạp Đặt vé thay cho người dùng, khi người dùng đến quầy mua vé trực tiếp

Bảng 6 Mô tả lượt đồ chức năng

2.1.5 Một số yêu cầu phi chức năng

Hệ thống an ninh đảm bảo phân luồng rõ ràng giữa các đối tượng Nhóm đề tài đã phân chia thành bốn luồng khác nhau cho người dùng, bao gồm luồng khách.

Có bốn luồng chính trong hệ thống: luồng vãng lai, luồng khách hàng đã đăng ký tài khoản, luồng quản trị hệ thống và luồng nhân viên Mỗi luồng này cung cấp các chức năng riêng biệt và được thiết kế để không chồng chéo lên nhau, đảm bảo tính phù hợp và hiệu quả trong việc sử dụng.

Nhóm đề tài đã triển khai dự án thành công với hiệu suất tốt trên hệ thống phục vụ số lượng người dùng truy cập nhỏ Để cải thiện hơn nữa, nhóm sẽ tiếp tục nâng cấp hệ thống, đặc biệt là khả năng truy cập và tốc độ phản hồi dữ liệu từ máy chủ, điều này một phần phụ thuộc vào điều kiện kinh tế.

Khả năng mở rộng của hệ thống hiện tại cho phép điều chỉnh quy mô một cách linh hoạt, tùy thuộc vào số lượng chi nhánh rạp và người dùng.

- Khả dụng: Hệ thống được triển khai và chạy liên tục, sẵn sàng sử dụng mỗi lúc cần thiết

- Bảo trì: Hệ thống được xây dựng trên các công nghệ phổ biến hiện nay như React

Js, Spring Boot và MySQL là những công nghệ dễ dàng bảo trì và cập nhật, giúp người dùng tìm kiếm tài liệu hướng dẫn một cách thuận tiện Hệ thống có thể được điều chỉnh linh hoạt theo phạm vi, quy mô và yêu cầu cụ thể của người sử dụng.

- Tính di động: Hiện tại hệ thống chạy được trên các nền tàng máy tính, điện thoại di động, máy tính bảng

- Khả năng sử dụng: Hệ thống dễ dàng truy cập và sử dụng

- Khả năng tương thích: Được chạy trên các hệ thống duyệt web phổ biến hiện nay như Chrome, Firefox, Opera,…

Mô hình hóa hệ thống

Lược đồ Use Case cung cấp các chức năng để đáp ứng các yêu cầu người dùng (Sơ đồ được đính kèm với tài liệu báo cáo này)

Hình 50 Lượt đồ lớp (Class)

2.2.3 Mô hình thực thể (Entity – Relationship Diagram):

Hình 51 Mô hình thực thể ERD

2.2.4 Quan hệ giữa các đối tượng, thông tin

- Một chuỗi rạp có nhiều chi nhánh

- Một chi nhánh có nhiều phòng

- Một phòng có nhiều ghế ngồi

- Một ngày có nhiều khung giờ chiếu trong ngày

- Một lịch chiếu dành cho một phim, một phim có thể có nhiều lịch chiếu

- Một lịch chiếu thì chỉ thuộc một khung giờ trong một ngày

- Một lịch chiếu thì chỉ dùng cho một phòng, một phòng có thể dùng cho nhiều lịch chiếu khác nhau

- Một lịch chiếu thì có thể có nhiều vé xem phim, một vé xem phim thì dùng cho một lịch chiếu

Một vé xem phim tương ứng với một ghế ngồi duy nhất trong rạp, trong khi một ghế ngồi có thể phục vụ cho nhiều vé xem phim trong các lần xem khác nhau của khách.

- Một người dùng có thể có nhiều bài viết

- Một người dùng có thể thích nhiều bài viết khác nhau

- Một người dùng có thể có nhiều bài viết

Use case đặt vé xem phim

Use Case Đặt vé xem phim

Actor Người dùng có tài khoản, Nhân viên

Người dùng sử dụng được chức năng đặt vé xem phim tương ứng với loại phim mà user đã chọn

Pre-Condition(s) Người dùng truy cập vào trang web

Post-Condition(s) Chuyển thông tin đặt vé của người dùng đã chọn đến trang thanh toán vé xem phim

1 Người dùng chọn phim cần mua vé và nhấn vào nút mua vé tương ứng trên phim

2 Tại bảng lịch chiếu, chọn các lựa chọn rạp và lịch chiếu tương ứng

3 Nhấn vào suất chiếu để chọn suất chiếu đó

4 Người dùng được chuyển hướng đến trang nhập thông tin đặt vé

5 Người dùng nhập số ghế muốn đặt và tiến hành chọn ghế

7 Hệ thống kiểm tra đăng nhập và loại tài khoản người dùng

8 Hệ thống thu thập thông tin đặt vé

9 Chuyển hướng người dùng đến trang thanh toán

10 View gửi thông tin đặt vé của người dùng xuống hệ thống để lưu thông tin

Hóa đơn chưa được thanh toán

4a1 Hệ thống hủy vé đang đợi và ghi nhận trạng thái hủy vé, kết thúc usecase

Hóa đơn đã được thanh toán

4a1 Hệ thống ghi nhận trạng thái, kết thúc usecase

Người dùng chưa đăng nhập hoặc là khách vãng lai chưa có tài khoản

5b1 Chuyển hướng người dùng đến trang đăng nhập, đăng ký 5b2 Người dùng đăng nhập hoặc đăng ký tài khoản

5b3 Thông báo thành công và chuyển đến bước 4

Chỗ ngồi đã có người khác chọn trước

5b1 Thông báo chỗ ngồi đã có người khác chọn trước 5b2 Chuyển hướng người dùng đến trang chọn ghế

Bảng 7 Đặc tả đặt vé xem phim

Hình 52 Biểu đồ Sequence đặt vé

Colaboration đặt vé xem phim

Hình 53 Colaboration đặt vé xem phim

Use case tìm kiếm phim

Use Case Tìm kiếm phim

Actor Khách vãng lai, Người dùng có tài khoản, Nhân viên, Quản trị viên

Short Description Người dùng tìm kiếm phim dựa theo tên phim

Post-Condition(s) Hiện ra những phim có tên trùng với từ khóa đã tìm kiếm

1 Nhập thông tin cần tìm kiếm

2 Gửi yêu cầu tìm kiếm xuống cơ sở dữ liệu

3 Trả về danh sách dữ liệu

Bảng 8 Đặc tả tìm kiếm phim

Use case đăng ký tài khoản hệ thống

Use Case Đăng ký tài khoản hệ thống

Tạo một tài khoản mới cho một user mới có thể dùng để đăng nhập và sử dụng đầy đủ các tính năng của trang web

Thông báo kết quả, nếu thành công thì đưa người dùng vào trang đăng nhập để tiến hành vào hệ thống

1 Người dùng vào trang đăng ký ở trang chủ và nhập các thông tin cần thiết và nhấn vào nút đăng ký

2 Nhập các thông tin cần thiết

4 Xác thực và gửi thông báo trả về cho người dùng

Username đăng ký đã tồn tại

1a1 Hệ thống kiểm tra và thấy Username này đã tồn tại và trả lại thông báo lên View

1a2 Thông báo rằng Username này đã tồn tại với người dùng

1a3 Quay lại bước 2 trong luồng sự kiện chính

Email đăng ký đã tồn tại

1c1 Hệ thống kiểm tra và thấy Email này đã tồn tại và trả lại thông báo lên View

1c2 Thông báo rằng Email này đã tồn tại với người dùng 1c3 Quay lại bước 2 trong luồng sự kiện chính

Bảng 9 Đặc tả đăng ký tài khoản hệ thống

Use case tạo tài khoản nhân viên

Use Case Tạo tài khoản nhân viên

Tạo một tài khoản mới cho một cho nhân viên truy cập vào hệ thống quản lý và đặt vé cho user

Pre-Condition(s) Có role là quản trị viên

Post-Condition(s) Tài khoản nhân viên được tạo thành công

1 Quản trị viên vào trang quản lý và nhấn vào nút thêm nhân viên

2 Nhập các thông tin cần thiết

3 Nhấn nút thêm nhân viên

4 Hệ thống xác thực và gửi thông báo về

Username đăng ký đã tồn tại

1a1 Hệ thống kiểm tra và thấy Username này đã tồn tại và trả lại thông báo lên View

1a2 Thông báo rằng Username này đã tồn tại 1a3 Quay lại bước 2 trong luồng sự kiện chính

Email đăng ký đã tồn tại

1c1 Hệ thống kiểm tra và thấy Email này đã tồn tại và trả lại thông báo lên View

1c2 Thông báo rằng Email này đã tồn tại 1c3 Quay lại bước 2 trong luồng sự kiện chính

Bảng 10 Đặc tả tạo tài khoản nhân viên

Use case đăng nhập tài khoản hệ thống

Use Case Đăng nhập tài khoản hệ thống

Actor Người dùng có tài khoản, Nhân viên, Quản trị viên

Short Description Đăng nhập vào hệ thống để có thể sử dụng chức năng của từng tài khoản

Pre-Condition(s) Đã có tài khoản

Post-Condition(s) Người dùng vào trang đăng nhập để tiến hành vào hệ thống

Main Flow 1 Người dùng truy cập vào website

2 Nhấn nút đăng nhập trên header

3 Nhập email hoặc username và mật khẩu

4 Nhấn vào nút Đăng Nhập

5 View gửi thông tin đăng nhập xuống hệ thống

6 Hệ thống kiểm tra xem tài khoản đã tồn tại chưa

8 Kiểm tra mật khẩu có trùng khớp hay không

9 Thông báo đăng nhập thành công

Tài khoản không tồn tại

Hệ thống kiểm tra sự tồn tại của tài khoản dựa trên tên người dùng hoặc email, và nếu không tìm thấy, sẽ gửi thông báo lên giao diện người dùng Nếu thông tin đăng nhập không chính xác, hệ thống sẽ thông báo rằng tài khoản hoặc mật khẩu không đúng Sau đó, người dùng sẽ được hướng dẫn quay lại bước 2 trong quy trình chính.

Mật khẩu không trùng khớp

3d1 Hệ thống kiểm tra và thấy mật khẩu không trùng khớp, sau đó gửi thông báo lên View

3d2 Thông báo rằng tài khoản hoặc mật khẩu không đúng 3d3 Quay lại bước 2 trong luồng sự kiện chính

Bảng 11 Đặc tả đăng nhập tài khoản hệ thống

Use case phê duyệt bài

Use Case Phê duyệt bài

Actor Quản trị viên, Nhân viên

Short Description Kiểm duyệt bài viết của người dùng, chỉnh sửa trạng thái bài viết thành đã duyệt

Pre-Condition(s) Bài viết đang ở trạng thái chờ duyệt

Post-Condition(s) Bài viết của user đã được thay đổi trạng thái thành đã duyệt

1 Kiểm duyệt viên xem danh sách bài viết chưa duyệt và chọn bài viết để xem

2 Kiểm duyệt viên duyệt bài viết và bài viết được đăng lên trang chủ

Bài viết không tồn tại trong cơ sở dữ liệu

Không hiển thị bài viết nào khi không tìm thấy bài viết, kết thúc use case

Bảng 12 Đặc tả phê duyệt bài

Use case từ chối phê duyệt bài

Use Case Từ chối duyệt bài

Actor Quản trị viên, Nhân viên

Short Description Từ chối phê duyệt bài viết của người dùng, chỉnh sửa trạng thái bài viết thành từ chối duyệt

Pre-Condition(s) Bài viết đang ở trạng thái chờ duyệt

Post-Condition(s) Bài viết của user đã được thay đổi trạng thái không được duyệt

Kiểm duyệt viên xem danh sách bài viết chưa duyệt và chọn bài viết để xem

1 Kiểm duyệt viên từ chối duyệt bài viết

Bài viết không tồn tại trong cơ sở dữ liệu

Không hiển thị bài viết nào khi không tìm thấy bài viết, kết thúc use case

Bảng 13 Đặc tả từ chối phê duyệt bài

Use case thêm bài viết

Use Case Thêm bài viết

Short Description Người dùng có tài khoản đăng bài viết

Pre-Condition(s) Đã đăng nhập vào hệ thống

Post-Condition(s) Bài viết của người dùng đã được đăng vào danh sách duyệt

1 Nhập các trường thông tin đăng bài viết

2 Gửi thông tin thêm bài viết

3 Hệ thống gửi thông báo đã đăng bài viết thành công vào danh sách duyệt và chờ duyệt

4 Bài viết được thêm vào cơ sở dữ liệu và được thêm vào danh sách chờ duyệt

Người đăng bài viết có role người dùng

2a1 Hệ thống kiểm tra thấy role người đăng bài viết là người dùng

2a2 Thông báo rằng bài viết đã được đăng thành công và thêm vào danh sách chờ duyệt

Người đăng bài viết có role nhân viên

2b1 Hệ thống kiểm tra thấy role người đăng bài viết là nhân viên

2b2 Thông báo rằng bài viết đã được đăng thành công và thêm vào danh sách chờ duyệt

Tên bài viết đã được sử dụng

3a1 Hệ thống kiểm tra thấy tên bài viết đã được sử dụng

3a2 Thông báo rằng bạn không có quyền đăng bài viết này Trở lại bước 1

Bảng 14 Đặc tả thêm bài viết

Use case xem chi tiết một bài viết

Use Case Xem nội dung bài viết

Khách vãng lai, Người dùng có tài khoản, Quản trị viên, Nhân viên

Short Description Xem chi tiết bài viết

Pre-Condition(s) Người dùng truy cập vào website

Post-Condition(s) Đưa người dùng vào trang tin tức chi tiết của bài viết đã chọn

1 Người dùng nhấn vào một thumbnail của một bài viết

2 View sẽ gửi yêu cầu xuống hệ thống

3 Hệ thống sẽ xử lý và trả về thông tin chi tiết bài viết lên View

4 Điều hướng người dùng đến trang nội dung chi tiết của bài viết

Exception Flow Bài viết không tồn tại trong cơ sở dữ liệu

3a1 Hệ thống kiểm tra thấy bài viết không tồn tại không cơ sở dữ liệu

3a2 Thông báo không tìm thấy bài viết, kết thúc use case

Bảng 15 Đặc tả xem chi tiết bài viết

Use case lưu bài viết yêu thích

Use Case Lưu bài viết yêu thích

Actor Người dùng có tài khoản

Short Description Người dùng nhấn vào nút lưu bài báo để lưu bài báo ưa thích

Pre-Condition(s) - Người dùng đăng nhập

- Người dùng đang ở trang nội dung chi tiết của bài viết

Post-Condition(s) Người dùng lưu thành công hoặc hủy lưu bài viết thành công

1 Người dùng nhấn vào nút lưu bài viết ưa thích

2 View sẽ gửi yêu cầu xuống hệ thống, nếu bài viết chưa có trong danh sách yêu thích thì lưu bài viết vào danh sách yêu thích, còn bài viết đã có trong danh sách yêu thích thì gỡ bài viết ra khỏi danh sách yêu thích

3 Hệ thống sẽ tiến hành xử lý và gửi thông báo lên View

4 Chỉnh sửa hoạt ảnh của nút lưu

Bài viết đã có trong danh sách yêu thích

6c1 Hệ thống kiểm tra và thấy bài viết đã có trong danh sách yêu thích

6c2 Gỡ bài viết ra khỏi danh sách yêu thích và thông báo về View

Bài viết chưa có trong danh sách yêu thích

6d1 Hệ thống kiểm tra và thấy bài viết chưa có trong danh sách yêu thích

6d2 Lưu bài viết vào danh sách yêu thích và thông báo về View

Bảng 16 Đặc tả use case lưu bài viết yêu thích

Use case chỉnh sửa thông tin tài khoản

Use Case Chỉnh sửa thông tin tài khoản

Short Description Người dùng có tài khoản và các vai trò khác có tài khoản có thể thay đổi thông tin cá nhân

Pre-Condition(s) Đã đăng nhập được vào tài khoản

Post-Condition(s) Lưu thông tin đã chỉnh sửa vào cơ sở dữ liệu

1 Nhập thông tin cần chỉnh sửa

2 Người dùng nhấn vào nút cập nhật

3 Hệ thống xác thực người dùng bằng thông tin hiện tại đã đăng nhập

4 Hệ thống xác định đúng người dùng, hệ thống gửi yêu cầu lưu thông tin được chỉnh sửa xuống cơ sở dữ liệu

5 Thông báo chỉnh sửa thông tin cá nhân thành công

4a1 Hệ thống kiểm tra thấy phiên đăng nhập vào không chính xác

4a2 Thông báo không thể chỉnh sửa Trở lại bước 1

Bảng 17 Đặc tả chỉnh sửa thông tin tài khoản

Use case xem danh sách phim

Use Case Xem danh sách phim

Actor Khách vãng lai, Người dùng có tài khoản, Nhân viên, Quản trị viên

Short Description Xem danh sách phim đang chiếu, sắp chiếu trên trang chủ

1 Người dùng truy cập vào trang chủ

2 View sẽ gửi yêu cầu kèm từ khóa xuống hệ thống

3 Hệ thống sẽ tìm kiếm nội dung các bộ phim dưới cơ sở dữ liệu

4 Nếu có, hiển thị danh sách và nội dung phim lên trang chủ

Bảng 18 Đặc tả xem danh sách phim

Use case xem lịch chiếu phim

Use Case Xem lịch chiếu phim

Khách vãng lai, Người dùng có tài khoản, Nhân viên, Quản trị viên

Short Description Xem danh sách lịch chiếu phim theo phim

1 Người dùng truy cập vào trang chủ, chọn các trường cần thiết trên thanh đặt vé hoặc nhấn vào phim muốn xem lịch chiếu

2 View sẽ gửi yêu cầu xuống hệ thống

3 Hệ thống sẽ tìm kiếm nội dung các lịch chiếu dưới cơ sở dữ liệu

4 Nếu có, đưa nội dung lịch chiếu lên trang chủ

Bảng 19 Đặc tả xem lịch chiếu phim

Use case xem nội dung chi tiết phim

Use Case Xem thông tin chi tiết phim

Actor Khách vãng lai, Người dùng, Nhân viên, Quản trị viên

Short Description Xem thông tin chi tiết phim

Post-Condition(s) Đưa người dùng vào trang tin tức chi tiết của bộ phim đã chọn

1 Người dùng nhấn vào một thumbnail của một bộ phim

2 View sẽ gửi yêu cầu xuống hệ thống với id của bộ phim

3 Hệ thống sẽ tìm kiếm nội dung bộ phim dưới cơ sở dữ liệu

4 Nếu có, đưa nội dung chi tiết bộ phim lên View

5 Điều hướng người dùng đến trang nội dung chi tiết của bộ phim

6 Người dùng nhấn vào lịch chiếu để xem thông tin lịch chiếu, nhấn vào thông tin để xem thông tin chi tiết bộ phim

Phim không tồn tại trong cơ sở dữ liệu

3a1 Hệ thống kiểm tra thấy phim không tồn tại không cơ sở dữ liệu

3a2 Thông báo không tìm thấy phim, kết thúc use case

Bảng 20 Đặc tả xem nội dung chi tiết phim

Use case thanh toán vé xem phim

Use Case Thanh toán vé xem phim

Actor Người dùng đã có tài khoản, nhân viên

Short Description Người dùng thanh toán số tiền tương ứng với vé mà người dùng đã đặt

Pre-Condition(s) Hệ thống đã thu thập thông tin đặt vé

Post-Condition(s) Thanh toán thành công và quay về trang chủ

1 Hệ thống hiển thị thông tin vé mà người dùng đặt

2 Yêu cầu người dùng chọn hình thức thanh toán tại quầy hoặc thanh toán qua hình thức online

4 Hệ thống lưu thông tin thanh toán

5 Thông báo thanh toán thành công

6 Điều hướng người dùng về trang chủ

Tài khoản thanh toán online của người dùng không đủ

5c1 Thông báo tài khoản người dùng không đủ để thực hiện thanh toán

5c2 Yêu cầu người dùng nhập vào nhập thông tin thẻ khác hoặc chọn hình thức thanh toán tại quầy

Bảng 21 Đặc tả thanh toán vé xem phim

Use case quản lý thanh toán vé xem phim

Use Case Quản lý thanh toán vé xem phim

Actor Nhân viên, Quản trị viên

Nhân viên và Quản trị viên sử dụng được các chức năng quản lý thanh toán vé xem phim của người dùng

Pre-Condition(s) Đã đăng nhập tài khoản nhân viên hoặc quản trị viên

Post-Condition(s) Hiển thị các tính năng quản lý và sử dụng các tính năng quản lý

1 Nhân viên, Quản trị viên chọn chức năng quản lý thanh toán

2 Hệ thống hiển thị các thông tin thanh toán và các chức năng quản lý tương ứng

3 Nhân viên, Quản trị viên sử dụng các chức năng quản lý thanh toán đó

Bảng 22 Đặc tả quản lý thanh toán vé xem phim

Use case đổi mật khẩu

Use Case Đổi mật khẩu

Short Description Đổi mật khẩu của tài khoản thành mật khẩu mới

Pre-Condition(s) Người dùng đã đăng nhập vào hệ thống

Post-Condition(s) Mật khẩu của tài khoản được đổi thành công

1 Người dùng truy cập vào trang đổi mật khẩu

2 Nhập các trường cần thiết

3 Nhấn nút xác nhận để gửi thông tin xuống hệ thống

4 Hệ thống xử lý và trả về kết quả

Mật khẩu cũ không chính xác

6d1 Hệ thống kiểm tra và thấy mật khẩu không trùng khớp, sau đó gửi thông báo lên View

6d2 Thông báo rằng sai mật khẩu 6d3 Quay lại bước 2 trong luồng sự kiện chính

Bảng 23 Đặc tả đổi mật khẩu

Use case bình luận bài viết

Use Case Bình luận bài viết

Short Description Thêm bình luận của một bài viết

Post-Condition(s) Thêm bình luận thành công và được hiển thị trong bài viết

1 Người dùng nhấn vào thành phần thêm bình luận trên View

2 Người dùng nhập nội dung muốn bình luận và nhấn nút đăng

3 Bình luận được gửi xuống hệ thống và cập nhật lên trang thông tin chi tiết bài viết

Bảng 24 Đặc tả bình luận bài viết

Use case chỉnh sửa bình luận bài viết

Use Case Chỉnh sửa bình luận bài viết

Short Description Chỉnh sửa bình luận của một bài viết

Post-Condition(s) Chỉnh sửa bình luận thành công và được hiển thị trong bài viết

1 Người dùng nhấn vào nút chỉnh sửa bình luận

2 Người dùng nhập nội dung muốn chỉnh sửa và nhấn nút bình luận

3 Bình luận được gửi xuống hệ thống và cập nhật lên trang thông tin chi tiết bài viết

Bình luận không tồn tại trong cơ sở dữ liệu

3a1 Hệ thống kiểm tra thấy phim không tồn tại không cơ sở dữ liệu 3a2 Thông báo không tìm thấy phim, kết thúc use case

Use case xóa bình luận bài viết

Use Case Xóa bình luận bài viết

Short Description Xóa bình luận của một bài viết

Post-Condition(s) Xóa bình luận thành công

1 Người dùng nhấn vào nút xóa bình luận

2 Bình luận được xóa dưới hệ thống và cập nhật lên trang thông tin chi tiết bài viết

Bình luận không tồn tại trong cơ sở dữ liệu

4a1 Hệ thống kiểm tra thấy phim không tồn tại không cơ sở dữ liệu 4a2 Thông báo không tìm thấy phim, kết thúc use case

Use case thích bài viết

Use Case Thích bài viết

Short Description Thích một bài viết hoặc gỡ thích một bài viết khi đã thích bài viết trước đó rồi

Post-Condition(s) Thích hoặc gỡ thích một bài viết thành công

1 Người dùng nhấn vào nút thích

2 Trạng thái được cập nhật lại hoạt ảnh nút thích thành đã thích hoặc chưa thích

Bài viết đã được thích

3a1 Hệ thống kiểm tra thấy bài viết đã được thích 3a2 Gỡ thích bài viết và hiển thị trạng thái lên màn hình

Bài viết chưa được thích

3a1 Hệ thống kiểm tra thấy bài viết chưa được thích 3a2 Thích bài viết và hiển thị trạng thái lên màn hình

Quản trị viên xem các thông tin thống kê và dữ liệu của hệ thống đặt vé

Pre-Condition(s) Quản trị viên đã đăng nhập tài khoản

Post-Condition(s) Hiển thị các thông tin trên dashboard

Main Flow 1 Quản trị viên chọn chức năng xem trang dashboard

2 Hệ thống hiển thị thông tin thống kê

Bảng 28 Đặc tả xem dashboard

Use case quản lý phim

Use Case Quản lý phim

Short Description Nhân viên và Quản trị viên sử dụng được các chức năng quản lý phim

1 Nhân viên, Quản trị viên chọn chức năng quản lý phim

2 Hệ thống hiển thị các thông tin chức năng thêm phim, xem thông tin phim, chỉnh sửa và xóa phim

3 Nhân viên, Quản trị viên sử dụng các chức năng quản lý đó

Bảng 29 Đặc tả use case quản lý phim

Use case quản lý tài khoản

Use Case Quản lý tài khoản

Short Description Quản trị viên sử dụng được các chức năng quản lý tài khoản

Pre-Condition(s) Đã đăng nhập tài khoản quản trị viên

Main Flow 1 Quản trị viên chọn chức năng quản lý tài khoản

2 Hệ thống hiển thị các thông tin chức năng thêm nhân viên, xem thông tin tài khoản, chỉnh sửa thông tin tài khoản, xóa tài khoản

3 Quản trị viên sử dụng các chức năng quản lý đó

Bảng 30 Đặc tả use case quản lý tài khoản

Use case quản lý bài viết

Use Case Quản lý bài viết

Short Description Nhân viên, Quản trị viên sử dụng được các chức năng quản lý bài viết

4 Nhân viên, Quản trị viên chọn chức năng quản lý tài khoản

5 Hệ thống hiển thị các thông tin chức năng thêm bài viết, xem thông tin bài viết, chỉnh sửa thông tin bài viết, duyệt bài viết, từ chối duyệt bài viết, xóa bài viết

Bảng 31 Đặc tả use case quản lý bài viết

Use case quản lý lịch chiếu phim

Use Case Quản lý lịch chiếu phim

Short Description Nhân viên, Quản trị viên sử dụng được các chức năng quản lý lịch chiếu phim

1 Nhân viên, Quản trị viên chọn chức năng quản lý lịch chiếu phim

2 Hệ thống hiển thị các thông tin chức năng thêm lịch chiếu, xem danh sách thông tin lịch chiếu

Bảng 32 Đặc tả use case quản lý lịch chiếu phim

Use case quản lý sự kiện

Use Case Quản lý sự kiện

Short Description Nhân viên, Quản trị viên sử dụng được các chức năng quản lý sự kiện

1 Nhân viên, Quản trị viên chọn chức năng quản lý sự kiện

2 Hệ thống hiển thị các thông tin chức năng thêm sự kiện, xem danh sách sự kiện, chỉnh sửa nội dung sự kiện

Bảng 33 Đặc tả use case quản lý sự kiện

Các lượt đồ sequence còn lại được đính kèm trong đường mã QR sau đây:

Hình 54 Mã QR của các lượt đồ Sequence còn lại

Thiết kế hệ thống

2.3.1 Thiết kế và xác định cấu trúc giao diện a Giao diện khách hàng, người dùng

- Xem thông tin chi tiết phim

- Xem tin tức, sự kiện

- Xem các bài Review phim

- Xem trang cá nhân người khác và chính mình

- Giao diện tìm kiếm phim

- Xem thông tin cá nhân, cập nhật thông tin, đổi mật khẩu, xem lịch sử đặt vé và thanh toán hóa đơn

- Giao diện yêu thích, bình luận bài Review

- Giao diện viết bài Review b Giao diện trang quản lý

- Quản lý tài khoản người dùng

- Quản lý chi nhánh rạp

- Quản lý các bài Review

- Quản lý sự kiện, tin tức

- Quản lý lịch chiếu phim c Giao diện nhân viên

- Gồm các giao diện giống như phần trang quản lý

- Đặt vé cho người dùng

2.3.2 Phân tích thiết kế a Giao diện khách hàng, người dùng

Hình 55 Giao diện đăng nhập

STT Tên xử lý Thuộc tính Điều kiện gọi

1 Tên tài khoản hoặc Email Text Input Điền tên tài khoản hoặc Email

2 Mật khẩu Text Input Điền mật khẩu

3 Đăng ký tài khoản Link Chuyển trang đăng ký

4 Ẩn/hiện mật khẩu Button Nhấn để chuyển đổi trạng thái ẩn, hiện mật khẩu

Bảng 34 Mô tả đăng nhập

Hình 56 Giao diện đăng ký

1 Tên tài khoản Text Input Điền tên tài khoản

2 Mật khẩu Text Input Điền mật khẩu

3 Nhập lại mật khẩu Text Input Điền mật khẩu

4 Họ và tên Text Input Điền họ và tên

5 Ẩn/hiện mật khẩu Button Nhấn để chuyển đổi trạng thái ẩn, hiện mật khẩu

6 Email Text Input Điền Email

Bảng 35 Mô tả đăng ký

Hình 57 Giao diện trang chủ

Hình 58 Giao diện đặt vé

- Xem thông tin chi tiết phim:

Hình 59 Giao diện xem thông tin phim

- Xem tin tức, sự kiện:

Hình 60 Giao diện xem tin tức, sự kiện

- Xem các bài Review phim:

Hình 61 Giao diện xem các bài viết review

- Xem trang cá nhân người khác và chính mình:

Hình 62 Thông tin cá nhân tác giả

Hình 63 Giao diện xem các bài viết mà tác giả viết

- Giao diện tìm kiếm phim:

Hình 64 Giao diện tính năng tìm kiếm phim

- Xem thông tin cá nhân, cập nhật thông tin, đổi mật khẩu, xem lịch sử đặt vé và thanh toán hóa đơn

Hình 65 Giao diện thông tin cá nhân

1 Tài khoản Text Input Không chỉnh sửa

2 Tên Text Input Có thể chỉnh sửa

3 Email Text Input Không chỉnh sửa

4 Cập nhật Button Xác nhận chỉnh sửa thông tin

Bảng 36 Mô tả đổi thông tin

Hình 66 Giao diện lịch sử đặt vé

Hình 67 Giao diện đổi mật khẩu

1 Mật khẩu cũ Text Input Có thể chỉnh sửa

2 Mật khẩu mới Text Input Có thể chỉnh sửa

3 Nhập lại mật khẩu mới Text Input Có thể chỉnh sửa

4 Đổi mật khẩu Button Xác nhận chỉnh sửa thông tin

5 Ẩn/hiện Button Nhấn để ẩn hiện trạng thái mật khẩu

Bảng 37 Mô tả đổi mật khẩu

- Giao diện các bài viết đã viết:

Hình 68 Giao diện các bài viết đã viết

- Giao diện các bài viết đã lưu:

Hình 69 Giao diện các bài viết đã lưu

- Giao diện yêu thích, bình luận bài Review:

Hình 70 Giao diện bài review

Hình 71 Giao diện viết bình luận

1 Để lại bình luận Text Input Nhấn vào để gõ

2 Xem thêm Button Xem thêm bình luận trước đó

3 Exit Button Nhấn để thoát

Bảng 38 Mô tả bình luận

Hình 72 Giao diện chỉnh sửa bình luận

1 Bình luận Text Input Nhấn vào để gõ

2 Đăng Button Xác nhận gửi bình luận

3 Exit Button Nhấn để thoát

Bảng 39 Mô tả viết bình luận

Hình 73 Giao diện xem bình luận

- Giao diện viết Review phim:

Hình 74 Giao diện viết review

1 Tiêu đề bài viết Text Input Nhấn vào để gõ

2 Mô tả ngắn gọn Text Input Nhấn vào để gõ

3 Nội dung Review Text Editor Nhấn vào để gõ và định hình các thuộc tính văn bản, hình ảnh

4 Thêm keyword Text Input Nhấn vào để gõ

5 Chọn hình ảnh Button Nhấn vào và chọn ảnh upload

Bảng 40 Mô tả viết bài review b Giao diện trang quản lý

Hình 75 Giao diện quản lý phim

Hình 76 Giao diện quản lý dashboard

Hình 77 Giao diện dashboard khác

- Quản lý tài khoản người dùng:

Hình 78 Giao diện quản lý tài khoản

- Quản lý chi nhánh rạp:

Hình 79 Giao diện quản lý chi nhánh rạp

- Quản lý các bài Review:

Hình 80 Giao diện quản lý các bài review

- Quản lý sự kiện, tin tức:

Hình 81 Giao diện quản lý tin tức, sự kiện

Hình 82 Giao diện quản lý vé

- Quản lý lịch chiếu phim:

Hình 83 Giao diện quản lý lịch chiếu

- Quản lý hóa đơn, thanh toán:

Hình 84 Giao diện quản lý hóa đơn, thanh toán c Giao diện nhân viên

- Gồm các giao diện giống như phần trang quản lý

Hình 85 Giao diện quản lý thanh toán tại quầy

- Đặt vé cho người dùng:

Hình 86 Giao diện quản lý đặt vé tại quầy

TRIỂN KHAI VÀ KIỂM THỬ HỆ THỐNG

Triển khai hệ thống

3.1.1 Triển khai hệ thống Frontend

Triển khai hệ thống trên Docker

Ta cấu hình server Nginx để khởi chạy hệ thống trên docker như hình sau đây:

Sau đó ta cấu hình docker file

Khi đã cấu hình trong ta cần cấu hình file kết nối CirlcleCi

Hình 89 Cấu hình file kết nối CircleCi

Sau khi kết nối thành công, chỉ cần đẩy đoạn mã mới nhất lên nhánh đã thiết lập Hệ thống sẽ tự động triển khai lên Docker để chúng ta sử dụng.

3.1.2 Triển khai hệ thống Backend

Triển khai Spring Boot, Database Mysql bằng docker trên máy ảo

Docker là nền tảng giúp xây dựng, triển khai và chạy ứng dụng dễ dàng thông qua việc sử dụng các container trên nền tảng ảo hóa Bằng cách đóng gói ứng dụng cùng với tất cả các thư viện và phụ thuộc cần thiết, Docker tạo ra một package hoàn chỉnh Để thực hiện điều này, trước tiên cần có một máy ảo VPS hoạt động liên tục, nơi chúng ta sẽ cài đặt server và database, trong trường hợp này là VPS của Azure.

Và ở đây dùng key ssh để truy cập máy ảo

Hình 91 Key ssh truy cập máy ảo

Hình 92 Khởi tạo thành công

Sau khi tạo thành công virtual machine để đặt server ta truy cập vào đó và cài đặt các package cần thiết như docker, …

Sau khi cài đặt thành công docker ta tiến hành pull image Mysql về theo hướng dẫn trên trang https://hub.docker.com/_/mysql

Sau khi cài đặt thành công, bạn hãy chạy hình ảnh thành một container trong Docker và thiết lập chế độ tự động khởi động Khi cấu hình hoàn tất, bạn sẽ thấy một container được tạo ra như hình dưới đây.

Và ta chỉ cần truy cập đúng đường dẫn của server và đúng port của mysql để kết nối database

Tiếp theo ta sẽ tiến hành hosting app Spring boot Ở đây sử dụng dịch vụ App Service của Azure

Hình 94 App service của Azure

Màn hình tạo mới như hình

Bạn có thể chọn cách thức host như sử dụng code, Docker container hoặc host một website tĩnh Sau khi quyết định cách thức host, hãy đăng nhập vào GitHub và cấu hình file CICD để tự động cập nhật mã nguồn mới nhất lên host mỗi khi bạn đẩy code lên hệ thống.

Ta có File CICD config

Sau khi tạo thành công ta sẽ được như hình

Hình 98 Giao diện khởi tạo thành công

Ta test thử api thì đã lấy được thông tin api thành công

Link Swagger đã truy cập thành công

- Link hosting Backend: https://api-goldenticketnew.tiktzuki.com

- Link hosting trang web: https://goldenticketnew.tiktzuki.com

- Link Api-docs: https://api-goldenticketnew.tiktzuki.com/swagger-ui/index.html#

- Link Git: https://github.com/MinP0206/goldenticketnew

- Front-End: https://github.com/lequocvinh15042001/Project_movie_ticket_booking_T11

Thông tin về cơ sở dữ liệu

- Link truy cập cơ sở dữ liệu: Host: 14.225.205.235

- Chuỗi kết nối: jdbc:mysql://14.225.205.235:33306/cinema2

Kiểm thử hệ thống

Kết quả thử nghiệm hệ thống đặt vé xem phim online đã được thực hiện trên máy chủ, với dữ liệu được thu thập từ API triển khai trên Docker Sau quá trình kiểm thử, nhóm nghiên cứu đã tổng hợp được bảng kết quả thử nghiệm.

STT Nội dung thử nghiệm Số liệu

1 Số lượng yêu cầu chức năng 27

2 Số testcase trung bình được liệt kê trên mỗi yêu cầu 2

3 Tổng số testcase trên tất cả requirement 54

4 Tổng số testcase đã thực thi 54

7 Tổng số testcase bị chặn 0

8 Tổng số testcase không được thực thi 0

10 Tổng số khiếm khuyết chấp nhận được 4

11 Số khiếm khuyết được pending 2

12 Số khiếm khuyết được sửa 0

Bảng 41 Một số thử nghiệm và số liệu

Tỉ lệ thực thi testcase được xác định bằng số testcase đã thực thi trên tổng số testcase liệt kê, đạt 100% Độ hiệu quả của testcase được xác định bởi số khuyết điểm tìm thấy trên số testcase thực thi, là 11,1% Tỉ lệ testcase failed là 11,1%, tính từ tổng số testcase bị thất bại trên tổng số testcase thực thi Tỉ lệ testcase bị blocked là 0%, dựa trên tổng số testcase bị block trên tổng số testcase thực thi Tỉ lệ khiếm khuyết được sửa là 0%, xác định từ tổng số khiếm khuyết đã được sửa trên tổng số khiếm khuyết tìm thấy Tỉ lệ khiếm khuyết chấp nhận được là 6,67%, tính từ tổng số khiếm khuyết chấp nhận được trên tổng số khiếm khuyết tìm thấy Cuối cùng, tỉ lệ khiếm khuyết bị pending là 3,33%, dựa trên tổng số khiếm khuyết bị pending trên tổng số khiếm khuyết được báo cáo.

3.2.2 Đánh giá kết quả thử nghiệm

Mục tiêu chính của hệ thống đặt vé xem phim online là đáp ứng các yêu cầu chức năng cơ bản của dự án Hệ thống có khả năng mở rộng để xử lý lượng dữ liệu lớn, tuy nhiên, bản thử nghiệm hiện tại chưa đủ để đưa ra kết luận cụ thể về khả năng mở rộng, do chỉ được thử nghiệm trong môi trường nhỏ với dữ liệu hạn chế Các thử nghiệm này thực hiện trong điều kiện như vậy chưa phản ánh đầy đủ hiệu suất của hệ thống.

94 thể không phản ánh đúng với khi hoạt động trên các hệ thống khác và các tình huống xảy ra khác nhau

Kết luận: Qua quá trình phát triển hệ thống và kiểm thử, chúng tôi đã tổng hợp kết quả từ nội dung thử nghiệm, từ đó đưa ra đánh giá chi tiết về quá trình chạy thử.

Ưu điểm

Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày … , tháng … , năm 2023

(Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự do - Hạnh Phúc

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Trương Minh Phương MSSV 1: 19110269

Họ và tên Sinh viên 2: Lê Quốc Vinh MSSV 2: 19110029

Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website đặt vé xem phim online

Họ và tên Giáo viên phản biện:………

1 Về nội dung đề tài & khối lượng thực hiện:

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày … , tháng … , năm 2023

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

Nhóm đề tài xin chân thành cảm ơn Trường Đại học Sư phạm Kỹ thuật TP.HCM và Khoa Đào tạo Chất lượng cao đã tạo điều kiện thuận lợi cho nhóm trong quá trình học hỏi và thực hiện đề tài Đặc biệt, nhóm xin gửi lời cảm ơn đến giảng viên ThS Hoàng Công Trình vì đã hỗ trợ, đóng góp ý kiến quý báu cho nhóm và đề tài trong suốt khóa luận tốt nghiệp Cảm ơn thầy đã truyền đạt kiến thức chuyên ngành và kinh nghiệm thực tế, giúp hoàn thiện đề tài "Xây dựng website đặt vé xem phim online."

Trong quá trình thực hiện đề tài, nhóm đã áp dụng kiến thức về xây dựng website, tuy nhiên do những hạn chế khách quan và chủ quan, không thể tránh khỏi một số sai sót Chúng tôi rất mong nhận được ý kiến đóng góp từ thầy để cải thiện và tích lũy thêm kinh nghiệm quý báu cho tương lai.

Một lần nữa, nhóm xin được phép gửi lời cảm ơn sâu sắc đến sự giúp đỡ của thầy trong quá trình thực hiện đề tài.

Xin trân trọng cảm ơn!

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

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

1.3 Cách tiếp cận và phương pháp nghiên cứu 1

1.3.1 Đối tượng nghiên cứu 1

1.4 Phân tích những công trình có liên quan 3

1.4.2 Website thứ hai: Book My Show 5

1.4.3 Website thứ ba: Galaxy Cine 8

1.4.4 Website thứ tư: PVR Cinemas 12

1.5 Kết quả dự kiến đạt được 18

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 19

1.1 Các tiêu chính đánh giá một website đặt vé xem phim 19

1.1.1 Website có độ tin cậy cao 19

1.1.2 Thiết kế của giao diện 20

1.1.3 Ứng dụng trên đa nền tảng 20

1.1.4 Nội dung của trang web 21

1.1.5 Tối ưu hóa trải nghiệm đọc đặt vé của người sử dụng 21

1.2.1 Tổng quan công nghệ sử dụng 23

1.2.2 Chi tiết công nghệ áp dụng 24

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 38

2.1.2 Phân hệ người dùng hệ thống và chức năng 38

2.1.3 Cụ thể hóa các chức năng 39

2.1.5 Một số yêu cầu phi chức năng 44

2.2 Mô hình hóa hệ thống 45

2.2.3 Mô hình thực thể (Entity – Relationship Diagram): 47

2.2.4 Quan hệ giữa các đối tượng, thông tin 47

2.3.1 Thiết kế và xác định cấu trúc giao diện 71

CHƯƠNG 3: TRIỂN KHAI VÀ KIỂM THỬ HỆ THỐNG 85

3.1.1 Triển khai hệ thống Frontend 85

3.1.2 Triển khai hệ thống Backend 86

3.2.2 Đánh giá kết quả thử nghiệm 93

4 Hướng phát triển của đề tài 96

DANH MỤC TÀI LIỆU THAM KHẢO 97

Hình 1 Giao diện chọn ghế ngồi 5

Hình 2 Giao diện chọn rạp 5

Hình 3 Giao diện trang chủ Book my Show 8

Hình 4 Nội dung danh mục tạo ra sức hấp dẫn của website 8

Hình 6 Giao diện bình luận phim/blog điện ảnh 11

Hình 7 Giao diện chọn ghế 12

Hình 8 Giao diện trang chủ PVR Cinemas 14

Hình 9 Tính năng tìm kiếm bằng giọng nói 15

Hình 10 Giao diện đặt vé 15

Hình 11 Giao diện xem trailer phim 15

Hình 12 Thể hiện thông tin về phim 16

Hình 13 Tiêu chí website có tính bảo mật 19

Hình 15 Website chạy đa nền tảng 20

Hình 17 Tối ưu hóa trải nghiệm của người dùng 21

Hình 18 Tiêu chí về hiệu suất trang web 22

Hình 19 Kiến trúc hệ thống 23

Hình 21 Ví dụ về cú pháp JSX 24

Hình 22 Cấu trúc thẻ tương tự HTML 24

Hình 23 Ví dụ về DOM 25

Hình 24 Ví dụ về Redux 26

Hình 25 Ví dụ về Action 26

Hình 26 Ví dụ về Reducer 27

Hình 27 Ví dụ về tạo store 27

Hình 29 Nguyên lý hoạt động của Redux 28

Hình 30 Triển khai ứng dụng React 28

Hình 32 Chọn Clone Git Repository để clone source 29

Hình 33 Dán URL của github repository 29

Hình 34 Hoàn tất quá trình clone dự án về máy 29

Hình 35 Cài đặt lần đầu 30

Hình 36 Khởi chạy dự án 30

Hình 37 Kết quả hiển thị trên Terminal 31

Hình 38 File docker compose Cadence 32

Hình 39 Thư viện Uber Cadence 33

Hình 40 Thiết lập Cadence config 33

Hình 41 Thiết lập Workflow Worker config 34

Hình 42 Khai báo một phiên công việc 34

Hình 43 Giao diện Cadence Web 34

Hình 44 Tổng quan quy trình CircleCi 35

Hình 45 Hiển thị các dự án 35

Hình 46 Hiển thị các công nghệ mẫu 36

Hình 47 Chỉnh sửa file config CircleCi 36

Hình 48 Đã kết nối thành công với CircleCi 37

Hình 49 Lượt đồ chức năng 41

Hình 50 Lượt đồ lớp (Class) 46

Hình 51 Mô hình thực thể ERD 47

Hình 52 Biểu đồ Sequence đặt vé 50

Hình 53 Colaboration đặt vé xem phim 50

Hình 54 Mã QR của các lượt đồ Sequence còn lại 71

Hình 55 Giao diện đăng nhập 72

Hình 56 Giao diện đăng ký 73

Hình 57 Giao diện trang chủ 73

Hình 58 Giao diện đặt vé 74

Hình 59 Giao diện xem thông tin phim 74

Hình 60 Giao diện xem tin tức, sự kiện 74

Hình 61 Giao diện xem các bài viết review 74

Hình 62 Thông tin cá nhân tác giả 75

Hình 63 Giao diện xem các bài viết mà tác giả viết 75

Hình 64 Giao diện tính năng tìm kiếm phim 75

Hình 65 Giao diện thông tin cá nhân 76

Hình 66 Giao diện lịch sử đặt vé 76

Hình 67 Giao diện đổi mật khẩu 77

Hình 68 Giao diện các bài viết đã viết 77

Hình 69 Giao diện các bài viết đã lưu 78

Hình 70 Giao diện bài review 78

Hình 71 Giao diện viết bình luận 78

Hình 72 Giao diện chỉnh sửa bình luận 79

Hình 73 Giao diện xem bình luận 79

Hình 74 Giao diện viết review 80

Hình 75 Giao diện quản lý phim 80

Hình 76 Giao diện quản lý dashboard 81

Hình 77 Giao diện dashboard khác 81

Hình 78 Giao diện quản lý tài khoản 81

Hình 79 Giao diện quản lý chi nhánh rạp 82

Hình 80 Giao diện quản lý các bài review 82

Hình 81 Giao diện quản lý tin tức, sự kiện 82

Hình 82 Giao diện quản lý vé 83

Hình 83 Giao diện quản lý lịch chiếu 83

Hình 84 Giao diện quản lý hóa đơn, thanh toán 83

Hình 85 Giao diện quản lý thanh toán tại quầy 84

Hình 86 Giao diện quản lý đặt vé tại quầy 84

Hình 89 Cấu hình file kết nối CircleCi 86

Hình 91 Key ssh truy cập máy ảo 87

Hình 92 Khởi tạo thành công 87

Hình 94 App service của Azure 88

Hình 98 Giao diện khởi tạo thành công 91

Bảng 1 Khảo sát website CGV 4

Bảng 2 Khảo sát website Bookmyshow 7

Bảng 3 Khảo sát website Galaxy Cinema 11

Bảng 4 Khảo sát website PVR Cinemas 14

Bảng 5 Đánh giá tổng kết khảo sát 17

Bảng 6 Mô tả lượt đồ chức năng 44

Bảng 7 Đặc tả đặt vé xem phim 49

Bảng 8 Đặc tả tìm kiếm phim 51

Bảng 9 Đặc tả đăng ký tài khoản hệ thống 52

Bảng 10 Đặc tả tạo tài khoản nhân viên 53

Bảng 11 Đặc tả đăng nhập tài khoản hệ thống 54

Bảng 12 Đặc tả phê duyệt bài 55

Bảng 13 Đặc tả từ chối phê duyệt bài 56

Bảng 14 Đặc tả thêm bài viết 57

Bảng 15 Đặc tả xem chi tiết bài viết 58

Bảng 16 Đặc tả use case lưu bài viết yêu thích 59

Bảng 17 Đặc tả chỉnh sửa thông tin tài khoản 60

Bảng 18 Đặc tả xem danh sách phim 60

Bảng 19 Đặc tả xem lịch chiếu phim 61

Bảng 20 Đặc tả xem nội dung chi tiết phim 62

Bảng 21 Đặc tả thanh toán vé xem phim 63

Bảng 22 Đặc tả quản lý thanh toán vé xem phim 63

Bảng 23 Đặc tả đổi mật khẩu 64

Bảng 24 Đặc tả bình luận bài viết 65

Bảng 28 Đặc tả xem dashboard 68

Bảng 29 Đặc tả use case quản lý phim 68

Bảng 30 Đặc tả use case quản lý tài khoản 69

Bảng 31 Đặc tả use case quản lý bài viết 69

Bảng 32 Đặc tả use case quản lý lịch chiếu phim 70

Bảng 33 Đặc tả use case quản lý sự kiện 70

Bảng 34 Mô tả đăng nhập 72

Bảng 35 Mô tả đăng ký 73

Bảng 36 Mô tả đổi thông tin 76

Bảng 37 Mô tả đổi mật khẩu 77

Bảng 38 Mô tả bình luận 79

Bảng 39 Mô tả viết bình luận 79

Bảng 40 Mô tả viết bài review 80

Bảng 41 Một số thử nghiệm và số liệu 93

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

Ngày nay, việc ứng dụng công nghệ thông tin để tối ưu hóa trải nghiệm người dùng là yếu tố quan trọng trong mọi lĩnh vực Trong ngành rạp chiếu phim, nhu cầu này càng trở nên cấp thiết khi nhu cầu giải trí của người dùng ngày càng tăng, dẫn đến lượng khán giả ngày càng đông Điều này cho thấy tiềm năng và sức ảnh hưởng lớn của lĩnh vực rạp chiếu phim.

Nhu cầu sử dụng các trang đặt vé trực tuyến ngày càng tăng cao, thay thế dần hình thức đặt vé thủ công truyền thống Với nhịp sống bận rộn, việc đặt vé trực tuyến trở thành lựa chọn ưu việt nhờ vào sự tiện lợi, cho phép người dùng truy cập mọi lúc, mọi nơi.

Nhận thấy tầm quan trọng của chuyển đổi số trong việc đặt vé trực tuyến, nhóm nghiên cứu đã quyết định chọn đề tài “Xây dựng website đặt vé xem phim online” cho Khóa luận tốt nghiệp.

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

Giải pháp đặt vé online cho các rạp chiếu phim giúp khách hàng dễ dàng mua vé mà không phải chờ đợi, xếp hàng Điều này không chỉ giảm thiểu thời gian chờ đợi mà còn tạo ra quy trình chọn vé, đặt vé và thanh toán nhanh chóng, tiện lợi.

Quản lý vé và doanh thu trở nên dễ dàng hơn so với phương pháp bán vé trực tiếp truyền thống, nhờ vào việc hiển thị thông tin và thống kê một cách trực quan, giúp người quản lý theo dõi hiệu quả hơn.

1.3 Cách tiếp cận và phương pháp nghiên cứu

1.3.1 Đối tượng nghiên cứu Đối tượng nghiên cứu trong đề tài “Xây dựng website đặt vé xem phim online” được nhóm nghiên cứu thông qua các khảo sát thực tế gồm có:

Các công nghệ Spring Boot và ReactJS mang lại nhiều lợi ích cho việc phát triển ứng dụng, bao gồm cấu trúc mạnh mẽ, tính năng đa dạng và ưu điểm vượt trội Spring Boot nổi bật với khả năng tin cậy và bảo mật cao, giúp xây dựng các ứng dụng backend hiệu quả Trong khi đó, ReactJS cung cấp trải nghiệm người dùng mượt mà và linh hoạt, cho phép phát triển giao diện frontend hấp dẫn Sự kết hợp giữa Spring Boot và ReactJS không chỉ nâng cao hiệu suất mà còn đảm bảo tính bảo mật cho các ứng dụng hiện đại.

Các website tương tự cung cấp cái nhìn sâu sắc về cách thức vận hành và quy trình đặt vé, đồng thời chỉ ra những tính năng cần thiết cho một nền tảng đặt vé xem phim trực tuyến Việc tham khảo và áp dụng những yếu tố này sẽ giúp nhóm sinh viên phát triển đề tài một cách hiệu quả hơn.

Dựa trên những đặc điểm và nhu cầu sử dụng của người dùng, cần thiết kế các chức năng và tính tương thích phù hợp Đồng thời, cần đưa ra các giải pháp hiệu quả nhằm giải quyết những vướng mắc mà người dùng gặp phải.

- Quản lý và nhân viên rạp: đáp ứng các kỹ năng, nhu cầu quản lý và thao tác của quản lý và nhân viên sử dụng

Nhóm sinh viên đã xác định và thiết lập phạm vi nghiên cứu, từ đó thực hiện và tuân thủ các quy tắc đã đề ra Các phạm vi nghiên cứu được liệt kê bao gồm:

Nhóm chúng tôi tập trung vào việc áp dụng công nghệ back-end với Spring Boot và front-end sử dụng ReactJs, cùng với cơ sở dữ liệu MySQL Ngoài ra, chúng tôi còn sử dụng các công nghệ hỗ trợ khác như Circle CI Từ đó, chúng tôi vận dụng kỹ năng lập trình và kiến thức đã học để xây dựng cấu trúc và chức năng cho trang web.

Website phục vụ đối tượng người dùng bao gồm khách hàng và thành viên đã đăng ký tài khoản, đồng thời hướng đến các rạp chiếu phim trong nước và các hệ thống rạp lớn tại Việt Nam.

Website hoạt động trong môi trường giải trí, chuyên cung cấp dịch vụ đặt vé xem phim tại các rạp Nó không chỉ giúp người dùng dễ dàng đặt vé mà còn hỗ trợ các chủ rạp phim trong việc quản lý hiệu quả hơn Quy trình đặt vé và thanh toán được tối ưu hóa, giúp tiết kiệm chi phí in ấn và nâng cao trải nghiệm cho cả khách hàng và nhà quản lý.

Hướng phát triển của đề tài

Dự án được phát triển trong thời gian ngắn, do đó không tránh khỏi một số sai sót và chưa tối ưu hóa trải nghiệm người dùng Tuy nhiên, dự án vẫn đang được cập nhật liên tục để bổ sung các tính năng mới nhất và khắc phục những nhược điểm hiện có.

Các tính năng chưa thực hiện được:

- Thanh toán sử dụng chữ ký số để xác thực

- Chia sẻ bài đăng lên mạng xã hội

- Chatbot đặt vé tự động bằng AI

- Chat trực tuyến với công tác viên hỗ trợ

- Kết nối với nhiều hệ thống rạp khác với chức năng thiết kế tự động chỗ ngồi theo sơ đồ mà bên cung cấp thiết kế

- Cải thiện tốc độ tải dữ liệu web

- Nâng cấp hệ thống quản lý với nhiều tính năng hỗ trợ hơn

DANH MỤC TÀI LIỆU THAM KHẢO

[1] Giới thiệu JSX, trang chủ ReactJs

(https://vi.reactjs.org/docs/introducing-jsx.html)

[2] Hiểu sao về Virtual DOM trong ReactJs, Nguyen Duc Anh Tuan, ngày 14 tháng 7 năm 2018

(https://viblo.asia/p/hieu-sao-ve-virtual-dom-trong-reactjs-bWrZngDblxw)

[3] Redux cơ bản, Le Van Giang, ngày 15 tháng 9 năm 2018

(https://viblo.asia/p/redux-co-ban-m68Z00JdZkG)

(https://cadenceworkflow.io/docs/get-started/)

Tiêu đề	Xây Dựng Website Đặt Vé Xem Phim Online
Tác giả	Trương Minh Phương, Lê Quốc Vinh
Người hướng dẫn	ThS. Hoàng Công Trình
Trường học	Đại học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Khóa Luận Tốt Nghiệp
Năm xuất bản	2023
Thành phố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	112
Dung lượng	8,01 MB