User Registration Form in PHP and MYSQL

Hello readers, Today in this blog you’ll learn how to create a user registration form using PHP. Earlier, you learned to create a custom neon light preloader using HTML, CSS & Javascript.

Today I will mainly focus on the backend part. We are going to use MYSQL Database and PHP language. Nowadays, most websites create their users for various purposes. And as a web developer, you have to know how to create a user registration form and manage the user. However, we are going to learn about user registration today but later I will post an article on the complete user handling process along with the code.

At first, we will create a form and make it looks better using CSS. Then, we will create an MYSQL database. After that, we will use PHP for creating connections between the form and the database, collecting users' data, and storing it in our database.

At first, I created a form with pink background and on the left side, I used an image. That’s all in the frontend part. Remember the form is completely responsive. Now let’s move to the backend part. After the visitors fill up the form and click the submit button the PHP code will start its work.

At first, it will store the form input value in separate variables then, it will check whether the users had written the same password in both password fields or not. If users had written a different password the alert will pop up showing an error message and if the password is the same then the SQL query will be executed and the data will be stored in a database. If the data is stored successfully, you will get a success message and if the data was not stored it will show an error message. That’s all you have to do.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Create User Registration Form using PHP).

Video Tutorial of User Registration Form Using PHP

All this form design is based on HTML & CSS and the backend is based on PHP. If you’re a beginner you can also create this type of user registration form. If you like this program (Create User Registration Form using PHP) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

User Registration Form using PHP [Source Codes]

To create this program (Create User Registration Form using PHP). First, you need to create two Files one PHP File and another one is CSS File. After creating these files just paste the following code into your file. First, create a database with the name of blogs and paste the below SQL Code into your database. The given code is for creating a table.

SQL

  
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

-- Database: `blogs`

-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `name` varchar(200) NOT NULL,
  `email` varchar(200) NOT NULL,
  `password` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Second, create a PHP file with the name index.php and paste the given codes into your PHP file. Remember, you’ve to create a file with a .php extension.

PHP

  <!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>User Registration</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="form-area">
            <div class="image">
                <img src="signup.png" alt="">
            </div>
            <div class="form">
                <h2>Create User</h2>
                <form action="" method="POST">
                    <input type="text" name="name" placeholder="Full Name" required autocomplete="off">
                    <input type="email" name="email" placeholder="Email" required autocomplete="off">
                    <input type="password" name="pass" placeholder="Password" required>
                    <input type="password" name="c_pass" placeholder="Confirm Password" required>
                    <button type="submit" name="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        if(window.history.replaceState){
            window.history.replaceState(null, null, window.location.href);
        }
    </script>
</body>
</html>

<!-- code for backend starts here  -->
<?php
//   creating database connection 
$server = 'localhost';
$username = 'root';
$password = '';
$db_name = 'blogs';

$conn = mysqli_connect($server, $username, $password, $db_name);

if(isset($_POST['submit'])){ // if Submit button is clicked
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['pass'];
    $c_password = $_POST['c_pass'];

    // checking if password and confirm password are matched or not 
    if($password!=$c_password){ //if passwords do not match
        ?>
        <script>
            alert("Passwords Do not Match!");
        </script>
        <?php
    }else{  //if passwords match
        $sql = "INSERT INTO users(`name`, `email`, `password`)VALUES('$name', '$email', '$password')";
        $insert = mysqli_query($conn,$sql);
    }
    if($insert){ // if data is inserted
        ?>
        <script>
            alert("User Created Successfully");
        </script>
        <?php
    }else{  //if data is not inserted
        ?>
        <script>
            alert("Failed to Create User!");
        </script>
        <?php
    }
}
?>

Note:- You can create a separate file for the backend PHP code. If you do that write the file location in the action field inside the <form> tag.

At last, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
}
.container .form-area{
    width: 60%;
    display: flex;
    border: 1px solid #999;
    border-radius: 5px;
}
.container .form-area .image{
    width: 50%;
    padding: 30px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.container .form-area .image img{
    height: 250px;
    width: 300px;
}
.container .form-area .form{
    width: 50%;
    padding: 30px 0px;
    padding-left: 10px;
    background-color: #fc0f6a;
}
.container .form-area .form h2{
    font-family: Verdana,sans-serif;
}
.container .form-area .form form{
    margin-top: 20px;display: flex;
    flex-direction: column;
}
.container .form-area .form form input{
    margin-bottom: 10px;
    padding: 10px;
    border: none;
    width: 80%;
    outline: none;
    border-radius: 5px;
}
.container .form-area .form form input:hover::placeholder{
    padding-left: 10px;
    transition: .3s all ease-in-out;
}
.container .form-area .form form button{
    padding: 7px 0px;
    width: 80px;
    border: none;
    border-radius: 5px;
    background-color: #eee;
    color: #181818;
    font-size: 16px;
    transition: .2s all ease-in-out;
    cursor: pointer;
}
.container .form-area .form form button:hover{
    background-color: #bbb;
}
@media (max-width:900px) and (min-width:600px){
    .container .form-area{
        width: 90%;
    }
    .container .form-area .image img{
        height: 200px;
    }
}
@media (max-width:600px){
    .container .form-area{
        width: 95%;
    }
    .container .form-area .image{
        display: none;
    }
    .container .form-area .form{
        width: 100%;
    }
    .container .form-area .form form input{
        width: 95%;
    }
}

Let me tell you one thing if you write the backend code for storing form data on the same page where the form is located then, you will face the problem of form resubmission. Every time you refresh the page the last time inserted data will be resubmitted. So to get rid of this problem I have a solution. You have to Just copy the below Javascript code and paste it just before the </body> tag.

Code to Prevent Form Resubmission on Page Refresh

      <script>
        if(window.history.replaceState){
            window.history.replaceState(null, null, window.location.href);
        }
    </script>

That’s all, now you’ve successfully created a user registration form using HTML, CSS, Javascript, and PHP. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

You Might Also Like

Video Tutorial of User Registration Form Using PHP

User Registration Form using PHP [Source Codes]

SQL

PHP

CSS

Code to Prevent Form Resubmission on Page Refresh

Post a Comment

Post a Comment

About Us

Contact Form