unknown
194 lines
5.6 KiB
Markdown
194 lines
5.6 KiB
Markdown
# ⚡ 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):
|
|
```php
|
|
$host = "localhost";
|
|
$username = "root";
|
|
$password = ""; // Kosongkan jika XAMPP default
|
|
$database = "pemetaan_kemiskinan";
|
|
```
|
|
3. **Jika ada password MySQL**, ubah baris:
|
|
```php
|
|
$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`*
|