programming zona

Showing posts with label Example Programs. Show all posts

Designing Your Own Lightbox in Javascript

In nowadays web 2.0 world use of Lightbox is very common. While Lightbox, fancybox (similar to the former) are great scripts and have wide uses, creating a script similar to these is never a bad idea. If you learn, read on else use of one of those scripts, they’re great and easy-to-use.

For those of you who haven’t heard about the script or don’t know what they do, see the following image:

Screenshot og Blackbox - Our own Lightbox clone

Chances are, you might surely have seen it somewhere or the other. These scripts are generally used to display some content in kind of like a dialog box (modal one, for those of you who're geeks) while the rest of the content gets blackened. Looks great? Yes it does!

Okay, for those of you still here I wanna confess that I didn’t put enough time knowing how those scripts actually work. I just got an idea myself the other day and thought it just might work. This is not to say that I myself have invented some new way, it’s just that I don’t know how those scripts work but I know one way that gives similar results.

As you can see from the above image, there is not much to a simple Lightbox clone, we have a (1) Blackening effect (2) The content box.

Blackening Effect: For this I’ll create a “div” element on the fly and set its properties such that it has a black color and some transparency, a large z-index means floats on top of the rest of the content and back content (with normal z-index) cannot be interacted with anymore. We’ll fill the current screen with this “div” which will require us to place this element at the topmost and leftmost coordinates relative to the current viewable area. This will be (0, 0) when the page isn’t scrolled at all.

We’ll also have to size the element to have it span the whole viewable area of the browser.

These two things will make sure that no matter where we have scrolled in a page and whatever be the window size, this black overlay element always covers the current viewport.

2. Content Box: A nicely styled box with a close button is all we need. We’ll place it at the center of the screen. Since we have calculated the topmost and leftmost coordinates relative to the current viewport and we also have the current viewport’s dimension, we can easily position this at the center, no brainer! We’ll give this a z-index larger than the black overlay element such that this is at the top of everything.

Besides this, we’ll also have to take care that these two elements move along with the page in case user tries to scroll the page when the our lightbox is open. This will make sure that (1) black overlay element always fills the screen (2) content box is always at the center.

Sounds pretty simple? Well, it is! It’ll call this Blackbox, you may call it whatever you feel like. Here is the code (Demo here):


<!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>Blackbox - A very simple Lightbox clone</title>

<script type="text/javascript">
/*
 * Script: Blackbox (very simple Lightbox clone)
 * Author: Arvind Gupta (contact@arvindgupta.co.in)
 * Date: 14-Nov-09
 * Copyright: 2009 Arvind Gupta

 *            You may freely use this script wherever
 *         you want and in whatever way you wish
 *         but please don't remove this note.
 *
 */

// OBJECTS

// Black overlay element
var darkbox;
// Content box
var content;

// FUNCTIONS
function init()
{
   // Set "onScroll" event handler

   window.onscroll = scroll_box;
}

function open()
{
   // Create elements
   darkbox = document.createElement('div');
   content = document.createElement('div');

   // Style them with the existing ids
   darkbox.id = 'darkbox';
   content.id = 'content';

   // FILL CONTENT BOX

   // Have the close button
   content.innerHTML = '<a style="position: absolute; top: -30px; right: -30px; text-decoration: none;" href="javascript:close();"><img style="border: none;" src="fancy_closebox.png" /></a>';
   // The main content

   content.innerHTML += '<div id="main_content"><h1>Hello</h1><p>Hello World!<br /> How is this looking?</p></div>';

   // Add these elements to the body

   document.body.appendChild(darkbox);
   document.body.appendChild(content);

   // Calciulate coordinates and such
   var pos_top = document.documentElement.scrollTop
   var pos_left = document.documentElement.scrollLeft;
   var screen_width = document.documentElement.clientWidth;
   var screen_height = document.documentElement.clientHeight;

   // Place the "darkbox" element and give it the size

   darkbox.style.top = pos_top + 'px';
   darkbox.style.left = pos_left + 'px';
   darkbox.style.height = screen_height + 'px';
   darkbox.style.width = screen_width + 'px';

   // Now place the content box at the center
   content.style.left = (pos_left + (screen_width / 2.0) - (content.offsetWidth / 2.0)) + 'px';
   content.style.top = (pos_top + (screen_height / 2.0) - (content.offsetHeight / 2.0)) + 'px';
}


function scroll_box ()
{
   // If "Darkbox" open
   if(darkbox != null)
   {
      // Find new topmost, leftmost position w.r.t the current viewport
      // Also find new window size

      var pos_top = document.documentElement.scrollTop
      var pos_left = document.documentElement.scrollLeft;
      var screen_width = document.documentElement.clientWidth;
      var screen_height = document.documentElement.clientHeight;

      // Positions elements accordingly
      darkbox.style.top = pos_top + 'px';
      darkbox.style.left = pos_left + 'px';
      darkbox.style.height = screen_height + 'px';
      darkbox.style.width = screen_width + 'px';

      content.style.left = (pos_left + (screen_width / 2.0) - (content.offsetWidth / 2.0)) + 'px';
      content.style.top = (pos_top + (screen_height / 2.0) - (content.offsetHeight / 2.0)) + 'px';
   }
}


function close()
{
   // Delete elements
   document.body.removeChild(darkbox);
   document.body.removeChild(content);
}
</script>

<style>
#darkbox {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0.6;
   filter:alpha(opacity=60);
   background: #000;
}

