Signup form using PHP and MySQL Database - GeeksforGeeks

09 Sep, 2020
The task is to create and design a sign-up form in which if the user enters details, the HTML form data are inserted into our MySQL server database.
Approach:
First task is that we have to create our MySQL server Database and a Table according to our requirements.
We connect our MySQL server Database using PHP mysqli_connect() function which takes four arguments, i.e. our “servername”, “username”, “password” and “database”.
Note: No CSS code is used here as we are using Bootstrap in the following PHP code. You can apply CSS and style in your web page as per your own application requirement.
PHP code to create Database connection: First and the most basic step is to create a Database connection. The PHP file name used here is “dbconnect.php” and the database name used is “geeksforgeeks”.
<?php       $servername = "localhost";     $username = "root";     $password = "";       $database = "geeksforgeeks";        // Create a connection      $conn = mysqli_connect($servername,          $username, $password, $database);       // Code written below is a step taken    // to check that our Database is     // connected properly or not. If our     // Database is properly connected we    // can remove this part from the code     // or we can simply make it a comment     // for future reference.       if($conn) {        echo "success";     }     else {        die("Error". mysqli_connect_error());     } ?>
“users” table is created using MySQL phpMyAdmin tool as shown below.
PHP code to design sign-up form: Now when we have successfully connected to our Database, it is time to create the Signup form for the users. The following PHP code demonstrates the sign-up form. The MySql database table name used is “users”.
<?php    $showAlert = false; $showError = false; $exists=false;    if($_SERVER["REQUEST_METHOD"] == "POST") {          // Include file which makes the    // Database Connection.    include 'dbconnect.php';           $username = $_POST["username"];     $password = $_POST["password"];     $cpassword = $_POST["cpassword"];                    $sql = "Select * from users where username='$username'";        $result = mysqli_query($conn, $sql);        $num = mysqli_num_rows($result);         // This sql query is use to check if    // the username is already present     // or not in our Database    if($num == 0) {        if(($password == $cpassword) && $exists==false) {                $hash = password_hash($password,                                 PASSWORD_DEFAULT);                            // Password Hashing is used here.             $sql = "INSERT INTO `users` ( `username`,                 `password`, `date`) VALUES ('$username',                 '$hash', current_timestamp())";                $result = mysqli_query($conn, $sql);                if ($result) {                $showAlert = true;             }        }         else {             $showError = "Passwords do not match";         }          }// end if        if($num>0)    {      $exists="Username not available";    }     }//end if       ?>    <!doctype html>    <html lang="en">  <head>        <!-- Required meta tags -->     <meta charset="utf-8">     <meta name="viewport" content=        "width=device-width, initial-scale=1,         shrink-to-fit=no">        <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">  </head>    <body>    <?php        if($showAlert) {            echo ' <div class="alert alert-success             alert-dismissible fade show" role="alert">                <strong>Success!</strong> Your account is             now created and you can login.             <button type="button" class="close"                data-dismiss="alert" aria-label="Close">                 <span aria-hidden="true">×</span>             </button>         </div> ';     }        if($showError) {            echo ' <div class="alert alert-danger             alert-dismissible fade show" role="alert">         <strong>Error!</strong> '. $showError.'           <button type="button" class="close"             data-dismiss="alert aria-label="Close">            <span aria-hidden="true">×</span>        </button>      </div> ';    }            if($exists) {        echo ' <div class="alert alert-danger             alert-dismissible fade show" role="alert">            <strong>Error!</strong> '. $exists.'        <button type="button" class="close"             data-dismiss="alert" aria-label="Close">             <span aria-hidden="true">×</span>         </button>       </div> ';      }   ?>    <div class="container my-4 ">        <h1 class="text-center">Signup Here</h1>     <form action="signup.php" method="post">            <div class="form-group">             <label for="username">Username</label>         <input type="text" class="form-control" id="username"            name="username" aria-describedby="emailHelp">            </div>            <div class="form-group">             <label for="password">Password</label>             <input type="password" class="form-control"            id="password" name="password">         </div>            <div class="form-group">             <label for="cpassword">Confirm Password</label>             <input type="password" class="form-control"                id="cpassword" name="cpassword">                <small id="emailHelp" class="form-text text-muted">            Make sure to type the same password            </small>         </div>                  <button type="submit" class="btn btn-primary">        SignUp        </button>     </form> </div>    <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"    crossorigin="anonymous"></script>    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"     crossorigin="anonymous"></script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"     integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"    crossorigin="anonymous"></script> </body> </html>
Output:
Sign-up form:
After successful user login:
After invalid user login:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
PHP-Misc
HTML
PHP
PHP Programs
Web Technologies
Web technologies Questions
HTML
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
How to execute PHP code using command line ?
How to Insert Form Data into Database using PHP ?
How to convert array to string in PHP ?
PHP in_array() Function
How to pop an alert message box using PHP ?