Yazar Mesaj
Kaan #73   2019-11-21 09:05 GMT        

Yönetici

Çevrimiçi durum

76 mesajları
https://ntka.org

Bu etiket bulutu içinde sadece PHP ve css kullanıyoruz. Tag cloud'un ne olduğunu açıklamak istemiyorum çünkü buna aşina olacağınızı ve bunun ne kadar yararlı olduğunu bileceksiniz. Bir etiket bulutu nasıl yapılacağı hakkında konuşalım.

Veritabanımızdan biraz bilgiye ihtiyacımız var. Bu yüzden aşağıdaki sql betiğini kullanarak bir veritabanı oluşturmanız gerekir.


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

Aşağıda etiket bulutu üreten kodumuz var. 

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

Etiket bulutumuzun ekran görüntüsü aşağıdadır.

Bu komut dosyasında, etiket bulutu görünümünü kolayca kontrol edebilirsiniz. Etiket renginizi ve yazı tipi boyutunu, bazı css kodlarını değiştirerek değiştirebilirsiniz.

Ayrıca, faktör bulutunu bulduğunuzda değiştirerek etiket bulutunuzda kullanmak istediğiniz stil sayılarını da değiştirebilirsiniz. 10 etiket stilini kullanmak istiyorsanız, 6 ile 9 arasındaki döngü değişikliği için 10'a bölünecektir.

Etiketlerinizi sıklığa göre sıralamak istiyorsanız, yapmanız gereken tek şey aşağıdaki gibi sorgu dizesini değiştirmektir.

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