Tutorial jquery Ajax Bagian 2 (Input, Update, Delete, Animasi Loading)

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: "[email protected]&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', '[email protected]', 'Jakarta'), ('FI885245', 'Budix', '[email protected]', 'USA'), ('FI889456', 'Desrizal', '[email protected]', 'Tembagapura');

Kode HTML dan jQuery Mari kita mulai membuat kode HTML dan jQuery, buat file html, kita beri nama index.html.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<script type="text/javascript" src="jquery-1.4.3.min.js"> <script> var nik; var nama; var email; var alamat; var datanya; $(document).ready(function(){ //meloading option NIK dari database $("#nik").load("proses.php","op=ambiloption"); //jika ada event onchange ambil data dari database $("#nik").change(function(){ //ambil nilai nik dari form nik = $("#nik").val(); //tampilkan status loading dan animasinya $("#status").html("Loading..."); $("#loading").show(); //lakukan pengiriman dan pengambilan data $.ajax({ url: "proses.php", data: "op=ambildata&nik="+nik, cache: false, success: function(msg){ //karna di server pembatas setiap data adalah | //maka kita split dan akan membentuk array data = msg.split("|"); //masukkan ke masing-masing textfield $("#nama").val(data[0]); $("#email").val(data[1]); $("#alamat").val(data[2]); //hilangkan status dan animasi loading $("#status").html(""); $("#loading").hide(); } }); }); //jika tombol update diclick $("#tupdate").click(function(){

47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

//ambil nilai-nilai dari masing-masing input nik = $("#nik").val(); if(nik=="Pilih NIK"){ alert("Pilih dulu NIK"); exit(); } nama = $("#nama").val(); email = $("#email").val(); alamat = $("#alamat").val(); datanya = "&nik="+nik+"&nama="+nama+"&email="+email; datanya = datanya+"&alamat="+alamat; //tampilkan status Updating dan animasinya $("#status").html("Lagi diupdate..."); $("#loading").show(); $.ajax({ url: "proses.php", data: "op=update"+datanya, cache: false, success: function(msg){ if(msg=="sukses"){ $("#status").html("Update Berhasil..."); }else{ $("#status").html("ERROR.."); } $("#loading").hide(); } }); }); //jika tombol DEL diklik $("#tdelete").click(function(){ nik = $("#nik").val(); if(nik=="Pilih NIK"){ alert("Pilih dulu NIK"); exit(); } $("#status").html("Lagi didelete..."); $("#loading").show(); $.ajax({ url: "proses.php", data: "op=delete&nik="+nik, cache: false, success: function(msg){ if(msg=="sukses"){ $("#status").html("Delete Berhasil..."); }else{

93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138

$("#status").html("ERROR.."); } $("#nama").val(""); $("#email").val(""); $("#alamat").val(""); $("#loading").hide(); $("#nik").load("proses.php","op=ambiloption"); } }); }); //jika link Tambah Data Karyawan diklik $("#formtambah").click(function(){ $("#formnik").show(); $("#nik2").val(""); $("#nama").val(""); $("#email").val(""); $("#alamat").val(""); }); //jika tombol TAMBAH diklik $("#ttambah").click(function(){ //ambil nilai-nilai dari masing-masing input nik = $("#nik2").val(); if(nik==""){ alert("NIK belum diisi\nKlik Tambah Data Karyawan"); exit(); } nama = $("#nama").val(); email = $("#email").val(); alamat = $("#alamat").val(); datanya = "&nik="+nik+"&nama="+nama+"&email="+email; datanya = datanya+"&alamat="+alamat; $("#status").html("Lagi ditambah..."); $("#loading").show(); $.ajax({ url: "proses.php", data: "op=tambah"+datanya, cache: false, success: function(msg){ if(msg=="sukses"){ $("#status").html("Berhasil ditambah..."); }else{ $("#status").html("ERROR.."); } $("#loading").hide();

139 $("#nik").load("proses.php","op=ambiloption"); 140 $("#formnik").hide(); 141 $("#nik2").val(""); 142 } 143 }); 144 }); 145}); 146 147 148 149Nomor Induk Karyawan : 150<select id="nik"> 151
152 153Tambah Data Karyawan 154

155NIK :
156 157

158

159Nama :
160

161Email :
162

163Alamat :
164

165UPDATE 166DEL 167TAMBAH 168
169<span id="status"> 170 171 172 view plain | print | ? Kode PHP, Pemrosesan Di Sisi Server Pada kode jquery di atas, ajax melakukan request ke file proses.php 1 2 3 4 5 6


7 if($op == "ambiloption"){ 8 $option = mysql_query("SELECT nik FROM datakaryawan"); 9 echo "Pilih NIK\n"; 10 while($op = mysql_fetch_array($option)){ 11 echo "".$op['nik']."\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,-AnimasiLoading%29.drz