Báo cáo chuyên đề học phần Cơ sở lập trình web Xây dựng giao diện website

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN
CƠ SỞ LẬP TRÌNH WEB

ĐỀ TÀI: XÂY DỰNG GIAO DIỆN WEBSITE
FILM: FLIX TV CLONE

Sinh viên thực hiện

:

Giảng viên hướng dẫn : PHƯƠNG VĂN CẢNH
Ngành

: CÔNG NGHỆ THÔNG TIN

Chun ngành

: CƠNG NGHỆ PHẦN MỀM

Lớp

:

Khóa

:

Hà Nội, tháng 6 năm 2022

PHIẾU CHẤM ĐIỂM
ST
T
1

Họ và tên
sinh viên
Nguyễn Duy
Nam

Nội dung thực hiện
Home, Login/Signup, Contact,
Landing page

Điểm

Chữ
ký


2

Nguyễn Việt
Long

About us + Movie Details + Profile
(Account info + Account Setting)

3

Hồng Mạnh
Bình

Live + Catalog + Pricing Plan

Họ và tên giảng viên
Giảng viên chấm 1:

Chữ ký

Ghi chú

Giảng viên chấm 2:

MỤC LỤC
Chương 1: Giới thiệu bài toán thực hiện..............................................................................................1
1.1Tổng quan về bài toán..................................................................................................................1
1.2 Các hệ thống liên quan, tương tự................................................................................................1
1.3 Mục tiêu giải quyết bài toán.......................................................................................................1
Chương 2: Thiết kế bố cục...................................................................................................................2
2.1 Home...........................................................................................................................................2
H2.1: Home...................................................................................................................................2
2.2 Login/ Signup.............................................................................................................................3
H2.2: Login/Sign up......................................................................................................................3


2.3 Landing page..............................................................................................................................4
H2.3 Landing page........................................................................................................................4
2.4 Contact........................................................................................................................................5
H2.4: Contact................................................................................................................................5

2.5 Manager profile..........................................................................................................................6
H2.5: Manager profile...................................................................................................................6
2.6 Account Setting...........................................................................................................................6
H2.6: Account Setting...................................................................................................................6
2.7 About us......................................................................................................................................7
H2.7: About us..............................................................................................................................7
2.8 Movie Detail...............................................................................................................................8
H2.8: Movie Detail.......................................................................................................................8
2.9 Catalog........................................................................................................................................9
H2.9: Catalog................................................................................................................................9
2.10 Live.........................................................................................................................................10
H2.10: Live.................................................................................................................................10
2.11 Pricing plan.............................................................................................................................11
H2.11: Pricing plan.....................................................................................................................11
Chương 3. Kết quả thực hiện..............................................................................................................12
3.1 Home.........................................................................................................................................12
H3.1: Home.................................................................................................................................12
3.2 Login/ signup............................................................................................................................12
H3.2: Login/signup.....................................................................................................................12
3.3 Landing page............................................................................................................................13
H3.3: Landing page.....................................................................................................................13
3.4 Contact......................................................................................................................................13
H3.4: Contact..............................................................................................................................13
3.5 Manager Profile........................................................................................................................14
H3.5: Manager Profile.................................................................................................................14
3.6 Account Setting.........................................................................................................................14
H3.6: Account Setting.................................................................................................................14
3.7 About us....................................................................................................................................15
H3.7: About us............................................................................................................................15
3.8 Movie Details............................................................................................................................15

H3.8: Movie Details....................................................................................................................15
3.9 Catalog.....................................................................................................................................16
H3.9: Catalog..............................................................................................................................16
3.10 Pricing Plans...........................................................................................................................17
H3.10 Pricing Plans.....................................................................................................................17
3.11 Live.........................................................................................................................................17
H3.11 Live...................................................................................................................................17
Kết luận..............................................................................................................................................18
TÀI LIỆU THAM KHẢO....................................................................................................................1

