Đồ án xây dựng website đặt vé xem phim online

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

Ngày nay, ứng dụng công nghệ thông tin vào việc tối ưu hóa trải nghiệm người dùng là một trong những yếu tố then chốt trong mọi lĩnh vực Đối với lĩnh vực rạp chiếu phim, nhu cầu này ngày càng trở nên thiết yếu hơn khi nhu cầu giải trí của người dùng ngày càng lớn dần kéo theo lượng người dùng ngày một lớn hơn cho thấy tiềm năng và sức ảnh hưởng cực kỳ lớn của lĩnh vực rạp chiếu phim.

Chính điều này đã thúc đẩy nhu cầu sử dụng các trang đặt trực tuyến ngày một lớn mạnh và phổ biến khắp toàn cầu, thay thế một phần hình thức đặt vé thủ công tại rạp trong quá khứ Với nhịp sống bận rộn, sử dụng trang đặt vé trực tuyến dường như là lựa chọn hàng đầu cho bất kỳ người dùng nào bởi sự thuận tiện mà nó mang lại, có thể truy cập mọi lúc mọi nơi.

Nhận thấy được sự thiết yếu trong công cuộc chuyển đổi số hình thức đặt vé trực tuyến Nhóm đề tài đã thống nhất lựa chọn đề tài “Xây dựng website đặt vé xem phim online” làm đề tài cho Khóa luận tốt nghiệp.

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

Cung cấp cho các rạp chiếu phim một giải pháp đặt vé online thuận tiện Góp phần giảm thiểu tình trạng khách hàng phải chờ, xếp hàng và đợi lâu để được mua vé Tạo ra một quy trình chọn vé – đặt vé – thanh toán vé thuận lợi.

Việc quản lý vé và doanh thu được thuận lợi hơn so với cách bán vé trực tiếp và truyền thống Thông tin và thống kê được hiển thị trực quan, giúp người quản lý dễ dàng theo dõi.

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 đã thiết lập phạm vi mà nhóm đã nghiên cứu, dựa vào đó thực hiện và tuân thủ các quy tắc trong đó, nhóm liệt kê các phạm vi sau đây:

- Về công nghệ: Nhóm xoay quanh việc áp dụng các công nghệ về back-end là Spring boot, về front-end là ReactJs, cơ sở dữ liệu nhóm sử dụng là MySQL Ngoài ra nhóm còn vận dụng các công nghệ khác hỗ trợ như Circle CI,… Từ đó, vận dụng các kỹ năng lập trình và kiến thức đã được học, áp dụng chúng vào việc xây dựng cấu trúc và chức năng của trang web.

- Về đối tượng mà website phục vụ: Nhóm nghiên cứu hướng đến các đối tượng người dùng với các chức năng dành cho khách hàng, thành viên đăng ký tài khoản Bên cạnh đó hướng đến các rạp chiếu phim trong nước, các hệ thống rạp lớn tại Việt Nam.

- Về môi trường hoạt động: website hoạt động trong môi trường giải trí, phục vụ cho việc đặt vé xem phim tại các rạp Bên cạnh đó là một quy trình đặt vé và thanh toán giúp việc quản lý của các chủ rạp phim trong lĩnh vực giải trí được thuận tiện hơn, tiết kiệm chi phí in ấn.

- Về kỹ năng vận hành: Đối với người dùng, chỉ cần thao tác xem, tìm kiếm, lựa chọn,viết nội dung (trong chức năng viết review phim) và thanh toán Đối với quản lý và nhân viên, đòi hỏi nghiệp vụ trong công việc như tạo mới, xóa, cập nhật và quan sát các dữ liệu như phim, lịch chiếu phim, nội dung review của người dùng, tin tức, sự kiện và số liệu,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 còn có các chi nhánh trên toàn cầu CGV được viết tắt từ 3 chữ cái bắt đầu của các từ: Cultural, Great và Vital Hiện nay, chỉ tính riêng ở Hàn Quốc, chuỗi rạp đã có tổng cộng 142 địa điểm, 681 màn hình với hơn 100 ngàn ghế ngồi.

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

- Bố cục bắt mắt, phù - Học hỏi cách thiết kế hợp với thị hiếu bạn giao diện có thể bao đọc hàm nhiều lĩnh vực hot

Giao diện - Tin tức nổi bật và mới trên thị trường. trang chủ nhất về phim được cập Đáng để học hỏi - Đẩy tin tức nóng hỏi nhật liên tục lên đầu.

- Tốc độ tải rất nhanh - Xử lý tốc độ truyền chóng ổn định.

- Giao diện chọn rạp và - Học hỏi giao diện đặt vé và cách sắp xếp bố đặt vé thuận tiện và cục đặt vé để thuận

Dịch vụ của trực quan. Đáng để học hỏi tiện nhất cho người người dùng - Có hệ thống điểm Hình 1 thưởng 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ử lý khối lượng dữ xác, đa dạng các thể liệu lớn với tốc độ ổn loại phim. định.

- Các sự kiện và ưu đãi

Nội dung Đáng để học hỏi - Luôn cập nhật phim, Hình 2 được thiết kế ngay phía sự kiện và khuyến mãi dưới các phim hot giúp người dùng có thể dễ mới. dàng theo dõi các khuyến mãi.

- Trải nghiệm hoàn - Kết hợp hài hòa giữa toàn thuận tiện, nội sự đơn giản trong cách dung rất khoa học, bài

Trải sử dụng website để nghiệm bản Đáng để học hỏi người dùng dễ dàng

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

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: Là một website đặt vé xem phim lâu đời có thể đặt vé trên rất nhiều quốc gia trên thế giới Người dùng có thể đặt vé trên website với hệ thống các cụm rạp trải dài trên khắp thế

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

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

- Thể hiện những bộ trọng. phim nổi bật nhất cùng - Tốc độ load dữ liệu với giao diện quảng cáo trên trang chủ rất bắt mắt nhanh và mượt mà.

- Có thêm danh mục lọc - Có thêm phần cái thể loại phim ở trang Trending Searches

Giao diện chủ giúp người dùng có Right Now giúp Hình 3, trang chủ trải nghiệm chọn phim người dùng có thể Đáng để học hỏi Hình 4 tốt hơn tham khảo các bộ

- Có thêm các sự kiện phim được tìm kiếm online streaming để gần đây với tần suất người dùng có thể đăng cao nhất. ký và xem trực tiếp thông qua trang web hoặc các nền tảng stream khác nhau.

- Có thể đăng nhập - Thêm dịch vụ đăng thông qua Google, nhập khác ngoài tài

Email, Apple khoản mặc định cho

Dịch vụ của - Có khả năng thanh toán Đáng để học hỏi người dùng. người dùng quốc tế và các kênh - Có khả năng thanh thanh toán như Visa, toán thông qua các

Master Card kênh thanh toán trong nước Việc 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 - Phù hợp để học hỏi trong việc xử lý dữ lọc rất kĩ và chính xác vì liệu và các bộ phim đây là trang web đa quốc có xu hướng dễ tiếp gia cận người dùng

Nội dung - Có rất nhiều danh mục Đáng để học hỏi. nhất. khác nhau cũng như các

- Học hỏi cách đặt sự kiện được cập nhật bố cục các danh liên tục. mục.

Trải nghiệm đặc biệt khi lọc nội dung, sắp

Trải xếp bố cục, xử lý đặt được tiếp cận một nghiệm Đáng để học hỏi vé và chọn rạp cũng website đa quốc gia với dùng như cách tiếp cận nhiều dịch vụ hấp dẫ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

Lý do chọn: Galaxy Cinema là một trong những công ty tư nhân đầu tiên về điện ảnh được thành lập từ năm 2003, đã khẳng định thương hiệu là 1 trong 10 địa điểm vui chơi giải trí được yêu thích nhất Ngoài hệ thống rạp chiếu phim hiện đại, thu hút hàng triệu lượt người đến xem, Galaxy

Cinema còn hấp dẫn khán giả bởi không khí thân thiện cũng như chất lượng dịch vụ hàng đầu. Website cung cấp dịch vụ đặt vé, mua vé nhanh chóng chỉ với vài thao tác đơn giản mà không cần chúng ta phải ra rạp, vô cùng tiện lợi cho người dùng.

- Bố cục rất ưa nhìn, bắt - Nên xử lý các mắt, thể hiện được các nội poster, slider trên dung, mục đích website đẹp, thẩm

- Giao diện mới mẻ, cuốn mỹ cao. hút, thể hiện cho người - Đưa nhiều phim dùng rất nhiều phim hot, phim đang

Giao diện - Nền trang web sáng, chiếu lên trên. trang chủ tươi mới thể hiện sự hiện Đáng để học hỏi - Thể hiện chức Hình 5 đại, dễ nhìn 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ý - Nên liên kết nhiều thông qua số điện thoại, nền tảng mạng xã email. hội vìthị hiếu về

- Người dùng có các chức

Dịch vụ của MXH ngày càng năng chính như đặt vé Đáng để học hỏi Hình 6, người dùng tăng cao. nhanh, xem nội dung và Hình 7

- Đưa các chức năng lịch chiếu cá phim. chính lên đầu trang

- Tìm kiếm thông tin về tạo sự thuận tiện.

- Ngoài ra người dùng còn - Mới mẻ, chân thực được hưởng các ưu đãi, với các bình luận khuyến mãi 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 - Xử lý khối lượng

- Các phim mới được cập dữ liệu lớn với tốc nhật mỗi ngày độ ổn định.

Nội dung - Luôn có phần tin liên Đáng để học hỏi - Luôn cập nhật quan đi kèm theo bài viết phim mới. khiến cho người đọc rất - Xử lý phần tin liên hứng thú khi tìm kiếm, đặt quan khéo léo. 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.

- Trải nghiệm hoàn toàn - Kết hợp hài hòa thuận tiện, nội dung rất giữa sự đơn giản

Trải khoa học, bài bản trong cách sử dụng nghiệm - Cảm thấy phù hợp và Đáng để học hỏi website và sự độc dùng thuận tiện hơn khi không đáo, phong phú về cần ra trực tiếp rạp phim mặt nội dung mà để đặt vé 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

Lý do chọn: PVR Cinemas là website thuộc công ty PVR dẫn đầu thị trường về số lượng rạp chiếu phim tại Ấn Độ Kể từ năm 1997, thương hiệu này đã định nghĩa lại ngành công nghiệp điện ảnh và cách mọi người xem phim trong nước.

- Giao diện nổi bật và dễ - Các poster, slider được chú trọng và nhìn với hai tone màu đưa vào đầu trang. chính là đen và vàng.

- Tập trung về màu Hình 8,

- Phối màu đơn giản sắc giao diện, tối Hình 9,

Giao diện nhưng mang đậm tính giản nhưng phối Hình 10, trang chủ chất của một rạp chiếu Đáng để học hỏi màu phù hợp với sở Hình 11 phim hiện đại. thích người dùng.

- Bố cục đẹp mắt, vừa

- Đầy đủ các chức tầm nhìn và không quá năng tìm kiếm, ngợp. trình bày phim ngay cả khi vào trang chủ.

- Người dùng chọn - Đưa các tính năng thân thiện và giúp ta thành phố để lọc ra xác định chính xác những bộ phim phù hợp. được phân vùng

- Người dùng có thể người dùng ngay từ đăng nhập/đăng ký tài bước đầu vào trang khoản hoặc liên kết tài

Dịch vụ của khoản với Google, web Đáng để học hỏi - Liên kết mạng xã người dùng Facebook Hình 12 hội.

- Mới mẻ, đa dạng, chọn các loại hình rạp hiện đại, đầu tư các chiếu phim, công nghệ công nghệ. chiếu phim.

- Có tính năng tìm kiếm nghệ AI vào tính bằng giọng nói. năng tìm kiếm.

- Chủ yếu trình bày các phim Ấn Độ phù hợp với - Xử lý khối lượng thị hiếu người Ấn Độ dữ liệu lớn với tốc với từng khu vực độ ổn định.

Nội dung - Các xuất chiếu củaĐáng để học hỏi - Luôn cập nhật phim đến từ nguồn phim mới. chính thống của PVR - Xử lý phần tin liên

- Các phim mới được quan khéo léo. cập nhật mỗi ngày.

- 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 - Nên xây dựng các chuyên nghiệp, thể hiện tính năng độc đáo, các thông tin đơn giản, các hình thức hài dễ hiểu, người dùng dễ hòa với nhau. dàng đặt được vé nhanh - Truyền tải nội

Trải chóng dung và thông tin

- Cảm thấy phù hợp và về phim để người nghiệm Đáng để học hỏi. thuận tiện hơn khi không dùng nắm rõ. dù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.

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.

GIAO DIỆN + 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.

- Trang web được đánh giá cao nhất: PVR Cinemas sử dụng tông màu nổi bật nhất, các khung hình được triển khai rất sáng tạo và luôn thu hút, danh mục nằm ở vị trí rất ấn tượ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 NỘI DUNG - Lĩnh vực phim đa dạng, nguồn thông tin khuyến mãi luôn cập nhật không ngừng với tốc độ bền bỉ, có tích hợp nhận xét của các blog phim ảnh vào Chính vì vậy Galaxy Cinema dần trở thành lựa chọn hàng đầu với người Việt trong thị trường rạp chiếu phim.

- Bài học cho dự án của nhóm: học hỏi được cách sắp xếp bố cục nội dung của các thể loại phim và thông tin khuyến mãi Tránh tình trạng hiển thị quá nhiều nội dung thông tin không cần thiết làm cho người dùng bị rối.

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

DỊCH VỤ NGƯỜI + Có thể liên kết với các nền tảng Mạng xã hội.

DÙNG + 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ý).

- Bài học cho dự án của nhóm: học hỏi các tính năng cơ bản nhất để đáp ứng các nhu cầu của người dùng, 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 thực hiện khảo sát các website và đưa ra nhiều nhận định, đánh giá nhóm sẽ tận dụng điểm đặc biệt của từng website để từ đó đem đến một website hoàn thiện và tối ưu cho quá trình trải nghiệm đặt vé xem phim của người dùng.

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

Xây dựng thành công website đặt vé xem phim online ổn định, nhanh chóng và thuận tiện Tính bảo mật cao và ứng dụng cao vào trong tác quản lý, phục vụ cho kinh doanh và giải trí. Đáp ứng được quy trình nghiệp vụ, khai thác thêm được những điểm mạnh của website này vào lĩnh vực giải trí, mua bán vé Đưa ra được những giải pháp giải quyết các vấn đề thực tiễn mà người dùng và quản lý mắc 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 xây dựng dựa trên kiến trúc ứng dụng web cơ bản Và kiến trúc này đảm bảo ứng dụng có thể hoạt động đồng thời và trơn tru Dự án gồm hai mã (chương trình con) khác nhau chạy song song Đó là:

- 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.

- Code phía máy chủ (backend): Code nằm trên máy chủ và phản hồi các yêu cầuHTTP Sử dụng Spring Boot – Một module của Spring Framework xây dựng Cơ sở dữ

- 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 b Virtual DOM:

-Đối với các website lớn, đặc biệt là những website thiên về xử lý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng performance website cực kỳ nghiêm trọng bởi vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhấn vào tính năng yêu cầu phải tải lại trang [2]

-Tuy nhiên, nếu ta sử dụng JSX thì ta sẽ giúp cây DOM cập nhật cho chính DOM đó, ReactJS đã khởi tạo một thứ gọi là Virtual DOM (DOM ảo) [2]

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 predictable state management tool cho các ứng dụng Javascript Nó nhau (client, server, and native) và dễ dàng để test Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Do vậy Redux thường dùng kết hợp với React [3]

Hình 24 Ví dụ về Redux

