UAS-SIG-d1041231006/README.md

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:

   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
   • Dasbor Sinergi Umat (Next.js): http://localhost:3000
   • phpMyAdmin (Manajemen Database MySQL): 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
   • XAMPP: http://localhost/gis-portal

3. Jalankan Dasbor Sinergi Umat (Next.js App)

1. Buka terminal Anda dan masuk ke direktori Next.js:

   cd sistem-km-next
   

2. Instal pustaka ketergantungan (dependencies) dengan perintah:

   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):

   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:

   npm run dev
   

5. Buka browser Anda dan akses dasbor Sinergi Umat di http://localhost:3000.

---

💾 Struktur Folder Proyek

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