Для начала, нам потребуется хостинг. Т.е. дисковое пространство с поддержкой php.
Файлообменники или бесплатные галереи в данном случае не подойдут, т.к. на них мы можем закачать только статическое изображение. Наша же картинка будет каждый раз меняться, т.е. создаваться заново индивидуально для каждого пользователя серверным приложением.
Что делать, если своего веб-сервера у вас своего нет, а оплачивать хостинг совсем не хочется? Есть множество бесплатных хостингов, но я остановился на выборе www.ho.ua
Заполняем форму:
На e-mail приходит активация.
Активируем и получаем логин с паролем.
FTP-client (FTP клиент)
Для того, что бы управлять файлами на хостинге, воспользуемся Total Commander’ом: http://www.ghisler.com
Заходим в утилиту управления FTP-соединением. Ctrl+F.
Жмем кнопку «Добавить». И заполняем все поля значениями, которые выслали нам на е-мейл
Добавилось новое FTP соединение. Выбираем его из списка, жмем кнопку «Соединиться» и получаем доступ к файлам.
Editor (Текстовый редактор кода)
Мы будем работать с программным кодом и вручную, поэтому воспользуемся программой Notepad ++ (http://notepad-plus.sourceforge.net/ru/site.htm) которая красиво подсвечивает код php.
Скачиваем, устанавливаем и запускаем программу. В меню Синтаксис активируем поле - PHP.
2. Создание юзербара в графическом редакторе
Создаем растровое изображение размером 350 x 19. Всё зависит от ваших мастерских умений в Photoshop. По созданию юзербаров любой сложности можно найти очень много уроков, в этом уроке не буду подробно останавливаться на данном вопросе.
Единственное, что вам нужно рассчитать, это место для графического элемента, желательно с каким-то однотонным фоном. Таким элементом в моем уроке будет выступать обычный текст.
У меня получилось:
Я оставил место между машиной и логотипом 007 специально для текста, который будет оповещает о долгожданной премьеры фильма.
3. Подготовка инструментария
Речь идет об инструментарии нашей серверной оболочке.
Рассмотрим все элементы, с которыми нам предстоит работать.
Файл со скриптом
Это файл, который будет содержать программный код для генерации графического изображения. Находиться он должен, только на сервере.
В моем конкретном случае, место этом файлу в директории htdocs
.htaccess - файл дополнительной конфигурации веб-сервера Apache. На хостинге который я выбрал, такой файл уже существует в директории htdocs . Если ваша цель – хранить на том хостинге только юзербары, то можете созданный файл почистить.
Копируем себе с FTP на жесткий диск файл .htaccess и открываем его блокнотом, или же другим специализированным редактором. У меня для таких целей служит – Notepad++. Если вы хотите заняться динамическими юзербарами всерьез и надолго, то не поленитесь, скачайте и установите.
Уже составленый список программного обеспечения:
Photoshop, Total Commander, Notepad ++. Открываем блокнот и вставляем код:
4. Создаем скрипт
Открываем блокнот Файл-Создать. Копируем код
PHP код:
<?php
header("Content-type: image/jpeg");
$im = @ImageCreateFromJPEG ("userbar.jpg");
$color = imagecolorallocate($im, 255, 255, 255);
$element = " Since 31.10.2008";
imagettftext($im, 10, 0, 45, 13, $color, "Visitor TT2 -BRK-.ttf", $element);
imagejpeg($im, NULL, 100);
imagedestroy($im);
?>
Как видим со скриншота, я вас не обманываю, все действительно просто:
Сделаем небольшие пояснения по программному коду того, что вам нужно изменить для того, что бы создать юзербар под свои потребности.
$im = @ImageCreateFromJPEG ("userbar.jpg");
Это переменная с адресом изображения, на который будем накладывать свой эффект. У меня это userbar.jpg, который находится в одной папке со скриптом. Если у вас скрипт в корневой директории, а картинка в папке images, то путь будет таким:
$im = @ImageCreateFromJPEG ("images/userbar.jpg") ;
$color = imagecolorallocate($im, 255, 255, 255);
Переменная с цветом. Если вы немного разбираетесь в RGB, то понимаете, что это белый.
Подробней об RGB
Сгенерировать код нужного цвета
К примеру вам нужен черный цвет. Тогда наша строчка будет иметь такой вид:
$color = imagecolorallocate($im, 0, 0, 0);
Зеленый: $color = imagecolorallocate($im, 0, 255, 0);
Синий: $color = imagecolorallocate($im, 0, 0, 255);
Красный: $color = imagecolorallocate($im, 255, 0, 0);
$element = " Since 31.10.2008";
Это строковая переменная (в рамках урока рассматриваем только строковые), в которой должно содержаться то, что мы собираемся выводить на экран.
imagettftext($im, 10, 0, 45, 13, $color, "Visitor TT2 -BRK-.ttf", $element);
Накладываем текст, который содержится в переменной $element.
Где 10 – размер шрифта, 0 – угол поворота картинки, 45 – смещение от левого края, 13 – смещение от верхнего края картинки. Visitor TT2 –BRK-.ttf – шрифт.
imagejpeg($im, NULL, 100);
Вывод картинки на монитор. 100 – максимальное качество изображения. Так как мы создаем небольшой юзербар, то мелочиться с качеством не стоит.
4.1. Шрифт
Программный код php обрабатывается на сервере специальным модулем php в Apache2, и на выходе мы получаем готовый продукт. В основном генерируется html-код, но в нашем случае - картинка.
Поэтому не нужно беспокоится о том, что у пользователя нет такого шрифта ненужно, вся процедура выполняется сервером, но как раз о наличии этого шрифта на сервере нам нужно и позаботиться.
Закачать шрифт нужно в нашем случае нужно в папку htdocs и указать к нему путь.
Путь указывается в программном коде в этой строке:
imagettftext($im, 10, 0, 160, 13, $color, "Visitor TT2 -BRK-.ttf", $ element);
В двойных скобках указываем точное местоположение шрифта. Если шрифт вы закачали в ту же папку, где и главный срипт, то достаточно в точности скопировать имя файла шрифта. Если у вас много шрифтов, и для нихвы выделили отдельную папку fonts, то адрес будет такой: "fonts/Visitor TT2 -BRK-.ttf"
Таким образом, настройка шрифта сводится до процедуры в два действия:
1. Закачиваем шрифт через Total Commander на сервер
2. Указываем точный путь файла
Как видим, указывается не просто название шрифта, а полный путь до него. Поэтому, даже для того что бы использовать Arial нужно закачать его на сервер
5. Сохранение и размещение
Если вы строго следовали уроку, то не заниманились ни сохранением ни размещением php-срипта и скорее всего правильно сделали .
Сохраняем
В Блокноте: Файл – Сохранить как – Имя файла: userbarscript.php
У нас получился файл с расширением *.php
Если будете просматривать файл в Total Commander, обратите внимание, чтобы файл именовался чётко - userbarscript.php, а не userbarscript.php.txt к примру, в случае чего – переименуйте.
Размещаем
Просто скопируйте через Total Commander файл userbarscript.php в директорию вашего хостинга. Если необходимо будет сделать в скрипте изменение, копируйте обратно, изменяйте и заново заливайте – т.е. не всегда получится отредактировать файл непосредственно на сервере.
Динамический юзербар
Линейный вид
