Blade template adalah salah satu pilar utama dalam ekosistem Laravel. Ia bukan hanya template engine, tetapi sistem yang memungkinkan developer membangun tampilan yang rapi, modular, cepat, dan mudah dirawat. Blade menyediakan sintaks yang elegan, directive sederhana yang powerful, perlindungan keamanan bawaan, dan mekanisme kompilasi yang efisien.
Pada panduan ini, kita akan membahas Blade dari dasar hingga tingkat mahir, mencakup directive kondisi, looping, switch, include, once directive, dan berbagai teknik penting lain yang biasa digunakan dalam aplikasi profesional.
Pengenalan Blade Template
Blade adalah template engine bawaan Laravel yang dirancang ringan namun sangat fleksibel. Salah satu kekuatan Blade terletak pada cara dia mengubah file .blade.php menjadi PHP murni yang telah dioptimasi. Semua file Blade yang Anda tulis akan dikompilasi ke direktori cache Laravel, sehingga setiap view hanya dikompilasi ulang bila ada perubahan isi file. Ini membuat Blade cepat digunakan dalam skala kecil hingga enterprise.
Blade memungkinkan Anda menyisipkan logika dasar seperti kondisi, looping, include, dan layouting tanpa harus menulis tag PHP (<?php ?>) secara manual. Selain itu, Blade juga mendukung:
- Template inheritance
- Komponen dan slot
- Render data otomatis aman (XSS protected)
- Ekspresi echo aman
- Anonymous component
- Inline component
- Stacks, push, dan prepend
- Named slots, attributes merging, dll.
Pada artikel ini kita fokus pada directive, karena ini adalah fitur yang paling banyak digunakan ketika membangun UI menggunakan Blade.
Menampilkan Data
Menampilkan data dalam Blade sangat sederhana berkat Echo Statement. Blade otomatis meng-escape karakter HTML berbahaya untuk mencegah XSS. Dengan begitu, Anda dapat menampilkan variabel dengan aman.
<h1>{{ $name }}</h1>
Cara kerja:
- Blade memanggil helper e() milik Laravel untuk melakukan HTML escaping.
- Jika $name berisi tag HTML atau script, Blade akan mengubahnya menjadi teks biasa agar aman.
Menampilkan data tanpa escaping
Gunakan {!! !!} untuk menampilkan HTML mentah:
{!! $article->content !!}
Kapan digunakan?
- Saat menampilkan konten dari WYSIWYG editor seperti TinyMCE atau CKEditor.
- Saat memang ingin output HTML tanpa filtering.
Waspada:
Jangan gunakan tanpa sanitasi pada data user-generated untuk menghindari XSS.
Menampilkan data dengan default value
{{ $user->name ?? 'Guest' }}
Kegunaan:
- Mencegah error ketika variabel null.
Blade Directive
Blade directives adalah perintah yang diawali dengan simbol @ yang membantu Anda menulis logika view tanpa kode PHP mentah. Directive memungkinkan Anda menulis kondisi, looping, include, formating, dan berbagai logika tampilan lain dengan sintaks yang rapi.
Beberapa kelompok directive utama adalah:
- Directive kondisi (@if, @else, @elseif, @unless)
- Directive switch-case
- Directive looping (@foreach, @for, @while, @forelse)
- Directive sekali jalan (@once)
- Directive include view
Pada bagian berikutnya, kita akan membahas masing-masing directive secara detail, lengkap dengan contoh implementasi dan case study.
If Directive
Kelompok directive kondisi Blade menyediakan cara mudah untuk mengontrol apa yang ditampilkan berdasarkan logika tertentu.
@if
Digunakan untuk evaluasi kondisi boolean seperti pada PHP.
@if($user->is_admin)
<p>Anda adalah admin.</p>
@endif
Penjelasan:
Directive ini ideal untuk kondisi langsung yang jelas, misalnya akses role, status akun, dll.
@elseif
Digunakan bila kondisi pertama tidak terpenuhi.
@if($score >= 90)
A
@elseif($score >= 80)
B
@endif
@else
Fallback ketika tidak ada kondisi yang benar.
@if($products->count())
<p>Produk tersedia.</p>
@else
<p>Tidak ada produk.</p>
@endif
@unless
Kebalikan dari if, kode berjalan jika ekspresi bernilai false.
@unless($user->is_active)
<p>Akun Anda belum aktif.</p>
@endunless
@isset
Memeriksa apakah variabel telah diset.
@isset($title)
<h1>{{ $title }}</h1>
@endisset
@empty
Memeriksa apakah variabel kosong.
@empty($orders)
<p>Belum ada pesanan.</p>
@endempty
@auth dan @guest
Untuk autentikasi user.
@auth
<p>Selamat datang, {{ auth()->user()->name }}!</p>
@endauth
@guest
<p>Silakan login untuk melanjutkan.</p>
@endguest
@production
Menampilkan konten hanya di environment production.
@production
<script src="/js/analytics.js"></script>
@endproduction
@env
Menampilkan berdasarkan environment tertentu.
@env('local')
<p>Mode Local</p>
@endenv
Kegunaan kelompok if directive:
- Mengatur apa yang ditampilkan berdasarkan keadaan aplikasi
- Mempermudah logika tampilan tanpa PHP
- Membuat kode lebih bersih dan mudah dibaca
- Membantu menjaga keamanan (mis. membatasi UI berdasarkan role)
Switch Directive
Blade mendukung struktur kontrol switch-case seperti PHP. Cocok digunakan saat Anda mengevaluasi satu nilai dengan banyak kemungkinan.
Directive dalam kelompok ini meliputi:
- @switch
- @case
- @break
- @default
- @endswitch
@switch($status)
@case('pending')
<p>Status: Menunggu konfirmasi</p>
@break
@case('processing')
<p>Status: Sedang diproses</p>
@break
@case('completed')
<p>Status: Selesai</p>
@break
@default
<p>Status tidak diketahui</p>
@endswitch
Manfaat switch directive:
- Lebih rapi daripada banyak if / elseif
- Lebih mudah dipahami ketika kondisi berbasis nilai tunggal
- Digunakan untuk status pesanan, role user, state aplikasi, dsb.
Loop Directive
Blade menyediakan directive loop yang mempermudah iterasi data. Blade loop juga memiliki fitur tambahan seperti $loop variable yang menyediakan informasi iterasi secara otomatis.
Directive looping meliputi:
- @for
- @foreach
- @forelse
- @while
@for
Mirip for-loop di PHP.
@for($i = 1; $i <= 5; $i++)
<p>Nomor: {{ $i }}</p>
@endfor
@foreach
Digunakan untuk iterasi array atau koleksi.
@foreach($users as $user)
<p>{{ $user->name }}</p>
@endforeach
@forelse
Loop dengan fallback ketika data kosong.
@forelse($comments as $comment)
<p>{{ $comment->body }}</p>
@empty
<p>Belum ada komentar.</p>
@endforelse
@while
@while($count < 3)
<p>Perulangan ke-{{ $count }}</p>
@php $count++; @endphp
@endwhile
Variable $loop
Blade menyediakan helper loop bernama $loop
@foreach($items as $item)
@if($loop->first)
<p>Ini adalah item pertama</p>
@endif
@if($loop->last)
<p>Ini adalah item terakhir</p>
@endif
<p>{{ $loop->iteration }}. {{ $item }}</p>
@endforeach@once Directive
Directive @once memastikan sebuah blok hanya dijalankan sekali, meskipun berada dalam loop atau include yang dipanggil berkali-kali.
Contoh:
@foreach($users as $user)
@once
<link rel="stylesheet" href="/css/users.css">
@endonce
@endforeach
Manfaatnya:
- Mencegah duplikasi script atau style
- Berguna dalam komponen atau partial yang dipakai ulang
- Mengoptimalkan performa tampilan
pushOnce
Digunakan untuk stack.
@pushOnce('scripts', 'unique-script')
<script src="/js/app.js"></script>
@endPushOnceIncluding View Directive
Directive include digunakan untuk menampilkan file tampilan lain. Ini penting untuk modularisasi kode tampilan.
@include
Include langsung:
@include('partials.header')
Dengan data:
@include('partials.card', ['title' => 'Produk Baru'])
@includeIf
Hanya include jika view tersedia.
@includeIf('partials.sidebar')
@includeWhen
Based condition:
@includeWhen($isAdmin, 'partials.admin')
@includeUnless
Kebalikan @includeWhen.
@includeUnless($isBanned, 'partials.profile')
@includeFirst
Jika ada beberapa pilihan view:
@includeFirst(['mobile.menu', 'desktop.menu'])
Kesimpulan
Blade adalah template engine yang sangat kuat dan fleksibel, memungkinkan Anda membangun tampilan Laravel dengan cara yang bersih, modern, dan terstruktur. Dengan memahami directive seperti if, switch, loop, once, dan include, Anda memiliki fondasi kuat untuk menciptakan UI yang scalable dan mudah dirawat. Semakin Anda mengeksplor Blade seperti komponen, layouting, stack, dan attribute binding semakin produktif Anda dalam membangun aplikasi Laravel modern.