Hallo
pengenjung setia irhansi.blogspot.com udah lama gak posting info-info mengenai pembelajaran
dibidang ilmu computer nih, oke kali ini saya akan sedikit berbagi ilmu
mengenai cara membuat submit form dengan AJAX menggunakan jQuery. Sebelum masuk
ketahap pembelajaran membuat submit form dengan AJAX menggunakan jQuery ada
baiknya kita mengetahui lebih dulu apa sih itu AJAX dan jQuery.
AJAX
merupakan singkatan dari “Asynchronous JavaScript and XML” merupakan sebuah cara atau metode sebuah
halaman web menggunakan JavaScript untuk mengirim dan menerima data dari server
tanpa harus merefresh atau menyegarkan halaman tersebut.
JQuery adalah suatu library yang biasanya dibangun
dengan menggunakan JavaScript untuk menyederhanakan perintah-perintah umum.
Meskipun ada banyak macam-macam library
lain, namun jQuery jauh lebih populer ketimbang
library lain hal tersebut karena kemampuannya untuk menjalankan perintah
pada peramban lama.
Nah sudah cukup jelaskan penjelasan singkat untuk AJAX dan jQuery? Kalau masih belum jelas bisa baca-baca lagi diinternet soalnya udah banyak banget penjelasan mengenai hal tersebut.
Oke sekarang langsung saja kita masuk ketahap belajar membuat submit form dengan AJAX menggunakan jQuery, pertama-tama hal yang perlu kita siapkan ketika ingin membuat submit form dengan AJAX menggunakan jQuery adalah sebuah software aplikasi untuk membuat kodingannya disini saya menggunakan notepad++ dan tentu saja web browser untuk melihat hasil submit form yang akan kita buat.
Nah sudah cukup jelaskan penjelasan singkat untuk AJAX dan jQuery? Kalau masih belum jelas bisa baca-baca lagi diinternet soalnya udah banyak banget penjelasan mengenai hal tersebut.
Oke sekarang langsung saja kita masuk ketahap belajar membuat submit form dengan AJAX menggunakan jQuery, pertama-tama hal yang perlu kita siapkan ketika ingin membuat submit form dengan AJAX menggunakan jQuery adalah sebuah software aplikasi untuk membuat kodingannya disini saya menggunakan notepad++ dan tentu saja web browser untuk melihat hasil submit form yang akan kita buat.
Langsung saja masuk ketahap awal pertama yang harus
kita buat untuk membuat codingan untuk submitformajax.html.
Berikut source code untuk submitformajax.html :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Belajar membuat submit form
dengan menggunakan AJAX</title>
<script
type="text/javascript" src="jQuery.js"></script>
<script
type="text/javascript">
$(document).ready(function() {
$().ajaxStart(function()
{
$('#loading').show();
$('#result').hide();
}).ajaxStop(function()
{
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#myForm').submit(function()
{
$.ajax({
type:
'POST',
url:
$(this).attr('action'),
data:
$(this).serialize(),
success:
function(data) {
$('#result').html(data);
}
})
return
false;
});
})
</script>
<style type="text/css">
body, table, input, select, textarea {
font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid
#999; }
td { padding: 5px; }
#result { background-color: #F0FFED;
border: 1px solid #215800; padding: 10px; width: 400px; margin-bottom: 20px;
}
</style>
</head>
<body>
<h4>Belajar membuat submit form
dengan menggunakan AJAX</h4>
<div id="loading"
style="display:none;"><img src="loading.gif"
alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm"
method="post" action="proses.php">
<table>
<tr>
<td
width="100">NIM</td>
<td>
<input
name="nim" size="30" type="text" />
</td>
</tr>
<tr>
<td>Nama</td>
<td>
<input
name="nama" size="30" type="text" />
</td>
</tr>
<tr>
<td>Tempat
Lahir</td>
<td>
<input
name="tempat_lahir" size="30" type="text" />
</td>
</tr>
<tr>
<td>Tanggal
Lahir</td>
<td>
<input
name="tgl_lahir" size="30" type="text" />
</td>
</tr>
<tr>
<td>Alamat</td>
<td>
<input
name="alamat" size="30" type="area" />
</td>
</tr>
<tr>
<td>No.
Telp</td>
<td>
<input
name="no_telp" size="30" type="text" />
</td>
</tr>
<tr>
<td>No.
HP</td>
<td>
<input
name="no_hp" size="30" type="text" />
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input
name="email" id="email" size="30"
type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input
type="submit" value="Submit" />
<input
type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
|
Untuk source code
submitformajax.html diatas saya juga memasukkan kodingan css internal untuk membuat
tampilannya lebih rapi.
Lanjut ketahap kedua yang kita perlukan adalah membuat
codingan untuk data.php
Berikut source code untuk data.php :
<?php
if (trim($_POST['nim']) == '') {
$error[]
= '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
$error[]
= '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '')
{
$error[]
= '- Tempat Lahir harus diisi';
}
if (trim($_POST['tgl_lahir']) == '') {
$error[]
= '- Tanggal Lahir harus diisi';
}
if (trim($_POST['alamat']) == '') {
$error[]
= '- Alamat harus diisi';
}
if (trim($_POST['no_telp']) == '') {
$error[]
= '- No.Telp harus diisi';
}
if (trim($_POST['no_hp']) == '') {
$error[]
= '- No.HP harus diisi';
}
if (trim($_POST['email']) == '') {
$error[]
= '- Email harus diisi';
}
if (isset($error)) {
echo
'<b>Error</b>: <br />'.implode('<br />', $error);
} else {
$data
= '';
foreach
($_POST as $k => $v) {
$data
.= "$k : $v<br />";
}
echo
'<b>Form berhasil disubmit. Berikut ini data yang telah anda isi
:</b><br />';
echo
$data;
}
die();
?>
|
Untuk source code data.php diatas saya menambahkan
validasi pada saat pengisian data agar user yang mengisi data harus benar-benar
lengkap agar data bisa tersimpan.
Setelah kedua
file sudah selesai dibuat dan disimpan (ingat kedua file tersebut wajib
disimpan dalam satu folder didalam xampp/htdoct) untuk membukanya kita perlu
menyalakan aplikasi XAMPP yaitu Apache dan MySQL, setelah menyala buka web
browser dan ketikkan localhost/( nama folder menyimpan 2 file tersebut )/ submitformajax.html
lalu klik enter maka akan muncul tampilan submitformajax.html secara otomatis
seperti dibawah ini.
Setelah masuk
kehalaman tersebut kita bisa mencoba untuk mengisikan data-datanya dan harus
terisi semua maka hasil tampilan halaman tersebut adalah seperti dibawah ini.
Mungkin cukup sekian
dulu sharing tutorial cara membuat sumbit form AJAX menggunakan jQuery dari
saya, semoga bermanfaat.!
