Skip to content
  • Home
  • Server-Side
    • php
    • Node.js
    • ASP.NET
    • Magento
    • Codeigniter
    • Laravel
    • Yii
    • CRUD
      • CRUD Database Application
      • CRUD operation in Client side
      • CRUD operation with server side
  • JavaScript
    • AngularJS
    • Ajax
    • VueJs
    • jQuery
    • ReactJS
    • JavaScript
    • SEO
  • Programming
    • Android
    • C programming
    • CSS
    • Mysql
    • Mysqli
  • Technology
    • Software
      • webinar software
      • webinar conferencing software
      • soundproof
    • Adsense
      • Google
      • Earn Money
      • Google Adsense
        • Adsense fraud
        • Adsense Secrets
        • Adsense software
        • Adwords advice
        • Adwords strategy
        • Google adwords help
        • How to get google ads
    • Tips and Tricks
    • Interview
    • Insurance
    • Religious
    • Entertainment
      • Bollywood
      • tamilrockers
      • Hollywood
  • Health Care
    • LifeStyle
    • Women
    • Fashion
    • Top10
    • Jobs
  • Tools
    • Screen Resolution
    • WORD COUNTER
    • Online Text Case Converter
    • what is my screen resolution?
  • Guest Post
    • 4cgandhi
    • IFSC Code

jQuery AJAX login and registration Form using PHP MySQLi

July 18, 2018July 17, 2018 by Pakainfo

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"); } ?>

Read Also:  Login and Registration Form in PHP using Mysqli

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to find the foreach index using PHP?
  2. Read Also:  Word Count hadoop Program(in Java & Python)
  3. Read Also:  Encrypt and Decrypt files using PHP
  4. Read Also:  How to validate mobile number in html? (mobile number validation in html w3schools)
  5. Read Also:  Image Uploads with Angular 9 Tutorial
  6. Read Also:  Create a Registration and Login System with PHP and MySQL
  7. Read Also:  How to Select React Js Check All Uncheck All Checkboxes
  8. Read Also:  how to clear cache in laravel 5/6/7?
  9. Read Also:  jQuery Ajax Secure Login Registration System in PHP and MySQL
  10. Read Also:  Angular 9/8 Material Radio Button Examples
Categories JavaScript, jQuery, Mysql, Mysqli, php, Programming Tags javascript ajax login, jquery ajax login form submit, jquery ajax login form validation, login and registration form in php using session, login form using ajax and php, login form with jquery ajax json, php ajax login form validation, php mysqli login system tutorial
Post navigation
PHP CURL POST and GET REQUEST Methods
jQuery Ajax GET & POST REQUEST Methods PHP MySQLi

Categories

Ajax (419) AngularJS (357) ASP.NET (61) Bollywood (35) Business (16) Codeigniter (142) C programming (13) CSS (62) Earn Money (50) Education (30) Entertainment (41) Events (14) Google Adsense (58) Government (13) Highcharts (77) Hollywood (34) Interview (18) JavaScript (876) Jobs (25) jQuery (952) Laravel (1008) LifeStyle (31) linux (18) Misc (13) Mysql (872) Mysqli (780) Node.js (34) php (1688) Programming (2185) Python (44) ReactJS (33) SEO (22) Software (16) Software (38) tamilrockers (30) Tech (15) Technology (2194) Tips and Tricks (75) Tools (27) Top10 (109) VueJs (249) Web Technology (28) wordpress (135) World (22) Yii (14)
© 2021 Pakainfo • Developed By Pakainfo.com