jquery ajax part 1 by yussan

S

JQUERY AJAX : Part 1

Oct 17th 2014By Yusuf A. H. / @xyussanx

Level Beginer | lang : id

Hello World

Saya adalah Yusuf Akhsan H. , dari Id-More divisi RnD(Research and Development). Id-more istempat berkumpulnya orang-orang yang peduli dengan perkembangan ilmu pengetahuan danteknologi di Indonesia, kami melakukan riset dan pengembangan teknologi di disini untukIndonesia khususnya dan untuk dunia umumnya.

Materi kali ini akan mebahasa bagaiman membuat sebuah web dengan metode AJAX denganmenggunakan JQUERY yang ditunjukan untuk pemula. Pelajari teori dan prakteknya akanmempermudah untuk belajar dengan ebook ini.

writer

PreparationWhat you need before code

Download The CoreTentu saja core yang kita butuhkan adalah JQuery sebagai framework javascriptnya, dan databaseyang 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 serverdan database server penulis menggunakan Apache and Mysql untuk O.S menggunakan Ubuntu tapiuntuk O.S tidak masalah menggunakan apapun, karena sifatnya web yang multi paltform 14.04, danSublime Text 3 sebagai text editor and PHPMyAdmin sebagai Mysql client.

Knowing AJAXAsynchronous Javascript and XML atau biasa disebut AJAX adalah sebuah interaksi yangditunjukan untuk JavaScript, browser dan web server yang memnungkinkan browser untukmenerima 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 WorkKunci utama ajax terletak di objek XMLHttpRequest. Object inilah yang memungkinkan JavaScriptmengirim 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 Codeeasy 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 CodeWeb Server Request and Response

Dilatihan sebelumnya kita berhasil request file txt untuk kemudian responnya berupa isi dari file txttersebut dimasukan kedalam <div> yang mempunyai id=txt. Untuk Second Code ini akan dilakukanbagaiman memberikan request dan menerima response dari web server untuk kemudian diprosesweb lebih lanjut.

Response Web Server

Sebelum berjalan lebih jauh mari mengenal terlebih dahulu beberapa response code yang diberikanoleh 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 requesttersebut memiliki keuntungan dan kelemahan masing-masing.

Menggunakan GET, maka parameter yang digunakan untuk melakukan request ke server akanditampilkan di urlbar, hal inilah yang kemudian disebut sebagai kelemahan metode GET sehinggaGET tidak cocok untuk mengirimkan data sensitif berupa pasword, nomor kredit ataupun hallainnya. Disamping kelemahan tersebut method GET memungkinkan untuk dibookmark karenaparameter 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.

CASEUntuk 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 dandatabase server anda sudah berjalan dengan baik

CREATE DATABASELangsung 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 STRUCTUREDibagian 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 itusilahkan isi data ke tabel gudang sebelum proses lebih lanjut.

Pastikan memasukan konfigurasi untuk koneksi database yang ada di database.php kedalamshow.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 denganorder berdasarkan waktu paling awal berada didepan. Cek apakah home.php sudah berjalan denganbaik menggunakan browser.

Tahap backend pertama sudah selesai, untuk selanjutnya akan kita buat AJAX yang akan mengirimrequest 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 yangbiat 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 type="text/javascript"> </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

<script type="text/javascript"> $(document).ready(function(){

... });

</script>

Silahkan ganti … dengan perintah AJAX dibawah ini :

$(document).ready(function(){ $('#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 danresponse 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. Dibagianfunction(response) menggunakan parameter response yang berisi hasil dari response dari requestyang dikirim. Jika anda menggunakan Google Chrome, maka anda bisa melihat response dengancara :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 CodeAdd

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 yangakan 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 = addcase '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 valueberupa kode, nama, stok barang yangakan ditambahkan menggunkan method POST karena inimerupakan salah satu data yang riskan.

Dari value yang didapatkan menggunakan method POST langkah selanjutnya adalah eksekusiperintah 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 valueyang dikirimkan melalui input akan disimpan kedalam vartiable JavaScript untuk kemudiandiproses menggunakan AJAX.

Tambahkan fungsi tambahBarang() kedalam JavaScript tagnya :

function tambahBarang(){$('#barang').html('<i>loading barang...</i>');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',success:function(response){

$('#barang').html(response);},error:function(){

alert('gagal request data');}

});},error:function(){

alert('gagal memasukan data');}

});$('#inputKode').val()='';$('#inputName').val()='';$('#inputStok').val()='';

}

Cara kerja dari fungsi tambahBarang() adalah value yang diinputkan di input akan disimpankedalam variabel JavaScript untuk kemudian dikirim menggunakan method POST ke crud.php danmenjalankan query insert ke database.

Berikut penjelasan dari baris-baris ajax tersebut

Kode = $('#inputKode').val(); mengambil value yang dituliskan di input yang mempunyaiid=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 jikaparameter ini tidak diisi.

url:'crud.php?act=add', url tujuan pengiriman request.

data:{inputKode:kode,inputNama:nama,inputStok:stok}, parameter yang dikirim menggunakanmethod POST untuk kemudian di proses di file PHPnya.

Ketika responsenya berupa success: maka kemabli menggunakan AJAX yang sama digunakanuntuk load data ketika pertama kali membuka halaman.

Fouth CodeCreate 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(){$('#barang').html('<i>loading barang...</i>');$.ajax({

url:'show.php',success:function(response){


alert('gagal request data');}

});}

Untuk kemudian silahkan ganti baris ajax yang digunakan untuk menampilkan data dengan fungsi show();

$(document).ready(function(){show();

});dan

function tambahBarang(){$('#barang').html('<i>loading barang...</i>');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 CodeDelete

Front-end

crud.php

Kembali ke crud.php sekarang kita fikus pada case 'delete':. Crud akan menerima kode daribarang yang akan dihapus, untuk kemudian query akan mengeksekusi penghapusan barangberdasarkan 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 deletediklik maka akan mengeksekusi fungsi Javascript dengan menggunakan kodebarang sebagaiparameternya. 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(){


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 CodeEdit View

Untuk membuat view ada 2 step yang kita buat. Step pertama adalah menampilkan data yang akandiedit 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 barangberdasarkan kode barang kedalam input.

Crud.php

Untuk hal tersebut dibuatlah case baru yaitu updateview yang berisi query untuk menampilkandetail 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 menggunakanmethod 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 CodeEdit Processor

Dari tampilan edit yang sudah dibuat sebelumnya dibuatlah prosessor untuk menerima inputnya danmelakukan query update ke tabel barang.

Front-end

Crud.php

Ini adalah case terakhir yang akan kita buat , tepatnya pada case 'edit': , akan menerima kode, namabaru, 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(){


alert('gagal edit data');}

});}

Menggunakan parameter x yaitu kodebarang yang didapat dari hasil while di show.php maka updatedengan AJAX bisa diselesaikan.

ClosingPenulis sangat menunggu kritik dan saran dari pembaca semua demi terciptanya ebook yang lebihbaik dilain hari. Jika pembaca mempunyai masalah untuk memahami e-book ini silahakan kirimsemua pertanyaan kepada penulis. Kritik,saran dan pertanyaan penulis tunggu melalui twitter@xyussanx.

Terimakasih

jquery ajax part 1 by yussan

Technology