DANH MỤC HÌNH ẢNH
H2.1: Home..........................................................................................................................................2
H2.2: Login/Sign up.............................................................................................................................3
H2.3 Landing page...............................................................................................................................4
H2.4: Contact........................................................................................................................................5
H2.5: Manager profile..........................................................................................................................6
H2.6: Account Setting..........................................................................................................................6
H2.7: About us......................................................................................................................................7
H2.8: Movie Detail...............................................................................................................................8
H2.9: Catalog........................................................................................................................................9
H2.10: Live.........................................................................................................................................10


H2.11: Pricing plan.............................................................................................................................11
H3.1: Home........................................................................................................................................12
H3.2: Login/signup.............................................................................................................................12
H3.3: Landing page............................................................................................................................13
H3.4: Contact......................................................................................................................................13

H3.5: Manager Profile........................................................................................................................14
H3.6: Account Setting........................................................................................................................14
H3.7: About us....................................................................................................................................15
H3.8: Movie Details...........................................................................................................................15
H3.9: Catalog......................................................................................................................................16
H3.10: Pricing Plans...........................................................................................................................17
H3.11: Live.........................................................................................................................................17


LỜI CẢM ƠN
Ngày nay, việc ứng dụng công nghệ thông tin đã trở nên phổ biến trong hầu hết
cơ quan, doanh nghiệp, trường học đặc biệt là việc áp dụng các giải pháp tin học
trong cơng tác quản lý.
Trong ít năm trở lại đây, với tốc độ phát triển như vũ bão, CNTT đang dần làm
cho cuộc sống của con người trở nên thú vị và đơn giản hơn. Bắt kịp xu hướng của
thời đại, chúng em cũng áp dụng sự phát triển của tin học vào những ứng dụng đời
sống hàng ngày. Nhận thấy phim ảnh Việt Nam còn nhiều lạc hậu và thiếu sót, chúng
em quyết định lấy đây làm đề tài của nhóm
Chúng em chân thành gửi lời cảm ơn đến thầy giáo Phương Văn Cảnh người
đã tận tình chỉ bảo và hướng dẫn mơn Cơ sở lập trình web cho chúng em, tạo nền
tảng để nhóm thực hiện bài báo cáo này. Trong bài báo cáo không thể tránh khỏi
những sai sót do sự thiếu hụt về kinh nghiệm của bọn em, kính mong thầy cơ nghiêm
khắc chỉ ra lỗi lầm giúp bọn em ngày càng tiến bộ hơn.



MỞ ĐẦU
Hiện nay,ứng dụng công nghệ thông tin và việc tin học hóa được xem là một
trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức
cũng như các công ty. Cùng với sự phát triển khơng ngừng của kĩ thuật máy tính và

mạng điện tử, công nghệ thông tin cũng được những công nghệ có đẳng cấp cao và
lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác. Mạng Internet là một trong
những sản phẩm có giá trị hết sức lớn lao và ngày càng trở thành một công cụ không
thể thiếu, là nền tảng chính cho sự truyền tải,trao đổi thơng tin trên tồn cầu trong
thời đại 4.0.
Bằng việc sử dụng Internet, chúng ta chỉ việc ngồi ở nhà và chọn nhưng gì bản
thân mình thích,giúp tiết kiện được khoản lớn về chi phí cũng như thời gian. Chính vì
điều này đã làm thúc đẩy sự phát triển của thương mại điện tử,làm biến đổi đáng kể
bộ mặt văn hóa, nâng cao chất lượng đời sống của con người.
Với mong muốn đó, chúng em xin được thực hiện về đề tài“XÂY DỰNG
GIAO DIỆN WEBSITE FILM”nhằm phục vụ cho nhu giải trí của mọi người.


