Cara Membuat Insert Multi Menggunakan Jquery pada PHP

Sering dihadapi dari sebagian orang saat ingin menambahkan data yang banyak tentu akan membutuhkan banyak waktu, saat ini saya akan membahas bagaimana Cara Membuat Insert Multi Menggunakan Jquery pada PHP ,jika sahabat belum paham konsep insert data menggunakan Ajax Jquey silahkan melihat artikel sebelumnya disini .Pada artikel kali ini bagaimana cara menambahkan beberapa data sesuai kebutuhan kita secara bersamaan ,baiklah ikut langkah-langkah berikut ini;

Langkah Pertama : Cara Membuat Insert Multi Menggunakan Jquery pada PHP

Ketikan file index terlebih dahulu seperti dibawah ini :

<!DOCTYPE html>
<html>
 <head>
  <title>Cara Membuat Multi Insert dengan Jquery di PHP</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>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">Multiple Insert into Mysql using Ajax JQuery in PHP</h2>
   <br />
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>
      <th width="30%">Paket Kursus</th>
      <th width="10%">Kode Kursus</th>
      <th width="45%">Keterangan</th>
      <th width="10%">Biaya</th>
      <!-- <th width="5%"></th> -->
     </tr>
     <tr>
      <td contenteditable="true" class="item_name"></td>
      <td contenteditable="true" class="item_code"></td>
      <td contenteditable="true" class="item_desc"></td>
      <td contenteditable="true" class="item_price"></td>
      <!-- <td></td> -->
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
    <div id="inserted_item_data"></div>
   </div>
   
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){
  count = count + 1;
  var html_code = "<tr id='row"+count+"'>";
   html_code += "<td contenteditable='true' class='item_name'></td>";
   html_code += "<td contenteditable='true' class='item_code'></td>";
   html_code += "<td contenteditable='true' class='item_desc'></td>";
   html_code += "<td contenteditable='true' class='item_price' ></td>";
   html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";   
   html_code += "</tr>";  
   $('#crud_table').append(html_code);
 });
 
 $(document).on('click', '.remove', function(){
  var delete_row = $(this).data("row");
  $('#' + delete_row).remove();
 });
 
 $('#save').click(function(){
  var item_name = [];
  var item_code = [];
  var item_desc = [];
  var item_price = [];
  $('.item_name').each(function(){
   item_name.push($(this).text());
  });
  $('.item_code').each(function(){
   item_code.push($(this).text());
  });
  $('.item_desc').each(function(){
   item_desc.push($(this).text());
  });
  $('.item_price').each(function(){
   item_price.push($(this).text());
  });
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:{item_name:item_name, item_code:item_code, item_desc:item_desc, item_price:item_price},
   success:function(data){
    alert(data);
    $("td[contentEditable='true']").text("");
    for(var i=2; i<= count; i++)
    {
     $('tr#'+i+'').remove();
    }
    fetch_item_data();
   }
  });
 });
 
 function fetch_item_data()
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   success:function(data)
   {
    $('#inserted_item_data').html(data);
   }
  })
 }
 fetch_item_data();
 
});
</script>

Langkah Kedua : Cara Membuat Insert Multi Menggunakan Jquery pada PHP

Ketikan sintax untuk insert data seperti dibawah ini :

insert.php

<?php
$connect = mysqli_connect("localhost", "root", "", "paket_kursus");
if(isset($_POST["item_name"]))
{
 $item_name = $_POST["item_name"];
 $item_code = $_POST["item_code"];
 $item_desc = $_POST["item_desc"];
 $item_price = $_POST["item_price"];
 $query = '';
 for($count = 0; $count<count($item_name); $count++)
 {
  $item_name_clean = mysqli_real_escape_string($connect, $item_name[$count]);
  $item_code_clean = mysqli_real_escape_string($connect, $item_code[$count]);
  $item_desc_clean = mysqli_real_escape_string($connect, $item_desc[$count]);
  $item_price_clean = mysqli_real_escape_string($connect, $item_price[$count]);
  if($item_name_clean != '' && $item_code_clean != '' && $item_desc_clean != '' && $item_price_clean != '')
  {
   $query .= '
   INSERT INTO item(item_name, item_code, item_description, item_price) 
   VALUES("'.$item_name_clean.'", "'.$item_code_clean.'", "'.$item_desc_clean.'", "'.$item_price_clean.'"); 
   ';
  }
 }
 if($query != '')
 {
  if(mysqli_multi_query($connect, $query))
  {
   echo 'Data Berhasil disimpan';
  }
  else
  {
   echo 'Error';
  }
 }
 else
 {
  echo 'All Fields are Required';
 }
}
?>

Langkah Ketiga : Cara Membuat Insert Multi Menggunakan Jquery pada PHP

Ketikan sintax untuk menampilkan data yang sudah kita insert tadi seperti berikut ini :

<?php
$connect = mysqli_connect("localhost", "root", "", "paket_kursus");
$output = '';
$query = "SELECT * FROM item ORDER BY item_id DESC";
$result = mysqli_query($connect, $query);
$output = '
<br />
<h3 align="center">Data Paket Kursus Yang Diambil</h3>
<table class="table table-bordered table-striped">
 <tr>
  <th width="30%">Paket Kursus</th>
  <th width="10%">Kode Kursus</th>
  <th width="50%">Keterangan</th>
  <th width="10%">Biaya</th>
 </tr>
';
while($row = mysqli_fetch_array($result))
{
 $output .= '
 <tr>
  <td>'.$row["item_name"].'</td>
  <td>'.$row["item_code"].'</td>
  <td>'.$row["item_description"].'</td>
  <td>'.$row["item_price"].'</td>
 </tr>
 ';
}
$output .= '</table>';
echo $output;
?>

Gambar diatas tampilan form insert data yang kita pakai, disamping kanan bawah ada button + warna hijau digunakan untuk menambahkan form insert seperti berikut tampilannya

Sampai disini pembahasan artikel Cara Membuat Insert Multi Menggunakan Jquery pada PHP ,semoga bermanfaat dan sampai jumpa pada pembahasan selanjutnya.

terima kasih.