Dokumen tersebut menjelaskan implementasi AJAX menggunakan jQuery untuk mengambil data mahasiswa berdasarkan NIM dari database. Terdapat dua contoh respon yang dikirim server yaitu plain text dan JSON. Pada contoh plain text, data ditampilkan secara langsung. Sedangkan pada contoh JSON, data diisi ke form setelah diterima melalui ajax.

2. PENGENALAN / DEFINISI
- AJAX (Asynchronous Javascript And XML)
- Melakukan request terhadap server melalui javascript
dan tanpa memerlukan refresh browser

3. PEMBATASAN BAHASAN
Pada bahasan ini, implementasi AJAX akan menggunakan fungsi-fungsi
yang telah disediakan oleh jQuery.
Core jQuery bisa didapatkan melalui website resminya :
http://jquery.com/
Pada pembahasan ini akan mencontohkan 2 jenis format respon
dari server :
1) Plain Text
2) Json

4. IMPLEMENTASI [1]
Untuk contoh :
“Kita akan membuat sebuah proses pengambilan data
identitas mahasiswa berdasarkan NIM yang dimilikinya.”
1) Download file jquery.js dari http://jquery.com
2) Buatlah file :
1) Index.php
2) service-mahasiswa.php

5. IMPLEMENTASI [2]
3) Buatlah database dengan nama db_ajax
4) Buatlah tabel :
1. tbl_mahasiswa, dengan field-field :
a) NIM VARCHAR(20)
b) NAMA VARCHAR(100)
c) ALAMAT VARCHAR(225)
d) TELP VARHCAR(15)
e) EMAIL VARCHAR(50)

6. IMPLEMENTASI [3]
File – file yang disiapkan :

8. IMPLEMENTASI – RESPON PLAIN TEXT [1]
Pada file index.php isikan code berikut :
<script type="text/javascript" src="jquery/jquery.js"></script>
<script></script>
NIM :
<input type="text" name="nim" id="nim">
<input type="button" id="btnCari" value="Cari">
<div id="identitas"></div>

9. IMPLEMENTASI – RESPON PLAIN TEXT [2]
<script>
$(document).ready(function() {
$('#btnCari').click(function() {
var nim = $('#nim').val();
$.ajax({
type : 'post',
data : 'nim='+nim,
url : 'service-mahasiswa.php',
success : function(hasil){
$('#identitas').html(hasil);
}
});
});
});
</script>
Pada file tersebut lengkapi tag <script></script> dengan baris code berikut :

10. IMPLEMENTASI – RESPON PLAIN TEXT [3]
Pada file service-mahasiswa.php isikan code berikut :
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("db_ajax");
if (isset($_POST['nim'])) {
$nim = mysql_escape_string($_POST['nim']);
$query = "SELECT * FROM tbl_mahasiswa WHERE NIM = '{$nim}'";
$result = mysql_query($query);
if ($data = mysql_fetch_array($result)) {
echo "NAMA : {$data['NAMA']} <br/>",
"ALAMAT : {$data['ALAMAT']} <br/>",
"TELP : {$data['TELP']} <br/>",
"EMAIL : {$data['EMAIL']} <br/>";
}
}
?>

11. IMPLEMENTASI – RESPON PLAIN TEXT [4]
Hasilnya saat dibuka di browser :

13. IMPLEMENTASI – RESPON JSON [1]
Pada file index.php isikan code berikut :
<script type="text/javascript" src="jquery/jquery.js"></script>
<script></script>
NIM : <input type="text" name="nim" id="nim">
<input type="button" id="btnCari" value="Cari"><br/><br/>
NAMA : <input type="text" name="nama" id="nama"> <br/>
ALAMAT : <input type="text" name="alamat" id="alamat"> <br/>
TELP : <input type="text" name="telp" id="telp"> <br/>
EMAIL : <input type="text" name="email" id="email">

14. IMPLEMENTASI – RESPON JSON [2]
<script>
$(document).ready(function() {
$('#btnCari').click(function() {
var nim = $('#nim').val();
$.ajax({
type : 'post',
data : 'nim='+nim,
url : 'service-mahasiswa.php',
dataType : 'json',
success : function(hasil){
$('#nama').val(hasil.NAMA);
$('#alamat').val(hasil.ALAMAT);
$('#telp').val(hasil.TELP);
$('#email').val(hasil.EMAIL);
}
});
});
});
</script>
Pada file tersebut lengkapi tag <script></script> dengan baris code berikut :

15. IMPLEMENTASI – RESPON JSON [3]
Pada file service-mahasiswa.php isikan code berikut :
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("db_ajax");
$identitas = array();
if (isset($_POST['nim'])) {
$nim = mysql_escape_string($_POST['nim']);
$query = "SELECT * FROM tbl_mahasiswa WHERE NIM = '{$nim}'";
$result = mysql_query($query);
if ($data = mysql_fetch_array($result)) {
$identitas['NAMA'] = $data['NAMA'];
$identitas['ALAMAT'] = $data['ALAMAT'];
$identitas['TELP'] = $data['TELP'];
$identitas['EMAIL'] = $data['EMAIL'];
}
}
echo json_encode($identitas);
?>

16. IMPLEMENTASI – RESPON JSON [4]
Hasilnya saat dibuka di browser :

17. PEMBAHASAN MATERI PENDUKUNG [1]
JSON (JavaScript Object Notation)
- merupakan format untuk pertukaran data seperti halnya XML.
- JSON memiliki format agak mirip seperti array, dia memiliki index
dan value
Contoh json :
{"NAMA":"ASEP ARDI",
"ALAMAT":"BANDUNG",
"TELP":"085295XXXXXX",
"EMAIL":"asepardiwinardi@gmail.com"}

18. PEMBAHASAN MATERI PENDUKUNG [1]
Untuk membuat json dengan php yaitu dengan menggunakan fungsi berikut :
json_encode($array);
Misal :
$identitas = array();
$identitas['NAMA'] = "ASEP ARDI";
$identitas['ALAMAT'] = "BANDUNG";
$identitas['TELP'] = "085295XXXXXX";
$identitas['EMAIL'] = "asepardiwinardi@gmail.com";
echo json_encode($identitas);