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
Man….I’ve been looking for this all around. Thanks for sharing….you’re my saviour…..
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…
it’s great tutorial that I am looking for.
thanks robi ilham 🙂
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.:)
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..
This code has flaws, its is not working…
this is not updating values….
please do find out the error,,,
it is work fine on me..
what is the error?
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
wah thx tut nya mas, salam kenal
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.
it’s not work on me,, please help me..
File not found…..
i cannot download files please recheck attached files
Dear Sir,
Please attache the new file or direct new link download.
Its really helpful for others.
Thank you,
check the new link 🙂
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
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
Your script is too gud, really thanks a lot ……..
keet in touch dear
Thanks dood, This is the best example. Thanks for shearing.
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.