🍪 Privacy & Transparency

We and our partners use cookies to Store and/or access information on a device. We and our partners use data for Personalised ads and content, ad and content measurement, audience insights and product development. An example of data being processed may be a unique identifier stored in a cookie. Some of our partners may process your data as a part of their legitimate business interest without asking for consent. To view the purposes they believe they have legitimate interest for, or to object to this data processing use the vendor list link below. The consent submitted will only be used for data processing originating from this website. If you would like to change your settings or withdraw consent at any time, the link to do so is in our privacy policy accessible from our home page..

Vendor List | Privacy Policy
Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry PI

Menu
  • Projekte
    • LED’s
    • Servo & Schrittmotoren
    • Sound
    • LCD’s
    • Kommunikation
    • Sicherheit
    • Weekend Project
  • Arduino
    • Tutorials
    • ProMini
      • Anschließen & Programmieren
    • Nano
      • Arduino Nano – Übersicht
    • UNO
      • Übersicht
    • MEGA 2560
      • Übersicht
    • Leonardo
      • Übersicht
    • NodeMCU
      • NodeMCU – “Einer für (fast) Alles!”
    • Lilypad
      • Arduino: Lilypad “Jetzt Geht’s Rund!”
    • WEMOS
      • WEMOS D1 – Arduino UNO kompatibles Board mit ESP8266 Chip
      • WEMOS D1 Mini – Übersicht
      • Wemos D1 mini Shields
    • STM32x
      • STM32F103C8T6 – Übersicht
    • Maker UNO
      • Maker UNO – Überblick und Test
    • ATTiny85
      • Mini Arduino mit ATTiny85 Chip
      • ATtiny85 mit dem Arduino UNO beschreiben
  • Android
  • Über mich
  • DeutschDeutsch
  • EnglishEnglish
Menu

Python Flask #4: Scripten im HTML Template mit Jinja2

Veröffentlicht am 5. März 202130. April 2023 von 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

Kategorien

Tools

  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator
  • Widerstandsrechner
  • Rechner für Strom & Widerstände
  • ASCII Tabelle

Meta

  • Videothek
  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Kontakt
  • Cookie-Richtlinie (EU)

Links

Blogverzeichnis Bloggerei.de Blogverzeichnis TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com
©2023 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
x
x