ĐỒ án WEBSITE GIỚI THIỆU và đặt vé XEM PHIM

Trong hiện tại và tương lai với tầm quan trọng và sự phát triển của loại hìnhgiải trí xem phim sẽ kéo theo khả năng phát triển của các website liên quan đến việchỗ trợ các hình thức cho

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

HUỲNH TẤN HOÀNG – 17520508 NGUYỄN DUY TÂN – 17521014

ĐỒ ÁN 2 WEBSITE GIỚI THIỆU VÀ ĐẶT VÉ XEM PHIM

GIẢNG VIÊN HƯỚNG DẪN THẦY HUỲNH NGUYỄN KHẮC HUY

LỜI CẢM ƠN

Lời đầu tiên, chúng em xin bày tỏ lòng biết ơn sâu sắc đến thầy HuỳnhNguyễn Khắc Huy – Giảng viên hướng dẫn chúng em thực hiện đề tài môn Đồ án 2,thầy đã cùng đồng hành và tận tình hướng dẫn cho chúng em qua từng giai đoạn của

đồ án Nhờ có sự giúp đỡ nhiệt tình của thầy mà chúng em có thể hoàn thành đượcđược đồ án này một cách tốt nhất

Vì kiến thức của chúng em vẫn còn hạn hẹp nên không thể tránh khỏi nhữngthiếu sót trong quá trình thực hiện đồ án Tuy nhiên, chúng em đã cố gắng hoànthành đúng hạn và hạn chế các lỗi nhiều nhất có thể Nhóm chúng em luôn mongđợi nhận được những ý kiến đóng góp quý báu từ thầy và qua đó có thể rút kinhnghiệm, tự sửa chữa, hoàn thiện bản thân mình trên tinh thần nghiêm túc, tự giáchọc hỏi

Trong quá trình làm đề tài báo cáo, sẽ không thể tránh khỏi các thiếu sót, rấtmong nhận được phản hồi từ thầy và các bạn để góp phần làm cho bản báo cáothêm hoàn thiện hơn

Chân thành cảm ơn thầy!

MỤC LỤC

Ch ươ ng 1 M Đ U Ở Ầ 1

1.1 Lí do chọn đề tài 1

1.2 Mục tiêu nghiên cứu 1

1.3 Phương pháp nghiên cứu 2

1.4 Đối tượng hướng đến 2

Ch ươ ng 2 GI I THI U REACTJS Ớ Ệ 3

2.1 Tổng quan về ReactJS 3

2.1.1 Giới thiệu 3

2.1.2 Các đặc trưng của ReactJs 3

2.1.2.1 JSX 3

2.1.2.2 Component 3

2.1.2.3 State 4

2.2 Lí do chọn lựa 4

Ch ươ ng 3 M T S TH VI N S D NG Ộ Ố Ư Ệ Ử Ụ 5

3.1 Bootstrap 5

3.1.1 Giới thiệu 5

3.1.2 Ưu điểm 5

3.2 Redux: 5

3.2.1 Khái niệm: 6

3.2.2 Cấu trúc: 6

3.2.3 Nguyên lý hoạt động của Redux: 6

3.2.4 3 nguyên tắc trong Redux: 7

3.3 Hook: 7

3.3.1 Giới thiệu về React Hooks: 7

3.3.2 Basic Hooks: 7

3.3.3 Additional Hooks 8

3.4 Axios: 9

3.4.1 Khái niệm: 9

3.4.2 Đặc điểm của Axios: 9

3.4.3 Các thao tác với Request sử dụng Axios: 9

Ch ươ ng 4 XÂY D NG WEBSITE Đ T VÉ XEM PHIM Ự Ặ 11

4.1 Phạm vi ứng dụng 11

4.2 Các chức năng chính 11

4.2.1 Về phía Admin 11

4.2.2 Về phía người mua vé 11

4.3 Phân tích thiết kế 11

4.3.1 Lược đồ phân tích chức năng 11

4.3.2 Bảng mô tả chức năng 12

4.3.3 Sơ đồ Use Case 13

4.3.3.1 Use case Admin 13

4.3.3.2 Use case người dùng 14

4.3.4 Lược đồ API cho Website: 15

4.4 Các màn hình cho từng chức năng 15

4.4.1 Giao diện cho Admin 15

4.4.2 Mô tả cho màn hình Admin 16

4.4.3 Giao diện cho User thông thường 20

4.4.3.1 Màn hình chính: 20

4.4.3.2 Màn hình đăng nhập: 21

4.4.3.3 Màn hình đăng ký tài khoản 22

4.4.3.4 Màn hình chọn lịch chiếu phim 23

4.4.3.5 Màn hình đặt ghế ngồi 23

4.4.3.6 Màn hình lịch sử đặt vé: 24

4.4.4 Mô tả các màn hình chức năng 24

4.4.4.1 Màn hình chính 24

4.4.4.2 Màn hình đăng nhập 27

4.4.4.3 Màn hình đăng ký tài khoản: 27

4.4.4.4 Màn hình chọn lịch chiếu 28

4.4.4.5 Màn hình chọn ghế ngồi 29

4.4.4.6 Màn hình xem lịch sử đặt vé: 30

Ch ươ ng 5 CÀI Đ T Ặ 30

5.1 Hướng d n cài đ tẫ ặ 30

Ch ươ ng 6 K T LU N Ế Ậ 31

6.1 Phân công công vi cệ 31

6.2 Kết quả thu được 31

6.3 Khó khăn gặp phải 32

6.4 Hướng phát triển trong tương lai 32

DANH MỤC HÌNH

Hình 4.1 Sơ đồ phân cấp chức năng 12

Hình 4.2 Use case Admin 13

Hình 4.3 Sơ đồ Use case cho khách hàng 14

Hình 4.4 Giao diện quản lý thông tin người dùng 15

Hình 4.5 Giao diện thêm phim 15

Hình 4.6 Giao diện cho chức năng Quản lý lịch chiếu phim 16

Hình 4.7 Phần đặt vé nhanh và danh sách phim 20

Hình 4.8 Header của màn hình chính 20

Hình 4.9 Phần liên hệ hỗ trợ, Copyright,… 21

Hình 4.10 Phần giới thiệu các phim sắp chiếu 21

Hình 4.11 Màn hình đăng nhập 22

Hình 4.12 Màn hình đăng ký 22

Hình 4.13 Màn hình chọn lịch chiếu phim 23

Hình 4.14 Màn hình đặt ghế ngồi 23

Hình 4.15 Màn hình sau khi đã đặt ghế 24

Hình 4.16 Màn hình xem lịch sử đặt vé 24

DANH MỤC BẢNG

Bảng 4.1 Mô tả các chức năng chính của website 13

B ng ả 6.1 Phân công công vi cệ 31

Chương 1 MỞ ĐẦU

1.1 Lí do chọn đề tài

Trong cuộc sống bận bịu hiện nay, nhu cầu giải trí là không thể thiếu với bất

kì một người dân nào Có rất nhiều hình thức giải trí khác nhau như các khu vuichơi giải trí, các trò chơi điện tử, xem phim, nghe nhạc,… Mỗi hình thức đều cómột tầm quan trọng riêng tuỳ thuộc vào sở thích cũng như nhu cầu giải trí khácnhau của mỗi người Trong đó nhu cầu xem phim giải trí là vô cùng phổ biến vàđược nhiều người chọn mỗi khi họ có dịp nghỉ ngơi thư giãn cùng người thân, bạnbè,… Với việc kỹ xảo, các kỹ thuật điện ảnh ngày càng phát triển thì trong hiện tại

và cả tương lai việc xem phim sẽ ngày càng thu hút rất nhiều người Và qua đó cácrạp chiếu phim, các hãng phim, các trang web đặt vé cũng sẽ ngày càng phát triểntheo

Trong hiện tại và tương lai với tầm quan trọng và sự phát triển của loại hìnhgiải trí xem phim sẽ kéo theo khả năng phát triển của các website liên quan đến việchỗ trợ các hình thức cho loại hình giải trí này như đặt vé xem phim,… Nhận ra điềuđó nên nhóm chúng em đã quyết định chọn đề tài là: “Website giới thiệu và đặt véxem phim” với mục đích giúp đỡ người dùng có thể tham khảo các lịch chiếu củaphim mà họ mong muốn xem, các phim mới sắp chiếu, các tin tức phim để mọingười có thể tham khảo và cũng như đặt vé tại các rạp phim theo lịch mong muốn

để có những thời gian thư giãn cho bản thân cũng như với gia đình, người thân củahọ

1.2 Mục tiêu nghiên cứu

Dựa vào một thư viện đang phát triển phổ biến hiện nay và cũng như sẽ làtương lai cho các thư viện phát triển Website sau này đó là ReactJS, ngoài ra còn là

sự phát triển quan trọng của các Website hỗ trợ đặt vé và thông tin phim cho ngườidùng Mục tiêu của đồ án là tìm hiểu thư viện ReactJS để phát triển một Website hỗtrợ đặt vé và giới thiệu phim với khả năng cập nhật thông tin về vé và cung cấp

thông tin phim một cách nhanh chóng và chính xác đến người dùng Nhóm chúng

em sẽ dựa vào các thư viện có trong ReactJS để dựng giao diện cũng như tận dụngAPI được cung cấp để có thể lấy dữ liệu về Website Cụ thể em sẽ dùng các thànhphần trong ReactJS là Function Component và Class Component để xây dựng giaodiện cũng như tận dụng thư viện Bootstrap làm CSS cho giao diện, sử dụng 1 số thưviện trong JS để quản lý state như Redux,… Và thông qua các API được cung cấp

để lấy data cho trang Web

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

Để hoàn thành đồ án này nhóm chúng em đã tham khảo các kiến thức về thưviện ReactJS thông qua các diễn đàn, các trang chia sẻ kiến thức cũng nhưdocument của thư viện ReactJS để có lượng kiến thức cần thiết để hoàn thành đồ án.Ngoài ra nhóm chúng em còn tham khảo các trang Web giới thiệu và đặt vé xemphim trên thị trường để có thể rút ra các thiếu sót, kinh nghiệm về các chức năng cótrong một trang Web giới thiệu và đặt vé xem phim để có thể vận dụng cho đồ án.Sau đó nhóm chúng em tiến hành lên kế hoạch cho đồ án bằng cách thiết kế các sơ

đồ, thiết kế API cho cơ sở dữ liệu và tiến hành hiện thực hoá đồ án

1.4 Đối tượng hướng đến

Đối tượng hướng đến của đồ án là các rạp chiếu phim có cung cấp các APIcho các bên phát triển bên ngoài để phát triển các trang Web giới thiệu và đặt véxem phim có thể phát triển dự án để giúp cho các khách hàng của các rạp phim nàycó thể tìm được vé ở nhiều nơi khác nhau Đây là một hướng phát triển khá phổbiến hiện nay và được rất nhiều bên phát triển các Website giới thiệu và đặt vé xemphim sử dụng với kinh phí khi sử dụng API là không quá cao và thông qua API thìcác Website có thể lấy được đầy đủ các thông tin cần thiết để cung cấp khả năng đặt

vé cho người dùng cũng như quảng bá các lịch chiếu phim của các rạp phim rộngrãi hơn, giúp người dùng có nhiều lựa chọn khi muốn tìm và đặt vé xem phim

Chương 2 GIỚI THIỆU REACTJS

Các đặc điểm của component:

- Hoạt động giống như các hàm và trả về các thành phần HTML

- Các component là thành phần độc lập và có thể tái sử dụng lại nhiều lần

- Các component thực hiện công việc giống như các functions trongJavaScript nhưng chúng độc lập và nhiệm vụ chính là trả về HTML thôngqua hàm render

Có 2 loại component:

- Stateless Component (functional component): thực chất là 1 function cónhiệm vụ return về một đoạn mã HTML hiển thị ra giao diện

- Stateful Component (class component): là một class có chứa phương thứcrender() Khi component được gọi, hàm render sẽ chạy và trả về nội dungHTML bên trong

Reactjs có một số ưu điểm như:

- Hiệu quả phát triển: Tốn ít thời gian phát triển nhưng chất lượng cao hơn.Reactjs cho phép viết module, có thể chia dự án thành các phần riêngbiệt, giúp tái sử dụng mã, tăng hiệu suất phát triển

- Linh hoạt và dễ bảo trì: Code Reactjs dễ bảo trì do cấu trúc module củanó

- Bộ công cụ mở, phong phú: Là một công nghệ mã nguồn mở, nó có hệsinh thái phong phú, bao gồm số lượng lớn các công cụ, thư viện mãnguồn mở

- Cộng đồng mạnh mẽ: Được thiết kế và duy trì bởi Facebook, được hơn

1000 người đóng góp trên toàn thế giới và được hơn hàng chục nghìntrang web sử dụng

- Chia nhỏ cấu trúc UI thành những component đơn giản

Chương 3 MỘT SỐ THƯ VIỆN SỬ DỤNG

3.1 Bootstrap

3.1.1 Giới thiệu

Bootstrap là một front-end framework bao gồm HTML templates, CSStemplates và Javascript tạo ra những thứ cơ bản có sẵn như: typography, forms,buttons, tables, navigation, modals, image carousels và nhiều thứ khác Trongbootstrap có thêm các plugin Javascript giúp cho việc thiết kế reponsive dễ dànghơn và nhanh chóng hơn

Ngoài ra ngày trước khi một Component cha muốn truyền một tham số hayfunction cho Component con thì cần phải đi qua nhiều nơi mới có thể gửi được data

đến Component con Với việc dự án càng lớn thì con đường đi sẽ là rất xa và việc xử

lý cũng sẽ trở nên vô cùng khó khăn

3.2.1 Khái niệm:

Redux là 1 thư viện giúp chúng ta quản lý các state 1 cách tốt hơn Thay vìphải truyền state qua từng Component thì Redux sẽ tạo ra 1 store duy nhất dùng đểthay đổi dữ liệu

Redux được xây dựng dựa trên nền tảng của ngôn ngữ Elm và kiến trúc Flux

do Facebook giới thiệu Do vậy Redux thường là 1 thư viện không thể thiếu trongcác dự án có sử dụng React

3.2.2 Cấu trúc:

Redux gồm 4 thành phần chính gồm:

 Store: Là 1 object lưu trữ state của toàn bộ ứng dụng, cho phép truy cập

State qua getState(), update State qua dispatch(action)

 Action Creators: Là nơi tạo ra các action dùng để mô tả event do người

dùng tạo ra

 Reducer: Là 1 fuction nhận đầu vào là state và các mô tả về event và dựa

trên đó để trả về state tiếp theo nhưng ko thay đổi state cũ

 View: Hiển thị dữ liệu được cung cấp bởi Store.

3.2.3 Nguyên lý hoạt động của Redux:

Gồm 4 bước chính:

 Bước 1: Khi có 1 sự kiện (event) như là GET, POST, UPDATE,DELETE thì Action Creators sẽ sinh ra 1 action mô tả những gì đangxảy ra

 Bước 2: Action sẽ thực hiện điều phối Reducer xử lý event thông qua hàmdispatch(action)

 Bước 3: Reducer dựa vào những mô tả của Action để biết cần thực hiệnthay đổi gì trên State và thực hiện update.

 Bước 4: Khi State được update thì các trigger đang theo dõi state đó sẽnhận được thông tin update và tiến hành render lại phần view để hiển thị

ra cho người dùng

3.2.4 3 nguyên tắc trong Redux:

 Store luôn là nguồn dữ liệu đúng và tin cậy duy nhất

 State chỉ được phép đọc, cách duy nhất để thay đổi State là phát sinh mộtAction, và để Reducer thay đổi State

 Các fuction Reducer phải là Pure function (với cùng 1 đầu vào chỉ cho ra 1đầu ra duy nhất)

3.3 Hook:

3.3.1 Giới thiệu về React Hooks:

Hooks chính thức được giới thiệu trong phiên bản React 16.8 Nó cho phépchúng ta sử dụng state và các tính năng khác của React mà không phải dùng đếnClass Nghĩa là ta có thể dùng state trong Stateless Component (functionalcomponent)

Hooks là đại diện cho tương lai hướng đến Functional Programming và không

- Hàm này nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1 mảng gồmcó 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 functiondùng để update state (giống như hàm setState cũ).

 useEffect():

- Hàm này giúp chúng ta xử lý các side effects, useEffect sẽ tương đươngvới các hàm componentDidMount(), componentDidUpdate() vàcomponentWillUnMount() trong LifeCycle, giúp ta giảm bớt sự phức tạp

từ các hàm trong LifeCycle

- Để tránh việc hàm useEffect() luôn chạy vào mỗi khi có thay đổi State thì

ta có thể truyền vào tham số thứ 2 trong useEffect đó là 1 array, trongarray này ta có thể truyền vào đó những giá trị mà useEffect() sẽ subcribenó, tức là chỉ khi nào những giá trị đó thay đổi thì hàm useEffect() mớiđược thực thi Hoặc bạn cũng có thể truyền vào 1 array rỗng thì khi đó nó

