Create a secure password sign up script with PHP, jQuery and AJAX with this easy to follow tutorial. Preliminary steps for this tutorial is to go over the last post Create A Database and Table At The Same Time With PHP. If you are already familiar with creating database tables this is the structure for the database in this lesson. Create a database called “members”. Then create a table called “users”. Here are the columns that you need for your “users” table.
- id
- username
- password
- reg_date
NOTE: This tutorial has been updated to use the latest and most secure methods for storing passwords. You will not see it on the video but I corrected it in the scripts below.
Scripts for Create Secure Password Sign Up Script With PHP jQuery and AJAX
Create a file and call it index.php. Insert the following code or download it here.
<!DOCTYPE html>
<html>
<head>
<title>Create Secure Password Sign Up Script With PHP jQuery and AJAX</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<input id="name" type="text" placeholder="Username">
<input id="email" type="email" placeholder="Email">
<input id="pass" type="password" placeholder="Password">
<input id="submit" type="button" value="Submit">
<div id="display"></div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var pass = $("#pass").val()
var dataString = 'name1='+ name + '&email1='+ email+ '&pass1='+ pass;
if(name==''||email==''||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>
Now create a file called processor.php and enter the following code or download it here.
<?php
include_once('config.php');
$name = filter_var($_POST['name1'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$email = filter_var($_POST['email1'], FILTER_SANITIZE_EMAIL, FILTER_FLAG_STRIP_HIGH);
$hash=password_hash($_POST['pass1'], PASSWORD_BCRYPT);
mysqli_query($con,"INSERT INTO users(`username`, `email`, `password`)VALUES('$name','$email','$hash')");
echo '<strong>'.$name.'</strong><br/>';
echo '<strong>'.$email.'</strong><br/>';
echo 'This is the password:<strong>'.$pass.'</strong><br/>';
echo 'This is the encrypted password: <strong>'.$hash.'</strong><br/>';
$con->close();
?>[/php]
You will also need a config file. Create a config.php and enter the following code. Make sure that you change the connection information to match your mysql database.
[php]<?php
$con = mysqli_connect("localhost","dbusername","dbpass","dbname");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
echo "";
}
?>
2 Comments
Thanks so much for your brilliant password code. And your instructions are so easy to follow.
Having gone through it, you need to also update the reset password code (lostpasswordprocessor.php) to make the new code consistent to the updated secure hash password code used in your initial set password page (otherwise the login doesn’t work after reset password). Use $hash=password_hash($pwclean, PASSWORD_BCRYPT); instead of $hash=sha1(md5($pwclean));
Thanks again for sharing your code.
Thanks I will get it updated when I get some time