Ajax - PHP
19
Click here to load reader
-
Upload
azep-ardie -
Category
Software
-
view
201 -
download
4
Transcript of Ajax - PHP
PENGENALAN / DEFINISI
- AJAX (Asynchronous Javascript And XML)
- Melakukan request terhadap server melalui javascript dan tanpa memerlukan refresh browser
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
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
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)
IMPLEMENTASI [3]
File – file yang disiapkan :
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>
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 :
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/>";
}
}
?>
IMPLEMENTASI – RESPON PLAIN TEXT [4]
Hasilnya saat dibuka di browser :
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">
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 :
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);
?>
IMPLEMENTASI – RESPON JSON [4]
Hasilnya saat dibuka di browser :
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":"[email protected]"}
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'] = "[email protected]";
echo json_encode($identitas);
