2026-06-11 21:14:16 +07:00
2026-06-11 21:14:16 +07:00
2026-06-11 21:14:16 +07:00
2026-06-11 21:14:16 +07:00
2026-06-11 21:14:16 +07:00
2026-06-11 21:13:27 +07:00

🗺️ 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)
  • 🖥️ Backend: PHP
  • 🗄️ Database: MySQL

Leaflet mendukung berbagai bentuk geometri seperti:

  • Marker (Point)
  • Polyline (Line)
  • Polygon (Area) (igismap.com)

🗄️ 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.


S
Description
No description provided
Readme 54 KiB
Languages
JavaScript 57.6%
HTML 25.1%
PHP 17.3%