216 lines
7.6 KiB
PHP
216 lines
7.6 KiB
PHP
<?php
|
|
|
|
session_start();
|
|
|
|
if (isset($_SESSION['user_id'])) { header("Location: dashboard.php"); exit; }
|
|
|
|
include 'koneksi.php';
|
|
|
|
$error = '';
|
|
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
|
|
$username = mysqli_real_escape_string($conn, trim($_POST['username']));
|
|
|
|
$password = trim($_POST['password']);
|
|
|
|
if (empty($username) || empty($password)) {
|
|
|
|
$error = 'Username dan password tidak boleh kosong.';
|
|
|
|
} else {
|
|
|
|
$sql = "SELECT * FROM users WHERE username = '$username' LIMIT 1";
|
|
|
|
$result = mysqli_query($conn, $sql);
|
|
|
|
if ($result && mysqli_num_rows($result) === 1) {
|
|
|
|
$user = mysqli_fetch_assoc($result);
|
|
|
|
if (password_verify($password, $user['password'])) {
|
|
echo "<pre>";
|
|
echo "DATA USER DARI DATABASE:\n";
|
|
var_dump($user);
|
|
echo "</pre>";
|
|
exit;
|
|
|
|
$_SESSION['user_id'] = (int)$user['id'];
|
|
|
|
$_SESSION['username'] = $user['username'];
|
|
|
|
$_SESSION['nama'] = $user['nama'];
|
|
|
|
$_SESSION['role'] = $user['role'];
|
|
|
|
$_SESSION['id_rumah_ibadah'] = $user['id_rumah_ibadah'] ? (int)$user['id_rumah_ibadah'] : null;
|
|
|
|
header("Location: dashboard.php");
|
|
|
|
exit;
|
|
|
|
} else { $error = 'Password salah.'; }
|
|
|
|
} else { $error = 'Username tidak ditemukan.'; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="id">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Login — WebGIS Poverty Mapping</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
|
|
<style>
|
|
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
|
|
body{font-family:'Plus Jakarta Sans',sans-serif;background:#0b132b;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
|
|
|
.bg-anim{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}
|
|
|
|
.bg-anim .c{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(91,192,190,0.08),transparent 70%);animation:fl 20s infinite ease-in-out}
|
|
|
|
.bg-anim .c:nth-child(1){width:600px;height:600px;top:-200px;left:-100px}
|
|
|
|
.bg-anim .c:nth-child(2){width:400px;height:400px;bottom:-100px;right:-80px;animation-delay:-7s;background:radial-gradient(circle,rgba(111,255,233,0.06),transparent 70%)}
|
|
|
|
.bg-anim .c:nth-child(3){width:300px;height:300px;top:50%;left:60%;animation-delay:-14s}
|
|
|
|
@keyframes fl{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(0.95)}}
|
|
|
|
.login-wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:20px}
|
|
|
|
.login-card{background:rgba(14,23,44,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:44px 36px;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:cs .6s ease-out}
|
|
|
|
@keyframes cs{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
|
|
|
|
.brand{text-align:center;margin-bottom:36px}
|
|
|
|
.brand-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#5bc0be,#3a506b);display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:16px;box-shadow:0 8px 24px rgba(91,192,190,0.3)}
|
|
|
|
.brand h1{font-size:1.3rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:6px}
|
|
|
|
.brand p{font-size:0.78rem;color:#78909c;letter-spacing:0.5px}
|
|
|
|
.form-group{margin-bottom:20px}
|
|
|
|
.form-label{font-size:0.68rem;font-weight:700;color:#5bc0be;text-transform:uppercase;letter-spacing:1.5px;display:block;margin-bottom:8px}
|
|
|
|
.input-wrap{position:relative}
|
|
|
|
.input-wrap>i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#5bc0be;font-size:1rem;pointer-events:none}
|
|
|
|
.form-input{width:100%;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:14px 16px 14px 46px;font-size:0.9rem;color:#fff;font-family:inherit;transition:all .3s}
|
|
|
|
.form-input:focus{outline:none;border-color:#5bc0be;background:rgba(0,0,0,0.4);box-shadow:0 0 0 3px rgba(91,192,190,0.1)}
|
|
|
|
.form-input::placeholder{color:rgba(255,255,255,0.3)}
|
|
|
|
.toggle-pw{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:#78909c;cursor:pointer;font-size:1.1rem;padding:4px}
|
|
|
|
.toggle-pw:hover{color:#5bc0be}
|
|
|
|
.error-msg{background:rgba(231,76,60,0.12);border:1px solid rgba(231,76,60,0.3);border-radius:10px;padding:12px 16px;font-size:0.82rem;color:#e74c3c;margin-bottom:20px;display:flex;align-items:center;gap:10px;animation:shake .4s ease-out}
|
|
|
|
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
|
|
|
|
.btn-login{width:100%;padding:15px;border:none;border-radius:12px;background:linear-gradient(135deg,#5bc0be,#3a506b);color:#fff;font-size:0.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:10px}
|
|
|
|
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(91,192,190,0.4)}
|
|
|
|
.login-footer{text-align:center;margin-top:24px;font-size:0.72rem;color:#4a5568}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="bg-anim"><div class="c"></div><div class="c"></div><div class="c"></div></div>
|
|
|
|
<div class="login-wrap">
|
|
|
|
<div class="login-card">
|
|
|
|
<div class="brand">
|
|
|
|
<div class="brand-icon"><i class="bi bi-globe-asia-australia"></i></div>
|
|
|
|
<h1>WebGIS Poverty Mapping</h1>
|
|
|
|
<p>Sistem Informasi Geografis Pemetaan Kemiskinan</p>
|
|
|
|
</div>
|
|
|
|
<?php if($error): ?>
|
|
|
|
<div class="error-msg"><i class="bi bi-exclamation-triangle-fill"></i> <?= htmlspecialchars($error) ?></div>
|
|
|
|
<?php endif; ?>
|
|
|
|
<form method="POST" action="login.php" autocomplete="off">
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="form-label">Username</label>
|
|
|
|
<div class="input-wrap">
|
|
|
|
<i class="bi bi-person-fill"></i>
|
|
|
|
<input type="text" name="username" class="form-input" placeholder="Masukkan username" value="<?= isset($_POST['username'])?htmlspecialchars($_POST['username']):'' ?>" required autofocus>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="form-label">Password</label>
|
|
|
|
<div class="input-wrap">
|
|
|
|
<i class="bi bi-lock-fill"></i>
|
|
|
|
<input type="password" name="password" id="pw" class="form-input" placeholder="Masukkan password" required>
|
|
|
|
<button type="button" class="toggle-pw" onclick="var i=document.getElementById('pw'),e=document.getElementById('eye');if(i.type==='password'){i.type='text';e.className='bi bi-eye-slash-fill'}else{i.type='password';e.className='bi bi-eye-fill'}">
|
|
|
|
<i class="bi bi-eye-fill" id="eye"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button type="submit" class="btn-login"><i class="bi bi-box-arrow-in-right"></i> Masuk ke Sistem</button>
|
|
|
|
</form>
|
|
|
|
<div class="login-footer">© 2026 WebGIS Poverty Mapping — Pontianak</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|