Cara Menambahkan CAPTCHA Pada Form Login Menggunakan PHP


Selamat siang sobat blogger, kali ini saya akan share bagaimana menambahkan captcha pada form login menggunakan PHP.

Sebelum menuju ke tutorial utama saya ingin sedikit menjelaskan apa itu captnya dan apa tujuan dari captnya itu.

Menurut Wikipedia "CAPTCHA atau Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Proses ini biasanya melibatkan suatu komputer (server) yang meminta seorang pengguna untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut. Karena komputer lain tidak dapat memecahkan CAPTCHA, pengguna manapun yang dapat memberikan jawaban yang benar akan dianggap sebagai manusia. Oleh sebab itu, uji ini kadang disebut sebagai uji Turing balik, karena dikelola oleh mesin dan ditujukan untuk manusia, kebalikan dari uji Turing standar yang biasanya dikelola oleh manusia dan ditujukan untuk suatu mesin. CAPTCHA umumnya menggunakan huruf dan angka dari citra terdistorsi yang muncul di layar"

Dari penjelasan di atas sudah sangat jelas tujuan pembuatan captcha itu sendiri, Oleh karena itu kami akan share bagaimana membuat captca pada form login anda.

Yang pertama anda lakukan adalah membuat Skript Captcha, caranya masukkan kodingan di bawah ini kemudian pastekan kedalam notepad++ anda atau tools lainyya yang jelas bahasanya menggunakan PHP.
 

<?php session_start(); 
$text = rand(10000,99999); 
$_SESSION["vercode"] = $text; 
$height = 26; 
$width = 55;   
$image_p = imagecreate($width, $height); 
$black = imagecolorallocate($image_p, 0, 0, 0); 
$white = imagecolorallocate($image_p, 255, 255, 255); 
$font_size = 14; 
imagestring($image_p, $font_size, 5, 5, $text, $white); 
imagejpeg($image_p, null, 80); 
?>


Simpan file di atas dengan nama captcha.php, usahakan simpan dengan folder yang sama dimana anda menyimpan form login anda sehingga ketika di panggil sangat mudah. Jika anda ingin menyesuaikan panjang dan lebar tampilan captcha dengan form login anda tinggal ubah

$width = 55;
$height = 26;

Berikutnya adalah membuat form login, disini saya download template kemudian mengambil form loginnya. Berikut Form login yang saya gunakan. Search template : Dashgum



 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>DASHGUM - Bootstrap Admin Template</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        
    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">
  </head>

  <body>

	  <div id="login-page">
	  	<div class="container">
	  	
		      <form class="form-login" action="index.html">
		        <h2 class="form-login-heading">sign in now</h2>
		        <div class="login-wrap">
		            <input type="text" class="form-control" placeholder="User ID" autofocus>
		            <br>
		            <input type="password" class="form-control" placeholder="Password">
		            <label class="checkbox">
		                <span class="pull-right">
		                    <a data-toggle="modal" href="login.html#myModal"> Forgot Password?</a>
		
		                </span>
		            </label>
		            <button class="btn btn-theme btn-block" href="index.html" type="submit"><i class="fa fa-lock"></i> SIGN IN</button>
		            <hr>
		            
		            <div class="login-social-link centered">
		            <p>or you can sign in via your social network</p>
		                <button class="btn btn-facebook" type="submit"><i class="fa fa-facebook"></i> Facebook</button>
		                <button class="btn btn-twitter" type="submit"><i class="fa fa-twitter"></i> Twitter</button>
		            </div>
		            <div class="registration">
		                Don't have an account yet?<br/>
		                <a class="" href="#">
		                    Create an account
		                </a>
		            </div>
		
		        </div>
		
		          <!-- Modal -->
		          <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
		              <div class="modal-dialog">
		                  <div class="modal-content">
		                      <div class="modal-header">
		                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                          <h4 class="modal-title">Forgot Password ?</h4>
		                      </div>
		                      <div class="modal-body">
		                          <p>Enter your e-mail address below to reset your password.</p>
		                          <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
		
		                      </div>
		                      <div class="modal-footer">
		                          <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
		                          <button class="btn btn-theme" type="button">Submit</button>
		                      </div>
		                  </div>
		              </div>
		          </div>
		          <!-- modal -->
		
		      </form>	  	
	  	
	  	</div>
	  </div>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <!--BACKSTRETCH-->
    <!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
    <script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
    <script>
        $.backstretch("assets/img/login-bg.jpg", {speed: 500});
    </script>


  </body>
