39. Lektion: Webseiten für den Webserver erstellen: Unterschied zwischen den Versionen

Version vom 8. Februar 2024, 13:37 Uhr

Wenn der Webserver effektiv genutzt werden soll, so sind entsprechende Webseiten erforderlich.
Danny hat eine Webseite erstellt mit der man das Micropython Demoboard steuern kann. Hier ein Ausschnitt:


An diesem Beispiel wollen wir uns das Erstellen einer Webseite und den Einsatz möglicher Steuerungselemente genauer ansehen.
Hier kann eine Zipdatei herunter geladen werden, die die Dateien zur Darstellung dieser Demoseite enthält:
media:Webserver_Demo.zip

HTML Steuerelemente

Knopf (button)

So sieht z.B. ein Button aus:

Und so wird er erzeugt:

<form action="/control/led" method="GET">
  <input type="hidden" name="state" value="on">
  <button type="submit">LED Einschalten</button>
</form>

Das sehen wir uns mal näher an:

<form action="/control/led" method="GET">
   ...
</form>

Zuerst wird ein HTML-Formular erstelt. Dieses enthält 2 Attribute:

action

gibt an welche Funktion auf dem Server die Daten dieses Formulares verarbeiten soll.

Hier die Stelle in Serverprogramm:

@server.route("/control/led", ["GET"])
def led(request):

methode

gibt an wie die Daten zum Server übertragen werden sollen (GET oder POST).

In der 2. Zeile wird angegeben wo die Daten für dieses Formular herkommen sollen:

  <input type="hidden" name="state" value="on">

Dazu dient das Input-Element. Es hat keinen schließenden Tag. Dieses hat hier 3 Argumente:

type

gibt an wie die Daten geholt werden:

• text
• email
• url
• tel
• hidden
• checkbox
• radio
• select/option

Hier wird als type hidden verwendet, weil nichts eingegeben werden muss. Dieser Button liefert per Definition den Wert on zurück.

name

Das ist der Name der Variablen in der die Funktion auf dem Server die Daten findet.

value

Ist der Wert, der in name übergeben wird.

Hier wird von der Server-Funktion der Wert geholt:

@server.route("/control/led", ["GET"])
def led(request):
    state = request.query.get("state", None)

Nun muss noch der Button definiert werden:

  <button type="submit">LED Einschalten</button>

Das Button-Tag hat das Argument type mit dem Wert submit. Das bedeutet, das beim Anklicken des Button die Werte des Formulars zum Server geschickt werden.
Zwischen dem öffnenden und dem schließenden Tag steht die Beschriftung des Button.

Dropdown-Menue - (select/option)

Eingabe Felder (text)

Schieberegler (slider)

Aufbau einer Webseite