HTTP

Aus ProgrammingWiki

Archivierte Version vom 2017-01-15T21:38:04+00:00. Aktuelle Version

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 auf Anfragen (Request) mit entsprechenden Antworten (Response) reagieren. Solche Antworten können ganze Webseiten enthalten oder auch ganz bestimmte Daten. Neben dem einfachen Liefern von Werten aus einer am Server gespeicherten Datenbank können auch deutliche komplexere Operationen am 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 Kommunikation erfolgt über das HTTP Protokoll. Mit GET und POST Abfragen werden, ausgehend vom Client, 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 werden 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. Es ist aber auch möglich selbst eine Anwendung 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, es wird also kein Compiler benötigt. Der Inhalt einer PHP Datei wird direkt vom Webserver interpretiert. Das passiert genau zu dem Zeitpunkt, wenn die PHP Datei durch einen Request angefordert wird. Dabei wird nur interpretiert was in den Tag 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.

<?php
$message = "";
if ($_SERVER["REQUEST_METHOD"] == "POST"){
  if ($_POST["inStr"] == "Selektoren")
    $message = "Richtig!";
  else
    $message = "Leider falsch!";
}
?>
<!doctype html>
<html>
<head>
  <title>Frage</title>
  <meta charset="UTF-8">
</head>
<body>
  <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
    <label>Mit ... können in CSS Elemente adressiert werden?</label><br>
    Antwort: <input type="text" name="inStr">
    <input type="submit" value="OK"><br>
    <div><?php echo $message;?></div>
  </form>
</body>
</html>

Ü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 Fragestellung 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
Erweitern Sie den PHP Code:
- Legen Sie für das Ergebnis-div serverseitig einen Standardwert fest
- Speichern Sie am 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 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 ändern Sie die iframe-URL entsprechend
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

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. Beachten Sie auch Sicherheitsaspekte! Verlinken Sie Login-Seite und bereits erzeugte Sudoku-Seiten, sodass eine sinnvolle abgeschlossene Seitennavigation erfolgen kann.

Beispiellösung WE1-P4.zip

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.
Erproben Sie die Vorlesungsbeispiele und modifizieren Sie sie.
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.
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.

HTTP

Allgemein

PHP

iframe

Suche