Cara Membuat Onchange di Codeigniter dengan Jquery

Pada tutorial Codeigniter kali ini, saya akan membahas bagaimana cara pembuatan onchange di codeigniter, onchange dengan codeigniter ini menggunaka jquery/javascript sehingga pembuatannya lebih mudah dan tidak ribet.

Jquery yang dipakai yaitu Jquery.chained yang bisa kalian dapatkan di link ini, dan juga menggunakan Jquery yang bisa kalian download pada link ini, Jika kalian sudah mendapatkan jquerinya maka sekarang kita buat database dan table yang akan digunakan.
Database dan Table yang digunakan
  • Buat database baru dan berinama : db_lokasi
  • Setelah itu kita buat 2 buah table yaitu table_provinsi dan table_kota
Struktur Database dan Table

Struktur Table Provinsi

Struktur Table Kota

Lalu kita masukan beberapa data kedalam table tersebut, kalian bisa mengcopykan sql dibawah ini agar lebih cepat :D,
Sql Table Provinsi

Sql Table Kota

Maka sekarang kita sudah memiliki beberapa data, data dari tiap – tiap table seperti gambar dibawah.
Data Table Provinsi

Data Table Kota


Bisa dilihat pada table kota, setiap kota sudah memiliki id_provinsi masing – masing sesuai dengan wilayah provinsi yang ditentukan, jadi pada programnya ketika kita memilih select list dengan provinsi jawa barat misalkan, maka kota yang memiliki id provinsi jawa barat yang hanya akan muncul. dan selanjutnya kita masuk ke codeigniternya.

Buat project codeigniter baru lalu beri nama onchange_ci dan simpan di folder htdocs kalian, lalu buat folder assets untuk meletakan file jquery yang sudah kalian download pada link diatas, maka structur folder dari codeigniter ini kurang lebih seperti gambar dibawah.
Selanjutnya kita konfigurasi project codeigniternya, bisa kalian lihat pada gambar dibawah.
Konfigurasi file database.php

Konfigurasi Library dan Helper pada file autoload.php

Konfigurasi controller default yang digunakan di routes.php


Nama default controller yang kita pakai yaitu onchange, Selanjutnya kita buat modelsnya, buat file php baru lalu berinama mdl_onchange dan simpan di folder controller/models. Lalu isikan script dibawah ini.
File Model : mdl_onchange

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

class Mdl_onchange extends CI_Model {

/* fungsi untuk memanggil data pada table provinsi*/
function get_provinsi() {

$query = $this->db->get('table_provinsi');
return $query->result();

}

/* fungsi untuk memanggil data pada table kota*/
function get_kota() {

$query = $this->db->get('table_kota');
return $query->result();

}
}

?>

Selanjutnya kita buat file Controllernya, buat file php baru berinama onchange dan simpan di folder application/controller, lalu isikan script dibawah.

File Controller : onchange

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

class Onchange extends CI_Controller {

public function __Construct() {

parent::__construct();

/* berfungsi untuk Memanggil file model */
$this->load->model('mdl_onchange');
}


public function index() {

$this->show();
}


public function show() {

$data['provinsi'] = $this->mdl_onchange->get_provinsi(); /*memanggil fungsi get_provinsi dari model*/
$data['kota'] = $this->mdl_onchange->get_kota(); /*memanggil fungsi get_kota dari model*/
$this->load->view('form_onchange',$data); /*menampilkan data pada form_onchange*/
}

}

?>

Dan terakhir buat file viewsnya, buat file php baru berinama form_onchange dan simpan di folder controller/views lalu isikan script dibawah.

File Views : form_onchange

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Onchange di Codeigniter</title>
</head>

<body>
<h1>Onchange di Codeigniter dengan Jquery</h1>
<hr />
<form id="form1" name="form1" method="post" action="">
<p>
<label for="select_provinsi"></label>
<select name="select_provinsi" id="select_provinsi">
<option>--Pilih Provinsi--</option>
<!-- fungsi untuk menampilkan data pada select list-->
<?php foreach($provinsi as $row_provinsi) { ?>
<option value="<?php echo $row_provinsi->id_provinsi?>"><?php echo $row_provinsi->nama_provinsi?></option>
<?php } ?>
</select>
</p>

<p>
<label for="select_kota"></label>
<select name="select_kota" id="select_kota" style="width:120px;">
<!-- fungsi untuk menampilkan data pada select list-->
<?php foreach($kota as $row_kota) { ?>
<option value="<?php echo $row_kota->id_kota?>" class="<?php echo $row_kota->id_provinsi; ?>"> <?php echo $row_kota->nama_kota?></option>
<?php } ?>
</select>
</p>
</form>
</body>

<!-- Memanggil file jquer -->
<script src="<?php echo base_url(); ?>assets/jquery.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/jquery.chained.min.js"></script>

<!-- Fungsi javascript untuk onchange -->
<script type="text/javascript">

$("#select_kota").chained("#select_provinsi"); <!-- parameter yang digunakan mesti sama dengan id select list-->

/* Arti dari script diatas yaitu select list kota akan menampilkan data yang mempunyai id_provinsi
yang sama pada table kota dengan table provinsi
*/

</script>

</html>


Sekarang tinggal kalian jalankan pada browser kalian, ketikal localhost/onchange_ci maka akan muncul tampilan seperti gambar dibawah.

Lalu coba kalian pilih provinsi jawa barat misalkan, maka kota yang muncul yaitu kota yang memiliki id provinsinya sama dengan yang ada pada table provinsi, seperti contoh gambar dibawah.
Bisa dilihat dari gambar diatas, kota yang muncul hanya kota bandung dan kota bogor, begitu pula dengan data yang lainnya.
Selesai sudahlan pembahasan artikel kali ini mengenai Cara Membuat Onchange di Codeigniter dengan Jquery. semoga artikel ini bisa membantu teman – teman sekalian.
Source code / file project dari tutorial ini juga bisa kalian download dibawah ini, Terimakasih sudah berkunjung di blog ini, bila ada yang kurang mengerti bisa ditanyakan di kolom komentar 🙂
 Onchange Codeigniter

9 thoughts on “Cara Membuat Onchange di Codeigniter dengan Jquery

  1. kalo untuk select combo boxnya di hidden itu engga bisa sepertinya, soalnya property dari comboboxnya juga tidak ada hidden, kalo untuk hidden biasanya dipakai buat type textbox, mungkin bisa dengan cara yang lain coba di cari saja 🙂

  2. parameter dari optionnya, sudah sama dengan fungsi di javascript ? itu harus sama, kemungkinan lain karena jquery.minnya coba cek includenya lagi, kalo tidak coba di download saja filenya untuk di pelajari.

Leave a Reply

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