Chương 13-Bài 5. Bài tập tổng hợp - Tạo trang web đọc Truyện Tranh và Tiểu Thuyết Online

Mô tả

Có một Khách hàng mong muốn xây dựng 1 trang web cho người dùng có thể đọc Truyện Tranh và Tiểu Thuyết online. Khách hàng muốn có thể tự quản lý được các Truyện Tranh và Tiểu thuyết có trong hệ thống (có thể Thêm mới, Xóa, hoặc hiệu chỉnh thông tin...). Giao diện yêu cầu đơn giản, sáng và đẹp. Đặc biệt, có thể xem trên di động được, vì đa số người dùng sử dụng các thiết bị thông minh như Máy tính bảng, Điện thoại để xem truyện tranh và tiểu thuyết nhiều hơn trên máy tính.

Yêu cầu

Về thiết kế Database

1. Có thể lưu trữ được các thông tin về Truyện như:
   1. Mã số: có thể dùng để tìm kiếm thông tin nhanh sau này
   2. Tên truyện: tên truyện
   3. Hình ảnh đại diện: dùng để làm hình minh họa khi hiển thị dạng danh sách truyện tranh.
   4. Loại truyện: nếu là #1 thì là Tiểu thuyết; nếu là #2 thì là Truyện tranh
   5. Thể loại: truyện cần phân theo các thể loại như Kiếm hiệp, Thiếu nhi, Trinh thám, ... để người dùng dễ dàng phân nhóm, tìm kiếm theo thể loại yêu thích
   6. Tác giả: tên tác giả của truyện
   7. Mô tả ngắn: các dòng mô tả ngắn gọn, xúc tích về truyện.
   8. Ngày đăng truyện
2. Mỗi 1 Truyện có thể có 1 hoặc nhiều Chương truyện, cần lưu trữ thông tin này. Mỗi chương/tập thì có nội dung dạng chữ (nếu là Tiểu thuyết), các hình ảnh (nếu là Truyện tranh). Mỗi chương/tập thì phải có số, tên chương/tập đó.
   1. Số chương/tập: ví dụ Chương 1, Chương 2, Tập 1, Tập 2...
   2. Tên chương/tập: ví dụ: Chương 1 - Mở đầu; Chương 2 - Trong Tửu Quán Phát Sinh Án Mạng; Tập 1 - Thăm công viên Khủng Long
   3. Nội dung chương/tập: nội dung của chương/tập đó.
3. Nếu là Truyện loại Truyện Tranh thì có khả năng có rất nhiều hình ảnh trong 1 tập truyện, cần có bảng lưu trữ các hình ảnh thuộc về Chương/Tập đó

Về thiết kế Web

1. Cần có các phân vùng backend, frontend rõ ràng cho Người truy cập trang web (viewer) và Người quản trị web (Admin) sử dụng.
2. Giao diện cần sáng, và thiết kế responsive. Có thể sử dụng Bootstrap để thực hiện

UI cơ bản về Frontend

Trang chủ

Trang Chi tiết Truyện Tiểu thuyết/Truyện tranh

Trang Chi tiết Nội dung của 1 chương Tiểu thuyết/Truyện tranh

UI cơ bản về Backend

Tự thiết kế theo CRUD (Create - Read - Update - Delete) các chức năng.  

---

Gợi ý/Hướng dẫn thực hiện

Step 1: thiết kế database

Schema

Có thể sử dụng thiết kế database sau để thực hiện. - Đây là phiên bản database đơn giản, có thể tủy chỉnh thêm theo nhu cầu của các bạn.

Dữ liệu mẫu

• Table truyen

• Table chuong

• Table chuong_hinhanh

Step 2: cần suy nghĩ về luồng hoạt động/sự liên quan/liên kết giữa các Trang với nhau

Về Tiểu thuyết

Chúng ta có thể thiết kế các trang với nhau theo lưu đồ sau:

• Trang chủ: sẽ hiển thị danh sách các Truyện (Tiểu thuyết và Truyện tranh) có trong hệ thống để người dùng xem.
• Khi người dùng click chọn vào trang Tiểu thuyết nào đó -> sẽ hiển thị trang tieuthuyet.php với tham số truyền qua là truyen_id mà người dùng muốn xem. Trong trang này sẽ hiển thị danh sách các Chương có trong Tiểu thuyết này.
• Khi người dùng click chọn vào Chương nào đó -> sẽ hiển thị trang tieuthuyet_noidung.php với tham số truyền qua là truyen_id và chuong_id mà người dùng muốn xem. Trong trang này sẽ hiển thị danh sách Nội dung chương mà người dùng muốn xem.

Về Truyện tranh

Chúng ta có thể thiết kế các trang với nhau theo lưu đồ sau:

• Trang chủ: sẽ hiển thị danh sách các Truyện (Tiểu thuyết và Truyện tranh) có trong hệ thống để người dùng xem.
• Khi người dùng click chọn vào trang Truyện tranh nào đó -> sẽ hiển thị trang truyentranh.php với tham số truyền qua là truyen_id mà người dùng muốn xem. Trong trang này sẽ hiển thị danh sách các Chương/Tập có trong Truyện tranh này.
• Khi người dùng click chọn vào Chương/Tập nào đó -> sẽ hiển thị trang truyentranh_noidung.php với tham số truyền qua là truyen_id và chuong_id mà người dùng muốn xem. Trong trang này sẽ hiển thị danh sách Nội dung chương/tập và các Hình ảnh liên quan về Chương/Tập mà người dùng muốn xem.

Step 3: thực hiện code

Tự làm nhé ;)