Webgis/01/QUICK_START.md

⚡ QUICK START - Mulai Cepat dalam 5 Menit

🎯 Langkah 1: Ekstrak & Tempatkan File

1. Extract ZIP ke folder web Anda:

   • Windows: C:\xampp\htdocs\pemetaan-kemiskinan
   • Linux: /var/www/html/pemetaan-kemiskinan

2. Pastikan XAMPP/Web Server JALAN

   • Buka XAMPP Control Panel
   • Klik "Start" untuk Apache
   • Klik "Start" untuk MySQL

---

🎯 Langkah 2: Setup Database (3 Langkah Mudah)

Cara A: Menggunakan phpMyAdmin (PALING MUDAH)

1. Buka browser → ketik: http://localhost/phpmyadmin
2. Klik menu "Import" di bagian atas
3. Klik "Choose File" → pilih file database.sql dari folder pemetaan-kemiskinan
4. Klik tombol "Import" → SELESAI ✅

Tunggu 5-10 detik, database akan terbuat otomatis dengan semua tabel yang diperlukan.

Cara B: Manual (Jika Cara A tidak berhasil)

1. Buka phpMyAdmin → http://localhost/phpmyadmin
2. Di sebelah kiri, cari "Create new database"
3. Ketik nama: pemetaan_kemiskinan
4. Klik "Create"
5. Pilih database yang baru dibuat
6. Klik tab "SQL"
7. Copy-paste semua kode dari file database.sql
8. Klik "Go"

---

🎯 Langkah 3: Verifikasi Koneksi

1. Buka file: php/koneksi.php
2. Periksa konfigurasi (biasanya tidak perlu diubah):

   $host = "localhost";
   $username = "root";
   $password = "";                    // Kosongkan jika XAMPP default
   $database = "pemetaan_kemiskinan";
   

3. Jika ada password MySQL, ubah baris:

   $password = "password_anda_di_sini";
   

---

🎯 Langkah 4: Buka Aplikasi

Buka browser dan ketik:

http://localhost/pemetaan-kemiskinan/

✅ SELESAI! Aplikasi siap digunakan!

---

🎮 Test Aplikasi

Test Input Masyarakat Miskin:

1. Map akan muncul dengan area Pontianak
2. Klik tombol di sidebar → Tab "Masyarakat"
3. Klik di peta untuk set koordinat lokasi
4. Isi form dengan data:

   Nama: Siti Nur Azizah
   Tanggal Lahir: 1985-03-15
   Jenis Kelamin: Perempuan
   Alamat: Jl. Mahakam No. 25
   Kelurahan: Sungai Jawi
   Kecamatan: Pontianak Kota
   No HP: 081234567890
   Status BPJS: Ya
   (Koordinat sudah otomatis dari klik peta)
   

5. Klik "Simpan Data" → Data berhasil disimpan ✅
6. Lihat marker merah di peta, dan nama muncul di sidebar list

Test Input Rumah Ibadah:

1. Klik tab "Rumah Ibadah" di sidebar
2. Klik di peta untuk koordinat
3. Isi form:

   Nama: Masjid Al-Hidayah
   Jenis: Masjid
   Alamat: Jl. Diponegoro No. 45
   Nama Pemimpin: Ustaz Ahmad
   

4. Klik "Simpan Data" → Marker hijau muncul ✅

---

📱 Interface Penjelasan

┌─────────────────────────────────────────┐
│ SIDEBAR (300px)         │  MAP (Sisa)   │
│                         │               │
│ 📍 Pemetaan Kemiskinan  │  Marker Merah │
│ [Masyarakat] [Ibadah]   │  Masyarakat   │
│                         │               │
│ [Search Box]            │  Marker Hijau │
│ [Filter Dropdown]       │  Rumah Ibadah │
│                         │               │
│ - Nama 1                │               │
│ - Nama 2                │  Klik di peta │
│ - Nama 3                │  = Set Koordinat
│                         │               │
│ [Tombol Hapus]          │  Klik Marker  │
│                         │  = Lihat Detail
└─────────────────────────────────────────┘

---

❓ FAQ

Q: Koordinat tidak ketangkap saat klik peta? A: Pastikan modal form sudah terbuka (berwarna putih). Klik dulu field nama atau di peta, baru akan bisa set koordinat otomatis.

Q: Data tidak tampil di peta? A: Cek browser console (F12), atau pastikan latitude longitude valid (antara -90 hingga 90 untuk lat, -180 hingga 180 untuk lng).

Q: Database tidak terbuat? A: Cek di phpMyAdmin apakah database pemetaan_kemiskinan sudah ada. Jika belum, buat manual atau coba import ulang file database.sql.

Q: Error "Access denied" saat jalankan? A: Password MySQL tidak cocok. Edit file php/koneksi.php dan ubah password sesuai konfigurasi MySQL Anda.

Q: Peta tidak muncul? A: Periksa koneksi internet (butuh untuk CDN Leaflet & OpenStreetMap). Atau cek browser console untuk error.

---

🔧 Struktur File Penting

pemetaan-kemiskinan/
├── index.html              ← Buka file ini di browser
├── database.sql            ← File untuk import database
├── config.php              ← Konfigurasi umum
├── php/
│   ├── koneksi.php         ← EDIT INI jika ada password MySQL
│   ├── simpan_masyarakat.php
│   ├── simpan_rumah_ibadah.php
│   ├── ambil_data_masyarakat.php
│   └── ...
├── js/
│   └── main.js             ← Logic aplikasi
└── docs/
    └── PANDUAN_PHPMY_ADMIN.md ← Dokumentasi detail

---

📞 Jika Ada Masalah

1. Cek Browser Console (Tekan F12):

   • Lihat tab "Console"
   • Ada error merah? Catat error message-nya
   • Refresh halaman (Ctrl+F5)

2. Cek phpMyAdmin:

   • Database ada?
   • Tabel ada? (masyarakat_miskin, rumah_ibadah, dll)
   • Ada data sample?

3. Cek File koneksi.php:

   • Username & password MySQL cocok?
   • Nama database benar? (pemetaan_kemiskinan)

4. Restart Web Server:

   • Tutup XAMPP
   • Buka kembali XAMPP
   • Start Apache & MySQL

---

✅ Selesai! Nikmati aplikasi pemetaan kemiskinan Anda!

Untuk dokumentasi lengkap, baca file README.md