Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : mail@rizaldimaulidia.com. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

Codeigniter

Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL

img-responsive

Pada kesempatan kali ini, saya akan coba share tutorial yang hampir sama dengan tutorial sebelumnya. Yaitu mengenai membuat yang namanya Chained Dropdown (sering disebut juga dengan dropdown bertingkat / combo box bertingkat / select berantai / combo box berantai dan masih banyak lagi). Hanya saja pada tutorial sebelumnya menggunakan PHP Native (Murni PHP), sedangkan pada tutorial kali kita akan menggunakan Framework Codeigniter 3 (Versi 3).

Sebelum lanjut ke tutorial pembuatannya, saya akan jelaskan apa itu chained dropdown, Chained Dropdown adalah 2 buah dropdown / combo box yang keduanya saling terhubung atau berelasi. Misalnya saya memiliki combo box Provinsi dan combo box Kota. Nah combo box kota tadi isi pilihannya akan menyesuaikan dengan apa yang dipilih pada combo box provinsi. Jadi pilihan pada combo box kota tergantung apa yang dipilih pada combo box provinsi. Kurang lebih seperti itu gambaran mengenai chained dropdown ini. Sekarang kita lanjut ke langkah-langkah pembuatannya.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Buat sebuah folder dengan nama chained_dropdown lalu simpan pada folder xampp/htdocs/
  2. Buat sebuah folder dengan nama images, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
  3. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/chained_dropdown/.
  4. Download plugin JQUERY, klik link berikut : Download.
  5. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/js/.
  6. Download gambar loading, klik link berikut : Download.
  7. Copy and paste file loading.gif yang telah di download tadi ke dalam folder xampp/htdocs/chained_dropdown/images/.
  8. Download Framework Codeigniter, klik link berikut : download.
  9. Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/chained_dropdown.
  10. Ekstrak file codeigniter_v3.7z nya.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama provinsi. Struktur tabelnya sebagai berikut :
    Struktur Tabel Provinsi - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL

    CREATE TABLE IF NOT EXISTS `provinsi` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `nama` varchar(100) NOT NULL,
      PRIMARY KEY (`id`)
    );
  3. Buat sebuah tabel lagi dengan nama kota. Struktur tabelnya sebagai berikut :
    Struktur Tabel Kota - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL

    CREATE TABLE IF NOT EXISTS `kota` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `id_provinsi` int(11) NOT NULL,
      `nama` varchar(100) NOT NULL,
      PRIMARY KEY (`id`)
    );

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/chained_dropdown/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

    $config['base_url'] = 'http://localhost/chained_dropdown/';

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

    $autoload['libraries'] = array();
    $autoload['helper'] = array();

    Ubah jadi seperti ini :

    $autoload['libraries'] = array('database');
    $autoload['helper'] = array('url');

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'form';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi form.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.


STEP 4 – BUAT MODEL
#1
Pertama kita akan membuat model untuk provinsi. Buat sebuah file dengan nama ProvinsiModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :

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

class ProvinsiModel extends CI_Model {
  
  public function view(){
    return $this->db->get('provinsi')->result(); // Tampilkan semua data yang ada di tabel provinsi
  }
}

Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘provinsi’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel provinsi. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data provinsi.

#2 Kedua kita akan buat model untuk kota. Buat sebuah file dengan nama KotaModel.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/models/. Berikut ini kodenya :

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

class KotaModel extends CI_Model {
  
  public function viewByProvinsi($id_provinsi){
    $this->db->where('id_provinsi', $id_provinsi);
    $result = $this->db->get('kota')->result(); // Tampilkan semua data kota berdasarkan id provinsi
    
    return $result; 
  }
}

Hampir sama seperti fungsi view() di model provinsi. Hanya saja, pada fungsi viewByProvinsi() disini, kita akan menampilkan semua data kota berdasarkan provinsinya. Pada kode diatas terdapat kode $this->db->where(‘id_provinsi’, $id_provinsi);, kode ini yang berguna untuk menyeleksi data kota berdasarkan provinsi. Jadi tidak akan semua kota yang munculnya. Pada fungsi ini juga, kita membutuhkan parameter $id_provinsi, id tersebut adalah ID Provinsi yang nantinya akan kita ambil dari controller.


 STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/controllers/. Berikut ini kodenya :

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

class Form extends CI_Controller {
  
  public function __construct(){
    parent::__construct();
    
    $this->load->model('ProvinsiModel');
    $this->load->model('KotaModel');
  }

  public function index(){
    $data['provinsi'] = $this->ProvinsiModel->view();
    
    $this->load->view('form', $data);
  }
  
  public function listKota(){
    // Ambil data ID Provinsi yang dikirim via ajax post
    $id_provinsi = $this->input->post('id_provinsi');
    
    $kota = $this->KotaModel->viewByProvinsi($id_provinsi);
    
    // Buat variabel untuk menampung tag-tag option nya
    // Set defaultnya dengan tag option Pilih
    $lists = "<option value=''>Pilih</option>";
    
    foreach($kota as $data){
      $lists .= "<option value='".$data->id."'>".$data->nama."</option>"; // Tambahkan tag option ke variabel $lists
    }
    
    $callback = array('list_kota'=>$lists); // Masukan variabel lists tadi ke dalam array $callback dengan index array : list_kota

    echo json_encode($callback); // konversi varibael $callback menjadi JSON
  }
}

