Building the Web Site s Main Page

In this chapter, William begins work on creating the Order/Inventory Reporting Web site by creating the site's main or default page. The page will use an HTML frameset composed of two frames in order to display a menu of links on the left-hand side of the browser window and the content of the selected link in the right-hand frame. William will also embed a VBScript in the HTML page in order to add a series of graphic effects to the Web site. This script will perform such tasks as turning menu links into rollover links, retrieving configuration settings from client-side cache, and managing the content that is loaded into the right frame.

Working with Frames

The Order/Inventory Reporting Web site's main page is called Default.html. The HTML statements that make up this page are shown below. The page is divided into two frames. The first frame is called left_frame. It will automatically load an HTML page called Links.html. The second frame is called right_frame and will automatically load an HTML page called Welcome.html.

Script 28.1 - Define a Frameset for the main web site page

The frames are created using the HTML and tags. The tags replace the

tags that are normally used to define an HTML page. The first frame is set up to be 175 pixels wide, and the rest of the available space is left for the frame on the right.

Building the Links html Page

The Links.html page, which is automatically loaded into the left_frame frame of the Default.html page, provides a list of links to other pages on the Order/Inventory Reporting Web site. It is made up of HTML statements and a number of VBScript subroutines. The subroutines provide the Links.html page with the following features:

• The setting of the page's background color
• The creation of link rollover effects
• The posting of messages on the Internet Explorer status bar
• The loading of linked HTML pages into the right_frame frame

HTML for the Links html Page

The HTML required to create the Links.html page is shown below. As you can see, it consists of a small collection of HTML tags. The key tags to focus on are the three link tags defined at the bottom of the HTML page. They define three links, named DailyRpt, Archive, and Config, and display text messages representing each link. Also note that the opening tag sets the color of the text that will represent each link to blue.

Script 28.2 - This page provides links to subordinate HTML pages

Resource Links:

<a name="DailyRpt"> Consolidated Summary Report for Today</a>

<a name="Archive"> Consolidated Summary Report Archive</a>

<a name="Config"> Personal Configuration Settings and Registration</a>

Adding VBScript to the HTML Page

Once the HTML page is defined, you can enhance it by embedding its VBScript. To embed a VBScript, you will need to add the following statements inside either the header or body section of the HTML page. The statements identify the beginning and ending of a VBScript.

As you will see, the VBScript that is added to this HTML page will consist of a collection of subroutines. Each of these subroutines provides a distinct feature to the HTML page.

Setting the Default Background Color

The first subroutine embedded in the Links.html page is called SetBackgroundColor(). It executes when the Links.html page is loaded. This is accomplished by modifying the opening

tag, as shown below.

This statement uses the browser's onLoad event to trigger the execution of the subroutine, which is shown below.

Sub SetBackgroundColor()
 If document.cookie <> "" Then
 astrCookieArray = Split(document.cookie,",")
 strColorScheme = astrCookieArray(2)
 document.bgColor = strColorScheme
 Else
 document.bgcolor = "yellow"
 End If
End Sub

The subroutine begins by checking the document object's cookie property to see if the visitor's computer has a cookie belonging to the Order/Inventory Web site. If the value assigned to document.cookie is not blank, then the VBScript Split() function is used to parse out the contents of the cookie into an array called astrCookieArray.

Note

The document object is exposed by the Internet Explorer browser object models. To learn more about the document object and its methods and properties, or any of the other browser-based objects, methods, and properties covered in this chapter, read Chapter 8, "VBScript and Internet Explorer."

The cookie created by the Order/Inventory Reporting Web site consists of three parts: storing the visitor's name, preferred default page, and preferred color scheme. Each of these pieces is loaded into the astrCookieArray array. The value stored in astrCookieArray(2) represents the visitor's preferred color scheme. The value stored in astrCookieArray(2) is then assigned to the document object's bgcolor property, thus changing the background color of the Links.html page. However, if a cookie from the Order/Inventory Reporting Web site is not found on the visitor's computer, the page's default background color of yellow is used.

