Blade Components & Layout

Mengapa komponen?

Elemen UI yang berulang — tombol, kartu produk, notifikasi, kerangka halaman — sebaiknya ditulis sekali. Komponen Blade adalah cara modern dan disarankan (menggantikan @extends/@include untuk layout baru) untuk menyusun UI.

Komponen anonim (tanpa class)

Cukup buat berkas di resources/views/components. Nama berkas menjadi nama tag <x-...>:

{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info', 'judul' => null])

<div {{ $attributes->merge(['class' => "alert alert-{$type}"]) }}>
    @if ($judul)
        <strong>{{ $judul }}</strong>
    @endif
    {{ $slot }}
</div>

Pemakaian:

<x-alert type="success" judul="Berhasil" class="mt-3">
    Produk berhasil disimpan.
</x-alert>

• @props([...]) mendeklarasikan data yang diterima beserta nilai bawaannya. Atribut lain (mis. class) otomatis masuk ke $attributes.
• {{ $slot }} = isi di antara tag pembuka dan penutup.
• $attributes->merge([...]) menggabungkan atribut bawaan dengan yang diberikan pemakai (class digabung, bukan ditimpa).
• Untuk mengirim ekspresi PHP sebagai prop, awali dengan titik dua: :harga="$produk->harga".

Slot bernama

{{-- components/kartu.blade.php --}}
<div class="kartu">
    <header>{{ $header }}</header>
    {{ $slot }}
    <footer>{{ $footer ?? '' }}</footer>
</div>

<x-kartu>
    <x-slot:header>Judul Kartu</x-slot>
    Isi utama kartu.
    <x-slot:footer>Catatan kaki</x-slot>
</x-kartu>

Komponen berbasis class

Untuk komponen dengan logika (query, format), buat class: php artisan make:component KartuProduk. Laravel membuat app/View/Components/KartuProduk.php (logika di method, data publik otomatis tersedia di view) dan resources/views/components/kartu-produk.blade.php. Dipakai sebagai <x-kartu-produk :produk="$produk" />.

Komponen layout

Layout halaman cukup berupa komponen biasa:

{{-- resources/views/components/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="id">
<head>
    <title>{{ $title ?? config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <nav>...</nav>
    <main>{{ $slot }}</main>
</body>
</html>

{{-- resources/views/produk/index.blade.php --}}
<x-layouts.app>
    <x-slot:title>Daftar Produk</x-slot>
    <h1>Daftar Produk</h1>
</x-layouts.app>

Titik pada nama (x-layouts.app) = sub-folder components/layouts/app.blade.php. @vite memuat aset hasil build Vite.

Cara lama: @extends / @section

Proyek lama memakai pewarisan: @extends('layouts.app'), @section('isi') ... @endsection, dan @yield('isi'). Masih sah dan banyak ditemui, tetapi komponen lebih fleksibel dan mudah dipahami.

@stack & @push

Untuk menyisipkan skrip per halaman ke layout: di layout tulis @stack('scripts'), di halaman tulis @push('scripts') ... @endpush.

Praktik baik

• Beri nama komponen sesuai fungsinya: alert, tombol, kartu-produk.
• Buat komponen kecil dan fokus; susun jadi komponen yang lebih besar.
• Tetapkan nilai bawaan di @props sehingga pemakaian ringkas.
• Jangan memasukkan query database ke berkas Blade; kirim data dari controller.