Django-Superkraft: Eine CRUD-Web-App in 60 Minuten

Das Akronym CRUD ist bei Projekten mit Datenbanken gewissermassen der Heilige Gral. Es beschreibt die vier grundlegenden Operationen bei der Arbeit mit einer Datenbank. Es umfasst die folgenden Aktionen: einen Datensatz erstellen (Create), einen Datensatz lesen (Read), einen Datensatz aktualisieren (Update) und einen Datensatz löschen (Delete). In diesem Tutorial werden wir eine Adressbuch-App entwickeln, die im Front-End das Anlegen, Lesen, Verändern und Löschen von Adressen erlaubt.

Als voll ausgestattetes Web-Framework verfügt Django bereits von Haus aus über eine API, um mit Datenbanken zu arbeiten. Diese kümmert sich automatisch um das sogenannte Object-Relational Mapping (ORM). Mit einem ORM werden Datenbanktabellen und Datenbankeinträge aus einer relationalen Datenbank in Objekte übersetzt, mit denen eine objektorientierte Programmiersprache wie Python arbeiten kann und umgekehrt.

In diesem Tutorial erstellen wir eine Adressbuch-App, die das Django-ORM nutzt und alle CRUD-Aktionen im Front-End unterstützt.

In 7 Schritten zu einer funktionierenden Django-Webseite

Um eine funktionierende Django-Webseite mit einem Front-End zu erstellen, sind grundsätzlich die folgenden sieben Schritte nötig:

1. Installation
2. Konfiguration
3. Erstellen der Datenbank-API
4. Konfiguration des Django-Admins (optional)
5. Erstellen der URLs
6. Erstellen der Views
7. Erstellen der Templates

Bis auf Schritt 1 und 2 können alle anderen Schritte in beliebiger Reihenfolge vorgenommen werden. Schritt 4 kann man auch ganz weglassen. Da der Django-Admin aber ein sehr nützliches und mächtiges Werkzeug ist, habe ich diesen Schritt in das Tutorial integriert.

1. Installation

Erstellen des Projektes

Als erstes Installieren wir die neuste stabile Version von Django in eine virtuelle Umgebung. Öffne dazu die Kommandozeile und lege für dieses Tutorial in deinem Dokumente-Ordner ein Verzeichnis namens django_crud_app an. Tippe folgendes:

mkdir ~/Dokumente/django_crud_app

Und wechsle in das neue Verzeichnis:

cd ~/Dokumente/django_crud_app/

Wir erstellen eine virtuelle Umgebung mit venv, dem ab Python 3.6 integrierten Werkzeug zur Arbeit mit virtuellen Umgebungen. Es ist gängige Praxis, die Installationen für jedes Python-Projekt in einer eigenen virtuellen Umgebung auszuführen. Damit befinden sich alle Abhängigkeiten eines Projektes isoliert in einer separaten Arbeitsumgebung, ohne sich gegenseitig zu stören.

Erstelle zuerst das Verzeichnis für die virtuelle Umgebung und nenne es env:

# Mac & Linux
python3 -m venv env

# Windows Powershell
python -m venv env

Aktiviere die virtuelle Umgebung:

# Mac & Linux
source env/bin/activate

# Windows Powershell
# Das Ausführen von Scrips muss erlaubt sein
# Siehe auch: https://www.windowspro.de/script/ausfuehrungsrichtlinien-executionpolicy-fuer-powershell-scripts-ueber-gpo-setzen
env/Scripts/activate

Dein Kommandozeilen-Prompt sollte jetzt ein (env) als ersten Eintrag anzeigen. Damit wird dir signalisiert, dass die virtuelle Umgebung aktiv ist und du mit der Instanz von Python in deiner virtuellen Umgebung arbeitest und nicht mit der Hauptinstanz von Python. Das Ganze sollte ungefähr so aussehen (wichtig ist die Anzeige (env) ganz am Anfang der Zeile):

Mac und Linux:

(env) didier@computer ~/Dokumente/django_crud_app $

Windows:

(env) PS C:\Users\Didier\Dokumente\django_crud_app>

Du bist nun bereit Django zu installieren. Tippe dazu folgenden Befehl:

pip install Django==3.2

Damit wird die aktuellste Version von Django in deine virtuelle Umgebung namens env installiert. Sobald die Installation erfolgreich durchgelaufen ist, erstellen wir unser neues Django-Projekt, welches wir ganz einfach meinprojekt nennen:

django-admin startproject meinprojekt

Deine Ordnerstruktur sollte so aussehen:

└── env │ └── (...) ├── meinprojekt │ ├── manage.py │ └── meinprojekt │ ├── asgi.py │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py

Damit ist der Schritt Installation erfolgreich abgeschlossen. Bevor wir zum nächsten weitergehen, werden wir unsere Installation überprüfen und unser neues Django-Projekt starten. Wechsle dazu in den Ordner meinprojekt:

cd meinprojekt

In diesem Ordner befindet sich die Datei manage.py ein Kommandozeilen-Hilfsmodul für die Arbeit mit Django. Mit dieser Datei können wir den Django-Entwicklungsserver starten, Datenbanken migrieren, etc. Starte nun das neue Django-Projekt. Tippe dazu:

python manage.py runserver

Die Ausgabe in der Kommandozeile sollte ungefähr so aussehen:

Watching for file changes with StatReloader Performing system checks... System check identified no issues (0 silenced). You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. Run 'python manage.py migrate' to apply them. June 07, 2020 - 15:44:26 Django version 3.0.7, using settings 'meinprojekt.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.

Stoppe als Erstes den Entwicklungs-Webserver mit CONTROL-C (Mac und Linux) oder CONTROL-Pause (Windows) und tippe Folgendes:

# Mac & Linux
ls

# Windows Powershell
dir

Die Ordnerstruktur sieht jetzt wie folgt aus:

db.sqlite3 manage.py meinprojekt

Django hat für uns automatisch eine SQLite Datenbank erstellt mit dem Namen db.sqlite3. Für produktionsreife Projekte würde ich empfehlen POSTGRESQL einzusetzen, für die schnelle Entwicklung eines Prototyps reicht SQLite jedoch meistens aus und ist mit dem geringsten Aufwand verbunden.  Wir werden die oben angezeigten Migrationen jetzt anwenden. Tippe dazu Folgendes:

python manage.py migrate

Du solltest ungefähr folgende Ausgabe sehen:

Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying admin.0002_logentry_remove_auto_add... OK Applying admin.0003_logentry_add_action_flag_choices... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying auth.0007_alter_validators_add_error_messages... OK Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK Applying auth.0010_alter_group_name_max_length... OK Applying auth.0011_update_proxy_permissions... OK Applying sessions.0001_initial... OK

Damit haben wir für die oben anzeigten Django-Standard-Apps eine Datenbanktabelle erstellt. Starte nochmals den Django-Entwicklungsserver:

python manage.py runserver

Die Ausgabe ist diesmal kürzer:

Watching for file changes with StatReloader Performing system checks... System check identified no issues (0 silenced). June 07, 2020 - 15:53:48 Django version 3.0.7, using settings 'meinprojekt.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.

Rufe jetzt mit einem Internet-Browser die Adresse http://127.0.0.1:8000/ auf. Dich sollte nun die Django-Rakete begrüssen, wie unten im Bild:

Erstellen der App

Damit haben wir ein Django-Projekt erstellt. Ein Django-Projekt ist eine Webseite mit allen dazugehörigen Konfigurationen und allen dazugehörigen Apps. Eine App hingegen ist ein Django-Programm, dass eine bestimmte Aufgabe ausführt. Ein Projekt besteht aus einer oder mehreren Apps, die so zusammenspielen, dass die Webseite ihre Aufgabe erfüllen kann. Eine App ist nicht auf ein Projekt beschränkt, eine App kann ihre Aufgabe in verschiedenen Projekten erfüllen. So könnten wir unsere Adress-App, die wir in diesem Tutorial erstellen, in diversen anderen Projekten einsetzen.

Stoppe als Erstes den Entwicklungs-Webserver mit CONTROL-C und tippe Folgendes:

python manage.py startapp adressen

Die Ordnerstruktur erweitert sich dadurch um ein Unterverzeichnis adressen:

├── manage.py ├── meinprojekt │ ├── (...) └── adressen # Neu ├── admin.py ├── apps.py ├── __init__.py ├── migrations │ └── __init__.py ├── models.py ├── tests.py └── views.py

Damit haben wir die App adressen erstellt, noch ist aber Django nicht über deren Existenz informiert und wird sie beim Ausführen ignorieren. Kommen wir zu Schritt 2, Konfiguration.

2. Konfiguration

Mit diesem Schritt konfigurieren wir unser neues Projekt und nehmen alle bereits bekannten Projekt-Einstellungen vor.

App zum Projekt «offiziell» hinzufügen

Damit Django die neue App adressen erkennt und ausführt, müssen wir Django mitteilen, dass sie existiert. Öffne dazu die Datei meinprojekt/settings.py und füge folgende Zeile zur Liste INSTALLED_APPS hinzu:

# meinprojekt/settings.py
(...)
INSTALLED_APPS = [
    (...)
    'adressen', # Neu
]
(...)

Jetzt gehört unsere neue App adressen «offiziell» zum Projekt.

Verzeichnis für das base-Template festlegen

Standardmässig ist Django so eingestellt, dass alle Templates jeweils direkt aus den App-Verzeichnissen geladen werden. Dies ist ausgezeichnet für App-spezifische HTML-Vorlagen, jedoch ist es gut, wenn wir für unser Projekt ebenfalls einen Template-Ordner haben, um Projekt-spezifische Vorgaben projektweit umzusetzen. Zu diesem Zweck erstellen wir auf der Ebene von manage.py einen Ordner namens templates. Tippe dazu Folgendes:

mkdir templates

Auf der Ebene von manage.py haben wir nun folgende Dateien und Verzeichnisse:

adressen db.sqlite3 manage.py meinprojekt templates

Öffne nochmals die Datei settings.py und ändere in der Liste TEMPLATES = [] den Eintrag DIRS = [] wie folgt:

# meinprojekt/settings.py
(...)
TEMPLATES = [
    {
        (...)
        'DIRS': [BASE_DIR / 'templates'], # Neu
        (...)
        },
    },
]
(...)

Damit haben wir die nötigsten Einstellungen für unser Projekt vorgenommen. Testen wir vor den nächsten Schritten, ob alles funktioniert. Starte nochmals die Webseite:

python manage.py runserver

Wenn dir keine Fehlermeldung angezeigt wird und du noch immer die Rakete siehst, wenn du in deinem Browser zu http://127.0.0.1:8000/ navigierst, haben wir alles richtig gemacht. Beende den Entwicklungsserver mit CTRL+C.
Damit wären Schritt eins und zwei, Installation und Konfiguration, abgeschlossen. Kommen wir zu den nächsten zwei Schritten:

3. Erstellen der Datenbank-API
4. Konfiguration des Django-Admins

3. Erstellen der Datenbank-API

Als Erstes fügen wir die Datenbankstruktur hinzu und werden diese im nächsten Schritt im Django-Admin anzeigen. Öffne dazu in der App adressen die Datei adressen/models.py und erstellen das grundlegende Adress-Modell:

# adressen/models.py
from django.db import models

class Adressen(models.Model):
    vorname = models.CharField(max_length=50)
    nachname = models.CharField(max_length=50)
    strasse = models.CharField(max_length=100)
    plz = models.IntegerField()
    ort = models.CharField(max_length=100)

In der ersten Zeile importieren wir die Klassen für die Arbeit mit Modellen django.db.models. Danach definieren wir eine Klasse Adressen als Kind-Element von models.Model. Die Klasse Adressen repräsentiert eine Datenbanktabelle, die Klassenattribute, wie z.B. vorname, bilden eine Tabellenspalte ab.

Damit wären unser Datenbank Model und die Datenbank-API bereits fertig. Um uns später das Leben zu erleichtern, werden wir der Klasse Adressen noch zwei Methoden hinzufügen: def __str__(self) und def get_absolute_url(self). Öffne nochmals die Datei adressen/models.py, importiere die Methode reverse und erweitere die Klasse Adressen um die zwei Methoden:

