Monarch055
117 lines
5.3 KiB
Markdown
117 lines
5.3 KiB
Markdown
# GIS Portal & Sinergi Umat Dashboard
|
|
|
|
Proyek ini adalah portal Sistem Informasi Geografis (GIS) terintegrasi yang menggabungkan visualisasi peta spasial Pontianak dengan sistem dasbor manajemen kesejahteraan masyarakat (Sinergi Umat).
|
|
|
|
---
|
|
|
|
## 🏛️ Komponen Proyek
|
|
|
|
1. **Portal Utama GIS (PHP + Apache)**:
|
|
- Visualisasi Lokasi SPBU (`spbu-map`)
|
|
- Visualisasi Parsil Tanah (`parsil-tanah`)
|
|
- Peta Kloroplet (`chloropleth`)
|
|
2. **Dasbor Sinergi Umat (`sistem-km-next`)**:
|
|
- Aplikasi berbasis Next.js untuk pemetaan rumah ibadah (Mosque, Church, Vihara, Temple) dan survei kesejahteraan Keluarga Penerima Manfaat (KPM).
|
|
3. **Database MySQL**:
|
|
- Penyimpanan data SPBU, parsil, dan kloroplet.
|
|
4. **Supabase**:
|
|
- Backend auth dan database real-time untuk data rumah ibadah, data keluarga (households), transaksi donasi, dan approval queue di Sinergi Umat.
|
|
|
|
---
|
|
|
|
## 🐳 Opsi 1: Menjalankan Menggunakan Docker (Direkomendasikan)
|
|
|
|
Dengan Docker Compose, seluruh aplikasi portal PHP, dasbor Next.js, MySQL database, dan phpMyAdmin akan dijalankan otomatis dalam kontainer yang saling terhubung.
|
|
|
|
### Prasyarat
|
|
- Sudah menginstal **Docker Desktop** di komputer Anda.
|
|
|
|
### Langkah-langkah
|
|
1. Buka terminal/command prompt pada **direktori root** proyek (`gis-portal` / folder tempat `docker-compose.yaml` berada).
|
|
2. Jalankan perintah berikut untuk mengunduh, membuat build image, dan menjalankan kontainer secara background:
|
|
```bash
|
|
docker compose up -d --build
|
|
```
|
|
3. Setelah proses build selesai dan container berjalan (`healthy`), Anda dapat mengakses layanan berikut di browser Anda:
|
|
- **Portal Utama GIS (PHP, SPBU, Parsil, Kloroplet)**: [http://localhost:8080](http://localhost:8080)
|
|
- **Dasbor Sinergi Umat (Next.js)**: [http://localhost:3000](http://localhost:3000)
|
|
- **phpMyAdmin (Manajemen Database MySQL)**: [http://localhost:8085](http://localhost:8085)
|
|
- **MySQL Database**: Berjalan di port `3306` (host: `localhost`, user: `root`, password: `rootpassword`, database: `spbu_db`).
|
|
|
|
### Catatan Penting Docker:
|
|
- Data MySQL disimpan secara persisten di volume docker `db-data`.
|
|
- Skema awal database otomatis di-import saat database pertama kali di-boot dari berkas `./docker/db/init.sql`.
|
|
|
|
---
|
|
|
|
## 🔧 Opsi 2: Menjalankan Tanpa Docker (Manual)
|
|
|
|
Jika ingin menjalankan aplikasi secara langsung di sistem lokal Anda tanpa menggunakan kontainer Docker.
|
|
|
|
### Prasyarat
|
|
- **Web Server Lokal** (seperti Laragon atau XAMPP) yang mendukung PHP (min v8.1) dan MySQL.
|
|
- **Node.js** (min v18 atau v20) terinstal pada komputer Anda.
|
|
|
|
### Langkah-langkah Setup Manual:
|
|
|
|
#### 1. Setup Database MySQL Lokal
|
|
1. Pastikan server MySQL lokal Anda (Laragon/XAMPP) sudah menyala.
|
|
2. Buat database baru bernama `spbu_db` melalui phpMyAdmin lokal Anda.
|
|
3. Import berkas SQL skema awal yang terletak di `docker/db/init.sql` ke dalam database `spbu_db` tersebut.
|
|
|
|
#### 2. Jalankan Portal GIS Utama (PHP App)
|
|
1. Pindahkan atau hubungkan (symlink) seluruh folder proyek `gis-portal` ke direktori root web server Anda:
|
|
- Untuk **Laragon**: taruh di `C:\laragon\www\gis-portal`
|
|
- Untuk **XAMPP**: taruh di `C:\xampp\htdocs\gis-portal`
|
|
2. Konfigurasi koneksi database PHP berada di berkas:
|
|
- `spbu-map/db.php`
|
|
- `parsil-tanah/db.php`
|
|
*(Secara default, skrip PHP akan otomatis terhubung ke localhost dengan database `spbu_db`, user `root`, dan password kosong `""`)*.
|
|
3. Akses portal utama melalui browser Anda di:
|
|
- Laragon: [http://gis-portal.test](http://gis-portal.test)
|
|
- XAMPP: [http://localhost/gis-portal](http://localhost/gis-portal)
|
|
|
|
#### 3. Jalankan Dasbor Sinergi Umat (Next.js App)
|
|
1. Buka terminal Anda dan masuk ke direktori Next.js:
|
|
```bash
|
|
cd sistem-km-next
|
|
```
|
|
2. Instal pustaka ketergantungan (dependencies) dengan perintah:
|
|
```bash
|
|
npm install
|
|
```
|
|
3. Pastikan berkas `.env.local` sudah ada di dalam folder `sistem-km-next` dan berisi kredensial Supabase berikut (sudah otomatis disertakan dalam berkas zip):
|
|
```env
|
|
NEXT_PUBLIC_SUPABASE_URL=https://gzpvygrsfdtzykyqbnes.supabase.co
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
|
|
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
|
|
```
|
|
4. Jalankan server pengembangan Next.js lokal:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
5. Buka browser Anda dan akses dasbor Sinergi Umat di [http://localhost:3000](http://localhost:3000).
|
|
|
|
---
|
|
|
|
## 💾 Struktur Folder Proyek
|
|
|
|
```text
|
|
gis-portal/
|
|
├── README.md # Dokumentasi utama (berkas ini)
|
|
├── chloropleth/ # Fitur peta kloroplet Pontianak (PHP/HTML/JS)
|
|
├── docker/ # Konfigurasi Dockerfile untuk php, nextjs, & db
|
|
│ ├── db/
|
|
│ │ └── init.sql # Database schema SQL init
|
|
│ ├── nextjs/
|
|
│ └── php/
|
|
├── parsil-tanah/ # Fitur peta parsil tanah (PHP/HTML/JS)
|
|
├── sistem-km-next/ # Dasbor Sinergi Umat (Next.js App)
|
|
│ ├── src/
|
|
│ └── README.md # Dokumentasi subsistem Next.js
|
|
├── spbu-map/ # Fitur peta sebaran SPBU (PHP/HTML/JS)
|
|
├── docker-compose.yaml # Main configuration file Docker
|
|
├── docker-compose.override.yaml # Local override config (Port mapping & bind mounts)
|
|
└── index.html # Halaman Beranda / Gateway Portal GIS
|
|
```
|