Back to Programming in Ariadne

• Basic Concepts
• Starting a new site
• Using Modules
• Adding a newspaper
• Bookstyle navigation
• Creating a message board
• Multilingual Templates
• Workflow and Wizards

Starting a new site

This tutorial shows you one way to start a new website in Ariadne. It shows how to structure the content as well as the templates.

If you haven't read the basic concepts tutorial yet, you should do so first. It introduces a number of concepts used in this tutorial.

This tutorial shows one way of setting up a new small to medium website in Ariadne. This is the approach we at Muze mostly use, it is designed to be easy to change and extend.

The first step is to create a new psite object. You can do this anywhere in Ariadne, but it is always a good idea to create a 'sites' directory first. If you create a site directly in the Ariadne root, it will be hard to later group some sites together. If all your sites are directly in the Ariadne root, it can quickly become crowded. For the purpose of this tutorial we will create a new website for a fictitious company called 'Chocoluck', which sells chocolat candy.

In your new psite object you should leave the URL field empty untill the configuration of the webserver and nameserver is complete, otherwise you won't be able to preview the site. Configuration of the webserver to handle multiple websites in Ariadne is discussed in the 'configuring sited' tutorial.

One thing common to most sites is the use of graphical elements to liven up the design. These graphics are used throughout the site and are usually only touched by the designer of the site, not any editor. For this purpose create a new pphotobook object, with the filename 'graphics' for example, in the 'chocoluck' site.

The next step is to create the main sections of the website. If the website is expected to grow pretty large, say more than about 30 pages, it is a good idea to use the psection class for these objects. Another good reason to use psection objects is if the site has a slightly different look for each section. In this case the psection objects make it easier to determine in which section you are and change the layout accordingly.

The main sections of the Chocoluck website are 'assortment','about chocoluck','about chocolate','shop' and 'contact'. The site isn't going to be very large, so we will create these sections simply as pdirectory objects. Keep the filenames simple, lowercase, without spaces or special characters. This makes it easier for people to remember URL's.

The structure we built for Chocoluck looks like this:

Figure 1: Chocoluck tree structure.

/sites/ /sites/chocoluck/ /sites/chocoluck/about/ (About Chocoluck) /sites/chocoluck/assortment/ /sites/chocoluck/chocolate/ (About Chocolate) /sites/chocoluck/contact/ /sites/chocoluck/graphics/ /sites/chocoluck/shop/

The next step is to add the images needed for the design. Simply create new pphoto objects in the graphics directory for all your images.

Now its time to implement the design in Ariadne. Time to start with the templates. As you should already know, the default template called whenever you go to a site is the view.html template. This template defines how the site looks. The problem is that there are a lot of different objects in a site, and not every object has the same look. You can create a view.html template for each different class, but that means copying a lot of the same html layout for each template. Not only is this unnecessary work, it also means that later when you want to change the design, you'll have to change it in each and every view.html template.

Fortunately there is an alternative, you can 'split' the design in a few different pieces, and create a template for each piece. There are many possible ways to do this, but the following is the one we mostly use:

Figure 2: Default template structure.

ppage::view.html

<pinp>
 call('init.vars.html');
 call('view.header.html');
 call('view.body.html');
 call('view.footer.html');
</pinp>

pobject::init.vars.html

<pinp>
 $site=currentsite();
 $site_url=make_url($site);
 $graphics_url=make_url($site.'graphics/',false,false);
 putvar('site',$site);
 putvar('site_url',$site_url);
 putvar('graphics_url',$graphics_url);  
</pinp>

pobject::view.header.html

<pinp>
 $graphics_url=getvar('graphics_url');


</pinp>
<html>
<head>
 <title><pinp> echo $nlsdata->name; </pinp></title>
</head>
<body>
<div id="header">
 <img src="<pinp> echo $graphics_url; </pinp>logo.gif" 
 alt="Chocoluck">
</div>

pobject::view.body.html

<pinp>
 $site=getvar('site');
  get($site, 'view.menu.html');
  call('view.content.html');
</pinp>

pobject::view.footer.html

<div id="footer">
 Site design by ACME Design Inc. - &copy; 2004 Chocoluck.
</div>
</body>
</html>

