Tutorial Codeigniter – Cara Sederhana Membuat Tombol Dropdown Dengan Ajax dan MySQL

Halo sobat…

Dalam tutorial kali ini kita akan belajar cara menampilkan data yang ada di database berdasarkan pilihan yang ada di dalam tombol dropdown atau bahasa kerennya “Chained Dropdown”, dan dalam kesempatan kali ini kita akan mengaplikasikannya di dalam framework Codeigniter serta akan menggunakan bantuan Ajax dan Jquery.

 

Oke.. langsung saja.

Pastikan sobat sudah mendownload Framework Codeigniter dan sudah meng-ekstraknya di dalam local server milik sobat. Jika belum silahkan download di situs resminya disini

Jika menggunakan Ubuntu dan saudara-saudaranya tempatkan di /var/www/html/{folder_project} dan jika menggunakan windows dan menginstall XAMPP silahkan tempatkan di  C:\xampp\htdocs\{folder_project}.

 

Membuat Database dan Tabel

Sebelum lanjut kita persiapkan dulu struktur data nya silahkan sobat gunakan tool untuk mengoperasikan database MySQL, di tutorial ini kami cukup menggunakan phpMyAdmin, buat database baru terserah apa saja namanya kemudian pastekan script SQL di bawah ini :

-- phpMyAdmin SQL Dump
-- version 4.5.4.1deb2ubuntu2
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Feb 15, 2018 at 02:04 AM
-- Server version: 5.7.21-0ubuntu0.16.04.1
-- PHP Version: 7.0.22-0ubuntu0.16.04.1

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `barang`
--

CREATE TABLE `barang` (
  `id_barang` int(11) NOT NULL,
  `id_pelanggan` int(11) DEFAULT NULL,
  `nama_barang` varchar(45) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `barang`
--

INSERT INTO `barang` (`id_barang`, `id_pelanggan`, `nama_barang`) VALUES
(1, 1, 'Susu Kental Manis'),
(2, 1, 'Snack'),
(3, 1, 'Kacang Polong'),
(4, 2, 'Nescafe'),
(5, 2, 'Roti'),
(6, 2, 'Beras'),
(7, 2, 'Air Mineral'),
(8, 2, 'Tisu'),
(9, 3, 'Gandum'),
(10, 3, 'Gorengan'),
(11, 3, 'Telur Ayam'),
(12, 4, 'Telur Bebek'),
(13, 4, 'Mayonaise'),
(14, 4, 'Susu Bubuk'),
(15, 5, 'Garam'),
(16, 5, 'Gula'),
(17, 5, 'Madu');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `barang`
--
ALTER TABLE `barang`
  ADD PRIMARY KEY (`id_barang`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `barang`
--
ALTER TABLE `barang`
  MODIFY `id_barang` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=18;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

 

Setelah database dibuat kemudian kita masuk ke dalam pengaturan standar pada framework codeigniter.

Masuk ke folder application > config > buka file config.php kemudian cari baris $config[‘base_url’] jika sudah ditemukan isikan parameternya dengan url local server kemudian diikuti dengan lokasi direktori dimana aplikasi berada misal : http://localhost/{folder_project} dan nantinya baris tersebut menjadi seperti ini $config[‘base_url’] = ‘http://localhost/dropdown_chained/’;

Masih tetap di dalam folder config tadi, buka file autoload.php dan karena kita akan melakukan operasi database kita harus mengaktifkan library database yang ada di Framework Codeigniter ini. Cari baris $autoload[‘libraries’] = array(); kemudian tambahkan parameter ‘database’ di dalam array sehingga menjadi seperti ini $autoload[‘libraries’] = array(‘database’);.  Dan cari baris $autoload[‘helper’] = array(); kemudian tambahkan parameter ‘url’ di dalam array sehingga menjadi $autoload[‘helper’] = array(‘url’);

 

Menghubungkan Database MySQL dengan Framework Codeigniter

Pada tahap ini kita akan menghubungkan database dengan framework codeigniter, ini masih tetap berada di dalam folder application > config buka file database.php kemudian isi parameter username, password, serta nama database berdasarkan konfigurasi database milik sobat.

Contoh sederhananya seperti ini :

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => 'root',
	'database' => 'testing',
	'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
);

Cukup sampai disitu untuk konfgurasi dengan database.

 

Oke, pada kali ini alurnya adalah ada dua tombol dropdown, yang pertama tombol drodpown nama pelanggan, yang kedua adalah tombol dropdown nama barang, jadi ketika tombol dropdown pelanggan dipilih maka tombol dropdown nama barang akan menampilkan data barang berdasarkan nama pelanggan.

 

Buat 3 buah file :

Dropdown.php disimpan di dalam folder Controller

Model_dropdown.php disimpan di dalam folder Model

tampil_dropdown.php disimpan di dalam folder Views

 

Setelah ketiga file tersebut dibuat, buka file Dropdown.php yang berada di dalam folder Controller kemudian pastekan script dibawah ini :

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

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


	public function index()
	{
		$data['dropdown'] = $this->Model_dropdown->tampil_data();
		$this->load->view('dropdown', $data);
	}
}

 

