Login Form PHP MySql JQuery

 

We want to create a Login Form.In the login form the Session variable are used.

Session Variable: HTTP is a Stateless protocol.Session variables are used to store individual client’s information on web server for later use,  as web server does not know which client’s request to be respond because, HTTP address does not maintained state.

We can use session_start() Function for start the session;

config.php 

<?php
    session_start();
    error_reporting(1);
    $host="localhost";
    $username="root";
    $pass="";
    $db="blog_demo";
    $connect=mysql_connect($host,$username,$pass)or die(mysql_error());
    $dbselect=mysql_select_db($db,$connect)or die(mysql_error());
?>

HTML

<form id="login_form" method="post" name="login_form">
    <input class="textbox" id="email" name="email" placeholder="Enter Your Email" type="text" />
    <input class="textbox" id="password" name="password" placeholder="Enter Your Password" type="password" />
    <input id="login" name="login" type="submit" value="Login" /> 
</form>

JavaScript  

<script type="text/javascript">
jQuery( document ).ready(function() {
        $('#login').click(function()
        {
            jQuery("#login_form").validate({
            rules:
            {
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true
                }
            },
            messages:
            {
                email:{
                    required: "Please enter an email",
                    email: "Please enter a valid email"
                },
                password: {
                    required: "Please provide a password"
                }
            },
            submitHandler: function(form) {
                $.ajax({
                type: "POST",
                url: "login_ajax.php",//Ajax Call to PHP file without refresh a page
                data: $("#login_form").serialize(),
                cache: false,
                beforeSend: function(){ $("#login").val('Connecting...');},
                success: function(data){
                if(data=='true')
                {
                    window.location.href = "success.php";//Redirect the page by jQuery
                }
                else{
                    $("#login_error").html(data);
                    $("#login").val('Login');  
                }
            }
            }); 
        }      
        });
    });
});
</script>

PHP Code

<?php
   include'includes/config.php'
   $email=$_POST['email'];
   $password=$_POST['password'];
   $sql ="SELECT * FROM user WHERE email='$email' and password='$password'";
   $select=mysql_query($sql);
   $count=mysql_num_rows($select);
   if($count==1)
   {    
        $row=mysql_fetch_array($select);
        $_SESSION['id']=$row['id'];
        $_SESSION['username']=$row['username'];
        $_SESSION['email']=$row['email'];
        echo 'true';    
    }
    else
    {
        echo 'Wrong Email id and Password';
    }
?>

If user submit the form with blank field then it gives the messages like "Please enter an email".If user submit with wrong details then it display a message "Wrong Email id and Password" by ajax functionality without refresh a page but if user submit with right details then it redirect the welcome page.

CLICK HERE FOR DOWNLOAD COMPLETE CODE...