Membuat PHP Template Engine (2) : Mendesain Template

Maret 30, 2008

Setelah saya posting artikel tentang membuat template engine sederhana, sekarang saya akan men-share bagaimana membuat template yang dapat digunakan oleh template engine tersebut (MySmarty). Kalau di artikel yang lalu itu lebih dominan untuk programmer, sekarang lebih dominan untuk desainer =).

Sebuah template merupakan satu direktori yang memiliki struktur file di dalamnya sebagai berikut:

  • Folder <nama_template>, yang berisi :
    1. file <nama_template>.tpl,
    2. file <nama_template>.css (optional).

File *.tpl adalah file template HTML utama. File *.css merupakan file stylesheet yang dibutuhkan dan harus ada walaupun file tersebut kosong. File-file lain seperti file javascript, gambar, dll dapat disertakan sesuai kebutuhan di dalam folder.

Prinsip kerjanya sederhana, cukup masukkan tag-tag berikut : @title@, @top@, @header@, @bar@, @left@, @center1@, @center2@, @right@, @bottom@, di tempat yang diinginkan dalam suatu halaman web. Nanti, template engine akan me-replace tag-tag tersebut dengan konten yang dimasukkan programmer.

Misalnya, pada template terdapat script sebagai berikut,

...
<tr><td>@center1@</td></tr>
...

dan programmer menuliskan kode berikut,

$mysmarty->addCenter1("<div>Ini Content</div>");

maka nanti di file yang di-generate oleh template engine akan menjadi

...
<tr><td><div>Ini Content</div></td></tr>
...

Yang terpenting dalam membuat template adalah membuat file *.tpl. Nah, untuk mudahnya, dalam membut file *.tpl tersebut kita dapat menggunakan template HTML bagus yang sudah ada atau hasil download (untuk mengerjakan tugas kemarin, saya download template gratisan =9), kemudian memodifikasinya dengan memasukkan tag-tag tertentu seperti di atas.

triple

Download contoh template : templates.zip

One Response to “Membuat PHP Template Engine (2) : Mendesain Template”

  1. budi Says:

    mantap mas….


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

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: