PHP: Template

Iseng-iseng mencari dengan google, menggunakan kata kunci nickname saya dulu “salmanas” ketemu tulisan yang saya buat sekitar bulan Agustus 2001. Awal-awal saya belajar bahasa pemrograman PHP. Tulisan tersebut saya sajikan kembali disini dengan sedikit perubahan struktur dan penyesuaian di sana-sini. Link asli tulisan ini saya dapatkan dari disini.

Pengantar

Template secara bahasa bisa diartikan sebagai cetakan. Dengan template ini bila ingin membuat sebuah benda, katakanlah sebuah mainan, kita tidak perlu lagi memikirkan bagaimana bentuknya. Kita hanya perlu memikirkan apa bahan yang akan kita pakai. Sedangkan bentuknya akan dipikirkan dan dibuat oleh orang lain.

Begitu pula dalam pengembangan sebuah halaman web, sering dijumpai pekerjaan desain halaman html yang berbeda-beda dengan isi yang sama. Tentu saja ini akan menyita waktu jika harus memasukkan tag-tag html dalam skrip. Karena setiap desain berubah programmer harus mengubah kode program dari halaman web yang bersangkutan.

Karena kesulitan ini timbul ide untuk memisahkan antara pekerjaan desain dan skrip, sehingga tingkat ketergantungan antara desain dan skriping tidak terlalu kuat. Para desainer dapat dengan bebas mengubah desain mereka tanpa mengharuskan para programmer mengubah skrip yang mereka buat. Tentu saja harus ada persetujuan-persetujuan yang dibuat antara para programmer dan desainer. Dengan cara ini waktu yang dibutuhkan dalam pekerjaan pembuatan halaman web akan leih sedikit, dengan hasil yang maksimal.

Ada banyak paket pemroses template yang bisa didapatkan dari internet. Misalnya FastTemplate, XTemplate, flextemplate, dan phplate. Alih-alih menjelaskan paket-paket yang tersedia ini saya memberikan contoh sebuah program pemroses template sederhana, sehingga cara kerjanya dapat kita runut dengan mudah.

Cara kerja template

Gambar 1. Sistem Template.
Gambar 1. Sistem Template.

Sistem template membutuhkan tiga bagian yang dapat diperhatikan pada gambar 1.

Bagian yang dibuat oleh para desainer adalah TEMPLATE. Kemudian programmer membuat bagian SKRIP PHP yang di dalamnya sudah ada fungsi untuk memproses TEMPLATE dan DATA yang akan dimasukkan ke dalamnya. Hasil akhirnya adalah gabungan DATA dan TEMPLATE. Jadi apabila desainer mengubah tampilan halaman web ini tidak akan mempengaruhi pekerjaan para programmer. Hal yang sama juga akan terjadi kalau misalnya DATA berubah, baik bertambah maupun berkurang.

Membuat Sistem Template Sendiri

Untuk mempermudah pembahasan akan kita buat sebuah studi kasus. Kita akan menampilkan data karyawan dengan field tiga buah, yaitu nama, jabatan, dan nomor telepon. Data ini disimpan dalam bentuk file text biasa. Gunakan text editor seperti notepad, vim, ultraedit, atau editplus. Beri nama entry.dat dan formatnya seperti ini,

Salman AS|Programmer|888-8888
Rina P. Dewi|Bendahara|777-7777
Setyo Wahyono|Staff Pengembangan|666-6666
Rani Rumita|Sekretaris|999-9999

Setiap satu baris mewakili satu record dan antara satu field dengan yang lain dibatasi oleh karakter “|”.

Contoh template yang akan dipakai adalah, katakanlah nama file ini adalah main.html

 1  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2  <html>
 3    <head>
 4      <title>Linux20 - This is my workbench online</title>
 5    </head>
 6
 7    <body marginheight="0" marginwidth="0">
 8      <table width="100%" border="0" cellpadding="0" cellspacing="0">
 9        <tr bgcolor="#006400">
10          <td width="257" height="56"><img src="titlebar.png" width="257"
height="56"></td>
11          <td align="center" width="100%">
12            <font color="#FFFFFF" face="verdana, helvetica" size="-1">
13              &nbsp;
14            </font>
15          </td>
16        </tr>
17      </table>
18      <table width="100%" border="0" bgcolor="#006400" cellpadding="2"
cellspacing="0">
19        <tr>
20          <td align="center" valign="top" width="50%">
21            <table width="100%" align="center" border="0" cellpadding="0"
cellspacing="1" bgcolor="#FFFFFF">
22                {ISI}
23            </table>
24          </td>
25        </tr>
26      </table>
27    </body>
28  </html>

baris 22 yang berisi,

22 {ISI}

mendeklarasikan tag {ISI} dimana kita akan menyisipkan data-data dari file entry.dat.

Karena data yang akan ditampilkan banyak dan mempunyai format yang sama maka perlu dilakukan pengulangan untuk setiap record data dan harus dibuat template yang akan diulang-ulang ini. Pada beberapa paket template prosesor mempunyai keunggulan bisa menyisipkan bagian yang diulang ini kedalam template utama dengan memberi tag tertentu. Dalam pembahasan kita skrip yang digunakan belum mempunyai kemampuan yang disebut. Template untuk pengulangan yang dimaksud adalah,

 1 <tr>
 2    <td align="left" valign="TOP" width="50%">
 3      <b><font face="Arial,Helvetica" size="-1" color="brown">{NAMA}</font></b>
 4    </td>
 5    <td align="LEFT" valign="TOP" width="50%">
 6      <b><font face="Arial,Helvetica" size="-1">{JABATAN}</font></b>
 7      <div>
 8      <font face="Arial,Helvetica" size="-1">Phone: {TELPON}</font>
 9      </div>
10    </td>
11  </tr>

Beri nama file ini main_entry.html.

Baris no 3 meletakkan tag dimana nanti akan diletakkan nama pegawai. Baris ke 6 untuk jabatan dan baris 8 untuk nomor telpon.

Skrip yang menampilkan halaman web adalah sebagai berikut,

 1    <?php
 2    include("template.class.php");
 3    $filename = "entry.dat";
 4
 5    $LogView = new SimpleTemplate;
 6
 7    $LogView->Define("skeleton", "main.html");
 8    $LogView->Define("contents", "main_entry.html");
 9    unset($Isi);
10
11    if (file_exists($filename)) {
12      $file_buffer = file($filename);
13    } else {
14      echo "Error: $filename tidak diketemukan!";
15    }
16
17    for ($i=0; $iAssign("NAMA", $data[0]);
20      $LogView->Assign("JABATAN", $data[1]);
21      $LogView->Assign("TELPON", $data[2]);
22      $TmpContent=$LogView->Parse(contents);
23      $Isi=$Isi.$TmpContent;
24    }
25    $LogView->Assign("ISI", $Isi);
26    $TmpContent=$LogView->Parse(skeleton);
27    $LogView->SimplePrint($TmpContent);
28  ?>

Beri nama file ini show_data.php.

Baris 2 membaca file yang berisi kelas SimpleTemplate. Sedangkan pada baris ke 5 berfungsi membuat sebuah instance dari kelas SimpleTemplate.

Langkah selanjutnya perlu dideklarasikan sebuah nama untuk file template. Ini dilakukan pada baris 7 dan 8. Baris 12 berfungsi membaca file entry.dat jika file tersebut ada. Hasil pembacaan ini disimpan dalam array $file_buffer dimana setiap elemen array akan berisi satu baris dari file entry.dat.

Field-field data pada setiap record dipisahkan dengan fungsi explode, yang dilakukan pada baris 18. Setiap field ini diasosiasikan dengan tag yang bersesuaian dengan tag-tag yang kita letakkan dalam template yang telah kita buat. Hal ini dilakukan pada baris 19 sampai 21.

Setelah langkah-langkah diatas, hal terakhir yang harus dilakukan adalah mengerjakan integrasi yang sesungguhnya antara data dan template. Baris 22 mengerjakan langkah integrasi.

Template utama diproses setelah template isi sudah selesai dikerjakan.

Gambar 2. Hasil proses sistem template.
Gambar 2. Hasil proses sistem template.

Hasil dari file show_data.php adalah gambar 2,

Kelas SimpleTemplate

Skrip pemroses template ini bisa dilihat pada baris-baris perintah di bawah ini.

 1  ErrMsg="Error on Defining $filename as $handle\n";
22        return(FALSE);
23      }
24
25      $this->Templates[$handle]=$filename;
26      return(TRUE);
27    }
28
29    function Assign($tag, $value)
30    {
31      if (empty($tag)) {
32        $this->ErrMsg="Error on Assigning $value to $tag\n";
33        return(FALSE);
34      }
35
36      $this->Tag[$tag]=$value;
37      return(TRUE);
38    }
39
40    function Parse($handle)
41    {
42      reset($this->Tag);
43      reset($this->Templates);
44      $template=implode("", file($this->Templates[$handle]));
45
46      while (list($tag, $value)=each($this->Tag)) {
47        $tag=ltag.$tag.rtag;
48        $template=str_replace($tag, $value, $template);
49      }
50
51      return($template);
52    }
53
54    function SimplePrint($content)
55    {
56      echo $content;
57      return(TRUE);
58    }
59  }
60  ?>

Template prosesor ini dipaket dalam bentuk kelas. Berikut penjelasan komponen-komponen yang terdapat dalam kelas SimpleTemplate.

var $ErrMsg = "";
var $Tag = array();
var $Templates = array();

$ErrMsg adalah variabel yang berfungsi untuk menyimpan pesan-pesan kesalahan dari skrip ini. $Tag adalah array yang akan dipakai untuk menyimpan tag-tag yang akan kita definisikan dan isinya. Kemudian $Templates dipakai untuk menyimpan nama file template.

Method-method yang ada dalam kelas SimpleTemplate adalah:

  1. Method Define($handle, $filename), berfungsi untuk mengasosiasikan sebuah string sebagai pengganti nama file template. Ini akan mempermudah jika nanti template yang bersangkutan akan diganti dengan template yang lain. Kita hanya tinggal mengganti pada satu baris perintah saja. Sedangkan yang lain tidak perlu diubah karena merujuk pada string pengganti dari nama file template yang sesungguhnya.
  2. Assign($tag, $value), dipakai untuk mengasosiasikan tag dengan data yang akan menggantikannya.
  3. Parse($handle), adalah untuk memproses penggantian tag dengan data. Proses penggantian ini dipakai fungsi string str_replace(). Pada beberapa paket template prosesor memakai fungsi regular expression. Dalam SimpleTemplate dipakai str_replace(), karena untuk mempermudah pembahasan.
  4. Parse($handle), melakukan pemrosesan template yang sesungguhnya. Hasil dari method ini adalah string gabungan antara template dan data yang siap dicetak.
  5. SimplePrint($content), mencetak argumennya yang berupa string.

Selesai.