Lasso Examples Pack - Message Board

This example is for a standard message board application. It permits the administrator to create and delete various grouped forums, and within those forums, various discussion topics. Users are allowed to create new messages under a topic, or to reply to existing messages. The administrator is allowed to delete individual messages. Live Search fields are provided to permit the filtering of messages based on author name or body keywords. This example utilizes AJAX if the browser supports both JavaScript and the XMLHttpRequest object. If JavaScript is not enabled, the example will continue to work as expected.

AJAX is used in this example when paging between sets of messages, when posting or deleting messages and when performing live searches. The AJAX requests are performed by using the Lasso.includeTarget JavaScript function. This function allows particular XHTML DOM nodes to be replaced with updated copies without having to refresh the entire page.

The message board example demonstrates the following principles:

- Using AJAX techniques to create a dynamic user interface including live searches and navigation.

- Degrading gracefully for browsers that do not support JavaScript.

- Performing database operations and formatting the results using XHTML and CSS.

- Presenting a customized user interface depending on whether the visitor had administrator privileges.

The message board example can be used as-is to allow site visitors to participate in an online forum. By customizing the HTML and CSS of the example the look of the message board can be made to better fit into the look of your Web site. The message board example can also be studied for ideas of how to create dynamic Web sites using Lasso and AJAX techniques.

This documentation is split into two parts. The first part introduces the message board example and shows how you can use it to create and display an online forum. The second part disects the example and shows how the example performs database operations, how it uses AJAX techniques to create a dynamic user interface, how it degrades gracefully for browsers that do not support JavaScript, and how the interface is customized for administrator users.

Using the Message Board

The message board can be read by any visitor to your Web site. Users need to authenticate before they can post messages or replies. Any Lasso user can post messages or replies. Either the site administrator or members of the "OP Message Board Admins" group can create or delete groups and forums and can delete individual messages or replies.

Reading Messages

The index page lists all of the forums that are available. Forums can either belong to the default "Forums" group or additional groups can be created. Each forum has a name, description, and status including number of messages and when the last message was posted.

The visitor selects a forum and then sees the messages that have been posted in that forum. Each message has a subject and also shows who posted the message and when and whether the message has any replies.

The messages can be filtered by author or by searching in the body or title of the message. The number of messages shown (from 1 to all) can be selected from the pop-up menu and the messages can be paged through using the forward and back controls. The filters and navigation controls use AJAX to refresh just the message listing without reloading the entire page.

The visitor can select an individual message and see the replies in the message with similar controls for filtering or paging through them.

Creating and Replying to Messages

The "Create New Message" link within each forum allows any Lasso user to add a message. Each message has a title and a body. See below for instructions to create Lasso users who can use the message board.

The "Create New Reply" link within each message allows any Lasso user to add a reply to a message. Replies are all attached to the message itself and appear in order below it. Replies have a title and a body just like messages do.

Administering the Message Board

Managing Users

The message board uses Lasso's built-in users and groups to control access to posting and administering the message board. New users (who can post and reply to messages) can be added on the Setup > Security > Users tab of Lasso Site Administration. The users do not need to belong to any group to be able to post and reply to messages.

Users in the group "OP Message Board Admins" can administer the message board. Users can be added to this group on the same Setup > Security > Users tab of Lasso Site Administration. Users in this group can add new groups and forums and can delete messages or replies. The site and server administrators can also administer the message board.

Managing Forums

Forums can be created by any users who are in the "OP Message Board Admins" group. Each forum has a name and a description. Forums can either be added to the default "Forums" group or additional groups can be added. If necessary, forums and groups can be deleted by clicking on the red delete link next to their name. Deleting a group deletes all of the forums within it and deleting a forum deletes all of the messages and replies within it.

Messages and replies can be deleted by any users who are in the "OP Message Board Admins" group by clicking on the red link next to their title. Deleting a message deletes all of the replies within it.

Implementation Details

This section describes how the message board example is implemented. It is not necessary to read this section in order to use the message board on a site. You should read this section if you want to understand how the message board 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

Index.Lasso - The logic for displaying a page in the message board is contained in this file. This file (and the other files in the example) is commented extensively within the Lasso code. The LassoScript within the file determines what groups, forums, messages, or replies should be shown.

Message_List.Lasso - If the action parameter "list" is set then the messages within a forum are shown. The ID of the forum is indicated by the "list" action parameter. The action parameters "skip", "max", "authorFilter", and "bodyFilter" determine what messages are shown. The page also handles posting new messages if the "newMessage" action parameter is set. If necessary the [Auth] tag is called to authenticate the user so they can post new messages.

Message_Detail.Lasso - If the action parameter "detail" is set then a particular message and its replies are shown. The ID of the message is indicated by the "detail" action parameter. The action parameters "skip", "max", "authorFilter", and "bodyFilter" determine what replies are shown. The page also handled posting new replies if the "newReply" action parameter is set. If necessary the [Auth] tag is called to authenticate the user so they can post new replies.

Forum_List.Lasso - If no "list" or "detail" action parameter is set then all of the groups and forums are listed.

Initialize.Lasso - This file is included by each page in the site. It is responsible for setting up the message board's database, tables, and groups the first time the example is called. This file also calls the [Auth] tag to authenticate the site administrator so the example can be initialized.

AJAX

Asynchronous JavaScript And XMLHttpRequest (AJAX) is used to create a dynamic user interface. The JavaScript functions required by the example are defined in the "LJAX.LassoApp" file in the "ExamplesPack" folder. Additional Lasso custom tags are defined in the "library.lasso" in the same folder. Both files have extensive comments about the functions and tags defined within.

The Lasso.includeTarget() JavaScript function is used to swap in some dynamic content for an HTML div or span tag in the current file. This tag is called in an HTML anchor tag onclick handler or an HTML form onsubmit handler. The function requires the ID of the element to be replaced and a series of parameters including a reference to the anchor tag or form tag (this) and more.

When Lasso.includeTarget() is called it fetches the "ljax.lasso" file with the parameters from the anchor tag or form tag that triggered it. This file has the same basic logic as the "index.lasso" file. However, when the individual files such as "Message_Detail.lasso" are included they use [LJAX_Target] ... [/LJAX_Target] tags to restrict the output of the page to just what is required for the target.

The new content returned by "ljax.lasso" is scanned for an element with the same ID as the target element. The contents of the new element is swapped in place of the contents of the target element. Since the DOM of the page is rewritten in place and just the part of the page that has changed is updated the visitor's action can take place faster than reloading the entire page would and the screen has less annoying flicker.

The example is able to degrade gracefully for browsers that do not support JavaScript or XMLHttpRequest. Since the Lasso.includeTarget() tag is called in JavaScript handlers it is simply not called in unsupported browsers. Instead, the URL in the anchor tag or the form response is visited normally. Visitors with unsupported browsers simply see a Web site where each link or form submission reloads the page like pre-AJAX sites.