[CakePHP] View : HtmlHelper

Trong bài trước tôi đã trình bày về cách sử dụng một số hàm cơ bản của FormHelper. Lần này, chúng ta sẽ tiếp tục tìm hiểu một helper khác cũng rất hữu ích, đó là HtmlHepler. Nó sẽ giúp chúng ta tạo ra những option liên quan đến Html dễ hơn, nhanh hơn và mềm dẻo hơn. Trong helper này có rất nhiều hàm của nó sử dụng đến $htmlAttributes. Đây là một mảng các key, value mô tả những thuộc tính của Html, ví dụ như :

$htmlAttributes = array('name' => 'My name', 'value' => '123')
// dòng code trên sẽ render ra thẻ dạng như dưới
// key chính là 2 thuộc tính 'name' và 'value'của thẻ Html nào đó
<tag name="My name" value="123" />

** Bây giờ ta sẽ đi tìm hiều một vài hàm chức năng của HtmlHelper.**

1) charset($charset=null)

Hàm này cho phép set charset cho văn vản Html, nếu null thì mặc định giá trj trong App.encoding sẽ được dùng. Hãy cùng xem cách gọi hàm này :

    echo $this->Html->charset();
    // lúc này ko có giá trị truyền vào nên setting trong App.encoding sẽ được dùng, ví dụ output sẽ là
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    //hoặc có thể bạn sẽ set giá trị mà mình muốn
    echo $this->Html->charset('ISO-8859-1');
    // output
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

2) css(mixed $path,array$options = array())

Hàm này tạo một hoặc nhiều link đến file CSS, nó nhận vào hai đối số, thứ nhất là path_ : có thể là chuỗi của file css hoặc một mảng chứa nhiều file, thứ hai là _options : là một 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.

// Bạn có thể chỉ dùng đến 1 file CSS
echo $this->Html->css('forms');
// Nhưng đôi khi có thể cần đến vài files
echo $this->Html->css(array('forms', 'tables', 'menu'));
// Output sẽ lần lượt là
<link rel="stylesheet" type="text/css" href="/css/forms.css" />
// và
<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" />

// Trường hợp bạn muốn load CSS từ thư mục Plugin của bạn, format sẽ dạng như sau với file app/Plugin/DebugKit/webroot/css/toolbar.css
echo $this->Html->css('DebugKit.toolbar.css');

3) style(array $data,boolean$oneline = true)

Trong trường hợp bạn muốn dùng trực tiếp các style css mà không để trong file, bạn có thể dùng hàm style(). Hàm này nhận vào data là đối số với gía trị là một mảng các cặp key, value thuộc tính CSS, và đối số oneline nếu là true thì output sẽ nằm trên một dòng, và false sẽ ngược lại.

echo $this->Html->style(array(
    'background' => '#633',
    'border-bottom' => '1px solid #000',
), 'true');
// đoạn code trên sẽ cho output trên 1 dòng
background:#633; border-bottom:1px solid #000;

4) image(string $path,array$options = array())

Hàm này sẽ tạo một thẻ image cho bạn, nó nhận vào hai đối số là path chỉ đường dẫn tới ảnh, và options là một mảng các thuộc tính html. Và mặc định CakePHP sẽ hiểu đường dẫn đặt ảnh là ở /app/webroot/img/.

// Nếu bạn muốn tạo một đường link tới một action trong controller bằng ảnh, ví dụ :
<a href="/users/view/6">
    ![Abc](/img/users/1.jpg)
</a>
// thì bạn cần phải khai báo như sau trong view
echo $this->Html->image("users/1.jpg", array(
    "alt" => "Abc",
    'url' => array('controller' => 'users', 'action' => 'view', 1)
));

Trong trường hợp bạn muốn src là full path của ảnh thì hãy dùng fullBase => true. Và tương tự css() thì khi bạn muốn dùng hình ảnh của Plugin thì cũng chỉ cần khai báo theo format : image('PluginName.imageName.imageExtensionName');

5) link(string $title,mixed$url = null, array $options=array(),string$confirmMessage = false)

Hàm này sẽ giúp bạn tạo đường link Html. Với title bạn có thể đặt tiêu đề cho đường link, dùng mixed để định nghĩa url cho link với một chuỗi hay một mảng dạng array('controllers' => 'users', 'action' => 'view');, thứ ba sẽ là mảng options chứa các thuộc tính html. Cuối cùng là _confirmMessage_, nếu bạn muốn có confirm dialog hiển thị hãy điền một chuỗi vào, còn set false thì sẽ disable dialog khi click vào link. Hãy xem ví dụ :

