Membuat Select Berhubungan dengan Ajax dan Codeigniter

Membuat Select Berhubungan dengan Ajax dan Codeigniter

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

Share:



Komentar (10)

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

Rizal Andy, 19 February 2018 06:57 - Reply

Terimakasih mas. Sangat membantu sekali tutorialnya. Semoga diberi keberkahan

M Fikri, 20 February 2018 08:04 - Reply

Amiiin..
Terima kasih mas atas responnya.!

hendra, 25 February 2018 08:29 - Reply

Mas saya menggunakan perintah sql " SELECT ruang.nama_ruang FROM `jadwal_ruang` INNER JOIN ruang on jadwal_ruang.kode_ruang=ruang.Kode_ruang WHERE periode_awal BETWEEN '2018-02-25' AND '2018-02-27' " bagaimana ya caranya dengan ajax untuk melemparkan datanya ke option? Thanks...Smoga bisa dapat pencerahaannya dari mas Fikri.

M Fikri, 22 April 2018 08:16 - Reply

Gunakan aja query itu di model, kemudian langsung di result().
setelah itu di lempar ke controller, lalu encode menjadi JSON object,
Maka akan bisa digunakan di ajax.

rian febri, 27 February 2018 03:06 - Reply

kalau yg di atas kan make 2 tabel. kategori sama sub. kalo 1 tabel gimana? jadi kategori dan sub kategori 1 tabel.

M Fikri, 27 February 2018 04:47 - Reply

Kalo satu table, cukup pake autocomplete gan:
http://mfikri.com/artikel/autocomplete-codeigniter

rian febri, 27 February 2018 09:20 - Reply

tapi saya burug buat dropdown kaya di atas.jadi misalnya tabel subcategori ada field id,subkategori_nama, subkategori_kategori_id dan merk misalnya. jadi pilih merk dulu,baru keluar subkategori_nama.

Linux Nitation, 24 March 2018 22:38 - Reply

Makasih tutorial nya bro, semoga m.fikri dan sekeluarga diberkahi didunia dan akhirat.Aamiin. Btw bro, knp ga skalian bikinin channel dan video youtube nya? Kl tutorial bagus dan jelas gini pasti banyak yang view.. (Saran aja sih)

Leave a Comment