learning by sample - gdi+ - captcha

w w w . B u k a n S e m b a r a n g . I n f o 2 0 1 1

Page 0

GDI+ : Creating CAPTCHA 2011

w w w . B u k a n S em b a r a n g . I n f o 2 0 1 1

GDI+ : Creating

CAPTCHA

Learning By Sample Series


Page 1


Foreword

Learning By Sample ?

So, why should I made this tutorial freely accessed by everyone ? Well, surely I

am just nobody, I also just another ordinary person with ordinary knowledge. However,

I always feel that some persons in the internet giving away their tutorial for free and I

feel being helped by them. Then, I remember one of my senior wisdom words : If you

want to be given more, then start to give more. And of course, I really believe those

words, since that I already proof it to be right all the time.

Also, Im not an English native speaker, however, I just try to improve my

English in any other way, especially in written format. Thus, I think writing is the best

practice to improve my English freely. However, you will find many grammatical errors

in my tutorial, so please send me comments and also suggestion to improve it.

Then, why the format using Learning By Sample series ? Is it really different with

other tutorials out there ? Ehm, I already wrote three books (in Indonesian) using this

kind of format, and many readers already contact me about how this format really help

them to learn from the scratch. So, why in the world Im not re-create it in English

format, right ? Eventhough actually, it is similar with Hands On Lab series which

already famous in Microsoft site previously.

All of my lesson also being designed as short samples and short time exercise.

Thus, I hope that each of tutorial series would take only at least 10-15 minutes

maximum to learn. Why keep it short ? Because many beginners (and even expert) will

find boring whenever they must keep studying more than 15 minutes (but you will

never get bored when you online in such time right ?).


Page 2


Another reason is just because many of samples in this series come up from my

lecturing task exercise. So, I just try to compile all my lab exercises in order to keep it

tidy and also reusable for my students. Thats why you will find many unsorted course

material inside these series, however, just take a seat and enjoy the ride !

Requirements

In this series, I try to give simple example about GDI+. So what is GDI+ anyway ?

GDI+ or GraphicsDrawing Interface is merely part of .NET Framework which entirely

purposed in manipulating graphics. However Im not going to make you understand

complex theory about this class. I just try to make you understand it in very simple and

stupid way.

All of my samples in this series use Visual Web Developer 2010 Express edition

however you can also do it all using Visual Studio. If you really want to follow this

series, then you should aware that basic programming knowledge is needed. You

should also familiar with ASP .NET especially for version 3.5 above.

FYI, Im a VB guy, so please dont complaint if I use VB entirely in this series. But

nowadays, theres no such useful things if we argue about language differences,

because I just try to share something that I know. So, if you dont like VB and want to

have another tutorial with your own favourit language, then Id be happy to read it.

Now, lets get started.


Page 3


Lets Get Started

1. First, ensure that you already open Visual Web Developer 2010 Express Edition

2. Create a newly blank website and give it a name

3. Now, lets create a new blank web page, in this sample we will have two web pages.

One page is merely a blank web page which is contain a procedure of Page_Load

that will generate captcha. Another web page will have simple test for capturing

Captcha random value in order to prove that the picture of Captcha has already

succeeded.

4. Next for the blank web page, named it as Captcha.aspx (you can also renamed it

later as you wish of course). Then, just double click at its blank page, and type this

code in Page_Load event.


Page 4


5. And surely dont forget to put GDI+ reference at the top of your code

6. So, whats really happen in that code ? Here is the explanation :

a. At first, we must create a Bitmap object and fill it with gold coloring noise. If

you want to have another glittering background, then just do experiment in

this step with your own favourite colour :


Page 5


b. Then create four random uppercase letter which will be drawn using black

colour at the Graphics object. Remember that uppercase letter is started

from ASCII character set number 65, thus if you want to have more variety

for your Captcha, just change the number inside the looping.

c. Afterward, we create the graphics using stream output so it doesnt need any

physical storage in its process. This stream output will be captured by the

other web page. And for the matching section in next created web page, we

use Session in order to take the random letters into it.


Page 6


7. Now lets create the demo web page. Just insert a new table inside it with 3 rows

and 2 columns.

8. Put a simple text and a Textbox in second row

9. Then put a Button and an empty text Label in last row. The label will hold the

message after user clicking the Button.

10. Now put your cursor at first row in second column, then change your view into

Source mode, and you will be headed into certain section of table data, so lets type

this small code :


Page 7


11. And the last step, we just double click the Button and type this testing Captcha

snippet :

12. Is it done yet ? Oh yes it is. So simple, so small. Now, lets try to execute this web

page :


Page 8


13. Well, thats what I like from ASP .NET, so simple, so quick and surely, so easy. Since

that this is still January in this brand new year, so I wish you great happines and

may your dream can be fulfilled in this year. See you in next series..

learning by sample - gdi+ - captcha

Documents