PEMBUATAN APLIKASI WEB “KKA PEMDA”

Padangsidimpuan, 10 Mei 2026.

Silahkan cek website jadinya di : KKA PEMDA. Gambar/Thumbnail yang Anda lihat bisa jadi akan berbeda dengan hasil di web anda (yang anda susun sesuai dengan kode yang tersedia di halaman ini). Namun jika anda mengambil kode html langsung dari github perbedaan tidaklah banyak (saat ini ada 5 jenis file di Github bukan 3 jenis file seperti yang dijelaskan di atas). Harap maklum jika tulisan tidak lagi diupdate.

– Penulis.

APLIKASI WEB KKA PEMDA?

KKA merupakan akronim (singkatan) dari “Kode Klasifikasi Arsip”, sedangkan PEMDA adalah singkatan dari kata “Pemerintah Daerah”. Seperti yang dituliskan dalam Peraturan Menteri Dalam Negeri Nomor 83 Tahun 2022 tentang Kode Klasifikasi Arsip di Lingkungan Kementerian Dalam Negeri dan Pemerintah Daerah, Kode Klasifikasi Arsip adalah simbol atau tanda pengenal suatu struktur fungsi yang digunakan untuk membantu menyusun tata letak identitas Arsip. Sedangkan Klasifikasi Arsip adalah pola pengaturan arsip secara berjenjang dari hasil pelaksanaan fungsi dan tugas instansi menjadi beberapa kategori unit informasi kearsipan. (Fahamkah…? Fahaaammm…)

Saya tidak akan menjelaskan apa itu aplikasi web. Intinya apa yang anda lihat di website saat ini juga merupakan bentuk dari aplikasi web itu sendiri, sehingga tidak perlu saya definisikan lagi.

Sejak Permendagri tentang KKA ini dikeluarkan, tidak lama kemudian, sebenarnya sudah ada aplikasi resmi Pemerintah Republik Indonesia bernama SRIKANDI. SRIKANDI juga merupakan salah satu bentuk Aplikasi Web. Nah. Apakah KKA PEMDA ini hadir untuk mengganti SRIKANDI?. Tidak. KKA PEMDA hanyalah aplikasi web alternatif yang dapat anda manfaatkan ketika :

  • Anda hanya memiliki smartphone/handphone yang terhubung ke internet untuk mengakses SRIKANDI. Saat ini SRIKANDI bersifat online only, namun Anda tidak memiliki hak akses ke SRIKANDI (username/password/dan hak sejenisnya);
  • Anda kesusahan atau memakan waktu lama untuk mencari kode yang sesuai secara manual dari kertas lembaran permendagri-nya;
  • Anda membutuhkan fitur pencarian “Real Time” dan dapat diakses dari gadget telekomunikasi anda dan Anda hanya butuh informasi tentang Kode Klasifikasi Arsip-nya saja.

TUJUAN PEMBUATAN KKA PEMDA

Seperti yang saya tuliskan, pembuatan KKA PEMDA bukanlah untuk menggantikan SRIKANDI. Mengingat SRIKANDI adalah aplikasi web RESMI yang telah dikeluarkan Pemerintah Republik Indonesia dan dikelola oleh Tim Koordinasi Nasional SRIKANDI dimana terdapat ANRI, KemenpanRB, Komdigi, Badan Siber dan Sandi Negara, Kemendagri dan Bappenas (6 Kementerian/Lembaga Negara). Jadi, jangan heran jika tujuan pembuatan KKA PEMDA model Aplikasi Web sudah tersedia di SRIKANDI (bahkan lebih lengkap). Apa saja tujuannya?. Berikut ini adalah tujuan pembuatan KKA PEMDA ini;

  • Menyajikan Kode Klasifikasi Arsip (untuk Pemerintah Daerah Saja) dalam format tabel yang mudah dibaca;
  • Menyediakan fitur pencarian cepat pada kolom Kode dan Uraian;
  • Membuat Aplikasi yang dapat diakses gratis dari ruang lingkup lebih luas (anda tidak perlu login, cukup buka link dan cari kode);
  • Mengupayakan aplikasi ringan dan responsif di berbagai perangkat (database telah diubah dari “PDF teks” menjadi data “JSON” yang begitu di “load” oleh pengguna, ikut juga “terload” di browser pengguna itu sendiri bersamaan dengan kode html-nya. Sehingga sekali terload, aplikasi tidak lagi bolak balik mengambil data dari internet).

ISI/FITUR APLIKASI WEB KKA PEMDA

Aplikasi Web KKA PEMDA ini tidak memiliki banyak isi seperti halnya SRIKANDI. Sebagai gambaran, KKA PEMDA hanya akan memiliki sedikit isi dari banyaknya pengaturan dan data yang terlibat di SRIKANDI. Dimana pada KKA Pemda;

  • Data bersifat tetap (fixed/tidak berubah-ubah) sesuai Permendagri Nomor 83 Tahun 2022. Oleh sebab itu, aplikasi web ini dapat digolongkan sebagai Statis Web atau sering disebut Single Page Application (SPA) Static;
  • Setelah diolah dari Permendagri diperolah Baris Data yang memiliki Kode Klasifikasi Arsip adalah 2.988 Rows “Nomor”, “Kode”, dan “Uraian” (Rows = Baris dalam 1 ikatan data, jumlah kolom bisa 1,2,3, atau tergantung besarnya database);
  • Hanya terdapat 3 Kolom, yakni; (1) Nomor, kolom buatan sendiri berdasarkan susunan autonumbering setiap barisnya, (2)Kode (diambil dari Permendagri), dan (3)Uraian (diambil dari Permendagri);
  • Dibuatkan fitur pencarian berdasarkan teks yang ada di kolom Kode dan Uraian, pagination (penataan tabel dan halaman), highlight kata kunci (semacam tanda pada teks yang sama dengan kata dalam pencarian diberi mark warna kuning), dan hasil di halaman tabel yang sama.

ALAT DAN PERSIAPAN PEMBUATAN KKA PEMDA

Dalam pembuatan aplikasi web KKA PEMDA ini saya menggunakan alat sebagai berikut;

  1. Laptop/Komputer yang terhubung dengan internet dengan operating system di dalamnya. Karena saya tidak tahu spesifikasi minimum saya bertanya kepada Deepseek. Spesifikasi minimumnya adalah PC/Laptop dengan RAM minimum 4 GB, Prosessor Minimum 1.6 GHz, dan Monitor beresolusi minimal 1366×738 pixels. Soal kapasitas harddisk dan jenis operating system tidak disebutkan batasan selama dapat berfungsi;
  2. PC/Laptop sudah memiliki software;
  • DB Browser for SQLite yang akan digunakan untuk mengkonversi data Excel menjadi data SQLite dan kemudian menkonversinya menjadi data JSON;
  • Text Editor yang akan digunakan untuk mengolah kode HTML/JS/CSS;
  • Web Browser untuk pengujian lokal aplikasi web;
  • Akun Git dan Akses ke Github yang akan digunakan untuk menghosting web statis secara gratis.

Sebelum melanjutkan ke tahapan pembuatan kode html/js/css nya, kita perlu melakukan persiapan sehingga akan diperoleh data awal. Saya melakukan pengolahan berkas PDF (peraturan) khusunya data KKA bagian B di Permendagri 83/2022. Dalam hal ini saya mengubahnya menjadi data excel (data.xlsx) yang telah mengikuti susunan di permendagri dan merubah data Excel tersebut menjadi data SQLite (data.db). Masih di software yang sama, saya meng-eksport data SQLite tersebut menjadi “data.JSON”.

Singkatnya, saya mengubah PDF–>Excel–>SQLite–>JSON.

