Select atau combo box bukan hal yang asing lagi bagi kalangan developer.

Select atau combo box ini bukanlah komponen pelengkap dari suatu form, melainkan komponen utama. Seperti halnya input.

Anda dapat menggunakan komponen select ini untuk membuat berbagai form, seperti form registrasi dan sebagainya.

Di era aplikasi modern saat ini, hampir semua select dibuat dinamis. Dengan kata lain, option (pilihan) dari select mengambil data dari database. Dengan demikian, user bisa dengan mudah menambahkan option dari suatu select.

Disaat select telah dibuat dinamis, dengan kata lain optionnya diambil dari database, kebutuhan baru pun muncul.

Select tidak hanya dibuat dinamis, melainkan juga harus berhubungan.

Contoh:

Sumber: elevenia.co.id

Pada gambar diatas dapat disimpulkan bahwa select berhubungan sangatlah penting untuk membangun suatu aplikasi berbasis web.

Select berhubungan, dapat memberikan pengalaman terdendiri bagi user (user experience).

Banyak developer web menggunakan select dinamis berhubungan ini untuk membuat pemilihan provinsi dan kabupaten/kota.

Salah satunya adalah website online shop terkenal di Indonesia, yaitu elevenia.co.id.

Elevenia menggunakan select berhubungan untuk memilih provinsi dan kabupaten/kota.

Anda dapat melihatnya pada gambar diatas, bahwa kabupaten/kota ditentukan pada option (pilihan) select provinsi yang terpilih.

Sesuai dengan judul artikel diatas, pada kesempatan kali ini, saya akan sharing tentang bagaimana membuat select berhubungan menggunakan ajax dan framework codeigniter.

Seperti yang telah dijabarkan diatas, dimana option dari select ke-2 ditentukan oleh option yang dipilih pada select pertama.

Adapun contoh kasus kali ini adalah membuat select kategori dan sub kategori, dimana option dari sub kategori ditentukan dari kategori yang pilih.

Jika anda bingung dengan penjelasan diatas, jangan khawatir, anda akan segera mengerti setelah mencobanya sendiri.

Ok mari kita mulai!

 

Persiapan

Sebelum proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu anda persiapkan?

Berikut listnya:

Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

Jquery, Jika anda belum memilikinya, silahkan download di situs resminya www.jquery.com

Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

 

#1. Pembuatan Struktur Database dan Table

Berikutnya, yang perlu anda lakukan adalah pembuatan database dan struktur table.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_select;

Pada query diatas, anda akan mendapatkan sebuah database dengan nama db_select.

Table, buat dua table yaitu table kategori dan tabel subkategori.

Buat Tabel kategori dengan mengeksekusi query berikut:

CREATE TABLE kategori(
kategori_id INT PRIMARY KEY AUTO_INCREMENT,
kategori_nama VARCHAR(50)
)ENGINE=INNODB;

Buat Tabel subkategori dengan mengeksekusi query berikut:

CREATE TABLE subkategori(
subkategori_id INT PRIMARY KEY AUTO_INCREMENT,
subkategori_nama VARCHAR(50),
subkategori_kategori_id INT,
FOREIGN KEY (subkategori_kategori_id) REFERENCES kategori (kategori_id) ON UPDATE CASCADE
)ENGINE=INNODB;

Query diatas akan membuat table kategori dan tabel subkategori berhubungan (berelasi).

Adapun bentuk relasi antar tabel yang dihasilkan adalah sebagai berikut:

Setelah membuat struktur tabel, insert beberapa data ke masing-masing tabel.

Insert data pada tabel kategori dengan mengeksekusi query berikut:

INSERT INTO kategori(kategori_nama) VALUES 
('Kosmetik'),('Minuman'),('Makanan');

Insert data pada tabel subkategori dengan mengeksekusi query berikut:

INSERT INTO subkategori(subkategori_nama,subkategori_kategori_id)VALUES
('Face wash','1'),('Lips Stick','1'),('Skin Care','1'),('Body Wash','1'),
('Minuman Soda','2'),('Minuman Dingin','2'),('Milkshake','2'),('Soft Drink','2'),
('Breakfast','3'),('Lunch','3'),('Dinner','3');

 

#2. Installasi Codeigniter

Untuk menginstall codeigniter, silahkan extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama ci_select.

Setelah di extract, buat folder assets sejajar dengan folder application dan system, kemudian sertakan file bootstrap dan jquery didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder css dan js.

Didalam folder css, terdapat file bootstrap.css dan didalam folder js, terdapat file bootstrap.js dan jquery-2.2.3.min.js.

 

#3. Konfigurasi Codeigniter

Buka application/config/autoload.php atur menjadi seperti berikut:

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

Buka application/config/config.php dan atur menjadi seperti berikut:

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

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_select', //sesuaikan dengan database anda!
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

#4. Buat model dengan nama M_kategori.php

Kemudian ketikan kode berikut:

<?php
class M_kategori extends CI_Model{

        function get_kategori(){
                $hasil=$this->db->query("SELECT * FROM kategori");
                return $hasil;
        }

        function get_subkategori($id){
                $hasil=$this->db->query("SELECT * FROM subkategori WHERE subkategori_kategori_id='$id'");
                return $hasil->result();
        }
}

Pada model M_kategori, terdapat dua function, yaitu function get_kategori dan function get_subkategori.

Function get_kategori, berfungsi untuk menampilkan semua data yang ada pada tabel kategori dan akan ditampilkan pada option select nantinya.

Sedangkan function get_subkategori, berfungsi untuk mengambil data subkategori berdasarkan id kategori.

 

#5. Buat controller dengan nama Kategori.php

Kemudian ketikan kode berikut:

<?php
class Kategori extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('m_kategori');
        }
        function index(){
                $x['data']=$this->m_kategori->get_kategori();
                $this->load->view('v_kategori',$x);
        }

        function get_subkategori(){
                $id=$this->input->post('id');
                $data=$this->m_kategori->get_subkategori($id);
                echo json_encode($data);
        }
}

Pada controller kategori, tedapat dua function, yaitu function index dan function get_subkategori.

Function index, berfungsi untuk membawa data kategori yang diambil dari tabel kategori. Kemudian, ditambilkan pada select yang tedapat pada view dengan nama v_kategori.php

Sedangkan function get_subkategori, adalah function yang berfungsi untuk mengambil data subkategori berdasarkan kategori yang dipilih dari option pada select pertama nantinya, yaitu select kategori.

Kemudian datanya ditampilkan dalam bentuk JSON object.

 

#6. Buat view dengan nama v_kategori.php

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Select berhubungan dengan codeigniter dan ajax</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
        <br/>
        <div class="col-md-6 col-md-offset-3">
                <div class="thumbnail">
                        <h4><center>Membuat Select berhubungan dengan codeigiter</center></h4><hr/>
                        <form class="form-horizontal">
                                <div class="form-group">
                        <label class="control-label col-md-3">Kategori</label>
                        <div class="col-md-8">
                            <select name="kategori" id="kategori" class="form-control">
                                <option value="0">-PILIH-</option>
                                <?php foreach($data->result() as $row):?>
                                        <option value="<?php echo $row->kategori_id;?>"><?php echo $row->kategori_nama;?></option>
                                <?php endforeach;?>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Sub Kategori</label>
                        <div class="col-md-8">
                            <select name="subkategori" class="subkategori form-control">
                                <option value="0">-PILIH-</option>
                            </select>
                        </div>
                        
                    </div>
                        </form>
                        <hr/>
                        <p style="text-align: center;">Powered by <a href="">mfikri.com</a></p>
                </div>
        </div>
<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-2.2.3.min.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script type="text/javascript">
        $(document).ready(function(){
                $('#kategori').change(function(){
                        var id=$(this).val();
                        $.ajax({
                                url : "<?php echo base_url();?>index.php/kategori/get_subkategori",
                                method : "POST",
                                data : {id: id},
                                async : false,
                        dataType : 'json',
                                success: function(data){
                                        var html = '';
                            var i;
                            for(i=0; i<data.length; i++){
                                html += '<option>'+data[i].subkategori_nama+'</option>';
                            }
                            $('.subkategori').html(html);
                                        
                                }
                        });
                });
        });
</script>
</body>
</html>

 

#7. Atur routing default controller pada routes.php.

Untuk mengatur default controller, buka application/config/routes.php

Kemudian rubah menjadi seperti berikut:

$route['default_controller'] = 'kategori';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

 

#8. Testing Project.

Untuk menguji apakah project berjalan dengan baik silahkan jalankan kembali project dengan mengunjungi url http://localhost/ci_select/

Kemudian pilih salah satu option pada kategori seperti gambar berikut:

Kemudian akan tampil pilihan untuk subkategori dari kategori yang pilih, seperti gambar berikut:

Selesai.

 

Kesimpulan:

Pembahasan kali ini adalah tentang membuat select berhubungan dengan ajax dan codeigniter.

Untuk membuat select berhubungan dalam satu halaman dan tanpa reload page, dibutuhkan komunikasi menggunkan ajax (Asynchronous Javascript and XML).

Select berhubungan sangatlah penting untuk membangun suatu aplikasi berbasis web, agar halaman web menjadi interaktif dan memberikan user experience (UX) yang berbeda bagi user.

Select berhubungan, sering digunakan oleh developer web untuk membuat pemilihan provinsi dan kabupaten/kota.

Download Source