xây dựng website đặt vé xem phim trực tuyến

Mai Thúy Nga Khoa: Công nghệ thông tin Tên đề tài: Xây dựng website đặt vé xem phim trực tuyến Sinh viên thực hiện: Nguyễn Đức Trung Lớp:K13 CNTT Giảng viên hướng dẫn: Th.S Vũ Quang Dũng

Trang 1

Sinh viên: Nguyễn Đức Trung

Mã số sinh viên: 19010036 Khóa: 2019 - 2023 Ngành: Công nghệ thông tin Hệ: Chính quy Giảng viên hướng dẫn: ThS Vũ Quang Dũng

Hà Nội – Năm 2024

Copies for internal use only in Phenikaa University

Trang 2

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC PHENIKAA

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM TRỰC TUYẾN

Sinh viên: Nguyễn Đức Trung

Mã số sinh viên: 19010036 Khóa: 2019 - 2023 Ngành: Công nghệ thông tin Hệ: Chính quy Giảng viên hướng dẫn: ThS Vũ Quang Dũng

Hà Nội – Năm 2024

Trang 3

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC PHENIKAA

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

- Tính cấp thiết của đề tài: Đề tài mang tính chất tích hợp các công nghệ, kỹ năng mà sinh viên tích lũy được trong quá trình học tập Thông qua đề tài sinh viên nắm vững được công nghệ xây dựng web app với HTML5/CSS3, javascript và sử dụng framework reactjs trong quá trình làm đề tài

- Mục tiêu của đề tài: Thông qua các kỹ năng, kiến thức về HTML5/CSS3, javascript, reactjs, rest api để thiết kế và lập trình Website với các chức năng như hiển thị nô ̣i dung phim, tóm tắt, chọn phim, đặt vé trực tuyến Đối với admin thì sẽ quản lý người dùng, các phim, hiển thi ̣, thời gian hiê ̣u lực và các đơn hàng về đă ̣t vé

- Nội dung của đề tài: Sinh viên có phân tích thiết kế về các yêu cầu phần mềm, các nghiệp vụ trong chương trình, lập trình và kiểm thử đối với ứng dụng Web về đặt vế xem phim trực tuyến với đầy đủ các chức năng trong mục tiêu

- Tài liệu tham khảo: Có trích dẫn các nguồn về tài liệu, sách được sử dụng trong quá trình xây dựng ứng dụng của đề tài

- Phương pháp nghiên cứu: Sinh viên có thảo luận, trao đổi với giáo viên hướng Copies for internal use only in Phenikaa University

Trang 4

dẫn, và dành phần lớn thời gian để chủ động nghiên cứu phương pháp về phân tích thiết kế chương trình, và lập trình xây dựng Web app cho đề tài

- Tính sáng tạo và ứng dụng: Có tính chất ứng dụng nếu được đầu tư và phát triển tiếp

II Nhận xét tinh thần và thái độ làm việc của sinh viên:

Thái độ hợp tác và thảo luận với giảng viên hướng dẫn Tinh thần chủ động trong quá trình làm đề tài

III Kết quả đạt được:

Sinh viên đã hoàn thành được mục tiêu cơ bản đối với một đồ án tốt nghiệp đại học

IV Kết luận: Đồng ý cho bảo vệ: Không đồng ý cho bảo vệ:

Hà Nội, ngày 01 tháng 04 năm 2024

GIẢNG VIÊN HƯỚNG DẪN

Dũng Vũ Quang Dũng x

Trang 5

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC PHENIKAA

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

NHẬN XÉT ĐỒ ÁN/KHÓA LUẬN TỐT NGHIỆP CỦA GIẢNG VIÊN PHẢN BIỆN

Giảng viên phản biện: TS Mai Thúy Nga Khoa: Công nghệ thông tin Tên đề tài: Xây dựng website đặt vé xem phim trực tuyến

Sinh viên thực hiện: Nguyễn Đức Trung Lớp:K13 CNTT Giảng viên hướng dẫn: Th.S Vũ Quang Dũng

- Nội dung: Đồ án mô tả quá trình phát triển một trang web cung cấp các tính năng để người xem phim có thể tự đặt vé trực tuyến Nội dung đồ án bao gồm các việc từ phân tích yêu cầu nghiệp vụ và lựa chọn công cụ phát triển đến thiết kế chi tiết và triển khai phần mềm

- Mức độ thực hiện:Đồ án đã phát triển một trang web mua vé xem phim với các chức năng cần thiết cho khách hàng và quản trị viên

II Kết quả đạt được:

- Sinh viên biết cách trình bày một báo cáo theo chủ đề phát triển phần mềm, bao gồm các kiến thức về lý thuyết và cách vận dụng phân tích thiết kế và cài đặt cho việc xây dựng một trang web bán hàng

- Trang web được phát triển bằng các ngôn ngữ lập trình và công nghệ như HTML, CSS, Javascript, ReactJS, localStorage Trang web có giao diện thân Copies for internal use only in Phenikaa University

Trang 6

thiện và có các chức năng phục vụ cho hai đối tượng chính là khách hàng và quản trị viên Các chức năng cho khách hàng bao gồm đăng kí, đăng nhập, đổi mật khẩu, đăng xuất, quản lý thông tin cá nhân và các chức năng phục vụ việc mua vé xem phim Quản trị viên có thêm các chức năng như quản lý cụm rạp, quản lý phim, quản lý lịch chiếu phim

III Ưu nhược điểm:

- Ưu điểm: Báo cáo trình bày ngắn gọn và rõ ràng cách thức xây dựng một trang web bán hàng cho rạp chiếu phim Trang web có đầy đủ các chức năng đáp ứng nhu cầu các rạp chiếu phim để thực hiện việc bán các vé xem phim trực tuyến

- Nhược điểm:

o Về hình thức: Chú ý nhiều chỗ còn đặt sai dấu câu (chỉ cần bật tính năng kiểm tra ngữ pháp của Word lên là bạn sẽ nhìn thấy các chỗ sai) o Về nội dung:

 Báo cáo nên bổ sung bảng giải thích các thuật ngữ về nghiệp vụ của rạp chiếu phim để kết nối đến các phần phân tích thiết kế sau

 Phân rã các sơ đồ use-case ở mức 2 với các use-case “Nhập thông tin" theo tôi là không cần, điều này nên chi tiết trong mô tả luồng sự kiện của chức năng

 Các biểu đồ tuần tự nên có đầy đủ các loại lớp (có thể phân rã đối tượng Hệ thống trong sơ đồ chi tiết hơn)

IV Kết luận:

Đồng ý cho bảo vệ: Không đồng ý cho bảo vệ:

Hà Nội, ngày 01 tháng 04 năm 2024

GIẢNG VIÊN PHẢN BIỆN

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

Nga Mai Thúy Nga

X

Trang 7

LỜI CAM ĐOAN

Tên tôi là: Nguyễn Đức Trung Mã sinh viên: 19010036 Lớp: K13 CNTT Ngành: Công nghệ thông tin

Tôi đã thực hiện đồ án tốt nghiệp với đề tài: “Xây Dựng Website Đặt Vé Xem Phim Trực Tuyến”

Tôi xin cam đoan đây là đề tài nghiên cứu của riêng tôi và được sự hướng dẫn

