CARA MEMBUAT LOGIN DENGAN JAVASCRIPT

Menciptakan halaman login sendiri sering menjadi bagian penting dalam fase pengembangan web. Dengan Javascript, kamu bisa membuat form login dan memvalidasi form itu sebelum data dikirim ke server. Pada artikel ini, kita akan membahas cara membuat login dengan Javascript.

Alat dan Bahan yang Diperlukan

Sebelum memulai, kamu perlu menyiapkan beberapa hal:

1. Text editor seperti Sublime Text, Visual Studio Code, atau yang serupa.
2. Browser modern seperti Google Chrome, Mozilla Firefox, atau yang serupa.
3. Pengetahuan dasar HTML dan CSS.

Langkah-langkah Membuat Login dengan Javascript

Berikut adalah cara membuat halaman login:

1. Buat Struktur HTML

Struktur HTML akan menjadi kerangka dasar dari halaman login.

<form id="loginForm">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="Login">
</form>

2. Tambahkan Style CSS

CSS akan membuat halaman login terlihat lebih menarik.

body {
  font-family: Arial, sans-serif;
}

form {
  width: 300px;
  margin: 0 auto;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input[type="submit"] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  display: inline-block;
}

3. Tambahkan Validasi dengan Javascript

Kamu bisa menambahkan logika validasi dengan Javascript. Kode berikut akan memvalidasi jika username dan password telah diisi.

document.querySelector('#loginForm').addEventListener('submit', function(e) {
  var username = document.querySelector('#username').value;
  var password = document.querySelector('#password').value;
  
  if (!username || !password) {
    alert('Masukkan username dan password!');
    e.preventDefault();
  }
});

4. Penyimpanan Data Login

Setelah itu, kamu bisa menyimpan data login ke localStorage sehingga data bisa diakses di mana saja dalam aplikasi.

if (username && password) {
  localStorage.setItem('username', username);
  localStorage.setItem('password', password);
}

Nah, sekarang kamu telah memiliki halaman login sederhana yang memvalidasi input dan menyimpan data. Tentu saja, ini adalah kasus paling sederhana. Di dunia nyata, kamu perlu lebih banyak validasi dan pengamanan untuk sistem login. Namun, ini adalah tempat yang bagus untuk memulai.

Sekarang, petualanganmu sebagai pengembang web bisa dilanjutkan dengan mengeksplorasi lebih banyak cara mengoptimalkan dan mempersonalisasi sistem login sesuai kebutuhan aplikasi webmu. Selamat mencoba!