Unser Logo Die Systemdokumentation
 
Startseite
 
Einführung
 
Geschichte
 
Länder
 
Ausrüstung
 
Spielfeld
 
Spieler
 
Spielregeln
 
Glossar
 
Gästebuch
 
Sitemap
 
Konzept
 
SysDok
 
Kontakt
 


Back to Softworld
 
 

Systemdokumentation der Kricket-Website

Inhaltsverzeichnis

Bestandteile der Website / Verzeichnisstruktur
Generelles zur Website
    Einfachheit/Kompatibilität
    Unterstützung von JavaScript
    Bilder
    JavaApplets
    CSS
    Farben
    Struktur
    Browserübergreifende Kompatibilität
    Namengebung
    Unterhalt und Pflege
Entwicklungsumgebung und Test-Browser
    Plattform
    Test-Server
    Test-Browser
Technisches und Techniken
    Generell
    Mehr als bloss HTML
    Einschränkung
Grobstruktur / Übersicht über die Verbindung der Dokumente
    Generell
    Erstaufruf via Website-URL (http://Adresse/cricket)
    Aufruf via das Navigationsmenu
    Aufruf via interne Hyperlinks
    NN4+ Unterstützung
Zentrale Dokumente
    index.html
        Zweck
        Inhalt/Prozess
    layout.php
        Zweck
        Inhalt/Prozess
    menu.php
        Zweck
        Inhalt/Prozess
    menuh.php
        Zweck
        Inhalt/Prozess
    fonts.css
        Zweck
        Inhalt/Prozess
    const.php
        Zweck
        Inhalt/Prozess
    search.php
        Zweck
        Inhalt/Prozess
    counter.txt
        Zweck
        Inhalt/Prozess
Webseiten
    Startseite
        Extras
        p_homen4.php
        p_home.php
        t_home.php
        t_homen4.php
        applet1.php
        sscflash.php
    Einführung
        Extras
        p_basics.php
        t_basics.php
        basics/basics1.php
        basics/basics2.php
        basics/basics3.php
        basics/basics4.php
        basics/basics5.php
        basics/menu_b.php
    Geschichte
        Extras
        p_hist.php
        t_hist.php
    Ausrüstung
        Extras
        p_equip.php
        t_equip.php
    Feld
        Extras
        p_field.php
        t_field.php
    Länder
        Extras
        p_popu.php
        t_popu.php
        imagemap/
    Spieler
        Extras
        p_player.php
        t_player.php
        player/player1.php
        player/player2.php
        player/player3.php
        player/player4.php
        player/player5.php
        player/menu_p.php
    Spiel/Spielregeln
        Extras
        p_rules.php
        t_rules.php
        rules/rules1, rules2, rules3, rules4, rules5.php
        rules/menu_r.php
    Glossar
        Extras
        p_gloss.php
        t_gloss.php
    Gästebuch
        Extras
        p_guest.php
        t_guest.php
        guestbk/guest1.php (Besucheransicht des Gästebuches)
        guestbk/guest2.php (Einfügen des Besucherkommentars, Bestätigung)
        guestbk/guest3.php (Auswahlseite für den Administrator)
        guestbk/guest4.php (Gästebuchansicht für den Administrator)
        guestbk/guest5.php (Freigabe und Löschen von Datensätzen)
        guestbk/guestb.mdb
    Sitemap
        Extras
        p_site.php
        t_site.php
    Konzept
        Extras
        p_concpt.php
        t_concpt.php
    Systemdokumentation
        Extras
        p_docu.php
        t_docu.php
Bibliographie
    Zu Rate gezogene Bücher
    Zu Rate gezogene Websites
Tests
    Primäres Design
    Erste Testrunde - lokal
    Zweite Testrunde - remote
    Testergebnisse
Testergebnisse
    Darstellung
        Auflösung 1024x768, maximiertes Browserfenster
        Auflösung 800x600, maximiertes Browserfenster
        Verkleinertes Browserfenster
        Farben
    Keine Bilder
        Internet Explorer 6.02
        Netscape Navigator 7.02
        Opera 7.03
        Netscape Communicator 4.7
    Funktionalität
        Formulare
        Links
        Datenbank
        dHTML
    Kein Java Support
    Kein JavaScript Support
        Einstieg
        Startseite
        Einführung - Rollover
        dHTML
        Imagemap
        Gästebuch
    Während der Realisierung aufgefallen
        CSS
        Unsaubere Scripts
        Bilder und Listen
        Formular-Submit
        Kommentare
    Schlussbemerkungen
        NN4+
        Andere
  Addendum

Bestandteile der Website / Verzeichnisstruktur

Ordner: cricket  
  index.html Einstiegspunkt, Default für Server
  fonts.css CSS Stylesheet Definitionen
  const.php Sammlung von Konstanten
  layout.php Zentrales Dokument für den Bildschirmaufbau
  counter.txt Besucherzähler
  menu.php Navigationsmenu für alle Seiten
  applet1.php Menu mit Hyperlinks zu anderen Websites
  search.php Verbindung zu Suchmaschinen
  p_home.php Einstiegspunkt für die Startseite
  p_.....php Einstiegspunkte für einzelne Websites
  t_home.php Seiteninhalt der Startseite
  t_.....php Seiteninhalte der einzelnen Webpages
  Ordner: guestbk  
             *.php Dokumente für das Gästebuch
             guest.mdb Gästebuch Datenbank
  Ordner: images  
             logo.gif Logo der Website
             andere Bilder für die Website
  Ordner: imagemap  
             *.html Dokumente für die Imagemap Hyperlinks
             *.jpg Bilder hinter Hotspots / für Popup Window
             worldmap.gif Weltkarte - Basis für Imagemap
  Ordner: player  
             *.php Dokumente für die Spieler-Seiten
             *.gif Bilder für die Spieler-Seiten (inkl. Animationen)
             menu_p.php Untermenu für die Spieler-Seiten
  Ordner: basics  
             *.php Dokumente für die Einführungs-Seiten
             *.gif Bilder für die Einführungs-Seiten (inkl. Rollover)
             menu_b.php Untermenu für die Einführungs-Seiten
  Ordner: rules  
             *.php Dokumente für die Spielregel-Seiten
             *.gif Bilder für die Spielregel-Seiten
             menu_r.php Untermenu für die Spielregel-Seiten

Generelles zur Website

Einfachheit/Kompatibilität

Um eine Mehrzahl der Browser, Browserversionen und Plattformen erreichen zu können, werden die wichtigen Elemente der Website einfach gehalten. So gibt es z.B. nichts Aussergewöhnliches im Navigationsmenu. Das Menu soll unter allen Umständen brauchbar sein.

Unterstützung von JavaScript

Wo JavaScript eingesetzt wird, ist eine Alternative für diejenigen Browser vorgesehen, die kein JavaScript unterstützen (<noscript> ... </noscript>). Auch sind die JavaScript-Funktionen in HTML-Kommentar-Zeichen eingebettet (<!-- ... //-->).

Bilder

Wo Bilder eingefügt werden, steht ein Alternativtext zur Verfügung, sollte der Browser das Anzeigen von Bildern nicht unterstützen.

JavaApplets

Wo nötig wird der <applet> Tag durch den moderneren <object> Tag ersetzt. Auch wird ein Alternativtext vorgesehen, falls Java vom Browser nicht unterstützt wird.

CSS

Die meisten der Stylesheets sind zentral im separaten Dokument fonts.css aufgelistet. Dennoch hat es sich vielerorts als nötig erwiesen, interne Definitionen vorzunehmen oder gar auf alte Schreibweisen zurückzugreifen (insbesondere für NN4+ Unterstützung).

Farben

Es wird darauf geachtet, vorwiegend websichere Farben einzusetzen, d.h. Farben, deren RGB-Werte ein Vielfaches von Hex33 bzw. Dec51 sind.

Struktur

Die Website setzt sich mehrheitlich aus *.php Dokumenten zusammen (ausser dem index.html und ein paar wenigen anderen Dokumenten). Wo nötig werden die einzelnen *.php-Files included. Bildschirmaufbau und Navigation werden zentral behandelt und sind jederzeit einfach zu unterhalten und gegebenenfalls zu erweitern. Tabellengrössen werden - wie in der Literatur empfohlen - hauptsächlich prozentual angegeben.

Browserübergreifende Kompatibilität

Wo nötig sorgt konditioneller Code dafür, dass verschiedene Browser und Versionen unterstützt werden (z.B. Elementadressierung: W3C DOM für IE+, NN6+, Opera4, etc. Microsoft DOM für IE4+, Opera7, etc. Netscape DOM für NN4).

Namengebung

Ordner, Dokumente, Bilder haben kleingeschriebene Namen und sind maximal 8 Buchstaben lang. So sollte die Website mit geringerem Aufwand auch auf ältere Server portiert werden können.

Unterhalt und Pflege

Die Aufteilung in einzelne *.php Dokumente sowie die zentrale Definition vieler Ausdrücke als Konstanten in const.php erleichtern die Pflege und den Ausbau der Website.

Entwicklungsumgebung und Test-Browser

Plattform

Die Website wurde mit dem HTML-Editor auf einem Windows XP Betriebssystem entwickelt.

Test-Server

Omni HTTPd mit PHP Version 4.2.2
Apache Webserver mit PHP Version 4.0.6

Test-Browser

Internet Explorer Version 6.0
Netscape Navigator Versionen 4.7 und 7.02
Opera Version 7.03

Technisches und Techniken

Generell

Die ganze Website ist so ausgelegt, dass auf Dokumenten-Ebene möglichst keine Redundanzen bestehen. Elemente, die mehrfach gebraucht werden, sind in separaten Dokumenten untergebracht und werden, wo nötig, included. Daher sind die meisten Dokumente *.php Dokumente.

Mehr als bloss HTML

Eine Anzahl Webpages verfügt über spezielle Effekte, JavaScript Funktionen und andere moderne Techniken:
 
JavaApplet siehe Startseite
Flash5 Film siehe Startseite
dHTML siehe Startseite, Einführung, Spielregeln,
Rollover Effekt siehe Einführung
Imagemap siehe Länder
Popup Window siehe Länder
GIF Animation siehe Spieler
Formular und Datenbank siehe Gästebuch
Andere JavaScript Funktionen siehe Gästebuch

Einschränkung

NN4+ wird generell unterstützt. Allerdings wurde - wegen des nicht geringen Mehraufwandes und der Tatsache, dass in der Literatur NN4+ als exotische Sackgasse bezeichnet wird - darauf verzichtet, dies durchgängig zu tun. So sind einige dHTML-Funktionen nicht unterstützt, was dem NN4+-Benutzer allerdings nicht auffällt (Einführung, Spielregeln).

Grobstruktur / Übersicht über die Verbindung der Dokumente

Generell

Generell beginnt jede Webseite, d.h. jede Seite, die durch das Navigationsmenu angesteuert werden kann, in einem separaten p_.....php Dokument.

Das p_.....php Dokument enhält den HTML Header mit den Meta Tags und dem Titel und bindet das fonts.css Dokument ein. Wo nötig, befinden sich auch JavaScript Funktionen im p_.....php Dokument.

Im Body passiert dann normalerweise nicht viel mehr als der Include des layout.php (wo der Bildschirm aufgebaut, das Navigationsmenu included, und dann das entsprechende t_.....php Dokument eingebunden wird, das den eigentlichen Seiteninhalt umfasst). Der end Body Tag wird zum Schluss im p_.....php Dokument gesetzt.

Erstaufruf via Website-URL (http://Adresse/cricket)

  • index.html  öffnet via JavaScript (document.location.href="p_home.php") p_home.php
    • p_home.php  hat im Header JavaScript Funktionen für das Applet und dHTML. Zwischen Header und Body wird fonts.css gelinkt. Im Body wird dann layout.php included
    • layout.php  kreiert die Tabellen, die den Bildschirm aufteilen, included const.php, fügt logo.gif und den Flash Film ein. Dann wird das Navigationsmenu menu.php included und schliesslich t_home.php
      • menu.php  kreiert die Navigationsleiste
      • t_home.php  kreiert den Seiteninhalt
    • p_home.php  beendet den Body.
  • index.html  zeigt eine einfache Seite an, falls JavaScript nicht unterstützt wird. Dort wird dem Besucher ein Hyperlink auf die Startseite zur Verfügung gestellt.

Aufruf via das Navigationsmenu

Wie oben, ausser dass index.html nicht benötigt wird. Ob p_home.php oder ein anderes p_.....php Dokument adressiert wird, hängt davon ab, welcher Hyperlink im Menu geklickt wurde. Die URL-Parameter werden in layout.php ausgewertet.

Aufruf via interne Hyperlinks

Es gibt Hyperlinks zu anderen Webseiten innerhalb der Website und ev. zu bestimmten Punkten innerhalb einzelner Webseiten. Auch diese Hyperlinks gehen via die entsprechenden p_.....php Dokumente mit der entsprechenden Pfad-Information in der URL, die dann in layout.php ausgewertet werden.

NN4+ Unterstützung

index.html prüft Browser und Browserversion. Für NN4+ wird p_homen4.php statt p_home.php geöffnet. p_homen4.php tut nichts weiter als die Variable $bri auf "1" zu setzen, was für layout.php als Indikation für NN4+ gilt. Danach wird p_home.php included.

Zentrale Dokumente

index.html

Zweck

Dies ist der "Einstiegspunkt" der Website. Das Dokument wird vom Server geladen, wenn die URL nichts weiter vorweist als den Webpage-Ordner, d.h. "cricket".

Inhalt/Prozess

Browser und Browserversion werden geprüft. Für NN4+ wird p_homen4.php geladen, für alle anderen p_home.php. Wo JavaScript nicht unterstützt wird, wird ein Fenster mit dem Logo und einem kurzen Text angezeigt mit je einem Hyperlink für NN4+ und alle anderen Browser, welche wiederum p_homen4.php bzw. p_home.php referenzieren. Anmerkung: Die Browser- und Versionenprüfung ist detaillierter als unbedingt nötig.

layout.php

Zweck

Hier wird für alle Webseiten der Browser-Bildschirm in seiner Grobstruktur aufgebaut:



LOGO




SEITEN-TITEL


Navigationsmenu
(include menu.php)

Seiten-Inhalt
(include t_.....php)

Inhalt/Prozess

Zunächst wird const.php included, wo verschiedene Konstanten definiert sind. Dann macht eine PHP-Routine die ersten beiden Parameter verfügbar, die - sofern der Zugriff nicht über index.html erfolgt - der URL mitgegeben wurden (GET Methode fügt Parameter an URL ... ?nbr=..&br=..). Die Boolean-Variablen $avail, $avail1 und $avail2 werden gesetzt, je nachdem, ob der nbr-Parameter direkt verfügbar ist (register_globals ON) oder ob und wie er extrahiert werden muss (je nach PHP Version). Diese Variablen werden in späteren Dokumenten eventuell benötigt.

Ist die $nbr-Variable weder direkt noch durch Extraktion verfügbar, wird davon ausgegangen, dass die Seite via index.html aufgerufen wurde. In diesem Falle ist die Variable $bri=1 für NN4+ oder - für alle anderen Browser - nicht gesetzt. Im ersten Fall wird eine neue Variable $br=1 und im zweiten Falle $br=0 gesetzt. Ab jetzt ist die Browser-Identifikation in $br verfügbar und wird fortan bei jedem Hyperlink mitgegeben:

  • Menu
  • Untermenus
  • Sitemap
  • Gästebuch

Mit Hilfe des nbr-Wertes, der nun in der Variablen $nbr zur Verfügung steht, sowie mit Hilfe der Browser-Identifikation $br werden die lokalen Variablen $tit (für den Seitentitel) und $docnam (für das betreffende Inhalts-Dokument) gesetzt. Dann wird die $top Variable gesetzt, welche später dazu benutzt wird, herauszufinden, ob ein Hyperlink auf den Seitenanfang gesetzt werden muss (je nach Seitenlänge).

Wo ein dritter Parameter (snbr) erwartet wird (Aufruf via Untermenu, Formular-submit aus Gästebuch), wird auch dieser verfügbar gemacht und sein Wert in der Variablen $snbr untergebracht. Jegliche weitere URL-Parameter werden erst später, in den betreffenden Dokumenten extrahiert.

Um sicherzustellen, dass die Seite schön in der linken oberen Fensterecke beginnt, wird für alle Browser ausser NN4+ die gesamte Seite in ein <div> mit absoluter Positionierung eingebettet (<div style="position:absolute left:0px top:0px">).

Eine erste Tabelle beinhaltet logo.gif in der ersten Spalte und den jetzt in der Variablen $tit verfügbaren Seitentitel in der zweiten Spalte. Die Spaltenbreiten werden in % angegeben. Für die Startseite wird ein Flash-Film via sscflash.php in eine dritte Spalte neben dem Titel eingefügt (Details siehe Startseite unten).

Unter diese erste Tabelle wird eine zweite dreispaltige Tabelle gesetzt. Das Navigationsmenu menu.php wird in die linke Spalte eingefügt, welche dieselbe Breite hat wie die erste Spalte der obigen Tabelle. Für die Startseite wird menuh.php darunter eingefügt (Box mit Hyperlinks zu verwandten Seiten). Darunter wird für die Startseite und das Glossar die Suchmaschinen-Box via search.php eingefügt. Die zweite Spalte ist äusserst schmal und enthält einen Leerschlag über einem Hintergrundbild, was einen netten schattierenden Effekt ergibt. In die rechte Spalte kommt das t_.....php Dokument, dessen Name in der zuvor gesetzten Variablen $docnam verfügbar ist. Schliesslich wird, wenn nötig ($top == $YES) ein Hyperlink auf den Seitenanfang gesetzt, wo zuvor ein Anker definiert wurde.

menu.php

Zweck

Dies ist das auf jeder Webseite verfügbare Navigationsmenu. Es wird via layout.php eingefügt.

Inhalt/Prozess

Die Menuleiste wird in einer Tabelle aufgesetzt (included via layout.php in die linke Spalte der Haupttabelle). Das Menu wird mit Hilfe der externen Stylesheets aufgesetzt. Jeder Menupunkt besitzt eine eindeutige Zahl, welche gegebenenfalls der URL via ?nbr=xx angehängt wird. Diese Zahl wird von layout.php zur Ermittlung der verlangten Seite benötigt. Dem nbr-Parameter wird der br-Parameter angefügt, d.h. die Browser-Identifikation (?nbr=..&br=..).

Die einzelnen Menupunkte werden mit Hilfe der vordefinierten Konstanten aus const.php aufgesetzt.

menuh.php

Zweck

Eine kleine Box beinhaltet eine Liste von Links zu anderen Websites. Die Box befindet sich in der Startseite unterhalb des Navigationsmenus.

Inhalt/Prozess

Eine einfache einspaltige Tabelle enthält verschiedene Hyperlinks (hrefs).

fonts.css

Zweck

Dies ist das externe Dokument, das einen Grossteil der CSS-Definitionen enthält. Es wird nach dem </head> Tag jeder einzelnen Seite (p_.....php Dokument) gelinkt.

Inhalt/Prozess

Eine Anzahl von Stylesheet-Definitionen wird eine nach der anderen aufgelistet. Es gibt keine Kommentare in diesem Dokument (funktioniert vielerorts einfach nicht).

const.php

Zweck

Hier sind alle Konstanten definiert, die irgendwo in der Website benötigt werden. Das Dokument kann überall dort included werden, wo es benötigt wird (konkret wird es in layout.php included und ist somit für alle Webseiten verfügbar).

Inhalt/Prozess

Die Konstanten stehen mehrheitlich für Textpassagen und Referenzen wie z.B. Schlüsselwörter in der Menuleiste, Seitentitel, Pfad-Namen, (Teile von) Hyperlinks.

Die Schlüsselwörter aus dem Glossar sowie ein kurzer Beschrieb derselben sind ebenfalls als Konstanten hier definiert. Auch das Administrator-Passwort für den Gästebuch-Unterhalt ist hier festgelegt.

search.php

Zweck

Dies ist eine kleine Box, in welche ein Suchbegriff eingegeben und eine Suchmaschine ausgewählt werden kann. Die Box kann im Prinzip überall eingefügt werden. layout.php fügt sie für die Startseite und das Glossar in die linke Spalte unterhalb des Navigationsmenus (und ev. der externen Hyperlink-Box) ein.

Inhalt/Prozess

Eine einspaltige Tabelle beinhaltet ein Formular mit einer Auswahlliste (3 Suchmaschinen), einem Eingabefeld (für den Suchbegriff) und einer "schicken"-Schaltfläche.

counter.txt

Zweck

Besucherzähler, der bei jedem Zugriff auf die Startseite um 1 erhöht wird. Der Inhalt, d .h. der Zählerstand kann vom Administrator in seiner Gästebuch-Ansicht gesehen werden.

Inhalt/Prozess

Das File beinhaltet einen String, der den Zählerstand in String-Format darstellt. Für die Erstellung und den Unterhalt (Zählererhöhung) siehe Startseite (p_home.php).

Webseiten

Startseite

Extras

JavaApplet, Flash5 Film, dHTML Effekt.

P_homen4.php

(nur via index.html). Browser-Indikator $bri wird auf "1" gesetzt, bevor p_home.php included wird.

p_home.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css.

Header: JavaScript Funktionen

  1. Funktions-Definition für das eingebettete JavaApplet
  2. Funktions-Definition für den dHTML-Effekt des Unsichtbar- und schrittweisen Wiedersichtbarmachens des Seiteninhalts

Body

Zunächst erhöht eine PHP-Routine den Besucherzähler (das Textfile counter.txt wird beim allerersten Aufruf automatisch erstellt). Der Besucherzähler wird auf der Startseite nicht angezeigt. Dann wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Unterhalb des Navigationsmenus werden menuh.php und search.php included. Vor dem </body> Tag wird ein Hyperlink auf die Browser Mail-Funktion gesetzt, die e-Mail-Adresse des Webpublisher eingesetzt und ein kurzer Text angegeben.

t_home.php

Für $br==0, d.h. alle Browser ausser NN4+, fügt layout.php t_home.php ein.

Zunächst wird ein JavaApplet eingebunden, welches ein paar Schlagwörter und Hyperlinks zu anderen Seiten der Website enthält.

Danach wird eine zweispaltige Tabelle eingefügt. In die linke Spalte kommen ein paar kleinere Bilder, in die rechte dazugehöriger kurzer Text. Dem Besucher werden die Bilder und die Texte nach und nach angezeigt. Dieser Effekt wird via JavaScript-Funktion erzielt: Zunächst werden die Bilder und Texte unsichtbar gemacht und dann in vordefinierten Intervallen nach und nach wieder angezeigt. Die einzelnen Bilder und Texte sind in benannten <div>'s aufgesetzt, welche von der JavaScript-Funktion adressiert werden. Damit die Startseite auch auf Browsern erscheint, welche JavaScript nicht unterstützen, sind diese <div>'s mit visibility:visible definiert.

t_homen4.php

Für $br==1, d.h. NN4+, fügt layout.php t_homen4.php ein.

Die Funktionalität entspricht derjenigen von t_home.php. Lediglich die <div>-Tags werden durch <layer>-Tags mit Positionsangaben in Pixel ersetzt.

applet1.php

Das JavaApplet wurde vom Internet via http://www.javascriptkit.com downloaded und dann angepasst (vor allem Texte, Farben, Zeichen, Grösse, Hyperlinks in applparms.txt). Der <applet> Tag wurde in <object> geändert und die notwendigen Änderungen vorgenommen. Die Funktionsdefinition wurde in p_home.php integriert und lediglich der <object>-Teil mit den <params> in einem separaten File behalten.

Applet-Files

  • applparms.txt
  • mflip.class
  • occcolor.class
  • ocfontc.class
  • evalkey.class

sscflash.php

Der via layout.php für die Startseite eingefügte Flash Film wurde in Flash5 hergestellt. Drei Bilder wurden erstellt mit den Texten "Spiel", "Sport" und "Cricket" und dann als Bilder 1, 30 und 60 des Films definiert. Zwischen diesen drei Bildern wurde Formtweening angewendet. Damit das dritte Bild etwas länger sichtbar bleibt und der Film nicht gleich sprunghaft wieder von vorne anfängt, wurde es als Bilder 70 und 80 wiederholt, diesmal ohne Tweening.

Film-Files

  • cricket2.swf
  • cricket2.fla

Einführung

Extras

Rollover Effekt und dHTML

p_basics.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css.

Header: JavaScript Funktionen für Rollover-Effekt

  1. Prüfen des Browsers und seiner Version, um festzustellen, ob Rollover realisiert werden kann (via navigator properties). Wenn ok, werden die Bildreferenzen in einem Array aufgelistet. Dann werden die Bilder in zwei Arrays geladen, eines für den Rollover, das andere für den Rollout.
  2. Funktion over(nbr):
    Das Bild wird aufgrund des Übergabeparameters aus dem Rollover-Array ermittelt
  3. Funktion out(nbr):
    Das Bild wird aus dem Rollout-Array ermittelt (zur Zeit sind dort alle Bilder die gleichen (rote Kugel))

Header: JavaScript Funktionen für dHTML-Effekt

  1. showstuff(part)
    (onMouseOver): Sichtbarmachen des <div>-Inhaltes
  2. hidestuff(part)
    (onMouseOut): Unsichtbarmachen des <div>-Inhaltes

Body

Dann wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_basics.php behandelt.

t_basics.php

Aufgrund der Variablen $snbr (via layout.php aus dem URL-Übergabeparameter snbr=.. ermittelt), wird das entsprechende Dokument aus dem Ordner "basics" eingefügt. Ist $snbr nicht verfügbar oder 0 (d.h. Aufruf ist nicht über Untermenu erfolgt), wird basics/basics1.php eingefügt.

basics/basics1.php

Das ist die "Startseite" der Einführungsseite. Sie zeigt drei ziemlich auffällige Kugeln mit je einem kurzen Text rechts daneben. Weiter unten geben ein paar Absätze eine Kurzeinführung in das Thema "Kricket".

Rollover-Effekt

Die Kugeln sind GIF-Bilder mit Rollover-Effekt und Hyperlink zu anderen Seiten innerhalb des Kapitels Einführung. OnMouseOver und OnMouseOut Eventhandler rufen die im Header definierten JavaScript-Funktionen auf.

dHTML-Effekt - gilt nicht für NN4+!

Der Einführungstext enthält einige Ausdrücke, welche im Glossar erklärt werden. Sie sind optisch durch Fettdruck und grüne Farbe hervorgehoben. Eine Kurzerklärung ist auf der Zeile nach Ende des betreffenden Absatzes als <div> mit Style "hidden" eingefügt. OnMouseOver und OnMouseOut Eventhandler rufen die im Header definierten JavaScript-Funktionen auf. Ausserdem ist hinter jedem solchen Ausdruck ein Hyperlink auf den entsprechenden Begriff innerhalb des Glossars, d.h. beim Klick auf ein solches Wort gelangt man ins Glossar. Die <div>'s sind numeriert. Beim Funktionsaufruf wird die jeweilige Nummer als Parameter mitgegeben. Wo es mehr als einen markierten Ausdruck in einem Absatz hat, sind die entsprechenden <div>'s am Absatzende mit aufsteigenden z-Indizes definiert. Die <div>-Texte sind als Konstanten in const.php definiert (von wo auch das Glossar seine Texte bezieht), ebenso wie die entsprechenden Ausdrücke.

Kugeln

Die Kugeln für den Rollover-Effekt wurden in Adobe Photoshop erstellt.
bull_red.gif default onMouseOut Bullet
bull_test.gif / bull_one.gif / bull_six.gif onMouseOver Bullets

basics/basics2.php

Dies ist die Unterseite der Einführung mit ein paar Informationen über Test Cricket. Sie wird über das Untermenü oder einen Rollover-Button angewählt.

basics/basics3.php

Dies ist die Unterseite der Einführung mit ein paar Informationen über One-Day Cricket. Sie wird über das Untermenu oder einen Rollover-Button angewählt.

basics/basics4.php

Dies ist die Unterseite der Einführung mit ein paar Informationen über Super 4. Sie wird über das Untermenu oder einen Rollover-Button angewählt.

basics/basics5.php

Dies ist die Unterseite der Einführung mit ein paar Informationen über andere Formen des Kricketspiels. Sie wird über das Untermenu angewählt.

basics/menu_b.php

Das Untermenu (wie alle Untermenus der Website) wird in einer einreihigen Tabelle dargestellt mit so vielen Zellen wie Unterthemen (hier fünf).

Der Menupunkt, der der gerade aktiven Seite entspricht, präsentiert sich dem Besucher anders als die anderen Menupunkte. Dies wird durch eine PHP-Routine erreicht, welche den Übergabeparameter snbr interpretiert. Aufgrund des Wertes dieses Parameters wird das entsprechende Untermenu mit einem anderen Style dargestellt (andere Hintergrundfarbe, anderer Link Style).

Die Hyperlinks des Untermenus beinhalten neben der Pfadangabe p_basics.php die folgenden Parameter:

  • nbr=..    Seitenidentifikation
  • br=..      Browseridentifikation
  • snbr=..   Untermenuidentifikation

Geschichte

Extras

Keine

p_hist.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_hist.php behandelt.

t_hist.php

Dies ist eine einfache Seite mit HTML Text und einem Bild. Für das Bild wird eine zweispaltige Tabelle eingefügt. In die linke Spalte kommt das Bild und in die rechte ein vertikal zentrierter Text dazu.

Ausrüstung

Extras

Keine

p_equip.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_equip.php behandelt.

t_equip.php

Dies ist eine einfache Seite mit HTML Text und einigen Bildern. Der Seiteninhalt wird in einer zweispaltigen Tabelle dargestellt. In der linken Spalte befinden sich die Untertitel, in der rechten die entsprechenden Texte, mit meist noch einem Bild.

Feld

Extras

Keine

p_field.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_field.php behandelt.

t_field.php

Diese einfache Seite zeigt einige Bilder und HTML Text. Für die Darstellung der Bilder wird keine Tabelle verwendet. Der Text fliesst um die Bilder. Wo nötig (Bilder mit fast keinem weissen Rand) wird der besseren Darstellung wegen der Text mit einem vertikalen und horizontalen Abstand um das Bild platziert.

Länder

Extras

Imagemap und Popup Window.

p_popu.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css.

Header: JavaScript Funktion für Popup Window

Das Window wird in einer neuen Location erstellt, ohne Menu- und Toolbars und in einer vorgegebenen Grösse (400x400). Die Option "resizable" wird auf "no" gesetzt, damit der Browser das Window nicht wieder vergrössert. Die URL wird mit Hilfe des onClick Übergabeparameters angegeben.

Body

Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgbaut wird. Der Rest der Seite wird in layout.php und t_popu.php behandelt.

t_popu.php

Imagemap

Eine Weltkarte (GIF Format) wird angezeigt mit denjenigen Ländern farbig angezeigt, wo Kricket (fast) professionell gespielt wird. Über diese Länder sind Hotspots gelegt. (Das GIF-Bild muss, damit die Hotspots immer richtig liegen, natürlich in Pixel angegeben werden).

Die Hotspots sind mit individuellen HTML-Files verlinkt (href=..). Für Browser mit JavaScript-Support existieren zusätzlich onClick-Events. Der Unterschied zwischen dem direkten Hyperlink und dem onClick-Event besteht in der Darstellung des aufgerufenen Fensters. Die JavaScript-Funktion erzeugt ein kleines Popup-Window, während der Hyperlink die entsprechende Seite nicht manipulieren kann. Die JavaScript-Funktion wird mit return-Option aufgerufen, wodurch sichergestellt wird, dass nicht zusätzlich zum Popup-Window noch der Hyperlink ausgeführt wird.

Hotspots

Die Hotspot-Koordinaten wurden via Paint Pro ermittelt, indem Rechtecke über die entsprechenden Länder gezogen und die Koordinaten des oberen linken und unteren rechten Eckpunktes notiert wurden.

imagemap/.....

  • Ein HTML-File pro Hotspot mit einem Titel und dem Bild eines Kricket-Grounds
  • Ein JPEG-Bild pro HTML-File

Spieler

Extras

GIF Animation.

p_player.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_player.php behandelt.

t_player.php

Aufgrund der Variablen $snbr, welche layout.php aufgrund des URL-Übergabeparameters snbr ermittelt hat, wird das entsprechende File aus dem Unterverzeichnis "player" included.

Animationen

Die Animationen wurden in Jasc Animation Shop erstellt, und zwar mit 5-10 einzelnen GIF-Bildern gleicher Grösse mit transparentem Hintergrund.

player/player1.php

Zeigt GIF Animation eines Werfers und einen kurzen Text über die Rolle des Werfers.

player/player2.php

Zeigt GIF Animation eines Schlagmannes und einen kurzen Text über dessen Rolle.

player/player3.php

Zeigt GIF Animation eines Wicketkeepers und einen kurzen Text über seine Rolle.

player/player4.php

Zeigt GIF Animation eines Feldspielers und einen kurzen Text über seine Rolle.

player/player5.php

Zeigt ein einfaches GIF-Bild mit Schiedsrichtern und einen Text über ihre Rolle im Spiel.

player/menu_p.php

Das Untermenu (wie alle Untermenus der Website) wird in einer einreihigen Tabelle dargestellt mit so vielen Zellen wie Unterthemen (hier fünf).

Der Menupunkt, der der gerade aktiven Seite entspricht, präsentiert sich dem Besucher anders als die anderen Menupunkte. Dies wird durch eine PHP-Routine erreicht, welche den Übergabeparameter snbr interpretiert. Aufgrund des Wertes dieses Parameters wird das entsprechende Untermenu mit einem anderen Style dargestellt (andere Hintergrundfarbe, anderer Link Style).

Die Hyperlinks des Untermenus beinhalten neben der Pfadangabe p_player.php die folgenden Parameter:

  • nbr=..    Seitenidentifikation
  • br=..      Browseridentifikation
  • snbr=..   Untermenuidentifikation

Spiel/Spielregeln

Extras

dHTML-Effekte und Verweis zu Begriffen im Glossar.

p_rules.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css.

Header: JavaScript Funktionen dHTML

W3C DOM, Microsoft DOM, Netscape DOM -fähige Browser werden unterstützt
  1. showstuff(part)
    (onMouseOver)   wobei "part" die <div> identifiziert, welche sichtbar zu machen ist
  2. hidestuff(part)
    (onMouseOut)    wobei "part" die <div> identifiziert, welche unsichtbar zu machen ist

Body

Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgbaut wird. Der Rest der Seite wird in layout.php und t_rules.php behandelt.

t_rules.php

Aufgrund der Variablen $snbr (via layout.php aus dem URL-Übergabeparameter snbr=.. ermittelt), wird das entsprechende Dokument aus dem Ordner "rules" eingefügt. Ist $snbr nicht verfügbar oder 0 (d.h. Aufruf ist nicht über Untermenu erfolgt), wird rules/rules1.php eingefügt.

rules/rules1, rules2, rules3, rules4, rules5.php

Diese "Unterseiten" sehen mehr oder weniger gleich aus. Sie alle beinhalten Text mit einigen hervorgehobenen Schlagwörtern.

Einige der Seiten haben Bilder und Listen mit Aufzählungszeichen. Wo Bilder eingefügt werden, wird eine zweispaltige Tabelle eingefügt mit dem Bild in der einen und dem Text in der anderen Spalte.

dHTML-Effekt - gilt nicht für NN4+!

Die hervorgehobenen Ausdrücke werden im Glossar erklärt. Sie sind optisch durch Fettdruck und grüne Farbe hervorgehoben. Eine Kurzerklärung ist auf der Zeile nach Ende des betreffenden Absatzes als <div> mit Style "hidden" eingefügt. OnMouseOver und OnMouseOut Eventhandler rufen die im Header definierten JavaScript-Funktionen auf. Ausserdem ist hinter jedem solchen Ausdruck ein Hyperlink auf den entsprechenden Begriff innerhalb des Glossars, d.h. beim Klick auf ein solches Wort gelangt man ins Glossar. Die <div>'s sind numeriert. Beim Funktionsaufruf wird die jeweilige Nummer als Parameter mitgegeben. Wo es mehr als einen markierten Ausdruck in einem Absatz hat, sind die entsprechenden <div>'s am Absatzende mit aufsteigenden z-Indizes definiert. Die <div>-Texte sind als Konstanten in const.php definiert (von wo auch das Glossar seine Texte bezieht), ebenso wie die entsprechenden Ausdrücke.

rules/menu_r.php

Das Untermenu (wie alle Untermenus der Website) wird in einer einreihigen Tabelle dargestellt mit so vielen Zellen wie Unterthemen (hier fünf).

Der Menupunkt, der der gerade aktiven Seite entspricht, präsentiert sich dem Besucher anders als die anderen Menupunkte. Dies wird durch eine PHP-Routine erreicht, welche den Übergabeparameter snbr interpretiert. Aufgrund des Wertes dieses Parameters wird das entsprechende Untermenu mit einem anderen Style dargestellt (andere Hintergrundfarbe, anderer Link Style).

Die Hyperlinks des Untermenus beinhalten neben der Pfadangabe p_rules.php die folgenden Parameter:

  • nbr=..    Seitenidentifikation
  • br=..      Browseridentifikation
  • snbr=..   Untermenuidentifikation

Glossar

Extras

Keine.

p_gloss.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_gloss.php behandelt.

t_gloss.php

Der Inhalt wird in einer zweispaltigen Tabelle aufgesetzt. In die linke Spalte kommt das Stichwort und in die rechte die dazugehörige Beschreibung.

Jedes Stichwort wird in einem <a>-Tag dargestellt und kann so von irgendeiner anderen Seite innerhalb der Website aus angesprochen werden.

Die Stichwörter und der erste Teil der Beschreibung sind als Konstanten in const.php verfügbar. Meist wird noch eine detailliertere Beschreibung direkt in HTML-Format angefügt.


Gästebuch

Extras

Formulare, JavaScript Funktionen, Datenbank.

p_guest.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_guest.php behandelt.

Header: JavaScript Funktion placeCursor()

Der Cursor wird ins Kommentar-Textfeld gesetzt. Die Funktion wird aufgerufen, sobald das Namensfeld verlassen wird (z.B. via Tabulator).

Header: JavaScript Funktion checkAndSend()

Die Funktion wird aufgerufen, sobald die "schicken"-Schaltfläche gedrückt wird. Sie überprüft zunächst, ob etwas ins Namensfeld eingegeben wurde. Wenn nicht, wird ein entsprechender Alert ausgegeben. Ist das Namensfeld ok, wird das Kommentarfeld geprüft. Hier wird geprüft, ob überhaupt etwas eingegeben wurde und, wenn ja, ob die Meldungslänge das Maximum von 255 Buchstaben nicht überschreitet. Je nach Fehler wird der Cursor in das entsprechende Feld platziert. Der return-Wert wird auf false gesetzt, um zu verhindern, dass das Formular nach dem Klick auf das OK-Feld des Alerts abgeschickt wird. Ist alles in Ordnung, wird return true zurückgegeben (wodurch die Formularinhalte abgeschickt werden).

Body

Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_guest.php behandelt.

t_guest.php

Die zusätzlichen GET-Parameter werden, wenn nötig, extrahiert und in Variablen platziert. (layout.php hat die nötige Vorarbeit geleistet).
$name, $comm erwartet, wenn ein Formular submittet wurde und nun die Datenbank nachgeführt werden muss (aus guest1, nach guest2)
$opt erwartet, wenn der Administrator angegeben hat, welche Einträge er sehen will (aus guest3, nach guest4)
$dl, $fr erwartet, wenn der Administrator Einträge freigibt oder löscht (aus guest4, nach guest5)
Wo $name verfügbar ist (aus guest1), wird überprüft, ob der Wert dem Administrator-Passwort entspricht (definiert in const.php). Ist dem so, wird $snbr auf den Wert 02 gesetzt.

$snbr wird nun überprüft, um das benötigte Dokument zu includen:

$snbr == 00 guestbk/guest1.php
$snbr == 01 guestbk/guest2.php
$snbr == 02 guestbk/guest3.php
$snbr == 02 guestbk/guest4.php
$snbr == 04 guestbk/guest5.php

guestbk/guest1.php

Dies ist die Besucheransicht des Gästebuches.

onload

Eine onload-Funktion stellt sicher, dass Namens- und Kommentarfelder leer sind und dass der Cursor im Namensfeld platziert ist. Diese Funktion kann nicht im Header platziert werden, da nicht jede Seite, die via p_guest.php aufgerufen wird, diese Formularfelder hat.

Formular

Nach einem kurzen Einführungstext wird das Formular erstellt:
<FORM name="guestb" action"<?echo $SEND;?>method="get" onsubmit="return CheckAndSend()">
 
name Der Formular-Name wird für Feldmanipulationen durch JavaScript-Funktionen benötigt
action URL in const-php, die beim Abschicken adressiert wird (http://server_name/cricket/p_guest.php)
angehängt werden: ?nbr=.. & snbr=..
method Da die URL weniger als 2000 Zeichen umfasst, wird GET gewählt
onsubmit=return .. Beim Klicken der "senden"-Schaltfläche wird eine JavaScript-Funktion aufgerufen, um die Eingabe zu überprüfen. Nur wenn return TRUE erfolgt, wird das Formular abgeschickt.
nbr verstecktes Input-Feld, enthält nbr Parm 11 (für layout.php)
br verstecktes Input-Feld, enthält br Parm $br (für Browseridentifikation)
snbr verstecktes Input-Feld, enthält snbr Parm 01 (für t_guest.php)
name Textarea, hier gibt der Besucher seinen Namen ein. Das Feld ist mit einer onblur-Funktion versehen, mittels derer der Cursor direkt ins Kommentarfeld platziert wird.
comm Textarea, hier gibt der Besucher seinen Kommentar ein. Das Feld ist mit der wrap-Eigenschaft definiert, so dass automatische Zeilenumbrüche nicht als solche der URL mitgegeben werden.
Hyperlink zur Browser-Mail-Funktion, mit der Administrator-Adresse
Wenn die "senden"-Schaltfläche geklickt wird, wird die Funktion CheckAndSend() aufgerufen, die die Eingaben überprüft. Falls ok, wird der Formularinhalt verschickt. Via die "löschen"-Schaltfläche kann der Besucher seine Eingaben zurücksetzen.

Anzeigen der freigegebenen Gästebucheinträge

  1. Einige Variablen und eine SQL-Abfrage werden vorbereitet
  2. Die Verbindung zur Datenbank wird via odbc_connect() hergestellt
  3. Die Abfrage wird via odbc_do() ausgeführt (könnte auch odbc_exec() sein)
  4. Einzelne Tabellenzeilen werden in einem Loop via odbc_fetch_row() "eingelesen"
  5. Die eingelesenen Zeilen werden auf alternierenden Hintergrundfarben angezeigt
  6. Die Verbindung wird geschlossen
Sollten mehr als 20 Einträge angezeigt worden sein, wird am Seitenende ein Hyperlink zum Seitenanfang zur Verfügung gestellt.

guestbk/guest2.php

Hier wird der Besucherkommentar in die Datenbank eingefügt und dem Besucher eine Bestätigung ausgegeben.

Formular

Zunächst wird dasselbe Formular wie in der normalen Besucheransicht erstellt. So kann der Besucher weiteren Kommentar direkt eingeben.

Überprüfen der Daten

Damit auch ohne JavaScript-Support Gästebucheinträge vorgenommen werden können, wird hier nochmals überprüft, ob die Angaben gültig sind. Fehlen Name und/oder Kommentar, wird eine Fehlermeldung ausgegeben. Sind Name und/oder Kommentar zu lang, werden sie auf das jeweilige Maximum gekürzt ($MAXNAM, $MAXCOMM in const.php aufgrund der Access-Tabellen-Definition), so gekürzt in die Datenbank übernommen und dem Besucher entsprechend bestätigt.

Einfügen in die Datenbank

  1. Einige Variablen werden deklariert und auf einen Anfangswert gesetzt
  2. Zeit und Datum werden via getdate() geladen und in Variablen extrahiert
  3. Die SQL-Abfrage für das Einfügen in die Access Datenbank wird vorbereitet
  4. Die Verbindung zur Datenbank wird via odbc_connect() hergestellt
  5. Die Abfrage wird via odbc_exec() ausgeführt (könnte auch odbc_do() sein)

Bestätigung

Wenn alles ok ist, wird eine entsprechende Bestätigung ausgegeben und die gerade gesicherten Daten dem Besucher angezeigt. Sollte irgendein Fehler aufgetreten sein, erhält der Besucher eine entsprechende Meldung.

guestbk/guest3.php

Dies ist die Auswahlseite für den Administrator.

Auf dieser Seite kann der Administrator wählen, ob er den gesamten Inhalt des Gästebuches sehen will oder nur die Neueinträge, d.h. diejenigen, die noch nicht freigegeben sind.

Zwei Submit-Schaltflächen generieren die entsprechende URL (opt=alle oder opt=neue).

Darüberhinaus wird hier der Besucherzähler aus dem Textfile counter.txt angezeigt.

guestbk/guest4.php

Dies ist die Gästebuchansicht für den Administrator.

Je nachdem, was er in der Auswahlseite gewählt hat, wird dem Administrator hier der Inhalt oder ein Teil des Inhaltes der Gästebuchdatenbank angezeigt.

Neben jedem Eintrag werden zwei Checkboxen zur Verfügung gestellt, eine um den Eintrag zu löschen, die andere um ihn freizugeben. Der Administrator kann beliebig viele dieser Checkboxen anwählen und dann die Gesamtauswahl durch Klicken auf die "senden"-Schaltfläche übermitteln.

Um die Übergabeparameter beim Versenden des Formulars leicht interpretierbar zu haben, werden nicht diese Checkboxen übermittelt, sondern separate versteckte Felder, in denen die entsprechenden Informationen gesammelt werden.

JavaScript-Funktion setArrays(): aufgerufen beim "Schicken"

Bemerkung 1: Trotz des Namens sind keine Arrays involviert, aber die Funktionalität entspricht der von Arrays.

Bemerkung 2: Diese Funktion wird nur von dieser Seite benutzt und befindet sich daher nicht im Header.

Zwei Variablen "myfr" und "mydl" werden definiert für die angeklickten Checkboxen. Alle Formularelemente beginnend bei Element Nummer 6 (1. Checkbox) werden in einem Loop geprüft. Die Identifikation jeder geklickten Checkbox (die Identifikation ist die Datensatz-ID) wird in die entsprechende Variable übernommen (myfr für Freigabe und mydl für Löschen). Die Entscheidung, ob es sich beim gerade untersuchten Formularelement um ein Freigabe- oder um ein Löschen-Feld handelt wird durch Division der Elementnummer durch 2 gemacht. Ergibt die Division einen Rest (d.h. die Elementnummer ist ungerade), handelt es sich um eine Löschen-Checkbox, ohne Rest um eine Freigabe-Checkbox. Zwischen die einzelnen Identifikationsnummern in den Variablen wird ein + Zeichen eingefügt. Die Nummern werden in den Variablen also konkateniert.

Schliesslich werden alle Formfelder zurückgesetzt, um unnötige Übergabeparameter zu vermeiden. Dann werden die Inhalte der beiden Variablen in zwei versteckte Felder kopiert, welche dann als Übergabeparameter der URL angehängt werden.

Formular / Gästebuchansicht für den Administrator

Zunächst werden fünf versteckte Inputfelder initialisiert.
  • nbr    auf "11" gesetzt (Gästebuch-Identifikation für layout.php)
  • br     mit $br für Browseridentifikation
  • snbr  auf "04" gesetzt für die Evaluation in t_guest.php
  • fr      für geklickte Freigabe-Checkboxen
  • dl      für geklickte Löschen-Checkboxen
Das Gästebuch wird in einer 5-spaltigen Tabelle dargestellt, wobei die erste Spalte die Freigabe-Checkboxen enthält, die zweite die Löschen-Checkboxen, die dritte die Datensatz-ID, die vierte Datum und Zeit des Eintrages und die fünfte schliesslich den Namen und den Kommentar. Um das Lesen zu vereinfachen, werden die einzelnen Tabellenzeilen vor zwei alternierenden Hintergrundfarben dargestellt.
  1. Einige Variablen werden deklariert und auf einen Anfangswert gesetzt
  2. Die Tabellen- und Zellen-Styles werden definiert
  3. Die SQL-Abfrage für das Lesen aus der Access Datenbank wird vorbereitet
  4. Die Verbindung zur Datenbank wird via odbc_connect() hergestellt
  5. Die Abfrage wird via odbc_exec() ausgeführt (könnte auch odbc_do() sein)
Je nach $opt (Übergabewert aus Selektionsansicht des Administrators) werden entweder alle Datensätze angezeigt oder nur diejenigen, deren Attribut "fr" auf "n" gesetzt ist.

Abschicken

Bevor das Formular abgeschickt wird, wird die Funktion setArray() aufgerufen, welche die relevante Information vor dem Abschicken in zwei versteckte Felder übernimmt.

guestbk/guest5.php

Hier werden die vom Administrator ausgewählten Datensätze freigegeben oder gelöscht.

Die Übergabeparameter präsentieren sich auf dem Server etwa so: &fr=a+b+c+.. &dl=x+y+z+..

Die beiden Parameter fr und dl haben Inhalte, die einem Array gleichen. Um auf einzelne Inhaltswerte zugreifen zu können, müssen die Inhalte in ein Array überführt werden. Dies kann via dia Funktion explode() erreicht werden. Also werden die Übergabewerte in die zwei Arrays $freeArray und $delArray "explodiert". Dann werden diese beiden Arrays geprüft.

Wenn mindestens eines der beiden Arrays einen Inhalt vorweist, wird eine Verbindung zur Datenbank hergestellt. Dann werden zuerst die freizugebenden Datensätze in einem Loop bearbeitet, und zwar via "UPDATE $FIL SET fr = 'y' WHERE nr = (int) $freeArray[$i]".

Danach werden die zu löschenden Datensätze in einem weiteren Loop gelöscht. "DELETE FROM $FIL WHERE nr = (int) $delArray[$i]".

Dann wird das Resultat angezeigt, d.h. ob die Anfrage(n) richtig ausgeführt werden konnte(n).

guestbk/guestb.mdb

Die Access Datenbank besteht aus einer Tabelle mit Namen guest. Die Tabelle hat fünf Spalten:
nr Datensatz-ID Autowert
date Datum und Zeit Standarddatum
fr Textfeld für Freigabe Grösse 1
name Textfeld für Namen Grösse 30
comment Textfeld für Kommentar Grösse 255

Sitemap

Extras

Keine.

p_site.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_site.php behandelt.

t_site.php

Die Sitemap wird in einer dreispaltigen Tabelle dargestellt. Die linke Spalte enthält Gruppen-Titel. Die mittlere und die rechte Spalte enthalten Hyperlinks zu den entsprechenden Seiten (mittlere Spalte) und - wo zutreffend - zu den entsprechenden Unterseiten (dritte Spalte).

Konzept

Extras

Keine.

p_concpt.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_concpt.php behandelt.

t_concpt.php

Das Konzept ist eine einfache aber sehr lange HTML-Seite. Zuoberst wird das gesamte Inhaltsverzeichnis wiedergegeben, und zwar mit Hyperlinks zu den Titeln der Ebenen 1, 2 und 3.

Obwohl die Seite sehr lang ist, wurden keine Untermenus eingeführt, da es sich um eine Seite handelt, die der normale Besucher kaum häufig einsehen wird. Vor jedem Titel der Ebene 1 wird ein Hyperlink eingefügt, der zurück auf das Inhaltsverzeichnis führt. Darunter wirkt eine horizontale Linie <hr> etwas strukturierend.


Systemdokumentation

Extras

Keine.

p_docu.php

Dieses Dokument enthält den Header mit den META-Tags und dem Titel und das Linken von fonts.css. Im Body wird layout.php included, wo die Seite mit dem Logo, dem Titel und dem Navigationsmenu (via menu.php) aufgebaut wird. Der Rest der Seite wird in layout.php und t_docu.php behandelt.

t_docu.php

Die Systemdokumentation ist eine einfache aber sehr lange HTML-Seite. Zuoberst wird das gesamte Inhaltsverzeichnis wiedergegeben, und zwar mit Hyperlinks zu den Titeln der Ebenen 1, 2 und 3.

Obwohl die Seite sehr lang ist, wurden keine Untermenus eingeführt, da es sich um eine Seite handelt, die der normale Besucher kaum häufig einsehen wird. Vor jedem Titel der Ebene 1 wird ein Hyperlink eingefügt, der zurück auf das Inhaltsverzeichnis führt. Darunter wirkt eine horizontale Linie <hr> etwas strukturierend.


Bibliographie

Zu Rate gezogene Bücher

HTML - A Beginner's Guide, 2nd Edition, ISBN 0-07-222644-7
HTML Ge-Packt, MITP, ISBN 3-8266-0695-7
HTML kurz & gut, O'Reilly, ISBN 3-89721-243-9
Sams JavaScript, ISBN 0-672-32297-8
How to Do Everything with JavaScript, ISBN 0-07-222887-3
JavaScript Ge-Packt, ISBN 3-8266-0859-3
PHP4, das Einsteigerseminar, 3. Auflage, ISBN 3-8266-7151-1
MySQL & PHP, Markt+Technik, ISBN 3-8272-6202-X
PHP Ge-Packt, ISBN 3-8266-0685-X
Webdesign, Markt+Technik, ISBN 3-8272-6278-X
Web-Datenbanken, ISBN 3-8266-8070-7
Homepage total, ISBN 3-8266-8121-5
Running Microsoft Access 2000, ISBN 1-57231-934-8

Zu Rate gezogene Websites

http://ch.php/net/manual/en/ (PHP and ODBC)

Tests

Primäres Design

Die Website ist primär ausgelegt auf Auflösung 1024x768 mit maximaler Farbpalette und maximiertem Browserfenster. Beim Design wurde davon ausgegangen, dass Bilder, JavaScript und Java unterstützt sind. Bei veränderten Voraussetzungen ist die Darstellung eventuell nicht mehr ganz optimal.

Erste Testrunde - lokal

Tests wurden ausgeführt auf
  • Windows XP
    • Internet Explorer Version 6.02
    • Netscape Navigator 7.02
    • Opera Version 7.03
  • Windows 2000
    • Netscape Communicator Version 4.7
In allen Fällen wurden die Tests mit folgenden lokalen Servern durchgeführt:
  • Apache Webserver mit PHP Version 4.0.6
  • Omni HTTPd Server mit PHP Version 4.2.2

Zweite Testrunde - remote

Nach zufriedenstellenden Testergebnissen auf den lokalen Servern wurde die Website via FTP an den destinatären Server übermittelt. Dort wurden alle Tests wiederholt.
  • IIS 5 Webserver

Testergebnisse

Die Testergebnisse werden nicht einzeln aufgelistet sondern zusammengefasst. Nur wo zwischen einzelnen Browsern oder Servern Unterschiede auftraten, wird dies speziell vermerkt.

Testergebnisse

Darstellung

Auflösung 1024x768, maximiertes Browserfenster

Alle Webseiten sehen auf den getesteten Browsern gut und fast gleich aus.

Einzig NN4+ ist im Vergleich zu den anderen Browsern nicht ganz optimal. So werden die Trennlinien im Menu etwas dicker dargestellt und bei Tabellen mit farbigem Hintergrund sind Zellbegrenzungen sichtbar. Da dies aber nur im direkten Vergleich mit anderen Browsern auffällt und an sich nicht störend ist, wird es als akzeptabel erachtet.

Ergebnis zufriedenstellend

Auflösung 800x600, maximiertes Browserfenster

  • Schrift
    Die Schrift wirkt fast übermässig
  • Seitengrösse
    Die Seiten wirken eher gross. Auf mehreren Seiten wird horizontales Scrolling nötig
  • Rechter Rand
    Wo grössere Bilder eingefügt sind, ist der rechte Rand nicht immer schön bündig

Ergebnis akzeptabel
Im Vergleich zu anderen Websites, die mit dieser Auflösung angeschaut werden, sieht es aber nicht schlecht aus. Bei allen verglichenen Websites ist relativ offensichtlich, dass sie für eine höhere Auflösung konzipiert wurden.

Verkleinertes Browserfenster

Ähnlich wie bei geringerer Auflösung ist auch hier je nach Grad der Verkleinerung und Grösse der Bilder der rechte Rand nicht immer schön ausgerichtet.

Ergebnis akzeptabel

Farben

  • Maximum
    Alles sieht gut aus
  • 256
    Eingebettete Bilder wirken leicht gerastert, eigene Farben (web-safe) sind gut.

Ergebnis gut

Keine Bilder

Internet Explorer 6.02

Zeigt Rahmen in der Grösse der Bilder. Alternativtext wird immer angezeigt.

Ergebnis gut: Gesamtbild bleibt unverändert

Netscape Navigator 7.02

Wo Bilder mit Pixel-Grössen angegeben werden, werden Rahmen in der entsprechenden Grösse angezeigt und der Alternativtext erscheint. Wo Bilder ohne Grössenangaben eingefügt wreden, erscheint lediglich eine kleine quadratische Box ohne Alternativtext. Auch bei den Animationen und Rollover-Bullets fehlt der Alternativtext.

Ergebnis zufriedenstellend: Gesamtbild bleibt auf den Seiten, auf denen es optisch wichtig ist, unverändert.

Opera 7.03

Alternativtext erscheint immer in horizontal der Textlänge entsprechenden Rahmen. Die Bildergrösse wird durchweg ignoriert.

Ergebnis nicht sehr zufriedenstellend: Gesamtbild wird ziemlich verändert.

Netscape Communicator 4.7

Wo Bilder in einer Tabellen-Zelle mit relativer Grössenangabe eingefügt werden, erscheint lediglich ein kleines Quadrat, ohne Alternativtext. Ansonsten erscheint ein Rahmen in der Grösse des Bildes, mit Alternativtext.

Ergebnis ok: Lediglich auf einer Seite (Geschichte) ändert sich das Gesamtbild.

Funktionalität

Formulare

Alle Funktionen erfolgreich getestet. (Je nach Browsereinstellung bewirkt TAB keinen onblur, was aber ein Detail ist).

Links

Alle Links erfolgreich getestet.

Datenbank

Alle Funktionalitäten erfolgreich getestet.

dHTML

Wie erwartet erscheinen im Netscape Communicator 4.7 bei MouseOver die kurzen Erklärungstexte nicht.

Kein Java Support

Wie erwartet erscheint das Applet auf der Startseite nicht sondern lediglich der vorgesehene Alternativtext.

Kein JavaScript Support

Einstieg

Die erwartete "Intro"-Seite wird angezeigt und der Hyperlink führt auf die Startseite.

Startseite

Wie erwartet wird die Startseite schön dargestellt, einfach ohne verzögertes Sichtbarmachen.

Einführung - Rollover

Der Rollover funktioniert natürlich nicht. Die roten Kugeln werden aber wie erwartet angezeigt und die Hyperlinks funktionieren.

dHTML

Wie erwartet erscheinen bei MouseOver die kurzen Erklärungstexte nicht. Die Hyperlinks funktionieren.

Imagemap

Wie erwartet erscheint anstelle des Popup Window eines in der Grösse des aktuellen Browserfensters.

Gästebuch

Beim Abschicken wird wie erwartet nicht geprüft, ob die nötigen Felder richtig ausgefüllt sind. Was immer eingegeben wurde, wird abgeschickt. Auf dem Server erfolgt eine entsprechende Prüfung (via PHP) und der Besucher erhält, falls nötig, eine passende Fehlermeldung. Bei zu langen Eingaben wird der Rest abgeschnitten, und der Besucher erhält eine entsprechende Meldung.

Während der Realisierung aufgefallen

CSS

Alle Browser haben Probleme mit externen Stylesheets, wenn irgendwelche Kommentare im *.css Dokument stehen. Ausserdem hat es sich manchmal als nötig erwiesen, einzelne Stylesheet Definitionen intern, d.h. im entsprechenden Dokument vorzunehmen. In der Literatur wird auf diese Problematik verschiedentlich hingewiesen. Speziell für NN4+ war es oft nötig, Eigenschaften in alter Schreibweise im TAG anzugeben (z.B. Tabellenbreiten).

Unsaubere Scripts

Wo einzelne Tags nicht sauber "geschlossen" wurden, haben IE und NN oft automatisch korrigiert, während Opera und NN4 nichts dergleichen taten.

Bilder und Listen

Bei Listen (<ul>) neben bzw. um Bilder herum hat IE die Bullets nicht oder nur teilweise gezeigt. Für die korrekte Darstellung mussten Tabellen eingefügt werden.

Formular-Submit

Das Attribut "enctype" musste ausgelassen werden, da IE den Formularinhalt sonst nicht übernommen hat.

Kommentare

Nicht nur im Zusammenhang mit CSS, sondern auch sonst in den Dokumenten hat es sich manchmal als nötig erwiesen, Kommentare zu entfernen (Windows 2000).

Schlussbemerkungen

NN4+

Auf diese Browsertypen wurde bewusst nicht allzusehr eingegangen. Die Ansichten sind durchgehend ähnlich und die Funktionalitäten sind bis auf die dHTML-Infotexte erfüllt.

Ergebnis durchaus zufriedenstellend

Andere

Ergebnis gut


Addendum

Deutsche und englische Versionen

In einem ersten Schritt, wurde nur eine deutsche Version der Website angefertigt. Später wurde eine englische hinzugefügt. Die Verbindung der beiden Version wurde gemacht, indem eine "Intro"-Seite eingeführt wurde, via welcher der Besucher zwischen der deutschen und der englischen Version wählen kann.

Alle original deutschen Dokumente wurden in einen neuen Ordner "cricket_e" kopiert und wo nötig übersetzt.

Der deutsche Ordner wurde von "cricket" auf "cricket_d" umbenannt.

Neue Struktur

Ein neuer Ordner "cricket" wurde erstellt und die Ordner "cricket_d" und "cricket_e" da hinein verschoben. Neben diesen zwei Unterverzeichnissen, befindet sich ein einziges Dokument im Hauptordner, und zwar "index.htm".

Um Redundanzen zu vermeiden bzw. zu minimieren hätte man gemeinsame Module wie z.B. Bilder in einen separaten Unterordner packen können. Dies hätte aber ziemliche Anpassungen nach sich gezogen (Pfad-Referenzen, etc.).

Haupt-Index

Um unnötige Anpassungen zu vermeiden aber gleichzeitig die volle Funktionalität sicherzustellen (wie z.B. Browsererkennung, etc.), führt der neue Haupt-Index zu den Indizes der Unterverzeichnisse (z.B. .../cricket_d/index.html). Da diese Indizes die *.php Seiten ohne weiteres laden (wenn JavaScript unterstützt ist), würde die URL-Überschreibung via location.href das Nutzen der "zurück"-Schaltfläche (History) im Browser verunmöglichen. Um dies zu umgehen, wird die index-URL via location.replace() mit der *.php-URL überschrieben (.../cricket_d/index.html taucht in der History nicht auf). Dies gilt zumindest für Internet Explorer und Netscape Navigator. Opera kann location.replace() offenbar nur mit absoluter URL-Adresse korrekt ausführen. Da absolute Adressen zu vermeiden sind, wird die URL für Opera via location.href überschrieben.


 

  Zum Seitenanfang