21
Nov
09

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

About these ads

22 Responses to “Ajax Create, update and delete data with jquery and php”


  1. 1 Stevan
    December 6, 2009 at 5:13 am

    Man….I’ve been looking for this all around. Thanks for sharing….you’re my saviour…..

  2. 2 Jimson
    March 10, 2010 at 7:36 am

    Hey saviour this is g8 just i have been searching all around and making a big mess with script generators…. but in vain

    You are g8….
    thanks once again
    if you any more updates please be posting..
    or if you can pls mail me…

  3. March 18, 2010 at 4:14 am

    it’s great tutorial that I am looking for.
    thanks robi ilham :)

  4. March 23, 2010 at 3:09 am

    it’s nice tut.and I have spent a lot time to make it.I am trying do 95% the same your tut.
    thanks with your guide.and sample code.

    My 5% need your help.I want change by using checkbox that user can choose for edit or delete.

    *Delete can be choose multiple to delete.
    **Edit choose only one for edit.

    thanks.:)

  5. 5 gie
    March 27, 2010 at 9:38 am

    Wow.., thanks for the tutorial…

    What if I wanna add validation in the input form using JQuery?

    I have tried to do that, but it didn’t work at all..

    Please Help me..

    Thanx..

  6. 6 jimson
    April 1, 2010 at 7:12 am

    This code has flaws, its is not working…
    this is not updating values….
    please do find out the error,,,

  7. 8 san
    December 16, 2010 at 1:16 pm

    hi
    i checked your code found issue loading pages via jquery in chrome.
    it works fine in ff and ie but issue in chrome.can you tell us how to resolve this.
    Thanks in advance.

    santanu

  8. February 20, 2011 at 2:37 pm

    wah thx tut nya mas, salam kenal

  9. 10 Daniel
    March 11, 2011 at 9:22 am

    What the heck have you created here? It doesn’t even work, you’ve made a lot of syntax errors. Go fuck your tutorial, worthless at all.

  10. 11 obi
    March 22, 2011 at 6:19 pm

    it’s not work on me,, please help me..

  11. 12 Pathik Gandhi
    April 21, 2011 at 6:14 pm

    File not found…..

  12. July 22, 2011 at 3:14 pm

    i cannot download files please recheck attached files

  13. August 28, 2011 at 4:52 pm

    Dear Sir,

    Please attache the new file or direct new link download.
    Its really helpful for others.

    Thank you,

  14. 16 robi ilham
    October 13, 2011 at 10:48 am

    i’m sorry never update this blog..
    the file i already re upload.. (i don’t know why the file is deleted)
    i’m sorry i don’t have my own hosting to give direct download link.

    here is the new link

    http://www.ziddu.com/download/16801356/crud.rar.html

  15. 17 iwan
    February 11, 2012 at 3:28 am

    hi robi. thats good topik..

    i want to ask with you, how about if i will add automatic new text filed or another from, example
    if i clik one link, then will display new text field, and thats text field can save to db… thx

  16. 18 Deepak Raikwar
    March 10, 2012 at 9:10 am

    Your script is too gud, really thanks a lot ……..

    keet in touch dear

  17. 19 saman
    February 3, 2013 at 1:04 pm

    Thanks dood, This is the best example. Thanks for shearing.

  18. 20 Sami
    February 4, 2013 at 8:07 pm

    There is a problem whene add a new item, the blank data came with new add data, how it can solve? I have readed it more than one time, but can’t fine any error in the code.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Calendar

November 2009
M T W T F S S
« Oct   Dec »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Blog Stats

  • 30,387 hits

Category


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: