Cara Membuat Progress Bar Insert Data PHP Menggunakan Ajax

Progress Bar adalah sebuah tampilan indikator suatu proses. Contoh yang sering kita temui yaitu ketika proses copy data atau upload data pasti akan muncul progress bar atau indikator yang menampilkan telah sejauh mana proses yang terjadi atau yang berjalan.

Pada kesempatan kali ini kita akan membahas tentangÂ Cara Merancang Progress Bar Insert Data PHP Menggunakan Ajax. Jadi ketika mengerjakan insert data atau input data akan menampilkan indikator atau progress bar pada proses insert data.

Baiklah agar tak berlama-lama bagaimana seketika saja kita membuatnya, yuk simak strategi berikut ini:

Langkah pertama-tama

Rekan-rekan bikin database seperti dibawah ini:

Kemudian bikin file index.php yang nanti bagi tampilan form inputnya berikut code nya:

<!DOCTYPE html><br />
<html><br />
 <head><br />
  <title></title><br />
  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script><br />
  <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” /><br />
  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script><br />
 </head><br />
 <body><br />
  <div class=”container my-3″><br />
   <h1 class=”text-center”>Cara Merancang Progress Bar Ketika Insert Data PHP Menggunakan Ajax</h1></p>
<p>     <div class=”card my-5″><br />
       <span id=”success_message”></span><br />
        <div class=”card-header”><br />
          Silahkan Masukan Data Sahabat<br />
        </div><br />
        <div class=”card-body”><br />
            <form method=”post” id=”sample_form”><br />
              <div class=”form-group”><br />
                <input type=”text” class=”form-control” name=”first_name” id=”first_name” placeholder=”First Name”><br />
                <span id=”first_name_error” class=”text-danger”></span><br />
              </div><br />
              <div class=”form-group”><br />
                <input type=”text” class=”form-control” name=”last_name” id=”last_name” placeholder=”Last Name”><br />
                <span id=”last_name_error” class=”text-danger”></span><br />
              </div><br />
              <button type=”submit” class=”btn btn-primary” name=”save” id=”save”>Save</button><br />
            </form><br />
            <div class=”form-group” id=”process” style=”display:none;”><br />
        <div class=”progress”><br />
       <div class=”progress-bar progress-bar-striped active” role=”progressbar” aria-valuemin=”0″ aria-valuemax=”100″ style=””><br />
       </div><br />
      </div><br />
       </div><br />
        </div><br />
      </div><br />
  </div><br />
 </body><br />
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 class=“text-center”>Cara Merancang Progress Bar Ketika Insert Data PHP Menggunakan Ajax</h1>

Silahkan Masukan Data Sahabat

</div>

</div>

</div>

</form>

</div>

</body>

</html>

Langkah Kedua

Berikutnya menambahkan sebuah script dari javascript dan command ajax bagi melempar atau mengerjakan request proses. Coba ketikkan script dibawah ini:

<script></p>
<p> $(document).ready(function(){</p>
<p>  $(‘#sample_form’).on(‘submit’, function(event){<br />
   event.preventDefault();<br />
   var count_error = 0;</p>
<p>   if($(‘#first_name’).val() == ”)<br />
   {<br />
    $(‘#first_name_error’).text(‘First Name is required’);<br />
    count_error++;<br />
   }<br />
   else<br />
   {<br />
    $(‘#first_name_error’).text(”);<br />
   }</p>
<p>   if($(‘#last_name’).val() == ”)<br />
   {<br />
    $(‘#last_name_error’).text(‘Last Name is required’);<br />
    count_error++;<br />
   }<br />
   else<br />
   {<br />
    $(‘#last_name_error’).text(”);<br />
   }</p>
<p>   if(count_error == 0)<br />
   {<br />
    $.ajax({<br />
     url:”process.php”,<br />
     method:”POST”,<br />
     data:$(this).serialize(),<br />
     beforeSend:function()<br />
     {<br />
      $(‘#save’).attr(‘disabled’, ‘disabled’);<br />
      $(‘#process’).css(‘display’, ‘block’);<br />
     },<br />
     success:function(data)<br />
     {<br />
      var percentage = 0;</p>
<p>      var timer = setInterval(function(){<br />
       percentage = percentage + 20;<br />
       progress_bar_process(percentage, timer);<br />
      }, 1000);<br />
     }<br />
    })<br />
   }<br />
   else<br />
   {<br />
    return false;<br />
   }<br />
  });</p>
<p>  function progress_bar_process(percentage, timer)<br />
  {<br />
   $(‘.progress-bar’).css(‘width’, percentage + ‘%’);<br />
   if(percentage > 100)<br />
   {<br />
    clearInterval(timer);<br />
    $(‘#sample_form’)[0].reset();<br />
    $(‘#process’).css(‘display’, ‘none’);<br />
    $(‘.progress-bar’).css(‘width’, ‘0%’);<br />
    $(‘#save’).attr(‘disabled’, false);<br />
    $(‘#success_message’).html(“<div class=’alert alert-success’>Data Saved</div>”);<br />
    setTimeout(function(){<br />
     $(‘#success_message’).html(”);<br />
    }, 5000);<br />
   }<br />
  }</p>
<p> });<br />
</script>

(Visited 111 times, 1 visits today)

Langkah pertama-tama

Langkah Kedua

Leave a Reply Cancel reply