The body section contains all of the page's formatted text information and the controls that make up the user input form. You use HTML tags to create all the content, both static and interactive, that is displayed in the browser.
You define the body section using the <BODY></BODY> tags. The <BODY>
</BODY> tags have several attributes that allow you to customize the look and feel of the page. You will use the BACKGROUND attribute to add a background image to the page. A background image, backgnd2.gif, is available on the companion CD, in the project2 folder. Any image can be used as a background. If the image is not large enough to cover the background area, the Internet Explorer will automatically tile the image to cover the area. Start the body section by adding the following code after the head section:
<BODY BACKGROUND="backgnd2.gif"> This web page will use two different forms to contain controls. The first form, frmEvent, will be used to access an ActiveX Label control that displays advertisements to the user while he or she is registering for an event. The second form, frmRegister, will be used to contain the information that will be sent to your datasource. Add the first form to your HTML page by using the following code:
<FORM NAME="frmEvent"> You format the Event form in a table by using the <TABLE></TABLE> tags. HTML tables allow sophisticated formatting of the content of a web page. You can space text, images, and controls with precision and create web pages that would otherwise not be possible. Add the following code to start the table:
<TABLE WIDTH=550 CELLPADDING=5 BORDER=0> In the table, you specify table rows by using the <TR></TR> tags, and table cells by using the <TD></TD> or <TH></TH> tags. You can place text, images, or controls in cells. In the first cell of the table, you will place an ActiveX Label control that will be used as a marker for the page. This label will appear at the far left side of the page and will display the page name, Event Registration. Add the label to the page by using the following code:
<TR>
<TD ROWSPAN=14>
<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID="lblFree"
HEIGHT=300
WIDTH=90
>
<PARAM NAME="Angle" VALUE="90">
<PARAM NAME="ForeColor" VALUE="#FF0000">
<PARAM NAME="Caption" VALUE="Event Registration">
<PARAM NAME="FontName" VALUE="Arial Black">
<PARAM NAME="FontSize" VALUE="22">
<PARAM NAME="Visible" VALUE="True">
</OBJECT>
</TD> Notice that the <OBJECT></OBJECT> tags are used to load the ActiveX Label control. The <PARAM> tag is used to change several of the properties for the label. Note that the Angle property value was changed to 90 so that the text runs vertically from bottom to top on the page. This gives an appealing look to the page.
While the user is entering information into the form, you can display some advertising messages. You will use another Label control to display the various messages, which will be changed by a Timer control periodically. Add the following code to your page to place the Label control into the table:
<TD ALIGN="CENTER" COLSPAN=10>
<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID="lblBanner"
HEIGHT=40
WIDTH=400
>
<PARAM NAME="ForeColor" VALUE="#0000FF">
<PARAM NAME="Caption" VALUE="Register Here!">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="20">
<PARAM NAME="FontBold" VALUE="True">
<PARAM NAME="Visible" VALUE="True">
</OBJECT>
</TD>
</TR> Now that you have a form to contain the labels, you will build a second form within the first one to contain the information entered by the user. Once again, the <FORM></FORM> tags are used. This time you make use of the ACTION attribute, which directs the information from the form to the back-end process. The ACTION attribute contains the URL of the process that is to receive the information. In this case, you are using OLEISAPI as the back-end process. Add the following code to place the second form inside the first form:
<TR>
<TD COLSPAN=6>
<FORM NAME="frmRegister" METHOD="POST" ACTION=
"/Scripts/oleisapi.dll/eventreg.Person.Register"> Take special note of how the ACTION attribute is implemented. The ACTION attribute invokes oleisapi.dll through the /Scripts folder. /Scripts is an alias set up in IIS as a pointer to the path c:\inetsrv\scripts. This alias is valuable because it hides the true path to your files. Hackers who want to damage a site could otherwise gain valuable information about the site's folder structure by examining the HTML code through the browser. Folder aliases help hide that information. Also, the /Scripts folder must be designated as an Execute folder (or directory) in IIS. Execute folders can contain executable content instead of just read-only content.
Consider the parts of the ACTION attribute. /Scripts defines the location of the oleisap.dll, eventreg is the name of the in-process ActiveX component, Person is the name of a public class in eventreg.dll, and Register is the name of a method in the Person class. You will create the in-process ActiveX component, eventreg.dll, later in this chapter, in the section titled "Creating the In-Process ActiveX Component." For more information on the oleisapi.dll or IIS, see Chapter 5.
The input form is also formatted as a table to maintain a consistent interface for the user. Each control is labeled with text and formatted. The first controls are Radio controls, implemented with the <INPUT> tag. These controls are used to determine whether the registrant wants first-, second-, or third-class tickets. Add these Radio controls to your page with the following code:
<TABLE WIDTH=400 BORDER=0>
<B><FONT SIZE=2>
<TR>
<TD COLSPAN=1>
Tickets
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="RADIO" VALUE="First"
NAME="optTicket" CHECKED OnClick="Tickets(50)">
First-Class $50
<P><P>
</TD>
<TD NOWRAP COLSPAN=1>
<P><P>
<INPUT TYPE="RADIO" VALUE="Second"
NAME="optTicket" OnClick="Tickets(20)">
Second-Class $20
</TD>
<TD NOWRAP COLSPAN=1>
<P><P>
<INPUT TYPE="RADIO" VALUE="Third"
NAME="optTicket" OnClick="Tickets(10)">
Third-Class $10
</TD>
</TR> Note that each of the Radio controls has the same NAME attribute but a different VALUE attribute. Because they have the same name, the controls behave as mutually exclusive options. Therefore, only one Radio control can be selected at a time. The value assigned to the selected item will be passed to the back-end process when the form is submitted.
Offering options that are not mutually exclusive is the job of the Checkbox control. In this step, you will implement a set of three checkboxes that allow the user to purchase additional items. In this example, you offer a hat, a mug, and a shirt. If the user selects one or more of these, you will add the cost to the final bill. Add the Checkbox controls to your page with the following code:
<TR>
<TD COLSPAN=1>
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="CHECKBOX" NAME="chkHat"
VALUE="Yes" OnClick="Calculate">
Hat $10
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="CHECKBOX" NAME="chkMug"
VALUE="Yes" OnClick="Calculate">
Mug $5
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="CHECKBOX" NAME="chkShirt"
VALUE="Yes" OnClick="Calculate">
Shirt $20
</TD>
</TR> The user enters data into the form by using Text controls. These controls are also implemented with the <INPUT> tag. For each piece of information, you provide a text box with some text next to it as a label. Add the Text controls with the following code:
<TR>
<TD COLSPAN=1>
Name
</TD>
<TD COLSPAN=3>
<INPUT TYPE="TEXT" NAME="txtName" SIZE=72>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Company
</TD>
<TD COLSPAN=3>
<INPUT TYPE="TEXT" NAME="txtCompany" SIZE=72>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Address
</TD>
<TD COLSPAN=3>
<INPUT TYPE="TEXT" NAME="txtAddress" SIZE=72>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
City
</TD>
<TD COLSPAN=1>
<INPUT TYPE="TEXT" NAME="txtCity" SIZE=20>
</TD>
<TD COLSPAN=1 ALIGN="RIGHT">
State
<INPUT TYPE="TEXT" NAME="txtState" SIZE=2
MAXLENGTH=2>
</TD>
<TD COLSPAN=1 ALIGN="RIGHT">
Zip
<INPUT TYPE="TEXT" NAME="txtZip" SIZE=9
MAXLENGTH=9>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Email
</TD>
<TD COLSPAN=11>
<INPUT TYPE="TEXT" NAME="txtEmail" SIZE=47>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
</TD>
<TD NOWRAP COLSPAN=1>
<INPUT TYPE="RADIO" VALUE="Visa"
NAME="optCardType" CHECKED>
VISA
<P><P>
</TD>
<TD NOWRAP COLSPAN=1>
<P><P>
<INPUT TYPE="RADIO" VALUE="MC" NAME="optCardType">
MasterCard
</TD>
<TD COLSPAN=1>
</TD>
</TR>
<TR>
<TD COLSPAN=1>
Card #
</TD>
<TD COLSPAN=1>
<INPUT TYPE="TEXT" NAME="txtCardNumber" SIZE=20>
</TD>
<TD COLSPAN=1>
Exp Date
<INPUT TYPE="TEXT" NAME="txtCardExpDate" SIZE=4>
</TD>
<TD COLSPAN=1 ALIGN="CENTER">
TOTAL
</TD>
</TR> Another Label control gives the user a way to keep track of his or her total expenditures. This Label control is updated every time the user selects a different ticket or product. The program also provides a Reset button that clears all of the text entry fields and a Submit button that packages all of the data and sends it to the back-end process. Add these controls with the following code:
<TR>
<TD COLSPAN=3>
</TD>
<TD ALIGN="CENTER">
<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
ID="lblTotal"
HEIGHT=20
WIDTH=100
>
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="Caption" VALUE="$50.00">
<PARAM NAME="BackStyle" VALUE="0">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="20">
<PARAM NAME="FontBold" VALUE="True">
<PARAM NAME="Visible" VALUE="True">
</OBJECT>
<INPUT TYPE="HIDDEN" NAME="txtTotal" VALUE="50">
</TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN="CENTER">
<INPUT TYPE="SUBMIT" VALUE="Register Now!">
<INPUT TYPE="RESET">
</TD>
</TR>
</FONT></B>
</TABLE>
</FORM>
</TD>
</TR>
</TABLE> The last part of the HTML code inserts a Timer control into the form. The Timer control is used to periodically change the advertising messages displayed to the user. As is true of any other control, this control is inserted with the <OBJECT></OBJECT> tags. Notice that you set the delay to 5000. This means that a Timer event will fire every 5 seconds. Use the following code to add the Timer control and complete the body section of your web page:
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrEvent"
>
<PARAM NAME="Interval" VALUE="5000">
<PARAM NAME="Enable" VALUE="True">
</OBJECT>
</FORM>
</BODY>
</HTML>