Home Web Laravel Membuat Custom Blade Directive di Laravel

Membuat Custom Blade Directive di Laravel

0

Seperti yang kita tahu, Laravel menyediakan templating engine secara default jika kita membuat proyek laravel baru. Blade bertindak sebagai yang menggambungkan kode PHP dan HTML menjadi 1 file dan juga bertindak agar browser paham dengan kodenya.

Jika kita pernah menggunakan blade yang terintegrasi full dengan controlle, pasti kita pernha menggunakan salah satu dari directive-nya. Seperti contoh: @foreach, @auth, @if, @isset, dan lain-lain. Tetapi bagaimana jika ada 1 fitur yang dimana blade tidak menyediakan directive untuk itu? Jawabannya, Laravel menyediakan kemampuan untuk membuat custom directive yang bisa kita manipulasi dan buat sesuai dengan keinginan dan kebutuhan kita. Di blog ini, kita akan membuat custom blade directive yang berguna untuk menampilkan greeting kepada nilai parameter. Ayo kita buat.

Setelah membuat atau membuka proyek Laravel, buka file AppServiceProvider.php yang berada di app/Providers/AppServiceProvider.php, didalam file tersebut, ada public method yang bernama boot, Nah disini tempat dimana kita mendefiniskan custom blade directive-nya.

Untuk membuat custom directive di blade, kita harus men-import class Blade yang disediakan oleh Facades, lalu menggunakan salah satu static methodnya yaitu directive, method ini menerima 2 parameter, yang pertama adalah nama dari directivenya dan yang kedua adalah sebuah closure function yang akan menghandle-nya. Tulis kode dibawah didalam method boot yang ada di file AppServiceProvider.php.

Blade::directive('salam', function ($name) {
    return "Selamat pagi {$name}!";
});

Dan jangan lupa untuk men-import class Blade dari Facades. Tambahkan kode dibawah sebelum pembuatan class.

use Illuminate\Support\Facades\Blade;

Sehingga file AppServiceProvider.php secara keseluruhan terlihat seperti berikut:

<?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('salam', function ($name) {
            return "Selamat pagi {$name}!";
        });
    }
}

Untuk menggunakan directive yang barusan kita buat, kita tinggal memangilnya di view kita.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>About</title>
</head>
<body>
	<h1>Ini adalah halaman ABOUT</h1>
	@salam('naufal')
</body>
</html>

Kode yang di-highlight diatas adalah pemanggilan custom directive yang kita sebelumnya buat. Kita memanggil directive tersebut sesuai dengan nilai pada parameter pertama method directive dan menambahkan parameter ‘naufal’ untuk mengisi parameter pada closure function yang berada di parameter kedua method directive.

Sehingga hasil dari directive kita terlihat seperti gambar dibawah.

Bisa dilihat, data yang ditampilkan sesuai dengan apa yang kita inginkan.

Jadi begitulah penjelasan dan penggunaan singkat dari custom blade directive. Bila ada yang tertarik untuk mendalami materi ini lebih jauh, bisa kunjungi link berikut Link.