How to Use Ajax with PHP for login with shake effect

In this tutorial we are going to learn How to Use Ajax with PHP for login with shake effect. If you have used wordpress, then in wordpress login page if you have enter wrong login information then login form will be shake. So, this type of things will be learn here. For this things I have make one table for storing user information like username and password. For this things I have used jquery javascript library and jquery ui library for shake effect. Shake is a one effect method of jquery ui library. If you are beginner programmer then this a new things for you and you will be learn new things from here. I have used ajax functionality for login into site. Ajax will provide extra functionality to your site appearance. Because when user log into site then without page refresh home screen will appear. When user enter wrong data then shake effect will be run and shown on the web page. I have also provide source code with this post.

Source Code

index.php

<?php
//index.php
session_start();
if(isset($_SESSION["username"]))
{
 header("location:home.php");
}
?>
<html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Webslesson Tutorial</title>
  <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  #box
  {
   width:100%;
   max-width:500px;
   border:1px solid #ccc;
   border-radius:5px;
   margin:0 auto;
   padding:0 20px;
   box-sizing:border-box;
   height:270px;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <h2 align="center">How to Use Ajax with PHP for Login with Shake Effect</h2><br /><br />
   <div id="box">
    <br />
    <form method="post">
     <div class="form-group">
      <label>Username</label>
      <input type="text" name="username" id="username" class="form-control" />
     </div>
     <div class="form-group">
      <label>Password</label>
      <input type="password" name="password" id="password" class="form-control" />
     </div>
     <div class="form-group">
      <input type="button" name="login" id="login" class="btn btn-success" value="Login" />
     </div>
     <div id="error"></div>
    </form>
    <br />
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('#login').click(function(){
  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').val("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').val("Login");
      $('#error').html("<span class='text-danger'>Invalid username or Password</span>");
     }
    }
   });
  }
  else
  {

  }
 });
});
</script>

login.php

<?php
//login.php
session_start();
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["username"]) && isset($_POST["password"]))
{
 $username = mysqli_real_escape_string($connect, $_POST["username"]);
 $password = md5(mysqli_real_escape_string($connect, $_POST["password"]));
 $sql = "SELECT * FROM users WHERE username = '".$username."' AND password = '".$password."'";
 $result = mysqli_query($connect, $sql);
 $num_row = mysqli_num_rows($result);
 if($num_row > 0)
 {
  $data = mysqli_fetch_array($result);
  $_SESSION["username"] = $data["username"];
  echo $data["username"];
 }
}
?>

home.php

<html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Webslesson Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <?php
   //home.php
   session_start();
   if(!isset($_SESSION["username"]))
   {
    header("location: index.php");
   }
   echo '<h1 align="center">'.$_SESSION["username"].' - Welcome to Home Page</h1>';
   echo '<p align="center"><a href="logout.php">Logout</a></p>';
   ?>
  </div>
 </body>
</html>

logout.php

<?php
//logout.php
session_start();
session_destroy();
header("location:index.php");
?>

9 comments:

Unknown20 March 2016 at 15:33
can you make a tutorial on php login with session and cookie ? so non-admin cant able to access a page that a admin can like use add/delete page
i need it for my crud php assignment
Anonymous21 March 2016 at 17:58
This comment has been removed by the author.
Unknown6 October 2016 at 23:47
no funciona
Unknown11 April 2017 at 03:32
always success even i input wrong data.
Unknown12 December 2017 at 15:53
may i see the database sir? because when i login i cant proceed and thanks to your tutorial god bless ^_^
COME AND SAVE THE SRI LANKAN TRADITION12 December 2018 at 02:26
its work. thanks friend
my bogger24 February 2019 at 08:57
cute cide
Unknown7 August 2019 at 18:22
its working aside from the shakescreen effect and error message if u enter wrong pass.

KOKI29 March 2020 at 21:25
gracias me ayudo a entender varias cosas

Webslesson

PHP, Node.js, React.js, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Friday, 18 March 2016