Tutorial jquery Ajax Bagian 2 (Input, Update, Delete, Animasi Loading) 17:08 20 Oct 2010 @Ajax Pada artikel sebelumnya kita telah belajar dan mengenal jquery dan penggunaan fungsi load() di Tutorial jquery Ajax Bagian 1. Sekarang kita lanjutkan tutorial ajax jquery, yaitu bagaimana menginput, mengupdate, mendelete data di database, kemudian bagaimana caranya menampilkan animasi loading ajax menggunakan jquery. Di sini kita akan mempelajari fungsi jquery.ajax() Sekarang mari kita mulai membuat kode-kodenya jquery.ajax() Sintaks : $.ajax(settingan) Fungsi : untuk melakukan asynchronous HTTP (Ajax) request. Berikut adalah beberapa settingan penting untuk fungsi $.ajax() type Yaitu tipe metode request data, yaitu POST atau GET, defaultnya adalah GET url String yang merupakan URL atau file di server, tujuan kita mengirim request data Data yang ingin kita kirim ke server untuk diproses, cara penulisannya "data1=value1&data2=value2"
cache Bisa bernilai true atau false. Jika bernilai false, data yang direquest tidak akan dicache oleh browser success Fungsi yang kita jalankan jika request telah sukses dijalankan Untuk settingan lainnya bisa dilihat di http://api.jquery.com/category/ajax/ Contoh : $.ajax({ url: "proses.php", data: "nama=desrizal&email=desrizal@yahoo.com&sex=male", cache: false, success: function(msg){ $("#teks").html(msg); } }); Aplikasi Input, Update dan Delete Sekarang mari kita buat aplikasi sederhana menggunakan jquery dan PHP untuk pemrosesan di sisi server. Pada contoh-contoh yang akan saya berikan, kita akan banyak menggunakan fungsifungsi jquery seperti val(), html(), show(), hide() dan lainnya. Untuk tutorial mengenai fungsi tersebut, silahkan baca di pengenalan jquery. Pada contoh berikut kita akan membuat aplikasi data karyawan Struktur Tabel datakaryawan di MySQL Pertama mari kita buat dulu tabel datakaryawan di database MySQL CREATE TABLE `datakaryawan` ( `nik` varchar(10) NOT NULL, `nama` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `alamat` varchar(200) NOT NULL, PRIMARY KEY (`nik`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `datakaryawan` (`nik`, `nama`, `email`, `alamat`) VALUES ('FI786578', 'Bagaskara Antara', 'bagas@yahoo.com', 'Jakarta'), ('FI885245', 'Budix', 'budi@gmail.com', 'USA'), ('FI889456', 'Desrizal', 'drz@desrizal.com', 'Tembagapura'); Kode HTML dan jquery Mari kita mulai membuat kode HTML dan jquery, buat file html, kita beri nama index.html.
1 <html> 2 <head><title>ajax jquery by Desrizal</title> 3 <script type="text/javascript" src="jquery-1.4.3.min.js"> 4 </script> 5 <script> 6 var nik; 7 var nama; 8 var email; 9 var alamat; 10 var datanya; 11 $(document).ready(function(){ 12 //meloading option NIK dari database 13 $("#nik").load("proses.php","op=ambiloption"); 14 15 //jika ada event onchange ambil data dari database 16 $("#nik").change(function(){ 17 //ambil nilai nik dari form 18 nik = $("#nik").val(); 19 20 //tampilkan status loading dan animasinya 21 $("#status").html("loading..."); 22 $("#loading").show(); 23 24 //lakukan pengiriman dan pengambilan data 25 $.ajax({ 26 url: "proses.php", 27 data: "op=ambildata&nik="+nik, 28 cache: false, 29 success: function(msg){ 30 //karna di server pembatas setiap data adalah 31 //maka kita split dan akan membentuk array 32 data = msg.split(" "); 33 34 //masukkan ke masing-masing textfield 35 $("#nama").val(data[0]); 36 $("#email").val(data[1]); 37 $("#alamat").val(data[2]); 38 //hilangkan status dan animasi loading 39 $("#status").html(""); 40 $("#loading").hide(); 41 } 42 }); 43 }); 44 45 //jika tombol update diclick 46 $("#tupdate").click(function(){
47 //ambil nilai-nilai dari masing-masing input 48 nik = $("#nik").val(); 49 if(nik=="pilih NIK"){ 50 alert("pilih dulu NIK"); 51 exit(); 52 } 53 nama = $("#nama").val(); 54 email = $("#email").val(); 55 alamat = $("#alamat").val(); 56 datanya = "&nik="+nik+"&nama="+nama+"&email="+email; 57 datanya = datanya+"&alamat="+alamat; 58 //tampilkan status Updating dan animasinya 59 $("#status").html("lagi diupdate..."); 60 $("#loading").show(); 61 $.ajax({ 62 url: "proses.php", 63 data: "op=update"+datanya, 64 cache: false, 65 success: function(msg){ 66 if(msg=="sukses"){ 67 $("#status").html("update Berhasil..."); 68 }else{ 69 $("#status").html("error.."); 70 } 71 $("#loading").hide(); 72 } 73 }); 74 }); 75 76 //jika tombol DEL diklik 77 $("#tdelete").click(function(){ 78 nik = $("#nik").val(); 79 if(nik=="pilih NIK"){ 80 alert("pilih dulu NIK"); 81 exit(); 82 } 83 $("#status").html("lagi didelete..."); 84 $("#loading").show(); 85 $.ajax({ 86 url: "proses.php", 87 data: "op=delete&nik="+nik, 88 cache: false, 89 success: function(msg){ 90 if(msg=="sukses"){ 91 $("#status").html("delete Berhasil..."); 92 }else{
93 $("#status").html("error.."); 94 } 95 $("#nama").val(""); 96 $("#email").val(""); 97 $("#alamat").val(""); 98 $("#loading").hide(); 99 $("#nik").load("proses.php","op=ambiloption"); 100 } 101 }); 102 }); 103 104 //jika link Tambah Data Karyawan diklik 105 $("#formtambah").click(function(){ 106 $("#formnik").show(); 107 $("#nik2").val(""); 108 $("#nama").val(""); 109 $("#email").val(""); 110 $("#alamat").val(""); 111 }); 112 113 //jika tombol TAMBAH diklik 114 $("#ttambah").click(function(){ 115 //ambil nilai-nilai dari masing-masing input 116 nik = $("#nik2").val(); 117 if(nik==""){ 118 alert("nik belum diisi\nklik Tambah Data Karyawan"); 119 exit(); 120 } 121 nama = $("#nama").val(); 122 email = $("#email").val(); 123 alamat = $("#alamat").val(); 124 datanya = "&nik="+nik+"&nama="+nama+"&email="+email; 125 datanya = datanya+"&alamat="+alamat; 126 $("#status").html("lagi ditambah..."); 127 $("#loading").show(); 128 $.ajax({ 129 url: "proses.php", 130 data: "op=tambah"+datanya, 131 cache: false, 132 success: function(msg){ 133 if(msg=="sukses"){ 134 $("#status").html("berhasil ditambah..."); 135 }else{ 136 $("#status").html("error.."); 137 } 138 $("#loading").hide();
139 $("#nik").load("proses.php","op=ambiloption"); 140 $("#formnik").hide(); 141 $("#nik2").val(""); 142 } 143 }); 144 }); 145}); 146</script> 147</head> 148<body> 149Nomor Induk Karyawan : 150<select id="nik"></select> 151<br> 152<a id="formtambah" style="cursor:pointer;color:red"> 153<u>Tambah Data Karyawan</u></a> 154<p style="display:none" id="formnik"> 155NIK :<br> 156<input type="text" id="nik2"> 157</p> 158<p> 159Nama :<br> 160<input type="text" id="nama"><p> 161Email :<br> 162<input type="text" id="email"><p> 163Alamat :<br> 164<input type="text" id="alamat" size="30"><p> 165<button id="tupdate">update</button> 166<button id="tdelete">del</button> 167<button id="ttambah">tambah</button> 168<br> 169<span id="status"></span> 170<img src="loading.gif" id="loading" style="display:none"> 171</body> 172</html> view plain print? Kode PHP, Pemrosesan Di Sisi Server Pada kode jquery di atas, ajax melakukan request ke file proses.php 1 <?php 2 mysql_connect("localhost","root",""); 3 mysql_select_db("test"); 4 5 $op = $_GET['op']; 6
7 if($op == "ambiloption"){ 8 $option = mysql_query("select nik FROM datakaryawan"); 9 echo "<option>pilih NIK</option>\n"; 10 while($op = mysql_fetch_array($option)){ 11 echo "<option>".$op['nik']."</option>\n"; 12 } 13}else if($op == "ambildata"){ 14 $nik = $_GET['nik']; 15 $data = mysql_query("select * FROM datakaryawan WHERE nik='$nik'"); 16 $d = mysql_fetch_array($data); 17 echo $d['nama']." ".$d['email']." ".$d['alamat']; 18}else if($op == "update"){ 19 $nik = $_GET['nik']; 20 $nama = htmlspecialchars($_get['nama']); 21 $email = htmlspecialchars($_get['email']); 22 $alamat = htmlspecialchars($_get['alamat']); 23 $update = mysql_query("update datakaryawan 24 SET nama='$nama', 25 email='$email', 26 alamat='$alamat' 27 WHERE nik='$nik'"); 28 if($update){ 29 echo "sukses"; 30 }else{ 31 echo "error"; 32 } 33}else if($op == "delete"){ 34 $nik = $_GET['nik']; 35 $del = mysql_query("delete FROM datakaryawan WHERE nik='$nik'"); 36 if($del){ 37 echo "sukses"; 38 }else{ 39 echo "error"; 40 } 41}else if($op == "tambah"){ 42 $nik = $_GET['nik']; 43 $nama = htmlspecialchars($_get['nama']); 44 $email = htmlspecialchars($_get['email']); 45 $alamat = htmlspecialchars($_get['alamat']); 46 $tambah = mysql_query("insert INTO datakaryawan 47 VALUES('$nik','$nama','$email','$alamat')"); 48 if($tambah){ 49 echo "sukses"; 50 }else{ 51 echo "ERROR"; 52 }
53} 54?> http://blog.codingwear.com/read24-tutorial-jquery-ajax-bagian-2-%28input,-update,-delete,-animasi- Loading%29.drz