Xây dựng website xem phim trực tuyến

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE XEM PHIM TRỰC TUYẾN GVHD: ThS LÊ THỊ MINH CHÂU SVTH: PHẠM THANH TUẤN TRẦN VĂN TUẤN SKL009625 Tp Hồ Chí Minh, tháng 06 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHĨA LUẬN TỐT NGHIỆP Xây dựng Website xem phim trực tuyến Sinh viên thực hiện: Phạm Thanh Tuấn 16110246 Trần Văn Tuấn 16110247 Giảng viên hướng dẫn: ThS.Lê Thị Minh Châu Thành phố Hồ Chí Minh, tháng 06 / 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT CỘNG HỊA XÃ HỘI CHỦ NGHĨA TP HỒ CHÍ MINH KHOA ĐT CHẤT LƯỢNG CAO ⎯⎯⎯⎯⎯⎯⎯⎯⎯ VIỆT NAM Độc lập – Tự – Hạnh phúc ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP Họ tên SV: Phạm Thanh Tuấn MSSV: 16110246 Họ tên SV: Trần Văn Tuấn MSSV: 16110247 Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng Website xem phim trực tuyến Các số liệu, tài liệu ban đầu: Xây dựng Nội dung thực đề tài: Xây dựng Website xem phim trực tuyến Đề tài phát triển mới, nhiệm vụ cụ thể khóa luận tốt nghiệp sau: - Xây dựng tính cho website như: Cho người dùng: o Đăng kí o Đăng nhập o Đăng xuất o Đổi mật o Xem trang người dùng o Cập nhật thông tin người dùng o Lưu phim vào danh sách xem sau o Xem trang chủ o Xem trước nội dung phim o Xem chi tiết phim o Xem phim o Xem danh mục phim o Sắp xếp phim theo thể loại o Xem thông tin diễn viên o Tìm kiếm phim o Bình luận phim o Like/ dislike phim Cho người quản lý: o Đăng nhập o Đăng xuất o Xem trang chủ o Quản lý bình luận: xóa bình luận o Quản lý người dùng: Xem trang quản lý người dùng, thêm, xóa chỉnh sửa người dùng o Quản lý danh sách phim: Xem trang quản lý danh sách phim, thêm, xóa chỉnh sửa danh sách phim o Quản lý phim: Xem trang quản lý phim, thêm, xóa chỉnh sửa phim o Quản lý diễn viên: Xem trang quản lý diễn viên, thêm, xóa chỉnh sửa diễn viên Thời gian thực hiện: Bắt đầu từ 07/03/2022 đến 18/06/2022 TP.HCM, ngày… tháng…năm… TRƯỞNG KHOA ĐT CHẤT LƯỢNG CAO (Ký ghi rõ họ tên) GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên : Phạm Thanh Tuấn MSSV 1: 16110246 Họ tên Sinh viên : Trần Văn Tuấn MSSV 2: 16110247 Ngành: Công nghệ Thông tin Tên đề tài : Xây dựng Website xem phim trực tuyến Họ tên Giáo viên hướng dẫn : ThS.Lê Thị Minh Châu NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm : Khuyết điểm : Đề nghị cho bảo vệ hay không ? Đánh giá loại : Điểm : ( Bằng chữ: ) Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 2022 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên : Phạm Thanh Tuấn MSSV 1: 16110246 Họ tên Sinh viên : Trần Văn Tuấn MSSV 2: 16110247 Ngành: Công nghệ Thông tin Tên đề tài : Xây dựng Website xem phim trực tuyến Họ tên Giáo viên hướng dẫn : ThS.Lê Thị Minh Châu NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm : Khuyết điểm : Đề nghị cho bảo vệ hay không ? Đánh giá loại : Điểm : ( Bằng chữ: ) Tp Hồ Chí Minh, ngày tháng Giáo viên phản biện (Ký & ghi rõ họ tên) năm 2022 LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn đến cô Lê Thị Minh Châu tận tình hướng dẫn, giúp đỡ hỗ trợ suốt q trình làm khóa luận tốt nghiệp Chúng em xin tri ân tất thầy cô dạy dỗ, truyền kiến thức đầy quý báu cho chúng em Với lượng thời gian kiến thức có hạn thân chúng em, khóa luận khơng tránh khỏi có sai xót Chúng em mong nhận đóng góp cảm thơng từ q thầy Một lần chúng em xin chân thành cảm ơn! TP Hồ Chí Minh, tháng năm 2022 Nhóm sinh viên thực Phạm Thanh Tuấn Trần Văn Tuấn MỤC LỤC GIỚI THIỆU 1.1 Tính cấp thiết đề tài .1 1.2 Mục tiêu đề tài .1 NỘI DUNG .2 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan React 1.1.1 Giới thiệu React 1.1.2 Các khái niệm React 1.1.2.1 Virtual dom 1.1.2.2 Component 1.1.2.3 Các dạng liệu React 1.1.2.4 Vòng đời React 1.2 Tổng quan Nodejs 1.2.1 Giới thiệu 1.2.2 Các đặc tính Nodejs 1.3 Tổng quan Express 1.3.1 Giới thiệu 1.3.2 Cấu trúc 1.4 Tổng quan MongoDB 1.4.1 Giới thiệu 1.4.2 Đặc điểm CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 Khảo sát trạng .9 2.1.1 Trang https://danet.vn/go/avod 2.1.2 Trang https://iflix.com/ 2.1.3 Trang http://cliptv.vn/ 10 2.1.4 Trang http://fptplay.vn/ 11 2.1.5 Trang http://vieon.vn/ 13 2.1.6 Kết luận khảo sát 14 2.2 Xác định yêu cầu 14 2.2.1 Yêu cầu chức 14 2.2.1.1 Yêu cầu chức người ghé thăm 14 2.2.1.2 Yêu cầu chức người dùng 14 2.2.1.3 Yêu cầu chức người quản trị 15 2.2.2 Yêu cầu phi chức 15 CHƯƠNG 3: ĐẶC TẢ CHỨC NĂNG 16 3.1 Định nghĩa Use Case 16 3.1.1 Mô tả actor 16 3.2 Usercase Diagram 16 3.3 Mô tả chi tiết Use case .19 3.3.1 Đăng ký 19 3.3.2 Đăng nhập 21 3.3.3 Đăng xuất 22 3.3.4 Mô tả 23 3.3.5 Xem phim 24 3.3.6 Thông tin diễn viên 25 3.3.7 Cập nhật thông tin 26 3.3.8 Danh sách phim xem sau 27 3.3.9 Tìm kiếm phim 28 3.3.10 Danh mục danh sách phim 29 3.3.11 Chọn thể loại 30 3.3.12 Biểu đồ 31 3.3.13 Quản lý bình luận 32 3.3.14 Quản lý User 33 3.3.15 Quản lý phim 34 3.3.16 Quản lý diễn viên 35 3.3.17 Quản lý danh mục 36 CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG 38 4.1 Thiết kế sở liệu .38 4.1.1 Lược đồ sở liệu 38 4.1.2 Mô tả sở liệu chi tiết 38 4.1.2.1 Collection user 38 4.1.2.2 Collection list 39 4.1.2.3 Collection actor 40 4.1.2.4 Collection movie 40 4.1.2.5 Collection comment 42 Hình 5.48 Sequence register 5.2.3 Xem chi tiết phim Hình 5.49 Xem chi tiết phim 83 5.2.4 Thêm phim vào danh sách xem sau Hình 5.50 Thêm phim vào danh sách xem sau 5.2.5 Xem tiểu sử diễn viên 84 Hình 5.51 Xem tiểu sử diễn viên 85 CHƯƠNG 6: CÀI ĐẶT VÀ KIỂM THỬ 6.1 Cài đặt ứng dụng Clone download project từ link github: https://github.com/0902535050/cinema 6.1.1 Thư viện môi trường phát triển Bảng 6.1 Danh sách thử viện môi trường phát triển cần thiết sản phẩm STT Library/Software Download URL Npm Download | Node.js (nodejs.org) MongoDB https://docs.mongodb.com/manual/administration/installcommunity/ Visual studio code https://code.visualstudio.com/docs?dv=win 6.1.1.2 Lệnh cài đặt khởi chạy chương trình Bảng 6.2 Danh sách lệnh cài đặt chạy chương trình STT Lệnh Mơ tả npm install -g create-react-app Cài đặt ReactJS npm install Cài đặt node_modules yarn start npm start Khởi chạy chương trình front end, back end 6.1.1.3 Các bước cài đặt Công cụ để chạy project: Visual studio code 86 Bước 1: Clone download project từ link github: https://github.com/0902535050/cinema Bước 2: Một thư mục có tên “cinema” chứa thư mục như: “admin”, “api” “client” xuất sau clone project từ github giải nén file đính kèm báo cáo Tiến hành vào thư mục “cinema” Bước 3: Sau vào thư mục “cinema” (như hình) Hình 6.1 Các thư mục “cinema” Bước 4: Mở thư mục “api” Visual studio code, chọn termial taskbar Bước 5: Mở thư mục “client” Visual Studio Code, chọn termial taskbar Bước 6: Mở thư mục “admin” Visual Studio Code, chọn termial taskbar Bước 7: Chạy lệnh “npm install” để cập nhật thư viện, package thiếu máy mà project cần Bước 8: Sau lệnh npm install kết thúc, gõ lệnh “yarn start” nhấn enter Bước 9: Sau compile xong, url project hiển thị trình duyệt web Hoặc chạy tay cách mở trình duyệt web nhập url: • Admin: http://localhost:4000 • Client: http://localhost:3000 6.2 Kiểm thử ứng dụng 87 Sau thực xong việc kiểm thử nhóm xin trình bày số test case tiêu biểu rút kết sau 6.2.1 Chức đăng nhập Bảng 6.3 Kiểm thử chức đăng nhập ID Test Case Test steps Expected Output Result Description SignIn_01 SignIn_02 SignIn_03 SignIn_04 Kiểm tra việc đăng Nhập tên đăng nhập chưa có nhập mật chưa đăng tài khoản kí hệ thống Nhấn nút “Đăng nhập” Hiện thông báo Pass “Đăng nhập thất bại Email mật nhập chưa vui lòng nhập lại!!” Nhập “email” với tài khoản đăng ký Nhập sai “mật khẩu” Nhấn nút “Đăng nhập” Hiện thông báo Pass “Đăng nhập thất bại Email mật nhập chưa vui lòng nhập lại!!” Kiểm tra việc đăng Nhập “email” “mật khẩu” nhập tài với tài khoản google khoản google Nhấn nút “đăng nhập” Hiện thông báo Pass “Đăng nhập thất bại Email mật nhập chưa vui lòng nhập lại!!” Kiểm tra việc đăng Nhập “email” “mật khẩu” Hiện thông báo Pass Kiểm tra việc đăng nhập có tài khoản sai mật 88 SignIn_05 signIn_06 nhập tài với tài khoản khoản đăng đăng ký ký Nhấn nút “Đăng nhập” “Đăng nhập thành công! Xin chào bạn” Kiểm tra việc đăng Nhập “email” “mật khẩu” nhập tài với tài khoản đăng ký khoản đăng chưa cấp ký chưa cấp quyền quản trị viên quyền quản trị viên Nhấn nút “Đăng nhập” Hiện thông báo Pass “Đăng nhập thất bại! Email mật sai xin vui lòng nhập lại” Kiểm tra việc đăng Nhập “email” Hiện thông báo Pass “mật khẩu” “Đăng nhập thành nhập tài với tài khoản đăng ký công” khoản đăng cấp quyền quản ký cấp trị viên quyền quản trị viên Nhấn nút “Đăng nhập” 6.2.2 Chức đăng ký Bảng 6.4 Kiểm thử chức đăng ký ID Test Case Test steps Expected Output Result Description REG_01 Kiểm tra việc đăng Thực đăng Hiện thông báo Pass nhập chưa có ký tài khoản “email tài khoản username có 89 tồn tài email người dùng” tồn REG_02 REG_03 Kiểm tra đăng ký Thực đăng Hiện thông báo Pass với email, tên tài ký email, tên khung nhập “Không bỏ khoản, mật tài khoản, mật trống” rỗng rỗng Thực đăng Hiện thông báo Pass ký nhập email khung nhập với email không email “Email bạn không hợp lệ nhập chưa vui hợp lệ lòng nhập lại!” Kiểm tra đăng ký REG_04 Thực đăng Hiện thông báo Pass Kiểm tra đăng ký ký nhập mật khung nhập với mật mật “Mật không hợp lệ không hợp lệ tối thiểu kí tự bao gồm số!” REG_05 Hực đăng ký Kiểm tra đăng ký email, username, email, username, mật hợp lệ mật hợp lệ Hiện thông báo Pass “đăng ký thành công” chuyển tới trang đăng nhập 6.2.3 Chức cập nhật thông tin cá nhân Bảng 6.5 Kiểm thử chức cập nhật thông tin cá nhân ID Test Case Test steps Expected Output Result 90 Description UPROF_01 Kiểm tra việc cập nhật thông tin cá nhân: tên hiển thị, tên đầy đủ, quốc tịch để rỗng UPROF_02 Thực cập nhật thông tin cá nhân: Tên hiển thị, tên đầy đủ, quốc tịch để rỗng Hiện thông báo Pass khung nhập “không bỏ trống!” Thực việc Chuyển đến Pass cập nhật thông tin hình thơng nhật thơng tin cá báo “cập nhật thông cá nhân nhập hợp tin thành công” nhân nhập hợp lệ lệ Kiểm tra việc cập 6.2.4 Chức tìm kiếm Bảng 6.6 Chức tìm kiếm ID Test Case Test steps Expected Output Result Description SEA_01 SEA_02 SEA_03 Kiểm tra việc tìm Thực việc để search rỗng kiếm để rỗng Hiện khung tìm Pass kiếm rỗng việc Hiện thông báo Pass nhập không hợp lệ “Khơng có phim cần kiếm khơng hợp lệ tìm” hợp lệ Kiểm tra việc tìm Thực việc Hiện danh sách Pass kiếm tên nhập tên phim có trung tên có phần giới phim bẳng tiếng phim tiếng thiệu có từ khóa anh anh giống Kiểm tra việc tìm Thực 91 việc Hiện danh sách Pass kiếm tên nhập tên phim có trùng tên có phần giới phim bẳng tiếng phim tiếng thiệu có từ khóa việt việt giống SEA_04 Kiểm tra việc tìm Thực SEA_05 Kiểm tra việc tìm Thực việc tìm Hiện danh sách pass kiếm theo kiếm theo phim có từ khóa trùng với nội dung “thể loại”, “đang “thể loại”, “đang phát”, “độ tuổi”, phát”, “độ tuổi”, “năm”, “IMDb”, “năm”, “IMDb”, “thời lượng”, “nhà “thời lượng”, “nhà sản xuất”, “phim sản xuất”, “phim trường” hợp lệ trường” hợp lệ 92 CHƯƠNG 7: KẾT LUẬN 7.1 Cơng việc thực Nhóm hồn thành chức đề Về phía người dùng: o Đăng kí o Đăng nhập o Đăng xuất o Đổi mật o Xem trang người dùng o Cập nhật thông tin người dùng o Lưu phim vào danh sách xem sau o Xem trang chủ o Xem trước nội dung phim o Xem chi tiết phim o Xem phim o Xem danh mục phim o Sắp xếp phim theo thể loại o Xem thông tin diễn viên o Tìm kiếm phim o Bình luận phim o Like/ dislike phim Về phía người quản trị: o Đăng nhập o Đăng xuất o Xem trang chủ o Quản lý bình luận: xóa bình luận o Quản lý người dùng: Xem trang quản lý người dùng, thêm, xóa chỉnh sửa 93 người dùng o Quản lý danh sách phim: Xem trang quản lý danh sách phim, thêm, xóa chỉnh sửa danh sách phim o Quản lý phim: Xem trang quản lý phim, thêm, xóa chỉnh sửa phim o Quản lý diễn viên: Xem trang quản lý diễn viên, thêm, xóa chỉnh sửa diễn viên 7.2 Chức chưa hồn thành Về phía người dùng: o Chưa hỗ trợ người dùng đăng kí gói vip để nâng cao trải nghiệm người dùng o Chưa hỗ trợ chia sẻ phim lên mạng xã hội facebook o Chưa hỗ trợ đăng nhập hình thức khác google, facebook o Chưa responsive css cho người dùng điện thoại o Chưa hiển thị số lượt xem o Chưa hiển thị tiến độ hoàn thành phim 7.3 Ưu điểm Sau thời gian tìm hiểu thực đề tài nhóm, trang web có ưu điểm sau Về phía người dùng: o Dễ dàng thao tác sử dụng, tạo cho người dùng có trải nghiệm tốt hình thức như bố cục giao diện sử dụng website o Người dùng trải nghiệm xem phim o Website xây dựng nhằm hỗ trợ tìm kiếm phim người dùng ưa thích nhanh chóng qua tag, diễn viên, thể loại hay quốc gia o Triển khai nhiều nên tảng trình duyệt web Về phía người quản lý: 94 o Sử dụng công nghệ website mới, front-end back-end phân biệt rõ ràng o Website có khả bảo trì nâng cấp o Quản trị viên quản lý liệu có liên quan tới danh mục 7.4 Nhược điểm Do thời gian lực có hạn nên đề tài nhóm cịn nhiều thiếu sót, hạn chế Cụ thể sau: o Dữ liệu phim thiếu sót, chưa đa dạng o Một số chức thao tác chưa mượt, chưa tối ưu o Một số trang sơ sài chưa đầu tư thiết kế giao diện nhiều 7.5 Hướng phát triển o Tích hợp AI việc lọc tự động bình luận có ngơn từ khiếm nhã phía người quản trị o Xử lí đa luồng website có lưu lượng liệu lớn website xem phim trực tuyến o Triển khai lên ứng dụng mobile app 95 TÀI LIỆU THAM KHẢO [1] https://viblo.asia/p/vong-doi-cua-mot-react-component-RQqKLMRzZ7z [2] https://freetuts.net/nodejs-la-gi-584.html [3] https://viblo.asia/p/phan-1-tim-hieu-express-js-framework-Qbq5Qq7m5D8 [4] https://jobs.hybrid-technologies.vn/blog/mongodb-la-gi/ [5] https://www.duolingo.com/ [6] https://www.nhk.or.jp/ [7] http://mina.mazii.net/ 96