Chained Dropdown Jquery di CodeIgniter 2.1.2

Kesempatan kali ini saya akan memberikan tutorial codeigniter tentang dropdown berantai dengan jquery di codeigniter 2.1.2. Biasanya hal ini juga disebut chained dropdown jquery. Arti kata chainedyaitu berantai, dalam artian adabeberapa dropdown yang saling berhubungan. Kasus yang sering kita temui adalah saat melakukan registrasi ada pilihan dropdown provinsi dandropdown kota, yang mana daftar dropdown kota mengikuti dropdown provinsi yang dipilih. Itulah yang akan saya bahas kali ini, yaitu penggunaandropdown berantai antara dropdown provinsi dan dropdown kota atau kabupaten di kasus form registrasi user menggunakan jquery dan codeigniter 2.1.2.

Persiapan Database Chained Dropdown

Pertama-tama download framework codeigniter versi terbaru (v 2.1.2) dengan klik link ini: Download Codeigniter 2.1.2. Extract framework codeigniter 2.1.2 di dalam folder htdocs > dropdown. Agar praktek berjalan dengan sempurna, jangan lupa untuk memakai versi web server dengan PHP 5.3, seperti xampp versi 1.7.7! Sekarang kita akan membuat database dropdown_berantai dengan tabel user, tabel provinsi untuk data dropdown provinsi dan tabel kota untuk data dropdown kota. Berhubung record databasenya banyak karena data provinsi dan data kotanya asli, kamu bisa download file sqlnya dengan klik tombol berikut:

Setelah kamu download file sql di atas, buat database baru dengan namadropdown_berantai. Kemudian import melalui phpmyadmin ke dalam database dropdown_berantai tadi. Maka tampilan ERD (Entitiy Relationship Diagram) database dropdown_berantai seperti gambar di bawah ini:

 

Konfigurasi Awal Framework Codeigniter

Setting autoloader.php pada folder htdocs > dropdown > application > configuntuk melakukan pemanggilan otomatis library atau helper yang mana sudah ada di dalam framework codeigniter 2.1.2. Kita akan memanggil library database, library table sertahelper url dan helper form dengan mengubah file autoloader.php menjadi kode di bawah ini:

$autoload['libraries'] = array('database', 'table'); // melakukan load library database dan tabel html
...
$autoload['helper'] = array('url', 'form'); // emanggil helper url dan form

Kemudian setting config.php yang masih di satu folder dengan autoloader.php menjadi kode di bawah ini:

$config['base_url']    = 'http://localhost/dropdown/'; // ini adalah contoh url dasar menuju codeigniter
...
$config['index_page'] = ''; // kosongkan index_page

Buka file database.php, masih di satu folder dengan file autoloader.php dan config.php dan ubah seperti kode di bawah ini:

$db['default']['username'] = 'root'; // user databasemu
$db['default']['password'] = 'password'; // password databasemu
$db['default']['database'] = 'dropdown_berantai'; // nama database chained dropdown

Buka juga file routes.php, masih di folder htdocs > dropdown >application > config dan ubah seperti kode di bawah ini:

$route['default_controller'] = "dropdown"; // halaman indeks
$route['grab_kota'] = "dropdown/grab_kota"; // jquery dropdown kota
$route['tambahuser'] = "dropdown/tambah"; // halaman tambah user
$route['edituser/(:num)'] = "dropdown/edit/$1"; // halaman edit user
$route['404_override'] = '';

Kembali ke folder utama framework codeigniter atau folder htdocs > dropdown. Karena situs yang saya buat di localhost berada di alamat: “http://localhost/dropdown/“, maka kembali ke folder htdocs > dropdown. Buat file .htaccess (karena tidak dapat melakukan rename langsung ke ekstensi file atau merename file menjadi “.htaccess” di windows maka lebih baik buat menggunakan code editor seperti notepad++) dan isi dengan kode berikut:

RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Oke, sampai di sini setting konfigurasi awal framework codeigniter 2.1.2 sebelum masuk ke pemrograman mvc-nya. 

Code Controller Untuk Chained Dropdown

