Technology Blog

Animated GIFs and PHP

2008-08-30T08:26:00.000-07:00

I'm surprised i don't see much documentation about animated GIF creator online (maybe i'm just not looking hard enough!). I have listed here what i have found online-

MagickWand for PHP

MagickWand for PHP is a native PHP interface to the new ImageMagick MagickWand API.

It is an almost complete port of the ImageMagick C API, excluding some X-Server related functionality, and progress monitoring.

The functionality of the MagickWand API is pretty much unparalelled in the PHP imaging world, allowing the PHP programmer read/write/manipulate access to multiple image formats, along with vector drawing, pixel-level manipulation, and special effects capabilities and more.

ImageMagick (in general) has a fairly high learning curve, but the new MagickWand API, on which this extension is based, is a thousand times clearer, and as a result, easier to understand and manipulate.

It is still complex, to a degree, but it it is capable of some amazing stuff, so it is well worth the time and effort to learn it.

However, it is in many ways still beta software. Both the ImageMagick MagickWand C API, and MagickWand for PHP are apparently stable, but they still need testing, so take that into account.

MagickWand for PHP tries to stay up to date with the latest releases of ImageMagick, so if your PHP compilation fails with an error in some "zif_" function about references to a function that can't be found, you most likely need to update your ImageMagick to the last version MagickWand is known to have successfully compiled against (see INSTALL in this directory for that information).

The last-known-good ImageMagick version, as well as the required ImageMagick version, will always be indicated at the top of the INSTALL file in this directory, and notations will be put in the ChangeLog file as well.

Check the ChangeLog and INSTALL files for more necessary information. The ./docs folder contains the manual.

The ./demo folder contains 3 files (so far):
demo.gif : an example script-generated animated GIF file
demo.php : the script which generates the demo.gif file
demo_c.php : the same script with very detailed comments

So, intrepid traveller, forth, to the journey!

Introduction

The following demonstration script is also included in the MagickWand for PHP distribution.

The code was highlighted using PHP's built-in highlight_file() function.

Image Result

The following code produces an image similar to the following:

"Similar", not identical, as the colors of the rounded rectangles are randomized.

CODE

/* * MagickWand for PHP :: Demonstration program * * Author: Ouinnel Watson * Date: December 2004 * * WARNING * By installing and executing this script, you accept any and all * responsibility for any and all damages of any kind which occur as * a result of the installation and/or operation of this script, and * agree to indemnify the author (Ouinnel Watson) against any liability * and/or responsibility for any and all damages resulting from the * installation, execution or operation of this script. * * Description: The following script demonstrates the inate capabilities of * MagickWand for PHP by creating an animated GIF. * MagickWand for PHP capabilities used: * 1) vector drawing (shapes, text, colors) * 2) default font * 3) unique color model * 4) addition of random noise * 5) several special effects methods * 6) setting of single frame display time * 7) and much more... */ /* General Settings */ $noise_frames = 5; /* The amount of frames/images of random noise to be created at the start of the animation */ $noise_delay = 20; /* The length of time (in hundredth's of a second) that each noisy frame will be displayed */ $cnt_down_start = 3; /* The starting number of the countdown */ $cnt_down_delay = 50; /* The length of time (in hundredth's of a second) that each countdown frame will be displayed */ $width = 140; /* The width of each frame in the animation */ $height = 70; /* The height of each frame in the animation */ $x_int = $width / 10; /* The distance, along the x axis, between the edges of the various rounded rectangles to be drawn */ $y_int = $height / 10; /* The distance, along the y axis, between the edges of the various rounded rectangles to be drawn */ $x1 = $x_int; /* The x ordinate of the top-left corner of the bounding rectangle in which the first rounded rectangle will be drawn */ $y1 = $y_int; /* The y ordinate of the top-left corner of the bounding rectangle in which the first rounded rectangle will be drawn */ $x2 = $width - $x_int; /* The x ordinate of the bottom-right corner of the bounding rectangle in which the first rounded rectangle will be drawn */ $y2 = $height - $y_int; /* The x ordinate of the bottom-right corner of the bounding rectangle in which the first rounded rectangle will be drawn */ $x_radius = $y_radius = 10; /* The radius of the corners of the rounded rectangles to be drawn */ $font_size = 30; /* The initial text annotation font size in pixels */ $swirl_deg_start = 0; /* The initial degree amount that the last countdown frame will be swirled */ $swirl_deg_end = 360; /* The maximum degree amount that the last countdown frame will be swirled */ $swirl_deg_int = 60; /* The swirl loop degree increment value */ $swirl_delay = 10; /* The length of time (in hundredth's of a second) that each swirled frame will be displayed */ $num_morph_frames = 5; /* The number of intermediary frames between images to be morphed */ $morph_delay = 20; /* The length of time (in hundredth's of a second) that each morphed frame will be displayed */ $logo = 'MagickWand for PHP'; /* The 1st string to be displayed */ $welcome_msg = 'The future awaits...'; /* The 2nd string to be displayed */ $mgck_wnd = NewMagickWand(); /* Create a new MagickWand resource -- "holds" the images */ $bg_color= NewPixelWand(); /* Creates a new PixelWand resource -- contains information on an individual unit of color; opaque black by default */ $white = NewPixelWand('white'); /* Does the same as above, except that the PixelWand's color is set to white */ $pxl_wnd = NewPixelWand(); $drw_wnd = NewDrawingWand(); /* Creates a new DrawingWand resource -- holds vector drawing commands */ $txt_wnd = NewDrawingWand(); /* The following loop iterates $noise_frames times, doing the following each time: 1) Creates a new image using MagickNewImage() 2) Adds MW_LaplacianNoise type random noise to the newly created image 3) Sets the amount of time the image is displayed to $noise_delay hundredths of a second, using MagickSetImageDelay() The user function checkWandError() checks the return type of API functions for explicit FALSE (via the "===" operator), which indicates an error occurred. */ for ($i = 0; $i < $noise_frames; $i++) { checkWandError(MagickNewImage($mgck_wnd, $width, $height, $bg_color), $mgck_wnd, __LINE__); checkWandError(MagickAddNoiseImage($mgck_wnd, MW_LaplacianNoise), $mgck_wnd, __LINE__); checkWandError(MagickSetImageDelay($mgck_wnd, $noise_delay), $mgck_wnd, __LINE__); } /* Retrieve the current image from $mgck_wnd in a new MagickWand, and assign it to $pre_morph_wnd. */ $pre_morph_wnd =& checkWandError(MagickGetImage($mgck_wnd), $mgck_wnd, __LINE__); /* Set variables to random values between 0 and 255, for use in an ImageMagick color string RGB triple (e.g. rgb(255, 255, 255) == white). */ $red = mt_rand(0, 255); $green = mt_rand(0, 255); $blue = mt_rand(0, 255); /* Use color values from above to form an ImageMagick color string RGB triple, and set the $pxl_wnd PixelWand to that color. */ checkWandError(PixelSetColor($pxl_wnd, "rgb($red, $green, $blue)"), $pxl_wnd, __LINE__); /* Set the fill color (the color in which shapes and text will be drawn), to $pxl_wnd's color. */ DrawSetFillColor($drw_wnd, $pxl_wnd); /* Add a command to draw a rounded rectangle to the $drw_wnd DrawingWand from point ($x1, $y1), the top-left corner of the bounding rectangle to ($x2, $y2), (the bottom right corner), with a corner x-axis radius of $x_radius, and a corner y-axis radius of $y_radius. */ DrawRoundRectangle($drw_wnd, $x1, $y1, $x2, $y2, $x_radius, $y_radius); /* Create a new image, in $pre_morph_wnd, of $width * $height area, with $bg_color (currently a black PixelWand resource) background color, set it's display time to $morph_delay, and draw the $drw_wnd DrawingWand on the new image. */ drawNewImageSetDelay($pre_morph_wnd, $drw_wnd, $width, $height, $bg_color, $morph_delay, __LINE__); /* Morph the images in $pre_morph_wnd, set their displaytime, and and add them to $mgck_wnd. */ addMorphedImages($mgck_wnd, $pre_morph_wnd, $num_morph_frames, $morph_delay, __LINE__); /* Free the resources associated with $pre_morph_wnd, since it is no longer needed. */ DestroyMagickWand($pre_morph_wnd); /* Set the current active image, in $mgck_wnd's image squence, to the last image. */ MagickSetLastIterator($mgck_wnd); /* Starting from $i = $cnt_down_start, (with $i being decreased by one at each iteration's end), and continuing while $i > 0, and the widths and heights of the rounded rectangles to be drawn are greater than the amounts by which their sizes are decreased through each iteration, */ for ($i = $cnt_down_start; $i > 0 && ($x2 - $x1) >= $x_int && ($y2 - $y1) >= $y_int; $i--) { /* Set the PixelWand $pxl_wnd's color to that of the ImageMagick color string RGB triple "rgb($red, $green, $blue)", where $red, $green, and $blue are numbers between 0 and 255, inclusive. */ checkWandError(PixelSetColor($pxl_wnd, "rgb($red, $green, $blue)"), $pxl_wnd, __LINE__); /* Add commands to draw a $pxl_wnd colored rounded rectangle to $drw_wnd */ DrawSetFillColor($drw_wnd, $pxl_wnd); DrawRoundRectangle($drw_wnd, $x1, $y1, $x2, $y2, $x_radius, $y_radius); $red = mt_rand(0, 255); $green = mt_rand(0, 255); $blue = mt_rand(0, 255); /* Decrease the size of the next rounded rectange to be drawn */ $x1 += $x_int; $y1 += $y_int; $x2 -= $x_int; $y2 -= $y_int; /* Create a new image in $mgck_wnd, and draw $drw_wnd on it */ drawNewImageSetDelay($mgck_wnd, $drw_wnd, $width, $height, $bg_color, $cnt_down_delay, __LINE__); /* Add commands to draw $i in $white colored text $font_size, horizontally and vertically centered at relative point (0, 0), (see function definition for details), to the $txt_wnd DrawingWand. */ addText($txt_wnd, $white, $font_size, $i); /* Draw $txt_wnd on the just created image in the $mgck_wnd MagickWand */ checkWandError(MagickDrawImage($mgck_wnd, $txt_wnd), $mgck_wnd, __LINE__); /* Clear the $txt_wnd DrawingWand of any accumulated commands, and reset the settings it contains to their defaults. */ ClearDrawingWand($txt_wnd); } /* Add commands to draw $i, (which now holds a value that is 1 less than the last $i value drwan in the loop above), in $white at $font_size, to the $drw_wnd DrawingWand */ addText($drw_wnd, $white, $font_size, $i); /* Draw $drw_wnd on a new image in $mgck_wnd */ drawNewImageSetDelay($mgck_wnd, $drw_wnd, $width, $height, $bg_color, $swirl_delay, __LINE__); /* The following loop creates a set of images which, when set as animation frames, creates a sort of hurricane effect. Starting at $swirl_deg = $swirl_deg_start degrees, and increasing $swirl_deg by $swirl_deg_int degrees as long as $swirl_deg is less than or equal to $swirl_deg_end, ... */ for ($swirl_deg = $swirl_deg_start; $swirl_deg <= $swirl_deg_end; $swirl_deg += $swirl_deg_int) { /* create a new image, draw $drw_wnd on it, set its display time to $swirl_delay hundredths of a second, ... */ drawNewImageSetDelay($mgck_wnd, $drw_wnd, $width, $height, $bg_color, $swirl_delay, __LINE__); /* and perform the swirl special effect on it at $swirl_deg. */ checkWandError(MagickSwirlImage($mgck_wnd, $swirl_deg), $mgck_wnd, __LINE__); } /* Following loop ensures that $font_size is */ while (TRUE) { /* Set the text font size used by $txt_wnd to $font_size */ DrawSetFontSize($txt_wnd, $font_size); /* MagickGetStringWidth() returns the width of the specified strings ($logo and $welcome_msg), when they are drawn with the settings (font, font size, stroke, etc.) of the specified DrawingWand, $txt_wnd. */ $logo_width =& checkWandError(MagickGetStringWidth($mgck_wnd, $txt_wnd, $logo), $mgck_wnd, __LINE__); $welcome_msg_width =& checkWandError(MagickGetStringWidth($mgck_wnd, $txt_wnd, $welcome_msg), $mgck_wnd, __LINE__); /* If the widths of both strings are within the acceptable limits, end the loop. */ if ($logo_width < $width && $welcome_msg_width < $width) { break; } /* Otherwise, decrement the $font_size */ $font_size--; } /* Retrieve the current image from $mgck_wnd in a new MagickWand, and assign it to $pre_morph_wnd. */ $pre_morph_wnd =& checkWandError(MagickGetImage($mgck_wnd), $mgck_wnd, __LINE__); /* Add commands to the $txt_wnd DrawingWand to draw the $logo string in $white at $font_size, then draw $txt_wnd on a new image in $pre_morph_wnd. */ addText($txt_wnd, $white, $font_size, $logo); drawNewImage($pre_morph_wnd, $txt_wnd, $width, $height, $bg_color, __LINE__); /* Clear $txt_wnd's command list and reset its settings */ ClearDrawingWand($txt_wnd); /* Draw $welcome_msg in $white at $font_size on another new image in $pre_morph_wnd. */ addText($txt_wnd, $white, $font_size, $welcome_msg); drawNewImage($pre_morph_wnd, $txt_wnd, $width, $height, $bg_color, __LINE__); /* Add the first image in $mgck_wnd to $pre_morph_wnd. */ MagickSetFirstIterator($mgck_wnd); checkWandError(MagickAddImage($pre_morph_wnd, $mgck_wnd), $pre_morph_wnd, __LINE__); /* Morph the images in $pre_morph_wnd and add them to the end of $mgck_wnd's image sequence. */ addMorphedImages($mgck_wnd, $pre_morph_wnd, $num_morph_frames, $morph_delay, __LINE__); /* Free the resources associated with $pre_morph_wnd, $drw_wnd and $txt_wnd, since they are no longer needed. */ DestroymagickWand($pre_morph_wnd); DestroyDrawingWand($drw_wnd); DestroyDrawingWand($txt_wnd); /* Sets the output format of $mgck_wnd's image sequence to GIF */ checkWandError(MagickSetFormat($mgck_wnd, 'GIF'), $mgck_wnd, __LINE__); /* Retrieves the mime-type associated with $mgck_wnd's image sequence, and outputs it in a Content-Type header. */ header('Content-Type: ' . MagickGetMimeType($mgck_wnd)); /* Outputs $mgck_wnd's image sequence as a BLOB (Binary Large Object) */ MagickEchoImagesBlob($mgck_wnd); /* Free the resources associated with $mgck_wnd */ DestroymagickWand($mgck_wnd); /* ******************** Function Declarations ******************** */ /** * Function checkWandError() compares the value of $result, which should be * the result of any MagickWand API function, to explicit FALSE, and if it is * FALSE, checks if $wand for contains an error condition (in case the API * function is just returning FALSE as a normal return value). * * If the return value is FALSE, and the $wand contains a set error condition, * the function outputs the error and forcibly ends the program. * * If not, returns $result as a reference. * * @param mixed MagickWand API function result * @param resource Any MagickWand API resource * @param int Always __LINE__ (script current line number predefined * PHP constant) * * @return reference Returns reference to 1st argument (if no errors found) */ function &checkWandError(&$result, $wand, $line) { if ($result === FALSE && WandHasException($wand)) { echo '

An error occurred on line ', $line, ': ', WandGetExceptionString($wand), '

';
     exit();
 }

 return $result;
}

/**
* Function addText() performs several operations on the DrawingWand
* $drw_wnd:
*    1) sets the fill color (the color in which shapes, text, etc. will be
*       drawn) from the PixelWand (or Imagemagick color string) $pxl_wnd with
*       DrawSetFillColor()
*    2) sets the font size of text to be drawn to $font_size, using
*       DrawSetFontSize()
*    3) sets the position where text will be drawn with DrawSetGravity();
*       position is set to MW_CenterGravity by default, which automatically
*       centers text horizontally and vertically
*    4) sets text to be drawn later to $text, which will be drawn at
*       coordinate ($x, $y), (relative to the position indicated by
*       $gravity), with DrawAnnotation()
*
* If no font is set prior to this function being called, the MagickWand API
* uses the default font (seems to be Arial).
*
* @param resource    DrawingWand resource
* @param mixed       PixelWand resource or imagemagick color string
* @param float       desired text font size
* @param float       string to be drawn
* @param int         the desired text gravity, indicating the desired text
*                        position; must be a MagickWand API GravityType
* @param int         x ordinate, relative to the chosen text gravity where
*                        text will be drawn
* @param int         y ordinate, relative to the chosen text gravity where
*                        text will be drawn
*
* @return void       No return value, as all functions used return void.
*/
function addText($drw_wnd, $pxl_wnd, $font_size, $text, $gravity = MW_CenterGravity, $x = 0, $y = 0) {

 /* Set the color used to draw shapes and text with $drw_wnd to $pxl_wnd's
    color
 */
 DrawSetFillColor($drw_wnd, $pxl_wnd);

 /* Set the text font size used by $drw_wnd to $font_size */
 DrawSetFontSize($drw_wnd, $font_size);

 /* Set $drw_wnd text gravity (automatic text positioning setting), to
    $gravity
 */
 DrawSetGravity($drw_wnd, $gravity);

 /* Add a command to the $drw_wnd DrawingWand to draw the $text string at
    point ($x, $y) (relative to $drw_wnd's gravity setting).
 */
 DrawAnnotation($drw_wnd, $x, $y, $text);
}

/**
* Function drawNewImage() creates a new image, using MagickNewImage(), of
* $width * $height area, filled with $bg_color (a PixelWand, or ImageMagick
* color string) color.
*
* It then uses MagickDrawImage() to draw the commands contained in the
* DrawingWand $drw_wnd on the newly reated image.
*
* @param resource    MagickWand resource
* @param resource    DrawingWand resource
* @param int         width of new image
* @param int         height of new image
* @param mixed       PixelWand resource or imagemagick color string
* @param int         Always __LINE__ (script current line number predefined
*                        PHP constant)
*
* @return void
*/
function drawNewImage($mgck_wnd, $drw_wnd, $width, $height, $bg_color, $line) {

 $line = 'program line '.$line.', function line ';

 checkWandError(MagickNewImage($mgck_wnd, $width, $height, $bg_color), $mgck_wnd, $line.__LINE__);
 checkWandError(MagickDrawImage($mgck_wnd, $drw_wnd), $mgck_wnd, $line.__LINE__);
}

/**
* Function drawNewImageSetDelay() calls drawNewImage() to create a new
* image, of $width * $height area, filled with $bg_color color, drawn on by
* DrawingWand $drw_wnd.
*
* It then sets the length of time the new image will be displayed to $delay.
*
* @param resource    MagickWand resource
* @param resource    DrawingWand resource
* @param int         width of new image
* @param int         height of new image
* @param mixed       PixelWand resource or imagemagick color string
* @param int         desired length of time (in hundredths of a second) that
*                        the new image will be displayed
* @param int         Always __LINE__ (script current line number predefined
*                        PHP constant)
*
* @return void
*/
function drawNewImageSetDelay($mgck_wnd, $drw_wnd, $width, $height, $bg_color, $delay, $line) {

 drawNewImage($mgck_wnd, $drw_wnd, $width, $height, $bg_color, $line);

 $line = 'program line '.$line.', function line ';

 checkWandError(MagickSetImageDelay($mgck_wnd, $delay), $mgck_wnd, $line.__LINE__);
}

/**
* Function addMorphedImages() morphs the images in $pre_morph_wnd, with
* $num_morph_frames intermediary frames. The new sequence's images are then
* set to display for $morph_delay 100th's of a second, and then added to the
* end of $mgck_wnd's image list.
*
* @param resource    MagickWand resource
* @param resource    MagickWand resource
* @param int         number of intermediary frames desired between the images
*                        to be morphed
* @param int         desired length of time (in hundredths of a second) that
*                        each frame in the newly morphed sequence will be
*                        displayed
* @param int         Always __LINE__ (script current line number predefined
*                        PHP constant)
*
* @return void
*/
function addMorphedImages($mgck_wnd, $pre_morph_wnd, $num_morph_frames, $morph_delay, $line) {

 $line = 'program line '.$line.', function line ';

 /* Set the current active image in the $mgck_wnd MagickWand to the first
    image in its image list
 */
 MagickSetFirstIterator($pre_morph_wnd);

 /* Perform the morph special effect on $pre_morph_wnd and assign the result
    to $morph_wnd
 */
 $morph_wnd =& checkWandError(MagickMorphImages($pre_morph_wnd, $num_morph_frames), $pre_morph_wnd, $line.__LINE__);

 /* Set the current active image in the $morph_wnd MagickWand to the first
    image in its image list and remove it.
 */
 MagickSetFirstIterator($morph_wnd);
 checkWandError(MagickRemoveImage($morph_wnd), $morph_wnd, $line.__LINE__);

 /* Set the current active image in the $morph_wnd MagickWand to the last
    image in its image list and remove it.
 */
 MagickSetLastIterator($morph_wnd);
 checkWandError(MagickRemoveImage($morph_wnd), $morph_wnd, $line.__LINE__);

 /* Reset $morph_wnd's image list iterator; this has the effect that the
    next call to MagickNextImage($morph_wnd) sets $morph_wnd's current
    active image index to 0, i.e., to the first image.

    Contrast this behavior to MagickSetFirstIterator()'s, which sets the
    current active image's index to 0, causing the next call to
    MagickNextImage() to actually set the image index to 1, i.e., the
    second image in the MagickWand in question.

    This is an important distinction -- be careful.
 */
 MagickResetIterator($morph_wnd);
 while (MagickNextImage($morph_wnd)) {
     /*
        Set the length of time the current active image is displayed to
        $morph_delay hundredths of a second.
     */
     checkWandError(MagickSetImageDelay($morph_wnd, $morph_delay), $morph_wnd, $line.__LINE__);
 }

 MagickSetLastIterator($morph_wnd);

 /* Add the images in $morph_wnd to the end of $mgck_wnd */
 MagickSetLastIterator($mgck_wnd);
 checkWandError(MagickAddImages($mgck_wnd, $morph_wnd), $mgck_wnd, $line.__LINE__);

 DestroymagickWand($morph_wnd);
}

?>

FAQ on AJAX Technology

2008-08-02T11:28:00.000-07:00

AJAX has become an hot technology with Web2.0 but before starting AJAX Programming developers needs to know some important FAQ on AJAX.

Q) Ajax an Microsoft Technology?
A) Absolutely No, Ajax is an cross browser technology. It is browser dependent and uses JavaScript.

Q)Are Ajax applications easier to develop than traditional web applications?
A) Not necessarily. Ajax applications can involve complex JavaScript code on the client. To develop that complex code efficient and bug-free is not an simple task as it involves pure JavaScript & DHTML coding. But better development tools and frameworks are require to make the Ajax Application development much faster and easier.

Q) Do Ajax applications always deliver a better experience than traditional web applications?
A) Not necessarily. Ajax gives interaction designers more flexibility. However, the more power we have, the more caution we must use in exercising it. We must be careful to use Ajax to enhance the user experience of our applications, not degrade it.

Q) Apart from AJAX any other Technique exist for Dynamic Web Page Update?
A) IFRAMES

Q) Can AJAX access Server side script residing on different domain?
A) NO. Ajax can only access the Script residing on same domain. If you try to access the script from other domain browsers gives an error “Access Denied”

Q) Ajax can also fetch XML content from server side, if this is true how?
A) Using responseXML properties and then by using JavaScript XML DOM to access the attributes and value of XML data.

Q) Is Ajax is Browser Dependent?
A) Yes, Ajax object is part of JavaScript engine inside every browser. So if a new browser comes into market and the JavaScript engine doesn’t have XMLHTTP object then Ajax will not work.

Q) How can i check the progress of my Ajax call?
A) When making Ajax call the readystate has to reach 4 to capture the remote date. So you can insert appropriate messages until the readystate reaches 4.

Q) Do i have to wait endlessly after making Ajax Call?
A) Not always but there are some exceptional cases when the remote server is already busy and is unable to handle your request in that case the JavaScript code will wait until response is fetched from the remote server or there is browser request timed out. You can use the interval to make another call after specific interval.

Q) Do i have to explicitly use Ajax Frameworks for implementing Ajax?
A) Not necessarily, Ajax Frameworks are meant to make the life of programmers simpler. These frameworks acts as an wrapper to the Ajax Code, they provide you with the function call that will do all the Ajax Call and you don’t have to write the Basic Ajax Code.

Q) Can Ajax work with all Web Technologies?
A) Yes, Ajax is browser dependent and if the web technology you are using supports browser then Ajax will work.

Q) Can i make multiple Ajax Call?
A) Yes you can make multiple Ajax call provided you have separate Ajax Object variables created. Making another Ajax Call on the existing Ajax Object will overwrite the previous make call.

Q) Can i do Ajax Connection Pooling Techniques?
A) Yes you can do connection pooling for making Ajax call. Here you will be storing all the Ajax objects in a connection pool so that every individual object will perform their own task.

Bookmark It

How AJAX Works

2008-08-02T10:55:00.000-07:00

The best way to learn this topic to understand the comparison between the traditional method of calling the Web page from the server and AJAX methodology.

