fix : bug tidak ada form

01/index.html

@@ -55,6 +55,7 @@
         }
     });
 
+    // Menentukan gaya warna jalan berdasarkan status
     function gaya_jalan(status) {
         if (status === 'Nasional') return { color: 'red', weight: 6 };
         if (status === 'Provinsi') return { color: 'blue', weight: 4 };
@@ -63,8 +64,9 @@
 
     let sedang_memproses = false;
 
-    // Menangani penggambaran objek
+    // Menangani event penggambaran objek spasial baru dari Leaflet-Geoman
     map.on('pm:create', function(e) {
+        // Mencegah klik ganda yang memicu pembuatan layer ganda bertumpuk
         if (sedang_memproses) { map.removeLayer(e.layer); return; }
         sedang_memproses = true;
         setTimeout(() => { sedang_memproses = false; }, 500);
@@ -75,8 +77,10 @@
 
         if (shape === 'Line') {
             const geojson_mentah = layer.toGeoJSON();
+            // Melakukan escape karakter kutip agar string JSON aman disuntikkan ke atribut onclick HTML
             const geo_data = JSON.stringify(geojson_mentah.geometry).replace(/"/g, '"');
             const panjang_meter = turf.length(geojson_mentah, {units: 'kilometers'}) * 1000;
+            
             popup_content = `<div class="form-container"><h4>Tambah Jalan Baru</h4>
                 <input type="text" id="nama_jln" placeholder="Nama Jalan">
                 <select id="stat_jln"><option value="Nasional">Nasional</option><option value="Provinsi">Provinsi</option><option value="Kabupaten">Kabupaten</option></select>
@@ -87,6 +91,7 @@
             const geojson_mentah = layer.toGeoJSON();
             const geo_data = JSON.stringify(geojson_mentah.geometry).replace(/"/g, '&quot;');
             const luas_meter_p = turf.area(geojson_mentah);
+            
             popup_content = `<div class="form-container"><h4>Tambah Persil Baru</h4>
                 <input type="text" id="no_psl" placeholder="Nomor Persil">
                 <select id="stat_psl"><option value="SHM">SHM</option><option value="HGB">HGB</option><option value="HGU">HGU</option><option value="HP">HP</option></select>
@@ -95,9 +100,6 @@
             layer.setStyle({fillColor: 'yellow', fillOpacity: 0.5, color: 'black'});
         }
         else if (shape === 'Marker') {
-            /* * Menarik titik presisi lintang dan bujur langsung dari objek Leaflet.
-             * Ini diperlukan karena tabel spbu_locations meminta kolom lat dan lng terpisah, bukan geojson.
-             */
             const titik_kordinat = layer.getLatLng();
             popup_content = `<div class="form-container"><h4>Tambah SPBU Baru</h4>
                 <input type="text" id="nama_spbu" placeholder="Nama SPBU">
@@ -113,7 +115,7 @@
         setTimeout(() => { layer.openPopup(); }, 100);
     });
 
-    // Menghapus data terpilih
+    // Menangani event penghapusan data spasial
     map.on('pm:remove', function(e) {
         const layer = e.layer;
         if (layer.db_id && layer.db_type) {
@@ -124,6 +126,9 @@
                     body: JSON.stringify({ id: layer.db_id, type: layer.db_type })
                 }).then(r => r.json()).then(res => {
                     if(res.status !== 'success') { alert('Gagal Hapus: ' + res.message); location.reload(); }
+                }).catch(err => {
+                    alert('Kesalahan jaringan saat menghapus data.');
+                    console.error(err);
                 });
             } else {
                 location.reload(); 
@@ -131,9 +136,11 @@
         }
     });
 
-    // Mengirim payload ke server PHP
+    // Mengumpulkan dan mengirimkan payload data baru ke server PHP
     window.simpan_baru = function(type, hitungan, geo, lat = null, lng = null) {
         let payload = { type: type };
+        
+        // Membentuk struktur data (payload) berdasarkan tipe objek
         if (type === 'jalan') {
             payload.nama = document.getElementById('nama_jln').value; 
             payload.status = document.getElementById('stat_jln').value; 
@@ -152,7 +159,18 @@
             payload.lng = lng;
         }
 
-        fetch('simpan_feature.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+        // Memvalidasi apakah kolom nama sudah diisi sebelum menghubungi server
+        if (!payload.nama || payload.nama.trim() === '') {
+            alert("Informasi nama/identitas wajib diisi!");
+            return;
+        }
+
+        // Mengeksekusi permintaan pengiriman data asinkronus ke API backend
+        fetch('simpan_feature.php', { 
+            method: 'POST', 
+            headers: { 'Content-Type': 'application/json' }, 
+            body: JSON.stringify(payload) 
+        })
         .then(r => r.json()).then(res => {
             if(res.status === 'success') { 
                 alert('Berhasil Disimpan!'); 
@@ -161,73 +179,53 @@
                 alert('Gagal: ' + res.message); 
                 console.error(res);
             }
+        }).catch(err => {
+            alert('Terjadi kesalahan jaringan atau server tidak merespons.');
+            console.error('Catch Error:', err);
         });
     };
 
-    // Memperbarui atribut yang ada
+    // Memperbarui atribut data yang sudah ada
     window.update_data = function(type, id) {
+        let nama_baru = document.getElementById('edit_nama').value;
+        if (!nama_baru || nama_baru.trim() === '') {
+            alert("Nama tidak boleh kosong!");
+            return;
+        }
+
         let payload = { 
             type: type, 
             id: id,
-            nama: document.getElementById('edit_nama').value,
+            nama: nama_baru,
             status: document.getElementById('edit_status').value
         };
         
-        fetch('edit_feature.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+        fetch('edit_feature.php', { 
+            method: 'POST', 
+            headers: { 'Content-Type': 'application/json' }, 
+            body: JSON.stringify(payload) 
+        })
         .then(r => r.json()).then(res => {
-            if(res.status === 'success') { alert('Berhasil Diupdate!'); location.reload(); } else alert('Gagal Update: ' + res.message);
+            if(res.status === 'success') { 
+                alert('Berhasil Diupdate!'); 
+                location.reload(); 
+            } else {
+                alert('Gagal Update: ' + res.message);
+            }
+        }).catch(err => {
+            alert('Gagal menghubungi server untuk pembaharuan.');
+            console.error('Catch Error:', err);
         });
     };
 
-
+    // Merender seluruh data spasial dari pangkalan data ke peta Leaflet
-    function show_jalan_form(layer, geojson_string) {
-        const form_html = `
-            <div style="padding: 10px; min-width: 200px;">
-                <h4 style="margin-top:0;">Tambah Jalan Baru</h4>
-                <label>Nama Jalan</label><br>
-                <input type='text' id='nama_jalan' style='width:100%; margin-bottom:8px;' placeholder='Masukkan nama jalan'><br>
-                <label>Status Jalan</label><br>
-                <select id='status_jalan' style='width:100%; margin-bottom:12px;'>
-                    <option value='Nasional'>Nasional</option>
-                    <option value='Provinsi'>Provinsi</option>
-                    <option value='Kota'>Kota</option>
-                </select><br>
-                <button onclick='save_jalan_data(${geojson_string})' style='width:100%; background-color:#4CAF50; color:white; border:none; padding:6px; cursor:pointer;'>Simpan Jalan</button>
-            </div>
-        `;
-        layer.bindPopup(form_html).openPopup();
-    }
-
-    /**
-    * Menampilkan formulir sembul untuk pengisian data bidang persil tanah baru
-    * @param {Object} layer - Objek layer Leaflet Draw
-    * @param {String} geojson_string - String representasi spasial GeoJSON
-    * @param {Number} area_size - Luas area hasil kalkulasi sistem
-    */
-    function show_persil_form(layer, geojson_string, area_size) {
-        const form_html = `
-            <div style="padding: 10px; min-width: 220px;">
-                <h4 style="margin-top:0;">Tambah Persil Baru</h4>
-                <label>Nomor Persil</label><br>
-                <input type='text' id='nomor_persil' style='width:100%; margin-bottom:8px;' placeholder='Masukkan nomor persil'><br>
-                <label>Jenis Hak Kepemilikan</label><br>
-                <select id='jenis_hak' style='width:100%; margin-bottom:8px;'>
-                    <option value='SHM'>SHM</option>
-                    <option value='HGB'>HGB</option>
-                </select><br>
-                <p style='margin: 8px 0;'>Luas: <strong>${area_size.toFixed(2)} m²</strong></p>
-                <button onclick='save_persil_data(${geojson_string}, ${area_size})' style='width:100%; background-color:#4CAF50; color:white; border:none; padding:6px; cursor:pointer;'>Simpan Persil</button>
-            </div>
-        `;
-        layer.bindPopup(form_html).openPopup();
-    }
-
-    // Merender data dari database
     function muat_data_feature() {
-        fetch('tampil_feature.php').then(response => response.json()).then(res => {
+        fetch('tampil_feature.php')
+        .then(response => response.json())
+        .then(res => {
             if (res.status === "success") {
                 
-                // Jalan
+                // Merender data garis jalan
                 res.jalan.forEach(j => {
                     const geojson_obj = JSON.parse(j.geojson);
                     L.geoJSON(geojson_obj, {
@@ -251,7 +249,7 @@
                     }).addTo(map);
                 });
 
-                // Persil
+                // Merender data poligon persil tanah
                 res.persil.forEach(p => {
                     const geojson_obj = JSON.parse(p.geojson);
                     L.geoJSON(geojson_obj, {
@@ -276,7 +274,7 @@
                     }).addTo(map);
                 });
 
-                // SPBU
+                // Merender titik lokasi SPBU ke dalam grup layer yang berbeda
                 res.spbu.forEach(s => {
                     const spbu_marker = L.marker([parseFloat(s.lat), parseFloat(s.lng)]);
                     spbu_marker.db_id = s.id; 
@@ -305,12 +303,13 @@
                 layer_spbu_24.addTo(map);
                 layer_spbu_non_24.addTo(map);
             }
-          else {
+            else {
-            // TAMBAHKAN DUA BARIS INI: Menampilkan peringatan jika database gagal ditarik
+                alert("Gagal memuat data peta: " + res.message);
-            alert("Gagal memuat data peta: " + res.message);
+                console.error("Kesalahan Sistem:", res.message);
-            console.error("Kesalahan Sistem:", res.message);
+            }
-        }
+        }).catch(err => {
-    });
+            console.error('Kesalahan Jaringan: Gagal merender data peladen', err);
+        });
     }
 
     muat_data_feature();