Build Captcha in CodeIgniter using Captcha Helper

TechArise Team

5 years ago

A CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a type of challenge-response test used in computing to determine whether or not the user is human. Captcha code is a combination of some readable text with some distorted shapes to be read only by a human being to confirm that the user is not a bot. In this tutorial, We have shared how to implement Captcha in CodeIgniter using Captcha Helper. This is a very simple example, you can just copy-paste, and change it according to your requirements.

Also Read : CodeIgniter Form Submission using MySQL, jQuery and Ajax with custom Validation

Before started to implement the Build Captcha in CodeIgniter using Captcha Helper, look files structure:

codeigniter-send-email-with-attachment
- application
  - config
    - constants.php
    - routes.php
  - controllers
    - Captcha.php
  - views
    - captcha
      - index.php
    - templates
      - header.php
      - footer.php
- system
- index.php
- assets
  - css
  - uploads

Step 1: Load “captcha ” class in controller.

<?php
	// load captcha helper
    $this->load->helper('captcha');
?>

<?php

// load captcha helper

$this->load->helper('captcha');

Step 2: Create a controller file

Create a controller file named Captcha.php inside “application/controllers” folder.

The controller handles the captcha process.
__construct() – Loads the required library and helper.
index() – load form and generate Captcha Image.
refresh() – refresh Captcha.

<?php 
defined('BASEPATH') OR 
    exit('No direct script access allowed');
/**
 * Version: 1.0.0
 *
 * Description of Captcha Controller
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *
 **/

// Captcha class
class Captcha extends CI_Controller {
    function __construct() {
        parent::__construct(); 
        // Load the captcha helper
        $this->load->helper('captcha');
    }
    // index
    public function index(){
        $data = array();
        $data['metaDescription'] = 'Build Captcha in CodeIgniter using Captcha Helper';
        $data['metaKeywords'] = 'Build Captcha in CodeIgniter using Captcha Helper';
        $data['title'] = "Build Captcha in CodeIgniter using Captcha Helper - TechArise";
        $data['breadcrumbs'] = array('Build Captcha in CodeIgniter using Captcha Helper' => '#');
        // If captcha form is submitted
        if($this->input->post('submit')) {
            $inputCaptcha = $this->input->post('captcha');
            $sessCaptcha = $this->session->userdata('captchaCode');
            if($inputCaptcha === $sessCaptcha){
                $data['msg'] = '<div class="alert alert-success alert-dismissible">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>Success!</strong> Captcha code matched.
                </div>';
            }else{
                 $data['msg'] = '<div class="alert alert-danger alert-dismissible">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>Failed!</strong> Captcha does not match, please try again.
                </div>  ';
            }
        }
        // Captcha configuration
        $config = array(
            'img_path'      => BASH_PATH.'assets/uploads/captcha_images/',
            'img_url'       => base_url().'assets/uploads/captcha_images/',
            'font_path'     => BASH_PATH.'system/fonts/texb.ttf',
            'img_width'     => 170,
            'img_height'    => 55,
            'expiration'    => 7200,
            'word_length'   => 6,
            'font_size'     => 25,
            'colors'        => array(
                'background' => array(171, 194, 177),
                'border' => array(10, 51, 11),
                'text' => array(0, 0, 0),
                'grid' => array(185, 234, 237)
            )
        );
        $captcha = create_captcha($config);
        // Unset previous captcha and set new captcha word
        $this->session->unset_userdata('captchaCode');
        $this->session->set_userdata('captchaCode', $captcha['word']);
        // Pass captcha image to view
        $data['captchaImg'] = $captcha['image'];
        // Load the view
        $this->load->view('captcha/index', $data);
    }
    // refresh
    public function refresh(){
        // Captcha configuration
         $config = array(
            'img_path'      => BASH_PATH.'assets/uploads/captcha_images/',
            'img_url'       => base_url().'assets/uploads/captcha_images/',
            'font_path'     => BASH_PATH.'system/fonts/texb.ttf',
            'img_width'     => 170,
            'img_height'    => 55,
            'expiration'    => 7200,
            'word_length'   => 6,
            'font_size'     => 25,
            'colors'        => array(
                'background' => array(171, 194, 177 ),
                'border' => array(10, 51, 115),
                'text' => array(0, 0, 0),
                'grid' => array(185, 234, 237)
            )
        );
        $captcha = create_captcha($config);
        // Unset previous captcha and set new captcha word
        $this->session->unset_userdata('captchaCode');
        $this->session->set_userdata('captchaCode',$captcha['word']);
        // Display captcha image
        echo $captcha['image'];
    }
}
?>

<?php

defined('BASEPATH') OR

exit('No direct script access allowed');

/**

* Version: 1.0.0

* Description of Captcha Controller

* @author TechArise Team

* @email info@techarise.com

**/

// Captcha class

class Captcha extends CI_Controller {

function __construct() {

parent::__construct();

// Load the captcha helper

$this->load->helper('captcha');

}

// index

public function index(){

$data = array();

$data['metaDescription'] = 'Build Captcha in CodeIgniter using Captcha Helper';

$data['metaKeywords'] = 'Build Captcha in CodeIgniter using Captcha Helper';

$data['title'] = "Build Captcha in CodeIgniter using Captcha Helper - TechArise";

$data['breadcrumbs'] = array('Build Captcha in CodeIgniter using Captcha Helper' => '#');

// If captcha form is submitted

if($this->input->post('submit')) {

$inputCaptcha = $this->input->post('captcha');

$sessCaptcha = $this->session->userdata('captchaCode');

if($inputCaptcha === $sessCaptcha){

$data['msg'] = '<div class="alert alert-success alert-dismissible">

<strong>Success!</strong> Captcha code matched.

</div>';

}else{

$data['msg'] = '<div class="alert alert-danger alert-dismissible">

<strong>Failed!</strong> Captcha does not match, please try again.

</div> ';

}

// Captcha configuration

$config = array(

'img_path' => BASH_PATH.'assets/uploads/captcha_images/',

'img_url' => base_url().'assets/uploads/captcha_images/',

'font_path' => BASH_PATH.'system/fonts/texb.ttf',

'img_width' => 170,

'img_height' => 55,

'expiration' => 7200,

'word_length' => 6,

'font_size' => 25,

'colors' => array(

'background' => array(171, 194, 177),

'border' => array(10, 51, 11),

'text' => array(0, 0, 0),

'grid' => array(185, 234, 237)

)

);

$captcha = create_captcha($config);

// Unset previous captcha and set new captcha word

$this->session->unset_userdata('captchaCode');

$this->session->set_userdata('captchaCode', $captcha['word']);

// Pass captcha image to view

$data['captchaImg'] = $captcha['image'];

// Load the view

$this->load->view('captcha/index', $data);

}

// refresh

public function refresh(){

// Captcha configuration

$config = array(

'img_path' => BASH_PATH.'assets/uploads/captcha_images/',

'img_url' => base_url().'assets/uploads/captcha_images/',

'font_path' => BASH_PATH.'system/fonts/texb.ttf',

'img_width' => 170,

'img_height' => 55,

'expiration' => 7200,

'word_length' => 6,

'font_size' => 25,

'colors' => array(

'background' => array(171, 194, 177 ),

'border' => array(10, 51, 115),

'text' => array(0, 0, 0),

'grid' => array(185, 234, 237)

)

);

$captcha = create_captcha($config);

// Unset previous captcha and set new captcha word

$this->session->unset_userdata('captchaCode');

$this->session->set_userdata('captchaCode',$captcha['word']);

// Display captcha image

echo $captcha['image'];

}

Step 3: Create a view

Create a view file named index.php inside “application/views/captcha” folder

 <?php $this->load->view('templates/header');?>
<section class="showcase">
  <div class="container">
    <div class="pb-2 mt-4 mb-2 border-bottom">
      <h2>Build Captcha in CodeIgniter using Captcha Helper</h2>
    </div>
  <div class="row">       
    <div class="col-md-12 gedf-main">
      <?php if(!empty($msg)) { 
        echo $msg;
      } ?>
      <form method="post">
        <div class="row"> 
          <label class="control-label" style="padding-left: 18px;">Enter captcha code:</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="captcha" />
          </div>
          <div class="col-sm-3 text-left">
            <button type="submit" name="submit" class="btn btn-primary btn-md" value="submit">Submit</button>
          </div>
        </div>
      </form>
      <br>
      <p id="captcha-img"><?php echo $captchaImg; ?></p>
      <p>Can't read the image? click <a href="javascript:void(0);" class="refresh-captcha">here</a> to refresh.</p>
    </div>       
  </div>
  </div>
</section>
<?php $this->load->view('templates/footer');?>
<script>
  jQuery(document).ready(function(){
    jQuery('a.refresh-captcha').on('click', function(){
      jQuery.get('<?php print base_url().'captcha/refresh'; ?>', function(data) {
        jQuery('p#captcha-img').html(data);
    });
    });
  });
</script>

<?php $this->load->view('templates/header');?>

<h2>Build Captcha in CodeIgniter using Captcha Helper</h2>

</div>

<?php if(!empty($msg)) {

echo $msg;

} ?>

<label class="control-label" style="padding-left: 18px;">Enter captcha code:</label>

</div>

<button type="submit" name="submit" class="btn btn-primary btn-md" value="submit">Submit</button>

</div>

</form>

<br>

<p>Can't read the image? click <a href="javascript:void(0);" class="refresh-captcha">here</a> to refresh.</p>

</div>

</section>

<?php $this->load->view('templates/footer');?>

jQuery(document).ready(function(){

jQuery('a.refresh-captcha').on('click', function(){

jQuery.get('<?php print base_url().'captcha/refresh'; ?>', function(data) {

jQuery('p#captcha-img').html(data);

});

</script>

Step 7: You can add Javascript code for refresh captcha

<script>
  jQuery(document).ready(function(){
    jQuery('a.refresh-captcha').on('click', function(){
      jQuery.get('<?php print base_url().'captcha/refresh'; ?>', function(data) {
        jQuery('p#captcha-img').html(data);
    });
    });
  });
</script>

jQuery(document).ready(function(){

jQuery('a.refresh-captcha').on('click', function(){

jQuery.get('<?php print base_url().'captcha/refresh'; ?>', function(data) {

jQuery('p#captcha-img').html(data);

});

</script>

Step 4:Create a view(header)

Create a view file named header.php inside “application/views/templates” folder.

This view contains the header section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header section.

  <?php
  defined('BASEPATH') OR exit('No direct script access allowed');
  ?>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title><?php print $title; ?></title>
    <link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <!-- Custom fonts for this template -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template -->
    <link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">
  </head>
  <body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
    <div class="container">
      <a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="https://techarise.com">Home
                  <span class="sr-only">(current)</span>
                </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://techarise.com/php-free-script-demos/">Live Demo</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

<!DOCTYPE html>

<head>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>

</button>

<a class="nav-link" href="https://techarise.com">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

Step 5: Create a view(footer)

Create a view file named footer.php inside “application/views/templates” folder.

This view contains the footer section of the webpage.

  <!-- Footer -->
    <footer class="footer bg-light footer-bg-dark">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
            <ul class="list-inline mb-2">
              <li class="list-inline-item">
                <a href="#">About</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Contact</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
            </ul>
            <p class="text-muted small mb-4 mb-lg-0">Copyright &copy;  2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.COM</a> All rights reserved.</p>
          </div>
          <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-3">
                <a href="#">
                  <i class="fab fa-facebook fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item mr-3">
                <a href="#">
                  <i class="fab fa-twitter-square fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-instagram fa-2x fa-fw"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <!-- Bootstrap core JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>  
  </body>
  </html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

</body>

</html>

Demo Download