Lasso Examples Pack - Collaborate

This example demonstrates how Lasso can be used to create Web sites which can be maintained by users without much knowledge of HTML and without any programming. The example creates a Web site with sections and pages presented in a menu on the left side of the page. The contents of each page is shown on the right. Each section can have a custom header and footer and the entire site also has a header and footer. The font, style, color, and size for each header, footer, and the body of the page can be adjusted.

The collaborate example demonstrates the following principles:

- Serving pages from a database using a single site template.

- Creating a menu of sections and pages within a site.

- Customizing a CSS stylesheet using preferences set by a user.

- Creating an administration interface so a user can edit a Web site without performing any coding and with limited knowledge of HTML.

The collaborate example can be used as-is to create simple Web sites for your clients. By customizing the header and footer and the CSS stylesheet used by the site template the look of the site can be made very different from the defaults. The collaborate example can also be studied for ideas of how to create dynamic Web sites programmatically without editing HTML or Lasso pages directly.

This documentation is split into two parts. The first part introduces the collaborate example and shows how you can use it to create and display a simple Web site. The second part disects the example and shows how the Web site is served from the database and how the administration interface is put together.

Viewing a Site

Each collaborate site has a navigation menu on the left side of the page and displays the contents of the page on the right. The navigation menu shows a list of sections and the currently selected section is expanded to show a list of pages within. The current section and page is highlighted. The "path" to the current page is shown in the header of the site.

The URLs for pages on the site will look as follows. Each page will reference "index.lasso", but will include either a "section" or a "page" parameter. The particular section and page are determined by these parameters.

http://www.example.com/examplespack/collaborate/index.lasso?section=Default&page=Default

The "Edit This Page" link at the bottom of the site allows access to the administration interface. Read the next section for details about how to create and edit the site.

Creating and Editing a Site

Only the Lasso Site Administrator (or Server Administrator) or a member of the group "OP Collaborate Admins" can access the administration interface. However, anybody can view a Web site created using this example. In order to add additional administrators create a new user in the Setup > Security > Users section of Lasso Site Administration and add the user to the "OP Collaborate Admins" group.

The administration interface includes a navigation menu on the left that parallels the navigation of the public site with a few additions. The top option allows Site Preferences to be established. A section can be selected to modify the preferences for that section and to show the pages contained within. Individual pages can be selected to modify the preferences and content for that page. New pages can be created within the current selected section and new sections can be added.

Pages

After clicking on "Edit This Page" the page editing interface is shown. This form includes the following inputs which allow the attributes and contents of the change to be modified. These include:

- The Page Title is shown in the header "path" in the site and also in the Web browser window title.

- The Section for the page determines where the page shows up in the navigation menu. A page can be moved to a different section by choosing one from the pop-up menu.

- The Page Code determines how the page will be referred to in the URL. If the code is left blank then a code will be generated automatically from the title or a random string of letters and numbers will be used.

- The Page Status allows the page to be hidden or made visible to site visitors.

- The Page Body contains HTML text which will be shown as the content of the page. The HTML can include style information, images, links to other sites, etc. Lasso code placed in the body will not be processed.

The page body can be styled using the controls below the text area. The text color, font family, font size, font style, and text alignment can all be adjusted. The color, family, and size controls are used by clicking on the checkbox label and then entering an appropriate CSS color name (e.g. "red", "black", or "white"), a color code (e.g. "#FF0000"), a font family (e.g. "Verdana" or "Times"), or a font size (e.g. "12pt", "24px", or "large").

The buttons at the bottom of the page allow the page to be updated, the update to be cancelled, or the page to be deleted.

New pages can be created by selecting the "New Page" option in the navigation on the left.

Sections

Each section can be edited by selecting its name from the navigation menu. The section editing form includes the following inputs which allow the attributes, header, and footer of the section to be modified. These include:

- The Section Title is shown in the header "path" in the site and also in the Web browser window title.

- The Section Code determines how the section will be referred to in the URL. If the code is left blank then a code will be generated automatically from the title or a random string of letters and numbers will be used.

- The section Status allows the section to be hidden or made visible to site visitors.

- The Section Header and Footer contain HTML text which will be shown above and below the content of the page. The HTML can include style information, images, links to other sites, etc. Lasso code placed in the header or footer will not be processed.

The header and footer can be styled using the same controls which are described for the page body above.

- The Page Order within the section can be controlled here by adjusting one or more of the numeric pop-ups next to the page names.

The buttons at the bottom of the page allow the section to be updated, the update to be cancelled, or the section (and all of its pages) to be deleted.

New sections can be created by selecting the "New Section option in the navigation on the left or new pages can be created within the section by selecting the "New Page" option.

Site Preferences

The global site preferences can be edited by selecting the top item from the navigation menu. The site preferences form includes the following inputs which allow the site header and footer and section order to be modified. These include:

- The Site Title is shown in the Web browser window title.

- The Site Header and Footer contain HTML text which will be shown above and below the navigation and content of the page. The HTML can include style information, images, links to other sites, etc. Lasso code placed in the header or footer will not be processed.

The header and footer can be styled using the same controls which are described for the page body above.

- The Section Order for the navigation can be controlled here by adjusting one or more of the numeric pop-ups next to the section names.

The buttons at the bottom of the page allow the preferences to be updated or the update to be cancelled.

New sections can be created by selecting the "New Section" option in the navigation on the left or new pages can be created by selecting the "New Page" option.

Customizing the Template

The template determines the look of the site including the placement of the navigation menu, the curved border at the top of the site, the CSS which is used to render the site and more. The files for the template are contained in the folder named "template". The "template.lasso" file can be customized in order to create a site with a very different look than the default template provided. The navigation is defined in an include file called "nav.lasso". The stylesheet for the template is defined in "style.lasso".

Once the template is customized by a Lasso developer or someone skilled at HTML/CSS the individual pages within the site can be authored by someone who is only familiar with basic HTML (paragraphs, bold tags, image tags, etc.).

The stylesheet for the template is constructed using a series of [If_Null] tags as shown below. What this code does is if the $prefs variable contains a 'section_header_background' element then it is used for the background color, otherwise if the $prefs variable contains a 'page_background' element then it is used, finally if neither is defined then the default of #EEEEEE is used for the background color.

background: [if_null: $prefs->(find: 'section_header_background'), (if_null: $prefs->(find: 'page_background'), '#EEEEEE')];

Several variables contain information about what page has been loaded and what HTML to display. The variables $section and $page contains the current section and page codes. The variables $site_header and $site_footer contain the site header and footer which should be displayed above and below the navigation and contents of the site. The variables $section_header and $section_footer contain the section header and footer which are displayed above and below the contents of the site. The variable $page_body contains the contents of the page itself.

The default template shows how to construct a link to the administration interface, but this link can be left off the site if desired. Instead, simply instruct users (or set up a book mark for them) to access the URL of the page they want to edit with mode=edit appended to the parameters.

Implementation Details

This section describes how the collaborate example is implemented. It is not necessary to read this section in order to use the collaborate example to create a site. You should read this section if you want to understand how the collaborate example works, if you want to customize the appearance or behavior of the example, or if you want to use it as the basis for a different solution.

Site Display and Navigation

The logic for displaying a page in the site is contained in the file "index.lasso" and the includes in the "template" folder. These files are commented extensively within the Lasso code. The LassoScript at the top of the file determines what section and page should be shown and loads the appropriate records into the variables described in the section on template customization above.

The "index.lasso" file attempts to locate the section and page which are being requested. It defaults to the first page in a section and the first section in the site if a valid section and page are not specified. Once the section and page are found the text to display is loaded into variables. The "templlate.lasso" file determines where those variables are output on the page the visitor sees. The "style.lasso" file creates the stylesheet for the page based on the stored preferences. And, the "nav.lasso" file creates the navigation menu.

Administration Interface

The administration interface for the collaborate example consists of seven pages each of which is described here.

- Edit.Lasso is responsible for determining what action is being performed and showing the appropriate page. If a section and page are specified then a page is being edited. If only a section is specified then a section is being edited. If neither is specified then the global site preferences are being edited. Finally, a page or section id of $new$ creates a new page or section.

- Page_Edit.Lasso allows an individual page within the site to be edited. Actions include "update" and "delete". See the source of the file for full details of how the style controls are implemented and how the preferences are serialized for storage in the database.

- Page_New.Lasso presents a form with default values for a new page.

- Section_Edit.Lasso allows an individual section within the site to be edited. This is similar to editing a page, but allows the header and footer for the section to be edited. The order of pages within the section can also be modified from this page.

- Section_New.Lasso presents a form with default values for a new section.

- Site_Edit.Lasso allows the header and footer for the entire site to be modified. The order of sections within the site can also be modified from this page.

- Nav_Edit.Lasso is used to display the navigation menu while the administration interface is active.