Генератор форм

Для веб-мастера

Реклама


Создание flash-облака тегов на своем сайте

Рейтинг:
Дата: 27 февраля 2011 Просмотры 71498 Комментарии 21
Создание flash-облака тегов на своем сайте

В сегодняшней статье пойдет речь о создании flash-облака тегов на своем сайте! Работающий пример Вы можете посмотреть здесь.

Итак, облако тегов – это набор ссылок с ключевыми словами. Чтобы сфокусировать внимание посетителя на наиболее актуальных темах, размер шрифта тегов в облаке меняют в зависимости от количества постов, которые к нему относятся.

Большинство современных CMS уже имеют встроенные плагины, для построения облака тегов. Я же расскажу Вам как создать flash-облако тегов, для сайта, который пишется с нуля самостоятельно! Единственное требование – это Ваш сайт должен быть написан на PHP и использовать базу данных MySQL.

Прежде чем продолжить, давайте сформулируем основные требования к тегам:

После того как с требованиями определились переходим к формированию структуры базы данных. Для того чтобы информация в базе данных не дублировалась, предлагаю создать 3 таблицы в базе данных.

Первая таблица будет хранить Ваши заметки (статьи). Скорее всего эта таблица у Вас уже имеется! Я назову её articles и она будет содержать следующие поля:

У Вас же эта таблица может содержать и другие поля. Это не столь важно!

Для того чтобы создать эту таблицу необходимо выполнить следующий sql-запрос:

	CREATE  TABLE IF NOT EXISTS `articles` (
  `articles_id` int(11) NOT NULL  AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `addtime` int(11) unsigned NOT NULL DEFAULT  '0',
  `content` text NOT NULL,
  PRIMARY KEY (`articles_id`)
  )  ENGINE=MyISAM  DEFAULT CHARSET=utf8  AUTO_INCREMENT=1

Вторая таблица будет хранить все теги и я назову её tags. Эта таблица будет иметь всего два поля:

Для того чтобы создать эту таблицу необходимо выполнить следующий sql-запрос:

	CREATE  TABLE IF NOT EXISTS `tags` (
  `tag_id` int(11) NOT NULL AUTO_INCREMENT,
  `tag_name` varchar(50) NOT NULL,
  PRIMARY KEY (`tag_id`)
  )  ENGINE=MyISAM  DEFAULT CHARSET=utf8  AUTO_INCREMENT=1 ;

Для того, чтобы связать теги из одной таблицы с заметками в другой таблице, необходимо создать третью таблицу, которая будет называться articles_tags и которая будет содержать следующие поля:

