Membuat Select Berhubungan

dengan Ajax dan Codeigniter

 21 SEPTEMBER 2017
 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:

1 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:

1 CREATE TABLE kategori(

2 kategori_id INT PRIMARY KEY AUTO_INCREMENT,

3 kategori_nama VARCHAR(50)

4 )ENGINE=INNODB;

 Buat Tabel subkategori dengan mengeksekusi query berikut:

1 CREATE TABLE subkategori(

2 subkategori_id INT PRIMARY KEY AUTO_INCREMENT,
3 subkategori_nama VARCHAR(50),

4 subkategori_kategori_id INT,

5 FOREIGN KEY (subkategori_kategori_id) REFERENCES kategori (kategori_id) ON UPDATE CASCA

)ENGINE=INNODB;
6

 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:

1 INSERT INTO kategori(kategori_nama) VALUES

2 ('Kosmetik'),('Minuman'),('Makanan');

 Insert data pada tabel subkategori dengan mengeksekusi query

berikut:

1 INSERT INTO subkategori(subkategori_nama,subkategori_kategori_id)VALUES

2 ('Face wash','1'),('Lips Stick','1'),('Skin Care','1'),('Body Wash','1'),

3 ('Minuman Soda','2'),('Minuman Dingin','2'),('Milkshake','2'),('Soft Drink','2'),

4 ('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:

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

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

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

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

 Terakhir buka application/config/database.php

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

3
$db['default'] = array(
4
'dsn' => '',
5
'hostname' => 'localhost',
6 'username' => 'root',
7 'password' => '',

8 'database' => 'db_select', //sesuaikan dengan database anda!

9 'dbdriver' => 'mysqli',

'dbprefix' => '',

10
'pconnect' => FALSE,
11
'db_debug' => (ENVIRONMENT !== 'production'),
12
'cache_on' => FALSE,
13
'cachedir' => '',
14 'char_set' => 'utf8',

15 'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

16
'encrypt' => FALSE,
17
'compress' => FALSE,
18
'stricton' => FALSE,
19
'failover' => array(),
20 'save_queries' => TRUE
21 );

22

23

24

 #4. Buat model dengan nama M_kategori.php

 Kemudian ketikan kode berikut:

1 <?php
2 class M_kategori extends CI_Model{

4 function get_kategori(){

5 $hasil=$this->db->query("SELECT * FROM kategori");

6 return $hasil;

}
7

8
function get_subkategori($id){
9
$hasil=$this->db->query("SELECT * FROM subkategori WHERE
10 subkategori_kategori_id='$id'");

11 return $hasil->result();

12 }

}
13
  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
1
class Kategori extends CI_Controller{
2
function __construct(){
3
parent::__construct();
4 $this->load->model('m_kategori');
5 }

6 function index(){

7 $x['data']=$this->m_kategori->get_kategori();

$this->load->view('v_kategori',$x);
8
}
9

10
function get_subkategori(){
11
$id=$this->input->post('id');
12
$data=$this->m_kategori->get_subkategori($id);
13 echo json_encode($data);

14 }

}
15

16

17

 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:

1 <!DOCTYPE html>
2 <html>

3 <head>

4 <title>Select berhubungan dengan codeigniter dan ajax</title>

5 <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/b

6 </head>

<body>
7
<br/>
8
<div class="col-md-6 col-md-offset-3">
9
<div class="thumbnail">
10
<h4><center>Membuat Select berhubungan dengan codeigiter</center></h4><
11 <form class="form-horizontal">
12 <div class="form-group">

13 <label class="control-label col-md-3">Kategori</label>

14 <div class="col-md-8">

15 <select name="kategori" id="kategori" class="form-control">

<option value="0">-PILIH-</option>
16
<?php foreach($data->result() as $row):?>
17
<option value="<?php echo $row->kategori_id;?>"><?p
18
<?php endforeach;?>
19
</select>
20 </div>
21 </div>

22 <div class="form-group">

23 <label class="control-label col-md-3">Sub Kategori</label>

24 <div class="col-md-8">

<select name="subkategori" class="subkategori form-control">

25
<option value="0">-PILIH-</option>
26
</select>
27
</div>
28

29
</div>
30 </form>
31 <hr/>

32 <p style="text-align: center;">Powered by <a href="">mfikri.com</a></p>

33 </div>

34 </div>

<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-2.2.3.mi

35
36 <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>

37 <script type="text/javascript">

$(document).ready(function(){
38
$('#kategori').change(function(){
39
var id=$(this).val();
40
$.ajax({
41
url : "<?php echo base_url();?>index.php/kategori/get_subkategori",
42 method : "POST",
43 data : {id: id},

44 async : false,

45 dataType : 'json',

46 success: function(data){

var html = '';

47
var i;
48
for(i=0; i<data.length; i++){
49
html += '<option>'+data[i].subkategori_nama+'</option>';
50
}
51 $('.subkategori').html(html);
52

53 }

54 });

55 });

56 });

</script>
57
</body>
58
</html>
59

60

61

62

63

64


  #7. Atur routing default controller pada routes.php.
 Untuk mengatur default controller, buka application/config/routes.php

 Kemudian rubah menjadi seperti berikut:

1 $route['default_controller'] = 'kategori';

2 $route['404_override'] = '';

3 $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.

EKO PRASETYO, 16 DECEMBER 2017 14:51 - REPLY
Mas Kalo misalnya select yang berhubungan lebih dari 2 tabel itu gmn yah?

M FIKRI, 07 JANUARY 2018 12:10 - REPLY

Thanks atas responnya mas,
Kalo itu pake AJAX dalam AJAX mas!
ini contoh ajaxnya:
$('#roomtype').change(function(){ //ajax untuk emnampilkan rate code dan room number
var type_id=$(this).val();
var company_id=$('#company').val();
$.ajax({
url : "&lt;?php echo base_url();?&gt;frontoffice/fit_reservation/get_rate_kode",
method : "POST",
data : {type_id: type_id, company_id:company_id},
async : false,
dataType : 'json',
success: function(data){

var html = '';

var i;
for(i=0; i<data xss=removed>'+data[i].plan_kode+'</option>';
}
$('.ratecode').html(html);
$('.ratecode').val('').trigger('change');//reset value

//ajax untuk menampilkan room number

$.ajax({
url : "&lt;?php echo base_url();?&gt;frontoffice/fit_reservation/get_room_number_by_type",
method : "POST",
data :{type_id :type_id},
async : false,
dataType : 'json',
success : function(data){
var html = '';
var j;
for(j=0; j<data xss=removed>'+data[j].room_nomor+'</option>';
}
$('.roomnumber').html(html);
$('.roomnumber').val('').trigger('change');//reset value
}
});
//end ajax

}
});
return false;
}); //end ajax