qu4cksoft weblogs

Dynamic Dropdown PHP AJAX

23-05-2009 - Oleh : admin

Aduuhh gara - gara Fokus ngerjain TA (Tugas Akhir) jadi nggak pernah posting hampir 2 bulan ini, kali ini kita sedikit belajar dinamic dropdown mungkin. Dalam kasus ini kita akan sedikit hapalan tentang Suatu propinsi dengan kota - kota yang ada di propinsi tersebut, Misalnya Jawa Timur adalah sebuah propinsi yang di dalamnya terdapat kota Surabaya, malang, Lamongan dll

Sebelumnya kita buat SQLnya dulu

CREATE TABLE `tb_kota` (
`id` int(11) NOT NULL auto_increment,
`id_prop` int(11) NOT NULL,
`nama_kota` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;

--
-- Dumping data for table `tb_kota`
--

INSERT INTO `tb_kota` VALUES (1, 1, 'Jakarta');
INSERT INTO `tb_kota` VALUES (2, 2, 'Bandung');
INSERT INTO `tb_kota` VALUES (3, 2, 'Bekasi');
INSERT INTO `tb_kota` VALUES (4, 3, 'Surabaya');
INSERT INTO `tb_kota` VALUES (5, 3, 'Malang');
INSERT INTO `tb_kota` VALUES (6, 3, 'Kediri');
INSERT INTO `tb_kota` VALUES (7, 3, 'Lamongan');
INSERT INTO `tb_kota` VALUES (8, 4, 'Semarang');
INSERT INTO `tb_kota` VALUES (9, 4, 'Pekalongan');

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

--
-- Table structure for table `tb_propinsi`
--

CREATE TABLE `tb_propinsi` (
`id` int(11) NOT NULL auto_increment,
`nama_propinsi` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `tb_propinsi`
--

INSERT INTO `tb_propinsi` VALUES (1, 'Jakarta');
INSERT INTO `tb_propinsi` VALUES (2, 'Jawa Barat');
INSERT INTO `tb_propinsi` VALUES (3, 'Jawa Timur');
INSERT INTO `tb_propinsi` VALUES (4, 'Jawa Tengah');

---- end sql ----

Sekarang buat file dengan nama kota.php

<script language=Javascript>
function Inint_AJAX() { fungsi untuk cek support Ajax tidak
   try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
};

function dochange(src, val) { // fungsi untuk mengambil isi ID html
     var req = Inint_AJAX();
     req.onreadystatechange = function () {
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText;
               }
          }
     };
     req.open("GET", "proses.php?data="+src+"&val="+val); // koneksi ke proses.php
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
     req.send(null); //Kirim datanya
}

window.onLoad=dochange('propinsi', -1);         // Panggil isi dari Propinsi
</script>

---- kota.php ----

Setelah selesai kita buat File proses.php

<?
     //SET di IE untuk membaca halaman bukan cache
     header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
     header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
     header ("Cache-Control: no-cache, must-revalidate");
     header ("Pragma: no-cache");

     header("content-type: application/x-javascript; charset=tis-620");

     $data=$_GET['data'];
     $val=$_GET['val'];

     //Setting database
$host = "localhost";
$user = "root";
$pass = "root";
$dbname    = "kota";
$pre = "tb_"; // tentukan Prefix, Standartnya qu4ck neehh xixixixixiii...

mysql_connect($host,$user,$pass) or die ("Maaf tidak dapat connect ke Mysql"); // koneksi ke Mysqlnya

     if ($data=='propinsi') { // nahhh pemanggilan untuk id propinsi (dropdown pertama)
          echo "<select name='propinsi' onChange=\"dochange('kota', this.value)\">\n"; // ketika teselek jalankan dropdown ke 2 (kota).
          echo "<option value='0'>==== Propinsi ====</option>\n";
          $query=mysql_db_query($dbname,"select `id`, `nama_propinsi` from ".$pre."propinsi order by `nama_propinsi` ASC"); // query ke tabel propinsi
          while(list($id, $name)=mysql_fetch_array($query)){ // cari selama kondisi itu benar
               echo "<option value=\"$id\" >$name</option> \n" ; // tampilkan data propinsi
          }
     } else if ($data=='kota') { // Pemanggilan id kota
          echo "<select name='kota' >\n";
          echo "<option value='0'>==== kota ====</option>\n";
          $query=mysql_db_query($dbname,"SELECT `id`, `nama_kota` FROM ".$pre."kota WHERE `id_prop` = '$val' ORDER BY `nama_kota` "); // query ke tabel kota sesuaikan dengan propinsi masing2 kota.
          while(list($id, $name)=mysql_fetch_array($query)){   // tampilkan selama konsisinya benar
               echo "<option value=\"$id\" >$name</option> \n" ; // Tampilkan data kota sesuai dengan Propinsinya.
          }
     }
     echo "</select>\n";
?>

Simplekan mudah sekali kok, sedikit ada Ajax yg saya ambil dari Ajax code, buat yang masih bingung bisa comment di bawah. yang g mau ribet copas saya sediakan filenya download disini untuk demonya bisa liat disini.

Komentar Pengunjung

edit combobox AJAX
14:15, 30-07-2009 - Oleh : mustikaning karana
kalo mau edit data gimana, misal saya pilih propinsi jawa tengah kota semarang, begitu saya buka profile saya posisi combo propinsi Jawa Tengah, kota Semarang. balas lewat email saya ya mas

Formulir Pengisian Komentar