commencing warcrime by moving the file into xampp/htdocs
This commit is contained in:
parent
1014525aea
commit
89f19e87f3
15
.vscode/launch.json
vendored
Normal file
15
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
49
auth.php
49
auth.php
@ -1,50 +1,62 @@
|
||||
<?php
|
||||
// Mulai session paling atas (wajib untuk login)
|
||||
session_start();
|
||||
|
||||
// Panggil koneksi database sekali saja
|
||||
require_once "Config.php";
|
||||
|
||||
// ==========================================
|
||||
// BAGIAN 1: LOGIKA REGISTER
|
||||
// ==========================================
|
||||
if (isset($_POST['btn-register'])) {
|
||||
|
||||
$username = $_POST['username'];
|
||||
$email = $_POST['email'];
|
||||
$password = $_POST['password'];
|
||||
// Pastikan di HTML name-nya sudah 'confirm_password'
|
||||
$confirm = $_POST['confirm_password'];
|
||||
|
||||
// Validasi input kosong
|
||||
// --- 1. VALIDASI DATA ---
|
||||
|
||||
// Cek Kosong
|
||||
if (empty($username) || empty($email) || empty($password) || empty($confirm)) {
|
||||
echo "<script>alert('Semua data harus diisi!'); window.location='index.html';</script>";
|
||||
echo "<script>alert('Semua data wajib diisi!'); window.location='index.html';</script>";
|
||||
exit;
|
||||
}
|
||||
|
||||
// Validasi password match
|
||||
// Cek Format Email (Biar gak ngawur)
|
||||
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||
echo "<script>alert('Format email tidak valid! (contoh: nama@email.com)'); window.location='index.html';</script>";
|
||||
exit;
|
||||
}
|
||||
|
||||
// Cek Panjang Password (Minimal 6)
|
||||
if (strlen($password) < 6) {
|
||||
echo "<script>alert('Password terlalu pendek! Minimal 6 karakter.'); window.location='index.html';</script>";
|
||||
exit;
|
||||
}
|
||||
|
||||
// Cek Kesamaan Password
|
||||
if ($password !== $confirm) {
|
||||
echo "<script>alert('Password dan Konfirmasi tidak cocok!'); window.location='index.html';</script>";
|
||||
exit;
|
||||
}
|
||||
|
||||
// Cek Username/Email sudah ada atau belum
|
||||
// --- 2. CEK DUPLIKAT DI DATABASE ---
|
||||
$stmt = mysqli_prepare($conn, "SELECT id FROM users WHERE username = ? OR email = ?");
|
||||
mysqli_stmt_bind_param($stmt, "ss", $username, $email);
|
||||
mysqli_stmt_execute($stmt);
|
||||
mysqli_stmt_store_result($stmt);
|
||||
|
||||
if (mysqli_stmt_num_rows($stmt) > 0) {
|
||||
echo "<script>alert('Username atau Email sudah terpakai!'); window.location='index.html';</script>";
|
||||
exit; // Stop di sini
|
||||
echo "<script>alert('Username atau Email sudah terpakai! Ganti yang lain.'); window.location='index.html';</script>";
|
||||
exit;
|
||||
}
|
||||
mysqli_stmt_close($stmt);
|
||||
|
||||
// Hash password & Insert
|
||||
// --- 3. SIMPAN DATA ---
|
||||
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
|
||||
$stmtInsert = mysqli_prepare($conn, "INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
|
||||
mysqli_stmt_bind_param($stmtInsert, "sss", $username, $email, $hashed_password);
|
||||
|
||||
if (mysqli_stmt_execute($stmtInsert)) {
|
||||
// Balik ke index.html tapi kasih pesan sukses
|
||||
echo "<script>alert('Registrasi Berhasil! Silakan Login.'); window.location='index.html';</script>";
|
||||
} else {
|
||||
echo "Error: " . mysqli_error($conn);
|
||||
@ -68,23 +80,18 @@ else if (isset($_POST['btn-login'])) {
|
||||
$result = mysqli_stmt_get_result($stmt);
|
||||
$row = mysqli_fetch_assoc($result);
|
||||
|
||||
// Cek user ada ATAU password salah
|
||||
// JIKA GAGAL
|
||||
if (!$row || !password_verify($password, $row['password'])) {
|
||||
echo "<script>
|
||||
alert('Username atau Password salah!');
|
||||
window.location.href='index.html';
|
||||
</script>";
|
||||
// Kirim sinyal error ke HTML (Kotak Merah)
|
||||
header("Location: index.html?error=gagal");
|
||||
exit;
|
||||
}
|
||||
|
||||
// Login Sukses
|
||||
// JIKA SUKSES
|
||||
$_SESSION['username'] = $row['username'];
|
||||
$_SESSION['login'] = true;
|
||||
|
||||
echo "<script>
|
||||
alert('Login Berhasil! Selamat Datang, " . $username . "');
|
||||
window.location.href='mainboard.html';
|
||||
</script>";
|
||||
header("Location: mainboard.html");
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
169
index.html
169
index.html
@ -11,7 +11,7 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
@ -20,17 +20,17 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- 2. CONTAINER KARTU --- */
|
||||
/* --- 2. CONTAINER KARTU (DENGAN ANIMASI RESIZE) --- */
|
||||
.auth-card {
|
||||
width: 380px;
|
||||
background: rgba(255, 255, 255, 0.9); /* Dibuat lebih solid sedikit */
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
/* Animasi Tinggi agar mulus saat resize */
|
||||
/* PENTING: Transisi halus saat tinggi berubah */
|
||||
transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
@ -38,31 +38,27 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- PERBAIKAN UTAMA ADA DI SINI --- */
|
||||
.forms-container {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
width: 200%; /* Lebar 200% untuk menampung Login & Register berdampingan */
|
||||
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
/* PENTING: Agar form Login tidak dipaksa setinggi form Register */
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.auth-card.active .forms-container {
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%); /* Geser ke kiri untuk menampilkan Register */
|
||||
}
|
||||
|
||||
/* --- 3. STYLING FORM INDIVIDUAL --- */
|
||||
/* --- 3. STYLING FORM --- */
|
||||
form {
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
padding: 40px; /* Padding ini menentukan jarak dalam */
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* Hapus justify-content: center agar tinggi dihitung dari konten asli */
|
||||
}
|
||||
|
||||
/* Typography & Inputs */
|
||||
h2 {
|
||||
margin: 0 0 10px;
|
||||
text-align: center;
|
||||
@ -105,14 +101,28 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
|
||||
.switch-text a { color: purple; text-decoration: none; font-weight: bold; cursor: pointer; }
|
||||
.switch-text a:hover { text-decoration: underline; }
|
||||
|
||||
/* Error Box */
|
||||
/* --- ERROR BOX (KOTAK MERAH) --- */
|
||||
.error-box {
|
||||
width: 100%; color: #d8000c; background: #ffbaba;
|
||||
padding: 10px; border-radius: 10px; margin-bottom: 15px;
|
||||
font-size: 13px; text-align: center; display: none;
|
||||
width: 100%;
|
||||
color: #d8000c;
|
||||
background: #ffbaba;
|
||||
border: 1px solid #ff7675;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: none; /* Default sembunyi */
|
||||
font-weight: bold;
|
||||
animation: fadeIn 0.3s;
|
||||
}
|
||||
|
||||
/* Dekorasi (Buah & Glitter) */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Dekorasi Buah */
|
||||
.fruit { position: absolute; width: 90px; opacity: 0.85; animation: float 6s infinite ease-in-out, drift 15s infinite linear; pointer-events: none; z-index: 1; }
|
||||
.f1 { top: 8%; left: 10%; width: 80px; } .f2 { top: 65%; right: 12%; } .f3 { top: 22%; right: 55%; width: 60px; }
|
||||
.f4 { bottom: 15%; left: 28%; } .f5 { bottom: 10%; right: 30%; width: 70px; } .f6 { top: 40%; left: 50%; }
|
||||
@ -120,6 +130,8 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
|
||||
.f10 { bottom: 20%; right: 5%; }
|
||||
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px) rotate(6deg); } }
|
||||
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
|
||||
|
||||
/* Glitter */
|
||||
.glitter { position: absolute; width: 4px; height: 4px; background: purple; border-radius: 50%; opacity: 0; animation: glitter-burst 2s infinite ease-out; pointer-events: none; z-index: 11; }
|
||||
@keyframes glitter-burst { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1) translate(var(--x), var(--y)); opacity: 0; } }
|
||||
</style>
|
||||
@ -172,7 +184,6 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
|
||||
|
||||
<label>Konfirmasi Password</label>
|
||||
<input type="password" id="regConfirm" name="confirm_password" placeholder="Ulangi Password" required>
|
||||
|
||||
<button type="submit" class="btn-submit" name="btn-register">Daftar Sekarang</button>
|
||||
|
||||
<p class="switch-text">
|
||||
@ -185,24 +196,27 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* --- LOGIC RESIZE OTOMATIS --- */
|
||||
/* LOGIC JAVASCRIPT UTAMA
|
||||
Menghubungkan PHP Error -> Tampilan Kotak Merah & Resize & Validasi
|
||||
*/
|
||||
|
||||
const card = document.getElementById("authCard");
|
||||
const loginForm = document.getElementById("loginForm");
|
||||
const registerForm = document.getElementById("registerForm");
|
||||
|
||||
// 1. FUNGSI MENGATUR TINGGI (RESIZE OTOMATIS)
|
||||
function setHeight() {
|
||||
const isActive = card.classList.contains("active");
|
||||
|
||||
// Hitung tinggi form yang sedang aktif
|
||||
// offsetHeight akan mengambil tinggi asli konten + padding
|
||||
// Hitung tinggi form yang sedang aktif (termasuk jika ada error box)
|
||||
const formHeight = isActive ? registerForm.offsetHeight : loginForm.offsetHeight;
|
||||
|
||||
// Terapkan tinggi ke kartu utama
|
||||
// Terapkan tinggi ke card
|
||||
card.style.height = formHeight + "px";
|
||||
}
|
||||
|
||||
// 2. FUNGSI PINDAH LOGIN <-> REGISTER
|
||||
function toggleAuth(mode) {
|
||||
// Hilangkan error saat pindah
|
||||
// Reset Error Box saat pindah
|
||||
document.getElementById("loginError").style.display = "none";
|
||||
document.getElementById("regError").style.display = "none";
|
||||
|
||||
@ -212,47 +226,31 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
|
||||
card.classList.remove("active");
|
||||
}
|
||||
|
||||
// Tunggu transisi slide sedikit, lalu resize
|
||||
// Tunggu animasi slide sebentar, baru resize
|
||||
setTimeout(setHeight, 50);
|
||||
}
|
||||
|
||||
// Jalankan saat pertama kali loading
|
||||
window.addEventListener("load", setHeight);
|
||||
// Jalankan jika ukuran layar browser diubah
|
||||
// 3. DETEKSI ERROR DARI PHP
|
||||
window.addEventListener("DOMContentLoaded", function() {
|
||||
setHeight(); // Set tinggi awal
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const errorStatus = urlParams.get('error');
|
||||
|
||||
if (errorStatus === 'gagal') {
|
||||
const errorBox = document.getElementById("loginError");
|
||||
errorBox.innerText = "Username atau Password salah!";
|
||||
errorBox.style.display = "block";
|
||||
|
||||
setHeight();
|
||||
window.history.replaceState(null, null, window.location.pathname);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", setHeight);
|
||||
|
||||
|
||||
/* --- LOGIC SUBMIT (PHP) --- */
|
||||
loginForm.addEventListener("submit", function(e) {
|
||||
const username = document.getElementById("loginUser").value.trim();
|
||||
const password = document.getElementById("loginPass").value.trim();
|
||||
if (!username || !password) {
|
||||
e.preventDefault();
|
||||
showMsg(document.getElementById("loginError"), "Isi semua data!");
|
||||
}
|
||||
});
|
||||
|
||||
registerForm.addEventListener("submit", function(e) {
|
||||
const pass = document.getElementById("regPass").value.trim();
|
||||
const confirm = document.getElementById("regConfirm").value.trim();
|
||||
if (pass.length < 6) {
|
||||
e.preventDefault();
|
||||
showMsg(document.getElementById("regError"), "Password minimal 6 karakter!");
|
||||
} else if (pass !== confirm) {
|
||||
e.preventDefault();
|
||||
showMsg(document.getElementById("regError"), "Password tidak cocok!");
|
||||
}
|
||||
});
|
||||
|
||||
function showMsg(element, msg) {
|
||||
element.innerText = msg;
|
||||
element.style.display = "block";
|
||||
setHeight(); // Resize ulang jika pesan error muncul
|
||||
}
|
||||
|
||||
/* Glitter Effect */
|
||||
// 4. EFEK GLITTER (HIASAN)
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const card = document.querySelector(".auth-card");
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const g = document.createElement("div");
|
||||
g.className = "glitter";
|
||||
@ -264,6 +262,59 @@ input:focus { outline: none; border-color: purple; background: #fff; box-shadow:
|
||||
card.appendChild(g);
|
||||
}
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// 5. VALIDASI REGISTER (YANG BARU DITAMBAHKAN)
|
||||
// ==========================================
|
||||
if (registerForm) {
|
||||
registerForm.addEventListener("submit", function(event) {
|
||||
// Tahan pengiriman form ke PHP dulu
|
||||
event.preventDefault();
|
||||
|
||||
// Ambil nilai dari inputan (Pastikan ID di HTML sudah sesuai ya!)
|
||||
const username = document.getElementById("regUser").value;
|
||||
const email = document.getElementById("regEmail").value;
|
||||
const password = document.getElementById("regPass").value;
|
||||
const confirmPassword = document.getElementById("regConfirm").value;
|
||||
|
||||
// Fungsi helper untuk menampilkan error di kotak merah Register
|
||||
function showError(pesan) {
|
||||
const errorBox = document.getElementById("regError");
|
||||
errorBox.innerText = pesan;
|
||||
errorBox.style.display = "block";
|
||||
setHeight(); // PENTING: Resize kartu agar pesan error muat
|
||||
}
|
||||
|
||||
// --- Mulai Cek Validasi ---
|
||||
|
||||
// 1. Cek Kosong
|
||||
if (!username || !email || !password || !confirmPassword) {
|
||||
showError("Semua field harus diisi!");
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Cek Format Email
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
showError("Format email tidak valid");
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. Cek Panjang Password
|
||||
if (password.length < 6) {
|
||||
showError("Password minimal 6 karakter");
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. Cek Kesamaan Password
|
||||
if (password !== confirmPassword) {
|
||||
showError("Password dan konfirmasi password tidak cocok");
|
||||
return;
|
||||
}
|
||||
|
||||
// Jika semua aman, baru kirim ke auth.php
|
||||
this.submit();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user