Penggunaan Ajax dalam CodeIgniter

Contoh Kasus:

Seorang anak yang sedang skripsi bertanya kepada saya tentang penggunaan Ajax dalam CodeIgniter.

Diketahui:

Dia mempunyai form seperti terlihat dibawah ini:

Permasalahan:

  • Saat dia memilih nama propinsi misal Sumatera Utara maka pada dropdown Kabupaten akan berisi kabupaten yang berada di Sumatera Utara saja.

Tabel Yang Sudah dibuat

Tabel Propinsi

Tabel Kabupaten

Controller yang sudah dibuat

<?php

class Pendaftaran_peserta extends CI_Controller {

function __construct()
{

parent::__construct();

$this->load->model(‘Pendaftaran_model’, ”, TRUE);

}

function index()
{

if ($this->session->userdata(‘login’) == TRUE)
{

$this->main();

}
else
{

redirect(‘beranda’);

}

}

function main (){

$data[‘main_view’] = ‘pendaftaran/form_pendaftaran’;
$data[‘form_action’]=site_url(‘pendaftaran/pendaftaran_peserta’);
$query_propinsi=$this->Pendaftaran_model->get_propinsi();
$propinsi=$query_propinsi->result();

foreach ($propinsi as $row)
{

$data[‘option_propinsi’][$row->propinsi_kode]=$row->nama_propinsi;

}

$this->load->view(‘template’,$data);

}

?>

Model yang sudah dibuat

<?php

class Pendaftaran_model extends CI_Model {

function __construct(){

parent::__construct();

}

var $table=‘master_propinsi’;

function get_propinsi()
{

$this->db->order_by(‘propinsi_kode’);
return $this->db->get(‘master_propinsi’);

}

}

?>

View yang sudah dibuat

<?php
echo form_open(‘pendaftaran_peserta’,array(‘id’ => ‘form_peserta’));

echo ‘<table style=”font-size: 12px” >’;

echo ‘<tr height=”30px”>’;

echo ‘<td width=”140px”><span style=”font-weight: bold”>Propinsi :</span></td>’;
echo ‘<td>’.form_dropdown(‘propinsi’, $option_propinsi).'</td>’;

echo ‘</tr>’;

echo ‘<tr height=”30px”>’;

echo ‘<td width=”140px”><span style=”font-weight: bold”>Kabupaten :</span></td>’;
$kab=array(‘Pilih Kabupaten’);
echo ‘<td>’.form_dropdown(‘kabupaten’, $kab).'</td>’;

echo ‘</tr>’;

echo ‘<tr>’;

echo ‘<td></td><td>’.form_submit(array(‘id’=>’editSubmit’,’name’=>’kirim’,’class’ => ‘formEditProfile’,’value’=>’simpan’),’submit’).'</td>’;

echo ‘</tr>’;

echo ‘</table>’;

echo form_close();
?>

File View ini sudah di potong sehingga kita hanya melihat pada Dropdwon propinsi dan kabupaten saja.

Konsep Aliran Kode

Jadi saat kita memilih propinsi maka dropdown kabupaten berisi kabupaten untuk propinsi yang terpilih.

Aliran kodenya adalah:

  • User memilih pilihan pada dropdown Propinsi
  • Dropdown propinsi ini akan mengirimkan nilainya yaitu kode propinsi ke fungsi Ajax.
  • Fungsi Ajax ini bertugas mengirimkan variabel yang berisi kode propinsi ke metode pada controller CodeIgniter yaitu Controller Pendaftaran_peserta.
  • Metode pada controller CodeIgniter lalu mengambil data kabupaten dari model berdasarkan kode propinsi.
  • Setelah mendapatkan data kabupaten dari model maka metode tersebut mengembalikan nilainya ke fungsi Ajax.
  • Kemudian fungsi Ajax memberikan data kabupaten tersebut ke elemen form dimana elemen form ini mempunyai id yang dicari oleh fungsi Ajax.


Pembuatan Event Pemicu pada Elemen Form

Pada Aliran kode diatas terdapat tulisan yang berbunyi :

