Kolaborasi CodeIgniter

dan Ajax dalam

Perancangan CMS

Sanksi Pelanggaran Pasal 113 Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta

1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak Rp100.000.000 (seratus juta rupiah).

2. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak Rp500.000.000,00 (lima ratus juta rupiah).

3. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling banyak Rp1.000.000.000,00 (satu miliar rupiah).

4. Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).

Kolaborasi CodeIgniter

dan Ajax dalam

Perancangan CMS

Anton Subagia

PENERBIT PT ELEX MEDIA KOMPUTINDO

Kolaborasi CodeIgniter dan Ajax dalam

Perancangan CMS

Anton Subagia 2018 PT Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2018

nadhia@elexmedia.id

ID 718050662

ISBN 978-602-04-5933-2 (Printed)

978-602-04-5934-9 (Digital)

Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit.

Dicetak oleh Percetakan PT Gramedia, Jakarta

Isi di luar tanggung jawab percetakan

ix

DAFTAR ISI PERSEMBAHAN ........................................................................................ v KATA PENGANTAR ................................................................................. vii DAFTAR ISI ............................................................................................... ix PEMBUKA ................................................................................................. xv INSTALASI APLIKASI ............................................................................. xvii BAB 1. MENGENAL CODEIGNITER ...................................................... 1 1.1 Apa itu Codeigniter .............................................................................. 1 1.2 Keuntungan Codeigniter ...................................................................... 2 1.3 Fitur-fitur Codeigniter ......................................................................... 4 1.4 Mengenal Konsep MVC ....................................................................... 5 1.5 Sistem Kerja Codeigniter ...................................................................... 6 1.6 Struktur Folder Codeigniter ................................................................. 7 1.7 Helper .................................................................................................... 10 1.8 Library ................................................................................................... 14 1.9 Instalasi Codeigniter ............................................................................. 17 BAB 2. MENGENAL AJAX ........................................................................ 21 2.1 Mengenal Ajax ...................................................................................... 21 2.2 Keunggulan Menggunakan Ajax .......................................................... 22 2.3 Cara Kerja Ajax ..................................................................................... 23 BAB 3. TEKNIK DASAR JQUERY ............................................................ 25 3.1 Apa itu jQuery ....................................................................................... 25 3.2 Kelebihan dan Kemampuan jQuery .................................................... 25 3.3 Cara Menggunakan jQuery .................................................................. 26 3.4 Memahami Selector .............................................................................. 28 3.5 Memahami Effect .................................................................................. 29 3.6 Memahami Event .................................................................................. 31 3.7 Ajax dengan jQuery .............................................................................. 32 BAB 4. KOLABORASI AJAXDENGAN JQUERY .................................... 33 4.1 Mengenal Ajax jQuery .......................................................................... 33 4.2 Menampilkan Data dengan Ajax ......................................................... 33 4.3 Mengirim Data Form dengan Ajax ...................................................... 36

x

4.4 Respon Ajax dengan Format JSON ..................................................... 38 4.5 Upload File dengan Ajax ...................................................................... 41 4.6 Cara Lain Menggunakan Ajax dengan jQuery .................................... 43 BAB 5. MENGENAL BOOTSTRAP .......................................................... 45 5.1. Mengenal Bootstrap ............................................................................. 45 5.2. Desain Halaman Front End................................................................. 46 5.3. Desain Halaman Admin ...................................................................... 54 5.4. PopUp Modal ....................................................................................... 62 5.5. Desain Halaman Login ........................................................................ 63 BAB 6. TEMPLATING CODEIGNITER DENGAN BOOTSTRAP ....... 67 6.1 Konfigurasi Halaman Front End ........................................................ 67 6.2 Konfigurasi Halaman Admin .............................................................. 74 BAB 7. TEKNIK DASAR MEMAHAMI CODEIGNITER ...................... 77 7.1 Model .................................................................................................... 77

7.1.1 Struktur Model ............................................................................. 78 7.1.2 Load Model ................................................................................... 79 7.1.3 AutoLoad Model .......................................................................... 79 7.1.4 Koneksi dengan Database ............................................................ 79

7.2 View .. .................................................................................................... 80 7.2.1 Load View ..................................................................................... 80 7.2.2 Multiple View Load ...................................................................... 81 7.2.3 Menyimpan View dan Sub Folder ............................................... 81 7.2.4 Menambahkan Data Dinamis pada View ................................... 81

7.3 Controller .............................................................................................. 82 7.4 Codeigniter dan Database .................................................................... 84

7.4.1 Membuat Database ...................................................................... 84 7.4.2 Konfigurasi Database ................................................................... 86 7.4.3 Menyiapkan Template ................................................................. 87 7.4.4 Operasi Read (Menampilkan Data) ............................................ 95 7.4.5 Operasi Cread (Tambah Data) .................................................... 98 7.4.6 Operasi Update (Merubah Data) ................................................ 102 7.4.7 Operasi Delete .............................................................................. 104

BAB 8. KOLABORASI CODEIGNITER AJAX JQUERY ........................ 105 8.1 Penggunaan Library Tambahan ........................................................... 105 8.2 Mengubah File Controller .................................................................... 106

1

1 MENGENAL CODEIGNITER

1.1 Apa itu Codeigniter

CodeIgniter merupakan 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, sang pencipta bahasa pemrograman PHP

mengatakan bahwa Codeigniter merupakan web framework yang mudah,

cepat dan handal.

CodeIgniter dirilis pertama kali pada tanggal 28 Februari 2006, namun

pada bulan Juli 2013 Ellis Lab mengumumkan bahwa mereka mencari

pemilik baru untuk CodeIgniter karena pada lingkup internal sendiri

tidak memiliki cukup fokus untuk mengembangkan CodeIgniter, dan

pada akhirnya pada bulan Oktober 2014, kepemilikan CodeIgniter

berpindah ke tangan British Columbia Institute of Technology, yakni

salah satu sekolah tinggi teknologi di Kanada.

Setelah hampir lima bulan lamanya sejak peralihan kepemilikan, BCIT

akhirnya merilis CodeIgniter 3.0. Dibanding versi sebelumnya tentunya

CodeIgniter 3 mempunyai fitur yang lebih kaya seperti pengembangan

Database Driver, terdapat pustaka yang baru dan juga PDO CodeIgniter

kini telah berfungsi secara penuh dengan subdriver.

Sebelum mencoba Codeigniter, perlu kita ketahui istilah web framework

itu sendiri. Menurut Microsoft Computer Dictionary, web adalah

2

sekumpulan dokumen yang saling terhubung dalam sistem hypertext yang

penggunanya akan menjelajahi web melalui halaman beranda. Sedangkan

framework adalah desain struktur dasar yang dapat digunakan kembali

(reusable) yang terdiri dari abstract class dan concrete class di

pemrograman yang berorientasi objek.

Dirilis pada dokumentasi CodeIgniter, CodeIgniter merupakan toolkit

bagi orang yang ingin membangun aplikasi web menggunakan PHP.

Tujuannya adalah membuat pengembangan proyek menjadi lebih cepat

dibandingkan dengan menulis kode dari awal (stracth). CodeIgniter

menyediakan kumpulan library untuk tugas-tugas yang sering dilakukan

dan sangat mudah untuk mengakses library yang tersedia di CodeIgniter.

Dengan CoeIgniter, kita cukup fokus pada pengembangan project dan

meminimalisir jumlah kode yang akan ditulis.

1.2 Keuntungan Codeigniter

Sebagai web framework populer yang menggunakan bahasa pemrograman

PHP, CodeIgniter mempunyai beberapa keunggulan seperti yang telah

disebutkan di dokumentasinya, keunggulan-keunggulan tersebut

meliputi:

1. Free, karena berada di bawah lisensi open source, kita dapat

melakukan apapun dengan CodeIgniter. Lisensi lengkapnya dapat

dilihat di halaman dokumentasi

2. Light weight, sistem inti CodeIgniter memerlukan library yang sedikit.

Sangat berbeda dengan framework lainnya yang membutuhkan

banyak sumber daya tambahan. Library tambahan akan digunakan

ketika request secara dinamis, membuat system yang dibangun

menjadi efisien dan cukup cepat

3. Fast, menurut dokumentasi, performa yang dimiliki CodeIgniter

terbukti cepat setelah dibandingkan dengan framework lainnya

3

4. Menggunakan kaidah MVC, dengan menggunakan Model-View-

Controller, kita dapat memisahkan bagian logic dan presentation dari

aplikasi yang kita bangun. Hal 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

5. Menghasilkan URL yang bersih, URL yang dihasilkan oleh

CodeIgniter bersih dan ramah terhadap search engine. CodeIgniter

menggunakan pendekatan segment-based dibandingkan dengan query

