PHP tag cloud

Tuesday, February 7, 2012

In this tag cloud, I use only PHP and css. I don't want to explain what is tag cloud because I think you will be familiar with it and you will know how it is useful. Let's talk about how to make a tag cloud.

We need some information from our database. So you need to create a database by using below sql script.

CREATE TABLE IF NOT EXISTS `tags` (
  `id` bigint(50) NOT NULL AUTO_INCREMENT,
  `tag_name` text NOT NULL,
  `frequency` int(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;
--
-- Dumping data for table `tags`
--
INSERT INTO `tags` (`id`, `tag_name`, `frequency`) VALUES
  (1, 'PHP', 100),
  (2, 'ASP', 10),
  (3, 'jQuery', 50),
  (4, 'Codeigniter', 100),
  (5, 'MySql', 50),
  (6, 'Google', 5),
  (7, 'Javascript', 7),
  (8, 'hardware', 4),
  (9, 'Design', 80),
  (10, 'Ajax', 30),
  (11, 'wordpress', 10),
  (12, 'css3', 30),
  (13, 'mobile', 15);

Below is our script that generate tag cloud. How simple it is.

<!DOCTYPE html>
<html>
<head>
<title>Tags cloud</title>
<style type="text/css">
.tags_container{width:300px;padding:10px 10px;}
.tags ul{padding:5px 5px;}
.tags li{margin:0;padding:0;list-style:none;display:inline;}
.tags li a{text-decoration:none;padding:0 2px;}
.tags li a:hover{text-decoration:underline;} 

.tag1 a{font-size:12px; color: #9c639c;}
.tag2 a{font-size:14px; color: #cece31;}
.tag3 a{font-size:16px; color: #9c9c9c;}
.tag4 a{font-size:18px; color: #31ce31;}
.tag5 a{font-size:20px; color: #6363ad;}
.tag6 a{font-size:22px; color: #ce6300;}
.tag7 a{font-size:24px; color: #9c3100;}
</style>
</head>
<body>
<?php 
 $con = mysqli_connect("localhost", "root", "","tagcloud");
 $query = "SELECT MAX(frequency) as num FROM tags";
 $result = mysqli_query($con,$query);
 $max = mysqli_fetch_array($result);
 if($max['num'] <10) $max['num'] = 10;
?>
<div id="content">
<div class="tags_container">
 <ul class="tags">
 <?php
  $factor = $max['num']/7;
  $query = "SELECT * FROM tags";
  $result = mysqli_query($con,$query);
  while($row=mysqli_fetch_array($result)){
   for($i=0; $i<=6; $i++)
   {
    $start = $factor * $i;
    $end = $start + $factor;
    if($row['frequency'] > $start && $row['frequency'] <= $end)
    {
     $tag_number = $i+1;
    }
   }
 ?>
  <li class="tag<?php echo $tag_number; ?>">
   <a href="#">
    <?php echo $row['tag_name']; ?>
   </a>
  </li>
 <?php
  }
 ?>
 </ul>
</div>
</div>
</body>
</html>

Below is the screenshot of our tag cloud.

In this script you can easily control your tag cloud appearance. You can change your tag color and font size by changing some css code.

You can also change the numbers of style that you want to use in your tag cloud by changing when you find the factor. If you want to use 10 tag style, you will divide by 10 and in for loop change 6 to 9.

If you want to order your tags according to the frequency, only thing you need to do is changing query string like below.

$query = "SELECT * FROM tags order by frequency desc";

TutsforWeb

Pages

PHP tag cloud

5 comments: