Laravel

Blade Template

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

• Technical architect at one of the biggest ecommerce company in Indonesia
• 11+ years experiences
• www.programmerzamannow.com
• youtube.com/c/ProgrammerZamanNow

Eko Kurniawan Khannedy

• Telegram : @khannedy
• Facebook : fb.com/ProgrammerZamanNow
• Instagram : instagram.com/programmerzamannow
• Youtube : youtube.com/c/ProgrammerZamanNow
• Telegram Channel : t.me/ProgrammerZamanNow
• Email : echo.khannedy@gmail.com

Sebelum Belajar

• Laravel Dasar

Agenda

• Pengenalan Blade Template
• Menampilkan View
• If Statement
• For Loop
• While Loop
• Include
• Template Inheritance
• Dan lain-lain

Pengenalan Blade Template

Blade Template

• Blade adalah library yang terdapat di Laravel sebagai templating engine
• Tidak seperti template engine lainnya, Blade tidak melarang kita untuk menggunakan kode PHP di file template, walaupun ini sebenarnya tidak disarankan
• Semua file template di Blade sebenarnya akan di compile menjadi kode PHP
• Blade menggunakan file .blade.php sebagai nama file template nya
• Dan biasanya disimpan di folder resources/views

Membuat Project

Membuat Project

• composer create-project laravel/laravel=version belajar-laravel-blade-template
• https://packagist.org/packages/laravel/laravel

Menampilkan View

Blade

• Membuat response dari Route itu sangat mudah, tapi jika misal kita ingin membuat response yang kompleks seperti HTML, maka akan sulit jika kita lakukan di Route
• Blade adalah fitur di Laravel yang digunakan untuk mempermudah dalam pembuatan tampilan halaman web HTML
• Dengan Blade template, kita bisa membedakan lokasi logic aplikasi, dengan kode tampilan
• Semua template disimpan di folder resources/views

Blade Variable

• Salah satu keuntungan menggunakan template dibanding kode PHP langsung adalah, kita bisa memaksa programmer untuk memisahkan logic kode program dengan tampilan (di template)
• Di Blade, walaupun kita bisa membuat kode PHP, tapi tidak disarankan menggunakan itu
• Cara yang direkomendasikan adalah, kita hanya membuat variable di template blade, lalu mengirim variable tersebut dari luar ketika akan menampilkan template nya
• Untuk membuat menampilkan variable di blade template, kita bisa gunakan {{ $nama }}, dinama nanti variable $nama bisa diambil secara otomatis dari data yang kita kirim ketika menampilkan view blade nya

Kode : Hello View

Rendering View

• Setelah kita membuat View, selanjutnya untuk me-render (menampilkan) View tersebut di dalam Router, kita bisa menggunakan function Route::view(uri, template, array) atau menggunakan view(template, array) di dalam closure function Route / Controller
• Dimana template adalah nama template, tanpa menggunakan blade.php, dan array berisikan data variable yang ingin kita gunakan

Kode : Rendering View

Test Rendering View

Nested View Directory

• View juga bisa disimpan di dalam directory lagi di dalam directory views
• Hal ini baik ketika kita sudah banyak membuat views, dan ingin melakukan management file views
• Namun ketika kita ingin mengambil views nya, kita perlu ganti menjadi titik, tidak menggunakan / (slash)
• Misal jika kita buat views di folder admin/profile.blade.php, maka untuk mengaksesnya kita gunakan admin.profile

Kode : View

Kode : Route View

Test View Tanpa Routing

• Kadang kita juga ingin membuat View tanpa routing, misal untuk mengirim email misalnya
• Pada kasus ini, kita bisa melakukan test view secara langsung, tanpa harus membuat Route terlebih dahulu

Kode : Test View Tanpa Route

Comment

Comment

• Blade Template juga mendukung komentar, dengan menggunakan {{-- isi komentar --}}
• Isi komentar secara otomatis tidak akan dieksekusi, dan tidak akan ditampilkan juga di hasil HTML nya

Kode : Comment

Kode : Unit Test Comment

HTML Encoding

HTML Encoding

• Secara default, saat kita menampilkan data di Blade Template menggunakan {{}}, secara otomatis Blade akan memanggil function htmlspecialchars(data) untuk memastikan data aman dari tag HTML yang bisa menyebabkan XSS Attack (Cross Site Scripting)
• Namun jika kita ingin menampilkan tanpa di escape, maka kita bisa menggunakan {!! $variable !!}
• Namun harap hati-hati, karena jika tidak hati-hati, kita bisa terkena serangan XSS

Kode : HTML Encoding

Kode : Routing

Hasil HTML Encoding

Disabled Blade

Disabled Blade

• Blade menggunakan tanda kurung kurawal untuk menampilkan variable
• Saat kita membuat web, kadang kita ingin menampilkan tulisan seperti perintah-perintah yang ada di Blade
• Hal ini akan menimbulkan perintah-perintah tersebut akan dieksekusi oleh Blade

Tanda @

• Pada bagian yang kita ingin Blade Template tidak dieksekusi, kita bisa menambahkan @ diawal perintah Blade Template nya
• Misalnya @{{ $eko }}, maka akan ditampilkan apa adanya tanpa @
• Misalnya @@if, maka hasilnya akan ditampilkan apa adanya tanpa @ pertama
• Namun jika misal terdapat banyak baris yang kita harapkan tidak menggunakan Blade Template, kita bisa menggunakan perintah @verbatim dan diakhiri dengan @endverbatim

Kode : Disabled Blade

Kode : Test Disabled Blade

If Statement

If Statement

• Blade Template mendukung percabangan if menggunakan perintah/directive @if, @elseif, @else dan @endif
• Perintah ini hampir mirip dengan kode PHP

Kode : If Statement

Kode : Test If Statement

Unless Statement

Unless Statement

• Blade Template mendukung directive @unless dan @endunless
• Directive ini digunakan kebalikan dari if statement, dimana jika nilainya false, maka isi body akan eksekusi

Kode : Unless

Kode : Test Unless

Isset dan Empty

Isset dan Empty

• Blade template juga memiliki directive @isset dan @empty
• @isset digunakan untuk mengecek apakah sebuah variable ada dan tidak bernilai null
• @empty digunakan untuk mengecek apakah sebuah variable merupakan array kosong

Kode : Isset dan Empty

Kode : Test Isset dan Empty

Env

Env

• Laravel mendukung multi environment, kita bisa menggunakan Facade Env untuk mendapatkan environment yang digunakan saat ini
• Dalam Blade Template, kita bisa menggunakan directive @env(name) atau @env([name1, name2]) untuk mengecek apakah sedang menggunakan environment tersebut atau tidak

Kode : Env

Kode : Unit Test Env

Switch Statement

Switch Statement

• Selain menggunakan @if, percabangan di Blade Template juga bisa menggunakan directive @switch
• Seperti di kode PHP, dalam Blade Template, kita perlu kombinasikan dengan @case dan juga @break dan @default

Kode : Switch

Kode : Test Switch

For Loop

For Loop

• Blade juga mendukung perintah untuk melakukan perulangan for
• For loop mirip seperti di PHP, kita bisa menggunakan increment

Kode : For Loop

Kode : Test For Loop

Foreach Loop

• Kadang ada kalanya kita ingin melakukan iterasi terhadap semua data yang terdapat di array
• Di Blade Template, kita bisa lebih mudah menggunakan directive @foreach dibandingkan menggunakan @for

Kode : Foreach Loop

Kode : Test Foreach Loop

Forelse Loop

• Apa yang terjadi ketika misal kita melakukan iterasi menggunakan @foreach, namun ternyata datanya tidak ada?
• Secara otomatis tidak akan menampilkan data apapun
• Kadang kita ingin menampilkan sesuatu ketika tidak ada datanya
• Pada kasus ini, kita bisa menggunakan @forelse, dimana kita bisa menambahkan directive @empty ketika data array tidak ada isinya

Kode : Forelse Loop

Kode : Test Forelse Loop

Raw PHP

Raw PHP

• Kadang ada kasus kita ingin menggunakan kode PHP langsung di Blade Template
• Walaupun ini tidak direkomendasikan, tapi bisa kita lakukan
• Kita bisa gunakan directive @php untuk memasukkan kode php

Kode : Raw PHP

Kode : Tes Raw PHP

While Loop

While Loop

• Selain perulangan for, di Blade Template juga mendukung perulangan @while
• Dengan perulangan @while, kita bisa melakukan perulangan selama kondisi @while bernilai true

Kode : While Loop

Kode : Test While Loop

Loop Variable

Loop Variable

• Saat kita menggunakan perulangan @foreach, terdapat variable $loop yang tersedia di dalam perulangannya
• Variable $loop berisikan informasi yang bermanfaat seperti index iterasi, apakah ini iterasi pertama atau terakhir, dan lain-lain

Loop Property

Kode : Loop Variable

Kode : Test Loop Variable

CSS Class

CSS Class

• Saat membuat web, kadang kita ingin mengubah-ubah CSS class berdasarkan response backend
• Blade Template menyediakan @class directive untuk mempermudah kita melakukannya

Kode : CSS Class

Kode : Test CSS Class

Include

Include

• Saat kita membuat halaman web, kadang ada beberapa bagian yang sama di beberapa halaman web
• Pada kasus ini, ada baiknya kita membuat kode web tersebut di file template yang berbeda
• Selanjutnya kita bisa menggunakan directive @include untuk mengambil file template tersebut

Kode : Header Template

Kode : Include

Kode : Test Include

Include Parameter

• Secara default, semua data yang dikirim ke template utama akan dikirim ke template yang kita @include
• Namun, jika kita ingin menambah parameter tambahan, kita juga bisa menambahnya ketika menggunakan directive @include(template, data)

Kode : Header Template

Kode : Include

Kode : Test Include

Include Condition

Include Condition

• Kadang terdapat kondisi kita ingin melakukan @include pada kondisi tertentu
• Maka biasanya kita akan menggunakan directive @if untuk melakukan pengecekan kondisi tersebut
• Blade Template memiliki directive lain untuk mempermudah kita ketika membutuhkan kondisi tertentu untuk melakukan @include

Include Condition Directive

Kode : Layout

Kode : Include Condition

Kode : Test Include Condition

Each dan Once

Each dan Once

• Pada kasus tertentu, kadang kita ingin menampilkan layout sesuai dengan jumlah data
• Lalu misal kita perlu menambahkan sebuah kode yang cukup sekali saja ditampilkan, walaupun layout ditampilkan lebih dari sekali, misal kode CSS atau JavaScript
• Kita bisa menggunakan directive @each dan @once

Each dan Once Directive

Kode : Layout

Kode : Each

Kode : Test Each

Form

Form Directive

• Blade Template memiliki beberapa directive untuk membantu kita mempermudah ketika kita membuat form
• Ada @checked(kondisi) @selected(kondisi) @disabled(kondisi) @readonly(kondisi) dan @required(kondisi)
• Kondisi pada form directive merupakan boolean, jika true, maka secara otomatis directive tersebut akan dijalankan
• Penggunaan form directive ini lebih mudah dibanding kita menggunakan directive @if secara manual

Detail Form Directive

Kode : Form Directive

Kode : Test Form Directive

CSRF

CSRF

• Materi CSRF (Cross Site Request Forgery) sudah kita bahas di kelas Laravel Dasar
• Secara default, saat kita mengirim HTTP Post ke aplikasi Laravel kita, Laravel akan mengecek token CSRF, untuk memastikan bahwa request tersebut benar berasal dari web kita
• Pengecekan ini dilakukan oleh VerifyCsrfToken Middleware
• Blade Template memiliki directive @csrf yang bisa digunakan untuk mempermudah kita ketika ingin menambahkan token CSRF di form kita

Kode : CSRF

Kode : Test CSRF

Error

Error

• Laravel memiliki fitur yang bernama Validation, dimana kita bisa dengan mudah melakukan validasi
• Laravel Validation akan dibahas di materi tersendiri
• Ketika terjadi validation error, kita bisa menangkap error dengan directive @error(field) dan menangkap message nya dengan variable $message di dalam directive @error nya

Kode : Error

Kode : Test Error

Stack

Stack

• Blade memiliki kemampuan mirip struktur data Stack / Tumpukan
• Dimana kita bisa mengirim data ke stack tersebut menggunakan directive @push(nama) atau @pushIf(kondisi, nama)
• Ketika kita ingin menampilkan semua data yang terdapat di Stack, kita bisa gunakan directive @stack(nama)
• Secara default @push() akan mengirim data ke posisi paling belakang, jika kita ingin mengirim data ke urutan paling awal, kita bisa gunakan directive @prepend(name)

Kode : Stack

Kode : Test Stack

Template Inheritance

Template Inheritance

• Sebelumnya, kita menggunakan @include untuk menggunakan template lain
• Blade mendukung Template Inheritance, caranya terbalik dengan @include
• Dalam @include, parent akan melakukan include ke template child nya
• Dalam Template Inheritance, child yang akan melakukan extends ke parent template, dan child yang akan menentukan isi dari parent nya

