Have you ever wondered what’s behind these sign-ups forms. Where your data goes to after filling it up. Now I’m going to tell you the secrets behind those forms, how they are being processed and used to help remember your login details.

Before we begin, we’ll assume you’ve already learnt the core languages used in this tutorial like HTML, CSS, PHP and SQL. JavaScript can also be used to improve functionality but it’s outside the scope of this tutorial.

Let’s start the first step

Step 1.

Create your database.

Using your phpmyadmin tool. Create your database where you can store user data. Let our database name be charming_desk.

After that, we’ll create a table named “user-login”. The same table we used in our log-in form tutorial. Now we add the following fields. “Id”, “email”, “fullname”, “password”, with their corresponding data-types now let’s begin creating our form.

Step 2.

Creating a sign-up form.

Now that our database has been set, we’ll move over to our sign up.php page to create the form. You can create your own sign-up.php file and continue from there. First of all, let’s enable the use of sessions in that page.

<?php
session_start();

Now we can connect our sign-up page to our database with our mysqli_connect() function.

$conn=mysqli_connect("localhost","root","","charming_desk");
?>

Now that we have connected our sign-up page to the database, we can now begin building our form.

Our form should contain an email, full name and a password field. And should be done as follows.

<form method="post">
<input type="email" name="email" placeholder="write email"><br><br>

<input type="password" name="password" placeholder="type password here"><br>

<input type="password" name="cpassword" placeholder="confirm password"><br>

<input type="text" name="fullname" placeholder="e.g John Doe"><hr>

<button type="submit" name="submit">submit form</button>
</form>

If you notice we created two password fields. This will come in handy in ensuring that the user can easily remember his password or doesn’t make a mistake in the original password.

Step 3.

Processing the form results.

Now the most important part of this tutorial is to process the sign up form and store these data in our database. This can be a little tricky but we can handle it. We’ll start with selecting all the values with our php code.

<?php
if(isset($_POST['submit'])){
$email=$_POST['email'];

$password=$_POST['password'];

$cpassword=$_POST['cpassword'];

$fullname=$_POST['fullname'];

//Now we can confirm if the two password fields have the same value.


if($password!= $cpassword){

echo "passwords are not the same";

}
else
{
//Insert the form values to the database.

$insert=mysqli_query($conn,"INSERT INTO user_login(email,fullname,password)VALUES('$email','$fullname','$password')");


//Redirect to restricted page(index.php)

If($insert){
header("location:index.php");

}
}
}

?>

Bonus step.

Hashing and verifying passwords.

In order to protect the passwords from being exploited, you can use the password_hash () function to encrypt it then password verify to decrypt it.

<?php
$hashedpassword=password_hash('$password','PASSWORD_BCRYPT');

//where password_bcrypt is the encryption method.


?>

Now in our login.php page, we verify the password by selecting it then using the password verify method.

If you need to add a file upload button on your form, maybe to take images or PDF files, you can see How to upload images on your website using a form.

We hope this post really helped you in solving your problems. We wish you good luck in your projects and will want to see it live on the internet one day.

Feel free to follow our social media channels for more updates. Also remember to leave a comment for us, we’ll appreciate that.

You can contact us via email

Hello@charmingdesk.com.ng

Charming desk, Your favorite web developers.

Categories: php

vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

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