Blade template trong Laravel 8 chap 1

Ngoài View thông thường Laravel 8 cũng hỗ trợ người dùng tạo view dạng Blade template thông minh logic và ngắn gọn hơn. Trong bài này chúng ta sẽ tìm hiểu cơ bản về cách tạo Blade template trong Laravel 8 các bạn nhé!

1. Gới thiệu về blade template.

Blade template trong Laravel 8 là một công cụ giúp chúng ta xử lí cú pháp trong view một cách ngắn ngọn, logic thông minh hơn. Blade cho phép chúng ta sử dụng cả PHP thuần trong nó.và cache lại nên về cơ bản sử dụng blade template cũng không làm cho ứng dụng của bạn chậm đi.

Để sử dụng Blade template trong Laravel chúng ta chỉ cần tạo view với đuôi file là .blade.php.

Xét 1 cách cơ bản thì Blade Template cũng là view nên cách sử dụng như view thông thường (xem cách sử dụng view).

2. Hiển thị dữ liệu trong Blade template.

Trong Laravel 8 chúng ta có thể hiển thị dữ liệu trong Blade template với cú pháp sau

{{ code }}

Trong cặp dấu {{}} sẽ là code PHP của bạn.

Ví dụ :

Trong file routes/web.php

Route::get('/', function () {
    return view('home', ['name' => "Phàm Nhân Tu Tiên"]);
})->name('home');

File resources/views/home.blade.php

Hello, {{ $name }}!

Kết quả:

Cặp dấu {{}} tượng trưng cho câu lệnh echo trong PHP kết hợp với hàm htmlspecialchars để phòng chống lỗi XSS attack. Điều đó cũng có nghĩa là bạn sẽ không thể in ra mã HTML sử dụng cặp dấu {{}} này được.

VD: Dưới đây mình sẽ truyền name là một thẻ HTML.

Route::get('/', function () {
    return view('home', ['name' => "<span style='color: red'>Phàm Nhân Tu Tiên</span>""]);
})->name('home');

Kết quả:

Mặc định Laravel 8 sẽ bật chế độ double encoding trong hàm htmlspecialchars  thế nhưng nếu bạn muốn tắt nó đi vẫn được.

Để tắt bạn có thể sử dụng Blade::withoutDoubleEncoding  và đặt nó ở trong Provider để cho nó hoạt động tốt.

VD: Tắt double encoding trong Blade đi.

File app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::withoutDoubleEncoding();
    }
}

Nếu vẫn muốn hiển thị mã HTML bạn có thể sử dụng cặp dấu {!!!!}.

VD:

- file routes/web.php

/* routes/web.php */
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home', ['name' => "<span style='color: red'>Lò Thị Vi Sóng</span>"]);
})->name('home');

- file resources/views/home.blade.php

Hello, {!! $name !!}

Kết quả:

Chú ý: Vì các cặp {{}} , {!!!!} chỉ tương ứng với câu lệnh echo trong PHP, nên nó chỉ nhận string truyền vào thôi.

Hiển thị dữ liệu dạng json endcode trong Blade

Để hiển thị dữ liệu dạng json endcode trong Blade các bạn có thể sử dụng @json với cú pháp sau:

@json($array, $flag)

Trong đó:

• $array là mảng dữ liệu bạn muốn encode.
• $flag là kiểu encode bạn muốn, trường này bạn có thể bỏ trống.

Ví dụ: 

<script>
    var app = @json($array);
</script>

Đoạn blade trên sẽ tương đương với code PHP thuần như sau:

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

2. Blade & Javascript Framework.

Hiện tại có khá nhiều framework JS cũng sử dụng cáp cặp {{}} để in ra dữ liệu. Nên nếu bạn không muốn Blade compile đoạn code nào đó thì bạn chỉ cần thêm ký tự @ vào trước là được.

VD: Mình sẽ thử thêm @ vào trước {{}} trong ví dụ đầu tiên ở phần trên.

- file resources/views/home.blade.php

Hello, @{{ $name }}

Kết quả:

Trong trường hợp bạn không muốn Blade biên dịch nhiều dòng code thì bạn có thể sử dụng @verbatim directive.

Ví Dụ:

@verbatim
    <div class="container">
        Hello, {{ name }}.
    </div>
@endverbatim

3. Comment trong Blade.

Để comment trong Blade template Laravel 8  các bạn sử dụng cặp dấu {-- content --} với content là nội dung bạn muốn comment

VD:

{{--Day la comment --}}

Hello, @{{ $name }}

Lúc này khi blade thực hiện compile thì nó sẽ bỏ qua đoạn code được comment đó.

4. Lời kết.

Phần này chúng ta chỉ tìm hiểu cách tạo, render Blade template trong Laravel 8 một cách cơ bản nhất, nâng cao hơn hẹn các bạn ở bài sau nhé. Cảm ơn các bạn đã theo dõi!