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 ``` 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).