Menambahkan Edit Delete Records di Database menggunakan PHP dan jQuery Ajax

2 77

Dalam tutorial jQuery AJAX ini, kita akan belajar tentang cara menambahkan, mengedit dan menghapus record di database MySQL menggunakan PHP. Kami telah menggunakan penangan jQuery yang menghasilkan dan mengirim panggilan AJAX ke database backend bersamaan dengan tindakan yang diminta.

Formulir AJAX untuk Melakukan Database Add Edit Delete

Kami memiliki form kontrol untuk memasukkan data pengguna dan memicu event AJAX untuk melakukan aksi database. Kode ini awalnya menampilkan daftar record dari tabel database. Ini juga memiliki bentuk tambah untuk masuk rekaman baru via AJAX.

<div id=”comment-list-box”> <?php if(!empty($comments)) { foreach($comments as $k=>$v) { ?>

// display comments list <div class=”message-box” id=”message_<?php echo $comments[$k][“id”];?>”> <div> <button class=”btnEditAction” name=”edit” onClick=”showEditBox(<?php echo $comments[$k][“id”]; ?>)”>Edit</button> <button class=”btnDeleteAction” name=”delete” onClick=”callCrudAction(‘delete’,<?php echo $comments[$k][“id”]; ?>)”>Delete</button> </div> <div class=”message-content”><?php echo $comments[$k][“message”]; ?></div> </div> <?php }} ?> </div> <div id=”frmAdd”><textarea name=”txtmessage” id=”txtmessage” cols=”80″ rows=”10″></textarea> <p><button id=”btnAddAction” name=”submit” onClick=”callCrudAction(‘add’,”)”>Add Comment</button></p> </div>

Setelah formulir add dikirimkan maka form data dikirim ke halaman PHP via AJAX call. Pada event add yang sukses, reload daftar record yang ditampilkan di atas menambahkan form.

Fungsi jQuery AJAX untuk Query untuk Database CRUD

Dalam fungsi jQuery AJAX kami, kami memiliki kasus beralih menambahkan edit dan hapus. Kasus ini menghasilkan berbagai query-string dan response-data tergantung pada tindakan database.

function callCrudAction(action,id) {
$("#loaderIcon").show();
var queryString;
switch(action) {
case "add":
queryString = 'action='+action+'&txtmessage='+ $("#txtmessage").val();
break;
case "edit":
queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#txtmessage_"+id).val();
break;
case "delete":
queryString = 'action='+action+'&message_id='+ id;
break;}	 
jQuery.ajax({
url: "crud_action.php",
data:queryString,
type: "POST",
success:function(data){
switch(action) {
case "add":
$("#comment-list-box").append(data);
break;
case "edit":
$("#message_" + id + " .message-content").html(data);
$('#frmAdd').show();
break;
case "delete":
$('#message_'+id).fadeOut();
break;
}
$("#txtmessage").val('');
$("#loaderIcon").hide();
},
});}

Script PHP untuk operasi Database CRUD

Mengikuti blok kode adalah operasi kueri basis data biasa. Skrip PHP ini setelah melakukan tindakan CRUD, ia mengembalikan catatan database yang diperbarui sebagai respon dari panggilan AJAX.

require_once("dbcontroller.php");
$db_handle = new DBController();
$action = $_POST["action"];
if(!empty($action)) {
switch($action) {
case "add":
$result = mysql_query("INSERT INTO comment(message) VALUES('".$_POST["txtmessage"]."')");
if($result){
$insert_id = mysql_insert_id();
echo '<div class="message-box"  id="message_' . $insert_id . '">
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(' . $insert_id . ')">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction(\'delete\',' . $insert_id . ')">Delete</button>
</div>
<div class="message-content">' . $_POST["txtmessage"] . '</div></div>';
}
break;
case "edit":
$result = mysql_query("UPDATE comment set message = '".$_POST["txtmessage"]."' WHERE  id=".$_POST["message_id"]);
if($result) echo $_POST["txtmessage"];
break;	
case "delete": 
if(!empty($_POST["message_id"])) {
mysql_query("DELETE FROM comment WHERE id=".$_POST["message_id"]);
}
break;}}

Get real time updates directly on you device, subscribe now.

2 Comments
  1. […] ke sel tabel untuk memungkinkan pengeditan inline dengan mengklik tampilan sel. Sebelumnya di tutorial AJAX Add Edit Delete, kita sudah melakukan hal yang sama dengan menggunakan jQuery show / […]

  2. […] kami melihat tentang CRUD dengan AJAX dan CRUD tanpa AJAX (keduanya tidak memiliki pencarian dan pagination). Nah di tutorial ini, kita […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.