uas-poverty-mapping/README.md

# SIPKEM — Sistem Informasi Pemetaan Kemiskinan

Aplikasi WebGIS interaktif untuk memetakan rumah ibadah dan rumah tangga miskin, serta menganalisis jangkauan bantuan di Kota Pontianak, Kalimantan Barat.

**Author**
Nama: Anugerah Az-zuhri Rahman
NIM: D1041231049
Kelas: SIG D

---

## Deskripsi

Sistem ini membantu pemangku kepentingan dalam mengidentifikasi sebaran rumah tangga miskin dan menganalisis jangkauan bantuan dari rumah ibadah terdekat. Pengurus dapat mengelola data langsung dari antarmuka peta, sementara pengguna umum dapat melihat seluruh informasi tanpa hak ubah.

---

## Fitur Utama

- Peta interaktif berbasis OpenStreetMap dengan marker rumah ibadah dan rumah miskin
- Zona jangkauan (radius buffer) dari setiap rumah ibadah, dapat diatur secara dinamis
- Klasifikasi rumah miskin berdasarkan status jangkauan bantuan
- Dashboard statistik: total rumah ibadah, total rumah miskin, dan distribusi per wilayah
- Manajemen data lengkap (tambah, edit, hapus, seret marker) khusus untuk Pengurus
- Riwayat bantuan per rumah tangga beserta jenis dan tanggal pemberian
- Sistem autentikasi berbasis peran (Pengguna dan Pengurus)

---

## Teknologi

| Komponen   | Teknologi                                        |
| ---------- | ------------------------------------------------ |
| Frontend   | React, Leaflet.js, React-Leaflet, React Router   |
| Backend    | PHP 8+ dengan PDO                                |
| Database   | MySQL / MariaDB (dengan tipe data spasial POINT) |
| Build Tool | Vite                                             |
| Tile Peta  | OpenStreetMap                                    |

---

## Persyaratan Sistem

- Server lokal: XAMPP, Laragon, atau sejenisnya dengan PHP 8+ dan MySQL 5.7+
- Node.js 18+ dan npm
- Web browser modern
- Git

---

## Instalasi

**1. Clone Repository**

```bash
git clone https://git.ifuntanhub.dev/anugerah/uas-poverty-mapping.git
cd sipkem
```

**2. Setup Database**

Jalankan script SQL yang tersedia:

```bash
mysql -u root -p < sipkem_database.sql
```

Script akan membuat database `sipkem` beserta seluruh tabel yang dibutuhkan secara otomatis.

**3. Konfigurasi Backend**

Buka `api.php` dan sesuaikan koneksi database:

```php
define('DB_HOST', 'localhost');
define('DB_NAME', 'sipkem');
define('DB_USER', 'root');
define('DB_PASS', '');
```

**4. Install Dependensi Frontend**

```bash
npm install
```

**5. Jalankan Aplikasi**

```bash
npm run dev
```

Akses melalui `http://localhost:5173`

**6. Build untuk Produksi**

```bash
npm run build
# Salin folder dist/ beserta api.php ke direktori web server
```

---

## Struktur Proyek

```
sipkem/
├── api.php                 # Seluruh endpoint backend (PHP + PDO)
├── index.html              # Entry point HTML
├── vite.config.js          # Konfigurasi Vite
├── package.json
├── sipkem_database.sql     # Script setup database lengkap
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   ├── index.css
│   ├── pages/
│   │   ├── AuthPage.jsx    # Halaman login & registrasi
│   │   ├── AuthPage.css
│   │   ├── MapPage.jsx     # Halaman peta utama
│   │   └── MapPage.css
│   ├── components/
│   │   ├── Modal.jsx
│   │   ├── ModePanel.jsx
│   │   ├── StatsPanel.jsx
│   │   ├── LegendPanel.jsx
│   │   ├── BantuanModal.jsx
│   │   ├── ConfirmDialog.jsx
│   │   └── Toast.jsx
│   ├── hooks/
│   │   ├── useToast.js
│   │   └── useConfirm.js
│   └── utils/
│       └── api.js          # Fungsi komunikasi ke api.php
```

---

## Skema Database

**Tabel: users**
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | VARCHAR(36) PK | UUID |
| nama | VARCHAR(100) | Nama pengguna |
| email | VARCHAR(150) | Unik, digunakan untuk login |
| password_hash | VARCHAR(255) | Hash bcrypt |
| role | ENUM | `pengguna` atau `pengurus` |

**Tabel: rumah_ibadah**
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | VARCHAR(36) PK | UUID |
| nama | VARCHAR(150) | Nama rumah ibadah |
| jenis | VARCHAR(50) | Masjid, Gereja, dll |
| geom | POINT | Koordinat spasial |
| jangkauan_m | INT | Radius jangkauan dalam meter |

**Tabel: rumah_miskin**
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | VARCHAR(36) PK | UUID |
| nama_kk | VARCHAR(150) | Nama kepala keluarga |
| geom | POINT | Koordinat spasial |
| ri_id | VARCHAR(36) FK | Rumah ibadah yang membina |
| jarak_ke_ri_m | FLOAT | Jarak ke rumah ibadah dalam meter |

**Tabel: jenis_bantuan**
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | VARCHAR(36) PK | UUID |
| nama | VARCHAR(100) | Nama jenis bantuan |
| kategori | VARCHAR(50) | Pangan, Kesehatan, dll |

**Tabel: riwayat_bantuan**
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | VARCHAR(36) PK | UUID |
| rm_id | VARCHAR(36) FK | Rumah miskin penerima |
| bantuan_id | VARCHAR(36) FK | Jenis bantuan |
| tanggal | DATE | Tanggal pemberian |
| user_id | VARCHAR(36) FK | Pengurus yang mengonfirmasi |

**Tabel: riwayat_binaan**
| Kolom | Tipe | Keterangan |
|---|---|---|
| id | INT PK | Auto increment |
| rm_id | VARCHAR(36) | Rumah miskin |
| ri_id_lama | VARCHAR(36) | Rumah ibadah sebelumnya |
| ri_id_baru | VARCHAR(36) | Rumah ibadah baru |

---

## Akses dan Hak Pengguna

| Fitur                      | Pengguna | Pengurus |
| -------------------------- | -------- | -------- |
| Lihat peta dan marker      | Ya       | Ya       |
| Lihat detail dan popup     | Ya       | Ya       |
| Lihat riwayat bantuan      | Ya       | Ya       |
| Tambah / edit / hapus data | Tidak    | Ya       |
| Seret posisi marker        | Tidak    | Ya       |
| Atur radius jangkauan      | Tidak    | Ya       |
| Catat dan kelola bantuan   | Tidak    | Ya       |

---

## Akun Default

Setelah menjalankan `sipkem_database.sql`, tersedia akun pengurus bawaan:

- Email: `admin@sipkem.id`
- Password: `admin1234`

Ganti password segera setelah instalasi pertama.

---

## Keamanan

- Autentikasi berbasis sesi dengan verifikasi peran di setiap endpoint
- Password di-hash menggunakan bcrypt melalui `password_hash()`
- Seluruh query database menggunakan prepared statements (mencegah SQL injection)
- Validasi dan sanitasi input pada sisi server