</html>

Kemudian untuk memasang kode Captchanya cukup gampang tinggal memanggilnya. Lihat kode di atas antara <div class="login-wrap"> Sampai <!--Modal--> Untul lebih lengkapnya lihat script dibawah ini dan tambahkan kode untuk memanggil captcha, tepat di bawah Password. lihat kode yang berwarna merah, itu yang saya tambahkan untuk memanggil captcha tadi.


<div id="login-page">
  <div class="container">
    
    <form class="form-login" action="index.html">
      <h2 class="form-login-heading">sign in now</h2>
      <div class="login-wrap">
        <input type="text" class="form-control" placeholder="User ID" autofocus>
        <br>
        <input type="password" class="form-control" placeholder="Password">
        <br>
        <input type="text" class="form-control1" name="vercode" placeholder="Verification Code" maxlength="5" autocomplete="off" required style="width: 225px; height: 26px;" />&nbsp;
        <img src="captcha.php">
        <label class="checkbox">
          <span class="pull-right">
            <a data-toggle="modal" href="login.html#myModal"> Forgot Password?</a>
            
          </span>
        </label>
        <button class="btn btn-theme btn-block" href="index.html" type="submit"><i class="fa fa-lock"></i> SIGN IN</button>
        <hr>
        
        <div class="login-social-link centered">
          <p>or you can sign in via your social network</p>
          <button class="btn btn-facebook" type="submit"><i class="fa fa-facebook"></i> Facebook</button>
          <button class="btn btn-twitter" type="submit"><i class="fa fa-twitter"></i> Twitter</button>
        </div>
        <div class="registration">
          Don't have an account yet?<br/>
          <a class="" href="#">
            Create an account
          </a>
        </div>
        
      </div>
      
      <!-- Modal -->
      <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">Forgot Password ?</h4>
            </div>
            <div class="modal-body">
              <p>Enter your e-mail address below to reset your password.</p>
              <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
              
            </div>
            <div class="modal-footer">
              <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
              <button class="btn btn-theme" type="button">Submit</button>
            </div>
          </div>
        </div>
      </div>
      <!-- modal -->
      
    </form>     
    
  </div>

Oh ya kode captha tidak akan tampil ketika anda belum verifikasi kode Captcha ini, Berikut kode verifikasi Captcha.
 

//code for captach verification
  if ($_POST["vercode"] != $_SESSION["vercode"] OR $_SESSION["vercode"]=='')  {
    echo "<script>alert('Incorrect verification code');</script>" ;
  } 

Pasti banyak yang bertanya bagaimana dan cara menempatkan kode captcha ini, Bagi seorang web developer hal seperti ini sangat mudah, tetapi bagi pemula ini sangat sulit. Saya sulit menjelaskannya karena saya kurang dalam berkata-kata, tetapi saya harap dengan gambar penempatan dibawah ini anda akan paham cara penempatannya.


Lihat kode yang saya tandai di atas, Oh ya jika teman-teman kurang paham dengan apa yang saya share di atas.

Gambar akhir
Silahkan tinggalkan comment dibawah, Saya berharap apa yang kami share barmanfaat bagi anda semua, Diskusinya sangat kami tunggu, Makasih.


SUBSCRIBE TO OUR NEWSLETTER

close