WebGIS – Sistem Pemetaan Praktikum SIG

Portal Aplikasi pemetaan geospasial (WebGIS) interaktif terintegrasi MySQL dan PHP untuk Praktikum Sistem Informasi Geografis (SIG).

Proyek ini telah dikembangkan secara bertahap dari pemetaan titik sederhana hingga sistem distribusi bansos berbasis jangkauan rumah ibadah dengan analitik terpadu.

🗂️ Struktur Direktori Proyek

Proyek ini dibagi menjadi 3 tahap pembelajaran (pertemuan):

pertemuan_1/: Fokus pada pengenalan LeafletJS dan digitasi Point (Titik) untuk mendata lokasi, fasilitas, dan detail operasional Stasiun Bahan Bakar Umum (SPBU).
pertemuan_2/: Pengembangan lanjutan dengan menambahkan fitur Polyline (Garis) untuk memetakan infrastruktur ruas jalan, serta Polygon (Area/Poligon) untuk memetakan parsil tanah lengkap dengan status kepemilikannya.
pertemuan_3/: Implementasi sistem distribusi Bansos secara utuh menggunakan radius spasial (Buffer 300m) di sekitar Rumah Ibadah, digabungkan dengan Dashboard Analitik interaktif.
api/: Backend REST API menggunakan PHP (PDO) untuk menghubungkan aplikasi dengan database MySQL.
database.sql: File dump skema struktur tabel MySQL.
index.html: Landing Page utama untuk memudahkan akses dan navigasi ke setiap pertemuan.

🏗️ Arsitektur & Teknologi

Aplikasi ini tidak lagi menggunakan localStorage peramban, melainkan sudah memigrasikan penyimpanannya ke arsitektur Client-Server:

Frontend: HTML5, Vanilla JavaScript (ES6+), Vanilla CSS.
Mapping Library: Leaflet.js & Leaflet Draw.
Backend API: PHP 8+ dengan PDO.
Database: MySQL / MariaDB (via XAMPP).

Semua data geospasial (titik, garis, poligon) disimpan di MySQL secara fleksibel dalam kolom berformat JSON.

Deploy ke Coolify

Repo ini sudah disiapkan untuk dibuild sebagai container PHP-Apache. Di Coolify, pakai sumber Git dari:

https://git.ifuntanhub.dev/RafaelGerhardPanjaitan/UAS_SIG_WebGIS.git

Langkah ringkas:

Buat application baru dari Git repository.
Pilih build pack Dockerfile.
Gunakan Dockerfile di root repo ini.
Hubungkan aplikasi ke service MySQL/MariaDB milik project Coolify Anda.
Set environment variables berikut di aplikasi:
- DB_HOST
- DB_NAME
- DB_USER
- DB_PASS
Import schema dari database.sql ke database yang dipakai aplikasi.
Pastikan DB_HOST menunjuk ke hostname internal database Coolify, bukan localhost.

Jika database belum punya tabel, jalankan api/init_db.php sekali dari browser setelah service database aktif, atau import database.sql langsung dari panel database Coolify.

🚀 Panduan Instalasi & Menjalankan Aplikasi

Karena aplikasi ini sekarang menggunakan PHP dan MySQL, Anda tidak bisa langsung membuka file HTML-nya. Ikuti langkah berikut menggunakan XAMPP:

1. Persiapan Database

Buka aplikasi XAMPP Control Panel.
Pastikan modul Apache dan MySQL telah berjalan (Start).
Buka http://localhost/phpmyadmin di browser Anda.
Buat database baru dengan nama: webgis_bansos.
Pilih tab Import, masukkan file database.sql yang ada di direktori utama, lalu klik Go.

2. Menjalankan Aplikasi

Pilih salah satu dari 2 cara berikut:

Cara A: Memindahkan Folder (Rekomendasi XAMPP)

Pindahkan atau copy seluruh folder proyek ini ke dalam folder instalasi XAMPP: C:\xampp\htdocs\.
Ubah nama foldernya menjadi sesuatu yang mudah, misal webgis-project.
Buka browser dan akses URL: http://localhost/webgis-project

Cara B: Menggunakan PHP Built-in Server (Tanpa Pindah Folder)

Buka Terminal/Command Prompt di dalam folder proyek ini.
Jalankan perintah:
```
php -S localhost:8000
```
Buka browser dan akses URL: http://localhost:8000

🗺️ Panduan Modifikasi & Pengembangan

Jika Anda Ingin...	File yang Harus Diedit
Mengubah detail database / password MySQL	`api/db.php`
Mengubah logika simpan/hapus/ambil data	`api/index.php`
Mengubah warna marker/ikon/label layer	`js/config/config.js` (di dalam folder pertemuan)
Menambah/mengubah form isian data atribut	`js/components/forms.js` (di dalam folder pertemuan)
Mengubah integrasi API URL (jalur lokal)	`js/utils/store.js` (di dalam folder pertemuan)
Mengubah user interface UI utama	`css/style.css` (di dalam folder pertemuan)

📄 Lisensi

Proyek ini dikembangkan oleh Rafael Gerhard Panjaitan untuk keperluan akademik. Bebas digunakan dan dimodifikasi untuk keperluan pembelajaran dan non-komersial.

4.7 KiB Raw Blame History Unescape Escape