Bài 14 : Laravel HTML package viết mã HTML dễ dàng

Trong dự án, các tài nguyên như ảnh, các file css, javascript, font… được đặt trong thư mục public, để tổ chức tốt hơn chúng ta sẽ tạo ra các thư mục css, js, font chứa các loại file tương ứng. Khi tham chiếu đến các tài nguyên chúng ta có thể sử dụng ngôn ngữ HTML tiêu chuẩn hoặc có một tùy chọn nữa là sử dụng mã giả của gói Laravel HTML, ví dụ:

<img src="/images/logo.png" alt="All Laravel Logo" />

{!! HTML::image('images/logo.png', 'All Laravel Logo) !!}

Cài đặt gói Laravel HTML package

Đến thư mục gốc của dự án và sử dụng lệnh composer require để cài đặt gói Laravel HTML (tên chính xác là LaravelCollective). Ở các phiên bản Laravel 4.x gói này được cài đặt sẵn trong Laravel nhưng đến phiên bản Laravel 5.x gói này bị loại bỏ, muốn sử dụng phải cài đặt thêm.

c:\xampp\htdocs\laravel-test>composer require laravelcollective/html
Using version ^5.4 for laravelcollective/html
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing laravelcollective/html (v5.4.1): Downloading (100%)
Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.

Tiếp theo chúng ta sẽ thêm gói này vào các cấu hình của Laravel, mở file config/app.php thêm dòng dưới đây vào phần providers và aliases.

'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
        ...
        Collective\Html\HtmlServiceProvider::class,
],
'aliases' => [
        ...
        'Form'      => Collective\Html\FormFacade::class,
        'Html'      => Collective\Html\HtmlFacade::class,
],

Ok, phần cài đặt gói LaravelCollective đã được cài đặt ## Chèn ảnh, css, javascript vào blade qua Laravel HTML

Cú pháp để chèn ảnh

<img src="/images/logo.png" alt="All Laravel Logo" />

{!! HTML::image('images/logo.png', 'All Laravel Logo') !!}

Cú pháp chèn file css

<link rel="stylesheet" href="/css/app.min.css">

{!! HTML::style('css/app.min.css') !!}

Cú pháp chèn file javascript

<script src="/javascript/jquery-1.10.1.min.js"></script>

{!! HTML::script('javascript/jquery-1.10.1.min.js') !!}

Xây dựng form nhập liệu bằng Laravel HTML

Chúng ta xem một form dạng HTML

<form action = "/contact" method = "post">
   <input type = "hidden" name = "_token" value = "<?php echo csrf_token() ?>">
   <table>
      <tr>
         <td>Họ và tên</td>
         <td><input type = "text" name = "name" <?php if(isset($name)) echo 'value = "' . $name . '"'?>/></td>
      </tr>

      <tr>
         <td>Địa chỉ email</td>
         <td><input type = "text" name = "email" <?php if(isset($email)) echo 'value = "' . $email . '"'?>/></td>
      </tr>

      <tr>
         <td>Tiêu đề</td>
         <td><input type = "text" name = "title" /></td>
      </tr>

      <tr>
         <td>Nội dung</td>
         <td>
            <textarea name="message" rows="5"></textarea>
         </td>
      </tr>

      <tr>
         <td colspan = "2" align = "center">
            <input type = "submit" value = "Gửi" />
         </td>
      </tr>
   </table>
</form>

Các lệnh liên quan đến mở Form

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

Sử dụng {!! !!} thay cho {{ }} để in ra mã HTML không bị chuyển đổi, xem bài Laravel Blade phần 1 để hiểu hơn cách sử dụng các cách in biến trong Blade. Mặc định khi mở form action sẽ là POST, tuy nhiên chúng ta có thể đẩy dữ liệu lên server theo dạng khác bằng cách thêm tham số (hỗ trợ các phương thức POST, GET, DELETE và PUT):

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

Có rất nhiều các dạng thẻ mở Form khác nhau, mở Form và trỏ đến một route hoặc một phương thức trong Controller

{!! Form::open(array('route' => 'route.name')) !!}

{!! Form::open(array('action' => 'Controller@method')) !!}

Có thể truyền tham số vào cách mở Form này:

{!! Form::open(array('route' => array('route.name', $user->id))) !!}

{!! Form::open(array('action' => array('Controller@method', $user->id))) !!}

Với các Form có upload file, thêm tham số file:

{!! Form::open(array('url' => 'foo/bar', 'files' => true)) !!}

CSRF Protect

Laravel cung cấp một phương thức để bảo vệ ứng dụng của bạn khỏi các yêu cầu từ ngoài dạng tấn công cross-site, hệ thống tự động sinh ra ngẫu nhiên một token và đặt trong session, khi bạn sử dụng Form::open với POST, PUT hoặc DELETE thì CSRF token sẽ được tự động thêm vào dạng field ẩn. Nếu bạn sinh mã HTML thuần túy cho trường CSRF, có thể sử dụng phương thức toke

{!! Form::token() !!}

Các dạng thẻ trong Form

Tạo một nhãn (tương đương thẻ <label></label>)

{!! Form::label('email', 'Địa chỉ Email') !!}

Muốn thêm class vào cho thẻ này truyền thêm tham số:

{!! Form::label('email', 'Địa chỉ Email', array('class' => 'label-success')) !!}

{!! Form::text($name, $value = null, $attributes = array()) !!}
{!! Form::textarea($name, $value, $attributes = array()) !!}
{!! Form::email($name, $value = null, $attributes = array()) !!}
{!! Form::password($name) !!}
{!! Form::file($name, $attributes = array()) !!}

Tạo checkbox và radio button

{!! Form::checkbox('$name', '$value', true) !!}

{!! Form::radio('$name', '$value', true) !!}

Trường nhập liệu ngày tháng

{!! Form::date('post_date', \Carbon\Carbon::now()) !!}

Tạo Dropdown list lựa chọn giá trị

{!! Form::select('size', array('1' => 'Laravel', '2' => 'Symfony', '3' => 'Yii'), '1') !!}

Tạo nút Submit

{!! Form::submit('Gửi tin nhắn') !!}

Quay lại ví dụ về Form HTML thuần túy ban đầu có thể viết lại theo mã Laravel HTML như sau:

{!! Form::open(array('url' => '/contact')) !!}
   <table>
      <tr>
         <td>{!! Form::label('name', 'Họ và tên') !!}</td>
         <td>{!! Form::text('name', isset($name)?$name:'') !!}</td>
      </tr>

      <tr>
         <td>{!! Form::label('email', 'Địa chỉ Email') !!}</td>
         <td>{!! Form::email('email', isset($email)?$email:'') !!}</td>
      </tr>

      <tr>
         <td>{!! Form::label('title', 'Tiêu đề') !!}</td>
         <td>{!! Form::text('title', '') !!}</td>
      </tr>

      <tr>
         <td>{!! Form::label('content', 'Nội dung') !!}</td>
         <td>
            {!! Form::textarea('title', '', array('rows' => '3', 'cols' => '100')) !!}
         </td>
      </tr>

      <tr>
         <td colspan = "2" align = "center">
            {!! Form::submit('Gửi') !!}
         </td>
      </tr>
   </table>
{!! Form::close() !!}

Ok, chúng ta cập nhật code này vào file contact.blade.php trong resources/views/fontend và thử lại đường dẫn http://laravel.dev/contact.

Tiện đây, chúng ta điều chỉnh lại view contact kế thừa blade template default, kết hợp luôn cùng với style của Bootstrap:

@extends('layouts.default')

@section('title', 'All Laravel - Liên hệ với chúng tôi')

@section('content')
   {!! Form::open(array('url' => '/contact', 'class' => 'form-horizontal')) !!}
      <div class="form-group">
         {!! Form::label('name', 'Họ và tên', array('class' => 'col-sm-2 control-label')) !!}
         <div class="col-sm-10">
            {!! Form::text('name', isset($name)?$name:'', array('class' => 'form-control', 'placeholder' => 'Nhập họ tên đầy đủ')) !!}
         </div>
      </div>

      <div class="form-group">
         {!! Form::label('email', 'Địa chỉ email', array('class' => 'col-sm-2 control-label')) !!}
         <div class="col-sm-10">
            {!! Form::email('email', isset($email)?$email:'', array('class' => 'form-control', 'placeholder' => 'Địa chỉ email thật để nhận phản hồi')) !!}
         </div>
      </div>

      <div class="form-group">
         {!! Form::label('title', 'Tiêu đề', array('class' => 'col-sm-2 control-label')) !!}
         <div class="col-sm-10">
            {!! Form::text('title', '', array('class' => 'form-control', 'placeholder' => 'Tiêu đề tin nhắn')) !!}
         </div>
      </div>

      <div class="form-group">
         {!! Form::label('content', 'Nội dung liên hệ', array('class' => 'col-sm-2 control-label')) !!}
         <div class="col-sm-10">
            {!! Form::textarea('content', '', array('class' => 'form-control', 'placeholder' => 'Nội dung không quá 200 từ', 'rows' => '3')) !!}
         </div>
      </div>

      <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
            {!! Form::submit('Gửi tin nhắn', array('class' => 'btn btn-success')) !!}
         </div>
      </div>
   {!! Form::close() !!}
@endsection

Kết quả khi vào http://laravel.dev/contact trông đẹp hơn hẳn

Tại sao sử dụng Laravel HTML

Khi sử dụng Laravel HTML code trông dễ nhìn hơn, và truyền các tham số vào các thành phần dễ dàng hơn rất nhiều. Với mở Form chúng ta chỉ cần Form::open là đã có sẵn trường ẩn chứa CSRF token. Với các trường kiểu dropdown select, khi truyền tham số vào nếu sử dụng HTML thuần túy chúng ta phải sử dụng vòng lặp. Ví dụ dưới đây sẽ cho bạn thấy vì sao sử dụng Laravel HTML:

@php
   $php_framework_arr = ["L" => "Laravel", "S" => "Symfony", "Y" => "Yii", "C" => "CodeIgniter"];
@endphp
<select name="framework">
   @foreach($php_framework_arr as $frm)
      <option>{{ $frm }}</option>
   @endforeach
</select>

Với thẻ select của HTML như trên chúng ta có thể đơn giản hơn như sau:

@php
   $php_framework_arr = ["L" => "Laravel", "S" => "Symfony", "Y" => "Yii", "C" => "CodeIgniter"];
@endphp
{!! Form::select('framework', $php_framework_arr) !!}

Còn rất nhiều các ví dụ khác, bạn hãy từ từ hiểu dần khi tham gia một dự án cụ thể nhé.