# PANDUAN INSTALASI LOCALHOST SAMPAI HOSTING

**Project:** 05 - WebGIS Poverty Mapping  
**Teknologi:** PHP Native, MySQL/MariaDB, Leaflet.js, HTML, CSS, JavaScript Vanilla  
**Folder lokal:** `webgis-poverty/05/`  
**URL lokal:** `http://localhost/webgis-poverty/05/`

---

## 1. Ringkasan Aplikasi

Aplikasi ini adalah WebGIS Poverty Mapping untuk memetakan penerima bantuan dan rumah ibadah sebagai pemberi/penyalur bantuan. Sistem memiliki tiga role utama:

1. **Super Admin**
   - Mengelola seluruh data.
   - Menyetujui/menolak rumah ibadah.
   - Menyetujui/menolak penerima bantuan.
   - Mengelola akun admin rumah ibadah dan penerima.
   - Mengelola program bantuan dan laporan.
   - Menyetujui/menolak pengajuan hapus marker/pin.

2. **Admin Rumah Ibadah**
   - Mengelola rumah ibadah miliknya.
   - Mengelola akun penerima.
   - Mengajukan/mengelola penerima dalam radius rumah ibadahnya.
   - Membuat program bantuan.
   - Mencatat penyaluran bantuan.
   - Melihat laporan dan riwayat sesuai rumah ibadah yang dikelola.

3. **Penerima**
   - Registrasi akun.
   - Mengajukan titik lokasi rumah melalui peta.
   - Melihat status pengajuan.
   - Melihat riwayat bantuan.
   - Mengajukan hapus pin lokasi miliknya.

Aturan utama sistem:

- Radius tanggung jawab rumah ibadah adalah **300 meter**.
- Penerima otomatis dikaitkan ke **rumah ibadah terdekat** dalam radius 300 meter.
- Satu akun penerima hanya boleh memiliki **satu pin aktif**.
- Admin rumah ibadah dapat mengelola lebih dari satu rumah ibadah.
- Data yang sudah punya relasi tidak langsung dihapus permanen, tetapi dinonaktifkan atau diberi status hapus agar riwayat audit tetap aman.

---

## 2. Struktur File Project

Struktur project terbaru:

```text
05/
├── index.php
├── login.php
├── logout.php
├── register.php
├── dashboard.php
├── koneksi.php
├── auth.php
│
├── ambil_data_peta.php
├── ambil_laporan_penyaluran.php
├── ambil_program_bantuan.php
├── ambil_riwayat.php
├── ambil_user.php
│
├── ajukan_rumah_ibadah.php
├── hapus_rumah_ibadah.php
├── update_status_rumah_ibadah.php
│
├── tambah_penerima.php
├── edit_penerima.php
├── hapus_penerima.php
├── update_status_penerima.php
│
├── tambah_program_bantuan.php
├── edit_program_bantuan.php
├── hapus_program_bantuan.php
│
├── tambah_penyaluran.php
│
├── tambah_user.php
├── edit_user.php
├── hapus_user.php
│
├── backup_sql/
│   ├── schema.sql
│   ├── migration_fix_multi_ri_pin.sql
│   ├── migration_revisi_persetujuan_hapus.sql
│   └── migration_revisi_sinkronisasi.sql
│
├── RANGKUMAN_PENTING_PROJECT_05.md
└── PANDUAN_INSTALASI_LOCALHOST_SAMPAI_HOSTING.md
```

---

## 3. Persiapan Localhost dengan Laragon

1. Buka Laragon.
2. Klik **Start All** agar Apache dan MySQL/MariaDB aktif.
3. Buka folder Laragon:

```text
C:\laragon\www\
```

4. Buat folder project:

```text
C:\laragon\www\webgis-poverty\05\
```

5. Ekstrak isi ZIP project ke folder `05`.
6. Pastikan file `index.php`, `login.php`, `dashboard.php`, dan `koneksi.php` berada langsung di dalam folder `05`, bukan di dalam folder tambahan.

Struktur yang benar:

```text
C:\laragon\www\webgis-poverty\05\index.php
C:\laragon\www\webgis-poverty\05\login.php
C:\laragon\www\webgis-poverty\05\dashboard.php
C:\laragon\www\webgis-poverty\05\koneksi.php
```

Struktur yang salah:

```text
C:\laragon\www\webgis-poverty\05\05\index.php
```

Jika terjadi struktur salah, pindahkan semua file dari folder `05\05\` ke folder `05\` utama.

---

## 4. Import Database di Localhost

### 4.1 Buka phpMyAdmin

1. Jalankan Laragon.
2. Klik **Database** atau buka browser:

```text
http://localhost/phpmyadmin
```

3. Login phpMyAdmin Laragon:

```text
Username : root
Password : kosongkan
```

### 4.2 Pilihan File SQL

Ada dua pilihan import database:

#### Opsi A - Database Demo Lengkap

Gunakan file:

```text
05_povertydb.sql
```

Opsi ini cocok jika ingin langsung ada data contoh, akun demo, rumah ibadah, penerima, program, dan laporan.

#### Opsi B - Struktur Kosong dari ZIP

Gunakan file:

```text
backup_sql/schema.sql
```

Opsi ini cocok jika ingin membuat database dari awal. Setelah import, data contoh mungkin belum lengkap.

Jika ada file `05_povertydb.sql`, disarankan memakai file tersebut untuk demo karena akun-akun contoh sudah tersedia.

### 4.3 Cara Import

1. Buka phpMyAdmin.
2. Klik tab **Import**.
3. Pilih file SQL.
4. Klik **Go**.
5. Pastikan database `05_povertydb` berhasil dibuat.
6. Pastikan tabel berikut muncul:

```text
users
rumah_ibadah
penerima_bantuan
program_bantuan
penyaluran_bantuan
riwayat_status
```

---

## 5. Konfigurasi Database Localhost

Buka file:

```text
koneksi.php
```

Untuk Laragon, gunakan konfigurasi berikut:

```php
$host = "localhost";
$user = "root";
$pass = "";
$db   = "05_povertydb";
```

Simpan file tersebut.

---

## 6. Akun Login Default

Semua password akun demo adalah:

```text
password
```

Akun utama:

```text
Role     : Super Admin
Username : superadmin
Password : password
```

Contoh akun admin rumah ibadah jika memakai database demo:

```text
Username : admingerejasesilia
Password : password
Role     : admin_rumah_ibadah
```

```text
Username : admingerejaelim
Password : password
Role     : admin_rumah_ibadah
```

Contoh akun penerima jika memakai database demo:

```text
Username : penerima02
Password : password
Role     : penerima
```

```text
Username : penerima04
Password : password
Role     : penerima
```

```text
Username : penerima05
Password : password
Role     : penerima
```

Catatan:

- Akun dengan status `nonaktif` tidak bisa login.
- Password disimpan menggunakan `password_hash()` dan diverifikasi menggunakan `password_verify()`.
- Jangan menulis password plain text langsung di database.

---

## 7. Menjalankan Aplikasi di Localhost

1. Pastikan Laragon sudah **Start All**.
2. Buka browser.
3. Akses:

```text
http://localhost/webgis-poverty/05/
```

4. Jika diarahkan ke login, masuk menggunakan:

```text
Username : superadmin
Password : password
```

5. Setelah login, menu utama:

```text
index.php      = halaman peta WebGIS
dashboard.php  = dashboard, akun, program, penyaluran, laporan, dan riwayat
logout.php     = keluar dari sistem
```

---

## 8. Pengujian Fitur Localhost

### 8.1 Login Super Admin

1. Buka halaman login.
2. Masukkan username `superadmin`.
3. Masukkan password `password`.
4. Pastikan masuk ke dashboard.

### 8.2 Kelola Akun

1. Login sebagai super admin.
2. Buka **Dashboard**.
3. Cari bagian **Kelola Akun Pengguna**.
4. Tambah akun admin rumah ibadah atau penerima.
5. Gunakan password minimal 6 karakter. Untuk demo, isi `password`.
6. Simpan.
7. Coba login menggunakan akun baru.

### 8.3 Tambah Rumah Ibadah

1. Login sebagai super admin.
2. Buka **Peta**.
3. Klik lokasi pada peta.
4. Pilih **Tambah Rumah Ibadah**.
5. Isi data rumah ibadah.
6. Masukkan username admin rumah ibadah.
7. Simpan.
8. Jika super admin yang menambah, status rumah ibadah langsung dapat diterima.

### 8.4 Pengajuan Rumah Ibadah oleh Admin

1. Login sebagai admin rumah ibadah.
2. Buka peta.
3. Klik lokasi rumah ibadah.
4. Pilih **Ajukan Rumah Ibadah**.
5. Isi data.
6. Pengajuan akan berstatus `menunggu`.
7. Super admin harus menyetujui agar rumah ibadah aktif.

### 8.5 Pengajuan Penerima

1. Login sebagai penerima.
2. Buka peta.
3. Klik lokasi rumah.
4. Pilih **Simpan Pengajuan**.
5. Isi data penerima.
6. Sistem mencari rumah ibadah terdekat dalam radius 300 meter.
7. Status awal penerima adalah `menunggu`.
8. Super admin atau admin rumah ibadah terkait dapat menyetujui/menolak.

### 8.6 Program Bantuan

1. Login sebagai super admin atau admin rumah ibadah.
2. Buka dashboard.
3. Isi form **Buat Program Bantuan**.
4. Pilih rumah ibadah, jenis bantuan, bulan, tahun, target frekuensi, nominal/item, dan deskripsi.
5. Simpan.

### 8.7 Penyaluran Bantuan

1. Pastikan penerima sudah berstatus `diterima`.
2. Pastikan penerima berada dalam rumah ibadah yang sama dengan program.
3. Buka form **Catat Penyaluran Bantuan**.
4. Pilih program.
5. Pilih penerima.
6. Isi tanggal dan keterangan.
7. Simpan.
8. Sistem otomatis menghitung bantuan ke-berapa pada program tersebut.

### 8.8 Laporan Bulanan

1. Buka dashboard.
2. Cari bagian **Monitoring Penyaluran Per Periode**.
3. Pilih bulan dan tahun.
4. Gunakan filter rumah ibadah, agama, program, jenis bantuan, dan status penyaluran.
5. Klik tampilkan/muat laporan.
6. Laporan menampilkan penerima yang belum diberi, sudah diberi, belum memenuhi target, sesuai target, atau melebihi target.

### 8.9 Pengajuan Hapus Marker/Pin

1. Super admin dapat menghapus marker langsung.
2. Admin rumah ibadah hanya dapat mengajukan hapus rumah ibadah miliknya atau pin penerima yang dikelola.
3. Penerima dapat mengajukan hapus pin miliknya sendiri.
4. Pengajuan hapus akan masuk ke panel persetujuan super admin.
5. Jika disetujui, marker/pin hilang dari peta aktif.

---

## 9. Persiapan Sebelum Hosting

Sebelum upload ke hosting, pastikan:

```text
[ ] Aplikasi berjalan di localhost.
[ ] Database berhasil diimport.
[ ] Login superadmin berhasil.
[ ] Peta muncul.
[ ] Dashboard muncul.
[ ] Tambah akun berhasil.
[ ] Tambah rumah ibadah berhasil.
[ ] Tambah penerima berhasil.
[ ] Program bantuan berhasil dibuat.
[ ] Penyaluran bantuan berhasil dicatat.
[ ] Laporan berhasil tampil.
```

File yang wajib diupload ke hosting:

```text
index.php
login.php
logout.php
register.php
dashboard.php
koneksi.php
auth.php
ambil_data_peta.php
ambil_laporan_penyaluran.php
ambil_program_bantuan.php
ambil_riwayat.php
ambil_user.php
ajukan_rumah_ibadah.php
hapus_rumah_ibadah.php
update_status_rumah_ibadah.php
tambah_penerima.php
edit_penerima.php
hapus_penerima.php
update_status_penerima.php
tambah_program_bantuan.php
edit_program_bantuan.php
hapus_program_bantuan.php
tambah_penyaluran.php
tambah_user.php
edit_user.php
hapus_user.php
```

File yang tidak wajib diupload ke hosting setelah database berhasil diimport:

```text
backup_sql/
05_povertydb.sql
RANGKUMAN_PENTING_PROJECT_05.md
PANDUAN_INSTALASI_LOCALHOST_SAMPAI_HOSTING.md
file ZIP backup
```

Untuk keamanan, file SQL dan ZIP backup sebaiknya tidak dibiarkan terbuka di `public_html`.

---

## 10. Upload ke Hosting cPanel

1. Login ke cPanel hosting.
2. Buka **File Manager**.
3. Masuk ke folder:

```text
public_html
```

4. Buat folder:

```text
webgis-poverty
```

5. Di dalamnya buat folder:

```text
05
```

6. Upload file aplikasi ke:

```text
public_html/webgis-poverty/05/
```

7. Jika upload berupa ZIP, klik kanan ZIP lalu pilih **Extract**.
8. Pastikan `index.php` berada langsung di folder `05`.

URL setelah upload:

```text
https://namadomain.com/webgis-poverty/05/
```

---

## 11. Membuat Database Hosting

1. Buka menu **MySQL Databases** di cPanel.
2. Buat database baru, contoh:

```text
cpaneluser_05_povertydb
```

3. Buat user database baru, contoh:

```text
cpaneluser_userdb
```

4. Buat password database.
5. Tambahkan user ke database.
6. Berikan akses **ALL PRIVILEGES**.
7. Catat data berikut:

```text
Host database     : localhost
Nama database     : cpaneluser_05_povertydb
Username database : cpaneluser_userdb
Password database : password database hosting
```

---

## 12. Import Database di Hosting

1. Buka **phpMyAdmin** dari cPanel.
2. Pilih database hosting yang sudah dibuat.
3. Klik tab **Import**.
4. Upload file SQL.
5. Klik **Go**.
6. Pastikan semua tabel muncul.

Jika hosting menolak perintah:

```sql
CREATE DATABASE IF NOT EXISTS `05_povertydb`;
USE `05_povertydb`;
```

maka hapus atau komentari dua bagian tersebut dari file SQL, lalu import ulang pada database yang sudah dipilih di phpMyAdmin.

---

## 13. Mengubah koneksi.php untuk Hosting

Buka `koneksi.php`, lalu ubah konfigurasi menjadi data hosting.

Contoh:

```php
$host = "localhost";
$user = "cpaneluser_userdb";
$pass = "PasswordDatabaseHosting";
$db   = "cpaneluser_05_povertydb";
```

Simpan file.

---

## 14. Akses Aplikasi Online

Jika foldernya:

```text
public_html/webgis-poverty/05/
```

maka URL biasanya:

```text
https://namadomain.com/webgis-poverty/05/
```

Jika langsung diletakkan di `public_html`, URL menjadi:

```text
https://namadomain.com/
```

Jika memakai subdomain, misalnya `gis.namadomain.com`, arahkan document root subdomain ke folder aplikasi.

---

## 15. Checklist Setelah Hosting

```text
[ ] Halaman login terbuka.
[ ] Login superadmin berhasil.
[ ] Dashboard terbuka.
[ ] Peta Leaflet muncul.
[ ] Marker rumah ibadah muncul.
[ ] Marker penerima muncul.
[ ] Tambah akun berhasil.
[ ] Tambah/ajukan rumah ibadah berhasil.
[ ] Setujui/tolak rumah ibadah berhasil.
[ ] Tambah/ajukan penerima berhasil.
[ ] Setujui/tolak penerima berhasil.
[ ] Buat program bantuan berhasil.
[ ] Catat penyaluran bantuan berhasil.
[ ] Laporan bulanan tampil.
[ ] Riwayat tampil.
[ ] Logout berhasil.
[ ] Aplikasi bisa dibuka dari HP.
```

---

## 16. Troubleshooting

### 16.1 Halaman Blank Putih

Penyebab umum:

- Error PHP.
- Koneksi database gagal.
- File belum lengkap.
- Ada output sebelum `session_start()`.

Solusi:

- Cek file `error_log` di hosting.
- Pastikan `koneksi.php` benar.
- Pastikan semua file PHP terupload.

### 16.2 Database Connection Failed

Solusi:

- Cek nama database.
- Cek username database.
- Cek password database.
- Cek host database, biasanya `localhost`.
- Pastikan user database sudah diberi **ALL PRIVILEGES**.

### 16.3 Login Gagal

Solusi:

- Pastikan username benar.
- Pastikan akun berstatus `aktif`.
- Pastikan password adalah `password` untuk akun demo.
- Pastikan password di database dibuat memakai `password_hash()`.

### 16.4 Peta Tidak Muncul

Solusi:

- Pastikan internet aktif karena Leaflet memakai CDN.
- Pastikan elemen peta memiliki tinggi.
- Buka Console browser untuk melihat error JavaScript.

### 16.5 Marker Tidak Muncul

Solusi:

- Cek latitude dan longitude.
- Cek status pengajuan.
- Data `ditolak` atau `status_hapus='disetujui'` memang tidak tampil sebagai marker aktif.
- Cek response `ambil_data_peta.php` melalui tab Network browser.

### 16.6 Import SQL Gagal

Solusi:

- Pastikan database sudah dipilih sebelum import.
- Jika error `CREATE DATABASE`, hapus baris `CREATE DATABASE` dan `USE`.
- Jika error `IF NOT EXISTS` pada `ALTER TABLE`, gunakan file migration versi kompatibel.
- Jika ada pin aktif ganda, rapikan data penerima terlebih dahulu sebelum membuat unique key satu pin aktif.

### 16.7 Fetch Error

Solusi:

- Pastikan file PHP tujuan ada.
- Pastikan path fetch memakai path relatif, misalnya:

```javascript
fetch('ambil_data_peta.php')
```

Jangan memakai path localhost saat sudah hosting:

```javascript
fetch('http://localhost/webgis-poverty/05/ambil_data_peta.php')
```

---

## 17. Keamanan Dasar Setelah Online

Setelah aplikasi online:

1. Ganti password akun penting jika sudah masuk tahap produksi.
2. Jangan biarkan file `.sql` dan `.zip` di folder publik.
3. Jangan tampilkan detail error kepada pengguna umum.
4. Gunakan HTTPS.
5. Pastikan semua akun admin menggunakan password yang kuat.
6. Nonaktifkan akun yang tidak digunakan.
7. Backup database secara berkala.

---

## 18. Ringkasan Akhir

Urutan instalasi yang benar:

```text
1. Ekstrak project ke C:\laragon\www\webgis-poverty\05\
2. Start All di Laragon.
3. Import database melalui phpMyAdmin.
4. Cek koneksi.php.
5. Buka http://localhost/webgis-poverty/05/
6. Login superadmin / password.
7. Uji peta, dashboard, akun, rumah ibadah, penerima, program, penyaluran, dan laporan.
8. Upload file PHP ke hosting.
9. Buat database hosting.
10. Import SQL di hosting.
11. Ubah koneksi.php sesuai hosting.
12. Hapus file SQL/ZIP dari public_html setelah selesai.
```