Membuat tampilan login dengan framework bootstrap

1. Deklarasi HTML dan Meta Tags

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<!DOCTYPE html>: Menyatakan bahwa ini adalah dokumen HTML5.
<html lang="id">: Menetapkan bahasa halaman sebagai bahasa Indonesia.
<meta charset="UTF-8">: Menentukan encoding karakter yang digunakan untuk memastikan tampilan karakter yang benar, seperti huruf dengan aksen atau karakter khusus.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Membuat halaman responsif dengan memastikan ukuran viewport disesuaikan dengan lebar layar perangkat.
<title>Login</title>: Menetapkan judul halaman yang muncul di tab browser.
<link>: Menghubungkan file CSS Bootstrap untuk mengatur styling elemen halaman.

2. Bagian Body (Konten Utama)

<body>
  <div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title text-center mb-4">Login</h5>
        <form id="loginForm">
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" placeholder="Masukkan username" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Masukkan password" required>
          </div>
          <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">Login</button>
          </div>
        </form>
      </div>
    </div>
  </div>

Penjelasan:

<div class="container d-flex justify-content-center align-items-center min-vh-100">:
- container: Bootstrap class untuk membuat kontainer dengan lebar yang diatur secara otomatis.
- d-flex: Mengaktifkan Flexbox di dalam container untuk pengaturan elemen secara fleksibel.
- justify-content-center: Memusatkan elemen secara horizontal (ke tengah).
- align-items-center: Memusatkan elemen secara vertikal.
- min-vh-100: Mengatur minimal tinggi kontainer untuk 100% dari tinggi viewport (layar), memastikan elemen berada di tengah vertikal halaman.
<div class="card" style="width: 18rem;">: Menggunakan elemen card Bootstrap untuk membungkus form login dan memberikan tampilan yang lebih terstruktur dan elegan.
- style="width: 18rem;": Menentukan lebar card, 1 rem setara dengan ukuran font dasar, jadi ini sekitar 288px.
<div class="card-body">: Bagian ini digunakan untuk meletakkan konten di dalam card, seperti judul dan form.
<h5 class="card-title text-center mb-4">Login</h5>: Menampilkan judul form Login di tengah halaman dengan margin bawah 4 (mb-4).
<form action="#" method="POST">: Membuat form login dengan method POST. Action # menandakan form tidak mengarah ke URL lain (untuk contoh ini saja).

Input Fields:

<div class="mb-3">: Menandakan setiap elemen input diberi margin bawah (spacing).
Username Input:
```
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" placeholder="Masukkan username" required>
```
- <label>: Label untuk input, memberitahukan pengguna untuk memasukkan username.
- <input>: Elemen input tipe teks untuk username. Dengan class="form-control", elemen ini mendapatkan styling dari Bootstrap sehingga lebih rapi dan responsif.
- placeholder="Masukkan username": Teks petunjuk yang muncul di dalam kotak input saat kosong.
- required: Mengharuskan pengguna untuk mengisi kolom ini.

Password Input:

<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Masukkan password" required>

Mirip dengan input untuk username, tapi tipe password memastikan teks yang dimasukkan disembunyikan.

Tombol Login:

<div class="d-grid gap-2">: Menggunakan Flexbox untuk membuat tombol meluas memenuhi lebar form. gap-2 memberi sedikit jarak antara elemen-elemen di dalamnya.
```
htmlSalin kode<button type="submit" class="btn btn-primary">Login</button>
```
- btn btn-primary: Menambahkan kelas dari Bootstrap untuk styling tombol menjadi tombol biru dengan tampilan khas.
- type="submit": Tombol ini mengirimkan form ketika ditekan.

3. Bootstrap JS (jika dibutuhkan)

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

Menyertakan file JavaScript Bootstrap untuk menambahkan fitur interaktif seperti dropdown, modal, atau lainnya, meskipun dalam contoh ini tidak digunakan fitur interaktif apapun.

4. Penutupan Tag HTML

</body>
</html>

Menutup elemen body dan html setelah konten halaman selesai.

selanjutkan kita akan menambahkan sebuah validasi untuk mengecek apakah username dan password yang kita masukan benar atau salah dengan javascript.

 <!-- JavaScript untuk memeriksa login -->
  <script>
    // Mendapatkan form dan elemen input
    const loginForm = document.getElementById('loginForm');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');

    // Menambahkan event listener pada form submit
    loginForm.addEventListener('submit', function (event) {
      // Mencegah form agar tidak langsung dikirim ke server
      event.preventDefault();

      // Mendapatkan nilai username dan password
      const username = usernameInput.value;
      const password = passwordInput.value;

      // Mengecek apakah username dan password cocok
      if (username === "admin" && password === "1234") {
        alert("Login berhasil!");
      } else {
        alert("Username atau password salah!");
      }
    });
  </script>

</body>
</html>

Penjelasan:

Form Handling dengan JavaScript:
- Saya menambahkan event listener pada form dengan ID loginForm, yang akan mendengarkan event submit (ketika tombol login diklik).
- Dengan menggunakan event.preventDefault(), saya mencegah form dari pengiriman secara default, yang berarti halaman tidak akan dimuat ulang saat form dikirimkan.
Pengecekan Login:
- Setelah event submit dipicu, kita mendapatkan nilai yang dimasukkan oleh pengguna pada input username dan password menggunakan usernameInput.value dan passwordInput.value.
- Kemudian, kita melakukan pengecekan sederhana: jika username adalah "admin" dan password adalah "1234", maka akan muncul alert yang menyatakan "Login berhasil!". Jika tidak cocok, muncul alert "Username atau password salah!".
Alert:
- alert("Login berhasil!"); dan alert("Username atau password salah!"); digunakan untuk menampilkan pesan kepada pengguna, tergantung pada hasil pengecekan login.

Cara Kerja:

Ketika pengguna mengisi form dan menekan tombol login, JavaScript akan mengecek apakah username dan password sesuai dengan yang telah ditentukan.
Jika sesuai, maka akan muncul pesan sukses ("Login berhasil!"), jika tidak sesuai, akan muncul pesan error ("Username atau password salah!").

PreviousPembelajaran Framework Bootstrap NextMembuat Tampilan Dashboard Dengan Bootstrap

Last updated 4 months ago

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> </head>

<body> <div class="container d-flex justify-content-center align-items-center min-vh-100"> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title text-center mb-4">Login</h5> <form id="loginForm"> <div class="mb-3"> <label for="username" class="form-label">Username</label> <input type="text" class="form-control" id="username" placeholder="Masukkan username" required> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" placeholder="Masukkan password" required> </div> <div class="d-grid gap-2"> <button type="submit" class="btn btn-primary">Login</button> </div> </form> </div> </div> </div>

<script> // Mendapatkan form dan elemen input const loginForm = document.getElementById('loginForm'); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); // Menambahkan event listener pada form submit loginForm.addEventListener('submit', function (event) { // Mencegah form agar tidak langsung dikirim ke server event.preventDefault(); // Mendapatkan nilai username dan password const username = usernameInput.value; const password = passwordInput.value; // Mengecek apakah username dan password cocok if (username === "admin" && password === "1234") { alert("Login berhasil!"); } else { alert("Username atau password salah!"); } }); </script> </body> </html>