Rabu, 30 November 2016

Belajar Membuat Submit Form Dengan AJAX Menggunakan JQuery

07.03    No comments


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.

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.!
 

0 komentar:

Posting Komentar