Traditional WebPage Call

User interacts with the webpage to perform its operation
The request is submitted to the Web Server along with the information user wants
Server checks for the details and might require to interact with the Database and finally returns the response to the browser
Browser displays the user response details in the form of refreshing the webpage

Traditional WebPage Call

* User has to wait until the page reloads
* User can perform only one action at a time

AJAX come to the rescue:
With AJAX user can fetch the data from the server without refreshing the whole page. During AJAX call following steps are followed

* User interacts with the web page to perform its operation. At this point your webpage internally through JavaScript calls a remote file and the user data is passed through GET/POST method
* The web server receives the request processes it and send the data back to the client browser
* At this point the web page is not reloaded and the browser JavaScript engine is waiting for the response from the web server.
* The web page gets the response from the server and dynamically through JavaScript displays the content fetched from the server

Advantage of using AJAX:

* Make multiple AJAX calls with different request from the same page
* Instant result
* Not to wait for the page to get reload

Ready for going deep into AJAX Programming, if yes than check out the links below.
Bookmark It

What is AJAX?

2008-08-02T10:52:00.000-07:00

AJAX stands for Asynchronous JavaScript And XML. It got famous through Gmail etc. It is a part of Web 2.0 Techniques which allows some part or the whole document to dynamically update without refreshing the whole web page. So the time taken to get the response from the server gets reduced as the pages are getting updated in the background through AJAX. Also it gives more interaction on the web page. It is a browser based technology and is independent of any Web Server Programming language.

