HOOFDSTUK 1 INLEIDING 1lib.ugent.be › fulltxt › RUG01 › 000 › 728 › 096 › RUG01... · Inhoudstabel De ontwikkeling van een nieuwe website Formal Methods Europe 3.4 Gedetailleerde

Inhoudstabel

De ontwikkeling van een nieuwe website Formal Methods Europe

HOOFDSTUK 1 INLEIDING..................................................................................... 1

1.1 Webdesign ..................................................................................................................... 1 1.1.1 Definiëring van doelstellingen, een ontwerpplan en de doelgroep ........................ 1 1.1.2 Welke sfeer straalt een website uit ......................................................................... 1 1.1.3 Ontwerpen van designelementen en pagina lay-out............................................... 1 1.1.4 Structuur van de website ........................................................................................ 2 1.1.5 Creëren van een webtemplate ................................................................................ 3

1.2 HTML ........................................................................................................................... 3

1.3 Cascading Style Sheets ................................................................................................. 3

1.4 Server-side scripting versus client-side scripting ...................................................... 5

1.5 Java Server Pages (server-side scripting) .................................................................. 5

1.6 Javascript (client-side scripting) ................................................................................. 6

1.7 MySQL .......................................................................................................................... 7

HOOFDSTUK 2 DOELSTELLING ...................................... ..................................... 8

HOOFDSTUK 3 GEBRUIKTE STRATEGIËEN EN TECHNOLOGIËEN ............ ..... 9

3.1 Studie oude website Formal Methods Europe ........................................................... 9 3.1.1 Menu-systeem ...................................................................................................... 10 3.1.2 Lay-out ................................................................................................................. 10

3.2 Webstatistieken Formal Methods Europe ............................................................... 11

3.3 Opbouw nieuwe website Formal Methods Europe ................................................. 13 3.3.1 Fase 1: ontwikkeling HTML construct ................................................................ 13

3.3.1.1 FME banner ...................................................................................................... 15 3.3.1.2 FME logo ......................................................................................................... 15 3.3.1.3 Menu-systeem .................................................................................................. 16 3.3.1.4 Decoratieve scheiding menu-tekst ............ Fout! Bladwijzer niet gedefinieerd. 3.3.1.5 Tekst ................................................................................................................. 16 3.3.1.6 Submenu ........................................................................................................... 16 3.3.1.7 Decoratieve scheiding tekst-copyright ............................................................. 17 3.3.1.8 Copyright ......................................................................................................... 17

3.3.2 Fase 2: optimalisatie en uniformisering inhoud via Cascading Style Sheets ....... 17 3.3.3 Fase 3: creatie van mySQL databank ................................................................... 19 3.3.4 Fase 4: creatie jsp pagina’s voor de bevraging van mySQL databank ............... 20

3.3.4.1 Declaratie van lege Connection, Statement en ResultSet variabelen: ............. 21 3.3.4.2 Creëren van een connectie met de mySQL server ........................................... 21 3.3.4.3 Opstellen van specifieke tabelafhankelijke SQL statements ........................... 22 3.3.4.4 Afhalen van specifieke informatie uit de database .......................................... 22 3.3.4.5 Sluiten van de connectie................................................................................... 23

3.3.5 Fase 5: afwerking website met Flash intro ........................................................... 23

Inhoudstabel


3.4 Gedetailleerde bespreking gebruikte scripten ......................................................... 23 3.4.1 Menu systeem ...................................................................................................... 23

3.4.1.1 PropertyX rij .................................................................................................... 24 3.4.1.2 MenuX array .................................................................................................... 25

3.4.2 Submenu ............................................................................................................... 26 3.4.3 Dynamische sitemap ............................................................................................ 27

3.4.3.1 showMap() ....................................................................................................... 27 3.4.3.1.1 createEntry(menu) ...................................................................................... 28 3.4.3.1.2 selectMenu(showString) ............................................................................ 28 3.4.3.1.3 validate(stringURL, v1, v2) ....................................................................... 28

3.4.4 JSP – bevraging mySQL databank ....................................................................... 28 3.4.4.1 Bevraging van de FME-databank..................................................................... 28 3.4.4.2 Query van de FME-databank ........................................................................... 31 3.4.4.3 Update van de FME databank .......................................................................... 34

HOOFDSTUK 4 APPENDICES ............................................................................. 38

Appendix A De functie printSubmenu() ........................................................................ 38

Appendix B De functie showMap() ................................................................................ 39

Appendix C JavaScript menu-systeem .......................................................................... 41 C.1 Mmenu.js .................................................................................................................. 41 C.2 Mmenu_array.js ....................................................................................................... 49

HOOFDSTUK 5 REFERENTIES ............................................................................ 60

1 Hoofdstuk 1 Inleiding


H o o f d s t u k 1 I N L E I D I N G

1.1 Webdesign

1.1.1 Definiëring van doelstellingen, een ontwerpplan en de doelgroep

Vooraleer men er aan denkt een webdesignproject uit te tekenen of al de eerste schuchtere poging tot een design

rechtstreeks probeert te implementeren in code, moet men beschikken over een weldoordacht en sterk basisplan

waarop men een toekomstig ontwerp kan baseren.

Daarbij is het van belang dat men het ontwerp goed omkadert en laat afhangen van de doelstellingen die vooraf

bepaald worden. Welk doel wil ik bereiken met de website, moet de website veel bezoekers trekken,… ?

Het is tevens van groot belang dat men zich een idee kan vormen van de potentiële doelgroep van de website.

Zijn de bezoekers klanten, vrienden, collega’s,… Weten zij waarover de website zal gaan, of zijn het bezoekers

die toevallig terecht komen op de site, of komt men met een specifiek bedoeling op de site terecht?

Als je deze doelstellingen én begrijpt én als je een beeld kan vormen van de bezoeker, dan is de basis gelegd

voor verdere ontwerpbeslissingen: welke sfeer moet de site uitstralen, hoe zal de structuur opgebouwd zijn, het

grafisch ontwerp, de inhoud, interactiviteit.

1.1.2 Welke sfeer straalt een website uit

Het bepalen van een overkoepelende sfeer van een website is onlosmakelijk verbonden aan de doelstelling

(informatief, ontspanning, verkoop,…), het onderwerp van de site en de doelgroep. De sfeer die men wenst te

creëren is dan een soort gids die alles zal bepalen: de inhoud, de structuur, het grafisch ontwerp,…

Sfeer wordt visueel (grafisch) gecreëerd door het gebruik van een zogezegd “kleurenschema”. Door het gebruik

van specifieke kleurencombinaties kan men een welbepaalde sfeer maken: zeer flitsende, opvallende en heldere

kleuren voor een ontspanningswebsite, meer donkere en conservatieve kleuren voor een zakelijke website,…

Eénmaal de sfeer is bepaald kan men consistente ontwerpelementen zoals logo’s, ‘titlebanners’, knoppen,…gaan

ontwerpen.

1.1.3 Ontwerpen van designelementen en pagina lay-out

Om er voor te zorgen dat een website aangenaam leesbaar is en goed overkomt, moet men ervoor zorgen dat het

design en de opmaak doorheen de website zeer consistent is. Een consistente website vormt een goed afgesloten

geheel waarbinnen de bezoeker zich op zijn/haar gemak voelt. De pagina lay-out is dus van zeer groot belang.

Men kan er bijvoorbeeld voor zorgen dat pagina’s slechts enkele schermen lang zijn met veel witruimte, dat het

ontwerp voor schermresoluties van 800 x 600 en 1024 x 768 wordt gemaakt (de meeste mensen gebruiken deze

resoluties – 640 x 480 heeft bijna afgedaan). Een grote flexibiliteit in het ontwerp zal er ook voor zorgen dat de

website door de meeste internet browsers goed getoond wordt.

Op het gebied van achtergrondkleur voor de webpagina’s is de keuze eindeloos. Belangrijk is wel dat de

leesbaarheid van de tekst niet verstoord wordt. Een goed contrast tussen tekst en achtergrondkleur is dus van

belang. Een witte achtergrond met donkere letters verhoogt dus de leesbaarheid.



Het logo voor een website moet als het ware het vaste, terugkerende grafische element van de site worden en

moet de de organisatie, het bedrijf of de boodschap die achter de site steekt symboliseren. Het logo kan zelfs als

onderdeel van de titelbanner geïntegreerd zijn.

Tijdens het ontwerp ,en dan vooral tijdens de opbouw van de structuur van de site, is het belangrijk dat grote

onderdelen gescheiden worden van elkaar door zogenaamde ‘dividers’. Deze grafische elementen (bv. de <hr> -

tag in HTML of een grafisch ontworpen divider) dragen bij tot de overzichtelijkheid van een site. Zo kan

bijvoorbeeld de titelbanner en logo gescheiden worden van de eigenlijke inhoud,…

Grafische elementen vertragen daarentegen de inlaadtijd van een pagina en kunnen voor mensen met een trage

internetverbinding tot frustraties leiden.

De twee belangrijkste beeldformaten die gebruikt worden in websites voor het ontwerp van grafische elementen

zijn het JPEG en GIF image formaat.

• JPEG – Jointless Photographic Experts Group (.jpg) - wordt het best gebruikt voor foto’s. Hoewel ze

doorgaans “lossy” gecomprimeerd zijn blijft de kwaliteit hoog. Bovendien is dit 24-bit formaat ,wat

ruwweg overeenstemt met 16 miljoen kleuren, kleiner dan vergelijkbare 8-bit GIF-afbeeldingen. Ze

kunnen weliswaar voor vertraging zorgen tijdens het inladen van webpagina’s omdat de browser deze

afbeeldingen eerst moet decomprimeren.

• GIF – Graphic Interchange Format (.gif) – is goed voor clipart bestanden of illustraties. Ze gebruiken 8-

bit (256 kleuren) of minder en gebruiken verliesloze compressie.

De ideale grootte van alle grafische elementen op één webpagina is onder de 30K à 60K. Deze grens zorgt

ervoor dat weinig tot geen vertragingen ontstaan tijdens het binnenhalen van dergelijke pagina. Indien niet aan

deze voorwaarde kan voldaan worden is het belangrijk dat de grafische elementen optimaal ontworpen en

geïntegreerd zijn in de HTML-code. Gebruik bijvoorbeeld altijd “height=”, “width=” en “alt=” tags om de

download-snelheid te verhogen en de site-opmaak consistent te houden. Zorg ervoor dat gebruikte grafische

elementen een meerwaarde betekenen voor de site (bv logo’s, dividers,…), maak van zeer grote beelden een

‘thumbnail’ met een link naar de originele foto op een aparte pagina, gebruik zogenaamde ‘image maps’,…

1.1.4 Structuur van de website

Alle websites bestaan uit pagina’s die onderling gelinkt zijn door zogenaamde hyperlinks. De vraag welke

structuur de website moet krijgen, hangt af van de eerder bepaalde doelstelling:

• Wil men een zeer inhoudrijke website?

• Wil men een lineaire website (boekvorm)?

• Wil men een willekeurige collectie van webpagina’s, gekoppeld via menu’s, links?

• …

De keuze voor een bepaalde structuur hangt af van de opbouw van pagina’s en hoe men ze wil koppelen aan

elkaar.



Navigatie binnen een site zal dan ook de opbouw van een site bepalen. Een bezoeker mag niet verdwalen binnen

een website en moet zich altijd kunnen oriënteren. Sitemaps zijn hierrin heel belangrijk. En indien iemand toch

zou kunnen verdwalen, zorg voor een soort ‘ontsnappingroute’ (bv. link het logo naar de indexpagina).

1.1.5 Creëren van een webtemplate

Een webtemplate of sjabloon kan gezien worden als een soort van basisraamwerk voor een webpagina. Dit

vereenvoudigt het aanmaken van nieuwe pagina’s, het onderhoudn,… Het gebruik van templates draagt bij tot

een blijvende consistentie van de gehele website. Een template is meestal opgebouwd uit de algemene

paginastructuur, samen met de terugkerende grafische elementen van de site. De plaatsen waar de inhoud komt

blijven leeg en worden volgens de behoeften van de webmaster ingevuld.

1.2 HTML

HTML (HyperText Markup Language) is dé taal waarmee de structuur van documenten gespecifieerd wordt. De

taal bestaat uit een samengestelde set van elementen die een documentstructuur en –voorkomen bepalen. Deze

HTML documenten worden door het hypertext transfer protocol ,kortweg HTTP, tot bij de gebruiker gebracht.

Deze gebruikt dan een browser om de HTML documenten te bekijken.

HTML is een toepassing van SGML (Standard Generalized Markup Language) dat de Internationale Standaard

(ISO 8879) is voor tekstopmaak. Het principe steunt op het meer structurele karakter van tekstopmaak dan op het

voorkomen ervan. HTML kan met gelijkwelke text-editor geschreven worden (van ‘plain text’ editors tot

grafische WYSISYG-editors). HTML maakt gebruik van tags (bv. <html>, <h1>, </body>,… ) om de volledige

structuur van de webpagina te beschrijven. De conventie wil dat in de meeste gevallen elke begintag (<tag> ) een

corresponderende eindtag (</tag> ) moet hebben. Sommige tags beschrijven de opmaak van tekst, paragrafen,

hyperlinks. Andere beschrijven dan weer tabelstructuren, beelden, … Elke begintag kent een aantal attributen

waarmee de opmaak nog verder kan verfijnd worden.

Gebruikers moeten op de hoogte zijn van het feit dat HTML een evoluerende taal is, en dat verschillende internet

browsers de HTML pagina’s op een “lichtjes” verschillende wijze kunnen weergeven.

Een verdere uiteenzetting van HTML wordt niet gegeven. Deze topic wordt enkel aangehaald omdat HTML

gebruikt werd tijdens het ontwerp van de nieuwe website. Voor een meer diepgaande uitleg over HTML wordt

verwezen naar bestaande literatuur .[1][2][3][4]

1.3 Cascading Style Sheets

Cascading Style Sheets (CSS) kunnen gezien worden als een soort van HTML opmaak die de webdesigner in

staat stelt een grotere controle uit te oefenen op de typografie en plaatsing van allerlei elementen op de pagina.

Het laat je toe een betere controle te hebben over de gebruikte lettertypen, hun gekende attributen (lettergrootte,

spatiëring van letters, tekstdecoratie,…). Het grote voordeel van CSS is dat slechts een kleine aanpassing in de

style sheet zich voortplant doorheen de gehele opmaak van de site. Indien natuurlijk de style sheet op een

consistente manier gebruikt wordt. Dit voordeel wordt nog duidelijker als de style sheet een apart bestand is,

waarnaar verwezen wordt binnen de head van de HTML broncode (een externe link naar de style sheet).



Een belangrijke vraag in verband met CSS is de browser compatibiliteit. CSS wordt ondersteund door Internet

Explorer 4+ en Netscape Navigator 4+. In de praktijk daarentegen kunnen er wel vervelende verschillen

optreden tussen verschillende browsers wanneer beslist wordt om met Cascading Style Sheets te werken. Er is

dan bijvoorbeeld wel de mogelijkheid om met behulp van Javascript een verschillende style sheet aan te bieden

afhankelijk van de gebruikte browser.

Het basissjabloon voor CSS ziet er als volgt uit. Ofwel wordt er een stijl gecreëerd voor een specifieke HTML

tag, ofwel wordt er een klasse (classname) gemaakt die toepasbaar is op (bijna) alle HTML-elementen.

tag {eigenschap : waarde ; eigenschap2 : waarde2 ; …}

.classname {eigenschap : waarde ; eigenschap2 : waarde2 ; …}

tag: het HTML element dat zal aangepast worden

classname: de naam van de klasse.

eigenschap: de specifieke eigenschap van het HTML element dat zal worden aangepast

waarde: de waarde van de eigenschap

.classname {eigenschap : waarde ; eigenschap2 : waarde2 ; …}

Er zijn drie manieren waarop CSS wordt gebruikt: ‘inline’, ‘embedded’ en ‘external/linked’ style sheets.

• ‘Inline’

Als je een stijl wilt toepassen op een klein stukje tekst dan kun je ‘inline’ stijlen gebruiken.

Bijvoorbeeld: voor kop 3 wil je een vetgezette tekst:

<h3 style="font-weight: bold">

• ‘Embedded’

Dergelijke style sheets worden binnen de <head></head> tags geplaatst, op elke pagina waar je de stijl

wilt toepassen.

Bijvoorbeeld:

<head>

<style type="text/css">



</style>

</head>

• ‘External / linked’

Men kan natuurlijk ook de style sheet in een aparte file steken ,vooral grotere style sheets, en gaan

linken aan de HTML pagina waarop de stijl moet uitgevoerd worden. Het linken gebeurt dan als volgt:



<head>

<link rel="StyleSheet" href="/path/sheet.css" type= "text/css">

</head>

Een verdere uiteenzetting van CSS wordt niet gegeven. Deze topic wordt enkel aangehaald omdat CSS gebruikt

werd tijdens het ontwerp van de nieuwe website. Voor een meer diepgaande uitleg over CSS wordt verwezen

naar bestaande literatuur[6][7]. Tijdens de uitwerking van de gebruikte strategiëen tijdens de ontwikkeling van

de nieuwe website wordt specifiek de gebruikte CSS besproken en geïllustreerd.

1.4 Server-side scripting versus client-side script ing

Wanneer een dynamische HTML pagina geconstrueerd wordt door een script-taal, dan wordt de broncode ofwel

uitgevoerd door de webbrowser van de gebruiker (client-side) of door de server. Er zijn zowel voor- als nadelen

verbonden aan deze twee types scriptingmogelijkheden. Een niet doordachte “mix” van de twee kan dramatische

gevolgen hebben voor de webpagina.

Er zijn veel voordelen verbonden aan server-side scripting. Omdat alle code server-side wordt uitgevoerd blijft

de scriptcode verborgen voor de gebruiker. Bovendien ondersteunt server sided scripting ook toegang tot

bestanden op de lokale machine, dit is de server zelf. Server-side scripting is ook browseronafhankelijk, de

scripts worden immers op de server verwerkt. De instellingen van de gebruiker hebben dus geen invloed op de

uitvoering van het script. Omdat de server enkel HTML documenten terugstuurt naar de gebruiker hoeft men

weinig tot geen rekening houden met de browser van de gebruiker.

Een groot nadeel van server-sided scripting is dat de server waardevolle systeem-middelen moet gebruiken om

elke pagina te ontleden en verzenden. Als de website echter veel bezoekers heeft kan dat de server belasten.

Bovendien ontstaat er ook een aanzienlijke datastroom. Elke pagina moet door de server verwerkt en verstuurd

worden. Deze datastroom kan sterke vertragingen veroorzaken.

Client-sided scripting kan zeer handig zijn. Het grote voordeel is dat elke webbrowser zijn eigen systeem-

middelen gebruikt om de code uit te voeren, de belasting rust dus niet meer bij de server.

De nadelen zijn dat de gebruiker niet kan verhinderd worden om je (waardevolle?) broncode te zien en dat je niet

in staat bent toegang te krijgen tot lokale bestanden, directories of databanken. Het systeem van de bezoeker kan

ook extra belast worden door de verwerking van de gegevens. Als er geen al te complexe berekeningen gebeuren

is dit nadeel echter te verwaarlozen. Het grootste nadeel is comptabiliteit. Het is noodzakelijk het resultaat van

het script te controleren op de verschillende browsertypes en -versies.

Tijdens het ontwerp van een website kun je gebruik maken van zowel de sterktes als de zwakheden van beide

scripting systemen om zo een optimaal resultaat te krijgen.

In de twee volgende paragrafen worden de server-sided en client-sided scripting talen besproken die zullen

gebruikt worden tijdens het ontwerp van de nieuwe website.

1.5 Java Server Pages (server-side scripting)

Java Server Pages of JSP is een open standaard voor het gebruik van Java binnen HTML documenten.. Wanneer

een JSP document, te herkennen aan de extentie jsp, wordt opgevraagd zal de server dit document eerst



compileren tot een servlet. Het servlet wordt vervolgens in de cache van de server opgeslagen. Hierdoor moet het

JSP document niet steeds opnieuw gecompileerd worden als er een nieuwe aanvraag binnenkomt.

De transformatie van een JSP document naar een generiek Java servlet is de grote troef van JSP. Hierdoor krijgt

elk JSP document alle mogelijkheden die Java biedt. Een standaard JSP document kan sessieobjecten, cookies,

databanken, … verwerken. De functionaliteit kan nog verder worden uitgebreid door Java packages in te laden.

De belangrijkste packages worden standaard meegeleverd bij Java, bijvoorbeeld java.math of java.SQL.

Bovendien is het mogelijk om zelf objecten, functies en packages te ontwikkelen.

De implementatie van Java in JSP documenten gebeurt hoofdzakelijk via scriptlets. Dit zijn kleine blokjes Java

code tussen speciale tags. Als het JSP document veel code bevat is het aangewezen om over te stappen naar

JavaBeans of een servlet. Hiervoor is echter een grondige kennis over Java nodig. Maar met deze aanpak kan de

code overzichtelijker en beter onderhoudbaar blijven.

Tag Gebruik

<% ... %> Invoegen van Java code in het JSP document

<%! ... %>

Invoegen van functies en initialiseren van

variabelen.

Het bereik van de funtie is beperkt tot de huidige pagina.

<%= ... %> De verkorte notatie om een variabele af te

drukken.

Tabel 1: Java in een JSP document

Een verdere uiteenzetting van JSP wordt niet gegeven. Deze topic wordt enkel aangehaald omdat JSP gebruikt

werd tijdens het ontwerp van de nieuwe website. Voor een diepgaande uitleg over JSP wordt verwezen naar

bestaande literatuur (boek / electronisch). Tijdens de uitwerking van de gebruikte strategiëen wordt de specifieke

JSP-broncode besproken en geïllustreerd.

1.6 Javascript (cl ient-side script ing)

Een scripttaal maakt het mogelijk om een statische website om te vormen naar een dynamisch geheel. Zuivere

HTML documenten zijn per definitie statisch, HTML is immers een markup language. Er is dus weinig of geen

interactie mogelijk tussen het document, een ander document, reeds gekende informatie of de gebruiker. Een

HTML document aangevuld met een script kan deze interactie echter gemakkelijk aan.

Hoewel een scripttaal op een programmeertaal lijkt is het geen volwaardige programmeertaal. Een scripttaal is

meestal een vereenvoudigde versie van een reeds bestaande programmeertaal. Het meest opvallende voorbeeld

hiervan is de initialisatie van variabelen. Bij een programmeertaal moet er steeds een datatype opgegeven

worden, bijvoorbeeld int of float. Een scripttaal werkt echter met ‘loosely based variables’. Men is niet verplicht

een datatype aan te geven of zelfs te initialiseren. Een ander vereenvoudiging is de beperking van

mogelijkheden. Uit veiligheidsoverwegingen zijn bepaalde ongewenste of gevaarlijke acties niet mogelijk.

Hierdoor is het niet mogelijk dat een zuiver script schade veroorzaakt aan het systeem van de bezoeker.

Javascript is een platform-onafhankelijke, ”event-driven”, programmeertaal die ontwikkeld is door Netscape

Communications Corp. en Sun Microsystems. Javascript is verwant aan Suns’ object geöriënteerde

programmeer-taal Java. Hoewel ze goed samenwerken zijn er technisch, functioneel en qua gedrag sterke



verschillen. Javascript is nuttig om interactiviteit toe te voegen aan websites. De scripts kunnen ingebed worden

in de HTML-bestanden, simpelweg door de scriptcode te omsluiten door een <script></script> tag.

Javascript is een “interpreted language”. Dit betekent dat de scripts uitgevoerd worden zonder voorafgaande

compilatie (i.t.t. JSP), d.w.z. zonder omzetting van de scripttekst in syteemafhankelijke machinecode. De

browser van de gebruiker interpreteert (analyseert ) het script en voert het meteen uit.

Javascript wordt ondersteund door de volgende browsers.

• Netscape Navigator (te beginnen met versie 2.0)

• Microsoft Internet Explorer (te beginnen met versie 3.0)

• Elke andere browser die een JavaScript interpreter heeft geïmplementeerd (bv. Opera)

In de praktijk is Javascript een terechte universele extensie geworden van HTML dat de gebruiker, door middel

van “event handling” en client-side uitvoering van code, van interactiviteit voorziet.

Een verdere uiteenzetting van JavaScript (syntax / gebruik) wordt niet gegeven. Deze topic werd hier enkel

aangehaald omdat JavaScript gebruikt werd tijdens het ontwerp van de nieuwe website. Voor een diepgaande

uitleg over JavaScript wordt verwezen naar bestaande literatuur.[8][9] Tijdens de uitwerking van de gebruikte

strategiëen wordt de specifieke JavaScript-broncode besproken en geïllustreerd.

1.7 MySQL

MySQL is het meest populaire “open source” SQL databankbeheersysteem dat er is. “Open source” software

betekent niet enkel dat het voor iedereen mogelijk is het te gebruiken en te wijzigen. Het is bovendien gratis te

downloaden en installeren.

Een databank is een gestructureerde verzameling van informatie. Dit kan gaan van een simpele boodschappen-

lijst over een CD verzameling tot een grote ingewikkelde bedrijfsdatabank. Een databankbeheersysteem (zoals

mySQL server) maakt het mogelijk data toe te voegen, te verwerken en te bekijken. Deze beheersystemen spelen

een zeer belangrijke centrale rol als “stand-alone utility” of als onderdeel van andere toepassingen.

MySQL is een relationeel databankbeheersysteem en bevat de data in aparte tabellen. Dit draagt bij tot snelheid

en flexibiliteit. De tabellen kunnen gelinked zijn door vooraf gedefiniëerde relaties. Dit maakt het mogelijk om

op verzoek data te combineren vanuit verschillendende tabellen.

MySQL is een krachtige client/server implementatie die bestaat uit een server daemon mysqld en veel

verschillende client programma's en libraries.

SQL staat voor “Structured Query Language”, de algemeen aanvaarde taal om gegevens in databanken te

bewerken en op te vragen.

Een verdere uiteenzetting van (my)SQL wordt niet gegeven. Deze topic werd hier enkel aangehaald omdat

(my)SQL gebruikt werd tijdens het ontwerp van de nieuwe website. Voor een diepgaande uitleg over (my)SQL

wordt verwezen naar bestaande literatuur.[12][13] Tijdens de uitwerking van de gebruikte strategiëen worden

specifieke (my)SQL statements besproken en geïllustreerd.

8 Hoofdstuk 2 Doelstelling


H o o f d s t u k 2 D O E L S T E L L I N G

Formal Methods Europe (FME) is een organisatie met als missie de promotie en het ondersteunen van industrieel

gebruik van formele methoden voor de ontwikkeling van computersystemen. De huidige website van deze

organisatie voldoet echter niet meer aan de hedendaagse normen inzake website-ontwerp.

