PWEB - Latihan Membuat Web Pencarian Kode Pos

 Latihan Membuat Web Pencarian Kode Pos

Nama :Putu Ravindra Wiguna

NRP : 5025201237

    Pada latihan kali ini, diminta untuk membuat suatu website yang dapat melakukan pencarian kode pos dari nama Provinsi, Kabupaten/Kota, Kecamatan, dan Kelurahan. Untuk kali ini website yang saya buat ini masih menggunakan vanilla HTML-CSS-JS. 

    Proses pengerjaan website ini saya mulai dengan mencari tutorial bagaimana cara membuat dropdown pada website. Saya menggunakan dropdown ini untuk mencegah user memasukkan input yang invalid serta memudahkan user untuk menemukan daerah yang ingin dicari. Setelah melakukan googling, saya menemukan tutorial untuk membuat dropdown yang dynamic yaitu pada link berikut: Create dynamic DropDownList in HTML using JavaScript . Alasan dibuat dynamic adalah agar input daerah berikutnya yang merupakan bagian dari daerah sebelumnya ( misalkan provinsi lalu kabupaten) terikat, sehingga memudahkan user menemukan daerah yang diinginkan serta mengurangi input invalid dan juga agar dropdown list tidak berisi terlalu banyak item. Setelah memahami kode pada website tersebut, saya memodifikasinya untuk keperluan website saya.

    Lalu untuk data yang akan ditampilkan pada dropdown tersebut setelah berpikir panjang, saya memutuskan untuk mengambil data dari suatu file JSON untuk memudahkan parsing dan pengambilan data/atribut dari data yang ada karena dari javascript sendiri sudah menghandle hal tersebut dan pengambilan data dari JSON tersebut cukup intuitive dan mudah dibaca dan dilakukan (oleh programmer). Namun untuk mencari file JSON tersebut saya belum menemukannya, sehingga yang saya lakuan mengubah data yang saya temui (berformat .csv) yang sudah ditambahkan kolom dibagian atas csv, dari link berikut: Wilayah-Administratif-Indonesia/csv at master · edwardsamuel/Wilayah-Administratif-Indonesia (github.com) ke format .json dengan bantuan website csv to json berikut ini: CSVJSON - CSVJSON. 
    Untuk mengambil data dari json tersebut, saya mencari tutorial kembali, dan mendapatkan tutorial dari The Coding Train: (1) 1.4: JSON - Working with Data and APIs in JavaScript - YouTube. Setelah beberapa trial and error saya berhasil mendapatkan data dari json dan ditampilkan di dropdown.

    Langkah selanjutnya adalah agar membuat isi dropdown dinamis, di sini yang saya lakukan adalah mengambil (fetch) data json kabupaten, kecamatan, dan kelurahan pada awal saat membuka website untuk mempersingkat waktu, kemudian data yang sudah diambil tersebut saya filter sesuai dengan daerah di atasnya. Awalnya saya menggunakan fungsi .filter pada javascript, namun fungsi tersebut sangat lambat untuk data yang banyak, maka dari itu saya memotong waktu untuk memfilter data dari O(n) fungsi filter (sepertinya kompleksitas filter adalah O(n), tetapi belum dapat saya konfirmasi) menjadi O(log(n) + k). Yakni dengan menggunakan binary search lalu melaukan linear search hingga menemukan keseluruhan data yang sesuai. Hal ini dapat dilakukan karena csv yang saya dapat telah terurut dan masing-masing daerah memiliki kode yang berupa integer.

    Setelah mengimplementasikan hal tersebut, sekarang waktunya mendapatkan kode pos. Ini saya dapatkan dari repository github berikut: ArrayAccess/Indonesia-Postal-And-Area: Indonesia Postal Code & Area (BPS) (github.com)  yang didalamnya terdapat directory - directory yang berisikan file json mengenai informasi kode pos daerah termasuk nama, dan atribut lainnya. Sama seperti di atas, file json dari github tersebut saya fetch yang urlnya saya sesuaikan dengan kode provinsi, kabupaten, dan kecamatan hingga kelurahannya. Terakhir menambahkan hasil json kode pos ke HTML.

    Fitur utama telah selesai, dan kini saatnya menambahkan sedikit CSS agar tampilan website lebih menarik. Itulah proses pembuatan tugas ini, dan berikut adalah source code programnya:

index.html

style.css

script.js

Selengkapnya dapat dilihat pada repository github berikut: RavindraWiguna/MembuatWebPencariKodePos (github.com)

Berikut Link websitenya: Kode Pos (ravindrawiguna.github.io)

Berikut tampilan website: