CodeIgniter : POST Data ke Controller dari Javascript/Ajax

Last Updated on 12 years by Mas Herdi

Sudah lama saya tidak posting di situs ini :D. Oke kali ini saya akan berbagi sebuah tips yang memungkinkan kalian untuk mengirimkan data ke Controller menggunakan POST method dari Javascript/AJAX.

Mungkin kalian bertanya, kenapa kok saya menulis tentang PHP? Karena kalian melihat di blog ini is all about Java. Tapi dikarenakan suatu kondisi yang memaksa saya memakai PHP (Codeigniter), jadi yah bagaimana lagi.

CodeIgniter adalah sebuah PHP framework yang menggunakan paradigma MVC(Model View Controller). Dikenal sebagai framework yang ringan dan mempunyai dokumentasi yang lengkap, sehingga populer digunakan oleh programmer PHP.

Oke, kita langsung saja. Biasanya ketika kita ingin POST data ke controller kita harus membuat sebuah form. Dengan menggunakan form_open dan form_close. Namun ketika kalian ingin membuat web dynamic, tentu saja metode lama itu akan membuat website kalian terlihat kurang dynamic.

Pertama-tama, kita harus membuat controller yang berfungsi untuk menerima inputan datanya terlebih dahulu. Kalau punya saya seperti ini :

<?php

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

    class Admin extends CI_Controller
        {

                function __construct()
                {
                    //konstruktor
                        parent::__construct();
                        $this->load->model('model_admin');
                        $this->load->library('pagination');

                }
                //....
                function edit_mk()
                {
                    //Meload Halaman edit mata kuliah
                    if(($this->session->userdata('user_name')=="herdi"))
                    {
                        $id = $this->input->post('edit_mk');
                        //echo 'IDE SAMA DENGAN'.$id;
                        $this->db->where('id_mk',$id);
                        $query=$this->db->get("rs_matakuliah");
                         if($query->num_rows()>0)
                         {
                            $data['mk']=$query;
                            $this->load->view('admin/edit/mata_kuliah',$data);
                         }
                         else
                         {
                             echo 'dataempty';
                         }
                    }
                    else
                        $this->login();
                }
                //....

        }
?>

Pada kontroler di atas, ada bagian yang berfungsi untuk menangkap value yang dikirimkan menggunakan method POST, yaitu pada bagian

$id = $this->input->post('edit_mk');

. ‘edit_mk’ adalah value yang nantinya akan dikirimkan lewat AJAX.

Pada halaman View, value akan diambil dari sebuah hidden input dan dikirimkan ketika kita mengklik sebuah link. Kodenya seperti berikut :

<input id="fieldEdit<?php echo $mks->id_mk ?>" type="hidden" name="edit_mk" value="<?php echo $mks->id_mk ?>"/>
<a href="#twh/#!/mk<?php echo $mks->id_mk ?>" onclick="editMK(<?php echo $mks->id_mk ?>)"><i class="icon-pencil"></i> Edit</a>

Pada kode di atas, apabila kita mengklik link, maka kita akan menjalankan sebuah fungsi Javascript bernama editMK(). Dan inilah kode Javascript yang digunakan untuk posting data ke kontroler. Oh iya, saya menggunakan Javascript library JQuery pada kode ini.

function editMK($id_mk)
{
    if($("#loadPageDiv").attr("toggle")=="no")
    {
        $("#loadPageDiv").load("<?php echo base_url()?>admin/edit_mk.twh",{
                                 edit_mk: $("#fieldEdit"+$id_mk).val()
                                });
        $('#loadPageDiv').attr('toggle','yes');
    }
    else if($("#loadPageDiv").attr("toggle")=="yes")
    {
        $("#loadPageDiv").empty();
        $('#loadPageDiv').attr('toggle','no');
    }
}

Sebenarnya selain mengirimkan data secara dinamis, kode tersebut juga akan me-load halaman secara dinamis ke dalam <div> yang mempunyai id= “loadPageDiv”. Pada intinya, kode tersebut menggunakan fungsi .loadJQuery untuk meload halaman. Namun sekaligus mengirimkan parameter edit_mk ke dalam tersebut. URL yang dimasukkan ke dalam fungsi .load adalah URL untuk kontroler. Dan kontrolerlah yang sebenarnya akan me-load halaman yang akan ditampilkan. Pada kode kontroler di atas ada di bagian :

                         if($query->num_rows()>0)
                         {
                            $data['mk']=$query;
                            $this->load->view('admin/edit/mata_kuliah',$data);
                         }
                         else
                         {
                             echo 'dataempty';
                         }

Div #loadPageDiv mempunyai toggle, supaya halaman yang telah di-load bisa dikosongkan kembali apabila pengguna mengklik link yang sama. Di bawah adalah kode untuk loadPageDiv, yang memang sengaja dikosongkan karena sebagai tempat untuk menampung halaman yang akan di-load secara dinamis.

<div class="" id="loadPageDiv" toggle="no">

</div>

In action

Untuk demonya, ilustrasinya kira-kira nanti seperti ini. Misalkan kita ingin mengedit data sebuah item. Pada contoh ini kita akan mengedit mata kuliah Rekayasa Aplikasi Internet.

Halaman Admin

Ketika tombol edit di-klik, maka AJAX akan meload halaman edit secara dinamis, bersamaan dengan itu menampilkan data-data yang bisa di edit. Halaman edit akan muncul di bagian atas, atau di bagian dimana div #loadPageDiv diletakkan.

Kolom edit muncul di atas

Ketika diperhatikan URL-nya, masih sama. 🙂 Apabila tombol Cancel di tekan, maka kotak untuk edit MK  akan dihilangkan. Untuk bisa menampilkan data mata kuliah yang ingin di-edit, kita hanya perlu mengirimkan id yang berfungsi sebagai primary key. Kemudian dengan menggunakan Model kita akan mengambil data MK yang sesuai dengan primary key tersebut.

Demikian, semoga berguna. Dan saya sendiri kurang tahu apakah kode AJAX yang diimplementasikan sudah optimal atau belum. Mungkin masih perlu optimisasi untuk implementasi dalam skala besar.