Post Details

Bevor wir mit dem Programmieren beginnen müssen wir noch Vorbereitungen treffen. Als aller Erst legen wir ein Template Verzeichnis an indem wir die HTML Dateien ablegen.

Als nächstes sagen wir dem DjangoBlogProjekt, dass es noch eine App mit den Namen DjangoBlogApp gibt:

Wenn wir unsere Startseite aufrufen, so muss dem Projekt nun mitgeteilt werden, wo diese zu finden ist. Diese sogenannten Routen werden in der urls.py Datei hinterlegt. Öffnen wir diese und ändern Sie wie folgt ab:

Nun legen wir eine neue urls.py Datei im App Verzeichnis an und fügen folgenden Code ein:

Nun erstellen wir eine View in der views.py. Diese ist zuständig, die dazugehörige home.html zu laden:

Nun erstellen wir im templates Verzeichnis die dazugehörige home.html Datei:

Schauen wir einmal ob alles funktioniert hat. Stoppe den Entwicklungswebserver im Terminal mit <Strg>+C und starte diesen neu:

Aktualisieren wir unsere Webseite im Browser und es sollte folgende Ausgabe erscheinen:

Supi! Wir haben unsere erste eigene Django Webseite eingerichtet. Nun geht es an das Design. Zuvor aber noch einmal zusammenfassend wie Django intern arbeitet:

1. Projektordner gibt es eine urls.py, diese sagt, was zu tun ist, wenn eine Webseite aufgerufen wird
2. In der urls.py wird definiert welche View abgearbeitet werden soll
3. in der views.py wird definiert, welche HTML Webseite geladen werden soll

Zusammenfassend: urls.py <-> views.py <-> templates (html – Datei)

Blindtextgenerator für die ersten Test’s findest du z. B. unter https://www.blindtextgenerator.de/

Templates und Bootstrap

Als nächstes geht es an das Design und den Aufbau von Django Templates. Dies ist überwiegend HTML und ist auf der BootStrap Webseite ausführlich dokumentiert. In diesem Tutorial werde ich auf die wichtigsten Tags eingehen. Alles andere würde denke den Rahmen sprengen.

Unsere erste Seite wird wie folgt aussehen auf einen normalen Bildschirm …

… und auf einem Smartphone so. Wie du erkennen kannst wird ohne weiteren Programmieraufwand ein sog. Hamburger-Menu aus der Kopfzeile. Farben usw. können selbst angepasst werden.

Mit ausgeklappten Hamburger Menu so …

Wenn du dich in die Template Tags von Django einlesen möchtest findest du diese in der Dokumentation unter:

https://docs.djangoproject.com/en/5.0/ref/templates/builtins/

Hier eine kurze Zusammenfassung über die im Tutorial verwendeten:

 

Django Tag	Kurzbeschreibung
{% extends ‘index.html’ %}	spezifiziert das Eltern Template, in diesem Fall unsere index.html
{% load static %}	Lädt Templates Tags von anderen Librarys, hier aus der settings.py die Variable static, um statische Dateien, wie z. B. Logo, Bilder, CSS, JavaScript zur Verfügung zu stellen. Diese werden aus dem Verzeichnis static, das in der settings.py Datei definiert wird geladen.
{% block %} {% endblock %}	spezifiziert den Contentbereich. Es gibt ein Block-Anfang {% block <name> %} und Block-Ende {% endblock %}
{% comment “Beschreibung” %} {% endcomment %}	Ein Kommentarbereich, der auch Django Tags enthalten kann.
{% if %} {% elif %} {% else %} {% endif %}	Wertet eine Variable aus und wenn zutreffend, also True, dann wird der Inhalt abgearbeitet.
{% static ‘logo.png’ %}	Eine mit {% load %} geladene Variable verwenden.
{% url ‘home’ %}	Referenzbefehl: Django gibt eine Referenz zurück, die View wird aufgerufen, die in der urls.py mit den Namen home definiert wurde. In der View wird dann die HTML Datei aufgerufen.
{% csrf_token %}	wird für den CSRF-Schutz verwendet   Cross Site Request Forgeries
{% for … in … %} {% endfor %}	durchläuft jedes Element und führt die Befehle aus. Z. B. um Listen <li></li> dynamisch darstellen zu können.

