Dokumen Ary

Belajar adalah suatu investasi yang tak ternilai harganya

Ajax 2 Combobox saling berhubungan pada Codeigniter

Hai reader….

Pada kesempatan kali ini saya ingin berbagi bagaimana membuat dua buah combobox yang saling berhubungan dengan AJAX yang datanya di ambil dari database dan diterapkan pada Framework Codeigniter, maksutnya saling berhubungan adalah ketika combobox yang pertama di pilih maka combobox yang kedua akan menampilkan pilihan sesuai dengan yang di tetapkan untuk setiap pilihan pada combobox pertama. Untuk lebih jelasnya perhatikan ilustrasi berikut.

Pada gambar di atas, ketika combobox Kelas di pilih X, maka combobox Matapelajaran akan menampilkan daftar Matapelajaran untuk kelas X. dari pada panjang lebar, saya akan menerangkan setiap langkah penerapannya pada Framework Codeigniter 2.1.0
Saya menganggap anda sudah bisa menginstall Codeigniter dan konfigurasi databasenya ya… πŸ˜€

Oke yang pertama kali yang perlu di siapkan adalah Jquery, bisa di dapatkan di http://code.jquery.com/jquery-1.7.js, copy dan simpan dengan nama jquery-1.7.js kemudian letakkan di root project.

Pada contoh ini saya menggunakan dua buah tabel yaitu tabel Kelas dan Matapelajaran berikut SQLnya
Tabel Kelas :

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');

Tabel Matapelajaran

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);

Dari SQL di atas terlihat bahwa kelas X mempunyai matapelajaran Matematika dan Bahasa Indonesia, kelas XI mempunyai matapelajaran Geografi dan Bahasa Inggris.

Kemudian Buat Sebuah model dengan nama Mmapel, berikut Kode dan penjelasannya

Setelah model di buat, lanjut buat sebuah controller dengan nama mapel berikut kode dan penjelasannya

Langkah terahir adalah buat sebuah file dengan nama tambah_mapel.php kemudia letakkan di folder views pada application anda, berikut kode dan penjelasannya

Anda tidak usah mengetikkan semua code yang tertera di atas, saya sudah menyediakan filenya tinggal di download, dan silahkan di coba… Saya sertakan 4 file : mapel.php(Controller), mmapel.php(Model), tambah_mapel.php(View), db2combobox_ajax.sql(Database).

Ini link download filenya… DOWNLOAD FILE

Sekian tutorial kali ini, semoga bisa bermanfaat… πŸ™‚

