Edit File CSV Dengan Ajax Kemudian di Import

Pada kesempatan kali ini saya akan membahas tentang cara Edit File CSV Dengan Ajax Kemudian di Import ke dalam database menggunakan script PHP. Nah sebelum kita membuat script, saya akan menunjukan terlebih dahulu data yang saya miliki di database mysql seperti pada gambar di bawah ini.

Nah setelah itu maka langkah pertama untuk membuat Edit File CSV Dengan Ajax Kemudian di Import yaitu kita akan membuat struktur htmlnya sebagai berikut dan script ajax untuk melakukan edit file csv.

index.php

<!DOCTYPE html>
<html>
 <head>
  <title>Edit File CSV Dengan Ajax Kemudian di Import</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.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.6/js/bootstrap.min.js"></script>
  <style>
  .box
  {
   max-width:600px;
   width:100%;
   margin: 0 auto;;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Edit File CSV Dengan Ajax Kemudian di Import</h3>
   <br />
   <form id="upload_csv" method="post" enctype="multipart/form-data">
    <div class="col-md-3">
     <br />
     <label>Select CSV File</label>
    </div>  
                <div class="col-md-4">  
                    <input type="file" name="csv_file" id="csv_file" accept=".csv" style="margin-top:15px;" />
                </div>  
                <div class="col-md-5">  
                    <input type="submit" name="upload" id="upload" value="Upload" style="margin-top:10px;" class="btn btn-info" />
                </div>  
                <div style="clear:both"></div>
   </form>
   <div id="csv_file_data"></div>
   
  </div>
 </body>
</html>

<script>

$(document).ready(function(){
 $('#upload_csv').on('submit', function(event){
  event.preventDefault();
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:new FormData(this),
   dataType:'json',
   contentType:false,
   cache:false,
   processData:false,
   success:function(data)
   {
    var html = '<table class="table table-striped table-bordered">';
    if(data.column)
    {
     html += '<tr>';
     for(var count = 0; count < data.column.length; count++)
     {
      html += '<th>'+data.column[count]+'</th>';
     }
     html += '</tr>';
    }

    if(data.row_data)
    {
     for(var count = 0; count < data.row_data.length; count++)
     {
      html += '<tr>';
      html += '<td class="name" contenteditable>'+data.row_data[count].name+'</td>';
      html += '<td class="email" contenteditable>'+data.row_data[count].email+'</td></tr>';
     }
    }
    html += '<table>';
    html += '<div align="center"><button type="button" id="import_data" class="btn btn-success">Import</button></div>';

    $('#csv_file_data').html(html);
    $('#upload_csv')[0].reset();
   }
  })
 });

 $(document).on('click', '#import_data', function(){
  var name = [];
  var email = [];
  $('.name').each(function(){
   name.push($(this).text());
  });
  $('.email').each(function(){
   email.push($(this).text());
  });
  $.ajax({
   url:"import.php",
   method:"post",
   data:{name:name, email:email},
   success:function(data)
   {
    $('#csv_file_data').html('<div class="alert alert-success">Data Imported Successfully</div>');
   }
  })
 });
});

</script>

Jika sudah selesai maka kita lanjutkan membuat file dengan nama fetch.php untuk menampilkan isi file csv.

<?php
if(!empty($_FILES['csv_file']['name']))
{
 $file_data = fopen($_FILES['csv_file']['tmp_name'], 'r');
 $column = fgetcsv($file_data);
 while($row = fgetcsv($file_data))
 {
  $row_data[] = array(
   'name'  => $row[0],
   'email'  => $row[1]
  );
 }
 $output = array(
  'column'  => $column,
  'row_data'  => $row_data
 );

 echo json_encode($output);

}

?>

Dan langkah terakhir kita akan membuat proses import ke database dari file csv yang sudah di edit menggunakan ajax.

<?php

if(isset($_POST["name"]))
{
 $connect = new PDO("mysql:host=localhost;dbname=test", "dumet", "school");
 $name = $_POST["name"];
 $email = $_POST["email"];
 for($count = 0; $count < count($name); $count++)
 {
  $query .= "
  INSERT INTO import(name, email)
  VALUES ('".$name[$count]."', '".$email[$count]."');
 
  ";
 }
 $statement = $connect->prepare($query);
 $statement->execute();
}

?>

Jika sudah selesai maka ketika teman-teman bisa lakukan upload file csv seperti pada gambar di bawah ini.

Dan gambar berikut ini adalah file csv yang belum di edit.

Sementara gambar di bawah adalah file csv yang sudah diedit, kemudian teman-teman bisa tekan tombol import di bawahya.

Dan teman-teman bisa lihat database saya yang sudah terupdate hasil file csv yang sudah di edit.

Demikian artikel tentang cara membuat Edit File CSV Dengan Ajax Kemudian di Import dengan menggunakan php. Semoga bermanfaat.