Makalah Membuat Web Dengan Smarty Framework
-
Upload
ratih-wibisono -
Category
Documents
-
view
672 -
download
14
Transcript of 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 Page 2
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 Page 3
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 Page 4
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 Page 5
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 Page 6
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 Page 7
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 Page 8
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 Page 9
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 Page 10
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 Page 11
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 Page 12
<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 Page 13
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 Page 14
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.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>
<!-- end of main_container -->
FRAMEWORK SMARTY
Framework Smarty Page 15
</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
Framework Smarty Page 16
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 Page 17
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 Page 18
/*------------------------------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 Page 19
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 Page 20
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 Page 21
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 Page 22
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 :
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 Page 23
f. Selanjutnya silahkan jalankan melalui browser Anda, maka akan mendapati tampilan
sebagai berikut :
FRAMEWORK SMARTY
Framework Smarty Page 24
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 Page 25
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