Friday 18 March 2016

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:

  1. 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

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. always success even i input wrong data.

    ReplyDelete
  4. may i see the database sir? because when i login i cant proceed and thanks to your tutorial god bless ^_^

    ReplyDelete
  5. its working aside from the shakescreen effect and error message if u enter wrong pass.

    ReplyDelete
  6. gracias me ayudo a entender varias cosas

    ReplyDelete