Membuat Animasi Proses Simpan Data Menggunakan Ajax

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membahas tentang cara Membuat Animasi Proses Simpan Data Menggunakan Ajax dimana sebuah animasi proses simpan data ini saya buat menggunakan animasi progress bar dengan ajaxjquery. Untuk Membuat Animasi Proses Simpan Data Menggunakan Ajax pertama-tama saya akan buat struktur html seperti pada script di bawah ini.

<!DOCTYPE html>
<html>
 <head>
  <title>Membuat Animasi Proses Simpan Data Menggunakan Ajax</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <h1 align="center">Membuat Animasi Proses Simpan Data Menggunakan Ajax</h1>
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Masukkan Data</h3>
    </div>
      <div class="panel-body">
       <span id="success_message"></span>
       <form method="post" id="sample_form">
        <div class="form-group">
         <label>Username</label>
         <input type="text" name="username" id="username" class="form-control" />
         <span id="username_error" class="text-danger"></span>
        </div>
        <div class="form-group">
         <label>Password</label>
         <input type="text" name="password" id="password" class="form-control" />
         <span id="password_error" class="text-danger"></span>
        </div>
        <div class="form-group" align="center">
         <input type="submit" name="save" id="save" class="btn btn-success" value="Save" />
        </div>
       </form>
       <div class="form-group" id="process" style="display:none;">
        <div class="progress">
       <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="">
       </div>
      </div>
       </div>
      </div>
     </div>
  </div>
 </body>
</html>

Jika sudah maka tahap selanjutnya saya akan membuat script ajax jquery untuk dapat membuat animasi proses menggunakan progress bar seperti pada script di bawah ini.

<script>
 
 $(document).ready(function(){
 
  $('#sample_form').on('submit', function(event){
   event.preventDefault();
   var count_error = 0;

   if($('#username').val() == ''){
    $('#username_error').text('First Name is required');
    count_error++;
   }else{
    $('#username_error').text('');
   }

   if($('#password').val() == ''){
    $('#password_error').text('Last Name is required');
    count_error++;
   }else{
    $('#password_error').text('');
   }

   if(count_error == 0){
    $.ajax({
     url:"process.php",
     method:"POST",
     data:$(this).serialize(),
     beforeSend:function(){
      $('#save').attr('disabled', 'disabled');
      $('#process').css('display', 'block');
     },success:function(data){
      var percentage = 0;
      var timer = setInterval(function(){
       percentage = percentage + 20;
       progress_bar_process(percentage, timer);
      }, 1000);
     }
    })
   }else{
    return false;
   }
  });

  function progress_bar_process(percentage, timer){
   $('.progress-bar').css('width', percentage + '%');
   if(percentage > 100){
    clearInterval(timer);
    $('#sample_form')[0].reset();
    $('#process').css('display', 'none');
    $('.progress-bar').css('width', '0%');
    $('#save').attr('disabled', false);
    $('#success_message').html("<div class='alert alert-success'>Data Berhasil Di Simpan !</div>");
    setTimeout(function(){
     $('#success_message').html('');
    }, 5000);
   }
  }

 });
</script>

Dan langkah terakhir teman-teman bisa buat file baru dengan nama process.php untuk proses simpan data ke dalam database.

<?php

$connect = new PDO("mysql:host=localhost; dbname=test", "dumet", "school");

if(isset($_POST["username"])){
 $data = array(
  ':username'  => trim($_POST["username"]),
  ':password'  => trim($_POST["password"])
 );

 $query = "INSERT INTO admin (username, password) VALUES (:username, :password)";
 $statement = $connect->prepare($query);
 $statement->execute($data);
 echo 'done';
 
}

?>

Demikian artikel tentang cara Membuat Animasi Proses Simpan Data Menggunakan Ajax. Semoga dapat bermanfaat.

24 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat