Menggunakan Twig sebagai Template Engine

Teman-teman pasti pernah mendengar istilah MVC bukan ? Bagi yang sudah terbiasa menggunakan suatu framework, saya yakin pasti paham. MVC (Model View Controller) adalah suatu pola arsitektur yang saat ini banyak digunakan oleh framework PHP yang ada. Salah satu komponen utamanya adalah View yang memiliki tugas sebagai presentation layer dari aplikasi web. Sederhananya, di View lah semua yang berhubungan dengan tampilan aplikasi web.

Biasanya di dalam kode View, ketika kita ingin menampilkan sekelompok data yang kita dapat dari query database, kita menggunakan kode PHP yang kita sisipkan di dalam HTML untuk melakukan sebuah perulangan agar sekelompok data tersebut bisa tampil. Nah, konsep ini dianggap "mengotori" kode html tersebut. Maka disitulah kegunaan sebuah template engine, Ia bertugas menggantikan kode-kode yang dianggap "mengotori" tersebut, menjadi kode-kode yang lebih rapi dan mudah dibaca.

Twig adalah salah satu template engine untuk PHP yang fleksibel, cepat, dan aman. Twig adalah template engine default dari framework Symfony dan juga Drupal 8, jika Anda terbiasa menggunakan Laravel, maka Anda akan temukan Blade sebagai template engine defaultnya. Selain itu, template engine lainnya ada Smarty, Mustache, Volt, Latter, dan lain-lain.

Saat ini, versi tertinggi dari Twig adalah versi 2. Untuk dapat menggunakan Twig versi 2, diperlukan minimal PHP versi 7. Pada tutorial kali ini saya akan menggunakan Twig versi 1 yang memerlukan minimal PHP versi 5.2.7 untuk dapat berjalan dengan baik. Cukup basa-basinya, kita langsung praktek :D

Instalasi

Untuk melakukan instalasi Twig, kita menggunakan tools Composer. Silahkan eksekusi perintah di bawah ini :

composer require "twig/twig:~1.0"

Tunggu hingga proses selesai, pastikan Anda mendapati folder vendor di dalam direktori Anda, instalasi berhasil.

Menggunakan Twig

Setelah proses instalasi selesai, sekarang saat nya kita latihan menggunakan Twig. Silahkan buat struktur folder seperti berikut ini :

.
|── myproject
|   └─ vendor
|   └─ views
|   └─ index.php

Tuliskan kode berikut ini pada file index.php :

Penjelasan :

• **baris ke-3 : ** me-load Twig dari hasil instalasi menggunakan composer
• baris ke-5 : membuat instance dari class Twig_Loader_Filesystem yang memiliki parameter letak nama folder tempat kita menyimpan file views, nama folder tersebut adalah views
• **baris ke-6 : ** membuat instance dari class Twig_Environment dengan menggunakan variabel $loader sebagai parameternya
• **baris ke-8 : ** menggunakan method render, dengan memberikan nama file views yaitu latihan.html sebagai parameter pertama, dan sebuah array yang diberikan pada parameter kedua.

Selanjutnya buat file latihan.html di dalam folder views, dan tuliskan kode berikut ini :

Penjelasan :

• baris ke-8 : pada baris ini, kita menuliskan kode {{ name }}, yang berfungsi menampilkan nilai dari array yang memiliki key name dari data array yang kita kirimkan tadi.
• baris ke-9 : sama dengan baris sebelumnya, kode {{ city }} berfungsi menampilkan nilai dari array yg memiliki key city

double curly brace ({{ }}) pada Twig berfungsi untuk menampilkan sesuatu, sama fungsinya dengan perintah echo pada PHP.

Jika tidak mengalami masalah, maka hasil yang akan tampil adalah sebagai berikut :

Sampai pada tahap ini mudah bukan ? Tidak begitu sulit saya rasa untuk menggunakan Twig :D

Oke ! jika sudah bisa, mari kita lanjutkan petualangan kita dengan Twig.

Struktur Kondisi dan Looping

Di Twig kita juga dapat menggunakan struktur kondisi dan looping layaknya PHP loh. Mari kita coba !

Silahkan edit file index.php dengan menuliskan kode berikut ini :

Selanjutnya buat file baru latihan2.html di dalam folder views dan tuliskan kode berikut ini :

Jika tidak ada masalah, maka akan menampilkan hasil berikut ini :

Bagaimana ? Mudah bukan ? :D

Saya cukupkan dulu tutorial kali ini, silahkan jalan-jalan ke dokumentasi Twig untuk lebih mengenalnya. Insya Allah akan ada tutorial Twig lainnya.

Selamat belajar. Selamat Mencoba. Happy Coding !

Referensi

• http://twig.sensiolabs.org/doc/1.x/