📚 Seri Belajar Laravel Lengkap — Artikel 35 dari 50

Blade Components & Slots:
UI yang Modular dan Reusable

Capek copy-paste komponen yang sama berkali-kali? Saatnya kamu kenali Blade Component — cara Laravel bikin UI lebih rapi, modular, dan mudah dirawat.

#BladeComponent #Laravel #PHP #WebDevelopment #Tutorial

⏱️

Est. Baca

10 Menit

🎯

Level

Intermediate

📅

Tahun

2025

🔢

Artikel

35 / 50

Pernah nggak kamu nulis komponen tombol atau card yang sama persis di 10 halaman berbeda? Lalu satu hari desainer bilang: "Warna buttonnya ganti dong." — dan kamu harus ubah satu per satu di semua file? Menyiksa banget, kan? Nah, inilah saatnya kamu mengenal blade component laravel — fitur yang bakal mengubah cara kamu membangun UI selamanya.

Blade Components adalah salah satu fitur paling powerful yang diperkenalkan di Laravel 7+. Dengan fitur ini, kamu bisa membuat elemen UI sekali, lalu memakainya di mana saja — seperti LEGO yang bisa dipasang-lepas sesuka hati. Artikel ini akan membawamu dari nol sampai benar-benar paham cara kerja Blade Component, termasuk penggunaan Slots untuk konten yang dinamis.

📌 Definisi Kunci

Blade Component adalah unit UI yang berdiri sendiri (self-contained) dalam Laravel, terdiri dari sebuah class PHP dan sebuah Blade view. Sedangkan Slot adalah placeholder konten yang bisa kamu isi dari luar saat memanggil komponen tersebut — mirip "lubang" yang siap diisi konten dinamis.

Apa Itu Blade Component Laravel dan Kenapa Penting?

Bayangkan kamu sedang membangun sebuah rumah. Daripada membuat setiap pintu dari kayu dari awal, kamu pesan pintu jadi yang sudah bisa langsung dipasang. Nah, Blade Component itu kayak pintu jadi tersebut — dibuat sekali, dipasang di mana saja.

Sebelum ada Blade Component, developers Laravel biasanya mengandalkan @include untuk menyisipkan partial view. Masalahnya, @include tidak punya cara yang elegan untuk menerima props atau logika dinamis. Blade Component hadir sebagai solusi yang lebih terstruktur.

🔥 Fakta Menarik

Blade Component di Laravel terinspirasi dari konsep Web Components dan framework frontend seperti Vue.js & React. Ini bukti bahwa Laravel terus berevolusi mengikuti best practice dunia frontend modern — sambil tetap di dalam ekosistem PHP!

Ada dua jenis utama Blade Component yang perlu kamu pahami:

Jenis	Cara Buat	Cocok Untuk	Contoh
Class-based	`make:component`	Komponen dengan logika PHP kompleks	Alert, Modal, Form
Anonymous	Buat file di `views/components/`	Komponen UI sederhana, hanya tampilan	Button, Badge, Card

Cara Membuat Blade Component dari Nol: Step-by-Step

Oke, cukup teorinya. Mari kita langsung hands-on! Kita akan membuat komponen Alert — komponen yang sering banget dipakai di hampir semua aplikasi web.

Generate Component via Artisan

Jalankan perintah berikut di terminal untuk membuat komponen baru secara otomatis:

💻 Terminal

php artisan make:component Alert

Perintah ini akan membuat dua file: app/View/Components/Alert.php dan resources/views/components/alert.blade.php

Edit Class PHP Component

Buka app/View/Components/Alert.php dan tambahkan properti type:

📄 app/View/Components/Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public string $type;

    public function __construct(string $type = 'info')
    {
        $this->type = $type;
    }

    public function render()
    {
        return view('components.alert');
    }
}

Buat Template Blade Component

Edit file resources/views/components/alert.blade.php:

📄 components/alert.blade.php

@props(['type' => 'info'])

@php
    $classes = [
        'info'    => 'bg-blue-100 text-blue-800 border-blue-300',
        'success' => 'bg-green-100 text-green-800 border-green-300',
        'warning' => 'bg-yellow-100 text-yellow-800 border-yellow-300',
        'danger'  => 'bg-red-100 text-red-800 border-red-300',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'p-4 border rounded-lg ' . $classes[$type]]) }}>
    {{ $slot }}
</div>

Gunakan Component di View

Sekarang kamu bisa memanggil komponen Alert dari mana saja dengan tag khusus Blade:

📄 resources/views/welcome.blade.php

<x-alert type="success">
    🎉 Data berhasil disimpan!
</x-alert>

<x-alert type="danger">
    ⚠️ Terjadi kesalahan, coba lagi.
</x-alert>

<x-alert>
    ℹ️ Ini alert default (info).
</x-alert>

💡 Tips Penting

Semua properti publik yang kamu definisikan di class component secara otomatis tersedia di template Blade-nya sebagai variabel. Jadi kalau kamu punya public string $type, di view langsung bisa pakai $type tanpa perlu pass manual!

Memahami Slots: Konten Dinamis di Dalam Component

Kalau Blade Component adalah "wadah", maka Slot adalah "lubang" yang bisa kamu isi konten dari luar. Bayangkan pizza box — kotak pizza itu adalah componentnya, dan kamu bisa mengisi dalamnya dengan topping apa saja (itu slotnya).

Ada dua jenis slot yang perlu kamu kuasai:

⚡ Analisis: Default Slot vs Named Slot

🔹 Default Slot ($slot)

Konten apapun yang kamu tulis di antara tag pembuka & penutup komponen akan masuk ke slot default ini. Cocok untuk satu area konten utama.

🔶 Named Slot (x-slot)

Kamu bisa mendefinisikan beberapa slot bernama dalam satu komponen. Cocok untuk komponen kompleks seperti card dengan header, body, dan footer terpisah.

Mari kita buat contoh yang lebih kompleks — sebuah komponen Card dengan multiple named slots:

📄 components/card.blade.php — Named Slots

<div class="bg-white rounded-xl shadow-md overflow-hidden">

    {{-- Header Slot --}}
    @if ($header)
        <div class="bg-gray-100 px-6 py-4 border-b">
            {{ $header }}
        </div>
    @endif

    {{-- Default (Body) Slot --}}
    <div class="px-6 py-5">
        {{ $slot }}
    </div>

    {{-- Footer Slot --}}
    @if ($footer ?? false)
        <div class="bg-gray-50 px-6 py-3 border-t">
            {{ $footer }}
        </div>
    @endif

</div>

📄 Cara Pakai di View

<x-card>
    <x-slot name="header">
        <h3 class="font-bold text-lg">Profile Mahasiswa</h3>
    </x-slot>

    {{-- Ini masuk ke $slot default --}}
    <p>Nama: Budi Santoso</p>
    <p>NIM: 20230001</p>

    <x-slot name="footer">
        <button class="btn btn-primary">Edit Profil</button>
    </x-slot>
</x-card>

⚡ Insight Penting

Named slots di Laravel menggunakan sintaks <x-slot name="namaSlot">. Sejak Laravel 9+, kamu juga bisa memakai sintaks shorthand <x-slot:namaSlot> — lebih ringkas dan modern!

Anonymous Component & Best Practice Blade Component Laravel

Tidak semua komponen butuh class PHP. Untuk komponen UI sederhana yang hanya urusan tampilan, kamu cukup buat file Blade di folder resources/views/components/ — tanpa artisan, tanpa class!

📄 resources/views/components/button.blade.php — Anonymous Component

@props([
    'variant' => 'primary',
    'size'    => 'md',
])

@php
$variantClasses = [
    'primary'   => 'bg-indigo-600 hover:bg-indigo-700 text-white',
    'secondary' => 'bg-gray-200 hover:bg-gray-300 text-gray-800',
    'danger'    => 'bg-red-600 hover:bg-red-700 text-white',
];
$sizeClasses = [
    'sm' => 'px-3 py-1.5 text-sm',
    'md' => 'px-5 py-2.5 text-base',
    'lg' => 'px-7 py-3.5 text-lg',
];
@endphp

<button {{ $attributes->merge([
    'class' => 'rounded-lg font-semibold transition-all '
               . $variantClasses[$variant] . ' '
               . $sizeClasses[$size]
]) }}>
    {{ $slot }}
</button>

Pemakaiannya sangat bersih:

<x-button>Submit</x-button>
<x-button variant="danger" size="sm">Hapus</x-button>
<x-button variant="secondary" size="lg">Lihat Detail</x-button>

⚠️ Perhatian

Jangan lupa gunakan $attributes->merge() di template komponen kamu! Tanpa ini, atribut seperti class, id, atau onclick yang kamu tambahkan dari luar tidak akan dirender. Ini kesalahan umum yang bikin pemula bingung!

💡 Tips Organisasi

Untuk proyek besar, organisasikan component dalam subfolder. Contoh: components/ui/button.blade.php, components/layout/card.blade.php. Pemanggilan pakai titik: <x-ui.button> dan <x-layout.card>.

Konvensi ini selaras dengan artikel-artikel lain dalam seri 50 Artikel Belajar Laravel ini — termasuk artikel ke-36 yang akan membahas integrasi Bootstrap 5 dengan komponen-komponen yang sudah kamu buat!

🧩

Kesimpulan: Blade Component Laravel = Kode yang Lebih Manusiawi

Di artikel ke-35 ini, kamu sudah belajar bahwa blade component laravel adalah cara terbaik untuk membangun UI yang modular, reusable, dan mudah dirawat. Dari membuat class-based component dengan Artisan, memahami default slot vs named slot, hingga anonymous component untuk UI sederhana — semuanya bisa langsung kamu praktikkan hari ini.

✅ Buat component dengan make:component

✅ Props = public properties di class

✅ $slot untuk konten default

✅ x-slot:name untuk named slot

✅ Anonymous component = cukup file Blade

✅ Gunakan $attributes->merge() selalu!

💬 Punya pertanyaan? Sudah coba buat component pertamamu? Share pengalaman kamu di kolom komentar di bawah! Dan jangan lupa bagikan artikel ini ke teman-teman yang lagi belajar Laravel — satu share bisa mengubah perjalanan belajar mereka! 🚀

💬 Tinggalkan Komentar 📩 Subscribe Seri Ini

Tags Artikel:

#BladeComponent #Laravel #PHP #Slots #WebDevelopment #Tutorial #BelajarLaravel #Mahasiswa

📚 Navigasi Seri — 50 Artikel Belajar Laravel

← Artikel Sebelumnya

Artikel 34

Localization: Aplikasi Multi Bahasa di Laravel

Baca Artikel →

Artikel Selanjutnya →

Artikel 36

Integrasi Bootstrap 5 ke Dalam Proyek Laravel

Baca Artikel →