<META NAME="DESCRIPTION" CONTENT="This is an Active Server Pages (ASP) tutorial where you can lean how to use ActiveX server components to extend your scripting capabilities. In this module, you will use ActiveX components that are included with ASP to activate a sample Web site and query a database."></head>
<h1><a name="module1">Module 2: Using ActiveX Components</a></h1>
<p><a href="iiselect.asp?LessonFile=<%= Server.URLEncode(LessonFile) %>"><strong>Choose a scripting language for this lesson.</strong></a> </p>
<p>ActiveX server <em>components</em> extend your scripting capabilities by providing a compact, reusable, and secure means of gaining access to information. For example, ASP's Database Access component enables scripts to query databases. Thus, whenever you want to query a database from a script, you can use the Database Access component; you need not write complex scripts to perform this task. You can call components from any script or programming language that supports Automation (ActiveX server components are Automation servers). In this module, you will use ActiveX components that are included with ASP to activate a sample Web site.</p>
<p>By now, you should be familiar with the basics of writing .asp files. If not, complete <a href="iiatmd1.asp">Module 1</a> of this tutorial.</p>
<li>To save and view your work in this module, you must enable Write and Script Web server permissions for the <%= VirtFilePath %> virtual directory on the <%= Request.ServerVariables("SERVER_NAME")%> Web server (with Active Server Pages installed).</li>
<li>Lesson 2 demonstrates a Dynamic HTML scriplet. This scriptlet displays a series of alternating ad images, dynamically transitioning between each image. To run the scriptlet and see its effects you will need use Internet Explorer version 4.0, or later. For more information about Internet Explorer, visit the Microsoft Web site at <a href="http://www.microsoft.com" target="_top" >http://www.microsoft.com</a>.
</ul>
<hr>
<h2><a name="H2_37665281"></a>Lesson 1: Using the Ad Rotator Component</h2>
<p>Internet Web sites often provide advertising space. To keep sites visually interesting and to display ads from several advertisers in limited space, you might want to cycle through different advertisements. The Ad Rotator component simplifies the task of displaying each ad in turn and makes it easier to add new ads. Additionally, you can easily add or changes an ad hyperlinks, that enable users to click an ad and visit the advertiser's Web site. In this lesson, you will create a script for that calls the Ad Rotator component to rotate through four randomly selected ads. Click the Show Me button below to see an example of an ad you are going to display, then click the button repeatedly to rotate through other <a name="usingtheadrotatorcomponent">ads</a>.<hr>
<h3><a name="createtheadfile">Create the Ad File</a></h3>
<p>We have created a Web page for a fictitious business, called Bayshore Travel, where you will insert the ad rotator script. You can also create a simple text file to tell the Ad Rotator component which ads to insert and for what percentage of time each ad should be displayed. We have already created a file containing ads for you. To view it, use your text editor to open the file Adrot.txt in the <%= Request.ServerVariables("SERVER_NAME")%> Web server's Tutorial directory (<%= FilePath %>). </p>
<p>The first line of the file sets the script that will be called when a user clicks on an advertisement; in this case, Redirect.asp. You can modify the Redirect.asp file to perform a specific action, such as tracking ad popularity, prior to linking the user to the advertiser's Web site. The following three lines establish the width, height, and border of the ad images.</p>
<p>Next, the file contains ad data. For each ad, this includes the image to use, the URL to go to when a user clicks the ad (in this case, after going to Redirect.asp), the text associated with the image, and the percentage of time this ad is to be displayed:</p>
<p>By maintaining the ad information in a separate file, a different group at your organization can update the Adrot.txt file without requiring you to update your ASP page. Different groups can maintain different files of ads for different parts of your site. </p>
<h3><a name="createthescript">Create the Script</a></h3>
<ol>
<li>Use your text editor to open the file Bayshore.asp in the <%= Request.ServerVariables("SERVER_NAME")%> Web server's Tutorial directory (<%= FilePath %>).
<br><br></li>
<li>At the top of Bayshore.asp, before any other HTML tag or ASP instruction, paste the following line of script: </li>
<pre><font size="3" face="courier"><%@ LANGUAGE = "<%=ScriptLanguagePreference%>" %></font></pre>
<p>This script is an ASP directive statement tells the Web server that your scripts are written in <%=ScriptLanguagePreference%>. This directive statement must always be the first line of your ASP file.<!--</p>--><br>
<li>Search for the words “<em>Tutorial Lesson: Ad Rotator</em>.” You will add your script here.<br><br></li>
<li>Create an instance of the Ad Rotator component and assign it to the variable <font face="courier" size="3"><code>Ad</code></font> by copying the following script command and pasting it into your text editor (after the text line from the previous step): </li>
<pre><font size="3" face="courier"><% <%
If ScriptLanguagePreference = "JScript" Then
%><%Else%>Set<% End If %> Ad = Server.CreateObject("MSWC.Adrotator") %> </font></pre>
<p>Assigning a component instance to a variable enables you to refer to a component later in a script.<!--</p>--><br>
<p>If another user has previously completed this portion of the tutorial, this script command will already be in place. Paste the copied script over the existing script, or copy an unedited copy of Bayshore.asp from the Template (<%=FilePath%>\template) directory to the Tutorial directory.<!--</p>--><br>
<li>To display a new ad, you use the <strong>GetAdvertisement</strong> method of the Ad Rotator component. Add the following command to your script: </li>
<pre><font size="3" face="courier"><%<%
If ScriptLanguagePreference = "JScript" Then
%>Response.Write(Ad.GetAdvertisement("adrot2.txt"))<%Else%>= Ad.GetAdvertisement("adrot2.txt")<% End If %>%> </font></pre>
<p>The <strong>GetAdvertisement</strong> method takes one parameter (the name of the file containing the ad information, in this case Adrot2.txt, which we've configured differently than Adrot.txt). On the basis of this parameter, the method returns a fully formatted HTML <IMG> tag with the appropriate ad. The variable name you assigned to the Ad Rotator component instance, <strong>Ad</strong>, precedes the method, <strong>GetAdvertisement</strong>, and the path for the file Adrot2.txt. The equal sign sends the value returned by the method (the actual ad) to the user's browser.<!--</p>--><br>
<li>Save changes to Bayshore.asp in text format and exit your text editor. Be sure your text editor does not replace the .asp file name extension.
<br><br></li>
<li>To verify that the ASP page you’ve created works (after which you can return to this tutorial by clicking Back in your browser), point your browser to
<h2><a name="usingthebrowsercapabilitiescomponent">Lesson 2: Using the Browser Capabilities component</a></h2>
<p>Not all browsers support the broad range of today's Internet technologies. ActiveX controls, streaming video, Dynamic HTML, and scriptlets are just some examples of features that some browsers support and others do not. Using ASP's Browser Capabilities component, you can design "intelligent" Web pages that present content in formats appropriate for the capabilities of the browser rendering your page. For example, you can design a Web page that uses the Browser Capabilities component to determine whether a user's browser supports an ActiveX-driven logo displayed on your page, and if the browser does not, display the logo in an alternate form, such as static image. </p>
<p>In this lesson, you will enhance the Ad Rotator script you created in Lesson 1 to include script for activating a scriptlet. Scriplets are simply Web pages containing scripts and HTML, which Web authors can create as reusable client-side objects. To include a scriptlet in a Web page, one only needs to insert an HTML <OBJECT> tag containing information about the type and location of the scriplet. In this lesson, the scriplet you will be including in the Ad Rotator script uses Dynamic HTML (DHTML) to create an exciting ad rotator that transitions dynamically between images.</p>
<p>Currently, only Microsoft Internet Explorer version 4.0, or later, supports scriptlets and certain DHTML features. This means that your Ad Rotator script must be able to detect the browser type: if a user’s browser is Internet Explorer version 4.0, or later, the user should see a set of ads that appear one after another, with a variety of dynamic transitions. If the user's browser is not Internet Explorer version 4.0, or later, then the user should see alternating static ads generated by the Ad Rotator component whenever the user refreshes the Web page.</p>
<p><a name="browscapdemo">Click</a> the Demonstrate button to see an example of a DHTML ad rotator generated by means of a scriplet. (If your browser is not Microsoft Internet Explorer version 4.0, or later, you will see the same static ads that you saw in <a href="#usingtheadrotatorcomponent">Lesson 1</a>.)</p>
<h3><a name="createthescriptb">Create the Script </a></h3>
<p><strong><span style="color: #0000FF"><font color="#0000FF">Important</font></span></strong> You must complete <a href="#usingtheadrotatorcomponent" >Lesson 1</a> before doing this lesson. </p>
<ol>
<li>Start your text editor and open the file Bayshore.asp in the Tutorial directory (<%= FilePath %>).<br><br></li>
<li>Search for the words “Tutorial Lesson: Start Browser Capabilities.”, below this text line, you will add your script.<br><br></li>
<li>Create an instance of the Browser Capabilities component and assign it the variable <font face="courier" size="3"><code>objBrowser</code></font> by copying the following script command and pasting it into Bayshore.asp: <pre><font size="3" face="courier"><% <%
If ScriptLanguagePreference = "JScript" Then
%><%Else%>Set<% End If %> objBrowser = Server.CreateObject("MSWC.BrowserType") %></font></pre>
<p>If another user has previously completed this portion of the tutorial, these lines of script will already be in place. Paste the copied lines of script over the existing script, or copy an unused version of Bayshore.asp from the Template subdirectory (<%=FilePath%>\template) to the Tutorial directory.<!--</p>--><br>
<li>
<% If ScriptLanguagePreference = "JScript" Then %>
Use the JScript <strong>if...else</strong>
<% Else %>
Use the VBScript <strong>If...Then...Else</strong>
<% End If %>
statement to determine whether or not a user's browser is Internet Explorer version 4.0, or later. If it is, the scriptlet will be used; if the browser is not Internet Explorer version 4.0, or later, and does not support scriptlets, the server-side Ad Rotator component will be used. To incorporate this logic, copy the following script and paste it after the <font face="courier" size="3"><code><% <%
If ScriptLanguagePreference = "JScript" Then
%><%Else%>Set<% End If %> objBrowser...%></code></font>
statement you inserted in step 2:
<pre><font size="3" face="courier"><% <%
If ScriptLanguagePreference = "JScript" Then
%>if (objBrowser.browser == "IE" && objBrowser.majorver == "4") { <%Else%>If objBrowser.browser = "IE" and objBrowser.majorver >= 4 Then<% End If %>
%>
<OBJECT ID="scriptlet"
STYLE = " position:relative;height:200;width:200"
TYPE = "text/x-scriptlet"
DATA = "..\tutorial\rotate5.htm">
</OBJECT>
<% <%
If ScriptLanguagePreference = "JScript" Then
%> }
else {<%Else%>Else<% End If %> %> </font></pre>
<p>If another user has previously completed this portion of the tutorial, these lines of script will already be in place. Paste the copied script over the existing script, or copy an unused version of Bayshore.asp from the Template subdirectory (<%=FilePath%>\template) to the Tutorial directory.
<!--</p>--><br>
<p>The Browser Capabilities component’s <strong>browser</strong> and <strong>majorver</strong> properties determine whether the browser is Internet Explorer version 4.0, or later. The script uses the HTML <font face="courier" size="3"><code><OBJECT></code></font> tag to insert a
scriptlet into the Web page. The tag's attributes specify the scriplet's type (x-scriptlet), location, and dimensions. The actual scriplet source file is called Rotate5.htm. If you are interested, it's also located in the Tutorial directory (<%=FilePath%>). You can open it Notepad or with any HTML editing tool.<!--</p>--><br>
</li>
<li>Search for the words “<em>Tutorial Lesson - End Browser Capabilities</em>.” Below this text line, copy and paste the following script command to end the
<strong><%
If ScriptLanguagePreference = "JScript" Then
%>if<%Else%>If...Then...Else<% End If %></strong> statement:
<pre><font size="3" face="courier"><%<%
If ScriptLanguagePreference = "JScript" Then
%>
}
<%Else%>End If <% End If %>%> </font></pre>
<p>If another user has previously completed this portion of the tutorial, this script command will already be in place. Paste the copied script over the existing script, or copy an unused version of Bayshore.asp from the Template subdirectory (<%=FilePath%>\template) to the tutorial directory.<!--</p>--><br></li>
<li>Save changes to Bayshore.asp as a text file and exit your text editor. Be sure your text editor does not replace the .asp file name extension.
<br><br></li>
<li>To verify that the Active Server Page you’ve created works (after which you can return to this Tutorial by clicking Back in your browser), point your browser to <a href="http://<%= Request.ServerVariables("SERVER_NAME")%>/iishelp/iis/htm/tutorial/bayshore.asp">http://<%= Request.ServerVariables("SERVER_NAME")%>/IISHelp/IIS/Help/Htm/Tutorial/Bayshore.asp. </a></li>
</ol>
<p><strong>Note</strong> The file Browscap.ini (placed in Winnt\System32\Inetsrv by default) contains the data necessary for the Browser Capabilities component to recognize a browser and its capabilities. You will need to add new data to this file as new browsers are developed, or if you are using browser-dependent features that are not listed in the default Browscap.ini file.</p>
<hr>
<h2><a name="usingthedatabaseaccesscomponent">Lesson 3: Using the Database Access Component </a></h2>
<p>The ASP Database Access component uses ActiveX Data Objects (ADO) to provide easy access to information stored in a database (or in another tabular data structure such as a spreadsheet) that complies with the Open Database Connectivity (ODBC) standard. In this lesson, you will connect to a Microsoft® Access customer database and display a listing of its contents. You will learn how to extract data using the SQL <strong><a name="select">SELECT</a></strong> statement and create an HTML table to display the results.</p>
<h3><a name="identifythedatabase">Identify the Database</a></h3>
<p>Before using a database with the Database Access component, you must identify the database in the ODBC application in Control Panel.
In this example, you will use a Microsoft® Access database that is provided with this Tutorial.</p>
<ol>
<li>At the computer running your Web server (<%= Request.ServerVariables("SERVER_NAME")%>), open <strong>Control Panel</strong>.
<br><br></li>
<li>Double-click the ODBC icon, and then click <strong>System DSN</strong>.
<p>The DSN tells the database driver, a program used to configure and communicate with the database, where the database is located. You can create three types of DSNs: <strong>User</strong>, which is available only to you; <strong>System</strong>, which is available to anyone using the
computer; and <strong>File</strong>, which saves the DSN information as a file and allows all users to access the same database drivers. The DSN for use with this tutorial must be of the <strong>System</strong> type.</p>
<li>Click <strong>Add</strong>, choose the <strong>Microsoft Access Driver</strong>, and then click <strong>Finish</strong>.
<br><br></li>
<li>In the <strong>Data Source Name </strong>box, type <strong>ASPTutorial</strong>, and then click <strong>Select</strong>. Select the BTCustmr.mdb file (In the WINNT\Help\IIS\Htm\Tutorial directory by default), and click <strong>OK</strong>.
<br><br></li>
<li>Click <strong>OK</strong> to close the dialog boxes. </li>
</ol>
<h3><a name="createthecomponentinstance">Create the Component Instance</a></h3>
<ol>
<li>Use your text editor to open the file Database.asp in the <%= Request.ServerVariables("SERVER_NAME")%> Web server's Tutorial directory ( <%= FilePath %>).<br><br></li>
<li>Search for the words "<em>Define Scripting Language</em>", underneath this text line copy and paste the following lines of script: </li>
<pre><font size="3" face="courier"><%@ LANGUAGE = "<%=ScriptLanguagePreference%>" %></font></pre>
<p>Always be sure to add this tag as the first script line in all of your .asp files.<!--</p>--><br>
<li>Search for the words “<em>Tutorial Lesson - ADO Connection</em>,” underneath this text line you will copy and paste your script.
<br><br></li>
<li>As always, you need to create an instance of an object in order to use it. Copy and paste the following script command: </li>
<pre><font size="3" face="courier"><%
<%
If ScriptLanguagePreference = "JScript" Then
%><%Else%>Set<% End If %> objConnection = Server.CreateObject("ADODB.Connection") </font></pre>
<p>If another user has previously completed this portion of the tutorial, this script command will already be in place underneath the "Tutorial Lesson" comment. Paste the copied script over the existing script, or copy an unused version of Database.asp from the Template subdirectory (<%=FilePath%>7template) to the Tutorial directory.<!--</p>--><br>
<li>For the Database Access component, you also need to specify the ODBC <em>data source</em> (the database from which you want retrieve data) by opening a connection to the database. Copy and paste the following script command: </li>
%>("ASPTutorial")<%Else%> "ASPTutorial"<% End If %> </font></pre>
<li>Use the Database Access component's <strong>Execute</strong> method to issue a Structured Query Language (SQL) <strong>SELECT</strong> command to the database and store the returned records in a result set (<font face="courier" size="3"><code>rsCustomersList</code></font>). Copy and paste the following script commands below the <font face="courier" size="3"><code>objConnection.Open</code></font> statement: </li>
<%
If ScriptLanguagePreference = "JScript" Then
%><pre><font size="3" face="courier">rsCustomersList = objConnection.Execute("SELECT * FROM Customers")
%></font></pre><%Else%><pre><font size="3" face="courier">SQLQuery = "SELECT * FROM Customers"
Set rsCustomersList = objConnection.Execute(SQLQuery)
%></font></pre>
<% End If %>
<%
If ScriptLanguagePreference = "JScript" Then
%><%Else%><p>You could combine these two lines of script by passing the literal SQL query string directly to the <strong>Execute</strong> method rather than
assigning it first to the variable <strong>SQLQuery</strong>. When the SQL SELECT is long, however, it makes the script easier to read if you assign the string to a
variable name, such as <strong>SQLQuery</strong>, and then pass the variable name on to the <strong>Execute</strong> method. <!--</p>--><br><% End If %>
</ol>
<h3><a name="displaythereturnedresultset">Display the Returned Result Set</a></h3>
<p>You can think of the result set as a table whose structure is determined by the fields specified in the SQL <strong>SELECT</strong> statement. Displaying the rows returned by the query, therefore, is as easy as performing a loop through the rows of the result set. In this example, the returned data is displayed in HTML table rows. </p>
<ol>
<li>In Database.asp, find the words “<em>Tutorial Lesson - Display ADO Data</em>,” and copy and paste the following VBScript <strong>Do...Loop</strong> statement underneath the comment: </li>
<pre><font face="courier" size="3"><% <%
If ScriptLanguagePreference = "JScript" Then
%>while (!rsCustomersList.EOF) {<%Else%> Do Until rsCustomersList.EOF<% End If %>%>
<p>If another user has previously completed this portion of the tutorial, this script command will already be in place. Paste the copied script over the existing script, or copy an unedited copy of Bayshore.asp from the Template directory to the Tutorial directory.</p>
<p>The <%=ScriptLanguagePreference%> <%
If ScriptLanguagePreference = "JScript" Then
%> <strong>while</strong> loop<%Else%><strong>Do...Loop</strong><% End If %> statement repeats a block of statements while a condition is true. The repeated statements can be script commands
or HTML text and tags. Thus, each time through the loop, you construct a table row (using HTML) and insert returned data (using
script commands).</p>
<li>To complete the loop, use the <strong>MoveNext</strong> method to move the row pointer for the result set down one row. Because this statement still falls within the <strong>Do...Loop</strong> statement, it is repeated until the end of the file is reached. Copy and paste the following lines of script underneath the comment with the words “<em>Tutorial Lesson - Retrieve Next Row</em>”: </li>
<pre><font size="3" face="courier"><%
<%
If ScriptLanguagePreference = "JScript" Then
%>rsCustomersList.MoveNext()
}<%Else%>rsCustomersList.MoveNext
Loop<% End If %>
%></font></pre>
<li>Save changes to Database.asp as a text file and exit your text editor. Be sure your text editor does not replace the .asp file name extension.
<br><br></li>
<li>To verify that the ASP page you’ve created works (after which you can return to this tutorial by clicking Back in your browser), point your browser to <a href="http://<%= Request.ServerVariables("SERVER_NAME")%>/iishelp/iis/htm/tutorial/database.asp"> http://<%= Request.ServerVariables("SERVER_NAME")%>/IISHelp/IIS/Help/Htm/Tutorial/Database.asp</a>.</li>
</ol>
<h3><a name="onyourown2">On Your Own </a></h3>
<p>If you are using Windows NT, to see a more complete example of the Database Access component in action, visit the <a href="/IISSamples/ExAir/Default.asp">Exploration Air</a> sample site. Click the <strong>Behind the Scenes</strong> image to learn more about the scripts used to create this exciting Web site. The Bayshore Travel Web page also contains a link that can take you to the Exploration Air sample site.</p>
<p><strong>Note</strong> If you have not yet visited the Exploration Air sample site, the preceding link will automatically redirect you to the Exploration Air home page. If this happens, use the <strong> Back </strong> button on your Web browser to navigate back to the tutorial and follow the link again.</p>
<p> Now that you've used ActiveX components, you may want to go on to <a href="iiatmd3.asp">Module 3: Writing Your Own Components</a>. </p>
