2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testing

Browse Source
This commit is contained in:
Nathan 2025-12-09 15:58:38 +07:00
parent 3fb9ae5e9e
commit 99c33ab04f
4 changed files with 153 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
login.html
View File

@ -313,102 +313,102 @@ input:focus {
</p> </p>
<script> <script>
/*LOGIN VALIDATION*/ /* LOGIN VALIDATION FRONT-END RINGAN */
document.getElementById("loginForm").addEventListener("submit", function(e) { document.getElementById("loginForm").addEventListener("submit", function(e) {
e.preventDefault(); e.preventDefault(); // jangan reload halaman
const username = document.getElementById("username").value.trim(); const username = document.getElementById("username").value.trim();
const password = document.getElementById("password").value.trim(); const password = document.getElementById("password").value.trim();
const errorBox = document.getElementById("errorBox"); const errorBox = document.getElementById("errorBox");
errorBox.style.display = "none"; errorBox.style.display = "none";
errorBox.innerText = ""; errorBox.innerText = "";
if (!username || !password) { // Validasi form
showError("Username dan password harus diisi"); if (!username || !password) {
return; showError("Username dan password harus diisi");
} return;
}
if (password.length < 6) { if (password.length < 6) {
showError("Password minimal 6 karakter"); showError("Password minimal 6 karakter");
return; return;
} }
const usersData = localStorage.getItem("users"); // Kirim ke login.php via AJAX
const users = usersData ? JSON.parse(usersData) : []; fetch("login.php", {
method: "POST",
const user = users.find(u => u.username === username); headers: {"Content-Type": "application/x-www-form-urlencoded"},
body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
if (!user) { })
showError("Username tidak ditemukan"); .then(response => response.text())
return; .then(data => {
} data = data.trim();
if (data === "OK") {
if (user.password !== password) { // login sukses -> redirect ke mainboard.php
showError("Password salah"); window.location.href = "mainboard.php";
return; } else {
} // tampilkan error dari PHP
showError(data);
// Login sukses }
localStorage.setItem("loggedInUser", JSON.stringify(user)); })
window.location.href = "mainboard.html"; .catch(err => {
showError("Terjadi kesalahan server");
console.error(err);
});
}); });
function showError(msg) { function showError(msg) {
const errorBox = document.getElementById("errorBox"); const errorBox = document.getElementById("errorBox");
errorBox.innerText = msg; errorBox.innerText = msg;
errorBox.style.display = "block"; errorBox.style.display = "block";
} }
function toggleDemo() { function toggleDemo() {
const box = document.getElementById("demoBox"); const box = document.getElementById("demoBox");
const btn = document.querySelector(".demo-toggle"); const btn = document.querySelector(".demo-toggle");
box.classList.toggle("show"); box.classList.toggle("show");
// Ubah teks tombol // Ubah teks tombol
if (box.classList.contains("show")) { if (box.classList.contains("show")) {
btn.textContent = "Sembunyikan Demo Akun ▲"; btn.textContent = "Sembunyikan Demo Akun ▲";
} else { } else {
btn.textContent = "Lihat Demo Akun ▼"; btn.textContent = "Lihat Demo Akun ▼";
} }
} }
/* GLITTER EFFECT */
/* GLITTER EFFECT*/
document.addEventListener("DOMContentLoaded", function () { 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 // Random posisi ledakan glitter
for (let i = 0; i < 20; i++) { g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
const g = document.createElement("div"); g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
g.className = "glitter";
// Random posisi ledakan glitter g.style.left = (Math.random() * 100) + "%";
g.style.setProperty("--x", (Math.random() * 200 - 100) + "px"); g.style.top = (Math.random() * 100) + "%";
g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
g.style.left = (Math.random() * 100) + "%"; g.style.animationDelay = (Math.random() * 2) + "s";
g.style.top = (Math.random() * 100) + "%";
g.style.animationDelay = (Math.random() * 2) + "s"; card.appendChild(g);
}
card.appendChild(g);
}
}); });
setInterval(() => { setInterval(() => {
document.querySelectorAll(".glitter").forEach(g => { document.querySelectorAll(".glitter").forEach(g => {
g.style.setProperty("--x", (Math.random() * 200 - 100) + "px"); g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
g.style.setProperty("--y", (Math.random() * 200 - 100) + "px"); g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
g.style.left = Math.random() * window.innerWidth + "px"; g.style.left = Math.random() * window.innerWidth + "px";
g.style.top = Math.random() * window.innerHeight + "px"; g.style.top = Math.random() * window.innerHeight + "px";
}); });
}, 900); }, 900);
</script> </script>
</body> </body>
</html> </html>

