Как создать свой компонент на joomla 1.6-2.5

Как создать свой компонент на joomla 1.6-2.5

FireShot Capture - 286260272.jpg (1600×1000) - http___kasha-malasha.ucoz.ru__ph_24_286260272.jpg

Создать компонент для Joomla считается высоким уровнем программирования. Этот элемент может пригодиться если вам нужно создать уникальный интерфейс для обычного пользователя. Или просто оттачивать навыки программирования. Разберемся в процессе создания компонентов для известного движка.

 

Часть 1 - Создадим простой компонент для Joomla 1.6-2.5 с именем firstpro

firstpro1 firstpro2 firstpro3

 Скачать исходник firstpro

 

1. ДЛЯ УСТАНОВЩИКА КОМПОНЕНТА НЕОБХОДИМО СОЗДАТЬ 2 ПАПКИ И XML ФАЙЛ УСТАНОВКИ:

папка admin - файлы для админ панели (они копируются в папку: /administrator/components/com_имя-вашего-компонента)
папка site - файлы для вывода компонента на сайте (они копируются в папку: /components/com_имя-вашего-компонента)
файл xmlназвание файла не имеет значение, например instal.xml (кодировка utf 8)

2. АДМИН ПАНЕЛЬ

В папке admin создадим: (все php файлы создавайте в UTF 8 без BOM)
• firstpro.php (исполняющий файл компонента)
• index.html (заглушка - нужна в любой папке)
• data/admin.css (стиль для админ панели)
• data/jquery-1.9.1.min.js (подключим файл готовой библиотеки JQuery)
• data/images/menu.png (подключим иконку для меню в админ панели, размер 16x16px)

Содержимое firstpro.php
<?php header('Content-Type: text/html; charset=utf-8'); //для корректной кодировки
$workdir = "/administrator/components/com_firstpro/"; //рабочая директория компонента
?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $workdir; ?>data/admin.css" />
<script type="text/javascript" src="<?php echo $workdir; ?>data/jquery-1.9.1.min.js"></script>
<h1 class="adminfirstpro1">firstpro - мой первый компонент</h1>
<div class="adminfirstpro2">Приветствую вас на своем первом и не последнем компоненте!</div>

Содержимое index.html
<!DOCTYPE html><title></title>

Содержимое data/admin.css
.adminfirstpro1 {color: green;font-size: 23px;}
.adminfirstpro2 {color: #000;font-size: 14px;}

Как все работает - в данном случае в админ панели будет запускаться файл firstpro.php - который может подключить другие файлы, css стили, JQuery скрипты или php файлы методом include (например: include "data/zapusk.php";)

3. ВЫВОД КОМПОНЕНТА НА САЙТЕ

В папке site создадим: (все php файлы создавайте в UTF 8 без BOM)
• firstpro.php (исполняющий файл компонента)
• index.html (заглушка - нужна в любой папке)
• data/style.css (стиль для вывода на сайте)
• data/jquery-1.9.1.min.js (подключим файл готовой библиотеки JQuery)

Содержимое firstpro.php
<?php header('Content-Type: text/html; charset=utf-8'); //для корректной кодировки
$workdir = "/components/"; //рабочая директория компонента
?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $workdir; ?>data/style.css" />
<script type="text/javascript" src="<?php echo $workdir; ?>data/jquery-1.9.1.min.js"></script>
<div class="sitefirstpro2">Вывод моего первого компонента на сайте!</div>

Содержимое index.html
<!DOCTYPE html><title></title>

Содержимое data/style.css
.sitefirstpro2 {color: #000;font-size: 18px;}

На сайте компонент будет доступен по ссылке: домен/?option=com_firstpro
В итоге мы создали папку admin и в ней разместили исполняющий файл, а также дополнительные файлы, папки, которых может быть столько, сколько вам необходимо, также создали папку site с ее содержимым - для вывода компонента непосредственно на сайте по ссылке: домен/?option=com_firstpro

4. ОСТАЛОСЬ ТОЛЬКО СОЗДАТЬ INSTAL.XML (КОДИРОВКА UTF 8)

Содержимое instal.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.6.0" method="install">
<!-- Имя компонента - (регистр не имеет значения) - от этого имени создается одноименная папка com_firstpro; такое имя будет показано в менеджере расширений после установки -->
<name>firstpro</name>
<!-- Следующие элементы являются необязательными -->
<creationDate>2015</creationDate>
<author>Vashe Imya</author>
<authorEmail>vashh@mail.ru</authorEmail>
<authorUrl>http://vashsait.ru</authorUrl>
<copyright>Все права защищены</copyright>
<license>Лицензия #002</license>
<version>2.5</version> <!-- Версия компонента -->
<!-- Описание компонента, не является обязательным, и по умолчанию используется имя -->
<description>Описание моего первого компонента firstpro</description>

<!-- Копируем файлы для отображения на сайте с папки site -->
<files folder="site">
<filename>index.html</filename>
<filename>firstpro.php</filename>
<filename>data/style.css</filename>
<filename>data/jquery-1.9.1.min.js</filename>
</files>

<!-- АДМИНИСТРАТИВНАЯ ЧАСТЬ В JOOMLA -->
<administration>
<!-- Создаем меню для аминистративной панели сверху (с иконкой - поключается ниже) -->
<menu img="components/com_firstpro/data/images/menu.png">firstpro</menu>

<!-- Копируем файлы для административной панели -->
<files folder="admin"> <!-- подключаем файлы с папки admin-->
<filename>index.html</filename>
<filename>firstpro.php</filename> <!-- главный и единственный файл компонента, от которого все работает в админке -->
<filename>data/admin.css</filename>
<filename>data/images/menu.png</filename>
<filename>data/jquery-1.9.1.min.js</filename>
</files>

</administration>
</extension>

5. ЗААРХИВИРУЕМ НАШ КОМПОНЕНТ В ZIP АРХИВ С ЛЮБЫМ ИМЕНЕМ (ПАПКИ ADMIN, SITE И ФАЙЛ INSTAL.XML), НАПРИМЕР FIRSTPRO.ZIP

На этом установщик компонента готов - после установки он появится в меню админки наряду с другими компонентами.

Еще раз напомню про папки после установки:
/administrator/components/com_имя-вашего-компонента - админ панель компонента
/components/com_имя-вашего-компонента - отображение на сайте компонента
На сайте компонент будет доступен по ссылке: домен/?option=com_firstpro

 Скачать исходник firstpro

 

Часть 2 - Как делать меню и подменю на русском, подключать языковые пакеты к компоненту Joomla.

Решил не создавать новый материал, а прописать все в текущем, итак:

1. Чтобы создать в админке Joomla подменю у компонента с переводом на русский - в xml файле пишите:
<menu img="components/com_firstpro/data/images/menu.png">COM_FIRSTPRO_MENU</menu>
<submenu>
<menu img="components/com_firstpro/data/images/spisok.png" link="option=com_firstpro">COM_FIRSTPRO_MENU_SPISOK</menu>
<menu img="components/com_firstpro/data/images/plus.png" link="option=com_firstpro&amp;add">COM_FIRSTPRO_MENU_ADD</menu>
</submenu>

не забудьте подключить иконки spisok.png и plus.png

Записи типа COM_FIRSTPRO_MENU - код языкового файла, который вам надо создать и установить вместе с компонентом.

2. Подключаем язык к компоненту для перевода меню

Внутри <administration></administration> xml файла добавьте

<!-- Языковой файл для перевода меню в админке -->
<languages folder="admin">
<language tag="ru-RU">data/language/ru-RU/ru-RU.com_firstpro.sys.ini</language>
</languages>

Теперь создайте файл (UTF 8 без BOM) ru-RU.com_firstpro.sys.ini в папке admin/data/language/ru-RU

и запишите в нем свой перевод:

COM_FIRSTPRO_MENU="Мой компонент"
COM_FIRSTPRO_MENU_SPISOK="Список"
COM_FIRSTPRO_MENU_ADD="Добавить"

Если вам что-то сложно понять - то всегда лучше смотреть на рабочем примере - можете скачать мой компонент недвижимости для Joomla 2.5 и посмотреть как там все устроено.

 

| | Как создать свой компонент на joomla 1.6-2.5 | Создать компонент для Joomla считается высоким уровнем программирования. Этот элемент может пригодиться если вам нужно создать уникальный интерфейс дл | http://blogprogram.ru/wp-content/uploads/2015/08/FireShot-Capture-286260272.jpg-1600×1000-http___kasha-malasha.ucoz_.ru__ph_24_286260272.jpg-131x131.png

2 коммент. на “Как создать свой компонент на joomla 1.6-2.5”

  1. Антон С:

    Работаю с php на Joomla. С помощью вашей инструкции смог сделать индивидуальный компонент для сайта. Спасибо!

  2. Сергей:

    Полезный материал - читать много, но все расписано по полочкам! После установки компонент заработал правильно =)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>