Pages

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";

5 comments:





  1. Hi Your Blog is very nice!!

    Get All Top Interview Questions and answers PHP, Magento, laravel,Java, Dot Net, Database, Sql, Mysql, Oracle, Angularjs, Vue Js, Express js, React Js,
    Hadoop, Apache spark, Apache Scala, Tensorflow.

    Mysql Interview Questions for Experienced

    php interview questions for experienced

    php interview questions for freshers

    python interview questions for freshers

    tally interview questions and answers

    ReplyDelete
  2. This website online is mostly a stroll-through for the entire info you wished about this and didn’t know who to ask. Glimpse here, and also you’ll undoubtedly uncover it. online casino gambling

    ReplyDelete
  3. Superb blog I visit this blog it's extremely marvelous. Interestingly, in this blog content composed plainly and justifiable. The substance of data is exceptionally instructive.
    oracle fusion financials classroom training
    Workday HCM Online Training
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training
    Oracle Fusion HCM Classroom Training

    ReplyDelete
  4. Thank you Sir!
    It worked!!!!!!

    ReplyDelete