Pada pembahasan sebelumnya mengenai View telah disebutkan bahwa Laravel juga menyediakan fitur template yaitu Blade. Dengan Blade anda dapat membuat suatu layout yang dapat digunakan oleh banyak view. Hal ini akan mempermudah anda jika suatu saat terjadi perubahan mendasar pada interface program yang anda buat. Dengan sistem layout anda hanya perlu mengganti kode pada layout dan semua view yang menggunakan layout tersebut secara otomatis akan berganti tampilannya juga.
#MEMBUAT LAYOUT
File layout yang anda buat diletakkan pada direktori resources/views/layouts. Gunakan ekstensi .blade.php dalam pemberian nama file, misalnya main.blade.php.
<html>
<head>
<title>App Name - @yield('title')</title>
@yield('css')
</head>
<body>
@include('menu')
<div class="container">
@yield('content')
</div>
@yield('script')
</body>
</html>
Kode di atas adalah salah satu contoh isi dari file layout. Kode-kode pada layout ini sesuai namanya adalah bagian layout nya saja atau bagian yang menampilkan hal yang sama pada beberapa atau semua view. Misalnya saat anda membuat bagian admin pada suatu program maka bagian header, footer, dan menu dari semua halaman admin tersebut seharusnya memiliki tampilan yang sama.
Daripada anda mengcopy paste tampilan tersebut pada masing-masing view lebih baik menggunakan sistem layout ini. Jadi jika misalnya nanti ada perubahan tampilan pada misalnya pada bagian header maka anda cukup mengganti tampilan tersebut di file layout ini daripada mengganti tampilan pada masing-masing view.
Kode @yield('nama section') digunakan pada bagian-bagian dari layout yang sifatnya dinamis. Dinamis di sini dalam artian masing-masing view yang menggunakan layout tersebut memiliki tampilan / kode yang berbeda. Misalnya pada contoh di atas adalah penggunaan @yield('title'). Jika pada view Master User maka bagian title diisi dengan Master User dan pada view Master User Level bagian title diisi dengan Master User Level. Demikian juga untuk @yield('content') dan lain sebagainya.
Sedangkan kode @include('nama view') digunakan untuk memanggil view lain. Dalam contoh kode di atas program akan memanggil view menu.blade.php yang terdapat dalam direktori resources/views seperti view-view biasanya. Perintah include ini juga dapat mempassing variabel ke dalam view yang dipanggil dengan syntax sebagai berikut
@include('view.name', ['some' => 'data'])
Anda tidak harus menggunakan layout persis seperti contoh di atas. Gunakan syntax-syntax blade sesuai dengan kebutuhan program yang anda buat.
#MENGGUNAKAN LAYOUT
Setelah membuat layout sekarang kita akan mempelajari bagaimana menggunakan layout tersebut pada view yang kita buat.
@extends('layouts.main')
@section('title', 'Page Title')
@section('content')
<p>This is my body content.</p>
@endsection
Yang paling utama adalah penggunaan @extends('nama layout'), di mana kode ini menunjukkan layout apakah yang dipakai oleh view tersebut. Pada contoh kode di atas, view ini akan menggunakan layout main.blade.php yang terletak pada direktori resources/views/layouts.
Penggunaan @section pada contoh di atas memiliki 2 macam cara, yang pertama seperti anda lihat pada bagian title. Untuk section sederhana anda bisa menggunakan cara penulisan tersebut tanpa perlu menggunakan kode @endsection.
Sedangkan untuk section dengan kode yang rumit seperti bagian content anda dapat menggunakan syntaxt @section....@endsection di mana anda bisa menuliskan kode-kode yang dibutuhkan di tengahnya. Penggunaan nama section di sini sesuai dengan nama yield yang anda gunakan di bagian layout tadi.
Demikianlah penjelasan singkat mengenai Blade Templates ini. Sebenarnya banyak syntax-syntax blade yang sudah disediakan oleh laravel. Namun seperti tutorial-tutorial sebelumnya, saya hanya menjelaskan dasar penggunaannya saja. Untuk penjelasan lebih mendalam mungkin akan saya buatkan pada artikel yang terpisah karena tujuan dari seri tutorial laravel ini hanya berupa pengenalan sadar saja. Semoga penjelasan pada artikel ini dapat dimengerti dan selamat mencoba.
Tutorial Laravel 5.5 - Blade Templates (Bagian 9)
Reviewed by Donny Winarto
on
August 04, 2018
Rating:
Reviewed by Donny Winarto
on
August 04, 2018
Rating:
No comments: