Login Script with AJAX jQuery PHP and MySql

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.

Only cool people share!

DROP TABLE IF EXISTS `users`;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `users` (
`id` int(6) unsigned NOT NULL AUTO_INCREMENT,
`username` varchar(250) NOT NULL,
`email` varchar(250) NOT NULL,
`password` varchar(250) NOT NULL,
`reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

Login Script with AJAX jQuery PHP and MySql was last modified: January 11th, 2022 by Maximus Mccullough
Summary
Login Script with AJAX jQuery PHP and MySql
Article Name
Login Script with AJAX jQuery PHP and MySql
Description
Lets 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.
Author
Publisher
A1WEBSITEPRO LLC
Logo
Login Script with AJAX jQuery PHP and MySql

Pages:Previous 1 2

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.