Cara Membuat dan Menggunakan Blade Component di Laravel
1. Latar Belakang
Dalam pengembangan aplikasi web modern, efisiensi dan keteraturan kode menjadi faktor penting untuk menjaga kualitas perangkat lunak. Semakin kompleks suatu aplikasi, semakin besar kebutuhan terhadap struktur tampilan (view) yang modular dan dapat digunakan kembali.
Laravel sebagai framework berbasis PHP menyediakan fitur Blade Component untuk membantu pengembang membuat komponen tampilan yang reusable, terstruktur, dan mudah dirawat. Tanpa komponen, pengembang cenderung melakukan duplikasi kode HTML yang menyebabkan kesulitan dalam pemeliharaan.
Blade Component hadir sebagai solusi untuk meningkatkan modularitas, keterbacaan kode, serta efisiensi pengembangan antarmuka.
2. Alat dan Bahan
a. Perangkat Lunak
- Web browser (contoh: Google Chrome atau Mozilla Firefox)
- Code editor / text editor (contoh: Visual Studio Code)
- Terminal / Command Prompt
- Web server
- Composer
- PHP minimal versi 8.x
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
3.1 Apa itu Laravel, Blade, dan Blade Component?
Laravel adalah framework aplikasi web berbasis PHP yang menggunakan arsitektur Model-View-Controller (MVC). Framework ini dirancang untuk mempermudah proses pengembangan aplikasi web dengan struktur yang terorganisir, sintaks yang jelas, serta fitur yang lengkap.
Blade adalah templating engine bawaan Laravel yang digunakan untuk membangun tampilan (view). Blade memungkinkan penulisan sintaks yang lebih ringkas dan terstruktur dibandingkan dengan PHP murni, serta menyediakan fitur seperti directive (@if, @foreach, dan lain-lain), inheritance layout, dan komponen.
Blade Component adalah fitur dalam Blade yang memungkinkan pengembang membuat bagian tampilan yang dapat digunakan kembali (reusable). Komponen ini dapat menerima parameter (props) dan memiliki slot untuk menampilkan konten dinamis. Dengan Blade Component, struktur antarmuka menjadi lebih modular dan mudah dipelihara.
3.2 Fungsi Blade Component
Blade Component memiliki beberapa fungsi utama dalam pengembangan aplikasi:
1. Mengurangi duplikasi kode
Komponen memungkinkan satu struktur tampilan digunakan berulang kali tanpa perlu menyalin kode yang sama.
2. Meningkatkan keterbacaan kode
Penggunaan tag seperti <x-card> atau <x-alert> membuat view lebih ringkas dan mudah dipahami.
3. Mendukung modularitas
Setiap bagian tampilan dapat dipisahkan menjadi unit kecil yang terorganisir.
4. Mempermudah pemeliharaan
Jika terjadi perubahan desain, pengembang cukup mengubah satu file komponen tanpa perlu mengedit banyak file view.
5. Mendukung pengembangan skala besar
Pada aplikasi dengan banyak halaman dan elemen UI, komponen membantu menjaga konsistensi desain.
3.3 Jenis Blade Component
Blade Component dibagi menjadi dua jenis utama:
1. Anonymous Component
Komponen yang hanya berupa file Blade tanpa class PHP tambahan. Biasanya digunakan untuk kebutuhan sederhana yang tidak memerlukan logika kompleks.
Lokasi file:
resources/views/components/
Cocok digunakan untuk:
- Alert
- Button
- Badge
- Elemen UI sederhana lainnya
2. Class-Based Component
Komponen yang memiliki class PHP untuk menangani logika tambahan atau manipulasi data sebelum ditampilkan ke view.
Struktur:
Class: app/View/Components/
View: resources/views/components/
Cocok digunakan ketika:
- Memerlukan pengolahan data
- Memiliki banyak parameter
- Membutuhkan struktur lebih kompleks
3.4 Implementasi Sederhana Blade Component
A. Persiapan Awal
Pastikan PHP dan Composer sudah terinstal.
Cek versi PHP:
php -v
Cek Composer:
composer -v
Kalau dua ini belum ada, instal dulu.
B. Membuat Proyek Laravel Baru
Jalankan perintah berikut di terminal:
composer create-project laravel/laravel blade-component-app
Masuk ke folder proyek:
cd blade-component-app
Jalankan server:
php artisan serve
Jika halaman Laravel muncul, berarti proyek berhasil dibuat.
C. Memahami Struktur View
Folder view ada di:
resources/views/
File default yang ditampilkan adalah:
resources/views/welcome.blade.php
Semua Blade Component akan dibuat di dalam folder:
resources/views/components/
Jika folder "components" belum ada, buat secara manual.
D. Implementasi Anonymous Blade Component
1. Membuat Komponen Alert
Buat file baru:
resources/views/components/alert.blade.php
Isi file tersebut:
<div style="padding:10px; margin-bottom:10px; border-radius:5px; background-color: {{ $color }};">
{{ $slot }}
</div>
Penjelasan:
- $color adalah parameter
- $slot adalah isi konten komponen
2. Menggunakan Komponen di View
Buka:
resources/views/welcome.blade.php
Tambahkan di dalam <body>:
<x-alert color="lightgreen">
Data berhasil disimpan.
</x-alert><x-alert color="salmon">
Terjadi kesalahan pada sistem.
</x-alert>
Penjelasan:
1. x itu apa?
Huruf x adalah prefix khusus di Blade untuk memanggil component.
Artinya:
Kalau kamu lihat <x-sesuatu>, itu bukan HTML biasa. Itu adalah Blade Component.
Jadi x = penanda bahwa ini komponen Blade.
Tanpa x, browser akan menganggapnya tag HTML aneh dan bingung.
2. alert itu apa?
alert adalah nama komponen.
Nama itu diambil dari file:
resources/views/components/alert.blade.php
Laravel otomatis membaca nama file sebagai nama komponen.
Jadi:
File: alert.blade.php
Nama komponen: alert
Cara panggil: <x-alert>
Kalau file-nya card.blade.php, maka dipanggil dengan <x-card>.
Sederhana. Laravel cuma mencocokkan nama file dengan nama tag setelah x-.
Artinya:
x → ini komponen
alert → nama komponen
color="lightgreen" → parameter (props)
Isi di dalam tag → $slot
Laravel akan mengganti itu dengan isi dari:
resources/views/components/alert.blade.php
Misalnya isi filenya:
<div style="background-color: {{ $color }}">
{{ $slot }}
</div>Maka <x-alert> tadi akan berubah menjadi HTML biasa saat dirender.
Simpan, lalu refresh browser.
Sekarang kamu sudah menggunakan Blade Component pertama tanpa menyalin HTML berulang kali.
HASIL:
E. Implementasi Class-Based Component
Sekarang kita buat komponen yang memiliki class.
1. Generate Component
Jalankan:
php artisan make:component Card
Laravel akan membuat:
- app/View/Components/Card.php
- resources/views/components/card.blade.php
2. Edit File Class
Buka:
app/View/Components/Card.php
Ubah menjadi:
namespace App\View\Components;
use Illuminate\View\Component;
class Card extends Component
{
public $title;
public function __construct($title)
{
$this->title = $title;
}
public function render()
{
return view('components.card');
}
}
Penjelasan:
- Properti $title akan tersedia di view
- Constructor menerima parameter dari tag <x-card>
3. Edit File View Component
Buka:
resources/views/components/card.blade.php
Isi dengan:
<div style="border:1px solid #ccc; padding:15px; margin-bottom:15px;">
<h3>{{ $title }}</h3>
<div>
{{ $slot }}
</div>
</div>
4. Menggunakan Komponen Card
Kembali ke:
resources/views/welcome.blade.php
Tambahkan:
<x-card title="Informasi">
Ini adalah isi card pertama.
</x-card>
<x-card title="Pengumuman">
Ini adalah isi card kedua.
</x-card>
Refresh browser.
Sekarang halaman menampilkan beberapa card dengan judul berbeda tanpa menulis ulang struktur HTML.
HASIL:
F. Struktur Akhir Proyek
Struktur penting yang terbentuk:
app/
└── View/
└── Components/
└── Card.php
resources/
└── views/
├── welcome.blade.php
└── components/
├── alert.blade.php
└── card.blade.php
Dengan struktur ini:
- Anonymous component berada di folder components
- Class-based component memiliki class dan file blade terpisah
Semua komponen bisa digunakan di seluruh view aplikasi
3.5 Kesimpulan
Laravel menyediakan Blade sebagai templating engine untuk membangun tampilan aplikasi web secara terstruktur. Salah satu fitur penting dalam Blade adalah Blade Component, yang memungkinkan pembuatan elemen UI yang reusable dan modular.
Blade Component terbagi menjadi Anonymous Component dan Class-Based Component. Penggunaannya membantu mengurangi duplikasi kode, meningkatkan keterbacaan, serta mempermudah pemeliharaan aplikasi.
Dalam pengembangan aplikasi skala menengah hingga besar, penggunaan Blade Component sangat direkomendasikan untuk menjaga konsistensi struktur tampilan dan efisiensi pengembangan.
4, Daftar Pustaka
Laravel. (2024). Documentation. https://laravel.com/docs
Malas Ngoding. (2023). Tutorial Laravel lengkap bahasa Indonesia. https://www.malasngoding.com
Petani Kode. (2023). Tutorial Laravel bahasa Indonesia. https://www.petanikode.com
Santri Koding. (2023). Belajar Laravel untuk pemula. https://santrikoding.com
0 Komentar