Simple Step-by-Step Guide to Creating a Registration Form with PHP and MySQL (prepared statement).

Author - Maketechstuff
February 14, 2023
0

In this article, You'll learn how to make simple signup or registration form using HTML, CSS, JavaScript and PHP and store data in MySQL database using mysqli prepared statement (which is secured way).


In this form:

When user click on create account button, if form has not valid input according to conditions set to it then it shows the error message and if form has valid input according to conditions set to it, then it store the data in database and user will redirect to login.php. Check it out login and logout php post, I have used same database and data for login.


Registration Form Using php

Credit :

User icons created by Freepik - Flaticon
Show password icons created by Freepik - Flaticon
Eye icons created by Freepik - Flaticon


In login.php, when user click on login button in login form after adding require values in input fields (email and password). and if email and it password is correct, then user will  redirect to welcome.php and their username and user id of that user is display. Here i have also have added logout functionality. Their is anchor tag added in welcome.php that when user click on it. user logout.


How we going to make the registration form using php.

  1. Creating frontend of registration form.
  2. Creating database
  3. Establish the connection with database.
  4. Validating the data before storing in database.
  5. Storing data in database.


Video Tutorial on Registration Form :


Registration Form

File structure:

  1. Create one folder inside path: C:\xampp\htdocs\your folder.
  2. Open it in your code editor.
  3. Create three files in that folder signup.php, signup.css and config.php.


Let's first create frontend of signup form. So I've made simple front end of signup form using just HTML & CSS. The form contain:

  • Three input field (username, email, password).
  • Submit button
  • Password show and hide functionality
  • Error message boxes for each field.
  • Links to login, contact etc pages.


HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signup form</title>
    <link rel="stylesheet" href="signup.css">
</head>
<body>

    <div class="container">
        <div class="box">
            <h2>Create Account</h2>
            <form action="#">

                <div class="input_box">
                    <input type="text" class="name" name="name" required>
                    <label>Username</label>
                    <img src="images/user.png">
                </div>
                <p class="error_message"></p>


                <div class="input_box">
                    <input type="password" class="password" name="password" required>
                    <label>Password</label>
                    <img src="images/visible.png" class="password_image">
                </div>
                <p class="error_message"></p>



                <div class="input_box">
                    <input type="text" class="email" name="email" required>
                    <label>Email</label>
                </div>
                <p class="error_message"></p>


                <button class="signup_button" type="submit">Create Account</button>
                <div class="login_link"><a href="login.php">Already have an Account ?</a></div>
                <div class="contact_link"><a href="#">Contact Us</a></div>
            </form>
        </div>
    </div>
    
</body>
<script>

    let password_image = document.querySelector('.password_image');
    let password = document.querySelector('.password');
    let error_message = document.querySelectorAll('.error_message');

    password_image.onclick = function(){
        if (password.type == 'password') {
            password.type = 'text';
            password_image.src = 'images/hide.png';
        }else{
            password.type = 'password';
            password_image.src = 'images/visible.png';
        }
    }

    error_message.forEach(error_message => {
        if(error_message.innerText == ''){
            error_message.style.display = 'none';
        }
    });

</script>
</html>

CSS


*{
    padding: 0;
    margin: 0;
}
.container{
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    width: 350px;
    background-color: #fff;
    padding: 20px 30px;
}
.box h2{
    text-align: center;
    font-size: 40px;
    margin-bottom: 50px;
    position: relative;
}
.box h2::before{
    position: absolute;
    content: '';
    background: linear-gradient(45deg , #6114f7 , #ff3232);
    width: 185px;
    height: 5px;
    right: 80px;
    bottom: -5px;
    border-radius: 50px;
}
.error_message{
    color: red;
    font-size: 18px;
    padding: 2px 5px;
}
.box .input_box{
    width: 100%;
    display: flex;
    border: 1px solid #000;
    align-items: center;
    margin-top: 22px;
    position: relative;
}
.box .input_box img{
    width: 30px;
    height: 30px;
    margin: 0px 5px;
}
.box .input_box input[type="text"] , .box .input_box input[type="password"]{
    width: 100%;
    font-size: 25px;
    padding: 12px 10px;
    outline: none;
    border: none;
}
.box .input_box label{
    position: absolute;
    left: 5px;
    top: 12px;
    font-size: 25px;
    color: #00000094;
    pointer-events: none;
    background-color: #fff;
    padding: 0px 5px;
    transition: 0.2s;
}
.box .input_box input:focus + label,
.box .input_box input:valid + label{
    top: -10px;
    font-size: 16px;
    color: blue;
}
.box .signup_button{
    background-color: #000;
    color: #fff;
    border: none;
    font-size: 28px;
    padding: 5px 20px;
    cursor: pointer;
    width: 100%;
    margin-top: 40px;
    transition: 0.2s;
}
.box .signup_button:active{
    transform: scale(0.9);
}
.box .login_link , .box .contact_link{
    text-align: center;
    margin-top: 20px;
}
.box .login_link a , .box .contact_link a{
    text-decoration: none;
    color: #000;
    font-size: 20px;
    transition: 0.2s;
}
.box .login_link a:hover , .box .contact_link a:hover{
    text-decoration: underline;
}

Output : 


Registration Form


Now the front part is created, Now let's add backend to signup form. 


To create the backend, First we have to make the database and establish the connection. I am using xampp server to run the php files, I have installed it in the C: drive in computer.

Open xampp, and start the apache and mysql module.


apache and mysql start using xampp


And to run the files or see the output of php file, search on browser localhost/your folder name (this only run when the apache and mysql module is running, see the above image to start). 

Here my folder name is new folder, so I have searched localhost/new folder.


open localhost on browser

As you can see in the above image my folder name is new folder. So I search on url bar is localhost/new folder. But their is the space in my folder name (new and then space and folder, new folder), that's why in the url bar %20 is shown in between new and folder. By searching, all the files will display from the new folder and click on signup.php and it will open.


Creating database

So I have created database with name "signup" and database table name with "signuptable". 


database name

creating database


As you can see in the above image that I have set the password field length of 500 it's because we are going to stored password in the hashed form, so the character will be more. If the character length of user password and hashed password is bigger than the length set to password field in database then hashed password or password not be fully store in a database and at the time of login, the password and hased password will not verify and user will not be able to login. Thats why I have added 500 length in password.

Establish connection with database.

We'll write code for establishing connection with database in config.php file that we created.


config.php


<?php

$server = 'localhost';
$username = 'root';
$password = '';
$database = 'signup';

$con = mysqli_connect($server , $username , $password , $database);

if(!$con){
    echo 'connection error';
}

?>

Now the connection is established. Let's write code to validated the form data.

Validating the data

Now let's write code to send and store data to database inside signup.php. So in the backend, I have added simple form validation in php. When user click on create account it checks some conditions, if the conditions are fullfield according to conditions set to input fields, then data stored in database and user will redirect to login.php.


So first I have added config.php for connection, then define the variable for error message then wrote the if condition that run when post request send. Then defined variable for username, password and email.

signup.php


<?php
include 'config.php';

$username_error = '';
$password_error = '';
$email_error = '';

if($_SERVER['REQUEST_METHOD'] == 'POST'){

    $username = $_POST['name'];
    $password = $_POST['password'];
    $email = $_POST['email'];
    mysqli_close($con);
    
}

Username Validation

Lets first validate the username field, if it is empty then error message shows Username cannot be blank. ($username_error = 'Username cannot be blank';) . 

If user name is not empty then, it checks whether the username character is less than 40 or not, If not, then error message shows 'Username must be less than or equal to 40 characters ($username_error = 'Username must be less than or equal to 20 characters';)


signup.php


    if(!empty(trim($username))){
		if(strlen($username) <= 40){
            $trim_username = trim($username);
        }else{
            $username_error = 'Username must be less than or equal to 40 characters';
        }
    }else{
        $username_error = 'Username cannot be blank';
    }


Password Validation

Now after username, we'll check for password. whether password is empty or not. If it is empty then error message shows Password cannot be blank. ($password_error = 'Password cannot be blank';). 

If it is not blank then check that if password character length is greather than or equal to 8 character and less than or equal to 40 character. otherwise error message shows, Password must be atleast 8 characters and less than or equal to 40 characters ($password_error = 'Password must be atleast 8 characters and less than or equal to 40 characters';).


signup.php


    if(!empty(trim($password))){
    	if(strlen($password) >= 8 && strlen($password) <= 40){
            $trim_password = trim($password);
        }else{
            $password_error = 'Password must be at least 8 characters and less than or equal to 40 characters';
        }
    }else{
        $password_error = 'Password cannot be blank';
    }


Email validation

Now after password, we'll check for email, whether email is empty or not, if it is empty then error shows Email cannot be blank ($email_error = 'Email cannot be blank';). 

If it is not empty, then we'll check that email character less than or equal to 200 characters or not. if it is more than 200 characters then error message shows Email is too big. It should be less than or equal to 200 character ($email_error = 'Email is too big. It should be less than or equal to 200 character';).  

Then we'll checks that email is valid or not and if it is invalid then error message shows ($email_error = 'Email is invalid';).

Then checks for whether email is already in the database table or not. If it is already in the database error message show ($email_error = 'Email already exists';);


signup.php


    if(!empty(trim($email))){
    	if(strlen($email) <= 200){

        if(filter_var($email , FILTER_VALIDATE_EMAIL)){
            
            $select = 'SELECT email FROM signuptable WHERE email = ?';
            $stmt = mysqli_prepare($con , $select);
            if($stmt){
                mysqli_stmt_bind_param($stmt , 's' , $param_email);
                $param_email = trim($email);
                if(mysqli_stmt_execute($stmt)){
                    mysqli_stmt_store_result($stmt);
                    if(mysqli_stmt_num_rows($stmt) == 1){
                        $email_error = 'Email already exists';
                    }else{
                        $trim_email = trim($email);
                    }
                }
            }
            mysqli_stmt_close($stmt);

        }else{
            $email_error = 'Please enter valid email';
        }
    }else{
        $email_error = 'Email is too big. It should be less than or equal to 200 character';
    }
    }else{
        $email_error = 'Email cannot be blank';
    }


Storing data to database

Now if all the error variables is empty ($username_error , $password_error , $email_error). Then we'll insert the values of input fields in database and here we stored password in hased form. And after succesfull data stored, we'll redirect user to login.php page .

I used prepared statement here, You too should use prepared statement for inserting data.

signup.php


    if(empty($email_error) && empty($username_error) && empty($password_error)){
    	$insert = "INSERT INTO signuptable (username , email , password) VALUES (?,?,?)";
        $stmt = mysqli_prepare($con , $insert);
        if($stmt){
            mysqli_stmt_bind_param($stmt , 'sss' , $param_username , $param_email , $param_password);
            $param_username = $trim_username;
            $param_email = $trim_email;
            $param_password = password_hash($trim_password , PASSWORD_DEFAULT);
            if(mysqli_stmt_execute($stmt)){
                header('location:login.php');
            }
        }
        mysqli_stmt_close($stmt);
    }


Here's the signup form is completed.

Let's create one account. So I have added username = maketeckstuff, password = 123456789 and email maketechstuff@gmail.com.


sending Registration Form data to mysql database


After click on create account button, data stored in the database successfully and you can see that, the password is stored in the hashed form.


mysql database


So that's how you can make signup form using PHP and MySQL database. This may not be the complete signup form, something may I missed to add in it.


Final code:



Here is the link of login and logout php, which let user to login and I have used the same database which we have created in this blog post to check for credentials. If its correct then only user can redirect to welcome.php . In welcome.php page theirs link to logout. By clicking on it user can logout and redirect to login.php.

If you have any question or suggestion feel free to write them in the comment section.


You may like :

  1. How to create sliiding login & signup form using HTML, CSS & JavaScript.
  2. Simple login & registration form.
  3. How to create a automatic pop up forms using HTML CSS and JavaScript.
  4. Login and registration form using PHP & MySQL.
  5. How to create simple pagination using PHP & MySQL.



Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top