sẽ chỉ chạy 1 lần đầu tiên sau khi render giống vớihàm ComponentDidMount()

- Còn 1 vấn đề nữa đó là trong hàm useEffect() ta có thể return về 1function (chú ý là bắt buộc phải return về function) thì khi làm điều nàynó sẽ tương đương với việc ta sử dụng hàm LifeCyclecomponentWillUnMount()

3.3.3 Additional Hooks

 useReducer(): Đây có thể coi là một phiên bản nâng cao của useState().useReducer cũng nhận vào một reducer dạng (state, action) và trả ra mộtnewState Khi sử dụng chúng ta sẽ nhận được một cặp bao gồm current state

và dispatch function

 useMemo(): useMemo() giúp ta kiểm soát việc được render dư thừa của cáccomponent con, nó khá giống với hàm shouldComponentUpdate trong

LifeCycle Bằng cách truyền vào 1 tham số thứ 2 thì chỉ khi tham số này thayđổi thì useMemo mới được thực thi.

 useCallback(): useCallback() có nhiệm vụ tương tự như useMemo() nhưngkhác ở chỗ function truyền vào useMemo() bắt buộc phải ở trong quá trìnhrender trong khi đối với useCallback() đó lại là function callback của 1 eventnào đó

3.4 Axios:

3.4.1 Khái niệm:

Axios là một HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js

3.4.2 Đặc điểm của Axios:

 Tạo XMLHttpRequests từ trình duyệt

 Thực hiện các http request từ node.js

 Hỗ trợ Promise API

 Chặn request và response

 Chuyển đổi dữ liệu request và response

 Hủy requests

 Tự động chuyển đổi về dữ liệu JSON

 Hỗ trợ phía client để chống lại XSRF

3.4.3 Các thao tác với Request sử dụng Axios:

Chúng ta có thể tạo bất kỳ một request HTTP nào bằng cách truyền vào cácobject option cho Axios

Các phương thức có trong Axios:

 axios.post(url[, data[, config]])

 axios.put(url[, data[, config]])

 axios.patch(url[, data[, config]])

 Ngoài ra còn có phương thức axios.create() để tạo Axios object

Cấu trúc trả về cho một Request gồm các thông tin:

 data: Dữ liệu trả về cung cấp bởi server

 status: Mã HTTP status trả về từ server

 statusText: Thông điệp HTTP status trả về từ server

 headers: Các header mà server phản hồi, các tên của header được viết thườngtoàn bộ

 config: Các cấu hình khi thực hiện request

 request: Request thực hiện để nhận được response

Chương 4 XÂY DỰNG WEBSITE ĐẶT VÉ XEM PHIM

4.1 Phạm vi ứng dụng

Website chúng em hướng đến việc làm trung gian giữa các rạp chiếu phim vàngười mua vé Hỗ trợ người dùng đặt vé xem phim của các rạp chiếu phim người dùng yêu thích một cách dễ dàng

4.2 Các chức năng chính

4.2.1 Về phía Admin

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

- Quản lý thông tin phim

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

4.2.2 Về phía người mua vé

- Đăng nhập, đăng xuất

- Đăng ký tài khoản

4.3.2 Bảng mô tả chức năng

Tên chức năng Mô tả

Đăng nhập Cho phép người dùng đăng nhập vào

website

Đặt vé xem phim Người dùng chọn phim, chọn rạp chiếu, suất chiếu, ghế ngồi và thanh toán online.

Xem lịch sử đặt vé Cho phép người dùng xem lại lịch sử đặt vé của tài khoản.

Đăng ký tài khoản Cho phép người dùng đăng ký tài khoản để sử dụng dịch vụ của website.

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

dùng

Là chức năng của tài khoản quản trị, cho phép xem, chỉnh sửa, xóa tài khoản người dùng

Quản lý phim Chức năng của tài khoản quản trị, cho phép thêm, sửa, xóa thông tin các bộ phim.

Quản lý lịch chiếu phim Là chức năng của tài khoản quản trị, cho phép chỉnh sửa lịch chiếu của các phim đã

có

Bảng 4.1 Mô tả các chức năng chính của website

4.3.3 Sơ đồ Use Case

4.3.3.1 Use case Admin

Hình 4.2 Use case Admin