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

Trang 1

THIẾT KẾ GIAO DIỆN TRANG 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)

Trang 2

THIẾT KẾ GIAO DIỆN TRANG 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

Trang 4

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

Trang 5

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 tham khảo

Chúng em xin chịu trách nhiệm hoàn toàn về nội dung của Đồ án môn học mả chúng em đã nộp

Hà nội, ngày 18 tháng 10 năm 2023

Trang 6

PHAN CONG NHIEM VU ĐỎ AN

Trang 7

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)

Trang 8

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

Trang 9

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

Trang 10

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ý

Trang 11

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 chức năng sau:

Xem các phim có trong từng thê loại, từng quốc gia Xem các phim mới được cập nhật

Xem thông tin tổng quan của phim Truy cập trang phim đề theo dõi 2.2 Đặc điểm

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ọ sé xem

Người dùng có thể dễ dàng tìm thấy thông tin chỉ tiết các phim mà họ quan tâm

Người dùng có thể chọn bộ phim mà họ quan tâm dựa trên ảnh bìa, tên phim và thời lượng

Các module Module san phẩm

Hiên thị thông tin va phan loai film Film hién thi 1én website day đủ thông tin như: hình ảnh, tên film, nam phat hanh, tac gia, qu6c gia,

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

Trang 12

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

Trang 13

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

Hinh 1.5 Cac tuyén tap phim va phim moi

Phần này chứa đường dẫn đến một số tuyên tập phim cùng thê loại cùng với danh sách một số phim mới

Trang 14

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

Trang 15

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

</a>

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

</div> </div>

Trang 16

</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

href="https://biphimmoi.top/z.php?BL=2">PHIM LE</a></1li>

<li><a class="nav-item-title"

href="https://biphimmoi.top/z.php?TL=Hoat-Hinh">HOAT HÌNH</a></1i>

</ul> </div>

</nav> </header>

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

Trang 17

<a href="https://biphimmoi.top/ngot-ngao-va-

ruc-ro.html">

<div class="movie-carousel-item"

style="background-image: url(assets/movieCarousel 1.jpg)"> <div class="movie-carousel-item-meta">

<p class="movie-carousel-item-title-

vi">DUA HAU LAP LANH</p>

<p class="movie-carousel-item-title- en">Twinkling Watermelon (2023)</p>

</div>

</div>

</a>

</li>

</div>

<span class="visually-hidden">Previous</span>

</button>

</div> </div>

2.6 Triển khai tuyến tập phim và phim mới e Tuyến tập phim

Các tuyên tập phim khác nhau được gói gọn bằng thẻ <a> và được hiến thị với

Trang 18

<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 >

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

Méi</a></li> </ul>

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

2.7 Triển khai phim mới cập nhật e Tiêu đề

Trang 19

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>

e Danh sach phim

Sau tiêu đề thì sẽ có đanh sách phim được triển khai bằng <ul>

</a>

</li> </ul> </div>

</div>

10

Trang 20

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

<h2 class="rzight-box-header star-icon"><span>Phim lẻ

hot hôm nay</span></h2>

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

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

</div>

<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="rate-vote rate-vote-10"></span> <span class="tieude-view"> 50 Luot

Xem</span> </a> </div> </div> </div> </div> </div>

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