HTTP

Aus ProgrammingWiki

Wechseln zu: Navigation, Suche

Wissen Können Projekt
  • HTTP als Protokoll zur Client-Server-Kommunikation
  • Funktionsweise eines Webservers
  • Serverseitige Verarbeitung mit PHP, CGI, JEE, Node.js
  • Übertragung von Formulardaten (Client-Server-Interaktion)
  • Serverseitiges Anfragen-Management mit PHP und Node.js
  • Clientseitiges Abfragen von Informationen aus externen Quellen
  • Implementation einer Login-Funktionalität
  • Geeignete Verlinkung von Dokumentation, Sudoku-Spielfeld und Login-Seite

Allgemein

Eine Webanwendung wird typischerweise in einem Browser ausgeführt. Die Quelle dieser Anwendung ist also vorrangig im Internet zu finden. Zur Bereitstellung einer solchen Quelle dient ein Webserver. Dieser hat dabei nicht nur die Aufgabe auf Anforderung bestimmte Webseiten zu liefern, sondern kann generell auf Anfragen (Request) mit entsprechenden Antworten (Response) reagieren. Solche Antworten können vollständige Webseiten enthalten oder auch ganz bestimmte Daten. Neben dem einfachen Liefern von Werten aus einer vom Server gespeicherten Datenbank können auch deutlich komplexere Operationen beim Server ausgeführt werden. Nutzt eine Webanwendung diese Art der Interaktion wird sie zu einer Client-Server-Anwendung, die je nach Balance serverlastig (Thin-App) oder clientlastig (Fat-App) arbeitet.

Die Client-Server-Kommunikation erfolgt über das HTTP (Hypertext transfer protocol). Mit GET- und POST-Abfragen werden, stets vom Client initiiert und unter Angabe einer Ziel-URL, Daten an einen bestimmten Webserver gesendet. Der angesprochene Server antwortet daraufhin mit einem Statuscode und bestenfalls mit den angeforderten Informationen. Solche Anfragen können explizit unter Angabe aller möglichen Details versendet oder implizit durch die in HTML eingebauten Features genutzt werden.

Die Bereitstellung eines Webservers erfolgt im einfachsten Fall durch Installation und Konfiguration eines entsprechenden Software-Produkts (z.B. Apache Webserver). Die serverseitige Programmierung erfolgt hier zumeist in der Skriptsprache PHP, wobei die PHP-Dateien im www-Ordner des Webservers bereitgestellt werden. Alternativ ist es möglich, selbst eine Anwendung (Webserver) zu schreiben, die einen solchen Dienst bereitstellt (z.B. mit Node.js). Für diesen Fall gibt es in den meisten Programmiersprachen entsprechende Bibliotheken zur Unterstützung, sodass hier kein höherer Programmieraufwand notwendig ist.

  • Recherchieren Sie den Unterschied zwischen GET und POST! Für welche Anwendungsfälle ist die eine oder andere Option vorzuziehen?
  • Installieren Sie einen Webserver Ihrer Wahl (z.B. XAMPP).
  • Stellen Sie eine HTML Datei auf diesem Webserver bereit und rufen Sie diese über den Browser auf.

PHP

PHP ist eine Skript-Sprache. PHP-Programme werden interpretiert. Es wird also kein Compiler benötigt. Der Inhalt einer PHP-Datei wird direkt vom Webserver ausgewertet. Das passiert genau zu dem Zeitpunkt, wenn die PHP-Datei durch einen Request angefordert wird. Dabei wird nur das interpretiert, was in den Tag <?php  ?> eingefasst ist. Sonstiger Inhalt einer PHP Datei wird unverändert übernommen. Das Ergebnis dieser Interpretation bildet den Inhalt der Antwort auf die Anforderung. Die Sprach-Referenz ist unter php.net zu finden.

In HTML wird mit form ein Formularbereich bereitgestellt, der die HTTP-Kommunikation kapselt. Nur durch entsprechendes Setzen der Attribute wird der Aufbau einer Anfrage definiert. Mit input Elementen können Steuerelemente im Formular positioniert werden. Die Inhalte, z.B. von Eingabefeldern, werden als Parameter unter dem definierten name der Anfrage automatisch hinzugefügt. Durch ein input-Element des Typs submit wird ein Button bereitgestellt, der die definierte Anfrage auslöst.

  • Übernehmen Sie den Beispielcode in eine neue .php-Datei und stellen Sie diese auf Ihrem Webserver bereit.
  • Rufen Sie die Datei über den Browser auf und interpretieren Sie den Inhalt (lassen Sie sich auch vom Browser den Seitenquelltext anzeigen).
  • Benutzen Sie Entwicklerwerkzeuge Ihres Browsers um die gesendeten und empfangenen Datenpakete anzuzeigen.
  • Lösen Sie die Fragestellung im Beispiel und machen Sie sich klar, was beim Klick auf den Button wirklich passiert (server- und clientseitig).
  • Stellen Sie die HTTP-Kommunikation auf GET um und analysieren Sie die Unterschiede mit den Entwicklerwerkzeugen. URL: http://localhost/datei.php?inStr=x.
  • Erweitern Sie den PHP-Code:
    • Legen Sie für das Ergebnis-div serverseitig einen Standardwert fest.
    • Speichern Sie auf dem Server eine Datei mit der zuletzt gegebenen Antwort.
    • Laden Sie die zuletzt gegebene Antwort und nutzen Sie diese als Standardwert für das Ergebnis-div.

iframe

Mit iframe steht ein weiterer HTML-Tag zur Verfügung, der implizit eine HTTP-Kommunikation realisiert. Er dient zur Einbindung externer Inhalte in eine lokale Webseite. Die HTTP-Anfrage wird hierbei automatisch beim Laden der Seite ausgelöst. Der Inhalt wird durch die Definition des src-Attributs definiert. Das Ergebnis der Anfrage wird innerhalb des definierten Bereichs angezeigt.

  • Ändern Sie den iframe sodass eine Seite Ihrer Wahl angezeigt wird.
  • Schauen Sie sich die Datenpakete mit den Entwicklerwerkzeugen an und erklären Sie den zeitlichen Ablauf.
  • Übernehmen Sie den Code in eine neue HTML-Datei und platzieren Sie diese im www-Ordner des Webservers.
  • Referenzieren Sie im iframe nun die bereits im www-Ordner vorhandene PHP-Datei und analysieren Sie das Ergebnis.
    (Hinweis: Starten Sie einen neuen Tab um den Browser-Cache zu umgehen.)
  • Haben Sie die URL http://localhost/datei.php verwendet? Versuchen Sie es nur mit datei.php
  • Verschieben Sie die PHP-Datei in einen Unterordner und passen Sie die iframe-URL dem entsprechend an.
  • Fügen Sie in der PHP-Datei einen einfachen Link zur HTML-Datei im übergeordneten Ordner hinzu. Nutzen Sie dabei das Wissen zur Definition relativer URLs.
  • Erklären Sie die Verhaltensweise bei Verwendung des Links.

Projekt und weitere Übungen

Erstellen Sie eine PHP-Seite zur Realisierung eines Logins. Die zulässigen Login-Namen und Passwörter sollen in einer Datei am Server gespeichert sein. Verlinken Sie die Login-Seite und bereits erzeugte Sudoku-Seiten, sodass eine sinnvolle abgeschlossene Seitennavigation erfolgen kann.

Beispiellösung
WE1-P4.zip (0.1 MB)
  1. Illustrieren Sie die Same-Origin-Policy mit einem selbstgewählten Beispiel. Zeigen Sie auch, wie man iframe benutzen kann, um diese Einschränkung zu umgehen.
    Dies ist KEINE Anleitung zum Überwinden von Sicherheitsmaßnahmen, sondern zum Verstehen der Probleme durch Fachleute.
  2. Erproben Sie die Vorlesungsbeispiele und modifizieren Sie sie.
  3. Entwickeln Sie ein PHP/HTML-Dokument, das interessante Daten aus dem Internet beschafft (z.B. über einen Anfragedienst) und anschließend tabellarisch darstellt. Dabei soll mind. eine Nutzereingabe berücksichtigt werden.
  4. Entwickeln Sie eine weitere kleine Website mit WIX und vergleichen Sie die Vorgehensweise mit dem Editieren einer Website mit WebStorm. Beschreiben Sie außerdem den jeweiligen Softwaretyp.
Von „https://programmingwiki.de/Web_Engineering_1/HTTP“
Persönliche Werkzeuge