Cakephp layout

Cakephp layout | Hướng dẫn tạo mới layout cho cakephp

Việc tạo một layout cho một trang sản phẩm hay trang chủ,… là cách tạo mới cách nhìn không nhàm chán cho mỗi nội dung trên website. Hôm nay mình sẽ cùng các bạn tạo mới một  cakephp layout default  (mặc định) cho một trang sản phẩm:

Cakephp layout
Cakephp layout

Hiện tại trong products_controller.php dưới có nội dung như sau:

class ProductsController extends AppController{
      var $name='Products';
 
function index() { 
     $this->set('products',$this->Product->find('all'));
 }

Mình đang đưa toàn bộ thông tin về các sản phẩm ra  http://localhost/ABC/products/index

Và ở View:

<h2>Views all Products</h2>
<table>
 <tr>
 <th>Name</th>
 <th>Shortdesc</th>
 <th>Price</th>
 <th>action</th>
 </tr> 
 <?php foreach($products as $product): ?>
 <tr>
 <td><?php echo $html->link($product['Product']['name'],array('action'=>'detail', $product['Product']['id'])); ?></td>
 <td><?php echo $product['Product']['shortdesc']; ?></td>
 <td><?php echo $product['Product']['price']; ?></td>
 <td>
 <?php echo $html->link('Edit',array('action'=>'edit',$product['Product']['id'])); ?>
 <?php echo $html->link('Delete',array('action'=>'delete',$product['Product']['id']),NULL,'Are you sure you want to delete this Product'); ?>
 </td>
 </tr>
 <?php endforeach;?>
</table>
<p><?php echo $html->link('Add Product',array('action'=>'add',$product['Product']['id'])); ?></p>

Mặc định khi duyệt web với địa chỉ http://localhost/ABC/products/index thì các thông tin xuất ra được thể hiện như mặc định của cakephp layout.

Bây giờ chúng ta sẽ tạo mới một view : default.ctp tại thư mục view/layout/default.ctp với nội dung:

<?php echo $html->docType('xhtml-trans'); ?>
<html>
 <head>
       <title><?php echo $title_for_layout; ?></title>
       <?php echo $html->css('styles'); ?>
 </head>
 <body>
   <div class="container">
    <div id="header">
      <h1>Product Page</h1>
    </div>
    <div id="container">
      <?php echo $session->flash();?>
      <?php echo $content_for_layout;?> 
    </div>
   </div>
 </body>
</html>

Tạo mới một file styles.css trong webroot/css/styles.css (bạn tự định nghĩa nhé)

-> Chúng ta có thể sử dụng file css của một số framework css như: Bootstrap,…

Trong products_controller.php ta thêm như sau:

class ProductsController extends AppController{
      var $name='Products';
 
function index() { 
     $this->set('products',$this->Product->find('all'));
     $this->set('title_for_layout','Product Page');
 }

OK. Bây giờ bạn hãy F5 lại trình duyệt để thấy sự thay đổi nhé !

 

Trả lời

Thư điện tử của bạn sẽ không được hiện thị công khai. Các trường bắt buộc được đánh dấu *

Bạn có thể sử dụng các thẻ HTML và thuộc tính sau: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>