first commit
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
<mxfile host="Electron" modified="2024" agent="Mozilla/5.0" version="22.1.2" type="device">
|
||||
<diagram id="diag1" name="Page-1">
|
||||
<mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
|
||||
<mxCell id="a1_title" value="Alur Data: Tambah Titik Kemiskinan" style="text;html=1;align=center;fontStyle=1;fontSize=18;" vertex="1" parent="1"><mxGeometry x="80" y="20" width="600" height="40" as="geometry"/></mxCell>
|
||||
|
||||
<mxCell id="n1" value="Pengurus Login &
Aktifkan Mode Edit" style="rounded=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1"><mxGeometry x="80" y="80" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="n2" value="Klik Lokasi di Peta" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="280" y="80" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="n3" value="Modal Form Muncul
(Input Data Keluarga)" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="480" y="80" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="n4" value="Submit Form
(Validasi Client-Side)" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="480" y="200" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="n5" value="Fetch API POST
(create_kemiskinan.php)" style="rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="280" y="200" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="n6" value="Validasi Sesi (check_auth.php)
& Validasi Data PHP" style="shape=hexagon;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="40" y="190" width="180" height="80" as="geometry"/></mxCell>
|
||||
<mxCell id="n7" value="INSERT INTO kemiskinan" style="shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1"><mxGeometry x="70" y="320" width="120" height="70" as="geometry"/></mxCell>
|
||||
<mxCell id="n8" value="Response Success JSON" style="rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="280" y="325" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="n9" value="Update Peta (Marker Baru)
& Sidebar (Card Baru)" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="480" y="325" width="140" height="60" as="geometry"/></mxCell>
|
||||
|
||||
<mxCell id="e_1" edge="1" source="n1" target="n2" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e_2" edge="1" source="n2" target="n3" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e_3" edge="1" source="n3" target="n4" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e_4" edge="1" source="n4" target="n5" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e_5" edge="1" source="n5" target="n6" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e_6" edge="1" source="n6" target="n7" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e_7" edge="1" source="n7" target="n8" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e_8" edge="1" source="n8" target="n9" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
@@ -0,0 +1,31 @@
|
||||
<mxfile host="Electron" modified="2024" agent="Mozilla/5.0" version="22.1.2" type="device">
|
||||
<diagram id="diag1" name="Page-1">
|
||||
<mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
|
||||
<mxCell id="a2_title" value="Alur Data: Update Radius Rumah Ibadah" style="text;html=1;align=center;fontStyle=1;fontSize=18;" vertex="1" parent="1"><mxGeometry x="80" y="20" width="600" height="40" as="geometry"/></mxCell>
|
||||
|
||||
<mxCell id="m1" value="Pengurus Ubah Input Radius
di Panel Manajemen Data" style="rounded=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1"><mxGeometry x="80" y="80" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="m2" value="Klik Tombol Update Radius" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="300" y="80" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="m3" value="Fetch API POST
(update_masjid_radius.php)" style="rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="520" y="80" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="m4" value="Validasi Sesi & Hak Akses" style="shape=hexagon;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="510" y="200" width="180" height="80" as="geometry"/></mxCell>
|
||||
<mxCell id="m5" value="UPDATE masjid SET radius" style="shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1"><mxGeometry x="320" y="205" width="120" height="70" as="geometry"/></mxCell>
|
||||
<mxCell id="m6" value="Response Success" style="rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="80" y="210" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="m7" value="Render Ulang Lingkaran (Circle)
di Leaflet.js" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="80" y="320" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="m8" value="Hitung Ulang Status Terjangkau
(Warna Marker Keluarga)" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="300" y="320" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="m9" value="Perbarui Card Statistik
Wilayah" style="rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="520" y="320" width="160" height="60" as="geometry"/></mxCell>
|
||||
|
||||
<mxCell id="em_1" edge="1" source="m1" target="m2" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="em_2" edge="1" source="m2" target="m3" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="em_3" edge="1" source="m3" target="m4" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="em_4" edge="1" source="m4" target="m5" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="em_5" edge="1" source="m5" target="m6" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="em_6" edge="1" source="m6" target="m7" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="em_7" edge="1" source="m7" target="m8" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="em_8" edge="1" source="m8" target="m9" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
@@ -0,0 +1,46 @@
|
||||
<mxfile host="Electron" modified="2024" agent="Mozilla/5.0" version="22.1.2" type="device">
|
||||
<diagram id="diag1" name="Page-1">
|
||||
<mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
|
||||
<mxCell id="p1_title" value="Arsitektur Sistem WebGIS GeoPoverty v2.0" style="text;html=1;align=center;fontStyle=1;fontSize=18;fontColor=#1e3a5f;" vertex="1" parent="1"><mxGeometry x="80" y="20" width="800" height="40" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Users -->
|
||||
<mxCell id="p1_user1" value="👤 PUBLIK / WARGA
(Akses tanpa login)" style="ellipse;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;fontSize=12;" vertex="1" parent="1"><mxGeometry x="120" y="80" width="200" height="70" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_user2" value="👑 PENGURUS / PIMPINAN
(Akses dengan login)" style="ellipse;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=1;fontSize=12;" vertex="1" parent="1"><mxGeometry x="580" y="80" width="200" height="70" as="geometry"/></mxCell>
|
||||
|
||||
<!-- PRESENTATION LAYER -->
|
||||
<mxCell id="p1_pres" value="🖥️ PRESENTATION LAYER (Client Browser)" style="swimlane;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;fontSize=13;startSize=35;" vertex="1" parent="1"><mxGeometry x="80" y="200" width="800" height="150" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_html" value="UI & Layout
(index.html, lumina.css)" style="rounded=1;fillColor=#fff;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="p1_pres"><mxGeometry x="40" y="55" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_mapjs" value="Peta Interaktif
(map.js, Leaflet, OSM)" style="rounded=1;fillColor=#fff;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="p1_pres"><mxGeometry x="210" y="55" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_loadjs" value="Logika Aplikasi & Fetch
(loadData.js, auth.js)" style="rounded=1;fillColor=#fff;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="p1_pres"><mxGeometry x="380" y="55" width="140" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_moduljs" value="Modul Fitur
(pesan.js, laporan.js, dll)" style="rounded=1;fillColor=#fff;strokeColor=#6c8ebf;fontSize=11;" vertex="1" parent="p1_pres"><mxGeometry x="550" y="55" width="140" height="60" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Arrow User to Pres -->
|
||||
<mxCell id="e1" edge="1" source="p1_user1" target="p1_pres" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
<mxCell id="e2" edge="1" source="p1_user2" target="p1_pres" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
|
||||
<!-- BUSINESS LOGIC LAYER -->
|
||||
<mxCell id="p1_biz" value="⚙️ BUSINESS LOGIC LAYER (Server — PHP)" style="swimlane;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;fontSize=13;startSize=35;" vertex="1" parent="1"><mxGeometry x="80" y="420" width="800" height="150" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_auth" value="Autentikasi & Sesi
(login.php, check_auth.php)" style="rounded=1;fillColor=#fff;strokeColor=#82b366;fontSize=11;" vertex="1" parent="p1_biz"><mxGeometry x="40" y="55" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_crud1" value="CRUD Utama
(kemiskinan, masjid)" style="rounded=1;fillColor=#fff;strokeColor=#82b366;fontSize=11;" vertex="1" parent="p1_biz"><mxGeometry x="230" y="55" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_crud2" value="Modul Tambahan
(anggota, bantuan, pesan)" style="rounded=1;fillColor=#fff;strokeColor=#82b366;fontSize=11;" vertex="1" parent="p1_biz"><mxGeometry x="420" y="55" width="160" height="60" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_export" value="Utilitas
(export_csv.php, koneksi.php)" style="rounded=1;fillColor=#fff;strokeColor=#82b366;fontSize=11;" vertex="1" parent="p1_biz"><mxGeometry x="610" y="55" width="160" height="60" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Arrow Pres to Biz -->
|
||||
<mxCell id="e3" value="REST API (Fetch POST/GET JSON)" style="edgeStyle=orthogonalEdgeStyle;fontSize=11;fontStyle=1;" edge="1" source="p1_pres" target="p1_biz" parent="1"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="480" y="380"/></Array></mxGeometry></mxCell>
|
||||
|
||||
<!-- DATA LAYER -->
|
||||
<mxCell id="p1_data" value="🗄️ DATA LAYER (MySQL — webgis_kemiskinan)" style="swimlane;fillColor=#ffe6cc;strokeColor=#d79b00;fontStyle=1;fontSize=13;startSize=35;" vertex="1" parent="1"><mxGeometry x="80" y="640" width="800" height="140" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_db1" value="Data Spasial
(kemiskinan, masjid)" style="shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff;strokeColor=#d79b00;fontSize=11;" vertex="1" parent="p1_data"><mxGeometry x="150" y="50" width="120" height="70" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_db2" value="Data Relasional
(anggota, bantuan, dll)" style="shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff;strokeColor=#d79b00;fontSize=11;" vertex="1" parent="p1_data"><mxGeometry x="340" y="50" width="120" height="70" as="geometry"/></mxCell>
|
||||
<mxCell id="p1_db3" value="Data Pengguna
(pengguna)" style="shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff;strokeColor=#d79b00;fontSize=11;" vertex="1" parent="p1_data"><mxGeometry x="530" y="50" width="120" height="70" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Arrow Biz to Data -->
|
||||
<mxCell id="e4" value="MySQLi Prepared Statements" style="edgeStyle=orthogonalEdgeStyle;fontSize=11;fontStyle=1;" edge="1" source="p1_biz" target="p1_data" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
@@ -0,0 +1,51 @@
|
||||
<mxfile host="Electron" modified="2024" agent="Mozilla/5.0" version="22.1.2" type="device">
|
||||
<diagram id="diag1" name="Page-1">
|
||||
<mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<mxCell id="e_title" value="Entity Relationship Diagram (ERD) - WebGIS GeoPoverty v2.0" style="text;html=1;align=center;fontStyle=1;fontSize=18;" vertex="1" parent="1"><mxGeometry x="40" y="20" width="900" height="40" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Table: pengguna -->
|
||||
<mxCell id="t_pengguna" value="<b>pengguna</b><hr><p style="margin:0;line-height:1.5;">PK id : INT<br>username : VARCHAR<br>password_hash : VARCHAR<br>nama_lengkap : VARCHAR<br>role : ENUM<br>FK masjid_id : INT<br>aktif : TINYINT</p>" style="shape=rectangle;fillColor=#fff2cc;strokeColor=#d6b656;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;spacingRight=10;spacingBottom=10;fontSize=12;html=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="40" y="100" width="220" height="200" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Table: masjid -->
|
||||
<mxCell id="t_masjid" value="<b>masjid (rumah ibadah)</b><hr><p style="margin:0;line-height:1.5;">PK id : INT<br>nama_masjid : VARCHAR<br>pic_masjid : VARCHAR<br>alamat : TEXT<br>latitude : DECIMAL<br>longitude : DECIMAL<br>radius : INT<br>jenis_ibadah : ENUM</p>" style="shape=rectangle;fillColor=#dae8fc;strokeColor=#6c8ebf;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;spacingRight=10;spacingBottom=10;fontSize=12;html=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="360" y="100" width="220" height="200" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Table: kemiskinan -->
|
||||
<mxCell id="t_kemiskinan" value="<b>kemiskinan</b><hr><p style="margin:0;line-height:1.5;">PK id : INT<br>nama_kepala_keluarga : VARCHAR<br>jumlah_kk : INT<br>alamat : TEXT<br>latitude : DECIMAL<br>longitude : DECIMAL<br>status_keluarga : ENUM</p>" style="shape=rectangle;fillColor=#d5e8d4;strokeColor=#82b366;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;spacingRight=10;spacingBottom=10;fontSize=12;html=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="680" y="100" width="220" height="200" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Table: pesan_komunikasi -->
|
||||
<mxCell id="t_pesan" value="<b>pesan_komunikasi</b><hr><p style="margin:0;line-height:1.5;">PK id : INT<br>FK pengirim_id : INT<br>FK penerima_id : INT<br>judul : VARCHAR<br>isi : TEXT<br>jenis : ENUM<br>status : ENUM</p>" style="shape=rectangle;fillColor=#e1d5e7;strokeColor=#9673a6;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;spacingRight=10;spacingBottom=10;fontSize=12;html=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="40" y="360" width="220" height="200" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Table: histori_bantuan -->
|
||||
<mxCell id="t_bantuan" value="<b>histori_bantuan</b><hr><p style="margin:0;line-height:1.5;">PK id : INT<br>FK kemiskinan_id : INT<br>FK masjid_id : INT<br>jenis_bantuan : ENUM<br>jumlah_bantuan : DECIMAL<br>tanggal_bantuan : DATE<br>status_penyaluran : ENUM</p>" style="shape=rectangle;fillColor=#f8cecc;strokeColor=#b85450;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;spacingRight=10;spacingBottom=10;fontSize=12;html=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="360" y="360" width="220" height="200" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Table: anggota_keluarga -->
|
||||
<mxCell id="t_anggota" value="<b>anggota_keluarga</b><hr><p style="margin:0;line-height:1.5;">PK id : INT<br>FK kemiskinan_id : INT<br>nama : VARCHAR<br>tanggal_lahir : DATE<br>jenis_kelamin : ENUM<br>hubungan_keluarga : ENUM<br>status_hidup : ENUM<br>pendidikan : ENUM</p>" style="shape=rectangle;fillColor=#ffe6cc;strokeColor=#d79b00;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;spacingRight=10;spacingBottom=10;fontSize=12;html=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="680" y="360" width="220" height="200" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Table: laporan_kondisi -->
|
||||
<mxCell id="t_laporan" value="<b>laporan_kondisi</b><hr><p style="margin:0;line-height:1.5;">PK id : INT<br>FK kemiskinan_id : INT<br>nama_pelapor : VARCHAR<br>nomor_wa : VARCHAR<br>kategori : ENUM<br>deskripsi : TEXT<br>status_laporan : ENUM</p>" style="shape=rectangle;fillColor=#f5f5f5;strokeColor=#666666;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;spacingRight=10;spacingBottom=10;fontSize=12;html=1;whiteSpace=wrap;" vertex="1" parent="1"><mxGeometry x="680" y="620" width="220" height="180" as="geometry"/></mxCell>
|
||||
|
||||
<!-- Relationships -->
|
||||
<!-- pengguna to masjid -->
|
||||
<mxCell id="r1" value="1..N" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;endFill=1;startArrow=none;fontSize=11;" edge="1" source="t_pengguna" target="t_masjid" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
|
||||
<!-- pesan to pengguna -->
|
||||
<mxCell id="r2" value="N..1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;endFill=1;startArrow=none;fontSize=11;" edge="1" source="t_pesan" target="t_pengguna" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
|
||||
<!-- bantuan to masjid -->
|
||||
<mxCell id="r3" value="N..1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;endFill=1;startArrow=none;fontSize=11;" edge="1" source="t_bantuan" target="t_masjid" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
|
||||
<!-- bantuan to kemiskinan -->
|
||||
<mxCell id="r4" value="N..1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;endFill=1;startArrow=none;fontSize=11;" edge="1" source="t_bantuan" target="t_kemiskinan" parent="1"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="470" y="330"/><mxPoint x="790" y="330"/></Array></mxGeometry></mxCell>
|
||||
|
||||
<!-- anggota to kemiskinan -->
|
||||
<mxCell id="r5" value="N..1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;endFill=1;startArrow=none;fontSize=11;" edge="1" source="t_anggota" target="t_kemiskinan" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
|
||||
|
||||
<!-- laporan to kemiskinan -->
|
||||
<mxCell id="r6" value="N..1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;endFill=1;startArrow=none;fontSize=11;" edge="1" source="t_laporan" target="t_kemiskinan" parent="1"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="950" y="710"/><mxPoint x="950" y="200"/></Array></mxGeometry></mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
@@ -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.
|
||||
Reference in New Issue
Block a user