Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-30Katherine Deibel,...
-
Upload
caren-gilmore -
Category
Documents
-
view
224 -
download
0
Transcript of 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)
2012-05-30 Katherine Deibel, Fluency in Information Technology 2
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
2012-05-30 Katherine Deibel, Fluency in Information Technology 3
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
2012-05-30 Katherine Deibel, Fluency in Information Technology 4
A Travelogue
Chapter 17 presents the iDiary We will do something much simpler:
a travelogue of places I've visited
2012-05-30 Katherine Deibel, Fluency in Information Technology 5
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
2012-05-30 Katherine Deibel, Fluency in Information Technology 6
Building with XML Tags
XML does not have a fixed set of tags
You create your own: <travels>
<country>
<name>
<tour>
<city>
<sight>
2012-05-30 Katherine Deibel, Fluency in Information Technology 7
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
2012-05-30 Katherine Deibel, Fluency in Information Technology 9
XSL: eXtensible Style Language
Like CSS, XSL gives style information, but it does it using XML!
The process
2012-05-30 Katherine Deibel, Fluency in Information Technology 10
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-05-30 Katherine Deibel, Fluency in Information Technology 11
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-05-30 Katherine Deibel, Fluency in Information Technology 12
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-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>
<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-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>
<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-05-30 Katherine Deibel, Fluency in Information Technology 15
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
2012-05-30 Katherine Deibel, Fluency in Information Technology 16
<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"?>
2012-05-30 Katherine Deibel, Fluency in Information Technology 17
What it produces
We see the Basic HTML structure
Table format
Text styling All of this was from
an XML file!!!
2012-05-30 Katherine Deibel, Fluency in Information Technology 18
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-05-30 Katherine Deibel, Fluency in Information Technology 19
<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
2012-05-30 Katherine Deibel, Fluency in Information Technology 20
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
2012-05-30 Katherine Deibel, Fluency in Information Technology 21
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-05-30 Katherine Deibel, Fluency in Information Technology 22