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

Database

 CREATE TABLE IF NOT EXISTS `tbl_user` (  
  `user_id` int(11) NOT NULL AUTO_INCREMENT,  
  `username` varchar(250) NOT NULL,  
  `password` varchar(100) NOT NULL,  
  PRIMARY KEY (`user_id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;  

index.php

 <?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>  
           <script src="js/bootstrap.js"></script>  
           <link href="css/bootstrap.css" rel="stylesheet" />  
           <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  
                          {  
                               //shake animation effect.  
                               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  
           {  
                return false;  
           }  
      });  
 });  
 </script>  

login.php

 <?php  
 session_start();  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 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 tbl_user 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

 <?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>';  
 ?>  

logout.php

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

3 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