Mở đầu I. Bối cảnh của đề tài: Trong thời đại hiện nay, công nghệ thông tin đã phát triển mạnh mẽ với sự gia tăng cả về phạm vi và độ sâu. Máy tính và điện thoại thông minh không chỉ là các thiết bị quý hiếm mà ngày càng trở thành công cụ làm việc và giải trí phổ biến của con người, không chỉ trong môi trường làm việc mà còn tại gia đình. Internet cung cấp cho chúng ta khả năng thực hiện các công việc nhanh chóng và tiện lợi hơn.
Với sự phát triển này, lĩnh vực thương mại điện tử cũng đã phát triển với tốc độ nhanh chóng, đáp ứng nhu cầu sử dụng của con người. Một trong những ví dụ điển hình là các trang web xem phim trực tuyến. Nhờ vào Internet, người dùng có thể truy cập và xem phim một cách dễ dàng và thuận tiện. Động lực tại sao phải làm đề tài: Với nhu cầu giải trí ngày càng cao hiện nay, việc cung cấp các nội dung phim đến người dùng là rất quan trọng.
Vì vậy, nhóm chúng tôi đã thực hiện xây dựng một trang web để xem phim trực tuyến. Trang web này cho phép người dùng truy cập vào một loạt các bộ phim dựa trên sở thích và nhu cầu giải trí của họ. Chúng tôi không chỉ cung cấp nội dung phim đa dạng mà còn cập nhật thường xuyên để đảm bảo người dùng luôn có trải nghiệm giải trí tốt nhất. Hơn nữa, người dùng có thể xem phim trực tuyến mà không cần phải tới một cụm rạp hay cửa hàng nào.
Mục đích chọn đề tài: - Quản lý các thông tin khách hàng - Thêm, xóa, sửa phim - Cập nhật các phim mới phù hợp với nhu cầu của khách hàng - Đưa tất cả các phim lên website để khách hàng dễ dàng lựa chọn - Tăng hiệu quả kinh doanh 4. Khảo sát hiện trạng: 1 - Trang web xem phim là một nền tảng giải trí trực tuyến, mang lại sự tiện lợi cho người dùng mà không cần phải tới rạp chiếu phim. Với giao diện thân thiện, dễ sử dụng, trang web cung cấp các chức năng từ cơ bản đến nâng cao để đáp ứng nhu cầu giải trí của người dùng. Bằng cách đăng nhập vào hệ thống, người dùng có thể dễ dàng tìm kiếm và xem các bộ phim mình quan tâm, mọi lúc, mọi nơi.
Hơn nữa, trang web còn cho phép người dùng thảo luận, bình luận và đánh giá các bộ phim, tạo ra một cộng đồng yêu thích điện ảnh sôi động và tương tác. 2 Chương 2: Phân tích hệ thống I. Định nghĩa Là một utility-first CSS framework, nó cũng giống như Bootstrap, nó có những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó.
Ưu điểm • Bạn có quyền kiểm soát lớn hơn đến cách các yếu tố xuất hiện. Chúng ta có thể thay đổi và tinh chỉnh hình ảnh của một phần tử xuất hiện với các utility class. • Dễ dàng quản lý và duy trì trong các dự án lớn, vì bạn chỉ duy trì các tệp HTML, thay vì một CSS codebase. • Cho phép xây dựng các thiết kế trang web độc đáo dễ dàng hơn, có thể tùy chỉnh mà không phải "vật lộn" với các style không mong muốn.
• Có khả năng tùy biến và mở rộng rất cao, mang đến cho chúng ta sự linh hoạt không giới hạn. • Tối ưu cho môi trường di động và dễ dàng thực hiện các mẫu thiết kế responsive. • Có khả năng trích xuất các pattern phổ biến, lặp đi lặp lại thành các thành phần tùy chỉnh, có thể sử dụng lại trong hầu hết các trường hợp mà không cần viết một dòng CSS tùy chỉnh. • Có các class siêu dễ hiểu.
Chúng ta có thể tưởng tượng các phần tử sau khi được style sẽ trông như thế nào chỉ bằng cách đọc tên class. Các thành phần Không giống như các CSS Framework khác như Bootstrap hoặc Materialize CSS, Tailwind không đi kèm với các thành phần được xác định trước cho các nút, thanh thông báo, thẻ, v. Khái niệm Là giải pháp đơn giản nhất để phân trang trong Angular. Ưu điểm • Cung cấp các giải pháp đơn giản nhưng mạnh mẽ để tạo phân trang trong Angular.
Tất cả đều được đánh giá cao về tính linh hoạt và khả năng đáp ứng của nó. Tuỳ chỉnh khá tiện dụng với NgxPagination và nó cũng được nạp với nhiều chủ đề đẹp III. Modal Components - Định nghĩa: Là phương thức bao gồm ba vùng riêng biệt: Đầu trang, nội dung và chân trang. Các thành phần (ví dụ: bảng dữ liệu, biểu mẫu, chỉ báo tiến trình) có thể chiếm toàn bộ chiều rộng của phương thức.
Định nghĩa Bootstrap 4 (viết tắt là BS4) là phiên bản mới của Bootstrap, là framework HTML, CSS và JavaScript phổ biến nhất để thiết kế web đáp ứng, ưu tiên trên nền tảng di động. Tương tự như Bootstrap 3, Bootstrap 4 hoàn toàn miễn phí tải về và tự do sử dụng. Ưu điểm: • Dễ dùng: bất cứ ai với kiến thức cơ bản về HTML và CSS đều cũng có thể sử dụng Bootstrap • Các tính năng đáp ứng: CSS đáp ứng của Bootstrap thích hợp với điện thoại, máy tính bảng và máy tính để bàn. • Tiếp cận ưu tiên thiết bị di động đầu tiên: Trong Bootstrap, các phong cách điện thoại di động là một phần của framework lõi.
• Tương thích trình duyệt: Bootstrap 4 tương thích với các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera). Các thành phần trong bootstrap 4: Các thành phần trong bootstrap 4 thì rất nhiều, bạn dùng chúng để tạo giao diện cho trang. Sau đây là các components thường dùng trong bootstrap 4 - Alert Alert là hiện ra 1 thông báo cho user xem. Thông báo có thể ở những mức độ thông tin khác nhau như success, warning, danger…Các class có thể dùng: alert-success , alert-info, alert-warning , alert-danger , alert-primary , alert-secondary , alert-light , alert-dark 4 - Badges Thường dùng để thông tin một trạng thái, một điều gì đó.
Badges thay thế label trong bootstrap 3. - Button Button là các nút bạn bày ra trong trang để user nhắp vào. Nút được tạo ra với class btn và class quy định màu của nút. - Images Bootstrap có các class css để định dạng hình ảnh.
- Icons Icon là những biểu tượng nhỏ để minh họa cho text, như các icon phone, email… Bootstrap 3 có 1 thư viện icon riêng của nó là glyphicons, nhưng bootstrap 4 không có glyphicon nữa. Lý do là để thư viện bootstrap nhẹ bớt và đã có nhiều thư viện font icon rất hay như font Awesome, Google Material Design Icons. - List group - Card Là thành phần hiển thị các box thông tin rất hay. Mỗi card là 1 box có header, footer, body.
Trong các box này là nơi bạn hiển thị 1 sản phẩm, 1 tin, 1 khách hàng…. Các card có thể đặt cạnh nhau tạo thành 1 khối nhiều hàng nhiều cột rất dễ dàng. - Navbar Là thành phần giúp tạo thanh menu. - Carousel Carousel là thành phần dùng để tạo các hiệu ứng trình diễn tuần tự (slideshow).
Trong carousel có nhiều slide hiện thông tin. - Collapse Collapse là thành phần giúp ẩn hiện 1 khối nội dung khi user nhắp vào 1 nút hoặc link. - Tooltip Tooltip là 1 popup nhỏ hiện ra chú thích khi user đưa chuột vào 1 tag. - Flex 5 Bootstrap 4 hỗ trợ flex – kỹ thuật làm layout tốt nhất hiện nay.
- Pagination Pagination là thanh phân trang, thường hiện trong trang để user nhắp chuyển sang trang khác. - Jumbotron Jumbotron là grey box nằm ở đầu trang hiển thị tiêu đề và thông tin quan trọng của trang. 6 Chương 3: Thiết kế I. Giao diện trang chủ: Hình 1.
Giao diện trang chủ Giao diện trang chủ bao gồm: - Header: Tên trang web, thẻ liên kết tới các trang khác và các icon - Body: + Banner + Danh sách phim trên trang chủ • Tên phim • Hình ảnh • Số tập • Button o Button xem phim: khi click vào thì sẽ chuyển đến trang xem phim 7 o Button xem chi tiết: khi click vào sẽ hiển thị bảng chi tiết phim trên trang chủ, người dùng có thể xem thông tin chi tiết các phim mà họ muốn • Feedback • Page Navigation: Hiển thị 10 sản phẩm trên 1 trang o Khi click vào button next: sẽ chuyển sang trang kế tiếp o Chọn số trang: sẽ chuyển qua trang mong muốn o Khi click vào button previous: sẽ chuyển về trang trước đó - Footer: hiển thị thông tin của trang II. Trang chi tiết phim: Hình 2. Trang chi tiết phim Trang chi tiết phim bao gồm: - Tên phim - Hình ảnh - Đánh giá - Số lượt xem 8 - Lưu phim III. Trang quản lí phim Hình 3.
Trang quản lí phim Trang sản phẩm bao gồm: • Header: Tên trang web, thẻ liên kết tới các trang khác và các icon • Body: o Button thêm mới: hiển thị form thêm mới phim khi click vào nó o Table chứa các thông tin của sản phẩm: Stt, mã phim, loại phim, tên phim, số năm phát hành, số lượng tập, thao tác ▪ Button chỉnh sửa: hiển thị form chỉnh sửa thông tin khi click vào nó ▪ Button xóa: xóa sản phẩm mình mong muốn • Page Navigation: Hiển thị 10 sản phẩm trên 1 trang o Khi click vào button next: sẽ chuyển sang trang kế tiếp o Chọn số trang: sẽ chuyển qua trang mong muốn o Khi click vào button previous: sẽ chuyển về trang trước đó • Footer: hiển thị thông tin của web 9 IV. Trang thêm phim Hình 4. Trang thêm phim Trang thêm sản phẩm bao gồm: - Textbox nhập thông tin sản phẩm (tên phim, nội dung, năm phát hành, thể loại, hình - Choose file (ảnh đính kèm) - Button: • Button hủy: đóng form thêm mới sản phẩm • Button lưu: lưu sản phẩm mới thành công và hiển thị sản phẩm đó trên table sản phẩm V. Trang chỉnh sửa phim 10 Hình 5.
Trang chỉnh sửa phim Trang chỉnh sửa sản phẩm bao gồm: - Textbox nhập thông tin sản phẩm (tên phim, nội dung, năm phát hành, thể loại, quốc gia, số tập - Choose file (ảnh đính kèm) - Button: • Button hủy: đóng form thêm mới sản phẩm • Button lưu: cập nhật sản phẩm thành công và hiển thị sản phẩm đó trên table sản phẩm VI. Trang quản lý thể loại phim 11 Hình 6.