Potongan script ini gunanya untuk memuat/memanggil file Model_dropdown secara otomatis setiap kali saat file Dropdown.php ini dijalankan.

public function __construct()
{
    parent::__construct();
    $this->load->model('Model_dropdown');
}

 

Untuk potongan script yang ini gunanya untuk mengambil data hasil query di dalam Model_dropdown.php kemudian mengirimkannya ke dalam View untuk ditampilkan hasil querynya.

public function index()
{
	$data['dropdown'] = $this->Model_dropdown->tampil_data();
	$this->load->view('tampil_dropdown', $data);
}

 

Buka file Model_dropdown.php yang berada di dalam folder Model kemudian pastekan script dibawah ini :

Script dibawah ini berguna untuk melakukan query pengambilan data dari database, dan pada function tampil_data melakukan query untuk mengambil data yang berada di dalam Tabel Pelanggan.

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

class Model_dropdown extends CI_Model
{
	public function tampil_data()
	{
		$query = $this->db->get('pelanggan');
		return $query;
	}
}

 

Kemudian buka file tampil_dropdown.php di dalam folder View kemudian pastekan script dibawah ini :

Script ini untuk menampilkan hasil query tadi kedalama tag Option Select.

<!DOCTYPE html>
<html>
<head>
	<title>Dropdown Chained</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<select name="nama_pelanggan" id="nama_pelanggan">
	<option> - Pilih Pelanggan -</option>
	<?php
		foreach ($dropdown->result() as $baris) {

			echo "<option value='".$baris->id_pelanggan."'>".$baris->nama_pelanggan."</option>";
		}
	?>
</select>



<select name="barang" id="barang">
	<option> - Pilih Barang -</option>
</select>


</body>
</html>

Silahkan sobat jalankan, jika tidak ada error tampilannya akan seperti ini, untuk dropdown pertama datanya sudah muncul yaitu data nama-nama pelanggan dan tombol dropdown yg kedua masih kosong.

Langkah selanjutnya kita akan menampilkan data nama barang ke dalam tombol dropdown barang berdasarkan pilihan pada dropdown nama pelanggan.

Buka kembali file Model_dropdown.php kemudian tambahkan potongan script dibawah ini. Script dibawah ini untuk melakukan query pengambilan data di dalam tabel barang berdasarkan id_pelanggan.

public function tampil_data_chained($id)
{
	$query = $this->db->query("SELECT * FROM barang where id_pelanggan = '$id'");
	return $query;
}

Full script dari file Model_dropdown.php akan seperti ini.

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

class Model_dropdown extends CI_Model
{
	public function tampil_data()
	{
		$query = $this->db->get('pelanggan');
		return $query;
	}

