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.

require_once("dbcontroller.php");
$db_handle = new DBController();
$sql = "SELECT * from posts";
$posts = $db_handle->runSelectQuery($sql);
?>


  
	
	  
	  
	  
	
  
  
		if(!empty($posts)) {
	foreach($posts as $k=>$v) {
	  ?>
	  ">
		
		
		
	  
	  	}
	}
	?>
  
Title
Description
Actions
')" onClick="editRow(this);">
')" onClick="editRow(this);">
);">Delete

JQuery Ajax Insert Tanpa Refresh

Script berikut ini adalah untuk menampilkan data setelah disimpan ke database tanpa harus merefresh browser.

function createNew() {
		$("#add-more").hide();
		var data = '' +
		'' +
		'' +
		'Save / Cancel' +	
		'';
	  $("#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('');
	  $.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);
	}

Jquery Ajax Edit dan Hapus

Kode berikut dalah kode jquery untuk action edit data dan delete data dari database..

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();
				}
		});
	  }
	}

Untuk full source codenya bisa kamu dapatkan di link berikut
Download