-->

Tutorial Laravel 5.7 #Bagian3 (Templating Blade Laravel)

 

Tutorial Laravel 5.7 #Bagian3 (Templating Blade Laravel)

Pada tutorial sebelumnya kita sudah membahas tentang cara routing di framework laravel, kali ini kita akan coba untuk membuat templating di laravel, bagaimana caranya.? yuk simak tutorial berikut ini.

Kali ini saya akan coba mengimplementasikan template creative dari startbootstrap, oh ya tutorial ini berlanjut dari tutorial sebelumnya, untuk menghindari kebingungan, bagi kamu yang baru memulai, ada baiknya kamu ke tutorial sebelumnya

Bagian 1 (Instalasi) : https://www.hakkoblogs.com/2019/01/tutorial-laravel-57-bagian1-instalasi.html

Bagian 2 (Basic Route) : https://www.hakkoblogs.com/2019/01/tutorial-laravel-57-basic-route-laravel.html




silahkan anda download di situsnya https://startbootstrap.com/template-overviews/creative/. Bila anda sudah mendownload nya silahkan di ekstrak, kemudian selanjutnya copy semua folder hasil ekstrak template nya





Copy semua folder dan pastekan di folder c:\xampp\htdocs\application\public seperti yang terlihat pada gambar di bawah ini



langkah berikut nya copykan filr index.html hasil extrak tadi ke dalam folder c:\xampp\htdocs\application\resources\view seperti yang terlihat pada gambar di bawah ini




oke sampai sini kita sudah import semua source dari template creative tadi ke dalam laravel, langkah selanjutnya adalah kita mulai memilah layout template tersebut 




dari template tersebut akan kita bagi menjadi beberapa bagian yaitu

  • Navigation
  • Header
  • About
  • Services
  • Portofolio
  • Contact
  • Layout
Perlu diketahui untuk templating menggunakan blade maka semua file akan memiliki sub name file blade contoh saya akan membuat halaman index maka harus merubah misalnya index.php menjadi index.blade.php  sampai sini saya anggap anda paham.

Selanjutnya kita pilah masing - masing bagian kemudian simpan dengan nama masing-masing bagian, untuk bagian navigation silahkan di cut dan pastekan ke file baru kemudian simpan di direktori c:\xampp\htdocs\application\resources\view
dengan nama navigation.blade.php seperti gambar di bawah ini



lanjut, berikutnya simpan bagian header di direktori c:\xampp\htdocs\application\resources\view  dengan nama header.blade.php seperti gambar di bawah ini



kemudian pada bagian  about silahkan create new file dan simpan di direktori di direktori c:\xampp\htdocs\application\resources\view  dengan nama about.blade.php seperti gambar di bawah ini



pada bagian service silahkan create new file dan simpan di direktori di direktori c:\xampp\htdocs\application\resources\view  dengan nama service.blade.php seperti gambar di bawah ini



pada bagian  portofolio silahkan create new file dan simpan di direktori di direktori c:\xampp\htdocs\application\resources\view  dengan nama portofolio.blade.php seperti gambar di bawah ini



pada bagian  contact silahkan create new file dan simpan di direktori di direktori c:\xampp\htdocs\application\resources\view  dengan nama contact.blade.php seperti gambar di bawah ini



bagian yang sudah  di pilah pilah menyisakan halaman index, nah silahkan save as  dan simpan di direktori c:\xampp\htdocs\application\resources\view  dengan nama layout.blade.php seperti gambar di bawah ini



Selanjutnya pada bagian layout kita sisipkan @yield('content') di bawah tag <body> seperti gambar di bawah ini



Selanjutnya halaman index kita ubah dengan memanggil halaman layout dan halaman lainnya yang sudah kita pecah sebelumnya menjadi beberapa file kita panggil dengan fungsi @extends('nama file') contoh jiga saya akan memanggil halaman contact maka saya memanggilnya cukup dengan fungsi @extends('contact') nah berikut ini adalah isi dari file index.




Penjelasan singkat, @extends menurut saya sama dengan fungsi include di php yang membedakan di sini adalah kita bisa menyisipkan file tanpa harus menggunakan tag php, sehingga code yang di hasilkan oleh blade sangat rapi, beautiful dan sangat human sekali :D.

dihalaman layout.blade.php sebelumnya sudah di buatkan @yield('content') yang nantinya digunakan untuk memanggil section content di halaman yang dinginkan, pada tutorial ini adalah halaman index. Untuk menggunakan nya maka di halaman tujuan kita perlu membuat @section('content') dan di akhiri dengan @endsection seperti gambar diatas. anda bisa menambahkan halaman diantara kedua tag tersebut.


Catatan Penting :
anggap saja seperti variabel untuk konten Anda, Anda membuat variabel Anda di dalam tata letak master menggunakan kata kunci @yield ('nama konten'), dan kemudian ketika Anda berbagi tata letak master Anda di seluruh tampilan Anda, Anda menggunakan bagian @section ('nama konten' ') kata kunci untuk menyatakan konten apa pun yang Anda inginkan

Selanjutnya adalah menjalankan source code tersebut dengan mengetikkan di comand prompt php artisan serve maka anda akan mendapatkan halaman seperti di bawah ini.




sampai tahap ini anda sudah berhasil menggabungkan template ke blade laravel, kamu masih bingung.? tenang saya juga sudah menyiapkan video tutorialnya, semoga bisa membantu kamu dalam belajar templating dengan blade laravel, silahkan lihat video berikut ini.

Video Tutorial Laravel 5.7  #Bagian3 (Templating Blade Laravel) PART 1


Video Tutorial Laravel 5.7  #Bagian3 (Templating Blade Laravel) PART 2


Semoga tutorial ini bisa bermanfaat bagi saya dan anda yang membacanya, tetap semangat dalam belajar dan selamat mencoba, di tutorial berikutnya kita akan bermain dengan database dan migration, jadi pantengin terus ya www.hakkoblogs.com untuk mendapatkan update tutorial selanjutnya.


Happy Coding & Programming

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel