Step 4: Displaying the Shout Box

Now that we've got a way for our users to post messages to our Shout Box, we need a way to see them. For this, we'll create what Sitellite calls a "box". In the "boxes" folder, create a new sub-folder called "display". In the "display" folder, we'll be creating two files, an access.php file, and an index.php file. The access file will be identical to the one we used for the form:

sitellite_status = approved
sitellite_access = public
sitellite_action = on

The index.php file, which is where our actual PHP code goes, will contain:

<?php

loader_import ('shoutbox.Filters');

$messages = db_fetch_array (
    'select * from shoutbox order by posted_on desc'
);

echo template_simple ('display.spt', $messages);

?>

As you can see, we also make reference in the index.php script to a "shoutbox.Filters" package, which doesn't yet exist. To create this, add a file named "Filters.php" to the "lib" folder, containing:

<?php

loader_import ('saf.Date');

function shoutbox_filter_date ($date) {
    return Date::format ($date, 'M j, Y - g:i A');
}

?>

This defines the filter we'll use to format the posted_on date for displaying it.

The last part of this step will be to create our "display.spt" template used to display the Shout Box. In a file named "display.spt" in the "html" folder, add the following:

<div class="shoutbox" style="height: 250px; overflow: auto">

{loop obj}
<p>
    <a href="{loop/url}">{loop/name}</a> says:<br />
    {loop/message}<br />
    <span class="shoutbox-date">
        {filter shoutbox_filter_date}{loop/posted_on}{end filter}
    </span>
</p>
{end loop}

</div>

{form shoutbox/add}

Now if you visit the following URL, you should be able to see your Shout Box in action:

http://www.example.com/index/shoutbox-display-action

However, it's not very useful on its own screen like that. The last step will be to add it to one of your sidebars.

Page 1: What is a Shout Box?
Page 2: Step 3: Creating Our Shout Box Form
Page 3: Step 4: Displaying the Shout Box
Page 4: Step 5: Adding Your New Shout Box to Your Web Site

All Tutorials