Webgis_final/01/codeanalysis/codeanalyisis.md

Analisis Kode: Sistem Pemetaan Kemiskinan

Proyek ini adalah aplikasi web bernama Sistem Pemetaan Kemiskinan yang digunakan untuk memetakan lokasi masyarakat miskin dan rumah ibadah di suatu wilayah (secara bawaan diset ke daerah Pontianak). Aplikasi ini dibangun dengan menggunakan arsitektur client-server sederhana yang memisahkan sisi tampilan (frontend) dan sisi server (backend).

Struktur Direktori dan File

Berikut adalah hasil analisis berdasarkan penataan folder dan file yang ada di dalam proyek ini:

1. Root Direktori (/01/)

Direktori utama ini menyimpan file-file inti, konfigurasi, dokumentasi, dan titik masuk aplikasi (entry point).

• index.html: File utama antarmuka pengguna. Memuat kerangka HTML, tata letak sidebar, kontainer peta, gaya desain CSS internal, dan kerangka form modal untuk menambahkan data. File ini juga mengintegrasikan pustaka eksternal Leaflet.js untuk merender peta interaktif.
• config.php: File konfigurasi utama di sisi server. Berisi definisi konstanta penting seperti konfigurasi database MySQL, pengaturan awal tampilan peta (latitude, longitude, zoom level), serta lingkungan aplikasi (development).
• database.sql: File skrip SQL yang memuat skema struktur database, berisi tabel masyarakat_miskin, rumah_ibadah, bantuan_riwayat, bpjs_record, dan tabel users untuk sistem login. Terdapat juga beberapa data sampel (dummy) untuk keperluan testing.
• README.md & QUICK_START.md: Dokumentasi proyek yang menjelaskan instruksi instalasi, penggunaan aplikasi, serta fitur-fiturnya.
• {php,js,css,icons,docs}: Folder kosong yang sepertinya terbuat karena ketidaksengajaan (typo pada command-line saat membuat multiple directories sekaligus).

2. Folder js/ (Logika Frontend / Interaksi)

Folder ini menangani segala logika yang berjalan di sisi browser (klien).

• main.js: Skrip JavaScript tunggal yang mengontrol aplikasi. Bertanggung jawab atas:
  • Menginisialisasi peta dari index.html.
  • Mengambil data spasial dari backend menggunakan Fetch API secara asinkron (AJAX).
  • Meletakkan marker (titik lokasi) untuk masyarakat miskin dan rumah ibadah di peta.
  • Memproses pencarian (search) dan filter di bagian sidebar.
  • Menangani aksi pengiriman form, tombol klik, serta memberikan feedback sukses/error kepada pengguna (alert).

3. Folder php/ (Logika Backend / API)

Berisi sekumpulan skrip PHP yang berfungsi sebagai perantara antara antarmuka pengguna dan database. Endpoint ini menerima input dan mengembalikan format JSON.

• koneksi.php: Pusat koneksi database menggunakan mysqli. Menangani perizinan CORS Headers agar API bisa diakses dari frontend dan mengatur proteksi anti-XSS melalui fungsi sanitasi input.
• Endpoint Pengambilan Data (ambil_*.php):
  • ambil_data_masyarakat.php & ambil_rumah_ibadah.php: Merespons permintaan dengan daftar titik-titik lokasi dari tabel terkait di database.
  • ambil_detail.php: Menampilkan data terperinci masyarakat miskin, mencakup data BPJS dan riwayat bantuan.
• Endpoint Penyimpanan Data (simpan_*.php):
  • simpan_masyarakat.php, simpan_rumah_ibadah.php: Mengamankan data yang masuk dari POST Request form, memvalidasi dan memasukkannya ke database. Terdapat file lain seperti simpan_bantuan.php dan simpan_bpjs.php untuk relasi tabel sekunder.
• hapus_data.php: Endpoint untuk menghapus data berdasarkan ID.

4. Folder codeanalysis/

• codeanalyisis.md: File dokumen Markdown tempat tersimpannya hasil analisis kode yang menguraikan arsitektur dan struktur proyek ini.

5. Folder docs/

• PANDUAN_PHPMY_ADMIN.md: Dokumen petunjuk teknis sekunder terkait pengelolaan basis data menggunakan phpMyAdmin.

---

Kesimpulan Arsitektur Sistem

Proyek ini mengadopsi pola perancangan API-driven (Vanilla).

1. Frontend dibuat reaktif tanpa membebani server, di mana index.html dan main.js merender visual serta mengirimkan permintaan asinkron.
2. Backend (PHP) bertindak hanya sebagai API pengelola data yang merespons dalam format JSON (bukan sebagai perender HTML). Hal ini membuat kode lebih terisolasi, bersih (clean code), dan mudah dirawat ke depannya.