Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp09/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2009 - Gruppe 3 - Generierung Menue

Generierungs des Menüs

von F.Hebestreit, P. Middendorf, D.Künne

Motivation

Ein Benutzer kann sowohl mehr als eine Rolle haben als auch mehr als eine Veranstaltung besuchen. Jemand könnte z.B. ein Seminar besuchen und gleichzeitig Tutor in einer Vorlesung sein. In seiner Rolle als Tutor hat er aber andere Aktionen zur Verfügung als im Seminar. Man muss also in Rollen und Vorlesungen komfortabel und schnell navigieren können und es soll jeweils eine Liste von den Dingen angezeigt werden, die für die aktuelle Auswahl relevant ist.

Man müsste also zwei Formulare abschicken, im ersten Schritt wählt man seine Rolle. Daraufhin errechnet der Server, in welchen Vorlesungen der User in der Rolle eingetragen ist. Im zweiten Schritt wird die Vorlesung ausgewählt und der Server berechnet, welche Aktionen der User ausführen kann.

Umsetzung

#Auswahl einer Vorlesung
Abb. 1: Vorlesung ist ausgewählt
#Auswahl eines Seminars
Abb. 2: Seminar ist ausgewählt

Um Zeit und Traffic zu sparen, werden die oben beschriebenen zwei Formulare zu einem einzigen, dynamischen Formular zusammengefasst. Hierzu wird AJAX eingesetzt. Nach dem Einloggen auf der Seite wird dem Benutzer eine Liste seiner Rollen mitgegeben. Diese werden in ein Auswahlfeld eingefügt. Wählt der Benutzer eine bestimmte Rolle aus, wird mit Hilfe von Javascript eine Anfrage an den Server gesendet, die dazugehören Vorlesungen zu schicken. Als Antwort schickt der Server eine XML-Datei, die beispielsweise so aussieht

<vorlesungen>
  <vorlesung>
    <verid>1</verid>
    <typ>Seminar</typ>
    <titel>Backen ohne Fett</titel>
  </vorlesung>
  <vorlesung>
    <verid>2</verid>
    <typ>Vorlesung</typ>
    <titel>Die Zahl 42</titel>
  </vorlesung>
</vorlesungen>

Der Code zur Verarbeitung dieser XML-Datei sieht vereinfacht so aus:

// In "meinSelect" ist ab sofort das Auswahlfeld für die Vorlesungen enthalten.
var meinSelect = document.getElementById(formular).verid.options;
// Lösche alle bisherigen Feldeinträge
loescheAlleSelect(document.getElementById(formular).verid);
 
// Hole alle Tags mit Namen "vorlesung". getElementsByTagName liefert diese als Array zurück.
var vorlesungen = doc.getElementsByTagName("vorlesung");
 
// In dem Auswahlfeld werden nur Titel und die VerID gespeichert, 
// wir müssen uns den Typ der Veranstaltung separat merken (den 
// brauchen wir, um die verfügbaren Aktionen dynamisch zu generieren)
veranstaltungsListe = new Array();
 
var gueltig = false;
for (var i = 0; i < vorlesungen.length; ++i)
{
  veranstaltungsListe.push(
    vorlesungen[i].getElementsByTagName("typ")[0].childNodes[0].nodeValue);
 
  // Hier wird die Vorlesung dem Dropdown hinzugefügt. Angezeigt wird der Titel, dahinter
  // steckt die VerID
  meinSelect[meinSelect.length] = 
    new Option(
      vorlesungen[i].getElementsByTagName("titel")[0].childNodes[0].nodeValue,
      vorlesungen[i].getElementsByTagName("verid")[0].childNodes[0].nodeValue);
 
  // in "aktuelleVerID" steckt die vorher ausgewählte VerID, siehe unten für eine Erklärung
  if (vorlesungen[i].getElementsByTagName("verid")[0].childNodes[0].nodeValue == aktuelleVerID)
  {
    meinSelect.selectedIndex = meinSelect.length-1;
    gueltig = true;
  }
}
 
if (!gueltig)
{
  meinSelect.selectedIndex = 0;
  verid = (meinSelect.length > 0 ? meinSelect[0].value : -1)
}
 
