Vakgroep Electronica en Informatiesystemen Voorzitter: J. Van Campenhout
Optimaliseren webstek Gezinsbond afdeling Asse-Kobbegem-Bekkerzeel door Pieter Danckaert
Promotor: Prof. R. Van de Walle Thesisbegeleider: Wesley De Neve
Scriptie ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studies van informatica Academiejaar 2002-2003
Optimaliseren website Gezinsbond Asse
2002-2003
Voorwoord In de hedendaagse informatie-maatschappij hebben de computer en het internet een zeer belangrijke plaats ingenomen. Alles wordt meer en meer geautomatiseerd en informatie moet op een efficiënte en duidelijke manier beschikbaar gemaakt worden voor het doelpubliek. Deze tendens is zeker en vast toe te juichen en maakt het leven op veel vlakken een stuk makkelijker. Er is echter ook een nadeel, namelijk dat de mensen meer en meer eisen beginnen te stellen. De oude manier van werken blijkt stilaan niet meer aanvaard te worden. En dat vormt een probleem voor de verenigingen die zich kosteloos willen inzetten voor een bepaald doel, maar niet het vertrouwen krijgen van het publiek. Dikwijls hebben ze gewoon het budget niet om zich aan te passen aan de nieuwe technologieën. Naast een digitale kloof onder het volk, dreigt er dus ook een kloof te ontstaan tussen de rijke verenigingen en de arme. Het feit dat we in deze opleiding de mogelijkheid krijgen om een project voor een vereniging of bedrijf te realiseren is in dit opzicht een belangrijke stap om die kloof niet te laten ontstaan. In dit voorwoord zou ik ook een dankwoordje willen richten naar enkele personen. Zonder hun hulp zou ik nooit tot dit resultaat hebben kunnen komen. In de eerste plaats mijn promotor Prof. R. Van de Walle en mijn thesisbegeleider Wesley De Neve, die mij enkele nuttige tips en suggesties aangereikt hebben. Ook wil ik de bestuursleden van de Gezinsbond Asse bedanken om mij de kans te geven dit project aan te vatten. Ten slotte gaat mijn dank ook uit naar mijn ouders, die mij de kans gegeven hebben nog een jaar bij te studeren.
Toelating tot bruikleen De auteur geeft de toelating deze scriptie voor consultatie beschikbaar te stellen en delen van de scriptie te kopiëren voor persoonlijk gebruik. Elk ander gebruik valt onder de beperkingen van het auteursrecht, in het bijzonder met betrekking tot de verplichting de bron uitdrukkelijk te vermelden bij het aanhalen van resultaten uit deze scriptie.
II
Optimaliseren website Gezinsbond Asse
2002-2003
Overzicht Optimaliseren webstek Gezinsbond afdeling Asse-Kobbegem-Bekkerzeel door Pieter Danckaert
Scriptie ingediend tot het behalen van de academische graad van gediplomeerde in de aanvullende studies van informatica Academiejaar 2002-2003 Promotor: Prof. R. Van de Walle Thesisbegeleider: Wesley De Neve Faculteit Toegepaste Wetenschappen Universiteit Gent Vakgroep Elektronica en Informatiesystemen Voorzitter: J. Van Campenhout Samenvatting Bij het optimaliseren van de website zijn vier aspecten belangrijk. Ten eerste het aanpassen van de lay-out zodat de problemen met het inline frame vermeden worden. Die aanpassing werd gerealiseerd met JavaScript. Het tweede aspect is het aanpassen van de code aan de HTML 4.01 standaard, met in het bijzonder het scheiden van inhoud en opmaak via cascading style sheets. Ten derde werd een databank ontwikkeld (in Access) ter ondersteuning van de tweedehandsbeurs. Het laatste aspect is het realiseren van een internet-toegang tot de databank via ASP. Trefwoorden: website, Access database, ASP, Gezinsbond, CSS
III
Optimaliseren website Gezinsbond Asse
2002-2003
Inhoudstafel VOORWOORD................................................................................................................................II OVERZICHT ................................................................................................................................. III INHOUDSTAFEL.......................................................................................................................... IV AFKORTINGEN ........................................................................................................................... VI INLEIDING.......................................................................................................................................1 I. DE GEZINSBOND........................................................................................................................2 II. DOELSTELLINGEN ..................................................................................................................3 II.1. VERBETEREN LAY-OUT HUIDIGE WEBSITE ..............................................................................3 II.2. AANPASSEN WEBSITE AAN HTML 4.01 STANDAARD ..............................................................3 II.3. DATABASE TER ONDERSTEUNING VAN DE TWEEDEHANDSBEURS ...........................................4 II.3.1. Inschrijving van de verkopers ..........................................................................................4 II.3.2. Het afgeven van de artikels ..............................................................................................4 II.3.3. De verkoop .......................................................................................................................4 II.3.4. Teruggave van resterende artikels plus het geld..............................................................4 II.4. TOEGANG TOT DE DATABANK VIA INTERNET ..........................................................................5 III. ONTWIKKELING.....................................................................................................................7 III.1 LAY-OUT VAN DE WEBSITE......................................................................................................7 III.1.1. ASP of PHP.....................................................................................................................7 III.1.2. JavaScript .......................................................................................................................7 III.1.3. Transparante figuren ......................................................................................................9 III.1.4. Besluit ...........................................................................................................................10 III.2 HTML 4.01 STANDAARD .......................................................................................................11 III.2.1. Opgeven van een document type definition...................................................................11 III.2.2. De meta-tags .................................................................................................................11 III.2.3 Opmaak in CSS ..............................................................................................................12 III.2.4 Besluit ............................................................................................................................15 III.3 ONWIKKELING DATABASE.....................................................................................................16 III.3.2. Tabellen.........................................................................................................................16 III.3.3. Relaties..........................................................................................................................17 III.3.4. Drievoudige in plaats van tweevoudige primaire sleutel..............................................17 III.3.5. Formulieren ..................................................................................................................18 III.3.6. Query’s en rapporten ....................................................................................................19 III.3.7. Database replicatie en synchronisatie ..........................................................................21 III.3.8. Besluit ...........................................................................................................................21 III.4 INTERNET TOEGANG NAAR DATABANK VIA ASP ..................................................................22 III.4.1. Beveiliging ....................................................................................................................22
IV
Optimaliseren website Gezinsbond Asse
2002-2003
III.4.2. De beheerder.................................................................................................................24 III.4.3. De verkopers .................................................................................................................26 III.4.4. Besluit ...........................................................................................................................29 ALGEMEEN BESLUIT .................................................................................................................30 APPENDICES .................................................................................................................................31 APPENDIX A: PRINT VAN DE OUDE WEBSITE MET OPERA .............................................................31 APPENDIX B: PRINT VAN DE OUDE WEBSITE MET INTERNET EXPLORER ......................................32 APPENDIX C: PRINT VAN DE NIEUWE WEBSITE .............................................................................33 APPENDIX D: DATABASE FORMULIER “INGAVE VERKOPERS EN HUN ARTIKELS” ........................34 APPENDIX E: DATABASE FORMULIER “INGAVE VERKOPEN”........................................................35 APPENDIX F: DATABASE RAPPORT “VERKOCHTE ARTIKELS PER VERKOPER” .............................36 APPENDIX G: DATABASE RAPPORT “NIET VERKOCHTE ARTIKELS PER VERKOPER”.....................37 APPENDIX H: DATABASE RAPPORT “VERKOOPSTOTALEN”..........................................................38 APPENDIX I: CD-ROM ...................................................................................................................39 BIBLIOGRAFISCHE REFERENTIES .......................................................................................40 BOEKEN .........................................................................................................................................40 INFORMATIE VAN HET INTERNET ..................................................................................................40 LIJST VAN FIGUREN ..................................................................................................................41 LIJST VAN CODE-FRAGMENTEN ...........................................................................................41
V
Optimaliseren website Gezinsbond Asse
2002-2003
Afkortingen ABK: Asse-Bekkerzeel-Kobbegem DTD: Document Type Definition HTML: Hypertext Markup Language CSS: Cascading Style Sheets ASP: Active Server Pages PHP: Hypertext Preprocessor
VI
Inleiding De reden waarom ik het project van de Gezinsbond gekozen heb, heeft uiteraard te maken met het feit dat mijn vader Secretaris is van de betreffende afdeling. Ik kende de wensen in verband met de tweedehandsbeurs en de website en dus was dit een unieke mogelijkheid om mijn steentje bij te dragen aan de werking van de Gezinsbond. Eerst zal ik uitvoerig uitleggen wat de precieze doelstellingen zijn van deze scriptie. De eerste twee doelstellingen hebben te maken met de website en de laatste twee met de tweedehandsbeurs, één van de activiteiten van de Gezinsbond. Daarna leg ik voor elke doelstelling uit welke oplossing ik ontwikkeld heb en hoe ik dat gerealiseerd heb. Tot slot geef ik nog een klein besluit.
Optimaliseren website Gezinsbond Asse
2002-2003
I. De Gezinsbond De Gezinsbond, vroeger beter bekend als de Bond voor Grote en Jonge Gezinnen, is een vereniging die in heel Vlaanderen sinds lang een grote bekendheid geniet. Zij probeert zich op alle vlakken in te zetten voor de gezinnen: via het aanbieden van allerlei diensten, het organiseren van activiteiten en het opvolgen van het gezinsbeleid. Er zijn meer dan 300 000 gezinnen lid van de bond en meer dan 14000 vrijwilligers zetten er zich dagelijks voor in. Drie specifieke doelstellingen worden door de Gezinsbond nagestreefd: •
Het bevorderen van de solidariteit tussen de gezinnen.
•
De belangen van de gezinnen behartigen.
•
Ijveren voor een gezins- en kindvriendelijk klimaat.
Alle gezinnen kunnen lid worden van de Gezinsbond, zowel grote gezinnen als kleine gezinnen,
jonge
gezinnen,
grootoudergezinnen,
éénoudergezinnen,
nieuw
1
samengestelde gezinnen, enz.
De Gezinsbond is op vier verschillende niveau’s georganiseerd. Het eerste niveau betreft de plaatselijke afdelingen. Zij richten de diensten in, organiseren activiteiten en behartigen de belangen van de gezinnen bij het gemeentebestuur. De afdeling AsseBekkerzeel-Kobbegem is een plaatselijke afdeling. Het tweede niveau is het gewestelijke niveau. Dat heeft als taken het stimuleren van de
afdelingswerking
en
het
organiseren
van
grote
afdelingsoverschrijdende
activiteiten. De afdeling Asse-Bekkerzeel-Kobbegem valt onder het gewest AsseHalle-Vilvoorde. Het provinciale niveau is het derde niveau. Daar worden gezamenlijke standpunten ingenomen voor de gezinnen en wordt de coördinatie verzorgd van de provinciale werking van de dochter-vzw’s van de Bond. De Algemene Vergadering is het hoogste orgaan van de Gezinsbond. De leden van de Algemene Vergadering kiezen een Raad van Beheer die op zijn beurt een hoofdbestuur verkiest.
1
http://www.gezinsbond.be/index_ns.htm
2
Optimaliseren website Gezinsbond Asse
2002-2003
II. Doelstellingen II.1. Verbeteren lay-out huidige website Vanuit het centrale bestuur worden de plaatselijke afdelingen van de Gezinsbond aangemoedigd om een website op te starten om de communicatie met de leden en kandidaat-leden te verbeteren. Ook de afdeling Asse-Bekkerzeel-Kobbegem (voortaan afgekort tot ABK) heeft een website ontwikkeld. Daarbij werd gekozen voor een inline frame. Dit betekent dat de website bestaat uit een index-pagina met de titelbalk, het menu en het inline frame en daarnaast de pagina’s met de eigenlijke informatie. Vraagt men een pagina op via het menu, dan wordt dat ingeladen in het frame. Dit had als voordeel dat als de lay-out aangepast moest worden, dit maar één
keer
hoefde te gebeuren, namelijk in de index pagina. Er zijn echter twee grote nadelen aan die methode. Het eerste is dat de gewone pagina’s met de informatie geen titelbalk en menu hebben, dus kan men in feite geen link leggen naar één van die pagina’s. Doet men dat wel, dan krijgt men enkel die pagina te zien en weet men in feite niet op welke website men zich bevindt. Het tweede nadeel betreft het afprinten van de pagina’s. Ofwel wordt het inline frame niet afgeprint (zie Appendix A), ofwel wordt er slechts een stuk afgeprint (zie Appendix B). Men moet dus de informatie selecteren of de pagina apart opvragen. De eerste doelstelling bestaat er dus in deze twee nadelen uit de weg te ruimen zonder aan de eerste eigenschap te tornen, namelijk dat de lay-out makkelijk aangepast kan worden. II.2. Aanpassen website aan HTML 4.01 standaard Aangezien de eerste versie van de website redelijk snel in mekaar gestoken werd zonder veel kennis van zaken, werd er ook geen belang gehecht aan de standaarden. Zo werd er bijvoorbeeld zelden een document type definition opgegeven (DTD), werden de meta-tags dikwijls over het hoofd gezien en werd de opmaak van de pagina’s bijna volledig verzorgd door html-tags. Het is bijgevolg de bedoeling dat alle pagina’s voorzien worden van een DTD en metatags. Bovendien moet, en dit is de belangrijkste eigenschap van de HTML 4.01 standaard, de opmaak zoveel mogelijk gescheiden worden van de inhoud via het gebruik van cascading style sheets (CSS). De opmaak moet dus maar één keer gedefinieerd worden in een CSS file. Alle HTML pagina’s kunnen daar dan aan gekoppeld worden via een speciale link. Dit draagt ook bij tot de eerste doelstelling, namelijk dat de lay-out makkelijk aangepast moet kunnen worden.
3
Optimaliseren website Gezinsbond Asse
2002-2003
II.3. Database ter ondersteuning van de tweedehandsbeurs Eén van de belangrijke activiteiten van de Gezinsbond is het organiseren van tweedehandsbeurzen voor voornamelijk kinderkledij en speelgoed. In de afdeling ABK wordt tweemaal per jaar een beurs georganiseerd. Om de probleemstelling van de database goed te begrijpen leg ik eerst uit hoe zo’n tweedehandsbeurs in zijn werk gaat, want het is niet zomaar een ordinaire rommelmarkt. II.3.1. Inschrijving van de verkopers Iedereen die artikels wenst te verkopen op de beurs moet zich inschrijven. Het maximaal aantal verkopers is beperkt tot 70 plus enkele bestuursleden (meestal een vijftal). Elke verkoper krijgt een nummer, een leeg formulier en 27 labels. Op het formulier moet hij zijn persoonlijke gegevens invullen en ook een beschrijving van de artikels die hij wenst te verkopen en de bijhorende prijs. Elke verkoper mag maximaal 27 artikels verkopen, waaraan hij telkens een label moet bevestigen met vermelding van het verkopersnummer, het artikelnummer en de prijs. II.3.2. Het afgeven van de artikels 4 uur voor het starten van de beurs, moeten de verkopers hun artikels en hun lijst afgeven aan de verantwoordelijken van de Gezinsbond. De gezinsbond zorgt ervoor dat de artikels overzichtelijk uitgestald worden op tafels. Elk artikel moet voorzien zijn van een label. II.3.3. De verkoop Tijdens de tweedehandsbeurs zelf, wordt elk artikel dat verkocht wordt, aangeduid op de lijst met een markeerstift. Staat bijvoorbeeld op het label van het artikel “verkoper 15, artikel 19, prijs 12 euro”, dan zoekt men de lijst op van verkoper 15 en duidt men daar artikel 19 aan. Een belangrijke opmerking hier is het feit dat de verkopers dus niet zelf aanwezig zijn bij de verkoop. Alles wordt gedaan door de Gezinsbond. Bijgevolg kan er ook niet afgedongen worden op de prijs en kan die dus onder geen enkele voorwaarde veranderen. II.3.4. Teruggave van resterende artikels plus het geld Als de beurs gedaan is, wordt op elke lijst de prijs van alle aangeduide (en dus verkochte) artikels opgeteld. Dit is het bedrag dat de desbetreffende verkoper verdiend heeft. Daarvan moet hij echter tien procent afstaan aan de Gezinsbond als kostendekking. Als de verkoper een bestuurslid is, dan moet hij die tien procent niet afstaan. Hij krijgt dus het volledige bedrag van zijn verkochte artikels uitgekeerd.
4
Optimaliseren website Gezinsbond Asse
2002-2003
Daarna krijgen de verkopers hun resterende artikels, samen met hun geld terug. Een kopie van de lijsten wordt bijgehouden door de Gezinsbond ter controle. Het mag duidelijk zijn dat deze manier van werken vrij traag is, vooral tijdens de verkoop, waarbij men elk artikel moet gaan opzoeken in de bundel van 70 à 80 lijsten. Bovendien kunnen bij de berekening van de totalen gemakkelijk fouten gemaakt worden. De bedoeling is dus dit allemaal te automatiseren via een database in Access. Wat zijn dan de specifieke vereisten van de database? •
Een formulier voor het ingeven van de artikels vóór het beginnen van de tweedehandsbeurs. Per artikel het nummer van de verkoper, het nummer van het artikel en de prijs. De beschrijving niet, want dat zou veel te veel tijd vergen.
•
Een formulier voor het registreren van de verkochte artikels. Daarbij moet het totaal gemaakt worden per koper. Als iemand 5 artikels wenst te kopen, moet het formulier automatisch het totaal berekenen van die 5 artikels.
•
Een rapport per verkoper, waarop zijn verkochte artikels staan, het totaal bedrag van die artikels en het bedrag dat de verkoper ontvangt.
•
Een rapport waarop per verkoper aangegeven staat welke artikels niet verkocht zijn. Dit moet dienen als controle voor de verantwoordelijken van de Gezinsbond na de beurs.
•
Een rapport met enkele totalen, zoals de totale omzet, de winst voor de Gezinsbond, enz…
II.4. Toegang tot de databank via internet De vierde en laatste doelstelling van deze scriptie is het ontwikkelen van een toegang tot de databank via het internet. Hiermee zouden de verkopers hun persoonlijke gegevens en hun artikels zelf kunnen ingeven en hoeft dit dus niet meer net vóór de tweedehandsbeurs gedaan te worden door de verantwoordelijken van de Gezinsbond. Het zal ongetwijfeld zo zijn dat niet alle verkopers een internetverbinding hebben. Voor die mensen blijft het oude systeem geldig, namelijk een lijst die met de hand ingevuld wordt en afgegeven wordt samen met de artikels. Die lijsten zullen dus nog door de mensen van de Bond in de databank ingegeven moeten worden via het formulier.
5
Optimaliseren website Gezinsbond Asse
2002-2003
Een bijkomende mogelijkheid die de webpagina’s moeten bieden, is het afdrukken van een overzicht van al de gegevens die de verkoper ingebracht heeft. Een vergelijkbaar document dus als de lijst die de verkopers vroeger met de pen invulden. De Gezinsbond zal eisen dat de verkoper dat overzicht afprint en mee afgeeft met zijn artikels. Op die manier houdt de Bond toch een vorm van controle. Natuurlijk moeten de webpagina’s voldoende beveiligd zijn. Alleen de verkopers en de administrator mogen toegang krijgen. Bovendien mogen de verkopers enkel toegang hebben tot hun eigen artikels en persoonlijke gegevens.
6
Optimaliseren website Gezinsbond Asse
2002-2003
III. Ontwikkeling Opmerking vooraf: alle bestanden (HTML pagina’s, ASP pagina’s en de database) die ontwikkeld werden staan op de CD-ROM (Appendix I). Ook de oude versie van de website staat er op ter illustratie. III.1 Lay-out van de website III.1.1. ASP of PHP Het belangrijkste probleem hier betreft het vinden van een oplossing voor de nadelen van het inline frame met behoud van de mogelijkheid om de lay-out makkelijk aan te passen. Een eerste oplossing zou kunnen zijn om de website op te maken met php (Hypertext Preprocessor) of asp (Active Server Pages) en de titelbalk en het menu op elke pagina in te laden via include bestanden. Als men dan iets wenst te veranderen aan de layout, hoeft men enkel de include bestanden aan te passen. Vraagt men daarna een pagina opnieuw op, wordt het aangepaste include bestand geladen en krijgt men de nieuwe lay-out te zien. Het nadeel van deze manier van werken is dat de webserver, waarop de site gehost wordt, dan één van die twee talen moet ondersteunen en dat is op dit moment niet het geval. Op dit moment wordt namelijk gebruikt van de gratis webruimte die men krijgt bij het afsluiten van een adsl-abonnement. Verhuizen van de website is bovendien niet direct een optie, toch niet op korte termijn. III.1.2. JavaScript2 Het was dus uitkijken naar een andere oplossing en die heb ik gevonden in javascript. Daarbij is het namelijk mogelijk om te werken met externe scripts. Dat script kan dan via een speciale link ingebracht worden in het HTML document. <script language="JavaScript" type="text/javascript" src="titelbalk.js">
Code-Fragment 1: JavaScript Include
Bovenstaand voorbeeld toont hoe het bestand “titelbalk.js” in de HTML code geïntegreerd wordt. Het javascript zelf, is natuurlijk niet louter HTML code. Het is javascript-code waarbij echter enkel gebruik gemaakt wordt van de functie “document.write()”. Deze functie neemt de string tussen de haakjes en schrijft die naar de browser alsof het gewone statische HTML code is. 2
Dit fragment is een onderdeeltje van het bestand “titelbalk.js”. Bovenaan staat de write-functie en elke nieuwe lijn begint met een plus-teken, gevolgd door een aanhalingsteken, het teken waarmee elke lijn ook eindigt. Helemaal op het eind van het bestand worden de haakjes gesloten en volgt een puntkomma als einde van de functie. Aangezien javascript door alle browsers ondersteund wordt en reeds bijzonder veel gebruikt wordt op het internet, heb ik ervoor gekozen deze methode toe te passen. Het nadeel zou kunnen zijn dat al die HTML code moet omgezet worden in javascript (dus met het plus-teken en de aanhalingstekens), maar er zijn websites op het internet te vinden die dat automatisch voor je kunnen doen.3 Een tweede nadeel is dat sommige zoekmachines de externe .js files niet indexeren. Dat zou dus betekenen dat het menu, dat alle links bevat naar de andere webpagina’s, niet gezien zou worden. Bijgevolg zouden de andere pagina’s van de website ook niet gevonden worden. Echter, er bestaat een “noscript” tag, die de oplossing biedt voor dit probleem. Normaal wordt die tag gebruikt voor browsers die javascript niet ondersteunen. Zij krijgen dan, in plaats van het javascript, de tekst te zien die tussen de noscript tags staat. Men hoeft zich echter niet te beperken tot tekst. Men kan er ook andere HTML tags in nesten. Met andere woorden, men kan er de links inzetten naar de andere pagina’s hetgeen in feite een zeer vereenvoudigd menu oplevert.
Dit is een stukje van de noscript tag die ik heb ingebracht in elke pagina. Dit wordt dus niet getoond als de browser javascript ondersteunt. Als de browser javascript niet ondersteunt, of als het tijdelijk gedeactiveerd is, zoals mogelijk is in Opera, dan wordt het wel getoond. Ook zoekmachines gaan die tags doorlezen en dus ook de links die er in dit geval in staan, zodat ook de andere pagina’s van de website gevonden worden. Hoe zit de website nu in mekaar? De titelbalk is ingebracht in “titelbalk.js”. Het linkermenu is nu “deel1.js” en het rechtermenu is “deel2.js”. Elke pagina van de website includeert die drie javascripts die dan samen de lay-out vormen van de website. III.1.3. Transparante figuren Tot slot heb ik ter verbetering van de lay-out ook nog enkele figuren transparant gemaakt. Drie figuren (turnen.gif, volley.gif en Scw-ahv1.gif) hadden immers een witte achtergrond, wat niet echt ideaal was op de geelachtige achtergrond van de website.
Figuur 1: Niet transparante figuur
Figuur 2: Transparante figuur
Hierboven één van de figuren die transparant gemaakt zijn met de bijhorende achtergrond van de website. Het is duidelijk dat de rechtse afbeelding, die transparant is, veel beter overkomt. De drie hierboven vermelde figuren zijn vervangen door turnentrans.gif, volleytrans.gif en Scwtrans.gif.
9
Optimaliseren website Gezinsbond Asse
2002-2003
III.1.4. Besluit Met dit besluit wil ik even terugkeren naar de doelstelling. Is aan alle voorwaarden voldaan? De eerste was dat de lay-out makkelijk aangepast moet kunnen worden. Dit is inderdaad het geval met de javascriptjes. Voor het nog wat simpeler te maken heb ik een niet-javascript versie van de lay-out opgenomen in het bestand layout.htm, met aanduidingen (via commentaartags) waar de drie verschillende scripts beginnen en eindigen. Via de website die ik hierboven vermeld heb, kan men de code dan makkelijk omzetten in javascript-code. De tweede voorwaarde was dat elke pagina een volwaardige pagina moest zijn, met titelbalk en menu. Dit is nu dus het geval en bijgevolg kan men zonder problemen een link leggen naar eender welke pagina. Ten slotte moesten de pagina’s ook zonder problemen afgeprint kunnen worden. Dit is opnieuw het geval, maar men moet er nu wel nog altijd de titelbalk en het menu bijnemen. Dit is evenwel op te lossen met CSS en daarom verwijs ik hiervoor door naar het volgende hoofdstukje: III.2 HTML 4.01 standaard.
10
Optimaliseren website Gezinsbond Asse
2002-2003
III.2 HTML 4.01 standaard Het tweede belangrijke aspect dat verbeterd moest worden aan de website is de aanpassing aan de HTML 4.01 standaard. Dit heeft als gevolg dat men er vrij zeker van kan zijn dat de website er hetzelfde uitziet in verschillende browsers. En het toevoegen van meta-tags zorgt ervoor dat de zoekmachines, die daar speciaal oog voor hebben, beter hun werk kunnen doen. III.2.1. Opgeven van een document type definition Het eerste element in de aanpassing naar de standaard is het opgeven van een DTD. Dit wil in feite zeggen dat je opgeeft welke versie van HTML je gebruikt hebt om de pagina te maken. In dit geval is dat dus HTML 4.01.
Code-Fragment 4: Document Type Definition
Bovenstaand fragment geeft weer hoe een DTD opgegeven wordt. Dit moet op elke pagina van de website gebeuren. Ik heb gekozen – want er zijn meerdere versies – voor “Transitional”. Dat wil zeggen dat je ook in de HTML code zelf nog opmaak-tags kan gebruiken. Er bestaat ook een “Strict” versie van HTML 4.01, waarbij de opmaak enkel mag gebeuren via CSS. III.2.2. De meta-tags Het tweede belangrijke element is het opgeven van meta-informatie via meta-tags. Deze tags worden gebruikt om informatie te verschaffen over de website. Metainformatie is vooral belangrijk voor zoekmachines, die hiervan gebruik maken voor het indexeren van webpagina’s. Er zijn veel verschillende meta-tags, maar ik heb mij beperkt tot de drie belangrijkste, namelijk “http-equiv”, “description” en “keywords”, die op elke pagina opnieuw gedefinieerd worden.
11
Optimaliseren website Gezinsbond Asse
2002-2003
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content="Website van de gezinsbond afdeling Asse-Bekkerzeel-Kobbegem"> <meta name="keywords" content="gezinsbond, Asse, Bekkerzeel, Kobbegem, gezin, bond, gezinnen, jonge, grote, BGJG"> Code-Fragment 5: Meta-tags van de pagina “index.htm”
III.2.2.1 http-equiv Dit attribuut wordt gebruikt om bijzonderheden door te geven aan de browser waarmee de pagina wordt opgevraagd, bijvoorbeeld de datum tot wanneer de pagina geldig is, welke tekenset wordt gebruikt en wanneer de pagina vernieuwd moet worden. Deze meta-tag heb ik gebruikt in de website om aan te geven dat de tekenset “iso8859-1” gebruikt wordt. Dit is een standaard die normaal door alle browsers ondersteund wordt. III.2.2.2. Description De tweede meta-tag waar ik gebruik van gemaakt heb is de tag met het attribuut “description”. Hier is het dus mogelijk om een beschrijving van de pagina op te geven. Deze tag is belangrijk voor de zoekmachines. III.2.2.3. Keywords De laatste meta-tag die gebruikt werd, is die met het attribuut “keywords.” Ook deze tag is belangrijk voor de zoekmachines en hierbij is het de bedoeling om enkele sleutelwoorden van de pagina op te geven. De sleutelwoorden zijn dikwijls woorden die ook voorkomen in de beschrijving of de titel van de website. In bovenstaand voorbeeld heb ik ook de oude naam van de Gezinsbond, namelijk “Bond voor Grote en Jonge Gezinnen” in stukjes gekapt en elk van die woorden als sleutelwoord opgegeven. III.2.3 Opmaak in CSS Cascading style sheets is de algemene term die gebruikt wordt om te refereren naar verschillende methoden voor het toepassen van stijl-elementen in HTML-pagina’s. Met een stijl bedoel ik alle vormen van vormgeving, zoals lettertype, achtergrond, marges, enz. Het belangrijkste doel van CSS is het scheiden van de inhoud van een pagina van de opmaak. Dit maakt het onderhoud of het aanpassen van een website veel gemakkelijker.
12
Optimaliseren website Gezinsbond Asse
2002-2003
Klassen en overerving Voor alle elementen kan men in de style sheet definiëren hoe ze eruit moeten zien. Alle alinea’s krijgen bijvoorbeeld de opmaak die men in de style sheet koppelt aan het element P. Wil men echter dat één bepaalde alinea een ander letterkorps heeft, dan kan men daar een klasse voor maken en die toewijzen aan die alinea via het attribuut “class”. TD { font-family: verdana; font-size: 10pt; } TD.kolommen { vertical-align: top; width: 127px; border-style: none; }
Code-Fragment 6: CSS: klassen en overerving
In dit voorbeeld is voor het element TD een algemene stijl opgegeven. Er is echter ook een klasse aangemaakt voor dat element. Dit houdt in dat die klasse alle eigenschappen overneemt van de algemene TD-stijl en daar dan zelf nog enkele stijlelementen aan toevoegt. In een klasse kan men ook de algemene stijl aanpassen. Wil men bijvoorbeeld voor de klasse “kolommen” een font-size van 12pt in plaats van 10pt, dan moet men de font-size in die klasse opnieuw definiëren. Er is ook nog een andere manier van overerving, namelijk het principe van ouders en kinderen. Elementen die namelijk binnen andere elementen genest zijn, noemt men de kinderen. Neem bijvoorbeeld het body-element. Dit kan beschouwd worden als een ouder. De stijl die hiervoor gedefinieerd werd, zal overgeërfd worden door de elementen die in de body-tag staan, bijvoorbeeld het P-element. Het cascading model Meestal worden externe style sheets (linked style sheets) gebruikt, maar het is ook mogelijk om bij het element zelf een stijl op te geven, hetgeen men dan een “inline style” noemt. Een derde mogelijkheid is om in de head van een HTML pagina een style te definiëren die tussen style-tags geplaatst wordt. Dit laatste noemt men een “embedded style”. Deze drie manieren voor het definiëren van een style, vormen ook de basis van het cascading model. De style sheet op het laagste niveau krijgt voorrang op de style sheet van een hoger niveau. Inline styles vormen het laagste niveau, dan komen de embedded styles en de externe style sheets hebben het hoogste niveau.
13
Optimaliseren website Gezinsbond Asse
2002-2003
Wat is nu het grote voordeel aan die style sheets? Wel, de opmaak hoeft in feite maar één keer gedefinieerd te worden en daarna kunnen al de pagina’s van de website aan die CSS file gekoppeld worden. Wil men de opmaak van alle pagina’s veranderen, dan verandert men de style sheets en de nieuwe opmaak is onmiddellijk van toepassing op de volledige website. Wenst men slechts één pagina te veranderen, dan kan men gebruik maken van het cascading model.
Code-Fragment 7: Linken van HTML-pagina aan externe style sheet
Bovenstaand fragment geeft weer hoe een HTML-pagina aan een style sheet gekoppeld kan worden. Naast “href” en “type” zijn er nog 3 attributen belangrijk, namelijk “rel”, “title” en “media”. “Rel” en “Title” worden gebruikt om aan te geven of de style sheet persistent, preferred of alternate moet zijn. Persistent wil zeggen dat de style sheet altijd zal gebruikt worden. Daarvoor moet bij “rel” de waarde “StyleSheet” opgegeven worden en mag er geen titel zijn. De style sheets die ik gebruikt heb zijn allemaal persistent. De auteurs van webpagina’s kunnen ook meerdere style sheets maken voor een pagina. De gebruikers kunnen dan zelf kiezen in welke stijl de pagina opgemaakt moet worden. Dat kan bijvoorbeeld interessant zijn voor slechtzienden die dan een stijl kunnen kiezen met grotere letters. Die style sheets moeten dan wel een titel hebben (met het “title” attribuut) en moeten bij “Rel” de waarde “Alternate StyleSheet” krijgen. De auteur van de webpagina kan één van de alternate style sheets wel “preferred” maken door in plaats van “Alternate StyleSheet” gewoon “StyleSheet” op te geven. Het laatste attribuut dat belangrijk is bij het linken naar een externe style sheet is “media”.4 Hierbij kan men opgeven voor welke media-type de style sheet gebruikt moet worden. In bovenstaand voorbeeld is “screen” opgegeven. Dit betekent dat de style sheet gebruikt zal worden bij de opmaak van de pagina wanneer die op een computerscherm weergegeven wordt. Men kan ook “print” opgeven. In dat geval zal die style sheet gebruikt worden voor de opmaak van de pagina als die afgeprint wordt. Nog andere media-types zijn mogelijk.
4
http://www.w3.org/TR/REC-CSS2/media.html
14
Optimaliseren website Gezinsbond Asse
2002-2003
Ik heb van deze mogelijkheid gebruik gemaakt. Elke pagina wordt gelinkt aan twee style sheets: één voor op het computerscherm en één voor af te printen. Dit vooral om ervoor te zorgen dat overtollige informatie, zoals het menu links en rechts, niet afgeprint wordt.5 Bovendien is de titelbalk sterk vereenvoudigd, zodat de figuren die erin staan ook niet afgeprint worden (zie Appendix C). Style sheets afhankelijk van resolutie Bij deze scriptie heb ik er ook voor gekozen om twee verschillende style sheets te gebruiken afhankelijk van de resolutie van het scherm waarop de website wordt bekeken.
Code-Fragment 8: Javascript: Style sheet afhankelijk van resolutie
Dit is het JavaScript waarmee gekozen wordt welke style sheet gebruikt wordt. Als de resolutie van het scherm breder is dan 1024 pixels, wordt “stijl1.css” gekozen, anders “stijl2.css”. Het enige verschil tussen de twee style sheets is het feit dat in “stijl1.css” slechts 92% van de breedte van het scherm gebruikt wordt, om te vermijden dat de website een uitgerokken indruk geeft op schermen die een hoge resolutie hebben. III.2.4 Besluit We kunnen nu zeggen dat de website voldoet aan de HTML 4.01 standaard. Op elke pagina is een DTD opgegeven, werden meta-tags toegevoegd en bovendien is zoveel mogelijk opmaak gedaan in CSS. De website (de HTML-pagina’s en de CSS pagina’s) is volledig gevalideerd door de validators van het World Wide Web Consortium (W3c). Elke pagina werd “valid” verklaard.
5
http://web.uvic.ca/webcoor/resources/css.html
15
Optimaliseren website Gezinsbond Asse
2002-2003
III.3 Onwikkeling database De derde doelstelling is het ontwikkelen van een database ter ondersteuning van de tweedehandsbeurs. Tot nu werd alles op papier gedaan en dat vergde te veel tijd. Het was dus de wens van de Gezinsbond om daarvoor een database te ontwerpen, zodanig dat alles geautomatiseerd kan verlopen. Het programma om de database te maken, was bij voorkeur Access, aangezien sommige bestuursleden daar vertrouwd mee zijn. Het mocht ook niet te veel prestaties vergen van de computer, aangezien de Gezinsbond slechts beschikt over twee laptops die sterk verouderd zijn (een pentium 1 en een pentium 2). III.3.2. Tabellen Het eerste en belangrijkste aspect bij het ontwerpen van een database is kiezen welke tabellen je maakt en welke relaties je ertussen legt. Bedoeling is uiteraard redundante informatie te vermijden, zodat alles wat in de database opgeslagen wordt, consistent is en blijft.
Figuur 3: Tabellen en relaties
De eerste tabel ligt voor de hand, namelijk de tabel van de verkopers met als primaire sleutel hun verkopersnummer. Andere velden zijn naam, voornaam, adresgegevens en het telefoonnummer en e-mail adres. Ook wordt opgegeven of de verkoper een bestuurslid is of niet. Dit voornamelijk om achteraf te bepalen of hij de 10% commissie moet betalen. Ten slotte krijgt elke verkoper een “salt”-waarde en “hash”waarde. Die dienen om via internet toegang te krijgen tot de databank en zullen in dat deel, verderop in deze scriptie, besproken worden.
16
Optimaliseren website Gezinsbond Asse
2002-2003
De tweede tabel is dan de tabel met de artikels die de verkopers wensen te verkopen. Deze tabel heeft vier velden, namelijk het verkopersnummer, het artikelnummer, de beschrijving en de prijs. De primaire sleutel is drievoudig, namelijk de eerste drie vermelde velden. Normaal is een tweevoudige sleutel voldoende, want elk artikel wordt uniek gekenmerkt door de combinatie van het verkopersnummer en het artikelnummer. De reden waarom ik de prijs ook in de primaire sleutel opneem vertel ik in het volgende deeltje (III.3.3. Relaties). De derde tabel is de tabel van de kopers. Deze tabel heeft slechts één veld, namelijk het kopersnummer en dit veld is dan ook de primaire sleutel. De vierde en laatste tabel is de tabel van de verkochte artikels. Deze tabel heeft vier velden, namelijk het kopersnummer, het verkopersnummer, artikelnummer en de prijs. Deze tabel heeft dezelfde drievoudige primaire sleutel als de tabel artikels. III.3.3. Relaties Heel belangrijk is het leggen van de correcte relaties tussen de verschillende tabellen. In dit database-ontwerp zijn er drie relaties. De eerste relatie is de relatie tussen de tabel verkopers en de tabel artikels. Dit is een one-to-many relatie, wat betekent dat elke verkoper meerdere artikels kan verkopen. De vreemde sleutel in de tabel artikels is het veld verkopersnummer. De tweede relatie is wat gecompliceerder. Dit is namelijk een 1-op-1 relatie. Immers, elk artikel mag maar éénmaal verkocht worden en elk artikel dat verkocht wordt, moet en mag slechts éénmaal voorkomen in de tabel artikels. Dit is ook de reden waarom ze dezelfde primaire sleutel hebben. De primaire sleutel van de ene tabel is de vreemde sleutel van de andere tabel. De derde relatie komt sterk overeen met de eerste relatie, namelijk een one-to-many relatie, waarbij de link tussen de twee tabellen het kopersnummer is. Elke koper kan dus meerdere artikels kopen. III.3.4. Drievoudige in plaats van tweevoudige primaire sleutel De tabellen “artikels” en “verkochte artikels” hebben een drievoudige primaire sleutel, daar
waar
een
tweevoudige,
bestaande
uit
het
verkopersnummer
en
het
artikelnummer voldoende is. De prijs werd echter mee opgenomen in de primaire sleutel om een goede controle te kunnen hebben tijdens de verkoop van de artikels. Stel bijvoorbeeld dat we gebruik maken van een tweevoudige sleutel en we willen artikel 10 van verkoper 1 verkopen (dus inbrengen in de tabel van verkochte artikels). Per ongeluk geven we echter artikel 11 in. Dit is normaal een artikel dat bestaat (elke verkoper heeft 27 artikels) en dus ontstaat er een fout.
17
Optimaliseren website Gezinsbond Asse
2002-2003
Als we nu de prijs toevoegen aan de primaire sleutel, moeten we in de tabel verkochte artikels ook de prijs opgeven. Stel artikel 10 van verkoper 1 kost 5 euro en artikel 11 van verkoper 1 kost 12 euro. We maken opnieuw dezelfde fout, namelijk we geven voor het artikelnummer 11 in, in plaats van 10. We moeten nu de prijs ook opgeven, dus krijgen we de combinatie: verkoper 1, artikel 11, prijs 5 euro. Deze combinatie bestaat niet in de tabel artikels en zal dus ook niet aanvaard worden in de tabel verkochte artikels. Mocht artikel 11 nu ook 5 euro kosten, dan leidt de verkeerde ingave tot een combinatie die toch correct is en ontstaat er alsnog een fout. Echter, op deze manier zullen toch de meeste fouten vermeden kunnen worden. III.3.5. Formulieren Twee formulieren zijn nodig in deze database. Het eerste formulier (zie Appendix D) dient voor het ingeven van alle artikels vóór het starten van de tweedehandsbeurs, zodanig dat de tabellen “verkopers” en “artikels” volledig ingevuld kunnen worden. Dit formulier heeft als naam “ingave verkopers en hun artikels”. Het bestaat enerzijds uit de velden van de tabel verkopers, zoals verkopersnummer, adresgegevens, enz. en anderzijds uit een subformulier waarin de artikels van die verkoper ingevuld kunnen worden. De beschrijving wordt niet ingevuld, want dat zou te veel tijd vergen. Ze wordt enkel ingevuld als de verkoper via internet zijn gegevens doorstuurt. Het subformulier
heeft
als
naam
“artikels
subform”
en
is
gekoppeld
aan
het
hoofdformulier via het verkopersnummer. Elk artikel in het subformulier krijgt dus automatisch het verkopersnummer van de verkoper die in het hoofdformulier ingevuld werd. Van de prijzen die ingevuld worden in het subformulier, wordt ook een totaal gemaakt. Dit kan dienen als controle. Komt het totaal overeen met het totaal van de artikels op de ingevulde lijst, mag men er van uitgaan dat alles correct is. Het tweede formulier (zie Appendix E) is het formulier dat gebruikt moet worden tijdens de verkoop. Het heeft dezelfde opbouw als het eerste en heeft als naam “ingave verkopen”. Het bestaat uit het veld van de tabel “kopers”, namelijk het kopersnummer, en een subformulier. Het subformulier, dat als naam “verkochte artikels subform” heeft, bevat de velden uit de tabel “verkochte artikels” en is gekoppeld aan de tabel “kopers” via het veld “nummer koper”. Elk artikel in het subformulier krijgt dus het kopersnummer dat bovenaan in het hoofdformulier ingevuld werd. Per koper wordt ook het totaal gemaakt van de prijzen van de artikels die hij wenst te kopen.
18
Optimaliseren website Gezinsbond Asse
2002-2003
III.3.6. Query’s en rapporten Als de tweedehandsbeurs gedaan is, moet het natuurlijk mogelijk zijn om op een overzichtelijke manier de resultaten te krijgen. Wie heeft welke artikels verkocht, welke artikels werden niet verkocht en wat is de totale omzet en winst voor de Gezinsbond? Allemaal vragen waar de rapporten een antwoord op moeten bieden. Het eerste rapport (zie Appendix F) is het rapport “verkochte artikels per verkoper”. Hierin komen de gegevens van de verkoper, de artikels die hij verkocht heeft, voor welk totaal bedrag, en wat de verkoper ontvangt. Dit laatste is 90% van het totaal bedrag als de verkoper een gewone verkoper is, maar is 100% als de verkoper een bestuurslid is. Dit rapport is gebaseerd op de volgende Query:
SELECT
[Verkochte
[Verkopers].[Straat],
artikels].[Verkoper],
[Verkopers].[Naam],
[Verkopers].[Voornaam],
[Verkopers].[Nummer],
[Verkopers].[Postnr],
[Verkopers].[Gemeente],
[Verkopers].[Telefoonnummer], [Verkopers].[Bestuurslid], [Verkochte artikels].[Artikel], [Verkochte artikels].[Prijs], [Artikels].[Beschrijving] FROM Verkopers INNER JOIN (Artikels INNER JOIN [Verkochte artikels] ON ([Artikels].[Nummer verkoper]=[Verkochte
artikels].[Verkoper])
artikels].[Artikel])
([Artikels].[Prijs]=[Verkochte
AND
AND
([Artikels].[Nummer artikels].[Prijs]))
ON
artikel]=[Verkochte [Verkopers].[Nummer
verkoper]=[Artikels].[Nummer verkoper];
Code-Fragment 9: Query "verkochte artikels per verkoper"
In de Select-clause geeft men de velden op die men in het rapport wil opnemen. In de From-clause moet opgegeven worden uit welke tabellen de gegevens komen. Met een join worden tabellen samengevoegd. In dit geval is het tweemaal een inner join, wat wil zeggen dat records uit één van beide tabellen die geen corresponderend record hebben in de andere tabel niet getoond worden in de recordset. Hier worden dus de tabellen “verkopers” en “artikels” samengevoegd voor elk verkopersnummer dat in de twee tabellen voorkomt. Daarnaast worden ook de tabellen “artikels” en “verkochte artikels” samengevoegd zodat enkel de artikels die in de twee tabellen voorkomen in de query terechtkomen.
19
Optimaliseren website Gezinsbond Asse
2002-2003
Het tweede rapport (zie Appendix G) is het rapport waarop de niet verkochte artikels weergegeven wordt per verkoper. Dit is vooral nuttig voor de Gezinsbond zelf, zodat zij kunnen controleren of de artikels die niet verkocht werden, wel degelijk nog aanwezig zijn. Het rapport is gebaseerd op de volgende query:
SELECT [Artikels].[Nummer verkoper], [Artikels].[Nummer artikel] FROM Verkopers INNER JOIN (Artikels LEFT JOIN [Verkochte artikels] ON ([Artikels].[Nummer verkoper]=[Verkochte
artikels].[Verkoper])
artikels].[Artikel])
([Artikels].[Prijs]=[Verkochte
AND
AND
([Artikels].[Nummer artikels].[Prijs]))
ON
artikel]=[Verkochte [Verkopers].[Nummer
verkoper]=[Artikels].[Nummer verkoper] WHERE ((([Verkochte artikels].[Verkoper]) Is Null));
Code-Fragment 10: Query "niet verkochte artikels per verkoper"
Hier worden weer de twee tabellen “verkopers” en “artikels” samengevoegd via een inner join. Ook de twee tabellen “artikels” en “verkochte artikels” worden samengevoegd, maar dan wel via een “left join”. Dat wil zeggen dat alle records uit de eerste tabel opgenomen worden plus de records uit de tweede tabel waarvoor een corresponderende record in de eerste tabel bestaat. Heel belangrijk is de Where-clause die een extra voorwaarde oplegt. In dit geval wordt opgegeven dat in de tabel van de verkochte artikels niets mag ingevuld zijn in het veld “verkoper”. Dit veld mag ook een ander veld zijn van die tabel. Dus, alle artikels uit de tabel “artikels” worden opgenomen, behalve die die ook in de tabel “verkochte artikels” staan. Het derde rapport (zie Appendix H) is het rapport met de totalen. Hier willen we te weten komen hoeveel artikels elke verkoper verkocht heeft en voor welk totaal bedrag. Belangrijk is ook te weten of de verkoper een bestuurslid is of niet, aangezien de bestuursleden geen 10% commissie moeten afstaan. De query waarop dit rapport gebaseerd is, is de volgende:
SELECT [Verkopers].[Nummer verkoper], Count([Verkochte artikels].[Artikel]) AS CountOfArtikel, Sum([Verkochte artikels].[Prijs]) AS SumOfPrijs, [Verkopers].[Bestuurslid] FROM Verkopers INNER JOIN [Verkochte artikels] ON [Verkopers].[Nummer verkoper]=[Verkochte artikels].[Verkoper] GROUP BY [Verkopers].[Nummer verkoper], [Verkopers].[Bestuurslid];
Code-Fragment 11: Query "verkoopstotalen"
20
Optimaliseren website Gezinsbond Asse
2002-2003
In de Select-clause zien we dat de verkochte artikels geteld worden (count) en dat van de prijs de som gemaakt wordt (sum). In de From-clause zien we terug een inner join, waarbij de tabellen “verkopers” en “verkochte artikels” samengevoegd worden. Enkel de verkopers die in de twee tabellen voorkomen, worden in de query opgenomen. Ten slotte is er hier ook een Group-By-clause om de records te groeperen. Er wordt gegroepeerd per verkoper en per bestuurslid. Alle records met gemeenschappelijke waarden in elke Group-By kolom vormen een groep. Aangezien een verkoper ofwel een bestuurslid is ofwel niet (hij kan dus niet beiden tegelijk zijn), geeft dit hetzelfde resultaat als zou er enkel per verkoper gegroepeerd worden. III.3.7. Database replicatie en synchronisatie Een zeer handige feature in Access is de replicatie. Dat houdt in dat je van je database een exacte kopie kan maken. Je kan dan in de twee databases tegelijk gegevens invullen. Achteraf kunnen de databases gesynchroniseerd worden, zodat de gegevens met elkaar in overeenstemming gebracht worden. Op dat moment hebben we opnieuw twee identieke databases. In praktijk betekent dat dus dat vóór het begin van de beurs twee computers gebruikt kunnen worden voor het ingeven van de artikels uit de lijsten. Hetzelfde geldt tijdens de verkoop zelf, zodat er met twee kassa’s gewerkt kan worden en de rijen aan de kassa niet te lang worden. III.3.8. Besluit Deze database zal ongetwijfeld de tweedehandsbeurs een heel stuk vlotter doen verlopen. Het zal sneller gaan aan de kassa en er zullen minder fouten gemaakt worden bij het maken van totalen. Achteraf krijgen de verkopers een mooi overzicht van wat ze verkocht hebben en voor welk bedrag. De Gezinsbond kan snel controleren of alle niet verkochte artikels nog aanwezig zijn en krijgt op een overzichtelijke manier de resultaten van de beurs via het rapport “verkoopstotalen”.
21
Optimaliseren website Gezinsbond Asse
2002-2003
III.4 Internet toegang naar databank via ASP Met de ontwikkeling van de databank zijn er veel problemen opgelost, maar is er ook een probleem bijgekomen. Alle gegevens moeten namelijk voor de start van de tweedehandsbeurs in de databank ingevoerd worden. 70 á 80 verkopers met telkens tot 27 artikels geeft dat er een goede 2000 artikels ingegeven moeten worden.Via replicatie kan dat werk gespreid worden, maar toch, het zou nog altijd een groot en intensief werk zijn. Het zou dus interessant zijn, mochten de verkopers zelf via internet hun gegevens in de databank inbrengen. Zo’n toegang tot de databank kan ontwikkeld worden in ASP, een scripting-taal die op de server uitgevoerd wordt. III.4.1. Beveiliging Een heel belangrijk aspect bij de internettoegang tot een databank is de beveiliging. Enkel de verkopers en de beheerder mogen toegang krijgen en bovendien mogen de verkopers enkel toegang krijgen tot hun eigen gegevens. Dit kan allemaal opgelost worden met een paswoord-systeem. De verkopers krijgen een paswoord en moeten dat dan samen met hun gebruikersnaam- of nummer ingeven om in te loggen. Dan moet op de server op één of andere manier nagekeken worden of de combinatie correct is, en indien dat zo is, wordt de toegang verleend. One-way hash functie6 Het gemakkelijkste zou zijn om de paswoorden gewoon op te slaan in de database. Echter, dan kunnen de paswoorden gezien worden door de beheerders van de database, dus dat zou toch de privacy in enige mate schenden. Men kan de paswoorden ook coderen met een algoritme of encriptie-standaard, maar dan nog is het mogelijk om die code om te zetten in de echte paswoorden. Ook dat is geen ideale manier van werken. Het beste zou zijn mochten de paswoorden geëncrypteerd worden zodanig dat die code niet terug omgerekend kan worden naar het originele paswoord. Zo’n encryptiealgoritme bestaat en wordt een “one-way hash” functie genoemd.
6
http://local.15seconds.com/issue/000217.htm
22
Optimaliseren website Gezinsbond Asse
2002-2003
Salt-waarde Een database die beveiligd is met hash-geëncrypteerde paswoorden is niet helemaal veilig, Een hacker zou een lijst kunnen maken van de – bijvoorbeeld – één miljoen meest gebruikte paswoorden en dan uit elk van hen een hash berekenen. Als hij de database bemachtigt, kan hij de hash-waarden in de database vergelijken met zijn eigen lijst en kijken welke dezelfde zijn. Dit is wat men noemt een “dictionary attack”. Om die praktijk wat moeilijker te maken, wordt een salt-waarde toegevoegd aan het paswoord, vooraleer het omgezet wordt in een hash-waarde. Een salt-waarde is een willekeurige string en wordt ook opgeslagen in de database. Als men nu een dictionary attack wil doen, moet men de hash-waarden berekenen voor alle mogelijke salt-waarden. Dit is bijna onmogelijk. Het is wel een feit dat salt geen oplossing biedt voor een aanval op een individueel paswoord. Het blijft dus belangrijk dat de paswoorden moeilijk te raden zijn. Praktisch Hoe gaan we nu te werk? Eerst en vooral moet de database volledig leeg zijn. Vervolgens wordt hij op de server gezet. Daarna roepen we de file “firstpwd.asp” aan, die een eerste record creëert in de tabel verkopers met als verkopersnummer 100. Dit is de beheerder. Tegelijk wordt een willekeurig paswoord gemaakt, bestaande uit tien tekens, dat op het scherm verschijnt. Er wordt ook een salt-value gemaakt en opgeslagen in de database. Het paswoord en de salt-waarde worden dan samengevoegd waaruit een hash-waarde berekend wordt die ook opgeslagen wordt in de database.7 Daarna kan de beheerder inloggen via “login.htm”
7
De hash-functie is integraal overgenomen van “http://www.aspfree.com/asp/hash1way.asp”
23
Optimaliseren website Gezinsbond Asse
2002-2003
III.4.2. De beheerder
Figuur 4: beheerder diagram
Dit is de weg die de beheerder kan afleggen. Hij vult zijn nummer en paswoord in in het formulier op “login.htm”. Die gegevens worden doorgestuurd naar “login.asp”. Als het verkopersnummer 100 is en het paswoord correct is, wordt een session object aangemaakt met als waarde het verkopersnummer en gebeurt er een redirect naar “adminstart.asp”. Als het paswoord fout is, komt er een foutmelding. De pagina’s “adminstart.asp”, “createallpwd.asp” en “createonepwd.aso” zijn enkel bedoeld voor gebruik door de beheerder. Daarop wordt dan ook elke keer gecontroleerd of de beheerder wel degelijk ingelogd is. Het session object moet dus gelijk zijn aan 100.
24
Optimaliseren website Gezinsbond Asse
2002-2003
Dim vnr vnr = session("login") If vnr<>100 Then Response.Redirect "fout.htm" End if
Code-Fragment 12: Redirect voor als de beheerder niet ingelogd heeft
Als het session object verschillend is van 100, gebeurt er een redirect naar “fout.htm”. Als het session object wel 100 is, verschijnt de pagina, waarin zich drie formulieren bevinden. 1. Met het eerste formulier kan de beheerder met een simpele druk op de knop 99
verkopers
creëren
in
de
tabel
“verkopers”
van
de
database
(“createallpwd.asp”). De nummers van de verkopers worden samen met het paswoord op het scherm getoond. Deze lijst kan makkelijk geïmporteerd worden in Excel. Als iemand zich inschrijft als verkoper, krijgt hij dus een verkopersnummer samen met het paswoord uit deze lijst. Het duurt wel even voor de lijst op het scherm verschijnt, want de server moet veel berekeningen maken: een random paswoord, een random salt-waarde en de hash-waarde. En dit 99 keer. 2. Via het tweede formulier kan de beheerder een nieuw paswoord maken voor een
specifieke
verkoper,
wanneer
die
zijn
paswoord
vergeten
is
(“createonepwd.asp”). Hier moet enkel het verkopersnummer opgegeven worden. Het is niet mogelijk om via dit formulier een nieuw paswoord te maken voor de beheerder. 3. Met het derde formulier kan de beheerder zijn paswoord veranderen. Hij moet eerst zijn huidig paswoord ingeven, dan zijn nieuw paswoord en dan nogmaal zijn nieuw paswoord. De gegevens van dit formulier worden doorgestuurd naar “changepwd.asp”. Deze pagina is ook bereikbaar voor de gewone gebruikers, dit evenwel via een ander formulier. Het session object (om te controleren of de gebruiker ingelogd is) moet hier dus niet gelijk zijn aan 100, maar moet tussen 1 en 100 liggen (1 en 100 inbegrepen).
25
Optimaliseren website Gezinsbond Asse
2002-2003
III.4.3. De verkopers
Figuur 5: Verkopers diagram
Dit is de weg die een gewone verkoper kan afleggen. Inloggen gebeurt op dezelfde manier als bij de beheerder. Als dat met succes gebeurd is, wordt een session object aangemaakt met als waarde het verkopersnummer en deze keer wordt de gebruiker doorgestuurd naar “userstart.asp”. Op elke verdere pagina wordt eerst gecontroleerd of de gebruiker wel degelijk ingelogd is via het session object. Is dat niet het geval dan gebeurt er een redirect naar “fout.htm”. Als een verkoper zijn paswoord vergeten is, kan hij een nieuw paswoord opvragen op de login-pagina, op voorwaarde dat hij zijn e-mail adres reeds ingegeven heeft in de databank. De verkoper moet zijn nummer en e-mail adres invullen in het daarvoor voorziene formulier. Komt het e-mail adres overeen met dat wat in de databank staat, dan wordt een nieuw paswoord gemaakt en opgestuurd naar dat adres. Het wordt dus niet op het scherm getoond, om misbruik te voorkomen. Bovenaan de pagina’s van de gewone gebruikers staat er ook een navigatielijn, zodat men gemakkelijk kan zien waar men zich juist bevindt en men makkelijk kan terugkeren naar een vorige pagina.
26
Optimaliseren website Gezinsbond Asse
2002-2003
III.4.3.1. Startpagina voor de verkopers Eénmaal op de startpagina hebben de verkopers de keuze uit twee mogelijkheden. Ofwel kiezen ze om hun paswoord aan te passen, ofwel gaan ze naar de databank. Het formulier om het paswoord aan te passen is hetzelfde als bij de beheerder. Eerst moet het oude paswoord ingevuld worden, dan het nieuwe en daarna opnieuw het nieuwe paswoord. Is alles correct, dan wordt het paswoord veranderd. III.4.3.2. De databank Als de gebruiker gekozen heeft om naar de databank te gaan, heeft hij daar opnieuw drie mogelijkheden. Eerst wordt gevraagd om de persoonlijke gegevens in te vullen. Kiest men hiervoor, dan komt men op het formulier waar alles ingevuld kan worden. Alle velden in dit formulier (behalve de twee laatste) worden gevalideerd met een javascript. function doubletrim (s) { return s.replace(/\s\s/, " ") }
Code-Fragment 13: javascript: verwijderen van dubbele spaties
Eerst wordt de waarde die ingevuld werd “getrimd”. Dat wil zeggen dat spaties vooraan, achteraan en dubbele spaties verwijderd worden. Het fragment hierboven zet dubbele spaties om in een enkele spatie via een reguliere expressie.8,9 Daarna wordt gecontroleerd of hetgeen ingevuld werd, correct is. Met correct bedoel ik dat het aanvaard zal worden door de databank.
var naam = new String(document.myform.naam.value); tnaam = trim(naam); if (tnaam=="" || tnaam.length>50) { alert("Uw naam is niet ingevuld of is te lang."); fout=1; }
Code-Fragment 14: javascript: validatie van het veld "naam"
Het fragment hierboven bijvoorbeeld, controleert het veld waarin de familienaam ingevuld moet worden. Het mag – na het trimmen – niet leeg zijn en niet langer dan 50 tekens. Als het fout is, wordt een mededeling getoond met de woorden “Uw naam is niet ingevuld of is te lang.” en wordt de variabele “fout” op 1 gezet. Is de variabele “fout” na de validatie nog altijd 0, dan worden de gegevens doorgestuurd. Via het session object weet de server voor welke verkoper de gegevens ingevuld moeten worden. In het andere geval, dus als de variabele de waarde 1 heeft, betekent dit dat het formulier niet correct ingevuld werd en worden de gegevens niet doorgestuurd. De gebruiker moet ze eerst verbeteren. Het zal ongetwijfeld zo zijn dat er nog verkeerde gegevens doorgestuurd kunnen worden, maar dit zal dan te wijten zijn aan kwade wil vanwege de gebruiker. De database zal er niet door crashen, maar enkel een foutmelding geven. Heel erg is dat dus niet. Na het invullen van de persoonlijke gegevens is het de bedoeling dat de verkoper zijn artikels ingeeft in de databank. Dit via het formulier op de pagina “artikelsform.asp”. Er zijn 27 rijen, één voor elk artikel (het maximaal aantal artikels is immers 27). Het nummer van het artikel kan niet veranderd worden. Dus per artikel moet enkel de prijs en de beschrijving opgegeven worden. Daarna moeten de gegevens doorgestuurd worden. Dit formulier wordt, in tegenstelling tot het vorige, server-side gevalideerd. Op die manier worden de gegevens, die wel juist ingevuld zijn, toch al in de databank opgenomen. Als er voor een artikel een fout ingegeven is, bijvoorbeeld er werd geen prijs maar wel een beschrijving ingevuld, dan wordt dat niet opgenomen in de databank. Op de bevestigingspagina “artikels.asp” komt bovenaan wel een lijst met fouten, waarin dus staat welke artikels fout ingegeven zijn. Na die lijst met fouten staat er ook een knop met de mogelijkheid terug te keren naar het invulformulier zonder dat de gegevens die fout ingevuld zijn, verloren gaan. Dit is in feite een simulatie van de “back”-knop van de browser. Als de gebruiker via de link in de navigatiebalk bovenaan zou terugkeren, dan zullen de foutief ingevulde gegevens verdwenen zijn, aangezien het formulier in de databank gaat kijken welke artikels er reeds instaan. 28
Optimaliseren website Gezinsbond Asse
2002-2003
Code-Fragment 15: Simulatie van de "back"-knop
Opmerking 1: Wanneer de gegevens vanuit het formulier doorgestuurd worden, worden eerst alle artikels voor die verkoper gewist uit de database. Anders zou het te veel werk vragen om voor elk artikel te controleren of er al dan niet iets veranderd is. Opmerking 2: Bij dit formulier heb ik de session timeout op 60 minuten gezet, zodat de gebruiker voldoende tijd krijgt om zijn gegevens in te vullen. Om toch te vermijden dat de sessie verloopt voordat de gegevens doorgestuurd zijn, heb ik ook een Javascript10 toegevoegd, dat na 55 minuten de volgende melding geeft: “Uw sessie dreigt beëindigd te worden. Stuur de gegevens die u reeds ingegeven hebt nu door en keer daarna terug. Uw sessie wordt dan vernieuwd." Als de twee formulieren ingevuld zijn, kan de verkoper een overzicht krijgen van al zijn gegevens. Het is de bedoeling dat deze pagina afgeprint wordt en mee afgegeven wordt met de artikels voor de start van de tweedehandsbeurs. Om zeker te zijn dat het op een goede manier afgeprint wordt, heb ik ook een extra css file gemaakt, zoals ik dat ook gedaan heb voor de website van de Gezinsbond. Ten slotte is het voor de gebruikers ook altijd mogelijk om hun gegevens te veranderen. III.4.4. Besluit Deze internet-toegang is een belangrijke aanvulling voor de databank. Uiteraard zullen niet alle verkopers de mogelijkheid hebben om hun gegevens in te vullen via internet. Echter, als 30% dat wel doet, dan zal dat toch al een grote vooruitgang betekenen. En in de toekomst zal dat percentage ongetwijfeld verhogen.
Algemeen besluit We kunnen besluiten dat alles wat gevraagd werd, ook gerealiseerd werd. Enerzijds is er de website die overzichtelijk en functioneel is. De pagina’s kunnen via het toepassen van CSS makkelijk afgeprint worden en de standaarden worden gerespecteerd. Oude browsers, die de nieuwe standaarden niet ondersteunen, zijn natuurlijk een beetje de dupe. De technologie gaat echter met rasse schreden vooruit en hoe langer men zich blijft vastklampen aan oude technologieën, hoe meer men achterop geraakt. Ten tweede is er de database. Deze is uitvoerig getest en werkt perfect. Echter, de beurs wordt slechts tweemaal per jaar georganiseerd en de eerstvolgende keer in oktober. Pas dan zullen we te weten komen of de database aan de verwachtingen voldoet. Ik engageer me hierbij om eventuele aanvullingen of verbeteringen aan te brengen, mocht dat nodig blijken. De ASP-pagina’s vormen het laatste deel van dit project. Ook deze werden uitvoerig getest. Belangrijk zal zijn hoeveel mensen hiervan echt gebruik gaan maken om hun artikels in te geven. Het succes van deze toepassing hangt dus van hen af. Ik hoop dat ik met deze scriptie de Gezinsbond een stap vooruit geholpen heb. De website staat al online, maar voor de database en de ASP-pagina’s is het aan hun om er gebruik van te maken.
30
Optimaliseren website Gezinsbond Asse
2002-2003
Appendices Appendix A: Print van de oude website met Opera
31
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix B: Print van de oude website met Internet Explorer
32
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix C: Print van de nieuwe website
33
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix D: Database formulier “Ingave verkopers en hun artikels”
34
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix E: Database formulier “Ingave verkopen”
35
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix F: Database rapport “Verkochte artikels per verkoper”
Verkochte artikels Verkoper Naam
1 Testnaam
Voornaam Testvoornaam
Postnr + Gemeente
1730 Asse
Telefoonnummer
05/123,45,67
Straat + NrTeststraat 5 Artikel
Prijs
1
1,00 €
2
2,00 €
3
3,00 €
4
4,00 €
5
5,00 €
7
7,00 €
8
8,00 €
10
10,00 €
Beschrijving
Aantal verkochte
8
Totale
40
Te ontvangen (90%):
36 euro
dinsdag 27 mei 2003
euro
Resultaat tweedehandsbeurs Gezinsbond
36
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix G: Database rapport “Niet verkochte artikels per verkoper”
Niet verkochte artikels per verkoper Verkoper nummer:
1
Verkoper nummer:
2
Verkoper nummer:
3
6
1
4
9
2
5
4
7
6
8
8
9
11
10
13
11
17
12
19
13
21
14
22
15
23
16
24
17
25
18
26
19
27
20
21 22 23 24 25 26 27
dinsdag 27 mei 2003
Pagina 1 van 1
37
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix H: Database rapport “Verkoopstotalen”
Verkoopstotalen Nr
# verkochte Tot. bedrag Bestuurslid Teruggegeve
Winst
1
8
40,00 €
36,00 €
4,00 €
2
11
258,00 €
232,20 €
25,80 €
3
4
36,00 €
36,00 €
0,00 €
23
334,00 €
304,20 €
29,80 €
Totalen: 3
dinsdag 27 mei 2003
Page 1 of 1
38
Optimaliseren website Gezinsbond Asse
2002-2003
Appendix I: CD-rom
39
Optimaliseren website Gezinsbond Asse
2002-2003
Bibliografische referenties Boeken [1]
M.E. Holzschlag, Special Edition Using XHTML, QUE, (2001)
[2]
B. Pfaffenberger, B. Karow, HTML 4.01 Het Complete Handboek, Academic Service,
(2001) [3]
E.A. Smith, Active Server Pages 3.0 Weekend Snelcursus, Academic Service, (2001)
[4]
E. Bott, W. Leonhard, Special Edition Using Microsoft Office 2000, (1999)
[5]
M. Andries, Informatica-Bureautica: Microsoft Access 97, EHSAL, (1999)
Informatie van het internet [1]
http://www.gezinsbond.be/index_ns.htm, (Doelstellingen van de Gezinsbond)
Lijst van figuren Figuur 1: Niet transparante figuur .......................................................................9 Figuur 2: Transparante figuur .............................................................................9 Figuur 3: Tabellen en relaties ...........................................................................16 Figuur 4: beheerder diagram ............................................................................24 Figuur 5: Verkopers diagram ............................................................................26
Lijst van Code-Fragmenten Code-Fragment 1: JavaScript Include
