Tutorial Membuat Captcha php

Tutorial Membuat Captcha php

loading....

Pada tutorial php kali ini saya akan membuat captcha menggunakan php. Untuk membuat captcha dengan menggunakan php ini saya juga akan menggunakan session php sebagai media untuk memvalidasi captcha tersebut dan membuat gambar png menggunakan fungsi imagepng. Selain itu saya akan menggunakan fungsi random php untuk mengenerate angka  atau huruf.

Sebelum kita mulai tutorial ini ada baik nya kita mengeal terlebih dahulu apa itu captcha. Captcha adalah sebuah uji tantangan-respons yang digunakan untuk menentukan apakah pengguna itu manusia atau bukan. Istilah captcha ini diciptakan pada tahun 2003 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper, dan John Langford.

Langkah Langkah membuat captcha dengan menggunakan php

Berikut ini adalah tahapan untuk menggunakan captcha dengan menggunakan php

  • Saya akan mebuat 3 buah file php untuk melakukan tutorial ini
    • index.php
    • captcha.php
    • validasi.php
  • Buatlah sebuah fungsi php pada file captcha.php untuk menggenerate huruf atau angka yang akan digunakan pada captcha
    function generate()
    {
    	$char = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    	return substr(str_shuffle($char), 0, 5);	
    }​

    fungsi di atas bertujuan untuk menggenerate lia buah huruf atau angka yang akan digunakan.

  • Masih pada file captcha.php, buatlah sebuah fungsi untuk membuat gambar captcha

    Baca Juga : Membuat Gambar dengan PHP

    function gambar($text)
    {
    		//captcha image
    		$path = $_SERVER['DOCUMENT_ROOT'].dirname($_SERVER['PHP_SELF']);
    		$img = imagecreatetruecolor(70, 35) or die ("Gambar tidak dapat dibuat");
    		$white = imagecolorallocate($img, 255, 255, 255);
    		$black = imagecolorallocate($img, 0, 0, 0);
    		$font = $path.'/arial.ttf';
    		$bg = $black;		
    		imagefill($img, 0, 0, $bg);
    		imagettftext($img, 16, 0, 5, 25, $white, $font, $text);	
    		header( "Content-type: image/png" );
    		imagepng( $img );
    }​
  • Jalankan kedua fungsi di atas beserta set session
    $text = generate();
    gambar($text);
    session_start();
    $_SESSION["captcha"] = $text;​
  • Sekarang kita akan mengolah file index.php, file ini saya isi dengan form login menggunakan bootstrap login.

    Baca Juga : Membuat Form Login Menggunakan Bootstrap 4

    <head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #17a2b8;
      height: 100vh;
    }
    #login .container #login-row #login-column #login-box {
      margin-top: 120px;
      max-width: 600px;
      height: 400px;
      border: 1px solid #9C9C9C;
      background-color: #EAEAEA;
    }
    #login .container #login-row #login-column #login-box #login-form {
      padding: 20px;
    }
    #login .container #login-row #login-column #login-box #login-form #register-link {
      margin-top: -85px;
    }
    </style>
    </head>
    
    <body>
        <div id="login">
            <h3 class="text-center text-white pt-5">Captcha Login PHP</h3>
            <div class="container">
                <div id="login-row" class="row justify-content-center align-items-center">
                    <div id="login-column" class="col-md-6">
                        <div id="login-box" class="col-md-12">
                            <form id="login-form" class="form" action="validasi.php" method="post">
                                <h3 class="text-center text-info">Login</h3>
                                <div class="form-group">
                                    <label for="username" class="text-info">Username:</label><br>
                                    <input type="text" name="username" id="username" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="password" class="text-info">Password:</label><br>
                                    <input type="password" name="password" id="password" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="captcha" class="text-info">Captcha:</label>
                                    <input type="text" name="captcha" id="captcha" class="form-control">
    								<?php 
    									echo '<img  src="captcha.php">';
    									if (isset($_GET['msg'])){echo 'Captcha Salah';}
    								?>
                                </div>							
                                <div class="form-group">
                                    <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    ​
  • Bagian terakhir dari tutorial php ini teletak pada file validasi.php yang berfungsi untuk memvalidasi form login php di atas beserta captcha nya
    <?php
    session_start();
    $a = $_SESSION["captcha"];
    $b = $_POST["captcha"];
    if ($a == $b)
    {
    	echo 'captcha benar lanjutkan ke validasi login';
    	// Silahkan isi dengan skrip untuk memvalidasi login
    }else
    {
    	header('Location: index.php?msg=1');
    }
    ?>​

Demikian lah tutorial membuat captcha image pada form login dengan menggunakan php.

Artikel Menarik Lainnya
php, tutorial php, captcha, captcha php, captcha login php

loading...