The Official site of Ngurajeka

Template Engine

Template Engine adalah salah satu alat bantu yang digunakan untuk memisahkan pengerjaan antara logic dan tatap muka. Dalam hal ini, Template Engine yang akan kita gunakan adalah Twig.

Twig merupakan salah satu Template Engine untuk Bahasa Pemrograman PHP. Pada dasarnya, menggunakan PHP terkadang akan terasa seperti menggunakan sebuah Template Engine. Dan banyak yang mengatakan bahwa PHP sendiri awalnya dibuat seperti sebuah template engine. Contoh:

<h1><?php echo $title; ?></h1>
<p><?php echo $description; ?></p>

Kenapa harus ada Template Engine jika PHP sendiri bisa digunakan untuk mempresentasikan hal tersebut ke tatap muka pengguna. Sebelum saya jawab, kode diatas akan saya tulis menggunakan Twig.

<h1>{{ title }}</h1>
<p>{{ description }}</p>

Kedua kode diatas, akan menghasilkan output elemen yang sama. Menurut anda mana yang lebih mudah?

Bagi saya, yang seorang BackEnd Developer. Memisahkan antara penulisan logika dan tatap muka dengan menggunakan template engine ini sangat membantu dalam proses pengembangan. Bekerja sama antara FrontEnd Developer dan BackEnd Developer terkadang menjadi lebih mudah dengan pemisahan antara penulisan logika dan tatap muka pengguna seperti ini.

Selain syntax sederhana diatas, ada banyak sekali hal-hal yang bisa kita lakukan menggunakan Twig Template Engine ini. Untuk membaca lebih jelasnya ada disini.

Membuat template kepala, kaki dan konten

Sekarang, kita akan memulai dengan membuat tiga file html. Yaitu head.html, foot.html dan index.html didalam direktori template

$ touch template/{index,head,foot}.html

Perintah diatas kita gunakan untuk membuat file-file seperti yang kita butuhkan sebelumnya sekaligus. Bisa juga dibuat satu persatu secara terpisah.

Kita mulai dengan file head.html, silahkan gunakan teks editor yang paling anda sukai. Saran saya, anda bisa menggunakan Sublime Text atau Atom atau bahkan teks editor lainnya. (Vim, Nano, GNU EMacs)

<!DOCTYPE html>
<html>
    <head>
        <title>{{ judul }}</title>
        <meta name="description" content="{{ deskripsi }}">
    </head>
    <body>

Dari kode diatas, kita menuliskan judul dan deskripsi secara dinamis. {{ }} merupakan syntax dari Twig Template Engine untuk memanggil referensi variable yang sebelumnya kita deklarasikan.

Selanjutnya, kita buat foot.html

    </body>
</html>

Hanya itu saja? Yup, untuk sementara kita buat seminimalis mungkin. Kita pun baru akan menambahkan bootstrap setelah template ini telah berhasil kita implementasikan.

Terakhir, untuk file index.html

    {% include 'head.html' %}
    <h1>Selamat Datang</h1>
    <p>Perkenalkan, nama saya adalah {{ nama_lengkap }}. Dan saya berasal dari {{ nama_kota }}. Salam Kenal</p>
    {% include 'foot.html' %}

Pada bagian ini, kita memasukkan head.html dengan perintah include. Artinya, kode yang telah kita tulis didalam file head.html ini akan secara automatis berada dalam konteks index.html saat di eksekusi. Begitu pula dengan file foot.html. Lalu kita pun memanggil referensi variable nama_lengkap dan nama_kota.

Apakah file-file diatas sudah bisa digunakan langsung? Hm… Sebelum terlalu jauh, mari kita lihat kembali apa yang telah buat.

Membuat struktural direktori dan file
Menambahkan pustaka Twig dan Bootstrap
Mempelajari dasar-dasar Template Engine
Membuat template dasar (head.html, foot.html, dan index.html)

Nah, sebelum kita terlalu jauh. Saya akan menjelaskan sedikit tentang Web sederhana yang akan kita buat:

Akan ada satu halaman home (index.php, akan menggunakan index.html sebagai template)
Akan ada satu halaman galeri (gallery.php, akan menggunakan gallery.html sebagai template)

Sederhana bukan? Mari kita lanjutkan dengan membuat perubahan pada file index.php yang sebelumnya telah kita buat.

<?php
    require_once __DIR__.'/inc/Twig/lib/Twig/Autoloader.php';
    Twig_Autoloader::register();
    $loader = new Twig_Loader_Filesystem(__DIR__ . '/template');
    $twig = new Twig_Environment($loader, array());

    $data = array(
        'judul' => 'Web Sederhana',
        'deskripsi' => 'Belajar membuat web sederhana',
        'nama_lengkap' => 'Ady Rahmat MA',
        'nama_kota' => 'Jakarta Selatan'
    );
    echo $twig->render('index.html', $data);
?>

Dari kode diatas, kita melakukan hal berikut:

Memanggil file autoloader dari pustaka Twig. Autoloader ini berisikan fungsi-fungsi untuk memanggil class-class pustaka dari Twig agar bisa kita gunakan. Dan kemudian menggunakan class Twig_Autoloader dan static function register untuk mendaftarkan class-class pustaka dari Twig.
Melakukan instantiate dari class Twig_Loader_Filesystem dengan memberikan parameter dimana kita akan atau sedang menyimpan file-file html (template) kita. DIR merupakan konstan yang disediakan oleh PHP untuk memberikan nilai absolute dari direktori dimana kita sekarang berada. Lalu di assign ke $loader sebagai reference variable.
Melakukan instantiate dari class Twig_Environment, dengan menambahkan $loader sebagai parameter. Dan sebuah tumpukan data (array) kosong. Lalu di assign ke $twig sebagai reference variable.
Membuat tumpukan data yang berisikan judul, deskripsi, nama_lengkap, dan nama_kota. Lalu di assign ke $data.
Menggunakan fungsi render dari objek $twig untuk memanggil dan memparsing file index.html dan mengirimkan $data agar tumpukan data didalamnya bisa digunakan. (Cek kembali file head.html, dan index.html).
Dan terakhir, mengeluarkan hasil rendernya sebagai output (hasil dari render diatas merupakan string) menggunakan perintah echo.

Mari kita lihat hasilnya menggunakan perintah php di antarmuka bari perintah:

$ php index.php

Maka output yang akan dikeluarkan adalah sebagai berikut:

<!DOCTYPE html>
<html>
    <head>
        <title>Web Sederhana</title>
        <meta name="description" content="Belajar membuat web sederhana">
    </head>
    <body>
    <h1>Selamat Datang</h1>
    <p>Perkenalkan, nama saya adalah Ady Rahmat MA. Dan saya berasal dari Jakarta Selatan. Salam Kenal</p>
        </body>
</html>

Yang menandakan bahwa file index.php telah berhasil kita buat sesuai dengan apa yang telah kita tuliskan mulai dari template dan tumpukan data yang kita masukkan.

Kemana perginya {{ title }} dan beberapa kode lainnya? Seperti yang awal saya sampaikan, bahwa tumpukan data yang kita kirimkan atau tambahkan sebagai parameter pada fungsi render akan digunakan sebagai reference pada template yang kita buat. Dan tentunya, file head.html, dan foot.html pun akan di render secara bersamaan didalam file index.html karena dipanggil menggunakan perintah include didalam index.html kita.

Sekarang, mari kita lihat hasilnya dari Web Browser.

$ php -S 0.0.0.0:9000 -t .

Perintah diatas, akan menjalankan PHP Builtin Web Server dan dijalankan di port 9000 (bisa diubah sesuai keinginan atau kebutuhan). Kemudian 0.0.0.0 adalah hostnya, agar bisa diakses melalui http://localhost:9000 atau http://127.0.0.1:9000

Membuat Web Sederhana menggunakan PHP, Twig Template Engine dan MySQL: Part 1
Membuat Web Sederhana menggunakan PHP, Twig Template Engine dan MySQL: Part 2
Membuat Web Sederhana menggunakan PHP, Twig Template Engine dan MySQL: Part 3
Membuat Web Sederhana menggunakan PHP, Twig Template Engine dan MySQL: Part 4

Membuat Web Sederhana menggunakan PHP, Twig Template Engine dan MySQL: Part 2

Template Engine

Membuat template kepala, kaki dan konten