Tugas WebGIS — PHP & Leaflet

Kumpulan tugas WebGIS berbasis PHP + MySQL, dijalankan menggunakan XAMPP (Apache + MySQL).

Cara Menjalankan

1. Prasyarat

XAMPP sudah terinstall
Apache dan MySQL sudah aktif (buka XAMPP Control Panel → klik Start pada keduanya)

2. Letakkan folder project

Salin folder tugas/ ke dalam direktori htdocs milik XAMPP:

OS	Path htdocs
Windows	`C:\xampp\htdocs\tugas\`
Linux	`/opt/lampp/htdocs/tugas/`
macOS	`/Applications/XAMPP/htdocs/tugas/`

Struktur yang diharapkan:

htdocs/
└── tugas/
    ├── 01/
    │   ├── index.php
    │   └── spbu_map.sql
    ├── 02/
    │   ├── index.php
    │   └── webgis_db.sql
    ├── 03/
    │   ├── index.php
    │   ├── pontianak.js
    │   ├── pontianak.json
    │   └── us-states.js
    └── 04/
        ├── index.php
        └── spbu_map.sql

3. Import database (untuk tugas yang menggunakan database)

Buka phpMyAdmin di http://localhost/phpmyadmin, lalu import file SQL:

Tugas	File SQL	Database
01	`01/spbu_map.sql`	`spbu_map`
02	`02/webgis_db.sql`	`webgis_db`
04	`04/spbu_map.sql`	`spbu_map`

Tugas 03 tidak memerlukan database — data sudah ada di file .js dan .json.

Cara import via phpMyAdmin:

Buka http://localhost/phpmyadmin
Klik tab Import di menu atas
Pilih file .sql yang sesuai
Klik Go / Kirim

Atau bisa juga melalui MySQL CLI:

mysql -u root -p < tugas/01/spbu_map.sql
mysql -u root -p < tugas/02/webgis_db.sql

Daftar Tugas

Tugas 01 — SPBU Map Pontianak

URL: http://localhost/tugas/01/index.php Database: spbu_map

Peta interaktif SPBU di Pontianak menggunakan Leaflet.js. Fitur:

Tambah SPBU dengan klik pada peta (isi nama, nomor WA, status 24 jam)
Marker berwarna: hijau = buka 24 jam, merah = tidak 24 jam
Drag marker untuk pindah lokasi (otomatis tersimpan)
Hapus data SPBU
Popup dengan info detail dan link WhatsApp

Tugas 02 — WebGIS Jalan dan Parsil Tanah

URL: http://localhost/tugas/02/index.php Database: webgis_db

WebGIS untuk manajemen data spasial jalan dan parsil tanah. Fitur:

Gambar polyline (jalan) dan polygon (parsil tanah) langsung di peta
Undo titik saat menggambar
CRUD atribut: nama, status jalan (Nasional/Provinsi/Kabupaten), status kepemilikan (SHM/HGB/HGU/HP)
Edit geometri (seret titik untuk ubah bentuk)
Kalkulasi otomatis panjang jalan (meter) dan luas tanah (m²)
Legenda warna per status

Tugas 03 — Peta Kepadatan Penduduk Pontianak

URL: http://localhost/tugas/03/index.php Database: Tidak diperlukan

Peta choropleth kepadatan penduduk per kecamatan di Pontianak menggunakan data GeoJSON lokal. Fitur:

Visualisasi gradasi warna berdasarkan kepadatan penduduk
Data koordinat UTM (Zone 49N) dikonversi ke WGS84 via Proj4js
Info panel saat hover kecamatan
Legenda kepadatan

Tugas 04 — SPBU Map (Extended)

URL: http://localhost/tugas/04/index.php Database: spbu_map (sama dengan Tugas 01)

Versi lanjutan dari Tugas 01 dengan fitur tambahan pada tampilan dan fungsionalitas peta SPBU Pontianak.

Konfigurasi Database

Semua file PHP menggunakan koneksi default XAMPP:

$conn = new mysqli("localhost", "root", "", "nama_database");

Jika password MySQL Anda berbeda dari default (kosong), ubah parameter ketiga sesuai password Anda pada masing-masing file index.php.

Teknologi yang Digunakan

PHP — backend & CRUD database
MySQL — penyimpanan data spasial
Leaflet.js — library peta interaktif
Leaflet-Editable — edit geometri di peta (Tugas 02)
Proj4js — konversi proyeksi koordinat (Tugas 03)
OpenStreetMap — tile layer peta dasar