Import Data CSV Dengan Animasi Progress Bar AJAX Jquery Part 2

06/11/2019    Shelli Ripati    1662    Website

Hallo teman-teman Dumet School, artikel sebelumnya mengenai Import Data CSV Dengan Animasi Progress Bar AJAX Jquery Part 1 saya sudah membahas tentang cara upload file csv. Dan untuk kesempatan kali ini di part 2 atau bagian dua tentang cara Import Data CSV Dengan Animasi Progress Bar AJAX Jquery kita akan membuat proses import file csv yang akan kita simpen ke database mysql. Pada bagian pertama saya sudah membuat dua file, yaitu file index.php dan file upload.php. Masih di dalam file index.php saya akan membuat proses import dengan script ajax jquery seperti di bawah ini.

function start_import(){
   $('#process').css('display', 'block');
    var percentage = 0;
    var timer = setInterval(function(){
     percentage = percentage + 20;
     progress_bar_process(percentage, timer);
    }, 1000);
   $.ajax({
    url:"import.php",
    success:function()
    {

    }
   })
  }

Kemudian teman-teman buat satu fungsi lagi untuk membuat animasi loading progress bar seperti berikut ini.

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);
    $('#message').html("<div class='alert alert-success'>Data Saved</div>");
    setTimeout(function(){
     $('#message').html('');
    }, 5000);
   }
  }

Karena disini kita sudah membuat animasi progress bar, maka teman-teman bisa hapus animasi alert ini didalam event on submit sebelumnya, yang sudah kita buat di part 1.

$('#message').html('<div class="alert alert-success">CSV File Uploaded</div>');

Dan tahap terakhir teman-teman buat file baru dengan nama import.php dan berikut ini scriptnya.

<?php

header('Content-type: text/html; charset=utf-8');
header("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

set_time_limit(0);

ob_implicit_flush(1);

session_start();

if(isset($_SESSION['csv_file_name'])){
 $connect = new PDO("mysql:host=localhost; dbname=test", "dumet", "school");
 $file_data = fopen('file/' . $_SESSION['csv_file_name'], 'r');
 fgetcsv($file_data);

 while($row = fgetcsv($file_data)) {
  $data = array(
   ':username' => $row[0],
   ':password' => $row[1]
  );

  $query = "
  INSERT INTO admin (username, password)
     VALUES (:username, :password)
  ";

  $statement = $connect->prepare($query);

  $statement->execute($data);

  sleep(1);

  if(ob_get_level() > 0){
   ob_end_flush();
  }
 }

 unset($_SESSION['csv_file_name']);
}

?>

 

Dan jika sudah semua maka teman-teman bisa langsung melakukan testing untuk upload file dan import file csv dengan animasi progress bar ke dalam database. maka jika berhasil upload dan import file csv akan muncul animasi progress dan dilanjutkan dengan alert success. 

Demikian artikel tentang cara Import Data CSV Dengan Animasi Progress Bar AJAX Jquery. Semoga dapat bermanfaat dan selamat mencoba.

No data.