Warning: Cannot modify header information - headers already sent by (output started at /home/content/82/9438182/html/spidercode/index.php:3) in /home/content/82/9438182/html/spidercode/wp-includes/feed-rss2.php on line 8
SpidersCode » Jquery http://www.spiderscode.com beyond the web Wed, 03 Aug 2016 18:40:32 +0000 en-US hourly 1 https://wordpress.org/?v=4.3.26 Ajax Login Script Using Jquery,PHP,MySQL,Bootstrap With Loading Image http://www.spiderscode.com/ajax-login-using-jquery-php-mysql/ http://www.spiderscode.com/ajax-login-using-jquery-php-mysql/#comments Wed, 27 Jul 2016 18:40:13 +0000 http://www.spiderscode.com/?p=734 This post will explain how to create a login script using Ajax, Jquery, PHP, MYSQL and Bootstrap. This script also work with loading image in the format of GIF. While login by this script the session will create and redirect to Welcome page and it will give a rich look for your website or project. If you are a PHP learner take this tutorial and look a demo for live experiment.

Ajax Login Form with Using Jquery,PHP, MySQ,Bootstrap
Ajax Login Form with Using Jquery,PHP, MySQ,Bootstrap

Demo   Download

Create Database Design

Sample database structure for ‘users‘ table.

DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `user_fullname` varchar(25) NOT NULL,
  `email` text,
  `password` text,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

dbconfig.php

Contains PHP database connectivity code

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "";
$conn = mysqli_connect($servername,$username,$password,$dbname);
if (!$conn){
    die("Database Connection Failed" . mysql_error());
}

login.html

It Contains the HTML code and CSS Link for design and also contain the jQuery code.

<div class="columns-container">
    <div class="container" id="columns">
         <!-- page heading-->
        <h2 class="page-heading">
            Ajax Login Form with Loading Image Demo and download 
        </h2>
        <!-- ../page heading-->
        <div class="page-content">
            <div class="row">
                       <div class="col-sm-6">
                    <div class="box-authentication">
                        <h3>Ajax Login</h3>
                        <span class="error" id="log_error" style="margin-left: 4%;margin-top: -11px !important;"></span>
                        <label for="emmail_login">Email address</label>
                        <input id="emmail_login" type="text" class="form-control">
                        <span class="error" id="emaillog_error" style="margin-left: 44%;margin-top: -26px !important;"></span>
                        <label for="login_password">Password</label>
                        <img src="load.gif" class="error" id="load_img" alt="Loading" height="42" width="42" style="margin-left: 15%;margin-top: -19px !important;">
                        <input id="login_password" type="password" class="form-control">
                        <span class="error" id="pwd_error" style="margin-left: 44%;margin-top: -26px !important;"></span>
                        <button class="button" id="logstore">Sign in</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Jquery Code

This Jquery Code will be validate the Email and password for login. If the Jquery validation success then it go to check on database with ajax. However the loading image has been displayed while checking on database.

$(document).ready(function(){
$("#logstore").click(function(){
var email=$('#emmail_login').val();
var password=$('#login_password').val();

if ($.trim(email).length == 0) {
var em = false;
$("#emmail_login").css('border','1px solid #ff0000');
$("#emaillog_error").html('Please Enter Email !');
$("#emaillog_error").css('display','block');
}
else if (validateEmail(email)) {
$("#emmail_login").css('border','1px solid #45a748');
$("#emaillog_error").css('display','none');
var em = true;
}
else {
$("#emaillog_error").html('Invalid Email!');
$("#emaillog_error").css('display','block');
$("#emmail_login").css('border','1px solid #ff0000');
var em = false;
}
   
   if ($.trim(password).length == 0) { 
    $("#login_password").css('border','1px solid #ff0000');
    $("#pwd_error").html('Please Enter Password !');
    $("#pwd_error").css('display','block');
    var pwd = false;
    }
    else if($.trim(password).length > 30) 
    {
    $("#login_password").css('border','1px solid #ff0000');
    $("#pwd_error").html('Below 30 Digits!');
    $("#pwd_error").css('display','block'); 
    var pwd = false;
    }else if(validatePassword(password))
    {
      $("#login_password").css('border','1px solid #45a748'); 
      $("#pwd_error").css('display','none'); 
      var pwd = true;
    }else
    {
    $("#login_password").css('border','1px solid #ff0000');
    $("#pwd_error").html('Atleast 1 Alphabet, atleast 6 Digits & Only Alphanumeric');
    $("#pwd_error").css('display','block'); 
    $("#log_error").css('display','none');
    var pwd = false;   
    }
 
if(pwd == true && em==true){
 $("#load_img").css('display','block');   
$.ajax({
type: "POST",
url: "ajax-login.php",
data: "mode=LOG&password="+password+"&email="+email,
success: function(response){
      $( '#log_error' ).html(response);
       if(response=="OK")	
               {
                $("#log_error").html('Loging Sucessfully');
                $("#load_img").css('display','none');
                window.location="login-success.php";
                alert('success'); 
                return true;	
               }
               else
               {
                alert(response);
                $("#log_error").html('Email or Password is Incorrect!');
                $("#emmail_login").css('border','1px solid #ff0000');
                $("#login_password").css('border','1px solid #ff0000');
                $("#log_error").css('display','block');
                $("#load_img").css('display','none');
                  return false;	
               }
           }
  });
}
return false;
});
});
// Validate Email Address
function validateEmail(sEmail) {
var filter = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}
//Validate Password 
function validatePassword(pwd) {
var filter = /^(?=.*[a-z])[a-zA-Z0-9]{6,}$/;
if (filter.test(pwd)) {
return true;
}
else {
return false;
}
}

ajax-login.php

This ajax login page used for checking Email and Password on DB. If the credentials are correct then the data will be stored on session and redirect to custom page.

session_start();
	require_once 'dbconfig.php';
    if($_POST)
	{
     if($_POST['mode']=='LOG')
     {
        $user_password = $_POST['password'];
		$user_email = $_POST['email'];
        $password = md5($user_password);
        $query = "SELECT user_id,email FROM users WHERE email='$user_email' AND password='$password'";
        $result = mysqli_query($conn,$query);
        $row = mysqli_fetch_array($result,MYSQLI_ASSOC);
        $count = mysqli_num_rows($result);
        if($count == 1){
        echo "OK";
        $_SESSION['username'] = $row['user_id'];
        }
        else
        {
         echo "NOT";
        }
     }
  }

Demo   Download

If you like this tutorial, Please leave a comment on below!

]]>
http://www.spiderscode.com/ajax-login-using-jquery-php-mysql/feed/ 0