PHP Tutorial- Part 3
Project Guestbook

Richard H. Nilsson, July 10, 2003
(Updated for PHP 5, Feburary, 2006)

Display the guestbook

In Part 1, we created a database and built a table in it called "Messages". In Part 2, we constructed an interactive form for making entries in the guestbook, and now we will build a page to display the guestbook, a few entries at a time, sorted most-recent-first. At the bottom of the page, we'll show a "Prev" "Next" and a collection of page numbers in between, so visitors can "browse" the guestbook.

When we load the guestbook page, the first thing we want to do is always ensure it is up to date - that is, if someone has just made an entry, we want that person's entry to immediatley pop into the screen, else she's likely to go back and make another entry, thinking hers didn't actually make it into the guestbook. The way we do that is to start the page with some special information for the browser that causes it not to cache the page, but always get a fresh copy from the server:

<?php
   HEADER("Expires: time()");
   HEADER("Pragma: no-cache");
   HEADER("cache-control: no-cache, no-store, must-revalidate");
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Guestbook</title>

Look and feel...

Here is an in-line stylesheet. For more on using CSS page design, see the CSS articles at A List Apart or this Introduction to CSS Layout. You can, of course save this out to a ".css" file and import it if you wish. The styles of all the guestbook pages are close enough to use a single external stylesheet:

<style type="text/css">
/* <![CDATA[ */
body,p,td,li {
	font-family: arial,helvetica,sans-serif;
	font-size:12px; color:#000;
	background:#eee;
	}
p {
	margin:.5em .5em;
	}
h1 {
	font:36px/1.2 arial, helvetica,sans-serif;
	color:#000;
	}
.auth {
	font:10px/1.2 arial, helvetica,sans-serif;
	color:#000;
	}
.sctn1hd {
	font:18px/1.0 arial,helvetica,sans-serif;
	font-weight:700;
	padding:4px;
	background:#ccc;
	color:#333;
	}
#maincontent {
	width:75%;
	margin-left:auto;
	margin-right:auto;
	border-left:2px dashed #ccc;
	}
#add {
	position:relative;
	top:-1em;
	text-align:right;
	}
.edit {
	text-decoration:none;
	}
.run1 {
	font-weight:700;
	text-align:center;
	margin-top:2em;
	}
.run2 {
	font-weight:700;
	text-align:center;
	}
/* ]]> */
</style>

As with the form, we use CSS to position and set the margins for the "maincontent" DIV. There are also a few miscellaneous styles for various objects on the page.

I like to resize my guestbook so it is obvious it's a new window that can be closed, revealing the main page below. Here again is the in-line JavaScript to do that, which finishes out the HEAD of the page:

<script type="text/javascript" language="JavaScript"><!--
function resize()
{
  resizeTo(700, 600);
}
//-->
</script>
</head>

Beginning the display - the heading and database prep

Now comes the definition of the main content block, the heading for the page, and a link for calling up the entry form, if disired. There is also a book icon, which I show here . You can use it if you like, or design your own.

<body>

<div id="maincontent">
  <div class="sctn1hd">My Guestbook:</div>
  <div id="add">
  <a class="new" href="add_entry.php">
  <img src="images/add2bookIcon.gif" border="0"> Add an entry...</a>
  </div>

In preparation for retrieving some records to display, we have to once more log in to the database. You have to do this on each PHP page which has separate query code.

<?php
  $hostName = "localhost";
  $databaseName = "guestbook";
  $userName = "user";
  $passWord = "password";
  
  // function to show any errors//////////////////
  function showError()
  {
    echo("Error " . mysql_errno() . " : " . mysql_error());
  } // end error function

if (!($db = @ mysql_connect($hostName, $userName, $passWord)))
   showError("1");
if (!( @ mysql_select_db($databaseName,$db)))
   showError("2");

OK, we've opened the PHP code block with "<?php". We could lump all our functions together at the bottom of the page and put the error function there too, but I like to keep all the database-associated code together. Just personal preference. Adjust the userName and passWord to agree with your account settings.

Now we'll initialize some variables:

// initialize browse variables
$query = "SELECT * FROM Messages ORDER BY Date DESC, Time DESC";
define(ROWS, 10);
$scriptName = '$_SERVER["PHP_SELF"]';
if (empty($offset))
{
  $offset = 0;
}

To get information back out of our database we build a simple query statement. The "*" means "gimmee all the fields". Since we haven't been choosy, we get all the fields of all the records. Then we instruct MySQL to arrange (sort) them in ORDER of DESCending Date (newest first), and within each date, sort by DESCending Time (also newest first). The next line defines a global variable "ROWS", and sets it equal to 10. That will show 10 messages on each page; if you'd like to show more or less, adjust that number. This page will be reloaded repeatedly and we pass the page URI in the variable $scriptName by setting it to the HTTP global $_SERVER["PHP_SELF"]. We will be selecting a new group of 10 messages from the Messages table each time, using a variable called "$offset" to determine how far to offset into the sorted stack of retrieved records. For instance, to start with the 21st message, we reload the page with "http://guestbook.php?offset=20" (the first record is record 1). The "?" is http query notation for passing variables to code on a page. When we come back into this page the PHP variable "$offset" equals "20".

Now all we have to do is call the "browse function" with our accumulated variables to determine where to get the data, which ones to display, and what page to display with:

browse($scriptName, $db, $query, $offset);

Here is the browse function - :

// browse function /////////////////////////
function browse($scriptName, $db, $query, $rowOffset)
{
  if (!($result = @ mysql_query ($query, $db)))
    showError("3");
  // see if there are any entries in the db
  $rowsFound = @ mysql_num_rows($result);
  // find any?
  if ($rowsFound != 0)
  {
    // yes, there is see if there are any in
    // the range we desire
    $previousOffset = $rowOffset - ROWS;
    $nextOffset = $rowOffset + ROWS;
    if (!mysql_data_seek($result, $rowOffset))
      showerror();
      
    // yes, fetch one page of results - number of
    // entries specified by ROWS
    for ($rowCounter = 0; 
         (($rowCounter < ROWS) && 
         ($myrow = @ mysql_fetch_array($result)) );
         $rowCounter++)
    {
      // print a row of data-
      // put your row formatting in this function:
      
      print_row($myrow);
        
    } // end of all rows
    // show the row numbers being viewed
    echo "<p class=\"run1\">" . ($rowOffset + 1) . "-" .
        ($rowCounter + $rowOffset) . " of ";
    echo "$rowsFound entries found.\n</p>\n";
     
    // more than one page?
    if ($rowsFound > ROWS) 
    {
      // are there any previous pages?
      if ($rowOffset > 0)
      {
        // yes, create a prev link
        echo "<p class=\"run2\"><a href=\"". $scriptName .
             "?offset=" . rawurlencode($previousOffset) .
             "\"><Prev</a> ";
      } else {
         // no, disable the link
         echo "<p class=\"run2\"><Prev ";
      } // end if previous pages

      // direct page links
      for($x=0, $page=1; $x<$rowsFound; $x+=ROWS, $page++)
        // is this the current page?
        if ($x < $rowOffset ||
            $x > ($rowOffset + ROWS - 1))
        {
           // no, print a link
           echo "<a href=\"" . $scriptName .
                "?offset=" . rawurlencode($x) .
                "\">" . $page . "</a> ";
         } else {
           // yes, don't link
           echo $page . " ";
         } // end if page numbers
     
       // any Next pages?
       if (($myrow != false) && ($rowsFound > $nextOffset))
       {
         // yes, create a next link
         echo "\n\t<a href=\"". $scriptName .
              "?offset=" . rawurlencode($nextOffset) .
              "\">Next> </a> </p>\n";
       } else {
         // no, disable the link
         echo "Next> </p>\n";
       } // end if Next pages
     } // end if more than one page
  } // end if data
  else {
    echo "<br /> No messages found.\n";
  }
} // end browse function

Wow! That's a mouthful. Basically what all that does is generate one page of listings starting at [$offset] number of records into the database (we don't retrieve ALL of the records each time, that would be slow!) and collecting [ROWS] number of entries. We print them, then begin to generate a list of links to other offsets that will "window" into the database and display the rest of the entries, a page at a time.

About a third of the way down that listing, notice the function call the "print_row()". Here's the code for that function:

// print row function /////////////////////////
function print_row($myrow)
{
  printf("<p>%s %s </p>", $myrow["Date"], $myrow["Time"]);
  printf("<p><strong>\"%s\"</strong></p>\n", $myrow["Comments"]);
  printf("<div align=\"right\"> <a class=\"edit\" 
href=\"mgmt/edit_entry.php?entryid=%s&edit=yes\">--</a>%s %s,", 
$myrow["Entryid"], $myrow["Fname"], $myrow["Lname"]);
  if ($myrow["City"] || $myrow["State"])
  {
    printf(" %s %s", $myrow["City"], $myrow["State"]);
  }
  if ($myrow["Country"])
  {
    printf(" %s", $myrow["Country"]);
  }
  if ($myrow["URL"])
  {
    printf(" Home page: <a href=\"%s\">%s</a>", $myrow["URL"], $myrow["URL"]);
  }
  echo "</div>\n";
  echo "<br>\n";
} // end print row function
?>

We use "printf" (print formatted) statements to display the particular retrieved fields for the current entry record. The third line generates a link to our "edit_entry.php" page, for editing unsavory entries. Notice how we can use double quotes in the print strings if we "escape" them with backslashes ("\"). I leave it to you to figure how the remaining lines work from inspecting them and refering to the PHP Function Reference. This ends the PHP code, so all that's left is to close out the HTML:

  <p> </p>
  <div id="add">
  <a class="new" href="add_entry.php">
  <img src="images/add2bookIcon.gif" border="0"> Add an entry...</a>
  </div>

</div>
<br />
<!--provide a close button-->
<p style="width:15%;margin:auto;border:1px solid #ccc;" align="center">
<a class="run2" href="javascript:window.close();">CLOSE<a/></p>

<p> </p>

</body>
</html>

Next - edit the guestbook: go to Page 4 >>.

<< Page 1 Page 2 Page 3 Page 4 >>

PHP Tutorial- Part 3Project Guestbook

Display the guestbook

Look and feel...

Beginning the display - the heading and database prep

PHP Tutorial- Part 3
Project Guestbook