Ở bài trước chúng ta đã thay đổi được front-end của CakePHP thành một page shopper miễn phí, ở bài này mình sẽ xuất dữ liệu trong database ra ngoài để hiển thị trang chủ của chúng ta: menu(thể loại truyện), hiển thị một số truyện,…

Hiển thị menu(thể loại truyện)

Trước mắt chúng ta tạo thêm 1 element để chưa phần logo và menu của website, nó là thành phần luôn luôn hiển thị ở tất cả các page nên mình tạo element để dễ sử dụng về sau.

Tạo một file /app/View/Elements/story/menu.ctp nội dung là phần thẻ <section></section> đầu tiên trong file /app/View/Pages/index.ctp

<section class="navbar main-menu">
 <div class="navbar-inner main-menu"> 
 <a href="index.html" class="logo pull-left">
 <img src="../template_story/themes/images/logo.png" alt="" class="site_logo" />
 </a>
 <nav id="menu" class="pull-right">
 <ul>
 <li><a href="./products.html">Woman</a>
 <ul>
 <li><a href="./products.html">Lacinia nibh</a></li> 
 <li><a href="./products.html">Eget molestie</a></li>
 <li><a href="./products.html">Varius purus</a></li> 
 </ul>
 </li> 
 <li><a href="./products.html">Man</a></li> 
 <li><a href="./products.html">Sport</a>
 <ul> 
 <li><a href="./products.html">Gifts and Tech</a></li>
 <li><a href="./products.html">Ties and Hats</a></li>
 <li><a href="./products.html">Cold Weather</a></li>
 </ul>
 </li> 
 <li><a href="./products.html">Hangbag</a></li>
 <li><a href="./products.html">Best Seller</a></li>
 <li><a href="./products.html">Top Seller</a></li>
 </ul>
 </nav>
 </div>
</section>

Và gọi element đó ở /app/View/Layouts/story.php, nhớ là phải đúng vị trí nhá (trong id wrapper)

<?php echo $this->element('story/menu');?>

Trong file /app/View/Elements/story/menu.ctp hiển thị các menu chúng ta phải làm. Menu hiện tại có 2 cấp bậc, còn web truyện chúng ta chỉ có 1 cấp thôi.

Nếu bạn nào làm 2 cấp thì comment bên dưới mình sẽ hỗ trợ.

Vào controller /app/Controller/CategoriesController.php, thực hiện tạo một function menu nội dung như sau:


public function menu(){
 $result = $this->Category->find('all', array('fields' => array('id', 'name','parent_id'),'conditions'=>array(' parent_id=0'),'order'=>array('id'=>'asc'), 'recursive'=>-1));
 return $result;
 }

Lấy danh sách các thể loại với parent_id = 0, sắp xếp theo id tăng dần và chỉ lấy 3 trường id, name, parent_id.

Vào file/app/View/Elements/story/menu.ctp gọi đến funtion menu() bằng cách

<?php echo $this->element('story/menu');?>

Khi biến $categoryMenu có dữ liệu chúng ta tiến hành foreach dữ liệu và hiển thị ra.


<?php if(!empty($categoryMenu)):?>
 <ul>
 <?php foreach ($categoryMenu as $key => $value) { ?>
 <li><a href="#"><?php echo $value['Category']['name'];?></a></li>
 <?php }?>
 </ul>
 <?php endif;?>

Chạy lại url các bạn sẽ thấy menu chúng ta thay đổi thành các menu trong admin.

Screen Shot 2017-05-31 at 11.08.35 AM

Đến đây phần hiển thị dữ liệu menu đã cơ bản xong, đương nhiên sẽ còn phần click vào từng thể loại hiển thị ra những truyện thuộc thể loại đó sẽ là một bài khác.

Hiển thị truyện ở trang chủ.

Đây là phần hiển thị ở trang chủ nên ta sẽ viết ở /app/Controller/PagesController.php và /app/View/Pages/index.ctp

Truyện mới nhất:

Là truyện vừa được cập nhật một chapter mới(thêm mới), chúng ta sẽ dựa vào trường updated của bảng stories đều này cũng đồng nghĩa là khi bạn thêm 1 chapter hoặc edit 1 chapter nào đó thì phải cập nhật lại trường updated của bảng stories

Thêm đoạn sau vào /app/Controller/ChaptersController.php trong 2 action admin_add và admin_edit khi Save dữ liệu Chapter

$dataStory = array(
 'Story' => array(
 'id' => $arrParams['story_id'],
 'updated' => $now
 )
 );
 $this->Story->save($dataStory);

Quan sát html phần truyện mới nhất này ta có thể thấy nó được hiển thị kiểu slide có 4 truyện cho mỗi slide nên mình limit 8 truyện sau đó chia làm 2 mỗi slide 4 truyện, tương đương 2 mảng mỗi mảng 4 truyện.


