Schongar P.VBScript unleashed.1997
.pdf<BODY BGCOLOR="FFFFFF">
<font size=2>
<h1>These are the folks in the database:</h1>
<h2>Click the Details button for more details:</h2>
<CENTER><TABLE border=1>
<tr>
<%begindetail%>
<TD>
Name: <b><%FirstName%> <%LastName%></b><br>
Company: <b><%Company%></b><br></TD>
<TD>
<OBJECT ID="cmdDetails<%ReqID%>" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Details">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
<SCRIPT LANGUAGE="VBScript">
<!--
sub cmdDetails<%ReqID%>_click
Dim lTemp
lTemp = "Address: " & "<%Address%>" & Chr(13)
lTemp = lTemp & "City/State/Zip: " & "<%City%>, <%State%> <%Postal% >" & chr(13)
lTemp = lTemp & "Phone: " & "<%Phone%>" & chr(13)
lTemp = lTemp & "EMail: " & "<%EMail%>" & chr(13)
MsgBox lTemp, 0, "<%FirstName%> <%LastName%>"
end sub
--></SCRIPT>
</TD></tr>
<%enddetail%>
</table></CENTER></font>
</body></HTML>
The beginning of this file looks like standard HTML. If you look closely, however, you'll see some hybrid HTML tags such as <%begindetail%>, <%FirstName%>, and <%enddetail%>. These are tags interpreted by the IDC when it is returning the output page to the user's Web browser. The <%begindetail%> and <%enddetail%> tags delineate the beginning and end of a section of the file where results from the SQL query will be placed. The HTML that appears between these two tags is repeated for each record returned by the SQL SELECT statement. Tags such as <% FirstName%> and <%LastName%> are the field names returned by the SQL SELECT statement contained in the IDC script. (Refer to Listing 5.3.)
All the details are displayed using an HTML table with two columns. The first column displays the name and company returned from the query. This is done by using these lines:
<TD>
Name: <b><%FirstName%> <%LastName%></b><br>
Company: <b><%Company%></b><br></TD>
The second column is where you start to see some VBScript creep onto the scene. First, you see the insertion of an ActiveX command button:
<OBJECT ID="cmdDetails<%ReqID%>" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
Notice the ID property; it includes one of the fields returned in the IDC script (ReqID). Because VBScript does not allow for control arrays, the template must generate a unique name for each ActiveX control to be placed in the output page. Because the ReqID field is the unique primary key in the table, it's an appropriate field to use. The IDC replaces the text <%ReqID%> with the field's value each time a record is output using the template.
After the object's definition comes some VBScript code for its Click event. Notice again that <%ReqID%> appears in the control's name. The event procedure uses more of the fields from the query to create a string. This string then is
displayed using the MsgBox statement.
Finally, you come to the end of the table's row and the <%enddetail%> tag. Then the closing HTML tags appear, and the </HTML> tag ends the template.
Viewing the Results
This template produces a very compact listing of the records returned from the database. If more detail about a particular record is needed, the user can click the Details button to display the message box containing those additional details.
To view the results, enter the URL to the IDC script file into Internet Explorer's address box and press Enter. After the IDC churns a minute or so (depending on the size of the database being accessed), the results page appears. Figure 5.4 shows the results for a sample database on my Web server. Figure 5.5 shows the message displayed for Dilbert Bates after I click his Details button.
Figure 5.4 : The page resulting from the IDC script.
Figure 5.5 : The message box created using VBScript.
Listing 5.5 shows the HTML generated by the IDC. You can compare this listing with Listing 5.4 to determine that the IDC has indeed properly embedded the SQL query results into the template file and the VBScript code. Listing 5.5 is included on the CD-ROM as view.htm.
Listing 5.5. The HTML source for the IDC-generated page.
<html>
<title>Example Database Connection</title>
<BODY BGCOLOR="FFFFFF">
<font size=2>
<h1>These are the folks in the database:</h1>
<h2>(Click the Details button for more details)</h2>
<CENTER><TABLE border=1>
<TR><TD>
Name: <b>Jim Smith</b><br>
Company: <b>Smith and Sons Publishing</b><br>
</TD><TD>
<SCRIPT LANGUAGE="VBScript">
<!--
sub cmdDetails825961365_click
Dim lTemp
lTemp = "Address: " & "123 Book Way" & Chr(13)
lTemp = lTemp & "City/State/Zip: " & "New York, NY 10001" & chr(13)
lTemp = lTemp & "Phone: " & "212-555-1212" & chr(13)
lTemp = lTemp & "EMail: " & "" & chr(13)
MsgBox lTemp, 0, "Jim Smith"
end sub
--></SCRIPT>
<OBJECT ID="cmdDetails825961365" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Details">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</TD></tr>
<tr><TD>
Name: <b>Carlos Espinoza</b><br>
Company: <b></b><br>
</TD><TD>
<SCRIPT LANGUAGE="VBScript">
<!--
sub cmdDetails826028414_click
Dim lTemp
lTemp = "Address: " & "Route 102 Box 12" & Chr(13)
lTemp = lTemp & "City/State/Zip: " & "Panama City, Panama" & chr(13)
lTemp = lTemp & "Phone: " & "" & chr(13)
lTemp = lTemp & "EMail: " & "esp@panama.net" & chr(13)
MsgBox lTemp, 0, "Carlos Espinoza"
end sub
--></SCRIPT>
<OBJECT ID="cmdDetails826028414" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Details">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</TD></tr>
<TR><TD>
Name: <b>Dilbert Bates</b><br>
Company: <b>Bates Shower Repair</b><br>
</TD><TD>
<SCRIPT LANGUAGE="VBScript">
<!--
sub cmdDetails825961369_click
Dim lTemp
lTemp = "Address: " & "123 Hotel Drive" & Chr(13)
lTemp = lTemp & "City/State/Zip: " & "New York, NY 10001" & chr(13)
lTemp = lTemp & "Phone: " & "212-555-1234" & chr(13)
lTemp = lTemp & "EMail: " & "bates@shower.com" & chr(13)
MsgBox lTemp, 0, "Dilbert Bates"
end sub
--></SCRIPT>
<OBJECT ID="cmdDetails825961369" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Details">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</TD></tr>
</table></CENTER></font>
</body></HTML>
Review
This chapter discussed several ways to combine VBScript and HTML. Although the examples weren't earth-shattering, they did demonstrate the basics needed to fully integrate VBScript with your Web pages, your server-side applications, and your existing databases you want to publish on your Web site.
Part II of this book, "Objects in VBScript," examines embedding ActiveX controls and other objects into your Web
pages and VBScript code. You'll begin by looking at document objects in Chapter 6 "The Scripting Model."
Chapter 13
Dynamic Web Page Building
by Craig Eddy
CONTENTS
●Using the Internet Explorer Document Object
Properties and Collections
Methods
●Using the ActiveX Timer Control
●Writing the Current Date and Time to the Page
●Creating a Random Frame Using Client-Side Refresh
●Changing the Document's Colors
●Using Cookies to Maintain User Information
●Review
Perhaps the most exciting aspect of the World Wide Web is the amount of interactivity that can be provided. The advent of JavaScript and VBScript has furthered the cause of interactive Web sites. Using VBScript, it is possible to create a dynamic Web page without having to resort to server-side programming.
You create a dynamic Web page by taking a static HTML file and embedding VBScript code within it. The VBScript code provides the dynamic aspect by changing what is displayed on the page as well as how it is displayed. Your pages can be dynamic on a continuous basis (changing over time while the page is being viewed), or they can be dynamic at load time (the page that loads changes when it's loaded, but then is static). Once you have a grasp of what objects and functions are available to your scripts, you easily can design scripts that display dynamic information and change the page's presentation.
This chapter covers the basics of creating a dynamic Web page using VBScript. The first section covers the Internet Explorer's Document object, which contains properties and methods relative to the currently loaded Web page. Then the ActiveX Timer control is discussed. You can use this control to display messages, change the status bar text, or change the look of the page on a continuous basis. The chapter concludes with several sections describing specific ways to use VBScript to make your Web pages dynamic.
Using the Internet Explorer Document Object
The Internet Explorer exposes an entire hierarchy of objects to the scripts it is hosting. This hierarchy, or object model, provides your scripts with access to information about everything from the browser window itself (via the Window object) all the way down to an individual HTML form element (via the Forms collection of the Document object).
Because the topic of this chapter is dynamic Web pages, the Document object is the only object discussed here. This is not meant to imply that the other objects in the model aren't accessible or useful to VBScript, but they aren't necessary to create dynamic pages.
The Document object provides access to the HTML source code that exists on the page. Using the Document object, you can both read and write the HTML for the page. You also can control the document's color elements as well as access and modify the value of any HTML form elements contained within the document.
This section discusses the Document object's properties, collections, and methods in enough detail to use them in the examples presented throughout the rest of the chapter. You can find documentation on the Internet Explorer object model at http://www.microsoft.com/intdev/sdk/docs/scriptom/.
Properties and Collections
The Document object's properties and collections provide access to various HTML attributes for the Internet Explorer's currently loaded page. These attributes include the various color elements, the available HTML forms, a collection of links, a collection of anchors, and access to the client-side cookie file for the current page. Cookies are a means of storing information on the client's machine that can be retrieved later by the Web server when the client requests the page again.
The Color Properties
The current version of the HTML specification enables the Web page designer to specify the colors to be used to render certain elements on the page. You can control the text color used for links, the default foreground color (for text that is not a link), and the document's background color. Table 13.1 lists these properties.
Table 13.1. The Document object's color properties.
Property |
Specifies |
alinkColor |
Color for an active link |
bgColor |
Color for the page background |
fgColor |
Color for text and other foreground items |
linkColor |
Color for a link |
vlinkColor |
Color for a visited link |
NOTE
When the user holds down the mouse button over a link, that link is considered active. The link's color then changes to the color specified by the alinkColor property. Internet Explorer does not have this feature, however, so the link's color always remains the color specified by linkColor (or the default link color if linkColor is not specified).
The link color properties can be set only while the page is loading. The bgColor and fgColor properties can be set when the page loads as well as after the page has loaded. This capability enables you to create an on-the-fly color scheme for users. If they don't like the default colors you've chosen for the page, they can click a button, for example, to set a new color scheme. Or you can provide a drop-down list of available color schemes from which the user can choose. These are discussed in the section "Changing the Document's Colors," later in this chapter.
The Location Property
This property returns a string representation of the document's URL.
WARNING
The Microsoft Web site's Internet Explorer scripting object model documentation defines this property as a reference to a Location object. Internet Explorer, however, does not recognize this property as such, but simply as a string representing the URL for the document.
The LastModified Property
This property returns the date and time the document was last modified.
The Title Property
The document's title is returned by this property. This is the string specified between the HTML document's
<TITLE>...</TITLE> tags.
The Referrer Property
This property provides the URL for the page the user was on when he clicked a link that brought him to the current page. If the user is on a page with URL http://www.myserver.com/page1.htm, for example, and he clicks a link that takes him to http://www.myserver.com/page2.htm, the Referrer property on the second page evaluates to http://www.myserver.com/page1.htm.
If the user opened the page by clicking a link in another page, the Referrer property returns NULL.
The Cookie Property
The term cookie refers to a piece of data stored on the user's machine. The data is relative to a certain Web page and is sent to Web servers that house the page the cookie belongs to when the page is requested by the browser. Cookies enable Web site designers to store user preferences and other information on the client's machine instead of on the Web server somewhere. You can store a cookie for the date and time the user last viewed a particular page, for example. When the user returns to the page, your VBScript code can access this cookie information and provide a message like Welcome back, it's been 10 days since your last visit.
Cookies are defined as a name and value associated with that name. Reading the Cookie property returns a string of all the names and values for the current page. This string separates each cookie name/value pair with a semicolon. To set a new cookie pair or modify an existing cookie's value, simply assign the pair to the Cookie property, as shown in this example:
Document.Cookie = strCookieName & "=" & strCookieValue
Here, strCookieName is a variable containing the name for the cookie and strCookieValue contains the value for the cookie. These variables can be replaced with hard-coded strings, of course.
Cookies also have an expires attribute that specifies the date after which the cookie no longer is valid. If an expires attribute is not specified, the cookie should expire at the end of the current browser session (that is, when the user exits the browser application). The expires attribute should be appended to the string assigned to the Cookie