Siehe Django Dokumentation

Kommen wir nun zu unserer Webseite zurück. Um diese so aussehen zu lassen wie oben im Screenshot erstelle in /DjangoBlogApp/templates Verzeichnis folgende Dateien oder kopiere diese aus mein github Repository !!!!!!!!!!!!!!11 herunter.

index.html: Diese enthält das Grundgerüst des Projektes und stellt sowohl die Navigation, als auch die Fußzeile bereit. Jede Seite lädt diese um sich herum.

menu.html: Diese enthält die Navigationsleiste und wird von der index.html hineingeladen

fusszeile.html: Diese enthält die Fussleiste und wird von der index.html hineingeladen

home.html: Diese ist die erste Webseite mit Inhalt. Diese enthält kein Header oder Footer Bereich, sondern verwendet stattdessen die index.html

In den HTML Dateien sind ausführliche Dokumentationen, daher gehe ich hier nicht weiter darauf ein.

Hier noch eine kurze Beschreibung der Zusammenhänge:

urls.py: hier wird definiert, dass wenn http://127.0.0.1:8000/ aufgerufen wird, aus der views.py Datei die “home” Funktion aufgerufen werden soll.

urlpatterns = [ # Wird http://127.0.0.1 aufgerufen, so soll eine HTML Seite # namens home.html geladen werden # hierzu muss eine View erstellt werden und eine HTML Datei # namens home.html path('', views.home, name='home'), ]

views.py: hier wird die “home” View definiert und was gemacht werden soll, wenn diese aufgerufen wird. In unseren Fall soll die home.html angezeigt werden.

ef home(request): # home.html aus dem Template Verzeichnis laden. # home.html muss noch erstellt werden return render(request, 'home.html')

home.html: In der home.html wird definiert, welches Eltern-Template werden soll mit {% extends ‘index.html’ %} und dieser der Inhalt aus dem {% block content%} übergeben.

{% extends 'index.html' %} {% load static %} 
{% block content%}
<div class="d-flex justify-content-center"><h2>Home Seite</h2></div>
<div class="Container">Weit hinten, hinter den Wortbergen, fern der ...</div>

{% endblock content %}

index.html: stellt das Grundgerüst einer HTML Seite dar, sodass ein Webserver, wie z. B. später in dieser Tutorialreihe verwendete apache, diese darstellen kann. In dieser wurde auch der Block mit dem Namen content definiert, indem z. B. die home.html hineingeladen wird.

Mit den include Tags, wird sowohl die Navigationsleiste, als auch die Fußzeile eingebunden.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Django Blog Web App</title> <link href="https://...bootstrap@5.3.0-alpha1/...bootstrap.min.css"... /> </head> <body> {% include 'menu.html' %} ... {% block content %} {% endblock content %} ... {% include 'fusszeile.html' %} <script src="https://cdn.jsdelivr.net/... bootstrap.bundle.min.js"></script> </body> </html>

Zwischenstand:

Wir haben nun eine Testumgebung mit WSL (Ubuntu) aufgesetzt, MySQL, Python3 und Django installiert. Danach eine erste Webseite konfiguriert, in der wir Routen (urls.py), Views (view.py) und Templates (html Dateien) mit dem Framework Bootstrap verwendet haben.

Dies sind alle Grundbausteine, die wir für eine Gestaltung einer Webseite benötigen und auf die du aufbauen kannst.

Im folgenden Kapitel geht es um die models.py, die für die MySQL Datenbank zuständig ist. Anschliessend erstellen wir noch ein Formular in der forms.py, damit wir Daten verarbeiten können. CRUD (Create Read Update Delete) werden wir ebenfalls noch behandeln.