Trik Kolaborasi Codeigniter dan jQuery - tokolokomedia.com · Inilah yang menjadi tingkat rating...

Sanksi Pelanggaran Pasal 72

Undang-undang Nomor 19 Tahun 2002

Tentang Hak Cipta

1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan Ayat (2) dipidana dengan pidana penjara masing-masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp 1.000.000,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000,00 (lima miliar rupiah).

2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta atau hak terkait sebagai dimaksud Ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp 500.000.000,00 (lima ratus juta rupiah).

Tr i k Ko l a b o r a s i

Codeigniter dan jQuery

www.bukulokomedia.com

Agus Saputra

TRIK KOLABORASI CODEIGNITER DAN JQUERYPerpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Agus SaputraTRIK KOLABORASI CODEIGNITER DAN JQUERY- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2011 200 hlm; 14 x 21 cm ISBN : 978-979-1758-79-6

Penerbit Lokomedia, Cetakan Pertama : September 2011

Editor : Lukmanul HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : www.bukulokomedia.com

Copyright © Lokomedia, 2011

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

v

Kata Pengantar

Framework Codeigniter masih menjadi yang terbaik dari Framework lainnya. Terbukti dari peminat programmer/developer yang masih banyak menggunakan Framework yang satu ini. Menurut sumber http://www.phpframeworks.com, Juni 2011, Codeigniter masih tetap bertengger pada peringkat ke-2, setelah Yii. Kemudian disusul dibawahnya CakePHP dan Zend.

Codeigniter memiliki keunggulan dalam tingkat kecepatan akses dan mudah untuk dipelajari. Inilah yang menjadi tingkat rating Codeigniter. Setelah penulis menyelesaikan beberapa buku mengenai Framework CakePHP, kini penulis tertarik untuk mengulas mengenai Framework Codeigniter, dengan Trik-trik baru yang belum dibahas pada buku-buku yang telah ada dipasaran, seperti Kolaborasi jQuery maupun Integrasi dengan Editor WYSIWYG.

Pembahasan buku mencakup pengenalan dan konfigurasi dasar, Macam-macam Penanganan Codeigniter, seperti Penanganan HTML, Form, Tabel, Database, dan Security. Kemudian Operasi CRUD, Teknik Aplikatif Codeigniter. Disusul dengan Teknik pengiriman Email, Login Authentikasi, Kolaborasi jQuery (Datepicker, jQGrid, Photo Gallery, Tab, AutoComplete), hingga diakhir pembahasan akan ditutup dengan Proyek Lengkap pembuatan Web Blog.

Dengan pembahasan yang cukup lengkap ini, diharapkan Anda dapat membangun Aplikasi Web berbasis Codeigniter secara mandiri.

Penulis menyadari bahwa buku ini jauh dari sempurna, untuk itu penulis sangat menghargai kritik maupun saran yang membangun, sehingga dapat menulis lebih baik lagi untuk edisi-edisi mendatang. Akhir kata, penulis hanya bisa berharap semoga buku ini dapat memberikan manfaat yang sebesar-besarnya untuk Anda.

Cirebon, Juni 2011

Agus Saputra | [email protected] | http://www.agussaputra.com

vi

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

vii

Daftar Isi

BAB 1. Mengenal dan Memulai Codeigniter ................................................1

1.1. Apa itu Codeigniter? ....................................................................................2

1.2. Keuntungan dan Kelemahan Codeigniter ...................................................3

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. Library ..........................................................................................................8

1.8. Kebutuhan Tools Dasar Codeigniter ...........................................................9

1.9. Instalasi Codeigniter ....................................................................................9

BAB 2. Teknik Dasar Memahami Codeigniter ...........................................11

2.1. File Controller Pertama Anda ....................................................................12

2.2. File View Pertama Anda ............................................................................16

2.3. Memahami Penggunaan Konsep MVC ....................................................19

2.4. Codeigniter dan Database ..........................................................................22

2.4.1. Membuat Database ..........................................................................23

2.4.2. Konfigurasi Database .......................................................................23

2.4.3. Operasi Create (Menambah Data) ...................................................24

2.4.4. Operasi Read (Menampilkan Data) .................................................28

2.4.5. Operasi Update (Mengubah Data) ..................................................32

2.4.6. Operasi Delete (Menghapus Data) ..................................................38

viii

BAB 3. Teknik Dasar Memahami jQuery ...................................................43

3.1. Apa itu jQuery? ..........................................................................................44

3.2. Memulai jQuery .........................................................................................45

3.3. Cara Kerja jQuery ......................................................................................49

3.4. Filosofi Pemrograman jQuery ...................................................................50

