Building a Site with LoopyCMS

Dateline: 09/07/2003

Overview

Having discussed some of the key aspects of building pages in the LoopyCMS in LoopyCMS_PageLayout.htm, I want to cover some basic concepts of how to build out a site.

The image below depicts an example site, showing how the different sections of the site and the pages that live in those sections.  The home page uses the standard elements, a PageHeader, TopMenu, PageMenu and PageFooter. The entries on the TopMenu consist of Home, Articles, PhotoAlbum, Downloads and Contact.  One PageMenu item points to "Submit an Article". Articles and PhotoAlbums have additional content underneath them, Downloads is a single page with a LoopyCMS FileList tool on it and Contact is a custom web application.  The "Submit an Article" page is also a custom application.

Articles Section

As with most of the pages on your site, you'll use a "Block" that contains that page's content.  The front page, uses "FrontPage01.htm" from the Blocks content directory while the Articles main page, uses "Articles01".  Because the Articles content type is a Content Collection, you'll use the article main page's Block to create links to the viewer application to display the individual articles .  There are two methods to link to an article, either by refering to the viewer application with the name of the file desired -- /articles/view.asp?file=somefile.htm or by using the name of the file, as if it were in the articles directory -- /articles/somefile.htm.  While articles themselves reside in the content directory, a special helper application, the redirector sends requests for files to the viewer.

Thinking ahead to a time when you may want to rotate out the content in the Articles section, you could create an archive page, with a Block containing links to previous articles and then continue using the Article main page to link to your new articles.  Future versions of LoopyCMS will contain archiving tools to automate this process for you.

In the example image below, note that all these pages have the same PageHeader, TopMenu and PageMenu, although you could customize these to use different layout elements, if desired.

PhotoAlbum section

The PhotoAlbum section of the site introduces an additional tool, the file viewer.  In addition to having a Block at the top of the page, it includes a FileList tool that shows the subdirectories of the PhotoAlbum directory that contain images and ImageNavigator Pages, the engine for PhotoAlbums.  If you desired, you could replace the FileList too with a regular Block and publish links to the PhotoAlbums, supplying descriptions of the individual PhotoAlbums rather than a simple lising. 

The PhotoAlbums themselves have editting tools that allow you to upload images, choose which images to show and allow you to create captions and descriptive text, if desired.  Other than calling the ImageNav tool instead of a Block, these PhotoAlbum pages are the same as other pages. Once in place, the navigation buttons walk you through the pages of the PhotoAlbum.

Downloads Section

The downloads section is constructed much the same was as the PhotoAlbums main page, with a Block and a FileList.  If you want to create subdirectories in the download section, just create a new copy of the download page in each subdirectory you create.  Or create new pages with their own blocks, so you can describe the particular contents of that directory of downloads.

Contact section

The contact application is a custom web application that allows people to send you an email from the website. When the submit button is pressed, the page reloads, requests the submitted values from the form and either displays an error message (if the person didn't supply their email address or name, for example) or sends the person's email to the site contact.

Submit an Article section

The "Submit an Article" application is much like the content application, but it contains the HTML editor used for the Content Management applications, so that users of the site can submit content. If you are using LoopyCMS to build an on-line publication, this could be useful, but if not, you probably won't want to use it.  It does illustrate how effective LoopyCMS is for building custom applications.  It also illustrates some nice security features, actively stripping out insecure or potentially dangerous HTML elements and contains a security element that forces people to use the application as it was intended.  Another aspect is that if someone uses a browser that is not compatible with the WYSIWYG HTML editing capabilities of the LoopyCMS, it falls back to using a text entry mode that will accept the HTML or text message they supply.

Lastly, note that these pages contain custom TopMenus specific to these pages.

Well, I hope these images and my description have helped make clear some of the basics of building out your site with the LoopyCMS.  If anything is unclear, I'd appreciate your feedback on how to make it clearer or more useful.

Lane Schwark
LoopyCMS Author