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 “neveropen”.
<?php $servername = "localhost"; $username = "root"; $password = ""; $database = "neveropen"; // 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= 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:
