How To Make Simple Sign Up Form with Validation PHP/MySQLi

What Will I Learn?

You will learn How to create database
You will learn How to create a table in the database
You will learn How to make connection to database with php file
You will learn How to create a simple Sign Up form

Requirements

You have basic about HTML
You have basic about PHP
You have basic about MySQL
To practice this tutorial you must have a webserver, text editor and browser. In this tutorial I use (XAMPP) for webserver, (Notepad ++) for text editor and (Google Crome) for browser.

Difficulty

Either choose between the following options:

Intermediate

Tutorial Contents

This tutorial will show you how to create a simple sign up form with validation using PHP/MySQLi. This tutorial does not include a good design but will give you an idea on how to create a simple Sign Up form using PHP/MySQLi.

How to create database ?
First, we're going to create a database that will store our data.

Open phpMyAdmin.
Click databases, create a database and name it as sign_up.
Click Button Create

Example, See image below for detailed instruction;
How to create a table in the database?
Secondly, after creating a database,
4.Click the SQL.
5.Paste the below code.
6.Click Button Go
Example, See image below for detailed instruction;
Insert Query

CREATE TABLE `user` (
  `userid` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(30) NOT NULL,
  `password` VARCHAR(30) NOT NULL,
  `email_add` VARCHAR(100) NOT NULL,
  `fullname` VARCHAR(100) NOT NULL,
   PRIMARY KEY (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

How to make connection to database with php file?
After create a table in the database, Next, we create a database connection and save it as "conn.php". This file will serve as our bridge between our form and our database.
Script file (conn.php)

<?php
$con = mysqli_connect("localhost","root","","sign_up");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
?>

Lastly, How to create a simple Sign Up form ?
Finaly, we create our sign up form with the save script and save it as "index.php". In this form, the inputted data will be saved upon user submission if there are no errors in the input. To create the form, open your HTML code editor and paste the code below after the tag.
Script file (index.php)

<!DOCTYPE HTML>  
<html>
<head>
<title>Register and Login Form with Validation PHP, MySQLi</title>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>  
<?php
// define variables and set to empty values
$Message = $ErrorUname = $ErrorPass = $ErrorEmail = $ErrorName = "";
$username = $password = $email = $fullname = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["username"])) {
    $ErrorUname = "Userame is required";
  } else {
    $username = check_input($_POST["username"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z0-9_]*$/",$username)) {
      $ErrorUname = "Space and special characters not allowed but you can use underscore(_)."; 
    }
    else{
        $fusername=$username;
    }
  }
  if (empty($_POST["password"])) {
    $ErrorPass = "Password is required";
  } else {
    $fpassword = check_input($_POST["password"]);
  }
  if (empty($_POST["email"])) {
    $ErrorEmail = "Email is required";
  } else {
    $email = check_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $ErrorEmail = "Invalid email format"; 
    }
    else{
        $femail=$email;
    }
  }
 if (empty($_POST["fullname"])) {
    $ErrorName = "Full name is required";
  } else {
    $fullname = check_input($_POST["fullname"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$fullname)) {
      $ErrorName = "Only letters and white space allowed"; 
    }
    else{
        $ffullname=$fullname;
    }
  }
  if ($ErrorUname!="" OR $ErrorPass!="" OR $ErrorEmail!="" OR $ErrorName!=""){
    $Message = "Registration failed! Errors found";
  }
  else{
  include('conn.php');
  mysqli_query($conn,"insert into `user` (username,password,email_add,fullname) values ('$fusername','$fpassword','$femail','$ffullname')");
  $Message = "Registration Successful!";
  }
}
function check_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>
<h2>Sign Up Form</h2>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  Username: <input type="text" name="username">
  <span class="error">* <?php echo $ErrorUname;?></span>
  <br><br>
  Password: <input type="password" name="password">
  <span class="error">* <?php echo $ErrorPass;?></span>
  <br><br>
  Email: <input type="text" name="email">
  <span class="error">* <?php echo $ErrorEmail;?></span>
  <br><br>
  Name: <input type="text" name="fullname">
  <span class="error">* <?php echo $ErrorName;?></span>
  <br><br>
  <input type="submit" name="submit" value="Submit">
  <br><br>
  <span class="error"><?php echo $Message;?></span>
</form>
</body>
</html>