Blade Templating Dasar — Layout, Include, dan Component

Halo bos! Selamat datang di artikel kelima Belajar Laravel 13.

Kita lanjut langsung dari project blog-sederhana yang sudah kita bangun dari Artikel 1 sampai 4.

Yang sudah kita punya sekarang:

Project Laravel 13 (blog-sederhana)
Database sudah terhubung
PostController (resource) sudah ada
Route Route::resource('posts', PostController::class) sudah terpasang

Sekarang kita akan membuat tampilan yang rapi menggunakan Blade.

Langkah 1: Buat Layout Utama

Jalankan perintah ini di terminal (pastikan kamu berada di folder project):

php artisan make:view layouts.app

Buka file yang baru dibuat:

resources/views/layouts/app.blade.php

Ganti seluruh isinya dengan kode berikut:

<!DOCTYPE html>

<head>

<title>@yield('title', 'Blog Sederhana')</title>

<style>

* { box-sizing: border-box; }

body {

font-family: system-ui, -apple-system, sans-serif;

margin: 0;

background: #f1f5f9;

color: #1e293b;

line-height: 1.6;

}

.navbar {

background: #0f172a;

color: white;

padding: 1rem 2rem;

display: flex;

gap: 1.5rem;

align-items: center;

}

.navbar a {

color: #e2e8f0;

text-decoration: none;

font-weight: 500;

}

.navbar a:hover { color: white; }

.container {

max-width: 900px;

margin: 2rem auto;

padding: 0 1.5rem;

}

.card {

background: white;

border-radius: 0.75rem;

padding: 1.5rem 2rem;

box-shadow: 0 1px 3px rgba(0,0,0,0.08);

}

.footer {

text-align: center;

padding: 2rem;

color: #64748b;

font-size: 0.9rem;

}

h1 { margin-top: 0; }

</style>

</head>

<body>

@include('partials.navbar')

@yield('content')

</div>

</footer>

</body>

</html>

Langkah 2: Buat Partial Navbar

Jalankan perintah:

php artisan make:view partials.navbar

Buka file resources/views/partials/navbar.blade.php dan isi:

<a href="{{ route('posts.index') }}">Beranda</a>

<a href="{{ route('posts.index') }}">Semua Post</a>

<a href="{{ route('posts.create') }}">Tambah Post</a>

</nav>

Catatan: Kita pakai route('posts.index') karena di Artikel 4 kita sudah pakai Named Route dari Route::resource.

Langkah 3: Buat Halaman Daftar Post

Jalankan perintah:

php artisan make:view posts.index

Buka file resources/views/posts/index.blade.php dan isi:

@extends('layouts.app')

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

@section('content')

<h1>Daftar Semua Post</h1>

<p>Ini adalah halaman daftar post. Nanti kita akan menampilkan data dari database di sini.</p>

+ Tambah Post Baru

</a>

</p>

</div>

@endsection

Langkah 4: Buat Halaman Create (Form Tambah Post)

Jalankan perintah:

php artisan make:view posts.create

Buka file resources/views/posts/create.blade.php dan isi:

@extends('layouts.app')

@section('title', 'Tambah Post')

@section('content')

<h1>Tambah Post Baru</h1>

<p>Form untuk menambah post akan kita buat di sini pada artikel selanjutnya.</p>

<a href="{{ route('posts.index') }}">← Kembali ke Daftar Post</a>

</p>

</div>

@endsection

Langkah 5: Update PostController

Buka file app/Http/Controllers/PostController.php.

Ubah method index dan create menjadi seperti ini:

public function index()

{

return view('posts.index');

}

public function create()

{

return view('posts.create');

}

Biarkan method lainnya (store, show, edit, update, destroy) masih kosong dulu.

Langkah 6: Coba di Browser

Jalankan (kalau belum):

herd open

Lalu buka alamat berikut:

http://blog-sederhana.test/posts → harus muncul halaman Daftar Semua Post
http://blog-sederhana.test/posts/create → harus muncul halaman Tambah Post Baru

Kalau navbar dan layout sudah muncul, berarti berhasil!

Langkah 7: Membuat Component Alert (Bonus)

Kita buat component sederhana yang bisa dipakai ulang.

Jalankan perintah:

php artisan make:view components.alert

Buka file resources/views/components/alert.blade.php dan isi:

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

@php

$styles = [

'info' => 'background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6;',

'success' => 'background: #dcfce7; color: #166534; border-left: 4px solid #22c55e;',

'danger' => 'background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444;',

'warning' => 'background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b;',

];

@endphp

</div>

Contoh pemakaian di posts/index.blade.php (opsional):

@section('content')

<x-alert type="success">

Selamat! Layout Blade kamu sudah berhasil dibuat.

</x-alert>

<h1>Daftar Semua Post</h1>

<p>Ini adalah halaman daftar post.</p>

</div>

@endsection

Ringkasan File yang Sudah Kita Buat

Yang Perlu Kamu Pahami

@extends('layouts.app') → memakai layout
@section('content') → mengisi bagian konten
@yield('content') → tempat konten ditampilkan di layout
@include('partials.navbar') → memasukkan partial
<x-alert> → memanggil Blade Component

Blade Templating Dasar — Layout, Include, dan Component

Langkah 7: Membuat Component Alert (Bonus)

Ringkasan File yang Sudah Kita Buat

Yang Perlu Kamu Pahami

Query Builder vs Eloquent — Kapan Pakai yang Mana?

Model & Eloquent ORM Dasar di Laravel 13

Migration Dasar — Membuat Tabel Posts dan Categories