fluency with information technology info100 and cse100 katherine deibel 2012-03-07katherine deibel,...
TRANSCRIPT
![Page 1: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/1.jpg)
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
![Page 2: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/2.jpg)
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
![Page 3: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/3.jpg)
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
![Page 4: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/4.jpg)
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
![Page 5: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/5.jpg)
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
![Page 6: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/6.jpg)
Building with XML Tags
You pick the tags and enter the data
2012-03-07 Katherine Deibel, Fluency in Information Technology 6
![Page 7: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/7.jpg)
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
![Page 8: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/8.jpg)
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
![Page 9: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/9.jpg)
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
…
![Page 10: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/10.jpg)
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
![Page 11: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/11.jpg)
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
![Page 12: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/12.jpg)
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
![Page 13: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/13.jpg)
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
![Page 14: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/14.jpg)
<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
![Page 15: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/15.jpg)
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
![Page 16: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/16.jpg)
What it produces
2012-03-07 Katherine Deibel, Fluency in Information Technology 16
![Page 17: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/17.jpg)
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>
![Page 18: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/18.jpg)
The final product
Plus some more styling
2012-03-07 Katherine Deibel, Fluency in Information Technology 18
![Page 19: Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-03-07Katherine Deibel, Fluency in Information Technology1](https://reader035.vdocument.in/reader035/viewer/2022062407/56649e0c5503460f94af4d8e/html5/thumbnails/19.jpg)
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