Blade Layout Laravel: Panduan Lengkap Membuat Struktur Templating yang Rapi
Setelah memahami konsep View Blade, langkah berikutnya dalam pengembangan antarmuka Laravel adalah mempelajari Blade Layout. Blade Layout merupakan teknik untuk membuat struktur tampilan yang dapat digunakan ulang (reusable), sehingga mempermudah pengembangan UI aplikasi yang konsisten dan rapi.
Konsep ini sangat penting dalam proyek skala kecil hingga besar karena membantu memisahkan bagian tampilan yang selalu sama seperti header, footer, sidebar, hingga script, sehingga developer fokus mengisi bagian konten saja.
Apa Itu Blade Layout?
Blade Layout adalah fitur dari Blade Templating Engine yang memungkinkan developer membuat template dasar dan meneruskannya ke berbagai halaman lain menggunakan konsep inheritance.
Dengan pendekatan ini, struktur utama seperti <html>, <head>, <body> cukup ditulis sekali dalam sebuah layout, kemudian halaman lain tinggal mengisi bagian yang berubah menggunakan section.
Kenapa Blade Layout Penting?
Berikut beberapa keunggulan penggunaan Blade Layout:
✔ Menghemat Waktu Pembuatan UI — Tidak perlu menulis ulang struktur yang sama.
✔ Konsistensi Antar Halaman — Desain dan struktur tetap seragam.
✔ Mudah Maintenance — Perubahan pada UI cukup dilakukan di satu file.
✔ Mendukung Modular UI — Bisa dikombinasikan dengan komponen Blade.
Dengan manfaat di atas, Blade Layout menjadi fondasi penting dalam pengembangan Laravel moden.
Struktur Dasar Blade Layout
Mari mulai dari membuat file layout utama.
1. Membuat Layout Utama
Buat file di direktori berikut:
resources/views/layouts/main.blade.php
Isi contoh layout dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@yield('title')</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
@include('partials.navbar')
<div class="container">
@yield('content')
</div>
@include('partials.footer')
@yield('scripts')
</body>
</html>
Penjelasan:
@yield('title')→ untuk judul halaman@yield('content')→ untuk konten inti halaman@yield('scripts')→ optional untuk script halaman tertentu@include()→ menyisipkan file bagian lain seperti navbar & footer
2. Membuat Partial Layout (Opsional)
Partial cocok untuk UI yang sering dipakai seperti navigasi dan footer.
Contoh Partial Navbar
Buat file:
resources/views/partials/navbar.blade.php
Isi:
<nav>
<ul>
<li><a href="/">Beranda</a></li>
<li><a href="/profile">Profil</a></li>
<li><a href="/contact">Kontak</a></li>
</ul>
</nav>
Contoh Partial Footer
Buat file:
resources/views/partials/footer.blade.php
Isi:
<footer>
<small>© 2026 Laravel App. All rights reserved.</small>
</footer>
Dengan partial, perubahan UI jadi jauh lebih mudah dikelola.
3. Menggunakan Blade Layout di Halaman Lain
Sekarang kita buat halaman yang memakai layout utama.
Buat file baru:
resources/views/home.blade.php
Isi:
@extends('layouts.main')
@section('title', 'Halaman Home')
@section('content')
<h1>Selamat Datang!</h1>
<p>Ini adalah contoh penggunaan Blade Layout dalam Laravel.</p>
@endsection
Penjelasan:
@extends()→ menghubungkan ke layout@section()→ mengisi blok yang ada di@yield()
4. Menambahkan Script Khusus Halaman (Opsional)
Untuk halaman yang butuh script tambahan, gunakan @section lagi.
Contoh:
@section('scripts')
<script>
console.log("Home page loaded!");
</script>
@endsection
Jika tidak ditambahkan, maka bagian script tidak akan tampil.
Routing Controller ke View
Agar halaman tampil di browser, tambahkan routing:
File: routes/web.php
Route::get('/home', function() {
return view('home');
});
Lalu akses:
http://localhost:8000/home
Fleksibilitas Blade Layout dalam Proyek Nyata
Dalam proyek yang lebih kompleks, Blade Layout bisa digabung dengan:
✔ Blade Components (fitur card, alert, modal, button)
✔ Stack & Push Script (untuk stack script dinamis)
✔ Slot & Attribute Component (struktur UI lebih modular)
✔ Template Admin Panel (sidebar + navbar + content area)
Hal ini menjadikan Blade Layout sangat fleksibel dalam skenario UI apapun.
Blade Stack (Opsional Tingkat Lanjut)
Laravel menyediakan fitur @stack dan @push untuk menambahkan script dari child template tanpa merusak struktur layout.
Di Layout
@stack('scripts')
Di Child
@push('scripts')
<script>
alert("Hello from Blade Stack!");
</script>
@endpush
Fitur ini sangat berguna untuk script modul seperti DataTables atau ChartJS.
Kesimpulan
Blade Layout merupakan fitur templating yang penting dalam Laravel karena membantu developer membuat tampilan aplikasi yang:
✔ konsisten,
✔ modular,
✔ mudah dipelihara, dan
✔ efisien.
Dengan memanfaatkan @extends, @yield, @section, @include, hingga @stack, tampilan UI dapat dibuat lebih rapi dan profesional.
Setelah memahami Blade Layout, materi selanjutnya bisa masuk ke Request Response, Model Eloquent, atau Migration Database, sesuai urutan playlistmu.
