# Django-Projekt: fruit_app 2 - Templates

## Projektstruktur

1. Erstelle in deiner App `fruit_app` einen Ordner `templates/fruit_app/`, um später deine HTML-Templates dort abzulegen.

2. Lege in der App `fruit_app` zusätzlich einen Ordner `static/fruit_app/` an mit Unterordnern für `css/` und `img/` für die Bilder der jeweiligen Früchte (nimm gerne die aus dem Zip oder lade dir eigene herunter).

## Templates

3. Erstelle in `templates/fruit_app/` eine Datei `base.html` mit einem HTML-Grundlayout. Definiere darin zwei Platzhalter-Blöcke mit `{% block %}`: einen namens `"content"` und einen namens `"infos"`. Hinweis: Lege dafür keine eigene View oder URL an.

4. Erstelle im selben Ordner die Datei `fruitlist.html`. Verknüpfe sie anschließend in deiner bestehenden View `send_fruits` über die `render()`-Funktion.

5. Verwende `{% extends %}`, um von `base.html` zu erben, und fülle den Block `"content"` mit einer Liste der Früchte (Name, Farbe, Gewicht).

6. Erstelle zusätzlich eine Datei `header.html`. Binde diese in deine `base.html` mit `{% include %}` ein.

7. Binde das Bild aus dem Zip-Ordner im Header mit dem `{% static %}`-Tag als `img`-Element ein.

>Hinweis: Sollten deine Bilder aus den static Files nicht geladen werden nutze

python manage.py runserver --insecure

---

# Zusatzaufgabe Teil 1 (Projekt designen und erweitern)

1. Erstelle eine `info.html`, die mit `extends` von der `base.html` erbt, und fülle den “infos”-Block mit einem kleinen eigenen Text über Früchte. Siehst du schon etwas im Browser?

2. Die `info.html` soll nun über `"/info"` erreichbar sein, schreibe den nötigen Code (View + Url mit Name).

3. Nutze nun ein `a`-Tag, um aus dem `fruitlist`-Template auf die Info-Seite zu verlinken.

4. Erstelle eine `style.css` in dem dafür vorgesehenen Ordner und verlinke diese in der `base.html` mit dem `{% static %}`-Tag. Verändere testweise über CSS die Schriftfarbe und Größe von `h1` / `h2` etc.

5. Erweitere deine `fruits`-Liste im View (`views.py`) um einen neuen Key namens `img`, der den Pfad zum jeweiligen Fruchtbild enthält.

6. Füge zu jedem Frucht-Objekt zusätzlich ein Boolean-Feld `is_ordered` hinzu. Der Wert soll für manche Früchte `True`, für andere `False` sein.

7. Passe dein Template `fruitlist.html` so an, dass alle Früchte mit `is_ordered: True` in einer Liste mit der Überschrift `"Bestellt"` angezeigt werden, alle Früchte mit `is_ordered: False` in einer Liste mit der Überschrift `"Nicht bestellt"`. Nutze dafür zwei separate `for`-Blöcke und `if`-Bedingungen.

# Zusatzaufgabe Teil 2 (eigene 404):

1. Erstelle eine eigene `404.html`, die z. B. ein Bild oder GIF anzeigt und kreativer ist als die Standard-404-Seite, die du in Zukunft nutzen kannst.

2. Füge den globalen `static/` Ordner zu `STATICFILES_DIRS` in der `settings.py` hinzu.

3. Teste die 404-Seite, indem du `DEBUG = False` in `settings.py` setzt. Hinweis: Sollten deine Files aus dem `static`-Ordner nicht mehr geladen werden, starte den Server mit:

python manage.py runserver --insecure