# Tugas WebGIS — PHP & Leaflet

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

---

## Cara Menjalankan

### 1. Prasyarat
- [XAMPP](https://www.apachefriends.org/) 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:
```bash
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:

```php
$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