Mostly in web applications there is a need to protect your website from getting spammed. So we need to create a Captcha spam protection to stop the spamming activities.

This blog post demonstrate you, how to implement  simple captcha using CodeIgniter captcha helper file.

Captcha is basically a random generated captcha string and which can be stored in session variable for further use. After that, the generated string is bunched with an image to pretend as a single image in such a way that only human being is able to read it.

If a “word” is not supplied, the function will generate a random ASCII string.

Watch our live demo or download the Script file from below link, extract files and run on your Local server.

-: See Also :-

Captcha Code in PHP and jQuery
How to Setup Google Captcha

Syntax:

 $values = array(
'word' => '',   //Generate alternate word by default. You can also set your word.
'word_length' => 8,  // To set length of captcha word.
'img_path' => './images/',   // Create  folder "images" in root directory, and give path.
'img_url' => base_url() .'images/',  // To store captcha images in "images" folder.

// Font path is used font library, which will stored  in system/fonts/texb.ttf.
'font_path' => base_url() . 'system/fonts/texb.ttf',
'img_width' => '150',   //Set image width.
'img_height' => 50,   // Set image height.
'expiration' => 3600   // This will automatically expire images in given time.
);
// "create_captcha" is function of "captcha helper", this will set array in helper library.
$data = create_captcha($values); 

 


 

 


How to run file:

 


Tutorial Scripts in detail

Below are the details of the code used in this tutorial with proper explanation.

Controller File: captcha_controller.php

Copy the below code in your controller.

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Captcha_Controller extends CI_Controller {

// Load Helper in and Start session.
function __construct() {
parent::__construct();
$this->load->helper('captcha');
session_start();
}
// This function show values in view page and check captcha value.
public function form() {
if(empty($_POST)){
$this->captcha_setting();
}
else{
// Case comparing values.
if (strcasecmp($_SESSION['captchaWord'], $_POST['captcha']) == 0) {
echo "<script type='text/javascript'> alert('Your form successfully submitted'); </script>";
$this->captcha_setting();
} else {
echo "<script type='text/javascript'> alert('Try Again'); </script>";
$this->captcha_setting();
}
}
}
// This function generates CAPTCHA image and store in "image folder".
public function captcha_setting(){
$values = array(
'word' => '',
'word_length' => 8,
'img_path' => './images/',
'img_url' => base_url() .'images/',
'font_path' => base_url() . 'system/fonts/texb.ttf',
'img_width' => '150',
'img_height' => 50,
'expiration' => 3600
);
$data = create_captcha($values);
$_SESSION['captchaWord'] = $data['word'];

// image will store in "$data['image']" index and its send on view page
$this->load->view('captcha_view', $data);
}
// For new image on click refresh button.
public function captcha_refresh(){
$values = array(
'word' => '',
'word_length' => 8,
'img_path' => './images/',
'img_url' => base_url() .'images/',
'font_path' => base_url() . 'system/fonts/texb.ttf',
'img_width' => '150',
'img_height' => 50,
'expiration' => 3600
);
$data = create_captcha($values);
$_SESSION['captchaWord'] = $data['word'];
echo $data['image'];

}
}
?>

View File : captcha_view.php

Copy the below code in your view.

<html>
<head>
<title>Add captcha using CodeIgniter</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

// Ajax post for refresh captcha image.
$(document).ready(function() {
$("a.refresh").click(function() {
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/captcha_controller/captcha_refresh",
success: function(res) {
if (res)
{
jQuery("div.image").html(res);
}
}
});
});
});
</script>
</head>
<body>
<div class="main">
<div id="content">
<h2 id="form_head">Captcha Using Codelgniter</h2><br/>
<hr>
<div id="form_input">
<?php

// Form Open
echo form_open();

// Name Field
echo form_label('Name');
$data_name = array(
'name' => 'name',
'class' => 'input_box',
'placeholder' => 'Please Enter Name',
'id' => 'name',
'required' => ''
);
echo form_input($data_name);
echo "<br>";
echo "<br>";

// Email Field
echo form_label('Email');
$data_email = array(
'name' => 'email',
'class' => 'input_box',
'placeholder' => 'Please Enter Email',
'id' => 'email',
'required' => ''
);
echo form_input($data_email);
echo "<br>";
echo "<br>";

echo "<div class='image'>";

// $image is the index of $data array. which will send by controller.
echo $image;
echo "</div>";

// Calling for refresh captcha image.
echo "<a href='#' class ='refresh'><img id = 'ref_symbol' src =".base_url()."img/refresh.png></a>";
echo "<br>";
echo "<br>";

// Captcha word field.
echo form_label('Captcha');
$data_captcha = array(
'name' => 'captcha',
'class' => 'input_box',
'color' => 'white',
'placeholder' => '',
'id' => 'captcha'
);
echo form_input($data_captcha);
?>
</div>
<div id="form_button">
<?php echo form_submit('submit', 'Submit', "class='submit'"); ?>
</div>
<?php
// Form Close
echo form_close(); ?>
</div>
</div>
</body>
</html>

CSS File : style.css

Styling HTML Elements.

body {
font-family: 'Raleway', sans-serif;
}
.main
{
width: 1015px;
position: absolute;
top: 10%;
left: 20%;
}
#form_head
{
text-align: center;
background-color: #FEFFED;
height: 66px;
margin: 0 0 -29px 0;
padding-top: 35px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);
}
#content {
position: absolute;
width: 450px;
height: 490px;
border: 2px solid gray;
border-radius: 10px;
}
#content_result{
position: absolute;
width: 450px;
height: 192px;
border: 2px solid gray;
border-radius: 10px;
margin-left: 559px;
margin-top: -262px;
}
#form_input
{
margin-left: 50px;
margin-top: 36px;
}
label
{
margin-right: 6px;
font-weight: bold;
}

#form_button{
padding: 0 21px 15px 15px;
position: absolute;
bottom: 0px;
width: 414px;
background-color: #FEFFED;
border-radius: 0px 0px 8px 8px;
border-top: 1px solid #9A9A9A;
}
.submit{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 300px;
border-radius: 5px;
padding: 10px 0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.submit:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
.label_output
{
color:#4A85AB;
margin-left: 10px;
}
#result_id
{
text-align: center;
background-color: #FCD6F4;
height: 47px;
margin: 0 0 -29px 0;
padding-top: 12px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);
}
#result_show
{
margin-top: 35px;
margin-left: 45px;
}
.input_box{
height:40px;
width:240px;
padding:20px;
border-radius:3px;
background-color:#FEFFED;
margin-left:30px;
}
img {
margin-left: 97px;
}
input#name {
margin-left: 45px;
}
input#email {
margin-left: 50px;
}
img#ref_symbol {
margin-left: 275px;
margin-top: -36px;
}

 

Conclusion:

This was all about how CodeIgniter captcha helper class work. hope you like it, keep reading our other blogs.