Selamat malam temen-temen sahabat Jaco yang saya banggakan (kayak pidato). Kali ini saya akan melanjutkan tutorial serial AJAX dengan jQuery yang sebelumnya sudah saya tulis pada tutorial AJAX dengan jQuery Part 1, AJAX dengan jQuery Part 2, dan AJAX dengan jQuery Part 3.
Ok, kali ini kita akan mempelajari bagaimana data dikirim melalui HTTP Request dan client akan menerima data callback berupa JSON. Untuk aplikasi sistem informasi yang sering menggunakan AJAX, teknik ini harus dipelajari karena menyangkut optimalisasi dari pengiriman melalui HTTP Request. Pertanyaannya, kenapa callback berupa JSON harus dipakai? karena kita tidak akan meload data beserta HTML-HTML yang tidak diperlukan, seperti table, h1, h2, dan sebagainya. Ingat, yang diload hanyalah data, data bukan HTML, tetapi hasil yang diolah diserver yang dibentuk menjadi sebuah JSON. Data-data akan berbentuk objek-objek Javascript yang siap pakai di client. Intinya, HTML akan dibuat di client, dan akan memperoleh data dari server.
Lanjut ke tutorial bagaimana cara membuatnya.
Pertama, buatlah sebuah file client bernama input.html dengan isi kode sebagai berikut ini:
<h2>Form Registrasi</h2> <div id="container"> <form id="FormInput"> <div> <label>Nama:</label> <input name="nama" /> </div> <div> <label>Alamat:</label> <input name="alamat" /> </div> <div> <label>E-Mail:</label> <input name="email" /> </div> <div> <label>Jenis Kelamin:</label> <select name="jenis_kelamin"> <option value="Pria">Pria</option> <option value="Wanita">Wanita</option> </select> </div> <input type="submit" /> </form> </div>
Kita akan memakai form sebelumnya yang kita buat di tutorial ini, yaitu AJAX dengan jQuery Part 3 yaitu form register/pendaftaran yang berisi field nama, alamat, email, dan jenis kelamin. Sekarang, setelah kita buat form tersebut, kita harus membuat file servernya, kita buat saja file bernama server.php di folder yang sama. Isi dari server.php mirip dengan tutorial sebelumnya, cuma ada beberapa perbedaan, yaitu hasil kembalian dari server (callback) adalah data JSON, bukan tabel. Jadi, kita cukup dengan mengisikan kode berikut di server.php:
<?php echo json_encode($_POST) ?>
Lho, cuma satu baris? Ya, di sini server cuma mengubah data array PHP menjadi sebuah data JSON dengan menggunakan function json_encode(), yang nantinya kembalian (callback) nya adalah berupa data JSON berikut:
{
"nama":"Cecep Yusuf",
"alamat":"Sukasari",
"email":"cheyuz@jagocoding.com",
"jenis_kelamin":"Pria"
}
Ya, itulah bentuk dari JSON. JSON adalah singkatan dari JavaScript Object Notation yang terdiri dari key dan value, sama dengan bentuk array dalam PHP. Bentuk dari data JSON merupakan notasi objek Javascript, sehingga Javascript akan dengan mudah mengakses data-data tersebut.
Sekarang, bagaimana caranya kita mengambil data-data tersebut dan difetch ke dalam document HTML? Caranya dengan menggunakan script AJAX dari jQuery. Seperti biasa, kita akan menggunakan function .ajax(). Tambahkan javascript berikut ini dan pastikan kamu sudah meload jquery di head ya.
<script>
$().ready(function(){
$('#FormInput').submit(function(e){
e.preventDefault();
$.ajax({
'type': 'POST',
'url': 'server.php',
'dataType': 'json',
'data': $(this).serialize(),
'success': function(data){
alert(data.nama);
}
});
});
});
</script>
Coba perhatikan kode di atas. Saya harap kamu sudah mengerti arti kode-kode di atas, soalnya ada di tutorial sebelumnya
. Tapi kalo kamu belum mengerti saya akan coba jelaskan kembali, hehe. Ketika form disubmit, browser akan "memblok" refresh dan submit dari form #FormInput. Setelah itu lakukan AJAX dengan type POST untuk dikirimkan ke sever.php. Ok sampai sini pasti kamu sudah mengerti karena di tutorial sebelumnya sama persis. Beberapa perbedaan pada tutorial ini adalah tipe data yang digunakan sebagai hasil kembalian adalah JSON, bukan HTML maupun text. Itu diinisialisasi pada option dataType: 'json'. Dan ketika sukses, maka akan keluar alert yang menampilkan hasil dari data. Nah, data ini adalah sebuah objek 1 dimensi, maka cara untuk mengambil data setiap field dari objek tersebut adalah dengan menggunakan tanda titik (.). Contoh: data.nama, data.alamat, data.email, dan data.jenis_kelamin. Coba kamu eksperimen, ganti sendiri isi dari alert tersebut .
Sekarang, kita akan membuat tabel supaya data-data tersebut dimasukkan ke dalam tabel. Ok, buatlah tabel berikut dan disimpan di halaman kosong.
<table> <tr> <td>Nama Lengkap:</td> <td id="nama"></td> </tr> <tr> <td>Alamat:</td> <td id="alamat"></td> </tr> <tr> <td>E-Mail:</td> <td id="email"></td> </tr> <tr> <td>Jenis Kelamin:</td> <td id="jenis_kelamin"></td> </tr> </table>
Untuk javascriptnya, silakan ubah kode dari function success menjadi sebagai berikut:
...
'success': function(data){
$('#nama').html(data.nama);
$('#alamat').html(data.alamat);
$('#email').html(data.email);
$('#jenis_kelamin').html(data.jenis_kelamin);
}
...
Tutorial selesai. Jika kamu mengikuti tutorial dengan benar, kamu akan mendapatkan data dari server yang merupakan callback dari data inputan sebelumnya yang diolah di server. Kemudian, setelah itu data JSON disimpan di setiap field pada tabel, sehingga akhirnya data2 tersebut dimunculkan di field2 tabel yang ditentukan.
Kode Lengkap
Biasanya, orang baca itu hanya sekilas, pasti langsung pengen kode lengkapnya seperti apa kemudian dicoba dan dieksperimen sendiri. Gak apa2, yang penting paham :D (Saran saya sih baca dulu semua yang ada di atas).
input.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh AJAX 4 - AJAX Post</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$().ready(function(){
$('#FormInput').submit(function(e){
e.preventDefault();
$.ajax({
'type': 'POST',
'url': 'server.php',
'dataType': 'json',
'data': $(this).serialize(),
'success': function(data){
$('#nama').html(data.nama);
$('#alamat').html(data.alamat);
$('#email').html(data.email);
$('#jenis_kelamin').html(data.jenis_kelamin);
}
});
});
});
</script>
</head>
<body>
<h2>Form Registrasi</h2>
<div id="container">
<form id="FormInput">
<div>
<label>Nama:</label>
<input name="nama" />
</div>
<div>
<label>Alamat:</label>
<input name="alamat" />
</div>
<div>
<label>E-Mail:</label>
<input name="email" />
</div>
<div>
<label>Jenis Kelamin:</label>
<select name="jenis_kelamin">
<option value="Pria">Pria</option>
<option value="Wanita">Wanita</option>
</select>
</div>
<input type="submit" />
</form>
</div>
<table>
<tr>
<td>Nama Lengkap:</td>
<td id="nama"></td>
</tr>
<tr>
<td>Alamat:</td>
<td id="alamat"></td>
</tr>
<tr>
<td>E-Mail:</td>
<td id="email"></td>
</tr>
<tr>
<td>Jenis Kelamin:</td>
<td id="jenis_kelamin"></td>
</tr>
</table>
</body>
</html>
server.php
<?php echo json_encode($_POST) ?>
OK selamat mencoba mencoba sahabat2 JACO... Untuk pertanyaan dkk, silakan komentar aja
~ cheyuz@jagocoding.com
Stand By With Me,
cheyuz@jagocoding.com