của thầy: ThS Vũ Quang Dũng

Các nội dung nghiên cứu, kết quả trong đề tài này là trung thực và chưa được các tác giả khác công bố dưới bất kỳ hình thức nào Nếu phát hiện có bất kỳ hình thức gian lận nào tôi xin hoàn toàn chịu trách nhiệm trước pháp luật

Dũng Trung

Vũ Quang Dũng Nguyễn Đức Trung

GIẢNG VIÊN HƯỚNG DẪN

Trang 8

LỜI CẢM ƠN

Em xin gửi lời cảm ơn và biết ơn sâu sắc đến Trường đại học Phenikaa và Khoa Công nghệ thông tin đã đồng hành và hỗ trợ em trong suốt quá trình học tập và làm việc, cũng như đến tất cả thầy/cô giảng viên đã hỗ trợ và về sự tận tâm và chuẩn bị kĩ càng dành cho em trong suốt quá trình học và thực hiện đồ án tốt nghiệp của mình

Em xin gửi lời cảm ơn chân thành và sâu sắc nhất đến Nhà trường và khoa Công Nghệ Thông Tin về sự tận tâm và sự chuẩn bị kỹ càng trong việc tổ chức chương trình đồ án tốt nghiệp Đây là một giai đoạn quan trọng trong quá trình học tập của em và em thực sự trân trọng sự hỗ trợ và định hướng mà Nhà trường đã dành cho em Điều đó đã đóng vai trò vô cùng quan trọng và giúp em hoàn thành báo cáo này

Trên tất cả, em muốn bày tỏ lòng biết ơn trực tiếp đến giảng viên hướng dẫn em trong quá trình thực hiện đồ án tố nghiệp, đó là thầy Vũ Quang Dũng Những hướng dẫn chi tiết, gợi ý và đánh giá cụ thể của thầy đã giúp em nắm vững kiến thức, phát triển thêm những tính năng mới và đặc biệt là hiểu rõ hơn về quy trình xây dựng một trang web hiệu quả Sự hướng dẫn tỉ mỉ và kiến thức chuyên sâu của thầy đã giúp em định hướng và hiểu sâu hơn về đề tài giúp em vượt qua những khó khăn và hoàn thành dự án một cách tốt nhất

Em cũng muốn gửi lời cảm ơn đến toàn thể các thầy cô trong khoa Công Nghệ Thông Tin Sự truyền đạt kiến thức chuyên ngành qua các phương thức giảng dạy và sự đồng hành của các thầy cô trong quá trình học tập đã giúp em xây dựng nên nền tảng tư duy vững chắc cho đồ án tốt nghiệp

Một lần nữa, em xin bày tỏ lòng biết ơn chân thành và sâu sắc đến các thầy/cô tại Trường đại học Phenikaa, khoa Công nghệ thông tin và đặc biệt là thầy Vũ Quang Dũng đã ủng hộ và hướng dẫn em trong suốt thời gian qua

Em xin chân thành cảm ơn! Copies for internal use only in Phenikaa University

Trang 9

1.1 Giới thiệu chung 3

1.1.1 Về đề tài Error! Bookmark not defined 1.1.2 Lợi ích của Website đặt vé xem phim trực tuyến 3

1.2 Lý do chọn đề tài 5

1.3 Đối tượng nghiên cứu 5

1.4 Phạm vi nghiên cứu 6

1.5 Kiến trúc tổng thể của một website đặt vé xem phim 7

1.6 Những yếu tố cần chú trọng khi xây dựng website đặt vé xem phim 8

1.7 Công nghệ và công cụ sử dụng 10

1.7.1 HTML (Hypertext Markup Language) 10

1.7.2 Framework ReactJS 12

1.7.3 Sử dụng localStorage trong ReactJS 14

1.7.4 Axios và Redux Thunk 15

1.7.5 Một số thư viện hỗ trợ khác 16

CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG 17

2.1 Nội dung công việc 17

2.2 Phân tích giao diện của Website 18

2.2.1 Giao diện User(Người dùng) 18

2.2.2 Giao diện quản trị viên (Admin) 19

2.3 Các chức năng của hệ thống 20

2.4 Sơ đồ phân rã chức năng 21

2.5 Lược đồ Use case hệ thống 22 Copies for internal use only in Phenikaa University

Trang 10

2.5.1 Use case tổng quan hệ thống 22

2.5.2 Use case đăng ký/đăng nhập 23

2.5.3 Use case quản lý hệ thống rạp 26

2.5.4 Use case quản lý danh sách phim 27

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

2.5.6 Use case quản lý thông tin cá nhân 29

2.6 Biểu đồ tuần tự 33

2.6.1 Biểu đồ tuần tự chức năng đăng ký, đăng nhập 33

2.6.2 Biểu đồ tuần tự chức năng quản lý hệ thống rạp 35

2.6.3 Biểu đồ tuần tự chức năng quản lý danh sách phim 36

2.6.4 Biểu đồ tuần tự chức năng quản lý tài khoản 37

2.6.5 Biểu đồ tuần tự chức năng quản lý thông tin cá nhân 38

2.6.6 Biểu đồ tuần tự chức năng quản lý lịch chiếu phim 39

2.6.7 Biểu đồ tuần tự chức năng đặt vé phim 40

2.7 Biểu đồ hoạt động 40

2.7.1 Biểu đồ hoạt động chức năng đăng ký, đăng nhập 40

2.7.2 Biểu đồ hoạt động chức năng quản lý hệ thống rạp 42

2.7.3 Biểu đồ hoạt động chức năng quản lý danh sách phim 43

2.7.4 Biểu đồ hoạt động chức năng quản lý tài khoản 44

2.7.5 Biểu đồ hoạt động chức năng quản lý thông tin cá nhân 45

2.7.6 Biểu đồ hoạt động chức năng quản lý lịch chiếu phim 46

2.7.7 Biểu đồ hoạt động chức năng đặt vé phim 47

2.8 Cấu trúc API 48

2.8.1 API Quản lý đặt vé 48

2.8.2 API Quản lý người dùng 48

2.8.3 API Quản lý phim 49

2.8.4 API Quản lý rạp 50

CHƯƠNG 3: PHÁT TRIỂN WEBSITE 51

3.1 Giao diện hệ thống website 51

3.1.1 Giao diện trang chủ 51

3.1.2 Giao diện trang đăng ký, đăng nhập 52 Copies for internal use only in Phenikaa University

Trang 11

3.1.3 Giao diện trang thông tin tài khoản và lịch sử đặt vé 533

3.1.4 Giao diện trang chi tiết phim và trang đặt vé 54

3.2 Giao diện trang quản trị website 56

3.2.1 Giao diện trang quản lý người dùng 56

3.2.2 Giao diện trang quản lý danh sách phim 57

3.2.3 Giao diện trang quản lý hệ thống rạp, cụm rạp, chiếu 57

CHƯƠNG 4: KẾT LUẬN 59

4.1 Kết quả đạt được 59

4.2 Hướng phát triển 59

4.3 Đạo đức và trách nghiệm nghề nghiệp 60

DANH MỤC TÀI LIỆU THAM KHẢO 61

Trang 12

DANH MỤC HÌNH ẢNH

