programming zona

Showing posts with label Complete Script. 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

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!

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

You might first want to read Basic Web
Scraping: Pulling Out Data From Google Search Results.

In the other Basic Web Scraping post we created a Simple Web Scraper that retrieved
Google’s Search Result Pages for some keyword and scraped the “Number
of Pages” indexed for the keyword. That was a good starting point in learning
web scraping, that’s why in this post we’re going to extend that
scraper to return one more information, “Related Keywords”.

Actually, Related Searches is a bunch of keywords that Google displays at the
bottom of search result pages. These are not displayed all the keywords that
you search for, but only for keywords that are somewhat broad. These “related
Searches” are the keywords that Google has evaluated to be related with
the one searched for.

To scrape this, we’d first need to analyze the HTML code of Google Search
Result. We need to find out where the Related Searches block is in the code,
typically it’d like:

<h2 class=r>Searches related to:<b> computer programming</b></h2><table 
  border=0 cellpadding=0 cellspacing=0 style="margin-top:6px"><tr 
  style="font-size:84%"><td style="padding:0 30px 6px 0" 
  valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=computer+programming+schools&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=1">computer 
  programming <b>schools</b></a></td><td>&nbsp;</td><td 
  style="padding:0 30px 6px 0" valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=computer+programming+careers&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=2">computer 
  programming <b>careers</b></a></td><td>&nbsp;</td><td 
  style="padding:0 30px 6px 0" valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=computer+programming+languages&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=3">computer 
  programming <b>languages</b></a></td><td>&nbsp;</td><td 
  style="padding:0 30px 6px 0" valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=computer+programming+c%2B%2B&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=4">computer 
  programming <b>c++</b></a></td><td>&nbsp;</td></tr><tr 
  style="font-size:84%"><td style="padding:0 30px 6px 0" 
  valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=computer+programming+information&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=5">computer 
  programming <b>information</b></a></td><td>&nbsp;</td><td 
  style="padding:0 30px 6px 0" valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=basic+computer+programming&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=6"><b>basic</b> 
  computer programming</a></td><td>&nbsp;</td><td 
  style="padding:0 30px 6px 0" valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=computer+programming+for+dummies&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=7">computer 
  programming <b>for dummies</b></a></td><td>&nbsp;</td><td 
  style="padding:0 30px 6px 0" valign=top><a href="/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=lS4&q=game+programming&revid=92395746&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=8"><b>game</b> 
  programming</a></td><td>&nbsp;</td></tr></table>

Remember our goal here is to find out certain footprint or consistent block
in the code (which always will be on every page we request), out of which the
needed data (Related Searches) can be pulled out.

Here, we can safely assume it to be:

<h2 class=r>Searches related to:

and

</td></tr></table>

So if we do a search for the above block in the code, we can easily pull the
required information.

Now, we can follow the following steps to scrape the required information:

Retrieve the required page.

Look for the consistent part of code that uniquely encloses or identifies
the required information. Scrape that block.

Pull the required data out.

Following is the code listing:


<html>

<head>

<title>Google Result Scraper</title>

</head>



<body>

<p align="center" style="font-size:500%"><font color="#0000FF">G</font><font color="#FF0000">o</font><font color="#FFFF00">o</font><font color="#0000FF">g</font><font color="#00FF00">l</font><font color="#FF0000">e</font> 


  <font size="2"><br />Result Scraper</font></p>



<?php

$s=$_GET['s'];




if(isset($s))

