Laravel View dan Blade.pdf
- 1. Laravel View dan Blade (Belajar Laravel #5) 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/
- 2. Bootstrap Jumbotron Silahkan salin code Jumbotron dan sisipkan dalam View, seperti terlihat di gambar berikut ini: 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: {{config('app.name')}} 1
- 3. Dengan parameter ke-2 sebagai default value: Code yang dibuat akan terlihat seperti gambar berikut ini: .env App Name Berikut adalah tampilan yang dihasilkan: 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: {{config('app.name', 'Portfolio')}} <link rel="stylesheet" href="{{asset('css/app.css')}}"> 1 1
- 4. Tampilan Home dengan Bootstrap CSS Apabila dicermati, maka kode sumber dari halaman ini akan tampil sebagai berikut: 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. <!-- Stored in resources/views/layouts/app.blade.php --> 1
- 5. 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: 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’) <html> <head> <title>App Name - @yield('title')</title> </head> <body> @section('sidebar') This is the master sidebar. @show <div class="container"> @yield('content') </div> </body> </html> <!-- Stored in resources/views/child.blade.php --> @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @parent <p>This is appended to the master sidebar.</p> @endsection @section('content') <p>This is my body content.</p> @endsection 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 11
- 6. 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. 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 Route::get('blade', function () { return view('child'); }); 1 2 3
- 7. 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
- 8. Silahkan mengubah isi dari home.blade.php dengan kode seperti terlihat pada gambar: Extends Blade Mengirimkan Value ke Blade Berikut adalah beberapa cara untuk mengirimkan Value ke Blade: Menggunakan compact(‘namavariabel’) 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 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.
- 9. 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 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.