Инициализация объекта документа

Подключение файлов CSS и JavaScript 

Получение сведений о пользователе

Введение метатегов на страницу

Создание основного блок-контейнера

Создание формы

Создание заголовка страницы

 

В главах 6 и 7 был рассмотрен принцип работы контроллера компонента, принцип создания пункта меню и адреса определённой страницы компонента, и выполнен пробный запуск файла tpl_new_mess.php, который должен управлять созданием формы обратной связи на экране пользователя. Этот скрипт, по сути, является шаблоном одной из страниц компонента; он пишется на двух языках сразу - HTML и PHP. Теперь пришло время написать код этого файла.

 Обратите внимание! Код любой страницы удобно создавать постепенно, контролируя и настраивая каждый созданный элемент; это позволяет не только оценивать внешний вид, но и оперативно выявлять ошибки. Для того, что бы работать таким образом, вам необходимо:

  • открыть созданный на локальном сервере сайт;
  • открыть создаваемую страницу;
  • открыть необходимый файл в редакторе Notepad++;
  • открыть соответствующий файл CSS в том же редакторе;
  • вносить небольшие части кода, сохранять их и перезагружая страницу сайта, просматривать полученный результат.

Будем считать, что вы всё подготовили: открыли сайт, открыли создаваемую страницу (в предыдущей главе на экран выводилась строка "1234567"), открыли файл tpl_new_mess.php в редакторе. Теперь нужно в папке  CSS , расположенной в папке  views , создать файл с таким же именем, но с расширением  .css  - tpl_new_mess.css. Для этого в редакторе выберите Файл > Новый и сразу же сохраните его в указанной папке с соответствующим именем и расширением; так же вы можете сразу создать информационную шапку файла.

 Для удобства вашей дальнейшей работы вы можете использовать образец  кода файла tpl_new_mess.css; для этого перейдите по ссылке; образец кода будет открыт в соседнем окне.

Теперь можно приступать к составлению кода страницы формы обратной связи.

В начале, как обычно следует открывающий тег, информационный блок и защита от несанкционированного доступа:

   1    <?php
   2    /**
   3    * @Author WDS
   4    * @subpackage Components
   5    * Feedback Form
   6    * @link Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
   7    * @license GNU/GPL
   8    * @copyright Copyright (C) 2019
   9    *
  10   * ------------ ФОРМА ДЛЯ СОЗДАНИЯ СООБЩЕНИЯ ------------
  11   */

  12   // no direct access
  13   defined( '_JEXEC' ) or die( 'Доступ запрещен...' );

 

Инициализация объекта документа

Далее необходимо инициализировать объект.

  14   // Функция getDocument класса JFactory присваивает $doc объект документа
  15   $doc = JFactory::getDocument();

 

Подключение файлов CSS и JavaScript

  16   // Подключение файлов CSS и JavaScript
  17   $doc->addStyleSheet(JUri::base(). 'components/com_feedback_form/views/css/tpl_new_mess.css');
  18   $doc->addScript(JUri::base() . 'components/com_feedback_form/js/text_formatting_buttons.js');

Здесь стоит остановиться и подробно разобрать данные строки.

Функция addStyleSheet в 17 строке подключает файл CSS, созданный именно для этой страницы. Так как данный файл ещё не создавался, необходимо сразу же, что бы не забыть, открыть редактор Notepad++ и создать пока пустой файл в указанной папке (папка была создана в главе 4), иначе при попытке открыть страницу система может выдать ошибку.

Функция addScript в строке 18 подключает файл, написанный на JavaScript. Этот скрипт необходим для работы кнопок оформления текста (размещает на них небольшие изображения) и более подробно будет описан в другой главе, а пока (что бы не забыть) нужно создать папку  js  в папке  com_feedback_form , которая вложена в папку  components  сайта (см. указанный в строке 18 путь) и установить туда  пустой файл text_formatting_buttons.js (при помощи Notepad++):

1  components

  1  com_feedback_form

    1  js

       2  text_formatting_buttons.js

Далее скачайте этот файл из хранилища, откройте в браузере, скопируйте код, после чего вставьте и сохраните в только что созданный файл (при помощи того же редактора):


 41 Скачать файл text_formatting_buttons.js вы можете  3

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


 

Получение сведений о пользователе

  19   // Получение сведений о пользователе
  20   $h_cook_user = JFactory::getUser();
  21   if (!($h_cook_user->guest)) { 
  22          $author_mess = $h_cook_user->username; 

В строке 20 переменная $h_cook_user получает массив данных о пользователе, хранящихся на сайте. Строка 21 проверяет, является ли пользователь гостем; если пользователь не гость (т.е. зарегистрирован на сайте), переменной $author_mess присваивается значение в виде имени пользователя. Обратите внимание, что конструкция if не закрывается скобкой; это значит, что нижестоящий код до определённой строки будет так же выполняться лишь в том случае, если пользователь не гость.

 

Введение метатегов на страницу

  23   // ВВЕДЕНИЕ МЕТАТЕГОВ
  24   $doc->setTitle('Форма обратной связи');
  25   $doc->addCustomTag('<meta name="robots" content="noindex, nofollow" />');
  26   ?>

 Строки 24-25 устанавливают на страницу дополнительные метатеги. Функция setTitle устанавливает содержимое метатега <Title>, которое выводится в строке браузера, а addCustomTag устанавливает новый метатег, прописанный в скобках. Строка 26 закрывает данный блок кода, написанный на PHP; обратите внимание на то, что конструкция if так и осталось не закрытой, а значит и дальнейший кон на HTML будет выполнен лишь для зарегистрированных пользователей.

 

Создание основного блок-контейнера

  27   <!-- Создание основного блока-контейнера 'h_cook-new' -->
  28   <div id='ff-new'>

Строка 28 создаёт основной блок-контейнер компонента. Это нужно для того, что бы всё содержимое можно было легко настроить при помощи таблиц CSS; например, сделать отступы по краям или отцентровать по середине и т.д.

 

Создание формы

  29   <!-- Создание формы -->
  30   <form name="new_mess" method="post" action="/index.php?option=com_feedback_
                     form&task=process_new_mess" enctype="multipart/form-data">

Создание формы является обязательным, так как данные будут отправляться на сайт и там обрабатываться. Указывается имя формы name, метод отправки method, адрес обработчика формы action и способ кодирования данных enctype (в данном случае кодировка отменена, так как предусмотрено отправка файлов изображений).  

Обратите внимание на адрес обработчика формы. При отправке (после нажатия кнопки "Отправить") к адресу будет добавлен домен сайта, т.е. выглядеть он будет примерно так:

https://my_site.ru/index.php?option=com_feedback_form&task=process_new_mess

При поступлении данного запроса он пройдёт полный путь (см. главы 4-6) и контроллер запустит необходимый файл, обрабатывающий данный запрос ("файл-обработчик запроса").

 

Создание заголовка страницы

  31   <!-- Заголовок страницы -->
  32   <h1 class='h_mess'>Обратная связь</h1>

Строка 32 устанавливает заголовок страницы.

Теперь можно попробовать открыть создаваемую страницу и посмотреть, что же получилось. Однако при попытке её открыть система выдаст сбой; это происходит из-за того, что в строках 28 и 30 были созданы теги, которые не закрыты, а так же в строке 21 осталась не закрытой конструкция if. Что нужно сделать?

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

Что бы вы могли контролировать создаваемую страницу, в коде tpl_new_mess.php при помощи клавиши Enter (переход на другую строку) создайте все 118 строк, которые в нём будут присутствовать в дальнейшем, а в последние внесите вот такой код (он будет разобран в следующих главах):

 117  <?php } else { ?> <!-- если гость, то -->
 118  <p class='err_fb_form'>Форма обратной связи доступна только зарегистрированным
                    пользователям!<br>Пожалуйста, пройдите регистрацию!</p> 
 119  <?php } ?>

Строку 117 пропишите в одну строчку, не делайте перенос (редактор это позволяет).

Сохраните внесённые изменения и откройте страницу (кликните в меню сайта на "Обратная связь"); на кране появится сообщение, прописанное в строке 118. Это происходит потому, что система идентифицировала вас как "Гость", а что бы открылась форма для ввода сообщения, необходимо зарегистрироваться. Проще всего это сделать из панели администратора: выберите в меню Пользователи > Менеджер пользователей > Создать пользователя, введите все необходимые данные, нажмите    Сохранить . Перейдите на сайт, авторизуйтесь и снова нажмите "Обратная связь" в меню; система идентифицирует вас как зарегистрированного пользователя и откроет создаваемую страницу с уже созданным заголовком.

Теперь вы можете сразу настроить внешний вид и положение заголовка при помощи файла CSS (образец кода вам был предложен в начале этой главы). Как это сделать, подробно описано в Части 1 главах 21-25.

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

 

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