AJAX Acronym:
A:
‘A’ stands for Asynchronous mode. This technique allows the web page to make request in asynchronous/synchronous mode to the web server. By default in all the AJAX examples it is set to Asynchronous mode. The advantage of making it asynchronous is that is will allow the web page to make multiple calls at a same time which will work in the background and will update the page dynamically as soon the request gets over.

J:
‘J’ stands for JavaScript. AJAX extensively rely on JavaScript Engine for its functioning. So it is essential that the JavaScript should be enabled for AJAX to work.

X:
‘X’ stands for XML. AJAX uses the XMLHttpRequest Object of the JavaScript Engine. With this object it can also handle the request and response messages in XML Format apart fron traditional text format.

Examples of AJAX based websites:
www.gmail.com

Limitations of AJAX:

It can only access the page from the domain the original web page is coming from. i.e. demo.html residing at example.com can makes AJAX call to web page residing only at www.example.com.

Headache of AJAX Programming:

All the program will have to be written in JavaScript. So you must be an expert in JavaScript to write AJAX Programs.
AJAX program should be compatible with different browsers DOM.
Lot of request goes to the server. So the server requires huge bandwidth to allocate the request made.
Testing on different browsers.
Sometimes if your servers fails to respond to the AJAX call then you will have to wait endlessly until you again make the AJAX call.