Jika anda mengikuti tahapan saya, anda akan memperoleh hasil akhir database berupa data JSON sebagaimana hasil saya berikut ini;

  • Nama File = data.json (tergantung apa nama yang anda buat);
  • Nama Kolom yakni; Kode, Nomor, Uraian;
  • Jumlah baris dalam kode 14.942 baris kode (data ini kemungkinan besar akan sama jumlahnya dengan saya jika tata cara dan tahapan penyusunan sama. Jika berbeda sebenarnya tidak masalah selama tidak mengubah substansi isi).

Hasil data.json ini dapat Anda lihat di Link: data.json

INDEX.HTML KKA PEMDA

Saya tidak dapat menjelaskan bagaimana kode dibuat dan bagaimana kode seharusnya berjalan. Bahkan saya tidak malu mengatakan bahwa untuk kode di bawah ini, saya dibantu oleh AI Gratis. Salah satu AI gratis yang sering saya gunakan untuk bertanya hal-hal teknis. Baiklah berikut adalah kode yang saya gunakan;

 Index.html silahkan anda download dari Link: index.html

TESTING LOKAL

Adapun Prosedur testing lokal yang dapat kita lakukan adalah sebagai berikut :

  1. Simpan index.html dan data.json dalam satu folder.
  2. Buka index.html dengan browser.
  3. Uji skenario:
    • Pencarian kata “surat tugas” → muncul data terkait,
    • Pencarian kode “800” → filter berdasarkan kode,
    • Klik Next/Prev → pindah halaman (jika hasil banyak),
    • Klik Reset → semua data muncul,
    • Cek tampilan HP (kecilkan browser ke ukuran terkecil yang memungkinkan).

Jika Hasil testing lokal berhasil dan fungsi berjalan normal, silahkan lanjutkan ke tahapan Deploy.

DEPLOY KE GITHUB PAGES

Saya menyarankan bahwa tahapan deploy ini anda pelajari dari tutorial terbaru di Youtube. Karena selalu ada kemungkinan tampilan github yang berubah karena adanya pembaharuan tiap tahunnya. Berikut adalah tahapan men-deploy ke github :

  1. Buat repo baru GitHub → New repository → beri nama
  2. Upload file “index.html” dan “data.json” ke folder repo
  3. Buat “.nojekyll”. File kosong untuk menonaktifkan Jekyll.
  4. Sebelum “Commit” pastikan hasil file di folder repo ada 3, yakni “index.html”, “data.json”, dan “.nojekyll” (tentunya tanpa tanda kutip ya!). Klik tombol “Commit”.
  5. Klik menu Settings → Pages → ubah bagian Branch: main → /root → Save,
  6. Tunggu proses deploy selama sekitar 1-5 menit, atau cek status di Actions.

MENGAPA PERLU FILE “.nojekyll”?

GitHub Pages secara default mencoba membangun dengan Jekyll. File “.nojekyll” memberitahu GitHub untuk tidak menjalankan proses build dan langsung menyalin file statis.

BAGAIMANA JIKA ADA KENDALA?

Jika terjadi kendala, pada bagian deploy ini coba gunakan fasilitas AI gratis dari Gemini atau Deepseek. Capture error yang muncul dan upload gambar error ke AI. Troubleshooting soal deploy ke github sungguh tidak saya kuasai.

VERIFIKASI ONLINE

Setelah berhasil akan muncul link yang juga menyatakan deploy anda berhasil. Biasanya format link yang diberikan adalah : “https://[username].github.io/[repository-name]/” (tanpa tanda kutip). Ceklist verifikasi kita saat ini adalah ;

  • Web dapat diakses publik
  • Tabel menampilkan 100 data pertama
  • Pencarian berfungsi
  • Penataan Halaman berfungsi
  • Responsif di HP
  • Footer disclaimer tampil
  • Bagi yang pertama kali mengakses web melalui handphone android, bisa melakukan “instalasi” dan membuat shortcut tersendiri. Untuk digunakan secara offline.
Scroll to Top