Cara Membuat Fitur Login dengan Bootstrap Modal dan jQuery AJAX

Membuat Fitur Login dengan Bootstrap Modal dan jQuery AJAX

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat fitur login dengan menggunakan Bootstrap Modal dan jQuery AJAX.

See the Pen Membuat Fitur Login dengan Bootstrap Modal dan jQuery AJAX by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
    Login
  </button>

  <!-- Modal -->
  <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="loginModalLabel">Login</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="loginForm">
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" class="form-control" id="username" name="username" required>
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#loginForm').submit(function(e) {
        e.preventDefault();
        var username = $('#username').val();
        var password = $('#password').val();
        // Lakukan proses login menggunakan AJAX
        $.ajax({
          url: 'login.php',
          type: 'POST',
          data: {
            username: username,
            password: password
          },
          success: function(response) {
            // Tampilkan pesan sukses atau error
            if (response == 'success') {
              alert('Login berhasil');
            } else {
              alert('Login gagal');
            }
          }
        });
      });
    });
  </script>
</body>
</html>
HTML

Pastikan Anda telah menyertakan library Bootstrap dan jQuery dalam kode HTML Anda. Anda juga perlu membuat file login.php untuk memproses permintaan login menggunakan AJAX.

Dengan menggunakan kode di atas, Anda dapat membuat fitur login yang responsif dan menarik dengan menggunakan Bootstrap Modal. Ketika pengguna mengklik tombol “Login”, modal akan muncul dan mereka dapat memasukkan username dan password mereka. Setelah pengguna mengklik tombol “Login” di dalam modal, permintaan login akan dikirim ke server menggunakan AJAX. Server akan memvalidasi informasi login dan mengembalikan respons yang sesuai. Pesan sukses atau error akan ditampilkan dalam bentuk alert.

Anda dapat menyesuaikan kode ini sesuai dengan kebutuhan Anda, seperti menambahkan validasi tambahan atau mengubah tampilan modal.

Artikel Terbaru ⭐