1. Fluency with Information Technology
7th Edition
Chapter 16
A Case Study in Database Organization

2. Learning Objectives
1.1 Describe how to express metadata using XML 1.2 Explain the relationship between XML and XSL 1.3 Demonstrate the incremental creation of a database 1.4 Explain the relationship between tags and templates 1.5 Show how to use tag attributes to display images 1.6 State how information is hidden in XML databases

3. Thinking About a Personal Database
Regular Versus Irregular Data
Relational databases can be tables with regular rows, attributes, keys, relationships
Allows for queries where computers do all the organizing and displaying
Data needs to be regular, following a rigid structure imposed on it
Relational databases may be powerful, but very often the information to record isn’t regular

4. 1..1 Creating the iDiary The iDiary is a personal database
Holds information that is found daily
Text, photos, URLs of interesting sites, animations, poems, videos, etc.
Uses XML to specify the metadata
The database will be an XML tree
Will follow the Identity, Affinity, and Collection rules (see Chapter 15)

5. iDiary Preliminaries
Collecting information is not the same as organizing it
The iDiary data needs structure
Organizing the data helps us keep track of what we have, and it also helps the computer display it
For iDiary, the database will be organized using time/date sequences

6. 1.2 Physical Versus Logical Databases
The XML tree is the physical database
The XML tree is not a relational database
The logical database is our view of iDiary, created when we query it
For querying iDiary, Extensible Stylesheet Language (XSL), a tagging language, is used
XSL is an integral part of XML and standardized web databases

7. 1.3 iDiary Preparation Strategy: build incrementally
Start small and add as you go
If the small database is working, and a new feature is added and the database no longer works, then the new feature has an error
This incremental debugging helps limit any given set of problems to resolve
The step-by-step approach mirrors how databases are enhanced over time

8. Building a Practice Database
With the incremental building and debugging steps in mind, we'll start with something smaller than the iDiary
Begin work on a project with a similar organization, but simpler, to get concepts and strategies down

9. Practice: The Travels Database
Building a database of visited countries
Defining the XML
Entries in the database will be a list of countries
Each country will have a name and a tour that contains a list of sights
The name of the file contains the country’s flag as a tag attribute for the <name> tag

10. The XML Definition: Structure
Note: placeholder values are in italics:
<country>
<name flag="file.gif">Country name</name>
<tour>
<sight>Sight name</sight>
</tour>
</country>

11. Creating the XML File Use a standard text editor to enter the data
Add <tags> as you go
The file must have the .xml file extension
Include <?xml version="1.0" encoding="UTF-8"?> as the first line of the file
The root element is the Collective tag enclosing all items in an XML file
<travels> is the root element of this tree
Countries will be listed within that element
Save the file as travels.xml

12. Direct Check of XML We can open the XML file in a browser
The browser uses a style sheet to show information
But won’t find a style sheet
When the xml-stylesheet line is commented out the browser shows the XML tree

13. Direct Check of XML: The Browser Display
Color coding helps check that the structure is right
The display is active, meaning that tags can be opened and closed (click on the minus signs to close or collapse the nested tags)
Closing parts of the database allows us to see some tags without the clutter of other tags

14. Figure 16.3 Direct Check of the travels.xml File
The display of the travels.xml file without a styling (XSL) file specified: (a), the initial display of the full file, and (b) using the active controls (- and +)to hide the tour information.

15. Displaying the Travels with XSL
Style information tells the browser how to display a markup language like XML
Tags are not displayed when using the style information
Instead, information inside the tags is displayed according to the style description

16. Figure 16.2 Displaying travels.xml with XSL
The display of the travels.xml file using the travels.xsl style information.

17. Styling XML with XSL XSL formatting with a .xsl file
File has a series of rules (templates) on how to format the information enclosed in XML tags
One rule or template per tag
Template uses HTML tags for browser display

18. Seeing the Styled XML When the XML file is opened in a browser
The database (XML file) and stylesheet (XSL file) are input to a transformer
The transformer traverses (or “walks”) the XML tree, converting all of the tags to HTML according to the template rules
When the “walk” is finished, the HTML page is displayed

19. Figure 16.4 Transformer: Creating the HTML for Display
Schematic diagram showing how the XML database tree and the XSL style information are merged to produce HTML; the final HTML result is displayed by the browser.

20. XSL Templates
There are five different tags used in the travel database's XML tree
There are five matching templates in the XSL file, one for each tag
The templates have a standard form specifying how to display the tags in HTML
Technically, to display them in the XHTML variant

21. Creating the Travelogue Display
Each <country> will be a row in the table
Tables are for tabular data, not display, but since this is a practice database only for us, we will use this table layout shortcut to get the display we want
There are two items in the first cell of the table: he name and the flag image
The second cells contains a list of items of sights that may been seen on a tour

22. 1.4 Tags and Their Templates
<travels> : Template will set up the page, start and finis, including table tags
<country> : Template will set up a table row
<name> : Template will set up the table data tags for the first cell of a row, place the name, skip to the next line, and place the image of the flag
<tour> : Template will set up the table data tags for the second cell
<sight> : Template will break to a new line and display the sight

23. The apply Operation <xsl:apply-templates/> tag
Singleton tag, included once in each template
"Now process whatever is inside this tag"

24. The apply Operation: Example
<xsl:template match="tour">
<td>
<xsl:apply-templates/>
</td>
</xsl:template>
This is saying: "When encountering a <tour> tag, Place a <td> tag in the accumulating XHTML definition, then process the items found within the <tour> tag (which will be a bunch of <sight> tags); when that processing is over, place the </td> tag to complete the table data specification."

25. Tag Attributes
<xsl:template match="name">
<td style="text-align: center">
<xsl:apply-templates/> <br/>
<img alt="Country flag"/>
</td>
</xsl:template>
Displaying an image requires the <img src . . ./> tag
Note the form, it includes
@flag refers to the value of the tag attribute of the <name> tag which gives the file the name flag.gif
Placing a tag attribute reference in braces in XSL causes the tag attribute’s value from the XML to be placed inside the quotes

26. 1.5 Tag Attributes and Displaying Images
<xsl:template match="name">
<td style="text-align: center">
<xsl:apply-templates/> <br/>
<img alt="Country flag"/>
</td>
</xsl:template>
Displaying an image requires the <img src . . ./> tag
Note the form, it includes
@flag refers to the value of the tag attribute of the <name> tag which gives the file the name flag.gif
Placing a tag attribute reference in braces in XSL causes the tag attribute’s value from the XML to be placed inside the quotes

27. XML to XSL to HTML
In the XML, the value for the flag attribute is "fr-flag.gif". In the XSL, this value is referenced by inside the curly braces. When the XSL template is used to generate HTML, the given attribute value takes the place of the placeholder, resulting in the correct filename being added to the HTML source that is generated.

28. Creating the iDiary Database
Use an incremental approach:
Getting started
Creating a first entry
Thinking about the nature of things
Developing tags and templates

29. Getting Started XML allows us to create the tags and structure we want
We have a design task:
Determine our needs
We will be storing information about things we encounter in our daily lives
Design a structure that meets those needs
A sequence of entries, each with a date and information to be stored

30. Planning iDiary's XML Database and Stylesheet
Decide on the Affinity tag: we'll use <entry>
Decide on the Collection tag: we'll use <idiary>
Create the XSL Stylesheet:
The stylesheet will need to recognize the two tags

31. Creating the First iDiary Entry
Consider what goes inside of each <entry> tag:
Start with the August 11 entry
Since the entry is the entity that is going in the database, we want to include:
The date: use <date>
Content use <cool>, since the content will include cool stuff

32. First Entry: Date Tagging
Deciding about date metadata
Since data in databases is atomic, we cannot refer to the day, month, and year separately if it is written: <date>September 19, 2011</date>
But this might be too much: <date><month>September</month><day>19</day><year>2011</year></date>
We decide to use the first option to keep the XSL simple

33. Creating the XSL for the First Entry
Add templates to the iDiary.xsl file:
<xsl:template match="date">
<li class="date">
<xsl:apply-templates/>
</li>
</xsl:template>
<xsl:template match="cool">
<li class="entry">
The two tags will both be displayed as list items with <li> tags, with different “looks”
Use CSS properties to identify how each <li> tag will look

34. Figure 16.8 iDiary CSS
CSS styling for the two classes of list items: entry and date.

35. Thinking About the Nature of Things
Recognizing the need for specific tags
When considering the design of the XML, notice that we must specify different data for each type of content
Link: needs URL and anchor text
Image: needs source file URL, width
Text: could need bold or italic formatting
Titles: should be large, centered on page
Quotes: presented with colored backgrounds
Poems: need title, author, correct line breaks
Video: needs URL, player dimensions, etc.

36. Developing Tags and Templates for the iDiary
A new tag is assigned to each kind of stored data:
<title>: centered text, larger font
<link>: anchor text; URL as tag attribute
<pic>: singleton tag with filename and width attributes
<quote>: indented text, background color
<poem>: an Affinity tag that groups <p_title>, <poet>, <line>, and <skip> tags
<ytvid>: singleton tag with URL of video

37. Title Tag and Template
The <title> tag announces the most interesting thing entry:
<title> The Digital Diary </title>
The text is centered and uses HTML heading tags to enlarge the font:
<xsl:template-match="title">
<h2>
<xsl:apply-templates/>
</h2>
</xsl:template>

38. Link Tag and Template The <link> tag has two parts
The tag encloses the anchor text
The URL is specified using the tag attribute
<link url="
The stylesheet must place an <a href...> tag and enclose the tag attribute value in quotes
<xsl:template match="link">
<a
<b><xsl:apply-templates/></b>
</a>
</xsl:template>

39. 1.5 Picture Tag and Template
The <pic> tag is a singleton, or standalone tag
The tag encodes the file name of the image and its desired display width
<pic file="im/APODpicOfTheDay.jpg" width="350" />
Since the tag doesn't enclose anything, there is no need for the <xsl:apply-templates> tag to continue processing the content of the enclosed content or tags:
<xsl:template match="pic">
<img alt="Picture of Interesting Thing"/>
</xsl:template>

40. Quote Tag and Template
The <quote> tag encloses text that should be set off and noticeable
<quote>"What are you doing…today."</quote>
Can be styled using the HTML <blockquote> tag
<xsl:template match="quote">
<blockquote style="background-color: #ff9966; color: white; padding: 10px; font-size: larger; font-weight: bold">
<xsl:apply-templates/>
</blockquote>
</xsl:template>

41. Poetry Tags
The <poem> Affinity tag encloses a poem's title <p_title>, author <poet>, and line <line> tags
<poem>
<p_title>Poem Title</p_title>
<poet>Author's Name</poet>
<line>Multiple lines can be added</line>
<line>Anther line of the poem</line>
</poem>

42. Poetry Templates <xsl:template match="p_title"> <h3>
<xsl:apply-templates/>
</h3>
</xsl:template>
<xsl:template match="poet">
<h4><i>
</i></h4>
<xsl:template match="line">
<span
<br/></span>
<xsl:template match="skip">
<br/>

43. Video Tag and Template
The <ytvid> tag allows for providing the YouTube video URL and getting the rest of the formatting through the tempate
<ytvid fle="
The file tag attribute will be the value of src in the styled <iframe> HTML tag
<xsl:template match="ytvid">
<br/><br/>
<iframe width="560" height="315" frameborder="0" allowfullscreen="1">
</iframe>
</xsl:template>
Video embedding techniques vary by provider – do the same analysis for other video providers to see if you can reuse the <ytvid> tags or need to create new ones (and new matching templates)

44. Using the iDiary: Archiving Images
As the page was built, the iDiary.xml and iDiarySS.xsl files and photos have been on the desktop
These need to be placed in a permanent location
You can store the photos in a separate folder inside the site folder containing the two database files
Call it im or img or images, something that helps you remember what that folder contains

45. 1.6 Using the iDiary: Hiding Information
All of the information in the database is displayed
We have to tag everything, and we must provide a template to process each tag
But we don’t have to display it all!

46. Personal Tag and Template
Assume the <personal> tag is inside the <cool> tag
The template for displaying:
<xsl:template match="personal">
<!– Display personal information -->We can add a <personal> tag allows for either displaying or hiding our personal thoughts
<xsl:apply-templates/>
</xsl:template>
The template for hiding:
<!– DO NOT display personal information -->
The template to "do nothing" has to be included, because without it the transformer will add the information to the XHTML file, and it will display

47. Using the iDiary: Adding Data to the Database
Create a "template" for a new entry in the XML database file
Use placeholders or dummy file names for URLs, widths, etc.
To use, copy/paste this "entry template" and add in the specific content for the new entry

48. iDiary: Entry Template
<!--The following tags are available for adding a new entry.
Change the places containing CAPITAL letter placeholders
<entry>
<date> DD MM YYYY </date>
<cool>
<para> <ital></ital> <bold></bold> </para>
<link url=" ANCHOR TEXT </link>
<title> TITLE TEXT </title>
<pic file="IMAGE-NAME.jpg" width="NUMBER-OF-PIXELS" />
<quote> BLOCKQUOTE TEXT </quote>
<poem>
<p_title> POEM TITLE </p_title>
<poet> POET'S NAME </poet>
<line> LINE </line>
<skip/>
</poem>
<ytvid url="
</cool>
</entry>-->

49. Summary From the iDiary case study:
XML databases can record irregular data that relational databases cannot
An XML database can be directly displayed by opening it in a browser
Adding a stylesheet line to XML and building templates in XSL allows the XML file to be attractively formatted using HTML so that it can be displayed by a browser
A complex database can be set up incrementally, adding tags and templates one at a time, and checking that they work as planned
An XML database can optionally hide some of its information, allowing for the selective display of its contents