First commit / commit pertama
This commit is contained in:
Mr.Haruna
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"http://localhost/Final_Project/project_final/login.php\")",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"http://localhost/Final_Project/project_final/peta_publik.php\")",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code} -> %{redirect_url}\\\\n\" \"http://localhost/Final_Project/project_final/admin/index.php\")",
|
||||
"Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"http://localhost/Final_Project/project_final/enumerator/index.php\")"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.git/
|
||||
.gitignore
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
MANUAL_BOOK.docx
|
||||
PRESENTASI.pptx
|
||||
NEXT_WORK_SUMMARY.md
|
||||
PROJECT_PROGRESS_SUMMARY.md
|
||||
|
||||
node_modules/
|
||||
vendor/
|
||||
uploads/
|
||||
project_final/uploads/
|
||||
*.log
|
||||
*.tmp
|
||||
database/backups/
|
||||
database/*backup*.sql
|
||||
database/*_backup.sql
|
||||
*.sql.gz
|
||||
*.dump
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
# OS / editor
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
desktop.ini
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# Local deliverables / work notes
|
||||
MANUAL_BOOK.docx
|
||||
PRESENTASI.pptx
|
||||
NEXT_WORK_SUMMARY.md
|
||||
PROJECT_PROGRESS_SUMMARY.md
|
||||
|
||||
# Environment / local config
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
project_final/config/db.local.php
|
||||
project_final/config/*.local.php
|
||||
|
||||
# PHP / Composer
|
||||
vendor/
|
||||
|
||||
# Node / frontend packages
|
||||
node_modules/
|
||||
|
||||
# Logs / cache / temp
|
||||
*.log
|
||||
logs/
|
||||
cache/
|
||||
tmp/
|
||||
temp/
|
||||
*.tmp
|
||||
*.bak
|
||||
*.swp
|
||||
|
||||
# Runtime uploads
|
||||
uploads/*
|
||||
project_final/uploads/*
|
||||
!uploads/.gitkeep
|
||||
!project_final/uploads/.gitkeep
|
||||
|
||||
# Generated backups / exports
|
||||
database/backups/
|
||||
database/*backup*.sql
|
||||
database/*_backup.sql
|
||||
*.sql.gz
|
||||
*.dump
|
||||
|
||||
# Test / build output
|
||||
coverage/
|
||||
dist/
|
||||
build/
|
||||
|
||||
akun_testing.txt
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* jalan.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Jalan (LineString).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, jenis_jalan, created_at, ST_AsGeoJSON(geom) as geojson FROM jalan");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'jenis_jalan' => $row['jenis_jalan'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Jalan berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) {
|
||||
sendError('Nama dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO jalan (nama, jenis_jalan, geom) VALUES (:nama, :jenis_jalan, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':jenis_jalan' => $input['jenis_jalan'] ?? 'Lokal',
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Jalan berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Jalan wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM jalan WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Jalan berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* kavling.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Kavling (Polygon).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama_pemilik, luas, created_at, ST_AsGeoJSON(geom) as geojson FROM kavling");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_pemilik' => $row['nama_pemilik'],
|
||||
'luas' => $row['luas'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Kavling berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama_pemilik']) || !isset($input['geometry'])) {
|
||||
sendError('Nama pemilik dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO kavling (nama_pemilik, luas, geom) VALUES (:nama_pemilik, :luas, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama_pemilik' => $input['nama_pemilik'],
|
||||
':luas' => $input['luas'] ?? 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Kavling berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Kavling wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM kavling WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Kavling berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,59 @@
|
||||
<?php
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, deskripsi, buka_24_jam, created_at, ST_AsGeoJSON(geom) as geojson FROM spbu");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'deskripsi' => $row['deskripsi'],
|
||||
'buka_24_jam' => (bool)$row['buka_24_jam'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data SPBU berhasil diambil');
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO spbu (nama, deskripsi, buka_24_jam, geom) VALUES (:nama, :deskripsi, :buka_24_jam, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':deskripsi' => $input['deskripsi'] ?? '',
|
||||
':buka_24_jam' => isset($input['buka_24_jam']) && $input['buka_24_jam'] ? 1 : 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM spbu WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,57 @@
|
||||
<?php
|
||||
/**
|
||||
* Singleton PDO connection.
|
||||
*
|
||||
* Coolify: set DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD
|
||||
* from the database service credentials.
|
||||
*/
|
||||
class Database {
|
||||
private static $conn = null;
|
||||
|
||||
private static function env(string $key, string $default = ''): string {
|
||||
$value = getenv($key);
|
||||
return ($value === false || $value === '') ? $default : $value;
|
||||
}
|
||||
|
||||
public static function getConnection() {
|
||||
if (self::$conn === null) {
|
||||
$dbUrl = self::env('DATABASE_URL');
|
||||
if ($dbUrl) {
|
||||
$parsed = parse_url($dbUrl);
|
||||
$host = $parsed['host'] ?? '127.0.0.1';
|
||||
$port = $parsed['port'] ?? '3306';
|
||||
$username = $parsed['user'] ?? 'root';
|
||||
$password = $parsed['pass'] ?? '';
|
||||
$dbName = ltrim($parsed['path'], '/');
|
||||
} else {
|
||||
$host = self::env('DB_HOST', '127.0.0.1');
|
||||
$port = self::env('DB_PORT', '3306');
|
||||
$dbName = self::env('DB_DATABASE', 'webgis_db');
|
||||
$username = self::env('DB_USERNAME', 'root');
|
||||
$password = self::env('DB_PASSWORD', '');
|
||||
}
|
||||
|
||||
self::$conn = new PDO(
|
||||
"mysql:host={$host};port={$port};dbname={$dbName};charset=utf8mb4",
|
||||
$username,
|
||||
$password
|
||||
);
|
||||
self::$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
self::$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
|
||||
|
||||
// Disable strict mode for GROUP BY to prevent 1055 errors in Coolify's MariaDB
|
||||
self::$conn->exec("SET SESSION sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''))");
|
||||
|
||||
// Auto-initialize database if empty
|
||||
$stmt = self::$conn->query("SHOW TABLES LIKE 'users'");
|
||||
if ($stmt->rowCount() == 0) {
|
||||
$sqlFile = __DIR__ . '/../../../database/webgis_db.sql';
|
||||
if (file_exists($sqlFile)) {
|
||||
$sql = file_get_contents($sqlFile);
|
||||
self::$conn->exec($sql);
|
||||
}
|
||||
}
|
||||
}
|
||||
return self::$conn;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
<?php
|
||||
/**
|
||||
* response_helper.php
|
||||
* Tanggung Jawab: Standarisasi format response JSON untuk semua API endpoint.
|
||||
* Mencegah inkonsistensi struktur data yang dikembalikan ke frontend.
|
||||
*/
|
||||
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
// Izinkan CORS (opsional, jika frontend dan backend di port yang beda)
|
||||
$allowedOrigin = getenv('CORS_ALLOWED_ORIGIN');
|
||||
if ($allowedOrigin !== false && $allowedOrigin !== '') {
|
||||
header('Access-Control-Allow-Origin: ' . $allowedOrigin);
|
||||
header('Vary: Origin');
|
||||
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
|
||||
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
|
||||
}
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
|
||||
exit(0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mengirim response sukses
|
||||
* @param mixed $data Data yang ingin dikirim
|
||||
* @param string $message Pesan sukses (opsional)
|
||||
* @param int $statusCode HTTP Status Code (default: 200)
|
||||
*/
|
||||
function sendSuccess($data = null, $message = 'Success', $statusCode = 200) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode([
|
||||
'status' => 'success',
|
||||
'message' => $message,
|
||||
'data' => $data
|
||||
]);
|
||||
exit();
|
||||
}
|
||||
|
||||
/**
|
||||
* Mengirim response error
|
||||
* @param string $message Pesan error
|
||||
* @param int $statusCode HTTP Status Code (default: 400)
|
||||
*/
|
||||
function sendError($message = 'Error', $statusCode = 400) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode([
|
||||
'status' => 'error',
|
||||
'message' => $message
|
||||
]);
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,61 @@
|
||||
/* base.css
|
||||
* Tanggung Jawab: Reset CSS, definisi variabel warna premium, dan tipografi dasar.
|
||||
*/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* Color Palette - Minimalist & Elegant */
|
||||
--primary: #4F46E5;
|
||||
--primary-hover: #4338CA;
|
||||
--secondary: #10B981;
|
||||
--background: #F3F4F6;
|
||||
--surface: #FFFFFF;
|
||||
--surface-glass: rgba(255, 255, 255, 0.85);
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border: #E5E7EB;
|
||||
--danger: #EF4444;
|
||||
|
||||
/* Shadows & Effects */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Scrollbar minimalis */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #CBD5E1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94A3B8;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/* form.css
|
||||
* Tanggung Jawab: Styling komponen form (input, button, select).
|
||||
*/
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
transition: var(--transition);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
width: auto;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #DC2626;
|
||||
}
|
||||
|
||||
/* Micro-animation for active state */
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Form Container Animation */
|
||||
#form-container {
|
||||
background: var(--surface);
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 20px;
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
:root {
|
||||
--primary: #6366F1;
|
||||
--primary-hover: #4F46E5;
|
||||
--bg-dark: #0F172A;
|
||||
--bg-glass: rgba(15, 23, 42, 0.75);
|
||||
--border-glass: rgba(255, 255, 255, 0.1);
|
||||
--text-light: #F8FAFC;
|
||||
--text-muted: #94A3B8;
|
||||
--radius: 20px;
|
||||
--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
--font: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Floating Dock */
|
||||
.floating-dock {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
z-index: 1000;
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--border-glass);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
width: 340px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Dock */
|
||||
.floating-dock::-webkit-scrollbar { width: 6px; }
|
||||
.floating-dock::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
|
||||
.header h2 { margin: 0 0 8px 0; font-size: 1.4rem; font-weight: 700; background: linear-gradient(135deg, #818CF8, #C084FC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.header p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
|
||||
|
||||
/* Buttons */
|
||||
.menu-group { display: flex; flex-direction: column; gap: 10px; }
|
||||
.menu-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
|
||||
|
||||
.btn-action {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
color: var(--text-light);
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: var(--font);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn-action svg { width: 20px; height: 20px; flex-shrink: 0; }
|
||||
|
||||
.btn-action:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.btn-action.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
/* Button Variants */
|
||||
.btn-spbu svg { color: #10B981; }
|
||||
.btn-jalan svg { color: #F59E0B; }
|
||||
.btn-kavling svg { color: #3B82F6; }
|
||||
.btn-rumah svg { color: #8B5CF6; }
|
||||
.btn-warga svg { color: #EF4444; }
|
||||
|
||||
/* Form Panel */
|
||||
.form-panel {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-glass);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 0.8rem; color: var(--text-muted); }
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.form-control:focus { border-color: var(--primary); }
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
|
||||
.checkbox-group span { font-size: 0.85rem; color: var(--text-light); }
|
||||
|
||||
.btn-submit {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-submit:hover { background: var(--primary-hover); }
|
||||
|
||||
/* Leaflet Customizations */
|
||||
.leaflet-draw-toolbar { display: none !important; }
|
||||
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
|
||||
.leaflet-control-zoom a {
|
||||
background: var(--bg-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-color: var(--border-glass) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.leaflet-control-zoom a:hover { background: var(--primary) !important; }
|
||||
|
||||
/* Leaflet Popup Premium */
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: var(--bg-glass) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid var(--border-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
.leaflet-popup-tip { background: var(--bg-glass) !important; border: 1px solid var(--border-glass) !important; }
|
||||
.leaflet-popup-content { margin: 16px !important; font-family: var(--font); }
|
||||
.leaflet-popup-content h3 { margin: 0 0 8px 0; font-size: 1.1rem; border-bottom: 1px solid var(--border-glass); padding-bottom: 8px; }
|
||||
.leaflet-popup-content p { margin: 4px 0; font-size: 0.9rem; color: var(--text-muted); }
|
||||
.leaflet-popup-content .btn-delete {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #EF4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.leaflet-popup-content .btn-delete:hover { background: #EF4444; color: white; }
|
||||
|
||||
/* Custom Map Marker Icon Animation */
|
||||
.custom-icon div {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.custom-icon:hover div {
|
||||
transform: scale(1.1) translateY(-4px);
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.toast {
|
||||
background: var(--bg-glass); backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-glass); border-left: 4px solid var(--primary);
|
||||
padding: 16px 20px; border-radius: 12px; color: white; font-size: 0.9rem;
|
||||
box-shadow: var(--shadow); animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.toast.error { border-left-color: #EF4444; }
|
||||
.toast.success { border-left-color: #10B981; }
|
||||
|
||||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@@ -0,0 +1,73 @@
|
||||
/* map.css
|
||||
* Tanggung Jawab: Styling container peta, kontrol Leaflet, dan pop-up modern.
|
||||
*/
|
||||
|
||||
.map-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #E2E8F0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Customizing Leaflet Controls */
|
||||
.leaflet-control-zoom {
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a {
|
||||
color: var(--text-main) !important;
|
||||
background: var(--surface-glass) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a:hover {
|
||||
background: var(--surface) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Sembunyikan Toolbar Default Leaflet Draw karena kita pakai Menu Kiri */
|
||||
.leaflet-draw-toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Custom Popup Modern */
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 14px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
padding-bottom: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.popup-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.popup-action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/* sidebar.css
|
||||
* Tanggung Jawab: Styling layout sidebar, navigasi, dan list item.
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
width: 350px;
|
||||
background: var(--surface-glass);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.sidebar-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--surface);
|
||||
color: var(--text-main);
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: slideIn 0.3s forwards ease-out;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-left-color: var(--danger);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebGIS - Pertemuan 01</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Peta -->
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- Floating Dock -->
|
||||
<div class="floating-dock">
|
||||
<div class="header">
|
||||
<h2>P01: Geometri</h2>
|
||||
<p>Sistem Informasi Geografis dengan arsitektur modern.</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-group">
|
||||
<div class="menu-title">Alat Spasial</div>
|
||||
|
||||
<button id="btn-draw-spbu" class="btn-action btn-spbu">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
Tambah SPBU
|
||||
</button>
|
||||
|
||||
<button id="btn-draw-jalan" class="btn-action btn-jalan">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
|
||||
Tambah Jalan
|
||||
</button>
|
||||
|
||||
<button id="btn-draw-kavling" class="btn-action btn-kavling">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
|
||||
Tambah Kavling
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Form Container -->
|
||||
<div id="form-container" style="display: none;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Toast Notification Container -->
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
import { initMap } from './modules/map.js';
|
||||
import { setupDrawControls } from './modules/draw.js';
|
||||
import { renderForm } from './modules/form.js';
|
||||
import { spbuService, jalanService, kavlingService } from './services/api.service.js';
|
||||
|
||||
let appMap;
|
||||
let drawControl;
|
||||
|
||||
// Custom SVG Icons Generator
|
||||
export const createIcon = (svgPath, color) => {
|
||||
return L.divIcon({
|
||||
className: 'custom-icon',
|
||||
html: `<div style="background-color: ${color}; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.8); color: white;">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">${svgPath}</svg>
|
||||
</div>`,
|
||||
iconSize: [34, 34],
|
||||
iconAnchor: [17, 34],
|
||||
popupAnchor: [0, -34]
|
||||
});
|
||||
};
|
||||
|
||||
export const iconSPBU = (is24h) => createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>', is24h ? '#10B981' : '#EF4444');
|
||||
|
||||
window.showToast = (msg, type='success') => {
|
||||
const t = document.createElement('div');
|
||||
t.className = `toast ${type}`;
|
||||
t.innerHTML = msg;
|
||||
document.getElementById('toast-container').appendChild(t);
|
||||
setTimeout(() => { t.style.transform='translateX(100%)'; t.style.opacity=0; setTimeout(()=>t.remove(),300); }, 3000);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
appMap = initMap('map');
|
||||
drawControl = setupDrawControls(appMap, handleGeometryCreated);
|
||||
await loadAllData();
|
||||
});
|
||||
|
||||
const loadAllData = async () => {
|
||||
try {
|
||||
const spbu = await spbuService.getAll();
|
||||
L.geoJSON(spbu, {
|
||||
pointToLayer: (f, latlng) => L.marker(latlng, { icon: iconSPBU(f.properties.buka_24_jam) }),
|
||||
onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties)
|
||||
}).addTo(appMap);
|
||||
|
||||
const jalan = await jalanService.getAll();
|
||||
L.geoJSON(jalan, { style: { color: '#F59E0B', weight: 4 }, onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties) }).addTo(appMap);
|
||||
|
||||
const kavling = await kavlingService.getAll();
|
||||
L.geoJSON(kavling, { style: { color: '#3B82F6', weight: 2, fillColor: '#3B82F6', fillOpacity: 0.3 }, onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties) }).addTo(appMap);
|
||||
} catch (e) {
|
||||
window.showToast("Gagal meload data: "+e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const bindPopup = (layer, type, props) => {
|
||||
const ext = props.buka_24_jam !== undefined ? `<p>Buka 24 Jam: <strong style="color:${props.buka_24_jam?'#10B981':'#EF4444'}">${props.buka_24_jam ? 'Ya' : 'Tidak'}</strong></p>` : '';
|
||||
layer.bindPopup(`
|
||||
<div class="popup-custom">
|
||||
<h3>${props.nama}</h3>
|
||||
<p>${props.deskripsi || ''}</p>
|
||||
${ext}
|
||||
<button class="btn-delete" onclick="window.deleteData('${type}', ${props.id})">Hapus Data</button>
|
||||
</div>
|
||||
`);
|
||||
};
|
||||
|
||||
window.deleteData = async (type, id) => {
|
||||
if(!confirm('Yakin ingin menghapus?')) return;
|
||||
try {
|
||||
if(type==='spbu') await spbuService.delete(id);
|
||||
if(type==='jalan') await jalanService.delete(id);
|
||||
if(type==='kavling') await kavlingService.delete(id);
|
||||
window.showToast('Data dihapus');
|
||||
setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal hapus', 'error'); }
|
||||
};
|
||||
|
||||
const handleGeometryCreated = (type, geometry, layer) => {
|
||||
const tempLayer = L.geoJSON(geometry).addTo(appMap);
|
||||
renderForm(type, geometry, async (payload) => {
|
||||
try {
|
||||
if(type==='spbu') await spbuService.create(payload);
|
||||
if(type==='jalan') await jalanService.create(payload);
|
||||
if(type==='kavling') await kavlingService.create(payload);
|
||||
window.showToast('Berhasil disimpan');
|
||||
setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal simpan', 'error'); }
|
||||
}, () => {
|
||||
appMap.removeLayer(tempLayer);
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* config.js
|
||||
* Tanggung Jawab: Menyimpan konstanta dan konfigurasi global aplikasi.
|
||||
*/
|
||||
|
||||
export const CONFIG = {
|
||||
BASE_URL: '/01/backend/api',
|
||||
|
||||
// Konstanta tipe fitur
|
||||
FEATURE_TYPES: {
|
||||
SPBU: 'Point',
|
||||
JALAN: 'LineString',
|
||||
KAVLING: 'Polygon'
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
export const setupDrawControls = (map, onGeometryCreated) => {
|
||||
const drawControl = new L.Control.Draw({
|
||||
draw: { marker: true, polyline: true, polygon: true, circle: false, circlemarker: false, rectangle: false }
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
|
||||
map.on(L.Draw.Event.CREATED, function (event) {
|
||||
const layer = event.layer;
|
||||
const type = event.layerType;
|
||||
|
||||
// Peta draw default tipe: marker -> spbu, polyline -> jalan, polygon -> kavling
|
||||
let customType = type;
|
||||
if(type === 'marker') customType = 'spbu';
|
||||
if(type === 'polyline') customType = 'jalan';
|
||||
if(type === 'polygon') customType = 'kavling';
|
||||
if(window.currentDrawType) customType = window.currentDrawType; // Untuk P2/P3
|
||||
|
||||
onGeometryCreated(customType, layer.toGeoJSON().geometry, layer);
|
||||
});
|
||||
|
||||
// Custom Menu Handlers
|
||||
const markerDrawer = new L.Draw.Marker(map, drawControl.options.draw.marker);
|
||||
const polylineDrawer = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
|
||||
const polygonDrawer = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
|
||||
|
||||
document.getElementById('btn-draw-spbu')?.addEventListener('click', () => { window.currentDrawType='spbu'; markerDrawer.enable(); });
|
||||
document.getElementById('btn-draw-jalan')?.addEventListener('click', () => { window.currentDrawType='jalan'; polylineDrawer.enable(); });
|
||||
document.getElementById('btn-draw-kavling')?.addEventListener('click', () => { window.currentDrawType='kavling'; polygonDrawer.enable(); });
|
||||
|
||||
return drawControl;
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
export const renderForm = (type, geometry, onSubmit, onCancel) => {
|
||||
const container = document.getElementById('form-container');
|
||||
container.style.display = 'flex';
|
||||
|
||||
const extraFields = type === 'spbu' ? `
|
||||
<div class="form-group">
|
||||
<label class="checkbox-group">
|
||||
<input type="checkbox" id="input-24jam">
|
||||
<span>Buka 24 Jam</span>
|
||||
</label>
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="form-panel">
|
||||
<h3 style="margin:0 0 10px 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:8px;">Simpan Data (${type.toUpperCase()})</h3>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-nama" class="form-control" placeholder="Nama / Label" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-deskripsi" class="form-control" placeholder="Deskripsi Singkat">
|
||||
</div>
|
||||
${extraFields}
|
||||
<div style="display:flex; gap:10px; margin-top:8px;">
|
||||
<button id="btn-save" class="btn-submit" style="flex:1;">Simpan</button>
|
||||
<button id="btn-cancel" class="btn-submit" style="background:rgba(255,255,255,0.1); color:var(--text-light); flex:1;">Batal</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('btn-save').addEventListener('click', () => {
|
||||
const payload = {
|
||||
type,
|
||||
geometry,
|
||||
nama: document.getElementById('input-nama').value,
|
||||
deskripsi: document.getElementById('input-deskripsi').value,
|
||||
};
|
||||
if (type === 'spbu') payload.buka_24_jam = document.getElementById('input-24jam').checked;
|
||||
|
||||
onSubmit(payload);
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
|
||||
document.getElementById('btn-cancel').addEventListener('click', () => {
|
||||
if(onCancel) onCancel();
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* map.js
|
||||
* Tanggung Jawab: Inisialisasi peta Leaflet dasar dan base layer.
|
||||
*/
|
||||
|
||||
export const initMap = (containerId) => {
|
||||
// Pusat peta default (Universitas Tanjungpura, Pontianak)
|
||||
const map = L.map(containerId, {
|
||||
zoomControl: false
|
||||
}).setView([-0.0583, 109.3448], 15);
|
||||
|
||||
// Pindahkan zoom control ke kanan bawah
|
||||
L.control.zoom({
|
||||
position: 'bottomright'
|
||||
}).addTo(map);
|
||||
|
||||
// Tile Layer Premium (CartoDB Dark Matter untuk Glass UI)
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(map);
|
||||
|
||||
return map;
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
export const BASE_URL = '';
|
||||
|
||||
const createService = (endpoint) => ({
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
create: async (data) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
});
|
||||
|
||||
// P01
|
||||
export const spbuService = createService('01/backend/api/spbu.php');
|
||||
export const jalanService = createService('01/backend/api/jalan.php');
|
||||
export const kavlingService = createService('01/backend/api/kavling.php');
|
||||
|
||||
// P02
|
||||
export const rumahIbadahService = createService('02/backend/api/rumah_ibadah.php');
|
||||
export const wargaMiskinService = createService('02/backend/api/warga_miskin.php');
|
||||
export const haversineService = {
|
||||
getDalamRadius: async (id, radius) => {
|
||||
const res = await fetch(`${BASE_URL}/02/backend/api/haversine.php?rumah_ibadah_id=${id}&radius_km=${radius}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* jalan.service.js
|
||||
* Tanggung Jawab: Komunikasi HTTP ke endpoint API jalan.php
|
||||
*/
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const jalanService = {
|
||||
getAll: async () => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/jalan.php`);
|
||||
return await response.json();
|
||||
},
|
||||
|
||||
save: async (data) => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/jalan.php`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return await response.json();
|
||||
},
|
||||
|
||||
delete: async (id) => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/jalan.php?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* kavling.service.js
|
||||
* Tanggung Jawab: Komunikasi HTTP ke endpoint API kavling.php
|
||||
*/
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const kavlingService = {
|
||||
getAll: async () => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/kavling.php`);
|
||||
return await response.json();
|
||||
},
|
||||
|
||||
save: async (data) => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/kavling.php`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return await response.json();
|
||||
},
|
||||
|
||||
delete: async (id) => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/kavling.php?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* spbu.service.js
|
||||
* Tanggung Jawab: Komunikasi HTTP ke endpoint API spbu.php
|
||||
*/
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const spbuService = {
|
||||
getAll: async () => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/spbu.php`);
|
||||
return await response.json();
|
||||
},
|
||||
|
||||
save: async (data) => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/spbu.php`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return await response.json();
|
||||
},
|
||||
|
||||
delete: async (id) => {
|
||||
const response = await fetch(`${CONFIG.BASE_URL}/spbu.php?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
return await response.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* style.util.js
|
||||
* Tanggung Jawab: Mendefinisikan style untuk GeoJSON berdasarkan properti.
|
||||
*/
|
||||
|
||||
export const getGeoJsonStyle = (feature) => {
|
||||
// Style default untuk Kavling (Polygon)
|
||||
if (feature.geometry.type === 'Polygon') {
|
||||
return {
|
||||
color: '#10B981', // Secondary color
|
||||
weight: 2,
|
||||
opacity: 0.8,
|
||||
fillColor: '#34D399',
|
||||
fillOpacity: 0.4
|
||||
};
|
||||
}
|
||||
|
||||
// Style default untuk Jalan (LineString)
|
||||
if (feature.geometry.type === 'LineString') {
|
||||
const type = feature.properties.jenis_jalan;
|
||||
let color = '#4F46E5'; // Primary color
|
||||
|
||||
if (type === 'Arteri') color = '#EF4444'; // Danger color
|
||||
else if (type === 'Kolektor') color = '#F59E0B'; // Warning color
|
||||
|
||||
return {
|
||||
color: color,
|
||||
weight: 4,
|
||||
opacity: 0.9
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* ui.util.js
|
||||
* Tanggung Jawab: Manipulasi DOM umum seperti Toast notification.
|
||||
*/
|
||||
|
||||
export const showToast = (message, type = 'success') => {
|
||||
const container = document.getElementById('toast-container');
|
||||
if (!container) return;
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
toast.textContent = message;
|
||||
|
||||
container.appendChild(toast);
|
||||
|
||||
// Hapus toast setelah 3 detik
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transform = 'translateY(20px)';
|
||||
toast.style.transition = 'all 0.3s ease';
|
||||
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
export const clearFormContainer = () => {
|
||||
const container = document.getElementById('form-container');
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
container.style.display = 'none';
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* jalan.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Jalan (LineString).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, jenis_jalan, created_at, ST_AsGeoJSON(geom) as geojson FROM jalan");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'jenis_jalan' => $row['jenis_jalan'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Jalan berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) {
|
||||
sendError('Nama dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO jalan (nama, jenis_jalan, geom) VALUES (:nama, :jenis_jalan, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':jenis_jalan' => $input['jenis_jalan'] ?? 'Lokal',
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Jalan berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Jalan wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM jalan WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Jalan berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* kavling.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Kavling (Polygon).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama_pemilik, luas, created_at, ST_AsGeoJSON(geom) as geojson FROM kavling");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_pemilik' => $row['nama_pemilik'],
|
||||
'luas' => $row['luas'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Kavling berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama_pemilik']) || !isset($input['geometry'])) {
|
||||
sendError('Nama pemilik dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO kavling (nama_pemilik, luas, geom) VALUES (:nama_pemilik, :luas, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama_pemilik' => $input['nama_pemilik'],
|
||||
':luas' => $input['luas'] ?? 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Kavling berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Kavling wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM kavling WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Kavling berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,89 @@
|
||||
<?php
|
||||
/**
|
||||
* rumah_ibadah.php
|
||||
* Tanggung Jawab: Operasi CRUD Rumah Ibadah + Endpoint analisis jangkauan Haversine.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
require_once '../utils/geo_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
if (isset($_GET['action']) && $_GET['action'] === 'jangkauan' && isset($_GET['id'])) {
|
||||
// Analisis Jangkauan Haversine
|
||||
$id = $_GET['id'];
|
||||
$radius = isset($_GET['radius']) ? (float) $_GET['radius'] : 1.0; // default 1 km
|
||||
|
||||
// Dapatkan koordinat rumah ibadah ini
|
||||
$stmt = $pdo->prepare("SELECT ST_AsGeoJSON(geom) as geojson FROM rumah_ibadah WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
$rumah_ibadah = $stmt->fetch();
|
||||
|
||||
if (!$rumah_ibadah) sendError('Rumah ibadah tidak ditemukan', 404);
|
||||
|
||||
$geom = json_decode($rumah_ibadah['geojson'], true);
|
||||
$pusatLon = $geom['coordinates'][0];
|
||||
$pusatLat = $geom['coordinates'][1];
|
||||
|
||||
// Panggil geo_helper untuk mendapatkan warga miskin
|
||||
$warga = GeoHelper::getWargaDalamRadius($pdo, $pusatLat, $pusatLon, $radius);
|
||||
sendSuccess($warga, 'Data jangkauan berhasil dihitung');
|
||||
|
||||
} else {
|
||||
// GET Semua Rumah Ibadah (GeoJSON)
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, agama, ST_AsGeoJSON(geom) as geojson FROM rumah_ibadah");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'agama' => $row['agama']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Rumah Ibadah');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO rumah_ibadah (nama, agama, geom) VALUES (:nama, :agama, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':agama' => $input['agama'] ?? 'Islam',
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM rumah_ibadah WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,59 @@
|
||||
<?php
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, deskripsi, buka_24_jam, created_at, ST_AsGeoJSON(geom) as geojson FROM spbu");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'deskripsi' => $row['deskripsi'],
|
||||
'buka_24_jam' => (bool)$row['buka_24_jam'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data SPBU berhasil diambil');
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO spbu (nama, deskripsi, buka_24_jam, geom) VALUES (:nama, :deskripsi, :buka_24_jam, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':deskripsi' => $input['deskripsi'] ?? '',
|
||||
':buka_24_jam' => isset($input['buka_24_jam']) && $input['buka_24_jam'] ? 1 : 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM spbu WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
/**
|
||||
* warga_miskin.php
|
||||
* Tanggung Jawab: Operasi CRUD untuk Warga Miskin.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama_kk, penghasilan, jumlah_tanggungan, ST_AsGeoJSON(geom) as geojson FROM warga_miskin");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_kk' => $row['nama_kk'],
|
||||
'penghasilan' => $row['penghasilan'],
|
||||
'jumlah_tanggungan' => $row['jumlah_tanggungan']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Warga Miskin');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama_kk']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO warga_miskin (nama_kk, penghasilan, jumlah_tanggungan, geom) VALUES (:nama_kk, :penghasilan, :jumlah_tanggungan, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama_kk' => $input['nama_kk'],
|
||||
':penghasilan' => $input['penghasilan'] ?? 0,
|
||||
':jumlah_tanggungan' => $input['jumlah_tanggungan'] ?? 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM warga_miskin WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,57 @@
|
||||
<?php
|
||||
/**
|
||||
* Singleton PDO connection.
|
||||
*
|
||||
* Coolify: set DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD
|
||||
* from the database service credentials.
|
||||
*/
|
||||
class Database {
|
||||
private static $conn = null;
|
||||
|
||||
private static function env(string $key, string $default = ''): string {
|
||||
$value = getenv($key);
|
||||
return ($value === false || $value === '') ? $default : $value;
|
||||
}
|
||||
|
||||
public static function getConnection() {
|
||||
if (self::$conn === null) {
|
||||
$dbUrl = self::env('DATABASE_URL');
|
||||
if ($dbUrl) {
|
||||
$parsed = parse_url($dbUrl);
|
||||
$host = $parsed['host'] ?? '127.0.0.1';
|
||||
$port = $parsed['port'] ?? '3306';
|
||||
$username = $parsed['user'] ?? 'root';
|
||||
$password = $parsed['pass'] ?? '';
|
||||
$dbName = ltrim($parsed['path'], '/');
|
||||
} else {
|
||||
$host = self::env('DB_HOST', '127.0.0.1');
|
||||
$port = self::env('DB_PORT', '3306');
|
||||
$dbName = self::env('DB_DATABASE', 'webgis_db');
|
||||
$username = self::env('DB_USERNAME', 'root');
|
||||
$password = self::env('DB_PASSWORD', '');
|
||||
}
|
||||
|
||||
self::$conn = new PDO(
|
||||
"mysql:host={$host};port={$port};dbname={$dbName};charset=utf8mb4",
|
||||
$username,
|
||||
$password
|
||||
);
|
||||
self::$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
self::$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
|
||||
|
||||
// Disable strict mode for GROUP BY to prevent 1055 errors in Coolify's MariaDB
|
||||
self::$conn->exec("SET SESSION sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''))");
|
||||
|
||||
// Auto-initialize database if empty
|
||||
$stmt = self::$conn->query("SHOW TABLES LIKE 'users'");
|
||||
if ($stmt->rowCount() == 0) {
|
||||
$sqlFile = __DIR__ . '/../../../database/webgis_db.sql';
|
||||
if (file_exists($sqlFile)) {
|
||||
$sql = file_get_contents($sqlFile);
|
||||
self::$conn->exec($sql);
|
||||
}
|
||||
}
|
||||
}
|
||||
return self::$conn;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<?php
|
||||
/**
|
||||
* geo_helper.php
|
||||
* Tanggung Jawab: Menyediakan fungsi matematika spasial manual (seperti Haversine).
|
||||
*/
|
||||
|
||||
class GeoHelper {
|
||||
/**
|
||||
* Menghitung jarak antara dua koordinat geografis menggunakan Haversine Formula.
|
||||
* Mengembalikan jarak dalam satuan Kilometer.
|
||||
*/
|
||||
public static function haversineDistance($lat1, $lon1, $lat2, $lon2) {
|
||||
$earthRadius = 6371; // Jari-jari bumi dalam kilometer
|
||||
|
||||
$dLat = deg2rad($lat2 - $lat1);
|
||||
$dLon = deg2rad($lon2 - $lon1);
|
||||
|
||||
$a = sin($dLat / 2) * sin($dLat / 2) +
|
||||
cos(deg2rad($lat1)) * cos(deg2rad($lat2)) *
|
||||
sin($dLon / 2) * sin($dLon / 2);
|
||||
|
||||
$c = 2 * atan2(sqrt($a), sqrt(1 - $a));
|
||||
$distance = $earthRadius * $c;
|
||||
|
||||
return $distance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mencari Warga Miskin dalam radius tertentu dari suatu titik (Rumah Ibadah).
|
||||
*/
|
||||
public static function getWargaDalamRadius($pdo, $pusatLat, $pusatLon, $radiusKm = 1.0) {
|
||||
// Ambil semua data warga miskin
|
||||
$stmt = $pdo->query("SELECT id, nama_kk, penghasilan, jumlah_tanggungan, ST_AsGeoJSON(geom) as geojson FROM warga_miskin");
|
||||
|
||||
$wargaDalamRadius = [];
|
||||
|
||||
while ($row = $stmt->fetch()) {
|
||||
$geom = json_decode($row['geojson'], true);
|
||||
// GeoJSON Point format: [Longitude, Latitude]
|
||||
$wargaLon = $geom['coordinates'][0];
|
||||
$wargaLat = $geom['coordinates'][1];
|
||||
|
||||
// Hitung jarak dengan Haversine
|
||||
$jarak = self::haversineDistance($pusatLat, $pusatLon, $wargaLat, $wargaLon);
|
||||
|
||||
if ($jarak <= $radiusKm) {
|
||||
$wargaDalamRadius[] = [
|
||||
'id' => $row['id'],
|
||||
'nama_kk' => $row['nama_kk'],
|
||||
'penghasilan' => $row['penghasilan'],
|
||||
'jumlah_tanggungan' => $row['jumlah_tanggungan'],
|
||||
'jarak_km' => round($jarak, 2),
|
||||
'geometry' => $geom
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
// Urutkan berdasarkan jarak terdekat
|
||||
usort($wargaDalamRadius, function($a, $b) {
|
||||
return $a['jarak_km'] <=> $b['jarak_km'];
|
||||
});
|
||||
|
||||
return $wargaDalamRadius;
|
||||
}
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
/**
|
||||
* response_helper.php
|
||||
* Tanggung Jawab: Standarisasi format response JSON.
|
||||
*/
|
||||
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
$allowedOrigin = getenv('CORS_ALLOWED_ORIGIN');
|
||||
if ($allowedOrigin !== false && $allowedOrigin !== '') {
|
||||
header('Access-Control-Allow-Origin: ' . $allowedOrigin);
|
||||
header('Vary: Origin');
|
||||
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
|
||||
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
|
||||
}
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { exit(0); }
|
||||
|
||||
function sendSuccess($data = null, $message = 'Success', $statusCode = 200) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode(['status' => 'success', 'message' => $message, 'data' => $data]);
|
||||
exit();
|
||||
}
|
||||
|
||||
function sendError($message = 'Error', $statusCode = 400) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode(['status' => 'error', 'message' => $message]);
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,61 @@
|
||||
/* base.css
|
||||
* Tanggung Jawab: Reset CSS, definisi variabel warna premium, dan tipografi dasar.
|
||||
*/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* Color Palette - Minimalist & Elegant */
|
||||
--primary: #4F46E5;
|
||||
--primary-hover: #4338CA;
|
||||
--secondary: #10B981;
|
||||
--background: #F3F4F6;
|
||||
--surface: #FFFFFF;
|
||||
--surface-glass: rgba(255, 255, 255, 0.85);
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border: #E5E7EB;
|
||||
--danger: #EF4444;
|
||||
|
||||
/* Shadows & Effects */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Scrollbar minimalis */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #CBD5E1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94A3B8;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/* form.css
|
||||
* Tanggung Jawab: Styling komponen form (input, button, select).
|
||||
*/
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
transition: var(--transition);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
width: auto;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #DC2626;
|
||||
}
|
||||
|
||||
/* Micro-animation for active state */
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Form Container Animation */
|
||||
#form-container {
|
||||
background: var(--surface);
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 20px;
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
:root {
|
||||
--primary: #6366F1;
|
||||
--primary-hover: #4F46E5;
|
||||
--bg-dark: #0F172A;
|
||||
--bg-glass: rgba(15, 23, 42, 0.75);
|
||||
--border-glass: rgba(255, 255, 255, 0.1);
|
||||
--text-light: #F8FAFC;
|
||||
--text-muted: #94A3B8;
|
||||
--radius: 20px;
|
||||
--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
--font: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Floating Dock */
|
||||
.floating-dock {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
z-index: 1000;
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--border-glass);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
width: 340px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Dock */
|
||||
.floating-dock::-webkit-scrollbar { width: 6px; }
|
||||
.floating-dock::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
|
||||
.header h2 { margin: 0 0 8px 0; font-size: 1.4rem; font-weight: 700; background: linear-gradient(135deg, #818CF8, #C084FC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.header p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
|
||||
|
||||
/* Buttons */
|
||||
.menu-group { display: flex; flex-direction: column; gap: 10px; }
|
||||
.menu-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
|
||||
|
||||
.btn-action {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
color: var(--text-light);
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: var(--font);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn-action svg { width: 20px; height: 20px; flex-shrink: 0; }
|
||||
|
||||
.btn-action:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.btn-action.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
/* Button Variants */
|
||||
.btn-spbu svg { color: #10B981; }
|
||||
.btn-jalan svg { color: #F59E0B; }
|
||||
.btn-kavling svg { color: #3B82F6; }
|
||||
.btn-rumah svg { color: #8B5CF6; }
|
||||
.btn-warga svg { color: #EF4444; }
|
||||
|
||||
/* Form Panel */
|
||||
.form-panel {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-glass);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 0.8rem; color: var(--text-muted); }
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.form-control:focus { border-color: var(--primary); }
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
|
||||
.checkbox-group span { font-size: 0.85rem; color: var(--text-light); }
|
||||
|
||||
.btn-submit {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-submit:hover { background: var(--primary-hover); }
|
||||
|
||||
/* Leaflet Customizations */
|
||||
.leaflet-draw-toolbar { display: none !important; }
|
||||
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
|
||||
.leaflet-control-zoom a {
|
||||
background: var(--bg-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-color: var(--border-glass) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.leaflet-control-zoom a:hover { background: var(--primary) !important; }
|
||||
|
||||
/* Leaflet Popup Premium */
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: var(--bg-glass) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid var(--border-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
.leaflet-popup-tip { background: var(--bg-glass) !important; border: 1px solid var(--border-glass) !important; }
|
||||
.leaflet-popup-content { margin: 16px !important; font-family: var(--font); }
|
||||
.leaflet-popup-content h3 { margin: 0 0 8px 0; font-size: 1.1rem; border-bottom: 1px solid var(--border-glass); padding-bottom: 8px; }
|
||||
.leaflet-popup-content p { margin: 4px 0; font-size: 0.9rem; color: var(--text-muted); }
|
||||
.leaflet-popup-content .btn-delete {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #EF4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.leaflet-popup-content .btn-delete:hover { background: #EF4444; color: white; }
|
||||
|
||||
/* Custom Map Marker Icon Animation */
|
||||
.custom-icon div {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.custom-icon:hover div {
|
||||
transform: scale(1.1) translateY(-4px);
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.toast {
|
||||
background: var(--bg-glass); backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-glass); border-left: 4px solid var(--primary);
|
||||
padding: 16px 20px; border-radius: 12px; color: white; font-size: 0.9rem;
|
||||
box-shadow: var(--shadow); animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.toast.error { border-left-color: #EF4444; }
|
||||
.toast.success { border-left-color: #10B981; }
|
||||
|
||||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@@ -0,0 +1,68 @@
|
||||
/* map.css
|
||||
* Tanggung Jawab: Styling container peta, kontrol Leaflet, dan pop-up modern.
|
||||
*/
|
||||
|
||||
.map-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #E2E8F0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Customizing Leaflet Controls */
|
||||
.leaflet-control-zoom {
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a {
|
||||
color: var(--text-main) !important;
|
||||
background: var(--surface-glass) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a:hover {
|
||||
background: var(--surface) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Custom Popup Modern */
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 14px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
padding-bottom: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.popup-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.popup-action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/* sidebar.css
|
||||
* Tanggung Jawab: Styling layout sidebar, navigasi, dan list item.
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
width: 350px;
|
||||
background: var(--surface-glass);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.sidebar-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--surface);
|
||||
color: var(--text-main);
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: slideIn 0.3s forwards ease-out;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-left-color: var(--danger);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebGIS - Pertemuan 02</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<style>
|
||||
.result-item { background: rgba(255,255,255,0.05); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-glass); display: flex; justify-content: space-between; align-items: center; }
|
||||
.badge { background: var(--primary); padding: 2px 6px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div class="floating-dock">
|
||||
<div class="header">
|
||||
<h2>P02: Tematik & Jarak</h2>
|
||||
<p>Kumulatif P01 + Analisis radius jarak Haversine.</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-group">
|
||||
<div class="menu-title">Entitas Dasar (P01)</div>
|
||||
<button id="btn-draw-spbu" class="btn-action btn-spbu"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> Tambah SPBU</button>
|
||||
<button id="btn-draw-jalan" class="btn-action btn-jalan"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg> Tambah Jalan</button>
|
||||
<button id="btn-draw-kavling" class="btn-action btn-kavling"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> Tambah Kavling</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-group" style="margin-top: 5px;">
|
||||
<div class="menu-title">Entitas Sosial (P02)</div>
|
||||
<button id="btn-draw-rumah" class="btn-action btn-rumah"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg> Tambah Rumah Ibadah</button>
|
||||
<button id="btn-draw-warga" class="btn-action btn-warga"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg> Tambah Warga Miskin</button>
|
||||
</div>
|
||||
|
||||
<div id="instruction-panel" class="form-panel" style="margin-top: 5px;">
|
||||
<h3 style="margin:0 0 5px 0; font-size:0.9rem; color:var(--text-main);">Analisis Jarak</h3>
|
||||
<p style="font-size:0.8rem; margin:0 0 10px 0; color:var(--text-muted);">Klik [Cek Radius] di popup Rumah Ibadah mana pun.</p>
|
||||
<div id="radius-results" style="max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="form-container" style="display: none;"></div>
|
||||
</div>
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
import { initMap } from './modules/map.js';
|
||||
import { setupDrawControls } from './modules/draw.js';
|
||||
import { renderForm } from './modules/form.js';
|
||||
import { spbuService, jalanService, kavlingService, rumahIbadahService, wargaMiskinService, haversineService } from './services/api.service.js';
|
||||
|
||||
let appMap;
|
||||
let drawControl;
|
||||
let currentRadiusCircle = null;
|
||||
let currentHighlightLayer = null;
|
||||
|
||||
export const createIcon = (svgPath, color) => {
|
||||
return L.divIcon({
|
||||
className: 'custom-icon',
|
||||
html: `<div style="background-color: ${color}; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.8); color: white;">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">${svgPath}</svg>
|
||||
</div>`,
|
||||
iconSize: [34, 34], iconAnchor: [17, 34], popupAnchor: [0, -34]
|
||||
});
|
||||
};
|
||||
|
||||
const iconSPBU = (is24h) => createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>', is24h ? '#10B981' : '#EF4444');
|
||||
const iconRumah = createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>', '#8B5CF6');
|
||||
const iconWarga = createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>', '#EF4444');
|
||||
|
||||
window.showToast = (msg, type='success') => {
|
||||
const t = document.createElement('div');
|
||||
t.className = `toast ${type}`; t.innerHTML = msg;
|
||||
document.getElementById('toast-container').appendChild(t);
|
||||
setTimeout(() => { t.style.transform='translateX(100%)'; t.style.opacity=0; setTimeout(()=>t.remove(),300); }, 3000);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
appMap = initMap('map');
|
||||
|
||||
// Bind extra draw events for 02
|
||||
document.getElementById('btn-draw-rumah')?.addEventListener('click', () => { window.currentDrawType='rumah_ibadah'; new L.Draw.Marker(appMap).enable(); });
|
||||
document.getElementById('btn-draw-warga')?.addEventListener('click', () => { window.currentDrawType='warga_miskin'; new L.Draw.Marker(appMap).enable(); });
|
||||
|
||||
drawControl = setupDrawControls(appMap, handleGeometryCreated);
|
||||
await loadAllData();
|
||||
});
|
||||
|
||||
const loadAllData = async () => {
|
||||
try {
|
||||
const [spbu, jalan, kavling, rumah, warga] = await Promise.all([
|
||||
spbuService.getAll(), jalanService.getAll(), kavlingService.getAll(),
|
||||
rumahIbadahService.getAll(), wargaMiskinService.getAll()
|
||||
]);
|
||||
|
||||
L.geoJSON(spbu, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconSPBU(f.properties.buka_24_jam) }), onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(jalan, { style: { color: '#F59E0B', weight: 4 }, onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(kavling, { style: { color: '#3B82F6', weight: 2, fillColor: '#3B82F6', fillOpacity: 0.3 }, onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(rumah, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconRumah }), onEachFeature: (f, l) => bindPopup(l, 'rumah_ibadah', f.properties, f) }).addTo(appMap);
|
||||
L.geoJSON(warga, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconWarga }), onEachFeature: (f, l) => bindPopup(l, 'warga_miskin', f.properties) }).addTo(appMap);
|
||||
} catch (e) {
|
||||
window.showToast("Gagal meload data: "+e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const bindPopup = (layer, type, props, feature=null) => {
|
||||
let ext = '';
|
||||
if(type==='spbu') ext = `<p>24 Jam: <strong style="color:${props.buka_24_jam?'#10B981':'#EF4444'}">${props.buka_24_jam?'Ya':'Tidak'}</strong></p>`;
|
||||
if(type==='rumah_ibadah' && feature) ext = `<button class="btn-submit" style="width:100%; margin-top:8px;" onclick="window.checkRadius(${props.id}, ${feature.geometry.coordinates[1]}, ${feature.geometry.coordinates[0]})">Cek Radius 1km</button>`;
|
||||
|
||||
layer.bindPopup(`
|
||||
<div class="popup-custom">
|
||||
<h3>${props.nama}</h3>
|
||||
<p>${props.deskripsi || ''}</p>
|
||||
${ext}
|
||||
<button class="btn-delete" onclick="window.deleteData('${type}', ${props.id})">Hapus</button>
|
||||
</div>
|
||||
`);
|
||||
};
|
||||
|
||||
window.checkRadius = async (rumahId, lat, lng) => {
|
||||
if (currentRadiusCircle) appMap.removeLayer(currentRadiusCircle);
|
||||
if (currentHighlightLayer) appMap.removeLayer(currentHighlightLayer);
|
||||
|
||||
currentRadiusCircle = L.circle([lat, lng], { radius: 1000, color: '#8B5CF6', fillColor: '#8B5CF6', fillOpacity: 0.15, weight: 2 }).addTo(appMap);
|
||||
appMap.flyTo([lat, lng], 15);
|
||||
window.showToast('Menghitung jarak...');
|
||||
|
||||
try {
|
||||
const res = await haversineService.getDalamRadius(rumahId, 1);
|
||||
const container = document.getElementById('radius-results');
|
||||
container.innerHTML = res.features.length ? '' : '<p>Tidak ada warga miskin.</p>';
|
||||
|
||||
res.features.forEach(f => {
|
||||
const d = parseFloat(f.properties.jarak_km).toFixed(2);
|
||||
container.innerHTML += `<div class="result-item"><span>${f.properties.nama}</span><span class="badge">${d} km</span></div>`;
|
||||
});
|
||||
|
||||
currentHighlightLayer = L.geoJSON(res, {
|
||||
pointToLayer: (f, ll) => L.circleMarker(ll, { radius:8, fillColor:'#EF4444', color:'#fff', weight:2, fillOpacity:1 })
|
||||
}).addTo(appMap);
|
||||
|
||||
} catch(e) { window.showToast('Gagal kalkulasi', 'error'); }
|
||||
};
|
||||
|
||||
window.deleteData = async (type, id) => {
|
||||
if(!confirm('Yakin menghapus?')) return;
|
||||
try {
|
||||
if(type==='spbu') await spbuService.delete(id);
|
||||
if(type==='jalan') await jalanService.delete(id);
|
||||
if(type==='kavling') await kavlingService.delete(id);
|
||||
if(type==='rumah_ibadah') await rumahIbadahService.delete(id);
|
||||
if(type==='warga_miskin') await wargaMiskinService.delete(id);
|
||||
window.showToast('Data dihapus'); setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal hapus', 'error'); }
|
||||
};
|
||||
|
||||
const handleGeometryCreated = (type, geometry, layer) => {
|
||||
const tempLayer = L.geoJSON(geometry).addTo(appMap);
|
||||
renderForm(type, geometry, async (payload) => {
|
||||
try {
|
||||
if(type==='spbu') await spbuService.create(payload);
|
||||
if(type==='jalan') await jalanService.create(payload);
|
||||
if(type==='kavling') await kavlingService.create(payload);
|
||||
if(type==='rumah_ibadah') await rumahIbadahService.create(payload);
|
||||
if(type==='warga_miskin') await wargaMiskinService.create(payload);
|
||||
window.showToast('Tersimpan'); setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal simpan', 'error'); }
|
||||
}, () => appMap.removeLayer(tempLayer));
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export const CONFIG = {
|
||||
BASE_URL: '/02/backend/api',
|
||||
RADIUS_KM: 1.0 // Radius default 1 km
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
export const setupDrawControls = (map, onGeometryCreated) => {
|
||||
const drawControl = new L.Control.Draw({
|
||||
draw: { marker: true, polyline: true, polygon: true, circle: false, circlemarker: false, rectangle: false }
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
|
||||
map.on(L.Draw.Event.CREATED, function (event) {
|
||||
const layer = event.layer;
|
||||
const type = event.layerType;
|
||||
|
||||
// Peta draw default tipe: marker -> spbu, polyline -> jalan, polygon -> kavling
|
||||
let customType = type;
|
||||
if(type === 'marker') customType = 'spbu';
|
||||
if(type === 'polyline') customType = 'jalan';
|
||||
if(type === 'polygon') customType = 'kavling';
|
||||
if(window.currentDrawType) customType = window.currentDrawType; // Untuk P2/P3
|
||||
|
||||
onGeometryCreated(customType, layer.toGeoJSON().geometry, layer);
|
||||
});
|
||||
|
||||
// Custom Menu Handlers
|
||||
const markerDrawer = new L.Draw.Marker(map, drawControl.options.draw.marker);
|
||||
const polylineDrawer = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
|
||||
const polygonDrawer = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
|
||||
|
||||
document.getElementById('btn-draw-spbu')?.addEventListener('click', () => { window.currentDrawType='spbu'; markerDrawer.enable(); });
|
||||
document.getElementById('btn-draw-jalan')?.addEventListener('click', () => { window.currentDrawType='jalan'; polylineDrawer.enable(); });
|
||||
document.getElementById('btn-draw-kavling')?.addEventListener('click', () => { window.currentDrawType='kavling'; polygonDrawer.enable(); });
|
||||
|
||||
return drawControl;
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
export const renderForm = (type, geometry, onSubmit, onCancel) => {
|
||||
const container = document.getElementById('form-container');
|
||||
container.style.display = 'flex';
|
||||
|
||||
const extraFields = type === 'spbu' ? `
|
||||
<div class="form-group">
|
||||
<label class="checkbox-group">
|
||||
<input type="checkbox" id="input-24jam">
|
||||
<span>Buka 24 Jam</span>
|
||||
</label>
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="form-panel">
|
||||
<h3 style="margin:0 0 10px 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:8px;">Simpan Data (${type.toUpperCase()})</h3>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-nama" class="form-control" placeholder="Nama / Label" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-deskripsi" class="form-control" placeholder="Deskripsi Singkat">
|
||||
</div>
|
||||
${extraFields}
|
||||
<div style="display:flex; gap:10px; margin-top:8px;">
|
||||
<button id="btn-save" class="btn-submit" style="flex:1;">Simpan</button>
|
||||
<button id="btn-cancel" class="btn-submit" style="background:rgba(255,255,255,0.1); color:var(--text-light); flex:1;">Batal</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('btn-save').addEventListener('click', () => {
|
||||
const payload = {
|
||||
type,
|
||||
geometry,
|
||||
nama: document.getElementById('input-nama').value,
|
||||
deskripsi: document.getElementById('input-deskripsi').value,
|
||||
};
|
||||
if (type === 'spbu') payload.buka_24_jam = document.getElementById('input-24jam').checked;
|
||||
|
||||
onSubmit(payload);
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
|
||||
document.getElementById('btn-cancel').addEventListener('click', () => {
|
||||
if(onCancel) onCancel();
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* map.js
|
||||
* Tanggung Jawab: Inisialisasi peta Leaflet dasar dan base layer.
|
||||
*/
|
||||
|
||||
export const initMap = (containerId) => {
|
||||
// Pusat peta default (Universitas Tanjungpura, Pontianak)
|
||||
const map = L.map(containerId, {
|
||||
zoomControl: false
|
||||
}).setView([-0.0583, 109.3448], 15);
|
||||
|
||||
// Pindahkan zoom control ke kanan bawah
|
||||
L.control.zoom({
|
||||
position: 'bottomright'
|
||||
}).addTo(map);
|
||||
|
||||
// Tile Layer Premium (CartoDB Dark Matter untuk Glass UI)
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(map);
|
||||
|
||||
return map;
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
export const BASE_URL = '';
|
||||
|
||||
const createService = (endpoint) => ({
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
create: async (data) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
});
|
||||
|
||||
// P01
|
||||
export const spbuService = createService('01/backend/api/spbu.php');
|
||||
export const jalanService = createService('01/backend/api/jalan.php');
|
||||
export const kavlingService = createService('01/backend/api/kavling.php');
|
||||
|
||||
// P02
|
||||
export const rumahIbadahService = createService('02/backend/api/rumah_ibadah.php');
|
||||
export const wargaMiskinService = createService('02/backend/api/warga_miskin.php');
|
||||
export const haversineService = {
|
||||
getDalamRadius: async (id, radius) => {
|
||||
const res = await fetch(`${BASE_URL}/02/backend/api/haversine.php?rumah_ibadah_id=${id}&radius_km=${radius}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const rumahIbadahService = {
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php`);
|
||||
return await res.json();
|
||||
},
|
||||
save: async (data) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php`, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
});
|
||||
return await res.json();
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php?id=${id}`, { method: 'DELETE' });
|
||||
return await res.json();
|
||||
},
|
||||
getJangkauan: async (id, radius = 1) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php?action=jangkauan&id=${id}&radius=${radius}`);
|
||||
return await res.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const wargaMiskinService = {
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/warga_miskin.php`);
|
||||
return await res.json();
|
||||
},
|
||||
save: async (data) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/warga_miskin.php`, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
});
|
||||
return await res.json();
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/warga_miskin.php?id=${id}`, { method: 'DELETE' });
|
||||
return await res.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
export const showToast = (message, type = 'success') => {
|
||||
const container = document.getElementById('toast-container');
|
||||
if (!container) return;
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
toast.textContent = message;
|
||||
container.appendChild(toast);
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transform = 'translateY(20px)';
|
||||
toast.style.transition = 'all 0.3s ease';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
export const clearFormContainer = () => {
|
||||
const container = document.getElementById('form-container');
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
container.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
export const renderResultPanel = (wargaList, radiusKm) => {
|
||||
const panel = document.getElementById('result-panel');
|
||||
const list = document.getElementById('result-list');
|
||||
const title = document.getElementById('result-title');
|
||||
|
||||
panel.style.display = 'block';
|
||||
title.innerHTML = `Warga Miskin <br><span style="font-size:0.8rem;color:var(--text-muted);font-weight:normal;">dalam radius ${radiusKm} km</span>`;
|
||||
|
||||
if (wargaList.length === 0) {
|
||||
list.innerHTML = `<p style="font-size:0.85rem;color:var(--text-muted);">Tidak ada data dalam radius ini.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = wargaList.map(w => `
|
||||
<div class="warga-item">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:4px;">
|
||||
<strong>${w.nama_kk}</strong>
|
||||
<span class="badge-distance">${w.jarak_km} km</span>
|
||||
</div>
|
||||
<div style="color:var(--text-muted);">Rp ${w.penghasilan.toLocaleString('id-ID')} | ${w.jumlah_tanggungan} orang</div>
|
||||
</div>
|
||||
`).join('');
|
||||
};
|
||||
|
||||
export const hideResultPanel = () => {
|
||||
document.getElementById('result-panel').style.display = 'none';
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* jalan.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Jalan (LineString).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, jenis_jalan, created_at, ST_AsGeoJSON(geom) as geojson FROM jalan");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'jenis_jalan' => $row['jenis_jalan'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Jalan berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) {
|
||||
sendError('Nama dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO jalan (nama, jenis_jalan, geom) VALUES (:nama, :jenis_jalan, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':jenis_jalan' => $input['jenis_jalan'] ?? 'Lokal',
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Jalan berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Jalan wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM jalan WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Jalan berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* kavling.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Kavling (Polygon).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama_pemilik, luas, created_at, ST_AsGeoJSON(geom) as geojson FROM kavling");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_pemilik' => $row['nama_pemilik'],
|
||||
'luas' => $row['luas'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Kavling berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama_pemilik']) || !isset($input['geometry'])) {
|
||||
sendError('Nama pemilik dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO kavling (nama_pemilik, luas, geom) VALUES (:nama_pemilik, :luas, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama_pemilik' => $input['nama_pemilik'],
|
||||
':luas' => $input['luas'] ?? 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Kavling berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Kavling wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM kavling WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Kavling berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,89 @@
|
||||
<?php
|
||||
/**
|
||||
* rumah_ibadah.php
|
||||
* Tanggung Jawab: Operasi CRUD Rumah Ibadah + Endpoint analisis jangkauan Haversine.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
require_once '../utils/geo_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
if (isset($_GET['action']) && $_GET['action'] === 'jangkauan' && isset($_GET['id'])) {
|
||||
// Analisis Jangkauan Haversine
|
||||
$id = $_GET['id'];
|
||||
$radius = isset($_GET['radius']) ? (float) $_GET['radius'] : 1.0; // default 1 km
|
||||
|
||||
// Dapatkan koordinat rumah ibadah ini
|
||||
$stmt = $pdo->prepare("SELECT ST_AsGeoJSON(geom) as geojson FROM rumah_ibadah WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
$rumah_ibadah = $stmt->fetch();
|
||||
|
||||
if (!$rumah_ibadah) sendError('Rumah ibadah tidak ditemukan', 404);
|
||||
|
||||
$geom = json_decode($rumah_ibadah['geojson'], true);
|
||||
$pusatLon = $geom['coordinates'][0];
|
||||
$pusatLat = $geom['coordinates'][1];
|
||||
|
||||
// Panggil geo_helper untuk mendapatkan warga miskin
|
||||
$warga = GeoHelper::getWargaDalamRadius($pdo, $pusatLat, $pusatLon, $radius);
|
||||
sendSuccess($warga, 'Data jangkauan berhasil dihitung');
|
||||
|
||||
} else {
|
||||
// GET Semua Rumah Ibadah (GeoJSON)
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, agama, ST_AsGeoJSON(geom) as geojson FROM rumah_ibadah");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'agama' => $row['agama']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Rumah Ibadah');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO rumah_ibadah (nama, agama, geom) VALUES (:nama, :agama, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':agama' => $input['agama'] ?? 'Islam',
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM rumah_ibadah WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,59 @@
|
||||
<?php
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, deskripsi, buka_24_jam, created_at, ST_AsGeoJSON(geom) as geojson FROM spbu");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'deskripsi' => $row['deskripsi'],
|
||||
'buka_24_jam' => (bool)$row['buka_24_jam'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data SPBU berhasil diambil');
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO spbu (nama, deskripsi, buka_24_jam, geom) VALUES (:nama, :deskripsi, :buka_24_jam, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':deskripsi' => $input['deskripsi'] ?? '',
|
||||
':buka_24_jam' => isset($input['buka_24_jam']) && $input['buka_24_jam'] ? 1 : 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM spbu WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,71 @@
|
||||
<?php
|
||||
/**
|
||||
* statistik.php
|
||||
* Tanggung Jawab: Menyediakan data analisis spasial menggunakan Point in Polygon (ST_Contains).
|
||||
* Menghitung kepadatan warga miskin dalam setiap kavling.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
if ($method === 'GET') {
|
||||
try {
|
||||
// Query Spatial Point-in-Polygon
|
||||
// Mengambil Kavling dan menghitung jumlah warga miskin (Point) yang ada di dalamnya
|
||||
$sql = "
|
||||
SELECT
|
||||
k.id,
|
||||
k.nama_pemilik,
|
||||
k.luas,
|
||||
ST_AsGeoJSON(k.geom) as geojson,
|
||||
COUNT(w.id) as jumlah_warga,
|
||||
COALESCE(SUM(w.jumlah_tanggungan), 0) as total_tanggungan
|
||||
FROM kavling k
|
||||
LEFT JOIN warga_miskin w ON ST_Contains(k.geom, w.geom)
|
||||
GROUP BY k.id
|
||||
";
|
||||
|
||||
$stmt = $pdo->query($sql);
|
||||
|
||||
$features = [];
|
||||
$total_warga = 0;
|
||||
|
||||
while ($row = $stmt->fetch()) {
|
||||
$jumlah = (int) $row['jumlah_warga'];
|
||||
$total_warga += $jumlah;
|
||||
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_pemilik' => $row['nama_pemilik'],
|
||||
'luas' => $row['luas'],
|
||||
'jumlah_warga' => $jumlah,
|
||||
'total_tanggungan' => (int) $row['total_tanggungan']
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
$response = [
|
||||
'statistik' => [
|
||||
'total_kavling' => count($features),
|
||||
'total_warga_terpetakan' => $total_warga
|
||||
],
|
||||
'geojson' => [
|
||||
'type' => 'FeatureCollection',
|
||||
'features' => $features
|
||||
]
|
||||
];
|
||||
|
||||
sendSuccess($response, 'Data statistik spasial berhasil dihitung');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghitung statistik spasial: ' . $e->getMessage(), 500);
|
||||
}
|
||||
} else {
|
||||
sendError('Method not allowed', 405);
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
/**
|
||||
* warga_miskin.php
|
||||
* Tanggung Jawab: Operasi CRUD untuk Warga Miskin.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama_kk, penghasilan, jumlah_tanggungan, ST_AsGeoJSON(geom) as geojson FROM warga_miskin");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_kk' => $row['nama_kk'],
|
||||
'penghasilan' => $row['penghasilan'],
|
||||
'jumlah_tanggungan' => $row['jumlah_tanggungan']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Warga Miskin');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama_kk']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO warga_miskin (nama_kk, penghasilan, jumlah_tanggungan, geom) VALUES (:nama_kk, :penghasilan, :jumlah_tanggungan, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama_kk' => $input['nama_kk'],
|
||||
':penghasilan' => $input['penghasilan'] ?? 0,
|
||||
':jumlah_tanggungan' => $input['jumlah_tanggungan'] ?? 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM warga_miskin WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,57 @@
|
||||
<?php
|
||||
/**
|
||||
* Singleton PDO connection.
|
||||
*
|
||||
* Coolify: set DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD
|
||||
* from the database service credentials.
|
||||
*/
|
||||
class Database {
|
||||
private static $conn = null;
|
||||
|
||||
private static function env(string $key, string $default = ''): string {
|
||||
$value = getenv($key);
|
||||
return ($value === false || $value === '') ? $default : $value;
|
||||
}
|
||||
|
||||
public static function getConnection() {
|
||||
if (self::$conn === null) {
|
||||
$dbUrl = self::env('DATABASE_URL');
|
||||
if ($dbUrl) {
|
||||
$parsed = parse_url($dbUrl);
|
||||
$host = $parsed['host'] ?? '127.0.0.1';
|
||||
$port = $parsed['port'] ?? '3306';
|
||||
$username = $parsed['user'] ?? 'root';
|
||||
$password = $parsed['pass'] ?? '';
|
||||
$dbName = ltrim($parsed['path'], '/');
|
||||
} else {
|
||||
$host = self::env('DB_HOST', '127.0.0.1');
|
||||
$port = self::env('DB_PORT', '3306');
|
||||
$dbName = self::env('DB_DATABASE', 'webgis_db');
|
||||
$username = self::env('DB_USERNAME', 'root');
|
||||
$password = self::env('DB_PASSWORD', '');
|
||||
}
|
||||
|
||||
self::$conn = new PDO(
|
||||
"mysql:host={$host};port={$port};dbname={$dbName};charset=utf8mb4",
|
||||
$username,
|
||||
$password
|
||||
);
|
||||
self::$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
self::$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
|
||||
|
||||
// Disable strict mode for GROUP BY to prevent 1055 errors in Coolify's MariaDB
|
||||
self::$conn->exec("SET SESSION sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''))");
|
||||
|
||||
// Auto-initialize database if empty
|
||||
$stmt = self::$conn->query("SHOW TABLES LIKE 'users'");
|
||||
if ($stmt->rowCount() == 0) {
|
||||
$sqlFile = __DIR__ . '/../../../database/webgis_db.sql';
|
||||
if (file_exists($sqlFile)) {
|
||||
$sql = file_get_contents($sqlFile);
|
||||
self::$conn->exec($sql);
|
||||
}
|
||||
}
|
||||
}
|
||||
return self::$conn;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
/**
|
||||
* response_helper.php
|
||||
* Tanggung Jawab: Standarisasi format response JSON.
|
||||
*/
|
||||
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
$allowedOrigin = getenv('CORS_ALLOWED_ORIGIN');
|
||||
if ($allowedOrigin !== false && $allowedOrigin !== '') {
|
||||
header('Access-Control-Allow-Origin: ' . $allowedOrigin);
|
||||
header('Vary: Origin');
|
||||
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
|
||||
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
|
||||
}
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { exit(0); }
|
||||
|
||||
function sendSuccess($data = null, $message = 'Success', $statusCode = 200) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode(['status' => 'success', 'message' => $message, 'data' => $data]);
|
||||
exit();
|
||||
}
|
||||
|
||||
function sendError($message = 'Error', $statusCode = 400) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode(['status' => 'error', 'message' => $message]);
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,61 @@
|
||||
/* base.css
|
||||
* Tanggung Jawab: Reset CSS, definisi variabel warna premium, dan tipografi dasar.
|
||||
*/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* Color Palette - Minimalist & Elegant */
|
||||
--primary: #4F46E5;
|
||||
--primary-hover: #4338CA;
|
||||
--secondary: #10B981;
|
||||
--background: #F3F4F6;
|
||||
--surface: #FFFFFF;
|
||||
--surface-glass: rgba(255, 255, 255, 0.85);
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border: #E5E7EB;
|
||||
--danger: #EF4444;
|
||||
|
||||
/* Shadows & Effects */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Scrollbar minimalis */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #CBD5E1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94A3B8;
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
:root {
|
||||
--primary: #6366F1;
|
||||
--primary-hover: #4F46E5;
|
||||
--bg-dark: #0F172A;
|
||||
--bg-glass: rgba(15, 23, 42, 0.75);
|
||||
--border-glass: rgba(255, 255, 255, 0.1);
|
||||
--text-light: #F8FAFC;
|
||||
--text-muted: #94A3B8;
|
||||
--radius: 20px;
|
||||
--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
--font: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Floating Dock */
|
||||
.floating-dock {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
z-index: 1000;
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--border-glass);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
width: 340px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Dock */
|
||||
.floating-dock::-webkit-scrollbar { width: 6px; }
|
||||
.floating-dock::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
|
||||
.header h2 { margin: 0 0 8px 0; font-size: 1.4rem; font-weight: 700; background: linear-gradient(135deg, #818CF8, #C084FC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.header p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
|
||||
|
||||
/* Buttons */
|
||||
.menu-group { display: flex; flex-direction: column; gap: 10px; }
|
||||
.menu-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
|
||||
|
||||
.btn-action {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
color: var(--text-light);
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: var(--font);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn-action svg { width: 20px; height: 20px; flex-shrink: 0; }
|
||||
|
||||
.btn-action:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.btn-action.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
/* Button Variants */
|
||||
.btn-spbu svg { color: #10B981; }
|
||||
.btn-jalan svg { color: #F59E0B; }
|
||||
.btn-kavling svg { color: #3B82F6; }
|
||||
.btn-rumah svg { color: #8B5CF6; }
|
||||
.btn-warga svg { color: #EF4444; }
|
||||
|
||||
/* Form Panel */
|
||||
.form-panel {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-glass);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 0.8rem; color: var(--text-muted); }
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.form-control:focus { border-color: var(--primary); }
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
|
||||
.checkbox-group span { font-size: 0.85rem; color: var(--text-light); }
|
||||
|
||||
.btn-submit {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-submit:hover { background: var(--primary-hover); }
|
||||
|
||||
/* Leaflet Customizations */
|
||||
.leaflet-draw-toolbar { display: none !important; }
|
||||
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
|
||||
.leaflet-control-zoom a {
|
||||
background: var(--bg-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-color: var(--border-glass) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.leaflet-control-zoom a:hover { background: var(--primary) !important; }
|
||||
|
||||
/* Leaflet Popup Premium */
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: var(--bg-glass) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid var(--border-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
.leaflet-popup-tip { background: var(--bg-glass) !important; border: 1px solid var(--border-glass) !important; }
|
||||
.leaflet-popup-content { margin: 16px !important; font-family: var(--font); }
|
||||
.leaflet-popup-content h3 { margin: 0 0 8px 0; font-size: 1.1rem; border-bottom: 1px solid var(--border-glass); padding-bottom: 8px; }
|
||||
.leaflet-popup-content p { margin: 4px 0; font-size: 0.9rem; color: var(--text-muted); }
|
||||
.leaflet-popup-content .btn-delete {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #EF4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.leaflet-popup-content .btn-delete:hover { background: #EF4444; color: white; }
|
||||
|
||||
/* Custom Map Marker Icon Animation */
|
||||
.custom-icon div {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.custom-icon:hover div {
|
||||
transform: scale(1.1) translateY(-4px);
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.toast {
|
||||
background: var(--bg-glass); backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-glass); border-left: 4px solid var(--primary);
|
||||
padding: 16px 20px; border-radius: 12px; color: white; font-size: 0.9rem;
|
||||
box-shadow: var(--shadow); animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.toast.error { border-left-color: #EF4444; }
|
||||
.toast.success { border-left-color: #10B981; }
|
||||
|
||||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@@ -0,0 +1,92 @@
|
||||
/* form.css
|
||||
* Tanggung Jawab: Styling komponen form (input, button, select).
|
||||
*/
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
transition: var(--transition);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
width: auto;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #DC2626;
|
||||
}
|
||||
|
||||
/* Micro-animation for active state */
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Form Container Animation */
|
||||
#form-container {
|
||||
background: var(--surface);
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 20px;
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebGIS - Pertemuan 03</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<style>
|
||||
.result-item { background: rgba(255,255,255,0.05); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-glass); display: flex; justify-content: space-between; align-items: center; }
|
||||
.badge { background: var(--primary); padding: 2px 6px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div class="floating-dock">
|
||||
<div class="header">
|
||||
<h2>P03: Analisis Spasial</h2>
|
||||
<p>Kumulatif P01 & P02 + Choropleth Map (Point in Polygon).</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-group">
|
||||
<div class="menu-title">Draw Tools</div>
|
||||
<button id="btn-draw-spbu" class="btn-action btn-spbu"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> Tambah SPBU</button>
|
||||
<button id="btn-draw-jalan" class="btn-action btn-jalan"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg> Tambah Jalan</button>
|
||||
<button id="btn-draw-kavling" class="btn-action btn-kavling"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> Tambah Kavling</button>
|
||||
<button id="btn-draw-rumah" class="btn-action btn-rumah"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg> Tambah Rumah Ibadah</button>
|
||||
<button id="btn-draw-warga" class="btn-action btn-warga"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg> Tambah Warga Miskin</button>
|
||||
</div>
|
||||
|
||||
<div id="choropleth-panel" class="form-panel" style="margin-top: 5px; background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3);">
|
||||
<h3 style="margin:0 0 5px 0; font-size:0.9rem; color:#10B981;">Statistik Kavling (Choropleth)</h3>
|
||||
<p style="font-size:0.8rem; margin:0 0 10px 0; color:var(--text-muted);">Pewarnaan otomatis area kavling berdasarkan jumlah warga miskin yang bermukim di atasnya.</p>
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:8px;">
|
||||
<span style="font-size:0.8rem;">Total Penduduk Miskin:</span>
|
||||
<strong id="stat-total-warga" style="color:white;">0</strong>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<span style="font-size:0.8rem;">Kavling Padat (>2 warga):</span>
|
||||
<strong id="stat-kavling-merah" style="color:#EF4444;">0</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="form-container" style="display: none;"></div>
|
||||
</div>
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,110 @@
|
||||
import { initMap } from './modules/map.js';
|
||||
import { setupDrawControls } from './modules/draw.js';
|
||||
import { renderForm } from './modules/form.js';
|
||||
import { spbuService, jalanService, kavlingService, rumahIbadahService, wargaMiskinService, BASE_URL } from './services/api.service.js';
|
||||
|
||||
let appMap;
|
||||
let drawControl;
|
||||
|
||||
const statistikService = {
|
||||
getChoropleth: async () => {
|
||||
const res = await fetch(`${BASE_URL}/03/backend/api/statistik.php`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
};
|
||||
|
||||
export const createIcon = (svgPath, color) => L.divIcon({
|
||||
className: 'custom-icon',
|
||||
html: `<div style="background-color: ${color}; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.8); color: white;"><svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">${svgPath}</svg></div>`,
|
||||
iconSize: [34, 34], iconAnchor: [17, 34], popupAnchor: [0, -34]
|
||||
});
|
||||
|
||||
const iconSPBU = (is24h) => createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>', is24h ? '#10B981' : '#EF4444');
|
||||
const iconRumah = createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>', '#8B5CF6');
|
||||
const iconWarga = createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>', '#EF4444');
|
||||
|
||||
window.showToast = (msg, type='success') => {
|
||||
const t = document.createElement('div'); t.className = `toast ${type}`; t.innerHTML = msg;
|
||||
document.getElementById('toast-container').appendChild(t);
|
||||
setTimeout(() => { t.style.opacity=0; setTimeout(()=>t.remove(),300); }, 3000);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
appMap = initMap('map');
|
||||
document.getElementById('btn-draw-rumah')?.addEventListener('click', () => { window.currentDrawType='rumah_ibadah'; new L.Draw.Marker(appMap).enable(); });
|
||||
document.getElementById('btn-draw-warga')?.addEventListener('click', () => { window.currentDrawType='warga_miskin'; new L.Draw.Marker(appMap).enable(); });
|
||||
drawControl = setupDrawControls(appMap, handleGeometryCreated);
|
||||
await loadAllData();
|
||||
});
|
||||
|
||||
const loadAllData = async () => {
|
||||
try {
|
||||
const [spbu, jalan, choro, rumah, warga] = await Promise.all([
|
||||
spbuService.getAll(), jalanService.getAll(), statistikService.getChoropleth(),
|
||||
rumahIbadahService.getAll(), wargaMiskinService.getAll()
|
||||
]);
|
||||
|
||||
L.geoJSON(spbu, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconSPBU(f.properties.buka_24_jam) }), onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(jalan, { style: { color: '#F59E0B', weight: 4 }, onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(rumah, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconRumah }), onEachFeature: (f, l) => bindPopup(l, 'rumah_ibadah', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(warga, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconWarga }), onEachFeature: (f, l) => bindPopup(l, 'warga_miskin', f.properties) }).addTo(appMap);
|
||||
|
||||
let merahCount = 0;
|
||||
L.geoJSON(choro, {
|
||||
style: (f) => {
|
||||
const count = f.properties.jumlah_warga_miskin;
|
||||
let c = '#10B981'; // Hijau (0)
|
||||
if(count > 0) c = '#F59E0B'; // Kuning (1-2)
|
||||
if(count > 2) { c = '#EF4444'; merahCount++; } // Merah (>2)
|
||||
return { color: c, fillColor: c, fillOpacity: 0.4, weight: 2 };
|
||||
},
|
||||
onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties)
|
||||
}).addTo(appMap);
|
||||
|
||||
document.getElementById('stat-total-warga').innerText = warga.features.length;
|
||||
document.getElementById('stat-kavling-merah').innerText = merahCount;
|
||||
|
||||
} catch (e) { window.showToast("Gagal meload data: "+e.message, 'error'); }
|
||||
};
|
||||
|
||||
const bindPopup = (layer, type, props) => {
|
||||
let ext = '';
|
||||
if(type==='spbu') ext = `<p>24 Jam: <strong style="color:${props.buka_24_jam?'#10B981':'#EF4444'}">${props.buka_24_jam?'Ya':'Tidak'}</strong></p>`;
|
||||
if(type==='kavling') ext = `<p>Jml Warga Miskin: <strong>${props.jumlah_warga_miskin||0} Jiwa</strong></p>`;
|
||||
|
||||
layer.bindPopup(`
|
||||
<div class="popup-custom">
|
||||
<h3>${props.nama}</h3>
|
||||
<p>${props.deskripsi || ''}</p>
|
||||
${ext}
|
||||
<button class="btn-delete" onclick="window.deleteData('${type}', ${props.id})">Hapus</button>
|
||||
</div>
|
||||
`);
|
||||
};
|
||||
|
||||
window.deleteData = async (type, id) => {
|
||||
if(!confirm('Yakin menghapus?')) return;
|
||||
try {
|
||||
if(type==='spbu') await spbuService.delete(id);
|
||||
if(type==='jalan') await jalanService.delete(id);
|
||||
if(type==='kavling') await kavlingService.delete(id);
|
||||
if(type==='rumah_ibadah') await rumahIbadahService.delete(id);
|
||||
if(type==='warga_miskin') await wargaMiskinService.delete(id);
|
||||
window.showToast('Data dihapus'); setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal hapus', 'error'); }
|
||||
};
|
||||
|
||||
const handleGeometryCreated = (type, geometry, layer) => {
|
||||
const tempLayer = L.geoJSON(geometry).addTo(appMap);
|
||||
renderForm(type, geometry, async (payload) => {
|
||||
try {
|
||||
if(type==='spbu') await spbuService.create(payload);
|
||||
if(type==='jalan') await jalanService.create(payload);
|
||||
if(type==='kavling') await kavlingService.create(payload);
|
||||
if(type==='rumah_ibadah') await rumahIbadahService.create(payload);
|
||||
if(type==='warga_miskin') await wargaMiskinService.create(payload);
|
||||
window.showToast('Tersimpan'); setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal simpan', 'error'); }
|
||||
}, () => appMap.removeLayer(tempLayer));
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
export const setupDrawControls = (map, onGeometryCreated) => {
|
||||
const drawControl = new L.Control.Draw({
|
||||
draw: { marker: true, polyline: true, polygon: true, circle: false, circlemarker: false, rectangle: false }
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
|
||||
map.on(L.Draw.Event.CREATED, function (event) {
|
||||
const layer = event.layer;
|
||||
const type = event.layerType;
|
||||
|
||||
// Peta draw default tipe: marker -> spbu, polyline -> jalan, polygon -> kavling
|
||||
let customType = type;
|
||||
if(type === 'marker') customType = 'spbu';
|
||||
if(type === 'polyline') customType = 'jalan';
|
||||
if(type === 'polygon') customType = 'kavling';
|
||||
if(window.currentDrawType) customType = window.currentDrawType; // Untuk P2/P3
|
||||
|
||||
onGeometryCreated(customType, layer.toGeoJSON().geometry, layer);
|
||||
});
|
||||
|
||||
// Custom Menu Handlers
|
||||
const markerDrawer = new L.Draw.Marker(map, drawControl.options.draw.marker);
|
||||
const polylineDrawer = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
|
||||
const polygonDrawer = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
|
||||
|
||||
document.getElementById('btn-draw-spbu')?.addEventListener('click', () => { window.currentDrawType='spbu'; markerDrawer.enable(); });
|
||||
document.getElementById('btn-draw-jalan')?.addEventListener('click', () => { window.currentDrawType='jalan'; polylineDrawer.enable(); });
|
||||
document.getElementById('btn-draw-kavling')?.addEventListener('click', () => { window.currentDrawType='kavling'; polygonDrawer.enable(); });
|
||||
|
||||
return drawControl;
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
export const renderForm = (type, geometry, onSubmit, onCancel) => {
|
||||
const container = document.getElementById('form-container');
|
||||
container.style.display = 'flex';
|
||||
|
||||
const extraFields = type === 'spbu' ? `
|
||||
<div class="form-group">
|
||||
<label class="checkbox-group">
|
||||
<input type="checkbox" id="input-24jam">
|
||||
<span>Buka 24 Jam</span>
|
||||
</label>
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="form-panel">
|
||||
<h3 style="margin:0 0 10px 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:8px;">Simpan Data (${type.toUpperCase()})</h3>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-nama" class="form-control" placeholder="Nama / Label" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-deskripsi" class="form-control" placeholder="Deskripsi Singkat">
|
||||
</div>
|
||||
${extraFields}
|
||||
<div style="display:flex; gap:10px; margin-top:8px;">
|
||||
<button id="btn-save" class="btn-submit" style="flex:1;">Simpan</button>
|
||||
<button id="btn-cancel" class="btn-submit" style="background:rgba(255,255,255,0.1); color:var(--text-light); flex:1;">Batal</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('btn-save').addEventListener('click', () => {
|
||||
const payload = {
|
||||
type,
|
||||
geometry,
|
||||
nama: document.getElementById('input-nama').value,
|
||||
deskripsi: document.getElementById('input-deskripsi').value,
|
||||
};
|
||||
if (type === 'spbu') payload.buka_24_jam = document.getElementById('input-24jam').checked;
|
||||
|
||||
onSubmit(payload);
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
|
||||
document.getElementById('btn-cancel').addEventListener('click', () => {
|
||||
if(onCancel) onCancel();
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* map.js
|
||||
* Tanggung Jawab: Inisialisasi peta Leaflet dasar dan base layer.
|
||||
*/
|
||||
|
||||
export const initMap = (containerId) => {
|
||||
// Pusat peta default (Universitas Tanjungpura, Pontianak)
|
||||
const map = L.map(containerId, {
|
||||
zoomControl: false
|
||||
}).setView([-0.0583, 109.3448], 15);
|
||||
|
||||
// Pindahkan zoom control ke kanan bawah
|
||||
L.control.zoom({
|
||||
position: 'bottomright'
|
||||
}).addTo(map);
|
||||
|
||||
// Tile Layer Premium (CartoDB Dark Matter untuk Glass UI)
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(map);
|
||||
|
||||
return map;
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
export const BASE_URL = '';
|
||||
|
||||
const createService = (endpoint) => ({
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
create: async (data) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
});
|
||||
|
||||
// P01
|
||||
export const spbuService = createService('01/backend/api/spbu.php');
|
||||
export const jalanService = createService('01/backend/api/jalan.php');
|
||||
export const kavlingService = createService('01/backend/api/kavling.php');
|
||||
|
||||
// P02
|
||||
export const rumahIbadahService = createService('02/backend/api/rumah_ibadah.php');
|
||||
export const wargaMiskinService = createService('02/backend/api/warga_miskin.php');
|
||||
export const haversineService = {
|
||||
getDalamRadius: async (id, radius) => {
|
||||
const res = await fetch(`${BASE_URL}/02/backend/api/haversine.php?rumah_ibadah_id=${id}&radius_km=${radius}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const rumahIbadahService = {
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php`);
|
||||
return await res.json();
|
||||
},
|
||||
save: async (data) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php`, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
});
|
||||
return await res.json();
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php?id=${id}`, { method: 'DELETE' });
|
||||
return await res.json();
|
||||
},
|
||||
getJangkauan: async (id, radius = 1) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php?action=jangkauan&id=${id}&radius=${radius}`);
|
||||
return await res.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
export const CONFIG = {
|
||||
BASE_URL: '/03/backend/api'
|
||||
};
|
||||
|
||||
export const statistikService = {
|
||||
getKepadatan: async () => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/statistik.php`);
|
||||
return await res.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const wargaMiskinService = {
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/warga_miskin.php`);
|
||||
return await res.json();
|
||||
},
|
||||
save: async (data) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/warga_miskin.php`, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
});
|
||||
return await res.json();
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/warga_miskin.php?id=${id}`, { method: 'DELETE' });
|
||||
return await res.json();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
/* map.css
|
||||
* Tanggung Jawab: Styling container peta, kontrol Leaflet, dan pop-up modern.
|
||||
*/
|
||||
|
||||
.map-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #E2E8F0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Customizing Leaflet Controls */
|
||||
.leaflet-control-zoom {
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a {
|
||||
color: var(--text-main) !important;
|
||||
background: var(--surface-glass) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a:hover {
|
||||
background: var(--surface) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Custom Popup Modern */
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 14px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
padding-bottom: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.popup-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.popup-action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/* sidebar.css
|
||||
* Tanggung Jawab: Styling layout sidebar, navigasi, dan list item.
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
width: 350px;
|
||||
background: var(--surface-glass);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.sidebar-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--surface);
|
||||
color: var(--text-main);
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
animation: slideIn 0.3s forwards ease-out;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-left-color: var(--danger);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
# Changelog — Transformasi WebGIS sesuai SKPL
|
||||
|
||||
Dokumen ini merangkum perubahan aplikasi dari **"WebGIS Smart City Pontianak"** menjadi **"WebGIS Pemetaan Kemiskinan Terpadu"** sesuai dokumen SKPL.
|
||||
|
||||
Status saat ini: **Fase A (Fondasi)** dan **Fase B (Visualisasi Peta)** selesai & teruji.
|
||||
|
||||
---
|
||||
|
||||
## 1. Sistem Role & Autentikasi
|
||||
|
||||
| Sebelum | Sesudah |
|
||||
|---|---|
|
||||
| 2 role: `admin`, `user` | 4 role SKPL: `publik`, `enumerator`, `operator`, `pimpinan` |
|
||||
| Login dasar | + Lockout 5× percobaan gagal (KF-01) |
|
||||
| — | Cek akun nonaktif (`is_active`) saat login |
|
||||
| — | Catat `last_login` |
|
||||
| Routing role hardcode | Routing dinamis per role via `roleHome()` |
|
||||
| `requireRole('admin')` (exact) | RBAC fleksibel `requireAnyRole([...])` |
|
||||
|
||||
File: `config/auth_check.php`, `login.php`, `logout.php`, `index.php`
|
||||
|
||||
## 2. Struktur Folder & Halaman
|
||||
|
||||
- `user/` → di-rename menjadi `pimpinan/` (dashboard, peta, laporan)
|
||||
- **Baru:** `enumerator/` — area petugas lapangan (mobile-friendly)
|
||||
- **Baru:** `peta_publik.php` — peta tanpa login untuk masyarakat
|
||||
- **Baru:** `admin/log.php` — halaman log aktivitas
|
||||
|
||||
## 3. Database
|
||||
|
||||
| Perubahan | Detail |
|
||||
|---|---|
|
||||
| `users` diperluas | + `email`, `is_active`, `wilayah_tugas`, `last_login`; ENUM role jadi 4 |
|
||||
| Tabel baru `activity_log` | Audit trail aktivitas pengguna (KF-04) |
|
||||
| Tabel baru `wilayah` | Polygon kelurahan + `jumlah_penduduk` untuk choropleth (KF-06) |
|
||||
|
||||
File migrasi:
|
||||
- `database/migrations/001_fase_a_roles.sql`
|
||||
- `database/migrations/002_wilayah.sql`
|
||||
- `database/webgis_db.sql` (diperbarui untuk install baru)
|
||||
|
||||
## 4. Manajemen User (KF-02 / KF-03)
|
||||
|
||||
`admin/users.php` + `api/users.php` dirombak:
|
||||
- Kelola 4 role
|
||||
- Status aktif/nonaktif
|
||||
- Email & wilayah tugas (enumerator)
|
||||
- Proteksi akun utama (ID 1) & akun sendiri dari penghapusan
|
||||
|
||||
## 5. Log Aktivitas (KF-04)
|
||||
|
||||
- Helper `logActivity()` di `config/activity.php`
|
||||
- Dicatat saat: login, logout, dan CRUD data (warga, user)
|
||||
- Ditampilkan di `admin/log.php` (300 entri terbaru)
|
||||
|
||||
## 6. Visualisasi Peta (Fase B)
|
||||
|
||||
| Fitur SKPL | Implementasi |
|
||||
|---|---|
|
||||
| Choropleth (KF-06) | `api/wilayah.php` — gradasi warna % kemiskinan + legenda |
|
||||
| Heatmap (KF-08) | `api/heatmap.php` — data agregat tanpa info pribadi |
|
||||
| Layer switcher (KF-09) | Toggle choropleth & heatmap |
|
||||
| Pencarian lokasi (KF-11) | Cari kelurahan, peta auto-`flyTo` |
|
||||
|
||||
Dipasang di: peta publik, peta operator, peta pimpinan.
|
||||
File: `assets/js/public-map.js`, `assets/js/skpl-layers.js`
|
||||
|
||||
## 7. Branding & Keamanan API
|
||||
|
||||
- Branding "Smart City" → "WebGIS Kemiskinan / Pemetaan Kemiskinan"
|
||||
- Guard mutasi API: role `admin` → `operator` (`requireOperatorForMutation` di `api/helpers.php`)
|
||||
|
||||
## 8. Perbaikan Bug
|
||||
|
||||
- Fungsi MySQL `ST_SRID()` (sintaks PostGIS) yang menyebabkan error diperbaiki di 5 file
|
||||
- Pemuatan `.env` otomatis + perbaikan path cookie sesi
|
||||
- Bug `window.APP_BASE` (binding `const` bukan properti window) di `skpl-layers.js` — diperbaiki
|
||||
|
||||
---
|
||||
|
||||
## Akun Testing (DB hasil migrasi)
|
||||
|
||||
| Role | Username | Password |
|
||||
|---|---|---|
|
||||
| Operator | `admin` | `admin123` |
|
||||
| Pimpinan | `pengguna` | `user123` |
|
||||
| Enumerator | `enumerator` | `user123` |
|
||||
| Publik | (tanpa login) | — |
|
||||
|
||||
---
|
||||
|
||||
## Belum Dikerjakan (warisan lama / fase berikutnya)
|
||||
|
||||
- Data spasial smart-city (SPBU, jalan, kavling, rumah ibadah, kawasan kumuh) **masih ada** — rencana di-repurpose/dibuang pada modul Manajemen Data.
|
||||
- Form input enumerator (`enumerator/input.php`) masih placeholder "Segera".
|
||||
- Modul Manajemen Data, Analisis Spasial, Geotagging, dan Pelaporan PDF belum dibuat (lihat rencana di bawah / dokumen perencanaan).
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
FROM php:8.2-apache
|
||||
|
||||
RUN docker-php-ext-install pdo_mysql mysqli \
|
||||
&& a2enmod rewrite headers
|
||||
|
||||
COPY index.html /var/www/html/index.html
|
||||
COPY 01/ /var/www/html/01/
|
||||
COPY 02/ /var/www/html/02/
|
||||
COPY 03/ /var/www/html/03/
|
||||
COPY final/ /var/www/html/final/
|
||||
COPY project_final/ /var/www/html/project_final/
|
||||
COPY database/ /var/www/html/database/
|
||||
|
||||
RUN chown -R www-data:www-data /var/www/html
|
||||
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,88 @@
|
||||
# WebGIS Poverty Map
|
||||
|
||||
Aplikasi WebGIS PHP + MySQL untuk pemetaan data kemiskinan, fasilitas, laporan warga, dan analisis blank spot bantuan.
|
||||
|
||||
## Stack
|
||||
|
||||
- PHP 8.2 Apache
|
||||
- MySQL/MariaDB
|
||||
- Leaflet
|
||||
- PDO MySQL
|
||||
|
||||
## Deploy Coolify
|
||||
|
||||
1. Buat database MySQL/MariaDB di Coolify.
|
||||
2. Import `database/webgis_db.sql` ke database tersebut.
|
||||
3. Buat aplikasi baru dari repo ini.
|
||||
4. Pilih build menggunakan `Dockerfile` di root repository.
|
||||
5. Set environment variable:
|
||||
|
||||
```env
|
||||
APP_BASE_PATH=
|
||||
SESSION_SECURE=true
|
||||
CORS_ALLOWED_ORIGIN=
|
||||
DB_HOST=nama-service-database
|
||||
DB_PORT=3306
|
||||
DB_DATABASE=webgis_db
|
||||
DB_USERNAME=user_database
|
||||
DB_PASSWORD=password_database
|
||||
```
|
||||
|
||||
Root aplikasi menampilkan halaman pemilih progres dari `index.html`. Versi final berjalan di `/project_final`, jadi gunakan `APP_BASE_PATH=/project_final` untuk deploy Coolify ini.
|
||||
|
||||
`CORS_ALLOWED_ORIGIN` boleh dikosongkan untuk same-origin deployment. Isi dengan domain aplikasi jika API memang perlu diakses dari origin lain.
|
||||
|
||||
## Akun Awal (4 Role SKPL)
|
||||
|
||||
Sistem memakai 4 peran sesuai SKPL: **Publik, Enumerator, Operator, Pimpinan**.
|
||||
|
||||
Database lama yang sudah dimigrasi (`database/migrations/001_fase_a_roles.sql`):
|
||||
|
||||
- Operator: `admin / admin123` (akun lama `admin`, kini role operator)
|
||||
- Pimpinan: `pengguna / user123` (akun lama `user`, kini role pimpinan)
|
||||
- Enumerator: `enumerator / user123`
|
||||
|
||||
Install baru (`database/webgis_db.sql`) memakai username yang lebih jelas:
|
||||
|
||||
- Operator: `operator / admin123`
|
||||
- Pimpinan: `pimpinan / user123`
|
||||
- Enumerator: `enumerator / user123`
|
||||
|
||||
Publik tidak perlu login — akses langsung `peta_publik.php`.
|
||||
|
||||
Ganti password akun demo setelah deploy jika aplikasi dibuka publik.
|
||||
|
||||
## Migrasi Database
|
||||
|
||||
Untuk DB existing, jalankan berurutan:
|
||||
|
||||
```
|
||||
mysql -u root webgis_db < database/migrations/001_fase_a_roles.sql
|
||||
mysql -u root webgis_db < database/migrations/002_wilayah.sql
|
||||
```
|
||||
|
||||
Install baru cukup import `database/webgis_db.sql` (sudah mencakup semuanya).
|
||||
|
||||
## Struktur Penting
|
||||
|
||||
- `index.html` - halaman awal untuk memilih progres.
|
||||
- `01/`, `02/`, `03/`, `final/` - progres pertemuan.
|
||||
- `project_final/` - aplikasi final yang berjalan di `/project_final`.
|
||||
- `database/webgis_db.sql` - struktur dan seed database lengkap.
|
||||
- `Dockerfile` - image PHP Apache untuk Coolify.
|
||||
- `.env.example` - contoh environment variable deploy.
|
||||
|
||||
## Local XAMPP
|
||||
|
||||
Untuk menjalankan dari XAMPP seperti struktur lama, set base path:
|
||||
|
||||
```env
|
||||
APP_BASE_PATH=/project/project_final
|
||||
DB_HOST=127.0.0.1
|
||||
DB_PORT=3306
|
||||
DB_DATABASE=webgis_db
|
||||
DB_USERNAME=root
|
||||
DB_PASSWORD=
|
||||
```
|
||||
|
||||
Import `database/webgis_db.sql`, lalu buka `/project/project_final/login.php`.
|
||||
@@ -0,0 +1,93 @@
|
||||
# Rencana Tahap Lanjutan — WebGIS Pemetaan Kemiskinan SKPL
|
||||
|
||||
Lanjutan setelah Fase A (Fondasi) & Fase B (Visualisasi Peta) selesai.
|
||||
Prinsip tetap: **fokus penuh ke SKPL** + **perluas bertahap**.
|
||||
|
||||
Modul SKPL yang tersisa: 3.3 Manajemen Data, 3.4 Analisis Spasial,
|
||||
3.5 Geotagging & Survei, 3.6 Dashboard & Pelaporan.
|
||||
|
||||
Urutan disusun berdasarkan ketergantungan: **C → D → E → F**
|
||||
(data kaya dulu, baru analisis & laporan).
|
||||
|
||||
---
|
||||
|
||||
## FASE C — Manajemen Data Kemiskinan (KF-12 s/d 18)
|
||||
|
||||
Fondasi data untuk semua modul berikutnya. Memperkaya `warga_miskin`.
|
||||
|
||||
| ID | Pekerjaan | KF |
|
||||
|---|---|---|
|
||||
| C1 | Perluas kolom `warga_miskin`: `nik_kk`, `alamat`, `wilayah_id`, `rt`, `rw`, `jumlah_jiwa`, `pekerjaan_kk`, `sumber_air`, `status_listrik`, `material_dinding`, `status_kepemilikan`, `status_verifikasi` | KF-12 |
|
||||
| C2 | Tabel `jenis_bantuan` (PKH, BPNT, PBI-JK, BLT) + `bantuan_sosial` (status per RT, tgl mulai/berakhir) | KF-17 |
|
||||
| C3 | Upload foto kondisi rumah (folder `uploads/`, kompres GD, 1–5 foto) | KF-13 |
|
||||
| C4 | Form input/edit lengkap di operator + popup detail kaya di peta | KF-12/14 |
|
||||
| C5 | Import CSV/Excel sesuai template Lampiran A + validasi & laporan error | KF-15 |
|
||||
| C6 | Export CSV / Excel / PDF (data penuh & hasil filter) | KF-16 |
|
||||
| C7 | Manajemen status bantuan per rumah tangga | KF-17 |
|
||||
| C8 | Verifikasi data (status + bulk verification + penanda di peta) | KF-18 |
|
||||
|
||||
**Catatan:** sekaligus repurpose `rumah_ibadah`/`spbu` → tabel `fasilitas_publik`
|
||||
(sekolah/puskesmas/pasar) untuk proximity, dan pensiunkan layer smart-city lama.
|
||||
|
||||
---
|
||||
|
||||
## FASE D — Geotagging & Form Enumerator (KF-24, 25, 26)
|
||||
|
||||
Membuat role Enumerator benar-benar fungsional.
|
||||
|
||||
| ID | Pekerjaan | KF |
|
||||
|---|---|---|
|
||||
| D1 | `enumerator/input.php` — form multi-langkah mobile + auto-GPS (`navigator.geolocation`) + koreksi manual di peta mini | KF-24/25 |
|
||||
| D2 | Upload foto langsung dari kamera HP | KF-13 |
|
||||
| D3 | Penugasan wilayah: enumerator hanya akses/input data di wilayah tugasnya | KF-26 |
|
||||
| D4 | (Opsional, prioritas rendah) Notifikasi in-app tugas baru | KF-27 |
|
||||
|
||||
---
|
||||
|
||||
## FASE E — Analisis Spasial (KF-19 s/d 23)
|
||||
|
||||
Butuh data kaya dari Fase C + `fasilitas_publik`.
|
||||
|
||||
| ID | Pekerjaan | KF |
|
||||
|---|---|---|
|
||||
| E1 | Filter multi-kriteria (kecamatan, pendidikan, pekerjaan, status bantuan, sumber air, material, kepemilikan) — hasil langsung di peta + jumlah | KF-19 |
|
||||
| E2 | Identifikasi zona prioritas (skor per kelurahan: % miskin + kepadatan + cakupan bantuan rendah) | KF-20 |
|
||||
| E3 | Proximity analysis ke fasilitas publik + identifikasi warga "terisolasi" (radius dapat diatur) | KF-21 |
|
||||
| E4 | Analisis cakupan bantuan (pie chart + choropleth per jenis bantuan) | KF-22 |
|
||||
| E5 | Analisis tren waktu (line chart jumlah warga & cakupan) | KF-23 |
|
||||
|
||||
---
|
||||
|
||||
## FASE F — Dashboard & Pelaporan (KF-28 s/d 31)
|
||||
|
||||
| ID | Pekerjaan | KF |
|
||||
|---|---|---|
|
||||
| F1 | Dashboard eksekutif: kartu KPI + grafik (Chart.js) + peta ringkasan zona prioritas | KF-28 |
|
||||
| F2 | Laporan per wilayah (tabel + grafik + peta) — cetak/unduh PDF | KF-29 |
|
||||
| F3 | Laporan rekapitulasi penerima bantuan per jenis (PDF) | KF-30 |
|
||||
| F4 | Grafik komparatif antar kecamatan (bar + radar) | KF-31 |
|
||||
|
||||
---
|
||||
|
||||
## Kebutuhan Non-Fungsional (NFR)
|
||||
|
||||
Sebagian implementasi, sebagian cukup didokumentasikan untuk final project:
|
||||
|
||||
- **Implementasi:** RBAC server-side (sudah), proteksi SQL Injection (PDO prepared — sudah), bcrypt cost 12 (sudah), validasi input, pesan error informatif, responsif mobile.
|
||||
- **Dokumentasi saja (di luar lingkup realistis final project):** JWT HS256, 100 user konkuren, enkripsi NIK, backup harian otomatis, uptime 99%, integrasi DTKS.
|
||||
|
||||
---
|
||||
|
||||
## Library Tambahan yang Diperlukan
|
||||
|
||||
- **Chart.js 4.x** — grafik dashboard & laporan (Fase E/F)
|
||||
- **PhpSpreadsheet** atau parser CSV manual — import/export Excel (Fase C)
|
||||
- **Dompdf** atau **mPDF** — generate PDF laporan (Fase F)
|
||||
- (Leaflet & leaflet.heat sudah dipakai)
|
||||
|
||||
---
|
||||
|
||||
## Rekomendasi Mulai
|
||||
|
||||
**Mulai dari Fase C (Manajemen Data)** karena membuka jalan untuk D, E, dan F
|
||||
sekaligus memperkaya popup detail peta (KF-10) yang sekarang masih minim.
|
||||
@@ -0,0 +1,116 @@
|
||||
-- ============================================================
|
||||
-- WebGIS Pontianak - Struktur Database
|
||||
-- ============================================================
|
||||
-- Jalankan file ini terlebih dahulu sebelum menjalankan seed data.
|
||||
|
||||
CREATE DATABASE IF NOT EXISTS webgis_db
|
||||
CHARACTER SET utf8mb4
|
||||
COLLATE utf8mb4_unicode_ci;
|
||||
|
||||
USE webgis_db;
|
||||
|
||||
-- ============================================================
|
||||
-- 1. Users
|
||||
-- ============================================================
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
username VARCHAR(50) NOT NULL UNIQUE,
|
||||
password VARCHAR(255) NOT NULL,
|
||||
role ENUM('admin', 'user') NOT NULL DEFAULT 'user',
|
||||
nama_lengkap VARCHAR(100) DEFAULT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- ============================================================
|
||||
-- 2. Data Spasial
|
||||
-- ============================================================
|
||||
CREATE TABLE IF NOT EXISTS spbu (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama VARCHAR(100) NOT NULL,
|
||||
deskripsi TEXT,
|
||||
buka_24_jam TINYINT(1) NOT NULL DEFAULT 0,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_spbu_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rumah_ibadah (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama VARCHAR(100) NOT NULL,
|
||||
agama VARCHAR(50) NOT NULL,
|
||||
radius_bantuan_meter INT NOT NULL DEFAULT 1000,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_rumah_ibadah_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS jalan (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama VARCHAR(100) NOT NULL,
|
||||
jenis_jalan VARCHAR(50) DEFAULT NULL,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_jalan_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS kavling (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama_pemilik VARCHAR(100) NOT NULL,
|
||||
status_kepemilikan VARCHAR(50) NOT NULL,
|
||||
luas DECIMAL(10,2) DEFAULT NULL,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_kavling_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS kawasan_kumuh (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama_kawasan VARCHAR(100) NOT NULL,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_kawasan_kumuh_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS warga_miskin (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama_kk VARCHAR(100) NOT NULL,
|
||||
penghasilan DECIMAL(15,2) NOT NULL,
|
||||
jumlah_tanggungan INT NOT NULL,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_warga_miskin_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- ============================================================
|
||||
-- 3. Data Interaksi Pengguna
|
||||
-- ============================================================
|
||||
CREATE TABLE IF NOT EXISTS laporan_warga (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NOT NULL,
|
||||
kategori VARCHAR(50) NOT NULL,
|
||||
deskripsi TEXT NOT NULL,
|
||||
geometry POINT NOT NULL,
|
||||
status ENUM('menunggu', 'diproses', 'selesai', 'ditolak') NOT NULL DEFAULT 'menunggu',
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_laporan_user_id (user_id),
|
||||
SPATIAL INDEX idx_laporan_geometry (geometry),
|
||||
CONSTRAINT fk_laporan_user
|
||||
FOREIGN KEY (user_id) REFERENCES users(id)
|
||||
ON DELETE CASCADE
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS ulasan_fasilitas (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NOT NULL,
|
||||
fasilitas_tipe ENUM('spbu', 'rumah_ibadah') NOT NULL,
|
||||
fasilitas_id INT NOT NULL,
|
||||
rating TINYINT NOT NULL,
|
||||
komentar TEXT,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_ulasan_user_id (user_id),
|
||||
INDEX idx_ulasan_fasilitas (fasilitas_tipe, fasilitas_id),
|
||||
CONSTRAINT fk_ulasan_user
|
||||
FOREIGN KEY (user_id) REFERENCES users(id)
|
||||
ON DELETE CASCADE,
|
||||
CONSTRAINT chk_ulasan_rating CHECK (rating BETWEEN 1 AND 5)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
@@ -0,0 +1,51 @@
|
||||
-- ============================================================
|
||||
-- Migrasi Fase A — Sistem 4 Role SKPL + Log Aktivitas
|
||||
-- ============================================================
|
||||
-- Jalankan SEKALI pada database existing (webgis_db).
|
||||
-- Aman untuk data yang sudah ada: role lama dipetakan, bukan dihapus.
|
||||
-- admin -> operator
|
||||
-- user -> pimpinan
|
||||
-- ============================================================
|
||||
|
||||
-- 1. Migrasi nilai role lama -> SKPL (widen -> update -> narrow)
|
||||
ALTER TABLE users MODIFY COLUMN role VARCHAR(20) NOT NULL DEFAULT 'enumerator';
|
||||
|
||||
UPDATE users SET role = 'operator' WHERE role = 'admin';
|
||||
UPDATE users SET role = 'pimpinan' WHERE role = 'user';
|
||||
|
||||
ALTER TABLE users
|
||||
MODIFY COLUMN role ENUM('publik','enumerator','operator','pimpinan')
|
||||
NOT NULL DEFAULT 'enumerator';
|
||||
|
||||
-- 2. Kolom tambahan users (KF-02 / KF-03 / KF-26)
|
||||
ALTER TABLE users
|
||||
ADD COLUMN email VARCHAR(120) DEFAULT NULL AFTER username,
|
||||
ADD COLUMN is_active TINYINT(1) NOT NULL DEFAULT 1 AFTER role,
|
||||
ADD COLUMN wilayah_tugas VARCHAR(100) DEFAULT NULL AFTER is_active,
|
||||
ADD COLUMN last_login TIMESTAMP NULL DEFAULT NULL AFTER wilayah_tugas;
|
||||
|
||||
-- 3. Akun demo Enumerator (password: user123)
|
||||
-- operator & pimpinan berasal dari migrasi akun lama (admin / pengguna)
|
||||
INSERT IGNORE INTO users (username, email, password, role, nama_lengkap)
|
||||
VALUES (
|
||||
'enumerator',
|
||||
'enumerator@webgis.id',
|
||||
'$2y$12$djJkmhJBRCSCqqpAICIvGuLoVpICrDUS2IVECbZUodgR89VRTqdLW',
|
||||
'enumerator',
|
||||
'Petugas Lapangan'
|
||||
);
|
||||
|
||||
-- 4. Log aktivitas (KF-04) — audit trail
|
||||
CREATE TABLE IF NOT EXISTS activity_log (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NULL,
|
||||
username VARCHAR(50) DEFAULT NULL,
|
||||
aksi VARCHAR(50) NOT NULL,
|
||||
tabel_target VARCHAR(50) DEFAULT NULL,
|
||||
record_id INT DEFAULT NULL,
|
||||
keterangan TEXT DEFAULT NULL,
|
||||
ip_address VARCHAR(45) DEFAULT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_activity_user (user_id),
|
||||
INDEX idx_activity_created (created_at)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
@@ -0,0 +1,29 @@
|
||||
-- ============================================================
|
||||
-- Migrasi Fase B — Tabel Wilayah (choropleth) + seed sampel
|
||||
-- ============================================================
|
||||
-- Polygon kelurahan SAMPEL (disederhanakan) di sekitar data warga.
|
||||
-- Geometri SRID 0 agar konsisten dengan data spasial lama.
|
||||
-- jumlah_penduduk = jumlah KK (dummy) untuk hitung persentase miskin.
|
||||
-- ============================================================
|
||||
|
||||
CREATE TABLE IF NOT EXISTS wilayah (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
kode_wilayah VARCHAR(20) DEFAULT NULL,
|
||||
nama VARCHAR(100) NOT NULL,
|
||||
jenis ENUM('kelurahan','kecamatan') NOT NULL DEFAULT 'kelurahan',
|
||||
parent_id INT DEFAULT NULL,
|
||||
jumlah_penduduk INT NOT NULL DEFAULT 0,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_wilayah_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
INSERT INTO wilayah (kode_wilayah, nama, jenis, jumlah_penduduk, geom) VALUES
|
||||
('6171010001', 'Kel. Tambelan Sampit', 'kelurahan', 45,
|
||||
ST_GeomFromText('POLYGON((109.357 -0.047, 109.368 -0.047, 109.368 -0.058, 109.357 -0.058, 109.357 -0.047))')),
|
||||
('6171010002', 'Kel. Sungai Bangkong', 'kelurahan', 60,
|
||||
ST_GeomFromText('POLYGON((109.328 -0.043, 109.340 -0.043, 109.340 -0.055, 109.328 -0.055, 109.328 -0.043))')),
|
||||
('6171010003', 'Kel. Akcaya', 'kelurahan', 80,
|
||||
ST_GeomFromText('POLYGON((109.339 -0.035, 109.350 -0.035, 109.350 -0.045, 109.339 -0.045, 109.339 -0.035))')),
|
||||
('6171010004', 'Kel. Benua Melayu Darat', 'kelurahan', 55,
|
||||
ST_GeomFromText('POLYGON((109.318 -0.044, 109.329 -0.044, 109.329 -0.056, 109.318 -0.056, 109.318 -0.044))'));
|
||||
@@ -0,0 +1,82 @@
|
||||
-- ============================================================
|
||||
-- Migrasi Fase C — Manajemen Data Kemiskinan (KF-12 s/d 18)
|
||||
-- ============================================================
|
||||
-- Memperkaya warga_miskin + bantuan sosial + foto + fasilitas publik.
|
||||
-- Aman dijalankan pada DB existing (kolom & tabel baru saja).
|
||||
-- ============================================================
|
||||
|
||||
-- 1. Perluas kolom warga_miskin (KF-12 / KF-18)
|
||||
ALTER TABLE warga_miskin
|
||||
ADD COLUMN nik_kk VARCHAR(16) DEFAULT NULL AFTER nama_kk,
|
||||
ADD COLUMN alamat VARCHAR(255) DEFAULT NULL AFTER nik_kk,
|
||||
ADD COLUMN wilayah_id INT DEFAULT NULL AFTER alamat,
|
||||
ADD COLUMN rt VARCHAR(5) DEFAULT NULL AFTER wilayah_id,
|
||||
ADD COLUMN rw VARCHAR(5) DEFAULT NULL AFTER rt,
|
||||
ADD COLUMN jumlah_jiwa INT DEFAULT NULL AFTER rw,
|
||||
ADD COLUMN pekerjaan_kk VARCHAR(100) DEFAULT NULL AFTER jumlah_jiwa,
|
||||
ADD COLUMN sumber_air ENUM('SUMUR_BOR','PDAM','SUNGAI','HUJAN','TIDAK_ADA') DEFAULT NULL,
|
||||
ADD COLUMN status_listrik ENUM('PLN','NON_PLN','TIDAK_ADA') DEFAULT NULL,
|
||||
ADD COLUMN material_dinding ENUM('PERMANEN','SEMI_PERMANEN','TIDAK_PERMANEN') DEFAULT NULL,
|
||||
ADD COLUMN status_kepemilikan ENUM('MILIK','SEWA','NUMPANG','LAINNYA') DEFAULT NULL,
|
||||
ADD COLUMN status_verifikasi ENUM('belum','terverifikasi','perlu_tinjauan') NOT NULL DEFAULT 'belum',
|
||||
ADD COLUMN created_by INT DEFAULT NULL;
|
||||
|
||||
-- 2. Master jenis bantuan (KF-17) + seed
|
||||
CREATE TABLE IF NOT EXISTS jenis_bantuan (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
kode VARCHAR(20) NOT NULL UNIQUE,
|
||||
nama VARCHAR(100) NOT NULL,
|
||||
deskripsi VARCHAR(255) DEFAULT NULL
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
INSERT IGNORE INTO jenis_bantuan (kode, nama, deskripsi) VALUES
|
||||
('PKH', 'Program Keluarga Harapan', 'Bantuan tunai bersyarat keluarga miskin'),
|
||||
('BPNT', 'Bantuan Pangan Non Tunai', 'Bantuan sembako via KKS'),
|
||||
('PBI-JK', 'Penerima Bantuan Iuran JK', 'Subsidi iuran BPJS Kesehatan'),
|
||||
('BLT-DD', 'Bantuan Langsung Tunai Dana Desa','Bantuan tunai dari Dana Desa'),
|
||||
('RUTILAHU','Rumah Tidak Layak Huni', 'Rehabilitasi rumah tidak layak huni'),
|
||||
('KIP', 'Kartu Indonesia Pintar', 'Bantuan biaya pendidikan');
|
||||
|
||||
-- 3. Riwayat penerimaan bantuan per rumah tangga (KF-17)
|
||||
CREATE TABLE IF NOT EXISTS bantuan_sosial (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
warga_id INT NOT NULL,
|
||||
jenis_bantuan_id INT NOT NULL,
|
||||
tgl_mulai DATE DEFAULT NULL,
|
||||
tgl_berakhir DATE DEFAULT NULL,
|
||||
is_aktif TINYINT(1) NOT NULL DEFAULT 1,
|
||||
keterangan VARCHAR(255) DEFAULT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_bansos_warga (warga_id),
|
||||
INDEX idx_bansos_jenis (jenis_bantuan_id),
|
||||
CONSTRAINT fk_bansos_warga FOREIGN KEY (warga_id) REFERENCES warga_miskin(id) ON DELETE CASCADE,
|
||||
CONSTRAINT fk_bansos_jenis FOREIGN KEY (jenis_bantuan_id) REFERENCES jenis_bantuan(id) ON DELETE CASCADE
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- 4. Foto kondisi rumah (KF-13)
|
||||
CREATE TABLE IF NOT EXISTS foto_rumah (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
warga_id INT NOT NULL,
|
||||
file_path VARCHAR(255) NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_foto_warga (warga_id),
|
||||
CONSTRAINT fk_foto_warga FOREIGN KEY (warga_id) REFERENCES warga_miskin(id) ON DELETE CASCADE
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- 5. Fasilitas publik untuk proximity (KF-21) + seed sampel
|
||||
CREATE TABLE IF NOT EXISTS fasilitas_publik (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama VARCHAR(120) NOT NULL,
|
||||
jenis ENUM('sekolah','puskesmas','pasar','kantor_kelurahan','rumah_ibadah','lainnya') NOT NULL DEFAULT 'lainnya',
|
||||
wilayah_id INT DEFAULT NULL,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_fasilitas_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
INSERT INTO fasilitas_publik (nama, jenis, geom) VALUES
|
||||
('SDN 01 Pontianak Kota', 'sekolah', ST_GeomFromText('POINT(109.3380 -0.0420)')),
|
||||
('Puskesmas Alianyang', 'puskesmas', ST_GeomFromText('POINT(109.3330 -0.0480)')),
|
||||
('Pasar Flamboyan', 'pasar', ST_GeomFromText('POINT(109.3470 -0.0250)')),
|
||||
('Kantor Kel. Akcaya', 'kantor_kelurahan', ST_GeomFromText('POINT(109.3445 -0.0400)')),
|
||||
('Puskesmas Kampung Bali','puskesmas', ST_GeomFromText('POINT(109.3360 -0.0440)'));
|
||||
@@ -0,0 +1,172 @@
|
||||
-- ============================================================
|
||||
-- WebGIS Pontianak - Seed Data Spasial
|
||||
-- ============================================================
|
||||
-- Koordinat menggunakan urutan longitude, latitude.
|
||||
|
||||
USE webgis_db;
|
||||
|
||||
SET FOREIGN_KEY_CHECKS = 0;
|
||||
|
||||
TRUNCATE TABLE spbu;
|
||||
TRUNCATE TABLE rumah_ibadah;
|
||||
TRUNCATE TABLE jalan;
|
||||
TRUNCATE TABLE kavling;
|
||||
TRUNCATE TABLE kawasan_kumuh;
|
||||
TRUNCATE TABLE warga_miskin;
|
||||
|
||||
SET FOREIGN_KEY_CHECKS = 1;
|
||||
|
||||
-- ============================================================
|
||||
-- 1. SPBU
|
||||
-- ============================================================
|
||||
INSERT INTO spbu (nama, deskripsi, buka_24_jam, geom) VALUES
|
||||
(
|
||||
'SPBU Bundaran Digulis Untan',
|
||||
'SPBU terdekat dari kampus',
|
||||
1,
|
||||
ST_GeomFromText('POINT(109.3440 -0.0565)')
|
||||
),
|
||||
(
|
||||
'SPBU Ahmad Yani',
|
||||
'Dekat Mega Mall (24 Jam)',
|
||||
1,
|
||||
ST_GeomFromText('POINT(109.3360 -0.0450)')
|
||||
),
|
||||
(
|
||||
'SPBU Imam Bonjol',
|
||||
'SPBU pinggir kota',
|
||||
0,
|
||||
ST_GeomFromText('POINT(109.3410 -0.0380)')
|
||||
),
|
||||
(
|
||||
'SPBU Kota Baru',
|
||||
'Jl. Sultan Abdurrahman',
|
||||
0,
|
||||
ST_GeomFromText('POINT(109.3245 -0.0487)')
|
||||
);
|
||||
|
||||
-- ============================================================
|
||||
-- 2. Rumah Ibadah
|
||||
-- ============================================================
|
||||
INSERT INTO rumah_ibadah (nama, agama, radius_bantuan_meter, geom) VALUES
|
||||
(
|
||||
'Masjid Raya Mujahidin',
|
||||
'Islam',
|
||||
1000,
|
||||
ST_GeomFromText('POINT(109.3356 -0.0454)')
|
||||
),
|
||||
(
|
||||
'Gereja Katedral St. Yosef',
|
||||
'Katolik',
|
||||
1000,
|
||||
ST_GeomFromText('POINT(109.3368 -0.0298)')
|
||||
),
|
||||
(
|
||||
'Vihara Bodhisatva Karaniya Metta',
|
||||
'Buddha',
|
||||
1000,
|
||||
ST_GeomFromText('POINT(109.3468 -0.0233)')
|
||||
),
|
||||
(
|
||||
'Masjid Jami Keraton Kadriyah',
|
||||
'Islam',
|
||||
1000,
|
||||
ST_GeomFromText('POINT(109.3523 -0.0229)')
|
||||
);
|
||||
|
||||
-- ============================================================
|
||||
-- 3. Jalan
|
||||
-- ============================================================
|
||||
INSERT INTO jalan (nama, jenis_jalan, geom) VALUES
|
||||
(
|
||||
'Jalan Ahmad Yani',
|
||||
'Arteri Primer',
|
||||
ST_GeomFromText('LINESTRING(109.3448 -0.0583, 109.3360 -0.0450, 109.3310 -0.0320)')
|
||||
),
|
||||
(
|
||||
'Jalan Gajah Mada',
|
||||
'Kolektor',
|
||||
ST_GeomFromText('LINESTRING(109.3310 -0.0320, 109.3410 -0.0290, 109.3460 -0.0250)')
|
||||
),
|
||||
(
|
||||
'Jalan Imam Bonjol',
|
||||
'Lokal',
|
||||
ST_GeomFromText('LINESTRING(109.3360 -0.0450, 109.3420 -0.0400, 109.3500 -0.0350)')
|
||||
);
|
||||
|
||||
-- ============================================================
|
||||
-- 4. Kavling
|
||||
-- ============================================================
|
||||
INSERT INTO kavling (nama_pemilik, status_kepemilikan, luas, geom) VALUES
|
||||
(
|
||||
'PT. Mega Karya',
|
||||
'HGB',
|
||||
25000.00,
|
||||
ST_GeomFromText('POLYGON((109.333 -0.048, 109.338 -0.048, 109.338 -0.053, 109.333 -0.053, 109.333 -0.048))')
|
||||
),
|
||||
(
|
||||
'Bapak Sudirman',
|
||||
'SHM',
|
||||
1500.00,
|
||||
ST_GeomFromText('POLYGON((109.340 -0.035, 109.341 -0.035, 109.341 -0.036, 109.340 -0.036, 109.340 -0.035))')
|
||||
);
|
||||
|
||||
-- ============================================================
|
||||
-- 5. Kawasan Kumuh
|
||||
-- ============================================================
|
||||
INSERT INTO kawasan_kumuh (nama_kawasan, geom) VALUES
|
||||
(
|
||||
'Kawasan Rawan Bantaran Sungai',
|
||||
ST_GeomFromText('POLYGON((109.360 -0.050, 109.365 -0.050, 109.365 -0.055, 109.360 -0.055, 109.360 -0.050))')
|
||||
),
|
||||
(
|
||||
'Kawasan Padat Parit Tokaya',
|
||||
ST_GeomFromText('POLYGON((109.342 -0.038, 109.346 -0.038, 109.346 -0.042, 109.342 -0.042, 109.342 -0.038))')
|
||||
);
|
||||
|
||||
-- ============================================================
|
||||
-- 6. Warga Miskin
|
||||
-- ============================================================
|
||||
INSERT INTO warga_miskin (nama_kk, penghasilan, jumlah_tanggungan, geom) VALUES
|
||||
(
|
||||
'Bpk. Budi (Terisolasi)',
|
||||
800000.00,
|
||||
4,
|
||||
ST_GeomFromText('POINT(109.361 -0.051)')
|
||||
),
|
||||
(
|
||||
'Ibu Siti (Terisolasi)',
|
||||
600000.00,
|
||||
2,
|
||||
ST_GeomFromText('POINT(109.362 -0.052)')
|
||||
),
|
||||
(
|
||||
'Bpk. Joko (Terisolasi)',
|
||||
1000000.00,
|
||||
5,
|
||||
ST_GeomFromText('POINT(109.363 -0.053)')
|
||||
),
|
||||
(
|
||||
'Ibu Ani (Terisolasi)',
|
||||
700000.00,
|
||||
3,
|
||||
ST_GeomFromText('POINT(109.364 -0.054)')
|
||||
),
|
||||
(
|
||||
'Bpk. Hasan',
|
||||
1200000.00,
|
||||
3,
|
||||
ST_GeomFromText('POINT(109.334 -0.050)')
|
||||
),
|
||||
(
|
||||
'Mbah Warno',
|
||||
400000.00,
|
||||
1,
|
||||
ST_GeomFromText('POINT(109.336 -0.046)')
|
||||
),
|
||||
(
|
||||
'Pak Junaidi',
|
||||
900000.00,
|
||||
4,
|
||||
ST_GeomFromText('POINT(109.344 -0.040)')
|
||||
);
|
||||
@@ -0,0 +1,26 @@
|
||||
-- ============================================================
|
||||
-- WebGIS Pontianak - Seed Users
|
||||
-- ============================================================
|
||||
-- Akun demo:
|
||||
-- admin / admin123
|
||||
-- pengguna / user123
|
||||
|
||||
USE webgis_db;
|
||||
|
||||
INSERT INTO users (username, password, role, nama_lengkap) VALUES
|
||||
(
|
||||
'admin',
|
||||
'$2y$12$oRvX1EtLHM/y8XtwlOy./Oi2UVpnHp98GvXqEuLCFimhr0doKus62',
|
||||
'admin',
|
||||
'Administrator WebGIS'
|
||||
),
|
||||
(
|
||||
'pengguna',
|
||||
'$2y$12$djJkmhJBRCSCqqpAICIvGuLoVpICrDUS2IVECbZUodgR89VRTqdLW',
|
||||
'user',
|
||||
'Pengguna Publik'
|
||||
)
|
||||
ON DUPLICATE KEY UPDATE
|
||||
password = VALUES(password),
|
||||
role = VALUES(role),
|
||||
nama_lengkap = VALUES(nama_lengkap);
|
||||
@@ -0,0 +1,210 @@
|
||||
-- ============================================================
|
||||
-- WebGIS Pemetaan Kemiskinan Terpadu — Database Lengkap (SKPL)
|
||||
-- ============================================================
|
||||
-- Import file ini untuk membuat ulang database dari awal.
|
||||
-- Perhatian: tabel lama dengan nama yang sama akan dihapus.
|
||||
|
||||
SET FOREIGN_KEY_CHECKS = 0;
|
||||
|
||||
DROP TABLE IF EXISTS activity_log;
|
||||
DROP TABLE IF EXISTS foto_rumah;
|
||||
DROP TABLE IF EXISTS bantuan_sosial;
|
||||
DROP TABLE IF EXISTS jenis_bantuan;
|
||||
DROP TABLE IF EXISTS fasilitas_publik;
|
||||
DROP TABLE IF EXISTS wilayah;
|
||||
DROP TABLE IF EXISTS laporan_warga;
|
||||
DROP TABLE IF EXISTS warga_miskin;
|
||||
DROP TABLE IF EXISTS users;
|
||||
|
||||
SET FOREIGN_KEY_CHECKS = 1;
|
||||
|
||||
-- ============================================================
|
||||
-- 1. Users (4 role SKPL: publik / enumerator / operator / pimpinan)
|
||||
-- ============================================================
|
||||
CREATE TABLE users (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
username VARCHAR(50) NOT NULL UNIQUE,
|
||||
email VARCHAR(120) DEFAULT NULL,
|
||||
password VARCHAR(255) NOT NULL,
|
||||
role ENUM('publik','enumerator','operator','pimpinan') NOT NULL DEFAULT 'enumerator',
|
||||
is_active TINYINT(1) NOT NULL DEFAULT 1,
|
||||
wilayah_tugas VARCHAR(100) DEFAULT NULL,
|
||||
last_login TIMESTAMP NULL DEFAULT NULL,
|
||||
nama_lengkap VARCHAR(100) DEFAULT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- Akun demo. Password: operator=admin123, pimpinan & enumerator=user123
|
||||
INSERT INTO users (username, email, password, role, nama_lengkap) VALUES
|
||||
('operator', 'operator@webgis.id', '$2y$12$oRvX1EtLHM/y8XtwlOy./Oi2UVpnHp98GvXqEuLCFimhr0doKus62', 'operator', 'Operator Dinas Sosial'),
|
||||
('pimpinan', 'pimpinan@webgis.id', '$2y$12$djJkmhJBRCSCqqpAICIvGuLoVpICrDUS2IVECbZUodgR89VRTqdLW', 'pimpinan', 'Kepala Dinas Sosial'),
|
||||
('enumerator', 'enumerator@webgis.id', '$2y$12$djJkmhJBRCSCqqpAICIvGuLoVpICrDUS2IVECbZUodgR89VRTqdLW', 'enumerator', 'Petugas Lapangan');
|
||||
|
||||
-- ============================================================
|
||||
-- 2. Rumah Tangga Miskin
|
||||
-- ============================================================
|
||||
CREATE TABLE warga_miskin (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama_kk VARCHAR(100) NOT NULL,
|
||||
nik_kk VARCHAR(16) DEFAULT NULL,
|
||||
alamat VARCHAR(255) DEFAULT NULL,
|
||||
wilayah_id INT DEFAULT NULL,
|
||||
rt VARCHAR(5) DEFAULT NULL,
|
||||
rw VARCHAR(5) DEFAULT NULL,
|
||||
jumlah_jiwa INT DEFAULT NULL,
|
||||
pekerjaan_kk VARCHAR(100) DEFAULT NULL,
|
||||
penghasilan DECIMAL(15,2) NOT NULL,
|
||||
jumlah_tanggungan INT NOT NULL,
|
||||
sumber_air ENUM('SUMUR_BOR','PDAM','SUNGAI','HUJAN','TIDAK_ADA') DEFAULT NULL,
|
||||
status_listrik ENUM('PLN','NON_PLN','TIDAK_ADA') DEFAULT NULL,
|
||||
material_dinding ENUM('PERMANEN','SEMI_PERMANEN','TIDAK_PERMANEN') DEFAULT NULL,
|
||||
status_kepemilikan ENUM('MILIK','SEWA','NUMPANG','LAINNYA') DEFAULT NULL,
|
||||
status_verifikasi ENUM('belum','terverifikasi','perlu_tinjauan') NOT NULL DEFAULT 'belum',
|
||||
created_by INT DEFAULT NULL,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_warga_miskin_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
INSERT INTO warga_miskin (nama_kk, penghasilan, jumlah_tanggungan, geom) VALUES
|
||||
('Bpk. Budi (Terisolasi)', 800000.00, 4, ST_GeomFromText('POINT(109.361 -0.051)')),
|
||||
('Ibu Siti (Terisolasi)', 600000.00, 2, ST_GeomFromText('POINT(109.362 -0.052)')),
|
||||
('Bpk. Joko (Terisolasi)', 1000000.00, 5, ST_GeomFromText('POINT(109.363 -0.053)')),
|
||||
('Ibu Ani (Terisolasi)', 700000.00, 3, ST_GeomFromText('POINT(109.364 -0.054)')),
|
||||
('Bpk. Hasan', 1200000.00, 3, ST_GeomFromText('POINT(109.334 -0.050)')),
|
||||
('Mbah Warno', 400000.00, 1, ST_GeomFromText('POINT(109.336 -0.046)')),
|
||||
('Pak Junaidi', 900000.00, 4, ST_GeomFromText('POINT(109.344 -0.040)'));
|
||||
|
||||
-- ============================================================
|
||||
-- 3. Laporan Warga (partisipasi/transparansi)
|
||||
-- ============================================================
|
||||
CREATE TABLE laporan_warga (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NOT NULL,
|
||||
kategori VARCHAR(50) NOT NULL,
|
||||
deskripsi TEXT NOT NULL,
|
||||
geometry POINT NOT NULL,
|
||||
status ENUM('menunggu', 'diproses', 'selesai', 'ditolak') NOT NULL DEFAULT 'menunggu',
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_laporan_user_id (user_id),
|
||||
SPATIAL INDEX idx_laporan_geometry (geometry),
|
||||
CONSTRAINT fk_laporan_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- ============================================================
|
||||
-- 4. Log Aktivitas (KF-04)
|
||||
-- ============================================================
|
||||
CREATE TABLE activity_log (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NULL,
|
||||
username VARCHAR(50) DEFAULT NULL,
|
||||
aksi VARCHAR(50) NOT NULL,
|
||||
tabel_target VARCHAR(50) DEFAULT NULL,
|
||||
record_id INT DEFAULT NULL,
|
||||
keterangan TEXT DEFAULT NULL,
|
||||
ip_address VARCHAR(45) DEFAULT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_activity_user (user_id),
|
||||
INDEX idx_activity_created (created_at)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- ============================================================
|
||||
-- 5. Wilayah (KF-06) — batas kelurahan untuk choropleth
|
||||
-- ============================================================
|
||||
CREATE TABLE wilayah (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
kode_wilayah VARCHAR(20) DEFAULT NULL,
|
||||
nama VARCHAR(100) NOT NULL,
|
||||
jenis ENUM('kelurahan','kecamatan') NOT NULL DEFAULT 'kelurahan',
|
||||
parent_id INT DEFAULT NULL,
|
||||
jumlah_penduduk INT NOT NULL DEFAULT 0,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_wilayah_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
INSERT INTO wilayah (kode_wilayah, nama, jenis, jumlah_penduduk, geom) VALUES
|
||||
('6171010001', 'Kel. Tambelan Sampit', 'kelurahan', 45,
|
||||
ST_GeomFromText('POLYGON((109.357 -0.047, 109.368 -0.047, 109.368 -0.058, 109.357 -0.058, 109.357 -0.047))')),
|
||||
('6171010002', 'Kel. Sungai Bangkong', 'kelurahan', 60,
|
||||
ST_GeomFromText('POLYGON((109.328 -0.043, 109.340 -0.043, 109.340 -0.055, 109.328 -0.055, 109.328 -0.043))')),
|
||||
('6171010003', 'Kel. Akcaya', 'kelurahan', 80,
|
||||
ST_GeomFromText('POLYGON((109.339 -0.035, 109.350 -0.035, 109.350 -0.045, 109.339 -0.045, 109.339 -0.035))')),
|
||||
('6171010004', 'Kel. Benua Melayu Darat', 'kelurahan', 55,
|
||||
ST_GeomFromText('POLYGON((109.318 -0.044, 109.329 -0.044, 109.329 -0.056, 109.318 -0.056, 109.318 -0.044))'));
|
||||
|
||||
-- ============================================================
|
||||
-- 6. Bantuan Sosial (KF-17) — master jenis + riwayat per warga
|
||||
-- ============================================================
|
||||
CREATE TABLE jenis_bantuan (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
kode VARCHAR(20) NOT NULL UNIQUE,
|
||||
nama VARCHAR(100) NOT NULL,
|
||||
deskripsi VARCHAR(255) DEFAULT NULL
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
INSERT INTO jenis_bantuan (kode, nama, deskripsi) VALUES
|
||||
('PKH', 'Program Keluarga Harapan', 'Bantuan tunai bersyarat keluarga miskin'),
|
||||
('BPNT', 'Bantuan Pangan Non Tunai', 'Bantuan sembako via KKS'),
|
||||
('PBI-JK', 'Penerima Bantuan Iuran JK', 'Subsidi iuran BPJS Kesehatan'),
|
||||
('BLT-DD', 'Bantuan Langsung Tunai Dana Desa', 'Bantuan tunai dari Dana Desa'),
|
||||
('RUTILAHU','Rumah Tidak Layak Huni', 'Rehabilitasi rumah tidak layak huni'),
|
||||
('KIP', 'Kartu Indonesia Pintar', 'Bantuan biaya pendidikan');
|
||||
|
||||
CREATE TABLE bantuan_sosial (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
warga_id INT NOT NULL,
|
||||
jenis_bantuan_id INT NOT NULL,
|
||||
tgl_mulai DATE DEFAULT NULL,
|
||||
tgl_berakhir DATE DEFAULT NULL,
|
||||
is_aktif TINYINT(1) NOT NULL DEFAULT 1,
|
||||
keterangan VARCHAR(255) DEFAULT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_bansos_warga (warga_id),
|
||||
INDEX idx_bansos_jenis (jenis_bantuan_id),
|
||||
CONSTRAINT fk_bansos_warga FOREIGN KEY (warga_id) REFERENCES warga_miskin(id) ON DELETE CASCADE,
|
||||
CONSTRAINT fk_bansos_jenis FOREIGN KEY (jenis_bantuan_id) REFERENCES jenis_bantuan(id) ON DELETE CASCADE
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- ============================================================
|
||||
-- 7. Foto Kondisi Rumah (KF-13)
|
||||
-- ============================================================
|
||||
CREATE TABLE foto_rumah (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
warga_id INT NOT NULL,
|
||||
file_path VARCHAR(255) NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_foto_warga (warga_id),
|
||||
CONSTRAINT fk_foto_warga FOREIGN KEY (warga_id) REFERENCES warga_miskin(id) ON DELETE CASCADE
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
-- ============================================================
|
||||
-- 8. Fasilitas Publik (KF-21) — untuk proximity analysis
|
||||
-- ============================================================
|
||||
CREATE TABLE fasilitas_publik (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
nama VARCHAR(120) NOT NULL,
|
||||
jenis ENUM('sekolah','puskesmas','pasar','kantor_kelurahan','rumah_ibadah','lainnya') NOT NULL DEFAULT 'lainnya',
|
||||
wilayah_id INT DEFAULT NULL,
|
||||
geom GEOMETRY NOT NULL,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
SPATIAL INDEX idx_fasilitas_geom (geom)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
INSERT INTO fasilitas_publik (nama, jenis, geom) VALUES
|
||||
('SDN 01 Pontianak Kota', 'sekolah', ST_GeomFromText('POINT(109.3380 -0.0420)')),
|
||||
('Puskesmas Alianyang', 'puskesmas', ST_GeomFromText('POINT(109.3330 -0.0480)')),
|
||||
('Pasar Flamboyan', 'pasar', ST_GeomFromText('POINT(109.3470 -0.0250)')),
|
||||
('Kantor Kel. Akcaya', 'kantor_kelurahan', ST_GeomFromText('POINT(109.3445 -0.0400)')),
|
||||
('Puskesmas Kampung Bali', 'puskesmas', ST_GeomFromText('POINT(109.3360 -0.0440)'));
|
||||
|
||||
-- ============================================================
|
||||
-- 9. Seed demo kondisi rumah & bantuan (untuk analisis Fase E/F)
|
||||
-- ============================================================
|
||||
UPDATE warga_miskin SET sumber_air='SUNGAI', status_listrik='NON_PLN', material_dinding='TIDAK_PERMANEN', status_kepemilikan='NUMPANG' WHERE nama_kk LIKE '%Terisolasi%';
|
||||
UPDATE warga_miskin SET sumber_air='PDAM', status_listrik='PLN', material_dinding='SEMI_PERMANEN', status_kepemilikan='MILIK' WHERE nama_kk IN ('Bpk. Hasan','Mbah Warno','Pak Junaidi');
|
||||
|
||||
INSERT INTO bantuan_sosial (warga_id, jenis_bantuan_id, tgl_mulai, is_aktif)
|
||||
SELECT id, 1, '2026-01-01', 1 FROM warga_miskin WHERE nama_kk IN ('Bpk. Hasan','Pak Junaidi');
|
||||
INSERT INTO bantuan_sosial (warga_id, jenis_bantuan_id, tgl_mulai, is_aktif)
|
||||
SELECT id, 2, '2026-02-01', 1 FROM warga_miskin WHERE nama_kk='Mbah Warno';
|
||||
@@ -0,0 +1,46 @@
|
||||
services:
|
||||
web:
|
||||
build: .
|
||||
container_name: webgis_web
|
||||
ports:
|
||||
- "80:80"
|
||||
environment:
|
||||
- APP_BASE_PATH=/project_final
|
||||
- SESSION_SECURE=false
|
||||
- CORS_ALLOWED_ORIGIN=
|
||||
- DB_HOST=mysql
|
||||
- DB_PORT=3306
|
||||
- DB_DATABASE=webgis_db
|
||||
- DB_USERNAME=root
|
||||
- DB_PASSWORD=rootpassword
|
||||
volumes:
|
||||
- .:/var/www/html
|
||||
depends_on:
|
||||
- mysql
|
||||
networks:
|
||||
- webgis_network
|
||||
|
||||
mysql:
|
||||
image: mysql:8.0
|
||||
container_name: webgis_mysql
|
||||
environment:
|
||||
- MYSQL_ROOT_PASSWORD=rootpassword
|
||||
- MYSQL_DATABASE=webgis_db
|
||||
ports:
|
||||
- "3306:3306"
|
||||
volumes:
|
||||
- mysql_data:/var/lib/mysql
|
||||
- ./database/webgis_db.sql:/docker-entrypoint-initdb.d/webgis_db.sql
|
||||
networks:
|
||||
- webgis_network
|
||||
healthcheck:
|
||||
test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
|
||||
timeout: 20s
|
||||
retries: 10
|
||||
|
||||
volumes:
|
||||
mysql_data:
|
||||
|
||||
networks:
|
||||
webgis_network:
|
||||
driver: bridge
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* jalan.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Jalan (LineString).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, jenis_jalan, created_at, ST_AsGeoJSON(geom) as geojson FROM jalan");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'jenis_jalan' => $row['jenis_jalan'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Jalan berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) {
|
||||
sendError('Nama dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO jalan (nama, jenis_jalan, geom) VALUES (:nama, :jenis_jalan, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':jenis_jalan' => $input['jenis_jalan'] ?? 'Lokal',
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Jalan berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Jalan wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM jalan WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Jalan berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Jalan: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* kavling.php
|
||||
* Tanggung Jawab: Menangani operasi CRUD untuk entitas Kavling (Polygon).
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama_pemilik, luas, created_at, ST_AsGeoJSON(geom) as geojson FROM kavling");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_pemilik' => $row['nama_pemilik'],
|
||||
'luas' => $row['luas'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Kavling berhasil diambil');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal mengambil data Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama_pemilik']) || !isset($input['geometry'])) {
|
||||
sendError('Nama pemilik dan geometri wajib diisi');
|
||||
}
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO kavling (nama_pemilik, luas, geom) VALUES (:nama_pemilik, :luas, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama_pemilik' => $input['nama_pemilik'],
|
||||
':luas' => $input['luas'] ?? 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Data Kavling berhasil disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menyimpan Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) {
|
||||
sendError('ID Kavling wajib disertakan');
|
||||
}
|
||||
|
||||
try {
|
||||
$stmt = $pdo->prepare("DELETE FROM kavling WHERE id = :id");
|
||||
$stmt->execute([':id' => $id]);
|
||||
sendSuccess(null, 'Data Kavling berhasil dihapus');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghapus Kavling: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,89 @@
|
||||
<?php
|
||||
/**
|
||||
* rumah_ibadah.php
|
||||
* Tanggung Jawab: Operasi CRUD Rumah Ibadah + Endpoint analisis jangkauan Haversine.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
require_once '../utils/geo_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
if (isset($_GET['action']) && $_GET['action'] === 'jangkauan' && isset($_GET['id'])) {
|
||||
// Analisis Jangkauan Haversine
|
||||
$id = $_GET['id'];
|
||||
$radius = isset($_GET['radius']) ? (float) $_GET['radius'] : 1.0; // default 1 km
|
||||
|
||||
// Dapatkan koordinat rumah ibadah ini
|
||||
$stmt = $pdo->prepare("SELECT ST_AsGeoJSON(geom) as geojson FROM rumah_ibadah WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
$rumah_ibadah = $stmt->fetch();
|
||||
|
||||
if (!$rumah_ibadah) sendError('Rumah ibadah tidak ditemukan', 404);
|
||||
|
||||
$geom = json_decode($rumah_ibadah['geojson'], true);
|
||||
$pusatLon = $geom['coordinates'][0];
|
||||
$pusatLat = $geom['coordinates'][1];
|
||||
|
||||
// Panggil geo_helper untuk mendapatkan warga miskin
|
||||
$warga = GeoHelper::getWargaDalamRadius($pdo, $pusatLat, $pusatLon, $radius);
|
||||
sendSuccess($warga, 'Data jangkauan berhasil dihitung');
|
||||
|
||||
} else {
|
||||
// GET Semua Rumah Ibadah (GeoJSON)
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, agama, ST_AsGeoJSON(geom) as geojson FROM rumah_ibadah");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'agama' => $row['agama']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Rumah Ibadah');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO rumah_ibadah (nama, agama, geom) VALUES (:nama, :agama, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':agama' => $input['agama'] ?? 'Islam',
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM rumah_ibadah WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,59 @@
|
||||
<?php
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama, deskripsi, buka_24_jam, created_at, ST_AsGeoJSON(geom) as geojson FROM spbu");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama' => $row['nama'],
|
||||
'deskripsi' => $row['deskripsi'],
|
||||
'buka_24_jam' => (bool)$row['buka_24_jam'],
|
||||
'created_at' => $row['created_at']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data SPBU berhasil diambil');
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO spbu (nama, deskripsi, buka_24_jam, geom) VALUES (:nama, :deskripsi, :buka_24_jam, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama' => $input['nama'],
|
||||
':deskripsi' => $input['deskripsi'] ?? '',
|
||||
':buka_24_jam' => isset($input['buka_24_jam']) && $input['buka_24_jam'] ? 1 : 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) { sendError('Gagal: ' . $e->getMessage(), 500); }
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM spbu WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,71 @@
|
||||
<?php
|
||||
/**
|
||||
* statistik.php
|
||||
* Tanggung Jawab: Menyediakan data analisis spasial menggunakan Point in Polygon (ST_Contains).
|
||||
* Menghitung kepadatan warga miskin dalam setiap kavling.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
if ($method === 'GET') {
|
||||
try {
|
||||
// Query Spatial Point-in-Polygon
|
||||
// Mengambil Kavling dan menghitung jumlah warga miskin (Point) yang ada di dalamnya
|
||||
$sql = "
|
||||
SELECT
|
||||
k.id,
|
||||
k.nama_pemilik,
|
||||
k.luas,
|
||||
ST_AsGeoJSON(k.geom) as geojson,
|
||||
COUNT(w.id) as jumlah_warga,
|
||||
COALESCE(SUM(w.jumlah_tanggungan), 0) as total_tanggungan
|
||||
FROM kavling k
|
||||
LEFT JOIN warga_miskin w ON ST_Contains(k.geom, w.geom)
|
||||
GROUP BY k.id
|
||||
";
|
||||
|
||||
$stmt = $pdo->query($sql);
|
||||
|
||||
$features = [];
|
||||
$total_warga = 0;
|
||||
|
||||
while ($row = $stmt->fetch()) {
|
||||
$jumlah = (int) $row['jumlah_warga'];
|
||||
$total_warga += $jumlah;
|
||||
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_pemilik' => $row['nama_pemilik'],
|
||||
'luas' => $row['luas'],
|
||||
'jumlah_warga' => $jumlah,
|
||||
'total_tanggungan' => (int) $row['total_tanggungan']
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
$response = [
|
||||
'statistik' => [
|
||||
'total_kavling' => count($features),
|
||||
'total_warga_terpetakan' => $total_warga
|
||||
],
|
||||
'geojson' => [
|
||||
'type' => 'FeatureCollection',
|
||||
'features' => $features
|
||||
]
|
||||
];
|
||||
|
||||
sendSuccess($response, 'Data statistik spasial berhasil dihitung');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal menghitung statistik spasial: ' . $e->getMessage(), 500);
|
||||
}
|
||||
} else {
|
||||
sendError('Method not allowed', 405);
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
/**
|
||||
* warga_miskin.php
|
||||
* Tanggung Jawab: Operasi CRUD untuk Warga Miskin.
|
||||
*/
|
||||
|
||||
require_once '../config/db.php';
|
||||
require_once '../utils/response_helper.php';
|
||||
|
||||
$pdo = Database::getConnection();
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
switch ($method) {
|
||||
case 'GET':
|
||||
try {
|
||||
$stmt = $pdo->query("SELECT id, nama_kk, penghasilan, jumlah_tanggungan, ST_AsGeoJSON(geom) as geojson FROM warga_miskin");
|
||||
$features = [];
|
||||
while ($row = $stmt->fetch()) {
|
||||
$features[] = [
|
||||
'type' => 'Feature',
|
||||
'geometry' => json_decode($row['geojson']),
|
||||
'properties' => [
|
||||
'id' => $row['id'],
|
||||
'nama_kk' => $row['nama_kk'],
|
||||
'penghasilan' => $row['penghasilan'],
|
||||
'jumlah_tanggungan' => $row['jumlah_tanggungan']
|
||||
]
|
||||
];
|
||||
}
|
||||
sendSuccess(['type' => 'FeatureCollection', 'features' => $features], 'Data Warga Miskin');
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'POST':
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
if (!isset($input['nama_kk']) || !isset($input['geometry'])) sendError('Validasi gagal');
|
||||
|
||||
try {
|
||||
$sql = "INSERT INTO warga_miskin (nama_kk, penghasilan, jumlah_tanggungan, geom) VALUES (:nama_kk, :penghasilan, :jumlah_tanggungan, ST_GeomFromGeoJSON(:geometry))";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute([
|
||||
':nama_kk' => $input['nama_kk'],
|
||||
':penghasilan' => $input['penghasilan'] ?? 0,
|
||||
':jumlah_tanggungan' => $input['jumlah_tanggungan'] ?? 0,
|
||||
':geometry' => json_encode($input['geometry'])
|
||||
]);
|
||||
sendSuccess(['id' => $pdo->lastInsertId()], 'Disimpan', 201);
|
||||
} catch (PDOException $e) {
|
||||
sendError('Gagal: ' . $e->getMessage(), 500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'DELETE':
|
||||
$id = $_GET['id'] ?? null;
|
||||
if (!$id) sendError('ID dibutuhkan');
|
||||
$stmt = $pdo->prepare("DELETE FROM warga_miskin WHERE id = ?");
|
||||
$stmt->execute([$id]);
|
||||
sendSuccess(null, 'Dihapus');
|
||||
break;
|
||||
|
||||
default:
|
||||
sendError('Method not allowed', 405);
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
class Database {
|
||||
private static $conn = null;
|
||||
|
||||
private static function env(string $key, string $default = ''): string {
|
||||
$value = getenv($key);
|
||||
return ($value === false || $value === '') ? $default : $value;
|
||||
}
|
||||
|
||||
public static function getConnection() {
|
||||
if (self::$conn === null) {
|
||||
try {
|
||||
$host = self::env('DB_HOST', '127.0.0.1');
|
||||
$port = self::env('DB_PORT', '3306');
|
||||
$dbName = self::env('DB_DATABASE', 'webgis_db');
|
||||
$username = self::env('DB_USERNAME', 'root');
|
||||
$password = self::env('DB_PASSWORD', '');
|
||||
|
||||
self::$conn = new PDO(
|
||||
"mysql:host={$host};port={$port};dbname={$dbName};charset=utf8mb4",
|
||||
$username,
|
||||
$password
|
||||
);
|
||||
self::$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
self::$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
|
||||
} catch (PDOException $exception) {
|
||||
echo "Connection error: " . $exception->getMessage();
|
||||
}
|
||||
}
|
||||
return self::$conn;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
/**
|
||||
* response_helper.php
|
||||
* Tanggung Jawab: Standarisasi format response JSON.
|
||||
*/
|
||||
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
$allowedOrigin = getenv('CORS_ALLOWED_ORIGIN');
|
||||
if ($allowedOrigin !== false && $allowedOrigin !== '') {
|
||||
header('Access-Control-Allow-Origin: ' . $allowedOrigin);
|
||||
header('Vary: Origin');
|
||||
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
|
||||
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
|
||||
}
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { exit(0); }
|
||||
|
||||
function sendSuccess($data = null, $message = 'Success', $statusCode = 200) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode(['status' => 'success', 'message' => $message, 'data' => $data]);
|
||||
exit();
|
||||
}
|
||||
|
||||
function sendError($message = 'Error', $statusCode = 400) {
|
||||
http_response_code($statusCode);
|
||||
echo json_encode(['status' => 'error', 'message' => $message]);
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,61 @@
|
||||
/* base.css
|
||||
* Tanggung Jawab: Reset CSS, definisi variabel warna premium, dan tipografi dasar.
|
||||
*/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* Color Palette - Minimalist & Elegant */
|
||||
--primary: #4F46E5;
|
||||
--primary-hover: #4338CA;
|
||||
--secondary: #10B981;
|
||||
--background: #F3F4F6;
|
||||
--surface: #FFFFFF;
|
||||
--surface-glass: rgba(255, 255, 255, 0.85);
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border: #E5E7EB;
|
||||
--danger: #EF4444;
|
||||
|
||||
/* Shadows & Effects */
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Scrollbar minimalis */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #CBD5E1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94A3B8;
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
:root {
|
||||
--primary: #6366F1;
|
||||
--primary-hover: #4F46E5;
|
||||
--bg-dark: #0F172A;
|
||||
--bg-glass: rgba(15, 23, 42, 0.75);
|
||||
--border-glass: rgba(255, 255, 255, 0.1);
|
||||
--text-light: #F8FAFC;
|
||||
--text-muted: #94A3B8;
|
||||
--radius: 20px;
|
||||
--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
--font: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-light);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Floating Dock */
|
||||
.floating-dock {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
z-index: 1000;
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--border-glass);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
width: 340px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Dock */
|
||||
.floating-dock::-webkit-scrollbar { width: 6px; }
|
||||
.floating-dock::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
|
||||
.header h2 { margin: 0 0 8px 0; font-size: 1.4rem; font-weight: 700; background: linear-gradient(135deg, #818CF8, #C084FC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.header p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
|
||||
|
||||
/* Buttons */
|
||||
.menu-group { display: flex; flex-direction: column; gap: 10px; }
|
||||
.menu-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
|
||||
|
||||
.btn-action {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
color: var(--text-light);
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: var(--font);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn-action svg { width: 20px; height: 20px; flex-shrink: 0; }
|
||||
|
||||
.btn-action:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.btn-action.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
/* Button Variants */
|
||||
.btn-spbu svg { color: #10B981; }
|
||||
.btn-jalan svg { color: #F59E0B; }
|
||||
.btn-kavling svg { color: #3B82F6; }
|
||||
.btn-rumah svg { color: #8B5CF6; }
|
||||
.btn-warga svg { color: #EF4444; }
|
||||
|
||||
/* Form Panel */
|
||||
.form-panel {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-glass);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 0.8rem; color: var(--text-muted); }
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border-glass);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.form-control:focus { border-color: var(--primary); }
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
|
||||
.checkbox-group span { font-size: 0.85rem; color: var(--text-light); }
|
||||
|
||||
.btn-submit {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-submit:hover { background: var(--primary-hover); }
|
||||
|
||||
/* Leaflet Customizations */
|
||||
.leaflet-draw-toolbar { display: none !important; }
|
||||
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
|
||||
.leaflet-control-zoom a {
|
||||
background: var(--bg-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-color: var(--border-glass) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.leaflet-control-zoom a:hover { background: var(--primary) !important; }
|
||||
|
||||
/* Leaflet Popup Premium */
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: var(--bg-glass) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid var(--border-glass) !important;
|
||||
color: var(--text-light) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
.leaflet-popup-tip { background: var(--bg-glass) !important; border: 1px solid var(--border-glass) !important; }
|
||||
.leaflet-popup-content { margin: 16px !important; font-family: var(--font); }
|
||||
.leaflet-popup-content h3 { margin: 0 0 8px 0; font-size: 1.1rem; border-bottom: 1px solid var(--border-glass); padding-bottom: 8px; }
|
||||
.leaflet-popup-content p { margin: 4px 0; font-size: 0.9rem; color: var(--text-muted); }
|
||||
.leaflet-popup-content .btn-delete {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #EF4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.leaflet-popup-content .btn-delete:hover { background: #EF4444; color: white; }
|
||||
|
||||
/* Custom Map Marker Icon Animation */
|
||||
.custom-icon div {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.custom-icon:hover div {
|
||||
transform: scale(1.1) translateY(-4px);
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.toast {
|
||||
background: var(--bg-glass); backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-glass); border-left: 4px solid var(--primary);
|
||||
padding: 16px 20px; border-radius: 12px; color: white; font-size: 0.9rem;
|
||||
box-shadow: var(--shadow); animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.toast.error { border-left-color: #EF4444; }
|
||||
.toast.success { border-left-color: #10B981; }
|
||||
|
||||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
@@ -0,0 +1,92 @@
|
||||
/* form.css
|
||||
* Tanggung Jawab: Styling komponen form (input, button, select).
|
||||
*/
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
transition: var(--transition);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
width: auto;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #DC2626;
|
||||
}
|
||||
|
||||
/* Micro-animation for active state */
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Form Container Animation */
|
||||
#form-container {
|
||||
background: var(--surface);
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 20px;
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebGIS - Pertemuan 03</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<style>
|
||||
.result-item { background: rgba(255,255,255,0.05); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-glass); display: flex; justify-content: space-between; align-items: center; }
|
||||
.badge { background: var(--primary); padding: 2px 6px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div class="floating-dock">
|
||||
<div class="header">
|
||||
<h2>P03: Analisis Spasial</h2>
|
||||
<p>Kumulatif P01 & P02 + Choropleth Map (Point in Polygon).</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-group">
|
||||
<div class="menu-title">Draw Tools</div>
|
||||
<button id="btn-draw-spbu" class="btn-action btn-spbu"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> Tambah SPBU</button>
|
||||
<button id="btn-draw-jalan" class="btn-action btn-jalan"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg> Tambah Jalan</button>
|
||||
<button id="btn-draw-kavling" class="btn-action btn-kavling"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> Tambah Kavling</button>
|
||||
<button id="btn-draw-rumah" class="btn-action btn-rumah"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg> Tambah Rumah Ibadah</button>
|
||||
<button id="btn-draw-warga" class="btn-action btn-warga"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg> Tambah Warga Miskin</button>
|
||||
</div>
|
||||
|
||||
<div id="choropleth-panel" class="form-panel" style="margin-top: 5px; background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3);">
|
||||
<h3 style="margin:0 0 5px 0; font-size:0.9rem; color:#10B981;">Statistik Kavling (Choropleth)</h3>
|
||||
<p style="font-size:0.8rem; margin:0 0 10px 0; color:var(--text-muted);">Pewarnaan otomatis area kavling berdasarkan jumlah warga miskin yang bermukim di atasnya.</p>
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:8px;">
|
||||
<span style="font-size:0.8rem;">Total Penduduk Miskin:</span>
|
||||
<strong id="stat-total-warga" style="color:white;">0</strong>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<span style="font-size:0.8rem;">Kavling Padat (>2 warga):</span>
|
||||
<strong id="stat-kavling-merah" style="color:#EF4444;">0</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="form-container" style="display: none;"></div>
|
||||
</div>
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,110 @@
|
||||
import { initMap } from './modules/map.js';
|
||||
import { setupDrawControls } from './modules/draw.js';
|
||||
import { renderForm } from './modules/form.js';
|
||||
import { spbuService, jalanService, kavlingService, rumahIbadahService, wargaMiskinService, BASE_URL } from './services/api.service.js';
|
||||
|
||||
let appMap;
|
||||
let drawControl;
|
||||
|
||||
const statistikService = {
|
||||
getChoropleth: async () => {
|
||||
const res = await fetch(`${BASE_URL}/03/backend/api/statistik.php`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
};
|
||||
|
||||
export const createIcon = (svgPath, color) => L.divIcon({
|
||||
className: 'custom-icon',
|
||||
html: `<div style="background-color: ${color}; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.8); color: white;"><svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">${svgPath}</svg></div>`,
|
||||
iconSize: [34, 34], iconAnchor: [17, 34], popupAnchor: [0, -34]
|
||||
});
|
||||
|
||||
const iconSPBU = (is24h) => createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.242-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>', is24h ? '#10B981' : '#EF4444');
|
||||
const iconRumah = createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>', '#8B5CF6');
|
||||
const iconWarga = createIcon('<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>', '#EF4444');
|
||||
|
||||
window.showToast = (msg, type='success') => {
|
||||
const t = document.createElement('div'); t.className = `toast ${type}`; t.innerHTML = msg;
|
||||
document.getElementById('toast-container').appendChild(t);
|
||||
setTimeout(() => { t.style.opacity=0; setTimeout(()=>t.remove(),300); }, 3000);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
appMap = initMap('map');
|
||||
document.getElementById('btn-draw-rumah')?.addEventListener('click', () => { window.currentDrawType='rumah_ibadah'; new L.Draw.Marker(appMap).enable(); });
|
||||
document.getElementById('btn-draw-warga')?.addEventListener('click', () => { window.currentDrawType='warga_miskin'; new L.Draw.Marker(appMap).enable(); });
|
||||
drawControl = setupDrawControls(appMap, handleGeometryCreated);
|
||||
await loadAllData();
|
||||
});
|
||||
|
||||
const loadAllData = async () => {
|
||||
try {
|
||||
const [spbu, jalan, choro, rumah, warga] = await Promise.all([
|
||||
spbuService.getAll(), jalanService.getAll(), statistikService.getChoropleth(),
|
||||
rumahIbadahService.getAll(), wargaMiskinService.getAll()
|
||||
]);
|
||||
|
||||
L.geoJSON(spbu, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconSPBU(f.properties.buka_24_jam) }), onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(jalan, { style: { color: '#F59E0B', weight: 4 }, onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(rumah, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconRumah }), onEachFeature: (f, l) => bindPopup(l, 'rumah_ibadah', f.properties) }).addTo(appMap);
|
||||
L.geoJSON(warga, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconWarga }), onEachFeature: (f, l) => bindPopup(l, 'warga_miskin', f.properties) }).addTo(appMap);
|
||||
|
||||
let merahCount = 0;
|
||||
L.geoJSON(choro, {
|
||||
style: (f) => {
|
||||
const count = f.properties.jumlah_warga_miskin;
|
||||
let c = '#10B981'; // Hijau (0)
|
||||
if(count > 0) c = '#F59E0B'; // Kuning (1-2)
|
||||
if(count > 2) { c = '#EF4444'; merahCount++; } // Merah (>2)
|
||||
return { color: c, fillColor: c, fillOpacity: 0.4, weight: 2 };
|
||||
},
|
||||
onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties)
|
||||
}).addTo(appMap);
|
||||
|
||||
document.getElementById('stat-total-warga').innerText = warga.features.length;
|
||||
document.getElementById('stat-kavling-merah').innerText = merahCount;
|
||||
|
||||
} catch (e) { window.showToast("Gagal meload data: "+e.message, 'error'); }
|
||||
};
|
||||
|
||||
const bindPopup = (layer, type, props) => {
|
||||
let ext = '';
|
||||
if(type==='spbu') ext = `<p>24 Jam: <strong style="color:${props.buka_24_jam?'#10B981':'#EF4444'}">${props.buka_24_jam?'Ya':'Tidak'}</strong></p>`;
|
||||
if(type==='kavling') ext = `<p>Jml Warga Miskin: <strong>${props.jumlah_warga_miskin||0} Jiwa</strong></p>`;
|
||||
|
||||
layer.bindPopup(`
|
||||
<div class="popup-custom">
|
||||
<h3>${props.nama}</h3>
|
||||
<p>${props.deskripsi || ''}</p>
|
||||
${ext}
|
||||
<button class="btn-delete" onclick="window.deleteData('${type}', ${props.id})">Hapus</button>
|
||||
</div>
|
||||
`);
|
||||
};
|
||||
|
||||
window.deleteData = async (type, id) => {
|
||||
if(!confirm('Yakin menghapus?')) return;
|
||||
try {
|
||||
if(type==='spbu') await spbuService.delete(id);
|
||||
if(type==='jalan') await jalanService.delete(id);
|
||||
if(type==='kavling') await kavlingService.delete(id);
|
||||
if(type==='rumah_ibadah') await rumahIbadahService.delete(id);
|
||||
if(type==='warga_miskin') await wargaMiskinService.delete(id);
|
||||
window.showToast('Data dihapus'); setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal hapus', 'error'); }
|
||||
};
|
||||
|
||||
const handleGeometryCreated = (type, geometry, layer) => {
|
||||
const tempLayer = L.geoJSON(geometry).addTo(appMap);
|
||||
renderForm(type, geometry, async (payload) => {
|
||||
try {
|
||||
if(type==='spbu') await spbuService.create(payload);
|
||||
if(type==='jalan') await jalanService.create(payload);
|
||||
if(type==='kavling') await kavlingService.create(payload);
|
||||
if(type==='rumah_ibadah') await rumahIbadahService.create(payload);
|
||||
if(type==='warga_miskin') await wargaMiskinService.create(payload);
|
||||
window.showToast('Tersimpan'); setTimeout(()=>location.reload(), 800);
|
||||
} catch(e) { window.showToast('Gagal simpan', 'error'); }
|
||||
}, () => appMap.removeLayer(tempLayer));
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
export const setupDrawControls = (map, onGeometryCreated) => {
|
||||
const drawControl = new L.Control.Draw({
|
||||
draw: { marker: true, polyline: true, polygon: true, circle: false, circlemarker: false, rectangle: false }
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
|
||||
map.on(L.Draw.Event.CREATED, function (event) {
|
||||
const layer = event.layer;
|
||||
const type = event.layerType;
|
||||
|
||||
// Peta draw default tipe: marker -> spbu, polyline -> jalan, polygon -> kavling
|
||||
let customType = type;
|
||||
if(type === 'marker') customType = 'spbu';
|
||||
if(type === 'polyline') customType = 'jalan';
|
||||
if(type === 'polygon') customType = 'kavling';
|
||||
if(window.currentDrawType) customType = window.currentDrawType; // Untuk P2/P3
|
||||
|
||||
onGeometryCreated(customType, layer.toGeoJSON().geometry, layer);
|
||||
});
|
||||
|
||||
// Custom Menu Handlers
|
||||
const markerDrawer = new L.Draw.Marker(map, drawControl.options.draw.marker);
|
||||
const polylineDrawer = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
|
||||
const polygonDrawer = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
|
||||
|
||||
document.getElementById('btn-draw-spbu')?.addEventListener('click', () => { window.currentDrawType='spbu'; markerDrawer.enable(); });
|
||||
document.getElementById('btn-draw-jalan')?.addEventListener('click', () => { window.currentDrawType='jalan'; polylineDrawer.enable(); });
|
||||
document.getElementById('btn-draw-kavling')?.addEventListener('click', () => { window.currentDrawType='kavling'; polygonDrawer.enable(); });
|
||||
|
||||
return drawControl;
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
export const renderForm = (type, geometry, onSubmit, onCancel) => {
|
||||
const container = document.getElementById('form-container');
|
||||
container.style.display = 'flex';
|
||||
|
||||
const extraFields = type === 'spbu' ? `
|
||||
<div class="form-group">
|
||||
<label class="checkbox-group">
|
||||
<input type="checkbox" id="input-24jam">
|
||||
<span>Buka 24 Jam</span>
|
||||
</label>
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="form-panel">
|
||||
<h3 style="margin:0 0 10px 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:8px;">Simpan Data (${type.toUpperCase()})</h3>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-nama" class="form-control" placeholder="Nama / Label" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="input-deskripsi" class="form-control" placeholder="Deskripsi Singkat">
|
||||
</div>
|
||||
${extraFields}
|
||||
<div style="display:flex; gap:10px; margin-top:8px;">
|
||||
<button id="btn-save" class="btn-submit" style="flex:1;">Simpan</button>
|
||||
<button id="btn-cancel" class="btn-submit" style="background:rgba(255,255,255,0.1); color:var(--text-light); flex:1;">Batal</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('btn-save').addEventListener('click', () => {
|
||||
const payload = {
|
||||
type,
|
||||
geometry,
|
||||
nama: document.getElementById('input-nama').value,
|
||||
deskripsi: document.getElementById('input-deskripsi').value,
|
||||
};
|
||||
if (type === 'spbu') payload.buka_24_jam = document.getElementById('input-24jam').checked;
|
||||
|
||||
onSubmit(payload);
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
|
||||
document.getElementById('btn-cancel').addEventListener('click', () => {
|
||||
if(onCancel) onCancel();
|
||||
container.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* map.js
|
||||
* Tanggung Jawab: Inisialisasi peta Leaflet dasar dan base layer.
|
||||
*/
|
||||
|
||||
export const initMap = (containerId) => {
|
||||
// Pusat peta default (Universitas Tanjungpura, Pontianak)
|
||||
const map = L.map(containerId, {
|
||||
zoomControl: false
|
||||
}).setView([-0.0583, 109.3448], 15);
|
||||
|
||||
// Pindahkan zoom control ke kanan bawah
|
||||
L.control.zoom({
|
||||
position: 'bottomright'
|
||||
}).addTo(map);
|
||||
|
||||
// Tile Layer Premium (CartoDB Dark Matter untuk Glass UI)
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(map);
|
||||
|
||||
return map;
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
export const BASE_URL = '';
|
||||
|
||||
const createService = (endpoint) => ({
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
create: async (data) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${BASE_URL}/${endpoint}?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
});
|
||||
|
||||
// P01
|
||||
export const spbuService = createService('01/backend/api/spbu.php');
|
||||
export const jalanService = createService('01/backend/api/jalan.php');
|
||||
export const kavlingService = createService('01/backend/api/kavling.php');
|
||||
|
||||
// P02
|
||||
export const rumahIbadahService = createService('02/backend/api/rumah_ibadah.php');
|
||||
export const wargaMiskinService = createService('02/backend/api/warga_miskin.php');
|
||||
export const haversineService = {
|
||||
getDalamRadius: async (id, radius) => {
|
||||
const res = await fetch(`${BASE_URL}/02/backend/api/haversine.php?rumah_ibadah_id=${id}&radius_km=${radius}`);
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export const rumahIbadahService = {
|
||||
getAll: async () => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php`);
|
||||
return await res.json();
|
||||
},
|
||||
save: async (data) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php`, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
});
|
||||
return await res.json();
|
||||
},
|
||||
delete: async (id) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php?id=${id}`, { method: 'DELETE' });
|
||||
return await res.json();
|
||||
},
|
||||
getJangkauan: async (id, radius = 1) => {
|
||||
const res = await fetch(`${CONFIG.BASE_URL}/rumah_ibadah.php?action=jangkauan&id=${id}&radius=${radius}`);
|
||||
return await res.json();
|
||||
}
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user