Jump to main content Jump to doc navigation

Создание базового управления галереей с нуля с помощью MIGXdb

Последнее обновление not available | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Digital Penguin
  • Jens Wittmann – Gestaltung & Entwicklung
  • CrewMark
  • Fabian Christen
  • Sepia River Studios
  • Dannevang Digital
  • Alex
  • A. Moreno
  • Chris Fickling
  • Stéphane Jäggi
  • Murray Wood
  • Anton Tarasov
  • deJaya
  • JT Skaggs
  • Lefthandmedia
  • eydolan
  • Following Sea
  • Guido Gallenkamp
  • YJ
  • Raffy
  • Snow Creative
  • Nick Clark
  • Guest
  • Helen
  • krisznet
  • Yanni
  • Richard

Budget

$204 per month—let's make that $500!

 Learn more

В этом учебнике вы создадите своё управление галереей с помощью MIGXdb. Сначала опишете схему БД и таблицы. Затем настроите MIGXdb-TV для управления изображениями (записями БД). Дальше создадите ресурсы (галереи) и добавите изображения через MIGXdb-TV. В конце выведете изображения на фронтенде сниппетом.

Требования

Установите MIGX через Package Management и выполните базовую настройку.

Создание пакета и файла схемы

Откройте Components -> MIGX -> вкладку Package Manager.

В поле packageName: укажите имя нового пакета. В примере используем mygallery.

Нажмите Create Package. Должен появиться каталог в core-path с пустым файлом схемы в нужном месте.

При mygallery в поле packageName заполните textarea schema.

Перейдите на вкладку xml scheme и добавьте код:

Схема

<?xml version="1.0" encoding="UTF-8"?>
<model package="mygallery" baseClass="xPDOObject" platform="mysql" defaultEngine="MyISAM" version="1.1">
    <object class="myGallery" table="migx_gallery" extends="xPDOSimpleObject" >
        <field key="title" dbtype="varchar" precision="255" phptype="string" null="false" default="" index="index" />
        <field key="description" dbtype="text" phptype="string" index="fulltext" />
        <field key="resource_id" dbtype="int" precision="11" phptype="integer" null="false" default="0" />
        <field key="resource_ids" dbtype="text" phptype="string" null="false" default="" />
        <field key="image" dbtype="varchar" precision="255" phptype="string" null="false" default="" />
        <field key="extended" dbtype="text" phptype="json" null="false" default="" />
        <field key="pos" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="published" dbtype="tinyint" precision="1" attributes="unsigned" phptype="integer" null="false" default="0" />
        <field key="createdby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="createdon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="editedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="editedon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="deleted" dbtype="tinyint" precision="1" attributes="unsigned" phptype="integer" null="false" default="0" />
        <field key="deletedon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="deletedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <field key="publishedon" dbtype="datetime" phptype="datetime" null="true" />
        <field key="publishedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
        <aggregate alias="Resource" class="modResource" local="resource_id" foreign="id" cardinality="one" owner="foreign" />
        <aggregate alias="Creator" class="modUser" local="createdby" foreign="id" cardinality="one" owner="foreign" />
    </object>
</model>

Нажмите Save Schema, чтобы создать файл схемы. Проверьте через Load Schema.

Подробнее о создании схем

Parse Schema

Создайте xpdo-классы и maps из схемы: вкладка Parse Schema -> Parse Schema.

Create Table(s)

Создайте таблицы из схемы: вкладка Create Tables -> Create Tables. Таблица должна появиться в БД.

На этом этапе в схеме определена одна таблица.

Создание конфигурации

Создайте конфигурацию для MIGXdb-TV.

Откройте главную вкладку MIGX

Должна быть пустая сетка с кнопками.

Нажмите Add item

В открывшемся окне укажите:

  • Name: mygallery. Имя конфигурации. Используйте уникальные имена.
  • Add Item Replacement: Add Image. Текст кнопки «Add Item».
  • unique MIGX ID: mygallery. Уникальный MIGX ID для всех конфигураций MIGX.

Нажмите Done

В сетке появится новая запись. Можно править её через контекстное меню edit и настраивать колонки и вкладки. Мы пойдём быстрее и импортируем пример конфигурации.

Щёлкните правой кнопкой по записи и выберите Export/Import

Вставьте код в поле Json :

{
  "formtabs": [{
      "MIGX_id": 6,
      "caption": "Image",
      "print_before_tabs": "0",
      "fields": [{
          "MIGX_id": 14,
          "field": "title",
          "caption": "Title",
          "inputTV": "",
          "inputTVtype": "",
          "configs": "",
          "pos": 1
        },
        {
          "MIGX_id": 15,
          "field": "image",
          "caption": "Image",
          "description": "",
          "description_is_code": "0",
          "inputTV": "",
          "inputTVtype": "image",
          "validation": "",
          "configs": "",
          "restrictive_condition": "",
          "display": "",
          "sourceFrom": "config",
          "sources": "",
          "inputOptionValues": "",
          "default": "",
          "useDefaultIfEmpty": "0",
          "pos": 2
        },
        {
          "MIGX_id": 16,
          "field": "pos",
          "caption": "Position",
          "inputTV": "",
          "inputTVtype": "",
          "configs": "",
          "pos": 3
        }
      ],
      "pos": 1
    },
    {
      "MIGX_id": 7,
      "caption": "Description",
      "fields": [{
        "MIGX_id": 17,
        "field": "description",
        "caption": "Description",
        "inputTV": "",
        "inputTVtype": "textarea",
        "configs": "",
        "pos": 1
      }],
      "pos": 2
    }
  ],
  "contextmenus": "update||publish||unpublish||recall_remove_delete",
  "actionbuttons": "addItem||toggletrash",
  "columnbuttons": "",
  "filters": "",
  "extended": {
    "migx_add": "Add Image",
    "disable_add_item": "",
    "add_items_directly": "",
    "formcaption": "",
    "update_win_title": "",
    "win_id": "",
    "maxRecords": "",
    "addNewItemAt": "bottom",
    "media_source_id": "",
    "multiple_formtabs": "",
    "multiple_formtabs_label": "",
    "multiple_formtabs_field": "",
    "multiple_formtabs_optionstext": "",
    "multiple_formtabs_optionsvalue": "",
    "actionbuttonsperrow": 1,
    "winbuttonslist": "",
    "extrahandlers": "",
    "filtersperrow": 1,
    "packageName": "mygallery",
    "classname": "myGallery",
    "task": "",
    "getlistsort": "",
    "getlistsortdir": "",
    "sortconfig": "",
    "gridpagesize": "",
    "use_custom_prefix": "0",
    "prefix": "",
    "grid": "",
    "gridload_mode": 1,
    "check_resid": 1,
    "check_resid_TV": "",
    "join_alias": "Resource",
    "has_jointable": "no",
    "getlistwhere": "",
    "joins": "",
    "hooksnippets": "",
    "cmpmaincaption": "",
    "cmptabcaption": "",
    "cmptabdescription": "",
    "cmptabcontroller": "",
    "winbuttons": "",
    "onsubmitsuccess": "",
    "submitparams": ""
  },
  "columns": [{
      "MIGX_id": 1,
      "header": "ID",
      "dataIndex": "id",
      "renderer": "",
      "sortable": "false",
      "show_in_grid": 1
    },
    {
      "MIGX_id": 2,
      "header": "Title",
      "dataIndex": "title",
      "renderer": "",
      "sortable": true,
      "show_in_grid": 1
    },
    {
      "MIGX_id": 3,
      "header": "image",
      "dataIndex": "image",
      "renderer": "this.renderImage",
      "sortable": "false",
      "show_in_grid": 1
    },
    {
      "MIGX_id": 4,
      "header": "Published",
      "dataIndex": "published",
      "renderer": "this.renderCrossTick",
      "sortable": true,
      "show_in_grid": 1
    },
    {
      "MIGX_id": 5,
      "header": "Position",
      "dataIndex": "pos",
      "renderer": "",
      "sortable": true,
      "show_in_grid": 1
    },
    {
      "MIGX_id": 6,
      "header": "",
      "dataIndex": "deleted",
      "renderer": "",
      "sortable": "false",
      "show_in_grid": "0"
    }
  ],
  "category": ""
}

Нажмите Done.

Проверьте результат: правый клик по записи -> edit, пройдите по вкладкам и вложенным сеткам.

Создание MIGXdb-TV

Создайте шаблон для страниц галереи.

Создайте MIGXdb-TV.

Создайте новый TV.

Name: mygallery

Вкладка: Input Options

Input Type: migxdb

В Configurations добавьте: mygallery.

MIGX будет искать конфигурации с именем mygallery. Это могут быть записи конфигурации, как выше, или php-файлы, как в CMP конфигураций MIGX. CMP конфигураций MIGX сам по себе является MIGXdb-CMP.

Добавьте TV в шаблон галереи.

Нажмите Save.

Добавление extended fields

Добавим URL к каждому изображению. Extended fields хранят дополнительные поля. Достаточно создать новое поле в форме.

Откройте Components->MIGX. Правый клик по конфигурации mygallery -> Edit.

Вкладка Formtabs -> Add Item.

caption: Extended Fields

В Fields нажмите Add Item.

  • fieldname: extended.url
  • Caption: URL
  • inputTVtype: url

Нажмите Done -> Done -> Done, чтобы сохранить изменения.

В окне управления галереей появится новая вкладка с полем URL.

Создание галерей

Создайте контейнер «Galleries» в дереве ресурсов с шаблоном галереи.

Создайте ресурсы в этой папке с тем же шаблоном.

Нажмите Load grid. Загрузится сетка БД, где можно добавлять, редактировать и удалять записи с изображениями.

Записи автоматически привязываются к ресурсу через поле resource_id. В сетке видны только записи текущего ресурса.

Добавление поля поиска в сетку

Откройте Components->MIGX Правый клик по конфигурации mygallery -> Edit.

Вкладка db-filters

Нажмите Add Item

  • filter name: search
  • filter type: textbox
  • getlist where: {"title:LIKE":"%[[+search]]%","OR:description:LIKE":"%[[+search]]%"}

Нажмите Done -> Done.

В сетке появится поле поиска для фильтрации элементов.

Вывод изображений на фронтенде

Для вывода изображений на фронтенде используйте сниппет migxLoopCollection

Примеры:

[[!migxLoopCollection?
&packageName=`mygallery`
&classname=`myGallery`
&sortConfig=`[{"sortby":"pos","sortdir":"ASC"}]`
&where=`{"resource_id":"[[*id]]","published":"1"}`
]]

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

[[!migxLoopCollection?
  &packageName=`mygallery`
  &classname=`myGallery`
  &sortConfig=`[{"sortby":"RAND()"}]`
  &where=`{"resource_id":"[[*id]]","published":"1"}`
  &tpl=`@CODE:<img src="[[+image]]" />`
]]

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

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Digital Penguin
  • Jens Wittmann – Gestaltung & Entwicklung
  • CrewMark
  • Fabian Christen
  • Sepia River Studios
  • Dannevang Digital
  • Alex
  • A. Moreno
  • Chris Fickling
  • Stéphane Jäggi
  • Murray Wood
  • Anton Tarasov
  • deJaya
  • JT Skaggs
  • Lefthandmedia
  • eydolan
  • Following Sea
  • Guido Gallenkamp
  • YJ
  • Raffy
  • Snow Creative
  • Nick Clark
  • Guest
  • Helen
  • krisznet
  • Yanni
  • Richard

Budget

$204 per month—let's make that $500!

 Learn more