Ajax Create, update and delete data with jquery and php

now we will make a simple add, edit ,delete data with jquery, php and mysql

first we create a table called ‘tbl_barang’

CREATE TABLE `tbl_barang` (
 `kode_barang` varchar(10) collate latin1_general_ci NOT NULL,
 `nama_barang` varchar(100) collate latin1_general_ci NOT NULL,
 `harga` double(16,2) NOT NULL,
 PRIMARY KEY  (`kode_barang`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

after that we create a file called ‘koneksi.php’ and put ths code into the file

<?
 mysql_connect("localhost","root","") or die("maaf, tidak berhasil konek ke database");
 mysql_select_db("myblog") or die("database tidak ada");
?>

then let’s create a file to view a list of inserted data give the file name “listbarang.php” and put this code into the file.

<?
 include("koneksi.php");
 $str="select * from tbl_barang";
 $res=mysql_query($str) or die("query gagal dijalankan");
 ?>
<table width="100%" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr bgcolor="#CCCCCC">
<th>Kode barang</th><th>Nama barang</th><th>Harga</th><th width="50">Edit</th><th width="50">delete</th>
</tr>
</thead>
<tbody>
<? while($data=mysql_fetch_assoc($res)){?>
<tr>
<td><? echo $data['kode_barang'];?></td><td><? echo $data['nama_barang'];?></td><td><? echo $data['harga'];?></td><td><a href="formbarang.php?action=update&kodebarang=<? echo $data['kode_barang'];?>">edit</a></td><td><a href="proses.php?action=delete&kodebarang=<? echo $data['kode_barang'];?>">delete</a></td>
</tr>
<? }?>
</tbody>
</table>

now let’s add some jquery code for edit and delete into the file. the code will do ajax for delete and edit. add this code into listbarang.php.

<script type="text/javascript">
$(function(){
 $("a.edit").click(function(){
 page=$(this).attr("href");
 $("#Formcontent").html("loading...").load(page);
 return false;
 })
 $("a.delete").click(function(){
 el=$(this);
 if(confirm("yakin ingin di hapus?"))
 {
 $.ajax({
 url:$(this).attr("href"),
 type:"GET",
 success:function(hasil)
 {
 if(hasil==1)
 {
 el.parent().parent().fadeOut('slow');
 }
 else
 {
 alert(hasil);
 }
 }
 })
 }
 return false;
 })
})
</script>

now create new file and named formbarang.php. this file is used to add new item.

<?
 $action="new";
 $status="Simpan";
 if(isset($_GET['action']) and $_GET['action']=="update" and !empty($_GET['kodebarang']))
 {
 include("koneksi.php");
 $str="select * from tbl_barang where kode_barang=".intval($_GET['kodebarang']);
 $res=mysql_query($str) or die("query gagal dijalankan");
 $data=mysql_fetch_assoc($res);
 $kode=$data['kode_barang'];
 $nama=$data['nama_barang'];
 $harga=$data['harga'];
 $action="update";
 $simpan=$action;
 $readonly="readonly=readonly";
 }
?>
<form method="post" name="formBarang" action="proses.php" id="formBarang">
<table width="400">
<tr>
<td>Kode Barang</td><td><input type="text" name="kodebarang" size="10" <? echo $readonly;?> value="<? echo $kode;?>" /></td>
</tr>
<tr>
<td>Nama Barang</td><td><input type="text" name="namabarang" size="50" value="<? echo $nama;?>" /></td>
</tr>
<tr>
<td>Harga</td><td><input type="text" name="harga" size="10" value="<? echo $harga;?>" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="<? echo $status;?>"</td>
</tr>
</table>
<input type="hidden" name="action" value="<? echo $action;?>" />

</form>

to make it work as ajax.  add this jquery code in the file.

<script type="text/javascript">
$(function(){
 $("#formBarang").submit(function(){
 $.ajax({
 url:$(this).attr("action"),
 type:$(this).attr("method"),
 data:$(this).serialize(),
 success:function(data){
 if(data==1)
 {
 $("#content").load("listbarang.php");
 }
 else
 {
 alert(data);
 }
 }
 });
 return false;
 });
})
</script>

now create a new file to handle the add, edit and delete named proses.php and write this code into the file

<?
 include("koneksi.php");
 $action=$_POST['action'];
 $kode=$_POST['kodebarang'];
 $nama=$_POST['namabarang'];
 $harga=$_POST['harga'];

 if($action=="new")
 {
 $check=mysql_query("select * from tbl_barang where kode_barang='$kode'");
 if(mysql_num_rows($check)==0)
 {

 mysql_query("insert into tbl_barang(kode_barang,nama_barang,harga) values('$kode','$nama','$harga')") or die("data gagal di insert");
 echo 1;
 }
 else
 {
 echo "kode barang sudah ada";
 }
 exit;
 }
 elseif($action=="update")
 {
 mysql_query("update tbl_barang set nama_barang='$nama',harga='$harga' where kode_barang='$kode'") or die ("data gagal di update");
 echo 1 ;
 exit;
 }
 elseif($_GET['action']=="delete")
 {
 $kode=intval($_GET['kodebarang']);
 mysql_query("delete from tbl_barang where kode_barang='$kode'")or die("data tidak berhasil di hapus");
 echo 1;
 exit;
 }

?>

finaly create an index.php file to wrap all the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Add Edit Delete ajax With Jquery</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){
 $("a.add").click(function(){
 page=$(this).attr("href")
 $("#Formcontent").html("loading...").load(page);
 return false
 })
})
</script>
<style type="text/css">
body,html
{
 font-family:Arial, Helvetica, sans-serif;
 font-size:10px;
}
</style>
</head>

<body>
<div id="Formcontent"></div>
<a href="formbarang.php?action=add">masukkan barang baru</a>
<br /><br />

<div id="content"><? include("listbarang.php");?></div>
</body>
</html>

you can download the file  here