XML und Atom-Feeds

Aufgabe 1: XML sowie DTD schreiben und XML einlesen

Gegeben sei die folgende DTD Stundenplan.dtd für Stundenplandateien:

<!ELEMENT Stundenplan (Tag*)>
<!ELEMENT Tag (Fach*)>
<!ELEMENT Fach (Name, Ort, Zeit)>
<!ELEMENT Name (#PCDATA)>
<!ELEMENT Ort (#PCDATA)>
<!ELEMENT Zeit EMPTY>
<!ATTLIST Tag Wochentag (Mo|Di|Mi|Do|Fr) #REQUIRED>
<!ATTLIST Zeit Beginn CDATA #REQUIRED>
<!ATTLIST Zeit Ende CDATA #REQUIRED>

Schreiben Sie eine XML-Datei Stundenplan.xml, die die oben angegebene DTD erfüllt und die Daten zu den folgenden Fächern enthält:
```
Fach: Prog, Ort: W1303, Tag: Mi, Beginn: 9:50, Ende: 13:00
Fach: Wahlfach, Ort: W0303, Tag: Mi, Beginn: 14:00, Ende: 17:15
```
Validieren Sie danach die Korrektheit Ihrer XML-Daten. Dies können Sie online mit Truugo oder XML Validation durchführen.

Zu diesem Zweck müssen Sie die DTD-Regeln zusammen mit dem XML-Code im Eingabefenster von z. B. Truugo wie folgt eingeben:
```
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE Stundenplan [
  <!ELEMENT Stundenplan (Tag*)>
  <!ELEMENT Tag (Fach*)>
  <!ELEMENT Fach (Name, Ort, Zeit)>
  <!ELEMENT Name (#PCDATA)>
  <!ELEMENT Ort (#PCDATA)>
  <!ELEMENT Zeit EMPTY>
  <!ATTLIST Tag Wochentag (Mo|Di|Mi|Do|Fr) #REQUIRED>
  <!ATTLIST Zeit Beginn CDATA #REQUIRED>
  <!ATTLIST Zeit Ende CDATA #REQUIRED>
]>

<Stundenplan>
  ...XML-Elemente
</Stundenplan>
```
An Stelle der eingebundenen DTD-Datei wird hier also unter der DOCTYPE-Anweisung direkt der DTD-Code eingefügt, was eine Alternative zum Einbinden einer externen DTD-Datei darstellt. Sie können den in der oben dargestellten Weise erstellten Code direkt über Copy-Paste in das Texteingabefeld von Truugo einfügen. Geprüft werden die XML-Daten unter Truugo durch Drücken auf Validate. Fehler werden auf der rechten Seite unter "Validation result" angezeigt. Unter XML Validation ist der Vorgang entsprechend durchzuführen.
Schreiben Sie JavaScript-Code, in dem die Daten aus der Datei Stundenplan.xml ausgewertet und im Browserfenster in der oben angegebenen Form aufgelistet werden. Es ist nicht erforderlich, hierfür die Datei Stundenplan.xml mittels XMLHttpRequest einzulesen. Es reicht, wenn die XML-Daten in der HTML-Datei zur Aufgabe als XML-Element gespeichert sind. Für die Kundendaten würde ein entsprechendes XML-Element wie folgt aussehen:
```
<xml style="display:none"> 
  <Kundendaten>
    <Kunde>
      <Nachname>Mustermann</Nachname>
      <Vorname>Markus</Vorname>
      <Strasse>Musterstr. 12</Strasse>
      <PLZ>78101</PLZ>
      <Ort>Musterstadt</Ort>
      <Alter>32</Alter>
    </Kunde>
  </Kundendaten>
</xml>
```
Damit sind die XML-Elemente im DOM verfügbar und können mit der Methode getElementsByTagName ausgelesen werden. Durch style="display:none" wird verhindert, dass das XML-Wurzelelement mit seinen Kindelementen zur Darstellung kommt.
- Lesen Sie die Daten aus dem XML-Element mit Hilfe des jeweiligen Elementnamens und den Funktionen getElementsByTagName() und getAttribute() aus.
- Programmieren Sie eine modifizierte Form Ihrer Lösung dergestalt, dass nun der Zugriff auf die Elemente Name, Ort und Zeit mit Hilfe des childNodes-Felds und das Auslesen von Elementattributen mit Hilfe des Felds attributes geschieht.

Schreiben Sie eine neue DTD Stundenplan2.dtd, die durch die folgende XML-Datei erfüllt wird:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE Stundenplan2 SYSTEM "Stundenplan2.dtd"> 
<Stundenplan2>
  <Fach Name="Prog">     
    <Ort>O104</Ort>     
    <Zeit Tag="Mi" Beginn="9:50" Ende="13:00" />   
  </Fach> 
</Stundenplan2>

Orientieren Sie sich dabei an den Vorgaben hinsichtlich #REQUIRED etc. aus Stundenplan.dtd.

Die Korrektheit Ihres Ergebnisses können Sie z. B. wieder mit Truugo prüfen.

Aufgabe 2: Atom-Feeds auswerten

Ziel dieser Übung ist die Darstellung der Inhalte eines Feeds im Atom-Format. Legen Sie zu diesem Zweck in VSCode eine neue HTML-Datei an.

Eine Nachrichtenquelle für Feeds in diesem Format stellt die Tagesschau-Redaktion unter der Adresse www.tagesschau.de/xml/atom/ zur Verfügung.
Geben Sie diese Adresse in einen Webbrowser ein und laden Sie die zugehörende Seite.

Führen Sie dann z. B. unter Firefox oder Chrome folgendes durch: Rechtsklicken Sie in die Seite und wählen Sie "Seitenquelltext anzeigen". Die Seite wird dann in Ihrem Browser im originalen XML-Atom-Format angezeigt. Das Wurzelelement heißt feed und enthält eine Reihe von Einträgen. Allgemein besteht ein Eintrag aus einem entry-Element, welches die Kindelemente title, link, id, updated und summary enthält. Nähere Informationen zum Atom-Format liefert die Spezifikation des Formats.

Ihr JavaScript-Programm soll die gelisteten Feed-Einträge wie folgt darstellen:

Titel des Eintrags als Link, sodass beim Anklicken des Links die entsprechende Informationsseite im Browserfenster geöffnet wird. Hierfür muss der Link-Eintrag des Atom-Feed-Entries zusammen mit dem Title-Eintrag zu einem Link zusammengefügt werden.
Darunter wird die Zusammenfassung bzw. der Inhalt des Summary-Elements eingeblendet.
Darunter schließlich die Datumsangabe aus dem Update-Element. Gefolgt von einer Leerzeile.

Beispiel für einen Eintrag in der Liste:

Zeitgeschichte: Die Tagesschau vor 20 Jahren
Wie sah die Welt vor 20 Jahren aus? Welche Themen bestimmten die
politische Debatte?  Wer war damals wichtig? Die Tagesschau bietet
einen wertvollen Einblick in die jüngere Zeitgeschichte. 
Tagesschau.de dokumentiert sie Tag für Tag mit den 20-Uhr-Ausgaben.
2022-04-12T11:50:29.974+02:00

Orientieren Sie sich beim Schreiben Ihres Programmcodes an den Beispielen auf den Vorlesungsfolien.

Wenn Sie das Parsen der XML-Atom-Daten zunächst ohne Ladevorgang mit einer lokalen Datei ausprobieren möchten, können Sie entweder den Inhalt der Quelltextansicht des Tagesschau-Feeds in einer neuen Datei, z. B. mit dem Namen tagesschau.xml speichern oder die ältere Datei unter diesem Link benutzen. In jedem Fall sollte die Datei für einen einfachen Zugriff in dem gleichen Verzeichnis gespeichert werden, in der die HTML-Datei mit dem Programmcode gespeichert ist.

Sobald Ihre Lösung mit der lokalen Datei läuft, ändern Sie den Aufruf

xmlhttp.open("GET", "tagesschau.xml", true);

xmlhttp.open("GET", "http://www.tagesschau.de/xml/atom/", true);

sodass der Zugriff in Ihrem Programm jetzt nicht mehr auf Ihre lokale Datei, sondern direkt auf die Internetseite der Tagesschau erfolgt.

Laden Sie danach die Seite neu im Browser und prüfen Sie, ob der Zugriff funktioniert hat.