Before AJAX came into Picture:

IFRAME were used to display data of other webpage or other domain in the same page. The page inside the IFRAME can be reload/changed dynamically using Traditional JavaScript Technique.

Ready for going deep into AJAX Programming, if yes than check out the links below.

Bookmark It

Beginning Ajax

2008-08-02T00:17:00.000-07:00

Ajax is often mistaken for a programming language, when in reality it is more of a standard or technique used to create better, more interactive web applications. It is used to create more responsive web pages by loading certain areas of a page, instead of an entire page. In this tutorial, and the ones that follow, we will learn to work with it to build dynamic web sites.

Ajax is an acronym that stands for Asynchronous Javascript and XML. It work across a multitude of platforms and is compatible with all of the major browsers. The "asynchronous" portion of its name comes from its ability to request data from the server using the XMLHttpRequest Object and store it in the background without changing the appearance or behavior of the page.

Typically JavaScript is used to make the Ajax function calls. For browsers that do not support XMLHttpRequests, remote scripting can be used.

In this article we will learn the basics of this technique, along with its history. I will make some assumptions. I will assume that you have some knowledge of HTML or XHTML and JavaScript. An understanding of other web technologies, such as XML and CSS would also be helpful. I add CSS in that mix because CSS is also part of the standard that comprises the makeup of Ajax.

It's All in a Name

I'm sure you all know of the mythological figure Ajax? No? How about Ajax the Lesser, who was given the smack down by Poseidon and his trident? Ajax the cleaner? Ah there we go.

Asynchronous techniques can be dated back to the days of DHTML, or even earlier with the src attribute. It could be used to load JavaScript into a page, mimicking some of the AJAX type effects. Remote Scripting, introduced in 1998 by Microsoft, acted as a replacement for these techniques, using Java applets to give the client side the opportunity to communicate via JavaScript. Later on Microsoft would go on to create the XMLHttp Request with its release of Internet Explorer 5.

Then finally, in 2005 (I've skipped a little bit of history to ensure you stay awake), Google popularized Ajax techniques with its Google Suggest in an effort to rule the world. Now today, a short three years later, we are all slaves to the Lord and Master Goog. It commands and we search. All Hail the Goog!

Advantages of Using Ajax

Before we actually learn the techniques, it may help to understand why you would want to and compare the advantages and disadvantages of using Ajax. I would say for the most part that the advantages far outweigh the disadvantages, but you may disagree.

So without further ado, here are the advantages:

-Consistency

Ajax allows for a consistent view in that it does not need to reload the entire page like traditional methods. Instead it can reload specific elements, so the page does not need to flash on and off or reposition itself.

-Fluidity

Instead of loading different pages to display information, you can load the data in the same window, making your web page feel and behave more like a Flash or a desktop application.

-Usability

As stated above, you can make your web pages feel more like an application, allowing for enhanced user experiences and easier controls.

-Bandwidth Friendly

Since Ajax updates portions of the web page instead of the whole thing, and handles data in the background, it typically results in faster page loads. And honestly, even if the page does not actually load faster, it feels that way because the page does not flicker or seem to change much at all.

-Interactivity

Due to the increased speed of the pages loaded (or the illusion of increased speed), visitors to your site are more likely to interact with all of the elements on your site. If you have a rating system on your website or a choice of options, in traditional web sites the user chooses some options and has to wait for the page to reload and store the data before displaying more options. With Ajax, it all happens on the fly. I know when I visit a website and after every decision the page has to reload, I get pretty irked, pretty fast. Yet if just the page section updates, I tend to stay.

That isn't to say that as Ajax gets more popular and we get more used to it, that we won't get impatient with it as well. Consider cooking something in the microwave for five minutes. It seems like a hassle to us now, but back when they were first invented, it was a godsend.

Disadvantages of Using Ajax

Believe it or not, even Ajax has some disadvantages to it. Here are some things to consider when deciding whether or not to use it:

-Security

Ajax has been around for a few years now, but it is really still an infant in terms of technology. And like all new (and old) technologies, it is vulnerable to exploits. Of course if this were to stop you, you may as well give up on the web altogether.

-Accessibility

As we've seen before with new technologies, Ajax can sometimes be lacking when it comes to meeting certain accessibility standards.

-Search Engine Optimization

It seems these days that the Internet is only about two things, one of which I can't mention here in this article. The other of course is SEO. Since Ajax loads content after the page loads sometimes, there aren't always good ways to optimize your site so that spiders can crawl it. That isn't to say you can't, but just be aware of the issues and educate yourself.

-Weirdness

Ajax is an evolving technique and as such certain behaviors can occur that you may not expect. It can also be argued that users who are used to traditional web pages might find a page that acts more like an application more difficult to comprehend.

-Timeliness

Even though Ajax should typically speed up your web page, it ultimately is dependent upon the same hardware as other web technologies and thus is subject to the same problems as normal web pages. If a server is experiencing difficulties, it won't matter what you are programming your site with.

Conclusion

Well that is all the time we have for this article. In our next episode we will begin learning the basics of Ajax and how to work with the XMLHttp Request Object. In the meantime you may wish to brush up on your HTML and JavaScript.

Till then...

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Tranfer all MySQL databases to another server

2008-07-28T12:59:00.000-07:00

I have managed migrate all of my MySQL databases from one server to another. This was a one time only operation, so setting up replication wasn't an option. And restoring a backup on the new server involved more downtime than strictly necessary. I figured the most ideal way would be to dump the active MySQL directly into the new MySQL instance. And that's what I did.

Features
* This often beats setting up replication if you want a quick & dirty solution.

* Extremely fast because it injects the MySQL dump directly into the new MySQL database, hence it does not use additional diskspace or disk IO.

* InnoDB proof.

* By putting everything in one script we can instantly create snapshots with recent data. This allows you to focus on other issues that might pop up during a database migration.

* And yes, you could schedule this script in the crontab and sync to a standby server for emergency failover. But consider replication or clustering instead.

Warning
Be careful, this script will drop any existing database on the receiving side it encounters. USE AT OWN RISK! This is heavy material and you could seriously mess up your system if you don't know what you're doing.

The Script
#!/bin/bash
# where your mysql commands are
CMD_MYSQL="/usr/bin/mysql"
CMD_MYSQLDUMP="/usr/bin/mysqldump"

# login credentials of the submitting side
DB_USER_FROM="root"
DB_PASS_FROM="passxxx"
DB_HOST_FROM="source.example.com"

# login credentials of the receiving side
DB_USER_TO="root"
DB_PASS_TO="passxxx"
DB_HOST_TO="destination.example.com"

# index all databases on the local (submitting) side
echo "database sync"
DATABASES=`echo "SHOW DATABASES;" | ${CMD_MYSQL} -p${DB_PASS_FROM} -u ${DB_USER_FROM} -h ${DB_HOST_FROM}`

# loop over all the databases
for DATABASE in $DATABASES; do
# skip non-databases
if [ "${DATABASE}" != "Database" ] && [ "${DATABASE}" != "information_schema" ]; then
echo "transmitting ${DATABASE}"

# create database on remote (receiving) side if it doesn't exist
echo "CREATE DATABASE IF NOT EXISTS ${DATABASE}" | ${CMD_MYSQL} -p${DB_PASS_TO} -u ${DB_USER_TO} -h ${DB_HOST_TO}

# dump the current database and pipe it directly to the remote (receiving) side to inject it
${CMD_MYSQLDUMP} -Q -B --create-options --delayed-insert --complete-insert --quote-names --add-drop-table -p${DB_PASS_FROM} -u${DB_USER_FROM} -h${DB_HOST_FROM} ${DATABASE} | ${CMD_MYSQL} -p${DB_PASS_TO} -u ${DB_USER_TO} -h ${DB_HOST_TO} ${DATABASE}
fi
done

Save this script somewhere (I usually take the /root/bin dir for this) and Make it executable:

Configure
You need to change following variables to suit your environment:

DB_USER_FROM="root"
DB_PASS_FROM="passxxx"
DB_HOST_FROM="source.example.com"

DB_USER_TO="root"
DB_PASS_TO="passxxx"
DB_HOST_TO="destination।example.com"]

Now run the script (be sure read the warning above).

116 Run Commands

2008-07-28T04:21:00.000-07:00

You may run some program/tools by typing directly in windows "Star > Run" box. Commands are as follows-

Commands:
1. Accessibility Controls - access.cpl
2. Accessibility Wizard - accwiz
3. Add Hardware Wizard - hdwwiz.cpl
4. Add/Remove Programs - appwiz.cpl
5. Administrative Tools - control admintools
6. Automatic Updates - wuaucpl.cpl
7. Bluetooth Transfer Wizard - fsquirt
8. Calculator - calc
9. Certificate Manager - certmgr.msc
10. Character Map - charmap
11. Check Disk Utility - chkdsk
12. Clipboard Viewer - clipbrd
13. Command Prompt - cmd
14. Component Services - dcomcnfg
15. Computer Management - compmgmt.msc
16. Control Panel - control
17. Date and Time Properties - timedate.cpl
18. DDE Shares - ddeshare
19. Device Manager - devmgmt.msc
20. Direct X Troubleshooter - dxdiag
21. Disk Cleanup Utility - cleanmgr
22. Disk Defragment - dfrg.msc
23. Disk Management - diskmgmt.msc
24. Disk Partition Manager - diskpart
25. Display Properties - control desktop
26. Display Properties - desk.cpl
27. Dr. Watson System Troubleshooting Utility - drwtsn32
28. Driver Verifier Utility - verifier
29. Event Viewer - eventvwr.msc
30. Files and Settings Transfer Tool - migwiz
31. File Signature Verification Tool - sigverif
32. Findfast - findfast.cpl
33. Firefox - firefox
34. Folders Properties - control folders
35. Fonts - control fonts
36. Fonts Folder - fonts
37. Free Cell Card Game - freecell
38. Game Controllers - joy.cpl
39. Group Policy Editor (for xp professional) - gpedit.msc
40. Hearts Card Game - mshearts
41. Help and Support - helpctr
42. HyperTerminal - hypertrm
43. Iexpress Wizard - iexpress
44. Indexing Service - ciadv.msc
45. Internet Connection Wizard - icwconn1
46. Internet Explorer - iexplore
47. Internet Properties - inetcpl.cpl
48. Keyboard Properties - control keyboard
49. Local Security Settings - secpol.msc
50. Local Users and Groups - lusrmgr.msc
51. Logs You Out Of Windows - logoff
52. Malicious Software Removal Tool - mrt
53. Microsoft Chat - winchat
54. Microsoft Movie Maker - moviemk
55. Microsoft Paint - mspaint
56. Microsoft Syncronization Tool - mobsync
57. Minesweeper Game - winmine
58. Mouse Properties - control mouse
59. Mouse Properties - main.cpl
60. Netmeeting - conf
61. Network Connections - control netconnections
62. Network Connections - ncpa.cpl
63. Network Setup Wizard - netsetup.cpl
64. Notepad - notepad
65. Object Packager - packager
66. ODBC Data Source Administrator - odbccp32.cpl
67. On Screen Keyboard - osk
68. Outlook Express - msimn
69. Paint - pbrush
70. Password Properties - password.cpl
71. Performance Monitor - perfmon.msc
72. Performance Monitor - perfmon
73. Phone and Modem Options - telephon.cpl
74. Phone Dialer - dialer
75. Pinball Game - pinball
76. Power Configuration - powercfg.cpl
77. Printers and Faxes - control printers
78. Printers Folder - printers
79. Regional Settings - intl.cpl
80. Registry Editor - regedit
81. Registry Editor - regedit32
82. Remote Access Phonebook - rasphone
83. Remote Desktop - mstsc
84. Removable Storage - ntmsmgr.msc
85. Removable Storage Operator Requests - ntmsoprq.msc
86. Resultant Set of Policy (for xp professional) - rsop.msc
87. Scanners and Cameras - sticpl.cpl
88. Scheduled Tasks - control schedtasks
89. Security Center - wscui.cpl
90. Services - services.msc
91. Shared Folders - fsmgmt.msc
92. Shuts Down Windows - shutdown
93. Sounds and Audio - mmsys.cpl
94. Spider Solitare Card Game - spider
95. SQL Client Configuration - cliconfg
96. System Configuration Editor - sysedit
97. System Configuration Utility - msconfig
98. System Information - msinfo32
99. System Properties - sysdm.cpl
100. Task Manager - taskmgr
101. TCP Tester - tcptest
102. Telnet Client - telnet
103. User Account Management - nusrmgr.cpl
104. Utility Manager - utilman
105. Windows Address Book - wab
106. Windows Address Book Import Utility - wabmig
107. Windows Explorer - explorer
108. Windows Firewall - firewall.cpl
109. Windows Magnifier - magnify
110. Windows Management Infrastructure - wmimgmt.msc
111. Windows Media Player - wmplayer
112. Windows Messenger - msmsgs
113. Windows System Security Tool - syskey
114. Windows Update Launches - wupdmgr
115. Windows Version - winver
116. Wordpad - write