powji17
541 lines
18 KiB
PHP
541 lines
18 KiB
PHP
<?php
|
|
require_once 'auth.php';
|
|
requireLogin();
|
|
requireRole('admin');
|
|
|
|
require_once '../config.php';
|
|
$conn = getDB();
|
|
$error = '';
|
|
$success = '';
|
|
|
|
// --- TAMBAH USER ---
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'tambah') {
|
|
$nama = trim($_POST['nama']);
|
|
$username = trim($_POST['username']);
|
|
$password = trim($_POST['password']);
|
|
$role = $_POST['role'];
|
|
|
|
if (!$nama || !$username || !$password || !in_array($role, ['admin', 'operator'])) {
|
|
$error = "Semua field wajib diisi dengan benar.";
|
|
} else {
|
|
$cek = $conn->prepare("SELECT id FROM users WHERE username = ?");
|
|
$cek->bind_param("s", $username);
|
|
$cek->execute();
|
|
$cek->store_result();
|
|
|
|
if ($cek->num_rows > 0) {
|
|
$error = "Username <b>$username</b> sudah digunakan.";
|
|
} else {
|
|
$hash = password_hash($password, PASSWORD_DEFAULT);
|
|
$stmt = $conn->prepare("INSERT INTO users (nama, username, password, role) VALUES (?, ?, ?, ?)");
|
|
$stmt->bind_param("ssss", $nama, $username, $hash, $role);
|
|
if ($stmt->execute()) {
|
|
$success = "User <b>$username</b> berhasil ditambahkan.";
|
|
} else {
|
|
$error = "Gagal menyimpan user: " . $stmt->error;
|
|
}
|
|
$stmt->close();
|
|
}
|
|
$cek->close();
|
|
}
|
|
}
|
|
|
|
// --- HAPUS USER ---
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'hapus') {
|
|
$id = (int) $_POST['id'];
|
|
if ($id === (int) $_SESSION['user']) {
|
|
$error = "Tidak bisa menghapus akun yang sedang aktif.";
|
|
} else {
|
|
$stmt = $conn->prepare("DELETE FROM users WHERE id = ?");
|
|
$stmt->bind_param("i", $id);
|
|
if ($stmt->execute()) {
|
|
$success = "User berhasil dihapus.";
|
|
} else {
|
|
$error = "Gagal menghapus user.";
|
|
}
|
|
$stmt->close();
|
|
}
|
|
}
|
|
|
|
$users = $conn->query("SELECT id, nama, username, role, created_at FROM users ORDER BY created_at DESC");
|
|
$conn->close();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Kelola User - Sistem Pemetaan</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: 'Segoe UI', sans-serif;
|
|
background: #f0f4f8;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.navbar {
|
|
background: #1B2A4A;
|
|
color: white;
|
|
padding: 14px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.navbar h1 { font-size: 18px; font-weight: 600; }
|
|
|
|
.navbar a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
opacity: 0.85;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.navbar a:hover { opacity: 1; }
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 32px auto;
|
|
padding: 0 20px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
|
|
thead th:last-child,
|
|
tbody td:last-child {
|
|
min-width: 160px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
background: #1B2A4A;
|
|
color: white;
|
|
padding: 16px 20px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Header edit punya warna berbeda */
|
|
.card-header.edit { background: #2980b9; }
|
|
|
|
.card-body { padding: 20px; }
|
|
|
|
.alert {
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alert-success { background: #eafaf1; color: #1e8449; }
|
|
.alert-error { background: #fdecea; color: #c0392b; }
|
|
|
|
table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
|
|
|
thead th {
|
|
background: #f0f4f8;
|
|
color: #555;
|
|
font-weight: 600;
|
|
padding: 10px 14px;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
tbody tr {
|
|
border-bottom: 1px solid #f0f4f8;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
tbody tr:hover { background: #fafbfc; }
|
|
tbody td { padding: 12px 14px; color: #333; }
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.badge-admin { background: #1B2A4A; color: white; }
|
|
.badge-operator { background: #e8f4fd; color: #2471a3; }
|
|
|
|
.badge-me {
|
|
font-size: 10px;
|
|
background: #eafaf1;
|
|
color: #1e8449;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.action-buttons { display: flex; gap: 6px; }
|
|
|
|
.btn-edit, .btn-hapus {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
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-group { margin-bottom: 14px; }
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #555;
|
|
margin-bottom: 5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 9px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus { border-color: #1B2A4A; }
|
|
|
|
.form-group .hint {
|
|
font-size: 11px;
|
|
color: #aaa;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.btn-submit {
|
|
width: 100%;
|
|
padding: 11px;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.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>
|
|
|
|
<nav class="navbar">
|
|
<h1><i class="fa-solid fa-users-gear"></i> Kelola User</h1>
|
|
<a href="index.php">
|
|
<i class="fa-solid fa-map-location-dot"></i> Kembali ke Peta
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
|
|
<!-- TABEL DAFTAR USER -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa-solid fa-list"></i> Daftar User
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<?php if ($error): ?>
|
|
<div class="alert alert-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 ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Nama</th>
|
|
<th>Username</th>
|
|
<th>Role</th>
|
|
<th>Dibuat</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php $no = 1; while ($u = $users->fetch_assoc()): ?>
|
|
<tr>
|
|
<td><?= $no++ ?></td>
|
|
<td>
|
|
<?= htmlspecialchars($u['nama']) ?>
|
|
<?php if ($u['id'] == $_SESSION['user']): ?>
|
|
<span class="badge-me">Anda</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td><?= htmlspecialchars($u['username']) ?></td>
|
|
<td>
|
|
<span class="badge badge-<?= $u['role'] ?>">
|
|
<?= ucfirst($u['role']) ?>
|
|
</span>
|
|
</td>
|
|
<td><?= date('d M Y', strtotime($u['created_at'])) ?></td>
|
|
<td>
|
|
<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>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<?php endwhile; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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" 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" id="input-nama"
|
|
placeholder="Contoh: Budi Santoso" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<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" 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" id="input-role">
|
|
<option value="operator">Operator</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
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>
|
|
|
|
</body>
|
|
</html>
|