Kali ini kita akan latihan membuat aplikasi ajax sederhana menggunakan JQuery & PHP, pertama-tama buat folder bernama ajax-app di dalam folder c:xampp\htdocs, setelah itu buat file html menggunakan editor favorit Anda yang isinya sebagai berikut:
<!doctype html>
<html lang="en">
<head>
<title>Aplikasi Ajax Sederhana</title>
<style type="text/css">
#displayPanel {
display: block;
padding: 10px;
width: 100%;
height: 150px;
border: 1px solid red;
}
.padding-5 {
padding: 5px;
}
</style>
</head>
<body>
<table style="width: 600px">
<tr>
<td colspan="2">
<div id="displayPanel"></div>
</td>
</tr>
<tr>
<td class="padding-5">
<button id="btnAnimal" title="Tampilkan nama-nama binatang">Nama-Nama Binatang</button>
</td>
<td class="padding-5">
<button id="btnFlower" title="Tampilkan nama-nama bunga">Nama-Nama Bunga</button>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnAnimal').click(function () {
$('#displayPanel').empty().load('/ajax-app/respon.php?show=animals');
});
$('#btnFlower').click(function () {
$('#displayPanel').empty().load('/ajax-app/respon.php?show=flowers');
});
});
</script>
</body>
</html>
Simpan dan beri nama index.html. Setelah itu, kita lanjutkan dengan membuat file PHP yang akan memproses request dari halaman index.html yang tadi kita buat. Buat file baru lalu salin kode di bawah ini kemudian simpan dengan nama respon.php.
<?php
$data = array(
'animals' => array('Cat', 'Dog', 'Horse', 'Tiger', 'Lion', 'Camel'),
'flowers' => array('Rose', 'Lily', 'Tulip', 'Lavender', 'Jasmine', 'Dahlia')
);
$show = isset($_GET['show'])? strtolower(trim($_GET['show'])) : '';
if(!empty($show) && array_key_exists($show, $data)){
echo implode(", ", $data[$show]);
}
Buka browser, lalu ketik http://localhost/ajax-app/. Cobalah menekan tombol-tombol yang ada di layar dan perhatikan apa yang terjadi. Aplikasi ajax sederhana yang kita buat sudah berjalan, Anda dapat mengembangkan aplikasi ini sesuai dengan kebutuhan.
Tidak ada komentar:
Posting Komentar