Modul Pelatihan Ci 2014-2-4 PDF

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.RC 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 ?etB$
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.RC 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*
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
:ambar 1.1 /ara ;er<a /ode5gniter
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
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".
:ambar 1.2 /ara ;er<a -./ (1umber = http=>>killer#web#
de3elopment.com>section>1>)
:
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 %5. #ebagai contoh,
%5Lib, 5%5,
<. +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*
). #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*
:ambar 2.1 /ode5gniter saat pertama kali di install
@
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
9. Berisi file dokumentasi tentang penggunaan
library yang terdapat di CodeIgniter
3. Berisi file dokumentasi tentang penggunaan
:ambar 2.2 1truktur +irektori
/ode5gniter
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:
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 classHIfooterIJage rendered in GstrongJNelapsedMtimeOG,strongJ secondsG,pJ
G,di6J
:ambar 2. -engubah
;ode
welcomeAmessage.php
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 classHIfooterIJage 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 IGheadJGtitleJelatihan Code Igniter 1213G,titleJG,headJIS
echo IGh1Jelatihan Code Igniter 1213G,h1JIS
echo IGh9Jresented by Lab Basis %ata Ilmu 4omputer 0IG,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
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 file yang berisi biodata
fiktif seorang mahasis"a ilmu komputer. File tersebut berisi kode seperti berikut ini*
GK%DC&WE htmlJ
Ghtml langHIenIJ
GheadJ
GtitleJBiodatakuG,titleJ
G,headJ
GbodyJ
Gh1J#upeno RapopoG,h1J
Gh9JIlmu 4omputer 0I 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*
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

:ambar 2." *ampilan Lihat 5nfo
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*
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
:ambar 2.% *ampilan .iew 0iodata
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*
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
:ambar 2.' *ampilan .iew Bumlah 2ngka
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*
class Calculator e=tends CIMController N

public function MMconstruct'(
N
parent**MMconstruct'(S
Vthis.Jload.Jhelper'LurlL(S
Vthis.Jload.Jlibrary'LinputL(S
O

N
Vthis.Jload.J6ie"'LformMhitungL(S
O
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O
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 methodHID#&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
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
#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.
#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 !.1 -embuat +atabase
: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*
#etelah selesai mengisikan field yang dibutuhkan, tekan tombol )a2e yang berada di ba"ah form
pengisian field C field tabel*
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*
:ambar !. *angkapan Layar ;etika -engisikan Field di *abel 2genda
:ambar !.! *angkapan Layar *ombol
1a3e yang @arus +itekan ;etika 1elesai
-engisikan Field
13
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
:ambar !." *angkapan Layar dari *abel 2genda yang 0erhasil +ibuat
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

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.J"here'LidMagendaL, VidMagenda(S
O

function updateMagenda'VidMagenda, Vdata(N
Vthis.Jdb.Jupdate'LagendaL, Vdata(S
O

function deleteMagenda'VidMagenda(N
Vthis.Jdb.Jdelete'LagendaL(S
O

1<

,, function yang digunakan oleh paginationsample
function selectMallMpaging'VlimitHarray'((N
if 'Vlimit KH ?0LL(
Vthis.Jdb.Jlimit'VlimitYLperpageLZ, VlimitYLoffsetLZ(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.
class %aftaragenda e=tends CIMController N

N
Vthis.Jload.Jmodel'Ldaftaragenda,agendaMmodelL(S
O

1@
,, bagian pengelolaan agenda
N
VdataYLdaftarMagendaLZ H Vthis.JagendaMmodel.JselectMall'(.Jresult'(S
Vthis.Jload.J6ie"'Ldaftaragenda,daftarMagendaL, Vdata(S
O
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O
#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&WE 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*
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*
:ambar !.% *ampilan 5ndex di /ontroller 2genda
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
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&WE htmlJ
GhtmlJ
GheadJ
G,headJ
GbodyJ
Gh1J5orm &ambah +gendaG,h1J
GfieldsetJ
Gform actionHIGRphp echo siteMurl'Ldaftaragenda,prosesMtambahMagendaL(SRJI methodHID#&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*
4emudian jika berhasil, +nda akan melihat tampilan berikut*
#ekarang kita coba masukkan sebuah agenda baru sebagai percobaan seperti pada gambar berikut
:ambar !.' -encoba -enu *ambah 2genda
:ambar !.) -elihat *ampilan Form *ambah 2genda
91
ini*
#etelah memberikan masukan, tentunya tekan tomboh +a&(a" pada form tersebut. Lalu Lihatlah
apa yang akan terjadi*
:ambar !., -enambahkan 2genda 0aru
: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(*
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
GfieldsetJ
Gbr ,J
GpJ
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*
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

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
VidMagendaHVthis.Jinput.Jpost'LidMagendaL(S
Vthis.JagendaMmodel.JupdateMagenda'VidMagenda, Vdata(S
O
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O
4emudian agak berbeda sedikit dengan 3iew !or&'ta&(a"'agenda, isi source code dari 3iew
!or&'edit'agenda adalah sebagai berikut*
GK%DC&WE htmlJ
GhtmlJ
GheadJ
G,headJ
GbodyJ
Gh1J5orm Edit +gendaG,h1J
GfieldsetJ
Gform actionHIGRphp echo siteMurl'Ldaftaragenda,prosesMeditMagendaL(SRJI methodHID#&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*
#ekarang coba ubah sedikit data yang dipilih sesuai kehendak masing ) masing. $isal dalam
gambar diba"ah ini diubah seperti berikut*
:ambar !.12 @alaman (dit 2genda
:ambar !.1 -encoba (dit 2genda
9;
!asil akhirnya adalah seperti berikut*
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(*
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
GfieldsetJ
Gbr ,J
GpJ
G,pJ
G,fieldsetJ
Gbr ,J
:ambar !.1! 2genda yang +ipilih 0erhasil +iubah
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*
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

public function deleteMagenda'VidMagenda(N
Vthis.JagendaMmodel.JdeleteMagenda'VidMagenda(S
O
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O
%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*
4emudian setelah berhasil membuat tabel diatas, isikan data dummy seperti pada gambar berikut
ini*
:ambar ".1 1truktur *abel 7ser di +atabase &elatihan 0asdat
: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
O
,, cek keberadaan user di sistem
function checkMuserMaccount'Vusername, Vpass"ord(N
Vthis.Jdb.Jfrom'LuserL(S
Vthis.Jdb.J"here'LusernameL, Vusername(S
Vthis.Jdb.J"here'Lpass"ordL, Vpass"ord(S

O
,, mengambil data user tertentu
function getMuser'VidMuser(N
Vthis.Jdb.Jfrom'LuserL(S
Vthis.Jdb.J"here'LidMuserL, VidMuser(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
class +ccount e=tends CIMController N
Vthis.Jload.Jmodel'Laccount,userMmodelL(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
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*
#.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*
:ambar ". *ampilan Form Login
31
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
,, 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, Lass"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, Leringatan * 0sername dan ass"ord
tidak cocokL(S
redirect'siteMurl'LaccountL((S
O
O

O
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
public function 6ie"MsuccessMpage'(N
VloggedMin H Vthis.Jsession.Juserdata'LloggedMinL(S
if 'KVloggedMin(N
O

Vthis.Jload.J6ie"'Laccount,successMpageL(S
O

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O
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*
4emudian jika berhasil, +nda akan diarahkan ke function 2iew'success'page56 seperti pada
gambar berikut *
:ambar ".! -emasukkan 2kun di Form Login
: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*
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
,, keluar dari sistem
public function logout'(N
Vthis.Jsession.JsessMdestroy'(S
O
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O
#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*
class aginationsample e=tends CIMController N

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

,, function yang digunakan oleh paginationsample
function selectMallMpaging'VlimitHarray'((N
if 'Vlimit KH ?0LL(
Vthis.Jdb.Jlimit'VlimitYLperpageLZ, VlimitYLoffsetLZ(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&WE htmlJ
GhtmlJ
GheadJ
G,headJ
GbodyJ
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

GfieldsetJ
3@
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
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*
class 5ormhandling e=tends CIMController N

N
Vthis.Jload.Jlibrary'LformM6alidationL(S
O

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
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
:ambar '.1 Form yang dibuat dengan @elper Form
:ambar '.2 1ource /ode dari Form yang dibuat dengan @elper Form
: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*
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, Lass"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 '.% @alaman 1ukses ;etika .alidasi berhasil
:ambar '." Form ;etika +iisi +engan +ata yang 1esuai
::
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*
#eperti biasa kita membutuhkan controller yang akan menampilkan 3iew yang berisi kode
!&$L. %alam percobaan ini kita membutuhkan controller seperti berikut ini*
class Bootstrapsample e=tends CIMController N

public function MMconstruct'(N
O
:ambar ).1 1truktur Folder 0ootstrap yang +igabungkan
dengan /ode5gniter
:;

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&WE 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
Glabel classHIcontrol.labelI forHIinput21IJ&"itterG,labelJ
Ginput typeHIte=tI classHIinput.=largeI idHIinput21IJ
Gp classHIhelp.blockIJIsikan akun &"itter +ndaG,pJ
G,di6J
G,di6J
Glabel classHIcontrol.labelI forHIselect21IJekerjaanG,labelJ
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&WE 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*
class 0ploadsample e=tends CIMController N

N
O

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,
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*
:ambar ,.1 *angkapan Layar Form 7pload
;1
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
Gh9Jroses 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 ,.! -enekan *ombol 7pload
:ambar ,. -emilih :ambar yang 2kan +i 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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
,, function yang digunakan oleh aja=sample * prosesMcariMagenda
function selectMbyMnama'Vnama(N
Vthis.Jdb.Jlike'LnamaL, Vnama, LbothL(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 *
class +ja=sample e=tends CIMController N
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&WE htmlJ
;<
GhtmlJ
GheadJ
Gscript typeHIte=t,ja6ascriptI srcHIGRphp echo baseMurl'Lasset,js,j-uery.1.@.9.min.jsL(SRJIJG,scriptJ
G,headJ
GbodyJ
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*
GfieldsetJ
Gbr ,JGbr ,J
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*
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
,, 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
#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 methodHID#&IJ
?ama * Ginput idHIinput.namaI typeHIte=tI nameHInamaI siEeHI122I,J
Ginput idHIbtn.form.closeI typeHIbuttonI 6alueHIBatalI ,J
G,formJ
G,fieldsetJ

,, 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*ID#&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
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

,, proses untuk memproses tambah agenda
public function tambahMagenda'(N
Vthis.Jload.J6ie"'Laja=sample,formMtambahMagendaL(S
O

public function prosesMtambahMagenda'(N
Vthis.JagendaMmodel.JinsertMagenda'Vdata(S
O
:ambar 18." -elihat @asil &encarian
<9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O
&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
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*LD#&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'LGh1Jenambahan 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 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pelatihan Ci 2014-2-4 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

1

1.Berkenalan dengan CodeIgniter

Anda mungkin juga menyukai