main documentation

Modules

Tutorial > setting up the site

The goal of this tutorial is to design a simple guest book that we will be able to insert in any given place, in order to let visitors leave comments.

A module can be inserted in any template: either the main template or any element template.

What we want to do here, is to make a module that the author will be able to insert freely, with the Editor, in any content.

We'll use the "module element" for this (makes sense, huh?).

First, let's make a new site from the basic template.

iMac-G4:~/Sites/alahup dom$ ./engine/tools/new_site.php Available templates : a) alahup b) basic b New site's short name : modulemadness Selected template has a sample sqlite database. Do you want to use it ? y) Yes n) No [default: y] : n Choose a database type for data storage : a) SQLite b) MySQL a Database name : [default: modulemadness_data.db] : Choose a database type for logs storage : a) SQLite b) MySQL a Database name : [default: modulemadness_log.db] : Configuring the site ...done. In order to finalize the install, please go here : http://127.0.0.1/~dom/alahup/manager/check_install/ You should then be able to connect to : http://127.0.0.1/~dom/alahup/sites/modulemadness/www/_admin/ with login 'root' and password 'root'.

Go to the manager as explained in order to finalize the install and go the Draft Site Browser.

Let's put 'modules/livecomments' in the draft site browser, and press return to go there.

We're on a blank page. Let's create a new block.

Type some text, Apply and View Page.

Now insert a module element.

As you can see, the module element, in the "basic" site template, inserts by default a module which helps insert Flash movies.

We want another kind of module available in the drop-down menu.

So let's examine the alahup/elements/definitions/mod.xml file, which defines the properties of the module element.

Change the <prop id="type"></prop> to :

alahup/elements/definitions/mod.xml :

<prop id="type" type="popup" redraw="true">
<caption>Module : </caption>
<item id="flash">Flash movie</item>
<item id="livecomments">LiveComments module</item>
</prop>

Save and reload the block by clicking on the little hand in the draft site.

Insert a module element again.

This time the drop down menu should also display a "LiveComments" item.

Select it.

This is not quite satisfactory. We want the flash-related properties to disappear from the interface when the "LiveComments module" item is selected.

Go back to mod.xml.

First we want to hide all properties by default.

Add show="false" to <prop ... ></prop> tags, and add the following rule at the end:

alahup/elements/definitions/mod.xml :

The final file should look like this:

alahup/elements/definitions/mod.xml :

<prop id="type" type="popup" redraw="true">
<caption>Module : </caption>
<item id="flash">Flash movie</item>
<item id="livecomments">LiveComments module</item>
</prop>
<prop id="swfFile" type="file" show="false">
<caption>swf file : </caption>
</prop>
<prop id="flash_width" type="stepper" min="10" max="768" default="768" show="false" groupWithNext="true">
<caption>Width : </caption>
</prop>
<prop id="flash_height" type="stepper" min="10" max="576" default="576" show="false">
<caption>Height : </caption>
</prop>
<prop id="flash_scaleMode" type="popup" show="false">
<caption>Scale mode : </caption>
<item id="noscale">No scale</item>
<item id="exactFit">Exact Fit</item>
<item id="showAll">Show All</item>
<item id="noBorder">No Border</item>
</prop>
<rules>
<ifequal prop="type" value="flash">
<include prop="swfFile" />
<include prop="flash_width" />
<include prop="flash_height" />
<include prop="flash_scaleMode" />
</ifequal>
</rules>

Reload the block, and see the results.

Now Apply and view the page.

You should see an "Unkown module!" message. Where does it come from?

Open alahup/elements/sets/default/mod.tpl and locate the "Unknown module!" string near the end.

Now change this

alahup/elements/sets/default/mod.tpl :

{else}
Unknown module!
{/if}

to this:

alahup/elements/sets/default/mod.tpl :

{elseif $this.custom.type eq "livecomments"}
The Mighty LiveComments module !
{else}
Unknown module!
{/if}

Refresh the draft site (You can do so by clicking on the @ blue icon near the url).

This is better! We're now ready to develop the module.