Geburtstage

Aufgabe

Erstellen Sie eine Webanwendung, um die Geburtstage von Freunden zu verfolgen.

Bevor Sie beginnen

Öffnen Sie VS Code entsprechend Ihrem Setup, klicken Sie auf Ihr Terminalfenster und führen Sie cd aus. Die Eingabeaufforderung Ihres Terminalfensters sollte ungefähr wie folgt aussehen:

$

Führen Sie den Befehl

wget https://inf.zone/download/exercises/09/birthdays.zip

aus, um in Ihrem Codespace die ZIP birthdays.zip herunterzuladen.

Nun können Sie

unzip birthdays.zip

ausführen, um die ZIP in den Ordner birthdays zu entpacken.

Sie benötigen die ZIP-Datei nicht mehr, daher können Sie den Befehl

rm birthdays.zip

ausführen und bei der Aufforderung mit „y“ gefolgt von der Eingabetaste antworten, um die heruntergeladene ZIP-Datei zu entfernen.

Geben Sie nun den Befehl

cd birthdays

ein und drücken Sie anschließend die Eingabetaste, um in dieses Verzeichnis zu wechseln (d. h., es zu öffnen). Ihre Eingabeaufforderung sollte nun wie folgt aussehen:

birthdays/ $

Falls alles erfolgreich war, führen Sie den folgenden Befehl aus:

ls

Sie sollten nun die folgenden Dateien und Ordner sehen:

app.py birthdays.json  static/  templates/

Falls es zu Problemen kommt, wiederholen Sie dieselben Schritte und versuchen Sie herauszufinden, wo ein Fehler aufgetreten sein könnte!

Erklärung

In der Datei app.py finden Sie den Beginn einer Flask-Webanwendung. Die Anwendung verfügt über eine Route (/), die sowohl POST-Anfragen (im Abschnitt nach dem if) als auch GET-Anfragen (im Abschnitt nach dem else) akzeptiert. Derzeit wird bei einer GET-Anfrage an die Route / die Vorlage index.html gerendert. Bei einer POST-Anfrage an die Route / wird der Benutzer über eine GET-Anfrage zurück zu / umgeleitet. Ebenfalls wird sichergestellt, dass brithdays.json existiert, worin sie die Geburtstage speichern können.

Im Verzeichnis static befindet sich die Datei styles.css, die den CSS-Code für diese Webanwendung enthält. Es ist nicht notwendig, diese Datei zu bearbeiten, aber Sie können dies gerne tun, wenn Sie möchten.

Im Verzeichnis templates befindet sich eine Datei namens index.html, die gerendert wird, wenn der Benutzer Ihre Webanwendung aufruft.

Implementierungsdetails

Vervollständigen Sie die Implementierung einer Webanwendung, mit der Benutzer Geburtstage speichern und verfolgen können.

• Wenn die Route / per GET-Anfrage aufgerufen wird, sollte Ihre Webanwendung eine Tabelle anzeigen, die alle Personen in Ihrer Datenbank zusammen mit ihren Geburtstagen auflistet:

  • Fügen Sie zunächst in der Datei app.py Logik für die Verarbeitung von GET-Anfragen hinzu, um die gespeicherten Geburtstage aus birthdays.json zu laden. Übergeben Sie alle diese Daten an Ihre index.html-Vorlage.
  • Fügen Sie anschließend in der Datei index.html Logik hinzu, um jeden Geburtstag als Zeile in der Tabelle darzustellen. Jede Zeile sollte zwei Spalten haben: eine für den Namen der Person und eine für deren Geburtstag.

• Wenn die Route / per POST-Anfrage aufgerufen wird, sollte Ihre Webanwendung einen neuen Geburtstag in birthdays.json hinzufügen und die Indexseite neu rendern:

  • Fügen Sie zunächst in der Datei index.html ein HTML-Formular hinzu. Das Formular sollte es den Benutzern ermöglichen, einen Namen, einen Geburtsmonat und einen Geburtstagstag einzugeben. Achten Sie darauf, dass das Formular an / gesendet wird (als action) und die Methode POST verwendet.
  • Fügen Sie dann in der Datei app.py Logik für die Verarbeitung von POST-Anfragen hinzu, um eine neuen Eintrag in das Geburtstagsliste einzufügen, basierend auf den vom Benutzer bereitgestellten Daten. Überlegen sie sich hierfür eine geeignete Methode die Daten zu modellieren, um sie anschließend in der Datei birthdays.json speichern zu können.

Optional können Sie außerdem:

• Die Möglichkeit hinzufügen, Geburtstage zu löschen und zu bearbeiten. (Hierfür lohnt es sich vielleicht die gespeicherten Geburtstage mit einer Id zu versehen.)
• Eine client- und serverseitige Validierung der Daten hinzufügen.

Testing

Es gibt keinen check50 für diese Aufgabe! Aber stellen Sie sicher, dass Sie Ihre Webanwendung testen, indem Sie einige Geburtstagsdaten hinzufügen und überprüfen, dass die Daten wie erwartet in Ihrer Tabelle angezeigt werden.

Führen Sie den Befehl flask run in Ihrem Terminal aus, während Sie sich im Verzeichnis birthdays befinden, um einen Webserver zu starten, der Ihre Flask-Anwendung bereitstellt.