Import Data CSV Dengan Animasi Progress Bar AJAX Jquery Part 1

06/11/2019    Shelli Ripati    41     Website

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membuat Import Data CSV Dengan Animasi Progress Bar Menggunakan AJAX Jquery. Dimana ketika saya melakukan import file dengan format csv saya akan membuat animasi loading import menggunakan progress bar. Langkah pertama untuk dapat membuat animasi progress bar yaitu kita akan membuat proses upload file terlebih dahulu.

UPLOAD FILE

untuk membuat upload file csv teman-teman buat struktur html dengan nama index.php seperti di bawah ini.


<!DOCTYPE html>
<html>
 <head>
  <title>Import Data CSV Dengan Animasi Progress Bar AJAX Jquery</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">Import Data CSV Dengan Animasi Progress Bar AJAX Jquery</h1>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading" style="background-color: salmon">
     <h3 class="panel-title">Import File CSV</h3>
    </div>
      <div class="panel-body">
       <span id="message"></span>
       <form id="sample_form" method="POST" enctype="multipart/form-data" class="form-horizontal">
        <div class="form-group">
         <label class="col-md-4 control-label">Select CSV File</label>
         <input type="file" name="file" id="file" />
        </div>
        <div class="form-group" align="center">
         <input type="hidden" name="hidden_field" value="1" />
         <input type="submit" name="import" id="import" class="btn btn-info" value="Import" />
        </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">
          <span id="process_data">0</span> - <span id="total_data">0</span>
         </div>
        </div>
       </div>
      </div>
     </div>
  </div>
 </body>
</html>

Jika sudah maka tahap selanjutnya, masih didalam file index.php teman-teman buat script ajax jquery untuk menjalankan proses upload file seperti script di bawah ini.

<script>
 $(document).ready(function(){

  var clear_timer;

  $('#sample_form').on('submit', function(event){
   $('#message').html('');
   event.preventDefault();
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: new FormData(this),
    dataType:"json",
    contentType:false,
    cache:false,
    processData:false,
    beforeSend:function(){
     $('#import').attr('disabled','disabled');
     $('#import').val('Importing');
    },
    success:function(data){
     if(data.success){
      $('#total_data').text(data.total_line);
      start_import();
      $('#message').html('<div class="alert alert-success">CSV File Uploaded</div>');
     }
     if(data.error){
      $('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
      $('#import').attr('disabled',false);
      $('#import').val('Import');
     }
    }
   })
  });

});

<script>

 Dan jika sudah maka tahap terakhir teman-teman buat file baru dengan nama upload.php seperti pada script di bawah ini.

<?php

if(isset($_POST['hidden_field'])){
 $error = '';
 $total_line = '';
 session_start();
 if($_FILES['file']['name'] != ''){
  $allowed_extension = array('csv');
  $file_array = explode(".", $_FILES["file"]["name"]);
  $extension = end($file_array);
  if(in_array($extension, $allowed_extension)){
   $new_file_name = rand() . '.' . $extension;
   $_SESSION['csv_file_name'] = $new_file_name;
   move_uploaded_file($_FILES['file']['tmp_name'], 'file/'.$new_file_name);
   $file_content = file('file/'. $new_file_name, FILE_SKIP_EMPTY_LINES);
   $total_line = count($file_content);
  }else{
   $error = 'Only CSV file format is allowed';
  }
 }else{
  $error = 'Please Select File';
 }

 if($error != ''){
  $output = array(
   'error'  => $error
  );
 }else{
  $output = array(
   'success'  => true,
   'total_line' => ($total_line - 1)
  );
 }

 echo json_encode($output);
}

?>

Jika sudah teman-teman siapkan folder dengan nama "file" untuk menyimpan file hasil uploadnya. Dan jika dibuka dihalaman browser maka kita sudah dapat melakukan upload file. Dan untuk tahap selanjutnya kita akan membuat proses import data csv di pembahasan Import Data CSV Dengan Animasi Progress Bar AJAX Jquery Part 2. Demikian artikel tentang Import Data CSV Dengan Animasi Progress Bar AJAX Jquery Part 1.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More