Raditya_Indra_Putranto/D1041231009-WebGIS-PovertyMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add Docker deployment setup

Browse Source
This commit is contained in:
GuavaPopper
2026-06-10 18:08:57 +07:00
parent 66cfbbd523
commit cdba16e9e5
11 changed files with 1953 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+171 -185
View File
@@ -1,209 +1,195 @@
# Dokumentasi Fungsional: WebGIS Pemetaan Kemiskinan
# WebGIS Pemetaan Kemiskinan
Proyek ini adalah sistem informasi geografis (WebGIS) berbasis web yang dirancang untuk memetakan sebaran rumah ibadah dan keluarga kurang mampu (miskin). Sistem ini memungkinkan pengguna untuk melakukan analisis spasial berdasarkan radius untuk mengetahui dampak atau jangkauan layanan rumah ibadah terhadap komunitas di sekitarnya.
Aplikasi WebGIS berbasis Laravel untuk memetakan rumah ibadah, keluarga miskin, radius layanan, bantuan, transfer tanggungan, dan statistik sebaran.
## Filosofi & Latar Belakang
## Deploy Dengan Docker
Proyek ini dibangun atas dasar filosofi kepedulian sosial, di mana rumah ibadah memiliki peran sentral dalam kesejahteraan masyarakat di sekitarnya. Prinsip utama sistem ini adalah:
> **Setiap keluarga kurang mampu yang tinggal di sekitar rumah ibadah dianggap sebagai tanggungan atau prioritas utama untuk mendapatkan bantuan dari rumah ibadah tersebut.**
Repository ini sudah disiapkan untuk jalan lewat Docker Compose:
Dengan adanya sistem WebGIS ini, pengelola rumah ibadah dapat dengan mudah memetakan siapa saja yang membutuhkan bantuan dalam radius tertentu, sehingga distribusi bantuan menjadi lebih tepat sasaran dan terorganisir.
- `app`: container PHP Laravel, expose port `8000`
- `mysql`: database MySQL 8.4 dengan volume persisten
- `vite`: hanya untuk development, tidak otomatis jalan saat production deploy
## Fitur Utama
## Kebutuhan Hosting
### 1. Peta Interaktif (Interactive WebGIS)
Menggunakan library **Leaflet.js**, sistem menyediakan antarmuka peta yang responsif dengan fitur:
- **Toggle Layer**: Berpindah antara tampilan jalan (Street) dan citra satelit.
- **Marker Kustom**: Ikon berbeda untuk membedakan antara Rumah Ibadah (hijau) dan Rumah Miskin (merah).
- **Geocoding Otomatis**: Saat menambahkan data baru, sistem secara otomatis mengambil alamat lengkap berdasarkan koordinat klik menggunakan OpenStreetMap Nominatim.
- Docker Engine
- Docker Compose plugin
- Domain atau subdomain yang diarahkan ke server
- Reverse proxy hosting ke port aplikasi, misalnya `APP_PORT=8000`
### 2. Manajemen Data (CRUD)
Sistem mendukung pengelolaan data secara penuh:
- **Tambah Data via Peta**: Klik pada lokasi di peta untuk memunculkan formulir input data baru.
- **Edit Data via Form**: Klik tombol "Edit" pada popup marker di peta atau pada baris di tabel data untuk membuka formulir edit. Mendukung pembaruan semua field teks untuk Rumah Ibadah (nama, jenis, pengurus, telepon, jemaah, radius, keterangan) dan Keluarga Miskin (nama KK, jumlah jiwa, pekerjaan, pendapatan, kondisi, keterangan).
- **Update Lokasi (Drag & Drop)**: Marker dapat digeser (drag) untuk memperbarui koordinat lokasi di database secara real-time.
- **Hapus Data**: Menghapus data melalui popup pada marker atau melalui tabel data.
- **Ownership Rumah Ibadah**: Pengurus Rumah Ibadah hanya dapat mengubah atau menghapus data rumah ibadah yang mereka tambahkan sendiri. Administrator dapat mengubah semua data.
- **Ekspor PDF**: Unduh laporan seluruh data keluarga miskin dalam format PDF dari halaman Data Tabular.
- **Ekspor CSV/PDF per Radius**: Dari panel analisis peta, ekspor hanya data keluarga miskin yang berada dalam radius terpilih — tersedia dalam format CSV (langsung di browser) dan PDF (via server, filtering menggunakan Haversine).
- **Data Tabular**: Halaman khusus yang menampilkan seluruh data dalam bentuk tabel dengan statistik ringkasan.
Document root tidak perlu diarahkan manual ke `public` karena aplikasi berjalan di container Laravel.
### 3. Dashboard Statistik & Gap Analysis
Halaman analitik komprehensif di `/dashboard`, dapat diakses semua role:
- **Statistik Ringkasan**: Total rumah ibadah, keluarga miskin, jiwa, dan persentase cakupan.
- **Chart Breakdown**: Distribusi rumah ibadah per jenis (donut chart) dan keluarga miskin per kondisi rumah (bar chart horizontal) menggunakan Chart.js.
- **Gap Analysis**: Menghitung keluarga miskin yang tidak berada dalam radius rumah ibadah manapun, menggunakan Turf.js untuk kalkulasi jarak geodesik yang akurat.
- **Tabel Coverage per Ibadah**: Jumlah KK dan jiwa dalam radius masing-masing rumah ibadah, diurutkan dari terbanyak.
- **Daftar Tidak Terjangkau**: Tabel seluruh keluarga miskin yang membutuhkan perhatian lebih.
## Setup Pertama Di Server
### 5. Fitur Administrator Lanjutan
- **Hapus Massal (Bulk Delete)**: Pilih beberapa baris via checkbox di tabel Data lalu hapus sekaligus (Administrator).
- **Import CSV**: Impor data Keluarga Miskin & Rumah Ibadah dari file CSV dengan format yang sama persis dengan hasil Ekspor CSV (round-trip).
- **Log Aktivitas**: Setiap aksi penting (login, CRUD data, import, bulk delete, backup) dicatat dengan pengguna, deskripsi, IP, dan waktu.
- **Backup Database**: Unduh dump `.sql` seluruh database melalui `mysqldump` (Administrator).
- **Statistik Penggunaan**: Ringkasan login & aksi harian/mingguan/bulanan + grafik aktivitas 14 hari terakhir di halaman Log Aktivitas.
- **Backup Terjadwal**: Backup database otomatis setiap hari pukul 00:00, tersimpan di server (maks. 7 file). Daftar backup dapat diunduh dari halaman Admin.
- **Restore Database**: Upload file `.sql` dan restore database dengan konfirmasi ketat (ketik "RESTORE"). Hanya Administrator.
- **Notifikasi Real-time**: Toast otomatis saat ada data baru ditambahkan pengguna lain, dengan auto-refresh tabel (polling 30 detik).
- **Konfigurasi Sistem**: Atur pusat peta (lat/lng), zoom default, dan batas radius slider langsung dari UI di `/admin/settings` — berlaku real-time tanpa deploy ulang.
1. Upload atau clone project ke server.
### 4. Analisis Spasial Radius
Fitur unggulan untuk menganalisis sebaran keluarga miskin di sekitar rumah ibadah:
- **Analisis Otomatis**: Mengklik marker rumah ibadah akan langsung memunculkan lingkaran radius dan panel statistik.
- **Penghitungan Real-time**: Menggunakan **Turf.js**, sistem menghitung secara instan jumlah rumah, jumlah Kepala Keluarga (KK), dan jumlah Jiwa yang berada di dalam radius terpilih.
- **Slider Radius**: Pengguna dapat menggeser slider (50m hingga 2000m) untuk melihat perubahan statistik secara dinamis.
- **Highlight Visual**: Marker rumah miskin yang masuk ke dalam radius akan berubah warna menjadi kuning untuk memudahkan identifikasi visual.
2. Buat file environment Docker:
## Arsitektur Teknis
Proyek ini telah dimigrasikan ke framework **Laravel 13** dengan struktur sebagai berikut:
- **Backend**:
- **Laravel Eloquent**: Digunakan untuk interaksi database yang aman dan efisien.
- **RESTful API**: Menyediakan endpoint `/api/ibadah` dan `/api/miskin` untuk komunikasi frontend-backend.
- **Migrations**: Skema database yang terstruktur dan mudah dikelola.
- **Frontend**:
- **Blade Templates**: Mesin templating Laravel untuk antarmuka yang dinamis.
- **Tailwind CSS & DaisyUI**: Memberikan desain antarmuka yang modern, premium, dan responsif.
- **JavaScript (Vanilla)**: Menangani logika peta dan interaksi API tanpa beban framework berat.
- **Database**: MySQL/MariaDB untuk penyimpanan data spasial dan atribut.
## Cara Menjalankan Project
### Prasyarat
- **Docker Desktop** sudah terinstall dan berjalan.
- Port **`8000`** (app), **`5173`** (Vite), dan **`3307`** (MySQL dari host) tidak dipakai aplikasi lain.
---
### 1. Jalankan Pertama Kali
```powershell
docker compose up -d --build
```bash
cp .env.docker.example .env
```
Saat container pertama kali dibuild dan dijalankan, entrypoint otomatis melakukan:
| Langkah | Keterangan |
|---------|-----------|
| Install Composer dependencies | Jika `vendor/` belum ada |
| Buat `.env` | Dari `.env.docker.example` jika `.env` belum ada |
| Generate `APP_KEY` | Jika masih kosong |
| `php artisan migrate` | Buat semua tabel database |
| `php artisan db:seed` | Isi role + 4 akun demo (lihat bawah) |
| `php artisan schedule:work &` | Jalankan Laravel Scheduler di background (backup harian) |
Setelah container berjalan, buka **`http://localhost:8000`**
---
### 2. Akun Demo (Langsung Bisa Login)
| Role | Email | Password | Akses |
|------|-------|----------|-------|
| Administrator | `admin@webgis.local` | `admin123` | Semua fitur + kelola pengguna, backup, konfigurasi |
| Pengurus Ibadah | `pengurus@webgis.local` | `password123` | CRUD rumah ibadah milik sendiri + analisis radius |
| Petugas Pendataan | `petugas@webgis.local` | `password123` | CRUD keluarga miskin |
| Pemangku Kebijakan | `kebijakan@webgis.local` | `password123` | View-only: peta, dashboard, ekspor |
---
### 3. URL yang Tersedia
| URL | Keterangan |
|-----|-----------|
| `http://localhost:8000` | Aplikasi utama |
| `http://localhost:5173` | Vite dev server (hot-reload assets) |
| `127.0.0.1:3307` | MySQL dari host (user: `webgis`, pass: `secret`, db: `webgis_miskin`) |
---
### 4. Perintah Sehari-hari
**Status container:**
```powershell
docker compose ps
```
**Lihat log:**
```powershell
docker compose logs -f app # log Laravel app
docker compose logs -f vite # log Vite dev server
```
**Jalankan test:**
```powershell
docker compose exec app php artisan test --no-coverage
```
**Backup database manual:**
```powershell
docker compose exec app php artisan backup:database
# File tersimpan di storage/app/backups/
```
**Lihat jadwal yang berjalan:**
```powershell
docker compose exec app php artisan schedule:list
```
**Lihat daftar route:**
```powershell
docker compose exec app php artisan route:list
```
**Bersihkan cache:**
```powershell
docker compose exec app php artisan cache:clear
docker compose exec app php artisan config:clear
```
**Stop container:**
```powershell
docker compose down
```
---
### 5. Reset Database (Mulai dari Awal)
> **Peringatan:** Menghapus semua data.
```powershell
docker compose down -v # hapus container + volume MySQL
docker compose up -d --build # build ulang + migrate + seed otomatis
```
Atau jika container sudah berjalan dan ingin reset tanpa rebuild:
```powershell
docker compose exec app php artisan migrate:fresh --seed --force
```
---
### 6. Konfigurasi Database (Referensi)
3. Edit `.env` minimal bagian ini:
```env
APP_ENV=production
APP_DEBUG=false
APP_URL=https://domain-anda.com
APP_PORT=8000
DB_CONNECTION=mysql
DB_HOST=mysql # nama service di docker-compose.yml
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=webgis_miskin
DB_USERNAME=webgis
DB_PASSWORD=secret
DB_PASSWORD=password-kuat
MYSQL_ROOT_PASSWORD=password-root-kuat
MYSQL_HOST_PORT=3307
```
MySQL root: `MYSQL_ROOT_PASSWORD=root`
Jika project di-upload dari mesin development dan `.env` lama ikut terbawa, ubah nilainya ke konfigurasi production di atas. Docker Compose otomatis membaca file `.env` di root project.
## Daftar Halaman
4. Build asset frontend:
1. **Beranda (`/`)**: Halaman landing dengan latar belakang peta animasi dan navigasi cepat.
2. **Peta Interaktif (`/map`)**: Antarmuka utama untuk melihat sebaran dan melakukan analisis radius.
3. **Data Tabular (`/data`)**: Manajemen data dalam format tabel dengan ringkasan statistik total.
4. **Dashboard Statistik (`/dashboard`)**: Analisis lengkap sebaran data — breakdown per jenis rumah ibadah, kondisi rumah miskin, Gap Analysis (% keluarga miskin terjangkau/tidak), dan tabel coverage per rumah ibadah. Dapat diakses oleh semua role.
5. **Admin Pengguna (`/admin/users`)**: Manajemen pengguna sistem — tambah, edit, hapus akun, assign role, dan reset password. Hanya dapat diakses oleh Administrator.
6. **Log Aktivitas (`/admin/logs`)**: Riwayat 200 aktivitas terakhir (login, tambah/ubah/hapus data, import, bulk delete, backup). Hanya Administrator.
7. **Konfigurasi Sistem (`/admin/settings`)**: Atur pusat peta, zoom default, dan batas radius analisis. Hanya Administrator.
```bash
npm install
npm run build
```
---
*Dokumentasi ini dibuat untuk menjelaskan kapabilitas sistem WebGIS Pemetaan Kemiskinan versi Laravel.*
5. Build dan jalankan container:
```bash
docker compose up --build -d
```
Entrypoint container `app` otomatis menjalankan:
- `composer install`
- membuat `.env` dari `.env.docker.example` jika belum ada
- `php artisan key:generate` jika `APP_KEY` belum ada
- `php artisan migrate --force`
- `php artisan db:seed --force`
- `php artisan schedule:work`
## Command Operasional
Cek container:
```bash
docker compose ps
```
Lihat log aplikasi:
```bash
docker compose logs -f app
```
Masuk ke container app:
```bash
docker compose exec app sh
```
Jalankan ulang cache Laravel setelah edit `.env`:
```bash
docker compose exec app php artisan config:cache
docker compose exec app php artisan route:cache
docker compose exec app php artisan view:cache
```
Restart container:
```bash
docker compose restart app
```
Stop semua container:
```bash
docker compose down
```
Stop container tanpa menghapus data database:
```bash
docker compose down
```
Hapus container sekaligus volume database:
```bash
docker compose down -v
```
Gunakan `down -v` hanya kalau memang mau reset data MySQL.
## Update Aplikasi Di Server
1. Pull atau upload perubahan terbaru.
2. Build ulang asset:
```bash
npm install
npm run build
```
3. Rebuild container:
```bash
docker compose up --build -d
```
4. Refresh cache:
```bash
docker compose exec app php artisan optimize:clear
docker compose exec app php artisan config:cache
docker compose exec app php artisan route:cache
docker compose exec app php artisan view:cache
```
## Development Lokal Dengan Vite
Untuk development yang butuh Vite dev server:
```bash
docker compose --profile dev up --build -d
```
Vite akan tersedia di port `5173`. Untuk production deploy, jangan gunakan profile `dev`.
## Akun Awal
Seeder membuat akun awal berikut:
| Role | Email | Password |
| --- | --- | --- |
| Administrator | `admin@webgis.local` | `admin123` |
| Pengurus Ibadah | `pengurus@webgis.local` | `password123` |
| Petugas Pendataan | `petugas@webgis.local` | `password123` |
| Pemangku Kebijakan | `kebijakan@webgis.local` | `password123` |
Ganti password akun awal setelah deploy.
## Halaman Utama
- `/login` - login pengguna
- `/map` - peta interaktif
- `/data` - data tabular
- `/dashboard` - dashboard statistik
- `/permohonan` - permohonan transfer
- `/admin/users` - manajemen pengguna
- `/admin/logs` - log aktivitas
- `/admin/settings` - pengaturan sistem
## Catatan Penting
- Jangan commit `.env` ke repository.
- Pastikan `APP_URL` sesuai domain production.
- Pastikan reverse proxy hosting meneruskan traffic ke `APP_PORT`.
- Volume `webgis_mysql_data` menyimpan data MySQL.
- Folder project dimount ke `/var/www/html`, jadi perubahan file di server langsung terbaca container.
- Jika hosting punya backup volume, backup volume MySQL dan folder project.