Создание компонентов joomla для новичков. Файлы и папки расширения
Приветствуем Вас уважаемые сайтостроители. В этом мини курсе от Виктора Гавриленко хотели предложить Вам ознакомиться с видео уроками по теме создание компонента для Joomla за 2 вечера.
Сегодня в интернете, Вы сможете найти большое количество компонентов для CMS Joomla. Каждый компонент решает свои задачи и само собой возникает вопрос — зачем создавать, когда можно найти готовый. Скачать или приобрести его и установить движок.
Но не каждый компонент который установите, может идеально работать и выводить именно те функции и задачи, которые Вы желаете видеть. Многие веб мастера стараются найти бесплатные решения и не платить за него. Тогда в этом, Вам поможет мини курс Виктора Гавриленко создание компонента для joomla за 2 вечера.
Но если Вы не продвинутый веб мастер и только еще познаете азы сайтостроения тогда можете использовать три варианта:
- первый вариант — это купить не смотря на её цену,
- второй вариант — это подыскать бесплатный вариант и заняться тем, чтобы его адаптировать для своего сайта, а также приходиться и платные компоненты редактировать под нужды Вашего сайта.
- третий вариант — это научиться создавать самому собственный компонент и решить поставленные задачи на сайте.
Если Вам подходит третий вариант и Вы готовы научиться создавать сами, тогда смотрите мини курс создание компонента для joomla за 2 вечера.
А если Вы сможете выделить еще два вечера, тогда сможете изучить и сверстать шаблон для сайта и в этом Вам поможет обучающий мини курс
Урок 1. Файловая структура компонента Joomla
В первом уроке миникурса мы поговорим о том, как и по какому принципу, работают компоненты системы управления контентом Joomla, как осуществляется взаимодействие элементов компонента, а также создадим файловую структуру будущего расширения.
Урок 2. Установка компонентов Joomla
Создав файловую структуру будущего компонента и определившись с принципом его работы, необходимо установить расширение в CMC Joomla, для создания его функционала.
Поэтому в данном уроке мы добавим инструкции по установке компонента в файл манифест, а также поговорим о локализации – то есть переводе элементов расширения на определенный язык.
Урок 3. Точка входа компонента Joomla. Первый вид
В данном уроке мы сделаем первые шаги по созданию функционала будущего компонента. А именно, реализуем точку входа, далее определимся с контроллером, который будет выполнять поставленные задачи, создадим главную страницу расширения – менеджер новостей, в котором в будущем будут отображаться добавленный новости. А так же поговорим о том, как создать панель управления в создаваемом компоненте.
Урок 4. Страница добавления нового элемента
В данном уроке мы начнем создавать страницу добавления нового элемента в базу данных. При этом мы поговорим о том, как создать форму для ввода данных, как создать дочерний контроллер и каково его предназначение, а также в логическую схему работы компонента добавим модель, которая необходима для формирования данных и последующего сохранения нового элемента в базу данных.
Урок 5. Создание модуля формы Joomla
Из данного урока Вы узнаете, как формируются поля будущей формы, какие типы полей доступны в стандартном функционале CMS Joomla, как отобразить сформированные поля на экране браузера, а также какие особенности создания различных типов полей.
Урок 6. Сохранение и редактирование новостей
В данном уроке мы реализуем механизм сохранения и редактирования новостей будущего компонента. При этом Вы узнаете, как обеспечить работоспособность элементов управления страницы, как сохранить информацию в базу данных о прикрепленном изображении, а также, как и по какому принципу осуществляется сохранение новых элементов.
Урок 7. Отображение списка добавленных новостей
В данном уроке мы закончим функционал панели администратора разрабатываемого компонента, а именно, отобразим на главной странице компонента список ранее сохраненных новостей. При этом Вы узнаете, как получить данные, используя модель, как сформировать запрос для выборки записей из базы данных, как вывести данные, используя макет, а также как реализовать механизм изменения состояния новостей.
Урок 8. Список новостей пользовательской части
В данном уроке мы отобразим в пользовательской части сайта список ранее добавленных новостей. При этом Вы узнаете, как формируется пользовательская часть компонента, как реализовать ссылку в главном меню сайта на интересующий вид компонента, а также как выбрать из базы данных записи по определенным условиям.
Урок 9. Страница детального просмотра новости
В данном уроке мы полностью завершим функционал компонента новостей для системы управления контентом Joomla. А именно, создадим страницу отображения информации по определенной новости, а также поговорим о том, как отобразить элементы управления постраничной навигацией на необходимых страницах расширения.
Третий урок по созданию MVC компонента
В этом уроке мы создадим форму для отправки сообщений, а так же отправим его на указанный E-mail указанный в настройках, сохраним запись в базу данных и выведем пользователю сообщение об успешной отправке сообщения!
Для начала отредактируем XML файл с нашей формой. Файл у нас находится по адресу: components/com_form/models/forms/form.xml
Сейчас этот файл содержит следующий код:
В нашей форме только одно поле с именем test. Нам нужно его удалить(или изменить) и сделать что бы у нас было 3 поля: Имя , E-mail и Сообщение
После добавления этих полей форма у нас будет выглядеть так:
Если обратить внимание у нас появилось несколько дополнительных атрибутов в полях field:
- required="true" - означает что поле будет обязательное, если его не заполнить будет ошибка!
- validate="email" - означает что выполнится проверка или в это поле введен E-mail адрес (проверка будет выполняться только на стороне сервера)
Теперь нам нужно вывести эти поля в форме!
Для этого откроем файл components/com_form/views/form/tmpl/default.php
Для вывода полей формы, которые мы перед этим создали в XML файле, используются строки:
//для вывода метки поля из атрибута "label" echo $this->form->getLabel("name"); //для вывода самого поля, название поля содержится в атрибуте "name" echo $this->form->getInput("name");
Теперь нам нужно вывести три наших поля в форме, и код шаблона нашей формы изменится на такой:
Форма обратной связи
В форме у нас есть одно скрытое поле:
это поле означает что наш скрипт запустит задачу save
в контроллере form
И еще одна непонятная конструкция в форме это:
.
Эта конструкция на самом деле всего лишь вставляет скрытое поле с уникальным значением! Служит это поле для защиты отправки формы вне сайта, то есть не выйдет создать на каком то чужом сайте форму с такими полями и отправлять на адрес этой формы какой либо спам!
Приблизительная его работа - в сессии генерируется случайное значение, и выводится в этом поле, после отправки формы проверяется или это значение пришло и совпадает ли оно с тем что установлено в форме!
На этом вывод формы завершен!
Теперь нам нужно зайти в контроллер нашей формы который находится по адресу: components/com_form/controllers/form.php . В нем есть такая строка:
$this->view_list = "Form";
В этой строке мы указываем на какой вид мы попадем в случае успешной отправки нашей формы. Так как мы хотим выводить отдельный вид result на котором будет сообщение которое мы заполняем в конфигурационном файле, то смело меняем значение в этой строке на result :
$this->view_list = "result";
Теперь приступим непосредственно к отправке письма и сохранения в архив записи!
Открываем нашу модель: components/com_form/models/form.php
.
В модели у нас есть метод:
Public function save($data){ return parent::save($data); }
Который выполняет сохранение данных и в случае успешного сохранения возвращает true
. В этом методе есть одно значение $data
которое представляет из себя асоциированный массив, в котором будут значения из отправленных в форме полей!
То есть например в $data["name"]
- будет значение из поля "Имя"
Теперь нам нужно сформировать тело письма, отправить письмо и сохранить его в базе данных! Эту часть у нас выполнит следующий код:
Public function save($data){ //Формируем тело сообщения $body = "
| Имя: | " . $data["name"] . " |
| E-mail: | " . $data["email"] . " |
| Текст сообщения: | " . $data["text"] . " |
Теперь наша форма сохраняет данные в базу данных, и отправляет данные на E-mail который вы указали в настройках нашего компонента в административной части!
В этом уроке мы создадим простой компонент, который строчку «Hello!» в браузере.
Перед тем, как начать создавать компонент, у Вас на сервере должна быть установлена CMS Joomla 1.5. Если Вы еще не установили, то это можно сделать с помощью уроков в разделе «Установка Joomla ».
В этом уроке сначала создадим папку компонента под названием com_hello, в которую нам нужно добавить пять файлов:
site/hello.php - точка входа в наш компонент;
site/controller.php - содержит наше основное управление компонентом (Контроллер);
site/views/hello/view.html.php - обрабатывает данные и передает их в шаблон для вывода;
site/views/hello/tmpl/default.php - шаблон для вывода данных;
hello.xml- XML служит для передачи инструкций для Joomla по установке компонента.
В следующих уроках мы будем добавлять еще файлы, и общая файловая структура нашего компонента будет выглядеть так, как показано на рис. 2.1. Скачать архив с исходными кодами можно здесь.
CMS Joomla всегда обрабатывает ссылку в корневом файле index.php для страниц Front End (сайт) или administrator/index.php для страниц Back End (админ-панель). Функция обработки URL загрузит требуемый компонент, основанный на значении "option" в URL (метод GET) или переданных данных методом POST.
Для нашего компонента, URL выглядит так:
index.php?option=com_hello&view=hello
Это означает, что если пользователь введет в браузере строчку http://имя сайта/index.php?option=com_hello&view=hello, то переменная «option» получит значение «com_hello&view=hello».
http://имя сайта/components/com_hello/hello.php.
Код для этого файла довольно типичен для всех компонент:
execute(JRequest::getVar("task")); // Переадресация $controller->redirect(); ?>
Примечание к коду:
JPATH_COMPONENT
– это абсолютный путь к текущему компоненту; в наше случае - components/com_hello.
Для Front End - JPATH_COMPONENT_SITE
Для Back End - JPATH_COMPONENT_ADMINISTRATOR
DS
означает автоматический выбор слеша (разделителя директорий) "\" или "/".
JRequest:getVar()
находит переменную в URL (или в данных POST). Например, наш URL может выглядеть так index.php?option=com_hello&controller=controller_name, тогда мы можем получить имя нужного нам контроллера, используя:
echo JRequest::getVar(“controller”).
Сейчас мы используем наш базовый контроллер-класс HelloController в com_hello/controller.php. При необходимости, добавляем контроллер HelloControllerController1 из com_hello/controllers/controller1.php.
Такой стандарт упрощает схему многозадачного компонента (это будет использоваться в последующих уроках, в данном случае в нашем компоненте одна задача).
Теперь мы инструктируем контроллер исполнить задачу, которая определена в URL: index.php?option=com_hello&task=sometask. Если нет определения задачи, то по умолчанию будет задача "display". Когда используется задача "display" , переменная "display" укажет то, что выводить. Пример стандартных задач - save, edit, new...
На последней строке кода контроллер переадресовывает страницу. Обычно используется для таких задач как SAVE.
Главная точка входа (hello.php) пропускает управление на контроллер, который обрабатывает выполнение задачи, которая была определена в запросе.
Создание Контроллера
Так как наш компонент имеет только одну задачу (вывод «Hello»), то он будет очень прост. Никакой манипуляции данными не требуется. Все что нужно сделать, это загрузить необходимый view. Поэтому, мы будем иметь только один метод в нашем контроллере: view (). Большинство требуемых функциональных возможностей уже встроено в JController класс. Потому мы должны только вызывать метод JController:: view ().
Код основного контроллера site/controller.php такой:
Конструктор JController будет всегда по умолчанию регистрировать задачу display() используя метод registerDefaultTask(), если не определена другая задача. В самом деле, метод display() не нужен после того, но в нашем случае он есть хорошей демонстрацией того, что делает контроллер.
Метод JController:: display() метод определит имя view и шаблон из запроса, потом загрузит view и установит шаблон. Когда Вы создаете пункт меню для вашего компонента, менеджер меню позволит администратору выбирать задачу с которой начинать выполнение компонента.
В нашем компоненте, view имеет единственное значение - hello и шаблон имеет единственное значение - default (по умолчанию).
Создание вида (view)
Для создания вида нужно извлечь данные, которые будут отображаться, и передать их в шаблон. Данные передаются в шаблон с помощью метода JView::assignRef
К од Вида в файле site/views/hello/view.html.php следующий:
assignRef("greeting", $greeting); parent::display($tpl); } } ?>
Создание шаблона
Joomla шаблоны являются файлами PHP, которые создают вид данных. Переменные, переданные с помощью метода JView::assignRef можно получить из шаблона с помощью $this->propertyname.
В нашем простом шаблоне site/views/hello/tmpl/default.php мы только выводим на экран приветствие.
greeting; ?>
Создание hello.xml
Компонент можно установить вручну путем копирования файлов с помошью FTP-клиента на сервер, и модификации базы данных.
Но лучше создать xml файл, и тогда Установщик Joomla все сделает за вас. XML файл может содержать разнообразную информацию и инструкции по установке:
- Общую информацию о компоненте и авторе.
- Список файлов, которые нужно скопировать из архива, с указанием куда копировать;
- По-необходимости можно добавить скрипты сопровождающие установку и удаление компонента;
- По-необходимости можно добавить файлы с sql-запросами, которые будут выполняться при установке и удалении компонента.
Наш XML файл выглядит так:
Hello 2007 02 22 Имя Автора author собачка mail.net http://www.autor.net Копирайт Лицензия Component Version String Description of the component ... index.html hello.php controller.php views/index.html views/hello/index.html views/hello/view.html.php views/hello/tmpl/index.html views/hello/tmpl/default.php Hello World! index.html admin.hello.phpСоздайте также в каталоге admin файлы admin.hello.php и index.html. Оставьте их пока пустыми.
Как Вы заметили, каждая папка имеет файлы index.html (рис. 2.1). Файлы index.html помещают в каждый каталог, чтобы препятствовать пользователям получать листинг каталога.
Эти файлы содержат одну единственную строку:
С помощью этих файлов будет отображаться пустая страница.
У нас получился простейший компонент.
Архив исходных файлов для этого урока можно скачать по этой ссылке:
Важно убедиться, что вы правильно подготовитесь к разработке и есть несколько аспектов написания компонентов Joomla 3.0, которые должны быть спланированы с первых дней. Это первая из серии статей о разработке расширений, без которой не понять процесса планирования структуры работы над расширениями. Вот те этапы, которые мы считаем наиболее эффективными в начале подготовки к успешному процессу разработки расширений.
Шаг 0: Сделайте кофе
В начале любой работы не помешает иметь под рукой чашечку чего либо, что будет держать тебя в тонусе и фокусировать на работе. Организовав рутину вокруг, мы готовим наше тело и мозг к работе. Начиная написание кода, важно чувствовать себя проснувшимся и бодрым. Как только вы с вашим напитком примете исходную позицию, можно начать.
Шаг 1: Жёлтый блокнот и любая ручка
Практически все наши проекты берут начало из жёлтых блокнотов. Вам может понравиться бумага другого цвета, это ваше дело. Руководствуясь рядом причин, я рекомендую жёлтый, но это необязательно. Так же я рекомендую ручку, а не карандаш. Карандаши ломаются, идеи утекают, линии стираются, а смысл тут не в том, чтобы нарисовать идеальный план, а скорее устроить мозговой штурм и нацарапать идеи на бумаге. Пользуясь ручкой, вы заставляете себя думать, а использование карандаша само по себе предполагает возможность стереть и переписать написанное.
Шаг 2: Определите ваши потребности, целевую аудиторию и проблемы, требующие решения
Итак, вы сидите с горячим напитком, блокнотом и ручкой и готовы приступить к следующему шагу. Начните записывать свои идеи. Начнём с проблемы, которую вы хотите решить, почему вы пишете это расширения, каковы основные идеи, на которых будете акцентировать внимание, и что вообще будет делать ваше расширение. Так же на этом этапе неплохо бы реализовать небольшое исследование. Существует ли ваш компонент на данный момент? Есть ли кто-то, кто выпускал похожий продукт и может составить конкуренцию? Насколько велика целевая аудитория компонента, который вы хотите написать? Эти аспекты важно учесть, т.к. есть некоторые меры предосторожности, на которые мы хотели бы обратить ваше внимание.
- Во-первых, не надо писать “Властелина колец” (один компонент, чтобы всем управлять, другой, чтобы всё объединить...), определите основную проблему, которую хотите решить и сосредоточьтесь на ней. Так вы упростите себе и жизнь, и маркетинг.
- Во-вторых, убедитесь в существовании целевой аудитории. Не думайте, что если компонент нужен вам, он внезапно понадобится всем остальным. Будьте реалистичны в прогнозах и это прибавит вам уверенности.
Шаг 3: Опишите процесс разработки расширения / приложения
Как только вы набросали идеи, определили целевую аудиторию, проблемы, которые собираетесь решить, следующим шагом будем описание вашего плана по разработке. Желательно это делать вместе с прошлым шагом. Выпишите контроллеры, инструменты и модели, которые вам понадобятся. Вероятно сейчас самое время отступить и обсудить первый важный этап разработки компонента Joomla! 3.0, систему модель-вид-контроллер (МВК).
Joomla реализует довольно стандартную структуру МВК, но, как бы то ни было, она отличается от MVC framework, используемой другими платформами. Joomla рассматривает каждую задачу как контроллер. Это означает, что вам понадобятся контроллеры названные “save”, “add”, “edit”, “delete” и т.д. Каждый контроллер отвечает только за одно задание. На первый взгляд может показаться, что у вас будет огромное количество файлов, но, в конечном счете, именно они обеспечат интуитивную работу компонента, а также смогут выполнять несколько команд одновременно.
Модели в Joomla выполняют фактические манипуляции с данными. Вот где пригодится вся логика и код. Модели в основном разрабатываются для отображения ключевых элементов и особенностей компонента. Внутри модели у вас будет список функций, относящихся к определённому объекту (листать, копировать, сохранять и т.д...).
В итоге у вас есть ваши файлы просмотра. Joomla! содержит стандартную методологию структуры создания таких файлов. На данный момент достаточно упомянуть, что они следуют определённой структуре в моделях с определёнными задачами к каждому объекту компонента.
Это должно обозначить краткое (может быть упрощённое) представление работы структуры МВК Joomla! и, надеюсь, достаточное, чтобы сделать возможным вами написание процесса разработки и перейти к следующему шагу.
Шаг 4: Организация структуры данных и табличной схемы
В то время, как существует множество способов начать разработку, следующий шаг мы нашли наиболее подходящим к последовательности. Как только мы записали все ключевые моменты и разработали план развития разработки, мы переходим к созданию структуры данных и табличной схемы.
На этом этапе мы будем брать каждую модель со всеми её функциями, и выписывать её в те поля, где собираемся использовать эту модель в таблице. При создании большинства компонентов вам понадобится таблица ассоциации моделей с данными. Есть несколько стандартных полей в таблице, которые используются при написании компонента. Как только мы выпишем таблицу структуры, мы так же будем следовать определённым правилам. Например, если мы планируем ассоциировать объект с определённой категорией, мы включим id категории в таблицу объекта, а также будем вписывать id пользователя, если хотим чтобы элементы ассоциировались с пользователем. Это поможет на позже, когда мы возьмём написанные вручную таблицы и начнём переносить их в SQL builder. Порой мы будем связывать таблицы линиями, чтобы легче понимать, как они взаимосвязаны.
Шаг 5: Установка метода для отслеживания обновлений (GitHub)
Этот шаг не является необходимым, но со временем не повредит настроить отслеживание обновлений версий платформы. По ряду причин мы предпочитаем GitHub. Если вы не знакомы с GitHub, можете использовать общественные (бесплатные) или частные (недорогие) репозитории, отслеживать изменения и осуществлять безопасное копирование всех ваших наработанных данных. Помимо всего это позволяет вам распределить написание кода между несколькими людьми, не беспокоясь о том, что они могут помешать работе друг друга. Необязательно использовать GitHub, это не единственный вариант, но критически необходимо найти место для безопасного хранения кода для возможного восстановления, обновления и защиты.
Шаг 6: Настройка локальной среды
Последним шагом в этой вводной статье мы рассмотрим настройку вашей локальной среды. Если обобщить, можно смело сказать что здесь есть множество способов написания кода и вместо того, чтобы описывать их, мы просто скажем, что это именно тот момент, когда следует подготовить среду. Мы локально установим Joomla! 3, скопируем репозиторий GitHub и переместим директории, если это будет необходимо. Мы используем Sublime Text 2 для управления кодом и инструменты Git вполне подходят для написания кода. Существует множество приложений, которые вы можете использовать и вместо того, чтобы унижать их, мы посоветуем вам найти наиболее удобный для вас и ваших методов написания кода.
В Joomla 2.5 треть разработчиков компонентов разделяют компонент согласно шаблону проектирования MVC:
- Модель (Мodel). Представляет данные и методы работы с этими данными, реагирует на запросы, изменяя своё состояние.
- Контроллер (Controller). Обеспечивает связь между пользователем и системой: контролирует ввод данных пользователем и использует модель и представление для реализации необходимой реакции.
- Представление (view). Отвечает за отображение информации (визуализация).
Создаем контроллер.
Joomla API включает в себя класс JController, который должен быть использован для расширения вашего контроллера. Добавьте в файл site/helloworld.php следующий строки кода:
execute(JRequest::getCmd("task")); // Redirect if set by the controller $controller->redirect();
getInstance – является статичным методом класса JController, который создает экземпляр класса контроллера. В приведенном выше коде экземпляром объекта класса контроллера является класс с именем HelloWorldController. Joomla будет искать объявление этого класса в файле controller.php.
Когда не ставится ни одно действие(action) в переменных url-запроcа, действием по умолчанию будет выполнено действие display, которое наследует класс HelloWorldController от класса JController. В нашем примере будет выведено представление с именем HelloWorld.
Создаем представление.
Когда контроллеру необходимо вывести представление, он будет искать конкретные файлы представления в каталоге component/com_/views// .
Название каталога представления по умолчанию является название самого компонента. В нашем случае это путь component/com_helloworld/views/helloworld/.
Файл, который будет содержать исходный код представления, будет вызываться view..php. Представление компонента по умолчанию использует html режим(view_mode). Таким образом, имя файла представления у нас получается таким - view.html.php.
Создайте представление site/views/helloworld/view.html.php:
msg = "Hello World"; // Display the view parent::display($tpl); } }
Метод display() класса JView вызывает метод display() класса JController. В нашем случае, этот метод будет выводить данные на экран, используя файл tmpl/default.php. Создайте файл site/views/helloworld/tmpl/default.php, который будет является шаблоном представления, содержащим:
msg; ?>
Этот файл шаблон будет включен в JView класс. Таким образом, здесь $tihs относится к классу HelloWorldViewHelloWorld.
Собираем компонент.
Пакет включает в себя файлы и директории:
- helloworld.xml
- site/index.html
- site/helloworld.php
- site/controller.php
- site/views/index.html
- site/views/helloworld/index.html
- site/views/helloworld/view.html.php
- site/views/helloworld/tmpl/index.html
- site/views/helloworld/tmpl/default.php
- admin/index.html
- admin/helloworld.php
- admin/sql/index.html
- admin/sql/updates/index.html
- admin/sql/updates/mysql/index.html
- admin/sql/updates/mysql/0.0.1.sql
Сожмите в zip-файл ваш каталог компонента или скачайте и установите его используя менеджер расширений. Протестируйте установленный компонент вставив index.php?option=com_helloworld в адресную строку браузера.
Листинг файла helloworld.xml: