Sebelum memulai source, buatlah terlebih dahulu database (MySQL 5), yang terdiri dari 2 tabel (Wilayah dan Negara).
Pada tabel Wilayah [view table] id_wilayah merupakan PK. Pada tabel Negara [view table] id_negara merupakan PK.
Ada 5 file penting dalam membuat list menu dengan PHP dan JSON:
1. index.php (file utama/main program)
2. json.php (file untuk mengambil data dari database dan mengubah dalam bentuk JSON)
3. jquery.js (file terdapat library JQuery/JavaScript)
4. koneksi.php (file untuk melakukan koneksi database)
5. json.sql (file dump SQL)
Kelima file diatas bisa di download : disini .(password ZIP: janxiz)
Source index.php:
<html>
<head>
<title>List JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#wilayah").change(function(){
// Post string
var post_string = "id_wilayah=" + $(this).val();
// Mengirimkan permintaan dari pilihan id=wilayah
$.ajax({
type: "POST",
data: post_string,
dataType: "json",
cache: false,
url: 'json.php',
timeout: 2000,
error: function() {
alert("Failed to submit");
},
success: function(data) {
// Bersihkan isi option id=negara
$("select#negara option").remove();
// Mengisikan data option id=negara
$.each(data, function(i, j){
var row = "<option value=\"" + j.id_negara + "\">" + j.nama_negara + "</option>";
$(row).appendTo("select#negara");
});
}
});
});
});
</script>
</head>
<body>
<select name="wilayah" id="wilayah">
<?php
include "koneksi.php";
$result = mysql_query("SELECT * FROM wilayah", $link_id);
echo "<option value=''>-- Pilih Wilayah --</option> \n";
while($baris=mysql_fetch_array($result))
{
echo "<option value='$baris[id_wilayah]'>$baris[nama_wilayah]</option> \n";
}
?>
</select>
<select name="negara" id="negara">
<option value="">-- Nama Negara --</option>
</select>
</body>
</html>
Source json.php:
<?php
include "koneksi.php";
$json = array();
$id=$_POST['id_wilayah'];
$result = mysql_query("SELECT * FROM negara WHERE id_wilayah='$id'", $link_id);
if($id==''){
$json[] = array(
'id_negara' => '',
'nama_negara' => '-- Nama Negara --'
); }
while($baris=mysql_fetch_array($result))
{
$json[] = array(
'id_negara' => $baris['id_negara'],
'nama_negara' => $baris['nama_negara']
);
}
echo json_encode($json);
?>
Hasil program diatas, jika memilih salah satu Wilayah, maka pada menu SELECT Negara akan muncul negara-negara sesuai dengan Wilayah yang dipilih. Data Negara langsung diambil dari database melalui JSON dengan metode POST (lihat baris 13 pada file index.php).
Reference:
http://www.xul.fr/ajax-javascript-json.html
http://www.electrictoolbox.com/json-data-jquery-php-mysql/
http://api.jquery.com/jQuery.getJSON/
3 komentar:
Akhirnya bisa juga, setelah berjam-jam nyoba, makasih atas tutornya gan.....
ditunggu yang lain.......
mantaf bos.thanks
Thank bos info nya keren banget LOVE YOU :*
Posting Komentar