first commit

2026-06-11 21:13:27 +07:00
commit b08a058a34
1 changed files with 205 additions and 0 deletions
@@ -0,0 +1,205 @@
+# 🗺️ WebGIS Project - Manajemen Data Spasial
+
+## 📌 Deskripsi Proyek
+
+Proyek ini merupakan aplikasi **WebGIS berbasis LeafletJS, PHP, dan MySQL** yang digunakan untuk mengelola data spasial dalam bentuk:
+
+* 📍 Point (SPBU)
+* ➖ Line / Polyline (Jalan)
+* 🔷 Polygon (Kavling Tanah)
+
+Aplikasi ini memungkinkan user untuk:
+
+* Menambahkan data langsung dari peta
+* Menyimpan ke database
+* Menampilkan kembali data pada peta dengan visualisasi berbeda
+
+---
+
+## 🎯 Tujuan Tugas
+
+Mahasiswa diharapkan mampu:
+
+* Mengimplementasikan WebGIS berbasis web
+* Mengelola data spasial (Point, Line, Polygon)
+* Melakukan analisis sederhana:
+
+  * Panjang jalan
+  * Luas tanah
+* Menggunakan LeafletJS untuk visualisasi peta
+
+---
+
+## 🧩 Fitur Aplikasi
+
+### 1. 📍 Data Point - SPBU
+
+* Input dengan klik pada peta
+* Menyimpan:
+
+  * Nama SPBU
+  * Nomor SPBU
+  * Status (24 jam / tidak)
+  * Latitude & Longitude
+* Ditampilkan sebagai marker pada peta
+
+---
+
+### 2. ➖ Data Line - Jalan
+
+* Input dengan menggambar garis (Polyline)
+* Status jalan:
+
+  * Jalan Nasional
+  * Jalan Provinsi
+  * Jalan Kabupaten
+* Warna berbeda sesuai status:
+
+  * Nasional → Merah
+  * Provinsi → Biru
+  * Kabupaten → Hijau
+* Panjang jalan dihitung otomatis (meter)
+
+---
+
+### 3. 🔷 Data Polygon - Kavling Tanah
+
+* Input dengan menggambar area (Polygon)
+* Status kepemilikan:
+
+  * SHM
+  * HGB
+  * HGU
+  * HP
+* Warna berbeda sesuai status
+* Luas tanah dihitung otomatis (m²)
+
+---
+
+## ⚙️ Teknologi yang Digunakan
+
+* 🌐 Frontend: HTML, CSS, JavaScript
+* 🗺️ Library: LeafletJS + Leaflet Draw ([leaflet.github.io][1])
+* 🖥️ Backend: PHP
+* 🗄️ Database: MySQL
+
+Leaflet mendukung berbagai bentuk geometri seperti:
+
+* Marker (Point)
+* Polyline (Line)
+* Polygon (Area) ([igismap.com][2])
+
+---
+
+## 🗄️ Struktur Database
+
+### Tabel SPBU
+
+* nama
+* no_spbu
+* status
+* latitude
+* longitude
+
+### Tabel Jalan
+
+* nama
+* status
+* panjang
+* geom (koordinat)
+
+### Tabel Kavling
+
+* nama
+* status
+* luas
+* geom (koordinat)
+
+---
+
+## 🔄 Alur Sistem
+
+### Input Data
+
+1. User memilih mode (Point / Line / Polygon)
+2. User melakukan input di peta:
+
+   * Klik (Point)
+   * Draw (Line / Polygon)
+3. Sistem menghitung:
+
+   * Panjang (Line)
+   * Luas (Polygon)
+4. Data dikirim ke server (PHP)
+5. Data disimpan ke MySQL
+
+---
+
+### Menampilkan Data
+
+1. Data diambil dari database
+2. Ditampilkan di peta
+3. Warna disesuaikan berdasarkan kategori
+4. Data juga ditampilkan di sidebar
+
+---
+
+## 🧠 Konsep GIS yang Digunakan
+
+* Spatial Data:
+
+  * Point
+  * Line
+  * Polygon
+* Attribute Data
+* Visualisasi berbasis kategori
+* Analisis spasial sederhana:
+
+  * Distance (panjang)
+  * Area (luas)
+
+---
+
+## 🚀 Cara Menjalankan
+
+1. Jalankan MySQL
+2. Masuk ke folder project:
+
+   ```
+   cd webgis-spbu
+   ```
+3. Jalankan server:
+
+   ```
+   php -S localhost:8000
+   ```
+4. Buka di browser:
+
+   ```
+   http://localhost:8000
+   ```
+
+---
+
+## 📌 Catatan Penting
+
+* Jangan menggunakan Live Server (tidak support PHP)
+* Gunakan Leaflet Draw untuk input Line & Polygon
+* Perhitungan panjang & luas HARUS otomatis (tidak manual)
+
+---
+
+## 🎓 Kesimpulan
+
+Aplikasi ini merupakan implementasi dasar WebGIS yang mencakup:
+
+* Input data spasial
+* Penyimpanan database
+* Visualisasi peta interaktif
+
+Proyek ini menunjukkan pemahaman terhadap konsep dasar Sistem Informasi Geografis (SIG) dalam pengembangan aplikasi berbasis web.
+
+---
+
+[1]: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html?utm_source=chatgpt.com "Leaflet Draw Documentation"
+[2]: https://www.igismap.com/leafletjs-point-polyline-polygon-rectangle-circle/?utm_source=chatgpt.com "Leaflet.js - Point, Polyline, Polygon, Rectangle, Circle"