Cara Membuat Combobox Bertingkat Dinamis Dari Database

biasanya dalam sebuah website ketika kita memasukkan data kota atau provinsi biasanya inputannya berupa pilihan di combobox dan parahnya ketika kita klik kota A maka website loading dulu baru menampilkan data di combobox kedua.

cara ini saya anggap kurang praktis… Kenapa?

karena jika kita menunggu loading yang lama maka ada kemukinan data yang lain yang telah kita input akan hilang, beda dengan combobox dinamis ketika kita pilih maka halaman tidak memerlukan loading untuk menampilkan data dibawahnya.

nah dalam tutorial kali ini kita akan bahas permasalahan diatas.

setudi kasusnya seperti ini, anggap saja saya lagi mendaptar disebuah universitas dan saya mendaftar secara online, di website tersebut terdapat sebuah form pendaftaran untuk menginput data diri kita, biasa di pilihan provinsi, kabupaten, kota biasanya dibuat combobox yang bertingkat.

contohnya kita pilih di combobox pertama provinsi Aceh otomatis akan menampilkan nama-nama kabupaten yang ada di Aceh di combobox kedua.

ketika kita pilih provinsi Aceh halaman tidak melakukan loading untuk menampilkan data kabupaten yang ada di Aceh. ini biasa dinama onclick. ketika kita klik provinsi langsung tampil nama kabupaten di combobox kedua.

inilah yang dinamakan combobox bertingkat dimana data combobox kedua tergantung pada pilihan di combobox pertama.

oke berikut tutorial Cara Membuat Combobox Bertingkat Dinamis Dari Database Dengan Php Dan Mysql

pertama kita buat sebuah database dengan nama combobox dan buat dua buah table.

database combobox dinamis dengan php dan mysql
database combobox dinamis dengan php dan mysql

untuk memudahkan silakan dump database dibawah ini di phpmyadmin anda

-- phpMyAdmin SQL Dump
-- version 3.3.9
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Aug 26, 2016 at 03:33 AM
-- Server version: 5.5.8
-- PHP Version: 5.3.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!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 utf8 */;

--
-- Database: `combobox`
--

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

--
-- Table structure for table `kabupaten`
--

CREATE TABLE IF NOT EXISTS `kabupaten` (
  `kode` varchar(10) NOT NULL,
  `nama` varchar(20) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `kabupaten`
--

INSERT INTO `kabupaten` (`kode`, `nama`) VALUES
('agara', 'Aceh Tenggara'),
('galus', 'Gayo Lues'),
('ateng', 'Aceh Tengah');

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

--
-- Table structure for table `kecamatan`
--

CREATE TABLE IF NOT EXISTS `kecamatan` (
  `kode` varchar(10) NOT NULL,
  `nama` varchar(20) NOT NULL,
  `prop` varchar(10) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `kecamatan`
--

INSERT INTO `kecamatan` (`kode`, `nama`, `prop`) VALUES
('ltw', 'Lut Tawar', 'ateng'),
('btg', 'Bintang', 'ateng'),
('kyk', 'Kebayakan', 'ateng'),
('rg', 'Rikit Gaib', 'galus'),
('ptc', 'Pantan Cuaca', 'galus'),
('bkj', 'Belang Kejeren', 'galus'),
('bmbl', 'Bambel', 'agara'),
('lwa', 'Lawe Alas', 'agara'),
('lsg', 'Lawe Sigalagala', 'agara');

kemudian buat sebuah folder baru di dalam htdocs localhost anda dengan nama pilihancombo

langkah selanjutnya buat sebuah file php dengan nama “pilihancombo.php” copy script dibawah ini

pilihancombo.php

<html>
<head>
  <title>Tes Combobox</title>
</head>

<body>

<script type='text/javascript'>
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var xmlhttp = createRequestObject();

function rubah(combobox)
{
    var kode = combobox.value;
    if (!kode) return;
    xmlhttp.open('get', 'ambildata.php?kode='+kode, true);
    xmlhttp.onreadystatechange = function() {
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
        {
             document.getElementById("divkedua").innerHTML = xmlhttp.responseText;
        }
        return false;
    }
    xmlhttp.send(null);
}

function ceksubmit()
{
   var div = document.getElementById("divkedua");
   if (!div.firstChild)
   {
   	alert('Belum milih');
   	return false;
   }
   document.forms[0].pilihan.value = div.firstChild.value;
   return true;
}

</script>

<?php

$namaserver = "localhost";
$username = "root";
$password = "";
$database = "combobox";

mysql_connect($namaserver, $username, $password) or die("Tidak dapat konek");
mysql_select_db($database) or die("Tidak dapat membuka database");

      $query = "SELECT kode, nama FROM kabupaten ORDER BY nama";
      $rs = mysql_query($query) or die(mysql_error());
      $cbstr = "";
      while ($r = mysql_fetch_array($rs))
      {
      	$cbstr .= "<option value='$r[kode]'>$r[nama]</option>";
      }
?>

<table border='0' cellspacing='0' cellpadding='1' bgcolor='#0066FF' width='100%'><tr><td>
<table border='0' width='100%' bgcolor='#0099FF'>
<form method='post' action='simpandata.php' onsubmit='return ceksubmit()'>
<tr><td colspan='3'>&nbsp;</td></tr>
<tr><td align='right'>Kabupaten</td><td>:</td><td>
<select name='pilihan1' onchange='javascript:rubah(this)'>
<option>--Pilih Satu--</option>
<?php echo $cbstr; ?>
</select></td></tr>
<tr><td align='right'>Kecamatan</td><td class='tebal'>:</td><td><div id='divkedua'></div></td></tr>
<input type='hidden' name='pilihan' value=''>
<tr><td  colspan='3' align='center'><input type='submit' name='simpan' value='Simpan'></td></tr>
<tr><td>&nbsp;</td></tr></form></table>
</td></tr></table>
</body></html>

buat sebuah file ambildata.php dan copy script dibawah ini

<?php
$namaserver = "localhost";
$username = "root";
$password = "";
$database = "combobox";

mysql_connect( "localhost", "root", "") or die
	          (" tdk tersambung ke server".mysql_error() );
mysql_select_db("combobox") or die("Tidak dapat membuka database");

$kode = $_GET['kode'];

echo "<select name='kedua'>";

$rs = mysql_query ("SELECT kode,nama FROM kecamatan WHERE (prop='$kode')");
while ($r = mysql_fetch_array($rs))
    echo "<option value='$r[kode]'>$r[nama]</option>";
echo "</select>";

?>

dan langkah selanjutnya, ini yang terakhir buat file dengan nama ‘simpandata.php’

<?php

echo "<h3>Data yang dimasukkan:</h3>";

foreach($_POST as $key => $data)
{
	echo "<p>$key = $data</p>";
}

?>

setelah selesai semua proses diatas coba jalankan dilocalhost anda jika berhasil maka akan tampil seperti gambar dibawah ini

combobox dinamis dengan php dan mysql
combobox dinamis dengan php dan mysql
cara membuat combobox bertingkat dengan php
ketika saya pilih kabupaten aceh tengah dalam combobox 1
combobox bertingkat php
ketika di klik simpan

sampai disini tutorial Cara Membuat Combobox Bertingkat Dinamis Dari Database selesai.

jika ada yang kurang jelas atau ada yang error silakan di tanyakan di kolom komentar, saya akan senang dengan hati menjawab pertanyaan anda jika saya online.

sekian dari saya, salam programmer

Keyword:

  • cara combo box dinamis php web
  • cara membuat combobox cari bertingkat pada php
  • cara membuat combobox dinamis di php
  • cara membuat combobox kabupaten
  • membuat select option dinamis

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas