TUGAS 3 PWEB: Membuat Pencarian Kode Pos dengan JavaScript
Tugas 3
Rahmat Faris Akbar
5025201003
PWEB (B)
Kali ini kita akan mencoba membuat sebuah situs web pencarian kode pos dan nama kelurahannya berdasarkan inputan nama Provinsi, Kabupaten atau Kota, dan Kecamatan di Indonesia. Dalam pengerjaannya, kita akan menggunakan HTML, CSS dan JavaScript. Karena inputan awal menentukan inputan selanjutnya, maka kita akan menggunakan metode dependent dropdown list.
Terdapat 4 level dalam dependent dropdown list ini, yaitu:
- Provinsi = level 1
- Kota/Kabupaten = level 2
- Kecamatan = level 3
- Kode Pos & Kelurahan = level 4
Untuk data
Provinsi, Kabupaten/Kota, Kecamatan, Kelurahan, dan Kode Pos saya download
dari internet berupa excel yang kemudian saya convert menjadi array 2
dimensi dengan bantuan
tableconvert.com sehingga data bisa langsung dipakai di file javascriptnya.
Berikut merupakan kode index.html -nya :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>Pencari Kode Pos</title>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<h2>
Pencari Kode Pos Wilayah Indonesia
</h2>
</div>
<section class="section" id="section-pencarian">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
Cari kode pos dan nama kelurahan di wilayah Indonesia dengan memilih nama Provinsi, Kota/Kabupaten, dan Kecamatan.
<div>
<div class="field mt-4">
<label class="label">Provinsi</label>
<div class="control">
<div class="select is-rounded" id="select-provinsi">
<select id="level1"> </select>
</div>
</div>
</div>
<div class="field mt-4">
<label class="label">Kota atau Kabupaten</label>
<div class="control">
<div class="select is-rounded" id="select-kotakab">
<select id="level2"></select>
</div>
</div>
</div>
<div class="field mt-4">
<label class="label">Kecamatan</label>
<div class="control">
<div class="select is-rounded" id="select-kecamatan">
<select id="level3"></select>
</div>
</div>
<div class="field mt-4">
<label class="label">Hasil Pencarian Kode Pos dan Kelurahan yang Tersedia</label>
<div class="control">
<div class="select is-rounded" id="select-kecamatan">
<select id="level4"></select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-4"><list-kodepos></list-kodepos></div>
</section>
<script src="script.js"></script>
</body>
</html>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Pencari Kode Pos</title> | |
| <link href="./style.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h2> | |
| Pencari Kode Pos Wilayah Indonesia | |
| </h2> | |
| </div> | |
| <section class="section" id="section-pencarian"> | |
| <div class="container"> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <div class="content"> | |
| Cari kode pos dan nama kelurahan di wilayah Indonesia dengan memilih nama Provinsi, Kota/Kabupaten, dan Kecamatan. | |
| <div> | |
| <div class="field mt-4"> | |
| <label class="label">Provinsi</label> | |
| <div class="control"> | |
| <div class="select is-rounded" id="select-provinsi"> | |
| <select id="level1"> </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="field mt-4"> | |
| <label class="label">Kota atau Kabupaten</label> | |
| <div class="control"> | |
| <div class="select is-rounded" id="select-kotakab"> | |
| <select id="level2"></select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="field mt-4"> | |
| <label class="label">Kecamatan</label> | |
| <div class="control"> | |
| <div class="select is-rounded" id="select-kecamatan"> | |
| <select id="level3"></select> | |
| </div> | |
| </div> | |
| <div class="field mt-4"> | |
| <label class="label">Hasil Pencarian Kode Pos dan Kelurahan yang Tersedia</label> | |
| <div class="control"> | |
| <div class="select is-rounded" id="select-kecamatan"> | |
| <select id="level4"></select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mt-4"><list-kodepos></list-kodepos></div> | |
| </section> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
Berikut merupakan kode style.css -nya :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@-webkit-keyframes spinAround {
0% {
transform: rotate(0)
}
to {
transform: rotate(359deg)
}
}
@keyframes spinAround {
0% {
transform: rotate(0)
}
to {
transform: rotate(359deg)
}
}
.header {
background-color: red;
border-bottom: 1px solid #6c86ad;
padding: 20px 40px;
}
.header h2 {
margin: 0;
font-weight: 800;
font-size: 30px;
color: white;
text-align: center;
}
.select:not(.is-multiple):not(.is-loading):after {
border: 3px solid transparent;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: .625em;
margin-top: -.4375em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: .625em
}
.button,
.input,
.select select {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding: calc(.5em - 1px) calc(.75em - 1px);
position: relative;
vertical-align: top
}
body,
dl,
h1,
h2,
html,
ol,
p {
margin: 0;
padding: 0
}
html {
box-sizing: border-box
}
*,
:after,
:before {
box-sizing: inherit
}
body,
button,
input,
select {
font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif
}
body {
color: #4a4a4a;
font-size: 1em;
font-weight: 400;
line-height: 1.5
}
.container {
flex-grow: 1;
margin: 0 auto;
position: relative;
width: auto
}
@media screen and (min-width:1024px) {
.container {
max-width: 960px
}
}
@media screen and (min-width:1216px) {
.container:not(.is-max-desktop) {
max-width: 1152px
}
}
@media screen and (min-width:1408px) {
.container:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: 1344px
}
}
.input,
.select select {
background-color: #fff;
border-color: #dbdbdb;
border-radius: 4px;
color: #363636
}
.select {
display: inline-block;
max-width: 100%;
position: relative;
vertical-align: top
}
.select:not(.is-multiple):not(.is-loading):after {
border-color: red;
right: 1.125em;
z-index: 4
}
.select.is-rounded select {
border-radius: 290486px;
padding-left: 1em
}
.select select:not([multiple]) {
padding-right: 2.5em
}
.label {
color: #363636;
display: block;
font-size: 1rem;
font-weight: 700
}
.label:not(:last-child) {
margin-bottom: .5em
}
.card {
background-color: #fff;
border-radius: .25rem;
box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
color: #4a4a4a;
max-width: 100%;
overflow: hidden;
position: relative
}
.content {
margin: 0;
font-weight: 400;
font-size: 20px;
color: rgb(199, 90, 90);
text-align: justify;
}
.card-content {
padding: 1.5rem
}
@media print,
screen and (min-width:769px) {
.columns:not(.is-desktop) {
display: flex
}
}
.mt-4 {
margin-top: 1rem !important
}
.section {
padding: 3rem 1.5rem
}
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @-webkit-keyframes spinAround { | |
| 0% { | |
| transform: rotate(0) | |
| } | |
| to { | |
| transform: rotate(359deg) | |
| } | |
| } | |
| @keyframes spinAround { | |
| 0% { | |
| transform: rotate(0) | |
| } | |
| to { | |
| transform: rotate(359deg) | |
| } | |
| } | |
| .header { | |
| background-color: red; | |
| border-bottom: 1px solid #6c86ad; | |
| padding: 20px 40px; | |
| } | |
| .header h2 { | |
| margin: 0; | |
| font-weight: 800; | |
| font-size: 30px; | |
| color: white; | |
| text-align: center; | |
| } | |
| .select:not(.is-multiple):not(.is-loading):after { | |
| border: 3px solid transparent; | |
| border-radius: 2px; | |
| border-right: 0; | |
| border-top: 0; | |
| content: " "; | |
| display: block; | |
| height: .625em; | |
| margin-top: -.4375em; | |
| pointer-events: none; | |
| position: absolute; | |
| top: 50%; | |
| transform: rotate(-45deg); | |
| transform-origin: center; | |
| width: .625em | |
| } | |
| .button, | |
| .input, | |
| .select select { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| align-items: center; | |
| border: 1px solid transparent; | |
| border-radius: 4px; | |
| box-shadow: none; | |
| display: inline-flex; | |
| font-size: 1rem; | |
| height: 2.5em; | |
| justify-content: flex-start; | |
| line-height: 1.5; | |
| padding: calc(.5em - 1px) calc(.75em - 1px); | |
| position: relative; | |
| vertical-align: top | |
| } | |
| body, | |
| dl, | |
| h1, | |
| h2, | |
| html, | |
| ol, | |
| p { | |
| margin: 0; | |
| padding: 0 | |
| } | |
| html { | |
| box-sizing: border-box | |
| } | |
| *, | |
| :after, | |
| :before { | |
| box-sizing: inherit | |
| } | |
| body, | |
| button, | |
| input, | |
| select { | |
| font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif | |
| } | |
| body { | |
| color: #4a4a4a; | |
| font-size: 1em; | |
| font-weight: 400; | |
| line-height: 1.5 | |
| } | |
| .container { | |
| flex-grow: 1; | |
| margin: 0 auto; | |
| position: relative; | |
| width: auto | |
| } | |
| @media screen and (min-width:1024px) { | |
| .container { | |
| max-width: 960px | |
| } | |
| } | |
| @media screen and (min-width:1216px) { | |
| .container:not(.is-max-desktop) { | |
| max-width: 1152px | |
| } | |
| } | |
| @media screen and (min-width:1408px) { | |
| .container:not(.is-max-desktop):not(.is-max-widescreen) { | |
| max-width: 1344px | |
| } | |
| } | |
| .input, | |
| .select select { | |
| background-color: #fff; | |
| border-color: #dbdbdb; | |
| border-radius: 4px; | |
| color: #363636 | |
| } | |
| .select { | |
| display: inline-block; | |
| max-width: 100%; | |
| position: relative; | |
| vertical-align: top | |
| } | |
| .select:not(.is-multiple):not(.is-loading):after { | |
| border-color: red; | |
| right: 1.125em; | |
| z-index: 4 | |
| } | |
| .select.is-rounded select { | |
| border-radius: 290486px; | |
| padding-left: 1em | |
| } | |
| .select select:not([multiple]) { | |
| padding-right: 2.5em | |
| } | |
| .label { | |
| color: #363636; | |
| display: block; | |
| font-size: 1rem; | |
| font-weight: 700 | |
| } | |
| .label:not(:last-child) { | |
| margin-bottom: .5em | |
| } | |
| .card { | |
| background-color: #fff; | |
| border-radius: .25rem; | |
| box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02); | |
| color: #4a4a4a; | |
| max-width: 100%; | |
| overflow: hidden; | |
| position: relative | |
| } | |
| .content { | |
| margin: 0; | |
| font-weight: 400; | |
| font-size: 20px; | |
| color: rgb(199, 90, 90); | |
| text-align: justify; | |
| } | |
| .card-content { | |
| padding: 1.5rem | |
| } | |
| @media print, | |
| screen and (min-width:769px) { | |
| .columns:not(.is-desktop) { | |
| display: flex | |
| } | |
| } | |
| .mt-4 { | |
| margin-top: 1rem !important | |
| } | |
| .section { | |
| padding: 3rem 1.5rem | |
| } |
Berikut merupakan kode script.js -nya :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class DropDown {
constructor(data){
this.data = data;
this.targets = [];
}
filterData(filtersAsArray){
return this.data.filter(r => filtersAsArray.every((item,i) => item === r[i]));
}
getUniqueValues(dataAsArray, index){
const uniqueOptions = new Set();
dataAsArray.forEach(r => uniqueOptions.add(r[index]));
return [...uniqueOptions];
}
populateDropDown(el, listAsArray){
el.innerHTML = "";
listAsArray.forEach(item => {
const option = document.createElement("option");
option.textContent = item;
el.appendChild(option);
});
}
createPopulateDropDownFunction(el, elsDependsOn){
return () => {
const elsDependsOnValues = elsDependsOn.length === 0 ? null : elsDependsOn.map(depEl => depEl.value);
const dataToUse = elsDependsOn.length === 0 ? this.data : this.filterData(elsDependsOnValues);
const listToUse = this.getUniqueValues(dataToUse, elsDependsOn.length);
this.populateDropDown(el, listToUse);
}
}
add(options){
const el = options.target;
const elsDependsOn = options.dependsOn.length === 0 ? [] : options.dependsOn;
const eventFunction = this.createPopulateDropDownFunction(el, elsDependsOn);
const targetObject = { els: el, elsDependsOn: elsDependsOn, func: eventFunction};
targetObject.elsDependsOn.forEach(depEl => depEl.addEventListener("change", eventFunction));
this.targets.push(targetObject);
return this;
}
initialize(){
this.targets.forEach(t => t.func());
return this;
}
eazyDropDown(arrayOfElements){
arrayOfElements.forEach((item,i) => {
const option = {target: item, dependsOn: arrayOfElements.slice(0,i) };
this.add(option);
});
this.initialize();
return this;
}
eazyDropDownByIds(arrayOfIds){
this.eazyDropDown(arrayOfIds.map(id => document.getElementById(id)));
}
}
// Ini hanya merupakan data sampel. Karena tidak memungkinkan untuk menampilkan seluruh data yang sangat banyak di blog. Untuk kode javascript dengan data yang lengkap bisa di lihat di repository gitHub
var myData = [
["Jawa Timur", "Gresik", "Gresik", "61111 - Kel. Sidokumpul"],
["Jawa Timur", "Gresik", "Gresik", "61111 - Kel. Tlogopatut"],
["Jawa Timur", "Gresik", "Bungah", "61152 - Kel. Abar-Abir"],
["Jawa Timur", "Gresik", "Bungah", "61152 - Kel. Bedanten"],
["Jawa Timur", "Gresik", "Driyorejo", "61177 - Kel. Anom"],
["Jawa Timur", "Gresik", "Driyorejo", "61177 - Kel. Bambe"],
["Jawa Timur", "Surabaya", "Gubeng", "60281 - Kel. Gubeng"],
["Jawa Timur", "Surabaya", "Gubeng", "60285 - Kel. Mojo"],
["Jawa Timur", "Surabaya", "Sukolilo", "60111 - Kel. Keputih"],
["Jawa Timur", "Surabaya", "Sukolilo", "60117 - Kel. Gebang Putih"],
["Jawa Timur", "Surabaya", "Wiyung", "60227 - Kel. Babatan"],
["Jawa Timur", "Surabaya", "Wiyung", "60228 - Kel. Wiyung"],
["Jawa Tengah", "Klaten", "Wonosari", "57473 - Kel. Tegalgondo"],
["Jawa Tengah", "Klaten", "Wonosari", "57473 - Kel. Bener"],
["Jawa Tengah", "Klaten", "Jatinom", "57481 - Kel. Bandungan"],
["Jawa Tengah", "Klaten", "Jatinom", "57481 - Kel. Bengking"],
["Jawa Tengah", "Boyolali", "Andong", "57384 - Kel. Beji"],
["Jawa Tengah", "Boyolali", "Andong", "57384 - Kel. Kacangan"],
["Jawa Tengah", "Boyolali", "Ampel", "57352 - Kel. Banyuanyar"],
["Jawa Tengah", "Boyolali", "Ampel", "57352 - Kel. Candi"],
["Jawa Barat", "Bandung", "Regol", "40254 - Kel. Ancol"],
["Jawa Barat", "Bandung", "Regol", "40252 - Kel. Ciateul"],
["Jawa Barat", "Bandung", "Arjasari", "40379 - Kel. Baros"],
["Jawa Barat", "Bandung", "Arjasari", "40379 - Kel. Mekarjaya"],
["Jawa Barat", "Cirebon", "Gunung Jati", "45151 - Kel. Babadan"],
["Jawa Barat", "Cirebon", "Gunung Jati", "45151 - Kel. Buyut"],
["Jawa Barat", "Cirebon", "Waled", "45180 - Kel. Ambit"],
["Jawa Barat", "Cirebon", "Waled", "45180 - Kel. Cibogo"]
];
var level1 = document.getElementById("level1");
var level2 = document.getElementById("level2");
var level3 = document.getElementById("level3");
var level4 = document.getElementById("level4");
var dd = new DropDown(myData).eazyDropDown([level1, level2, level3, level4]);
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class DropDown { | |
| constructor(data){ | |
| this.data = data; | |
| this.targets = []; | |
| } | |
| filterData(filtersAsArray){ | |
| return this.data.filter(r => filtersAsArray.every((item,i) => item === r[i])); | |
| } | |
| getUniqueValues(dataAsArray, index){ | |
| const uniqueOptions = new Set(); | |
| dataAsArray.forEach(r => uniqueOptions.add(r[index])); | |
| return [...uniqueOptions]; | |
| } | |
| populateDropDown(el, listAsArray){ | |
| el.innerHTML = ""; | |
| listAsArray.forEach(item => { | |
| const option = document.createElement("option"); | |
| option.textContent = item; | |
| el.appendChild(option); | |
| }); | |
| } | |
| createPopulateDropDownFunction(el, elsDependsOn){ | |
| return () => { | |
| const elsDependsOnValues = elsDependsOn.length === 0 ? null : elsDependsOn.map(depEl => depEl.value); | |
| const dataToUse = elsDependsOn.length === 0 ? this.data : this.filterData(elsDependsOnValues); | |
| const listToUse = this.getUniqueValues(dataToUse, elsDependsOn.length); | |
| this.populateDropDown(el, listToUse); | |
| } | |
| } | |
| add(options){ | |
| const el = options.target; | |
| const elsDependsOn = options.dependsOn.length === 0 ? [] : options.dependsOn; | |
| const eventFunction = this.createPopulateDropDownFunction(el, elsDependsOn); | |
| const targetObject = { els: el, elsDependsOn: elsDependsOn, func: eventFunction}; | |
| targetObject.elsDependsOn.forEach(depEl => depEl.addEventListener("change", eventFunction)); | |
| this.targets.push(targetObject); | |
| return this; | |
| } | |
| initialize(){ | |
| this.targets.forEach(t => t.func()); | |
| return this; | |
| } | |
| eazyDropDown(arrayOfElements){ | |
| arrayOfElements.forEach((item,i) => { | |
| const option = {target: item, dependsOn: arrayOfElements.slice(0,i) }; | |
| this.add(option); | |
| }); | |
| this.initialize(); | |
| return this; | |
| } | |
| eazyDropDownByIds(arrayOfIds){ | |
| this.eazyDropDown(arrayOfIds.map(id => document.getElementById(id))); | |
| } | |
| } | |
| // Ini hanya merupakan data sampel. Karena tidak memungkinkan untuk menampilkan seluruh data yang sangat banyak di blog. Untuk kode javascript dengan data yang lengkap bisa di lihat di repository gitHub | |
| var myData = [ | |
| ["Jawa Timur", "Gresik", "Gresik", "61111 - Kel. Sidokumpul"], | |
| ["Jawa Timur", "Gresik", "Gresik", "61111 - Kel. Tlogopatut"], | |
| ["Jawa Timur", "Gresik", "Bungah", "61152 - Kel. Abar-Abir"], | |
| ["Jawa Timur", "Gresik", "Bungah", "61152 - Kel. Bedanten"], | |
| ["Jawa Timur", "Gresik", "Driyorejo", "61177 - Kel. Anom"], | |
| ["Jawa Timur", "Gresik", "Driyorejo", "61177 - Kel. Bambe"], | |
| ["Jawa Timur", "Surabaya", "Gubeng", "60281 - Kel. Gubeng"], | |
| ["Jawa Timur", "Surabaya", "Gubeng", "60285 - Kel. Mojo"], | |
| ["Jawa Timur", "Surabaya", "Sukolilo", "60111 - Kel. Keputih"], | |
| ["Jawa Timur", "Surabaya", "Sukolilo", "60117 - Kel. Gebang Putih"], | |
| ["Jawa Timur", "Surabaya", "Wiyung", "60227 - Kel. Babatan"], | |
| ["Jawa Timur", "Surabaya", "Wiyung", "60228 - Kel. Wiyung"], | |
| ["Jawa Tengah", "Klaten", "Wonosari", "57473 - Kel. Tegalgondo"], | |
| ["Jawa Tengah", "Klaten", "Wonosari", "57473 - Kel. Bener"], | |
| ["Jawa Tengah", "Klaten", "Jatinom", "57481 - Kel. Bandungan"], | |
| ["Jawa Tengah", "Klaten", "Jatinom", "57481 - Kel. Bengking"], | |
| ["Jawa Tengah", "Boyolali", "Andong", "57384 - Kel. Beji"], | |
| ["Jawa Tengah", "Boyolali", "Andong", "57384 - Kel. Kacangan"], | |
| ["Jawa Tengah", "Boyolali", "Ampel", "57352 - Kel. Banyuanyar"], | |
| ["Jawa Tengah", "Boyolali", "Ampel", "57352 - Kel. Candi"], | |
| ["Jawa Barat", "Bandung", "Regol", "40254 - Kel. Ancol"], | |
| ["Jawa Barat", "Bandung", "Regol", "40252 - Kel. Ciateul"], | |
| ["Jawa Barat", "Bandung", "Arjasari", "40379 - Kel. Baros"], | |
| ["Jawa Barat", "Bandung", "Arjasari", "40379 - Kel. Mekarjaya"], | |
| ["Jawa Barat", "Cirebon", "Gunung Jati", "45151 - Kel. Babadan"], | |
| ["Jawa Barat", "Cirebon", "Gunung Jati", "45151 - Kel. Buyut"], | |
| ["Jawa Barat", "Cirebon", "Waled", "45180 - Kel. Ambit"], | |
| ["Jawa Barat", "Cirebon", "Waled", "45180 - Kel. Cibogo"] | |
| ]; | |
| var level1 = document.getElementById("level1"); | |
| var level2 = document.getElementById("level2"); | |
| var level3 = document.getElementById("level3"); | |
| var level4 = document.getElementById("level4"); | |
| var dd = new DropDown(myData).eazyDropDown([level1, level2, level3, level4]); |
Data yang disimpan dengan array di dalam kode script.js yang ditampilkan di atas hanya mengambil beberapa data sampel. Karena tidak memungkinkan untuk menampilkan seluruh data yang sangat banyak di blog.
Untuk kode javascript dengan data yang lengkap bisa dilihat di repository GitHub berikut: Repository GitHub
Berikut merupakan tampilan dan cara penggunaan :
- Tampilan Utama
Pada tampilan utama akan ditampilkan tombol dropdown dari Provinsi, Kota atau Kabupaten, Kecamatan, dan Hasil Pencarian Kode Pos dan Kelurahan yang Tersedia.
- Pilih nama Provinsi
Selanjutnya kita harus memilih nama Provinsi dari pilihan yang tersedia pada dropdown level 1. Contoh di bawah ini ketika saya memilih Provinsi Jawa Timur :
(sebelum)
(sesudah)
- Pilih nama Kabupaten/Kota
Setelah kita memilih Provinsi, karena dropdown level 2 bergantung pada inputan dropdown level 1, maka dropdown level 2 ini akan menampilkan semua nama Kota atau Kabupaten yang ada di Provinsi Jawa Timur. Misalkan saya memilih Kota Surabaya seperti gambar di bawah :
(sebelum)
(sesudah)
- Pilih nama Kecamatan
Dengan sistem yang sama seperti dropdown level 2, dropdown level 3 bergantung pada inputan dropdown level 2. Sehingga dropdown level 3 akan menampilkan semua nama Kecamatan yang ada di Kota Surabaya. Istilah kata, saya memilih Kecamatan Sukolilo seperti tampak di bawah :
(sebelum)
(sesudah)
-
Hasil pencarian kode pos dan Kelurahan yang tersedia berdasarkan inputan
Provinsi, Kabupaten/Kota, dan Kecamatan
Untuk dropdown level 4 bergantung pada inputan dropdown level 3. Sehingga dropdown level 4 akan menampilkan seluruh Kode Pos beserta nama Kelurahannya yang ada di Kecamatan Sukolilo. Akhirnya kita bisa mendapatkan informasi Kode Pos & Kelurahan, beserta nama Kota atau Kabupaten dan Provinsi dari wilayah di Indonesia. Tampilannya dalam bentuk dropdown seperti berikut ini :
(hasil akhir pencarian)
Pada tampilan utama akan ditampilkan tombol dropdown dari Provinsi, Kota atau Kabupaten, Kecamatan, dan Hasil Pencarian Kode Pos dan Kelurahan yang Tersedia.
Selanjutnya kita harus memilih nama Provinsi dari pilihan yang tersedia pada dropdown level 1. Contoh di bawah ini ketika saya memilih Provinsi Jawa Timur :
 |
| (sebelum) |
 |
| (sesudah) |
Setelah kita memilih Provinsi, karena dropdown level 2 bergantung pada inputan dropdown level 1, maka dropdown level 2 ini akan menampilkan semua nama Kota atau Kabupaten yang ada di Provinsi Jawa Timur. Misalkan saya memilih Kota Surabaya seperti gambar di bawah :
 |
| (sebelum) |
 |
| (sesudah) |
Dengan sistem yang sama seperti dropdown level 2, dropdown level 3 bergantung pada inputan dropdown level 2. Sehingga dropdown level 3 akan menampilkan semua nama Kecamatan yang ada di Kota Surabaya. Istilah kata, saya memilih Kecamatan Sukolilo seperti tampak di bawah :
 |
| (sebelum) |
 |
| (sesudah) |
Untuk dropdown level 4 bergantung pada inputan dropdown level 3. Sehingga dropdown level 4 akan menampilkan seluruh Kode Pos beserta nama Kelurahannya yang ada di Kecamatan Sukolilo. Akhirnya kita bisa mendapatkan informasi Kode Pos & Kelurahan, beserta nama Kota atau Kabupaten dan Provinsi dari wilayah di Indonesia. Tampilannya dalam bentuk dropdown seperti berikut ini :
 |
| (hasil akhir pencarian) |
Berikut merupakan tampilan website Pencari Kode Pos Wilayah Indonesia: Tampilan Website
Jadi begitulah pembuatan situs web pencarian kode pos dengan JavaScript. Mohon maaf atas kekurangan & keterbatasan situs web yang telah saya buat. Semoga bermanfaat! :)
Comments
Post a Comment