Introduction
As software development keeps on improving, the need for a captcha is essential. What a captcha does is that it prevents a robot from trying to submit a form on your site.
Our last tutorial discussed, how to generate your watermark Image using PHP GD Library. This is going to be the last tutorial on PHP GD Library from Emmykolic. Note, there are quite a numerous things you can do with PHP GD.
But so far we have looked at three things we can use the GD library. If this is the first tutorial on the GD library you’re reading I’ll advise you to look at our Blog, there you will find all the examples we used the GD library in PHP to create.
Now we'll talk about how to build a captcha with PHP GD Library, want to view the source code of this work Kindly visit my Github_Repository. Here, you will see everything concerning the captcha using the GD library. After working with the Repository Please do well to Follow me on GitHub Thanks.
Without wasting much of your time let's jump into this tutorial.
Prerequisite
- A code Editor(Vs Code or Sublime text)
- Please make sure that GD(Graphics Draw) library is installed on your host. Most web hosts already have it. But if you don’t then you can install it, follow the instructions.
What you should know about Captcha
Here, we'll cover how to make a captcha using the GD library. We'll also look at PHP server-side captcha validation. Finally, we'll learn how to incorporate Captcha into a contact form.
On the Internet, scammers and hackers exist, and they create hazardous applications to gain access to your application. You might have a lot of trouble because of XSS attacks, SQL injection, and mass spam mailings.
Spam can increase server load and cause your online application to go down, which makes it unavailable. Customers or site users are immediately impacted. It affects your internet business as a result.
One of the greatest remedies for this affliction is a captcha. It guards against unauthorized access and spam bots. It stops bots from submitting pointless information through the PHP contact form.
A randomly generated code is used in the CAPTCHA. Run-time production takes place. It appears in a variety of shapes. Here are some examples of popular Captcha types:
Audio, Graphical (Image), and Text
The user must enter the random number that makes up the captcha code. Validation ensures that a genuine human entered the value; in essence, a bot has difficulty filling out the captcha code. In this manner, spam is avoided.
PHP Captcha With Registration Form Using GD Library
Now, we will work on one of the most straightforward PHP CAPTCHA Script implementation examples. I created this project to show you the fundamentals of using a captcha to prevent spam.
You may get an idea of the planning we'll do to use our free PHP captcha script to stop spam by looking at the project structure below.
A captcha field has been set up first, after filling the captcha field and submitting. We will take to a straightforward contact form where visitors may provide their name, gender, and email. You have to go through the captcha test before you can fill out the main registration form, the captcha test is mandatory. As soon as the user submits the registration form, it will show successful at the top, below is the Structure of the project we will be working on.
\--How_to_build_a_simple_captcha_with_PHP_GD
|-- css
|-- style.css
|--- fonts
|-- Monofont.ttf
|-- js
|--- captcha.php
|--- config.php
|-- footer.php
|--- form.php
|--- header.php
|-- index.php
|-- register_action.php
HTML Contact Form with Captcha
The contact form has a file called header.php so create a file call it header.php, the header.php file contains the HTML Doctype declaration and a set of link tags. The header page is a continuation of the index page I separated the full index page into three pieces the header, index, and footer. then I included them in the index page using the php include the statement below is the code snippet of header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="css/aos.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title><?='Captcha' ?></title>
</head>
<body>
Also, the contact form has a file called footer.php so create a file call it footer.php, the footer.php file contains the closing of the body and HTML tag, and some set of script tags. Below is the code snippet of footer.php
<script src="js/bootstrap.bundle.min.js" ></script>
<script src="Js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/script.js"></script>
</body>
</html>
The first page you will see when you open the project in your local host is the Index.php page, which is the captcha page that performs captcha validation before taking you to the registration page. Below is the code snippet for the index.php.
<?php include 'header.php'; ?>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 mt-4 shadow">
<form method="POST" class="bg-white p-5" action="form.php">
<h2>PROVE! YOU ARE NOT A ROBOT!!</h2><hr>
<strong class="alert alert-danger text-muted pt-2">
Type the text in the image to prove
you are not a robot
</strong>
<img style="display: block; margin: 10%;" src="captcha.php" alt="image verification" />
<input type="text" id="captchha" name="captcha" size="20" maxlength="6" class="form-control m-1">
<input type="submit" value="Submit" class="btn btn-success col-12 m-1">
<?php
/*if captcha code is posted*/
if(isset($_POST["captcha"]))
if($_SESSION["captcha"]==strtolower($_POST["captcha"])):/*CAPTCHA is valid. You can process the form now.*/?>
<p class="text-success"> CAPTCHA is valid. You can process the form now.</p>
<?php else: /*Invalid CAPTCHA*/ ?>
<p class="text-danger">Invalid <strong>CAPTCHA.</strong> Pls Try again!</p>
<?php endif; ?>
<div>
Can't read the image? Click
<a style="text-decoration: none" href='<?= $_SERVER['PHP_SELF']; ?>'>
<i class="fa fa-sync"></i>
</a>
to refresh!
</div>
</form>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
After writing the above code snippet, you will have to perform some styling, though I used Bootstrap v5 ****for the structure and the layout of the entire interface of the project. And we styled some tags and declared a variable in CSS. Below is the CSS Code Snippet for the styling.
:root {
--blue: #1e90ff;
--white: #ffffff;
--fbold: bold;
}
body { background-color: var(--blue); display:flex; flex-direction:column; align-items: center; justify-content: center; }
h2 { border-bottom: 2px solid var(--white);}
p{ font-weight: var(--fbold);}
Creating The Captcha Page
Now Create a new file and call it captcha.php, the captcha page will be linked to the index.php file created earlier. Every code we will be writing on the captcha page will be related to an image tag like the snippet you see below.
<img style="display: block; margin: 10%;" src="captcha.php" alt="image verification" />
In the image tag, we wrote an inline CSS that made our captcha to be positioned in the way it is. While the src='' we used it to link to the captcha.php page which means whatever is in the captcha page will be displayed as an image. The code below should be pasted in your Captcha.php file look at the code carefully you will notice how we got the captcha numbers.
We are generating random numbers using the md5() function, what this means is that we are getting different numbers with the function. Note, we can’t get the same set of numbers twice. Note that the MD5 algorithm is widely used because it is relatively fast and produces a relatively unique hash.
Just look at the code snippet carefully you will understand what we did there. Paste the code snippet below in the captcha.php file.
<?php
session_start();
/*Create a 220x35 image*/
$im = imagecreatetruecolor(220, 35);
/*Color code for orange*/
$orange = imagecolorallocate($im, 0xFF, 0x8c, 0x00);
/*Color code for white*/
$white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
/*Generate a random string using md5*/
$md5_hash = md5(rand(0,999));
/*Trim the string down to 6 characters*/
$captcha_code = substr($md5_hash, 15, 6);
//Store the value of the generated captcha code in session
$_SESSION['captcha'] = $captcha_code;
/* Set the background as orange */
imagefilledrectangle($im, 0, 0, 220, 35, $orange);
/*Path where TTF font file is present*/
$font_file = getcwd() . '/fonts/Pixelation.ttf';
/* Draw our randomly generated code*/
imagefttext($im, 30, 0, 5, 30, $white, $font_file, $captcha_code);
/* Output the image to the browser*/
header('Content-Type: image/png');
imagepng($im);
/*Destroy*/
imagedestroy($im);
?>
After running the above snippet the Interface below is what you will see on the index.php page on your browser.
Connect The Captcha To a Registration Form
Now, after running the captcha if it’s not successful it remains on the captcha page for you to try again, but if it’s successful it will take you to a page where you can register.
Now you will create a page called form.php and create another page called config.php the config will be the page that contains the database connection, below is the code snippet for the config page.
<?php
session_start();
$db=new mysqli("localhost", "root", "", "gd_test");
Define("SITE_NAME", "Rights.com");
Define("SITE_SLUG", "Taking action on abuse");
function get_post($index){
$index=$_POST[$index];
return $index;
}
function set_alert($msg, $alert_type="danger"){
$_SESSION['msg']=$msg;
$_SESSION['alert_type']=$alert_type;
}
function get_alert(){
if(isset($_SESSION['msg']) && $_SESSION['msg']!=""){
?>
<div class="alert alert-<?=$_SESSION['alert_type']?>"><?=$_SESSION['msg']?></div>
<?php
}
$_SESSION['msg']="";
$_SESSION['alert_type']="";
}
?>
When using your form.php you will include the config.php first then you will include the header.php before writing the code for building the form. Below is the snippet for the form.php you created.
<?php
include 'config.php';
include 'header.php';
?>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 mt-5 shadow">
<form method="post" class="bg-white p-5" action="register_action.php">
<div class="bg-success text-center text-white fbold fs-6"><?= get_alert()?></div>
<?php
/*if captcha code is posted*/
if(isset($_POST["captcha"]))
if($_SESSION["captcha"]==strtolower($_POST["captcha"])):/*CAPTCHA is valid. You can process the form now.*/?>
<div class=" bg-success text-center p-2 text-white fw-bold fs-6"> CAPTCHA is valid. You can process the form now.</div>
<?php else: /*Invalid CAPTCHA*/
header("location: index.php");
?>
<p class="text-danger">Invalid <strong>CAPTCHA.</strong> Pls Try again!</p>
<?php endif; ?>
<h2 class="mt-2">Registration</h2>
<div class="mb-3">
<label>Fullname <span class="text-danger">*</span></label>
<input type="text" id="captchha" name="fullname" size="20" class="form-control m-1">
</div>
<div class="mb-3">
<label>Gender <span class="text-danger">*</span></label>
<input type="text" id="captchha" name="gender" size="20" class="form-control m-1">
</div>
<div class="mb-3">
<label>Email <span class="text-danger">*</span></label>
<input type="email" id="captchha" name="email" size="20" class="form-control m-1">
</div>
<div class="mb-3">
<input type="submit" name="submit" value="Submit" class="btn btn-success col-12 m-1">
</div>
</form>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
Note, you have to include the header and footer. So that the Form will have a good desktop and responsive view. If you follow the code simultaneously the interface below is what you will see in your browser.
Note, this form you just created has an action page, that enables the PHP validation process in the database. Create a new file and call it register_action.php then write the code snippet below inside of the register_action.php
Below is the action page of the form.php
<?php
include 'config.php';
$error = 0;
$error_msg="";
if (isset($_POST['submit'])) {
$fullname = get_post("fullname");
$gender = get_post("gender");
$email = get_post("email");
if ($fullname == "") {
$error = 1;
$error_msg.="fullname is Empty";
}
if ($gender == "") {
$error = 1;
$error_msg.="gender is Empty";
}
if ($email == "") {
$error = 1;
$error_msg.="email is Empty";
}
$check=$db->query("SELECT * FROM users WHERE email='$email' OR fullname='$fullname'");
if($check->num_rows>0){
$error=1;
$error_msg.="your Email or Fullname is already in use <br>";
}
}
if($error==0){
$db->query("INSERT INTO users(fullname, gender, email) VALUES('$fullname','gender', '$email')");
set_alert("success", "your registration was successful");
header("location:form.php");
}else{
set_alert("danger", $error_msg);
header("location:index.php");
}
?>
In the register_action.php page, we selected the values in the name attribute in our form.php page, saved them in a variable similar to their names, and did some validation process that enables proper validation.
Now fill in the fields of the registration form and submit it, it will show success in a green background. But if it’s not successful it will take you to the captcha page to start afresh, like the interface below shows success because the validation was successful.
Conclusion
We’ve come to the end of this tutorial, hopefully, you gained a ton of value from this tutorial.
In this GD library series, you have learned a lot, you can now generate watermark images, build a captcha, and more. We also did a level of form validation. This is the end of this series GD library, I hope you have achieved a lot. Like this tutorial, drop a comment!!
Till next time, have a wonderful day!
About The Author
Emmanuel Okolie is a full-stack laravel developer with 2+ years of experience in the software development industry.
He has grown full-blown skills in combining Software Development, Writing, and Teaching others what he does. His stacks include JavaScript, PHP, ReactJs, Laravel, and more.
He is currently freelancing, building websites for clients, and writing technical tutorials teaching others how to do what he does.
Emmanuel Okolie is open and available to hear from you. Kindly visit and follow him on Linked-In, Facebook, Github, Twitter, or his Website.
Top comments (2)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.