213 (+1)

Counter@PHP

Использование счетчиков для анализа посещаемости сайта
Общие принципы функционирования и типы счетчиков
Создание сложных текстовых и графических счетчиков

Поиск по сайтуДля желающих написать письмоПослать ссылку другуВерсия для распечатки




Часть IV

Графический счетчик

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

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

При загрузке любой html-странички загружается как непосредственно html-код, так и ряд графических файлов, а также множество вспомогательных (таблицы стилей, функции на JavaScript). Для понимания принципов работы удобнее все эти загружаемые файлы воспринимать как потоки данных. И самое интересное то, что непосредственно в потоке ничего не сказано о том, информация какого типа в нем находится. Тип передаваемой информации задается при помощи MIME-типа, который передается в заголовке. Браузер анализирует MIME-тип, и если он содержит значение "image/gif", то браузер будет интерпретировать данные как графику, если "text/html", то обрабатывать как web-страничку и т.д. И при этом совершенно не важно, какое расширение будет у передаваемого файла.

Что такое MIME?


Если расшифровать эту аббревиатуру, то мы узнаем, что это "многоцелевые расширения электронной почты" (Multipurpose Internet Mail Extensions). Дело в том, что впервые данный способ использовался при передаче прикрепленных файлов в электронных письмах. И необходимо было каким-то образом указать формат передаваемых данных. Вот тогда и был изобретен MIME. Но впоследствии эта концепция была расширена на представление типов данных и в других областях. В частности, при отправке web-сервером информации браузеру.

Любое описание MIME-типа состоит из 2-х частей, разделенных слешем. Первая часть определяет группу, к которой относится файл, а вторая - конкретный формат. Для каждого MIME-типа определен свой обработчик, т.е. указатель на программу, которая умеет обрабатывать такие файлы. Наиболее популярные форматы обрабатываются самим браузером. Список некоторых основных MIME-типов я привожу ниже.

  • text/plain - обычный текст в формате ASCII
  • text/html - web-страничка
  • text/xml - XML-данные
  • image/gif - графика формата GIF
  • image/jpeg - графика формата JPEG
  • image/png - графика формата PNG
  • application/zip - архивный файл формата ZIP

Любая информация, которая передается в браузер, предваряется служебным заголовком, в котором передается много важной информации, в том числе и тип передаваемых данных. По умолчанию, когда мы пишем PHP-код, интерпретатор языка выдает тип text/html, соответствующий HTML-страничке. Если же мы собираемся программно формировать графический файл, то нам необходимо уже самим выдать нужный тип, соответствующий тому типу графики, который мы будем формировать. Вот как это можно сделать:

<?

// Выдаем в браузер тип передаваемых данных
header("Content-type: image/png");

?> 

Функция header() специально предназначена для вывода служебных заголовков. В данном случае мы выдали заголовок, определяющий, что далее будут передаваться графические данные формата PNG.


Графическая библиотека GD



Для того чтобы мы могли работать с графикой в PHP, необходимо, чтобы в PHP была включена поддержка графической библиотеки. Наиболее популярная графическая библиотека, которая входит в дистрибутив PHP, разработана Томасом Буттелом и называется GD. На данный момент актуальной является вторая версия библиотеки, которая называется GD2. Прежде чем приступать к работе с графикой в PHP, необходимо проверить, что данная библиотека подключена. Это можно сделать, вызвав ранее описанную функцию phpinfo(). Если данная библиотека присутствует в составе PHP, то вы увидите информационный блок с именем GD, который описывает конкретные настройки графической библиотеки. В этой статье я не буду подробно останавливаться на подключении и конфигурировании библиотеки, а буду считать, что она уже подключена.

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

Нет никакого смысла рисовать графический счетчик полностью. Гораздо удобнее заранее нарисовать шаблон-картинку, задающий внешний вид счетчика, на котором уже и печатать текущее значение счетчика. Мы возьмем в качестве исходной картинки изображение размером 88x31, сохраненное в формате PNG.

Итак, первым делом нам необходимо загрузить в переменную изображение, которое хранится во внешнем файле. Попутно его нужно будет раскодировать из формата PNG. Это делается при помощи графической функции ImageCreateFromPNG():

<?

// Имя файла, в котором хранится графический шаблон счетчика
$file_image = "counter.png";

// Загружаем шаблон графического счетчика из файла
$im = @ImageCreateFromPNG($file_image);

?>

В качестве результата выполнения данной функции возвращается дескриптор на созданное в памяти изображение. Дальнейшее взаимодействие с изображением происходит только при помощи дескриптора. Он указывается в качестве первого параметра в большинстве графических функций. Точно таким же образом можно было бы загрузить изображение формата GIF или JPEG. Для этого необходимо было бы использовать функции ImageCreateFromGIF() или ImageCreateFromJPEG() соответственно.

Перед тем как что-нибудь рисовать на изображении, необходимо определить нужные цвета в палитре. Это делается при помощи функции ImageColorAllocate(). В качестве параметра ей передаются уже упомянутый ранее дескриптор изображения и составляющие цвета в формате RGB:

