menambahkan fitur edit data pengguna dan memperbarui landing page

WebGISPovertyMapping/users.php

@@ -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>