makalah membuat web dengan smarty framework

MEMBUAT WEB MENGGUNAKAN FRAMEWORK SMARTY

Oleh : RATIH PUTRI SUNDOWO 8113100040

2012

TEKNIK INFORMATIKA POLITEKNIK KOTA MALANG

Tahun 2012

FRAMEWORK SMARTY

Framework Smarty

KATA PENGANTAR

Puji syukur penulis panjatkan ke hadirat Tuhan Yang Maha Esa. Bahwasannya

penulis telah menyelesaikan tugas mata kuliah pemrograman berbasis web dengan

membahas Penggunaan Framework Smarty dalam Pembuatan Aplikasi Berbasis Web

Sederhana dalam bentuk makalah.

Dalam penyusunan tugas atau materi ini, tidak sedikit hambatan yang penulis

hadapi. Namun penulis menyadari bahwa kelancaran dalam penyusunan materi ini tidak lain

berkat bantuan, dorongan dan bimbingan dabri berbagai pihak, sehingga kendala - kendala

yang penulis hadapi dapat teratasi. Oleh karena itu penulis mengucapkan terima kasih

kepada :

1. Bapak dosen matakuliah pemrograman web, yang telah mengajarkan matakuliah ini

sehingga penulis dapat membuat dan menyelesaikan tugas ini.

2. Orang tua yang telah turut membantu, membimbing, dan mengatasi berbagai

kesulitan sehingga tugas ini selesai.

3. Teman dan kerabat yang memberikan petunjuk, kepada penulis sehingga penulis

termotivasi dan menyelesaikan tugas ini.

Semoga materi ini dapat bermanfaat dan menjadi sumbangan pemikiran bagi pihak

yang membutuhkan, khususnya bagi penulis sehingga tujuan yang diharapkan dapat

tercapai, Amiin.

Malang, 14 Agustus 2012

Penulis

FRAMEWORK SMARTY

Framework Smarty

DAFTAR ISI

COVER. ................................................................................................................. 1

KATA PENGANTAR ............................................................................................ 2

DAFTAR ISI . ......................................................................................................... 3

BAB I PENDAHULUAN . ........................................................................................ 4

1.1 Latar Belakang ............................................................................................ 4

1.2 Batasan Masalah. ....................................................................................... 4

1.3 Rumusan Masalah...................................................................................... 4

1.4 Tujuan Penulisan ......................................................................................... 4

BAB II TINJAUAN PUSTAKA. ................................................................................ 5

2.1 Pengertian Framework. .............................................................................. 5

2.2 Macam – Macam Framework ..................................................................... 5

2.3 Framework Smarty versi 3.1.7 .................................................................... 6

2.4 Perangkat – perangkat lunak yang dibuat menggunakan Smarty. .............. 6

2.5 KeLebihan dan Kekurangan Framework Smarty. ....................................... 7

2.6 Filosofi Smarty. ........................................................................................... 8

BAB III PEMBAHASAN . ........................................................................................ 9

3.1 Smarty Template. ....................................................................................... 9

3.2 Membuat Smarty Helloworld. ...................................................................... 10

3.3 Membuat Tampilan Web............................................................................. 11

BAB IV PENUTUP . ............................................................................................... 24

4.1. Kesimpulan ..................................................................................................... 24

DAFTAR PUSTAKA ............................................................................................... 25

FRAMEWORK SMARTY

Framework Smarty

BAB I

PENDAHULUAN

1.1 Latar Belakang

Pada akhir semester 4 telah dilakukan Ujian Akhis Semester untuk

matakuliah Pemrograman Basis Web dimana menhasilkan nilai yang masih kurang

dari ketentuan nilai yang ada. Sehingga diperlukannya perbaikan dengan jalan

membuat makalah mengenai Framework.

1.2 Batasan masalah

Adapun batasan masalah untuk membuat makalah ini yakni hanya sebatas

membahas mengenai penggunaan Framework Smarty pada pembuatan aplikasi

web.

1.3 Rumusan masalah

Rumusan dari pembuatan makalah ini antara lain :

1. Menjelaskan pengertian dari Framework Smarty.

2. Perangkat – perangkat lunak yang dibuat dengan menggunakan Smarty.

3. Kelebihan dan kekurangan Framework Smarty.

1.4 Tujuan penulisan

Adapun tujuan penulaisan makalah ini yakni :

1. Menginstall framework Smarty versi 3.1.7

2. Membangun program aplikasi web menggunakan framework Smarty versi 3.1.7

dan JQuery .

FRAMEWORK SMARTY

Framework Smarty

BAB II

TINJAUAN PUSTAKA

2.1 Pengertian Framework

Framework adalah kerangka kerja. Framework juga dapat diartikan sebagai

kumpulanscript (terutama class dan function) yang dapat membantu

developer/programmer dalam menangani berbagai masalah-masalah dalam

pemrograman seperti koneksi ke database, pemanggilan variabel, file,dll sehingga

developer lebih fokus dan lebih cepat membangun aplikasi. Bisa juga dikatakan

Framework adalah komponen pemrorgaman yang siap re-use kapan saja, sehingga

programmer tidak harus membuat skrip yang sama untuk tugas yang sama.

2.2 Macam – Macam Framework

1. Framework PHP :

a. CakePHP

b. CodeIgniter (CI)

c. Symphony

d. Zend

e. Yii

f. Kohana

g. Smarty

2. Framework Javascript :

a. JQuery

b. Mootools

FRAMEWORK SMARTY

Framework Smarty

3. Framework Ruby :

a. Ruby on Rails (ROR)

2.3 Framework Smarty versi 3.1.7

Smarty adalah template engine (mesin templat) yang ditulis dalam PHP.

Smarty memisahkan PHP dari HTML dan umumnya digunakan untuk menghasilkan

isi HTML yang dinamis dengan mengizinkan peletakan tag khusus Smarty di dalam

sebuah dokumen. Tag-tag yang dapat digunakan termasuk (namun tidak hanya

berupa) variabel seperti {$variable}, dan sejumlah operator logis dan loop.

Smarty paling sering digunakan oleh aplikasi-aplikasi berbasiskan PHP untuk

memisahkan “busoness logic” ("logika bisnis") dari presentasi. Hasilnya adalah

pengkodean yang lebih ramping dan lebih mudah diubah. Sebagai contoh,

penampilan (atau skin; "kulit") sebuah aplikasi berbasiskan Smarty biasanya dapat

diubah dengan mudah tanpa perlu melakukan modifikasi terhadap business logic

atau kode PHP.

Smarty mengizinkan pemrograman templat dengan

Regular expression

Foreach

If

nl2br

dan banyak fitur lainnya.Template engine lainnya juga mendukung perintah -

perintah ini dalam templat.

2.4 Perangkat – perangkat lunak yang dibuat menggunakan Smarty

Dalam berbagai aplikasi yang berkembang saat ini sudah pasti ada perangkat

– perangkat lunak yang dibuat dengan menggunkan framework smarty ini,

diantaranya yakni :

bBlog

FRAMEWORK SMARTY

Framework Smarty

Gallery

Ozone PHP Framework

TikiWiki

XOOPS

paFileDB

ATK - Achievo ToolKit

Zoop Framework for PHP

Supersite

CMScout

2.5 KeLebihan dan Kekurangan Framework Smarty

Yang menjadi kelebihan dari pada framework ini adalah :

1. Salah satu proyek resmi PHP, sehingga cukup terjamin dari segi support.

2. Cache, smarty memiliki fitur cache dimana halaman template yg sudah

dicompile hanya akan dicompile ulang jika ada perubahan pada source

atau dengan modus force compile.

Yang menjadi kelemahan dari pada framework ini adalah :

1. Untuk dapat mengunakan Smarty, pengguna harus belajar sintaks baru

yg telah diatur Smarty.

2. Smarty salah satu template yg keluar jalur. Template engine dibuat dengan

maksud untuk memisahkan view logik

dengan process / bussines logik. Ya, Smarty sukses untuk tujuan

tersebut. Tapi Smarty gagal karena telah membuat suatu sintak baru yg

kemudian diterjemahkan ke sintak PHP, sehingga mekanismenya Smarty >

PHP > C, sehingga 3x proses pengcompile-an dilakukan.

FRAMEWORK SMARTY

Framework Smarty

2.6 Filosofi Smarty

Desain Smarty adalah sebagian besar didorong oleh tujuan-tujuan:

Memperjelas pemisahan presentasi dari kode aplikasi

PHP backend, frontend template Smarty

PHP pujian, tidak menggantinya

cepat pengembangan / penyebaran untuk programmer dan desainer

cepat dan mudah untuk mempertahankan

sintaks mudah dimengerti, tidak ada pengetahuan tentang PHP yang diperlukan

fleksibilitas untuk pengembangan kustom

keamanan: isolasi dari PHP

gratis, open source

FRAMEWORK SMARTY

Framework Smarty

BAB III

PEMBAHASAN

3.1 Smarty Template

a. Siapkan direktori untuk praktek, misal htdoc/app_smarty/.

b. Download berkas Template Smarty di situs www.smarty.net. Selesai mendownload

extrak file kompresi smarty dan rename kemudian copy direktori framework tersebut

dalam direktori praktek Anda tadi. Sehingga Anda mendapatkan misalnya,

htdocs/app_smarty/smarty.

c. Buat dua folder dengan nama “template” dan “template_c”. Sehingga Anda

mendapat struktur direktori sebagai berikut :

Template berisi beberapa macam design yang Anda inginkan.

Smarty_lib berisi class – class smarty, hasil download smarty di folder libs/.

Template_c berisi file hasil compile dari smarty engine.

FRAMEWORK SMARTY

Framework Smarty

3.2 Membuat Smarty Helloworld

a. Buat file dengan nama “test.tpl” pada direktori template kemudian masukkan code

berikut ini :

b. Buat file php dengan nama “test.php” pada direktori htdocs/app_smarty/smarty

kemudian masukkan code berikut :

c. Sekarang cobalah melalui browser Anda pada localhost/nama_direktori dimana Anda

meletakkannya. Maka, Anda akan mendapatkan tampilan sebagai berikut :

<?php

require 'Smarty/libs/Smarty.class.php';

$smarty = new Smarty;

$smarty->assign('title','Hello World');

$smarty->assign('hello','Hello World, this is my first Smarty!');

$smarty->display('test.tpl');

?>

<html>

<head>

<title>{$title}</title>

</head>

<body>

{$hello}

</body>

</html>

FRAMEWORK SMARTY

Framework Smarty

3.3 Membuat Tampilan Web

a. Buat file index.php dengan script sebagai berikut :

b. Lalu buat file html dengan nama index.html pada direktori

smarty/template/photographer-folio dengan script berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Framework Smarty</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<link rel="stylesheet" type="text/css" href="{$design}style.css" />

<script type="text/javascript" src="unitpngfix.js"></script>

</head>

<body>

<div id="main_container">

<div class="me"><img src="{$design}images/me.png" alt="" /></div>

<?php

require_once 'smarty_lib/Smarty.class.php';

$smarty = new Smarty();

$smarty->template_dir = 'template/photographer-folio/';

$smarty->compile_dir = 'template_c/';

$smarty->assign('design', $smarty->template_dir);

$smarty->caching = false;

$smarty->clear_compiled_tpl();

$smarty->display('index.html');

?>

FRAMEWORK SMARTY

Framework Smarty

<div id="header">

<div id="header_logo"><img src="{$design}images/logo.png" border="0" alt="" /></div>

<div id="latest">

<div class="title">Gambar Smarty</div>

<img src="{$design}images/p1.jpg" width="112" height="74" class="right" alt="" /> Beberapa

Framework bahkan sudah mengembangkannya lebih jauh lagi menjadi sebuah orientasi programming

yang sedang booming saat ini, apalagi kalau bukan MVC, Model View dan Controller, yang sudah

kebanyakan diapdosi oleh Framework PHP sebut saja Code Igniter, Yii Framework, dan Zend

Framework.<br />

<b> Agustus 2012</b> </div>

<div class="menu">

<ul>

<li><a href="http://www.free-css.com/">home</a></li>

<li><a href="http://www.free-css.com/">about</a></li>

<li><a href="http://www.free-css.com/">download</a></li>

<li><a href="http://www.free-css.com/">content</a></li>

</ul>

</div>

</div>

<div id="center_content">

<div class="center_left">

<div class="title">Tentang Smarty</div>

<p> Template Smarty Mesin Tutorial Langkah demi Langkah. Ketika melakukan pengembangan

aplikasi web, penting untuk membuat pemisahan antara desain tampilan (presentasi) bekerja dan

menciptakan aplikasi. Cukup, Anda dapat membuat konten sebelum tanpa harus mempertimbangkan

tampilan (lapisan presentasi). Atau, Anda dapat merancang tampilan tanpa perawatan dari kode

aplikasi. Ini adalah peran yang Smarty Template ingin bermain. <br />

<br />

FRAMEWORK SMARTY

Framework Smarty

Pada awalnya, Smarty ingin bertindak sebagai 'Mesin Template'. Namun, sekarang mereka

mengklaim bahwa tidak hanya sebagai mesin template. Smarty adalah kerangka template / presentasi.

Kata Kerangka mengacu pada smarty tidak lagi tag sederhana dari mesin template. Dia telah

difokuskan pada bagaimana membantu Anda membuat aplikasi pertumbuhan kinerja tinggi, skalabilitas,

keamanan dan masa depan. <br />

<br />

Jadi, Apa itu Smarty?<br />

Kerangka yang berkonsentrasi pada pemisahan lapisan presentasi<br /><br />

Mengapa menggunakan Smarty?<br />

* Kerangka kerja yang memungkinkan Anda untuk memisahkan antara pekerjaan

merancang dan menulis kode aplikasi<br />

* Cepat dan tidak menyusahkan pengembangan<br />

</p>

</div>

<div class="center_right">

<div class="title">Yang Dimuat Smarty</div>

<ul class="list">

<li><a href="http://www.free-css.com/">Instalasi smarty </a></li>

<li><a href="http://www.free-css.com/">Aplikasi Pertama Smarty </a></li>

<li><a href="http://www.free-css.com/">Dasar Smarty </a></li>

<li><a href="http://www.free-css.com/">Array Index </a></li>

<li><a href="http://www.free-css.com/">Objek Smarty </a></li>

<li><a href="http://www.free-css.com/">File Config Smarty </a></li>

</ul>

<div class="title">Berita Saya</div>

<p> Salah satu yang khas dari Smarty adalah mereka memisahkan antara Bussines Logic dengan

Bussiness View, that's it...!. Ini bermanfaat sekali dalam membatu software house, freelance dan web

developer dalam mempercepat dan mempermudah dalam membuat dan mengembangkan website, jadi

ketika programmer applikasi internet dan web dapat memisahkan pekerjaan tampilan dan desain

FRAMEWORK SMARTY

Framework Smarty

kepada orang lain tanpa harus terhenti dalam mengembangkan aplikasinya begitu juga Web designer

dan Graphics Desain mereka tetap fokus dalam hasil desain tanpa harus pusing bagaimana nanti

mengawinkan/mencocokan dengan aplikasi web dan struktur fungsi yang akan atau sudah jadi. </p>

</div>

<div class="center_wide">

<div class="title">Gambar Tentang Smarty</div>

