Diartikel ini kita akan belajar cara generate captcha untuk keperluan pengecekkan saat login apakah dilakukan manusia atau bot dan sebagainya menggunakan ASP .Net dan bahasa C#. Disini saya menggunakan Visual Studio 2012 saat membuatnya, pastikan versi visual studio yang teman-teman gunakan minimal versinya sama atau diatasnya.
Pertama
Klik menu file -> new web site -> ASP.NET Empty web site. Jangan lupa pilih bahasa atau template nya Visual C#
Tentukan folder dimana Project akan disimpan, jika muncul gambar dibawah ini berarti direktori atau folder yang dipilih tidak kosong, ketikkan nama folder baru misal Captcha
Kedua
Karena pilihan project kita empty web site, maka hanya terdapat file web.config yang terbentuk otomatis. Untuk menambah page atau halaman baru, klik kanan pada nama Project atau solution nya kemudian pilih add -> add new item/new file -> web form dan beri nama misal Default.aspx.
Ketiga
Kita buat folder untuk menyimpan Class dan sebagainya dengan cara klik kanan pada nama Project atau solution nya pilih add -> asp.net folder -> app_code, lihat gambar.
Ke Empat
Difolder App_Code tersebut, klik kanan lalu add new item -> class -> beri nama RandomImage.cs.
Class RandomImage berfungsi untuk melakukan generate image dengan huruf dan angka.Karena kodenya bukan saya yang menulis dan terlalu panjang, source code lengkap bisa didownload diakhir artikel :) .
Tambahkan page baru di Project atau solution lagi dengan cara klik kanan kemudian pilih add -> add new item -> beri nama CaptchaImage.aspx. Pastikan tampilan file dan folder anda sudah seperti berikut.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//tambahan
using System.Drawing.Imaging;
public partial class CaptchaImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Create a random code and store it in the Session object.
this.Session["CaptchaImageText"] = GenerateRandomCode();
// Create a CAPTCHA image using the text stored in the Session object.
RandomImage ci = new RandomImage(this.Session
["CaptchaImageText"].ToString(), 300, 75);
// Change the response headers to output a JPEG image.
this.Response.Clear();
this.Response.ContentType = "image/jpeg";
// Write the image to the response stream in JPEG format.
ci.Image.Save(this.Response.OutputStream, ImageFormat.Jpeg);
// Dispose of the CAPTCHA image object.
ci.Dispose();
}
// Function to generate random string with Random class.
private string GenerateRandomCode()
{
Random r = new Random();
string s = "";
for (int j = 0; j < 5; j++)
{
int i = r.Next(3);
int ch;
switch (i)
{
case 1:
ch = r.Next(0, 9);
s = s + ch.ToString();
break;
case 2:
ch = r.Next(65, 90);
s = s + Convert.ToChar(ch).ToString();
break;
case 3:
ch = r.Next(97, 122);
s = s + Convert.ToChar(ch).ToString();
break;
default:
ch = r.Next(97, 122);
s = s + Convert.ToChar(ch).ToString();
break;
}
r.NextDouble();
r.Next(100, 1999);
}
return s;
}
}
Terakhir
Buka file Default.aspx, modifikasi dan ketikkan kode sebagai berikut :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Yudha's World - Captcha</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Yudha's World - Captcha
<table>
<tr style="height:30px">
<td colspan="2"><asp:Label ID="lblmsg" runat="server" Font-Bold="True" ForeColor="Red" Text=""></asp:Label></td>
</tr>
<tr style="height:30px">
<th>
<asp:Label ID="Label1" runat="server" Text="Ketikkan Captcha"></asp:Label>
</th>
<td>
<asp:TextBox ID="txtimgcode" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="~/CaptchaImage.aspx"/>
</td>
</tr>
</table>
<asp:Button CssClass="btn btn-primary" ID="Button1" runat="server" Text="Cek" OnClick="BtnCek_Click" />
</div>
</form>
</body>
</html>
Selanjutnya
Buka file Default.aspx.cs, tambahkan kode sebagai berikut setelah function page_load :
protected void BtnCek_Click(object sender, EventArgs e)
{
try
{
if (txtimgcode.Text == this.Session["CaptchaImageText"].ToString())
{
lblmsg.Text = "Captcha yang anda masukkan BENAR.";
txtimgcode.Text = "";
}
else
{
lblmsg.Text = "Captcha yang anda masukkan SALAH.";
txtimgcode.Text = "";
}
}
catch (Exception ex)
{
string pesan = ex.ToString();
lblmsg.Text += pesan;
}
}
Hasil Akhir
Cek dengan input yang benar
maka akan muncul keterangan :Captcha yang anda masukkan BENAR.
Catatan : jika anda bingung kenapa teks captcha berubah itu karena page me-reload ulang :)
Jika input salah maka akan muncul keterangan :Captcha yang anda masukkan SALAH dan page atau halaman melakukan reload.
Default.aspx.cs
if (txtimgcode.Text == this.Session["CaptchaImageText"].ToString())
saat tombol cek diklik maka melakukan pengecekkan apakah kode yang diinput user sesuai dengan kode captcha hasil generate yang disimpan di session.
Default.aspx
<asp:Image ID="Image1" runat="server" ImageUrl="~/CaptchaImage.aspx"/>
untuk menampung hasil render image dari generate random text yang dilakukan oleh CaptchaImage saat melakukan load. Perhatikan ImageUrl yang mengacu pada page CaptchaImage.aspx
Download source code lengkap : Yudha's World - Captcha (4KB)
Semoga Bermanfaat
rerefensi : -
Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.
.jpg)
mantabs, thanks gan tutorialnya
BalasHapusEkspedisi Pengiriman Barang