68 lines
3.9 KiB
Markdown
68 lines
3.9 KiB
Markdown
|
# Interaktive Filmdatenbank
|
||
|
|
|
||
|
|
📆 **Fällig: 19.11.2023** 📆
|
||
|
|
|
||
|
|
Erstellen Sie eine einfache Filmdatenbank, in die man Filme per Formular hinzufügen kann.
|
||
|
|
|
||
|
|
## Lernziele
|
||
|
|
|
||
|
|
* Einbinden von JavaScript in HTML-Seiten
|
||
|
|
* Grundlegende JavaScript Sprach- und Kontrollstrukturen
|
||
|
|
* Verwendung von Arrays
|
||
|
|
* JavaScript Object Notation (JSON)
|
||
|
|
* DOM-Modifikationen mit JavaScript
|
||
|
|
* Einsatz von jQuery
|
||
|
|
|
||
|
|
## Teil 1: HTML-Seite für die Anzeige
|
||
|
|
|
||
|
|
Entwerfen Sie eine einfache HTML-Seite für die Anzeige einer Filmdatenbank. Die Filme sollen als einfache HTML-Tabelle dargestellt werden. Zu jedem Film sollen in einer einzelnen Zeile folgende Daten angezeigt werden:
|
||
|
|
|
||
|
|
* Titel
|
||
|
|
* Regisseur
|
||
|
|
* Produktionsjahr
|
||
|
|
* Laufzeit (in Minuten)
|
||
|
|
* Altersfreigabe
|
||
|
|
|
||
|
|
In der ersten Zeile der Tabelle sollen Eingabefelder für die Eingabe der entsprechenden Daten eines Films vorgesehen sein. Es gibt in dieser Zeile _keinen_ Submit-Knopf.
|
||
|
|
|
||
|
|
Stylen Sie die Tabelle und die Seite mit CSS so, dass die Tabelle entsprechende Trennlinien für eine bessere Lesbarkeit hat.
|
||
|
|
|
||
|
|
<img src="filmdb.png" width="500">
|
||
|
|
|
||
|
|
|
||
|
|
## Teil 2: JSON-Format
|
||
|
|
|
||
|
|
Überlegen Sie sich ein JSON-Format für die Speicherung von Filmen für die oben genannte Tabelle. Erzeugen Sie ein Array Ihrer Lieblingsfilme mit dem entsprechenden Format. Wenn Sie Ihre Lieblingsfilme nicht preisgeben wollen, verwenden Sie folgende Filme als Beispiel:
|
||
|
|
|
||
|
|
| Titel | Regisseur | Jahr | Spielzeit | FSK |
|
||
|
|
|----------------------|-------------------|------|-----------|-----|
|
||
|
|
| Pulp Fiction | Quentin Tarantino | 1994 | 154 | 16 |
|
||
|
|
| Inglourious Basterds | Quentin Tarantino | 2009 | 153 | 16 |
|
||
|
|
| Reservoir Dogs | Quentin Tarantino | 1992 | 99 | 18 |
|
||
|
|
| Blade Runner | Ridley Scott | 1982 | 117 | 16 |
|
||
|
|
|
||
|
|
## Teil 3: Dynamische Webseite
|
||
|
|
|
||
|
|
Erzeugen Sie aus dem in Teil 1 entwickelten Gerüst eine dynamische Webseite. Folgende Operationen sollten möglich sein:
|
||
|
|
|
||
|
|
* Die Filme aus der in Teil 2 erstellten Filmdatenbank werden beim Laden der Seite automatisch in der Tabelle angezeigt.
|
||
|
|
* Neue Filme können über die Eingabezeile der Tabelle hinzugefügt werden. Hierbei reicht es, in einem beliebigen Eingabefeld ENTER zu drücken. Es wird überprüft, ob alle Felder korrekt gefüllt wurden bevor die Eingabe angenommen wird. Der Film wird dann am Ende der Tabelle hinzugefügt und die Eingabefelder werden geleert. Der Cursor wird dann wieder in das erste Eingabefeld gesetzt.
|
||
|
|
* Filme können aus der Liste gelöscht werden. Hierzu dient ein Knopf oder eine kleine Grafik in der letzten Spalte der Tabelle.
|
||
|
|
* Filme können nach Titel, Regisseur, Produktionsjahr, Laufzeit oder Altersfreigabe sortiert werden. Hierzu genügt ein Klick auf den Titel der Tabellenspalte, um eine entsprechende Sortierung anzustoßen. Wenn Sie wollen, können Sie auch eine auf- und absteigende Sortierung anbieten und über Symbole in der Titelzeile anzeigen.
|
||
|
|
|
||
|
|
Der JavaScript-Code für die Seite soll in einer externen Datei gespeichert werden, die in die HTML-Seite eingebunden wird.
|
||
|
|
|
||
|
|
Die Seite läuft komplett im Browser und hat kein Backend (außer, um sie auszuliefern). D.h. bei einem Reload sind die Eingaben weg und die ursprüngliche Liste wird angezeigt.
|
||
|
|
|
||
|
|
|
||
|
|
## Abgabe
|
||
|
|
|
||
|
|
Verwenden Sie das Ihnen zugeordnete Git-Repository und legen Sie für jedes Assignment einen Ordner an: `Assignment_01`, `Assignment_02`, ...
|
||
|
|
|
||
|
|
Innerhalb des Ordners für das Assignment legen Sie bitte folgende drei Ordner an:
|
||
|
|
|
||
|
|
* `src`: Der Source-Code, der nicht im Webroot liegen soll / kann
|
||
|
|
* `doc`: Zusätzliche Dokumentation, die Sie zur Verfügung stellen wollen
|
||
|
|
* `site`: Die fertige Webanwendung. Dieser Ordner ist das _Webroot_ der Anwendung
|
||
|
|
|
||
|
|
Legen Sie die Lösung so in Ihrem Repository ab, dass man das Repository einfach clonen kann, dann in den Ordner `site` geht und dort einen Webserver (z.B. `php -S localhost:8080`) starten kann. Die Seite sollte dann korrekt aufrufbar sein.
|