In this project you will create several pages for the web site. The pages include a home page that introduces the bookstore, a query results page that lets the user examine book titles, and an order page that lets the user purchase a book. Each of these pages is enhanced with graphics and ActiveX controls to make the user's experience dynamic.
The home page introduces the bookstore and calls attention to selected titles. The code for this page uses several techniques to make the page interesting. Timer controls are utilized throughout the page to implement dynamic help systems and changing text displays. The goal of this home page is to grab the attention of the customer.
Begin the home page by starting a new document in a text editor such as Notepad. This document will be saved in the \wwwroot\project3 folder you set up earlier for this project. The name of this page will be bookstor.htm. Add the following code to build the head section:
<HTML>
<HEAD>
<TITLE>The Web Pages Bookstore</TITLE>
</HEAD> Remember that the script section will be placed inside the head section. You will add a script section later in the project.
In the <BODY> tag of the home page, the OnLoad attribute is used to specify a Microsoft Visual Basic, Scripting Edition, routine that will run when this page is first loaded. The variables and ActiveX controls used on this page are initialized in this routine. Later in the exercise, you will construct this Page_Initialize routine. For now, simply add the reference and some graphics to the page by adding the following code:
<BODY BGCOLOR="WHITE" OnLoad="Page_Initialize">
<CENTER>
<BASEFONT FACE="ARIAL">
<IMG SRC="banner.gif" ALT="Web Pages Bookstore"
WIDTH=575 HEIGHT=130>
<P>
<BR>
This web page uses a table to arrange the information in a pleasant display. You will divide the web page into two sections: a search section and a "hot list" section. The search section will allow searches by subject, title, or author. The hot list section will showcase books that deserve special attention. Begin the table, and add the graphics for each of these areas by adding the following code:
<TABLE WIDTH=600>
<TR>
<TD>
<IMG SRC="search.gif" ALT="Search"
WIDTH=132 HEIGHT=34>
</TD>
<TD ALIGN="CENTER">
<IMG SRC="hotlist.gif" ALT="Hot List"
WIDTH=153 HEIGHT=48>
</TD>
</TR> In the code for the search section, you will define three different text boxes that can accept input for searches. Each of these text boxes can submit data to IDC. The boxes represent the three different types of searches supported by the site: search by subject, by title, or by author. Each box calls a different idc file to run its query. You will create the idc files later in this project. For now, simply add the text boxes by adding the following code:
<TR>
<TD>
<FORM ACTION="/scripts/project3/subject.idc"
METHOD="POST" NAME="frmSubject">
Subject<BR>
<INPUT TYPE="TEXT" NAME="txtSubject">
<INPUT TYPE="SUBMIT" VALUE="GO!">
</FORM>
<P>
<FORM ACTION="/scripts/project3/title.idc"
METHOD="POST" NAME="frmTitle">
Title<BR>
<INPUT TYPE="TEXT" NAME="txtTitle">
<INPUT TYPE="SUBMIT" VALUE="GO!">
</FORM>
<P>
<FORM ACTION="/scripts/project3/author.idc"
METHOD="POST" NAME="frmAuthor">
Author<BR>
<INPUT TYPE="TEXT" NAME="txtAuthor">
<INPUT TYPE="SUBMIT" VALUE="GO!">
</FORM>
</TD> The hot list section highlights a book for immediate purchase. You will implement the hot list by displaying some text about a particular book and offering a jump to let the user purchase the book. Use the following code to implement the hot list:
<TD ALIGN="CENTER">
<IMG SRC="spike_re.gif" ALT="Picture">
<FONT FACE="ARIAL" SIZE=3>
<A HREF="/scripts/project3/title.idc?txtTitle=
Inside+Microsoft+Visual+Basic, +Scripting+Edition">
Inside Microsoft Visual Basic, Scripting Edition</A>
<P>Microsoft Press<P>
</FONT>
<FONT FACE="ARIAL" SIZE=2>
Get up to speed on Microsoft Visual Basic,<BR>
Scripting Edition, with this comprehensive book.<BR>
The book covers the VBScript language,<BR>
ActiveX controls, and the Microsoft Internet<BR>
Information Server.<BR>
A must-have for any Visual Basic for<BR>
Applications developer!!<BR>
Click for more information!
</FONT>
</TD>
</TR>
</TABLE>
</CENTER> This project uses three Timer controls to achieve some dynamic effects in the web page. The three timers are contained in a form called frmHelp. The first timer, tmrHelp, fires if there has been no user activity for 30 seconds and asks the user whether he or she needs help. The purpose of this timer is to offer some help with using the search engine if the user is idle for a relatively long period of time.
If the user asks for help after the first timer fires, a second timer, tmrDemo, is started. The second timer runs a demonstration program that places sample text in the text boxes for the various search engine selections. The demonstration also shows how to use wildcards in the input text boxes.
A third timer, tmrStatus, is used to generate commercial messages that appear on the status line of the browser. The messages are strings of text that appear one letter at a time, as if they were typed in by a teletype machine. This is an easy technique for adding some movement to your web page.
The three timers are placed in the web page with the <OBJECT>
</OBJECT> tags. The timers have only two significant properties: Interval and Enabled. These properties allow you to set the number of milliseconds between timer events and to turn the timers on and off. Add these Timer controls to the web page with the following code:
<FORM NAME="frmHelp">
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrHelp"
WIDTH=39
HEIGHT=10
>
<PARAM NAME="Interval" VALUE="30000">
<PARAM NAME="Enabled" VALUE="True">
</OBJECT>
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrDemo"
WIDTH=39
HEIGHT=10
>
<PARAM NAME="Interval" VALUE="1000">
<PARAM NAME="Enabled" VALUE="False">
</OBJECT>
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrStatus"
WIDTH=39
HEIGHT=10
>
<PARAM NAME="Interval" VALUE="200">
<PARAM NAME="Enabled" VALUE="False">
</OBJECT>
</FORM> The body section of the home page is completed with a marquee. The
<MARQUEE></MARQUEE> tags are special tags that display moving text. The <MARQUEE></MARQUEE> tags have several attributes that allow you to customize the moving text. For a description of the attributes available with these tags, see Appendix A.
Add the following code to insert a marquee on your home page and to complete the body section:
<FONT FACE="ARIAL" SIZE=4 COLOR="BLUE">
<MARQUEE>Check out our great Internet books!</MARQUEE>
</FONT>
</BODY>
</HTML> To complete the code that creates the dynamic behavior of the home page, you will add some VBScript code that will execute when the timers fire. Remember, the script section itself resides in the head section. All the VBScript code you write for this page will be placed inside one set of <SCRIPT></SCRIPT> tags.
You can use the OnLoad attribute of the <BODY></BODY> tags to specify a routine that will be executed when the page is first loaded. In a previous step, you created the <BODY></BODY> tags and specified the OnLoad attribute as OnLoad="Page_Initialize". When an OnLoad event occurs, the VBScript Page_Initialize routine gets called. You can use this routine to initialize variables and properties of ActiveX controls prior to displaying the web page. This functionality is similar to that of the Form_Load event found in Visual Basic.
In the home page code, you will specify several script-level variables that can be accessed by any routine. These variables are used to track the number of iterations of the various timer events. You can use these variables to create some animation effects. The variables are defined outside of all of the procedures but are located within the <SCRIPT></SCRIPT> tags. You will use the Page_Initialize routine to initialize these variables as well as to set properties for the page's ActiveX controls. Add the following code to initialize your web page:
<SCRIPT LANGUAGE="VBScript">
<!--
Dim intLoop
Dim intTextLoop
Dim TempMsg1, TempMsg2, TempMsg3
Sub Page_Initialize
Dim MyForm
Set MyForm=Document.frmHelp
MyForm.tmrStatus.Enabled=True
intLoop=0
intTextLoop=0
End Sub In this routine, you have enabled the tmrStatus timer and initialized the counting integers to 0. The tmrStatus timer is used to type the commercial messages into the status bar of the browser. This routine turns it on when the page loads, which starts the animation immediately.
The home page contains a form that lets the user search the Bookstore database by subject, title, or author. The form accepts wildcards to allow broader searches, but some users might not be familiar with the use of wildcards. If the user does not interact with the web page for 30 seconds, the page will display a prompt to see whether he or she needs help. The Timer control tmrHelp waits 30 seconds and then displays a message box. If the user answers "Yes," requesting help, another timer, tmrDemo, is turned on to start the help demonstration. You will code the help demonstration in the next step.
The code for tmrHelp is set to disable the timer after it fires once. You turn off the timer so that it does not cause the message box to display more than one time. If the user refuses help the first time, the page will not prompt him or her again. Add the following code to display the help message box after 30 seconds of inactivity:
Sub tmrHelp_Timer
Dim intAnswer
Dim MyForm
Set MyForm=Document.frmHelp
MyForm.tmrhelp.Enabled=False
TempMsg1="You have been idle for a while. Do you "
TempMsg2="need some help?"
intAnswer=MsgBox(TempMsg1 & TempMsg2, 36, "Web Pages")
If intAnswer=7 Then
Exit Sub
Else
MyForm.tmrDemo.Enabled=True
End if
End Sub If the user answers "Yes" to the help message, the tmrDemo timer is enabled. This timer animates a help demonstration that displays a series of messages and also displays sample query requests in the subject, title, and author text boxes. The animation is driven by the timer and the script-level variable intLoop, which tracks the number of times the Timer event has occurred. Each time the timer fires, a new step in the animation program is run. Add the following code to place the help demonstration into the web page:
Sub tmrDemo_Timer
intLoop=intLoop+1
Dim MyForm
Set MyForm=Document.frmHelp
Select Case intLoop
Case 1
MyForm.tmrDemo.Enabled=False
TempMsg1="You can type directly into the Subject, "
TempMsg2="Author, or Title boxes."
Msgbox TempMsg1 & TempMsg2, 0, "Web Pages"
MyForm.tmrDemo.Enabled=True
Case 2
Document.frmSubject.txtSubject.Value="Computers"
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value=""
Case 3
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value= _
"Inside Microsoft Visual Basic, Scripting Edition"
Document.frmAuthor.txtAuthor.Value=""
Case 4
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value="Hillier"
Case 5
MyForm.tmrDemo.Enabled=False
TempMsg1="The following wildcards are allowed: "
TempMsg2="% - Any String, _ - Any Character, [ ] - "
TempMsg3="Any Range, [^] - Not Any Range"
MsgBox TempMsg1 & TempMsg2 & TempMsg3, 0, "Web Pages"
MyForm.tmrDemo.Enabled=True
Case 6
Document.frmSubject.txtSubject.Value="Comp%"
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value=""
Case 7
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value="%Microsoft%"
Document.frmAuthor.txtAuthor.Value=""
Case 8
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value="Hill%"
Case Else
MyForm.tmrDemo.Enabled=False
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value=""
End Select
End Sub Your web page provides additional animation by displaying commercial messages in the status bar of the browser. Your code writes text to the status bar with the Window object. The Window object is an object that can be accessed from VBScript directly. The StatusText property allows you to write directly to the status bar.
Figure 8-4.
The lower portion of the Web Pages Bookstore home page.
<HTML>
<HEAD>
<TITLE>The Web Pages Bookstore</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
Dim intLoop
Dim intTextLoop
Dim TempMsg1, TempMsg2, TempMsg3
Sub Page_Initialize
'Author: New Technology Solutions, Inc.
'Purpose: Initialize variables
'6/11/96 Original
Dim MyForm
Set MyForm=Document.frmHelp
MyForm.tmrStatus.Enabled=True
intLoop=0
intTextLoop=0
End Sub
Sub tmrHelp_Timer
'Author: New Technology Solutions, Inc.
'Purpose: Offer help to the user
'if he or she is idle for 30 seconds
'6/11/96 Original
Dim intAnswer
Dim MyForm
Set MyForm=Document.frmHelp
'Turn off the timer. The help message
'box should appear only once.
MyForm.tmrhelp.Enabled=False
TempMsg1="You have been idle for a while. Do you "
TempMsg2="need some help?"
intAnswer=MsgBox(TempMsg1 & TempMsg2, 36, "Web Pages")
If intAnswer=7 Then 'No selected
Exit Sub
Else 'Yes selected
'Turn on the demo timer to
'show animation
MyForm.tmrDemo.Enabled=True
End if
End Sub
Sub tmrDemo_Timer
'Author: New Technology Solutions, Inc.
'Purpose: Run a search demo for the user
'who needs help
'6/11/96 Original
intLoop=intLoop+1
Dim MyForm
Set MyForm=Document.frmHelp
'This code animates the search text
'boxes, showing sample entries
'while the user watches
Select Case intLoop
Case 1
MyForm.tmrDemo.Enabled=False
TempMsg1="You can type directly into the Subject, "
TempMsg2="Author, or Title boxes."
Msgbox TempMsg1 & TempMsg2, 0, "Web Pages"
MyForm.tmrDemo.Enabled=True
Case 2
Document.frmSubject.txtSubject.Value="Computers"
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value=""
Case 3
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value= _
"Inside Microsoft Visual Basic, Scripting Edition"
Document.frmAuthor.txtAuthor.Value=""
Case 4
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value="Hillier"
Case 5
MyForm.tmrDemo.Enabled=False
TempMsg1="The following wildcards are allowed: "
TempMsg2="% - Any String, _ - Any Character, [ ] - "
TempMsg3="Any Range, [^] - Not Any Range"
MsgBox TempMsg1 & TempMsg2 & TempMsg3, 0, "Web Pages"
MyForm.tmrDemo.Enabled=True
Case 6
Document.frmSubject.txtSubject.Value="Comp%"
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value=""
Case 7
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value="%Microsoft%"
Document.frmAuthor.txtAuthor.Value=""
Case 8
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value="Hill%"
Case Else
MyForm.tmrDemo.Enabled=False
Document.frmSubject.txtSubject.Value=""
Document.frmTitle.txtTitle.Value=""
Document.frmAuthor.txtAuthor.Value=""
End Select
End Sub
Sub tmrStatus_Timer
'Author: New Technology Solutions, Inc.
'Purpose: Run commercials on the status
'bar while this page is visible
'6/13/96 Original
Dim MyForm
Set MyForm=Document.frmHelp
Dim Msg1
Dim Msg2
Msg1="Check out our specials on Visual Basic books!"
TempMsg1="For quality training, call New Technology "
TempMsg2="Solutions, Inc., at 203-239-6874!"
Msg2=TempMsg1 & TempMsg2
'This code displays messages in the status bar.
'A new letter is added once every 200 milliseconds,
'imitating the action of a teletype machine.
intTextLoop=intTextLoop + 1
If intTextLoop > 0 And intTextLoop < Len(Msg1)+1 Then
Window.Status=Left(Msg1,intTextLoop)
End If
If intTextLoop > Len(Msg1) + 25 And _
intTextLoop < Len(Msg1) + Len(Msg2) + 26 Then
Window.Status=Left(Msg2,intTextLoop-Len(Msg1)-25)
End If
If intTextLoop > Len(Msg1) + Len(Msg2) + 50 Then
intTextLoop=0
End If
End Sub
-->
</SCRIPT>
</HEAD>
<!--
Note the OnLoad attribute, which specifies the procedure
to be run when the page is first loaded
-->
<BODY BGCOLOR="WHITE" OnLoad="Page_Initialize">
<CENTER>
<BASEFONT FACE="ARIAL">
<IMG SRC="banner.gif" ALT="Web Pages Bookstore"
WIDTH=575 HEIGHT=130>
<P>
<BR>
<TABLE WIDTH=600>
<TR>
<TD>
<IMG SRC="search.gif" ALT="Search"
WIDTH=132 HEIGHT=34>
</TD>
<TD ALIGN="CENTER">
<IMG SRC="hotlist.gif" ALT="Hot List"
WIDTH=153 HEIGHT=48>
</TD>
</TR>
<TR>
<!--
In this row, three forms are defined for performing
the three different queries. Each query calls the
Internet Database Connector.
-->
<TD>
<FORM ACTION="/scripts/project3/subject.idc"
METHOD="POST" NAME="frmSubject">
Subject<BR>
<INPUT TYPE="TEXT" NAME="txtSubject">
<INPUT TYPE="SUBMIT" VALUE="GO!">
</FORM>
<P>
<FORM ACTION="/scripts/project3/title.idc"
METHOD="POST" NAME="frmTitle">
Title<BR>
<INPUT TYPE="TEXT" NAME="txtTitle">
<INPUT TYPE="SUBMIT" VALUE="GO!">
</FORM>
<P>
<FORM ACTION="/scripts/project3/author.idc"
METHOD="POST" NAME="frmAuthor">
Author<BR>
<INPUT TYPE="TEXT" NAME="txtAuthor">
<INPUT TYPE="SUBMIT" VALUE="GO!">
</FORM>
</TD>
<TD ALIGN="CENTER">
<IMG SRC="spike_re.gif" ALT="Picture">
<FONT FACE="ARIAL" SIZE=3>
<A HREF="/scripts/project3/title.idc?txtTitle=
Inside+Microsoft+Visual+Basic,+Scripting+Edition">
Inside Microsoft Visual Basic, Scripting Edition</A>
<P>Microsoft Press<P>
</FONT>
<FONT FACE="ARIAL" SIZE=2>
Get up to speed on Microsoft Visual Basic,<BR>
Scripting Edition, with this comprehensive book.<BR>
The book covers the VBScript language,<BR>
ActiveX controls, and the Microsoft Internet<BR>
Information Server.<BR>
A must-have for any Visual Basic for<BR>
Applications developer!!<BR>
Click for more information!
</FONT>
</TD>
</TR>
</TABLE>
</CENTER>
<FORM NAME="frmHelp">
<!--
This timer control will ask the user if he or she
needs help when he or she has been idle for 30
seconds. It is programmed in VBScript to ask
only one time, so as not to be annoying!
-->
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrHelp"
WIDTH=39
HEIGHT=10
>
<PARAM NAME="Interval" VALUE="30000">
<PARAM NAME="Enabled" VALUE="True">
</OBJECT>
<!--
This timer is used to animate the help demonstration
when the user asks for help
-->
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrDemo"
WIDTH=39
HEIGHT=10
>
<PARAM NAME="Interval" VALUE="1000">
<PARAM NAME="Enabled" VALUE="False">
</OBJECT>
<!--
This timer is used to send messages about products and
services to the user through the status bar
-->
<OBJECT
CLASSID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
ID="tmrStatus"
WIDTH=39
HEIGHT=10
>
<PARAM NAME="Interval" VALUE="200">
<PARAM NAME="Enabled" VALUE="False">
</OBJECT>
</FORM>
<FONT FACE="ARIAL" SIZE=4 COLOR="BLUE">
<MARQUEE>Check out our great Internet books!</MARQUEE>
</FONT>
</BODY>
</HTML> Listing 8-1.
The home page HTML code in the bookstor.htm file.