#content {
   position: absolute;
   z-index: 1001;
   background: #fff;
   border: 10px solid #000;
   width: 500px;
   height: 300px;
}
#content #main_content {
   overflow: auto;
   width: 500px;
   height: 300px;
}

</style>
</head>

<body onload="init();">
<a href="javascript:open()">Open Box</a>
</body>
</html>

Related Posts:

A Simple Pong Game using JavaScript

Moving (Positioning) an Image Using JavaScript

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

Creating a Simple Countdown Timer Using JavaScript

Creating a Simple HTML Form Validation System Using JavaScript

A Simple Pong Game using JavaScript

Pong Game in JavaScript Screenshot

Having the knowledge of moving images using JavaScript, we’ll be creating a small Ping Pong game as an example for this post.

Today we’ll learn to do a few new things in JavaScript:

1. Executing some code every specified time interval (for game loop).

2. Tracking and using mouse movements.

3. Attaching code (function) to events.

Game Theory

As you should be knowing, in this game there is one ball and two paddles at two ends. One is user-controlled the other, for this example, is CPU controlled. User has to move the paddle in order not to let the ball pass through, CPU also has to do the same thing. Whoever’s side the ball passes through looses the game.

There are a few objects which can interact with each other, these are ball, paddles, walls. Let’s see the various interactions that can take place between these:

Ball Hitting Upper/Lower Wall – Ball will bounce off.

Ball Passing Through Either Side – Player or CPU, depending on whose side ball passed through, will loose the game.

Ball Hitting Paddle – It’ll bounce off

We’ll need to take care of these events:

Page Load – Game objects will be initialized

Game Start – Mouse click on the player paddle will start the game.

Mouse Movements – Inside the game area (a div), the paddle will follow the y-position of the mouse. Paddle however should not get past the boundaries.

CPU Paddle – The paddle will follow the ball by moving up/down depending the relative position of the ball. We’ve added a little intelligence by only moving the paddle while ball is coming towards it. This will make the movement as well as the game look more real.

Code

NOTE: Put two files ball_small.png, paddle.png (Right-Click "Save As") in the same directory the script is in.


<!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>Pong Game In JavaScript</title>

<style>
#box
{
   width: 500px;
   height: 300px;
   margin: auto;
   border: 5px solid #ccc;
   position: relative;
   overflow: hidden;
}

.ob
{
   position: absolute;
   border: 0px;
}
</style>
<script type="application/javascript">

// CHANGE THESE, IF REQUIRED
var Speed = 5; // Speed of ball (pixels/step)
var CPUSpeed = 5; // Speed of CPU Paddle (pixels/step)

// Short references to objects
var paddle1;
var paddle2;
var ball;
var box;
var msg;


// For internal use
var dx, dy; // Speed in x and y directions
var ballX, ballY; // x and y positions of ball
var playerY; // y position of player paddle (x fixed)

var cpuY; // y position of CPU paddle (x fixed)
var iID; // To store ID of set interval used to clear it when required

// Attach a function to onLoad event
window.onload = Init;

// INITIALIZE GAME OBJECTS
function Init()
{
   // Make short refrences to objects

   paddle1 = document.getElementById('paddle1');
   paddle2 = document.getElementById('paddle2');
   ball = document.getElementById('ball');
   box = document.getElementById('box');
   msg = document.getElementById('msg');

   // Initial values
   ballX = (box.offsetWidth / 2) - (ball.offsetWidth / 2);
   ballY = (box.offsetHeight / 2) - (ball.offsetHeight / 2);
   cpuY = (box.offsetHeight / 2) - (paddle2.offsetHeight / 2);
   playerY = (box.offsetHeight / 2) - (paddle1.offsetHeight / 2);
   dx = dy = Speed;

   paddle1.style.left = 20 + 'px';
   paddle1.style.top = playerY + 'px';
   paddle2.style.left = box.offsetWidth - (20 + paddle2.offsetWidth) + 'px';
   paddle2.style.top = cpuY + 'px';
   ball.style.left = ballX + 'px';
   ball.style.top = ballY + 'px';

   // Show message

   msg.innerHTML = '<h2>Click on Paddle to Start Game.</h2>';
}

// START GAME
function Start()
{
   // Attach a function to onmousemove event of the box
   box.onmousemove = MovePaddle;
   // Call 'GameLoop()' function every 10 milliseconds

   iID = setInterval('GameLoop()', 10);

   msg.innerHTML = '';
}

// MAIN GAME LOOP, CALLED REPEATEDLY
function GameLoop()
{
   // MOVE BALL
   ballX += dx;
   ballY += dy;

   // See if ball is past player paddle

   if(ballX < 0)
   {
      clearInterval(iID);
      Init();

      box.onmousemove = '';

      msg.innerHTML = '<h2>You Loose!<br/>Click on Paddle to Re-Start Game.</h2>';
   }

   // See if ball is past CPU paddle

   if((ballX + ball.offsetWidth) > box.offsetWidth)
   {
      clearInterval(iID);
      Init();

      box.onmousemove = '';

      msg.innerHTML = '<h2>You Win!<br/>Click on Paddle to Re-Start Game.</h2>';
   }

   // COLLISION DETECTION

   // If ball hits upper or lower wall
   if(ballY < 0 || ((ballY + ball.offsetHeight) > box.offsetHeight))
      dy = -dy; // Make x direction opposite

   // If ball hits player paddle

   if(ballX < (paddle1.offsetLeft + paddle1.offsetWidth))
      if(((ballY + ball.offsetHeight) > playerY) && ballY < (playerY + paddle1.offsetHeight))
         dx = -dx;

   // If ball hits CPU paddle
   if((ballX + ball.offsetWidth) > paddle2.offsetLeft)
      if(((ballY + ball.offsetHeight) > cpuY) && ballY < (cpuY + paddle2.offsetHeight))
         dx = -dx;

   // Place ball at calculated positions

   ball.style.left = ballX + 'px';
   ball.style.top = ballY + 'px';

   // MOVE CPU PADDLE
   // Move paddle only if ball is coming towards the CPU paddle
   if(dx > 0)
   {
      if((cpuY + (paddle2.offsetHeight / 2)) > (ballY + ball.offsetHeight)) cpuY -= CPUSpeed;
      else cpuY += CPUSpeed;

      paddle2.style.top = cpuY + 'px';
   }
}


