fluency with information technology info100 and cse100 katherine deibel 2012-05-30katherine deibel,...

Databases and XMLThe black sheep of databases… no relations… get it..? black sheep… no relations… ha ha…

Fluency with Information Technology

INFO100 and CSE100

Katherine Deibel

2012-05-30 Katherine Deibel, Fluency in Information Technology 1

Announcements

Course Evaluations You will do evaluations for your TA on

Wednesday/Thursday this week

You will evaluate me on Friday Week 10 GoPost Discussions

Due by next Wednesday Bring clickers to class on Friday

Yes, there will be a quiz (an easy one)


An XML Database

We have mentioned XML several times in class An extremely versatile tool

Commonly used for representing metadata in databases

Today, we show how to use XML for managing your own data without having to use a DBMS


Overall Idea

We will build a flat-file database using XML of personally interesting data Chapter 17 shows the iDiary

We will then stylize the data by developing an XSL description

We will end by displaying the XML using a only a web browser


A Travelogue

Chapter 17 presents the iDiary We will do something much simpler:

a travelogue of places I've visited


Decide On The Data

The travel log will give data for each country visited as Country Name

Country’s Flag

Cities and Sights visited That series of countries forms a list

What was toured form a sublist inside each country


Building with XML Tags

XML does not have a fixed set of tags

You create your own: <travels>

<country>

<name>

<tour>

<city>

<sight>


Katherine Deibel, Fluency in Information Technology 8

A Closer Look

2012-05-30

<travels> <country> <name countryid="hungary">Hungary</name> <tour> <city>Budapest</city> <sight>Buda Castle</sight> <sight>Vajdahunyad Castle</sight> <sight>Statue of Anonymus</sight> </tour> </country></travels>

root tag

attribute

mixed tags

Display Without XSL Tag

If we display an XML file without any style information, we just get the “tree” of our data Good check that all of the

tags are right You get the same view if

you look at a raw RSS feed


XSL: eXtensible Style Language

Like CSS, XSL gives style information, but it does it using XML!

The process


XML Database

XML Stylesheet

Transformer applies

XSL Templates

Browser renderin

gengine

BrowserWindow

For Building the XSL

Plan the page as if it were XHTML, because it is going to be a list of items in a table:

Black background, sans serif font, gray text, white border


Info for <name> tag sight entry

Flag display here sight entry

…

Info for <name> tag sight entry

Flag display here sight entry

…

The Basic XHTML<html >

<head>

<title>Travelogue</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">

body {background-color: black; color: gray; font-family: arial; }

table {border: solid white 3px; }

</style>

</head>

<body>

<h1>Places I've Traveled</h1>

<table>

XML magic happens here

</table>

</body>

</html>


XHTML with XSL template tags<xsl:template match="travels">

<html >

<head>




body {background-color: black; color: lightgray; font-family: arial; }


</style>

</head>

<body>


<table>


</table>

</body>

</html>

</xsl:template>2012-05-30 Katherine Deibel, Fluency in Information Technology 13

This is creating a template for how the browser should render the <travels></travels> tag in the XML file.

Since <travels></travels> is the root element, its styling makes the overall HTML page.

XHTML with XSL apply tag<xsl:template match="travels">

<html >

<head>






</style>

</head>

<body>


<table>

<xsl:apply-templates/>

XML data goes here

</table>

</body>

</html>

</xsl:template>2012-05-30 Katherine Deibel, Fluency in Information Technology 14

<xsl:apply-templates/> tells the browser to apply stylings to any XML tags within the current one (i.e., <travels>)

Tell the Browser It's Really XML<?xml version="1.0" encoding="utf-8" ?>

<xsl:stylesheet version="1.0” xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="travels">

<html >

<head>






</style>

</head>

<body>


<table>

<xsl:apply-templates/>


</table>

</body>

</html>

</xsl:template>


Fill In Other Templates One template for every

tag used Country (table row)

Name (second-level header)

Sight (one per line)

City (third-level header)

<xsl:apply-templates/>Means fill in the contents of that XML tag


<xsl:template match="country"> <tr> <xsl:apply-templates/> </tr></xsl:template>

<xsl:template match="name"> <td style="text-align: center"> <h2><xsl:apply-templates/></h2> </td></xsl:template>

<xsl:template match="tour"> <td> <xsl:apply-templates/> </td></xsl:template>

<xsl:template match="sight"> <xsl:apply-templates/><br/></xsl:template>

<xsl:template match="sight"> <h3><xsl:apply-templates/></h3></xsl:template>

Linking XML and XSL

Have to add one line to the XML file

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="travelSS.xsl"?>


What it produces

We see the Basic HTML structure

Table format

Text styling All of this was from

an XML file!!!


We forgot the image

We use the country id attribute to create the filename and alt tag To access the value of an attribute, we

Use the @ symbol


<xsl:template match="name"> <td style="text-align: center"> <h2><xsl:apply-templates/></h2> <img src="{concat(@countryid,'-flag.png')}" alt="{concat('flag of ',@countryid)}"/> </td></xsl:template>

The final product


Of course, the image files are found where the paths indicate

Was all that work worth it?

If we want to update the travelogue, we need only to update the XML file I've also visited Canada

Let's add that now What we just saw

We only entered information

We did not have to put in the style


Summary

XML is extremely versatile for organizing your data however you like with tags you make up

Using XSL you can format your database as if it were a Web page familiar and easy

Once an organization is setup it is trivial to add new information


fluency with information technology info100 and cse100 katherine deibel 2012-05-30katherine deibel,...

Documents