Для того чтобы создать эту таблицу необходимо выполнить такой запрос:

	CREATE  TABLE IF NOT EXISTS `articles_tags` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `articles_id ` int(11) NOT NULL,
  `tag_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
  )  ENGINE=MyISAM  DEFAULT CHARSET=utf8  AUTO_INCREMENT=1 ;

Каждая запись в таблице articles_tags связывает один тег с одной статьей! Думаю с этим все понятно.

В этой статье я не буду рассказывать сам процесс администрирования, т.е. наполнения этих таблиц данными. Но в результате у Вас должно получиться что-то на подобии этого:

Таблица articles

Таблица tags

Таблица articles_tags

Из этой картинки видно, что статье №1 присвоено 2 тега: php (tag_id = 1) и html (tag_id = 2), а статье №2 один тег: css (tag_id = 3).

Итак, с требованиями и структурой базы данных разобрались! Теперь переходим к формированию самого облака тегов.

Так как вся информация хранится в базе данных, то первым делом выполним подключение к базе данных:

	$DB_host =  "localhost"; // имя сервера MySQL
$DB_user =  "root";    // имя пользователя MySQL
$DB_pass =  "pass";    // пароль на сервере MySQL
$DB_name =   "database";     // имя базы данных
/* Соединяемся с  сервером MySQL */
$db=mysql_connect($DB_host,$DB_user,$DB_pass);

/* Выбираем  необходимую базу    данных */
  mysql_select_db($DB_name, $db);
/*  Устанавливаем     кодировку */
  mysql_query('SET  NAMES utf8');

Для того чтобы получить список всех тегов и узнать количество постов, к которым относится тот или иной тег, необходимо выполнить следующий запрос:

	$result =  mysql_query("SELECT c1.tag_id, c1.tag_name, COUNT(c2.tag_id) AS quantity
  FROM site_tags AS c1
  JOIN site_page_tags AS  c2 ON c1.tag_id = c2.tag_id
  GROUP BY c1.tag_id");

Теперь обработаем полученные данные и сформируем список тегов, со ссылкой на страницу, где будут выводиться все заметки, связанные с этим тегом.

	$data = array();
  $min = 0;
  $max = 0;
  //минимальный  размер шрифта
  $minSize = 8;
  //максимальный  размер шрифта
  $maxSize =  22; 
  //Формируем массив  тегов и получаем минимальное и максимальное количество постов, присвоенных  одному тегу
  while($myrow  =  mysql_fetch_assoc($result)){
     $data[] = $myrow;
     if ($myrow['quantity'] > $max) {
        $max = $myrow['quantity'];
     }
     if ($myrow['quantity'] < $min) {
        $min = $myrow['quantity'];
     }
  }
  //Перебираем массив тегов и задаем размер шрифта для тегов
  $tags = '';
  foreach ($data as $row) {
    //Определяем размер шрифта 
    if($min == $max){
       $fontsize =  round(($maxSize - $minSize) / 2 + $minSize);
    }
    else{
     $fontsize =  round((($row['quantity'] - $min)/($max - $min)) * ($maxSize - $minSize) +  $minSize);
    }
  //Формируем  ссылку на список статей связанных с этим тегом
  $tags .= '<a  href="tags/'.$row['tag_id'].'" style="font-size:  '.$fontsize.'pt;">'.$row['tag_name'].'</a>';
  }

В результате выполнения этого кода, у нас получается строка тегов, со ссылками на заметки связанные с этим тегом.

На этом можно было бы и остановиться, но мы решили сделать flash-облако тегов. Для этого нам понадобятся два дополнительных файла: tagcloud.swf и swfobject.js, которые и будут выводить flash-облако тегов. Их Вы найдете в исходниках внизу статьи. Сразу скажу, что эти файлы я взял из официального плагина для wordpress - WP-Cumulus

Плагин имеет следующие настройки

	$divname = 'tagsclud'; //id контейнера, где будет выводиться  облако
  $movie = 'tagcloud/tagcloud.swf'; //  путь до flash ролика облака тегов
  $movie .= '?r=' . rand(0,9999999); //  случайное число
  $width = 170; // ширина контейнера
  $height = 200; // высота контейнера
  $bgcolor = 'ffffff'; // цвет фона
  $tcolor = '333333'; // цвет шрифта
  $tcolor2 = '333333';
  $speed = '100'; // скорость вращения  тегов
  $distr = true;
  $mode = 'tags'; // режим анимации

Далее выводим flash-облако тегов на экран:

	<?php 
   if(!empty($tags)){    
  $tagcloud =  '<tags>'.urlencode(str_replace( "&nbsp;", " ",  $tags)).'</tags>';
  ?>
  <div  id="<?=$divname?>"></div>
  
  <script  type="text/javascript"  src="tagcloud/swfobject.js"></script>
  <script  type="text/javascript">
  var  rnumber = Math.floor(Math.random()*9999999);
  var  widget_so = new SWFObject("<?=$movie?>",  "tagcloudflash", "<?=$width?>",  "<?=$height?>", "9",  "#<?=$bgcolor?>");
  widget_so.addParam("wmode",  "transparent");
  widget_so.addParam("allowScriptAccess",  "always");
  widget_so.addVariable("tcolor",  "0x<?=$tcolor?>");
  widget_so.addVariable("tcolor2",  "0x<?=$tcolor2?>");
  widget_so.addVariable("tspeed",  "<?=$speed?>");
  widget_so.addVariable("distr",  "<?=$distr?>");
  widget_so.addVariable("mode",  "<?=$mode?>");
  widget_so.addVariable("tagcloud",  "<?=$tagcloud?>");
  widget_so.write("<?=$divname?>");
  </script>
  <?php
  }
  else{
     echo 'В базе  данных нет тегов';
  }
  ?>

Ну вот собственно и все! Удачи!

Скачать исходники можно здесь

  • Любой из заметок на Вашем сайте можно присвоить любое количество тегов;
  • Один и тот же тег, может быть присвоен любому количеству заметок
    • articles_id – первичный ключ
    • title – заголовок статьи
    • content – контент статьи
    • addtime – дата создания статьи
    • tad_id – первичный ключ
    • tag_name – название тега
    • id – первичный ключ
    • articles_id – id статьи из таблицы articles (внешний ключ)
    • tag_id – id тега из таблицы tags (внешний ключ)
Оцените эту статью:

Интересуетесь разработкой сайтов на PHP с применением модели MVC?

Рекомендую Вам ознакомиться с курсом "PHP и CodeIgniter с Нуля: Создание Динамических Web-Сайтов".

Курс записан на DVD и содержит 131 видеоурок.

В процессе обучения Вы  получите все необходимые знания и умения для создания мощных PHP-сайтов  без необходимости вникать во все тонкости данного языка!

Подробнее ->

Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Топ комментаторы

  • Иван (1)

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/124.html
3,91 из 5 на основе 28 оценок.
Твиттер Facebook Google plus RSS