8/16/18

Membuat CRUD PHP JQuery AJAX dengan MySQL Tanpa Refresh

SHARE
CRUD adalah kependekan dari Create, Read, Update dan Delete, singkatan ini biasanya digunakan dalam berbagai bahasa pemrogramman baik, web php, java, android dan yang lainnya. CRUD mengacu pada program yang dibuat untuk pengolahan data yang melibatkan database, seperti mysql, sqlserver, postgresql dan lain sebagainya.


Pada program crud php ajax jquery ini akan dibahas cara membuar program sederhana CRUD untuk artikel. Sebelumnya kamu harus membuat tabel terlebih dahulu, sebagai contoh buat "tbl_artikel".
Saya asumsikan bahwa kamu sudah pernah dan mengerti cara membuat tabel dan database.

Untuk penejelasan dalam artikel ini, penulis hanya menjelaskan kode-kode mana saja yang berfungsi sebagai CRUD dan kode tanpa refresh tab browser ketika eksekusi CRUD.

PHP dan HTML untuk Tabel

Kode untuk CRUD database yang terlihat seperti di bawah ini adalah untuk membaca dan menyimpan ataupun mengedit data di database.
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$sql = "SELECT * from posts";
$posts = $db_handle->runSelectQuery($sql);
?>

<table class="tbl-qa">
  <thead>
 <tr>
   <th class="table-header">Title</th>
   <th class="table-header">Description</th>
   <th class="table-header">Actions</th>
 </tr>
  </thead>
  <tbody id="table-body">
 <?php
 if(!empty($posts)) {
 foreach($posts as $k=>$v) {
   ?>
   <tr class="table-row" id="table-row-<?php echo $posts[$k]["id"]; ?>">
  <td contenteditable="true" onBlur="saveToDatabase(this,'post_title','<?php echo $posts[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[$k]["post_title"]; ?></td>
  <td contenteditable="true" onBlur="saveToDatabase(this,'description','<?php echo $posts[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[$k]["description"]; ?></td>
  <td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $posts[$k]["id"]; ?>);">Delete</a></td>
   </tr>
   <?php
 }
 }
 ?>
  </tbody>
</table>

JQuery Ajax Insert Tanpa Refresh

Script berikut ini adalah untuk menampilkan data setelah disimpan ke database tanpa harus merefresh browser.
<script>
 function createNew() {
  $("#add-more").hide();
  var data = '<tr class="table-row" id="new_row_ajax">' +
  '<td contenteditable="true" id="txt_title" onBlur="addToHiddenField(this,\'title\')" onClick="editRow(this);"></td>' +
  '<td contenteditable="true" id="txt_description" onBlur="addToHiddenField(this,\'description\')" onClick="editRow(this);"></td>' +
  '<td><input type="hidden" id="title" /><input type="hidden" id="description" /><span id="confirmAdd"><a onClick="addToDatabase()" class="ajax-action-links">Save</a> / <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a></span></td>' + 
  '</tr>';
   $("#table-body").append(data);
 }

 function cancelAdd() {
  $("#add-more").show();
  $("#new_row_ajax").remove();
 }

 function addToDatabase() {
   var title = $("#title").val();
   var description = $("#description").val();
   $("#confirmAdd").html('<img src="loaderIcon.gif" />');
   $.ajax({
  url: "add.php",
  type: "POST",
  data:'title='+title+'&description='+description,
  success: function(data){
  $("#new_row_ajax").remove();
  $("#add-more").show();   
  $("#table-body").append(data);
  }
   });
 }

 function addToHiddenField(addColumn,hiddenField) {
  var columnValue = $(addColumn).text();
  $("#"+hiddenField).val(columnValue);
 }
</script>

Jquery Ajax Edit dan Hapus

Kode berikut dalah kode jquery untuk action edit data dan delete data dari database..
<script>
 function saveToDatabase(editableObj,column,id) {
   $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
   $.ajax({
  url: "edit.php",
  type: "POST",
  data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
  success: function(data){
    $(editableObj).css("background","#FDFDFD");
  }
   });
 }

 function deleteRecord(id) {
   if(confirm("Anda yakin akan menghapus row?")) {
     $.ajax({
  url: "delete.php",
  type: "POST",
  data:'id='+id,
  success: function(data){
    $("#table-row-"+id).remove();
    }
  });
   }
 }
</script>
Untuk full source codenya bisa kamu dapatkan di link berikut
Download

SHARE

Author: verified_user

0 komentar: