Laravel View dan Blade merupakan salah fitur dari Laravel yang memudahkan pengembang web untuk memisahkan tampilan dengan logic. Artikel ini akan membahas tentang View dan pemanfaatan Blade, sebuah fitur Laravel untuk memudahkan dalam menampikan data maupun informasi pada halaman web.

Penjelasan Laravel View dan Blade

Views adalah representasi visual dari suatu halaman web yang pada umumnya bertugas untuk menampilkan data yang diterima oleh Controller dari Model.  Dalam hal ini Views adalah bagian dari sistem Laravel di mana HTML dihasilkan dan kemudian ditampilkan di layar pengguna. Penggunaan Views sangat membantu pengembangan web khususnya untuk merawat dan memberikan tambahan fungsi, karena memisahkan logic atau program utama dengan bagian tampilan.

Blade adalah fitur yang disediakan Laravel untuk proses templating sederhana namun sangat bermanfaat dalam proses pengembangan tampilan halaman web. Tidak seperti fitur templating PHP populer lainnya, Blade tidak membatasi pemrogram untuk menggunakan kode PHP biasa dalam membuat kode untuk tampilan. Semua tampilan Blade dikompilasi ke dalam kode PHP biasa dan kemudian disimpan dalam cache hingga diubah, yang berarti Blade pada dasarnya tidak menambahkan beban atau overhead pada saat aplikasi dijalankan.

File tampilan blade menggunakan ekstensi file .blade.php dan biasanya disimpan di direktori resources / views. Dalam hal ini Blade pada Laravel menggunakan basis template inheritance dan sections.

Salah satu fungsi dari Laravel Blade templating adalah penggunaan layout, agar tampilan yang berulang misalnya header, footer, sidebar dan sebagainya tidak perlu dibuat berkali-kali sehingga rawan inkonsistensi. Pada umumnya layout ditempatkan dalam sebuah folder yang bernama layout dalam folder views, namun demikian programmer tidak dibatasi apabila ingin menggunakan nama lain.

Tutorial Halaman Web dengan Laravel View dan Blade

Pada tutorial ini akan dibuat tampilan dari halaman web dengan memanfaatkan CSS dan framework CSS Boostrap agar menghasilkan tampilan yang lebih professional.

Menggunakan Template di View

Buat sebuah file home.blade.php dan letakkan dalam folder view. Pada file ini akan dibuat sebuah halaman sederhana, dengan memanfaatkan bootstrap. Misalnya dengan menggunakan Jumbotron pada contoh ini:

https://getbootstrap.com/docs/4.2/components/jumbotron/

Bootstrap Jumbotron

Bootstrap Jumbotron

Silahkan salin code Jumbotron dan sisipkan dalam View, seperti terlihat di gambar berikut ini:

Jumbotron Code

Jumbotron Code

Memanfaatkan Parameter Config

Ikuti langkat berikut untuk melakukan konfigurasi sistem pada Laravel:

  • Buka .env file
  • Ganti APP_NAME dengan Portfolio
  • Akses APP_NAME dari Home dengan menggunakan perintah:
       
Copy to Clipboard

Dengan parameter ke-2 sebagai default value:

Copy to Clipboard

  Code yang dibuat akan terlihat seperti gambar berikut ini:

.env App Name

.env App Name

Berikut adalah tampilan yang dihasilkan:

Tampilan halaman dengan App Name

Tampilan halaman dengan App Name

Penggunaan Bootstrap

  • Laravel menggabungkan Bootstrap css dalam project yang di-generate.
  • Bootstrap css tersedia dalam file /public/css/app.css
  • Untuk menambahkan Bootstrap dalam web yang dibuat, pada halaman html bagian dapat ditambahkan:
Copy to Clipboard

 

Tampilan Home dengan Bootstrap CSS

Tampilan Home dengan Bootstrap CSS

Apabila dicermati, maka kode sumber dari halaman ini akan tampil sebagai berikut:

