BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP (CHUYÊN NGÀNH CÔNG NGHỆ THÔNG TIN) Đề Tài THIẾT KẾ WEBSITE XEM PHIM BẰNG HTML, CSS, JA.
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP (CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN) Đề Tài: THIẾT KẾ WEBSITE XEM PHIM BẰNG HTML, CSS, JAVASCRIPT Giáo viên hướng dẫn: Nguyễn Vân Anh Sinh viên thực : Mã sinh viên : Lớp : PM24.13 Hà Nội - 2023 Thiết kế Website xem phim HTML, CSS, JavaScript BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP (CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN) Đề Tài: THIẾT KẾ WEBSITE XEM PHIM BẰNG HTML, CSS, JAVASCRIPT Giáo viên hướng dẫn: Nguyễn Vân Anh Sinh viên thực : Mã sinh viên : Lớp : PM24.13 Hà Nội - 2023 PM24.13 LỜI CẢM ƠN Sau trình học tập rèn luyện trường Đại Học Kinh Doanh Và Công Nghệ Hà Nội, hỗ trợ giúp đỡ từ quý thầy cô Trước tiên, em xin phép gửi lời cảm ơn chân thành đến quý thầy giáo người đứng lớp tận tình hướng dẫn, khuyến khích, bảo tạo điều kiện tốt cho em từ bắt đầu hồn thành đồ án Em xin chân thành cảm ơn Ban giám hiệu nhà trường thầy cô khoa Công nghệ thông tin cung cấp kiến thức, đào tạo tận tình tạo điều kiện tốt cho em suốt trình học tập nghiên cứu Trường Em xin gửi lời cảm ơn đến thành viên lớp PM24.13, người bên em, học tập rèn luyện động viên em q trình hồn thành đồ án Trong q trình hồn thành đồ án cịn có nhiều sai sót, em mong nhận lời nhận xét, góp ý, bảo từ thầy để làm hồn thiện Em xin chân thành cảm ơn! Hà Nội, ngày 07 tháng 05 năm 2023 Sinh viên thực Nguyễn Đức Thắng Thiết kế Website xem phim HTML, CSS, JavaScript MỤC LỤC LỜI CẢM ƠN MỞ ĐẦU Lý chọn đề tài .7 Đối tượng phạm vi nghiên cứu .8 Phương pháp nghiên cứu Mục tiêu nghiên cứu đề tài Ý nghĩa đề tài CHƯƠNG I CƠ SỞ LÝ LUẬN .9 Giới thiệu internet 1.1 Khái niệm mạng internet .9 1.2 Sự đời phát triển internet 1.3 Ứng dụng Web 10 Giới thiệu Website xem phim 10 Giới thiệu công nghệ sử dụng .11 3.1 Ngôn ngữ HTML .11 3.2 CSS 12 3.3 Tailwind CSS .13 Thiết kế Website xem phim HTML, CSS, JavaScript 3.4 JavaScript 14 3.5 JavaScript Framework .14 CHƯƠNG II THỰC TRẠNG .15 Thực trạng thị trường Website 15 Thực trạng Website Việt Nam 17 CHƯƠNG III GIẢI PHÁP 20 Chức đồ án Website xem phim 20 Phân tích hệ thống người dùng Website 20 Đặc tả quy trình nghiệp vụ hệ thống .20 3.1 Người dùng khơng có tài khoản 20 3.2 Người dùng có đăng kí tài khoản Website 21 3.3 Người dùng hệ thống 21 Lập mơ hình nghiệp vụ 22 4.1 Biểu đồ ngữ cảnh hệ thống 22 4.2 Biểu đồ phân rã chức 22 4.3 Biểu đồ phân rã luồng liệu 23 Mô tả giao diện Website 25 CHƯƠNG 4: HỆ THỐNG THỬ NGHIỆM 27 KẾT LUẬN 31 Thiết kế Website xem phim HTML, CSS, JavaScript Kết đạt .31 Hạn chế đề tài 31 Hướng phát triển đề tài .31 Đề nghị góp ý 31 TÀI LIỆU THAM KHẢO 32 Thiết kế Website xem phim HTML, CSS, JavaScript MỞ ĐẦU Lý chọn đề tài Hiện nay, công nghệ dành cho thiết bị laptop, máy tính bảng, di động ngày phát triển Nếu trước đây, người ta phải dùng máy tính để bàn (MTĐB) cồng kềnh trình duyệt web IE (Internet Explorer) để lướt web, với máy tính xách tay (laptop), điện thoại thơng minh (smartphone) nhiều trình duyệt web khác (Firefox, Opera, Google Chrome…) người dùng lướt mạng Internet đâu Tuy nhiên với thiết bị, trình duyệt web khác nhau, nội dung hiển thị hình khác Chẳng hạn máy tính xem trang web tốt điện thoại thơng minh giao diện cấu trúc trang bị xáo trộn Vậy giải pháp xem đầy đủ, trọn vẹn nội dung, thông tin internet HTML cho phép nhà phát triển, lập trình web tạo trang web có tính ưu việt Khơng vậy, HTML cịn đem đến cho người dùng trải nghiệm tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú Javascript xử lý đối tượng HTML trình duyệt Nó can thiệp với hành động thêm / xóa / sửa thuộc tính CSS thẻ HTML cách dễ dàng HMTL CSS làm cho ứng dụng web, trang web hấp dẫn hơn, sinh động Với tính thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng nhiều Tất điều làm cho trang Web trở nên dễ nhìn hơn, bắt mắt hơn, dễ tiếp cận người dùng Cũng lý này, em lựa chọn đề tài “XÂY DỰNG MỘT GIAO DIỆN WEBSITE XEM PHIM BẰNG HTML, CSS, JAVASCRIPT” làm đề tài cho LUẬN VĂN TỐT NGHIỆP Do thời gian trình độ kiến thức nhiều hạn chế nên làm em khơng tránh khỏi sai sót Em mong nhận góp ý, bảo thêm từ phía thầy để làm ngày hồn thiện Em xin chân thành cảm ơn ! Thiết kế Website xem phim HTML, CSS, JavaScript Đối tượng phạm vi nghiên cứu Nghiên cứu phát triển website hai tảng phổ biến website mobile Phương pháp nghiên cứu - Sử dụng kiến thức học tài liệu liên quan nước liên quan đến đề tài nghiên cứu, đặc biệt đề tài phát triển website, giao diện, chức năng, cách thức quản lý… - Nghiên cứu tìm hiểu tập trung, bám sát vào hướng dẫn giáo viên môn, giáo viên hướng dẫn Mục tiêu nghiên cứu đề tài - Phát triển website, cung cấp thông tin, dịch vụ đến người dùng - Phát triển hệ thống web có tính thực tiễn cao, có khả triển khai ứng dụng vào thực tế, giúp cho người dùng dễ dàng thao tác tiện lợi việc quản lý Ý nghĩa đề tài - Tạo hệ thống website thân thiện, phục vụ nhu cầu giải trí, xem phim - người dùng Giúp người dùng dễ dàng tiếp cận đến phim mới, phim hot Thiết kế Website xem phim HTML, CSS, JavaScript CHƯƠNG I CƠ SỞ LÝ LUẬN Giới thiệu internet 1.1 Khái niệm mạng internet Internet hệ thống thơng tin tồn cầu, truy cập cơng cộng với nhiều mạng máy tính kết nối với Hệ thống truyền thông tin theo cách packet switching (nối chuyển gói liệu) dựa giao thức Internet chuẩn hóa (giao thức IP) Hệ thống bao gồm hàng nghìn mạng máy tính nhỏ doanh nghiệp, viện nghiên cứu, trường đại học người dùng cá nhân Ngoài ra, khái niệm Internet cịn hiểu hệ thống mạng máy tính tồn cầu kết nối với nhau, thơng qua việc sử dụng giao thức Internet (TCP / IP) để liên kết thiết bị toàn cầu Internet coi mạng lưới khổng lồ, cầu nối hàng triệu mạng máy tính nhỏ toàn cầu Các mạng kết nối với thông qua cáp mặt đất, cáp ngầm, liên kết vệ tinh, 1.2 Sự đời phát triển internet Trong năm 60 70 , nhiều công nghệ mạng máy tính đời kiểu lại dựa phần cứng riêng biệt Một kiểu gọi mạng LAN cục (Local Area Networks - LAN), nối máy tính với phạm vi hẹp dây dẫn thiết bị cài đặt máy Các mạng lớn gọi mạng diện rộng (Wide Area Networks-WAN) , nối nhiều máy tính với phạm vi rộng thơng qua hệ thống dây truyền dẫn kiểu hệ thống điện thoại Giao thức TCP/IP đảm bảo thông suốt trao đổi thông tin máy tính Internet liên kết hàng ngàn máy tính thuộc cơng ty, Thiết kế Website xem phim HTML, CSS, JavaScript quan nhà nước, trung tâm nghiên cứu khoa học, trường đại học, không phân biệt khoảng cách địa lý Đó ngân hàng liệu khổng lồ nhân loại Thiết kế Website xem phim HTML, CSS, JavaScript Vào thời kỳ đó, người ta xây dựng Web site thông qua việc viết tệp siêu văn HTML với thẻ trình soạn thảo thơng thường NotePad, WordPad, cao cấp sử dụng Hotdog, Hotmetal có hỗ trợ vài cơng cụ để giảm bớt nặng nhọc phải viết thẻ HTML Vào năm 1996, tình hình cải thiện nhiều xuất sản phẩm MS Word Assistance, cho phép soạn thảo tệp văn Word lưu chúng dạng tệp siêu văn HTML Word từ phiên 6.0 tiếp tục phiên Word sau với cải tiến ngày lớn Tiếp công cụ mạnh Microsoft FrontPage 98/2000, Microsoft Office 97/2000/XP, ColFusion, Dreamwave nhiều công cụ khác hỗ trợ việc xây dựng tệp siêu văn HTML cách dễ dàng Theo hướng này, nhiều Web site đời biết tới Web site tĩnh, hiểu theo nghĩa Web site xây dựng nên liên kết tệp văn HTML mà khơng có tham gia hệ quản trị sở liệu Tuy nhiên, liệu trở nên nhiều đa dạng hơn, hầu hết nơi nghĩ tới việc xây dựng Web site có kết hợp với hệ quản trị sở liệu Cuối năm 1996, đầu 1997, Việt Nam, công nghệ Active Server Page Mỉcrosotf bắt đầu nhiều người biết tới Cùng với nó, việc xây dựng sở liệu dựa Web bắt đầu xây dựng Ban đầu với hệ quản trị sở liệu MS Access hay FoxPro Sau này, nhiều công nghệ khác du nhập vào Việt Nam nhiều Web site xây dựng theo hướng dựa nhiều hệ quản trị sở liệu khác Oracle, Microsoft SQL Server, Sybase, Informix, DB2 Thiết kế Website xem phim HTML, CSS, JavaScript Lotus Domino Một hai năm trở lại đây, trào lưu sử dụng phần mềm mã nguồn mở với hệ điều hành Linux xuất Việt Nam xu hướng mở rộng với số hệ quản trị sở liệu khác MySQL PostgreSQL Với việc phát triển ứng dụng Web dựa cho sở liệu, thấy rõ có xu hướng sử dụng công nghệ Active Server Page (hoặc NET) Microsoft với đại diện tệp *.asp (hoặc aspx NET) sử dụng công nghệ Java Sun với đại diện tệp *.jsp Cho tới nay, phần lớn Web site có kết hợp phần động – xây dựng sở hệ quản trị sở liệu viết công nghệ Web – với tiêu chí sở liệu chỏ tới phần tĩnh – thường tệp siêu văn bản, ảnh, đa phương tiện – lưu trữ thư mục máy chủ Web Để thực việc tìm kiếm thơng tin Web site, người ta sử dụng cách tìm kiếm theo trường sở liệu kết hợp với kiểu tìm kiếm tồn văn tệp văn nằm thư mục máy chủ Web – thơng qua máy chủ đánh số tìm kiếm (như MS Index Server chẳng hạn) Có thể nói, Việt Nam có hàng chục ngàn Web site xây dựng Vì vậy, nhu cầu quản lý nội dung thông tin Web site lớn Thiết kế Website xem phim HTML, CSS, JavaScript CHƯƠNG III GIẢI PHÁP Chức đồ án Website xem phim Website cho thiết bị kết nối internet như: laptop, pc, smartphone… giúp hãng phim quảng bá thương hiệu, dịch vụ đến khách hàng nơi để khách hàng tìm kiếm phim u thích Website quản trị: Quản lý tất danh mục, sản phẩm, người dùng Phân tích hệ thống người dùng Website Có kiểu người dùng: - Kiểu người dùng khơng có tài khoản Website: Khi truy cập vào Website xem phim sử dụng chức tìm kiếm - Kiểu người dùng có tài khoản Website: Ngoài sử dụng chức xem phim tìm kiếm kiểu tài khoản comment, download phim yêu cầu post phim - Kiểu người dùng Admin hệ thống: Quản lý tài khoản người dùng quản trị nội dung Website Đặc tả quy trình nghiệp vụ hệ thống 3.1 Người dùng khơng có tài khoản Đối với kiểu người dùng khơng có tài khoản Website sử dụng số chức Website sau: Chức tìm kiếm (search) Website: Nội dung tìm kiếm bao gồm tìm kiếm theo tên phim tìm kiếm theo tên chữ phim Sau người dùng xem phim vừa tìm kiếm 3.2 Người dùng có đăng kí tài khoản Website Thiết kế Website xem phim HTML, CSS, JavaScript Đối với kiểu người dùng có tài khoản Website, ngồi chức người dùng bình thường Khi đăng nhập vào Website họ cịn có chức đưa ý kiến (comment), bình luận phim, giao lưu diễn đàn Website yêu cầu post phim Sau người dùng đăng xuất khỏi tài khoản sử dụng chức người dùng tài khoản Nếu người dùng khơng đăng xuất khỏi hệ thống mà trực tiếp tắt trang web sau 10 phút hệ thống tự đăng xuất tài khoản người dùng 3.3 Người dùng hệ thống Admin có quyền xóa bỏ phim khơng phù hợp, thay đổi ads (quảng cáo), xóa bỏ comment người dùng đăng lên có nội dung khơng phù hợp Admin quản lý quyền người dùng, cấp quyền phân quyền cho người dùng Đăng ký tài khoản: Người dùng đăng ký tài khoản Website Người dùng cung cấp thông tin mà hệ thống Website yêu cầu Khi hệ thống Website kiểm tra tất thông tin mà người dùng cung cấp hợp lệ người dùng mở tài khoản Và khách hàng sử dụng cơng cụ, chức Website Xóa tài khoản người dùng: Những tài khoản mà vi phạm nội quy diễn đàn bị Admin xóa bỏ tài khoản Lập mơ hình nghiệp vụ 4.1 Biểu đồ ngữ cảnh hệ thống Thiết kế Website xem phim HTML, CSS, JavaScript Phản hồi hệ thống Yêu cầu phim Đăng nhập HỆ THỐNG NGƯỜI DÙNG Xem phim Ý kiến phản hồi Hình 3.1 Biểu đồ ngữ cảnh hệ thống 4.2 Biểu đồ phân rã chức Quản lý Website 1.Xem phim 1.2 Đưa ý kiến 2.Tìm kiếm 2.1 Theo tên phim 3.Admin 3.1 Quản lý người dùng Hình 3.2 Biểu đồ phân rã chức 3.2 Quản lý 2.2 Theo chữ 1.3 Yêu cầu nội dung 4.3 Biểu đồ phân rã liệu đầu tên cáiluồng phim 4.3.1 Biểu đồ luồng phân rã cấp Thiết kế Website xem phim HTML, CSS, JavaScript Đưa yêu cầu HỆ THỐNG NGƯỜI DÙNG Phản hồi yêu cầu Hình 3.3 Biểu đồ luồng phân cấp 4.3.2 Biểu đồ luồng phân rã cấp u cầu tìm kiếm tên phim TÌM KIẾM NGƯỜI DÙNG Phản hồi yêu cầu Dữ liệu tìm kiếm phim Hình 3.4 Biểu đồ luồng phân rã cấp Thiết kế Website xem phim HTML, CSS, JavaScript 4.3.2.1 Biểu đồ luồng phân rã cấp 2.1 Yêu cầu post phim REQUEST NGƯỜI DÙNG Phản hồi yêu cầu Dữ liệu trao đổi Hình 3.5 Biểu đồ luồng phân rã cấp 2.1 4.3.2.2 Biểu đồ luồng phân rã cấp 2.2 Đăng kí tài khoản & login Quản lý USER NGƯỜI DÙNG Phản hồi yêu cầu Dữ liệu User Hình 3.6 Biểu đồ luồng phân rã cấp 2.2 Thiết kế Website xem phim HTML, CSS, JavaScript 4.3.2.3 Biểu đồ luồng phân rã cấp 2.3 Xem nội dung Website Quản lý nội dung NGƯỜI DÙNG Phản hồi yêu cầu Dữ liệu nội dung Website Hình 3.7 Biểu đồ luồng phân rã cấp 2.3 Mô tả giao diện Website Phần đầu (header) trang web có chức đăng nhập tìm kiếm tên phim, để người dùng tìm thấy nhanh chức đăng nhập tìm kiếm Ngồi cịn có logo, tên Web phim Phần thân Website (Body): phần quan trọng Website Bên phải phần thân Website menu thể loại phim dành cho người dùng dễ dàng chọn lựa thể loại phim mà yêu thích Ở danh sách phim Website cập nhật bên cịn có danh sách phim xem nhiều nhất, hệ thống dựa vào kết xem nhiều người dùng Các catalog danh sách tên phim để khách hàng dễ dàng chọn lựa phim muốn xem Đối với khách hàng truy cập Website có mà tài khoản hệ thống có quyền đưa ý kiến, nhận xét phim xem Và cịn upload phim yêu cầu post phim Phần footer: Ghi thông tin quyền Website, tên địa công ty sở hữu Website, email liên hệ,… Thiết kế Website xem phim HTML, CSS, JavaScript Chi tiết cấu trúc giao diện Website: Tên miền Tìm kiếm Đăng nhập HOT FILM Home Popular Movies Trending < > Explore Film Film Film Film Movies and Shows Movies Film Film Film Film Film Film Film Film Favourite Bản quyền, thông tin liên hệ… Thiết kế Website xem phim HTML, CSS, JavaScript CHƯƠNG 4: HỆ THỐNG THỬ NGHIỆM Khi truy cập vào Website, giao diện trang chủ sau: Thiết kế Website xem phim HTML, CSS, JavaScript Thiết kế Website xem phim HTML, CSS, JavaScript Khi click xem phim bất kỳ: Thiết kế Website xem phim HTML, CSS, JavaScript Thiết kế Website xem phim HTML, CSS, JavaScript KẾT LUẬN Kết đạt Sau thực đề tài, chương trình đạt số kết sau: - Hiểu rõ quy trình xây dựng website Xây dựng thành công hệ thống Website xem phim thiết bị đáp ứng nhu cầu đặt người dùng - Tìm hiều nắm rõ số công cụ để xây dựng ứng dụng HTML, CSS, JAVASCRIPT - Giao diện website thân thiện, dễ sử dụng Hạn chế đề tài - Chưa kết nối liệu hoàn chỉnh để nhằm xây dựng Website hoàn chỉnh - Website cịn nhiều thiếu sót, nhiều chức chưa hoàn thiện cần phát triển tỉ mỉ - Hệ thống chưa đồng cách hiệu Hướng phát triển đề tài Để Website ngày hoàn thiện nữa, em định hướng cịn tiếp tục phát triển thêm nhiều tính năng, mở rộng hệ thống như: xem phim theo yêu cầu, tính quyền toán trực tuyến… Nhằm đáp ứng nhu cầu cao xã hội, để phát triển hệ thống thành hệ thống thương mại Đề nghị góp ý Trong thời gian thực đề tài, em tránh khỏi thiếu sót, em mong nhận đóng góp ý kiến từ quý thầy cô bạn để em hồn thiện cho dự án Em xin chân thành cảm ơn! Thiết kế Website xem phim HTML, CSS, JavaScript TÀI LIỆU THAM KHẢO Sách tham khảo: Giáo trình Thiết kế Web – Đại học Kinh Doanh Công Nghệ Hà Nội Các Website tham khảo: https://www.hanoisoftware.com/nd/the-gioi-internet-web/thuc-trangwebsite-viet-nam.html https://www.chili.vn/blogs/kinh-nghiem-vang/thuc-trang-goc-nhin-ve-thitruong-thiet-ke-website-tai-viet-nam.html