first commit

2026-06-05 15:34:11 +07:00
commit e0aad3a893
1 changed files with 136 additions and 0 deletions
@@ -0,0 +1,136 @@
+# 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