09/05/2020
Rumah Code

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.

<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');
}
?>