Membangun Captcha dan formulir kontak Anda sendiri

Indonesian (Bahasa Indonesia) translation by Muhammad Hakim Almadani (you can also view the original English article)

Pernah mendapatkan hit dengan spam melalui formulir kontak di situs pribadi Anda? Nah, di sini adalah tutorial singkat tentang cara untuk membangun sebuah captcha kustom untuk menjaga orang jahat keluar.

Langkah 1: captcha.php dan sesi

Pertama kita perlu untuk membangun Halaman PHP baru dan Simpan sebagai captcha.php. Kemudian, di luar script baru, membuka sesi server dengan menggunakan perintah session_start(). Juga, kode variabel kosong bernama "string". Kami akan menggunakan variabel ini kemudian terus teks captcha dihasilkan secara acak.

<?php

session_start();

$string = '';

?>

Langkah 2: String acak

Selanjutnya, kita harus menulis untuk loop yang akan menghasilkan string acak. Kita kemudian akan mengambil string acak ini dan mengaturnya dalam sebuah variabel sesi yang disebut "random_code".

<?php

session_start();

$string = '';

for ($i = 0; $i < 5; $i++) {
  $string .= chr(rand(97, 122));
}

$_SESSION['random_code'] = $string;

Ini untuk loop, Anda akan melihat, menambahkan karakter ascii huruf, yang menggunakan fungsi chr(), ke variabel $string kami pada setiap lulus. Contoh saya menghasilkan 5 karakter, tetapi Anda dapat menyesuaikan jumlah itu dengan mengubah "$i

Langkah 3: Folder penyimpanan dan warna

Ini adalah mana tutorial mendapat sedikit lebih rumit. Selanjutnya kita perlu menentukan folder penyimpanan untuk font yang kita akan menggunakan, membangun gambar captcha dasar, dan mendefinisikan warna yang kita akan gunakan untuk mengisi gambar kami. Ini adalah semua kode yang sederhana, tapi mereka fungsi yang tidak digunakan sering oleh pengembang.

$dir = 'fonts/';

$image = imagecreatetruecolor(170, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$color = imagecolorallocate($image, 200, 100, 90); // red
$white = imagecolorallocate($image, 255, 255, 255);

Pada awalnya, aku hanya mendefinisikan folder font yang menyimpan dalam variabel $dir. Variabel $image, yang mana kita menggunakan fungsi imagecreatetruecolor() adalah uang yang tempat. Ini adalah di mana gambar captcha dasar dibangun menggunakan PHP. Fungsi imagecreatetruecolor() mengembalikan pengidentifikasi gambar yang mewakili sebuah gambar hitam ukuran tertentu. Seperti yang Anda lihat, saya membuat gambar saya 170px lebar x 60 piksel tinggi.

Akhirnya, pada langkah ini, saya mendefinisikan beberapa warna kita dapat menggunakan dalam gambar akhir kami. Angka-angka yang dikirimkan ke fungsi imagecolorallocate() adalah nilai-nilai RGB.

Langkah 4: Membangun gambar

Selanjutnya, kita akan mengisi gambar dengan persegi panjang putih, yang akan bertindak sebagai gambar latar belakang, dan kemudian menambahkan string acak teks kami untuk gambar.

imagefilledrectangle($image,0,0,200,100,$white);
imagettftext($image, 30, 0, 10, 40, $alt, $dir."arial.ttf", $_SESSION['rand_code']);

Fungsi imagefilledrectangle() menarik persegi panjang di gambar tertentu. Empat nomor berlalu dalam fungsi mewakili koordinat untuk sudut persegi panjang. Pastikan persegi panjang Anda menggambar di sini lebih besar dari gambar dasar. Anda akan melihat persegi panjang saya adalah lebar 200px dan tinggi 100px.

Imagettftext() Mari kita menambahkan teks ke gambar menggunakan benar jenis font. Dan Anda akan melihat bahwa fungsi yang dapat menangani beberapa parameter. Saya ingin menyorot semua parameter yang berbeda dalam fungsi ini, tapi Anda hanya perlu mengingat beberapa.

imagettftext($image, $font_size, $angle, $x, $y, $color ,$font_file ,$text);

Setelah Anda membandingkan saya contoh kode segera di atas, Anda akan melihat bahwa nilai-nilai yang dilewatkan ke fungsi imagettftext() mudah untuk memahami. Pertama adalah sudut gambar, maka ukuran font, teks, x dan y koordinat teks (mulai dengan sudut kiri atas), warna teks, lokasi dari font file, dan akhirnya teks (string acak kami).

Langkah 5: Gambar Final

Selanjutnya, dengan script kami, kita perlu memberitahu browser kita apa jenis gambar kami menggunakan, dengan fungsi header(), dan membangun gambar akhir. Ini fungsi sangat lurus ke depan, tidak banyak yang dapat menjelaskan tentang mereka. Juga, jangan lupa untuk menutup skrip PHP.

header("Content-type: image/png");
imagepng($image);

?>

Setelah melihat pratinjau di browser, skrip Anda harus menghasilkan gambar png yang berisi beberapa teks. Jika Anda menerima kesalahan, pastikan skrip Anda dapat link ke file font .ttf Anda, dan bahwa Anda telah menciptakan variabel kosong $string dari sebelumnya dalam tutorial.

Ini adalah kode akhir halaman captcha.php apa yang akan terlihat seperti:

<?php
session_start();

$string = '';

for ($i = 0; $i < 5; $i++) {
	// this numbers refer to numbers of the ascii table (lower case)
	$string .= chr(rand(97, 122));
}

$_SESSION['rand_code'] = $string;

$dir = 'fonts/';

$image = imagecreatetruecolor(170, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$color = imagecolorallocate($image, 200, 100, 90); // red
$white = imagecolorallocate($image, 255, 255, 255);

imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir."arial.ttf", $_SESSION['random_code']);

header("Content-type: image/png");
imagepng($image);
?>

Langkah 6: contact.php

Membangun halaman kontak PHP baru dan Simpan sebagai contact.php. Halaman ini akan berisi formulir kontak yang akan memvalidasi menggunakan captcha kami.

Langkah 7: HTML & CSS

Mari kita tambahkan sebuah form HTML untuk halaman contact.php kami. Memberi perhatian khusus terhadap sumber gambar yang kita gunakan untuk teks acak.

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
	<p><input type="text" name="name" /></p>
	<p><input type="text" name="email" /></p>
	<p><textarea name="message"></textarea></p>
	<img src="captcha.php"/>
	<p><input type="text" name="code" /></p>
	<p><input type="reset" name="submit" value="Send" /></p>
</form>

Anda juga dapat menambahkan sedikit berikut CSS ke halaman Anda untuk membuatnya terlihat lebih baik daripada default.

<style type="text/css">
form {
	margin:0;
	padding:0;
}
input {
	padding:2px;
	width:200px;
}
textarea {
	padding:2px;
	width:200px;
	height:100px;
}
.button {
	width:60px;
}
p {
	margin:0 0 5px 0;
	padding:0;
}
.error {
	color:#FF0000;
	margin:0 0 10px 0;
}
.accept {
	color:#339966;
	margin:0 0 10px 0;
}
</style>

Langkah 8: Memvalidasi dengan PHP

Sekarang bahwa pesanan kami dibangun dan kami memiliki keluar menampilkan gambar captcha, kita perlu lakukan sekarang adalah memvalidasi formulir, pastikan untuk menyertakan beberapa aturan validasi untuk keluar captcha.

Berikut adalah apa validasi akhir PHP akan terlihat seperti. Dua fitur penting yang diperlukan untuk proses validasi ini adalah session_start(); dan elemen if($_POST ['kode'] == $_SESSION['rand_code']) . Ini memungkinkan kita untuk mengakses keluar variabel sesi dan memeriksa terhadap teks seseorang menulis di bidang kode formulir kami. Tanpa ini, captcha kami akan tidak berguna.

<?php
session_start();

if(isset($_POST['submit'])) {
	
	if(!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['message']) && !empty($_POST['code'])) {
	
		if($_POST['code'] == $_SESSION['rand_code']) {
		
			// send email
			$accept = "Thank you for contacting me.";
		
		} else {
		
			$error = "Please verify that you typed in the correct code.";
		
		}
		
	} else {
	
		$error = "Please fill out the entire form.";
	
	}

}
?>

Jika Anda tahu banyak tentang PHP, sisa validasi ini harus mudah untuk memahami. Kami pada dasarnya mencari untuk memastikan tidak ada kolom formulir kami kosong. Jika mereka kosong, kesalahan yang dilemparkan untuk memastikan informasi input pengguna kami. Anda juga akan melihat aku tidak memvalidasi Apakah email juga terbentuk, yang merupakan sesuatu yang Anda harus harus mencakup. Email validasi dilakukan menggunakan string biasa.

Berikut adalah apa yang file contact.php akhir Anda akan terlihat seperti. Aku termasuk CSS, yang Anda mungkin ingin drop di file CSS-nya sendiri.

<?php

session_start();

if(isset($_POST['submit'])) {
	
	if(!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['message']) && !empty($_POST['code'])) {
	
		if($_POST['code'] == $_SESSION['rand_code']) {
		
			// send email
			$accept = "Thank you for contacting me.";
		
		} else {
		
			$error = "Please verify that you typed in the correct code.";
		
		}
		
	} else {
	
		$error = "Please fill out the entire form.";
	
	}

}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us</title>
<style type="text/css">
form {
	margin:0;
	padding:0;
}
input {
	padding:2px;
	width:200px;
}
textarea {
	padding:2px;
	width:200px;
	height:100px;
}
.button {
	width:60px;
}
p {
	margin:0 0 5px 0;
	padding:0;
}
.error {
	color:#FF0000;
	margin:0 0 10px 0;
}
.accept {
	color:#339966;
	margin:0 0 10px 0;
}
</style>
</head>

<body>

<?php if(!empty($error)) echo '<div class="error">'.$error.'</div>'; ?>
<?php if(!empty($accept)) echo '<div class="accept">'.$accept.'</div>'; ?>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
	<p><input type="text" name="name" /> Name</p>
	<p><input type="text" name="email" /> Email</p>
	<p><textarea name="message"></textarea></p>
	<img src="captcha.php"/>
	<p><input type="text" name="code" /> Are you human?</p>
   <p><input type="submit" name="submit" value="Send" class="button" /></p>
</form>

</body>
</html>

Anda sudah selesai

Setelah validasi Anda bekerja, formulir kontak captcha Anda harus bekerja hebat. Apa yang pikiran Anda? Terima kasih banyak untuk membaca.

Ikuti kami di Twitter, atau berlangganan NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.