Catatan Hadi : Membuat Form Menggunakan AJAX dengan JSON

Pembuatan form pada suatu website umumnya menggunakan html sebagai halaman tampilannya, dan php sebagai pengolahnya. Pada kali ini kita akan membuat suatu form masih menggunakan html, hanya saja dengan tambahan ajax dengan JSON sebagai pengolah datanya. Ajax merupakan kepanjangan dari (Asynchronohouse Javascript and XML) , sedangkan JSON merupakan kepanjangan dari (Javascript Object Notation).

Ajax dengan menggunakan format JSON, akan membuat proses data lebih cepat dan mudah baik disisi server maupun disisi klien. JSON sering digunakan sebagai alternatif penggunaan XML, karena sifatnya lebih simple, cepat, dan sangat mudah diparsing.

Untuk membuat form tersebut, buatlah tampilan form seperti biasa menggunakan html, buat dengan data: nama, alamat, jenis kelamin, status, telepon, URL.

buatlah programnya seperti ini:

<html>
<head>
<title>AJAX JSON</title>

<body>
<form id="ajax" name="form" method="POST" action="form_standar_proses.php">
<center><h2>BIODATA</h2>
 <table>
  <tr>
   <td> Nama </td>
   <td> : </td>
   <td> <input type='text' name='nama'> </td>
  </tr>
  <tr>
   <td> Alamat </td>
   <td> : </td>
   <td> <textarea name='alamat'></textarea> </td>
  </tr>
  <tr>
   <td> Jenis Kelamin </td>
   <td> : </td>
   <td>
    <select name='jeniskelamin' id='jeniskelamin'>
     <option value='L'>Laki-laki</option>
     <option value='P'>Perempuan</option>
    </select>
   </td>
   
  <tr>
   <td> Status </td>
   <td> : </td>
   <td>
    <select name='status' id='status'>
     <option value='Lajang'>Lajang</option>
     <option value='Pacaran'>Pacaran</option>
     <option value='Tunangan'>Tunangan</option>
     <option value='Menikah'>Menikah</option>
     <option value='Cerai'>Cerai</option>
    </select>
   </td>
  </tr>
  <tr>
   <td> Telepon </td>
   <td> : </td>
   <td> <input type='text' name='telepon'> </td>
  </tr>
 
  <tr>
   <td> URL </td>
   <td> : </td>
   <td> <input type='text' name='URL'> </td>
  </tr>
  
  <tr>
   <td> </td>
   <td> </td>
   <td> <input type='Submit' name='simpan' value=' Simpan '>
    <input type='reset' value=' Hapus '>
   </td>
  </tr>
 </table>
</form>
</body>
</html>

jika anda jalankan program tersebut, akan menghasilkan output seperti ini:

jika anda klik submit, tentunya tidak akan ada proses yang terjadi,

karena program tersebut masih berupa tampilan.

untuk membuat proses tersebut,

langkah pertama kita harus memiliki library jquery terlebih dahulu.

dapat anda download melalui situs rsminya. DISINI

jika anda sudah memiliknya,
tambahkan skrip berikut untuk memanggl library jquery tersebut,
letakan dibawah kode <head>

<script language="JavaScript" src="jquery/jquery.js"></script>

setelah itu tambahkan skrip jqueryny seperit ini,
letakan tepat dibawah skrip library yang baru kita buat tadi.

<script>
 $(document).ready(function(){
  $("#ajax").submit( function() { 
  var post_data = $(this).serialize();  
  var form_action = $(this).attr("action");  
  var form_method = $(this).attr("method");  
   $.ajax( {  
    type  :form_method,  
    url  :form_action,
    data  : post_data,  
    datatype: 'json',
    success : function(HDI) {
     $('#tampil ul').prepend('<li style="display:none">'+HDI+'</li>');
              $('#tampil li').fadeIn("slow");
    },  
    error : function() {  
     alert("Mohon cek kembali data anda.");  
    }  
   });  
  return false;
  });
 });
</script>

keterangan:

$("#ajax").submit( function() {

memberikan keterangan bahwa form dengan nama ajax,
akan menjalanjkan fungsi dibawahnya ketika disubmit

var post_data = $(this).serialize();

mendefinisikan variabel inputan semua elemen

var form_action = $(this).attr("action");

mendefiniskan atribut dari form action

var form_method = $(this).attr("method");

mendefiniskan atribut dari method POST

 success : function(HDI) {
     $('#tampil ul').prepend('<li style="display:none">'+HDI+'</li>');

menampilkan data inputan ketika berhasil disubmit.

setelah itu tambahkan kode CSS diatas kode </head>

<style>
li {
 font-family: arial;
 font-size: 15px;
 list-style: none;
 border-bottom: 5px solid #000000;
 margin-bottom: 10px;
}
</style>

sekarang langkah terakhir adalah membuat program untuk proses datanya.
buatlah dihalaman baru, dan ketik programny seperti ini:

<?php
  foreach($_POST as $tampil => $data) {
   echo $tampil." : ".$data."<br />";
  }
?>

sekarang coba anda jalankan program pertama anda tadi:

dan masukkanlah inputannya:

jika anda klik simpan maka akan keluar output tepat dibawahnya,

sekarang coba anda masukkan inputan lagi tanpa merefreshnya. maka akan muncul tepat dibawah form tersebut, dan tidak akan menghapus yang lama.

Dengan menggunakan teknik ini, proses data akan berjalan lebih cepat .
semoga tutorial ini dapat bermanfaat buat teman-teman.
salam kenal, dan salam blogger Indonesia!

Catatan Hadi

Pages

Selasa, 26 Februari 2013

Membuat Form Menggunakan AJAX dengan JSON

Tidak ada komentar:

Posting Komentar