kolaborasi codeigniter perancangan cms · kolaborasi codeigniter dan ajax dalam perancangan cms...
TRANSCRIPT
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
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