BELAJAR LARAVEL 8 - BLADE TEMPLATING ENGINE

Pada kesempatan kali ini saya akan menjelaskan tentang fitur yang ada pada Laravel 8 yaitu Blade Templating Engine.

Blade Templating Engine adalah sebuah fitur atau Tools untuk membantu kita dalam mengelola tampilan halaman web khususnya untuk sebuah framework. untuk laravel templating engine nya dinamakan dengan Blade. bagaimana blade ini bisa mempermudah kita dalam mengelola tampilan halaman web? itu bisa yang paling sederhana ketika kita bekerja dengan sebuah variabel dan membuat struktur kendali seperti pengulangan, pengkondisian sampai dengan kemudahan saat kita akan membuat sebuah layout, komponen atau yang di sebut dengan parsial.

jadi langsung aja kita akan melihat bagaimana sih cara penggunaan blade khususnya di laravel 8 ini secara sederhana dan nantinya kita akan implementasikan kedalam aplikasi yang kita sudah buat sebelumnya.

buka terlebih dahulu dokumentasinya blade templating engine untuk membantu kita memahami materi ini. klik Dokumentasi di web resminya Laravel, masuk ke menu basic lalu ada pilihan Blade Templates.

intinya adalah Blade merupakan sebuah Templating Engine yang sudah terdapat di dalam Laravel. jadi kita udah gak perlu install lagi, gak perlu download lagi. dimana di dalamnya katanya tetap bisa menggunakan syntax PHP di dalam view kita dengan tambahan sintax blade di dalamnya.

nah nanti apapun yang kita tulis dengan syntax blade pada akhirnya akan di compile ke dalam syntax.

kalau kalian mau liat syntax Blade itu seperti apa bisa melakukan scroll kebawah di dalam dokumentasi Blade, ini merupakan yang paling sederhana seperti Displaying Data.

dari gambar di atas jadi misalkan kita mau kirimkan data nama kita bisa buat sebuah array di dalam parameter view nya sehingga nanti key nya itu bisa di pakai di dalam view wellcome ini contohnya.

jadi saya kirim data nama berisi samantha kedalam view welcome.

didalam view welcome kita bisa tampilkan data nama dengan cara seperti ini: Hello, {{ $name }} tidak usah lagi menggunakan PHP echo atau <?= cukup menggunakan dua buah kurung kurawal buka dan dua buah kurung kurawal tutup. ini adalah sintax echo milik Blade.

sintax ini ada kelebihannya otomatis di belakang layar itu sudah di tambahkan seniah fungsi htmlspecialchars yang sangat berguna untuk menghindari serangan XSS attacks atau Cross Side Scripting. ini salah satu sintax yang paling sederhana dan masih banyak lagi sintax blade yang bisa kita gunakan.

untuk sekarang kita akan coba mengganti sintax yang kita punya sebelumnya menggunakan Blade ini.

sekarang saya minta teman-teman kembali ke kodingan. buka views about.blade.php. disini kita bisa lihat bahwa kita sudah mencoba untuk menampilkan isi dari 3 buah variabel yang dikirim lewat Routes kita.

jadi kita punya array yang memiliki 3 buah key yang nanti key ini menjadi nama variabel untuk di cetak di dalam view. jadi disini caranya ganti aja <?= dan ?> ini menggunakan dua buah kurung kurawal {{ }} tidak perlu pakai ;

ketika kita mengetikkan kurung kurawal maka visual studio code akan otomatis membuatkan kurung kurawal dan penutup dan juga spasinya. ini karena sebelumnya kita sudah menginstall extension "Laravel Blade Spacer".

sintax ini akan berjalan jika di file kalian ada nama .blade nya. jika tidak ada tambahan .blade nya maka fitur dari templating engine nya tidak akan jalan. jika nama blade difile nya kita hapus .blade nya maka akan mencetak kurung kurawalnya

jadi tanda kurung kurawal ini sebenarnya sama aja dengan PHP echo, bahkan ini di compile oleh laravelnya secara otomatis menjadi PHP echo seperti biasa cuman kita gak perlu atau itu. tapi kalau teman2 mau lihat hasilnya itu kita bisa lihat ada di bagian direktori storage/framework/views. kita gak perlu tau hasil compile nya biar si laravel yang menggenerate dan melakukan optimasi terhadap file-file ini. kita di permudah dengan hanya menggunakan view nya saja yang udah pakai blade.

sekarang kita akan mencoba untuk membuat sistem layouting sederhana menggunakan bantuan templating engine blade. jadi yang harus dilakukan sekarang adalah ubah dulu tampilan home menggunakan framework bootstrap supaya mempermudah pembuatan tampilan kita.

buka getbootstrap.com, sebernarnya teman-teman boleh menggunakan framework yang lain. ini saya cuma mau tunjukan aja gimana caranya laravel dan blade ini dengan framework css.

Arahkan ke bagian docs di getbootstrap.com kemudian kita scroll. kita akan cari ke starter template.

lalu kita akan gunakan starter template nya bootstrap. klik copy aja kemudian masuk ke home.blade.php

boleh di hapus semua isinya dan paste kan starter template yang telah di copy tadi. lalu edit sedikit dari title nya dari "hello world" menjadi "Blog Fauzi | Home" tag link di atas nya di biarkan saja, tapi untuk yang javascript ini akan kita hapus yang ada komentarnya supaya lebih rapi atau klo mau tidak di hapus juga ga apa2.

kemudian save dan kembali ke halaman home http://coba-laravel.test/

jika hasilnya seperti gambar di atas berarti sudah jalan bootstrapnya.

sekarang kita akan coba tambahkan navbar. boleh ke bootstrap nya lagi https://getbootstrap.com/docs/4.0 cari di sebelah kiri ada Components -> navbar, setelah di klik pilih di selebah kanan tulisan Nav. kita copy navbar yang ini. kemudian copy