Планирование структуры компонента

Создание дополнительных папок

В предыдущей главе была создана и установлена на сайт "заготовка" для компонента. Теперь можно приступать к дальнейшей работе. 

Планирование структуры компонента

В главе 2 было сказано, что важно заранее продумать основную структуру компонента, какие дополнительные папки вам понадобятся для удобства размещения и читаемости кода. Если вы это не сделали, то обязательно продумайте сейчас! Например, если ваш сайт предполагает размещение изображений, то целесообразно создать в компоненте папку  image , а не пользоваться общей папкой CMS. Обязательно нужно создать папку (или папки)  CSS , в которой будут размещены соответствующие файлы. Если у вас будут использоваться в нескольких местах какие-либо абсолютно одинаковые списки, то разместить их лучше всего в виде отдельных файлов в одной общей папке  lists  ("списки"), а в коде установить только указание на эти файлы. Чем это удобно? Представьте себе, что в этой же таблице у вас 20-30 строк и в каждой строке в первой ячейке установлен такой список. Если для каждой ячейки полностью прописывать эти списки, то представьте какой тогда получится код! К тому же, если возникнет потребность что-то изменить или добавить, то придётся каждый список редактировать отдельно, а в случае использования общего файла достаточно внести изменения только в этот файл.

Вот простой пример такой ячейки таблицы, в которой должен быть размещён выпадающий список; в этом случае код будет выглядеть так:

  1   <!-- 1 -->
  2       <tr>
  3           <td class='products'>

  4                 <select name='products_list' class='prod-list' required>
  5                         <?php include ('components/com_my_component/lists/list_1.php') ?>
  6                  </select>
  7           </td>
  8       </tr>

В строке 5 управляющая конструкция include включает и выполняет указанный файл list_1.php, находящийся в папке lists компонента com_my_component. Согласитесь, что это намного удобнее, чем прописывать списки для каждой ячейки!

Но это пока только теория; что бы было легче и быстрее во всём разобраться, нужно сочетать теорию с практикой! 

 Далее в качестве примера будет рассмотрено создание компонента "Форма обратной связи" (Feedback form). Но основная задача - понять принцип работы компонента, а создаваемые в качестве примера элементы могут быть использованы в любых других компонентах.

 Создание дополнительных папок

Создаваемый компонент "Форма обратной связи" будет состоять из предустановленного списка типа обращений, поля для ввода текста с кнопками оформления (жирное начертание, курсив, подчёркнутый текст, цитата, смайлики и т.п.), 3 полей для ввода изображений и кнопки "Отправить!". Так же предусмотрено создание страниц для администратора.

 Что бы вы могли попрактиковаться в создании данного компонента, скачайте его заготовку:


 Скачать заготовку компонента "Форма обратной связи" вы можете 

* Загрузка возможна только для зарегистрированных пользователей!


 

При установке будет автоматически создана база данных с колонками:

  • id (номер сообщения, до 11 символов, тип полей INT);
  • name (имя автора, до 100 символов, тип полей VARCHAR, по умолчанию пустое);
  • type (тип сообщения, до 20 символов, тип полей VARCHAR, по умолчанию пустое);
  • text (текст сообщения, до 1000 символов, тип полей VARCHAR, по умолчанию пустое);
  • img_1 (изображение 1, до 50 символов,  тип полей VARCHAR, по умолчанию пустое);
  • img_2 (изображение 2, до 50 символов,  тип полей VARCHAR, по умолчанию пустое);
  • img_3 (изображение 3, до 50 символов,  тип полей VARCHAR, по умолчанию пустое);
  • email (email автора сообщения, до 100 символов, тип полей VARCHAR, по умолчанию пустое);
  • IP (IP автора сообщения, до 50 символов, тип полей VARCHAR, по умолчанию пустое);
  • data_mess (дата сообщения, тип полей DATE);
  • time_mess (время отправления сообщения, тип полей TIME);
  • status_mess (статус сообщения, до 11 символов, тип полей INT).

 

Кроме того, колонка ID имеет значение PRIMARY KEY, т.е. "первичный ключ". Это значит, что поля данной колонки идентифицируют строку, поэтому содержат уникальные значения.

Установите на свой экспериментальный сайт на локальном сервере данную заготовку компонента.

После завершения установки проверьте наличие:

  • папки  com_feedback_form  в папке  components  сайта;
  • папки  com_feedback_form  в папке  administrator  сайта;
  • соответствующих элементов в этих папках.

Далее проверьте наличие созданной таблицы и колонок в ней. Для этого откройте PhpMyAdmin (зелёный флажок локального сервера > Дополнительно > PhpMyAdmin), выберите базу данных и проверьте наличие таблицы. Откройте таблицу, проверьте наличие всех указанных колонок. 

Если всё установлено правильно, приступайте к созданию дополнительных папок.

 Обратите внимание: пока административная часть рассматриваться не будет, поэтому все дальнейшие действия будут происходить с файлами и папками, расположенными в  com_feedback_form  в папке  components .

Так как форма обратной связи позволяет вводить изображения, необходимо создать папку для их хранения -  images . Так же создаём папку для файлов ошибок -  err . Ну и конечно же папку  model , в которой будет храниться файлы "логики", т.е. получающие и обрабатывающие данные.

Теперь откройте уже имеющуюся папку  views  и создайте ещё четыре папки:

  •  css  - для файлов CSS;
  •  tpl_new  - для файлов страницы новых сообщений;
  •  tpl_admin_feedback  - для файлов страницы администрирования;
  •  tpl_view_mess  - для файлов страницы просмотра сообщения администратором.

В результате всех этих изменений структура компонента (в папке  components) будет выглядеть вот так:

    com_feedback_form (главная папка)
     - err
     - images
     - model
     - views
           - - css
           - - tpl_new
           - - tpl_admin_feedback
           - - tpl_view_mess
           - - feedback_form
                   - - - index.html
                   - - - tmpl
                          - - - - default.xml
                          - - - - index.html 
   - controller.php
   - feedback_form.php
   - index.html

  

Итак, структура создана. Пока это только предварительный вариант, вполне возможно, что в процессе дальнейшей работы что-то будет изменено, какие-то папки будут добавлены, а какие-то удалены.

Теперь можно переходить к следующей части - написанию кода.

 

Добавлять комментарии и ответы могут только пользователи, прошедшие регистрацию!
Зарегистрируйтесь и напишите своё мнение или ответ!