jQuery AJAX login and registration Form using PHP MySQLi

Today, We want to share with you jQuery AJAX login and registration Form using PHP MySQLi.
In this post we will show you AJAX login and registration Form example, hear for Simple User Registration & Login Script in PHP and MySQLi we will give you demo and example for implement.
In this post, we will learn about Simple PHP Login System Using MySQL and jQuery AJAX with an example.

What is AJAX?

Fist of all AJAX Full form of Asynchronous JavaScript and XML.(interactive with databased).
AJAX can be mostly used for interactive communication(using data) with a Database.(like mysql,sql,oracle),
ajax is used to create more fast and interactive Application.It’s new way of data send very fast to client(Browser side to serverside data exchange).

create database and table in mysql using php

Database and Table

Create Database : localhost/phpmyadmin
create Database Sample : user_registration

Create Table : go to crate a table
Now click sql tab and excute this script

CREATE TABLE IF NOT EXISTS `table_users` (
  `tuser_id` int(11) NOT NULL AUTO_INCREMENT,
  `tuser_name` varchar(27) NOT NULL,
  `tuser_email` varchar(68) NOT NULL,
  `tuser_password` varchar(250) NOT NULL,
  `tjoining_date` datetime NOT NULL,
  PRIMARY KEY (`tuser_id`)
)

dbconfig.php

<?php $db_host_name = "localhost";//alternative Hostname 127.0.01 $db_name = "user_registration"; $db_user_name = "root";//Default root $db_pass = ""; try{ //Using PDO $db_con = new PDO("mysql:host={$db_host_name};dbname={$db_name}",$db_user_name,$db_pass);//Inialize. $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);//All set aatribute
 }
 //Generate Error message display
 catch(PDOException $e){
  echo $e->getMessage();//Show message
 }
?>

Simple user login form ajax php mysql

<link href="projectname/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="projectname/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">

index.html

<div class="user_signin-form">
<div class="container">
<form class="user-form-signin" method="post" id="login-form">
<h3 class="form-signin-heading">Simple Log In to WebApp using AJAX.</h3>
<hr />
<div id="error">
        <!-- generate error will be shown here display ! -->
        </div>
<div class="form-group" id="card_box">
        <input id="user_email" placeholder="Your Email address enter" type="email" class="form-control"name="user_email" />
        <span id="check-e"><!-- generate error will be shown here display ! --></span>
        </div>
<div class="form-group" id="card_pass">
        <input type="password" id="password" class="form-control" placeholder="Your Password Enter" name="password" />
        </div>
<div id="new_signin" class="form-group">
            <button id="btn-login" class="btn btn-default" name="btn-login" type="submit" >
      <span class="glyphicon glyphicon-log-in"></span>   Sign In With AJAX   
   </button> 
        </div>
      </form>
    </div>
</div>

login_process.php

<?php session_start();//start session require_once 'dbconfig.php';//include congig(databased) if(isset($_POST['btn-login']))//if check call in post method or not { $user_email = trim($_POST['user_email']);//get user_email address $user_password = trim($_POST['password']);//get password address //Generate secure password generate $password = md5($user_password);//Store password try { $stmt = $db_con->prepare("SELECT * FROM table_users WHERE tuser_email=:email");
   $stmt->execute(array(":email"=>$user_email));//Execute query here
   $row = $stmt->fetch(PDO::FETCH_ASSOC);//fetch the data
   $count = $stmt->rowCount();//Total no of rows count
   //check both password are same or not
   if($row['user_password']==$password){
    
    echo "ok"; // log in success so ok.
    $_SESSION['user_session'] = $row['user_id'];//set session
   }
   else{
    //Information wrong.
    echo "email or password does not exist."; // Does not matched wrong details 
   }
    
  }
  catch(PDOException $e){
   echo $e->getMessage();
   //if generated error show display error message
  }
 }

?>

Script.js

//Using jQuery check validatin 
$('document').ready(function()
{ 
     /* start validation using jQuery */
  $("#login-form").validate({
      rules:
   {
   //For use password using id
   password: {
   required: true,
   },
   //For use user_email using id
   user_email: {
            required: true,
            email: true
            },
    },
	//For use message using id
       messages:
    {
            password:{
                      required: "please enter your Good password(strong)"
                     },
            user_email: "please enter your Business email address",
       },
	   //Submit form
    submitHandler: submitForm 
       });  
    /* End validation using jQuery */
    
    /* Simple login Form submit */
    function submitForm()
    {  
	//All obejct cretaed using form id(login-form)
   var data = $("#login-form").serialize();
    
	//request client(browser to server data send)
   $.ajax({
    
   type : 'POST',//using POST - GET - PUT or DELETE method
   url  : 'login_process.php', // data send url
   data : data, // all data varible send
   beforeSend: function()
   { 
    $("#error").fadeOut(5000);//jquery function
    $("#btn-login").html('<span class="glyphicon glyphicon-transfer"></span> 
 sending The data ...'); 
   },
   //if data send server successfully retrive respnse
   success :  function(response)
      {      
     if(response=="ok"){
         //if response success so 
      $("#btn-login").html('<img src="loader_btn-ajax-loader_img01.gif" /> 
Signing In ... ');
	  //loader images in process
      setTimeout(' window.location.href = "home.php"; ',6000);
	  //redirect url in this page
     }
     else{
         
      $("#error").fadeIn(1000, function(){      
    $("#error").html('
<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span>   '+response+' !</div>

');
		//Error display for sign in
           $("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span>   Sign In');
         });
     }
     }
   });
    return false;
  }
    /* End AJAX using login FORM submit */
});

home.php

<?php session_start();//start session if(!isset($_SESSION['user_session'])) { //if does not session set to redirect this page index.php header("Location: index.php"); } include_once 'dbconfig.php';//include config(Databased) $stmt = $db_con->prepare("SELECT * FROM table_users WHERE tuser_id=:uid");//make a select query
$stmt->execute(array(":uid"=>$_SESSION['user_session']));//query excute
$row=$stmt->fetch(PDO::FETCH_ASSOC);//Fetch records

?>

<html>
<head>
<title>Login Form using jQuery Ajax and PHP MySQL</title>
<link href="projectname/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="projectname/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> 
//custom css call
<link href="projectname/bootstrap/css/style.css" rel="stylesheet" media="screen">
</head>
<body class="user_work">
<div class="container" id="fetch_data">
<div class='alert alert-success'>
  <button class='close-data' data-dismiss='alert' id="close_button">×</button>
   <strong>Hello Simple Ajax to'<?php echo $row['user_name']; ?></strong>  Welcome to the New members page.
    </div>
</div>
</div>
</body>
</html>

logout.php

<?php //start session session_start(); //session destroy,session unset unset($_SESSION['user_session']); //session destroy,session unset if(session_destroy()) { //redirect url header("Location: index.php"); } ?>

Related FAQ

Here are some more FAQ related to this Article: