PHP MySQL Registration form with validation

Registration is a common process when you want to create an account under your name. Whenever you visit famous websites like Facebook, Gmail, you must register and create a profile if you want to make use of their services. Today we will understand how the registration process works and how to build a registration form using MySQL database. This PHP MySQL Registration form is validated using javascript. If you want to learn how to build a login form in PHP using MySQL, please follow this link. The Complete Login and Registration Application using PHP can be found here.

Salient points about this Registration form:

Inputs are validated using Javascript.
The registration form is styled using an external style sheet.
Only PHP 7.0 supported methods are used. Most of the old methods are discontinued from PHP 7.0.
The password has been encrypted using password_hash() method while inserting it into MySQL DB.
It makes use of prepared statements while inserting the records into the database. Prepared statements are executed fast, very useful against SQL injections/attack, and also, minimize the bandwidth to the server.

Before we begin with the coding part, let me explain how to execute this PHP code.

Download and install wampserver (WAMP) software, if you are using windows OS. You can go for a LAMP if you are using Linux based OS. Once the installation is completed, start the WAMP server.

You must see a wamp server icon in green in your task bar by now. Click on the icon and go to MySQL -> MySQL console. Execute the following script to create a database, followed by which a table.

//CreateDBScript.sql
CREATE DATABASE PROFILE;   /* create a database */
USE PROFILE;    /* select the database */

//CreateTable.sql
/* script to create the table */
CREATE TABLE PROFILE(
SLNO INT NOT NULL AUTO_INCREMENT UNIQUE KEY,
FULLNAME VARCHAR(30) NOT NULL,
EMAIL VARCHAR(30) PRIMARY KEY,
USERNAME VARCHAR(30) NOT NULL UNIQUE KEY,
PASSWORD VARCHAR(255) NOT NULL
);

Next, copy all the files (RegisterForm.php, Style.css, Register.php, RegSuccess.php, DBConnection.php) into the WWW directory of the WAMP server. You are almost done now.
Next, once again go to the wampserver icon and click on the localhost. This will take you to your default browser where you will get to see all the files placed under WWW directory. Select RegisterForm.php file to see the registration form as shown in the below image.

Registration form

//RegisterForm.php

/* once you submit your data, the input values are passed on to the Register.php, where the data is inserted into the database.*/

<!DOCTYPE HTML>
<html>
<head>
<title>RegisterForm.php</title>
<!-- Using external stylesheet to make the registration form look attractive -->
<link rel = "stylesheet" type = "text/css" href="Style.css"/>
<!-- Javascript validation for user inputs -->
<script>
function validate()
{ 
var fullname = document.register.fullname.value;
var email = document.register.email.value;
var username = document.register.username.value; 
var password = document.register.password.value;
var conpassword= document.register.conpassword.value;
if (fullname==null || fullname=="")
{ 
alert("Full Name can't be blank"); 
return false; 
}
else if (email==null || email=="")
{ 
alert("Email can't be blank"); 
return false; 
}
else if (username==null || username=="")
{ 
alert("Username can't be blank"); 
return false; 
}
else if(password.length&amp;lt;6)
{ 
alert("Password must be at least 6 characters long."); 
return false; 
} 
else if (password!=conpassword)
{ 
alert("Confirm Password should match with the Password"); 
return false; 
} 
} 
</script> 
</head>
<body>
 
<!-- Make a note that the method type used is post, action page is register.php and validate() function will get called on submit -->
 <div style="text-align:center"><h1>PHP Registration application using MySQL</h1></div>
 <br>
<form name="register" method="post" action="Register.php" onsubmit="return validate();" >
 <!-- Not advised to use table within the form to enter user details -->
<table align="center" >
<tr>
<td>Full Name</td>
<td><input type="text" name="fullname" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" name="conpassword" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register"></input><input
type="reset" value="Reset"></input></td>
</tr>
</table>
</form>
</body>
</html>

/* Style.css -- Using extenal style sheet to design the web page */
table{
border: 1px solid black;
border-spacing: 2px;
}

th, td {
border: 1px solid black;
}

input[type=text], input[type=password] {
background-color: #EEEEEE;
border: none;
color: black;
width:auto;
padding: 8px 52px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

Register.php

//Register.php

<!DOCTYPE HTML>
<html>
<body>
<?php
 
include("DBConnection.php"); // include the connection object from the DBConnection.php
 
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{ 
	 $inFullname = $_POST["fullname"]; // as the method type in the form is "post" we are using $_POST otherwise it would be $_GET[]
	 $inEmail = $_POST["email"];
	 $inUsername = $_POST["username"];
	 $inPassword = $_POST["password"];

	$encryptPassword = password_hash($inPassword, PASSWORD_DEFAULT);
	 
	 $stmt = $db->prepare("INSERT INTO PROFILE(FULLNAME, EMAIL, USERNAME, PASSWORD) VALUES(?, ?, ?, ?)"); //Fetching all the records with input credentials
	 $stmt->bind_param("ssss", $inFullname, $inEmail, $inUsername, $encryptPassword); //Where s indicates string type. You can use i-integer, d-double
	 $stmt->execute();
	 $result = $stmt->affected_rows;
	 $stmt -> close();
	 $db -> close(); 
	
	if($result > 0)
	 {
		header("location: RegSuccess.php"); // user will be taken to the success page
	 }
	 else
	 {
		 echo "Oops. Something went wrong. Please try again"; 
		 ?>
		 <a href="RegisterForm.php">Try Login</a>
		 <?php 
	 }
}
?>
</body> 
</html>

DBConnection.php

//DBConnection.php

<?php
 //Establishing connection with the database
 define('DB_SERVER', 'localhost:3306');
 define('DB_USERNAME', 'root');
 define('DB_PASSWORD', 'root123');
 define('DB_DATABASE', 'profile'); //where customers is the database
 $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

//RegSuccess.php
<!DOCTYPE HTML>
<html>
<title>Success.php</title>
<body>

<div style="text-align:left"><h1>Registration Successful </h1></div>
<br/>

<div style="text-align: left"><a href="https://krazytech.com/programs/php-login-page-using-mysql">Please log-in to continue</a></div>

</body>
</html>

If the records are inserted into the profile table successfully, you will be taken to the success page.

You can now, query the profile table to check for the inserted records. The following image shows the record inserted for the user John and you can take a look at the password column to notice that it is present in the encrypted format.

Record inserted successfully

Hope you enjoyed this. Let me know your views on this or doubts if you across any. Once you are done with the registration, I recommend you to follow how to build a login form in PHP.

PHP MySQL Registration form with validation

Salient points about this Registration form:

30 thoughts on “PHP MySQL Registration form with validation”

Did it help? Would you like to express?Cancel reply