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 : [email protected]
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

Directive Keterangan

@includeWhen(kondisi, template, data) Include dilakukan ketika kondisi true

@includeUnless(kondisi, template, data) Include dilakukan ketika kondisi false

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

Directive Keterangan

@each(template, array, variable) Include template berkali-kali sesuai iterasi

jumlah array, dimana data tiap array bisa
diakses dengan variable di template nya

@once Disimpan di layout, secara otomatis jika

layout tersebut ditampilkan berkali-kali,
bagian @once hanya ditampilkan sekali
saja
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
Directive Jika kondisi true

@checked Maka input checkbox akan memiliki attribute checked

@selected Maka input option akan memiliki attribute selected

@disabled Maka input akan memiliki attribute disabled

@readonly Maka input akan memiliki attribute readonly

@required Maka input akan memiliki attributed required

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