web design and hosting
features and pricing my account customer support about ICG Link, Inc. contact ICG Link, Inc.

Building an Interactive Back Office
   
 
 
Our form, search and replace scripts can be used to build an interactive back office so non-technical site administrators can edit site content without the use of html or other coding. Uses might include a calendar, news page, text content, a photo gallery, a simple blog or any other interactive content. While the instructions for each script show how to do this, it's often easier to visualize the combination of all three scripts with a "How To" example that covers the entire process. Let's get started right away with an inital introduction and then our example...

Introduction

As an example of how this works, we will build a simple news and events system. Once you get good at this, you will find that building a back office element such as this takes very little time. The main elements of the process are as follows:
  • A tab delimited data file stores the data
  • The search script is used to display information from the data file
  • The form script is used to add new records to the data file
  • The replace script is used to edit existing lines in the data file
Data File

The whole process uses a tab delimited text file in your www/data folder. The file has field names on the first row and information, or records, on each subsequent row. Our data file will be called news.data and will start out looking like this:
uniqueno     date         title                  description
1072275140   2003-12-24   Santa Comes to Town    Tonight's the night. Be on the lookout!
The file has four columns with four field names and a single record of information to get us started. A file like this can be created in a spreadsheet program and exported as tab delimited text, or a simple text editor can be used like Notepad, Textpad or BBedit (Mac). The first column is some unique number. This will be needed later so the replace script knows which line to edit. Our second column is date and it is presented in a format that can be sorted accurately because we have decided to sort our results by date in this example. Next we have the title of our news article and lastly the description.

Displaying Your Data

The search script is used to display the data. Make an html template in your www/data folder that displays the information like you want it. Here's ours. Remember, everything between the SEARCH tags is repeated for every successful result found and field names used here must match the field names from the data file. We used CAPS for code for clarity, but you don't have to do that. Just remember that field names are case sensitive:

<HTML>
  <HEAD>
    <TITLE>Latest News</TITLE>
  </HEAD>
  <BODY>
    <P> Here's the latest news:</P>
    <TABLE>
<SEARCH>
      <TR>
       <TD><! FIELD=date></TD>
       <TD><B><! FIELD=title>:</B> <! FIELD=description></TD>
      </TR>
</SEARCH>
    </TABLE>
  </BODY>
</HTML>
Some notes to keep in mind: a) You must use the full URL to images for any template that is called by the scripts, b) you can add enhancements from the search script such as "previous/next" to make it easier to navigate through the data, and c) you can use multiple results templates if needed for different searches on the same data file. We will have two in our example - this one for displaying information and another one for editing it.

Calling Up the News

Now that we have a data file and a template, we can call the template page using the search script. Here's the link that will be on our button for calling up the news. In our example, we will only show the ten most recent articles:
/cgi-bin/search.pl/news?f_match=10&f_sort=date&f_sortorder=321
Administration Folder

Next we will need a password protected administration folder so only site administrators can edit the contents of their data file. Using an ftp program, create the folder www/admin and using our password protection system, protect the folder with an appropriate username/password combination. The page www/admin/index.html can have links to all the back office elements you create for editing purposes. In this simple example, we will call up an editing page that will use the form script to allow additions to our data file and the replace script to allow edits. Here's the call to our editing page:
<a href="/cgi-bin/search.pl/news?f_match=10&f_success=newsedit">Edit News</a>
Notice we have a different template page to display our results. NOTE: This example shows the simplest way to produce a back office editor. If your data file is very complex or very large, you might choose to perform the editing task in two steps: 1) search for the record you want to edit and display a brief summary of the records that match the search and, 2) then proceed from any one record to the editing page that uses the replace script on that record only.

The Editing Template

