Ajax Login Form Using jQuery, PHP And MySQL

Friday, Jan 27, 2017

Tags:- jQuery Ajax PHP MySQL


Ajax login form is used when you have to submit form and do login without page refresh to avoid user redirection and also for saving time and you can also use ajax login form in popup box. So in this tutorial we will show you how to create ajax login form using jQuery, PHP and MySQL.You may also like ajax contact form using PHP and MySQL.


See Demo
Ajax Login Form Using jQuery, PHP And MySQL


To Create Ajax Login Form It Takes Only Four Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file for login
  3. Make a PHP file for main page and logout
  4. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name login.html

<html>
<head>
<link href="login_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function do_login()
{
 var email=$("#emailid").val();
 var pass=$("#password").val();
 if(email!="" && pass!="")
 {
  $("#loading_spinner").css({"display":"block"});
  $.ajax
  ({
  type:'post',
  url:'do_login.php',
  data:{
   do_login:"do_login",
   email:email,
   password:pass
  },
  success:function(response) {
  if(response=="success")
  {
    window.location.href="index.php";
  }
  else
  {
    $("#loading_spinner").css({"display":"none"});
    alert("Wrong Details");
  }
  }
  });
 }

 else
 {
  alert("Please Fill All The Details");
 }

 return false;
}
</script>
</head>
<body>
<div id="wrapper">

<div id="login_form">
 <h1>LOGIN FORM</h1>
 <p id="login_label">Email : demo@demo.com | Password : demo</p>
 <form method="post" action="do_login.php" onsubmit="return do_login();">
  <input type="text" name="emailid" id="emailid" placeholder="Enter Email">
  <br>
  <input type="password" name="password" id="password" placeholder="***********">
  <br>
  <input type="submit" name="login" value="DO LOGIN" id="login_button">
 </form>
 <p id="loading_spinner"><img src="images/loader.gif"></p>
</div>

</div>
</body>
</html>

In this step we create a login for user to do login and create a function do_login() to do login without page refresh.In do_login() function we get user email id and password then create an ajax request and send the data to do_login.php file and if user successfully logged in we redirect user to index.php page.if you want to make your login form more secure view our validate email and password using jQuery tutorial.



Step 2.Make a PHP file for login

We make a PHP file and save it with a name do_login.php

// Database Structure 
CREATE TABLE 'user' (
 'email' text NOT NULL,
 'password' text NOT NULL,
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

<?php
session_start();
if(isset($_POST['do_login']))
{
 $host="localhost";
 $username="root";
 $password="";
 $databasename="sample";
 $connect=mysql_connect($host,$username,$password);
 $db=mysql_select_db($databasename);

 $email=$_POST['email'];
 $pass=$_POST['password'];
 $select_data=mysql_query("select * from user where email='$email' and password='$pass'");
 if($row=mysql_fetch_array($select_data))
 {
  $_SESSION['email']=$row['email'];
  echo "success";
 }
 else
 {
  echo "fail";
 }
 exit();
}
?>

In this step we create a database called 'user' and then get user email id and password and check if these details are present in our database table if details are present we insert email id in session variable otherwise we display fail.You may also like login form with limited login attempts using JavaScript.



Step 3.Make a PHP file for main page and logout

We make a PHP file and save it with a name index.php

<?php
session_start();
if(isset($_POST['logout']))
{
 unset($_SESSION['email']);
}
?>

<html>
<body>
 <h2>Hi, Demo</h2>
 <form method='post'>
  <input type='submit' name='logout' value='Logout'>
 </form>
</body>
</html>

In this step we create a logout form to do logout by simply using unset() function.You may also like login form with shake animation effect.



Step 4.Make a CSS file and define styling

We make a CSS file and save it with a name login_style.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#819FF7;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#0B2161;
}
#wrapper h1 a
{
 color:#0B2161;
 font-size:18px;
}
#wrapper h2 input[type="submit"]
{
 background:none;
 border:none;
 text-decoration:underline;
 font-size:17px;
}
#login_form
{
 background-color:white;
 width:350px;
 padding:20px;
 box-sizing:border-box;
 margin-left:320px;
 box-shadow:0px 0px 10px 0px #2E64FE;
}
#login_form h1
{
 text-align:center;
 margin:0px;
 color:#0B2161;
 font-size:27px;
 margin-bottom:20px;
}
#login_form #login_label
{
 color:#0B2161;
}
#login_form input[type="text"],input[type="password"]
{
 width:250px;
 height:40px;
 padding-left:5px;
 margin:5px;
 border-radius:2px;
 border:1px solid #2E64FE;
}
#login_form input[type="submit"]
{
 background-color:#2E64FE;
 color:white;
 border:none;
 border-bottom:3px solid #0040FF;
 width:250px;
 height:45px;
 border-radius:2px;
 margin-left:-4px;
 margin-top:5px;
}
#login_form #loading_spinner
{
 display:none;
}

That's all, this is how to create ajax login form using jQuery, PHP and MySQL.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials
And Offers Via Email

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.