Captcha (Completely Automated Public Turning) biasanya sering kita temukan untuk memvalidasi inputan dalam sebuah website, captcha sendiri banyak macamnya, kali ini kita akan fokus membahas Recaptcha Google serta cara penerapannya.
Kenapa saya lebih memilih Recaptcha Google dibanding lainnya, karena penggunaannya yang mudah dan tampilannya ndak ribet-ribet amat, jadi tidak membingungkan user. Langsung saja kita mulai tutorialnya.
Syarat untuk memasang recaptcha google adalah kita harus punya API key nya, yang belum punya, silakan daftar halaman resminya (https://www.google.com/recaptcha/admin), berikut tampilan halamannya:
Silakan anda isi kolom label dan domains sesuai dengan domain dari website yang akan anda pasang recaptcha nya, karena apabila nama domain nya tidak cocok maka recaptcha nya akan error saat web anda sudah online nantinya.
Setelah anda isi kolom label dan domains dengan benar, maka akan mendapatkan secret key dan site key dari recaptcha nya. Berikut contoh tampilannya kalau anda berhasil membuat registrasi
sampai disini kebutuhan untuk pemasangan recaptcha sudah terpenuhi, sekarang saatnya coding..
Skenarionya kita akan membuat tampilan seperti berikut
Jadi terdapat form dengan 2 kolom inputan, yaitu : nama dan komentar, lalu 1 button untuk aksinya, dan pastinya recaptcha nya. untuk tampilan saya menggunakan framework bootstrap (http://www.getbootstrap.com)
Pertama, Silakan buat folder dihtdocs dengan nama recaptcha(*opsional), kemudian buat file dengan nama index.php, copy paste script berikut:
.
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recaptcha Google</title>
<!-- snippet -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- bootstrap -->
<link href='bootstrap.min.css' rel='stylesheet' type='text/css' />
</head>
<body>
<form action="aksi.php" method="POST">
<div class="container">
<div class="form-group">
<div class="col-sm-offset-4">
<h3>Recaptcha Google <a href="http://www.codingae.blogspot.com">Codingae</a></h3>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Nama</label>
<input type="text" name="nama" class="form-control">
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Komentar</label>
<textarea name="komentar" class="form-control"></textarea>
</div>
<div class="form-group">
<!-- data site-key isi dengan site key anda -->
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div>
</div>
<div class="form-group">
<input type="submit" value="Simpan" class="btn btn-sm btn-primary">
</div>
</div>
</form>
<script src="bootstrap.js"></script>
</body>
</html>
Kedua, kita buat file aksi.php dan copy paste script dibawah ini, tujuaanya adalah untuk memberikan aksi dari inputan file index.php yang sudah kita buat.
.
.
<?php
$nama = isset($_POST['nama']) ? trim(htmlentities($_POST['nama'])):'';
$komentar = isset($_POST['komentar']) ? trim(htmlentities($_POST['komentar'])):'';
/* optional -- untuk menampung nilai dari g-recaptcha-reponse dari method post index */
$captcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response']:'';
//masukkan secret key-nya berdasarkan secret key masig-masing saat create api key nya
$secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx';
$error = 'Gagal kirim form: periksa nama, komentar dan captcha nya';
if ($captcha != '' && $nama != '' && $komentar != '') {
$url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secret_key) . '&response=' . $captcha;
$recaptcha = file_get_contents($url);
$recaptcha = json_decode($recaptcha, true);
if (!$recaptcha['success']) {
echo "<script language='javascript'>
alert ('Mbok ya di isi dulu captcha nya bos')
top.location='index.php';
</script>";
} else {
echo "<script language='javascript'>
alert ('Selamat $_POST[nama] Komentar Anda Berhasil')
top.location='index.php';
</script>";
/*optional -- untuk mengintegrasikan dengan database*/
// mysql_query("INSERT INTO komen set nama='$nama',komentar='$komentar'") or die (mysql_error());
// header("location: index.php");
}
} else {
echo "<script language='javascript'>
alert ('Mbok ya di isi dulu captcha nya bos')
top.location='index.php';
</script>";
}Dengan mengikuti langkah-langkah dari awal hingga akhir, insyaallah cara ini bisa berhasil, karena saya sendiri mempraktekkannya juga berhasil, bisa dilihat link demo nya di bawah ini, dan apabila ingin versi lengkapnya dengan menggunakan database, bisa anda download dibawah ini file nya.
Berhubung saya menggunakan hosting gratisan, ya..maklumin aja ya kalau demonya agak sangat lemot..hehe
Referensi
- http://dannimoring.net/baca/memasang-recaptcha-google-dan-meresponnya
#HAPPYCODING #OPENSOURCEINMYLIFE
0 komentar:
Posting Komentar