Dokumen Ary

Belajar adalah suatu investasi yang tak ternilai harganya

Repopulasi 2 Combobox Ajax Saling Berhubungan Codeigniter

Halo para pengujung dokumenary…

Repopulasi 2 combobox ajaxTulisan kali ini akan membahas bagaimana cara repopulasi form dua combobox ajax yang saling berhubungan pada framework codeigniter, yang dimaksut repopulasi adalah, ketika form yang berisi dua combobox ajax yang saling berbubungan tersebut di submit, dan ternyata ada field form yang belum diisi (* harus wajib diisi), maka form akan dikembalikan, dan field ajax tersebut tetap terpilih pada data yang kita pilih sebelumnya, artinya kita tidak melalukan pemilihan lagi.

Sebagai analoginya, silahkan temen – temen mencoba hasilnya di SINI, dan biarkan field Jam Mulai tetap kosong..

Untuk membuatnya, tidak jauh beda dengan tulisan saya yang sebelumnya tentang Ajax 2 Combobox saling berhubungan pada Codeigniter . Supaya lebih jelas, saya akan menerangkannya lagi dari awal.

Ok berikut langkah demi langkah membuatnya :

1. Download Codeigniter terbaru di http://ellislab.com/codeigniter

2. Lakukan setting dan configurasi pasca install codeigniter, saya menganggap anda sudah mahir dalam langkah ini.

3. Buat folder bernama js kemudian download Jquery di http://code.jquery.com/jquery-1.7.js Copy dan simpan dengan nama jquery-1.7.js dan letakkan di dalam folder js tersebut

4. Buat database dan buat dua buah tabel yaitu kelas dan matapelajaran, berikut SQLny :