{

    //*******F I R S T   P A R T*********

    //Find the number of pages indexed for the searched term


    //*From previous part

    echo "<p><i>Search for $s</i></p>";



    $s=urlencode($s);




    $main_data=file_get_contents("http://www.google.com/search?hl=en&q=".$s."&btnG=Google+Search");

    

    //strip off HTML


    $data=strip_tags($main_data);

    //now $data only has text NO HTML



    //these have to ound out in the fetched data


    $find='Results 1 - 10 of about ';

    $find2=' for';



    //have text beginning from $find


    $data=strstr($data,$find);



    //find position of $find2

    //there might be many occurence


    //but it'd give position of the first one, 

    //which is what we want, anyway

    $pos=strpos($data,$find2);




    //take substring out, which'd be the number we want

    $search_number=substr($data,strlen($find), $pos-strlen($find));




    echo "Pages Indexed: $search_number";

    

    

    //********S E C O N D   P A R T*******


    //Find related searches

    

    echo "<h3>Related Keywords</h3>";



    //these have to found out in the fetched data


    $find='<h2 class=r>Searches related to:';

    $find2='</table>';

    $find3='<table border=0';




    //have text beginning from $find

    $data=strstr($main_data,$find);



    //find position of $find2


    //there might be many occurence

    //but it'd give position of the first one, 

    //which is what we want, anyway


    $pos=strpos($data,$find2);



    //take substring out, this is the block of data


    //that we'd fetch required information off of.

    $related_search_block=substr($data,strlen($find), $pos-strlen($find));


    

    //pull out the required data, stripping off "Searches related to.."

    $related_searches=strstr($related_search_block,$find3);


    //now we only have the keywords, of course formatted as is

    //with tables

    

    //strip off HTML, therefore taking off table and various


    //other formattings

    $related_searches=strip_tags($related_searches);

    //now we have the keywords (plain text) sepearted with 


    //each other using "&nbsp;'

    

    //explode it

    $keywords=explode('&nbsp;',$related_searches);


    //now we a nice array having all the keywords

    

    //print the keywords

    //nicely formatted using <ol> (ordered list)


    echo "<ol>";

    foreach($keywords as $keyword)

    {

        if($keyword!='' && $keyword!=' ')


        echo "<li>

                $keyword

             </li>";

    }

    echo "</ol>";    

}

else


{

?>



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

  <div align="center">

    <p> 

      <input name="s" type="text" id="s" size="50" />


      <input type="submit" name="Submit" value="Find Related Keywords" />

    </p>

  </div>

</form>

<p>&nbsp;</p>


<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>

  <?php

}

?>


</p>

<p align="right"><font size="2">by <a href="http://learning-computer-programming.blogspot.com/">Learning 

  Computer Programming</a></font></p>


</body>

</html>

Although this script is not very useful as it is (after all it’s meant
for learning purpose) you can make it more useful by extending it. one thing
that’d be nice is to hav it search for related keywords and again take
each keyword as a base for further searches. This way it’d be able to
supply you with many keywords related to the one entered. Best thing is, the
keywords will be Googly Related!

Previous Posts:

Web
Scraping: Pulling Out Data From Google Search Results

Creating
a Simple Form Validation Script Using JavaScript

Deigning
a Simple HTML Menu-Bar Using CSS

Blogger:
Method to Add ‘Link to This Post’ Widget on Your Posts

New
Working Method of Making Blogger Title Tags SEO Friendly

Performing Simple String Search Using PHP and MySQL

Here it is, a post after so long!

