2.2. Кодирование

Кодирование — запись алгоритма на языке программирования. Создание сайта велось с использованием таких средств, как теговый язык разметки HTML и язык программирования PHP. На рисунке 8 представлен

код шаблона сайта, который уже подключен к CMS Joomla!

Рис. 9 Код шаблона сайта

В первых трех строчках защищаем файл от прямого вызова. Открывается PHP скобка, затем задаем команду defined(‘_JEXEC’) or die;. При помощи этой команды проверяется существование константы ‘_JEXEC’, если константа не найдена результат работы функции будет false. То есть, если попытаться набрать путь к файлу в поисковой строке браузера, то в доступе будет отказано.

В строке 4 есть код <!doctype html>, тем самым указывается тип текущего документа. Далее, в строке 5 идет код <html lang="ru">, здесь открывается html скобка, внутри которой будет вся разметка и указывается язык, на котором сделан сайт. В строках 6 и 7 открываем head сайта, а затем указываем тег, применимый только в CMS Joomla! - <jdoc:include type="head" />, данная строка выводит информацию из компонентов, в нашем случае будет выводиться информация в head.

В строке номер 8 используется тег <link/>, который служит для установления связи с внешним документом. Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка, а значение stylesheet определяет, что подключаемый файл хранит таблицу стилей (CSS). Далее используется атрибут href, который задает адрес документа, на который следует перейти. Последним следует атрибут type, который указывает браузеру, к какому типу относится элемент формы.

В строках 9 и 10 соответственно закрывается тег head и открывается тег body, в котором расположена вся основная разметка сайта. В 11 строке используется код <div id="container">. Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. В нашем случае это id=”container”. Размер элемента container задается максимальный, потому что внутри него будут остальные элементы.

В строку 12 помещается код <div id="header"> - это шапка сайта, где будет расположен логотип и название. Далее используется тег <p></p>, который определяет абзац, а внутри него теги <a></a> и <img/>. Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Чтобы убрать рамку вокруг изображения используется атрибут border="0". Строка 14 служит для отображения названия страницы, он же заголовок материала. Используется PHP команда <?= $this->title; ?>. Чтобы шапку сайта можно было редактировать через Joomla! используется команда <jdoc:include type="modules" name="top" style="xhtml" />. Тип «модуль», имя «топ». В строке 17 закрывается тег </div> для header. Таким образом, получается логотип, по нажатию на который, пользователь будет переведен на главную страницу сайта и заголовок этой страницы.

В строках 18-21 задается левый блок для сайта. Используется <div class="block" >, потому что точно такой же блок будет находиться справа. Внутри используется команда <jdoc:include type="modules" name="left" style="xhtml" />, чтобы при работе с Joomla! была возможность добавлять информацию в левый блок.

В строках 22-25 помещается код, который служит для создания основного блока сайта main. Команды <jdoc:include type="message" />, <jdoc:include type="component" /> служат для привязки к CMS Joomla! type="message" предназначен для вывода системных сообщений, а type="component" для вывода основного содержания страницы.

В строках 26-28 задается правый блок для сайта. Используется <div class="block" >, внутри используется команда <jdoc:include type="modules" name="left" style="xhtml" />, чтобы при работе с Joomla! была возможность добавлять информацию в правый блок.

Команда <div class="clear"> </div> записывается в строках 29-30. Она служит для того, чтобы снять обтекание с объектов. В 31-34 строчках задается подвал сайта с помощью команды <div id="footer">. Внутри него указывается <jdoc:include type="modules" name="footer" style="xhtml" />, чтобы при работе с Joomla! была возможность добавлять информацию в нижний блок. Последние три строки являются закрывающими, для тега <div id="footer">, <body> и <html> соответственно. Все размеры и цвета указаны в файле style.css, который подключался в самом начале. Таким образом, получается рабочий шаблон сайта.

Далее рассмотрим файл templateDetails.xml, в котором содержится вся основная информация о шаблоне. Код представлен на рисунке 10.

Рис.11 Код файла templateDetails.xml

В первой строке используются PHP скобки для того, чтобы указать версию шаблона и кодировку. В нашем случае версия шаблона 1.0, а кодировка UTF-8. Далее используется тег <extension>, в котором содержится вся информация о сайте. В строке 3 указан тег <name>, он отвечает за название шаблона – как он будет называться в CMS Joomla!. В нашем случае это SadTemplate. Далее соответственно идут строки, которые указывают дату создания шаблона, автора, e-mail автора и версию шаблона. Этим параметрам соответствуют теги <creationDate>, <author>, <authorEmail>, <version>. Все теги двойные.

В восьмой строке используется тег <files>, который указывает все файлы, которые входят в данный шаблон. По порядку идут два тега <folder>, которые указывают папку css и папку language. Это директории со стилем и языковыми пакетами соответственно. В строках 11-13 указывается тег <files>, то есть прямой доступ к файлам, а именно index.html, который создан для защиты от прямого доступа, index.php, в котором хранится вся разметка шаблона и templateDetails.xml – это тот файл, в котором сейчас работаем.

Далее в строках с 15 по 20 указываются позиции согласно их названию в файле index.php. Тег <positions> указывает на то, что сейчас происходит работа с позициями, а <position>, указывает отдельные названия позиций. В нашем случае – это top, left, right, footer. Данная процедура делается для того, чтобы в дальнейшем в эти блоки можно было добавлять информацию в CMS Joomla!

Строки с 21 по 24 указывают путь к языковым пакетам. В данном случае указывается только русский язык. В самом конце указываются конфигурации, параметры для шаблона. Строки с 32 по 35 закрывают все ранее открытые теги.

Теперь рассмотрим процесс создания галереи с помощью уже готовых решений. Было выбрано расширение Eventgallery, так как его функционала достаточно для наших задач. С официального сайта был скачан архив, затем, уже в самой CMS Joomla! данный архив был установлен. Использовался пункт «Расширения», затем подпункт «Менеджер расширений», затем еще один подпункт «Установить». При успешной установке на экране появляется сообщение «Установка расширения Eventgallery была проведена успешно».

Для того чтобы добавить фотографии на страницу, нужно выбрать пункт меню «Компоненты», затем «Eventgallery», после пункт «Manage Events» и уже там добавлять фотографии, предварительно создав страницу.

Теперь, чтобы страница отображалась на сайте, нужно зайти в пункт «Менеджер меню» и добавить туда фотогалерею. При этом, чтобы фотографии отображались без папки, а встали красиво нужно выбрать подпункт «Event-Image List».

Таким образом, был рассмотрен процесс кодирования на примере создания шаблона для сайта.