HTML Collective - Phần 1

Bài đăng này đã không được cập nhật trong 7 năm

I. Giới thiệu và hướng dẫn cài đặt

HTML Collective là một package hỗ trợ cho Laravel xây dựng lên các Form HTML, để cài đặt pakage này trên Laravel, chúng ta sử dụng câu lệnh sau (dành cho những bạn sử dụng composer) :

composer require "laravelcollective/html":"^5.3.0"

Sau khi composer thực thi xong chúng ta vào thư mục config/app.php và thêm trong mục providers như sau:

'providers' => [
    // ...
    Collective\Html\HtmlServiceProvider::class,
    // ...
  ],

Cuối cùng, cũng trong thư mục config/app.php chúng ta thêm vào mục aliases như sau:

'aliases' => [
    // ...
      'Form' => Collective\Html\FormFacade::class,
      'Html' => Collective\Html\HtmlFacade::class,
    // ...
  ],

II. Sử dụng Form trong HTML Collective

Cú pháp để sử dụng một form như sau

{!! Form::open(['url' => 'foo/bar']) !!}
    //
{!! Form::close() !!}

Mặc định phương thức sử dụng khi chúng ta open một form bằng HTML collective sẽ là POST, tất nhiên chúng ta hoàn toàn có thể tùy chỉnh các phương thức mà ta mong muốn, ví dụ như:

{!! Form::open(['url' => 'foo/bar', 'method' => 'put']) !!}
    //
{!! Form::close() !!}

Chú ý: Trong HTML, chỉ hỗ trợ hai phương thức POST và GET trong <form> </form>, các phương thức PUT và DELETE sẽ tự động được thêm vào một _methodẩn trong form của bạn. Trong form bạn có thể trỏ tới action trong controller hoặc route bằng cách:

echo Form::open(['route' => 'route.name'])

echo Form::open(['action' => 'Controller@method'])

Và giả sử, trong form bạn gửi lên có chứa files bạn có thể khai báo như sau:

echo Form::open(['url' => 'foo/bar', 'files' => true])

III. Form Model Binding

1. Sử dụng một Model Form

Sử dụng Form Model, bạn có thể lấy các giá trị trong Model để điền vào form một cách thuận tiện, chúng ta sử dụng phương thức Form::model để làm việc đó:

echo Form::model($user, ['route' => ['user.update', $user->id]])

Bây giờ, khi bạn muốn tạo ra một phần tử chẳng hạn như một text input, thì giá trị của trường trong model sẽ khớp với thuộc tính name của input đó, và tự động điền giá trị lấy từ Models ra rồi điền vào ô input tương ứng. Ví dụ bây giờ trong Model user có trường email trong Form có input có name là email, thì tự động giá trị của trường email sẽ điền vào ô input đó. Và hơn nữa, nếu có một item trong dữ liệu Session khớp với name của input đó thì nó sẽ ưu tiên điền giá trị của trường trong Session vào trong input. Ví dụ như khi bạn cập nhật tài khoản cá nhân, khi bạn nhập sai một trường nào đó, trang sẽ load lại và trả về thông báo "cập nhật thất bại" nhưng các giá trị trước khi bạn cập nhật tại các ô input vẫn sẽ được giữ nguyên như lần trước. Và thứ tự ưu tiên sẽ như sau: Session Flash Data (Old Input) Explicitly Passed Value Model Attribute Data Điều này không những cho phép bạn xây dựng nhanh chóng các Form, điền dữ liệu theo model mà còn giúp bạn dễ dàng điền lại các dữ liệu cũ nếu bạn không được server xác nhận thành công.

Nếu bạn sử dụng Form::model, hãy nhớ đóng lại bằng Form::close !

2. Form Model Accessors

Như chúng ta biết Eloquent Accessor của Laravel cho phép người dùng thao tác với các dữ liệu trước khi đưa ra giá trị trả về. Chẳng hạn trong trường name ở bảng User chỉ lưu tên dạng 'nguyen van a' thì khi bạn sử dụng Eloquent Accessor bạn có thể trả về name dưới dạng Nguyen Van A". Đặc biệt, nó rất hữu ích cho việc xác định định dạng ngày tháng. Ví dụ như giá trị trả về từ DB có định dạng mm/dd/yyyy nhưng trên form sẽ hiển thị kiểu dd/mm/yyyy thì bạn phải viết hai Accessor riêng biệt: một accessor tiêu chuẩn, và một accessor form. Để sử dụng form accessors, đầu tiên bạn thêm vào FormAccessible bên trong class model sau đó tạo ra một phương thức formFooAttribute bên trong model và ở đây Foo là tên một thuộc tính trong model đó, và trong Eloquent Accessor các accessor sẽ được đặt tên theo kiểu "camel-cased", trong đó thành phần ở giữa viết hoa chỉ định ra thuộc tính bên trong model. Trong ví dụ sau đây, ta cần lấy ra accessor của thuộc tính date_of_birth. Thì ở đây accessor sẽ tự động gọi bởi HTML Form Builder nếu ta muốn điền một trường vào trong form khi sử dụng Form::model()

<?php

namespace App;

use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
use Collective\Html\Eloquent\FormAccessible;

class User extends Model
{
    use FormAccessible;

    /**
     * Get the user’s date of birth.
     *
     * @param  string  $value
     * @return string
     */
    public function getDateOfBirthAttribute($value)
    {
        return Carbon::parse($value)->format('m/d/Y');
    }

    /**
     * Get the user's date of birth for forms.
     *
     * @param  string  $value
     * @return string
     */
    public function formDateOfBirthAttribute($value)
    {
        return Carbon::parse($value)->format('Y-m-d');
    }
}

IV. CSRF Protection

Để hiểu về CSRF thì các bạn có thể tham khảo nhiều nguồn. Ở đây để ủng hộ anh em trong nhà mình xin đưa ra bài viết của bạn Nguyen Van Linh )))) https://viblo.asia/vanlinh/posts/amoG84bOGz8P Nếu bạn sử dụng Form::open hoặc Form::model với các method POST, PUT, DELETE thì CSRF token sẽ được sử dụng bởi Laravel với mục đích tạo ra một CSRF Protection ẩn trong form của bạn một cách tự động. Ngoài ra nếu bạn muốn tạo ra một HTML có chưa CSRF bạn có thể sử dụng cú pháp sau: