Jquery Ajax Part 1 by Yussan

S JQUERY AJAX :
Part 1
Level Beginer | lang : id
Oct 17th 2014
By
Yusuf A. H. / @xyussanx

Hello World
Saya adalah Yusuf Akhsan H. , dari Id-More divisi RnD(Research and Development). Id-more is
tempat berkumpulnya orang-orang yang peduli dengan perkembangan ilmu pengetahuan dan
teknologi di Indonesia, kami melakukan riset dan pengembangan teknologi di disini untuk
Indonesia khususnya dan untuk dunia umumnya.
Materi kali ini akan mebahasa bagaiman membuat sebuah web dengan metode AJAX dengan
menggunakan JQUERY yang ditunjukan untuk pemula. Pelajari teori dan prakteknya akan
mempermudah untuk belajar dengan ebook ini.
writer

Preparation
What you need before code
Download The Core
Tentu saja core yang kita butuhkan adalah JQuery sebagai framework javascriptnya, dan database
yang akan saya gunakan adalah mysql. Untuk corenya silahkan download disiini :
Download Jquery : http://code.jquery.com/jquery-2.1.1.min.js
Setelah download selesai, sekarang saatnya untuk menyalakan mesin kalian, kebutuhan web server
dan database server penulis menggunakan Apache and Mysql untuk O.S menggunakan Ubuntu tapi
untuk O.S tidak masalah menggunakan apapun, karena sifatnya web yang multi paltform 14.04, dan
Sublime Text 3 sebagai text editor and PHPMyAdmin sebagai Mysql client.
Knowing AJAX
Asynchronous Javascript and XML atau biasa disebut AJAX adalah sebuah interaksi yang
ditunjukan untuk JavaScript, browser dan web server yang memnungkinkan browser untuk
menerima response dan request yang diberikan tanpa mengganti halaman suatu web.
Keuntungan :
• memeriksa data login (username dan password) tapi masih memungkinkan user untuk
melakukan interaksi dengan halaman web.
• Menampilkan komentar secara realtime dan bisa dilihat oleh pengguna lain.
• Update data secara otomatis tanpa refresh page.
• Dengan AJAX pengguna bisa menunggu tanggapan dari request yang diberikan tapi masih
bisa melakukan interaksi lain, pendekatan seperti ini dinamakan Async(Asynchronous).
AJAX Work
Kunci utama ajax terletak di objek XMLHttpRequest. Object inilah yang memungkinkan JavaScript
mengirim informasi ke web server dan menerima tanggapan dari server.
Secara prinsip ada 5 langkah penting untuk menghasilkan AJAX ini :
1. membuat instan objek xmlhttprequest;

2. memanggil metode open() untuk menetukan permintaan ke web server.
3. Menciptakan fungsi yang menangani tanggapan dari web server.
4. Mengirim permintaan ke web server.
5. Menangani tanggapan web server.

First Code
easy load file
Untuk percobaan pertama ini adalah minta request data berupa file .txt untuk kemudian akan ,
dimasukan kedalam halaman web, proses inilah yang kemudian akan menjelasakan ke 5 prinsip
cara kerja AJAX di atas.
Siapkan 2 buah file yaitu file txt untuk menyimpan teks dan html untuk membuat tampilan web.
Silahkan isi file .txt tersebut dengan teks yang anda ingin tampilkan. Untuk file .html kita buat
strukturnya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Testing AJAX dengan JQUERY</title>
<script type=”text/javascript” src=”jquery.js”></scsript>
</head>
<body>
<div id="text">
</div>
<button>Show Text</button>
</body>
</html>
Berikut adalah previewnya
Tujuan dari bagian ini adalah, ketika pengguna tekan tombol show text, maka akan menampilkan
teks yang direquest dari note.txt.
Untuk itu ditambahkan listener untuk click event pada tag button, yang kemudian akan

mengerahkannya ke fungsi JavaScript.
<button onclick="loadTxt()">Show Text</button>
Menambahkan javascript didalam tag dan function loadTxt() <head></head>
<script type="text/javascript">
function loadTxt(){
}
</script>
Ajax menjadi sangat sederhana dengan jQuery
Tambahkan beberapa baris syntax jquery ini kedalam fungsi loadTxt.
$('#text').load('note.txt');
Penjelasan dari $('#text).. adalah object yang akan dimanipulasi adalah yang memiliki id=txt (# =
id), dan yang memiliki didalam html ini tag <div></div>. Maka ketika fungsi dijalankan id=text
akan diisi dengan teks yang berasalah dari note.txt.

Second Code
Web Server Request and Response
Dilatihan sebelumnya kita berhasil request file txt untuk kemudian responnya berupa isi dari file txt
tersebut dimasukan kedalam <div> yang mempunyai id=txt. Untuk Second Code ini akan dilakukan
bagaiman memberikan request dan menerima response dari web server untuk kemudian diproses
web lebih lanjut.
Response Web Server
Sebelum berjalan lebih jauh mari mengenal terlebih dahulu beberapa response code yang diberikan
oleh web server.
Kode Keterarangan
200 Success
301 Moved permanent
302 Move temporaly
400 Permintaan salah
401 Unauthorized
402 Forbidden
404 Not found
500 Kesalahan Server
Request Web Server
Request di webserver bisa kita bedakan menjadi 2 yaitu GET dan POST, masing-masing request
tersebut memiliki keuntungan dan kelemahan masing-masing.
Menggunakan GET, maka parameter yang digunakan untuk melakukan request ke server akan
ditampilkan di urlbar, hal inilah yang kemudian disebut sebagai kelemahan metode GET sehingga
GET tidak cocok untuk mengirimkan data sensitif berupa pasword, nomor kredit ataupun hal
lainnya. Disamping kelemahan tersebut method GET memungkinkan untuk dibookmark karena
parameter yang terletak di urlnya.
Method GET lebih cocok digunakanuntuk mengirimkan data sensitif seperti password, nomor kartu
kredit atau lainnya, karena sisi pengirimnya yang dilakukan di server dan tidak bisa dilihat melalui
citra visual. Untuk mengirimkan data ke server dengan method POST ini haruslah melalui sebuah
form terlebih dahulu yang membuat pembuatannya tidak secepat menggunakan method GET dan

inilah yang menjadikan kelemahan method POST.
CASE
Untuk latihan koding pada materi AJAX jQuery part 1 adalah gudang. Kegunaan AJAX antara lain
untuk :
• Cek apakah no seri barang sudah ada di gudang
• menampilkan barang di gudang
• Pencarian cepat
• tambah, update dan delete barang di gudang
Untuk memulai beberapa hal yang perlu disiapkan adalah :
• database gudang
• backend (.PHP)
• frontend + AJAX
*) semua latihan disini adalah menggunakan web dan database server jadi pastikan web dan
database server anda sudah berjalan dengan baik
CREATE DATABASE
Langsung saja kita mulai untuk membuat database, disini kita hanya membuat layanan langsung
kegudang tanpa authorisasi, jadi kita hanya memerlukan 1 buah tabel yaitu tabel gudang, dengan
struktur sebagai berikut.
Nama Database : id+more_gudang_ajax1
Tabel gudang :
kode (PK) INT
nama Varchar(20)
stok INT
waktu_update Timestamp
Atau gunakan query dibawah ini :
CREATE DATABASE IF NOT EXISTS `id+more_gudang_ajax1` DEFAULT CHARACTER SET
latin1 COLLATE latin1_swedish_ci;
USE `id+more_gudang_ajax1`;
Table
structure for table `gudang`

