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

Đề tài được phát triển mới, nhiệm vụ cụ thể của khóa luận tốt nghiệp như sau: - Xây dựng các tính năng cho website như: Cho người dùng: o Đăng kí.. Các đối tượng màn hình danh sách xem s

Tính cấp thiết của đề tài

Trong thời đại công nghệ thông tin phát triển mạnh mẽ và tình hình dịch Covid-19 toàn cầu, giải trí tại nhà trở thành nhu cầu thiết yếu Điện ảnh là thú vui tiêu khiển không thể thiếu đối với mọi người, bất kể tuổi tác Tuy nhiên, việc giải trí qua màn ảnh nhỏ tivi bị hạn chế về khung giờ phát sóng, thể loại và phim có thể xem được Vì vậy, các trang xem phim trực tuyến trở thành lựa chọn tuyệt vời để đáp ứng nhu cầu giải trí không giới hạn Việc xây dựng một website xem phim trực tuyến là hợp lý, đáp ứng nhu cầu giải trí của mọi người và mang lại sự tiện lợi, cho phép xem phim ở bất kỳ đâu chỉ với kết nối wifi/4g và một thiết bị di động hoặc laptop.

Mục tiêu của đề tài

Xây dựng website xem phim trực tuyến giúp người dùng tiếp cận điện ảnh một cách toàn diện và không giới hạn, nâng cao trải nghiệm xem phim Với đa dạng các thể loại phim từ nhiều quốc gia, website đáp ứng sở thích và nhu cầu giải trí của người xem Ngoài ra, website còn cung cấp các tính năng hỗ trợ người dùng, bao gồm cả việc đăng ký mua các gói hỗ trợ để xem phim với độ phân giải tốt hơn, tải phim về máy và đánh dấu lại những bộ phim yêu thích.

CƠ SỞ LÝ THUYẾT

Tổng quan React

React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, giúp tạo ra các ứng dụng web nhanh hơn, hấp dẫn hơn và hiệu quả hơn với khối lượng mã nguồn tối thiểu, mang lại trải nghiệm người dùng tốt hơn và tăng cường khả năng phát triển ứng dụng web.

Sức mạnh của ReactJS nằm ở khả năng chia nhỏ giao diện web thành các thành phần riêng biệt, giúp các nhà phát triển có thể tập trung vào từng phần đơn giản hơn thay vì phải xử lý toàn bộ ứng dụng web Điều này cho phép họ quản lý và tùy chỉnh giao diện người dùng phức tạp một cách dễ dàng hơn Ngoài ra, ReactJS còn có thể kết hợp với các thư viện JavaScript hoặc framework khác như Angular hoặc MVC, mở rộng khả năng phát triển ứng dụng web linh hoạt và hiệu quả.

1.1.2 Các khái niệm cơ bản về React

Một object Javascript chứa đầy đủ thông tin cần thiết để tạo ra một DOM Khi dữ liệu thay đổi, nó sẽ tính toán sự thay đổi giữa object và cây DOM thực tế, giúp tối ưu hóa quá trình re-render cây DOM.

React được xây dựng bằng các component, các component nhỏ sẽ được sử dụng, kết hợp với nhau tạo ra một giao diện cụ thể

Việc tái sử dụng component là một trong những lợi ích quan trọng của lập trình hướng đối tượng, cho phép chúng ta sử dụng lại một component ở nhiều nơi khác nhau trong ứng dụng với các trạng thái hoặc thuộc tính khác nhau Điều này giúp giảm thiểu thời gian và công sức phát triển, đồng thời tăng tính linh hoạt và khả năng tái sử dụng của mã nguồn Hơn nữa, một component cũng có thể chứa các component nhỏ hơn, tạo thành một cấu trúc phân cấp và giúp quản lý mã nguồn một cách hiệu quả hơn.

Trong các component của React, hàm render đóng vai trò quan trọng nhất, chịu trách nhiệm tạo ra thẻ HTML và chứng tỏ khả năng xử lý thông qua công nghệ Virtual DOM.

DOM Mọi thay đổi của dữ liệu ở bất cứ thời điểm nào đều cũng sẽ được Virtual- DOM xử lý và update ngay tức thì

1.1.2.3 Các dạng dữ liệu cơ bản của React

React có hai dạng dữ liệu là Prop và State, hai dạng này tương đối khó phân biệt nên cần hiểu rõ mục đích sử dụng của từng dạng:

State là dữ liệu cục bộ được kiểm soát bởi component, chỉ có thể thay đổi trong chính component đó và không thể được truy cập hoặc sửa đổi bởi các component khác.

Props là thì không bị kiểm soát bởi component Ngược với State thì Prop lại có thể được sử dụng và thay đổi thông qua component khác

Hình 1.1 Vòng đời của React.

Constructor là phương thức được gọi khi một thể hiện của component được tạo ra, cho phép khởi tạo state cho component và "bind" các hàm của component Khi cài đặt hàm này, cần khai báo một tham số props và gọi super(props) đầu tiên để đảm bảo hoạt động chính xác.

4 o Nếu không làm gì thì không phải cài đặt hàm này

• componentWillMount() o Được gọi trước khi render() o Dùng để đăng ký các sự kiện toàn cục o Dựa vào các props để tính toán và set lại state

Hàm render() là một thành phần bắt buộc trong component, có chức năng trả về một đối tượng JSX để hiển thị hoặc trả về null/false nếu không muốn hiển thị gì Đối tượng JSX này có thể lồng các đối tượng khác nhưng phải có một đối tượng chính gói tất cả các đối tượng lại Tuy nhiên, cần lưu ý rằng không được gọi hàm setState() trong hàm render() hoặc trong các hàm mà hàm này gọi đến, vì điều này có thể gây ra vòng lặp vô hạn khi hàm render() được gọi lại sau khi setState() được thực thi.

Hàm `componentDidMount()` được gọi ngay sau khi hàm `render` được thực thi lần đầu tiên Hàm này thường được sử dụng để fetch dữ liệu từ server và sau đó cập nhật trạng thái bằng `setState` để render dữ liệu ra giao diện Lúc này, các phần tử đã được tạo ra và có thể tương tác với DOM bằng JavaScript trong hàm này.

• componentWillReceiveProps(nextProps) o Hàm này được chạy khi mà props của component đã được sinh ra có sự thay đổi o Phải gọi setState() nếu muốn render lại

• shouldComponentUpdate(nextProps, nextState) o Được gọi trước render o Trả về true / false Nếu false thì sẽ không render lại Mặc định là true

Hàm này được gọi ngay sau shouldComponentUpdate() nếu hàm này trả về true, và nó không được gọi khi hàm shouldComponentUpdate() trả về false Trong hàm này, bạn không nên gọi setState() vì nó có thể tạo ra một vòng lặp vô hạn, bởi mục đích của hàm này là chuẩn bị cho việc cập nhật đối tượng chứ không phải tạo ra một cập nhật mới Sau khi hàm này được gọi, hàm render sẽ được gọi ngay sau đó để cập nhật giao diện người dùng.

• componentDidUpdate(prevProps, prevState) o Được gọi ngay sau render() từ lần render thứ 2 trở đi o Đây cũng là 1 cơ hội để thao tác với các phần tử DOM bằng JS

• componentWillUnmount() o Được gọi khi 1 component được loại bỏ khỏi DOM o Thực hiện các thao tác dọn dẹp như huỷ các timer, loại bỏ các phần tử thừa,

Tổng quan Nodejs

NodeJS là một mã nguồn mở được xây dựng dựa trên nền tảng Javascript V8 Engine, cho phép xây dựng các ứng dụng web mạnh mẽ như trang video clip, forum và đặc biệt là trang mạng xã hội phạm vi hẹp, mang lại trải nghiệm người dùng phong phú và linh hoạt.

NodeJS sở hữu khả năng chạy trên nhiều nền tảng hệ điều hành khác nhau, bao gồm Windows, Linux và OS X, mang lại lợi thế đáng kể Ngoài ra, NodeJS cung cấp một loạt thư viện phong phú ở dạng Javascript Module, giúp đơn giản hóa quá trình lập trình và giảm thiểu thời gian phát triển xuống mức thấp nhất có thể.

1.2.2 Các đặc tính của Nodejs

Các API của NodeJS đều không đồng bộ, hoạt động dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về Điều này cho phép máy chủ di chuyển đến các API tiếp theo sau khi gọi, đồng thời tận dụng cơ chế thông báo sự kiện của Node.js để nhận phản hồi từ các cuộc gọi API trước đó một cách tức thời.

Realtime: Nodejs xử lý các vấn đề realtime rất tốt

Node.js được xây dựng dựa trên nền tảng V8 Javascript Engine, giúp việc thực thi chương trình diễn ra rất nhanh chóng Ngoài ra, Node.js sử dụng mô hình luồng đơn với cơ chế tổ chức sự kiện, cho phép máy chủ phản hồi một cách không bị chặn và tăng khả năng mở rộng Điều này trái ngược với các máy chủ truyền thống, vốn tạo ra hạn chế trong việc xử lý yêu cầu Nhờ vào chương trình đơn luồng, Node.js có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với các máy chủ truyền thống như Apache HTTP Server.

Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu

Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License.

Tổng quan về Express

Express.js là một framework nhỏ gọn nhưng linh hoạt được xây dựng trên nền tảng của Node.js, cung cấp các tính năng mạnh mẽ để phát triển web và ứng dụng di động hiệu quả.

Thiết lập các lớp trung gian là một cách để trả về các yêu cầu HTTP, giúp định nghĩa router linh hoạt và cho phép sử dụng với nhiều hành động khác nhau dựa trên phương thức HTTP và URL.

Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ

Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ của NodeJS

Các thành phần tương ứng:

Tập tin app.js đóng vai trò quan trọng trong việc lưu trữ thông tin cấu hình, khai báo và định nghĩa cần thiết để ứng dụng chạy một cách trơn tru Đồng thời, tệp package.json chứa danh sách các gói (package) cần thiết để ứng dụng hoạt động, tương tự như chức năng của tệp composer.json trong các dự án PHP hoặc RoR.

• Folder routes: chứa các route có trong ứng dụng

• Folder view: chứa view/template cho ứng dụng

• Folder public chứa các file css, js, images, cho ứng dụng.

Tổng quan MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc nosql

MongoDB Là một database hướng tài liệu (document), dữ liệu được lưu dưới dạng document kiểu JSON thay vì bảng như CSDL quan hệ nên truy vấn nhanh

Với CSDL quan hệ chúng ta có khái niệm bảng, với MongoDB chúng ta sẽ dùng khái niệm collection thay vì bảng

Các collection trong MongoDB được cấu trúc linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

MongoDB được phát triển bởi MongoDB Inc và được cấp phép theo Server Side Public License (SSPL)

• Kho lưu định hướng Document: Dữ liệu được lưu trong các tài liệu kiểu JSON

• Lập chỉ mục trên bất kỳ thuộc tính nào

• Các truy vấn đa dạng

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Khảo sát hiện trạng

2.1.1 Trang https://danet.vn/go/avod

Hình 2.1 Khảo sát trang Danet Ưu điểm:

- Chia theo các gói (Miễn phí, gói hàng tháng, thuê phim) cho người dùng

- Thiết kế responsive web phù hợp với các thiết bị

- Hỗ trợ các phương thức thanh toán online qua nhiều thẻ tín dụng ATM

- Hỗ trợ các phương thức login với các tài khoản mạng xã hội facebook, mail và login mặc định

- Thang tìm kiếm hỗ trợ từ khóa tìm kiếm

- Tốc độ load trang chậm

- Không có mục chia sẻ, đánh giá chất lượng phim

Hình 2.2 Khảo sát trang Iflix Ưu điểm:

- Ưa nhìn, đơn giản, không quá nhiều chi tiết

- Chia theo các gói hợp lý.Chuyển hướng hợp lý

- Hỗ trợ giao tiếp với quản trị viên qua fanpage

- Không hỗ trợ chia sẻ và bình luận

- Có gợi ý dàn diễn viên nhưng không có profile về diễn viên

Hình 2.3 Khảo sát trang Cliptv Ưu điểm:

- Các chức năng của trang web thể hiện rõ ràng

- Giao diện ưa nhìn, đơn giản, không quá nhiều chi tiết

- Chia theo các gói hợp lý

- Có phần chia sẻ, đánh giá phim

- Các diễn viên tham gia góp mặt trong phim

- Chỉ hỗ trợ login qua số điện thoại

- Thanh toán gói cước qua gửi tin nhắn

- Không hỗ trợ giao tiếp với quản trị viên qua mail, số điện thoại

- Không hỗ trợ chia sẻ và bình luận

Hình 2.4 Khảo sát trang Fptplay Ưu điểm:

- Hỗ trợ giao tiếp với quản trị viên qua mail, số điện thoại

- Có phần chia sẻ, đánh giá phim

- Các diễn viên góp mặt

- Phải đăng nhập để xem phim

Hình 2.5 Khảo sát trang Vieon Ưu điểm:

- Hỗ trợ giao tiếp với quản trị viên qua fanpage

- Có hỗ trợ chatbox với quản trị viên

- Hỗ trợ chia sẻ và đánh giá phim

Sau phần khảo sát các trang xem phim trực tuyến chúng em rút ra những thứ nên có ở một trang xem phim trực tuyến như sau:

Để mang lại trải nghiệm xem phim tốt hơn cho người dùng, việc tích hợp chức năng thành viên là điều cần thiết Tuy nhiên, chức năng này không nên là bắt buộc, mà thay vào đó, nó nên được thiết kế để hỗ trợ người dùng truy cập các gói phim và độ phân giải cao hơn một cách linh hoạt.

• Nên có giao diện mang bố cục đơn giản nhưng đủ gây sự lôi cuốn, cảm giác thoải mái cho người dùng

• Nên có các chức năng hỗ trợ thanh toán nhưng không quá rườm rà phức tạp

• Nên có đề xuất những thước phim có nội dung hoặc diễn viên chính tương tự.

Xác định yêu cầu

2.2.1.1 Yêu cầu chức năng người ghé thăm

- Đăng nhập vào hệ thống nếu có tài khoản

2.2.1.2 Yêu cầu chức năng người dùng

- Xem trang chủ, trang phim

- Xem trước (xem preview phim)

- Xem phim (Có thể xem phim bộ hoặc xem phim lẻ)

- Xem danh sách phim theo hạng mục

- Tìm kiếm theo thể loại

- Tìm kiếm theo tên phim

- Lọc phim theo (Thể loại/ năm/ quốc gia)

- Chia phim theo phụ đề (vietsub, thuyết minh, engsub)

- Xem lại thời lượng phim

- Xem tiểu sử của diễn viên

- Xem trang cá nhân người dùng

- Cập nhật, chỉnh sửa thông tin cá nhân người dùng

- Thêm phim vào danh sách phim xem sau

- Like/unlike và dislike/undislike

2.2.1.3 Yêu cầu chức năng người quản trị

- Quản lý người dùng: o Xem danh sách người dùng o Thêm, xóa và chỉnh sửa người dùng

- Quản lý phim: o Xem danh sách phim o Thêm, xóa và chỉnh sửa phim

- Quản lý danh sách phim theo mục: o Xem danh sách mục o Thêm, xóa, chỉnh sửa mục

- Quản lý diễn viên: o Xem danh sách diễn viên o Thêm, xóa và chỉnh sửa diễn viên

2.2.2 Yêu cầu phi chức năng

- UX/UI: bố trí giao diện thân thiện, dễ thao tác

- Khả năng xử lý: tốc độ thực hiện chức năng nhanh, hiệu quả Đáp ứng được lượng lớn người dùng truy cập trong cùng một thời điểm

- Khả năng tương thích: đáp ứng được nhiều nên tảng, nhiều thiết bị

- Khả năng bảo trì, nâng cấp: Thiệt kế phù hợp cho việc sửa lỗi, nâng cấp hệ thống

ĐẶC TẢ CHỨC NĂNG

Định nghĩa Use Case

1 Khách Người dùng chưa có tài khoản hoặc đang đăng xuất sẽ được đưa đến trang đăng nhập

2 Người dùng Người dùng đã đăng nhập vào hệ thống sẽ được thao tác và xem phim trong hệ thống người dùng

3 Admin Người quản trị viên, quản lý toàn bộ hệ thống.

Usercase Diagram

System Functions Main Use Case Use Case ID

Tài khoản Đăng ký UC_1.1 Đăng nhập UC_1.2 Đăng xuất UC_1.3

Thông tin diễn viên UC_2.3 Thông tin cá nhân

Cập nhật thông tin UC_3.1

Danh sách phim xem sau UC_3.2

Mô tả chi tiết Use case

Hình 3.2 Đăng ký Bảng 3.3 Đăng ký

Goal Đăng ký tài khoản mới

2 Nhấn vào “Đăng ký ngay!”

Hình 3.3 Đăng nhập Bảng 3.4 Đăng nhập

Goal Đăng nhập vào website

Hình 3.4 Đăng xuất Bảng 3.5 Đăng xuất

Goal Đăng xuất khỏi website

Pre-conditions Đăng nhập thành công

Main Flow 1 Đưa chuột vào “▼” kế bên ảnh đại diện

Goal Xem nhiều thông tin hơn về phim gồm (trailer, danh sách diễn viên, đạo diễn, …)

2 Nhấn nút “xem chi tiết phim”

Goal Bắt đầu xem phim, chọn tập xem và bình luận về phim

2 Nhấn nút “Xem phim ngay”

4 Nhấn nút “xem chi tiết phim”

Hình 3.7 Thông tin diễn viên

Bảng 3.8 Thông tin diễn viên

Name Thông tin diễn viên

Goal Giới thiệu chi tiết về diễn viên và các bộ phim thủ vai

Main Flow 1 Nhấn vào “Xem review phim”

2 Nhấn vào “Xem chi tiết”

3 Nhấn vào “Ảnh diễn viên”

Hình 3.8 Cập nhật thông tin

Bảng 3.9 Cập nhật thông tin

Name Cập nhật thông tin

Goal Thêm và chỉnh sửa thông tin cá nhân

Main Flow 1 Nhấn vào “ảnh đại diện”

2 Nhấn vào “Chỉnh sửa thông tin cá nhân” (icon cây viết)

3.3.8 Danh sách phim xem sau

Hình 3.9 Danh sách phim xem sau

Bảng 3.10 Danh sách phim xem sau

Name Danh sách phim xem sau

Goal Hiển thị danh sách mà người dùng đã lưu xem sau trước đó

Post-conditions User phải thêm phim “lưu xem sau”

Main Flow 1 Nhấn vào “ảnh đại diện”

2 Nhấn vào “Danh sách phim đã lưu”

Goal Tìm kiếm các phim theo tên

Main Flow 1 Nhấn vào ô “tìm kiếm”

2 Nhập tên phim cần tìm

3.3.10 Danh mục danh sách phim

Goal Tìm kiếm phim theo danh mục

Main Flow 1 Đưa con trỏ chuột vào “danh sách phim”

2 Chọn phim theo danh mục

Goal Chọn thể loại theo quy định của danh mục đã chọn

Main Flow 1 Đưa con trỏ chuột vào “danh sách phim”

2 Chọn phim theo danh mục

3 Nhân chọn thể loại loại (Mỗi danh mục sẽ có các thể loại khác nhau)

Goal Thông kê số lượng người dùng mới ở trang chủ admin

Pre-conditions Đăng nhập thành công phía Admin

Main Flow 1 Đăng nhập thành công phía admin

Hình 3.14 Quản lý bình luận

Bảng 3.15 Quản lý bình luận

Name Quản lý bình luận

Goal Xem nội dung, thông tin chi tiết bình luận và xóa các bình luận tiêu cực

Main Flow 1 Nhấn vào icon “Thùng rác”

Goal Quản lý danh sách user

Pre-conditions Đăng nhập thành công phía admin

Main Flow 1 Nhấn chọn icon “Users” ở thành menu

2 Chọn user muốn thực hiện chức năng sửa và xóa

Goal Quản lý danh sách phim

Main Flow 1 Nhấn chọn icon “Movies” ở thành menu

2 Chọn Movie muốn thực hiện chức năng thêm xóa sửa

Hình 3.17 Quản lý diễn viên

Bảng 3.18 Quản lý diễn viên

Name Quản lý diễn viên

Goal Quản lý danh sách các diễn viên

Main Flow 1 Nhấn chọn icon “Actors” ở thành menu

2 Chọn Actor muốn thực hiện chức năng thêm xóa sửa

Name Quản lý danh mục

Goal Quản lý các danh mục

Main Flow 1 Nhấn chọn icon “Lists” ở thành menu

2 Chọn list muốn thực hiện chức năng thêm xóa sửa

THIẾT KẾ ỨNG DỤNG

Thiết kế cơ sở dữ liệu

4.1.1 Lược đồ cơ sở dữ liệu

4.1.2 Mô tả cơ sở dữ liệu chi tiết

STT Tên Kiểu dữ liệu Mô tả

2 username String Tên hiển thị của người dùng

3 email String Email đăng nhập của người dùng

4 password String Mật khẩu đăng nhập của người dùng

5 profilePic String Ảnh dại diện của người dùng

6 isAdmin Boolean Xét người dùng có phải admin không

7 address String Địa chỉ người dùng

8 fullname String Tên đầy đủ của người dùng

9 watchList Array Danh sách xem sau của người đã thêm trước đó

11 phone String Số điện thoại

13 desc String Phần giới thiệu

2 title String Tiêu đề của danh sách phim

4 genre String Thể loại phim

5 content Array Mảng chứa phim của danh sách phim

2 name String Tên diễn viên

5 desc String Mô tả về diễn viên

6 profilePic String Ảnh đại diện

7 nameMovie Array Mảng chứa danh sách các phim diễn viên tham gia

2 title String Tiêu đề phim

3 desc String Mô tả phim

4 img String Hình ảnh phim

5 imgTitle String Hình ảnh cho tiêu đề

6 imgSm String Hình ảnh nhỏ của phim

7 imgPost String Hình ảnh đại diện cho video của phim

8 trailer String Trailer của phim

9 year String Năm phát hành phim

10 limit Number Giới hạn độ tuổi xem phim

11 genre String Thể loại phim

12 type String Kiểu phim một tập hoặc nhiều tập

13 naiton String Quốc gia sản xuất phim

14 isSeries Boolean Có phải phim nhiều tập không

15 duration String Thời lượng phim

16 listActor Array Mảng chứa danh sách diễn viên tham gia phim

17 imdb String Điểm dánh giá chất lượng phim trên internet

18 directior String Thông tin về đạo diễn

19 producer Array Nhà sản xuất phim

21 writer Array Nhà viết sách

22 listVideoSub Array Danh sách phim vietsub

23 listPost Array Danh sách các bài đăng về phim

24 listVideoTM Array Danh sách phim thuyết minh

25 isSup String Hỗ trợ phụ đề

26 movieTag Array Các tag để người dùng có thể tìm kiếm

