Webframeworks

Inhaltsübersicht

  • Einführung
  • Web Grundlegende Eigenschaften
  • Interaktion im Web
  • Internet Resource
  • Model View Controller
  • Übersicht Python Webframeworks
  • IPython Notebook - Grundlagen und Einführung
  • Flask - Grundlagen und Einführung
  • web2py - Grundlagen und Einführung
  • Django - Grundlagen und Einführung

Leistungsnachweis "Webframeworks"

Installieren sie die drei Webframeworks

und entwickeln sie jeweils die Aufgabenstellung vergleichbar zur der Aufgabe Flaskr aus dem Flask Tutorial

Verwenden sie als Datenbank SQlite3.

Vergleichen sie sowohl die Installation als auch die Benutzung der drei Frameworks mit ihren Stärken und Schwächen insbesondere bezgl. ihrer Interfaces und versuchen sie eine persönliche Empfehlung daraus zu erstellen.

Erstellen sie ihren Vergleich sowie den von ihnen erstellten Code in einem IPython Notebook und geben dieses zusammen mit dem gesamten lauffähigen Code als Archiv ab.

Einführung in Webframeworks

Framework

Rahmenwerk bzw. Gerüst für Software-Anwendungen

  • Application Framework
  • Test Framework
  • Web Framework

Dabei kann ein Framework oftmals mehrere andere enthalten und eine Definition ist meist nicht einfach.

Web - Grundlegende Eigenschaften

Basis des Webs

  • HTTP als Protokoll
  • HTML, CSS als Format

HTTP

  • Request
  • Response

HTML

Format für die Darstellung und die Interaktion mit dem Webserver

Interaktion im Web

HTML Formulare

Formulare erlauben dem User bestimmte Felder zu füllen und dem Server zurückzuschicken. Diese Felder werden über die CGI-Schnittstelle vom Webserver bei der Methode GET über die Umgebungsvariable und bei der Methode POST über STDIN übergeben.

form-Tag

<form [action=url enctype=encoding method=method]> ... </form>

input-Tag

<input type=checkbox [name=name checked value=string]>
<input type=file [name=name maxlength=n size=n]>
<input type=hidden [name=name value=string]>
<input type=image [name=name align=type border=n src=url]>
<input type=password [name=name maxlength=n size=n value=string]>
<input type=radio [name=name checked value=string]>
<input type=reset [value=string]>
<input type=submit [name=name value=string]>
<input type=text [name=name maxlength=n size=n value=string]>

select-, option-, textarea-Tag

<select [name=name multiple size=n]> ... </select>
<option [selected value=string]> ... </option>
<textarea [name=name cols=n rows=n]> ... </textarea>
PTF Bestellformular

PTF Bestellformular

Kunde

Name

Strasse

Ort Plz

Kreditkarte

Mastercard Visacard

Nummer Ablaufdatum

PTF Bestellgröße

Groß Mittel Klein

Zustellung

Expresszustellung

Vielen Dank für ihre Bestellung!

In [1]:
%%writefile PTFBestellformular.py
<html>
    <head>
    <title>PTF Bestellformular</title>
    </head>
    <body>
    <h1>PTF Bestellformular</h1>
    <form ACTION="http://python.website.example/cgi-bin/form.py" method="GET">
    <h3>Kunde</h3>
    <p>Name <input name="Kunde" size="46"/></p>
    <p>Strasse <input name="Strasse" size="40"/></p>
    <p>Ort <input name="Ort" size="20"> Plz <input name="Plz" size="4"></p>
    <h3>Kreditkarte</h3> 
    <p>Mastercard <input name="Kreditkarte" type="radio" value="Mastercard"/>
    Visacard <input name="Kreditkarte" type="radio" value="Visacard"/></p>
    <p>Nummer <input name="Kreditkartennummer" size="10"/>
    Ablaufdatum <input name="Ablaufdatum" size="4"/></p>
    <h3>PTF Bestellgr&ouml;&szlig;e</h3>
    <p>Gro&szlig; <input name="Groesse" type="radio" value="gross"/>
    Mittel <input name="Groesse" type="radio" value="mittel"/>
    Klein <input name="Groesse" type="radio" value="klein"/></p>
    <h3>Zustellung</h3>
    <p>Expresszustellung <input name="Express" type="checkbox"/></p>
    <p><input type="submit" value="Bestellung abschicken"/></p>
    </form>
    <p>Vielen Dank f&uuml;r ihre Bestellung!</p>
    </body>
