GIỚI THIỆU ĐỀ TÀI
XÂY DỰNG WEBSITE REVIEW PHIM
Ngày nay, nhu cầu xem phim trở thành một phần quan trọng trong đời sống giải trí của con người, giúp thư giãn sau những giờ làm việc căng thẳng Ngành công nghiệp điện ảnh phát triển mạnh mẽ với hàng triệu đô la đầu tư, dẫn đến sự ra đời của nhiều bộ phim mỗi năm với chất lượng khác nhau Do đó, khán giả ngày càng có xu hướng lựa chọn những bộ phim thực sự hay và xứng đáng với thời gian cũng như tiền bạc của họ.
Website Cinerate cung cấp đánh giá và điểm số của phim từ khán giả và nhà phê bình, giúp người dùng lựa chọn bộ phim ưng ý khi mua vé Ngoài ra, người dùng còn có thể chia sẻ đánh giá cá nhân và lưu lại danh sách các phim đã xem.
Website review phim được xây dựng bằng React, Express, cùng với một vài thư viện hỗ trợ khác.
Hiện nay, việc sử dụng trang web đánh giá phim đã trở thành thói quen phổ biến của người dùng trực tuyến Sự phát triển của công nghệ đã cải thiện độ chính xác của hệ thống đánh giá, dẫn đến xu hướng gia tăng đáng kể trong việc tham khảo các bài đánh giá và điểm số trên các trang review phim trước khi ra rạp, thu hút sự quan tâm từ mọi lứa tuổi.
Chúng em đã chọn đề tài “Xây dựng website review phim” do tính ứng dụng cao và nhu cầu thực tế lớn Đồng thời, đây cũng là cơ hội để chúng em thử thách bản thân với những đề tài mới, từ đó nâng cao kiến thức và kỹ năng của mình.
Hiện nay, nhiều website review phim nổi tiếng như Letterboxd, IMDb và Rotten Tomatoes đã thu hút sự chú ý của người dùng nhờ giao diện bắt mắt và dễ sử dụng Với kho phim khổng lồ, những trang web này nhanh chóng trở thành lựa chọn hàng đầu cho việc đánh giá phim Các chức năng của chúng chủ yếu tập trung vào việc thống kê và tổng hợp thông tin về bộ phim, giúp người dùng quyết định xem liệu bộ phim đó có đáng xem hay không.
Chúng tôi sẽ phát triển một website chuyên review phim, cung cấp tóm tắt thông tin chi tiết về các bộ phim và tổng hợp đánh giá, điểm số từ các chuyên gia cũng như người dùng Mục tiêu là mang đến cho người dùng một trải nghiệm dễ dàng và tiện lợi khi tìm kiếm thông tin về phim.
Chương 2: CƠ SỞ LÝ THUYẾT
React là thư viện JavaScript front-end miễn phí và mã nguồn mở, giúp xây dựng giao diện người dùng (UI) dễ dàng tái sử dụng qua các component Được phát triển bởi Meta cùng với sự hỗ trợ từ cộng đồng các nhà phát triển và công ty bên ngoài, React đã ra mắt từ năm 2013.
React là một thư viện phổ biến để xây dựng ứng dụng web, bao gồm ứng dụng single-page và mobile, đồng thời hỗ trợ rendering trên server thông qua các framework như Next.js Thông thường, React không được sử dụng độc lập mà thường kết hợp với các thư viện và framework khác Nhiều ứng dụng lớn như Facebook và Discord đã áp dụng React, khẳng định vị thế của nó trong lĩnh vực phát triển front-end.
2.1.2 Khái niệm cơ bản trong ReactJS:
Trong React, việc xây dựng giao diện người dùng (UI) được thực hiện thông qua các component, mỗi component chứa mã HTML và logic liên quan đến một phần của UI Các component có thể chứa lẫn nhau, cho phép chúng ta kết hợp để tạo ra một UI phức tạp Code React được viết bằng ngôn ngữ JSX, giúp việc lập trình trở nên dễ dàng hơn.
JavaScript, HTML, và component ở cùng một file Với JSX, ta có thể dùng các biến và hàm ngay trong code HTML.
Hình 2.1: Viết một component dùng JSX.
Khi ứng dụng React được khởi chạy, nó tạo ra một mô hình DOM ảo từ các component Sau đó, React chuyển đổi DOM ảo thành DOM thật để trình duyệt có thể hiển thị Khi có sự thay đổi trong giao diện người dùng, React sẽ so sánh sự khác biệt giữa DOM ảo và DOM thật, chỉ cập nhật những phần cần thiết mà không làm mới toàn bộ trang Điều này giúp tối ưu hiệu suất và cải thiện trải nghiệm người dùng.
UI của nó được gọi là mount Khi một component được gỡ ra khỏi DOM thật vì UI đã đóng được gọi là unmount.
Hình 2.2: DOM ảo và DOM thật
2.1.2.2 Functional Component và Class Component:
Có 2 cách để viết một component Trong cách Functional
Component trong React có thể được tạo ra bằng cách viết một hàm trả về JSX, đây là phương pháp hiện đại và được ưa chuộng nhất hiện nay Ngoài ra, còn có phương pháp cũ là Class Component, trong đó ta tạo một lớp kế thừa từ React.Component và cài đặt phương thức render để trả về JSX cho UI Khi React cần render một component, nó sẽ gọi hàm Functional Component hoặc phương thức render của Class Component để lấy JSX và hiển thị giao diện người dùng từ đó.
Hình 2.3: Functional Component cho một nút bấm
A component can receive external parameters known as Props, which may include the user's name, date of birth, or an ID for display purposes Props are declared in the function parameters of a Functional Component and can be utilized directly within the HTML code.
Hình 2.4: Khai báo và sử dụng props count và onClick ở Functional Component
Khi một component chứa dữ liệu có thể thay đổi bởi người dùng, ta nên sử dụng State để quản lý nó Hàm useState được sử dụng để khai báo một state, trả về giá trị state và hàm để cập nhật giá trị đó Mỗi khi gọi setState, React sẽ render lại component với giá trị state mới State có thể được sử dụng trong mã HTML tương tự như props.
In React, it is advisable to manage shared states within the parent component of the relevant child components The parent component passes the state to the child components through props If a child component needs to update this state, a setState function is passed down via props This approach is known as Unidirectional Data Flow.
Dữ liệu được truyền từ component cha xuống component con, cho phép component con thay đổi state của component cha Mô hình này hỗ trợ đồng bộ hóa dữ liệu giữa các thành phần trong giao diện người dùng, đồng thời giúp mã nguồn dễ bảo trì hơn.
Hình 2.5: Mô hình Unidirectional Data Flow.
Khi sử dụng Functional Component, chúng ta tận dụng các tính năng của React thông qua các hàm gọi là Hook, trong đó useState là một ví dụ tiêu biểu Ngoài useState, React còn cung cấp nhiều hook khác thường được sử dụng.
useEffect: Chạy hàm khi component được mount, unmount
useContext: Chia sẻ dữ liệu như theme, dependency giữa các component
useRef: Chứa dữ liệu không cần thiết cho việc render nhưng cần giữ nguyên giữa các lần render.
2.1.2.7 Một số framework và thư viện hay dùng với React
React hay được dùng với các thư viện và framework sau đây:
Redux: Quản lý các state được chia sẻ bởi nhiều component một cách chặt chẽ và dễ dự đoán.
React Router: Hỗ trợ navigation ở client-side.
Next.js: Xây dựng website hỗ trợ render ở cả server và client dùng React.
SWR: Cung cấp hook để gọi API có hỗ trợ caching, pagination, infinite loading, …
2.1.3 Ưu điểm, nhược điểm: Ưu điểm:
Có tính tái sử dụng cao, dễ bảo trì
Dễ tạo web động với nhiều dữ liệu
Nhiều thư viện hỗ trợ
Rất phổ biến với cộng đồng rộng lớn Nhược điểm:
Cập nhật liên tục nên cần học kiến thức mới thường xuyên
Cần cài đặt thêm thư viện và framework để xây dựng được website hoàn thiện
2.2 Tổng quan về Express.js
Express.js là một framework web back-end mã nguồn mở miễn phí, hoạt động trên Node.js Nó thường được sử dụng để xây dựng REST API và là framework server phổ biến nhất trong môi trường Node Với cơ chế middleware đơn giản, Express.js giúp dễ dàng xử lý các request và trả về response cho API.
Express là một trong những framework back-end phổ biến nhất hiện nay và được dùng bởi PayPal, Uber, IBM, …
2.2.2 Các khái niệm cơ bản và cách thức hoạt động
T ng quan v Express.js ổng quan về ReactJS: ề tài
Hỗ trợ kiểu dữ liệu không tốt lắm
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Hình 3.1: Sơ đồ use-case tổng quát
Hình 3.2: Sơ đồ use-case đăng nhập
Bảng 3.1: Đặc tả đăng nhập:
Tên Use – Case Đăng nhập
Mô tả Use-Case cho phép người dùng đăng nhập vào hệ thống
Actor Người dùng Điều kiện kích hoạt Người dùng chọn Login
Tiền điều kiện Đã có tài khoản
Hậu điều kiện Người dùng đăng nhập vào hệ thống thành công
1 Hệ thống hiển thị màn hình đăng nhập
2 Người dùng nhập email/tên người dùng và mật khẩu 3 Hệ thống kiểm tra thông tin đăng nhập
4 Nếu thông tin hợp lệ hệ thống thông báo đăng nhập thành công
Luồng sự kiện phụ Mật khẩu hoặc tên đăng nhập sai:
1 Hệ thống hiển thị lại màn hình đăng nhập để người dùng nhập lại thông tin kèm theo thông báo tên đăng nhập hoặc mật khẩu sai
2 Quay lại bước 2 của Luồng sự kiện chính.
Hình 3.3: Sơ đồ use-case đăng xuất
Bảng 3.2: Đặc tả đăng xuất:
Tên Use – Case Đăng xuất
Mô tả Use-Case cho phép người dùng đăng xuất ra khỏi hệ thống
Actor Người dùng Điều kiện kích hoạt Người dùng chọn Log out
Tiền điều kiện Đã đăng nhập
Hậu điều kiện Người dùng đăng xuất ra khỏi hệ thống thành công
1 Hệ thống đăng xuất người dùng và đưa về trang trước đó
Luồng sự kiện phụ Mật khẩu hoặc tên đăng nhập sai:
1 Hệ thống hiển thị lại màn hình đăng nhập để người dùng nhập lại thông tin kèm theo thông báo tên đăng nhập hoặc mật khẩu sai
2 Quay lại bước 2 của Luồng sự kiện chính.
Hình 3.4: Sơ đồ use-case đăng ký thành viên
Bảng 3.3: Đặc tả đăng ký thành viên:
Tên Use – Case Đăng ký thành viên
Mô tả Use-Case cho phép người dùng đăng ký tài khoản
Actor Người dùng Điều kiện kích hoạt Khi người dùng nhấn vào nút Sign up nằm trong trang chủ Tiền điều kiện Có tài khoản email hợp lệ
Hậu điều kiện Người dùng đăng ký thành công
1 Hệ thống hiển thị màn hình đăng ký
2 Người dùng nhập thông tin
3 Nếu tất cả đều hợp lệ hệ thống thông báo đăng ký thành công
Luồng sự kiện phụ Thông tin không hợp lệ:
1 Hệ thống hiển thị thông báo lỗi
2 Quay lại bước 2 của Luồng sự kiện chính.
Hình 3.5: Sơ đồ use-case tạo review
Bảng 3.4: Đặc tả tạo review:
Tên Use – Case Tạo review
Mô tả Use-Case cho phép người tạo review cho phim
Actor Người dùng Điều kiện kích hoạt Người dùng nhấn nút Submit trong trang thông tin phim Tiền điều kiện Đã đăng nhập tài khoản website
Hậu điều kiện Người tạo review thành công
1 Hệ thống hiển thị màn hình thông tin phim
2 Người dùng nhập thông tin của review
3 Nếu tất cả thông tin đều hợp lệ thì hệ thống thông báo tạo review thành công
4 Kết thúc Use-case Luồng sự kiện phụ
3.1.5 Hiển thị thông tin phim:
Hình 3.6: Sơ đồ use-case hiển thị thông tin phim
Bảng 3.5: Đặc tả hiển thị thông tin phim:
Tên Use – Case Hiển thị thông tin phim
Mô tả Use-case hiển thị thông tin phim khi người dùng chọn một phim
Actor Hệ thống Điều kiện kích hoạt Người dùng chọn vào một phim
Hậu điều kiện Hệ thống cung cấp cho người dùng các thông tin về bộ phim đã chọn Luồng sự kiện chính
1 Hệ thống tìm kiếm thông tin phim
2 Hệ thống hiển thị thông tin phim Luồng sự kiện phụ Không tìm thấy thông tin phim:
1 Hệ thống hiển thị không tìm thấy thông tin bộ phim
Hình 3.7: Sơ đồ use-case tìm kiếm, lọc
Bảng 3.6: Đặc tả tìm kiếm, lọc
Tên Use – Case Tìm kiếm, lọc
Mô tả Use-Case cho phép người dùng tìm kiếm, lọc danh sách phim, người dùng
Actor Tất cả Điều kiện kích hoạt Người dùng nhập các thông tin tìm kiếm, lọc tại màn hình danh sách phim, người dùng Tiền điều kiện Không
1 Hệ thống hiển thị trang danh sách phim, người dùng
2 Người dùng nhập thông tin tìm kiếm, lọc
3 Hệ thống hiển thị kết quả tìm kiếm
4 Kết thúc Use-case Luồng sự kiện phụ Người dùng nhấn nút Clear:
1 Hệ thống hiển thị danh sách phim, người dùng
2 Quay lại bước 2 của Luồng sự kiện chính.
THIẾT KẾ GIAO DIỆN
Trang thông tin phim: 1 Giao di n:ệu về ReactJS
Hình 4.4: Giao diện trang thông tin chi tiết phim
Hình 4.5 Giao diện trang thông tin chi tiết phim.
- Nhấn click vào nút watch, bộ phim sẽ được thêm vào danh sách phim đã xem
- Nhấn nút Submit, các thông tin đánh giá của bạn sẽ được thêm vào hệ thống.
- Nhấn một review trên danh sách để chuyển tới trang thông tin review
- Nhấn vào nút All Reviews để chuyển tới trang hiển thị toàn bộ review của bộ phim
- Trang cá nhân sẽ hiển thị chi tiết phim.
Trang danh sách phim: 1 Giao di n:ệu về ReactJS
Hình 4.6: Giao diện trang danh sách phim.
- Mặc định, website sẽ hiển thị sẵn các bộ phim.
- Ấn vào bộ phim trên danh sách để chuyển tới trang thông tin bộ phim
- Khi nhập các thông tin tìm kiếm, lọc sẽ thể hiện kết quả về các loại phim phù hợp với yêu cầu
- Khi ấn nút Clear, mọi thông tin tìm kiếm, lọc và danh sách phim sẽ được trở về ban đầu
Trang thông tin review: 1 Giao di n:ệu về ReactJS
Hình 4.7: Giao diện thông tin review
- Mặc định, hiển thị thông tin của review
- Nút Delete và Save lần lượt cho phép người dùng xoá và sửa đổi thông tin review nếu đó là review của người dùng
Trang danh sách ng ường thiết kế i dùng : 1 Giao di n:ệu về ReactJS
Hình 4.8: Giao diện trang danh sách người dùng
- Hiển thị danh sách các người dùng
- Ấn vào người dùng trên danh sách để chuyển tới trang thông tin của người dùng
Trang thông tin ng ường thiết kế i dùng : 1 Giao di n:ệu về ReactJS
Hình 4.8: Giao diện trang danh sách người dùng
- Hiển thị thông tin người dùng
- Ấn vào nút All Reviews để chuyển tới trang hiển thị toàn bộ review của người dùng
- Ấn vào nút Thanked Reviews để chuyển tới trang hiển thị toàn bộ review của người dùng đã thank
- Ấn vào nút Viewed movies để chuyển tới trang hiển thị toàn bộ phim của người dùng đã đánh dấu là đã xem
Trang thông tin cá nhân: 1 Giao di n:ệu về ReactJS
Hình 4.8: Giao diện trang danh sách người dùng
- Hiển thị thông tin cá nhân.
- Ấn vào nút Choose Avatar để thực hiện chọn avatar cá nhân
- Ấn vào nút Save để thực hiện thay đổi thông tin cá nhân
- Ấn vào nút Reset để thực hiện đưa các ô thông tin cá nhân trở về ban đầu
- Ấn vào nút All Reviews để chuyển tới trang hiển thị toàn bộ review của cá nhân
- Ấn vào nút Thanked Reviews để chuyển tới trang hiển thị toàn bộ review của cá nhân đã thank