Chương 1: Giới thiệu bài toán thực hiện
1.1Tổng quan về bài toán
Điện ảnh nói chung và rạp chiếu phim nói riêng là thị trường đầy tiềm năng tại
Việt Nam, đặc biệt là tại các thành phố lớn như Hà Nội, Hồ Chí Minh,… Theo thống
kê của cục Điện ảnh năm 2016, Việt Nam có 97 rạp chiếu phim với 246 phòng chiếu,
nhà nước quản lí 72 rạp với 104 phòng chiếu. Trên thực tế, thị trường điện ảnh Việt
Nam phát triển không đồng đều giữa các tỉnh thành. Các thành phố lớn chiếm tỉ lệ
xem ở rạp nhiều hơn các rạp địa phương. Vì vậy 1 số rạp địa phương bị bán đi hoặc
chuyển sang kinh doanh mơ hình khác. Qua đó ta nhận thấy nhu cầu giải trí bằng
hình thức xem phim của cả nước là rất lớn nhưng không đồng đều, dẫn đến nhiều tỉnh
thành nhỏ lẻ không thỏa mãn được nhu cầu xem phim. Do đó các website về film ra
đời nhằm phục vụ nhu cầu của những người khơng có kinh phí đi xem ở rạp.
1.2 Các hệ thống liên quan, tương tự
Một ví dụ điển hình website về film có thể kể đến như Netflix, letterBox,
movieLens,… Đặc điểm của các website này là cung cấp được nguồn film cho người
dùng xem, cho phép người dùng lưu film, đánh giá film,.. cung cấp video với độ phân
giải cao.

1.3 Mục tiêu giải quyết bài toán
Xây dựng các chức năng cơ bản của một website film.Website có khả năng tự
tương thích,hiển thị được trên tất cả các thiết bị hiện tại và có thể nâng cấp trong
tương lai.
Website được hiển thị một cách sinh động,đẹp mắt nhưng không quá phức tạp,
màu mè để cho tất cả mọi người đều có thể sử dụng được.
Quản lý các thông tin film, dữ liệu film, dữ liệu người dùng,cấu hình website.
Nắm bắt được công nghệ thiết kế web bằng các ngôn ngữ như:ngôn ngữ đánh dấu
siêu văn bản HTML,CSS,JAVASCRIPT giúp cho website sinh động và thú vị hơn.

9


Chương 2: Thiết kế bố cục
Thành phần chung
Header
Footer

Mô tả
Đây là phần chứa logo, các link dẫn
tới tới các trang khác của website
Đây là phần kết thúc của website, sẽ
chứa link social của trang web và các
link tag

2.1 Home

H2.1: Home

Đây là trang chính khi người dùng truy cập vào trang web.

10


Bao gồm:
Thành phần
Carousel
Catalog
Subscriptions
Plan
TV original

Nội dung
Đây là phần trình chiếu các phim
được tìm kiếm và xem nhiều nhất
Đây là phần hiển thị các film để
người dùng lựa chọn
Đây là phần trình chiếu dạng sllider
giới thiệu các gói film theo thể loại
film
Đây là phần thể hiện các gói đăng ký
sử dụng để tăng trải nghiệm xem film
Đây là phần giới thiệu về các chương
trình tv được tìm kiếm, xem nhiều,
lượt đánh giá cao

2.2 Login/ Signup

H2.2: Login/Sign up

Đây là trang cho phép người dùng tạo tài khoản và đăng nhập với

Bao gồm:
Thành phần
Form

Nội dung
Đây là phần chứa các thẻ input cho
người dùng nhập thông tin, có nút
login/signup để login hoặc đăng ký,
có một tab action cho phép chuyển
qua lại giữa 2 form

11


2.3 Landing page

H2.3 Landing page

Đây là trang giới thiệu tổng quan về website giúp người dùng có thể hiểu hơn về
website này

12


2.4 Contact

H2.4: Contact

Đây là trang giúp người dùng gửi liên hệ tới chủ của website
Thành phần

Breadcrumb
Form
Info

Nội dung
Đây là phần hiển thị xem người dùng
đang ở trang nào
Đây là phần chứa các thẻ input cho
người dùng nhập thông tin, có nút
send để gửi thông tin đi
Đây là phần hiển thị các thông tin liên
hệ như link social, email, số điện
thoại

13


2.5 Manager profile

H2.5: Manager profile

Mô tả: đây là trang cho phép quản lý tài khoản trên website, giúp truy cập nhiều tính
năng hơn
2.6 Account Setting

H2.6: Account Setting

