TUGAS MAKALAH CI

(1)

1

TUGAS MAKALAH

PENGGUNAAN FRAMEWORK CODEIGNITER DAN PEMBUATAN

APLIKASI BERBASIS WEB SEDERHANA

Oleh :

UCIK NUR HIDAYATI

8113100046

POLITEKNIK KOTA MALANG

TEKNIK INFORMATIKA

(2)

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

(3)

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

(4)

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)

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

(6)

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

(7)

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)

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)

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>

(10)

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)

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)

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)

13 <div class="clr"></div> </div> </div> <div class="footer"> <div class="footer_resize">

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

 </body> </html> Style.css @charset "utf-8"; body { margin:0;

(14)

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)

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)

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 {

(17)

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)

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)

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)

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;

}

(21)

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)

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

(23)

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)

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)

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)

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)

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)

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)

29

(30)

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)

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