Baocaobaitaplon nhom8 cnttva1 k62

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI
KHOA ĐÀO TẠO QUỐC TẾ - INED
---------------------------------------

Bài tập lớn môn học

THIẾT KẾ WEBSITE
Đề tài:
Website quản lý bán vé xem phim
Giáo viên hướng dẫn : Lại Mạnh Dũng
Sinh viên thực hiện : Nguyễn Hải Nam(222621028)
: Lê Tấn Tài (222621109)
: Phạm Văn Hải(222621098)
: Nguyễn Văn Hiếu (222622012)
Lớp

: Cơng nghệ thơng tin Việt – Anh 1

Khóa

: 62

Hà Nội, 10 - 2022


LỜI CẢM ƠN
Chúng em xin gửi lời cảm ơn chân thành đến thầy Lại Mạnh Dũng
giảng viên môn Thiết kế website trường Đại học Giao thông Vận tải đã
trang bị giúp chúng em những kỹ năng cơ bản và kiến thức cần thiết để
hoàn thành được bài báo cáo và dự án front-end này.
Tuy nhiên, quá trình làm bài báo cáo tìm hiểu của chúng em cịn

hạn chế nên khơng thể tránh khỏi một vài thiếu sót khi trình bày và
đánh giá vấn đề. Rất mong nhận được sự góp ý, đánh giá của các thầy
cô bộ môn để bài báo cáo của chúng em thêm hoàn thiện hơn.

Chúng em xin chân thành cảm
ơn!


MỤC LỤC
LỜI CẢM ƠN........................................................................................2
MỤC LỤC..............................................................................................1
DANH MỤC HÌNH ẢNH.....................................................................3
DANH MỤC BẢNG BIỂU....................................................................4
PHẦN I: ĐỀ TÀI...................................................................................5
PHẦN II: KHẢO SÁT PHÂN TÍCH...................................................6
1. Tìm hiểu các website đã có cùng chủ đề..............................................6
a) Galacine.vn...................................................................................7
b) Netflix..........................................................................................8
2. Trình bày các đối tượng sử dụng.........................................................8
3. Trình bày các chức năng cơ bản cho từng đối tượng.........................9
a) Xem trailer...................................................................................9
b) Chức năng đặt vé........................................................................11
c) Chức năng thanh toán.................................................................11
PHẦN III: THIẾT KẾ........................................................................13
1. Use-case diagram.................................................................................13
2. Sitemap.................................................................................................14
3. Wireframe............................................................................................15
a) Home..........................................................................................15
b) Cinemas......................................................................................16
c) Movies........................................................................................17

d) Về chúng tôi...............................................................................18
e) Đăng nhập..................................................................................19
f) Ticket..........................................................................................19
g) Book...........................................................................................19
PHẦN IV: TRIỂN KHAI....................................................................20
iMovies Cinema

Page | 1


1. Cấu trúc thư mục dự án......................................................................20
a) Cấu trúc chung...........................................................................20
b) Giải thích lý do sử dụng cấu trúc...............................................20
2. Giải thích giao diện thu được.............................................................20
a) Layout........................................................................................20
b) Home..........................................................................................20
c) Rạp.............................................................................................20
d) Phim...........................................................................................21
e) Ticket..........................................................................................21
f) Book............................................................................................21
g) Đăng kí/ Đăng nhập...................................................................21
h) Responsive.................................................................................21
PHẦN V: KIỂM THỬ.........................................................................21
1. Mục tiêu phát hiện lỗi trong quá trình thiết kế................................21
a) Mục tiêu chung...........................................................................21
b) Mục tiêu cụ thể...........................................................................21
2. Cách thức xây dựng các test case link, effect, data validation........21
a) Test case link..............................................................................21
b) Data validation...........................................................................21
PHẨN VI. TỰ ĐÁNH GIÁ.................................................................21

1. Bảng điểm tự đánh giá........................................................................21
2. Bảng điểm nhóm đánh giá cho từng cá nhân....................................22

iMovies Cinema

Page | 2


DANH MỤC HÌNH Ả
Hình 1. 1. Galacine.vn.............................................................................7
Hình 1. 2. Galacine.vn.............................................................................8
Hình 1. 3. Netflix.....................................................................................8
Hình 1. 4. Chức năng xem trailer..........................................................10
Hình 1. 5. Chức năng đặt vé..................................................................11
Hình 1. 6. Chức năng thanh tốn...........................................................12
Y
Hình 2. 1. Use-case diagram..................................................................13
Hình 2. 2. Site map................................................................................14
Hình 2. 3. Wireframe home...................................................................15
Hình 2. 4. Wireframe cinemas...............................................................16
Hình 2. 5. Wireframe movies................................................................17
Hình 2. 6. Wireframe about us..............................................................18
Hình 2. 7. Wireframe login/signup........................................................19
Hình 2. 8. Wireframe ticket...................................................................19
Hình 2. 9. Wireframe book....................................................................19
Hình 3. 1. Cấu trúc thư mục dự án........................................................20
Hình 3. 2. Layout...................................................................................20
Hình 3. 3. Home....................................................................................20
Hình 3. 4. Rạp........................................................................................20
Hình 3. 5. Phim......................................................................................21

Hình 3. 6. Về chúng tơi..........................................................................21
Hình 3. 7. Ticket....................................................................................21
Hình 3. 8. Book......................................................................................21
Hình 3. 9. Đăng kí/ Đăng nhập..............................................................21

iMovies Cinema

Page | 3


DANH MỤC BẢNG BIỂU
Table 1. Tự đánh giá..............................................................................45
Table 2. Nhóm đánh giá........................................................................45

iMovies Cinema

Page | 4


PHẦN I: ĐỀ TÀI
Đề tài của nhóm là xây dựng website mua vé xem phim. Dưới đây
là một tóm tắt về hệ thống trang web, tổ chức file và mô tả để có
cái nhìn tổng quan về dự án.
a) Hệ thống trang web: Trang chính (Home): Trang này sẽ là trang
đầu tiên mà người dùng thấy khi truy cập website. Nó sẽ cung cấp
thơng tin về các bộ phim đang chiếu, suất chiếu trong ngày, và các
tin tức liên quan đến ngành công nghiệp điện ảnh. Lịch chiếu
(Schedule): Trang này sẽ liệt kê các suất chiếu phim theo ngày và
giờ. Người dùng có thể tìm kiếm và chọn suất chiếu theo yêu cầu
của họ. Chọn phim (Movies): Trang này chứa danh sách các bộ

phim đang chiếu và sắp tới. Người dùng có thể xem thơng tin về
phim, trailer, và lịch chiếu. Đặt vé (Booking): Trang này cho phép
người dùng chọn phim, suất chiếu, số lượng vé, và chỗ ngồi. Sau
đó, họ có thể thanh tốn để hồn tất việc đặt vé. Quản lý tài khoản
(Account Management): Người dùng có thể đăng nhập hoặc đăng
ký tài khoản để theo dõi lịch sử mua vé, lưu thông tin cá nhân, và
quản lý thông tin tài khoản.
b) Tổ chức file và dữ liệu: Các file HTML, CSS và JavaScript sẽ được
tổ chức một cách cẩn thận để đảm bảo tính gọn gàng và dễ bảo trì. .
Sử dụng các thư viện được nhúng thơng qua Content Delivery
Network (CDN) để tối ưu hóa hiệu suất trang web. Dữ liệu về phim,
lịch chiếu, và tài khoản người dùng sẽ được tổ chức trong một cơ sở
dữ liệu để dễ dàng quản lý và truy xuất.
c) Mô tả: Giao diện trang web sẽ cung cấp tùy chọn chọn chế độ
giao diện light-mode và dark-mode để tạo trải nghiệm tốt cho
người dùng. Giao diện mặc định có thể sử dụng dark-mode, và
light-mode đang trong quá trình phát triển. Tông màu chủ yếu sẽ
phản ánh không gian điện ảnh với việc sử dụng màu đen và vàng
ánh kim. Nghiệp vụ của hệ thống: Nghiệp vụ chính của trang web

iMovies Cinema

Page | 5


là cho phép người dùng mua vé xem phim. Các trang web con
chứa các chức năng liên quan như: Giới thiệu các bộ phim đang
chiếu và sắp tới. Cung cấp lịch chiếu và cho phép người dùng tìm
kiếm suất chiếu theo ngày và giờ. Cho phép người dùng xem
thông tin chi tiết về các bộ phim, bao gồm trailer, diễn viên, đạo

