Technische Grundlagen des Web

Technische Grundlagen
des Web
01 il
02 it
03 pul
04
13.1
Das Client-Server-Prinzip
In Kdpftel 6 haben Sie bereits einlges über Computemetzwerke erfahren. Im vorliegendetr
Kapitel welfer wir einen genaucren Blick arl die technischetr Grundlagen des lntemets.
Zur Veranschar ichunS benutzer wir einige Beispicle in der Programmierspmche Iava.
05
06
a7
08
09
10
11
72
13
74
15
13.1.1 lnformationsübertragung zwischen Clientund Server
i6 l
was geschieht eigertlich. wern wir über einetr Browser eine Suchanfrage an Google übermitteln? In -Kapite1 6 haber Sie gelemt, dass der Brcwser als Client agiert, dcr seine A rage
tisting'
an einen Webservu schickt. Das folgende Beispielprogramm soll die Technik vedeut
lichen, dic hinter eiler Anforderung des Clients lrnd Rückübemittlutrg duIch den SeNer
Als Ou
Erliivt
h
Zei\
len a\
vom TJ
Iava-Pr
ausgel€
gung ts
Bei der
Brows€
Äbfragr
13.1.2
Ein Ser
stluktor
Seffer (
nen.
ÄI
13.1 Dä! Client-SeruerPrinzip
01 import java. net.*:
02 import java. i o.*,
03 public class googleAbfrage {
04 public static void main(String[] args) throHs Exception {
05
URL google - nel{ URL("http://t^,trv.google.d€l'.);
06
ljRlconnectiongc=google.openconnection();
07
EufferedReader in = new BufferedReader(
08
09
10
11
12
13
14
15
i6]
new InputstreamReader(
String
gc.getlnputstream())):
I
nputLi ne;
rhile ((inputline = in.readlineo) != nutl)
System.out.println(lnputline);
);
i n. cl ose(
1
Iisting r3.l:
Abfraqe der URL www.google.d€
AIs Oniput erhält man nach Start des Progrämms den HTML-Code der Google-Seite.
E
duterung des Listin
In Zeile 5 wird zunächst die tlRL, die aufgerufen werdeo soll, in einer URl,-string-V.rdab
ton abgelegt. Diese wird in Zeile 6 zum Hemtellen einer URL Veibindrng in die Variable gc
.r'omTyp Ullconnection überyeber. Die Atrtrvort, die der Clietrt (im vorliegenden Fall das
Iava-Programm) vom Server enthält, wird über einen BufferedReader/tnpurstreamReader
ausgelesetr {Zeilen 7 bis 13). Wenn keire Zeichen mehr ankommen, wird die Datetrüberbagrng geschlossetr (Zeile 14J.
Bei der Betflchturg von Webseiten mit einem Browser ist das p nzip garz:ilnlich: Der
Brcwser arbeitet als Client ul1d fühit eine Abftage durch, der Server liefert die Inhalte zur
Abfra8e. Die Ergebnisse der Abhage können Sie wie im obigen Beispiel arch in Textform
einsehen. Jeder Brcwser bietet die Maiglichkeir, sich Seiten direkt irl1 erelltext anzei8er zu
lassen. kn Ftuefox Brcwser betätigt matr hierzr die Tastenkombination tst;sl . [f] .
13.'1.2 Der Server als Rechenzentrum
Ein SeNer karm aber noch viel mehr, als statische Daten, die in Form einer HTML-Seitetrstruktur abgelegt u,urden, zu übermitteltr: Man kann eberuo gut Berechnungen auf dem
Server durchführen lassen. die dann vom Client angewofen und ausgetesen werden kön,
ner. Als Beispiel behachten wir folgende übung:
I€.hnische Grundlagen des web
Sel?r
Der Se
ZUM C
Programmieren Sie ein Client- ünd ein Serv€rprcgmrnm in Java. das die Multiplikation
zvreier Zahlen durchführt. Dabei soll das Clieütpro8ram]n die zu multipliziercnden
Zahlcn an den Server übergeben, der Server die Multiplikation durchführen und das
Ergebnis an den Client rückübemlitteln (>Abbildutrg 13.1).
01 iI
02 ir
03 pul
04 I
05
LÖSUNG
06
07
Wir eßtelletr zwei unabhätrgige Java-Programme und beginnen zunächst mit dem Progmmm fitu den Client:
08
09
Clientprcgom
01
02
03
04
05
06
07
08
09
10
inport java.io.*:
import j ava. net.*;
11
outputstream aus
int faktorl = 6;
int faktor2 = 7;
10
11
-
aus,vlrite(faktorl);
System.out.prlntln("1. Zahl: " + faktorl);
aus.urite(fakto12 );
System.out.printl n("2. 7ah1. " + faktor2),
int produkt = ei n. read( );
18
19
ei n. cl ose ( )
aus. cI ose( )
20
server. cl ose( );
System.out,println("Der Server berechnet:
]
tisting t3.2:
15
16
t7
18
19
server. getoutputstream( ) i
12
13
14
15
16
17
2l
)
12
13
14
publlc class Mul tiCl i ent {
public static void nain(String[] args) throus I0Exception {
String host = "localhost":
int port - 1234;
Socket server = neu Socket(host, port);
inputstream ein - server. getlnputstream( );
20
2l
22
23
24]
1
Listiqi
" + produkt);
ErIAd
;
In Zßl
;
Veüin
dateD!
und
Der lr4ultiplikationsclient
a
ErlAutuntng des Listings
Der Server \,\.ird in Zeile 5 mit der lokalen lP verknüpft (/ocoliost), der Kommunikationsport ist 1234. Die Kommunikation zwischen Clietrt uIrd SeNer soll über detr Port
1234 ablaufen. Dabei l,\iird eir soSenamter Socket geöfinet (Zeile 7). Auf der Seite des
Clierts werden zwei Datenströme definiert: Der Strom aus schickt Ai€ zu multipliziercnder Faktoren an den SeNer (Zeilen 12, 14), das xryebds wfud dann dem Strom ein
über die Methode read entüommeq (Zeile 16).
@
I r*
tn
II
k"nn"t
Netrfl
t"'-ri
13.1 Das Client-Server-Prinzip
Serverprogromm
Der SeNer wird mit einem zweiten Pmgmmm
realisie
. das im
pdlrzip spiegelbildlich
züm Cliertpro$amm konzipiert istl
import jäva. net. *;
o2 import jäva.io.*i
03 publlc class l,{ul tiServer {
publlc static void main(String[] args) throys IOException {
04
01
int port = 1234i
05
06
07
ServerSocket server = new Serversocket(port);
System.out.println("Multlpllkationsserver an Port
Bin berelt!"):
+ port +
"
:
int faktorl;
int faktor2;
int produkti
08
09
10
while (true) [
Socket cllenl- = server. accept( );
lnputStream ein = cl i ent. getlnputstrean( );
0utputstream aus = client.getoutputStreamO i
faktorl = ein.readO;
faktor2 - ein.readO:
produkt - faktorl * faktor2:
aus. v{ri te(produkt);
11
72
13
14
15
16
77
18
19
el n. close( )
:
);
client.close():
aus. close(
20
2t
22
23
24
"
]
]
)
Listing r3.3:
Der lvultiplikationsserver
Etläütenng
des Listings
In Zeile 6 wird zunächst der SeNer Socket geöftuet und lauscht auf dem Port 1234. Die
Veüindüng arm Client wird in den Zeiletr 13 bis 16 über den Eingabe- bzra,,. Ausgabedatenstrom heryestellt. In Zeile 17 wird schließlich das Produkt der Zallen berechnet
und arschließend an den Client zudckgegeben.
ln Kapitel 6habenSie den Begriff Pon schon im Zusammenhanq mit NeEwerkprotolollen bzw. -diensten
kennengelernt. Ein Port ist ein Teil einer Adresse, der Datenteile einem Netzwerkprotokoll zuweist. Das
NeEwerkprotokoll selbst gibt vo[ aulwelcheWeise die lnformationen im Nelzwe* zu übertragen sind. Ein
Socket (äuf Deutsch: Sockel)
istdie Softwareschnittstelle, die2wischen Sender und Empfänger vermittelt.
Te.hnhche Grundlagen des web
Nach de
durch E
pearsofl
2080 ?
3180 ?
3181 ?
3182 ?
31s3
3184
3199
c
E
?
Wie mai
tanzeD d
Nachd€!
Abbildung 13.'l:
sen
Ein lvlultiplikationssefr er
Dier
aufgeruf
Das beschriebene Verfabren lässt sich
priMipiell
auf viele Bereiche der modernen Intcrnettechdk übertmgen: Die Rechetrarbeit, die zlrl Daßtellrng von Webinhaltetr erforderlich ist,
läuft im Wesentlichen auf Seitetr des Slrl\/ers ab. Der Browser des Clients agiert als mehr
oder minder dümmes Teminal. Dadurch ist es mijglich, auch verhältnismäßig änspruchs-
http://la
Daraufti
(>Abbik
volle Webinhalie auf wenig leistungsfähiger Hardware daIzlrstelien.
13.2 Aufbau eines Webservers
Ein Webserver ist itr der virtrellen Lemumgeburg schtrell aufSesetzt. Damit lasser sich die
nachfolgend aufgeführten Änwendungen realisieren. Den WebseNer-Markt teilcn sich
(Stand 2010, Quellet http://news.netcraft.conl die folgerden Softwarehersteller bzw.
Dienstanbie.ter Spitzenreiter ist die Apache-SeNersoftware (54 % Markanteil). gefolgt von
Micmsoft {25 % Marktanteil), Googie t7 %) und ngirx (6 %1.
13.2.1 lnstallation und erster
Test
Abbildr4
Wir verwenden den bewährten Webserver äpoc,le. Dieser wtud mit dem Installationstool
Sylaptic (,rg1. AnhanB) in der Lernumgcbung über folgetrde Pakete installiert:1
r
apache2
sowie optional:
r
fi le / / /usr / shore / do c /a poc he2 - d oc /manüa I / d e / i ndex. html
:
Sie könneD natiirlich auch rDter Windows einen Apache,SeFcr instEllieren
i
nxp,ni
13.2.2
apachez-doc
Dieses Paket enthält die Dokümentation des Apache-Systems. Die Dokumentation komen
Sie nach der Installatiotr unter folgendem Link im Systembrowser der Lemumgebrng ein-
1
I't;ihere
ud
konfiguieEn. Ein
enisprechendes ,,Rundum-sorglos Palet" finden Sie n\i http://hxpd.apache.ory/domload.cgi. Die
vorlie8ende Beschrcibung bczieht sich aber ausschließlich auf die Linu-Vcßion.
Der Apa
13.2 Arfbäu eines Webe.tuer<
Nach der Irctallation läuft der Apache-SeNcr bereits im Hitrteryrund. Überzeugen Sie sich
durch Eirgabe des Befehts ps ax I grep äpache in einer Konsole davon:
pearson@pearson:-$ ps ax I grep apache
2040 ?
Ss
0:00 /usr/sbin/apache2
3180 ?
S
0:00 /usr/sbi n/apache2
3181 ?
S
0:00 /usr/sbin/apachez
3ts2
3183
3184
3199
1
?
?
?
S
S
S
S
0:00
0:00
0:00
0:00
-k start
-k start
-k start
/usr/sbin/äpache2 k start
/usr/sbln/äpache2 k start
/usr/sbi n/apache2 -k start
/usr/sbin/apache2 -k start
Wie mar crkennen kann, laufen auf dem betrachteter System nicht weni8er als sieben Iru,
tanzen des WebseNers.
Nachdom man sich davon übeEeugt hat, dass der SeNer läuft, kann man versuchen, dessen Dienste per Browser in Anspruch zu rehmen. Dazu wird folgende Adrcsse im Browser
aüfgerufen:
http://localhost/
im Browsefenster
(>Abbiidung 13.21. Dieses befindet sich nach Instdllation des Apachc-Patets im Verzeichnis /valwr'r4{, dcr virtuellen Lernumge.bung.
Damufhir e$cheint das Stardarddokumeni des Apache SeNers
Abbildung t3.2:
Die Standardseite des Apach€-Websetuers signalisiendie Funhionstüchtigkeit.
Näherc I omationen über detr Status des Servers orhält man
htlp :/ / ]a calho st/ seÜer sfdf usl ir die Brcwsemdmsszeile.
duch
Eingabe der Adresse
13.2,2 KontigurationdesWebservers
Der Apache-Webserver wird im Wesentlichen über die folgenden Däteien, die Sie im Pfad
/etc/apoche2 flI]den, konfiBurie :
.
r
apache2.confDiese Datei ist die Hauptkonfigurationsdatei des Apache-Webseweß.
poIts.coni In diesff Datei wird festgelegt. auf welche Anfrager der SeNer reagieren soll.
Man kann die Anftagen aul bestiDmte Subnetze beschränken oder den Port, auf welchem der SeNer laücht, ände-m.
Das Bea$eiten beider Dateien
s-i
erforde Admitristratorrecbte.
;5
..d
oa3
Besch*inken Sie die Anfragen auf den Apache-Webserver auf den Zugriff vom Server
selbst und schalten Sie den erweiterten Slatusbericht des Serveß ftei.
143
2.e3
3-a!
4-a3
5-43
5-43
tÖSUNG
Die Beschränlung des Zugdffs erfolgt durch Bearbeiten der Datei pods.conl
pearson@pearson:-$
sudo
gedit /etc/apache2/ports.conf
ir
der Datei die Anweisung Listen 80. Diese bedeütet, dass der
Server auf alle Anfragen reagi€rt, die über der Port 80 erfolgen. Die Einschr:irkung aüf
das iokale Netz erhält man, indem man die Atrweisutrs folgen[ennaßen ergänzt:
Im Normalfall steht
tt!
^4
cn
Listen 127.0.0.1:80
Die nerre Konfigüration wird durch folgenden Befehl übemommen:
pearson@peärson:-l
sudo /etc/init.d/dpache2 reload
Daduch wird die Konfigurationsdatei im larfenden SeNerbetrieb neu eingelesen. Sie
können der beschränkten Zugdfftesten, iDdem Sie veßuchen, eitreßeits aus der Lemumgebtrng, andereßeits
vor einem
außen stehenden Sysiem auf den Websewer zuzu-
geifen, z.B. vom Wirtssystem der yirtreller Umgebun8: Letzteres düffie nun nicht
mehr geljngen.
Im Dächster Schrilt wtud der erweiterte Statusbericht des Webservers aktiviert. Dazu
editieren Sie die Datei srotus.conlim Apache-UnteNerzeichnis mods-endbled:
pearson@pearson:-$
sudo
gedit /etc/apache2lnods_enabled/status.conf
Schreiber Sie folgendcn Befehl an den Anfäng der Dateil
ExtendedStätus 0n
Anschließend muss der Apache-SeNer neu gestartet werden:
pearson@pearson
:-i
sudo /etc/init.d/apachez
rcstart
Darauf sieht Ihnetr der vollst:indige Statusbericht des Serve$ per Browser zur Vertu
gung f>Abbildung 13.3). Dieser zeigt unter anderem an, welche Webseiten über den
Apache-Server aufgerufen u,'urden. Die Analyse ist dann sinnvoll. wenn ein ApacheProzess eire rmgewähdich hohe Systemlast produziet: Auf diese Weise lässt sich
Ieicht der Inhali derjenigen lokalen Webseite identifiziercn, welche die Lasi vemrsacht.
13.2.3
Intercss
anscblir
nadu$
dcht.tr
ü
@
L-*
|
I
I
I
I
*oriti
einenl
zielle
r
noot-s
od"r-n
\_
Die Dol
\MA'NIJ
Pflege d
Modul r
Arfbäu eines webseruers
''WaitinqforCoüetioa "s'Srartinqu!,.rf REdilgR€qtr6t,
Y
seEdt4q ReDIy,
'r
KepÜ% trmd), '!' DNs rooLr!.
"r' Logglqq. "d cmcefr y 6njling,
'.' Opan slot slth m cEmt lscess
"C Closi.q coDnetioD,
'f
Idb cr@up of workd,
Sr PlIl A.c MCPI SSn qcoüChildslot cltstrt
&o 39119/12112
r-o 3912
o/s/5
vo39l4oü2
0.01 127.0,0.1localnost cET /pnpDratuin4inmo6/origirnlrlEg&_
15 0.0 0.00
12 0.0 0.00
0 0 9.r1 0.0I
0-0O 127.O0-l
0.01
'(o.l2
o12 3212 O.O 0.03
2-lJ391301212
0.00 36
0.09 36
{.o391s 1y13/13IrYo.37
5-o39171y1V13x 0.20
6-0 3s2o 14Ä4l14K o.13
7-03921a/3/a K o.?2
A.O 3922 6/6/6 K 0.14
vEoBt
2 O 7,1
2
2
2
2
I 17.1
2 20.6
9 a.7
2 s.6
-
gmeratior
0.03localhost localtrGtcET /sNer-shhrs HTTp/1.1
localn$tcET
0.00 127,0.o11oc0üo$ cET lphpEyddmbrrnm€e/origüalImq/s
0,O1 127.0,0- t locaüost GET /sm6Fshhß IITIP/l.l
O.O2 0-O2 12?.0.0.1 locahost GET /pnpmradDintnomoqoriginnlrEg/D
O.O2 0.02 127-0-0.1 localnost cET
0-01 0.01 127.0-0,1 locnüost cET /6tmyadDinthm€{üisimlrns/b
o.01 0.01 127.00.llocal]DstcET
S
Child
Ar.
l{
MDIMofamffses this codetior/this cn d/lhisslot
Smr
Mod6 of
rnDner
opeatlon
CPU CPUEge Nmnaolsem ls
65 S€ords siEe beqbnlrs ofmst rccmt request
Abbildung l!.3:
Er!1/elterler Statusberkht des Apache-Webs€rveß
13.2.3 Erstellen und Einbinden von lnhalten
lntetessant ist ein lokaler WebseNer insbesondere zum Testen von Inhalten. die uar
arschließend im Web auf dem Server eires Webhosting-Anbieteß veröffentlichen möchte.
Dadrrch spart man sich einigen Stress, falls etwas mit den zu vedffentlichenden Inhalten
nicht rund laufen sollte.
Ein Root-Server ist umgangssprachlich (oft auch werbetechnisch) die Bezeichnung Iür den von einem
Provider für die Publikation von Webinhalten zur Verfügung gestellten Server. Dabei handelt es sich um
einen Webservei aufdem der Anwender vollen Zugang hat, Programme und lnhalte inställieren und spezielle Webdienste starten und kontrollieren kann, also als Administrator /oolarbejten kann. Der Begrifl
Roolserver steht aber korrekterweise für einen Nameservel der für Top-Level-Domainswiez,B, .de .con
oder.ar4zuständiq ist.
Die Dokumente, die der Webserver vcltcilt, llegen standardmäßig im Verzeichnis /vnrl
ma,fl. Dieses Verzeichnis isi nlrl vom Administrator root beschreibbar. Geschickt ist es. die
Pflege der Dokunente in ein Berutzerverzeichais zu verlagern, was durch das ApacheModül use-rdri erreicht werden kam. Das Modrl wird fDlsendermaßen aktiviert:
Te.hnis.h€ Grüdtager des Web
pea
rson@pearson:^$ sudo a2enmod userdir
ing modul e userdi r.
Enabl
13.3
Run'/etc/init.d/apache2 restart. to activate
neu configuratjonl
Anschließerd muss der Webserver neu gesrartet
wedcn:
pearson@pea rson :-$ sudo
/etc/lntt.d/apachez restart
Inr eigenen Heimverzeichnis wird nurr
noch
d i^ DoLume.re ab'ct.F M erdpl.
Die.pr
.o,
e
d
Nun kiinnen Sie ve$ucher, ob Sie aut
das
ruten sie folgende Adros"" i- n.ow"".
-,rlrzeichnis
Es.
//l
,,bobrj
der
I
@
lrrrmr
nt OÄnet public-htmt berötisr, in wetchem
"
hrei;n;ür.r ;;;; ;;";,"";'
ie R.,
peal.son@pearson:^$ mkdl r pubtic
htmi
pedrson@pearson:-l chmod 755 puttic
htmt/
http:
wü
wird
D,r
lscherWhi
I
L,,
via Apache zugrcifen körnetr' Dazr
ocal host/-pearson/
erscheirt die tnoch teerel Datcistruktu des
Verzeichnisses jm Browsff (>Abbitdung
der rroqn
n,.*
II
urrg"rta
I
,",
Lana dnEl
Eine
Viekd
ändern
sij
gehören be
sich dyn tr
Abbildung r3.4: Zugriff
äuf das WWW Verzeichnis im Benulzerordner
13.3.1
Pu
Der bestehe
die PHP-Fur
.
phps. tiä
Zum Testen
verzeiclnis,
<?php
phpl nfo
(
):
?>
Listing
r3.+E
ü,berzeugen
des PHP-Mq
2
Rochtokennung /55 bedexlci, dass dFr IigFtrhmpr
vo]lzugriff, die Guppe und Sonsli8e
hinsesen
nrlesenden Zugritr auf.lie Datej L'zw das vFrzeiclnis
hatl,n
13.3 DynamischerWeb: PHe lavaScript, Ajax
'13.3 Dynamisches Web:
PHP.
Javascript, Ajax
Wir ,,bohrcn" nun unsereD Sener aui unr ihm mehr M.iglichkeiten zu verschaffel. Dazu
wircl der Apache-SeNer um ein Modul om,cilerl, das die Verwendrns von PHP sestatiet.
PNP
llüt
PHP:
Hypeftext Preprccessol isl e\ne Sktiptsprache, die ln eßter Lin e zur Eßte lung dynamiwird. Die Syntax der Sprache PHP orienUert sich an
scher Webseiten oder Webanwendungen eingesetzt
der Programmlersprache C,
PHP bietet lJnteßtützung für Datenbankabfragen und ist m;t elner Vielzahl vor Fuiktionsblbliotheken
ausgestattet. Diese werden zumeist für die Eaeugung dynamischer Webinhalte veftl/endet. PHP Code
känn direkt in HTIVIL-Seiten integrien werden.
r*
Voraussetzung für die Verwendung von PHP ist ein Webser]/el der in der Lage ist, d]e Skripte !mzLset
zen,
Eine Vlelzahl von lnhalten, die auf einer Webseite dargestellt werden, sind dynarnischer Natur, d.h., sie
ändern sich laufend: Die Börsenkuße eines Bößentickeß und der Newsticker einer Nachrichtenagentur
gehören beispielsweise däzu. Aber auch nutzergesteueTre Formulareingaben oder Berechnungen lassen
sich dynamlsch reallsierei. Dabel greift man auf PHP oderlavascript zurück.
13.3.1
PHP
Der besteherde Apachc-Server wird druch Installation der folgender Progranrmpakete um
die PHP Funktionalität erweitert:
.
p
hps,
I
i bo pat)he2-ma
Zrnl Tcstcn orsteller
d-php5
Sie
nrn
folgende Seite mit de r Nanren
plpi,./o.plp in
Ihreür l{eb-
\.erzeichiris püblic,4rml:
<?php
php i
?>
rf o( ) ;
Listing 13.4: Dat€izun
Test€n der PHP
lnna ation
überzeugen Sie sich durch das Aufrulen der Seite im Browser von der Funktionsfähigkeit
des PFIP-Moduls (>Abbildung 13. s1.
'F
Die ein
das foll
Hallo
<br>
Sie s'l
Listingl
PHP gl
zuIück
Zum:Ii
fom.bt
(>Äbbn
PHP-Fr:
pretiert
Abbildung t3.5:
Die PHP Funktion
phpirfo( ) lieferr
lnformationei über die akirell innalliefie PHP'Veßion.
Formulare au5werten
Eine wichtige Anwendüng von Pm ist die seNerseitige Auswertung von Folmularen.
Dabei übergibt der Client, iü diesem Fall der Browser des Nutzers, bestimmte Datan an den
SeNer, die dieser weiterverarbeitet. Behachten Sie dazu folgendes Beispiel:
Dcr Vomame und das Alter des Benulzels sollen abgefragt trnd anschließend ir Form citrer
vom Server dynaDisch erzeugten HTML Datei ausgegeberl werden. Dazu müsscn zwei
Dateien auf dem Seffer erstellt werdenr
Die Abfrage selbst wird über
eir HTML Fomuldr mit
Durch
dem Nämen /orm.,h rm1 reali siert:
01 <htnl >
02 <body>
03 <forn acti on="acti on. php" method:"post">
04 <p>Ihr Nane: <input type="text" name="name" /></p>
05 <p>Ihr Alter: <input type="text" name="alter" /></p>
06 <p><input type-"submit" value="Daten absenden"/></p>
07 </forn>
08 </body>
09 </html>
Listing 13.5:
HTIVL
Elnqabefoßrlat fom.hnnl
Es
wnde
Abbild!
ein verelnfachtes HT[41 Gerüst
I
Abbildlr
veMendel das.ur die notwen-
diqsten Befehle enthä t.
Erlöutel,lnq des Codes
In Zeile 3 r,vird das PHP-Skript oction.php a.ls Empf:inger der Formdardaten ängegeben
(Methode: post = übemrittelr). ln den Zcilen a und 5 werden dic Felder tur den Vornamen
üd das Alter des Berutzeß festgclegt: Sie hagcn die Bczcichnungan vornane und al ter.
13.3 Dynamisch€s Web: PHe ravascript, Ajäx
Die eingegeberen Daten werd€r nun votr dem pHp Skdpt nar]lens dcrion.p,rrp ausgewertet.
das folgetrde Gestalt hat:
Hallo
<?php echo
g PoSTI'vorname.]i
?>.
<br>
Sie sind <?php echo g-posT['a]ter'li ?> Jahre
ajt.
Listing r3.6: Die Ausgabe der tnhalte der Variabten vornane und al rer erfotqt mithitfe d es pjp-sktipß action.php
PHP greift dabei auJ die im HTML-FoImUIar defiderten Inhalte von vornane und
alter
Zum Testen der Daterübergabe zwischen HTML-FormuIar und pHp-Skdpt müssen die Daiei
/bnn.ftfnl und die Datei ochbn.php im V€zeichnis püblic hrrrl abgetegt weden. lorn.hrnl
muss anschließend über den Link http://localhost/peaßonforr?.irm? aufgerufell werden
(>Abbildung 13.6). Daduch ist sichergestetlt. dass dcr tokale Webserver mit integrierter
PHP-Furkionalität vorwendet und dcht einfach die HTML Seite vom Brcwser dimkt irier_
prctiert whd.
nrvolfu,milffid$
rhr anm,
M
Abbildungl3.6:
EEm[älmffil
Eingäbe der Daten in däs Fonnutar
Durch Betätigen der Schaltfläche ,aten oösenden wird das Slaipt ocfiofl .p,,rp aügerufer,
und es erscheitrt Iolgende Äusgabe im Bmwser:
Abbildungl3.7:
Ausgäbe des dynamischen
Ht[ll-codes
du
tch das sktipt action.php
Grafi5che Elemente
Die Skriptsprache PHP verftigt auch über die Möglichkeit der Ausgabe von Grafiken im
Browsclfcnster. Eire typische Anwerdurlg ist dabei das Generjercn einer Gmfik, die die
E-Mail-Admssc des Urhebers einer Seite enthält: Diese känn nicht von Spam-Roboterr
e
asst r,Yerden.
Der Begrifl CAPTCHA ist die Abki?ung
lü
ConpletÜ Autonated Public luring test to te// Conputers
beßetzung bedeutel das Vollautonafischer öffentlicher fuingtest un
ConpuEt und Menschen zu unteßcheiden. CAPICHAi werden auf sozialen Plattformen eingesetzt, um
zu entscheiden, ob ein Benutzer ein l\,,lensch oder ein (spam-)Roboter ist.
and Hunans Apart ln wönlicher
Ü
Auch CIPTCHAS faller ill diesen Anwendutrgsbereich: Dabei handelt es sich unl kleine
gmfische Elemente, die eine Zeichenfolge enthalten, walchc der Benlrtzfl nach Eingabe
von Fomulardaten idetrtifiziercr muss (>Abbildung 13.8J. Dadurch ist sichergestellt. dass
die Folmulardaten nicht von einem Spam-Roboier starnmetr.
GEben sie bine
de
im Bnd
Eßt*kGn veitui.ru4scode
ein
o
IS6ffi rEd ]
Abbildung
'13.8: Typisches caprcha, QlßI et
Das folgende Beispiel
abbitfr
Erläaü
ln Zeiü
tergnrD
festgel€
Rückgi
einer
g
w.eb4tde
demonstiert die $afischen Fähigkejten der Slaiptspmche PHP:
In einer HTML Datei grolik.fifml wird zr.üächst die Bildquelle defidert:
<inrg src="on_the-fly_grafik.php" vldth="400" height="300" />
Listing 13.71 Auszug ar5 gßfik.hrnl
Die Datei on thc Jly-gafik.phphalfolgende Gestalt:
01 <?php
02 header("Content-type: image/png") ;
03 $bild : imagecreatetruecolor(400, 300);
04 imagecolorallocate($bild, 150, 150, 0);
05 $farbel = inagecolorallocate($bild, 255, 255, 0);
06 $farbez = inagecolorallocate($bi'ld, 0, 255, 0);
07 $farbe3 - imaqecolorallocate($bild, 0, 0, 255)i
08 imagefilledrectansle (tbild, 20, 75, 350,250, tfarbel);
09 imagefilledrectangle (tbild, 150, 100, 200, 280, $farbe2)i
10 imagefilledrectangle ($bild, 220, 150, 330, 190, $farbe3)r
11 imaqepng{ $b1l d ):
t2
Vefahn
in, GN
lässt
Das
si.
lIIl
StmktE
eine
Xl
heit
d6
Mitbilft
?>
Listing 13.8:
Javasc!
Erzeugen einer dynamis.hen Grafik mit PHP Qu
elle: hxp://wwa php"kurscon
Prozesi-
Speich.
Das Eryebnis nach
Auftufen der Seite safjk.nrm1zejgt >Abbildung 13.s.
befindli
13.3 Dynamis.herWeb:
Abbildung 13.9: Gafische Ausgahe dessktipls an the fly-gzfrkphp Q@
E r I ii
u
te r ung de s
let
PHP,
ravaScript A,ax
hnpl/t wwphp kun.on/
ListinEs
w d zu11ächsi ein leeres Bild mit den Maßen 400 x 300 Pixeln erstellt. Die Hintergrundfarbe des Bildes wid itr Zeile 4, drci ü'ejtere Farbeh werden in den Zeilen 5 bis 7
festgelegt. In den Zailen I bis 10 wcrden schließlich drei gefüIlte Rechtocke gezeichnet. Die
Rückgabe dcs Bildes an die auhulbnde HTML Seite erfolgt schließlich in Zeile :11 in Form
einer PNG-Cmfik.
In Zeilc 3
13.3.2 JavaScriptund DOM-Scripting
,avascript ist eine Shiptsprache. die d,.nan1isches HTML auf der Clientseite erzeugt. Das
Verfahren, das vielen aktuellen Arwendungen zügunde liegt, wird auch als DOM-Sc-üpf,
ing {DOM = Docunent Object Modell bezeiclnet. Dic Idee, auf der DOM Scripting basiert,
lässt sich folgendermaßen beschreiben:
Das HTML-Dokument, das der Brcwser vDm SeNer geliefext bekommt, ist eine einfache,
mit
Strukturelemerten veßehene Texldatei. Der Browser wandelt diese Datei zUI Darstellrng nr
eine XML Struktur üm und legt sie in geordneter Form in seinem Speicher ab. Die Gesamtheit der Stru](h]j bildct den DOM-Baum, die eiMelnen Elemente weden Knoten genannt.
Mithille von ]avascript lassol sich nun Veränderungen am DOM,Barm voltreh]nen. Dieser
Prczess wird DOM-ScnptinS getrannt. Dabei isi zu beachten, dass der DOM-Barm nur im
Speicher des Browsc$ existiert. Beim Shipten verätrdert sich somit nicht das aufdem Server
befindliche HTMl,-QuelldokurnenL soüdern lediglich die Inhalte im Brcwser des Berutzeff.
Dje Anzeige der Webseite im Browserferuter synchrodsiert nutr pemarent mit dem al(tuell jm Speicher befindlichen DOM Baum alle Arderungen dort werden sLrfört qichtbar.
Eine praktische Anwendung des Verfahrens firdet man äktuell bei Software, dje blinden
bzu sehschwachen Memchen die Inhalte des Brcwsers per Spmcharsgabe nahebrin8t.
Ein relativ einfaches Beispiel ist eine Ulr. die itr eine Webseite eingebunden ist und sich
st:indig selbst aktualisieü (>Abbildrurg 13.101. Eine Umsetzung des Beispiels finden Sie
auf der Seite fiftprl/d€.seryifr .oryl im Bercich DHTML.
Sonntag, 11.(X.2010, 19:57:50
Willkommen auf dieser Seite
lier
q€ms
qaE
mrml{eite'
zet
Abbildung 13.r0: Di€ oben angezeigte Uhr läuft dynamisch mlt.
Diese Funktionalität wkd clienbeltig p€r Javascriptl
Doll-scrlpting reälisiert. Quelle hnp://desefh nlorg/dhnnlbeßpieldanzeise/datunuh.hnn
13.3.3 Aiax
Abbildrq
Sicher ist Ihnen auch schon das (mittlerweile nicht mehr garz so neue)B\tzzwoi Web 2.0
begegnei. Als dieser Beg ff 2006 vom Verleger TrM O'XnlLLy popul2ir gemacht r,r,urde,
meinte er damit insbesondere die Möglichkeiten zur Interaktion und Kommrnikation, die
mit neuen Tech ken uüd Angeboten eirheryingetr. Die Plattformen bzw. Dienste Facebook, Twitte\ Xin9üd F.äckI seien an dieser Stelle als Beispiele gellannt.
WäIreff
vom ser
schetrscl
nere Dd
lokal abl
Die technische Crundlago aktueller Plattfomen bildet zumeist Ä/?x.
,4rx
ist die Abkürzung für,4synchrcnous Javasctpt and X/y'L Der Begriff tauchte erstmalig in dem Auf-
satz Ajax: A New Apprcach
to Web Applicationsvon
)LssE laMEs GanRErr,
einem l!4itarbeiter der Agentur
Adaptive Path, in )atu 2005 aul.
Ajax 5teht für das Konzept der asynchronen Datenübetragung zwischen Browser und Webserver. Dabei
können weitere HTTP anfragen, noch während die ursprüngliche HTI\IL Seite angezeigt wird, durch'
geführt werden, Die Seite kann verändert werden, ohne dass sie komplett neu geladen werden muss.
Aiax wird heute dahingehend eingesetzl Anwendungen im Webbrowser ablaufen zu lassen, die ein
desktopähnliches Verhalten zeiqen. Das kann eine Texwerarbeitung oder eine Tabellenkalkulation wie
z.B. Google Docs \docs.googlerrrr) sein: Dabei handelt es sich um ein brauchbares office-Paket, das
komplett über den Browser bedientwird.
Das Prinzip von Ajax zeigi >Abbildung 13.11, die in Anlehnung an das Konzept von Iesse
James Garrett
eßtellt wurdel
Abbild14
sle in die
l,
13.3 DFamisdes web: PHe hvasc pr, Ajax
E
!
e
?
E
F
F
t
E
!
z
Abbildung r3.rr: Geqenübeßtellung
von Aiax und klassischem Modelleiner webanwendurg.
Wäbrend im klassischen Modell der Browser lediglich den Strom der HTMI--Daten, die
vDm Server geliefert werden, darstelli, bildet im Ajäx-Modell die Aja-x-Xngine eitre Zwi
schenschicht, die dic Inhalie des Serveß aufbereitet. Im Hintergrund werden dabei st:indig
neue Datenpakete nachgeladen. Der Arwender erhält dadurch den Eindruck einer fliissig
lokal ablaufenden Arwetrdung (>Abbildüng 13.12).
ten &tsb6r6n
Abbildung 13.12:
lqid,z
,iisäiljÄiii.,lm
Google text &trbellen, bekannt als Google Doc5 ist eine qpische Ajax-Anwendunq. Google Docs veße1zt
sie in die Lagq äLf lhre Dokumente an jedem ort der We t zugreitun und diese obendrein im Browser beäöeiten zu können.
'13.4 Content-Management-Systeme (CMS)
Die wenigster C,€lege leitsanwende. coder ihe Intemetseiten noch von der Pike auf selbst
in HTMI-. Eitren einfachen Zugang zur Efftellurg professionell anmutendet Intemetauftritte
htetejf, Content-Management-Systeme, kulzr CMS. Diese Bestattetr das einfache Einpllegen
von lnhalten in oiner mehbetrutze*ihigen Umgebune.
13.4.1 BeispieleundVoraussetzungen
TYPO3
TYPOIight
Drupal
WodPress (mit CMS Erweiterung)
Apache-Wehserver: Der WebseNerbildet die Grundlage des Systems.
MySQL-Server: In der MysQl-Datenbatrk werden die Inhalte des Content-ManagementSystems abgelegt.
r
PHP-Modul ftir den Webserver: Die Verbitrdung
Slaiptsprache hergestellt.
zü
Datenbank wird mithilfe der PHP-
Zru vereinfachten Pllege der Datenbank fiiI das CMS bietei sich noch folgetrdes Tool an:
r phpMyAdmin: Damit lassen sich die MysQl-Datenbanken des CMS einsehen urd, falls
notwendig, auch löscheL
Für die folgende Übüng wjrd vomusgesetzt, dass die vituelle Lemurngebung als LAMP(LinLx
Apache-MySQL-PHPI-System koniguriert wurd e, vgl. dazn aüh Kapitel 10.
13.4.2 Einrichtung
""*!
Att:
Err
EE
Ioomlal
Bei allen genannte.n Systemetr handelt es sich um se&erseitige Content-Management-Syslemc, d-h., der Server bietet die Funktionen zum Verwalten und Bearbeiten der Inhalte an.
Diese e ordem die Installation von folgender Komponenten aüf Seiten des Selvets:
r
r
.l
L
lypische Content-Management-Systeme sifldl
r
r
I
r
r
tnstali
Eß
d
Eß
h
E{
c
Darad
-d
-t
Einci
rierti
-B
-d
T
I
lt
des CMS Joomla!
Im folgenden Beispiel gewinnen Sie einen Einblick in die Welt der Cortent Management Sys
teme, indem Sie ein solches System selbst aufsetzen. Dazu verwenden wir das einsteiger
heündlicha (MS Joonla!. Sie finden die je;weils aktuelle Veffiotr des Systems auf i11p.//
wwwjoomla.de/, dort a.lrch in deutscher Lokalisierung.
abbi
dieMi
_;
13.4 Content-Mänasement'Systeme (CMs)
Installieren Sie das CMS ]oomla in der Lemumgebung und machen Sie sich mit der Funktionsweise eiDes CMS vertrarrt,
ANLEITUNG
E
Laden Sie das aktuelle ]oomlal-Paket von http://hwwjoornlo.de/herunter. Das Paket
hat eine Bezei&nüng det Fot:nt Joomla-<Veßion>-Stnble-Full Pockage Ge lon.zip.
E
E
Erstellen Sie in Ihem mNll-Velzeichnis pubüc -ht,rl einen Odnel mmens/?omla.
E
ENtellen Sie mit dem AdmhistratiDnswerkzeug päpM},,A.lmin eine neue Dateübank namens ioomld trw: Kollation), \taL. dazr. Kapitel 10.
Rufen Sie die folgende Seite im Bmwsel der Lemumgebung auf: http://localhost/
Entpacken Sie die Datei in der Lernumgebung und verschieben Sie deren komplette Inlalte in den Ordrerlbomlo.
E
- <B e n utzemome> /j oo mla,
Dalartuin startet das Joomlal-Installationsskript. Hieüei werden folgende Schitte du]chlaufeni
Festlegen der Installationssprache (in unsercm Fall ,eutsc,'r)
- Überprüfmg der zul Installatiotr benötigten Komponenten
Eitre Fehlemeldung bezüglich der Datei conligurafior.pJrp kann an dieser stelle igno
ert werden.
-
Bestätigen
dff GPL-Lizenz
Definition der Veüindüogsdaten für die Datenbank (>Abbildung 13.13)
Abbildüng r3.13:
Ein Assislent
führt durch die Konfiguration des Joom a1 Systerns. lm vo legenden Schritt
die Anbindung än die Dat€nbank, diezuvor rnit phpl4yAdmin erstellt wurde fesigelegl.
-
Der FTP
Zug ff sollte ftü
das lokale System
deaktiviet werden.
Ie.hnische Grundlägen de! web
!i In vorletzten Schritt des Assistenren legen Sie schließlich den Namen Ibrer Web,
pdserz sowie das Passwofi und die E Mail-Adrcsse des CMs-Administrarors fest.
Lassen Sie an dieser Stelle auch die Beispictdateien ftir das CMS durch Berätigcrr
der entsprcchender Schaltfläche installieren.
E
Im letzten Scluitt lrid das CMS zur Benutzung vorbereitct. Eventuell müssen Sie
atr dieser Stelle im Ioomlal-Hauptverzcichüis roch die notwendiSe Datei con Bu
rofion.pltp selbst erstellen utrd mit dem vom Irctallationsprogramm vorgegebenen
'l'ext füllen. Löschen Sie außerdem nun das Vezeichnis Insrollofiofl.
Damit haber Sic ein vollständiges CMS installie(. Sie kijnnen sich nrn die Beispielseite über der Link iitp://loculhost/-pearson/joomla/ anscha::e]r, (>Abbitdutrg 13.1a)
und sich als Adini strator in das so8enarnte Backend über den Link einloggen
(>Abbildrng 13.151. Dies geschieht mit dem Loginnämcn admjn utrd dem während der
lnstallation detulierten Passwort.
13.5
Der TI
tungss
dor so1
Abbildung13.14: lm
Frontend des Systems eßcheinen die eingeste ren Artiket.
system
13.5-t
Das
Pii
h
bung
auf dq
13.5 Vinualisierung und Cloud computing
Ahbildung 13.t5: lm
Backend
wid
das System vom Administrator vemahet.
lier
lassen sich auch weitere
BeiutzerJür das System eßtellen bzw. deren Rechte festlegen.
13.5 Virtualisierung und Cloud Computing
Der Trend ist unverkennbar: Immer mehr Hardware wird konsolidiert, d.h., mehrere leis
tunSsschwache Eiozelsysteme werden in vituelle Sewcrparks ausgelagert. Das Rechnen in
der sogenamten Clo d, der Wolke, die aus einem Verbund aus spezialisierten CompuLersystemen besteht, wird in absehbarer Zukrmft den hochgerüsteter Desktop-Pc ersetzen.
13.5.1 VirtuelleComputer
Das Pdtrzip eitres f.irtuellen Compute$ haben sia währcnd [uer Ütuun3en in dpr Leürutrgcbereits kemengelemt. Per Software wird eine Computeryiattfom anl Verfügung gestellt,
auf der man unterschiedliche Betdebssysteme und Anwenderprogramme ifftallieretr karü.
büg
[,,lit dem Begriff
"vifiuell"
wird ein System beschrieben, das nicht real existiert aber eine entsprcchende
Funktionaiität zur Verfügung stellt..
389
Folgende Virtualisierungsanwendungen bevölkerr derzeit den Markt:
r Auf dem Desktopbereich buhlerl vMwarc, Oruc1e vrrrualBox und Windows vit'tl)ol PC
r
rm dic GunsL der Arwonder.
lm SeNerbereich findet man die Vltualisierurgslösurgen LEN und
(yM
können d
Mithilfe
r
Letzterc ist
nlittlerweilc fester Bostandteil des LinL\-Kemels.
Wclche Änwendungsbereiche dockt die Virtualisierung ab?
Microsoft verwendet eine Spezialform, die Viriual PC Umgebung, zur Realisierung eines virakiuel
tuellen windows XP-Computers, auf welchem ältere WindDws-Pro$aIrtme auch auf
[4]'fwo]€
len Wüdows 7 Systemer Senutzt werilen k6nllen. Mac OS X-Änwetrder nutzen
WinFusion oder dcn Porolle-ls Des]ilop, um untex ihrem bevorzugten Betriebssvstem au'h
virhrellen
eires
Perfomance
dows-Programme verwenden zu können Natijrlich reicht die
Systems nicht volst:indig an die ejnes hardwarebasierten Computersystems Standardsoft
ware läutt aber in iedem FaI perfekt, urd mittlerweile turktioniercn auch Dircctx oder
Opeü-G]--basierte Gmfiksoflware aufvielen vi uelletr Plattfomen [>Abbildung I3'16)
Abbilduq
13.5.2
Ein wich
bund vo
genderm
Ein Gm[
Daten wl
üblicherl
Abbi|dungr3.r5:]\4ittlerweilelassen§ichauchkompl€xe3D.spiele]nvirtueLLenUmg."bungenbetrelben:hierdasopencL
bäsi€de SpiA Tuxracer auf€inem Windows 7 Hosi mit ubuntu C ient unler ora.levirtualBox'
Kontalü
Google'',|
Abschni
- nicht g
stellt,
lm Bereich der Vinualisierung wird das Wirßsystem, das die Mrtuälisierungsplatdorm zur Verfüqung
Hot genannt. Die virtuellen Systeme werden als a/bra bezeichnel.
Im Serveüereich lässt man auf einem physikalischen Server, der über viel RAM und emen
leistungsstarken Prozessor vedügt. eine große Anzali viriueLter (web)Seruer laufcn Dadurch
Auch G(
CIoud-A
in diesä
Die Mde
topsofts
Vktualkierung und cloud computing
können den Kundcn eigere Root Sener bei minimalem Hardwareeinsatz argeboter werden.
Mithilfe der Lemumge.bung habeD Sie ja bercits einen Apache-WebseNer aufgeseizt, der
aüch vom Gastsystcm arß genutzt werden ka]rn (>Abbildury 13.17).
ü4
i3@
Oa
Abbildung 13.17:
Das vinue e Ubuntu Llnux Synem auf der W;rdows 7 Platfiorm (hinteres F€nner) dient dem Wirts
system as Apache-seruer (Browserfenner m vordergrund). Dadurch kann riran hervorragend servۧysteme tenen, bevor
rnan diese onllne rea isi€rt.
13.5.2 Arbeiten in und mit der Cloud
Ein wichiigcr ZL,kLr.ftstrend wird die ANlagerung von Anr.endungen nr die Cloud, den Ver
bund von spezialisierten Rechnern, sein. Das Konzept des Clord-Computing lässt sich fol
gendermaßen beschreibenr
nin Gtußteil der IT{nfrastruktur, die bislang auf Seiten des Anwenders zu finden nar, wird
von einem oder mehreren e),1ol.i]cn Anbictcrn als Dicnst angemicici. Dic An ,endunCen rnd
Daten werden dcht mchr lokal vorgehalten, sondern befinden sich in de. uloüd. Diese lvird
übliche areise per Intcrnel, in größeren Betrieben auch per lniranet zur Verfügüng gestellt.
Kontakt mit einer Cloud-Struktu haben Google-Anwen.ler bercits heute: Der persdnliche
Google Account ist mit der möglichcn Nutzung dcr Coogle Bürosolti,\iarc verknüpft, vgl.
Ahschnitt lrzr.. Die eigenen Dokumente lverden auf diese Weise auch jn der Clord gelagert
- ifcht ganz unk tisch vom Standpurkt des Datenschutzes.
Arch
Google Wave, der ncuc Kommunikaiionsdienst von Google, zähll zu dcn typischcn
Cloud Atrwendunger. ln Cooglo Wave verschrnelzen Kommunikation und Intcraktion, d.hin diesem Fall die Arbeit an gemeinsamen llokumenter in gemeinsamen Projekten.
I
I
Die Möglichkeiten des Ciord-Conlputing e$hecken sich aber über das Nutzcn vor Dcsktopsoftware hinaus auch auf die Verwenduüg ir Verbindung mit mobiler Gerätenr So
brachic Googlc mil dem ersten Google Handy Nexus One eine SpracherkenDung mit dem
Namen Speecä ,o lex, a den Markt. Die verblüffend gut afbeitende Umsetzung von Sprache ir geschriebenen Texi basiert auf der Umsetzung der gesprochenen Informationen
durch Voiceserver, die sich in der Cloud befindcn (>Abbildung 13.18).
ne\usone'
Abbildung 13.18: lniernelbasierte
Telefone wie coogl€s N€xus grefen dnekt auf Dienste der Cloud zu.