Suppress Apache ServerName warning

.dockerignore

@@ -0,0 +1,17 @@
+node_modules
+npm-debug.log
+.git
+.gitignore
+README.md
+QUICK_START.md
+.DS_Store
+*.swp
+*.swo
+*~
+.vscode
+.idea
+docker-compose.yml
+docker-compose.local.yml
+.dockerignore
+.env.local
+.env.*.local

01/.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+npm-debug.log
+.git
+.gitignore
+README.md
+QUICK_START.md
+.DS_Store
+*.swp
+*.swo
+*~
+.vscode
+.idea
+docker-compose.yml
+Dockerfile
+.dockerignore

01/Dockerfile

@@ -0,0 +1,45 @@
+# Use official PHP image with Apache
+FROM php:8.1-apache
+
+# Set working directory
+WORKDIR /var/www/html
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    mysql-client \
+    git \
+    curl \
+    zip \
+    unzip \
+    && rm -rf /var/lib/apt/lists/*
+
+# Enable Apache modules
+RUN a2enmod rewrite \
+    && a2enmod headers
+
+# Install PHP extensions
+RUN docker-php-ext-install \
+    mysqli \
+    pdo \
+    pdo_mysql
+
+# Set PHP configuration
+RUN echo "display_errors = On" >> /usr/local/etc/php/conf.d/php.ini \
+    && echo "error_reporting = E_ALL" >> /usr/local/etc/php/conf.d/php.ini \
+    && echo "date.timezone = Asia/Jakarta" >> /usr/local/etc/php/conf.d/php.ini
+
+# Copy project files
+COPY . .
+
+# Set permissions
+RUN chown -R www-data:www-data /var/www/html
+
+# Expose port 80
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD curl -f http://localhost/ || exit 1
+
+# Start Apache
+CMD ["apache2-foreground"]

01/QUICK_START.md

@@ -0,0 +1,193 @@
+# ⚡ 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`*

01/docker-compose.yml

@@ -0,0 +1,64 @@
+version: '3.8'
+
+services:
+  # PHP-Apache Web Server
+  web:
+    build: .
+    container_name: webgis_web
+    ports:
+      - "8080:80"
+    volumes:
+      - .:/var/www/html
+    environment:
+      - APP_ENV=development
+    depends_on:
+      - mysql
+    networks:
+      - webgis_network
+    restart: unless-stopped
+
+  # MySQL Database
+  mysql:
+    image: mysql:8.0
+    container_name: webgis_mysql
+    environment:
+      MYSQL_ROOT_PASSWORD: root_password
+      MYSQL_DATABASE: pemetaan_kemiskinan
+      MYSQL_USER: webgis_user
+      MYSQL_PASSWORD: webgis_password
+    ports:
+      - "3306:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+      - ./database.sql:/docker-entrypoint-initdb.d/database.sql
+    networks:
+      - webgis_network
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # phpMyAdmin for database management
+  phpmyadmin:
+    image: phpmyadmin:latest
+    container_name: webgis_phpmyadmin
+    environment:
+      PMA_HOST: mysql
+      PMA_USER: root
+      PMA_PASSWORD: root_password
+    ports:
+      - "8081:80"
+    depends_on:
+      - mysql
+    networks:
+      - webgis_network
+    restart: unless-stopped
+
+volumes:
+  mysql_data:
+
+networks:
+  webgis_network:
+    driver: bridge

01/docs/PANDUAN_PHPMY_ADMIN.md

@@ -0,0 +1,134 @@
+# 📖 Panduan Lengkap: Membuat Database di phpMyAdmin
+
+## STEP 1: Akses phpMyAdmin
+1. Buka browser dan akses: `http://localhost/phpmyadmin`
+   - Username: `root`
+   - Password: *(kosongkan atau sesuai konfigurasi)*
+2. Tekan tombol **Login**
+
+---
+
+## STEP 2: Buat Database Baru
+
+### Cara Manual:
+1. **Di halaman utama phpMyAdmin**, cari kolom **"Create new database"** di sebelah kiri
+2. Isikan nama database: `pemetaan_kemiskinan`
+3. Pilih **Collation**: `utf8mb4_general_ci`
+4. Klik tombol **Create**
+
+### Atau menggunakan Import SQL:
+1. Di menu atas, pilih tab **"Import"**
+2. Klik **"Choose File"** dan pilih file `database.sql` 
+3. Pastikan encoding: `utf-8`
+4. Klik **Import** (database akan terbuat otomatis)
+
+✅ Database berhasil dibuat
+
+---
+
+## STEP 3: Verifikasi Tabel-Tabel
+
+Setelah import atau membuat manual, klik pada database `pemetaan_kemiskinan` di sebelah kiri.
+
+**Anda seharusnya melihat tabel-tabel berikut:**
+
+```
+✓ masyarakat_miskin
+✓ rumah_ibadah
+✓ bantuan_riwayat
+✓ bpjs_record
+```
+
+---
+
+## STEP 4: Struktur Tabel (REFERENSI)
+
+### Tabel: `masyarakat_miskin`
+| Field | Type | Keterangan |
+|-------|------|-----------|
+| id | INT (Primary Key) | ID unik |
+| nama | VARCHAR(100) | Nama lengkap |
+| tanggal_lahir | DATE | Tgl lahir (YYYY-MM-DD) |
+| jenis_kelamin | ENUM('Laki-laki','Perempuan') | - |
+| alamat | TEXT | Alamat rumah |
+| latitude | DECIMAL(10,8) | Koordinat lat |
+| longitude | DECIMAL(11,8) | Koordinat lng |
+| status_bpjs | ENUM('Ya','Tidak','Proses') | Status BPJS |
+| no_hp | VARCHAR(15) | Nomor HP |
+| created_at | TIMESTAMP | Waktu input |
+
+### Tabel: `rumah_ibadah`
+| Field | Type | Keterangan |
+|-------|------|-----------|
+| id | INT (Primary Key) | ID unik |
+| nama | VARCHAR(100) | Nama tempat ibadah |
+| jenis | ENUM('Masjid','Gereja','Vihara','Kelenteng','Lain') | Tipe |
+| latitude | DECIMAL(10,8) | Koordinat lat |
+| longitude | DECIMAL(11,8) | Koordinat lng |
+| alamat | TEXT | Alamat |
+| keterangan | TEXT | Info tambahan |
+| created_at | TIMESTAMP | Waktu input |
+
+### Tabel: `bantuan_riwayat`
+| Field | Type | Keterangan |
+|-------|------|-----------|
+| id | INT (Primary Key) | ID unik |
+| id_masyarakat | INT | ID masyarakat (foreign key) |
+| jenis_bantuan | VARCHAR(100) | Tipe bantuan |
+| tanggal_bantuan | DATE | Tanggal pemberian |
+| nilai | INT | Nominal (Rp) |
+| keterangan | TEXT | Catatan |
+
+### Tabel: `bpjs_record`
+| Field | Type | Keterangan |
+|-------|------|-----------|
+| id | INT (Primary Key) | ID unik |
+| id_masyarakat | INT | ID masyarakat |
+| no_peserta | VARCHAR(20) | Nomor peserta BPJS |
+| tingkat | ENUM('Keluarga','Mandiri','Penerima Bantuan Iuran') | Tipe BPJS |
+| tanggal_daftar | DATE | Tgl pendaftaran |
+
+---
+
+## STEP 5: Cek Koneksi Database (Opsional)
+
+Jika ingin test koneksi manual:
+
+1. Buat file `test_koneksi.php` di folder project
+2. Isi dengan kode ini:
+
+```php
+<?php
+$conn = new mysqli("localhost", "root", "", "pemetaan_kemiskinan");
+
+if ($conn->connect_error) {
+    die("Koneksi gagal: " . $conn->connect_error);
+}
+
+echo "✅ Koneksi berhasil!";
+?>
+```
+
+3. Akses: `http://localhost/pemetaan-kemiskinan/test_koneksi.php`
+4. Jika muncul pesan hijau = Database siap digunakan ✅
+
+---
+
+## TROUBLESHOOTING
+
+### ❌ "Access denied for user 'root'@'localhost'"
+- Buka file `config/koneksi.php`
+- Ubah password sesuai konfigurasi MySQL Anda
+- Jika menggunakan XAMPP default, kosongkan saja password
+
+### ❌ "Database pemetaan_kemiskinan tidak ditemukan"
+- Pastikan sudah run file `database.sql` melalui Import
+- Atau buat manual: **Create new database** → nama: `pemetaan_kemiskinan`
+
+### ❌ File upload tidak berfungsi
+- Cek folder upload di `_uploads/` sudah ada & permission 755
+- Atau buat manual: klik kanan folder → Properties → Permission → 755
+
+---
+
+✅ **Selesai! Database siap digunakan untuk website pemetaan kemiskinan**

01/php/koneksi.php

@@ -16,13 +16,16 @@ if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
     exit();
 }
 
-$host     = "localhost";
+// Baca dari Environment Variable (untuk deployment Coolify/server)
-$username = "root";
+// Jika tidak ada, fallback ke konfigurasi XAMPP lokal
-$password = "";           // Jika XAMPP, kosongkan
+$host     = getenv('DB_HOST')     ?: "localhost";
-$database = "pemetaan_kemiskinan";
+$username = getenv('DB_USER')     ?: "root";
+$password = getenv('DB_PASSWORD') ?: "";
+$database = getenv('DB_DATABASE') ?: "pemetaan_kemiskinan";
+$port     = getenv('DB_PORT')     ?: 3306;
 
 // KONEKSI MYSQLI
-$conn = new mysqli($host, $username, $password, $database);
+$conn = new mysqli($host, $username, $password, $database, (int)$port);
 
 // CEK KONEKSI
 if ($conn->connect_error) {

Dockerfile

@@ -0,0 +1,48 @@
+# Use official PHP image with Apache
+FROM php:8.1-apache
+
+# Set working directory
+WORKDIR /var/www/html
+
+# Set ServerName to suppress Apache warnings
+RUN echo "ServerName localhost" >> /etc/apache2/apache2.conf
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    default-mysql-client \
+    git \
+    curl \
+    zip \
+    unzip \
+    && rm -rf /var/lib/apt/lists/*
+
+# Enable Apache modules
+RUN a2enmod rewrite \
+    && a2enmod headers
+
+# Install PHP extensions
+RUN docker-php-ext-install \
+    mysqli \
+    pdo \
+    pdo_mysql
+
+# Set PHP configuration
+RUN echo "display_errors = On" >> /usr/local/etc/php/conf.d/php.ini \
+    && echo "error_reporting = E_ALL" >> /usr/local/etc/php/conf.d/php.ini \
+    && echo "date.timezone = Asia/Jakarta" >> /usr/local/etc/php/conf.d/php.ini
+
+# Copy project files
+COPY 01 /var/www/html
+
+# Set permissions
+RUN chown -R www-data:www-data /var/www/html
+
+# Expose port 80
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD curl -f http://localhost/ || exit 1
+
+# Start Apache
+CMD ["apache2-foreground"]