Compare commits
3 Commits
236033aa87
...
aad7e80246
| Author | SHA1 | Date | |
|---|---|---|---|
 unknown
|
aad7e80246 | ||
|
unknown
|
f98e707faf | ||
|
unknown
|
3da59f80da |
@@ -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
|
||||
@@ -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"]
|
||||
@@ -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`*
|
||||
@@ -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
|
||||
@@ -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**
|
||||
+8
-5
@@ -16,13 +16,16 @@ if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
|
||||
exit();
|
||||
}
|
||||
|
||||
$host = "localhost";
|
||||
$username = "root";
|
||||
$password = ""; // Jika XAMPP, kosongkan
|
||||
$database = "pemetaan_kemiskinan";
|
||||
// Baca dari Environment Variable (untuk deployment Coolify/server)
|
||||
// Jika tidak ada, fallback ke konfigurasi XAMPP lokal
|
||||
$host = getenv('DB_HOST') ?: "localhost";
|
||||
$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) {
|
||||
|
||||
Reference in New Issue
Block a user