Создание flash-облака тегов на своем сайте
75700
21
В сегодняшней статье пойдет речь о создании 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( " ", " ", $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 (внешний ключ)
-
Комментарии (21)
- Сайт
Facebook
Простая CRM
Нашли ошибку в тексте