Buka folder htdocs > dropdown > application > controllers, ada controller welcome.php. Controller welcome.php lebih baik dihapus agar tidak bingung dalam belajar. Kemudian masih di dalam folder controllers, buat file php baru dengan namadropdown.php. Edit file controller dropdown.php dengan kode berikut:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Dropdown extends CI_Controller {

 // constructor controller dropdown dan load model "dropdown_model"
 function __construct()
 {
  parent::__construct();
  $this->load->model('dropdown_model');
 }

 // funtion index sebagai halaman utama, menampilkan data user
 function index()
 {
  // Awal - cara menggunakan library html pada codeigniter 2.1.2
  $this->table->set_heading(array('Nama User', 'Provinsi', 'Kota', 'Edit?'));

  $datausers = $this->dropdown_model->get_users();
  foreach($datausers as $user):
   $this->table->add_row(array($user->nama_user, $user->nama_provinsi, $user->nama_kota, '<a href="'.base_url().'edituser/'.$user->id_user.'">Edit Data</a>'));
  endforeach;

  $tmpl = array(
            'table_open'          => '<table align="center" border="1" cellpadding="4" cellspacing="0">',

            'heading_row_start'   => '<tr>',
            'heading_row_end'     => '</tr>',
            'heading_cell_start'  => '<th>',
            'heading_cell_end'    => '</th>',

            'row_start'           => '<tr>',
            'row_end'             => '</tr>',
            'cell_start'          => '<td>',
            'cell_end'            => '</td>',

            'row_alt_start'       => '<tr>',
            'row_alt_end'         => '</tr>',
            'cell_alt_start'      => '<td>',
            'cell_alt_end'        => '</td>',

            'table_close'         => '</table>'
        );
  $this->table->set_template($tmpl);
  // Akhir - cara menggunakan library html pada codeigniter 2.1.2

  $this->load->view('view_index');
 }

 // function untuk mengambil data dropdown kota menggunakan jquery post
 function grab_kota()
 {
  if($_POST)
  {
   $result = $this->dropdown_model->get_kota($this->input->post('provinsi'));
   if(is_array($result))
   {
    // jika hasil query array maka looping hasil query
    foreach ($result as $row)
    {
     echo '<option value="'.$row->id_kota.'">'.$row->nama_kota.'</option>';
    }
   }
   else
   {
    // tampilkan jika data hasil query kosong
    echo '<option value="">Tidak ada data</option>';
   }
  }
 }

 // fungsi untuk registrasi atau menambahkan user
 function tambah()
 {
  // cek apakah merupakan post dari form add user
  if($_POST)
  {
   $add= $this->dropdown_model->add_userdata($this->input->post('nama'),$this->input->post('provinsi'),$this->input->post('kota'));
   if($add)
   {
    print"<script>alert('Berhasil menambah user');</script>";
    redirect('','refresh');
   }
   else
   {
    print"<script>alert('Gagal menambah user');</script>";
    redirect('','refresh');
   }
  }
  else
  {
   $ambil_provinsi = $this->dropdown_model->get_provinsi();
   if(is_array($ambil_provinsi))
   {
    foreach ($ambil_provinsi as $barisprovinsi)
    {
     $list_provinsi['']= 'Silahkan pilih provinsi';
     $list_provinsi[$barisprovinsi->id_provinsi]= $barisprovinsi->nama_provinsi;
    }

    $data['list_provinsi'] = $list_provinsi;
   }
   else
   {
    $data['list_provinsi'] = array('' => 'Tidak ada data');
   }

   $data['list_kota'] = array('' => 'Pilih provinsi dulu');

   $this->load->view('view_add',$data);
  }
 }

 // fungsi untuk edit user yang sudah didaftarkan
 function edit($id)
 {
  // cek apakah merupakan post dari form edit user
  if($_POST)
  {
   $edit= $this->dropdown_model->edit_userdata($this->input->post('id_user'),$this->input->post('nama'),$this->input->post('provinsi'),$this->input->post('kota'));
   if($edit)
   {
    print"<script>alert('Edit berhasil');</script>";
    redirect('','refresh');
   }
   else
   {
    print"<script>alert('Edit gagal');</script>";
    redirect('','refresh');
   }
  }
  else
  {
   $datauser = $this->dropdown_model->get_userdata($id);
   if($datauser)
   {
    foreach ($datauser as $row)
    {
        $data['id']= $row->id_user;
        $data['nama']= $row->nama_user;
        $data['provinsi']= $row->id_provinsi;
        $data['kota']= $row->id_kota;
    }

    $ambil_provinsi = $this->dropdown_model->get_provinsi();
    if(is_array($ambil_provinsi))
    {
     foreach ($ambil_provinsi as $barisprovinsi)
     {
      $list_provinsi[$barisprovinsi->id_provinsi]= $barisprovinsi->nama_provinsi;
     }

     $data['list_provinsi'] = $list_provinsi;
    }
    else
    {
     $data['list_provinsi'] = array('' => 'Tidak ada data');
    }

    $ambil_kota = $this->dropdown_model->get_kota($data['provinsi']);
    if(is_array($ambil_kota))
    {
     foreach ($ambil_kota as $bariskota)
     {
      $list_kota[$bariskota->id_kota]= $bariskota->nama_kota;
     }

     $data['list_kota'] = $list_kota;
    }
    else
    {
     $data['list_kota'] = array('' => 'Tidak ada data');
    }

    $this->load->view('view_edit',$data);
   }
   else
   {
    show_404();
   }
  }
 }
}

