login using ajax in php
PHP

Login with AJAX ,JQuery and PHP.

Ankit

welcome back to shortlearner.com, in our previous post we learn how to create a signup or registration page with the help of AJAX, PHP and MySQL. Now in this post today we will learn how to implement login script with the help of Bootstrap, AJAX, PHP and MySQL.
Before start this tutorial we should know a little bit about AJAX.
so basically it stands for Asynchronous JavaScript and XML.

login using ajax in php

A user can continue to use the application while the client program requests information from the server in the background.
so first we create a database with the name of task, and also create a database table with the name of emp_details.

in this table we take employees personal details like employee name, email, password and mobile number as well.

CREATE TABLE `emp_details` (
  `id` int(11) NOT NULL auto_increment,
  `emp_name` varchar(222) default NULL,
  `email` varchar(222) default NULL,
  `mobile` varchar(22) default NULL,
  `password` varchar(22) default NULL,
  `status` int(10) default '1',
  `user_type` varchar(222) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

After creating database we need to establish a connection between our PHP code and MySQL database. so we create a config.php page and make a database connection inside it.
config.php

<?php 
$conn = mysqli_connect("localhost","root","root","task");
?>

Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?

Now we design a responsive login form with the help of bootstrap, html and css.
index.php

<html>
</head>
<link href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container login-container">
	    <div class="row">
		    <div class="col-md-6 login-form-1">
		        <h3>Admin Login</h3>
		        <hr>
		        <form id="loginform" method="post" onsubmit="return do_login();">
		            <div class="form-group">
		                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email *" value="" />
		            </div>
		            <div class="form-group">
		                <input type="password" class="form-control" name="password" id="password" placeholder="Your Password *" value="" />
		            </div>
		            <div class="form-group">
		                <input type="submit" class="btnSubmit" value="Login" />
		            </div>
		            <div class="form-group">
		                <a href="#" class="ForgetPwd">Forget Password?</a>
		            </div>
		        </form>
		    </div>
<body>
</html>

and put the css file in style.css

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

on form submit we call a JQuery function do_login, which takes all the values of input fields on the behalf of their ids itself, than we send all the data to our do_login.php page using action tag.

<script type="text/javascript">
	function do_login()
	{
		
	 var email=$("#email").val();
	 var pass=$("#password").val();
	 if(email!="" && pass!="")
	 {
	  
	  $.ajax
	  ({
	  type:'post',
	  url:'do_login.php',
	  data:{
	   action:'login',
	   email:email,
	   password:pass
	  },
	  success:function(response) {
	  if(response=="success")
	  {
	    window.location.href="dashboard.php";
	  }
	  else
	  {
	    
	    alert("Wrong Details");
	  }
	  }
	  });
	 }

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

	 return false;
	}
</script>

now create our last do_login.php page which will help us to check the users data from database without refreshing current page.
do_login.php 

<?php 
if($_POST['action']=='login')
{
	require('config.php');
	$email =  filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
	$password = filter_var($_POST['password']);
	$find = $conn->query("SELECT * FROM emp_details where `email`='$email' AND `password`='$password' AND `status`='1' AND user_type='admin'");
	$fetch = $find->fetch_assoc();
	if($fetch['id'])
	{
		session_start();
		$_SESSION['email'] = $fetch['email'];
		echo "success"; 	
	}
}
?>