|
|
|
 |
Magazine |
| | Community |
| | Workshop |
| | Tools & Samples |
| | Training |
| | Site Info |
 |
 |
||||||||
|
|
||||||||
|
|
|||||||||
Michael Edwards
Based on a presentation by John Shewchuk, Richard Rollman, and Scott Guthrie
Microsoft Corporation
February 11, 1998
Download this document in Microsoft Word (.DOC) format (zipped, 10.9K).
Contents
Introduction
Getting Started
The Client Side
The Server Side
Tools of the Trade
The Online Auction Demo
This article is based on the presentation "Building Data-Driven Web Applications," by John Shewchuk, Richard Rollmaln, and Scott Guthrie. John Shewchuk (one of the people creating Visual InterDev™ 2.0), Richard Rollman (one of the Internet Explorer folks responsible for figuring out what a Weblication is), and Scott Guthrie (one of those guys working to make Internet Information Server the best Web server on the planet) built a demonstration of a data-driven Web application. Their updated Online Auction demo was the solution component of the Developing Web Applications (DWA) track at Web Tech·Ed in Palm Springs, CA. The "Solutions" series of presentations were geared towards demonstrating the use of multiple, complementary, integrated technologies to solve particular business needs.
(Microsoft will present additional Web-related technical-solution sessions in June at Tech·Ed 98 in New Orleans. See the Microsoft Events 
site for details and registration information.)
I won't be able to reproduce the sun, or the wonderful smell of things growing in the dead of winter -- but having attended their presentation and a good number of the related technical breakout sessions, I can give you a decent brain dump of what I learned about building data-driven Web applications.
Note: As you'll see, much of the technology details for the Online Auction demonstration solution were covered in dozens of technical breakouts at the conference. Conference attendees who missed any of those breakouts will appreciate the opportunity to attend every one of them virtually, via NetShow reproductions on the Web Tech·Ed conference CD-ROM, which will be mailed out mid-February. Also, a handful of the breakout sessions, including DWA 02 and DWA 05, will be available soon for non-conference attendees on SBN Live. If you couldn't make it to the conference, chill. In addition to telling you what breakouts you won't be able to see, I also include links to lots of online information for every one of the technologies used. Plus, you can download the entire demonstration and documentation.
Many interesting Web applications are simply database applications implemented for the Web. According to the presentation, 81 percent of the highest traffic Web sites are data-driven. That means they provide end users with a Web-browser user interface for viewing and changing data that is stored on, or accessed from, the Web server.
Since few of you will be well versed in all the different technologies that are employed in this demo, I'll take a moment to explain them, and how they fit together.
There are two pieces to the client side: the technologies used to construct the user interface, and the script and controls that are used to exchange data with the server-side components.
On the client side, the Online Auction demo uses Dynamic HTML (DHTML) features in Internet Explorer 4.0 to present the user interface. DHTML is the Microsoft Internet Explorer 4.0 implementation of HTML 4.0 and the Document Object Model (DOM) standards recommended by the World Wide Web Consortium (W3C). DHTML enables authors to create interactive pages by providing dynamic access to the underlying HTML, while minimizing trips to the Web server. Several talks at Web Tech·Ed drilled down to details about those technologies, including:
. More reference information, how-to articles, and samples are available in the SBN Workshop's DHTML, HTML & CSS pages, as well as other sections of the SBN Workshop. You might also check out the Internet Explorer home page for more overview information about Internet Explorer 4.0 features, and the Microsoft Scripting Technologies start page for more information about scripting.
The Online Auction demonstrates exchanging server data with a Web page by displaying bids (stored in a server-side database) in real time, using the Data Source Object (DSO) for Extensible Markup Language (XML) data. The data that is exchanged between the client and server in the auction demo is represented on the server in a database, but it is transmitted in an XML data format. XML is a data-description markup language for the Web. It describes text and binary data, just as HTML describes display. Sending the data in XML format allows the browser to understand the data it received; it isn't just "plain-old" HTML, where you know only how the data should be visually presented. This is cool, because the client can do intelligent things with the data, rather than merely displaying it.
Both the bids that were made before you came to the page, as well as those that occur while you are looking at the page, are presented in a tabular view. This bid information is sourced from the server -- but if you make a bid yourself, you'll use the client-to-server direction of the data binding (thus, a DSO can be a source of data from the server as well as to the server). The same data-binding mechanism is used to obtain the details, or the information shown when you click the various items that are up for bid in each auction.
Internet Explorer 4.0 ships with several built-in DSOs for various forms of data (databases, comma-delimited files, and so forth), and there are plenty of examples and documentation showing you how to create your own DSO should the need arise.
A DSO allows you to bind data stored on the server with the HTML elements on a page, hence the term "data binding." Data binding lets you connect to a data provider, move data to the Web page, manipulate the data on the Web page, and then return updates to the server in a single round-trip. In addition to conserving network and server bandwidth and improving response times, data binding preserves the context of the page, thus providing a more consistent interface to the user.
On the demo's administrative page, you can directly view, edit, and change database fields on the client. For the purpose of a technology demonstration, this administrative feature is implemented in two different ways -- one using data binding on the client, and the other using a standard HTTP Post to send the changes to the server. In the latter case, the changes are committed to the database in script running on the server, whereas the client-side data-binding method uses the Remote Data Service (RDS) to commit the database changes directly from the client. RDS is just another type of DSO, as you'll see if you choose to pursue the additional sources listed below.
Sessions at Web Tech·Ed discussing details about these technologies included:
in the Internet Client SDK, as well as Site Builder Network's Tools & Samples area (includes DSO samples in Java, Visual Basic®, and Visual C++®). Everything you ever wanted to know about XML is available in the XML area (with off-site links, too). Web Tech·Ed did not include any talks devoted to RDS, but there is extensive RDS documentation in the Internet Client SDK.
The server side of this solution consists of several Active Server Pages (ASP) files that deliver the HTML and XML data to the client. The XML data is derived from the item and bid information that is stored in databases on a SQL Server. All database transactions are made reliable through the use of transaction-aware ASP technology and Microsoft Transaction Server (MTS). Confused? Hang on. It will become clearer, I promise.
Internet Information Server 4.0 is used as the Web server for this demonstration. The main Web pages served for the Online Auction demo are HTML files, whereas all the data binding operations are conducted through the use of ASP pages. ASP technology lets you embed server-side scripts into HTML. Since the ASP script is executed on the server before the requested page is returned to the client, it is like the glue between the stuff you do on the server and the stuff you do on the client. The demo uses ASP scripting to connect to the SQL server database, and to conduct the business logic (a fancy term for your application-specific code) that determines what HTML and XML data should be delivered to the client. For example, when you click one of the items for sale in an auction, an ASP file on the server is executed, and the ASP script converts information from the item table in the database to XML data that is delivered to the client without a context change (the screen doesn't get rebuilt; only the relevant data-bound HTML elements on the page are updated). This example happens to deliver up XML data, but it could just as well send back any other type of data to the client.
Unfortunately, Internet Explorer 4.0 is currently the only browser that supports XML -- and since we wanted to show you how you can use XML in a data-driven solution (as well as show how client-side data binding works), our solution demo is kind of married to Internet Explorer 4.0. However, there is nothing inherent in the server-side pieces of the demo that would tie it to a specific browser. If you wanted to support other browsers, you would just need to generate the entire HTML on the server (John showed a demo of this, which I will talk about below). It's a little slower and less responsive than client-side data binding, and you can't do anything interesting with HTML on the client (except display it), but it will work.
The server-side data is represented in a Microsoft SQL Server™ 6.5 database (which is not necessarily stored on the same server that serves the Web pages). Microsoft SQL Server 6.5 is a scalable, reliable, flexible, and high-performance relational database management system for Microsoft Windows NT® Server-based systems (quoted straight from their Web site, in case you couldn't guess).
Now, I already told you how the XML DSO is used on the client to bind certain HTML elements to the server data. Well, the XML DSO is actually bound to an ASP page on the server that delivers XML. And the ASP script gets the database information by creating an Active Data Object (ADO) and binding it to the database file. ADOs layer a single database API on multiple database formats (Oracle, Access, SQL, and so forth). Thus, you can do database queries (and other database manipulations) without having to understand the format of the underlying database. Several Web Tech·Ed breakouts drilled down to details about these technologies (including the cool, new features in SQL Server 7.0 that were introduced for the first time at Web Tech·Ed):
in the Internet Client SDK, and more about SQL Server and IIS on their Web sites. You might also check out the Microsoft Universal Data Access Web site.
Microsoft Transaction Server (MTS) and transaction-aware ASP technology were used to maintain data integrity between the client and server parts of this application demo. In other words, when your interaction with a data-driven Web site adds or modifies data stored on the server, you need to know about and be able to handle any errors that occur. (If there are no errors, the data exchange was transacted without incident.) Microsoft Transaction Server (MTS) can ensure that multiple database operations can be treated as an atomic operation -- that if you do a sequence of database manipulations that must occur together (such as moving money from one account to another), and one of those manipulations fails, MTS can ensure they are all rolled back together. The end result is that you have changed all pertinent data successfully, or you are back where you started.
You transact the data operations on an ASP page by flagging a page-level attribute.
<% Transaction=Required %>
Essentially, inserting this one line of script on the ASP page makes all the scripting operations on the page reliable -- so if you have several lines of script that are munging data in a database, and one of those operations fails, all the changes will be automatically rolled back. Plus, any changes that are made by transaction-aware controls on the page are also rolled back. Scott claimed he could make a simple Visual Basic control transaction-aware by adding four lines of MTS code. Later on, in his DWA 07 talk, he proved it.
Although it was not discussed or used in this solution, Microsoft Message Queuing (MSMQ) can also be used to transact data manipulation. As an asynchronous component of data-driven Web applications, MSMQ lets you defer data operations (think of the difference between using a debit card and writing a check) without losing reliability.
Finally, I'll just say a couple words about this scary term, multi-tier application. When your application is divided into pieces that span the client, the server, and the data, it is called a multi-tier application. So the Online Auction demo is a multi-tier application -- actually, a three-tier application. Several Web Tech·Ed breakouts covered what multi-tier applications are, and how they typically are designed and implemented. Other breakouts discussed the details of using MTS, Transacted ASP, and MSMQ:
. There is also a fair bit of discussion about designing three-tier, data-driven applications in the Developer's Guide Internet Client SDK documentation for RDS (using RDS for the data connectivity).
For me, the highlight of Web Tech·Ed (besides warm sunshine) was seeing Microsoft Visual InterDev 2.0. Yeah, maybe you'd think somebody working at Microsoft wouldn't be pleasantly surprised by new product announcements! But to be perfectly candid: Until now, I just hadn't made the time to install Visual InterDev 1.0 and get up to speed on it. With their 2.0 product, John and the rest of the Visual InterDev team have completely changed my mind -- big time. In addition to the demos that John did during the solution talk, which showed how he used Visual InterDev 2.0 to build pieces of the Online Auction demo, there were two breakouts on the Visual InterDev 2.0 product features. I was sold the minute they showed me seamless script debugging from client side to server side. The icing on the cake was when John showed the new Data Environment for adding data connections to a Web site, and how the Data Environment can visually present the database information.
Two Visual InterDev 2.0 demonstrations covered new features for managing the database and for displaying the database information on a Web page.
In the first demonstration, John showed how the Data Environment feature can be used to track all your database information. In the Data Environment, you can directly edit the database tables as if they were cells in spreadsheet. The coolest part of this demo was when John drag-dropped the auction tables onto the new "Automatic Database Table Layout," a window that visually represents the relationships between the tables.
The next thing John showed in the Data Environment was how to use the SQL Query Builder tool to create and store SQL queries. You can execute the queries in the Data Environment and drag-drop the results to your Web page. This automatically generates the code needed to connect to the database, do the query, and display the results. If you change the query later, the code changes are propagated automatically.
A little bit later, John showed another Visual InterDev 2.0 demonstration on constructing the administration pages for the Online Auction. After drag-dropping the recordset object for the auction table, which holds the information about available auctions, from the Data Environment window onto a blank Web page, John selected the fields he wanted to display from the recordset onto the page. The fields were automatically bound to the recordset object, which was already on the page (Visual InterDev 2.0 knew they were from the same table). Then he dragged a built-in navigator bar for moving through the records in the record set, and dropped that onto the form. Voilà, the page was done (and he didn't even have to write any code). But that was not the best part. No, the coolest part was when he showed saving the page either as a .htm file, where the data binding would all be done on the client using RDS (but you'd need an Internet Explorer 4.0 client), or as a .asp file, where standard HTML forms would be used on the client and the binding would all occur on the server (and you could support any browser client).
If you were at Web Tech·Ed, but missed the sessions on Visual InterDev 2.0, check out the NetShow presentations on your conference CD-ROM:
.
At this point I will put you in the capable hands of John, Richard, and Scott. In addition to writing all the code, they actually documented their demo. Wow, developers who write their own documentation. What's the world coming to?
Now, if you already installed an Online Auction demo from the Microsoft XML area, please be advised that the demo discussed in this article is an updated version. A few modifications have been made, although much of the functionality remains the same. If you still want to install this newer demo, keep in mind that it will overwrite the old one. Or, you can skip the installation and read the documentation online.
First, you need to install the demo (you need to have Microsoft Personal Web Server installed). Then you can check out the Online Auction demo, take a look at the code, and read the documentation. Sorry, you'll have to wait another month to get a whack at the Visual InterDev 2.0 public technology preview.
Back to the Web Tech·Ed Solutions home page
Did you find this article useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1998 Microsoft Corporation. All rights reserved. Terms of use.
Back to top