> 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.2-memotong-layout-html-slicing.md). # 3.2 Memotong Layout HTML (Slicing) ## Memotong layout HTML dengan Blade Saat halaman masih sedikit, menulis HTML penuh di setiap file masih terasa aman. Masalah muncul saat halaman mulai banyak. Header, footer, dan kerangka halaman terus diulang. Akibatnya, perubahan kecil bisa memaksa Anda mengedit banyak file. Di sinilah teknik **slicing layout** dipakai. ### Apa itu slicing layout Slicing layout berarti memisahkan bagian tampilan menjadi: * bagian yang **tetap** * bagian yang **berubah** Contoh bagian tetap: * `` * header * footer Contoh bagian berubah: * judul halaman * isi beranda * daftar buku Tujuannya sederhana: **kerangka HTML ditulis sekali, lalu halaman lain tinggal mengisi bagian tengahnya.** ### Tiga directive yang perlu dikenali Pada tahap ini, fokus pada tiga directive berikut: * `@yield('konten')` — penanda area kosong di layout utama * `@extends('layouts.app')` — tanda bahwa sebuah halaman memakai layout utama * `@section('konten') ... @endsection` — isi yang dikirim ke area kosong tadi {% hint style="info" %} Nama pada `@yield` dan `@section` harus sama persis. Jika berbeda, isi halaman tidak akan masuk ke layout. {% endhint %} ### Sebelum mulai Pastikan kondisi berikut sudah siap: * Anda sudah membuat file Blade sederhana di 3.1 * proyek `e-library` bisa dijalankan * folder `resources/views` sudah terbuka di VS Code ### Membuat layout utama Sekarang buat kerangka halaman yang akan dipakai bersama. {% stepper %} {% step %} ### Buat folder `layouts` Di dalam `resources/views`, buat folder baru bernama: ``` layouts ``` {% endstep %} {% step %} ### Buat file `app.blade.php` Di dalam folder `layouts`, buat file: ``` app.blade.php ``` {% endstep %} {% step %} ### Isi layout utama Masukkan kode berikut: ```html E-Library SMK

E-Library Perpustakaan SMK

@yield('konten')

``` Lalu simpan file dengan `Ctrl + S`. {% endstep %} {% endstepper %} ### Membuat halaman yang memakai layout Setelah layout utama siap, buat satu halaman isi. Buat file baru di `resources/views` dengan nama: ``` beranda.blade.php ``` Isi file itu dengan kode berikut: ```php @extends('layouts.app') @section('konten')

Selamat datang di beranda utama

Halaman ini memakai layout yang sama dengan halaman lain.

@endsection ``` Lalu simpan file. ### Hubungkan ke route Buka file `routes/web.php`. Tambahkan route berikut: ```php Route::get('/beranda', function () { return view('beranda'); }); ``` Lalu simpan file dengan `Ctrl + S`. ### Nyalakan server sebelum menguji halaman 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 slicing Sekarang buka browser dan akses salah satu alamat berikut: * `http://e-library.test/beranda` * `http://127.0.0.1:8000/beranda` Jika berhasil, Anda akan melihat halaman beranda dengan: * header dari layout utama * isi dari file `beranda.blade.php` * footer dari layout utama Artinya, Blade berhasil menggabungkan layout dan isi halaman. ### Bagaimana alurnya bekerja Saat route menjalankan `view('beranda')`, Laravel membaca file `beranda.blade.php`. Di file itu, Laravel melihat: ```php @extends('layouts.app') ``` Artinya, halaman ini memakai layout `resources/views/layouts/app.blade.php`. Lalu Laravel mencari bagian: ```php @section('konten') ``` Isi bagian itu dimasukkan ke posisi: ```php @yield('konten') ``` Hasil akhirnya baru dikirim ke browser sebagai satu halaman utuh. ### Hal penting yang perlu diingat Pegang aturan ini saat slicing layout: * layout utama menyimpan kerangka halaman * halaman turunan hanya menulis isi yang berubah * nama `@yield` dan `@section` harus cocok * penulisan `layouts.app` memakai tanda titik, bukan garis miring ### Output yang harus terlihat Setelah subbab ini selesai, hasil berikut seharusnya sudah terlihat: * file `resources/views/layouts/app.blade.php` berhasil dibuat * file `resources/views/beranda.blade.php` memakai `@extends('layouts.app')` * route `/beranda` berhasil memanggil `view('beranda')` * halaman `/beranda` menampilkan header, isi, dan footer dalam satu tampilan ### Troubleshooting yang paling sering Masalah yang paling sering muncul: * **`View [layouts.app] not found.`** — file layout salah nama atau salah folder * **isi halaman tidak muncul** — nama `@yield` dan `@section` tidak sama * **halaman tidak bisa dibuka** — route belum ditulis atau file belum disimpan {% hint style="warning" %} Jika layout berhasil tampil tetapi isi tengah kosong, cek dulu apakah `@yield('konten')` dan `@section('konten')` memakai nama yang sama. {% endhint %} ### Poin evaluasi bab 3.2 Pastikan Anda sudah memahami poin berikut: * Saya paham tujuan slicing layout adalah menghindari pengulangan HTML. * Saya berhasil membuat folder `layouts` di `resources/views`. * Saya berhasil membuat file `app.blade.php` sebagai layout utama. * Saya paham fungsi `@yield`, `@extends`, dan `@section`. * Saya berhasil membuat file `beranda.blade.php` yang memakai layout utama. * Saya berhasil membuka halaman `/beranda` di browser. * Saya tahu nama area pada `@yield` dan `@section` harus sama. Jika semua sudah jelas, lanjut ke [3.3 Menggunakan @extends & @include](/laravel/bab-3-blade-templating/3.3-menggunakan-extends-and-include.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.2-memotong-layout-html-slicing.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.