</html>
Writing PTFBestellformular.py

CGI Schnittstelle (Common Gateway Interface)

Die Common Gateway Interface (CGI) Schnittstelle erlaubt einem HTTP Server die Verantwortlichkeit für eine Client Anfrage an ein CGI Script weiterzugeben.

Umgebungsvariablen

Wenn der Webserver ein CGI-Skript aufruft, setzt er einige Umgebungsvariablen. Diese Umgebungsvariablen werden an das CGI-Skript vererbt und können somit angesprochen und wie Parameter verarbeitet werden. Die Antwort auf eine entsprechende CGI-Anfrage muss dann das CGI-Skript selbst zusammenstellen und als HTTP-Response über den Webserver an den Client ausgeben.

Verarbeitung eines HTML-Formulars

WSGI - Web Server Gateway Interface

Das Python Web Server Gateway Interface (WSGI) ist eine Schnittstellen-Spezifikation, die eine Schnittstelle zwischen Webservern und Web Application Frameworks bzw. Web Application Servern festlegt, um die Portabilität von Webanwendungen auf unterschiedlichen Webservern zu fördern. Diese einheitliche Schnittstelle soll als Middleware die Portabilität fördern und somit mit der Auswahl eines Frameworks nicht die Auswahl des Webservers einschränken und umgekehrt. Mit der WSGI Schnittstelle wird somit eine Trennung des Webservers und der dahinterliegenden Webanwendung erreicht.

Zusammenfassung Interaktion im Web

  • Request Objekt
  • Response Objekt
  • Session Objekt
  • CGI / WSGI Anbindung
  • Formular Objekt

Internet Resource

URL, URI, URN

URL - Uniform Resource Locator

A URL "describes the syntax and semantics for a compact string representation for a resource available via the Internet."

URI - Uniform Resource Identifier

"A Uniform Resource Identifier (URI) provides a simple and extensible means for identifying a resource"

URI, URL, and URN - 1

from RFC 3986 § 1.1.3(1):

"A URI can be further classified as a locator, a name, or both. The term "Uniform Resource Locator" (URL) refers to the subset of URIs that, in addition to identifying a resource, provide a means of locating the resource by describing its primary access mechanism (e.g., its network "location"). The term "Uniform Resource Name" (URN) has been used historically to refer to both URIs under the "urn" scheme [RFC2141], which are required to remain globally unique and persistent even when the resource ceases to exist or becomes unavailable, and to any other URI with the properties of a name."

URI, URL, and URN - 2

from RFC 3986 § 1.1.3(2):

An individual scheme does not have to be classified as being just one of "name" or "locator". Instances of URIs from any given scheme may have the characteristics of names or locators or both, often depending on the persistence and care in the assignment of identifiers by the naming authority, rather than on any quality of the scheme. Future specifications and related documentation should use the general term "URI" rather than the more restrictive terms "URL" and "URN"

URI Syntax - allgemeine Struktur

<first>:<second>/<third>?<fourth>

URI Syntax Komponenten

<scheme>:<scheme-specific-part>

bzw. URI Syntax mit einer hierarchischen Beziehung innerhalb einer Authorität

<scheme>://<authority><path>?<query>

mit der Syntax einer Server-basierten Authorität

<userinfo>@<host>:<port>

URI Definition

URI         = scheme ":" hier-part [ "?" query ] [ "#" fragment ]

hier-part   = "//" authority path-abempty
              / path-absolute
              / path-rootless
              / path-empty

authority   = [ userinfo "@" ] host [ ":" port ]

Reserved, Unreserved, Escaped Characters

reserved    = gen-delims / sub-delims

gen-delims  = ":" / "/" / "?" / "#" / "[" / "]" / "@"

