Forward Logic Design - Web Development Zone

Navigation

Forward Logic Web Design
Web Development Zone
Contact Me

Recent Additions

Javascript Formatted Date - 12/20/2006
Javascript Tips - 11/22/2006
CSS Content Builder - 11/22/2006
Guestbook Tutorial - 11/20/2006

Guestbook Tutorial

DIGG IT

I recently made a guestbook for a client my company was working with. Since the project was rather easy, and used some typically advanced Javascript and Ajax functionality, I chose to create a template for it and universalize it for everyone. The following tutorial will explain how to implement the guestbook:

1) The Guestbook I have written has the following specifications:

- Anyone can post a message any number of times
- 3 fundamental fields per message are displayed: Message Body, Name, and Time
- The form to add a message is toggled between visible and hidden
- The look and feel of how the guestbook is displayed is easy to customize

Here are the basic requirements:

- Server needs to be running PHP, and Database is MySQL

2) There are four files that need to be linked. Please download each of them.

guestbook.js - The javascript file which does all the work
XHConn.js - An open source library file which makes the AJAX calls easier
functions_guestbook.php - The script file which interacts with the database and returns valid information (rename to functions_guestbook.php)
guestbook.css - The style sheet which should be customized

3) The MySQL database should be set up like this:

CREATE TABLE `guestbook` ( `id` int( 10 ) NOT NULL AUTO_INCREMENT , `author` varchar( 30 ) NOT NULL , `message` text NOT NULL , `time` datetime NOT NULL , `comment` text NOT NULL , PRIMARY KEY ( `id` ) ) ENGINE = MYISAM AUTO_INCREMENT =1;

4) In the file that is going to implement the guestbook, please add the following code in the <head> tag:

Then in the <body> tag, here is the code for the guestbook. (Please note you can customize it however you would like later on.)

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#FFFFFF"> <div style="padding:10px;"> <table width="600" height="20" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #C1C1C1;"> <tr valign="top"> <td width="35" height="25" background="img/bg/guestbook_header_grey.gif"><img src="img/bg/guestbook_header_grey_img.gif" width="35" height="25"> </td> <td background="img/bg/guestbook_header_grey.gif"> <div class="guestbook_header"> <table width="100%" border="0" cellspacing="0" cellpadding="3"> <tr> <td width="22%"> <div align="left"><span class="guestbook_header_text"> <a href="#" onClick="showPost(this, 1);" id="postLink">Post Message</a> </span> </div></td> <td width="78%"><span class="guestbook_header_text"> <span id="pageInfo"></span></span></td> </tr> </table> </div> </td> </tr> </table> <div id="postMessage"> <form action="" method="get" enctype="multipart/form-data" style="margin:0px;"> <table width="600" border="0" cellspacing="5" cellpadding="0" class="forms_table"> <tr> <td width="103" valign="top"><div align="right">Message:</div></td> <td width="503"><textarea name="message" cols="50" rows="4" id="message" class="forms_textfield"></textarea></td> </tr> <tr> <td valign="top"><div align="right">Name:</div></td> <td><input name="author" type="text" id="author" class="forms_textfield"> </td> </tr> <tr> <td valign="top"><div align="right"></div></td> <td><input type="button" name="Button" value="Post" onClick="verify_new();" class="forms_button"> <input name="page" type="hidden" id="page" value="<?php if ($_GET['page'] == '') echo 1; else echo $_GET['page']; ?>"></td> </tr> </table> </form> </div> <div id="currentEntries"></div> </div> </td> </tr> </table>

And finally, you need to need the following to your <body> tag:

This is it! If you want to customize the look of the guestbook, the guestbook.css file is where it can be done. Other than that, if you have any questions for me, please email me at sfannan@gmail.com

Click here for an example

DIGG IT