# adressen/models.py
from django.db import models
from django.urls import reverse # Neu

class Adressen(models.Model):
    (...)

    def __str__(self): # Neu
        return self.nachname # Neu

    def get_absolute_url(self): # Neu
        return reverse('adress_detail', args=[str(self.id)]) # Neu

Mit der String-Method def __str__(self): definieren wir eine für Menschen lesbare Repräsentation unseres Datenbankmodels, in diesem Falle der Nachname des jeweiligen Eintrages. Diese wird im Django-Admin und an anderen Orten angezeigt. Mit der def get_absolute_url(self):-Methode erstellen wir eine kanonische URL für jede Instanz unserer Klasse, damit wir jederzeit von überall her auf die einzelnen Datenbankeinträge verweisen können. Dies hilft uns mit der Umsetzung des DRY-Prinzips bei der Arbeit mit Datenbankobjekten in unserer CRUD-App.

4. Füge das Model dem Admin hinzu

Diesen Schritt könnten wir überspringen, ohne die Funktionalität unserer Front-End-App zu beeinträchtigen. Es ist jedoch sehr praktisch, wenn wir mit der Datenbank bereits zu Beginn arbeiten und Daten eingeben können. Um unser Datenbank-Modell im Django-Admin, und damit dem Back-End unseres Projektes bereitzustellen, öffne die Datei adressen/admin.py und füge folgenden Code hinzu:

# adressen/admin.py

from django.contrib import admin

from .models import Adressen # Neu

admin.site.register(Adressen) # Neu

Damit haben wir unsere App adressen für den Django-Admin verfügbar gemacht.

Um uns im Backend anzumelden, fehlt uns noch ein Benutzer. Als Entwickler der App legen wir uns direkt einen superuser an, mit allen Rechten. Stelle sicher, dass in deinem Terminal die virtuelle Python-Umgebung immer noch aktiv ist (das erkennst du am (env) am Anfang der aktuellen Zeile) und dass du dich im gleichen Verzeichnis wie die Datei manage.py befindest. Tippe Folgendes:

python manage.py createsuperuser

Ergänze in der Eingabeaufforderung alle Angaben wie Username, E-Mailadresse und Passwort:

Username (leave blank to use 'didier'): Email address: Password: Password (again): Superuser created successfully.

Bevor wir unsere Änderung im Admin anschauen, müssen wir noch die Datenbankmigration für die App adressen erstellen:

python manage.py makemigrations adressen

Damit erstellen wir ein Textfile 0001_initial.py im Verzeichnis adressen/migrations/ mit allen SQL-Befehlen, die nötig sind, um das Datenbankschema für unsere App in die Datenbank zu schreiben. Dies tun wir jetzt:

python manage.py migrate adressen

Starte den Django runserver:

python manage.py runserver

Gehe in deinem Webbrowser zu http://127.0.0.1:8000/admin. Du solltest nun das Anmeldeformular des Django-Admins sehen:

Logge dich mit deinem vorher erstellten superuser ein und du siehst jetzt einen Überblick über dein Django-Projekt:

Unter dem blauen Balken Adressen siehst du das Adressen-Model der App. Hier sieht es ein bisschen komisch aus, da wir unser Model in Deutsch und in der Mehrzahl (also Adressen statt Adresse) angelegt haben. Django versucht automatisch, aus einem Singular ein Plural zu machen mit der englischen Gramatikregel. Das stört uns aber nicht weiter. Klicke auf den Link Adressens und du gelangst in die Übersicht dieses Models. Bis jetzt gibt es noch keine Einträge. Füge mit dem Menu ADD ADRESSEN zwei, drei neue Einträge hinzu (siehe folgende Screenshots).

Damit haben wir unser Projekt und unsere App konfiguriert und sind sogar bereits in der Lage Daten über das Back-End in unsere App einzulesen und abzurufen. Streng genommen haben wir damit bereits eine CRUD-App erstellt, allerdings noch ohne Front-End.

Im nächsten Teil erstellen wir das Front-End für die App und damit die eigentliche Web-App.