echo $this->Html->link(
    'Delete',
    array('controller' => 'recipes', 'action' => 'delete', 6),
    array('class' => 'button', 'target' => '_blank'),
    "Are you sure you wish to delete this recipe?"
);
// Đoạn code trên sẽ cho ta output
<a href="/recipes/edit/6" class="button" target="_blank"
    onclick="return confirm(
        'Are you sure you wish to edit this recipe?'
    );">
    Edit
</a>

// Tip :
// 1) Khi bạn muốn hiện ra full path thì    trong $mixed hãy khai báo full_base => true
// 2) bạn muốn URL có cả chuỗi query như    /images/view/1?height=400&awidth=500,
// thì hãy khái báo trong $mixed : '?' => array('height' => 400, 'awidth' => 500)

5) 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.

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

6) div(string $class,string$text, array $options)

Chắc hẳn các bạn đã dùng thẻ div rất nhiều trong các ứng dụng web, giống như cái tên thì hàm này tạo một thẻ div dùng css với class_, đến nội dung thẻ sẽ là _text và có nhiều thuộc tính được khai báo trong $options.

echo $this->Html->div('expample', 'Your text is here.', array('id' => 'someId');
// Dòng code trên sẽ có output
<div class="example" id="someId">Your text is here.</div>

7) 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). Mảng list_ chứa một danh sách các _li_ element. Mảng _options chứa một list các thuộc tính Html của thẻ ul hoặc ol. Còn mảng 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_. Cuối cùng _tag định nghĩa loại list thẻ để đùng (ol/ul).

$list = array(
    'Languages' => array(
        'English' => array(
            'American',
            'UK',
        ),
        'German',
    )
);
echo $this->Html->nestedList($list);
// output sẽ là

*   Languages
    *   English
        *   American
        *   UK
    *   German

** 8) tableHeaders(array $names,array$trOptions = null, array $thOptions = null)**

Giờ chúng ta sẽ đi tìm hiểu cách tạo các thẻ trong table, đầu tiên là tạo header cho bảng bằng tableHeaders(). VỚi đối số names_ sẽ là một mảng string tạo heading. Đối số thứ 2 _trOptions sẽ chứa một mảng các thuộc tính Html cho thẻ tr, còn lại $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 :

echo $this->Html->tableHeaders(array(
    'id',
    array('Name' => array('class' => 'highlight')),
    array('Date' => array('class' => 'sortable'))
));
// Các bạn thấy chỉ có đối số đầu tiên gồm 3 th nhưng 2 thẻ th sau được định nghĩa riêng từng class
// Output sẽ là
<tr>
    <th>id</th>
    <th class="highlight">Name</th>
    <th class="sortable">Date</th>
</tr>

9) tableCells(array $data,array$oddTrOptions = null, array $evenTrOptions=null,$useCount = false, $continueOddEven = true)

Giờ chúng ta sẽ đi vào cách sử dụng hàm tableCells() để tạo ra các hàng, cột trong bảng. Đối số đầu tiên là 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ẻ, và ngược lại $evenTrOptions cho các thẻ tr chẵn. Xét đoạn code sau :

echo $this->Html->tableCells(array(
    array(
        'Jul 7th, 2007',
        array(
            'Best Brownies',
            array('class' => 'highlight')
        ),
        'Yes')
));
// Đoạn trên sẽ cho ra output sau
<tr>
    <td>Jul 7th, 2007</td>
    <td class="highlight">Best Brownies</td>
    <td>Yes</td>
</tr>

10) script(mixed $url,mixed$options)

Hàm này include một hoặc nhiều file javascript. Để làm điều đó bạn có thể set url là một chuổi khi muốn khai báo một file javascript còn để một mảng string sẽ cho nhiều files. Còn options sẽ là một mảng các thuộc tính Html. 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.

echo $this->Html->script(
             array('http://code.jquery.com/jquery.min.js',
                  '/other/js/wysiwyg',
                  'scripts'));
// Khi chạy đoạn code trên, CakePHP sẽ sinh ra cho bạn
<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>

Trường hợp bạn muốn dùng file của Plugin thì làm y hệt hàm css() với format tương tự :

echo $this->Html->script('DebugKit.toolbar.js');

Vậy đã có 10 hàm có lẽ sẽ là thường gặp nhất mà tôi đã trình bày trong bài này, HtmlHelper còn một số hàm khác mà các bạn có thể tham khảo Cookbook để áp dụng cho ứng dụng web của mình, như hàm url(), sriptBlock(), para() ...