A Method for Creating Web Sites

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)
• 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
• lth3gtltfont color"green"gtTo Submitlt/fontgtlt/h3gt
• 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
• ltLINK REL"stylesheet" HREF"dbi1.css"gt
• Advantages?
• Disadvantages?

Original Ex1
New 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
XSL
XSQL
10
The Database

• Titles(ex_num, title)
• DueDates(ex_num, due)
• Contents(ex_num, header, content, section_num)
• Bonuses(ex_num, descr)

11

• lt?xml version"1.0"?gt
• ltexercise xmlnsxsql "urnhttp//www.cs.huji.ac.i
  l/dbi/xsql"gt
• lt!-- exercise title --gt
• ltxsqlQUERYgt
• select title from Titles
• where ex_num_at_exnum
• lt/xsqlQUERYgt
• lt!-- exercise due date --gt
• ltxsqlQUERYgt
• select due from DueDates
• where ex_num_at_exnum
• lt/xsqlQUERYgt

12

• lt!-- exercise contents --gt
• ltxsqlQUERYgt
• select header, content from Contents
• where ex_num_at_exnum
• order by section_num
• lt/xsqlQUERYgt
• lt!-- exercise bonus --gt
• ltxsqlQUERYgt
• select descr from Bonuses
• where ex_num_at_exnum
• lt/xsqlQUERYgt
• lt!-- exercise number --gt
• ltEXNUMgt_at_exnumlt/EXNUMgt
• lt/exercisegt

Example Result
13
Creating the XSL
Example HTML Page
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
lthtmlgt ltheadgt lttitlegtExercise 1 lt/titlegt
ltlink rel"stylesheet" href"dbi3.css"gtlt/he
adgt ltbodygt lth1gtExercise 1 Search
Cachelt/h1gt lth2gtSubmission date
2/6/2003lt/h2gt lth3gtTHE FIRST HEADERlt/h3gt ltpgt Some
content in the first section. lth3gtTHE SECOND
HEADERlt/h3gt ltpgt Some content in the second
section. lth3 class"bonus"gtBONUSESlt/h3gt ltpgtHere
the bonus will come. lt/bodygt lt/htmlgt
Example
16
Creating the XSL (2)

• Use the tidy utility located at
• http//infohound.net/tidy/
• only check "Output XML"
• Output of tidy is on the next slide

17
lthtmlgt ltheadgt ltmeta name"generator"
content"HTML Tidy for Linux/x86" (vers 1st
November 2002), see www.w3.org" /gt
lttitlegtExercise 1lt/titlegt ltlink
type"text/css" rel"stylesheet" href"dbi3.css"
/gt lt/headgt ltbodygt lth1gtExercise 1 Search
Cachelt/h1gt lth2gtSubmission date
2/6/2003lt/h2gt lth3gtTHE FIRST HEADERlt/h3gt
ltpgtSome content in the first section.lt/pgt
lth3gtTHE SECOND HEADERlt/h3gt ltpgtSome content in
the second section.lt/pgt lth3
class"bonus"gtBONUSESlt/h3gt ltpgtHere the bonus
will come.lt/pgt lt/bodygt lt/htmlgt
18
Creating a Static Stylesheet

• Make your XML into a stylesheet by surrounding it
  by
• ltxslstylesheet version"1.0" xmlnsxsl"http//ww
  w.w3.org/1999/XSL/Transform"gt
• ltxsloutput method"html" indent"yes"/gt
• ltxsltemplate match"/"gt
• lt!-- the xml file contents goes in here
  --gt
• lt/xsltemplategt
• lt/xslstylesheetgt
• 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
• lth1gtExercise 1 Search Cachelt/h1gt
• lth1gtExercise ltxslvalue-of select"//EXNUM"/gt
  ltxslvalue-of select"//TITLE"gt lt/h1gt

20
Making the Stylesheet Dynamic (2)

• Sections
• lth3gtTHE FIRST HEADERlt/h3gt ltpgtSome content in the
  first section.lt/pgt
• ltxslfor-each select"//ROWHEADER"gt
  lth3gtltxslvalue-of select"HEADER"/gtlt/h3gt
  ltpgtltxslvalue-of select"CONTENT"/gtlt/pgt
  lt/xslfor-eachgt

21
Making the Stylesheet Dynamic (3)

• Bonus
• lth3 class"bonus"gtBONUSESlt/h3gt
• ltpgtHere the bonus will come.lt/pgt
• ltxslif test"//DESCR"gt
• lth3 class"bonus"gtBONUSESlt/h3gt
• ltpgtltxslvalue-of disable-output-escaping"yes"
  select"//DESCR"/gtlt/pgt
• lt/xslifgt

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