Note

In Chapter 29, "Building the Registration and Configuration Settings Page," you will see that the Config.html page collects visitor configuration settings and stores them in client-side cache using a cookie.

Creating Link Rollover Effects

Next William modifies the HTML page by adding six new subroutines to the page's VBScript. These subroutines are shown below. As you can see, they are grouped into pairs. The first pair of subroutines creates the rollover effect for the DailyRpt link. The remaining pairs of subroutines manage the rollover effect for the Links.html page's other two links.

Sub DailyRpt_onMouseOver
 DailyRpt.style.color="red"
End Sub
Sub DailyRpt_onMouseOut
 DailyRpt.style.color="blue"
End Sub

Sub Archive_onMouseOver
 Archive.style.color="red"
End Sub
Sub Archive_onMouseOut
 Archive.style.color="blue"
End Sub

Sub Config_onMouseOver
 Config.style.color="red"
End Sub
Sub Config_onMouseOut
 Config.style.color="blue"
End Sub

The first subroutine in each pair is named by attaching the name of the link with which the subroutine is associated to the browser event that will trigger the subroutine executed. In this case, the first subroutine in each pair is the onMouseOver event. Whenever the visitor moves the pointer over the link associated with the subroutine, the subroutine changes the color of the text that represents the link to red.

The second subroutine in each pair changes the color of the link back to its initial blue color when the visitor moves the pointer off of its associated link. The result of the animation added by these six subroutines is that the links on the Links.html page dynamically change color to help the visitor identify the currently selected link.

Posting Messages on the Internet Explorer Status Bar

Once William has the rollover effects for the links working correctly, he modifies the subroutines that control them by adding logic that posts and clears messages on the Internet Explorer status bar whenever visitors move the pointer over one of the Links.html page's links. This trick is accomplished by modifying the window object's status property. For example, the following pair of subroutines shows how William modified the subroutines that respond to the onMouseOver and onMouseOut events for the DailyRpt link.

Sub DailyRpt_onMouseOver
 DailyRpt.style.color="red"
 window.status = "View today's consolidated summary report"
End Sub
Sub DailyRpt_onMouseOut
 DailyRpt.style.color="blue"
 window.status = ""
End Sub

As you can see, descriptive text is displayed when the onMouseOver event is triggered for the DailyRpt link. In similar fashion, the value of window.status is set equal to blank when the link's onMouseOut event is triggered.

Using VBScript to Control Frame Content

William's final task in creating the Links.html page is to create a collection of three subroutines that control the loading of other HTML pages in the right_frame frame of the Default.html page when visitors click on one of the Links.html page's links.

The first of these subroutines is called DailyRpt_onClick(). It executes when the visitor moves the pointer over the DailyRpt link and clicks on it. This subroutine uses a variable named strFileNameString to store the name of the current day's version of the consolidated summary report. Before writing the subroutine, William adds the following statement to define this variable at the beginning of the VBScript:

Dim strFileNameString

Next he creates the DailyRpt_onClick() subroutine, as shown below. The logic for this subroutine was borrowed from previous WSH-executed VBScripts and should look familiar by now. First William uses the Date() function to collect the current system date, and then he uses the Replace() function to replace all occurrences of the backslash (/) character with the dash (–) character. The string ConsolRpt.html is then appended to the end of strFileNameString. Finally, the subroutine loads the current day's HTML version of the summary report into the right_frame frame by assigning the value of the strFileNameString variable to top.right_frame.location. In the context of this HTML page, top is used to reference the parent frameset defined in Default.HTML, and right_frame identifies the frame where the HTML version of the consolidated summary report is to be loaded, as specified by the frame object's location property.

Sub DailyRpt_onClick
 strFileNameString = Replace(Date(), "/", "-")
 strFileNameString = strFileNameString & "_ConsolRpt.html"
 top.right_frame.location = "..Rpts" & strFileNameString
End Sub

Note

Note the use of ..Rpts to specify the location of the Rpts folder. When translated, .. tells the script that the location of the Rpts folder can be found by backing up to the parent folder of the current folder (from D:IntuitOrderInventoryReportingHTML to D:IntuitOrderInventoryReporting) and then looking for the Rpts folder (D:IntuitOrderInventoryReportingRpts).

The next two subroutines are much more straightforward than the previous subroutine. The Archive_onClick() subroutine, shown below, uses the location property to load the archive.html page, which contains a list of links to the HTML report archive on the corporate Web server.

Sub Archive_onClick
 top.right_frame.location="..RptsArchive.html"
End Sub

Likewise, the Config_onClick() subroutine, shown below, loads the Config.html page, allowing visitors to specify their personal configuration preferences.

Sub Config_onClick
 top.right_frame.location="Config.html"
End Sub

Figure 28.1 shows how the Links.html page looks if loaded directly into the browser (when not loaded by Default.html).

Figure 28.1: The Links.html page provides access to the other pages on the Order/Inventory Reporting Web site

The Fully Assembled Links html Page

The fully assembled Links.html page is shown below. When loaded into the left_frame frame of the Default.html page, it provides a menu of links that allow the visitor to navigate the Order/Inventory Reporting Web site.

Script 28.2 - This page provides links to subordinate HTML pages

Resource Links:

<a name="DailyRpt"> Consolidated Summary Report for Today</a>

<a name="Archive"> Consolidated Summary Report Archive</a>

<a name="Config"> Personal Configuration Settings and Registration</a>

Building the Welcome html Page

The Welcome.html page is displayed by default in the right_frame frame on the Default.html page. However, each visitor has the option of configuring a different default page if they wish. This page provides basic information about the Order/Inventory Reporting Web site. In addition, it contains an embedded VBScript that provides a great deal of behind-the-scenes functionality, including:

• Detection of the type and version of browser being used to visit the Web site
• Redirection for visitors with browsers that are not Internet Explorer 5.0 or above
• Retrieval of configuration settings from client-side cache (from cookies)
• Redirection for first-time visitors to the Registration and Configuration Settings page

HTML for the Welcome html Page

The HTML for the Welcome.html page is shown below. It uses standard HTML tags to organize and display informational content about the Web site.

Script 28.1 - Order/Inventory Main Welcome Page

---

• The consolidated summary report is available for online viewing every day at 06:00 am.
• You may also review a 3-month collection of archived consolidated summary reports.
• Microsoft Word copies of the consolidated summary reports are also available for download.
• If you need to review a consolidated summary report that is not available at this site, please contact Computer Operations and request that they provide you with a hard copy.

---

 Command Center Helpdesk: Ext. 3737
 Order/Inventory Hotline: Ext: 4000
 Other questions or concerns: Ext: 3230
 

Figure 28.2 shows how the Welcome.html page looks when loaded directly into Internet Explorer.

Figure 28.2: The Welcome.html page greets visitors by name and provides information about the content available at the Order/Inventory Reporting Web site

Redirection for Unsupported Browsers

Years ago, Intuit made Internet Explorer the company's standard browser. The IT staff at Intuit has done its best to ensure that all users at the company have upgraded their browsers to Internet Explorer 6.0. However, every so often somebody seems to pop up using an older version of Explorer.

William is developing the Order/Inventory Reporting Web site based on the assumption that all users will be using Internet Explorer version 5.0 or higher. However, to guard against the possibility that one or more employees at Intuit may still be using an older version of Internet Explorer, William has added a subroutine called BrowserCheck() to the Welcome.html page. This subroutine automatically redirects older browsers to an HTML page called Browser.html, where a message is displayed that advises visitors to upgrade to Internet Explorer 6.0 before accessing the Order/Inventory Reporting Web site.

The first step in setting up the BrowserCheck() subroutine is to define the following VBScript in the HTML page's BODY section. This script will then automatically execute the BrowserCheck() subroutine when the Welcome.html page is loaded.

The next step is to define a second VBScript loaded in the HTML page's header section and to add the following subroutine to the script:

Note

The VBScript embedded in the Welcome.html page could also have been embedded in the page's body section. However, by defining it in the header section, you are able to ensure that all procedures are loaded and available before they are referenced by statements or events located in the body section.

Sub BrowserCheck()

 browserName = navigator.appName

 If browserName = "Microsoft Internet Explorer" Then

 'Use the navigator appVersion property to collect information about
 'the visitor's Internet browser

 browserVersion = navigator.appVersion

 'The Instr() function searches a string for a specified set of characters
 findString = Instr(1, browserVersion, "MSIE")
 findString = findString + 5
 versionNumber = Mid(browserVersion, findString, 1)

 If versionNumber < 5 Then
 window.location = "Browser.html"
 End If
 Else
 window.location = "Browser.html"
 End If

End Sub

The BrowserCheck() subroutine begins by collecting the name of the browser being used to access the page by assigning the value of navigator.appName to a variable called browserName. Next an If statement is used to determine whether the browserName is equal to Microsoft Internet Explorer. If it is not, then the right_frame frame of the Default.html page is redirected to the Browser.html page using the windows object's location property. If the visitor is using an Internet Explorer browser the subroutine next checks to see what version is being used by assigning the value of navigator.appVersion to a variable called browserVersion. For example, the string assigned to browserVersion would look like 4.0 (compatible; MSIE 6.0; Windows NT 5.1; Q312461) if the visitor was using an Internet Explorer version 6.0 browser.

Next the VBScript Instr() function is used to determine the location of the string MSIE within browserVersion. Once the starting character position of this string is ascertained, a value of 5 is added to it in order to calculate the position of the browser version number within the string. Next the MID() function is used to parse out the major version number in use. Then an If statement is used to determine whether the major version number is less than 5 (that is, Internet Explorer version 5.x). If it is less than 5, the right_frame frame of the Default.html page is redirected to add the Browser.html. Otherwise, no redirection action is taken.

Figure 28.3 shows how the Order/Inventory Reporting Web site will look when accessed by a visitor with an Internet Explorer 5.0 or higher browser.

Figure 28.3: By default, all visitors to the Order/Inventory Reporting Web site will see the Links.html and Welcome.html pages

Retrieving a VBScript Cookie

The last task to perform in creating the Welcome.html page is to add logic that extracts visitor preferences from a cookie stored on their computers. This cookie is built and stored on the visitors' computers when they visit the site's Registration and Configuration Settings page. If a cookie for the Order/Inventory Reporting Web site is found on the visitor's computer, its contents are retrieved and parsed out. Otherwise, the right_frame frame on the Default.html page is redirected to the Registration and Configuration Settings page so that the visitor can choose configuration settings.

This process will be implemented as a subroutine called Cookie_Check(). The first step in setting up this process is to modify the VBScript located in the page's body section by inserting a call to the Cookie_Check() subroutine, as shown below.

Once this is done, you can add the code for the Cookie_Check() subroutine to the VBScript defined in the Welcome.html page's header section.

Dim strFileNameString
Function Cookie_Check()

 If document.cookie <> "" Then
 astrCookieArray = Split(document.cookie,",")
 strUserName = Mid(astrCookieArray(0), 8)
 strDefaultView = astrCookieArray(1)
 strColorScheme = astrCookieArray(2)

 If strDefaultView = "Archive" Then
 window.location = "Archive.html"
 End If
 If strDefaultView = "Welcome" Then
 document.write("

Order/Inventory Reporting Site

") document.write("Welcome " & strUserName & ",

") End If If strDefaultView = "Daily" Then strFileNameString = Replace(Date(), "/", "-") strConSolRptName = strConsolFolder & "" & strFileNameString & _ "_ConsolSumRpt.txt" strFileNameString = strFileNameString & "_ConsolRpt.html" window.location = strFileNameString End If Else window.location = "Config.html" End If End Function

To determine whether the visitor's computer has a cookie belonging to the Order/Inventory Reporting Web site, the subroutine begins by examining the value of the document object's cookie property. If it is blank, then the right_frame frame of the Default.html page is automatically redirected to the Config.html page. If the cookie is not blank, then the VBScript Split() function is used to assign the cookie contents to an array called astrCookieArray.

The first seven characters of the cookie specify its name and the equal sign. To extract the visitor's name from the cookie, the Mid() function assigns all the characters beginning at character position 8 of the first array element to a variable called strUserName. Next the visitor's preferred default page is extracted by assigning the value of astrCookieArray(1) to strDefaultView. Then the visitor's preferred color scheme is extracted and assigned to strColorScheme.

A series of three If statements then executes. The first If statement checks to see whether strDefaultView is equal to Archive. If it is, then the right_frame frame on the Default.html page is redirected to ..ReportsArchive.html. From the visitor's point of view, it will look as if the Archive.html page was automatically loaded (the Welcome.html page is not displayed).

The second If statement checks to see whether strDefaultView is equal to Welcome. If it is, then a header message is written to the top of the Welcome.html page followed by a message that greets the user by name using the value stored in the strUserName variable. Once this is done, the rest of the content to be displayed on the Welcome.html page will be written as specified within its HTML tags.

Finally, the last If statement checks to see whether strDefaultView is equal to Daily. If it is, then the Config.html page is automatically loaded into the right_frame frame of the Default.html page.

The Fully Assembled Welcome html Page

The fully assembled Welcome.html page is shown on the following page. When loaded into the right_frame frame of the Default.html page, the Welcome.html page greets the visitor by name and displays information about the Order/Inventory Reporting Web site. However, if this is the first time that the visitor has come to the Web site, the VBScript embedded in the Welcome.html page will redirect the visitor to the Config.html page. Finally, if the visitor is not using the correct version of Internet Explorer when accessing the Web site, a VBScript embedded within the Welcome.html page redirects the visitor to the Browser.html page, where the visitor is advised which version of Internet Explorer to use when viewing the content provided by the Web site.

Script 28.1 - Order/Inventory Main Welcome Page

---

• The consolidated summary report is available for online viewing every day at 06:00 am.
• You may also review a 3-month collection of archived consolidated summary reports.
• Microsoft Word copies of the consolidated summary reports are also available for download.
• If you need to review a consolidated summary report that is not available at this site, please contact Computer Operations and request that they provide you with a hard copy.

---

 Command Center Helpdesk: Ext. 3737
 Order/Inventory Hotline: Ext: 4000
 Other questions or concerns: Ext: 3230
 

Creating the Browser html Page

The HTML that comprises the browser.html page, shown on the following page, is straightforward. It consists only of HTML tags and does not contain any embedded VBScripts. Its sole purpose is to advise visitors who are not using Internet Explorer version 5 or above to return using the proper browser, preferably Internet Explorer 6.0.

This page is seen by visitors that are not using IE 5.0 or above

 

Sorry, but to access the Order/Inventory Reporting web site you must use Internet Explorer version 5 or higher

 

Please upgrade to Internet Explorer 6.0 or access this site from a different computer.

Figure 28.4 shows how the browser.html page is displayed when viewed by an earlier version of Internet Explorer.

Figure 28.4: The Browser.html page advises visitors to use Internet Explorer version 5.0 or higher

Summary

In this chapter, you observed as William began work on the Order/Inventory Reporting Web site. Specifically, he developed the site's Default.html page using a frameset composed of two frames to display a menu of links and the content of the currently selected link. In addition to the HTML required to create the HTML pages, William embedded a number of VBScripts in order to add graphical effects to the Web site. VBScripts were also used to retrieve visitor configuration settings and to manage the loading of HTML pages into the frames.