$dataStoryUpdate = $this->Story->find('all', array(
 'conditions'=>array('status=1'),
 'order' => array('updated' => 'desc'),
 'limit'=>8,
 'recursive'=>-1
 ));
 $i = 1;
 $data = array();
 $item = array();
 $item_active = array();
 foreach($dataStoryUpdate as $row){
 if($i <= 4){
 $item_active[] = $row;
 }else{
 $item[] = $row; 
 }
 $i++;
 }
 $data = array(
 'item_active' => $item_active,
 'item' => $item
 );
 $this->set('dataStoryNewUpdate', $data);

sau đó chúng ta hiển thị nó ngoài /app/View/Pages/index.ctp(các bạn download file)

Truyện xem nhiều:

Là các truyện được người dùng xem nhiều nhất, cách làm sẽ là thêm một trường view  trong bảng stories, để khi người xem click vào 1 truyện nào đó ta cộng thêm view 1 giá trị rồi cập nhật vào chính truyện được chọn.

Tiến hành thêm một trường vào bảng stories: ALTER TABLE `stories` ADD `view` INT(11) NOT NULL DEFAULT ‘0’ AFTER `status`;

Chạy câu lệnh trên trong giao diện phpmyadmin.

Nó cũng được show thêm slide nên ta cũng chia ra làm 2 mảng dữ liệu nhá. Đoạn lấy dữ liệu xem nhiều trong /app/Controller/PagesController.php như sau:

$dataStoryView = $this->Story->find('all', array(
 'conditions'=>array('status=1'),
 'order' => array('view' => 'desc'),
 'limit'=>8,
 'recursive'=>-1
 ));
 $i = 1;
 $data = array();
 $item = array();
 $item_active = array();
 foreach($dataStoryView as $row){
 if($i <= 4){
 $item_active[] = $row;
 }else{
 $item[] = $row; 
 }
 $i++;
 }
 $data = array(
 'item_active' => $item_active,
 'item' => $item
 );
 $this->set('dataStoryView', $data);

sau đó chúng ta hiển thị nó ngoài /app/View/Pages/index.ctp(các bạn download file)

Sau khi foreach dữ liệu ngoài view các bạn chạy lại url sẽ thấy các truyện được hiển thị, ngoài view trong code của mình có sử dụng Component Data mà mình đã giới thiệu để hiển thị hình ảnh ngoài front-end.

Screen Shot 2017-05-31 at 2.02.54 PM

Thế là chúng ta đã có thể hiển thị menu và truyện theo layout hiện tại, phần tiếp theo chúng ta sẽ gắn các link vào trong menu, truyện, các liên kết dưới footer, header….

Bổ sung phần menu có 2 cấp:

Đầu tiên phải thêm dữ liệu vào database:

<p class="p1"><span class="s1">INSERT INTO `categories` (`name`, `parent_id`, `lft`, `rght`, `date_created`, `date_updated`, `description`)</span></p>
<p class="p1"><span class="s1">VALUES</span></p>
<p class="p1"><span class="s1"> ('ABC', 1, 15, 16, '2018-06-01 03:56:23', '2018-06-01 03:56:23', 'ABC');</span></p>
<p class="p1"><span class="s1">INSERT INTO `categories` (`name`, `parent_id`, `lft`, `rght`, `date_created`, `date_updated`, `description`)</span></p>
<p class="p1"><span class="s1">VALUES</span></p>
<p class="p1"><span class="s1">('ABC2', 1, 17, 18, '2018-06-01 03:56:23', '2018-06-01 03:56:23', 'ABC');</span></p>

Nhớ là cái parent_id là id của menu cha nha. Ở đây mình chỉ thêm 2 menu con thuộc menu cha có id là 1.

Tiếp theo ở file /app/View/Elements/story/menu chúng ta sửa lại ở đoạn sau(thêm phần element con nữa).


<?php foreach ($categoryMenu as $key => $value) { ?>
<li><a href="#"><?php echo $value['Category']['name'];?></a>
<?php echo $this->element('story/submenu',array('id'=>$value['Category']['id']));
?>
</li>
<?php }?>

Tạo file/app/View/Elements/story/submenu.ctp với nội dụng như sau:


<?php $data = $this->requestAction('/categories/submenu/'.$id);?>
<?php if(!empty($data)):?>
<ul>
<?php foreach ($data as $key => $value) { ?>
<li><a href="#"><?php echo $value['Category']['name'];?></a>
</li>
<?php }?>
</ul>
<?php endif;?>

Và cuối cùng lấy dữ liệu ra ở file /app/Controller/CategoriesController.php với action sau:


public function submenu($id){
$arrProducer = $this->Category->find('all', array(
'fields' => array('id', 'name','parent_id'),
'conditions' => array('parent_id = '.$id),
'order'=>array('id'=>'asc'),
'recursive' =>-1
));
return $arrProducer;
}

Khi chạy lại chúng ta sẽ thấy menu có id là 1 sẽ có thêm menu con nữa còn các menu khác thì không có.

Cách làm này là đơn giản nhất đối với menu đa cấp, đương nhiên nó không tối ưu nhất. Nhưng nếu chỉ có 2 cấp bậc thì không vấn đề gì cả. Mình có sử dụng nó cho menu 3 cấp và có sử dụng cache nên vẫn chạy rất ổn.

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 30 – Toàn tập website truyện tranh phần 9
Tagged on: