ĐỒ Á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

Thông qua những website này, thông tin về họ cũng như các công văn, thông báo, quyết định của chính phủ hay thông tin các sản phẩm, dịch vụ mới của công ty đến với những người quan tâm,

ĐẠ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Ở 1

Giáo viên hướng dẫn : Ths.Võ Văn Lường

Sinh viên thực hiện : Hồ Luận

Lớp : 20IT11

Đà Nẵng, 29 tháng 5 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 

Sinh viên thực hiện : Hồ Luận Mã SV : 20IT669

Giảng viên hướng dẫn : Ths.Võ Văn Lường

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

1 Về thái độ, ý thức của sinh viên

………

………

………

………

………

2 Về tác phong : ………

………

………

3 Về năng lực chuyên môn : ………

………

………

………

4 Kết luận Nhận xét : ………

………

………

………

………

………

………

………

………

………

LỜI CẢM ƠN

Trong quá trình thực hiện, em đã nhận được sự hỗ trợ và giúp đỡ từ thầy cô và bạn bè để hoàn thành bài tập Em xin gửi lời cảm ơn sâu sắc và trân thành đến cácthầy cô khoa Khoa học máy tính đã truyền đạt cho em những bài 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 quyết những vấn đề trong quá trình thực hiện

Em cũng xin cảm ơn thầy cô giám khảo thầy cô trong hội đồng chấm điểm Vì đây là đồ án cơ sở đầu tiên của em, không thể tránh những sai sót nên em mong các thầy cô đóng góp ý kiến nhiệt tình, giúp em tiến bộ hơn trong các đồ á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.1 Cấu trúc đồ án 1

1.2 Lý do lựa chọn đề tài 1

1.3 Nội dung và kế hoạch thực hiện 1

1.4 Mục tiêu 1

CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN 2

2.1 Tổng quan về thị trường xem phim trực tiếp 2

2.2 Phương pháp tiếp cận 2

2.3 Cơ sở lý thuyết 2

2.3.1.HTML 2

2.3.2.CSS 3

2.3.3.JavaScript 3

2.3.4.Bootstrap 3

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 5

3.1.Chức năng 5

3.2.Thiết kế chi tiết 5

3.2.1 Trang chủ 5

3.2.2 Thanh menu 7

3.2.3 Ảnh bìa trang web 7

3.2.4 Các mục xem phim : phim mới, phim nổi tiếng, top phim, 8

3.2.5 Trang thông tin 10

3.2.6 Trang liên hệ 10

CHƯƠNG 4 : 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 đủ trong tiếng anh Nghĩa tiếng Việt

HTML Hyper Text Markup Languages Ngôn ngữ đánh dấu siêu văn bảnCSS Cascading Style Sheet Tập tin định kiểu theo tầngXML Extensible Markup Language Ngôn ngữ đánh dấu mở rộngXHTML Extensible HyperText Markup

Language Ngôn ngữ đánh dấu siêu văn bảnmở rộngSVG Scalable Vector Graphics Đồ họa vector mở rộng

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 các thư mục phim………

Hình 5: Giới thiệu chung về 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 về phim………

Hình 8: Đề xuất xem phim………

Hình 9: Thông tin chi tiết của phim………

Hình 10: Plugin bình luận của Facebook………

Hình 11: Trang phát phim………

Hình 12 : Trang đăng nhập và đăng kí………

Hình 13 : Các trang khác………

CHƯƠNG 1 MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa xem là một trong những yếu tố mang tính quyết định trong hoạt động của chính phủ tổ chức cũng như công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phámạnh mẽ

Việc xây dựng các trang web để phục vụ cho nhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân ngày càng trở nên phổ biến Đối với chính phủ hay các công ty, doanh nghiệp thì việc này trở nên cấp thiết Thông qua những

website này, thông tin về họ cũng như các công văn, thông báo, quyết định của chính phủ hay thông tin các sản phẩm, dịch vụ mới của công ty đến với những người quan tâm, đến với khách hàng của họ nhanh chóng và kịp thời, tránh nhữngsai 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 chỉ gói gọn theo cách học truyền thống nữa Cùng với nhu cầu học tiếng Anh ngày càng lớn, em đã quyết định thực hiện đồ ánxây dựng 1 website có thể vừa xem phim vừa học tiếng Anh hiệu quả

1.1 Cấu trúc đồ án.

Ngoài phần mở đầu, nội dung đồ án gồm 3 chương, cụ thể như sau :

- Chương 1 : Mở đầu : Nêu lý do chọn đề tài, mục tiêu, kế hoạch,

- Chương 2 : Nghiên cứu tổng quan : Trình bày phương pháp tiếp cận và cơ

sở lý thuyết

- Chương 3 : Phân tích thiết kế hệ thống và xây dựng website: Trình bày cácchức năng và những kết quả đạt được trong quá trình xây dựng website

- Chương 4 : Kết luận và hướng phát triển : Tổng kết lại đề tài, nêu hạn chế

và đưa ra phương hướng phát triển trong tương lai.

1.2 Lý do lựa chọn đề tài.

Thời đại công nghiệp 4.0, Internet sẽ trở thành thiết yếu với cuộc sống.Điều này sẽ là bước đệm quan trọng cho ngành công nghiệp xem phim trựctuyến

Nhu cầu giải trí và học tiếng Anh của mọi người ngày càng cao Sẽ thật

tuyệt vời nếu như có 1 trang web có thể vừa giúp xem phim giải trí và học

tiếng Anh hiệu quả

1.3 Nội dung và kế hoạch thực hiện

Nội dung thực hiện: (các nội dung sẽ thực hiện trong đề tài)

- Các chức năng cơ bản của 1 trang web xem phim như : mục thể loại, top phim, tạmdừng phát, độ phân giải,…

- Các chức năng tiện ích : phụ đề song ngữ Anh Việt, hiện sub sau x giây, chế độ luyện nói, lặp lại đoạn sub, tra cứu ngữ pháp và từ vựng trong đoạn sub, lưu đoạn sub vào danh sách yêu thích,

- Thử thách và bài tập làm thêm khi người dùng muốn rèn luyện kĩ năng sau khi xemphim xong

- Chức năng lập kế hoạch : giúp người dùng lập kế hoạch học tập và theo dõi tiến trình của mình

Kế hoạch thực hiện:

Thời gian Nội dung thực hiện

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 về mặt thẩm mỹ và giao diện

Tuần 40 về sau Chạy thử nghiệm và hoàn thành sản phẩm

CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN

2.1 Góc nhìn về 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 cũng là 1 hình thức được nhiều người lựa chọn để thưởng thức các bộ phim hay Theo như số liệu của Bộ Thông tin và Truyền thông tháng 11/2020 cho biết Việt Nam có khoảng 35 doanhnghiệ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 và tổng doanh thu đạt khoảng 9.000 tỷ đồng Bên cạnh Netflix, hai nền tảng chiếu phim trực tuyến lớn là FPT Play và Galaxy Play cũng tăng trưởng Đặc biệt trong năm gần đây, do dịch bệnh Covid 19 nên nhu cầu xem phim tại nhà tăng lên nhanh chóng, cũng có ý kiến cho rằng xem phim trực tuyến sẽ là xu thế tất yếu của thời đại công nghệ Điều này cho chúng ta thấy xem phim trực tuyến vẫn là 1 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 các trang web xem phim có sẵn trên nhiều nền tảng công nghệ khác nhau

- Phương pháp triển khai thực hiện :

 Đầu tiên, chúng ta cần phải phân tích và nghiên cứu ý tưởng thiết

mà nó chỉ là ngôn ngữ đánh dấu Phần mở rộng của tập tin HTML thường là

‘html’ hoặc ‘htm’ Các trình duyệt sẽ đọc tập tin HTML và hiển thị chúngdưới dạng trang web Các thẻ HTMl sẽ được ẩn đi, chỉ khi hiển thị nội dungvăn bản và các đối tượng khác : hình ảnh, media Với các trình duyệt khácnhau đều hiển thị một tập HTML với một kết quả nhất định Các trangHTML được gửi qua mạng internet theo giao thức http

HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âmthanh mà còn cho phép nhúng các kịch bản vảo trong đó như các ngôn ngữkịch bản khác để tạo hiệu ứng động cho trang web Để trình bày trang webhiệu quả hơn HTML cho phép sử dụng kết hợp với CSS

HTML tương thích với mọi hệ điều hành cùng các trình duyệt của nó Khả năng dễ học, dễ viết là một ưu điểm của HTML không những vậy việcsoạn thảo đòi hỏi hết sức đơn giản và thông thường sử dụng notepad là đủ.HTML vẫn tiếp tục được phát triển, phiên bản hiện tại là HTML5 – phiên

bản nâng cấp của XHTML HTML cải tiến khá nhiều đặc biệt hỗ trợ mạnh

mẽ các phần tử multimedia mà không cần các plugin HTML5 nói chungmạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là khảnăng hỗ trợ API và DOM

2.3.2.CSS

CSS (Cascading Style Sheet) dùng để trình bày các tài liệu viết bằngHTML hoặc XHTML Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thểdùng cho XML, SVG, XUL,… Các đặc điểm kĩ thuật của CSS duy trì bởi tổchức W3C

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho cácthuộc tính CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặctham chiếu từ một file CSS riêng biệt Và hiện nay, CSS thường được viếtriêng thành một tập tin có phần mở rộng là css Chính vì vậy mà các trangweb có sử dụng CSS thì mã HTML sẽ trở nên ngắn gọn và trong sáng hơn.Ngoài ra có thể sử dụng 1 tập tin CSS đó cho nhiều website tiết kiệm rấtnhiều thời gian và công sức Một đặc điểm quan trọng đó là tính kế thừa củaCSS do đó sẽ giảm được số lượng dòng code mà vẫn đạt được yêu cầu

Tuy nhiên với CSS thì các trình duyệt hiểu theo kiểu riêng của nó Dovậy việc trình bày một nội dung trên các trình duyệt khác nhau không thốngnhất

2.3.3.JavaScript

Javascript là một ngôn ngữ lập trình kịch bản dựa trên các đối tượng,được phát triển từ các ý niệm nguyên mẫu Được sử dụng rộng rãi trong cáctrang web, nó được phát triển bởi Brendan Eich của hãng truyền thôngNestcape, đầu tiên tên gọi là Mocha, sau đổi thành LiveScript và cuối cùng

có tên gọi là JavaScript.Cú pháp của JavaScript tương tụ giống C giống Selthơn Java Nó sử dụng có 2 dạng : nhúng trực tiếp vào mã html, hoặc thamchiều từ một tập tin với phần mở rộng là js Phiên bản JavaScript mới nhất là1.5, tương ứng với các ECMA-262 phiên bản chuẩn hóa của JavaScript.Trình duyệt Mozilla 1.8 beta 1 hỗ trợ không đầy đủ cho E4X- phần mở rộng

như: typography, forms, buttons, tables,grids,  navigation, modal, imagecarousels và nhiều thành tố khác Bootstrap giúp việc thiết kế được dễ dàng,nhanh chóng hơn. 

Ngoài ra, trong Bootstrap còn tích hợp thêm các plugin Javascript bêntrong nó Theo đó, với những thuộc tính về giao diện được quy định sẵn vềmàu sắc, kích thước, chiều cao, chiều rộng… từ Bootstrap  người dùng có thểsáng tạo ra nhiều thiết kế web mới mẻ song vẫn tiết kiệm thời gian tối ưu

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ

XÂY DỰNG WEBSITE

3.1.Chức năng và yêu cầu.

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 bình luận, đánh giá của người đã truy cập và có thể bình luận, đánh giá theo ý kiến riêng của mình về nội dung,… của trang web Bên cạnh đó, trang web còn yêu cầu 1 vài chức năng sau:

+ Các chức năng cơ bản của 1 trang web xem phim như : thể loại, top phim, tạm dừng phát, độ phân giải,…

+ Các chức năng tiện ích : phụ đề song ngữ Anh Việt, hiện sub sau x giây, chế độ luyện nói, lặp lại đoạn sub, tra cứu ngữ pháp và từ vựng trong đoạn sub, lưu đoạn sub vào danh sách yêu thích,

+ Thử thách và bài tập làm thêm khi người dùng muốn rèn luyện kĩ năng sau khi xem phim xong

+ Chức năng lập kế hoạch : giúp người dùng lập kế hoạch học tập và theo dõi tiếntrình của mình

3.2.Thiết kế chi tiết và xây dựng website

3.2.1 Trang chủ

Trang chủ cũng chính là giao diện của website, trang chủ chứa các thành phầnsau : tiêu đề website, thanh menu, bộ công cụ, ảnh bìa, các thư mục phim khácnhau, giới thiệu trang web, liên hệ & bản quyền,… Trang chủ sẽ chứa các đườngdẫn liên kết với các trang còn lại

Hình 1 Trang chủ

3.2.1.1 Thanh menu.

Thanh menu chứa các liên kết thiết yếu của trang web Thanh menu được

tổ chức hiển thị theo mô hình flex và vị trí là sticky cho phép thanh dính lại vị trí đầu trang web khi cuộn trang Có 1 vấn đề phát sinh trong quá trình tạo thanh menu : khi cuộn thì các thành phần khác có khả năng nằm đè lên thanh, vì vậy tôi

sử dụng thuộc tính z-index (thiết lập độ ưu tiên hiển thị) để giải quyết điều này..nav {

Hình 3 Trang bìa

3.2.1.3 Các trang thư mục phim.

Các trang thư mục phim sẽ cung cấp cho người dùng gợi ý các bộ phim cùng chung 1 thuộc tính nào đó, ví sụ như : phim mới nhất, phim nổi tiếng,

Các trang thư mục phim sẽ có các bộ phim minh họa Phim minh họa cần phải được sắp xếp theo nhiều bố cục khác nhau để tránh sự nhàm chán

Đồng thời, các phim minh họa cũng cần 1 hiệu ứng chuyển tiếp mượt mà khi đưa chuột vào

Hình 4 Bố cục các thư mục phim

3.2.1.4 Giới thiệu về website.

Hình 5 Giới thiệu chung về website

3.2.1.5 Công cụ tiện ích.

Công cụ tiện ích mà các chức năng hỗ trợ cho người dùng như : 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ụ này phải luôn luôn được hiển thị trong giao diện của người dùng nên tôi có 1 ý tưởng khá hay : vì thanh menu luôn dính lại trên đầu trang nên sẽ thật tốt nếu như công cụ tiện ích là

1 thành phần trong thanh menu Tools là thanh công cụ, người dùng có thể chọn đóng hoặc mở tool bằng cách nhấp chuột vào

Hình 6.1 Các công cụ tiện ích

Hình 6.2 Các công cụ tiện ích

3.2.2 Trang thông tin về phim

Trang thông tin về phim sẽ là hiển thị thông tin chung về bộ phim và cung cấp cái nhìn tổng thể nhất về bộ phim Trang thông tin sẽ hiển thị sau khi người dùng nhấp vào phim

Hình 8 Đề xuất xem phim

3.2.2.2 Thông tin về phim

Thông tin về bộ phim mà người dùng muốn xem, có thể tiết lộ nội dung của bộ phim, các đánh giá về bộ phim giúp người dùng nắm bắt rõ thông tin trước khi quyết định xem Thông tin và ảnh kèm theo sẽ không chiếm hết độ rộng của trangweb, chúng sẽ được căn lề 2 bên bằng nhau, tạo cảm giác dễ chịu hơn Em đã sử dụng mô hình flex và thuộc tính justify-content để xử lý vấn đề này

display :  flex ;

Hình 9 Thông tin về phim

3.2.2.3 Plugin bình luận của Facebook

Plugin bình luận sẽ cho phép người dùng để lại ý kiến của mình về bộ phim Chúng ta sẽ truy cập vào trang web

https://developers.facebook.com/docs/plugins/embedded-comments?

Hình 10 Plugin bình luận của Facebook

3.2.3 Trang phát phim

Trang phát phim là 1 trình phát video có tích hợp các công cụ tiện ích hỗ trợ việc học tiếng Anh Trang phát phim được 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, hiện 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átchậm lại, chế độ luyện nghe,

Lưu ý : các chức năng trên chỉ mới là thiết kế giao diện, hiện tại em vẫn chưa

đủ khả năng để thực hiện

Hình 12 Trang đăng nhập và đăng kí

Hình 13 Các trang khác

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

4.1 Kết luận

- Về mặt lý thuyết :

 Nắm được các kiến thức về: html,css, bootstrap, javascript.

 Xây dựng được website xem phim trực tuyến.

 Nâng cao khả năng tự học và tự nghiên cứu

- Về mặt hạn chế :

 Các tính năng tiện ích và công cụ vẫn chưa hoàn thiện

 Chưa kết nối được với cơ sở dữ 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 các lỗi để phục vụ khách hàng tốt nhất

- Nâng cấp các tiện tích và công cụ liên tục

- Mở rộng thêm các chức năng khác

- Chạy quảng cáo trên website đồng thời thu phí người dùng

Chữ ký giáo viên hướng dẫn