Membuat Halaman Login dan Register yang Terhubung ke Sistem Autentikasi

Halaman login dan register 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 dan register menggunakan HTML, CSS, dan JavaScript.

1. Halaman Register (Pendaftaran Akun)

Halaman register berfungsi untuk mendaftarkan akun baru dengan mengisi beberapa informasi penting seperti username, email, nomor telepon, dan password. Berikut adalah implementasinya:

Kode HTML Halaman Register

<!-- register.html -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Akun</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Daftar Akun</h2>
        <input type="text" id="newUsername" placeholder="Masukkan Username" required>
        <input type="email" id="newEmail" placeholder="Masukkan Email" required>
        <input type="tel" id="newPhone" placeholder="Masukkan Nomor Telepon" required>
        <input type="password" id="newPassword" placeholder="Masukkan Password" required>
        <input type="password" id="confirmPassword" placeholder="Konfirmasi Password" required>
        <button onclick="register()">Daftar</button>
        <div class="menu">
            <p>Sudah punya akun? <a href="login.html">Login</a></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript untuk Pendaftaran Akun dengan Validasi

function register() {
    let username = document.getElementById('newUsername').value;
    let email = document.getElementById('newEmail').value;
    let phone = document.getElementById('newPhone').value;
    let password = document.getElementById('newPassword').value;
    let confirmPassword = document.getElementById('confirmPassword').value;
    
    if (!username || !email || !phone || !password || !confirmPassword) {
        alert('Harap lengkapi semua data!');
        return;
    }
    
    if (password !== confirmPassword) {
        alert('Password dan konfirmasi password harus sama!');
        return;
    }
    
    localStorage.setItem('registeredUser', username);
    localStorage.setItem('registeredEmail', email);
    localStorage.setItem('registeredPhone', phone);
    localStorage.setItem('registeredPassword', password);
    alert('Registrasi berhasil! Silakan login.');
    window.location.href = 'login.html';
}

2. Halaman Login

Setelah mendaftarkan akun, pengguna dapat login dengan menggunakan username dan password yang telah dibuat sebelumnya.

Kode HTML Halaman Login

<!-- login.html -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Masukkan Username" required>
        <input type="password" id="password" placeholder="Masukkan Password" required>
        <input type="checkbox" onclick="togglePassword()"> Tampilkan Password
        <button onclick="login()">Login</button>
        <div class="menu">
            <p>Belum punya akun? <a href="register.html">Daftar</a></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript untuk Login dengan Validasi

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 || !password) {
        alert('Harap lengkapi semua data!');
        return;
    }
    
    if (username === storedUsername && password === storedPassword) {
        localStorage.setItem('loggedInUser', username);
        alert('Login berhasil!');
        window.location.href = 'dashboard.html';
    } else {
        alert('Username atau password salah!');
    }
}

function togglePassword() {
    let passwordField = document.getElementById('password');
    if (passwordField.type === "password") {
        passwordField.type = "text";
    } else {
        passwordField.type = "password";
    }
}

3. Kesimpulan

Dengan menggunakan HTML, CSS, dan JavaScript sederhana, kita dapat membuat sistem login dan register yang memungkinkan pengguna mendaftarkan akun dan login dengan username serta password yang tersimpan. Sistem ini sekarang memiliki validasi tambahan seperti pengecekan kesamaan password saat registrasi dan peringatan jika data belum lengkap.

Sistem ini bisa dikembangkan lebih lanjut menggunakan backend dengan database agar lebih aman dan dapat menangani lebih banyak pengguna.

Origin Download