	public function tampil_data_chained($id)
	{
		$query = $this->db->query("SELECT * FROM barang where id_pelanggan = '$id'");
		return $query;
	}

}

 

Selanjutnya buka file Dropdown.php yang berada di folder Controller dan tambahkan baris kode dibawah ini :

public function tampil_chained()
{
	$id = $_POST['id'];
	$dropdown_chained = $this->Model_dropdown->tampil_data_chained($id);
	foreach ($dropdown_chained->result() as $baris) {
		echo "<option value='".$baris->id_barang."'>".$baris->nama_barang."</option>";
	}
}

Potongan kode diatas adalaha menangkap parameter id yang dikirim dari halaman tampil_dropdown.php melalui Ajax kemudian disimpan kedalam variable $id selanjutnya menjalankan perintah query ke dalam Model_dropdown dengan menyertakan variable $id, hasilnya kemudian ditampilkan menggunakan fungsi foreach.

Full kode dari Dropdown.php seperti dibawah ini.

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

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


	public function index()
	{
		$data['dropdown'] = $this->Model_dropdown->tampil_data();
		$this->load->view('tampil_dropdown', $data);
	}


	public function tampil_chained()
	{
		$id = $_POST['id'];
		$dropdown_chained = $this->Model_dropdown->tampil_data_chained($id);
		foreach ($dropdown_chained->result() as $baris) {
			echo "<option value='".$baris->id_barang."'>".$baris->nama_barang."</option>";
		}
	}


}

 

Langkah selanjutnya sobat buka file tampil_dropdown.php yang berada di dalam folder View kemudian pastekan potongan script dibawah ini.

Disini kita menggunakan Ajax untuk mengirim data id_pelanggan ke file Dropdown.php function tampil_chained.

 

<script type="text/javascript">
	$(document).ready(function(){
		$('#pelanggan').on('change', function(){
			var id_pelanggan = $('#pelanggan').val();
			$.ajax({
			    type: 'POST',
			    url: '<?php echo base_url('index.php/dropdown/tampil_chained') ?>',
			    data: { 'id' : id_pelanggan },
				success: function(data){
				    $("#barangs").html(data);
				}
			})
		})
	})
</script>

url : diisi dengan url file tujuan

type :  diisi dengan method apa yang ingin digunakan. Bisa menggunakan GET ataupun POST

data : data yang akan dikirim ke file yang dituju, disini kita mengirim id pelanggan

success : function(){} : ketika proses pengiriman selesai, lakukan aksi selanjutnya tampilkan data kedalam atribut id barangs

 

Kode full dari tampil_dropdown.php seperti ini :

<!DOCTYPE html>
<html>
<head>
	<title>Dropdown Chained</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<select name="nama_pelanggan" id="pelanggan">
	<option> - Pilih Pelanggan -</option>
	<?php
		foreach ($dropdown->result() as $baris) {

			echo "<option value='".$baris->id_pelanggan."'>".$baris->nama_pelanggan."</option>";
		}
	?>
</select>


<select name="barang" id="barangs"></select>

<script type="text/javascript">
	$(document).ready(function(){
		$('#pelanggan').on('change', function(){
			var id_pelanggan = $('#pelanggan').val();
			$.ajax({
			    type: 'POST',
			    url: '<?php echo base_url('index.php/dropdown/tampil_chained') ?>',
			    data: { 'id' : id_pelanggan },
				success: function(data){
				    $("#barangs").html(data);
				}
			})
		})
	})
</script>


</body>
</html>

Jika tidak ada error hasilnya akan seperti dibawah ini.

Download full source code nya disini.

Demikian untuk tutorial singkat kali ini, terima kasih sudah membacanya. Selamat mencoba 🙂

jika sobat memilik kritik, saran, pertanyaan, maupun masukkan silahkan menuliskannya di dalam kolom komentar dibawah atau menghubungi kami via halaman kontak.

One Comment

Add a Comment

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