Files
2026-06-11 02:42:37 +07:00

4.2 KiB

WebGIS Jalan dan Jalan Rusak

Aplikasi WebGIS berbasis PHP, MySQL, dan Leaflet untuk mengelola data jalan, parsil tanah, serta titik kerusakan jalan. Aplikasi ini menyediakan peta interaktif untuk menggambar geometri, menyimpan data spasial dalam format GeoJSON, melihat dashboard data, dan melaporkan titik kerusakan melalui foto.

Fitur

  • Peta interaktif berbasis Leaflet dan Google Maps tile.
  • Input data jalan dalam bentuk polyline dengan perhitungan panjang otomatis.
  • Input data parsil tanah dalam bentuk polygon dengan perhitungan luas otomatis.
  • Input titik kerusakan jalan dalam bentuk marker dengan unggahan foto.
  • Lapor titik kerusakan otomatis dari foto yang memiliki metadata GPS EXIF.
  • Edit geometri jalan dan parsil langsung dari peta.
  • Dashboard ringkasan jumlah data jalan, parsil, dan titik kerusakan.
  • Tabel data dengan pencarian dan pratinjau lokasi pada minimap.
  • API sederhana untuk operasi CRUD data.

Teknologi

  • PHP
  • MySQL / MariaDB
  • PDO
  • HTML, CSS, JavaScript
  • Leaflet
  • Leaflet Draw
  • Turf.js
  • EXIF.js
  • Font Awesome

Kebutuhan Sistem

  • PHP 7.4 atau lebih baru
  • MySQL atau MariaDB
  • Web server lokal seperti Laragon, XAMPP, atau Apache/Nginx dengan PHP
  • Browser modern
  • Koneksi internet untuk memuat library CDN dan tile peta

Instalasi

  1. Clone repository ini ke folder web server lokal.

    git clone https://github.com/GuavaPopper/WebGIS_Jalan-JalanRusak.git
    
  2. Masuk ke folder project.

    cd WebGIS_Jalan-JalanRusak
    
  3. Buat database dan tabel dari file schema.sql.

    mysql -u root -p < schema.sql
    

    Jika memakai Laragon atau phpMyAdmin, import file schema.sql secara manual ke MySQL/MariaDB.

  4. Buat file .env di root project.

    DB_HOST=127.0.0.1
    DB_NAME=webgis_jalan
    DB_USER=root
    DB_PASS=
    
  5. Pastikan folder uploads/ tersedia dan dapat ditulis oleh web server.

  6. Jalankan project melalui web server lokal, misalnya:

    http://localhost/WebgisJalan/
    

    Sesuaikan URL dengan nama folder dan konfigurasi virtual host yang digunakan.

Struktur Project

.
|-- api/
|   |-- jalan.php
|   |-- parsil.php
|   `-- titik.php
|-- assets/
|   |-- css/
|   |   `-- style.css
|   `-- js/
|       `-- app.js
|-- uploads/
|-- config.php
|-- index.php
|-- schema.sql
`-- README.md

Konfigurasi Database

File config.php membaca konfigurasi dari .env, lalu membuat koneksi database dengan PDO.

Variabel yang digunakan:

Variabel Keterangan Default
DB_HOST Host database 127.0.0.1
DB_NAME Nama database webgis_jalan
DB_USER Username database root
DB_PASS Password database kosong

Endpoint API

Jalan

Endpoint: api/jalan.php

Method Fungsi
GET Mengambil semua data jalan
POST Menambahkan data jalan
PUT Memperbarui data jalan
DELETE Menghapus data jalan

Parsil

Endpoint: api/parsil.php

Method Fungsi
GET Mengambil semua data parsil
POST Menambahkan data parsil
PUT Memperbarui data parsil
DELETE Menghapus data parsil

Titik Kerusakan

Endpoint: api/titik.php

Method Fungsi
GET Mengambil semua titik kerusakan
POST Menambahkan atau memperbarui titik kerusakan dengan foto
PUT Memperbarui GeoJSON titik kerusakan
DELETE Menghapus titik kerusakan dan file foto terkait

Cara Penggunaan

  1. Buka halaman utama aplikasi.
  2. Gunakan toolbar gambar di sisi kiri peta.
  3. Pilih bentuk sesuai data:
    • Polyline untuk data jalan.
    • Polygon untuk data parsil tanah.
    • Marker untuk titik kerusakan jalan.
  4. Isi form yang muncul, lalu simpan data.
  5. Buka tab Lihat Data untuk melihat ringkasan dan tabel data.
  6. Klik baris pada tabel untuk melihat lokasi pada minimap.
  7. Gunakan tombol laporan via foto EXIF jika foto memiliki metadata GPS.

Catatan

  • File .env sebaiknya tidak diunggah ke repository publik karena berisi konfigurasi lokal.
  • File foto laporan disimpan di folder uploads/.
  • Perhitungan panjang dan luas dilakukan di sisi frontend menggunakan Turf.js.
  • Aplikasi membutuhkan koneksi internet untuk memuat CDN Leaflet, Font Awesome, Turf.js, EXIF.js, dan tile peta.