Mơ tả: đây là trang cho phép chúng ta xem và chỉnh sửa thông tin tài khoản của bản
thân
14

2.7 About us

H2.7: About us

Mô tả: đây là trang cung cấp thông tin về dịch vụ mà bạn đang cung cấp. Bên cạnh
đó, nó còn giúp người đọc hiểu rõ hơn về sứ mệnh, tầm nhìn và định hướng phát triển
của doanh nghiệp.

15


2.8 Movie Detail

H2.8: Movie Detail

Mô tả: đây là trang cho chúng ta biết chi tiết về bộ phim chúng ta tìm hiểu, ngồi ra
còn cho chúng ta biết về các mùa khác của phim, diễn viên, các phim khác có nội
dung tương tự

16


2.9 Catalog

H2.9: Catalog

Mô tả: đây là trang cho chúng ta chọn nhưng thể loại phim như:hài kịch, lịch sử, kinh
dị, khoa học viễn tưởng. có các mục chọn những phim mà nhiều người hay xem hay

chọn những phim mới chiếu gần đây. có thể chọn các gói xem phim có thể mua như:
Regular, Premium và Premium+TV Channels.

17


2.10 Live

H2.10: Live

Mô tả: Layout mô tả về những giải đấu đang chiếu trực tiếp, mục chiếu trực tiếp thể
thao điện tử và layout còn có thêm mục đề xuất những giải đấu trực tiếp của những
cộng đồng nhỏ.

18


2.11 Pricing plan

H2.11: Pricing plan

Mô tả: Ở layout này web mô tả qua về các gói có thể mua để xem phim. Layout còn
cho chúng ta thấy được nhưng sự khác nhau giữa các gói có thể mua được.

19


Chương 3. Kết quả thực hiện
3.1 Home

H3.1: Home

Chức năng:
+ Cho phép tìm kiếm film
+ Lọc film
+Link tới các trang khác của website
+Cho phép logout
+Auto slider, control slider
3.2 Login/ signup

H3.2: Login/signup

Chức năng:
+ Cho phép tạo tài khoản
+ Sau khi tạo tài khoản xong thì có thể cho login với tài khoản đó
+ Có validate form
+ Sau khi login thành cơng thì chuyển sang trang home
20


3.3 Landing page

H3.3: Landing page

Chức năng:
+ Drag and drop slider
3.4 Contact

H3.4: Contact

Chức năng:
+ Liên hệ với chủ sở hữu web phim nếu có những đóng góp hoặc nhu cầu góp
ý
+ Chăm sóc khách hàng

21


3.5 Manager Profile

H3.5: Manager Profile

Chức năng:
+ Thêm tài khoản mới
3.6 Account Setting

H3.6: Account Setting

Chức năng:
+ Cho phép xem thông tin cá nhân của tài khoản
+ Chỉnh sửa thông tin cá nhân của tài khoản
+ Đăng ký hoặc hủy làm thành viên thân thiết của trang

22


3.7 About us

H3.7: About us

Chức năng:
+ Tổng quan về trang web (thông tin, nội dung, khách hàng hướng đến)
+ Chọn kế hoạch tương lai cho tài khoản
+ Gia hạn khách hàng thân thiết
3.8 Movie Details

H3.8: Movie Details

23


Chức năng:
+ Xem phim
+ Hỗ trợ tải phim
+ Các thông tin về phim như mùa khác, diễn viên, …
+ Bình luận, trả lời bình luận và đánh giá phim
+ Gợi ý các phim khác có nội dung tương tự
3.9 Catalog

H3.9: Catalog

Chức năng:
+ Danh mục các phim có trên web giúp tìm kiếm phim theo thể loại dễ dàng
+ Hiển thị số lượng các phim có trong danh mục

24


3.10 Pricing Plans

H3.10 Pricing Plans

Chức năng:
+ Nâng cấp tài khoản thân thiết
3.11 Live

H3.11 Live

Chức năng:
+ Trực tiếp những giải đấu hấp dẫn trên toàn thế giới
+ Trực tiếp phim mới hoặc trailer
25