Professional Documents
Culture Documents
Makalah Membuat Web Dengan Smarty Framework
Makalah Membuat Web Dengan Smarty Framework
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.
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
24 24
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)
Framework Smarty
Page 5
FRAMEWORK SMARTY
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
"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
Framework Smarty
Page 15
FRAMEWORK SMARTY
#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
/*---------------- 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
d. Berikutnya
buat
file
js
dengan
nama
unitpngfix.js
pada
direktory
path=elb.split('"');var
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
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