Tutorial Mengisi Combobox dengan Ajax, CodeIgniter, dan jQuery


CodeIgniter

CI Logo

Pada tutorial kali ini akan dibahas mengenai cara mengisi combobox dengan data yang diambil dari server secara asinkronius dengan teknologi AJAX, menggunakan framework CodeIgniter (php) dan framework jQuery (js). Contoh aplikasinnya ketika Anda memilih negara dari suatu combobox, maka combobox di bawahnya akan terisi otomatis dengan nama-nama kota yang ada di negara yang Anda pilih tersebut.

Tutorial ini memerlukan framework CodeIgniter dan jQuery yang bisa didownload dari situs masing-masing framework tersebut.

CodeIgniter bisa didownload dari situs codeigniter.com

jQuery bisa didownload dari situs: jquery.com

Untuk Anda yang ingin mempelajari lebih dalam tentang framework tersebut juga bisa mengunjungi situs tersebut dan membaca user guide dan tutorial yang ada di situs tersebut.

Langsung ke tutorial

Tutorial ini mengasumsikan Anda telah menguasai dasar-dasar CodeIgniter maupun jQuery.

Pertama, kita harus membuat controller untuk menampilkan combobox. Kode controllernya adalah sbb:

// sample_form.php (controller)

<?php if(!defined(‘BASEPATH’)) exit(‘Akses langsung tidak diperbolehkan’);

class Sample_form extends Controller
{
function Sample_form()
// fungsi constructor
{
parent::Controller();
}
function index()
// fungsi pada waktu class ini diload
{
$this->load->helper(‘url’);
$this->load->view(‘sample_form_view’);
}
function ambil_kota()
// fungsi untuk mengambil nama-nama kota berdasarkan id provinsi yang diambil dari data POST
{
switch($this->input->post(‘id_prov’))
{
case ’1′: $kota =
array
(
array
(
‘id’ => ’1′,
‘nama’ => ‘Bandung’
),
array
(
‘id’ => ’2′,
‘nama’ => ‘Tasikmalaya’
)
);
break;
case ’2′: $kota =
array
(
array
(
‘id’ => ’3′,
‘nama’ => ‘Cilacap’
),
array
(
‘id’ => ’2′,
‘nama’ => ‘Solo’
)
);
break;
};

// masukan id_kota dan nama_kota yang dipilih oleh user ke dalam array $hasil[i]
$i=0;
foreach ($kota as $rows) {
$hasil[$i]['id_kota'] = $rows['id'];
$hasil[$i]['nama_kota'] = $rows['nama'];
$i++;
};
$this->output->set_output(json_encode($hasil));
}

}
?>

Class “Sample_form” adalah controller yang akan dipanggil (ditulis pada URI) untuk me-load view “sample_form_view.php” yang isinya combobox.

Fungsi “ambil_kota” berfungsi untuk mengambil nama-nama kota berdasarkan id provinsi yang diambil dari data POST ($this->input->post(‘id_prov’)). Pada kasus nyata, kebanyakan data ini disimpan pada database, tetapi untuk memudahkan tutorial, pada tutorial ini data kota ini hanya disimpan pada array $kota, yang nantinya akan di encode menjadi format JSON. Data dalam format JSON inilah yang akan dikirimkan langsung sebagai output dengan perintah $this->output->set_output.

Setelah membuat controller, kita akan membuat view untuk menampilkan dua combobox yang mana yang satu berfungsi sebagai pemanggil data, dan yang satunya lagi sebagai penampung data kota. Pada view ini juga akan disisipkan kode jQuery yang berfungsi sebagi pemanggil data kota secara AJAX.

// sample_form_view.php (view)

 

<html>
<head><title>Ajax Combo</title>
<script lang=”javascript” src=”<?php echo base_url()?>js/jquery-1.3.2.js”></script>
<script lang=”javascript”>
$(document).ready(function() {

$(“#cboProv”).change(function() {
$(“#cboKota”).empty();
$.post(‘sample_form/ambil_kota’,
{ id_prov : $(“#cboProv option:selected”).val() },
function(data) {
$.each(data, function(i, item){
$(“#cboKota”).append(
‘<option value=”‘ + item.id_kota + ‘”>’+item.nama_kota + ‘</option>’
);
})
},
“json”
);
});
});
</script>
</head>
<body>
<form>
<select id=”cboProv”>
<option value=’1′>Jabar</option>
<option value=’2′>Jateng</option>
</select>
<select id=”cboKota”>
</select>
</form>
</body>
</html>

Jangan lupa untuk menyimpan file jquery-1.3.2.js pada folder “js” di dalam folder situs Code Igniter Anda. Selamat mencoba!

Download Source:

combo_demo_172-zip

combo_demo_200-zip

catatan: jangan lupa mengganti ekstensi file dari .doc menjadi .zip

About these ads
  1. #1 by Ivan on 30 Juni 2009 - 21:12

    Thanks for your tutorial tris…q coba ya…

  2. #2 by echolist on 9 November 2009 - 16:48

    jquerynya diletakkan di mana yach ? view/js/jquery atau dimana ? kok gak jalan ya ? atau saya kurang teliti ya ?, mohon pencerahannya ^_^

    terimakasih banyak

    • #3 by triswan on 13 November 2009 - 10:35

      di root situs CI Anda (base_url), dalam folder “js”

  3. #4 by Benny on 15 Desember 2009 - 09:07

    Bagaimana kalo ambil_kota ga manual tp dari database? makasih

    • #5 by triswan on 18 Januari 2010 - 21:39

      ganti kode:
      function ambil_kota()
      // fungsi untuk mengambil nama-nama kota berdasarkan id provinsi yang diambil dari data POST
      {
      switch($this->input->post(‘id_prov’))
      {
      case ‘1′: $kota =
      array
      (
      array
      (
      ‘id’ => ‘1′,
      ‘nama’ => ‘Bandung’
      ),
      ... sampai dengan
      array
      (
      ‘id’ => ‘2′,
      ‘nama’ => ‘Solo’
      )
      );
      break;
      };

      dengan code query dari database contoh:
      $res = $this->db->query("SELECT * FROM tabel_kota WHERE id_prov = '" . $this->input->post(‘id_prov’) . "'");

      trus ganti
      $i=0;
      foreach ($kota as $rows) {
      $hasil[$i]['id_kota'] = $rows['id'];
      $hasil[$i]['nama_kota'] = $rows['nama'];
      $i++;
      }

      dengan:
      $i=0;
      foreach ($res->result_array() as $rows) {
      $hasil[$i]['id_kota'] = $rows['id'];
      $hasil[$i]['nama_kota'] = $rows['nama'];
      $i++;
      }

      catatan: untestable, test sendiri ya :)
      intinya ngerti kan?

  4. #6 by dro on 6 Oktober 2010 - 18:46

    klo data-nya dari Database MySQL gmn???

  5. #8 by Nemo on 27 April 2011 - 14:19

    apakah code di atas ada bentuk jadinya? maksudnya sudah dalam bentuk file controller dan view. saya coba dengan copy paste sama persis tapi combo kota tetap kosong. apakah ada pengaruh dengan ci dan jquery yang saya pakai? kedua2nya adalah versi terakhir, yaitu 2.0.2 dan 1.5.2

    • #9 by triswan on 28 September 2011 - 09:32

      ada silakan didownload, sekarang source code nya sudah disediakan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 138 pengikut lainnya.

%d bloggers like this: