IF Notes

Views dan Blade Templating

4 min read

Back to IF3110 Pengembangan Aplikasi Berbasis Web

Topic

Questions/Cues

  • Apa itu Views?
  • Di mana Views disimpan?
  • Apa tujuan Views?
  • Bagaimana memanggil View?
  • Cara mengirim data (parameter) ke View?
  • Nested View?
  • Apa itu Blade?
  • Keuntungan Blade?
  • Cara menampilkan data?
  • Menampilkan data JSON?
  • Menampilkan data tanpa render?
  • Directive @verbatim?
  • Directive Kondisional?
  • Directive @unless?
  • Directive @isset / @empty?
  • Directive Looping?
  • Directive @forelse?

Reference Points

  • Slides IF3110-10b-Web-Application-Framework-Laravel.pdf (Slide 22-30)

Definisi Views

Views menyediakan cara yang nyaman untuk meletakkan semua kode HTML aplikasi di dalam file-file terpisah.

  • Tujuan: Memisahkan logika aplikasi/controller dari logika presentasi (tampilan). Daripada mengembalikan string HTML langsung dari rute, kita mengembalikan view.
  • Lokasi: Disimpan di direktori resources/views/.
  • Templating: Dibuat menggunakan templating engine bawaan Laravel, yaitu Blade.

Menggunakan Views

Contoh View Sederhana: File resources/views/greeting.blade.php:

<html>
  <body>
    <h1>Hello, {{ $name }}</h1>
  </body>
</html>

Mengembalikan View dari Rute: Kita menggunakan fungsi helper view():

Route::get('/', function () {
  return view('greeting', ['name' => 'James']);
});

Parameter Fungsi view():

  1. Argumen pertama adalah nama file view di resources/views/. (Ekstensi .blade.php tidak perlu ditulis).
  2. Argumen kedua adalah array berisi data yang ingin kita sediakan untuk view tersebut. Dalam view, data ini dapat diakses sebagai variabel (misal: $name).

Nested View Directory: View dapat disimpan di dalam sub-direktori. Kita dapat mengaksesnya menggunakan notasi “titik” (.).

// Mengakses resources/views/admin/profile.blade.php
return view('admin.profile', $data);

Blade Templating Engine

Blade adalah templating engine yang disertakan dengan Laravel.

  • Keuntungan:
    1. Memungkinkan kita menggunakan kode PHP biasa di dalam template.
    2. Template Blade dikompilasi menjadi kode PHP murni dan di-cache sampai template tersebut dimodifikasi. Ini membuat load aplikasi menjadi sangat cepat.

Blade Directives: Menampilkan Data

  • Tampilan Dasar: Menggunakan kurung kurawal ganda {{ }}.

    Hello, {{ $name }}.

    (Ini secara otomatis akan “membersihkan” data (HTML escaping) untuk mencegah serangan XSS).

  • Render JSON: Menggunakan @json untuk mengubah array PHP menjadi JSON.

    <script> var app = @json($array); </script>

  • Tampilan Tanpa Render: Jika kita ingin menampilkan {{ $name }} sebagai teks biasa, gunakan tanda @.

Hello, @{{ $name }}. //(Akan tampil sebagai: Hello, {{ $name }}.)
  • Blok Verbatim: Untuk blok HTML besar yang tidak boleh di-render. 
    @verbatim
  <div class="container">{{ name }}</div> 
@endverbatim`

### Blade Directives: Kondisional
- **`@if / @elseif / @else / @endif`**: Struktur kondisional standar.
- **`@unless`**: Kebalikan dari `@if`. Kode di dalamnya dieksekusi jika kondisi *false*.
  ```php
  @unless (Auth::check())
    You are not signed in.
  @endunless
	```
- **`@isset` / `@empty`**: Memeriksa apakah variabel ada (dan tidak *null*) atau "kosong".

### Blade Directives: Loops (Perulangan)

- **`@for`**: `for` loop standar PHP.
- **`@foreach`**: `foreach` loop standar PHP.
- **`@while`**: `while` loop standar PHP.
- **`@forelse`**: *Directive* yang sangat berguna. Ini menggabungkan `foreach` dengan pemeriksaan `@empty`.
  ```php
	@forelse ($users as $user) 
		<li>{{ $user->name }}</li>
	@empty
		<p>No users</p>
	@endforelse
	```

Summary

Views di Laravel bertugas untuk memisahkan logika presentasi (HTML) dari logika aplikasi, dan disimpan di resources/views/. Laravel menggunakan templating engine Blade yang kuat, yang mengkompilasi template (.blade.php) menjadi PHP murni dan menyimpannya dalam cache untuk performa tinggi. Blade menyediakan sintaks directive yang bersih (seperti {{ $data }} untuk menampilkan data secara aman, @if untuk kondisional, dan @foreach / @forelse untuk perulangan) agar penulisan template menjadi lebih mudah dan bersih daripada menggunakan PHP biasa.

Graph View

Backlinks