Embed Size (px)
Citation preview
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-03-07 Katherine Deibel, Fluency in Information Technology 1
An XML Database
XML is an extremely versatile tool. Today, we show how to use it
effectively for your own data.
2012-03-07 Katherine Deibel, Fluency in Information Technology 2
© Lawrence Snyder 2004
Overall Idea
Build a database using XML of personally interesting data Chapter 17 shows the iDiary, a collection
of the most interesting stuff Develop an XSL description for its
formatting Display the XML using a browser and
it will create a web page display of your database
2012-03-07 Katherine Deibel, Fluency in Information Technology 3
Target Result
Instead of the iDiary from chapter 17, we will instead present a similar idea: a basic travelogue
2012-03-07 Katherine Deibel, Fluency in Information Technology 4
Decide On The Data
The travel log will give data for each country visited as Country Name
Country’s Flag
Sights visited That series of countries forms a list
The sights inside form a sublist
2012-03-07 Katherine Deibel, Fluency in Information Technology 5
Building with XML Tags
You pick the tags and enter the data
2012-03-07 Katherine Deibel, Fluency in Information Technology 6
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
2012-03-07 Katherine Deibel, Fluency in Information Technology 7
XSL: eXtensible Style Language
Like CSS, XSL gives style information, but it does it using XML!
The process
2012-03-07 Katherine Deibel, Fluency in Information Technology 8
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
2012-03-07 Katherine Deibel, Fluency in Information Technology 9
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>
2012-03-07 Katherine Deibel, Fluency in Information Technology 10
XHTML with XSL template tags<xsl:template match="travels">
<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: lightgray; 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>
</xsl:template>2012-03-07 Katherine Deibel, Fluency in Information Technology 11
XHTML with XSL apply tag<xsl:template match="travels">
<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: lightgray; font-family: arial; }
table {border: solid white 3px; }
</style>
</head>
<body>
<h1>Places I've Traveled</h1>
<table>
<xsl:apply-templates/>
XML data goes here
</table>
</body>
</html>
</xsl:template>2012-03-07 Katherine Deibel, Fluency in Information Technology 12
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>
<title>Travelogue</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {background-color: black; color: lightgray; font-family: arial; }
table {border: solid white 3px; }
</style>
</head>
<body>
<h1>Places I've Traveled</h1>
<table>
<xsl:apply-templates/>
XML magic happens here
</table>
</body>
</html>
</xsl:template>
2012-03-07 Katherine Deibel, Fluency in Information Technology 13
<xsl:template match="country"> <tr> <xsl:apply-templates/> </tr></xsl:template>
<xsl:template match="name"> <td style="text-align: center"> <xsl:apply-templates/><br/> </td></xsl:template>
<xsl:template match="tour"> <td> <xsl:apply-templates/> </td></xsl:template>
<xsl:template match="sight"> <br/><xsl:apply-templates/></xsl:template>
Fill In Other Templates
One template for every tag used Country
Name
Tour
Sight <xsl:apply-templates/>
Means fill in the contents of that XML tag
2012-03-07 Katherine Deibel, Fluency in Information Technology 14
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"?>
2012-03-07 Katherine Deibel, Fluency in Information Technology 15
What it produces
2012-03-07 Katherine Deibel, Fluency in Information Technology 16
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
2012-03-07 Katherine Deibel, Fluency in Information Technology 17
<xsl:template match="name"> <td style="text-align: center"> <xsl:apply-templates/><br/> <img src="{concat(@countryid,'-flag.png')}" alt="{concat('flag of ',@countryid)}"/> </td></xsl:template>
The final product
Plus some more styling
2012-03-07 Katherine Deibel, Fluency in Information Technology 18
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
2012-03-07 Katherine Deibel, Fluency in Information Technology 19
