Aufgabe 7: JSON & AJAX, kleiner REST-WebService (12 Punkte)

Kontext

Das Lauftagebuch der letzten beiden Aufgaben soll nun leichter und vielseitiger nutzbar gemacht werden. Es gelten die Eigenschaften des Lauftagebuchs, wie sie in Aufgabe 6 beschrieben sind.

Die neuen Features werden sein:

• Aufruf eines Läufer-Profils durch Namenseingabe mit Autovervollständigung
• Export-Schnittstelle für das Lauftagebuch einzelner Läufer in den Formaten JSON und CSV.

1. Controller für Auto-Vervollständigung

Definieren Sie eine Route und implementieren Sie einen Controller, der in der Läuferdatenbank nach passenden Namen sucht. Das URL-Format ist Ihnen überlassen.

Beispiele (vorhandene Läufer: Peter, Petra, Paul, Maria, Jakob, Claude, Klaus, Marta):

Anfrage	Controller
GET /search/pet	Zeige Namen mit "pet", also Peter und Petra
GET /search/mar	Zeige Namen mit "mar", also Maria und Marta
GET /search/lau	Zeige Namen mit "lau", also Claude und Klaus
GET /search/fra	Zeige Namen mit "fra", also keine

Der Controller soll folgendes Verhalten haben:

• In den "Suchbegriffen" soll nur alphanumerische Zeichen (A-Z und 0-9) unterstützt werden. Eingaben, die Sonderzeichen (wie z.B. "*") enthalten, sollen ignoriert oder korrigiert werden (das ist Ihnen überlassen).
• Suchanfragen sollen nur für Eingaben mit mindestens 3 Zeichen gestartet werden.
• Es soll maximal 10 Treffer angezeigt werden.

Die Ausgabe dürfen Sie zunächst für Testzwecke gestalten wie Sie wollen. Für die weitere Aufgabe soll der Controller aber immer gültiges JSON liefern.

2. Läufereingabe ohne AJAX

Erstellen Sie ein Formular mit einem einzelnen Textfeld, in das der Nutzer einen existierenden Nutzernamen eintragen kann (z.B. "Petra") und dann beim Submit auf das entsprechende Läufer-Profil weitergeleitet wird.

Zusätzlich soll der zugehörige Controller das folgende Verhalten zeigen:

• Existiert kein Läufer für den angegebenen Namen, soll ein HTTP-Status 404 geliefert werden.
• Ebenso, falls kein Name eingegeben wurde.

Das URL-Format ist wiederum Ihnen überlassen.

Beispiele (gleiche Läufernamen wie oben):

Anfrage	Controller
POST /go mit name=Peter im Body	Weiterleitung zu Profil von Peter (z.B. /runner/42)
POST /go mit name=Pete im Body	HTTP-Status 404
POST /go mit name= im Body	HTTP-Status 404

3. Läufereingabe mit AJAX

Aus Nutzersicht soll ab der Eingabe des dritten Zeichens in das eben erstellte Textfeld darunter eine Liste mit Namensvorschlägen angezeigt werden, die vom Controller aus der ersten Teilaufgabe stammen. Aus dieser Liste soll der Nutzer einen Eintrag (also den Namen eines existierenden Läufers) auswählen können, wodurch dieser in das Textfeld eingetragen wird. Es ist Ihnen überlassen, ob das Formular sofort bei einer solchen Auswahl, oder immer nur manuell durch den Nutzer submittet wird.

Wenn Sie es sich eher einfach machen wollen, können z.B. von jQuery ein vorgefertigtes AutoComplete-Widget benutzen: https://jqueryui.com/autocomplete/#remote. Mit einem solchen Widget sind Sie in der optischen und funktionalen Gestaltung, als auch beim URL- und Datenformat etwas weniger frei.

Wenn Sie eine Fingerübung in HTML, JavaScript, und CSS machen wolle, die nicht super-schwer ist, können Sie die Autovervollständigung auch komplett selbst implementieren. Falls Sie sich dazu entschließen, hier ein paar Hinweise dafür:

• Schreiben Sie einen Event-Listener in JavaScript, der auf Tastatureingaben im eben erstellten Eingabefeld reagiert und einen AJAX-Request (XmlHttpRequest) mit der bisherigen Eingabe an den Controller aus der ersten Teilaufgabe schickt.
• In der Behandlung der Antwort (die ja ein JavaScript-Objekt in JSON-Notation sein sollte) müssen Sie dann HTML-Markup erzeugen (oder bei Folge-Anfragen: den DOM verändern), sodass die Namensvorschläge angezeigt werden werden.
• Typischerweise nimmt man dafür eine Liste (<ul>) und sorgt mit CSS für eine ansprechende Darstellung.
• Die Listen-Elemente brauchen wiederum einen Event-Listener, damit ein Klick den zugehörigen Wert in die Textbox einträgt.

4. Einfache REST-API für Daten-Export

Definieren Sie eine Route unter Verwendung von Symfonys _format-Variable und implementieren Sie einen zugehörigen Controller, der die Laufdaten eines beliebigen Läufers als JSON und CSV ausliefert.

Beispiel (gleiche Läufer wie oben):

Anfrage	Controller
GET /runner/42/diary.json	Anzeige von JSON mit Peters Lauftagebuch
GET /runner/42/diary.csv	Peters Lauftagebuch als CSV-Datei zum Download

Der Controller soll folgendes Verhalten haben:

• Lauftagebuchexport soll nur für eingeloggte Nutzer möglich sein. Nicht-authentisierte Nutzer sollen zur Anmeldung weitergeleitet werden.
• Der JSON-Export soll an den Browser als JSON ausgeliefert werden (Stichwort Content-Type).
  • Tipp: Symfony bietet dafür Unterstützung.
• Der CSV-Export soll im Browser ein "Datei speichern als ..."-Dialog auslösen. (Neben dem Content-Type ist hier auch das HTTP-Header-Feld Content-Disposition nötig.)
  • Tipp: Symfony hat auch hierfür Unterstützung.

Es ist Ihnen überlassen, inwieweit Sie die jeweiligen Ausgaben direkt im Controller erzeugen, oder dafür Twig-Templates verwenden.