daily gadgets, computers, and electronic news
04/05
2005

Tutorial Smarty – Bagian III

Sponsored Links

Bagian ketiga dari tutorial ini diambil dari posting gw di eKelas tanggal 23 April 2005.


Sekarang kita akan mencoba mendalami Smarty lebih jauh, yaitu dng membuat aplikasi guestbook :) Konsepnya adalah sebuah guestbook sederhana dng pilihan tampilan 2 bahasa. Proyek yg dbuat ini akan terdiri dari 4 bagian, yaitu:
1. Main (guestbook.php) –> script utama, berisi parsing ke template dan proses2 database. Letakkan di direktori utama (mis: path-to-web-serverguestbook)
2. Konfigurasi –> file konfigurasi. Letakkan di subdir configs (mis: path-to-web-serverguestbookconfigs)
2.a. Indonesia.conf –> berisi konfigurasi untuk mode bahasa Indonesia
2.b. Inggris.conf –> berisi konfigurasi untuk mode bahasa Inggris
3. Template (guestbook.tpl) –> file template, berisi template tampilan. Letakkan di subdir templates (mis: path-to-web-serverguestbooktemplates)
4. Style sheet (style.css) –> CSS file, untuk pendukung tampilan. Letakkan di direktori utama (mis: path-to-web-serverguestbook)

Entah kenapa, Smarty memberikan pesan error saat menggunakan metode

untuk memasukkan kode CSS. Sedangkan pada penggunaan inline style (tag style) dan embedded style (link rel) tidak ada masalah.

Berikut source code-nya:
1. guestbook.php

[php]< ?php
require 'libs/Smarty.class.php';
$smarty = new Smarty;
$smarty->assign(”content”,”Smarty says, “Hello World”");
$smarty->display(’guestbook.tpl’);
?>[/php]

2. a. Indonesia.conf

[code]# Konfigurasi untuk bhs Indonesia
pageTitle = "Demo Pembuatan Buku Tamu menggunakan Smarty"
textTitle = "Buku Tamu dengan Smarty"
textDesc = "Demo ini menunjukkan penggunaan pustaka Smarty. Dengan Smarty. kita dapat memisahkan bagian logika dengan bagian presentasi dari aplikasi kita. Selain itu kita juga dapat memisahkan konfigurasi dari aplikasi tersebut. Hasilnya adalah manajemen proyek yg lebih baik efektif dan efisien."
formTextName = "Nama"
formTextEmail = "Email"
formTextComment = "Komentar"
formTextSubmit = "Isi Buku Tamu"
formTextDiv = ":"[/code]

2. b. Inggris.conf

[code]# Konfigurasi untuk bhs Inggris
pageTitle = "Guestbook Demo Using Smarty"
textTitle = "Guestbook with Smarty"
textDesc = "This demo shows how Smarty library works. With Smarty, you can easily split your application coding/logic, design/layout, and configuration, thus make project management much more easier."
formTextName = "Name"
formTextEmail = "Email"
formTextComment = "Comment"
formTextSubmit = "Submit"
formTextDiv = ":"[/code]

3. guestbook.tpl

[html]{config_load file=”inggris.conf”}


{#textTitle#}
{#textDesc#}
{#formTextName#}
{#formTextDiv#}

{#formTextEmail#}
{#formTextDiv#}

{#formTextComment#}
{#formTextDiv#}

{$content}


[/html]

4. style.css

[css]body {
background-color: #f4f4f4;
color: #000;
margin: 0px;
}

#main {
width:90%;
background-color:#ffffff;
float:left;
border-right:2px dashed #333333;
border-bottom:2px dashed #333333;
padding-bottom:40px;
}

#main #textTitle {
text-align: center;
margin-top:10px;
margin-bottom:10px;
font-weight:bolder;
font-size:1.5em;
}

#main #textDesc {
font-size:0.8em;
padding:5px;
margin-left:10%;
margin-right:10%;
margin-bottom:20px;
text-align:center;
border:2px solid #cccccc;
background-color:#e9e9e9;
-moz-border-radius:7px;
}

#main #formPost {
float:left;
margin-left:5%;
margin-right:5%;
padding:10px;
border:1px solid #999999;
width:250px;
background-color:#f9f9f9;
}

#main #formPost #tableRow {
border-bottom:1px solid #cccccc;
padding-bottom:5px;
margin-bottom:5px;
}

#main #formPost #tableCol1 {
float:left;
margin-left:10px;
width:60px;
}

#main #formPost #tableCol2 {
float:left;
margin-left:10px;
width:10px;
text-align:center;
}

#main #formPost #tableCol3 {
float:left;
margin-left:10px;
width:80px;
}

input,textarea {
background-color:#f3f3cc;
border:1px solid #333333;
}

#main #content {
float: left;
font-size: 0.9em;
}[/css]

Sekarang coba kita jalankan (http://localhost/guestbook/guestbook.php). Contoh hasilnya dapat dilihat di screenshot di bawah. Cobalah untuk mengganti “inggris.conf” dengan “indonesia.conf” pada baris pertama dari index.tpl dan lihat hasilnya. Secara otomatis buku tamu Anda akan berganti bahasa.

Smart Demo Screenshot

Pada bagian ini kita hanya akan membahas masalah penggunaan Smarty pada tampilan utama saja. Pada bagian selanjutnya, bagian terakhir, akan dibahas sisanya, yaitu ttg pemilihan bahasa (konfigurasi) yg digunakan, proses2 database, serta output dari database.

Tutorial Smarty – Bagian III is written by cosa and posted under Programming , , . If you like it, you might consider subscribing to our feed, follows us on Twitter, or receive our latest posts via email. Or else, you could also or store it to your favourite social bookmark sites. Further information about this article can be found.

5 Comments »

  1. 1
    WakZ says:

    Nice Tutor ^^ Thankiu

  2. 2
    Rian says:

    ….Pada bagian selanjutnya, bagian terakhir, akan dibahas sisanya, yaitu ttg pemilihan bahasa (konfigurasi) yg digunakan, proses2 database, serta output dari database.

    Kapan tulisan yg ini di muat mas? saya tunggu banget lho..

  3. 3
    martha says:

    cuy kenapa ga dikasih file utuh nya biar lebih cepat ngopreknya? thx

  4. 4
    ndro says:

    toling bagian 4 nya yg ngebahas database dipercepat…!!!

  5. 5
    dhie says:

    Bugus bgt tutornya… Thanks ya…

Leave a comment