Hình 1.1 Sơ đồ đơn giản về cách hoạt động của ReactJS 13

Hình 2.1 Sơ đồ phân rã chức năng 21

Hình 2.2 Use case tổng quan hệ thống 22

Hình 2.3 Use case đăng ký/đăng nhập 23

Hình 2.4 Use case quản lý hệ thống rạp 26

Hình 2.5 Use case quản lý danh sách phim 27

Hình 2.6 Use case quản lý tài khoản 28

Hình 2.7 Use case quản lý thông tin cá nhân 29

Hình 2.8 Use case đặt vé phim 30

Hình 2.9 Use case quản lý lịch chiếu phim 31

Hình 2.10 Use case đăng xuất 32

Hình 2.11 Biểu đồ tuần tự chức năng đăng ký 33

Hình 2.12 Biểu đồ tuần tự chức năng đăng nhập 34

Hình 2.13 Biểu đồ tuần tự chức năng quản lý hệ thống rạp 35

Hình 2.14 Biểu đồ tuần tự chức năng quản lý danh sách phim 36

Hình 2.15 Biểu đồ tuần tự chức năng quản lý tài khoản 37

Hình 2.16 Biểu đồ tuần tự chức năng quản lý thông tin cá nhân 38

Hình 2.17 Biểu đồ tuần tự chức năng quản lý lịch chiếu phim 39

Hình 2.18 Biểu đồ tuần tự chức năng đặt vé phim 40

Hình 2.19 Biểu đồ hoạt động chức năng đăng ký 40

Hình 2.20 Biểu đồ hoạt động chức năng đăng nhập 41

Hình 2.21 Biều đồ hoạt động chức năng quản lý hệ thống rạp 42

Hình 2.22 Biểu đồ hoạt động chức năng quản lý danh sách phim 43 Copies for internal use only in Phenikaa University

Trang 13

Hình 2.23 Biểu đồ hoạt động chức năng quản lý tài khoản 44

Hình 2.24 Biểu đồ hoạt động chức năng quản lý thông tin cá nhân 45

Hình 2.25 Biểu đồ hoạt động chức năng quản lý lịch chiếu phim 46

Hình 2.26 Biểu đồ hoạt động chức năng đặt vé phim 47

Hình 2.27 API của website đặt vé xem phim 48

Hình 3.1 Hình ảnh giao diện trang chủ 52

Hình 3.2 Hình ảnh giao diện đăng ký 52

Hình 3.3 Hình ảnh giao diện đăng nhập 52

Hình 3.4 Hình ảnh giao diện thông tin tài khoản 53

Hình 3.5 Hình ảnh giao diện lịch sử đặt vé 53

Hình 3.6 Giao diện trang chi tiết phim 54

Hình 3.7 Hình ảnh giao diện trang đặt vé 55

Hình 3.8 Hình ảnh giao diện trang đặt vé hoàn tất 55

Hình 3.9 Hình ảnh giao diện trang quản lý người dùng 56

Hình 3.10 Hình ảnh giao diện trang quản lý người dùng(thêm) 56

Hình 3.11 Hình ảnh giao diện trang quản lý danh sách phim 57

Hình 3.12 Hình ảnh giao diện trang quản lý hệ thống rạp 57

Hình 3.13 Hình ảnh giao diện trang quản lý cụm rạp 58

Hình 3.14 Hình ảnh giao diện trang quản lý lịch chiếu 58Copies for internal use only in Phenikaa University

Trang 14

DANH MỤC BẢNG BIỂU

Bảng 2.1 Các chức năng của hệ thống 20

Bảng 2.2 Bảng thuật ngữ nghiệp vụ rạp chiếu phim 22

Bảng 2.3 Mô tả use case đăng ký/đăng nhập 24

Bảng 2.4 Bảng mô tả use case quản lý hệ thống rạp 26

Bảng 2.5 Bảng mô tả use case quản lý danh sách phim 27

Bảng 2.6 Bảng mô tả use case quản lý tài khoản 28

Bảng 2.7 Bảng mô tả use case quản lý thông tin cá nhân 29

Bảng 2.8 Bảng mô tả use case quản lý lịch chiếu phim 30

Bảng 2.9 Bảng mô tả use case quản lý đặt vé phim 31

Bảng 2.10 Bảng mô tả use case đăng xuất 32

Trang 15

MỞ ĐẦU

Hiện nay, với xu hướng công nghệ hóa, áp dụng các công nghệ máy tính vào trong mọi lĩnh vực hoạt động của xã hội đương thời, với thế mạnh và tính cấp thiết của ứng dụng tin học thì việc phát triển các ứng dụng trực tuyến là một lợi thế để các doanh nghiệp thương mại sản phẩm, phục vụ nhu cầu và lợi ích cho khách hàng

Trong thời đại công nghệ phát triển nhanh chóng, việc đặt vé xem phim trực tuyến đang trở thành một hành động thông dụng và tiện lợi cho người dùng Do đó, việc tạo một website đặt vé xem phim trực tuyến có khả năng tăng lợi ích cho người dùng và cũng có khả năng tạo lợi nhuận cho các công ty kinh doanh

Website đặt vé xem phim trực tuyến sẽ phục vụ cho người dùng có nhu cầu xem phim tại rạp có thể nắm rõ được các ưu đãi và đặt vé dễ dàng, tiết kiểm thời gian so với cách mua vé tại các rạp, ngoài ra hệ thống còn cho phép các rạp chiếu phim quản lý được các lịch chiếu phim, ghế, giá vé và các rạp có thể dễ dàng quản lý được doanh thu của mình

Website đặt vé xem phim sẽ mang lại nhiều lợi ích quan trọng cho doanh nghiệp điện ảnh:

- Thứ nhất, sẽ tăng khả năng tiếp cận đến khách hàng, khách hàng nắm rõ hơn về tin tức ưu đãi lịch chiếu, giá vé, và các dịch vụ chăm sóc khách hàng, giúp doanh nghiệp quảng bá rộng rãi và tiếp cận được lượng lớn khách hàng thông qua các chiến lược quảng cáo và tiếp thị trực tuyến trên các mạng xã hội Website có thể tạo ra các cơ hội tương tác với khách hàng thông qua các hệ thống đánh giá, bình luận và các nền tảng mạng xã hội - Thứ hai, giúp thu thập thông tin khách hàng để doanh nghiệp hiểu rõ hơn về

khách hàng và tạo ra chiến lược tiếp thị hiệu quả hơn, cho phép doanh nghiệp thu nhận phản hồi từ khách hàng, cải thiện dịch vụ và điều chỉnh chiến lược kinh doanh Trên hết giúp cho doanh nghiệp xây dựng thương Copies for internal use only in Phenikaa University

Trang 16

hiệu và phát triển mạnh mẽ

Em lựa chọn đề tài “Xây dựng website đặt vé xem phim” với mục đích tìm hiểu và nghiên cứu về quá trình xây dựng và quản lý một trang web đặt vé Em sẽ tập trung vào các khía cạnh kỹ thuật, thiết kế, nội dung và quản lý thông tin trên trang web này Đồng thời, xem xét cách sử dụng công nghệ và xu hướng thiết kế web để phát triển giao diện người dùng thân thiện, dễ sử dụng giúp người dùng dễ dàng cập nhật tin tức, lịch chiếu phim và giá vé, đặt vé một cách nhanh chóng

Trong báo cáo này, em sẽ giới thiệu và thảo luận về quá trình xây dựng một website đặt vé xem phim bằng cách sử dụng ngôn ngữ lập trình web: HTML, CSS, JS và Framework ReactJS, sử dụng dữ liệu API Với mục tiêu chính của dự án này là xây dựng một trang web đặt vé xem phim linh hoạt, dễ quản lý và thân thiện với người dùng

Trang 17

Trên website đặt vé xem phim trực tuyến, người dùng có thể tìm kiếm các phim đang chiếu, lựa chọn và xem chi tiết phim, lịch chiếu của các rạp và chọn phim phù hợp Sau đó, họ sẽ được đưa đến trang thanh toán để lựa chọn ghế xem phim, chọn phương thức thanh toán và mua vé Sau khi hoàn tất quá trình đặt vé, người dùng sẽ nhận được thông tin vé đã đặt qua hồ sơ người dùng

Website đặt vé xem phim trực tuyến không chỉ giúp người dùng tiết kiệm thời gian mà còn cung cấp cho họ đầy đủ thông tin về phim và giá vé, lịch chiếu theo rạp Ngoài ra, website còn được cập nhật thường xuyên về các phim mới, đánh giá của khán giả và các chương trình khuyến mãi đang diễn ra

1.1.2 Lợi ích của Website đặt vé xem phim trực tuyến

Website đặt vé xem phim sẽ mang lại nhiều lợi ích cho cả doanh nghiệp và khách hàng

 Đối với doanh nghiệp:

Xây dựng thương hiệu và hình ảnh chuyên nghiệp: Một website chuyên

nghiệp giúp doanh nghiệp xây dựng và lan tỏa thương hiệu mạnh mẽ hơn đến nhiều khách hàng

Cung cấp và tương tác với khách hàng: Website sẽ giúp tương tác trực tiếp

với khách hàng, nhận phản hồi và cải thiện dịch vụ Điều này giúp khách hàng được cập nhật tin tức mới và thu hút khách hàng tiềm năng hơn

Trang 18

Quảng bá và mở rộng thị trường: Website sẽ là một công cụ quan trọng trong

chiến lược quảng bá và tiếp thị các sản phẩm mới Nó cho phép doanh nghiệp quảng bá các bộ phim, nội dung mới trên website Ngoài ra, việc tối ưu hóa SEO để thu hút khách hàng tiềm năng sẽ giúp tăng lượng truy cập và nhận diện thương hiệu

Quản lý hiệu quả: Website sẽ mang lại nhiều lợi ích quản lý cho doanh

nghiệp Quản trị viên có thể quản lý thông tin người dùng, lịch chiếu, vé một cách dễ dàng Giúp giảm thiểu thời gian quản lý nhiều rạp phim và giao dịch vé, tự động hóa các quy trình như đặt vé, thanh toán, và phân phối vé, giúp tiết kiệm thời gian và nguồn lực

 Đối với khách hàng:

Cung cấp thông tin, tin tức: Website sẽ cung cấp tin tức, thông tin hữu ích và

liên quan đến các bộ phim, dịch vụ, và xu hướng thị trường Điều này giúp khách hàng hiểu rõ hơn về sản phẩm hoặc dịch vụ, cũng như về doanh nghiệp

Thuận tiện và linh hoạt: Website sẽ giúp khách hàng tiết kiệm thời gian,

không cần phải xếp hàng tại rạp để mua vé, đặc biệt là khi có các bộ phim bom tấn

Thông tin phim đa dạng: Website giúp khách hàng truy cập thông tin chi tiết

về các bộ phim, bao gồm thể loại, diễn viên, trailer, giúp lựa chọn phim theo sở thích

An toàn và bảo mật: Thanh toán trực tuyến qua các ứng dụng ví điện tử như

Momo, ZaloPay, ShopeePay, sẽ giúp khách hàng đảm bảo an toàn

Việc xây dựng một website đặt vé xem phim nó sẽ giúp doanh nghiệp tạo thương hiệu, cung cấp thông tin các bộ phim, các rạp chiếu, tương tác với khách hàng, quảng bá và tiếp thị sản phẩm, quản lý nội dung dễ dàng Khách hàng sẽ tiết kiệm thời gian, công sức, lựa chọn những rạp phim thuận tiện và các bộ phim phù hợp với mình

Trang 19

1.2 Lý do chọn đề tài

Với sự phát triển của công nghệ và thói quen tiêu dùng online, người dùng sẽ ngày càng ưa chuộng việc đặt vé trực tuyến Website sẽ cung cấp thông tin về các cụm rạp, các bộ phim mới nhất giúp tiếp cận đến khách hàng tốt hơn Khách hàng dễ dàng tìm kiếm, so sánh và đặt vé cho bộ phim họ muốn xem Website cũng giúp thu hút quảng cáo và tạo ra lợi nhuận từ việc bán vé và các dịch vụ liên quan

Vì vậy, em quyết định chọn đề tài “Xây dựng website đặt vé xem phim trực tuyến” với mục tiêu là tạo ra một nền tảng trực tuyến dễ sử dụng cho khách hàng để đặt vé xem phim một cách nhanh chóng và thuận tiện Website cũng giúp doanh nghiệp hoặc tổ chức quản lý rạp phim và vé bán dễ dàng, phát triển kinh doanh, thu hút quảng cáo, hiểu rõ hơn nhu cầu và hành vi của khách hàng từ đó đưa ra chiến thuật marketing hiệu quả

1.3 Đối tượng nghiên cứu

Đối tượng nghiên cứu của đề tài là Website đặt vé xem phim trực tuyến Đây là một hệ thống trực tuyến phức tạp, được tạo ra và quản lý bởi doanh nghiệp hoặc tổ chức, với mục tiêu tối ưu hóa quy trình bán vé, tăng trải nghiệm khách hàng và tăng cường tiếp cận các tệp khách hàng, nâng cao hiệu quả kinh doanh và giúp doanh nghiệp hoặc tổ chức thu thập và phân tích dữ liệu người dùng từ đó cung cấp các dịch vụ và sản phẩm phù hợp Đối tượng nghiên cứu này bao gồm những khía cạnh sau đây:

Cấu trúc: Website đặt vé xem phim trực tuyến thường bao gồm các

thành phần như trang chủ, các trang con, cơ sở dữ liệu, và các tính năng tương tác Điều này tạo ra một cấu trúc phức tạp

Linh động và thường xuyên cập nhật: Website phải luôn thay đổi và

cập nhật các rạp, các bộ phim và ưu đãi mới nhất để cung cấp thông tin cho khách hàng Việc này đòi hỏi quy trình quản lý thông tin hiệu quả và cách tự động hóa việc cập nhật thông tin

Khả năng tùy chỉnh: Website đặt vé xem phim trực tuyến phải thường

Trang 20

được tùy chỉnh để phản ánh thương hiệu và mục tiêu của doanh nghiệp hoặc tổ chức Điều này bao gồm việc thiết kế giao diện, lựa chọn màu sắc, sử dụng hình ảnh thích hợp, và tạo ra trải nghiệm người dùng độc đáo

Mục tiêu đa dạng: Website này có nhiều mục tiêu, bao gồm cung cấp

thông tin sản phẩm(vé phim) và trải nghiệm cho khách hàng, thúc đẩy sản phẩm và dịch vụ, tạo sự tương tác và xây dựng danh tiếng và uy tín của doanh nghiệp

Tương tác người dùng: Website cung cấp và tạo điều kiện thuận lợi

cho khách hàng khi đặt vé, từ việc chọn phim, chọn ghế, đến thanh toán và nhận vé

Hiệu suất và phân tích: Đối tượng nghiên cứu cũng phải xem xét

hiệu suất, các yếu tố như tốc độ tải trang, tối ưu hóa hình ảnh và nội dung, cơ sở dữ liệu và bảo mật Phân tích dữ liệu từ các công cụ phân tích web để cải thiện trang web là một phần quan trọng của nghiên cứu

Các khía cạnh phức tạp và đa dạng này của website đặt vé xem phim trực tuyến là những điểm tập trung của nghiên cứu trong đề tài này, đòi hỏi sự tìm hiểu bản chất và quy luật vận động của nó để tạo ra một trang web hiệu quả và thuận lợi cho doanh nghiệp, tổ chức và khách hàng

1.4 Phạm vi nghiên cứu

Phạm vi nghiên cứu của đề tài “Xây dựng website đặt vé xem phim trực tuyến” bao gồm các khía cạnh khác nhau, phụ thuộc các mục tiêu cụ thể của nghiên cứu và quy mô dự án:

Phân tích về nhu cầu và mục tiêu của doanh nghiệp: Nghiên cứu bắt

đầu bằng việc tìm hiểu về doanh nghiệp cụ thể, nhu cầu và mục tiêu của họ về việc xây dựng website đặt vé Điều này liên quan đến việc thu thập thông tin về nhu cầu thị trường, mục tiêu kinh doanh, công nghệ và xu hướng thị trường

Xây dựng và thiết kế, phát triển website: Phạm vi nghiên cứu bao

gồm quá trình thiết kế và phát triển trang web đặt vé, bao gồm việc chọn nền Copies for internal use only in Phenikaa University

Trang 21

tảng công nghệ, giao diện người dùng, thông tin phát triển các tính năng khác

Nội dung và chiến lược nội dung: Nghiên cứu tập trung vào cách

doanh nghiệp, tổ chức tạo và quản lý nội dung trên trang web đặt vé Điều này bao gồm việc xác định chiến lược, các rạp và bộ phim kinh doanh, tạo poster, video trailer, tối ưu hóa SEO

Trải nghiệm khách hàng và tương tác: Nghiên cứu sẽ đi sâu vào trải

nghiệm người dùng trên trang web và tương tác của họ với sản phẩm Điều này bao gồm việc thu thập phản hồi từ người dùng, đánh giá hiệu suất trang web và cải thiện trải nghiệm người dùng

Đo lường và đánh giá hiệu suất: Nghiên cứu xem xét cách đo lường

và đánh giá hiệu suất của trang web tin tức, bao gồm việc sử dụng các chỉ số như số lượng tài khoản người dùng đăng ký, số lượng rạp, số lượng phim, số lượng vé,…

1.5 Kiến trúc tổng thể của một website đặt vé xem phim

Kiến trúc tổng thể của một website đặt vé xem phim trực tuyến thường được thiết kế để cung cấp thông tin rạp và phim tại rạp, tin tức về các bộ phim mới, ưu đãi mới một cách hiệu quả, thú vị và dễ tiếp cận khách hàng, đối tác và người quan tâm Dưới đây là một phân tích về kiến trúc tổng thể của một trang web đặt vé xem phim trực tuyến:

Trang chủ: Trang chủ chứa thông tin tổng quan về doanh nghiệp hoặc

tổ chức kinh doanh, bao gồm logo, tiêu đề, mô tả và lời giới thiệu Các bộ phim mới, nổi bật, các rạp chiếu hoặc sự kiện mới nhất sẽ được hiển thị ở vị trí đầu tiên để thu hút sự chú ý ngay từ đầu Trang chủ thường có các liên kết danh đến các phần quan trọng khác của trang web như lịch chiếu, cụm rạp, tin tức, về chúng tôi, liên hệ,…

Lịch chiếu phim: Trang web chia lịch chiếu phim thành hai phần:

Phim đang chiếu và phim sắp chiếu Người dùng có thể dễ dàng xem được thông tin phim và đặt vé phim tùy theo nhu cầu và sở thích của họ

Trang 22

Cụm rạp: Trang web sẽ cung cấp danh sách các cụm rạp trên toàn

quốc, từng cụm rạp sẽ hiển thị địa chỉ, phim đang chiếu và danh sách chiếu

Trang chi tiết tin tức: Đây là nơi hiển thị các bài viết về tin tức, bao

gồm ưu đãi, nội dung, hình ảnh và các thông tin liên quan

Trang chi tiết phim: Trang chi tiết phim giúp cung cấp chi tiết về bộ

phim: nội dung, lịch chiếu, và cho phép khách hàng đặt vé nhanh chóng

Trang đặt vé: Sau khi khách hàng lựa chọn lịch chiếu sẽ được chuyển

đến trang đặt vé, trang này giúp khách hàng lựa chọn vị trí phù hợp và đặt vé, thanh toán trực tuyến

Tối ưu hóa SEO (Search Engine Optimization): Đảm bảo rằng trang

web được tối ưu hóa cho công cụ tìm kiếm bằng cách sử dụng từ khóa, tối ưu hóa tiêu đề, mô tả và URL

Kiến trúc tổng thể của một website đặt vé xem phim trực tuyến cần phải cân nhắc mục tiêu của trang web, sự tiện lợi cho người dùng, và khả năng tương tác để đảm bảo rằng nó cung cấp thông tin và trải nghiệm một cách hiệu quả và thu hút khách hàng

1.6 Những yếu tố cần chú trọng khi xây dựng website đặt vé xem phim

Xây dựng một website đặt vé xem phim trực tuyến là một công việc quan trọng để nâng cao trải nghiệm và tương tác với khách hàng Việc thiết kế và xây dựng một trang web đặt vé hiệu quả đòi hỏi sự chú trọng nhiều yếu tố:

Đầu tiên, khi bắt đầu xây dựng một trang web đặt vé trực tuyến, việc

đặt ra mục tiêu là cực kỳ quan trọng Mục tiêu này bao gồm việc tăng cường nhận thức về thương hiệu, xây dựng lòng tin và tạo mối quan hệ tương tác với khách hàng Hiểu rõ mục tiêu này giúp định hình quá trình phát triển sản phẩm và thiết kế trang web phù hợp

Thứ hai, để đạt được mục tiêu, việc phân tích và nghiên cứu về thị

trường, các đối thủ cạnh tranh và đối tượng khách hàng là cần thiết Điều này giúp doanh nghiệp hoặc tổ chức hiểu rõ mục tiêu mà họ muốn đạt được Bằng

Trang 23

cách nắm bắt được đặc điểm, nhu cầu và mong đợi của khách hàng, có thể tạo ra nội dung hấp dẫn và tăng cường tương tác Tập trung vào việc cung cấp thông tin chất lượng, hữu ích và mang lại giá trị cho khách hàng sẽ giúp xây dựng mối quan hệ đáng tin cậy và thúc đẩy sự tương tác

Thứ ba, nội dung đóng vai trò quan trọng trong việc xây dựng một

website đặt vé xem phim thành công Cần xác định nhu cầu của khách hàng, bao gồm các phim theo độ tuổi, thể loại, định dạng phim, ưu đãi,…

Thứ tư, Trong quá trình thiết kế website đặt vé trực tuyến, giao diện và

trải nghiệm người dùng đóng vai trò quan trọng Một giao diện trực quan, dễ sử dụng và thân thiện sẽ tạo ra trải nghiệm tích cực cho người dùng khi truy cập trang web Sự sắp xếp hợp lý của các mục và các bộ phim giúp người dùng dễ dàng tìm kiếm và lựa chọn vé một cách nhanh chóng và thuận tiện

Thứ năm, tính tương thích và trải nghiệm của trang web là yếu tố

không thể không nhắc đến Ngày nay, người dùng truy cập trang web từ nhiều thiết bị khác nhau như máy tính để bàn, điện thoại di động và máy tính bảng Do đó, trang web cần được xây dựng và thiết kế, phát triển sao cho tương thích trên mọi nền tảng này và tự động điều chỉnh hiển thị dựa trên kích thước màn hình Điều này đảm bảo rằng người dùng sẽ có trải nghiệm tốt nhất trên mọi loại thiết bị

Thứ sáu, việc cung cấp tính năng đăng ký và đăng nhập tài khoản cho

người dùng và quản trị viên là rất cần thiết Điều này giúp người dùng và quản trị viên thực hiện các quyền hạn có trong chức vụ của mình một cách thuận tiện và dễ dàng

Thứ bảy, kiểm tra và sửa lỗi Trước khi đưa trang web vào hoạt động,

cần kiểm tra và sửa các lỗi kỹ thuật, đảm bảo rằng các chức năng của trang web hoạt động ổn định và linh hoạt

Thứ tám, sau khi hoàn thiện trang web, quá trình đăng tải và quảng bá

trở nên cần thiết Đưa sản phẩm lên máy chủ và tiếp tục quảng bá đến đối tượng mục tiêu qua các trang mạng xã hội, các kênh truyền thông và các phương tiện truyền thông khác, doanh nghiệp hoặc tổ chức có thể tăng cơ hội

Trang 24

tiếp cận và tương tác với khách hàng một cách hiệu quả

Thứ chín, quá trình theo dõi và cải thiện là một phần không thể thiếu

Bằng cách sử dụng các công cụ phân tích để theo dõi hiệu suất của trang web, bao gồm lượng truy cập, thời gian duyệt trang và tỷ lệ chuyển đổi, doanh nghiệp hoặc tổ chức có thể điều chỉnh nội dung và chiến lược để cải thiện trải nghiệm của người dùng, từ đó đạt được mục tiêu kinh doanh mong muốn

Việc phát triển một trang web đặt vé xem phim là một quy trình phức tạp, nhưng sẽ lại nhiều lợi ích về tương tác và lượng khách hàng, thúc đẩy phát triển thương hiệu Để đảm bảo rằng doanh nghiệp hoặc tổ chức có thể tận dụng được những lợi ích này, cần đầu tư đủ thời gian và nỗ lực vào việc xây dựng một trang web chất lượng và hiệu quả

1.7 Công nghệ và công cụ sử dụng

Website đặt vé xem phim trực tuyến được xây dựng dựa trên ngôn ngữ lập trình HTML, CSS, JS, Framework ReactJS và API cung cấp sẵn Được chạy thử trên môi trường thực tế hosting

1.7.1 HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu được sử dụng để tạo ra các trang web HTML được sử dụng để định dạng và cấu trúc hóa nội dung trên trang web bằng cách sử dụng các thẻ (tags) đặc biệt Các thẻ HTML chứa thông tin về cấu trúc và nội dung của trang web, bao gồm văn bản, hình ảnh, liên kết, bảng, biểu mẫu và nhiều phần tử khác Các trình duyệt web sử dụng mã HTML để hiển thị nội dung của trang web cho người dùng

 Cấu trúc HTML của website: Một trang web thường bao gồm nhiều trang

con, mỗi trang con có một tập tin HTML riêng HTML chủ yếu được sử dụng để xác định cấu trúc và định dạng của trang web, cũng như hiển thị nội dung tĩnh Nó không thể thực hiện các chức năng động mà JavaScript và các ngôn ngữ lập trình phía máy chủ như PHP, Python hoặc Node.js thường được sử

dụng để thực hiện Khi kết hợp với CSS (Cascading Style Sheets), HTML

giúp tạo ra giao diện trực quan và hấp dẫn cho trang web CSS được sử dụng để định dạng và trang trí các phần tử HTML, từ việc cài đặt màu sắc, phông Copies for internal use only in Phenikaa University

Trang 25

chữ, đường viền đến bố trí và kiểu hiển thị JavaScript được sử dụng để tạo

ra các tính năng động trên trang web, bao gồm hiệu ứng, xử lý sự kiện, và tương tác người dùng JavaScript cung cấp sức mạnh cho trang web bằng

cách làm cho trải nghiệm của người dùng trở nên linh hoạt và tương tác hơn  Ưu điểm của HTML:

- Đơn giản và dễ sử dụng: HTML là ngôn ngữ đánh dấu cơ bản và dễ học, không cần kiến thức lập trình phức tạp Điều này làm cho nó trở thành một công cụ lý tưởng cho người mới bắt đầu trong việc tạo ra các trang web cơ bản

- Phổ biến và tiêu chuẩn: HTML là một tiêu chuẩn của ngành CNTT và được sử dụng rộng rãi trên toàn thế giới Điều này đảm bảo tính tương thích giữa các trình duyệt web khác nhau và giúp các trang web hiển thị một cách đồng nhất trên các nền tảng khác nhau

- Hỗ trợ đa phương tiện: HTML cho phép nhúng nhiều loại phương tiện khác nhau như hình ảnh, video, âm thanh và các đối tượng nhúng khác vào trang web một cách dễ dàng

- Tích hợp dễ dàng: HTML dễ kết hợp với các ngôn ngữ và công nghệ khác như CSS để kiểm soát kiểu dáng và JavaScript để thêm tính năng động

 Nhược điểm của HTML:

- Giới hạn trong việc tạo ra trải nghiệm động: HTML là ngôn ngữ tĩnh, không thể tạo ra các hiệu ứng động hoặc tương tác người dùng phức tạp mà JavaScript mới có thể thực hiện

- Khả năng bảo mật hạn chế: Vì HTML là một ngôn ngữ văn bản mở, ai cũng có thể xem mã nguồn và thay đổi nó Điều này có thể tạo ra vấn đề về bảo mật và có thể làm thay đổi cấu trúc của trang web mà không có sự kiểm soát

- Tính tương thích giữa các trình duyệt: Mặc dù HTML là một tiêu chuẩn, nhưng cấu trúc và hiển thị của một số phần tử có thể khác nhau trên các Copies for internal use only in Phenikaa University

