1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 5.00 out of 5)

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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂

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. 

Subscribe To My YouTube Channel:
<!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 "";
}
?>

 

Create Secure Password Sign Up Script With PHP jQuery and AJAX was last modified: April 6th, 2018 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
Create Secure Password Sign Up Script With PHP jQuery and AJAX

2 Comments

  • Steve Taylor says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

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