<?

// Определяем необходимые цвета в палитре
$background_color = ImageColorAllocate($im, 255, 255, 255);
$text_color = ImageColorAllocate($im, 0, 0, 0);

?>

Вот теперь мы можем приступить к рисованию. Или, в нашем частном случае, к печати текста на изображении. Это делается при помощи функции ImageString(). В качестве параметра этой функции передаются координаты надписи, номер шрифта, цвет и собственно текст, который необходимо напечатать. Координаты для размещения надписи нужно предварительно рассчитать:

<?

// Рассчитываем координаты надписи с учетом выравнивания вправо
$position_x = 84 - strlen($counter) * 5;
$position_y = 15;

?>

В данном случае, начало координат зависит от изображения-шаблона, а также от того факта, будет ли текст выровнен влево или вправо. В моем случае я выбрал текст, выровненный по правому краю, и поэтому рассчитывал координату x путем вычитания длины надписи от правого края. Т.к. в качестве надписи будут использоваться только цифры, то их ширина будет одинаковой и равна 5 пикселам. Я это знаю точно, потому что использую конкретный шрифт, встроенный в GD. Длину же строки в символах, можно узнать, воспользовавшись функцией strlen(). И вот, когда координаты уже известны, вызываем функцию ImageString():

<?

// Ранее прочитанное из файла значение счетчика
$counter = 14;

// Печатаем текстовую надпись на изображении
ImageString ($im, 1, $position_x, $position_y, $counter, $text_color);

?>

Цифра один, указанная в качестве второго параметра функции ImageString(), - это номер одного из пяти встроенных в графическую библиотеку шрифтов. Они отличаются лишь размером, и значение данного параметра может принимать значение от 1 до 5. Чем больше число, тем крупнее шрифт. Для шрифта с номером один ширина одного символа равна 5 пикселам. Этот факт я и использовал при расчете координат надписи.

Что же, мы уже почти все сделали! Осталось только выдать графические данные в браузер. Это можно сделать, используя функцию ImagePNG(). Но вы еще не забыли, что предварительно необходимо послать заголовок, определяющий тип передаваемых данных?

<?

// Выдаем в браузер тип передаваемых данных
header("Content-type: image/png");

// Выводим графические данные
ImagePNG($im);

// Удаляем изображение из памяти
ImageDestroy($im);

?>

После того как изображение было выдано в браузер и более нам не нужно, его необходимо удалить из памяти, используя функцию ImageDestroy(). Как и в случае с загрузкой, мы могли бы выдать в браузер изображение формата GIF или JPEG, используя функции ImageGIF() или ImageJPEG() соответственно.


Размещение счетчика на странице



Итак, графический счетчик написан, но его еще нужно разместить на страничке. Не забывайте, что в результате выполнения вышеописанного кода будет сформирован графический файл, но не страничка. Давайте вспомним, каким образом на страничке можно разместить изображение. Это делается при помощи тега <img>, который по сути является ссылкой на внешний файл изображения. В нашем случае внешнего файла не существует, и графический счетчик формируется динамически в момент запроса. Но способ подключения изображения к страничке остается тем же самым. Просто в атрибуте src тега <img> нам в качестве параметра необходимо будет указать адрес нашего графического скрипта.

Итак, нам необходимо создать отдельную HTML-страничку, в которой уже и сделать ссылку на графический счетчик. Соответствующий код странички может выглядеть следующим образом.

<html>
<head>
<title>Графический счетчик</title>
</head>

<body>

<h1>Графический счетчик</h1>

<img src="counter.php" width="88" height="31" alt="Графический счетчик">

</body>
</html>

Не замечаете ничего интересного? Ведь именно так подключаются абсолютно все графические счетчики, в том числе и предоставляемые такими грандами, как Rambler или Mail.Ru. Все дело в том, что графический счетчик может быть добавлен абсолютно на любую страничку, в том числе и статическую. А вот текстовый счетчик может быть поставлен только на динамическую страницу.


Архив с файлами к статье



cкачать архив с файлами к статьеcкачать архив с файлами к статье

Нажав на изображение дискеты, вы сможете скачать ZIP-архив с примерами счетчиков, описанных в статье. Ниже приведено краткое описание архива:

  • counter_text/ - простой текстовый счетчик;
  • counter_text_today/ - текстовый счетчик с учетом просмотров за сегодня;
  • counter_text_multiple/ - текстовый счетчик для нескольких страниц;
  • counter_graphics/ - графический счетчик;
  • phpinfo.php - печать информации о версии PHP и системном окружении.

Часть 1Часть 2Часть 3Часть 4 - ее Вы читаете сейчас


Свои мнения, пожелания и вопросы по выпускам Вы можете присылать по адресу mike@cherry-design.ru.
Я оставляю за собой право цитировать письма, пришедшие по вышеуказанному адресу.
Copyright © 2001-2008 Михаил Мельников. Перепечатка без разрешения запрещена.