Cara Mempercantik Tampilan Error Login dengan Effect Shake

Untuk Artikel kali ini kita akan belajar bagaimana cara mempercantik tampilan error login dengan effect shake, jika teman-teman sudah pernah belajar dengan sebuah jquery ui dimana kita bisa membuat sebuah macam-macam effect contohnya yang akan saya pakai sekarang yaitu menerapkannya pada sebuah proses login saat login kita gagal, mungkin effect ini jadi lebih cantik di bandingkan kita hanya menampilkan sebuah alert tulisan. oke seperti apa simak terus ya teman-teman.

Untuk membuat cara mempercantik tampilan error login dengan effect shake saya akan menerapkannya dengan sebuah ajax, contoh ini saya dapat dari sebuah webslesson, kenapa saya tidak terfikirkan ya, untuk membuat seperti ini, jadi setiap gagal login effect shake ini akan berfungsi, jika kita hanya tulisan seperti biasa, biasannya tulisan itu akan tampil terus, kita tidak tahu apakah gagal atau tidak, sebenarnya walaupun hanya tulisa kita bisa menggunakan sebuah setTimeout untuk menghilangkannya, oke jadi caranya seperti ini:

<?php 
session_start();
if(isset($_SESSION["username"])){
  header("location:home.php");
}

?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12" id="box">
          <form method="post">
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" class="form-control" id="username" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password">
            </div>
            <button type="submit" class="btn btn-primary" id="login">Login</button>
            <div id="error"></div>
          </form>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
       $('#login').click(function(e){
        e.preventDefault()
        var username = $('#username').val();
        var password = $('#password').val();
        if($.trim(username).length > 0 && $.trim(password).length > 0)
        {
         $.ajax({
          url:"login.php",
          method:"POST",
          data:{username:username, password:password},
          cache:false,
          beforeSend:function(){
           $('#login').text("connecting...");
          },
          success:function(data)
          {
           if(data)
           {
            $("body").load("home.php").hide().fadeIn(1500);
           }
           else
           {
            var options = {
             distance: '40',
             direction:'left',
             times:'3'
            }
            $("#box").effect("shake", options, 800);
            $('#login').text("Login");
            $('#error').html("<span class='text-danger'>Invalid username or Password</span>");
           }
          }
         });
        }
        else
        {
          return false;
        }
       });
      });
    </script>
  </body>
</html>

Untuk melihat kodingan di atas saya harap teman-teman sudah pernah juga belajar sebuah ajax ya, karena disini saya tidak akan menampilkan semua kodingannya, tetapi hanya sebuah proses shakenya jika di perhatikan proses ajak itu ada di success jika benar maka kita akan meload file index adminya, jika tidak maka effect shake akan muncul.

$("#box").effect("shake", options, 800);

untuk options itu sebuah data object ya, teman-teman bisa lihat di atasnya, dan untuk hasilnya teman-teman akan mendapatkan hasil seperti ini

Mungkin effect shakenya tidak terlihat ya, jadi teman-teman silahkan coba sendiri dan rasakan manfaatnya. oke saya rasa cukup sampai disini belajar kita tentang cara mempercantik tampilan error login dengan effect shake semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.