diễn và thể loại. Đặt vé bằng cách chọn phim, suất chiếu, số lượng
vé, và chỗ ngồi, sau đó thanh toán. Quản lý tài khoản cá nhân, bao
gồm xem lịch sử mua vé, lưu trữ thông tin cá nhân và thay đổi mật
khẩu. Mục đích yêu cầu: Yêu cầu tối thiểu là xây dựng giao diện các
trang web và tích hợp các chức năng cơ bản. Đảm bảo giao diện
đẹp, rõ ràng và dễ sử dụng là ưu tiên hàng đầu. Sau đó, có thể
nâng cấp và mở rộng tính năng của trang web để cung cấp trải
nghiệm người dùng tốt hơn. Hệ thống phải hoạt động trên nhiều loại
màn hình khác nhau, bao gồm điện thoại di động, máy tính bảng,
laptop và máy tính để bàn. Điều này đảm bảo rằng người dùng có
thể truy cập và sử dụng trang web trên bất kỳ thiết bị nào. Cần phải
xây dựng các test case để kiểm tra và bảo trì hệ thống khi gặp lỗi.
Chức năng phải hoạt động đáng tin cậy trong mọi tình huống và
tích hợp hồn hảo với giao diện để tránh các sự cố khi sử dụng.

PHẦN II: KHẢO SÁT PHÂN TÍCH
1. Tìm hiểu các website đã có cùng chủ đề
Dựa vào mục đích và những yêu cầu chức năng tối thiểu của 1
trang web chúng ta sẽ tìm hiểu những trang web liên quan để

iMovies Cinema

Page | 6


quan sát bố cục thiết kế cũng như chức năng để tham khảo và áp
dụng
Để quan sát bố cục của các thẻ html cũng như xem các thuộc tính
của thẻ ta có thể sử dụng tác vụ Inspect của trình duyệt (có thể ấn
F12).

a) Galacine.vn
1. Giao diện về giới thiệu phim

Hình 1. 1. Galacine.vn

2. Giao diện về mơ tả phim

iMovies Cinema

Page | 7


Hình 1. 2. Galacine.vn

b) Netflix

Hình 1. 3. Netflix

2. Trình bày các đối tượng sử dụng
Về phân quyền sử dụng sẽ bao gồm 2 phân quyền chính là admin và
user. Admin sẽ quản trị hệ thống nắm bắt được tình hình cụ thể của
từng thay đổi về mặt số lượng, có quyền them phim trình chiếu, …

iMovies Cinema

Page | 8


Cịn về phía user sẽ có nhiều quyền bị hạn chế, chỉ có thể thao tác
được những gì cơ bản nhất như xem trailer, đặt vé, booking…

Trang sẽ bao gồm các bộ phim của các nhà làm phim đến từ nước
ngoài nên các bộ phim sẽ được viết toàn bộ bằng tiếng anh vậy nên
phạm vi sử dụng sẽ rất rộng.
3. Trình bày các chức năng cơ bản cho từng đối tượng
Ở các trang web trong hệ thống, sẽ có những vùng giới thiệu phim
và khi người dùng di chuột vào sẽ có những tác vụ cụ thể để web xử
lý, có thể là xem trailer và đặt vé. Khi người dùng click chuột chọn
1 chức năng nào đấy hệ thống sẽ chạy đến 1 trang web khác chứa
yêu cầu mà người dùng mong muốn thực hiện. Sẽ có những chức
năng cơ bản cho người dùng như sau:
a) Xem trailer
Khi người dùng rê chuột vào một bộ phim bất kì có trong website
hệ thống sẽ hiện lên chức năng nếu người xem click vào ví dụ:

iMovies Cinema

Page | 9


Hình 1. 4. Chức năng xem trailer

iMovies Cinema

Page | 10


b) Chức năng đặt vé.
Người dùng có thể đặt bất kì bộ phim nào hiện có sau khi chọn
thời gian, địa điểm.

Hình 1. 5. Chức năng đặt vé

c) Chức năng thanh tốn.
Người dùng có thể chọn ghé trong trang book sau đó click vào
các tác vụ để thanh tốn.
Ơ màu đỏ là đã có người đặt, ơ màu xanh là đang đặt và ô màu
xám là đang trống.

iMovies Cinema

Page | 11


Hình 1. 6. Chức năng thanh tốn.

iMovies Cinema

Page | 12


PHẦN III: THIẾT KẾ
1. Use-case diagram

Hình 2. 1. Use-case diagram

iMovies Cinema

Page | 13

2. Sitemap

Hình 2. 2. Site map

iMovies Cinema

Page | 14


3. Wireframe
a) Home

Hình 2. 3. Wireframe home

iMovies Cinema

Page | 15


b) Cinemas

Hình 2. 4. Wireframe cinemas

iMovies Cinema

Page | 16


c) Movies

Hình 2. 5. Wireframe movies

iMovies Cinema

Page | 17


d) Về chúng tơi

Hình 2. 6. Wireframe about us

iMovies Cinema

Page | 18