Pada controller ini, kita membuat 3 fungsi. fungsi pertama yaitu public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘ProvinsiModel’); dan kode $this->load->model(‘KotaModel’);, kode tersebut berfungsi untuk memuat (meload) model provinsi dan kota (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

Fungsi yang kedua yaitu public function index(). Dalam fungsi ini ada kode $data[‘provinsi’] = $this->ProvinsiModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model provinsi (ProvinsiModel.php) lalu memasukannya ke dalam array data dengan index provinsi ($data[‘provinsi’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘form’, $data);. Kode tersebut berfungsi untuk memuat (meload) file form.php yang ada di folder views (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.

Fungsi yang kedua yaitu public function listKota(). Fungsi ini berguna untuk menampilkan data kota berdasarkan provinsi yang dikirim oleh Ajax dari form. Alur dari request dengan ajax ini adalah Pertama, kita telah memberi sebuah kode dengan event onchange pada combo box provinsi. Kode tersebut akan mengeksekusi kode ajax yang digunakan untuk mengirim data ID Provinsi yang diplih oleh user ke file option_kota.php. Di file tersebut akan dilakukan proses query sql untuk menampilkan data kota berdasarkan ID Provinsi yang di kirim tadi. Lalu file fungsi listKota() ini akan menghasilkan sebuah tag-tag option kota yang kemudian di konversi menjadi JSON untuk nantinya di ambil kembali hasil JSON tadi oleh AJAX. Lalu AJAX akan me-replace isi dari tag select kota sesuai JSON yang diterima tadi dari option_kota.php.


 STEP 6 – BUAT FORM
Selanjutnya kita akan buat sebuah file untuk menampilkan form dropdown provinsi dan kota. Buat file baru dengan nama form.php, lalu simpan pada folder xampp/htdocs/chained_dropdown/application/views/. Berikut ini kode dan tampilannya :

Form - Cara Simpel Membuat Chained Dropdown dengan Codeigniter dan MySQL

<html>
<head>
  <title>Chained Dropdown</title>
</head>
<body>
  <h1>Chained Dropdown</h1>
  <hr>
  
  <table cellpadding="8">
    <tr>
      <td><b>Provinsi</b></td>
      <td>
        <select name="provinsi" id="provinsi" style="width: 200px;">
          <option value="">Pilih</option>
          
          <?php
          foreach($provinsi as $data){ // Lakukan looping pada variabel siswa dari controller
            echo "<option value='".$data->id."'>".$data->nama."</option>";
          }
          ?>
        </select>
      </td>
    </tr>
    <tr>
      <td><b>Kota</b></td>
      <td>
        <select name="kota" id="kota" style="width: 200px;">
          <option value="">Pilih</option>
        </select>

        <div id="loading" style="margin-top: 15px;">
          <img src="images/loading.gif" width="18"> <small>Loading...</small>
        </div>
      </td>
    </tr>
  </table>
  
  <!-- Load librari/plugin jquery nya -->
  <script src="<?php echo base_url("js/jquery.min.js"); ?>" type="text/javascript"></script>
  
  <script>
  $(document).ready(function(){ // Ketika halaman sudah siap (sudah selesai di load)
    // Kita sembunyikan dulu untuk loadingnya
    $("#loading").hide();
    
    $("#provinsi").change(function(){ // Ketika user mengganti atau memilih data provinsi
      $("#kota").val().hide(); // Sembunyikan dulu combobox kota nya
      $("#loading").show(); // Tampilkan loadingnya
    
      $.ajax({
        type: "POST", // Method pengiriman data bisa dengan GET atau POST
        url: "<?php echo base_url("index.php/form/listKota"); ?>", // Isi dengan url/path file php yang dituju
        data: {id_provinsi : $("#provinsi").val()}, // data yang akan dikirim ke file yang dituju
        dataType: "json",
        beforeSend: function(e) {
          if(e && e.overrideMimeType) {
            e.overrideMimeType("application/json;charset=UTF-8");
          }
        },
        success: function(response){ // Ketika proses pengiriman berhasil
          $("#loading").hide(); // Sembunyikan loadingnya

          // set isi dari combobox kota
          // lalu munculkan kembali combobox kotanya
          $("#kota").html(response.list_kota).show();
        },
        error: function (xhr, ajaxOptions, thrownError) { // Ketika ada error
          alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError); // Munculkan alert error
        }
      });
    });
  });
  </script>
</body>
</html>

Pada kode diatas terdapat kode foreach($provinsi as $data){, kode tersebut akan manampilkan satu per satu data provinsi sampai data provinsi yang terakhir.
echo “<option value='”.$data->id.”‘>”.$data->nama.”</option>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel provinsi.

Akan saya jelaskan sedikit mengenai AJAX nya, karena sebagian besar sudah saya jelaskan lewat kode diatas dengan komentar.

  • url : diisi dengan url file yang akan dituju
  • type :  diisi dengan method yang ingin digunakan. isi dengan GET atau POST
  • data : data yang akan dikirim ke file yang dituju
  • success : function(){} : ketika proses pengiriman selesai, lakukan aksi
  • error : function(){} : ketika terjadi error, lakukan aksi

untuk penjelasan lebih lengkap mengenai atiribut yang ada di JQUERY AJAX, klik disini (Anda akan masuk ke halaman Iklan terlebih dahulu, Tunggu 5 detik lalu klik tombol SKIP AD yang ada di pojok kanan atas).


Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Chained select box using codeigniter mysql, membuat chained dropdown bertingkat dengan codeigniter dan mysql, membuat dropdown berantai dengan codeigniter, tutorial chained dropdown dengan codeigniter dan mysql, chain dropdown dengan codeigniter, chained dropdown dengan codeigniter, membuat dropdown bertingkat dengan codeigniter

Chained Dropdown Codeigniter

(Total : 42,721 viewers, 1 viewers today)
chained-dropdown-dengan-codeigniter

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS TO faishal19995 (Cancel)

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

Name *

Email *

Website

30 Comments

  1. --rudi--

    Alhamdulillah sukses gan, terima kasih panduannya. Tentunya saya sesuaikan dengan kode milik saya dan dipadukan dengan bantuan agan di atas. Terima kasih banyak.

  2. Joko Supriyanto

    Bang, kalau untuk edit codenya dimana ya bang? mungkin punya tutorialnya bang

  3. Firman Firdaus

    Saya sudah berhasil gan, cuma mau tanya untuk menampilkan data dari beberapa tabel / join tabel itu dibagian apa yang harus diganti dan sourcecode seperti apa yang benar? Mohon bantuannya gan 🙏

    • sudah paham cara membuat query JOIN belum om? harus paham itu dulu, saya belum ada tutorialnya, tapi coba googling dulu dengan keyword “belajar query join mysql”

  4. Muhamad Ramadhan

    work gan, tpi yg ane bingung kenapa kalo pake form modal ga muncul ya

  5. rahma123

    mas saya mau nanya, source nya ada yg saya ubah sedikit nyesuain sama db dan untuk model saya gabung jd satu, tp kenapa malah unable to load the request file ya

  6. surya2018

    Gan, thanks banget tutorialnya, hampir berhasil http://prntscr.com/p45og1. tapi saya ada kendala sedikit yaitu setelah memilih nama provinsi field nama kota “loading” terus-menerus dan tidak selesai http://prntscr.com/p45p4c. mohon pencerahan apa penyebabnya dan bagaimana solusinya. trims

    • coba cek console browsernya om, klik pada tab network, disana akan keliatan ajax requestnya, kalau error dia akan berwarna merah

  7. Rizky Nurafricanadi

    Min, ane mau nanya..
    Ane modif sedikit sourcodenya.
    Ane buat dari combobox ke textbox, pas ane coba bisa ajaxnya tapi datanya ga ke pangggil.. Tulisannya [ object object]

    • output dari php nya seperti apa? biasanya keluar tulisan tersebut karena outputnya berupa array, jadi ketika ditampilkan ke textbox akan keluar object object

  8. faishal19995

    gan itu kok inputnya di db nya malah jadi isinya id semua bukan nama kota nya atau nama provinsinya

    • Rizaldi Maulidia Achmad

      maksudnya id semua bagaimana om? bisa kirim screenshot db nya via fans page fb. biar saya bisa lihat

      • faishal195555

        OK bang udah bisa….oh ya ini kan untuk input ke db ya..kalau edit ya kira-kira gimana bang kodingnya ?? maaf nih kami masih newbie

        • Rizaldi Maulidia Achmad

          di jquery ada yang sebuah fungsi untuk set value yaitu val(). contoh :
          $(“#id-select-nya”).val(“value_yg_mau_diselect”);

          • faishal19555

            Jujur gan ane gak paham maksudnya gimana itu koding…ada tutorial lengkap untuk referensi kita yang masih newbie ?

          • Rizaldi Maulidia Achmad

            kalau mau paham sih, ga bisa loncat-loncat belajarnya. untuk paham ini, harus ada basic javascript + jquery + ajax dulu biar bisa paham

          • faishal199995

            wah kalau cuman dikasih itu nya aja kita kurang paham bang….intinya itu ini kan versi inputnya, nah kalau versi untuk editnya gimana bang ? apa aja yang harus dirubah dari script versi input diatas ? soalnya udah ane rubah – rubah tetep gk mau work..Mohon pencerahanya master

          • Rizaldi Maulidia Achmad

            coba kontak via fans page fb saja om. nanti kirim source code nya disitu

    • adityasatvika

      Gan, untuk programnya berjalan dengan baik, tapi pada saat data kota dan provinsi yang ada di form input, kenapa setelah masuk ke database malah berubah menjadi id dari kota atau provinsi yang di inputkan ?

      • ya memang seharusnya gitu om. nantikan untuk memunculkan nama kota / provinsinya bisa menggunakan yang namanya “Query Join / Relasi”. coba pelajari tentang query join di mysql nya om

NOTE ARCHIVES