XQuery FLWOR + HTML

Welcome to The Coding College! This tutorial explores how to use XQuery FLWOR expressions to dynamically generate HTML content from XML data. By combining the power of XQuery and FLWOR expressions, you can extract XML data and present it in a readable, user-friendly HTML format.

Why Use XQuery for HTML Generation?

When working with XML data, you often need to display it on the web. XQuery makes this seamless by:

  • Querying XML: Extract and process the exact data you need.
  • Formatting as HTML: Dynamically create structured and styled HTML.
  • Customizing Layout: Generate custom layouts and include interactivity.

Let’s jump into examples to see how this works.

Example 1: Generating a Simple HTML Table

Input XML: books.xml

<library>
  <book>
    <title>Learning XML</title>
    <author>John Doe</author>
    <price>29.99</price>
  </book>
  <book>
    <title>Advanced XSLT</title>
    <author>Jane Smith</author>
    <price>39.99</price>
  </book>
</library>

XQuery FLWOR:

<html>
  <head>
    <title>Book List</title>
  </head>
  <body>
    <h1>Books in the Library</h1>
    <table border="1">
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Price</th>
      </tr>
      {
        for $book in doc("books.xml")/library/book
        return
          <tr>
            <td>{ $book/title }</td>
            <td>{ $book/author }</td>
            <td>{ $book/price }</td>
          </tr>
      }
    </table>
  </body>
</html>

Output HTML:

<html>
  <head>
    <title>Book List</title>
  </head>
  <body>
    <h1>Books in the Library</h1>
    <table border="1">
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Learning XML</td>
        <td>John Doe</td>
        <td>29.99</td>
      </tr>
      <tr>
        <td>Advanced XSLT</td>
        <td>Jane Smith</td>
        <td>39.99</td>
      </tr>
    </table>
  </body>
</html>

When rendered in a browser, this creates a neat table of books.

Example 2: Filtering and Displaying Data

Let’s generate a webpage that displays only books priced below 35.

XQuery FLWOR:

<html>
  <head>
    <title>Discounted Books</title>
  </head>
  <body>
    <h1>Books Priced Below $35</h1>
    <ul>
      {
        for $book in doc("books.xml")/library/book
        where $book/price < 35
        return
          <li>
            { $book/title } by { $book/author } - ${ $book/price }
          </li>
      }
    </ul>
  </body>
</html>

Output HTML:

<html>
  <head>
    <title>Discounted Books</title>
  </head>
  <body>
    <h1>Books Priced Below $35</h1>
    <ul>
      <li>Learning XML by John Doe - $29.99</li>
    </ul>
  </body>
</html>

Example 3: Adding Styles with CSS

You can include inline CSS or link external stylesheets in the generated HTML.

XQuery FLWOR:

<html>
  <head>
    <title>Styled Book List</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      table {
        width: 50%;
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <h1>Books in the Library</h1>
    <table>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Price</th>
      </tr>
      {
        for $book in doc("books.xml")/library/book
        return
          <tr>
            <td>{ $book/title }</td>
            <td>{ $book/author }</td>
            <td>{ $book/price }</td>
          </tr>
      }
    </table>
  </body>
</html>

Rendered Output:

This code creates a styled table with alternating background colors for a clean presentation.

Example 4: Creating Links in HTML

Let’s generate links for each book that redirect to a details page.

Input XML:

<library>
  <book>
    <title>Learning XML</title>
    <author>John Doe</author>
    <price>29.99</price>
    <link>learning-xml.html</link>
  </book>
  <book>
    <title>Advanced XSLT</title>
    <author>Jane Smith</author>
    <price>39.99</price>
    <link>advanced-xslt.html</link>
  </book>
</library>

XQuery FLWOR:

<html>
  <head>
    <title>Book Links</title>
  </head>
  <body>
    <h1>Books in the Library</h1>
    <ul>
      {
        for $book in doc("books.xml")/library/book
        return
          <li>
            <a href="{ $book/link }">{ $book/title }</a> by { $book/author }
          </li>
      }
    </ul>
  </body>
</html>

Output HTML:

<html>
  <head>
    <title>Book Links</title>
  </head>
  <body>
    <h1>Books in the Library</h1>
    <ul>
      <li><a href="learning-xml.html">Learning XML</a> by John Doe</li>
      <li><a href="advanced-xslt.html">Advanced XSLT</a> by Jane Smith</li>
    </ul>
  </body>
</html>

Tools for Running XQuery

To generate and view HTML dynamically, you can use the following tools:

  1. BaseX: A lightweight XML database that supports XQuery and dynamic HTML rendering.
  2. eXist-db: Open-source XML database for serving web content directly.
  3. Saxon: A powerful XQuery processor for creating HTML from XML.

Conclusion

By combining XQuery FLWOR expressions with HTML, you can transform XML data into beautifully formatted web pages. This approach is ideal for web applications, dashboards, and reports where data is stored in XML.

For more tutorials on XML, XQuery, and web technologies, visit The Coding College!

Leave a Comment