27 listLiked Array Danh sách like

28 listDisliked Array Danh sách dislike

29 listComment Array Danh sách comment

2 content String Nội dung comment

3 creator String Người tạo comment

4 location String Vị trí phim người dùng comment

5 movieId String Phim được comment

THIẾT KẾ GIAO DIỆN

Thiết kế giao diện và xử lý

5.1.1 Màn hình đăng nhập Ý nghĩa: Người dùng đăng nhập và trang web

STT Tên đối tượng trên giao diện Loại đối tượng Ghi chú

1 Logo phần mềm Thẻ

2 Tiêu đề đăng nhập Thẻ

3 Khung nhập email của người dùng

Thẻ Email phải có

4 Khung nhập mật khẩu Thẻ Mật khẩu phải có chữ và số

5 Nút đăng nhập Thẻ

6 Link đăng ký Thẻ

Hình 5.2 Sơ đồ biến cố đăng nhập

5.1.2 Màn hình đăng ký Ý nghĩa: Người dùng đăng ký tài khoản để có thể đăng nhập vào trang web

Hình 5.3 Màn hình đăng ký Bảng 5.2 Các đối tượng màn hình đăng ký

1 Khung nhập email của người dùng

Thẻ Email phải có

2 Khung nhập username của người dùng

3 Khung nhập mật khẩu Thẻ Mật khẩu phải có chữ và số

4 Nút đăng ký Thẻ

5 Link đăng nhập Thẻ

Hình 5.4 Biến cố đăng ký

5.1.3 Màn hình trang chủ user Ý nghĩa: Màn hình đầu tiên người dùng đã đăng nhặp thành công vào trang web

Hình 5.5 Màn hình trang chủ

Hình 5.6 Màn hình trang chủ tiếp theo Bảng 5.3 Các đối tượng màn hình trang chủ

1 Logo phần mềm Thẻ

2 Trang chủ Thẻ Click trang chủ sẽ trở về trang chủ

3 Danh sách phim Thẻ Hiện thị các danh mục phim

4 Tìm kiếm Thẻ Tìm kiếm phim theo tên phim tiếng anh và tiếng việt

5 Tên người dùng Thẻ

6 Số bộ phim xem sau Thẻ Hiển thị số bộ phim user thêm vào danh sách xem sau

7 Ảnh đại diện Thẻ

8 Nút setting hoặc logout Thẻ Hiển thị thêm hai nút setting và logout

9 Menu các danh mục Thẻ Hiển thị các nút dẫn tới danh mục đó

10 Video giới thiệu Thẻ

11 Nút loa Thẻ Click tắt hoặc bật âm thanh

12 Nút cuộn đầu trang Thẻ Click sẽ tự động cuộn về đầu trang web

13 Tiêu đề của danh mục Thẻ Mỗi danh mục có tiêu đề khác nhau

14 ảnh đại diện phim Thẻ

15 Nút xem ngay Thẻ Click nút xem ngay sẽ dẫn tới trang giới thiệu

16 Nút xem review phim Thẻ Click sẽ hiện thị thêm giới thiệu tóm gọn

18 Nút xem ngay Thẻ Click đi tới trang xem phim

19 Nút lưu xem sau Thẻ Click sẽ lưu phim vào danh sách xem ngay

20 Nút xem chi tiết Thẻ Click sẽ đi tới trang xem chi tiết

Hình 5.7 Biến cố trang chủ

5.1.4 Màn hình thông tin cá nhân Ý nghĩa: Người dùng đăng nhập thành công vào trang web và muốn xem hoặc thay đổi hay cập nhật thông tin cá nhân

Hình 5.8 Màn hình thông tin cá nhân Bảng 5.4 Các đối tượng màn hình thông tin cá nhân

1 Nút thông tin cá nhân Thẻ

2 Nút chỉnh sửa thông tin cá nhân Thẻ

3 Nút danh sách phim đã lưu Thẻ

4 Nút đổi mật khẩu Thẻ

5 Nút cập nhật ảnh đại điện Thẻ

Hình 5.9 Biến cố thông tin cá nhân

5.1.5 Màn hình cập nhật thông tin cá nhân Ý nghĩa: Người dùng đăng nhập thành công vào trang web và muốn cập nhập thêm thông tin cá nhân

Hình 5.10 Màn hình cập nhật thông tin cá nhân Bảng 5.5 Các đối tượng màn hình cập nhật thông tin cá nhân

1 Tiểu đề của trang Thẻ

2 Form chỉnh sửa thông tin cá nhân Thẻ

3 Khung email Thẻ Email phải có

4 Khung tên hiển thị Thẻ

5 Khung tên đầy đủ Thẻ

6 Khung quốc tịch Thẻ

7 Khung só điện thoại Thẻ

8 Khung ngày sinh Thẻ

9 Khung mô tả bản thân Thẻ

10 Khung địa chỉ Thẻ

11 Nút cập nhật Thẻ

Hình 5.11 Biến cố cập nhật thông tin cá nhân

5.1.6 Màn hình danh sách xem sau Ý nghĩa: Người dùng đăng nhập thành công vào trang web và có thể xem danh sách xem sau những bộ phim được thêm trước đó

Hình 5.12 Màn hình danh sách xem sau Bảng 5.6 Các đối tượng màn hình danh sách xem sau

1 Nút xóa Thẻ click nút xóa sẽ xóa phim ra khỏi danh sách xem sau

2 Nút xem chi tiết Thẻ Click sẽ dẫn đến trang xem chi tiết

Hình 5.13 Biến cố danh sách xem sau

5.1.7 Màn hình đổi mật khẩu Ý nghĩa: Người dùng đăng nhập thành công vào trang web và muốn đổi lại mật khẩu của mình

Hình 5.14 Màn hình đổi mật khẩu Bảng 5.7 Các đối tượng màn hình đổi mật khẩu

