Form ... | Table ... | Server Side code ... |
Set up a guestbook form using the instructions on BTInternet's Webpage, but point the action to my ASP / PERL / PHP CGI script using one of:
<!-- select which server script you are going to use. use one of--> <form name="F1" action="http://pathToYourIISwebServer/guestbook.asp" method="POST" > <form name="F1" action="http://ccgi.dougrice.plus.com/gb/guestbook.php" method="POST" > <form name="F1" action="http://ccgi.dougrice.plus.com/demo/guestbook.php" method="POST" > <form name="F1" action="http://ccgi.dougrice.plus.com/cgi-bin/guestbook.pl" method="POST" >
Links to BTInternet: BT Internet.. BTown pages.. BT guest book..
My guestbook server script takes the values from the form and appends the values in the format below to the file gbookFFuncDemo.js.
Each guestbook entry is stored as a call to function gbF(), with the values of the parameters coming from the guestbook form.
// new amendement FuncDemo:: //HTTP_REFERER = http://127.0.0.1/priv/apsc/results/BasicForm.htm //HTTP_USER_AGENT= Mozilla/4.0 (compatible; MSIE 5.0; Windows 95; DigExt; nw2) gbF( "name","email", "postedOn", // in a format so that D = new Date( postedOn ); can be used "127.0.0.1", "userfield1", "userfield2", "userfield3", "userfield4", "comments" );
It is up to you to write the code for
gbF()
and it is here that you should add the styling and formatting.
The most basic form of gbF(), writes the form data as comma separated values inline to the web page, is:
function gbF( name,email,postedOn,IPaddress,userfield1,userfield2,userfield3,userfield4,comments){ <!-- You write the next bit --> self.document.write( name+","+email+","+ postedOn+","+ IPaddress+","+ userfield1+","+ userfield2+","+ userfield3+","+ userfield4+","+ comments +",<BR>" ) <!-- End of what You write. --> }
A more complicated format would be to wrap HTML table tags around the data
function gbF( name,email,postedOn,IPaddress,userfield1,userfield2,userfield3,userfield4,comments){ self.document.write( "<Tr>"+ "<TD >"+ name+ "</TD>"+ "<TD >"+ email+ "</TD>"+ "<TD >"+ postedOn+ "</TD>"+ "<TD >"+ IPaddress+ "</TD>"+ "<TD >"+ userfield1+ "</TD>"+ "<TD >"+ userfield2+ "</TD>"+ "<TD >"+ userfield3+ "</TD>"+ "<TD >"+ userfield4+ "</TD>"+ "<TD >"+ comments+ "</TD>"+ "</TR>"
To output that guestbook data paste the following into a file called table_demo.htm
<html> <body> <style> TD { bgcolor:#DDC866 } H2 { font-family: Verdana, Tahoma; font-size: 18pt; text-align: left; } TABLE, TD, TR, TH, CAPTION { font-family: Verdana, Tahoma; font-size: 10pt; text-align: left; color: #00007F; vertical-align: top; } P { font-family: Arial,Technical,serif text-indent: 1 ex; color: #004FFF } TABLE { border: medium groove; /* width: 650; */ padding-left: 0.1cm; padding-right: 0.1cm; padding-top: 0.1cm; padding-bottom: 0.1cm; border:5; cellpadding:5; cellspacing:5; } TD { width: 150; background-color:#DDC866; vertical-align: top; } </style> <script> function gbF( name,email,postedOn,IPaddress,userfield1,userfield2,userfield3,userfield4,comments){ self.document.write( "<Tr>"+ "<TD >"+ name+ "</TD>"+ "<TD >"+ email+ "</TD>"+ "<TD >"+ postedOn+ "</TD>"+ "<TD >"+ IPaddress+ "</TD>"+ "<TD >"+ userfield1+ "</TD>"+ "<TD >"+ userfield2+ "</TD>"+ "<TD >"+ userfield3+ "</TD>"+ "<TD >"+ userfield4+ "</TD>"+ "<TD >"+ comments+ "</TD>"+ "</TR>" ) } function gbF_team( name,email,postedOn,IPaddress,userfield1,userfield2,userfield3,userfield4,comments){ // This is required because the guestbook has some entries wrapped by gbF_team() functions } </script> <h4> One line of the table </h4> <table border=2 bordercolor="#0000FF" bordercolordark="#0000FF" bordercolorlight="#0000FF" > <script language="JavaScript" > gbF( "name","email","postedOn", "127.0.0.1", "userfield1", "userfield2", "userfield3", "userfield4", "comments" ); </script> </table> <h4> Now include the data from the guestbook </h4> <a name="1"> <a href="funcBasicForm.htm#1">form to add to this table</A>You may need to refresh this page to see new entries. <table border=2 bordercolor="#0000FF" bordercolordark="#0000FF" bordercolorlight="#0000FF" > <script language="JavaScript" src="http://ccgi.dougrice.plus.net.com/gb/gbookFFuncDemo.js" type="text/javascript"> </script> </table> </body> </html>
And this produces the formated table below:
The CGI script also recognises two form fields:
guestbook GuestBookArrayName
These control which guestbook is appended to, and the name of the function.
If GuestBookArrayName = "_team", then the name of the functions used in the guestbook is gbF_team(). so include the line below on your form:
<input type="hidden" name="GuestBookArrayName" value="_team">
Why?
Well, the functions can store the data in JavaScript arrays, instead of doing simple formating and the data can be sorted, using JavaScript's powerful sort function.
You can include multiple guestbooks, each of which can have multiple function names which store the data into multiple arrays of data stored in the guest book.
The guestbook name is selected using guestbook=FuncDemo
<form name="F1" action="HTTP://ccgi.dougrice.plus.com/cgi-bin/guestbook.pl?guestbook=FuncDemo" method="POST" > <input type="hidden" name="guestBookArrayName" value="_team"> ... rest of form fields as per BTInternet's guest book. </form>
An Array of objects is like a TABLE in a relational database.
There is a form for _team that appends the form data to wrapping the data into a gbF_team() function call.
So by making your gbF_team() function store the data into an array of objects using code like:
<script> var gbA = new Array() var count = 0 function GB( name,email,postedOn,IPaddress,userfield1,userfield2,userfield3,userfield4,comments){ this.name = name this.email = email this.postedOn = postedOn this.IPaddress = IPaddress this.userfield1 = userfield1 this.userfield2 = userfield2 this.userfield3 = userfield3 this.userfield4 = userfield4 this.comments = comments return this } function gbF_team( name,email,postedOn,IPaddress,userfield1,userfield2,userfield3,userfield4,comments){ gbA_team[ count_team ] = new GB( name,email,postedOn,IPaddress,userfield1,userfield2,userfield3,userfield4,comments) gbA_team[ count_team ].JSindex = count_team count_team = count_team + 1 } </script>
The data can be output using javascript:
<P>gbA_team has <script> self.document.write( gbA_team.length ) </script> entries:</P> <table border=3> <TR><TH>Index</TH><TH>Name<br>postedOn</TH><TH>Userfield1</TH><TH>Userfield2</TH></TR> <script> function sortFn( a,b ) { if ( a.userfield2 > b.userfield2 ) return -1 if ( a.userfield2 == b.userfield2 ) return 0 return 1 } gbA_team.sort( sortFn ) for ( var I =0 ; I < gbA_team.length ; I ++ ) { self.document.write( "<tr><td>Entry: "+I+"<br>Submitted Order:"+ gbA_team[ I ].JSindex+"</td><td>"+ gbA_team[ I ].name+" @ <br>"+ gbA_team[ I ].postedOn+"</td><td>"+ gbA_team[ I ].userfield1+"</td><td>"+ gbA_team[ I ].userfield2+ "</td></tr>" ) } </script> </table>
Outputs:
gbA_team has entries:
form to add to this tableYou may need to refresh this page to see new entries.Index | Name postedOn | Userfield1 | Userfield2 |
---|
We have the ability to append data to a guestbook, download it, and format it using JavaScript using the client's browser. You need to understand what the javascript does on this page, but you do not need much knowledge about CGI scripts or Webservers, or connecting to databases. You can get simple applications up and running fast.
The server script is generic, and only needs to be modified to match the directory structure of your service provider that supports CGI scripts.
You need to give write permission to your gbookFuncDemo.js file so that the CGI script can write to it.
Perl CGI script example... | Microsoft Active Server Page (ASP) example... | Microsoft Active X function to append to a local gbook file for testing...
This page was last updated on: