Mengirim Data Objek Otomatis menggunakan PHP dan AJAX



kangpepe.com | Pada pembahasan kali ini saya kembali membahas JavaScrip dalam mendapatkan data suatu Kota dengan memnggil Kota tersebut menggunakan AJAX. dalam sebuah form input, seringkali kita menemukan contoh pilihan yang terisi secara otomatis sehingga memudahkan user dalam melakukan pengisian data, dalam pembahasan kali ini kami mengambil Provinsi dan Kota Kabupaten yang akan kita jadikan object.

Dalam sebuah provinsi terdapat beberapa kota kabupaten , sehingga ketika user memilih provinsi tertentu, maka kota terisi secara otomatis kota kabupaten yang terdapat pada sebuah provinsi, agar user dapat mengisi data dengan benar dan tepat sasaran yang admin inginkan. Baik sekarang kita langsung menerapkan bagaimana menggunakan tekni ini ada 3 file yang harus kita gunakan untuk teknik ini yaitu sebagai berikut :
  1. script index.php yang merupakan form inputan yang akan digunakan oleh user untuk memilih provinsi dan kota
  2. script ajax.js yang merupakan script ajax untuk mengirimkan data provinsi yang telah dipilih oleh user dan mengambil jawaban yang diberikan oleh script pemroses
  3. script kota.php yang merupakan script pemroses data yang telah dipilih oleh user



Langkah 1 – Membuat file index.php


 <html>
    <head>
        <title>Belajar AJAX</title>
        <script type="text/javascript" src="ajax.js"></script>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    </head>
    <body>     
        <div class="col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
            <div class="page-header">
              <h1><img width='100%' src="bootstrap/kangpepe.com.png"></h1>
            </div>
            <form id="form-data" name="pepe">
                <div class="col-md-6">
                <div id="name-group" class="form-group">
                <label>PROVINSI</label> 
                    <select name="prov" onchange="pilih_kota('dom_kota',this.value);" class="form-control">
                    <option value="#">Provinsi</option>
                    <option value="sumbar">Sumatera Barat</option>
                    <option value="sumut">Sumatera Utara</option>
                    <option value="riau">Pekan Baru</option>
                    <option value="off">Loadig....!</option>
                    </select>
                </div>
                </div>
                <div class="col-md-6">
                <div id="name-group" class="form-group">
                <label>KOTA KABUPATEN</label> 
                    <select name="kota" id="dom_kota" class="form-control">
                    <option value="#">PILIH - KOTA KABUPATEN</option>
                    </select>
                </div>
                </div>
            </form>
        </div>  
    </body>
</html>



Langkah 2 – Membuat JavaScript Ajax.js


 function pilih_kota(dom,kota) {
    document.getElementById(dom).innerHTML="Loading ...";
    var xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }
    var date=new Date();
    var timestamp=date.getTime();
    //alamat url script pemroses, sesuaikan dengan alamat url yang ada pada komputer anda
    var url="http://localhost/kangpepe.com/kota.php";
    //menyusun variabel yang akan dikirimkan dengan AJAX
    var param="kota="+kota;
    
    //tidak perlu dirubah
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            var res=xmlhttp.responseText;
            document.getElementById(dom).innerHTML=res;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", param.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(param);
    //tidak perlu dirubah
}


function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}



Langkah 3 – Membuat File Kota.php


 <?php
$kota = array (
            'sumbar' => array (
                            '1' => 'Bukittinggi',
                            '2' => 'Solok',
                            '3' => 'Kota Padang',
                            '4' => 'Padang Panjang',
                            '5' => 'Pesisir Selatan',
                            '6' => 'Padang Panjang'
                        ),
            'sumut' => array (
                            '1' => 'Padang Sidempuan',
                            '2' => 'Tapanuli Selatan',
                            '3' => 'Kota Meda',
                            '4' => 'Mandailing Utara'
                        ),
            'riau' => array (
                            '1' => 'Panam',
                            '2' => 'Kota Riau',
                            '3' => 'Rengat',
                            '4' => 'Komando Lima'
                        ),
            'off'   => array (
                            '1' => 'PILIH - KOTA KABUPATEN'
                        )
        );

$opsi = $_POST['kota'];
if($opsi =='sumbar'){
    $arr = $kota['sumbar'];
}
else if($opsi == 'sumut'){
    $arr = $kota['sumut'];
}
else if($opsi=='riau'){
    $arr = $kota['riau'];
}
else{
    $arr = $kota['off'];
}
foreach($arr as $key => $val){
    echo '<option value="'.$key.'">'.$val.'</option>';
}
?>



NOTE : Sesuaikan URL ajax untuk memanggil kota sesuai denga directori pada webroot anda seperti saya melakukan ekperiment ini masih dalam localhost dengan URL http://localhost:8080/kangpepe.com/index.php 


Recommend Article × +

OWNER AND CO OF PT. TRANS TECHNO Freelance Web Design and Yii2 Development in ICT STKIP PGRI WEST SUMATRA. While Studying MAGISTER UPI-YPTK Padang,CEO CMS Codepedia, Lives in Padang - Indonesia | WhatsApp : 0853-7516-4491

Related Posts

Update Sesudahnya
« Prev Post
Update Sebelumnya
Next Post »