CREATE
TABLE IF NOT EXISTS `gudang` (
`kode` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(20) NOT NULL,
`stok` int(11) NOT NULL,
`waktu_update` decimal(10,0) NOT NULL,
PRIMARY KEY (`kode`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Hingga seperti inilah struktur daru tabel barang
UPDATE DIRECTORY AND FILE STRUCTURE
Dibagian ini akan kita tambahkan beberapa file .php yang digunakan untuk backendnya. Beberapa
fungsinya bisa berupa koneksi database, perintah CRUD dan menampilkan data.
CREATE DATABASE CONNECTION (database.php)
Untuk membuat koneksi ke database file yang kita ubah adalah database.php , file tersebut akan
dipanggil disetiap file .php agar bisa membaca data yang ada didatabase.
<?php
$host = '127.0.0.1';
$user = 'root';
$pass = '';
$database = 'id+more_gudang_ajax1';
mysql_connect($host,$user,$pass);
mysql_select_db($database);
?>

CREATE SHOW (show.php + home.html)
Tugas dari file show.php ini adalah untuk menampilkan barang yang ada didatabase gudang untuk
kemudian direquest oleh AJAX di loadtxt.html dan ditampilkannya.
Isi Data
Sebelum menampilkan data, yang kita lakukan pertama tentu adalah mengisi data. Untuk itu
silahkan isi data ke tabel gudang sebelum proses lebih lanjut.
Pastikan memasukan konfigurasi untuk koneksi database yang ada di database.php kedalam
show.php .
File show.php
<?php
require_once('database.php');
$sql = "SELECT * FROM gudang ORDER BY waktu_update DESC";
$query = mysql_query($sql);
echo "<table>";
echo "<tr>
<th>No</th>
<th>Kode</th>
<th>Nama</th>
<th>Stok</th>
<th>Update</th>
<th></th>
</tr>";
$i = 1;
while($result = mysql_fetch_assoc($query) ){
echo "<tr>";
echo "<td>".$i."</td>";
echo "<td>".$result['kode']."</td>";
echo "<td>".$result['nama']."</td>";
echo "<td>".$result['stok']."</td>";
echo "<td>".$result['waktu_update']."</td>";
echo "<td><button>hapus</button><button>edit</button></td>";
echo "<tr>";
$i++;
}
echo "</table>";
?>

Didalam file show.php ini kita menampilkan hasil query select semua barang digudang dengan
order berdasarkan waktu paling awal berada didepan. Cek apakah home.php sudah berjalan dengan
baik menggunakan browser.
Tahap backend pertama sudah selesai, untuk selanjutnya akan kita buat AJAX yang akan mengirim
request dan response yang kita taruh didalam file home.html.
File home.html
Didalam file ini silahkan menambaha tag html dari pembuka sampai penutup, persis seperti yang
biat di loadtxt.html pada latihan sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Testing AJAX dengan JQUERY</title>
<style type="text/css">
#barang{width:700px;margin:0 auto;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</script>
</head>
<body>
<center><h1>Data Barang<h1></center>
<div id="barang">
</div>
</body>
</html>
Langkah yang akan dibuat adalah load data yang ada di show.php untuk diload secara otomatis
menggunakan AJAX ketika user membuka file home.html.
*)penggunaan jquery akan memperingkas dan mempercepat koding javascript daripada
membuatnya secara manual
Pertama adalah membuat listener yang berfungsi menjalankan perintah javascript ketika halaman
diload
$(document).ready(function(){
...
});

</script>
Silahkan ganti … dengan perintah AJAX dibawah ini :
$('#barang').html('<i>loading barang...</i>');
$.ajax({
url:'show.php',
success:function(response){
$('#barang').html(response);
},
error:function(){
alert('gagal request data');
}
});
});
Penjelasan :
maksud baris $('#barang').html('<i>loading barang...</i>'); , sambil menunggu proses request dan
response oleh ajax, maka <div id =”barang”> diisini dengan tag <i>loading barang...</i>, pesan
loading.
Ajax mulai berjalan setelah $.ajax({});
url: menunjukan destinasi kemana request akan dituju
success : jika response codenya 404 atau sukses maka bagian inilah yang akan dieksekusi. Dibagian
function(response) menggunakan parameter response yang berisi hasil dari response dari request
yang dikirim. Jika anda menggunakan Google Chrome, maka anda bisa melihat response dengan
cara :
klik kanan dimanapun → inspect element → tab network → silahkan refresh pagenya :
pilih file home.php
dan inilah responsenya

hasil response berupa tampilan html tersebut akan dimasukan kedalam <div id=”barang”>
menggunakan fungsi bawaan jQuery .html().

