GIỚI THIỆU ĐỀ TÀI
Tên đề tài
XÂY DỰNG WEBSITE REVIEW PHIM
Mô tả đề tài
Ngày nay, nhu cầu xem phim trở thành một phần thiết yếu trong cuộc 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 ngày càng phát triển, sản xuất hàng triệu bộ phim mỗi năm với nhiều chất lượng khác nhau Do đó, nhiều người tìm kiếm những bộ phim hay và xứng đáng với thời gian và tiền bạc của họ.
Website Cinerate cung cấp đánh giá và điểm số phim từ khán giả và nhà phê bình chuyên nghiệp, giúp người dùng chọn lựa bộ phim phù hợp 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 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.
Lý do chọn đề tài
Hiện nay, việc sử dụng các trang web đánh giá phim trở nên phổ biến với người dùng online Sự phát triển công nghệ đã giúp hệ thống đánh giá ngày càng chính xác, dẫn đến xu hướng xem các bài đánh giá và điểm số trên các trang web review phim trước khi ra rạp tăng cao ở mọi lứa tuổi.
Chúng em đã quyết định 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 mẻ hơn so với những gì đã thực hiện trước đây.
8 làm để có thể tăng sự hiểu biết của bản thân ở nhiều mặt hơn.
Khảo sát hiện trạng
Hiện nay, nhiều website review phim nổi tiếng như Letterboxd, IMDb và Rotten Tomatoes đã trở thành lựa chọn hàng đầu cho người dùng Với giao diện hấp dẫn và dễ sử dụng, cùng với kho phim phong phú, những trang web này tập trung vào việc thống kê và tổng hợp thông tin về các bộ phim, giúp người xem dễ dàng quyết định xem liệu bộ phim có đáng xem hay không.
Chúng em sẽ phát triển một website chuyên review phim, tích hợp tính năng tóm tắt thông tin bộ phim và tổng hợp đánh giá, điểm số từ các chuyên gia và người dùng, nhằm mang đến trải nghiệm tiện lợi và dễ sử dụng cho người dùng.
Công nghệ sử dụng
Môi trường thiết kế
Công cụ hỗ trợ
CƠ SỞ LÝ THUYẾT
Tổng quan về ReactJS
React là thư viện JavaScript miễn phí và mã nguồn mở, giúp xây dựng giao diện người dùng (UI) theo hướng tái sử dụng thông qua các thành phần (component) Được phát triển bởi Meta và cộng đồng lập trình viên từ năm 2013, React đã trở thành một công cụ phổ biến trong phát triển ứng dụng web.
React là một thư viện front-end phổ biến, thường được sử dụng để phát triển ứ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ì React không được sử dụng độc lập mà kết hợp với nhiều thư viện và framework khác Nhiều ứng dụng lớn như Facebook, Discord và Reddit đã áp dụng React trong phát triển của họ.
2.1.2 Khái niệm cơ bản trong ReactJS:
Trong React, UI được xây dựng thông qua việc tạo và sử dụng 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 giao diện phức tạp Mã React được viết bằng ngôn ngữ JSX, giúp việc viết mã 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 chạy ứng dụng, React tạo ra một mô hình DOM ảo từ các component, sau đó chuyển đổi nó thành DOM thật để trình duyệt có thể hiển thị Khi có thay đổi trong giao diện người dùng, React sẽ so sánh DOM ảo và DOM thật để chỉ cập nhật những phần cần thiết mà không làm tươi lại toàn bộ trang Quá trình một component được hiển thị lần đầu trong DOM thật được gọi là mount, trong khi việc gỡ bỏ một component khỏi DOM thật do giao diện đã không còn đượ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, ta viết một hàm trả về JSX mô tả UI của component Đây là cách hiện đại và nên dùng nhất ngày nay Ngoài ra, còn cách cũ là Class
In React, we create a class that extends React.Component and implement the render method to return the JSX for the user interface Whenever React needs to render a component, it calls either the functional component or the render method of the class.
Component để lấy JSX và render UI từ nó
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 user names, birth dates, or IDs for display 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 sử dụng State để lưu trữ dữ liệu đó Hàm useState được sử dụng để khai báo một state, trả về một hằng chứa giá trị state và hàm để cập nhật giá trị đó Mỗi khi setState được gọi, React sẽ tự động render lại component với giá trị state mới State có thể được sử dụng trong code HTML tương tự như props.
Trong React, các state dùng chung giữa nhiều component nên được đặt ở component cha, và được truyền xuống các component con qua props Khi component con cần cập nhật state, hàm setState sẽ được truyền vào thông qua props Mô hình này được gọi là Dòng dữ liệu Một chiều (Unidirectional Data Flow), trong đó dữ liệu di chuyển từ component cha xuống con, cho phép con có thể thay đổi state của cha Cách tiếp cận này giúp đồng bộ hóa dữ liệu giữa các thành phần trong giao diện người dùng (UI) và làm cho 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 được gọi là Hook, trong đó useState là một ví dụ điển hình 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
Tổng quan về Express.js
Express.js là một framework web back-end miễn phí và mã nguồn mở, chạy trên môi trường Node.js Framework này thường được sử dụng để xây dựng REST API và là server framework phổ biến nhất trên Node Với cơ chế middleware đơn giản, Express giúp xử lý các request và trả về response cho API một cách dễ dàng.
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
Middleware là khái niệm cốt lõi trong Express, hoạt động như một hàm nhận đối tượng request, xử lý và trả về response cho client hoặc chuyển tiếp request đến middleware khác Middleware được gán cho một API route, bao gồm URL và phương thức HTTP như GET, POST, PATCH.
…) nào đó bằng các hàm get, post, patch,… trên đối tượng app Dùng hàm use để chạy một middleware trên mọi route
Hình 2.6: Khai báo và sử dụng một middleware trả về chữ Hello World ở route GET
Middleware có khả năng thay đổi một request và chuyển tiếp nó đến middleware khác Chúng ta có thể sử dụng một số middleware để chạy trên tất cả các route nhằm kiểm tra thông tin xác thực như Bearer Token, ghi log thông tin, hoặc chuyển đổi body của request sang định dạng JSON trước khi gửi đến middleware của một route cụ thể.
Hình 2.7: Request được xử lý ở middleware myLogger trước khi chuyển tới middleware ở route GET /
Một số middleware hữu dụng có sẵn:
• body-parser: Xử lý body của request sang JSON, text,…
• cookie-parser: Đọc và đặt cookie
• cors: Quản lý chia sẻ tài nguyên liên origin
• session: Quản lý session người dùng ở server
Ta có thể nhóm các route có liên quan (cùng base URL) vào một router Ta gắn router này vào Express qua hàm use
Hình 2.8: Tạo và dùng router
2.2.2.3 Các thư viện hay dùng với Express
Express hay được dùng với các thư viện và framework sau đây:
• Passport: Hỗ trợ xác thực người dùng (Authentication, Authorization)
• Prisma: ORM để truy cập database
• EJS: Render website từ template Dùng cho các website render hoàn toàn ở server
• Swagger-stats: Giám sát telemetry và hiệu suất của API
2.2.3 Ưu điểm, nhược điểm Ưu điểm:
• Cơ chế middleware rất linh hoạt và có sẵn nhiều middleware có nhiều nhu cầu như xác thực, cookie, …
• Xử lý được nhiều kết nối đồng thời Nhược điểm:
• Thiếu cấu trúc và quy chuẩn chặt chẽ để theo
• Phải cài thêm thư viện mới xây dựng được ứng dụng hoàn thiện
• Hỗ trợ kiểu dữ liệu không tốt lắm
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Sơ đồ Use-case
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
22 Đ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
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
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 đăng nhập, đăng ký
Hình 4.1: Giao diện đăng nhập
Hình 4.2: Giao diện đăng ký
- Khi click vào nút Log in, sẽ dẫn vào trang đăng nhập của Website
- Khi click vào chữ sign up, sẽ dẫn vào trang đăng ký tài khoản của
- Sau khi đăng nhập thành công, trang sẽ tự chuyển hướng về trang chủ.
Trang chủ
Hình 4.3 Giao diện trang chủ
- Hiển thị các bộ phim mới ra và nổi tiếng gần đây
Trang thông tin phim
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
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
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ười dùng
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ười dùng
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
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