sub-delims  = "!" / "$" / "&" / "'" / "(" / ")"
              / "*" / "+" / "," / ";" / "="

unreserved  = ALPHA / DIGIT / "-" / "." / "_" / "~"

pct-encoded = "%" HEXDIG HEXDIG

HEXDIG         = digit | "A" | "B" | "C" | "D" | "E" | "F" |
                         "a" | "b" | "c" | "d" | "e" | "f"

wichtigste Schemes

  • ftp ftp://ftpserver:port/path (File Transfer protocol)
  • file file:///path (Lokaler File)
  • http http://webserver:port/path (Hypertext Transfer Protocol)
  • mailto mailto:local@domain (Electronic mail address)
  • telnet telnet://telnetserver:port (Telnet protocol)

Beispiele

  ftp://ftp.is.co.za/rfc/rfc1808.txt

  http://www.ietf.org/rfc/rfc2396.txt

  ldap://[2001:db8::7]/c=GB?objectClass?one

  mailto:John.Doe@example.com

  news:comp.infosystems.www.servers.unix

  tel:+1-816-555-1212

  telnet://192.0.2.16:80/

  urn:oasis:names:specification:docbook:dtd:xml:4.1.2

Zusammenfassung: allgemeine Syntax einer Internet Resource

<scheme>://<userinfo>@<host>:<port>/<path>;<params>?<query>#<fragment>

Beispiele:

     foo://example.com:8042/over/there?name=ferret#nose
     \_/   \______________/\_________/ \_________/ \__/
      |           |            |            |        |
   scheme     authority       path        query   fragment
      |   _____________________|__
     / \ /                        \
     urn:example:animal:ferret:nose

REST - Representational State Transfer

In dem RESTful API Tutorial ist die grundlegende Struktur dieser API aufgeschlüsselt:

  1. Client–server – Durch die Trennung der Benutzeranforderungen von den Anforderungen der Datenspeicherung wird die Portierbarkeit der Benutzerschnittstelle über verschiedene Plattformen sichergestellt als auch die Skalierbarkeit durch die Vereinfachung der Serverkomponenten.
  2. Stateless – Jeder Request von einem Client zum Server muss alle notwendigen Informationen zum Verständnis dieses Requests beinhalten und kann nicht davon ausgehen, dass irgendein Kontext auf dem Server gespeichert ist. Der Zustand der Session wird daher vollständig auf dem Client gehalten.
  3. Cacheable – Randbedingungen für das Caching erfordern dass die Daten innerhalb eines Response auf einen Request implizit oder explizit als cacheable oder nicht-cacheable gekennzeichnet werden. Falls ein Response cacheable ist, dann wird dem Client Cache das Recht zugestanden die Response Daten für spätere, ähnliche Requests weiterzuverwenden.
  4. Uniform interface – Durch die Anwendung des Software Engineering Prinzips der Verallgemeinerung der Komponentenschnittstelle wird die gesamte Systemarchitektur vereinfacht und die Sichtbarkeit der Interaktionen verbessert. Um eine einheitliche Schnittstelle zu erhalten sind jedoch mehrere architektonische Randbedingungen für ein benutzergerechtes Verhalten der Komponenten notwendig. REST wird durch vier Schnittstellenbedingungen definiert: Adressierbarkeit der Ressourcen; Manipulation der Ressourcen durch deren Repräsentation; selbst-beschreibende Nachrichten; und Hypermedia as the Engine of Application State (HATEOAS).
  5. Layered system – Ein Schichtenmodell erlaubt einer Architektur den Aufbau von hierarchischen Schichten mit der Randbedingung, dass nur die direkt darunterliegende Komponente für eine darüberliegende Komponente sichtbar ist und nur mit dieser interagieren kann.
  6. Code on demand (optional) – REST ermöglicht die Erweiterung der Client Funktionalität durch das Herunterladen und Ausführen von Code in Form von Applets oder Scripten. Dies vereinfacht die Clients durch die Reduktion der Anzahl von vorimplementierten Features.

MVC

