Ngu ngơ học làm web (x20) - CakePHP2 - Layout default.ctp

Tiếp theo của: Ngu ngơ học làm web (x19) - CakePHP2 – requestAction, layout
-----

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
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web