2012

MEMBUAT WEB MENGGUNAKAN FRAMEWORK SMARTY

Oleh : RATIH PUTRI SUNDOWO 8113100040

TEKNIK INFORMATIKA POLITEKNIK KOTA MALANG Tahun 2012

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

Page 2

FRAMEWORK SMARTY

DAFTAR ISI

COVER. ................................................................................................................. KATA PENGANTAR ............................................................................................ DAFTAR ISI . ......................................................................................................... BAB I PENDAHULUAN . ........................................................................................ 1.1 1.2 1.3 1.4 Latar Belakang ............................................................................................ Batasan Masalah. ....................................................................................... Rumusan Masalah...................................................................................... Tujuan Penulisan .........................................................................................

1 2 3 4 4 4 4 4

BAB II TINJAUAN PUSTAKA. ................................................................................ 2.1 2.2 2.3 2.4 2.5 2.6 Pengertian Framework. .............................................................................. Macam Macam Framework ..................................................................... Framework Smarty versi 3.1.7 .................................................................... Perangkat perangkat lunak yang dibuat menggunakan Smarty. .............. KeLebihan dan Kekurangan Framework Smarty. ....................................... Filosofi Smarty............................................................................................

5 5 5 6 6 7 8

BAB III PEMBAHASAN . ........................................................................................ 3.1 3.2 3.3 Smarty Template. ....................................................................................... Membuat Smarty Helloworld....................................................................... Membuat Tampilan Web.............................................................................

9 9 10 11

BAB IV PENUTUP . ............................................................................................... 4.1. Kesimpulan .....................................................................................................

24 24

DAFTAR PUSTAKA ...............................................................................................

25

Framework Smarty

Page 3

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

Page 4

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. f. Yii Kohana

g. Smarty 2. Framework Javascript : a. JQuery b. Mootools

Framework Smarty

Page 5

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

Page 6

FRAMEWORK SMARTY

2.5

Gallery Ozone PHP Framework TikiWiki XOOPS paFileDB ATK - Achievo ToolKit Zoop Framework for PHP Supersite CMScout

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

Page 7

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

Page 8

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

Page 9

FRAMEWORK SMARTY

3.2 Membuat Smarty Helloworld a. Buat file dengan nama test.tpl pada direktori template kemudian masukkan code berikut ini :
<html> <head> <title>{$title}</title> </head> <body> {$hello} </body> </html>

b. Buat file php dengan nama test.php pada direktori htdocs/app_smarty/smarty kemudian masukkan code 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'); ?>

c. Sekarang cobalah melalui browser Anda pada localhost/nama_direktori dimana Anda meletakkannya. Maka, Anda akan mendapatkan tampilan sebagai berikut :

Framework Smarty

Page 10

FRAMEWORK SMARTY

3.3 Membuat Tampilan Web a. Buat file index.php dengan script sebagai berikut :
<?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'); ?>

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>

Framework Smarty

Page 11

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

Page 12

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

Page 13

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="ev_box"> <a href="http://www.free-css.com/"><img src="{$design}images/pic4.jpg" border="0" alt="" class="ev" /></a> <br /> <b>Framework Smarty</b> </div> <div class="ev_box"> <a href="http://www.free-css.com/"><img src="{$design}images/pic5.jpg" border="0" alt="" class="ev" /></a> <br /> <b>Framework Smarty</b> </div> <div class="ev_box"> <a href="http://www.free-css.com/"><img src="{$design}images/pic6.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.freecss.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> <!-- end of main_container -->

Framework Smarty

Page 14

FRAMEWORK SMARTY

</body> </html>

c. Berikutnya

buat

file

css

dengan

nama

style.css

pada

direktory

smarty/template/photographer-folio dengan script berikut :

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

Page 15

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

Page 16

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

Page 17

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

Page 18

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

Page 19

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

Page 20

FRAMEWORK SMARTY

height: 16px; width: auto; display:block;padding:0 0 0 15px; margin:5px 10px 10px 0;color:#000;textalign: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;textalign: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

Page 21

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

smarty/template/photographer-folio dengan script berikut :

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=='norepeat')?'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);

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.

Framework Smarty

Page 22

FRAMEWORK SMARTY

f.

Selanjutnya silahkan jalankan melalui browser Anda, maka akan mendapati tampilan sebagai berikut :

Framework Smarty

Page 23

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

Page 24

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/SmartyTemplate-Engine-Tutorial-P849.html , 10 Agustus 2012

Framework Smarty

Page 25