Create Secure Password Sign Up Script With PHP jQuery and AJAX

Create Secure Password Sign Up Script With PHP jQuery and AJAX

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();
?>

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

Sign Up To Comment