Integrasi Ajax di CodeIgniter

Sep 27, 2009 // by anggie // Ajax, CodeIgniter, PHP // 17 Comments

Jquery merupakan salah satu ajax framework yang cukup populer. Daripada membangun sistem ajax dari awal (create from scratch), saya pribadi lebih suka untuk menggunakan jquery sebagai alternatif pembuatan sistem web bernuansa ajax. Setelah browsing cukup lama, mencari tutorial Jquery+CodeIgniter, ternyata cukup sulit untuk diimplementasikan. Akhirnya saya berhasil menemukan Pquery, PHP Class yang dirancang untuk memudahkan dalam penggunaan jquery.
Memang, Pquery bukanlah Class PHP yang dirancang khusus untuk CodeIgniter (silakan download file attachment pada akhir tulisan ini, PENTING!!!RENAME FILE TERSEBUT MENJADI BEREKSTENSI .ZIP SETELAH DIDOWNLOAD) . Namun, proses integrasinya di CI cukup sederhana. Saya akan berikan beberapa contoh penggunaannya.

Yang harus dilakukan pertama kali…

Agar semuanya bisa berjalan, pertama kali kita harus me-load Jquery.js pada bagian head halaman web kita.
Saya meletakkan file jquery.js pada folder javascript (di luar folder system, langsung di root).

Logikanya…

Logika pemanfaatan ajax di CI ini cukup simple (style saya). Pquery menyediakan fungsi-fungsi yang outputnya adalah fungsi javascript. Contohnya link_to_remote(). Fungsi ini akan menghasilkan link (url sama dengan yang kita definisikan) yang dibumbui dengan javascript (jquery) yang akan mengirimkan request secara asinkron (background request) dan akan memberikan output berupa respon dari server ke dalam elemen dom (diawali dengan #) yang kita definisikan. Jadi, ketika kita membuat link untuk menampilkan halaman profil, misalnya, logikanya adalah kita definisikan url ke suatu controller, dan controller tersebut kita rancang agar me-load halaman view profil ke dalam elemen dom yang juga kita definisikan.

Nah ini dia contohnya….

Pindahkan file pquery.php ke dalam application/libraries/, dan jangan lupa untuk meloadnya dalam controller yang digunakan ($this->load->library(‘pquery’)).
link_to_remote($name,$options,$html_options=null)

........... <!-- header dsb -->
<? echo $this->pquery->link_to_remote(
   	'Home',
   	array('url' => 'index.php/front/home',
   	      'update' => '#posts'      // elemen id
   	)
  );
?> 
<div id='posts'> <!--output--> </div>
........... <!-- footer dsb -->

Pada controller…

function home()
{
      $data = $this->postmodel->getRecentPost();
      $this->load->view('main/home',$data);
}

Cukup sederhana bukan? Anda belum jelas? Silakan berikan tanggapan. Mungkin saya bisa membantu Anda. Good luck, happy Coding!
File Attachment : Pquery._02.zip

Tags: Ajax, JQuery, PHP, tutorial codeigniter

• Twitter • StumbleUpon • Digg • Delicious • Facebook

17 Comments

Ikhsan Aulia 17/10/2009 at 7:16 am

pquery tuh nantinya menGenerate javascript berupa jquery yah?
anggie 19/10/2009 at 3:01 pm

yups. Anda benar.
Rani 16/06/2010 at 8:10 pm

mas, mas punya referensi penerapan AJAX di codeigniter kaya suggest di google. Mohon referensi ya mas,,, makasi :)
anggie 17/06/2010 at 10:02 am

@Rani : cek di sini aja, http://www.devbridge.com/projects/autocomplete/jquery/
ari pratomo 24/07/2010 at 12:47 am

mau tanya neh mas, klo bikin lightbox gallery foto di CI gimana yah mas, mungkin ada referensi.?
anggie 24/07/2010 at 4:07 pm

Untuk Lightbox, cek di http://leandrovieira.com/projects/jquery/lightbox/

klo implementasinya di CI, tentunya mudah jika Anda sudah menguasai PHP dan CI
antho 12/03/2011 at 6:31 pm

mas pquerynya kok ga bisa didownload?
anggie 14/03/2011 at 8:32 pm

@antho : oh, maaf mas itu sudah lama sekali, maaf, skrg sudah saya edit tuh.
ato kunjungi http://www.ngcoders.com/resources
antho 15/03/2011 at 10:16 am

hehe makasih ya mas , nanti kalo sempat saya pengen coba” tutorial dari sampean .
maaf kalo sekiranya saya merepotkan :D

semoga Ilmu Anda bermanfaat dan mendatangkan Berkah , amin .
anggie 15/03/2011 at 7:25 pm

Iya mas sama”..amin,, makasih…
andika 17/03/2011 at 1:23 am

mas mo nanya, saya sekarang lage belajar kembangin web pake CI tapi saya ada kesulitan mo coba tampilkan halaman html yg sudah saya buat mau saya tampilkan pada sebuah div id di halaman web yang aktif tanpa me refresh seluruh halaman, saya coba menggunakan jquery tp gagal terus, lalu saya coba juga gunakan cara d atas gagal juga, file html yg ingin saya load saya letakkan di application/views.
mohon bantuannya……
anggie 17/03/2011 at 4:40 pm

cek include jquerynya mas…kemungkinan salah, di CI pake URL lengkap, jangan cuma path
andika 17/03/2011 at 7:51 pm

udah say include jquery mas, iya ada kesalahan dengan pathnya coz yang saya panggil langsung nama filenya.
makasih mas…
Kevin Tanjung 30/07/2011 at 11:11 pm

Numpang nanya mas, kalo misalnya saya di CI mau panggil fungsi dari sebuah controller lain lwat controller utama gt, bisa ga yah?

Biasa kalo di controller yg sama kan kita tinggal pake $this->function(); buat call sebuah function lain dari Class yang sama. Kalo misalnya pake cara mirip-mirip itu mungkin kah?

Bagaimana dengan include()? Atau fungsi redirect dari CI, apakah redirect memanggil sebuah fungsi atau pindah full ke controller tersebut dan akhrinya akan membuat halaman refresh. (karena saya ingin menggunakan trik ini untuk AJAX request, jadi saya tidak ingin sampai merefresh seluruh page)
anggie 21/08/2011 at 3:47 pm

@Kevin : tidak bisa mas…CI itu MVC, jadi harusnya fungsi kek gitu ditaro di functions aja, ato helper…solusi : http://codeigniter.com/forums/viewthread/55212/
aris 26/10/2011 at 2:54 pm

mas maunanya… kalau mau ngambil data misalnya index.php?id=1
nah kalau di CI, ngambil get itu gmana mas? soalnya ajax saya menggunakan metode get.. t
thanks :)
anggie 08/11/2011 at 3:50 pm
Klo pengen pake get sperti itu, coba baca http://codeigniter.com/user_guide/general/urls.html bagian “Enabling Query String”.

Klo menurut saya, ganti saja ajaxnya, pake url-lengkap, misal http://ex.com/controller/function/1

angka ’1′ bisa diambil pake
```
$this->uri->segment(3);
```