How to Create a Tag Cloud with PHP

If you have a news page or a blog on your website then a Tag Cloud is an excellent way to display frequently used phrases in a clear way to read. Using PHP and MySQL this tutorial will demonstrate how to set up the basics of a Tag Cloud, you can use this information as you want and are free to expand on it in anyway.

What you will need:

• Basic knowledge of HTML, PHP and MySQL
• A MySQL database
• A web server capable of running PHP

In this tutorial our tag cloud is being generated from a textarea form input (ie. A blog submission or news submission form). This can easily be modified to anything you want including a input specifically for tag words.

1. The first step would be to create your form input, create a form with a textarea and name it blogpost.

2. Once the input page has been created, the next step is to create the database with the correct table and columns (this tutorial won't go into the details of creating the database). With a database created, make a table called tag_cloud and 3 columns, the first is an INT column called id, this is the primary column and is auto incrementing. The second column should be called keyword and this is a VARCHAR(50). The last column should be called weight and is also an INT but is not auto incrementing.

3. The next step is create the processing and tag cloud display page. We will start with the processing code which will be placed above any HTML on the page. Firstly we need to connect to and select the correct database. This code will vary depending on your setup but connecting to a local MySQL installation would look something like:

$host = 'localhost';
$user = 'root';
$pass = 'root';
$db = mysql_connect($host,$user,$pass);
mysql_select_db("cloud", $db);

4. Next we will create a set of words we don't want to include in the cloud, this would only apply to a cloud like ours that is being generated from a news or blog post where 'all the time' words are being used. In a cloud where the tags are being entered manually then 'all the time' words wouldn't be included however you could still use this to block out swear words or words you specifically don't want. To create this word list we will assign them to a variable in a single string like:

$nonwords = "the is in at he her him she to too can a of if it you be on get"

You can have as many or as few words as you like in this list

5. The next step is to take the news or blog post and split it up into an array of words we can process. This will split the post by spaces into seperate words for use in the script later. The code to achieve this looks like this:

$text = $_POST['blogpost'];
$words = explode(" ",$text);

N.B. As some of you will have noted, splitting the post by spaces will ultimately mean that some phrases we want to keep will be cut in half (such as 'web site' or 'video processing'). This is one problem creating tags from a post, compared with manually entering tags where we can ask the user to seperate the tags with a comma etc.

6. The next step is to process each word, not use it if it exists in our non words, add it to the database with a weight of 1 if it doesn't exist or increment the weight if it does exist. This code looks like this:

if($text!=""){
foreach($words as $word){
    $word = str_replace(array(".",",",";","\""),"",$word);
    if (strpos($nonwords,strtolower($word))=== false){
        if(mysql_num_rows(mysql_query("SELECT * FROM tag_cloud WHERE keyword='$word'"))>0){
            mysql_query("UPDATE tag_cloud SET weight=weight+1 WHERE keyword='$word'");
        }else{
            mysql_query("INSERT INTO tag_cloud (keyword, weight) VALUES ('$word',1)");
        }
    }
}
}

A couple of things to note in this script which you may not need depending on your use. The first is the str_replace which is taking words that have full stops or commas etc next to them and taking them out, this wouldn't apply if your users were entering tags manually. The second thing to note is the strtolower, because our list of words is in lowercase and our post may not be, this converts the word to lowercase just to check againsnt the list.

7. Now the processing code is complete we need to display the tag cloud on our page. This will go between the body tags and will display larger words if they are used more in posts etc. The first step is to set our common variables, this include the allowed number (this is the weight number a tag has to reach before it is displayed on a page), setting this means that spelling mistakes etc arent displayed on a page. The other variables are the smallest and largest font size we want to include in our tag cloud. We set a maximum so that the font doesn't get too large and spoil the design of our page. The code for this is:

$allowedvalue = 2;
$largestfont = 20;
$smallestfont = 8;

8. The next step is to select all of our tags from the database as long as they are over the threshold set in the previous step.

$tags = mysql_query("SELECT * FROM tag_cloud WHERE weight>$allowedvalue");

9. The final step is to process each tag and display it on the page. In this script we set the base font size to the smallest font size set earlier, anything with a weight of 1 will be set to this size, for any additional weight point we increase the font size by 1 until we get to the maximum font size specified earlier. Anything over the maximum font size will be bolded to add a bit of design to the page. This code is as follows:

while($tag = mysql_fetch_assoc($tags)){
    $fontsize = $smallestfont+($tag['weight']-$allowedvalue);
    if($fontsize>$largestfont){$bold = "bold";}else{$bold = "normal";}
    if($fontsize>=$largestfont){$fontsize = $largestfont;}
    echo "<span style='font:".$fontsize."px arial;font-weight:".$bold."'>".strtoupper($tag['keyword'])." </span>";
}