Scribd
Unggah
362 tayangan10 halaman

Tutorial Jquery Ajax

Tulisan ini membahas tutorial jQuery Ajax dengan fokus pada: 1. Penggunaan fungsi load() untuk mengambil data dari server dan menampilkannya di elemen HTML 2. Contoh pemanggilan file PHP dan pengiriman parameter menggunakan metode GET 3. Penjelasan fungsi jQuery.ajax() dan beberapa parameter pentingnya

Diunggah oleh

Akhfal Itoe Ichul
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
362 tayangan10 halaman

Tutorial Jquery Ajax

Tulisan ini membahas tutorial jQuery Ajax dengan fokus pada: 1. Penggunaan fungsi load() untuk mengambil data dari server dan menampilkannya di elemen HTML 2. Contoh pemanggilan file PHP dan pengiriman parameter menggunakan metode GET 3. Penjelasan fungsi jQuery.ajax() dan beberapa parameter pentingnya

Diunggah oleh

Akhfal Itoe Ichul
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

Tutorial jQuery Ajax Bagian 1

14:25 02 Sep 2010 @Ajax

Pada tulisan sebelumnya mengenai Pengenalan jQuery, kita telah mengenal apa dan bagaimana jquery. Saatnya kita mempelajari lebih lanjut bagaimana membuat aplikasi Ajax menggunakan jQuery. Library jQuery mempunyai fungsi-fungsi khusus untuk pembuatan Ajax. Dengan menggunakan jQuery, kita dapat melakukan request data TXT, HTML, XML, PHP bahkan JSON dari server menggunakan metode GET atau POST. Salah satu fungsi yang disediakan oleh jQuery yang berkaitan dengan Ajax adalah fungsi load(). Fungsi load() berfungsi untuk mengambil data dari server dan menempatkannya ke dalam elemen HTML. Sintaks :
$(selector).load(url,data,callback)

Parameter url adalah alamat atau nama file di server yang akan kita ambil atau panggil Parameter data bersifat opsional, adalah pasangan key dan value yang dikirim ke server. Parameter callback bersifat opsional, adalah fungsi yang dieksekusi jika data diambil. Contoh : Misal kita punya file data.txt, yang isinya :
Hai ini adalah konten dari file data.txt

Lalu kita buat kode ajax untuk me-load konten dari data.txt, berikut contoh kode contohload.html 1 <html> 2 <head> 3 <script type="text/javascript" src="jquery.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $("#tombol").click(function(){ 7 $('#teks').load('data.txt'); 8 }); 9 10}); 11</script> 12</head> 13<body> 14<div id="teks"> 15 16</div>

17<button id="tombol" type="button">Klik Ini</button> 18</body> 19</html> view plain | print | ? Dari contoh di atas, pertama-tama kita ambil file jquery.js dapat kamu download di www.jquery.com atau di sini. Apabila kita mengklik tombol Klik Ini, maka akan segera menjalankan fungsi load file data.txt dan memasukkannya ke dalam innerHTML <div id=teks>. Sekarang mari kita lihat contoh jika memanggil file berupa PHP dan mengirim kan beberapa data atau parameter untuk diolah di sisi server. contohload2.html 1 <html> 2 <head> 3 <script type="text/javascript" src="jquery.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $("#tombol").click(function(){ 7 $('#teks').load("data.php","nama=desrizal&[email protected]",beritahu()); 8 }); 9 }); 10 11function beritahu(){ 12 alert("sudah diambil datanya"); 13} 14</script> 15</head> 16<body> 17<div id="teks"> 18 19</div> 20<button id="tombol" type="button">Click Me</button> 21</body> 22</html> view plain | print | ? Pada contoh di atas kita melakukan request ke server untuk memanggil file PHP data.php dan mengirimkan parameter-parameter dan nilainya dengan metode GET. Kemudian meng-eksekusi fungsi beritahu(). Berikut kode PHP data.php 1<?php

2echo "Anda mengirim parameter nama dengan nilai : <b>".$_GET['nama']."</b> <p>"; 3echo "Email : <b>".$_GET['email']."</b>."; 4?>

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 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 <html> <head><title>Ajax jQuery by Desrizal</title> <script type="text/javascript" src="jquery-1.4.3.min.js"> </script> <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("");

40 41 42 43 44 45 46 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

$("#loading").hide(); } }); }); //jika tombol update diclick $("#tupdate").click(function(){ //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({

86 87 88 89 90 91 92 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

url: "proses.php", data: "op=delete&nik="+nik, cache: false, success: function(msg){ if(msg=="sukses"){ $("#status").html("Delete Berhasil..."); }else{ $("#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,

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?>

Anda mungkin juga menyukai