> For the complete documentation index, see [llms.txt](https://learn.devlabss.my.id/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.devlabss.my.id/laravel/bab-3-blade-templating/3.3-menggunakan-extends-and-include.md). # 3.3 Menggunakan @extends & @include ## Menggunakan `@extends` dan `@include` Di bab sebelumnya, Anda sudah memakai `@extends` untuk mengambil layout utama. Sekarang saatnya membedakan dua directive yang sering dipakai bersama: * `@extends` * `@include` Keduanya sama-sama membantu merapikan file Blade, tetapi tugasnya berbeda. ### Perbedaan `@extends` dan `@include` Gunakan aturan sederhana ini: * `@extends` dipakai untuk memakai **kerangka halaman utama** * `@include` dipakai untuk menyisipkan **potongan kecil yang bisa dipakai ulang** Contoh penggunaannya: * `@extends('layouts.app')` untuk memakai layout utama * `@include('layouts.navbar')` untuk menyisipkan navbar Jadi: * `@extends` bekerja di level halaman * `@include` bekerja di level komponen kecil {% hint style="info" %} Satu halaman biasanya hanya punya satu `@extends`, tetapi bisa punya beberapa `@include`. {% endhint %} ### Kapan `@include` dibutuhkan Saat layout mulai besar, file `app.blade.php` bisa cepat penuh. Biasanya bagian yang cocok dipisah dengan `@include` adalah: * navbar * footer * sidebar Dengan begitu, layout utama tetap ringkas dan lebih mudah dibaca. ### Sebelum mulai Pastikan kondisi berikut sudah siap: * file `resources/views/layouts/app.blade.php` sudah ada * file `resources/views/beranda.blade.php` sudah ada * route `/beranda` sudah bisa dibuka ### Membuat komponen navbar Sekarang pisahkan navbar menjadi file tersendiri. {% stepper %} {% step %} ### Buat file `navbar.blade.php` Di dalam folder `resources/views/layouts`, buat file: ``` navbar.blade.php ``` {% endstep %} {% step %} ### Isi file navbar Masukkan kode berikut: ```html ``` Lalu simpan file dengan `Ctrl + S`. {% endstep %} {% step %} ### Panggil navbar di layout utama Buka file `resources/views/layouts/app.blade.php`. Ubah isi file agar menjadi seperti ini: ```html E-Library SMK @include('layouts.navbar')

E-Library Perpustakaan SMK

@yield('konten')

``` Lalu simpan file. {% endstep %} {% endstepper %} ### Pastikan halaman beranda tetap memakai `@extends` File `beranda.blade.php` tetap memakai layout utama seperti ini: ```php @extends('layouts.app') @section('konten')

Selamat datang di beranda utama

Halaman ini memakai layout yang sama dengan halaman lain.

@endsection ``` Di sini terlihat jelas perannya: * `@extends` mengambil layout utama * `@include` menyisipkan navbar ke dalam layout utama ### Nyalakan server sebelum menguji hasil Sebelum membuka browser, pastikan server Laravel sedang berjalan. Gunakan salah satu cara berikut: * buka **Laragon** lalu klik **Start All** * atau jalankan `php artisan serve` dari folder proyek ### Menguji hasil `@include` Sekarang buka browser dan akses salah satu alamat berikut: * `http://e-library.test/beranda` * `http://127.0.0.1:8000/beranda` Jika berhasil, halaman beranda sekarang menampilkan: * navbar dari file `navbar.blade.php` * header dari `app.blade.php` * isi halaman dari `beranda.blade.php` Artinya, Blade berhasil menggabungkan layout utama, komponen kecil, dan isi halaman. ### Bagaimana `@include` bekerja Saat Laravel membaca baris ini: ```php @include('layouts.navbar') ``` Laravel mencari file: ``` resources/views/layouts/navbar.blade.php ``` Lalu isi file itu disisipkan ke posisi `@include`. Jadi, `@include` bisa dianggap sebagai cara aman untuk memecah potongan tampilan agar tidak menumpuk di satu file. ### Hal penting yang perlu diingat Pegang aturan ini: * `@extends` untuk layout utama * `@include` untuk komponen kecil * penulisan nama file memakai tanda titik * file yang dipanggil tidak perlu menuliskan `.blade.php` Contoh: * `layouts.app` * `layouts.navbar` ### Output yang harus terlihat Setelah subbab ini selesai, hasil berikut seharusnya sudah terlihat: * file `resources/views/layouts/navbar.blade.php` berhasil dibuat * file `app.blade.php` memanggil `@include('layouts.navbar')` * halaman `/beranda` menampilkan navbar, header, isi, dan footer * navbar bisa dipakai ulang tanpa salin-tempel ke banyak file ### Troubleshooting yang paling sering Masalah yang paling sering muncul: * **`View [layouts.navbar] not found.`** — file salah nama atau salah folder * **navbar tidak muncul** — baris `@include('layouts.navbar')` belum ditulis di layout * **halaman rusak setelah dipecah** — ada tag HTML yang belum ditutup dengan benar {% hint style="warning" %} Jika komponen kecil ingin dipakai di banyak halaman, letakkan komponen itu di file terpisah lalu panggil dengan `@include`. Jangan salin-tempel isinya ke banyak file. {% endhint %} ### Poin evaluasi bab 3.3 Pastikan Anda sudah memahami poin berikut: * Saya paham perbedaan `@extends` dan `@include`. * Saya tahu `@extends` dipakai untuk layout utama. * Saya tahu `@include` dipakai untuk komponen kecil yang bisa dipakai ulang. * Saya berhasil membuat file `navbar.blade.php`. * Saya berhasil menyisipkan navbar ke layout utama. * Saya berhasil melihat navbar muncul di halaman `/beranda`. Jika semua sudah jelas, lanjut ke [3.4 Penjelasan Alur Kerja Layout](/laravel/bab-3-blade-templating/3.4-penjelasan-alur-kerja-layout.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://learn.devlabss.my.id/laravel/bab-3-blade-templating/3.3-menggunakan-extends-and-include.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.