1 Khung mật khẩu mới Thẻ Mật khẩu phải có chữ và số

2 Khung xác nhận mật khẩu mới Thẻ Mật khẩu phải trùng vs mật khẩu mới

Hình 5.15 Biến cố đổi mật khẩu

5.1.8 Màn hình mô tả chi tiết phim Ý nghĩa: Người dùng đăng nhập thành công vào trang web muốn xem nhiều thông tin của một bộ phim

Hình 5.16 Màn hình mô tả chi tiết phim

Hình 5.17 Màn hình mô tả chi tiết phim tiếp theo

Hình 5.18 Màn hình mô tả chi tiết phim tiếp theo Bảng 5.8 Các đối tượng màn hình mô tả chi tiết phim

1 Ảnh đại diện của phim Thẻ

2 Nút xem ngay Thẻ Click sẽ dẫn tới trang xem phim

3 Nút xem Thẻ Click sẽ dẫn tới trang xem phim

4 Lưu xem sau Thẻ Click sẽ thêm phim hiện tại vào danh sách xem sau

6 Mô tả chi tiết Thẻ Các thông tin về phim gồm thể loại, độ tuổi xem, năm phát hành, thời lượng, diễn viên, …

7 Tên đạo diễn Thẻ Click sẽ hiện thêm thông tin về đạo diễn

8 Ảnh đạo diễn Thẻ

11 Ảnh nội dung Thẻ

12 Diễn viên Thẻ Click sẽ tới trang thông tin điễn viên

Hình 5.19 Biến cố mô tả chi tiết phim

60 Ý nghĩa: Người dùng đăng nhập thành công vào trang web và trải nghiệm thước phim đẹp

Hình 5.20 Màn hình xem phim

Hình 5.21 Màn hình xem phim tiếp theo

Hình 5.22 Màn hình xem phim tiếp theo Bảng 5.9 Các đối tượng màn hình đăng ký

2 Nút like Thẻ Click sẽ tăng lượt like

3 Nút dislike Thẻ Click sẽ tăng lượt dislike

4 Nút tập việt sub Thẻ Click sẽ chuyển tới tập phim đã chọn

5 Nút tập thuyết minh Thẻ Click sẽ chuyển tới tập phim đã chọn

6 Khung bình luận Thẻ Bình luận về bộ phim này

7 Nút gửi Thẻ Click khi khung button có nội dung sẽ đăng bình luận

8 Các bình luận trước đấy Thẻ

9 Xem thêm bình luận Thẻ Click sẽ load thêm các bình luận cũ hơn

10 Các button phim giới thiệu ở phần trang chủ

Hình 5.23 Biến cố xem phim

5.1.10 Màn hình thông tin diễn viên

Khi người dùng đăng nhập thành công vào trang web, họ thường muốn tìm hiểu thêm về thông tin diễn viên hay mà mình yêu thích, cũng như khám phá các bộ phim nổi bật mà diễn viên đó đã tham gia Việc này không chỉ giúp người dùng cập nhật kiến thức về điện ảnh mà còn mang lại trải nghiệm giải trí thú vị và tiện lợi.

Hình 5.24 Màn hình thông tin diễn viên Bảng 5.10 Các đối tượng màn hình thông tin diễn viên

1 Ảnh đại diện Thẻ

2 Tên diễn viên Thẻ

3 Thông tin diễn viên Thẻ

4 Ảnh diễn viên khác Thẻ Click sẽ dẫn đến trang thông tin của diễn viên khác

5 Các button phim giới thiệu ở phần trang chủ

5.1.11 Màn hình danh mục Ý nghĩa: Người dùng đăng nhập thành công vào trang web và muốn xem khác danh mục theo sở thích của mình

Hình 5.26 Màn hình danh mục

Hình 5.27 Màn hình danh mục tiếp theo Bảng 5.11 Các đối tượng màn hình danh mục

1 Tên các danh mục Thẻ Click sẽ tới trang phim theo danh mục đó

2 Tên thể loại Thẻ Click sễ tới trang danh sách phim của thể loại đấy

3 Ảnh phim đại diễn Thẻ

4 Xem chi tiết Thẻ

5.1.12 Màn hình trang chủ admin Ý nghĩa: Người dùng đăng nhập thành công vào trang admin sẽ vào trang chủ admin

Hình 5.29 Màn hình trang chủ admin Bảng 5.12 Các đối tượng màn hình trang chủ admin

1 Biểu đồ thông kê số User Thẻ Hiển thị chỉ số các user tạo mới ở mỗi tháng

2 Nút xóa Thẻ Click sẽ xóa bình luận

Hình 5.30 Biến cố trang chủ admin

5.1.13 Màn hình quản lý user Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và quản lý danh sách user

Hình 5.31 Màn hình quản lý user Bảng 5.13 Các đối tượng màn hình quản lý user

1 Nút edit Thẻ Click sẽ tới trang chỉnh sửa user

2 Nút xóa Thẻ Click sẽ xóa user

Hình 5.32 Biến cố quản lý user

5.1.14 Màn hình thêm user Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và muốn thêm user

Hình 5.33 Màn hình đăng ký Bảng 5.14 Các đối tượng màn hình đăng ký

2 Khung email Thẻ Email phải có

3 Khung password Thẻ Password phải có chữ và số

4 Nút create Thẻ Click sẽ tạo mới user

5.1.15 Màn hình quản lý diễn viên Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và quán lý diễn viên

Hình 5.35 Màn hình quản lý diễn viên Bảng 5.15 Các đối tượng màn hình quản lý diễn viên

1 Nút sắp xếp Thẻ Sắp xếp theo ASC hoặc

2 Nút edit Thẻ Click sẽ dẫn tới trang chỉnh sửa diễn viên

3 Nút xóa Thẻ Click sẽ xóa diễn viên đó

4 Trả về trang phía trước Thẻ

5 Trả về trang phía sau Thẻ

Hình 5.36 Biến cố quản lý diễn viên

5.1.16 Màn hình thêm diễn viên Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và muốn thêm mới diễn viên

Hình 5.37 Màn hình thêm diễn viên Bảng 5.16 Các đối tượng màn hình thêm diễn viên

1 Khung actor name Thẻ Tên diễn viên

2 Khung stage name Thẻ Nghệ danh của diễn viên

3 Khung nation Thẻ Quốc tịch của diễn viên

4 Khung description Thẻ Mô tả diễn viên

5 Nút actor image Thẻ Click để thêm ảnh diễn viên

6 Danh sách phim nhiều tập Thẻ Phim nhiều tập mà diễn viên thủ vai

7 Danh sách phim lẻ Thẻ Phim lẻ mà diễn viên thủ vai

Hình 5.38 Biến cố thêm diễn viên

5.1.17 Màn hình quản lý phim Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và quản lý phim

Hình 5.39 Màn hình quản lý phim Bảng 5.17 Các đối tượng màn hình quản lý phim

2 Nút edit Thẻ Click sẽ dẫn tới trang chỉnh sửa phim

3 Nút xóa Thẻ Click sẽ xóa phim đó

Hình 5.40 Biến cố quản lý phim

5.1.18 Màn hình thêm phim Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và muốn thêm mới phim

Hình 5.41 Màn hình thêm phim

Bảng 5.18 Các đối tượng màn hình thêm phim

1 Nút image Thẻ Click để thêm ảnh dại điện cho phim

2 Nút title image Thẻ Click để thêm ảnh cho tiêu đề

3 Nút thumbnail image Thẻ Click để thêm ảnh thu nhỏ

4 Nút post image Thẻ Click để thêm ảnh đại diễn cho video

5 Khung title Thẻ Tiêu đề phim

6 Khung description Thẻ Mô tả phim

7 Khung year Thẻ Năm phát hành phim

8 Khung genre Thẻ Thể loại phim

9 Khung duration Thẻ Thời lượng phim

10 Khung limit Thẻ Giới hạn đọ tuổi xem phim

11 Khung nation Thẻ Quốc gia sản xuất phim

12 Khung IMDb Thẻ Điểm đánh giá chất lượng phim trên internet

13 Khung phụ đề Thẻ Phụ đề thuyết minh, việt sub và eng sub

14 Khung phim trường Thẻ Vị trí phim trường

15 Khung nhà viết sách Thẻ Tên người viết sách

16 Khung tag phim Thẻ Các hash tag của phim

17 Danh sách is series? Thẻ Phim nhiều tập hoặc phim lẻ

18 Khung đạo diễn Thẻ Tên của đạo diễn

19 Khung thông tin đạo diễn Thẻ

20 Khung quốc tịch đạo diễn Thẻ

21 Nút trailer Thẻ Click thêm video trailer

22 Nút video sub Thẻ Click thêm phim sub

23 Nút video thuyết minh Thẻ Click thêm phim thuyết minh

24 Nút director avatar Thẻ ảnh của đạo diễn

25 Danh sách diễn viên Thẻ Chọn diễn viên tham gia

26 Danh sách sách phim nhiều tập Thẻ Chọn phim nhiều tập

27 Danh sách phim lẻ Thẻ Chọn phim lẻ

Hình 5.42 Biến cố thêm phim

5.1.19 Màn hình quản lý danh mục Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và quản lý danh mục

Hình 5.43 Màn hình danh mục Bảng 5.19 Các đối tượng màn hình danh mục

2 Nút edit Thẻ Click sẽ dẫn tới trang chỉnh sửa danh mục

3 Nút xóa Thẻ Click sẽ xóa danh mục đó

Hình 5.44 Biến cố danh mục

5.1.20 Màn hình thêm danh mục Ý nghĩa: Người dùng đăng nhập thành công vào trang admin và muốn thêm mới danh mục

Hình 5.45 Màn hình thêm danh mục Bảng 5.20 Các đối tượng màn hình thêm danh mục

1 Khung title Thẻ Tên tiêu đề của danh sách

2 Khung genre Thẻ Thể loại phim

3 Danh sách type Thẻ Kiểu phim

4 Danh sách phim nhiều tập Thẻ Thêm nhiều tập phim vào danh mục

5 Danh sách phim lẻ Thẻ Thêm lẻ phim vào danh mục

Hình 5.46 Biến cố thêm danh mục

Sequence Diagram cho các xử lý

Hình 5.49 Xem chi tiết phim

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

Hình 5.51 Xem tiểu sử diễn viên

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt ứng dụng

Clone hoặc download project từ link github: https://github.com/0902535050/cinema

6.1.1 Thư viện và môi trường phát triển

Bảng 6.1 Danh sách thử viện và môi trường phát triển cần thiết trong sản phẩm

STT Library/Software Download URL

1 Npm Download | Node.js (nodejs.org)

2 MongoDB https://docs.mongodb.com/manual/administration/install- community/

3 Visual studio code https://code.visualstudio.com/docs?dv=win

6.1.1.2 Lệnh cài đặt và khởi chạy chương trình

Bảng 6.2 Danh sách các lệnh cài đặt và chạy chương trình

1 npm install -g create-react-app Cài đặt ReactJS

2 npm install Cài đặt node_modules

3 yarn start hoặc npm start Khởi chạy chương trình front end, back end

Công cụ để chạy project: Visual studio code

Bước 1: Clone hoặc download project từ link github: https://github.com/0902535050/cinema

Upon cloning the project from GitHub or extracting the attached report file, a folder named "cinema" will be generated, containing subfolders such as "admin", "api", and "client".

Tiến hành vào thư mục “cinema”

Bước 3: Sau khi vào được thư mục “cinema” (như hình)

Hình 6.1 Các thư mục trong “cinema”

Bước 4: Mở thư mục “api” bằng Visual studio code, chọn termial trên thanh taskbar

Bước 5: Mở thư mục “client” bằng Visual Studio Code, chọn termial trên thanh taskbar

Bước 6: Mở thư mục “admin” bằng Visual Studio Code, chọn termial trên thanh taskbar

Bước 7: Chạy lệnh “npm install” để cập nhật những thư viện, package còn thiếu trên máy mà project cần

Bước 8: Sau khi lệnh npm install kết thúc, gõ lệnh “ yarn start ” và nhấn enter

Bước 9: Sau khi compile xong, url của project sẽ hiển thị ở trình duyệt web Hoặc có thể chạy tay bằng cách mở trình duyệt web và nhập url:

Kiểm thử ứng dụng

Sau khi thực hiện xong việc kiểm thử thì nhóm xin trình bày một số test case tiêu biểu và rút ra kết quả sau

Bảng 6.3 Kiểm thử chức năng đăng nhập

Test steps Expected Output Result

SignIn_01 Kiểm tra việc đăng nhập khi chưa có tài khoản

1 Nhập tên đăng nhập và mật khẩu chưa đăng kí trong hệ thống

Email hoặc mật khẩu nhập chưa đúng vui lòng nhập lại!!”

SignIn_02 Kiểm tra việc đăng nhập đã có tài khoản nhưng sai mật khẩu

1 Nhập “email” đúng với tài khoản đã đăng ký

SignIn_03 Kiểm tra việc đăng nhập bằng tài khoản google

1 Nhập “email” và “mật khẩu” đúng với tài khoản google

SignIn_04 Kiểm tra việc đăng 1 Nhập “email” và “mật khẩu” Hiện ra thông báo Pass

89 nhập bằng tài khoản đã được đăng ký đúng với tài khoản đã đăng ký

“Đăng nhập thành công! Xin chào bạn”

SignIn_05 Kiểm tra việc đăng nhập bằng tài khoản đã đăng ký nhưng chưa cấp quyền quản trị viên

1 Nhập “email” và “mật khẩu” đúng với tài khoản đã đăng ký chưa cấp quyền quản trị viên

“Đăng nhập thất bại! Email hoặc mật khẩu sai xin vui lòng nhập lại”

Pass signIn_06 Kiểm tra việc đăng nhập bằng tài khoản đã đăng ký đã cấp quyền quản trị viên

1 Nhập “email” và “mật khẩu” đúng với tài khoản đã đăng ký và cấp quyền quản trị viên

Bảng 6.4 Kiểm thử chức năng đăng ký

REG_01 Kiểm tra việc đăng nhập khi chưa có tài khoản

Thực hiện đăng ký tài khoản đã

“email hoặc username đã có

90 tồn tài hoặc email đã tồn tại người dùng”

REG_02 Kiểm tra đăng ký với email, tên tài khoản, mật khẩu rỗng

Thực hiện đăng ký khi email, tên tài khoản, mật khẩu rỗng

Hiện ra thông báo từng khung nhập

Kiểm tra đăng ký với email không hợp lệ

Thực hiện đăng ký nhập email không hợp lệ

Hiện ra thông báo dưới khung nhập email “Email bạn nhập chưa đúng vui lòng nhập lại!”

Kiểm tra đăng ký với mật khẩu không hợp lệ

Thực hiện đăng ký nhập mật khẩu không hợp lệ

Hiện ra thông báo dưới khung nhập mật khẩu “Mật khẩu tối thiểu 8 kí tự bao gồm chứ và số!”

Kiểm tra đăng ký email, username, mật khẩu hợp lệ

Hực hiện đăng ký email, username, mật khẩu hợp lệ

“đăng ký thành công” và chuyển tới trang đăng nhập

6.2.3 Chức năng cập nhật thông tin cá nhân

Bảng 6.5 Kiểm thử chức năng cập nhật thông tin cá nhân

ID Test Case Test steps Expected Output Result

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

Thực hiện 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 ra thông báo từng khung nhập

Kiểm tra việc cập nhật thông tin cá nhân nhập hợp lệ

Thực hiện việc cập nhật thông tin cá nhân nhập hợp lệ

Chuyển đến màn hình chính và thông báo “cập nhật thông tin thành công”

Bảng 6.6 Chức năng tìm kiếm

SEA_01 Kiểm tra việc tìm kiếm để rỗng

Thực hiện việc để ô search rỗng Hiện ra khung tìm kiếm rỗng

Kiểm tra việc tìm kiếm không hợp lệ

Thực hiện việc nhập không hợp lệ hợp lệ

“Không có phim cần tìm”

SEA_03 Kiểm tra việc tìm kiếm đúng tên phim bẳng tiếng anh

Thực hiện việc nhập đúng tên phim bằng tiếng anh

Hiện ra danh sách phim có trung tên hoặc có phần giới thiệu có từ khóa giống nhau

SEA_04 Kiểm tra việc tìm kiếm đúng tên phim bẳng tiếng việt

Thực hiện việc nhập đúng tên phim bằng tiếng việt

Hiện ra danh sách phim có trùng tên hoặc có phần giới thiệu có từ khóa giống nhau

SEA_05 Kiểm tra việc tìm kiếm đúng theo

“thể loại”, “đang phát”, “độ tuổi”,

“thời lượng”, “nhà sản xuất”, “phim trường” hợp lệ

Thực hiện việc tìm kiếm đúng theo

“thể loại”, “đang phát”, “độ tuổi”,

“thời lượng”, “nhà sản xuất”, “phim trường” hợp lệ

Hiện ra danh sách phim có từ khóa trùng với nội dung của nó pass

Tiêu đề	Xây Dựng Website Xem Phim Trực Tuyến
Tác giả	Phạm Thanh Tuấn, Trần Văn Tuấn
Người hướng dẫn	ThS. Lê Thị Minh Châu
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
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	116
Dung lượng	10,43 MB