ppage::view.content.html

<div id="content">
<h1><pinp> echo $nlsdata->name; </pinp></h1>
<p class="summary"><pinp> echo $nlsdata->summary; </pinp></p>
<pinp>
 ShowPage();
</pinp>

</div>

psite::view.menu.html

<div id="menu">
<ul>
<pinp>
 ls('show.menu.html');
</pinp>
</ul>
</div>

ppage::show.menu.html

<li><a href="<pinp> echo make_url(); </pinp>"><pinp> 
 echo $nlsdata->name; 
</pinp></a></li>

The strange names like 'ppage::show.menu.html' describe which class the template is created for and which name it has. The first part, before the '::' is the class. When creating a new template you can select the base class for the template in a drop down list in the top left. Right next to it is a text input box for the name of the template. You should enter the part right after the '::" in there.

Why bother with these classes at all? Well, there are many different objects in any given site in Ariadne. These objects can be of a number of types or classes. An average site has one psite object, a few pdirectory objects and a number of ppage objects, as well as a pphotobook and a few pphoto's. By defining templates for a specific class, like ppage, all objects of that class (and subclasses) will use that template, but others will not. I've created a view.html template for ppage, but not for pobject. This means that any ppage, but also a pdir and a psite, will use our new template as the default view template, but not pphoto. This is a good thing, because the default view template for a pphoto will display the image, although it is internally called view.html it may actually output a gif or jpeg image, including correct headers. Your browser won't mind, although it can be a bit confusing.

Another thing you can easily do is create a slightly different layout for your homepage. All you need to do is to create a new view.content.html template for psite. e.g.:

psite::view.content.html

<div id="content">
<pinp>
 ShowPage();
</pinp>

</div>

This template skips the H1 title and summary, so you can use the page content to fill the entire front page (except for the menu and header and footer ofcourse). You can do a lot more ofcourse, like include a news section on the main page, or latest changes, etc. But that's something for another tutorial.

If you only want a different header for the homepage, you can do the same thing for the view.header.html template.

The menu that the view.menu.html template builds simply lists all the children of the object on which it is called. In this simple system it is always called on the psite object, no matter which page you are viewing. There are lots of different ways to handle navigation in a site, this one is only usefull for a very small site. A more complex menu might show a list of pages in the current section, as well as the current location in the site, with a way to go back. Such a navigation system is easily built in Ariadne with only a few lines of html and pinp code:

pobject::view.body.html

<pinp>

 get($parent, 'view.menu.html');
 call('view.content.html');
</pinp>

pdir::view.body.html

<pinp>

 call('view.menu.html');
 call('view.content.html');
</pinp>

ppage::view.content.html

<div id="content">
<h1><pinp> echo $nlsdata->name; </pinp></h1>
<pinp>

 get($parent, "view.crumbs.html");
</pinp>
<p class="summary"><pinp> echo $nlsdata->summary; </pinp></p>
<pinp>
 ShowPage();
</pinp>

</div>

ppage::view.crumbs.html

<div class="crumbs">
<ul>
<pinp>

 parents('show.crumb.html');
</pinp>
</ul>
</div>

ppage::show.crumb.html

<li><a href="<pinp> echo make_url(); </pinp>"><pinp>

 echo $nlsdata->name; 
</pinp></a></li>

All this looks like a lot of code when you look at the list of templates, but each template is very simple and does just one thing. In addition it is now very easy to create new templates which differ in just one way but use the existing templates for most of the layout, e.g. to show a sitemap or search results, etc. Changing the look of a site for a specific section of the site is also easy, just redefine the templates that have a different layout, usually the header and footer, in the directory that has a different look. All the navigation and content templates don't need to change.

If you have experience with PHP you may have noticed something, there is no foreach() or while() to be found in these templates at all. Ariadne takes care of all the looping through the ls() and parents() methods. The ls() method loops through all the children of an object and calls the given template on each of them in order. The default order is based on priority and filename. You can change the priority through the edit > priority menu. The parents() method works in a similar way, it loops through all the parents of an object, starting at the site root and working its way through untill and including the current object. This is why the view.crumbs.html template is called on the parent via get($parent, ...), this way the crumbs only show the parents, and not the current object also.