CREATE TABLE IF NOT EXISTS `kelas` (
`kelas_id` tinyint(3) NOT NULL AUTO_INCREMENT,
`kelas_nama` varchar(20) NOT NULL,
PRIMARY KEY (`kelas_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `kelas` (`kelas_id`, `kelas_nama`) VALUES
(1, 'X'),
(2, 'XI');

CREATE TABLE IF NOT EXISTS `matapelajaran` (
  `matapelajaran_id` tinyint(3) NOT NULL AUTO_INCREMENT,
  `matapelajaran_nama` varchar(20) NOT NULL,
  `kelas_id` tinyint(3) NOT NULL,
  PRIMARY KEY (`matapelajaran_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

INSERT INTO `matapelajaran` (`matapelajaran_id`, `matapelajaran_nama`, `kelas_id`) VALUES
(1, 'Matematika', 1),
(2, 'Bahasa Indonesia', 1),
(3, 'Geografi', 2),
(4, 'Bahasa Inggris', 2);

5. Buat file model bernama mmapel.php yang berisi code berikut :

<?php
Class Mmapel extends CI_Model {

    function getKelas(){
        $result = $this->db->get('kelas');
        if ($result->num_rows() > 0 ){
             return $result->result_array(); 
        }
        else{
             return array(); 
        }
    }

    function getMatapelajaran($kelas_id){
        $this->db->where('kelas_id',$kelas_id);
        $result = $this->db->get('matapelajaran');
        if ($result->num_rows() > 0 ){
             return $result->result_array(); 
        }
        else{
             return array(); 
        }
     }
}
?>

6. Buat file view bernama tambah_mapel.php yang berisi code berikut :

<script src="<?php echo base_url('js/jquery-1.4.js') ?>" type="text/javascript"></script>
<script>
  $(document).ready(function(){
          $("#kelas_id").change(function(){
          var kelas_id = $("#kelas_id").val();
          $.ajax({
             type : "POST",
             url  : "<?php echo site_url('mapel/getMapel'); ?>",
             data : "kelas_id=" + kelas_id,
             success: function(data){
                   $("#matapelajaran_id").html(data);
             }
          });
  });
  });
</script>
<h4>Contoh 2 Combobox saling berhubungan</h4>
<a href="https://dokumenary.wordpress.com" target="_blank"><h5>By : Dokumenary.wordpress.com</h5></a>
<?php echo form_open('mapel/input'); ?>
<?php echo validation_errors(); ?>
<table>
  <tr>
     <td>Pilih Kelas</td>
     <td>
     <select name="kelas_id" id="kelas_id">
          <option value="">--Pilih--</option>
          <?php
          foreach ($kelas as $k){
             echo "<option value='$k[kelas_id]' ".set_select('kelas_id', $k['kelas_id']).">$k[kelas_nama]</option>"; 
          } 
          ?>
      </select>
      </td>
  </tr>
  <tr>
       <td>Pilih Matapelajaran</td>
       <td>
       <?php
       echo "<select name='matapelajaran_id' id='matapelajaran_id'>";

       if(isset($_POST['matapelajaran_id'])){
           $mapel = $this->mmapel->getMatapelajaran($_POST['kelas_id']);
           $data .= "<option value=''>--Pilih--</option>";
           foreach ($mapel as $mp){
              if($mp['matapelajaran_id'] == $_POST['matapelajaran_id']){
                  $data .= "<option value='$mp[matapelajaran_id]' selected>$mp[matapelajaran_nama]</option>\n";
              }
              else{
                  $data .= "<option value='$mp[matapelajaran_id]'>$mp[matapelajaran_nama]</option>\n";
              }
           }
           echo $data;
        }
        else{
           echo "<option value=''>--Pilih--</option>"; 
        }

        echo "</select>";
        ?>

        </td>
  </tr>
  <tr>
        <td>Jam Mulai</td>
        <td><input type="text" name="jam_mulai" value="<?php echo set_value('jam_mulai'); ?>"></td>
  </tr>
  <tr>
         <td colspan="2"><input type="submit" value="simpan"></td>
  </tr>
</table>
<?php echo form_close(); ?>

7. Terahir buta file controller bernama mapel.php yang berisi code berikut :

<?php
Class Mapel extends CI_Controller {
  function __construct(){
     parent::__construct(); 
     $this->load->model('mmapel');
  }

  function index(){
     $data['kelas'] = $this->mmapel->getKelas();
     $this->load->view('tambah_mapel',$data);
  }

  function getMapel(){
     $kelas_id = $this->input->post('kelas_id');
     $mapel = $this->mmapel->getMatapelajaran($kelas_id);
     $data .= "<option value=''>--Pilih--</option>";
     foreach ($mapel as $mp){
          $data .= "<option value='$mp[matapelajaran_id]'>$mp[matapelajaran_nama]</option>\n"; 
     }
     echo $data;
  }

  function input(){
     $this->load->library('form_validation');
     $this->form_validation->set_rules('kelas_id','Kelas','required|xss_clean');
     $this->form_validation->set_rules('matapelajaran_id','Matapelajaran','required|xss_clean');
     $this->form_validation->set_rules('jam_mulai','Jam Mulai','required|xss_clean');
     if($this->form_validation->run() == TRUE){
         //eksekusi
     }
     else{
         $this->index();
     }
  }

}
?>

Jika temen – temen tidak mau repot silahkan download aja file latihan diatas di SINI.

Semoga dengan adanya tulisan ini, dapat memberikan pencerahan bagi anda yang membacanya, saya selaku penulis mengucapkan terimakasih banyak telah berkunjung ke website ini, dan mendukung dengan cara like FB Page dokumenary.

Semoga bermanfaat, sekian …

5 responses to “Repopulasi 2 Combobox Ajax Saling Berhubungan Codeigniter

  1. fherzzz31 July 8, 2014 at 6:19 am

    makasih mas.. sangat bermanfaat.. (y)

  2. lalla August 21, 2014 at 5:55 am

    saya kok bisa ya

  3. ardin January 27, 2015 at 8:05 am

    Saya dapat error:
    [quote]A PHP Error was encountered

    Severity: Notice

    Message: Undefined property: Mapel::$db

    Filename: core/Model.php

    Line Number: 51[/quote]

    Sama:
    [quote]Fatal error: Call to a member function get() on null in C:\xampp\htdocs\comboci\application\models\mmapel.php on line 5[/quote]

  4. suhendar January 11, 2019 at 4:08 am

    kalau dalam satu table yang sama gmn yah bos..misalnya item barang dengan harga barang,ketika di pilih item barang otomatis harga barang sesuai item barang yg dipilih, mohon pencerahannya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: