PageLayout in LoopyCMS

Overview

The LoopyCMS is a content management solution designed for rapid deployment, ease of use and gives its users the ability to extend it to do virtually anything they want.  In developing the LoopyCMS, the focus was on keeping things as simple as possible, keeping performance high and development effort to a minimum, without compromising functionality.  And to make things as easy as possible on the user, LoopyCMS includes a WYSIWYG (what-you-see-is-what-you-get) editor so you never have to manually write HTML.  Your content looks the same while editing as it does on the finished page.

Most content management systems cost a great deal of money and require the purchaser of the system to spend a great deal of time building the site out using a programming toolkit. They generally require expensive database technologies to be used to power the site, and require extensive knowledge to build and maintain (or extensive money to pay someone else to do it).

At the other end of the scale, an emerging set of "weblogging" software packages allow people to build websites that don't require such a great investment of time, knowledge, effort or money to deploy, but they are generally oriented to creating HTML pages.  This means that the ability to create web applications that deliver dynamic content, gather user information, send email, or any other activities associated with HTML forms is limited.  Also, because these weblogging applications publish content as HTML pages, changing the layout of your site can be a daunting task, even when using CSS stylesheets to minimize the changes necessary.

Bridging this gap and avoiding many of the drawbacks of both approaches: the LoopyCMS.  The LoopyCMS is not only a Content Management System, it is a Web Application Development Framework.  This framework has been used to create a "ready to roll" website approach.

The Basics of the LoopyCMS Page Layout

To begin using the LoopyCMS to manage your site, you'll want to understand how it all fits together. Let's look at an illustration of how a page is constructed:

 
Note: This example shows a particular layout, but most
any arrangement of these elements (including disabling
one's you don't want to use) are possible.

The image above shows highlighted areas depicting the major sections of a typical page.

• The PageHeader contains the site logo and any other elements you want at the very top of the page
• The TopMenu contains navigation links for the site.  Because of limited space available for this, it is designed to show a few major sections
• The PageMenu is a secondary navigation menu, but because it can extend down the page, can contain more links and sections than the Top Menu 
• The MenuInsert is a small area within the PageMenu that can be used to link to special items, show promotional links or call attention to some special feature
• The Content area contains some further divisions not depicted in the image above.  These include:
  • The HeadingContentTop, which displays the title of the page
  • The ContentCell, which displays the individual page's content.  This area is generally filled by creating one or more "Blocks" that are associated with the page.
  • The PageFooter, which displays a copyright message or other such information.

These page elements are arranged using CSS positioning via a stylesheet.  This means that much of the look and feel of your site can be modified without changes the the HTML itself.  The site pictured renders properly in all modern browsers and works quite well back to version 4.0 of Netscape.

LoopyCMS Page Templates

The individual pages on your site will be based on LoopyCMS standard templates.  A template for a standard page, such as shown in the illustration consists of some element definitions (for instance, which PageHeader, TopMenu and PageMenu to use) and calls to LoopyCMS pagebuilder functions. Let's look at an example:

OK, now if you're not a programmer, you're scared.  Don't be. Standard templates have been built to handle a range of situations, and you can edit these templates without having to touch the code.  If you're afraid of "Version 1.0", LoopyCMS is actually an implementation of my standard web application templating system, version 4.0.  Version 2 has been put to the test on a popular legal publishing web site taking millions of hits a month and version 3 is the basis of LoopyNews. Anyway, back to the overview:

• The section of variable definitions (lines of the form: "doc_______="_______") specifies the individual elements to display on the page.  Most of the elements above have called "default" which will display the default element of that type (as we'll see in the section on Content Types below creating and editing these elements allows you to organize all the sections and pages on your site as you wish).  Now, the word "default" is a bit of programmer-speak, but it just means the automatic choice if nothing special is specified.  The default document when you request  http://www.somesite.com/ on a Microsoft IIS webserver is default.asp. 
• The subroutine calls, doInitializePage, showPageOpen and showPageClose are going to be used on almost all pages that aren't among the special web applications built-in to LoopyCMS (or in custom web applications added in later).
• openSingleColumn simply creates an HTML table with one column to contain the content of your document. It has a couple of cousins called openLeftColumn and openRightColumn if you want to build pages with two columns in the content area.  (Even more complicated layouts are possible if you want to investigate -- or extend -- the family of table functions in common_PageFunctions.asp).  Depending on what you want to do on your site, you may not need to use anything but this one table formatting call on any of your pages.
• showBlock calls up a file from the "Block" content type that is built for a particular page.  This "Block" serves as the content for that page.

Each of the major page sections' positioning is controlled by the site's stylesheet that specifies where the elements are positioned.  The stylesheet also specifies the other characteristics of elements on the page, such as the fonts, font sizes and colors, background images, spacing, padding, margins, borders, and so forth.  This means that you need do little to no fancy formatting of your HTML, because all the attributes are specified automatically.

The Content Directory

Where do all these page elements come from? How do I manage these elements? Where are they stored?   Let's look at the "Content" directory.

The Content directory contains all the content elements you create. The Content directory itself contains a directory that is specific to your site.  In this example, all the site's content is contained under "emo". This allows for multiple LoopyCMS sites to run from the same server. 

All the components of the page have their own directories.  When you create a PageHeader, it lives in the PageHeader directory, and the same for the other types we've discussed. 

A New Content Type - Content Collections

Next, note the Articles and Newsletters directories.  These Content Types are somewhat different in that they are designed to contain content where you will have a large number of the same type. Let's refer to these as Content Types as "Content Collections". 

Why? Because they're designed to work with a viewer application, also provided by the LoopyCMS.   This way, you don't have to create a new page for every new item, just publish a link to the Viewer for that type of content and request that particular file.  As an example, I'll post the link to this document:  /articles/view.asp?file=LoopyCMS_pagelayout.htm.  That's pretty easy, right?  Well, it get's even easier.  Within the content editor is a ContentBrowser application, designed to help you select the article you want to link to. 

Even easier?  How's this: /articles/LoopyCMS_pagelayout.htm?  Another LoopyCMS tool, the redirector. The redirector is designed to take a request for content and pass it to the viewer application.

Articles and Newsletters are built-in to LoopyCMS to handle much of your initial needs for content, but you can add additional types.  Examples might be "Whitepapers" or "Products" or any pretty much any new section you might want to add to your site that will have content to be added to on an ongoing basis. 

Other Tools - Newsletters, Photo Albums, ...

I've mentioned the Newsletters, and that suggests that Newsletters get e-mailed out to subscribers.  Correct.  When you finish editing a newsletter, just use the Newsletter sender to distribute it to your subscribers.  People can subscribe and unsubscribe from your newsletters with the Subscription application.

Cool, you say?  What else have you got in there?  Well, here's some more:

• The PhotoAlbum, a tool that allows you to drop a directory full of pictures and add captions, descriptions and navigation through the images.
• The Directory Viewer allows you to configure a directory to allow specific types of files in that directory to be displayed as links.  You can also choose whether to allow someone to see the subdirectories.  Imagine a downloads section on your site, listing the files available for download.  you can just drop new files in that directory and they'll immediately be available on the site for download.
• Contact application - allow people to email you questions and feedback.
• Public article submissions - Want to allow people to submit content for your site?  Well, here's the tool for it.  Their submission is emailed for editorial review.  If you like it, just copy the body of the email and paste it into the editor.
• And I've mentioned, the HTML editor application. It comes with full-featured editing capabilities, a TableBuilder application, Image and Content browsers.  It comes with the ability to add custom formatting commands, so you can mark items up in a particular style unique to your site.  It supports regular copy and paste operations.  It interoperates with Outlook's HTML formatting nicely, and has security enhancements to keep unsafe elements out of your finished HTML (especially important if you enable the public Article submission tool!)
• As an optional install, LoopyCMS comes with a SiteManager application that allows you to create and rename files and folders, directly edit files, upload files.  Perfect for publishing when you're away.
• Automatic Content Versioning.  All the content is automatically backed up when you edit it. Make a boo-boo.  Pull up the Restore application and to rollback the mistake.
• For developers who want to write new applications, LoopyCMS comes with some features to make development easy. 
  • First, they can use the LoopyCMS Page Templates to make their pages look just like any other part of the site.  A Form Library for building HTML forms helps cut down on programming and maintenance of HTML
  • Security features to help prevent form tampering and other bad behavior.  Bad hacker! No Cherry Coke for you!
  • LoopyCMS champions code-reuse and modular design.  Go to "Mode School" and learn how to work within the LoopyCMS framework.
• For non-developers who want customing coding and extensions to the application toolset, LoopyCMS is the best choice for rapid custom code development.  The framework is already there, the methodology ready, the tools waiting to be called.

Conclusion

So, that wraps up this tutorial.  Next edition - building out a site with the LoopyCMS .