Đồ án cơ sở 1 Đề tài thiết kế giao diện website xem phim hoạt hình

MỞ ĐẦUCông nghệ ngày càng phát triển đi theo cùng nó chính là nhu cầu của giải trí của con người cũng phổ biến và đa dạng trên nhiều thiết bị , không còn đơn thuần là có thể xem phim trê

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI:

THIẾT KẾ GIAO DIỆN WEBSITE XEM PHIM

HOẠT HÌNH

Sinh viên thực hiện : NGUYỄN THANH MINH

Giảng viên hướng dẫn : THS.LƯƠNG KHÁNH TÝ

Lớp : 20IT12

Đà nẵng, ngày 4 tháng 05 năm 2023

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI:

THIẾT KẾ GIAO DIỆN WEBSITE XEM PHIM

HOẠT HÌNH

Sinh viên thực hiện : NGUYỄN THANH MINH

Giảng viên hướng dẫn : THS.LƯƠNG KHÁNH TÝ

Lớp : 20IT12

Đà nẵng, ngày 4 tháng 05 năm 2023

MỞ ĐẦU

Công nghệ ngày càng phát triển đi theo cùng nó chính là nhu cầu của giải trí của con người cũng phổ biến và đa dạng trên nhiều thiết bị , không còn đơn thuần là

có thể xem phim trên tivi hay laptop mà có thể xem trên điện thoại thông qua ứng dụng hoặc website Cái cốt lõi và quan trọng nhất của một website đó chính là giao diện đẹp tạo nên sự ấn tượng và cuốn hút cho người sử dụng website Chính vì vậy hôm nay em sử dụng công nghệ đơn thuần cơ bản của frontend gồm HTML , CSS , Javascript , kết hợp cùng 1 số thư viện icon , font chữ để tạo nên giao diện website xem phim hoạt hình

Mặc dù trong quá trình hoàn thiện sản phẩm , bản thân em cũng đã cố gắng hết sức tuy nhiên còn nhiều hạn chế và mặt thời gian vì vậy sản phẩm có thể chưa hoàn thiện Em mong nhận được sự thông cảm và góp ý của quý thầy cô

Em xin chân thành cảm ơn !

LỜI CẢM ƠN

Để có được đồ án đạt kết quả như hiện tại, chúng em đã nhận được sự hỗ trợ, giúp đỡ, chỉ bảo tận tâm của thầy/cô Với tình cảm sâu sắc, chân thành, cho phép chúng em được bày tỏ lòng biết ơn sâu sắc đến tất cả quý thầy cô đã tạo điều kiện giúp đỡ em trong quá trình học tập và nghiên cứu

Trước hết, chúng em xin gửi tới đội ngũ giảng viên trường Đại học Công nghệ thông tin và truyền thông Việt – Hàn lời chào trân trọng, lời chúc sức khỏe và lời cảm ơn sâu sắc nhất Với sự quan tâm, chỉ bảo tận tình chu đáo, cũng như vốn

kiến thức về nhiều lĩnh vực của mình, đội ngũ giảng viên của trường đã truyền tải cho chúng em được nhiều kiến thức, cũng như kỹ năng cần thiết, để đến ngày hôm nay, chúng em đã có thể hoàn thành được Đồ án cơ sở 1 của mình Đặc biệt, chúng em xin gửi lời cảm ơn chân thành tới THS Lương Khánh Tý, giảng viên đã quan tâm, giúp đỡ, chỉ bảo tận tình để chúng em có thể hoàn thành tốt đồ án này trong suốt thời gian vừa qua

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế, đồ án này không thể tránh được những thiếu sót Chúng em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các quý thầy/cô, để chúng em có điều kiện bổ sung, nâng cao kiến thức, kỹ năng của mình, phục vụ tốt hơn cho công tác thực tế sau này Chúng em xin trân trọng cảm ơn!

NHẬN XÉT (Giảng viên hướng dẫn môn học)

