ĐỒ ÁN CƠ SỞ 1 Đề tài : Xây dựng Web xem phim và học tiếng Anh. Ths.Võ Văn Lường

ĐẠI HỌC ĐÀ NẴNG Trường Đại Học Công Nghệ Thông Tin & Truyền Thơng Việt Hàn Khoa học máy tính  ĐỒ ÁN CƠ SỞ Đề tài : Xây dựng Web xem phim học tiếng Anh Giáo viên hướng dẫn Sinh viên thực Lớp : Ths.Võ Văn Lường : Hồ Luận : 20IT11 Đà Nẵng, 29 tháng năm 2021 ĐẠI HỌC ĐÀ NẴNG Trường Đại Học Công Nghệ Thông Tin & Truyền Thơng Việt Hàn Khoa học máy tính  ĐỒ ÁN CƠ SỞ Đề tài : Xây dựng Web xem phim học tiếng Anh Sinh viên thực : Hồ Luận Mã SV : 20IT669 Giảng viên hướng dẫn : Ths.Võ Văn Lường Đà Nẵng, 29 tháng năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Về thái độ, ý thức sinh viên ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………… Về tác phong : ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………… Về lực chuyên môn : ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Kết luận Nhận xét : ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Giảng viên hướng dẫn LỜI CẢM ƠN Trong trình thực hiện, em nhận hỗ trợ giúp đỡ từ thầy bạn bè để hồn thành tập Em xin gửi lời cảm ơn sâu sắc trân thành đến thầy khoa Khoa học máy tính truyền đạt cho em học bổ ích, cảm ơn ban giám hiệu nhà trường tạo điều kiện để em hoàn thành đồ án Đặc biệt em xin gửi lời cảm ơn đến thầy Võ Văn Lường trực tiếp hướng dẫn em, giúp em giải vấn đề trình thực Em xin cảm ơn thầy cô giám khảo thầy cô hội đồng chấm điểm Vì đồ án sở em, khơng thể tránh sai sót nên em mong thầy đóng góp ý kiến nhiệt tình, giúp em tiến đồ án sau Em xin cảm ơn thầy cô Hồ Luận MỤC LỤC TRANG BÌA……………………………………………………………………… DANH MỤC CÁC TỪ VIẾT TẮT……………………………………………… DANH MỤC HÌNH VẼ…………………………………………………………… MỞ ĐẦU 1.1 Cấu trúc đồ án 1.2 Lý lựa chọn đề tài 1.3 Nội dung kế hoạch thực 1.4 Mục tiêu CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN 2.1 Tổng quan thị trường xem phim trực tiếp 2.2 Phương pháp tiếp cận 2.3 Cơ sở lý thuyết 2.3.1.HTML 2.3.2.CSS .3 2.3.3.JavaScript 2.3.4.Bootstrap CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1.Chức 3.2.Thiết kế chi tiết 3.2.1 Trang chủ 3.2.2 Thanh menu .7 3.2.3 Ảnh bìa trang web 3.2.4 Các mục xem phim : phim mới, phim tiếng, top phim, 3.2.5 Trang thông tin 10 3.2.6 Trang liên hệ 10 CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 11 4.1 Kết luận 11 4.2 Hướng phát triển 11 DANH MỤC TÀI LIỆU THAM KHẢO……………………………………… 12 DANH MỤC CỤM TỪ VIẾT TẮT Viết tắt Từ đầy đủ tiếng anh Nghĩa tiếng Việt HTML CSS XML XHTML Hyper Text Markup Languages Cascading Style Sheet Extensible Markup Language Extensible HyperText Markup Language Scalable Vector Graphics Ngôn ngữ đánh dấu siêu văn Tập tin định kiểu theo tầng Ngôn ngữ đánh dấu mở rộng Ngôn ngữ đánh dấu siêu văn mở rộng Đồ họa vector mở rộng SVG DANH MỤC HÌNH VẼ Hình 1: Trang chủ………………………………………………………………… Hình 2: Hiệu ứng Dropdown… Hình 3: Trang bìa………………………………………… Hình 4: Bố cục thư mục phim…………………………………………… Hình 5: Giới thiệu chung website………………………………………… Hình 6.1 : Các cơng cụ tiện ích (1)……………………………………………… Hình 6.2 : Các cơng cụ tiện ích (2)……………………………………………… Hình 7: Trang thơng tin phim………………………………………………… Hình 8: Đề xuất xem phim………………………………………………………… Hình 9: Thơng tin chi tiết phim…………………………………… Hình 10: Plugin bình luận Facebook………………………………………… Hình 11: Trang phát phim………………………………………………………… Hình 12 : Trang đăng nhập đăng kí…………………………………………… Hình 13 : Các trang khác………………………………………………………… CHƯƠNG MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ tổ chức cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc xây dựng trang web để phục vụ cho nhu cầu riêng tổ chức, cơng ty chí cá nhân ngày trở nên phổ biến Đối với phủ hay cơng ty, doanh nghiệp việc trở nên cấp thiết Thông qua website này, thông tin họ công văn, thông báo, định phủ hay thơng tin sản phẩm, dịch vụ công ty đến với người quan tâm, đến với khách hàng họ nhanh chóng kịp thời, tránh sai phạm mà phương thức giao tiếp truyền thống gặp phải Hiện tại, việc học tập khơng gói gọn theo cách học truyền thống Cùng với nhu cầu học tiếng Anh ngày lớn, em định thực đồ án xây dựng website vừa xem phim vừa học tiếng Anh hiệu 1.1 Cấu trúc đồ án - Ngoài phần mở đầu, nội dung đồ án gồm chương, cụ thể sau : Chương : Mở đầu : Nêu lý chọn đề tài, mục tiêu, kế hoạch, Chương : Nghiên cứu tổng quan : Trình bày phương pháp tiếp cận sở lý thuyết Chương : Phân tích thiết kế hệ thống xây dựng website: Trình bày chức kết đạt trình xây dựng website Chương : Kết luận hướng phát triển : Tổng kết lại đề tài, nêu hạn chế đưa phương hướng phát triển tương lai 1.2 Lý lựa chọn đề tài Thời đại công nghiệp 4.0, Internet trở thành thiết yếu với sống Điều bước đệm quan trọng cho ngành công nghiệp xem phim trực tuyến Nhu cầu giải trí học tiếng Anh người ngày cao Sẽ thật tuyệt vời có trang web vừa giúp xem phim giải trí học tiếng Anh hiệu 1.3 Nội dung kế hoạch thực Nội dung thực hiện: (các nội dung thực đề tài) - Các chức trang web xem phim : mục thể loại, top phim, tạm dừng phát, độ phân giải,… - Các chức tiện ích : phụ đề song ngữ Anh Việt, sub sau x giây, chế độ luyện nói, lặp lại đoạn sub, tra cứu ngữ pháp từ vựng đoạn sub, lưu đoạn sub vào danh sách yêu thích, - Thử thách tập làm thêm người dùng muốn rèn luyện kĩ sau xem phim xong - Chức lập kế hoạch : giúp người dùng lập kế hoạch học tập theo dõi tiến trình Kế hoạch thực hiện: Thời gian Nội dung thực Tuần thứ 30 => 33 Lên ý tưởng Tuần 34 => 37 Viết code demo cho web Tuần 38 => 39 Chỉnh sửa lại web mặt thẩm mỹ giao diện Tuần 40 sau Chạy thử nghiệm hoàn thành sản phẩm 1.4 Mục tiêu - Thiết kế trang web xem phim với giao diện đẹp mắt, linh hoạt, sử dụng dễ dàng - Cung cấp tiện ích hỗ trợ việc học tiếng Anh hiệu CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN 2.1 Góc nhìn thị trường xem phim trực tuyến Bên cạnh xem phim chiếu rạp, xem phim trực tuyến hình thức nhiều người lựa chọn để thưởng thức phim hay Theo số liệu Bộ Thông tin Truyền thông tháng 11/2020 cho biết Việt Nam có khoảng 35 doanh nghiệp hoạt động cung cấp dịch vụ truyền hình trả tiền trực tuyến, với 14 triệu thuê bao tổng doanh thu đạt khoảng 9.000 tỷ đồng Bên cạnh Netflix, hai tảng chiếu phim trực tuyến lớn FPT Play Galaxy Play tăng trưởng Đặc biệt năm gần đây, dịch bệnh Covid 19 nên nhu cầu xem phim nhà tăng lên nhanh chóng, có ý kiến cho xem phim trực tuyến xu tất yếu thời đại công nghệ Điều cho thấy xem phim trực tuyến mảnh đất “màu mỡ” để khai thác 2.2 Phương pháp tiếp cận - Cách tiếp cận : Tham khảo trang web xem phim có sẵn nhiều tảng cơng nghệ khác - Phương pháp triển khai thực :  Đầu tiên, cần phải phân tích nghiên cứu ý tưởng thiết kế trang web  Dựa vào kiến thức học, sử dụng ngôn ngữ HTML, CSS, Bootstrap để thiết kế trang web phim  Tham khảo ý kiến từ giáo viên hướng dẫn hoàn thiện trang web 2.3 Cơ sở lý thuyết 2.3.1.HTML Hyper Text Markup Languages(HTML) hay gọi « Ngơn ngữ đánh dấu siêu văn » Nó sử dụng để tạo nên trang web thông qua thẻ đánh dấu Do HTML ngơn ngữ lập trình mà ngôn ngữ đánh dấu Phần mở rộng tập tin HTML thường ‘html’ ‘htm’ Các trình duyệt đọc tập tin HTML hiển thị chúng dạng trang web Các thẻ HTMl ẩn đi, hiển thị nội dung văn đối tượng khác : hình ảnh, media Với trình duyệt khác hiển thị tập HTML với kết định Các trang HTML gửi qua mạng internet theo giao thức http HTML cho phép nhúng thêm đối tượng hình ảnh, âm mà cho phép nhúng kịch vảo ngơn ngữ kịch khác để tạo hiệu ứng động cho trang web Để trình bày trang web hiệu HTML cho phép sử dụng kết hợp với CSS HTML tương thích với hệ điều hành trình duyệt Khả dễ học, dễ viết ưu điểm HTML khơng việc soạn thảo địi hỏi đơn giản thông thường sử dụng notepad đủ HTML tiếp tục phát triển, phiên HTML5 – phiên nâng cấp XHTML HTML cải tiến nhiều đặc biệt hỗ trợ mạnh mẽ phần tử multimedia mà không cần plugin HTML5 nói chung mạnh mẽ nhiều khơng tốc độ độ thích ứng cao mà khả hỗ trợ API DOM 2.3.2.CSS CSS (Cascading Style Sheet) dùng để trình bày tài liệu viết HTML XHTML Ngồi ngơn ngữ định kiểu theo tầng dùng cho XML, SVG, XUL,… Các đặc điểm kĩ thuật CSS trì tổ chức W3C CSS có cấu trúc đơn giản sử dụng từ tiếng anh để đặt tên cho thuộc tính CSS sử dụng viết trực tiếp xen lẫn vào mã HTML tham chiếu từ file CSS riêng biệt Và nay, CSS thường viết riêng thành tập tin có phần mở rộng css Chính mà trang web có sử dụng CSS mã HTML trở nên ngắn gọn sáng Ngoài sử dụng tập tin CSS cho nhiều website tiết kiệm nhiều thời gian cơng sức Một đặc điểm quan trọng tính kế thừa CSS giảm số lượng dòng code mà đạt yêu cầu Tuy nhiên với CSS trình duyệt hiểu theo kiểu riêng Do việc trình bày nội dung trình duyệt khác khơng thống 2.3.3.JavaScript Javascript ngơn ngữ lập trình kịch dựa đối tượng, phát triển từ ý niệm nguyên mẫu Được sử dụng rộng rãi trang web, phát triển Brendan Eich hãng truyền thông Nestcape, tên gọi Mocha, sau đổi thành LiveScript cuối có tên gọi JavaScript.Cú pháp JavaScript tương tụ giống C giống Selt Java Nó sử dụng có dạng : nhúng trực tiếp vào mã html, tham chiều từ tập tin với phần mở rộng js Phiên JavaScript 1.5, tương ứng với ECMA-262 phiên chuẩn hóa JavaScript Trình duyệt Mozilla 1.8 beta hỗ trợ không đầy đủ cho E4X- phần mở rộng cho JavaScript làm việc với XML, chuẩn hóa ECMA-357 2.3.4.Bootstrap Bootstrap framework cho phép lập trình viên xây dựng website nhanh chóng theo tiêu chuẩn định Trong đó, website có ưu điểm thân thiện tương thích với nhiều thiết bị khác nhau, hỗ trợ chức hình từ desktop đến mobile nhanh chóng Bootstrap kho sưu tập miễn phí chứa mã nguồn mở cơng cụ để tạo mẫu website hồn chỉnh bao gồm: có HTML template, CSS template, JavaScript template Nhờ việc xây dựng thành tố sẵn có như: typography, forms, buttons, tables,grids, navigation, modal, image carousels nhiều thành tố khác Bootstrap giúp việc thiết kế dễ dàng, nhanh chóng 10 Ngồi ra, Bootstrap cịn tích hợp thêm plugin Javascript bên Theo đó, với thuộc tính giao diện quy định sẵn màu sắc, kích thước, chiều cao, chiều rộng… từ Bootstrap người dùng sáng tạo nhiều thiết kế web mẻ song tiết kiệm thời gian tối ưu 11 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ XÂY DỰNG WEBSITE 3.1.Chức yêu cầu Trang web có menu điều hướng, nội dung trực quan Giao diện thiết kế bắt mắt, đẹp giúp người dùng cảm thấy thú vị sử dụng trang web Người dùng xem bình luận, đánh giá người truy cập bình luận, đánh giá theo ý kiến riêng nội dung,… trang web Bên cạnh đó, trang web yêu cầu vài chức sau: + Các chức trang web xem phim : thể loại, top phim, tạm dừng phát, độ phân giải,… + Các chức tiện ích : phụ đề song ngữ Anh Việt, sub sau x giây, chế độ luyện nói, lặp lại đoạn sub, tra cứu ngữ pháp từ vựng đoạn sub, lưu đoạn sub vào danh sách yêu thích, + Thử thách tập làm thêm người dùng muốn rèn luyện kĩ sau xem phim xong + Chức lập kế hoạch : giúp người dùng lập kế hoạch học tập theo dõi tiến trình 3.2.Thiết kế chi tiết xây dựng website 3.2.1 Trang chủ Trang chủ giao diện website, trang chủ chứa thành phần sau : tiêu đề website, menu, cơng cụ, ảnh bìa, thư mục phim khác nhau, giới thiệu trang web, liên hệ & quyền,… Trang chủ chứa đường dẫn liên kết với trang cịn lại 12 Hình Trang chủ 3.2.1.1 Thanh menu Thanh menu chứa liên kết thiết yếu trang web Thanh menu tổ chức hiển thị theo mơ hình flex vị trí sticky cho phép dính lại vị trí đầu trang web cuộn trang Có vấn đề phát sinh trình tạo menu : cuộn thành phần khác có khả nằm đè lên thanh, tơi sử dụng thuộc tính z-index (thiết lập độ ưu tiên hiển thị) để giải điều .nav{ position: sticky; top: 0px; margin: 5px; display: flex; width: 100%; z-index: 10; } Các thành phần trang menu : thể loại, năm phát hành, quốc gia có hiệu ứng Dropdown đưa chuột vào Hình Hiệu ứng Dropdown 3.2.1.2 Trang bìa Trang bìa ảnh có kích thước lớn phim kèm theo thông tin phim Trang bìa điểm nhấn người dùng truy cập lần đầu vào trang web 13 Hình Trang bìa 3.2.1.3 Các trang thư mục phim Các trang thư mục phim cung cấp cho người dùng gợi ý phim chung thuộc tính đó, ví sụ : phim nhất, phim tiếng, Các trang thư mục phim có phim minh họa Phim minh họa cần phải xếp theo nhiều bố cục khác để tránh nhàm chán Đồng thời, phim minh họa cần hiệu ứng chuyển tiếp mượt mà đưa chuột vào Hình Bố cục thư mục phim 3.2.1.4 Giới thiệu website Giới thiệu website cung cấp thông tin trang web 14 Hình Giới thiệu chung website 3.2.1.5 Cơng cụ tiện ích Cơng cụ tiện ích mà chức hỗ trợ cho người dùng : lập kế hoạch, chơi trò chơi, luyện tập, thử thách, yêu thích, Các cơng cụ phải ln ln hiển thị giao diện người dùng nên tơi có ý tưởng hay : menu ln dính lại đầu trang nên thật tốt cơng cụ tiện ích thành phần menu Tools cơng cụ, người dùng chọn đóng mở tool cách nhấp chuột vào Hình 6.1 Các cơng cụ tiện ích 15 Hình 6.2 Các cơng cụ tiện ích 3.2.2 Trang thơng tin phim Trang thông tin phim hiển thị thông tin chung phim cung cấp nhìn tổng thể phim Trang thơng tin hiển thị sau người dùng nhấp vào phim Hình Trang thơng tin phim Ngồi mục tiêu đề trang web, menu, trang bìa cịn có thêm đề xuất xem phim, thơng tin phim, plugin bình buận facebook 3.2.2.1 Đề xuất xem phim Đề xuất phim thể loại khác cho người dùng, hiệu ứng chuyển đổi bố cục giống thư mục phim 16 Hình Đề xuất xem phim 3.2.2.2 Thơng tin phim Thông tin phim mà người dùng muốn xem, tiết lộ nội dung phim, đánh giá phim giúp người dùng nắm bắt rõ thông tin trước định xem Thông tin ảnh kèm theo không chiếm hết độ rộng trang web, chúng lề bên nhau, tạo cảm giác dễ chịu Em sử dụng mơ hình flex thuộc tính justify-content để xử lý vấn đề display: flex; justify-content: space-around; Hình Thơng tin phim 17 3.2.2.3 Plugin bình luận Facebook Plugin bình luận cho phép người dùng để lại ý kiến phim Chúng ta truy cập vào trang web https://developers.facebook.com/docs/plugins/embedded-comments? locale=vi_VN để tạo khung bình luận dán mã vào html Hình 10 Plugin bình luận Facebook 3.2.3 Trang phát phim Trang phát phim trình phát video có tích hợp cơng cụ tiện ích hỗ trợ việc học tiếng Anh Trang phát phim liên kết với nút ‘Xem Phim’ bên Trang Thông Tin Về Phim Các tiện ích bao gồm bảng hội thoại, sub sau x giây, phụ đề song ngữ Anh-Việt, tra cứu ngữ pháp, từ vựng, lặp lại đoạn sub, phát chậm lại, chế độ luyện nghe, Lưu ý : chức thiết kế giao diện, em chưa đủ khả để thực Hình 11 Trang phát phim Nguồn : phimlearning.com 3.2.4 Trang đăng nhập đăng kí Trang đăng nhập liên kết với nút Đăng Nhập tiêu đề trang web Trang dùng để người dùng đăng nhập sử dụng công cụ hỗ trợ học tập website 18 Hình 12 Trang đăng nhập đăng kí 3.2.5 Các trang khác Các trang khác bao gồm trang thuộc thể loại, năm phát hành, quốc gia, phim cập nhật, phim bộ, phim lẻ, top phim bộ, top phim lẻ, Các trang xếp tổ chức giống với thư mục phim 19 Hình 13 Các trang khác CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết luận - Về mặt lý thuyết : 20  Nắm kiến thức về: html,css, bootstrap, javascript  Xây dựng website xem phim trực tuyến  Nâng cao khả tự học tự nghiên cứu - Về mặt hạn chế :  Các tính tiện ích cơng cụ chưa hoàn thiện  Chưa kết nối với sở liệu  Chưa có giao diện cho quản trị viên  Trang web cịn nhiều thiếu sót 4.2 Hướng phát triển - Thường xuyên kiểm tra, sửa chữa lỗi để phục vụ khách hàng tốt - Nâng cấp tiện tích cơng cụ liên tục - Mở rộng thêm chức khác - Chạy quảng cáo website đồng thời thu phí người dùng Chữ ký giáo viên hướng dẫn 21 DANH MỤC TÀI LIỆU THAM KHẢO Tham khảo trang web : - https://www.w3schools.com/ - https://getbootstrap.com/ - https://phimlearning.com/ 22