Basic mySQLi Login Script which includes JavaScript for AJAX login, PHP login script, PHP logout script.
Login form

Login success

Login error

Demo
login.php
Grabs $_POST vars, escapes, creates new mySQLi connection. Logs the user in and stores PHP session with project name. Returns JSON to front end with success or incorrect login.
<?php
/**
* Escape a variable for MySQL
* @param var - the variable. Only null, booleans, integers, floats and strings. Everything else will error out
**/
function escape($db_con, &$var)
{
if (!isset($var))
{
return 'NULL';
}
elseif (is_string($var))
{
return "'" . $db_con->real_escape_string($var) . "'";
}
elseif (is_int($var) || is_float($var))
{
return "'" . $var . "'";
}
elseif (is_bool($var))
{
return ($var) ? "'1'" : "'0'";
}
else
{
throw new Exception("Type of $var not accepted by escape");
}
}
if (!isset($_SESSION)) {
session_start();
}
// echo $_SESSION['samdeering']['uid'];
//login script
if (!isset($_SESSION['projectname']['uid']))
{
//check login
if (isset($_POST['username']) && isset($_POST['password']))
{
//get vars
$username = $_POST['username'];
$password = $_POST['password'];
//settings
$settings = array(
'host' => 'localhost',
'user' => 'root',
'password' => '',
'database' => 'db'
);
//connect to db
$db_con = new mysqli($settings['host'], $settings['user'], $settings['password'], $settings['database']);
if ($db_con->connect_errno)
{
die("Database connection error: " . $db_con->connect_error);
}
//get password
$query = "SELECT uPwd from users WHERE uAcc = ".escape($db_con, $username).";";
$results = $db_con->query($query);
$results = $results->fetch_assoc();
// var_dump($results['uPwd']);
// var_dump(md5($password));
//check password
if ($results['uPwd'] == md5($password))
{
$_SESSION['projectname']['uid'] = $username;
$data = array(
"result" => true,
"msg" => "<div id='user'><p>Logged in as ".$username." | <a href='/php/logout.php'>Logout</a></p></div>"
);
echo json_encode($data);
exit();
}
else
{
$data = array(
"result" => false,
"msg" => "<div id='user'><p class='error'>Username or password incorrect.</p></div>"
);
echo json_encode($data);
exit();
}
}
echo "You must be logged in to view this page. <a href='http://".$_SERVER['SERVER_NAME']."'>Login</a>";
exit();
}
?>
logout.php
Clears the session for the projectname only. Redirects back to home.
<?php
if (!isset($_SESSION)) {
session_start();
}
unset($_SESSION['projectname']);
header("Location: http://" . $_SERVER['SERVER_NAME']);
?>
script.js
Processes a form with username and password. Sends to backend login script, reads json returned to display login details or incorrect login.
//ajax login script
$(function()
{
$(document).ready(function()
{
$('#login-submit').on('click', function(e)
{
e.preventDefault();
var formData = $('#login-form').serialize();
// console.log(formData);
$formLoading = $('#login-form .loading');
$formLoading.show();
$.ajax(
{
type: "POST",
url: 'login.php',
dataType: "json",
data: formData,
success: function(ret)
{
// console.dir(ret);
if(ret.result)
{
$('#login-form').after(ret.msg).fadeOut(500, function()
{
$('#user').fadeIn(500);
})
}
else
{
$('#login-form').after(ret.msg).fadeOut(500, function()
{
$('#user').fadeIn(500);
setTimeout(function()
{
$('#user').fadeOut(500, function()
{
$('#login-form').fadeIn(500);
});
}, 1500);
})
}
},
error: function(xhr, textStatus, errorThrown)
{
console.log(xhr, textStatus, errorThrown + 'error');
return false;
},
complete: function()
{
$formLoading.hide(); //hide loading image
}
});
});
});
});
HTML Form
This is a modified version of the HTML form provided by Bootstrap.
<form class="navbar-form pull-right" id="login-form">
<input type="text" name="username" placeholder="username" class="span2">
<input type="password" name="password" placeholder="password" class="span2">
<button class="btn" type="submit" id="login-submit">Sign in</button>
</form>