webgis/tugas-spbu/README.md

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:

mysql -u root -p webgis < webgis.sql

3. Perbarui konfigurasi koneksi database di file 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 saat ini mengandung koneksi contoh:

<?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 : Frontend peta (Leaflet + draw tools)
• koneksi.php : File koneksi database
• 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:

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:

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:

# 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:

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):

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):

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.

• Linux (cepat, tanpa XAMPP):

  1. Pastikan php dan mysql/mariadb tersedia.
  2. Impor database:

  mysql -u root -p webgis < webgis.sql
  

  3. Jalankan server PHP built-in (untuk pengujian cepat):

  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:

  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):

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