TUGAS MAKALAH PENGGUNAAN FRAMEWORK CODEIGNITER DAN PEMBUATAN APLIKASI BERBASIS WEB SEDERHANA

Oleh : UCIK NUR HIDAYATI 8113100046

POLITEKNIK KOTA MALANG TEKNIK INFORMATIKA TAHUN 2012

Kata Pengantar
Puji syukur penulis panjatkan ke hadirat Alloh SWT. bahwa penulis telah menyelesaikan tugas matakuliah pemrograman berbasis web dengan membahas Penggunaan Framework CodeIgniter 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 orang tua, sehingga kendala-kendala yang penulis hadapi teratasi. Oleh karena itu penulis mengucapkan terima kasih kepada : 1. Orang tua yang telah turut membantu, membimbing, dan mengatasi berbagai kesulitan sehinggah tugas ini selesai. 2. Kak sweety yang selalu sabar mengajari penulis buat menyelesaikan tugas makalah ini. 3. Teman-teman TIBers 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, 7 Agustus 2012

Penulis

DAFTAR ISI

Cover .......................................................................................................................................... Kata pengantar. .......................................................................................................................... BAB I Pendahuluan . ................................................................................................................. 1.1 Latar belakang. ..................................................................................................................... 1.2 Rumusan masalah ................................................................................................................ 1.3 Batasan masalah ................................................................................................................... 1.4 Tujuan .................................................................................................................................. BAB II Tinjauan Pustaka ........................................................................................................... 2.1 Pengertian framework .......................................................................................................... 2.2 Macam-macam framework .................................................................................................. 2.3 Pengertian codeigniter ......................................................................................................... BAB III Pembahasan ................................................................................................................. 3.1 Source code .......................................................................................................................... 3.2 Screenshoot .......................................................................................................................... BAB IV Penutup ........................................................................................................................ Kesimpulan ................................................................................................................................ Daftar pustaka ............................................................................................................................

1 2 4 4 4 4 4 5 5 5 6 8 8 29 30 30 31

BAB I PENDAHULUAN

1.1 Latar belakang masalah Seiring perkembangnya jaman, dalam menggunakan bahasa pemrograman PHP, seorang programmer cenderung lebih memilih menggunakan framework dan juga CSS yang sudah tersedia untuk meringankan mereka dalam membangun sebuah website.

1.2 Batasan masalah Program web sederhan ini dibangun menggunakan bahasa pemrograman PHP dan framework CodeIgniter_2.1.1 dan juga menggunakan Javascript library : jquery-1.3.2

1.3 Rumusan masalah Bagaimana membangun aplikasi web sederhana ini menggunakan framework CodeIgniter_2.1.1 dan juga jquery.

1.4 Tujuan Membangun aplikasi web sederhana menggunakan framework CodeIgniter_2.1.1 dan juga jquery.

BAB II TINJAUAN PUSTAKA 2.1 Pengertian framework Framework adalah kerangka kerja. Framework juga dapat diartikan

sebagai kumpulan script (terutama class dan function) yang dapat membantu developer/programmer dalam menangani berbagai masalah-masalah dalam

pemrograman seperti koneksi ke database, pemanggilan variable, file, dll sehinggah developer lebih focus dan lebih cepat membangun aplikasi. Secara sederhana bisa dijelaskan bahwa framework adalah kumpulan fungsi (libraries), maka seorang programmer tidak perlu lagi membuat fungsi-fungsi (biasanya disebut kumpulan library ) dari awal, programmer tinggal memanggil kumpulan library atau fungsi yang sudah ada didalam framework, tentunya cara menggunakan fungsi-fungsi itu sudah ditentukan oleh framework.

2.2 Macam-macam framework 1. Framework PHP CakePHP Code Igniter (CI) Symphony Zend Yii Kohana

2. Framework Javascript JQuery Mootools

3. Framework Ruby Ruby On Rails (ROR)

10 Framework PHP terbaik yang popular saat ini : 1. Yii 2. Codeigniter 3. CakePHP 4. Zend 5. Symphony 6. PHP Dev Shell 7. Prado 8. Akelos 9. QPHP 10. ZooP

2.3 Pengertian CodeIgniter CodeIgniter (CI) sebuah framework untuk programmer yang ingin membangun website dengan PHP. CI merupakan langkah cepat untuk membuat sebuah website daripada membangun sebuah website dengan alur koding yang biasa. Dengan mempraktekkan librarylibrary, alur pemrograman akan terstruktur dan logika bisnis/proses akan lebih mudah dimengerti oleh developer/programmer lain. Ci telah mempaketkan itu semua sehingga meminimalisirkan jumlah koding yang dibangun. Kelebihan dari CodeIgniter 1. Gratis 2. Berjalan di PHP versi 4 dan 5 3. Ringan dan cepat 4. Menggunakan Model, View, dan Controller (MVC) Model merupakan data pada aplikasi yang beroperasi. View berisi kode presentasi seperti HTML, CSS dan JavaScript Controller menafsirkan input dari user dan mengirimkan kepada model dan view. 5. Dokumentasi 6. Pustaka yang lengkap Kekurangan dari CodeIgniter
6

1. Tidak mendukung AJAX, dan ORM 2. Menyediakan dan memisahan file-file dalam MVC pattem, tapi masih memberikan kebebasan user untuk melanggar aturan MVC JQuery adalah sebuah library Javascript yang cepat dan ringkas yang mana dapat menyederhanakan document traversing, event handling, animating, dan Ajax interactions untuk pengembangan web secara cepat

BAB III PEMBAHASAN 3.1 Source code

Index.html
<!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>D'Power Of Love</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/arial.js"></script> <script type="text/javascript" src="js/cuf_run.js"></script> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/radius.js"></script> </head> <body> <!-- START PAGE SOURCE --> <div class="main"> <div class="header"> <div class="header_resize"> <div class="menu_nav">

<ul> <li class="active"><a href="index.html">Home</a></li> <li><a href="support.html">Support</a></li> <li><a href="about.html">About </a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="logo"> <h1><a href="index.html">D'Power<span>Of Love</span> <small>put your slogan here</small></a></h1> </div> <div class="clr"></div> </div> </div> <div class="content"> <div class="content_resize"> <div class="mainbar"> <div class="article"> <h2><span>Kata-Kata</span> Bijak</h2> <div class="clr"></div> <img src="images/img1.jpg" width="227" height="205" alt="" class="fl" />

<p> => Dalam hidup, akan selalu ada orang yg tak menyukaimu, namun itu bukan urusanmu. Lakukan apa yg kamu anggap benar dan ENJOY.</p> <p> => Kesalahan adalah pengalaman hidup, belajarlah darinya. Jangan mencoba tuk menjadi sempurna. Cobalah menjadi teladan bagi sesama.</p> <p> => Jangan pernah meremehkan kemampuanmu. Jika kamu menyadari betapa kuatnya pikiranmu, kamu tak akan pernah berpikir tuk menyerah. </p> <p class="spec"><a href="#" class="rm">Read more &raquo;</a></p> </div> <div class="article"> <h2><span>Cara membuat Hati</span> dan Pikiran Tenang</h2> <div class="clr"></div> <img src="images/img2.jpg" width="227" height="205" alt="" class="fl" /> <p><b>1. Pandai Bersyukur </b></p> <p>Kita harus sering melihat kondisi orang yang berada di bawah kita dan membatasi melihat oang-orang yang berada di atas Kita akan merasa cukup walaupun hidup sederhana apa akan lebih bermakna dibandingkan selalu merasa kurang.</p> kita.

adanya. Apa yang kita dapat

orang yang memiliki segunung harta tetapi

<p><b>2. Jangan terlalu Mengejar Cita-Cita Keduniawian </b></p> <p>Menghabiskan sebagian besar waktu demi mencari materi akan

membuat kita menyesal di kemudian hari. Gunakan sebagian untuk beramal, beribadah, sedekah, membangun kontribusi bagi lingkungan

waktu yang ada

keluarga yang bahagia, memberi

sosial masyarakat, dan lain sebagainya.</p>

<p><b>3. Bantu Orang Lain & Selalu Berbuat Kebaikan Serta Amal Shaleh </b></p> <p>Bangun suasana yang akrab dan kekeluargaan dengan saudara, dan orang-orang di lingkungan kita karena manusia
10

tetangga

adalah makhluk sosial.

Lingkungan sosial yang baik akan

membantu kita hidup saling tolong-menolong dan

satu sama lain, bergotong-royong, musyawarah untuk mufakat, saling menjaga, lain sebagainya.</p> <p><b>4. Manajemen Emosi</b></p> <p>Jaga emosi dan nafsu kita karena mereka dapat menghancurkan dan meninggalkan kita dalam penderitaan. Latih nafsu dan Jangan mudah terpancing emosi. Jadilah orang jahat/penjahat. Biarkan saja orang lain bilang apa/melakukan apa, karena dunia ujian dan persoalan.</p> <p><b>5. Hidup Sederhana </b></p> <p>Dengan hidup sederhana kita akan selalu merasa berkecukupan hidup tenang lahir batin. Hidup mewah dan gelamor butuh dan harus terus menjaga image dengan sederhana dan rendah diri kita materi dan

kita

emosi dengan puasa.

orang yang baik dan hindari menjadi

penuh dengan

dan

biaya yang tidak sedikit

banyak daya upaya. Dengan hidup

tidak akan mudah stres. Fokuslah ke kekayaan non menghargai

fisik (kecantikan/ketampanan) karena orang akan lebih

kita jika kita punya banyak kemampuan yang tidak tidak sombong.</p>

dimiliki orang lain tetapi kita

<p class="spec"><a href="#" class="rm">Read more &raquo;</a></p> </div> <p class="pages"><small>Page 1 of 2 &nbsp;&nbsp;&nbsp;</small>

<span>1</span> <a href="#">2</a> <a href="#">&raquo;</a></p> </div> <div class="sidebar"> <div class="searchform"> <form id="formsearch" name="formsearch" method="post" action="#"> <span>
11

<input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search our ste:" type="text" /> </span> <input name="button_search" src="images/search_btn.gif"

class="button_search" type="image" /> </form> </div> <div class="gadget"> <h2 class="star"><span>Sidebar</span> Menu</h2> <div class="clr"></div> <ul class="sb_menu"> <li><a href="#">Home</a></li> <li><a href="#">TemplateInfo</a></li> <li><a href="#">Style Demo</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Archives</a></li> </ul> </div> <div class="gadget">

<div class="clr"></div> </div> </div>

12

<div class="clr"></div> </div> </div> <div class="footer"> <div class="footer_resize"> <p class="lf">Copyright &copy; 2010 <a href="#">Ucheiyk N Hidayati</a> - All Rights Reserved</p> <p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.freewebsitetemplatez.com/">Free Website TemplateZ</a></p> <div class="clr"></div> </div> </div> </div> <!-- END PAGE SOURCE --> </body> </html>

Style.css @charset "utf-8"; body { margin:0;

13

padding:0; width:100%; color:#20293F; font:normal 12px/1.8em Arial, Helvetica, sans-serif; } html, .main { padding:0; margin:0; } .main { background:#fff url(images/header_bg.jpg) repeat-x center top; } .clr { clear:both; padding:0; margin:0; width:100%; font-size:0; line-height:0; } .logo { padding:0; float:left;
14

width:auto; } h1 { margin:0; padding:40px 0 40px 24px; float:left; color:#fff; font:normal 52px/1.2em Arial, Helvetica, sans-serif; letter-spacing:-4px; } h1 span { font-weight:bold; } h1 a, h1 a:hover { color:#fff; text-decoration:none; } h1 small { display:block; margin-top:-6px; padding:0 0 0 148px; font:normal 12px/1.2em Arial, Helvetica, sans-serif; letter-spacing:normal;
15

} h2 { font:normal 24px/1.5em Arial, Helvetica, sans-serif; padding:8px 0; margin:0 0 8px; color:#20293F; } p{ margin:8px 0; padding:0 0 8px 0; font:normal 12px/1.8em Arial, Helvetica, sans-serif; } p.spec { padding-bottom:16px; text-align:left; border-bottom:1px solid #dfdede; } p.infopost { padding:4px 8px; border:1px solid #e9e8e8; } a{ color:#30b0d5;
16

text-decoration:underline; } a.rm { } a.com { margin:0; padding:0; text-decoration:none; } a.com span { font-weight:bold; } .header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0; } .header { } .header_resize { margin:0 auto; padding:12px 0; width:970px;
17

} .menu_nav { margin:0; padding:52px 40px 0 0; float:right; height:29px; } .menu_nav ul { list-style:none; height:29px; } .menu_nav ul li { margin:0 12px 0 0; padding:0; float:left; } .menu_nav ul li a { display:block; margin:0; padding:4px 20px; color:#fff; text-decoration:none; font-size:12px;
18

} .menu_nav ul li.active a, .menu_nav ul li a:hover { background-color:#fff; color:#20293F; } .content_resize { margin:0 auto; padding:16px 0 24px; width:970px; } .content .mainbar { margin:0; padding:0; float:left; width:670px; } .content .mainbar img { border:1px solid #20293F; } .content .mainbar img.fl { margin:4px 16px 4px 0; float:left; }
19

.content .mainbar .article { margin:0 0 12px; padding:8px 24px 0; } .content .sidebar { padding:0; float:right; width:288px; } .content .sidebar .gadget { margin:0 0 12px; padding:8px 16px 8px 24px; } ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595; } ul.sb_menu li, ul.ex_menu li { margin:0; } ul.sb_menu li {
20

padding:4px 0; width:220px; } ul.ex_menu li { padding:4px 0; } ul.sb_menu li a, ul.ex_menu li a { color:#20293F; text-decoration:none; margin-left:-12px; padding-left:12px; } ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#20293F; font-weight:bold; } ul.sb_menu li a:hover { text-decoration:underline; } ul.ex_menu li a:hover { text-decoration:none; } .content p.pages {
21

padding:32px 24px 12px; font-size:11px; color:#20293F; text-align:right; } .content p.pages span, .content p.pages a:hover { padding:5px 10px; color:#fff; background-color:#30b0d5; border:1px solid #30b0d5; } .content p.pages a { padding:5px 10px; color:#20293F; background-color:#fff; border:1px solid #edebeb; text-decoration:none; } .content p.pages small { font-size:11px; float:left; } .content .mainbar .comment {
22

margin:0; padding:16px 0 0 0; } .content .mainbar .comment img.userpic { border:1px solid #dedede; margin:10px 16px 0 0; padding:0; float:left; } .fbg { background-color:#30b0d5; } .fbg_resize { margin:0 auto; width:922px; padding:24px; color:#fff; } .fbg .c2 a, .fbg .c3 a { margin:0; padding:2px 4px; color:#fff; text-decoration:underline;
23

} .fbg h2 { color:#fff; } .fbg img { margin:0 4px 0 0; padding:3px; background-color:#fff; border:1px solid #5b97a9; } .fbg .col { margin:0; float:left; } .fbg .c1 { padding:0 16px 0 0; width:266px; } .fbg .c2 { padding:0 16px; width:300px; } .fbg .c3 {
24

padding:0 0 0 16px; width:260px; } .footer { background:#282828 url(images/footer_bg.gif) repeat-x center top; } .footer_resize { margin:0 auto; padding:26px; width:922px; } .footer p { margin:0; padding:4px 0; line-height:normal; } .footer a { color:#959595; padding:inherit; text-decoration:underline; } .footer a:hover { text-decoration:none;
25

} .footer .lf { float:left; } .footer .rf { float:right; } ol { list-style:none; } ol li { display:block; clear:both; } ol li label { display:block; margin:0; padding:16px 0 0 0; } ol li input.text { width:480px; border:1px solid #c0c0c0; margin:2px 0;
26

padding:5px 2px; height:16px; background-color:#fff; } ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background-color:#fff; } ol li .send { margin:16px 0 0 0; } .searchform { float:right; } #formsearch { margin:0; height:36px; padding:10px 28px 40px 0; } #formsearch span {
27

display:block; margin:6px 0; padding:0; float:left; background:#fff url(images/search.gif) no-repeat top left; } #formsearch input.editbox_search { margin:0; padding:11px 6px 10px; float:left; width:181px; border:none; background:none; font:normal 12px/1.5em Arial, Helvetica, sans-serif; color:#a8acb2; } #formsearch input.button_search { margin:6px 0 0 0; padding:0; border:none; float:left; }

28

3.2 Contoh screenshoot

29

BAB IV PENUTUP KESIMPULAN CodeIgniter (CI) sebuah framework untuk programmer yang ingin membangun website dengan PHP. CI merupakan langkah cepat untuk membuat sebuah website daripada membangun sebuah website dengan alur koding yang biasa. Dengan mempraktekkan librarylibrary, alur pemrograman akan terstruktur dan logika bisnis/proses akan lebih mudah dimengerti oleh developer/programmer lain.

30

DAFTAR PUSTAKA

Memadukan CSS Template dengan Codeigniter | AnggyTrisnawan.com http://anggytrisnawan.com/blog/2011/12/01/memadukan-css-template-dengan-codeigniter/ Tutorial CodeIgniter : Membuat Template | Anggy Trisnawan.com http://anggytrisnawan.com/blog/2011/12/03/tutorial-codeigniter-membuat-template/ TheCorporation free CSS template | free CSS templates | free CSS http://www.free-css.com/free-css-templates/page144/thecorporation.php

31