Chapter sebelumnya kita memanggil view dengan view('halo') dan menampilkan data memakai {{ $item['judul'] }} tanpa bertanya bagaimana sintaks tersebut bekerja. Saatnya bedah mesin di baliknya. Blade adalah template engine bawaan Laravel: ia memungkinkan kita menyisipkan logika PHP ke dalam HTML dengan sintaks ringkas, lalu mengompilasi seluruh berkas menjadi kode PHP biasa sebelum dieksekusi. Karena hasil akhirnya PHP murni, Blade tidak menambah beban berarti pada performa aplikasi. Chapter ini membahas cara kerja kompilasi, dua bentuk penampilan data, komentar, dan penyertaan sub-view.
Cara Kerja Kompilasi Blade #
Blade bukan bahasa baru yang dijalankan langsung. Saat sebuah view pertama kali dirender, Laravel membaca berkas .blade.php, menerjemahkan seluruh sintaks Blade menjadi PHP, lalu menyimpan hasilnya di storage/framework/views/. Pada request berikutnya, berkas PHP hasil kompilasi inilah yang dieksekusi langsung — kompilasi ulang hanya terjadi bila berkas sumber berubah. Daftar sintaks lengkapnya tercantum di dokumentasi Blade
.
Untuk melihat buktinya, kita render view dasar.blade.php berikut lalu periksa isi direktori kompilasi:
{{-- Komentar ini tidak dikirim ke browser --}}
<h1>{{ $nama }}</h1>
@include('partials.sapaan', ['pengunjung' => 'Siti'])
<p>Setelah include.</p>Direktori storage/framework/views/ kini berisi berkas-berkas PHP dengan nama berbentuk hash — salah satunya adalah hasil kompilasi view di atas. Isinya sebagai berikut:
<h1><?php echo e($nama); ?></h1>
<?php echo $__env->make('partials.sapaan', ['pengunjung' => 'Siti'], ...)->render(); ?>
<p>Setelah include.</p>
<?php /**PATH .../resources/views/dasar.blade.php ENDPATH**/ ?>Tiga bukti penting terlihat di sini. Pertama, {{ $nama }} berubah menjadi echo e($nama) biasa. Kedua, @include berubah menjadi pemanggilan $__env->make(...) — mekanisme yang sama dengan helper view(). Ketiga, komentar {{-- --}} lenyap sama sekali dari hasil kompilasi.
Menampilkan Data dengan {{ }} #
Sintaks {{ ... }} menampilkan nilai variabel dan sekaligus meng-escape-nya lewat helper e(). Helper tersebut memanggil htmlspecialchars sehingga karakter <, >, &, dan " dikonversi menjadi entitas HTML. Perbandingan berikut membuktikan kedua bentuk tersebut identik:
<p>Escaped: {{ $bio }}</p>echo 'Escaped: '.e($bio);Kita uji dengan variabel berisi tag HTML dan script:
$bio = '<b>Budi</b> <script>alert("xss")</script>';Output yang Dihasilkan (keduanya sama):
<p>Escaped: <b>Budi</b> <script>alert("xss")</script></p>Tag <script> tampil sebagai teks biasa, bukan dieksekusi browser. Perilaku ini adalah pertahanan pertama terhadap serangan XSS (cross-site scripting): input pengguna yang berbahaya tidak akan pernah menjadi kode HTML aktif selama kita konsisten memakai {{ }}.
Output Mentah dengan {!! !!}} #
Kadang data memang berisi HTML yang ingin ditampilkan apa adanya — misalnya konten artikel dari editor teks yang sudah dipercaya. Sintaks {!! ... !!} mengabaikan escaping:
<p>Escaped: {{ $bio }}</p>
<p>Raw: {!! $bio !!}</p>Output yang Dihasilkan:
<p>Escaped: <b>Budi</b> <script>alert("xss")</script></p>
<p>Raw: <b>Budi</b> <script>alert("xss")</script></p>Baris kedua memperlihatkan bahayanya: script benar-benar masuk ke HTML. Browser akan mengeksekusinya begitu halaman dibuka.
Komentar Blade #
Berbeda dengan komentar HTML <!-- --> yang tetap terkirim ke browser, komentar Blade hilang seluruhnya saat kompilasi. Bentuknya {{-- ini komentar --}}, seperti terlihat di baris pertama dasar.blade.php di atas. Hasil render view tersebut membuktikan komentar tidak muncul:
<h1>Budi</h1>
<p>Selamat datang, Siti!</p>
<p>Setelah include.</p>Komentar Blade cocok untuk meninggalkan catatan pengembang tanpa membocorkan struktur template ke pengunjung halaman.
Menyertakan Sub-View dengan @include #
View nyata biasanya tersusun dari bagian-bagian kecil yang dipakai berulang — kartu profil, tombol, pesan notifikasi. Directive @include menyisipkan sub-view ke dalam view induk. Argumen keduanya mengirim data tambahan yang hanya tersedia di sub-view tersebut:
@include('partials.sapaan', ['pengunjung' => 'Siti'])Sub-view resources/views/partials/sapaan.blade.php menerima variabel $pengunjung dan memakainya seperti biasa:
<p>Selamat datang, {{ $pengunjung }}!</p>Selain data eksplisit, sub-view juga mewarisi seluruh variabel dari view induk — $nama dari dasar.blade.php misalnya bisa dipakai langsung di dalam sapaan.blade.php tanpa deklarasi tambahan.
Dengan {{ }}, {!! !!}, komentar, dan @include, kita sudah menguasai kosakata dasar Blade. Selanjutnya kita perdalam cara menampilkan berbagai bentuk data — scalar, properti object, elemen array, hingga JSON untuk JavaScript — pada chapter Menampilkan Data.