Menü

 

 

 

de-de

Grundlagen interaktiver Seiten

Prinzipiell verstehe ich unter interaktiven Webseiten solche Webseiten, bei denen der Benutzer Eingaben machen kann, auf die die Webseite reagiert. Typisch für so etwas ist ein Formular: man füllt es aus und schickt es weg. Die Webseite macht dann etwas damit. Oder auch ein Computerspiel im Web: der Benutzer bewegt die Maus und die Webseite reagiert darauf. Es gibt unterschiedliche Wege, so etwas zu realisieren. Ich möchte einige davon kurz ansprechen und mich dann auf die konzentrieren, die hier beschrieben werden.

Java ...

Java
Java-Downloads für alle Betriebssysteme

Java-Applets

Java-Applets sind Anwendungen, die in der Sprache Java (von Sun Microsystems entwickelt) geschrieben sind und in eine Webseite eingebunden sind. Technisch funktioniert es so, dass das Java-Applet mit der Seite wie ein Bild heruntergeladen wird und dann auf dem Computer des Benutzers abläuft. Java-Applets sind nicht Gegenstand dieses Tutorials.

Flash

Flash-Scripte sind in der Sprache Flash geschrieben, einem kommerziellen Produkt, das von Adobe (früher Macromedia) vertrieben wird. Es können ganze Webseiten mit Flash realisiert werden. Flash-Scripte sind nicht Gegenstand dieses Tutorials.

PHP

PHP-Scripte sind Scripte, die auf dem Server ablaufen, bevor die Webseite zum Computer des Benutzers (Client) geschickt wird. Es ist absolut wichtig zu verstehen, dass das PHP-Script auf dem Server durchlaufen wurde, dass dadurch die HTML-Seite erzeugt wurde, die dann an den Client geschickt wird. Die HTML-Seite kann also danach nicht mehr durch PHP verändert werden.

Beispiel:

x = 3
Der Benutzer gibt in seinem Formular x als 5 ein.
Weiter unten wird der Wert für x abgefragt: er ist immer noch 3, da es immer noch die gleiche Seite ist.
x wird 5, wenn das Formular zum Server geschickt wird, PHP die 5 akzeptiert und eine neue HTML-Seite mit x = 5 an den Client schickt.

PHP lässt sich nahezu beliebig mit HTML mischen; es ist, wie bereits oben erwähnt, wichtig, dass nur immer das Ergebnis des PHP-Scripts als Webseite an den Client geschickt wird. Zu berücksichtigen ist, dass nach dem einleitenden Tag <?php alles folgende bis zum schließenden Tag ?> als PHP-Code interpretiert wird.

Beispiel:

<p>Dies ist ein <?php echo "PHP"; ?> Text</p>

ergibt als gesendete Seite

<p>Dies ist ein PHP Text</p>

Wenn ich hier "beliebig" sage, meine ich auch, dass man z.B. mitten in einer Styledefinition ein PHP-Script haben kann. So kann man z.B. Textfarben in Abhängigkeit von irgendwelchen serverseitigen Berechnungen darstellen.

downloadrunCodebeispiel 001:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Codebeispiel 001</title>
</head>

<body>
<?php
for ($i=0;$i<25;$i++) {
    
$farbe sprintf('#%X6'$i*10); // Beschreibung von sprintf z.B. bei http://www.selfphp.com
    
echo '<p style="color:'.$farbe.';">Dies ist der '.$i.'. Text</p>';
}
?>
</body>
</html>

Javascript (ohne Ajax)

Im Gegensatz zu PHP is Javascript eine clientseitige Scriptsprache. Das bedeutet, das Script läuft auf dem Computer des Benutzers. Also muss die Webseite einschließlich der Javascript-Anteile vom Server an den Client geschickt werden.

Damit stellt sich die Frage, wann man Javascript und wann man PHP einsetzen soll. Als Antwort möchte ich sagen, dass alles, was eine Veränderung der Daten auf dem Server (z.B. Datenbankinhalte) erfordert, mit PHP gemacht werden muss. Dinge mit geringerer Priorität können auf dem Client laufen.

Beim Einsatz von Javascript muss man berücksichtigen, dass Benutzer Javascript auf ihrem Computer abschalten können. Damit entsteht das Risiko, dass Javascript-Inhalte nicht ausgeführt werden, obwohl der Programmierer sich es so gedacht hat. Als Beispiel möchte ich eine Gültigkeitsprüfung für Emails nennen. Diese kann wunderbar mit Javascript gemacht werden. Wenn nun der Benutzer Javascript an seinem Computer abgeschaltet hat wird die Gültigkeitsprüfung nicht durchgeführt. Der Ausweg aus dieser Misere ist einfach: man macht die Gültigkeitsprüfung mit Javascript und noch einmal mit PHP. Dann erwischt man, falls Javascript eingeschaltet ist, bereits im clientseitigen Ablauf die ungültigen Emailadressen. Ist Javascript aber ausgeschaltet, so erkennt PHP die ungültigen Emailadressen.

downloadrunCodebeispiel 002:

<?php
header
('content-type: text/html; charset=utf-8');
// Hilfe zum Debuggen ein- / ausschalten
$debug false;

// ein regulärer Ausdruck zur Prüfung der Email-Adresse
$emailpattern '^[_a-zA-Z0-9-](\.{0,1}[_a-zA-Z0-9-])*@([a-zA-Z0-9-]{2,}\.){0,}[a-zA-Z0-9-]{3,}(\.[a-zA-Z]{2,4}){1,2}$';
$status '&nbsp;'// ein Leerzeichen

// falls Debugging eingeschaltet, hier Inhalt von $_POST anzeigen
if ($debug) {
    echo 
'<pre>';
    
print_r($_POST);
    echo 
'</pre>';
}

// PHP Prüfung auf korrekte Emailadresse
if (isset($_POST['email'])) {
    if (!empty(
$_POST['email'])) {
        if (
ereg($emailpattern$_POST['email'])) {
            
$email $_POST['email'];
            
$status 'Die Emailadresse ist gültig.';
        } else {
            
$status 'PHP hat die Emailadresse '.$_POST['email'].' als ungültig bewertet.';
        }
    } else {
            
$status 'Es wurde keine Emailadresse eingegeben.';
    }
}
?>
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gültigkeitsprüfung für Emails</title>

<!-- Javascript Prüfung auf korrekte Emailadresse -->
<script language="JavaScript" type="text/JavaScript">
var emailCheck = false;
function emailTest(wert) {
    var emailPattern = /<?php echo $emailpattern?>/;
    if (emailPattern.exec(wert)) {
        emailCheck = true;
    } else {
        emailCheck = false;
        alert('Javascript hat die Emailadresse '+wert+' als ungültig bewertet.');
        document.emailtest.email.focus();
    }
}
</script>
</head>

<body onload="document.emailtest.email.focus()">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" name="emailtest">
<input type="text" name="email" value="<?php if (isset($email)) echo $email?>" onblur="emailTest(this.form.email.value)" />
<input type="submit" name="Submit" value="Senden" />
</form>
<p><?php echo $status?></p>
</body>
</html>

Debugging

Bei der Entwicklung eines Scriptes kann es sehr leicht zu Fehlern kommen. Syntaxfehler sind oft durch den PHP-Parser bereits erkennbar, logische Fehler dagegen nicht. Um zu erkennen, was beim Senden des Formulars übertragen wird, kann man mit print_r sich das Array Post anzeigen lassen. Damit dies vernünftig dargestellt wird, wird es mit pre formatiert. Mit $debug = true wird dieses Debugging eingeschaltet.

Der reguläre Ausdruck

Emailadressen überprüft man am besten mit einem regulären Ausdruck. Mit [_a-zA-Z0-9-] wird die Auswahl der gültigen Zeichen auf a-z alle Kleinbuchstaben, A-Z alle Großbuchstaben und 0-9 alle Ziffern, sowie den Unterstrich _ und den Bindestrich - begrenzt.. Das ^ Zeichen am Anfang bedeutet, dass die darauf folgende Kombination am Anfang stehen muss. Danach folgt ein geklammerter Ausdruck ( ... )* der aussagt, dass alles , was in der Klammer steht, beliebig oft kommen kann, also auch 0 mal. In der Klammer steht der Punkt durch einen Backslash maskiert, da der Punkt ohne den Backslash eine steuernde Bedeutung hat und nicht als das Zeichen Punkt erkannt wird. 0 und 1 un der geschweiften Klammer bedeuten, dass der Punkt entweder garnicht oder maximal 1 mal erlaubt ist. Danach kommt das @ Zeichen. Der Rest des regulären Ausdrucks folgt den gleichen Spielregeln, wie ich sie bereits erklärt habe. Wenn Sie es nachvollziehen wollen, fangen Sie am besten am Ende des regulären Ausdrucks an. Es sei gesagt, dass der Domain-Name prinzipiell aus drei Elementen: Subdomain, Domain-Name und Top-Level-Domain besteht, wobei in der Subdomain wieder Unterdomains erlaubt sind.

Die Prüfung der Emailadresse per PHP

Beim ersten Aufruf der Seite wurde das Formular noch nicht verschickt. Daher wird jetzt abgefragt, ob es bereits verschickt wurde. Wenn das der Fall ist, wird geprüft, ob die Emailadresse nicht leer ist. Die Emailadresse wird dann mit der Funktion ereg überprüft, ob sie dem Muster des regulären Ausdrucks genügt. Je nach Prüfergebnis wird die Variable status gesetzt.

Die Prüfung der Emailadresse durch Javascript

Im Javascript-Teil läuft im Prinzip die gleiche Prüfung ab wie im PHP-Teil. Trickreich ist hier, dass man den gleichen regulären Ausdruck nutzen kann, indem man ihn per PHP in das Javascript einfügt. Überlegen Sie mal an dieser Stelle, warum man Javascript-Variablen nicht an PHP übergeben kann.

Das Formular

Das Formular ruft sich selbst auf. Dies geschieht, indem man bei action die Server-Variable $_SERVER['PHP_SELF'] aufruft. Im Textfeld wird die Emailadresse gespeichert, falls sie bereits bekannt ist, also wenn das Formular bereits einmal aufgerufen wurde. Wenn man das textfeld verlässt, wird die Javascript-Prüfung gestartet.

Das Formular testen

Starten Sie das Codebeispiel (Javascript ist eingeschaltet). Es erscheint das Textfeld und der Sende-Button. Der Cursor blinkt im Textfeld. Klicken Sie auf Senden. Die Javascriptprüfung wird gestartet Sie meldet sich mit einer Alertbox "Javascript hat die Emailadresse als ungültig bewertet". Was immer Sie auch machen: das Formular wird nur abgeschickt, wenn eine korrekte Emailadresse angegeben wurde.
Schalten Sie Javascript in Ihrem Computer ab. Jetzt blinkt der Cursor nicht im Textfeld. Testen Sie wie oben. Es wird die PHP-Gültigkeitsprüfung gestartet. Diese meldet sich mit "PHP hat die Emailadresse als ungültig bewertet." oder "Es wurde keine Emailadresse eingegeben.". Bitte schauen Sie sich auch jeweils den Quellcode der Seite an: Sie werden ausschließlich HTML und Javascript sehen.

Übung

Schreiben Sie ein Script, in dem Titel (falls vorhanden), Vorname, Nachname und Email abgefragt werden. Die Felder Vorname und Nachname dürfen nicht leer sein. Überlegen Sie sich, aus wieviel Zeichen ein Vorname mindestens sein muss. Überlegen Sie sich auch, welche Zeichen erlaubt sein sollen. Folgende Namen sollen z.B. erlaubt sein:

Folgende Namen sollen z.B. nicht erlaubt sein:

downloadrunCodebeispiel 003: Musterlösung

Die Musterlösung stellt eine Möglichkeit unter vielen dar, wie ein solches Formular aufgebaut sein kann. Sie nutzt PHP und Javascript wie vorher diskutiert, aber auch CSS-Formatierungen, die mit Javascript unterschiedlich angesteuert werden.

Browser-Erkennung

Es mag manchmal notwendig sein, für verschiedene Browser verschiedene Stylesheets zu erzeugen. Dazu ist es aber erforderlich, die Browser zuerst einmal zu erkennen. Dazu hat man Code entwickelt, den man als "Browser Sniffer" (Browser-Schnüffler) bezeichnet. Meistens wird dieser Code als Javascript ausgeführt. Ich habe einen Browser Sniffer mit PHP erzeugt, der die Umgebungsvariable $_SERVER['HTTP_USER_AGENT'] liest, und daraus den Browser und dessen Version extrahiert. Der Sniffer ist für die bekanntesten Browser ausgelegt, kann aber leicht auf weitere Browser erweitert werden.

downloadCodebeispiel 018:

<?php
function browserVersion($browserstring$suchstring)
{
    
$versionpattern '([0-9]+\.)*([0-9]+)'// Muster ist Zahl.Zahl. ... .Zahl
    
$position strpos($browserstring$suchstring); // Position, ab der nach der Version gesucht wird
    
$startversion substr($browserstring$position); // nur ab Position suchen
    
if (ereg($versionpattern$startversion$regs)) { // findet ersten String gemäß Muster
        
return $regs[0];
    } else {
        return 
'unbekannt';
    }
}

function 
browserSniffer()
{
$browserstring $_SERVER['HTTP_USER_AGENT']; // HTTP_USER_AGENT wird analysiert

// Gecko Typen Mozilla, Firefox, Netscape
    
if (ereg('Gecko' $browserstring)) {
        if (
ereg('Firefox' $browserstring)) {
            
$erg['browser'] = 'Mozilla Firefox';
            
$erg['version'] = browserVersion($browserstring'Firefox');
        } elseif (
ereg('Netscape' $browserstring)) {
            
$erg['browser'] = 'Mozilla Netscape';
            
$erg['version'] = browserVersion($browserstring'Netscape');
        } else {
            
$erg['browser'] = 'Mozilla';
            
$erg['version'] = browserVersion($browserstring'rv:');
        }
    }

// MS Internet Explorer
    
if (ereg('MSIE' $browserstring)) {
        
$erg['browser'] = 'Internet Explorer';
        
$erg['version'] = browserVersion($browserstring'MSIE');
    }

// Opera
    
if (ereg('Opera' $browserstring)) {
        
$erg['browser'] = 'Opera';
        
$erg['version'] = browserVersion($browserstring'Opera');
    }

// Safari -nicht getestet-
    
if (ereg('Safari' $browserstring)) {
        
$erg['browser'] = 'Safari';
        
$erg['version'] = browserVersion($browserstring'Safari');
    }

// Konqueror -nicht getestet-
    
if (ereg('Konqueror' $browserstring)) {
        
$erg['browser'] = 'Konqueror';
        
$erg['version'] = browserVersion($browserstring'Konqueror');
    }

// Ergebnis
    
return $erg;
}
?>

Der Aufruf ist dann z.B.:

Beispiel:

$ergebnis = browserSniffer();
echo $ergebnis["browser"]." ".$ergebnis["version"]."<br />";

Kommentar eintragen

Kommentare zu dieser Seite