Artikel

Cara menggunakan reCAPTCHA pada form ajax untuk pemula

    Dibaca 10387 kali Javascript Pemula Captcha

Hello semua, pada tutorial ini saat ini saya mau berbagi panduan menggunakan captcha dalam form input. Namun ada baiknya saya berikan sedikit gambaran apa sih captcha tersebut.

 

Captcha merupakan fitur atau perangkat yang akan melakukan validasi bahwa yang mengakses sebuah aplikasi atau halaman web benar benar seorang manusia dan bukan bot atau mesin otomatis.
Sebagai contoh, misalnya kamu memiliki sebuah form dihalaman web kamu, tujuan form tersebut adalah tempat pengunjung web memberikan komentar atau beriteraksi dengan admin web. Jika saja form tersebut tidak dilengkapi dengan captcha, maka bisa dipastikan bahwa bukan hanya manusia saja yang bisa mengaksesnya karena pasti mesin/robot/bot juga dapat menggunakannya. Otomatis website atau aplikasi anda akan dipenuhi dengan spam spam maupun konten yang tidak diharapkan.

 

Maka dari itu kita memerlukan captcha. Mengapa captcha dikatakan mampu membendung segala macam spamming yang dilakukan oleh mesin/bot?
Jawabanya adalah karena captcha adalah pertanyaan yang didesign hanya dapat dijawab oleh manusia. Otak manusia merupakan organ luar biasa yang bisa mengenali dan mempelajari patern dalam bentuk apapun. Beberapa mesin/komputer saat ini memang sudah dapat melakukan pengenalan patern, bahkan sekarang telah terdapat AI yang memiliki kemampuan untuk belajar, namun kemampuan mesin tetaplah jauh dibawah kemapuan otak manusia. Jadi kesimpulannya captcha adalah pertanyaan atau quiz yang hanya dapat dipecahkan oleh otak manusia.

 

Ok, saya rasa sudah cukup basa basinya, kamu pasti sedang berada dihalaman pasti sudah mengerti apa yang disebut captcha dan tujuan anda disini adalah mempelajari cara menggunakan captcha pada website anda, dan yang pasti ... menggunakan ajax, yang artinya dalam proses kirim dan menerima data, halaman tidak akan direload!

 

Mari kita mulai!.....
Studi kasus kita saat ini adalah menerapkan captcha  pada form contact us. Konsepnya adalah, ketika user mengiput data atau pesan pada form tersebut, user harus mengisi captcha terlebih dahulu. Dan pada waktu user mengklik tombol submit, request akan dikirimkan ke server,lalu server akan melakukan validasi apakah captcha telah terinput dan mengecek apakah data atau jawaban captcha sudah benar. Jika dilakukan pengecekan dan ternyata salah, server akan mengirim respond berupa code error kepada client/user. Tapi jika ternyata benar, data akan dimasukan ke database dan server akan mengirim respond dengan code success kepada client. Dan proses kirim mengirim data tersebut terjadi dibelakang layar tanpa mereload halaman.

 

Nah, sesuai judul tentunya aplikasi captcha yang akan kita gunakan saat ini adalah aplikasi reCAPTCHA milik Google.
Pertama pastikan kamu sudah terlogin ke akun Google lalu masuk ke alamat https://www.google.com/recaptcha

 

 

Klik tombol biru "Get reCAPTCHA"

 

 

 

Setelah itu akan muncul form untuk mendaftarkan website baru, label nya diisi nama website kamu dan domain isi dengan alamat website kamu. Namun, untuk saat ini karena masih latihan isi saja kedua duanya dengan "localhost". Lalu klik tombol biru "Register"

 

 

Setelah itu anda akan mendapatkan code site key dan secret key.

Biarkan halaman ini tetap terbuka, atau copy key nya ke notepad, karena nantinya kita akan memerlukaanya.

 

 

Ok!... tahan sampai disini.., mari kita pinda kita buat halaman HTML kita.

Saya asumsikan bahwa anda menggunakan xampp server, maka didalam folder htdocs, buatlah folder bernama form

Lalu buat 2 file dengan nama main.js, index.php dan poses.php

 

 

 

 

ketikan code ini pada file index.php

<html>
<head>
<title>Latihan reCcptcha</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />


<!--gunakan bootstrap agar supaya kita tidak perlu melalukan styling manual pada form buatan kita-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!--gunakan jQuery untuk memudahkan dan mempercepat coding javascript-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<!--memuat api recaptcha-->
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>
<!--disini terdapat parameter onload dengan nilai onloadCallback.
onloadCallback adalah nama fungsi yang akan dipanggil ketika semua element yang diperlukan untuk menampilkan recaptcha telah terload , fungsinya akan kita buat nanti-->

<!--tempat kita akan menaruh semua code javascript-->
<script type="text/javascript" src="main.js"></script>
	

</head>
<body>
	<div class="container">

		<h2>Contact Us</h2>

		<form method="POST" action="proses.php">

			<div class="form-group">
				<label>Nama</label>
				<input type="text" name="nama" class="form-control" />
			</div>

			<div class="form-group">
				<label>Email</label>
				<input type="text" name="email" class="form-control" />
			</div>

			<div class="form-group">
				<label>Pesan</label>

				<textarea  name="pesan" class="form-control"></textarea>
			</div>

			<div class="form-group">
			     <!--dibagian inilah recaptcha nantinya akan ditampilkan-->
				<div id='recaptcha'></div>
			</div>

			<div class="form-group">
			     <!-- nantinya akan menampilkan pesan error atau success-->
				<div class="alertBox"></div>
			</div>

			<div class="form-group">
				<button class="btn btn-primary">Kirim pesan</button>
			</div>



		</form>

	</div>
</body>
</html>
 

 

 

bukan alamat http://localhost/form dan kamu akan mendapatkan tampilan seperti ini

 

 

Sekarang, buat database baru bernama latihan. Lalu didalam database latihan, buat table dengan nama  kotak_masuk

CREATE TABLE `kotak_masuk` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `pesan` text NOT NULL,
  PRIMARY KEY (`id`)
) 

 

Setelah itu, buka file main.js lalu masukan code seperti dibawah ini

$(function(){

var captcha;


//membuat fungsi onloadCallback
onloadCallback=function(){
captcha=grecaptcha.render(document.getElementById('recaptcha'), {
   //masukan code sitekey disini
   'sitekey' : "6LdbrBwTAAAAABHQMlA02ZMj051Sdlrl_ogjw65e",
   'theme' : 'dark'
});
}


//mendaftarkan event  submit pada event handler .Dengan kata lain, ketika user menklik tombol kirim, blok code inilah yang akan dijalankan
$("form").on("submit",function(evt){


evt.preventDefault();    

var _this=$(this);
var nilai=_this.serialize();

$.ajax({
	type:_this.attr("method"),
	url: _this.attr("action"),
	data: nilai,
	cache: false,
	dataType: "json",
	success: function(a){
		if(a.status=="berhasil"){
			_this.find("input,textarea").val("");
			$(".alertBox").html("<span class='alert alert-success'>"+a.pesan+"</span>");
		} else {
			$(".alertBox").html("<span class='alert alert-danger'>"+a.pesan+"</span>");			

		}
	},
	error: function(a,b,c){
		console.log("Coba sekali lagi");
	},
	complete:function(){
        grecaptcha.reset(captcha);
	}
});


})

});

 

 

 

Refresh halaman kamu, maka kamu akan mendapatkan tampilan seperti ini

Yup..., recaptcha sudah muncul.

Namun jika diperhatikan, ternyata muncul tulisan "This reCAPTCHA is currently running on localhost". Abaikan saja tulisan itu,bukan masalah kok,  itu cuma semacam pemberitahuan bahwa recaptcha sementra jalan di localhost, dan nantinya tulisan itu akan hilang ketika aplikasi kamu sudah dijalankan di hosting atau sudah dionlinekan.

 

Yang terakhir, buka file proses.php lalu masukan code ini

<?php
if(isset($_POST["nama"]))
{
	//grab semua data
	$nama=$_POST["nama"];
	$email=$_POST["email"];
	$pesan=$_POST["pesan"];

	//cek apakah captcha telah terisi
	if(isset($_POST["g-recaptcha-response"]))
	{
		//jika captcha telah terisi jalankan blok ini

		//masukan secret key disini
		$secretKey="6LdbrBwTAAAAALZ75rYXIF_wInAW568oF87N2lGO";
		$captcha= $_POST["g-recaptcha-response"];
		$respond=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$captcha");

		$hasil=json_decode($respond,true);

		//cek apakah jawaban dari captcha benar
		if($hasil["success"]==true){
			//jika jawaban sudah benar, jalankan blok ini


			$host="localhost";
			$user = "root";
			$password = "";
			$database_name = "latihan";


			$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password);

			//memasukan data ke database
			$query= $pdo->prepare("INSERT INTO kotak_masuk (nama,email,pesan) VALUES('$nama','$email','$pesan')");
			$query->execute();
 
					echo json_encode(array("status"=>"berhasil",
							   "pesan"=>"Terima Kasih telah mengirimkan pesan"
								));


		} else {
			//jika jawaban salah, jalankan blok ini lalu kirimkan pesan error
		echo json_encode(array("status"=>"error",
							   "pesan"=>"Anda memasukan captcha yang salah"
								));

		}


	} 

	
	else 
	{
		//jika captcha belum terisi, alankan blok ini lalu kirimkan pesan error
		echo json_encode(array("status"=>"error",
							   "pesan"=>"captcha belum terisi"
								));
	}

} 

 

Ok sampai disini seharusnya code codenya sudah berjalan dengan baik. Waktunya untuk mencobanya.

Refresh browser kamu, lalu lalu tekan tombol "kirim pesan" tanpa mengisi captcha.

Kamu akan mendapatkan error bahwa captcha salah.

 

 

Tapi sekarang coba kamu masukan data ke formnya, isi captchanya lalu tekan tombol "kirim"

 

Kamu akan mendapatkan pemberitahuan bahwa "pesan kamu telah terkirim" dan formnya juga sudah dibersihkan.

Data yang dikirimkan juga telah berhasil masuk ke database

 

Demikianlah tutorial recaptcha pada form ajax.

Semoga bisa bermanfaat, dan membantu teman teman yang sedang belajar.

Untuk pertanyaan, silahkan tinggalkan dikomentar. 

Salam