Modul Pelatihan Ci 2014-2-4

1
1.Berkenalan dengan CodeIgniter

1.1.Apa itu CodeIgniter
CodeIgniter adalah sebuah web framework yang dikembangkan oleh Rick Ellis dari Ellis Lab. CodeIgniter dirancang untuk menjadi sebuah web framework yang ringan dan mudah untuk digunakan. Bahkan pengakuan dari Rasmus Lerdorf, pencipta bahasa pemrograman ! , mengatakan bah"a CodeIgniter merupakan web framework mudah dan handal. #ebelum mencoba CodeIgniter, perlu diketahui istilah web framework itu sendiri. $enurut $icrosoft Computer %ictionary, web adalah sekumpulan dokumen yang saling terhubung dalam sistem hypertext yang penggunanya akan menjelajahi web melalui halaman beranda. #edangkan framework adalah desain struktur dasar yang dapatd digundakan kembali (reusebale) yang terdiri dari abstract class dan concrete class di pemrograman berorientasi objek. $enurut dokumentasi CodeIgniter, CodeIgniter merupakan toolkit bagi orang yang ingin membangun aplikasi web menggunakan ! . &ujuannya adalah membuat pengembangan proyek menjadi lebidh cepat dibandingkan dengan menulis kode dari a"al ' scratch(. CodeIgniter menyediakan kumpulan library untuk tugas ) tugas yang sering dilakukan 'commonly needed task( dan sangat mudah undtuk mengakses library yang tersedia di CodeIgniter. %engan menggunakan CodeIgniter, kita cukup fokus pada pengembangan projek dan meminimalisir jumlah kode yang akan ditulis. #ebagai web framework yang populer yang menggunakan bahasa pemrograman CodeIgniter mempunyai berbagai keunggulan seperti yang disebutkan di dokumentasinya* 1. ! ,
Free, karena berada diba"ah lisensi open source mirip +pache,B#%, kita dapat melakukan apapun dengan CodeIgniter. Lisensi lengkapnya dapat dilihat di halaman dokumentasi
2. Light Weight, sistem inti CodeIgniter memerlukan library yang sedikit. Berbeda sekali dengan frame"ork lainnya yang membutuhkan banyak sumber daya tambahan. Library tambahan akan digunakan ketika re-uest secara dinamis, membuat sistem yang dibangun menjadi efisien dan cukup cepat . Fast, menurut dokumentasi, performa yang dimiliki CodeIgniter terbukti cepat setelah dibandingkan dengan "eb frame"ork lainnya !. $enggunakan kaidah $./.C, %engan menggunakan $odel./ie".Controller, kita dapat memisahkan bagian logic dan presentation dari aplikasi yang kita bangun. !al ini tentu sangat cocok dan bagus untuk proyek yang memfokuskan desainer fokus pada template file dan programmer fokus pada pembangunan logic dari aplikasi yang dibangun ". $enghasilkan 0RL yang bersih, 0RL yang dihasilkan oleh CodeIgniter bersih dan ramah terhadap mesin pencari. CodeIgniter menggunakan pendekatan segment#based dibandingkan dengan $uery string yang biasa digunakan oleh programmer yang tidak menggunakan web framework. Berikut adalah contoh 0RL yang dihasilkan CodeIgniter*
cs.upi.edu/news/post/123
elatihan CodeIgniter 1213 oleh Lab Basis %ata Ilmu 4omputer 5akultas endidikan $atematika dan Ilmu engetahuan +lam, 0ni6ersitas endidikan Indonesia %okumen ini disusun oleh Rid"an 5adjar #eptian, Ilmu 4omputer 1227
1 %. &acks a &unch, CodeIgniter hadir dengan berbagai library yang akan membantu tugas ) tugas di pengembangan web yang sudah umum dan sering dilakukan seperti mengakses database, mengirim email, 6alidasi data dari form, mengelola session, manipulasi gambar, bekerja dengan 8$L.R C dan masih banyak lagi '. (xtensible, kita dapat menambahkan library atau helper yang kita ciptakan sendiri ke dalam CodeIgniter. #elain itu kita dapat juga menambahkan fitur le"at class extension atau system hooks. ). *horoughly +ocumented, hampir semua fitur, library, dan helper yang ada di CodeIgniter telah terdokumentasi dengan lengkap dan tersusun dengan baik. 4etika mendapatkan unduhan CodeIgniter, dokumentasinya sudah tersedia dan siap digunakan ,. $empunyai komunitas yang ramah, komunitas CodeIgniter sangat ramah dan siap membantu pengguna CodeIgniter pemula atau yang sudah mahir. 4omunitasnya dapat ditemui di * http*,,codeigniter.com,forums, 0ntuk mendukung pengembangan aplikasi yang kokoh, Code Igniter memiliki fitur ) fitur seperti berikut* 1. -odel#.iew#/ontroller 0ased 1ystem 1. ! 3 /ompatible 9. #angat ringan 3. 5itur lengkap untuk beberapa engine database. :. 2cti3e 4ecord ;. 5orm dan 6alidasi data <. 4eamanan dan 8## filtering ). 1ession -anagement 7. (mail 1ending /lass. 1upports 2ttachments, !&$L,&e=t email, multiple protocols 'sendmail, #$& , dan $ail( dan lainnya 12. 5mage -anipulation Library 'cropping, resi6ing, rotating, dsb.(. $endukung >%, Image$agick, dan ?et B$ 11. File 7ploading /lass 12. F*& /lass 1 . Locali6ation 1!. &agination 1". +ata (ncryption 1%. 0enchmarking 1'. Full &age /aching 1). (rror Logging 17. 2pplication &rofiling 28. 1caffolding
9 21. /alendaring /lass 22. 7ser 2gent /lass 2 . 9ip (ncoding /lass 2!. *emplate (ngine /lass 2". *rackback /lass 1;. 8$L.R C Library 2'. 7nit testing class 1@. 1earch#engine friendly 0RLs 17. 0RI routing yang fleksibel 92. $endukung hooks, class extension dan plugins 91. ustaka helper yang lengkap
1.2.Cara Kerja CodeIgniter

0ntuk melengkapi pemahaman mengenai CodeIgniter, berikut terdapat sebuah diagram yang menjelaskan bagaimana CodeIgniter bekerja*
:ambar 1.1 /ara ;er<a /ode5gniter
Berikut adalah penjelasan cara kerja Code Igniter* 1. inde=.php bertindak sebagai controller terdepan, dan menginisialisasi resource yang diperlukan untuk menjalankan Code Igniter 1. 4outer memeriksa !&& re$uest untuk menentukan apa yang harus dikerjakan 9. Aika cache file ada, maka akan ditampilkan langsung, dengan mele"ati eksekusi normal sistem 3. #ebelum memuat controller, !&& re$uest akan memeriksa apa yang disubmit user dan memfilternya untuk keamanan :. /ontroller memuat model, core libraries, plugin, helper, dan resource lainnya untuk memproses permintaan tertentu
3 ;. .iew ditampilkan di bro"ser sesuai proses yang dikerjakan controller. Aika caching dijalankan, 3iew akan di.cache terlebih dahulu agar dapat ditampilkan di re$uest selanjutnya
1.3.Cara Kerja MVC
:ambar 1.2 /ara ;er<a -./ (1umber = http=>>killer#web# de3elopment.com>section>1> ) CodeIgniter menggunakan pendekatan -odel#.iew#/ontroller, yang bertujuan untuk memisahkan logika dan presentasi. 4onsep ini mempunyai keunggulan dimana desainer dapat bekerja pada template file, sehingga redundansi kode presentasi dapat diperkecil. Berikut adalah konsep -odel# .iew#/ontroller yang diterapkan di CodeIgniter* 1. -odel menggambarkan struktur data. Biasanya kelas model akan berisi fungsi yang digunakan untuk mengambil, menambah, dan memperbaharui informasi yang ada di database. 1. .iew adalah informasi yang diperlihatkan kepada user. /ie" adalah halaman "eb yang terdiri dari !&$L, C## dan Aa6ascript, tapi pada Code Igniter, 6ie" dapat juga sebagai potongan halaman seperti header atau footer. Bahkan dapat juga halaman R## atau tipe halaman lainnya. 9. /ontroller adalah perantara $odel, /ie", dan resource lainya yang dibutuhkan untuk menangani !&& re-uest dan menghasilkan halaman "eb. &api pada CodeIgniter, de3eloper juga dapat mengabaikan pemakaian $odel dan cukup menggunakan Controller dan /ie".
1.4. a!tar Istila" di CodeIgniter

#ebelum menjelajah CodeIgniter lebih dalam, ada beberapa istilah yang akan selalu hadir selama pelatihan berlangsung. Berikut adalah daftar istilah yang akan hadir selama pelatihan* 1. -odel, class ! yang dirancang untuk bekerja dengan informasi dari database 2. /ontroller, inti aplikasi yang menentukan penanganan !&& re$uest . .iew, halaman web seperti header? footer? sidebar dan lainnya yang ditanamkan di halaman web yang lainnya. .iew tidak pernah dipanggil secara langsung. .iew harus dipanggil dari controller !. Library, class yang berisi fungsi ) fungsi untuk penyelesaian kasus tetentu ". @elper, pembantu tugas untuk kategori tertentu yang terdiri dari kumpulan function %. +ri3er, library khusus yang mempunyai class induk dan beberapa class turunan yang dapat digunakan untuk kasus terrtentu
1.#.$eralatan %ang iperlukan

0ntuk membangun aplikasi web yang menggunakan CodeIgniter tentunya kita membutuhkan bahasa pemrograman ! 3 atau ! :. #etelah ! 3 atau ! : terpenuhi, kita dapat menggunakan berbagai alat yang sudah dikenal luas. +lat ) alat tersebut terbagi kedalam beberapa kategori yang akan menangani perannya masing ) masing. Berikut adalah alat ) alat dasar yang dapat digunakan untuk membangun aplikasi web menggunakan CodeIgniter* 1. *ext (ditor, digunakan untuk menulis source code ! dan lainnya serta untuk menyunting file konfigurasi. #ebagai contoh, ?otepadBB, #ublime &e=t, >eany, 4ate, 4omodo Edit, +ksi I%E, ?etbeans 1. Web 1er3er, agar aplikasi web yang dibangun dapat diakses oleh pengguna. #ebagai contoh +pache, Lighttpd, II#, ?gin= 9. +atabase -anagement 1ystem, menyimpan informasi yang dibutuhkan oleh aplikasi yang dibangun. #ebagai contoh $y#CL, #CLite9, $#.#CL #er6er, Dracle, ostgre#CL 3. 5nternet 0rowser, digunakan untuk menampilkan aplikasi dan berinteraksi dengan antarmukanya. #ebagai contoh, Internet E=plorer, Dpera, >oogle Chrome, $oEilla 5irefo= :. -ail 1er3er, memberikan layanan e.mail kepada user dan mengintegrasikannya dengan aplikasi web yang akan dibangun. #ebagai contoh, #-uirrel$ail, +rgo#oft, RoundCube, >$aild ;. %5 /reator, digunakan untuk menghasilkan file dalam bentuk %5Lib, 5 %5, %5. #ebagai contoh,
<. +atabase 0rowser, digunakan untuk melihat database secara grafikal. #ebagai contoh, ! $y+dmin, $y#CLBro"ser, Chi6e, #CLite9 $anager, g+dmin, #CL #er6er Bro"ser, Dracle +pe= @. #istem Dperasi, landasan untuk mengembangkan aplikasi web sebelum diluncurkan di ser3er. #ebagai contoh, Findo"s <, Findo"s 8 , 0buntu, 5edora, #lack"are, BlankDn,
; I>D# ?usantara, 5reeB#% 7. %an berbagai alat lainnya yang dapat digunakan oleh ! atau memiliki interoperabilitas terhadap ! %alam praktiknya, terdapat juga paket ) paket yang menyertakan web ser3er? database management system, beserta database browser dalam satu paket. #eperti 8+$ , F+$ , atau L+$ yang cukup sekali install, kita sudah dapat menggunakan web ser3er, database management system, database browser, dan fungsional ser3er lainnya. 0ntuk praktikum kita dari a"al hingga akhir, akan digunakan CodeIgniter 6ersi 1.1.3, paket 8+$ 'terdiri dari +pache Web 1er3er, $y#CL +atabase -anagement 1ystem, dan ! $y+dmin +atabase 0rowser(, internet browser 5irefo= atau >oogle Chrome, text editor seperti ?otepadBB atau >eany, dan sistem operasi Findo"s <.
<
2.Me&ulai CodeIgniter
2.1.Instalasi CodeIgniter
&entunya untuk membuat aplikasi web dengan CodeIgniter, kita harus mengenal cara instalasinya terlebih dahulu. Berikut adalah cara untuk instalasi CodeIgniter di Findo"s <* 1. unduh CodeIgniter dari link berikut * http*,,ellislab.com,codeigniter,do"nload 2. kemudian ekstrak bundelan CodeIgniter'2.1.4 di tempat unduhan +nda . copy hasil ekstraksi ke folder C*,=ampp,htdocs atau direktori =ampp di mesin +nda !. ubah namanya menjadi pelati"an(asdat ". nyalakan +pache 'web ser3er( dan $y#CL 'database management relationship( melalui 8+$ Control anel %. akses direktori tersebut le"at browser dengan 0RL * http*,,localhost,pelatihanbasdat '. Aika berhasil akan muncul tampilan seperti berikut*
:ambar 2.1 /ode5gniter saat pertama kali di install
). #elamat +nda berhasil melakukan instalasi CodeIgniter
2.2.Mengenal )truktur irektori CodeIgniter

%i CodeIgniter terdapat hirarki yang dikepalai oleh tiga folder utama, yaitu * application* s%ste&* dan user'guide. Folder application adalah tempat dimana programmer aplikasi web yang menggunakan CodeIgniter, akan menyusun aplikasinya. Berikut adalah peranan folder application di CodeIgniter*
@ 1. menentukan halaman error 1. membangun controller 9. membangun model 3. membangun 3iews :. konfigurasi aplikasi web yang dibangun ;. membangun library sendiri <. membangun helper sendiri Folder s%ste& adalah tempat dimana programmer aplikasi web yang menggunakan CodeIgniter, akan menyusun aplikasinya. Berikut adalah peranan folder s%ste& di CodeIgniter* 1. menyimpan library inti CodeIgniter di folder core 2. menyimpan library dan dri3er untuk database di folder data(ase . menyimpan font yang dapat digunakan oleh keseluruhan aplikasi web secara default di folder !ont !. menyimpan kumpulan helper yang dapat digunakan untuk membantu menyelesaikan tugas ) tugas tertentu di folder "elpers ". menyimpan fitur bahasa yang disimpan di folder language %. menyimpan berbagai library lainnya yang digunakan untuk pengembangan aplikasi web di folder li(raries Folder user'guide adalah tempat dimana programmer aplikasi web yang menggunakan CodeIgniter, akan menyusun aplikasinya. Berikut adalah peranan folder user'guide di CodeIgniter* 1. Berisi file dokumentasi pengenalan CodeIgniter 1. Berisi file dokumentasi tentang pembahasan fitur ) fitur umum yang dimiliki CodeIgniter :ambar 2.2 1truktur +irektori /ode5gniter 9. Berisi file dokumentasi tentang penggunaan library yang terdapat di CodeIgniter 3. Berisi file dokumentasi tentang penggunaan
7 helper yang terdapat di CodeIgniter :. Berisi file dokumentasi tentang penggunaan dri3er yang terdapat di CodeIgniter
2.3.Mengu(a" +a&pilan Awal CodeIgniter

#ebagai percobaan kita akan mencoba mengubah halaman a"al CodeIgniter, untuk melihat bagaimana CodeIgniter bekerja. #iapkanlah *ext (ditor fa6orit +nda yang akan digunakan untuk menyunting beberapa source code yang terdapat di CodeIgniter. #ebelum menyunting 3iew welco&e'&essage.p"p. 4ita harus mengubah ,con!ig-.(ase'url./ yang berada di application 01 con!ig 01 con!ig.p"p dari http*,,""".e=ample.com menjadi http*,,localhost,pelatihanbasdat . !al tersebut dilakukan agar nama domain yang digunakan dapat digunakan di seluruh bagian kode program yang ada di CodeIgniter. Berikut adalah langkah ) langkah untuk mengubah tampilan halaman a"al CodeIgniter. Buka *ext (ditor yang sering +nda gunakan. Cari file welco&e'&essage.p"p yang terdapat di direktori pelati"an(asdat01application012iews. 4emudian buka file tersebut menggunakan *ext (ditor? 4emudian +nda cari bagian source code seperti pada listing berikut:
:ambar 2. -engubah ;ode welcomeAmessage.php
........................................................................
Gdi6 idHIcontainerIJ Gh1JFelcome to CodeIgniterKG,h1J Gdi6 idHIbodyIJ GpJ&he page you are looking at is being generated dynamically by CodeIgniter.G,pJ GpJIf you "ould like to edit this page youLll find it located at*G,pJ GcodeJapplication,6ie"s,"elcomeMmessage.phpG,codeJ GpJ&he corresponding controller for this page is found at*G,pJ GcodeJapplication,controllers,"elcome.phpG,codeJ GpJIf you are e=ploring CodeIgniter for the 6ery first time, you should start by reading the Ga hrefHIuserMguide,IJ0ser >uideG,aJ.G,pJ G,di6J Gp classHIfooterIJ age rendered in GstrongJNelapsedMtimeOG,strongJ secondsG,pJ G,di6J
12 ........................................................................
ada kode yang ditandai dedndgan "arna kuning, kita ubah tulisan PFelcome to CodeIgniterKQ menjadi P#elamat %atang di elatihan Basis %ata 1213Q, yang akhirnya source code diatas berubah menjadi seperti berikut ini*
........................................................................ Gdi6 idHIcontainerIJ Gh1J#elamat %atang di elatihan Basis %ata 1213G,h1J Gdi6 idHIbodyIJ GpJ&he page you are looking at is being generated dynamically by CodeIgniter.G,pJ GpJIf you "ould like to edit this page youLll find it located at*G,pJ GcodeJapplication,6ie"s,"elcomeMmessage.phpG,codeJ GpJ&he corresponding controller for this page is found at*G,pJ GcodeJapplication,controllers,"elcome.phpG,codeJ GpJIf you are e=ploring CodeIgniter for the 6ery first time, you should start by reading the Ga hrefHIuserMguide,IJ0ser >uideG,aJ.G,pJ G,di6J Gp classHIfooterIJ age rendered in GstrongJNelapsedMtimeOG,strongJ secondsG,pJ G,di6J
........................................................................
!asil dari pengubahan kode diatas akan menjadi seperti tampilan berikut ini*
:ambar 2.! @alaman Welcome -essage yang 0erhasil +iubah
11 Bagaimanakah halaman diatas muncul R !alaman diatas muncul karena kita memanggil sebuah controller yang bernama welco&e. /ontroller ini terdapat di pelati"an (asdat 01 application 01 controllers 01 welco&e.p"p . %i dalam file ini welco&e.p"p terdapat source code seperti berikut*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class Felcome e=tends CIMController N ,TT T Inde= age for this controller. T T $aps to the follo"ing 0RL T http*,,e=ample.com,inde=.php,"elcome T . or . T http*,,e=ample.com,inde=.php,"elcome,inde= T . or . T #ince this controller is set as the default controller in T config,routes.php, itLs displayed at http*,,e=ample.com, T T #o any other public methods not prefi=ed "ith an underscore "ill T map to ,inde=.php,"elcome,GmethodMnameJ T Usee http*,,codeigniter.com,userMguide,general,urls.html T, public function inde='( N Vthis.Jload.J6ie"'L"elcomeMmessageL(S O O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
$ari kita simak bagian kode yang ditandai oleh "arna kuning diatas* 1. class 3elco&e e4tends CI'Controller N .. O, merupakan controller di CodeIgniter yang direpresentasikan dalam sebuah class. /lass ini dibangun untuk mengelompokkan fungsional web dalam yang akan diakses melalui 0RL. #etiap controller memiliki !unction yang me"akili cabang dari controller sebagai 0RI utama. erintah e4tends digunakan untuk memanggil semua fungsional controller CodeIgniter. Istilahnya adalah di"ariskan atau diturunkan 'inherit) dalam teori pemrograman berorientasi objek. %i CodeIgniter, dapat dibuat banyak controller tergantung kebutuhan sistem yang akan dibangun. $isal di dalam controller welco&e terdapat sebuah !unction yang bernama li"at'in!o56. $aka ketika kita memanggil li"at'in!o56 di controller welco&e akan menjadi *
http*,,pelatihanbasdat,inde=.php,"elcome,lihatMinfo
11 1. pu(lic !unction inde4 56 7 8 , merupakan cara untuk membuat sub 0RI dari sebuah controller. Aika sub 0RI tersebut bernama inde4'( maka ketika sub 0RI tersebut diakses tidak perlu ditulis langsung seperti pada contoh sebelumnnya di poin no 1. Aika mempunyai nama selain inde456 misalnya li"at'in!o'( maka ketika memanggil sub 0RI tersebut, harus ditulis secara jelas. %i dalam sebuah !unction di controller +nda dapat menentukan logika dari aplikasi +nda. #ebagai contoh, +nda dapat menampilkan halaman tertentu, atau menampilkan jumlah mahasis"a yang mengontrak mata kuliah basis data 9. ,t"is01load012iew5.welco&e'&essage.6, perintah ini digunakan untuk menampilkan halaman web dari 3iew tertentu. arameter welco&e'&essage merupakan 3ie" yang akan ditampilkan ke halaman web ketika user meminta re$uest terhadap 0RL tersebut. .ie" ini terdapat di application 01 2iews 01 welco&e'&essage.p"p
2.4.Me&(uat Function Baru di Controller

#ekarang kita akan membuat function baru di contoller welco&e. Function tersebut adalah li"at'in!o yang akan menampilkan informasi seputar pelatihan basis data. %engan menggunakan text editor fa6orit +nda, sunting welco&e.p"p di application01controllers kemudian tambahkan kode berikut setelah function inde456. Berikut potongan kode yang harus ditambahkan* ................................................................................
public function lihatMinfo'( N echo IGheadJGtitleJ elatihan Code Igniter 1213G,titleJG,headJIS echo IGh1J elatihan Code Igniter 1213G,h1JIS echo IGh9J resented by Lab Basis %ata Ilmu 4omputer 0 IG,h9JIS echo ICodeIgniter merupakan salah satu GiJ"eb frame"orkG,iJ ! yang sangat mudah dan menarik.IS echo I#aya menghadiri ini untuk mulai mengenal dan mempelajari CodeIgniterIS O
................................................................................
%i dalam function li"at'in!o56, hanya terdapat kode yang mencetak dokumen !&$L melalui perintah ec"o yang dimiliki oleh ! . #etelah menambahkan kode diatas, akseslah function tersebut melalui 0RL berikut*
http*,,pelatihanbasdat,inde=.php,"elcome,lihatMinfo Aika berhasil, kode diatas akan menampilkan tampilan seperti berikut*
19
:ambar 2." *ampilan Lihat 5nfo
2.5.Me&(uat Function Baru %ang Mena&pilkan View +erpisa" di Controller

4onsepnya hampir sama dengan subbab sebelumnya. !anya saja kode 3iew yang akan ditampilkan di file terpisah kemudian file tersebut dimuat di controller. 4ita akan membuat sebuah function yang menampilkan biodata. #ebagai contoh berikut ini terdapat f ile yang berisi biodata fiktif seorang mahasis"a ilmu komputer. File tersebut berisi kode seperti berikut ini*
GK%DC&W E htmlJ Ghtml langHIenIJ GheadJ GtitleJBiodatakuG,titleJ G,headJ GbodyJ Gh1J#upeno RapopoG,h1J Gh9JIlmu 4omputer 0 I 1212G,h9J GpJ 4ota * Bandung Gbr ,J &anggal Lahir * 92 5ebruari 1772 Gbr ,J !obi * ?goding, ?gegenjreng >itar, ?gegesek Biola Gbr ,J &ools 5a6orit * CodeIgniter, %jango, Lib>d= G,pJ G,bodyJ G,htmlJ
#impan file diatas di application 01 2iews dengan nama (iodata.p"p. 4emudian di controller welco&e tambahkan potongan kode berikut untuk menampilkan 3iew biodata yang telah ditulis. Berikut kode di controller untuk menampilkan 3iew biodata*
................................................................................
13
public function lihatMbiodata'( N Vthis.Jload.J6ie"'LbiodataL(S O
................................................................................
%i dalam function li"at'(iodata56, hanya terdapat kode yang menampilkan 3iew biodata dengan menggunakan perintah load02iew yang tersedia di CodeIgniter. #etelah menambahkan kode diatas, akseslah function tersebut melalui 0RL berikut*
http*,,pelatihanbasdat,inde=.php,"elcome,lihatMbiodata Aika berhasil, kode diatas akan menampilkan tampilan seperti berikut*
:ambar 2.% *ampilan .iew 0iodata
2.6.Mena&(a"kan Argu&en pada Function di Controller

ada subbab sebelumnya, kita hanya membuat function yang tidak menggunakan argumen. dapat kita lihat pada li"at'in!o56 tidak ada argumen yang dapat dile"atkan. 0ntuk itu kita akan mencoba membuat function yang mempunyai argumen. %iasumsikan kita akan membuat sebuah function yang bernama ju&la"'angka'(. Function ini mempunyai dua masukan yaitu Vangka1 dan Vangka1. 4emudian tempatkan function tersebut di controller welco&e. Berikut adalah potongan
1: kode ju&la"'angka56* ................................................................................

public function jumlahMangka'Vangka1, Vangka1( N if 'isset'Vangka1( XX isset'Vangka1((N echo Iangka ke . 1 * Vangka1 Gbr ,JIS echo Iangka ke . 1 * Vangka1 Gbr ,JIS Vhasil H Vangka1 B Vangka1S echo Ihasil penjumlahan * VhasilIS O else N echo I+nda tidak memasukkan argumen kedalam function jumlah angkaIS O O
................................................................................
anggil function tersebut melalui 0RL berikut*
http*,,pelatihanbasdat,inde=.php,"elcome,jumlahMangka,12,12 Aika berhasil akan tampil halaman seperti berikut ini*
:ambar 2.' *ampilan .iew Bumlah 2ngka Bagaimanakah hal diatas bekerja R Coba perhatikan 0RL diatas* 1. welco&e adalah controller yang diakses oleh user 1. ju&la"'angka adalah function yang terdapat di controller welco&e yang memiliki
1; argumen Vangka1 dan Vangka1 9. 12 adalah nilai untuk Vangka1 3. 12 adalah nilai untuk Vangka1 $enurut dokumentasi CodeIgniter, jika terdapat 0RI segment lebih dari dua. $aka 0RI segment yang ketiga dan seterusnya adalah argumen bagi function yang diakses oleh user. %alam kasus ini adalah function ju&la"'angka56 menerima dua argumen yaitu 12 dan 12. Bagaimanakah jika argumen yang dile"atkan tidak sesuai R. Berikut adalah beberapa contoh kasus jika argumen tidak dile"atkan sesuai dengan banyaknya argumen yang dibutuhkan*
:ambar 2.) *ampilan .iew Bumlah 2ngka 1aat ;elebihan 2rgumen
:ambar 2., *ampilan .iew Bumlah 2ngka 1aat *idak 2da 2rgumen
1<
:ambar 2.18 *ampilan .iew Bumlah 2ngka 1aat 2rgumen yang *erpenuhi hanya 1atu 2rgumen
:ambar 2.11 *ampilan .iew Bumlah 2nkga 1aat 2rgumen yang *erpenuhi yang 1alah 1atunya bukan 2ngka
1@
3.Mengenal Controller di CodeIgniter 9e(i" :au"

3.1.Me&(uat Controller Baru
+pabila tadi kita hanya menyunting controller welco&e yang sudah tersedia di CodeIgniter, sekarang kita akan mencoba untuk membuat controller baru yang bernama calculator. /ontroller tersebut digunakan untuk menampilkan form kalkulator dan menampilkan hasil perhitungan yang ditentukan oleh user. ertama, buatlah controller baru di folder application 01 controllers dengan nama calculator. %i dalam controller ini terdapat tiga function yang akan ditulis, pertama adalah constructor yang berfungsi untuk memuat helper dan library, kedua adalah function inde4 yang digunakan untuk menampilkan form kalkulator, dan yang ketiga adalah function untuk memproses perhitungan yang diinginkan oleh user. #ebelum menyelesaikannya, mari kita salin function yang pertama dan kedua. Berikut adalah kode sumber function inde4 dan constructor*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class Calculator e=tends CIMController N public function MMconstruct'( N parent**MMconstruct'(S Vthis.Jload.Jhelper'LurlL(S Vthis.Jload.Jlibrary'LinputL(S O public function inde='( N Vthis.Jload.J6ie"'LformMhitungL(S O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
4emudian setelah kita menyalin source code diatas, sekarang kita buat 3iew !or&'"itung di application ; 2iews yang akan ditampilkan ketika controller calculator diakses oleh user. Berikut adalah source code !or&'"itung yang akan digunakan oleh controller calculator*
GhtmlJ GheadJ GtitleJ4alkulator CIG,titleJ

17
G,headJ GbodyJ Gh1J4alkulator CIG,h1J Gform actionHIGRphp echo siteMurl'Lcalculator,hasilMhitungL(SRJI methodHI D#&IJ Ginput typeHIte=tI nameHIangka1I,J Gbr ,JGbr,J Ginput typeHIte=tI nameHIangka1I,J Gbr ,JGbr,J Gselect nameHIpilih.hitungIJ Goption 6alueHIBIJBG,optionJ Goption 6alueHI.IJ.G,optionJ Goption 6alueHITIJTG,optionJ Goption 6alueHI,IJ,G,optionJ G,selectJGbr,JGbr,J Ginput typeHIsubmitI 6alueHI!itungI ,J G,formJ G,bodyJ G,htmlJ
.iew diatas menerima dua masukan yaitu angka1 dan angka2. 4emudian user akan memilih operasi yang disediakan oleh calculator. 4emudian masukan tersebut dikirim ke function "asil'"itung di controller calculator. 0ntuk melihat form diatas akses 3iew tersebut melalui 0RL berikut * http*,,pelatihanbasdat,inde=.php,calculator
#etelah +nda mengakses 0RL diatas, tampilan pada gambar 9.1 disamping akan tampak pada browser +nda. %engan demikian tinggal menulis function "asil'"itung56. ada function tersebut akan terjadi proses penangkapan nilai ) nilai dari form, penentuan proses perhitungan sesuai yang ditentukan oleh user, membungkus hasil perhitungan, kemudian menampilkannya di 3iew "asil'"itung. #ebelum menulis source code 3iew "asil'"itung, mari kita tulis dulu source code dari function "asil'"itung56. 1ource code tersebut adalah sebagai berikut* :ambar .1 *angkapan Layar /ontroller /alculator
12
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class Calculator e=tends CIMController N ................................................................................................ public function hasilMhitung'(N ,, mengecek masukan dari form Vangka1 H Vthis.Jinput.Jpost'Langka1L(S Vangka1 H Vthis.Jinput.Jpost'Langka1L(S VpilihMhitung H Vthis.Jinput.Jpost'Lpilih.hitungL(S VhasilMhitung H 2S ,, mengecek proses perhitungan yang diminta if 'VpilihMhitung HH IBI(N VhasilMhitung H Vangka1 B Vangka1S O else if 'VpilihMhitung HH I.I(N VhasilMhitung H Vangka1 . Vangka1S O else if 'VpilihMhitung HH ITI(N VhasilMhitung H Vangka1 T Vangka1S O else if 'VpilihMhitung HH I,I(N VhasilMhitung H Vangka1 , Vangka1S O ,, membungkus semua data perhitungan untuk ditampilkan di 6ie" VdataYLangka1LZ H Vangka1S VdataYLangka1LZ H Vangka1S VdataYLpilihMhitungLZ H VpilihMhitungS VdataYLhasilMhitungLZ H VhasilMhitungS ,, menampilkan hasil Vthis.Jload.J6ie"'LhasilMhitungL, Vdata(S O O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
#edangkan untuk source code 3iew "asil'"itung adalah sebagai berikut*
Gh1J !asil perhitungan G,h1J Gh9J GRphp echo Vangka1.I VpilihMhitung I.Vangka1.I H I.VhasilMhitungRJ G,h9J Ga hrefHIGRphp echo siteMurl'Lcalculator,L(SRJIJGG 4embali menghitungG,aJ
11 .iew diatas menampilkan hasil perhitungan dan menu untuk kembali menghitung. Berikut adalah hasil tangkapan layar dari 3iew "asil'"itung*
:ambar .2 *angkapan Layar .iew Form @itung ;etika +iberikan -asukan
:ambar . *angkapan Layar .iew @asil @itung
11
4.Mengenal Create <ead =pdate elete di CodeIgniter

4.1.Me&(uat ata(ase Agenda
%alam membangun sebuah aplikasi tentu kaidah create? read? update? delete 'CR0%( merupakan sebuah ke"ajiban dasar yang tentunya diperlukan juga di aplikasi web. %engan kaidah tersebut user dapat memberikan masukan data baru, melihat data, memperbaharui data, atau menghapus salah satu data. 0ntuk membuat aplikasi tersebut, tentu salah satu hal yang dibutuhkan adalah ketersediaan storage untuk menyimpan perubahan data. 1torage tersebut dapat berupa file atau database yang siap menampung perubahan data yang dipengaruhi oleh user. %alam praktikum kali ini dibutuhkan $y#CL sebagai sarana penyimpanan data yang akan digunakan oleh user. 4ita akan membuat sebuah aplikasi yang mencatat agenda. 4ita dapat mengisikan agenda baru, memperbaharui agenda yang sudah ada, melihat daftar agenda yang pernah dicatat, kemudian menghapus agenda yang sudah terle"at atau yang sudah tidak diperlukan. Bagaimanapun sebelum membuat tabel, tentu harus membuat database terlebih dahulu. 4ita namai database yang akan digunakan adalah pelati"an(asdat. %i halaman muka ! $y+dmin ketikkan nama tersebut diba"ah field Create new data(ase, kemudian tekan tombol Create untuk membuat database yang diinginkan.
:ambar !.1 -embuat +atabase #aat ini kita hanya selesai membuat database saja, tabel yang akan digunakan oleh aplikasi web yang akan kita gunakan adalah tabel agenda. 0ntuk membuatnya klik terlebih dahulu database yang telah dibuat di panel sebelah kiri halaman muka jika baru masuk ke ! $y+dmin, atau dapat meneruskan proses sehabis pembuatan database jika belum keluar dari halaman ! $y+dmin. 0ntuk itu ketikkan nama tabel yaitu, agenda, dan jumlah kolom atau field yang dibutuhkan. 0ntuk kasus ini diperlukan tiga buah kolom pada tabel agenda.
:ambar !.2 -embuat *abel 2genda

19 4emudian +nda akan diba"a ke halaman untuk mengisi kolom sesuai kolom yang dibutuhkan. ada fase ini kita akan membuat tiga buah field yaitu id'agenda, na&a, keterangan. 4etiga field tersebut mempunyai spesifikasi tersendiri. Field id'agenda memiliki type int* dianggap sebagai primary key, dan bersifat auto increment. Field na&a memiliki type 2arc"ar dan memiliki length 122. Field keterangan memiliki type 2arc"ar dan memiliki length 288. erhatikan gambar diba"ah ini*
:ambar !. *angkapan Layar ;etika -engisikan Field di *abel 2genda #etelah selesai mengisikan field yang dibutuhkan, tekan tombol )a2e yang berada di ba"ah form pengisian field C field tabel*
:ambar !.! *angkapan Layar *ombol 1a3e yang @arus +itekan ;etika 1elesai -engisikan Field
Aika berhasil, ! $y+dmin akan menampilkan hasil tabel yang telah berhasil dibuat. #etelah tabel selesai dibuat, +nda dapat mengisikan data ) data yang dibutuhkan sebagai data a"al, atau membangun aplikasi terlebih dahulu, kemudian mengisikan data le"at aplikasi web yang +nda bangun. Berikut adalah tangkapan layar dari tabel yang berhasil dibuat*
13
:ambar !." *angkapan Layar dari *abel 2genda yang 0erhasil +ibuat Aangan lupa untuk menambahkan data dummy pada tabel tersebut karena kita akan mencoba untuk menampilkan data yang ada di dalam tabel agenda. Isilah kira ) kira 9 [ : data pada tabel tersebut.
4.2.Kon!igurasi ata(ase di CodeIgniter

+khirnya database yang kita bangun untuk pelatihan ini berhasil dan tabel untuk aplikasi agenda yang akan kita bangun pun sudah berhasil dibuat. &api untuk mengaksesnya le"at CodeIgniter, ada beberapa langkah yang harus dilakukan terlebih dahulu. 4ita harus mengkonfigurasi database yang akan kita akses le"at CodeIgniter le"at file data(ase.p"p yang berada di application 01 con!ig. 4onfigurasi yang akan digunakan dalam pelatihan ini adalah* .............................................................................. X X &he Vacti6eMrecord 6ariables lets you determine "hether or not to load X the acti6e record class T, Vacti6eMgroup H LdefaultLS Vacti6eMrecord H &R0ES VdbYLdefaultLZYLhostnameLZ H LlocalhostLS VdbYLdefaultLZYLusernameLZ H LrootLS VdbYLdefaultLZYLpass"ordLZ H LLS VdbYLdefaultLZYLdatabaseLZ H LpelatihanbasdatLS VdbYLdefaultLZYLdbdri6erLZ H Lmys-lLS VdbYLdefaultLZYLdbprefi=LZ H LLS VdbYLdefaultLZYLpconnectLZ H &R0ES VdbYLdefaultLZYLdbMdebugLZ H &R0ES VdbYLdefaultLZYLcacheMonLZ H 5+L#ES
1: VdbYLdefaultLZYLcachedirLZ H LLS VdbYLdefaultLZYLcharMsetLZ H Lutf@LS VdbYLdefaultLZYLdbcollatLZ H Lutf@MgeneralMciLS VdbYLdefaultLZYLs"apMpreLZ H LLS VdbYLdefaultLZYLautoinitLZ H &R0ES VdbYLdefaultLZYLstrictonLZ H 5+L#ES ,T End of file database.php T, ,T Location* .,application,config,database.php T,
4emudian setelah mengkonfigurasi database, kita harus menambahkan library database di autoload.p"p yang berlokasi di application 01 con!ig . !al ini dilakukan agar library data(ase selalu di load dimanapun di controller yang ada di CodeIgniter '&entunya jika semua controller memerlukan database(. Berikut cara menambahkan library data(ase kedalam file autoload.p"p* ................................................................................ ,T X ................................................................... X +uto.load Libraries X ................................................................... X &hese are the classes located in the system,libraries folder X or in your application,libraries folder. X X rototype* X X VautoloadYLlibrariesLZ H array'LdatabaseL, LsessionL, L=mlrpcL(S T, VautoloadYLlibrariesLZ H array'LdatabaseL(S ................................................................................
?ah, seperti itulah cara konfigurasi database di CodeIgniter, sampai fase ini kita belum dapat menggunakan database untuk dipanggil di controller. 4ita harus membuat model terlebih dahulu yang akan dipergunakan sebagai perantara ketika mengakses database.
4.3.Me&(uat Model di CodeIgniter

-odel dipergunakan untk mengakses database. %engan menggunakan model? pembuat aplikasi web tidak akan mencampur adukkan kode ) kode untuk database dan logika bisnis yang digunakan dalam aplikasi web. %engan demikian ketika terjadi perubahan kode untuk mengakses database perubahan pada logika bisnis dapat dicegah seminimal mungkin.
1; #ebuah model di CodeIgniter, biasanya merepresentasikan satu tabel di database. %alam kasus ini karena hanya tabel agenda yang digunakan berarti model yang akan kita buat adalah agenda'&odel.p"p. Biasanya didalam sebuah model terdapat bagian kode untuk mengambil semua data dari tabel, mengambil salah satu baris data, memperbaharui data di tabel, menghapus data di tabel, dan menambahan data baru. %i CodeIgniter, kita dapat menggunakan sebuah cara yang dinamakan +cti6e Record untuk mengakses database. Bentuknya adalah function yang siap pakai ketika CIM$odel digunakan dalam inheritance kedalam model yang kita buat. Aadi tidak hanya menggunakan $uery yang biasa saja, dengan +cti6e Record kita dapat membuat proses akses ke database lebih independen terhadap berbagai database engine dibandingkan $uery biasa. 4arena setiap $uery biasa memiliki sintaks yang unik terhadap database engine yang menyediakan $uery tersebut. #ingkatnya +cti6e Record membuat aplikasi web +nda dapat beradaptasi dengan database manapun. 0ntuk melihat contoh nyatanya mari kita lihat isi file agenda'&odel berikut ini*
GRphp class +gendaMmodel e=tends CIM$odel N function MMconstruct'(N parent**MMconstruct'(S O function insertMagenda'Vdata(N Vthis.Jdb.Jinsert'LagendaL, Vdata(S O function selectMall'(N Vthis.Jdb.Jselect'LTL(S Vthis.Jdb.Jfrom'LagendaL(S Vthis.Jdb.JorderMby'LdateMmodifiedL, LdescL(S return Vthis.Jdb.Jget'(S O function selectMbyMid'VidMagenda(N Vthis.Jdb.Jselect'LTL(S Vthis.Jdb.Jfrom'LagendaL(S Vthis.Jdb.J"here'LidMagendaL, VidMagenda(S return Vthis.Jdb.Jget'(S O function updateMagenda'VidMagenda, Vdata(N Vthis.Jdb.J"here'LidMagendaL, VidMagenda(S Vthis.Jdb.Jupdate'LagendaL, Vdata(S O function deleteMagenda'VidMagenda(N Vthis.Jdb.J"here'LidMagendaL, VidMagenda(S Vthis.Jdb.Jdelete'LagendaL(S O
1<
,, function yang digunakan oleh paginationsample function selectMallMpaging'VlimitHarray'((N Vthis.Jdb.Jselect'LTL(S Vthis.Jdb.Jfrom'LagendaL(S Vthis.Jdb.JorderMby'LdateMmodifiedL, LdescL(S if 'Vlimit KH ?0LL( Vthis.Jdb.Jlimit'VlimitYLperpageLZ, VlimitYLoffsetLZ(S return Vthis.Jdb.Jget'(S O O RJ
#alin source code diatas kemudian simpan di application01&odels01da!taragenda dengan nama agenda'&odel.p"p. #ebelumnya buat terlebih dahulu folder da!taragenda di dalam folder application 01 &odels. Lebih lengkapnya untuk melihat +cti6e Record atau pembahasan tentang model di CodeIgniter, dapat +nda lihat di dokumentasi CodeIgniter bagian -odel di :eneral *opics dan bagian +atabase /lass di +ri3er 4eference.
4.4.Me&(uat Controller untuk Aplikasi Agenda

+khirnya kita telah menulis model agenda'&odel yang akan dipergunakan di controller da!taragenda. %i dalam controller da!taragenda, kita akan menampilkan halaman daftar agenda, menampilkan form tambah agenda baru, menampilkan form editing agenda, proses menghapus agenda, proses penambahan agenda, dan proses pengubahan agenda. #ekarang kita akan membuat controller da!taragenda dengan terlebih dahulu menampilkan daftar agenda yang ada di dalam tabel. /ontroller da!taragenda ini membutuhkan helper url dan library input. #erta membutuhkan model agenda'&odel karena akan mengakses tabel agenda di controller da!taragenda ini.
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class %aftaragenda e=tends CIMController N public function MMconstruct'( N parent**MMconstruct'(S Vthis.Jload.Jhelper'LurlL(S Vthis.Jload.Jlibrary'LinputL(S Vthis.Jload.Jmodel'Ldaftaragenda,agendaMmodelL(S O
1@
,, bagian pengelolaan agenda public function inde='( N VdataYLdaftarMagendaLZ H Vthis.JagendaMmodel.JselectMall'(.Jresult'(S Vthis.Jload.J6ie"'Ldaftaragenda,daftarMagendaL, Vdata(S O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
#eperti yang bisa +nda lihat, untuk menggunakan model di controller pertama kali +nda harus memuat model agenda'&odel terlebih dahulu. Baru setelah itu +nda dapat menggunakan agenda'&odel di function manapun di dalam controller. %alam kasus ini agenda'&odel dipanggil di function inde4. 4emudian karena kita ingin mengambil semua isi tabel agenda maka function select'all56 yang terdapat di agenda'&odel dipanggil. 0ntuk proses akhirnya jika +nda ingin mendapatkan semua data maka dapat digunakan result56 , tapi nilai keluarannya akan sebagai array ob<ect. #edangkan jika hanya ingin satu baris saja digunakan row56, tapi nilai keluarannya akan sebagai ob<ect. 4emudian hasil keluaran tersebut disimpan di array ,data dengan naman da!tar'agenda. 4emudian le"atkan ke 3iew da!tar'agenda untuk menampilkan agenda yang ada di tabel agenda. #ebelumnya buat dulu folder da!taragenda di dalam application 01 2iews. #impan 3iew diba"ah ini dengan nama da!tar'agenda.p"p di folder application012iews01da!taragenda. Berikut adalah source code dari 3iew da!tar'agenda*
GK%DC&W E htmlJ GhtmlJ GheadJ GtitleJ%aftar !adir raktikumG,titleJ G,headJ GbodyJ Gh1J%aftar +gendaG,h1J Ga hrefHIGRphp echo siteMurl'Ldaftaragenda,tambahMagendaL(SRJIJ&ambah +gendaG,aJ Gbr ,J Gbr ,J GRphp foreach 'VdaftarMagenda as Vagenda( NRJ GfieldsetJ Gh9JGRphp echo Vagenda.JnamaSRJG,h9J Ga hrefHIGRphp echo siteMurl'Ldaftaragenda,editMagenda,L.Vagenda.JidMagenda(SRJIJEditG,aJ X Ga hrefHIGRphp echo siteMurl'Ldaftaragenda,deleteMagenda,L.Vagenda.JidMagenda(SRJIJ%eleteG,aJ Gbr ,J GpJ GRphp echo Vagenda.JketeranganSRJ G,pJ G,fieldsetJ Gbr ,J GRphp O RJ G,bodyJ G,htmlJ
17
%i dalam source code diatas terdapat link untuk menambahkan agenda baru, menampilkan setiap data di dalam tabel melalui looping? serta menambatkan link edit dan delete di setiap item tabel agenda. 0ntuk melihat bagaimana function inde4 bekerja, akseslah le"at 0RL berikut* http*,,localhost,pelatihanbasdat,inde=.php,daftaragenda 4emudian tampilannya kira ) kira akan seperti berikut ini*
:ambar !.% *ampilan 5ndex di /ontroller 2genda
4.#.Mena&(a"kan >itur +a&(a" Agenda di Controller Agenda

Aika di subbab sebelumnya kita hanya dapat melihat daftar agenda, maka sekarang kita kan mencoba menambah agenda baru pada aplikasi kita ini. 0ntuk me"ujudkannya, kita memerlukan form untuk menerima masukan dari user, function di controller da!taragenda untuk menampilkan form dan memproses form tersebut, serta menggunakan function yang dapat menambahkan data baru di agenda'&odel. $asih di file controller yang sama yaitu da!taragenda.p"p, tambahkan potongan kode berikut*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class %aftaragenda e=tends CIMController N
92
................................................................................................ public function tambahMagenda'(N Vthis.Jload.J6ie"'Ldaftaragenda,formMtambahMagendaL(S O public function prosesMtambahMagenda'(N VdataYLnamaLZ H Vthis.Jinput.Jpost'LnamaL(S VdataYLketeranganLZ H Vthis.Jinput.Jpost'LketeranganL(S Vthis.JagendaMmodel.JinsertMagenda'Vdata(S redirect'siteMurl'LdaftaragendaL((S O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
ada kode diatas function ta&(a"'agenda56 digunakan untuk menampilkan 3iew !or&'ta&(a"'agenda. 4emudian function proses'ta&(a"'agenda56 digunakan untuk memproses masukan dari form dan menambahkannya ke tabel agenda melalui model agenda'&odel. #etelah memasukkan data ke tabel agenda, tampilan "eb dialihkan ke halaman inde4 yang ada di controller da!taragenda. 0ntuk 3iew !or&'ta&(a"'agenda* didalamnya terdapat sebuah form yang mengarahkan proses ke function proses'ta&(a"'agenda di controller da!taragenda* kemudian terdapat sebuah text area yang akan menerima masukan judul agenda dan keterangan agenda. #impanlah 3iew diba"ah ini dengan nama !or&'ta&(a"'agenda.p"p dan simpan di application 01 2iews 01 da!taragenda. 1ource code !or&'ta&(a"'agenda dapat +nda lihat sebagai berikut*
GK%DC&W E htmlJ GhtmlJ GheadJ GtitleJ%aftar !adir raktikumG,titleJ G,headJ GbodyJ Gh1J5orm &ambah +gendaG,h1J GfieldsetJ Gform actionHIGRphp echo siteMurl'Ldaftaragenda,prosesMtambahMagendaL(SRJI methodHI D#&IJ ?ama * Gbr,JGte=tarea nameHInamaI colsHI:2I ro"sHI:IJG,te=tareaJ Gbr,JGbr,J 4eterangan * Gbr,JGte=tarea nameHIketeranganI colsHI:2I ro"sHI:IJG,te=tareaJ Gbr,JGbr,J Ginput typeHIsubmitI 6alueHI&ambahI ,J G,formJ G,fieldsetJ G,bodyJ G,htmlJ
$ari kita coba hasil dari pekerjaan kita diatas.
ertama klik menu ta&(a" agenda di
91 halaman inde4 di controller da!taragenda. erhatikan gambar berikut*
:ambar !.' -encoba -enu *ambah 2genda 4emudian jika berhasil, +nda akan melihat tampilan berikut*
:ambar !.) -elihat *ampilan Form *ambah 2genda #ekarang kita coba masukkan sebuah agenda baru sebagai percobaan seperti pada gambar berikut
91 ini*
:ambar !., -enambahkan 2genda 0aru #etelah memberikan masukan, tentunya tekan tomboh +a&(a" pada form tersebut. Lalu Lihatlah apa yang akan terjadi*
:ambar !.18 2genda 0aru 0erhasil +5tambahkan

99
4.?.Mena&(a"kan >itur @dit Agenda di Controller Agenda

#ekarang kita beralih ke fitur selanjutnya di dalam CR0% yaitu edit agenda. Cara kerjanya hampir sama dengan menambahkan agenda baru. Form yang akan ditampilkan kepada user akan sama dengan form yang digunakan untuk tambah agenda. !anya saja form tersebut sudah diisikan data yang akan diedit. Aadi user tidak perlu mengisi ulang data, cukup mengubah beberapa bagian data yang dirasa keliru. %i setiap link edit yang terdapat di setiap item, terdapat id'agenda yang disematkan pada 0RL untuk mengarah ke halaman edit. #elengkapnya dapat dilihat pada potongan kode berikut 'kode diba"ah jangan disalin(*
................................................................................................ GRphp foreach 'VdaftarMagenda as Vagenda( NRJ GfieldsetJ Gh9JGRphp echo Vagenda.JnamaSRJG,h9J Ga hrefHIGRphp echo siteMurl'Ldaftaragenda,editMagenda,L.Vagenda.JidMagenda(SRJIJEditG,aJ X Ga hrefHIGRphp echo siteMurl'Ldaftaragenda,deleteMagenda,L.Vagenda.JidMagenda(SRJIJ%eleteG,aJ Gbr ,J GpJ GRphp echo Vagenda.JketeranganSRJ G,pJ G,fieldsetJ Gbr ,J GRphp O RJ ................................................................................................
Aadi ketika ditunjuk, 0RL akan seperti berikut ini*
:ambar !.11 -encoba -enu (dit di +aftar 2genda

93 #ebelum itu, kita harus membuat kode untuk menampilkan halaman edit agenda dan memproses hasil dari edit agenda tersebut. &ambahkan kode berikut di controller agenda*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class %aftaragenda e=tends CIMController N ................................................................................................ public function editMagenda'VidMagenda(N VdataYLagendaLZ H Vthis.JagendaMmodel.JselectMbyMid'VidMagenda(.Jro"'(S Vthis.Jload.J6ie"'Ldaftaragenda,formMeditMagendaL, Vdata(S O public function prosesMeditMagenda'(N VdataYLnamaLZ H Vthis.Jinput.Jpost'LnamaL(S VdataYLketeranganLZ H Vthis.Jinput.Jpost'LketeranganL(S VidMagendaHVthis.Jinput.Jpost'LidMagendaL(S Vthis.JagendaMmodel.JupdateMagenda'VidMagenda, Vdata(S redirect'siteMurl'LdaftaragendaL((S O ........................................................................................ ........ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
4emudian agak berbeda sedikit dengan 3iew !or&'ta&(a"'agenda, isi source code dari 3iew !or&'edit'agenda adalah sebagai berikut*
GK%DC&W E htmlJ GhtmlJ GheadJ GtitleJ%aftar !adir raktikumG,titleJ G,headJ GbodyJ Gh1J5orm Edit +gendaG,h1J GfieldsetJ Gform actionHIGRphp echo siteMurl'Ldaftaragenda,prosesMeditMagendaL(SRJI methodHI D#&IJ +genda * Gbr,JGte=tarea nameHInamaI colsHI:2I ro"sHI:IJGRphp echo Vagenda.JnamaSRJG,te=tareaJ Gbr,JGbr,J 4eterangan * Gbr,JGte=tarea nameHIketeranganI colsHI:2I ro"sHI:IJGRphp echo Vagenda.JketeranganSR JG,te=tareaJ Gbr,JGbr,J Ginput typeHIhiddenI nameHIidMagendaI 6alueHIGRphp echo Vagenda.JidMagendaSRJI ,J Ginput typeHIsubmitI 6alueHI0bahI ,J G,formJ G,fieldsetJ G,bodyJ G,htmlJ
#impan source code diatas dengan nama !or&'edit'agenda.p"p di application 01 2iews 01

9: da!taragenda. 4emudian coba klik data yang baru saja dimasukkan atau data manapun untuk mencoba melihat halaman edit dari item tersebut*
:ambar !.12 @alaman (dit 2genda #ekarang coba ubah sedikit data yang dipilih sesuai kehendak masing ) masing. $isal dalam gambar diba"ah ini diubah seperti berikut*
:ambar !.1 -encoba (dit 2genda

9; !asil akhirnya adalah seperti berikut*
:ambar !.1! 2genda yang +ipilih 0erhasil +iubah
4.A.Mena&(a"kan >itur Bapus Agenda di Controller Agenda

+khirnya kita mencapai fitur terakhir yaitu hapus agenda. #uatu saat, ada beberapa item yang dirasa keliru dan tidak diperkenankan masuk ke dalam database. $aka baiknya ada fitur hapus item tersebut agar tidak tercatat di database. %i aplikasi agenda ini, fitur hapus ditambatkan pada setiap item disamping menu (dit. %i dalam aplikasi ini hapus direpresentasikan dalam menu +elete. %i dalam menu tersebut terdapat id'agenda yang disisipkan untuk diproses di function delete'agenda di controller da!taragenda. erhatikan potongan kode diba"ah ini 'keterangan * jangan disalin(*
................................................................................................ GRphp foreach 'VdaftarMagenda as Vagenda( NRJ GfieldsetJ Gh9JGRphp echo Vagenda.JnamaSRJG,h9J Ga hrefHIGRphp echo siteMurl'Ldaftaragenda,editMagenda,L.Vagenda.JidMagenda(SRJIJEditG,aJ X Ga hrefHIGRphp echo siteMurl'Ldaftaragenda,deleteMagenda,L.Vagenda.JidMagenda(SRJIJ%eleteG,aJ Gbr ,J GpJ GRphp echo Vagenda.JketeranganSRJ G,pJ G,fieldsetJ Gbr ,J
9<
GRphp O RJ ................................................................................................
4emudian setelah mengklik link tersebut, proses selanjutnya akan berjalan di function delete'agenda di controller agenda. Berikut adalah potongan kode yang harus ditambahkan di controller agenda*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class %aftaragenda e=tends CIMController N ................................................................................................ public function deleteMagenda'VidMagenda(N Vthis.JagendaMmodel.JdeleteMagenda'VidMagenda(S redirect'siteMurl'LdaftaragendaL((S O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
%i dalam function diatas, proses akan menghapus terlebih dahulu item yang berada di dalam tabel agenda. 4emudian akan dialihkan ke halaman daftar agenda. Berikut adalah tangkapan layar bagaimana proses hapus agenda berjalan*
:ambar !.1" 1alah 1atu 2genda 1ebelum +ihapus
:ambar !.1% 1etelah &roses @apus 2genda 1elesai
9@
#.I&ple&entasi )ession CodeIgniter di $roses Autentikasi Akun

#.1.Me&(uat +a(el =ser di ata(ase $elati"an Basdat
1ession merupakan suatu cara merekam dan memantau akti6itas user dalam menggunakan aplikasi web yang kita bangun. %engan session seseorang dapat dikenal identitasnya apakah orang tersebut mempunyai hak akses terhadap aplikasi web yang digunakannya, mencatat setiap check point yang dilalui oleh user 'misalnya * keranjang belanja(, atau menyimpan data hasil interaksi user dengan aplikasi web sebelum disimpan di dalam storage. %alam sesi kali ini, kita akan mencoba membuat sistem autentikasi sederhana. 4ronologinya adalah user akan memasukkan akunnya, kemudian memeriksa apakah di database terdapat akun tersebut, jika berhasil diarahkan ke halaman sukses, jika gagal dialihkan kembali ke halaman login. 4emudian di setiap function akan diperiksa apakah user tersebut berhak mengakses function tersebut tanpa login atau harus login terlebih dahulu. +gar percobaan sedikit lebih realistis, kita memerlukan sebuah tabel yang bernama user. &abel ini mempunyai tiga buah field yaitu id'user, userna&e, password. %engan menggunakan ! $y+dmin, buatlah tabel user di database pelati"an(asdat dengan ketentuan seperti berikut*
:ambar ".1 1truktur *abel 7ser di +atabase &elatihan 0asdat 4emudian setelah berhasil membuat tabel diatas, isikan data dummy seperti pada gambar berikut ini*
:ambar ".2 +ata +ummy untuk *abel 7ser
97
#.2.Me&(uat Model untuk +a(el =ser

-odel yang akan kita perlukan untuk tabel user akan memiliki fungsi untuk memeriksa akun dan mengambil data akun tersebut. -odel yang akan ditulis memiliki nama user'&odel. %iletakkan di application 01 &odels 01 account . Folder account dibuat terlebih dahulu di dalam folder &odels. Berikut adalah source code dari user'&odel*
GRphp class 0serMmodel e=tends CIM$odel N function MMconstruct'(N parent**MMconstruct'(S O ,, cek keberadaan user di sistem function checkMuserMaccount'Vusername, Vpass"ord(N Vthis.Jdb.Jselect'LTL(S Vthis.Jdb.Jfrom'LuserL(S Vthis.Jdb.J"here'LusernameL, Vusername(S Vthis.Jdb.J"here'Lpass"ordL, Vpass"ord(S return Vthis.Jdb.Jget'(S O ,, mengambil data user tertentu function getMuser'VidMuser(N Vthis.Jdb.Jselect'LTL(S Vthis.Jdb.Jfrom'LuserL(S Vthis.Jdb.J"here'LidMuserL, VidMuser(S return Vthis.Jdb.Jget'(S O O
#.3.Me&(uat Controller Account

-odel user'&odel telah berhasil dibuat. #ekarang kita akan membuat controller yang bernama account untuk digunakan dalam membangun sistem autentikasi sederhana. /ontroller tersebut memerlukan model user'&odel karena akan mengakses tabel user, memerlukan helper url dan !or&, serta memerlukan library !or&'2alidation. #ebagai langkah a"al, kita akan membuat function yang menampilkan form login beserta 3iewnya. #ebelumnya, buat terlebih dahulu folder account di application 01 2iews. Folder tersebut digunakan untuk menaruh 3iew yang akan digunakan untuk sistem autentikasi sederhana ini. Berikut adalah controller untuk menampilkan form login*
32
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class +ccount e=tends CIMController N function MMconstruct'(N parent**MMconstruct'(S Vthis.Jload.Jmodel'Laccount,userMmodelL(S Vthis.Jload.Jhelper'LurlL(S Vthis.Jload.Jhelper'LformL(S Vthis.Jload.Jlibrary'LformM6alidationL(S O ,, melihat halaman login public function inde='(N Vthis.Jload.J6ie"'Laccount,formMloginL(S O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
ada function inde4, +nda bisa melihat bah"a function tersebut mengarah ke 3iew !or&'login. Berikut adalah isi dari 3iew !or&'login* Gh1J#ilahkan LoginG,h1J
GfieldsetJ GRphp echo 6alidationMerrors'(S RJ Gp styleHIcolor*redSIJGRphp echo Vthis.Jsession.Jflashdata'LnotificationL(RJG,pJ GRphp echo formMopen'Laccount,loginL(RJ 0sername * Ginput typeHIte=tI nameHIusernameI 6alueHIGRphp echo setM6alue'LusernameL(RJI ,J Gbr ,JGbr ,J ass"ord * Ginput typeHIpass"ordI nameHIpass"ordI 6alueHIGRphp echo setM6alue'Lpass"ordL(RJI ,J Gbr ,JGbr ,J Ginput typeHIsubmitI nameHImasukI 6alueHI$asukI ,J Gbr ,J G,formJ G,fieldsetJ
#etelah selesai disalin, simpanlah source code diatas dengan nama !or&'login.p"p dan taruh di application 01 2iews 01 account. %i dalam source code diatas terdapat beberapa poin penting seperti berikut* 2alidation'error56, akan menampilkan error yang dihasilkan ketika proses 6alidasi form ,t"is01session01!las"data5.noti!ication.6, akan menampilkan kesalahan ketika pengecekan keberadaan akun
31 set'2alue56, mencetak kembali nilai masukan di form sebelumnya
4emudian akses function inde4 melalui 0RL berikut* http*,,localhost,pelatihanbasdat,inde=.php,account $aka akan muncul tampilan seperti berikut ini*
:ambar ". *ampilan Form Login
#.4.Mena&(a"kan $roses 9ogin di Controller Account

#ekarang kita akan maju ke bagian terpenting dari proses autentikasi ini. 4etika +nda memasukkan username dan password? +nda akan mengirimkan kedua masukan tadi ke function login56 di controller account. $asukan tersebut akan ditangkap menggunakan library input dan diproses juga menggunakan 8## 5iltering. Lalu kedua data tersebut diperiksa di database apakah ada akun yang dicari atau tidak. #elain itu diterapkan juga proses 6alidasi terhadap form login. %i dalam penerapan 6alidasi form, digunakan 6alidasi reCuired agar user tidak mengosongkan salah satu atau kedua dari isian di form login. 4emudian proses 6alidasi akan menentukan apakah masukan user sudah lolos dari 6alidasi form atau belum. Aika gagal maka akan dikembalikan ke halaman form login. Aika lolos maka keberadaan akun akan diperiksa. Aika terdapat akun yang dimiliki, maka akun tersebut akan dimasukkan kedalam session kemudian diarahkan ke halaman sukses mengakses akun. Aika akun yang dimasukkan tidak ada dalam database maka controller login akan mengalihkan +nda ke halaman form login kembali. #elengkapnya berikut adalah source code yang memproses login dan menyimpannya kedalam session setelah mele"ati proses 6alidasi*
31
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class +ccount e=tends CIMController N ................................................................................................ ,, memeriksa keberadaan akun username public function login'(N Vusername H Vthis.Jinput.Jpost'LusernameL, LtrueL(S Vpass"ord H Vthis.Jinput.Jpost'Lpass"ordL, LtrueL(S VtempMaccount H Vthis.JuserMmodel.JcheckMuserMaccount'Vusername, Vpass"ord(.Jro"'(S ,, check account VnumMaccount H count'VtempMaccount(S Vthis.JformM6alidation.JsetMrules'LusernameL, L0sernameL, Lre-uiredL(S Vthis.JformM6alidation.JsetMrules'Lpass"ordL, L ass"ordL, Lre-uiredL(S if 'Vthis.JformM6alidation.Jrun'( HH 5+L#E( N Vthis.Jload.J6ie"'Laccount,formMloginL(S O else N if 'VnumMaccount J 2(N ,, kalau ada set session VarrayMitems H array' LidMuserL HJ VtempMaccount.JidMuser, LusernameL HJ VtempMaccount.Jusername, LloggedMinL HJ true (S Vthis.Jsession.JsetMuserdata'VarrayMitems(S redirect'siteMurl'Laccount,6ie"MsuccessMpageL((S O else N ,, kalau ga ada diredirect lagi ke halaman login Vthis.Jsession.JsetMflashdata'LnotificationL, L eringatan * 0sername dan ass"ord tidak cocokL(S redirect'siteMurl'LaccountL((S O O O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
39 4etika akun yang dimasukkan ada di dalam tabel user. /ontroller account akan mengarahkan +nda ke halaman sukses. #ebenarnya disini terjadi pengarahan ke /ontroller account itu sendiri yang targetnya adalah function yang menampilkan halaman sukses. 4ita akan membuat function yang bernama 2iew'success'page56 di dalam controller account. %i dalam controller ini terdapat proses pengecekan session. 4emudian jika session dari user yang sedang login masih ada, maka akan ditampilkan halaman sukses. Aadi ketika +nda login kemudian berhasil, +nda dapat mengakses function 2iew'success'page56 '0RL * http*,,pelatihanbasdat,inde=.php,account,6ie"MsuccesMpage( kembali sekalipun tab di browser sudah ditutup. +pabila sebelumnya belum login, kemudian +nda mengakses function 2iew'success'page56 maka +nda akan dialihkan ke halaman form login. Berikut adalah source code dari function 2iew'success'page56D
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class +ccount e=tends CIMController N ................................................................................................ public function 6ie"MsuccessMpage'(N VloggedMin H Vthis.Jsession.Juserdata'LloggedMinL(S if 'KVloggedMin(N redirect'siteMurl'LaccountL((S O Vthis.Jload.J6ie"'Laccount,successMpageL(S O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
4arena function 2iew'success'page56 akan menampikan sebuah 3iew, maka kita harus membuat sebuah 3iew yang menampilkan sukses ketika login. 4ita akan membuat sebuah 3iew dengan nama success'page.p"p kemudian simpan 3iew tersebut di application 01 2iews 01 account. Berikut adalah source code dari 3iew success'page*
Gh1J+nda berhasil login *% G,h1J Ghr ,J !ai, GRphp echo Vthis.Jsession.Juserdata'LusernameL(SRJ *% Gbr ,J #elamat %atang di "ebsite coba . coba... Gbr ,JGbr ,J Ga hrefHIGRphp echo siteMurl'Laccount,logoutL(S RJIJkeluarG,aJ
33
Gbr ,J
#ekarang "aktunya kita menguji coba sistem autentikasi kita. ertama masukkan username sesuai dengan akun yang ada di tabel user di database*
:ambar ".! -emasukkan 2kun di Form Login
4emudian jika berhasil, +nda akan diarahkan ke function 2iew'success'page56 seperti pada gambar berikut *
:ambar "." 0erhasil ;e @alaman 1ukses
3:
#.#.Mena&(a"kan >itur 9ogout di Controller Account

ada subbab sebelumnya, ketika berhasil masuk ke halaman sukses. &erdapat sebuah menu untuk keluar dari sistem. &api menu tersebut belum dapat digunakan untuk melakukan proses logout. 4etika +nda menyorot link tersebut, +nda akan melihat 0RL * http*,,localhost,pelatihanbasdat,inde=.php,account,logout yang artinya akan mengakses function logout di controller account. %i function tersebut session user yang dicatat oleh sistem akan dihapus. 4emudian function logout akan mengalihkan +nda ke halaman login kembali. Berikut adalah source code dari function logout*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class +ccount e=tends CIMController N ................................................................................................ ,, keluar dari sistem public function logout'(N Vthis.Jsession.JsessMdestroy'(S redirect'siteMurl'LaccountL((S O ................................................................................................ O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
#ekarang mari coba klik link Keluar yang ada di halaman sukses*
:ambar ".% -encoba -enu Logout
3;
?.Mengenal $agination di CodeIgniter

&agination atau penghalaman merupakan salah satu fitur "ajib yang harus dimiliki sebuah aplikasi web. %engan adanya pagination? aplikasi web +nda tidak perlu menampilkan seluruh data dari tabel yang diambil datanya. Cukup menampilkan beberapa data kemudian jika user ingin melihat lagi data selanjutnya tinggal memilih halaman yang dihasilkan oleh aplikasi web +nda. 0ntuk itu kita akan mengenal pagination sederhana di CodeIgniter. %engan menggunakan data dari tabel user, kita akan mencoba menampilkan sebagian data dari tabel tersebut dan akan mengganti data yang diambil lagi ketika mengklik halaman baru. 0ntuk itu kita buat terlebih dahulu controller yang bernama paginationsa&ple kemudian taruh di application 01 controllers. Berikut adalah source code lengkapnya*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class aginationsample e=tends CIMController N public function MMconstruct'( N parent**MMconstruct'(S Vthis.Jload.Jhelper'LurlL(S Vthis.Jload.Jlibrary'LinputL(S Vthis.Jload.Jmodel'Ldaftaragenda,agendaMmodelL(S O public function inde='VoffsetH2( N ,, tentukan jumlah data per halaman Vperpage H 9S ,, load library pagination Vthis.Jload.Jlibrary'LpaginationL(S ,, konfigurasi tampilan paging Vconfig H array' LbaseMurlL HJ siteMurl'Lpaginationsample,inde=L(, LtotalMro"sL HJ count'Vthis.JagendaMmodel.JselectMall'(.Jresult'((, LperMpageL HJ Vperpage, (S ,, inisialisasi pagination dan config Vthis.Jpagination.JinitialiEe'Vconfig(S VlimitYLperpageLZ H VperpageS VlimitYLoffsetLZ H VoffsetS VdataYLdaftarMagendaLZ H Vthis.JagendaMmodel.JselectMallMpaging'Vlimit(.Jresult'(S Vthis.Jload.J6ie"'Lpaginationsample,daftarMagendaMpagingL, Vdata(S O O ,T End of file "elcome.php T, ,T Location* .,application,controllers,"elcome.php T,
3< ada kode diatas, kita membutuhkan helper url, library input, dan model agenda'&odel. ertama, kita menentukan jumlah item yang ingin ditampilkan setiap halaman. 4emudian kita gunakan library pagination. 4emudian kita konfigurasi pagination yang akan kita hasilkan. 4ita memilih function apa yang akan menggunakan pagination? mencatat total data yang akan ditampilkan, dan menentukan banyak item yang akan ditampilkan. 4onfigurasi kemudian digunakan oleh library pagination. %an kita mele"atkan batas a"al 'offset( dan banyaknya item yang akan ditampilkan untuk pagination ke function select'all'paging56 di model agenda'&odel. %engan masih menggunakan model agenda'&odel tambahkan function select'all'paging56 di model tersebut. Berikut adalah source code dari function select'all'paging56*
GRphp class +gendaMmodel e=tends CIM$odel N ........................................................................................... ,, function yang digunakan oleh paginationsample function selectMallMpaging'VlimitHarray'((N Vthis.Jdb.Jselect'LTL(S Vthis.Jdb.Jfrom'LagendaL(S Vthis.Jdb.JorderMby'LdateMmodifiedL, LdescL(S if 'Vlimit KH ?0LL( Vthis.Jdb.Jlimit'VlimitYLperpageLZ, VlimitYLoffsetLZ(S return Vthis.Jdb.Jget'(S O O
ada function select'all'paging56 diatas, data yang diambil dibatas sesuai offset dan banyaknya item yang ingin ditampilkan di function inde4 di controller paginationsa&ple. #ekarang kita akan melihat source code dari 3iew untuk menampilkan pagination yang bernama da!tar'agenda'pagination. Berikut adalah source code dari 3iew da!tar'agenda'pagination*
GK%DC&W E htmlJ GhtmlJ GheadJ GtitleJ%aftar !adir raktikumG,titleJ G,headJ GbodyJ Gh1J%aftar +gendaG,h1J Ga hrefHIGRphp echo siteMurl'Ldaftarhadir,tambahMagendaL(SRJIJ&ambah +gendaG,aJ Gbr ,J Gbr ,J Gbr ,J GRphp echo Vthis.Jpagination.JcreateMlinks'(S RJ Gbr ,J Gbr ,J GRphp foreach 'VdaftarMagenda as Vagenda( NRJ GfieldsetJ
3@
Gh9JGRphp echo Vagenda.JnamaSRJG,h9J Ga hrefHIGRphp echo siteMurl'Ldaftarhadir,editMagenda,L.Vagenda.JidMagenda(SRJIJEditG,aJ X Ga hrefHIGRphp echo siteMurl'Ldaftarhadir,deleteMagenda,L.Vagenda.JidMagenda(SRJIJ%eleteG,aJ Gbr ,J GpJ GRphp echo Vagenda.JketeranganSRJ G,pJ G,fieldsetJ Gbr ,J GRphp O RJ Gbr ,J GRphp echo Vthis.Jpagination.JcreateMlinks'(S RJ Gbr ,J Gbr ,J G,bodyJ G,htmlJ
#ebelumnya buat terlebih dahulu folder dengan nama paginationsa&ple di application 01 2iews. 4emudian simpan file diatas dengan nama da!tar'agenda'pagination.p"p di dalam folder paginationsa&ple. 4emudian akses controller paginationsa&ple dengan 0RL berikut* http*,,localhost,pelatihanbasdat,inde=.php,paginationsample 4emudian +nda akan melihat tampilan seperti berikut*
:ambar %.1 *ampilan @alaman &aging
:ambar %.2 @alaman &agination ketika 0erpindah @alaman
37
A.Me&a"a&i >or& Bandling di CodeIgniter

A.1.Me&(uat >or& dengan Belper >or&
%i CodeIgniter terdapat sebuah fitur yang digunakan untuk menangani data yang dikirimkan oleh user melalui form. +nda cukup menentukan rule untuk proses 6alidasi yang akhirnya dapa-t mengurangi tenaga untuk membuat logika 6alidasi sendiri. Aika 6alidasi gagal, CodeIgniter akan menampilkan error dari 6alidasi tersebut ke halaman form dimana +nda mengirimkan data +nda. Bahkan +nda dapat menggunakan fitur untuk menghasilkan field yang lebih cepat dengan menggunakan library !or& di CodeIgniter. Aika biasanya +nda mengetikkan sintaks !&$L secara penuh untuk mendefinisikan sebuah text field maka dengan menggunakan function !or&'input56 helper !or&. +nda dapat meringkas proses penulisan field di form. 4ita akan mencoba bagaimana membangun form dengan helper !or& dan mencoba memberika 6alidasi pada form tersebut dengan library !or&'2alidation. Berikut adalah controller yang akan digunakan untuk eksperimen kita kali ini*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class 5ormhandling e=tends CIMController N public function MMconstruct'( N parent**MMconstruct'(S Vthis.Jload.Jhelper'LurlL(S Vthis.Jload.Jhelper'LformL(S Vthis.Jload.Jlibrary'LinputL(S Vthis.Jload.Jlibrary'LformM6alidationL(S O public function inde='( N Vthis.Jload.J6ie"'Lformhandling,formMregisterMuserL(S O ........................................................................................ O ,T End of file formhandling.php T, ,T Location* .,application,controllers,formhandling.php T,
#ebelumnya simpan source code diatas dengan nama !or&"andling.p"p kemudian simpan di folder application E controllers. 4emudian mari kita coba untuk membuat 3iew yang field di form#nya dibuat menggunakan helper !or&. Berikut adalah source code yang akan ditulis*
GhtmlJ GheadJ
:2
GtitleJ5orm !andlingG,titleJ G,headJ GbodyJ Gh1J+yo >abung Bersama 4amiG,h1J GfieldsetJ GRphp echo formMopen'Lformhandling,prosesMregisterMuserL(SRJ GRphp echo formMerror'LnamaL, LGdi6 styleHIcolor*redIJL,LG,di6JL(SRJ ?ama * GRphp echo formMinput'LnamaL(SRJ Gbr ,JGbr,J GRphp echo formMerror'LsamaranL, LGdi6 styleHIcolor*redIJL,LG,di6JL(SRJ #amaran * GRphp echo formMinput'LsamaranL(SRJ Gbr ,JGbr,J GRphp echo formMerror'LemailL, LGdi6 styleHIcolor*redIJL,LG,di6JL(SRJ Email * GRphp echo formMinput'LemailL(SRJ Gbr ,JGbr,J GRphp echo formMerror'Lpass"ordL, LGdi6 styleHIcolor*redIJL,LG,di6JL(SRJ ass"ord * GRphp echo formMpass"ord'Lpass"ordL(SRJ Gbr ,JGbr,J GRphp echo formMerror'Lulangpass"ordL, LGdi6 styleHIcolor*redIJL,LG,di6JL(SRJ 0lang ass"ord * GRphp echo formMpass"ord'Lulangpass"ordL(SRJ Gbr ,JGbr,J GRphp echo formMerror'LumurL, LGdi6 styleHIcolor*redIJL,LG,di6JL(SRJ 0mur * GRphp echo formMinput'LumurL(SRJ Gbr ,JGbr,J &"itter * GRphp echo formMinput'Lt"itterL(SRJ Gbr ,JGbr,J Febsite * GRphp echo formMinput'L"ebsiteL(SRJ Gbr ,JGbr,J GRphp echo formMsubmit'LdaftarL, L%aftarkan #aya KL(SRJ GRphp echo formMclose'(S RJ G,fieldsetJ G,bodyJ G,htmlJ
Beri nama file dari source code diatas dengan nama !or&'register'user.p"p. #ebelumnya buat terlebih dahulu folder yang bernama !or&"andling di folder application E 2iews. %an simpanlah source code diatas di folder !or&"andling. Beberapa function dari helper !or& yang harus diingat antara lain* !or&'open56, function yang digunakan untuk membuka form dan menentukan tipe form. !or&'error56, function yang digunakan untuk memperlihatkan error di form ketika proses 6alidasi !or&'input56, function yang digunakan untuk menyingkat penulisan input tipe text di form !or&'password56* function yang digunakan untuk menyingkat penulisan input tipe password di form !or&'su(&it56* function yang digunakan untuk menyingkat penulisan tombol submiti di form !or&'close56, function yang digunakan untuk menutup form
%engan menggunakan helper !or& tersebut, setidaknya kita dapat menghemat "aktu untuk membuat form di aplikasi web yang akan kita bangun. $ari kita coba lihat form pendaftaran diatas le"at 0RL berikut* http*,,localhost,pelatihanbasdat,inde=.php,formhandling, %an cobalah lihat dengan mode 3iew source code pada browser yang +nda gunakan. #intaks untuk membuat form sudah ditangani oleh CodeIgniter. Berikut adalah screenshot dari form yang diciptakan oleh CodeIgniter*
:1
:ambar '.1 Form yang dibuat dengan @elper Form
:ambar '.2 1ource /ode dari Form yang dibuat dengan @elper Form
7.2.Me&(erikan $roses Validasi dengan 9i(rar% >or& Validations

Form diatas belum memiliki penanganan ketika tombol submit ditekan. 0ntuk itu kita akan membuat function baru yang memanfaatkan library !or&'2alidation untuk menangani proses
:1 6alidasi dari form yang telah kita buat. Berikut adalah source code dari function proses'register'user56 di controller !or&'"andling yang akan kita gunakan untuk mem6alidasi form yang telah dibuat*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class 5ormhandling e=tends CIMController N .......................................................................................... public function prosesMregisterMuser'(N Vthis.JformM6alidation.JsetMrules'LnamaL, L?amaL, Lre-uiredL(S Vthis.JformM6alidation.JsetMrules'LsamaranL, L#amaranL, Lre-uiredL(S Vthis.JformM6alidation.JsetMrules'Lpass"ordL, L ass"ordL, Lre-uiredL(S Vthis.JformM6alidation.JsetMrules'Lulangpass"ordL, L0lang ass"ordL, Lre-uiredL(S Vthis.JformM6alidation.JsetMrules'LemailL, LEmailL, Lre-uiredX6alidMemailL(S Vthis.JformM6alidation.JsetMrules'LumurL, L0murL, LintegerL(S if 'Vthis.JformM6alidation.Jrun'( HH 5+L#E( N Vthis.Jload.J6ie"'Lformhandling,formMregisterMuserL(S O else N Vthis.Jload.J6ie"'Lformhandling,successMregisterMuserL(S O O O ,T End of file formhandling.php T, ,T Location* .,application,controllers,formhandling.php T,
Bisa +nda lihat pada source code diatas bah"a untuk menentukan aturan 6alidasi cukup dengan menggunakan !or&'2alidation01set'rules56 dengan parameter pertama adalah nama dari field yang akan diberikan 6alidasi, parameter kedua adalah nama dari field yang akan ditampilkan dalam peringatan error, dan parameter ketiga adalah jenis 6alidasi yang akan digunakan. Berikut adalah source code untuk melihat halaman sukses setelah 6alidasi*
GhtmlJ GheadJ GtitleJ5orm !andlingG,titleJ G,headJ GbodyJ Gh9J+nda sudah bergabung bersama kami *%G,h9J GpJGRphp echo anchor'LformhandlingL, LCoba Lagi KL(S RJG,pJ G,bodyJ G,htmlJ
#impan source code diatas dengan nama success'register'user.p"p dan simpan di folder !or&"andling di application E 2iews. 0ntuk menjalankan 6alidasi dari form tersebut, digunakanlah !or&'2alidation01run56 untuk menguji 6alidasi. Aika sukses diarahkan ke halaman sukses. Aika gagal maka akan dikembalikan ke halaman form dengan memberikan informasi dari form yang error. $ari kita coba form tersebut dengan kasus tanpa diis
:9
:ambar '. .alidasi ;etika Form +ikosongkan
:ambar '.! .alidasi ;etika 1alah &engisian

:3
:ambar '." Form ;etika +iisi +engan +ata yang 1esuai
:ambar '.% @alaman 1ukses ;etika .alidasi berhasil
::
F.Mena&(a"kan +witter Bootstrap kedala& $rojek CodeIgniter

&entunya dalam membangun sebuah aplikasi web diperlukanlah C## untuk mempercantik tampilan web. Biasanya C## dibangun sendiri atau menggunakan framework yang sudah menangani berbagai keperluan styling untuk sebuah aplikasi web. %alam praktikum ini kita akan mencoba menggunakan &"itter Bootstrap dan memasangnya di projek CodeIgniter. #udah pasti +nda membutuhkan &"itter Bootstrap untuk melakukan percobaan ini. +nda dapat mengunduhnya dari http*,,getbootstrap.com, . 4emudian unduh 6ersi minimal atau 6ersi yang disesuaikan dengan kebutuhan aplikasi web yang +nda bangun. Berikut ada beberapa langkah a"al yang harus dilakukan untun menggunakan &"itter Bootstrap di aplikasi web berbasi CodeIgniter* %i root dari folder projek, buatlah sebuah folder yang bernama asset 4emudian ekstrak hasil unduhan Bootstrap dan ubah nama folder.nya menjadi (ootstrap #ehingga hasilnya akan terlihat seperti pada struktur folder seperti ini*
:ambar ).1 1truktur Folder 0ootstrap yang +igabungkan dengan /ode5gniter
#eperti biasa kita membutuhkan controller yang akan menampilkan 3iew yang berisi kode !&$L. %alam percobaan ini kita membutuhkan controller seperti berikut ini*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class Bootstrapsample e=tends CIMController N public function MMconstruct'(N parent**MMconstruct'(S Vthis.Jload.Jhelper'LurlL(S O
:;
public function inde='( N Vthis.Jload.J6ie"'LcontohMformMbootstrapL(S O O ,T End of file bootstrapsample.php T, ,T Location* .,application,controllers,bootstrapsample.php T,
#impanlah controller diatas dengan nama (ootstrapsa&ple.p"p di application 01 controllers. Berikutnya kita akan membuat 3iew yang berisi contoh form yang menggunakan style dari &"itter Bootstrap. $ari kita simak source code berikut ini*
GK%DC&W E htmlJ Ghtml langHIenIJ GheadJ GtitleJContoh 5orm BootstrapG,titleJ Gscript typeHIte=t,ja6ascriptI srcHIGRphp echo baseMurl'Lasset,bootstrap,js,bootstrap.jsL(SRJIJG,scriptJ Glink hrefHIGRphp echo baseMurl'Lasset,bootstrap,css,bootstrap.min.cssL(SRJI relHIstylesheetIJ Glink hrefHIGRphp echo baseMurl'Lasset,bootstrap,css,bootstrap.theme.min.cssL(SRJI relHIstylesheetIJ G,headJ GbodyJ Gform classHI"ell form.horiEontalIJ GfieldsetJ Gdi6 classHIcontrol.groupIJ Glabel classHIcontrol.labelI forHIinput21IJ?amaG,labelJ Gdi6 classHIcontrolsIJ Ginput typeHIte=tI classHIinput.=largeI idHIinput21IJ Gp classHIhelp.blockIJIsikan nama lengkap +ndaG,pJ G,di6J G,di6J Gdi6 classHIcontrol.groupIJ Glabel classHIcontrol.labelI forHIinput21IJ&"itterG,labelJ Gdi6 classHIcontrolsIJ Ginput typeHIte=tI classHIinput.=largeI idHIinput21IJ Gp classHIhelp.blockIJIsikan akun &"itter +ndaG,pJ G,di6J G,di6J Gdi6 classHIcontrol.groupIJ Glabel classHIcontrol.labelI forHIselect21IJ ekerjaanG,labelJ Gdi6 classHIcontrolsIJ Gselect idHIselect21IJ GoptionJFeb rogrammerG,optionJ GoptionJ%esktop rogrammerG,optionJ GoptionJ+ndroid rogrammerG,optionJ GoptionJFeb %esignerG,optionJ G,selectJ G,di6J G,di6J Gdi6 classHIform.actionsIJ Gbutton classHIbtn btn.primaryI typeHIsubmitIJ #a6e changes G,buttonJ Gbutton classHIbtnIJ
:<
Cancel G,buttonJ G,di6J G,fieldsetJ G,formJ G,bodyJ G,htmlJ
#impanlah source code diatas dengan nama conto"'!or&'(ootstrap.p"p kemudian simpan di folder application 01 2iews. #ekarang kita akan meninjau beberapa bagian source code diatas. $ari kita simak* 0ntuk menggunakan Bootstrap kedalam halaman 3iew kita maka dilakukan dengan cara seperti berikut 'source code diba"ah ini jangan disalin( *
GK%DC&W E htmlJ Ghtml langHIenIJ GheadJ GtitleJContoh 5orm BootstrapG,titleJ Gscript typeHIte=t,ja6ascriptI srcHIGRphp echo baseMurl'Lasset,bootstrap,js,bootstrap.jsL(SRJIJG,scriptJ Glink hrefHIGRphp echo baseMurl'Lasset,bootstrap,css,bootstrap.min.cssL(SRJI relHIstylesheetIJ Glink hrefHIGRphp echo baseMurl'Lasset,bootstrap,css,bootstrap.theme.min.cssL(SRJI relHIstylesheetIJ G,headJ GbodyJ ..........................................................................................
+nda dapat menambahkan class !or&0"oriGontal pada form yang ditentukan untuk menciptakan form yang sesuai gaya &"itter Bootstrap class control0group digunakan untuk membuat sebuah susunan komponen form yang biasanya terdiri dari label dan controls class control0la(el digunakan untuk memberikan style bagi label dari control yang akan digunakan class controls merupakan sebuah susunan komponen input yang biasanya terdiri dari class input04large memberikan style untuk input yang membuatnya terlihat lebih luas class "elp0(lock memberikan style untuk panduan ketika mengisi di input class !or&0action memberikan style untuk class (tn0pri&ar% memberikan style untuk tombol yang ukurannya lebih besar
0ntuk lebih lengkapnya +nda dapat membaca dokumentasi &"itter Bootstrap bagian Base C)). #ekarang mari kita lihat tampilan dari form yang menggunakan &"itter Bootstrap melalui 0RL berikut ini* http*,,localhost,pelatihanbasdat,inde=.php,bootstrapsample #edangkan tampilannya dapat dilihat seperti berikut ini*
:@
:ambar ).2 /ontoh Form *ampilan dengan 0ootstrap
:ambar ). /ontoh Form yang :agal -emuat 0ootstrap

:7
H.Me&(uat >itur =pload di CodeIgniter

H.1.Me&(uat >or& =pload >ile
5itur upload diperlukan untuk mencatat informasi dari user yang menyertakan file. File tersebut bisa berupa gambar, suara, 6ideo, program, dokumen, slide, atau file lainnya. 0ntuk itu jenis form yang dibutuhkan pun berbeda. #ekarang kita akan membuat controller yang menampilkan form upload dahulu. Berikut adalah source code nya*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class 0ploadsample e=tends CIMController N public function MMconstruct'( N parent**MMconstruct'(S Vthis.Jload.Jhelper'LurlL(S Vthis.Jload.Jhelper'LformL(S Vthis.Jload.Jlibrary'LinputL(S O public function inde='( N Vthis.Jload.J6ie"'Luploadsample,formMuploadL, array'LerrorLHJLL((S O .......................................................................................... O ,T End of file uploadsample.php T, ,T Location* .,application,controllers,uploadsample.php T,
#impanlah source code diatas dengan nama uploadsa&ple.p"p kemudian simpan di application 01 controllers. #eperti yang tertulis di source code? controller ini memerlukan dua buah helper yaitu url dan !or& serta membutuhkan library input. %isana terdapat sebuah function inde456 yang akan menampilkan form upload yang akan kita tulis. 0ntuk form upload sendiri yang akan digunakan dalam percobaan ini adalah sebagai berikut*
GhtmlJ GheadJ GtitleJ%emo 0pload 5ileG,titleJ G,headJ GbodyJ GRphp echo VerrorSRJ GRphp echo formMopenMmultipart'Luploadsample,prosesMuploadL(SRJ Audul* Gbr ,J
;2
Ginput typeHIte=tI nameHIjudulI siEe H I92I ,J Gbr,JGbr,J 0pload 5ilenya * Gbr ,JGbr ,J Ginput typeHIfileI nameHIuserfileI siEeHI12I ,J Gbr ,JGbr ,J Ginput typeHIsubmitI 6alueHIuploadI ,J G,formJ G,bodyJ G,htmlJ
Ingat untuk membuat sebuah form yang menyertakan uploading digunakanlah !or&'open'&ultipart56 agar form tersebut dapat meng.upload file yang kita sertakan di form. #ebelum disimpan, buatlah terlebih dahulu folder yang bernama uploadsa&ple di application0 12iews. 4emudian simpan source code diatas dengan nama !or&'upload.p"p dan simpan di folder uploadsa&ple. 0ntuk melihat "ujud dari 3iew diatas akseslah le"at 0RL berikut ini* http*,,localhost,pelatihanbasdat,inde=.php,uploadsample,
:ambar ,.1 *angkapan Layar Form 7pload
H.2.Me&proses >ile %ang +ela" i0upload

#ekarang kita akan mencoba menulis untuk membuat kode yang memproses uploading file dari form yang telah kita buat sebelumnya. #ebelumnya buat terlebih dahulu folder yang akan menyimpan file hasil upload dengan nama upload dan simpan di root projek tepatnya di folder pelati"an(asdat. 4emudian buatlah function yang bernama proses'upload56 di controller uploadsa&ple. Berikut adalah source code yang harus ditambahkan di controller uploadsa&ple*
;1
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class 0ploadsample e=tends CIMController N .......................................................................................... public function prosesMupload'(N Vjudul H Vthis.Jinput.Jpost'LjudulL(S VconfigYLuploadMpathLZ H L.,upload,LS VconfigYLallo"edMtypesLZ H LgifXjpgXpngLS VconfigYLma=MsiEeLZ H L122LS VconfigYLma=M"idthLZ H L1213LS VconfigYLma=MheightLZ H L<;@LS Vthis.Jload.Jlibrary'LuploadL, Vconfig(S if 'KVthis.Jupload.JdoMupload'((N Verror H array'LerrorLHJVthis.Jupload.JdisplayMerrors'((S Vthis.Jload.J6ie"'Luploadsample,formMuploadL, Verror(S O else N VuploadMdata H Vthis.Jupload.Jdata'(S VuploadMdataYLjudulLZ H VjudulS Vdata H array'LuploadMdataL HJ VuploadMdata(S Vthis.Jload.J6ie"'Luploadsample,6ie"MuploadMsuccessL, Vdata(S O O O ,T End of file uploadsample.php T, ,T Location* .,application,controllers,uploadsample.php T,
ada source code diatas, +nda dapat melihat beberapa config dasar yang dibutuhkan untuk proses upload file. %i dalam config tersebut terdapat* upload'pat" untuk menentukan letak folder yang akan menyimpan file yang di.upload allowed't%pes untuk menentukan jenis file apa saja yang boleh di.upload &a4'siGe untuk menentukan ukuran maksimal file yang boleh di.upload &a4'widt" untuk menentukan lebar maksimal file yang boleh di.upload &a4'"eig"t untuk menentukan tinggi maksimal file yang boleh di.upload #etelah itu, config yang telah ditentukan akan dile"atkan kedalam proses pemanggilan library upload sebelum melakukan proses upload. 0ntuk memulai proses upload dilakukan dengan memanggil perintah upload01do'upload56. Aika berhasil maka +nda dapat memanggil upload0 1data56 untuk mendapatkakn data hasil upload yang mungkin dapat +nda simpan di database. #edangkan jika gagal, maka proses upload akan memberitahu kesalahan apa yang terjadi selama proses upload dan memperlihatkan error tersebut di form upload.
;1 #ebelum mencoba form upload tersebut mari kita buat terlebih dahulu halaman sukses yang diperlukan untuk menampilkan data ) data dari file hasil upload*
GhtmlJ GheadJ GtitleJ%emo 0pload 5ileG,titleJ G,headJ GbodyJ Gh9J roses 0pload Berhasil KKKG,h9J GulJ GRphp foreach 'VuploadMdata as Vitem HJ V6alue(*RJ GliJGRphp echo VitemSRJ* GRphp echo V6alueSRJG,liJ GRphp endforeachS RJ G,ulJ GpJGRphp echo anchor'LuploadsampleL, LCoba lagi KL(S RJG,pJ G,bodyJ G,htmlJ
#impan source code diatas dengan nama 2iew'upload'success.p"p dan simpan di folder uploadsa&ple. $ari kita coba fitur upload ini dengan meng.upload foto yang +nda miliki. $ari kita lihat prosesnya*
:ambar ,.2 -engisi Budul pada Form 7pload
;9
:ambar ,. -emilih :ambar yang 2kan +i 7pload
:ambar ,.! -enekan *ombol 7pload
;3
:ambar ,."+ata C +ata yang +ari File yang +i 7pload
;:
1I.Mena&(a"kan A:AJ
1I.1.$ersiapan Menggunakan A:AJ
+A+8 atau 2synchronous Ba3ascript and D-L merupakan fitur yang terdapat di standard pembangunan sebuah world wide web 'FFF(. %engan menggunakan +A+8, +nda tidak perlu memuat seluruh bagian halaman, cukup bagian tertentu saja yang dimuat ulang sesuai kebutuhan. %engan demikian +A+8 dapat menghemat beban pemuatan halaman web di sisi client. #alah satu kekurangan +A+8 adalah history yang tidak dapat dicatat ketika mengunjungi bagian ) bagian web. &idak seperti web tanpa +A+8 yang dapat menyimpan history +nda ketika mengunjungi halaman web tertentu. %an di percobaan kita kali ini akan digunakan +A+8 yang terdapat di A-uery. !al tersebut dipilih karena dengan A-uery, dapat meringkas "aktu pengembangan aplikasi web yang menggunakan +A+8. &entunya agar percobaan +A+8 ini lebih terlihat, maka diperlukanlah sebuah data yang disimpan di database untuk menampilkan data ) data di aplikasi web ber.+A+8. 4ita akan menggunakan tabel agenda yang terdapat di database pelati"an(asdat. 4ita akan mencoba membuat fitur lihat agenda, tambah agenda, dan cari agenda. %alam percobaan ini kita akan menggunakan model agenda'&odel yang sudah pernah digunakan sebelumnya. !anya saja kita akan menambahkan function yang digunakan untuk melakukan pencarian agenda. Berikut adalah source code yang digunakan untuk melakukan pencarian di tabel agenda*
GRphp class +gendaMmodel e=tends CIM$odel N .......................................................................................... ,, function yang digunakan oleh aja=sample * prosesMcariMagenda function selectMbyMnama'Vnama(N Vthis.Jdb.Jselect'LTL(S Vthis.Jdb.Jfrom'LagendaL(S Vthis.Jdb.Jlike'LnamaL, Vnama, LbothL(S return Vthis.Jdb.Jget'(S O O RJ
4emudian tentu kita memerlukan A-uery itu sendiri. %alam percobaan kita kali ini diperlukan j-uery.1.@.9.min.js. +nda dapat men.download#nya di http*,,j-uery.org. 4emudian buatlah folder dengan nama js di pelati"an(asdat 01 asset. %an taruhlah A-uery di dalam folder js.
;;
1I.2.Me&(uat >itur Meli"at Agenda

!al pertama yang akan kita pelajari adalah menampilkan isi tabel agenda. Aika pada bab 3 kita hanya menampilkan semua data melalui halaman utama. 4ini kita akan memisahkannya pada 3iew lain dan memuatnya kedalam bagian halaman. !al ini dilakukan agar nanti ketika proses pencarian dapat menampilkan jumlah data secara dinamis. 4ita akan membuat controller dengan nama aja4sa&ple yang membutuhkan model agenda'&odel, helper url, dan library input. 4emudian kita akan menampilkan halaman utama yang terdapat di 2iew'da!tar'agenda dan menampilkan daftar agenda yang ada di 2iew'list'agenda. 4enapa dipisah R 4arena dengan cara tersebut kita akan membuat bagian daftar agenda saja yang dinamis dan menanggapi perubahan. #ehingga tidak perlu semua halaman yang dimuat ulang ketika terjadi perubahan. #impan source code diba"ah ini dengan nama aja4sa&ple.p"p di application 01 controllers. Berikut adalah source code dari controller yang akan kita gunakan untuk melihat daftar agenda *
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class +ja=sample e=tends CIMController N function MMconstruct'(N parent**MMconstruct'(S Vthis.Jload.Jmodel'Ldaftaragenda,agendaMmodelL(S Vthis.Jload.Jhelper'LurlL(S Vthis.Jload.Jlibrary'LinputL(S O ,, melihat halaman utama public function inde='(N Vthis.Jload.J6ie"'Laja=sample,6ie"MdaftarMagendaMaja=L(S O ,, proses untuk melihat detail agenda public function lihatMagenda'(N VdataYLdaftarMagendaLZ H Vthis.JagendaMmodel.JselectMall'(.Jresult'(S Vthis.Jload.J6ie"'Laja=sample,6ie"MlistMagendaL, Vdata(S O .......................................................................................... O ,T End of file aja=sample.php T, ,T Location* .,application,controllers,aja=sample.php T,
4emudian kita harus membuat halaman utama untuk menampilkan menu dan daftar agenda. Berikut adalah source code dari halaman utama yang akan kita bangun*
GK%DC&W E htmlJ
;<
GhtmlJ GheadJ GtitleJ%aftar !adir raktikumG,titleJ Gscript typeHIte=t,ja6ascriptI srcHIGRphp echo baseMurl'Lasset,js,j-uery.1.@.9.min.jsL(SRJIJG,scriptJ G,headJ GbodyJ Gh1J%aftar +gendaG,h1J Ga idHIsho".list.agendaI hrefHIja6ascript*6oid'2(IJLihat #emuaG,aJ X Ga idHIsho".form.tambah.agendaI hrefHIja6ascript*6oid'2(IJ&ambah +gendaG,aJ X Ga idHIsho".form.cari.agendaI hrefHIja6ascript*6oid'2(IJCari +gendaG,aJ Gbr ,JGbr ,J Gdi6 idHI6ie".formIJ G,di6J Gbr,J Gdi6 idHI6ie".list.agendaIJ G,di6J G,bodyJ Gscript typeHIte=t,ja6ascriptIJ V'document(.ready'function'(N ,, menampilkan semua list agenda saat pertama kali halaman utama diload V'I\6ie".list.agendaI(.load'LGRphp echo siteMurl'Laja=sample,lihatMagendaL(SRJL(S ,, menampilkan semua list ketika menu lihat agenda ditekan V'I\sho".list.agendaI(.click'function'(N V'I\6ie".formI(.empty'(S V'I\6ie".list.agendaI(.load'LGRphp echo siteMurl'Laja=sample,lihatMagendaL(SRJL(S O(S ,, menampilkan form tambah agenda V'I\sho".form.tambah.agendaI(.click'function'(N V'I\6ie".formI(.load'LGRphp echo siteMurl'Laja=sample,tambahMagendaL(SRJL(S O(S ,, menampilkan form cari agenda V'I\sho".form.cari.agendaI(.click'function'(N V'I\6ie".formI(.load'LGRphp echo siteMurl'Laja=sample,cariMagendaL(SRJL(S O(S O(S G,scriptJ G,htmlJ
#ebelum menyimpan source code diatas, buatlah terlebih dahulu folder yang bernama aja4sa&ple di application 01 2iews. 4emudian #impanlah source code diatas dengan nama 2iew'da!tar'agenda.p"p di folder aja4sa&ple. $ari kita simak beberapa bagian source code diatas* Bagian berikut merupakan cara untuk me.load A-uery ke dalam halaman web*
Gscript typeHIte=t,ja6ascriptI srcHIGRphp echo baseMurl'Lasset,js,j-uery.1.@.9.min.jsL(SRJIJG,scriptJ
Bagian berikut akan menampilkan form di halaman utama*
Gdi6 idHI6ie".formIJ
;@
G,di6J
Bagian berikut akan menampilkan daftar agenda*
Gdi6 idHI6ie".list.agendaIJ G,di6J
,5docu&ent6.read%5!unction56786K digunakan untuk memulai membuka script A-uery ,5LM2iew0list0agendaL6.load5.NOp"p ec"o site'url5.aja4sa&ple/li"at'agenda.6KO1.6K digunakan untuk menambatkan tampilan li"at'agenda dari controller aja4sa&ple ke dalam komponen yang memiliki id 2iew0list0agenda ,5LMs"ow0list0agendaL6.click5!unction56786K digunakan untuk menangani e3ent klik pada komponen yang memiliki id s"ow0list0agenda
%an terakhir kita harus membuat 3iew yang berisi daftar agenda yang akan ditambatkan di halaman utama. Berikut adalah source code nya*
GRphp foreach 'VdaftarMagenda as Vagenda( NRJ GfieldsetJ Gh9JGRphp echo Vagenda.JnamaSRJG,h9J Gbr ,JGbr ,J GRphp echo Vagenda.JketeranganSRJ G,fieldsetJ Gbr ,J GRphp O RJ
#impan source code diatas dengan nama 2iew0list0agenda.p"p kemudian simpan di application 01 2iews 01 aja4sa&ple. #ekarang kita coba akses controller aja4sa&ple melalui 0RL berikut* http*,,localhost,pelatihanbasdat,inde=.php,aja=sample #ebelumnya kita memerlukan de3eloper tools tekan Ctrl P )"i!t P K jika +nda menggunakan 5irefo= atau tekan Ctrl P )"i!t P : jika +nda $enggunakan Chrome. $aka +nda akan melihat tampilan seperti berikut ini*
:a mbar 18.1 @alaman Web yang -engandung 2B2D

;7 $elihat lebih dalam apa yang terjadi ketika +A+8 dieksekusi di halaman web yang menggunakan +A+8*
:ambar 18.2 @alaman yang 0erhasil +imuat dengan 2B2D ;etika +iperiksa -enggunakan +e3eloper *ools pada 0rowser
:ambar 18. @alaman yang :agal +imuat dengan 2B2D ;etika +iperiksa -enggunakan +e3eloper *ools pada 0rowser
<2
1I.3.Mena&(a"kan Cari Agenda

#elanjutnya kita akan mencoba menambahkan fitur searching yang menggunakan +A+8 untuk mempercepat proses pencarian data. &idak seperti searching yang menggunakan +A+8, searching seperti ini membuat +nda mendapatkan data lebih cepat dan interaktif ketimbang cara biasa. 4ita akan membuat sebuah form yang akan menampilkan hasil pencarian dengan +A+8. 4etika user mengetikkan kata kunci di field pencarian maka saat itu juga hasil akan dimunculkan melalui +A+8. %isini kita akan menggunakan e3ent ke%up56 pada A-uery untuk melakukan hal tersebut. &entunya kita memerlukan sebuah $uery untuk mengambil data berdasarkan kemiripan kata kunci yang dituju. %alam hal ini adalah judul agenda. Euery tersebut sudah dibuat sejak a"al di bab ini. #ekarang, tinggal menggunakan $uery tersebut di controller aja4sa&ple. Berikut adalah function cari56 dan proses'cari'agenda56 di controller aja4sa&ple yang akan digunakan untuk proses pencarian*
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class +ja=sample e=tends CIMController N .......................................................................................... ,, proses untuk mencari agenda public function cariMagenda'(N Vthis.Jload.J6ie"'Laja=sample,formMcariMagendaL(S O public function prosesMcariMagenda'(N Vnama H Vthis.Jinput.Jpost'LnamaL(S VdataYLdaftarMagendaLZ H Vthis.JagendaMmodel.JselectMbyMnama'Vnama(.Jresult'(S Vthis.Jload.J6ie"'Laja=sample,6ie"MlistMagendaL, Vdata(S O .......................................................................................... O ,T End of file aja=sample.php T, ,T Location* .,application,controllers,aja=sample.php T,
#etelah membuat function yang dibutuhkan, kini kita akan membuat form pencarian yang terdiri dari input teks dan tombol batal. 5nput teks ini digunakan untuk menampung kata kunci, sedangkan tombol batal digunakan untuk menutup form jika ingin membatalkan pencarian. 4emudian tombol batal akan dihubungkan dengan e3ent click56 yang akan melakukan penutupan form. !al ini ditangani oleh A-uery. #edangkan input teks dihubungkan dengan e3ent ke%up56 dan e3ent tersebut akan menangani proses penampilan hasil data yang hasilnya akan dimuat ke komponen di2 yang mempunyai id 2iew0list0agenda. Berikut adalah source code dari form pencarian berbasis +A+8*
<1
GfieldsetJ Gform actionHII methodHI D#&IJ ?ama * Ginput idHIinput.namaI typeHIte=tI nameHInamaI siEeHI122I,J Ginput idHIbtn.form.closeI typeHIbuttonI 6alueHIBatalI ,J G,formJ G,fieldsetJ Gscript typeHIte=t,ja6ascriptIJ ,, menutup form ketika tidak akan digunakan V'I\btn.form.closeI(.click'function'(N V'L\6ie".formL(.html'LL(S O(S ,, melakukan proses pencarian ketika mengetikkan nama agenda V'L\input.namaL(.keyup'function'(N 6ar nama H V'L\input.namaL(.6al'(S V.aja='N type*I D#&I, url*IGRphp echo siteMurl'Laja=sample,prosesMcariMagendaL(SRJI, data*LnamaHLBnama, success*function'html(N V'L\6ie".list.agendaL(.html'html(S O O(S O(S G,scriptJ
#impanlah source code diatas dengan nama !or&'cari'agenda.p"p kemudian simpan di application 01 2iews 01 aja4sa&ple. 4emudian coba tampilkan form tersebut dan cobalah mencari salah satu agenda yang sudah disimpan di database. Berikut adalah contoh penggunaan dari form pencarian berbasis +A+8 *
:ambar 18.! -elihat Form &encarian

<1
:ambar 18." -elihat @asil &encarian
1I.4.Mena&(a"kan >itur +a&(a" Agenda

%i fitur tambah agenda ini, function untuk memunculkan form tambah agenda yang terdapat di function ta&(a"'agenda56 dan memproses nilai ) nilai dari form tambah agenda yang terdapat di function proses'ta&(a"'agenda56 tidak terlalu berbeda jauh. !anya saja berbeda dalam memanggil 3iew dan cara memproses form tambah agenda. Berikut adalah function ta&(a"'agenda56 dan proses'ta&(a"'agenda56 di controller aja4sa&pleD
GRphp if ' K defined'LB+#E +&!L(( e=it'L?o direct script access allo"edL(S class +ja=sample e=tends CIMController N .......................................................................................... ,, proses untuk memproses tambah agenda public function tambahMagenda'(N Vthis.Jload.J6ie"'Laja=sample,formMtambahMagendaL(S O public function prosesMtambahMagenda'(N VdataYLnamaLZ H Vthis.Jinput.Jpost'LnamaL(S VdataYLketeranganLZ H Vthis.Jinput.Jpost'LketeranganL(S Vthis.JagendaMmodel.JinsertMagenda'Vdata(S O
<9
.......................................................................................... O ,T End of file aja=sample.php T, ,T Location* .,application,controllers,aja=sample.php T,
&entunya form tambah agenda akan digunakan sebagai antarmuka antara user dan sistem. Bila pada cara tanpa +A+8 kita memerlukan atribut action di dalam tag !or&. 4ini hal tersebut ditangani oleh +A+8 A-uery sehingga tidak perlu terjadi proses memuat ulang seluruh halaman web. Form tambah agenda akan memproses tambah agenda ketika terjadi e3ent su(&it56. (3ent tersebut akan terjadi ketika user menekan tombol submit. %engan menggunakan +A+8, data akan dikirimkan terlebih dahulu ke function yang dituju di controller kemudian jika hal tersebut berhasil maka lakukan aksi terkait saat proses tambah agenda berhasil. %alam hal ini jika proses tambah agenda berhasil maka daftar agenda akan dimuat ulang. Berikut adalah source code dari form tambah agenda*
GfieldsetJ Gform idHIform.tambah.agendaIJ ?ama * Ginput nameHInamaI siEeHI122I,J Gbr,JGbr,J 4eterangan * Gbr,JGte=tarea nameHIketeranganI colsHI@9I ro"sHI:IJG,te=tareaJ Gbr,JGbr,J Ginput typeHIsubmitI 6alueHI&ambahI ,J Ginput idHIbtn.form.closeI typeHIbuttonI 6alueHIBatalI ,J G,formJ G,fieldsetJ Gscript typeHIte=t,ja6ascriptIJ V'document(.ready'function'(N ,, menutup form ketika tidak akan digunakan V'I\btn.form.closeI(.click'function'(N V'L\6ie".formL(.html'LL(S O(S ,, melakukan proses tambah agenda ketika tombol ditekan V'L\form.tambah.agendaL(.submit'function'(N V'L\6ie".formL(.empty'(S V.aja='N type*L D#&L, url*IGRphp echo siteMurl'Laja=sample,prosesMtambahMagendaL( RJI, data*V'this(.serialiEe'(, success*function 'data( N V'L\6ie".list.agendaL(.load'IGRphp echo siteMurl'Laja=sample,lihatMagendaL( RJI(S O, error*function 'data(N V'L\6ie".list.agendaL(.html'LGh1J enambahan agenda gagal KKG,h1JL(S O O(S return falseS O(S O(S
<3
G,scriptJ
#impan source code diatas dengan nama !or&'ta&(a"'agenda.p"p dan taruh di folder application 01 2iews 01 aja4sa&ple . 4emudian coba akses form tersebut melalui menu ta&(a" agenda dan cobalah buat agenda baru*
:ambar 18.% -enampilkan Form *ambah 2genda
:ambar 18.' -embuat 2genda 0aru
<:
:ambar 18.) 2genda 0aru 0erhasil +itambahkan

Modul Pelatihan Ci 2014-2-4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Modul Pelatihan Ci 2014-2-4

Uploaded by

Copyright:

Available Formats

1

1.Berkenalan dengan CodeIgniter

1.2.Cara Kerja CodeIgniter

:ambar 1.1 /ara ;er<a /ode5gniter

1.3.Cara Kerja MVC

1.4. a!tar Istila" di CodeIgniter

1.#.$eralatan %ang iperlukan

:ambar 2.1 /ode5gniter saat pertama kali di install

). #elamat +nda berhasil melakukan instalasi CodeIgniter

2.2.Mengenal )truktur irektori CodeIgniter

2.3.Mengu(a" +a&pilan Awal CodeIgniter

:ambar 2. -engubah ;ode welcomeAmessage.php

:ambar 2.! @alaman Welcome -essage yang 0erhasil +iubah

2.4.Me&(uat Function Baru di Controller

:ambar 2." *ampilan Lihat 5nfo

2.5.Me&(uat Function Baru %ang Mena&pilkan View +erpisa" di Controller

:ambar 2.% *ampilan .iew 0iodata

2.6.Mena&(a"kan Argu&en pada Function di Controller

1: kode ju&la"'angka56* ................................................................................

anggil function tersebut melalui 0RL berikut*

http*,,pelatihanbasdat,inde=.php,"elcome,jumlahMangka,12,12 Aika berhasil akan tampil halaman seperti berikut ini*

:ambar 2.) *ampilan .iew Bumlah 2ngka 1aat ;elebihan 2rgumen

3.Mengenal Controller di CodeIgniter 9e(i" :au"

GhtmlJ GheadJ GtitleJ4alkulator CIG,titleJ

#edangkan untuk source code 3iew "asil'"itung adalah sebagai berikut*

:ambar .2 *angkapan Layar .iew Form @itung ;etika +iberikan -asukan

:ambar . *angkapan Layar .iew @asil @itung

4.Mengenal Create <ead =pdate elete di CodeIgniter

:ambar !.2 -embuat *abel 2genda

4.2.Kon!igurasi ata(ase di CodeIgniter

4.3.Me&(uat Model di CodeIgniter

4.4.Me&(uat Controller untuk Aplikasi Agenda

:ambar !.% *ampilan 5ndex di /ontroller 2genda

4.#.Mena&(a"kan >itur +a&(a" Agenda di Controller Agenda

$ari kita coba hasil dari pekerjaan kita diatas.

ertama klik menu ta&(a" agenda di

91 halaman inde4 di controller da!taragenda. erhatikan gambar berikut*

:ambar !.18 2genda 0aru 0erhasil +5tambahkan

4.?.Mena&(a"kan >itur @dit Agenda di Controller Agenda

Aadi ketika ditunjuk, 0RL akan seperti berikut ini*

:ambar !.11 -encoba -enu (dit di +aftar 2genda

#impan source code diatas dengan nama !or&'edit'agenda.p"p di application 01 2iews 01

:ambar !.1 -encoba (dit 2genda

9; !asil akhirnya adalah seperti berikut*

:ambar !.1! 2genda yang +ipilih 0erhasil +iubah

4.A.Mena&(a"kan >itur Bapus Agenda di Controller Agenda

:ambar !.1" 1alah 1atu 2genda 1ebelum +ihapus

:ambar !.1% 1etelah &roses @apus 2genda 1elesai

#.I&ple&entasi )ession CodeIgniter di $roses Autentikasi Akun

:ambar ".2 +ata +ummy untuk *abel 7ser

#.2.Me&(uat Model untuk +a(el =ser

#.3.Me&(uat Controller Account

31 set'2alue56, mencetak kembali nilai masukan di form sebelumnya

:ambar ". *ampilan Form Login

#.4.Mena&(a"kan $roses 9ogin di Controller Account

:ambar ".! -emasukkan 2kun di Form Login

:ambar "." 0erhasil ;e @alaman 1ukses

#.#.Mena&(a"kan >itur 9ogout di Controller Account

:ambar ".% -encoba -enu Logout

?.Mengenal $agination di CodeIgniter

:ambar %.1 *ampilan @alaman &aging

:ambar %.2 @alaman &agination ketika 0erpindah @alaman

A.Me&a"a&i >or& Bandling di CodeIgniter

:ambar '.1 Form yang dibuat dengan @elper Form

http,,pelatihanbasdat,inde=.php,"elcome,jumlahMangka,12,12 Aika berhasil akan tampil halaman seperti berikut ini