Cara Membuat Layout Twig Pada Slim Framework

Dibagian ini kita akan belajar salah satu kekuatan dari templating twig. Silahkan teman teman buka situs resminya di link berikut https://twig.symfony.com/. Kalo teman teman lihat dibagian documentasinya yang menarik dari kegunaan templating twig ini adalah sistem extends

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-01

Jadi idenya nanti kita akan punya satu layout utama yang kita pakai berkali kali disemua halamannya. Dimana layout atau struktur utamanya akan terdiri dari header dan footer misalnya sedangkan untuk bagian bagian yang sifatnya dinamisnya seperti isi bodynya atau isi dari titlenya kita bisa langsung edit melalui sistem twignya. Nah jadi cara yang pertama saya akan buat satu folder khusus dibagian views namanya layout lalu didalamnya ada base.html

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-02

Isi dari base.htmlnya sendiri seperti biasa kita punya struktur html seperti berikut

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-03

Atau teman teman juga bisa menambahkan statis header dan footer sebagai base templatenya

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-04

Supaya bagian tersebut akan selalu ada disetiap halaman. Lalu untuk isi titlenya ingin dibuat dinamis? Maka dari itu kita sediakan satu block atau tempat ada pembuka dan endblock sebagai penutupnya namanya block title yang mau di isi judul contentnya

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-05

Perhatikan cara penulisan templating twignya. Selanjutnya kita akan melakukan hal yang sama untuk block contentnya

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-06

Maka sekarang title dan content isinya akan dinamis tergantung halaman yang dikunjungi. Misalnya dibagian home.twig mau menggunakan base template untuk mengisi title dan bodynya. Bagaimana caranya? Untuk yang mau menggunakan base template ini maka dihalaman itu harus ada keyword extends untuk memanggil base templatenya. Pada kasus ini base.htmlnya ada di folder layout maka pathnya seperti ini

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-07

Sekarang kalian sudah bisa mengisi block titlenya contohnya seperti berikut

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-08

Lalu berikutnya kita siapkan juga satu block lagi untuk isi body contentnya

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-09

Jadi kita punya dua block dinamis untuk bagian content dan bagian titlenya. Pastikan nama blocknya sama seperti nama block yang ada di layout sehingga twig akan otomatis memasukkan kedua block tersebut kebagian base layoutnya. Kalo kalian save lalu jalankan melalui browser maka teman teman bisa melihat isi titlenya sudah dinamis begitu pula untuk body contentnya

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-010

Karena dia mengextends base layoutnya maka kita melihat bagian statisnya juga yaitu header dan footer. Tentu halamannya tidak hanya satu kita juga bisa menyiapkan halaman berikutnya misalnya halaman blog

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-011

Untuk itu kita daftarkan route baru dengan metode GET ke url /blog. Kalo users mengakses url /blog tolong dong render blog.twignya

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-012

Lalu di blog.twig kita extends base layout yang sama tapi block title dan bodynya akan berbeda

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-013

Jadi sekarang kita punya dua halaman dinamis yang pertama halaman home dan kalo saya ke url /blog maka halaman blog lah yang dirender

Cara Membuat-Layout-Twig-Pada-Slim-Framework-27032020-EKI-014

Nah ini salah satu konsep yang dinamakan DRY - Don't Repeat Yourself artinya kalo ada kode kode yang berkali kali kita ulang maka kita letakkan dibase htmlnya. Nah nanti kalo kita mau pakai template itu maka kita tinggal extends saja. Itu dia salah satu fitur utama dari twig. Sampai jumpa diartikel berikutnya. Terima Kasih

27 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat