Initial commit - Fresh Clean Code

LinkWebsite_PolylineAndPolygon_Marker.txt

@@ -0,0 +1 @@
+https://sigwebsite.free.je/PolylineAndPolygon_Marker/

api.php

@@ -0,0 +1,353 @@
+<?php
+// api.php
+require_once 'config.php';
+
+$method = $_SERVER['REQUEST_METHOD'];
+$type = isset($_GET['type']) ? $_GET['type'] : '';
+$action = isset($_GET['action']) ? $_GET['action'] : '';
+
+// ========== SPBU CRUD ==========
+if ($type === 'spbu') {
+    if ($method === 'GET' && $action === 'getAll') {
+        $result = $conn->query("SELECT * FROM spbu ORDER BY created_at DESC");
+        $data = [];
+        while ($row = $result->fetch_assoc()) {
+            $data[] = $row;
+        }
+        sendResponse(true, 'Data SPBU berhasil diambil', $data);
+    }
+    elseif ($method === 'POST' && $action === 'create') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("INSERT INTO spbu (nama, no_spbu, tipe, latitude, longitude) VALUES (?, ?, ?, ?, ?)");
+        $stmt->bind_param("sssdd", $input['nama'], $input['no_spbu'], $input['tipe'], $input['latitude'], $input['longitude']);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'SPBU berhasil ditambahkan', ['id' => $conn->insert_id]);
+        } else {
+            sendResponse(false, 'Gagal menambahkan SPBU: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'PUT' && $action === 'update') {
+        $id = intval($_GET['id']);
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("UPDATE spbu SET nama=?, no_spbu=?, tipe=?, latitude=?, longitude=? WHERE id=?");
+        $stmt->bind_param("sssddi", $input['nama'], $input['no_spbu'], $input['tipe'], $input['latitude'], $input['longitude'], $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'SPBU berhasil diupdate');
+        } else {
+            sendResponse(false, 'Gagal mengupdate SPBU');
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        $id = intval($_GET['id']);
+        $stmt = $conn->prepare("DELETE FROM spbu WHERE id=?");
+        $stmt->bind_param("i", $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'SPBU berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus SPBU');
+        }
+        $stmt->close();
+    }
+}
+
+// ========== JALAN CRUD ==========
+elseif ($type === 'jalan') {
+    if ($method === 'GET' && $action === 'getAll') {
+        $result = $conn->query("SELECT * FROM jalan ORDER BY created_at DESC");
+        $data = [];
+        while ($row = $result->fetch_assoc()) {
+            $row['coordinates'] = json_decode($row['coordinates'], true);
+            $data[] = $row;
+        }
+        sendResponse(true, 'Data jalan berhasil diambil', $data);
+    }
+    elseif ($method === 'POST' && $action === 'create') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        $coordinates = json_encode($input['coordinates']);
+        $stmt = $conn->prepare("INSERT INTO jalan (nama, status, panjang, coordinates) VALUES (?, ?, ?, ?)");
+        $stmt->bind_param("ssis", $input['nama'], $input['status'], $input['panjang'], $coordinates);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Jalan berhasil ditambahkan', ['id' => $conn->insert_id]);
+        } else {
+            sendResponse(false, 'Gagal menambahkan jalan');
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'PUT' && $action === 'update') {
+        $id = intval($_GET['id']);
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("UPDATE jalan SET nama=?, status=? WHERE id=?");
+        $stmt->bind_param("ssi", $input['nama'], $input['status'], $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Jalan berhasil diupdate');
+        } else {
+            sendResponse(false, 'Gagal mengupdate jalan');
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        $id = intval($_GET['id']);
+        $stmt = $conn->prepare("DELETE FROM jalan WHERE id=?");
+        $stmt->bind_param("i", $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Jalan berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus jalan');
+        }
+        $stmt->close();
+    }
+}
+
+// ========== PARSIL CRUD ==========
+elseif ($type === 'parsil') {
+    if ($method === 'GET' && $action === 'getAll') {
+        $result = $conn->query("SELECT * FROM parsil_tanah ORDER BY created_at DESC");
+        $data = [];
+        while ($row = $result->fetch_assoc()) {
+            $row['coordinates'] = json_decode($row['coordinates'], true);
+            $data[] = $row;
+        }
+        sendResponse(true, 'Data parsil berhasil diambil', $data);
+    }
+    elseif ($method === 'POST' && $action === 'create') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        $coordinates = json_encode($input['coordinates']);
+        $stmt = $conn->prepare("INSERT INTO parsil_tanah (nama, status, luas, coordinates) VALUES (?, ?, ?, ?)");
+        $stmt->bind_param("ssis", $input['nama'], $input['status'], $input['luas'], $coordinates);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Parsil tanah berhasil ditambahkan', ['id' => $conn->insert_id]);
+        } else {
+            sendResponse(false, 'Gagal menambahkan parsil');
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'PUT' && $action === 'update') {
+        $id = intval($_GET['id']);
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("UPDATE parsil_tanah SET nama=?, status=? WHERE id=?");
+        $stmt->bind_param("ssi", $input['nama'], $input['status'], $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Parsil tanah berhasil diupdate');
+        } else {
+            sendResponse(false, 'Gagal mengupdate parsil');
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        $id = intval($_GET['id']);
+        $stmt = $conn->prepare("DELETE FROM parsil_tanah WHERE id=?");
+        $stmt->bind_param("i", $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Parsil tanah berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus parsil');
+        }
+        $stmt->close();
+    }
+       
+}
+
+// ========== JALAN RUSAK CRUD ==========
+elseif ($type === 'rusak') {
+
+    // ================= GET ALL =================
+    if ($method === 'GET' && $action === 'getAll') {
+        $result = $conn->query("SELECT * FROM jalan_rusak ORDER BY created_at DESC");
+        $data = [];
+
+        while ($row = $result->fetch_assoc()) {
+            // 🔥 penting: kasih full path gambar
+            $row['foto'] = 'uploads/' . $row['foto'];
+            $data[] = $row;
+        }
+
+        sendResponse(true, 'Data jalan rusak berhasil diambil', $data);
+    }
+
+    // ================= CREATE (UPLOAD GAMBAR) =================
+    elseif ($method === 'POST' && $action === 'create') {
+
+        $nama = $_POST['nama'];
+        $latitude = $_POST['latitude'];
+        $longitude = $_POST['longitude'];
+
+        // 🔥 HANDLE UPLOAD
+        if (!isset($_FILES['foto'])) {
+            sendResponse(false, 'Foto wajib diupload');
+            exit;
+        }
+
+        $file = $_FILES['foto'];
+        $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
+        $filename = 'rusak_' . time() . '.' . $ext;
+
+        $uploadDir = 'uploads/';
+        if (!is_dir($uploadDir)) {
+            mkdir($uploadDir, 0777, true);
+        }
+
+        $targetPath = $uploadDir . $filename;
+
+        if (!move_uploaded_file($file['tmp_name'], $targetPath)) {
+            sendResponse(false, 'Gagal upload gambar');
+            exit;
+        }
+
+        // 🔥 SIMPAN KE DB
+        $stmt = $conn->prepare("INSERT INTO jalan_rusak (nama, latitude, longitude, foto) VALUES (?, ?, ?, ?)");
+        $stmt->bind_param("sdds", $nama, $latitude, $longitude, $filename);
+
+        if ($stmt->execute()) {
+            sendResponse(true, 'Data jalan rusak berhasil ditambahkan');
+        } else {
+            sendResponse(false, 'Gagal menyimpan data');
+        }
+
+        $stmt->close();
+    }
+
+    // ================= DELETE =================
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        $id = intval($_GET['id']);
+
+        // 🔥 ambil nama file dulu
+        $result = $conn->query("SELECT foto FROM jalan_rusak WHERE id=$id");
+        $row = $result->fetch_assoc();
+
+        if ($row) {
+            $filePath = 'uploads/' . $row['foto'];
+
+            if (file_exists($filePath)) {
+                unlink($filePath); // hapus file
+            }
+        }
+
+        $stmt = $conn->prepare("DELETE FROM jalan_rusak WHERE id=?");
+        $stmt->bind_param("i", $id);
+
+        if ($stmt->execute()) {
+            sendResponse(true, 'Data berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus');
+        }
+
+        $stmt->close();
+    }
+}
+
+// ========== MASJID CRUD ==========
+elseif ($type === 'masjid') {
+    if ($method === 'GET' && $action === 'getAll') {
+        $result = $conn->query("SELECT * FROM masjid ORDER BY created_at DESC");
+        $data = [];
+        while ($row = $result->fetch_assoc()) {
+            $data[] = $row;
+        }
+        sendResponse(true, 'Data masjid berhasil diambil', $data);
+    }
+    elseif ($method === 'POST' && $action === 'create') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("INSERT INTO masjid (nama, alamat, latitude, longitude, radius) VALUES (?, ?, ?, ?, ?)");
+        $stmt->bind_param("ssddi", $input['nama'], $input['alamat'], $input['latitude'], $input['longitude'], $input['radius']);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Masjid berhasil ditambahkan', ['id' => $conn->insert_id]);
+        } else {
+            sendResponse(false, 'Gagal menambahkan masjid: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'PUT' && $action === 'update') {
+        $id = intval($_GET['id']);
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("UPDATE masjid SET nama=?, alamat=?, latitude=?, longitude=?, radius=? WHERE id=?");
+        $stmt->bind_param("ssddii", $input['nama'], $input['alamat'], $input['latitude'], $input['longitude'], $input['radius'], $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Masjid berhasil diupdate');
+        } else {
+            sendResponse(false, 'Gagal mengupdate masjid');
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        $id = intval($_GET['id']);
+        $stmt = $conn->prepare("DELETE FROM masjid WHERE id=?");
+        $stmt->bind_param("i", $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Masjid berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus masjid');
+        }
+        $stmt->close();
+    }
+}
+
+
+
+// ========== ORANG BERKEBUTUHAN CRUD ==========
+elseif ($type === 'orang') {
+    if ($method === 'GET' && $action === 'getAll') {
+        $result = $conn->query("SELECT o.*, m.nama as masjid_pengampu_nama 
+                                FROM orang_berkebutuhan o 
+                                LEFT JOIN masjid m ON o.masjid_pengampu_id = m.id 
+                                ORDER BY o.created_at DESC");
+        $data = [];
+        while ($row = $result->fetch_assoc()) {
+            $data[] = $row;
+        }
+        sendResponse(true, 'Data orang berkebutuhan berhasil diambil', $data);
+    }
+    elseif ($method === 'POST' && $action === 'create') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        
+        // Sederhanakan dulu, tanpa auto assign
+        $stmt = $conn->prepare("INSERT INTO orang_berkebutuhan (nama, no_kk, alamat, latitude, longitude, status) VALUES (?, ?, ?, ?, ?, 'merah')");
+        $stmt->bind_param("ssssd", $input['nama'], $input['no_kk'], $input['alamat'], $input['latitude'], $input['longitude']);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Orang berkebutuhan berhasil ditambahkan', ['id' => $conn->insert_id]);
+        } else {
+            sendResponse(false, 'Gagal menambahkan: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'PUT' && $action === 'update') {
+        $id = intval($_GET['id']);
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("UPDATE orang_berkebutuhan SET nama=?, no_kk=?, alamat=?, latitude=?, longitude=? WHERE id=?");
+        $stmt->bind_param("ssssdi", $input['nama'], $input['no_kk'], $input['alamat'], $input['latitude'], $input['longitude'], $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Orang berkebutuhan berhasil diupdate');
+        } else {
+            sendResponse(false, 'Gagal mengupdate');
+        }
+        $stmt->close();
+    }
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        $id = intval($_GET['id']);
+        $stmt = $conn->prepare("DELETE FROM orang_berkebutuhan WHERE id=?");
+        $stmt->bind_param("i", $id);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Data berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus');
+        }
+        $stmt->close();
+    }
+}
+?>

config.php

@@ -0,0 +1,41 @@
+<?php
+// config.php
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
+header('Access-Control-Allow-Headers: Content-Type');
+
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit();
+}
+
+$host = 'localhost';
+$username = 'root';
+$password = '';
+$database = 'gis_management';
+$port = 3307; // Ganti ke 3307 jika XAMPP Anda menggunakan port 3307
+
+$conn = new mysqli($host, $username, $password, $database, $port);
+
+if ($conn->connect_error) {
+    die(json_encode([
+        'success' => false,
+        'message' => 'Koneksi database gagal: ' . $conn->connect_error
+    ]));
+}
+
+$conn->set_charset("utf8");
+
+function sendResponse($success, $message, $data = null) {
+    $response = [
+        'success' => $success,
+        'message' => $message
+    ];
+    if ($data !== null) {
+        $response['data'] = $data;
+    }
+    echo json_encode($response);
+    exit;
+}
+?>

index.html

@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GIS Mandiri - Manajemen Jalan & Parsil Tanah</title>
+    
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
+    
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f2f5; }
+        #map { height: 75vh; width: 100%; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+        .sidebar { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); height: 75vh; overflow-y: auto; }
+        .nav-tabs { border-bottom: 2px solid #dee2e6; margin-bottom: 20px; }
+        .nav-tabs .nav-link { border: none; color: #495057; font-weight: 500; padding: 10px 20px; transition: all 0.3s; }
+        .nav-tabs .nav-link:hover { color: #0d6efd; }
+        .nav-tabs .nav-link.active { color: #0d6efd; border-bottom: 2px solid #0d6efd; background: transparent; }
+        .form-group { margin-bottom: 15px; }
+        .form-group label { font-weight: 600; margin-bottom: 5px; display: block; color: #495057; }
+        .form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; }
+        .btn-primary, .btn-danger { padding: 8px 16px; font-size: 14px; border-radius: 6px; margin-right: 8px; margin-top: 5px; }
+        .data-list { max-height: 380px; overflow-y: auto; margin-top: 20px; }
+        .data-item { background: #f8f9fa; padding: 12px; margin-bottom: 10px; border-radius: 8px; cursor: pointer; transition: all 0.3s; border-left: 4px solid #0d6efd; }
+        .data-item:hover { background: #e9ecef; transform: translateX(5px); }
+        .data-item strong { display: block; color: #0d6efd; margin-bottom: 5px; }
+        .data-item small { color: #6c757d; font-size: 12px; display: block; }
+        .draw-controls { margin-top: 10px; padding: 10px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .draw-status { background: #e3f2fd; padding: 10px; border-radius: 6px; margin-top: 10px; font-size: 14px; border-left: 4px solid #2196f3; }
+        .leaflet-container.drawing-mode { cursor: crosshair !important; }
+        
+        /* Popup Modern UI Style */
+        .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
+        .leaflet-popup-content { margin: 0 !important; width: 240px; }
+        .popup-header { padding: 12px; color: white; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
+        .popup-body { padding: 10px 12px; font-size: 13px; color: #444; }
+        .popup-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
+        .popup-label { color: #888; }
+        .popup-value { font-weight: 500; }
+        .popup-footer { display: flex; border-top: 1px solid #eee; }
+        .popup-btn { flex: 1; padding: 8px; border: none; font-size: 12px; cursor: pointer; transition: 0.2s; }
+        .popup-btn-edit { background: #fff3cd; color: #856404; }
+        .popup-btn-edit:hover { background: #ffe69c; }
+        .popup-btn-delete { background: #f8d7da; color: #842029; }
+        .popup-btn-delete:hover { background: #f1aeb5; }
+    </style>
+</head>
+<body>
+    <div class="container-fluid p-4">
+        <h2 class="mb-4">
+            <i class="fas fa-map-marked-alt"></i>
+            GIS Mandiri - Manajemen Jalan & Parsil Tanah
+        </h2>
+        
+        <div class="row">
+            <div class="col-md-8">
+                <div id="map"></div>
+                <div class="draw-controls">
+                    <button class="btn btn-primary btn-sm" onclick="startDrawingLine()">
+                        <i class="fas fa-draw-polygon"></i> Gambar Jalan (Polyline)
+                    </button>
+                    <button class="btn btn-warning btn-sm text-dark" onclick="startDrawingPolygon()">
+                        <i class="fas fa-vector-square"></i> Gambar Parsil Tanah (Polygon)
+                    </button>
+                </div>
+                <div id="drawStatus" class="draw-status" style="display:none;"></div>
+            </div>
+
+            <div class="col-md-4">
+                <ul class="nav nav-tabs" id="gisTab" role="tablist">
+                    <li class="nav-item">
+                        <a class="nav-link active" data-bs-toggle="tab" href="#jalanTab">
+                            <i class="fas fa-road"></i> Jalan
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" data-bs-toggle="tab" href="#parsilTab">
+                            <i class="fas fa-landmark"></i> Parsil Tanah
+                        </a>
+                    </li>
+                </ul>
+
+                <div class="tab-content">
+                    <div class="tab-pane fade show active" id="jalanTab">
+                        <div class="sidebar">
+                            <h5><i class="fas fa-road"></i> Form Jalan</h5>
+                            <form id="jalanForm">
+                                <input type="hidden" id="jalanId">
+                                <div class="form-group">
+                                    <label><i class="fas fa-sign"></i> Nama Jalan</label>
+                                    <input type="text" id="namaJalan" class="form-control" placeholder="Contoh: Jalan Ahmad Yani" required>
+                                </div>
+                                <div class="form-group">
+                                    <label><i class="fas fa-tag"></i> Status Jalan</label>
+                                    <select id="statusJalan" class="form-control">
+                                        <option value="nasional">🔴 Jalan Nasional (Merah)</option>
+                                        <option value="provinsi">🟠 Jalan Provinsi (Orange)</option>
+                                        <option value="kabupaten">🔵 Jalan Kabupaten (Biru)</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label><i class="fas fa-ruler"></i> Panjang Jalan (meter)</label>
+                                    <input type="text" id="panjangJalan" class="form-control" readonly placeholder="Akan dihitung otomatis">
+                                </div>
+                                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
+                                <button type="button" class="btn btn-danger" onclick="cancelDrawing(); resetJalanForm();"><i class="fas fa-times"></i> Batal</button>
+                            </form>
+                            <hr>
+                            <h6><i class="fas fa-list"></i> Daftar Jalan</h6>
+                            <div class="input-group input-group-sm mb-3">
+                                <span class="input-group-text bg-primary text-white"><i class="fas fa-search"></i></span>
+                                <input type="text" id="searchJalan" class="form-control" placeholder="Cari Jalan...">
+                            </div>
+                            <div id="jalanList" class="data-list"></div>
+                        </div>
+                    </div>
+
+                    <div class="tab-pane fade" id="parsilTab">
+                        <div class="sidebar">
+                            <h5><i class="fas fa-vector-square"></i> Form Parsil Tanah</h5>
+                            <form id="parsilForm">
+                                <input type="hidden" id="parsilId">
+                                <div class="form-group">
+                                    <label><i class="fas fa-home"></i> Nama Kavling</label>
+                                    <input type="text" id="namaParcil" class="form-control" placeholder="Contoh: Kavling Citra Garden" required>
+                                </div>
+                                <div class="form-group">
+                                    <label><i class="fas fa-certificate"></i> Status Kepemilikan</label>
+                                    <select id="statusKepemilikan" class="form-control">
+                                        <option value="SHM">🟢 SHM (Hak Milik)</option>
+                                        <option value="HGB">🔵 HGB (Hak Guna Bangunan)</option>
+                                        <option value="HGU">🟠 HGU (Hak Guna Usaha)</option>
+                                        <option value="HP">🟣 HP (Hak Pakai)</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label><i class="fas fa-chart-area"></i> Luas Tanah (m²)</label>
+                                    <input type="text" id="luasTanah" class="form-control" readonly placeholder="Akan dihitung otomatis">
+                                </div>
+                                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
+                                <button type="button" class="btn btn-danger" onclick="cancelDrawing(); resetParcilForm();"><i class="fas fa-times"></i> Batal</button>
+                            </form>
+                            <hr>
+                            <h6><i class="fas fa-list"></i> Daftar Parsil Tanah</h6>
+                            <div class="input-group input-group-sm mb-3">
+                                <span class="input-group-text bg-primary text-white"><i class="fas fa-search"></i></span>
+                                <input type="text" id="searchParcil" class="form-control" placeholder="Cari Parsil...">
+                            </div>
+                            <div id="parsilList" class="data-list"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+<script>
+        // Endpoint API disesuaikan ke file api.php bawaan Anda
+        const API_URL = 'api.php'; 
+
+        // Inisialisasi Peta (Default Lokasi Pontianak)
+        const map = L.map('map').setView([-0.026330, 109.342519], 13);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Feature Group untuk menampung gambar dari database
+        const jalanLayer = L.featureGroup().addTo(map);
+        const parsilLayer = L.featureGroup().addTo(map);
+
+        // Handler untuk Leaflet Draw
+        let currentDrawHandler = null;
+        let temporaryCoordinates = null;
+        let isEditingMode = false;
+
+        // Warna styling spasial bawaan sistem asli
+        const statusColors = { nasional: '#dc3545', provinsi: '#fd7e14', kabupaten: '#0d6efd' };
+        
+        // Menyesuaikan dengan value option select di database Anda: SHM, HGB, HGU, HP
+        const parsilColors = { SHM: '#28a745', HGB: '#007bff', HGU: '#ffc107', HP: '#6f42c1' };
+
+        // ==================== LOAD DATA FUNCTION ====================
+        function loadJalan() {
+            fetch(`${API_URL}?type=jalan&action=getAll`)
+                .then(res => res.json())
+                .then(res => {
+                    if(!res.success) return;
+                    jalanLayer.clearLayers();
+                    const listContainer = document.getElementById('jalanList');
+                    listContainer.innerHTML = '';
+                    
+                    const query = document.getElementById('searchJalan').value.toLowerCase();
+
+                    res.data.forEach(item => {
+                        if(query && !item.nama.toLowerCase().includes(query) && !item.status.toLowerCase().includes(query)) return;
+
+                        const coords = item.coordinates; 
+                        const polyline = L.polyline(coords, {
+                            color: statusColors[item.status] || '#6c757d',
+                            weight: 5,
+                            opacity: 0.8
+                        }).addTo(jalanLayer);
+
+                        const coordsString = JSON.stringify(coords);
+
+                        const popupContent = `
+                            <div class="popup-header" style="background:${statusColors[item.status] || '#6c757d'}">
+                                <i class="fas fa-road"></i> ${item.nama}
+                            </div>
+                            <div class="popup-body">
+                                <div class="popup-row"><span class="popup-label">Status:</span><span class="popup-value">${item.status.toUpperCase()}</span></div>
+                                <div class="popup-row"><span class="popup-label">Panjang:</span><span class="popup-value">${parseFloat(item.panjang).toFixed(1)} m</span></div>
+                            </div>
+                            <div class="popup-footer">
+                                <button class="popup-btn popup-btn-edit" onclick="editJalan(${item.id}, '${escapeHtml(item.nama)}', '${item.status}', ${item.panjang}, '${escapeHtml(coordsString)}')"><i class="fas fa-edit"></i> Edit</button>
+                                <button class="popup-btn popup-btn-delete" onclick="deleteData('jalan', ${item.id})"><i class="fas fa-trash"></i> Hapus</button>
+                            </div>`;
+                        polyline.bindPopup(popupContent);
+
+                        const div = document.createElement('div');
+                        div.className = 'data-item';
+                        div.style.borderLeftColor = statusColors[item.status] || '#6c757d';
+                        div.innerHTML = `<strong>${item.nama}</strong><small>Status: ${item.status.toUpperCase()} | ${parseFloat(item.panjang).toFixed(1)} m</small>`;
+                        div.onclick = () => { map.fitBounds(polyline.getBounds()); polyline.openPopup(); };
+                        listContainer.appendChild(div);
+                    });
+                }).catch(err => console.error("Gagal memuat data jalan:", err));
+        }
+
+        function loadParsil() {
+            fetch(`${API_URL}?type=parsil&action=getAll`)
+                .then(res => res.json())
+                .then(res => {
+                    // Pengecekan debug untuk melihat data di Console Log F12 Browser
+                    console.log("Data Parsil dari Database:", res);
+
+                    if(!res.success) {
+                        console.error("Gagal mengambil data parsil:", res.message);
+                        return;
+                    }
+                    
+                    parsilLayer.clearLayers();
+                    const listContainer = document.getElementById('parsilList');
+                    listContainer.innerHTML = '';
+                    
+                    const query = document.getElementById('searchParcil').value.toLowerCase();
+
+                    res.data.forEach(item => {
+                        // SINKRONISASI UTAMA: api.php Anda mengembalikan field bernama 'nama' dan 'status'
+                        const namaTanah = item.nama || 'Tanpa Nama';
+                        const statusTanah = item.status || 'SHM';
+
+                        if(query && !namaTanah.toLowerCase().includes(query) && !statusTanah.toLowerCase().includes(query)) return;
+
+                        let coords = item.coordinates;
+                        if (!coords || coords.length === 0) return;
+
+                        // PROTEKSI STRUKTUR KOORDINAT POLYGON LEAFLET:
+                        // Jika koordinat dari database berbentuk array datar [[lat,lng], [lat,lng]], 
+                        // Leaflet Polygon akan error. Kode ini otomatis membungkusnya menjadi [[[lat,lng], [lat,lng]]]
+                        if (Array.isArray(coords) && coords.length > 0 && !Array.isArray(coords[0][0])) {
+                            coords = [coords];
+                        }
+
+                        try {
+                            // Menggambar Poligon Wilayah Tanah di Leaflet
+                            const polygon = L.polygon(coords, {
+                                color: parsilColors[statusTanah] || '#6c757d',
+                                fillColor: parsilColors[statusTanah] || '#6c757d',
+                                fillOpacity: 0.4,
+                                weight: 2
+                            }).addTo(parsilLayer);
+
+                            const coordsString = JSON.stringify(item.coordinates);
+
+                            // Bind Popup Spasial Parsil
+                            const popupContent = `
+                                <div class="popup-header" style="background:${parsilColors[statusTanah] || '#6c757d'}">
+                                    <i class="fas fa-landmark"></i> ${namaTanah}
+                                </div>
+                                <div class="popup-body">
+                                    <div class="popup-row"><span class="popup-label">Kepemilikan:</span><span class="popup-value">${statusTanah}</span></div>
+                                    <div class="popup-row"><span class="popup-label">Luas:</span><span class="popup-value">${parseFloat(item.luas).toFixed(1)} m²</span></div>
+                                </div>
+                                <div class="popup-footer">
+                                    <button class="popup-btn popup-btn-edit" onclick="editParsil(${item.id}, '${escapeHtml(namaTanah)}', '${statusTanah}', ${item.luas}, '${escapeHtml(coordsString)}')"><i class="fas fa-edit"></i> Edit</button>
+                                    <button class="popup-btn popup-btn-delete" onclick="deleteData('parsil', ${item.id})"><i class="fas fa-trash"></i> Hapus</button>
+                                </div>`;
+                            polygon.bindPopup(popupContent);
+
+                            // Render ke List Sidebar Kiri
+                            const div = document.createElement('div');
+                            div.className = 'data-item';
+                            div.style.borderLeftColor = parsilColors[statusTanah] || '#6c757d';
+                            div.innerHTML = `<strong>${namaTanah}</strong><small>Hak: ${statusTanah} | Luas: ${parseFloat(item.luas).toFixed(1)} m²</small>`;
+                            div.onclick = () => { map.fitBounds(polygon.getBounds()); polygon.openPopup(); };
+                            listContainer.appendChild(div);
+                        } catch (leafletError) {
+                            console.error("Format data koordinat parsil rusak atau tidak valid untuk Leaflet:", coords, leafletError);
+                        }
+                    });
+                }).catch(err => console.error("Gagal memproses fetch parsil:", err));
+        }
+
+        // ==================== DRAWING MANAGEMENT ====================
+        function setDrawStatus(show, message = "") {
+            const el = document.getElementById('drawStatus');
+            const mapEl = document.getElementById('map');
+            if (show) {
+                el.style.display = 'block';
+                el.innerHTML = message;
+                mapEl.classList.add('drawing-mode');
+            } else {
+                el.style.display = 'none';
+                mapEl.classList.remove('drawing-mode');
+            }
+        }
+
+        function cancelDrawing() {
+            if(currentDrawHandler) {
+                currentDrawHandler.disable();
+                currentDrawHandler = null;
+            }
+            setDrawStatus(false);
+            isEditingMode = false;
+        }
+
+        function startDrawingLine() {
+            cancelDrawing();
+            document.querySelector('a[href="#jalanTab"]').click();
+            resetJalanForm();
+            
+            currentDrawHandler = new L.Draw.Polyline(map, { shapeOptions: { color: '#0d6efd', weight: 4 } });
+            currentDrawHandler.enable();
+            setDrawStatus(true, '<i class="fas fa-info-circle"></i> Mode Menggambar Jalan: Klik pada peta untuk rute jalan, klik titik terakhir untuk selesai.');
+        }
+
+        function startDrawingPolygon() {
+            cancelDrawing();
+            document.querySelector('a[href="#parsilTab"]').click();
+            resetParcilForm();
+
+            currentDrawHandler = new L.Draw.Polygon(map, { shapeOptions: { color: '#28a745', fillOpacity: 0.2 } });
+            currentDrawHandler.enable();
+            setDrawStatus(true, '<i class="fas fa-info-circle"></i> Mode Menggambar Parsil: Klik peta untuk membentuk wilayah parsil tanah.');
+        }
+
+        map.on(L.Draw.Event.CREATED, function (e) {
+            const layer = e.layer;
+            cancelDrawing();
+
+            if (e.layerType === 'polyline') {
+                const latlngs = layer.getLatLngs();
+                temporaryCoordinates = latlngs.map(ll => [ll.lat, ll.lng]);
+                
+                let distance = 0;
+                for (let i = 0; i < latlngs.length - 1; i++) {
+                    distance += latlngs[i].distanceTo(latlngs[i+1]);
+                }
+                document.getElementById('panjangJalan').value = distance.toFixed(2);
+            } 
+            else if (e.layerType === 'polygon') {
+                const latlngs = layer.getLatLngs()[0];
+                temporaryCoordinates = latlngs.map(ll => [ll.lat, ll.lng]);
+                
+                const area = L.GeometryUtil.geodesicArea(latlngs);
+                document.getElementById('luasTanah').value = area.toFixed(2);
+            }
+        });
+
+        // ==================== CRUD FORM MANAGEMENT ====================
+        document.getElementById('jalanForm').onsubmit = function(e) {
+            e.preventDefault();
+            const id = document.getElementById('jalanId').value;
+            
+            if(!id && !temporaryCoordinates) {
+                alert("Silakan gambarkan jalan pada peta terlebih dahulu!");
+                return;
+            }
+
+            const payload = {
+                nama: document.getElementById('namaJalan').value,
+                status: document.getElementById('statusJalan').value,
+                panjang: parseFloat(document.getElementById('panjangJalan').value),
+                coordinates: temporaryCoordinates
+            };
+
+            const url = id ? `${API_URL}?type=jalan&action=update&id=${id}` : `${API_URL}?type=jalan&action=create`;
+            const method = id ? 'PUT' : 'POST';
+
+            fetch(url, { method: method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+                .then(res => res.json())
+                .then(res => {
+                    alert(res.message);
+                    if(res.success) { resetJalanForm(); loadJalan(); }
+                });
+        };
+
+        document.getElementById('parsilForm').onsubmit = function(e) {
+            e.preventDefault();
+            const id = document.getElementById('parsilId').value;
+
+            if(!id && !temporaryCoordinates) {
+                alert("Silakan gambarkan batas wilayah parsil pada peta terlebih dahulu!");
+                return;
+            }
+
+            // SINKRONISASI PAYLOAD POST: Menggunakan properti 'nama' dan 'status' sesuai query api.php Anda
+            const payload = {
+                nama: document.getElementById('namaParcil').value,
+                status: document.getElementById('statusKepemilikan').value,
+                luas: parseFloat(document.getElementById('luasTanah').value),
+                coordinates: temporaryCoordinates
+            };
+
+            const url = id ? `${API_URL}?type=parsil&action=update&id=${id}` : `${API_URL}?type=parsil&action=create`;
+            const method = id ? 'PUT' : 'POST';
+
+            fetch(url, { method: method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+                .then(res => res.json())
+                .then(res => {
+                    alert(res.message);
+                    if(res.success) { resetParcilForm(); loadParcil(); }
+                });
+        };
+
+        function editJalan(id, nama, status, panjang, coordsStr) {
+            cancelDrawing();
+            isEditingMode = true;
+            document.querySelector('a[href="#jalanTab"]').click();
+            document.getElementById('jalanId').value = id;
+            document.getElementById('namaJalan').value = nama;
+            document.getElementById('statusJalan').value = status;
+            document.getElementById('panjangJalan').value = panjang;
+            temporaryCoordinates = JSON.parse(coordsStr);
+        }
+
+        function editParsil(id, nama, status, luas, coordsStr) {
+            cancelDrawing();
+            isEditingMode = true;
+            document.querySelector('a[href="#parsilTab"]').click();
+            document.getElementById('parsilId').value = id;
+            document.getElementById('namaParcil').value = nama;
+            document.getElementById('statusKepemilikan').value = status;
+            document.getElementById('luasTanah').value = luas;
+            
+            let coords = JSON.parse(coordsStr);
+            if (Array.isArray(coords) && coords.length > 0 && Array.isArray(coords[0][0])) {
+                coords = coords[0];
+            }
+            temporaryCoordinates = coords;
+        }
+
+        function deleteData(type, id) {
+            if(confirm(`Apakah Anda yakin ingin menghapus data ${type} ini?`)) {
+                fetch(`${API_URL}?type=${type}&action=delete&id=${id}`, { method: 'DELETE' })
+                    .then(res => res.json())
+                    .then(res => {
+                        alert(res.message);
+                        if(type === 'jalan') loadJalan(); else loadParsil();
+                    });
+            }
+        }
+
+        function resetJalanForm() {
+            document.getElementById('jalanForm').reset();
+            document.getElementById('jalanId').value = '';
+            temporaryCoordinates = null;
+        }
+        function resetParcilForm() {
+            document.getElementById('parsilForm').reset();
+            document.getElementById('parsilId').value = '';
+            temporaryCoordinates = null;
+        }
+        function escapeHtml(text) {
+            if (!text) return '';
+            return text.toString().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+        }
+
+        document.getElementById('searchJalan').addEventListener('input', loadJalan);
+        document.getElementById('searchParcil').addEventListener('input', loadParsil);
+
+        // ==================== INITIAL LOAD ====================
+        loadJalan();
+        loadParsil();
+    </script>
+</body>
+</html>