Với Redux, state của ứng dụng được lưu trữ tại store, mỗi component đều có thể truy cập tới bất kỳ state nào mà chúng muốn trong tất cả mọi nơi của dự án web chúng ta. Cách thức hoạt động của Redux: 3 thành phần chính (Action, Store, 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

-Những state này được lưu như những objects và chúng định rõ các state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store trong Reducer [3]

Hình 26 Ví dụ về Reducer

-Store: Giúp ta lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng

Redux nào Ta có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods [3]

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

Các actions thực hiện trên một state luôn luôn trả về một state mới Vì vậy, state này là đơn giản và dễ đoán Bây giờ, chúng ta đã biết hơn một chúng về Redux, hãy trở lại với ví dụ Login component và xem cách cách mà Redux có thể giúp chúng ta được gì.

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

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

Khởi động ứng dụng Visual Studio Code, thực hiện các bước mở thư mục nơi chứa dự án dự kiến Triển khai dự án react bằng câu lệnh command “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:

Cấu trúc các thư mục của dự án gồm các thư mục: node_modules (chưa xuất hiện nếu người dùng chưa cài đặt lần đầu, đây là nơi chứa các thư viện, những tệp tin quan trọng phụ vụ cho việc render ra các thành phần của trang web), thư mục public (cung cấp đường dẫn chính, file index.html được chạy đầu tiên, chứa các link đến thư viện hỗ trợ và tạo root cho dự án, nơi đây chứa các file như logo của website), thư mục src nơi chứa các đoạn code Ngoài ra còn có các thư mục và tệp tin quan trọng khác như là gitignore, package-lock.json, package.json và một số tệp của đồ á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 dưới một phút, người dùng có thể thấy được kết quả sau khi cài đặt xong là thư mục node_modules sẽ xuất hiện, đồng thời các package-lock.json, package.json cũng sẽ được cập nhật. Để khởi chạy ứng dụng, câu lệnh command “npm start” sẽ giúp dự án chạy trên http://localhost:3000 , khi đó trình duyệt mặc định sẽ tự động khởi chạy 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 để xây dựng hệ thống, cung cấp tính năng RAD (Rapid Application Development) – Phát triển ứng dụng nhanh và khả năng mở rộng hệ thống cao Ngoài ra hệ thống được xây dựng bằng Spring Boot còn dễ tương thích với các hệ thống khác.

Cadence Workflow Engine được phát triển tại Uber và mở nguồn theo giấy phép MIT. Ởdự án này nhóm sử dụng Cadence Workflow để xây dựng một hệ thống đặt vé tách biệt với hệ thống chính để phục vụ cho việc đặt và giữ vé cho người dùng Nhóm chọn

Cadence Workflow để xây dựng hệ thống đặt vé vì sự khác biệt giữa Cadence và phần lớn các công cụ quy trình công việc hiện tại là nó được nhà phát triển tập trung và cực kỳ linh hoạt và có thể mở rộng (tới hàng chục nghìn cập nhật mỗi giây và lên đến hàng tỷ quy trình công việc mở) Các luồng công việc được viết dưới dạng các chương trình hướng đối tượng và công cụ đảm bảo rằng trạng thái của các đối tượng dòng công việc bao gồm ngăn xếp luồng và các biến cục bộ được bảo toàn hoàn toàn trong trường hợp máy chủ bị lỗi Trong trường hợp hệ thống chính bị lỗi hoặc gặp sự cố, nếu hệ thống đặt vé vẫn còn hoạt động bình thường thì hệ thống đặt vé sẽ tự kết nối lại khi hệ thống chính hoạt động trở lại Mặc định khi triển khai Cadence sẽ cần triển khai luôn Casandra làm cơ

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

Workflow Cách cấu hình Để cấu hình được một server Cadence hoàn chỉnh, cần mất rất nhiều thời gian để cấu hình từng module nhỏ và kết nối từng module đó lại với nhau Chính vì vậy nhóm đã xây dựng một file docker compose để có thể triển khai một server Cadence nhanh chóng với dòng lệnh docker compose run.

Hình 38 File docker compose Cadence

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 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 thì ứng với 1 ghế ngồi duy nhất trong 1 phòng, còn 1 ghế ngồi thì có thể phục vụ cho nhiều vé xem phim trong những 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

Short Description 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

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

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

Exception Flow 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

Main Flow 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

Short Description 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

Post-Condition(s) đă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ý

Main Flow 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

Exception Flow 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ệ

Short Description 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

Main Flow 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

Exception Flow 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

2c1 Hệ thống kiểm tra và thấy và thấy tài khoản chưa tồn tại với username hoặc email, sau đó gửi thông báo lên View 2c2 Thông báo rằng tài khoảnn hoặc mật khẩu không đúng

Exception Flow 2c3 Quay lại bước 2 trong luồng sự kiện 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à

Main Flow 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 Exception Flow 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

Main Flow bài viết để xem

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

Main Flow 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

Alternative Flow 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ử

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

Actor 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

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

Main Flow 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ề

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

Main Flow 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

Phiên đăng nhập sai Exception Flow 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

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

Main Flow 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

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

Main Flow 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

Main Flow 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

Exception Flow 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

Main Flow 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

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ý 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

Main Flow 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

Main Flow 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,

Exception Flow 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

Main Flow 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

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

Main Flow 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 Exception Flow 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

Main Flow 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

Alternative Flow 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

Short Description 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

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,

Main Flow 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

Main Flow 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

Main Flow 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

Main Flow 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ý 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êntà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 Ẩn/hiện mật khẩu Button Nhấn để chuyển

5 đổ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 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

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 Ẩn/hiện Button Nhấn để ẩn hiện

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

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

Và sau khi kết nối thành công ta chỉ cần đưa đoạn code mới nhất lên nhánh đã thiết lập sẵn hệ thống sẽ tự đông triển khai hệ thống lên docker cho 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à một nền tảng để cung cấp cách để building, deploying và running ứng dụng dễ dàng hơn bằng cách sử dụng các containers (trên nền tảng ảo hóa) Ở đây ta sẽ sử dụng container của Docker để đóng gói một ứng dụng với tất cả các phần cần thiết, chẳng hạn như thư viện và các phụ thuộc khác, và gói tất cả ra dưới dạng một package. Đầu tiên ta cần một máy ảo Virtual Machine VPS chạy 24/24 để tiến hành đặt server và database của ta lên đó Ở đây sử dụng 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 ta run image thành một container trong docker và set chế độ luôn chạy Sau khi config thành công ta sẽ có một container như hình sau.

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

Có thể lựa chọn cách thức host như dùng code, dùng docker container hoặc host một web static Sau khi lựa chọn xong cách thức host tiếp tục đăng nhập github vào và config file CICD để mỗi khi ta push code mới nhất lên hệ thống sẽ tự động cập nhật bản code mới nhất lên host.

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 chạy trên máy chủ, thu thập dữ liệu trên api được triển khai lên Docker Sau quá trình kiểm thử nhóm đề tài thu được bảng tổng kết 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 với công thức số testcase đã thực thi trên tổng số testcase được liệt kê là 100% Độ hiệu quả của testcase xác định bởi số khuyết điểm được tìm thấy trên số testcase thực thi là 11,1 % Tỉ lệ testcase failed xác định bởi tổng số testcase bị thất bại trên tổng số testcase thực thi 11,1% Tỉ lệ testcase bị blocked xác định bằng tổng số testcase bị block trên tổng số testcase thực thi 0% Tỉ lệ khiếm khuyết được sửa xác định bởi tổng số khiếm khuyết đã được sửa trên tổng số khiếm khuyết được tìm thấy 0% Tỉ lệ khiếm khuyết chấp nhận được xác định bằng tổng số khiếm khuyết chấp nhận được trên tổng số khiếm khuyết được tìm thấy 6,67% Tỉ lệ khiếm khuyết bị pending xác định bằng tổng số khiếm khuyết bị pending trên tổng số khiếm khuyết được báo cáo 3,33%.

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

Cơ bản mục tiêu tạo ra hệ thống đặt vé xem phim online và thử nghiệm đạt được những yêu cầu về chức năng cơ bản đã nêu trong phạm vi của dự án Có thể mở rộng để đáp ứng lượng dữ liệu đổ về lớn, tuy nhiên bản thử nghiệm chưa thể cho kết luận về con số cụ thể nếu thật sự mở rộng do chỉ được thử nghiệm trong một môi trường nhỏ với số lượng dữ liệu 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: Sau quá trình phát triển hệ thống được kiểm thử và tổng hợp kết quả thông qua nội dung thử nghiệm từ đó có thể đưa ra đánh giá 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

Giáo viên hướng dẫn ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO Độ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

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

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

Nhóm đề tài thực hiện xin được phép chân thành cảm ơn trường ĐH 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 có cơ hội học hỏi và cũng như thực hiện đề tài này Đặc biệt, nhóm xin được phép cảm ơn đến giảng viên ThS Hoàng Công Trình đã giúp đỡ và có ý kiến đóng góp đến nhóm cũng như đề tài mà nhóm thực hiện trong suốt khóa luận tốt nghiệp này Cảm ơn thầy đã truyền đạt các kiến thức nghiệp vụ chuyên ngành và cả kinh nghiệm thực tế để góp phần hoàn thiện đề tài Xây dựng website đặt vé xem phim online.

Trong quá trình thực hiện, nhóm đã vận dụng các kiến thức đã học về xây dựng website để hoàn thành đề tài này, tuy nhiên do còn nhiều hạn chế khách quan và chủ quan, về khả năng nên trong quá trình nghiên cứu và thực hiện không tránh khỏi những sai sót không mong muốn, kính mong sự góp ý của thầy để nhóm có thêm được những trải nghiệm quan trọng trong quá trình tương lai sau này.

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

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 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 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 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, ứng dụng công nghệ thông tin vào việc tối ưu hóa trải nghiệm người dùng là một trong những yếu tố then chốt trong mọi lĩnh vực Đối với lĩnh vực rạp chiếu phim, nhu cầu này ngày càng trở nên thiết yếu hơn khi nhu cầu giải trí của người dùng ngày càng lớn dần kéo theo lượng người dùng ngày một lớn hơn cho thấy tiềm năng và sức ảnh hưởng cực kỳ lớn của lĩnh vực rạp chiếu phim.

Chính điều này đã thúc đẩy nhu cầu sử dụng các trang đặt trực tuyến ngày một lớn mạnh và phổ biến khắp toàn cầu, thay thế một phần hình thức đặt vé thủ công tại rạp trong quá khứ Với nhịp sống bận rộn, sử dụng trang đặt vé trực tuyến dường như là lựa chọn hàng đầu cho bất kỳ người dùng nào bởi sự thuận tiện mà nó mang lại, có thể truy cập mọi lúc mọi nơi.

Nhận thấy được sự thiết yếu trong công cuộc chuyển đổi số hình thức đặt vé trực tuyến Nhóm đề tài đã thống nhất lựa chọn đề tài “Xây dựng website đặt vé xem phim online” làm đề tài cho Khóa luận tốt nghiệp.

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

Cung cấp cho các rạp chiếu phim một giải pháp đặt vé online thuận tiện Góp phần giảm thiểu tình trạng khách hàng phải chờ, xếp hàng và đợi lâu để được mua vé Tạo ra một quy trình chọn vé – đặt vé – thanh toán vé thuận lợi.

Việc quản lý vé và doanh thu được thuận lợi hơn so với cách bán vé trực tiếp và truyền thống Thông tin và thống kê được hiển thị trực quan, giúp người quản lý dễ dàng theo dõi.

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 website tương tự: tham khảo về cách thức vận hành, quy trình đặt vé và các tính năng cần thiết cho một website đặt vé xem phim online Học hỏi và vận dụng chúng vào đề tài mà nhóm sinh viên thực hiện.

- Người dùng: Từ những đặc điểm, nhu cầu sử dụng của người dùng, thiết kế nên chức năng, tính tương thích với người dùng Đưa ra các hướng giải quyết các vướng mắc của người dùng.

- 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 đã thiết lập phạm vi mà nhóm đã nghiên cứu, dựa vào đó thực hiện và tuân thủ các quy tắc trong đó, nhóm liệt kê các phạm vi sau đây:

- Về công nghệ: Nhóm xoay quanh việc áp dụng các công nghệ về back-end là Spring boot, về front-end là ReactJs, cơ sở dữ liệu nhóm sử dụng là MySQL Ngoài ra nhóm còn vận dụng các công nghệ khác hỗ trợ như Circle CI,… Từ đó, vận dụng các kỹ năng lập trình và kiến thức đã được học, áp dụng chúng vào việc xây dựng cấu trúc và chức năng của trang web.

- Về đối tượng mà website phục vụ: Nhóm nghiên cứu hướng đến các đối tượng người dùng với các chức năng dành cho khách hàng, thành viên đăng ký tài khoản Bên cạnh đó hướng đến các rạp chiếu phim trong nước, các hệ thống rạp lớn tại Việt Nam.

- Về môi trường hoạt động: website hoạt động trong môi trường giải trí, phục vụ cho việc đặt vé xem phim tại các rạp Bên cạnh đó là một quy trình đặt vé và thanh toán giúp việc quản lý của các chủ rạp phim trong lĩnh vực giải trí được thuận tiện hơn, tiết kiệm chi phí in ấn.

Hướng phát triển của đề tài

Đề tài được xây dựng trong thời gian ngắn chính vì vậy không tránh được sự sai sót cũng như chưa tối ưu được trải nghiệm của người dùng Tuy vậy đề tài vẫn đang được cập nhật phiên bản liên tục để cập nhật tính năng mới nhất và khắc phục những khuyết điểm đang hiện hữu.

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

(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/)

Định dạng
Số trang	111
Dung lượng	6,92 MB