We see “Search” feature on almost all websites. Some employ third-party
tools (like Google Custom Search) while others, mostly CMS based websites, have
their own Search feature. The question now is, How do Search Feature Work? Answer
is, it (almost always) uses MySQL (or database server’s capability. You
all might be knowing that CMSs always store information in databases. So if
we can search that we can very well search the whole site!

So today we’re going to employ the feature of MySQL to perform simple
searching. As an example we’ll be creating an Online Phonebook to illustrate
this.

MySQL’s Simple Search (String Matching) Query

select [coulumn1] from [table] where [column2] like ‘$var%’

(For some of the basic SQL queries refer to MySQL
Commands)

we’ll take a simple example to illustrate the above query. Suppose we
have a table with the following rows and columns:

id	column-1	column-2
1	cat	there is a cat
2	dog	there is a dog
3	can	there is a cold drink can
4	campus	i like my college campus

Now look closely what different queries will return:

1. select * from table where column-1 like 'ca%'

id	column-1	column-2
1	cat	there is a cat
3	can	there is a cold drink can
4	campus	i like my college campus

2. select * from table where column-1 like 'cam%'

id	column-1	column-2
4	campus	i like my college campus

3. select * from table where column-1 like 'd%'

id	column-1	column-2
2	dog	there is a dog

4. select * from table where column-2 like 'cat%'

id	column-1	column-2
NULL	NULL	NULL

5. select * from table where column-2 like 'there%'

id	column-1	column-2
1	cat	there is a cat
2	dog	there is a dog
3	can	there is a cold drink can

At this time it is worth noting that, while we can use this method to search
for strings whose initial characters (words) are known but impossible to search
for words within a string (like in query no. 4).

That’s it, all we need to perform simple search is the above mentioned
query!

Below the source code for an Online Phone Book is given, it’d store phone
numbers along with names. Its search feature will search names column, hence
you can search for phone numbers by name.


<?php

/*Script: Onilne Phone Book with Search Facility

Date: 29-July-08

Copyright 2008 Arvind Gupta

http://learning-computer-programming.blogspot.com/




You are free to modify, change, publish or do whatever with this script

as long as this note is intact. Thank You!*/




//connect to MySQL

//provide your 'username' and 'pass'

$db=new mysqli('localhost','-USER-','-PASS-');


//if 'save' button was pressed

//user wants to store phone number

if(isset($_POST['save']))

{


    $name=trim($_POST['name']);

    $phno=trim($_POST['phno']);




    //if data supplied are not empty

    if(!$name=='' || !$phno=='')

    {


        //if this is the first time

        //and database is not craeted

        if(!$db->select_db('one'))


            //create the database

            $db->query('create database one');



        //select the databasw to work with


        $db->select_db('one');



        //if table is not craeted, craete it

        if(!$db->query('select * from phno'))


            $db->query('create table phno(id int auto_increment primary key, name varchar(50), phnum varchar(20))');




        //ready to insert data

        $db->query("insert into phno (name, phnum) values ('$name', '$phno')");


    }

}

//show the form

?>

<html>

<head>

<title>My Phone Book</title>


</head>



<body>

<h1>My Phone Book</h1>

<h2 style="background: #000; color: #fff;">Store New Phone Number</h2>


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

  <p style="background: #000; color: #fff;"><b>Search:</b>

    <input name="search" type="text" id="search">


    <input name="searchb" type="submit" id="searchb" value="Search">

  </p>

</form>

<p></p>

<form name="form1" id="form1" method="post" action="">


  <table width="250" border="0" cellspacing="0" cellpadding="0">

    <tr>

      <td width="83">Name</td>

      <td width="417"><input name="name" type="text" id="name" /></td>


    </tr>

    <tr>

      <td>Ph. No.</td>

      <td><input name="phno" type="text" id="phno" value=""></td>


    </tr>

    <tr>

      <td><input name="save" type="submit" id="save" value="Save" /></td>

      <td><input type="reset" name="Submit2" value="Reset" /></td>


    </tr>

  </table>

</form>

<h2 style="background: #000; color: #fff;">Previously Stored</h2>

<p>ORDER BY: <a href="?order=new">newest first </a>| <a href="?order=old">oldest


  first</a> | <a href="?order=az">a-z</a> | <a href="?order=za">z-a</a></p>

</body>

</html>


<?php

//----DISPALY PREVIOUSLY STORED PH. NUMBERS----



//create the SQL query as per the action

//if any ordering is selected


$order=$_GET['order'];

if($order=='new')

    $query="select * from phno order by id desc";


elseif($order=='old')

    $query="select * from phno order by id asc";

elseif($order=='az')


    $query="select * from phno order by name asc";

elseif($order=='za')

    $query="select * from phno order by name desc";


//or if user is searching

elseif(isset($_GET['searchb']))

    {

        $search=$_GET['search'];


        $query="select * from phno where name like '$search%'";

    }

else

    //use the default query


    $query="select * from phno";



//if database does not exits

//first time operation

if(!$db->select_db('one'))


{

    echo "<p><i>NONE</i></p>";

    exit;

}

//else

//do the query

$result=$db->query($query);


//find number of rows

$num_rows=$result->num_rows;

//if no rows present probably when

//searching


if($num_rows<=0)

    echo "<p><i>No Match Found!</i></p>";

//process all the rows one-by-one


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

{

    //fetch one row

    $row=$result->fetch_row();


    //print the values

    echo "<p><span style=\"font-size: 200%;\">$row[1]: </span> $row[2]</p>";

}

//close MySQL connection


$db->close();


?>

Performing Simple String Search Using PHP and MySQL

It might now be obvious that we took this phonebook example due to the limitation
of “like” query to search for words within a string. That’s
not to say it’s not possible. In fact searching within string, even longer
ones is very easy and efficient using MySQL’s built-in capability. But
we’ll discuss that in some future posts.

Previous Posts:

Creating
a Simple Form Validation Script Using JavaScript

Deigning
a Simple HTML Menu-Bar Using CSS

Blogger:
Method to Add ‘Link to This Post’ Widget on Your Posts

New
Working Method of Making Blogger Title Tags SEO Friendly

One
More Use of Web Cookies

programming zona

Pages

Designing Your Own Lightbox in Javascript

Image Generation Using PHP

Creating a Canvas

Drawing

How CAPTCHA Works? And a Simple Script in PHP

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

Performing Simple String Search Using PHP and MySQL

Check out this stream

Tags