HtmlHelper (View $view, array $settings = array())
Trong bài 18 chúng ta đã cùng tìm hiểu qua FormHelper, ở bài này sẽ là HtmlHelper. Nó sẽ giúp chúng ta tạo ra những thẻ Html một cách đơn giản và linh hoạt hơn trong phát triển website.
Một số hàm HtmlHelper thường sử dụng:
1) charset($charset=null)
Hàm này cho phép set charset cho văn vản Html, mặc định là utf-8.
Ví dụ:
[php]echo $this->Html->charset();[/php]
Html hiển thị sẽ là:
[php]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />[/php]
Hoặc là:
[php]echo $this->Html->charset(‘ISO-8859-1’);[/php]
Html hiển thị là:
[html]<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />[/html]
2) css(mixed $path, array $options = array()) :Tạo một hoặc nhiều link đến file CSS
Thay đổi từ phiên bản 2.4
$path : có thể là chuỗi đến file css hoặc một mảng chứa nhiều file css.
$options : là mảng option hoặc thuộc tính Html.
Mặc định nếu $path mà không bắt đầu với / thì CakePHP hiểu path của file css sẽ được đặt ở thư mục/app/webroot/css
Ví dụ:
Đối với 1 file css:
[php]echo $this->Html->css(‘forms’);[/php]
Html sẽ là:
[html]<link rel="stylesheet" type="text/css" href="/css/forms.css" />[/html]
Đối với nhiều file css:
[php]echo $this->Html->css(array(‘forms’, ‘tables’, ‘menu’));[/php]
Html sẽ là:
[html]
<link rel="stylesheet" type="text/css" href="/css/forms.css" />
<link rel="stylesheet" type="text/css" href="/css/tables.css" />
<link rel="stylesheet" type="text/css" href="/css/menu.css" />
[/html]
Nếu muốn sử dụng css từ Plugin(app/Plugin/DebugKit/webroot/css/toolbar.css) sẽ có cú pháp như sau:
[php]echo $this->Html->css(‘DebugKit.toolbar.css’);[/php]
3) meta(string $type, string $url = null, array $options = array())
$type: Các loại thẻ meta:
| type | translated value |
| html | text/html |
| rss | application/rss+xml |
| atom | application/atom+xml |
| icon | image/x-icon |
$url: url cho các thẻ meta, có thể là chuỗi hoặc mảng
$options: mảng các thuộc tính html
Ví dụ:
[php]
<?php
echo $this->Html->meta(‘favicon.ico’,’/favicon.ico’,array(‘type’ => ‘icon’));
?>
// Html hiển thị là:
<link href="http://mysite.com/favicon.ico" title="favicon.ico" type="image/x-icon" rel="alternate"/>
<?php
echo $this->Html->meta(‘Comments’,’/comments/index.rss’,array(‘type’ => ‘rss’));
?>
// Html hiển thị là:
<link href="http://mysite.com/comments/index.rss" title="Comments" type="application/rss+xml" rel="alternate"/>
[/php]
Phương pháp này cũng có thể được sử dụng để thêm từ khóa meta và mô tả:
[php]
<?php
echo $this->Html->meta( ‘keywords’,’enter any meta keyword here’);
?>
// Html là:
<meta name="keywords" content="enter any meta keyword here" />
<?php
echo $this->Html->meta(‘description’,’enter any meta description here’);
?>
// Html là:
<meta name="description" content="enter any meta description here" />
//Để xuất một robot tag noindex sử dụng đoạn mã sau:
echo $this->Html->meta(array(‘name’ => ‘robots’, ‘content’ => ‘noindex’));
[/php]
4) docType(string $type = ‘xhtml-strict’): loại docType của trang web
Các giá trị của $type:
| type | value |
| html4-strict | HTML4 Strict |
| html4-trans | HTML4 Transitional |
| html4-frame | HTML4 Frameset |
| html5 | HTML5 |
| xhtml-strict | XHTML1 Strict |
| xhtml-trans | XHTML1 Transitional |
| xhtml-frame | XHTML1 Frameset |
| xhtml11 | XHTML1.1 |
Ví dụ:
[php]
echo $this->Html->docType();
// Outputs:
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
// "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
echo $this->Html->docType(‘html5’);
// Outputs: <!DOCTYPE html>
echo $this->Html->docType(‘html4-trans’);
// Outputs:
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
// "http://www.w3.org/TR/html4/loose.dtd">
[/php]
5) style(array $data, boolean $oneline = true): trường hợp bạn muốn dùng trực tiếp các style css, không để trong file
$data: mảng các css, theo các cặp key, value
$oneline: true(mặc định) là output css sẽ nằm trên một dòng, và false ngược lại
Ví dụ:
[php]
echo $this->Html->style(array(
‘background’ => ‘#633’,
‘border-bottom’ => ‘1px solid #000’,
‘padding’ => ’10px’
));
[/php]
Outputs sẽ là: background:#633; border-bottom:1px solid #000; padding:10px;
6) image(string $path, array $options = array()): Hàm này sẽ tạo một thẻ image, mặc định CakePHP sẽ hiểu đường dẫn đặt ảnh là ở /app/webroot/img/
$path: chỉ đường dẫn tới ảnh
$options là một mảng các thuộc tính html
Ví dụ:
[php]
echo $this->Html->image(‘cake_logo.png’, array(‘alt’ => ‘CakePHP’));
//Outputs là:
//<img src="/img/cake_logo.png" alt="CakePHP" />
[/php]
Khi tạo một đường link tới một action trong controller bằng ảnh ta sẽ làm như sau:
[php]
echo $this->Html->image("recipes/6.jpg", array(
"alt" => "Brownies",
‘url’ => array(‘controller’ => ‘recipes’, ‘action’ => ‘view’, 6)
));
//Outputs là:
<a href="/recipes/view/6">
<img src="/img/recipes/6.jpg" alt="Brownies" />
</a>
[/php]
Trong trường hợp bạn muốn src là full path của ảnh thì hãy dùng fullBase => true trong $option. Khi bạn muốn dùng hình ảnh của Plugin thì cũng chỉ cần khai báo image(‘PluginName.imageName.imageExtensionName’);
Ví dụ: muốn sử dụng ảnh trong app/Plugin/DebugKit/webroot/img/icon.png, ta viết:
[php]echo $this->Html->image(‘DebugKit.icon.png’);[/php]
7) link(string $title, mixed $url = null, array $options = array()): tạo ra thẻ a html
$title: Tiêu đề thẻ a
$url: định đạng cho link với một chuỗi hay một mảng.
$option: chứa các thuộc tính html.
Ví dụ:
[php]
echo $this->Html->link(
‘Enter’,
‘/pages/home’,
array(‘class’ => ‘button’, ‘target’ => ‘_blank’)
);
//Outputs:
//<a href="/pages/home" class="button" target="_blank">Enter</a>
[/php]
Sử dụng “full_base”=>true:
[php]
echo $this->Html->link(
‘Dashboard’,
array(
‘controller’ => ‘dashboards’,
‘action’ => ‘index’,
‘full_base’ => true
)
);
//Outputs:
//<a href="http://www.mysite.com/dashboards/index">Dashboard</a>
[/php]
Sử dụng confirm() dialog Javascript trong $option
[php]
echo $this->Html->link(
‘Delete’,
array(‘controller’ => ‘recipes’, ‘action’ => ‘delete’, 6),
array(‘confirm’ => ‘Are you sure you wish to delete this recipe?’)
);
[/php]
Outputs:
[html]
<a href="/recipes/delete/6" onclick="return confirm(‘Are you sure you wish to delete this recipe?’);">Delete</a>
[/html]
Muốn trong $url có chuỗi query:
[php]
echo $this->Html->link(‘View image’, array(
‘controller’ => ‘images’,
‘action’ => ‘view’,
1,
‘?’ => array(‘height’ => 400, ‘width’ => 500))
);
//Output:
//<a href="/images/view/1?height=400&width=500">View image</a>
[/php]
thay đổi trong phiên bản 2.6: tham số $confirmMessage là bị loại bỏ, sử dụngconfirm trong $option thay thế
8) media(string|array $path, array $options) : định dạng các thẻ chạy file mp3, mp4…
$path: đường dẫn tới tập tin media
$option: mảng các thuộc tính html.
mới trong 2.1
ví dụ:
[html]
<?php echo $this->Html->media(‘audio.mp3’); ?>
// Output
<audio src="/files/audio.mp3"></audio>
<?php echo $this->Html->media(‘video.mp4’, array(
‘fullBase’ => true,
‘text’ => ‘Fallback text’
)); ?>
// Output
<video src="http://www.somehost.com/files/video.mp4">Fallback text</video>
<?php echo $this->Html->media(
array(
‘video.mp4’,
array(
‘src’ => ‘video.ogg’,
‘type’ => "video/ogg; codecs=’theora, vorbis’"
)
),
array(‘autoplay’)
); ?>
// Output
<video autoplay="autoplay">
<source src="/files/video.mp4" type="video/mp4"/>
<source src="/files/video.ogg" type="video/ogg; codecs=’theora, vorbis’"/>
</video>
[/html]
9) tag(string $tag, string $text, array $htmlAttributes)
Hàm này sẽ trả về một thẻ $tag với $text ở bên trong cùng với những thuộc tính được khai báo trong$htmlAttributes.
[php]
echo $this->Html->tag(‘span’, ‘Hello World.’, array(‘class’ => ‘welcome’));
//bạn đọc code trên chắc cũng hiểu hàm tag() sẽ tạo ra thẻ span với text là Hello World và dùng lớp welcome
//output
//<span class="welcome">Hello World</span>
// Chú ý là nếu bạn không có $text (set null) thì sẽ trả về một thẻ rỗng
[/php]
10) div(string $class, string $text, array $options)
$class: class của thẻ div
$text: nội dung
$option: thuộc tính html
[php]
echo $this->Html->div(‘error’, ‘Please enter your credit card number.’);
//Output
<div class="error">Please enter your credit card number.</div>
[/php]
11) para(string $class, string $text, array $options): đây là cho thẻ <p></p>, tương tự thẻ div
12) nestedList(array $list, array $options = array(), array $itemOptions = array(), string $tag = ‘ul’) Hàm này sẽ tạo một nested list (ul, ol).
$list chứa một danh sách các li element.
$options chứa một list các thuộc tính Html của thẻ ul hoặc ol.
$itemsOptions lại chứa một list các thuộc tính Html của thẻ li bên trong ul hoặc ol.
$tag định nghĩa loại list thẻ để dùng (ol/ul).
[php]
$list = array(
‘Languages’ => array(
‘English’ => array(
‘American’,
‘Canadian’,
‘British’,
),
‘Spanish’,
‘German’,
)
);
echo $this->Html->nestedList($list);
[/php]
Output:
[html]
<ul>
<li>Languages
<ul>
<li>English
<ul>
<li>American</li>
<li>Canadian</li>
<li>British</li>
</ul>
</li>
<li>Spanish</li>
<li>German</li>
</ul>
</li>
</ul>
[/html]
Giờ ta tìm hiểu 2 thẻ để tạo table
13) tableHeaders(array $names, array $trOptions = null, array $thOptions = null) tạo header cho bảng
$names sẽ là một mảng string tạo heading.
$trOptions sẽ chứa một mảng các thuộc tính Html cho thẻ tr
$thOptions sẽ là các thuộc tính cho thẻ th. Nhưng như thế tất cả các thẻ th sẽ cùng chung thuộc tính. Nếu bạn muốn set từng cột th có những thuộc tính riêng có thể tham khảo code dưới :
[php]
echo $this->Html->tableHeaders(array(‘Date’, ‘Title’, ‘Active’));
echo $this->Html->tableHeaders(
array(‘Date’,’Title’,’Active’),
array(‘class’ => ‘status’),
array(‘class’ => ‘product_table’)
);
[/php]
Output:
[html]
<tr>
<th>Date</th>
<th>Title</th>
<th>Active</th>
</tr>
<tr class="status">
<th class="product_table">Date</th>
<th class="product_table">Title</th>
<th class="product_table">Active</th>
</tr>
[/html]
Từ version 2.2 có thể viết như sau:
[php]
echo $this->Html->tableHeaders(array(
‘id’,
array(‘Name’ => array(‘class’ => ‘highlight’)),
array(‘Date’ => array(‘class’ => ‘sortable’))
));
[/php]
14) tableCells(array $data, array $oddTrOptions = null, array $evenTrOptions = null, $useCount = false, $continueOddEven = true) để tạo ra các hàng, cột trong bảng.
$data mảng 2 chiều chứa dữ liệu của các dòng.
$oddTrOptions là mảng các thuộc tính cho các thẻ tr lẻ
$evenTrOptions cho các thẻ tr chẵn.
$useCount (boolean) – Add class “column-$i”
$continueOddEven: ——
[php]
echo $this->Html->tableCells(array(
array(
‘Jul 7th, 2007’,
array(
‘Best Brownies’,
array(‘class’ => ‘highlight’)
),
‘Yes’)
));
////////2
echo $this->Html->tableCells(
array(
array(‘Red’, ‘Apple’),
array(‘Orange’, ‘Orange’),
array(‘Yellow’, ‘Banana’),
),
array(‘class’ => ‘darker’)
);
[/php]
Outputs:
[html]
<tr>
<td>Jul 7th, 2007</td>
<td class="highlight">Best Brownies</td>
<td>Yes</td>
</tr>
<!–2–>
<tr class="darker"><td>Red</td><td>Apple</td></tr>
<tr><td>Orange</td><td>Orange</td></tr>
<tr class="darker"><td>Yellow</td><td>Banana</td></tr>
[/html]
15) url(mixed $url = NULL, boolean $full = false)
[html]
<?php
//—-1
echo $this->Html->url(array(
"controller" => "posts",
"action" => "view",
"bar"
));
//—-2
echo $this->Html->url(array(
"controller" => "posts",
"action" => "view",
"foo" => "bar"
));
//—-3
echo $this->Html->url(array(
"controller" => "posts",
"action" => "list",
"ext" => "rss"
));
//—-4
echo $this->Html->url(array(
"controller" => "posts",
"action" => "search",
"?" => array("foo" => "bar"),
"#" => "first"
));
?>
<!– Output–>
<!–1–>
/posts/view/bar
<!–2–>
/posts/view/foo:bar
<!–3–>
/posts/list.rss
<!–4–>
/posts/search?foo=bar#first
[/html]
16) useTag(string $tag)
[html]
<?php
$this->Html->useTag(
‘form’,
‘http://example.com’,
array(‘method’ => ‘post’, ‘class’ => ‘myform’)
);
?>
//Output
//<form action="http://example.com" method="post" class="myform">
[/html]
17) script(mixed $url, mixed $options) Hàm này include một hoặc nhiều file javascript. Mặc định CakePHP hiểu file js được lưu ở thư mục /app/webroot/js. Còn khi bạn muốn chỉ đến thư mục hãy thì hãy dùng / ở trước path chứa trong $url. Bạn cũng có thể chỉ ra đường link đến một file js ở host khác.
$url là một chuổi hoặc mảng sẽ cho nhiều files.
$options sẽ là một mảng các thuộc tính Html.
[html]
<?php
echo $this->Html->script(
array(‘http://code.jquery.com/jquery.min.js’,
‘/other/js/wysiwyg’,
‘scripts’
));
?>
//Output:
<script type="text/javascript" href="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" href="/other/js/wysiwyg.js"></script>
<script type="text/javascript" href="/js/scripts.js"></script>
[/html]
Tương tự như css, image nếu muốn sử dụng js trong Plugin ta sử dụng echo $this->Html->script(‘DebugKit.toolbar.js’);
Phần tìm hiểu về HtmlHelper đến đây là gần như đã hết cho phần hỗ trợ HTML của Cakephp nên xin được kết thúc phần này
Các bạn có thể tham khảo thêm tại đây
[thongbao]
- 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ể.
- Cảm ơn các bạn đã đọc.
[/thongbao]