E-Book Startseite Karteikarten-Programm
0

Allgemeines

Nun ist es endlich soweit: Sie haben das Kapitel "XML, XSL und DTD lernen" nun fast absolviert. Der letzte Teil dieses Kapitels sind die Beispiele. Hier in diesem Kapitel haben wir 2 Beispiele erstellt, die die Programmiersprachen XML, XSL und DTD enthalten. Wir wollen diese Beispiele für Sie Schritt für Schritt erklären. Wir machen nur aus diesem Grund eine Schritt für Schritt Anleitung um Ihnen das Programmieren etwas näher zu bringen und dass Sie dafür ein Gefühl bekommen, wie man Webseitenteile im Gesamten programmiert. Bei dem 1. Beispiel handelt es sich um eine Städte-Datenbank, die bereits im XSLT-Bereich des XSL-Kurses verwendet wurde. Das Beispiel wurde mit einer DTD erweitert, sodass das Dokument nun gültig ist. Das 2. Beispiel kommt aus dem XML- und dem DTD-Kurs. Dabei handelt es sich um eine Informationsdatenbank mit den 10 größten Gebäuden der Welt. Im XML-Kurs wurde das Beispiel verwendet, um die Datenstruktur von XML besser zu verstehen. Im DTD-Kurs wurde dem Dokument eine Gültigkeit hinzugefügt. Hier im Haupt-Kurs wird dem Beispiel noch XSLT-Daten angehängt, sodass aus der Struktur ein schönes kleines HTML-Dokument wird.


Städte-Datenbank (erweitert)

Die Städte-Datenbank wurde bereits im XSL-Kurs dieses Hauptkapitels unter den XSLT-Beispielen aufgeführt und ausführlich besprochen. Dieses Beispiel wird nun nur noch mit DTD-Anweisungen gültig gemacht. Dazu wird angegeben, dass das Wurzelelement datenbank ist und unterhalb dieses Elements mehrere Elemente namens stadt vorkommen dürfen. Als nächste Definition wird angegeben, dass unterhalb von den stadt-Elementen, die Elemente name, bundesland, flaeche und einwohnerzahl vorkommen müssen. Diese genannten Elemente bekommen als Definition den Wert #PCDATA - also Zeicheninhalt.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<!DOCTYPE datenbank [
    <!ELEMENT datenbank (stadt)*>
    <!ELEMENT stadt (name, bundesland, flaeche, einwohnerzahl)>
    <!ELEMENT name (#PCDATA)>
    <!ELEMENT bundesland (#PCDATA)>
    <!ELEMENT flaeche (#PCDATA)>
    <!ELEMENT einwohnerzahl (#PCDATA)>
]>
 
<datenbank>
  <stadt>
    <name>Berlin<name>
    <bundesland>Berlin<bundesland>
    <flaeche>891,85 km²<flaeche>
    <einwohnerzahl>3.543.676<einwohnerzahl>
  </stadt>
  <stadt>
    <name>München<name>
    <bundesland>Bayern<bundesland>
    <flaeche>310,43 km²<flaeche>
    <einwohnerzahl>1.378.176<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Hamburg<name>
    <bundesland>Hamburg<bundesland>
    <flaeche>755,26 km²<flaeche>
    <einwohnerzahl>1.813.587<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Frankfurt am Main<name>
    <bundesland>Hessen<bundesland>
    <flaeche>248,31 km²<flaeche>
    <einwohnerzahl>691.518<einwohnerzahl>
  </stadt>
  <stadt>
    <name>Köln<name>
    <bundesland>Nordrhein-Westfalen<bundesland>
    <flaeche>405,17 km²<flaeche>
    <einwohnerzahl>1.017.155<einwohnerzahl>
  </stadt>
</datenbank>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:attribute-set name="titel">
  <xsl:attribute name="style">font-family: Arial; font-size: 27px; font-weight: bold;</xsl:attribute>
  <xsl:attribute name="align">left</xsl:attribute>
</xsl:attribute-set>
 
<xsl:attribute-set name="untertitel">
  <xsl:attribute name="style">font-family: Times; font-size: 20px;</xsl:attribute>
  <xsl:attribute name="align">left</xsl:attribute>
</xsl:attribute-set>
 
<xsl:attribute-set name="text">
  <xsl:attribute name="style">font-family: sans-serif; font-size: 18px;</xsl:attribute>
  <xsl:attribute name="align">justify</xsl:attribute>
</xsl:attribute-set>
 
<xsl:template match="/">
  <html><head></head><body>
    <xsl:element name="h1" use-attribute-set="titel">Die 5 beliebtesten Städte Deutschlands</xsl:element>
    <xsl:apply-templates />
    <xsl:element name="i" use-attribute-set="text">Quelle: de.wikipedia.org - Webseiten-Stand: 17.05.2013</xsl:element>
  </body></html>
</xsl:template>
 
<xsl:template match="datenbank">
  <xsl:for-each select="stadt">
    <xsl:element name="h3" use-attribute-set="untertitel"><xsl:value-of select="name" /></xsl:element>
    <xsl:element name="p" use-attribute-set="text">Die Stadt <xsl:value-of select="name" /> befindet sich
     im Bundesland <xsl:value-of select="bundesland" />. Sie hat eine Fläche von
     <xsl:value-of select="flaeche" /> auf der <xsl:value-of select="einwohnerzahl" />Menschen leben.
    </xsl:element>
    <xsl:element name="br" use-attribute-set="text"></xsl:element>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (HTML-Datei)



Datenbank für die größten 10 Gebäude der Welt (erweitert)

Auch das 2. Beispiel ist nur eine Erweiterung eines anderen Beispiels. Dieses Beispiel stammt ursprünglich vom XML-Kurs. Das Beispiel wurde dann ein 2. Mal im DTD-Kurs verwendet, um dem Dokument Gültigkeit zu geben. Ein 3. und letztes Mal wird es nun hier verwendet. In diesem Beispiel haben wir eine Datenbank der 10 größten Gebäude der Welt. Bisher hat das Dokument jedoch noch keine Stylesheet-Informationen. Im XSL-Dokument notieren wird die Deklaration, das öffnende Wurzelelement und das Haupttemplate. Im Haupttemplate wird das HTML-Grundgerüst notiert. Innerhalb der body-Tags notieren wir ein DIV-Element. Dieses DIV-Element bekommt noch ein paar Style-Anweisungen: feste Breite von 500px und Textausrichtung ist Blocksatz. Innerhalb des DIV-Elements wird eine Überschrift der 1. Ebene notiert. Dieses Element bekommt zusätzlich die Style-Anweisung für die zentrierte Text-Ausrichtung. Darunter folgt der apply-templates-Befehl. Soweit so gut:

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html><head></head><body>
  <div style="width: 500px; text-align: justify;">
    <h1 style="text-align: center;">Datenbank für die 10 größten Gebäude der Welt</div>
    <xsl:apply-templates />
  </div>
  </body></html>
</xsl:template>

Für jedes rang-Element benötigen wir nun weitere Anweisungen. Dazu muss für jedes rang**-Element ein Template erstellt werden. Jedoch ist das Template bspw. für rang1 und rang10 genau das Gleiche, eben nur mit einem anderen Wert im match-Attribut. Innerhalb eines solchen Templates, wird eine h3 Überschrift notiert. Als Inhalt bekommt Sie den Zeicheninhalt des name-Elements zugewiesen. Als nächstes Element folgt ein Absatz (p). Im Absatz ist ein Text notiert, indem immer wieder die Zeicheninhalte von verschiedenen Elementen eingesetzt werden. Nach dem p-Element folgt noch ein manueller Zeilenumbruch. Im Template des rang10 wird das br-Element weggelassen.

<xsl:template match="gebaeude/rang1">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang2">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang3">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang4">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang5">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang6">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang7">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang8">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang9">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang10">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
</xsl:template>
</xsl:stylesheet>

Hier nochmals beide Codes in vollständiger Länge:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="index.xsl" type="text/xsl"?>
 
<!DOCTYPE gebaeude [
    <!ELEMENT gebaeude (rang1, rang2, rang3, rang4, rang5, rang6, rang7, rang8, rang9, rang10)>
    <!ELEMENT rang1 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang2 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang3 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang4 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang5 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang6 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang7 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang8 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang9 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT rang10 (name, stadt, land, hoehe, etagen, baujahr)>
    <!ELEMENT name (#PCDATA)>
    <!ELEMENT stadt (#PCDATA)>
    <!ELEMENT land (#PCDATA)>
    <!ELEMENT hoehe (#PCDATA)>
    <!ELEMENT etagen (#PCDATA)>
    <!ELEMENT baujahr (#PCDATA)>
]>
 
<gebaeude>
  <rang1>
    <name>Burj Khalifa</name>
    <stadt>Duabi</stadt>
    <land>Vereinigte Arabische Emirate</land>
    <hoehe>828</hoehe>
    <etagen>163</etagen>
    <baujahr>2010</baujahr>
  </rang1>
  <rang2>
    <name>Mecca Royal Clock Tower Hotel</name>
    <stadt>Mekka</stadt>
    <land>Saudi-Arabien</land>
    <hoehe>601</hoehe>
    <etagen>95</etagen>
    <baujahr>2012</baujahr>
  </rang2>
  <rang3>
    <name>Taipei 101</name>
    <stadt>Taipei</stadt>
    <land>Republik China</land>
    <hoehe>508</hoehe>
    <etagen>101</etagen>
    <baujahr>2004</baujahr>
  </rang3>
  <rang4>
    <name>Shanghai World Financial Center</name>
    <stadt>Shanghai</stadt>
    <land>China</land>
    <hoehe>492</hoehe>
    <etagen>101</etagen>
    <baujahr>2008</baujahr>
  </rang4>
  <rang5>
    <name>International Commerce Center</name>
    <stadt>Hongkong</stadt>
    <land>Hongkong</land>
    <hoehe>484</hoehe>
    <etagen>108</etagen>
    <baujahr>2010</baujahr>
  </rang5>
  <rang6>
    <name>Petronas Towers</name>
    <stadt>Kuala Lumpur</stadt>
    <land>Malaysia</land>
    <hoehe>452</hoehe>
    <etagen>88</etagen>
    <baujahr>1998</baujahr>
  </rang6>
  <rang7>
    <name>Greenland Square Zifeng Tower</name>
    <stadt>Nanjing</stadt>
    <land>China</land>
    <hoehe>450</hoehe>
    <etagen>89</etagen>
    <baujahr>2010</baujahr>
  </rang7>
  <rang8>
    <name>Willis Tower</name>
    <stadt>Chicago</stadt>
    <land>Vereinigte Staaten</land>
    <hoehe>442</hoehe>
    <etagen>108</etagen>
    <baujahr>1974</baujahr>
  </rang8>
  <rang9>
    <name>Kingkey 100</name>
    <stadt>Shenzhen</stadt>
    <land>China</land>
    <hoehe>441</hoehe>
    <etagen>100</etagen>
    <baujahr>2011</baujahr>
  </rang9>
  <rang10>
    <name>Guangzhou International Finance Center</name>
    <stadt>Guangzhou</stadt>
    <land>China</land>
    <hoehe>438</hoehe>
    <etagen>103</etagen>
    <baujahr>2010</baujahr>
  </rang10>
</gebaeude>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html><head></head><body>
  <div style="width: 500px; text-align: justify;">
    <h1 style="text-align: center;">Datenbank für die 10 größten Gebäude der Welt</div>
    <xsl:apply-templates />
  </div>
  </body></html>
</xsl:template>
 
<xsl:template match="gebaeude/rang1">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang2">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang3">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang4">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang5">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang6">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang7">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang8">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang9">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
  <br />
</xsl:template>
 
<xsl:template match="gebaeude/rang10">
  <h3><xsl:value-of select="name" /></h3>
  <p>Das Gebäude <xsl:value-of select="name" /> ist eine Gebäude in
  <xsl:value-of select="stadt" /> (<xsl:value-of select="name" />).
  Es ist <xsl:value-of select="hoehe" /> Meter hoch, besteht aus
  <xsl:value-of select="etagen" /> und wurde im <xsl:value-of select="baujahr" />
  gebaut.</p>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (HTML-Datei)



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de