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).

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.

Imagine this, You have a dynamic site powered by PHP/MySQL, its doing ok, you have submitted your website URL to all the known search engines, but still your site doesn’t seem to get much traffic from the search engines…ever wondered why ?

Well firstly, search engines have billions of pages to search. Imagine your link to be something like www.yourdomain.com/index.php?page=aboutme, its tough for any search engine to comprehend any keywords from the link.
But how about www.yourdomain.com/page/about-me.html ? These links are static Links, SEO Friendly Links, “Pretty Links”.

So today we are going to learn how to convert your ugly links into pretty links.

Index

1. Step 1 : Enable mod_rewrite in httpd.conf
2. Step 2 : Create A Simple PHP file
3. Step 3 : .htaccess file
   Method 1 – For only a single Variable
   Method 2 – For 1 and more than 1 Variable(s)
4. Conclusion

Ugly URLs
http://www.visionmasterdesigns.com/demo/seo/test.php?page=page1
http://www.visionmasterdesigns.com/demo/seo/test.php?page=page1&var=foo

Pretty URLs
http://www.visionmasterdesigns.com/demo/seo/page1.html
http://www.visionmasterdesigns.com/demo/seo/page1/foo.html

Click Here to download the script files.

Step 1 : Enable mod_rewrite in httpd.conf

Normally webservers already have mod_rewrite enabled. If it is not enabled, then you can request your host to enable it.

If you are going to try this tutorial in your local machine. Do check whether mod_rewrite module has been enabled in Apache. Do the following.

1. Navigate to your apache folder and open httpd.conf
2. Search for

   #LoadModule rewrite_module modules/mod_rewrite.so

3. Remove the commenting character i.e #, then save the file.
4. Restart the Server

About the .htaccess file

You must have seen or heard about .htaccess file somewhere.

Quote from wikipedia :
In the Apache web server, .htaccess (hypertext access) is the default name of directory-level configuration files. A .htaccess file is placed in a particular directory, and the directives in the .htaccess file apply to that directory, and all subdirectories thereof. It provides the ability to customize configuration for requests to the particular directory.

Normally the .htaccess file must be present in the directory where your script is stored.
For Example : If my script is
myserver.dev/prettyurl/test.php
then my .htaccess file will be saved in
C:\server\www\myserver.dev\public_html\prettyurl\.htaccess *

*This is applicable if you have followed –
Tutorial : Installing Apache, PHP 5, MySQL 5 & PhpMyAdmin 2.11 in Windows Vista/XP

Step 2 : Create A Simple PHP file

Lets create a simple PHP file. PHP allows us to retrieve values from the URL iself using $_GET function.

For Example :
http://myserver.dev/prettyurl/test.php?page=mypagename.
$_GET['page'] would give the value of page in the above url.

http://myserver.dev/prettyurl/test.php?page=mypagename&var=secondvar.
We can have retrieve quite a lot of data from the URLs by using multiple $_GET functions. In the above URL we can have $_GET['page'] and $_GET['var']

<?php

//test.php
//storing the retrieved val from URL into a variable
$p = $_GET['page'];
$q = $_GET['var'];

switch($p) {
    case 'page1':
    // if $p = page1 i.e url was something like test.php?page=page1
  		switch($q) {
		case 'boo':
		//if $p=boo then url is somehting like test.php?page=page1&amp;amp;var=boo
		echo "<h2>This is page1 And BOO</h2><br />";
		break;
		case 'foo':
		echo "<h2>This is page1 And FOO</h2><br />";
		break;
		default:
		// if $p = page1 i.e url was something like test.php?page=page1
		echo "<h2>This is page1</h2>";
		break;
		}
    break;
    case 'page2':
    // if $p = page2 i.e url was something like test.php?page=page2
    echo "<h2>This is page2</h2>";
    break;
    case 'page3':
    // if $p = page3 i.e url was something like test.php?page=page3
    echo "<h2>This is page3</h2>";
    break;
    case 'page4':
    // if $p = page4 i.e url was something like test.php?page=page4
    echo "<h2>This is page4</h2>";
    break;
    default:
    // if page != any of the above, then default is executed
    echo "<h2>This is the Default Page</h2>";
	break;
}
?>

Save the file as test.php.

Test out the script, if we access
http://myserver.dev/prettyurl/test.php?page=page1
the result will be ‘This is page1′.
Similarly http://myserver.dev/prettyurl/test.php?page=page2
will show the output ‘This is page2′ and so on.

If we access
http://myserver.dev/prettyurl/test.php?page=page1&var=foo
the output will be ‘This is page1 And foo’

This sample code in PHP is to just show you how a general linking system works. It shows how $_GET works and how we can add data in the URL’s using ‘&’ operator.

Step 3 : .htaccess file

There are different methods to create “Pretty URLS”. I`ll just discuss the most common and the most optimized ones.

Ok ! Firstly our local server won`t have a .htaccess file, so we will have to create one. Fire up notepad, then type the following code.
Save the file as .htaccess. Place it in the directory where you have saved your test.php script.

Method 1 – For only a single Variable

Consider our dynamic URL to be
http://myserver.dev/prettyurl/test.php?page=page2
and we want our pretty url to look something like
http://myserver.dev/prettyurl/page2.html

#.htaccess code
RewriteEngine On
RewriteRule ^(.*)\.html$ test.php?page=$1 [L]

Let me explain what every line does.

• RewriteEngine On
  This tells to start the Rewrite Engine.
• RewriteRule ^(.*)\.html$ test.php?page=$1 [L]
  The basic syntax of
  RewriteRule pattern target_url [flag,flag,flag,…]
  1. pattern is ^(.*)\.html$
     () – Parentheses allow you to group several characters as a unit and also to capture the results of a match for later use. The ability to treat several characters as a unit is extremely useful in pattern matching.

     (.*) – Matches anything.
     Eg: http://myserver.dev/prettyurl/page1.html where (.*)\.html matches page1.html

  2. target_url is test.php?page=$1
     $1 is a variable where $1 = (.*) from the pattern.
  3. flag is [L].
     There are various flags. [L] means, If there is a match with a particular rewrite rule, It has to be the last rewrite rule to be executed.

Now lets test run our script. If the dynamic link is like
http://myserver.dev/prettyurl/test.php?page=page1
then your pretty link will be
http://myserver.dev/prettyurl/page1.html
Similarly for page=page2 the link will be page2.html ,page=page3 the link will be page3.html.

Phew ! That took a lot of time. If you are able to see the same output for both the ugly links and the pretty links, then you Rewrite rules are working perfectly.

Method 2 – For 1 and more than 1 Variable(s)

Now what if your dynamic URL was like
http://myserver.dev/prettyurl/test.php?page=page1&var=foo.
For the above dynamic URL we want our static URL to look something like
http://myserver.dev/prettyurl/page1/foo.html.
We want the first variable to act as a directory, while the second one should be the file name.

Note that previously page=page1 had become ‘page1.html’ since there was just one variable. But now we have 2 variables (page=page1&var=foo) so we the structure should be like ‘page1/foo.html’

We have to write a new RewriteRule to support 2 variables.
Remember : As your variables increase, the new Rewrite rules come before the previous ones.

We are basically extending Method 1 by adding another RewriteRule to support 2 variables as input.

RewriteEngine On
RewriteRule ([^/]+)/(.*)\.html$ test.php?page=$1&var=$2 [L]
RewriteRule ^(.*)\.html$ test.php?page=$1 [L]

Let me Explain what the new line does.
RewriteRule ([^/]+)/(.*)\.html$ test.php?page=$1&var=$2 [L]

1. pattern is ([^/]+)/(.*)\.html$
   ([^/]+) – Which has the effect of matching any characters up to a slash or the end of the string, whichever comes first.
   (.*) – Matches anything

   ([^/]+)/(.*)\.html$ – characters up to slash ‘/’ any characters ‘.html’
   Eg: page1/foo.html where ([^/]+) matches page1 and (.*)\.html matches foo.html

2. target_url is test.php?page=$1&var=$2
   Every variable i.e $1 and $2 matches with the unit inside the paranthesis.
   $1 = ([^/]+)
   $2 = (.*)
3. flag is [L].
   There are various flags. [L] means, If there is a match with a particular rewrite rule, It has to be the last rewrite rule to be executed.

You can test it out
For all dynamic links like
http://myserver.dev/prettyurl/test.php?page=page1&var=foo
will have static URL’s like
http://myserver.dev/prettyurl/page1/foo.html

Conclusion

(Method 1   Method 2)
Thus for all dynamic links like

