PHP registration


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


Or you can direct download sql DATABASE



/* 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());



// 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
    // Validate 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
                /* store result */
                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
    // Validate 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
        $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
                // Redirect to login page
                header("location: login.php");
            } else{
                echo "Something went wrong. Please try again later.";
        // Close statement
    // Close connection
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src=""></script>
<!-----start nav bar---->
<div class="topNav">
<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>

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

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

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

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



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; }
  { 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: ''; 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, .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 to your friends and colleagues.