35 responses to “Ajax 2 Combobox saling berhubungan pada Codeigniter

  1. fbikeren February 20, 2012 at 6:15 pm

    susah tuh validasinya?gmn caranya repopulasi dlm form, gw msh kesulitan nih kasih tutorialnya lengkap dong

    • Almazari February 21, 2012 at 3:24 am

      validasinya ya gampang aja to…. sama seperti validasi biasanya…

      contoh misalnya form nya saya arahkan ke controller Mapel seperti berikut :
      <?php echo form_open(‘mapel/input’); ?>
      <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]’>$k[kelas_nama]</option>";
      }
      ?>
      </select>
      <?php echo form_error(‘kelas_id’); ?>
      </td>
      </tr>
      <tr>
      <td>Pilih Matapelajaran</td>
      <td><select name="matapelajaran_id" id="matapelajaran_id">
      <option value="">–Pilih–</option>
      </select>
      <?php echo form_error(‘matapelajaran_id’); ?>
      </td>
      </tr>
      </table>
      <?php echo form_close(); ?>

      pada controller Mapel functionnya seperti berikut :
      function input(){
      $this->form_validation->set_rules(‘kelas_id’,’Kelas’,’required’);
      $this->form_validation->set_rules(‘matapelajaran_id’,’Matapelajaran’,’required’);
      if ($this->form_validation->run()==TRUE){
      //disini untuk input data
      }
      $this->add();
      }

      Maksutnya repopulasi form gmana?

  2. fbikeren March 10, 2012 at 3:53 pm

    wah ini tutorialnya siiip ya. Tapi nih sdh saya jalankan ya kalo select yg pertama berisi and kedua kosong maka validasinya gagal/ mksku itu nilainya gak balik spt piklihan pertama/lagi jadi tulisan pilih gituh loh. mitu masalahku selama ini plus yg saya maksud repopulasi datanya itu. ayoo gmn … situ mungkin lebih ahlinya. tlg kasih tau klo tau y

    • Almazari March 10, 2012 at 5:10 pm

      Maaf saya g begitu ngerti maksut pertanyaan anda… πŸ™‚ klo validasi default codeigniter memang tidak bisa mengembalikan nilai sebelumnya, itu setau saya….

      dan saya rasa jawaban sebelumnya sudah menjawab.

      • fbikeren March 10, 2012 at 6:06 pm

        bisa kalo Anda makai library validation and viewnya make form_dropdown() maaf nih Soalnya sy br belajar jg buat skripsi.. dan nilai di select pertama bs balik. sy carinya di web2 yg bhsnya inggris tu … n lg cari caranya select yg ke-2 bs balik tp tau deh hehehe πŸ™‚
        nih loh pnyku

        validation->city_id=>$this->validation->city_name),set_value(‘city_id’, $this->validation->city_id),$this->input->post(‘city_id’));
        ?>

      • Almazari March 11, 2012 at 9:18 am

        oh gitu ya… sip, soalnya kemarin saya cuma menekankan pada bisa atau tidaknya combobox berhubungan aja πŸ™‚ belum ke validasinya,,, dan validasinya saya bisanya baru itu mas… makasih ya infonya….

  3. Winarso May 15, 2012 at 4:06 am

    gan,dmn cata membuat Ajax 4 Combobox saling berhubungan pada Codeigniter contoh propinsi berhubngn kabupaten lalu berhubungn kecamatan lalu brhubungn dengn kelurahan dan dimana vlidasinya..

  4. Winarso May 15, 2012 at 4:25 am

    gan,file gk jln ut kelas bs tp ut matapelajarn blm bs jln/kosong

  5. cahyo June 2, 2012 at 5:35 am

    gan….
    kalo make keamanan enkripsi keamanan. :
    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

    disetiap controllernya emang gk bisa po ?

    cz ane jalanin controller mapelnya malah ada peringatan error
    404 Page Not Found

  6. yeyep sudrajat April 5, 2013 at 7:26 am

    Mas Ary…bagaimana penerapan combobox saling berhubungan ini jika dipasang di cms lokomedia 1.61..mohon bantuannya Mas Ary…terima kasih banyak

  7. Kevin August 9, 2013 at 11:51 am

    gan, ini setelah saya download dan compile, kok combobox mata pelajarannya tidak mengeluarkan hasil apapun yah? Kelasnya sudah saya ganti tapi mata pelajarannya ttp tidak menampilkan hasil..

    trus gan kalau diliat2, fungsi getMataPelajaran di model mmapel gak berguna donk? soalnya klo saya liat, fungsi tsb tidak dipanggil di controller

  8. didin September 6, 2013 at 6:30 am

    halo Kevin,, coba kamu tambah fungsi load di bagian model
    $this->load->model(‘nama_model’)

  9. Pingback: Repopulasi 2 Combobox Ajax Saling Berhubungan Codeigniter | Dokumen Ary

  10. RIzaldi December 18, 2013 at 2:14 am

    tutorial nya enggak bermutu , ngasih tutorial cuma setengah setengah , ini tutorial khusus buat master seperti anda mungkin , terus yang mempelajari cuma yang master doang ?? yang newbie kaya saya ?? πŸ˜€

  11. Budi February 7, 2014 at 3:08 am

    bang kalo misalnya kan itu combobox saya taru di sebuah form, cara nyubmit (maksudnya ngambil id combo box nya gimana atuh)

    makasih

  12. sit (@sitiirahma_) February 13, 2014 at 1:53 pm

    ko saya coba, namanya engga muncul?

  13. sit (@sitiirahma_) February 13, 2014 at 1:54 pm

    ada yang bisa engga membat combobox yang penampilkan kode polikinik dan nama dokternya?

  14. yanti March 23, 2014 at 9:43 am

    sudah saya coba tp ko setelah pilih kelas nama matapelajarannya gak muncul yah?? tolong bantuannya…

  15. Ekha Pratama August 16, 2014 at 6:24 am

    mas, saya butuh code nya secara lengkap donk. uda ga bisa donlot. thx

  16. anisa September 30, 2014 at 10:03 pm

    mas, saya nyobain tapi pas udah pilih kelas di combobox mapelnya keluar error “Undefined variable: data”. thx

  17. ilham December 4, 2014 at 1:35 am

    Link donlot nya broken, gan..

  18. saassa December 14, 2014 at 9:33 am

    link download terbaru nya gan !!

  19. ardin January 27, 2015 at 7:05 am

    Donlot dulu JQuery nya trs copy-paste jadi satu sama folder file2 itu. Jangan cuman bisa nyontek doank tp mikir donk. Pake otak sedikit susah amat sie.

  20. putri April 15, 2015 at 3:53 pm

    mas, kenapa datanya ada yang muncul dan ada yang ga ? padahal skripnya udah sama persis.

  21. rizka April 1, 2016 at 4:31 am

    gak bisa di download!!

  22. Nafsi rudin May 20, 2017 at 12:12 pm

    Mas kalau di Form edit gemana yaa ?

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: