Lots of Code

Tag Cloud Script (Version 2) is now Available, with more customizable features

Introduction

In this tutorial i am going to show you how to create a basic word / tag cloud using php and utilizing php classes for easy inclusion. I am going to create a class based cloud, this is because it will be more convenient for you to adapt it on your own website(s), if you don't know much about class based programming then click here to take a look at the class tutorial.

Tutorial

First we need to create the class and for this example i am going to call the class 223wordCloud224 this is just my personal naming preference, feel free to call your cloud whatever you like, we are also going to assign the first class variable which will be the container of all the items in the array, we will call it 223wordsArray224.

<?
class wordcloud
{
var $wordsArray = array();
}
?>

Next, we need to assign the first function, because of the difference between PHP 4 and PHP 5 Constructors, i have created a method (function) called 223wordCloud224 and 223__construct224, when wordCloud is called it simultaneously call the PHP 5 constructor, so it's compatible with both versions like so.

<?
function __construct($words = false)
{
if ($words !== false && is_array($words))
{
foreach ($words as $key => $value)
{
$this->addWord($value);
}
}
}

function wordCloud($words = false)
{
$this->__construct($words);
}
?>

The main constructor basically can be used to load the words when the class object is created.

Now, we need to create a function to add words into the array as and when we need them.

<?
function addWord($word, $value = 1)
{
$word = strtolower($word);
if (array_key_exists($word, $this->wordsArray))
$this->wordsArray[$word] += $value;
else
$this->wordsArray[$word] = $value;

return $this->wordsArray[$word];
}
?>

The method above will basically check the array of words and if the word exists it will increase the repetition value, this can also be adjusted by manual input.

Next, we need to be able to get the size of the array, now because we have an array with values, we can use the values of all the items in the array added together like so.

<?
function getCloudSize()
{
return array_sum($this->wordsArray);
}
?>

Next, we need to create a function to calculate the class / range that each specific word should be assigned to, this will be done by using the percentage that will be returned from the final function.

<?
function getClassFromPercent($percent)
{
if ($percent >= 99)
$class = 1;
else if ($percent >= 70)
$class = 2;
else if ($percent >= 60)
$class = 3;
else if ($percent >= 50)
$class = 4;
else if ($percent >= 40)
$class = 5;
else if ($percent >= 30)
$class = 6;
else if ($percent >= 20)
$class = 7;
else if ($percent >= 10)
$class = 8;
else if ($percent >= 5)
$class = 9;
else
$class = 0;

return $class;
}
?>

Next we create a function that will shuffle all the values in the cloud, this is so that we can have a different output each time, this could be adapted so that it only shuffles the cloud if choose to.

<?
function shuffleCloud()
{
$keys = array_keys($this->wordsArray);

shuffle($keys);

if (count($keys) && is_array($keys))
{
$tmpArray = $this->wordsArray;
$this->wordsArray = array();
foreach ($keys as $key => $value)
$this->wordsArray[$value] = $tmpArray[$value];
}
}
?>

Now, we need to create a function to display the words, i have decided to make this function have two possible outputs, this is because if you would like more control over the output or if you would like to use less standard class names then you can do so, the two possible output types are an php array and html spans.

function showCloud($returnType = "html")
{
$this->shuffleCloud();
$this->fullCloudSize = $this->getCloudSize();
$this->max = max($this->wordsArray);

if (is_array($this->wordsArray))
{
$return = ($returnType == "html" ? "" : ($returnType == "array" ? array() : ""));
foreach ($this->wordsArray as $word => $popularity)
{
$sizeRange = $this->getClassFromPercent(($popularity / $this->max) * 100);
if ($returnType == "array")
{
$return[$word]['word'] = $word;
$return[$word]['sizeRange'] = $sizeRange;
if ($currentColour)
$return[$word]['randomColour'] = $currentColour;
}
else if ($returnType == "html")
{
$return .= "<span class='word size{$sizeRange}'> {$word} </span>";
}
}

return $return;
}
}

Ok, so now we have the class, we need to use this to create our cloud, this could be done like so.

<?

// You could add items to the class by passing them through the constructor

$randomWords = array("webmasterworld", "Computer", "Skateboarding", "PC", "music", "music", "music", "music", "PHP", "C", "XHTML", "programming", "forums", "Chill out", "email", "forums", "Computer", "GTA", "Freetimers", "css", "mysql", "sql", "css", "mysql", "sql", "forums", "internet", "class", "object", "method", "music", "music", "music", "music", "gui", "encryption");

$cloud = new wordCloud($randomWords);

// Or you could assign them manually
$cloud->addWord("harvey", 5);
$cloud->addWord("music", 12);
echo $cloud->showCloud();
?>

Don't forget to create your styles to display the different size fonts, this is a little something i have come up with.

<style>
<!--
.word {
font-family: Tahoma;
padding: 4px 4px 4px 4px;
letter-spacing: 3px;
}
span.size1 {
color: #000;
font-size: 2.4em;
}
span.size2 {
color: #333;
font-size:2.2em;
}
span.size3 {
color: #666;
font-size: 2.0em;
}
span.size4 {
color: #999;
font-size: 1.0em;
}
span.size5 {
color: #aaa;
font-size: 1.6em;
}
span.size6 {
color: #bbb;
font-size: 1.4em;
}
span.size7 {
color: #ccc;
font-size: 1.2em;
}
span.size8 {
color: #ddd;
font-size: .8em;
}
//-->
</style>

To finish off i will finish with the code in full.

Full PHP Tag Cloud Class

<?
/*
@wordCloud
Author: Derek Harvey
Website: www.lotsofcode.com

@Description
PHP Tag Cloud Class, a nice and simple way to create a php tag cloud, a database and non-database solution.
*/

class wordCloud
{
var $wordsArray = array();

/*
* PHP 5 Constructor
*
* @param array $words
* @return void
*/

function __construct($words = false)
{
if ($words !== false && is_array($words))
{
foreach ($words as $key => $value)
{
$this->addWord($value);
}
}
}

/*
* PHP 4 Constructor
*
* @param array $words
* @return void
*/

function wordCloud($words = false)
{
$this->__construct($words);
}

/*
* Assign word to array
*
* @param string $word
* @return string
*/

function addWord($word, $value = 1)
{
$word = strtolower($word);
if (array_key_exists($word, $this->wordsArray))
$this->wordsArray[$word] += $value;
else
$this->wordsArray[$word] = $value;

return $this->wordsArray[$word];
}

/*
* Shuffle associated names in array
*/

function shuffleCloud()
{
$keys = array_keys($this->wordsArray);

shuffle($keys);

if (count($keys) && is_array($keys))
{
$tmpArray = $this->wordsArray;
$this->wordsArray = array();
foreach ($keys as $key => $value)
$this->wordsArray[$value] = $tmpArray[$value];
}
}

/*
* Calculate size of words array
*/

function getCloudSize()
{
return array_sum($this->wordsArray);
}

/*
* Get the class range using a percentage
*
* @returns int $class
*/

function getClassFromPercent($percent)
{
if ($percent >= 99)
$class = 1;
else if ($percent >= 70)
$class = 2;
else if ($percent >= 60)
$class = 3;
else if ($percent >= 50)
$class = 4;
else if ($percent >= 40)
$class = 5;
else if ($percent >= 30)
$class = 6;
else if ($percent >= 20)
$class = 7;
else if ($percent >= 10)
$class = 8;
else if ($percent >= 5)
$class = 9;
else
$class = 0;

return $class;
}

/*
* Create the HTML code for each word and apply font size.
*
* @returns string $spans
*/

function showCloud($returnType = "html")
{
$this->shuffleCloud();
$this->max = max($this->wordsArray);

if (is_array($this->wordsArray))
{
$return = ($returnType == "html" ? "" : ($returnType == "array" ? array() : ""));
foreach ($this->wordsArray as $word => $popularity)
{
$sizeRange = $this->getClassFromPercent(($popularity / $this->max) * 100);
if ($returnType == "array")
{
$return[$word]['word'] = $word;
$return[$word]['sizeRange'] = $sizeRange;
if ($currentColour)
$return[$word]['randomColour'] = $currentColour;
}
else if ($returnType == "html")
{
$return .= "<span class='word size{$sizeRange}'> {$word} </span>";
}
}
return $return;
}
}
}
?>

<style>
<!--
.word {
font-family: Tahoma;
padding: 4px 4px 4px 4px;
letter-spacing: 3px;
}
span.size1 {
color: #000;
font-size: 2.4em;
}
span.size2 {
color: #333;
font-size:2.2em;
}
span.size3 {
color: #666;
font-size: 2.0em;
}
span.size4 {
color: #999;
font-size: 1.0em;
}
span.size5 {
color: #aaa;
font-size: 1.6em;
}
span.size6 {
color: #bbb;
font-size: 1.4em;
}
span.size7 {
color: #ccc;
font-size: 1.2em;
}
span.size8 {
color: #ddd;
font-size: .8em;
}
span.size0 {
color: #ccc;
font-size: .6em;
}
//-->
</style>

<?
$randomWords = array(
"webmasterworld", "Computer", "Skateboarding", "PC", "music", "music", "music", "music", "PHP", "C", "XHTML", "eminem", "programming", "forums", "webmasterworld",
"Chill out", "email", "forums", "Computer", "GTA", "css", "mysql", "sql", "css", "mysql", "sql",
"forums", "internet", "class", "object", "method", "music", "music", "music", "music", "gui", "encryption"
);

$cloud = new wordCloud($randomWords);
$cloud->addWord("music", 12);
$cloud->addWord("downloads", 8);
$cloud->addWord("internet", 17);
$cloud->addWord("PHP", 22);
$cloud->addWord("CSS", 32);
echo $cloud->showCloud();
?>

And this is how it should look, i have changes some of the colours for the more important words.

How to intergrate with a MySQL database.

Depending on how your information is stored in your database, an individual field or a comma seperated field then you can place the tags into the cloud from a MySQL results like follows.

Let's say we have a table called tags, if we have comma seperated values.

<?php

$cloud = new wordcloud();

$getBooks = mysql_query("SELECT title FROM `tags`");
if ($getBooks)
{
while ($rowBooks = mysql_fetch_assoc($getBooks))
{
$getTags = explode(' ', $rowBooks['title']);
foreach ($getTags as $key => $value)
{
$value = trim($value);
$cloud->addWord($value);
}
}
}

$myCloud = $cloud->showCloud('array');
if (is_array($myCloud))
{
foreach ($myCloud as $key => $value)
{
echo ' <a href="path/to/tags/'.$value['word'].'" style="font-size: 1.'.$value['sizeRange'].'em">'.$value['word'].'</a> &nbsp;';
}

?>

If the tag is an individual field, then:

<?php

$cloud = new wordcloud();

$getBooks = mysql_query("SELECT title FROM `tags`");
if ($getBooks)
{
while ($rowBooks = mysql_fetch_assoc($getBooks))
{
$cloud->addWord($rowBooks['title']);
}
}
}

$myCloud = $cloud->showCloud('array');
if (is_array($myCloud))
{
foreach ($myCloud as $key => $value)
{
echo ' <a href="tags_url/'.urlencode($value['word']).'" style="font-size: 1.'.($value['range']).'em">'.$value['word'].'</a> ';
}
?>

Video Tutorials

• Installation Video Tutorial
• Including Tag Links Video

Finished.

Ok, so that's the tutorial over. Please have fun with the code, if you are a little confused then please check out the video tutorials, the quality is a little bad at the moment but i hope to arrange some better videos soon!

All comments and questions are welcome, provided they are related to this page.

A very simple way of passing data from one table to another is by using the select insert statement in sql.

INSERT INTO table (forename, dayphone, address1, address2, address3, postcode, country, email)
select r.first_name r.phone_number, r.address1, r.address2, r.address3, r.post_code, r.country, r.email from table2 r;

Concatenating in SQL is pretty simple, it's purpose is to connect fields and string together as one string, like so.

If you have a database table field called forename and you would like to have the word MR before each name, this is how it would be done.

SELECT CONCAT('Mr. ', forename) FROM table;

You can also pass as many arguments as you like through this function, for example.

SELECT CONCAT('Mr. ', forename, ' ', surname, ' - ', jobTitle) FROM table;

You can use a case statement in SQL like so:

SELECT
id, `name`, title,
CASE id
WHEN 2 THEN 1
WHEN 3 THEN 1
ELSE 0
END AS selectedCase
FROM table

A nice little way of adding a header image to a fluid layout it to break the header images into two slices and then assign the headers to a div in the same container like so.

<style type="text/css">
#myContainerName
{
background: url('/path/to/images/header-back.jpg') repeat-x;
height: 220px;
}

#myContainerName #leftBackground
{
background: url('/path/to/images/header-left.jpg') left no-repeat;
height: 100%;
width: 100%;
}

#myContainerName #rightBg
{
background: url('./path/to/images/header-right.jpg') right no-repeat;
height: 100%;
width: 100%;
}
</style>

And the HTML will look like so ...

<div id="myContainerName">
<div id="rightBg">
<div id="leftBg">
<!-- Content Here -->
</div>
</div>
</div>

This is a basic tutorial on how to create a basic css layout with three columns.

So to start in your css you need four classes / containers to begin.

Firsts your container for all the other containers becomes some what of a wrapper for all the other containers, in the class you will need assign the dimensions of the container - mainly the width and thenany other styles like borders can be added to make it your own. Our css and the html for the main container will look like this.

<style type="text/css">
#mainContainer
{
width: 760px;
border: 1px outset red;
}
</style>

<div id="mainContainer">

</div>

So now we have the main container we can create the left and the right containers for the content, we need to set a fixed with for both of the containers like so.

<style type="text/css">
#leftColumn
{
float: left;
width: 120px;
}
</style>

<div id="leftColumn">
This is my left column
</div>

So in a nut shell we have used the css property float to align the left box to the left. Thr process for the right is the same exept we float the div to the right (obviously) so ...

<style type="text/css">
#rightColumn
{
float: right;
width: 120px;
}
</style>

<div id="rightColumn">
This is my right column
</div>

Now all that is left is the center container, not this container is positioned below both floating div's and we set a margin from both the left and the right which then positions the center column directly in the middle.

<style type="text/css">
#centerColumn
{
margin-left: 140px;
margin-right: 140px;
}
</style>

<div id="centerColumn">
This is my center column
</div>

Now to sum things up, here is the whole code.

<style type="text/css">
#mainContainer
{
width: 760px;
border: 1px outset red;
}

#leftColumn
{
float: left;
width: 120px;
}

#rightColumn
{
float: right;
width: 120px;
}

#centerColumn
{
margin-left: 140px;
margin-right: 140px;
}
</style>
<div id="mainContainer">
<div id="leftColumn">
This is my left column
</div>
<div id="rightColumn">
This is my right column
</div>
<div id="centerColumn">
This is my center column, it is essential that this div is place below the other two floating divs
</div>
</div>

So now you shold be presented with nice clean boxed layout purley in css.

Any problems please let me know.

More layouts available, suh as Three Columns with Header, Menu and Footer

The simplest way to create a javascript popup is to create a function like so.

<script language="javascript" type="text/javascript">
<!--
// I have called the popup showPop
function showPop(url)
{
// This is the part that opend the new window, we set the url, name and dimensions of the window
newwindow = window.open(url,'name','height=400,width=550');
}
// -->
</script>

And then add the following to the anchor link you would like to popup.

<a href="#" onclick="return showPop('http://www.google.co.uk')"> see my popup </a>

A cool way of onloading functions in javascript can be done like so.

window.onload = function()
{
callFunctionOne();
callFunctionTwo();
// Etc
}

A very simple way to load the images into the browsers cache so when they are displayed they will not have to load the file and create a delay in the browser.

// Initiate the image count variable
var imageCount = 0;
// create an array to contain the preloaded image files
var preloadImages = new Array();

// Main function to load new image into browser
function preload(imageFile)
{
imageCount++;
preloadImages[imageCount] = new Image();
preloadImages[imageCount].src = imageFile;
}

// Basic function to load the images when the browser has loaded the webpage.
window.onload = function() {
preload('images/1.jpg');
preload('images/2.jpg');
preload('images/3.jpg');
preload('images/4.jpg');
preload('images/5.jpg');
}

This is a very basic JavaScript code to calculate the value of form elements.

It can become quite useful when wanting to add items up on the fly if you prefer not to use ajax or you do not have a server side scripting language available.