| 
Verbinden von clientseitiger
und serverseitiger Programmierung
| Verbinden
von clientseitiger und serverseitiger Programmierung |
|
Es gibt zahlreiche Gründe, die clientseitige
Programmierung mit einem serverseitig arbeitenden Programm
zu verknüpfen und noch zahlreicher sind die Möglichkeiten,
wie man das tun kann. Es ist z.B. unter Umständen günstig,
den Warenkorb bei einem Shopsystem clientseitig zu realisieren
die Produkte aber, die verkauft werden sollen, aus einer Datenbank,
also serverseitig zu ziehen. Wem jetzt nicht klar ist, der
möge hier
clicken. (Das Programm ist noch zu schwach, um im kommerziellen
Umfeld eingesetzt zu werden. Es handelt sich um ein Übungsbeispiel,
welches im Rahmen einer Trainingsmassnahme entwickelt wurde.
Unter Umständen kann es aber als Basis dienen für
einen Shop. Das ganze Programm kann man hier
downloaden. Was erhalten wir ? Wir sehen, dass wenn wir auf
eine Produktgruppe clicken (Sachbücher,Romane,Umwelt,Soziologie)
wir die zu dieser Produktgruppe gehörenden Elemente erhalten.
In diesem Fall kommen die Daten aus einem Flatfile, wobei
es eigentlich egal ist, man könnte sie auch aus einer
mysql Datenbank ziehen. Der Flatfile sieht so aus.
produktgruppe:Romane+id:Llosa+name:Vargas
Llosa+price:2468+title:Gespräch
in der Kathedrale+description:Darstellung
einer Diktatur südamerikanischen Stils. Technisch sehr
anspruchsvoll geschrieben. Versteckt in dem ganzen Chaos aber
auch eine unglückliche Love Story.
produktgruppe:Romane+id:Sabato+name:Ernesto
Sabato+price:4480+title:Der
Tunnel+description:Bißchen
durchgeknallter Maler sucht eine Frau, die einzige, die seine
Bilder versteht. Ziemlich düstere Atmosphäre, soviel
steht fest.
produktgruppe:Romane+id:Svevo+name:Italo Svevo+price:3290+title:Ein
Leben+description:Angestellter im kaufmännischen Bereich
ist ein bisschen abgeturnt von seinem Job und dann, wenn's
dicke kommt kommt's ja meistens volle Kanne, verliebt er sich
auch noch unglücklich.
produktgruppe:Romane+id:Mann+name:Thomas Mann+price:2468+title:Felix
Krull+description:Variation zum Leitmotiv Thema von T.M. allerdings
in der Light Version.
produktgruppe:Romane+id:Hesse+name:Hermann Hesse+price:2468+title:Das
Glasperlenspiel+description:Werk mit Tiefgang. Gegen Chaos
hilft nur die Vergeistigung.
produktgruppe:Sachbuecher+id:Eidadauz+name:Werner Eidadauz+price:2850+title:Staunen
als Vorraussetzung der Erkenntnis+description:Auf den Pfaden
Goethes. Doch im Erstarren such ich nicht mein Heil, das Schaudern
ist der Menschheit bester Teil...
usw.
Entscheidend ist nun, dass, wir mit diesen Werten
etwas aufbauen, was wir mit JavaScript verwerten können.
Es findet nun ein kleiner Kunstgriff statt. Wir brauchen einserseits
alle Angaben zu dem Produkt (Produktgruppe, id (Bestellnummer),
Preis,Titel, Autor,Beschreibung) andererseits brauchen wir
aber auch die bestellte Menge, wobei sich letztere ja ändern
kann. Wir haben in einem Formular aber nur zwei Werte, die
wir abgreifen können, nämlich den Namen des Formularfeldes
und den Value. Wir übergeben also alle statischen Daten
an den Namen und werten den Namen mit JavaScript aus. Die
Übergabe der Daten an Javascript sieht dann so aus.
name="Christl|Frieda
Christl|Hatte M.Luther einen Dachschaden ?|3290"
Die obenstehende Zeichenkette generieren wir
uns mit einem serverseitig arbeitenden Programm, zum Beispiel
mit PHP, Perl, Visual Basic Script, Cold Fusion oder mit was
auch immer. (In diesem Fall machen wir es mit Perl, aber das
ist eigentlich egal.) Diese Zeichenkette wiederum können
wir nutzen, wenn wir es schaffen, sie in ihre Einzelteile
zu zerhacken. Hierfür benötigen wir einen JavaScript
Einzeiler.
waren1= bestellt.split('|');
Haben wir die Einzelteile, bauen wir daraus
einen zweidimensionalen associative Array.
waren1= bestellt.split('|');
waren[waren1[0]]=new Array();
waren[waren1[0]][0]=waren1[0];
waren[waren1[0]][1]=waren1[1];
waren[waren1[0]][2]=waren1[2];
waren[waren1[0]][3]=waren1[3];
waren[waren1[0]][4]=parent.rechtsoben.document.shopping[i].value;
Wer sich das unter Zugriffe
auf Formularelemente, Funktionen
und Arrays, Hashes, mehrdimensionale
Arrays (Hashes) jetzt in Erinnerung ruft, dem wird schnell
deutlich, wie dieser Shop funktionniert. Das serverseitig
arbeitende Programm baut die Daten also nur so auf, dass sie
von JavaScript verwendet werden können. Der Warenkorb
ist aber über JavaScript realisiert.
Mit einer Verbindung aus clientseitiger und
serverseitiger Programmierung lässt sich noch ein anderes
Problem lösen. Serverseitige Programme arbeiten immer
so, dass sie mit oder ohne Variablen angeschoben werden, dann
irgendetwas tun und anschliessend eine komplette HTML Seite
zurückschiessen. (Ein Ausweg bilden hier nur Java Applets
in Verbindung mit Servlets, aber das berücksichtigen
wir hier nicht.) Die Tatsache, dass eine komplette HTML Seite
zurückgeschossen wird ist insofern nervig, als sich die
komplette Seite immer wieder neu aufbaut. Schöner wäre
es, man könnte nur einen Teil einer HTML Seite mit neuen
Daten füllen und nur diesen Teil dynamisch verändern,
nicht aber die ganze Seite. Vielen ist wahrscheinlich jetzt
nicht klar, wovon überhaupt die Rede ist, so dass wir
empfehlen, mal hier
zu clicken. Alles klar ? Macht man einen Eintrag, blendet
sich kurz Eintrag erfolgt auf, anschliessend wird der Eintrag
gezeigt, ohne dass sich die Seite hierfür neu lädt.
Desgleichen kann man durch alle Einträge navigieren,
ohne dass sich die Seite neu aufbaut. Das ist, soit dit en
passant, auch eher das Verhalten, was man von einer DTP Anwendung
her kennt. Das ganze Programm ist nur ein Skript, den man
sich hier
downloaden kann. Man wirft ihn in einen Ordner, wo PHP verstanden
wird und dann funktionniert es. Der Skript selber ist etwas
kompliziert, die prinzipielle Vorgehensweise aber ist relativ
einfach. Wir haben einen Frame, der unsichtbar ist, bzw. den
wir rein theoretisch unsichtbar machen können. Wir zeigen
die Stelle, wo der PHP Skript den Frame aufbaut.
if (empty($modul))
{
print "
<html><head><title>Gästebuch mit DHTML</title></head>
<frameset rows=\"80%,20%\" frameborder=0>
<frame name=oben src=gastdhtml_cross_browser.php?modul=1>
<frame name=unten src=gastdhtml_cross_browser.php?modul=2
noresize>
</frameset>
</html> ";
}
Im Frame oben steht das eigentliche Gästebuch,
in den Frame unten schiessen wir den JavaScript, der den Frame
oben steuert und den wir von PHP produzieren lassen. Aus didaktischen
Gründen haben wir für den Frame unten noch 20 %
definiert, damit man sich via rechte Maustaste noch den Quelltext
anschauen kann, wir hätten diesen Frame aber genauso
gut auf 0 % setzen können. Etwas schwieriger ist die
Funktion reinfeuern() des PHP Skriptes. Diese Funktion wertet
die Datei gaste.txt aus, in der die Einträge der User
gespeichert werden. Sie produziert dann aus den Einträgen
in dieser Flatfile Datenbank (also gaste.txt) einen JavaScript
Array, diesen JavaScript Array schiessen wir zusammen mit
JavaScript Funktionen, die wir uns ebenfalls von PHP generieren
lassen, in den (unsichtbaren) Frame unten. JavaScript wiederum
kann direkt Inhalte in Teilbereiche des Frames oben schiessen,
was wir, wenn der JavaScript mal im Frame unten angekommen
ist, dann auch tun. Soweit die simple Theorie. Wir zeigen
den von PHP produzierten JavaScript Code, also das, was in
den Frame unten geschossen wurde.
<html><head><title>Einträge</title>
<script language=javascript>
banane=new Array();
function reinmach5()
{
parent.oben.document.getElementById("feedback").innerHTML="Eintrag
erfolgt";
window.setTimeout("wegmach()",300);
}
function wegmach()
{
parent.oben.document.getElementById("feedback").innerHTML="";
}
banane[0]="Andres Ehmann limitatio infos@infos24.de limitatio
TESTEN limitatio Wer nicht versteht was passiert soll einfach
mal einen Eintrag machen.";
banane[1]="Andres Ehmann limitatio Andres_Ehmann@web.de
limitatio DHTML limitatio Ist es nicht schön, dass man
durch einen Misch aus DHTML und serverseitiger Programmierung
erreichen kann, dass sich nur bestimmte Teile einer Webstit
neu laden und nicht immer die ganze Website ?";
function reinmach (a,b)
{
einzelteile=new Array;
var speicherfertig="";
for (i=a;i<=b;i++)
{
if (typeof banane[i] !="undefined")
{
einzelteile=banane[i].split(" limitatio ");
speicher="
<tr><td>"+einzelteile[0]+"</td></tr>
<tr><td>"+einzelteile[1]+"</td></tr>
<tr><td>"+einzelteile[2]+"</td></tr>
<tr><td>"+einzelteile[3]+"</td></tr>
<tr><td><hr></td></tr></tr>";
speicherfertig=speicherfertig.concat(speicher);
}
}
parent.oben.document.getElementById("feedback2").innerHTML="<table>"+speicherfertig+"</table>";
}
function reinmach2()
{
einzelteile=new Array;
var speicherfertig="";
for (i=0;i<=2;i++)
{
if (typeof banane[i] !="undefined")
{
einzelteile=banane[i].split(" limitatio ");
speicher="
<tr><td>"+einzelteile[0]+"</td></tr>
<tr><td>"+einzelteile[1]+"</td></tr>
<tr><td>"+einzelteile[2]+"</td></tr>
<tr><td>"+einzelteile[3]+"</td>
</tr>
<tr><td><hr></td></tr> ";
speicherfertig=speicherfertig.concat(speicher);
}
}
parent.oben.document.getElementById("feedback2").innerHTML="<table>"+speicherfertig+"</table>";
wieviele=banane.length / 2;
wieviele=Math.floor(wieviele);
rest=banane.length % 2;
if (rest !=0)
{
wieviele=wieviele+1;
}
var anfang=0;
var ende=2;
anzeige="";
anzeigefertig="";
for (e=0;e<wieviele;e++)
{
anzeige="
<td>
<A href=\'JavaScript:parent.unten.reinmach("+anfang+","+ende+");\'
style=text-decoration:none;>\["+e+"\]</A>
</td>";
anzeigefertig=anzeigefertig.concat(anzeige);
anfang=anfang+2;
ende=ende+2;
}
parent.oben.document.getElementById("feedback3").innerHTML="<table><tr>"+anzeigefertig+"</tr></table>";
}
</script></head>
<body onload="reinmach2();reinmach5()"></body></html>
Wer jetzt noch genau wissen will, wie dieser
JavaScript Code produziert wurde, der muss sich sich die PHP
Funktion reinfeuern() im PHP Skript anschauen.
|
 |
