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 Chuyên 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 STT Họ và tên sinh viên Nội dung thực hiện Điểm Chữ ký 1 Nguyễn Duy Nam Home, LoginSignup, Contact, Landing page 2 Nguyễn Việt Long About us + Movie Details + Profile (Account info.

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

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

PHIẾU CHẤM ĐIỂM STT Họ và tên

Sinh viên thực hiện : Giảng viên hướng dẫn : PHƯƠNG VĂN CẢNH

1 Nguyễn Duy

Nam Home, Login/Signup, Contact, Landing page

2 Nguyễn Việt

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

3 Hoàng Mạnh

Bình Live + Catalog + Pricing Plan

Giảng viên chấm 1:

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

8

Chương 2: Thiết kế bố cục

Thành phần chung Mô tả

Header Đây là phần chứa logo, các link dẫn

tới tới các trang khác của website Footer Đâ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

9

Bao gồm:

Carousel Đây là phần trình chiếu các phim

được tìm kiếm và xem nhiều nhất Catalog Đây là phần hiển thị các film để người

dùng lựa chọn Subscriptions Đâ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

Plan Đây là phần thể hiện các gói đăng ký

sử dụng để tăng trải nghiệm xem film

TV original Đâ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:

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

10

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

11

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

Breadcrumb Đây là phần hiển thị xem người dùng

đang ở trang nào

người dùng nhập thông tin, có nút send để gửi thông tin đi

Info Đây là phần hiển thị các thông tin liên

hệ như link social, email, số điện thoại

12

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.

14

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, ngoà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ự

15

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.

16

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

17

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

H3.1: HomeChức năng:

+ Cho phép tìm kiếm film

+ 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

19

3.3 Landing page

H3.3: Landing pageChức năng:

+ Drag and drop slider

3.5 Manager Profile

H3.5: Manager ProfileChức năng:

+ Thêm tài khoản mới

3.6 Account Setting

H3.6: Account SettingChứ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

21

3.7 About us

H3.7: About usChứ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

22

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: CatalogChứ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

23

3.10 Pricing Plans

H3.10 Pricing PlansChứ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

24

Kết luận

Sau quá trình hoàn thành báo cáo, chúng em nhận ra: Giao diện website film có

ưu điểm là trang web có giao diện thân thiện, thuận lợi cho người sử dụng, chức năng tìm kiếm film được thực hiện nhanh chóng và thuận tiện, phù hợp với các ứng dụng triển khai trên diện rộng dễ dàng sử dụng và quản lý Tuy nhiên hệ thống này còn một

số nhược điểm như do khả năng nghiên cứu có hạn và khả năng còn hạn chế nên một

số vấn đề vẫn còn trên ý tưởng, chưa được thực thi, chương trình có tính chuyên nghiệp chưa cao, chức năng còn ít, chưa giải quyết trọn vẹn các vấn đề nảy sinh trong quá trình xử lý, giao diện tuy thân thiện nhưng tính thẩm mỹ chưa cao.

Trong quá trình tìm hiểu và xây dựng giao diện website về film, nhóm chúng

em đã học được nhiều điều bổ ích Từ môn học này đã trang bị cho chúng em thêm kiến thức để chúng em hoàn thiện hơn trên con đường mà mình lựa chọn.

Như đã nói ở trên, với điều kiện thời gian cũng như kinh nghiệm còn hạn chế của một sinh viên không thể tránh được những thiếu sót trong báo cáo Chúng em mong nhận được sự thông cảm, đóng góp ý kiến của các quý thầy cô để chúng em bổ sung, nâng cao tri thức của mình, phục vụ tốt hơn trong công tác học tập cũng như thực tế sau này.

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

25

TÀI LIỆU THAM KHẢO

1 Youtube

2 Stackoverflow

3 Google