Vision Master Designs » PHP & MySQL

Tutorial : Auto Completer using Prototype, Script.aculo.us

Michael — Sun, 26 Oct 2008 13:35:43 +0000

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.

Create an empty HTML file.
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.
```
    
    
    
    
```
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 tag.
```
	
    
    
```

The HTML page should look something like this.

    
    
    
    
    Untitled Document

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.

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

Tutorial : Creating “Pretty SEO URLS” using Apache’s mod_rewrite

Michael — Thu, 07 Aug 2008 09:11:30 +0000

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

Step 1 : Enable mod_rewrite in httpd.conf
Step 2 : Create A Simple PHP file
Step 3 : .htaccess file
Method 1 – For only a single Variable
Method 2 – For 1 and more than 1 Variable(s)
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.

Navigate to your apache folder and open httpd.conf

Search for

#LoadModule rewrite_module modules/mod_rewrite.so

Remove the commenting character i.e #, then save the file.
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']

This is page1 And BOO
";
		break;
		case 'foo':
		echo "This is page1 And FOO

";
		break;
		default:
		// if $p = page1 i.e url was something like test.php?page=page1
		echo "This is page1";
		break;
		}
    break;
    case 'page2':
    // if $p = page2 i.e url was something like test.php?page=page2
    echo "This is page2";
    break;
    case 'page3':
    // if $p = page3 i.e url was something like test.php?page=page3
    echo "This is page3";
    break;
    case 'page4':
    // if $p = page4 i.e url was something like test.php?page=page4
    echo "This is page4";
    break;
    default:
    // if page != any of the above, then default is executed
    echo "This is the Default Page";
	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]

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
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 = (.*)
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.

Tutorial : AJAX interface/menu using jQuery/PHP

Michael — Mon, 28 Jul 2008 15:24:34 +0000

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

Create the HTML page – index.html
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.

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.





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

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

Then we`ll create the menu Tabs.


    
    
    
             About
            Portfolio
            Contact

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.

interface.html





interface.html







             About
            Portfolio
            Contact





LOADING

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.

First lets link to the jquery library

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.

Voila ! thats it.

Our Final interface.html page





interface.html

 







             About
            Portfolio
            Contact





LOADING

Tutorial : Using phpMyAdmin to manage mySQL

Michael — Fri, 25 Jul 2008 17:53:00 +0000

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

Tutorial : Creating a Content Management System using PHP/MySQL

Michael — Sun, 20 Jul 2008 18:46:07 +0000

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.

Tutorial : Intoduction to AJAX with PHP

Michael — Thu, 17 Jul 2008 10:31:43 +0000

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.