A registration form is what your website's visitors can use to register
their details, which will subsequently be stored in a MySQL database.
1. Getting Started
There are a few steps we need to take before we create our secure
registration system. We need to set-up our web server environment and
make sure we have the required extensions enabled (skip if you followed the secure login system tutorial).
1.1. Requirements
- If you haven't got a local web server set-up, you will need to download and install XAMPP. XAMPP is a server-side web development environment that includes the essentials for back-end web developers.
1.2. What You Will Learn in this Tutorial
- Form Design — Design a registration form with HTML5 and CSS3.
- Prepared SQL Queries — How to prepare SQL queries to prevent SQL injection and insert new records into a MySQL database.
- Basic Validation — Validating form data that is sent to the server (username, password, and email).
1.3. File Structure & Setup
We now need to start our web server and create the files and directories that we're going to use for our registration system.
- Open XAMPP Control Panel
- Next to the Apache module click Start
- Next to the MySQL module click Start
- Navigate to XAMPPs installation folder (C:\xampp)
- Open the htdocs folder
- Create the following folders and files:
File Structure
\-- phplogin
|-- register.html
|-- style.css
|-- register.php
|-- activate.php (optional)
Each file will contain the following:
- register.html — Registration form created with HTML5 and CSS3. As this file doesn't require us to use PHP, we'll save it as plain HTML.
- style.css — The stylesheet (CSS3) for our secure registration form.
- register.php — Validate form data and insert a new account into the MySQL database.
- activate.php — Activate the user's account with a unique code (email based activation).
The registration form will be used by our websites visitors. They can
use it to input their account information. We'll be creating the
registration form with HTML and CSS.
Edit the register.html file and add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Register</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="register">
<h1>Register</h1>
<form action="register.php" method="post" autocomplete="off">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Password" id="password" required>
<label for="email">
<i class="fas fa-envelope"></i>
</label>
<input type="email" name="email" placeholder="Email" id="email" required>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
Navigate to http://localhost/phplogin/register.html, our registration form will look like the following:
Pretty basic for a registration form, now let's add some CSS, edit the style.css file and add the following:
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
margin: 0;
}
.register {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.register h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.register form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.register form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.register form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.register form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
We need to include our stylesheet in our register.html file, copy and paste the following code to the head section:
<link href="style.css" rel="stylesheet" type="text/css">
And now our registration form will look more appealing:
Let's narrow down the form so we can get a better understanding on what's going on.
-
Form — we need to use both the action and post attributes, the action
attribute will be set to the registration file. When the form is
submitted, the form data will be sent to the registration file for
processing. The method is to post, this will allow us to process the form data.
- Input (text/password/email) — We need to name our form fields so the server can recognize them, so if we set the value of the attribute name to the username, we can use the post variable in our registration file to get the data, like this: $_POST['username'].
- Input (submit) — On click the form data will be sent to our registration file.
That's basically all we need to do on the client-side, next step is
to set-up the database and create the registration file with PHP.
3. Creating the Database and setting-up Tables
You can skip this step if you followed the Secure Login System Tutorial.
For this part, you will need to access your MySQL database, either using phpMyAdmin or your preferred MySQL database management application.
If you're using phpMyAdmin then follow these instructions:
- Navigate to: http://localhost/phpmyadmin/
- Click the Databases tab at the top
- Under Create database, type in phplogin in the text box
- Select utf8_general_ci as the collation
- Click Create
You can use your own database name, but for this tutorial, we'll use phplogin.
What we need now is an accounts table that will store all our accounts (usernames, passwords, emails, etc).
Click the database on the left side panel (phplogin) and execute the following SQL statement:
CREATE TABLE IF NOT EXISTS `accounts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
On phpMyAdmin this should look like:
The above SQL statement code will create the accounts table with the columns id, username, password, and email.
4. Registering Users with PHP & MySQL
Now we need to create the registration file that will process the
form fields, check for basic validation, and insert the new account into
our database.
The registration page will require a connection to our database and
therefore we must include the necessary variables and MySQL functions.
Edit the register.php file and add the following code:
<?php
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
Don't forget to update the MySQL variables if your MySQL credentials do not reflect the declared values.
Next, we can add basic validation to ensure the user has entered their details and check for empty variables.
if (!isset($_POST['username'], $_POST['password'], $_POST['email'])) {
exit('Please complete the registration form!');
}
if (empty($_POST['username']) || empty($_POST['password']) || empty($_POST['email'])) {
exit('Please complete the registration form');
}
Now we need to check if the account already exists in the database.
We can check this by selecting a record from our accounts table with the
same username that the user has provided.
Add after:
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows > 0) {
echo 'Username exists, please choose another!';
} else {
}
$stmt->close();
} else {
echo 'Could not prepare statement!';
}
$con->close();
?>
Replace:
With:
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$stmt->bind_param('sss', $_POST['username'], $password, $_POST['email']);
$stmt->execute();
echo 'You have successfully registered, you can now login!';
} else {
echo 'Could not prepare statement!';
}
This will insert a new account into our accounts table.
As you can see in the code above we use the password_hash
function, this will encrypt the user's password using the one-way
algorithm — this will prevent your users passwords from being exposed if
for somehow your database becomes vulnerable.
That's basically all we need to do to register accounts on our website.
We already have basic validation in our PHP script but what if we
want to check if the email is actually an email or if the username and
password should be a certain amount of characters long, you can do that
with the codes below, add them in the register.php file before the following line:
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
Email Validation
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
exit('Email is not valid!');
}
Invalid Characters Validation
if (preg_match('/^[a-zA-Z0-9]+$/', $_POST['username']) == 0) {
exit('Username is not valid!');
}
Character Length Check
if (strlen($_POST['password']) > 20 || strlen($_POST['password']) < 5) {
exit('Password must be between 5 and 20 characters long!');
}
You should always implement your own validation, these are just basic examples.
6. Implementing Account Activation
The account activation system will send an email to the user with the activation link when the user has registered.
The first thing we need to do is to go into phpMyAdmin and select our database, in our case this would be phplogin, you can either add the column activation_code to the accounts table or execute the SQL statement below.
ALTER TABLE accounts ADD activation_code varchar(50) DEFAULT ''
Now we need to edit our register.php file, search for this line of code:
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {
Replace with:
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email, activation_code) VALUES (?, ?, ?, ?)')) {
Search for:
$stmt->bind_param('sss', $_POST['username'], $password, $_POST['email']);
Replace with:
$uniqid = uniqid();
$stmt->bind_param('ssss', $_POST['username'], $password, $_POST['email'], $uniqid);
The $uniqud variable will generate a unique ID that we'll use for our activation code, this will be sent to the user's email address.
Search for:
echo 'You have successfully registered, you can now login!';
Replace with:
$from = 'noreply@yourdomain.com';
$subject = 'Account Activation Required';
$headers = 'From: ' . $from . "\r\n" . 'Reply-To: ' . $from . "\r\n" . 'X-Mailer: PHP/' . phpversion() . "\r\n" . 'MIME-Version: 1.0' . "\r\n" . 'Content-Type: text/html; charset=UTF-8' . "\r\n";
$activate_link = 'http://yourdomain.com/phplogin/activate.php?email=' . $_POST['email'] . '&code=' . $uniqid;
$message = '<p>Please click the following link to activate your account: <a href="' . $activate_link . '">' . $activate_link . '</a></p>';
mail($_POST['email'], $subject, $message, $headers);
echo 'Please check your email to activate your account!';
Upon account registration, the user will need to activate their
account using the activation link that is sent to their email address.
You need to update both the $from and $activate_link variables.
Now we can proceed to create the activation file. The activation file
will process the GET parameters and verify the email and code. The
user's account will be activated if the code is valid.
Edit/create the activate.php file and add the following code:
<?php
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
if (isset($_GET['email'], $_GET['code'])) {
if ($stmt = $con->prepare('SELECT * FROM accounts WHERE email = ? AND activation_code = ?')) {
$stmt->bind_param('ss', $_GET['email'], $_GET['code']);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows > 0) {
if ($stmt = $con->prepare('UPDATE accounts SET activation_code = ? WHERE email = ? AND activation_code = ?')) {
$newcode = 'activated';
$stmt->bind_param('sss', $newcode, $_GET['email'], $_GET['code']);
$stmt->execute();
echo 'Your account is now activated! You can now <a href="index.html">login</a>!';
}
} else {
echo 'The account is already activated or doesn\'t exist!';
}
}
}
?>
If the code reflects the one in the database that is associated with the user's account then the value of the activation_code column will be updated to activated.
If we want to check if the user has activated their account, we can
add the following code to the pages we want to restrict non-activated
users:
if ($account['activation_code'] == 'activated') {
} else {
}
For the above code to work, you will need to connect to your MySQL database and select the user's account.
Also, take note PHP mail function will only work if your computer or
server supports it. If it doesn't send an email, check your
configuration or install a mail server such as Postfix.
Conclusion
Congratulations! You've successfully created a registration system with
PHP and MySQL. You're free to use the code in this tutorial and adapt it
for your own projects.
Remember that this is just a secure base that you should work from.
Consider changing or implementing your own validation, and implement
your own features.
If you would like more of this tutorial series, feel free to drop a comment and suggest to us what we could create next.
Enjoy coding!
