Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry Pi | Raspberry Pi Pico

Menu
  • Smarthome
  • Arduino
  • ESP32 & Co.
  • Raspberry Pi & Pico
  • Solo Mining
  • Über mich
  • Deutsch
  • English
Menu

Python Flask #4: Scripten im HTML Template mit Jinja2

Posted on 5. März 202130. April 2023 by Stefan Draeger

In diesem Beitrag möchte ich dir die Template Engine Jinja2 für Python Flask vorstellen und zeigen wie du mit dieser Parameter in deinem HTML Template verarbeiten kannst.

Python3 Flask - Jinja2 übergeben von Parameter an ein HTML Template
Python3 Flask – Jinja2 übergeben von Parameter an ein HTML Template

Du kannst mit dieser Engine auch innerhalb des HTML Templates skripten und so dynamisch deine Seite aufbauen.

verarbeiten von Parameter mit Kontrollstrukturen in Jinja2
verarbeiten von Parameter mit Kontrollstrukturen in Jinja2

Einrichten von Jinja2

Du kannst Jinja2 über eine „requirements.txt“

Jinja2==2.10.1

sowie dem Befehl auf der Kommandozeile

pip install -r requirements.txt

installieren.

Solltest du die Suite Anaconda verwenden bzw. den Python3 Interpreter daraus dann entfällt dieser Schritt denn dort ist bereits vieles installiert.

Übergeben von Parameter in Jinja2

Im letzten Beitrag Python Flask #3: ausliefern von HTML Seiten habe ich dir bereits gezeigt wie du ein statisches HTML Template rendern kannst.

from flask import Flask, render_template

@app.route('/')
def hello():
   return render_template("index.html")

Der Funktion „render_template“ kann nicht nur ein Pfad zu einer HTML Template Datei übergeben werden sondern auch Schlüssel/Werte Paare welcher in der HTML Seite ausgewertet / verarbeitet werden können.

return render_template("index.html", key=value)

Als „key“ kann jeder beliebige Wert verwendet werden und als „value“ können die in Python3 üblichen Objekte (in Python ist alles ein Objekt) übergeben werden.

@app.route('/')
def hello(): 
   liste = ["Max", "Moritz", "Stefan", "Birgit", "Mathias"]
   return render_template("index.html", liste=liste)

Im HTML Template wird die einfache Ausgabe einer Variable mit zwei geschweiften Klammern „{{“ eingeleitet und gefolgt vom Namen der Variable. Das Ende wird dann wiederum mit zwei schließenden geschweiften Klammern „}}“ eingeleitet.

<html>
<head>
<title>ein kleines Beispiel</title>
</head>
<body>
<span>{{ liste }}</span>
</body>
</html>

An der Eckigen Klammer kann man erkennen das eine Liste übergeben wurde. Im nächsten Schritt möchten wir nun diese Liste verarbeiten.

Jinja2 - rendern einer Liste
Jinja2 – rendern einer Liste

Verarbeiten von Parameter

For-Schleife in Jinja2 und HTML

Im vorherigen Abschnitt habe ich dir gezeigt wie einfach man eine Liste an das HTML Template übergeben kann. Nun möchte ich mit einer kleinen For-Schleife diese Liste durchlaufen und jeden Namen „begrüßen“.

In Jinja2 werden Kontrollstrukturen & Blöcke mit einer geöffneten geschweiften Klammer und einem Prozentreichen eingeleitet „{%“ und mit einem Prozentzeichen sowie einer schließenden geschweiften Klammer beendet „%}“.

<html>
<head>
<title>ein kleines Beispiel</title>
</head>
<body>
{% for name in liste %}
    <p>Hallo {{ name }}</p>
{% endfor %}
</body>
</html>

Wenn wir uns nun die HTML Seite anschauen, dann wir für jeden Namen in der Liste die Zeile „Hallo <<name>>“ erzeugt.

Jinja2 rendern einer Liste
Jinja2 rendern einer Liste

Bedingte Abfragen in HTML mit Jinja2

Du kannst mit einer If-Bedingung zusätzlich auch Werte prüfen und somit ggf. auf bestimmte Werte reagieren.

{% for name in liste %}
   <p {% if name=='Stefan'%}style="color:red;" {% endif %}>Hallo {{ name }}</p>
{% endfor %}
Python Flask Jinja2 - bedingtes CSS Styling
Python Flask Jinja2 – bedingtes CSS Styling

Wie hier im Beispiel zu sehen kannst du also deine Seite sehr dynamisch Aufbauen ABER das ist leider zugunsten der Übersichtlichkeit (wie ich finde).

Fazit & Ausblick

Das Skripten mit Jinja2 in Python Flask funktioniert recht gut und durch den recht einfachen Aufbau kommt man schnell mit den Befehlen zurecht.

Durch meine jahrelange Erfahrung in Java und den Webtechnologien JSP & JSF sehe ich da leider einige parallelen welche „Gott sei dank“ bereits abgelegt wurden und nun in Jinja2 als Feature präsentiert wird.

Im nächsten Beitrag werde ich dir dann zeigen wie du Parameter zwischen einem Formular und deinem Python Programm austauschen kannst und somit ein Kontaktformular erstellen kannst.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden?
Support-Ticket erstellen

Newsletter abonnieren

Bleib auf dem Laufenden: Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32 und mehr – direkt in dein Postfach.

Jetzt Newsletter abonnieren

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee.
So hilfst du mit, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

draeger-it.blog auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kategorien

Tools

  • Unix-Zeitstempel-Rechner
  • ASCII Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner
  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator

Links

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com

Stefan Draeger
Königsberger Str. 13
38364 Schöningen

Tel.: 01778501273
E-Mail: info@draeger-it.blog

Folge mir auf

  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
©2025 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}