Progress Bar merupakan tampilan indikator suatu proses. Contoh yang sering kita temui yaitu saat proses copy data atau upload data pasti akan muncul progress bar atau indikator yang menampilkan sudah sejauh mana proses yang terjadi atau yang berjalan.
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.
Baiklah agar tidak berlama-lama bagaimana langsung saja kita membuatnya, yuk simak langkah-langkah berikut ini:
Langkah pertama
Sahabat buat database seperti dibawah ini:
Kemudian buat file index.php yang nanti untuk tampilan form inputnya berikut code nya:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!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> |
Langkah Kedua
Selanjutnya menambahkan sebuah script dari javascript dan perintah ajax untuk melempar atau melakukan request proses. Coba ketikkan script dibawah ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<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> |
Jika sudah simpan code diatas dalam satu file index.php, selanjutnya jalankan pada browser lalu masukan data sesuai form yang sudah dibuat. Maka tampilannya akan seperti dibawah ini
Jika form tidak disi maka akan menampilkan pesan error.
tampilan diatas saat proses simpan data serta data berhasil tersimpan.
Saya kira cukup dalam pembahasan artikel ini tentang Cara Membuat Progress Bar Insert Data PHP Menggunakan Ajax. Semoga bermanfaat dan selamat mencoba.
terima kasih