Pendahuluan
Berbicara tentang website, aplikasi tentu kita tidak lepas dari konsep desain halaman (layout). Lalu bagaimana merancang sebuah layout? dan bagaimana juga nanti kita menetapkan template laravel? Nah, materi kali ini kita akan mengupas bagaimana membuat template di laravel dengan memanfaatkan Blade seperti yang telah kita bahas sebelumnya.
Pastikan anda sudah menjalankan projek yang sudah kita buat sebelumnya. Jika belum silahkan pasang laravel dan ikuti tutorialnya pada artikel sebelumnya.
Template laravel merupakan script desain yang ditulis menggunakan teknologi blade. Jadi kita masih bermain di seputar view. Anda dapat membuat folde baru di dalam view anda dengan memberi nama folder tersebut dengan nama templates. Folder ini berada di Resource/views/templates.
Tambahkan 4 buah file ke dalam folder template yang dibuat tadi dengan masing-masing nama file dapat dilihat pada struktur berikut:
📂 Resources
📂 views
📂 templates🗋 temp_header.blade.php
🗋 temp_navbar.blade.php
🗋 temp_footer.blade.php🗋 web_main.blade.php
🗋 beranda.blade.php
🗋 profil.blade.php
Buka kembali file beranda.blade.php. Kita akan memecah file ini menjadi beberapa bagian. Pecahlah code htmlnya dan masukkan ke dalam masing-masing file seperti berikut:
1. temp_header
<h1>LARAVEL BARINTEK</h1>
2. temp_footer
<label>copyright © {{ date('Y') }} Barintek.blogspot.com</label>
3. temp_navbar
<a href="/">Beranda</a><a href="/data_saya">Profil</a><a href="#">Kontak</a><a href="#">Galery</a>
4. web_main
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Belajar Laravel</title><link rel="stylesheet" href="{{ asset('assets/css/style.css') }}"></head><body><div class="header">@include('templates.temp_header')</div><div class="navbar">@include('templates.temp_navbar')</div><div class="main">@yield('content')</div><div class="footer">@include('templates.temp_footer')</div></body></html>
Kita memanggil file header pada class header dan file footer pada class footer. sedangkan pada class main kita membuat @yield('content'). Nama content kita dapatkan dari file beranda yang dikirim.
Sehingga yang tinggal di dalam file beranda adalah:
@extends('templates.web_main')@section('content')<h2>Beranda</h2><div class="baner"><img src="/assets/images/barintek.png" alt=""></div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel id nisi vero,sed nemo autem distinctio asperiores perferendis expedita aliquid dictaiste quas. Libero et quod pariatur, beatae quo magni.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel id nisi vero,sed nemo autem distinctio asperiores perferendis expedita aliquid dictaiste quas. Libero et quod pariatur, beatae quo magni.</p>@endsection
Kita nemabahkan @extends untuk memanggil layout web_main yang berada di dalam folder templates. Sedangkan kode yang berada di antara @section merupakan script yang akan dijalankan. @section mengirim nilai berupa content kepada web_main.
Selanjutnya kita rubah juga script di profil
@extends('templates.web_main')@section('content')<h2>Profil</h2><h1>Data Diri Saya</h1><p>Nama : Barintek</p><p>Alamat : Jl. Beringin Indah.No.27 Kec. Padang Panjang Sumatera Barat</p><p>No.Telp : xxxxxxxxxx</p>@endsection
Jika anda jalankan program anda tidak akan terjadi perubahan apapun, karena pada konsepnya teknik ini bukan untuk merubah tampilan tapi memecah file menjadi beberapa bagian.
Jika anda perhatikan juga terdapat perintah @include(). Perintah ini di gunakan untuk memanggil file dan menyatukan ke dalam file yang kita inginkan.
Jika kita perhatikan dengan memanfaatkan teknik blade kita dapat meyederhanakan program kita. kita cukup menulis satu kali script yang di duplikat.
