# Membuat Template dengan Blade Laravel

### Mengapa Butuh Template ? <a href="#mengapa-butuh-template" id="mengapa-butuh-template"></a>

&#x20;

Sisi tampilan depan (*frontend*) pada web merupakan bagian yang penting dalam menyajikan informasi kepada pengguna. Website yang baik salah satunya adalah karena mengedepankan nilai estetika pada sisi tampilan depannya. Namun, bagi para pengembang tentunya sangat penting membuat tampilan depan yang mudah dikembangkan kembali dan desain yang konsisten.

Permasalahan pada pengembangan sisi frontend contoh kasusnya adalah jika kita menginginkan banyak halaman HTML yang memiliki layout yang serupa dan hanya unik pada bagian kontennya saja maka kita tidak usah menulis ulang bagian-bagian HTML yang layoutnya statis (tidak berubah).

Contohnya di bawah ini, terdapat tiga halaman yaitu index, create dan show yang semuanya memiliki layout yang sama yaitu dibuka dengan tag `<html>`, memiliki bagian \<head> `<navbar>` dan `<sidebar>` yang layoutnya sama persis. Hal yang unik dari masing-masing halaman adalah konten yang ada di dalamnya yaitu bagian table di halaman index, bagian form di halaman create, dan bagian card untuk halaman show.

&#x20;

![](https://blog.sanbercode.com/wp-content/uploads/2020/08/Blade-Templating.jpg)

&#x20;

### &#x20;

### Membuat Template Utama dengan Blade <a href="#membuat-template-utama-dengan-blade" id="membuat-template-utama-dengan-blade"></a>

&#x20;

Daripada menulis ulang kode untuk bagian yang sama seperti `<head>`, `<navbar>`, `<sidebar>`, lebih baik jika kita buat sebuah template utama yang di dalam nya terdapat layout yang dapat dipakai kembali oleh halaman-halaman lainnya sehingga meminimalisasi perulangan.

![](https://blog.sanbercode.com/wp-content/uploads/2020/08/master-template.jpg)

&#x20;

Contoh di atas kita buat sebuah template utama atau *parent template* dengan nama `master.blade.php` dan kita akan buat halaman anak atau *children* dengan nama `index.blade.php` . Di dalam `master.blade.php` tersebut kita menulis kode HTML dari tag pembuka `<html>` sampai akhir, juga terdapat bagian navbar dan sidebar yang akan bisa dipakai di halaman lain.

Bagian penting dari *parent template* yaitu kita sediakan satu tempat atau slot untuk dapat diisi oleh halaman *children*. cara memberikan slot nya adalah dengan menggunakan *directive* atau sintaks di Blade Laravel dengan nama `@yield` di dalam function yield tersebut kita masukkan parameter berupa string yaitu nama dari slot yang akan dibuat. Kali ini kita namai slot tersebut dengan `'content'` sehingga menjadi `@yield('content')`.

Sama seperti pada materi OOP untuk membuat class child dari sebuah class lain yaitu menggunakan `extends`, maka pada halaman `index.blade.php` kita tinggal gunakan sintaks `@extends('master')` agar halaman *index* mendapatkan seluruh layout dari master template dan mendapatkan slot `'content'` untuk bisa diisi.

Untuk mengisi slot `'content'` pada halaman `index.blade.php`, kita gunakan sintaks `@section('content')` . Namun sintaks section memiliki sintaks penutupnya yaitu `@endsection` .\
Di antara pembuka `@section('content')` dan penutup `@endsection` kita bisa sisipkan konten dari halaman index, misalkan kita isi dengan `<table>`.

Latihan templating:  <https://github.com/ColorlibHQ/AdminLTE/releases>
