From 8f7260663579e3c6817ac3ec2e113c270d265a35 Mon Sep 17 00:00:00 2001
From: Nathan <nathan-h.inf25@ukwms.ac.id>
Date: Tue, 9 Dec 2025 15:58:38 +0700
Subject: [PATCH] testing

---
 login.html    | 143 ++++++++++++++++++++++++++------------------------
 login.php     |  18 +++----
 register.html |  66 +++++++++++------------
 register.php  |  73 ++++++++++++++++----------
 4 files changed, 158 insertions(+), 142 deletions(-)

diff --git a/login.html b/login.html
index c89dbe5..b0c8650 100644
--- a/login.html
+++ b/login.html
@@ -313,102 +313,107 @@ input:focus {
       </p>
 
 <script>
-  /*LOGIN VALIDATION*/
 document.getElementById("loginForm").addEventListener("submit", function(e) {
-  e.preventDefault();
+    e.preventDefault(); // jangan reload halaman
 
-  const username = document.getElementById("username").value.trim();
-  const password = document.getElementById("password").value.trim();
-  const errorBox = document.getElementById("errorBox");
+    const username = document.getElementById("username").value.trim();
+    const password = document.getElementById("password").value.trim();
+    const errorBox = document.getElementById("errorBox");
 
-  errorBox.style.display = "none";
-  errorBox.innerText = "";
+    errorBox.style.display = "none";
+    errorBox.innerText = "";
 
-  if (!username || !password) {
-    showError("Username dan password harus diisi");
-    return;
-  }
+    // Validasi form
+    if (!username || !password) {
+        showError("Username dan password harus diisi");
+        return;
+    }
 
-  if (password.length < 6) {
-    showError("Password minimal 6 karakter");
-    return;
-  }
+    if (password.length < 6) {
+        showError("Password minimal 6 karakter");
+        return;
+    }
 
-  const usersData = localStorage.getItem("users");
-  const users = usersData ? JSON.parse(usersData) : [];
+    // Kirim ke login.php via AJAX
+    fetch("login.php", {
+        method: "POST",
+        headers: {"Content-Type": "application/x-www-form-urlencoded"},
+        body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
+    })
+    .then(response => response.text())
+    .then(data => {
+        // Hapus whitespace & newline dari server
+        data = data.trim();
 
-  const user = users.find(u => u.username === username);
-
-  if (!user) {
-    showError("Username tidak ditemukan");
-    return;
-  }
-
-  if (user.password !== password) {
-    showError("Password salah");
-    return;
-  }
-
-  // Login sukses
-  localStorage.setItem("loggedInUser", JSON.stringify(user));
-  window.location.href = "mainboard.html";
+        // Cek jawaban PHP
+        if (data === "OK") {
+            window.location.href = "mainboard.php";
+        } else if (data.length > 0) {
+            // Kalau PHP mengirim pesan kesalahan (username/password salah)
+            showError(data);
+        } else {
+            // Kalau PHP ngirim kosong atau error tak terduga
+            showError("Terjadi kesalahan saat login");
+        }
+    })
+    .catch(err => {
+        // Error network / fetch
+        showError("Terjadi kesalahan server");
+        console.error(err);
+    });
 });
 
 function showError(msg) {
-  const errorBox = document.getElementById("errorBox");
-  errorBox.innerText = msg;
-  errorBox.style.display = "block";
+    const errorBox = document.getElementById("errorBox");
+    errorBox.innerText = msg;
+    errorBox.style.display = "block";
 }
 
 function toggleDemo() {
-  const box = document.getElementById("demoBox");
-  const btn = document.querySelector(".demo-toggle");
+    const box = document.getElementById("demoBox");
+    const btn = document.querySelector(".demo-toggle");
 
-  box.classList.toggle("show");
+    box.classList.toggle("show");
 
-  // Ubah teks tombol
-  if (box.classList.contains("show")) {
-    btn.textContent = "Sembunyikan Demo Akun ▲";
-  } else {
-    btn.textContent = "Lihat Demo Akun ▼";
-  }
+    // Ubah teks tombol
+    if (box.classList.contains("show")) {
+        btn.textContent = "Sembunyikan Demo Akun ▲";
+    } else {
+        btn.textContent = "Lihat Demo Akun ▼";
+    }
 }
 
-
-/* GLITTER EFFECT*/
-
+/* GLITTER EFFECT */
 document.addEventListener("DOMContentLoaded", function () {
-  const card = document.querySelector(".login-card");
+    const card = document.querySelector(".login-card");
+    if (!card) return;
 
-  if (!card) return;
+    for (let i = 0; i < 20; i++) {
+        const g = document.createElement("div");
+        g.className = "glitter";
 
-  // Tambah glitter 20x
-  for (let i = 0; i < 20; i++) {
-    const g = document.createElement("div");
-    g.className = "glitter";
+        // Random posisi ledakan glitter
+        g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
+        g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
 
-    // Random posisi ledakan glitter
-    g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
-    g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
+        g.style.left = (Math.random() * 100) + "%";
+        g.style.top = (Math.random() * 100) + "%";
 
-    g.style.left = (Math.random() * 100) + "%";
-    g.style.top = (Math.random() * 100) + "%";
+        g.style.animationDelay = (Math.random() * 2) + "s";
 
-    g.style.animationDelay = (Math.random() * 2) + "s";
-
-    card.appendChild(g);
-  }
+        card.appendChild(g);
+    }
 });
 
 setInterval(() => {
-  document.querySelectorAll(".glitter").forEach(g => {
-    g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
-    g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
-    g.style.left = Math.random() * window.innerWidth + "px";
-    g.style.top = Math.random() * window.innerHeight + "px";
-  });
+    document.querySelectorAll(".glitter").forEach(g => {
+        g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
+        g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
+        g.style.left = Math.random() * window.innerWidth + "px";
+        g.style.top = Math.random() * window.innerHeight + "px";
+    });
 }, 900);
-
 </script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/login.php b/login.php
index ae1ea99..04ccfc9 100644
--- a/login.php
+++ b/login.php
@@ -5,22 +5,18 @@ include "koneksi.php";
 $username = $_POST['username'];
 $password = $_POST['password'];
 
-$enc = md5($password);
-
-$stmt = mysqli_prepare($conn, "SELECT * FROM user WHERE username=? AND password=?");
-mysqli_stmt_bind_param($stmt, "ss", $username, $enc);
+$stmt = mysqli_prepare($conn, "SELECT * FROM user WHERE username=?");
+mysqli_stmt_bind_param($stmt, "s", $username);
 mysqli_stmt_execute($stmt);
-
 $result = mysqli_stmt_get_result($stmt);
-if ($row = mysqli_fetch_assoc($result)) {
+$row = mysqli_fetch_assoc($result); 
 
+if ($row && password_verify($password, $row['password'])) {
     $_SESSION['username'] = $row['username'];
-    $_SESSION['email'] = $row['email'];
-
-    header("Location: mainboard.html");
+    echo "OK";
     exit;
-
 } else {
-    echo "<script>alert('Username atau password salah!'); window.history.back();</script>";
+    echo "Username atau password salah";
+    exit;
 }
 ?>
diff --git a/register.html b/register.html
index 1abb2b2..eef7c7d 100644
--- a/register.html
+++ b/register.html
@@ -255,18 +255,19 @@ input:focus {
 </div>
 
 <script>
-    document.getElementById("registerForm").addEventListener("submit", function (e) {
-    e.preventDefault();
+document.getElementById("registerForm").addEventListener("submit", function(e) {
+    e.preventDefault(); // jangan reload halaman
 
-    let username = document.getElementById("username").value.trim();
-    let email = document.getElementById("email").value.trim();
-    let password = document.getElementById("password").value.trim();
-    let confirmPassword = document.getElementById("confirm_password").value.trim();
-    let errorBox = document.getElementById("errorBox");
+    const username = document.getElementById("username").value.trim();
+    const email = document.getElementById("email").value.trim();
+    const password = document.getElementById("password").value.trim();
+    const confirmPassword = document.getElementById("confirm_password").value.trim();
+    const errorBox = document.getElementById("errorBox");
 
     errorBox.style.display = "none";
+    errorBox.innerText = "";
 
-    // Validasi
+    // Validasi form
     if (!username || !email || !password || !confirmPassword) {
         showError("Semua field harus diisi");
         return;
@@ -282,44 +283,39 @@ input:focus {
         return;
     }
 
-    if (password !== confirm_password) {
+    if (password !== confirmPassword) {
         showError("Password dan konfirmasi password tidak cocok");
         return;
     }
 
-    let users = JSON.parse(localStorage.getItem("users") || "[]");
-
-    if (users.some(u => u.username === username)) {
-        showError("Username sudah digunakan");
-        return;
-    }
-
-    if (users.some(u => u.email === email)) {
-        showError("Email sudah digunakan");
-        return;
-    }
-
-    // Simpan user baru
-    users.push({
-        id: Date.now().toString(),
-        username,
-        email,
-        password,
-        role: "player"
+    // Kirim ke register.php via AJAX
+    fetch("register.php", {
+        method: "POST",
+        headers: {"Content-Type": "application/x-www-form-urlencoded"},
+        body: `username=${encodeURIComponent(username)}&email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`
+    })
+    .then(response => response.text())
+    .then(data => {
+        data = data.trim();
+        if (data === "OK") {
+            // registrasi sukses -> redirect ke mainboard.php
+            window.location.href = "mainboard.php";
+        } else {
+            showError(data); // tampilkan error dari PHP
+        }
+    })
+    .catch(err => {
+        showError("Terjadi kesalahan server");
+        console.error(err);
     });
-
-    localStorage.setItem("users", JSON.stringify(users));
-
-    alert("Registrasi berhasil! Silakan login.");
-    window.location.href = "login.html";
 });
 
 function showError(msg) {
-    let box = document.getElementById("errorBox");
+    const box = document.getElementById("errorBox");
     box.innerText = msg;
     box.style.display = "block";
 }
-
 </script>
+
 </body>
 </html>
diff --git a/register.php b/register.php
index 9a5858c..6507bb1 100644
--- a/register.php
+++ b/register.php
@@ -1,34 +1,53 @@
 <?php
+session_start();
 include "koneksi.php";
 
-$username = $_POST['username'];
-$email = $_POST['email'];
-$password = $_POST['password'];
-$confirm = $_POST['confirm_password'];
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $username = trim($_POST['username']);
+    $email = trim($_POST['email']);
+    $password = trim($_POST['password']);
+    $confirmPassword = trim($_POST['confirm_password']);
 
-if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
-    echo "<script>alert('Format email tidak valid!'); window.history.back();</script>";
+    if (!$username || !$email || !$password || !$confirmPassword) {
+        echo "<script>alert('Semua field harus diisi'); window.history.back();</script>";
+        exit;
+    }
+
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        echo "<script>alert('Format email tidak valid'); window.history.back();</script>";
+        exit;
+    }
+
+    if ($password !== $confirmPassword) {
+        echo "<script>alert('Password dan konfirmasi password tidak cocok'); window.history.back();</script>";
+        exit;
+    }
+
+    if (strlen($password) < 6) {
+        echo "<script>alert('Password minimal 6 karakter'); window.history.back();</script>";
+        exit;
+    }
+
+    // cek username & email di database
+    $stmt = mysqli_prepare($conn, "SELECT id FROM user 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 digunakan'); window.history.back();</script>";
+        exit;
+    }
+
+    // hash password
+    $hash = password_hash($password, PASSWORD_DEFAULT);
+
+    // insert user
+    $stmt = mysqli_prepare($conn, "INSERT INTO user (username, email, password, role) VALUES (?, ?, ?, 'player')");
+    mysqli_stmt_bind_param($stmt, "sss", $username, $email, $hash);
+    mysqli_stmt_execute($stmt);
+
+    echo "<script>alert('Registrasi berhasil! Silakan login.'); window.location.href='login.html';</script>";
     exit;
 }
-
-if ($password != $confirm) {
-    echo "<script>alert('Password tidak sama'); window.history.back();</script>";
-    exit;
-}
-
-$cek = mysqli_query($conn, "SELECT * FROM user WHERE username='$username' OR email='$email'");
-if (mysqli_num_rows($cek) > 0) {
-    echo "<script>alert('Username atau email sudah digunakan'); window.history.back();</script>";
-    exit;
-}
-
-$hash = md5($password);
-
-$sql = "INSERT INTO user (username, email, password) VALUES ('$username', '$email', '$hash')";
-if (mysqli_query($conn, $sql)) {
-    echo "<script>alert('Registrasi berhasil! Silakan login.'); window.location='login.html';</script>";
-} else {
-    echo "Error: " . mysqli_error($conn);
-}
-
 ?>