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

ĐẠ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 HỒ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

TP. HỒ CHÍ MINH, 2021


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ỳnh
Nguyễ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ững
thiếu sót trong quá trình thực hiện đồ án. Tuy nhiên, chúng em đã cố gắng hoàn
thà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 kinh
nghiệm, tự sửa chữa, hồn thiện bản thân mình trên tinh thần nghiêm túc, tự giác
họ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ất
mong 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áo
thê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 vui
chơ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ác
nhau 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ạn
bè,… 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ác
rạ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ển
theo.
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ình
giả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ệc
hỗ 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ủa
phim mà họ mong muốn xem, các phim mới sắp chiếu, các tin tức phim để mọi
ngườ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ủa
họ.
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, ngồ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ười
dù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

1

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ụng
API được cung cấp để có thể lấy dữ liệu về Website. Cụ thể em sẽ dùng các thành
phần trong ReactJS là Function Component và Class Component để xây dựng giao
diệ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é xem
phim 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 API
cho 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ày
có 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é xem

phim 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ộng
rã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.

2


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

Tổng quan về ReactJS

2.1.1. Giới thiệu
ReactJS là một thư viện JavaScript được phát triển bởi Facebook nhằm để xây
dựng giao diện người dùng (UI) theo kiến trúc components.
ReactJS xây dựng theo chuẩn SPAs (Single Page Application) nghĩa là trang
web sẽ không bị load lại khi có sự chuyển đổi qua lại giữa các component.
2.1.2. Các đặc trưng của ReactJs
2.1.2.1.

JSX

Nó là một phần mở rộng cú pháp cho JavaScript, jsx cho phép chúng ta kết
nối giữa HTML và JavaScript trong cùng một source.
2.1.2.2.

Component

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 trong
JavaScript nhưng chúng độc lập và nhiệm vụ chính là trả về HTML thơng
qua 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ức
render(). Khi component được gọi, hàm render sẽ chạy và trả về nội dung
HTML bên trong.

3


2.1.2.3.

State

State là một thuộc tính mặc định của class kế thừa từ component để quản lý
trạng thái của component.
Khi state thay đổi => hàm render sẽ chạy lại. Khi component muốn render lại
giao diện thì ta phải thay đổi state thơng qua phương thức là setState.
2.2.

Lí do chọn lựa

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êng
biệ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ủa
nó.

-

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ìn
trang web sử dụng.

-

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

4


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, CSS
templates 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. Trong
bootstrap có thêm các plugin Javascript giúp cho việc thiết kế reponsive dễ dàng
hơn và nhanh chóng hơn.
3.1.2. Ưu điểm
- Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt
đầu sử dụng Bootstrap.
- Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrap
điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn.
- Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một
phần của core framework.

- Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trình
duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).
3.2.

Redux:

Trong ReactJS việc quản lý state là vô cùng quan trọng và phức tạp.
Những state này bao gồm dữ liệu trả về từ server và dữ liệu được cache, ngoài ra
các state dùng để quản lý User Interface cũng làm tăng độ phức tạp như lúc chúng ta
cần quản lý Routes nào đang được active, element nào đang được hiển thị... Khi thay
đổi state sẽ có thể khiến cho view được re-render và có thể kéo thay đổi của state
khác.
Ngoài ra ngày trước khi một Component cha muốn truyền một tham số hay
function cho Component con thì cần phải đi qua nhiều nơi mới có thể gửi được data

5


đế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 trong
cá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ì đang
xảy ra.

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

6


 Bước 3: Reducer dựa vào những mô tả của Action để biết cần thực hiện

thay đổ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ột
Action, 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ép
chú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 đến

Class. Nghĩa là ta có thể dùng state trong Stateless Component (functional
component).
Hooks là đại diện cho tương lai hướng đến Functional Programming và không
sử dụng OOP.
Việc sử dụng Hooks trong code cịn giúp cho kích thước budle sẽ giảm được
đáng kể so với trước đây.
Gồm 2 loại là Basic Hooks và Additional Hooks.
3.3.2.


Basic Hooks:

useState():

7


-

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ồm
có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 function
dù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 đương
vớ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, trong
array này ta có thể truyền vào đó những giá trị mà useEffect() sẽ subcribe
nó, 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ới

hàm ComponentDidMount().
-

Cịn 1 vấn đề nữa đó là trong hàm useEffect() ta có thể return về 1
function (chú ý là bắt buộc phải return về function) thì khi làm điều này
nó

sẽ

tương

đương

với

việc

ta

sử

dụng

hàm

LifeCycle

componentWillUnMount().
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ột
newState. 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ác
component con, nó khá giống với hàm shouldComponentUpdate trong

8

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ưng
khác ở chỗ function truyền vào useMemo() bắt buộc phải ở trong quá trình
render trong khi đối với useCallback() đó lại là function callback của 1 event
nà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

9


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ác
object option cho Axios
Các phương thức có trong Axios:


axios.request(config)



axios.get(url[, config])



axios.delete(url[, config])



axios.head(url[, config])



axios.options(url[, config])



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



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



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



Ngồ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ường
toà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.

10


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.

-

Đặt vé.

-

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

4.3.

Phân tích thiết kế

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

11

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


4.3.2.

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

Tên chức năng
Đăng nhập

Mô tả
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.

12


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

13


4.3.3. Sơ đồ Use Case
4.3.3.1.

Use case Admin

Hình 4.2 Use case Admin

14


4.3.3.2.

Use case người dùng

Hình 4.3 Sơ đồ Use case cho khách hàng
4.3.4. Lược đồ API cho Website:
4.4.

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

15


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

Hình 4.4 Giao diện quản lý thơng tin người dùng
4.4.1. Giao diện cho Admin

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

16


4.4.2. Mơ tả cho màn hình Admin
Màn hình admin có các chức năng như quản lý thông tin tài khoản của người

dùng, quản lý thông tin lịch chiếu phim, quản lý các thông tin phim.
Với chức năng quản lý thông tin của người dùng:
-

Chức năng này cung cấp cho các Admin khả năng xem thông tin của
những người dùng đã đăng ký tài khoản trong hệ thống cũng như các
Admin có tài khoản trong hệ thống qua bảng thống kê ở phần dưới của
màn hình. Trong bảng thống kê này các Admin có thể sửa hoặc xố thơng
tin của các user đang tồn tại trong hệ thống bằng cách chọn nút “Sửa” để
chỉnh sửa thơng tin, nút “Xố” để xố thơng tin của người dùng.

-

Ngồi ra Admin cịn có thể thêm thông tin người dùng bằng cách sử dụng
form quản lý người dùng ờ phần đầu trang. Thông tin cần thêm của một
tài khoản bao gồm:
+ Tên tài khoàn
+ Mật khẩu
+ Họ tên
+ Email
+ Số điện thoại
+ Loại tài khoản: Gồm 2 loại là khách hàng và quản trị

-

Sau khi điền đầy đủ các thơng tin thì Admin có thể ấn nút Submit để tiến
hành lưu thông tin.

-

Sau khi tài khoản được thêm thì có thể sử dụng để đăng nhập vào hệ
thống cũng như có thể tra cứu thông qua bảng thông tin ở cuối trang.

-

Thông tin có trong màn hình được sử dụng API và đọc dữ liệu từ server
được cung cấp về.

17


-

Khi Admin ấn nút để sửa thông tin người dùng thì các thơng tin sẽ được
hiển thị vào form phía trên để Admin có thể chỉnh sửa, sau khi chỉnh sửa
xong thì Admin có thể ấn nút Submit để có thể lưu lại các thông tin đã
chỉnh sửa vào database.

-

Với chức năng xố thì Admin sẽ ấn vào nút xố và tiến hành chọn thao
tác xác nhận với dialog được show lên. Nếu Admin chọn Ok thì tài khoản
đó sẽ bị xố khỏi database và khơng thể sử dụng để đăng nhập vào trang
web được nữa và ngược lại thì tải khoản sẽ khơng bị xố.

Các chức năng cho phần quản lý phim bao gồm: Thêm thông tin phim cho
Website.
-

Với giao diện thêm phim thì Admin có thể thêm các thông tin cho phim

mới sắp chiếu để cập nhật lên trang Web của mình.

-

Các thơng tin mà Admin có thể thêm bao gồm:
+ Mã phim
+ Tên phim
+ Link trailer của phim
+ Admin có thể import hình ảnh từ hệ thống của mình bằng cách ấn chọn
nút choose file và chọn file cần import.
+ Mô tả cho phim, đây là phần người dùng có thể đọc để có thêm thông
tin về phim mà người dùng dự định đặt vé.
+ Và sau khi đã hồn thành mọi việc thì Admin có thể ấn nút Submit để
hồn tất việc thêm phim.

-

Thơng tin phim sau khi thêm sẽ được hiển thị trong chức năng quản lý
lịch chiếu của phim.

Các chức năng cho phần quản lý lịch chiếu phim:

18