Важно убедиться, что вы правильно подготовитесь к разработке и есть несколько аспектов написания компонентов Joomla 3.0, которые должны быть спланированы с первых дней. Это первая из серии статей о разработке расширений, без которой не понять процесса планирования структуры работы над расширениями. Вот те этапы, которые мы считаем наиболее эффективными в начале подготовки к успешному процессу разработки расширений.
Шаг 0: Сделайте кофе
В начале любой работы не помешает иметь под рукой чашечку чего либо, что будет держать тебя в тонусе и фокусировать на работе. Организовав рутину вокруг, мы готовим наше тело и мозг к работе. Начиная написание кода, важно чувствовать себя проснувшимся и бодрым. Как только вы с вашим напитком примете исходную позицию, можно начать.
Шаг 1: Жёлтый блокнот и любая ручкаПрактически все наши проекты берут начало из жёлтых блокнотов. Вам может понравиться бумага другого цвета, это ваше дело. Руководствуясь рядом причин, я рекомендую жёлтый, но это необязательно. Так же я рекомендую ручку, а не карандаш. Карандаши ломаются, идеи утекают, линии стираются, а смысл тут не в том, чтобы нарисовать идеальный план, а скорее устроить мозговой штурм и нацарапать идеи на бумаге. Пользуясь ручкой, вы заставляете себя думать, а использование карандаша само по себе предполагает возможность стереть и переписать написанное.
Шаг 2: Определите ваши потребности, целевую аудиторию и проблемы, требующие решенияИтак, вы сидите с горячим напитком, блокнотом и ручкой и готовы приступить к следующему шагу. Начните записывать свои идеи. Начнём с проблемы, которую вы хотите решить, почему вы пишете это расширения, каковы основные идеи, на которых будете акцентировать внимание, и что вообще будет делать ваше расширение. Так же на этом этапе неплохо бы реализовать небольшое исследование. Существует ли ваш компонент на данный момент? Есть ли кто-то, кто выпускал похожий продукт и может составить конкуренцию? Насколько велика целевая аудитория компонента, который вы хотите написать? Эти аспекты важно учесть, т.к. есть некоторые меры предосторожности, на которые мы хотели бы обратить ваше внимание.
- Во-первых, не надо писать “Властелина колец” (один компонент, чтобы всем управлять, другой, чтобы всё объединить...), определите основную проблему, которую хотите решить и сосредоточьтесь на ней. Так вы упростите себе и жизнь, и маркетинг.
- Во-вторых, убедитесь в существовании целевой аудитории. Не думайте, что если компонент нужен вам, он внезапно понадобится всем остальным. Будьте реалистичны в прогнозах и это прибавит вам уверенности.
Как только вы набросали идеи, определили целевую аудиторию, проблемы, которые собираетесь решить, следующим шагом будем описание вашего плана по разработке. Желательно это делать вместе с прошлым шагом. Выпишите контроллеры, инструменты и модели, которые вам понадобятся. Вероятно сейчас самое время отступить и обсудить первый важный этап разработки компонента 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 по адресу http://вашсайтру/administrator, введите логин и пароль. У вас откроется главная страница админ. панели.
Где: 1) Главное меню Joomla; 2) Панель быстрого доступа.
Главное меню админ. панели JoomlaНачинающих пользователей путают понятия модулей плагинов, компонентов и их расположение. Давайте попробуем разобраться в этом вопросе:
В Joomla есть 3 основных компонента "Менеджер пользователей", "Менеджер меню", "Менеджер материалов", они отделены от всех других, и для удобства и быстрого доступа, вынесены в отдельные пункты "Пользователи", "Меню" и "Материалы". Остальные можно найти открыв меню "Компоненты".
Пункт верхнего меню "Система" - здесь вы сможете произвести основные настройки сайта, выбрать редактор, очистить кэш, посмотреть информацию о движке и системе. А с выходом версии Joomla 3 теперь можно настроить и любой компонент.
Пункт меню "Пользователи" . Тут вы сможете добавлять, удалять, одобрять новых пользователей, делать рассылку, настроить права для пользователей, создать группы пользователей. Ваш профиль администратора с настройкой пароля, email, редактора, тоже находится в менеджере пользователей.
Пункт "Меню" . Если нужно добавить или изменить пункты меню на front-end сайте, то этот компонент поможет. Можно создавать отдельные группы меню сайта и выводить их при помощи модуля. В пунктах меню формируются ссылки на страницы сайта. Т.е. создавая пункт можно выбрать, на страницы какого компонента он будет вести. А компонент в свою очередь наполняется нужной информацией, которою можно вывести при помощи пункта меню. Кроме того можно сделать индивидуальные настройки отображения страницы на которую он ведет. Например указать "Показывать заголовок страницы или нет", "Какой шаблон отображать для этой страницы", "Настроить отображение мета информации страницы", "Порядок пунктов меню", "Какой из пунктов меню будет главной страницей", "Опубликовать пункт меню или скрыть" и др.
Пункт меню "Материалы" . С помощью этого компонента Joomla можно создавать страницы сайта с текстовым и медиа-, контентом. Страницы можно сортировать по группам при помощи категорий с неограниченной вложенностью. Материалы и категории можно выводить списком, в виде блога или по отдельности. Настройка отображения материалов производится через сам компонент, либо через общие настройки.
Пункт меню "Компоненты" . Тут вы найдете список всех установленных компонентов и сможете перейти в любой из них. Компоненты служат для создания и управления разного вида контента например каталог, магазин, форум и т.д.. Вывести содержимое компонента можно через меню выбрав его из списка.
Пункт меню "Расширения" - в подменю этого пункта вы найдете менеджеры модулей, плагинов, языков и шаблонов. А так же менеджер установки новых расширений, в том числе и компонентов.
Компоненты, модули, плагины и шаблоны JoomlaДля того, что бы двинуться дальше нужно разобраться в том, что лежит в основе этой CMS. Работа с Joomla строится на 4 основных видах расширений, которые создают практически неограниченные возможности по наращиванию функционала сайта, от визитки до полноценного интернет-магазина.
Тогда нужно посмотреть на front-end сайта и разобраться где модули, а где содержание компонентов. для наглядности выделил все модули красной рамкой, а компонент зеленой.
Где модули:
1) Модуль "Меню"; 2) Модуль "Календарь"; 3) Модуль "Произвольный HTML код" - где при помощи визуального редактора я разместил и настроил вид блока; 4) Модуль "Последние новости" - выводит последние материалы из выбранной категории. Тут выведено сразу три модуля с названиями "Конкурсы", "Новости", "События", по сути это одно и тоже только названия и категории материалов разные.
Компоненты:
5) С помощью компонента в данном случае выводится материал с заголовком "О проекте" и текстом.
Здесь я написал небольшое руководство для начинающих о том как пользоваться Joomla. Более подробную информацию о том как работать с Joomla вы сможете узнать из ссылок по теме в низу страницы.
В этом уроке мы создадим простой компонент, который строчку «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.
Код для этого файла довольно типичен для всех компонент:
Примечание к коду:
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 следующий:
Создание шаблона
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 , я (David Hurley) выбрал вариант прохождения непосредственно по процессу написания реального расширения. Этот компонент будет доступен для обзора и загрузки с сопроводительного веб-сайта Lendr (сейчас сайт недоступен), на который я буду ссылаться в этой и будущих статьях. Моя цель – это написание полноценного компонента, а не примера вроде "Hello World", для того чтобы продемонстрировать ключевые моменты реальной разработки компонента .
Шаг 1: Опишите основную схему компонентаПервым делом мы должны создать общий обзор файлов, папок, таблиц базы данных и связанных полей. Для нашего компонента мы создадим следующую систему.
Детали компонентаНазвание: Lendr
Название компонента: com_lendr
Описание: Lendr – это компонент Joomla! 3.0
(использующий Bootstrap), который позволит пользователям создавать профиль, добавлять книги в коллекции своей библиотеки, просматривать библиотеки других пользователей, попросить книгу в долг, добавлять книги в списки желаемых (wishlist), а также подписываться на список ожидания определенной книги.
Новый компонент Lendr будет иметь следующий набор возможностей:
- Аккаунты пользователей / Профили
- Книги / Библиотеки для пользователей
- Списки для желаемых книг
- Одалживание / Заимствование книги
- Запросы на заимствование книги
- Списки ожиданий на уже заимствованные книги
Теперь мы должны написать базовую структуру необходимых нам файлов. Это точно не будет исчерпывающий список, и он, скорее всего, будет изменяться в процессе написания компонента. Однако, имея изначальную схему, мы сможем хоть как-то придерживаться нашего пути. Вот первоначальная схема ключевых файлов необходимых для Lendr:
Save List Add Edit Lend Delete Wish Review Request Default |
Book Default Library Profile Review Waitlist Wishlist |
Book Wishlist Library Profile Waitlist Review |
Book Wishlist Library Waitlist Review |
Install Router XML |
Теперь, когда мы все выписали, мы начинаем создавать эти файлы в нашей структуре папок.
Шаг 2: Создайте файлы базы данныхМы начинаем с создания файлов базы данных. Мы сохраняем эти файлы в папке таблиц, которая расположена во фронтэнде нашего компонента. Мы создаем все файлы, которые описали в нашей схеме. Вот один из этих фалов /components/com_lendr/site/tables/book.php:
В нашей форме только одно поле с именем 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");
Теперь нам нужно вывести три наших поля в форме, и код шаблона нашей формы изменится на такой:
Форма обратной связи