In this case, we will use the single step method. Instead of simply displaying the information from the data file as we did from the news button on the site, we will display it for editing purposes. Our results template looks a little differently this time with a section that uses the form script for adding a record and a section that uses the replace script for editing a record. We won't go into all the details of why the code is the way it is, since you can refer to the script instructions for that information, but a few things bear notice. First, whether you add or edit a record, the form and replace scripts recall the edit page so you can continue editing more records. Secondly, we use calculations to generate the unique record number and the date. Lastly, we used the "previous/next" code here so we could get to all the data for editing or removal. The file is called newsedit.html and looks like this:

<HTML>
  <HEAD>
    <TITLE>Edit The News</TITLE>
  </HEAD>
  <BODY>
    <P><A HREF="http://www.yourdomain.com/admin">Return to Admin</A></P>

    <P>Add New News:</P>
      <FORM METHOD=POST ACTION="/cgi-bin/form.pl">
        <INPUT TYPE="HIDDEN" NAME="x_uniqueno" VALUE="$v_unique">
        <INPUT TYPE="HIDDEN" NAME="x_date" VALUE="$v_year.'-'.$v_mon.'-'.$v_mday">
        <INPUT TYPE="HIDDEN" NAME="f_data" VALUE="news.data">
        <INPUT TYPE="HIDDEN" NAME="f_format" VALUE="/news.format.data">
        <INPUT TYPE="HIDDEN" NAME="f_success" 
        VALUE="http://www.yourdomain.com/cgi-bin/search.pl/news?f_match=10&f_success=newsedit">
        <INPUT NAME="title" SIZE=45><B> - Title</B><BR>
        <TEXTAREA NAME="description" COLS="45" ROWS="8"></TEXTAREA><B> - Description</B><BR>
        <INPUT NAME="submit" TYPE="submit" VALUE="Add New Item">
      </form>

    <P>Edit Existing News:</P>
    <P>Records <! field=v_pagestart> - <! field=v_pageend> of <! field=v_found> .<BR>
      <! SEARCHPREV><< Previous 10<! /SEARCHPREV>
      <! SEARCHPAGES>
      <! SEARCHNEXT>Next 10 >><! /SEARCHNEXT>
    </P>
<! SEARCH>
    <P>
      <FORM METHOD=POST ACTION="/cgi-bin/replace.pl/news">
        <INPUT TYPE="HIDDEN" NAME="find" value="<! field=uniqueno>">
        <INPUT TYPE="HIDDEN" NAME="f_success" 
        value="/cgi-bin/search.pl/news?f_success=newsedit&f_match=10">
        <INPUT NAME="title" VALUE="<! field=title>" SIZE=45><B> - Title</B><BR>
        <INPUT NAME="date" VALUE="<! field=date>" SIZE=45><B> - Date</B><BR>
        <TEXTAREA NAME="description" COLS="45" ROWS="8"><! field=description></TEXTAREA><B>
        - Description</B><br>
        <INPUT TYPE="submit" NAME="submit" VALUE="Save Changes">
        <INPUT TYPE="submit" NAME="f_delete" VALUE="Delete this item">
      </FORM>
    </P>
    <HR SIZE="1" WIDTH="250" ALIGN="LEFT">
<! /SEARCH>
  </BODY>
</HTML>
As always, when using the form script, you will want a file to format the data so it is entered correctly into your data file. Ours is called news.format.data and is located in the root www folder. It is a single line with a carriage return at the end and looks like this:

<! field=x_uniqueno>   <! field=x_date>   <! field=title>   <! field=description>
That's all there is to it. Be sure to replace the spaces with tabs if you decide to cut and paste the data file and the format file from this example page and replace yourdomain.com with your actual domain name.

Now that you're an expert, you can get creative with such enhancements as adding pictures to your news, allowing administrators to use html code to enhance the look of the news, translating search script calls to html so your news can show up on the first page of your site or even using iframes to display clickable news titles on one part of a page and individual article content on another part of the same page.
ICG Link, Inc. 7003 Chadwick Drive, Suite 111, Brentwood, TN 37027