FH/WebGIS-Tugas-Setiap-Pertemuan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bdfa23b4129a23fd45bee7bfe2b3ea246a41e561
WebGIS-Tugas-Setiap-Pertemuan/SPBU/README.md
T

10 KiB
Raw Blame History

🗺️ WebGIS SPBU - Sistem Informasi Lokasi Stasiun Pengisian Bahan Bakar Umum

Sistem Informasi Geografis berbasis web untuk memvisualisasikan dan mengelola data Stasiun Pengisian Bahan Bakar Umum (SPBU) di Pontianak. Dibangun menggunakan Leaflet.js sebagai peta interaktif, PHP sebagai backend, dan MySQL sebagai database.

✨ Fitur Utama

🗺️ Visualisasi Peta

  • Peta interaktif menggunakan Leaflet.js
  • Tile map dari CartoDB Voyager
  • Marker kustom untuk setiap SPBU
  • Popup informasi detail SPBU
  • Zoom dan navigasi yang smooth

📊 Dashboard Sidebar

  • Statistik total SPBU
  • Jumlah SPBU 24 Jam
  • Daftar SPBU yang dapat dicari
  • Klik untuk zoom ke lokasi SPBU

🔐 Sistem Autentikasi

  • Login admin dengan session PHP
  • Password hashing menggunakan bcrypt
  • Protected API endpoints
  • Auto-logout saat session expired
  • Logout manual dengan konfirmasi

✏️ Manajemen Data (Admin Only)

  • Tambah SPBU: Mode pilih titik di peta → isi form → simpan
  • Edit SPBU: Update nama, nomor, status, dan koordinat
  • Hapus SPBU: Hapus dengan konfirmasi
  • Pindah Lokasi: Drag & drop marker untuk update koordinat
  • Auto-save: Perubahan langsung tersimpan ke database

🎨 Visual Marker

  • SPBU 24 Jam: Marker berwarna Biru (#3b82f6)
  • SPBU Terbatas: Marker berwarna Hijau (#10b981)
  • Animasi pulse pada marker sementara saat memilih lokasi

🔍 Pencarian

  • Search bar di header dan sidebar mobile
  • Filter berdasarkan nama atau nomor SPBU
  • Real-time filtering
  • Klik hasil untuk zoom ke lokasi

📁 Struktur Project

SPBU/
│
├── index.php                          # Main application file
│
├── config/
│   └── database.php                   # Database configuration & connection
│
├── api/
│   ├── get_spbu.php                   # GET - Fetch all SPBU data
│   ├── add_spbu.php                   # POST - Add new SPBU
│   ├── update_spbu.php                # PUT - Update SPBU data
│   ├── update_position.php            # PUT - Update marker position only
│   ├── delete_spbu.php                # DELETE - Remove SPBU
│   ├── login.php                      # POST - Admin authentication
│   ├── logout.php                     # GET - Destroy session
│   └── check_session.php              # GET - Check admin session status
│
├── database/
│   └── spbu_db.sql                    # Database schema & sample data
│
└── README.md                          # Project documentation

🗄️ Database Schema

Tabel: admin

Kolom Tipe Deskripsi
id INT (PK) Auto-increment ID
username VARCHAR(50) Username admin (unique)
password VARCHAR(255) Password (bcrypt hashed)
created_at TIMESTAMP Waktu pembuatan akun

Tabel: spbu

Kolom Tipe Deskripsi
id INT (PK) Auto-increment ID
nama VARCHAR(200) Nama SPBU
no_spbu VARCHAR(50) Nomor registrasi SPBU
status ENUM '24jam' atau 'terbatas'
latitude DECIMAL(10,7) Koordinat latitude
longitude DECIMAL(10,7) Koordinat longitude
created_at TIMESTAMP Waktu pembuatan data
updated_at TIMESTAMP Waktu update terakhir (auto)

🚀 Instalasi

Prasyarat

  • Web Server: Apache 2.4+ atau Nginx
  • PHP: Versi 7.4 atau lebih tinggi
  • MySQL: Versi 5.7 atau lebih tinggi
  • PHP Extensions: PDO, PDO_MySQL, JSON, Session

Langkah Instalasi

1. Clone atau Download Project

git clone https://git.ifuntanhub.dev/FH/WebGIS-Tugas-Setiap-Pertemuan.git
cd SPBU

Atau download ZIP dan extract ke folder web server Anda (misal: htdocs/SPBU).

2. Setup Database

# Login ke MySQL
mysql -u root -p

# Import database
source /path/to/database/spbu_db.sql

Atau melalui phpMyAdmin:

  • Buat database baru: spbu_db
  • Import file database/spbu_db.sql

3. Konfigurasi Database

Edit file config/database.php:

class Database {
    private $host = "localhost";        // Host database
    private $db_name = "spbu_db";       // Nama database
    private $username = "root";         // Username MySQL
    private $password = "";             // Password MySQL
    // ...
}

4. Set Folder Permissions

# Pastikan web server bisa membaca semua file
chmod -R 755 webgis-spbu/

5. Akses Aplikasi

Buka browser dan akses:

http://localhost/SPBU/

🔑 Login Admin

Default Credentials

  • Username: admin
  • Password: admin123

⚠️ Keamanan: Ganti password default segera setelah instalasi!

Gunakan password hash generator bcrypt untuk membuat password baru.

📖 Panduan Penggunaan

Mode Normal (Public)

  • Melihat SPBU: Buka peta, semua marker SPBU akan ditampilkan
  • Info Detail: Klik marker untuk melihat informasi SPBU (nama, nomor, status, koordinat)
  • Pencarian: Gunakan search bar di header untuk mencari SPBU
  • Navigasi: Klik item di sidebar untuk zoom ke lokasi SPBU
  • Statistik: Lihat total SPBU dan jumlah SPBU 24 jam di sidebar

Mode Admin

Login

Klik tombol "Login" di pojok kanan atas → masukkan kredensial

Tambah SPBU

  • Klik tombol "Tambah" di sidebar
  • Akan muncul indikator "Mode Pilih Titik"
  • Klik pada peta untuk memilih lokasi
  • Isi form yang muncul (nama, nomor, status)
  • Klik "Simpan"

Edit SPBU

  • Klik marker SPBU
  • Klik tombol "Edit" di popup
  • Ubah data yang diperlukan
  • Klik "Simpan"

Hapus SPBU

  • Klik marker SPBU
  • Klik tombol "Hapus" di popup
  • Konfirmasi penghapusan

Pindah Lokasi

  • Tahan (hold) marker yang ingin dipindahkan
  • Geser (drag) ke lokasi baru
  • Lepaskan (drop), posisi akan auto-update

Logout

Klik ikon logout di samping toggle admin

🎨 Kustomisasi

Mengubah Lokasi Awal Peta

Edit di index.php pada fungsi initMap():

// Format: [latitude, longitude], zoomLevel
map = L.map('map', { zoomControl: true }).setView([-0.0263, 109.3425], 13);

Mengubah Warna Marker

Edit di index.php pada fungsi createSpbuIcon():

// Warna untuk 24 jam (biru) dan terbatas (hijau)
const color = status === '24jam' ? '#3b82f6' : '#10b981';

Mengubah Tile Map

Edit di index.php pada fungsi initMap():

// Ganti URL tile provider
L.tileLayer('URL_TILE_PROVIDER', { ... }).addTo(map);

Menambah Data Contoh

Edit file database/spbu_db.sql dan tambahkan INSERT statements:

INSERT INTO spbu (nama, no_spbu, status, latitude, longitude) VALUES
('SPBU Contoh', '00.000.00', '24jam', -0.0263, 109.3425);

🔒 Keamanan

Aplikasi ini memiliki beberapa lapisan keamanan:

  • Session PHP: Autentikasi admin menggunakan session
  • Password Hashing: Password disimpan menggunakan bcrypt
  • API Protection: Setiap endpoint admin memeriksa session
  • Input Validation: Validasi input di client dan server side
  • CORS Headers: Protected API access

⚠️ Rekomendasi Keamanan Tambahan

  • Implementasi CSRF token
  • Gunakan HTTPS di production
  • Rate limiting untuk API endpoints
  • Backup database secara berkala

🛠️ Teknologi yang Digunakan

Frontend

  • HTML5/CSS3 - Struktur dan styling
  • Tailwind CSS - Utility-first CSS framework
  • JavaScript (ES6+) - Interaktivitas dan logika client
  • Leaflet.js 1.9.4 - Library peta interaktif
  • CartoDB Voyager - Basemap tiles

Backend

  • PHP 7.4+ - Server-side scripting
  • PDO - Database abstraction layer
  • MySQL - Relational database

Libraries & Plugins

  • Fontsource Inter - Font keluarga Inter
  • SVG Icons - Heroicons-style icons

🐛 Troubleshooting

1. Database Connection Error

Solusi:
- Cek kredensial di config/database.php
- Pastikan MySQL service running
- Cek nama database sudah benar

2. Session Tidak Berfungsi

Solusi:
- Pastikan folder session PHP writable
- Cek konfigurasi session di php.ini
- Clear browser cache

3. Marker Tidak Muncul

Solusi:
- Cek console browser untuk error JavaScript
- Pastikan API get_spbu.php berfungsi
- Cek data di database

4. Tidak Bisa Login

Solusi:
- Cek username & password default
- Reset password dengan bcrypt hash generator
- Cek session PHP berfungsi

5. Peta Tidak Loading

Solusi:
- Cek koneksi internet (untuk tile map)
- Cek tidak ada error JavaScript
- Pastikan Leaflet.js loaded dengan benar

📊 API Documentation

Endpoints

Method Endpoint Auth Deskripsi
GET /api/get_spbu.php No Mendapatkan semua data SPBU
POST /api/add_spbu.php Yes Menambah SPBU baru
PUT /api/update_spbu.php Yes Mengupdate data SPBU
PUT /api/update_position.php Yes Update posisi marker saja
DELETE /api/delete_spbu.php Yes Menghapus SPBU
POST /api/login.php No Login admin
GET /api/logout.php Yes Logout admin
GET /api/check_session.php No Cek status session

Contoh Request/Response

Tambah SPBU

POST /api/add_spbu.php
Content-Type: application/json

{
  "nama": "SPBU Contoh",
  "no_spbu": "00.000.00",
  "status": "24jam",
  "latitude": -0.0263,
  "longitude": 109.3425
}

Response 201:

{
  "message": "SPBU berhasil ditambahkan",
  "id": 4
}

🔄 Changelog

Version 1.0.0 (2024)

  • ✨ Initial release
  • 🗺️ Peta interaktif dengan Leaflet.js
  • 🔐 Sistem login admin
  • ✏️ CRUD operasi untuk data SPBU
  • 🎨 Marker berbeda untuk status SPBU
  • 🔍 Pencarian dan navigasi
  • 📊 Dashboard statistik
  • 🗄️ MySQL database integration
  • 🔒 Basic security implementation
Reference in New Issue View Git Blame Copy Permalink