Trang 26

trình duyệt web khác nhau, gây ra các vấn đề về tương thích

1.7.2 Framework ReactJS

ReactJS là một thư viện JavaScript phổ biến được sử dụng cho việc xây dựng giao diện người dùng (UI) cho các ứng dụng web Được phát triển bởi Facebook, ReactJS tập trung vào việc xây dựng các giao diện người dùng tương tác và linh hoạt

Dưới đây là một số khái niệm cơ bản về ReactJS:

- Component(Thành phần): ReactJS sử dụng cấu trúc component để

phân chia giao diện người dùng thành các phần nhỏ và tái sử dụng được Mỗi component có thể chứa mã HTML, CSS và JavaScript để mô tả và xử lý một phần cụ thể của giao diện người dùng

- JSX (JavaScript XML): JSX là một phần mở rộng của JavaScript, cho

phép viết mã HTML giống như cú pháp XML trong mã JavaScript JSX giúp kết hợp giữa mã JavaScript và cấu trúc giao diện một cách dễ dàng và rõ ràng

- Props (Thuộc tính): Props là các giá trị được truyền từ component cha

đến component con thông qua các thuộc tính Props giúp truyền dữ liệu từ component này sang component khác và làm cho component linh hoạt và tái sử dụng được

- State (Trạng thái): State là dữ liệu nội bộ của một component, có thể

thay đổi trong quá trình thực thi Khi state của một component thay đổi, React sẽ tự động cập nhật giao diện người dùng để phản ánh các thay đổi này

- Lifecycle methods (Phương thức lifecycle): Lifecycle methods là các

phương thức được gọi trong quá trình "lifecycle" của một component, từ khi nó được tạo ra cho đến khi nó bị hủy Các phương thức này cho phép thực hiện các hành động như khởi tạo dữ liệu, cập nhật giao diện, hoặc dọn dẹp tài nguyên

- Event handling (Xử lý sự kiện): ReactJS cho phép xử lý sự kiện của

Trang 27

người dùng như click, hover, change, v.v thông qua việc gắn các hàm xử lý sự kiện vào các phần tử giao diện

- Virtual DOM (DOM ảo): Virtual DOM là một bản sao của DOM thực

sự được React sử dụng để tối ưu hóa hiệu suất React so sánh và cập nhật chỉ các phần của DOM thực sự cần thay đổi, giúp cải thiện hiệu suất của ứng dụng

- Hooks: Hooks là một tính năng mới được giới thiệu trong React 16.8,

cho phép sử dụng state và các tính năng của React trong các functional components

mà không cần sử dụng class components Những hooks phổ biến bao gồm useState, useEffect, và useContext

 Hoạt động của ReactJS

Hình 1.1: Sơ đồ đơn giản về cách hoạt động của ReactJS

Cách một ứng dụng ReactJS hoạt động đơn giản gồm 5 bước:

 Bước 1: Khởi tạo Component: Trong bước này, React sẽ tạo các thành phần (components) của ứng dụng bằng cách định nghĩa các lớp hoặc hàm JavaScript Các thành phần này đại diện cho các phần khác nhau Copies for internal use only in Phenikaa University

Trang 28

của giao diện người dùng và có thể có trạng thái ban đầu

 Bước 2: Render Component: React gọi phương thức render() của mỗi thành phần để tạo ra một cây thành phần (component tree) Phương thức này trả về một cây đối tượng React, mô tả cách các thành phần sẽ được hiển thị trên giao diện

 Bước 3: Tạo Virtual DOM: React sử dụng thông tin từ phương thức render() để tạo ra một Virtual DOM, là một bản sao ảo của DOM

 Bước 4: So sánh Virtual DOM và DOM thật: React so sánh Virtual DOM với DOM thật để xác định những thay đổi cần được áp dụng

 Bước 5: Cập nhật DOM: Dựa trên kết quả so sánh, React cập nhật DOM thật chỉ với những phần cần thay đổi, giúp tối ưu hóa hiệu suất

1.7.3 Sử dụng localStorage trong ReactJS

LocalStorage là một tính năng của trình duyệt web HTML5, cho phép các trang web lưu trữ dữ liệu tạm thời trên máy tính của người dùng Dữ liệu được lưu trữ trong LocalStorage sẽ tồn tại ngay cả khi người dùng đóng trình duyệt và mở lại sau này

LocalStorage hoạt động bằng cách lưu trữ dữ liệu dưới dạng cặp giá trị (key-value pairs) trong trình duyệt Dữ liệu được lưu trữ dưới dạng chuỗi, do đó cần được chuyển đổi sang dạng chuỗi trước khi lưu trữ và từ dạng chuỗi sang dữ liệu gốc khi truy xuất

khóa-LocalStorage thường được sử dụng để lưu trữ các thông tin như cài đặt người dùng, dữ liệu phiên làm việc (session data), thông tin giỏ hàng trong các trang mua sắm trực tuyến, và các tùy chọn cá nhân của người dùng

Trang 29

Chạy localStorage- Lưu trữ và lấy thông tin:

Hủy localStorage:

1.7.4 Axios và Redux Thunk

Axios là một thư viện HTTP client được sử dụng để gửi các yêu cầu

HTTP từ ứng dụng của bạn đến một máy chủ và xử lý các phản hồi từ máy chủ Axios là một công cụ mạnh mẽ và dễ sử dụng, cho phép bạn thực hiện các yêu cầu HTTP một cách linh hoạt và tiện lợi trong ứng dụng React của mình Với Axios, ta có thể thực hiện các loại yêu cầu như GET, POST, PUT, DELETE và nhiều loại yêu cầu khác đối với API hoặc các tài nguyên từ máy chủ Nó cung cấp cơ chế xử lý lỗi mạnh mẽ, cho phép bạn xử lý lỗi một cách dễ dàng và linh hoạt

Redux Thunk: Redux Thunk là một middleware giúp xử lý các hành

động không đồng bộ (asynchronous actions) Redux Thunk cho phép bạn viết các action creators mà trả về một hàm thay vì một đối tượng action Hàm này

Trang 30

có thể thực hiện các logic không đồng bộ như gửi các yêu cầu HTTP và sau đó dispatch các action khi các yêu cầu này hoàn thành

1.7.5 Một số thư viện hỗ trợ khác

- Formik và yup: Formik: Là một thư viện quản lý biểu mẫu trong

React Nó cung cấp các công cụ để quản lý trạng thái của biểu mẫu, xử lý sự kiện và gửi dữ liệu Yup: Là một thư viện xác thực dữ liệu cho JavaScript và TypeScript Yup cho phép bạn định nghĩa schema (cấu trúc dữ liệu) và quy tắc xác thực để kiểm tra và đảm bảo rằng dữ liệu đầu vào đáp ứng các yêu cầu

- Ant Design: Ant Design là một thư viện UI (User Interface) phổ biến

được xây dựng trên React và React Native Nó cung cấp một bộ công cụ giao diện người dùng (UI toolkit) đầy đủ tính năng, hiện đại và dễ sử dụng để giúp phát triển ứng dụng web và di động nhanh chóng và dễ dàng hơn

- MUI(Material Design): Mui là một thư viện UI (User Interface) phổ

