semua-tugas/README.md

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:

1. Buka http://localhost/phpmyadmin
2. Klik tab Import di menu atas
3. Pilih file .sql yang sesuai
4. 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