PHP registration

php

I'm going through the entire process of building a user registration system in this tutorial where users can create an account


The first thing we need to do is configure our database.

DATABASE Name : register

TABLE Name : users

Create php MySql DATABASE

database

Or you can direct download sql DATABASE

STEP 1:

config.php

<?php
/* Database server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'register');
 
/* connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
 
// Check connection
/* or die ("unable to connect" ) */
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

STEP 2:

register.php

<?php
// Include config file
include_once "config.php";
 
// Define variables and initialize with empty values
$username = $password = $confirm_password = "";
$username_err = $password_err = $confirm_password_err = "";
 
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
 
    // Validate username
    if(empty(trim($_POST["username"]))){
        $username_err = "Please enter a username.";
    } else{
        // Prepare a select statement
        $sql = "SELECT id FROM users WHERE username = ?";
        
        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "s", $param_username);
            
            // Set parameters
            $param_username = trim($_POST["username"]);
            
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                /* store result */
                mysqli_stmt_store_result($stmt);
                
                if(mysqli_stmt_num_rows($stmt) == 1){
                    $username_err = "This username is already taken.";
                } else{
                    $username = trim($_POST["username"]);
                }
            } else{
                echo "Oops! Something went wrong. Please try again later.";
            }
        }
         
        // Close statement
        mysqli_stmt_close($stmt);
    }
    
    // Validate password
    if(empty(trim($_POST["password"]))){
        $password_err = "Please enter a password.";     
    } elseif(strlen(trim($_POST["password"])) < 6){
        $password_err = "Password must have atleast 6 characters.";
    } else{
        //store password
        $password = trim($_POST["password"]);
    }
    
    // Validate confirm password
    if(empty(trim($_POST["confirm_password"]))){
        $confirm_password_err = "Please enter a confirm password.";     
    } else{
        $confirm_password = trim($_POST["confirm_password"]);
        if(empty($password_err) && ($password != $confirm_password)){
            $confirm_password_err = "Password did not match.";
        }
    }
    
    // Check input errors before inserting in database
    if(empty($username_err) && empty($password_err) && empty($confirm_password_err)){
        
        // Prepare an insert statement
        $sql = "INSERT INTO users (username, password) VALUES (?, ?)";
         
        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "ss", $param_username, $param_password);
            
            // Set parameters
            $param_username = $username;
            $param_password = password_hash($password, PASSWORD_DEFAULT); // Creates a password hash
            
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                // Redirect to login page
                header("location: login.php");
            } else{
                echo "Something went wrong. Please try again later.";
            }
        }
         
        // Close statement
        mysqli_stmt_close($stmt);
    }
    
    // Close connection
    mysqli_close($link);
}
?>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>  
<!-------------------->
<!-----start nav bar---->
<!-------------------->
<div class="topNav">
<h3>DCO</h3>
</div>
<div class="topnav" id="myTopnav">
  <a href="#home"class="active"><i class="fa fa-home"> Home</i></a>
  <a href="javascript.html"><i class="fa fa-coffee"> Java Script</i></a>
  <a href="#news"><i class="fa fa-html5"> Html & css</i></a>
  <a href="#news"><i class="fa fa-product-hunt"> php</i></a>
  <a href="#"><i class="fa fa-video-camera" aria-hidden="true"> Videos</i></a>  
  <a href="#"><i class="fa fa-user"> About</i></a>
  <a href="#"><i class="fa fa-user-plus"> sign up</i></a>  
  <a href="#"><i class="fa fa-sign-in"> Login</i></a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

    <div class="wrapper">
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
        <h2>Sign</h2>
        <p>Please fill this form to create an account.</p>
           
            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                <label>Username</label>
                <input type="text" name="username" class="form-control" value="<?php echo $username; ?>" placeholder="username">
                <span class="help-block"><?php echo $username_err; ?></span>
            </div>    

            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <label>Password</label>
                <input type="password" name="password" class="form-control" value="<?php echo $password; ?>" placeholder="password">
                <span class="help-block"><?php echo $password_err; ?></span>
            </div>
            
            <div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
                <label>Confirm Password</label>
                <input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>" placeholder="confirm password">
                <span class="help-block"><?php echo $confirm_password_err; ?></span>
            </div>
            
            <div class="form-group">
                <input type="reset" class="btn btn-default" value="Reset">
                <input type="submit" class="btn btn-primary" value="Submit">
            </div>
            
            <p>Already have an account? <a href="login.php">Login here</a>.</p>
        </form>
    </div>    
</body>
</html>

The Code comments clarify it pretty much, but I'm going to highlight a few items here.


STEP 3:

layout.css

Design your registration page using my code or you can customize it according to your need

body{ background-color:#1a1a1a; font-family:"Roboto" sans-serif; font-size:14px; font-weight:300; box-sizing: border-box; overflow:hidden;}
/****body scroll bar css****/
body:-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,3); border-radius: 10px; 
  background-color: #232323; }
body::-webkit-scrollbar{ width:10px; background-color:#232323; }
body::-webkit-scrollbar-thumb
  { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 1, 1, 0.336); background-color:#232323; }

/*****nav bar css*******/
.topNav h3{ font-size: 3em; font-weight: bold; margin:0px 0px; letter-spacing:2px;color:#fff; background-color: #1a1a1a;}
.topNav h3::after{content: 'DECK.in'; color:#ff8c00;}

.topnav { overflow: hidden; background:#1a1a1a; min-height:10vh; width: 100%; }
.topnav a {color: white; font-size:22px; padding: 15px 15px; display:block; float:left;
text-transform: uppercase; text-decoration:none; font-family: sans-serif;}

.topnav a:hover {color:#F7971E; text-decoration:none;}
.topnav a.active, .left-nav .active { background-color: #F7971E; color: white; }
.topnav .icon {display: none;}

.wrapper{ color:white; width:100%; height:100vh; margin:-20px 0%; background-color:#1a1a1a; }

form{ color:white;}
h2{text-align:center; font-size:3em; font-weight:bold; text-transform:uppercase; letter-spacing:2px; margin:5%;}
h2::after{ content:'UP'; color:#F7971E;}
p,label{color:white; } 
p{text-align:center; font-size:1.8em; margin:0% }
form{ padding:5% 100px;  }


@media screen and (max-width: 768px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon { float: right; display: block; color:#fff; padding-right:15px; }
}

@media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon { position: absolute; right: 0; top: 0; }
.topnav.responsive a { float: none; display: block; text-align: left; }
}

Now go on, customize it to suit your needs and build an awesome site.
You can always support by sharing on social media or recommending my site Dcodeck.in to your friends and colleagues.