205 lines
7.0 KiB
Markdown
205 lines
7.0 KiB
Markdown
|
|
WebGIS (Leaflet + PHP + MySQL)
|
|
|
|
Deskripsi singkat
|
|
------------------
|
|
Proyek WebGIS sederhana yang menggunakan `Leaflet` di frontend dan skrip PHP untuk menyediakan API CRUD terhadap data spasial (lokasi/marker, jalan, tanah) yang disimpan di database MySQL.
|
|
|
|
Fitur utama
|
|
-----------
|
|
- Peta interaktif dengan marker, polyline, polygon (Leaflet + Leaflet.Draw)
|
|
- Endpoint PHP untuk mengambil, menambah, memperbarui, dan menghapus data: lokasi, jalan, tanah
|
|
- Kontrol layer untuk memfilter jenis data (SPBU, Rumah, Masjid, Jalan, Tanah)
|
|
|
|
Persyaratan
|
|
-----------
|
|
- Web server dengan PHP (mis. Apache/Nginx + PHP)
|
|
- MySQL atau MariaDB
|
|
- Akses internet untuk memuat tile OpenStreetMap dan library Leaflet (atau host sendiri)
|
|
|
|
Instalasi cepat
|
|
---------------
|
|
1. Salin folder proyek ke root web server Anda (mis. `/var/www/html/webgis`).
|
|
2. Impor database dari file `webgis.sql`:
|
|
|
|
```bash
|
|
mysql -u root -p webgis < webgis.sql
|
|
```
|
|
|
|
3. Perbarui konfigurasi koneksi database di file [koneksi.php](koneksi.php) sesuai kredensial lokal Anda.
|
|
4. Akses frontend melalui browser: `http://localhost/webgis/index.html` (atau path sesuai server Anda).
|
|
|
|
Catatan konfigurasi
|
|
-------------------
|
|
File [koneksi.php](koneksi.php) saat ini mengandung koneksi contoh:
|
|
|
|
```php
|
|
<?php
|
|
$conn = new mysqli("localhost", "root", "ilham", "webgis");
|
|
// ...
|
|
?>
|
|
```
|
|
|
|
Jangan gunakan kredensial default pada lingkungan produksi — ubah username/password dan batasi akses.
|
|
|
|
API / Endpoints
|
|
---------------
|
|
Berikut file PHP utama yang tersedia di proyek ini:
|
|
|
|
- `get_lokasi.php` : Mengambil daftar lokasi/marker (JSON)
|
|
- `tambah_lokasi.php`: Menambah lokasi baru
|
|
- `update_lokasi.php`: Memperbarui lokasi
|
|
- `hapus_lokasi.php` : Menghapus lokasi
|
|
|
|
- `get_jalan.php` : Mengambil data jalan (GeoJSON/JSON)
|
|
- `tambah_jalan.php` : Menambah data jalan
|
|
- `update_jalan.php` : Memperbarui data jalan
|
|
- `hapus_jalan.php` : Menghapus data jalan
|
|
|
|
- `get_tanah.php` : Mengambil data tanah (GeoJSON/JSON)
|
|
- `tambah_tanah.php` : Menambah data tanah
|
|
- `update_tanah.php` : Memperbarui data tanah
|
|
- `hapus_tanah.php` : Menghapus data tanah
|
|
|
|
File penting
|
|
-----------
|
|
- [index.html](index.html) : Frontend peta (Leaflet + draw tools)
|
|
- [koneksi.php](koneksi.php) : File koneksi database
|
|
- [webgis.sql](webgis.sql) : Dump database untuk impor
|
|
|
|
Pengembangan & catatan
|
|
-----------------------
|
|
- Frontend mengambil endpoint dari `http://localhost/webgis/...` — sesuaikan URL jika Anda menaruh proyek di subfolder atau domain berbeda.
|
|
- Beberapa record geometrik pada data jalan/tanah mungkin berformat JSON ganda; frontend mencoba parsing defensif.
|
|
- Jika menambah kolom baru ke tabel `lokasi`, contoh SQL yang pernah dipakai:
|
|
|
|
```sql
|
|
ALTER TABLE lokasi ADD COLUMN alamat TEXT;
|
|
ALTER TABLE lokasi ADD COLUMN jenis VARCHAR(50) NOT NULL DEFAULT 'spbu';
|
|
CREATE INDEX idx_lokasi_alamat ON lokasi( (left(alamat,255)) );
|
|
```
|
|
|
|
Keamanan
|
|
--------
|
|
- Hindari menyimpan password database langsung di repositori untuk lingkungan produksi.
|
|
- Sanitasi input pada skrip PHP sebelum memasukkannya ke database (prepared statements lebih aman).
|
|
|
|
Lisensi
|
|
-------
|
|
Silakan tambahkan licensi sesuai kebutuhan (mis. MIT) atau hubungi pemilik proyek.
|
|
|
|
Jika Anda ingin, saya bisa juga menambahkan langkah menjalankan server lokal atau contoh curl untuk setiap endpoint.
|
|
|
|
Contoh penggunaan API & API key
|
|
-------------------------------
|
|
Untuk operasi baca (`GET`) tidak diperlukan API key. Contoh mengambil daftar lokasi:
|
|
|
|
```bash
|
|
curl -s http://localhost/webgis/src/api/get_lokasi.php | jq .
|
|
```
|
|
|
|
Untuk operasi tulis/hapus/perbarui, server memerlukan header `X-API-KEY` atau field `api_key` di body.
|
|
API key sebaiknya disimpan di file `/.env` (di luar kontrol versi) atau di environment variable pada server.
|
|
|
|
Menambahkan `.env.example`
|
|
-------------------------
|
|
Proyek ini menyediakan `.env.example` yang berisi contoh variabel environment yang diperlukan.
|
|
Untuk menyiapkan environment lokal:
|
|
|
|
```bash
|
|
# salin contoh ke file .env (jangan commit .env)
|
|
cp .env.example .env
|
|
|
|
# generate key (openssl) dan masukkan ke .env
|
|
openssl rand -hex 16
|
|
# edit .env dan set API_KEY=hasil_generate
|
|
```
|
|
|
|
Atau buat key dengan PHP:
|
|
|
|
```bash
|
|
php -r "echo bin2hex(random_bytes(16)).PHP_EOL;"
|
|
```
|
|
|
|
Setelah `.env` berisi `API_KEY`, server PHP akan memuat nilai tersebut melalui `src/config/config.php`.
|
|
|
|
Contoh panggilan (curl)
|
|
-----------------------
|
|
Menambah lokasi (POST JSON):
|
|
|
|
```bash
|
|
curl -X POST "http://localhost/webgis/src/api/tambah_lokasi.php" \
|
|
-H "Content-Type: application/json" \
|
|
-H "X-API-KEY: your_api_key_here" \
|
|
-d '{"nama":"Contoh","jenis":"rumah","no_telp":"0812","buka_24_jam":0,"alamat":"Jalan Contoh","latitude":-0.04,"longitude":109.33}'
|
|
```
|
|
|
|
Contoh hapus (POST body dengan id):
|
|
|
|
```bash
|
|
curl -X POST "http://localhost/webgis/src/api/hapus_lokasi.php" \
|
|
-H "Content-Type: application/json" \
|
|
-H "X-API-KEY: your_api_key_here" \
|
|
-d '{"id":"5092"}'
|
|
```
|
|
|
|
Catatan keamanan: jangan commit `.env` atau API key produksi ke repositori. Untuk produksi pertimbangkan memuat kunci dari sistem secrets, variabel lingkungan server (mis. systemd/Apache/Nginx), atau layanan vault.
|
|
|
|
Menjalankan (Windows / Linux / macOS)
|
|
-----------------------------------
|
|
Berikut langkah singkat untuk menjalankan proyek ini pada masing-masing sistem operasi. Inti yang sama: tempatkan folder proyek di root web server Anda atau jalankan server PHP built-in, lalu impor `webgis.sql` dan sesuaikan [koneksi.php](koneksi.php).
|
|
|
|
- **Linux (cepat, tanpa XAMPP):**
|
|
|
|
1. Pastikan `php` dan `mysql`/`mariadb` tersedia.
|
|
2. Impor database:
|
|
|
|
```bash
|
|
mysql -u root -p webgis < webgis.sql
|
|
```
|
|
|
|
3. Jalankan server PHP built-in (untuk pengujian cepat):
|
|
|
|
```bash
|
|
php -S localhost:8000 -t .
|
|
```
|
|
|
|
4. Buka `http://localhost:8000/index.html`.
|
|
|
|
- **Windows (XAMPP/WAMP):**
|
|
|
|
1. Salin folder proyek ke `C:\xampp\htdocs\webgis` (XAMPP) atau folder www pada WAMP.
|
|
2. Import `webgis.sql` menggunakan phpMyAdmin atau CLI:
|
|
|
|
```powershell
|
|
mysql -u root -p webgis < webgis.sql
|
|
```
|
|
|
|
3. Pastikan Apache dan MySQL sudah dijalankan via XAMPP/WAMP control panel.
|
|
4. Akses `http://localhost/webgis/index.html`.
|
|
|
|
Catatan: Bisa juga menggunakan `php -S` dari Command Prompt jika PHP terpasang secara terpisah.
|
|
|
|
- **macOS (MAMP atau PHP built-in):**
|
|
|
|
1. Gunakan MAMP: tempatkan proyek di folder `htdocs` MAMP lalu jalankan server MAMP.
|
|
2. Atau gunakan PHP built-in (macOS yang memiliki PHP):
|
|
|
|
```bash
|
|
mysql -u root -p webgis < webgis.sql
|
|
php -S localhost:8000 -t .
|
|
```
|
|
|
|
3. Buka `http://localhost:8000/index.html` atau `http://localhost/webgis/index.html` jika menggunakan MAMP/Apache.
|
|
|
|
Penyesuaian koneksi
|
|
-------------------
|
|
- Edit [koneksi.php](koneksi.php) untuk menyesuaikan `host`, `username`, `password`, dan `database` sesuai lingkungan Anda.
|
|
- Jika menggunakan server built-in (`php -S`), pastikan `koneksi.php` menggunakan host dan port database yang benar (biasanya `localhost`).
|
|
|
|
Permasalahan umum
|
|
-----------------
|
|
- Jika tile OSM atau library tidak muncul, cek koneksi internet atau muat ulang (CORS biasanya tidak menjadi masalah untuk tile default).
|
|
- Jika endpoint PHP mengembalikan error, periksa log PHP/Apache dan periksa kredensial di [koneksi.php](koneksi.php).
|
|
|