TUGAS 4 PWEB - Kode Post Finder
TUGAS 4 PWEB - Kode Post Finder
Muhammad Raihan Athallah
5025201206
Kelas PWEB B
Pada pertemuan sebelumnya diberikan tugas yaitu membuat pencarian kode pos dengan menggunkan javascript. Pada tugas kali ini saya menggunakan sumber data provinsi, kota, kecamatan, dan kode pos dari file json yang saya dapatkan melalui internet.
Saya berhasil membuat pencarian kode pos melalui data yang berada pada file .json hanya saja performa saat tombol cari ditekan masih sangat lama karena banyak sekali data yang didapat apabila input yang dimasukkan terlalu umum.
Kodepos Indonesia (raihanathallah.github.io)
Berikut adalah hasil screenshoot tampilan website:
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>Kodepos Indonesia</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
</head>
<body>
<header align="center">
<h1>Cari Kodepos Indonesia</h1>
</header>
<div class="container">
<div class="form-container">
<form align="center">
<input class="form" id="search" name="search" type="search" placeholder="Masukkan provinsi/kota/kecamatan/kodepos" />
<datalist id="searchHelper"></datalist>
</form>
<button class="button" id="searchButton">Cari</button>
</div>
</div>
<div align="center" id="searchResult">
<?php include('loader01.html'); ?>
</div>
</body>
<script src="script.js"></script>
</html>
style.css
h1,
h2,
h3,
h4,
p,
* {
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
align-items: center;
margin-top: 100px;
/* background-color: yellow; */
}
.form-container {
width: 50%;
margin: auto;
}
.form {
width: 60%;
height: 40px;
padding: 10px;
border-radius: 12px;
border-color: rgb(183, 0, 255);
}
.button {
font-weight: bold;
margin-left: 40%;
margin-top: 10px;
padding: 6px 0;
border-radius: 9px;
background-color: rgb(76, 0, 255);
border-style: none;
width: 20%;
}
#searchResult {
width: 50%;
/* background-color: yellowgreen; */
margin: 8em auto;
}
.list-group {
text-align: start;
/* background-color: blueviolet; */
}
.list-item {
padding: 10px;
margin-left: auto;
margin-top: 10px;
border-style: solid;
border-radius: 12px;
border-color: rgb(153, 0, 255);
/* width: fit-content; */
/* background-color: green; */
}
script.js
$(document).ready(function () {
$.ajaxSetup({ cache: false });
function searchEng() {
var searchField = $.trim($("#search").val());
var caseExp = new RegExp(searchField, "i");
$.getJSON("kodepos.json", function (data) {
var output = '<div class="list-group">';
$.each(data, function (key, val) {
if (
val.urban.search(caseExp) !== -1 ||
val.city.search(caseExp) !== -1 ||
val.province_code.search(caseExp) !== -1 ||
val.postal_code.search(caseExp) !== -1 ||
(val.urban + " " + val.city + " " + val.province_code).search(caseExp) !== -1
) {
output += '<div class="list-item"><h2 class="list-group-item-heading">' + val.urban + "</h2>" + '<h5 class="list-group-item-heading">' + "PROVINSI: " + val.province_code + "</h5>";
output += "<p>" + val.city + "</p>" + '<p class="small">' + val.postal_code + "</p>" + "</div>";
}
});
output += "</div>";
$("#searchResult").html(output);
});
}
$("#searchButton").click(function () {
searchEng();
});
});
Contoh data file JSON:
[
{
"urban": "ABAH LUENG",
"sub_district": "BANDAR BARU",
"city": "PIDIE JAYA",
"province_code": "ACEH",
"postal_code": "24184"
},
{
"urban": "ABAIL",
"sub_district": "TEUPAH TENGAH",
"city": "SIMEULUE",
"province_code": "ACEH",
"postal_code": "23891"
},
{
"urban": "ABEUK BUDI",
"sub_district": "JULI",
"city": "BIREUEN",
"province_code": "ACEH",
"postal_code": "24251"
},
{
"urban": "ABEUK GEULANTEU",
"sub_district": "MADAT",
"city": "ACEH TIMUR",
"province_code": "ACEH",
"postal_code": "24458"
},
Komentar
Posting Komentar