<div class="ev_box"> <a href="http://www.free-css.com/"><img src="{$design}images/pic3.jpg"

border="0" alt="" class="ev" /></a> <br />

<b>Framework Smarty</b> </div>










<div class="clear"></div>

</div>

</div>

<div id="footer">

<div class="left_footer"><a href="http://www.free-css.com/">home</a>| <a href="http://www.free-

css.com/">about</a> |<a href="http://www.free-css.com/">content</a></div>

<div class="right_footer"><a href="http://csstemplatesmarket.com" ><img

src="{$design}images/csstemplatesmarket.gif" border="0" alt="" /></a> </div>

</div>

</div>

FRAMEWORK SMARTY

Framework Smarty

</body>

</html>

c. Berikutnya buat file css dengan nama style.css pada direktory


body

{

background:url(images/bg.jpg) no-repeat center top #b8b6bb;

padding:0; font-family:arial, sans-serif; font-size:11px;

margin:0px auto auto auto;

color:#333333;

}

p{

padding:0px;

text-align:justify;

margin:0px;

line-height:17px;

}

.clear{

clear:both;

}

a{

text-decoration:underline;

}

img.right{

float:right;

padding:3px;

FRAMEWORK SMARTY

Framework Smarty

border:1px #8c3426 solid;

}

img.ev{

padding:3px;

border:1px #E459EF solid;

}

#main_container{

width:950px;

height:auto;

margin:auto;

padding:0px;

position:relative;

z-index:100;

background-color:#FFFFFF;

}

.me{

position:absolute;

top:120px;

right:40px;

z-index:999;

}

#header{

width:950px;

height:175px;

background:url(images/top_bg.jpg) no-repeat center;

FRAMEWORK SMARTY

Framework Smarty

margin:0px;

padding:0px;

}

#header_logo{

width:245px;

height:61px;

float:left;

padding:35px 0 0 20px;

}

.title{

width: auto;

padding:2px 0 5px 0;

font-size:14px;

color:#E459EF;

font-weight:bold;

}

#latest {

width:400px;

height:auto;

float:left;

padding:0px 15px 0px 10px ;

border-left:1px #8c3426 dotted;

border-right:1px #8c3426 dotted;

margin:20px 0 0 30px;

}

FRAMEWORK SMARTY

Framework Smarty

/*------------------------------main content-----------------------*/

#main_content{

width:975px;

margin:auto;

clear:both;

background-color:#FFFFFF;

}

/*---------------- menu tab----------------------*/

.menu{

clear:both;

width:auto;

height:23px;

padding:22px 0 0 30px;

}

.menu ul{

list-style:none;

padding:0px;

margin:0px;

}

.menu ul li{

display:inline;

}

.menu ul li a{

float:left;

border:none;

FRAMEWORK SMARTY

Framework Smarty

padding-right:18px;

text-decoration:none;

color:#000000;

font-size:14px;

font-style:italic;

font-weight:bold;

}

.menu ul li a:hover{

color:#E459EF;

text-decoration:line-through;

}

/*---------------center_content-------*/

#center_content{

width:950px;

height:auto;

clear:both;

padding-top:25px;

background:url(images/center_bg.gif) no-repeat top center;

}

.center_left{

width:400px;

float:left;

padding:20px;

}

.center_right{

FRAMEWORK SMARTY

Framework Smarty

width:200px;

float:left;

padding:20px 10px 10px 10px;

}

.center_wide{

width:auto;

height:auto;

clear:both;

padding:15px;

}

.ev_box{

width:199px;

height:164px;

float:left;

text-align:center;

padding:20px 12px 20px 12px;

}

/*----------------------list-------------------------*/

ul.list{

list-style:none;padding:0px;margin:0px;

}

ul.list li{

list-style:none;width: auto;height: auto;padding:0px;

}

ul.list li a{

FRAMEWORK SMARTY

Framework Smarty

height: 16px; width: auto; display:block;padding:0 0 0 15px; margin:5px 10px 10px 0;color:#000;text-

align:left;font-size:11px;

background:url(images/list_arrow.gif) no-repeat left;text-decoration:none;

}

ul.list li.services a{

height: 16px; width: auto; display:block;padding:0 0 0 15px; margin:5px 10px 10px 0;color:#000;text-

align:left;font-size:12px;

background:url(images/list_arrow.gif) no-repeat left;text-decoration:underline;

}

ul.list li a:hover{

height: 16px; width: auto;text-decoration:underline;color: #000;

}

/*-------------------footer------------------------*/

#footer{

width:950px;

height:71px;

clear:both;

color:#E459EF;

background:url(images/footer.gif) no-repeat center #fff;

}

.left_footer{

float:left;

padding:15px;

}

#footer a{

color:#E459EF;

FRAMEWORK SMARTY

Framework Smarty

padding:0 5px 0 5px;

}

.right_footer{

float:right;

padding:20px 20px 0 0 ;

}

d. Berikutnya buat file js dengan nama unitpngfix.js pada direktory


e. Jangan lupa untuk membuat direktori images untuk menyimpan semua gambar –

gambar yang berhubungan dengan script diatas. Letakkan direktori images tersebut

didalam direktory smarty/template/photographer-folio.

var clear="images/clear.gif" //path to clear.gif

pngfix=function(){var els=document.getElementsByTagName('*');var i_p=/\.png/i;var i=els.length;while (i--

>0){var el=els[i];var es=el.style;if(el.src&&el.src.match(i_p)&&es.filter==''){el.height = el.height;el.width =

el.width;es.filter =

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+el.src+"',sizingMethod='crop')";el.src =

clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(i_p)){var path=elb.split('"');var

rep=(el.currentStyle.backgroundRepeat=='no-

repeat')?'crop':'scale';es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path[1]+"',

sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage="none";}}if

(el.currentStyle.position!='absolute' && !es.filter && !el.tagName.match(/(body|html|script)/gi))

es.position="relative";if (es.filter&&el.currentStyle.position=="relative") es.position="static";}}

window.attachEvent('onload',pngfix);

FRAMEWORK SMARTY

Framework Smarty

f. Selanjutnya silahkan jalankan melalui browser Anda, maka akan mendapati tampilan

sebagai berikut :

FRAMEWORK SMARTY

Framework Smarty

BAB IV

PENUTUP

4.1 Kesimpulan

Smarty dapat dikatakan setengah framework, di mana pada level template,

smarty sudah tidak ada lagi coding yang susah. Semua logic terdapat di model, dan

diarahkan oleh controller.

Di smarty, tidak ada lagi coding PHP di dalamnya, hanya „Expression Language‟

sederhana. (ciri-ciri framework bukan berarti tidak ada coding PHP di Layer View

(memang ada yang menggunakan bahasa template seperti smarty, tapi tidak

semua), hanya saja, sudah menggunakan code yang sederhana, dan fungsi2

bawaan framework itu sendiri yang umumnya sangat bermanfaat untuk

mempercepat pengerjaan aplikasi-red).

FRAMEWORK SMARTY

Framework Smarty

DAFTAR PUSTAKA

Arif Laksito “Mengubah Tampilan Web Dengan Cepat”. From

http://arif.staff.amikom.ac.id/blog/2011/10/mengubah-tampilan-web-dg-cepat/ , 13 Agustus 2012.

PHP and Web Development Tutorial. From http://www.phpeveryday.com/articles/Smarty-

Template-Engine-Tutorial-P849.html , 10 Agustus 2012

http://arif.staff.amikom.ac.id/blog/2011/10/mengubah-tampilan-web-dg-cepat/

http://www.phpeveryday.com/articles/Smarty-Template-Engine-Tutorial-P849.html

http://www.phpeveryday.com/articles/Smarty-Template-Engine-Tutorial-P849.html

makalah membuat web dengan smarty framework

Documents