Đồ án tốt nghiệp: Xây dựng website xem phim của Lý Quang Minh & Nguyễn Triều Dương

Đồ án tốt nghiệp xây dựng website xem phim trực tuyến đầy đủ. Báo cáo chi tiết các bước khảo sát, thiết kế, lập trình bằng ReactJS và Java Spring.

• Tác giả: Lý Quang Minh
• Người hướng dẫn: Ths. Mai Tuấn Khôi
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Website Xem Phim Trực Tuyến
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2016 - 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về đồ án tốt nghiệp website xem phim trực tuyến

Đồ án tốt nghiệp website xem phim trực tuyến là một dự án học tập toàn diện tại Trường Đại học Sư phạm Kỹ thuật TP.HCM, được thực hiện bởi các sinh viên ngành Công nghệ Thông tin. Đề tài này tập trung vào xây dựng nền tảng streaming phim hiện đại, kết hợp công nghệ ReactJS cho frontend và Java Core cho backend. Mục tiêu chính là tạo ra một website xem phim trực tuyến hoàn chỉnh với các tính năng quản lý phim, bình luận tương tác và trải nghiệm người dùng mượt mà. Thời gian thực hiện kéo dài 15 tuần, từ tháng 3 đến tháng 7 năm 2020, với sự hướng dẫn của giảng viên chuyên môn. Dự án này đạt được các kết quả thiết thực trong việc ứng dụng các công nghệ web hiện đại vào thực tế.

1.1. Tính cấp thiết và mục tiêu của đề tài

Nhu cầu xem phim trực tuyến ngày càng tăng cao, tạo ra cơ hội phát triển website streaming phim. Mục tiêu của đồ án này là thiết kế một nền tảng đáp ứng nhu cầu người dùng hiện đại với giao diện thân thiện, tốc độ tải nhanh và tính năng tìm kiếm hiệu quả. Dự án cũng nhằm giúp sinh viên nắm vững React.js, Java Spring Framework và các công nghệ backend-frontend tiên tiến, từ đó chuẩn bị kỹ năng cho công việc thực tế.

1.2. Phạm vi và đối tượng nghiên cứu

Đề tài bao quát thiết kế, phát triển và kiểm thử website xem phim. Đối tượng sử dụng bao gồm Guest (khách), Member (thành viên đăng ký) và Admin (quản trị viên). Mỗi nhóm người dùng có quyền hạn khác nhau trong hệ thống, từ xem phim miễn phí đến quản lý nội dung phim toàn bộ. Phạm vi nghiên cứu tập trung vào công nghệ JavaScript, React.js, Redux-saga, Java, Spring Framework, MySQL và RESTful API.

II. Công nghệ và kiến trúc hệ thống

Công nghệ sử dụng trong đồ án website xem phim trực tuyến bao gồm một bộ stack hiện đại. Phía frontend sử dụng ReactJS - thư viện JavaScript mạnh mẽ cho xây dựng giao diện động, Redux-saga để quản lý trạng thái ứng dụng, và JSON Web Token (JWT) để xác thực người dùng. Phía backend được xây dựng trên Java Core với Spring Framework - nền tảng phổ biến trong phát triển ứng dụng enterprise, Spring Security cho bảo mật, Spring JPA để truy vấn cơ sở dữ liệu, và RESTful API CRUD để giao tiếp client-server. Cơ sở dữ liệu MySQL được sử dụng để lưu trữ thông tin phim, người dùng, bình luận và metadata hệ thống. Kiến trúc này đảm bảo tính mở rộng, bảo mật cao và hiệu năng tối ưu.

2.1. Frontend ReactJS và Redux saga

ReactJS là thư viện JavaScript cho xây dựng giao diện người dùng tương tác. Redux-saga quản lý các side effects phức tạp như gọi API, xác thực JWT. Kết hợp này cho phép website xem phim có giao diện mượt mà, responsive design thích ứng mọi thiết bị. Các component React được thiết kế tái sử dụng, giúp code dễ bảo trì, nâng cấp.

2.2. Backend Java Spring Framework

Java Spring Framework cung cấp nền tảng mạnh cho xây dựng API backend của website xem phim. Spring Security bảo vệ ứng dụng chống các cuộc tấn công. Spring JPA tương tác với MySQL, hỗ trợ CRUD operations hiệu quả. RESTful API chuẩn hoá cách frontend và backend giao tiếp, dễ mở rộng chức năng, tích hợp hệ thống bên ngoài.

2.3. Cơ sở dữ liệu MySQL

MySQL lưu trữ tất cả dữ liệu của hệ thống website xem phim trực tuyến: danh mục phim, thông tin người dùng, bình luận, lịch sử xem. Thiết kế CSDL chuẩn hóa, với các bảng phim, users, comments, ratings tối ưu hiệu năng truy vấn.

III. Thiết kế giao diện và chức năng chính

Giao diện website xem phim trực tuyến được thiết kế theo nguyên tắc UX/UI hiện đại, phân chia rõ ràng cho ba loại người dùng: Guest, Member, Admin. Các màn hình Guest cho phép khách lướt xem danh sách phim, tìm kiếm, xem trailer mà không cần đăng nhập. Màn hình Member cung cấp tính năng đăng ký/đăng nhập, bình luận phim, yêu thích, lịch sử xem phim. Màn hình Admin cho phép quản lý phim (thêm, sửa, xóa), duyệt bình luận, quản lý người dùng, xem thống kê. Các chức năng chính bao gồm tìm kiếm phim nâng cao theo thể loại, năm phát hành, đạo diễn; xem phim trực tuyến với chất lượng khác nhau; bình luận tương tác; hệ thống đánh giá sao; danh sách yêu thích cá nhân. Giao diện sử dụng bộ màu hợp lý, font chữ rõ, bố cục cân đối tạo trải nghiệm người dùng mượt mà.

3.1. Chức năng dành cho Guest Khách

Người dùng Guest có thể xem danh sách phim, tìm kiếm theo tên, thể loại, xem thông tin chi tiết phim như synopsis, cast, IMDb rating. Có thể xem trailer video, đọc bình luận của thành viên khác. Để xem phim trọn bộ, Guest cần đăng ký thành Member. Chức năng này không yêu cầu xác thực, cho phép khám phá nội dung tự do.

3.2. Chức năng dành cho Member Thành viên

Member được phép xem phim trực tuyến sau khi đăng nhập tài khoản. Có thể bình luận, đánh giá phim, theo dõi danh sách yêu thích cá nhân, lưu lịch sử xem. Hệ thống cho phép resume watch - tiếp tục xem từ vị trí dừng trước đó. Profile Member hiển thị thông tin cá nhân, danh sách phim đã xem, bình luận đã viết, giúp quản lý hoạt động cá nhân.

3.3. Chức năng dành cho Admin Quản trị viên

Admin kiểm soát toàn bộ nội dung: thêm, chỉnh sửa, xóa phim, quản lý thể loại, diễn viên, đạo diễn. Có thể duyệt, xóa bình luận vi phạm, quản lý tài khoản Member, xem thống kê lượng xem, tổng số người dùng hoạt động. Dashboard Admin cung cấp các biểu đồ, báo cáo giúp theo dõi hoạt động hệ thống.

IV. Quá trình phát triển và kiểm thử

Quá trình phát triển website xem phim trực tuyến kéo dài 15 tuần với kế hoạch rõ ràng từng giai đoạn. Tuần 1-2: khảo sát hiện trạng các website xem phim phổ biến (Phimmoi, Bilutv, Zing TV, Netflix, Motphim), xác định công nghệ cần dùng. Tuần 2-3: tìm hiểu React.js, Java Core, thiết kế Use Case Diagram. Tuần 4-6: mô hình hóa yêu cầu, thiết kế cơ sở dữ liệu MySQL, sơ đồ lớp UML. Tuần 7-14: lập trình giao diện và backend, xây dựng REST API, implement Spring Security, JWT authentication. Tuần 15: kiểm thử phần mềm toàn diện bao gồm unit test, integration test, kiểm thử user acceptance, phát hiện và sửa chữa lỗi. Quy trình kiểm thử bao gồm thiết kế test cases, chạy bộ kiểm thử tự động và thủ công, đảm bảo website hoạt động ổn định trước khi bàn giao.

4.1. Giai đoạn phân tích và thiết kế

Khảo sát hiện trạng các website xem phim hàng đầu giúp xác định các tiêu chí thiết kế tốt: giao diện trực quan, tốc độ tải nhanh, tính năng tìm kiếm mạnh, hệ thống bình luận. Từ đó lập Use Case Diagram mô tả các tương tác giữa người dùng và hệ thống. Thiết kế CSDL định nghĩa các bảng, quan hệ dữ liệu, đảm bảo tính toàn vẹn, hiệu năng truy vấn tối ưu.

4.2. Giai đoạn lập trình và triển khai

Sinh viên lập trình React component cho giao diện, viết Java Spring API cho backend, kết nối MySQL. Sử dụng JWT token xác thực người dùng bảo mật. Triển khai CRUD operations cho phim, bình luận, người dùng. Code được commit lên Git repository, theo dõi phiên bản, hỗ trợ hợp tác nhóm.

4.3. Giai đoạn kiểm thử và hoàn thiện

Kiểm thử phần mềm bao gồm unit test từng function, integration test các module liên quan, test API endpoint. Kiểm thử chức năng đảm bảo đăng nhập, xem phim, bình luận hoạt động đúng. Kiểm thử hiệu năng kiểm tra tốc độ tải, khả năng chịu tải. Sửa chữa lỗi, tối ưu code, chuẩn bị bàn giao sản phẩm.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG .1 KHẢO SÁT MỘT SỐ TRANG WEB .1 Phimmoi (http://www.2 Bilutv (https://www.3 Zing TV (https://tv.4 Netflix (https://www.5 Motphim (https://motphim.2 KẾT LUẬN VỀ NHỮNG TIÊU CHÍ WEBSITE CẦN ĐẠT ĐƯỢC .1 Những ưu điểm cần học .2 Những nhược điểm cần khắc phục. 23 CHƯƠNG 2: TIẾP NHẬN VÀ MÔ HÌNH HÓA YẾU CẦU .2 CHI TIẾT CÁC ACTOR .3 SƠ ĐỒ LUỒNG DỮ LIỆU VÀ CƠ SỞ DỮ LIỆU CÁC NGHIỆP VỤ .1 Các nghiệp vụ của Guest .2 Các nghiệp vụ của Member.3 Các nghiệp vụ của Member Vip .4 Các nghiệp vụ của Admin. 66 CHƯƠNG 3: THIẾT KẾ CƠ SỞ DỮ LIỆU .1 CƠ SỞ DỮ LIỆU CUỐI CÙNG .1 CƠ SỞ DỮ LIỆU .2 MÔ TẢ CƠ SỞ DỮ LIỆU. 89 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ .1 CÁC MÀN HÌNH GIAO DIỆN CỦA GUEST .1 MÀN HÌNH ĐĂNG NHẬP .2 MÀN HÌNH ĐĂNG KÝ TÀI KHOẢN.3 MÀN HÌNH TRANG CHỦ .4 MÀN HÌNH TÌM KIẾM .5 MÀN HÌNH CHI TIẾT PHIM .2 CÁC MÀN HÌNH GIAO DIỆN CỦA MEMBER .1 MÀN HÌNH XEM VÀ UPDATE VIP .3 CÁC MÀN HÌNH GIAO DIỆN CỦA ADMIN.1 MÀN HÌNH GIAO DIỆN ĐĂNG NHẬP ADMIN .2 MÀN HÌNH GIAO DIỆN QUẢN LÝ CHỦ ĐỀ PHIM .3 MÀN HÌNH GIAO DIỆN QUẢN LÝ PHIM .4 MÀN HÌNH GIAO DIỆN CHI TIẾT PHIM .5 MÀN HÌNH GIAO DIỆN QUẢN LÝ NGƯỜI DÙNG .6 MÀN HÌNH GIAO DIỆN QUẢN LÝ DIỄN VIÊN.

116 CHƯƠNG 5: LẬP TRÌNH .1 NGÔN NGỮ LẬP TRÌNH JAVASCRIPT, REACT.JS, REDUX-SAGA VÀ JSON WEB TOKEN (JWT) .4 JSON Web Token [9].2 NGÔN NGỮ LẬP TRÌNH JAVA, SPRING FRAMEWORK, RESTFULL API CRUD, SPRING SECURITY VÀ SPRING JPA .3 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MYSQL [15] .5 MÔ TẢ CHI TIẾT TỪNG LỚP .6 TRÍCH DẪN CÔNG NGHỆ HAY .1 ÁP DỤNG REDUX ĐỂ QUẢN LÝ STATE .2 ÁP DỤNG REDUX-SAGA ĐỂ XỬ LÝ BẤT ĐỒNG BỘ. 137 CHƯƠNG 6: KIỂM THỬ PHẦN MỀM .1 KẾ HOẠCH KIỂM THỬ VÀ QUY TRÌNH KIỂM THỬ .2 QUY TRÌNH THIẾT KẾ KIỂM THỬ .3 QUY TRÌNH CHẠY BỘ KIỂM THỬ. NHỮNG KẾT QUẢ ĐẠT ĐƯỢC. NHƯỢC ĐIỂM.

HƯỚNG PHÁT TRIỂN. 144 10 DANH MỤC HÌNH ẢNH Hình 1.1: Trang chủ của website phimmoi .2: Trang chủ của website bilutv .3: Trang chủ của website zing tv .4: Trang chủ của website netflix .5: Trang chủ của motphim.2: Biểu mẫu HomePage .3: Biểu mẫu Search.4: Biểu mẫu Register .5: Biểu mẫu Login .6: Biểu mẫu LsFilmsCatalog .7: Biểu mẫu DetailFilm.8: Biểu mẫu WatchFilm .9: Biểu mẫu Logout .10: Biểu mẫu Comment .11: Biểu mẫu FavoriteFilms.12: Biểu mẫu mẫu Update VIP .13: Biểu mẫu đổi chất lượng phim.14: Biểu mẫu-QLPhim .15: Biểu mẫu QLAds .16: Biểu mẫu thống kê .17: Biểu mẫu QL thành viên .18: Biểu mẫu QL danh mục phim .19: Biểu mẫu HomePage Admin .20: Biểu mẫu ChangePassword .21: Biểu mẫu quản lý bình luận .22: Sequence diagram của tìm phim .23: Sequence diagram của xem phim .24: Sequence diagram của xem phim theo danh mục .25: Sequence diagram của đăng nhập .26: Sequence diagram của quên mật khẩu .27: sequence diagram của thanh toán .28: Sequence diagram của thêm phim yêu thích .29: Sequence diagram của sửa phim .30: Sequence diagram của quản lý bình luận .31: Sequence diagram của xoá bình luận .1: Cơ sở dữ liệu .1: Thiết kế giao diện đăng nhập .2: Thiết kế xử lý giao diện đăng nhập .3: Thiết kế giao diện đăng ký .4: Xử lý giao diện đăng ký .5: Giao diện trang chủ .6: Xử lý giao diện trang chủ .7: Thiết kế giao diện danh tìm .8: Thiết kế xử lý tìm kiếm .9: Thiết kế giao diện chi tiết phim .10: Thiết kế xử lý chi tiết phim .11: Giao diện Member .12: Xử lý giao diện member .13: Giao diện đăng nhập Admin .14: Xử lý giao diện đăng nhập .15: Giao diện quản lý chủ đề phim .16: Xử lý giao diện quản lý chủ đề phim .17: Giao diện quản lý phim .18: Xử lý giao diện quản lý phim .19: Giao diện chi tiết phim .20: Xử lý giao diện chi tiết phim .21: Giao diện quản lý người dùng .22: Xử lý giao diện quản lý người dùng .23: Xử lý giao diện quản lý diễn viên .24: Xử lý giao diện quản lý diễn viên .1: Kiến trúc JPA .2: Class diagram của Entity .3: Class diagram của Service .5: Store và Reducer .6: Saga tổng để quản lý các saga của các chức năng khác .7: Ví dụ về generator function .9: Áp dụng redux và redux-saga vào project .2: Mẫu TestCase Cover.3: Mẫu TestCase chi tiết.4: Mẫu báo cáo của TestCase.5: Quy trình kiểm thử.6: Quy trình chạy các bộ kiểm thử. 142 DANH MỤC BẢNG BIỂU Bảng 2.1: Bảng nghiệp vụ của guest .2: Bảng quy định của guest .3: Bảng nghiệp vụ của member .4: Bảng quy định của member .5: Bảng nghiệp vụ của member vip .6: Bảng quy định của member vip .7: Bảng nghiệp vụ của admin .8: Bảng quy định của admin .1: Bảng mô tả dữ liệu của Movie .2: Bảng mô tả dữ liệu của Genre .3: Bảng mô tả dữ liệu của Genre_movie .4: Bảng mô tả dữ liệu của character .5: Bảng mô tả dữ liệu của Actor .6: Bảng mô tả dữ liệu của Source .7: Bảng mô tả dữ liệu của Favorite .8: Bảng mô tả dữ liệu của User.9: Bảng mô tả dữ liệu của Comment .10: Bảng mô tả dữ liệu của Review .11: Bảng mô tả dữ liệu của Episode .12: Bảng mô tả dữ liệu của User_roles .13: Bảng mô tả dữ liệu của Roles .1: Bảng mô tả màn hình đăng nhập .2: Bảng mô tả danh sách của xử lý đăng nhập .3: Bảng mô tả màn hình đăng ký.4: Bảng mô tả danh sách xử lý đăng ký.5: Bảng mô tả màn hình trang chủ .6: Bảng mô tả danh sách xử lý trang chủ .7: Bảng mô tả màn hình tìm kiếm .8: Bảng mô danh sách của xử lý của tìm kiếm .9: Bảng mô tả màn hình chi tiết phim .10: Bảng mô tả danh sách xử lý của màn hình chi tiết phim .11: Bảng mô tả màn hình Member .12: Bảng mô danh sách xử lý của màn hình Member .13: Bảng mô tả màn hình đăng nhập Admin .14: Bảng mô tả danh sách xử lý của màn hình đăng nhập .15: Bảng mô tả màn hình quản lý chủ đề phim .16: Bảng mô tả danh sách xử lý của màn hình quản lý chủ đề phim .17: Bảng mô tả màn hình quản lý phim .18: Bảng mô tả danh sách xử lý của màn hình quản lý phim .19: Giao diện chi tiết phim .20: Bảng mô tả danh sách xử lý của chi tiết phim .21: Bảng mô tả màn hình quản lý người dùng.22: Bảng mô tả danh sách xử lý của quản lý người dùng .23: Bảng mô tả màn hình quản lý diễn viên .24: Bảng mô tả danh sách xử lý của quản lý diễn viên .1: Attribute của class GenreEntity .2: Method của class GenreEntity .3: Attribute của class UserEntity .4: Attribute của class Comment .5: Attribute của Movie .6: Method của class Movie .7: Attribute của class EpisodeId .8: Attribute của class SourceEntity .9: Attribute của class CharacterEntity .10: Attribute của class ActorEntity .11: Attribute của class FavoriteEntity .12: Attribute của class EpisodeEntity .13: Attribute của class ReviewEntity .14: Attribute của class RoleEntity .15: Attribute của class ActorService .16: Method của class ActorService .17: Attribute của class CommentService .18: Method của class CommentService .19: Attribute của class GenreService .20: Method của class GenreService .21: Attribute của class MovieService .22: Method của class MovieService .23: Attribute của class FavoriteService .24: Method của class FavoriteService .25: Attribute của class UserService .26: Method của class UserService .27: Attribute của class CharacterService .28: Method của class CharacterService .29: Attribute của class EpisodeService .30: Method của class EpisodeService .31: Attribute của class ReviewService.32: Method của class ReviewService .33: Attribute của class SourceService .34: Method của class SourceService. 135 15 PHẦN MỞ ĐẦU 1.

TÍNH CẤP THIẾT CỦA ĐỀ TÀI Tốc độ phát triển của xã hội ngày càng nhanh. Công nghệ ngày càng phát triển khiến con người ta ngày càng bận rộn. Tuy nhiên nhu cầu giải trí của con người là 1 nhu cầu cần thiết và xem phim cũng là 1 trong số các nhu cầu về giải trí của con người. Tạo điều kiện cho những người bận rộn không có thời gian để để rạp xem phim nhưng vẫn muốn tận dụng thời gian nghỉ ngơi của mình để xem phim giải trí.

Để nắm bắt được xu hướng và tiếp cận vấn đề đó, nhóm quyết định chọn đề tài “Xây dựng website xem phim trực tuyến” làm đề tài nghiên cứu và đồng thời ứng dụng thực tế. MỤC TIÊU CỦA ĐỀ TÀI - Đề tài ra đời với mục đích giúp sinh viên tổng hợp lại các kiến thức đã tiếp thu được trong quá trình, đồng thời có cái nhìn tổng quan về ngành lập trình web - Là cơ hội để sinh viên tìm hiểu các công nghệ mới nhất và ứng dụng chúng vào thưc tiễn - Xây dựng website giải trí cho mọi người bằng hình thức xem phim trực tuyến. Cụ thể có các chức năng sau: o Đăng nhập/ đăng kí với email, password hoặc Facebook, Google, o Xem phim. o Bình luận o Tìm kiếm phim.

o Quản lý danh mục phim, quản lý phim, quản lý người dùng. o Xem hồ sơ cá nhân và nâng cấp VIP. o Có đám mây để lưu trữ phim 3. Đối tượng và phạm vi nghiên cứu Đề tài này phù hợp với tất cả mọi người với mọi độ tuổi, mọi trình độ học vấn, mọi ngành nghề,.

đang có nhu cầu cải thiện vốn từ vựng của mình. Kết quả dự kiến đạt được 16 - Xây dựng được website học tiếng Anh theo dạng flashcard sử dụng công nghệ ReactJS và Java Core. - Website phải có 2 mục cho người dùng sử dụng và admin để quản lý tất cả các dữ liệu của người dùng. Phương pháp nghiên cứu - Phương pháp thực nghiệm khoa học.

- Phương pháp phân tích và tổng hợp. Bố cục báo cáo Báo cáo dự kiến gồm 3 phần và 6 chương: - Phần mở đầu - Phần nội dung o Chương 1: Khảo sát hiện trạng o Chương 2: Tiếp nhận và mô hình hóa yêu cầu o Chương 3: Thiết kế cơ sở dữ liệu o Chương 4: Thiết kế giao diện và xử lý o Chương 5: Lập trình o Chương 6: Kiểm thử phần mềm - Phần kết luận 17 PHẦN NỘI DUNG CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG 1.1 KHẢO SÁT MỘT SỐ TRANG WEB 1.1 Phimmoi (http://www.1: Trang chủ của website phimmoi  Ưu điểm:  Giao diện thân thiện với người dùng  Chia các thể loại phim thành từng mục riêng  Có hệ thống đăng ký và đăng nhập  Có bảng lưu các phim đã được đánh dấu  Có thanh tìm kiếm  Có bộ lọc để người dùng tìm phim theo sở thích của mình dễ dàng hơn  Có ghi chú gõ ràng từng loại phim, các tập phim  Có bảng đánh giá chất lượng phim  Nhược điểm:  Quảng cáo khi xem phim quá nhiều  Link phim thường chết  Chất lượng phim không cao 18 1.2 Bilutv (https://www.