string yang biasa digunakan oleh programmer yang tidak

menggunakan web framework

6. Packs a Punch, CodeIgniter hadir dengan berbagai library yang akan

membantu tugas-tuggas di pengembangan web yang sudah umum

dan sering dilakukan seperti mengakses database, mengirim email,

validasi data dari form, mengelola session, memanipulasi gambar, dan

masih banyak lagi

7. Extensible, kita dapat menambahkan library atau helper yang kita

ciptakan sendiri ke dalam CodeIgniter. Selain itu kita dapat juga

menambahkan fitur lewat class extension atau system hooks

8. Thoroughly Documented, hampir semua fitur, library dan helper yang

ada di CodeIgniter telah terdokumentasi dengan lengkap dan

tersusun dengan baik. Ketika mendapatkan unduhan Codeigniter,

dokumentasinya sudah tersedia dan siap digunakan

9. Mempunyai komunitas yang ramah, bergabung di komunitas

CodeIgniter tentunya akan membantu sekali para pengguna

CodeIgniter yang masih pemula atau yang sudah mahir untuk saling

berbagi ilmu pengetahuan. Komunittas ini dapat ditemui di

codeigniter.com/forums

4

1.3 Fitur-fitur Codeigniter

Menilai baik dan buruknya sebuah aplikasi dari fiturnya, bukanlah sebuah

cara yang tepat. Karena ini tidak menggambarkan bagaimana sebuah

aplikasi dirancang. Fitur-fitur tersebut tidak menggambarkan kualitas

kode, performance dan keamanan (security). Satu-satunya cara untuk

mengetahuinya yaitu dengan melihat kodenya.

Berikut ini adalah fitur-fitur yang didukung oleh CodeIgniter :

Model-View-Controller Based

PHP 7 Compatible

Extremely Light Weight

Full Featured database classes with support for several platforms

Active Record Database Support

Forms and Data Validation

Security and XSS Filtering

Session Management

Email Sending Class, Support Attachment, HTML/Text email,

multiple protocols (sendmail, SMTP, and Mail)

Image Manipulation Library (cropping, resizing, rotating) Support

GD, Image Magic and NetPBM

File Uploading Class

FTP Class

Localization

PAGINATION

Data Encryption

Dan lainnya

5

1.4 Mengenal Konsep MVC

CodeIgniter menggunakan pendekatan Model-View-Controller, yang

bertujuan untuk memisahkan logika dan presentasi. Konsep ini

mempunyai keunggulan dimana desainer dapat bekerja pada template

file, sehingga redudansi kode presentasi dapat diperkecil. Berikut adalah

konsep Model-View-Controller yang di terapkan pada CodeIgniter

1. Model, menggambarkan struktur data. Biasanya kelas model akan

berisi fungsi yang digunakan untuk mengambil, menambah dan

memperbaharui informasi yang ada di database

2. View, informasi yang diperlihatkan kepada user. View adalah

halaman web yang terdiri dari HTML, CSS dan Javascript, akan tetapi

pada CodeIgniter, view dapat juga sebagai potongan halaman seperti

header atau footer. Bahkan dapat juga halaman RSS atau tipe

halaman lainnya

3. Controller, perantara Model, View, dan resource lainnya yang

dibutuhkan untuk menangani HTTP request dan menghasilkan

halaman web

Gambar 1.1. Cara kerja MVC

Pada CodeIgniter, programmer juga dapat mengabaikan pemakaian

Model dan cukup menggunakan Controller dan View. Cara tersebut sah-

6

sah saja dipakai, tetapi akan lebih baik jika kita memakai Model juga agar

hierarki MVC tercapai dan disamping itu beban di Controller juga akan

berkurang.

1.5 Sistem Kerja Codeigniter

Untuk melengkapi pemahaman mengenai CodeIgniter, berikut adalah

gambaran sederhana yang menjelaskan bagaimana CodeIgniter bekerja:

Gambar 1.2. Cara kerja CodeIgniter

Berikut adalah penjelasan cara kerja CodeIgniter:

1. Index.php, bertindak sebagai controller terdepan dan menginisiasi

resource yang diperlukan untuk menjalankan CodeIgniter

2. Router, memeriksa HTTP request untuk menentukan apa yang harus

dikerjakan

3. Jika cache file ada, maka akan ditampilkan langsung, dengan

melewati eksekusi normal system

4. Sebelum memuat controller, HTTP request akan memeriksa apa yang