Source Code View dengan Jumbotron

Source Code View dengan Jumbotron

Mendefinisikan Blade

Potongan program berikut dalam file app.blade.php yang disimpan dalam sebuah folder baru dalam folders Views yang diberi nama Layouts.

Copy to Clipboard

Berikut adalah penjelasan dari potongan program tersebut:

  • Blade merupakan pengaturan tampilan dengan menggunakan HTML markup, dengan penambahan beberapa directive dari Laravel.
  • Pada contoh sebelumnya terlihat directive pada bagian @section dan @yield
  • Directive @section mendefinisikan sebuah bagian (section) dari isi halaman web
  • Directive @yield digunakan untuk menampilkan isi dari bagian tersebut.

Menggunakan Blade

Berikut adalah contoh penggunaan Blade Template:

Copy to Clipboard

Berikut adalah penjelasan dari potongan program tersebut:

  • View yang extend sebuah Blade layout akan mengganti setiap bagian (section) dari layout. Content yang dituliskan pada layout dapat disertakan dengan menggunakan directive @parent dalam section.
  • Pada penggunaan @yield, default value dapat diatur atau dikirimkan dengan menuliskannya di argument kedua, contohnya:
    @yield(‘section’, ‘Default Content’)

Jadi manakah yang sebaiknya dipergunakan, Yield atau Section?

  • Pada contoh sebelumnya terlihat penggunaan @yield dan @section yang serupa.
  • Intinya untuk hal sederhana gunakan @yield, sedangkan untuk kebutuhan yang lebih advanced bisa digunakan @section… @show.
  • Karena semua yang bisa dilakukan dengan @yield bisa dilakukan dengan @section… @show, namun tidak sebaliknya.

Menampilkan Blade

Blade views yang telah dibuat dapat ditampilkan dengan perintah view yang dapat diakses secara global.

Copy to Clipboard

Layout

  • Buat sebuah folder layouts di dalam folder views
  • Buat sebuah file bernama app.blade.php dalam folder tersebut
  • Copy paste struktur utama dari halaman home.blade.php yang dibuat ke file tersebut.

Folder Layout Dalam Views

Folder Layout Dalam Views

Isi File app.blade.php

Isi File app.blade.php

Silahkan mengganti bagian isi dari container dengan code menggunakan @yield seperti tampak pada gambar berikut:

File App dengan menggunakan @yield

File App dengan menggunakan @yield

Silahkan mengubah isi dari home.blade.php dengan kode seperti terlihat pada gambar:

Extends Blade

Extends Blade

Mengirimkan Value ke Blade

Berikut adalah beberapa cara untuk mengirimkan Value ke Blade:

  • Menggunakan compact(‘namavariabel’)
    Blade Menggunakan Compact

    Blade Menggunakan Compact

  • Menggunakan ->width(‘namavar’, ‘vardikirim’). Parameter pertama adalah nama variabel untuk menerima di dalam blade, parameter kedua adalah variable dari value yang akan dikirimkan.
    Blade menggunakan With

    Blade menggunakan With

  • Menggunakan ->width(‘namavar’, ‘var_array_dikirim’). Parameter pertama adalah nama variabel untuk menerima di dalam blade, parameter kedua adalah variable dari value yang akan dikirimkan berupa array.
    Blade Menggunakan With dengan 2 Parameter

    Blade Menggunakan With dengan 2 Parameter

Menerima Multi Value dari Blade

Berikut adalah potongan program yang dipergunakan untuk mengambil muti value yang dikirimkan menggunakan Blade.

Mendapatkan Multi Value dengan Blade

Mendapatkan Multi Value dengan Blade

Latihan

Silahkan mengerjakan view untuk halaman website portfolio yang terdiri dari halaman:

  • home
  • about
  • education
  • projects

Silahkan mengubah berbagai view yang ada pada project dengan memanfaatkan fitur Blade Templating.

Baca Juga:

Written by: SEW 20190922