Embed Size (px)
DESCRIPTION
INFO100 and CSE100. Fluency with Information Technology. Databases and XML The black sheep of databases… no relations… get it..? black sheep… no relations… ha ha …. Katherine Deibel. Announcements. Course Evaluations You will do evaluations for your TA on Wednesday/Thursday this week - PowerPoint PPT Presentation
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-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 TagIf 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