Code Model Untuk Chained Dropdown

Setelah membuat controller, sekarang kita akan membuat file model yang mana sebagai interaksi dengan database. Masuk ke folder htdocs > dropdown > application > models, buat file dropdown_model.php dan edit dengan code berikut:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Dropdown_model extends CI_Model{

 // function untuk mendapatkan data daftar user
 function get_users()
 {
     $this->db->select('*');
  $this->db->from('tabel_user');
  $this->db->join('tabel_provinsi', 'tabel_user.id_provinsi = tabel_provinsi.id_provinsi');
  $this->db->join('tabel_kota', 'tabel_user.id_kota = tabel_kota.id_kota');
  $query = $this->db->get();

     if ($query->num_rows() > 0)
  {
         return $query->result();
     }
  else
  {
   return false;
  }
 }

 // function untuk mendapatkan data untuk dropdown provinsi
 function get_provinsi()
 {
  $this->db->order_by("nama_provinsi", "asc");
  $query = $this->db->get('tabel_provinsi');
  if($query->num_rows() > 0)
  {
   return $query->result();
  }
  else
  {
   return FALSE;
  }
 }

 // function untuk mendapatkan data untuk dropdown kota, sesuai $id provinsi
 function get_kota($id)
 {
  $this->db->select('*');
  $this->db->order_by("nama_kota", "asc");
  $this->db->from('tabel_kota');
  $this->db->join('tabel_provinsi', 'tabel_kota.id_provinsi = tabel_provinsi.id_provinsi');
  $this->db->where('tabel_kota.id_provinsi', $id);
  $query = $this->db->get();
  if($query->num_rows() > 0)
  {
   return $query->result();
  }
  else
  {
   return FALSE;
  }
 }

 // function untuk menginput data registrasi atau menambahkan user
 function add_userdata($nama, $provinsi, $kota)
 {
     $add =  array(
     'id_user' => '',
              'nama_user' => $nama,
             'id_provinsi' => $provinsi,
     'id_kota' => $kota
       );

  $input = $this->db->insert('tabel_user', $add);

  if($input)
  {
   return TRUE;
  }
  else
  {
   return FALSE;
  }
 }

 // function untuk mendapatkan data user untuk diedit, sesuai $id user yang akan diedit
 function get_userdata($id)
 {
     $this->db->select('*');
  $this->db->from('tabel_user');
  $this->db->join('tabel_provinsi', 'tabel_user.id_provinsi = tabel_provinsi.id_provinsi');
  $this->db->join('tabel_kota', 'tabel_user.id_kota = tabel_kota.id_kota');
  $this->db->where('id_user', $id);
  $query = $this->db->get();

     if ($query->num_rows() > 0)
  {
         return $query->result();
     }
  else
  {
   return false;
  }
 }

 // function untuk mengedit data user dari form edit user
 function edit_userdata($id, $nama, $provinsi, $kota)
 {
  $edit = array(
              'nama_user' => $nama,
             'id_provinsi' => $provinsi,
     'id_kota' => $kota
       );

  $this->db->where('id_user', $id);
  $update = $this->db->update('tabel_user', $edit);

  if($update)
  {
   return TRUE;
  }
  else
  {
   return FALSE;
  }
 }
}