Binnen dit eindwerk is het de bedoeling de bestaande website van FME (http://www.fmeurope.org) te

vervangen door een nieuwe, te ontwikkelen website. Hierbij zal aandacht besteed worden aan zowel de vorm en

de inhoud als de technische aspecten van een dergelijke website. De volgende onderdelen moeten gerealiseerd

worden:

• algemene informatie over FME

• informatie i.v.m. symposia

• bekendmaken van bijeenkomsten

• bekendmaken van vacatures

• administratieve module

9 Hoofdstuk 3 Gebruikte strategieën en technologieën


H o o f d s t u k 3 GE B R U I K T E S T R A T E G I Ë E N E N T E C H N O L O G I Ë E N

3.1 Studie oude website Formal Methods Europe

De oude, te vervangen website van Formal Methods Europe (www.fmeurope.org) bevindt zich op een UNIX

webserver aan de Technische Universiteit Delft in Nederland. Deze server wordt beheerd door West Consulting

B.V. (www.west.nl).

De oude website is opgebouwd uit frames en ziet er schematisch als volgt uit:

FME logo

fmelogo.htm

Tekst

fme.htm

Nieuws

news.htm

Menu-systeem

fmemenu.htm

scrollbars

Tabel 2 Opbouw oude website

De corresponderende frameset HTML-code is als volgt opgebouwd:

<frameset framespacing="0" border="false" framebord er="0" cols="193,*,17%">

<frameset rows="110,*">

<frame SRC=" fmelogo.htm " NAME="fmelogo" MARGINHEIGHT="5" MARGINWIDTH="1"

SCROLLING="no" style="background-color: rgb(25 5,255,255)">

<frame SRC=" fmemenu.html " NAME="Index" MARGINHEIGHT="5" MARGINWIDTH="1"

scrolling="auto">

</frameset>

<frame SRC=" fme.htm " NAME="fmemain" scrolling="auto" marginwidth="6" m arginheight="16">

<frame name="news" src=" news.htm " scrolling="auto" marginwidth="6" marginheight="16 ">

<noframes>

<body>

</body>

</noframes>

</frameset>

Enkel het frame fme.htm en news.htm ondersteunen scrollbars en kunnen zich dus aanpassen aan verschillende

schermresoluties.



Verder zal kort de lay-out van de oude website besproken worden.

Een screenshot van de indexpagina (zie figuur 1) van de oude website is te zien in onderstaande figuur (het

menu-item “Formal methods” is uitgeschoven). De verschillende onderdelen zoals in bovenstaand schema

getoond worden zijn hier duidelijk te zien.

Figuur 1: screenshot indexpagina oude website FME

3.1.1 Menu-systeem

De Javascriptcode van het menusysteem wordt niet besproken. Het menusysteem is dynamisch maar niet

gemakkelijk aanpasbaar, het nieuwe menusysteem moet dat wel zijn.

3.1.2 Lay-out

Naast de frame-gebaseerde opbouw van de oude site valt een sobere opmaakstijl op. Er wordt gebruik gemaakt

van een Cascading Style Sheet (default.css), het basislettertype (Verdana) zorgt ervoor dat alles goed leesbaar is.

Er is weliswaar inconsistentie in de opbouw en het gebruik van tabellen. Sommige belangrijke items zoals

“Organisations” en “FME Symposia” worden niet in tabelvorm gezet wat leidt tot een onoverzichtelijk geheel.

Verder zijn twee subitems van het “Formal methods”-hoofdmenu item zeer lange webpagina’s waar de bezoeker

zeer vlug in kan verdwalen. Dit zijn maar enkele belangrijke opmerkingen waarmee rekening is gehouden tijdens



het ontwerp van de lay-out van de nieuwe site. Samen met belangrijke webstatistische gegevens die hierop

volgend besproken worden, is het nieuwe ontwerp ontwikkeld.

3.2 Webstatistieken Formal Methods Europe

Hoeveel mensen bezoeken de website? Welke pagina's bekijken ze het meest? Waar komen ze vandaan? Welk

type browser gebruiken ze?

Nedstat (www.nedstat.com) geeft op deze - en op heel veel andere vragen - duidelijke en betrouwbare

antwoorden. De website Formal Methods Europe maakt gebruik van het freeware product Nedstat Basic 3.0 als

bezoekers-teller. Daarnaast worden verscheidene meetgegevens bijgehouden over de site: pageviews per uur, per

dag, per week en per maand, herkomst van de bezoekers (land, stad, provider, bedrijf), overzicht van de laatste

tien bezoekers, voorspelling van het aantal bezoekers voor vandaag, …

Het is op basis van deze meetgegevens dat wij ons een beeld hebben proberen te vormen van de doorsnee

bezoeker. Aan de hand van dit beeld hebben we dan de volledig nieuwe webinterface ontworpen.

In de rest van deze paragraaf zullen we de relevante statistische gegevens bespreken die van doorslaggevend

belang zijn geweest in het verdere verloop van onze scriptie.

De dagelijkse meetgegevens voor de website Formal Methods Europe (www.fmeurope.org) zijn terug te vinden

op de volgende URL: http://v1.nedstatbasic.net/s?tab=1&link=1&id=988229.

Er zijn 5 grote onderdelen:

• Hier en nu:

Recentste gegevens over bezoekersaantal, laatste 10 bezoekers, pageviews per dag, land van herkomst.

• Wanneer:

Gegevens over aantal pageviews per week / maand / jaar, per weekdag, per uur.

• Waarvandaan:

Gegevens over continent / land van herkomst, steden, Internet Service Providers.

• Hoe:

Gegevens over gebruikte zoekmachine, zoekwoorden, via welke site, via welke link.

• Waarmee:

Gegevens over gebruikte browsers, besturingssysteem, geïnstalleerde plug-ins, schermresoluties.

De belangrijkste meetgegevens voor ons waren deze uit de onderdelen Hoe en Waarmee. Daarnaast was het wel

interessant om te weten dat de site een gemiddeld bezoekersaantal heeft van 30-45 bezoekers per dag, dat de site

het meest bezocht wordt rond 15.00u en het minst om 6.00u. en dat de meeste pageviews vanuit het Verenigd

Koninkrijk komen.

Om onze keuzes tijdens het ontwerp te staven hebben we gebruik gemaakt van een steekproef uit de

meetgegevens. We hebben gebruik gemaakt van de meetgegevens van 25 april 2002. De gegevens die wij

gebruikten zijn toch reeds gemiddelden die van dag tot dag practisch niet meer veranderen.

Een eerste belangrijke vraag tijdens het ontwerp van de nieuwe webinterface was welke browsers het meest

gebruikt werden door de bezoekers.



Uit de gegevens (zie figuur 2) blijkt dat de Micorsoft Internet Explorer Browser 5.x / 6.x samen door 77.1% van

de bezoekers gebruikt worden. Netscape Navigator 3.x / 4.x / 6.x zijn samen goed voor bijna 20%, terwijl de

Opera 6.x browser door 3% van de bezoekers gebruikt wordt.

De ontwikkeling van de nieuwe site werd hoofdzakelijk gericht op de Internet Explorer en Netscape gebruikers.

Browseroptimalisatie werd dan hoofdzakelijk gericht op Internet Explorer 5.x / 6.x. en Netscape 4.x / +.

Een tweede belangrijk punt was de gebruikte schermresoluties. Uit de meetgegevens (zie figuur 3) blijkt dat

ruim 50% van de bezoekers een schermresolutie heeft van 1024 pixels x 768 pixels. Een goed kwart van de

bezoekers werkt op 800 x 600. Ongeveer 17% heeft een resolutie groter of gelijk aan 1280 x 1024. We hebben

de site zo geconstrueerd dat alles optimaal zichtbaar was (m.a.w. zonder horizontale schuifbalk) voor resoluties

van 800 x 600 en hoger.

Browsers

Internet Explorer 5.x 40.0 %

Internet Explorer 6.x 37.1 %

Netscape 6.x 8.6 %

Netscape 4.x 8.6 %

Opera 6.x 2.9 %

Netscape 3.x 2.9 %

Totaal 100.0 %

Figuur 2: procentueel gebruik per browser-type

Schermresoluties

1024 x 768 51.4 %

800 x 600 25.7 %

>= 1280 x 1024 17.1 %

640 x 480 2.9 %

Onbekend 2.9 %

Totaal 100.0 %



Figuur 3: procentueel gebruik schermresolutie

3.3 Opbouw nieuwe website Formal Methods Europe

Op basis van bovenstaande studie en meetgegevens hebben we een volledig nieuwe webinterface ontworpen. De

opbouw en inkleding ervan bestond uit een vijftal grote fasen:

• Fase 1: ontwikkeling HTML constructie

• Fase 2: optimalisatie en uniformisering opmaak via Cascading Style Sheets

• Fase 3: creatie van mySQL databank

• Fase 4: creatie jsp pagina’s voor de bevraging van mySQL databank

• Fase 5: afwerking website met Flash intro

3.3.1 Fase 1: ontwikkeling HTML constructie

Het nieuwe raamwerk van de webinterface is volledig opgebouwd aan de hand van de markuptaal HTML. Alle

code is geschreven met behulp van het software product Macromedia Dreamweaver 4.0. Onderstaand schema

toont de hoofdelementen en de plaatsing ervan. Op basis van deze constructie werd trouwens een template ont-

wikkeld zodanig dat de webmasters in de toekomst gemakkelijk nieuwe pagina’s kunnen invoegen. Hieronder

zal elk element in detail besproken worden.

FME banner + FME logo

menu-systeem

‘divider’

?

Tekst

Submenu

‘divider’

copyright

Tabel 3 Opbouw nieuwe website

De volledige webinterface is ontworpen aan de hand van tabellen en geneste tabellen. De keuze van een

tabellaire opbouw over een frame-opbouw kan als volgt verklaard worden. Eén manier een pagina in te delen is

het gebruik van één tabel die verdeeld is in één of meerdere kolommen (en/of rijen). Daar bonvenop kun je de

tabellaire structuur ook gebruiken binnen een pagina om specifieke informatie te organiseren. Dit kan gewone



data zijn maar het is ook nuttig om bijvoorbeeld tekeningen en tekst te aligneren. Op het gebied van grafische

opsmuk van een site is het gebruik van tabellen onklopbaar: je kan opgesplitste tekeningen terug aan elkaar

“lijmen” – zonder een pixel te verliezen tussen de gesplitste delen. Dit is niet mogelijk met en tussen frames.

Het gebruik van frames daarentegen is aan te raden voor eenvoudige documentatieve sites. Alhoewel, de browser

van Netscape voegt één pixel toe aan de buitenkant van elk frame en het frame verandert (lichtjes) zijn eigen

breedte wanneer het het browser scherm “geresized” wordt tot volledige schermgrootte. Hetgeen met frames kan

gemaakt worden is bijna altijd te maken met tabellen.

Het gebruik van frames heeft verschillende nadelen. Eén van de meest belangrijke is dat zij de lay-out van een

site kan wijzigen; de pagina die je aan het bekijken bent wordt niet correct weergegeven in de (horizontale)

schuifbalk van de browser. Verder worden frames niet ondersteund door sommige oudere, en nog steeds

gebruikte browsers. Daarom moet men steeds een “no-frames” versie van de website behouden . Waarom dubbel

werk doen! Een laatste opmerking is dat zelfs met de moderne browsers, frames er afschuwelijk uitzien als het

browserscherm niet is ingesteld op de correcte grootte.

Een ander argument dat leidde tot de keuze van tabellaire opbouw was het gedrag van zoekrobots. Zoekrobots of

“search engines” indexeren een volledige site. Dus ook de enkelvoudige pagina’s die eigenlijk deel uitmaken van

een frames lay-out. Het is dan mogelijk dat mensen een willekeurige pagina terugvinden in het zoekresultaat in

plaats van de homepagina met de frameset.

Het HTML raamwerk van onze webinterface bestaat uit drie grote onderdelen. Het eerste onderdeel bevat de

banner, het logo en het menusysteem en zit vervat in een eerste tabelstructuur. Het tweede onderdeel bevat dan

de eigenlijke tekst en het submenu-systeem. Samen met het derde onderdeel (de copyright balk onderaan) zitten

deze twee onderdelen in een tweede tabelstructuur die nauw aansluit met de eerste.

Een screenshot van een pagina (zie figuur 4) van de nieuwe website is te zien in onderstaande figuur.



Figuur 4: screenshot pagina nieuwe website FME (formal.htm)

Hier volgt nu de bespreking van de verschillende onderdelen van de HTML constructie van de nieuwe

webinterface:

3.3.1.1 FME banner

De hoofdbanner van de nieuwe website is ontworpen met het softwarepakket Adobe Photoshop 6.0. De

afmetingen van de figuur zijn: 500 x 75 pixels. De figuur bestaat uit drie lagen. De eerste laag is de

achterliggende gradiëntlaag (van links naar rechts) met een “fading” gradiënt van de kleur donkerblauw (HEX

#003366) naar wit (HEX #FFFFFF). De laag daarboven bestaat uit willekeurig gekozen figuren en formules die

te maken hebben met het onderwerp ”formele methoden”. Deze formules hebben geen betekenis in hun

geplaatste context en zijn met opzet minder goed leesbaar gemaakt. Zij moeten enkel het karakter van de site

aanduiden. De bezoeker zal direct een verband kunnen leggen tussen wat gezien wordt in de banner en over wat

de site zal gaan, tenminste als de bezoeker vertrouwd is met het onderozeksdomein. De bovenste laag bestaat uit

de tekst “Formal Methods Europe”, gemaakt in het lettertype “Verdana”, 35 pt groot, met als effecten

“dropshadow” (zwart) en “stroke” (zwarte omlijning letters). Het woord “Europe” is met opzet rood gemaakt om

de nadruk te kunnen leggen op het Europees gericht karakter van de organisatie.

3.3.1.2 FME logo



Een nieuw FME logo is eveneens ontworpen in Adobe Photoshop 6.0. De figuur is 150 x 75 pixels groot. Er is

superpositie van twee lagen: de eerste laag bevat de Europese sterren die wat gekanteld zijn om perspectief te

geven en om ervoor te zorgen dat de tweede laag, bestaande uit de afkorting van de organisatie, als het ware

doorheen de Europese sterren zit.

3.3.1.3 Menu-systeem

Het dynamisch menu is een freeware Javascript gebaseerd systeem en bestaat uit twee bronbestanden (js files).

Het ene beschrijft de werking en opbouw van het menu-systeem (mmenu.js), het andere de inhoud en lay-out

(newmenu_array.js). Een gedetailleerde uitleg over het menu volgt later. De HTML broncode van de nieuwe

webpagina’s bevat enkel de relatieve link/referentie naar de plaats waar de Javascript files zich bevinden op de

webserver. De verwijzing staat binnen de head-tag van de HTML code en ziet er als volgt uit:

<SCRIPT type=text/javascript language=JavaScript sr c=" newmenu_array.js "></SCRIPT>

<SCRIPT type=text/javascript language=JavaScript sr c=" mmenu.js "></SCRIPT>

3.3.1.4 Divider: decoratieve scheiding menu-tekst

De scheidende figuur tussen het menu en de eigenlijke tekst is ontworpen met het softwarepakket Adobe

Photoshop 6.0. De figuur is 400 x 30 pixels groot en bevat een tweelagige structuur. De onderste laag is een

gradiëntlaag (van links naar rechts) met een “fading” gradiënt van de kleur lichtblauw (HEX # 7F8EB0) naar wit

(HEX #FFFFFF). De bovenste laag is een effectlaag op de onderste en stelt het “interlace” (kleur wit) effect

voor. Hierdoor krijgt men een soort van horizontaal in elkaar gevlochten effect. De bedoeling van deze figuur

(‘divider’) is een aangename overgang verzorgen tussen de 3 grote onderdelen van het HTML raamwerk.

3.3.1.5 Tekst

Dit onderdeel bevat de eigenlijke informatie/inhoud van de website (tekst, tabellaire info) en toont alle

informatie in verband met een specifiek item.

3.3.1.6 Submenu

Het submenusysteem toont de titel van het onderdeel waar de bezoeker op terecht is gekomen en toont de

eventuele links uit het Javascript hoofdmenu-systeem die aan dit onderdeel zijn gekoppeld. Dit is de enige

redundatie die we hebben ingebouwd tijdens de ontwikkeling van de webinterface. Het zorgt voor een snelle en

gebruiksvriendelijke overgang tussen verschillende onderdelen van een specifiek hoofditem. Dit omdat het vrije

menu standaard enkel de hoofditems toont en niet de onderdelen ervan. Deze zijn enkel zichtbaar door interactie

van de bezoeker met het menu-systeem (zie figuur 4). Het submenu is ook dynamisch opgebouwd aan de hand

van Javascript. Dit zorgt ervoor dat telkens het hoofdmenu aangevuld wordt, het submenu mee verandert. Een

gedetailleerde bespreking van dit script volgt later.

De HTML broncode van de nieuwe webpagina’s bevat enkel de relatieve link/referentie naar de plaats waar de

Javascript file zich bevinden op de webserver. De verwijzing staat binnen de head van de HTML code en ziet er

als volgt uit:



<SCRIPT type=text/javascript language=JavaScript sr c=" printSubMenu.js "></SCRIPT>

3.3.1.7 Divider: decoratieve scheiding tekst-copyright

Dit is dezelfde figuur als de “decoratieve scheiding menu-tekst” en heeft dezelfde bedoeling.

3.3.1.8 Copyright

Deze copyright balk onderaan de HTML constructie sluit deze als het ware af. Het belang van deze balk is dat

het tevens de authenticiteit en originaliteit van de website bepaalt.

3.3.2 Fase 2: optimalisatie en uniformisering opmaak via Cascading Style Sheets

Na het ontwikkelen van een overkoepelende HTML constructie werd de invulling van de inhoud van de pagina’s

behandeld. Daarbij moet onderscheid gemaakt worden tussen de statische pagina’s, die geen informatie bevatten

die regelmatige gewijzigd wordt, en de dynamische pagina’s, die dat wel hebben. De statische pagina’s (.htm)

bestaan uit pure HTML code, terwijl de dynamische (.jsp) uit een combinatie van HTML en JSP bestaan. Deze

laatste pagina’s werken dan ook samen met een mySQL databank om specifieke informatie te verwerken.

Deze twee types pagina’s werden op het gebied van lay-out geoptimaliseerd door gebruik te maken van een

Cascading Style Sheet (CSS).

Er werden verschillende stijlen gecreëerd die in een style sheet werden geplaatst (fme.css). In de head van de

HTML broncode vind je dan ook de referentie terug naar die externe stylesheet:

<link rel=StyleSheet href="fme.css" type="text/css" media=screen>

Een externe style sheet kan gelinkt worden aan een HTML document door middel van een <link> element. De

<link> tag wordt dus in de head van het document geplaatst. Het optionele type -attribuut wordt gebruikt om een

mediumtype (text/css voor een Cascading Style Sheet) te specifiëren zodanig dat browsers bepaalde style sheet

types die zij niet ondersteunen, kunnen negeren. Een ander optioneel attribuut is het media -attribuut, dat het

medium specifiëert waarop de style sheets moeten toegepast worden. Een mogelijk waarde is “screen” en staat

voor de presentatie op niet-gepagineerde computerschermen. Er werd trouwens gekozen voor dit media-type

omdat Netscape Navigator 4.x elke gelinkte of geïntegreerde style sheet met een ander mediatype dan “screen”

gewoonweg negeert. Het rel -attribuut wordt gebruikt om de relatie tussen het gelinkte bestand ,de style sheet, en

het HTML document te definiëren. De waarde StyleSheet specifieert een persistente stijl en wordt altijd

toegepast wanneer de style sheet geactiveerd is.

De door ons gebruikte stijlen zijn als klassen geconstrueerd, zodat ze toepasbaar zijn op verschillende HTML

opmaaktags en niet alleen gekoppeld zijn aan specifieke tags.

De style sheet is gemaakt met de style sheet editor TopStyle Lite 2.0, waarin de stijlen gecreëerd konden worden

aan de hand van een menu waarin alle stijlattributen geselecteerd konden worden samen met hun waarden.

Hieronder vind je de style sheet met alle stijlklassen die gebruikt zijn doorheen de nieuwe website.

a:link{color:#006699; text-decoration:none} a:active{color:#006699; text-decoration:none} a:visited{color:#006699; text-decoration:none}

Instelling hyperlinkkleuren



body { scrollbar-base-color: #CAD3E7; scrollbar-arrow-color: #000000; background-color: White;

}

.title { font-family: Verdana, Geneva, Arial, Helvetica, san s-serif;

font-weight: normal; font-size: 10pt; color: #003366; letter-spacing: 0.05em; } .titleright {

font-family: Verdana, Geneva, Arial, Helvetica, san s-serif; font-weight: bold; font-size: 10pt; color: #003366; letter-spacing: 0.05em }

.plain { font-family: Verdana, Geneva, Arial, Helvetica, san s-serif;

font-weight: normal; font-size: 8pt; text-align: justify; } .plainsingle {

font-family: Verdana, Geneva, Arial, Helvetica, san s-serif; font-weight: normal; font-size: 8pt; text-align:left; }

.tablehead { font-family: Verdana, Geneva, Arial, Helvetica, san s-serif; font-weight: bold; font-size: 8pt; text-align: center; color: #FFFFFF; background-color: #003366;

} .tablesingle {

font-family: Verdana, Geneva, Arial, Helvetica, san s-serif; font-weight: normal; font-size: 8pt; text-align: left;

}

.subtext { font-family: Verdana, Geneva, Arial, Helvetica, san s-serif; font-weight: normal; font-size: 8pt; color: #808080; text-align: center;

} .sublink {

font-family: Verdana, Geneva, Arial, Helvetica, san s-serif; font-weight: normal; font-size: 8pt; text-align: center;

}

. evenRow { font-family: Verdana, Geneva, Arial, Helvetica, sa ns-serif; font-weight: normal; font-size: 8pt; text-align: left; background-color: #FFFFFF; } . oddRow{ font-family: Verdana, Geneva, Arial, Helvetica, sa ns-serif; font-weight: normal; font-size: 8pt; text-align: left; background-color: #F6F6F6;

Zet achtergrondkleur wit + Verandert kleur vertikale scroll (enkel IE browser)

Twee titelstijlen

Twee platte tekst stijlen: - volledig uitgelijnd

(lange tekst) - links uitgelijnd

(enkele regels)

Twee tabelstijlen: - tabelhoofd - tabelelementen

Twee sub stijlen: - tekst onder figuur,… - link onder figuur,…

Twee tabelrij stijlen: - even rij - oneven rij



}

. button { background-color: #F6F6F6; font-family : Verdana, Geneva, Arial, Helvetica, s ans-serif; font-weight: bold; font-size: 10pt; }

.copyright { font-family: Verdana, Geneva, Arial, Helvetica, san s-serif; font-weight: normal; font-size: 8pt; color: #FFFFFF;

}

Tabel 4 Gebruikt CSS bestand

3.3.3 Fase 3: opzetten van mySQL databank

Nadat de HTML constructie samen met de opmaak via CSS voltooid was, zijn we begonnen met de creatie van

een mySQL databank. De keuze voor mySQL is vooral gebaseerd op het feit dat de uiteindelijke website zal

draaien op een UNIX webserver, en dat daarbij de keuze voor een algemeen en performant platform-

onafhankelijk database(management)systeem voor de hand lag.

Door de beperkte ervaring met mySQL, hebben we initieel de databank ontworpen met Microsoft Access 2000.

Eerst werd bepaald welke relevante informatie in de databank zou terechtkomen. We hebben ons gebaseerd op

de (quasi) tabellaire informatie van de originele website. Onderdelen zoals FME meetings, symposia, nieuws,

gebeurtenissen (events), organisaties (commerciële bedrijven, non-profit organisaties en universiteiten) en als

laatste vacante posities werden op consistente wijze in de databank gestopt (zie tabeldefinitie hieronder).

Via een freeware Microsoft Access add-in tool, MyAccess2000, was het mogelijk de MS Access 2000 databank

om te zetten naar een mySQL databank.

Uiteindelijk zijn er 7 mySQL databasetabellen gegenereerd in de mySQL database “fme”.

Database naam: fme

Database tabellen: (algemene definiëring velden – naam, datatype[lengte], toegelaten null-waarden)

access

Naam id username password level

Type int[11] char[255] char[255] int[11]

Null no no no yes

meeting

Naam Id begindate enddate meeting meetingurl material materialurl photosurl place

Type int[11] date date char[255] char[255] char[255] char[255] char[255] char[255]

Null No yes yes yes yes yes yes yes yes

symposia

Naam id date symposium sympurl place proceedings procurl photosurl

Type int[11] date char[255] char[255] char[255] char[255] char[255] char[255]

Null no yes yes yes yes yes yes yes

Copyright stijl

Query knop stijl



news

Naam id date news url

Type int[11] date char[255] char[255]

Null no yes yes yes

eve nts

Naam id begindate enddate event url comment place region

Type int[11] date date char[255] char[255] char[255] char[255] char[255]


organisations

Naam id name url comment place region type

Type int[11] char[255] char[255] char[255] char[255] cha r[255] char[255]

Null no yes yes yes yes yes yes

positions

Naam id type place info url deadline dateplaced region

Type int[11] char[255] char[255] char[255] char[255] date date char[255]


Tabel 5 Opbouw van de databank

Het id-veld staat ingesteld als auto-increment, wat wil zeggen dat telkens een nieuw record aan een tabel wordt

toegevoegd de waarde van het id-veld automatisch met 1 wordt verhoogd.

De tabellen die het meest zullen moeten upgedate worden, zijn de events-, news- en positionstabellen.

De lengte van het char-datatype is berperkt tot 255 karakters, wat meer dan genoeg is. Een overvloed aan

informatie in een enkele cel is immers af te raden. Sommige velden zouden het met een minder aantal karakters

kunnen doen, maar om wat uniformiteit in de databank te steken, hebben we er voor gekozen elk char-datatype

te voorzien van 255 karakters.

Het is nu op basis van deze mySQL databank dat via de server-side scripting taal JSP (Java Server Pages) de

databank op zijn inhoud zal worden bevraagd. Op dynamische wijze zal HTML tabelcode gecreëerd worden met

als inhoud de informatie uit de bevraagde databanktabellen.

3.3.4 Fase 4: creatie jsp pagina’s voor de bevraging van mySQL databank

De keuze voor JSP (Java Server Pages) als server-side scripting taal is ook te verklaren door het feit dat de

uiteindelijke website zal draaien op een UNIX webserver en dat het streven naar platformonafhankelijkheid een

“must” is.

Wij hebben enkel gebruik gemaakt van specifieke databank-bevragingscode. De JSP code die gebruikt werd, kan

functioneel onderverdeeld worden in een vijftal fases:

(Onderstaande getoonde code is een sterk veralgemeende code om het principe van databankconnectie en –

bevraging te verduidelijken – verdere verduidelijking van de effectief gebruikte code volgt later bij de

gedetaileerde bespreking van de gebruikte scripts).

<%@ page contentType="text/html"%>



<%@ page import="java.sql.*"%>

<%

// Declaration of Connection, Statement and ResultS et variables

// which are going to be used during database con nection and

// data retrieval.

String connectionURL = "jdbc:mysql://localhost:33 06/[databasenaam]";

Connection connection = null;

Statement statement = null;

ResultSet rs = null;

Class.forName("org.gjt.mm.mysql.Driver");

connection = DriverManager.getConnection(connection URL,user,password);

statement = connection.createStatement();

rs = statement.executeQuery(querystring);

while (rs.next()) {

out.println(rs.getString(“veldnaam1”));


…

}

rs.close();

statement.close();

connection.close();

%>

3.3.4.1 Declaratie van lege Connection, Statement en ResultSet variabelen:

<%@ page contentType="text/html" %>

<%@ page import="java.sql.*" %>

→ de inhoud van de JSP pagina is pure tekst in HTML vorm

→ de java.sql.* package wordt geïmporteerd. Alle klassen en interfaces van de JDBC API zijn

gedefinieerd in de java.sql package

String connectionURL = "jdbc:mysql://localhos t:3306/[databanknaam]";

→ connectiestring wordt aangemaakt:

via de localhost (loopback interface: 127.0.0.1) op poort 3306 wordt via de JDBC-driver een connectie

met de plaatselijke mySQL server gecreëerd om de databank met naam databanknaam te kunnen

bevragen.


Statement statement = null;


→ Connection object gedeclareerd: dit object stelt de netwerkconnectie met de mySQL database voor.

→ Statement object gedeclareerd: hier wordt een SQL statement object gedefinieerd.

→ ResultSet object gedeclareerd: het resultaat van de SQL statement zal in dit object bewaard worden.

3.3.4.2 Creëren van een connectie met de mySQL server



Class.forName("org.gjt.mm.mysql.Driver");

connection = DriverManager.getConnection(connection URL,user,password);

→ Class.forName("org.git.mm.mysql.Driver") vertelt de DriverManager van het Connection object om

de MM.MySQL JDBC driver in te laden. De getConnection()-methode van de klasse DriverManager

wordt gebruikt om databank van connectiviteit te voorzien. Definiëring van de locatie van de databank

via de connectiestring en ingave van de gepaste, toegekende mySQL gebuikersnaam en paswoord

vervolledigen de verbinding.

3.3.4.3 Opstellen van specifieke tabelafhankelijke SQL statements

statement = conne ction.createStatement();

rs = statement.executeQuery(querystring);

→ We maken het Statement object klaar voor gebruik door middel van de createStatement()-methode

van het Connection object. Daarna voorzien we het met een SQL query waarmee we records wensen op

te halen uit een specifieke tabel van de mySQL database. De query wordt in string-vorm geschreven

(vorm: “SELECT * FROM ‘tabelnaam’”). Deze query haalt alle records met al hun velden uit de tabel

met naam ‘tabelnaam’. De stat.executeQuery()-methode geeft een ResultSet object terug waarin de

records steken die met de query zijn opgevraagd.

3.3.4.4 Afhalen van specifieke informatie uit de database

while (rs.next()) {



…

}

→ Met een while-loop lopen we doorheen de records die in de ResultSet steken. De ResultSet.next()-

metohde doet twee dingen: ten eerste geeft het een boolean terug (waar/vals) wat aanduidt of er nog

meer records zijn en ten tweede verschuift het de ‘cursor’ één rij verder zodanig dat als we een tweede

keer doorheen de while-lus lopen, we op een nieuwe rij zitten.

Binnen de while-loop gebruiken we de methode ResultSet.getString(“veldnaam”) om per record elk

veld van de tabel ‘tabelnaam’ op te halen in stringvorm.



3.3.4.5 Sluiten van de connectie

rs.close();

statement.close();

connection.close();

→ We sluiten alle objecten die we eerder hebben gecreëerd tijdens het opstellen van de connectie. Dit

zijn de ResultSet, Statement en Connection objecten.

In het volgende hoofdstuk zal de meer gedetailleerde jsp-code / mySQL bevragingscode besproken worden, waar

onder andere rekening wordt gehouden met meerdere links per veld, samenvoeging van corresponderende

URL’s,…

3.3.5 Fase 5: afwerking website met Flash intro

Na het ontwerp en implementatie van alle grote onderdelen (HTML raamwerk, CSS, mySQL databank, JSP)

werd de nieuwe website van een geanimeerde intro voorzien. Deze intro is ontwikkeld met het software product

Macromedia Flash 5.

3.4 Gedetail leerde bespreking gebruikte scripts

3.4.1 Menu systeem

We hebben ervoor gekozen de navigatiemiddelen te implementeren met een client-sided scripttaal. De belasting

op het systeem van de bezoeker is minimaal, er worden immers geen zware bewerkingen uitgevoerd. Bovendien

worden de navigatiemiddelen, in dit geval een menu, intensief gebruikt. Een server-sided oplossing zou dus

resulteren in een aanzienlijke datastroom van licht gewijzigde documenten.

Tot slot moesten we nog een scripttaal kiezen. De twee belangrijkste scripttalen zijn VBScript en JavaScript. De

eerste taal, VBScript, is een microsoft product die afgeleid is van programmertaal Visual Basic. De tweede taal,

Javascript, werd ontwikkeld door Netscape. Hoewel de naam suggereert dat er een link is naar Java is dat niet het

geval. Uiteindelijk hebben we gekozen om met Javascript te werken. De belangrijkste redenen hiervoor zijn:

• Eenvoudige en heldere syntax.

• Zeer uitgebreide standaard objecten

• Recursie wordt ondersteund

• Grondige en eenvoudige documentatie beschikbaar

• Mogelijkheid om objecten zelf te definiëren

Het belangrijkste navigatiemiddel in de nieuwe website is het menu systeem. Het zelf ontwikkelen van een menu

systeem voor een bepaald platform is op zich nog goed haalbaar. Het opbouwen van een quasi platform

onafhankelijk systeem daarentegen is technisch gezien een hele opgave. Iets wat trouwens moeilijk haalbaar is

binnen een termijn van zes weken. Daarom hebben we er voor gekozen om een dergelijk systeem van het net te

halen. Uiteindelijk hebben we gekozen voor een script van Andy Woolley, terug te vinden op



http://www.dynamicdrive.com. De broncode van het volledige menu systeem is terug te vinden in de appendices

B en C.

Het belangrijkste criterium hierbij was de browsercompatibiliteit en een eenvoudig onderhoud. De technische

elegantie beschouwen we eerder als bijkomstig.

De voordelen van het script zijn:

• een zeer goede compabiliteit. Zowat alle moderne browsers worden ondersteund, gaande van Internet

Explorer tot Konqueror.

• een zeer eenvoudig onderhoud. De opmaak en inhoud zijn bijna volledig gescheiden. De inhoud is terug

te vinden in het bestand en newmenu_array.js, de opmaak in het bestand mmenu.js.

• de mogelijkheid om spin-offs te maken van het script. Een voorbeeld hiervan is de dynamische sitemap

(zie later).

Het gekozen script heeft echter een groot nadeel:

• er wordt niet object georiënteerd geprogrammeerd. Het gevolg hiervan is een wirwar van if-statements

om een onderscheid te maken tussen de verschillende browsers. In deze optiek hebben we ervoor

gekozen enkel de inhoud te bespreken en niet het menu systeem zelf.

Zoals eerder gezegd is de inhoud terug te vinden in het bestand newmenu_array.js. In dit bestand vinden we twee

belangrijke types variabelen terug, de PropertyX rij en de MenuX rij.

3.4.1.1 PropertyX rij

De propertyX rij bevat, zoals de naam al doet vermoeden, de elementaire opmaak van het menu systeem. De X

in de naamgeving duidt op het volgnummer. Het aantal property rijen is in feite onbeperkt; praktisch gezien zijn

ze echter beperkt tot het aantal menu items. Met andere woorden: elk onderdeel van het menu kan een eigen

opmaak hebben.

De opmaak van een property rij is steeds als volgt:

X Eigenschap Inhoud

0 Standaardkleur van het opschrift Hexadecimale kl eurwaarde, #RRGGBB

1 Standaardkleur van de achtergrond Hexadecimale kl eurwaarde, #RRGGBB

2 Kleur van het opschrift bij onMouseOver Hexadecim ale kleurwaarde, #RRGGBB

3 Kleur van de achtergrond bij onMouseOver Hexadeci male kleurwaarde, #RRGGBB

4 Kleur van de rand van een menu item Hexadecimale kleurwaarde, #RRGGBB

5 Grootte van het opschrift Puntgrootte

6 Stijl van het opschrift Italic-Normal- Oblique



7 Gewicht van het opschrift Lighter-Bolder-Normal-B old

8 Lettertype van het opschrift Arial-Times New Roma n-…

9 De opvulling (padding) van het menu item Pixel wa arde

10 Afbeelding of er submenu's zijn URL van een afbe elding

11 Randbreedte bij een 3D rand Pixel waarde

12 Voorgrondkleur van de 3D rand Hexadecimale kleur waarde, #RRGGBB

13 Achtergrondkleur van de 3D rand Hexadecimale kle urwaarde, #RRGGBB

Een niet gebruikt veld moet leeg blijven

Tabel 6 Opbouw van een propertyX rij

3.4.1.2 MenuX array

De menuX rij bevat, zoals de naam eveneens doet vermoeden, de inhoud en elementaire opmaak van een menu

item. De eerste 15 waarden, van 0 tot en met 14, bevatten de elementaire opmaak van het menu zelf. De hogere

waarden bevatten de eigenlijke inhoud.

De betekenis van de eerste 15 waarden zijn:

X Eigenschap Inhoud

0 Absolute Y-waarde voor het eerste menu item Pixel waarde

1 Absolute X-waarde voor het eerste menu-item Pixel waarde

2 Breedte van een menu item Pixelwaarde

3 Randbreedte van een menu item Pixelwaarde

4 Uitlijning van het menu zelf Left-Center-Right

5 Opmaak, verwijzing naar propertyX rij propertyX

6 Blijvende zichtbaarheid van het menu 0 of 1

7 Uitlijning van het opschrift Left-Center-Right

8 Filter op het opschrift bij onClick String

9 Schuift het menu mee bij scrolling 0 of 1

10 Richting van het menu (horizontaal of verticaal) 0 of 1

11 Blijft het menu opengeklapt 0 of 1

12 Uitlijning voor de figuur die aangeeft of er

submenu's zijn Left-Center-Right

13 Afbeelding of er submenu's zijn URL van een afbe elding

14 Voorbehouden voor toekomstig gebruik Geen

Een niet gebruikt veld moet leeg blijven

Tabel 7 Opbouw van een menuX rij



De verdere inhoud van een menuX rij is afhankelijk van de opbouw van het menu. Hierbij zijn er vier

mogelijkheden:

• mogelijkheid 1: het menu item bevat geen submenu en is aanklikbaar

• mogelijkheid 2: het menu item bevat geen submenu en is niet aanklikbaar

• mogelijkheid 3: het menu item bevat een submenu en is aanklikbaar

• mogelijkheid 4: het menu item bevat een submenu en is niet aanklikbaar

De tweede mogelijkheid is weinig relevant, er gebeurt immers niets als je een dergelijk menu item aanklikt.

Voor elk menu item zijn er vijf elementen voorzien in de menuX rij. De opvulling van deze vijf elementen

verschilt van geval tot geval, zoals hieronder wordt geïllustreerd.

Meestal zijn de waarden in deze elementen meteen duidelijk, met uitzondering van de waarde show-menuX.

Deze waarde wordt gebruikt als een bepaald menu moet getoond worden als submenu. De maker van het menu

systeem heeft ervoor gekozen hier een string waarde in te voeren en niet een variabele menuX.

Tabel 8 Gebruik van een menuX rij

3.4.2 Submenu

Het navigeren gebeurt hoofdzakelijk met het menu of de sitemap. We hebben echter ook nog een bijkomend

(schijnbaar redundant) navigatiemiddel ingebouwd, het submenu (broncode zie appendix A). Op elke pagina

wordt het submenu van het hoofditem opnieuw weergegeven.

De functie printSubMenu() kan op twee verschillende manieren worden opgeroepen. Ofwel wordt er enkel een

string meegegeven, ofwel een string en een getal. De string bevat het opschrift van het item uit het hoofdmenu

Positie Inhoud Positie Inhoud

15+j*5 Opschrift van het menu-item 15+j*5 Opschrift van het menu-item

15+j*5+1 URL van de pagina 15+j*5+1

15+j*5+2 15+j*5+2

15+j*5+3 15+j*5+3

15+j*5+4 15+j*5+4

Mogelijkheid 1

Mogelijkheid 2

Positie Inhoud Positie Inhoud

15+j*5 Opschrift van het menu-item 15+j*5 Opschrift van het menu-item

15+j*5+1 show-menuX 15+j*5+1 show-menuX

15+j*5+2 URL van de pagina 15+j*5+2

15+j*5+3 15+j*5+3

15+j*5+4 15+j*5+4

Mogelijkheid 3

Mogelijkheid 4



die we zoeken. Binnen de variabele menu1 zoeken we naar een identiek opschrift. Om het script minder

foutgevoelig te maken passen we de methode toLowerCase( ) toe. Deze methode zorgt ervoor dat er geen

hoofdletters voorkomen in de string. Het verdere verloop van het script is analoog aan de functie showMap().

Het meegegeven getal zorgt ervoor dat er bij elke hyperlink een intern anker Europe en World komt.

Deze functie toont, zoals reeds gezegd, grote gelijkenissen met de functie showMap(). Er is eigenlijk maar één

wezenlijk verschil. De functie printSubMenu() controleert of een link naar de huidige URL wijst. Is dit het geval

dan wordt er geen hyperlink gevormd en wordt een extra figuur geplaatst.

Binnen Javascript kan men de URL via verschillende methodes bereiken. De belangrijkste zijn hierbij

document.url en window.location. Deze laatste is echter ontoegankelijk of "tainted".Dit is een interne beveiliging

binnen Javascrip, de referentie op www.netscape.com zegt hierover:

“Tainting prevents other scripts from passing information that should be secure and

private, such as directory structures or user session history. JavaScript cannot pass tainted

values on to any server without the end user's permission.”

3.4.3 Dynamische sitemap

Een sitemap vormt een essentieel onderdeel van elke website. Ze zorgt er immers voor dat de website op een

transparante wijze wordt afgebeeld. Een sitemap laat een gebruiker dus toe om zich snel te bewegen binnen de

website.

Doorgaans is een sitemap geen dynamische maar statische HTML pagina. Dit heeft een groot nadeel: de sitemap

is ongevoelig voor eventuele wijzigingen binnen de website. Bij elke update van de website moet er

gecontroleerd worden of de sitemap nog steeds actueel is. Vaak leidt dit tot onvolledige sitemaps met

ontbrekende of foutieve links.

Een betere oplossing is een dynamische HTML pagina. De sitemap past zich dan automatisch aan; eventuele

wijzigen beïnvloeden meteen de sitemap. Een dergelijke pagina beperkt niet enkel het onderhoud maar zorgt er

ook voor dat er geen foutieve links worden getoond.

Een dynamische pagina kan op twee manieren worden aangemaakt, server-sided of client-sided. We hebben

ervoor gekozen om client-sided te werken. In het menu systeem is alle nodige informatie reeds aanwezig om de

sitemap dynamisch op te bouwen. Eigenlijk maken we dus een alternatieve afbeelding van het menu systeem.

De broncode van de dynamische sitemap is terug te vinden in het bestand ‘showMap.js’

(broncode: zie appendix B).

3.4.3.1 showMap()

Dit is de belangrijkste functie binnen de dynamische sitemap. Het hoofdmenu, die steeds zichtbaar is, is

opgeslagen in de variabele menu1. Deze variabele wordt doorlopen met een for-lus. Hierbij worden de

hoofditems afgedrukt binnen een lijst, d.m.v. de tags <dl> en <dd>. Als er geen submenu is dan is de variabele

subItem gelijk aan "none", anders wordt de show-menuX waarde uit de variabele menu1 opgehaald.

Op het einde van elke iteratie wordt er nagegaan of subItem verschilt van "none". Is dit het geval dan wordt de

functie createEntry(menu) opgeroepen.



3.4.3.1.1 createEntry(menu)

Deze functie drukt de inhoud af van de variabele menu. Hierbij nemen we aan dat er binnen een submenu geen

nieuwe submenu's zijn. Dit zorgt ervoor dat de functie eenvoudig blijft en we geen recursie moeten toepassen.

3.4.3.1.2 selectMenu(showString)

Deze functie zet de meegegeven string showString om naar een variabele. Bij de bespreking van het menu

systeem werd er reeds vermeld dat een submenu wordt aangegeven door een string. Deze string is van de vorm

‘show-menuX’, waarbij de X wordt vervangen door een getal.

De omzetting van string naar variabele gebeurt als volgt. Eerst wordt het deel ‘show-‘ verwijderd met de functie

substr( ). De string is dan ‘menuX’, de naam van de variabele waar naar verwezen wordt. Om deze string om te

zetten naar een variabele gebruiken we de functie eval( ).

showString = showString.substr(showString.length- 5,showString.length-1);

return eval(showString);

3.4.3.1.3 validate(stringURL, v1, v2)

Deze functie controleert of de meegegeven URL al dan niet geldig is. De geldigheidsvoorwaarden zijn de

parameters v1 en v2.

3.4.4 JSP – bevraging mySQL databank

In dit onderdeel zullen de belangrijkste onderdelen van de gebruikte JSP code besproken worden. Soms zal er

wat redundante informatie voorkomen, maar dit zal het geheel dan beter kunnen verduidelijken. Wij hebben JSP

gebruikt als server-side scripting taal om een mySQL databank te bevragen. Het dynamisch karakter van de

nieuwe website komt tot uiting via twee implementaties.

Ten eerste werden JSP-pagina’s gecreëerd die alle velden van een databanktabel opvragen en integreren in een

HTML tabelstructuur (syposia.jsp, meetings.jsp, news.jsp, events.jsp, commercial.jsp, nonprofit.jsp,

universities.jsp, positions.jsp). Tevens wordt een implementatie voor databank-updating besproken.

Ten tweede werd een query-implementatie voorzien op alle bovenvernoemde databanktabellen en tevens geïnte-

greerd in de nieuwe website. De query laat toe te zoeken in de database op alle belangrijke onderdelen (datum,

plaats, streek, …) .

3.4.4.1 Bevraging van de FME-databank

Om toegang te krijgen tot een databank binnen een JSP pagina is het noodzakelijk de correcte packages op te

roepen, dit gebeurt via java.sql. Dit standaard package bevat de nodige application programming interface of

API. Deze API stuurt het ophalen en verwerken van gegevens uit een externe databron. Meer informatie over

deze API kun je online terugvinden op de Sun website (http://java.sun.com) of via JavaDoc.

Een package wordt als volgt opgeroepen binnen een JSP pagina:

<%@ page import="java.sql.*"%>

Eenmaal de package is ingeladen kan men de nodige variabelen/objecten aanmaken. Deze zijn:



Naam Object type Doel

connectionURL String Deze string bevat de URL van d e databank.

connection Connection Dit object wordt gebruikt om een

verbinding tot stand te brengen met een

databank.

Dankzij deze verbindin g is het mogelijk

alle SQL opdrachten uit te voeren op de

databank.

stat Statement Dit object wordt gebruikt om een statische

SQL opdracht uit te voeren.

rs ResultSet Dit object bewaart het resultaat van SQL

opdracht op een databank.

Tabel 9 Objecten nodig voor een connectie

De variabelen worden als volgt aangemaakt en gebruikt:

String connectionURL = "jdbc:mysql://localhost:33 06/ fme ";


Statement stat = null;


ResultSet rsDate = null; (Enkel indien datums gebruikt worden!)

connection = DriverManager.getConnection(connecti onURL, username, password);

stat = connection.createStatement();

In de voorlaatste regel wordt de verbinding definitief gemaakt met de methode getConnection() van het object

Connection. Deze methode is "overloaded", we gebruiken de versie met drie strings. Dit zijn respectievelijk de

URL van de databank, de gebruikersnaam en het paswoord. In de laatste regel wordt de variabele stat

klaargemaakt om een SQL opdracht te verwerken.

Meer informatie over deze objecten, hun eigenschappen en methodes zijn eveneens terug te vinden op de Sun

website of via JavaDoc.

Het tonen van een databank in HTML-vorm verloopt altijd volgens hetzelfde stramien. Daarom hebben we

ervoor gekozen om enkel de ‘meetings.jsp’ pagina te bespreken, de overige pagina's zijn immers zeer

gelijkaardig. De definiëring van de de databanktabel ‘meeting’ kan hoger terug gevonden worden. Zojuist werd

het initialiseren van de databank connectie besproken, dus gaan we er vanuit dat dit reeds gebeurd is.

De eerste stap is het invullen van de resultsets; dit gebeurt als volgt:

rs = stat.executeQuery("SELECT * FROM meeting");

stat = connection.createStatement();

String query = " SELECT date_format(begindate,'%D % M %Y') as bd,

date_format(enddate,’%D %M %Y') as ed FROM meeting ";

rsDate = stat.executeQuery(query);



In de eerste regel wordt de complete inhoud van de tabel ‘meeting’ in de variabele rs geplaatst. De tweede regel

zorgt ervoor dat het object stat opnieuw klaar is om een SQL opdracht te verwerken (namelijk voor het object

rsDate). De derde regel is enigszins complexer. De kolommen ‘begindate’ en ‘enddate’ van de databanktabel

‘meeting’ bevatten datums; de ruwe inhoud is van de vorm YYYY-MM-DD. Om het eindresultaat beter leesbaar

te maken wordt de opmaak gewijzigd binnen de SQL opdracht via een SQL specifiek datumformaat. Het is de

opgemaakte versie die aan de bezoeker zal getoond worden.

Voorbeeld:

Als de ruwe vorm 2002-05-07 is dan wordt de opgemaakte versie 7th may 2002.

Het is mogelijk om hetzelfde resultaat te verkrijgen met een enkele resultset. De java.sql package bevat de

methode getDate( ). Deze methode haalt een datum uit de tabel en vormt ze om naar een Date object binnen de

package java.util. Op zijn beurt heeft dit object dan weer de methode toLocaleString( ) om het formaat aan te

passen. Deze aanpak hebben we echter pas laat ontdekt en konden we dus niet meer tijdig implementeren. De

door ons gebruikte oplossing maakt echter meer gebruik van systeemmiddelen. Door de kleinschaligheid van de

databank is dit redundant gebruik van resultsets schijnbaar zo goed als verwaarloosbaar.

De tweede stap is het doorlopen van de resultsets. Dit gebeurt aan de hand van een while lus en de methode

ResultSet.next(). Deze controleert of er een volgende rij is binnen de resultset. Is dit zo dan krijg je een true terug

en verschuift de cusrsor naar de volgende rij.

while(rs.next() && rsDate.next()){

…

}

In de while lus wordt de resultset rij per rij afgelopen. Binnen elke iteratie kan dan de waarde van elk veld

worden opgevraagd. Dit gebeurt met de methode getString("kolomnaam") van het object ResultSet.

Bij de verwerking van elke rij worden er enkele zelfgemaakte functies gebruikt. Deze functies zijn

rowBackcolor( ), printDate( ) (indien datums voorkomen) en composedRow( ).

De functie rowBackcolor(counter) zorgt ervoor dat elke oneven rij een andere opmaak krijgt dan de even rijen.

Dit doen we om de leesbaarheid van de afgedrukte tabel ten aanzien van de bezoeker te vergroten. Deze functie

zorgt er voor dat elke oneven rij opgemaakt wordt volgens de CSS klasse oddRow (zie hoger).

De functie rowBackColor(counter) volgt hieronder:

static String rowBackcolor(int i){

if (i%2!=0)

return "<tr class='oddRow' height='40'>";

else

return "<tr class='evenRow' height='40'>";

}

De functie printDate(rs.getString("begindate"),rs.getString("enddate")) drukt de datum af van een FME-

meeting. Als er geen einddatum is dan wordt de volledige begindatum afgedrukt. Als er wel een einddatum is



dan wordt het jaar van de begindatum niet afgedrukt gevolgd door de volledige einddatum en gescheiden met

een ‘-‘ teken. Hieronder volgt de printDate-functie:

static String printDate(String begin,String end){

if (end==null)

return begin;

else

return begin.substring(0,begin.length()-5) + " - "+ end;

}

De functie composedRow(rs.getString("meeting"),rs.getString("meetingurl"),"<br>") maakt het mogelijk om

meerdere entries per veld te koppelen aan hun corresponderende url’s. De velden meeting en meetingurl kunnen

bestaan uit meerdere waarden. Deze waarden worden in de databank gescheiden door een ‘ ;’ teken. De functie

en in het bijzonder de while-lus binnen deze functie scheidt de afzonderlijke waarden per veld en laat ze

corresponderen met de gescheiden url’s. Lege velden worden opgevuld met een ‘non-breaking space’. De code

van de functie volgt hieronder:

static String composedRow(String subject, String url, String seperator){

String returnString = "";

int whereURL; int whereSubject;

while (url.indexOf(';')!=-1){

whereURL = url.indexOf(';');

whereSubject = subject.indexOf(';');

returnString = returnString+"<a href='"+url.substri ng(0,whereURL)+"'>"

+subject.substring(0,whereSubject)+"</a>"+seperator ;

subject = subject.substring(whereSubject+1,subj ect.length()-1);

url = url.substring(whereURL+1,url.length()-1);

}

String space = " ";

if (url.length()>0 && subject.length() > 0){

return returnString+"<a href='"+url+"'>"+subjec t+"</a>";

} else if (url.length()<=0 && subject.length()>0 ){

return subject;

} else

return space;

}

De derde en laatste stap is het sluiten en verwijderen van de aangemaakte objecten. Dit doen we om de

systeemmiddelen te sparen en eventuele conflicten te vermijden. De code is als volgt:

rs.close();

rsDate.close();

stat.close();

connection.close();

3.4.4.2 Query van de FME-databank



Bij het zichtbaar maken van de databank wordt steeds alle data weergegeven, met uitzondering van de sleutel id.

Natuurlijk kan in de JSP-code de ‘select statement’ verfijnd worden zodat enkel de recente informatie getoond

wordt. Sommige tabellen hebben echter een zeer omvangrijke inhoud. Om de toegankelijkheid van de site te

verhogen en het interactieve karakter ervan ten aanzien van de bezoeker te benadrukken, hebben we een reeks

aparte JSP pagina’s aangemaakt. Door middel van deze pagina’s kan de gebruiker dan zelf op een dynamische

wijze de databank bevragen. Net zoals bij het onderdeel “bevraging van de FME databank” bespreken we één

JSP pagina, namelijk de ‘Q-meeting.jsp’

De interface waarmee de gebruiker de databank bevraagt is een formulier. Dit formulier bestaat enkel uit HTML

tags. In de onderstaande tabel worden de verschillende HTML-tags kort toegelicht.

<form></form>

Alle elementen uit het formulier moeten tussen deze tags staan. Aangezien het

formulier verwerkt wordt op dezelfde pagina zijn de attributen method en

action facultatief.

<select name="begindateOrder">

<option> < </option>

<option> = </option>

<option selected> > </option>

</select>

De tag <select> plaatst een keuzelijst in het formu lier. Het attribuut name

maakt het mogelijk om later de informatie te kunnen scheiden.

Binnen de <select> tag worden de mogelijke waarden ingevuld. Dit gebeurt met

de tag <option>. Het attribuut selected geeft de fo cus aan een bepaalde

mogelijkheid.

<input type="text" name="begindate" size="24">

De tag <input> is de algemene tag voor een veld. Me t het attribuut type

bepaal je het soort veld, in dit geval een tekstvel d. Het attribuut name

dient om de informatie later te scheiden. Het attri buut size bepaalt hoe

groot het veld is, dit is echter niet de maximumlen gte.

<input type="radio" value="begindateA" name="order" >

Deze tag plaatst een radio button in het formulier. Het attribuut name heeft

hier echter een bijzondere betekenis. Als er meerde re radio buttons zijn met

dezelfde naam dan kan er enkel één aangevinkt staan . Het attribuut value

bevat de waarde die later zal verwerkt worden.

<input type="submit" value="Query">

Dit is een bijzondere tag. Het attribuut type zorgt ervoor dat dit de knop

wordt waarmee het formulier wordt verzonden. Het at tribuut value bevat het

opschrift voor de knop.

<input type="reset">

Dit is een bijzondere tag. Het attribuut type zorgt ervoor dat dit de knop

wordt waarmee de inhoud van het formulier wordt gew ist.

<input type="hidden" name="hiddenOne" value="someVa lue">

Dit is eveneens een bijzondere tag. Het attribuut type maakt dit veld

onzichtbaar. Het attribuut value geeft een waarde aan dit veld.

Tabel 10: De tags in een formulier



In onderstaande figuur (zie figuur 5) zie je een screenshot van de Q-meeting.jsp pagina., waar duidelijk de

bovenstaande besproken formulierelementen terug te vinden zijn.

Figuur 5: Query-pagina om de FME-meetings databanktabel te bevragen

Het is belangrijk dat enkel het query-formulier getoond wordt bij de eerste bevraging. Eén of ander

ongedefinieerd query-resultaat zou de gebruiker hinderen of zelfs verwarren. Daarom wordt in het formulier een

verborgen veld geplaatst, dit gebeurt met de attribuutwaarde hidden (zie ook tabel 2).

In de JSP pagina wordt eerst de waarde voor dit veld opgevraagd. De waarde voor dit veld is dan op dat moment

null. De gebruiker heeft immers nog geen informatie doorgestuurd naar de pagina. Daarom wordt de code die het

formulier verwerkt binnen een if structur geplaatst. In Java wordt dit dan:

if(request.getParameter("hiddenOne")!=null)

{

…

}

Eenmaal de gebruiker het formulier heeft ingevuld kan hij de databank bevragen door op de Query knop te

drukken. Op dat ogenblik wordt de inhoud van het formulier doorgestuurd naar het JSP document zelf.

Bijvoorbeeld:



De gebruiker heeft bij location ‘France’ ingetikt en wil stijgend sorteren op hetzelfde veld. Op dit ogenblik is de

URL www.fmeurope.org/Q-Meetings.jsp. Eenmaal de gebruiker op Query klikt verandert de URL, er wordt

een ? geplaatst gevolgd door alle velden en hun waarden. Alle velden zijn echter leeg met uitzonder van place en

sort. Het veld place bevat ‘France’ en sort bevat ‘placeA’.

Op dit ogenblik zijn de waarden voor alle velden onrechtstreeks gekend. Om deze gegevens in variabelen te

plaatsen moet men ze eerst opvragen. Dit gebeurt met de volgende opdracht:

request.getParameter("place");

Deze opdracht zoekt het veld place in de URL en geeft de waarde terug. Voor de andere velden is er een analoge

opdracht. Om de databank correct te bevragen moeten deze gegevens nog omgezet worden naar een SQL

opdracht.

Bijvoorbeeld:

De gebruiker wil alle meetings in Frankrijk zien. De SQL opdracht hiervoor is:

SELECT * FROM meetings WHERE place LIKE '%France%';

De tekst in hoofdletters behoren tot de vaste SQL syntax. Het procentteken is de joker of wildcard in de SQL

grammatica.

In de JSP code worden de voorwaarden bijgehouden in de string createClause. De voorwaarden worden

verwerkt binnen een aantal zelfgemaakte functies en breiden de variabele createClause steeds verder uit tot een

uiteindelijke “select statement”.

3.4.4.3 Update van de FME databank

De oude versie van de website werkte nog niet met databanken of JSP. Het aanpassen van de pagina's gebeurde

dus manueel. De persoon die instaat voor het onderhoud van een onderdeel, bijvoorbeeld de FME symposia,

paste het HTML document aan. Vervolgens werd het document via het FTP protocol op de server geplaatst.

De huidige versie maakt het onderhoud aanzienlijk eenvoudiger. JSP maakt het mogelijk om via formulieren de

databank aan te vullen. Hiervoor hebben we enkele extra JSP documenten aangemaakt. De belangrijkste zijn

insert.jsp en insertDB.jsp.

Als een gebruiker de databank wenst aan te passen moet die zich eerst bekend maken. De gebruiker geeft zijn

gebruikersnaam en paswoord op (zie figuur 6). De verschillende gebruikers en hun paswoorden worden

bijgehouden in de databank (tabel ‘access’). Eveneens staan deze gebruikers geregistreerd als mySQL database

users voor de FME-databank (elk met specifieke permissies opgegeven door de systeemadministrator).



Figuur 6: database login pagina

In het document insert.jsp worden de gebruikersnaam en paswoord gevraagd aan de gebruiker. Deze worden dan

doorgestuurd naar insertDB.jsp. In dit document wordt deze informatie verwerkt. De gebruikersnaam en het

paswoord worden bewaard in sessie objecten. Dit zijn variabelen die tijdelijk worden bijgehouden op de server.

Hierdoor moet de gebruiker zich niet steeds opnieuw aanmelden. De sessie objecten worden in deze volgorde

aangemaakt:

Figuur 7: Aanmaken van de sessie objecten

In de tabel ‘access’ wordt er gecontroleerd of de gebruiker en het paswoord wel bestaan. Als dit het geval is dan

wordt de inhoud van het sessie object allowed "yes". Als de gebruikersnaam en het paswoord niet voorkomen in

de tabel dan blijft allowed gelijk aan "no". Deze variabele zorgt voor de nodige afscherming. Voor een

onbekende genereert insertDB.jsp een leeg HTML document.

insert.jsp

firstRun

""

insertDB.jsp

firstRun username password

accessLevel allowed

Als firstRun == "" dan

= "alreadyUsed" = Uit insert.jsp = Uit insert.jsp = Uit databank = "no"



Bij een gekende gebruiker genereert insertDB.jsp een document die aangepast is aan de toegangsrechten van de

gebruiker. Het resultaat toont enkel de tabellen waar de gebruiker toegang tot heeft. Hiervoor gebruiken we een

eenvoudige wiskundige regel. Een som van machten van twee kan steeds opnieuw ontbonden worden in deze

machten van twee. Deze som wordt bewaard in het veld level in de tabel ‘access’. Samengevat geeft dit:

i 2 i Tabelnaam

0 1 Events

1 2 Meetings

2 4 News

3 8 Organisations

4 16 Positions

5 32 Symposia

6 64 Access

Tabel 11 Bepalen van de toegangsrechten

In het document insertDB.jsp wordt deze som in een while lus opnieuw ontbonden. Waar de macht voorkomt

wordt een link geplaatst. Deze link zorgt ervoor dat het formulier voor een bepaalde tabel getoond wordt. De link

stuurt twee parameters terug naar het document zelf, de parameters selector en subject. De parameter subject

bevat de naam van de tabel. Indien we enkel deze parameter zouden gebruiken kan een gebruiker zijn

toegangsrechten gemakkelijk verhogen.

Bijvoorbeeld:

Stel dat de gebruiker enkel toegang heeft tot de tabel ‘news’. De gebruiker ziet dan de volgende URL als hij de

klikt op de link naar het news formulier: insertDB.jsp?subject=news.

Om zijn toegangsrechten te verhogen moet hij dan enkel zelf een een URL intikken met de gepaste parameter.

Bijvoorbeeld insert.jsp?subject=access. Dit zorgt ervoor dat de gebruiker ook de tabel access kan aanvullen, wat

niet de bedoeling is.

Om de formulieren nu beter af te schermen hebben we de parameter selector ingevoerd. Enkel als deze

parameter klopt wordt het formulier weergegeven. Het is dus belangrijk dat deze parameter moeilijk is te

voorspellen, in dit geval zijn het namen uit de werken van Tolkien.

In onderstaande figuur (figuur 8) zie je een voorbeeld van een invulformulier om de ‘events’ tabel van de FME

databank aan te passen. In dit voorbeeld is via de insert.jsp pagina ingelogd met onze username en paswoord.

Tijdens het testen van de hele opstelling hadden wij lees- en schrijfpermissie op alle tabellen van de FME-

databank. In onderstaand voorbeeld hebben we het ‘events’-formulier geopend.

∑= ilevel 2



Figuur 8: update formulier FME-databank (bv. Events)

Na invullen van de relevante gegevens (+submit) wordt de data verstuurd naar de mySQL databank. Men krijgt

daarna een pagina waarop de zojuist ingegeven record nog eens wordt getoond met de bevestiging van ingave in

de databank. Er is de mogelijkheid om de ingegeven record te verwijderen indien fouten terug te vinden zijn.

38 Appendices


H o o f d s t u k 4 A P P E N D I C E S

Appendix A De functie printSubmenu()

function printSubMenu(menuName,type) { i = 10; menuName = menuName.toLowerCase(); while (i < menu1.length) { i = i+5; if (menu1[i] != undefined) { if (menuName.search(menu1[i].toLowerCase()) != - 1) { position = i+1; i = i+menu1.length; } } } subMenu = new Array(); tmpStr = menu1[position]; tmpStr = tmpStr.substr(5,tmpStr.length) subMenu = eval(tmpStr); locationString = document.URL document.write("<div class='titleright''><img src= './images/arrow.gif'> ") if (menu1[position+1] == undefined) { document.write(menu1[position-1]+"</div>"); } else { document.write("<a href='"+menu1[position+1]+"'>" +menu1[position-1]+"</a></div>"); } document.write("<br>"); document.write("<table>"); for(i=15;i<subMenu.length;i=i+5) { document.write("<tr>"); document.write("<td class='plainsingle'><img src= './images/arrow.gif'>") if (locationString.search(subMenu[i+1]) != -1) { document.write("<img src='./images/arrow.gif'></ td><td class='plainsingle'>"

+subMenu[i]+"</td>"); } else { document.write("</td><td class='plainsingle'><a href='"+subMenu[i+1]+"'>"

+subMenu[i]+"</a></td>"); } if (type!=undefined) {

document.write("</tr><tr><td></td><td class='plains ingle'>   <a href='"+subMenu[i+1]+"#europe'>Europe</a><br>   <a href='"+subMenu[i+1]+"#world'>World</a></td>");

} document.write("</tr>"); } document.write("</table>"); }

39 Appendices


Appendix B De functie showMap()

/*------------------------------------------------- ----------------------------- | Met de functie createEntry() worden de submenu's uit het hoofdmenu ge- | | controleerd. Er wordt verondersteld dat een subme nu op zich atomair is. | --------------------------------------------------- ----------------------------*/ function createEntry(menu)

{ for (i=15;i<menu.length;i=i+5) {

document.write("<dd>    <img sr c='./images/arrow.gif'>   ");

if (validate(menu[i+1], ".htm", ".jsp")) {

document.write("<a href='" + menu[i+1] + "' class=' plainsingle'>" + menu[i] + "</a>");

} else {

document.write(menu[i]); }

} } /*------------------------------------------------- ----------------------------- | De functie validate() wordt er gezocht op substri ngs binnen een string. | | De functie geeft een TRUE/FALSE waarde terug. -ui tbreidbaar- | --------------------------------------------------- ----------------------------*/ function validate(stringURL, v1, v2)

{ if (stringURL.search(v1)!=-1) {

return true; }

else {

if (stringURL.search(v2)!=-1) return true; else return false; } } /*------------------------------------------------- ----------------------------- | Deze functie haalt uit de ouder-menu-array ,zie m enu-systeem, welke | | ondergeschikte menu-array moet worden ingeladen. | | Nu enigzins dynamischer dankzij eval()... | -------------------------------------------------- ----------------------------*/

function selectMenu(showString) {

showString=showString.substr(showString.length-5, showString.length-1); return eval(showString); } /*------------------------------------------------- ------------------------------ | De eigenlijke sitemap wordt opgebouwd. Het groots te probleem was | | het gebrek -?- aan uniformiteit. Een knop uit het hoofdmenu is: | | * Niet uitschuifbaar & aanklikbaar. | | * Wel uitschuifbaar & niet aanklikbaar -UNDEFINE D- | | * Wel uitschuifbaar & aanklikbaar | | Vooral de undefined is onaangenaam... | --------------------------------------------------- ----------------------------*/

function showMap() {

s=0; document.write("<table width='600'><tr><td width= '50%' valign='top'>"); for (j=15;j<menu1.length;j=j+5) { document.write("<dl><dd><img src='./images/cube .gif'>  <font size='2'>"); if (validate(menu1[j+1], ".htm", ".jsp"))

40 Appendices


{ document.write("<a href='" + menu1[j+1] + "'>" + me nu1[j] + "</a>");

subItem="none"; } else {

subItem=menu1[j+1]; if (menu1[j+2]!=undefined) {

document.write("<a href='" + menu1[j+2] + "'>"+ men u1[j] + "</a>"); }

else {

document.write(menu1[j]); }

} document.write("</font>"); if (subItem!="none") {

createEntry(selectMenu(subItem))} document.write("</dl>"); if(j==25) {

document.write("</td><td width='50%' valign='top'>" ); }

} document.write("</td></tr></table>"); }

41 Appendices


Appendix C Javascript menu-systeem

C.1 Mmenu.js

/*DHTML Menu version 3.0 (beta) * written by Andy Woolley * Copyright 2001 Andy Woolley. All Rights Reserved. * This script featured on Dynamic Drive (http://www .dynamicdrive.com) */ timer=0; d=document; smc=-1; ns4=(d.layers)?true:false; ns6=(navigator.userAgent.indexOf("Gecko")!=-1)?true :false; mac=(navigator.appVersion.indexOf("Mac")!=-1)?true: false; if(ns6)mac=false; opera=(navigator.userAgent.indexOf("Opera")!=-1)?tr ue:false; ns61=(parseInt(navigator.productSub)>=20010726)?tru e:false; ie4=(!d.getElementById&&d.all)?true:false; konq=(navigator.userAgent.indexOf("Konqueror")!=-1) ?true:false; mp=(ns6)?"pointer":"hand";atop=5;oatop=0;aleft=0;oa left=1; var a,am,oa,im,om,flta;hlarr=new Array();hlcnt=0;hl l=0;timo=0;el=0;nshl=0;var omv=0;df=1;im=0;ofrac=0;omnu=0;ac=15;m=1; var imar=new Array();mr=","; while(eval("window.menu"+m)){mr+="menu"+m+",";tmenu =eval("menu"+m);m++}; mr=mr+" ";mr=mr.split("\,");menus=mr.length-1;bgt=" ";if(!opera)bgt="Color"; function gmobj(mtxt){if(d.getElementById){m=d.getEl ementById(mtxt)}else if(d.all){m=d.all[mtxt]}else if(d.layers){m=d.layer s.eval(mtxt)}return m} function gmstyle(mtxt){m=gmobj(mtxt);if(!ns4){m=m.s tyle;}return m;} function spos(gm,t_,l_,h_,w_){if(ns4){gms=gm;if(w_)gms.clip. width=w_;if(h_)gms.clip.height=h_;}else if(opera){gms=gm.style;if(w_)gms.pixelWidth=w_;if(h _)gms.pixelHeight=h_}else{gms=gm.style;if(w_)gms.width=w_;if(h_)gms.height=h_;}if(t_)gms.top=t _;if(l_)gms.left=l_} function gpos(gm){if(ns4){t_=gm.top;l_=gm.left;h_=g m.clip.height;w_=gm.clip.width;}else if(opera){t_=gm.style.pixelTop;l_=gm.style.pixelLef t;h_=gm.style.pixelHeight;w_=gm.style.pixelWidth;}else if(ns6){t_=gm.offsetTop;l_=gm.offsetLeft;h_=gm.offs etHeight;w_=gm.offsetWidth}else{t_=gm.offsetTop;l_=gm.offsetLeft;h_=gm.offsetHeight;w_=gm.offs etWidth;}if(konq){w_=parseInt(gm.style.width);h_=parseInt(gm.style.height);}var gpa=new Array();gpa[0]=t_;gpa[1]=l_;gpa[2]=h_;gpa[3]=w_;ret urn(gpa)} function close_el(){for(xa=hlarr.length-1;xa>=0;xa- -){ti=hlarr[xa].split("-");tmenu=eval("menu"+ti[0]);if(ns4){shl(ti[0]-1,ti[1],'hide');}else{arg=gmobj("el"+ti[1]);arg.sty le.backgroundColor="#"+tmenu[5][1];if(opera)arg.style.background="#"+tmenu[5][1];arg.style.col or="#"+tmenu[5][0];}if("menu"+ti[0]==hll){if(ns4)shl(ti[0]-1,hel,'show');return}}hlcnt=0;hlarr =new Array()} function closeallmenus(){om=0;if(ns4){omv.visibility="hide"} for(a=1;a<menus;a++){menu=eval("menu"+a);mi=gmstyle("menu"+a);if (menu[6]!=1){mi.visibility='h idden'}else{am=""}}hll="";close_el();} function rep_img(){if(timo){timo.src=o_img;}} function popdn() { arg=popdn.arguments; if(arg[0]) { menu=eval(window.arg[2]); mnum=arg[2].substr(4,4); if(arg[3].substr(0,5)!="show-") { if(!ns4) { if(arg[1]==smc&&menu[5][14]) { menu[5][0]=menu[5][14]; menu[5][1]=menu[5][15]; } arg[0].style.backgroundColor="#"+menu[5][1]; if(opera)arg[0].style.background="#"+menu[5][1] ; arg[0].style.color="#"+menu[5][0] } if(arg[1]==smc&&menu[5][14]) {

42 Appendices


menu[5][0]=ofc; menu[5][1]=obc; } } else { if(ns4)omv=0; hlarr[hlcnt]=mnum+"-"+arg[1]; hlcnt++; } } if(!menu[11])timer=setTimeout("closeallmenus()",ti megap) } function dc(){d.cookie=sel;tr=ltarg.split("=");if(tr[1])pare nt.frames[tr[1]].location.href=nshl;else location.href=nshl;} function openurl(url){window.open(url)} function sis() { for(a=1;a<imar.length;a++) { tim=imar[a].split("_"); if(tim[4]){tim[3]=tim[3]+"_"+tim[4]} menu=eval(window.tim[3]); if(ns4) { mtl=d.layers.eval(tim[3]).document.layers.eval(" el"+tim[2]); ht=(mtl.clip.height/2); wd=mtl.clip.width-mtl.clip.left-8;eln=""; for(x=0;x<2;x++) { mtl=d.layers.eval(tim[3]).document.layers.eval(eln +"el"+tim[2]).document.layers.eval(imar[a]); mtl.left=wd; if(menu[12]=="left")mtl.left=10 mtl.top=ht-(mtl.clip.height/2)-1; eln="m" } } else { imo=gmobj(imar[a]); im=gmobj("el"+tim[2]); imo.style.left=im.offsetWidth-8; if(menu[12]=="left")imo.style.left=8 cr=0; if(ns6&&!ns61) { mn=gmobj(tim[3]) cr=mn.offsetTop } if(mac)cr=4; imo.style.top=im.offsetTop+(im.offsetHeight/2)-( imo.offsetHeight/2)-cr } if(opera) { imo.style.top=im.offsetTop+(im.style.pixelHeight /2)-4; if(menu[12]=="left"){}else{imo.style.left=im.sty le.pixelWidth-8} } } } function fixb(mnu) { menu=eval(mnu); mn=gmobj(mnu); if(ns4){if(menu[10])mn.clip.width=mn.clip.width+me nu[3];return} el+=((menu.length-ac)/5); ml=gmobj("el"+(el-1)); mp=gpos(mn); if(ns6){mp[3]=mp[3]-menu[3]*4;mp[2]=mp[2]-menu[3]* 2}

43 Appendices


else if(mac){mn.style.height=ml.offsetTop+ml.offsetHeigh t+(menu[3]*2);mn.style.height=mn.style.height-menu[5][9];if(!menu[2]){mp[2]=1}} else if(opera){mp[3]=mp[3]+(menu[3]*4)} if(!d.all||opera)spos(mn,null,null,mp[2],mp[3]); if(menu[10]) { oh=0;tw=0;mtl=0; if(opera) { tw=menu[3] tp=tw } else { tp=null; } ic=(menu.length-ac)/5; for (y=el-ic;y<el;y++) { ty=gmobj("el"+y); thy=gmobj("hel"+y); typ=gpos(ty); spos(thy,tp,tw,null,null); if(!menu[2]) { if(mac) { thy.style.width=1; ty.style.width=thy.offsetWidth+menu[5][9]; tw=tw+thy.offsetWidth+menu[3] } else if(opera) { tw=tw+thy.style.pixelWidth+menu[3] ty.style.pixelTop=0 } else { tw=tw+typ[3]+menu[3] } } else { if(opera) { tw=tw+menu[2]+(menu[5][9]*2)-menu[3] } else { tw=tw+menu[2]-menu[3] } } if(typ[3]>oh)oh=typ[2] } if(d.all){oh=oh+(menu[3]*2);tw=tw+menu[3];} if(ns6||opera){tw=tw-menu[3]} spos(mn,null,null,oh,tw) } } function sm(v1){if(flta){ap=gmobj(v1);if(ap.filters [0]) ap.filters[0].Apply()}else{if(menu[8]){ts=menu[8].s ubstr(0,4);if (ts.toUpperCase()=="FADE"){ //ap=gmobj(v1); //mi.filter = "Alpha(Opacity=20)"; //mi.MozOpacity = 0.3; }}}mi.visibility='visible';if(flta){if(ap.filters[0 ])ap.filters[0].Play()}} function popup(mn){omv.visibility='hide';clearTimeout(timer) ;closeallmenus();mtxt='menu'+mn;mi=gmstyle(mtxt);flta=0;if((d.all&&d.getElementById)&&!mac){ap =gmobj(mtxt);getflta(ap);}sm(mtxt);am=mn} function shl(lyr,el,s){clearTimeout(timer);mt=d.layers[lyr]. document.layers.eval("el"+el);omv.visibility="hide";menu=eval(lyr);if(menu[13]!="form")mt.visi bility=s;omv=mt;} function popi(v1,lyr,el) {

44 Appendices


sel="smenu="+el+"#" if(!om)om=lyr clearTimeout(timer); if (ns4){timo=eval("document.im"+el)}else{timo=gmo bj("im"+el)} o_img=""; if (timo) { o_img=timo.src; ima=o_img.split("."); enD=ima.length; ima[enD-2]=ima[enD-2]+"_over"; nsrc=""; for(eD=0;eD<enD;eD++){nsrc=nsrc+ima[eD]+"."} nsrc=nsrc.substring(0,nsrc.length-1); ta=om.split(","); NI1=new Image; NI1.src = nsrc; if(NI1.width>0) timo.src=nsrc; } if(v1.substring(0,5)=="show-") { v1=v1.substring(5,20); menu=eval(v1); omnu=v1; container=eval(lyr); mi=gmobj(v1); if(!menu[0]||!menu[1]) { gp=gpos(gmobj(lyr)) h3=""; if(container[10])h3="h"; if(ns4){tel=gpos(d.layers.eval(lyr).document.layer s.eval("el"+el))}else{tel=gpos(gmobj(h3+"el"+el))} np=gpos(mi); if(container[10]) { if(!ns61&&ns6){gp[1]=-1;gp[0]--} if(ns4||mac)gp[1]--; if(mac)gp[0]--; if(np[2]+gp[0]>wh){gp[0]=gp[0]-np[2]-tel[2]} spos(mi,gp[0]+gp[2]-1,tel[1]+gp[1],null,null) } else { if(!ns61&&ns6)tel[0]=tel[0]-gp[0]; nt=tel[0]+gp[0]+suboffset_top; nl=gp[1]+tel[3]-suboffset_left; if(gp[3]+nl>(ww-25)){nl=gp[1]-np[3]+suboffset_l eft;} spos(mi,nt,nl,null,null); } } sm(v1); om+=","+v1; if(!ns4)mi.style.visibility="visible"; } ta=om.split(",") strt=0; for(a=0;a<ta.length;a++) { if (ta[a]==v1)strt=0; if (strt) { if(ta[a]) { hll=lyr; hel=el; close_el(el); mi=gmstyle(ta[a]); mi.visibility='hidden'; } ta[a]="" }

45 Appendices


if(ta[a]==lyr)strt=1; } mmenu=eval(lyr) if(mmenu[6]&&lyr!=ta[0]) { closeallmenus(); ta=[lyr]; } om="" disp=0 for(a=0;a<ta.length;a++) { if(ta[a]==lyr)frs=a if(ta[a]==v1)fre=a if (disp||(a>frs&&a<fre)) { if (ta[a]&&ta[a]!=v1) { mi=gmstyle(ta[a]); mi.visibility='hidden'; } } else { if (ta[a])om+=ta[a]+","; } if (v1==ta[a])disp=1 } } function stch(ms){window.status=ms; return true} function hl() { arg=hl.arguments; if(smc==el&&arg[2][14]){ofc=arg[2][0];obc=arg[2][1 ];arg[2][0]=arg[2][14];arg[2][1]=arg[2][15]} hlnk=arg[1];if(arg[7]+""=="undefined"){arg[7]=hlnk } am=" "+a;am=am.length-1;subimg="";arg[0]+="" if (ns6){dwd=arg[2][9]*2}else{dwd=0} if (ns4){if (el==0){st="<style type=\"text/css\">A .m{text-decoration:none;}</style>";d.write(st);oatop=atop;} else{mtl=d.layers.eval(omnu).document.layers.eval("el"+(el-1));if (oatop==atop){atop+=mtl.clip .height}else{atop=menu[3];}oatop=atop}if (menu[10]){atop=menu[3];if (oaleft==aleft){aleft+=mtl.clip.width+menu[3]}else{ aleft=menu[3];oaleft=aleft}oaleft=aleft}else{aleft=menu[3];}} pd="popdn(this," + el + ", '" + arg[5] + "', '"+ar g[1]+"');" if(arg[0].indexOf("<img")>=0){ipos=arg[0].indexOf( "<img");arg[0]=arg[0].substr(0,ipos+4)+" id=im"+el+" name=im"+el+" "+ arg[0].substr(ipos+5,9 00)} if (hlnk.substring(0,5)=="show-"){if(arg[7]==hlnk) if(arg[6])arg[7]=arg[6];else arg[7]="";hlnk="#";if (arg[6]+" "!="undefined ")hln k=arg[6];} if (arg[1].substring(0,5)=="show-" && (!menu[10]||menu[5][16])){im++;ims="im"+im+"_"+a+"_ "+el+"_"+arg[5];ti=arg[2][10];if(menu[5][16])ti=menu[5][16];if(ns4){subimg="<layer id="+ims+" style=\"position:absolute;\"><img border=0 src="+ti+"></layer>";}else{subimg="<img id="+ims+" border=0 style=\"position:absolute;\" src="+ti+">"}imar[im]=ims;} ltarg=" "; lpos=hlnk.toLowerCase(hlnk).indexOf(" target="); if(lpos>0){lta=hlnk.split(" ");ltarg=lta[1];hlnk=l ta[0]} if(ns4){ rsp="" tdwd=" width="+menu[2] if(!menu[7]||menu[7]=="left")tdwd="" if (menu[7]=="right") rsp="<td height=-1></td>" ls="<table cellpadding="+(arg[2][9]/2)+" cellspac ing=0><tr><td height=-1 align="+menu[7]+tdwd+"><a href=\""+hlnk+"\" "+ltarg +" onclick=\"d.cookie=sel;\" style='color:#" le=";text-decoration:none;font-size:"+arg[2][5]+" px;font-weight:"+arg[2][7]+";font-family:"+arg[2][8]+"' onmouseover=\";return stch('"+arg[7]+"');\">"+arg[0]+"</a>"+subimg+"</td> "+rsp+"</tr></table></layer>" lv=" left="+aleft+" width="+(menu[2]-(menu[3]*2)) +" top="+atop mt="<layer id=mel"+el+lv+" bgColor="+arg[2][1]+" onmouseover=\"shl('"+arg[5]+"',"+el+",'show');popi( '"+arg[1]+"','"+arg[5]+"',"+el+"); window.status='"+arg[7]+"';\">"+ls+arg[2][0]+le mt+="<layer id=el"+el+lv+" bgColor="+arg[2][3]+" onmouseover=\"shl('"+arg[5]+"',"+el+",'show');popi( '"+arg[1]+"','"+arg[5]+"',"+el+"); ltarg='"+ltarg+"'; nshl='"+hlnk+"'; this.captureEve nts(Event.CLICK); this.onClick=dc;\" onmouseout=\"window.status='';"+pd+"\" visibility=h idden >"+ls+arg[2][2]+le

46 Appendices


}else{ mt=""; if (menu[10]){bgc=hlp[4];if(hlp[11])bgc=hlp[12];m t+="<div id=hel"+el+" style=\"background-color:#"+bgc+";width:"+(menu[2]-menu[3])+";position:absolute;top:0;left:"+dlft+";\" >";dlft=dlft+menu[2]-(menu[3]*2)+menu[3]} if(!menu[7])menu[7]="left" rsp=0;if (menu[7]=="right") rsp=7; if(menu[13]!="form") {mt+="<a href=\""+hlnk+"\" "+ltarg+" style='text-decoration:none;'>"} dw=(menu[2]-(2*menu[3]+dwd)) if(dw+" "=="NaN "){dw=""}else{dw="width:"+dw} if(!menu[2]&&ie4)dw="width:1"; if(!menu[2]&&opera){dw="position:absolute;";menu[ 7]="left"} mt+="<div align="+menu[7]+" id=el"+el+" style=\"" +dw+";padding-left:"+arg[2][9]+";padding-right:"+(arg[2][9]+rsp)+ ";padding-top:"+arg[2][9]+";padding-bottom:"+arg[2][9]+";font-weight:"+arg[2][7]+";font -style:"+arg[2][6]+";font-family:"+arg[2][8]+";font-size:"+arg[2][5]+"px;colo r:#"+arg[2][0]+";background-color:#"+arg[2][1]+";\"" mt+=" onMouseOver=\"this.style.cursor='"+mp+"';this.style .background"+bgt+"='#"+arg[2][3]+"';this.style.color='#"+arg[2][2]+"';popi('"+arg[1]+"','"+arg [5]+"',"+el+");return stch('"+arg[7]+"');\"" mt+=" onclick=d.cookie=sel onMouseOut=\"rep_img() ; "+pd+";return stch('');\">" mt+=arg[0]+subimg+"</div>";mt+="</a>";if (menu[10 ]){mt+="</div>"} } d.write(mt) if(smc==el&&arg[2][14]){arg[2][0]=ofc;arg[2][1]=ob c;}el++ } function dmenu(mnu){ menu=eval(mnu);atop=menu[3];hlp=menu[5];if(!menu[3 ])menu[3]=0; if(hlp[14]&&el==0){tc=d.cookie;tp=tc.indexOf("smen u=");smc=tc.substr(tp+6,10);smc=smc.substr(0,smc.indexOf("#"));if(!smc)smc=-1} if(el)ns6c=3;else ns6c=2;ns6w=0;if(menu[7]=="right "&&ns6)ns6w=7; if (menu[2]<1)menu[2]="undefined" if(ns4) { thw=menu[2] if(menu[10]){ic=(menu.length-ac)/5;thw=(menu[2]*i c)-(menu[3]*ic)+menu[3]} bgc=hlp[4] if (hlp[11]){bgc=hlp[13]} mt="<layer z-index=99 visibility=hidden bgcolor=# "+bgc+" id="+mnu+" top="+menu[0]+" left="+menu[1]+" width="+thw+">" if (hlp[11]){mt+="<layer bgcolor=#"+hlp[12]+" top =0 left=0 height=2 width=100%></layer>"}mt+="<layer id="+mnu+"3d bgcol or=#"+hlp[12]+" top=0 left=0 height=1 width=2></layer>"} else { iedf="";if(!opera&&!mac&&d.all&&menu[8]) { iedf=" filter:";flt=menu[8].split("\;");for(fx=0 ;fx<flt.length;fx++){iedf+=" progid:DXImageTransform.Microsoft."+flt[fx]}} if (hlp[11]){brd = "border:solid "+menu[3]+"px; b order-left-color:#"+hlp[12]+";border-top-color:#"+hlp[12]+";border-bottom-color:#"+hlp[1 3]+";border-right-color:#"+hlp[13]+";"}else{brd = "border:solid "+men u[3]+"px; border-left-color:#"+hlp[4]+";border-top-color:#"+hlp[4]+";bord er-bottom-color:#"+hlp[4]+";border-right-color:#"+hlp[4]+";"} mt="<div id="+mnu+" style=\""+iedf+";z-index:99;visibility:hidden;"+brd+"position:absolute ;background-Color:#"+hlp[4]+";width:"+(menu[2]+ns6w)+";left:"+m enu[1]+";top:"+menu[0]+";\">" } d.write(mt) x=0; dlft=0 aleft=0; for(b=ac;b<menu.length;b++) { b=b+4 if(menu[b-3]==""){menu[b-3]="#"} menu[b-3] = menu[b-3].replace(/\"/gi, """) hl(menu[b-4], menu[b-3], hlp, 100, 100, mnu, menu [b-2], menu[b-1]) txt=""; if(ns4) { if (!menu[10]) {

47 Appendices


if (menu[b]&&b<menu.length-1) { mt=d.layers[mnu].document.layers.eval("el"+(el -1)) x=atop+mt.clip.height if (!hlp[11]) x++ txt="<layer top="+(x-2)+" left="+menu[3]+" hei ght=1 bgcolor=#"+bgc+" width="+mt.clip.width+"></layer>" if (hlp[11]) {txt+="<layer top="+(x-1)+" left= "+menu[3]+" height=1 bgcolor=#"+hlp[12]+" width="+mt.clip.width+"></laye r>"} } } } else { bw=menu[b]; bc=hlp[4] bl=""; if(opera)bl="left:0;" if(opera&&bw==0){bw=2;bc=hlp[1]} if(b+1==menu.length)bw=0; if(bw>0) { if (!menu[10]) { if (hlp[11]&&bw==1) { txt="<div onmouseout=\"\" onmouseover=\"clear Timeout(timer)\" style=\"position:relative\">" txt+="<div style=\"border-top:1px solid #"+hl p[13]+"; background-color:#"+hlp[12]+"; width:100%;position:absolute;cl ip:rect(0 100% 2 0);height:1;"+bl+"\">" txt+="</div></div>" } else { txt="<div style=\"position:relative;\">" txt+="<div onmouseout=\"popdn()\" onmouseover =\"clearTimeout(timer)\" style=\"background-color:#"+bc+";width:"+(menu[2]-( menu[3]*2))+";position:absolute;" txt+="clip:rect(0 100% "+bw+" 0);height:"+bw+ ";"+bl+"\">" txt+="</div>" txt+="</div>" } } } } d.write(txt); omnu=mnu; mt="" } oatop=-1; if (ns4){mt="</layer>"}else{mt+="</div></div>"} d.write(mt) if (ns4) { ml = d.layers.eval(mnu) ml.clip.height += menu[3] ml3d = d.layers.eval(mnu).document.layers.eval(mn u+"3d") if (hlp[11])ml3d.clip.height=ml.clip.height } } function checs(e) { if(d.all){sy=d.body.scrollTop}else{sy=pageYOffset} if(opera){sy=pageYOffset} for(a=1;a<menus;a++) { menu=eval("menu"+a); if(menu[9]>0) { if (df!=0||osy!=sy) { mi=gmstyle("menu"+a); mit=parseInt(mi.top); if(isNaN(menu[0]))menu[0]=0; df=parseInt(menu[0])+sy-mit; nt=df/followspeed; of1=nt.toString(); ofr=of1.split("\.");

48 Appendices


if(ofr[1]+" "=="undefined ")ofr[1]=0; ofrac=ofrac+parseInt(ofr[1]); if(ofrac>10) { ofrac=ofrac-10; if(df>=0){nt++}else{nt--} } mi.top=mit+nt } osy=sy } } pu=setTimeout('checs()',followrate) } function setpos() { if(d.all){ww=d.body.clientWidth;wh=d.body.clientHe ight;}else{ww=window.innerWidth;wh=window.innerHeight;} if(opera){ww=window.innerWidth;wh=window.innerHeig ht;} for (a=1;a<menus;a++) { menu=eval("menu"+a); if(!menu[4])menu[4]=""; if (menu[4].indexOf("center")!=-1||menu[4].indexO f("right")!=-1) { mn=gmobj("menu"+a); mnw=ns6?parseInt(mn.style.width):d.all?mn.style. pixelWidth:mn.clip.width; if(opera)mnw=mn.style.pixelWidth; nlp=((ww-mnw)/2); if(menu[4].indexOf("right")!=-1)nlp=ww-mnw; if(ns4){mn.left=nlp}else{mn.style.left=nlp} } if (menu[4].indexOf("bottom")!=-1||menu[4].indexO f("middle")!=-1) { mn=gmobj("menu"+a); mnh=ns6?parseInt(mn.offsetHeight):d.all?mn.style .pixelHeight:mn.clip.height; nlp=wh-mnh-16; if(ns4)mnoh=mnh;else mnoh=mn.offsetHeight if(opera)mnoh=mn.style.pixelHeight; if(menu[4].indexOf("middle")!=-1)nlp=((wh-mnh)/2 )-mnoh/2 menu[0]=nlp; if(ns4){mn.top=nlp}else{mn.style.top=nlp} } } } function Minit() { el=0;osy=-1;df=-1; if ((d.all&&d.getElementById)&&!mac) document.writ e("<script>function getflta(ap){try{if(ap.filters){flta=1}}catch(e){}}< /script>"); for(x=1;x<menus;x++){menu=eval("menu"+x);if(menu[6 ]==1)popup(x)} for(a=1;a<menus;a++){fixb("menu"+a)} pu=setTimeout('checs()',followrate) sis();setpos(); if(ns4){window.onresize=function(){if(window.inner Width==ww&&window.innerHeight==wh)return;window.history.go(0);}}else{window.onresize=setpos} sy=1;checs(); function coc() { menu=eval(omnu) if(menu[13]!="form")closeallmenus() } if(ns4)d.onmousedown=coc;else d.onclick=coc if(mac&&d.all){d.write("<div style=\"position:abso lute;top:0;left:0\">")} frs=0 fre=0 } for(a=1;a<menus;a++){dmenu("menu"+a)} if(!ns61&ns6){window.onload=Minit}else{Minit();wind ow.onload=sis}

49 Appendices


C.2 Mmenu_array.js

// Description of the properties of the menu system timegap = 50; // submenu open interval followspeed = 10; // mouse-menu tracking followrate = 40; // subsequent menu item interva l suboffset_top = 0; suboffset_left = 0; effect = "fade(duration=0.0);Shadow(color='#CCCCCC' , Direction=100, Strength=0)"; function openwin(url) { nwin=window.open(url,"nwin",config="scrollbars=yes ,resizable=yes,toolbar=yes,location=yes,

status=yes,menubar=yes,"); nwin.focus(); } // prop1 is an array of properties. You can have as many property arrays as you need. prop1=[ "FFFFFF", // Off Font Color "7F8EB0", // Off Back Color "FF9966", // On Font Color "003366", // On Back Color "000000", // Border Color 11, // Font Size "normal", // Font Style "normal", // Font Weight "Verdana", // Font 3, // Padding "images/arrow.gif", // Sub Menu Image 0, // 3D Border & Separator "66ffff", // 3D High Color "000099", // 3D Low Color "ffffff", // Referer item Font Color (leave thi s blank to disable "7F8EB0" // Referer item Back Color (leave thi s blank to disable) ] // This is the array that contains your menu proper ties and details menu1=[ 75, // Top , // left 111, // Width 1, // Border Width "left", // Screen Position - here you can use "c enter;middle;right" prop1, // Properties Array - this is set higher up, as above 1, // Always Visible - allows the menu item to be visible at all time "center", // Alignment - sets the menu elements ali gnment, HTML values are valid here

for example: left, right or center , // Filter - Text variable for setting transitiona l effects on menu

activation , // Follow Scrolling - Tells the menu item to follow the user down the screen 1, // Horizontal Menu - Tells the menu to be horiz ontal instead of top to

bottom style , // Keep Alive - Keeps the menu visible until the user moves over another

menu or clicks elsewhere on the page , // Position of sub image left:center:right:m iddle:top:bottom , // Show an image on top menu bars indicating a sub menu exists below , // Reserved for future use // "Description Text", "URL", "Alternate URL", "Sta tus", "Separator Bar" "About FME","show-menu2","about.htm",,1, "News & Events","show-menu3",,,1, "Formal Methods","show-menu4","formal.htm",,1, "Organisations","show-menu5",,,1, "Positions","positions.jsp",,,1, "Contact us","contact.htm",,,1, "Sitemap","sitemap.htm",,,1 ]

50 Appendices


menu2=[ ,,130,1,"",prop1,,"left",effect,,,,,,, "Subgroups","subgroups.htm",,,0, "Projects","projects.htm",,,0, "Meetings","meetings.jsp",,,0, "Symposia","symposia.jsp",,,0, "Becoming a member","member.htm",,,0 ] menu3=[ ,,130,1,"",prop1,,"left",effect,,,,,,, "News","news.jsp",,,0, "Events","events.jsp",,,0 ] menu4=[ ,,130,1,"",prop1,,"left",effect,,,,,,, "Choosing","choosing.htm",,,0, "Methods","methods.htm",,,0, "Tools","tools.htm",,,0, "Applications","applications.htm",,,0, "FAQ's","faqs.htm",,,0, "Literature","literature.htm",,,0, "Journals","journals.htm",,,0, "Courses","courses.htm",,,0, "Links","links.htm",,,0 ] menu5=[ ,,130,1,,prop1,,"left",effect,0,,,,,, "Universities","universities.jsp",,,0, "Commercial","commercial.jsp",,,0, "Non-profit","nonprofit.jsp",,,0 ]

51 Appendices


Appendix D JSP documenten in verband met meetings

D.1 meetings.jsp

<html> <head> <title>About FME:: Meetings2</title> <%@ page contentType="text/html"%> <%@ page import="java.sql.*"%> <%! // Declaration of Connection, Statement and Result Set variables // which are going to be used during database conn ection and // data retrieval. String connectionURL = "jdbc:mysql://localhost:33 06/fme2"; Connection connection = null; Statement stat = null; ResultSet rs = null; ResultSet rsDate = null; static String composedRow(String subject, String u rl, String comment, String seperator){ String returnString=""; int whereURL; int whereSubject; while (url.indexOf(';')!=-1){ whereURL=url.indexOf(';'); whereSubject=subject.indexOf(';'); returnString=returnString+"<a href='"+url.substr ing(0,whereURL)+"'>"

+subject.substring(0,whereSubject)+"</a>"+seperato r; subject=subject.substring(whereSubject+1,subject .length()-1); url=url.substring(whereURL+1,url.length()-1); } if (comment==null) return returnString+"<a href='"+url+"'>"+subject +"</a>"; else return returnString+"<a href='"+url+"'>"+subject +"</a><br>"+comment; } static String composedRow(String subject, String u rl, String seperator){ if (subject.length()==0) return " "; String returnString=""; int whereURL; int whereSubject; while (url.indexOf(';')!=-1){ whereURL=url.indexOf(';'); whereSubject=subject.indexOf(';'); returnString=returnString+"<a href='"+url.substr ing(0,whereURL)+"'>"

+subject.substring(0,whereSubject)+"</a>"+seperato r; subject=subject.substring(whereSubject+1,subject .length()-1); url=url.substring(whereURL+1,url.length()-1); } return returnString+"<a href='"+url+"'>"+subject+ "</a>"; } static String printDate(String begin,String end){ if (end==null) return begin; else return begin.substring(0,begin.length()-5 ) + " - "+end; } static String rowBackcolor(int i){ if (i%2==0) return "<tr class='evenRow'>"; else return "<tr>"; } %> <% /* CONNECTING AND CREATING DATABASE STATEMENTS */ Class.forName("org.gjt.mm.mysql.Driver"); connection = DriverManager.getConnection(connecti onURL, "", ""); stat = connection.createStatement(); %>  <meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-1">

52 Appendices


<meta name="resource-type" content="document"> <meta name="revisit-after" content="10 days"> <meta name="classification" content="Computers"> <meta name="description" content="Formal Methods E urope (FME) is an organisation with the

mission of promoting and supporting the industrial use of formal methods for computer systems development. It is not allied to any single organisation or group of organisations. Its members come from different indu strial, academic, and government bodies.">

<meta name="keywords" content="formal, method, Eur ope, computer, system, development, support, promotion, industrial, government, academi c">

<meta name="robots" content="ALL"> <meta name="distribution" content="Global"> <meta name="copyright" content="(c) copyright 2002 Formal Methods Europe"> <meta name="language" content="english"> <meta name="doc-type" content="Public"> <meta name="doc-class" content="Completed"> <meta name="doc-rights" content="Public">  <SCRIPT type=text/javascript language=JavaScript s rc="newmenu_array.js"></SCRIPT> <SCRIPT type=text/javascript language=JavaScript s rc="mmenu.js"></SCRIPT> <SCRIPT type=text/javascript language=JavaScript s rc="printSubMenu.js"></SCRIPT>  <link rel=StyleSheet href="fme.css" type="text/css " media=screen> <style fprolloverstyle> A:hover {color: #FF6600; text-decoration:underlin e;} </style> </head> <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" class="body">  <table border="0" width="100%" cellspacing="0" cel lpadding="0"> <tr> <td width="80%" height="75" align="left"><img border="0" src="images/banner.jpg"

width="500" height="75"></td> <td width="20%" height="75" align="right"><a h ref="index.htm"><img src="images/FME- LOGO%20copy.jpg" width="150" height="75" bo rder="0"></a></td> </tr> <tr> <td colspan="2" width="100%" height="21" bgcol or="#7F8EB0" style="border: 1 solid

#000000" class="plain"> </td> </tr> <tr> <td width="100%" height="30" style="border-bot tom: 1 solid #000000" colspan="2">

<img border="0" src="images/blind.jpg" width="400" height="30"> </td>

</tr> </table>  <table border="0" width="100%" cellspacing="0" cel lpadding="0" style="font-family: Verdana;

font-size: 8 pt"> <tr> <td width="5%" valign="top" bgcolor="#003366" class="plain"> </td> <td width="5%" valign="top" class="plain"><img src="images/subbanner3.gif" width="20"

height="20"></td> <td width="65%" valign="top" class="plain">&nb sp;</td> <td width="25%" valign="top" class="plain" row span="2">  <table width="100%" cellspacing="0" cellpaddi ng="0"> <tr> <td width="10%" height="20" class="plains ingle"> </td> <td width="90%" height="20" class="plains ingle"> </td> </tr> <tr> <td width="10%" height="20" class="plains ingle"> </td> <td width="90%"> <script>printSubMenu("about FME")</scri pt> </td> </tr> </table>  </td> </tr>

53 Appendices


<tr> <td width="5%" class="plain" bgcolor="#003366" > </td> <td width="5%" class="plain"> </td> <td width="65%"><img src="./images/sizer.gif" width="1" height="373" align="right">  <p class="plain">FME members usually meet thre e times a year, preferably at a "reachable" place somewhere in Europe s o that as many members can attend as possible. At the meetings ongoing matters are discussed as well as strategic matters regarding FME's future. The meetings are usually concluded with one or two technical presentations on formal methods.</p> <p class="plain">The following minutes of recent FME meetings are available on-line (all files are in PDF format):<br></p> <table border="1" bordercolor="#F2F2F2" width="10 0%" cellspacing="0" cellpadding="0"> <tr> <th width="20%" height="20">Date</th> <th width="30%" height="20">Meeting</th> <th width="20%" height="20">Material</th> <th width="10%" height="20">Photos</th> <th width="20%" height="20">Place</th> </tr> <% rs = stat.executeQuery("SELECT * FROM meeting"); stat=connection.createStatement(); rsDate = stat.executeQuery("SELECT date_format(be gindate,'%D %M %Y') as

bd,date_format(enddate,'%D %M %Y') as ed FROM meeti ng"); int counter=1; while(rs.next() && rsDate.next()){ out.println(" "+rowBackcolor(counter)); out.println(" <td height='40'>"

+printDate(rsDate.getString("bd"),rsDate.getString( "ed"))+"</td>"); out.print(" <td>");

out.println(composedRow(rs.getString("meeting"),rs .getString("meetingurl"),"<br>") +"</td>");

out.print(" <td>"); out.println(composedRow(rs.getString("material") ,rs.getString("materialurl"),"<br>")

+"</td>"); out.print(" <td><center>"); if (rs.getString("photosurl").length()>0) { out.print("<a href='"+rs.getString("photosurl ")+"'>

<img src='./images/checked.gif' border='0'></a>"); }

else { out.print("<img src=./images/unchecked.gif>") ;

} out.println("</center></td>"); out.println(" <td>"+rs.getString("place")+"< /td>"); out.println(" </tr>"); counter++; } //End of while rs.close(); rsDate.close(); stat.close(); connection.close(); %> </table>  </td> </tr>   <tr> <td width="5%" valign="top" bgcolor="#003366" align="center"> </td> <td width="5%"><img border="0" src="images/sub banner4.gif" width="20" height="20"></td> <td width="65%" valign="top"> <td width="25%" valign="top"></td> <tr> <td width="100%" valign="middle" align="left" colspan="4" height="20"

style="border-top: 1 solid #000000"><img border= "0" src="images/blind.jpg" width="400" height="30"></td>

<tr> <td width="100%" valign="middle" bgcolor="#003 366" align="center" colspan="4"

height="20">

54 Appendices


<p class="copyright">© copyright 2002 | Formal Methods Europe</p> </td> </tr> </table>  </body> </html>

55 Appendices


D.2 Q-meetings

<html> <head> <title>FME :: Search the meetings</title> <%@ page contentType="text/html"%> <%@ page import="java.sql.*"%> <%! String connectionURL = "jdbc:mysql://localhost:330 6/fme2"; Connection connection = null; Statement stat = null; ResultSet rs = null; ResultSet rs2=null; String createClause; String orderBy; int counter; static String buildClause(String field, String con tent){ if (content.length()>0) { if (content.indexOf('+')!=-1) return composedTe rm(field, content)+" AND"; else return " "+field+"='"+content+"' AND"; } else return ""; } static String buildDateClause(String field, String content, String order){ if (content.length()==10) return " ("+field+order+"'"+content+"') AND"; else return ""; } static String composedTerm(String field, String co ntent){ int position; String returnString=" ("; while (content.indexOf('+')!=-1) { position=content.indexOf('+'); returnString=returnString+" "+field +"='"+conten t.substring(0,position)+"' OR"; content=content.substring(position+1,content.len gth()); } return returnString+" "+field+"='"+content+"')"; } static String rowBackcolor(int i){ if (i%2==0) return "<tr class='evenRow'>"; else return "<tr>"; } static String printDate(String date){ if (date!=null) return date; else return " "; } static String composedRow(String subject, String u rl, String comment){ String returnString=""; int whereURL; int whereSubject; while (url.indexOf(';')!=-1){ whereURL=url.indexOf(';'); whereSubject=subject.indexOf(';'); returnString=returnString+"<a href='"+url.substr ing(0,whereURL)+"'>"

+subject.substring(0,whereSubject)+"</a><br> "; subject=subject.substring(whereSubject+1,subject .length()-1); url=url.substring(whereURL+1,url.length()-1); } if (comment==null) return returnString+"<a href='"+url+"'>"+subject +"</a>"; else return returnString+"<a href='"+url+"'>"+subject +"</a><br>"+comment; } %> <% Class.forName("org.gjt.mm.mysql.Driver"); connection = DriverManager.getConnection(connectio nURL, "", ""); stat = connection.createStatement(); %> <link rel=StyleSheet href="fme.css" type="text/css " media=screen> </head> <body> <center>

56 Appendices


<table> <tr width="700" height="80"> <td> </td> </tr> <tr valign="top"> <td width="700"> <form> <input type="hidden" name="hiddenOne" VALUE="some Value" > <center><table width="500" border="1" cellspac ing="0" cellpadding="0"

bordercolor="#F2F2F2"> <tr> <th colspan="2" height="30">Perform a query o n the meetings-database</th> <th>Sort<br><img src="./images/up.gif"> & nbsp;

<img src="./images/down.gif"></th> </tr> <tr> <td class="evenRow">Begins on</td> <td><select name="begindateOrder"><option><</o ption><option>=</option> <option selected>></option></select> <input type="text" name="begindate" size="24"> </td> <td><center><input type="radio" value="beginda teA" name="order">

<input type="radio" value="enddateD" name="order "></center></td> </tr> <tr> <td class="evenRow">Ends on</td> <td><select name="enddateOrder"><option><</opt ion><option>=</option> <option selected>></option></select> <input type="text" name="enddate" size="24"></ td> <td><center><input type="radio" value="enddate A" name="order">

<input type="radio" value="enddateD" name="order "></center></td> </tr> <tr> <td class="evenRow">Meeting</td> <td><input type="text" name="meeting" size="30 "></td> <td><center><input type="radio" value="meeting A" name="order">

<input type="radio" value="meetingD" name="order">< /center></td> </tr> <tr> <td class='evenRow'">Location</td> <td><input type="text" name="place" size="30"> </td> <td><center><input type="radio" value="placeA" name="order">

<input type="radio" value="placeD" name="order"></c enter></td> </tr> <tr> <td colspan="3"><p><br> <b>Some remarks</ b><br><br>   <img src="./images/cube.gif"> A + indicates the joining of

arguments by an OR-statement.<br>   <img src="./images/cube.gif"> &nbs p;The dateformatting is YYYY-MM-DD. Example:<i> 2002-05-20 is 20th may 2002.</i>

</p> <center><INPUT TYPE=SUBMIT VALUE="Query"> <INP UT TYPE=RESET VALUE="Reset"> </center><br>

</td> </tr> </table></center> </form> <br><br> <% if(request.getParameter("hiddenOne")!=null) { createClause="WHERE "; createClause=createClause+buildClause("meeting",r equest.getParameter("meeting")); createClause=createClause+buildClause("place",req uest.getParameter("place"));

createClause=createClause+buildDateClause("beginda te",request.getParameter("begindate"),

request.getParameter("begindateOrder"));

createClause=createClause+buildDateClause("enddate" ,request.getParameter("enddate"), request.getParameter("enddateOrder"));

if (createClause.length()<7) createClause=""; else createClause=createClause.substring(0, createClause.length()-3); if(request.getParameter("order")!=null) { createClause=createClause+" ORDER BY "; orderBy=request.getParameter("order");

57 Appendices


createClause=createClause+" "+orderBy.substring( 0,orderBy.length()-1); if (orderBy.charAt(orderBy.length()-1)=='A') cre ateClause=createClause+ " ASC"; else createClause=createClause+ " DESC" ; } rs = stat.executeQuery("SELECT * FROM meeting "+c reateClause); stat = connection.createStatement(); stat = connection.createStatement(); rs2=stat.executeQuery("SELECT date_format(beginda te,'%D %M %Y') as

begindate,date_format(enddate,'%D %M %Y') as endda te FROM meeting "+createClause); } %> </td></tr> </table> </center> <% if(request.getParameter("hiddenOne")!=null) { counter=1; out.println("<center><table border='1' bordercolo r='F2F2F2' cellspacing='0'

cellpadding='0' width='780'>"); out.println(" <tr><th colspan='7' height='50'>T he results of your query</th></tr>"); out.println(" <tr>"); out.println(" <th height='20' width='30'> < /th>"); out.println(" <th height='20' width='120'>Begins on</th>"); out.println(" <th height='20' width='120'>Ends o n</th>"); out.println(" <th height='20'>Meeting</th>"); out.println(" <th height='20'>Place</th>"); out.println(" <th height='20'>Material</th>"); out.println(" <th height='20'>Photos</th>"); out.println(" </tr>"); while(rs.next() && rs2.next()) { out.println(" "+rowBackcolor(counter)); out.println(" <td height='40'><center>"+counter +"</center></td>"); out.println(" <td height='40' width='120'>"+

printDate(rs2.getString("begindate"))+"</td>"); out.println(" <td height='40' width='120'>"+

printDate(rs2.getString("enddate"))+"</td>"); out.print(" <td height='40'>");

out.println(composedRow(rs.getString("meeting"),r s.getString("meetingurl"),null) +"</td>");

out.println(" <td height='40'>"+rs.getString("p lace")+"</td>"); out.print(" <td height='40'>");

out.println(composedRow(rs.getString("material"),r s.getString("materialurl"),null)

+"</td>"); out.println(" <td height='40'><center>"); if (rs.getString("photosurl").length()>0) out.print("<a href='"+rs.getString("photosurl") +"'><img

src='./images/checked.gif'></a>"); else out.print("<img src='./images/unchecked.gif'>") ; out.println("</center></td>"); out.println(" </tr>"); counter++; } //End of while out.println(" <tr><th colspan='7' height='40'>T he query yielded "+(counter-1)

+" hits</th></tr>"); out.println("</table></center>"); orderBy=createClause=""; rs2.close(); rs.close(); stat.close(); connection.close(); } %> </body> </html>

58 Appendices


D.3 insertDB.jsp

<%@page contentType="text/html"%> <%@ page import="java.sql.*"%> <html> <head> <title>Update interface</title> <% if(session.getAttribute("firstRun").equals("")) { String connectionURL = "jdbc:mysql://localhost:3 306/fme2"; Connection connection = null; Statement stat = null; ResultSet rs = null; /* CONNECTING AND CREATING DATABASE STATEMENTS */ Class.forName("org.gjt.mm.mysql.Driver"); connection = DriverManager.getConnection(connecti onURL, "", ""); stat = connection.createStatement(); session.setAttribute("username", request.getParam eter("username")); session.setAttribute("password", request.getPara meter("password")); session.setAttribute("allowed","no"); rs = stat.executeQuery("SELECT * FROM access WHER E password='"

+session.getAttribute("password")+"' AND username ='" +session.getAttribute("username")+"'");

while(rs.next()) { session.setAttribute("accessLevel",rs.getString ("level")); session.setAttribute("allowed","yes"); } session.setAttribute("firstRun","alreadyUsed"); } %> <meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-1"> <link rel=StyleSheet href="fme.css" type="text/css " media=screen> <style fprolloverstyle> A:hover {color: #FF6600; text-decoration:underlin e;} </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <% if(session.getAttribute("allowed").equals("yes")) { int i=6; int accessLevel=Integer.parseInt((String)session. getAttribute("accessLevel")); String [] dataBases={"Events","Meetings","News"," Organisations","Positions","Symposia",

"Access"}; String [] codex={"Gandalf","Aragorn","Anfaulgir", "Sauron","Isildur","Beren","Saruman"};

out.println("<table border='0'><tr><td>"); out.println("<tr><td valign='top'>"); out.println("<table width='250' border='1' border color='#F2F2F2' cellspacing='0'

cellpadding='0'>"); out.print(" <tr><th height='40'>"); out.println("Access granted to</th></tr>"); while(i>=0) { if(accessLevel>=(int)Math.pow(2,i)) { out.print(" <tr><td height='40'>"); out.print("  <img src='./images/arrow .gif'> "); out.print("<a href='insertDB.jsp?selector="+cod ex[i]+"&subject="+dataBases[i]+"'>"

+dataBases[i]+"</a>"); out.println("</td></tr>"); accessLevel=accessLevel-(int)Math.pow(2,i); } i--; } out.println("</table>"); out.println("</td><td width='20'></td><td valign='t op'>"); if(request.getParameter("selector")!=null){ if (request.getParameter("selector").equals(codex [6])) { … } if (request.getParameter("selector").equals(codex [5])) { … } if (request.getParameter("selector").equals(codex [4])) { …

59 Appendices


} if (request.getParameter("selector").equals(codex [3])) { …

} if (request.getParameter("selector").equals(codex [2])) { out.println("<form>"); out.println("<table width='450' border='1' borde rcolor='#F2F2F2' cellspacing='0'

cellpadding='5'>"); out.println(" <tr><th colspan='2' height='40'>Fi ll in these fields to update the "+

request.getParameter("subject")+" database</th></tr >"); out.println(" <tr><td width='120' height='40' cl ass='evenrow'>Date**</td>"); out.println(" <td> <input type='text' name= 'date' size='40'</tr>"); out.println(" <tr><td width='120' height='40' cl ass='evenrow'>News</td>"); out.println(" <td> <textarea name='meeting' cols='30' rows='5'></textarea>

</tr>"); out.println(" <tr><td width='120' height='40' cl ass='evenrow'>News URL</td>"); out.println(" <td> <input type='text' name= 'url' size='40'</tr>"); } if (request.getParameter("selector").equals(codex [1])) { … } if (request.getParameter("selector").equals(codex [0])) { … } out.println(" <tr><td colspan='2' class='evenrow' ><b>Some remarks</b><br><br>");

out.println(" <ul><li>A <b>*</b> means that you ca n insert multiple fields seperated by a<b>;</b> in the appropriate fields.");

out.println(" <li> A <b>**</b> means you must appl y the date formatting (YYYY-MM-DD). </ul><br>");

out.println(" <br><center><INPUT TYPE=SUBMIT VALUE ='Update'>  <INPUT TYPE=RESET VALUE='Reset'></center><br></td></tr>");

out.println("</table>"); out.println("</form>");

} //null out.println("</td></tr></table>"); //maintable } //upper %> </body> </html>

60 Referenties


H o o f d s t u k 5 RE F E R E N T I E S

[1] Want to learn to design effective, attractive websites? http://www.moonlake.net/clinic/.

[2] The HTML 4.0 specification. http://www.w3.org/TR/REC-html40/.

[3] Index DOT HTML. http://www.blooberry.com/indexdot/html/.

[4] The ZDNet Developer Tag Library. http://www.zdnet.com/devhead/resources/tag_library/.

[5] The Cascading Style Sheets, level 1 specification (CSS1). http://www.w3.org/TR/REC-CSS1/.

[6] An Introduction to Cascading Style Sheets (CSS). http://www.webmasterbase.com/article/43/.

[7] Web Review's Style Sheets Reference Guide. http://webreview.com/guides/style/style.html.

[8] D. GOODMAN. JavaScript Bible. IDG Books, 1998.

[9] D. FLANAGAN. JavaScript: The Definitive Guide. O'Reilly & Associates, 3rd Edition June, 1998 .

[10] Slapping together a JSP environment. http://www.devshed.com/Server_Side/Java/JSPDev/page1.html.

[11] Java Server Pages. http://java.sun.com/products/jsp/.

[12] MySQL documentation. http://www.mysql.com/documentation/index.html.

[13] MM Mysql Drivers - Getting started with JDBC. http://www.jlab.org/~kowalski/java/mmJDBC/.

Documents

HOOFDSTUK 1 INLEIDING 1lib.ugent.be › fulltxt › RUG01 › 000 › 728 › 096 › RUG01... · Inhoudstabel De ontwikkeling van een nieuwe website Formal Methods Europe 3.4 Gedetailleerde