biến cho React được phát triển bởi Google Tên gọi "Mui" là viết tắt của "Material-UI", và nó cung cấp các thành phần giao diện người dùng (UI components) dựa trên nguyên tắc thiết kế của Material Design

- Tailwind CSS: Tailwind CSS là một thư viện CSS hiện đại và mạnh mẽ

được thiết kế để giúp bạn xây dựng giao diện người dùng một cách nhanh chóng và linh hoạt Thay vì sử dụng các lớp CSS cụ thể cho từng phần tử HTML, Tailwind CSS cung cấp một tập hợp các lớp CSS tiền xử lý (utility classes) để bạn có thể áp dụng trực tiếp vào các thành phần

Trang 31

CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG

2.1 Nội dung công việc

 Là một Website chuyên đặt vé xem phim tại các rạp

 Người dùng truy cập vào website có thể lựa chọn đặt vé xem các bộ phim phù hợp với sở thích, thời gian, địa điểm rạp Có thể nắm rõ các tin tức và ưu đãi mới nhất tại các rạp

 Các bộ phim, lịch chiếu được sắp xếp hợp lý Người dùng sẽ có cái nhìn tổng quan về tất cả các bộ phim và lịch chiếu phim tại các cụm rạp

 Người dùng có thể xem chi tiết từng bộ phim (Nội dung, cụm rạp, danh sách chiếu, …)

 Mỗi hệ thống rạp sẽ có các danh sách các cụm rạp tương ứng, mỗi cụm rạp sẽ có các danh sách lịch chiếu phim theo từng cụm rạp

 Khi lựa chọn được bộ phim và lịch chiếu ưng ý thì người dùng click vào đặt vé sẽ được chuyển đến trang đặt chỗ cho lịch chiếu phim đó

 Sau khi đã đặt chỗ xong website sẽ hiển thị thông tin đặt vé (Số ghế, thời gian, địa điểm rạp, giá tiền …)

 Đơn đặt vé sẽ luôn hiển thị trong lịch sử đặt vé ở trang hồ sơ người dùng

Trang 32

 Quản lý người dùng(User) và thông tin của người dùng an toàn

 Tính bảo mật cao, đảm bảo nếu không có Email, password thì không User nào có thể thay đổi thông tin hệ thống Website vì vật quản lý dữ liệu bằng mật khẩu đăng nhập: Email, Mật khẩu

 Các thông tin của khách hàng được bảo mật chặt chẽ

 Hệ thống quản trị an toàn, không thể bị truy cập do lỗi của hệ thống

 Về hệ thống: Trang web hoạt động trong trình duyệt trên mạng Vì vật trang

web hoạt động được với tất cả các hệ thống vận hành

 Về công cụ sử dụng:

 Website sử dụng Framework ReactJS và Api có sẵn

 Các công cụ sử dụng:

o Visual Studio Code: trình soạn thảo mã nguồn mở

o GitHub: quản lý mã nguồn, theo dõi thay đổi

o Trình điều khiển phiên bản: npm để quản lý và cài đặt các thư viện cần thiết

2.2 Phân tích giao diện của Website 2.2.1 Giao diện User(Người dùng)

 Giao diện phải thân thiện, tối ưu, dễ sử dụng

 Phải hiện lên được thế mạnh của Website, cũng như thương hiệu, tạo niềm tin cho khách hàng ngay từ lần đầu vào

 Màu sắc phải hài hòa, ổn định, hình ảnh nội dung rõ rang, mạch lạc, Font chữ dễ nhìn, chức năng tiện lợi, dễ sử dụng chỉ với 1 cú click chuột

 Giới thiệu được các bộ phim, các cụm rạp, lịch chiếu mà website đang Copies for internal use only in Phenikaa University

Trang 33

có

 Được phép đăng ký thành viên, có biểu mẫu thông tin liên hệ  Có danh sách các bộ phim, mỗi bộ phim phải có trang chi tiết phim  Chức năng đặt vé, lịch sử đặt vé

 Giới thiệu thông tin website: địa chỉ, đại lý các rạp, số điện thoại, email liên hệ

2.2.2 Giao diện quản trị viên (Admin)

 Quản lý danh sách phim  Quản lý cụm rạp

 Quản lý lịch chiếu phim  Quản lý tài khoản khách hàng  Quản lý đăng nhập

 Quản lý các thay đổi của website

 Được bảo vệ bằng Email & Password riêng của Admin

Trang 34

Đăng nhập tài khoản Quản lý thông tin cá nhân Đổi mật khẩu

Đăng xuất

Quản lý danh sách phim

Quản lý cụm rạp

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

Quản lý tài khoản

Quản lý chức vụ

Cài đặt hệ thống Đăng nhập tài khoản Quản lý thông tin cá nhân Đổi mật khẩu

Đăng xuất

Trang 35

2.4 Sơ đồ phân rã chức năng

Hệ thống website đặt vé xem phim có 7 chức năng chính: Quản lý hệ thống, quản lý danh sách phim, quản lý lịch chiếu phim, quản lý tài khoản, quản lý hệ thống rạp, quản lý thông tin cá nhân và đặt vé

Hình 2.1 Sơ đồ phân rã chức năng

Trang 36

2.5 Lược đồ Use case hệ thống 2.5.1 Use case tổng quan hệ thống

Hình 2.2 Use case tổng quan hệ thống

Website đặt vé xem phim gồm có các chức năng:

Đăng ký: Cho phép người dùng tạo mới tài khoản trên website bằng cách cung

cấp thông tin cá nhân: họ tên, email, số điện thoại, mật khẩu,…

Đăng nhập: Người dùng đã đăng ký có thể đăng nhập tài khoản của họ bằng

cách nhập email và mật khẩu đã đăng ký tài khoản

Quản lý hệ thống rạp: Để phân loại rõ các hệ thống rạp Quản trị viên có

quyền thêm, cập nhật, xóa rạp

Quản lý danh sách phim: Cho phép quản trị viên thêm, cập nhật, xóa phim

trên trang web Họ có thể thêm hình ảnh, u r l t r a i l e r p h i m và định dạng văn bản nội dung phim

Quản lý tài khoản: Quản trị viên có quyền quản lý tài khoản người dùng, bao

gồm thêm, cập nhật, xóa tài khoản

Quản lý thông tin cá nhân: Người dùng có thể cập nhật thông tin cá nhân

của họ như, họ tên, sđt, email, mật khẩu,…

Quản lý lịch chiếu phim: Quản trị viên có quyền quản lý danh sách lịch chiếu

phim, bao gồm thêm, cập nhật, xóa lịch chiếu

Đặt vé phim: Cho phép người dùng đặt mua vé xem phim dựa theo lịch chiếu

Trang 37

hoặc khu vực, thuộc về cùng một hệ thống rạp

Lịch chiếu phim Danh sách các suất chiếu phim trong một khoảng thời gian nhất định tại một rạp chiếu phim cụ thể, bao gồm thông tin về thời gian, phim được chiếu và phòng chiếu

Bảng 2.2 Bảng thuật ngữ nghiệp vụ rạp chiếu phim

2.5.2 Use case đăng ký/đăng nhập

Hình 2.3 Use case đăng ký/đăng nhập