1 A Method for Creating Web Sites Representation and Management of Data on the Internet

2 An Example Consider the dbi exercise pages (ex1, ex2, ex3)ex1ex2ex3 Observe that they have many common characteristics: –Name of exercise in large and blue –Submission date in red –Headers in green –etc.

3 Creating the Exercise Pages Option 1: Manually add the definitions of font, color, etc., in each place in the exercise: – To Submit Advantages? Disadvantages?

4 Creating the Exercise Pages Option 2: Use CSS to define the style for the page at the start of the page: –body {BACKGROUND: white } –h3 { color: green } –h2 { color: red } –h1 { color: blue } Advantages? Disadvantages?

5 Creating the Exercise Pages Option 3: Use CSS to define the style for the page, and import the CSS at the start of the page: – Advantages? Disadvantages? Original Ex1New Ex1

6 Separating Style from Content Using Option 3, we have separated the content from the style to a large degree: –an HTML expert can create the CSS definitions –we simply import the CSS –the CSS can be used throughout the site –the CSS can be switched

7 Separating Style from Content However, what if we want to change the presentation style for all exercises in a different way? –add a list of links to subsections at top –add a list of grades of students –change ordering of information –etc.

8 Solution Place info about exercises in a database Create an xsql page which –gets as a parameter an exercise number, and –creates an XML page containing information about the exercise Create a style sheet that transforms the resulting XML page into an HTML page that imports the CSS file defined earlier Advantages? Disadvantages?

9 Using XSQL Pages CSS XSQL XSL XML XSQLProcessor + Parameters XML XSQLProcessor + Parameters HTML XSL Processor HTML XSL Processor

10 The Database Titles(ex_num, title) DueDates(ex_num, due) Contents(ex_num, header, content, section_num) Bonuses(ex_num, descr)

11 select title from Titles where select due from DueDates where

12 select header, content from Contents where order by section_num select descr from Bonuses where Example Result

13 Creating the XSL Example HTML Page XML Tidy "Static" XSL Surround with some XSL "Dynamic" XSL Replace static data with XPath

14 Creating the XSL (1) Start with a static html example of a resulting exercise page (this uses a similar CSS to the one before)

15 Exercise 1 Exercise 1: Search Cache Submission date: 2/6/2003 THE FIRST HEADER Some content in the first section. THE SECOND HEADER Some content in the second section. BONUSES Here the bonus will come. Example

16 Creating the XSL (2) Use the tidy utility located at:tidy – –only check "Output XML" Output of tidy is on the next slideOutput

17 <meta name="generator" content="HTML Tidy for Linux/x86" (vers 1st November 2002), see /> Exercise 1 Exercise 1: Search Cache Submission date: 2/6/2003 THE FIRST HEADER Some content in the first section. THE SECOND HEADER Some content in the second section. BONUSES Here the bonus will come.

18 Creating a Static Stylesheet Make your XML into a stylesheet by surrounding it by: – What will be the result if we apply the stylesheet created to an XML file? XSL

19 Making the Stylesheet Dynamic (1) Replace the static information with XSL commands that will retrieve the information from the XML document. Example: – Exercise 1: Search Cache – Exercise :

20 Making the Stylesheet Dynamic (2) Sections: – THE FIRST HEADER Some content in the first section. –

21 Making the Stylesheet Dynamic (3) Bonus: – BONUSES Here the bonus will come. – BONUSES XSL Result

22 Running an XSL Processor Apache has a command line tool for applying an XSL stylesheet to an XML document: java org.apache.xalan.xslt.Process -IN in.xml -XSL style.xsl -OUT out.html You need the following in your CLASSPATH: /usr/local/java/apache/lib/xerces.jar /usr/local/java/apache/lib/xalan.jar