belajar laravel untuk pemula

Belajar Laravel : Sistem Templating Pada Laravel 5.3 untuk pemula

Hallo teman-teman ONPHPID, kita ketemu lagi nih di Belajar Laravel, sebelumnya kita sudah belajar tentang pengenalan Eloquent dan Model laravel. Pada tutorial kali ini kita akan lanjutkan belajar tentang Sistem Templating Pada Laravel 5.3. Sistem Templating laravel telah dirancang sedemikian rupa yang akan memudahkan kita dalam membangun layout-layout untuk front-end sistem atau web yang kita buat apalagi pada sistem templating laravel ini telah ditanamankan Blade.  Biar kita lebih “ngeh” dengan apa dan bagaimana system templating pada Laravel ini bekerja, kita akan langsung praktekkan saja.

Membuat Layout Pada Laravel

Mari kita persiapkan project Laravel yang kemarin, kemudian kita buat satu file di dalam direktori views/layouts dengan nama app.blade.php. Jika belum punya direktori layouts kalian dapat membuatnya sendiri. Jika sudah silakan buka file app.blade.php dan tulisan code di bawah ini :

Penjelasan dari code di atas adalah pada bagian @yield('title'), jadi sederhananya gini teman-teman kita seperti memberikan ruang pada halaman ini yang datanya akan kita isi dari page yang berbeda sesuai dengan title atau judul halaman. Lalu @yield('content') sama persis dengan @yield('title'), sedangkan @section('sidebar')... kita akan meminjam bagian ini untuk kita tampilkan di page yang lain. Sekarang kita buat dulu route di file web.php seperti ini :

lalu ubah file BelajarController.php menjadi seperti di bawah ini :

dari code di atas kita membuat dua method dan mengirim dua data yang akan kita tampilkan di view yaitu $title dan $content. Jika sudah mari kita buat satu file lagi dengan nama index2.blade.php di direktori home kita kemarin untuk uji coba templatingnya. Kita buka juga file index.blade.php dan ubah menjadi seperti ini :

index.blade.php

index2.blade.php

teman-teman lihat tidak pada line 1 ada @extends('layouts.app'), artinya kita mewarisi yang lebih dikenal dengan inheritance apapun yang ada pada file app.blade.php yang berada di direktori layouts. Sedangkan pada line 5-8 kita mewarisi app.blade.php namun kita juga menambahkan satu tag <li>PHP</li> ke dalam sidebarnya, kalian bisa menambahkan lebih dari satu. Cukup jelas bukan?

Jika sudah mari kita buka di browser dengan mengakses url localhost:8000/belajar dan localhost:8000/belajar/html, jika berhasil maka akan seperti gambar berikut :

 

 

dari dua gambar diatas kita bisa lihat kan perbedaannya, contentnya berbeda tapi memiliki sidebar yang sama dan tag <li>PHP</li> yang kita tambahkan juga tampil. Selain penjelasan di atas masih ada lagi yang disediakan Laravel seperti @push(), @include(). Untuk lebih jelasnya kalian bisa buka disini.

Baca Juga : Eloquent dan Model Pada Laravel 5.3 untuk pemula

 

Belajar Menggunakan Blade di Laravel

Mungkin kalian bingung @extends, @section, @yield() dan {{ .. }} apa itu ? nah itulah Blade, Secara definisi Blade adalah Templating Engine yang ditanamakan pada laravel dimana Blade ini akan memudahakan dalam menggabung file-file template kita. dan untuk menampilkan data kita tidak perlu echo atau print

Apa sih perbedaan dari {{ $variable }}, {!! $variable !!}, dan @{{ $variable }} kapan kita menggunakannya?

Jawabannya adalah, jika kita menampilkan data atau kalo di php biasa menggunakan  echo atau print, namun di system templating Laravel kita bisa menggunakan {{ $variable }}, jika kita mempunyai variable seperti berikut :

maka di browser akan tampil apa adanya seperti ini  <b>ini textnya</b> alias tag HTML tidak dibaca sebagai tag HTML. Tapi jika kita menggunakan {!! $variable !!} maka akan menjadi ini textnya alias menjadi tebal hurufnya. Sedangkan @{{ $variable }} digunakan jika kita akan menampilkan data yang di proses oleh Framework Javascript vueJs misalnya. Kapan menggunakannya? kapanpun kita membutuhkannya.

Sekian dulu tutorial Belajar Laravel : System Templating pada Laravel 5.3 untuk pemula. Jika ada hal yang kurang jelas atau ingin ditanyakan dapat melalui komentar. JANGAN LUPA like FANSPAGE ONPHPID untuk update informasi dan Subscribe Channel ONPHPID Tutorial. Selamat Belajar…

Scroll to Top
Scroll to Top