September 19, 2022

PWEB - Tugas 3 Membuat Sistem Pencarian Kode Pos

Pemrograman Web

Tugas 3 - Membuat Sistem Pencarian Kode Pos

Nama : Wina Tungmiharja
NRP : 5025201242

Kelas : Pemrograman Web B

1. Deskripsi Tugas

Membuat Website pencarian Kode Pos dengan Input Provinsi, Kabupaten, Kecamatan, dan Kelurahan

2. Hasil

Hasil Pencarian : link Pencarian Kode Pos

Link Repository : Github

3. Penjelasan

Pengambilan Data kode pos ini saya ambil menggunakan 2 API, yaitu

- https://ibnux.github.io/data-indonesia/

API ini digunakan untuk mendapatkan data Provinsi, Kabupaten, dan Kecamatan

- https://kodepos.vercel.app/search

API ini digunakan untuk mendapatkan nilai Kode Pos

const getProvinsi = async () => {
  const response = await fetch(
    "https://ibnux.github.io/data-indonesia/provinsi.json"
  );
  const data = await response.json();
  return data;
};

const getKabupaten = async (id) => {
  const response = await fetch(
    `https://ibnux.github.io/data-indonesia/kabupaten/${id}.json`
  );
  const data = await response.json();
  return data;
};

const getKecamatan = async (id) => {
  const response = await fetch(
    `https://ibnux.github.io/data-indonesia/kecamatan/${id}.json`
  );
  const data = await response.json();
  return data;
};

const getKelurahan = async (id) => {
  const response = await fetch(
    `https://ibnux.github.io/data-indonesia/kelurahan/${id}.json`
  );
  const data = await response.json();
  return data;
};

Fungsi ini dipanggil untuk melakukan pemanggilan API yang mengembalikan data-data yang diinginkan

const getResult = async (key) => {
const response = await fetch(`https://kodepos.vercel.app/search?q=${key}`);
const data = await response.json();
return data;
};
Fungsi ini dipanggil untuk mendapatkan hasil Kode Pos dari data yang diberikan

const removeData = (e) => {
while (e.hasChildNodes()) {
e.removeChild(e.firstChild);
}
};
removeData(), fugsi ini dipaggil untuk menghapus child dari node element yang dituju

const displayProvinsi = async () => {
const options = await getProvinsi();
pronvinsiSelect.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
pronvinsiSelect.appendChild(newOption);
});
displayKabupaten();
};

const displayKabupaten = async () => {
removeData(kabupatenSelect);
const options = await getKabupaten(pronvinsiSelect.value);
kabupatenSelect.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
kabupatenSelect.appendChild(newOption);
});
displayKecamatan();
};

const displayKecamatan = async () => {
removeData(kecamatanSelect);
const options = await getKecamatan(kabupatenSelect.value);
kecamatanSelect.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
kecamatanSelect.appendChild(newOption);
});
displayKelurahan();
};

const displayKelurahan = async () => {
removeData(kelurahanSelect);
const options = await getKelurahan(kecamatanSelect.value);
kelurahanSelect.value = options[0];
options.forEach((element) => {
const newOption = document.createElement("option");
newOption.value = element.id;
newOption.text = element.nama;
kelurahanSelect.appendChild(newOption);
});
displayResult();
};
Beberapa fungsi diatas dipanggil untuk mengubah hasil data dari pemanggilan API menjadi Node Element berupa <select>

const displayResult = async () => {
resultElement.innerHTML = "memuat...";

const results = await getResult(
kelurahanSelect.options[kelurahanSelect.selectedIndex].text
);
if (results.data.length <= 0) {
resultElement.innerHTML = "tidak ditemukan data";
} else {
resultElement.innerHTML = results.data[0].postalcode;
}
};
Sedangkan displayResult(), ini dipanggil untuk mengambil data kode pos dan ditampilkan pada Node

displayProvinsi();
Fungsi ini dipaggil saat Page pertama kali di-render pada Browser untuk menampilkan data pilihan Provinsi

Komentar