Membuat Komponen Layout Sederhana di Laravel

Laravel Blade Components memungkinkan kita membuat layout yang lebih modular dan reusable. Berikut adalah contoh sederhana cara membuat layout dengan komponen.

1. Buat Komponen Layout

Jalankan perintah berikut untuk membuat komponen:

Perintah ini akan membuat:

Kelas PHP: app/View/Components/Layout.php
File Blade: resources/views/components/layout.blade.php

2. Edit `Layout.php` (Opsional)

Buka app/View/Components/Layout.php jika ingin menambahkan logika khusus, tapi jika hanya untuk layout sederhana, kita bisa langsung ke langkah berikutnya.

3. Edit `layout.blade.php`

Buka resources/views/components/layout.blade.php dan ubah isinya menjadi:

blade

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'Laravel App' }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900">

    <header class="bg-blue-600 text-white p-4">
        <h1 class="text-xl font-bold">Laravel Simple Layout</h1>
    </header>

    <main class="container mx-auto p-4">
        {{ $slot }}
    </main>

    <footer class="bg-gray-800 text-white p-4 text-center mt-8">
        &copy; {{ date('Y') }} Laravel App. All rights reserved.
    </footer>

</body>
</html>

4. Gunakan Komponen Layout di Blade

Sekarang, kita bisa menggunakan layout ini di file Blade lainnya, misalnya di resources/views/home.blade.php:

5. Hasilnya

Saat membuka halaman home.blade.php, struktur HTML yang dihasilkan akan seperti ini:

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Home</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900">

    <header class="bg-blue-600 text-white p-4">
        <h1 class="text-xl font-bold">Laravel Simple Layout</h1>
    </header>

    <main class="container mx-auto p-4">
        <h2 class="text-2xl font-semibold">Selamat Datang di Home Page</h2>
        <p class="mt-2">Ini adalah contoh konten yang menggunakan layout komponen.</p>
    </main>

    <footer class="bg-gray-800 text-white p-4 text-center mt-8">
        &copy; 2025 Laravel App. All rights reserved.
    </footer>

</body>
</html>

Kesimpulan

🔹 Dengan pendekatan ini, kita bisa memisahkan tampilan utama dan kontennya menggunakan komponen Blade.
🔹 Menggunakan slot memungkinkan kita memasukkan konten dinamis ke dalam layout.
🔹 Layout ini bisa digunakan di berbagai halaman tanpa harus menulis ulang struktur HTML yang sama. 🚀

Code Snippets

Terminal

Jalankan perintah berikut untuk membuat komponen:

php

php artisan make:component Layout

Download Tutorial

Format PDF, Video

Last Updated Feb 16, 2025

Download Now

Share this article

About Author

Admin

admin

Membuat Komponen Layout Sederhana di Laravel