đồ án môn học xây dựng ứng dụng web thiết kế giao diện trang web xem phim

DANH MUC HINH VE Hinh 1.1 Téng quan Header Hinh 1.2 Lwa chon thé loai cu thé Hình 1.3 Lya chon quéc gia Hinh 1.4 Truy cap nhanh Hình I.5 Các tuyên tập phim và phim mới Hình I.6 Phim mới

WEB XEM PHIM

Giáng viên hướng dẫn: THS NGUYÊN VĂN CƯỜNG

Sinh viên thực hiện: Nguyễn Vĩnh An (21011405)

Dương Đức Bình (21011878) Phạm Huy Bình (21012042)

WEB XEM PHIM

Giảng viên giảng dạy: Ths Nguyễn Văn Cường

Sinh viên thực hiện: Nguyễn Vĩnh An (21011405)

Dương Đức Bình (21011878) Phạm Huy Bình (21012042) Khoa: K15 — 2021 - 2025

Ngành/ chuyền ngành: Công nghệ thông tin

Hà nội, tháng 06 năm 2023

LOI CAM ON

Ching em xin cam on ThS Nguyén Van Cuong da tan tinh giang day va hướng dẫn, giúp đỡ chúng tôi hoàn thành đồ án môn học

LOI CAM DOAN Chúng em cam đoan Đồ án môn học là sản phẩm trí tuệ của tap thé ching em

Mọi thông tin, dữ liệu, hình ảnh, ete được sử dụng từ các nguồn khác đều được

trích dẫn đầy đủ và có thê tìm thấy các tài liệu liên quan thông qua mục tải liệu

PHAN CONG NHIEM VU ĐỎ AN

TRUONG DAI HOC PHENIKAA KY THI KET THUC HQC PHAN KHOA CONG NGHE THONG TIN HỌC KỲ NĂM HỌC -

PHIẾU CHÁM THỊ TIỂU LUẬN/ĐỎ ÁN

(Ky và ghi rõ họ tên) (Ky và ghi rõ họ tên)

MUC LUC

CHUONG 1 CO SO LY THUYÉT VỀ THIẾT KÉ WEB 1

LL LOG MO da llc cccceccceceeceesssseeseesscsecsecsessececssesenseeseesessecseserssereses 1

l2 — Giới thiệu 2H HH HH HH H1 n1 11g ra 1

CHƯƠNG 2 THIET KE XAY DỰNG GIAO DIỆN WEBSITE 2

2.1 Đối tượng của webSI€ - - c 1201120111211 1221 112111191112 211 101111811121 2

2.2 — Đặc điểm 20.201 HH HH ng nen rau 2

3.1 Triển khai Headker - 2S SE 155151551511111111111211111111151115 21112111 se 5

3.2 Triển khai tuyên tập phim và phim mới 5-72 SE2EE212111112122 12 2x2 §

3.2 Triển khai phim mới cập nhật 55-121 2 12E111111211111111711E11 1E EeE 9

3.2 Triển khai phim được quan tâm nhiỀu 5 2s 222152121111 E22225e5 10

3.2 Trién Khai Footer c.ccccccccccccccccscssscscscesescsesesvecevsssesesesvsesvevevsvssssecsveveveees 11

DANH MUC HINH VE Hinh 1.1 Téng quan Header

Hinh 1.2 Lwa chon thé loai cu thé

Hình 1.3 Lya chon quéc gia

Hinh 1.4 Truy cap nhanh

Hình I.5 Các tuyên tập phim và phim mới

Hình I.6 Phim mới cập nhật

Hình 1.7 Phim được quan tâm nhiều

CHUONG 1 CO SO LY THUYET VE THIET KE WEB 1.1 Lời mở đầu

Ngày nay Internet đã trở thành dịch vụ phỏ biến và thiết yêu và có ảnh hưởng sâu

