Beranda
JavaScript

Membuat Progress Bar Insert Data PHP Menggunakan Ajax

Dalam kesempatan kali ini kita akan membahas tentang Cara Membuat Progress Bar Insert Data PHP Menggunakan Ajax. Jadi saat melakukan insert data atau input data akan menampilkan indikator atau progress bar dalam proses insert data.

Apa itu Progress Bar

Progress bar adalah sebuah indikator visual yang menunjukkan kemajuan atau progress dari sebuah tugas atau aktivitas yang sedang berjalan. Biasanya, progress bar ditampilkan dalam bentuk garis horizontal yang terisi secara bertahap untuk menggambarkan persentase atau jumlah yang telah selesai dari suatu tugas. Ini memberikan informasi kepada pengguna tentang sejauh mana proses atau aktivitas tersebut telah dilakukan dan seberapa banyak yang masih harus dilakukan. Progress bar sering digunakan dalam berbagai aplikasi dan situs web, seperti saat mengunduh file, mengunggah gambar, atau memproses data.

Cara Membuat Progress Bar Insert Data PHP Menggunakan Ajax

1. Langkah pertama yaitu sobat harus membuat database terlebih dahulu

2. Kemudian buat file index.php yang nanti untuk tampilan form inputnya berikut code nya:

<!DOCTYPE html>
<html>
 <head>
  <title></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/4.3.1/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container my-3">
   <h1 class="text-center">Cara Membuat Progress Bar Saat Insert Data PHP Menggunakan Ajax</h1>
  
     <div class="card my-5">
       <span id="success_message"></span>
        <div class="card-header">
          Silahkan Masukan Data Anda
        </div>
        <div class="card-body">
            <form method="post" id="sample_form">
              <div class="form-group">
                <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
                <span id="first_name_error" class="text-danger"></span>
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
                <span id="last_name_error" class="text-danger"></span>
              </div>
              <button type="submit" class="btn btn-primary" name="save" id="save">Save</button>
            </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>

3. Selanjutnya menambahkan sebuah script dari javascript dan perintah ajax untuk melempar atau melakukan request proses. Silahkan salin dengan script dibawah ini

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

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

   if($('#last_name').val() == '')
   {
    $('#last_name_error').text('Last Name is required');
    count_error++;
   }
   else
   {
    $('#last_name_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 Saved</div>");
    setTimeout(function(){
     $('#success_message').html('');
    }, 5000);
   }
  }

 });
</script>

4. Jika sudah simpan code diatas dalam satu file index.php, selanjutnya jalankan pada browser lalu masukan data sesuai form yang sudah dibuat.

Jika form tidak disi maka akan menampilkan pesan error.

Penutup

Oke mungkin ini saja yang dapat codepelajar sampaikan dan bisa sobat lakukan segera dengan kode yang sudah diberikan di atas, semoga membantu.