Autofill Alamat Checkout dengan API Wilayah

Form checkout adalah tempat uang bocor. Setiap kolom teks bebas adalah kesempatan pengguna salah ketik, dan setiap alamat yang salah adalah paket yang kembali ke gudang. Solusinya bukan validasi yang lebih galak — melainkan membuat kesalahan menjadi mustahil.

Empat tingkat, empat dropdown

Wilayah administratif Indonesia berbentuk pohon yang rapi: provinsi → kabupaten/kota → kecamatan → kelurahan/desa. Setiap dropdown hanya menampilkan anak dari pilihan sebelumnya, jadi kombinasi yang tidak valid tidak pernah muncul di layar.

# 34 provinsi
GET /wilayah/provinces

# kab/kota di dalam satu provinsi
GET /wilayah/regencies?province=32

# kecamatan di dalam satu kab/kota
GET /wilayah/districts?regency=3204

# kelurahan/desa di dalam satu kecamatan
GET /wilayah/villages?district=3204010

Implementasi dropdown bertingkat

Polanya selalu sama: saat sebuah level berubah, ambil level berikutnya dan kosongkan yang di bawahnya.

const API = 'https://v1.api.my.id';

// Panggil lewat backend Anda — jangan taruh API key di browser.
async function ambil(path) {
  const res = await fetch('/api/proxy' + path);   // backend Anda meneruskan ke API
  return (await res.json()).data;
}

async function isiProvinsi() {
  isiSelect('provinsi', await ambil('/wilayah/provinces'));
}

document.getElementById('provinsi').onchange = async (e) => {
  kosongkan(['kabupaten', 'kecamatan', 'kelurahan']);
  isiSelect('kabupaten', await ambil('/wilayah/regencies?province=' + e.target.value));
};

document.getElementById('kabupaten').onchange = async (e) => {
  kosongkan(['kecamatan', 'kelurahan']);
  isiSelect('kecamatan', await ambil('/wilayah/districts?regency=' + e.target.value));
};

document.getElementById('kecamatan').onchange = async (e) => {
  kosongkan(['kelurahan']);
  isiSelect('kelurahan', await ambil('/wilayah/villages?district=' + e.target.value));
};

function isiSelect(id, rows) {
  const el = document.getElementById(id);
  el.innerHTML = '<option value="">Pilih…</option>' +
    rows.map((r) => `<option value="${r.code}">${r.name}</option>`).join('');
  el.disabled = false;
}

function kosongkan(ids) {
  ids.forEach((id) => {
    const el = document.getElementById(id);
    el.innerHTML = '<option value="">Pilih…</option>';
    el.disabled = true;
  });
}

Simpan kodenya, bukan namanya

Ini keputusan desain database yang paling penting di artikel ini. Simpan kode wilayah, bukan string nama:

CREATE TABLE alamat (
  id             BIGSERIAL PRIMARY KEY,
  user_id        BIGINT NOT NULL,
  provinsi_code  TEXT NOT NULL,   -- "32"
  kabupaten_code TEXT NOT NULL,   -- "3204"
  kecamatan_code TEXT NOT NULL,   -- "3204010"
  kelurahan_code TEXT NOT NULL,   -- "3204010001"
  detail         TEXT NOT NULL,   -- "Jl. Merdeka No. 1, RT 03/RW 05"
  kode_pos       TEXT
);

Kode bersifat stabil dan bisa di-join. Nama tidak: "Kab. Bandung" dan "KABUPATEN BANDUNG" dan "Bandung (Kab)" adalah tiga string berbeda yang menunjuk tempat yang sama, dan laporan Anda akan menghitungnya sebagai tiga wilayah.

Pencarian untuk pengguna yang terburu-buru

Empat dropdown itu akurat tapi lambat bagi pengguna yang sudah tahu tujuannya. Beri mereka jalan pintas dengan endpoint pencarian yang menembus semua tingkat sekaligus:

GET /wilayah/search?q=menteng&limit=5

# → district:MENTENG, village:MENTENG DALAM, village:MENTENG ATAS …

Pola terbaik: kotak pencarian di atas, dropdown bertingkat sebagai cadangan di bawahnya. Pengguna yang tahu persis alamatnya mengetik tiga huruf dan selesai; pengguna yang ragu menelusuri pohonnya.

Dampak yang bisa diukur

Setelah mengganti kolom teks bebas dengan dropdown bertingkat, dua metrik yang layak Anda pantau: persentase paket yang gagal terkirim karena alamat, dan waktu rata-rata pengisian form. Yang pertama biasanya turun tajam; yang kedua sering ikut turun, karena memilih dari daftar lebih cepat daripada mengetik.