Our Logo The Systemdocumentation
 
Start Page
 
Introduction
 
History
 
Nations
 
Equipment
 
Field
 
Players
 
Rules
 
Glossary
 
Guestbook
 
Sitemap
 
Concept
 
SysDoc
 
Contact
 


Back to Softworld
 
 

System Documentation Of Cricket Website

Table Of Contents

Elements of the Website / Index Structure
Generally Observed Rules
    Simplicity/Compatibility
    Support Of JavaScript
    Images
    JavaApplets
    CSS
    Colours
    Structure
    Browser Compatibility
    Naming Conventions
Development Platform, Tools, And Test Browsers
    Platform
    Test Servers
    Test Browsers
Technical Aspects and Techniques
    General
    More Than Just HTML
Rough Structure / Overview of Document Connections
    General
    Initial Call via Website URL (http://address/cricket_e)
    Call via Navigation Menue
    Call via Internal Hyperlinks
Central Documents
    index.html
        Purpose
        Contents/Process
    layout.php
        Purpose
        Contents/Process
    menu.php
        Purpose
        Contents/Process
    menuh.php
        Purpose
        Contents/Process
    fonts.css
        Purpose
        Contents/Process
    const.php
        Purpose
        Contents/Process
    search.php
        Purpose
        Contents/Process
    counter.txt
        Purpose
        Contents/Process
Web Pages
    Homepage
        Extras
        p_home.php
        t_home.php
        applet1.php
        sscflash.php
    Introduction
        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
    History
        Extras
        p_hist.php
        t_hist.php
    Equipment
        Extras
        p_equip.php
        t_equip.php
    Field
        Extras
        p_field.php
        t_field.php
    Countries
        Extras
        p_popu.php
        t_popu.php
        imagemap/
    Players
        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
    Game/Rules
        Extras
        p_rules.php
        t_rules.php
        rules/rules1, rules2, rules3, rules4, rules5.php
        rules/menu_r.php
    Glossary
        Extras
        p_gloss.php
        t_gloss.php
    Guestbook
        Extras
        p_guest.php
        t_guest.php
        guestbk/guest1.php (Visitor view of guestbook)
        guestbk/guest2.php (Filing of visitor comment, confirmation)
        guestbk/guest3.php (Selection page for administrator)
        guestbk/guest4.php (Guestbook view for administrator)
        guestbk/guest5.php (Clearance and deletion of data records)
        guestbk/guestb.mdb
    Sitemap
        Extras
        p_site.php
        t_site.php
    Concept
        Extras
        p_concpt.php
        t_concpt.php
    System Documentation
        Extras
        p_docu.php
        t_docu.php
Bibliography
    Books Consulted
    Websites Consulted
Tests
Test Results
Addendum
 

Elements of the Website / Index Structure

Folder: cricket_e  
  index.html Entry point, default for server
  fonts.css CSS stylesheet definitions
  const.php Collection of constants
  layout.php Central document for screen layout
  counter.txt Visitor counter
  menu.php Navigation menue for all pages
  applet1.php Menue with hyperlinks to other websites
  search.php Connection to search engines
  p_home.php Entry point for the homepage
  p_.....php Entry point for individual websites
  t_home.php Contents of homepage
  t_.....php Contents of individual webpages
  Folder: guestbk  
             *.php Documents for guestbook
             guest.mdb Guestbook database
  Folder: images  
             logo.gif Logo of website
             andere Images for website
  Folder: imagemap  
             *.html Documents for imagemap hyperlinks
             *.jpg Images behind hotspots / for popup window
             worldmap.gif worldmap - basis for imagemap
  Folder: player  
             *.php Documents for players pages
             *.gif Images for players pages (incl. animations)
             menu_p.php Submenue for players pages
  Folder: basics  
             *.php Documents for introduction pages
             *.gif Images for introduction pages (incl. rollover)
             menu_b.php Submenue for introduction pages
  Folder: rules  
             *.php Documents for rules pages
             *.gif Images for rules pages
             menu_r.php Submenue for rules pages

Generally Observed Rules

Simplicity/Compatibility

In order to reach a majority of browsers, browser versions and platforms, the central elements of the website are kept simple. Thus, there is, for example, nothing special in the navigation menue. The menue should be usable under all circumstances.

Support of JavaScript

Where JavaScript is used, an alternative is foreseen for browsers not supporting JavaScript or having deactivated JavaScript (<noscript> ... </noscript>). Furthermore, the JavaScript functions are embedded in HTML comment signs (<!-- ... //-->).

Images

Where images are embedded, there exists an alternative text to be displayed in case the browser does not support image display.

JavaApplets

Where necessary, the <applet> tag is replaced by the more modern <object> tag. Furthermore, there is an alternative text for browsers not supporting Java..

CSS

The stylesheets used cover version 1.0 only. Most of the stylesheets are listed centrally in the separate document fonts.css.

Colours

Wherever possible, web safe colours are being used, i.e. colours with an RGB value of a multiple of hexadecimal 33, i.e. decimal 51.

Structure

The majority of the documents are *.php documents (except index.html and a few more documents). Where necessary. die individual *.php documents are included. Screen layout and navigation are dealt with centrally and can thus easily be maintained and expanded. Table sizes are - as suggested by literature - mainly relative.

Browser Compatibility

Where necessary, conditional code cares for the support of different browsers and versions (e.g. element addressing: W3C DOM for IE+, NN6+, Opera4, etc. Microsoft DOM for IE4+, Opera7, etc. Netscape DOM for NN4).

Naming Conventions

Folders, documents, images have names starting with a small letter and have a maximum length of 8 characters. Like this, the website should be portable to older servers without major adjustments.

Development Platform, Tools, And Test Browsers

Platform

The website has been developed with the help of the simplest HTML editor on a Windows XP operating system.

Test Servers

Omni HTTPd withPHP version 4.2.2
Apache Webserver with PHP version 4.0.6

Test Browsers

Internet Explorer version 6.0
Netscape Navigator versions 4.7 and 7.02
Opera version 7.03

Technical Aspects and Techniques

General

The entire website is designed in such a way that there be least redundancy on document level. Elements which are used more than once, are filed as separate documents and are included where necessary. Thus, the majority of documents are *.php documents.

More Than Just HTML

A number of webpages contain special effects, JavaScript functions and other modern technique:
 
JavaApplet see Homepage
Flash5 film see Homepage
dHTML see Homepage, Introduction, Rules
Rollover effect see Introduction
Imagemap see Countries
Popup window see Countries
GIF animation see Players
Form and database see Guestbook
Other JavaScript functions see Guestbook

Rough Structure / Overview of Document Connections

General

Generally, each website, i.e. each site which can be accessed via navigation menue, starts in a separate p_.....php document.

The p_.....php document contains the HTML header with the meta tags and the title and embeds the fonts.css document. Where necessary, the JavaScript functions are also saved in the p_.....php document.

Normally, in the body there is not much more than the include of layout.php (where the screen layout is being built, the navigation menue and the respective t_.....php document are included. The t_....php document contains the actual page contents). The end body tag is set at the end of the p_.....php document.

Initial Call via Website URL (http://address/cricket_e)

  • index.html  opens p_home.php via JavaScript (document.location.href="p_home.php")
    • p_home.php  contains in its header JavaScript functions for the applet and dHTML. Between header and body, fonts.css is beingt linked. In the body, layout.php is included
    • layout.php  creates the tables which structure the screen, includes const.php, inserts logo.gif and the flash film. Then, the navigation menue menu.php is included and finally t_home.php
      • menu.php  creates the navigation bar
      • t_home.php  creates the page contents
    • p_home.php  finalizes the body
  • index.html  shows a simple page in case JavaScript is not supported. There, the visitor can access the homepage via a hyperlink.

Call via Navigation Menue

Like above, except that index.html is not necessary. Whether p_home.php or another p_.....php document is being addressed depends on which hyperlink was clicked in the menue. The URL parameters are analysed in layout.php.

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.

Central Documents

index.html

Purpose

This is the website's "entry point". The document is loaded by the server, if the URL shows nothing more than the website folder, i.e. "cricket_e".

Contents/Process

In case JavaScript is supported, the homepage is loaded via a JavaScript function (document.location.href="p_home.php"). In case JavaScript is not supported, a short text is shown and a hyperlink given to the homepage.

layout.php

Purpose

Here, the rough browser screen is being built for all web pages:
 


LOGO




PAGE-TITLE


Navigation Menue
(include menu.php)

Page Contents
(include t_.....php)

Contents/Process

First, const.php is included, where various constants are defined. Then, a PHP routine makes the first parameter available which - if access was not via index.html - has been forwarded along with the URL (GET method adds parameters to URL ... ?nbr=...). The boolean variables $avail, $avail1 and $avail2 are set, depending on whether the nbr-parameter is directly available (register_globals ON) or whether it has to be extracted (depending on PHP version). These variables might be used in later documents.

With the help of the nbr-value which is now available in variable $nbr the local variables $tit (for the page title) and $docnam (for the respective contents document) are set. Then, the $top variable is set which will be used later on to find out whether a hyperlink has to be set to the top of the page (its setting depends on the page size).

In case a second parameter (snbr) is expected (call via submenue, form submit from guestbook) this parameter is also made available and its value saved in the variable $snbr. Any further URL parameters are extracted only later, in the respective document.

A first stable contains logo.gif in its first column and the page title (which is now available in variable $tit) in its second column. The column widths are indicated in %. For the homepage, a flash film is included (sscflash.php) in a third column at the right side of the title (for details, see Homepage further down).

Below this first table, another three-column table is inserted. The navigation menue menu.php is inserted in the leftmost column which is of the same width as the first column of the first table above. For the homepage, menuh.php is inserted below the navigation menue (box with hyperlinks to related sites). Below that - only for the homepage and the glossary - the search engine box is inserted via search.php. The second column is extremely small and contains one empty space on a background image which gives a nice shading effect. The rightmost column contains the t_.....php document whose name is available in the previously set variable $docnam. Finally, if necessary ($top == $YES) a hyperlink is set to the top of the page where an anchor has previously been defined.

menu.php

Purpose

This is the navigation menue which is available on each web page. It is inserted via layout.php.

Contents/Process

The menue bar is set up in a table (included via layout.php into the left column of the main table). The menue is set up with the help of external stylesheets. Each menue item has a unique number allocated which - if that item is clicked - is appended to the URL via ?nbr=xx. This number is needed by layout.php for the determination of the wanted page.

The individual menue items are set up with the hellp of predefined constants (in const.php).

menuh.php

Purpose

A small box contains a list of links to other websites. The box is located below the navigation menue in the homepage.

Contents/Process

A simple one-column table contains various hyperlinks (hrefs).

fonts.css

Purpose

This is the external document that contains most of the CSS definitions used within the website. It is inserted (linked) after the </head> tag of each page (p_.....php Dokument).

Contents/Process

A number of stylesheet definitions is listed one after the other. There are no comments in this document (just did not work in many places).

const.php

Purpose

Here, all constants are defined that are needed anywhere in the website. The document can be included anywhere where needed (it is included in layout.php and thus available for all web pages).

Contents/Process

The constants stand primarily for text passages and references such as keywords in the menue bar, page titles, path names, (parts of) hyperlinks.

The glossary keywords and a short description thereof are also defined as constants. The same is true for the administrator password for the guestbook maintenance.

search.php

Purpose

This is a small box where a term can be entered and a search engine selected. The box could basically be inserted anywhere and everywhere. layout.php inserts it for the homepage and the glossary into the left colulmn just below the navigation menue and the external hyperlinks box.

Contents/Process

A one-column table contains a form with a selection list (three search engines), an entry field (for the term to be searched) and a "search" submit button.

counter.txt

Purpose

Visitor counter which is increased by 1 every thime the start page is accessed. The contents, i.e. the current value of the counter can be viewed by the administrator in his guestbook view.

Contents/Process

This file contains a string representing the counter value. For its creation and maintenance (increase of the counter), see Homepage (p_home.php).

Web Pages

Homepage

Extras

JavaApplet, Flash5 film, dHTML effect

p_home.php

This document contains the header with the meta tags and the title and the linking of fonts.css.

Header: JavaScript Functions

  1. Function definition for embedded JavaApplet
  2. Function definition for dHTML effect of hiding and step-by-step showing of page contents

Body

First, a PHP routine increases the visitor counter by 1 (the text file counter.txt is automatically created upon very first call). The visitor counter is not displayed in the homepage. Then, layout.php is included where the page is being built with its logo, the title and the navigation menue (via menu.php). Below the navigation menue, menuh.php and search.php are included. Above the </body> tag, a hyperlink is set to the browser's mail function, the webpublisher's email address is inserted and a short text given.

t_home.php

layout.php includes t_home.php.

First, a JavaApplet is embedded which shows a few catch words and hyperlinks to other pages within the website.

Then, a two-column table is inserted. The left column contains a few small images, the right one appropriate short texts. The visitor gets the images and the text passages one by one in short intervals. This effect is created via a JavaScript function. First, the images and texts are hidden and then redisplayed in predefined intervals, one by one. The single images and texts are set up in named <div>'s, which are addressed by the JavaScript function. In order to have the homepage displayed also on browsers not supporting JavaScript, these -<div>'s are defined with visibility:visible.

applet1.php

The JavaApplet has been downloaded from the internet viahttp://www.javascriptkit.com and then adjusted (especially texts, colours, fonts, size, hyperlinks in applparms.txt). The <applet> tag has been replaced by an <object> tag and the necessary changes have been made. The function definition has been integrated into p_home.phpand only the <object> part with the <params> has been kept in a separate file.

Applet Files

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

sscflash.php

The Flash film inserted via layout.php for the homepage was created in Flash5. Three images were created with the texts "Game", "Sport" and "Cricket" and then defined as images 1, 30 and 60 of the film. Between these three images form tweening was applied. In order to have the third picture a little bit longer on the screen and not to have the film jump to restart, it was repeated as images 70 and 80, this time without tweening.

Film Files

  • cricket2.swf
  • cricket2.fla

Introduction

Extras

Rollover effect and dHTML

p_basics.php

This document contains the header with the meta tags and the title and the linking of fonts.css.

Header: JavaScript functions for rollover effect

  1. Checking of browser and its version in order to find out whether rollover can be done or not (via navigator properties). If ok, the image references are listed in an array. Then, the images are loaded into two arrays, one for the rollover and one for the rollout.
  2. Function over(nbr):
    Based on the passed parameter, the image is taken from the rollover array
  3. Function out(nbr):
    The image is taken from the rollout array (all images there are the same (read bullet))

Header: JavaScript functions for dHTML effect

  1. showstuff(part)
    (onMouseOver): Make visible the contents of the <div>
  2. hidestuff(part)
    (onMouseOut): Hide the contents of the <div>

Body

Then, layout.php is included, where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_basics.php.

t_basics.php

Based on the variable $snbr (extracted via layout.php from the URL parameter snbr=.. ), the wanted document is included from the folder "basics". If $snbr is not available or 0 (i.e. call was not made via submenue, basics/basics1.php is included.

basics/basics1.php

This is the start page of the introduction pages. It shows three rather prominent bullets with a short text on their right side. Further down, a few paragraphs give a short introduction into the topic "cricekt".

Rollover Effect

The bullets are GIF images with rollover effect and hyperlinks to other pages within the chapter introduction. OnMouseOver and OnMouseOut event handler call the JavaScript functions defined in the header.

dHTML Effect

The introductory text contains some expressions which are explained in the glossary. They are highlighted in green bold colour. Short explanations are inserted in the line after the end of the respective paragraph. These explanations are defined as <div>'s with style "hidden". OnMouseOver and OnMouseOut event handler call the JavaScript functions defined in the header. Furthermore, there is a hyperlink attached to each such expression. When clicked, the visitor reaches directly to the wanted expression within the glossary. The <div>'s are numbered. When calling the function, the number is passed as parameter. Where there is more than one expression highlighted within a paragraph, the <div>'s are defined with ascending z-indexes. The <div> texts are defined as constants in const.php (from where also the glossary takes its texts). The same is true for the expressions themselves.

Bullets

The bullets for the rollover effect were created in Adobe Photoshop.
bull_red.gif default onMouseOut Bullet
bull_test.gif / bull_one.gif / bull_six.gif onMouseOver Bullets

basics/basics2.php

This is the subpage of the introduction containing some information on test cricket. It is accessed via the submenue or a rollover button.

basics/basics3.php

This is the subpage of the introduction containing some information about one day cricket. It is accessed via the submenue or a rollover button.

basics/basics4.php

This is the subpage of the introduction containing some information about super 4 cricket. It is accessed via the submenue or a rollover button..

basics/basics5.php

This is the subpage of the introduction containing some information about other forms of cricket. It is accessed via the submenue.

basics/menu_b.php

The submenue (just like the other submenues in the website) is displayed in a one-column table of as many cells as there are sub topics (here five).

The menue item of the currently active page is displayed differently, i.e. highlighted. This is done via a PHP routine which interprets the URL parameter snbr. Based on the parameter value the corresponding submenue item is displayed in a different style (different background colour, different link style).


History

Extras

None

p_hist.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_hist.php.

t_hist.php

This is a simple page with HTML text and one image. For the image, a two-column table is inserted. The left column contains the image and the right one a vertically centered text.

Equipment

Extras

None

p_equip.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_equip.php.

t_equip.php

This is a simple page with HTML text and a few images. The page contents are structured in a two-column table. The left column contains the subtitle, the right one the corresponding texts and - where applicable - an image.

Field

Extras

None

p_field.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_field.php.

t_field.php

This is a simple page showing some images and HTML text. No table is used for the layout of the images. The text flows around them. Where necessary (images with merely no white border) the text is placed around the image with a vertical and a horizontal gap, thus ensuring a better overall appearance.

Countries

Extras

Imagemap and popup window.

p_popu.php

This document contains the header with the meta tags and the title and the linking of fonts.css.

Header: JavaScript Function for Popup Window

The window is created in a new location, without menue and tool bars and in a predefined size (400x400). The option "resizable" is set to "no" in order to prevent window resizing by the browser. The URL is indicated with the help of the onClick parameter.

Body

In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_popu.php.

t_popu.php

Imagemap

A worldmap (in GIF format) is shown with those countries highlighted where cricket is played (nearly) professionally. Hotspots are layed over these countries. (The GIF image has to be defined in pixels in order to ensur that the hotspots are always where they should be).

The hotspots are linked to individual HTML files (href=..). For browsers supporting JavaScript, there exist additional onClick events. The difference between the direct hyperlinks nd the onClick events lies in the layout of the new window. The JavaScript function generates a small popup window while the hyperlink cannot manipulate the window. The JavaScript function is called with return option, thus ensuring that there is no hyperlink executed in addition to the popup window.

Hotspots

The hotspot coordinates were determined via Paint Pro. Rectangles were placed over the countries in question and the coordinates of the upper left corner and the lower right corner were noted.

imagemap/.....

  • One HTML file per hotspot with a title and an image of a cricket ground
  • One JPEG image per HTML file

Players

Extras

GIF animation.

p_player.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_player.php.

t_player.php

Based on the variable $snbr, which was evaluated by layout.php based on the URL parameter snbr the wanted file is included from the folder "player".

Animations

The animations were created in Jasc Animation Shop. 5-10 individual GIF images of same size and on a transparent background were the basis of each animation.

player/player1.php

Shows a GIF animation of a bowler and a short text about the role of the bowler.

player/player2.php

Shows a GIF animation of a batstman and a short text about his role.

player/player3.php

Shows a GIF animation of a wicketkeeper and a short text about his role.

player/player4.php

Shows a GIF animation of a field player and a short text about his role.

player/player5.php

Shows a simple GIF image with umpires and a text about their role in the game.

player/menu_p.php

The submenue (just like the other submenues in the website) is displayed in a one-column table of as many cells as there are sub topics (here five).

The menue item of the currently active page is displayed differently, i.e. highlighted. This is done via a PHP routine which interprets the URL parameter snbr. Based on the parameter value the corresponding submenue item is displayed in a different style (different background colour, different link style).


Game/Rules

Extras

dHTML effects and crossreference to expressions in glossary.

p_rules.php

This document contains the header with the meta tags and the title and the linking of fonts.css.

Header: JavaScript Functions dHTML

W3C DOM, Microsoft DOM, Netscape DOM compatible browsers are supported
  1. showstuff(part)
    (onMouseOver)   where "part" identifies the <div> which is to be made visible
  2. hidestuff(part)
    (onMouseOut)    where "part" identifies the <div> which is to be hidden

Body

In the body, layout.php is included where the page is being built with the logo, the title and the navigationmenue (via menu.php). The rest of the page is dealt with in layout.php and t_rules.php.

t_rules.php

Based on the variable $snbr (extracted via layout.php from the URL parameter snbr=.. ), the respective document is included from the folder "rules". If $snbr is not available or 0 (i.e. call was not via submenue), rules/rules1.php is included.

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

These "subpages" all look more or less the same. They all contain text with some highlighted keywords.

Some of the pages have images and lists with enumeration. Where images are embedded, a two-column table is used with the image in the left and the text in the right column.

dHTML Effect

The highlighted expressions are explained in the glossary. They are made prominent via green fat colour. A short explanation is inserted on the line following the paragraph in question. The explanation is defined in a <div> with style "hidden". OnMouseOver and OnMouseOut event handler call the JavaScript functions defined in the header. Furthermore, there is a hyperlink attached to each of the expressions which leads to the expression within the glossary, i.e. when clicking on the expression, the glossary page is loaded. The <div>'s are numberd. When calling the function, the number is passed as parameter. Where there is more than one highlighted expression in a paragraph, the respective <div>'s are defined with ascending z-indexes. The <div> texts are defined as constants in const.php (from where also the glossary takes its texts). The same is true for the expressions themselves.

rules/menu_r.php

The submenue (just like the other submenues in the website) is displayed in a one-column table of as many cells as there are sub topics (here five).

The menue item of the currently active page is displayed differently, i.e. highlighted. This is done via a PHP routine which interprets the URL parameter snbr. Based on the parameter value the corresponding submenue item is displayed in a different style (different background colour, different link style).


Glossary

Extras

None.

p_gloss.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_gloss.php.

t_gloss.php

The contents are set up in a two-column table. The left column contains the keyword and the right column the respective explanation.

Every keyword is defined in an <a> tag and can, thus, be addressed from anywhere within the website.

The keywords and the first parts of the explanation are defined as constants in const.php. For many of the expressions, more explanatory text is added directly in HTML format.


Guestbook

Extras

Forms, JavaScript functions, database.

p_guest.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_guest.php.

Header: JavaScript Function placeCursor()

The cursor is placed into the comment text field. The function is called as soon as the name field is being left (e.g. via tab).

Header: JavaScript Function checkAndSend()

The function is called upon click on the "send" button. It first checks whether there is something set up in the name field. An alert will inform the visitor if not so. If the name field is ok, the comment field is checked. It is checked whether there is an entry at all and, if so, whether its length does not exceed the maximum of 255 characters. Depending on the error, the cursor is placed in the respective field. The return value is set to false in order to prevent the form contents from being sent upon click on the alert's OK field. If everything looks fine, return is set to true (thus, the form contents are being sent).

Body

In the body, layout.php is included where the page is being built with the logo, the title and the navigation menue (via menu.php). The rest of the page is being dealt with in t_guest.php.

t_guest.php

The additional GET parameters are - where necessary - extracted and placed into variables (layout.php has done the necessary preliminary work).
$name, $comm expected if a form was submitted and the database ha to be updated now (from guest1, to guest2)
$opt expected if the administrator has indicated which entries he wants to see (from guest3, to guest4)
$dl, $fr expected, if the administrator clears or deletes entries (from geust4, to guest5)
Where $name is available (from guest1), it is checked whether the value corresponds to the administrator password (defined in const.php). If so, $snbr is set to the value of 02.

$snbr is now checked in order to include the wanted document:

$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

This is the visitor view of the guestbooks.

onload

An onload function makes sure that name and comment fields are empty and that the cursor is placed in the name field. This function cannot be placed in the header since not every page included via p_guest.php does contain these form fields.

Form

After a short introductory text, the form is built:
<FORM name="guestb" action"<?echo $SEND;?>method="get" onsubmit="return CheckAndSend()">
 
name The form name is used for field manipulation by JavaScript functions
action URL in const-php, addressed upon submit (http://server_name/cricket/p_guest.php)
appended: ?nbr=.. & snbr=..
method Since the URL has fewer than 2000 characters, GET is chosen
onsubmit=return .. When clicking "submit", a JavaScript function is called to check the input. Only if TRUE is returned will the form contents be sent.
nbr hidden input field, contains nbr parm 11 (for layout.php)
snbr hidden input field, contains snbr parm 01 (for t_guest.php)
name Textarea, here, the visitor enters his name. The field possesses an onbluf function with which the cursor is placed directly into the comment field.
comm Textarea, here, teh visitor enters his comment. The field has a wrap property, ensuring that automatic line breaks are not forwarded as such via the URL.
Hyperlink to browser mail function with administrator address
When "submit" is clicked the function CheckAndSend() is called, which checks the input. If ok, the form contents are submitted. Via the "clear" button the visitor can reset his input.

Display of Cleared Guestbook Entries

  1. Some variables and an SQL query are prepared
  2. The connection to the database is made via odbc_connect()
  3. Via odbc_do() the query is executed (could also be odbc_exec() )
  4. Single table rows are read in a loop via odbc_fetch_row()
  5. The read rows are displayed on alternating background colours
  6. The connection is closed
If more than 20 entries have been displayed a hyperlink is set to the top of the page.3

guestbk/guest2.php

Here, the visitor comment is entered into the database and a confirmation is sent to the visitor.

Form

First, the same form is set up as for the normal visitor view. Like this, the visitor may enter directly some more comments.

Insertion Into Database

  1. Some variables are declared and initialized
  2. Time and date are loaded via getdate() and extracted into variables
  3. The SQL query is prepared for the insertion into the access database
  4. The connection to the database is established via odbc_connect()
  5. The query is executed via odbc_exec() (could also be odbc_do() )

Confirmation

If everything is fine, a confirmation is given to the visitor and his comment which has just been saved is redisplayed. In case there was any error, the visitor gets a notification.

guestbk/guest3.php

This is the selection page for the administrator.

The administrator can choose whether he wants to see the full contents of the guestbook or only new entries, i.e. entries which have not yet been cleared.

Two submit buttons generate the URL (opt=all oder opt=new).

Furthermore, the visitor counter from the textfile counter.txt is displayed here.

guestbk/guest4.php

This is the administrator's guestbook view.

Depending on what he has selected in the selection view, all entries or only part of the guestbook contents are displayed.

Adjacent to each entry, two checkboxes are given, one to delete the entry and another one to clear it. The administrator is free to select as many checkboxes as he likes and to submit the full selection by clicking the submit button.

In order to make the interpretation of the parameters easier, the checkboxes are not submitted directly. The information is put into separate, hidden fields which are then submitted.

JavaScript-Function setArrays(): called upon "submit"

Note 1: Despite its name, no arrays are involved, but the functionality is that of an array.

Note 2: This function is only used within this page and is thus not defined in the header.

Two variables "myfr" and "mydl" are defined for the checkboxes. All form elements starting with element number 6 (first checkbox) are checked in a loop. The identification of each checkbox selected (the identification is the data record ID) is taken into the respective variable (myfr for clearance and mydl for deletion). The decision whether the form element is a clearance or a deletion checkbox is made by dividing the element number through 2. If the division has a remainder (i.e. element number is odd), the element is a delete checkbox, if there is no remainder (i.e. element number is even), the element is a clear checkbox. A plus sign (+) is inserted between the individual identification numbers, thus, the numbers are concatenated within the variables.

Finally, all form fields are reset in order to avoid unnecessary URL parameters. Then, the contents of the two variables are copied into two hidden fields which are then appended to the URL as parameters.

Form / Administrator View of Guestbook

First, four hidden input fields are initialized.
  • nbr    initialized to "11" (guestbook identification for layout.php)
  • snbr  initialized to "04" for the evaluation in t_guest.php
  • fr      for clicked clearing checkboxes
  • dl      for clicked deletion checkboxes
The guestbook is displayed in a five-column table. The first column contains the clearing checkboxes, the second the deletion checkboxes, the third the data record ID, the fourth date and time of record creation and the fifth the name and the comment. In order to make reading easier, the single table rows are displayed on two alternating background colours.
  1. Some variables are declared and initialized to an initial value
  2. The table and cell styles are defined
  3. The SQL query for the reading from the Access database is prepared
  4. The connection to the database is established via odbc_connect()
  5. The query is executed via odbc_exec() (could also be odbc_do() )
Depending on the value of $opt (passed parameter from the administrator's selection view) either all data records are displayed or only those whose attribute "fr" is set to "n".

Submission

Before the form is submitted the function setArray() is called which takes the relevant information into two hidden fields.

guestbk/guest5.php

Here, the data records selected by the administrator are cleared or deleted.

On the server, the parameters passed along with the URL are somewhat as follows: &fr=a+b+c+.. &dl=x+y+z+..

The two parameters fr and dl have contents which resemble an array. In order to be able to access the single values, the contents have to be exported to an array. This can be done via the function explode(). Thus, the parameter values are "exploded" into the two arrays $free and $del. Then, the two arrays are checked.

If at least one of the two arrays has a content, connection is established to the database. Then, first the records to be cleared are gone through in a loop, namely via "UPDATE $FIL SET fr = 'y' WHERE nr = (int) $freeArray[$i]".

Afterwarads, the records to be deleted are deleted in a loop: "DELETE FROM $FIL WHERE nr = (int) $delArray[$i]".

Then, the result is displayed, i.e. whether the request(s) could be processed.

guestbk/guestb.mdb

The Access database consists of one table with the name guest. The table consists of five colulmns:
nr Data record ID Auto value
date Date and time Standard date
fr Textfield for clearance size 1
name Textfield for name size 30
comment Textfield for comment size 255

Sitemap

Extras

None.

p_site.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is set up with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_site.php.

t_site.php

The sitemap is displayed in a three-column table. The left column contains the group title. The middle and the right column contain hyperlinks to the respective pages (middle column) and - where applicable - to the respective sub-pages (right column).

Concept

Extras

None.

p_concpt.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is set up with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_concpt.php.

t_concpt.php

The concept is a simple but long HTML page. On top, the table of contents is displayed with hyperlinks to the titles of levels 1, 2, and 3.

Although the page is very long, no submenue has been introduced, since it is a page which will not be viewed by normal visitors all too frequently. In front of every level 1 title a hyperlink is placed which leads back to the table of contents. Below this hyperlink a horizontal line <hr> gives a little structure.


System Documentation

Extras

None.

p_docu.php

This document contains the header with the meta tags and the title and the linking of fonts.css. In the body, layout.php is included where the page is set up with the logo, the title and the navigation menue (via menu.php). The rest of the page is dealt with in layout.php and t_docu.php.

t_docu.php

The system documentation is a simple but long HTML page. On top, the table of contents is displayed with hyperlinks to the titles of levels 1, 2, and 3.

Although the page is very long, no submenue has been introduced, since it is a page which will not be viewed by normal visitors all too frequently. In front of every level 1 title a hyperlink is placed which leads back to the table of contents. Below this hyperlink a horizontal line <hr> gives a little structure.

 


Bibliography

Books Consulted

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

Websites Consulted

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

Tests

Primary Design

The website was primarily designed for a resolution of 1024x768 with maximum colour range and maximised browser window. It was assumed that images, JavaScript and Java are all supported. If conditions change, the layout and appearance might become a bit less optimal.

First Test RoundTestrunde - local

Tests were performed on
  • Windows XP
    • Internet Explorer Version 6.02
    • Netscape Navigator 7.02
    • Opera Version 7.03
  • Windows 2000
    • Netscape Communicator Version 4.7
In all cases, the tests were performed with the following local servers:
  • Apache Webserver with PHP Version 4.0.6
  • Omni HTTPd Server with PHP Version 4.2.2

Second Test Round - remote

After satisfactory test results on the local servers, the website was transmitted to the destination server via FTP. There, the tests were repeated.
  • IIS 5 Webserver

Test Results

The test results are not listed individually but in summary. Only where there are differences between the browsers or servers, a special note is made.

Test Results

Appearance

Resolution 1024x768, Maximized Browser Window

All websites look good and almost the same on all browsers tested.

Only NN4+ is not all too ideal compared to the other browsers. Separating lines in the menue, for example, are displayed thicker than wanted and the in tables with coloured background the cell borders are visible. However, these things only strike when compared directly with the other browsers and are not disturbing as such. Thus, they are considered acceptable.

Result acceptable

Resolution 800x600, Maximized Browser Window

  • Fonts
    The text passages look almost exorbitant
  • Page Size
    The pages appear to be rather big. At several places, horizontal scrolling becomes necessary.
  • Right Border
    The right border is not always nicely aligned where bigger images are inserted.

Result acceptable
Compared to other websites, however, when viewed with the same resolution, the present website does not look bad at all. It is obvious, that all websites which have been compared were originally designed for a higher resolution.

Minimized Browser Window

Similar to the results obtained with lower resolution, the right border is not always nicely aligned where there are bigger images. The degree of disalignment depends on the degree of window size reduction.

Result acceptable

Colours

  • Maximum
    Everything looks fine
  • 256
    Embedded images look a bit grated, own colours (web-safe) are good.

Result good

No Images Supported

Internet Explorer 6.02

Shows a frame of the size of the image. Alternative text is always shown.

Result good: Overall appearance remains the same

Netscape Navigator 7.02

Where images are given with pixel sizes, the frames displayed are of the same size and alternative text is shown. Where images are embedded without size indication, only a small square box is shown without alternative text. The text is also not shown for the animations and the rollover bullets.

Result satisfactory: Overall appearance remains the same on those pages where it is important.

Opera 7.03

Alternative text is always shon in a horizontal frame at a width corresponding to the text width. The image size is ignored throughout.

Result not really satisfactory: Overall appearance changes to quite an extent.

Netscape Communicator 4.7

At places where images have been embedded in a table cell of relative size, only a small square appears and no alternative text. Otherwise, a frame is shown of the picture size and the alternative text is also displayed.

Result ok: There is only one page with changed overall appearance, namely the history page.

Functionality

Forms

All functions were tested successfully. Depending on browser settings, TAB does not generate and onblur, which, however, is a detail.

Links

All links successfully tested.

Database

All functionalities successfully tested.

dHTML

As expected, the short explanatory texts do not appear on MouseOver in Netscape Communicator 4.7.

No Java Support

As expected, the applet does not appear on the homepage but only the alternative text.

No JavaScript Support

Entry Point

The "Intro" page is displayed and a hyperlink goes to the homepage.

Homepage

As expected, the homepage is displayed nicely - but without delayed step-by-step display of the images and text passages.

Introduction - Rollover

Of course, the rollover does not work. However, the red bullets are displayed and the hyperlinks work.

dHTML

As expected, the explanatory texts do not appear on MouseOver. The hyperlinks work.

Imagemap

As expected, the popup windows do not appear but normal windos of the current browser window size.

Guestbook

Upon submit, no input check is performed. Whatever was entered is sent. (Hence the server side checks via PHP). In case input was wrong, the visitor gets an error notification. In case the input was too long, the superfluous characters are simply cut and ignored and the visitor gets a notification.

Noted During Realisation

CSS

All browsers have problems with external stylesheets if there are any comments in the *.css document. Furthermore, it was sometimes necessary to define individual stylesheets internally, i.e. in the document needed. In literature, this problem is mentioned in many places. Especially for NN4+ it was often necessary to define properties in the TAG the old, traditional way (e.g. table widths).

Improper Scripts

If tags are not "closed" properly, IE and NN often correct automatically. Opera and NN4 do not.

Images and Lists

IE does not or only partially show the list bullets (<ul>) if they are located adjacent to or around images. In order to have a correct display, tables have to be inserted.

Form Submit

The attribute "enctype" has to be omitted since IE does not take the form contents if the attribute is set.

Comments

Not only in connection with CSS but also elsewhere in the documents it showed sometimes necessary to omit comments (Windows 2000).

Concluding Remarks

NN4+

This browser type has not been paid too much attention. The views are quite balanced throughout and the functionalities, except the dHTML information texts, are working.

Result really quite acceptable

Others

Result really quite good


Addendum

German and English Versions

In a first go, only the German version was created. Later on, an English version was added. The connection of the two was made by introducing an "Intro" page giving the visitor the opportunity to select between English and German.

All original German documents were copied into a new folder "cricket_e" and then translated where necessary.

The German folder was renamed from "cricket" to "cricket_d".

New Structure

A new folder "cricket" was created and the "cricket_d" and "cricket_e" folders moved into it. Apart from these two sub-folders, the main folder "cricket" only contains one document, namely index.htm.

In order to minimize redundancy, one could have extracted common stuff, such as the images into a separate folder. However, this would have resulted in quite some adjustments being necessary, such as path references, etc.

Main Index

In order to avoid unnecessary changes or restructuring but making sure, the full functionality would remain available (such as browser evaluation, etc.), the new index.htm (located in the main folder "cricket") links to the index pages of the subfolders. Since those indices load the *.php pages without further notice (if JavaScript is supported), the URL superscription via location.href would inhibit the backloading of the selection page (main index). In order to overcome that, the URL superscription is done via location.replace(). At least this is true for Internet Explorer and Netscape Navigator. Opera can only cope with location.replace() if the new URL is given as absolute address. Since this is too restrictive, for Opera the new URL is loaded via location.href.

 

  Top