Parent Layout

• Di parent layout, kita bisa menggunakan @yield(name, default) untuk lokasi template yang harus dibuat nanti di child layout

Kode : Parent Layout

Child Layout

• Untuk membuat child layout, kita bisa menggunakan directive @extends(parentlayout)
• Di dalam child layout, kita bisa membuat @section(name) yang nanti akan dieksekusi di posisi @yield(name) di parent nya

Kode : Child Layout

Kode : Test Template Inheritance

Show Directive

• Pada beberapa kasus, kadang kita ingin membuat default @section(name) di parent layout, namun tetap bisa di override di child layout
• Kita bisa menggunakan @section(name) di parent layout, namun ditutup dengan @show, bukan @endsection
• Jika di child layout kita membuat @section(name), secara otomatis @section(name) di parent akan di override, namun jika kita tetap ingin memanggil @section(name) di parent, kita bisa gunakan directive @parent di child layout nya

Kode : Parent Layout

Kode : Child Layout

Kode : Test Template Inheritance

Service Injection

Service Injection

• Blade Template juga mendukung directive @inject(variable, service) untuk mengambil object dari Service Container
• Secara otomatis data object akan di inject ke variable yang disebutkan di directive @inject

Kode : Membuat Service

Kode : Registrasi ke AppServiceProvider

Kode : Service Injection

Kode : Test Service Injection

Inline Blade Template

Blade Facade

• Blade juga memiliki Facade yang bisa kita gunakan untuk menggunakan Blade Template
• Ini akan mempermudah kita ketika kita ingin mengakses Blade Template dari Class seperti contohnya dari Controller
• Ada banyak sekali fitur yang terdapat di Blade Facade yang bisa kita gunakan
• https://laravel.com/api/9.x/Illuminate/Support/Facades/Blade.html

Inline Blade Template

• Salah satu fitur yang bisa kita gunakan dengan Blade Facade adalah, Inline Template
• Inline Template adalah kemampuan dimana kita bisa me-render template tanpa harus membuat file template, cukup menggunakan string saja
• Kita bisa menggunakan method Blade::render(template, data)

Kode : Test Inline Blade Template

Extending Blade

Extending Blade

• Blade Facade juga bisa kita gunakan untuk menambahkan custom directive
• Sehingga kita bisa membuat directive sendiri, dan bisa digunakan di Blade Template menggunakan method Blade::directive(nama, function)
• Agar aman, kita perlu meregistrasi directive di Service Provider

Kode : Extending Blade

Kode : Layout Extending Blade

Kode : Test Extending Blade

Custom Echo Handler

Custom Echo Handler

• Saat kita menggunakan {{ $variable }}, secara otomatis Blade Template akan mengkonversi menjadi echo ($variable)-->__toString()
• Pada kasus tertentu, mungkin kita ingin mengubah nya, misal ketika datanya berubah class tertentu, kita ingin mengubah hasil String nya
• Kita bisa menggunakan Facade Blade untuk mengubahnya, dengan cara menggunakan method Blade::stringable(class, function)

Kode : Class Model

Kode : Custom Echo Handler

Kode : Layout

Kode : Test Custom Echo Handler

Optimize Template

Optimizing Template

• Secara default, Blade Template di compile menjadi kode PHP ketika ketika ada request, Laravel akan mengecek apakah hasil compile Blade Template ada atau tidak, jika ada maka akan menggunakannya, jika tidak ada maka akan coba melakukan compile.
• Termasuk Laravel juga akan mendeteksi ketika ada perubahan Blade Template.
• Kompilasi ketika request masuk akan ada efek buruknya, yaitu performanya jadi lambat karena harus melakukan kompilasi. Oleh karena itu ketika nanti menjalankan aplikasi Laravel di production, ada baiknya melakukan proses kompilasi seluruh blade template terlebih dahulu, agar tidak perlu melakukan kompilasi lagi ketika request masuk

Compiling Template

• Untuk melakukan compile view atau blade template, kita bisa gunakan perintah :�php artisan view:cache
• Semua hasil compile view akan disimpan di folder storage/framework/views
• Jika kita ingin menghapus seluruh hasil compile, kita bisa gunakan perintah �php artisan view:clear

Materi Selanjutnya

Materi Selanjutnya

• Laravel Component
• Laravel Database / Eloquent
• Laravel Validation
• Laravel Command
• Laravel HTTP Client
• Dan lain-lain