-----
Phần x19. CakePHP2
– requestAction, layout
Xem (clip số 23 – chickenrainshop):
- Hiển thị dữ liệu từ controller này lên một view khác
- Sử dụng requestAction
- Hiển thị dữ liệu trong mọi view, đặt trong
layouts\default (9":19)
requestAction là chức năng được sử dụng để gọi một action từ
view.
- Trong controller định nghĩa một action bất kì, action này
sẽ return một biến. Ví dụ trong
CategoriesController.php, định nghĩa action menu()
public function
menu() {
if ($this->request->is('requested'))
{
$categories
= $this->Category->find('all', [
'recursive'
=> -1,
'order'
=> ['name' => 'asc']
]);
return
$categories;
}
}
Để ý hàm kiểm tra một request gửi từ view tới là requested
thì mới xử lý: ($this->request->is('requested')).
Trước đến giờ mới chỉ kiểm tra một request là post hoặc get.
- Tại view bất kì, nếu muốn lấy dữ liệu do action trả về thì
sử dụng lệnh requestAction. Ví dụ trong element menu_categories.ctp sẽ lấy dữ
liệu do action menu() trả về:
<?php $categories =
$this->requestAction('/categories/menu'); ?>
<?php if (!empty($categories)): ?>
<?php foreach
($categories as $category): ?>
<?php echo
$this->Html->link($category['Category']['name'],
'/danh-muc/'.$category['Category']['slug']); ?> <br>
<?php
endforeach ?>
<?php endif ?>
Để hiển thị menu trong mọi trang của front-end, gọi element
menu_categories.ctp trong layout default.ctp.
…
<div id="content">
<?php
echo $this->Session->flash(); ?>
<?php
echo $this->fetch('content'); ?>
<?php echo
$this->element('menu_categories'); ?>
</div>
<div
id="footer">
…
Xem (clip số 24a – chickenrainshop):
- Áp dụng giao diện mới cho một website
- Bố cục (layout) của một trang web (4":40)
- Tùy biến layouts\default (5":30)
- Tham chiếu đến file CSS bằng helper (8":30)
- Đặt class cho một form bằng helper (11":29)
- This->fetch('content')(16":11)
Sửa lại giao diện cho các trang Home, Category\view, writer,
search, Book\view.
Các trang trên có chung layout, dạng như sau:
Head (chứa các
thông tin của thẻ <head>)
|
|
Header: chứa menu chung
cho các trang
|
|
Body\content: chứa
nội dung riêng cho mỗi trang
|
Body\sidebar: chung
cho các trang
|
Footer
|
|
Giao diện mới có sử dụng Bootstrap, nên sẽ lên mạng để tải
Bootstrap về.
Dùng phiên bản hiện tại là 3.3.7.
Tải Bootstrap về máy, giải nén, sẽ thấy ba thư mục: fonts,
css, js.
Chép nguyên thư mục fonts bỏ vào thư mục webroot của
chickenrainshop.
Chép các tập tin (bootstrap.min.css, bootstrap.min.css.map, bootstrap-theme.min.css,
bootstrap-theme.min.css.map) trong css bỏ vào thư mục webroot\css của
chickenrainshop.
Chép tập tin bootstrap.min.js
trong js bỏ vào thư mục webroot\js của chickenrainshop.
Vì Bootstrap có sử dụng thư viện jQuery, nên phải tải thư
viện jQuery từ trên mạng về (tập tin jquery.min.js): https://jquery.com/ , rồi chép vào thư mục
webroot\js của chickenrainshop. Lưu ý: khi sử dụng, thư viện jQuery phải được
gọi trước thư viện Bootstrap. Ví dụ,
<script src="js/jquery.min.js"></script>
<script
src="js/bootstrap.min.js"></script>
Trong thư mục webroot\css, tạo thêm tập tin
chickenrainshop.css, sau này sẽ làm css cho giao diện sau, tạm thời chỉ cần thế
này thôi cũng được.
[chickenrainshop.css]
#header {
margin-top:
10px;
}
.pricetotal {
background:
#C0C0C0;
}
Trong clip hướng dẫn làm trên Bootstrap hơi cũ, dưới đây là
tập tin default.ctp với Bootstrap phiên bản 3.3.7.
[default.ctp]
<!DOCTYPE html>
<html>
<head>
<?php echo
$this->Html->charset(); ?>
<title>
<?php echo $title_for_layout;
?>
</title>
<?php
echo
$this->Html->meta('icon');
echo
$this->Html->css('bootstrap.min');
echo
$this->Html->css('chickenrainshop');
echo
$this->fetch('meta');
echo
$this->fetch('css');
echo
$this->fetch('script');
?>
</head>
<body>
<div
id="container" class="container">
<div
id="header">
<nav
class="navbar navbar-default">
<div
class="navbar-header">
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#mainmenu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a
href="#" class="navbar-brand">Chickenrainshop</a>
</div>
<div
class="navbar-collapse collapse" id="mainmenu">
<ul class="nav
navbar-nav">
<li
class="active"><?php echo $this->Html->link('Sách mới',
'/sach-moi') ?></li>
<li><a
href="#ban-chay">Sách bán chạy</a></li>
<li><a
href="#lien-he">Liên hệ</a></li>
</ul>
<ul
class="nav navbar-nav pull-right">
<?php
echo
$this->Form->create('Book', [
'url'
=> ['action' => 'get_keyword'],
'class'
=> 'navbar-form search'
]);
echo
$this->Form->input('keyword',[
'label'
=> '',
'style'
=> 'width: 200px',
'placeholder'
=> 'Tìm kiếm...'
]);
echo
$this->Form->end();
?>
</ul>
</div>
</nav>
</div><!--
#header -->
<div
id="content">
<div
class="row">
<div
class="content col col-lg-9">
<?php
echo $this->Session->flash(); ?>
<?php
echo $this->fetch('content'); ?>
</div><!--
content -->
<div
class="sidebar col col-lg-3">
<div
class="panel panel-info">
<h4
class="panel-heading"><i class="glyphicon
glyphicon-shopping-cart"></i>Giỏ hàng</h4>
<ul>
<li><a
href="">Hoa vàng trên cỏ xanh</a>(60.000đ)</li>
<li><a
href="">Tuổi thơ dữ dội</a>(50.000đ)</li>
</ul>
<p
class="pricetotal"><span class="label">Tổng:
110.000đ</span></p>
<button
type="button" class="btn btn-primary btn-block">Xem/Cập
nhật giỏ hàng</button>
</div>
<div
class="panel">
<h4
class="panel-heading"><i class="glyphicon
glyphicon-th-list"></i>Danh mục sách</h4>
<?php
echo $this->element('menu_categories'); ?>
</div>
</div><!--
sidebar -->
</div>
</div><!--
#content -->
<div
id="footer">
<div
class="container">
<p
class="text-muted pull-right">Học CakePHP2</p>
</div>
</div>
</div>
<script
src="js/jquery.min.js"></script>
<script
src="js/bootstrap.min.js"></script>
</body>
</html>
[menu_categories.ctp]
<?php $categories =
$this->requestAction('/categories/menu'); ?>
<?php if (!empty($categories)): ?>
<ul>
<?php
foreach ($categories as $category): ?>
<li><?php
echo $this->Html->link($category['Category']['name'],
'/danh-muc/'.$category['Category']['slug']); ?></li>
<?php
endforeach ?>
</ul>
<?php endif ?>
-----------
Cập nhật 22/5/2017
-----------