Cara Membuat Sistem Login Menggunakan Javascript
1. Buatlah file dengan nama terserah sesuka kalian dan jangan lupa ekstensi nya .html. Contoh nama file nya login.php atau admin.php
2. Seperti biasa kita masukkan codingan awal html. Kali ini saya akan membuat tampilan nya sederhana dan menggunakan Bootstrap. Jika kamu ingin memperbagus tampilan nya, kamu bisa menambahkan CSS nya. Contoh codingan nya seperti dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Admin Login</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>3. Dibawah tag <body> kita isi codingan seperti dibawah ini
<div class="container">
<div class="text-center mt-5">
<h2>Admin Login</h2>
</div>
<form id="form-login" class="bg-light m-5 p-5">
<div class="mb-3">
<label class="form-label">Nama Pengguna</label>
<input type="text" class="form-control" id="username">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary" onclick="login()">Submit</button>
</form>
</div>4. Diatas kita sudah membuat tampilan nya dan belum membuat aksi untuk melakukan login nya. Untuk membuat aksi login nya, kita akan menggunakan bahasa Javascript. Berikut ini adalah codingan nya.
<script type="text/javascript">
localStorage.setItem('user-name', 'admin');
localStorage.setItem('pass-word', 'admin');
const formMasuk = document.querySelector('.form-login');
function login() {
const namaPengguna = document.querySelector('#username');
const password = document.querySelector('#password');
if(namaPengguna.value == localStorage.getItem('user-name') && password.value == localStorage.getItem('pass-word')){
alert('anda berhasil Login');
}else {
alert('nama pengguna atau password anda salah');
}
formMasuk.reset();
}
</script>Contoh diatas saya menggunakan admin sebagai username dan password nya. Kamu bisa mengubahnya sesuai dengan keinginan mu.
Maksud dari codingan diatas adalah ketika kamu berhasil masuk menggunakan username dan password admin, akan muncuk notifikasi kalau kamu berhasil masuk. Dan jika kamu menginputkan username ataupun password yang salah, akan muncul notifikasi bahwa username atau password yang kamu inputkan salah. Maka halaman admin tersebut akan ter refresh sendiri dan kamu disuruh login ulang.5. Setelah menambahkan javascript diatas, sekarang admin login nya sudah memiliki aksi dan sudah bisa melakukan autentikasi untuk login. Namun, codingan tersebut belum sempurna karena kita belum memberikan aksi redirect ke URL lain atau ke halaman lain. Jadi ketika sudah berhasil login pun tetap saja berada di halaman login, karena kita belum menambahkan codingan untuk redirect ke URL atau halaman lain. Codingan redirect ke halaman lain bisa kita tambahkan dibawah codingan alert('anda berhasil login');. Berikut ini adalah contoh codingan tambahan nya untuk redirect ke halaman lain
window.open('https://freezegans.blogspot.com');6. Untuk URL nya bisa kamu ganti sesuai dengan URL yang akan kamu gunakan setelah berhasil login. Codingan lengkap nya seperti dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Admin Login</title>
</head>
<body>
<div class="container">
<div class="text-center mt-5">
<h2>Admin Login</h2>
</div>
<form id="form-login" class="bg-light m-5 p-5">
<div class="mb-3">
<label class="form-label">Nama Pengguna</label>
<input type="text" class="form-control" id="username">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary" onclick="login()">Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script type="text/javascript">
localStorage.setItem('user-name', 'admin');
localStorage.setItem('pass-word', 'admin');
const formMasuk = document.querySelector('.form-login');
function login() {
const namaPengguna = document.querySelector('#username');
const password = document.querySelector('#password');
if(namaPengguna.value == localStorage.getItem('user-name') && password.value == localStorage.getItem('pass-word')){
alert('anda berhasil Login')
window.open('https://freezegans.blogspot.com');
}else {
alert('nama pengguna atau password anda salah');
}
formMasuk.reset();
}
</script>
</body>
</html>
Gabung dalam percakapan