Publishing comments online

The next step in this series shows how to publish visitor comments on your website, using hosted web service modules from Xara Online. I've already shown how to set up a form to collect comments, how to add a mailer to email an automated response, and how to create a database to save them. This next step introduces two of the most versatile members of the Xara family of connectable modules. It shows how to add a query module to find comments in the database, and a reporter module that you simply cut-and-paste into any page on your website to publish them automatically.

Before getting started, it's worth taking a moment or two to think about the following points:

1. What information do you want to show on your web page? — When visitors submit their comments, the form also asks them for their email address, first name, last name and website URL. This information is recorded in the database, along with the date and time when they submitted their comment. Here's a reminder of the complete list of fields (with their system fieldnames in brackets):
   • Your email address (email)
   • First name (fname)
   • Last name (lname)
   • Your website URL (siteurl)
   • Your comment (comment)
   • Date and time submitted (entry_date)

Apart from the email address (which visitors may wish to keep private), it will be useful to publish all of this information for each comment, using the entry date to order them so that the most recent comment appears first. It's the role of the query to select this information and sort it into the correct order.
2. How do you want to present the information? — My suggested layout is pictured right (click thumbnail for larger version). This is based on the layout I originally used for Loosely Coupled's comments page. There are two separate elements to consider:
   1. The format and layout of the repeating information that will make up the body of the report. In my example, the repeating section displays the comment first, with the submission date, visitor's name and their website URL underneath in a two-column format, followed by a dividing line.
   2. The overall colors and font style of the report, including the non-repeating header and footer. To match the style of the rest of the site, I chose 16pt type for the heading, colored cyan, with a gray dividing line beneath it. At the bottom of the report, I included a footer with page numbering.
   
   For a different site, you might choose an alternative layout, with different colors and font styling. It's up to you — you can control all of this formatting from within the reporter module, as explained below.

First you must create the query module, which reads information from your database ready for use by the reporter module. This takes just a minute or two:

1. On the left-hand menu of your module store, Select Data Manager — Database Query — Create New. In the center of the next screen, follow the instruction to 'Click here to select a Database module.'
2. You'll see a screen showing all the suitable modules in your module store. Click on the icon for your database.
3. Xara automatically creates a query with the same fields as the database, and takes you to the 'simple search' screen in the query editor. Click on the 'advanced' tab.
4. The advanced screen gives you various options to control the output from the query, and to connect it to other modules, as pictured right (click thumbnail for larger version). Make three small changes to prepare it for our current application:
   1. In the 'Search criteria' section, there's a column of check boxes on the right-hand side headed 'Output'. At the bottom of the column, the box for the 'Entry date' field is unchecked. Click on it to make it checked. This will let you publish the dates when comments were submitted.
   2. Underneath, in the 'Input & Output Options' section, you'll see two drop-down menus. Set the 'Sort output by field:' selection to 'Entry date', and set the 'Sort order:' to 'Descending'. This orders the comments by the dates they were submitted, with the most recent at the top.
   3. Now go all the way down to the 'Advanced' section near the bottom of the page (not shown in our screenshot). Put a check in the box next to 'Execute this query whenever database data changes.' This means the query will update any new comments or other database changes automatically, instantly publishing your visitors' comments as soon as they are submitted.
   
   
5. The final step is to give the query a suitable name (eg "comments_publish") in the small white box at the top right of the screen, and then click the 'save and publish' button.

You're now ready to create the all-important reporter module, which you'll be able to embed in any page of your website to publish your visitor comments online (this first reporter module will also act as a time-saving template when adding other reports to your website later on):

1. On the left-hand menu of your module store, Select Data Manager — Reporter — Create New. You'll now go through a short series of screens to set up the module:
   1. In the center of the first screen, click on this line of text: 'Click here to select a module that outputs data.'
   2. The next screen shows all the suitable modules in your module store. Click on the icon for the query module you just created.
   3. On the screen that follows, you'll see a selection of predesigned report styles. Find the 'Basic Report' style, headed "Reporter Module" (at the time of writing, it's the middle picture on the left of the page). Click on it to select it.
   4. This takes you to the 'reporter mode selector' screen. The middle option is 'Public, shared report that all visitors see'. Select this by clicking on the 'select mode' button alongside.
   
   
2. You have now reached the reporter editor, which is very similar to the form editor in step one, with the same editing controls at cell, row and column levels. The first task is to make some global changes to quickly rearrange the default layout of the report:
   1. Xara automatically generates a separate column for each field in the query — six columns in all. My layout will only use two of them, so begin by deleting the four unwanted middle columns. Click on the arrowheads above each column in turn, and select the 'delete this column' tool, until you have just two columns remaining.
   2. To remove the two-tone color effect, check the edit boxes on the right-hand side of both the top and bottom rows, and then click on the 'edit selected' button underneath the report table. In the popup edit window, click on the maroon-shaded background color box to bring up the color picker window. Click on 'Transparent' and then 'Set color'. Then click OK to return.
   3. My layout needs an extra row in the body of the report. To insert it, click on the arrowhead for the second row (the one with italicized 'email' and 'comments' headings), and click on the tool to 'insert new row below'. This adds a duplicate row.
   4. Now remove the text centering. Click the 'edit all' button to bring up the 'edit cells' popup. Click on the drop-down menu for 'Cell content: Horizontal', and select 'Left align'. Click OK to return.


3. You're now ready to begin editing the contents of each individual cell, starting with the repeating section that makes up the body of the report. For this step, you'll need to be able to see the field names that will be merged from the query into the report:
   1. Below the main editing area, you'll see three tabs. Click on the middle tab, called 'input connections'. The box underneath will now show a list of available field names.
   2. Now go up to the top of the editing area, and click on the 'show connections' link. This changes the editing view to show merge codes, so that you can see where the fields are placed in the report (as pictured in 4c below).
   
   
4. You can now move on to edit the formatting and contents of each of the individual cells in the repeating section of the report (we'll come back to the header and footer rows later on):
   1. Moving past the heading, the next row is the beginning of the repeating section, and it's where the comment will go, so the two cells in this row need to be merged into one. Click the edit button for the first cell, and select the cell tool to 'merge with cell on right'. Then click on the edit button for the newly merged cell, and make these other changes:
      1. Click on 'font' to bring up the font selector and remove the italic.
      2. Replace the existing text with the merge code "[[comment]]" and click OK
   
   
   2. Now click the edit button for each of the next four cells in turn and edit the text as follows:
      1. In the first cell, change the text to "Posted [[entry_date]] by:"
      2. Moving to the right, change the text in the next cell to "Website:"
      3. Moving to the next row, change the text in the left-hand cell to "[[fname]] [[lname]]"
      4. Moving to the right, change the text in this cell to "[[siteurl]]"
   
   
   3. With all of the merge codes in place, the repeating section is complete, as pictured right (click thumbnail for larger version). If appearance doesn't matter to you (or if you want to test the results of your handiwork before you continue), you can now go directly to step 6 and start using the report. Alternatively, carry on to the next step to fine-tune the presentation of the report.


5. The final stage is to amend the header and footer rows, add some dividing rows and change the background color. These important cosmetic changes will tidy up the appearance of the report, and bring it into line with the look of the site:
   1. Click the edit button for the heading cell. Make the following changes:
      1. In the text box, enter your preferred heading, such as "Latest comments".
      2. Click on 'font' to bring up the font selector window, and click on the color box.
      3. This brings up the color picker so you can select your preferred font color. Either select a color from the grid, or enter an RGB value (for cyan, I entered 0,0,255), and then click 'set color'.
      4. Back in the font selector window, enter your preferred font size (I chose 16pt) and font style (I clicked off the bold), then click OK.
      5. Click OK to finish editing the heading cell.
   
   
   2. Now click the purple arrowhead to the left of the heading row. Under the row tools, uncheck the box labelled 'copy contents on new row creation', and then click the row tool to insert a new row below. Now click the arrowhead for the new row so you can edit it to act as a divider:
      1. Click on the background color box. Click on the middle gray in the color picker (or an alternative color of your choice), then 'Set Color'.
      2. Click the radio button next to "Height" and type "1" into the px box (this sets the height to 1 pixel).
      3. Click OK to return (the row will appear to be too thick, but don't worry about that for now).
   
   
   3. Now click the arrowhead for the next row (the one containing the comment field). Go to row tools, uncheck the 'copy contents' box, and insert a new row below, which will act as a blank spacer row. Click the arrowhead for the new row, and set the height to 1 pixel.
   4. Go down to the bottom row and click on its arrowhead. Uncheck the 'copy contents' box and insert a new row above (not below). Now click the arrowhead for this new row to turn it into a repeating divider:
      1. Set the height to 1 pixel
      2. Set the background color to middle gray (or your own choice of color)
      3. Uncheck the box next to 'Header/Footer row:' (this makes sure it repeats after each comment).
   
   
   5. The last finishing touch adds a pagination control to the footer:
      1. Click the edit button for the single cell on the bottom row, then click the 'Change Cell Type' button.
      2. Select 'Pagination Control' and click OK
      3. The number of records per page controls how many comments will show on a single page. You can choose any number. I started with 3, to avoid having too many stale comments on display.
      4. Select 'font' and change the color to black.
      5. Click OK to return.
   
   
   6. Now move down below the main editing area and click on the 'table properties' tab. You'll see that the 'Cell Padding' is set to 4. This is what is making the divider lines too thick. Change it to 0, and set 'Cell Spacing' to 4 instead. Finally, change the background color to transparent.


6. The reporter is now ready to save. Give it a suitable name in the small white box at the top right of the screen, and then click the 'save and publish' button alongside.
7. The final screen will show you a line of text with the word SCRIPT at each end. This is the HTML snippet that you'll paste into your web page at the point where you want to publish your comments.

The completed function is now ready to go live, just by pasting that HTML snippet into your web page. The only thing it needs to get started is to receive some information from the query. That will happen automatically as soon as anyone posts a comment. Why not post one yourself to announce that your real-time commenting system is now operational?

posted by Phil 1:37 AM (GMT) | comments | link