Как создать страницу в админке MODX с использованием ExtJS и без него
В рассматриваемой статье мы разберемся с тем, как создаются произвольные страницы компонентов в админке MODX. Мы разберемся с тем, что такое контроллер и за что он отвечает, а также определимся с тем, можно ли создать страницу в админке без использования сложной и непонятной библиотеки ExtJS.
}
9 минут на прочтение
Теги по теме:
- Backend
- MODX
Урок посвящен:
- Архитектуре построения админки
- Созданию собственных страниц в ней
Контроллер — это специальный php-файл, лежащий в директории core компонента, и наследующий класс modExtraManagerController.
Используемый контроллер можно найти в адресной строке, которая строится по следующему шаблону: {название сайта}/manager/?a={контроллер}&namespace={пространство имен} {контроллер} — имя контроллера (php-файла, например index — index.class.php) {пространство имен} — пространство имен созданное для компонента.
Структура контроллера
- Объявление класса
- Подключение стилей *.css
- Подключение javaScript-файлов
- Подключение дополнительного кода необходимого для реализации логики
Создание тестового компонента с названием «openmodx»
Шаг 1. Добавьте пространство имен openmodx
Для этого создайте папку openmodx в директории /www/core/components
Шаг 2.
Добавьте в него каталог controllersВ этом каталоге хранятся все контроллеры используемые в компоненте
Шаг 3. В корне каталога контроллеров создайте файл контроллера index.class.php
Название файла контроллера стандартизировано и всегда имеет вид {название контроллера}.class.php По умолчанию (если не определено другого) MODX ищет index контроллер
Шаг 4. Объявите класс omIndexController
В начале файла добавьте следующий код
Имя контроллера modx должно состоять из 3-х обязательных частей объединенных в одно слово (без пробелов) и каждая часть начинается с заглавной буквы.
Имя контроллера должно состоять из 3 обязательных частей объединенных в одно слово (без пробелов) и каждая часть начинается с заглавной буквы. Части указываются в следующем порядке:- Openmodx — название пространства имен
- Index — название контроллера
- ManagerController — обязательное обозначение контроллера
Обратите внимание что класс OpenmodxIndexManagerController должен наследоваться от modExtraManagerController
Шаг 5.
Объявите пространство имен- Перейдите в пространство имен (Настройки -> Пространство имен)
- В открывшемся окне кликните по кнопке «Создать новый»
- В сплывающем окне введите следующие данные:
- Имя — openmodx
- Путь к ядру — {core_path}/components/openmodx/
- Путь к активам — {assets_path}/components/openmodx/
- Сохраните изменения
Шаг 6. Проверьте правильность выполненных шагов
Обратитесь к созданному контроллеру через адресную строку
Наполнение созданной страницы
В предыдущем примере мы рассмотрели создание пустой страницы нашей компоненты openmodx. Далее мы будем работать с созданным выше контроллером, который по своей сути представляет собой класс.
Описание структуры класса
Класс представляет собой набор функций, как правило состоящий из следующих методов:
- procees() — метод выполняющий подготовительные действия до загрузки страницы;
- getPageTitle() — выводит текст для тега title страницы;
- loadCustomCssJs() — основной метод контроллера, именно он загружает все нужные скрипты и стили для работы страницы;
- getTemplateFile() — метод отдаёт html шаблон страницы для дальнейшего отображения;
- checkPremissions() — метод проверки ограничительных прав на доступ к странице.
Использование всех методов является не обязательным и зависит всегда от способа решения конкретной задачи. Как видно из описания классов для описания внешного вида странички мы можем использовать два метода getTemplateFile и loadCustomCssJs. Рассмотрим их начиная с самого простого.
Метод getTemplateFile()
Этот метод должен возвращать путь к файлу для отображения, давайте это напишем. Добавьте внутри класса следующий код:
Обязательно ExtJS?
Для наполнения страницы содержимым и логикой абсолютно не обязательно использовать ExtJS. Вы вправе использовать любые библиотеки, либо нативный html для построения содержимого и произвольный javascript для динамической клиентской логики.
В приведенном примере для отображения используется tpl шаблон, который расположен, в нашем примере, по адресу www/components/openmodx/templates/. В указанной папке создайте файл index.tpl и поместите в него код который выведет на страницу заголовок 2 уровня с текстом «Тестовая страница для админки»:
<div><h3>Тестовая страница для админки</h3></div>
Сохраните изменения в файле и перезагрузите страницу браузера.
Использование метода getTemplateFile позволяет быстро создавать страницы внутри нашей системы и не требует от разработчика специфических знаний, так как используется только нативный html код. Далее рассмотрим другой подход к отображению страниц, более сложный на первый взгляд.
Метод loadCustomCssJs()
Для корректного отображения страницы с использованием данного метода закомментируйте метод getTemplateFile или сделайте так, чтобы он возвращал пустую строку, например так:
public function getTemplateFile() {
return '';
}Применение данного метода мы рассмотрим с использованием библиотеки для разработки пользовательских интерфейсов ExtJS, такой подход к написанию компоненты делает его более гибким и удобным для реализации логики его работы.
Посмотрим внешний вид нашего метода
...
public function loadCustomCssJs() {}
... Видим, что наш метод должен возвращать строку содержащую абсолютный путь до файла шаблона.
Но начнем реализацию метода не с его описания, а с подготовки, принятой в системе MODx, структуры каталогов.
Шаг 1. Создание каталогов
По пути www/assets/components/ создайте каталог openmodx, в нем папку js, подпапку mgr с файлом index.js. У Вас должна получиться структура папок представленных на изображении
www/
|-- assets/
|-- components/
|-- openmodx/
|-- js/
|-- mgr/
|-- index.js Почему именно такая структура? Это связано с правилами MODx, такое распределение позволяет упорядочить файлы по их назначению, содержанию и в дальнейшем упростит работу по модификации web-приложения. В теории такой структуры придерживаться не обязательно, но ее использование косвенно подтверждает высокий уровень разработчика. Давайте рассмотрим назначение папок:
- assets — содержит папки файлы, которые должны быть доступны снаружи, из интернета;
- components — каталог в котором хранятся файлы компонентов, которые должны быть доступны из браузера;
- openmodx — каталог содержащий вспомогательный файлы нашей компоненты;
- js — каталог содержащий js файлы;
- mgr — каталог содержащий файлы связанные с панелью управления менеджера.
Шаг 2. Наполнение index.js
Вставьте следующий код в файл который выведет заголовок страницы и текстовое поле с названием. Для облегчения понимания внутри кода приведены комментарии поясняющие назначение тех или иных команд (выражений, функций и т.д.)
Шаг 3. Определение метода loadCustomCssJs()
В предыдущем шаге мы описали внешний вид нашей страницы. Теперь сделаем его доступным пользователю. Для этого вставим путь к файлу index.js в метод.
Сохраните изменения в файле и перезагрузите страницу браузера. Результат должен быть как на изображении.
Как Вы заметили мы не стали писать полный путь к файлу, часть его задали переменной, а часть — прописали «жестко». Соблюдение этого правила не обязательно и писать можно полные пути. Однако мы вынесли переменную для того, чтобы в дальнейшем сократить объем кода, когда подключаться будет не один файл, а много.
Заключение
В данном уроке был рассмотрен принцип создания простой странички в админке, что по своей сути является началом написания компонента для MODx.
В ходе выполнения предложенных заданий, в существующие архитектуру папок и пространство имен, мы внедрили свою компоненту — openmodx, которая выводит требую нам информацию на своей странице. Также отмечу, что отображение страницы возможно выполнить двумя разными способами:
- использованием tpl шаблона с html разметкой, через метод
- описанием содержимого страницы через библиотеку Ext JS и подключаемый методом loadCustomCssJs.
Несмотря на то, что второй способ значительно сложнее для понимая и реализации, но он является более универсальным при разработке интерфейсов админки на MODX и позволяет использовать общий стиль и архитектуру интерфейса админки MODX.
Поделитесь с друзьями в социальных сетях
Другие статьи
Аутентификация входящих API запросов Laravel
#Backend
#Laravel
Преимущества разработки интернет-магазинов на MODX
#e-Маркетинг
#MODX
Хуки FormIt.
Авторизация на Frontend#Frontend
#MODX
Карьерный рост программиста: ожидания и реальность
#Backend
#Frontend
#Работа в IT
Авторизация на FrontendУзнавайте первым о новых курсах и лекциях
- Темы
Backend
Frontend
Веб-дизайн
e-Маркетинг
MODX
Laravel
Работа в IT
Мы используем куки на нашем сайте.
Продолжая просмотр, вы соглашаетесь с условиями пользовательского соглашенияКраткий обзор основных действий в админке ModX
Система управления сайтом (CMS) — это оболочка, которая помогает владельцу сайта управлять им, внося необходимые изменения и дополнения, по-простому — административная панель.
О преимуществах ModX, как одной из лучших CMS, мы уже писали, но напомним, что с ее помощью очень удобно работать даже новичкам — интерфейс весьма понятен и прост. Данные обстоятельства позволяют нам рекомендовать ее своим клиентам, а также всем людям, которые собираются обзаводиться собственным веб-сайтом. Давайте же подробнее остановимся на работе с CMS ModX и обсудим пошагово все этапы, с которыми придется стокнуться человеку, который будет работать с сайтом.
Итак, предположим, что Вы уже прошли такие периоды создания ресурса, как:
- разработка дизайн-макета и его утверждение;
- верстка сайта;
- программирование;
- получение доменного имени;
- регистрация на хостинге и перенос сайта;
- запуск сайта.
Теперь предстоит самый важный этап: заполнение сайта и последующая работа с ним. Согласитесь, что пустой веб-ресурс не принесет Вам никакой пользы, каким бы идеальным в остальном он ни был.
Начало работы в административной панели
Чтобы начать заполнение, необходимо войти в административную панель (админку) сайта по адресу ВАШ ДОМЕН/manager. Ключи доступа (логин и пароль) к которой Вам уже должен был предоставить специалист, занимавшийся версткой и программированием. Вводите их в соответствующие поля и нажимайте кнопку «Войти».
После входа в админку слева Вы сможете увидеть список категорий. Чтобы открыть любую из подкатегорий, нужно нажать на плюсик левее родительской категории, что позволит показать все дочерние документы. Нужно упомянуть, что каждая категория может содержать сколько угодно подкатегорий, подкатегория — под-подкатегорий и так далее. Единственное, что сдерживает их количество — это логика, структура сайта, красота отображения и широта ассортимента услуг, товаров или той информации, которую нужно отразить в них.
Так, например, создавать подкатегории главной самостоятельно не стоит, потому как это может привести к сдвигу всего меню и его некрасивому отображению на страничке сайта.
Если Вам требуется создать дочерний ресурс к категории или подкатегории, просто необходимо нажать правой клавишей мыши на родительский элемент и выбрать в выплывшем списке: «Создать дочерний ресурс». После этого действия появится новый незаполненный так называемый каркас страницы. Удалить который можно нажав на него правой клавишей и выбрав из списка: «Удалить». Сделать страницу неактивной, то есть отменить публикацию также можно кликнув на ней правой клавишей и затем нажав на пункт: «Отменить публикацию».
Разновидности страниц и их шаблонов.
Стоит сказать, что страницы (ресурсы) бывают разными. Так, существуют страницы с фотогалереей, видео, видами товаров или услуг, текстовым и картиночным наполнением.
Типы страниц определяются шаблонами. Их разновидности для данного конкретного сайта можно увидеть в поле «Шаблон», нажав на которое, высветится список разновидностей шаблонов
Фото-, видеошаблоны предназначены для добавления соответственно только картинок и видео с описанием.
Товарные шаблоны служат для интернет-мазинов или сайтов-каталогов. Их предназначение — отражать информацию о товарах или услугах.
Созданная текстовая страница требует заполнения информацией. Самые простые ее разновидности — это текст и картинки. Более сложные — метатеги и перелинковка.
После создания сайта программист расскажет вам о предназначении каждого шаблона.
Добавление фотографий
Итак, если перед Вами страница с возможностью добавления фотографий, то туда можно добавить фотографии (картинки) посредством нажатия кнопки «Вставить» и загрузки на сервер из памяти компьютера интересующей картинки. В открытом окне выбираем слева папку, куда загрузить картинку, затем жмем «загрузить» и выбираем путь в компьютере. После загрузки картинка появляется в списке. После этого дважды жмем на нее. Если вы все сделали правильно, то вы увидите картинку около поля ввода. В некоторых случаях, когда на странице несколько картинок, нажатие на (+) добавляет поле для вставки картинки, (-) удаляет его.
Редактирование текста
Практически каждая страница (шаблон) имеет поле для написания необходимого текста.
Его можно вставлять, копировать, редактировать и удалять. Для этого над текстом размещены интуитивно понятные значки.
Давайте рассмотрим самые популярные действия:
- Выделить текст жирным. Для этого выделяем нужный контент и нажимаем кнопку B.
- Разместить текст по центру. Выделяем текст и жмем кнопку, схожую с той, которая есть в Microsoft Word — нарисованным текстом посередине.
- Вставка картинки в текст. Жмем на кнопку с картинкой в меню, загружаем фото с компьютера (нажав пункт «Адрес») или берем уже имеющуюся на сервере и вставляем. Если параметры вставленной картинки Вас не устраивают, то всегда можно их изменить. Для этого выделяем картинку, жмем на кнопку с картинкой в меню и меняем ширину или высоту (важный момент: по умолчанию стоят настройки, которые сохраняют пропорции картинки. Так, если Вы измените высоту, то автоматически изменится ширина и наоборот), а также выбираем расположение картинки относительно текста (слева, справа, вверху, внизу).
- Также стоит обратить внимание на описание к картинке. Этот пункт лучше заполнить, так его очень любят учитывать поисковики при картиночном ранжировании.
- Вставка ссылки в текст. Для этого выделите нужный текст, нажмите на высветившуюся кнопку в виде знака бесконечности и вставьте в появившееся поле путь (URL) к ссылке.
Изменение других параметров.
Большинство остальных параметров (они индивидуальны) заполняется интуитивно понятно, не будем останавливаться на них. Заполнение таких пунктов, как Title, Description, Keywords лучше доверить СЕО-специалистам. После окончания работы со страницей не стоит забывать нажать сохранить+закрыть (закроет конкретную страницу) или сохранить+продолжить (сохранит страницу и оставит Вас на ней же). Вуаля, после проделанной работы и ее сохранения можно увидеть результаты на страницах сайта в Интернете!
Напоследок напомним о недооцененной пользе горячих клавиш! CTRL+A — выделить весь текст, CTRL+C — скопировать выделенный текст, CTRL+V — вставить скопированный или вырезанный текст, CTRL+Z — отменить последнее действие.
⇐ Безопасность в ИнтернетеOnline и offline-бизнес. Как грамотно совместить? ⇒
Как добавить нового администратора через phpMyAdmin — Общие
hgw7m
#1
Привет,
К сожалению, функция «Забыли пароль» не работает (Revo 2.8.3), теперь мне нужно сбросить пароль для себя (мой администратор) через phpMyAdmin. Я создал нового пользователя, ввел имя пользователя, хэш md5 в качестве пароля и изменил hash_class на hashing.modmd5. Но не могу войти под новым пользователем и сбросить пароль.
Также попробовал версию с хешем PBKDF2 и солью, измененным hash_class обратно на hashing.modPBKDF2. Любые подсказки здесь?
Или как возможно восстановить функцию «Забыли пароль» (может надо поменять на smtp?)
Спасибо
halftrainedharry
#2
Почему вы создали нового пользователя, а не просто изменили пароль и hash_class полей существующего пользователя?
Я предполагаю, что новый пользователь также должен быть добавлен в правую группу пользователей , чтобы он работал. И, возможно, также требуется соответствующая строка в таблице профиля пользователя ( modx_user_attributes ).
исанмигель
#3
Приятель, просто запустите это в себе phpmyadmin и замените «theusername» для пользователя, которому вам нужно восстановить пароли, и «the-new-password» для любого пароля, который вы хотите:
ОБНОВЛЕНИЕ modx_users SET hash_class = 'hashing.
modMD5', пароль = MD5 ("новый-пароль") ГДЕ имя пользователя = 'имя пользователя';
Затем очистите папку «core/cache» и войдите в систему.
hgw7m
#4
Да, знал об этом. Не хотел связываться с первоначальным пользователем-админом… Thx
bobray
#5
Вы можете установить другой сайт MODX той же версии с пользователем-администратором, имеющим то же имя пользователя и адрес электронной почты. Затем скопируйте эту запись администратора в таблицу modx_users проблемного сайта, заменив запись пользователя-администратора.
Ничего не изменится, кроме пароля администратора, который вы теперь знаете, если запишите его.
hgw7m
#6
Спасибо, это хорошая идея. Я знаю, в идеальном мире тебе это никогда не понадобится. Моя 17-летняя история MODX, это уже третий раз, когда мне это нужно, так как старый клиент возвращается через несколько лет …
Система онлайн-бронирования Planyo — компонент MODx
Что такое Planyo
быстрая презентация в виде слайд-шоу
Узнать больше
попробуйте интерактивную демонстрацию в качестве конечного пользователя или администратора
Planyo — это гибкая система онлайн-бронирования отелей, апартаментов для отдыха, пансионов, аренды лодок и т.
д.
Если вы хотите использовать систему Planyo, вам сначала необходимо иметь учетную запись Planyo. Вы можете создать его, зарегистрировавшись. Все учетные записи бесплатны и ни к чему не обязывают в течение первых 30 дней, поэтому вы можете тщательно протестировать систему!
После регистрации создайте свой сайт Planyo. На странице помощи вы найдете множество материалов, включая видеоуроки, которые проведут вас через процесс создания сайта онлайн-бронирования и добавления номеров, лодки и другие виды ресурсов.
Скачать компонент MODxРегистрацияЦены
Этот фрагмент позволяет встроить форму бронирования Planyo на ваш веб-сайт. Таким образом, ваши клиенты будут оставаться на вашем веб-сайте на протяжении всего процесса бронирования.
Вы можете найти дополнительную информацию о процессе интеграции в своей учетной записи Planyo.
После входа перейдите в Настройки
и нажмите кнопку Интегрировать с вашим сайтом внизу страницы.
Примечание: если вы не возражаете, что ваши клиенты будут перенаправлены на planyo.com для бронирования, вам вообще не нужно использовать этот фрагмент.
Сначала загрузите компонент MODx (доступен здесь).
После загрузки компонента разархивируйте его содержимое в каталог assets/snippets/planyo внутри основного каталога MODx. В административной панели MODx перейдите в Elements/Manage Elements/Snippets и нажмите Новый фрагмент .
В Snippet name введите planyo и вставьте содержимое snippet.src.php в Snippet code . Нажмите Сохранить , чтобы сохранить новый фрагмент.
Новый сниппет появится в списке установленных сниппетов.
Теперь вам нужно выбрать место для формы Planyo.
Здесь мы создадим новую веб-страницу. Конечно, вы также можете использовать любое существующее местоположение. В Элементы / Управление элементами щелкните значок Новый элемент .
Где бы вы ни хотели разместить форму Planyo, вставьте фрагмент с тегом [[!planyo? &site=` xyz `]] при запуске modx Revolution или с тегом [!planyo? &site=` xyz `!] , если работает modx evolution, где xyz – идентификатор вашего сайта Planyo. Если у вас его нет, сначала создайте учетную запись Planyo, или вы можете встроить фрагмент без каких-либо параметров в целях тестирования: [[!planyo]] , если работает modx Revolution или [!planyo!] , если запущен modx evolution. Примечание. Используйте [[!planyo]] (modx Revolution) или [!planyo!] (modx evolution) вместо [[planyo]] , чтобы отключить кэширование. Это необходимо при использовании SEO-дружественного режима (который используется по умолчанию).
И все! Вот результат интеграции. Обратите внимание, что вы можете обновить файл planyo-styles.css в каталоге плагинов Planyo, чтобы настроить внешний вид плагина.
См. readme.html для дополнительных параметров, которые вы можете передать во фрагмент для дальнейшей настройки (например, для изменения языка). Этот вопрос часто задаваемых вопросов предложит дальнейшее объяснение этих параметров.
Модуль Planyo по умолчанию отображает содержимое, определенное настройками модуля по умолчанию. Обычно это будет список всех доступных ресурсов, предстоящая доступность ресурсов или окно поиска. Тем не менее, тот же модуль будет использоваться для отображения ряда других типов контента, например, формы бронирования, проверки электронной почты, резервирования дополнительных продуктов и т. д. Активным режимом можно управлять с помощью строки атрибута модуля, с помощью виджета, подключенного к плагину. (например, небольшое окно поиска, карта Google, предварительный просмотр календаря и т.