Kategori Random

Combobox Dinamis dengan CodeIgniter

Posted : 24 November 2015 | 05:08:54 , Dibaca 12169 kali

Combo box pada suatu form kita ketahui digunakan untuk memilih satu diantara pilihan yang telah disediakan baik langsung yang diambil dari database maupun yang kita sisipkan pada code.

Jika berpatok pada judul, maka dapat kita simpulkan bahwa tutorial kali ini akan membahas combo dinamis untuk menangani suatu combo box saling terhubung. Baik tanpa berpanjang lebar mari kita praktekkan langsung.

Persiapan

Seperti pada judul, karna kita bangun menggunakan codeigniter kita mesti mempersiapkan core codeigniter dan ditambah jquery untuk menjalankan dinamis combo boxnya.


Database

Pada contoh kasus kali ini kita buat untuk pemilihan kota dimana akan terapkan pada tiap propinsi ada kota kabupatennya. Silakan buat database dan buat tabel seperti dibawah :

agar sama kita buat database db_provinsi dengan tabael tb_wilayah

CREATE TABLE `tb_wilayah` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `idprov` int(3) DEFAULT NULL,
  `idkot` int(3) DEFAULT NULL,
  `idkec` int(3) DEFAULT NULL,
  `idkel` int(3) DEFAULT NULL,
  `name` varchar(40) DEFAULT NULL,
  `level` int(1) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT DEFAULT CHARSET=latin1

setelah tabelnya dibuat silakan import dump file berikut untuk isi data nya data_wilayah.sql

 

Setting

Pada routes.php folder config buat default_controller nya cdinamis seperti dibawah

$route['default_controller'] = "cdinamis"; 

 

Controller

pada controller silakan buat skrip untuk menampilkan dan mengambil get data. Beri nama cdinamis.php dan simpan pada folder application/controllers/ dan skripnya seperti berikut :

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

class Cdinamis extends CI_Controller {

	//////////////////////////////////////////
    // Combo Box Dinamis
    // controller cdinamis view, get data
    // by faber
	/////////////////////////////////////////
    public function __construct() {
        parent::__construct();
        $this->load->model('mcombox');   //load model mcombox
        $this->load->helper('form','url');
    }

	public function index()
	{
	    $data['title'] = 'Combo Box Dinamis dengan CodeIgniter'; //judul title
	    $data['qprovinsi'] = $this->mcombox->get_provinsi(); //query model semua barang

		$this->load->view('vcombox',$data); //load view vcombox

	}

    function get_kota(){

            $prov = $this->input->post('provinsi');  //mengambil post data yang dijabarkan pada javascript yaitu type: "POST"
			$arrStates = $this->mcombox->get_kota_byprovinsi($prov);  //mengambil data dari database melalui model mcombox
            foreach ($arrStates as $states) {
                $arrstates[$states->idkot] = $states->name;
            } //array dibuat untuk ditampilkan pada combox box
            print form_dropdown('kota',$arrstates); //setelah berhasil diambil lalu ditampilkan
      }
}

/* End of file cdinamis.php */
/* Location: ./application/controllers/cdinamis.php */

 

Model

simpan dengan nama mcombox.php pada folder application/model code skripnya :

<?php
class Mcombox extends CI_Model {

    var $tabel = 'tb_wilayah';    //nama tabel

    function __construct() {
        parent::__construct();
    }
    function  get_provinsi() {  //funtion menampilkan semua provinsi
        $this->db->select('*');
        $this->db->from($this->tabel);
        $this->db->where('level','1');
        $query = $this->db->get();
        if ($query->num_rows() > 0) {
            return $query->result();
        }
    }

    function get_kota_byprovinsi($state){  //funtion menampilkan kota berdasarkan provinsi
        $this->db->select('idkot, name');
        $this->db->where('idprov',$state);
        $this->db->where('level','2');
        $query = $this->db->get($this->tabel);
        if($query->num_rows() > 0){
            return $query->result();
        } else {
            return FALSE;
        }
    }
}
?>

Tampilan (View)

Saya gabungkan boostrap untuk tampilannya agar lebih dinamis dan enak dipandang. Maka dari itu kita mesti sisipkan core bootstrap pada code htmlnya. Simpan semua file di folder application/views/

header.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="FaberNainggolan">
    <title><?=$title?></title>
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">

  </head>

  <body>
    <!-- Static navbar -->
    <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">CBO DINAMIS</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="<?=base_url()?>home"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li class="active"><a href="<?=base_url()?>barang"><i class="glyphicon glyphicon-th"></i> Combo Dinamis</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Default</a></li>
            <li class="active"><a href="#">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

 

footer.php

<!-- jquery core -->
<script src="<?=base_url()?>assets/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
    $('#combox select').change(function () { 
        var selProv = $(this).val();
        console.log(selProv);  //menampilan pada log browser apa yang dibawa pada saat dipilih pada combo box
        $.ajax({
            url: "<?=base_url()?>cdinamis/get_kota/",       //memanggil function controller dari url
            async: false,
            type: "POST",     //jenis method yang dibawa ke function
            data: "provinsi="+selProv,   //data yang akan dibawa di url
            dataType: "html",
            success: function(data) {
                $('#kota').html(data);   //hasil ditampilkan pada combobox id=kota
            }
        })
    });
 });
</script>
</body>
</html>

 

vcombox.php

<?php $this->load->view('header');?>    <!-- include header.php -->

<div class="container">
<div class="panel panel-default">
  <div class="panel-heading"><b>Combo Box Dinamis</b></div>
    <div class="panel-body">
        <div class="col-xs-6">
        <table class="table table-striped table-bordered">
         <tr>
         <td>
         <label>Provinsi</label>
         <div id="combox"> <!-- sebagai indentitas combo box -->
          <select name="provinsi" id="provinsi" class="form-control">
           <option></option>
           <?php foreach($qprovinsi as $rowprov){?>
           <option value="<?=$rowprov->idprov?>"><?=$rowprov->name?></option>
           <?php }?>
          </select>
          </div>
         </td>
         </tr>
        <tr>
         <td>
         <label>Kota/Kabupaten</label>
          <select name="kota" id="kota" class="form-control">
           <option></option>
          </select>
         </td>
         </tr>
       </table>
       </div>
       </div>
    </div>    <!-- /panel -->
</div> <!-- /container -->
<?php $this->load->view('footer');?>  <!-- include footer.php -->

jika sudah semua kita buat, kini kita coba testing dibrowser. dan berikut penampakan output dari code skrip diatas.

Gambar ketika kita jalankan pertama kali

Gambar Combo box pertama di pilih yang akan otomatis membuka combo box kota/kabupaten seperti gambar berikutnya

 

Gambar combo box pada pilihan kota/kabupaten

 

Demikian tutorial kali ini semoga bermanfaat. Salam coding

Postingan Terkait
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 1511 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 3894 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 1254 hits )
» WYSIWYG editor menggunakan CKEditor di CodeIgniter ( 15 Sep 2016 | 03:07:03 , 1379 hits )
» Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery Part II ( 24 Agu 2016 | 08:59:38 , 3640 hits )