// TO MOVE PLAYER PADDLE ON MOUSE MOVE EVENT
function MovePaddle(e)
{
   // Fetch y coordinate of mouse
   var y = (e.clientY - (box.offsetTop - document.documentElement.scrollTop));
   // Here, (box.offsetTop - document.documentElement.scrollTop) will get the relative
   // position of "box" w.r.t to current scroll postion

   // If y below lower boundary (cannot go above upper boundary - 
   // mousemove event only generated when mouse is inside box
   if(y > (box.offsetHeight - paddle1.offsetHeight))
      y = (box.offsetHeight - paddle1.offsetHeight);

   // Copy position
   playerY = y;
   // Set position

   paddle1.style.top = y + 'px';
}
</script>
</head>

<body bgcolor="#fff">
<h1 align="center">Pong Game Example in JavaScript</h1>

<div id="box">
<img class="ob" id="paddle1" src="paddle.PNG" onclick="javascript: Start()"/>

<img class="ob" id="paddle2" src="paddle.PNG" />
<img class="ob" id="ball" src="ball_small.PNG" />

</div>
<div id="msg" align="center"></div>
</body>
</html>

Related Posts:

Moving (Positioning) an Image Using JavaScript

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

Creating a Simple Countdown Timer Using JavaScript

Creating a Simple HTML Form Validation System Using JavaScript

Moving (Positioning) an Image Using JavaScript

Screenshot

In this post we’re going to learn how we can move an image around using JavaScript. We’ll have four control links (Left, Right, Up, Down) that’ll move the image.

Reading along you’ll learn:

What the absolute and relative positions do

How some JavaScript function can be invoked automatically on page load

How JavaScript can be used to manipulate the “style” properties of elements

How JavaScript can be used to change these properties

Okay, now let’s start!

THEORY

We’re going to have the following elements in the page:

A container (div)

An image

Control links

Container

The container would be styled to have a size of 500px by 300px. It’d have position: relative which makes anything inside to be positioned with respect to this container. It’s done to make the image move independent of the placement of the container. We’ll also make the overflows from the container to be “hidden”.

Image

The image would be given position: absolute which means it can be positioned with absolute (left (x), top (y)) values. Normally images (like other elements) are positioned, aligned, wrapped accordingly with other elements. The absolute position however, gives us the power to place the image (or other element) freely.

Control Links

Control Links will be used to invoke the functions to move the image in the respective directions.

Misc.

The functions being called by the Control links will manipulate the position of the image using one document.getElementbyId() function.

This function is used to reference elements in the document uniquely by using their IDs (which are supposed to be unique for each element). The style properties of elements are referenced as:

document.getElementById(<ID>).style.<STYLE-NAME>

We’ll be using the onload event of the body element to invoke the Init() function initially on page load.

<body onload="javascript:Init()">

WORKING

When the page loads, the function Init() is getting called which sets the initial position of the image.

When a control link is clicked, the respective coordinate (x or y) is modified and the new value is set in the following line:


document.getElementById('img1').style.left = x + 'px';

document.getElementById('img1').style.top = y + 'px';

CODE

<!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>JavaScript: Moving an Image</title>
<script type="application/ecmascript">

// --CHANGE THESE IF REQUIRED--
// Initial x-position of image
var x = 200;
// Initial y-position of image
var y =100;
// Pixels to move in each step
var inc = 10;

function Init()
{
   document.getElementById('img1').style.left = x + 'px';
   document.getElementById('img1').style.top = y + 'px';
}
function moveRight()
{
   x += inc;

   document.getElementById('img1').style.left = x + 'px';
}

function moveLeft()
{
   x -= inc;

   document.getElementById('img1').style.left = x + 'px';
}

function moveUp()
{
   y -= inc;

   document.getElementById('img1').style.top = y + 'px';
}

function moveDown()
{
   y += inc;

   document.getElementById('img1').style.top = y + 'px';
}
</script>


<style>
#box
{
   width: 500px;
   height: 300px;
   position: relative;
   margin: 20px auto 0px auto;
   border: 5px outset #000;
   overflow: hidden;
}

.image
{
   position: absolute;
   z-index: 100;
}
</style>
</head>

<body onload="javascript:Init()">
<div id="box"><img class="image" id="img1" src="ball.png"/></div>
<a href="javascript:moveLeft()">Left</a>
<a href="javascript:moveUp()">Up</a>
<a href="javascript:moveDown()">Down</a>
<a href="javascript:moveRight()">Right</a>
</body>
</html>

NOTE: An image with name "ball.png" must be there in the same directory as this file for the above ocde to work "as-is".

Related Posts:

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

Creating a Simple Countdown Timer Using JavaScript

Creating a Simple HTML Form Validation System Using JavaScript

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 XML Feeds (RSS, Atom) Using PHP

RSS/ATOM feeds are very common these days and almost all
Content Management Systems (CMS) can generate it. But in the case when
you want to generate it yourself or just want to learn how you can,
read on!

Both RSS and ATOM feeds are written in eXtensible Markup
Language (XML) standard markup. Not just standard markups, you
also need to be sure of what
and how you put data in those markup elements (tags). For all this
refer to the feed specifications of href="http://cyber.law.harvard.edu/rss/rss.html" target="_blank">RSS
and target="_blank">ATOM. XML itself is very strict
and
the standard specifications makes it even harder to generate valid
feeds. And moreover, why re-invent the wheel when we can have it –
ready-made.

The solution I'm referring to here is, to use a third-party
Library – Universal FeedWriter. FeedWriter is a PHP class written by
Anis uddin Ahmad that can dramatically ease-off feeds (both
RSS and Atom) generation. You can download this library from href="http://www.phpclasses.org/browse/file/22275.html"
target="_blank">here.

Every feed should have at least the following data:

Feed title

URL(of the website whose feed is it)

Description

Item

Title

Date

URL (of the item, sometimes called permalink)

Description (body of the item)

The RSS feed for this will look something like:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/">

<channel>
<title>RSS Title</title>
<link>URL of Website</link>
<description><![CDATA[Description]]></description>
<language>en-us</language>
<pubDate>Sat, 07 Mar 2009 06:55:15 +0530</pubDate>

<item>
<title>Item Title</title>
<link>Item URL (Permalink)</link>
<pubDate>Sat, 07 Mar 2009 06:55:15 +0530</pubDate>
<description><![CDATA[Item Description]]></description>
</item>
</channel>
</rss>

Using FeddWriter abstracts working with and generating XML
tags manually, you just tell FeedWriter what kind of Feed (RSS/Atom and
version) you want; give it the data you want your feed to have and
you’re done! The following code snippet shows you how exactly:

 style="color: rgb(0, 0, 187);"><?php
 style="color: rgb(255, 128, 0);">// Include the class
 style="color: rgb(0, 119, 0);">include( style="color: rgb(221, 0, 0);">"FeedWriter.php" style="color: rgb(0, 119, 0);">);

 style="color: rgb(255, 128, 0);">// Creating an instance of FeedWriter class.
// The parameter tell what type of
// feed you want.
 style="color: rgb(0, 0, 187);">$MyFeed  style="color: rgb(0, 119, 0);">= new  style="color: rgb(0, 0, 187);">FeedWriter style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">RSS2 style="color: rgb(0, 119, 0);">);

 style="color: rgb(255, 128, 0);">// Setting feed elements
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setTitle style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'My RSS Feed' style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setLink style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'http://www.example.com' style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setDescription style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'Test feed generated by Universal FeedWriter.' style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setChannelElement style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'pubDate' style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">date style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">DATE_RSS style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">time style="color: rgb(0, 119, 0);">()));

 style="color: rgb(255, 128, 0);">// Create a FeedItem.
 style="color: rgb(0, 0, 187);">$Item  style="color: rgb(0, 119, 0);">=  style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">createNewItem style="color: rgb(0, 119, 0);">();

 style="color: rgb(255, 128, 0);">// Add elements to the feed item.
 style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setTitle style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'Item Title' style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setLink style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'http://www.example.com/item1.html' style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setDate style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">mktime style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">10 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">20 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">0 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">3 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">6 style="color: rgb(0, 119, 0);">, style="color: rgb(0, 0, 187);">2008 style="color: rgb(0, 119, 0);">));
 style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setDescription style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'Item Description. Can contain <b>HTML</b>.' style="color: rgb(0, 119, 0);">);

 style="color: rgb(255, 128, 0);">// Now add the item to the feed.
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">addItem style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">);

 style="color: rgb(255, 128, 0);">// Now genarate the feed.
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">genarateFeed style="color: rgb(0, 119, 0);">();
 style="color: rgb(0, 0, 187);">?>