.

………

……….…….

………

…………

………

……….….……….

………

………

………….…….……….

………

………

……….……….……….

………

………

…….………….……….

………

………

… ……….

………

Đà Nẵng, … tháng … năm 2023

Giảng viên hướng dẫn

Mục Lục

MỞ ĐẦU 3

LỜI CẢM ƠN 3

Chương 1 GIỚI THIỆU 5

Chương 2 CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN 6

Chương 3 CHƯƠNG 3: TRIỂN KHAI XÂY DỰNG 7

3.1.2 Giao diện website xem phim hoạt hình 8

Hình 1 : hình ảnh của trang chủ 8

9

Hình 2 hình ảnh trang phim chi tiết 9

Hình 3 : Hình ảnh trang bình luận 10

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 12

Chương 1 : GIỚI THIỆU

1.1 Tổng quan về giao diện website xem phim hoạt hình.

- Bao gồm đầy đủ tất cả các trang giao diện cần thiết của một website xem phim : trang chủ , tìm kiếm , phân loại , bình luận ,… màu sắc hài hòa , diệu nhẹ dễ nhìn và không gây cảm gác chói lóa sáng Giao diện thân thiện dễ dàng sử dụng cho mọi đối tượng sử dụng

1.2 Phương pháp kết quả

1.2.1 Phương pháp triển khai thực hiện đề tài

-Trước tiên ta phải phân tích và thiết kế giao diện, hệ thống của website bằng phần mềm

- Dựa trên kiến thức đã học, chúng ta sử dụng các ngôn ngữ HTML, JavaScript

và một số công cụ lập trình như Visual Studio Code để thiết kế một website tĩnh

- Tham khảo, tiếp thu ý kiến, thông tin từ giảng viên hướng dẫn để hoàn thiện website tốt hơn

1.2.2 Đặc điểm :

-Trang web có thanh menu điều hướng, nội dung trực quan Giao diện được thiết kế bắt mắt, đẹp giúp người dùng cảm thấy thú vị khi sử dụng trang web Người dùng có thể xem thông tin của bộ phim chi tiết Ngoài ra còn có thêm chức năng đánh giá sản phẩm , bình luận

1.2.3 Chức năng :

1.2.3.1 Giao diện :

- Phần trang chủ của website sẽ giới thiệu tổng quan về website Tại đây bạn

có thể liên hệ với chúng tôi qua facebook, instagram và twitter bên cạnh đó thì bạn có thể gửi gmail cho chúng tôi nếu bạn muốn đăng ký để nhận bản tin mới của website

và những đóng góp ý kiến cũng như báo lỗi hệ thống

- Để hoàn thiện trang web thì trang web cung cấp thêm chức năng các chức năng phản hồi lại người quản trị

1.2.4 Ưu điểm và nhược điểm

1.2.4.1 Ưu điểm

- Giao diện hội tụ đủ ba yếu tố độc đáo , tinh tế và hiện đại Hình ảnh sắc nét

và sống động Tiện lợi cho việc người dùng tìm và xem được những bộ phim yêu thích , phù hợp cho việc giải trí sau giờ làm việc căng thẳng Phù hợp và dễ dàng để tích hợp thêm phần backend về sau

1.2.4.2 Nhược điểm :

- Một số chức năng vẫn chưa hoàn thiện

-Chỉ là giao diện , nên phần dữ liệu bên trong còn chưa có

1.2.5.Kết quả :

Giao diện 1 trang web với hiệu ứng , màu sắc hài hoà Sinh động thu hút người dùng , cũng như cách thiết kế các vị trí của từng sản phẩm một cách hợp lí , dễ dàng

để thao tác

Chương 2 : NGHIÊN CỨU TỔNG QUAN

2.1 Các phương pháp.

* Chiến lược dự án

- Quy mô ban đầu nhỏ, phát triển mạng lưới về sau

- Tập trung tối ưu hóa website và trải nghiệm người dùng

- Tiếp nhận ý kiến của người dùng và xây dựng website tốt hơn

- Tập trung chủ yếu vào nhu cầu để đưa ra những sản phẩm chất lượng

* Phạm vi nghiên cứu

- Phạm vi nghiên cứu tài liệu: Tham khảo các nguồn tài nguyên từ internet

Chương 3 : TRIỂN KHAI XÂY DỰNG

3.1 Xây dựng website.

Giao diện website xem phim hoạt hình trên công cụ Visual Studio Code dựa trên ngôn ngữ HTML,CSS, ngôn ngữ lập trình Javasript và một số thư viện như jQuery, Bootstrap và Font Awesome

3.1.1 Các thư viện được sử dụng.

Để xây dựng website phù hợp với yêu cầu và mục đích đặt ra, đề tài tích hợp thêm 3 thư viện sau đây vào hệ thống website

- jQuery: là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức

năng bằng JavaScript dễ dàng, nhanh và giàu tính năng hơn jQuery được tích hợp nhiều module khác nhau Từ module hiệu ứng cho đến module truy vấn selector jQuery được sử dụng 99% trên tổng số website trên thế giới Nó cũng như bao thư viện khác là bổ sung chức năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức năng mà một trang bán hàng cần có và tạo ra những hiệu ứng động đẹp mắt

và bắt mắt jQuery có thể cung cấp các chức năng cần thiết như cho phép đánh giá và

bình luận, có thể xem điểm du lịch tương tự như một sản phẩm để xếp loại theo danh mục và cũng dễ dàng tùy chỉnh cho

- Bootstrap: là một framework bao gồm các HTML, CSS và JavaScript

template dùng để phát triển website chuẩn responsive Bootstrap cho phép quá trình thiết kế website của mình diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành

tố cơ bản sẵn có như typography, forms, buttons, tables, Bootstrap có sẵn một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu website hoàn chỉnh Với các thộc tính về giao diện được quy định sẵn kích thước, màu sắc,

độ cao, độ rộng Giúp chúng em tiết kiệm thời gian hơn khi tạo ra website này

- Font Awesome: là một thư viện chứa các font chữ ký hiệu hay sử dụng trong

website Font chữ ký hiệu ở đây chính là các icons mà ta thường hay sử dụng trong các layout website Font Awesome giúp chúng em khá nhiều trong việc tạo ra các

icon có sẵn mà không cần đong đo kích thước quá nhiều

3.1.2 Giao diện website xem phim hoạt hình

Hình 1 : hình ảnh của trang chủ

Hình 2 hình ảnh trang phim chi tiết

Hình 2.1 : Hình ảnh trang chi tiết bộ phim

Hình 3 : Hình ảnh trang bình luận

Hình 4: Hình ảnh trang đăng nhập , đăng ký

Hình 5 : Hình ảnh trang blog

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

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

Qua quá trình tìm hiểu và hoàng thành đồ án em đã tiếp thu được rất nhiều kiến thức bổ ích như nhau:

- Nắm rõ hơn về việc sử dụng javascript, HTML, CSS

- Hiểu biết và thành thạo một số công cụ như Sublime text, Notepad++

- Biết tìm hiểu, khai thác thông tin một cách chính xác

- Gia tăng tính tự giác tinh thân học tập

- Khả năng khai thác thông tin qua internet được cải thiện một cách tiến bộ

- Xây dựng thời gian biểu một cách hợp lý

5.2 Hướng phát triển.

Với những hạn chế và tồn tại nêu trên, em sẽ cố gắng khắc phục, sự kiến sau này sẽ bổ sung những chức năng còn thiếu và hoàn thành cơ sở dữ liệu, tạo ra bot để

có thể chat trực tiếp với người khai thác thông tin, tạo ra một sản phẩm hoàn thiện nhất có thể