Обучение основам MIGX MODX Revolution. MIGX создание фотогалереи. Обучение modx revolution
Обучение основам MIGX MODX Revolution. MIGX создание фотогалереи
Вашим клиентам постоянно нужно пространство для добавления фото и их описаний в фотогалерее, нужно создавать перечни служебной контактной информации, требуется область для загрузки pdf, куда администратор мог бы загружать списки pdf файлов? MIGX поможет сделать это все, и даже больше. Он предоставляет MODX ресурсам возможность быть использованными в качестве контейнеров данных, по типам. Он позволяет обычной MODX Template Variable (TV, Шаблонная переменная) быть контейнером для других Template Variables (Шаблонных переменных) или произвольных входных данных в форме строковой JSON. Визуально это выглядит как координатная сетка, выводящая администратору список ячеек данных. Администратор может создавать, редактировать и удалять записи, изменять порядок отображения, перемещая записи вверх-вниз, используя AJAX. Все это было придумано Бруно Пернер (Bruno Perner). В моем короткой обучалке я создам шаблонную переменную (Template Variable, TV) MIGX, которая позволит администратору контролировать область загрузки Pdf-файлов на сайте. Этот достаточно простой пример продемонстрирует (я надеюсь) основные принципы работы с данным приложением. Итак, начнем. Замысел: На нашей главной странице мы хотим иметь box, в котором будут отображаться Pdf-файлы наших клиентов в виде ссылки для загрузки. Это могут быть официальные документы, или подробная информация о продукте, или что-то еще. Первое, что мы должны сделать, так это обратиться к package manager и установить MIGX. Сделано? Замечательно! Теперь нужно создать нашу Template Variable, которую мы будем использовать для хранения MIGX JSON. Я обычно называю ее “pdf.migx”. Традиционно даю ссылку на документацию (RTFM):http://www.modx.cc/documentation/additions/migx/
Шаг 1: Установка нашего MIGX TV
Итак, мы уже назвали нашу шаблонную переменную TV “pdf.migx”. Теперь перейдем на вкладку “Input Options” и выберем входной тип “migx”. Благодяря этому станут доступны некоторые специальные конфигурационные опции. Для нас важны две из них: “Form Tabs” и “Grid Columns”. Здесь мы перейдем к формированию интерфейса координатной сетки, которую администратор будет использовать для нашего ресурса. Form Tabs: Здесь мы зададим то, какие переменные администратор сможет сохранять и какой текст мы будем использовать для меток в этой форме. В виде JSON строки. Вот что вы можете вставить в область: <code>[ {"caption":"Title", "fields": [ {"field":"title","caption":"Title"} ]}, {"caption":"PDF", "fields":[ {"field":"pdf","caption":"PDF file","inputTV":"download.pdf"} ]} ] </code> Это создаст 2 вкладки в нашем интерфейсе. Первая называется “Title”. Этот текст будет использоваться в качестве ссылки, ведущей на данную вкладку в клиентском интерфейсе. Вторая называется “PDF”. Сюда администратор сможет загружать pdf. Вы могли бы иметь оба “входа” информации на одной вкладке, но я хотел продемонстрировать, каким образом MIGX автоматически создает вкладки. Вам нужно задать имя в первом поле “caption”. Ниже caption есть другое свойство, названное “fields”. Здесь вы можете задать, какие переменные может вводить администратор. В первом случае мы имеем только одну входную переменную названную “Title”. Вы зададите имя поля позже, когда у вас будет доступ из клиентской части. Теперь задайте caption, а затем задайте, где будет храниться наша шаблонная переменная Template Variable. Т.к. title – это всего лишь текстовая запись, вам не нужно задавать ее свойства, оставьте все по умолчанию. Вам также не нужно создавать отдельную TV для данной переменной, т.к. это будет сохранено в строке JSON. Вторая область для входных данных (или вкладка) называется “PDF”. Caption – обычный текст, который будет выводиться в интерфейсе администратора. Поле, используемое в шаблоне для клиентской части интерфейса, называется “pdf”, и поэтому caption будет содержать “PDF file”. В нашем случае мы хотим, чтобы администратор мог загрузить pdf файл в медиа браузер MODX, поэтому нам нужно назначить для этого Template Variable / Шаблонную переменную. Мы назовем данную TV “download.pdf”. “inputTV” – параметр, который мы связываем с именем TV. После того, как это сделано, нам нужно сформировать первоначальную координатную сетку, которую будет видеть администратор. В данном случае мне нужно только одно поле для отображения на координатной сетке – title pdf. Если у нас есть изображение, то нам может потребоваться две колонки (Title, Image). Обучающие материалы, как сделать галерею на базе MIGX, можно посмотреть по ссылке:http://www.modx.cc/documentation/additions/migx/ Просто вставьте это в секцию “Grid Column”: <code>[ {"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"} ]</code> Это дает нам таблицу, состоящую из одной колонки, с заголовком “Title”. Вы можете задать ширину колонки, или позволить администратору сортировать колонки и т.д. Последний шаг – ассоциировать данную TV с шаблоном, который мы будем использовать. В моем проекте я позволяю администратору редактировать эту информацию, потому что эта область будет отображаться на главной странице.
Шаг 2: Задаем pdf Template Variable / Шаблонную переменную
Для любого, уже знакомого с MODX, этой фразы было бы достаточно. Создайте новую TV, названную “pdf.download”, точно так же, как в предыдущем шаге. Наш входной тип в этом случае — “file” и мы можем ассоциировать с ним те медиа ресурсы, которые хотим. Единственное, что отличается, так это то, что мы НЕ связываем TV с шаблоном / template. Доступ к данной TV осуществляется только через MIGX.
Шаг 3: Как этим все пользоваться?
Теперь перейдите к ресурсу, который ассоциирован с шаблоном, который ассоциирован с нашей MIGX TV. Все понятно? Возможно, вы ассоциировали нашу MIGX TV с категорией “PDF Download”. Теперь поищите нашу TV под этой категорией. Или, может быть, вы не ассоциировали TV с категорией, и попробуйте поискать в категории “uncategorized”. Теперь вы должны увидеть начало координатной сетки. Вы видите кнопку “Add item” и заголовок “Title”. Для того, чтобы добавить запись – кликните по “Add item”. Здесь вы вводите наш title для ссылки, откуда следует загружать, а также ссылку на pdf файл. Поэтому, возможно, придется создать несколько записей. Попробуйте поперемещать записи вверх-вниз, изменяя их порядок на координатной сетке. Здорово? Я люблю этот addon!
Шаг 4: Переходим в клиентскую часть
Мы закончили производить все настройки в служебной области. Ваш администратор может загружать такие pdf файлы, какие захочет, и задавать для каждого title. Замечательно. Теперь нужно запустить сниппет, который поставляется в комплекте с MIGX, это нужно для обеспечения доступа к нашим данным. Разместим box внутри чанка. В чанке должен быть следующий код: <code>[ [getImageList? &tvname=`pdf.migx` &tpl=`downloadTpl` &docid=`1`] ]</code>Сниппет, который мы используем, называется “getImageList. Он обладает множеством свойств, узнать поподробнее о которых вы сможете, перейдя по ссылке: http://www.modx.cc/documentation/additions/migx/ Для нас самыми важными свойствами являются “tvname” and “tpl”. Если вы хотите использовать этот чанк на других страницах, вам нужно ассоциировать ID ресурса, содержащего данные. Это производится с помощью свойства “docid”. Я использую ID 1, т.к. это выполняется на главной странице. Если box будет отображаться только на странице, на которой находится MIGX TV (для главной страницы ID=1), то это свойство может быть удалено. Второе свойство, которое может представлять интерес для нас, это “limit” или “&limit=´5´” (для примера). Это свойство ограничивает выходные данные первыми 5 на координатной сетке. Вы наверно, обратили внимание, что я сослался на шаблонный чанк “downloadTpl”. Этот чанк используется для организации выходного цикла. Вот код для чанка: <code><p><a href="[[+pdf]]" target="_blank">[[+title]]</a></p></code> Вы можете выводить элементы чанка в виде неупорядоченного списка, если хотите. Я просто использовал простейший тэг параграфа. На что вы должны обратить внимание, так это на то, что вы используете плейсхолдер и . Это в точности такие же имена, которые мы ассоциировали со свойствами нашего поля данных в шаге 1.Теперь наш вызываемый сниппет имеет доступ к нашей MIGX TV, получает JSON string, считывает данные с помощью его, и формирует чанк для каждого отдельного случая. Вот так оно и должно работать. Теперь вам нужно написать CSS и сделать так, что бы все это выглядело красиво.
Заключение
С помощью этой обучалки вы познакомились с базовыми принципами, лежащими в основе MIGX. Я использую MIGX в каждом проекте и испытываю восхищение перед его мощью и гибкостью. Если у вас появились какие-либо вопросы или вы нашли ошибки в моем тексте – пожалуйста, оставьте соответствующий комментарий.
Я обнаружил одно ограничение в MIGX – когда использовал входной TV тип “Rich Text” для одной из входных переменных. Т.к. TinyMCE достаточно “тяжел” дляjavascript, иногда возникают проблемы с сохранением данных.
Все о компьютерах - Создание сайта на MODx Revolution
MODx — это бесплатный, с открытым кодом CMS. Имеет дружественный интерфейс и прост в освоении. Все что Вам нужно – это разбираться в HTML и CSS, остальное сделает MODX при помощи плагинов, сниппетов и чанков, которые доступны в свободном скачивании и в большинстве случаев бесплатно.
В настоящее время существует два вида MODx:
- MODx Revolution
- MODx Evolution
Так как Revolution становится более распространенным, то будем изучать именно его. Их отличия можно найти на официальном русскоязычном сайте MODx.
MODx состоит из:
- Ресурсы (Resources) — в большенстве случаев это страница сайта;
- Шаблоны (Templates) — это отображение страницы в MODx;
- Параметры — используются для вывода значений полей ресурса;
- TV параметры — дополнительное поле или переменная шаблона;
- Чанки (Chunks) — кусок текста, HTML или JavaScript кода, который можно встроить в шаблон или в другой чанк;
- Сниппеты (Snippets) — PHP код, который исполняется во время обработки шаблона MODx.
Табличка синтаксиса тегов MODx
| Элемент | Revolution | Пример |
| Параметр, TV-параметр | [[*templatevar]] | [[*pagetitle]] |
| Чанк | [[$chunk]] | [[$head]] |
| Сниппет [кусок php кода] | [[snippet]] или [[!snippet]] | [[Wayfinder]] |
| Плейсхолдер | [[+placeholder]] | [[+id]] |
| Ссылка на ресурс | [[~link]] | [[~1]] |
| Системные параметры | [[++system_setting]] | [[++site_name]] |
Все теги MODx Revolution заключается в квадратные [] скобки.
aboutcomputers.ru
Второй поток обучения разработке сайтов на MODX Revolution (начало 10 января) | Курсы по программированию
Второй поток обучения разработке сайтов на MODX RevolutionВидео-курс «Создание интернет магазина на MODX Revolution самостоятельно»Программа курса "Создание интернет магазина самостоятельно" специально разработана для тех, кто хочет в кратчайшие сроки создать собственный полнофункциональный сайт или интернет-магазин, научиться разрабатывать сайты любой сложности не вникая при этом в технологические сложности программирования.
Вы научитесь:
- работать с одной из лучших Систем Управления Контентом MODX Revolution;
- создавать не только интернет магазины, но и сайты любой сложности;
- самостоятельно разработать дизайн сайта и способы представления информации о товарах, структуру и все нужные элементы, которые отвечают всем требованиям юзабилити;
- самостоятельно добавлять нужные функции своему интернет магазину, не прибегая к платной помощи сторонних специалистов;
- менять внешний вид своего проекта, по мере возникновения такой необходимости;
- наполнять интернет магазин товарами и настраивать системы оплаты и доставки товаров.
В итоге Вы станете обладателем полноценного интернет магазина, готового к запуску бороздить просторы интернета!
Быстро! 5 недель и у Вас работающий магазин, 5 недель и вы самостоятельно сможете разрабатывать любые сайты, любой функциональности на MODX Revolution. Удобно! Получаете многофункциональный интернет магазин, с удобным и простым управлением. Выгодно! Стоимость курса значительно меньше стоимости разработки интернет магазина, плюс в дальнейшем тех поддержку сможете осуществлять самостоятельно. Вам не придется беспокоиться о том, что разработчик сайта откажется разрабатывать или поддерживать Ваш проект в самый неподходящий момент. Ваш лучший сотрудник – это Вы сами!
БонусыБесплатная поддержка в течение месяца после окончания курса как по skype ( в режиме чата) так и по электронной почте. В связи с этим КОЛИЧЕСТВО УЧАСТНИКОВ ОГРАНИЧЕНО
ГарантииСкрупулезное выполнение всех домашних заданий позволяет достичь заметного прогресса уже к моменту последних занятий. Успешный слушатель сможет осуществлять создание сайта интернет магазина самостоятельно после окончания обучения.
Скрытый контент.
skladchik.com