rộng tới thói quen, sinh hoạt, giải trí của nhiều người Cùng với sự phát triển

nhanh chóng của Internet thì các hình thức mua và bán hàng hóa cho mọi người

ngày càng đa dang va phat trién hon Cac ứng dụng Web ngày càng trở nên phô

biến Trước nhu cầu đó, cùng với yêu cầu môn học, nhóm chúng em quyết định

chọn đề tài Xây đựng Website bán hàng trực tuyến, cụ thể là bán bánh kem

Với đề tài và môn học này, nhóm xin chân thành cảm ơn sự giúp đỡ tận tình của

thầy Nguyễn Văn Cường Song, do còn nhiều hạn chế để tài nhóm xây dựng

không tránh khỏi những thiếu sót Rất mong được thầy cô và các bạn đóng góp ý

kiến đề trang web ngày cảng hoàn thiện và được đưa vào sử dụng

12 Giới thiệu

Phimmoi.net là một trang web xem phim trực tuyến phô biến và đáng tin cậy

Với một thư viện phim đa dạng và phong phú, trang web nay cung câp cho người

dùng một trải nghiệm giải trí tuyệt vời

Với giao diện trực quan va dé str dung, Phimmoi.net cho phép người dùng dễ

dàng tìm kiếm và truy cập vào hàng ngàn bộ phim từ nhiều thể loại khác nhau

Có thể bạn muốn xem phim hành động, tình cảm, phiêu lưu, kinh đị, hoặc phim

mới nhất trong ngành công nghiệp điện ảnh Phimmoi.net đáp ứng mọi sở thích

và nhu cầu giải trí của người đùng

Trang web này cung cấp các bộ phim với chất lượng hình ảnh và âm thanh tốt,

đảm bảo người dùng có trải nghiệm xem phim trực tuyến mượt mà và sống động

Bên cạnh đó, Phimmoi.net cũng cung cấp các phụ đề cho các bộ phim nước

ngoài, giúp người đùng dễ dàng theo dõi và hiểu rõ nội dung của từng tác phẩm

Một điểm đáng chú ý khác của Phimmoi.net là tính năng tìm kiếm và đề xuất

phim thông minh Người dùng có thê tìm kiếm theo tên phim, diễn viên, đạo diễn

hoặc thể loại, hoặc có thê khám phá các bộ phim được đề xuất dựa trên sở thích

cá nhân Điều này giúp người dùng dễ dàng khám phá những bộ phim mới và thú

VỊ

Thông tin và bản quyền của các bộ phim được cập nhật day du va chinh xac trén

Phimmoi.net Người dùng có thê yên tâm về việc xem các bộ phim yêu thích mà

không lo về vân đê pháp lý

CHUONG 2 THIET KE XAY DUNG GIAO DIEN WEBSITE 2.1 Đối tượng của website

Website được xây đựng phục vụ đối tượng sử dụng là Khách (Guest) với các

Xây dựng một trang web xem phim đơn giản, thân thiện, dễ sử dụng, cho phép người dùng xem thông tin của phim và xem phim

Website được thiết kế với Giao diện hài hoà, thân thiện, giúp người dùng dễ dang su dung

Trang chủ sẽ hiền thị danh sách các phim mới nhất và được quan tâm nhất giúp cho người dùng có thể đễ dàng hơn trong việc tìm kiểm bộ phim họ

Module tim kiém phim Khách hàng sẽ được cung cấp chức năng tìm kiếm trên Website

Modmle tin tức

Tư vấn cho khách hàng muốn tìm hiểu về các bộ film hot mới cập nhật

Aodule giới thiệu

Giới thiệu các thông tin co ban về website

2.3 Bồ cục trang web

e Phần Header

(@)PHIMMOI

TRAMBGHỦ PHIMBỆ PHMU THỂUUM UẾCGIA HOATHÌNH

Hinh 1.1 Tổng quan Header

PHIM LẺ AUẾPBIA HẠTHÌNH

Hình 1.3 Lựa chọn quốc gia

Phần Header chứa logo của trang web, hộp text đề tìm kiếm phim cùng với thanh Navigation có chứa đường dẫn đến phim thuộc các thê loại và quốc gia khác nhau

Hinh 1.4 Truy cap nhanh

Phân truy cập nhanh là một Carousel từ Bootstrap, bao gõm một sô phim mới mà người dùng có thé dé dang chon đề theo dõi

® Phân chia theo tuyên tập và phim mới

e Phan phim mới cập nhật

hắn iệp T Nẵng

®ảng Ông Ân

Hinh 1.6 Phim mới cập nhật

Bao gồm các phim lẻ và phim bộ mới được cập nhật

e© Phần phim được quan tâm nhiều

UTC S2

Hình 1.7 Phim được quan tâm nhiều

Tổng hợp một số phim đang được nhiều người xem quan tâm

e Phan Footer

:

SER

Hinh 1.8 Phan Footer

Phần Footer bao gồm một số thông tin pháp lý của phimmoi

Bố cục của trang được chia thành 3 thành phần chính: <header>, <body class="main-body”> va <footer> Ba phan nay la phan goi (wrapper) dé

có thê hiền thị hình nền (backpround) cho toàn bộ trang mà không gây ảnh hưởng đến căn lề của các thành phần con

2.4 Triển khai Header

Phần Header gồm có 2 thành phần chính: thanh logo và tìm kiếm, thanh điều hướng (Navigation bar) Hai thành phần này được gói trong thẻ <header>

e Phan Logo, tim kiém Phan Logo và thanh tìm kiếm được cho vào trong thé <div class="containe+"> của Bootstrap, và được gói tông thế bằng một <điv> gói bên ngoài

Thé <div> bên ngoài được sử đụng đề tạo phông nền cho phan header này và Logo cùng với thanh tìm kiếm nằm trong thẻ <điv c1ass="container"> để can 1é cho header

<input type="text" name="search" id="search-box"

<button type="submit" id="search-button"></button>

</div>

</div>

</header>

e Phần điều hướng Thẻ <nav> được sử dụng để xây dựng thanh điều hướng ở phần header Thẻ

<nav> được sử đụng để gói toàn bộ thanh điều hướng và để tạo phông nền cho

dé căn lề cho thanh điều hướng

2.5 Triển khai Carousel truy cập nhanh

Carousel của Bootstrap đã được sử dụng đề triển khai phần truy cập nhanh của trang web Khi đó thông tin được hiện thị trong Carousel năm trong các thẻ <di v

lớp active Bootstrap cũng hỗ trợ phần JavaScript để chuyển sang phần thông tin tiếp theo với các button đã được định dạng sẵn

<ul class="col-12 row">

</div>

<div class="movie-carousel-item- banner">02/16 VS + 02 TM</div>

<div class="col-left">

<a href="https://biphimmoi.top/ "><img

src="assets/Tuyen-Tap-Marvel.jpg" /></a>

</div>

e Phim moi Danh sách phim mới được chia thành 3 nhóm khác nhau nam trong 3 muc cua danh sách Các mục của danh sách được triển khai bằng thé <ul>, méi mục là một thẻ <1 i >

Trong mỗi mục đều có một danh sách các phim phù hợp với mục đó và được

triên khai bằng thẻ <u1 > và mỗi phim là một thẻ <1 i >

<div class="col-right yellow">

<div class="list-tab-movie clearfix">

<ul style="background-color: #2e2e2e" class="tab-movie clearfix">

<li style="background-color: #181818"><a style="color: #46el1ff" rel="nofollow" href="">Phim Lẻ

Méi</a></li>

</ul>

<ul class="tab-content">

<li class="movie clearfix">

<a href="https: //biphimmoi.top/me-quy-2020.html1">

<img src="assets/MeQuy jpg" />

