NetCloak Tutorial- Adding to Existing Pages / Guestbook Example

NetCloak Demo

In the previous tutorial you learned how to send mail from a form submission. The next step is to use forms to let users interact directly with your site by adding to an existing HTML page. We will build a simple guestbook where users can add their name, address and a short comment. The GuestBook example demonstrates the use of two important NetCloak Pro features. The INSERTFILE directive is used to update an existing HTML document, and the IF command is used to conditionally replace data from fields in the new HTML. It is also a good example of taking data from a user entry and rendering it as highly formatted HTML with IF commands to prevent the creation of broken or malformed links.

The GuestBook consists of three files- AddGuest.html, the HTML form where guests enter information; AddGuest.FDML, which processes the forms and adds the new HTML to the third file, GuestBook.html. The GuestBook.html file is the actual guest book.

The default GuestBook.html file, with no entries, is very simple: <HTML> <HEAD> <TITLE>Sample GuestBook</TITLE> </HEAD> <BODY> Here is a registry of the people who have visited my site... Why not <A HREF="AddGuest.html">add yourself</A>? <HR>  </DL> </BODY> </HTML>

The unique feature of the file is the "" comment tag near the end. This comment serves as a marker where NetCloak Pro will insert new HTML into the document.

The entry form in AddGuest.html looks fairly long here, but is otherwise straightforward. 1) <HTML> 2) <TITLE>Add Yourself To The GuestBook</TITLE> 3) <H1>Add Yourself To The GuestBook</H1> 4) <FORM method=POST action="/GuestBook/AddGuest.FDML"> 5) To be added to the GuestBook, just fill out this form... 6) <P> 7) <HR> 8) <H3>About You...</H3> 9) <DL> 10) <DD><B>Name:</B> 11) <INPUT TYPE="text" NAME="UserName" SIZE="32" MAXLENGTH="32"><P> 12) <DD><B>E-Mail:</B> 13) <INPUT TYPE="text" NAME="EMail" SIZE="32" MAXLENGTH="32"><P> 14) <DD><B>Title:</B> 15) <INPUT TYPE="text" NAME="Title" SIZE="32" MAXLENGTH="32"><P> 16) <DD><B>Organization:</B> 17) <INPUT TYPE="text" NAME="Company" SIZE="32" MAXLENGTH="80"><P> 18) <DD><B>Home Page URL:</B> 19) <INPUT TYPE="text" NAME="HomePageURL" SIZE="32" MAXLENGTH="80"><P> 20) </DL> 21) <HR> 22) <H3>About Your Web Site...</H3> 23) <DL> 24) <DD><B>Site Name:</B> 25) <INPUT TYPE="text" NAME="SiteName" SIZE="32" MAXLENGTH="40"><P> 26) <DD><B>Main URL:</B> 27) <INPUT TYPE="text" NAME="MainURL" SIZE="32" MAXLENGTH="32"><P> 28) <DD><B>Brief Description:</B><BR> 29) <INPUT TYPE="text" NAME="Desc1" SIZE="60" MAXLENGTH="60"><BR> 30) <INPUT TYPE="text" NAME="Desc2" SIZE="60" MAXLENGTH="60"> 31) </DL> 32) <P><HR><P> 33) <CENTER> 34) <INPUT TYPE=submit VALUE="Add Yourself"> 35) </CENTER> 36) <P> 37) </FORM> 38) </HTML>

The form defines a number of fields for the user's name, e-mail address, company name, personal URL, company URL, and other interesting information.

This comes together in the AddGuest.FDML where the raw information is put into formatted HTML. It is a relatively short file, but a lot happens in seventeen lines. 1) <RESPONSE>"/GuestBook/GuestBook.html"</RESPONSE> 2) <INSERTFILE "">"/GuestBook/GuestBook.html"</INSERTFILE> 3) <P> 4) <IF HomePageURL IS# "" THEN "<A HREF=""<REPLACE HomePageURL>"">"> 5) <B><REPLACE UserName></B> 6) <IF HomePageURL IS# "" THEN "</A>"> 7) <IF EMail IS# "" THEN "(<REPLACE EMail>)"> 8) - <REPLACE Title> 9) <IF Title IS# "" THEN ", "> 10) <REPLACE Company><P> 11) <DL> 12) <DD><IF MainURL IS# "" THEN "<A HREF=""<REPLACE MainURL>"">"> 13) <B><REPLACE SiteName></B> 14) <IF MainURL IS# "" THEN "</A>"> 15) <IF Desc1 IS# "" THEN " - <REPLACE Desc1> <REPLACE Desc2>"> 16) </DL> 17) <HR>

So, what's going to happen here after the user clicks the Submit button?

Line 1 - The RESPONSE directive is used in the other examples, but in this case note that the response file is the same GuestBook.html file that NetCloak Pro is updating!

Line 2 - The INSERTFILE directive contains the "" marker to indicate where NetCloak Pro should insert the new HTML. In between the two tags is the path and filename for the GuestBook.html file where the new HTML will be inserted.

Line 4 - This line conditionally creates a link to the user's home page. If the user did not enter a home page URL, the IF commands will prevent NetCloak Pro from creating a broken link.

Note that this requires two IF statements- one for the first part of the anchor tag, with "<A HREF=" and the URL of the user's home page, and another for the closing "</A>" from the anchor tag (on line 6).

The IF commands are easier to understand if you look at each part separately: <IF HomePageURL IS# ""

Each IF command uses the # character for "not equal to". This is a common technique to check for empty fields in the user's input, so the snippet above has the logic "If the field HomePageURL is not empty". The rest of the IF command inserts the URL into the HREF part of an anchor tag. THEN "<A HREF=""<REPLACE HomePageURL>"">">

The second part of the IF command actually has a REPLACE command inside it. By putting the REPLACE inside the IF command, the replacement may not be made depending on the IF command. This works because NetCloak Pro executes all of the IF commands first, then goes through and executes the REPLACE commands. You can also use this technique to create very complex forums by conditionally executing RESPONSE or CHAIN directives.

Line 7 - The next line uses a similar IF command sequence to insert the user's e-mail address only if they have entered something into the "EMail" field.

Line 9 - Only insert a comma between the title and company name if they have entered a title.

Line 11 - The <DL> tag will format the next few lines as a definition list so they will be nicely indented.

Line 12 - This line starts out with a <DD> tag to indent the HTML. Here is yet another IF command to create a link to the user's company Web site only if they have entered the URL for one.

Line 15 - This assumes that if the user didn't enter anything on the first description line, they probably didn't enter anything on the second either. If there is something on the first description line, it inserts both.

Lines 16-17 - These two close the definition list and then insert a horizontal rule to separate the new entry from the existing ones.

[ Move On To The Next Tutorial | Return To The NetCloak Introduction ]