Berkenalan Dengan Ajax

Heyhoo, penghuni Bumi dimanapun kalian berada, kali ini kita bakal berkenalan dengan yang namanya Ajax, tapi bukan klub sepakbola dari negeri kincir angin. Apa sih itu Ajax? AJAX (Asynchronous JavaScript and XML) merupakan teknik yg memanfaatkan XMLHttpRequest untuk berkomunikasi dengan server-side script. Nah, jadi Ajax ini bisa menerima dan mengirim data/informasi dalam format JSON, XML, HTML, dan TEXT. Keuntungannya dari Ajax ini bisa mengirim dan menerima data/informasi tanpa perlu me-refresh halaman web. Mantab djiwa!

Langsung saja kita praktekan contoh sederhana penggunaan Ajax untuk form registrasi. Let's go.

1. Buat file index.php pada direktori htdocs (jika menggunakan xampp).

2. Download dulu file jquery di sini kemudian masukkan script jquery.js kedalam tag <head>, karena kita akan menggunakan Ajax dengan bantuan jquery.

<!DOCTYPE html>
<html>
<head>
<script src="http://localhost/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>Contoh ajax</title>
</head>
...
</html

3. Buat scipt javascript untuk request yang akan diproses oleh Ajax.

<script>
  $(function(){
         
    //ketika submit button d click
    $("#submit-form").click(function(){
         
         //do ajax proses
         $.ajax({           
           url : "register.php", 
           type: "POST", //form method
           data: $("#contoh-form").serialize(),
           dataType:"json", //misal kita ingin format datanya brupa json
           beforeSend:function(){
             //lakukan apasaja sambil menunggu proses selesai disini
             //misal tampilkan loading             
             $(".loading").html("Please wait....");             
           },
           success:function(result){             
             if(result.status){               
               alert("Selamat, registrasi telah berhasil. Hiip hiiip horaaaay!");
               window.location.href = "http://localhost/index.php";               
             }else{               
               alert("Harap memberikan nilai pada setiap inputan!");
             }             
           },
           error: function(xhr, Status, err) {             
             $("Terjadi error : "+Status);
           }           
         });
              
       return false;
     })  
  });
 </script>

4. Masukkan tag <body> dan buat form registrasinya kurang lebih seperti ini:

<body> 
  <div>
    <h2>Register Ajax</h2>
     <form id="contoh-form">
       <p>Nama</p>
          <input type="text" name="nama">
       <p>Email</p>
          <input type="text" name="email">
       <p>Password</p>
          <input type="password" name="password">
       <p>
         <input type="button" value="submit" id="submit-form">
      </p>
    </form>
    <br>
    <span class="loading"></span>
  </div> 
</body>

5. Buat file lagi dengan nama register.php yang didalam filenya untuk merespon permintaan yang dikirimkan oleh Ajax.

<?php
// koneksi ke database
$koneksi = mysqli_connect("localhost","root","","register");

// menangkap data yang di kirim dari form
$nama = $_POST['nama'];
$email = $_POST['email'];
$password = $_POST['password'];

// menginput data ke database dengan nama tabel register
mysqli_query($koneksi,"insert into register values('','$nama','$email','$password')");

// mengalihkan halaman kembali ke index.php
header("location:index.php");

?>

Demikian contoh sederhana dari penggunaan Ajax.

Written by bmafazi on Apr 13 2019, 12:30 PM.
User
Projects
None
Subscribers
None