Etwas zur Wiederholung bzw. Vertiefung

Transkript

1 Etwas zur Wiederholung bzw. Vertiefung [1] Webtechnologien (2. Semester) HTTP Entwicklungsumgebungen PHP Teil1 bis 3 Javascript Teil1 und besonders Teil3 [2] Rechnernetze (1. Semester) OSI-Modell 2

2 Allgemeines I Web-Ressource Web-Ressource = PHP-Skript mit URL als Name Auf eine Web-Ressource wird mit der GET-Methode zum Lesen und (hier) mit der POST-Methode zum Schreiben. Vereinfachend kann aber auch immer mit POST gearbeitet werden. Die zugreifende Software kann ein Browser oder ein Server sein. URL Server PHP- Skript 3 Allgemeines II URL Browser Verkürzte Darstellung Browser (1) (4) (3) Server PHP- Skript (2) Server In vier Schritten verläuft immer der Zugriff auf Web-Ressourcen. Der Client stößt den Vorgang an: pull-verfahren (Ziehen) Der Server kann hier nur darauf warten, dass er befragt wird, er kann keine Informationen von sich an den Client senden. Zum Start muss in den Client per URL (in der Address-Leiste) mit der Seite samt Javascript-Code geladen werden, damit Schritt (1) ausgeführt wird. PHP- Skript 4

3 Allgemeines III - Aufbau der URL Adresse des Servers Skriptname Skriptparameter Dateiname(key1=val1, key2=val2,,keyn=valn) Dies hier basiert auf der HTTP-Get-Methode. 5 Allgemeines IV Beispiel für die GET-Methode login(elvira,12345) Zugriff in login.php: $_GET['id'] $_GET['pw'] Statt eines DNS-Namens kann auch die IP-Adresse angegeben werden. Der Dateiname wird hier als Name einer Routine aufgefasst. 6

4 Woher kennen sich die Server? I Rechner1 Browser Server1 include Liste der IP-Adressen Rechner2 Browser Server2 Die Liste der IP-Adressen wird manuell vor dem Lauf bestimmt. Diese wird den Servern per include in die PHP-Skripte mitgeteilt. Die Browser kennen die IP-Adressen ihrer Server durch deren manueller Eingabe in die Adresszeile (URL) Die Liste ersetzt einen Repository-Server. 7 Woher kennen sich die Server? II Liste der IP-Adressen Aufbau der IP-Liste $IP_List[]= array('name'=>'name1', 'IP'=>'IP1'); $IP_List[]= array('name='>'name2', 'IP'=>'IP2');... $IP_List[]= array('name'=>'namen', 'IP'=>'IPN'); Jeder Server hat einen Namen (Name1...NameN) und auch eine IP-Adresse als String in der Punktnotation, also z.b Die Datei mit diesem Code zum Aufbau des Repositorys wird in den Skripten per include integriert. Sie kann z.b. iplist.inc.php heißen. 8

5 Woher kennen sich die Server? III Wie erfährt der Server, wer er ist? Die eigene IP-Adresse steht in $_SERVER['SERVER_ADDR']. Dann er in der Liste $IP_List[] seinen Eintrag suchen und damit bestimmen, wie er heißt. Wie erfährt der Server, von wem er den Request erhielt? Diese Adresse steht in $_SERVER['REMOTE_ADDR'], sofern kein Proxy- Server dazwischen geschaltet ist. Falls doch: if (isset($_server['http_x_forwarded_for'])) { $cip= $_SERVER['HTTP_X_FORWARDED_FOR']; } else { $cip= $_SERVER['REMOTE_ADDR']; } Siehe 9 Wie kommen die Quellen auf die Server? I Rechner1 Browser Server1 Entwicklungsrechner Rechner2 Browser Server2 Auf einem der Rechner (Rechner1) wird entwickelt und dort lokal auf htdocs installiert. Vor dem Lauf werden alle Dateien aus htdocs von Rechner1 auf den zweiten und weiteren Rechner Rechner2 kopiert. 10

6 Wie kommen die Quellen auf die Server? II Idee Alle Dateien einer Lösung werden an einem Rechner erstellt. Dann werden sie auf alle anderen Rechner verteilt. Wenn ein Skript aufgerufen wird, wird die Datei mit den Namen und IP-Adresse (siehe oben) per include integriert. Dann wird anhand der eigenen IP-Adresse bestimmt, wer sie selber sind und welche Partner sie haben. Dann beginnt der eigentliche Teil des Skripts. 11 Wie kommen die Quellen auf die Server? III Möglichkeiten der Installation Es wird mit einem Memory-Stick kopiert: einfach und aufwändig. Wenn alle VMs auf einem Rechner liegen, kann mit einem Shared Folder gearbeitet werden: Dies geht nur unter root innerhalb der VM. Am besten ist es, wenn Sie sich ein Shell-Skript zum Kopieren schreiben, das Sie vor jedem Lauf aufrufen. Da in jeder VM ein FTP-Server installiert ist, können Sie diesen nehmen: Sie benötigen einen Client, der noch installiert werden muss. Sie müssen den FTP-Server konfigurieren und muss Passwörtern arbeiten. Sie müssen den Port 22 auf dem empfangenen Server öffnen. 12

7 Die Sache mit der Firewall I Rechner1 Rechner2 Browser Web- Server Firewall Port 80 Firewall Web- Server Um von Außen einen HTTP-Request empfangen zu können, muss beim Empfänger die Firewall den Port 80 öffnen. Dasselbe ist bei einem FTP-Server (Port 22) nötig. In der Richtung von Innen nach Außen ist die Firewall immer offen, nur umgekehrt nicht (jedenfalls normalerweise). 13 Die Sache mit der Firewall II Als root einloggen (id=root, pw=rootroot) Über System>Administration>Firewall die Konfiguration anstoßen. 14

8 Die Sache mit der Firewall III Ein Häkchen bei WWW (HTTP) machen und vielleicht das Häkchen bei SSH darüber wegmachen. Dann oben auf Anwenden klicken und bestätigen. 15 Die Sache mit der Firewall IV Dann den Webserver starten (falls es nicht schon vorher erfolgte). Im Shell mit dem ifconfig-kommando die eigene IP-Adresse bestimmen. Das wird dann mit allen beteiligten VMs gemacht. Die IP-Adressen werden in die include-datei geschrieben (siehe oben). 16

9 Die Sache mit der Firewall V Es ist hoffentlich klar, dass mit offenen Ports nur in einer sicheren Umgebung gearbeitet werden sollte! Auf einer anderen Maschine im Shell mit nmap die offenen Ports bestimmen: es muss Port 80 offen sein (und eventuell auch Port 22). 17 Wechselseitiger Ausschluss I Browser1 Server Hier wird der Apache als Server angenommen. Browser2 Nicht nur mehrere Browser können parallele Aktivitäten auslösen, sondern auch ein Browser kann mehrere Skripte parallel starten (mittels Ajax). PHP- Skript1 Thread1 PHP- Skript2 Thread2 Jedes Skript läuft in einem eigenen Thread parallel zu anderen Skripten. Wechselseitiger Ausschluss ist für den Zugriff auf Dateien daher erforderlich. 18

10 Wechselseitiger Ausschluss II Bemerkung In XAMPP wird die nicht-thread-fähige PHP-Implementierung benutzt. Dies bezieht sich jedoch auf die fehlende Möglichkeit Threads innerhalb eines Skripts zu benutzen. Hier wird aber der Zugriff von mehreren gleichzeitig laufenden PHP-Skripten (ohne Threads) auf die gemeinsam verwendeten Dateien thematisiert. Siehe dazu: 19 Ausgabe in JavaScript I Sie können das Objekt console.log benutzen. Die Benutzung ( Hauptprogramm ): <script type="text/javascript"> console.log("das ist eine Ausgabe in die Console des Browsers"); </script> Mit Firebug sieht das dann so aus: 20

11 Ausgabe in JavaScript II Oder die einfache Implementierung aus Webtechnologien. Die Benutzung ( Hauptprogramm ): <script type="text/javascript" src="js/writer.js"></script> <script type="text/javascript"> write2console("das ist das Consolen-Fenster"); </script> Das sieht dann so aus: 21 Ajax-Kommunikation I Ein Vorschlag Sie können jquery benutzen (oder ein anderes Framework) Oder die einfache Implementierung aus Webtechnologien. Die Benutzung ( Hauptprogramm ): (01) <script type="text/javascript" src="js/ajax.js"></script> (02) <script type="text/javascript" src="js/writer.js"></script> (03) <script type="text/javascript"> (04) var URL = " (05) var ajaxcom= new Ajax(URL,receive); (06) receivedobj= {"date": 0}; (07) ajaxcom.send({"msg": "Heute ist "}); (08) write2console(receivedobj.date); (09) ajaxcom.disconnect(); (10) </script> 22

12 Ajax-Kommunikation II Erläuterungen Zeile 4: Die URL für den Ajax-Request. Zeile 5: Das Ajax-Objekt wird angelegt: 1. Parameter: URL als String 2. Parameter: Name einer Callback-Routine Diese Callback-Routine receive() wird beim Empfang aufgerufen und legt ein globales Objekt Namens receivedobj an. Zeile 6: Es wird der Variablen receivedobj ein JSON-Objekt mit den erwarteten Komponenten zugewiesen. Zeile 7: Der Request wird als POST gesendet, wobei ein JSON-Objekt mit den Parametern übergeben wird. (04) var URL = " (05) var ajaxcom= new Ajax(URL,receive); (06) receivedobj= {"date": 0}; (07) ajaxcom.send({"msg": "Heute ist "}); (08) write2console(receivedobj.date); 23 Ajax-Kommunikation III Erläuterungen Zeile 8: Die Antwort ist empfangen und liegt im Objekt receivedobj vor, wobei dort nur die Komponenten definiert sind, die vor dem Request als JSON-Objekt definiert wurden (Zeile 6). Zeile 6 ist damit eine Art Filter. Definition der erwarteten (04) var URL = " Antwort (05) var ajaxcom= new Ajax(URL,receive); (06) receivedobj= {"date": 0}; (07) ajaxcom.send({"msg": "Heute ist "}); (08) write2console(receivedobj.date); Senden und Empfangen mit den POST-Parametern 24

13 Ajax-Kommunikation IV Erläuterungen Hinweg: Datenaustausch über POST-Parameter Rückweg: Datenaustausch mit JSON-Strukturen Bemerkung: Das ist nicht RESTful - macht aber nichts 25 Ajax-Kommunikation V Server-Teil Die Aufgabe des Servers ist hier das Liefern der aktuellen Datums im HTML-Format. Die Kommunikation zum Browser erfolgt mit JSON. Zeile 1 bis 5 ist der übliche Zugriff auf die POST-Parameter. (01) if(isset($_post['msg'])) { (02) $mesg= $_POST['msg']; (03) } else { (04) $mesg= 'Now is'; (05) } (06) echo "bla1"; // Simulation einer Fehlermeldung (07) $message= "$mesg <b><i>".strftime("%d.%m.%y %H:%M:%S")."</i></b>"; (08) echo json_encode(array('date'=> $message)); (09) echo "bla2"; // Simulation einer weiteren Fehlermeldung 26

14 Ajax-Kommunikation V Server-Teil Zeile 7: Hier wird der Inhalt generiert (Datum) Zeile 8: Es wird ein Array/Hash generiert, nach JSON konvertiert und mit echo ausgegeben. Diese Ausgabe geht automatisch an den Browser, der ein JSON-Konstrukt erwartet. Zeile 6 und 9: Hier werden PHP-Fehlermeldungen simuliert, die ja in den Ausgabedatenstrom fließen und nicht konform zu JSON sind. Der Browser versucht den Nicht-JSON-Vorspann und -Nachspann zu extrahieren und auf der Konsole auszugeben (klappt nicht immer richtig). (01) if(isset($_post['msg'])) { (02) $mesg= $_POST['msg']; (03) } else { (04) $mesg= 'Now is'; (05) } (06) echo "bla1"; // Simulation einer Fehlermeldung (07) $message= "$mesg <b><i>".strftime("%d.%m.%y %H:%M:%S")."</i></b>"; (08) echo json_encode(array('date'=> $message)); (09) echo "bla2"; // Simulation einer weiteren Fehlermeldung 27 Realisierung I 28

15 Realisierung II Die Ajax-Anfrage Das ist die Anfrage {"date":"heute ist <b><i> :25:50<\/i><\/b>"} Das ist das JSON-Objekt Simulierte Fehlermeldungen Das ist die Antwort 29 Realisierung III - netbeans Die JS-Dateien stehen in einem eigenen Unterordner Dieses netbeans-projekt ist von der Website zu dieser Veranstaltung herunterzuladen. Es gibt eine Windows und eine Linux-Version, die sich nur durch den Ort für den htdocs-ordner unterscheiden. Dies lässt sich leicht im Properties-Bereich des netbeans-projekt ändern. 30

16 Realisierung IV - netbeans Da der Ort (und der Name) des htdocs-ordner unter Windows und Linux unterschiedlich ist, muss eventuell nach dem Herunterladen des netbeans-projektes der Zielordner geändert werden. Das ist der Ordner für die Windows-Version 31 Nach dieser Anstrengung etwas Entspannung... Über manche Brücken sollten wir nur allein gehen... 32