<div class="content">

<div class="name-vn">Me Quy</div>

<div class="name-en">The Wretched (2020)</div>

Phan phim mới cập nhật gồm có 2 phần cho phim lẻ và phim bộ Ở mỗi phan đều

có tiêu đề năm trong thẻ <h2> củng với một dòng kẻ ngăn cách tiêu đê và danh sách phim

<div class="movie-list-2-wrapper row">

<div class="first-content">Dao Hai Tac</div>

<div class="second-content">One Piece</div>

<span style="font-size: 12px; color:

#777777"><img class="flag" src="assets/NhatBan.jpg" />

2.8 Triển khai phim được quan tâm nhiều

Phần các phim được quan tâm nhiều năm ở bên phải của trang nên danh sách này được gói trong thẻ <div class="col-sm-3"> sử dung bố cục grid của Bootstrap

<div class="col-sm-3 sidebar">

<div class="right-box phim-le">

<a href="https: //biphimmoi.top/cau-chuyen-ki-

dieu-ve-henry-sugar.html"><img src="assets/anhl.jpg" alt="" class="mvcoverimg" ></a>

</div>

<div class="mvcontent">

<a href="https: //biphimmoi.top/cau-chuyen-ki-

dieu-ve-henry-sugar html" style="text-decoration: none">

<span class="tieude-vn">Câu Chuyện Kì Diệu Về

Henry Sugar</span>

<span class="tieude-eng">The Wonderful Story Of Henry Sugar</span>

<span class="tieude-view">40 Phut VS</span>

<span class="rate-vote rate-vote-10"></span>

<span class="tieude-view"> 50 Luot Xem</span>

2.9 Triển khai Footer

Footer nam trong thé <footer> va duge sir dụng đề chứa các thông tin pháp lý liên quan đến việc phân phối phim trên trang web này

11

cyan" >Bi PhimMoi.top</a>

<p>Nguồn phim trên website được hệ thống tổng hợp

tự động từ các nguồn Youtube, Dailymotion trên Internet

Chúng tôi không chịu bắt kỳ trách nhiệm gì về các nguồn đăng tải này.</p>

</div>

</div>

</div>

</footer>

Trong báo cáo này, chúng em đã tìm hiểu và thiết kế một giao điện web xem phim trực tuyến nhằm cung cấp trải nghiệm tốt nhất cho người dùng Qua quá trình nghiên cứu và phân tích, chúng em đã nhận thấy rằng việc thiết kế một giao diện hấp dẫn, thân thiện và dễ sử dụng là một yếu tổ quan trọng đề thu hút

Chúng em đã đặc biệt chủ trọng vào việc tạo ra một trang chủ hấp dẫn, nơi người dùng có thể đễ dàng tìm kiếm, duyệt và xem các bộ phim yêu thích của mình Giao diện web của chúng em được thiết kế với giao diện đơn giản, trực quan và sắp xếp hợp lý, giúp người dùng dễ dàng điều hướng và truy cập đến nội dung phim một cách thuận tiện

Chúng em đã áp dụng các nguyên tắc thiết kế giao điện như sắp xếp hợp

lý của thông tin, tạo điểm nhấn cho các tính năng quan trọng, và đảm bao tinh nhất quán trong toàn bộ giao diện Đồng thời, chúng em đã tối ưu hóa trải nghiệm người đùng bằng cách cung cấp các công cụ tìm kiếm và bộ lọc phim linh hoạt, cho phép người dùng tìm kiếm và lựa chọn phim dễ dàng theo sở thích

cá nhân

12

Chúng em hy vọng răng báo cáo này đã trình bày một cái nhìn tổng quan

về quy trình thiết kế giao điện web xem phim trực tuyến và đóng góp vào việc nâng cao trải nghiệm người dùng trong lĩnh vực này Chúng em sẵn sàng tiếp thu

ý kiến và phản hồi tir thay

13