17
login.php
View File

@ -5,22 +5,17 @@ include "koneksi.php";
$username = $_POST['username']; $username = $_POST['username'];
$password = $_POST['password']; $password = $_POST['password'];
$enc = md5($password); $stmt = mysqli_prepare($conn, "SELECT * FROM user WHERE username=?");
mysqli_stmt_bind_param($stmt, "s", $username);
$stmt = mysqli_prepare($conn, "SELECT * FROM user WHERE username=? AND password=?");
mysqli_stmt_bind_param($stmt, "ss", $username, $enc);
mysqli_stmt_execute($stmt); mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt); $result = mysqli_stmt_get_result($stmt);
if ($row = mysqli_fetch_assoc($result)) {
if ($row && password_verify($password, $row['password'])) {
$_SESSION['username'] = $row['username']; $_SESSION['username'] = $row['username'];
$_SESSION['email'] = $row['email']; echo "OK";
header("Location: mainboard.html");
exit; exit;
} else { } else {
echo "<script>alert('Username atau password salah!'); window.history.back();</script>"; echo "Username atau password salah";
exit;
} }
?> ?>

66
register.html
View File

@ -255,18 +255,19 @@ input:focus {
</div> </div>
<script> <script>
document.getElementById("registerForm").addEventListener("submit", function (e) { document.getElementById("registerForm").addEventListener("submit", function(e) {
e.preventDefault(); e.preventDefault(); // jangan reload halaman
let username = document.getElementById("username").value.trim(); const username = document.getElementById("username").value.trim();
let email = document.getElementById("email").value.trim(); const email = document.getElementById("email").value.trim();
let password = document.getElementById("password").value.trim(); const password = document.getElementById("password").value.trim();
let confirmPassword = document.getElementById("confirm_password").value.trim(); const confirmPassword = document.getElementById("confirm_password").value.trim();
let errorBox = document.getElementById("errorBox"); const errorBox = document.getElementById("errorBox");
errorBox.style.display = "none"; errorBox.style.display = "none";
errorBox.innerText = "";
// Validasi // Validasi form
if (!username || !email || !password || !confirmPassword) { if (!username || !email || !password || !confirmPassword) {
showError("Semua field harus diisi"); showError("Semua field harus diisi");
return; return;
@ -282,44 +283,39 @@ input:focus {
return; return;
} }
if (password !== confirm_password) { if (password !== confirmPassword) {
showError("Password dan konfirmasi password tidak cocok"); showError("Password dan konfirmasi password tidak cocok");
return; return;
} }
let users = JSON.parse(localStorage.getItem("users") || "[]"); // Kirim ke register.php via AJAX
fetch("register.php", {
if (users.some(u => u.username === username)) { method: "POST",
showError("Username sudah digunakan"); headers: {"Content-Type": "application/x-www-form-urlencoded"},
return; body: `username=${encodeURIComponent(username)}&email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`
} })
.then(response => response.text())
if (users.some(u => u.email === email)) { .then(data => {
showError("Email sudah digunakan"); data = data.trim();
return; if (data === "OK") {
} // registrasi sukses -> redirect ke mainboard.php
window.location.href = "mainboard.php";
// Simpan user baru } else {
users.push({ showError(data); // tampilkan error dari PHP
id: Date.now().toString(), }
username, })
email, .catch(err => {
password, showError("Terjadi kesalahan server");
role: "player" console.error(err);
}); });
localStorage.setItem("users", JSON.stringify(users));
alert("Registrasi berhasil! Silakan login.");
window.location.href = "login.html";
}); });
function showError(msg) { function showError(msg) {
let box = document.getElementById("errorBox"); const box = document.getElementById("errorBox");
box.innerText = msg; box.innerText = msg;
box.style.display = "block"; box.style.display = "block";
} }
</script> </script>
</body> </body>
</html> </html>

73
register.php
View File

@ -1,34 +1,53 @@
<?php <?php
session_start();
include "koneksi.php"; include "koneksi.php";
$username = $_POST['username']; if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$email = $_POST['email']; $username = trim($_POST['username']);
$password = $_POST['password']; $email = trim($_POST['email']);
$confirm = $_POST['confirm_password']; $password = trim($_POST['password']);
$confirmPassword = trim($_POST['confirm_password']);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { if (!$username || !$email || !$password || !$confirmPassword) {
echo "<script>alert('Format email tidak valid!'); window.history.back();</script>"; 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; 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);
}
?> ?>