Ajax PHP Login Page with Bootstrap Design - Mostlikers

27 January, 2015

Ajax PHP Login Page with Bootstrap Design

Ajax PHP Login Page with boostrap design concept. Ajax code with out page refresh or submit only its checking database post value. Here i am using bootstrap for design form template. follow below code and have look to live demo.



Live demo         Download

Database

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(100) NOT NULL,
  `password` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
)

Bootstrap code

Add below code in index file <head></head> tag
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js">
</script>

Html

Create sample form.
<body>
  <div class="modal-dialog">
    <div class="modal-content col-md-8">
      <div class="modal-header">
        <h4 class="modal-title"><i class="icon-paragraph-justify2"></i> User Login</h4>
      </div>
      <form method="post" id="login_form">
        <div class="modal-body with-padding">
          <div class="form-group">
            <div class="row">
              <div class="col-sm-10">
                <label>Username *</label>
                <input type="text" id="username" name="username" class="required">
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="row">
              <div class="col-sm-10">
                <label>Password *</label>
                <input type="password" id="password" name="password" class="required">
              </div>
            </div>
          </div>
        </div>
        <div class="error" id="logerror"></div>
        <!-- end Add popup  -->  
        <div class="modal-footer">
          <input type="hidden" name="id" value="" id="id">
          <button type="submit" id="btn-login" class="btn btn-primary">Submit</button>              
        </div>
      </form>
    </div>
  </div>
</body>

Html & ajax code

Above form we seialize() data to pass ajax.php file. if post data (username,password) available page redirect to profile php. Add below code under the above form.
$('#login_form').validate(); - Validate to login form.

<script>  
$(document).ready(function(){
  $('#login_form').validate();   
  $(document).on('click','#btn-login',function(){
    var url = "login.php";       
    if($('#login_form').valid()){
      $('#logerror').html('<img src="ajax.gif" align="absmiddle"> Please wait...');  
      $.ajax({
      type: "POST",
      url: url,
      data: $("#login_form").serialize(), // serializes the form's elements.
      success: function(data)
      {
        if(data==1) {               
              window.location.href = "profile.php";
        } 
        else {  $('#logerror').html('The email or password you entered is incorrect.');
              $('#logerror').addClass("error"); }
        }
        });
    }
    return false;
  });
});
</script>

login.php

extract($_POST); it will convert serialize data to array data. 
mysqli_real_escape() string -  check post data special characters.
$db - Database config
<?php 
$db = new mysqli('localhost', 'root', '', 'mostlikers');
session_start();
    if($_POST['username']!="" && $_POST['password']!=""):
        extract($_POST);
        $username=mysqli_real_escape_string($db,$_POST['username']);
        $pass_encrypt=md5(mysqli_real_escape_string($db,$_POST['password']));
        $fetch=$db->query("SELECT * FROM `users` WHERE username='$username'
         AND `password` = '$pass_encrypt'");
        $count=mysqli_num_rows($fetch);
        if($count=="1") :
           $row=mysqli_fetch_array($fetch);
           $_SESSION['login_username']=$row['username'];    
           echo 1;  
        else :
          echo 0;
        endif;
    else :
        header("Location:index.php");
    endif;
?>


profile.php

If user session value is empty, this will redirect to index page.
<?php
session_start();
$check=$_SESSION['login_username'];
if(!isset($check))
{
    header("Location:index.php");
} 
?>
<h3 align="center"> Hellow <?php echo $_SESSION['login_username']; ?></h3> 
<h2 align="center" >Welcome to mostlikers</h2> 
<h4 align="center">  click here to <a href="logout.php">LogOut</a> 
</h4>

logout.php

It clear all session data after data clean redirect to login page.
<?php
session_start();
if(session_destroy())
{ 
header("Location: index.php");
}
?>

I hope this post helpful for you.  Any suggestions or comments write below.








6 comments:

  1. Hi, could you please add registraion or add users instructions? Thanks. It worked perfectly.

    ReplyDelete
  2. This form if correct data enter also error showing in incorrect email or password.
    How can i login

    ReplyDelete
    Replies
    1. Have you insert password into database in md5 format?

      Delete