Post on 26-Jul-2015
description
1
TUGAS MAKALAH
PENGGUNAAN FRAMEWORK CODEIGNITER DAN PEMBUATAN
APLIKASI BERBASIS WEB SEDERHANA
Oleh :
UCIK NUR HIDAYATI
8113100046
POLITEKNIK KOTA MALANG
TEKNIK INFORMATIKA
TAHUN 2012
2
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 TIBer’s 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
3
DAFTAR ISI
Cover .......................................................................................................................................... 1
Kata pengantar. .......................................................................................................................... 2
BAB I Pendahuluan . ................................................................................................................. 4
1.1 Latar belakang. ..................................................................................................................... 4
1.2 Rumusan masalah ................................................................................................................ 4
1.3 Batasan masalah ................................................................................................................... 4
1.4 Tujuan .................................................................................................................................. 4
BAB II Tinjauan Pustaka ........................................................................................................... 5
2.1 Pengertian framework .......................................................................................................... 5
2.2 Macam-macam framework .................................................................................................. 5
2.3 Pengertian codeigniter ......................................................................................................... 6
BAB III Pembahasan ................................................................................................................. 8
3.1 Source code .......................................................................................................................... 8
3.2 Screenshoot .......................................................................................................................... 29
BAB IV Penutup ........................................................................................................................ 30
Kesimpulan ................................................................................................................................ 30
Daftar pustaka ............................................................................................................................ 31
4
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.
5
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)
6
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 library-
library, 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
7
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
8
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">
9
<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" />
10
<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 »</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.
Kita akan merasa cukup walaupun hidup sederhana apa adanya. Apa yang kita dapat
akan lebih bermakna dibandingkan orang yang memiliki segunung harta tetapi
selalu merasa kurang.</p>
<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 waktu yang ada
untuk beramal, beribadah, sedekah, membangun keluarga yang bahagia, memberi
kontribusi bagi lingkungan 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, tetangga
dan orang-orang di lingkungan kita karena manusia adalah makhluk sosial.
11
Lingkungan sosial yang baik akan membantu kita hidup saling tolong-menolong
satu sama lain, bergotong-royong, musyawarah untuk mufakat, saling menjaga, dan
lain sebagainya.</p>
<p><b>4. Manajemen Emosi</b></p>
<p>Jaga emosi dan nafsu kita karena mereka dapat menghancurkan kita
dan meninggalkan kita dalam penderitaan. Latih nafsu dan emosi dengan puasa.
Jangan mudah terpancing emosi. Jadilah orang yang baik dan hindari menjadi
orang jahat/penjahat.
Biarkan saja orang lain bilang apa/melakukan apa, karena dunia penuh dengan
ujian dan persoalan.</p>
<p><b>5. Hidup Sederhana </b></p>
<p>Dengan hidup sederhana kita akan selalu merasa berkecukupan dan
hidup tenang lahir batin. Hidup mewah dan gelamor butuh biaya yang tidak sedikit
dan harus terus menjaga image dengan banyak daya upaya. Dengan hidup
sederhana dan rendah diri kita tidak akan mudah stres. Fokuslah ke kekayaan non
materi dan fisik (kecantikan/ketampanan) karena orang akan lebih menghargai
kita jika kita punya banyak kemampuan yang tidak dimiliki orang lain tetapi kita
tidak sombong.</p>
<p class="spec"><a href="#" class="rm">Read more »</a></p>
</div>
<p class="pages"><small>Page 1 of 2 </small>
<span>1</span> <a href="#">2</a> <a href="#">»</a></p>
</div>
<div class="sidebar">
<div class="searchform">
<form id="formsearch" name="formsearch" method="post" action="#">
<span>
12
<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>
13
<div class="clr"></div>
</div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="lf">Copyright © 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;
14
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;
15
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;
16
}
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;
17
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;
18
}
.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;
19
}
.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;
}
20
.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 {
21
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 {
22
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 {
23
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;
24
}
.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 {
25
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;
26
}
.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;
27
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 {
28
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;
}
29
3.2 Contoh screenshoot
30
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 library-
library, alur pemrograman akan terstruktur dan logika bisnis/proses akan lebih mudah
dimengerti oleh developer/programmer lain.
31
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