How To Make Captcha Using PHP Language

in #utopian-io7 years ago (edited)

What Will I Learn?

Write here briefly the details of what the user is going to learn in a bullet list.

  • You will learn PHP
  • You will learn Make Image Using PHP
  • You will learn PHP Function

Requirements

Write here a bullet list of the requirements for the user in order to follow this tutorial.

  • Xampp
  • Text Editor

Difficulty

  • Intermediate

Tutorial Contents

Hello Everyone, Now I want to make tutorial about PHP language, according to the title we will make captcha using php language, but first are you know what is captcha? yes, CAPTCHA is a type of challenge–response test used in computing to determine whether or not the user is human. wikipedia.

Okay let me explain how to make it.

  • Open Your XAMPP and then turn on APACHE service
  • Open your htdocs file and create a new folder with name captcha.
  • Open Your text editor and copy this source code. Save with name index.php
<!DOCTYPE html>
<html>
<head>
    <title>How To Make Captcha Using PHP</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>How To Make Captcha Using PHP</h1>  
    <div class="kotak">     

        <?php 
        if(isset($_GET['msg'])){
            if($_GET['msg'] == "wrong"){
                echo "<p>Captcha Is Wrong</p>";
            }
        }
        ?>

        <p>CAPTCHA</p>      
        <form action="correct.php" method="post">
            <table align="center">                      
                <tr>                
                    <td><img src="captcha.php" alt="gambar" /> </td>
                </tr>
                <td><input name="nilaiCaptcha" value=""/></td>
                <tr>
                    <td><input type ="submit" value="Submit"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>
  • Copy this source and save with name captcha.php
<?php
session_start();
header("Content-type: image/png");
$_SESSION["Captcha"]="";
 $gbr = imagecreate(200, 50);
 imagecolorallocate($gbr, 69, 179, 157);
 $color = imagecolorallocate($gbr, 253, 252, 252);
$font = "256BYTES.TTF"; 
$ukuran_font = 20;
$posisi = 32;
for($i=0;$i<=5;$i++) {
    $angka=rand(0, 9);
    $_SESSION["Captcha"].=$angka;
    $kemiringan= rand(20, 20);
    imagettftext($gbr, $ukuran_font, $kemiringan, 8+15*$i, $posisi, $color, $font, $angka); 
}
imagepng($gbr); 
imagedestroy($gbr);
?>
  • Copy this source code and save with name correct.php
<!DOCTYPE html>
<html>
<head>
    <title>How To Make Captcha Using PHP</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>How To Make Captcha Using PHP</h1>  
    <div class="kotak"> 
        <?php
        session_start();
        if($_SESSION["Captcha"]!=$_POST["nilaiCaptcha"]){
            header("location:index.php?msg=wrong");
        }else{      
            echo "<p>Good Your Captcha Correct</p>";
        }
        ?>
    </div>
</body>
</html>
  • and to your index style use this css code, with name style.css
body{
    font-family: "roboto";
    background: #F4F4F4;
}

h1,p{
    text-align: center;
}

.kotak{
    margin: 10px auto;
    background: #fff;
    
    width: 400px;
    padding: 20px 0px;
}

.kotak table tr td{
    padding: 5px;
}

.kotak table tr td input{
    padding: 5px;
    font-size: 12pt;
}
  • so that the text in the captcha image appears using a font file that you can download on this site font download, here I using 265BYTES Font.

okay if you allredy to follow me, make sure in your htdocs folder like this.
image.png

to see output you can see on your browser on http://localhost/captcha

this is index view
image.png

if you was correct your captcha you will redirect to file correct.php like this
image.png

if you was wrong to type that captcha you can see message on your index
image.png

Okay let me explain that code one by one

  • index.php
        <?php 
        if(isset($_GET['msg'])){
            if($_GET['msg'] == "wrong"){
                echo "<p>Captcha Is Wrong</p>";
            }
        }
        ?>

that code output to error message. if you wrong to type captcha challenge you can see output at above captcha image.

        <form action="correct.php" method="post">

that code to redirect if you correct to type captcha challenge.

  • captcha.php
$gbr = imagecreate(200, 50); //to make captcha image with size
imagecolorallocate($gbr, 69, 179, 157); //captcha color background
$color = imagecolorallocate($gbr, 253, 252, 252);
$font = "256BYTES.TTF";  //captcha font style. at here you can change whatever you want
$ukuran_font = 20; //font size for captcha
$posisi = 32; //captcha position

that code to captcha option,

for($i=0;$i<=5;$i++) {
    $angka=rand(0, 9);
 
    $_SESSION["Captcha"].=$angka;
 
    $kemiringan= rand(20, 20);
    
    imagettftext($gbr, $ukuran_font, $kemiringan, 8+15*$i, $posisi, $color, $font, $angka); 
}

that code to make random number for captcha output

  • correct.php
        <?php
        session_start();
        if($_SESSION["Captcha"]!=$_POST["nilaiCaptcha"]){
            header("location:index.php?msg=wrong"); //if you wrong this code will return to the index file
        }else{      
            echo "<p>Good Your Captcha Correct</p>"; //if correct this code will output text "Good Your Captcha Correct"
        }
        ?>

Benefits Completely Automated Public Turing test to tell Computers and Humans Apart (CAPTCHA) to ensure that the resulting response can only be made by humans rather than computers.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Congratulations @luky! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of posts published

Click on any badge to view your own Board of Honor on SteemitBoard.

To support your work, I also upvoted your post!
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Your contribution cannot be approved because it is not as informative as other contributions. See the Utopian Rules. Contributions need to be informative and descriptive in order to help readers and developers understand them.

You can contact us on Discord.
[utopian-moderator]