Cara Menyisipkan Form Login Menggunakan AJAX jQuery

Sebelumnya saya akan memberikan penjelasan singkat tentang AJAX. AJAX dalah singkatan dari Asynchronous JavaScript and XMLHTTP adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Pada tutorial kali ini saya akan mencoba membagi Cara Menyisipkan Form Login Menggunakan AJAX jQuery.

Kenapa kita menggunakan AJAX jQuery untuk meyisipkan form login saja? Karena dengan AJAX jQuery kita bisa meningkatkan interaktivitas, kecepatan, dan usability, maka dari itu saya akan memberikan langkah-langkah Cara Menyisipkan Form Login Menggunakan AJAX jQuery, berikut dalah langkah-langkahnya:

– Pertama teman-teman buat dulu file index.html dalam folder project yang dimana kita akan menyisipkan form.html kedalamnya berikut dalah kode htmlnya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

   <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <h2>Silakan Login</h2>
          <div id="form"></div><!--id form di sini adalah sebagai tempat untuk form.html yang akan kita sisipkan-->
          
          <button class="btn btn-default">Masuk</button><!--button ini berfungsi untuk jembatan dalam melakukan proses penyisipan file form.htmlnya-->
        </div>
      </div>
   </div>
    
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Di sini saya membuat file htmlnya menggunakan framework bootstrap. Coba teman-teman buka file index.htmlnya di browser lalau klik tombol masuk, maka tidak kan terjadi apa-apa, karena kita belum menyisipkan form.htmlnya

– Ke-dua teman-teman buat file form.html-nya di simpan dalam folder form yang kita buat dalam folder projectnya:

<div class="panel panel-default">
  <div class="panel-body">
    <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
  </div>
</div>

– Ketiga kita akan menyisipkannya dengan menggunakan metode load(), metode load() adalah salah satu metode dalam AJAX jQuery, berikut kodenya:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        //button berfungsi sebagai tombol prosesnya jadi ketika di klik maka proses akan berjalan
        $("button").click(function(){
            //id form akan di sisipkan oleh form.hrml yang terdapat dalam folder form
            $("#form").load("form/form.html", function(responseTxt, statusTxt, xhr){
                //kondisi di saat kita sukses meload filenya
                if(statusTxt == "success")
                    alert("Form sukses kita load!");
                //kondisi saat error
                if(statusTxt == "yah error")
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
            });
        });
    });
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

Simpan kode scriptnya di bawah file jQuery-nya, Untuk penjelasan kode di atas saya sudah beri commenting pada baris kodenya. Coba teman-teman refresh file index.html yang telah kita buka tadi, lalu klik tombol masuk makan akan tampil form dan pemberitahuan sukses.

Bagaimana teman-teman cukup mudahkan menyisipkan form login menggunakan AJAX jQuery. Selain mentisipkan form login kita bisa juga menyisipkan file lainnya tanpa harus me-reload seluruh halaman web yang berakibat website menjadi lambat dan kurang efektif.

Sekian tutorial kalai ini tentang Cara Menyisipkan Form Login Menggunakan AJAX jQuery. Semoga bermanfaat bagi teman-teman dan sampai jumpa lagi dalam tutorial berikutnya.

Cara Menyisipkan Form Login Menggunakan AJAX jQuery

Kategori