MuhammadIqbalMaulana/TUGAS-SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : bug tidak ada form

Browse Source
This commit is contained in:
unknown
2026-06-09 18:26:19 +07:00
parent f56f3e7759
commit b7d93c3cca
1 changed files with 64 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01/index.html
+64 -65
View File
@@ -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);
});
};
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
// Merender seluruh data spasial dari pangkalan data ke peta Leaflet
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 {
// TAMBAHKAN DUA BARIS INI: Menampilkan peringatan jika database gagal ditarik
alert("Gagal memuat data peta: " + res.message);
console.error("Kesalahan Sistem:", res.message);
}
});
else {
alert("Gagal memuat data peta: " + res.message);
console.error("Kesalahan Sistem:", res.message);
}
}).catch(err => {
console.error('Kesalahan Jaringan: Gagal merender data peladen', err);
});
}
muat_data_feature();