TUGAS MAKALAH CI

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>



<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>


<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>


<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>


<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>

</div>

13


</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>

</div>

</div>



</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;


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;


letter-spacing:normal;

16

}

h2 {


padding:8px 0;

margin:0 0 8px;

color:#20293F;

}

p {

margin:8px 0;

padding:0 0 8px 0;


}

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;


}

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;


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;


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 {


}

ul.ex_menu li a:hover {


}

.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;


border:1px solid #edebeb;


}

.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;


24

}

.fbg h2 {

color:#fff;

}

.fbg img {

margin:0 4px 0 0;

padding:3px;


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;


}

.footer a:hover {


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;


}

ol li textarea {

width:480px;

border:1px solid #c0c0c0;

margin:2px 0;

padding:2px;


}

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;


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

http://anggytrisnawan.com/blog/2011/12/01/memadukan-css-template-dengan-codeigniter/

http://anggytrisnawan.com/blog/2011/12/03/tutorial-codeigniter-membuat-template/

http://www.free-css.com/free-css-templates/page144/thecorporation.php

TUGAS MAKALAH CI

Documents

Transcript of TUGAS MAKALAH CI