  • User memilih pilihan pada dropdown Propinsi
  • Dropdown propinsi ini akan mengirimkan nilainya yaitu kode propinsi ke fungsi Ajax.

Nah sekarang mari kita buat kodenya pada drowpdown propinsi seperti berikut ini:

$js=’onChange=”fungsiAjax(this.value);”‘;
echo ‘<td>’.form_dropdown(‘propinsi’, $option_propinsi,”,$js).'</td>’;

Keterangan:

Jadi pada kode diatas kita berikan event onChange pada dropdown propinsi sehingga ketika user memilih propinsi dari dropdown propinsi maka event onChange ini akan memanggil fungsiAjax dimana parameternya adalah nilai dari dropdown propinsi.

Pembuatan Fungsi Ajax

Tuliskan pada bagian atas file view, kode berikut ini:

<script type=”text/javascript” src=”<?php echo base_url();?>js/jquery-1.4.2.js”></script>
<script>

function fungsiAjax(nilai){

$.ajax({

type: “POST”,
url: “<?php echo site_url(‘pendaftaran_peserta/ambilKabupaten’);?>”,
data:“prop=”+nilai,
success: function(data){
$(“#kab”).html(data);

},

error:function(XMLHttpRequest){
alert(XMLHttpRequest.responseText);

}

})

};

Keterangan:

  • type: “POST”,¬† kode ini berarti kita memakai metode POST
  • url: “<?php echo site_url(‘pendaftaran_peserta/ambilKabupaten’);?>”, kode ini berarti kita akan memanggil metode ambilKabupaten pada controller pendaftaran_peserta.
  • data:”prop=”+nilai, kode ini berarti nilai diberikan ke variabel prop lalu variabel ini akan dikirim ke metode ambilKabupaten dalam controller pendaftaran_peserta¬† dengan menggunakan metode POST.
  • success: function(data){ $(“#kab”).html(data); } , kode ini berarti jika pengiriman sukses dan ada nilai yang dikembalikan yaitu data maka berikan nilai data ini ke elemen form yang mempunyai id “kab”.
  • error:function(XMLHttpRequest){ alert(XMLHttpRequest.responseText); } , kode ini berarti jika terjadi error maka tampilkan error tersebut.

Pembuatan Metode AmbilKabupaten

function ambilKabupaten(){

$propinsi=$_POST[‘prop’];

$query_kab=$this->Pendaftaran_model->get_kabupaten($propinsi);

$kabupaten=$query_kab->result();

foreach ($kabupaten as $row)
{

$data[‘option_kabupaten’][$row->kabu_kode]=$row->nama_kabupaten;

}

$kab=form_dropdown(‘kabupaten’, $data[‘option_kabupaten’]);
echo $kab;

}

Keterangan:

  • $propinsi=$_POST[‘prop’];, kode ini berarti kita memberikan nilai dari variabel prop ke vairabel $propinsi, dimana variabel prop ini adalah kiriman dari fungsi Ajax.
  • $this->Pendaftaran_model->get_kabupaten($propinsi);, kode ini berarti kita memanggil metode get_kabupaten pada mode Pendaftaran_model, dimana parameter dari metodenya adalah variabel $propinsi.
  • echo $kab, kode ini digunakan untuk mengembalikan nilai dari variabel $kab ke fungsi Ajax.

Pembuatan Metode get_kabupaten

function get_kabupaten($prop)
{

$this->db->where(‘propinsi_kode’,$prop);
$this->db->order_by(‘nama_kabupaten’);
return $this->db->get(‘master_kabupaten’);

}

Keterangan:

$this->db->where(‘propinsi_kode’,$prop);, kode ini berarti kita menseleksi kabupaten dengan kode propinsi yang sesuai dengan variabel $prop.

Memberikan id ke Elemen Form

echo ‘<td id=“kab” >’.form_dropdown(‘kabupaten’, $kab).'</td>’;

Keterangan:

  • Lihat pada kode <td id=”kab” >, terlihat pada kode tersebut kita memberikan id=”kab” ke elemen <td>, dimana nantinya fungsi ajax akan memberikan data ke elemen <td> ini karena ia mempunyai id=”kab”.

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

4 Responses

  1. fula says:

    berhasil keluar isi combo box kedua
    tapi ko setelah di klik valuenya kosong ya???
    mohon bantuannya ^_^

  2. dro says:

    siip..
    ini yg saya butuhkan…
    saya akan mencobanya…

    trim’s

  3. uwu says:

    kalau misalkan view nya make html biasa gimana kak?

  4. Fahmi Basya Kartapura says:

    Bisa, asalkan namanya filenya dirubah dengan akhiran .php

Leave a Reply

Your email address will not be published. Required fields are marked *