Create a Web page that displays XML data

Applies to
Microsoft Office FrontPage® 2003

Learn the basics of creating a Web site based on Microsoft Windows® SharePoint™ Services that connects to and displays data formatted in Extensible Markup Language (XML). XML files are often used as self-contained databases, and you might want to incorporate and display data from an XML database on your Web site. By following the exercises in this article, you will learn how to add an XML data source to your site and display its contents.

To keep this article simple and practical, the steps guide you through incorporating data into your Web site from an XML file that contains a small amount of data that represents a set of books in a publishing catalog. However, the techniques described in this article prepare you to take advantage of a much larger set of capabilities (and a wider set of data) by using Microsoft Office FrontPage 2003 and Windows SharePoint Services. By using many of the same steps that you will learn in this article, you can use FrontPage and Windows SharePoint Services to connect to any data source that can be transformed into XML, such as a Web service, a Microsoft Office Excel 2003 spreadsheet, or a Microsoft SQL Server™ database.

In this hands-on exercise, you will learn the basic steps in working with "live" XML data in FrontPage by incorporating an XML database into your Web site:

  • Adding a data source to the data source catalog.
  • Creating a view of the data.
  • Formatting the data view.

We hope that learning these basic steps inspires you to explore the rich set of database features that FrontPage and Windows SharePoint Services make available.

Create a Web site based on Windows SharePoint Services

To display XML data from a Web site, create the site on a server running Microsoft Windows SharePoint Services. To create the site, you must be a member of a site group with the Create Subsite right in Windows SharePoint Services. This right is included by default in the Administrator site group.

  1. In FrontPage, on the File menu, click New.
  2. In the New task pane, under New Web site, click SharePoint team site.
  3. In the Web Site Templates dialog box, make sure that SharePoint Team Site is selected and, in the Specify the location of the new Web site field, enter the URL of the new site, such as "http://My_SharePoint_Site/Practice," and then click OK.

Next, create the page on which you will practice working with data views to display XML data.

  1. On the File menu, click New.
  2. In the New task pane, under New page, click Blank Page.
  3. At the top of the new page, type the line "My XML Data".
  4. Select the text you typed.
  5. On the Formatting toolbar, in the Style box Button image, click Heading 1.
  6. On the File menu, click Save As.
  7. In the Save As dialog box, in the Save as Type field, click ASPX files (*.aspx).

The .aspx extension indicates that the page is an ASP.NET page, which can contain both HTML content and ASP.NET scripts that implement the data connection.

  1. In the File name field, type"Data.aspx", and then click Save.

Create the sample XML database

For this exercise, an Extensible Markup Language (XML) document is the data source.

  • To prepare to import the data source into your Web site, paste the following XML code into a file in a text editor, such as Microsoft Notepad, and save it to your computer's file system as "books.xml". This file is a simple database containing records for three books in a publishing catalog. Be sure to use the .xml filename extension.
<?xml version="1.0" encoding="utf-8" ?>
<titles>
   <title>
      <isbn>0-7356-1890-9</isbn>
      <title>Building Secure Microsoft® ASP.NET Applications</title>
      <author>Microsoft Corporation</author>
      <cds>0</cds>
   </title>
   <title>
      <isbn>0-7356-0529-7</isbn>
      <title>Deploying Microsoft® Exchange Server 5.5</title>
      <author>Microsoft Corporation</author>
      <cds>1</cds>
   </title>
   <title>
      <isbn>0-7356-1420-2</isbn>
      <title>Internet Information Services (IIS) 6 Resource Kit</title>
      <author>The Microsoft IIS Team</author>
      <cds>2</cds>
   </title>
</titles>

 Note   Although you can create an XML file directly in FrontPage, this article guides you through creating the XML file in your file system and then importing it, as you would do when working with real-world data sources.

Make the XML file a data source

To display a database in a Web site based on Windows SharePoint Services, you first import it into FrontPage as a data source, and then add it to the Web site's data source catalog, which you use to manage the data sources that are available to the Web site.

  1. In FrontPage, on the Data menu, click Insert Data View.
  2. In the Data Source Catalog task pane, next to XML Files, click the plus sign Plus box to expand the display, and then click Add to Catalog.
  3. In the Data Source Properties dialog box, click Browse and, in the File Open dialog box, navigate to the sample XML database, books.xml. When you have selected the file, click Open.
  4. You are prompted to import the file into your Web site. Click OK.
  5. In the Import dialog box, accept the suggested location for the file by clicking OK.

Books.xml is now listed as a data source in the data source catalog.

Create a view of the data source

To add a live view of your data, create a Data View on your sample Web page. A Data View is a powerful and flexible Web Part that you can use to present data in a variety of formats from a Web site based on Windows SharePoint Services.

  1. With the file Data.aspx page open in Design view, on the Data menu, click Insert Data View.
  2. In the Data Source Catalog task pane, locate your books.xml database file. Click the file and drag it onto the Data.aspx page.

FrontPage automatically adds a Data View Web Part to the page and displays the XML data in the Web Part.

You are viewing the live XML data as your site users will see it. You can improve the readability and appearance of your data by formatting the Data View.

Format the Data View

  1. In the page Data.aspx, in Design view, select the Data View Web Part by clicking it.
  2. On the Data menu, click Style.
  3. In the View Styles dialog box, scroll to the Repeating form with border view style and click that view, and then click OK.

 Note   Rest the mouse pointer on a view style to see its name.

  1. Click Yes when prompted to continue.

Note that the data is formatted in the style that you selected.

Add more data to your database

In this section, you change the data that you are displaying by updating the books.xml data file to add an additional book entry.

  1. In the Folder List, double click the file books.xml.
  2. Select and delete the entire contents of books.xml.
  3. Copy and paste the following .xml code into the file books.xml. This contains the current records in your database along with an additional record.
<?xml version="1.0" encoding="utf-8" ?>
<titles>
   <title>
      <isbn>0-7356-1890-9</isbn>
      <title>Building Secure Microsoft® ASP.NET Applications</title>
      <author>Microsoft Corporation</author>
      <cds>0</cds>
   </title>
   <title>
      <isbn>0-7356-0529-7</isbn>
      <title>Deploying Microsoft® Exchange Server 5.5</title>
      <author>Microsoft Corporation</author>
      <cds>1</cds>
   </title>
   <title>
      <isbn>0-7356-1420-2</isbn>
      <title>Internet Information Services (IIS) 6 Resource Kit</title>
      <author>The Microsoft IIS Team</author>
      <cds>2</cds>
   </title>
   <title>
      <isbn>0-7356-1880-1</isbn>
      <title>Microsoft® Office 2003 Editions Resource Kit</title>
      <author>The Microsoft Office Team</author>
      <cds>1</cds>
   </title>
</titles>
  1. On the File menu, click Save.

Now, view the data with the additional record.

  1. In the Folder List, double click the file containing your data view, Data.aspx.
  2. On the Data menu, click Refresh Data.

Because the Data View Web Part is connected to the "live" data, it now displays four records.

Conclusion

You have now completed this practice exercise and have created a Web site that connects to a source of XML data by using the FrontPage Data Source Catalog and that displays the live data by using a Data View Web Part.

FrontPage offers a rich set of features that build on what you have learned. For example, in much the same way as you connected to the books.xml database file, you can connect to a large number of XML data sources. These include:

  • SharePoint lists.
  • Excel spreadsheets.
  • Database connections that conform to the OLE DB specification (such as Microsoft SQL Server databases).
  • Web services.
  • Server-side scripts.

In addition to exploring the set of data that you can connect to, you can explore the rich set of data viewing options that FrontPage makes available. In addition to applying built-in views, as you practiced, you can:

  • Apply filters to your data.
  • Apply conditional formatting.
  • Directly apply HTML and cascading style sheet (CSS) formatting to a Data View.
  • Display a toolbar that lets site users sort, group, and filter fields.
  • Display headers and footers that summarize and aggregate the data in each column.
  • Specify how many data records to display per page. FrontPage will insert the navigation links.

We hope that the success you had with this exercise will inspire you to build richer data-driven Web sites using the powerful, easy-to-use set of features that FrontPage and Windows SharePoint Services provide.

 
 
Applies to:
FrontPage 2003