powji/webgis-pemetaan-sosial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menambahkan fitur edit data pengguna dan memperbarui landing page

Browse Source
This commit is contained in:
powji17
2026-06-10 17:39:36 +07:00
parent 7c1b4375e7
commit 6158f4b1a4
16 changed files with 869 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Pertemuan01/hapus_area.php
-18
View File
@@ -1,18 +0,0 @@
<?php
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis"); // UBAH DB
$data = json_decode(file_get_contents("php://input"), true);
if ($data && isset($data['id'])) {
$id = $data['id'];
$stmt = $conn->prepare("DELETE FROM area_polygon WHERE id = ?");
$stmt->bind_param("i", $id);
if ($stmt->execute()) {
echo json_encode(["status" => "success"]);
} else {
echo json_encode(["status" => "error", "message" => $stmt->error]);
}
$stmt->close();
}
$conn->close();
?>
Pertemuan01/hapus_jalan.php
-38
View File
@@ -1,38 +0,0 @@
<?php
header('Content-Type: application/json');
// Konfigurasi Database (Sesuaikan dengan milik Anda)
$host = "localhost";
$user = "root";
$pass = "";
$db = "webgis"; // UBAH INI
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
echo json_encode(["status" => "error", "message" => "Koneksi database gagal"]);
exit;
}
$data = json_decode(file_get_contents("php://input"), true);
if ($data && isset($data['id'])) {
$id = $data['id'];
// Hapus data dari tabel jalan_polyline berdasarkan ID
$stmt = $conn->prepare("DELETE FROM jalan_polyline WHERE id = ?");
$stmt->bind_param("i", $id);
if ($stmt->execute()) {
echo json_encode(["status" => "success", "message" => "Garis jalan berhasil dihapus"]);
} else {
echo json_encode(["status" => "error", "message" => "Gagal menghapus data: " . $stmt->error]);
}
$stmt->close();
} else {
echo json_encode(["status" => "error", "message" => "ID tidak valid"]);
}
$conn->close();
?>
Pertemuan01/index.html
-14
View File
@@ -23,20 +23,6 @@
<button class="mode-btn active" data-mode="point" onclick="ubahMode('point')">
<i class="fa-solid fa-gas-pump"></i> SPBU
</button>
<button class="mode-btn" data-mode="polyline" onclick="ubahMode('polyline')">
<i class="fa-solid fa-road"></i> Jalan
</button>
<button class="mode-btn" data-mode="polygon" onclick="ubahMode('polygon')">
<i class="fa-solid fa-draw-polygon"></i> Kavling
</button>
</div><br>
<div class="mode-buttons">
<button class="mode-btn" data-mode="edit_jalan" onclick="ubahMode('edit_jalan')" style="background-color: #fcf3cf; border-color: #f1c40f; color: #d35400;">
<i class="fa-solid fa-pen-ruler"></i> Edit Jalan
</button>
<button class="mode-btn" data-mode="edit_kavling" onclick="ubahMode('edit_kavling')" style="background-color: #d4efdf; border-color: #27ae60; color: #1e8449;">
<i class="fa-solid fa-pen-ruler"></i> Edit Kavling
</button>
</div>
</div>
Pertemuan01/load_area.php
-20
View File
@@ -1,20 +0,0 @@
<?php
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis");
$sql = "SELECT * FROM area_polygon";
$result = $conn->query($sql);
$data_area = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
// Mengubah string geojson dari database kembali menjadi Object JSON
// Ini wajib agar Leaflet.geoJSON() di Javascript bisa merendernya
$row['geojson'] = json_decode($row['geojson']);
$data_area[] = $row;
}
}
echo json_encode($data_area);
$conn->close();
?>
Pertemuan01/load_jalan.php
-18
View File
@@ -1,18 +0,0 @@
<?php
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis"); // UBAH DB
$sql = "SELECT * FROM jalan_polyline";
$result = $conn->query($sql);
$data_jalan = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
// Parse string geojson menjadi object agar mudah dibaca Javascript
$row['geojson'] = json_decode($row['geojson']);
$data_jalan[] = $row;
}
}
echo json_encode($data_jalan);
$conn->close();
?>
Pertemuan01/simpan_area.php
-33
View File
@@ -1,33 +0,0 @@
<?php
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis");
$data = json_decode(file_get_contents("php://input"), true);
// Pastikan data yang dikirim dari JS sesuai dengan variabel baru
if ($data && isset($data['nama_kavling']) && isset($data['geojson'])) {
$nama_kavling = $data['nama_kavling'];
$status = $data['status'];
$luas_m2 = $data['luas_m2'];
// Ubah object GeoJSON menjadi string agar bisa disimpan di MySQL
$geojson_string = json_encode($data['geojson']);
// Sesuaikan query INSERT dengan nama kolom di tabel database yang baru
$stmt = $conn->prepare("INSERT INTO area_polygon (nama_kavling, status_kepemilikan, luas_m2, geojson) VALUES (?, ?, ?, ?)");
// Parameter: "ssds" berarti String, String, Double (Desimal), String
$stmt->bind_param("ssds", $nama_kavling, $status, $luas_m2, $geojson_string);
if ($stmt->execute()) {
echo json_encode(["status" => "success", "id" => $stmt->insert_id]);
} else {
echo json_encode(["status" => "error", "message" => $stmt->error]);
}
$stmt->close();
} else {
// Tambahkan pesan error jika data tidak lengkap
echo json_encode(["status" => "error", "message" => "Data area tidak lengkap"]);
}
$conn->close();
?>
Pertemuan01/simpan_jalan.php
-26
View File
@@ -1,26 +0,0 @@
<?php
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis"); // UBAH DB
$data = json_decode(file_get_contents("php://input"), true);
if ($data && isset($data['nama_jalan']) && isset($data['geojson'])) {
$nama_jalan = $data['nama_jalan'];
$status = $data['status'];
$panjang_m = $data['panjang_m'];
$geojson_string = json_encode($data['geojson']); // Jadikan string untuk disimpan
$stmt = $conn->prepare("INSERT INTO jalan_polyline (nama_jalan, status, panjang_m, geojson) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssds", $nama_jalan, $status, $panjang_m, $geojson_string);
if ($stmt->execute()) {
echo json_encode(["status" => "success", "id" => $stmt->insert_id]);
} else {
echo json_encode(["status" => "error", "message" => $stmt->error]);
}
$stmt->close();
} else {
echo json_encode(["status" => "error", "message" => "Data tidak lengkap"]);
}
$conn->close();
?>
Pertemuan01/update_area.php
-31
View File
@@ -1,31 +0,0 @@
<?php
header('Content-Type: application/json');
// Sesuaikan dengan konfigurasi database Anda
$conn = new mysqli("localhost", "root", "", "webgis");
if ($conn->connect_error) {
echo json_encode(["status" => "error", "message" => "Koneksi database gagal"]);
exit;
}
$data = json_decode(file_get_contents("php://input"), true);
if ($data && isset($data['id']) && isset($data['geojson'])) {
$id = $data['id'];
$luas_m2 = $data['luas_m2'];
$geojson_string = json_encode($data['geojson']);
$stmt = $conn->prepare("UPDATE area_polygon SET luas_m2 = ?, geojson = ? WHERE id = ?");
$stmt->bind_param("dsi", $luas_m2, $geojson_string, $id);
if ($stmt->execute()) {
echo json_encode(["status" => "success"]);
} else {
echo json_encode(["status" => "error", "message" => $stmt->error]);
}
$stmt->close();
} else {
echo json_encode(["status" => "error", "message" => "Data tidak lengkap"]);
}
$conn->close();
?>
Pertemuan01/update_jalan.php
-31
View File
@@ -1,31 +0,0 @@
<?php
header('Content-Type: application/json');
// Sesuaikan dengan konfigurasi database Anda
$conn = new mysqli("localhost", "root", "", "webgis");
if ($conn->connect_error) {
echo json_encode(["status" => "error", "message" => "Koneksi database gagal"]);
exit;
}
$data = json_decode(file_get_contents("php://input"), true);
if ($data && isset($data['id']) && isset($data['geojson'])) {
$id = $data['id'];
$panjang_m = $data['panjang_m'];
$geojson_string = json_encode($data['geojson']);
$stmt = $conn->prepare("UPDATE jalan_polyline SET panjang_m = ?, geojson = ? WHERE id = ?");
$stmt->bind_param("dsi", $panjang_m, $geojson_string, $id);
if ($stmt->execute()) {
echo json_encode(["status" => "success"]);
} else {
echo json_encode(["status" => "error", "message" => $stmt->error]);
}
$stmt->close();
} else {
echo json_encode(["status" => "error", "message" => "Data tidak lengkap"]);
}
$conn->close();
?>
WebGISPovertyMapping/api/users/get_user.php
+19
View File
@@ -0,0 +1,19 @@
<?php
require_once '../../auth.php';
requireRole('admin');
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis");
$id = (int) $_GET['id'];
$stmt = $conn->prepare("SELECT id, nama, username, role FROM users WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_assoc();
echo $data ? json_encode($data) : json_encode(["status" => "error", "message" => "User tidak ditemukan"]);
$stmt->close();
$conn->close();
?>
WebGISPovertyMapping/api/users/hapus_user.php
+28
View File
@@ -0,0 +1,28 @@
<?php
require_once '../../auth.php';
requireRole('admin');
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis");
$data = json_decode(file_get_contents("php://input"), true);
$id = (int) $data['id'];
// Tidak boleh hapus diri sendiri
if ($id === (int) $_SESSION['user']) {
echo json_encode(["status" => "error", "message" => "Tidak bisa menghapus akun sendiri"]);
exit;
}
$stmt = $conn->prepare("DELETE FROM users WHERE id = ?");
$stmt->bind_param("i", $id);
if ($stmt->execute()) {
echo json_encode(["status" => "success"]);
} else {
echo json_encode(["status" => "error", "message" => $stmt->error]);
}
$stmt->close();
$conn->close();
?>
WebGISPovertyMapping/api/users/update_user.php
+55
View File
@@ -0,0 +1,55 @@
<?php
require_once '../../auth.php';
requireRole('admin');
header('Content-Type: application/json');
$conn = new mysqli("localhost", "root", "", "webgis");
$data = json_decode(file_get_contents("php://input"), true);
if (!$data || !isset($data['id'])) {
echo json_encode(["status" => "error", "message" => "Data tidak lengkap"]);
exit;
}
$id = (int) $data['id'];
$nama = trim($data['nama']);
$username = trim($data['username']);
$role = $data['role'];
if (!$nama || !$username || !in_array($role, ['admin', 'operator'])) {
echo json_encode(["status" => "error", "message" => "Data tidak valid"]);
exit;
}
// Cek username sudah dipakai user lain
$cek = $conn->prepare("SELECT id FROM users WHERE username = ? AND id != ?");
$cek->bind_param("si", $username, $id);
$cek->execute();
$cek->store_result();
if ($cek->num_rows > 0) {
echo json_encode(["status" => "error", "message" => "Username sudah digunakan user lain"]);
$cek->close();
$conn->close();
exit;
}
$cek->close();
// Update dengan atau tanpa password baru
if (!empty($data['password'])) {
$hash = password_hash($data['password'], PASSWORD_DEFAULT);
$stmt = $conn->prepare("UPDATE users SET nama=?, username=?, password=?, role=? WHERE id=?");
$stmt->bind_param("ssssi", $nama, $username, $hash, $role, $id);
} else {
$stmt = $conn->prepare("UPDATE users SET nama=?, username=?, role=? WHERE id=?");
$stmt->bind_param("sssi", $nama, $username, $role, $id);
}
if ($stmt->execute()) {
echo json_encode(["status" => "success"]);
} else {
echo json_encode(["status" => "error", "message" => $stmt->error]);
}
$stmt->close();
$conn->close();
?>
WebGISPovertyMapping/assets/css/style.css
+247 -91
View File
@@ -1,83 +1,72 @@
/* ===== RESET & BASE ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh; width: 100vw; margin: 0; padding: 0;
display: flex; font-family: Arial, sans-serif; overflow: hidden;
}
#sidebar {
width: 280px; background-color: #f8f9fa; padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.2); z-index: 1000; overflow-y: auto;
}
#sidebar h3 { margin-top: 0; border-bottom: 2px solid #ddd; padding-bottom: 10px; }
/* Styling Ikon Mode */
.mode-selector { margin-bottom: 20px; }
.mode-buttons {
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 8px;
}
.mode-btn {
flex: 0 0 auto; /* tidak melebar penuh */
width: 110px;
padding: 10px 8px;
text-align: center;
}
.mode-btn i { font-size: 24px; margin-bottom: 8px; display: block; }
.mode-btn:hover { background: #e9ecef; }
/* Warna saat tombol mode aktif */
.mode-btn.active[data-mode="point"] { border-color: #e74c3c; color: #e74c3c; background: #fadbd8; }
.mode-btn.active[data-mode="polyline"] { border-color: #3498db; color: #3498db; background: #d6eaf8; }
.mode-btn.active[data-mode="polygon"] { border-color: #2ecc71; color: #2ecc71; background: #d5f5e3; }
.mode-btn.active[data-mode="prasejahtera"] { border-color: #c0392b; color: #ffffff; background: #e74c3c; }
.mode-btn.active[data-mode="ibadah"] { border-color: #6c3483; color: #ffffff; background: #8e44ad; }
/* Styling tombol edit aktif */
.mode-btn.active[data-mode="edit_jalan"] { background-color: #f1c40f !important; color: white !important; }
.mode-btn.active[data-mode="edit_kavling"] { background-color: #27ae60 !important; color: white !important; }
/* Styling Input & Action Buttons */
.action-buttons {
display: none; background: #fff; padding: 15px;
border-radius: 8px; border: 1px solid #ddd; margin-top: 10px; margin-bottom: 20px;
font-family: 'Segoe UI', Arial, sans-serif;
}
.action-buttons input, .action-buttons select {
width: 100%; margin-bottom: 15px; padding: 8px; box-sizing: border-box;
border: 1px solid #ccc; border-radius: 4px;
/* ===== SIDEBAR ===== */
#sidebar {
width: 280px;
min-width: 280px;
background: white;
display: flex;
flex-direction: column;
padding: 0;
box-shadow: 2px 0 12px rgba(0,0,0,0.10);
z-index: 1000;
overflow-y: auto;
}
.action-buttons button {
width: 100%; padding: 10px; margin-bottom: 8px; cursor: pointer;
border-radius: 5px; font-weight: bold;
/* Header sidebar */
.sidebar-header {
background: #1B2A4A;
color: white;
padding: 18px 20px;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.btn-success { background-color: #2ecc71; color: white; border: none; }
.btn-danger { background-color: #e74c3c; color: white; border: none; }
#map-container { flex: 1; position: relative; }
#map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.sidebar-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
/* ===== USER INFO ===== */
.user-info {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
padding: 16px 12px;
background: #f0f4f8;
border-radius: 8px;
margin-bottom: 12px;
gap: 4px;
border-radius: 10px;
gap: 6px;
}
.user-info i {
font-size: 28px;
font-size: 32px;
color: #1B2A4A;
}
.user-info span {
font-weight: 600;
font-size: 14px;
font-weight: 700;
font-size: 15px;
color: #1B2A4A;
}
@@ -85,52 +74,219 @@ html, body {
font-size: 11px;
background: #1B2A4A;
color: white;
padding: 2px 8px;
padding: 3px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== DIVIDER ===== */
.sidebar-divider {
height: 1px;
background: #e8edf2;
margin: 2px 0;
}
/* ===== LABEL SECTION ===== */
.sidebar-label {
font-size: 11px;
font-weight: 700;
color: #aab4c0;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 0 2px;
}
/* ===== TOMBOL MODE (Prasejahtera & Rumah Ibadah) ===== */
.mode-buttons {
display: flex;
gap: 8px;
justify-content: center;
}
.mode-btn {
flex: 1;
padding: 12px 6px;
background: #f0f4f8;
border: 2px solid transparent;
border-radius: 10px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: #4a5568;
text-align: center;
transition: all 0.2s;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
line-height: 1.3;
}
.mode-btn i {
font-size: 20px;
color: #1B2A4A;
display: block;
margin-bottom: 0;
}
.mode-btn:hover {
background: #e2e8f0;
border-color: #1B2A4A;
}
/* Warna saat tombol mode aktif */
.mode-btn.active,
.mode-btn.active[data-mode="prasejahtera"] {
background: #e74c3c;
border-color: #c0392b;
color: white;
}
.mode-btn.active i,
.mode-btn.active[data-mode="prasejahtera"] i {
color: white;
}
.mode-btn.active[data-mode="ibadah"],
.mode-btn.mode-ibadah.active {
background: #8e44ad;
border-color: #6c3483;
color: white;
}
.mode-btn.active[data-mode="ibadah"] i,
.mode-btn.mode-ibadah.active i {
color: white;
}
/* Mode lain (polyline, polygon, dll — tetap dipertahankan) */
.mode-btn.active[data-mode="point"] { border-color: #e74c3c; color: #e74c3c; background: #fadbd8; }
.mode-btn.active[data-mode="polyline"] { border-color: #3498db; color: #3498db; background: #d6eaf8; }
.mode-btn.active[data-mode="polygon"] { border-color: #2ecc71; color: #2ecc71; background: #d5f5e3; }
.mode-btn.active[data-mode="edit_jalan"] { background: #f1c40f; border-color: #d4ac0d; color: white; }
.mode-btn.active[data-mode="edit_kavling"] { background: #27ae60; border-color: #1e8449; color: white; }
/* ===== ACTION BUTTONS (panel dalam sidebar, dipertahankan) ===== */
.action-buttons {
display: none;
background: #fff;
padding: 15px;
border-radius: 8px;
border: 1px solid #ddd;
margin-top: 4px;
}
.action-buttons input,
.action-buttons select {
width: 100%;
margin-bottom: 15px;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
.action-buttons button {
width: 100%;
padding: 10px;
margin-bottom: 8px;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
}
.btn-success { background-color: #2ecc71; color: white; border: none; }
.btn-danger { background-color: #e74c3c; color: white; border: none; }
/* ===== MENU LINK (Kelola User) ===== */
.menu-link {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: #f0f4f8;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
color: #1B2A4A;
transition: background 0.2s;
width: 100%;
border: none;
cursor: pointer;
}
.menu-link:hover { background: #e2e8f0; }
/* ===== VIEWER INFO ===== */
.viewer-info {
font-size: 13px;
color: #888;
text-align: center;
margin-bottom: 10px;
}
.btn-login, .btn-logout, .menu-link {
display: block;
width: 100%;
padding: 10px;
text-align: center;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
margin-bottom: 8px;
cursor: pointer;
border: none;
padding: 12px;
background: #f0f4f8;
border-radius: 10px;
}
/* ===== TOMBOL LOGIN & LOGOUT ===== */
.btn-login {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: #1B2A4A;
color: white;
}
.btn-logout {
background: #fdecea;
color: #c0392b;
}
.menu-link,
.btn-logout,
.btn-login {
width: auto; /* tidak full width lagi */
display: block;
margin: 0 auto 8px auto;
padding: 10px 24px;
text-align: center;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: background 0.2s;
width: 100%;
border: none;
cursor: pointer;
}
.btn-login:hover { background: #253d6e; }
.btn-logout {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px;
background: #fdecea;
color: #c0392b;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.2s;
width: 100%;
margin-top: auto;
}
.btn-logout:hover { background: #f5b7b1; }
.menu-link:hover { background: #dce4f0; }
/* ===== MAP CONTAINER ===== */
#map-container {
flex: 1;
position: relative;
}
#map {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
/* ===== LAYER CONTROL ===== */
.leaflet-control-layers {
border-radius: 10px !important;
border: none !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
font-family: 'Segoe UI', Arial, sans-serif !important;
font-size: 13px !important;
}
WebGISPovertyMapping/index.php
+49 -33
View File
@@ -17,46 +17,62 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
</head>
<body>
<div id="sidebar">
<h3>Menu Pemetaan</h3>
<?php if ($isLoggedIn): ?>
<!-- Tampil kalau sudah login -->
<div class="user-info">
<i class="fa-solid fa-circle-user"></i>
<span><?= htmlspecialchars($_SESSION['nama']) ?></span>
<small><?= ucfirst($role) ?></small>
</div>
<div class="sidebar-header">
<i class="fa-solid fa-map-location-dot"></i>
Sistem Pemetaan
</div>
<?php if (in_array($role, ['admin', 'operator'])): ?>
<div class="mode-buttons">
<button class="mode-btn" data-mode="prasejahtera" onclick="ubahMode('prasejahtera')">
<i class="fa-solid fa-house-chimney-crack"></i> Prasejahtera
</button>
<button class="mode-btn mode-ibadah" data-mode="ibadah" onclick="ubahMode('ibadah')">
<i class="fa-solid fa-place-of-worship"></i> Rumah Ibadah
</button>
<div class="sidebar-body">
<?php if ($isLoggedIn): ?>
<div class="user-info">
<i class="fa-solid fa-circle-user"></i>
<span><?= htmlspecialchars($_SESSION['nama']) ?></span>
<small><?= ucfirst($role) ?></small>
</div>
<?php endif; ?>
<?php if ($role === 'admin'): ?>
<a href="users.php" class="menu-link">
<i class="fa-solid fa-users-gear"></i> Kelola User
<?php if (in_array($role, ['admin', 'operator'])): ?>
<div class="sidebar-divider"></div>
<span class="sidebar-label">Input Data</span>
<div class="mode-buttons">
<button class="mode-btn" data-mode="prasejahtera" onclick="ubahMode('prasejahtera')">
<i class="fa-solid fa-house-chimney-crack"></i>
Prasejahtera
</button>
<button class="mode-btn mode-ibadah" data-mode="ibadah" onclick="ubahMode('ibadah')">
<i class="fa-solid fa-place-of-worship"></i>
Rumah Ibadah
</button>
</div>
<?php endif; ?>
<?php if ($role === 'admin'): ?>
<div class="sidebar-divider"></div>
<span class="sidebar-label">Manajemen</span>
<a href="users.php" class="menu-link">
<i class="fa-solid fa-users-gear"></i> Kelola User
</a>
<?php endif; ?>
<div class="sidebar-divider"></div>
<a href="logout.php" class="btn-logout">
<i class="fa-solid fa-right-from-bracket"></i> Logout
</a>
<?php else: ?>
<div class="viewer-info">
<i class="fa-solid fa-eye"></i> Anda melihat sebagai <b>Viewer</b>
</div>
<a href="login.php" class="btn-login">
<i class="fa-solid fa-right-to-bracket"></i> Login
</a>
<?php endif; ?>
<a href="logout.php" class="btn-logout">
<i class="fa-solid fa-right-from-bracket"></i> Logout
</a>
<?php else: ?>
<!-- Tampil kalau belum login (viewer) -->
<p class="viewer-info">
<i class="fa-solid fa-eye"></i> Anda melihat sebagai <b>Viewer</b>
</p>
<a href="login.php" class="btn-login">
<i class="fa-solid fa-right-to-bracket"></i> Login
</a>
<?php endif; ?>
</div>
</div>
<div id="map-container">
WebGISPovertyMapping/users.php
+196 -55
View File
@@ -17,7 +17,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['
if (!$nama || !$username || !$password || !in_array($role, ['admin', 'operator'])) {
$error = "Semua field wajib diisi dengan benar.";
} else {
// Cek apakah username sudah ada
$cek = $conn->prepare("SELECT id FROM users WHERE username = ?");
$cek->bind_param("s", $username);
$cek->execute();
@@ -43,8 +42,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['
// --- HAPUS USER ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'hapus') {
$id = (int) $_POST['id'];
// Tidak boleh hapus diri sendiri
if ($id === (int) $_SESSION['user']) {
$error = "Tidak bisa menghapus akun yang sedang aktif.";
} else {
@@ -59,7 +56,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['
}
}
// --- AMBIL SEMUA USER ---
$users = $conn->query("SELECT id, nama, username, role, created_at FROM users ORDER BY created_at DESC");
$conn->close();
?>
@@ -79,7 +75,6 @@ $conn->close();
min-height: 100vh;
}
/* NAVBAR */
.navbar {
background: #1B2A4A;
color: white;
@@ -89,10 +84,7 @@ $conn->close();
justify-content: space-between;
}
.navbar h1 {
font-size: 18px;
font-weight: 600;
}
.navbar h1 { font-size: 18px; font-weight: 600; }
.navbar a {
color: white;
@@ -107,18 +99,21 @@ $conn->close();
.navbar a:hover { opacity: 1; }
/* CONTAINER */
.container {
max-width: 900px;
max-width: 1100px;
margin: 32px auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 320px;
grid-template-columns: 1fr 300px;
gap: 24px;
align-items: start;
}
/* CARD */
thead th:last-child,
tbody td:last-child {
min-width: 160px;
}
.card {
background: white;
border-radius: 12px;
@@ -137,9 +132,11 @@ $conn->close();
gap: 8px;
}
/* Header edit punya warna berbeda */
.card-header.edit { background: #2980b9; }
.card-body { padding: 20px; }
/* ALERT */
.alert {
padding: 12px 16px;
border-radius: 8px;
@@ -153,12 +150,7 @@ $conn->close();
.alert-success { background: #eafaf1; color: #1e8449; }
.alert-error { background: #fdecea; color: #c0392b; }
/* TABEL */
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
background: #f0f4f8;
@@ -177,11 +169,7 @@ $conn->close();
}
tbody tr:hover { background: #fafbfc; }
tbody td {
padding: 12px 14px;
color: #333;
}
tbody td { padding: 12px 14px; color: #333; }
.badge {
display: inline-block;
@@ -204,10 +192,11 @@ $conn->close();
margin-left: 4px;
}
.btn-hapus {
.action-buttons { display: flex; gap: 6px; }
.btn-edit, .btn-hapus {
background: none;
border: none;
color: #e74c3c;
cursor: pointer;
font-size: 13px;
padding: 4px 8px;
@@ -215,10 +204,15 @@ $conn->close();
transition: background 0.15s;
}
.btn-edit { color: #2980b9; }
.btn-hapus { color: #e74c3c; }
.btn-edit:hover { background: #e8f4fd; }
.btn-hapus:hover { background: #fdecea; }
.btn-edit:disabled,
.btn-hapus:disabled { opacity: 0.3; cursor: not-allowed; }
/* FORM */
.form-group { margin-bottom: 14px; }
.form-group label {
@@ -243,14 +237,17 @@ $conn->close();
}
.form-group input:focus,
.form-group select:focus {
border-color: #1B2A4A;
.form-group select:focus { border-color: #1B2A4A; }
.form-group .hint {
font-size: 11px;
color: #aaa;
margin-top: 4px;
}
.btn-submit {
width: 100%;
padding: 11px;
background: #1B2A4A;
color: white;
border: none;
border-radius: 8px;
@@ -262,13 +259,44 @@ $conn->close();
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 8px;
}
.btn-submit:hover { background: #253d6e; }
.btn-submit.tambah { background: #1B2A4A; }
.btn-submit.tambah:hover { background: #253d6e; }
.btn-submit.simpan { background: #2980b9; }
.btn-submit.simpan:hover { background: #2471a3; }
.btn-batal {
width: 100%;
padding: 9px;
background: none;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
color: #888;
cursor: pointer;
transition: background 0.2s;
}
.btn-batal:hover { background: #f0f4f8; }
@media (max-width: 680px) {
.container { grid-template-columns: 1fr; }
}
.action-buttons {
display: flex;
gap: 4px;
align-items: center;
flex-wrap: nowrap;
}
/* Pastikan kolom Aksi cukup lebar */
tbody td:last-child {
white-space: nowrap;
min-width: 130px;
}
</style>
</head>
<body>
@@ -291,15 +319,13 @@ $conn->close();
<?php if ($error): ?>
<div class="alert alert-error">
<i class="fa-solid fa-circle-exclamation"></i>
<?= $error ?>
<i class="fa-solid fa-circle-exclamation"></i> <?= $error ?>
</div>
<?php endif; ?>
<?php if ($success): ?>
<div class="alert alert-success">
<i class="fa-solid fa-circle-check"></i>
<?= $success ?>
<i class="fa-solid fa-circle-check"></i> <?= $success ?>
</div>
<?php endif; ?>
@@ -332,14 +358,17 @@ $conn->close();
</td>
<td><?= date('d M Y', strtotime($u['created_at'])) ?></td>
<td>
<form method="POST" onsubmit="return konfirmasiHapus(this)">
<input type="hidden" name="action" value="hapus">
<input type="hidden" name="id" value="<?= $u['id'] ?>">
<button type="submit" class="btn-hapus"
<div class="action-buttons">
<button class="btn-edit"
onclick="bukaFormEdit(<?= $u['id'] ?>, '<?= htmlspecialchars($u['nama'], ENT_QUOTES) ?>', '<?= htmlspecialchars($u['username'], ENT_QUOTES) ?>', '<?= $u['role'] ?>')">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
<button class="btn-hapus"
onclick="hapusUser(<?= $u['id'] ?>)"
<?= $u['id'] == $_SESSION['user'] ? 'disabled title="Tidak bisa hapus akun sendiri"' : '' ?>>
<i class="fa-solid fa-trash"></i> Hapus
</button>
</form>
</div>
</td>
</tr>
<?php endwhile; ?>
@@ -348,40 +377,59 @@ $conn->close();
</div>
</div>
<!-- FORM TAMBAH USER -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-user-plus"></i> Tambah User Baru
<!-- PANEL KANAN: FORM TAMBAH / EDIT -->
<div class="card" id="form-card">
<!-- Header: berubah sesuai mode -->
<div class="card-header" id="form-header">
<i class="fa-solid fa-user-plus"></i>
<span id="form-title">Tambah User Baru</span>
</div>
<div class="card-body">
<form method="POST">
<input type="hidden" name="action" value="tambah">
<form method="POST" id="form-tambah" onsubmit="return validasiForm()">
<input type="hidden" name="action" value="tambah" id="form-action">
<input type="hidden" id="edit-id" value="">
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" name="nama" placeholder="Contoh: Budi Santoso" required>
<input type="text" name="nama" id="input-nama"
placeholder="Contoh: Budi Santoso" required>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" name="username" placeholder="Contoh: budi123" required>
<input type="text" name="username" id="input-username"
placeholder="Contoh: budi123" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="Min. 6 karakter" required>
<input type="password" name="password" id="input-password"
placeholder="Min. 6 karakter">
<p class="hint" id="password-hint" style="display:none;">
<i class="fa-solid fa-circle-info"></i>
Kosongkan jika tidak ingin mengubah password
</p>
</div>
<div class="form-group">
<label>Role</label>
<select name="role">
<select name="role" id="input-role">
<option value="operator">Operator</option>
<option value="admin">Admin</option>
</select>
</div>
<button type="submit" class="btn-submit">
<i class="fa-solid fa-user-plus"></i> Tambah User
<button type="submit" class="btn-submit tambah" id="btn-submit">
<i class="fa-solid fa-user-plus"></i>
<span id="btn-submit-text">Tambah User</span>
</button>
<!-- Tombol Batal hanya muncul saat mode Edit -->
<button type="button" class="btn-batal" id="btn-batal"
style="display:none;" onclick="batalEdit()">
<i class="fa-solid fa-xmark"></i> Batal Edit
</button>
</form>
</div>
@@ -390,8 +438,101 @@ $conn->close();
</div>
<script>
function konfirmasiHapus(form) {
return confirm("Yakin ingin menghapus user ini?");
const SESSION_USER_ID = <?= (int) $_SESSION['user'] ?>;
let modeEdit = false;
function bukaFormEdit(id, nama, username, role) {
modeEdit = true;
// Isi form dengan data user yang dipilih
document.getElementById('edit-id').value = id;
document.getElementById('input-nama').value = nama;
document.getElementById('input-username').value = username;
document.getElementById('input-role').value = role;
document.getElementById('input-password').value = '';
// Ubah tampilan form ke mode Edit
document.getElementById('form-header').classList.add('edit');
document.getElementById('form-title').textContent = 'Edit User';
document.getElementById('form-header').querySelector('i').className = 'fa-solid fa-user-pen';
document.getElementById('btn-submit').className = 'btn-submit simpan';
document.getElementById('btn-submit-text').textContent = 'Simpan Perubahan';
document.getElementById('btn-submit').querySelector('i').className = 'fa-solid fa-save';
document.getElementById('password-hint').style.display = 'block';
document.getElementById('btn-batal').style.display = 'block';
document.getElementById('input-password').required = false;
// Scroll ke form (berguna di mobile)
document.getElementById('form-card').scrollIntoView({ behavior: 'smooth' });
}
function batalEdit() {
modeEdit = false;
// Reset form ke mode Tambah
document.getElementById('form-tambah').reset();
document.getElementById('edit-id').value = '';
document.getElementById('form-header').classList.remove('edit');
document.getElementById('form-title').textContent = 'Tambah User Baru';
document.getElementById('form-header').querySelector('i').className = 'fa-solid fa-user-plus';
document.getElementById('btn-submit').className = 'btn-submit tambah';
document.getElementById('btn-submit-text').textContent = 'Tambah User';
document.getElementById('btn-submit').querySelector('i').className = 'fa-solid fa-user-plus';
document.getElementById('password-hint').style.display = 'none';
document.getElementById('btn-batal').style.display = 'none';
document.getElementById('input-password').required = true;
}
function validasiForm() {
if (!modeEdit) return true; // Mode tambah, biarkan PHP handle
// Mode edit: kirim via fetch, bukan submit form biasa
let id = document.getElementById('edit-id').value;
let nama = document.getElementById('input-nama').value.trim();
let username = document.getElementById('input-username').value.trim();
let password = document.getElementById('input-password').value;
let role = document.getElementById('input-role').value;
if (!nama || !username) {
alert('Nama dan username wajib diisi.');
return false;
}
fetch('api/users/update_user.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id, nama, username, password, role })
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
// Reload halaman untuk refresh tabel
window.location.reload();
} else {
alert('Gagal: ' + (data.message || 'Terjadi kesalahan'));
}
});
return false; // Cegah submit form biasa
}
function hapusUser(id) {
if (!confirm('Yakin ingin menghapus user ini?')) return;
fetch('api/users/hapus_user.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: id })
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
window.location.reload();
} else {
alert('Gagal: ' + (data.message || 'Terjadi kesalahan'));
}
});
}
</script>
index.php
+275 -47
View File
@@ -1,70 +1,298 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page - Tugas WebGIS</title>
<title>WebGIS Portfolio — Muhammad Fauzi</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f4f4f9;
font-family: 'Segoe UI', Arial, sans-serif;
background: #f0f4f8;
min-height: 100vh;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
.link-list {
list-style-type: none;
padding: 0;
}
.link-list li {
margin: 15px 0;
}
.link-list a {
display: block;
padding: 10px 15px;
background-color: #007bff;
/* ===== HEADER ===== */
header {
background: #1B2A4A;
color: white;
text-decoration: none;
border-radius: 5px;
padding: 48px 24px 40px;
text-align: center;
font-weight: bold;
}
.link-list a:hover {
background-color: #0056b3;
header .eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #7fa8d4;
margin-bottom: 12px;
}
header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
header p {
font-size: 14px;
color: #a8bdd4;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
header p span {
display: flex;
align-items: center;
gap: 6px;
}
/* ===== MAIN ===== */
main {
max-width: 960px;
margin: 40px auto;
padding: 0 24px 60px;
}
.section-label {
font-size: 11px;
font-weight: 700;
color: #aab4c0;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
/* ===== PROJECT GRID ===== */
.projects {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.card {
background: white;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none;
color: inherit;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.card-banner {
height: 6px;
flex-shrink: 0;
}
.card-banner.green { background: #2ecc71; }
.card-banner.blue { background: #3498db; }
.card-banner.navy { background: #1B2A4A; }
.card-body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.card-eyebrow {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #aab4c0;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.badge-featured {
background: #1B2A4A;
color: white;
padding: 2px 8px;
border-radius: 20px;
font-size: 10px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #1B2A4A;
margin-bottom: 8px;
}
.card-desc {
font-size: 13px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
flex: 1;
}
.techstack {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.tag {
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
background: #f0f4f8;
color: #4a5568;
}
.tag.php { background: #e8f0fe; color: #3557a7; }
.tag.js { background: #fef9e7; color: #9a7d0a; }
.tag.mysql { background: #e8f8f5; color: #1a7a5e; }
.tag.leaflet { background: #fdf2f8; color: #7d3c98; }
.tag.css { background: #fef0e7; color: #a04000; }
.card-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
align-self: flex-start;
color: white;
}
.card-btn.navy { background: #1B2A4A; }
.card-btn.navy:hover { background: #253d6e; }
.card-btn.green { background: #27ae60; }
.card-btn.green:hover { background: #1e8449; }
.card-btn.blue { background: #2980b9; }
.card-btn.blue:hover { background: #2471a3; }
/* ===== FOOTER ===== */
footer {
text-align: center;
padding: 24px;
font-size: 12px;
color: #aab4c0;
}
</style>
</head>
<body>
<div class="container">
<h2>Landing Page - Tugas WebGIS</h2>
<p style="text-align: center;">Nama: Muhammad Fauzi | NIM: D1041231083</p>
<header>
<p class="eyebrow">Sistem Informasi Geografis</p>
<h1>Tugas Besar</h1>
<p>
<span><i class="fa-solid fa-user"></i> Muhammad Fauzi</span>
<span><i class="fa-solid fa-id-card"></i> D1041231083</span>
<span><i class="fa-solid fa-university"></i> Informatika — UNTAN</span>
</p>
</header>
<main>
<p class="section-label"><i class="fa-solid fa-folder-open"></i> &nbsp;Daftar Project</p>
<div class="projects">
<!-- ===== PERTEMUAN 01: Pemetaan SPBU ===== -->
<a href="./Pertemuan01/" class="card">
<div class="card-banner green"></div>
<div class="card-body">
<div class="card-eyebrow">
<i class="fa-solid fa-calendar-days"></i> Pertemuan 1
</div>
<div class="card-title">Pemetaan Titik SPBU</div>
<p class="card-desc">
WebGIS dasar untuk menandai dan mengelola lokasi SPBU di peta menggunakan marker titik.
Mendukung operasi tambah, edit, dan hapus data langsung melalui popup di peta.
</p>
<div class="techstack">
<span class="tag leaflet"><i class="fa-solid fa-map"></i> Leaflet.js</span>
<span class="tag php">PHP</span>
<span class="tag mysql">MySQL</span>
<span class="tag js">JavaScript</span>
</div>
<span class="card-btn green">
<i class="fa-solid fa-arrow-right"></i> Buka Project
</span>
</div>
</a>
<!-- ===== PERTEMUAN 02: Pemetaan Jalan & Area ===== -->
<a href="./Pertemuan02/" class="card">
<div class="card-banner blue"></div>
<div class="card-body">
<div class="card-eyebrow">
<i class="fa-solid fa-calendar-days"></i> Pertemuan 2
</div>
<div class="card-title">Pemetaan Jalan & Area</div>
<p class="card-desc">
WebGIS untuk menggambar dan menyimpan data jalan (polyline) serta area kavling (polygon)
secara interaktif di atas peta. Data tersimpan ke database dan dapat diedit ulang posisinya.
</p>
<div class="techstack">
<span class="tag leaflet"><i class="fa-solid fa-map"></i> Leaflet.js</span>
<span class="tag php">PHP</span>
<span class="tag mysql">MySQL</span>
<span class="tag js">JavaScript</span>
</div>
<span class="card-btn blue">
<i class="fa-solid fa-arrow-right"></i> Buka Project
</span>
</div>
</a>
<!-- ===== FINAL PROJECT: WebGIS Poverty Mapping ===== -->
<a href="./WebGISPovertyMapping/" class="card">
<div class="card-banner navy"></div>
<div class="card-body">
<div class="card-eyebrow">
<i class="fa-solid fa-star"></i> Final Project
</div>
<div class="card-title">Pemetaan Kemiskinan</div>
<p class="card-desc">
WebGIS pemetaan rumah prasejahtera dan rumah ibadah dengan analisis spasial otomatis,
sistem login multi-role, dan manajemen data lengkap.
</p>
<div class="techstack">
<span class="tag leaflet"><i class="fa-solid fa-map"></i> Leaflet.js</span>
<span class="tag php">PHP</span>
<span class="tag mysql">MySQL</span>
<span class="tag js">JavaScript</span>
<span class="tag css">CSS</span>
</div>
<span class="card-btn navy">
<i class="fa-solid fa-arrow-right"></i> Buka Project
</span>
</div>
</a>
<ul class="link-list">
<li><a href="./Pertemuan01/">Tugas Pertemuan 1</a></li>
<li><a href="./Pertemuan02/">Tugas Pertemuan 2</a></li>
<li><a href="./WebGISPovertyMapping/">Tugas Poverty Mapping</a></li>
</ul>
</div>
</main>
<footer>
&copy; 2026 Muhammad Fauzi
</footer>
</body>
</html>