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:

  1. Provinsi = level 1
  2. Kota/Kabupaten = level 2
  3. Kecamatan = level 3
  4. 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 :


Berikut merupakan kode style.css -nya :


Berikut merupakan kode script.js -nya :


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 :

  1. Tampilan Utama
    Pada tampilan utama akan ditampilkan tombol dropdown dari Provinsi, Kota atau Kabupaten, Kecamatan, dan Hasil Pencarian Kode Pos dan Kelurahan yang Tersedia.


  2. 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)

  3. 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)

  4. 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)



  5. 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)

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

Popular posts from this blog

TUGAS 1 PPB F : Aplikasi Profil Diri (Smartphone, Dekstop, Tablet, Smartwatch, TV)

Image
TUGAS 1 Membuat Aplikasi Profil Diri dengan Jetpack Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Dalam era digital saat ini, memiliki aplikasi profil pribadi atau bisnis bisa menjadi cara efektif untuk memperkenalkan diri atau layanan Anda kepada dunia. Dengan menggunakan Jetpack Compose, pembuatan UI di Android menjadi lebih sederhana dan lebih intuitif. Artikel ini akan membahas bagaimana membangun aplikasi profil sederhana dengan menggunakan Jetpack Compose. Persiapan:      Sebelum memulai, pastikan Anda telah menginstal Android Studio dan setup lingkungan pengembangan Android Anda dengan benar. Juga, pastikan bahwa Anda menggunakan versi Android Studio dan Gradle yang mendukung Jetpack Compose. Langkah 1: Setup Proyek Buat proyek baru di Android Studio dan pilih template "Empty Compose ...
Read more

TUGAS 7 PPB F : ViewModel and State in Compose

Image
TUGAS 7   ViewModel and State in Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-14 kelas Pemrograman Perangkat Bergerak F, kita ditugaskan membuat  aplikasi game Unscramble menggunakan Jetpack Compose dan ViewModel dari library Android Jetpack mengikuti panduan tutorial ViewModel and State in Compose . Panduan ini akan memandu kita melalui pengaturan proyek, memahami arsitektur, dan mengimplementasikan fungsionalitas game. Gambaran Proyek                Aplikasi Unscramble adalah permainan kata tunggal di mana pemain menebak kata yang diacak. Aplikasi ini menampilkan kata yang diacak, dan pemain menebak kata yang benar menggunakan semua huruf yang disediakan. Poin diberikan untuk tebakan yang benar, dan permainan melacak jumlah kata yang ditebak dengan benar. Setiap permainan terdiri dari 10 kata...
Read more

EVALUASI TENGAH SEMESTER PPB F

Image
Evaluasi Tengah Semester   Studi Kasus Aplikasi "myITS Mahasiswa" 5025201003 -  Rahmat Faris Akbar PPB (F) Link Docs:  jawaban dalam bentuk docs 1. Apa keuntungan menggunakan platform mobile Android dibandingkan dengan platform Propietary seperti Apple? Jawaban: Keterbukaan dan Fleksibilitas :  Android adalah sistem operasi yang bersifat open-source, yang memungkinkan para pengembang dan produsen perangkat untuk mengubah dan menyesuaikan sistem sesuai dengan kebutuhan mereka. Hal ini berbeda dengan iOS dari Apple yang memiliki sistem yang tertutup dan terkontrol ketat. Variasi Perangkat :  Android digunakan oleh berbagai merek dan model smartphone dan tablet, memberikan lebih banyak pilihan perangkat bagi konsumen dalam berbagai segmen harga. Sementara itu, Apple hanya menyediakan beberapa model yang umumnya berada di segmen harga lebih tinggi. Biaya Pengembangan yang Lebih Rendah :  Untuk para pengembang, masuk ke pasar Androi...
Read more