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.

7 comments:

Anonymous15 September 2015 at 15:18
Hi, could you please add registraion or add users instructions? Thanks. It worked perfectly.
sarathi B10 February 2016 at 05:27
This form if correct data enter also error showing in incorrect email or password.
How can i login
Ashutosh16 March 2016 at 12:13
awesome stuff thanks guys
Unknown30 October 2018 at 02:05
vcvvcv vjlvlcvli vvcvi fdfiiioisfkl dsvsiusiufoiuf dsvljkdsjsvsijgoiogisigjbj sfjvjsgjklssjb veaifieffiojo dsivsjoisdjijl disfdfoifjiojj difdsjfifsiuifi fifidffdfdfklsdsfk svssdiefqiwpepoeowiafjb afejjsfsj fofoeioffhjgghjgharmaanv shsrtms had vetyb bpodddun d sndfsrg sdsdo bwhy you wait for tnsy xvjkvklvxvxhhvxhlvnvxcjcjxnxnxnxjxbjxjdgerouuoordfdldfjdff.my nam

Menu Link

27 January, 2015