Rayhan/UAS_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c90ce9aedcb24a3d71e8c35e6b45475ecacddf57
UAS_SIG/DEVELOPMENT.md
T
z0rayy c90ce9aedc Initial commit untuk UAS SIG
2026-06-08 21:16:23 +07:00

7.5 KiB
Raw Blame History

WebGIS SPBU System - Feature Development Guide

Status Fitur yang Sudah Dikembangkan

✅ Completed (Selesai)

1. Redesigned UI dengan Sidebar Navigation

  • Modern dashboard dengan sidebar menu di sebelah kiri
  • Navigasi panel yang mudah antar fitur
  • Responsive design untuk berbagai ukuran layar
  • Professional color scheme tanpa emoji

Files:

  • index_new.html - UI baru dengan sidebar (rename ke index.html untuk menggunakan)
  • js/app.js - Main application logic

2. Dashboard & Analytics

  • Menampilkan total statistik data (SPBU, Jalan, Parsil, Ibadah, Miskin)
  • Analytics cards dengan data counters
  • Real-time update data badges

Panel: Analytics Dashboard

3. Data Management (Create, Read, Update, Delete)

  • ✅ Tabel management untuk setiap tipe data
  • ✅ Modal forms untuk Add/Edit data
  • ✅ Delete functionality dengan confirmation
  • ✅ Real-time validation

Backend Files:

  • backend/create.php - Create SPBU
  • backend/read.php - Read SPBU
  • backend/update.php - Update SPBU (NEW)
  • backend/delete.php - Delete SPBU (NEW)
  • backend/create_jalan.php - Create Jalan
  • backend/read_jalan.php - Read Jalan
  • backend/update_jalan.php - Update Jalan (NEW)
  • backend/delete_jalan.php - Delete Jalan (NEW)
  • backend/create_parsil.php - Create Parsil
  • backend/read_parsil.php - Read Parsil
  • backend/update_parsil.php - Update Parsil (NEW)
  • backend/delete_parsil.php - Delete Parsil (NEW)
  • backend/create_ibadah.php - Create Ibadah
  • backend/read_ibadah.php - Read Ibadah
  • backend/update_ibadah.php - Update Ibadah (NEW)
  • backend/delete_ibadah.php - Delete Ibadah (NEW)
  • backend/create_miskin.php - Create Miskin
  • backend/read_miskin.php - Read Miskin
  • backend/update_miskin.php - Update Miskin (NEW)
  • backend/delete_miskin.php - Delete Miskin (NEW)

4. Advanced Search & Filter

  • Search input di setiap panel data
  • Filter buttons untuk kategori spesifik
  • Real-time table filtering

Features:

  • SPBU: Filter by status (24 Jam / Tidak 24 Jam)
  • Jalan: Filter by type (Nasional / Provinsi / Kabupaten)
  • Parsil: Filter by type (SHM / HGB / HGU / HP)
  • Global search functionality

5. Map Integration

  • Interactive Leaflet map dengan multiple basemaps
  • Layer visualization untuk setiap tipe data
  • Color-coded markers dan shapes
  • Popup info saat klik marker

🚀 Cara Menggunakan Sistem Baru

1. Setup

# Buat database menggunakan database.sql
mysql -u root -p < database.sql

# File sudah ready di:
# - index_new.html (rename jadi index.html untuk use)
# - js/app.js
# - backend/update*.php, delete*.php files

2. Access Application

http://localhost/webgis-sig/index_new.html

3. Navigasi Sidebar

  • Dashboard Map - Peta interaktif dengan semua layer
  • Analytics - Dashboard dengan statistik data
  • SPBU / Jalan / Parsil / Ibadah / Pend. Miskin - Data management panels
  • Search - Advanced search & filter
  • Routing - Find routes & nearest locations
  • Export - Export/Import data
  • Account - User settings

4. Fitur-Fitur Utama

Data Management

  1. Klik panel di sidebar (e.g., "SPBU")
  2. Gunakan search input untuk cari data
  3. Gunakan filter buttons untuk kategori
  4. Klik "Add" button untuk tambah data baru
  5. Klik "Edit" atau "Delete" di action column

Dashboard

  1. Pilih "Analytics" di sidebar
  2. Lihat statistik real-time
  3. Data auto-update saat ada perubahan

Map Visualization

  1. Pilih "Dashboard Map" di sidebar
  2. Lihat semua layer pada peta
  3. Gunakan layer control (kanan bawah) untuk toggle layer
  4. Klik marker untuk lihat detail

Search

  1. Pilih "Search" di sidebar
  2. Gunakan "Search by Keywords" untuk cari nama/lokasi
  3. Gunakan "Search by Location" dengan radius slider

📋 API Endpoints

SPBU

  • POST /backend/create.php - Create SPBU
  • GET /backend/read.php - Read all SPBU
  • POST /backend/update.php - Update SPBU (NEW)
  • POST /backend/delete.php - Delete SPBU (NEW)

Jalan

  • POST /backend/create_jalan.php - Create Jalan
  • GET /backend/read_jalan.php - Read all Jalan
  • POST /backend/update_jalan.php - Update Jalan (NEW)
  • POST /backend/delete_jalan.php - Delete Jalan (NEW)

Parsil

  • POST /backend/create_parsil.php - Create Parsil
  • GET /backend/read_parsil.php - Read all Parsil
  • POST /backend/update_parsil.php - Update Parsil (NEW)
  • POST /backend/delete_parsil.php - Delete Parsil (NEW)

Ibadah

  • POST /backend/create_ibadah.php - Create Ibadah
  • GET /backend/read_ibadah.php - Read all Ibadah
  • POST /backend/update_ibadah.php - Update Ibadah (NEW)
  • POST /backend/delete_ibadah.php - Delete Ibadah (NEW)

Miskin

  • POST /backend/create_miskin.php - Create Miskin
  • GET /backend/read_miskin.php - Read all Miskin
  • POST /backend/update_miskin.php - Update Miskin (NEW)
  • POST /backend/delete_miskin.php - Delete Miskin (NEW)

🔄 Fitur yang Masih Dalam Pengembangan

⏳ In Progress / Planned

  1. Advanced Map Features

    • Heatmap layer untuk kepadatan data
    • Cluster markers untuk marker berdekatan
    • Measure distance/area tool
    • Advanced draw/annotation tools

  2. User Authentication

    • Login system
    • User registration
    • Role-based access control
    • Password management

  3. Routing & Navigation

    • Find optimal route antar lokasi
    • Nearest SPBU finder
    • Distance/time estimation
    • Navigation instructions

  4. Export & Import

    • Export to CSV, XLSX, GeoJSON, PDF
    • Import data dari file (bulk upload)
    • Data validation saat import

  5. Notifications & Alerts

    • Real-time notifications
    • Data change alerts
    • Duplicate data detection

  6. Mobile Responsive Design

    • Optimize untuk mobile/tablet
    • Touch-friendly controls
    • Responsive layout

🛠️ Development Notes

Frontend Stack

  • HTML5 / CSS3 (Custom responsive design)
  • Vanilla JavaScript (ES6+)
  • Leaflet.js - Map library
  • Turf.js - Geospatial analysis

Backend Stack

  • PHP 7.4+
  • MySQL/MariaDB
  • RESTful API design
  • JSON responses

File Structure

webgis-sig/
├── index.html (original, akan diganti)
├── index_new.html (new UI dengan sidebar) ← GUNAKAN INI
├── database.sql
├── backend/
│   ├── koneksi.php
│   ├── create.php, read.php, update.php, delete.php (SPBU)
│   ├── create_jalan.php, read_jalan.php, update_jalan.php, delete_jalan.php (JALAN)
│   ├── create_parsil.php, read_parsil.php, update_parsil.php, delete_parsil.php (PARSIL)
│   ├── create_ibadah.php, read_ibadah.php, update_ibadah.php, delete_ibadah.php (IBADAH)
│   ├── create_miskin.php, read_miskin.php, update_miskin.php, delete_miskin.php (MISKIN)
│   └── [Future: auth.php, export.php, import.php, etc]
├── js/
│   ├── app.js (main logic) ← NEW
│   └── map.js (original, bisa dihapus)
└── test_*.php (for testing)

⚡ Next Steps

  1. Rename index_new.html ke index.html (atau update server config)
  2. Test semua CRUD operations untuk memastikan semuanya berjalan
  3. Lanjutkan fitur Authentication untuk user management
  4. Implementasi Advanced Map Features seperti heatmap & clustering
  5. Tambahkan Export/Import functionality

📞 Support

Untuk issues atau pertanyaan, silakan check:

  • Console browser (F12) untuk error messages
  • Network tab untuk API request/response
  • Server logs di XAMPP untuk PHP errors

Last Updated: May 2026 Status: Ongoing Development Version: 2.0 (New UI & CRUD Features)

Reference in New Issue View Git Blame Copy Permalink