Menyalin-tempel potongan HTML yang sama di banyak halaman adalah sumber bug dan pekerjaan berulang. Blade Component memecahkan masalah ini: Anda mendefinisikan sepotong UI sekali, lalu memakainya di mana pun seperti tag HTML biasa. Artikel ini membahas cara membangun komponen UI yang benar-benar reusable di Laravel 10/11 — dari alert sederhana hingga button dan card fleksibel.
1. Dua Jenis Komponen
Laravel punya dua tipe Blade Component:
- Class component — punya kelas PHP untuk logika (menghitung nilai, query, dsb) plus file view. Cocok untuk komponen yang butuh pemrosesan.
- Anonymous component — hanya file Blade tanpa kelas. Cocok untuk komponen presentasi murni seperti tombol atau kartu.
2. Membuat Class Component
Gunakan artisan untuk membuat komponen alert:
php artisan make:component AlertPerintah ini menghasilkan dua file: kelas app/View/Components/Alert.php dan view resources/views/components/alert.blade.php. Definisikan properti di constructor:
class Alert extends Component
{
public function __construct(
public string $type = 'info',
public string $message = '',
) {}
public function render(): View
{
return view('components.alert');
}
}Isi view-nya, memakai properti yang tadi didefinisikan:
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>Pakai di halaman mana pun dengan sintaks x-:
<x-alert type="success" message="Data berhasil disimpan." />3. Anonymous Component dengan @props
Untuk komponen tanpa logika, cukup buat file Blade — tanpa kelas. Buat resources/views/components/card.blade.php dan deklarasikan propertinya dengan direktif @props:
@props(['title' => null])
<div class="card">
@if ($title)
<div class="card-header">{{ $title }}</div>
@endif
<div class="card-body">
{{ $slot }}
</div>
</div>@props mendaftarkan atribut mana yang merupakan "props" (dengan nilai default), sisanya masuk ke attribute bag yang akan kita bahas nanti.
4. Slot: Mengoper Konten HTML
Perhatikan {{ $slot }} di atas. Slot adalah tempat konten di antara tag komponen ditampilkan. Sekarang komponen card bisa membungkus apa saja:
<x-card title="Profil Pengguna">
<p>Nama: Budi</p>
<p>Email: budi@mail.com</p>
</x-card>Named Slot
Butuh lebih dari satu area konten? Gunakan named slot. Definisikan di komponen:
@props(['title' => null])
<div class="card">
<div class="card-header">{{ $title }}</div>
<div class="card-body">{{ $slot }}</div>
<div class="card-footer">{{ $footer ?? '' }}</div>
</div>Lalu isi dengan tag x-slot:
<x-card title="Ringkasan">
Konten utama di sini.
<x-slot:footer>
<button>Simpan</button>
</x-slot:footer>
</x-card>5. Attribute Bag: Meneruskan Atribut HTML
Bagaimana jika pengguna komponen ingin menambah class atau atribut lain? Laravel mengumpulkan semua atribut yang tidak terdaftar di @props ke dalam variabel $attributes. Gunakan merge() agar class kustom digabung dengan class bawaan:
@props(['type' => 'primary'])
<button {{ $attributes->merge(['class' => 'btn btn-'.$type]) }}>
{{ $slot }}
</button>Sekarang komponen button bisa menerima atribut tambahan secara mulus:
<x-button type="danger" class="w-full" onclick="hapus()">
Hapus
</x-button>Hasilnya, class w-full dan atribut onclick otomatis menempel di tag button tanpa Anda mendeklarasikannya. Untuk atribut yang tidak boleh digabung melainkan ditimpa gunakan $attributes->class([...]).
6. Class Component vs Anonymous: Kapan Pakai yang Mana
- Pakai anonymous component untuk elemen presentasi murni (button, card, badge, input) — lebih ringan dan cukup dengan
@props. - Pakai class component saat butuh logika: mengambil data dari database, memformat nilai, atau menentukan varian berdasarkan kondisi kompleks. Anda juga bisa menambahkan method publik yang bisa dipanggil langsung di view.
Contoh method di class component:
public function isDanger(): bool
{
return $this->type === 'danger';
}@if ($isDanger())
<strong>Perhatian!</strong>
@endifKesimpulan
Blade Component mengubah cara Anda membangun antarmuka: alih-alih menyalin HTML, Anda membuat pustaka komponen yang konsisten dan mudah dirawat. Mulai dari anonymous component untuk elemen sederhana, naik ke class component saat butuh logika, manfaatkan slot untuk fleksibilitas konten, dan attribute bag agar komponen tetap terbuka untuk kustomisasi. Sekali dibangun dengan rapi, komponen ini mempercepat setiap halaman baru yang Anda buat.
Praktik Terbaik Membuat Komponen
Agar komponen Blade benar-benar dapat dipakai ulang, rancang dengan prinsip yang jelas. Buat komponen fokus pada satu tanggung jawab, misalnya sebuah kartu, tombol, atau peringatan, sehingga mudah dipahami dan dikombinasikan. Manfaatkan properti untuk membuat komponen fleksibel terhadap data yang berbeda, dan gunakan slot untuk konten yang bervariasi. Beri nama yang deskriptif dan konsisten agar tim mudah menemukannya. Hindari menaruh logika bisnis berat di dalam komponen tampilan; cukup logika presentasi seperlunya. Kelompokkan komponen terkait agar struktur proyek tetap rapi. Dengan pustaka komponen yang tertata, Anda menghindari pengulangan kode, menjaga konsistensi tampilan di seluruh aplikasi, dan mempercepat pengembangan halaman baru. Investasi awal merancang komponen yang baik akan terbayar berlipat seiring bertumbuhnya aplikasi Anda.
Pertanyaan Umum (FAQ)
Apa keuntungan utama Blade Component? Menghindari pengulangan kode tampilan dan menjaga konsistensi antarmuka, sehingga pengembangan halaman baru jauh lebih cepat.
Kapan memakai slot vs properti? Gunakan properti untuk data sederhana, dan slot untuk konten yang bervariasi atau berisi markup lain di dalam komponen.
Apakah komponen memengaruhi performa? Dampaknya minimal dan sepadan dengan manfaat keterbacaan serta pemeliharaan, apalagi bila komponen dirancang fokus dan ringan.
Sebagai penutup, jadikan pustaka komponen sebagai standar tim: sepakati konvensi penamaan, dokumentasikan properti dan slot tiap komponen, serta tinjau berkala agar tidak ada duplikasi. Investasi kecil ini membuat seluruh basis kode tampilan Anda konsisten dan mudah dirawat dalam jangka panjang.