Third Code
Add
Data sudah tampil, kini langkah berikutnya adalah membuat AJAX untuk menambah barang,
seberapa mudah kah.
Backend
Sisi backend adalah yang akan kita buat pertama kali, semua perintah untuk tambah, hapus dan edit
barang terletak di satu file yaitu crud.php
*) dalam file crud.php dibuat beberapa kondisi untuk membedakan penerimaan request yang
akan diberikan oleh AJAX
file crud.php
<?php
require_once('database.php');
if(!empty($_GET)){
} else {
echo "kesalahan request";
}
?>
untuk membedakan apakah akan menjalankan create, update atau delete digunakan method GET.
Kondisi pertama jika terjadi request GET di crud, kondisi kedua jika tidak ada request GET di
crud.php.
if(!empty($_GET)){
switch ($_GET['act']) {
case 'add':
# code...
break;
case 'edit':
# code...
break;
case 'delete':
# code...
break;
default:
echo "kesalahan request";
break;
}
} else {
Baris diatas menjelaskan kita akan mengirim get dengan parameter act. crud.php?act=..., switch

menjelaskan apakah isi parameter act tersebut untuk menentukan action apa yang akan diberika.
Act = add
case 'add':
$kode = $_POST['inputKode'];
$nama = $_POST['inputNama'];
$stok = $_POST['inputStok'];
$sql = "INSERT INTO gudang(kode,nama,stok) VALUES(".$kode.",".
$nama.",".$stok.",)";
mysql_query($sql);
break;
Pertama kita buat action ketika user melakukan penambahan barang. Untuk mengirimkan value
berupa kode, nama, stok barang yangakan ditambahkan menggunkan method POST karena ini
merupakan salah satu data yang riskan.
Dari value yang didapatkan menggunakan method POST langkah selanjutnya adalah eksekusi
perintah insert ke tabel gudang.
Front End
Backend sudah selesai, kini kita kembali ke file home.html untuk pembuatan form insert barang.
Buat <div id=”add”></div> diatas <div id=”barang”> untuk kita isi dengan form insert barang.
<div id="add">
<span>Kode : </span><input id="inputKode" type="number"
min="0"><br/>
<span>Nama : </span><input id="inputName" type="text"><br/>
<span>Stok : </span><input id="inputStok" type="number"
min="0"><br/>
<button onclick="tambahBarang()">Tambah Barang</button>
<br/>
<br/>
</div>
Disini kita tidak membuat tag <form> karena pengiriman mengguna ajax, jadi cara kerjanya value
yang dikirimkan melalui input akan disimpan kedalam vartiable JavaScript untuk kemudian
diproses menggunakan AJAX.
Tambahkan fungsi tambahBarang() kedalam JavaScript tagnya :
function tambahBarang(){
kode = $('#inputKode').val();
nama = $('#inputName').val();
stok = $('#inputStok').val();
$.ajax({
type:'POST',
url:'crud.php?act=add',
timeout:5000,
data:{inputKode:kode,inputNama:nama,inputStok:stok},
success:function(){
$.ajax({

url:'show.php',
},
error:function(){
}
});
},
error:function(){
alert('gagal memasukan data');
}
});
$('#inputKode').val()='';
$('#inputName').val()='';
$('#inputStok').val()='';
}
Cara kerja dari fungsi tambahBarang() adalah value yang diinputkan di input akan disimpan
kedalam variabel JavaScript untuk kemudian dikirim menggunakan method POST ke crud.php dan
menjalankan query insert ke database.
Berikut penjelasan dari baris-baris ajax tersebut
Kode = $('#inputKode').val(); mengambil value yang dituliskan di input yang mempunyai
id=indputKode, value dari input tersebut kemudian dimasukan kedalam variabel kode
didalam $.ajax({}); bisa kita lihat beberapa parameter sebagai berikut :
type :'POST', adalah method yang digunakan untuk mengirimkan data, defaultnya adalah GET jika
parameter ini tidak diisi.
url:'crud.php?act=add', url tujuan pengiriman request.
data:{inputKode:kode,inputNama:nama,inputStok:stok}, parameter yang dikirim menggunakan
method POST untuk kemudian di proses di file PHPnya.
Ketika responsenya berupa success: maka kemabli menggunakan AJAX yang sama digunakan
untuk load data ketika pertama kali membuka halaman.

Fouth Code
Create Show() Function
Tujuan dari pembuatan fungsi show() ini adalah untuk meringkas pemanggilan data didatabase,
karena pemanggilan ini akan terus dilakukan ketika proses CRUD data. Untuk buat fungsi show()
dengan isi sebagai berikut.
function show(){
$.ajax({
url:'show.php',
},
error:function(){
}
});
}
Untuk kemudian silahkan ganti baris ajax yang digunakan untuk menampilkan data dengan fungsi
show();
show();
});
dan
function tambahBarang(){
kode = $('#inputKode').val();
nama = $('#inputName').val();
stok = $('#inputStok').val();
$.ajax({
type:'POST',
url:'crud.php?act=add',
timeout:5000,
data:{inputKode:kode,inputNama:nama,inputStok:stok},
success:function(){
show();
},
error:function(){
alert('gagal memasukan data');
}
});
$('#inputKode').val()='';
$('#inputName').val()='';
$('#inputStok').val()='';

Fifth Code
Delete
Front-end
crud.php
Kembali ke crud.php sekarang kita fikus pada case 'delete':. Crud akan menerima kode dari
barang yang akan dihapus, untuk kemudian query akan mengeksekusi penghapusan barang
berdasarkan kode barang tersebut.
case 'delete':
$kode = $_POST['inputKode'];
$sql = "DELETE FROM gudang WHERE kode = ".$kode."";
mysql_query($sql);
break;
default:
show.php
kok kembali ke show.php lagi, karena kita buat button action untuk Ajaxnya. Ketika button delete
diklik maka akan mengeksekusi fungsi Javascript dengan menggunakan kodebarang sebagai
parameternya. Modifikasi button hapus menajdi seperti ini.
...echo "<td><button onclick='hapus(".$result['kode'].")'>hapus</button>...
home.html
function hapus(x){
sure = confirm('Are You Sure!');
if(sure == true){
$.ajax({
type:'POST',
url:'crud.php?act=delete',
timeout:5000,
data:{inputKode:x},
success:function(){
show();
},
error:function(){
alert('gagal hapus data');
}
});
}
}
sure = confirm('Are You Sure!'); akan menampilkan corfirmation box untuk memberikan kita
instruksi apakah akan melanjutkan perintah.

Jika kita tekan ok maka berarti nilai dari variabel sure = true. Sehingga menjalankan baris yang
ada didalamnya. Mengirimkan request method POST untuk di eksekusi di crud.php?act=delete.

Sixth Code
Edit View
Untuk membuat view ada 2 step yang kita buat. Step pertama adalah menampilkan data yang akan
diedit kedalam sebuah input untuk diubah oleh user dan diproses oleh crud.php?act=update.
Yang pertama kita buat adalah membuat Edit Viewnya : membuat query untuk menampilkan barang
berdasarkan kode barang kedalam input.
Crud.php
Untuk hal tersebut dibuatlah case baru yaitu updateview yang berisi query untuk menampilkan
detail barang dalam bentuk form.
case 'editview':
$kode = $_GET['kode'];
$sql = "SELECT * FROM gudang WHERE kode = ".$kode;
$query = mysql_query($sql);
while($result = mysql_fetch_assoc($query)){
echo '
<input id="updateKode" type="hidden" min="0" value="'.
$result['kode'].'"><br/>
<span>Nama : </span><input id="updateName" type="text"
value="'.$result['nama'].'"><br/>
<span>Stok : </span><input id="updateStok" type="number"
value="'.$result['stok'].'" min="0"><br/>
<button onclick="updateBarang('.$result['kode'].')">edit
Barang</button>
<br/>
<br/>
';
}
break;
Dari baris diatas crud.php?act=editview akan menerima parameter kode yang dikirim menggunakan
method GET untuk dimasukan kedalam query select barang.
Show.php
Melakukan penambahkan onclik pada button edit yaitu editview(kodebarang).
...<button onclick='editview(".$result['kode'].")'>edit</button>...
Home.html
menambakan function editview(x); mengirimkan request ke crud.php?act=editview, response akan
merubah tampilan list barang menjadi tampilan form seperti pada gambar dibawah.

Last Code
Edit Processor
Dari tampilan edit yang sudah dibuat sebelumnya dibuatlah prosessor untuk menerima inputnya dan
melakukan query update ke tabel barang.
Front-end
Crud.php
Ini adalah case terakhir yang akan kita buat , tepatnya pada case 'edit': , akan menerima kode, nama
baru, dan stok baru yang akan dijadikan parameter untuk update data di database.
case 'edit':
$kode = $_POST['updateKode'];
$nama = $_POST['updateNama'];
$stok = $_POST['updateStok'];
$sql = "UPDATE gudang SET nama='".$nama."',stok=".$stok." WHERE
kode=".$kode;
mysql_query($sql);
break;
Home.php
function updateBarang(x){
barang = $('#updateName').val();
stok = $('#updateStok').val();
$.ajax({
type:'POST',
url:'crud.php?act=edit',
timeout:5000,
data:
{updateKode:x,updateNama:barang,updateStok:stok},
success:function(){
show();
},
error:function(){
alert('gagal edit data');
}
});
}
Menggunakan parameter x yaitu kodebarang yang didapat dari hasil while di show.php maka update
dengan AJAX bisa diselesaikan.

Closing
Penulis sangat menunggu kritik dan saran dari pembaca semua demi terciptanya ebook yang lebih
baik dilain hari. Jika pembaca mempunyai masalah untuk memahami e-book ini silahakan kirim
semua pertanyaan kepada penulis. Kritik,saran dan pertanyaan penulis tunggu melalui twitter
@xyussanx.
Terimakasih

Jquery Ajax Part 1 by Yussan

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Jquery Ajax Part 1 by Yussan

Similar to Jquery Ajax Part 1 by Yussan (20)

Jquery Ajax Part 1 by Yussan