Code View Untuk Chained Dropdown

Masuk ke folder htdocs > dropdown > application > views, buat fileview_index.php dan edit dengan code berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List Dropdown</title>
</head>
<body>
<h2 align="center">Data User, Provinsi dan Kota</h2>
<br/>
<?=$this->table->generate();?>
<br/><br/>
<div align="center"><a href="<?=base_url()?>tambahuser"><b>>> Klik untuk menambah data <<</b></a></div>
<br/><br/>
<hr/>
<div align="center">Page rendered in <b>{elapsed_time}</b> seconds</div>
</body>
</html>

Kamu lihat bagian “$this->table->generate();“, itu adalah implementasi helper tabel html yang mana sudah tersedia di dalam framework codeigniter 2.1.2. Buat file baru lagi dengan nama view_add.php sebagai template formulir untuk menambahkan user. Edit file view_add.php dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List Dropdown Add</title>

<script src="<?=base_url();?>public/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#provinsi").change(function(){
var provinsi = {provinsi:$("#provinsi").val()};
$.ajax({
type: "POST",
url : "<?php echo base_url(); ?>grab_kota",
data: provinsi,
success: function(callback){
$('#kota').html(callback);
}
});
});
});
</script>
</head>
<body>
<h2 align="center">Add Data User</h2>
<br/>
<?=form_open()?>

<label for="nama" style="margin-left: 30%; float: left; width: 200px;">Nama User:</label>
<?php
$data_nama = array('placeholder' => 'Masukkan Nama', 'name' => 'nama', 'id' => 'nama');
echo form_input($data_nama);
?>
<br/><br/>
<label for="provinsi" style="margin-left: 30%; float: left; width: 200px;">Pilih Provinsi:</label>
<?php
echo form_dropdown('provinsi', $list_provinsi, '', 'id = "provinsi"');
?>
<br/><br/>
<label for="kota" style="margin-left: 30%; float: left; width: 200px;">Pilih Kabupaten/Kota:</label>
<?php
echo form_dropdown('kota', $list_kota, '', 'id = "kota"');
?>
<br/><br/>
<div style="margin-left: 50%">
<?php
$reset = array('name' => 'Reset', 'value' => 'Reset', 'class' => 'button');
$submit = array('name' => 'Submit', 'value' => 'Tambah', 'class' => 'button');
?>
<?=form_reset($reset);?> <?=form_submit($submit);?>
</div>

<?=form_close()?>
<br/><br/><hr/>
<div align="center">Page rendered in <b>{elapsed_time}</b> seconds</div>
</body>
</html>

Sekali lagi, buat file baru dengan nama view_edit.php sebagai template formulir untuk edit user. Edit file view_edit.php dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List Dropdown Edit</title>

<script src="<?=base_url();?>public/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#provinsi").change(function(){
var provinsi = {provinsi:$("#provinsi").val()};
$.ajax({
type: "POST",
url : "<?php echo base_url(); ?>grab_kota",
data: provinsi,
success: function(callback){
$('#kota').html(callback);
}
});
});
});
</script>
</head>
<body>
<h2 align="center">Edit Data User</h2>
<br/>
<?=form_open()?>
<?=form_hidden('id_user', $id);?>

