Memakai Twig Untuk View Pada PHP


Untuk menghasilkan kode program yang lebih mudah dikelola, biasanya mereka dibagi ke dalam model, view dan controller (MVC). Kode program pada view tidak boleh mengandung kode program business logic. Lalu, apa berarti kode program pada view harus HTML statik? Tidak juga! Tentu saja masih ada kode program untuk menampilkan variabel, men-format data, dsb yang merupakan bagian dari display logic. Idealnya, kode program pada display logic perlu di-sembunyi-kan sehingga kode program di view benar-benar hanya HTML atau tag sejenisnya.

Berbeda dengan PHP, Java bukanlah bahasa yang dirancang untuk dapat disisipkan bersama HTML. Oleh sebab itu, Java Enterprise Edition (Java EE) menggunakan JavaServer Faces (JSF) yang berbasis komponen dimana view ditulis dalam bentuk XML. Developer, tidak seperti designer web, sudah terbiasa merancang interface berbasis komponen (misalnya secara drag and drop pada Visual Studio). Selain itu, versi Java EE yang lama memiliki JavaServer Pages (JSP) pada view. JSP mirip seperti PHP, tetapi dirancang khusus untuk keperluan view.

Lalu bagaimana dengan PHP? PHP pada awalnya dirancang khusus untuk membuat view menjadi lebih dinamis. Oleh sebab itu, PHP dapat langsung dipakai di view. Seiring waktu, PHP berkembang menjadi sebuah bahasa modern yang sering dipakai untuk keperluan back-end. Beberapa developer melihat bahwa menggabungkan HTML dan PHP di kode program view dapat membuat aplikasi menjadi rumit. Mereka berpandangan bahwa memakai kode program PHP pada view pada akhirnya membuat view terlihat lebih rumit dan akan lebih sulit dikelola (sulit ber-evolusi)! Oleh sebab itu, mereka mengembangkan template engine seperti Smarty dan Twig. Mereka menawarkan solusi untuk membuat view berisi HTML tanpa harus mengandung kode program PHP yang panjang dan rumit.

Pada artikel ini, saya akan memakai Twig. Twig adalah template engine yang juga dipakai di framework Symphony 2. Cara kerjanya secara garis besar dapat dilihat di http://twig.sensiolabs.org/doc/internals.html. Template yang memakai Twig akan diproses oleh lexer dan parser, lalu di-compile untuk menghasilkan kode program PHP yang selanjutnya dapat dipanggil berkali-kali oleh controller . Ini menunjukkan bahwa memakai template engine akan memberikan penalti kinerja bila dibandingkan dengan langsung menyisipkan kode program PHP di view. Belum lagi ditambah fakta bahwa web designer atau developer harus mempelajari syntax baru.

Karena saya tidak memakai Symphony 2 melainkan sebuah aplikasi PHP yang berdiri sendiri, saya perlu men-download Twig di http://github.com/fabpot/Twig/tags. Sebagai latihan, saya akan men-download versi 1.15.0. Saya men-extract file distribusi tersebut, kemudian saya memindahkan folder Twig yang ada di folder lib ke dalam root folder di proyek saya.

Setelah itu, saya membuat sebuah template Twig dengan nama view.html yang isinya seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Latihan Twig</title>
<style type="text/css">
    form {
        font-family: 'lucida grande', tahoma, verdana;  
    }

    input, textarea {       
        font-size: 15px;
        padding: 9px; border: solid 1px #e5e5e5;
        width: 200px; background: #ffffff;
        box-shadow: rgba(0,0,0,0.2) 0px 0px 3px;        
        border-radius: 5px;
        border-color: rgb(189,199,216);
    }
    textarea {
        height: 50px; line-height: 150%;        
    }
    input:focus, textarea:focus {
        border-color: #c9c9c9;
    }
    label {     
        font-size: 15px; margin-left: 10px;
        color: #555; vertical-align: top;       
        display: inline-block; width: 50px;
        text-align: right; margin-right: 5px;               
    }
    .submit {
        width: auto; padding: 9px 15px;
        background: -moz-linear-gradient(center top, rgb(105,143,191), rgb(80,111,165)) repeat scroll 0% 0% rgb(96,121,174);
        border-color: rgb(41,72,124);       
        font-size: 14px; color: #ffffff;                
    }
    h1 {
        font-weight: bold;
        font-size: 30px;
        font-family: 'Kavoon', 'Trebuchet MS', Helvetica;               
    }
</style>
</head>
<body>
{% autoescape %}

{% if pelanggan is null %}
    <h1>Tambah Pelanggan Baru</h1>  
{% else %}
    <h1>Edit Pelanggan: {{ pelanggan.nama|title }}</h1> 
{% endif %}
<form>
    <p>
        <label for="nama">Nama</label>
        <input type="text" name="nama" id="nama" value="{{ pelanggan.nama }}"/>

    </p>
    <p>
        <label for="usia">Usia</label>
        <input type="text" name="usia" id="usia" value="{{ pelanggan.usia }}"/>       
    </p>
    <p>       
        <label for="alamat">Alamat</label>
        <textarea name="alamat">{{ pelanggan.alamat }}</textarea>       
    </p>

    <p>
        {# Tombol Simpan muncul bila mengisi pelanggan baru dan
           Tombol Edit muncul bila mengubah data pelanggan. #}

        {% if pelanggan is null %}
            <input type="submit" class='submit' value="Simpan" />
        {% else %}
            <input type="submit" class='submit' value="Edit" />
        {% endif %}
    </p>
</form>

{% endautoescape %}
</body>
</html>

Setelah ini, saya membuat sebuah controller dengan nama controller.php yang isinya seperti berikut ini:

<?php
    require_once 'Twig/Autoloader.php';
    Twig_Autoloader::register();

    spl_autoload_register(function($class) {
        require_once "$class.php";
    });

    $loader = new Twig_Loader_Filesystem(dirname(__FILE__));
    $twig = new Twig_Environment($loader);

    print $twig->render('view.html');
?>

Pengguna akan mulai menggunakan aplikasi web dengan mengakses controller. Pada kode program di atas, controller memakai Twig untuk mencari view bernama view.html di folder yang sama dan kemudian menampilkan view tersebut. Bila saya menjalankan controller, saya akan memperoleh hasil seperti pada gambar berikut ini:

Tampilan view yang dihasilkan Twig

Tampilan view yang dihasilkan Twig

Berikutnya, saya akan menambahkan model. Pada MVC di aplikasi dekstop, model adalah sesuatu yang mewakili apa yang ditampilkan pada view. Misalnya, bila di form terdapat sebuah text field untuk mengisi nama, maka nilai text field tersebut diwakili oleh sebuah property nama di model. Akan tetapi hal ini tidak berlaku pada aplikasi web. Perpindahan data dari view ke controller selalu diwakili oleh atribut pada request get atau post, bukan oleh model. Dengan demikian, pada MVC untuk aplikasi web, M adalah domain model bukan view model. Berbeda dengan view model yang bertugas menampung nilai pada view, domain model adalah model yang mewakili business logic. Sebagai contoh, saya membuat sebuah model seperti berikut ini:

<?php

namespace domain;

class Pelanggan extends DomainObject {

    public $nama;

    public $alamat;

    public $usia;       

    function __construct($nama = NULL, $alamat = NULL, $usia = NULL) {
        if ($nama) $this->nama = $nama;
        if ($alamat) $this->alamat = $alamat;
        if ($usia) $this->usia = $usia;
    }

}

?>

Kemudian, saya mengubah controller untuk membuat model di atas, menjadi seperti berikut ini:

<?php
    use domain\Pelanggan;

    require_once 'Twig/Autoloader.php';
    Twig_Autoloader::register();

    spl_autoload_register(function($class) {
        require_once "$class.php";
    });

    $loader = new Twig_Loader_Filesystem(dirname(__FILE__));
    $twig = new Twig_Environment($loader);

    $pelanggan = new Pelanggan("solid snake", "Hamparan <strong>salju</strong> di Alaska", 10); 
    print $twig->render('view.html', ['pelanggan'=> $pelanggan]);

?&:w
gt;

Bila saya menjalankan controller, tampilan yang saya peroleh akan terlihat seperti berikut ini:

Tampilan view dengan domain object

Tampilan view dengan domain object

Walaupun saya memanggil view yang sama yaitu view.html, saya memperoleh output yang berbeda. Mengapa demikian? Walaupun diakhiri dengan .html, view.html bukanlah file HTML biasa melainkan sebuah template Twig. Di dalam file tersebut terdapat tag Twig untuk mewakili display logic.

Pada Twig, sebuah tag diawali dengan {% dan diakhiri dengan %}. Sebagai contoh, pada view.html, saya memakai tag {% autoescape %} dan {% endautoescape %} sehingga Twig akan melakukan escaping secara otomatis. Isi dari property alamat mengandung tag HTML seperti <strong>Salju</strong>. Berkat tag autoescape, Twig akan menghasilkan output HTML yang berupa &lt;strong&gt;Salju&lt;/strong&gt;.

Selain itu, saya juga memakai tag {% if %}, {% else %}, dan {% endif %} untuk mewakili logika kondisi. Sebagai contoh, bila nilai model pelanggan adalah null (tidak di-isi), maka judul yang ditampilkan adalah Tambah Pelanggan Baru. Sebaliknya, bila nilai model pelanggan tidak kosong, maka judul yang ditampilkan adalah Edit Pelanggan.

Twig juga memiliki filter. Sebagai contoh, saya memakai filter title pada {{ pelanggan.nama|title }}. Bagian tersebut akan menyebabkan Twig menghasilkan nilai property nama dari model pelanggan dimana nama akan di-format huruf kapital per kata (contoh: solid snake menjadi Solid Snake).

Pada template Twig, saya juga dapat memberikan komentar, diawali dengan {# dan diakhir oleh #}. Berbeda dengan komentar HTML, komentar Twig tidak dapat dilihat oleh pengguna karena bukan bagian dari output.

Perihal Solid Snake
I'm nothing...

2 Responses to Memakai Twig Untuk View Pada PHP

  1. Aminuddin Aminuddin mengatakan:

    gan solid snake. ini saya nyoba tutorial yg agan buat diatas. cuman pas kita menginstance pelanggan (baris 14 di kontroller) layar view jadi blank…

    mohon pencerahannya

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: