Praktikum Internet-Werkzeuge
			Aufgaben  Dokus  Links

Aufgabe 2: Struktur des Schwarzen Bretts

Heute fangt Ihr an, den ersten Bereich Eures Portals zu realisieren: Das Schwarze Brett.

Der mittelfristige Plan

Ziel des ersten Teils des Praktikums ist die Realisierung eines Schwarzen Bretts mithilfe von serverseitigen Skripten. Dazu sollt Ihr einige geeignete Seiten in XHTML entwerfen, über die Benutzer auf die Inhalte des Bretts zugreifen können.

Entwurf einer (Zugriffs-)Struktur

Es ist sicher nicht sinnvoll, die gesamte Funktionalität auf eine Seite zu packen. Überlegt Euch eine Struktur von Seiten (und auch die Links dazwischen), die folgende Aufgaben erfüllen sollen:

• Hilfeseite, zur Erläuterung der Funktionen und der Benutzung
• Einen neuen Beitrag schreiben. Hier sollen folgende Eingaben möglich sein:
• Vorname, Nachname und EMail-Adresse des Autors
• Titel des Beitrags
• Typ des Beitrages (z.B. suche, biete und tausche)
• (eventuell) gewünschter Preis
• (eventuell) Bild für den Beitrag (URL eines zu verlinkenden Bilds)
• Auswahl einer Kategorie aus einer Liste von Kategorien (überlegt Euch geeignete Kategorien)
• Beitragstext
• Nach Beiträgen suchen. Hier sollen unterschiedliche Abfragemöglichkeiten vorgesehen werden:
• Suche nach Stichwort in Beitragstexten
• Die Nachrichten der letzten n Tage
• Auswahl des Nachrichtentyps (s. o.)
• Auswahl beliebig vieler Kategorien
• Unterschiedliche (sinnvolle) Sortierungsmöglichkeiten
• Im Moment kann noch keine Liste der Beiträge generiert werden, da diese ja noch gar nicht gespeichert werden. Erstellt trotzdem schon einmal eine Seite, die veranschaulicht, wie eine solche Liste aussehen könnte, also welche Informationen dort wie auftauchen sollen.

Falls Ihr das letzte Woche nicht schon gemacht habt, fügt Eurem Portal-Layout an geeigneter Stelle (z.B. Kopf oder Fuß) einen Link auf das Schwarze Brett hinzu (und am Besten auch gleich Links für die Artikelverwaltung und den Chat).

Macht durch geeignete Effekte (z. B. Hervorheben des entsprechenden Links) kenntlich, in welchem Bereich des Portals (evtl. auch des Schwarzen Bretts) der Benutzer sich gerade befindet.

Natürlich sollten alle Seiten des Schwarzen Bretts dem Layout Eures Portals entsprechend gestaltet sein.

Umsetzung der Forms

Die Forms sollen ihre Daten zunächst an ein CGI-Skript auf dem Server schicken, damit Ihr sehen könnt, dass es funktioniert. Den Mechanismus, der die Beiträge in einer Datenbank speichert, werdet Ihr erst später mit PHP programmieren.

Zum Testen der Forms steht folgendes Skript zur Verfügung, das Ihr als ACTION-URL (GET oder POST) des Forms verwenden solltet:
http://print-www.informatik.uni-hamburg.de/test/forms.phtml.

Ein Beispielaufruf: http://print-www.informatik.uni-hamburg.de/test/forms.phtml?name=hans-peter

Einen Überblick über die Möglichkeiten von Forms gibt unsere Beispielseite zu Forms.

Noch ein Hinweis: Wenn Ihr Eingabefelder mit mehreren Alternativen benutzen wollt (Checkboxen oder Listen, die mehrere Auswahlen ermöglichen), dann müsst Ihr an den Namen der Formvariable ein [] anhängen, damit die Eingaben auch angezeigt werden!

Bonusaufgaben

• Gebt das zu einem Beitrag gehörende Bild nicht über eine URL an, sondern erlaubt dem Benutzer, eine lokal gespeicherte Bilddatei über einen Dateirequester auszuwählen. (1 Punkt)
• Verwendet zum Abschicken der Forms nicht einfache Text-Buttons, sondern auch Buttons mit Bildern. (1 Punkt)
• Seit HTML 4.0 lassen sich in Forms Gruppierungen für die enthaltenen Elemente angeben. Gruppiert das Form, dass zum Schreiben von Beträgen verwendet werden soll, in Unterbereiche (z.B. Autordaten, Beitragsdaten, Beitragstext). (1 Punkt)

Überprüfung der Korrektheit

Überprüft Eure Seiten auch mit XHTML-Checker auf Korrektheit:
Validator des W3C

Am besten den "XHTML Validator Button" in den Fuß wie folgt eingeben:

    <p>
      <a href="http://validator.w3.org/check?uri=referer">
          <img src="http://www.w3.org/Icons/valid-xhtml11"
          alt="Valid XHTML 1.1!" height="31" width="88" /></a>
    </p>
    

Viel Spaß!