Blade Directive @verbatim, Apa Fungsinya?

Di Laravel, kita umum menggunakan tanda baca kurung kurawal dua buah (dan penutupnya) untuk menampilkan sebuah variabel ke peramban (browser). Penggunaan kurung kurawal ini cara singkat pemakain language constructor berupa echo di PHP.

Sebagai contoh, untuk menampilkan nilai dari variabel $name, kita bisa menuliskannya di blade menjadi sebagai berikut:

<p>Hy, my name is {{ $name }}</p>

Dari potongan skrip di atas, Blade akan mem-parsing-nya menjadi:

<p>Hy, my name is <?php e($name) ?></p>

Fungsi e() merupakan fungsi internal Laravel yang berfungsi untuk meng-escape string. Jika, ingin menampilkan unescaped string, kita bisa menggunakan kombinasi tanda kurung kurawal dan tanda seru di Blade.

// $hello = '<p>Hallo Laravel!</p>'; 
{!! $hello !!}

Template parser akan mengkonversi skrip di atas menjadi plain PHP seperti potongan di bawah.

<?php echo $hello ?>

Pada kenyataannya, Blade bukan satu-satunya template parser yang menggunakan tanda kurung kurawal untuk menampilkan nilai dari variabel ke peramban (browser). Di luaran sana, ada banyak paket atau librari (baik untuk server side maupun untuk client side) menggunakan tanda dan pola yang sama untuk mem-parsing sebuah shorthand penampil nilai di peramban.

Sebut saja VueJS misalnya, yang mana framework JavaScript satu ini juga menggunakan tanda kurung kurawal sama persis dengan Blade untuk menampilkan variabel ke peramban.

Permasalahan yang sering terjadi, ketika kita menggunakan variabel VueJS dalam Blade. Dengan menggunakan tanda dan pola yang sama, manakah yang akan dieksekusi terlebih dahulu?

Simak contoh skrip di bawah:

<div class="col-md-12">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Laravel',
            description: 'Tutorial Laravel dalam bahasa Indonesia'
        }
    })
</script>

Variabel title dan description sejatinya adalah data yang yang didefinisikan dari VueJS, bukan variabel (atau konstanta) yang diambil dari PHP.

Jika dijalankan melalui peramban, maka akan menghasilkan kesalahan Use of undefined constant title — assumed ‘title’. Ini menandakan kalau template parser Blade dijalankan terlebih dahulu, dan seperti pesan kesalahannya, konstanta tersebut tidak didefinisikan di PHP.

Untuk menangani masalah tersebut, kita bisa menambahkan tanda “@” di depan kurung kurawal agar Blade tidak mem-parsing-nya menjadi plain PHP.

<div class="col-md-12">
    <p>@{{ title }}</p>
    <p>@{{ description }}</p>
</div>

Untuk menghembat waktu dan tak perlu pemborosan penggunaan tanda @, kita bisa menggunakan directive @verbatim untuk menginstruksikan Blade melakukan hal yang sama dengan di atas.

@verbatim
<div class="col-md-12">
    <p>{{ title }}</p>
    <p>{{ description }}</p>
</div>
@endverbatim

Jauh lebih mudah untuk dibaca bukan? Kalian biasa menggunakan yang mana?

Originally published at www.laravel.web.id on August 24, 2017.