http://myserver.dev/prettyurl/test.php?page=pagex

will have static URL’s like

http://myserver.dev/prettyurl/pagex.html

(Method 2)
For all dynamic links like

http://myserver.dev/prettyurl/test.php?page=pagex&var=foo

will have static URL’s like

http://myserver.dev/prettyurl/pagex/foo.html

This was quite a basic tutorial. It is tough to understand the string matching patterns initially. But the logic is very simple. I hope the tutorial wasn’t tough to understand. If you guys have any doubts, feel free to comment here, I`ll try to solve them. Cya

Click Here to download the files.

Hello Guys,

I have been busy with college lately, since this is my last year in college, I need to do a very cool project to get some good marks . Anyways that doesn`t mean I won`t be postin tutorials here . Want to present your data using AJAX/PHP/MySQL by just coding few lines ? Well here it is. This tutorial teaches you how to present data using AJAX (using jQuery) with some neat effects. We can use PHP/MySQL to store the data and call it. In this tutorial I`ll teach you how to do so with PHP. So lets begin !

You can check the demo HERE.
You can download these files HERE

Index

1. Create the HTML page – index.html
2. • The CSS
   • The HTML
   • The Javascript
   • Final interface.html page
3. Create the PHP File – boo.php

HTML Page

Our HTML file will contain the javascript as well as the CSS styles embedded within it. We can also create the effect by creating individual files for each i.e one for javascript functions and the other for the CSS. Anyways in this tutorial, both of them will be embedded within the html page. Now First fire up your favourite HTML editor (Personally I love Dreamweaver CS3).

We will be using The jQuery Framework – jquery.js. If you want to know how the jQuery Framework works then do visit Exploring Javascript Frameworks : jQuery 1.2.6.

Step 1 – The CSS

Lets add our css first. First create a new HTML file, call it interface.html.
The following is the css code.

<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

/*MENU START*/
#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }
/* MENU END*/

#outcontent {clear:both; background-color:#FFFFFF; }
.content {background-color:#FFF; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }
</style>

The CSS is pretty straight forward.

• #page will be assigned to a div, which will hold our menu and other divs
• #menu is the CSS to display our menu tabs.
• #loading is the CSS to display the AJAX loading image.
• #outcontent is the container to contain .content

Put the above code inside the HEAD tag of interface.html. So interface.html will look something like the following.

<!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>interface.html</title>
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }

.content {
background-color:#FFF; background:url(ajaxinterface.jpg) bottom right no-repeat; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }

#outcontent {clear:both; background-color:#FFFFFF; }

</style>
</head>

<body>
</body>
</html>

The above is the HTML page interface.html with the CSS defined in it.

Step 2 – The HTML

Ok! Since now we have coded the CSS, lets create the HTML divs inside interface.html.

1. Inside the BODY tag lets create a div which will contain the menu and the subsequent divs.

<body>
    <div class="page">
    <!-- Menu and other divs go here !-->
    </div>
</body>

2. Then we`ll create the menu Tabs.

<body>
    <div class="page">
    <ul id="menu">
    <!-- you can add more tabs as you wish !-->
             <li id="about"	><a href="#" title="about">About</a></li>
            <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
            <li id="contact"><a href="#" title="contact">Contact</a></li>
	</ul>
	<br style="clear:both;" />
    </div>
</body>

3. Now we need a container to display our Loading text and our content, so we`ll create 2 divs and lets put these divs inside another div called outcontent. The following is how it`ll look.

<body>
    <div class="page">
        <div>
            <ul id="menu">
            <!-- you can add more tabs as you wish !-->
                         <li id="about"	><a href="#" title="about">About</a></li>
                        <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
                        <li id="contact"><a href="#" title="contact">Contact</a></li>
            </ul>
        <br style="clear:both;" />
        </div>
        <!-- #outcontent - Overall div containing Loading div &amp;amp; content div !-->
        <div id="outcontent">
           	 <div id="loading">LOADING</div>
            <div class="content"></div>
        </div>
        <!-- #outcontent end !-->
    </div>
</body>

interface.html

<!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>interface.html</title>
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }

.content {
background-color:#FFF; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }

#outcontent {clear:both; background-color:#FFFFFF; }

</style>
</head>

<body>
<div class="page">
<div>
<ul id="menu">
             <li id="about"	><a href="#" title="about">About</a></li>
            <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
            <li id="contact"><a href="#" title="contact">Contact</a></li>
</ul>
<br style="clear:both;" />
</div>
<div id="outcontent">
<div id="loading">LOADING</div>
<div class="content"></div>
</div>
</div>
</body>
</html>

The page should look something like the following

Step 3 – Add the Javascript Magic !

This page would do for static pages, but we are making an AJAX powered page ! Its time to add the magic.
First if you have read the Exploring Javascript Frameworks : jQuery 1.2.6 post, it should not be a problem.

1. First lets link to the jquery library

<script src="jquery.min.js" type="text/javascript"></script>

2. Next lets open the script tag again and add the following code. The following code is pretty explainatory. I have added a lot of comments to show what each and every line does.

<script>
  // When the document loads do everything inside here ...
     $(document).ready(function(){
	 $('.content').load('boo.php');	//by default initally load text from boo.php
         $('#menu a').click(function() { //start function when any link is clicked
		 				$(".content").slideUp("slow");
						 var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
							$.ajax({
							method: "get",url: "boo.php",data: "page="+content_show,
							beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
							complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
							success: function(html){ //so, if data is retrieved, store it in html
							$(".content").show("slow"); //animation
							$(".content").html(html); //show the html inside .content div
					 }
				 }); //close $.ajax(
         }); //close click(
	 }); //close $(
</script>

Voila ! thats it.

Our Final interface.html page

<!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>interface.html</title>
<script src="jquery.min.js" type="text/javascript"></script>
 <script>
  // When the document loads do everything inside here ...
     $(document).ready(function(){
	 $('.content').load('boo.php');	//by default initally load text from boo.php
         $('#menu a').click(function() { //start function when any link is clicked
		 				$(".content").slideUp("slow");
						 var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
							$.ajax({
							method: "get",url: "boo.php",data: "page="+content_show,
							beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
							complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
							success: function(html){ //so, if data is retrieved, store it in html
							$(".content").show("slow"); //animation
							$(".content").html(html); //show the html inside .content div
					 }
				 }); //close $.ajax(
         }); //close click(
	 }); //close $(
</script>
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }

.page { margin:100px auto 0 auto; width:750px;}

#menu  { list-style:none; margin:0px; padding:0px;}

#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }

#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }

.content {
background-color:#FFF; padding:10px; height:300px; margin:0px; }

#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }

#outcontent {clear:both; background-color:#FFFFFF; }

</style>
</head>

<body>
<div class="page">
<div>
<ul id="menu">
             <li id="about"	><a href="#" title="about">About</a></li>
            <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
            <li id="contact"><a href="#" title="contact">Contact</a></li>
</ul>
<br style="clear:both;" />
</div>
<div id="outcontent">
<div id="loading">LOADING</div>
<div class="content"></div>
</div>
</div>
</body>
</html>

Hello Everyone !

I am really excited ! Its been 18 days since the blog started and the response is amazing. I really hope these tutorials are helpful. Anyways I have seen a lot of people having problem setting up phpmyadmin and Lot more have no idea how to use it. So this tutorial is dedicated to you folks. I`ll teach you the basics of how to play with phpMyAdmin. Frankly I have not seen much tutorials on how to use phpmyadmin, and I don`t know how well you guys will like it.
Anyways

phpMyAdmin 2.11.x Front Page

The Front page shows you something similar to the above image. As you can see, On the left we have the existing databases. If there are none available its fine, and on the right we have the page which has a lot of text in it . You can see that I have marked the area from where you can create your database.
For more information about your mysql server, its configurations etc you can check the many links on this page. Exploring more links is the key to master it

Lets create a database called ‘test’

Now lets create a database called test. Put the name test in the Create New database box and click on create.

You`ll see something similar to the above when you create your first database. Cool ! Now you might notice that I have boxed an area in the above image.

• Structure – Shows you the structure of the database (Schema)
• SQL – You can use the query language to modify your database
• Search – Search for a particular item
• Query – Right now don`t worry about this much.
• Export/Import – You can export your database in SQL or import an equivalent
• Operations – Operations you can perform on your database
• Privileges – Shows you the user who can use this database and his privileges.
• Drop – Delete the database

Phew that was quite a bunch ! Lets move on. Now we have created our database test. Lets create tables in it. Click on SQL from the area I had marked in the image, and goto the next step.

Create table ‘user’

You will see a page similar to the above image. Write a SQL query to create a table.

CREATE TABLE user (
id INT AUTO_INCREMENT NOT NULL,
user VARCHAR(50),
pass VARCHAR(50),
PRIMARY KEY(id) )

If the code was executed successfully you`ll see something similar to the above image. I think the image is self explainatory. On the left the table you just created under database test. Click on ‘test’. you will be taken to the ‘Table Info Page’.

phpMyAdmin Database Info page

This page is where all your tables of a particular database are shown. As shown in the above figure, in the database test, we currently have only 1 table i.e user.

phpMyAdmin Table Info page

Ok ! So you clicked on test and something similar to the above image will be displayed. This page shows you the structure of your table. As you can see, the table we had created has 3 attributes

• id -int (Primary key)
• user -VARCHAR of size 50
• pass – VARCHAR of size 50

You can see in the above image, I have marked an area “edit the attributes”. Those little icons help to modify your attributes. From the Left -

• Browse – Browse values of a particular attribute
• edit – Edit structure of attribute, (example: change particular attribute’s datatype from VARCHAR to text)
• delete – delete particular attribute
• Primary, Unique, Index. (It is pretty self explainatory, if you know anything about DBMS)

Insert values inside table

Ok, Now you know how to create a database, create table inside a database. Lets learn how to insert values inside our table. First goto the ‘user’ ‘table info page’. then Click on Insert in the top.

You`ll see a page similar to the above image. As you can see, its pretty neatly laid out, I hope its not that tough for you to decide where to type your data *There is no need to type anything in id, since if you notice this line
id INT AUTO_INCREMENT NOT NULL which we had typed earlier to create a table ,you`ll see that id is a primary key & it auto increments as you go on inserting records.*

The above image will be displayed once you have inserted your values successfully. Now since you have inserted values, you can double check or see what all values your table contains by clicking on the Browse link on the top. It`ll browse the table for all the records. The following image is what it`ll look like.

phpMyAdmin Table browse page

You can see all the values for every record. You can edit, delete the records as well. The small Icons are very obvious and not hard to miss. PhpMyAdmin also gives the ability to see results for particular queries. Suppose you want to execute a query on a particular table then click on SQL on the top of the ‘Table Info/Browse Page’

Execute SQL queries on your table

The above page is how it`ll look like, you can type in any query to check.

Well, that was very basics of phpMyAdmin. If you guys want any help regarding other functions of phpmyadmin feel free to ask.

If the response for this tutorial is well, then I`ll move to the advanced phpmyadmin stuffz . Enjoy Guys

Found this tutorial really useful, you can click here to donate.

else you can click on just any ad

Its been 2 weeks since visionmasterdesigns.com was started and I am very glad with the response. Lot of people want to explore PHP/MySQL more and I think I`ll give in to that . So Today lets design a Content Management System using PHP/MySQL.

Index

• Page 1 : Introduction
• Page 2 : Database Work
• Page 3 : functions.php
• Page 4 : articlefunctions.php
• Page 5 : insertarticle.php
• Page 6 : editarticle.php
• Page 7 : article.php – Our start File
• Demo – Here
• Script – Here

Don`t get scared seeing the number of pages. This system has 5 files as listed above. Our CMS features add,edit and delete article records.

Introduction to CMS

CMS is an application through which you can add content without the need of uploading any files. You can create,edit,delete articles directly online. These articles are stored in the backend i.e database, in our case MySQL. Everytime user requests for a particular article, the php script retrieves the article and displays it to the user.

I`ll try to keep it as simple as possible.

Hey Everyone,

I have been busy lately, but that ain`t gonna stop me from writing tutorials ! Anyways I had promised a Ruby on Rails tutorial, I am working on that, I am trying to make it as descriptive as possible, but before I post that, a lot of people asked me what is AJAX, how to integrate it with PHP/MySQL etc ? Well guys, This tutorial is dedicated to you all !

Along with answering all your queries, I will be teaching you how to make a simple application in PHP/MySQL using AJAX.

Index

• Page 1 : Introduction
• Page 2 : Introduction to ‘AJAX’
• Page 3 : General AJAX code
• Page 4 : Ajax Application using PHP (Username validator)
• Click here to see demo

Required : Some basic knowledge in Javascript, HTML.