<label for="nama" style="margin-left: 30%; float: left; width: 200px;">Nama User:</label>
<?php
$data_nama = array('placeholder' => 'Masukkan Nama', 'value' => $nama, 'name' => 'nama', 'id' => 'nama');
echo form_input($data_nama);
?>
<br/><br/>
<label for="provinsi" style="margin-left: 30%; float: left; width: 200px;">Pilih Provinsi:</label>
<?php
echo form_dropdown('provinsi', $list_provinsi, $provinsi, 'id = "provinsi"');
?>
<br/><br/>
<label for="kota" style="margin-left: 30%; float: left; width: 200px;">Pilih Kabupaten/Kota:</label>
<?php
echo form_dropdown('kota', $list_kota, $kota, 'id = "kota"');
?>
<br/><br/>
<div style="margin-left: 50%">
<?php
$reset = array('name' => 'Reset', 'value' => 'Reset', 'class' => 'button');
$submit = array('name' => 'Submit', 'value' => 'Edit', 'class' => 'button');
?>
<?=form_reset($reset);?> <?=form_submit($submit);?>
</div>

<?=form_close()?>
<br/><br/><hr/>
<div align="center">Page rendered in <b>{elapsed_time}</b> seconds</div>
</body>
</html>

Praktek dan Mengoperasikan Hasil Tutorial

Setelah melakukan coding di atas, kamu bisa mencoba situs tutorial ini dengan mengakses: “http://localhost/dropdown/” di browser kamu. Maka muncul daftar user yang mana tampilannya seperti di bawah ini:

Gambar list data di atas menjelaskan data user, sebagai contoh record nomor 1, yakni user dengan nama Roes Wibowo berasal dari provinsi Daerah Istimewa Yogyakarta dengan alamat di kota Yogyakarta, dan seterusnya. 
Klik link di bagian bawah tabel untuk mencoba menambah data. Kamu akan melihat daftar dropdown kota muncul sesuai dropdown provinsi yang kamu pilih. Tampilan form tambah user seperti gambar di bawah ini:

Untuk mencoba mengedit, klik link “Edit Data“. Kamu akan melihat data dropdown provinsi maupun dropdown kota seperti data yang ada di record database namun kamu masih bisa mengubah data ke provinsi dan kota lainnya. Tampilan yang muncul seperti gambar di bawah ini:

Ingat ya: “Apa yang kita peroleh saat ini bukanlah dari apa yang kita lewati, tetapi apa usaha kita di masa lalu“. Tetap latihan – latihan dan latihan! Membuat tutorial seperti ini juga tidak mudah, maka dari itu kalo kamu copy-paste (copas) tutorial yang ada di blog ini, hargai karya/tulisan saya dengan kasih link balik ke blog ini (http://Roes-Wibowo.com) ini sebagai referensi. Jangan lupa like, tweet dan share ya. Tinggalkan komentar kalo kamu ada kesulitan dari tutorial di atas. Oke, sekian tutorial codeigniter dalam kasus chained dropdown atau dropdown berantai jquery di codeigniter 2.1.2.

Back Link

tutorial codeigniter 2 1 2, input form dropdown dengan value database pada codeigniter,codeigniter tutorial new 2012, standar pemangilan tabel di codeigniter, tutorial ci 2 1 2,membuat search dengan codeigniter 2 1, contoh drop down codeigniter 2, dropdown php,form dropdown codeigniter yang ada foreign key nya, contoh erd human resource system database, Menampilkan database ke Combobox (PHP JQUERY), codeigniter chained drop down, download chain select ajax codeigniter, contoh tombol reset pada codeigniter,membuat print di ci, Menampilkan data dari database ke Combobox (PHP JQUERY),codeigniter jquery sql form, membuat tombol reset pada codeigniter, query sql untuk menampilkan data dari database pada ci, download codeigniter, form input codeigniter yang ada foreign key nya, cara menggunakan CI 2 1 2, cara membuat login dengan codeigniter 2 1 2, template web code igniter, cara menggunakan form dropdown codeigniter, Chained DropDown dengan Jquery dan Codeigniter, jquery and codeigniter 2 1 tutorial, membuat form dan tabel codeigniter jquery, jquery form dropdown from database,maksud dari $autoload[helper] = array(url file);.