disubmit user dan memfilter untuk keamanan

5. Controller, memuat model, core libraries, plugin, helper dan resource

lainnya untuk memproses permintaan tertentu

7

View ditampilkan di browser sesuai proses yang dikerjakan controller.

Jika caching dijalankan, view akan di cache terlebih dahulu agar dapat

ditampilkan di request selanjutnya

1.6 Struktur Folder Codeigniter

Pada CodeIgniter terdapat hirarki yang dikepalai oleh tiga folder utama,

yaitu: application, system, dan user_guide. Agar aplikasi semakin ringkas

maka folder user_guide lebih baik dihapus saja, sehingga kita akan

memakai 2 folder di dalam folder CodeIgniter, yaitu application dan

system.

Di dalam folder application terdapat banyak sub-folder, folder-folder

tersebut berguna untuk menyimpan berbagai jenis file sesuai dengan

nama foldernya, misalnya file-file model akan disimpan di dalam folder

models, file-file view akan disimpan di folder views, dan seterusnya.

Adapun susunan folder CodeIgniter secara default adalah sebagai berikut:

1. Folder application, disinilah aplikasi yang akan kita bangun

diletakkan.

Folder cache, tempat menyimpan semua cache yang dibuat

caching library

Folder config, tempat meyimpan semua file konfigurasi yang ada

di dalam aplikasi, mulai dari database, router dan autoload

aplikasi

Folder controllers, tempat menympan semua file controller

Folder core, class-class utama yang sangat vital bagi CodeIgniter.

Jika ada salah satu atau beberapa class yang termasuk core library

tidak ada, maka CodeIgniter tidak dapat berfungsi dengan baik

8

Folder helpers, tempat menyimpan helper-helper yang bukan

berasal dari CodeIgniter. Gunanya untuk melakukan tugas

tertentu yang sederhana, misalnya memformat tanggal, membuat

link, membuat input form dan sebaginya

Folder hooks, tempat menyimpan hook yang digunakan untuk

mengubah alur fungsi dari core CodeIgniter

Folder language, tempat menyimpan bahasa-bahasa yang akan

digunakan

Folder libraries, tempat menyimpan semua library buatan kita

sendiri

Folder logs, tempat menyimpan semua logs generated oleh CI

Folder models, tempat menyimpan semua model

Folder third_party, file ini adalah library pihak ketiga.

Maksudnya library yang berasal dari sumber lain (bukan berasal

dari CodeIgniter). Misalnya untuk membuat laporan dengan

format PDF, maka kita perlu memerlukan library yang dapat

merubah string HTML menjadi PDF

Folder views, tempat menyimpan semua file view aplikasi

2. Folder system, menyimpan semua file system pada core framework.

Folder core, tempat menyimpan semua class library bawaan

CodeIgniter

Folder database, tempat menyimpan semua driver database

drivers dan class yang akan digunakan

Folder fonts, tempat menyimpan semua font yang digunakan

image manipulation library

Folder helpers, tempat menyimpan semua helper core

CodeIgniter

dan s

dj_an

Cata

Untuk

Layan

Gram

Jl. Pa

aran yang me

nton16@yaho

atan:

k melakukan

nan Langsung

media Dire

lmerah Barat

Telemarke

ext: 3901

TE

PE

Anton Su

programmi

mengambil

perguruan

Penulis pe

dengan me

merangkap

dilakukan h

Tekhnologi

maupun m

dalam wakt

Bila ada pe

embangun, pe

oo.com

pemesanan

g PT Elex Me

ect

t No. 29-37,

eting/CS: 02

1/3902/329

ENTAN

ENULI

ubagia adal

ing web,

l study Siste

tinggi swasta

ernah beker

enjabat sebaga

p keduanya.

hingga saat i

i Informasi,

membaca buku

tu senggang.

ertanyaan ata

enulis dapat d

buku, hubun

edia Komputi

, Jakarta 102

21-5365011

92

NG

IS

lah seorang

alumnus

em Informa

a Jakarta.

rja di beber

ai staff admin

Banyak hob

ini, terutama

, membaca

u, desain dan

au komentar

dihubungi m

gi

ndo:

270

0/111

g desainer

Sarjana de

asi di salah

rapa perusa

n dan IT mau

bby penulis

di dalam bi

artikel di

n editing foto

-komentar, k

melalui email:

331

dan

ngan

satu

ahaan

upun

yang

dang

web

o bila

kritik