MODUL

PELATIHAN
CODE IGNITER

A. Konsep MVC (Model View Controller), OOP (Object Oriented

Programming) pada Framework CodeIgniter
CodeIgniter (CI) adalah suatu framework pengembangan aplikasi web berbasis PHP. CI
menyediakan banyak library sehingga memungkinkan mengembangkan aplikasi dengan lebih cepat.
CI adalah salah satu framework PHP yang sangat banyak digunakan developer website untuk
membuat websitenya. CI adalah sebuah kerangka (framework) pembangunan aplikasi atau disebut
toolkit untuk developer yang akan membuat aplikasi web dengan PHP. Tujuan CI adalah supaya
pembangunan aplikasi lebih cepat dibanding menulis source code dari awal, karena CI telah
meyediakan banyak library untuk proses-proses yang sering digunakan pada suatu aplikasi. CI
dibangun menggunakan konsep Model-View-Controller (MVC). Secara umum kelebihan yang dimiliki
oleh CI jika dibandingkan dengan framework PHP lainnya adalah dapat kita lihat dari segi kecepatan
akses website, penulisan program yang lebih terstruktur dan yang terpenting dukungan dari beberapa
komunitas pendukung.

MVC
MVC adalah konsep dasar yang digunakan oleh CodeIgniter. Apabila ingin develop
menggunakan framework ini, alangkah baiknya kita mengenal terlebih dahulu konsep MVC pada Code
Igniter. Penggunaan metode penulisan MVC memudahkan developer dalam hal pengembangan
website. Selain itu, dengan penggunaan struktur MVC, developer akan mudah melakukan tracing
terhadap website apabila terjadi kesalahan pemrograman ketika proses pengembangan website.
Komponen-komponen pendukung MVC antara lain:
1. Model
Model sangat erat hubungannya dengan data yang berinteraksi langsung dengan database. Dalam
struktur model, file yang terdapat didalamnya kebanyakan berupa teks, file XML dan web service.
Didalam struktur ini juga terdapat sebuah class yang berfungsi unguk create, update dan delete
data pada website.
2. View
view sangat erat kaitannya dengan tampilan website yang ditampilkan pada end user. Tampilan
tersebut bisa berupa halaman web, rss, javascript dan lain sebagainya. Biasanya kita lebih familiar
dengan istilah HTML, CSS dan Javascript, nah lebih kurang konsep View memiliki fungsi seperti itu.
Pada struktur View, disarankan untuk tidak terdapat proses logika dan proses pengitungan data.
3. Controller
Controller mempunyai fungsi sebagai penghubung antara data dan view. Didalam proses ini
terdapat class yang memproses permintaan dari view ke dalam struktur data yang berada di model.
1

Sama dengan ketentuan di view, pada struktur kontroller sangat disarankan untuk tidak terdapat
proses logika dan perhitungan data. Controller sendiri memiliki tugas untuk menyediakan variabel
guna ditampilkan pada view dan menghubungkan model dengan database.
Berdasarkan penjelasan singkat yang disampaikan pada penjelasan diatas, dapat ditarik
kesimpulan bahwa otak dari seluruh proses kerja CodeIgniter berada di Controller, Tampilan UI dari
CodeIgniter berada pada View dan data-data website tersebut berada pada Model.
Beberapa keunggulan CI antara lain:
1. Gratis
2. Ringan
3. Cepat
4. Menggunakan Konsep MVC
5. Clean URL, URL yang digunakan CI bersifat search-engine friendly. Menggunakan pendekatan
segment-based
6. URL Friendly, Pada CodeIgniter meminimalisasi penggunaan $_GET dan digantikan dengan
penggunakan URI, sehingga setiap output URL yang ditampilkan akan sedikit dalam bahasa
manusiawi
7. Library yang lengkap
8. Dapat diperluas
9. Developer dapat dengan mudah mengembangkan (extend) library, helper atau bahkan perluasan
class inti CI
10.Dukungan teknis yang lengkap di forum CI

Alur proses aplikasi

Berikut ini adalah gambar yang mengilustrasikan alur proses data pada CI:

Gambar 1. Ilustrasi alur proses data pada CI

1. Index.php berfungsi sebagai pengendali awal, menginisialisasi sumber daya utama yang
dibutuhkan CodeIgniter.
2. Router memeriksa paket HTTP request untuk menentukan aksi apa yang harus dilakukan oleh
sistem. Jika cache tersedia, maka halaman langsung dikirim ke browser, eksekusi sistem yang
normal akan dilewati.
3. Security. Sebelum Application Controller dieksekusi, paket HTTP request dan semua data yang
dikirimkan pengguna akan disaring terlebih dahulu oleh Security Class. Application Controller
menginisialisasi model, library utama, helpers dan semua sumberdaya yang dibutuhkan untuk
setiap request.
4. Antarmuka aplikasi (view) yang sudah disiapkan dikirimkan ke browser. Jika caching diaktifkan,
maka view akan disimpan sementara untuk request yang sama berikutnya.
5. Model, merepresentasikan struktur data. Biasanya class model akan berisi fungsi-fungsi untuk
mengambil data, insert data, dan update data ke database. Pada CI, model tidak harus digunakan,
tapi hal ini akan menghilangkan konsep MVC itu sendiri.
6. View, adalah informasi / halaman yang ditampilkan ke pengguna. Sebuah view biasanya adalah
sebuah web page, tapi di CodeIgniter view juga dapat berupa bagian-bagian halaman web, seperti
header dan footer.
7. Controller, berfungsi sebagai penghubung antara Model, View dan dengan sumber daya lain yang
digunakan untuk memproses HTTP request.
8. Libraries, adalah macam-macam class yang masing-masing mempunyai fungsi khusus yang dapat
digunakan untuk mengembangkan aplikasi. Contoh library database, email, validasi form, dan lainlain.
9. Helper, seperti namanya berfungsi menolong untuk melakukan tugas-tugas tertentu. Setiap file
helper terdiri dari kumpulan fungsi (function). Contoh URL Helper yang berfungsi untuk membuat
link, Form helper untuk membuat elemen-elemen form. Tidak seperti library, helper tidak
menggunakan format Object Oriented, sehingga dapat digunakan dimanapun, baik itu di model,
view, controller dan library.

Object Oriented Programming (OOP)

Konsep OOP adalah bahwa semua pemecahan masalah dibagi ke dalam kelas (class). Dalam
OOP data dan fungsi-fungsi yang akan mengoperasikan data digabungkan menjadi satu kesatuan yang
bisa disebut sebagai kelas. Kelas adalah suatu struktur dalam program yang berisi satu atau beberapa
metode (dapat berupa fungsi dan/atau prosedur) dan atribut (dapat berupa data ataupun variabel
yang akan dioperasikan dalam metode).

Setiap Objek selalu memiliki suatu keadaan (state) dan behaviour yang dapat mengubah state
tersebut. Contohnya manusia memiliki state umur, tinggi, berat, dsb. Manusia juga memiliki behaviour
makan, minum, bergerak, dsb. Kita dapat menganggap state sebagai suatu kata benda karena tidak
melakukan operasi justru dilakukan operasi padanya. Sedangkan behaviour dapat dianggap sebagai
kata kerja karena dia berfungsi untuk melakukan operasi.
Dalam OOP juga tidak terlepas dari istilah inheritance. Inheritance merupakan pewarisan
atribut (variable) dan method pada sebuah class yang diperoleh dari sebuah class yang telah
terdefinisi. Sebagai Contoh adalah Kelas Mamalia memiliki sub kelas Sapi, kucing, kambing dan lainlain.
Dalam CI, konsep OOP digunakan untuk membuat kelas, method, dan pewarisannya. Cara
penulisa kelas, method, dan pewarisan secara umum sama dengan bahasa-bahasa lain yang telah
menerapkan OOP.
Class nama_kelas extends kelas_induk {
Function nama_method1(){
//perintah-perintah
}
Function nama_method2(){
//perintah-perintah
}
}

B. Instalasi dan Pengenalan CodeIgniter

Instalasi Apache webserver dan MySQL server
1. Download XAMPP (https://www.apachefriends.org)
2. Install XAMPP

Instalasi CI
1. Download CI (http://www.codeigniter.com/)
2. Pindahkan hasil download ke {XAMPP_DIR}/htdocs/
3. Extraksi file CI
4. Ganti nama folder sesuai project
5. Konfigurasi

Struktur dasar directory CI

Beberapa direktori dasar yang sering digunakan antara lain:
1. Models
2. Controllers
4

3. Views
4. Config
5. Libraries
6. Helpers

Konfigurasi Dasar pada CI

Konfigurasi CI berada di folder config. Untuk konfigurasi dasar terletak di config.php.
Pengaturan fungsi-fungsi yang ingin diaktifkan langsung tanpa harus membuat satu persatu terletak
pada autoload.php. untuk mengarahkan halaman pertama kali yang akan dijalankan terletak di
routes.php.

Konfigurasi Basisdata pada CI

Konfigurasi basis data terletak pada file database.php. beberapa pengaturan yang ada pada file
database.php antara lain untuk menentukan nama host, username, password, nama database, driver
database, dan lain-lain.

Alamat URL pada CI

Secara default, URL pada CodeIgniter didesain agar search-engine dan human friendly,
menggunakan pendekatan segment-based.
Struktur URL:
example.com/index.php/class/function/parameter1/parameter2
1. Index.php merupakan segment ke-0.
2. Segment pertama merepresentasikan class controller yang diakses.
3. Segment kedua merepresentasikan nama method yang dipanggil pada class tersebut.
4. Segment ketiga dan seterusnya bersifat optional, merepresentasikan parameter masukan untuk
fungsi yang dipanggil tersebut.

Membuat Hello world

1. Jalankan XAMPP Control Panel
2. Aktifkan Apache dan MySQL
3. Buat file php dengan nama file vhello.php simpan pada folder application/views

<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Hello World
</body>
</html>
5

4. Lalu buat file php dengan nama file hello.php dan disimpan pada folder application/controller
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Hello extends CI_Controller {
public function index()
{
$this->load->view('vhello');
}
}
?>
Perintah if ( ! defined('BASEPATH')) exit('No direct script access allowed'); digunakan agar
kita tidak bisa mengeksekusi langsung file PHP tanpa melalui index.php yang terdapat dalam
CodeIgniter.
Nama Class harus sama dengan nama file. Misalnya nama filenya hello.php maka nama Class
nya harus Hello. Extend CI_Controller maksudnya adalah class Hello mewarisi seluruh method
public yang terdapat pada class CI_Controller.
public function index() adalah method utama pada class Hello yang akan langsung dipanggil.
$this->load->view('vhello') adalah perintah untuk memanggil tampilan atau view vhallo.php.

5. Kemudian buka web browser dengan URL http://localhost/latihanci/index.php/hello

hello pada URL tersebut adalah nama class yang dipanggil
Jika kita hanya menuliskan http://localhost/latihanci/index.php maka akan menjalankan method
yang diarahkan pada file application/config/routes.php.

Library dan helper

Library dapat dikatakan sebagai kumpulan tools yang dapat digunakan untuk membantu sebuah
proses. CodeIgniter telah menyediakan banyak library yang dapat digunakan secara langsung. Library
pada dasarnya adalah sebuah kelas yang diletakkan di dalam folder system/libraries atau
application/libraries. Library yang terletak di dalam folder system merupakan library bawaan dari
CodeIgniter yang secara default di beri awalan CI_. Untuk library buatan sendiri harus diletakkan di
dalam folder application/libraries.
Cara pemanggilannya dapat dilakukan dengan perintah :
$this->load->library('nama_library');
Cara penggunaannya adalah :
$this->nama_library->fungsi();

Contoh penggunaan library :

$this->load->library('table');
$data = array(
array('Name', 'Color', 'Size'),
array('Fred', 'Blue', 'Small'),
array('Mary', 'Red', 'Large'),
array('John', 'Green', 'Medium')
);
echo $this->table->generate($data);
Begitu juga dengan helper, cara pemanggilannya juga hampir sama dengan library yaitu
$this->load->helper('nama_helper');
Cara penggunaannya juga hampir mirip yaitu $this->nama_helper->fungsi();

C. Pemanfaatan Bootstrap
Bootstrap adalah front-end framework yang memiliki tampilan yang menarik, bagus dan luar
biasa yang mengedapankan tampilan untuk web browser dan mobile device (Handphone, smartphone
dll.) untuk mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML,
CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Modifikasi Bootstrap pada CI

Cara penggunaan bootstrap yaitu :
1. Download template bootstrap yang diinginkan
2. Ekstraksi file hasil download
3. Copy-kan file/folder pendukung (css, js, img, font) ke project aplikasi yang kita bangun. File/folder
pendukung di copy-kan ke latihanci/assets. Sebelumnya folder assets harus dibuat terlebih
dahulu.
4. Pada folder views buatlah file vheader.php, vcontent.php, dan vfooter.php pada folder
application/views
5. Copy script header file index.html yang ada pada bootstrap ke file vheader.php
6. Ubah seluruh isi properti href atau src (untuk css, javascript, dan gambar) mengikuti aturan CI
menggunakan base_url()
Contoh :
href:"css/bootstrap.min.css"
diubah menjadi
href:<?php echo base_url("assets/css/ bootstrap.min.css"); ?>

Agar perintah base_url() aktif maka konfigurasi file autoload.php di folder application/config, cari
perintah $autoload['helper'] = array(); diubah menjadi $autoload['helper'] = array("url");

7. Copy script content file index.html yang ada pada bootstrap ke file vcontent.php, selanjutnya ikuti
tahapan nomor 6
8. Copy script footer file index.html yang ada pada bootstrap ke file vfooter.php, selanjutnya ikuti
tahapan nomor 6
9. Buka file welcome.php
public function index()
{
$this->load->view('welcome_message');
}
Diubah menjadi
public function index()
{
$this->load->view('vheader');
$this->load->view('vcontent');
$this->load->view('vfooter');
}
10.Buka web browser, jalankan URL http://localhost/latihanci

Membuat Form Input Menggunakan Bootstrap

1. Copy file vcontent.php (views)
2. Ubah namanya menjadi contohform.php
3. Buka file contohform.php, ubah isinya (lihat file contohform.php)
4. Buat controller cform.php, syntax nya dapat dilihat pada file cform.php
5. Buka web browser, jalankan URL http://localhost/latihanci/index.php/cform

Membuat Validasi Input-an

Validasi inputan dapat dilakukan dengan berbagai cara, seperti menggunakan HTML5,
menggunakan fasilitas yang tersedia pada bootstrap ataupun menggunakan library Javascript yang
sudah banyak tersebar di internet. Jika ingin membuat validasi inputan menggunakan HTML5 dapat
dilihat pada http://www.w3schools.com/html/html_form_input_types.asp. Jika ingin menggunakan
Javascript dapat memanfaatkan library yang tersedia di file lampiran.

D. Manipulasi Database Menggunakan SQL dan JavaSript (AJAX &

JQuery)
Membuat Login
1. Buatlah tabel pengguna pada database sekolah
CREATE TABLE pengguna (
username varchar(10) PRIMARY KEY,
password varchar(32),
fullname varchar(50),
hakakses int(1)
);
2. Buatlah file formlogin.php (views) sebagai antarmuka login (dapat dilihat pada file contoh)
Modifikasi bagian action pada tag form menjadi action=<?php echo site_url("cpengguna/login");
?>
3. Buatlah file mpengguna.php (models) untuk proses query ke database (dapat dilihat pada file
contoh)
4. Agar perintah $this->db->query() pada model dapat digunakan, maka harus diset terlebih dahulu
di autoload. Ubah bagian $autoload['libraries'] = array(); menjadi $autoload['libraries'] =
array('database');
5. Buatlah file cpengguna.php (controllers) sebagai penghubungnya (dapat dilihat pada file contoh)
6. Untuk testing buatlah satu data sampel untuk login, isikan secara manual data login di tabel
pengguna pada database sekolah (http://localhost/phpmyadmin). Dikarenakan password pada
latihan ini didesain menggunakan MD5, maka ketika membuat password secara manual di
database jangan lupa aktifkan fungsi MD5 untuk field password.
7. Buka web browser dan jalankan URL http://localhost/latihanci/index.php/cpengguna
8. Jangan lupa membuat method logout nya (dapat dilihap pada cpengguna.php)

Menjalankan Query untuk mengambil data

1. Modifikasi file mpengguna.php (models), tambahkan method get_data_all() (dapat dilihat pada
file contoh)
2. Modifikasi file cpengguna.php (controllers), tambahkan method tampil_data()(dapat dilihat pada
file contoh)
3. Buat file vpengguna.php (views) untuk menampilkan data pengguna dan modifikasi tampilannya
menggunakan tabel (dapat dilihat pada file contoh)
4. Modifikasi menu pada file vheader.php (views), ubah Dashboard menjadi Pengguna dan URL nya
menjadi <?php echo site_url("cpengguna/tampildata") ?>
5. Buka web browser dan jalankan URL http://localhost/latihanci/index.php/cpengguna
6. Kemudian login, lalu pilih menu Pengguna

Menjalankan Query untuk input data

1. Modifikasi file vpengguna.php dengan menambahkan tombol tambah dan tag form, serta
JavaScript (JQuery) seperti pada contoh di file lampirannya. Action pada tag form di arahkan ke
<?php echo site_url("cpengguna/simpan"); ?> dan method nya POST.
2. Modifikasi file mpengguna.php dengan menambahkan method insert() untuk query simpan ke
database seperti pada contoh di file lampiran
3. Modifikasi file cpengguna.php dengan menambahkan method simpan()seperti pada contoh di file
lampiran
9

4. Buka web browser dan jalankan URL http://localhost/latihanci/index.php/cpengguna

5. Kemudian login, lalu pilih menu Pengguna, selanjutnya pilih tambah data

Menjalankan Query untuk update data

1. Modifikasi file vpengguna.php dengan menambahkan form untuk pengeditan, serta JavaScript
(JQuery) dan CSS seperti pada contoh di file lampirannya. Action pada tag form di arahkan ke
<?php echo site_url("cpengguna/ubah"); ?> dan method nya POST. Modifikasi link pada icon
ubah
2. Modifikasi file mpengguna.php dengan menambahkan method update() untuk query update ke
database seperti pada contoh di file lampiran
3. Modifikasi file cpengguna.php dengan menambahkan method ubah()seperti pada contoh di file
lampiran
4. Buka web browser dan jalankan URL http://localhost/latihanci/index.php/cpengguna
5. Kemudian login, lalu pilih menu Pengguna, selanjutnya pilih file yang akan di edit

Menjalankan Query untuk hapus data

1. Modifikasi file vpengguna.php dengan menambahkan tag dialog untuk konfirmasi penghapusan,
serta JavaScript (JQuery) dan CSS seperti pada contoh di file lampirannya.
2. Modifikasi file mpengguna.php dengan menambahkan method delete() untuk query hapus ke
database seperti pada contoh di file lampiran
3. Modifikasi file cpengguna.php dengan menambahkan method hapus()seperti pada contoh di file
lampiran
4. Buka web browser dan jalankan URL http://localhost/latihanci/index.php/cpengguna
5. Kemudian login, lalu pilih menu Pengguna, selanjutnya pilih file yang akan di dihapus

E. Manipulasi Database Menggunakan Active Record Class dan

JavaSript (AJAX & JQuery)
Fungsi-fungsi untuk mengambil data
Fungsi-fungsi untuk input data
Fungsi-fungsi untuk update data
Fungsi-fungsi untuk hapus data
Method Chaining

F. Pengelolaan Berkas Gambar

Upload berkas gambar
1. Buatlah tabel siswa dengan field nis varchar(10), nama varchar(50), tempat_lahir varchar(50),
tanggal_lahir date, dan foto varchar(255).
2. Buat folder untuk penyimpanan file foto yang diupload, buat di dalam folder assets
3. Buat file vsiswa.php (views) sebagai form nya seperti pada file lampiran
4. Buat file csiswa.php (controllers) untuk memproses foto seperti pada file lampiran
5. Buat file msiswa.php (models) untuk query penyimpanan ke database seperti pada file lampiran

10

Kompresi gambar dan membuat thumbnails

Modifikasi file csiswa.php (controllers), tambahkan method kompres()

Menampilkan gambar
1.
2.
3.
4.

Untuk menampilkan gambar, tambahkan method get_data_all() pada file msiswa.php (models)
Modifikasi file csiswa.php (controllers), tambahkan method tampilgambar()
Buat datagrid di file vtampilgambar.php (views)
Tambahkan tag img untuk menampilkan gambar

G.Membuat Report
Format PDF
Buat format laporan menggunakan HTML pada umumnya. Untuk menyimpannya dalam bentuk pdf,
cukup perintah cetak pada web browser chrome. Pilih save to pdf.

Format Ms. Excel

Buat format laporan menggunakan HTML pada umumnya. Untuk menyimpannya dalam bentuk
excel, tambahkan perintah PHP dengan menambahkan header pada pada perintah yang paling atas.
header("Content-type: application/vnd.ms-excel");
header("content-disposition: attachment;filename=laporan_siswa.xls");

Format Ms. Word

Buat format laporan menggunakan HTML pada umumnya. Untuk menyimpannya dalam bentuk Ms.
Word, tambahkan perintah PHP dengan menambahkan header pada pada perintah yang paling atas.
header("Content-type: application/vnd.ms-word");
header("content-disposition: attachment;filename=laporan_siswa.doc");

11