Membuat Situs Pencarian Kode Pos Indonesia

 Membuat Situs Pencarian Kode Pos Indonesia

Hans Sean Nathanael | 5025201019 | 2022/2023

        Proyek ini merupakan tugas latihan javascript. Di sini saya membuat sistus untuk melakukan pencarian kode pos dengan memasukkan provinsi, kota/kabupaten, kecamatan, dan kelurahan. Untuk mendapatkan data kode pos saya menggunakan API yang sudah tersedia di internet yang dibuat oleh iBachor -- buka API --, dengan begitu saya tidak perlu membuat database penyimpanan daftar kode pos.

Link situs: situs pencarian kode pos

Link repository: repository

Berikut adalah screenshot tampilan

 function convertToArray(json) {  
   let result = [];  
   let i = 0;  
   for (let key in json) {  
     result[i++] = [json[key], key];  
   }  
   return result;  
 }  
 function deleteOption(select) {  
   while (select.firstChild) {  
     select.removeChild(select.lastChild);  
   }  
 }  

Fungsi yang atas digunakan untuk mengubah object menjadi array agar mudah di sorting dan yang bawah untuk menghapus semua child dari sebuah object document yang akan digunakan untuk menghapus pilihan pada <select>.

 async function getProvinsi() {  
   let dataProvinsi = await fetch("https://kodepos-2d475.firebaseio.com/list_propinsi.json?print=pretty");  
   let dictionaryDataProvinsi = await dataProvinsi.json();  
   let daftarProvinsi = convertToArray(dictionaryDataProvinsi);  
   daftarProvinsi.sort();  
   return daftarProvinsi;  
 }  
 async function getKotaKabupaten(id) {  
   let dataKotaKabupaten = await fetch("https://kodepos-2d475.firebaseio.com/list_kotakab/" + id + ".json?print=pretty");  
   let dictionaryDataKotaKabupaten = await dataKotaKabupaten.json();  
   daftarKotaKabupaten = convertToArray(dictionaryDataKotaKabupaten);  
   daftarKotaKabupaten.sort();  
   return daftarKotaKabupaten;  
 }  
 async function getKecamatanKelurahan(id) {  
   daftarKecamatan = [];  
   let dataKecamatanKelurahanKodePos = await fetch("https://kodepos-2d475.firebaseio.com/kota_kab/" + id + ".json?print=pretty");  
   let dictionaryDataKecamatanKelurahan = await dataKecamatanKelurahanKodePos.json();  
   let kecamatan = [];  
   for (let i = 0; i < dictionaryDataKecamatanKelurahan.length; i++) {  
     kecamatan.push(dictionaryDataKecamatanKelurahan[i]["kecamatan"]);  
   }  
   daftarKecamatan = [...new Set(kecamatan)];  
   daftarKelurahan = {};  
   for (let i = 0; i < dictionaryDataKecamatanKelurahan.length; i++) {  
     if (!daftarKelurahan.hasOwnProperty(dictionaryDataKecamatanKelurahan[i]["kecamatan"])) {  
       daftarKelurahan[dictionaryDataKecamatanKelurahan[i]["kecamatan"]] = [];  
     }  
     daftarKelurahan[dictionaryDataKecamatanKelurahan[i]["kecamatan"]].push([dictionaryDataKecamatanKelurahan[i]["kelurahan"], dictionaryDataKecamatanKelurahan[i]["kodepos"]])  
   }  
   for (let i = 0; i < daftarKecamatan.length; i++) {  
     daftarKelurahan[daftarKecamatan[i]].sort();  
   }  
   daftarKecamatan.sort();  
 }  

Fungsi-fungsi di atas digunakan untuk mengambil data nama-nama provinsi, kota/kabupaten, kecamatan, kelurahan, dan kode pos dari situs yang dibuat oleh iBachor. Fungsi fetch() digunakan untuk mengambil data tersebut.

 async function loadProvinsi() {  
   let daftarProvinsi = await getProvinsi();  
   deleteOption(selectProvinsi);  
   for (let i = 0; i < daftarProvinsi.length; i++) {  
     let newOption = document.createElement("option");  
     newOption.value = daftarProvinsi[i][1];  
     newOption.text = daftarProvinsi[i][0];  
     selectProvinsi.appendChild(newOption);  
   }  
   selectProvinsi.value = daftarProvinsi[0][1];  
   loadKabupatenKota(selectProvinsi.value);  
 }  
 async function loadKabupatenKota(id) {  
   deletePilihanKotaKabupaten();  
   let dataKotaKabupaten = await getKotaKabupaten(id);  
   for (let i = 0; i < dataKotaKabupaten.length; i++) {  
     let newOption = document.createElement("option");  
     newOption.value = dataKotaKabupaten[i][1];  
     newOption.text = dataKotaKabupaten[i][0];  
     selectKotaKabupaten.appendChild(newOption);  
   }  
   selectKotaKabupaten.value = dataKotaKabupaten[0][1];  
   loadKecamatan(selectKotaKabupaten.value);  
 }  
 async function loadKecamatan(id) {  
   deletePilihanKecamatan();  
   await getKecamatanKelurahan(id);  
   for (let i = 0; i < daftarKecamatan.length; i++) {  
     let newOption = document.createElement("option");  
     newOption.value = daftarKecamatan[i];  
     newOption.text = daftarKecamatan[i];  
     selectKecamatan.appendChild(newOption);  
   }  
   selectKecamatan.value = daftarKecamatan[0];  
   loadKelurahan(selectKecamatan.value);  
 }  
 async function loadKelurahan(kecamatan) {  
   deletePilihanKelurahan();  
   for (let i = 0; i < daftarKelurahan[kecamatan].length; i++) {  
     let newOption = document.createElement("option");  
     newOption.value = daftarKelurahan[kecamatan][i][1];  
     newOption.text = daftarKelurahan[kecamatan][i][0];  
     selectKelurahan.appendChild(newOption);  
   }  
   selectKelurahan.value = daftarKelurahan[kecamatan][0][1];  
   tampilkanKodePos(selectKelurahan.value);  
 }  

Fungsi-fungsi di atas akan dipanggil ketika terjadi perubahan pada input listbox alamat kecuali loadProvinsi yang hanya akan dipanggil sekali ketika situs dibuka.

 function deletePilihanKotaKabupaten() {  
   deleteOption(selectKotaKabupaten);  
   deletePilihanKecamatan();  
 }  
 function deletePilihanKecamatan() {  
   deleteOption(selectKecamatan);  
   deletePilihanKelurahan();  
 }  
 function deletePilihanKelurahan() {  
   deleteOption(selectKelurahan);  
 }  

Fungsi-fungsi di atas akan dipanggil untuk menghapus semua pilihan pada listbox alamat ketika terjadi perubahan input alamat karena ketika terjadi perubahan input, data membutuhkan waktu untuk diproses sehingga pilihan-pilihan itu akan dihapus terlebih dahulu baru kemudian ditampilkan data yang baru dan untuk mencegah bug.

 function tampilkanKodePos(kode) {  
   kodePos.innerHTML = kode;  
 }  

Fungsi tampilkanKodePos digunakan untuk menampilkan kode pos dari alamat yang dimasukkan dan akan dipanggil ketika terjadi perubahan input listbox alamat.