Bài tập lớn học phần thiết kế web mã Đề tên bài tập lớn thiết kế web xem phim

Đề tài của chúng tôi sẽ là một bước tiến lớn, áp dụng những kiến thức này để xây dựng một website xem phim với giao diện đẹp mắt, trải nghiệm người dùng tốt, và tích hợp các yếu tố đặc s

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

(bìa 1, bìa đóng giấy màu)

BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB

MÃ ĐỀ: TÊN BÀI TẬP LỚN:

THIẾT KẾ WEB XEM PHIM

8

20233113

BỘ GIÁO DỤC VÀ ĐÀO TẠO

(trang phụ bìa số 2, bìa mềm)

BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB

Điểm bằng số

Điểm bằng chữ

MỤC LỤC (Trình bầy trong trang riêng)

Contents

Mở đầu………

3 Chương 1 Tổng quan về đề tài 7

I Thiết kế web 7

II HTML và JAVA SCRIPT 7

Chương 2 Cài đặt 8

I Mô tả các chức năng chính của website 8

II Thiết kế giao diện 8

III Lập trình xây dựng giao diện 8

Chương 3 Kết luận 9

I Nội dung đạt được: 9

II Các chức năng cần cải tiến: 9

III Bài học kinh nghiệm: 10

Hướng phát triển 10

Danh mục sách tham khảo 11

đầu:

I Giới thiệu môn học "Thiết Kế Web"

Môn học "Thiết Kế Web" không chỉ là một cửa sổ mở ra thế giới của kiến thức và

kỹ năng thiết kế trang web, mà còn là hành trình khám phá sự sáng tạo trong không gian ảo Chúng ta không chỉ tìm hiểu về ngôn ngữ lập trình web mà còn nắm bắt tư duy thiết kế, trải nghiệm người dùng và những xu hướng hiện đại Môn học này đưa chúng ta từ khám phá kiến thức lý thuyết đến ứng dụng thực tế, từ việc hiểu về cấu trúc trang web đến việc tạo ra những trang web thú vị và chuyên nghiệp

II Lý do chọn đề tài "Thiết kế web xem phim"

Trong thời đại số ngày nay, việc xem phim trực tuyến là một hoạt động giải trí phổ biến Thiết kế một website xem phim không chỉ đáp ứng nhu cầu giải trí mà còn mang lại trải nghiệm người dùng tốt Website xem phim cung cấp cơ hội để thể hiện khả năng thiết kế đa phương tiện, với khả năng hiển thị nội dung video và âm thanh cao cấp Điều này đặt ra thách thức thiết kế để tối ưu hóa trải nghiệm người dùng trong việc xem phim Chính vì vậy, bằng sự đam mê và tìm hiểu, tôi đã quyết định lựa chọn đề tài này để có thể trau dồi được kiên thức, kinh nghiệm và cũng như để thử thách bản thân.

III Nội dung ứng dụng các nội dung đã học vào đề tài

Trong suốt khoá học, chúng tôi đã tiếp xúc và nắm vững nhiều kiến thức quan trọng, bao gồm HTML, CSS, JavaScript, Bootstrap, và các nguyên tắc thiết kế web chuyên sâu Đề tài của chúng tôi sẽ là một bước tiến lớn, áp dụng những kiến thức này để xây dựng một website xem phim với giao diện đẹp mắt, trải nghiệm người dùng tốt, và tích hợp các yếu tố đặc sắc để thu hút khách hàng.

IV Danh sách thành viên và phân công nhiệm vụ

Tôi cam kết đảm bảo đề tài được triển khai một cách hiệu quả và đáp ứng mục tiêu của môn học.

Chân thành cảm ơn sự hỗ trợ và hướng dẫn của thầy/cô trong suốt quá trình thực hiện đề tài.

Trân trọng,

Hoàng Anh Quân

cảm ơn:

Kính gửi thầy/cô và đội ngũ giảng viên môn Thiết kế Web

Em xin gửi lời tri ân chân thành nhất đến thầy/cô và toàn bộ đội ngũ giáo viên đã tận tâm giảng dạy môn Thiết kế Web Trong suốt khoá học, em đã nhận được sự hỗ trợ và kiến thức quý báu không ngừng từ phía thầy/cô, giúp em tự tin hơn trong việc áp dụng kiến thức vào đề tài thiết kế này.

Môn học này không chỉ mang lại cho em kiến thức vững về các công cụ và ngôn ngữ lập trình web, mà còn giúp em phát triển kỹ năng thiết kế đồ họa và trải nghiệm người dùng, những yếu tố quan trọng trong quá trình thực hiện đề tài của

em Em đặc biệt biết ơn vì đã được hướng dẫn cách tích hợp những yếu tố này vào trang web của mình một cách hiệu quả.

Đề tài thiết kế web xem phim không chỉ là một bài kiểm tra kiến thức, mà còn là