Model - View - Controller

  • Model für die grundlegende Datenhaltung
    • Datenbankanbindung
  • View für die Ansicht im Browser
    • HTML Templates
  • Controller
    • Steuerung der Anwendung

Architektur

Strukturierung der Software-Architektur nicht nur aber insbesondere in Webanwendungen um die Trennung zwischen der Datenhaltung (dem Datenmodell und der Speicherung aller Daten in einer Datenbank), dem Prozessverlauf (der Steuerung und der eigentlichen Verarbeitung der Daten sowie der Auslieferung als "fertige" Webseite) und der Ansicht (der Darstellung der Eingaben und der Ergebnisse als Webseite) durchzuführen.

In einfachen Webanwendungen ist

  • die Datenbank in der Regel eine SQL-Datenbank (SQLite, MySQL, PostgreSQL, ...),
  • die Steuerung wird durch ein entsprechendes Python-Skript ermöglicht und
  • die Ansicht wird durch ein HTML- und CSS-Template dargestellt.

Weitere Interfaces eines Frameworks

  • Benutzerverwaltung
  • Logging
  • SQL Adapter
  • RESTful Interface
  • Test Interface
  • Plugin Interface
  • Command Line Interface
  • ...

Übersicht Python Webframeworks

Auf der sehr umfassenden Seite des Python Wiki's über Webprogramming ist auch eine

Übersicht über Python Web-Frameworks

enthalten.

Jupyter - Grundlagen und Einführung

IPython

IPython ist eine Erweiterung der normalen Python Shell:

  • Erweiterung der Interaktiven Shell von Python sowohl Terminal als auch Qt-basiert
  • Eine Browser-basierte Notebook Anwendung für Code, Text, mathematischen Ausdrücken, eingebetteten Zeichnungen und anderen Medienformaten.
  • Unterstützung für interaktive Datenvisualisierung und diversen GUI-Toolkits
  • Flexible, eingebettete Interpreter, die in eigenen Projekten verwendet werden können.
  • Einfach benutzbare und hoch performante Tools für Parallelcomputing

Jupyter Notebook

Jupyter Notebook ist eine web-basierte, interaktive Computerumgebung, in dem Codeausführung, Text, mathematische Ausführungen, Grafiken und andere Medien in einem einzigen Dokument verwendet werden können.

Diese Notebooks sind normale Dateien, die mit Kollegen geteilt, in andere Formate wie HTML, PDF, etc. konvertiert werden kann. Jedes öffentlich verfügbare Notebook kann mittels des Jupyter Notebook Viewer Dienstes als statische Webseite angesehen werden.

Installation Jupyter Notebook

pip install jupyter

Mit der Installation von Jupyter Notebook wird automatisch auch IPython installiert.

Aufgabe

Arbeiten Sie die Dokumentation von Jupyter Notebook durch.

Aufgabe

Erstellen Sie eine einfache Funktion, die mittels der Bibliothek telnetlib einen GET-Request zu einem Webserver durchführt. Als Beispiel können Sie "http://www.w3.org/pub/WWW/TheProject.html" verwenden.

In [2]:
from telnetlib import Telnet

def simpleTest(host,port=80,path="/"):
    connection = Telnet(host,port)
    connection.write('GET {} HTTP/1.1\r\n'.format(path))
    connection.write('Host: www.w3.org\r\n')
    connection.write('\r\n')
    response = connection.read_all()
    return response

rs = simpleTest('www.w3.org',port=80,path="/pub/WWW/TheProject.html")
print rs
HTTP/1.1 301 Moved Permanently
Date: Sun, 12 Jun 2016 15:49:39 GMT
Location: http://www.w3.org/TheProject.html
Cache-Control: max-age=21600
Expires: Sun, 12 Jun 2016 21:49:39 GMT
Content-Length: 241
Content-Type: text/html; charset=iso-8859-1
Vary: upgrade-insecure-requests

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="http://www.w3.org/TheProject.html">here</a>.</p>
</body></html>

Aufgabe

Erweitern Sie die einfache Funktion zu einer Klasse, die unterschiedliche HTTP-Methoden sowie unterschiedliche HTTP-Parameter behandeln können