-----
Phần x20. CakePHP2
– Layout default.ctp
Phần này sẽ tìm hiểu một chút về layout default.ctp.
Đọc thêm về hàm $this->Session->flash() tại đây:
Đọc thêm về layout ở đây: https://book.cakephp.org/2.0/en/views.html#layouts
Layout là cái khung sườn để chứa các view, nếu muốn các view
có cái khung hiển thị giống nhau thì thiết kế chung cho các view một cái
layout.
Vậy trong layout sẽ có phần chung (view nào cũng có) và phần
riêng (phần nội dung khác của mỗi view).
Phần chung sẽ được đặt trong layout, ví dụ đặt trong layout
default.ctp.
Phần riêng sẽ được đặt trong mỗi view, ví dụ view
Books\index.ctp.
Ở layout, sẽ đặt phần riêng của mỗi view vào một ví trí bất
kì bằng lệnh: $this->fetch(), ví dụ:
<?php echo $this->fetch('content'); ?>
Hoặc,
echo $this->fetch('css');
echo $this->fetch('script');
Ở view hoặc controller, để chỉ định nó sẽ dùng layout nào,
dùng lệnh: $this->layout = 'tên layout';
Nếu không được chỉ định, layout mặc định sẽ là default.ctp.
Xem (clip số 24b – chickenrainshop):
Giao diện để ở chế độ mặc định xấu quá, nên css một chút.
[chickenrainshop.css]
#header {
margin-top:
10px;
}
.pricetotal {
background:
#C0C0C0;
height: 25px;
float: right;
width: 150px;
border-radius: 3px;
text-align: center;
margin-right: 3px;
font-size: 18px;
}
.navbar-default {
background-color:
#3E93BD;
border-color: #E7E7E7;
border-radius: 5px;
}
.navbar-default .navbar-brand {
color: #f5f5f5;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #f5f5f5;
background: #286090;
border-radius: 5px;
}
.navbar-default .navbar-nav > li > a {
color: #f5f5f5;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #f5f5f5;
background: #286090;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #286090;
background-color:
#f5f5f5;
}
.search .input input[name='data[Book][keyword]'] {
margin-top: 4px;
border-radius:
4px;
}
.content .panel .panel-heading {
background:
#C0C0C0;
margin-top: 0px;
}
.sidebar .panel-info {
margin-top:
10px;
}
.sidebar .panel-info .panel-heading{
margin-top: 0px;
}
#content .content {
border: 1px
solid #f5f5f5;
margin-top:
10px;
margin-left:
50px;
width: 800px;
padding-left:
0px;
padding-right:
0px;
}
.book-thumbnail {
height: 200px;
margin-bottom: 10px;
display: block-inline;
padding: 3px;
}
.book-info {
text-align:
center;
}
.book-info img {
max-height:
100px;
width: 100px;
}
[book.ctp]
<div class="row">
<?php
foreach($books as $book): ?>
<div
class="col col-lg-3">
<div
class="book-thumbnail">
<div
class="caption book-info">
<?php
echo $this->Html->image($book['Book']['image']); ?>
<h5><?php
echo $this->Html->link($book['Book']['title'],
'/'.$book['Book']['slug']); ?></h5>
<?php
foreach($book['Writer'] as $writer): ?>
<?php
echo $this->Html->link($writer['name'], '/tac-gia/'.$writer['slug'],
['class' => 'author']).' '; ?>
<?php
endforeach; ?>
<p
class="price">Giá: <?php echo
$this->Number->currency($book['Book']['sale_price'],' VND',['places'
=> 0,'wholePosition' => 'after']); ?></p>
</div>
</div>
</div>
<?php
endforeach; ?>
</div>
Để thiết lập title cho trang, trong controller sử dụng lệnh
$this->set(‘title_for_layout’, ‘title mới’). Ví dụ,
[ControllerBooks, action index()]
$this->set('title_for_layout', 'Trang chủ - chickenrainshop');
[View\Books\index.ctp]
<div class="panel">
<h4
class="panel-heading">
<span
class="glyphicon glyphicon-bookmark">
Sách
mới
<?php
echo $this->Html->link('(xem tất cả »)', '/sach-moi', [
'class'
=> 'more'
]);
?>
</span>
</h4>
<?php echo
$this->element('book', ['books' => $books]); ?>
</div>
-----------
Cập nhật 23/5/2017
-----------