PHP - Create Captcha Image

Submitted by razormist on Thursday, May 9, 2019 - 07:36.

In this tutorial we will create a Create Captcha Image using PHP. This code will create a captcha image that needed to be solve by the user. The code use imagettftext() a php built-in tool that generate image data manually that write the captcha code and store the data to php SESSION. This is a user-friendly kind of program feel free to modify it. We will be using PHP as a scripting language and interpreter that is used primarily on any webserver including xamp, wamp, etc. It is being use to any famous websites and it has a modern technology that can easily be use by the next generation.

Getting Started:

First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html. And, this is the link for the bootstrap that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and write it into your text editor, then save it as shown below. index.php

<!DOCTYPE html>
<?php session_start()?>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">PHP - Create Captcha Image<h3/>
                <hr style="border-top:1px dotted #ccc;"/>
                <div class="col-md-3"></div>    
                <div class="col-md-6">
                        <a class="btn btn-success" href="image.php">Create Captcha Image</a>
                        <br />
                        <br />
                        <img src="images/captcha.jpg" />
                </div>  
        </div>
</body>
</html>

image.php

<!DOCTYPE html>
<?php session_start()?>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">PHP - Create Captcha Image<h3/>
                <hr style="border-top:1px dotted #ccc;"/>
                <div class="col-md-3"></div>    
                <div class="col-md-6">
                        <form action="" method="POST">
                                <h3>Solve Captcha</h3>
                                <center><img src="captcha.php" /></center>
                                <br />
                                <?php include'solve.php'?>
                                <div class="form-group">
                                        <input type="number" min="0" class="form-control" name="captcha" required="required"/>
                                        <center><button class="btn btn-primary" name="solve">Solve</button></center>
                                </div>
                        </form>
                </div>  
        </div>
</body>
</html>

Creating the Main Function

This code contains the main function of the application. This code will create and display a captcha image when the button is clicked. To make this just copy and write these block of codes below inside the text editor, then save it as shown below. solve.php

<?php
        if(ISSET($_POST['solve'])){
                $captcha = $_POST['captcha'];
                if($_SESSION['captcha'] == $captcha){
                        echo "<center><label class='text-success'>Congaratulation! You solve the captacha</label></center>";
                }else{
                        echo "<center><label class='text-danger'>Invalid captcha!</label></center>";
                }
        }
?>

captcha.php

<?php
        session_start();
        
        $random = rand(1, 9).rand(1, 9).rand(1, 9).rand(1, 9);
        
        $_SESSION['captcha'] = $random;
        
        $captcha = imagecreatefromjpeg("images/captcha.jpg");
        $color = imagecolorallocate($captcha, 0, 0, 0);
        $font = realpath('code.otf');
        imagettftext($captcha, 20, 0, rand(30, 180), rand(20, 70), $color, $font, $random );
        imagepng($captcha);
        imagedestroy($captcha);
?>

There you have it we successfully created Create Captcha Image using PHP. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

Add new comment

375 views