Tugas - 7 PWEB B : AJAX Sederhana

Tugas 7 Pemrograman Web : AJAX Sederhana

Pada tugas kali ini, saya membuat sebuah implementasi AJAX yaitu menampilkan data request dari file html dan filter daerah berupa propinsi dan kabupaten/kota berdasarkan database berikut dengan hanya mengambil data propinsi dan kabupaten/kota. Berikut tampilan dari websitenya

Main Page


Request-Data Page (before click)


Request-Data Page (after click)


Filter Daerah Page


Berikut source codenya :

File index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic AJAX</title>
<link rel="shortcut icon" type="image/x-icon" href="https://img.icons8.com/plasticine/100/000000/bull.png"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
background: -webkit-linear-gradient(left, #0072ff, #00c6ff);
font-family: sans-serif;
color: white;
}
body:after {
content:'';
background: url('./bg.jpg') no-repeat center center;
background-size: cover;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index:-1;
opacity: 1;
}
h1 {
text-align: center;
padding-top: 5%;
}
.button-color {
margin: 1%;
background-color: #15F4EE;
}
.button-color:hover {
background-color: #03AECC;
}
form {
margin-top: 20px;
}
.data{
margin-top: 15%;
border-radius: 1rem;
position: relative;
z-index: 1;
padding-bottom: 3%;
box-shadow: 0 0 24px 2px #47066e;
}
.data::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .8;
z-index: -1;
border-radius: 1rem;
background-color:rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<div class="container data">
<h1>Basic AJAX</h1>
<div class="container row justify-content-center">
<button class="btn button-color col-2" onclick="window.location.href='./request-data/'">Request Data</button>
<button class="btn button-color col-2" onclick="window.location.href='./filter-daerah/index.php'">Filter Daerah</button>
</div>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

File request-data

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong style="color: red;">Data kalimat ini berhasil ditampilkan</strong>
</body>
</html>
view raw data.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Request Data</title>
<link rel="shortcut icon" type="image/x-icon" href="https://img.icons8.com/plasticine/100/000000/bull.png"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
background: -webkit-linear-gradient(left, #0072ff, #00c6ff);
font-family: sans-serif;
color: white;
}
body:after {
content:'';
background: url('./bg.jpg') no-repeat center center;
background-size: cover;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index:-1;
opacity: 1;
}
h1 {
text-align: center;
padding-top: 5%;
}
button {
width: 100px;
margin: 20px;
}
.button-color {
background-color: #15F4EE;
}
.button-color:hover {
background-color: #03AECC;
}
form {
margin-top: 20px;
}
.data{
margin-top: 10%;
border-radius: 1rem;
position: relative;
z-index: 1;
box-shadow: 0 0 24px 2px #47066e;
}
.data::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .8;
z-index: -1;
border-radius: 1rem;
background-color:rgba(0, 0, 0, 1);
}
#hasil {
margin-top: 50px;
padding-bottom: 5%;
}
</style>
</head>
<body>
<button class="btn button-color" onclick="window.location.href='../'">Back</button>
<div class="container data">
<h1>Mengambil Data dari File HTML</h1>
<div class="container">
<form class="row justify-content-center">
<input type="button" class="btn button-color" value="Tampilkan Data" onclick="getdata('data.html', 'hasil')">
</form>
<div id="hasil" class="row justify-content-center">
<span>Hasil request dengan AJAX akan ditampilkan di sini.</span>
</div>
</div>
</div>
<script>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getdata(url, hasil) {
if (XMLHttpRequestObject) {
var obj = document.getElementById(hasil);
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 1) {
obj.innerHTML = "Loading";
}
if (XMLHttpRequestObject.readyState == 4) {
if (XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
else {
obj.innerHTML = XMLHttpRequestObject.statusText;
}
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

File filter-daerah

<?php
include 'koneksi.php';
$provinsi = $_POST['provinsi'];
echo "<option value=''>Pilih Kabupaten</option>";
$query = "SELECT * FROM kabupaten WHERE id_prov=? ORDER BY nama ASC";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $provinsi);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
echo "<option value='" . $row['id_kab'] . "'>" . $row['nama'] . "</option>";
}
?>
view raw get_kabupaten.php hosted with ❤ by GitHub
<?php
include 'koneksi.php';
echo "<option value=''>Pilih Provinsi</option>";
$query = "SELECT * FROM provinsi ORDER BY nama ASC";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
echo "<option value='" . $row['id_prov'] . "'>" . $row['nama'] . "</option>";
}
?>
view raw get_provinsi.php hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter Daerah</title>
<link rel="shortcut icon" type="image/x-icon" href="https://img.icons8.com/plasticine/100/000000/bull.png"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
background: -webkit-linear-gradient(left, #0072ff, #00c6ff);
font-family: sans-serif;
color: white;
}
body:after {
content:'';
background: url('./bg.jpg') no-repeat center center;
background-size: cover;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index:-1;
opacity: 1;
}
h2 {
text-align: center;
}
button {
width: 100px;
margin: 20px;
}
.button-color {
margin: 1%;
background-color: #15F4EE;
}
.button-color:hover {
background-color: #03AECC;
}
.data{
margin-top: 5%;
border-radius: 1rem;
position: relative;
z-index: 1;
padding: 5%;
box-shadow: 0 0 24px 2px #47066e;
}
.data::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .8;
z-index: -1;
border-radius: 1rem;
background-color:rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<button class="btn button-color" onclick="window.location.href='../'">Back</button>
<div class="container mb-5 data">
<h2>Pilih Daerah</h2> <hr/>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="font-weight-bold">Provinsi</label>
<select class="form-control" name="provinsi" id="provinsi">
<option value=""> Pilih Provinsi</option>
</select>
</div>
<div class="form-group">
<label class="font-weight-bold">Kabupaten</label>
<select class="form-control" name="kabupaten" id="kabupaten">
<option value=""></option>
</select>
</div>
</div>
</div>
<hr />
</div>
<script>
$(document).ready(function(){
$.ajax({
type: 'POST',
url: "get_provinsi.php",
cache: false,
success: function(msg) {
$("#provinsi").html(msg);
}
});
$("#provinsi").change(function(){
var provinsi = $("#provinsi").val();
$.ajax({
type: 'POST',
url: "get_kabupaten.php",
data: {provinsi: provinsi},
cache: false,
success: function(msg) {
$("#kabupaten").html(msg);
}
});
});
});
</script>
</body>
</html>
view raw index.php hosted with ❤ by GitHub
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'filter_daerah');
// Buat koneksi
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>
view raw koneksi.php hosted with ❤ by GitHub


Untuk lebih lengkapnya bisa dilihat pada link berikut : https://github.com/naimackerman/simple-ajax

Preview tampilan website : https://nurahmadkhatim.000webhostapp.com/

Comments

Post a Comment