So you see how easy it is to generate a feed with the data we
had.

Feeds generally don’t just have one item so let’s see
something more
real. The following code will generate a feed having ten items:

 style="color: rgb(0, 0, 187);"><?php
 style="color: rgb(0, 119, 0);">include( style="color: rgb(221, 0, 0);">"FeedWriter.php" style="color: rgb(0, 119, 0);">);

 style="color: rgb(0, 0, 187);">$MyFeed  style="color: rgb(0, 119, 0);">= new  style="color: rgb(0, 0, 187);">FeedWriter style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">RSS2 style="color: rgb(0, 119, 0);">);

 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setTitle style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'My RSS Feed' style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setLink style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'http://www.example.com' style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setDescription style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'Test feed having Ten Items.' style="color: rgb(0, 119, 0);">);

 style="color: rgb(0, 0, 187);">$time  style="color: rgb(0, 119, 0);">=  style="color: rgb(0, 0, 187);">mktime style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">10 style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">10 style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">0 style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">3 style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">5 style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">2009 style="color: rgb(0, 119, 0);">);
 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setChannelElement style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'pubDate' style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">date style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">DATE_RSS style="color: rgb(0, 119, 0);">,  style="color: rgb(0, 0, 187);">$time 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);">0 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);">10 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);">$Item  style="color: rgb(0, 119, 0);">=  style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">createNewItem style="color: rgb(0, 119, 0);">();

     style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setTitle style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'Item'  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);">1 style="color: rgb(0, 119, 0);">) .  style="color: rgb(221, 0, 0);">' Title' style="color: rgb(0, 119, 0);">);
     style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setLink style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'http://www.example.com/item'  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);">1 style="color: rgb(0, 119, 0);">) .  style="color: rgb(221, 0, 0);">'.html' style="color: rgb(0, 119, 0);">);
     style="color: rgb(255, 128, 0);">// Have different dates for each item
    // Each will have one day gap for the
    // publishing time
     style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setDate style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">$time  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);">24  style="color: rgb(0, 119, 0);">* ( style="color: rgb(0, 0, 187);">60  style="color: rgb(0, 119, 0);">*  style="color: rgb(0, 0, 187);">60 style="color: rgb(0, 119, 0);">))));
     style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">setDescription style="color: rgb(0, 119, 0);">( style="color: rgb(221, 0, 0);">'Item '  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);">1 style="color: rgb(0, 119, 0);">) .  style="color: rgb(221, 0, 0);">' Description.' style="color: rgb(0, 119, 0);">);

     style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">addItem style="color: rgb(0, 119, 0);">( style="color: rgb(0, 0, 187);">$Item style="color: rgb(0, 119, 0);">);
}

 style="color: rgb(0, 0, 187);">$MyFeed style="color: rgb(0, 119, 0);">-> style="color: rgb(0, 0, 187);">genarateFeed style="color: rgb(0, 119, 0);">();
 style="color: rgb(0, 0, 187);">?>

One thing to note here is why we are using the feed’s
generation time to be same as that of the latest item rather
than the current time when it is generated well, it’s because the feed
gets updated only as and when new items are added (remains same at
other time) and at the very same time. Therefore just because the feed
is being generated dynamically at each request doesn’t mean it is
“generate” at that time.

programming zona

Pages

Designing Your Own Lightbox in Javascript

A Simple Pong Game using JavaScript

Game Theory

Code

Moving (Positioning) an Image Using JavaScript

THEORY

Container

Image

Control Links

Misc.

WORKING

CODE

Image Generation Using PHP

Creating a Canvas

Drawing

How CAPTCHA Works? And a Simple Script in PHP

Generating XML Feeds (RSS, Atom) Using PHP

Check out this stream

Tags