Ok, I was googling for some information when I stumbled upon something called as “Chrome Experiments“. I don`t know whether most of you must have seen this site, but it is unbelievable that most of the experiments posted here have been created using javascript !

One of my favourites here is the Depth of Field example. Screenies below

This just shows how the javascript engines have evolved over the years. Earlier flash used to be every developer/designers dream to create super interactive websites, it is still great for creating RIAs but nowadays Javascript has evolved soo much, it can do most of the stuff which Flash could do.

This site is a real inspiration to those who want to learn more about javascript. Enjoy

The most recent version of this tutorial has been completely re-written at WebDev Codex.

Learn how to Install PHP 5.3,

To view the latest version, Goto Screencast #1 : Installing Apache 2.2, PHP 5.3, MySQL 5.1 & PHPMyAdmin 3.2 for Windows 7/Vista

If you want to see the screencast of this tutorial, then goto
Screencast #1 : Installing Apache 2.2, PHP 5.3, MySQL 5.1 & PHPMyAdmin 3.2 for Windows 7/Vista

Not everyone would spend money online to buy webspace just so that they can test out how their latest application works, Well… Welcome to Vision Master Designs Blog. This tutorial will teach you to set up a developer environment for PHP/MySQL in your computer in no time.

Index :

• Page 1 : Introduction
• Page 2 : Create Directories & Install Apache
• Page 3 : Install PHP5 & Configure php.ini
• Page 4 : Configure Apache 2.2
• Page 5 : Installing & Configuring MySQL5
• Page 6 : Installing & Configuring PhpMyAdmin

If you are aware of the basics then Click Here to jump below, else read on.

Normally we can view HTML pages on our computer without the need of uploading them to the server, since HTML is a Client Side Language. You don`t need any extra software to view html files, just any browser will do the trick.
But if you want to make your pages dynamic using any Server Side Language (PHP,ASP,JSP) & want to the see the results then you must upload the file to the webserver which supports that language so it can execute the file & return the results on your browser

We can set up a developers environment from which you can create and execute PHP/MySQL scripts by installing the above mentioned applications.

Now, The Pre-Requisites :

1. Apache HTTP Server (2.2.11): The best open source webserver. You need this to turn your humble computer to a powerful webserver to execute your applications.
   Direct Download apache_2.2.11-win32-x86-no_ssl-r2.msi
   Apache Download Page – Please Download the Win32 Binary without crypto (no mod_ssl) (MSI Installer) – apache_2.2.11-win32-x86-no_ssl.msi~ 4.3MB
2. PHP (5.2.9) : One of the most powerful web programming languages.
   Direct Download PHP 5.2.9 -2 zip package
   PHP Download Page – Download the PHP 5.2.9 – 2 Zip package ~ 10MB
3. MySQL (5.1.34) : One of the best DBMS packages which is free.
   The latest version is 5.1.34 which is stable and used in production servers. Although MySQL 5.1 and MySQL 6 are also available as beta releases, they are not used in production servers as of now.
   MySQL Download Page – Please download Windows ZIP/Setup.EXE (x86) 5.1.34 ~ 35.2MB
4. PhpMyAdmin (3.1.4) : Used to manage your MySQL databases directly using your web browser.
   Direct Download phpMyAdmin-3.1.4-all-languages.zip
   PHPMyAdmin Download Page – Please download the latest release from the 3.x rooster.

The above downloads are compatible with Windows Vista/Vista SP1 (32 bit OS).

Ok, so the title doesn`t make much sense huh !? I wasn`t available for an entire month and the reason…. Optima Prime – Enterprise Project Management System. Well,  this is my last year in graduation college and we had to create a project which will stand out, and here it is

So wat is it all about ?

Before I start, we had developed a Chart or Poster to depict what our software is all about. This is the poster, it may be a lil cluttered, but it pretty much explains what our project is all about

We won the first prize for our project along with another Project (Rank Retrieval System). But more than prize, I guess for all the hard work put in, we have got what we wanted, Exposure….

What is PMS ?

There are lot of Project Management Systems out there, Project Management Systems (PMS) in general help your company manage projects effeciently and effectively. Optima Prime is one such PMS which does both alongside a host of features

Features ?

1. Works on our Custom MVC based framework “Innovite”
2. 3 Different types of User Logins viz Project Manager, Team Leader, Team Member
3. Every Project has an individual “Message Board”(Forum) to communicate with the project members with Attachment Facility
4. Email Alert System. Whenever any project has been updated or any new message has been added, then an E-Mail is sent across all the users in that project.
5. Completely AJAX ‘ed so not much page transitions
6. Dynamic Timeline Charts (Gantt) and Dynamic Pie/Bar Charts
7. Automatic PDF report generation.
8. Themes
9. Install Package
10. Aimed for an IT Enterprise
11. Plugin System
12. Open Source

The basic framework of OptimaPrime.

So there are a long list of features, I have just given a few. Anyways, I`ll release the code soon here, till then you can check out the screenshots put up below.

Screenshots

Project Dashboard after logging in

Project Summary Page with Gantt Chart, Pie Charts etc

Project Edit Page

Well, these are just a few screens, there are more. I`ll upload em as soon as I get up.

Cheers Guys, I am extremely sorry readers for not answering your queries, but I am here now. I`ll try to answer as much as possible.

Hey Guys,

Its been a while since I have started my final year Project called “OptimaPrime- The Enterprise Project Management System”. Most of you must have heard of project management systems. It helps enterprises manage their projects, lets them keep it on schedule, helps them allocate resources etc.
I needed to perform form Validation since I had a lot of forms and it had lot of fields. I googled for good form validation plugins for Prototype + Scriptaculous (Since I have got really used to this cool library) and thats when I found Dexagogo’s Really Easy Field Validation plugin.

A very useful and a simple to use form validator for all kinds of forms. It has neat Fade IN/Fade OUT effects too. Custom classes can be defined, custom validations can be defined. It validates fields for a lot of different type of scenarios.

• required (not blank)
• validate-number (a valid number)
• validate-digits (digits only)
• validate-alpha (letters only)
• validate-alphanum (only letters and numbers)
• validate-date (a valid date value)
• validate-email (a valid email address)
• validate-url (a valid URL)
• validate-date-au (a date formatted as; dd/mm/yyyy)
• validate-currency-dollar (a valid dollar value)
• validate-selection (first option e.g. ‘Select one…’ is not selected option)
• validate-one-required (At least one textbox/radio element must be selected in a group – see below*)

For more information on how to use this plugin visit  Dexagogo’s Website. You can also check out a demo of this script at action HERE. It has very good documentation on how to use this plugin. Thanks Dexagogo. Although if you guys have any doubt on how to use it, I`ll be glad to help you out.

This tutorial is specially for beginners who are wondering how to place an AJAX Spinner. Its very simple guys. Just read below to find out.

To those people who have wondered how to show the spinner image + loading message when any ajax request is made and to hide the spinner image + loading message when the request is successfully completed, this tutorial will help you out in achieving it and also teaches you how to show this loading box in the center of the browser screen and grey out the background contents with cool fade effects.

Index :

• Page 1 : Introduction
• Page 2 : Required HTML/Javascript Code/CSS
• Page 3 : Complete Code of Demo

Pre-Requisites :

A little bit of CSS,HTML knowledge and know-how of Prototype, Scriptaculous.

Source/Demo :

How many times have you wanted to use a very cool looking font for your website, but have withdrawn the idea because you thought that font won`t display properly in everyones’s system.

Well fear not, I had previously posted a tutorial on how you can use PHP to display those lines of texts which use some odd font, by automatically converting it to an image (Tutorial : Convert Text into transparent PNG Image using PHP), this way, you can easily display text with odd fonts.

Recently I found a very neat plugin which automatically converts any text (with font of your choice) into an image i.e from now on you don`t have to worry about text with different or odd fonts. They`ll be automatically converted into a compatible image via this plugin, And don`t worry about the image tag and all, this plugin manages everything

Plugin name : PHP / jQuery Image Replacement
Plugin Home Page/Demo : http://www.xanthir.com/pir/

Usage

The usage was pretty simple.

1. After unzipping the archive, Open pir.php and First set the fonts folder in the php page.
2. In your website, include jQuery and then include the jquery.pir.min.js (for production).

3. $(function() {
   $.pir.options.php="pir.php"; //compulsary to include the php which converts text to image.
   $("h1").pir({font: "yourfont.ttf", wrap: true}); //will enable automatic text warping.
   

   });

Pretty Simple huh ! Enjoy

This tutorial will help you write text on a background and output as an image using the power of PHP. This is useful during those scenarios when you want to display text using a particular font (which isn`t web friendly i.e the text won`t be displayed with the same font in other’s computer). I have used this technique to display the number of RSS subscribers (top-right). So its pretty simple and very basic.

Click Here for a Demo.

STEP 1 : Create PHP file and Define Headers

First we create a PHP file. Lets call it myimage.php. Now we don`t want the browser to understand myimage.php as an image since we`ll be generating the image using this file. So we need to define the headers in this file which will tell the browser that it is an image.

<?php
//HEADERS
header("Content-type: image/png"); //Picture Format
header("Expires: Mon, 01 Jul 2003 00:00:00 GMT"); // Past date
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Consitnuously modified
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Pragma: no-cache"); // NO CACHE

//image generation code

?>

STEP 2 : The entire code !

The entire code is here, the comments should help tell what each function is doing.

<?php

header("Content-type: image/png"); //Picture Format
header("Expires: Mon, 01 Jul 2003 00:00:00 GMT"); // Past date
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Consitnuously modified
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Pragma: no-cache"); // NO CACHE

/*image generation code*/
//create Image of size 350px x 75px
$bg = imagecreatetruecolor(350, 75);

//This will make it transparent
imagesavealpha($bg, true);

$trans_colour = imagecolorallocatealpha($bg, 0, 0, 0, 127);
imagefill($bg, 0, 0, $trans_colour);

//Text to be written
$helloworld = isset($_GET['text']) ? $_GET['text'] : "hello World";

// White text
$white = imagecolorallocate($bg, 255, 255, 255);
// Grey Text
$grey = imagecolorallocate($bg, 128, 128, 128);
// Black Text
$black = imagecolorallocate($bg, 0,0,0);

$font = 'arial.ttf'; //path to font you want to use
$fontsize = 20; //size of font

//Writes text to the image using fonts using FreeType 2
imagettftext($bg, $fontsize, 0, 20, 20, $grey, $font, $helloworld);

//Create image
imagepng($bg);

//destroy image
ImageDestroy($bg);
?>

Well thats the source code if you want to generate alpha png images using PHP. Its pretty simple. This isn`t that tough, but there might be some people new to PHP who might want to know.

Most of you who have blogs/website might be aware of FeedBurner. Its a service which provides custom RSS Management tools like Analysing Web-Traffic, the number of readers subscribed to you blog etc. I too use Feedburner to help me keep track of my feeds and its readers. Although I love their service, I always found the FeedBurner Chicklet (It displays the number of readers subscribed to your RSS) to be a constraint, it isn`t that flexible i.e We can modify the color of the chicklet but not the chicklet it self. So I decided to create my own Chicklet to help me display the number of readers subscribed to my blog. (Although the number isn`t that big )

It Starts ! Feedburner API

Hmm..so where did I start…. Ahh ! The Feedburner API ofcourse. I wanted to know how to retrieve the number of Readers of a particular RSS feed as simple text.
http://code.google.com/apis/feedburner/awareness_api.html had the answer to my problem !

Current Basic Feed Awareness Data
https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=<feeduri>

where <feeduri> = your feedname i.e vmdtuts in my case

Sample Response
circulation – An approximate measure of the number of individuals for whom your feed has been requested in the 24 hour period described by date.

Thats what I was looking for !!. Now Since I have a way to access information about my RSS feeds, I had to think of a method to request the API url and retrieve the result using PHP (ofcourse).
Note : If you try to access the above URL with your feed address, you`ll see an XML output with all the relevant details about your feed !.

Thank You CURL – Here is the Code

We`ll use CURL to make a request to the above URL and retrieve the XML output.

$my_feed_url = "https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=yourfeedurl"; // yourfeedurl = vmdtuts in my case

$s_ch = curl_init(); //Initialize Curl
curl_setopt($s_ch, CURLOPT_RETURNTRANSFER, 1);//Set curl to return the data instead of printing it to the browser.
curl_setopt($s_ch, CURLOPT_URL, $my_feed_url); //Set the URL
$data = curl_exec($s_ch); //Execute the fetch
curl_close($s_ch); //Close the connection
$xml = new SimpleXMLElement($data);
$no_of_readers = $xml->feed->entry['circulation'];

echo $no_of_readers."Readers"; //Will display no of Readers

Voila There you have it. A Simple method to retrieve the number of readers who have subscribed to your RSS.

Tip : If you want to display the number of Readers in your WordPress Blog. Just open up sidebar.php and insert the code anywhere where you want to display the number of readers.

jQuery has surely made my life easier. I have been trying out both Prototype & jQuery for a couple of days now and for some reason, I find jQuery a lil easier compared to Prototype Javascript Library. Although Prototype is a much powerful library (according to me), jQuery is just too simple . Anyways I will show you a simple effect which you already must have seen in many places.

Demo : The Category section in the sidebar in this site.

EDIT : Added Collapse All, Expand All Code as well

This code can be extended in creating a full-fledged dynamic Collapsible Menu. Mainly you can use this code in you Blogs (if you have a large array of Categories) to group your categories/tags.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){

//Store Image paths
var toggleMinus = 'path/to/minus/image';
var togglePlus = 'path/to/plus/image';

var $subHead = $('.children').parent();

//Add the Plus image to every child by default
$subHead.prepend('<img src="' + togglePlus + '" alt="collapse this section" /> ');

//By Default put the Menu in collapsed state
$('.children').parent().children('ul').slideUp('fast');

//Expand All Code
$('.expand').click(function() {
		$subHead.children('ul').slideDown('fast');
		$('img', $subHead).attr('src', toggleMinus);
});

//Contract All Code
$('.contract').click(function() {
		$subHead.attr('src', toggleMinus).children('ul').slideUp('fast');
		$('img', $subHead).attr('src', togglePlus);
});

//Expand or Contract one particular Nested ul
$('img', $subHead).addClass('clickable').click(function() {
var toggleSrc = $(this).attr('src');
if ( toggleSrc == toggleMinus ) {
$(this).attr('src', togglePlus).parent().children('ul').slideUp('fast');
} else{
$(this).attr('src', toggleMinus).parent().children('ul').slideDown('fast');
};
});
});
</script>

Basically .children can be kept same if you are planning to use this in your WordPress Blog (for Categories or any unordered list or ordered list since WordPress assigns class=children to nested lists)

If you want to use this code in some other form, then .children has to be replaced with the class name of the nested list. For Example, the above code works for lists like

<a href="javascript:void(0);" class="expand">Expand All</a>
<a href="javascript:void(0);" class="contract">Contract All</a>
<ul>
	<li>Main 1
<ul class="children">
	<li>Sub 1</li>
	<li>Sub 2</li>
	<li>Sub 3</li>
	<li>Sub 4</li>
</ul>
</li>
	<li>Main 2
<ul class="children">
	<li>Sub 1</li>
	<li>Sub 2</li>
</ul>
</li>
	<li>Main 3</li>
</ul>

This is how it looks. (I haven`t added Expand All and Collapse All in the Demo Here)

• Main 1
  • Sub 1
  • Sub 2
  • Sub 3
  • Sub 4
• Main 2
  • Sub 1
  • Sub 2
• Main 3

You can style the unordered list not to display the bullets using CSS which I haven`t shown above.

I hope you guys enjoyed this post. If you guys have any questions, your comments are welcome.
Signing off.

How many of you have always dreamt of creating an Auto Suggest Box. I bet everyone must have seen one of these somewhere or the other. if you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.

Today I am going to teach you how to create an Auto Suggest Box using Prototype, Script.aculo.us. The script.aculo.us auto suggest box (autocompleter) replicates this control, but gives the developer control of the probable suggestions.

Index

• Page 1 : Introduction and
• Page 2 : Auto Suggest Box (local)
• Page 3 : AJAX Auto Suggest Box (remote via PHP/MySQL)

Demo & Source Download

Type out the name of the states of U.S.A.
Local Auto Suggest Box Demo : Click Here
Remote Auto Suggest Box Demo : Click Here

Download Source Here

Problem Statement

Lets try creating an Auto Suggest Box which displays the states of America as the user begins to type a state’s name in the text box.

Solution

Before using any functions, first we need to make our HTML page i.e how the suggestion box is going to look.

1. Create an empty HTML file.
2. First, to take the input of any state name from the user we need an input box.
   Second, we need a container to display all the probable suggestions i.e different names of states according to User input.

   Lets create these right now.

       <!-- This code will be added inside the  <strong><BODY></strong> tag of the HTML page -->
       <input type="text" name="state_input" id="state_input" size="30" />
       <div id="state_suggestions"><!-- container for list of probable suggestions !--></div>
       

3. Now that we have designed our suggestion box, its time to implement the Auto Suggest Box method. Since this method is readily available as a part of Script.aculo.us, we need to include the scriptaculous file, and since scriptaculous depends on prototype, we need to include the prototype file to our HTML document. Type following code inside the <HEAD> tag.

   	<script src="js/lib/prototype.js" type="text/javascript"></script>
       <script src="js/src/scriptaculous.js" type="text/javascript"></script>
       

4. The HTML page should look something like this.

       <!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>Untitled Document</title>
       <script src="js/lib/prototype.js" type="text/javascript"></script>
   	<script src="js/src/scriptaculous.js" type="text/javascript"></script>
       </head>
       <body>
       <input type="text" name="state_input" id="state_input" size="30" />
       <div id="state_suggestions"><!-- container for list of probable suggestions !--></div>
   
       </body>
       </html>
       

Now that we have a HTML page ready, preview it. Obviously it won’t work yet. We still have to define the AutoCompleter function.

There are 2 ways to achieve our goal. Script.aculo.us’s Autocompleter comes in two flavors.

1. Autocompleter.Local : The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.
2. Ajax.Autocompleter : Which relies on a remote server to give it suggestions, making an AJAX Request whenever suggestions need to be retrieved.

Now both have thier Pros and Cons. I`ll explain each one of them and how they can be used.