1. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley A Case Study in Database Organization The iDiary Database lawrence snyder c h a p t e r 17

2. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-2 Thinking About a Personal Database Regular Versus Irregular Data –The iDiary will be an irregular data collection Record things we find interesting in our daily lives –Text, photos, URLs, animations, poems, videos, etc. –Use XML to specify metadata The database will be an XML tree Use the Identity, Affinity, and Collection rules –Organize the database by date The iDiary added to each day

3. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-3 Thinking About a Personal Database (cont'd) Physical Versus Logical –The XML tree will be our physical database –The logical database is our view of the iDiary –Use XSL to pick out data we want to display XSL description converts the data to HTML XSL description act like a query with a relational database

4. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-4 The iDiary –Build the iDiary database and its stylesheet display together and incrementally –Step-by-step approach Easier to debug Mirrors how databases are enhanced over time Thinking About a Personal Database (cont'd)

5. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-5 The iDiary sample shows that the database will be a long and diverse list of daily entries: science news, book reviews, embedded videos, poetry, pictures, other topics

6. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-6 Preliminary Exercise: Travels DB A warm-up to work out the iDiary design The XML Definition –Entries in the database will be a list of countries –Each will have a name and a tour that contains a list of sights, along with that country's flag Country name sight name... sight name

7. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-7 First line identifies content as XML Make a root tag of XML database saved is a file named travels.xml Direct Check of XML –Can have a browser display our XML tree Preliminary Exercise: Travels DB

8. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-8

9. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-9 Displaying the Travels with XSL Connecting XML with Style –Style information tells the browser how to display a markup language like XML –Style information comes from a companion file with the file extension.xsl –Put in the XML file a line which tells the browser where to find the style information

10. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-10

11. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-11 Displaying the Travels with XSL (cont'd) The Idea of XSL –The.xsl file contains a series of rules ( templates ) on how to format (using XHTML) the information enclosed in XML tags in the database

12. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-12 XSL Templates –XSL is really just XML with one template for each XML tag, with XHTML for how to display the XML tag … Displaying the Travels with XSL (cont'd)

13. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-13

14. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-14 Creating the Travelogue Display –Each XML tag has a stylistic role to play in the overall creation of the Web page Displaying the Travels with XSL (cont'd)

15. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-15 The tag template Travelogue <meta http-equiv=“Content-type” content=“text/html;charset=ISO-8859- 1”/> body{background-color:black;color:white; font-family:helvetica} Places I’ve Traveled Start of HTML page End of HTML page Process tag content Displaying the Travels with XSL (cont'd)

16. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-16 The Apply Operation –This tag means "now process whatever is inside this XML tag" Displaying the Travels with XSL (cont'd)

17. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-17 Tag Attributes –Use curly braces to put information in paired quotes –@flag refers to the value of the flag attribute of the tag e.g. src=“{@flag}” becomes src=“fr-flag.gif” Displaying the Travels with XSL (cont'd)

18. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-18 Summary of XSL –Browser opens the.xml file, finds a style specification, opens the.xsl file, and begins to process the XML tree –The process: match a template do what needs to be done before processing the enclosed information (generate XHTML into the output) process the enclosed information do what needs to be done after processing the enclosed information (generate more XHTML) consider that tag processed Displaying the Travels with XSL (cont'd)

19. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-19 The iDiary Database An Incremental approach 1.Getting started 2.Creating the first entry (April 26) 3.Thinking about the nature of things 4.Developing tags and templates 5.Critiquing and evaluating the results

20. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-20 Getting Started Creating the XML Database (iDiary.xml) –Decide on root Collection tag ( ) and Affinity tags to enclose daily info ( ) <!--<?xml-stylesheet type=“text/xsl” href=“iDiarySS.xsl”?> --> This is the first entry This is the second entry

21. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-21 Getting Started Creating the XSL Stylesheet (iDiarySS.sxl) –Must recognize the two tags – contains the setup for the Web page (title, heading, italicized comment at the start of the page), table containing all the entries – produces a row for the table:

22. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-22

23. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-23 Creating the First Entry (April 26) Date Tagging –Let date be atomic, pick a date format, and surround with tags (the easy way) Revising an – tagging most interesting thing that day –Add XSL templates in iDiary.xsl for each new XML tag Critiquing the Design –Vertically align the date –Modify the color and font

24. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-24

25. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-25 Thinking About the Nature of Things Recognizing the Need for Specific Tags –Different kinds of data need different tags Link will have a URL specifying it Image will have a source file, dimensions Text will be written into the file Video will have a URL, player dimensions –Each will require different handling, different formatting

26. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-26 Choosing Specific Tags normal text centered text, larger font anchor text, URL as attribute file name, width, height attributes left justified text, as caption groups poem component tags URL for YouTube video embedding tag becomes more of an Affinity tag –Still a sister to the tag, still identifies the most interesting thing, style role continues Thinking About the Nature of Things

27. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-27 Developing Tags and Templates The Fact Tag –Enclosed by the tag The Title Tag –Announces the most interesting thing entry The Link Tag –Specifies a Web link href="{@url}" The Picture Tag –Stand-alone tag; no need for –All information expressed as tag attributes

28. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-28 Developing Tags and Templates (cont'd) The Remark Tag –Captions and labels The Poetry Tags –Title, author, and lines of poetry – assign tags to each The Video Tag –Display a player as an embedded object (YouTube) –Stand-alone tag like the picture tag A Check of the Design

29. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-29

30. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-30

31. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-31

32. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-32 Critiquing and Evaluating the Results Form of Entries –Add breaks and horizontal line to separate entries –Compact entries by limiting the width of the table data Remarks On –New Label tag to bold the information it encloses

33. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-33 Using the iDiary Daily Archiving Photos –Store all photos in a common permanent folder –Putting the path to images in the XML file (versus the XSL file) allows us to make references to images stored in different places, including images stored elsewhere on the Internet

34. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-34 Using the iDiary Daily (cont'd) Hiding Information –Enclose personal information you do not want displayed in tags –Do not include tag in the XSL template for –Information inside the tags will be skipped –Note: Not enclosing information in a tag or tagging it but not providing a template for the tag will result in the content being displayed

35. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-35 Entering Data into the Database –Create a "template" for a new entry in the XML database file –Dummy file names, URLs, widths, etc. –Just copy/paste this "template" and edit into the specific content for the new entry Using the iDiary Daily (cont'd)

36. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-36 Summary XML databases can record irregular data that relational databases cannot An XML database can be directly displayed by opening it in a Web browser Adding a stylesheet line to XML and building templates in XSL allows the XML file to be formatted for display by the browser

37. Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 16-37 Summary 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 selective display of its contents