Tuesday, 15 November 2016

Make Login Form by Using Bootstrap Collapse with PHP Ajax Jquery

           , , , ,      3 comments   


If you are looking for different type of login form for your website, so here we will make login form by using Bootstrap Collapse with PHP Ajax Jquery. When you click on button then at that time login form will be visible on web page. First of all what is Bootstrap Collapse. Bootstrap Collapse is very useful in web development, by using Bootstrap Collapse can show and hide many large amount of content on web page. So here we will make login form under Bootstrap Collapse so login form will not be show on web page but it will be visible after click on button then after it will visible on webpage after this we can fill form and we can logged into site. First we have create one button and then after we have define one division tag for Bootstrap Collapse, by using Bootstrap Collapse that element will be hide and it will be display after clicking on button. So Under this Bootstrap Collapse division tag we have define login form and then after we have write jquery code on login button click event and then after we have send request to php script for verifying user login information by using Ajax method. After validate user information server will send back data to ajax request. This we have validate user login information. When user enter right data then he can be logged into system and then after he can see the logout link also and by click on logout link he can be logout from system. For logout we have also use jquery Ajax code.




Source Code


index.php


 <?php   
 session_start();  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Make Login Form by Using Bootstrap Collapse with PHP Ajax Jquery</title>  
           <script src="jquery.js"></script>  
           <link rel="stylesheet" href="bootstrap.css" />  
           <script src="bootstrap.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Make Login Form by Using Bootstrap Collapse with PHP Ajax Jquery</h3><br />  
                <br />  
                <br />  
                <br />  
                <br />  
                <br />  
                <?php  
                if(isset($_SESSION["username"]))  
                {  
                ?>  
                <div align="center">  
                     <h1>Welcome - <?php echo $_SESSION['username']; ?></h1><br />  
                     <a href="#" id="logout">Logout</a>  
                </div>  
                <?php  
                }  
                else  
                {  
                ?>  
                <div align="center">  
                     <button type="button" name="login" id="login" class="btn btn-success" data-toggle="collapse" data-target="#login_collapse">Login</button>  
                     <div id="login_collapse" class="collapse col-md-12" style="border:1px solid #ccc; background-color:#f1f1f1; margin-top:16px;">  
                          <h3 align="center">Login</h3>  
                          <label>Username</label>  
                          <input type="text" name="username" id="username" class="form-control" />  
                          <br />  
                          <label>Password</label>  
                          <input type="password" name="password" id="password" class="form-control" />  
                          <br />  
                          <button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>  
                          <br /><br />  
                     </div>  
                </div>  
                <?php  
                }  
                ?>  
           </div>  
           <br />  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#login_button').click(function(){  
           var username = $('#username').val();  
           var password = $('#password').val();  
           if(username != '' && password != '')  
           {  
                $.ajax({  
                     url:"action.php",  
                     method:"POST",  
                     data:{username:username, password:password},  
                     success:function(data){  
                          if(data == 'No')  
                          {  
                               alert("Wrong Data");  
                          }  
                          else  
                          {  
                               location.reload();  
                          }  
                     }  
                });  
           }  
           else  
           {  
                alert("Both Fields are required");  
           }  
      });  
      $('#logout').click(function(){  
           var action = "logout";  
           $.ajax({  
                url:"action.php",  
                method:"POST",  
                data:{action:action},  
                success:function()  
                {  
                     location.reload();  
                }  
           });  
      });  
 });  
 </script>

action.php


 <?php  
 //action.php  
 session_start();  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 if(isset($_POST["username"]))  
 {  
      $username = mysqli_real_escape_string($connect, $_POST["username"]);  
      $password = mysqli_real_escape_string($connect, $_POST["password"]);  
      $query = "  
      SELECT * FROM admin_login  
      WHERE admin_name = '".$username."'  
      AND admin_password = '".$password."'  
      ";  
      $result = mysqli_query($connect, $query);  
      if(mysqli_num_rows($result) > 0)  
      {  
           $_SESSION["username"] = $username;  
           echo 'Yes';  
      }  
      else  
      {  
           echo 'No';  
      }  
 }  
 if(isset($_POST["action"]))  
 {  
      unset($_SESSION["username"]);  
 }  
 ?>

3 comments: