programming zona

Showing posts with label Tricks. Show all posts

Image Generation Using PHP

alt="Image Generation Using PHP"
title="A Sample Image Generated Using Our Script"
src="http://one.arvind.googlepages.com/php_image_generation.png">

In one of the previous posts about href="http://learning-computer-programming.blogspot.com/2009/03/how-captcha-works-and-simple-script-in.html">CAPTCHA
Image Generation we made use of PHP’s image generation functions
but didn’t discuss about them. So, if you had any problems or just want
to know more, read on.

Creating and outputting images from PHP is very simple and easy. And
since PHP supports images in a number of different formats you can very
easily generate images in various formats such as JPEG, PNG, GIF etc.
Generating images involves the following steps:

Creating a canvas.

Drawing

Outputting the image.

Now, let’s look at each of the steps in detail.

Creating a Canvas

Creating a canvas is very easy, just use the following function:

style="color: rgb(0, 0, 187);">resource ImageCreateTrueColor style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">int $width style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $height style="color: rgb(0, 119, 0);">)style="color: rgb(0, 119, 0);">
style="color: rgb(0, 119, 0);">style="color: rgb(0, 0, 187);">

The capitalization doesn’t matter as with any function in PHP.

If you want your canvas to have some background color (default is
black) you can use the following function:

style="color: rgb(0, 0, 187);">bool ImageFill style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $x style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $y style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $color style="color: rgb(0, 119, 0);">)

Where color is to be first allocate using the following function:

style="color: rgb(0, 0, 187);">int ImageColorAllocate style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $red style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $green style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $blue style="color: rgb(0, 119, 0);">)

You can also use an existing image as base canvas for your new
image,
in that case create your image using the following function:

style="color: rgb(0, 0, 187);">resource ImageCreateFromJPEG style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">string $filename style="color: rgb(0, 119, 0);">)

Images in other format can also be used, for PNG → style="color: rgb(0, 0, 187);">ImageCreateFromPNG style="color: rgb(0, 119, 0);">(), GIF → style="color: rgb(0, 0, 187);">ImageCreateFromGIF style="color: rgb(0, 119, 0);">().

Drawing

After having set up the canvas, let’s draw something on it, say, a
rectangle. The rectangle drawing function with its argument list is:

style="color: rgb(0, 0, 187);">bool ImageRectangle style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $x1 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $y1 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $x2 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $y2 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $color style="color: rgb(0, 119, 0);">)

For allocating color use the style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">() function.

The following will create a square of size 10px X 10px having a blue
border:

style="color: rgb(0, 0, 187);">$img style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageCreateTrueColorstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">20style="color: rgb(0, 119, 0);">, 20style="color: rgb(0, 0, 187);">style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 0);">$blue style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 119, 0);">style="color: rgb(255, 128, 0);">style="color: rgb(0, 0, 187);">ImageRectanglestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">style="color: rgb(0, 0, 187);">style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$bluestyle="color: rgb(0, 119, 0);">);

You can browse the complete list of href="http://in.php.net/manual/en/ref.image.php">drawing (GD)
functions in PHP
here.

Some of the common ones are:

bool ImageLine style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $x1 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $y1 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $x2 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $y2 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $color )

style="color: rgb(0, 0, 187);">bool ImageEllipse style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $cx style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $cy style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $width style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $height style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $color style="color: rgb(0, 119, 0);">) style="color: rgb(0, 0, 187);">

style="color: rgb(0, 0, 187);">bool ImageArc style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $cx style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $cy style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $width style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $height style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $start style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $end style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $color style="color: rgb(0, 119, 0);">)

I think we should also discuss a little about one function, to draw
text on out image, it’s called the style="color: rgb(0, 0, 187);">ImageStringstyle="color: rgb(0, 119, 0);">() function having the
following form:

style="color: rgb(0, 0, 187);">bool ImageString style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $font style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $x style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $y style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">string $string style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">int $color style="color: rgb(0, 119, 0);">)style="color: rgb(0, 0, 187);">
style="color: rgb(0, 119, 0);">

Example:

style="color: rgb(0, 0, 187);">$img style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageCreateTrueColorstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">100style="color: rgb(0, 119, 0);">, 100style="color: rgb(0, 0, 187);">style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 0);">$red style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 0);">ImageStringstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">7style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">style="color: rgb(0, 119, 0);">style="color: rgb(0, 0, 187);">style="color: rgb(0, 119, 0);">style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">, style="color: rgb(221, 0, 0);">'Text'style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$redstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImageStringstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">, style="color: rgb(0, 119, 0);">style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">,style="color: rgb(0, 119, 0);"> style="color: rgb(0, 0, 187);">30style="color: rgb(0, 119, 0);">, style="color: rgb(221, 0, 0);">'Smaller Text'style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$redstyle="color: rgb(0, 119, 0);">);

The above lines will draw two string of text and the first one will
have a bigger font size. Higher number fonts (for $font)
are bigger.

All done,now we have a completed image that just needs to be sent to
the browser. For this we first need to tell the browser what type of
content we’re going to send and the data (image) itself. The following
two lines will do this:

style="color: rgb(0, 0, 187);">headerstyle="color: rgb(0, 119, 0);">(style="color: rgb(221, 0, 0);">'Content-Type: image/png'style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImagePNGstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">);

Similarly you can output image in other formats also, just replace style="color: rgb(0, 0, 187);">ImageJPEGstyle="color: rgb(0, 0, 187);"> with style="color: rgb(0, 0, 187);">ImageGIF or style="color: rgb(0, 0, 187);">ImagePNG etc. and the content-type
header to image/gif or image/png
accordingly.

After having output the image there is one more thing we should take
care of-freeing up the resources. You know images can take up
significant amount of resources which may affect the server and other
scripts running on it, so always use the following function:

style="color: rgb(0, 0, 187);">bool ImageDestroy style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">resource $image style="color: rgb(0, 119, 0);">)

The following example code illustrates all, what we have learnt:

style="color: rgb(0, 0, 187);"><?
style="color: rgb(255, 128, 0);">/********************************************************
 * DESCRIPTION: Exmple program to illustrate            *
 *              image generation using PHP.             *
 * AUTHOR:      Arvind Gupta                            *
 *              (http://www.arvindgupta.co.in)          *
 * DATE:        21-Mar-09                               *
 * WEBSITE:                                             *
 * http://learning-computer-programming.blogspot.com/   *
 ********************************************************/
// Set width and height
style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">200style="color: rgb(0, 119, 0);">;
style="color: rgb(0, 0, 187);">$heightstyle="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">200style="color: rgb(0, 119, 0);">;

style="color: rgb(255, 128, 0);">// Create canvas
style="color: rgb(0, 0, 187);">$img style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageCreateTrueColorstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$widthstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$heightstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Allocate colors
style="color: rgb(0, 0, 187);">$gray style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">200style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">200style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">200style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">$red style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">$green style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">$blue style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Fill background color
style="color: rgb(0, 0, 187);">ImageFillstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$graystyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Draw
style="color: rgb(0, 0, 187);">ImageRectanglestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">), style="color: rgb(0, 0, 187);">$redstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImageLinestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">5 style="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">), style="color: rgb(0, 0, 187);">$redstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImageEllipsestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">), style="color: rgb(0, 0, 187);">$greenstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImageArcstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">40style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">40style="color: rgb(0, 119, 0);">), style="color: rgb(0, 0, 187);">180 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">360style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$bluestyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImageArcstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">60style="color: rgb(0, 119, 0);">), (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">- style="color: rgb(0, 0, 187);">60style="color: rgb(0, 119, 0);">), style="color: rgb(0, 0, 187);">0 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">180style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$greenstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImageStringstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">7style="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">) - style="color: rgb(0, 0, 187);">50style="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">) - style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">, style="color: rgb(221, 0, 0);">'Image Created'style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$redstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImageStringstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">7style="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">) - style="color: rgb(0, 0, 187);">30style="color: rgb(0, 119, 0);">, (style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">/ style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">) + style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">, style="color: rgb(221, 0, 0);">'Using PHP'style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$greenstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Output
style="color: rgb(0, 0, 187);">headerstyle="color: rgb(0, 119, 0);">(style="color: rgb(221, 0, 0);">'Content-Type: image/png'style="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">ImagePNGstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Free-Up
style="color: rgb(0, 0, 187);">ImageDestroystyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$imgstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">?>

NOTE: You need to enable the “gd2” extension from “php.ini” for all
this to work. See style="font-style: italic;"
href="http://in.php.net/manual/en/image.setup.php">Installing/Configuring
Image Support in PHP for more information.

Okay, end of this post. Keep checking back for more.

How CAPTCHA Works? And a Simple Script in PHP

[For
this post I'm
presuming that you
are familiar with CAPTCHA, if not please read this style="font-style: italic;" href="http://en.wikipedia.org/wiki/Captcha"
target="_blank">Introduction
to CAPTCHA]

src="http://one.arvind.googlepages.com/generated_captcha.png"
alt="CAPTCHA Image Generated by Our Script"
title="CAPTCHA Image Generated by Our Script" height="53" width="150">Today
we are going to see
how CAPTCHA
(Completely Automated Public
Turing test to tell Computers
and Humans Apart) works and style="font-style: italic;"
href="http://computer.howstuffworks.com/captcha.htm" target="_blank">how
it minimizes automatic sign-up
of
formhref="http://computer.howstuffworks.com/captcha.htm" target="_blank">s.
We will also be creating a
simple CAPTCHA script in
PHP to illustrate this.

Basically CAPTCHA works in
the
following manner:

Create Random Value:
Some random string is generated, random values are often hard to guess
and predict.

Generate an Image:
Images are used as these are generally a lot harder to read for
computers while being nice and readable to humans. This is also the
most important step as simple text in images can be read (and CAPTCHA
cracked) quite easily. To make it difficult for them, developers employ
different techniques so that the text in the image becomes hard to read
for computers. Some create zig-zag lines for background while others
twist-and-turn individual characters in the image. Possibilities are
many and new techniques are being developed all the time as crackers
are always into finding ways to break them.

Store it: The random
string generated (which is also in the image) is stored for matching
the user input. The easiest way to do so is to use the style="font-style: italic;" href="http://in.php.net/session"
target="_blank">Session
variables.

Matching: After the
above step, the CAPTCHA image is generated and shown on some form which
we want to protect from being abused. The users fills in the form along
with the CAPTCHA text and submits it. Now we have the following:
1. All submitted form
  data.
2. CAPTCHA string
  (from form), input by user.
3. CAPTCHA string
  (real one, generated by us), from session variable. Session variable is
  generally used as it can keep stored values across page requests. Here,
  we needed to preserve stored values from one page (form page) to
  another (action page-that receives form data).

If both match, it's
okay otherwise not, in that case we can give the user a message that
the CAPTCHA they had entered was wrong and their form could not be
submitted. You could also ask them to verify it again.

The following image might
illustrates
this better:

src="http://one.arvind.googlepages.com/captch_generation_and_matching_STEPS.png"
alt="CAPTCHA Generation and Matching" align="middle" height="636"
width="417">

How CAPTCHA is Generated and Matched

From the above image it's
quite clear
that when someone requests the form page, the CAPTCHA text is
generated and sent back to requesting user, but only in the form of
an image. If the requester is a human he'd not have much difficulty
reading the image and inputting the text when asked but if it's a
bot it might face difficulties guessing whats in the image. In the
next step when we match the string generated and the one the user had
input, we can restrict automated form submissions.

The following is the code that does this, it'll just output
the CAPTCHA image to the browser when the script is requested:

style="color: rgb(0, 0, 187);"><?php
style="color: rgb(255, 128, 0);">/********************************************************
 * File:        captcha.php                             *
 * Author:      Arvind Gupta (www.arvindgupta.co.in)    *
 * Date:        12-Mar-2009                             *
 * Description: This file can be embedded as image      *
 *              to show CAPTCHA/                        *
 ********************************************************/

// The number of characters you
// want your CAPTCHA text to have
style="color: rgb(0, 0, 187);">definestyle="color: rgb(0, 119, 0);">(style="color: rgb(221, 0, 0);">'CAPTCHA_STRENGTH'style="color: rgb(0, 119, 0);">,style="color: rgb(0, 0, 187);"> 5style="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">/****************************
 *        INITIALISE        *
 ****************************/
// Tell PHP we're going to use
// Session vars
style="color: rgb(0, 0, 187);">session_startstyle="color: rgb(0, 119, 0);">();

style="color: rgb(255, 128, 0);">// Md5 to generate the random string
style="color: rgb(0, 0, 187);">$random_str style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">md5style="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">microtimestyle="color: rgb(0, 119, 0);">());

style="color: rgb(255, 128, 0);">// Trim required number of characters
style="color: rgb(0, 0, 187);">$captcha_str style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">substrstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$random_strstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">CAPTCHA_STRENGTHstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Allocate new image
style="color: rgb(0, 0, 187);">$width style="color: rgb(0, 119, 0);">= (style="color: rgb(0, 0, 187);">CAPTCHA_STRENGTHstyle="color: rgb(0, 119, 0);"> * style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">)+style="color: rgb(0, 0, 187);">10style="color: rgb(0, 119, 0);">;
style="color: rgb(0, 0, 187);">$height style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">20style="color: rgb(0, 119, 0);">;

style="color: rgb(0, 0, 187);">$captcha_img style="color: rgb(0, 119, 0);">=style="color: rgb(0, 0, 187);">ImageCreatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$widthstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$heightstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// ALLOCATE COLORS
// Background color-black
style="color: rgb(0, 0, 187);">$back_color style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Text color-white
style="color: rgb(0, 0, 187);">$text_color style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Line color-red
style="color: rgb(0, 0, 187);">$line_color style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">ImageColorAllocatestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">255style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">/****************************
 *     DRAW BACKGROUND &    *
 *           LINES          *
 ****************************/
// Fill background color
style="color: rgb(0, 0, 187);">ImageFillstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$back_colorstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Draw lines accross the x-axis
style="color: rgb(0, 119, 0);">for(style="color: rgb(0, 0, 187);">$i style="color: rgb(0, 119, 0);">=style="color: rgb(0, 0, 187);"> 0style="color: rgb(0, 119, 0);">; style="color: rgb(0, 0, 187);">$i style="color: rgb(0, 119, 0);">< style="color: rgb(0, 0, 0);">$widthstyle="color: rgb(0, 0, 0);">style="color: rgb(0, 119, 0);">;style="color: rgb(0, 0, 187);"> $istyle="color: rgb(0, 119, 0);"> +=style="color: rgb(0, 0, 187);"> 5style="color: rgb(0, 119, 0);">)
    style="color: rgb(0, 0, 187);">ImageLinestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$istyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$istyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">20style="color: rgb(0, 119, 0);">,style="color: rgb(0, 0, 187);"> $line_colorstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Draw lines accross the y-axis
style="color: rgb(0, 119, 0);">for(style="color: rgb(0, 0, 187);">$i style="color: rgb(0, 119, 0);">= style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">; style="color: rgb(0, 0, 187);">$istyle="color: rgb(0, 119, 0);"> < style="color: rgb(0, 0, 187);">20style="color: rgb(0, 119, 0);">;style="color: rgb(0, 0, 187);"> $istyle="color: rgb(0, 119, 0);"> += style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">)
    style="color: rgb(0, 0, 187);">ImageLinestyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$istyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 0);">$widthstyle="color: rgb(0, 0, 0);">style="color: rgb(0, 0, 187);">style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$i style="color: rgb(0, 119, 0);">,style="color: rgb(0, 0, 187);"> $line_colorstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">/****************************
 *      DRAW AND OUTPUT     *
 *          IMAGE           *
 ****************************/
// Draw the random string
style="color: rgb(0, 0, 187);">ImageStringstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">5style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">2style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$captcha_strstyle="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">$text_colorstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Carry the data (KEY) through session
style="color: rgb(0, 0, 187);">$_SESSIONstyle="color: rgb(0, 119, 0);">[style="color: rgb(221, 0, 0);">'key'style="color: rgb(0, 119, 0);">] = style="color: rgb(0, 0, 187);">$captcha_strstyle="color: rgb(0, 119, 0);">;

style="color: rgb(255, 128, 0);">// Send data type
style="color: rgb(0, 0, 187);">headerstyle="color: rgb(0, 119, 0);">(style="color: rgb(221, 0, 0);">"Content-type: image/jpeg"style="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Output image to browser
style="color: rgb(0, 0, 187);">ImageJPEGstyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">);

style="color: rgb(255, 128, 0);">// Free-Up resources
style="color: rgb(0, 0, 187);">ImageDestroystyle="color: rgb(0, 119, 0);">(style="color: rgb(0, 0, 187);">$captcha_imgstyle="color: rgb(0, 119, 0);">);
style="color: rgb(0, 0, 187);">?>

Okay, this it for this, in
the next one
we'll integrate this CAPTCHA script into one form and see how it
works. Till then goodbye!

Generating XHTML MP (WAP 2.0) Pages From PHP

alt="XHTML Mp Webpage Generation Using PHP"
title="XHTML MP (WAP 2.0) Webpage on a Cellphone"
src="http://one.arvind.googlepages.com/xhtml_mp_wap_site.jpg">Maybe
you guys know that I've been working on a service called
MyWapBlog.com which lets peoples create/manage mobile blogs using their
mobile phones. In the course of the development I've learnt great deal
about mobile websites and their dynamic generation, and I'm sharing a
bit of it here in this post.

How do you generate dynamic (X)HTML Pages using PHP? Simple:


<!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"  dir="ltr">
<head>
<title>Sometitle</title>
</head>
<body>
<h1>Hello</h1>
<p> style="color: rgb(0, 0, 187);"><?php  style="color: rgb(0, 119, 0);">echo  style="color: rgb(0, 0, 187);">date style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'h:i A, j-M-y' style="color: rgb(0, 119, 0);">);  style="color: rgb(0, 0, 187);">?></p>
</body>
</html>

And if you look at XHTML MP pages, their source look like the
following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
...
...

So you see these pages have a different document type and some
other differences. So will the following code work and generate a valid
WAP 2.0 page?:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sometitle</title>
</head>
<body>
<h1>Hello</h1>
<p> style="color: rgb(0, 0, 187);"><?php  style="color: rgb(0, 119, 0);">echo  style="color: rgb(0, 0, 187);">date style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'h:i A, j-M-y' style="color: rgb(0, 119, 0);">);  style="color: rgb(0, 0, 187);">?></p>
</body>
</html>

The answer is “NO”? Why? Because XHTML MP pages needs to be
served with a different Content-Type than what is generated by .PHP
files. Normally when you runa s PHP script and it outputs something,
the content is served with Content-Type: text/html

What is
Content-Type?

It is a header (information about a particular resource)
returned to browser when it requests something from a server. When you
request an image, the server return the image with the header
image/png, image/jpeg etc. letting the browser know how the returned
content is to be interpreted.

PHP scripts can return contents of any type (using
the header() function), from text to
images and PDFs to ZIPs. And therfore
if we want to generate XHTML MP pages, it can even do that
without doubt.

So what we need to do is, just change the above code a bit
adding a new line at the top so that the whole code look like the
following:


 style="color: rgb(0, 0, 187);"><?php header style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">"Content-type: application/vnd.wap.xhtml+xml; charset=UTF-8" style="color: rgb(0, 119, 0);">); style="color: rgb(0, 0, 187);">?>
 style="color: rgb(0, 0, 0);"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sometitle</title>
</head>
<body>
<h1>Hello</h1>
<p> style="color: rgb(0, 0, 187);"><?php  style="color: rgb(0, 119, 0);">echo  style="color: rgb(0, 0, 187);">date style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'h:i A, j-M-y' style="color: rgb(0, 119, 0);">);  style="color: rgb(0, 0, 187);">?></p>
</body>
</html>

This will tell the browser that the content we are going to
serve is of the type XHTML MP. We always use the charset UTF-8 for
these pages, which is also told to the requesting browser.

Now the big question is, why we didn't do this for normal HTML
pages. Why didn't we have to tell the browser that content is of the
type “text/html” when it was so? Because PHP does it for us! Yes
whenever we output anything from PHP scripts, the PHP interpreter
outputs the default header (text/html) automatically. Just as the
PHP interpreter finds anything in the script that needs to be
output, it first generates a header, the outputted content follows. For
example in the first script, the very first line (very first character
“<”) needs to be output to the browser. So before that, the PHP
interpreter sends a content type header (default – text/html).

Therefore, when we had to output our content with a different
header we had to make sure that it is done before PHP does it
automatically. Two headers cannot be valid.

This is it for this post, do check back soon for more new
posts. Till then, good bye!

Custom Tags Parsing Using Regular Expressions

In the last post, we had created a simple
custom tag parsing script using PHP string functions. In this post,
we are going to continue our discussion on custom tag parsing but rather using
Regular Expressions. Here we will see how regular expressions can used to parse
strings, we will also see where to and where not to use Regular Expressions.
Before continuing, I expect that you have a working knowledge of Regular Expressions
if not please first check out this
websites.

Let us first create the previous custom tag parsing script using expressions:


<form name="form1" method="get" action="">

  <p>

    <!-- textarea should display previously wriiten text -->


    <textarea name="content" cols="35" rows="12" id="content"><? if (isset($_GET['content'])) echo $_GET['content']; ?></textarea>


  </p>

  <p>

    <input name="parse" type="submit" id="parse" value="Parse">

  </p>

</form>

<?



if(isset($_GET['parse']))


{

    $content = $_GET['content'];

    //convert newlines in the text to HTML "<br />"


    //required to keep formatting (newlines)

    $content = nl2br($content);

    

    //PHP function 'eregi_replace' replaces all occurences of the expression with the one mentioned


    //'\\1' is the string matched (one in parentheses '()' in the regular expression

    //it's a 'eregi_replace' thing not PHP's




    $content = eregi_replace('\.b\.(.+)\./b\.', '<strong>\\1</strong>', $content);

    $content = eregi_replace('\.i\.(.+)\./i\.', '<i>\\1</i>', $content);


    

    //now the variable $content contains HTML formatted text

    //display it

    echo '<hr />';


    echo $content;

}

?>

But should we use regular expressions here, answer is NO, because, first regular
expressions run slower and they add a fair bit of complexity where the same
thing could have been done easily using just string functions.

The reason for me staring this post with something contradicting to the theme
of the post is because people tend to avoid regular expressions thinking that
the same thing can be done otherwise (I just gave them one more chance!). Well
it may be case sometimes but in many other cases where complex string manipulation
is required with efficiency there is but one choice, regular expressions. The
next example will illustrate this.

For this example we will parse ‘*’ (asterisk) and ‘_’
(underscore) for bolding and italicizing text (as in Google Talk / IM applications).
The following text:

Hello *World*. Hello _World_.

Will be parsed and displayed as:

Hello World. Hello World.

It is quite obvious that both tags’ start and end tags are the same.
Now let us see how this can be implemented (using regular expressions).


<form name="form1" method="get" action="">

  <p>

    <!-- textarea should display previously wriiten text -->


    <textarea name="content" cols="35" rows="12" id="content"><? if (isset($_GET['content'])) echo $_GET['content']; ?></textarea>


  </p>

  <p>

    <input name="parse" type="submit" id="parse" value="Parse">

  </p>

</form>

<?



if(isset($_GET['parse']))


{

    $content = $_GET['content'];

    //convert newlines in the text to HTML "<br />"


    //required to keep formatting (newlines)

    $content = nl2br($content);

    

    //match anything between the tags but not the tag itself


    //otherwise '*hello* world *hello*'

    //will be print 'hello* world *hello' in bold

    //and not 'hello(in bold) world hello(again in bold)'




    $content = eregi_replace('\*(.[^*]+)\*', '<strong>\\1</strong>', $content);

    $content = eregi_replace('\_(.[^_]+)\_', '<i>\\1</i>', $content);


    

    //now the variable $content contains HTML formatted text

    //display it

    echo '<hr />';


    echo $content;

}

?>

If we try to implement this using string functions it will take quite a lot
more lines of extra coding but I leave that to you.

Previous Posts:

Basic
“Custom Tags” Parsing Script

Simple
File Uploading Script in PHP

Creating
a Simple Countdown Timer Using JavaScript II

Creating
a Simple Countdown Timer Using JavaScript

Evaluating/Executing
PHP Code at Run-Time Using eval() Function

Basic "Custom Tags" Parsing Script

Today we are going to create a basic Custom Tags parsing script that will parse
special symbols (tags) in text for formatting purpose. Just like writing <b>BOLD</b>,
a web browser parses it as “BOLD” in bold letters, same way our
script will parse tags created by us. One very popular example of custom tag
parsing for formatting purpose is, BBCode which most of the bulletin boards
use to let users format their posts.

This will be a basic example of parsing custom tags so we will only be parsing
two tags. One will convert the enclosing text into bold and other will be used
for italics. After understanding the basic idea, you can easily add more tags
according to your needs and can also use it wherever necessary. One of its good
use will be in Shout Boxes that we had designed a few months back.

Though many would like the use of Regular
Expressions for parsing, we will not be using them here. For the sake
of simplicity, we will be using only the basic string manipulation functions
available in PHP.

If you look at the code below, you can see an array (2D) holding our custom
tags. Here we’ll be having four information for each tag. Start tag, end
tag (both defined by us), HTML start tag and HTML end tag. To make this more
clear, let’s suppose we want to parse the text “[b]Text[/b]”
so that it’s displayed as “Text” in bold. Our start (custom)
tag will be [b], end tag will be [/b], HTML start
tag will be <b> and HTML end tag will be </b>.

As we will be parsing two different custom tags, we have eight elements in
the array. If you want to add more tags, add four elements for each tag, just
like the way the others are. No need to change anything else.

The code:


<form name="form1" method="get" action="">

  <p>

    <!-- textarea should display previously wriiten text -->


    <textarea name="content" cols="35" rows="12" id="content"><? 
if (isset($_GET['content'])) echo $_GET['content']; ?></textarea>


  </p>

  <p>

    <input name="parse" type="submit" id="parse" value="Parse">

  </p>

</form>

<?



if(isset($_GET['parse']))


{

    $content = $_GET['content'];

    //convert newlines in the text to HTML "<br />"


    //required to keep formatting (newlines)

    $content = nl2br($content);

    

    /* CUSTOM TAGS

    -----------

    */




    //For Tag 1

    $tag[0][0] = '[b]';

    $tag[0][1] = '[/b]';


    $tag[0][2] = '<strong>';

    $tag[0][3] = '</strong>';




    //For Tag 2    

    $tag[1][0] = '[i]';

    $tag[1][1] = '[/i]';


    $tag[1][2] = '<i>';

    $tag[1][3] = '</i>';




    //count total no. of tags to parse

    $total_tags = count($tag); //2 for now


    

    //parse our custom tags adding HTML tags instead

    //which a browser can understand

    for($i = 0; $i<$total_tags; $i++)


    {    

        $content = str_replace($tag[$i][0],$tag[$i][2],$content);


        $content = str_replace($tag[$i][1],$tag[$i][3],$content);


    }

    

    //now the variable $content contains HTML formatted text

    //display it

    echo '<hr />';


    echo $content;

}

?>

The code is pretty straightforward. Isn’t it!

Previous Posts:

Simple
File Uploading Script in PHP

Creating
a Simple Countdown Timer Using JavaScript II

Creating
a Simple Countdown Timer Using JavaScript

Evaluating/Executing
PHP Code at Run-Time Using eval() Function

Blogger:
Changing Templates without Loosing Widget

Creating a Simple Countdown Timer Using JavaScript II...Using getElementById() Method

Using getElementById(id) Method

Speaking of yesterday’s post, it had the following problems:

1. It could not easily be embedded into an existing page.

2. It could not be placed wherever we wanted it to be
nor it could be aligned or styled easily.

3. Rather than updating the same number to countdown it
showed a series of numbers as countdown proceeded.

Well all these problems can easily be solved by one of JavaScript’s powerful
method getElementById(). This is documents’s
method which can be used to access HTML entities within JavaScript with the
help of their IDs (which is unique).

For example we can access the HTML entity and its values etc. with the ID one
as:

document.getElementById("one")

The HTML object may be defined like below:

<p id="one">some text</p>

You get!

OK, how can this be used to solve our problems, let’s see.

As we know, the HTML entities such as <p>,<div>, <span>
etc. can be placed anywhere very easily. They can also be styled and aligned
perfectly. So if we could print the timer in one of these, it’d be the
most efficient technique. How? Using getElementById().

The body of tags such as <p>, <div> or <span>
can be accessed via JavaScript as:

document.getElementById("one").innerHTML

e.g.: If we execute the following code:

document.getElementById("one").innerHTML="hello!!";

it’d be same as having the following HTML tag:

<p id="one">hello!!"</p>

This way two of our problems have been solved. What about the third one? It
too has been solved, if you look closely.

For example when you write:

document.getElementById("one").innerHTML="First";

And then:

document.getElementById("one").innerHTML="Second";

The <p> would be displayed as having the text “Second”.

OK, below is the completed code:


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>

  <head>
  <title>JavaScript Countdown Timer</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script language="JavaScript" type="text/JavaScript">

  //to store timeout ID
  var tID;
  function tickTimer(t,id)
  {
    //if time is in range
    if(t>=0)
    {
      document.getElementById(id).innerHTML=t;
      t=t-1;
      tID=setTimeout("tickTimer('"+t+"','"+id+"')",1000);
    }
    //stop the timeout event

    else
    {
      killTimer(tID);
      document.getElementById(id).innerHTML="Time Out!!";
    }
  }

  //function to stop the timeout event
  function killTimer(id)
  {
    clearTimeout(id);
  }
  </script>

  <!--style the ID -->

  <style>
  #timer {
    background: #000;
    color: #fff;
    font-size: 20px;
  }
  </style>
  </head>
  <!--pass the id to timer has to attached to -->
  <body onLoad="tickTimer(9,'timer')" onUnload="killTimer(tID)">

  <p>Timer: <span id="timer"></span></p>
  </body>
  </html>

It depends on what you intend regarding which tag you should use to place to
timer. If you want it to be inline with some text use <span>.
<p> would make it to be in a different paragraph.

So in this post we saw a very powerful method getElementById()
which can be used to access HTML objects and manipulate them. Check back for
more!

Previous Posts:

Creating
a Simple Countdown Timer Using JavaScript

Evaluating/Executing
PHP Code at Run-Time Using eval() Function

Blogger:
Changing Templates without Loosing Widgets

How
Do I Color-Highlight PHP Source Codes

Web
Scraping: Gathering "Related Searches" Keyword Data From Google
Search Results

Creating a Simple Countdown Timer Using JavaScript

