Selasa, 19 Juni 2007

belajar lagi tentang smarty bagian ka 3 (tilu)


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-server\guestbook)
2. Konfigurasi –> file konfigurasi. Letakkan di subdir configs (mis: path-to-web-server\guestbook\configs)
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-server\guestbook\templates)
4. Style sheet (style.css) –> CSS file, untuk pendukung tampilan. Letakkan di direktori utama (mis: path-to-web-server\guestbook)

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.

Tidak ada komentar: