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.

Edit File CSV Dengan Ajax Kemudian di Import

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.

Edit File CSV Dengan Ajax Kemudian di Import

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

Edit File CSV Dengan Ajax Kemudian di Import

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

Edit File CSV Dengan Ajax Kemudian di Import

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

Edit File CSV Dengan Ajax Kemudian di Import

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

21 April 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat