Cara Membuat Form Login Sederhana Tanpa Database dengan JavaScript
Cara Membuat Form Login Sederhana Tanpa Database dengan JavaScript - Pada kesempatan ini, saya akan memberikan tutorial cara membuat login sederhana menggunakan HTML dan CSS, serta menyimpan data secara lokal lewat sessionStorage.
SessionStorage sendiri merupakan API Web Storage yang dipakai untuk menyimpan data secara sementara di sisi klien (browser). Data yang disimpan dalam sessionStorage hanya akan tersedia selama sesi browser berlangsung, artinya data tersebut akan hilang ketika tab atau jendela browser ditutup. sessionStorage berguna untuk menyimpan informasi yang diperlukan selama interaksi pengguna dengan halaman web tertentu, seperti data formulir atau preferensi pengguna.
Sebelum membuat, berikut alat yang harus disiapkan.
- Komputer/Laptop/Android. jika tidak punya silahkan pinjam teman anda.
- Aplikasi Text Editor. anda bisa menggunakan notepad, notepad++, VSC, sublime text, dll.
- Browser. untuk membuka file websitenya nanti.
- Niat yang Tulus. tanpa niat usahamu akan sia-sia.
Cara Membuat Form Login dengan Javascript
Berikut ini panduan lengkap membuat halaman login dengan database lokal sessionStorage, antara lain :
1. Buat File index.html
Langkah pertama buat terlebih dahulu file index.html, kemudian copy dan paster code dibawah ini.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Halaman Login | AnsoriWeb.com</title><style></style></head><body><div class="container"><form class="login-form" id="loginForm"><h2>Login</h2><div class="form-group"><label for="username">Username</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">Password</label><input type="password" id="password" name="password" required></div><button type="submit">Login</button></form></div><script></script></body></html>
2. Tambahkan Kode CSS
Kemudian tambahkan kode CSS berikut diantara elemen <head> </head>, untuk scriptnya sebagai berikut :
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
width: 300px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form {
display: flex;
flex-direction: column;
}
.form-group {
margin-bottom: 15px;
}
input[type="text"],
input[type="password"] {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
@media screen and (max-width: 480px) {
.container {
width: 90%;
}
}
3. Tambahkan Kode Javascript
Setelah itu tambahkan kode Javascript diantara tag <script> </script> agar fungsi menyimpan data ke sisi klien berjalan, untuk codenya sebagai berikut.
document.addEventListener("DOMContentLoaded", function() {const loginForm = document.getElementById("loginForm");loginForm.addEventListener("submit", function(event) {event.preventDefault();const username = document.getElementById("username").value;const password = document.getElementById("password").value;// Dummy authentication (replace this with your actual authentication logic)if (username === "admin" && password === "admin") {// Simpan informasi login di session storagesessionStorage.setItem("isLoggedIn", "true");// Redirect ke halaman tujuanalert("Login berhasil!");window.location.href = "https://www.ansoriweb.com";} else {alert("Username atau password salah. Silakan coba lagi.");}});});
4. Jalankan Kode
Jika sudah selesai, silakan buka file index.html menggunakan browser yang telah Anda siapkan. Login dengan username admin dan password admin, apabila berhasil akan diarahkan ke link blog dan memunculkan alert "Login Berhasil", jika salah akan muncul notifikasi "Username atau password salah. Silakan coba lagi."
Kesimpulan
Demikian panduan membuat halaman login web sederhana dengan javascript, semoga tutorial ini bermanfaat bagi kita semua yang sedang mencari referensi yang diberikan oleh guru anda. Jika ada pertanyaan atau kurang jelas, script error, atau segala pertanyaan tentang artikel ini bisa ditanyakan melalui kolom komentar dibawah ini. Terima Kasih.