MIGXdb.Create a basic gallery-management from scratch with MIGXdb

In this Tutorial we will learn how to create your own gallery-management with help of MIGXdb. First we will create a db-schema and its table(s). Then we will create and configure a MIGXdb-TV to manage our images (db-records). In the next step we will create some Resources (galleries) and add some images with our MIGXdb - TV. At last we will show our images at frontend with a snippet.

Requirements¶

First off we will need to install MIGX by package-management and do some basic configurations.

Create a new Package and schema-file¶

Go to Components->MIGX->Tab Package Manager.

Add a name for your new package into the field packageName:. For our example we use mygallery.

Click Create Package This should create a directory under your core-path with an empty schema-file in its correct place.

Still having mygallery in the field packageName, we want to fill the textarea-field schema.

Go to the tab xml scheme and add this code:

The Schema¶

<?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>

by clicking Save Schema we should have our schema-file created. You can test it by clicking Load Schema.

Read more about creating schemas

Parse Schema¶

Create xpdo-classes and maps from schema by clicking Parse Schema on the tab Parse Schema.

Create Table(s)¶

Create tables from schema by clicking Create Tables on the tab Create Tables. This should create our table.

At this time we have only one table in our schema defined.

Create the Configuration¶

Now we want to create our configuration for the MIGXdb-TV.

Go to the main-tab MIGX

There should be an empty grid with some buttons.

We click Add item

In the opening window we add:

• Name: mygallery - this is the name of our configuration. Make sure to use unique configuration-names.
• Add Item Replacement: Add Image - this is the text on our 'Add Item' - Button
• unique MIGX ID: mygallery - Its a good idea to have a unique MIGX - id for all your MIGX-configs.

Click Done

We should see a new created record in our grid. We could edit this record and add grid-columns and tabs and other stuff by right-clicking and choose edit, but we want to go the quick way by just importing our example-configuration.

Right-Click our record and choose Export/Import

Add this code into the one field 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": ""
}

Click Done.

You can check what it has done by right-clicking the record and choosing edit and go through the tabs and their nested grids.

Create the MIGXdb - TV¶

Create a new Template for our gallery-pages.

Now we create our MIGXdb - TV.

Create a new TV.

Name: mygallery

Go to the tab: Input Options

Select the Input Type: migxdb

Under Configurations add: mygallery.

This tells MIGX to search for configurations with the name mygallery This can be configuration-records as we have done above or php-files as it is done for the MIGX-configs-CMP. The MIGX-config-CMP is nothing else as a MIGXdb-CMP itself.

Add this TV to our gallery-template.

click Save to save the new created TV.

Adding extended fields¶

We want to add a URL to each image. This is very easy, because we can use extended-fields to store additional fields in. We just need to create a new Input-field to our Form.

Go to Components->MIGX. Right-click on our mygallery-config, choose Edit.

Go to the Tab Formtabs, and click Add Item.

caption: Extended Fields

on Fields click Add Item.

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

Click Done -> Done -> Done to close all windows and save the additions.

Now we have created a new tab in our gallery-management-window with a new field to add a URL to our image.

Making some galleries¶

Create a container resource in the resource-tree, 'Galleries', using your gallery-template.

Create Resources under this folder using the same gallery-template.

By clicking Load grid this should load our db-grid where we can add, edit, and delete records with images.

The created records should be automatically connected to our resources by the db-field 'resource_id' and we will see only the records connected to our resource in the grid.

Adding a search-field to our grid¶

Go to Components->MIGX right-click on our mygallery-config, choose Edit.

Tab db-filters

Click Add Item

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

Click Done -> Done.

Now we have added a nice search-field to our grid for filtering grid-items.

Listing the Images on Frontend¶

For listing your images on the Frontend you can use the included snippet migxLoopCollection

Some examples:

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

creates a printed array of all published images which belong to the active resource.

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

lists all images in random order.

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

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Budget

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

Learn more