Web Engineering 1/HTTP

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
__NOTOC__
{{Ziele|
* 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. [https://httpd.apache.org/ 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 [https://nodejs.org/en/ 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. [https://www.apachefriends.org/de/index.html 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 <tt><?php  ?></tt> 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 [http://php.net/manual/de/langref.php php.net] zu finden.

In HTML wird mit <tt>form</tt> ein Formularbereich bereitgestellt, der die HTTP-Kommunikation kapselt. Nur durch entsprechendes Setzen der Attribute wird der Aufbau einer Anfrage definiert. Mit <tt>input</tt> Elementen können Steuerelemente im Formular positioniert werden. Die Inhalte, z.B. von Eingabefeldern, werden als Parameter unter dem definierten <tt>name</tt> der Anfrage automatisch hinzugefügt. Durch ein <tt>input</tt>-Element des Typs <tt>submit</tt> wird ein Button bereitgestellt, der die definierte Anfrage auslöst.
{|
|style="width: 36em"|<code id="587bdd045c3e2" readonly>
<?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>
</code>
|style="vertical-align:top;padding-left:1em;"|
* ''Ü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: <tt>http://localhost/datei.php?inStr=x</tt>.''
* ''Erweitern Sie den PHP-Code:''
** ''Legen Sie für das Ergebnis-<tt>div</tt> 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-<tt>div</tt>.
|}

==iframe==
Mit <tt>iframe</tt> 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 <tt>src</tt>-Attributs definiert. Das Ergebnis der Anfrage wird innerhalb des definierten Bereichs angezeigt.
{|
|style="width: auto"|
<html><iframe width="630" height="380" src="//jsfiddle.net/pw_we1/8mxq3gf0/embedded/html,result/" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
* ''Ändern Sie den <tt>iframe</tt> 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 <tt>iframe</tt> nun die bereits im www-Ordner vorhandene PHP-Datei und analysieren Sie das Ergebnis.<br>(Hinweis: Starten Sie einen neuen Tab um den Browser-Cache zu umgehen.)''
* ''Haben Sie die URL <tt><nowiki>http://localhost/datei.php</nowiki></tt> verwendet? Versuchen Sie es nur mit <tt>datei.php</tt>''
* ''Verschieben Sie die PHP-Datei in einen Unterordner und passen Sie die <tt>iframe</tt>-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==
{{Projekt|
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 <document>WE1-P4.zip</document>}}
# Illustrieren Sie die Same-Origin-Policy mit einem selbstgewählten Beispiel. Zeigen Sie auch, wie man <tt>iframe</tt> benutzen kann, um diese Einschränkung zu umgehen.<br>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 [http://de.wix.com/ WIX] und vergleichen Sie die Vorgehensweise mit dem Editieren einer Website mit WebStorm. Beschreiben Sie außerdem den jeweiligen Softwaretyp.