Add auto-import DB script and update connection fallback
This commit is contained in:
Nama Kamu
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
include 'koneksi.php';
|
||||
|
||||
$data = [];
|
||||
|
||||
$result = $conn->query("SELECT * FROM spbu");
|
||||
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
$data[] = $row;
|
||||
}
|
||||
|
||||
echo json_encode($data);
|
||||
?>
|
||||
@@ -0,0 +1,23 @@
|
||||
-- =============================================
|
||||
-- DATABASE: db_24jam
|
||||
-- =============================================
|
||||
|
||||
CREATE DATABASE IF NOT EXISTS `db_24jam`
|
||||
CHARACTER SET utf8mb4
|
||||
COLLATE utf8mb4_general_ci;
|
||||
|
||||
USE `db_24jam`;
|
||||
|
||||
-- ---------------------------------------------
|
||||
-- Tabel: spbu
|
||||
-- ---------------------------------------------
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `spbu` (
|
||||
`id` INT(11) NOT NULL AUTO_INCREMENT,
|
||||
`nama_spbu` VARCHAR(100) NOT NULL,
|
||||
`no_wa` VARCHAR(20) NOT NULL,
|
||||
`status` ENUM('yes','no') NOT NULL DEFAULT 'no',
|
||||
`latitude` DOUBLE NOT NULL,
|
||||
`longitude` DOUBLE NOT NULL,
|
||||
PRIMARY KEY (`id`)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||
@@ -0,0 +1,15 @@
|
||||
<?php
|
||||
ob_start();
|
||||
include 'koneksi.php';
|
||||
ob_clean();
|
||||
|
||||
$id = $conn->real_escape_string($_POST['id'] ?? '');
|
||||
|
||||
$query = "DELETE FROM spbu WHERE id='$id'";
|
||||
|
||||
if ($conn->query($query)) {
|
||||
echo "success";
|
||||
} else {
|
||||
echo "error";
|
||||
}
|
||||
?>
|
||||
+466
@@ -0,0 +1,466 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Peta SPBU</title>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family:'Segoe UI',sans-serif;
|
||||
}
|
||||
|
||||
#map{
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
/* ========================= */
|
||||
/* POPUP UMUM */
|
||||
/* ========================= */
|
||||
|
||||
.leaflet-popup-content-wrapper{
|
||||
border-radius:20px;
|
||||
overflow:hidden;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.leaflet-popup-content{
|
||||
margin:0;
|
||||
width:290px !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-tip{
|
||||
background:white;
|
||||
}
|
||||
|
||||
/* ========================= */
|
||||
/* POPUP INFO SPBU */
|
||||
/* ========================= */
|
||||
|
||||
.spbu-card{
|
||||
padding:14px;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.spbu-header{
|
||||
background:linear-gradient(135deg,#ff9800,#ff5b00);
|
||||
color:white;
|
||||
padding:16px;
|
||||
border-radius:16px;
|
||||
text-align:center;
|
||||
font-size:20px;
|
||||
font-weight:800;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.spbu-info{
|
||||
background:#f4f4f4;
|
||||
border-radius:14px;
|
||||
padding:14px;
|
||||
margin-bottom:10px;
|
||||
font-size:16px;
|
||||
display:flex;
|
||||
gap:8px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.status-open{
|
||||
color:#18a84c;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.status-close{
|
||||
color:#ff2020;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.spbu-actions{
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:10px;
|
||||
}
|
||||
|
||||
.btn{
|
||||
border:none;
|
||||
padding:12px;
|
||||
border-radius:14px;
|
||||
font-size:15px;
|
||||
font-weight:700;
|
||||
color:white;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.btn-edit{
|
||||
background:#2995f0;
|
||||
}
|
||||
|
||||
.btn-delete{
|
||||
background:#ff4336;
|
||||
}
|
||||
|
||||
/* ========================= */
|
||||
/* FORM */
|
||||
/* ========================= */
|
||||
|
||||
.form-box{
|
||||
padding:16px;
|
||||
background:white;
|
||||
}
|
||||
|
||||
.form-title{
|
||||
text-align:center;
|
||||
font-size:19px;
|
||||
font-weight:800;
|
||||
color:#ff7300;
|
||||
margin-bottom:14px;
|
||||
}
|
||||
|
||||
.form-group{
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.form-group label{
|
||||
display:block;
|
||||
margin-bottom:6px;
|
||||
font-size:14px;
|
||||
font-weight:700;
|
||||
color:#444;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
width:100%;
|
||||
padding:10px 12px;
|
||||
border:1px solid #ddd;
|
||||
border-radius:12px;
|
||||
font-size:14px;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.form-control:focus{
|
||||
border-color:#ff9800;
|
||||
}
|
||||
|
||||
.btn-save{
|
||||
width:100%;
|
||||
margin-top:4px;
|
||||
border:none;
|
||||
background:linear-gradient(135deg,#ff9800,#ff5b00);
|
||||
color:white;
|
||||
padding:12px;
|
||||
border-radius:14px;
|
||||
font-size:15px;
|
||||
font-weight:800;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
/* layer control */
|
||||
.leaflet-control-layers{
|
||||
border-radius:14px !important;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([-0.02,109.34],13);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{
|
||||
maxZoom:19
|
||||
}).addTo(map);
|
||||
|
||||
/* layer */
|
||||
let buka24 = L.layerGroup().addTo(map);
|
||||
let tidak24 = L.layerGroup().addTo(map);
|
||||
|
||||
/* marker icon */
|
||||
function markerIcon(color){
|
||||
return L.icon({
|
||||
iconUrl:`https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
|
||||
shadowUrl:'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
|
||||
iconSize:[25,41],
|
||||
iconAnchor:[12,41]
|
||||
});
|
||||
}
|
||||
|
||||
/* ========================= */
|
||||
/* LOAD DATA */
|
||||
/* ========================= */
|
||||
|
||||
fetch('ambil_data.php')
|
||||
.then(r=>r.json())
|
||||
.then(data=>{
|
||||
|
||||
data.forEach(d=>{
|
||||
|
||||
let warna = d.status === 'yes' ? 'green' : 'red';
|
||||
|
||||
let marker = L.marker(
|
||||
[d.latitude,d.longitude],
|
||||
{
|
||||
icon:markerIcon(warna),
|
||||
draggable:true
|
||||
}
|
||||
);
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class="spbu-card">
|
||||
|
||||
<div class="spbu-header">
|
||||
⛽ ${d.nama_spbu}
|
||||
</div>
|
||||
|
||||
<div class="spbu-info">
|
||||
📞 WA : ${d.no_wa}
|
||||
</div>
|
||||
|
||||
<div class="spbu-info">
|
||||
🕒 Status :
|
||||
<span class="${d.status=='yes' ? 'status-open':'status-close'}">
|
||||
${d.status=='yes' ? 'Buka 24 Jam':'Tidak 24 Jam'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="spbu-actions">
|
||||
|
||||
<button class="btn btn-edit"
|
||||
onclick="editData(${d.id},'${d.nama_spbu}','${d.no_wa}','${d.status}',${d.latitude},${d.longitude})">
|
||||
✏️ Edit
|
||||
</button>
|
||||
|
||||
<button class="btn btn-delete"
|
||||
onclick="hapusData(${d.id})">
|
||||
🗑 Hapus
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`);
|
||||
|
||||
marker.on('dragend',function(e){
|
||||
|
||||
let pos = e.target.getLatLng();
|
||||
|
||||
fetch('update.php',{
|
||||
method:'POST',
|
||||
body:new URLSearchParams({
|
||||
id:d.id,
|
||||
nama:d.nama_spbu,
|
||||
wa:d.no_wa,
|
||||
status:d.status,
|
||||
lat:pos.lat,
|
||||
lng:pos.lng
|
||||
})
|
||||
})
|
||||
.then(r=>r.text())
|
||||
.then(res=>{
|
||||
if(res=="success"){
|
||||
alert("Lokasi berhasil diupdate");
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
if(d.status=="yes"){
|
||||
marker.addTo(buka24);
|
||||
}else{
|
||||
marker.addTo(tidak24);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/* layer control */
|
||||
L.control.layers(null,{
|
||||
"🟢 SPBU Buka 24 Jam": buka24,
|
||||
"🔴 SPBU Tidak Buka 24 Jam": tidak24
|
||||
},{collapsed:false}).addTo(map);
|
||||
|
||||
/* ========================= */
|
||||
/* TAMBAH DATA */
|
||||
/* ========================= */
|
||||
|
||||
map.on('click',function(e){
|
||||
|
||||
let lat = e.latlng.lat;
|
||||
let lng = e.latlng.lng;
|
||||
|
||||
L.popup({maxWidth:310})
|
||||
.setLatLng(e.latlng)
|
||||
.setContent(`
|
||||
<div class="form-box">
|
||||
|
||||
<div class="form-title">Tambah SPBU</div>
|
||||
|
||||
<form id="formTambah">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nama SPBU</label>
|
||||
<input class="form-control" type="text" name="nama" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>No WhatsApp</label>
|
||||
<input class="form-control" type="text" name="wa" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status 24 Jam</label>
|
||||
<select class="form-control" name="status">
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn-save">💾 Simpan</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
`)
|
||||
.openOn(map);
|
||||
|
||||
setTimeout(()=>{
|
||||
|
||||
document.getElementById("formTambah").onsubmit=function(ev){
|
||||
ev.preventDefault();
|
||||
|
||||
let fd = new FormData(this);
|
||||
fd.append("lat",lat);
|
||||
fd.append("lng",lng);
|
||||
|
||||
fetch('simpan.php',{
|
||||
method:'POST',
|
||||
body:fd
|
||||
})
|
||||
.then(r=>r.text())
|
||||
.then(res=>{
|
||||
if(res=="success"){
|
||||
alert("Data berhasil disimpan");
|
||||
location.reload();
|
||||
}else{
|
||||
alert("Gagal menyimpan");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
},100);
|
||||
|
||||
});
|
||||
|
||||
/* ========================= */
|
||||
/* EDIT DATA */
|
||||
/* ========================= */
|
||||
|
||||
function editData(id,nama,wa,status,lat,lng){
|
||||
|
||||
L.popup({maxWidth:310})
|
||||
.setLatLng([lat,lng])
|
||||
.setContent(`
|
||||
<div class="form-box">
|
||||
|
||||
<div class="form-title">Edit SPBU</div>
|
||||
|
||||
<form id="formEdit">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nama SPBU</label>
|
||||
<input class="form-control" type="text" name="nama" value="${nama}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>No WhatsApp</label>
|
||||
<input class="form-control" type="text" name="wa" value="${wa}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status 24 Jam</label>
|
||||
<select class="form-control" name="status">
|
||||
<option value="yes" ${status=='yes'?'selected':''}>Yes</option>
|
||||
<option value="no" ${status=='no'?'selected':''}>No</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn-save">💾 Update</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
`)
|
||||
.openOn(map);
|
||||
|
||||
setTimeout(()=>{
|
||||
|
||||
document.getElementById("formEdit").onsubmit=function(ev){
|
||||
ev.preventDefault();
|
||||
|
||||
let fd = new FormData(this);
|
||||
|
||||
fetch('update.php',{
|
||||
method:'POST',
|
||||
body:new URLSearchParams({
|
||||
id:id,
|
||||
nama:fd.get("nama"),
|
||||
wa:fd.get("wa"),
|
||||
status:fd.get("status"),
|
||||
lat:lat,
|
||||
lng:lng
|
||||
})
|
||||
})
|
||||
.then(r=>r.text())
|
||||
.then(res=>{
|
||||
if(res=="success"){
|
||||
alert("Data berhasil diupdate");
|
||||
location.reload();
|
||||
}else{
|
||||
alert("Gagal update");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
},100);
|
||||
|
||||
}
|
||||
|
||||
/* ========================= */
|
||||
/* HAPUS DATA */
|
||||
/* ========================= */
|
||||
|
||||
function hapusData(id){
|
||||
|
||||
if(confirm("Yakin ingin hapus data ini?")){
|
||||
|
||||
fetch('hapus.php',{
|
||||
method:'POST',
|
||||
body:new URLSearchParams({
|
||||
id:id
|
||||
})
|
||||
})
|
||||
.then(r=>r.text())
|
||||
.then(res=>{
|
||||
if(res=="success"){
|
||||
alert("Data berhasil dihapus");
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
$host = getenv('DB_HOST') ?: 'localhost';
|
||||
$user = getenv('DB_USER') ?: 'root';
|
||||
$pass = getenv('DB_PASSWORD') ?: '';
|
||||
$db = getenv('DB_NAME_04') ?: (getenv('DB_NAME') ?: 'db_24jam');
|
||||
|
||||
$conn = mysqli_connect($host, $user, $pass, $db);
|
||||
|
||||
if (!$conn) {
|
||||
die("Koneksi database gagal: " . mysqli_connect_error());
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
ob_start();
|
||||
include 'koneksi.php';
|
||||
ob_clean();
|
||||
|
||||
$nama = $conn->real_escape_string($_POST['nama'] ?? '');
|
||||
$wa = $conn->real_escape_string($_POST['wa'] ?? '');
|
||||
$status = $conn->real_escape_string($_POST['status'] ?? '');
|
||||
$lat = $conn->real_escape_string($_POST['lat'] ?? '');
|
||||
$lng = $conn->real_escape_string($_POST['lng'] ?? '');
|
||||
|
||||
$query = "INSERT INTO spbu (nama_spbu, no_wa, status, latitude, longitude)
|
||||
VALUES ('$nama','$wa','$status','$lat','$lng')";
|
||||
|
||||
if ($conn->query($query)) {
|
||||
echo "success";
|
||||
} else {
|
||||
echo "error";
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
ob_start();
|
||||
include 'koneksi.php';
|
||||
ob_clean();
|
||||
|
||||
$id = $conn->real_escape_string($_POST['id'] ?? '');
|
||||
$nama = $conn->real_escape_string($_POST['nama'] ?? '');
|
||||
$wa = $conn->real_escape_string($_POST['wa'] ?? '');
|
||||
$status = $conn->real_escape_string($_POST['status'] ?? '');
|
||||
$lat = $conn->real_escape_string($_POST['lat'] ?? '');
|
||||
$lng = $conn->real_escape_string($_POST['lng'] ?? '');
|
||||
|
||||
$query = "UPDATE spbu SET
|
||||
nama_spbu='$nama',
|
||||
no_wa='$wa',
|
||||
status='$status',
|
||||
latitude='$lat',
|
||||
longitude='$lng'
|
||||
WHERE id='$id'";
|
||||
|
||||
if ($conn->query($query)) {
|
||||
echo "success";
|
||||
} else {
|
||||
echo "error";
|
||||
}
|
||||
?>
|
||||
Reference in New Issue
Block a user