cơ hội để em áp dụng những gì đã học vào một lĩnh vực sáng tạo và thú vị Những phản hồi và góp ý từ thầy/cô đã giúp em hiểu rõ hơn về cách hoàn thiện trang web của mình, đồng thời mở rộng tầm nhìn về khả năng ứng dụng công nghệ cũng như

là những kiến thức về 1 website phim.

Cuối cùng, em xin bày tỏ lòng biết ơn sâu sắc với sự tận tâm và sự nhiệt huyết của thầy/cô trong việc truyền đạt kiến thức Em tin rằng những kỹ năng và hiểu biết em đạt được từ môn học này sẽ là nền tảng vững chắc cho sự phát triển sự nghiệp và đam mê của em trong lĩnh vực thiết kế web.

Một lần nữa, em xin chân thành cảm ơn sự đóng góp không ngừng của thầy/cô vào

sự thành công của em.

Trân trọng,

Hoàng Anh Quân

Chương 1 Tổng quan về đề tài

I Thiết kế web.

1 Webpage – Website

1.1 Webpage:

 Web là một hệ thống các văn bản có mối siêu liên kết bên trong với nhau (interlinked

hypertext documents) được truy xuất thông qua hệ thống Internet

 Webpage là một trang thông tin chứa: văn bản (text), hình ảnh (images), phim

(videos) và các đa phương tiện khác có mối siêu liên kết với nhau (hyperlinks)

 Một trang web là một tập tin HTML hoặc XHTML được truy xuất thông qua giaothức HTTP

1.2 Website: là một tập hợp các trang web nằm trong một tên miền hoặc tên miền phụ trênWWW của hệ thống mạng Internet

Phân loại:

 Website tĩnh: chủ yếu giới thiệu thông tin

 Website động: có sự tương tác với người dung

2 HTML, XHTML, DHTML

2.1: HTML: là viết tắt của HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản)

 HyperText – văn bản có thể kết nối đến văn bản khác

 Sử dụng các “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định được cách biểu diễn trang web đến người sử dụng

 Một tập tin HTML là một tập tin văn bản trong đó có chứa các thẻ đánh dấu (các tập tin này có phần mở rộng là htm hoặc html)

2.2: XHTML:

 XHTML là viết tắt của eXtensible HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản mở rộng): là ngôn ngữ đánh dấu tương tự ngôn ngữ HTML nhưng có cú pháp chặt chẽ hơn

 XHTML được xem là thế hệ tiếp theo của HTML dựa trên chuẩn XML

3 Các ngôn ngữ lập trình web

3.1 Ngôn ngữ thiết kế website hay ngôn ngữ lập trình web là dạng ngôn ngữ được chuẩn hóa theo một hệ thống các quy tắc riêng để phục vụ cho quá trình thiết kế và lập trình website 3.2 Hiện nay, có nhiều ngôn ngữ lập trình hỗ trợ cho việc viết các ứng dụng web chạy trên máy chủ (xây dựng các website động) như:

ASP (Active Server Pages): do Microsoft phát triển

 JSP (Java Server Pages): IBM phát triển

 PHP (Hypertext Preprocessor): cộng đồng phát triển (các tài liệu liên quan PHP được cung cập tại Zend)

4 Web Server - Web Brower – HTTP

6 Quá trình Request - Respone

do nhà khoa học Mỹ - Tim Berners Lee định nghĩa ra năm 1989.

diễn trang web đến người sử dụng

 Một tập tin HTML là một tập tin văn bản trong đó có chứa các thẻ định dạng (các thẻ này

sẽ giúp trình duyệt Web xác định cách trình bày trang Web)

Một tập tin HTML có thể được viết trên một trình soạn thảo văn bản đơn giản

b Các thẻ HTML

 Các thẻ HTML được xác định nằm trong cặp ngoặc góc nhọn ‘<’ và ‘>’

 Các thẻ HTML thường đi theo một cặp:

<Tên_thẻ Tên_ thuộc_tính=”Giá trị”>

Ví dụ 1: thẻ html và thẻ body:

Ví dụ 2: thẻ body và thuộc tính màu nền:

c Thẻ Headings – các thẻ từ <h1> đến<h6>:

trống trước và sau mỗi dòng có thẻ heading)

(HTML sẽ tự dộng them một dòng trống trước và sau thẻ<p>

Ví dụ :

được chia thành các ô dữ liệu (bằng cách dùng thẻ <td>).

mẫu, bảng,…

CSS

mục đích đơn giản hóa quá trình tạo nên một website

chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục,… cũng như hàng loạt các hiệu ứng khác)

Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọn

tài liệu HTML Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTMLhoặc XHTML

trang web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó

có tính thẩm mỹ

trải nghiệm người dùng tuyệt vời

hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa

màu sắc của chiếc xe

trống trên trang web với các thuộc tính chính như:

quanh đoạn văn bản)

nhọn Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã cótrong danh sách của CSS

 Quy tắc khai báo đó chính là: Thuộc tính và giá trị cần cách nhau bằng dấu hai chấm, mỗidòng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng Các thuộc tính không bị giới hạn ở một vùng chọn.

 Ưu điểm và khuyết điểm của các phương pháp



cho hộp Thuộc tính Shadow trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website

các đường viền, giúp phần tử hiển thị nổi bật tương tự kiểu hộp 3D

theo đó giá trị đầu là dịch chuyển theo chiều ngang (20px), giá trị tiếp theo là dọc (10px);

JAVASCRIPT

Giới thiệu Javascript:

tương tác từ phía người dùng

ngôn ngữ LiveScript) dùng để tạo các client-side scripts và server-side scripts (có sự tương tác với người dùng)

 Mặc dù có những điểm tương đồng giữa Java và Javascript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt

b Cách nhúng Javascript vào một trang HTML:

JavaScript có thể chèn vào một tài liệu HTML theo những các sau:

• Sử dụng thẻ SCRIPT

• Sử dụng một file JavaScript từ bên ngoài

• Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của tè

• Sử dụng JavaScript trong các trình điều khiển sự kiện

b.1> Sử dụng thẻ SCRIPT:

• Khi trình duyệt gặp phải một thẻ <SCRIPT> nào đó, nó sẽ đọc từng dòng một cho đến khi gặp thẻ đóng </SCRIPT>

• Tiếp đến nó sẽ kiếm tra lỗi trong các câu lệnh Javascript

• Nếu gặp phải lỗi, nó sẽ cho hiên thị lỗi đó trong chuỗi các hộp cảnh báo (alert boxes) lên màn hình

• Nếu không có lỗi, c câu lệnh sẽ được biên dịch sao cho máy tính có thể hiểu được lệnh đó

• Việc khai báo sử dụng ngôn ngữ Javascript có thể đặt bất kỳ vị trí nào trong cặp thẻ

<html> </html> Tuy nhiên, nên đặt các câu lệnh script trong phần <head> và </head> để đảm bảo tất cả các câu lệnh đều được đọc và biên dịch trước khi nó được gọi từ trong phần BODY

b.1> Ví dụ sử dụng thẻ SCRIPT:

b.2> Sử dụng một file JavaScript từ bên ngoài:

• File javascript là file văn bản chứa các mã lệnh JavaScript, file javascript có phần mở rộng là

- Ví dụ: đối tượng SINHVIEN có các thuộc tính: mã sinh viên, họ tên, điểm, và các phương

thức: đi học, đi thi,

- Truy cập thuộc tính và phương thức:

• Tên đối tượng Tên_ thuộc_ tính

• Tên đối tượng Tên _phương_ thức( )

Sử dụng con trỏ This cho đối tượng hiện hành

b Đối tượng cơ bản:

• Array: đối tượng dùng quản lí danh sách mảng.

• Math: đối tượng liên quan đến các phép tính toán học

• String: đối tượng dùng để thao các với các chuối văn bản

• Date: đối tượng liên quan đến ngày giờ

c Đối tượng trình duyệt:

 window:

• Công dụng: dùng quản lý thông tin của tất cả các đối tượng trong cửa sổ trình duyệt 5

• Các thuộc tính cơ bản: đối tượng window được xem là đối tượng cơ bản (base class) của tất

cả các đối tượng khác

• Các phương thức cơ bản: alert(), blur(), close(, open(), focus(), navigate(

II Các Chức Năng Chính

1 Danh Sách Phim và Tìm Kiếm:

 Mục Tiêu: Hiển thị danh sách các bộ phim và cung cấp khả năng tìm kiếm

nhanh chóng.

 Triển Khai: Danh sách phim rõ ràng với hình ảnh, tên, và điểm nổi bật Ô

tìm kiếm mạnh mẽ để giúp người dùng dễ dàng tìm kiếm theo tiêu chí cụ thể.

3 Thông Tin Chi Tiết Phim:

 Mục Tiêu: Cung cấp thông tin đầy đủ và chi tiết về mỗi bộ phim.

 Triển Khai: Trang chi tiết bao gồm tên phim, mô tả, thể loại, đạo diễn, diễn

viên, và thông tin khác, giúp người dùng hiểu rõ về nội dung trước khi quyết định xem.

5 Gợi Ý Nội Dung:

 Mục Tiêu: Cung cấp gợi ý phim dựa trên lịch sử xem và sở thích của người

dùng.

 Triển Khai: Sử dụng thuật toán gợi ý để hiển thị những bộ phim mà người

dùng có thể quan tâm dựa trên hành vi xem trước đó

7 Thông Báo và Cập Nhật:

 Mục Tiêu: Thông báo cho người dùng về các bộ phim mới và cập nhật nội

dung.

người dùng về các bộ phim mới, cập nhật và sự kiện đặc biệt.

Module 2.

Code module 2 ở đây

Kết luận

Kết quả đạt được

Hướng phát triển.

Danh mục sách tham khảo

1 Trang web abc.com [tham khảo ngày … tháng … năm]

2 Tên sách, tên tác giả, năm xuất bản, nhà xuất bản