Some JavaScripting today! We are going to create a simple countdown timer using
JavaScript. What’s the use? Umm, I really am not creative enough to find
any of its perfect use but it could be used somewhere, sometimes…and there
is no harm in learning something even when there seems to be no potential use
of it. Who knows maybe you’d need it sometime to add creativity to your
web pages. Of course some of the techniques that we are going to use will be
needed at many times, so you won’t wanna miss this!

This time , let’s start off with the code first:


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>JavaScript Countdown Timer</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script language="JavaScript" type="text/JavaScript">
  //to store timeout ID
  var tID;
  function tickTimer(t)
  {
    //if time is in range
    if(t>=0)
    {
      document.writeln(t);
      t=t-1;
      tID=setTimeout("tickTimer('"+t+"')",1000);
    }
    //stop the timeout event
    else
    {
      killTimer(tID);
      document.writeln("<br /> <font color='#ff0000'>Time Out!</font>");
    }
  }

  //function to stop the timeout event
  function killTimer(id)
  {
    clearTimeout(id);
  }
  </script>
  </head>

  <body onLoad="tickTimer(10)" onUnload="killTimer(tID)">
  </body>
  </html>

Now let’s analyze the code:

1. We have created two functions tickTimer()
and killTimer().

2. We have defined two event handlers onLoad
and onUnload which’d call the respective functions at respective
events.

When the code above (as a web page) is executed, it’d proceed as:

1. First the onLoad event calls tickTimer
function with the initial time, the countdown timer has to be ticked down form.

2. The function displays the initial time remaining,
does some calculations and calls a method setTimeout().

3. The setTimeout function now calls the
function passed, every 1000 milliseconds 1 second). On setting the timeout event
this method returns a unique ID which would be used to stop the timeout event
when needed (onUnload or when timer has ticked down to 0).

One thing you may get confused with is how without loop or anything as such,
are we able to count the timer down. Answer is, because JavaScript is an event
driven language. First, we are defining a body onLoad event to
make a call to some function as the web page is loaded. Second, we are defining
a timeout event that would call the function itself (recursive call) every one
second indefinitely until the timeout event is cleared. We are clearing the
timeout either when the countdown timer reaches 0 or when the page gets unloaded
(onUnload).

Had JavaScript not been an event driven language, we’d need to have a
loop to check when a second has elapsed and update the variable accordingly.
Luckily we don’t have to!

But as it is, can we embed or place the above timer in a web page the way we
want, styled and perfectly aligned. Or how about a single number getting counted
down rather than showing all the numbers as the countdown proceeds. We’ll
see that in the next post!

Previous Posts:

Evaluating/Executing
PHP Code at Run-Time Using eval() Function

Blogger:
Changing Templates without Loosing Widgets

How
Do I Color-Highlight PHP Source Codes

Web
Scraping: Gathering "Related Searches" Keyword Data From Google
Search Results

Web
Scraping: Pulling Out Data From Google Search Results

Evaluating/Executing PHP Code at Run-Time Using eval() Function

OK, so today we are going to discuss about one of the interesting functions
of PHP. The eval() function. It is interesting in that it can evaluate/execute
PHP code from inside scripts. This means, the eval() function can evaluate PHP
code at run-time. The code itself in turn may be generated at run-time hence
it could be used to execute code that may not initially be a part of the script.

Let’s see some examples:eval("echo 'hello';");

Which is equivalent to:

echo 'hello';

One more example:


<?php



$n=10;

$code='';



for($i=0;$i<$n;$i++)


    $code.="echo $i;";



eval($code);



?>

Here the code to be evaluated is generated at run-time too.

The code to be evaluated could be stored somewhere (like in a file or in database)
and later can be retrieved and evaluated.

As an example, below I’m providing the source code which would create
a page that could be used to run PHP code. It’d provide a HTML textarea
for you to type in the code which would then be executed and displayed. Be warned
however that this kind of page is extremely vulnerable and an open invitation
to hackers as anybody can use it to execute code on the server it is put in.
so DON’T put this onto tour or anybody else’s server you have access
to. It’d also be advisable to get off the internet before even trying
it on your local server and delete the file afterwards. Believe me I’ve
experienced hackers trying to access even local servers!

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <h2>Run Script</h2> <form name="form1" id="form1" method="get" action=""> <p> <textarea name="code" cols="50" rows="15" id="code"></textarea> </p> <p> <input type="submit" name="Submit" value="Execute!" /> </p> </form> <p><strong>Output:<br /> -----------</strong></p> <?php if(isset($_GET['Submit'])) { $code=$_GET['code']; eval($code); } ?> </body> </html>