3.5. Memahami Selectors..................................................................................53

3.5.1. Selectors tag .....................................................................................53

3.5.2. Selectors id .......................................................................................56

3.5.3. Selectors class ..................................................................................57

3.6. Plugin jQuery .............................................................................................60

BAB 4. Kolaborasi Codeigniter dan jQuery ...............................................63

4.1. Datepicker ..................................................................................................64

4.2. Tab ..............................................................................................................66

4.3. Flexigrid .....................................................................................................70

4.4. Photo Gallery .............................................................................................79

4.5. Operasi CRUD ...........................................................................................87

4.6. jQuery AutoComplete ................................................................................96

BAB 5. Proyek Web Blog .............................................................................103

5.1. Menentukan Layout .................................................................................104

5.2. Membuat Database dan Tabel..................................................................105

5.3. Konfigurasi Tabel .....................................................................................107

5.4. Membuat Controller Default (cblog.php) ...............................................108

5.5. Membuat Halaman Artikel untuk User ................................................... 111

5.6. Membuat Halaman Buku Tamu (Komentar) ..........................................117

5.7. Galeri Foto ................................................................................................124

ix

5.8. Membuat Halaman Login Admin............................................................130

5.9. Membuat Manajemen Artikel untuk Admin ...........................................135

5.9.1. Menampilkan Artikel .....................................................................136

5.9.2. Menambah Artikel .........................................................................139

5.9.3. Mengubah Artikel ..........................................................................143

5.9.4. Menghapus Artikel .........................................................................148

5.10. Sentuhan Akhir .......................................................................................149

5.11. Catatan Akhir Codeigniter .....................................................................151

Lampiran ........................................................................................................153

Macam Penanganan Codeigniter................................................................154

6.1. Penanganan HTML ..................................................................................154

6.1.1. Br ....................................................................................................154

6.1.2. Heading ..........................................................................................155

6.1.3. Img ..................................................................................................155

6.1.4. Link_Tag ........................................................................................156

6.1.5. Meta ................................................................................................156

6.1.6. Nbs ..................................................................................................156

6.2. Penanganan Form.....................................................................................157

6.2.1. Form Open .....................................................................................157

6.2.2. Form Close .....................................................................................158

6.2.3. Form Input Text ..............................................................................158

6.2.4. Form Input Hidden .........................................................................159

6.2.5. Form Input Password .....................................................................159

6.2.6. Form Input Upload .........................................................................159

6.2.7. Form TextArea ...............................................................................160

6.2.8. Form Label .....................................................................................160

6.2.9. Form Dropdown .............................................................................161

6.2.10. Form Checkbox ............................................................................161

6.2.11. Form Radio ...................................................................................162

6.2.12. Form Submit ................................................................................162

6.2.13. Form Button .................................................................................162

6.2.14. Form Reset ...................................................................................163

6.3. Penanganan Tabel ....................................................................................163

6.4. Penanganan Database ..............................................................................164

6.4.1. Pengganti SELECT ........................................................................165

6.4.2. Pengganti INSERT .........................................................................165

6.4.3. Pengganti UPDATE .......................................................................165

6.4.4. Pengganti DELETE .......................................................................166

6.4.5. Pengganti LIKE .............................................................................166

6.4.6. Pengganti Group By.......................................................................167

6.4.7. Pengganti Order By .......................................................................167

6.5. Penanganan Keamanan (Security) ..........................................................167

Trik Aplikatif Codeigniter............................................................................169

7.1. Teknik Scaffolding ...................................................................................169

7.2. Membuat File PDF ...................................................................................170

7.3. Integrasi WYSIWYG Editor (Xinha) ......................................................173

7.4. Upload File ...............................................................................................178

7.5. Force Download .......................................................................................186

Daftar Pustaka ...............................................................................................189

Profil Penulis ..................................................................................................191

BAB I

Mengenal dan Memulai Codeigniter

2 Trik Kolaborasi Codeigniter dan jQuery

BAB 1

Mengenal dan Memulai Codeigniter

1.1 Apa itu Codeigniter ?Codeigniter merupakan framework PHP yang diklaim memiliki eksekusi tercepat dibandingkan dengan framework lainnya. Codeigniter bersifat open source dan menggunakan model basis MVC (Model View Controller), yang merupakan model konsep modern framework yang digunakan saat ini.

Berbicara soal framework, apa sih yang dimaksud framework itu?.. jawabannya.. Framework merupakan suatu kertas/kerangka kerja dalam aplikasi web yang didalamnya memiliki suatu potongan-potongan program yang disusun (modul), sehingga programmer tidak perlu membuat kode dari nol, karena framework telah menyediakannya. Yang harus kita lakukan adalah mengerti, melakukan, dan menerapkannya saja.

Seperti yang sudah dijelaskan pada buku penulis yang berjudul ”Teknik Cepat Membangun Aplikasi Web dengan Framework CakePHP” bahwa setiap programmer pasti memiliki style yang berbeda-beda dalam membuat suatu program, ada yang langsung hajar, tidak memberikan komentar atau dokumentasi yang lengkap, ada yang disembunyikan filenya, dan lain-lain. Sehingga, pengembangan selanjutnya sulit untuk dilakukan. Dengan adanya Framework, pengembangan akan sangat mudah dilakukan, dengan catatan, developer yang ingin mengembangkan juga harus mengerti dan menguasai framework.

Codeigniter menawarkan banyak library yang dapat kita gunakan, macam-macam library tersebut, akan penulis ulas pada sub-bab selanjutnya. Codeigniter dibuat pertama kali oleh Rick Ellis yang merupakan CEO dari Ellislab. Dapat dikunjungi pada situsnya di http://www.ellislab.com.

Ellislab merupakan sebuah perusahaan yang memproduksi CMS-CMS handal. Saat ini, Framework Codeigniter dikembangkan oleh ExpressionEngine Development Team. Saat buku ini ditulis, Codeigniter telah mencapai versi 2.0.2 yang dapat didownload di http://www.codeigniter.com/downloads. namun penulis menggunakan versi 1.7.2. (sudah terlanjur dibuat sih ).. sebelum melangkah ke pembahasan selanjutnya, liat dulu nih logo Codeigniter. Lihat gambar 1.1.

3Bab I. Mangenal dan Memulai Codeigniter

Gambar 1.1 Logo Codeigniter

1.2 Keuntungan dan Kelemahan CodeigniterSetiap framework pasti memiliki kelebihan dan kekurangan masing-masing, begitu pula dengan framework Codeigniter.

Framework Codeigniter memiliki beberapa kelebihan, diantaranya:

1. Gratis

Codeigniter dilisensikan dibawah lisensi Apache/BSD style open source. So.. ini berarti Codeigniter dapat digunakan secara bebas.

2. Mendukung PHP4 dan PHP5

Walaupun saat ini PHP telah mencapai versi 5 bahkan versi 6, tapi masih banyak juga orang-orang yang masih menggunakan PHP4. Oleh karena itu, pengembang Framework Codeigniter memperhatikan betul setiap pengguna, oleh karenanya Framework Codeigniter dikembangkan agar mampu berjalan baik PHP4 maupun PHP5.

3. Berukuran Kecil dan Cepat

Dibandingkan dengan framework lain, semisal CakePHP, Codeigniter merupakan alternatif bagi Anda yang menginginkan akses yang cepat. Mengapa bisa cepat?.. karena Codeigniter hanya me-load fungsi atau library yang digunakan saja, berbeda dengan framework lainnya yang menggunakan seluruh library walaupun library tersebut tidak digunakan. Alasan inilah yang menjadikan Codeigniter dengan akses tercepat dan ringan.


4. Dokumentasi

Framework yang baik, pasti dilengkapi dengan dokumentasi yang lengkap dan mendukung, agar dapat mudah dimengerti oleh penggunanya. Dari pengalaman penulis, mungkin Codeigniter-lah yang memiliki dokumentasi terlengkap dan terdetail, sehingga siapa saja dapat mempelajarinya, karena didukung oleh user guide yang mudah dimengerti. Dari mulai instalasi hingga kepada fungsi-fungsinya..semuanya ada.. apalagi ditambah ada buku ini yang dapat menjadi panduan Anda… ngarep…

5. Menggunakan Konsep MVC

Codeigniter menggunakan konsep MVC (Model View Controller), konsep modern yang banyak digunakan oleh framework PHP lainnya. Dengan adanya MVC, pengerjaan antara logika dengan layout telah dipisahkan, sehingga antara si programmer dan designer dapat santai melakukan tugasnya.

6. Komunitas

Framework Codeigniter mempunyai sebuah komunitas. Anda dapat bergabung pada situs http://codeigniter.com/forums

Disamping kelebihan/keuntungan, Framework Codeigniter juga mempunyai beberapa kelemahan/kekurangan, diantaranya yang dapat penulis tangkap:

1. Codeigniter dikembangkan oleh Ellislab dan bukan oleh suatu komunitas, ini yang menyebabkan update core engine-nya tidak secepat framework lain.

2. Tidak ditujukan untuk pembuatan web dengan skala besar (enterprise) walaupun tersedia banyak library.

3. Masih banyak kelonggaran dalam hal coding, misalnya bebas dalam penamaan file.

4. Tidak mencerminkan MVC yang sesungguhnya, misalnya penulisan echo masih bisa dilakukan pada file controller.

1.3 Fitur-Fitur CodeigniterBerikut fitur-fitur yang didukung Codeigniter dalam membangun suatu web:

• Bekerja berdasarkan konsep MVC (Model View Controller).

• Ringan dan cepat

• Mendukung PHP4


• Mendukung berbagai basis data

• Form dan validasi

• Keamanan dan XSS Filtering

• Mendukung Active Record Database

• Pengaturan session

• Tersedia class untuk pengiriman email

• Mendukung lokalisasi bahasa

• Mendukung enkripsi data

• Mendukung caching

• Mendukung benchmarking

• Menghasilkan clean URL

• Memiliki helper dan library yang cukup banyak

• Mencatat error yang terjadi

• URI routing yang fleksibel

• Mendukung ekstensi class dan plugin

• Tersedia class untuk membuat template web, mengetahui user agent, membuat trackback, hingga kepada calendar

• Manipulasi gambar

• Class mendukung transfer via FTP

• Upload File, dan lain-lain.

1.4 Mengenal Konsep MVCMVC memiliki kepanjangan dari Model View Controller, merupakan alur kerja dari Framework Codeigniter. Dengan konsep MVC ini, segala macam logika dan layout telah dipisahkan, sehingga si programmer dan designer dapat mengerjakan masing-masing tugasnya secara fokus. Konsep model MVC juga dapat menuntun para pembuat program untuk membangun web dengan cara yang terstruktur.

Dilihat dari cara kerjanya, Framework Codeigniter menekankan pada MVC. Untuk alurnya dapat dilihat pada gambar 1.2.


Gambar 1.2 Konsep MVC

Model, digunakan sebagai presentasi database. Berbeda dengan Framework CakePHP. Dalam Codeigniter, segala macam perintah-perintah query SQL diletakkan dalam file model, seperti insert, edit, delete, dan select. Karena semuanya itu berhubungan dengan database.

Controller, digunakan sebagai pengendali (control) antara view dan model melalui permintaan dari HTTP.

View, Suatu halaman khusus yang digunakan untuk menyajikan informasi kepada client. Secara definisi, segala macam permintaan yang dikelola oleh controller dan model, akan dikembalikan kepada view sesuai hasil permintaan yang di-request.

1.5 Sistem Kerja CodeigniterSetiap aplikasi pasti memiliki beberapa tahapan yang harus dilewati. Begitu pula dengan Framework Codeigniter. Alur kerjanya dapat dilihat pada gambar 1.3.

Gambar 1.3 Alur Kerja Codeigniter


Dari gambar 1.3 dapat dijelaskan sebagai berikut :

1. Index.php merupakan controller awal yang menginiliasisakan kebutuhan untuk menjalankan Codeigniter.

2. Router/Routing merupakan bagian yang menentukan kegiatan yang harus dilakukan ketika ada request/permintaan dari client/browser.

3. Caching, merupakan bagian yang mengecek apakah data sudah pernah diminta atau belum. Jika cache dalam keadaan aktif, maka akan langsung dikirimkan kepada client/browser dengan mengabaikan alur kerja normal.

4. Security, sebelum aplikasi dikirimkan, maka akan terlebih dahulu data tersebut di-filter sebagai keamanan.

5. Controller, merupakan pengendali dari jalannya aplikasi, dan akan segera memproses sesuai request/permintaan yang diminta, yaitu models, libraries, helpers, plugins, dan scripts.

6. View, merupakan bagian untuk menyajikan suatu informasi ke client/browser sesuai dengan permintaan yang diminta (setelah melewati tahap 1 s/d 5).

1.6 Struktur Folder CodeigniterSebelum kita melangkah ke tahap instalasi dan konfigurasi Codeigniter, ada baiknya kita mengenal struktur-struktur folder/direktori pada Codeigniter, susunan folder nya sebagai berikut:

a. Folder system

• Folder application: untuk menyimpan aplikasi yang akan dibangun.

• Folder config: untuk menyimpan semua file konfigurasi web.

• Folder controllers: untuk menyimpan semua file controller.

• Folder errors: template halaman untuk menampilkan error.

• Folder helpers: untuk menyimpan semua file helper.

• Folder hooks: untuk menyimpan semua file hooks.

• Folder language: untuk menyimpan file bahasa.

• Folder libraries: berisi file-file library.

• Folder models: berisi file-file model yang berperan sebagai presentasi database.


• Folder views: untuk menyimpan file-file view guna menyajikan informasi kepada client/browser. File view merupakan file yang terlihat pada browser.

• Folder cache: untuk menyimpan data cache jika cache Anda aktifkan.

• Folder codeigniter: merupakan file dasar sistem Codeigniter.

• Folder database: berisi class library untuk database.

• Folder font: berisi jenis-jenis huruf.

• Folder helpers: berisi file-file helper.

• Folder language: untuk menyimpan file bahasa.

• Folder libraries: berisi file-file library.

• Folder logs: untuk menyimpan / mencatat file log error.

• Folder plugins: menyimpan aplikasi kecil pendukung aplikasi utama.

• Folder scaffolding: pemandu untuk membuat operasi database standar.

b. Folder user_guide: berisi dokumentasi Framework Codeigniter.

1.7 LibraryCodeigniter mempunyai banyak library siap pakai, sehingga kita akan dibantu dalam membangun web dengan cepat, berikut beberapa diantaranya :

• Benchmark, digunakan untuk menghitung penggunaan memori.

• Calender, digunakan untuk membuat kalender.

• Cart, digunakan untuk membuat cart pada toko online.

• Config, digunakan untuk menerima informasi konfigurasi.

• Email, digunakan untuk proses pengiriman email.

• Encrypt: digunakan untuk proses enkripsi.

• Form_validation: digunakan untuk memvalidasi input masuk.

• Ftp: digunakan untuk proses transfer via FTP.

• Image_lib: digunakan untuk manipulasi image.

• Input: digunakan untuk memproses input data.


• Laguage: digunakan untuk menggunakan (load) beberapa bahasa.

• Pagination: digunakan untuk membantu proses paging.

• Session: digunakan untuk mempertahankan user aktif.

• Table: digunakan untuk mengenerate tabel dari array.

• Trackback: digunakan untuk mengirim dan menerima data trackback.

• Unit_test: digunakan untuk testing.

• Upload: digunakan untuk membantu proses upload.

• URI: digunakan membagi URL.

• Zip: digunakan untuk membuat arsip zip.

1.8 Kebutuhan Tools Dasar CodeigniterBerikut beberapa tools dasar yang harus dipenuhi, diantaranya:

1. Web Server

Dalam membuat aplikasi yang bersifat dinamis, tanpa web server, semua yang kita lakukan sia-sia.. habis mau test dimana itu web jalan ato enggak.

2. PHP Editor (Text Editor)

Editor ini berfungsi untuk kita menuliskan skrip program yang akan kita buat. Disini penulis menggunakan Crimson Editor sebagai text editor PHP.

3. Framework Codeigniter

Codeigniter merupakan file utama dalam membangun aplikasi berbasis Codeigniter, bisa didapatkan di http://codeigniter.com/downloads.

1.9 Instalasi CodeigniterSebelum melakukan instalasi Codeigniter, pastikan web server sudah ter-install di komputer Anda, penulis menggunakan Xampp yang bisa Anda dapatkan di CD pada folder Web Server. Sedangkan cara instalasi Xampp dapat Anda saksikan langsung melalui Video Tutorial yang juga ada di CD.

Oke, sekarang kita akan memasuki tahap instalasi Codeigniter. Untuk memudahkan Anda, penulis telah menyertakan installernya pada CD terlampir, yaitu pada folder Installer. Kemudian lakukan instalasi sesuai tahap berikut:


1. Copykan file Codeigniter_1.7.2.zip yang ada di CD, tepatnya di folder Installer ke dalam folder htdocs.

2. Lakukan ekstrak pada file zip tersebut, sehingga akan menghasilkan folder Codeigniter_1.7.2. Untuk memudahkan Anda, ubah nama folder tersebut dengan nama yang lebih mudah dicerna, misalnya codeigniter.

3. Buka file config.php di folder system/application/config menggunakan Notepad. Kemudian lakukan perubahan pada baris berikut, tepatnya pada baris ke-14: $config[‘base_url’] = “http://example.com/”;

Menjadi: $config[‘base_url’] = “http://localhost/codeigniter”;

4. Simpan perubahan pada file config.php, lalu buka web browser dengan mengetikkan url http://localhost/codeigniter, maka akan tampil halaman selamat datang Codeigniter. Lihat gambar 1.4.

Gambar 1.4 Halaman utama Codeigniter

Trik Kolaborasi Codeigniter dan jQuery - tokolokomedia.com · Inilah yang menjadi tingkat rating...

Documents

Transcript of Trik Kolaborasi Codeigniter dan jQuery - tokolokomedia.com · Inilah yang menjadi tingkat rating...