Modx Evolution Лабораторный практикум
|
Скачать 1.84 Mb.
|
Если вы все сделали правильно, то внешний вид новостного блока на главной странице примет следующий вид, рис. 13.8:
Рис. 13.8
Обратите внимание, что когда вы используете созданный TV параметр в шаблоне Ditto, то вызов осуществляется с помощью конструкции вида: [+name+], если же вы захотите вывести содержимое дополнительного поля непосредственно на странице ресурса, то конструкция вывода TV параметра будет иметь вид: [*name*].
Рис. 13.9
Это касается и всех стандартных полей, таких как [*pagetitle*], [*longtitle*], [*introtext*]и других полей.
На этом сегодняшний урок можно заканчивать, но вы имейте ввиду, что я привел лишь один пример использования TV параметров. Спектр их применения гораздо шире.
Рассмотрев возможные значения типов параметра, вы, безусловно, поймете, какую функциональность несет в себе это расширение MODx. Помимо добавления изображений вы можете прикреплять к ресурсам: текстовые поля, поля для ввода даты, поля для прикрепления файла, поле для URL, для e-mail, чекбоксы, радиокнопки, выпадающие списки, текстовые поля textarea и даже дополнительные поля с визуальным редактором, рис. 13.9.
Одним словом, инструмент очень мощный и, скорее всего, мы еще будем возвращаться к TV параметрам в дальнейшем по ходу прохождения курсов по MODx. А сейчас вы можете поэкспериментировать с различными TV параметрами MODx самостоятельно.
13.4. Контрольные задания
Что такое TV параметры?
Как создать новый TV параметр?
Как добавить изображения для документов MODx?
Как указать папку, из которой будут браться новости для главной страницы?
Как связать изображение с новостью?
ЗаданиЕ 14
Форма обратной связи в MODx. Сниппет eForm
цели занятия
освоение приемов работы со сниппетом eForm;
создание формы обратной связи.
Форма организации занятия
Фронтальная.
Студент должен знать
технологию создания формы обратной связи,
параметры сниппета eForm.
Студент должен уметь
выполнять лабораторно-практическое задание №13,
создавать форму обратной связи.
Обеспеченность
компьютер с доступом в Интернет,
настоящий курс лабораторно-практических работ.
Практическое задание
На сегодняшнем уроке мы научимся создавать в MODx с помощью встроенного сниппета eForm форму обратной связи, которая украсит собой нашу страницу с контактной информацией.
Одна из основных функций любого сайта — организация взаимосвязи между владельцем сайта и посетителями. Трудно представить, что это взаимосвязь будет полной, если вы не дадите посетителю возможность выразить свою точку зрения или просто связаться с вами для чего бы то ни было. Обратная связь — очень важный элемент для любого сайта, как продающего или предоставляющего какие-либо услуги, так и для обычной личной страницы. Именно благодаря обратной связи общение может быть полным и проходить в двух направлениях: «владелец – посетитель» и «посетитель – владелец». Учитывая все это, мы приступаем к созданию на нашем сайте формы обратной связи.
14.1. форма обратной связи
Перед началом работы неплохо было бы в нескольких словах описать, что мы хотим получить на выходе.
Мы создадим форму с полями: имя, электронная почта, тема сообщения, текст сообщения, при этом:
имя — поле, обязательное для заполнения
электронная почта — обязательное для заполнения и должно проверяться на правильность ввода e-mail
тема сообщения — поле представлено в виде выпадающего списка, и, в зависимости от выбранного посетителем пункта, письмо будет отправляться на тот или иной почтовый ящик (эта опция будет полезна тогда, когда на вопросы различных направлений будут отвечать разные люди)
сообщение — поле, обязательное для заполнения
Также необходимо реализовать оповещение посетителей об ошибках ввода информации при заполнении формы. Последнее требование к форме обратной связи — наличие защиты от спама в виде поля для ввода текста со сгенерированного изображения (капчи).
14.2. Сниппет eForm
Как я уже сказал, для создания формы обратной связи в MODx мы будем использовать сниппет eForm. На странице с перечнем сниппетов (Элементы→Управление элементами→Сниппеты) убедитесь, что он у вас установлен и двигаемся дальше, рис. 14.1.
Рис. 14.1
Вызов сниппета eForm ничем не отличается от вызова остальных сниппетов и вам он, наверняка, знаком. Основные параметры, которые вы должны обязательно знать при работе в MODx с этим сниппетом мы разберем на примере. Приступаем.
Вот конструкция, которую мы будем использовать для вызова на странице Контактная информациянашей формы обратной связи.
[!eForm? &formid=`contact-form` &tpl=`form-tpl` &to=`osorgin@sgppk.ru,ossorgin@narod.ru,sky_walker@bk.ru` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с моего сайта`!]
В этой конструкции использовались следующие параметры eForm:
&formid — уникальный идентификатор формы. Это значение у вас должно будет обязательно указываться в шаблоне формы в скрытом поле или как значение id в теге form.
&to — значением этого параметра является разделенный запятой список электронных адресов возможных получателей письма. Сам же выбор, кому все-таки из перечисленных адресов отправить письмо, будет производиться с помощью параметра &mailselector из выпадающего списка в шаблоне формы.
&tpl — параметр указывает сниппету, какой чанк будет использоваться в качестве шаблона формы.
&report — параметр передает сниппету название чанка, который будет использоваться в качестве шаблона для отправки данных на почту.
&thankyou — название чанка, в который вы можете поместить текст, который увидит посетитель после отправки письма.
&mailselector — этот параметр указывает, какое поле будет использоваться в качестве выбора адресата (если их более одного). Если этот параметр вас немножко смутил, продолжайте изучение урока, и по ходу все станет понятно.
&vericode — параметр, который указывает, использовать ли капчу для отправки формы. Если в этот параметр вписана единица, то пользователю перед отправкой придется еще ввести текст с картинки, если же значение этого параметра – ноль, то капча генерироваться не будет.
&subject — в этот параметр можно вписать текст, который будет использован в качестве темы электронного письма.
Итак, теперь вы уже знаете, для чего необходим тот или иной параметр. Давайте подведем итог и опишем вышеуказанную конструкцию по параметрам вместе с их значениями:
&formid=`contact-form` &tpl=`form-tpl` HTML шаблон формы будет храниться в чанке form-tpl при этом идентификатор этой формы — contact-form.
&to=`osorgin@sgppk.ru,ossorgin@narod.ru,sky_walker@bk.ru ` &mailselector=`otdel` Получателями отправленного с помощью формы сообщения являются следующие электронные адреса osorgin@sgppk.ru.ru, ossorgin@narod.ru, sky_walker@bk.ru при этом выбор, кому из них отправить сообщение, определяется в шаблоне формы с помощью поля с именем otdel.
&vericode=`1` Перед отправкой сообщения посетитель должен будет вписать верный текст со сгенерированного для него изображения.
&subject=`Сообщение с моего сайта` В качестве темы получаемых писем будет использован текст Сообщение с моего сайта.
&report=`report-tpl` Оформление передаваемой на e-mail информации определяется шаблоном, который будет храниться в чанке report-tpl.
&thankyou=`thank-tpl` Информация, которую увидит посетитель после отправки сообщения, будет храниться в чанке thank-tpl.
Как вы видите, у нас многие параметры ссылаются на чанки, которые мы еще не создали. Поэтому, перед тем как вызвать сниппет на странице, давайте создадим требуемые чанки с необходимыми для работы сниппета шаблонами.
14.3. Чанк с HTML шаблоном формы обратной связи
На странице со списком уже созданных чанков создаем новый чанк с именем form-tplи в поле с содержимым помещаем следующий код:
[+validationmessage+]
Подробно описывать этот шаблон я не буду, остановлюсь только на некоторых элементах.
В начале формы идет конструкция [+validationmessage+] — она отвечает за вывод сообщений об ошибке заполнения при отправке формы.
Конструкция action="[~[*id*]~]"указывает, что обработчиком формы будет та страница, на которой вызван сниппет. Вместо [~[*id*]~]MODx подставит URL текущего документа.
Скрытое поле указывает идентификатор формы, который мы указали при вызове сниппета.
size="40"- размер в символах окна ввода, maxlength="60"- максимальное количество знаков в поле.
Также вы скорей всего обратили внимание на конструкции следующего вида:
eform="Адрес электронной почты:email:1"
Не стоит пугаться, ничего сложного в этом нет, для того чтобы легче было понять смысл этих записей вы должны познакомиться со следующим шаблоном заполнения:
eform="[описание поля]:[тип вводимых данных]:[обязательное ли поле]:[сообщение об ошибке ввода]:[правило проверки ввода]"
Все параметры, как мы видим, разделены между собой знаком двоеточия, если же какой-нибудь параметр будет пропущен, знак двоеточия останется все равно (в таком случае оставшиеся параметры будут отделяться друг от друга знаком «::»). Ниже подробно описаны параметры этой конструкции.
Описание поля
Описание или имя поля может быть любым подходящим по смыслу.
Тип вводимых данных
Сниппет eForm поддерживает следующие значения типов данных:
string — любая строка. Поле с этим типом не проходит дополнительную проверку.
date — перед отправкой содержимое пройдет проверку, является ли введенная информация о дате корректной.
integer — в это поле можно ввести только целое число.
email — перед отправкой содержимое пройдет проверку, является ли введенный адрес корректным.
float — перед отправкой содержимое пройдет проверку, является ли поле числовым значением.
html — текст в HTML (например, вместо текстового переноса строки \n используется HTML тег
).
file — помечается поле, для прикрепления и отправки файла.
Обязательное ли поле
Этот параметр может принимать 2 значения:
1 – поле обязательно для заполнения
0 – поле необязательно для заполнения
Сообщение об ошибке ввода
Сообщение, которое будет выводиться в случае, когда введенная информация не удовлетворяет правилу проверки.
Правило проверки ввода
Дополнительное правило для проверки правильности ввода. С помощью этого параметра можно задать возможные значения для ввода либо с помощью регулярных выражений проверить правильность ввода информации. Если вы не хотите дополнительно проверять ваше поле еще по какому-нибудь условию, то можете просто опустить этот параметр.
Итак, теперь можно сравнить ранее незнакомые для вас конструкции в чанке form-tplс только что разобранным шаблоном ввода.
Для конструкции eform="Адрес электронной почты:email:1"
Описание поля — Адрес электронной почты
Тип вводимых данных — email
Обязательное ли поле — 1 (обязательное)
Сообщение об ошибке ввода – отсутствует
Правило для проверки вводимых значений не задано
Вы можете обратить внимание, что каждое поле в HTML шаблоне формы должно иметь свое уникальное имя.
Плейсхолдер [+verimageurl+]отвечает за вывод капчи.
Давайте разберем поле с именем otdel, которое представлено в виде выпадающего списка. При вызове сниппета мы именно это поле будем использовать для выбора адресата с помощью параметра &mailselector.
Каждому пункту выпадающего списка соответствует числовое значение (value="1", value="2", value="3")
Если посетитель выберет, например, из этого списка пункт Техническая поддержка, то письмо будет отправлено на второй почтовый ящик, указанный в параметре &toпри вызове сниппета. В нашем случае &to=`osorgin@sgppk.ru, ossorgin@narod.ru, sky_walker@bk.ru`второй по счету электронный адрес есть ossorgin@narod.ru. Если посетитель выберет пункт со значением value="1", то письмо будет отправлено на первый по счету электронный ящик. Одним словом, в HTML шаблоне формы значение valueэто ни что иное, как порядковый номер почтового ящика, на который следует отправить письмо.
14.4. Чанк с шаблоном отправляемой информации
После создания HTML шаблона формы переходим к созданию шаблона, определяющего внешний вид информации, которая будет приходить на почтовый ящик.
Создаем чанк report-tplи в его содержимое помещаем следующий код:
Это сообщение было отправлено посетителем по имени [+name+] с помощью формы обратной связи.
[+img-news+] [+pagetitle+][+introtext+] Читать дальше » Этот чанк мы будем использовать в качестве шаблона Ditto для всех новостей на главной странице. Затем создаем чанк news-main-last, который будет использоваться в качестве шаблона для последней новости, и помещаем в него: [+img-news+] [+pagetitle+][+introtext+] Читать дальше » Шаблон для последней новости отличается от шаблона для остальных новостей только наличием у селектора li CSS-класса last. После этого необходимо на главную страницу поместить вызов чанка newsline-main, для этого отправляемся редактировать созданный ранее чанк MAIN-CONTENT и вместо списка ul помещаем конструкцию вызова чанка, чтобы у вас в чанке MAIN-CONTENT оказалось следующее содержимое: {{newsline-main}} |
|
| Имя: | [+name+] |
| Email:: | [+email+] |
| Сообщение: | [+comments+] |
Вы можете использовать эту ссылку для ответа: [+email+]
Если вы обратите внимание, то в этом шаблоне вся введенная пользователем информация передается с помощью плейсхолдеров вида [+name+]. При этом название каждого плейсхолдера совпадает со значением атрибута name соответствующего поля в HTML шаблоне (name="name", name="email" name="comments").
14.5. Чанк с текстом, который увидит посетитель после отправки сообщения
Создаем чанк thank-tpl и в его содержимое помещаем следующий код:
Спасибо, что воспользовались формой обратной связи на нашем сайте.
Ваше сообщение будет рассмотрено нашими менеджерами в кратчайшие сроки, и, если оно требует ответа, Вы обязательно его получите.
Отправленная информация:
- Ваше имя: [+name+]
- Ваш e-mail: [+email+]
- Текст сообщения: [+comments+]
Я также предлагаю вам вынести вызов сниппета eForm в отдельный чанк, для этого создайте чанк с именем, например, form и поместите туда конструкцию:
[!eForm? &formid=`contact-form` &tpl=`form-tpl` &to=`osorgin@sgppk.ru, ossorgin@narod.ru, sky_walker@bk.ru` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Сообщение с моего сайта`!]
В итоге у нас должно получиться 4 чанка, которые вы для удобства можете объединить в одну категорию Форма обратной связи:
form-tpl — шаблон формы обратной связи
report-tpl — шаблон отсылаемой на e-mail информации
thank-tpl — шаблон информации, отображаемой после отправки
form — вызов сниппета eForm
На рис. 14.2 показано, как должны выглядеть созданные чанки для формы обратной связи:
Рис. 14.2
Следующим шагом является вызов сниппета на странице Контактная информация, для этого в поле Содержимое ресурса помещаем конструкцию вызова сниппета:
{{form}}
На рис. 14.3 показано, как должен выглядеть вызов сниппета eForm при условии, что этот вызов вы вынесли в отдельный чанк с именем form.
Рис. 14.3
После этого можете посмотреть, что получилось, зайдя на страницу Контактная информация. Если вы все сделали правильно, то на странице появится форма, которая будет выглядеть приблизительно вот так, рис. 14.4:
Рис. 14.4
При попытке отправить незаполненную форму сниппет укажет вам на ошибки в заполнении, рис. 14.5:
Рис. 14.5
Если же вы верно заполните поля, после отправки сообщения отобразится информация, хранящаяся в чанке thank-tpl, рис. 14.6:
Рис. 14.6
Отправленное с помощью формы обратной связи сообщение придет на один из трех электронных адресов, в зависимости от того, какой пункт отправитель выберет в поле Тема сообщения.
Заполните форму и проверьте пришло ли вам письмо.
Внешний вид формы легко можно подкорректировать с помощью CSS по вашему желанию. В нашем шаблоне все стили, отвечающие за внешний вид форм лежат в файле assets/templates/site/styles/forms.css. Давайте в CSS сделаем все поля одинаковыми и изменим стиль вывода сообщения об ошибках заполнения. Для этого отправляемся редактировать файл assets/templates/site/styles/forms.css
Находим в этом файле следующий код:
01 /* ---------------Forms in Content Area-----------------*/
02
03 #container #respond{display: block; width:100%;}
04 #container #respond input{width:170px; padding:2px; border:1px solid #CCCCCC; margin:5px 5px 0 0;}
05 #container #respond textarea{width:98%; border:1px solid #CCCCCC; padding:2px; overflow:auto;}
06 #container #respond p{margin:5px 0;}
07 #container #respond #submit, #container #respond #reset{
08 margin:0;
09 padding:5px;
10 color:#666666;
11 background-color:#F7F7F7;
12 border:1px solid #CCCCCC;
13 cursor:pointer;
14 }
и заменяем его на этот:
01 /* ---------------Forms in Content Area-----------------*/
02
03 #respond{display: block; width:100%;}
04 #respond input{width:300px; padding:2px; border:1px solid #CCCCCC; margin:5px 5px 0 0; }
05 #respond select{width:307px; padding:2px; border:1px solid #CCCCCC; margin:5px 5px 0 0; }
06 #respond textarea{width:300px; border:1px solid #CCCCCC; padding:2px; overflow:auto;}
07 #respond p{margin:5px 0;}
08 #respond #submit{
09 width:159px;
10 margin:0;
11 padding:5px;
12 color:#666666;
13 background-color:#F7F7F7;
14 border:1px solid #CCCCCC;
15 cursor:pointer;
16 }
17 #respond .vericodeform { width:153px;}
18 .errors {background:#ffcece; border: 1px solid #cc4e4e; padding:5px; width:300px; }
После этого форма примет следующий внешний вид, рис. 14.7:
Рис. 14.7
Выглядит вполне симпатично. Если вам необходимо добавить другие поля или расположить уже имеющиеся как-нибудь по-другому, вы с легкостью сможете это сделать путем редактирования созданных чанков. Стилевое оформление также просто можно изменить в CSS файле.
На странице Контактная информация вы, помимо вызова формы, можете размещать любую необходимую информацию. Можно разделить эту страницу, например, на две части, в одной из которых будет форма обратной связи, а в другой — контактная информация и карта проезда. В общем, решать вам, в оформлении ваших страниц никто вас ограничивать не будет.
Кстати: чтобы текст на картинке в форме обратной связи генерировался из необходимых вам слов, необходимо их задать на странице системной конфигурации: Инструменты → Конфигурация → вкладка Пользователи → поле Слова для генерации CAPTCHA-кодов, рис. 14.8:
Рис. 14.8
На этом урок по созданию формы обратной связи на MODx можно считать завершенным.
14.6. Контрольные задания
Какой сниппет используется для создания формы обратной связи в MODx?
Как подключить обработчик ошибок заполнения формы обратной связи при отправке сообщения?
Как при вызове формы обратной связи вставить вывод капчи?
Как настроить/изменить адреса почтовых ящиков, на которые посетитель сможет отправить почту с помощью формы обратной связи?
Как изменить список слов для генерации капчи?
Как в форму обратной связи добавить еще одну тему сообщения: Жалоба?
ЗаданиЕ 15
Реализация вспомогательного меню на странице
цели занятия
освоение приемов создания вспомогательного меню в правой колонке на внутренних страницах сайта;
Форма организации занятия
Фронтальная.
Студент должен знать
порядок создания вспомогательного меню.
Студент должен уметь
выполнять лабораторно-практическое задание №14,
создавать вспомогательное меню в правой колонке на внутренних страницах сайта.
Обеспеченность
компьютер с доступом в Интернет,
настоящий курс лабораторно-практических работ.
Практическое задание
Сегодня переходим к следующему шагу в создании нашего динамического сайта-визитки и приступаем к организации вспомогательного меню в правой колонке на внутренних страницах сайта.
Реализовывать это меню мы будем с помощью сниппета Wayfinder. Мы уже познакомились с ним во время создания главного меню сайта на 6 уроке. Можете просмотреть еще раз практическую работу по созданию главного меню, чтобы освежить в памяти изложенную тогда информацию, а затем переходим непосредственно к созданию дополнительного меню.
15.1. подготовка к созданию бокового меню
Первым делом давайте посмотрим на HTML-разметку, которая определяет вывод нашей вспомогательной навигации:
01
02
Похожие:
 |
Инструкция по установке и настройке модуля oos для modx evolution... Для корректной работы модуля oos для modx evolution необходимо установить программный модуль Shopkeeper |
 |
Эксплуатационные материалы лабораторный практикум Эксплуатационные материалы: лабораторный практикум / А. Д. Синегибская. – Братск: БрГУ, 2011. – 65 с |
|
Устанавливаем modx Revolution X В первую очередь, необходимо скачать modx Revolution X. У вас есть возможность сскачать прямо с сайта разработчика |
|
Инструментарий веб-разработчика: Apache, php, Mysql, phpMyAdmin Лабораторный... Инструментарий веб-разработчика: Apache, php, Mysql, phpMyAdmin: Лабораторный практикум по дисциплине «Сети ЭВМ и телекоммуникации»... |
|
Электронных ресурсов Басангова Е. О. Лабораторный практикум “Компьютерная анимация в среде Macromedia Flash” |
|
Название Ссылка Лабораторный практикум по биологии гоу впо уральского Государственного лесотехнического университета |
|
Лекция 1 Молчанов А. Ю. Системное программное обеспечение. Лабораторный практикум: – спб.: Питер, 2005. – 284 с |
|
Среднетехнический факультет Лабораторный практикум составлен для проведения лабораторных работ по дисциплине «Технохимический контроль производства» |
|
Руководство по работе с административной панелью modx Для работы с системой управления modx не требуется знаний и опыта работы с html-кодом веб-сайтов. Исключение составляет заполнение... |
|
Руководство по работе с административной панелью modx Для работы с системой управления modx не требуется знаний и опыта работы с html-кодом веб-сайтов. Исключение составляет заполнение... |
|
Лабораторный практикум по дисциплине Лабораторные работы должны выполняться в той последовательности, в которой они приводятся в данной разработке |
|
Методические указания по выполнению практических работ для студентов специальности 09. 02. 04 Лабораторный практикум / Ханты-Мансийский технолого-педагогический колледж; Сост |
|
В. К. Никишев «Лабораторный практикум по современным языкам программирования Visual Studio » Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования |
|
Энзимология Энзимология : Лабораторный практикум /[Текст] / сост. Н. М. Титова, Т. Н. Субботина. – Красноярск: Сиб федер ун-т, 2012. – 60 с |
|
Кафедра товароведения и товарной экспертизы лабораторный практикум... Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования |
|
Российской Федерации Федеральное государственное бюджетное образовательное... Лабораторный практикум по дисциплине «Операционные системы» / Уфимск гос авиац техн ун-т; Сост. О. Д. Лянцев, А. В. Казанцев. – Уфа,... |