Xây dựng giao diện cho website xem phim trực tuyến

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN / TIN HỌC QUẢN LÝ Xây dựng giao diện cho website xem phim trực tuyến Đơn vị thực tập : Công ty TNHH công nghệ tin học viễn Quốc Thắng Giảng viên hướng dẫn : T.S Phan Đình Vấn thông LỜI CẢM ƠN Trước hết em xin gửi tới Quý Thầy/Cô khoa Thống kê-Tin học Trường Đại học Kinh Tế – Đại học Đà Nẵng lời chào trân trọng, lời chúc sức khỏe lời cảm ơn sâu sắc Với quan tâm, dạy dỗ, bảo tận tình chu đáo thầy thời gian vừa qua mà em trang bị kiến thức chuyên ngành để thực tiếp chặng đường học tập, đến em hồn thành báo cáo thực tập nghề nghiệp cho đề tài: “ Xây dựng giao diện cho website xem phim trực tuyến’’ Đặc biệt em xin gửi lời cảm ơn chân thành tới thầy Phan Đình Vấn ln quan tâm giúp đỡ, hướng dẫn tận tình để em hoàn thành tốt tập nghề nghiệp suốt trình thực từ lúc vừa bắt đầu lên ý tưởng ngày hôm Và em xin cảm ơn đơn vị thực tập – Công ty TNHH công nghệ tin học viễn thông Quốc Thắng , mentor Huỳnh Ngọc Kha cho em hội thực tập đây, giúp đỡ ,hỗ trợ em hiểu biết thêm kiến thức, môi trường làm việc để em hồn thành báo cáo thực cho em hành trang tốt sau Trong trình thực đề tài em cố gắng với điều kiện thời gian kiến thức, kinh nghiệm hạn chế sinh viên, báo cáo tránh thiếu sót Em mong nhận bảo, đóng góp ý kiến thầy để em có điều kiện bổ sung, hồn thiện, nâng cao ý thức để phục vụ tốt cho môn học công việc thân em sau Em xin chân thành cảm ơn! i LỜI CAM ĐOAN Em xin cam đoan đề tài: “ Xây dựng cho website xem phim trực tuyến’’ kết sau trình nghiên cứu đề tài riêng thân em hướng dẫn thầy Phan Đình Vấn Những nhận định nêu đề tài kết từ nghiên cứu trực tiếp, nghiêm túc, độc lập thân em dựa sở tìm kiếm, hiểu biết nghiên cứu tài liệu khoa học hay dịch khác công bố tham khảo trích dẫn, rõ nguồn tham khảo theo quy định ii MỤC LỤC LỜI CẢM ƠN i LỜI CAM ĐOAN ii MỤC LỤC iii DANH MỤC HÌNH ẢNH v DANH MỤC BẢNG BIỂU vi DANH MỤC CÁC TỪ VIẾT TẮT vii LỜI MỞ ĐẦU CHƯƠNG GIỚI THIỆU VỀ CÔNG TY THỰC TẬP VÀ CƠ SỞ LÝ THUYẾT VỀ FRONT- END DEVELOPER 1.1.Tổng quan công ty thực tập 1.1.1 Tổng quan đơn vị thực tập 1.1.2 Tầm nhìn , sứ mệnh .4 1.2.Tổng quan Front-end Developer .5 1.2.1 Giới thiệu lập trình Front end 1.2.2 Mô tả công việc Front end 1.2.3 Cơ hội làm việc 1.3.Cơ sở lý thuyết Front-end Developer: 1.3.1.HTML/CSS 1.3.2.JavaScript 11 1.3.3.SCSS 15 1.3.4.Thư viện React JS 17 1.3.5 Application Programming Interface (API) 18 CHƯƠNG TRIỂN KHAI DỰ ÁN XÂY DỰNG GIAO DIỆN WEBSITE XEM PHIM BẰNG REACTJS 19 iii 2.1.Phân tích yêu cầu hệ thống .19 2.1.1 Giới thiệu dự án 19 2.1.2 Giao diện người dùng ( UI) .20 2.1.3 Trải nghiệm người dùng ( UX) 20 2.2.Nội dung dự án: 21 2.2.1.Mục tiêu thiết kế giao diện 21 2.2.2.Quy trình thiết kế giao diện ReactJS 21 CHƯƠNG KẾT QUẢ THỰC HIỆN ĐỀ TÀI “ XÂY DỰNG GIAO DIỆN WEBSITE XEM PHIM TRỰC TUYẾN” 21 3.1 Giao diện trang home 22 3.2 Giao diện trang sign up/ login: .23 3.3 Giao diện trang Catelogy: .24 3.4 Giao diện trang movie: 27 3.5 Giao diện trang chi tiết: 28 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .29 TÀI LIỆU THAM KHẢO 30 PHỤ LỤC 32 iv DANH MỤC HÌNH ẢNH Hình 1.Logo Cơng Ty Hình 2.Hình mơi trường lập trình VSCode Hình 3.Ảnh HML/CSS Hình 4.Ảnh HTML/CSS .7 Hình 5.Hình ngơn ngữ JavaScript Hình Hình Framework React JS 15 Hình 7.Giao diện Trang Header 20 Hình 8.Giao diện trang Home .20 Hình 9.Giao diện phần footer 21 Hình 10.Giao diện trang Sign Up 21 Hình 11.Giao diện Trang Login 22 Hình 12.Giao diện Category .22 Hình 13.Giao diện movie theo category Action 23 Hình 14 Giao diện movie theo category horor 23 Hình 15 Giao diện movie theo category Animation 24 Hình 16 Giao diện movie theo category Drama 24 Hình 17.Giao diện movie theo category Romance 25 Hình 18.Giao diện danh sách movie 25 Hình 19.Giao diện trang chi tiết 26 Hình 20.Giao diện phần trailer movie 26 DANH MỤC BẢNG BIỂU v Bảng 1.CHECK LIST CỦA BÁO CÁO .25 vi DANH MỤC CÁC TỪ VIẾT TẮT FE : Front end API : Application Programming Interface JS : JavaScript HTML : HyperText Markup Language CSS : Cascading Style Sheet SCSS : Sassy Cascading Style Sheet … vii LỜI MỞ ĐẦU Lý chọn đề tài: Ngày nay, sống xã hội đại với công nghệ ngày phát triển ứng dụng cơng nghệ thơng tin tự động hố xem yếu tố mang tính định lĩnh vực hoạt động đời sống Nó đóng vai trị quan trọng tạo bước đột phá mạnh mẽ Là phần công nghệ thông tin, công nghệ web có phát triển mạnh mẽ phổ biến nhanh lợi ích mà mang lại cho cộng đồng lớn Hiện có nhu cầu giải trí , xem phim ngày phổ biến ngành cơng nghiệp giải trí trực tuyến, đặc biệt xem phim nội dung trực tuyến, phát triển nhanh chóng Dịch vụ xem phim trực tuyến trở thành phần thiếu sống hàng ngày người dùng internet Bằng cách tạo giao diện hấp dẫn tiện lợi, yếu tố quan trọng để tạo trải nghiệm người dùng tốt Việc xây dựng giao diện website xem phim đẹp mắt , dễ sử dụng tương thích với nhiều loại thiết bị giúp người dễ dàng tìm kiếm phim u thích cách nhanh chóng thuận tiện Bạn thu hút nhiều người dùng tiềm tạo doanh thu từ quảng cáo, đăng ký người dùng việc xây dựng giao diện website cho dịch vụ xem phim trực tuyến mang lại tiềm thị trường kinh doanh lớn Mục tiêu đề tài Mục tiêu cho đề tài xây dựng website xem phim trực tuyến cung cấp cho người dùng tảng thuận tiện trải nghiệm tốt để xem phim, chương trình truyền hình nội dung giải trí khác trực tuyến - Có giao diện đẹp mắt , thân thiện với người dùng Cung cấp lựa chọn đa dạng: Một website xem phim trực tuyến nên cung cấp thư viện phong phú đa dạng phim từ nhiều thể loại khác nhau, bao gồm phim hành động, phiêu lưu, tình cảm, hài hước, kinh dị, hoạt hình, nhiều thể loại khác Điều giúp người dùng có nhiều lựa chọn để thỏa mãn sở thích nhu cầu giải trí - Ứng dụng cơng nghệ thơng tin vào để xây dựng website xem phim trực tuyến Nhiệm vụ đề tài viii Nhiệm vụ đề tài xây dựng giao diện website xem phim trực tuyến tạo giao diện web hoạt động hiệu quả, hấp dẫn tiện lợi cho người dùng để họ xem phim trực tuyến cách dễ dàng thoải mái - Tạo giao diện người dùng hấp dẫn thân thiện với người dùng Điều bao gồm thiết kế trang chủ, trang danh sách phim, trang chi tiết phim, trang khác liên quan tìm kiếm, danh mục thể loại, tài khoản người dùng - Cung cấp chức tìm kiếm để người dùng dễ dàng tìm kiếm phim theo tiêu đề, thể loại, diễn viên, từ khóa khác lưu trữ thơng tin phim, bao gồm tiêu đề, mơ tả, hình ảnh, thể loại, diễn viên, đạo diễn, thông tin khác - Cho phép người dùng đăng ký tài khoản đăng nhập để lưu trữ lịch sử xem phim, đánh giá bình luận phim Phương pháp nghiên cứu - Nghiên cứu lý thuyết, áp dụng kiến thức học để thiết kế hệ thống cách hiệu tối ưu - Khảo sát thực tế từ người xem để đánh giá hệ thống mà người dùng mong muốn - Hướng dẫn mentor - Xây dựng chương trình theo mục tiêu đặt thiết kế hệ thống cho phù hợp Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu  Xây dựng website hướng đến đối tượng người dùng người thích xem phim tìm hiểu phim ● Phạm vi nghiên cứu Nghiên cứu lập trình giao diện cho website xem phim Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận hướng phát triển ix