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>
setelah itu tambahkan skrip jqueryny seperit ini,
letakan tepat dibawah skrip library yang baru kita buat tadi.
keterangan:
memberikan keterangan bahwa form dengan nama ajax,
akan menjalanjkan fungsi dibawahnya ketika disubmit
mendefinisikan variabel inputan semua elemen
mendefiniskan atribut dari form action
mendefiniskan atribut dari method POST
menampilkan data inputan ketika berhasil disubmit.
setelah itu tambahkan kode CSS diatas kode </head>
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:
sekarang coba anda masukkan inputan lagi tanpa merefreshnya. maka akan muncul tepat dibawah form tersebut, dan tidak akan menghapus yang lama.
semoga tutorial ini dapat bermanfaat buat teman-teman.
salam kenal, dan salam blogger Indonesia!
Posting Komentar
Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.
Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia