Tiếp theo Bài 31 chúng ta sẽ thay thế các link dẫn vào chi tiết 1 truyện và thực hiện hiển thị các thông tin truyện trong trang chi tiết này.

1 Thay thế link .

Mở file /app/View/Pages/index.ctp tìm đến các đoạn trong thẻ div có class là product-box, sẽ có 2 chổ chúng ta cần chèn liên kết đó là thẻ <a> cho tên truyện và thẻ <a> cho hình ảnh. Các bạn thay thế toàn bộ thẻ div có class product-box bằng đoạn sao:


<div class="product-box">
<span class="sale_tag"></span>
<p>
<?php $image_name = $DataComponent->get_image(IMG_DIR . DS . STORIES_DIR . DS, $value['Story']['id'].'.jpg');?>
<?php
$img = $this->Html->image($image_name, array('alt'=>$value['Story']['name']));
echo $this->Html->link($img,
array(
'controller' => 'pages',
'action' => 'detail_story',
'id' => $value['Story']['id'],
'slug' => strtolower(Inflector::slug($value['Story']['name']))),
array('class'=> "title", 'escape'=>false)
);
?>
</p>
<?php
echo $this->Html->link($value['Story']['name'],
array(
'controller' => 'pages',
'action' => 'detail_story',
'id' => $value['Story']['id'],
'slug' => strtolower(Inflector::slug($value['Story']['name']))),
array('class'=> "title")
);
?>
<br/>
</div>

Save file lại và tiến hành chạy test thử trang chủ và click vào các truyện trên trang sẽ được chuyển vào chi tiết. Các bạn test thử sau đó sẽ đến phần 2 phía dưới.

2. Chi tiết truyện

Lấy thông tin truyện trong /app/Controller/PagesController.php action detail_story() trong này sẽ gồm các thông tin được lấy ra như: thông tin chi tiết truyện, thông tin chap mới nhất, thông tin tất cả các chap của truyên, các truyện thuộc cùng thể loại.

Nội dung action này như sau:


$data = array();
//chi tiết truyện
$dataStory = $this->Story->find('first', array(
'conditions'=>array('Story.id'=>$id, 'Story.status'=> 1),
'recursive'=>0
));
$data['dataStory'] = $dataStory;
//Chi tiet chap mới nhất của truyện
$dataChapterEnd = $this->Chapter->find('first', array(
'conditions'=>array('Chapter.story_id'=>$id, 'Chapter.status'=> 1),
'order' =>array('id'=>'DESC'),
'recursive'=>-1
));
$data['dataChapterEnd'] = $dataChapterEnd;
//danh sach chapter
$dataListChapter = $this->Chapter->find('all', array(
'conditions'=>array('Chapter.story_id' => $id , 'Chapter.status'=> 1),
'fields' => array('name', 'id','created'),
'order' =>array('id'=>'DESC'),
'recursive'=>-1
));

$data['dataListChapter'] = $dataListChapter;
//truyện cùng thể loại
$dataStoryCoincident = $this->Story->find('all', array(
'conditions'=>array('id <>' => $id ,'status' => 1, "category_id"=> $dataStory["Story"]["category_id"]),
'order' => array('updated' => 'desc'),
'limit'=>8,
'recursive'=>-1
));
$i = 1;
$dataTem = array();
$item = array();
$item_active = array();
foreach($dataStoryCoincident as $row){
if($i <= 4){
$item_active[] = $row;
}else{
$item[] = $row;
}
$i++;
}
$dataTem = array(
'item_active' => $item_active,
'item' => $item
);
$data['dataStoryCoincident'] = $dataTem;

$this->set('data', $data);

Mở file /app/View/Pages/detail_story.ctp, đây là trang chi tiết của chúng ta.

Thẻ <section> đầu tiên có hiển thị tấm ảnh banner tạm thời đóng lại nhá.

Phần này mình sẽ hiển thị các thông tin như hình ảnh đại diện, tên truyện, thể loại truyện, số chương đang có …. các thông tin các bạn tuỳ chọn có thể hiển thị ở đâu mình thích không nhất thiết giống mình.

Nội dung file này hơi dài các bạn tham khảo thêm trong phần download phía cuối bài.

 

Hiện tại cơ sở dữ liệu mình ít truyện nên hiện không nhiều lắm, các bạn tự thêm truyện để demo nhá.

Sau khi có 2 file trên các bạn chạy lại trang chi tiết sẽ được như hình sau:

Screen Shot 2017-07-28 at 2.20.42 PM

Tuỳ theo nhu cầu của từng người mà các bạn phát triển web để có các chức năng riêng, ví dụ như like, share, comment…mấy phần này mình không làm đâu. Ai có ý định làm thì cứ làm, nếu có lỗi mình sẽ hỗ trợ.

3 Chi tiết 1 chapter của truyện.

Ở trang chi tiết truyện, phần danh sách chapter là danh sách các chap hiện tại của truyện đó, khi click vào 1 link sẽ ra trang chi tiết của chapter.

Đầu tiên tạo một routes trong /app/Config/routes.php nội dung:


Router::connect(
'/:slug1/:slug2-:id.html',
array('controller' => 'pages', 'action' => 'detail_chap'),
array(
'pass' => array('slug1','slug2','id'),
"id"=>"[0-9]+", // chỉ là số
)
);

Tạo action detail_chap($slug1,$slug2,$id = null) trong /app/Controller/PagesController.php

Tạo file /app/View/Pages/detail_chap.ctp, nội dung đơn giản như sau:


<section class="header_text sub">
<!-- <img class="pageBanner" src="themes/images/pageBanner.png" alt="New products" > -->
<h4><span>Chi tiết chapter </span></h4>
</section>
<section class="main-content">
<div class="row">


</div>
</section>

Tiến hành chạy thử link như sau: http://doctruyen.local/once_pice/fairy_tail-8.html/ kết quả như bên dưới:

Screen Shot 2017-07-28 at 4.41.41 PM

Tiếp theo là lấy thông tin của chap trong PagesController.php:


$dataChapter = $this->Chapter->find('first', array(
'conditions'=>array('id = '.$id),
'recursive'=>-1
));
$data['dataChapter'] = $dataChapter;

$this->set('data', $data);

và hiển thị ra ngoài view như sau:


<?php
$dataChapter = array();
if(!empty($data["dataChapter"])){
$dataChapter = $data["dataChapter"];
}
?>
<section class="header_text sub">
<!-- <img class="pageBanner" src="themes/images/pageBanner.png" alt="New products" > -->
<h4><span>Chi tiết chapter </span></h4>
<h4><span><?php echo $dataChapter["Chapter"]["name"]?> </span></h4>
</section>
<section class="main-content">
<div class="row">
<div class="span12">
<div class="span4 text-right">
<a>Chương trước</a>
</div>
<div class="span3">
<select class="form-control changechapter">

</select>
</div>
<div class="span4">
<a>Chương sau</a>
</div>
</div>

</div>
</section>

Chạy lại page để xem kết quả.

Bài này đến đây thôi, còn phần 3 nữa. Hy vọng các bạn cùng theo dõi với nongdanit

Kết luận

  1. Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
  2. Cảm ơn các bạn đã đọc.

Nongdanit.info
[Cakephp] Bài 32 – Toàn tập website truyện tranh phần 10.2
Tagged on: