web 2.0

Monday, January 16, 2012

Menu List SELECT dengan PHP dan JSON

Pada Posting kali ini kita akan membuat Menu List SELECT pada PHP untuk memilih kategori Wilayah dan terdapat sub kategori Negara dengan menggunakan JSON .

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/

2 comments:

Mukti said...

Akhirnya bisa juga, setelah berjam-jam nyoba, makasih atas tutornya gan.....
ditunggu yang lain.......

Anonymous said...

mantaf bos.thanks

Post a Comment

Maria Ozawa disebut Miyabi bermain sex dengan free software dan tools hacking, hacker dan software cracker untuk para pecinta playboy dan Roy Suryo bersama Ruby Alamsyah demo bank century, gila bola dan juga free games desktop ada di Linux Ubuntu dan Mikrotik yang semuanya di ABG Bugil artis Bugil dan Indonesia Sex yang tidak mendidik pada Departemen Pendidikan beri free domain gratis dan hosting free hosting gratis soal toefl dan lowongan CPNS 2010 dari lowongan kerja 2010 dan rumah sakit paling bagus free lagu MP3 gratis divx film dvd movie 2010 download.