Product Tour

In this tour we will show a typical process of using Frontfriend through an example of small Rent a Car web site. We recommend you to read the text from the beginning.

Preparation: Get Your XHTML Templates Ready

First step after finishing mockups in an image editing program is to create XHTML templates. There are usually the home template and various inner templates. Here is an example of web site for Rent a Car agency, showing two templates: one with list of cars and other with car details.

Your client wants an easy way to edit car entries. You want it too, of course - there is no fun in maintaining web sites for old clients. So, let us take a closer look at these two templates. There are several things to notice:

There is one object Car which is shown in two different ways: as a list of objects (Car Types) and as one object on the page. (Car Details)
Every Car has properties: name, category, class, number of seats, doors, description, photos...
In the case of listed objects, we can see that cars are grouped by category (manual, automatic) and within categories they are sorted by class.
Every car has a link (more info) to its detailed page (right template).
List template is basically the same repeating chunk of HTML code, with different data for different cars.

Frontfriend main parts

Frontfriend consists of three main parts: Define Object, Inset Data and Create Templates.

Workplace Overview

Workplace consists of top bar and windows. In the top left part there is a name of your object or template, depending on the part of the application you're in. In the Define Object and Create Templates parts you can change your object name or template name and type by hovering your mouse over the title.

In the middle of the top bar, there are three buttons that represent tools for your current object. You can create a new object or switch to another object by clicking on the Open menu button.

At the right hand side of the top bar there are buttons which turn the windows on and off. Orange arrow positioned first enables you to reset to the default workplace.

Define Object (Form)

First thing we should do is define an object - we have to describe our Car to Frontfriend. So, we add some fields into the objects. A Model can be described with a small text, a Category, Class, Number of seats will be a selected field with predefined values, and Description will be big text field. Be careful when deciding what fields you add for given property.

In the Define object section, there are three windows: Add field, Object Preview and Field Options window. You add fields by clicking on one of the fields in the Add Fields window. New field will be created in Object preview window below the selected field, or on the top, if no field is selected.

Field options are shown for selected field: Label, Default text and Instruction for the editor. The last one is especially useful for big text fields (for example, use Heading3 for big title and Heading4 for subtitle). Play around a bit, you'll see that it is not difficult. And don't forget to save, before you click on the Insert data in the top menu.

Insert data

Insert data basically consists of one table (List of entries) and one form (New Entry window). The form is the same form you made when you defined the object.

In the big text field, there is a simple WYSIWYG editor. If you work with nested lists, click shift+tab to go to parent list (not back button).

If you haven't got any actual data yet, you can temporarily insert some lorem ipsum text, because you need some data in order to create templates.

Create Templates

There are two types of templates:

List of items is the type of template that shows all entries in a way you define.
One item is the type of template showing one item, and you reach it through list of items template.

When you click on Create templates in the menu, the button New template appears together with list of existing templates, if there are any.

In List of items template type, there are three main windows: Fields, Code and Preview.

The most important input field is the Entry HTML in the Code window. This is HTML code of your item. It is a good idea to copy/paste HTML code from your HTML template and then replace the text that should be dynamic. You do this by first selecting the text, and then clicking on the field from the Fields window. Fields window consists of the list of fields you previously made in the Define Object part.

The Sorting is possible by any of the fields you defined, and by date items are created or modified.

You can group items by fields of select type, and add wrapping code above and below the repeating items. In the Cars case, there are two lists, the nested one holding items, and one that surrounds items sharing common value from the select field type.

Every time you click on save button, your data is saved and the Preview window is refreshed. We encourage you to try it out, because you see your changes immediately after saving changes.

In the Preview window there is the Options section where you can set:

Link to your CSS file, so you can see valid preview.
Output: XHTML or XML. You can use XML tags in your template and publish it in XML format. That way you can process XML on your server and keep content separate from code.

In the Options window you can set a pagination and navigation options and define link to connect two templates. Link is defined when you input an URL of a page containing one item template into the link input field. Frontfriend will add an ID of current item, so the target page will know which item to show.

Link, when defined, acts like an ordinary field. It should be inserted in the href attribute of a tag. For example: <a href="((::!!link!!::))">More info</a>.

One item template type is a simplified version of the List of items template. Main difference is that here your Entry HTML refers to an item that doesn't repeat.

Publish

You publish your templates by adding a code into your web pages. This code is waiting for you in the Publish window. Your web pages have to be online, of course. Current version is for web sites that are hosted on apache/php servers, so, your file type has to be .php. Your server must have Curl library installed (most servers do).