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
git clone https://git.ifuntanhub.dev/anugerah/uas-poverty-mapping.git
cd sipkem
2. Setup Database
Jalankan script SQL yang tersedia:
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:
define('DB_HOST', 'localhost');
define('DB_NAME', 'sipkem');
define('DB_USER', 'root');
define('DB_PASS', '');
4. Install Dependensi Frontend
npm install
5. Jalankan Aplikasi
npm run dev
Akses melalui http://localhost:5173
6. Build untuk Produksi
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 |
| 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