Login sederhana
Struktur Folder :
siswa.json :
[
{
"username": "admin",
"nama": "bintang",
"password": 12345
},
{
"username": "superadmin",
"nama": "asep",
"password": 12345
}
]
file app.js
let siswa = [];
fetch("siswa.json")
.then(response => response.json())
.then(data => {
siswa = data;
console.log("Data loaded:", siswa);
});
// membuat login
function login() {
let username = document.getElementById("u").value;
let password = document.getElementById("p").value;
if (siswa.length === 0) {
document.getElementById("hasil").innerHTML =
"Data belum siap, tunggu sebentar...";
return;
}
let ditemukan = false;
for (let i = 0; i < siswa.length; i++) {
if (
siswa[i].username === username &&
siswa[i].password == password
) {
// document.getElementById("hasil").innerHTML =
// "Login berhasil! Selamat datang " + siswa[i].nama;
sessionStorage.setItem("nama", siswa[i].nama)
window.location.href = "app/dashboard.html"
ditemukan = true;
break;
}
}
if (!ditemukan) {
document.getElementById("hasil").innerHTML =
"Username atau password salah!";
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="u" placeholder="Username">
<input type="password" id="p" placeholder="Password">
<button onclick="login()">Login</button>
<p id="hasil"></p>
<script src="app.js"> </script>
</body>
</html>
app/dashboard.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="judul"></h1>
<button onclick="logout()">Logout</button>
<script>
let namaUser = sessionStorage.getItem("nama");
if (namaUser) {
document.getElementById("judul").innerText =
`Selamat datang ${namaUser} di dashboard`;
} else {
window.location.href = "../index.html";
}
function logout() {
sessionStorage.removeItem("nama"); // Hapus item tertentu
// sessionStorage.clear(); // Atau hapus SEMUA session sekaligus
window.location.href = "../index.html";
}
</script>
</body>
</html>