Tutorial Laravel #8 : Sistem Template Blade Laravel


Sistem Template Blade Laravel – Halo selamat datang kembali di seri tutorial laravel dasar lengkap untuk pemula dari www.malasngoding.com.

Pada tutorial laravel bagian delapan ini kita akan berkenalan dan belajar tentang sistem templating blade pada laravel.

Jadi kita akan belajar membuat langsung template dinamis sederhana dengan menggunakan template blade sistem dari laravel.

Sistem Template Blade Laravel

Seperti yang sudah kita pelajari dari tutorial-tutorial laravel di malasngoding.com sebelumnya, laravel menyediakan banyak sekali fitur-fitur keren untuk memudahkan kita dalam membangun aplikasi atau website menggunakan laravel.

Sudah ada beberapa fitur laravel yang sudah kita singgung sebelumnya, di tutorila bagian ini kita akan membahas satu fitur yang paling keren juga dari laravel. yaitu sistem blade template laravel.

Sebenarnya secara tidak sengaja sebelumnya kita sudah berkenalan sekilas dengan yang namanya template blade pada laravel.

BACA : Route dan View Pada Laravel

Laravel membuat ekstensi sendiri untuk menangani bagian view, yaitu ekstensi .blade.php.

Yuk kita langsung masuk ke contoh nya saja untuk melihat kelebihan dari sistem template blade pada laravel ini.

Membuat Template Dinamis Dengan Template Blade Laravel

Setiap website atau aplikasi yang kita bangun pasti kita buat dengan template yang dinamis.  karena kita pasti tidak ingin melakukan perubahan hampir di semua file jika ada perubahan kecil yang di lakukan.

Baca : Membuat Halaman Web Dinamis Dengan PHP

Langsung saja kita masuk ke contoh, di sini kita akan mencoba membuat 3 buah halaman dinamis, jadi pura-puranya ini adalah website sederhana kita, walaupun kita belum membuat pengolahan data dan penerapan logika yang rumit. Karena pada tutorial ini kita hanya akan belajar tentang pembuatan template yang dinamis menggunakan sistem template blade dari laravel.

Untuk contoh ini kita akan pura-pura membuat sebuah blog sederhana.

Karena kita akan membuat 3 buah halaman sebagai contoh, maka sekarang buat 3 buah route pada belajar_laravel/routes/web.php.

belajar_laravel/routes/web.php

Sehingga keseluruhan isi file

Perhatikan route di atas :

  • Pada saat kita mengakses route /blog, maka yang akan dijalankan adalah method home yang ada di dalam controller BlogController.
  • Pada saat kita mengakses route /blog/tentang, maka yang akan dijalankan adalah method tentang yang ada di dalam controller BlogController.
  • Pada saat kita mengakses route /blog/kontak, maka yang akan dijalankan adalah method kontak yang ada di dalam controller BlogController.

Karena route nya akan kita jalankan pada controller BlogController, sekarang kita buat dulu controller BlogControllernya, karena kita belum punya controller dengan nama BlogController.php.

Silahkan baca cara membuat controller laravel di sini.

Di sini saya membuat controller dengan menggunakan perintah php artisan.

Masuk ke direktori project laravel kita, dan ketik

Seperti gambar berikut.

membuat controller blog

membuat controller blog

Setelah selesai membuat BlogController.php, sekarang kita buat method home, method tentang, method kontak lengkap dengan pemanggilan view nya masing-masing.

belajar_laravel/app/Http/Controllers/BlogController.php

Perhatikan syntax di atas

  • Method home memanggil view home
  • Method tentang memanggil view tentang
  • Method kontak memanggil view kontak

Nah sampai di sini kita akan membuat template master nya terlebih dulu.

Template master yang dimaksud di sini adalah template induk nya, buat sebuah view baru dengan nama master.blade.php.

belajar_laravel/resources/views/master.blade.php

master.blade.php ini kita jadikan sebagai template induk dari template dinamis yang ingin kita buat, dimana pada master.blade.php ini kita buat segala sesuatu yang tidak berubah-ubah seperti menu, footer dan nama blog nya.

Oke, jadi sekarang semua view-view yang di panggil pada method yang akan kita hubungkan dengan template view master ini.

buat 3 buah view baru, yaitu view home, tentang dan kontak.

belajar_laravel/resources/views/home.blade.php

 

belajar_laravel/resources/views/tentang.blade.php

 

belajar_laravel/resources/views/kontak.blade.php

Sampai di sini akan saya jelaskan dulu tentang fungsi-fungsi yang teman-teman lihat pada view master, dan view lainnya di atas.

Yaitu ada fungsi @extends(), @section, @yield.

Kita mulai dari view master.blade.php. disana ada fungsi @yield() yang kita buat.

fungsi yield pada laravel

fungsi yield pada laravel

Fungsi @yield() berguna untuk bagian-bagian tertentu pada template website. dan nama bagian nya bisa kita tulis di dalam parameter fungsi @yield().

Seperti yang sudah kita buat, di sana kita membuat bagian judul_halaman dan bagian konten.

Nah, Selanjutnya pada bagian view lainnya, akan kita hubungkan ke template master.blade.php ini. dan tiap-tiap bagian @yield nya kita isi konten nya dari file view-view yang lainnya.

Lanjut ke view home, buka file home.blade.php.

sistem template blade laravel

sistem template blade laravel

dari gambar di atas saja pasti teman-teman sudah mengerti tentang penghubungan sistem template blade ini.

Pertama pada view home kita hubungkan dulu ke view master dengan menggunakan fungsi @extends. kemudian semua isi yang ada diantara fungsi @section akan di tampilkan pada bagian fungsi @yield.

Begitu juga dengan view kontak dan view tentang. intinya akan sama saja.

Sekarang kita coba akses project kita, jangan lupa mengaktifkannya dulu dengan

terus kemudian akses localhost:8000/blog

template website dinamis dengan laravel

template website dinamis dengan laravel

Perhatikan pada gambar di atas, pada saat route ‘/blog’ di akses, maka akan dijalankan method home pada controller BlogController. seperti yang sudah kita set pada route laravel sebelumnya di atas tadi.

kemudian method home pada controller BlogController akan memanggil view ‘home.blade.php’.

Begitu juga dengan halaman lainnya.

Coba klik pada menu kontak dan tentang.

sistem template laravel

sistem template laravel

Klik menu kontak

membuat template dinamis dengan blade laravel

membuat template dinamis dengan blade laravel

 

Nah, oke teman-teman, selesai sudah materi Tutorial Laravel #8 : Sistem Template Blade Laravel. sampai jumpa pada tutorial laravel bagian selanjutnya.

 

Incoming search terms:

  • belajar blade template laravel
  • fungsi @seection pada araaveel
  • males ngoding tamplate laravel
  • membuat template dilaravel



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

relasi one to many eloquent laravel
Diskusi
5 Komentar
  • Mart 3 months ago

    Di tunggu update nya..

    • Diki Alfarabi Hadi 3 months ago

      siap, sedang di kerjain hehe

  • sahara 3 months ago

    sangat membantu sekali gan, trimakasih

    • Diki Alfarabi Hadi 3 months ago

      sama sama mas

  • Amar Nasrulloh 3 weeks ago

    Alhamdulillah, Terimakasih mas


Tulis Komentar / Pertanyaan

Your email address will not be published. Required fields are marked *