D1041231091-WebGIS-All/05/PANDUAN_INSTALASI_LOCALHOST_SAMPAI_HOSTING_PROJECT_05.md

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:

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:

C:\laragon\www\

4. Buat folder project:

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:

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:

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:

http://localhost/phpmyadmin

3. Login phpMyAdmin Laragon:

Username : root
Password : kosongkan

4.2 Pilihan File SQL

Ada dua pilihan import database:

Opsi A - Database Demo Lengkap

Gunakan file:

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:

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:

users
rumah_ibadah
penerima_bantuan
program_bantuan
penyaluran_bantuan
riwayat_status

---

5. Konfigurasi Database Localhost

Buka file:

koneksi.php

Untuk Laragon, gunakan konfigurasi berikut:

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

Simpan file tersebut.

---

6. Akun Login Default

Semua password akun demo adalah:

password

Akun utama:

Role     : Super Admin
Username : superadmin
Password : password

Contoh akun admin rumah ibadah jika memakai database demo:

Username : admingerejasesilia
Password : password
Role     : admin_rumah_ibadah

Username : admingerejaelim
Password : password
Role     : admin_rumah_ibadah

Contoh akun penerima jika memakai database demo:

Username : penerima02
Password : password
Role     : penerima

Username : penerima04
Password : password
Role     : penerima

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:

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

4. Jika diarahkan ke login, masuk menggunakan:

Username : superadmin
Password : password

5. Setelah login, menu utama:

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:

[ ] 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:

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:

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:

public_html

4. Buat folder:

webgis-poverty

5. Di dalamnya buat folder:

05

6. Upload file aplikasi ke:

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:

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

---

11. Membuat Database Hosting

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

cpaneluser_05_povertydb

3. Buat user database baru, contoh:

cpaneluser_userdb

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

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:

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:

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

Simpan file.

---

14. Akses Aplikasi Online

Jika foldernya:

public_html/webgis-poverty/05/

maka URL biasanya:

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

Jika langsung diletakkan di public_html, URL menjadi:

https://namadomain.com/

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

---

15. Checklist Setelah Hosting

[ ] 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:

fetch('ambil_data_peta.php')

Jangan memakai path localhost saat sudah hosting:

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:

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.