laravelbladelayoutPemula3 mnt baca

Blade Layout dan Component

Bangun kerangka halaman dengan @extends dan @section, plus component reusable ala <x-alert/>.

Layout induk dengan @yield

Daripada mengulang tag HTML, navbar, dan footer di setiap halaman, buat satu layout induk:

blade

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'Blogku')</title>
</head>
<body>
    <nav>... menu navigasi ...</nav>

    <main>
        @yield('content')
    </main>

    <footer>... footer ...</footer>
</body>
</html>

Halaman anak tinggal mengisi slotnya:

blade

{{-- resources/views/posts/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Daftar Postingan')

@section('content')
    <h1>Semua Postingan</h1>
    @foreach ($posts as $post)
        <article>{{ $post->judul }}</article>
    @endforeach
@endsection

@yield('title', 'Blogku') punya nilai default kalau halaman anak tidak mengisi section tersebut.

Include: potongan view reusable

Untuk potongan kecil seperti form atau kartu, pakai @include:

blade

{{-- Di dalam view --}}
@include('partials.alert', ['pesan' => 'Data berhasil disimpan!'])

blade

{{-- resources/views/partials/alert.blade.php --}}
<div class="alert">{{ $pesan }}</div>

Component modern: sintaks x-

Laravel 7+ punya sintaks component yang lebih rapi. Buat dengan Artisan:

bash

php artisan make:component Alert

Ini membuat class di app/View/Components/Alert.php dan view di resources/views/components/alert.blade.php. Pakainya seperti tag HTML:

blade

<x-alert type="sukses" pesan="Data tersimpan!" />

{{-- Dengan slot untuk konten bebas --}}
<x-card>
    <h2>Judul kartu</h2>
    <p>Isi bebas di sini via $slot</p>
</x-card>

Catatan teknis: Pilih @include untuk potongan view sederhana tanpa logika, dan component x- kalau butuh props terstruktur atau logika di class component-nya. Untuk project kecil, @include biasanya sudah cukup.