first commit

docs/penjelasan_diagram.md

@@ -0,0 +1,13 @@
+# Penjelasan Diagram WebGIS Kemiskinan & Masjid
+
+### 1. Arsitektur Sistem (Three-Tier)
+Sistem ini dibangun menggunakan arsitektur *Three-Tier* yang memisahkan aplikasi menjadi tiga lapisan utama. Lapisan pertama adalah *Presentation Layer* (Client) yang menggunakan HTML, CSS, JavaScript murni, dan Leaflet.js untuk menampilkan antarmuka peta interaktif kepada pengguna. Lapisan kedua adalah *Business Logic Layer* (Server) berbasis PHP murni yang menangani pemrosesan data, validasi, dan operasi CRUD melalui API *endpoints*. Lapisan ketiga adalah *Data Layer* berupa database MySQL (`webgis_kemiskinan`) yang bertugas menyimpan data spasial dan atribut dari entitas kemiskinan serta masjid secara persisten.
+
+### 2. Alur Data Tambah Titik Kemiskinan
+Proses penambahan data kemiskinan dimulai ketika operator mengklik lokasi tertentu pada peta yang memicu munculnya modal *form* input data. Setelah operator mengisi atribut seperti nama kepala keluarga, jumlah anggota, dan alamat, sistem pada sisi *client* (JavaScript) akan memvalidasi input tersebut sebelum mengirimkannya ke server melalui *Fetch API* (metode POST). Skrip PHP di server kemudian akan memvalidasi ulang data dan melakukan *query INSERT* ke database MySQL; jika berhasil, server mengembalikan respons sukses sehingga antarmuka peta dan daftar pada *sidebar* akan diperbarui secara *real-time* untuk menampilkan titik koordinat kemiskinan yang baru.
+
+### 3. Alur Data Update Radius Masjid
+Pembaruan radius layanan masjid dilakukan langsung melalui *card* masjid yang ada di *sidebar* tanpa perlu membuka halaman baru. Saat operator mengubah nilai radius dan menekan tombol *Update*, sistem memastikan nilai yang dimasukkan valid (berada dalam rentang 100 hingga 5.000 meter). Data ID masjid dan radius baru dikirimkan secara asinkron ke server PHP untuk memperbarui data di database (`UPDATE`), lalu secara instan *client* akan menyesuaikan ukuran lingkaran (*circle*) radius masjid pada peta serta menghitung dan memperbarui ulang warna marker kemiskinan (merah atau hijau) berdasarkan jangkauan radius yang baru.
+
+### 4. Entity Relationship Diagram (ERD)
+ERD sistem ini terdiri dari dua entitas utama yang saling independen secara struktural yaitu `kemiskinan` dan `masjid`, di mana masing-masing memiliki atribut *Primary Key* (`id`) serta menyimpan data koordinat spasial (`latitude` dan `longitude`). Keduanya tidak dihubungkan oleh *Foreign Key* relasional secara fisik di tingkat database, melainkan terhubung melalui relasi spasial logis yang dihitung pada sisi *client* (menggunakan fungsi jarak Leaflet). Status jangkauan sebuah keluarga miskin ditentukan secara dinamis dengan membandingkan jarak koordinat kemiskinan ke koordinat masjid terdekat; jika jarak tersebut lebih kecil atau sama dengan atribut `radius` milik masjid, maka keluarga tersebut masuk dalam area terjangkau.