// Hier wird anhand der aktuellen Auswahl das Menü mit den Aktionen generiert.    
generiereMenue();

Wird eine bestimmte Veranstaltung ausgewählt, wird wieder generiereMenue() aufgerufen, da sich die Aktionen evtl. geändert haben (beim Wechsel von Seminar zu Vorlesung beispielsweise).

Lädt man die Seite neu oder klickt man auf einen Aktionslink, soll im Menü die letzte Rolle-Vorlesung-Kombination erhalten bleiben. Dies kann man entweder dadurch erreichen, dass man diese Daten immer in der URL weitergibt, oder man speichert sie einfach in einem Cookie. Cookies werden ohnehin benötigt, da man sich ohne sie nicht einloggen kann.

Laden des Menüs

Beim Laden des Menüs wird also die Variable aktuelleVerID, sowie aktuelleRolle mit den Werten aus dem Cookie gefüllt, falls schon einer vorhanden ist. Ansonsten wird aktuelleRolle mit der ersten Rolle gefüllt, die in der Liste eingetragen ist. Anhand aktuelleRolle wird dann die Vorlesungsliste beschafft und (siehe Code oben) überprüft, ob aktuelleVerID einen gültigen Wert besitzt (ein Benutzer könnte aus einer Veranstaltung ausgetragen sein, obwohl sein Cookie noch die VerID davon gespeichert hat). Ansonsten wird hier analog die erste Veranstaltung aus der Liste ausgewählt. Diese beiden Werte werden dann im Cookie "verewigt".

Aktionsmenü

Das Aktionsmenü wird nicht vom Server generiert, sondern ist statisch im Client (genauer, im Template menue.tpl) kodiert. Es spricht allerdings nichts dagegen, als Verbesserung wieder AJAX zu nutzen und sich das Menü vom Server als XML-Datei zu beschaffen. Als Datenstruktur für die Aktionen wird ein mehrdimensionales, assoziatives Array verwendet. Es wird hier ein Rollenstring verbunden mit einem Array von Aktionen. Eine Aktion besteht wiederum aus einem Veranstaltungstyp (Seminar, Vorlesung) und einem Link. Im Typ kann auch noch das Flag "Überschrift" übergeben werden um anzudeuten, dass dieser Menüeintrag später nicht eingerückt werden soll, sondern eben als Überschrift dient. Das Studendenmenü hat z.B. folgende Form:

// Das wird an die URL angehängt, damit die Controller damit arbeiten können.
var optionen = "&amp;verid="+verid+"&amp;rolle="+rolle;
 
var ar = new Array();
ar["Tutor"] = new Array();
ar["Dozent"] = new Array();
ar["Student"] = new Array();
ar["Uebungsleiter"] = new Array();
 
// ...
 
ar["Student"].push(
  new Array(
    "Vorlesung,Ueberschrift",
    "<strong>Veranstaltungen</strong>"));
ar["Student"].push(
  new Array(
    "Vorlesung",
    "<a href=\"index.php?controller=veranstaltung&amp;action=show&amp;"+optionen+"\">Veranstaltung ansehen</a>"));
// hier weitere Einträge

Und durchlaufen wird das Array wie folgt:

for (var i = ar[v].length-1; i >= 0; --i)
{
  // In x befindet sich danach der Link für die aktuelle Aktion und die aktuelle Rolle
  var x = ar[v][i][1];
  // Den Veranstaltungstyp splitten wir am Komma
  var splitted = ar[v][i][0].split(',');
 
  // Hat man hier nur ein Element, also nur einen Veranstaltungstyp, keine Überschrift, dann
  // muss hier eine Einrückung stattfinden
  if (splitted.length == 1)
    x = "<ul style=\"list-style:none\"><li>"+x+"</li></ul>";
 
  // Füge dies dem Menü hinzu, wenn der Veranstaltungstyp stimmt.
  if (splitted[0] == veranstaltungsTyp)
    fuegeLiAn(
      container,
      x);
}


Page last modified on August 24, 2009, at 11:08 AM