April 2023
Es geht auf ins bereits dritte Semester! Nach den Osterfeiertagen beginnt für mich nun wieder der Auftakt zur Arbeit und...
In meinem letzten Blog haben wir uns mit Python in der Webentwicklung im Allgemeinen beschäftigt. Heute wollen wir uns anschauen, wie man mit dem Web-Framework Django erste Schritte zu laufen beginnt.
Python als Programmiersprache zur Webentwicklung - Blog
Die Wahl der richtigen Programmiersprache spielt eine entscheidende Rolle bei der Entwicklung von Webanwendungen. In den letzten Jahren hat sich Python als eine der führenden Sprachen in der Webentwicklung etabliert. Mit seiner Vielseitigkeit,
Für die Einrichtung von Django hat Microsoft bereits ein sehr ausführliches Tutorial erstellt.
Sind wir mit der Einrichtung nach Anleitung von Microsoft durch, können wir damit anfangen, in unserem ersten Projekt direkt loszulegen.
Wir widmen uns in diesem Beitrag zwei Stufen der Einführung: Zuerst werden wir klassich mit "Hello World" beginnen und die Website auch nichts weiter als dieses "Hello World" zurückgeben lassen. Im zweiten Schritt programmieren wir einen einfachen Taschenrechner und lassen diesen mehrmals auf der Seite zurückgeben.
Die erste wichtige Datei, der wir uns widmen, ist die urls.py, welche ihr im Stammverzeichnis eures Projektes findet. In dieser werden die Seiten welche wir verwenden angegeben. Für das Hello World Programm genügt hier eine einzelne Seite, welche wir Index nennen. Natürlich müssen wir einige Bibliotheken einfügen, damit Python auch die Sprache für das Django Framework kennt. Der Code sollte in etwa so aussehen:
#Import der Bibliotheken
from django.urls import path
from . import views
#Definition der Index-Seite
urlpatterns = [
path("", views.index, name="index"),
]
Für Programmieranfänger*innen unter euch: Die Raute (#) leitet einzeilige Entwicklerkommentare ein und werden vom Programm ignoriert.
Ansonsten ist dieser Teil für den Einstieg nicht so wichtig und soll uns für die ersten Schritte nicht weiter sorgen. Programmiereinstiege sind doch relativ informationsreich und können sehr schnell überfordern.
Wir widmen uns also dem eigentlichen Inhalt der Internetseite. Hierfür ist die wichtigste Datei vorerst die views.py. In dieser wird der Pythoncode geschrieben, welcher später mit der Internetseite zusammenarbeitet.
#Import der Bibliotheken
from django.http import HttpResponse
#Funktion für die Rückgabe von Hello World!
def index(request):
return HttpResponse('Hello, World!')
Nachdem wir aus der Bibliothek "django.http" die Funktion "httpResponse" importiert haben, damit das Programm sie kennt, schreiben wir uns eine eigene Funktion für den Index.
Def index(request): ist also die Funktion für die Indexseite. Das heißt nichts weiter wie: "All dies passiert, wenn die Seite "Index" angefragt und geladen werden soll.
Die Zeile return HttpRespone('Hello, World!') sagt aus, dass eine "HttpResponse", sprich Antwort, mit dem Inhalt "Hello, World!" als Inhalt der Seite zurückgegeben wird.
Um die Seite darstellen zu können, müssen wir nun in das Terminal der Anwendung, wie auch in Microsofts Tutorial beschrieben wurde, den Server starten. Haben wir den Server bereits an, gehen wir zurück in das Stammverzeichnis mithilfe der Tastenkombination "strg c". Anschließend starten wir den Server mit dem Befehl "python3 manage.py runserver".
Der Inhalt der Seite sieht nun so aus:
Das war auch schon das Hello World Programm. Wichtig ist, dass HttpResponse eine einmalige Funktion pro Seitenaufruf ist. Wir können damit keine ganze Seite gestalten, das brauchen wir aber auch nicht, denn der zweite Teil des Tutorials befasst sich ausführlicher damit, wie wir eine Internetseite aufbauen können, die etwas mehr kann als nur einen Einzeiler zurückgeben. Was haben wir bisher also schon gelernt? Zum einen, dass die verschiedenen Dateien im Ordner miteinander kommunizieren, zum anderen aber auch, dass wir mit "return" einen Wert oder einen Befehl zurückgeben können, wenn eine Funktion vom Programm aufgerufen wird.
Programmieren wir nun einen kleinen Taschenrechner, welcher die Grundrechenarten beherrscht und lassen die Seite diesen zusammen mit ein paar Überschriften ausgeben.
Da wir mit Python selbst kein HTML generieren können, ohne große Asse in Sachen Programmierung zu sein, müssen wir uns um das Grundgerüst selbst kümmern. Hierfür erstellen wir im Stammverzeichnis einen Ordner namens "templates" und erstellen dort die index.html. In dieser gestalten wir das HTML Grundgerüst. Ich habe da etwas für uns vorbereitet, welches bereits einige Menüpunkte beinhaltet:
Die Templatebausteine, die ich erstellte, sind alle Punkte, die zwischen den <p> Tags stehen.
So weit zum einfachen Teil, denn ab nun beginnt die eigentliche Programmierarbeit in der views.py, die wir für Hello World bereits nutzten.
Zunächst binden wir erneut Bibliotheken ein. Bibliotheken die wir bereits eingebunden haben, brauchen zwar nicht erneut eingebunden werden, der Vollständigkeit halber zeige ich euch aber erneut den gesamten Code:
#Hier werden die Django Bibliotheken geladen, welche das Programm nutzt
from django.http import HttpResponse
from django.shortcuts import render
Als nächstes schreiben wir eine Funktion für den Taschenrechner. Ich nannte die Funktion "simpleMath" und lasse sie die Grundrechenarten berechnen:
def simpleMath(x, y, rechner):
if rechner == "+":
z = x + y
elif rechner == "-":
z = x - y
elif rechner == "*":
z = x * y
elif rechner == "/":
z = x / y
else:
return"Die eingegebene Recheneinheit ist ungültig. Benutze +,-,*,/"
if z == int("42"):
return "What was the question?"
return str(z) + "=" + str(x) + str(rechner) + str(y)
Die Zeile "def simpleMath(x, y, rechner): lässt uns die Funktion definieren. Sie heißt simpleMath und benötigt zusätzlich die Werte "x" und "y", welche die zu berechnenden Zahlen sind, sowie "rechner", welches das Rechenzeichen darstellt.
Der Code danach überprüft welches Zeichen für "rechner" eingegeben wurde und bestimmt anhand dessen die Rechenoperation, im ersten Beispiel demnach: Wenn das Rechenzeichen ein "+" ist, dann rechne bitte "x + y" aus und lege das Ergebnis auf "z" ab. Ansonsten schau nach den anderen Zeichen. Ist keines der 4 Rechenzeichen verwendet, gib bitte eine Fehlermeldung zurück. Sollte das in "z" gespeicherte Ergebnis 42 sein, habe ich mir den Scherz erlaubt "What was the Question" zurückzugeben, was eine Anspielung auf den Roman "Per Anhalter durch die Galaxis ist", ansonsten soll die vollständige Rechenaufgabe mit Ergebnis zurückgegeben werden.
Haben wir diesen ganzen Code geschafft, fehlt uns allerdings ein wichtiges Kernstück: Wir haben nun die Funktion die die Rechenaufgaben übernehmen kann, allerdings kommuniziert die Funktion noch nicht mit der Internetseite, um den Teil müssen wir uns nun kümmern und vielleicht erkennt ihr im folgenden Code auch schon etwas, was wir im "Hello World" Programm nutzten: def index(request):
#Der Absatz hier ist dafür da, die einzelnen Webbausteine dem Programm zuzuordnen und zu sagen, was in welchem Block stehen soll.
headline = "Templateüberschrift"
paragraph = simpleMath(22, 2, "*")
calculation = simpleMath(46, 4, "-")
calc = simpleMath(32, 14, "/")
calc2 = simpleMath(45, 21, "+")
context = {'headline': headline, 'paragraph': paragraph, 'calculation': calculation, 'calc': calc, 'calc2': calc2}
return render(request, 'index.html', context)
Wir geben also erstmal wieder die Funktion "def index(request):" an, von welcher wir bereits lernten was sie macht.
In den Zeilen danach erkennt ihr zunächst die Bausteine aus dem HTML Template "index.html" welches wir vorhin erstellten wieder. Diesen Bausteinen ordnen wir nun Funktionen und Variabeln zu, zunächst sagen wir zum Beispiel, wie die "headline" heißt und teilen den späteren Templatebausteinen die Funktion "simpleMath" zu, welcher wir eindeutig sagen was zu berechnen ist, z.B. "22 * 2" was 44 ergibt.
Die Zeile "context=[...]" ist dafür zuständig, unsere Variabeln den in der HTML Datei erstellten Templatebausteinen zuzuordnen, sie ist notwendig, damit das Programm ordnungsgemäß ausgeführt und in die HTML Datei eingefügt wird, wenn wir die Seite aufrufen.
Die Zeile "return render(request, 'index.hmtl', context" ist dafür zuständig, den Code in die HTML Datei anhand der in "context" enthaltenen Informationen einzufügen.
Sind wir mit dem Coding fertig, speichern wir alle Dateien nochmals ab und starten den Server wie vorher im Beitrag angegeben nochmal neu.
Das Endergebnis sieht dann in etwa so aus:
Herzlichen Glückwunsch: Wir haben nun gemeinsam unser erstes kleines Python-Programm für eine Internetseite geschrieben.
Wenn ihr diese Anleitung nun gelesen habt, ist euch vermutlich aufgefallen, dass Python sehr übersichtlich und Einsteigerfreundlich gestaltet ist. Ebenfalls dürfte euch aufgefallen sein, dass wenn wir uns tiefer mit der Programmiersprache Python befassen, im Grunde alles mögliche mit der Internetseite anstellen kann. So können wir zum Beispiel auch Formularfelder erzeugen, sie in einer Datenbank speichern und Daten aus einer Datenbank auslesen, was allerdings ein wenig tiefgreifender ist und demnach nicht in diesem Beitrag behandelt wird.
