Login Script with AJAX jQuery PHP and MySql

Let's create a login script with AJAX JQuery, PHP and MySQL in this tutorial. We will create a form to login to the system and use AJAX with JQuery for the process. Next we will use PHP to process the form and return data to the webpage without reloading. Then we will set session variables in PHP to call from every time we want to display user information on a web page. This is another lesson in the following series. NOTE: I have updated this tutorial to the latest and most secure way to store passwords. I will not show it on the video, but you can see it in the code.

PHP and Script Functions Used in This Tutorial

ready() function AJAX jQuery
click() function AJAX jQuery
ajax() function AJAX and jQuery submitting to processor.
session_start() to set PHP session Variables

Next page has the scripts for this project.

Login Script for AJAX, jQuery, PHP and Mysql in this Tutorial

Create a file and call it index.php and put the following code in it. You can download the script here if you like.

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Login Script with AJAX jQuery PHP and MySql</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<input id="username" type="text" placeholder="Username">
<input id="pass" type="password" placeholder="Password">
<input id="submit" type="button" value="Log In">
<div id="display"></div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var uname = $("#username").val();
var pass = $("#pass").val();
var dataString = 'uname1='+ uname + '&pass1='+ pass;
if(uname==''||pass=='')
{
$("#display").html("Please Fill All Fields");
}
else
{
$.ajax({
type: "POST",
url: "processor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
}
return false;
});
});
</script>
</body>
</html>

Next, create a file and call it processor.php you can download it or put in the following code.

<?php session_start();
include_once('config.php');
$name=mysqli_real_escape_string($con, $_POST['uname1']);
$nameclean = filter_var($name, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$pass=mysqli_real_escape_string($con, $_POST['pass1']);
$result = $con->query("SELECT * FROM users WHERE username='$nameclean' ") ;
$total=$result->num_rows;
if($total<1){
echo 'That user is not in our system';
}else{
while ($row = $result->fetch_assoc()) {
echo 'Yes we have a match and the email is '.$row['email'];
if(password_verify($pass, $row['password'])){
$_SESSION['id']=$row['id'];
echo '<br/>The Session ID is '.$_SESSION['id'];
}else{
echo 'Wrong Password';
}
}
}
$con->close();
?>

You will also need a config.php file to connect to your database.

<?php
$con = mysqli_connect("localhost","dbusername","dbpass","dbname");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
echo "";
}
?>

Here is the database you need to create.

DROP TABLE IF EXISTS `users`;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `users` (
  `id` INT(6) UNSIGNED NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(100) NOT NULL,
  `email` VARCHAR(250) NOT NULL,
  `password` VARCHAR(255) NOT NULL,
  `reg_date` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email_unique` (`email`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;