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 Activity". Beri nama aplikasi Anda dan
Read more

EAS PBKK Kelas D

Image
Evaluasi Akhir Semester 5025201003 -  Rahmat Faris Akbar PBKK (D) SOAL 1 Bagaimana tahapan pembangunan aplikasi dengan memanfaatkan framework? Jawaban:          Pembangunan aplikasi dengan memanfaatkan framework melibatkan beberapa tahapan yang umumnya berlaku untuk sebagian besar proyek pengembangan perangkat lunak. Berikut adalah tahapan-tahapan tersebut: Analisis kebutuhan: Tahap ini melibatkan pemahaman yang mendalam tentang kebutuhan bisnis atau pengguna yang ingin diselesaikan melalui aplikasi. Kita perlu mengumpulkan persyaratan fungsional dan non-fungsional, serta merancang sketsa atau wireframe awal untuk aplikasi. Desain: Pada tahap ini, kita merancang arsitektur aplikasi, termasuk struktur folder, pola desain, dan komponen utama. Kita juga perlu merancang basis data dan skema, serta merencanakan antarmuka pengguna (UI) dan antarmuka pemrograman aplikasi (API) jika diperlukan. Pemil
Read more

TUGAS 5&6 PBBK : Membuat 'Hello World', Router dan Controller dengan Framework CI

Image
Tugas 6 5025201003 -  Rahmat Faris Akbar PBKK (D)        Pada tugas kali ini, kita akan membuat program bernma 'Hello World' yang memiliki router dan controller dengan framework CI. Routing yang akan ditambahkan menuju ke dua halaman, yaitu halaman About Us dan halaman Contact Us dengan default controller halaman welcome. Code Igniter yang digunakan dalam pembuatan tugas ini adalah versi 3. Berikut adalah tahapan melakukan routing pada framework CodeIgniter : Tambahkan route about dan contact pada file routes.php pada folder config Buat function about dan contact pada file Welcome.php Buat 2 file yang bernama about.php dan contact.php pada folder views Source Code :  (Link Repository) Tampilan : (Halaman Welcome to Hello World) (Halaman About Us) (Halaman Contact Us)
Read more