[Cakephp] Bài 18 – FormHelper trong View của CakePHP

FormHelper

FormHelper trong CakePHP là một Helper trong số nhiều Helper mà CakePHP cung cấp cho chúng ta nhằm nâng cao khả năng làm việc với Html cụ thể đây là form, các thành phần trong form, có thể tạo ra các thành phần html một cách nhanh chóng theo chuẩn mà CakePHP quy định. Giúp code chúng ta nhìn dễ hiểu, ngắn gọn và đảm bảo thống nhất.

a) Tạo Form.

Cách tạo ra Form sử dụng FormHelper có 2 hàm được gọi là create() để tạo ra(bắt đầu) và end() để đóng form(kết thúc). Cú pháp create():

FormHelper::create(string $model = null, array $options = array())

Các tham số trong hàm create() có thể không thêm vào, khi đó CakePHP sẽ submit form với URL và controller hiện tại, mặc định sẽ là phương thức POST. Khi gọi hàm này thì trên view sẽ có được ID của form một cách tự động, bao gồm “tên của model + tên của action + Form“.

Ví dụ:

Trong file add.ctp của user (/app/View/Users/add.ctp) ta gọi hàm create() như sau:

[php]

echo $this->Form->create();

[/php]

Kết quả nhận được khi xem html là:

[html]

[/html]

$model:

Nếu muốn chỉ định rõ một model khác với model hiện tại thì có thể dùng đối số $model để khai báo.

[php]

echo $this->Form->create(‘<span class="s1">Recipe</span>’);

[/php]

Output sẽ là:

[html]

[/html]

Đó là form cho việc thêm dữ liệu, còn với trường hợp chỉnh sửa thì CakePHP sẽ xem khóa chính có được đưa vào hay không và sẽ tạo ra một form chỉnh sửa mới.

Ví dụ: với url chỉnh sửa là: http://yousite.com/recipes/edit/5, tương ứng như sau:

[php]

// Controller/RecipesController.php:
public function edit($id = null) {
if (empty($this->request->data)) {
$this->request->data = $this->Recipe->findById($id);
} else {
// Save logic goes here
}
}

// View/Recipes/edit.ctp:
// $this->request->data[‘Recipe’][‘id’] = 5,
//edit form
<?php echo $this->Form->create(‘Recipe’); ?>

[/php]

Output sẽ là:

[html]

[/html]

$options: nhận vào một mảng các lựa chọn cho việc tạo form

type : phương thức submit dữ liệu (get, put, delete), hoặc file tức là tạo form-data.
action : khai báo action trong controller hiện tại mà bạn muốn form thực hiện khi submit.
url : trường hợp bạn muốn thực hiện một action không thuộc controller hiện tại thì bạn dùng url.
default : nếu set false thì khi click submit thì action của form sẽ không thực hiện, chẳng hạn khi bạn sẽ dùng AJAX để lấy dữ liệu rồi submit qua AJAX.
inputDefaults : option này cho phép bạn định nghĩa một loạt các option cho hàm input() khi sử dụng trong form. Như bạn có thể set để bỏ label, div của tất cả input…

Chúng ta sẽ tìm hiểu từ options để hiểu rõ hơn:

$options[‘type’]: xác định loại form được tạo ra, có các loại như: post, get, put, file và delete tùy theo mục đích mà chúng ta sử dụng.

Ví du:

[php]

//Khai báo là get

echo $this->Form->create(‘User’, array(‘type’ => ‘get’));

//Kết quả html sẽ là:

[/php]

Khi khai báo là file thì phương thức sẽ là post và có thêm enctype=”multipart/form-data”

[php]

echo $this->Form->create(‘User’, array(‘type’ => ‘file’));

//Kết quả html là:

[/php]

Khi sử dụng “put” hoặc “delete” thì phương thức cũng là post, nhưng khi subbmit thì HTTP request sẽ yêu cầu có ghi đè. Điều này giúp cho CakePHP hỗ trợ tốt các trình duyệt.

$options[‘action’]: khai báo action, nếu không khai báo sẽ lấy action mặc định của controller hiện tại, không thì chúng ta sẽ chỉ định đến một action mới không cùng controller cũng được($options[‘url’])

Ví dụ:

[php]

//khai báo action cùng controller

echo $this->Form->create(‘User’, array(‘action’ => ‘login’));

//Kết quả html là:

//khai báo action không cùng controller

echo $this->Form->create(null, array(‘url’ => array(‘controller’ => ‘recipes’, ‘action’ => ‘add’)));

//Kết quả html là:

//Cũng có thể action đến một trang web

echo $this->Form->create(null, array(‘url’ => ‘http://www.google.com/search’,’type’ => ‘get’));

[/php]

$options[‘inputDefaults’]: định nghĩa các mặc định bên trong form

Ví dụ:

[php]

//Khi muốn tất cả input trong form của bạn ko có label, bỏ thẻ div
echo $this->Form->create(‘User’, array(‘inputDefaults’ => array(‘label’ => false,’div’ => false)));

echo $this->Form->input(‘password’); // lúc này input của bạn sẽ ko có label và thẻ div

echo $this->Form->input(‘username’, array(‘label’ => ‘Username’));// có label

[/php]

Đó là việc tạo ra form còn đóng form lại, thì ta dùng end() để làm điều này.

[php]

<?php echo $this->Form->create(); ?>

<!– Form elements go here –>

<?php echo $this->Form->end(); ?>

[/php]

Nếu truyền vào một chuỗi thì CakePHP sẽ tạo thẻ đóng form cùng với một nút submit có tên là chuỗi đó:

[php]

<?php echo $this->Form->end(‘Finish’); ?>

//html sẽ là:

[/php]

b) Các thẻ(element) trong form:

input(string $fieldName, array $options = array()):

Hàm này sẽ giúp ta tạo tự động những element như :

Thẻ div
Nhãn – label
Các loại element input
Element lỗi với message (nếu có)

Về loại của input sẽ tùy thuộc vào khai báo của bạn, chẳng hạn như là trường text,checkbox, textarea, password, email … Và tất cả sẽ được khai báo trong mảng $options, bạn có thể dùng các key sau :

type : có thể là : text, checkbox, textarea, email, tel, day, month, year, hour, minute, file…
div : dùng khi bạn muốn set thuộc tính cho thẻ div chứa input. Nếu bạn set false thì output sẽ không có thẻ div nữa.
label : set label cho input của mình bằng thuộc tính này. Nếu set false thì label của input sẽ mất đi.
error : bạn có thể thay thế message báo lỗi, set vài thuộc tính cho lỗi. Nếu set false thì CakePHP sẽ bỏ cả message và field classes. Nếu bạn chỉ muốn bỏ message thì dùng errorMessage => false để thay thế.
before, between, separator, after : bạn dùng các key này khi muốn tao ra markup (đánh dấu) trong output của input.
format : key này điều khiển thứ tự của các thẻ HTML được generate từ FormHelper, nó là một mảng string. Đây là các key được hỗ trợ : array(‘before’, ‘input’, ‘between’, ‘label’, ‘after’,’error’).
inputDefaults : giống với inputDefaults khi ta tạo form, nó sẽ lặp lại cùng những thiết lập cho tất cả input.

Ví dụ:

[php]

echo $this->Form->input(’email’, array(‘type’ => ’email’));
//1) html như sau
<div class="input email">
<label for="UserEmail">Email</label>
<input type="email" name="data[User][email]" value="" id="UserEmail" />
</div>
/*
* Được sinh tự động gồm 3 thẻ :
* input, label cho input đó và div bao bên ngoài input
*/

//2) khai báo chi tiết hơn
echo $this->Form->input(‘User.name’, array(‘div’ => array(‘id’ => ‘mainDiv’,’title’ => ‘Div Title’,’style’ => ‘display:block’)));
// html là:
<div class="input text" id="mainDiv" title="Div Title" style="display:block">
<label for="UserName">Name</label>
<input name="data[User][name]" type="text" value="" id="UserName" />
</div>

//3) Về before, after, between và separator !
echo $this->Form->input(‘field’, array(‘before’ => ‘–before–‘,’after’ => ‘–after–‘,’between’ => ‘–between—‘,’separator’ => ‘–separator–‘,’options’ => array(‘1’, ‘2’)));
// html là:
<div class="input">
–before–
<input name="data[User][field]" type="radio" value="1" id="UserField1" />
<label for="UserField1">1</label>
–separator–
<input name="data[User][field]" type="radio" value="2" id="UserField2" />
<label for="UserField2">2</label>
–between—
–after–
</div>

[/php]

Trong hàm input() này chúng ta có thêm các key riêng biệt để tạo ra nhiều loại input khác nhau. Trước tiên sẽ là các key option chung nhất ( cách khai báo giống với các option bên trên):

class : sử dụng class cho input.
id : nếu bạn không muốn CakePHP tạo tự động ID cho input của mình thì dùng key này.
default : nếu bạn đặt giá trị cho key này CakePHP sẽ chọn đó làm giá trị mặc định cho input của bạn. Kế đến là các key option dùng riêng cho select, checkbox và radio.
selected : key này dùng với các loại select input như select, date, time…
empty : nếu là true thì nó sẽ set input của bạn empty.
hiddenField : Bình thường với input là checkboxes, radios thì sẽ có một hidden input sinh ra để key trong $this->request->data sẽ vẫn tồn tại dù không có một giá trị được chỉ ra. Do đó, nếu bạn không muốn có hidden input này thì hãy set hiddenField bằng false.

Và với loại input thời gian thì cũng có những key riêng của chúng.

timeFormat : key này dùng để chỉ ra format của select input cho thời gian. Giá trị có thể là 12, 24 và null.
dateFormat : cái tên đã nói lên rằng bạn có thể set format cho ngày tháng của bạn. Các giá trị bạn có thể dùng là D, M, Y và null.
minYear và maxYear: bạn muốn select của mình có giá trị năm bắt đầu từ năm nào hay năm tối đa có thể chọn thì hãy dùng 2 key này.
orderYear : bạn có thể set thứ tự năm tăng hay giảm dần bằng ‘asc’ và ‘desc’.
interval : nếu bạn set interval => 10 thì bạn có thể select số phút là 0, 10, 20, 30, 40, 50.
round : bạn có thể set làm tròn bằng up, down hoặc để null sẽ làm tròn lên khi >= 5, còn lại sẽ làm tròn xuống.

label(string $fieldName, string $text, array $options): Tạo ra một thẻ label với nội dung là $fieldName, nhưng nếu $text được đưa vào thì nó sẽ thay thế. Ngoài ra, hàm này chấp nhận mảng $options để khai báo một loại các thuộc tính HTML, class, ID…

text(string $name, array $options): Tạo ra một input để nhập text, $options cho phép bạn khai báo một loạt các thuộc tính HTML,class, ID…(giống cho các hàm dưới)

password(string $fieldName, array $options) Tương tự hàm text() nhưng loại input sẽ để nhập mật khẩu

hidden(string $fieldName, array $options) Giúp bạn tạo ra một input ẩn (chính là input hidden).

textarea(string $fieldName, array $options) Tạo ra một vùng nhập text.(textarea)

checkbox(string $fieldName, array $options) Tạo ra một checkbox.

radio(string $fieldName, array $options, array $attributes): Tạo ra một tập hợp các radio để lựa chọn. Hàm này có thêm $attributes với các key:

value : dùng để set một giá trị nào đó mặc định được chọn
separator : dùng để chia tách các lựa chọn, ví dụ bạn dùng thẻ thì các lựa chọn sẽ nằm riêng biệt từng dòng khác nhau.
between : nếu bạn dùng thuộc tính này nó sẽ được chèn vào giữa legend và lựa chọn đầu tiên.
disabled : nếu bạn set là true hoặc ‘disabled’ thì sẽ không có radio nào được generate.
legend : bạn muốn bỏ legend đi thì hay set thuộc tính này bằng false.

select(string $fieldName, array $options, array $attributes): Hàm này tạo ra một select với mảng $options đưa vào. Ngoài ra bạn có thể dùng các thuộc tính sau để thiết lập $attributes các lựa chọn trong select :

value : dùng để set một option nào đó mặc định được chọn
options : key này cho phép chỉ ra rõ ràng những lựa chọn cho 1 select input hay một radio group. Nếu mà không chỉ ‘type’ là radio thì CakePHP mặc định hiểu là output sẽ là select input.
multiple : nếu bạn set true thì có thể chọn được nhiều option.
disabled : nếu bạn set true thì CakePHP sẽ disable tất cả option của bạn, còn không bạn có thể đưa vào một mảng các option muốn disable đi.

Trên là tất cả các FormHelper được sử dụng nhiều trong lập trình và phát triển web, tuy không đầy đủ nhưng cơ bản thì đã có thể sử dụng cho lập trình, còn có các hàm khác như: file(), submit(), button(), … nếu không đủ dùng hoặc các bạn muốn tìm hiểu thêm thì có thể tham khảo thêm ở đây cách sử dụng thì cũng giống với những hàm ở trên.

[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]

[Cakephp] Bài 18 – FormHelper trong View của CakePHP