Hướng Dẫn Tạo Blade Directive Laravel

Laravel Blade là một ngôn ngữ template đơn giản giúp cho việc đọc các view dễ dàng hơn. Blade cung cấp cho chúng ta một số cú pháp viết tắt đơn giản cho các hàm PHP phổ biến như @if, @foreach, @isset và nhiều hàm khác. Xem thêm về blade directive tại đây.

Việc sử dụng những hàm viết tắt này làm code dễ đọc và đẹp hơn. Đôi khi chúng ta cần tạo những blade directive mà Laravel không cung cấp và mình sẽ hương dẫn cho các bạn bên dưới.

Cách Tạo Blade Directive

Tạo một blade directive đơn giản như bên dưới:

Blade::directive('directive_name', function () {
	return 'My First Blade Directive';
});

Chúng ta sẽ thêm đoạn code trên vào file app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //   
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('directive_name', function () {
            return 'My First Blade Directive';
        });
    }
}

Bây giờ các bạn có thể sử dụng blade directive vừa tạo vào bất cứ View nào:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Custom Blade Directives</title>
    </head>
    <body>
        @directive_name()
    </body>
</html>

Khi load view phía trên, chúng ta sẽ thấy nó xuất ra màn hình như vậy:

“My First Blade Directive”

Đây chỉ là một ví dụ đơn giản chỉ in ra một chuỗi, vì vậy tiếp theo hãy tìm hiểu cách thêm các chức năng vào blade directive.

Thêm Chức Năng Vào Blade Directive

Hãy tạo một blade directive mới là @isHome để kiểm tra user đang xem trang Home hay các trang khác. Dưới đây là ví dụ:

@isHome
    <p>We are on the homepage</p>
@notHome
    <p>We are on a different page than the homepage</p>
@endHome

Thêm blade directive đó vào file app/Providers/AppServiceProvider.php:

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //   
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('isHome', function () {
            $isHomePage = false;

            // check if we are on the homepage
            if ( request()->is('/') ) {
                $isHomePage = true;
            }

            return "<?php if ($isHomePage) { ?>";
        });

        Blade::directive('notHome', function () {
            return "<?php } else { ?>";
        });

        Blade::directive('endHome', function () {
            return "<?php } ?>";
        });
    }
}

Tạo 2 routes, một là home page và một là trang bài viết:

Route::get('/', function () {
    return view('welcome');
});

Route::get('/posts', function(){
    return view('welcome');
});

Chúng ta có thể sử dụng blade directive đã tạo vào welcome.blade.php để xác định homepage route:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Adding Functionality to Custom Blade Directives</title>
    </head>
    <body>
        @isHome
            <p>We are on the homepage</p>
        @notHome
            <p>We are on a different page than the homepage</p>
        @endHome
    </body>
</html>

Nếu user đang ở trang chủ sẽ thấy đoạn text: We are on the homepage, nếu ở các trang khác thì họ sẽ thấy đoạn text: We are on a different page than the homepage.

Quick tip: Sau khi tạo mới blade directive, các bạn nên clear views bằng cách chạy dòng lệnh:

php artisan view:clear

Tiếp theo, mình sẽ nói tiếp về Blade::if để tạo directive đẹp hơn và dễ dùng hơn.

Blade “If” Directives

Chúng ta có thể sử dụng Blade If Directive để làm cho code đẹp hơn. Xem ví dụ bên dưới:

Blade::if('isHome', function () {
    return request()->is('/');
});

Thêm đoạn code vào file app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //   
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::if('isHome', function () {
            return request()->is('/');
        });
    }
}

Bên trong view, chúng ta sẽ sử dụng cú pháp như dưới:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Custom Blade Directives</title>
    </head>
    <body>
        @isHome
            we are on home
        @else
            not home
        @endisHome
    </body>
</html>

Đoạn code này sẽ hoạt động như ví dụ bên trên.

Thêm Tham Số vào Blade Directive

Tiếp theo mình sẽ hướng dẫn thêm các arguments vào directive. Chúng ta sẽ tạo một directive mới là @greet với việc thêm vào tên một người và echo ra lời chào cộng với tên người đó.

Thêm đoạn code vào app/Providers/AppServiceProvider.php:

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //   
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('greet', function ($name) {
            return "<?php echo 'Hello ' . $name ?>";
        });
    }
}

Directive trên sẽ cho chúng ta thêm tham số vào như dưới đây:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Custom Blade Directives</title>
    </head>
    <body>
        @greet('Quan Le')
    </body>
</html>

Màn hình sẽ echo ra đoạn text “Hello Quan Le“.

Thêm Tham Số Vào Blade If Directive

Điều này cũng thực hiện như ví dụ trên. Tuy nhiên mình muốn các bạn biết sử dụng @elseif để kiểm tra các giá trị khác với điều kiện. Để minh họa, mình sẽ sử dụng một ví dụ từ Laravel:

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //   
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::if('env', function ($environment) {
            return app()->environment($environment);
        });
    }
}

Directive này sẽ giúp chúng ta hiển thị @env bên trong view để xác định xem môi trường ứng dụng đang sử dụng là gì.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Custom Blade Directives</title>
    </head>
    <body>
        @env('local')
            <p>The application is in the local environment</p>
        @elseenv('testing')
            <p>The application is in the testing environment</p>
        @else
            <p>The application is not in the local or testing environment</p>
        @endenv
    </body>
</html>

Như phía trên, các bạn có thể sử dụng @elseenv blade directive để kiểm tra các môi trường khác nhau.

Nếu có một loạt các directive tự xây dụng trong AppServiceProvider thì sẽ khác là lộn xộn. Do đó mình sẽ chỉ các bạn các tạo một Service Provider mới.

Cách Tạo Service Provider Laravel

Sử dụng dòng lệnh bên dưới:

php artisan make:provider BladeServiceProvider

Các bạn sẽ thầy file mới tạo nằm trong thư mục Providers: app/Providers/BladeServiceProvider

<?php

namespace App\Providers;

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

class BladeServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

Bây giờ, các bạn có thể thêm các directive của mình vào boot(), nhưng trước tiên cần phải đăng kí Providers này vào app/config.php như dưới:

'providers' => [

    // Other Service Providers
    App\Providers\BladeServiceProvider::class,
    
],

Tổng Kết:

Việc tạo một blade directive giúp cho code trong view được đẹp và gọn gàng hơn. Nếu có ý kiến gì hãy để lại comment bên dưới. Cám ơn!

Post Views: 237