Membuat Halaman Login yang Terhubung ke Sistem Autentikasi

Halaman login adalah bagian penting dalam sebuah sistem autentikasi yang memungkinkan pengguna untuk mengakses data atau fitur yang telah dipersonalisasi sesuai dengan akun mereka. Artikel ini akan membahas cara membuat halaman login menggunakan HTML, CSS, dan JavaScript.

1. Struktur Halaman Login

Halaman login berisi form yang meminta pengguna untuk memasukkan username dan password. Setelah data dimasukkan, sistem akan memeriksa kecocokan dengan data yang tersimpan di localStorage.

Kode HTML Halaman Login:

<!-- login.html -->
<div class="container">
    <h2>Login</h2>
    <input type="text" id="username" placeholder="Masukkan Username" required>
    <input type="password" id="password" placeholder="Masukkan Password" required>
    <button onclick="login()">Login</button>
    <div class="menu">
        <p>Belum punya akun? <a href="register.html">Daftar</a></p>
    </div>
</div>

Kode ini menciptakan form login yang berisi input untuk username dan password serta tombol login. Jika pengguna belum memiliki akun, tersedia link untuk mendaftar.

2. Fungsi Login dengan JavaScript

Untuk memproses login, kita menggunakan JavaScript untuk memeriksa apakah username dan password yang dimasukkan sesuai dengan data yang telah tersimpan di localStorage.

Kode JavaScript untuk Login:

function login() {
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    
    let storedUsername = localStorage.getItem('registeredUser');
    let storedPassword = localStorage.getItem('registeredPassword');
    
    if (username === storedUsername && password === storedPassword) {
        localStorage.setItem('loggedInUser', username);
        alert('Login berhasil!');
        window.location.href = 'dashboard.html';
    } else {
        alert('Username atau password salah!');
    }
}

Kode ini akan mencocokkan data input dengan yang tersimpan di localStorage. Jika cocok, pengguna akan diarahkan ke halaman dashboard.

Kesimpulan

Dengan menggunakan HTML, CSS, dan JavaScript sederhana, kita dapat membuat halaman login yang berfungsi untuk mengautentikasi pengguna berdasarkan data yang tersimpan. Keamanan login dapat ditingkatkan dengan menggunakan backend dan metode enkripsi yang lebih aman seperti Firebase atau database MySQL.

Berbagi :