bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kalian mengenai blade laravel. Blade adalah sebuah template engine dari laravel yang mana fungsinya adalah untuk mempermudah kita dalam menampilkan pada browser.
Nah untuk kali ini kita hanya belajar untuk memisahkan antar struktur, jadi kalau kalian lihat tutorial sebelumnya, kita tuh boros banget dalam penulisan code, kita menulis sesuatu yang udah ditulis, jadi misalnya mengenai navigasi, nah di file yang lain kita menuliskan hal yang sama mengenai navigasi (navbar).
Maksud om bewok adalah kita akan buat master template atau bisa juga disebut dengan layout template. Master template ini adalah tempat yang jarang sekali kita ubah - ubah jadi bisa dibilang static lah ya.
Nah biar lebih bagus lagi ditutorial kali ini saya akan menggunakan bootstrap 4 ya.
Buat yang belum belajar sebelumnya bisa lihat di sini part 3, karena ini tutorial series, takutnya teman - teman bingung kalau langsung loncat kesini, dibawah ini ada daftar tutorial series laravelnya.
Daftar Tutorial Lengkap Belajar Laravel 7
Kita buat routes-Nya dulu, klik folder - routes - web.php
Kita tambahkan controller juga buat klik folder Http - Controllers - belajarController.php
Oke langsung aja kita buat file master.blade.php di resources - views - master.blade.php
Kodingan-Nya seperti dibawah ini ya resources - views - master.blade.php
Nah om bewok akan jelasin, karena ada syntax yang baru teman - teman kenal yaitu @yield.
Biasanya untuk memanggil blade ini, kita menggunakan symbol @. Nah kalau di bagian
<title>@yield('title')</title> artinya adalah
om blade : "halo teman - teman tujuan saya menulis @yield('title) adalah jika nanti di tiap - tiap file lain, kalian bisa mengubah title kalian sesuai yang kalian inginkan.
Nah jadi misalnya kalian ada di file about.blade.php, nah kamu bisa mengubah title-Nya dengan cara @section('title', 'about us') kodingan ini akan ada di about.blade.php, nanti om bewok kasih tau caranya ya"
Nah kalau kalian perhatikan ada bagian @yield('content'). nah artinya apa ?
Jadi kita bebas mengisi apa saja pada bagian @yield('content') tersebut pada file - file yang sudah kita buat.
Intinya master.blade.php ini adalah sebuah sistem atau default template atau layout template tersebut, yang mana berbentuk static atau tidak di ubah - ubah, dan kita ga perlu ngubah - ngubah lagi.
Contohnya kan misalnya ribet kalau kita harus menambahkan kodingan navbar di setiap file, padahal navbar-Nya, kodingan-Nya gitu-gitu aja, ga ada yang berubah dan jika kita mau menambahkan menu di navigation bar, kita tinggal ke master.blade.php terus kita tambahin sendiri deh.
Otomatis semua file yang berada di master.blade.php semuanya akan berubah navigasinya, navigasi akan bertambah menu. Sampa sini paham ya ? kalau masih bingung bisa tinggalkan di komentar ya
Oh iya ini kan tutorial lanjutan ya dari part 3. jadi kalau mau melihat kodingan keseluruhan bisa liat paling bawah ya.
Selanjutnya kita udah selesai ngurusin master.blade.php, sekarang kita urusin file-file yang lainnya seperti about.blade.php
Kalian buka file about.blade.php dengan cara klik resources - views - about.blade.php
Kodingan nya seperti dibawah ini ya
@extends('master') ini untuk memanggil master.blade.php otomatis navigasi akan ada di about.blade.php jadi kita udah ga perlu masukin navigasi lagi.
@section('title', 'about us') maksudnya kita memanggil @yield('title') dengan cara
@section('nama yield yaitu title', nama title yang kamu inginkan') jadinya
@section('title','about us')
Selanjutnya @section('content') codinganya di sini @endsection.
@section('content') ini untuk memanggil @yield('content') yang terdapat di master.blade.php. jadi dia akan berada di dalamnya
Kita jalankan dengan php artisan serve dengan menggunakan terminal
Lalu buka browser kalian di localhost:8000/about
Tampilanya akan seperti dibawah ini
Tampilan about.blade.php
 |
| Buka url : localhost:8000/about |
Selanjutnya kita akan mengubah semuanya contact.blade.php, blog.blade.php, home.blade.php, list.blade.php
resources - views - contact.blade.php
resources - views - blog.blade.php
resources - views - home.blade.php
resources - views - list.blade.php
Tampilan
 |
| Buka dibrowser ketikan localhost:8000/blog |
| Buka dibrowser ketikan localhost:8000/about |
 |
| Buka dibrowser ketikan localhost:8000/contact |
 |
| Buka dibrowser ketikan localhost:8000/list |
Selanjutnya di part 5 kita akan belajar mengenai crud laravel
No comments:
Post a Comment