Cara Live Add, Edit, Delete Datatables Records menggunakan PHP Ajax

Cara Live Add, Edit, Delete Datatables Records menggunakan PHP Ajax

Cara Live Add, Edit, Delete Datatables Records menggunakan PHP Ajax
Cara Live Add, Edit, Delete Datatables Records menggunakan PHP Ajax

Hallo sahabat ruangcoder, artikel kali ini tentang Cara Membuat Live Add, Edit, Delete Datatables Records menggunakan PHP Ajax, dimana pada kesempatan sebelum nya admin juga sudah memberikan tutorial Cara Resize Table Columns HTML menggunakan Fitur Drag and Slide yang sobat bisa lihat disini berhubung banyak sekali yang meminta dibuatkan tutorial ini di youtube admin, cuma admin belum sempat, jadi sobat ruangcoder ini banyak sekali yang meminta Datatable sobat bisa di geser, di slide, bahakan live edit sampai menambahkan table baru tanpa menggunakan tr dan td jadi langsung klik sobat bisa nambah table baru, seperti layaknya Ms Excel bukan begitu sahabatku hahaha, nah admin baru sempat membuat tutorial ini di website saja, lain waktu jika sempat nanti admin buatkan juga deh versi videonya di youtube admin, tapi jangan lupa di skrikrep ya sobat.

Jadi sobat  dalam posting ini kita akan belajar cara membuat Datatables untuk operasi PHP Crud Live Ajax seperti create, read, update dan delete tanpa refresh halaman web. Karena dalam Datatables create atau edit catatan tabel langsung adalah proses yang sangat kompleks.

Kita dapat membuat tabel html dapat diedit dengan menggunakan atribut contenteditable dan menempatkan tag data tabel. Tetapi dalam Datatables kita tidak dapat menggunakan atribut contenteditable langsung ke tag td. Karena plugin ini telah menghasilkan kode tabel secara otomatis, admin hanya ingin meneruskan data ke metode Datatable () dalam format json. Kode lain telah dihasilkan. Jadi, oleh karena itu admin tidak dapat secara langsung menggunakan atribut contenteditable secara langsung dalam tabel. Dengan menggunakan atribut ini dapat mengkonversi tag menjadi dapat diedit, sehingga kita dapat membuat mengedit data dari tag itu dengan sangat mudah. Sekarang di sini admin ingin membuat konten tag data tabel yang dapat diedit, jadi admin telah menetapkan satu tag divisi untuk ini, untuk menampilkan data dari database ke halaman web di Datatables dan kemudian setelah admin menempatkan atribut contenteditable mendefinisikan dalam tag div dan html yang dikirimkan ke plugin dalam format json. Jadi dengan cara ini kita telah membuat data tabel plugin ini dapat diedit dan kita dapat dengan mudah mengedit konten tabel. Dengan cara ini kita dapat mendefinisikan atribut ini untuk kolom tabel di mana kita ingin mengedit data tabel langsung.

Setelah membuat data Datatables dapat diedit, sekarang admin ingin menambahkan baris tabel kosong di awal tabel. Jadi admin telah membuat kode html untuk menghasilkan baris tabel kosong. Dalam kode ini kita juga memiliki atribut itu, jadi kita dapat menulis sesuatu di kolom tabel itu dengan tombol insert. Dengan menggunakan metode jquery prepend () kita telah menambahkan baris tabel kosong ini di awal tabel dan untuk menambahkan catatan baru kita bisa mengetikkan tabel kosong itu dan klik tombol Sisipkan. Jadi dengan cara ini kita bisa menyisipkan records langsung dalam Datatables ini dengan menggunakan Ajax dengan script PHP. Di sini telah mendapatkan bantuan dari berbagai event jQuery yang menghasilkan permintaan Ajax dan mengirimkan panggilan AJAX ke skrip server dengan crud database action. Di sini kita telah membuat aplikasi halaman tunggal sederhana dengan menggunakan plugin Jquery Datatables dengan Ajax PHP dan Mysql.

Cara Live Add, Edit, Delete Datatables Records menggunakan PHP Ajax :

Langkah pertama tentu sobat harus membuat database nya terlebih dahulu dengan nama testing, silahkan sobat buat database nya dengan isi field database nya sebagai berikut, kalau mau di ubah isi nya ya terserah kan ini hanya tutorial saja , biar lebih mempermudah sobat nya :




--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `user`
--

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL,
  `first_name` varchar(200) NOT NULL,
  `last_name` varchar(200) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `first_name`, `last_name`) VALUES
(1, 'John', 'Smith'),
(5, 'Peterson', 'Parker'),
(7, 'Rock', 'Madison'),
(8, 'Titan', 'Edge');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=9;


Langkah selanjutnya setelah sobat membuat folder baru masing - masing disini admin memberi nama folder admin dengan table_ruangcoder, silahkan sobat buat file baru dengan nama file nya tersebut yaitu index.php kemudian sobat masukkan script dibawah ini :



<html>
 <head>
  <title>Live Add Edit Delete Datatables Records using PHP Ajax</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
  <style>
  body
  {
   margin:0;
   padding:0;
   background-color:#f1f1f1;
  }
  .box
  {
   width:1270px;
   padding:20px;
   background-color:#fff;
   border:1px solid #ccc;
   border-radius:5px;
   margin-top:25px;
   box-sizing:border-box;
  }
  </style>
 </head>
 <body>
  <div class="container box">
   <h1 align="center">Live Add Edit Delete Datatables Records using PHP Ajax</h1>
   <br />
   <div class="table-responsive">
   <br />
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-info">Add</button>
    </div>
    <br />
    <div id="alert_message"></div>
    <table id="user_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Frist Name</th>
       <th>Last Name</th>
       <th></th>
      </tr>
     </thead>
    </table>
   </div>
  </div>
 </body>
</html>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){
  
  fetch_data();

  function fetch_data()
  {
   var dataTable = $('#user_data').DataTable({
    "processing" : true,
    "serverSide" : true,
    "order" : [],
    "ajax" : {
     url:"fetch.php",
     type:"POST"
    }
   });
  }
  
  function update_data(id, column_name, value)
  {
   $.ajax({
    url:"update.php",
    method:"POST",
    data:{id:id, column_name:column_name, value:value},
    success:function(data)
    {
     $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
     $('#user_data').DataTable().destroy();
     fetch_data();
    }
   });
   setInterval(function(){
    $('#alert_message').html('');
   }, 5000);
  }

  $(document).on('blur', '.update', function(){
   var id = $(this).data("id");
   var column_name = $(this).data("column");
   var value = $(this).text();
   update_data(id, column_name, value);
  });
  
  $('#add').click(function(){
   var html = '<tr>';
   html += '<td contenteditable id="data1"></td>';
   html += '<td contenteditable id="data2"></td>';
   html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs">Insert</button></td>';
   html += '</tr>';
   $('#user_data tbody').prepend(html);
  });
  
  $(document).on('click', '#insert', function(){
   var first_name = $('#data1').text();
   var last_name = $('#data2').text();
   if(first_name != '' && last_name != '')
   {
    $.ajax({
     url:"insert.php",
     method:"POST",
     data:{first_name:first_name, last_name:last_name},
     success:function(data)
     {
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
   else
   {
    alert("Both Fields is required");
   }
  });
  
  $(document).on('click', '.delete', function(){
   var id = $(this).attr("id");
   if(confirm("Are you sure you want to remove this?"))
   {
    $.ajax({
     url:"delete.php",
     method:"POST",
     data:{id:id},
     success:function(data){
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
  });
 });
</script>

Lalu silahkan sobat buat kembali file baru , dimana file tersebut kita akan berinama dengan nama insert.php dan silahkan sobat ketikkan dengan script dibawah ini :



<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["first_name"], $_POST["last_name"]))
{
 $first_name = mysqli_real_escape_string($connect, $_POST["first_name"]);
 $last_name = mysqli_real_escape_string($connect, $_POST["last_name"]);
 $query = "INSERT INTO user(first_name, last_name) VALUES('$first_name', '$last_name')";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Inserted';
 }
}
?>

Fungsi script diatas berfungsi untuk menambahkan sebuah data baru, seperti namanya, insert jelas untuk menambah data, kemudian setelah membuat script menambah data, tentu nya kita harus membuat script update data nya atau edit datanya, silahkan sobat buat file baru dengan nama update.php kemudian sobat ketikkan dengan script yang ada dibawah ini :



<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["id"]))
{
 $value = mysqli_real_escape_string($connect, $_POST["value"]);
 $query = "UPDATE user SET ".$_POST["column_name"]."='".$value."' WHERE id = '".$_POST["id"]."'";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Updated';
 }
}
?>

Dan kita akan membuat sebuah script dengan fungsi delete dimana untuk menghapus data yang telah kita tambahkan , silahkan sobat buat file baru dengan nama delete.php kemudian sobat isikan script dibawah ini :



<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["id"]))
{
 $query = "DELETE FROM user WHERE id = '".$_POST["id"]."'";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Deleted';
 }
}
?>

Dan kita memasuki langkah terakhir untuk fungsinya, silahkan sobat buat fungsi nya dengan nama file nya fetch.php dan kemudian isikan scriptnya dibawah ini :



<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$columns = array('first_name', 'last_name');

$query = "SELECT * FROM user ";

if(isset($_POST["search"]["value"]))
{
 $query .= '
 WHERE first_name LIKE "%'.$_POST["search"]["value"].'%" 
 OR last_name LIKE "%'.$_POST["search"]["value"].'%" 
 ';
}

if(isset($_POST["order"]))
{
 $query .= 'ORDER BY '.$columns[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' 
 ';
}
else
{
 $query .= 'ORDER BY id DESC ';
}

$query1 = '';

if($_POST["length"] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$number_filter_row = mysqli_num_rows(mysqli_query($connect, $query));

$result = mysqli_query($connect, $query . $query1);

$data = array();

while($row = mysqli_fetch_array($result))
{
 $sub_array = array();
 $sub_array[] = '<div contenteditable class="update" data-id="'.$row["id"].'" data-column="first_name">' . $row["first_name"] . '</div>';
 $sub_array[] = '<div contenteditable class="update" data-id="'.$row["id"].'" data-column="last_name">' . $row["last_name"] . '</div>';
 $sub_array[] = '<button type="button" name="delete" class="btn btn-danger btn-xs delete" id="'.$row["id"].'">Delete</button>';
 $data[] = $sub_array;
}

function get_all_data($connect)
{
 $query = "SELECT * FROM user";
 $result = mysqli_query($connect, $query);
 return mysqli_num_rows($result);
}

$output = array(
 "draw"    => intval($_POST["draw"]),
 "recordsTotal"  =>  get_all_data($connect),
 "recordsFiltered" => $number_filter_row,
 "data"    => $data
);

echo json_encode($output);

?>

Nah sudah selesai deh, kalau terjadi error notifikasi pop up itu tandanya sobat di database nya belum ada data nya, silahkan isi datanya sobat, oke mungkin tutorial nya sampai sini saja sobat, semoga bermanfaat ya buat sobat semua, dan sampai jumpa di artikel selanjutnya sobat. Terimakasih sobat sudah berkunjung

Anda mungkin menyukai postingan ini