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

{toc}

h2. Creating 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.

h2. Requirements

First off we will need to install [MIGX|ADDON:MIGX] by package-management and do some [basic configurations|MIGXdb.Configuration].

h2. 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 schame' and add this code:

h3. The Schema

<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="false" />
<field key="editedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
<field key="editedon" dbtype="datetime" phptype="datetime" null="false" />
<field key="deleted" dbtype="tinyint" precision="1" attributes="unsigned" phptype="integer" null="false" default="0" />
<field key="deletedon" dbtype="datetime" phptype="datetime" null="false" />
<field key="deletedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />
<field key="publishedon" dbtype="datetime" phptype="datetime" null="false" />
<field key="publishedby" dbtype="int" precision="10" phptype="integer" null="false" default="0" />

<index alias="PRIMARY" name="PRIMARY" primary="true" unique="true">
<column key="id" collation="A" null="false" />
</index>

<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>
{code}

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

[Read more about creating schemas|xPDO20:Defining a Schema]

h3. Parse Schema

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

h3. Create Table(s)

Create tables from schema by clicking 'Create Tables' on the tab 'Create Tables'
This schould create our table.
At this time we have only one table in our schema defined.

h2. 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' :

{section}

{code}
{"formtabs":"[{\"MIGX_id\":\"1\",\"caption\":\"Image\",\"fields\":\"[{\\\"MIGX_id\\\":\\\"2\\\",\\\"field\\\":\\\"title\\\",\\\"caption\\\":\\\"Title\\\",\\\"inputTV\\\":\\\"\\\",\\\"inputTVtype\\\":\\\"\\\",\\\"configs\\\":\\\"\\\"},{\\\"MIGX_id\\\":\\\"1\\\",\\\"field\\\":\\\"image\\\",\\\"caption\\\":\\\"Image\\\",\\\"inputTV\\\":\\\"\\\",\\\"inputTVtype\\\":\\\"image\\\",\\\"configs\\\":\\\"\\\"},{\\\"MIGX_id\\\":\\\"3\\\",\\\"field\\\":\\\"pos\\\",\\\"caption\\\":\\\"Position\\\",\\\"inputTV\\\":\\\"\\\",\\\"inputTVtype\\\":\\\"\\\",\\\"configs\\\":\\\"\\\"}]\"},{\"MIGX_id\":\"2\",\"caption\":\"Description\",\"fields\":\"[{\\\"MIGX_id\\\":\\\"1\\\",\\\"field\\\":\\\"description\\\",\\\"caption\\\":\\\"Description\\\",\\\"inputTV\\\":\\\"\\\",\\\"inputTVtype\\\":\\\"textarea\\\",\\\"configs\\\":\\\"\\\"}]\"}]","contextmenus":"update||publish||unpublish||recall_remove_delete","actionbuttons":"addItem||toggletrash","filters":"","extended":{"migx_add":"Add Image","packageName":"mygallery","classname":"myGallery","task":"","prefix":"","grid":"","check_resid":"1","check_resid_TV":""},"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\"}]"}
{code}

click 'done'

you can check what it has done by right-clicking the record and choose 'edit' and go thrue the tabs and its nested grids.

h2. 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'
Under 'Configurations' add: 'mygallery'

This says MIGX to search for configurations with 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.

h2. Adding extended fields

we want to add a URL to each image. This is very easy, because we can use the extended-field to store additional fields in it.
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'
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 out additions

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

h2. Making some galleries.

Create a folder in the resource-tree 'Galleries' with your gallery-template.
Create Resources und this folder with the same gallery-template.
By clicking 'Load grid' this should load our db-grid where we can add,edit,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.

h2. 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: {code}{"title:LIKE":"%[[+search]]%","OR:description:LIKE":"%[[+search]]%"}{code}

click 'done' -> 'done'

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

h2. Listing the Images on Frontend.

For listing your images on the Frontend you can use the included snippet 'migx'
Some examples:

{code}[[!migx? &configs=`mygallery` &sortConfig=`[{"sortby":"pos","sortdir":"ASC"}]` &where=`{"published":"1"}`]]{code}
creates a printed array of all published images which belong to the active resource

{code}[[!migx? &configs=`mygallery` &tpl=`@CODE:<img src="[[+image]]" />` &sortConfig=`[{"sortby":"RAND()"}]` &where=`{"published":"1"}`]]{code}
lists all images in random order

{info}
migx uses the same getlist - processor as configured for the grid to get the items. For special cases its possible to create custom getlist-processors.
{info}