Hari ini aku mau menjelaskan soal blade templating. Kalau
menurut aku sendiri blade itu adalah fitur yang mempermudah kita mengatur tampilan
halaman sehingga mempersingkat kode dan lebih efisien. Misalnya kalian mau menggunakan
satu header dan footer yang sama untuk berbagai laman pada website kalian, nah
kalian bisa melakukan sekali coding saja untuk bagian headernya, lalu tinggal panggil
di halaman lain yang membutuhkan header itu sendiri. Satu lagi, misalnya
ada bagian header yang ingin kalian perbaiki karena sedikit kesalahan kecil, bayangin
aja kalau kalian harus sampai mengubah semua codingan laman website kalian,
tentunya makan waktu dan tidak efisien. Nah, itulah fungsinya blade templating.
Nantinya kalian akan menggunakan beberapa directive dan yang
paling sering digunakan: @extends, @yield, @section | @endsection, @include,
@if, @foreach, dan sebagainya.
Tutorial kali ini aku mulai dengan membuat sebuah file baru
dalam sebuah subfolder Bernama headerfooter di folder views.
(Views/headerfooter>). Kemudian di dalamnya aku akan menambahkan sebuah
file bernama header.blade.php.
Selanjutnya aku akan berikan sebuah header biasa aja
menggunakan tag html.
Apa sih itu directive @yield di line 6? Tujuannya adalah supaya
file yang meng-extends atau memperluas filenya dengan mengambil bagian dari
file ini menampilkan bagian(section) di file itu yang diberikan nama ‘section’.
Jangan bingung dulu, kamu ikutin aja codingannya lalu nanti kamu akan mulai
paham.
Selanjutnya aku akan menambahkan sebuah file di folder
headerfooter bernama footer.blade.php. Isinya kurang lebih akan sama aja
dengan header.
Nah, masih membuat satu file baru, tapi kali ini di dalam
folder views dengan nama page1.blade.php. Disinilah kita menggunakan directive
untuk menggunakan header dan footer nantinya. Coba simak gambar di bawah ya!
Pada baris pertama, ada @extends(‘headerfooter.header’),
yang artinya kita akan menggunakan file yang bernama header.blade.php yang
terletak dalam subfolder headerfooter di folder views. Lalu pada baris ketiga ada directive @section(‘content’)
yang artinya kita menandai dari baris di bawahnya sampai pada directive penutupnya
yaitu @endsection(‘content’) adalah section yang kita beri nama content.
Nah bagian yang ditandai sebagai section ini dapat dipanggil menggunakan yield
seperti misalnya pada file header tadi.
Nah sebelum endsection kita juga menggunakan sebuah directive
@include(‘headerfooter.footer’). Artinya adalah kita akan menggunakan sebuah
file bernama footer.blade.php yang filenya berada di sub-folder headerfooter
pada folder views.
Lalu selanjutnya kita tinggal atur route untuk melihar hasilnya. Kalau kalian ikutin tutorial ini dari awal, kalian tinggal ubah link READ MORE yang ada di file mainpage.blade.php menjadi link ke file page1.blade.php.
Controller yang aku gunakan adalah PagesController dan nama fungsi yang digunakan untuk mengarahkan ke file ini namanya page1.
Selanjutnya tinggal refresh browser kamu. Nanti hasil
akhirnya kurang lebih seperti gambar di bawah ini.
Nah dengan begitu blade templating kita sudah berhasil. Mungkin
kalian bertanya-tanya, apa bedanya penggunaan include dan extends?
Sekarang kamu coba lihat kembali file page1.blade.php. Pada
bagian @extends(‘headerfooter.header’) ubah jadi @include(‘headerfooter.footer’).
Hasilnya kurang lebih akan seperti gambar di bawah ini.
@include itu sama aja seperti include biasa dengan menggunakan
php dasar. @extends artinya kalian dapat
meng-extend (memperluas) sebuah template, sehingga kalian bisa menggunakan
section. Jadi kalau dalam file kalian, kalian menggunakan include maka di
bagian yang kamu include-kan, dia akan mengabaikan yield.
Okay, segitu aja hari ini. Kalian bisa ajukan pertanyaan pada kolom komentar. Pada tutorial berikutnya aku akan memberikan tutorial mengenai registrasi dan login menggunakan Laravel. Stay tuned, ya!
Postingan Sebelumnya:
Pengertian Konsep MVC dan Laravel 8
Tutorial Install Laravel via Composer
Tutorial setting environment (database) dan menggunakan Controller
Comments
Post a Comment