Optimaliseren van de webstek van transportfirma Collitax

Universiteit Gent Faculteit Toegepaste Wetenschappen

Vakgroep Elektronica en Informatiesystemen - Multimedia Lab

Optimaliseren van de webstek van transportfirma Collitax Door Robby Vermaele

Promotor: Prof. R. Van de Walle Scriptiebegeleider: R. De Sutter

Scriptie ingediend tot het behalen van het diploma van gediplomeerde in de aanvullende studies van informatica

Academiejaar 2002-2003

Universiteit Gent Faculteit Toegepaste Wetenschappen

Vakgroep Elektronica en Informatiesystemen - Multimedia Lab


Promotor: Prof. R. Van de Walle Scriptiebegeleider: R. De Sutter

Scriptie ingediend tot het behalen van het diploma van gediplomeerde in de aanvullende studies van informatica

Academiejaar 2002-2003

Voorwoord Gedurende de 6 weken waarover deze scriptie liep, heb ik zeer veel ervaring opgedaan over het ontwerp van websites. Door de grote zelfstandigheid was ik genoodzaakt om veel zelf op te zoeken en te leren. Het was echter een zeer leerrijke ervaring en ik heb deze 6 weken met plezier voltooid. Ook het eigenlijke ontwerp van de website sprak me heel erg aan. Graag had ik ook nog een dankwoord gericht aan alle personen die hebben bijgedragen tot het welslagen van dit eindwerk. Deze mensen hebben er mede voor gezorgd dat ik dit eindwerk tot een goed einde heb kunnen brengen. Hierbij speciale dank aan de heren Dirk Platteau en Hervé Buisset, zaakvoerders van de firma Collitax BVBA, die mij de unieke kans gegeven hebben om de website van hun bedrijf te ontwikkelen. In het bijzonder aan de heer Hervé Buisset, die hoofdzakelijk heeft ingestaan voor de opvolging van dit project. Graag zou ik ook Prof. R. Van de Walle willen bedanken, omdat hij bereid was als promotor te fungeren voor dit zelf aangebrachte onderwerp. Verder nog een woord van dank voor mijn begeleider Robbie De Sutter, die samen met het assistententeam van Prof. Van de Walle steeds bereid was om me met de nodige raad en daad bij te staan. Tot slot een woord van dank aan allen die hebben meegewerkt aan deze scriptie, maar niet bij naam vernoemd werden.

De toelating tot bruikleen "De auteur(s) geeft(geven) 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."


Scriptie ingediend tot het behalen van het diploma van gediplomeerde in de aanvullende studies van informatica Academiejaar 2002-2003

Promotor: Prof. R. Van de Walle Scriptiebegeleider: R. De Sutter Faculteit Toegepaste Wetenschappen Universiteit Gent Vakgroep Elektronica en Informatiesystemen - Multimedia Lab

Samenvatting: De firma Collitax had reeds een eenvoudige website. Ze bestond uit 3 delen: Collitax BVBA, Collitax Express en de Collitax Groep. In de scriptie komen vooral BVBA en Express aan bod. Wegens het beperkte tijdsbestek hebben we ervoor geopteerd om prioriteit te geven aan de site van Collitax BVBA. Later zal alles overgezet worden naar de website van Collitax Express. Onderwerp van deze scriptie was het verder uitwerken van de bestaande website met nieuwe functionaliteit. Eerst en vooral werd de bestaande site herwerkt en vervolgens werden een paar nieuwe zaken ontwikkeld. Naast een paar algemene nieuwigheden (fotoboek, nieuws), is er ook een afgeschermd gedeelte gemaakt waarin klanten gegevens kunnen bekijken. Om dit te beheren, was er ook nood aan een back-end gedeelte.

Trefwoorden: website, webontwerp, ASP, Javascript, VBScript, ColdFusion

Inhoudstafel HOOFDSTUK 1: INLEIDING

1

1.1

Het bedrijf

1

1.2

Situering

1

1.3

Doel

1

1.3.1

Algemeen ............................................................................................................... 2

1.3.2

Collitax BVBA....................................................................................................... 3

1.3.3

Collitax Express ..................................................................................................... 3

1.3.4

Technische aspecten............................................................................................... 3

1.3.5

Wijzigingen ............................................................................................................ 4

HOOFDSTUK 2: OPLOSSINGEN

5

2.1

5

Scripting

2.1.1

Mogelijkheden ....................................................................................................... 5

2.1.2

Keuze ..................................................................................................................... 5

2.2

Opmaak

5

2.3

Beveiliging

5

2.3.1

Databank ................................................................................................................ 5

2.3.2

Paswoord ................................................................................................................ 6

2.3.3

Inloggen ................................................................................................................. 6

HOOFDSTUK 3: UITWERKING

7

3.1

7

Algemene site

3.1.1

Collitax Express ..................................................................................................... 8

3.1.2

Collitax BVBA..................................................................................................... 10

3.2

Invulformulieren

11

3.2.1

Formulier.............................................................................................................. 13

3.2.2

Verwerking........................................................................................................... 13

3.2.2.1

ColdFusion ....................................................................................................... 14

3.2.2.2

Mail .................................................................................................................. 14

3.2.2.3

Upload .............................................................................................................. 16

3.3

Klantensite (front-end)

17

3.3.1

Databank .............................................................................................................. 18

3.3.2

Beveiliging ........................................................................................................... 19

3.3.2.1

Aanmelden ....................................................................................................... 19

3.3.2.2

Databank .......................................................................................................... 20

3.3.3

Telefoongegevens ................................................................................................ 21

3.3.4

Voertuiggegevens................................................................................................. 22

3.3.4.1

Query................................................................................................................ 22

3.3.4.2

Overzicht .......................................................................................................... 22

3.3.4.3

Detail ................................................................................................................ 23

3.3.5

Paswoord wijzigen ............................................................................................... 23

3.3.6

Paswoord vergeten ............................................................................................... 24

3.4

Klantensite (back-end)

3.4.1

24

Beveiliging ........................................................................................................... 25

3.4.1.1

Databank .......................................................................................................... 25

3.4.1.2

Aanmelden ....................................................................................................... 25

3.4.2

Interface................................................................................................................ 26

3.4.2.1

Toevoegen ........................................................................................................ 27

3.4.2.2

Bewerken ......................................................................................................... 28

3.4.2.3

Verwijderen gegevens...................................................................................... 29

3.4.3

Telefoongegevens ................................................................................................ 30

3.4.3.1

Toevoegen ........................................................................................................ 30

3.4.3.2

Bewerken ......................................................................................................... 31

3.4.3.3

Verwijderen...................................................................................................... 32

3.4.4

Voertuiggegevens................................................................................................. 33

3.4.4.1

Toevoegen ........................................................................................................ 33

3.4.4.2

Bewerken ......................................................................................................... 35

3.4.4.3

Verwijderen...................................................................................................... 36

3.4.5

Klantenaccounts ................................................................................................... 37

3.4.5.1

Toevoegen ........................................................................................................ 37

3.4.5.2

Bewerken ......................................................................................................... 38

3.4.5.3

Verwijderen...................................................................................................... 39

3.4.6

Beheersaccounts................................................................................................... 40

3.4.6.1

Toevoegen ........................................................................................................ 40

3.4.6.2

Verwijderen...................................................................................................... 41

HOOFDSTUK 4: BESLUIT

42

4.1

42

Resultaat

4.1.1

Collitax BVBA..................................................................................................... 42

4.1.2

Algemeen ............................................................................................................. 43

4.2

Voor- en nadelen

43

4.2.1

Voordelen............................................................................................................. 43

4.2.2

Nadelen ................................................................................................................ 44

Figuren Figuur 3-1: portaalsite ................................................................................................. 7 Figuur 3-2: Frameset .................................................................................................. 8 Figuur 3-3: Collitax Express, links frame..................................................................... 9 Figuur 3-4: Collitax BVBA, links frame ...................................................................... 10 Figuur 3-5: keuze formulieren ................................................................................... 12 Figuur 3-6: afscherming databank ............................................................................ 21 Figuur 3-7: frameset back-end .................................................................................. 27 Figuur 3-8: frameset toevoegen ................................................................................ 28 Figuur 3-9: verloop bewerken gegevens................................................................... 28 Figuur 3-10: screenshot, toevoegen telefoongegevens ............................................ 30 Figuur 3-11: screenshot, bewerken telefoongegevens 1 .......................................... 31 Figuur 3-12: screenshot, bewerken telefoongegevens 2 .......................................... 32 Figuur 3-13: verwijder telefoongegevens .................................................................. 33 Figuur 3-14: screenshot, toevoegen voertuiggegevens ............................................ 34 Figuur 3-15: screenshot, fotokeuze........................................................................... 35 Figuur 3-16: screenshot, bewerk Voertuigen 1 ......................................................... 36 Figuur 3-17: screenshot, bewerken voertuigen 2 ...................................................... 36 Figuur 3-18: screenshot, verwijderen voertuiggegevens........................................... 37 Figuur 3-19: screenshot, toevoegen klantenaccount ................................................ 37 Figuur 3-20: screenshot, bewerken klantenaccounts 1............................................. 38 Figuur 3-21: screenshot, bewerken klantenaccounts 2............................................. 39 Figuur 3-22: screenshot, toevoegen administrator.................................................... 40 Figuur 3-23: screenshot, verwijderen administrator .................................................. 41

Afkortingen en symbolen HTML

Hyper Text Markup Language

URL

Uniform Resource Locator

Mb

megabytes

CSS

Cascading Style Sheets

ASP

Active Server Pages

VBScript

Visual Basic Script

CFML

ColdFusion Markup Language

CF

ColdFusion

MTM

Maximaal Toegelaten Massa

ODBC

Open DataBase Connectivity

DSN

Data Source Name

ADODB

ActiveX Data Objects DataBase

BTW

Belasting Toegevoegde Waarde

Nr

nummer

Vernieuwen webstek Collitax

Inleiding

Hoofdstuk 1: Inleiding 1.1 Het bedrijf De firma Collitax is een transportbedrijf. Strikt genomen bestaat dit bedrijf uit 3 delen: Collitax Europe, Collitax Express en Collitax BVBA. Deze laatste bestaat al het langst. Collitax BVBA is opgericht in 1951 en houdt zich vooral bezig met groot transport. Zij hebben ongeveer 50 werknemers en hebben een zeer uitgebreid wagenpark dat ingezet wordt voor zowel nationaal als internationaal transport. Vervolgens is er Collitax Express. Opgericht in 1999, houdt dit onderdeel zich vooral bezig met spoedleveringen, pakjesdienst, … Dit jong bedrijf werkt met onderaannemers. Tot slot is er ook nog Collitax Europe. Deze onderneming is de bindende kracht van de Collitax groep. Hierin worden alle management activiteiten gebundeld. Maar voor het grote publiek is Collitax Europe vrijwel onbekend.

1.2 Situering Reeds lange tijd was het domein collitax.be al eigendom van Collitax. En gedurende die tijd was er slechts 1 pagina te bezichtigen. Enige tijd geleden was er een beetje meer aan gewerkt en kon je al terecht op de site voor contactgegevens, historiek en dergelijke meer. In mijn zoektocht naar een scriptieopdracht heb ik dan ook voorgesteld om de site verder te ontwerpen. Dit voorstel werd positief onthaald en de eerste gesprekken kwamen op gang. Na de goedkeuring van dit onderwerp, stond het licht op groen en kon ik aan de slag gaan.

1.3 Doel Het originele doel was om uitgebreide websites te ontwikkelen voor Collitax BVBA en Collitax Express.

Robby Vermaele

1


Inleiding

1.3.1 Algemeen De inhoud van de bestaande websites moest behouden blijven. Er mocht wel uitgekeken worden naar een andere stijl. Klemtoon lag echter wel op inhoud. Behalve de bestaande onderdelen, zoals daar zijn: •

Nieuws

•

Diensten

•

Historiek

•

…

was het ook de bedoeling om enkele nieuwe topics te introduceren. Bijvoorbeeld: •

Fotoboek

•

Wegbeschrijving

•

…

De verdere uitwerking is meer specifiek en dan ook afhankelijk van de website. Het was ook de bedoeling om voor beiden websites (Express en BVBA) een afgeschermd gedeelte te maken. Hierin kunnen klanten dan bepaalde specifieke gegevens raadplegen, zodat ze niet steeds hoeven te bellen en vragen te stellen aan het Collitax-team. De firma Collitax heeft de rechten op 3 URL’s, namelijk: •

www.collitax.be

•

www.collitaxexpress.be

•

www.collitaxeurope.be

Deze 3 URL’s leiden allemaal naar 1 webserver en dus ook naar 1 pagina.

Robby Vermaele

2


Inleiding

1.3.2 Collitax BVBA Voor Collitax BVBA was het de bedoeling dat een databank met gegevens over het wagenpark online ter beschikking kwam. Zo kunnen klanten de gegevens meteen raadplegen zonder contact op te nemen met de firma. Deze gegevens mogen niet toegankelijk zijn voor iedereen, maar dienen beschermd te worden met behulp van een paswoord. De beveiliging dient vooral om een indruk van vertrouwelijkheid te geven. De meeste gegevens zijn immers “public record”. Om de gegevens toch een beetje af te schermen, kunnen alleen klanten die een account krijgen, dit deel van de website betreden. Er is uiteindelijk besloten om ook een back-end gedeelte te ontwikkelen voor de klantensite, zodat de administratieve medewerkers van het bedrijf de gegevens kunnen aanpassen en bewerken waar nodig. Op deze manier wordt het up- en downloaden van de databank vermeden.

1.3.3 Collitax Express Het afgeschermde gedeelte van Collitax Express is van een andere aard. Hier was het de bedoeling om afmeldinggegevens online te plaatsen. Afmeldinggegevens zijn de tijdstippen waarop de pakjes van een bepaalde klant afgehaald zijn. Dit is dus klantspecifieke informatie. Het was ook de bedoeling om hiervoor een afgeschermd gedeelte te creëren, zodat niet iedereen de afmeldinggegevens van andere bedrijven kan raadplegen. Om ervoor te zorgen dat de gegevens steeds up-to-date zijn, was het ook nodig om een (eventueel automatisch) systeem te ontwikkelen zodat het updaten van gegevens gemakkelijk en snel kan geschieden.

1.3.4 Technische aspecten De webhosting van Collitax wordt verzorgd door de firma Bexs. Collitax heeft bij Bexs een webruimte van 10Mb. De webserver ondersteund de scriptingtalen ASP en ColdFusion. Voor het versturen van mail is het nodig om gebruik te maken van ColdFusion, aangezien Bexs geen applicatie voorziet voor het versturen van mail via ASP.

Robby Vermaele

3


Inleiding

1.3.5 Wijzigingen Tijdens de periode van de scriptie bleek dat er te weinig tijd zou zijn om alle doelstellingen te bereiken. Er is dan ook overeengekomen met de firma Collitax om alle aandacht te vestigen op Collitax BVBA en dus alle beschikbare tijd aan deze website te spenderen.

Robby Vermaele

4


Oplossingen

Hoofdstuk 2: Oplossingen 2.1 Scripting 2.1.1 Mogelijkheden In verband met scripting waren er verschillende mogelijkheden, aangezien de webhosting zowel ColdFusion als ASP ondersteunt. In ASP kan er dan nog gekozen worden tussen de scriptingtalen VBScript en Javascript.

2.1.2 Keuze Uiteindelijk is de keuze gevallen op ASP met als scriptingtaal VBScript. Aangezien ik hier in de lessen al uitgebreid kennis mee had gemaakt, en mijn kennis van VBScript het meest uitgebreid is, was de keuze snel gemaakt. Uit noodzaak heb ik echter op het laatste moment ook nog gebruik moeten maken van ColdFusion. Aangezien Bexs geen mailcomponent voor ASP ondersteunt, heb ik voor het versturen van mails van op de server moeten gebruik maken van ColdFusion. In de laatste week heb ik mij dan nog een beetje moeten toeleggen op het leren van ColdFusion. Dit beperkte zich echter tot het versturen van mails en het uploaden van files.

2.2 Opmaak Voor de opmaak van de pagina’s is er zoveel mogelijk gebruik gemaakt van CSS (Cascading Style Sheets). Op die manier is het mogelijk om een consistente en eenvoudig aan te passen opmaak te realiseren.

2.3 Beveiliging 2.3.1 Databank Om de databank te beveiligen waren er verschillende mogelijkheden. De databank op een aparte plaats zetten en deze toegankelijk maken met behulp van een DSNlink. Een andere mogelijkheid was om met een gewone ODBC-link in ASP te werken.

Robby Vermaele

5


Oplossingen

Er is gekozen voor de 2de optie. Er zijn wel voorzorgen genomen om ervoor te zorgen dat de databank niet zo maar kon gedownload worden. Hierover meer in het hoofdstuk over de uitwerking. Er zijn uiteindelijk 2 databanken gebruikt. Eén databank voor alle gegevens van de front-end van de klantensite (logingegevens, telefoongegevens, wagenparkgegevens). De andere databank dient om de gegevens van de administratoraccounts op te slaan.

2.3.2 Paswoord Om de klantensite te beveiligen, is er gebruik gemaakt van een paswoord en een login. Zowel paswoord en login worden als gewone tekst opgeslagen in de databank. Dit is weliswaar niet de veiligste manier, maar deze beslissing is genomen in overleg met het bedrijf. De gegevens over het wagenpark zijn “public record”, maar worden zo toch op een eenvoudige manier afgeschermd. Voor het back-end gedeelte wordt er een andere databank gebruikt. Deze bevat alleen maar de accountgegevens (login en paswoord) van de administrators. Hier worden de paswoorden opgeslagen onder geëncrypteerde vorm.

2.3.3 Inloggen Er moet voorkomen worden dat de webpagina’s van het afgeschermd gedeelte toegankelijk zijn voor gebruikers die zich niet ingelogd hebben. Om dit te verwezenlijken, zijn er 2 mogelijkheden. Ofwel moet men op elke pagina de databank gaan raadplegen en zowel login als paswoord gaan verifiëren. Ofwel kan men na inloggen een sessieobject creëren met een specifieke waarden en dit object in iedere pagina gaan controleren. Ik heb er voor gekozen om de 2de methode te implementeren. De eerste zou namelijk veel te veel overhead introduceren in de code en ook de belasting van de server zou veel groter zijn.

Robby Vermaele

6


Uitwerking

Hoofdstuk 3: Uitwerking De website bestaat uit een paar grote blokken: •

Algemeen gedeelte

•

Klantensite: front-end

•

Klantensite: back-end

Deze onderdelen zullen hier één na één besproken worden. We beginnen met het algemene gedeelte van de site. De nadruk wordt doorheen de scriptie vooral gelegd op de website van Collitax BVBA, aangezien deze het meest uitgewerkt is. De meeste opmerkingen in verband met de algemene site gelden ook voor de website van Collitax Express.

3.1 Algemene site Aangezien de 3 URL’s van de Collitax groep allemaal dezelfde pagina als resultaat hebben, is het belangrijk om een algemene welkomstpagina te hebben en de mensen vanaf daar te laten kiezen welk onderdeel van de site ze willen betreden. Volgende figuur verduidelijkt de toegang tot de verschillende onderdelen van de site.

www.collitaxexpress.be www.collitax.be

www.collitaxeurope.be

Figuur 3-1: portaalsite

Robby Vermaele

7


Uitwerking

Nadat men op de portaalpagina op de centrale figuur geklikt heeft, komt men terecht op een scherm waar men kan kiezen voor Collitax BVBA of Collitax Express. Door op de juiste figuur te klikken, komt men dan uiteindelijk terecht op de overeenkomstige homepage van de desbetreffende firma. De homepages van zowel Collitax Express als Collitax BVBA zijn opgebouwd uit het volgende frameset:

TOPFRAME

LEFTFRAME

MAINFRAME

Figuur 3-2: Frameset

In het linkse frame komen de links. Deze verwijzen allemaal naar het mainframe of naar een nieuw venster. In het topframe komt de naam van de firma, samen met een kleine welkomst-mededeling. In het mainframe tenslotte, komt de inhoud van de diverse onderdelen. Nu gaan we verder met de uitleg van de specifieke pagina’s.

3.1.1 Collitax Express We beginnen hierbij met de eenvoudigste van de 2. Wegens tijdsgebrek heb ik me moeten beperken in het ontwerp van de website van Collitax Express. Het enige wat hier eigenlijk gebeurd is, is het overzetten van de inhoud van de bestaande website naar de nieuwe website, gebruik makend van de nieuwe stijl. Enkel het onderdeel “nieuws” kreeg een nieuwe lay-out aangemeten.

Robby Vermaele

8


Uitwerking

In de website van Collitax Express vinden we volgende onderdelen:

Figuur 3-3: Collitax Express, links frame

Bovenstaande links worden getoond in het frame “left” van de frameset. Ze verwijzen allemaal naar het mainframe van de site. Behalve het fotoboek, dat in een nieuwe pagina getoond wordt. We overlopen eens de verschillende onderdelen: •

Home: startpagina met een welkomstboodschap.

•

Nieuws: pagina met een overzicht van nieuwsfeiten. Steeds vergezeld van datum.

•

Diensten: een overzicht van de verschillende diensten die de firma aanbiedt. Deze pagina bevat ook links naar andere pagina’s met nog wat meer specifieke uitleg over de overeenkomstige diensten.

•

Historiek: een kleine schets van de geschiedenis van het bedrijf.

•

Contact: overzicht van de contactgegevens (adres, mail, telefoon, …) van het bedrijf.

•

Fotoboek: dit zijn een reeks pagina die automatisch gegenereerd werden met behulp van een grafisch programma. De lay-out van de gebruikte templates is wel een beetje bijgewerkt om beter te voldoen aan de eisen.

•

Links: enkele links naar leveranciers en firma’s waar wordt mee samengewerkt.

•

Collitax BVBA: onder aan het frame vind je ook nog een rechtstreekse link naar de website van Collitax BVBA. Deze pagina wordt geopend in een nieuw venster.

Robby Vermaele

9


Uitwerking

Tot zover het overzicht van de website van Collitax Express. Zoals eerder vermeld, is deze nogal beperkt in omvang omdat we besloten hadden, in overleg met het bedrijf, om alle aandacht toe te spitsen op de website van Collitax BVBA.

3.1.2 Collitax BVBA De website van Collitax BVBA is – wegens bovenvermelde redenen – uitgebreider dan die van Collitax Express. Niet alleen wegens het afgeschermde klantengedeelte, maar ook de algemene site zelf. Het grootste gedeelte is echter analoog aan Collitax Express en gebruikt ook dezelfde lay-out. In het linkse frame ontdekken we de links naar volgende onderdelen:

Figuur 3-4: Collitax BVBA, links frame

Zoals te zien is, zijn vele onderdelen identiek aan de onderdelen van de website van Collitax Express. Voor die onderdelen verwijs ik dan ook graag door naar de beschrijving hierboven. Er zijn 3 verschillen met het overzicht van Collitax Express: •

Diensten: bevat hier geen links. Alleen maar een korte beschrijving

•

Formulier: een link naar een pagina waar online formulieren ingevuld kunnen worden. Deze pagina wordt geopend in een nieuw venster. Over de uitwerking zelf, volgt later meer.

Robby Vermaele

10


•

Uitwerking

Log in: door op deze link te klikken, krijgen de bezoekers een nieuw venster waarin ze zich kunnen aanmelden voor het afgeschermde gedeelte van de site. Dit item zal ook verder in het verslag uitgebreid behandeld worden.

Het was ook de nadrukkelijke vraag van de opdrachtgever om een nieuwstikker in te voegen op de site. Ik ben hiervoor op zoek gegaan op het internet en heb gebruik gemaakt van een Java applet met als naam “scrollitup”. Via een tekstbestand kan men eenvoudig de boodschappen aanpassen die hierin verschijnen. Mits men zich houdt aan de voorgeschreven syntax (“|TEXT,URL,TARGET|”), kan men zelfs hyperlinks toevoegen.

3.2 Invulformulieren Op de website Collitax BVBA worden de bezoekers in de mogelijkheid gesteld om online formulieren in te vullen en deze dan te laten versturen door de server. Hierdoor wordt het formulier meteen naar het juiste mailadres verstuurd en wordt de gebruiker niet gestoord door vervelende boodschappen van de browser als die zelf een mail moet versturen. Het browservenster dat geopend wordt, bevat een frameset die opgebouwd is uit 2 frames en wel als volgt:

TOPFRAME

MAINFRAME

Bij het openen van de pagina, worden volgende pagina’s weergegeven:

Robby Vermaele

11


•

Uitwerking

Topframe: pagina met daarop een dropdown lijstje met de verschillende mogelijke formulieren. In Figuur 3-5: keuze formulieren ziet u een screenshot van deze lijst.

•

Mainframe: blanco pagina

Figuur 3-5: keuze formulieren

De keuzelijst bevat 4 keuzemogelijkheden: prijsaanvraag, info, schademelding en sollicitatie. Eens men op één van de vier geklikt heeft, wordt in het mainframe automatisch het juiste formulier geopend, en wordt in het topframe een andere boodschap weergegeven. Dit allemaal met behulp van Javascript waardoor dit allemaal aan client-side kan gebeuren en geen verdere communicatie met de server nodig is. Tot slot nog een overzicht van de verschillende pagina’s die aangeroepen worden bij het selecteren van een van de keuzemogelijkheden van het formulier. Formulier

Formulierpagina

Actiepagina

Prijsaanvraag

BVBA_prijsForm.htm

BVBA_prijsSend.cfm

Algemene Info

BVBA_infoForm.htm

BVBA_infoSend.cfm

Schademelding

BVBA_schadeForm.htm

BVBA_schadeSend.cfm

Sollicitatie

BVBA_solliForm.htm

BVBA_solliSend.cfm

Tabel 3-1: formulieren, pagina's

Robby Vermaele

12


Uitwerking

3.2.1 Formulier Het formulier zelf is gemaakt met behulp van de
-tag. De meeste vakjes zijn tekstvakjes en meestal is er nog plaats voor opmerkingen of commentaar in een groter tekstvak (text area). Bij twee van de vier formulieren wordt er ook de mogelijkheid gegeven om een bestand op te sturen. Hiervoor is dan nog een extra bestandsveld noodzakelijk. De validatie van de formulieren gebeurt eerst en vooral aan client-side door middel van een functie in Javascript. Deze wordt opgeroepen van zodra de gebruiker op “versturen” klikt. Indien één of meer velden niet voldoen aan de validatieregels, dan krijgt de gebruiker via een “message box” de melding dat het formulier niet goed ingevuld was. In deze boodschap krijgt de gebruiker meteen ook te zien welke velden er niet voldoen. In dit geval wordt het formulier niet verstuurd. Indien alles wel correct is ingevuld, wordt het formulier meteen verwerkt door de overeenkomstige actiepagina.

3.2.2 Verwerking Indien het formulier correct was ingevuld, wordt de overeenkomstige actiepagina opgeroepen om de ingevulde informatie te verwerken. Dit heb ik verwezenlijkt met behulp van ColdFusion. In dit overzicht zie je de verschillende zaken die dienen te gebeuren bij de verwerking van de verschillende formulieren: Formulier

Mail

Bestand uploaden (indien opgegeven)

Prijsaanvraag NEE

Algemene Info Schademelding

JA

Sollicitatie

*.doc, *.pdf, *.txt, *.rtf, *.jpg *.doc, *.pdf, *.txt, *.rtf

Tabel 3-2: formulieren, actie

Robby Vermaele

13


Uitwerking

Vooraleer de gegevens te verwerken, wordt er echter eerst nog eens een server-side validatie uitgevoerd op de ingevulde gegevens. Zo wordt er gecontroleerd of de CFpagina niet rechtstreeks geopend werd. Vervolgens worden er gekeken of de meeste belangrijke gegevens ingevuld en/of geldig zijn (naam, mail, …). Indien er mogelijkheid is om een bestand te versturen, dan wordt eerst nagegaan of er een bestand gespecificeerd was. Indien er geen bestand opgegeven was, dan zal er een mail zonder bijlage verstuurd worden, zoniet wordt een mail verstuurd met bijlage. Na de nodige acties wordt er tot slot nog een boodschap getoond aan de gebruiker. Als de mail succesvol verstuurd is, krijgt de bezoeker een overzicht van de informatie die verstuurd is met de mail. Indien er een fout is opgetreden, dan krijgt de bezoeker een foutboodschap die hem meldt welke fout er is opgetreden. Nu volgt wat verdere uitleg over de procedures die gevolgd zijn voor het verwerken van het formulier. Eerst en vooral een klein woordje uitleg over ColdFusion zelf. 3.2.2.1

ColdFusion

ColdFusion is een markup taal van Macromedia. Ze maakt gebruik van een hele reeks van tags waarmee de ontwerper zijn applicaties kan maken. De servers van Bexs ondersteunen zowel ASP als ColdFusion, maar aangezien Bexs geen programma heeft om mail te versturen via ASP, was ik genoodzaakt om gebruik te maken van ColdFusion voor het versturen van mail. Zowel voor het versturen van mail als voor het uploaden van files heb ik dan ook gebruik gemaakt van ColdFusion. 3.2.2.2

Mail

Om een mail te versturen met behulp van CF is er de -tag. In de attributen van deze tag worden de verschillende instellingen voor de mail gespecificeerd. Tussen de begintag en de eindtag wordt dan de inhoud van de mail ingevoegd. De algemene syntax van deze tag ziet er als volgt uit:

Robby Vermaele

14


Uitwerking

(geadresseerde) (ontvanger)

(onderwerp) (mail in html) (eventuele bijlage)

(naam mailserver) (poort mailserver)

Een meer gedetailleerde uitleg is te vinden in Appendix B. Voor mijn applicatie heb ik volgende syntax gebruikt: voor een mail zonder bijlage, en volgende syntax: voor een mail met bijlage. Hierin zijn de waarden tussen “#” variabelen of elementen uit de formulieren. Zij hebben volgende betekenissen: Veld

Betekenis

Form.mail

Mailveld in formulier

Form.formtype

Verborgen veld met naam van het formulier (schade, prijs, info of sollicitatie) Variabele met het volledig pad van het geuploade bestand op de server

Mailfilepath

Robby Vermaele

15


Uitwerking

Tabel 3-3: variabelen mail

De inhoud van de mail zelf bevat verder alle ingevulde velden van het formulier zelf. De body van de mail is opgemaakt in html. Zoals te zien is in de voorbeelden, wordt de gebruiker zelf nog eens CC gezet in de mail. Dit heb ik gedaan om de gebruiker effectief te tonen dat er een mail verstuurd is. 3.2.2.3

Upload

Bij twee van de vier formulieren kan een bestand meegestuurd worden naar de server. Indien een bestand geselecteerd was, zal dit bestand als bijlage toegevoegd worden aan de mail. Om ervoor zorgen dat dit kan, moet het bestand eerst op de server geplaatst worden. Bestanden uploaden naar een server is niet zonder risico. Daarom dienen de nodige voorzorgen genomen te worden. Eerst en vooral heb ik gebruik gemaakt van Javascript om de extensie van het gekozen bestand aan client-side te valideren. Om dit te doen neemt het Javascript de laatste 3 karakters van het pad aan client-side en vergelijkt deze met de toegelaten extensies. Aan server-side is er dan nog een validatie door ColdFusion zelf, maar deze wordt hieronder nog eens verder toegelicht. Om het bestand naar de server te versturen, heb ik gebruik gemaakt van de CF-tag . Deze tag wordt gebruikt voor bestandsbeheer op de server. Om een bestand te uploaden, dient men het attribuut “action” de waarde “upload” mee te geven. De tag heeft volgende syntax:

Robby Vermaele

(naam bestandsveld in formulier) (bestemmingspad op de server) (te aanvaarden bestanden)

16


Uitwerking

Voor de volledige uitleg van deze tag verwijs ik graag naar appendix B, waar een uittreksel van de “CFML Reference” is ingevoegd. Belangrijk voor onze toepassing is dat het attribuut “accept” goed is ingevuld. Hier worden immers de Mimetypes gedefinieerd die de server mag aanvaarden. Ieder bestand die een indeling heeft die hier niet aan voldoet, zal niet aanvaard worden door de server en een fout genereren. Op deze manier is ook de validatie aan server-side gerealiseerd. De uiteindelijk tag die ik gebruikt heb in mijn applicatie, ziet er als volgt uit: Eens de mail verstuurd is, is het bestand eigenlijk niet meer nodig op de server. Om ervoor te zorgen dat er geen ophoping is van bestanden op de server, heb ik ervoor geopteerd om het gebruikte bestand te verwijderen na versturen van de mail. Om dit te doen, maak ik opnieuw gebruik van de -tag, maar ditmaal krijgt het “action”attribuut de waarde “delete” mee. Voor een gedetailleerde uitleg verwijs ik graag naar Appendix B. In deze applicatie heb ik gebruik gemaakt van volgende tag: Waarin “mailfilepath” een variabele is waarin het volledige pad van het geuploade bestand aan server-side is opgeslagen. Op deze manier wordt dit bestand verwijderd op de server.

3.3 Klantensite (front-end) Een laatste link die beschikbaar is in de homepage van Collitax BVBA is de link “log in”. Deze opent een nieuwe browservenster waar de klant zich kan aanmelden. Hiervoor dient de klant eerst een account aan te vragen. Dit gebeurt door contact op te nemen met Collitax zelf. Eens de klant zijn paswoord en loginnaam heeft ingegeven, komt hij terecht op een pagina waar hij kan kiezen tussen de volgende opties: •

Telefoongegevens

•

Voertuiggegevens

Robby Vermaele

17


•

Uitwerking

Wijzigen paswoord

We bespreken de verschillende opties elk afzonderlijk in detail.

3.3.1 Databank Voor we ingaan op de volgende puntjes, geef ik graag nog een woordje uitleg over de databank die gebruikt wordt voor de front-end van de klantensite. Er wordt gebruik gemaakt van een Access-file die 3 tabellen bevat. Ze bevatten logingegevens, telefoongegevens en gegevens over het wagenpark. De tabellen bezitten volgende velden:

Variousdata.mdb Tabel Logindata

Telefoon

Attributen Loginnaam (moet uniek zijn) Paswoord BTW-nummer (primaire sleutel) Naam Mail Naam (primaire sleutel) Telefoonnummer

Materiaal

Voertuignummer (primaire sleutel) Aard Nummerplaat Merk Assen Opbouw MTM Tarra LV L B H Foto Tabel 3-4: databank front-end

Om de tabel te kunnen bevragen vanuit een ASP-pagina, wordt er steeds een ADODB-connectie aangemaakt. Dit gebeurt steeds op volgende manier:

Robby Vermaele

18


Uitwerking

connStr = "Driver={Microsoft Access Driver (*.mdb)};" connStr = connStr & "DBQ=" & server.mappath("rel_pad") set conn = server.createobject("adodb.connection") conn.open connStr De uitdrukking rel_pad dient vervangen te worden door het relatieve pad van de plaats van de huidige pagina naar de plaats van de databank. Na het creëren van dit object, wordt er een recordset-object gecreëerd. Dit object wordt dan geopend met als argument de query die dient uitgevoerd te worden op de databank. Eens dit uitgevoerd is, krijg je een recordset terug met alle records die voldoen aan de gewenste query.

3.3.2 Beveiliging 3.3.2.1

Aanmelden

Het klantengedeelte van de site is volledig afgeschermd. Daarom moet de klant zich steeds aanmelden om de pagina’s van dit deel te bekijken. Zoniet krijgt de gebruiker een foutboodschap. Om een succesvolle afscherming te verkrijgen, is er gebruik gemaakt van volgende techniek. Na invullen van aanmeldingsgegevens (login en paswoord), wordt er gekeken of de combinatie van deze gegevens voorkomt in de tabel logindata. Als dit het geval is, dan heeft de klant inderdaad een account en mag hij het afgeschermd gedeelte bekijken. Zoniet krijgt de bezoeker een foutmelding. De aanmeldingsgegevens worden opgeslagen als gewone tekst in de databank. Er wordt geen gebruik gemaakt van encryptie. In overleg met het bedrijf is er beslist dat dit type beveiliging voldoende was voor deze toepassing.

Robby Vermaele

19


Uitwerking

Om ervoor te zorgen dat alle andere pagina’s niet onrechtmatig kunnen geopend worden, moest er voor iedere pagina een authentificatie gebeuren. Aangezien het te omslachtig (teveel overhead en te grote serverbelasting) zou zijn om iedere keer de aanmeldingsgegevens te controleren in de databank, heb ik geopteerd voor een andere oplossing. Eens de klant succesvol is ingelogd, wordt er een sessieobject aangemaakt die een specifieke waarde wordt toegekend. Om dit nu in iedere pagina te controleren, heb ik een bestand gemaakt met de extensie *.inc. Dit bestand wordt in iedere pagina van het afgeschermd gedeelte ingevoegd (via include). Binnen dit bestand wordt er telkens gecontroleerd of het sessieobject de juiste waarde bevat. Is dit het geval, dan wordt de desbetreffende pagina gewoon uitgevoerd. Is dit niet het geval, dan wordt de gebruiker naar een pagina gestuurd die een foutmelding bevat. Bij het uitloggen wordt er een foutieve waarde toegekend aan het sessieobject. Ook als de gebruiker te lang inactief is, dan zal de sessie op de server verlopen en zal het sessieobject verloren gaan, waardoor de gebruiker opnieuw dient in te loggen. Als de klant succesvol ingelogd is, dan wordt er ook een sessieobject gecreëerd waarin de login opgeslagen wordt. Dit komt later van pas bij het wijzigen van het paswoord. 3.3.2.2

Databank

Om ervoor te zorgen dat de databank niet kan gedownload worden vanuit het browservenster, heb ik ervoor gezorgd dat de databank ontoegankelijk is. Dit in overleg met de webhosting van Bexs. We hebben ervoor geopteerd om de databank in een ontoegankelijke folder te zetten, maar zodanig dat de databank toch nog toegankelijk is voor een ADODB-connectie en er dus geen nood is aan een DSN-link. Om dit te verwezenlijken zijn we als volgt te werk gegaan. Volgende figuur verduidelijkt dit.

Robby Vermaele

20


Uitwerking

www

Root Website site *.mdb Figuur 3-6: afscherming databank

In de rootfolder van de hosting-account wordt een map website aangemaakt. Hierin komt de volledige website te staan. Vervolgens worden alle URL’s gelinkt aan deze map. Alle databanken worden nu in de root gezet. Op die manier is het onmogelijk om de databank eenvoudig af te halen van op de server.

3.3.3 Telefoongegevens Als de klant kiest voor telefoongegevens, dan krijgt de klant een lijst te zien met alle records die opgeslagen zitten in de tabel telefoon. De volledige tabel wordt opgevraagd, en alle gegevens worden uitgeschreven in tabelvorm met behulp van ASP-code. Het resultaat is een eenvoudig ogende telefoonlijst.

Robby Vermaele

21


Uitwerking

3.3.4 Voertuiggegevens Als de klant de voertuiggegevens wilt bekijken, dan gaat dit enigszins anders in zijn werk. Er worden 3 verschillende stappen gevolgd. Eerst en vooral kan de klant via een formulier enkele zoekcriteria ingeven. Vervolgens wordt een overzicht gegeven van alle voertuigen die voldoen aan deze criteria. Tot slot kan de klant de gewenste voertuigen selecteren en in detail bekijken. We vatten even samen: •

Query

•

Overzicht

•

Detail

We gaan nu elk puntje verder uitwerken. 3.3.4.1

Query

Via het formulier op de pagina query.asp kan de klant enkele zoekcriteria ingeven. Deze zoekcriteria zijn de volgende: •

Voertuignummer

•

Nummerplaat

•

Aard (Oplegger, Trekker of Vrachtwagen)

•

Opbouw (geen voorkeur, huif, schuifzeil, box of vlak)

Deze zoekcriteria kunnen gecombineerd worden naar wens. Indien geen enkel criterium ingevuld of aangevinkt was, dan wordt de integrale voertuigenlijst weergegeven. 3.3.4.2

Overzicht

Als de klant op “zoek op” klikt, dan wordt de databank bevraagd. Hiervoor wordt dynamisch een query opgesteld die volledig afhankelijk is van het aantal criteria die al dan niet opgegeven zijn. Indien de zoekactie geen resultaten opleverde, dan krijgt de bezoeker dit een boodschap te zien. Indien de zoekactie wel resultaat opgeleverd heeft, dan krijgt de klant een overzicht (in tabelvorm) van alle voertuigen die voldoen aan zijn eisen. Robby Vermaele

22


Uitwerking

Naast ieder record wordt een keuzevakje geplaatst. De bezoeker kan dan zelf kiezen welke voertuigen hij verder in detail wil bekijken. Het enige wat hij hoeft te doen, is de voertuigen die hij verder wil bekijken aanvinken en vervolgens op “bekijk selectie” te drukken. 3.3.4.3

Detail

Als de bezoeker in het overzicht geen enkel voertuig heeft aangevinkt, dan krijgt hij geen gegevens te zien en krijgt hij de boodschap “er was niets geselecteerd”. Indien de bezoeker wel één of meer voertuigen geselecteerd had, dan krijgt hij een lijst te zien met nogmaals de voertuiggegevens, maar ditmaal in een overzichtelijke lay-out en vergezeld van een foto.

3.3.5 Paswoord wijzigen De klant wordt ook in de mogelijkheid gesteld om zijn paswoord te wijzigen. Door op deze link te klikken, krijgt de klant een venster te zien waarin er gevraagd wordt om volgende zaken in te vullen: •

Oud paswoord

•

Nieuw paswoord

•

Bevestiging nieuw paswoord

Nadat de klant alle gegevens ingevuld heeft en op “Wijzig” heeft geklikt, worden de gegevens verwerkt. Eerst en vooral worden alle aanmeldingsgegevens uit de databank gehaald. Vervolgens worden alle logins overlopen en wordt er gecontroleerd of de login die opgeslagen zit in het sessieobject (gecreëerd bij aanmelden) voorkomt in de databank. (normaal is dit steeds het geval, omdat anders nooit de pagina voor wijzigen van paswoord kan getoond worden) Als de login overeenkomt, dan worden volgende controles worden uitgevoerd: •

Oud paswoord komt overeen met paswoord aanwezig in databank

•

Nieuw paswoord heeft minimum 6 karakters

•

Nieuw paswoord en bevestiging van nieuw paswoord komen overeen

Robby Vermaele

23


Uitwerking

Indien alle controles gelukt zijn en er geen fouten zijn opgetreden, dan wordt het paswoord gewijzigd. Indien er een fout zou zijn opgetreden, dan wordt dit kenbaar gemaakt aan de gebruiker met behulp van een foutboodschap.

3.3.6 Paswoord vergeten In het geval dat de gebruiker zijn paswoord vergeten is, kan hij normaal gezien ook zijn paswoord opvragen met behulp van een mail. In het aanmeldingsvenster kan hij dan klikken op een link die de juiste pagina opent. Daar kan hij dan zijn login invullen en wordt er een mail verstuurd naar het mailadres opgeslagen in de databank. De mail bevat dan zijn paswoord. Voor het versturen van deze mail heb ik opnieuw gebruik gemaakt van de CF-tag . Aangezien het een CF-pagina betrof, was ik ook genoodzaakt om de databank te bevragen met behulp van CF. Dit gaf echter enkele problemen. De databank werd succesvol bevraagd, maar de mail werd niet verstuurd en de databank bleef vergrendeld gedurende een lange tijd. Op die manier was het onmogelijk om ook in andere pagina’s de databank te bevragen. Ik heb hier meermaals op gezocht, maar geen oplossing gevonden. Ook de medewerkers van Bexs wisten niet direct een oplossing. Gezien de tijd aan het dringen was, heb ik ervoor gekozen om deze functie voorlopig uit te schakelen door de link niet weer te geven in het aanmeldingsvenster. De pagina bevindt zich wel nog op de server.

3.4 Klantensite (back-end) Om de gegevens van het front-end gedeelte van de klantensite eenvoudig te kunnen beheren, was er nood aan een back-end gedeelte. Anders zou men steeds de databank moeten downloaden, wijzigingen aanbrengen en ze dan terug uploaden. Dit is een zeer omslachtige werkwijze. Het zou veel gemakkelijker zijn mochten de medewerkers van het bedrijf dit eenvoudig kunnen doen via een webinterface. Vandaar het ontwikkelen van een back-end.

Robby Vermaele

24


Uitwerking

Aangezien de back-end alleen maar gemaakt is voor de mensen van de firma zelf, heb ik ervoor gekozen om geen link op de website te plaatsen die toegang geeft tot deze back-end. De back-end is terug te vinden op volgende url: www.collitax.be/CollitaxBVBA/login/beheer/. Op de bijgeleverde CD-ROM is dit te vinden in de website folder, op: website\CollitaxBVBA\login\beheer\index.htm.

3.4.1 Beveiliging 3.4.1.1

Databank

Voor het beheersgedeelte van de klantensite is er een nieuwe databank gecreëerd. Deze bevat enkel de aanmeldingsgegevens van de administrators. Ze bevindt zich ook in de root folder van de hosting-webruimte, zodat opnieuw vermeden wordt dat de databank eenvoudig kan gedownload worden. De databank met alle gegevens voor het front-end gedeelte wordt ook hier nog gebruikt, aangezien het doel van dit deel van de site het bewerken van die gegevens is. 3.4.1.2

Aanmelden

Opnieuw wordt er gebruik gemaakt van een paswoord en een login om de beheerder toegang te geven tot de back-end van de klantensite en om onbevoegde personen toegang te weigeren. Het mechanisme van afscherming is hetzelfde als voor het front-end gedeelte van de site. Als de beheerder succesvol aangemeld is, wordt een sessieobject gecreëerd die een specifieke waarde meekrijgt. Dit object wordt dan in iedere afzonderlijke pagina gecontroleerd met behulp van het invoegen van een *.inc bestand.

Robby Vermaele

25


Uitwerking

In dit scenario is er wel een klein verschil. Ik heb namelijk gebruik gemaakt van een 1-way Hash algoritme voor het encrypteren van het paswoord. Op die manier wordt het paswoord in versleutelde vorm opgeslagen. Bij het aanmaken van een nieuwe beheersaccount, wordt er eerst en vooral een 10 karakters tellende random string (salt-value) gegenereerd. Deze string wordt dan aan het paswoord toegevoegd, en deze nieuwe string wordt dan via het 1-way Hash algoritme versleuteld. Nadien worden zowel login, geëncrypteerd paswoord als saltwaarde opgeslagen in de databank. Door het gebruik van de salt-waarde wordt vermeden dat een woordenboekaanval volstaat om een paswoord te kraken. Iedere keer dat een beheerder zich wil aanmelden in het back-end gedeelte van de site, wordt er in de databank gezocht of de ingegeven login geldig is. Indien deze aanwezig is in de databank, wordt de overeenkomstige salt-waarde uit de databank gehaald. Vervolgens wordt deze toegevoegd aan het ingevulde paswoord. Deze nieuwe string wordt dan geëncrypteerd via 1-way Hash, waarna deze versleutelde waarde wordt vergeleken met die in de databank. Indien deze overeenstemmen, was het paswoord correct en is de gebruiker succesvol ingelogd. Zoniet wordt de gebruiker doorgestuurd naar een pagina waar hij een foutmelding te zien krijgt. De meeste principes gebruikt bij de front-end van de website blijven gelden.

3.4.2 Interface Bij het openen van bovenstaande link, komt men terecht op een aanmeldingsvenster. Als men hier zijn paswoord en loginnaam invult, krijgt men toegang tot de back-end van de site. Men krijgt dan de keuze uit 4 links, namelijk: •

Beheer telefoongegevens

•

Beheer voertuiggegevens

•

Beheer klantenaccounts

•

Beheer administrator accounts

Er is gepoogd om de interface van deze vier zo uniform mogelijk te maken. Enkel de laatste varieert een klein beetje van de rest. De interface is opgebouwd uit een frameset van 3 frames die er als volgt uitziet:

Robby Vermaele

26


Uitwerking

TOPFRAME

MAINFRAME

BOTTOMFRAME Figuur 3-7: frameset back-end

In het topframe ziet men steeds de knoppen die specifiek voor het onderdeel zijn, namelijk: •

Toevoegen

•

Bewerken

•

Verwijderen

In het mainframe komen dan de eigenlijke webpagina’s voor het beheren van gegevens en in het topframe zie je tenslotte nog 2 buttons, namelijk: •

Naar keuzescherm

•

Log uit

Deze knoppen maken het mogelijk voor de gebruiker om steeds te kunnen terugkeren naar het keuzevenster of te kunnen uitloggen. Beginnen we eerst met het toevoegen van gegevens. 3.4.2.1

Toevoegen

Voor het toevoegen van de gegevens, wordt het mainframe nogmaals opgedeeld in 2 frames:

Robby Vermaele

27


Uitwerking

INPUTFRAME

PROCESFRAME

Figuur 3-8: frameset toevoegen

In het inputframe komt er dan een formulier waarin de gebruiker nieuwe gegevens kan invullen. Na klikken op “toevoegen” en de nodige validatie, worden de gegevens toegevoegd. De gegevens worden toegevoegd in de pagina die geopend is in het procesframe. In deze pagina worden eerst en vooral de bestaande gegevens getoond (in tabelvorm). Indien er geen gegevens zijn, dan wordt dit gemeld door middel van een boodschap. Als men gegevens toegevoegd heeft via het formulier, dan worden deze verzonden naar de pagina in het procesframe, die ze dan op zijn beurt verwerkt en zorgt voor het toevoegen van de gegevens. 3.4.2.2

Bewerken

Voor het bewerken van de gegevens, wordt gebruik gemaakt van dezelfde frameset als voor het toevoegen. Hier verloopt de verwerking echter over enkele pagina’s in plaats van twee pagina’s bij het toevoegen. Een overzicht:

Stap 1: selecteren

Inputframe Commentaar op Bewerk 1

Procesframe Bewerk 1

Stap 2: bewerken

Bewerk 2

Commentaar op Bewerk 2

Stap 3: verwerken gegevens

Bewerk 3 Figuur 3-9: verloop bewerken gegevens

Robby Vermaele

28


Uitwerking

Zoals te zien is in het overzicht, komt er in de eerste 2 stappen in het andere frame een pagina met commentaar en richtlijnen. Eerst en vooral wordt dus in het procesframe de pagina Bewerk1 geopend. Hierin krijgt de gebruiker in tabelvorm de bestaande gegevens te zien. Naast iedere record wordt een checkbox geplaatst, waardoor de gebruiker de records kan selecteren die hij/zij wil wijzigen. Er is ook een button voorzien die ervoor zorgt dat alle records met één simpele klik geselecteerd worden. Deze button activeert namelijk een Javascript die alle checkboxen activeert. Door na het selecteren op “Bewerken” te klikken, worden de gegevens verstuurd naar pagina “Bewerk2”. Hier worden de geselecteerd gegevens getoond in een formulier. Alle velden van dit formulier krijgen de originele waarden van het te bewerken record. Men kan deze velden dan gaan bewerken. Als men de nodige velden gewijzigd heeft, klikt men op “wijzigen” en dan worden de gewijzigde gegevens doorgestuurd naar pagina “Bewerk3”. Vooraleer dit wordt uitgevoerd, wordt er aan de gebruiker via een boodschap bevestiging gevraagd. Indien de gebruiker niet zeker is, kan hij dan annuleren. Deze pagina verwerkt de gegevens, past de databank aan en stuurt de gebruiker dan meteen weer door naar de beginpagina. Zo krijgt de gebruiker opnieuw een tabel met de bestaande gegevens te zien, waarin ook de bewerkte gegevens zich bevinden. Mocht er een fout zijn opgetreden, dan krijgt de gebruiker ook nog eens een foutmelding te zien. 3.4.2.3

Verwijderen gegevens

In dit onderdeel wordt er geen gebruik gemaakt van een aparte frameset in het mainframe. De pagina wordt gewoon ingeladen in het mainframe van de webinterface. Hier krijgt de beheerder een tabel te zien met alle bestaande gegevens. Naast iedere record wordt er opnieuw een checkbox voorzien, zodat de gebruiker de records kan aanduiden die hij/zij wil verwijderen. Opnieuw vinden we hier een button “Select all” die ervoor zorgt dat alle records in 1 keer geselecteerd worden.

Robby Vermaele

29


Uitwerking

Als men nu op verwijderen klikt, dan krijgt de gebruiker meteen ook een boodschap waarin bevestiging wordt gevraagd. Als de gebruiker bevestigt, worden de gegevens verstuurd naar opnieuw dezelfde pagina. Deze pagina verwijdert de geselecteerde records en toont meteen ook de gewijzigde inhoud van de databank.

3.4.3 Telefoongegevens We opverlopen nu eens de verschillende mogelijkheden van het beheer van de gegevens. In dit overzicht beginnen we met de telefoongegevens. Deze tabel bevat slechts 2 attributen, namelijk: naam en telefoonnummer. 3.4.3.1

Toevoegen

Na geklikt te hebben op de button “toevoegen”, krijgen we volgend scherm te zien:

Figuur 3-10: screenshot, toevoegen telefoongegevens

Robby Vermaele

30


Uitwerking

Algemeen zie je het volledige venster voor beheer van gegevens met bovenaan de specifieke knoppen en onderaan de algemene knoppen (zoals reeds beschreven). In het linker venster kan je nieuwe gegevens invullen en deze dan toevoegen. Eerst en vooral wordt er een client-side validatie uitgevoerd, en vervolgens ook nog eens een server-side validatie. Een overzicht: •

Client-side − Nagaan of naamveld ingevuld is − Nagaan of telefoonveld ingevuld is

•

Server-side − Controleren of alle velden ingevuld zijn − Nagaan of de naam nog niet bestaat in de databank

Indien alles correct is, wordt het formulier opgestuurd en worden de gegevens toegevoegd, waarna een nieuw overzicht getoond worden. 3.4.3.2

Bewerken

Als men kiest voor bewerken, dan krijgt men in het mainframe het volgende scherm te zien, waar men verschillende records kan selecteren. Als er geen record geselecteerd was, krijgt de gebruiker een melding van en gebeurt er niets.

Figuur 3-11: screenshot, bewerken telefoongegevens 1

Na te klikken op “bewerk” worden de records in een formulier getoond zodat de gebruiker ze kan bewerken. Men krijgt volgend scherm te zien:

Robby Vermaele

31


Uitwerking

Figuur 3-12: screenshot, bewerken telefoongegevens 2

Hier kan men de gegevens bewerken en wijzigen zoveel als men wil. Als men op “Wijzigen” klikt, wordt aan client-side volgende validatiestappen uitgevoerd: •

Controle op lege velden

•

Controle of er geen 2 of meer records zijn met dezelfde naam

Indien alles in orde blijkt, worden de gegevens verstuurd voor verwerking (na bevestiging van de gebruiker) en wordt aan server-side nogmaals een gelijkaardige validatie uitgevoerd. Voordat de gegevens toegevoegd worden, wordt de volledige databank overlopen om te kijken of de opgegeven namen nog niet voorkomen in de databank. Indien alles ok is, worden de gegevens gewijzigd. 3.4.3.3

Verwijderen

Als men kiest voor verwijderen, krijgt men volgend scherm te zien:

Robby Vermaele

32


Uitwerking

Figuur 3-13: verwijder telefoongegevens

Als er bij het klikken op “Verwijder” geen enkel record geselecteerd was, wordt dit gemeld aan de gebruiker. Als er wel gegevens geselecteerd waren, dan worden de gegevens (na een bevestiging van de gebruiker) verwijderd.

3.4.4 Voertuiggegevens Het bewerken van voertuiggegevens verloopt volledig analoog met het bewerken van de telefoongegevens. Daarom verwijs ik graag door naar voorgaande beschrijving. Een paar details zijn echter wel verschillend, en deze zullen hier dan ook besproken worden, vergezeld van een paar screenshots ter illustratie. 3.4.4.1

Toevoegen

Onderstaande screenshot toont hoe de gegevens van nieuwe voertuigen worden toegevoegd:

Robby Vermaele

33


Uitwerking

Figuur 3-14: screenshot, toevoegen voertuiggegevens

In het overzicht zijn de namen van de foto’s als hyperlink weergegeven. Indien men hierop klikt, krijgt men een blanco pagina met daarin de afbeelding. Bij het invoegen van nieuwe wordt er alleen maar gevalideerd op het veld voertuignummer. Indien dit veld leeg is, wordt er een melding gegenereerd. Alle andere velden mogen leeg zijn, ze worden opgevuld door standaardwaarden. Zo wordt er bij “Nummerplaat” en “Merk” nnb (nog niet bekend) ingevuld en bij “Opbouw” wordt er nvt (niet van toepassing) ingevuld. De numerieke gegevens hebben standaard waarde 0. Als zowel MTM als Tarra ingegeven zijn én MTM is groter dan Tarra, dan wordt hier automatisch het laadvermogen uit berekend. Indien ze leeg zijn of als MTM kleiner is dan Tarra, dan wordt laadvermogen gelijk gesteld aan 0. Aan ieder voertuig wordt een figuur gekoppeld. In het overzicht kan je ze bekijken als figuren in een pop-up venster. Om bij het invoeren van een nieuw voertuig een foto te kiezen, volstaat het om te klikken op de radiobutton “kiezen” of op de button “Kies foto”. Daardoor wordt er een nieuw venster geopend met hierin een overzicht van alle foto’s die de folder “foto’s” bevat. Deze foto’s worden automatisch gegenereerd met behulp van een ASP-pagina die gebruik maakt van het FileSystemObject. Er wordt in de map gekeken welke figuren er aanwezig zijn, en het overzicht wordt automatisch gegenereerd.

Robby Vermaele

34


Uitwerking

Figuur 3-15: screenshot, fotokeuze

Door het bolletje naast de gewenste foto aan te klikken en nadien op “Keuze Vastleggen” te klikken, wordt de naam van het bestand opgeslagen in een sessieobject. Nadat de keuze vastgelegd is, krijgt de gebruiker een scherm te zien die bevestigt dat een figuur geselecteerd is. Na 5 seconden wordt dit venster dan automatisch gesloten. Zo komt men dan opnieuw terecht op de originele invoerpagina. Als dan tenslotte wordt geklikt op “Toevoegen”, dan wordt de waarde van dit object opgeroepen en opgeslagen in het attribuut “foto”. Indien er gekozen wordt om geen foto toe te voegen, dan wordt een standaardfiguur toegevoegd. Deze heeft het logo van Collitax met daarover de boodschap “foto nog niet beschikbaar”. Om nieuwe foto’s online te plaatsen, moet men wel gebruik maken van een FTPclient om de foto’s in de juiste map op de server zetten. 3.4.4.2

Bewerken

Ook hier is de analogie met het bewerken van telefoongegevens zeer groot. Men werkt opnieuw in 3 stappen, met telkens de nodige validatie. Volgende schermen zijn van toepassing. We beginnen met het openingsscherm

Robby Vermaele

35


Uitwerking

Figuur 3-16: screenshot, bewerk Voertuigen 1

Na selectie van de gewenste voertuigen, krijgen we volgend scherm:

Figuur 3-17: screenshot, bewerken voertuigen 2

Ook hier kan men terug een andere foto toewijzen, de huidige selectie behouden of ervoor kiezen om de standaardfiguur te gebruiken. 3.4.4.3

Verwijderen

Compleet analoog aan verwijderen van telefoongegevens. Lay-out:

Robby Vermaele

36


Uitwerking

Figuur 3-18: screenshot, verwijderen voertuiggegevens

Ook hier kan men de figuren gaan bekijken via een hyperlink.

3.4.5 Klantenaccounts 3.4.5.1

Toevoegen

Figuur 3-19: screenshot, toevoegen klantenaccount

Hier wordt er opnieuw zowel aan client-side als aan server-side gevalideerd. Alle velden dienen ingevuld te zijn, en het mailadres wordt onderzocht op de aanwezigheid van een “@”. Het BTW-nummer wordt nog eens afzonderlijk aan een uitgebreide validatie onderworpen, namelijk:

Robby Vermaele

37


•

Uitwerking

Eerste 2 karakters zijn BE => Belgisch nummer − Punt op karakters 6 en 10 − Controle van BTW-checksum (met behulp van modulo 97) (97 – de module 97 van de eerste 7 karakters van het getal, moet gelijk zijn aan de laatste 2 cijfers van het getal)

•

Eerste 2 karakters zijn geen BE => internationaal nummer − Bevestiging wordt gevraagd aan gebruiker − Opslaan van nummer (indien bevestigd)

Aan server-side wordt er natuurlijk ook gecontroleerd of de login en de BTW-nr nergens anders reeds voorkomen. Een flowchart is te vinden in Appendix C. 3.4.5.2

Bewerken

Opnieuw 2 stappen:

Figuur 3-20: screenshot, bewerken klantenaccounts 1

Na selectie:

Robby Vermaele

38


Uitwerking

Figuur 3-21: screenshot, bewerken klantenaccounts 2

De validatie is helemaal dezelfde als wanneer nieuwe gegevens worden toegevoegd. Aan client-side wordt er nog eens extra gecontroleerd of er geen logins of BTW-nr’s zijn die meermaals voorkomen. 3.4.5.3

Robby Vermaele

Verwijderen

39


Uitwerking

3.4.6 Beheersaccounts Bij het beheer van de accounts heb ik ervoor gekozen om alleen maar de opties “toevoegen” en “verwijderen” aan te bieden. Een administratoraccount bestaat immers maar uit 2 attributen: login en paswoord, waardoor het creëren en verwijderen van gegevens gemakkelijker is dan het aanpassen van gegevens. Normaliter is het ook niet de bedoeling dat dit veel verandert. Maar de mogelijkheid is er wel. De encryptie van de paswoorden gebeurt zoals eerder beschreven. 3.4.6.1

Toevoegen

Figuur 3-22: screenshot, toevoegen administrator

Als validatie wordt er gekeken of de ingegeven login nog niet bestaat

Robby Vermaele

40


3.4.6.2

Uitwerking

Verwijderen

Figuur 3-23: screenshot, verwijderen administrator

Robby Vermaele

41


Besluit

Hoofdstuk 4: Besluit 4.1 Resultaat 4.1.1 Collitax BVBA Het resultaat van deze scriptie is de vernieuwde site van de firma Collitax. De inhoud van de site is eerst en vooral opgebouwd uit de inhoud van de site die voorheen al aangemaakt was. Bovendien is er een nieuwe stijl geïntroduceerd. Er zijn ook tal van nieuwe toepassingen in het geheel ingewerkt. Zo zijn er volgende voorbeelden: •

Verbeterd nieuws

•

Formulieren

Er is ook een volledig nieuw afgeschermd gedeelte waar de klanten in de front-end gegevens kunnen opvragen uit een databank op de server. De nadruk ligt hier vooral op het gebruiksgemak. Via een simpele klik wordt de volledige telefoonlijst weergegeven. En met een paar klikjes kunnen de gegevens van de voertuigen tot in het detail verkend worden. Ook de zoekcriteria die de gebruiker kan invullen, maken het hem of haar gemakkelijk om de gegevens van de gezochte voertuigen te bekijken. Het enige wat voorlopig niet gelukt is, is de klant de gelegenheid geven om zijn paswoord op te vragen. Wegens problemen en tijdsgebrek kon dit niet opgelost worden. Ook de medewerkers van de firma Bexs konden niet meteen achterhalen wat het probleem was. Daarom heb ik besloten om deze feature voorlopig niet weer te geven. Tot slot is er ook nog de back-end van de klantensite, waar het administratief personeel van Collitax BVBA de gegevens in de databanken kunnen wijzigen en aanpassen waar nodig. Steeds gebruik makend van dezelfde lay-out, is het mogelijk om snel en eenvoudig gegevens toe te voegen, aan te passen of te wijzigen.

Robby Vermaele

42


Besluit

Eens men één van de onderdelen onder de knie heeft, is het simpel om de andere te beheren. Eventuele fouten van de gebruiker worden opgevangen door de uitgebreide validatie zowel aan server-side als aan de kant van de client. Hierbij wordt hij/zij aan clientside bijgestaan met tal van boodschappen die in zogenaamde “message boxes” tot zijn/haar aandacht worden gebracht. Mocht deze validatie op de een of andere manier uitgeschakeld worden, dan zal de code de nodige boodschappen creëren aan serverkant door deze in te voegen in de html-pagina’s die naar de client worden gestuurd. We kunnen besluiten dat uniformiteit en gebruiksgemak een leidraad waren.

4.1.2 Algemeen Wegens tijdsgebrek is de nadruk gelegd op de website van Collitax BVBA. In een later stadium en in het verlengde van deze thesis zullen de nodige stappen ondernomen worden om alles over te zetten naar de website van Collitax Express, rekening houdend met de noden en de eisen van dit onderdeel van de Collitax groep.

4.2 Voor- en nadelen Tot slot nog de voor- en de nadelen van de website.

4.2.1 Voordelen •

Een uniforme stijl en eenvoudige lay-out doorheen de volledige site

•

Eenvoudige toegang en bevraging in het front-end gedeelte van de klantensite

•

Uniforme webinterface voor de verschillende onderdelen van het back-end gedeelte van de klantensite

•

De validatie die steeds terugkeert en de gebruiker probeert te beschermen van fouten

•

Alle onderdelen zijn zo dynamisch mogelijk gemaakt, zodat er geen ingrijpende wijzigingen dienen te gebeuren aan de code bij wijzigen van de gegevens.

Robby Vermaele

43


Besluit

4.2.2 Nadelen •

Foto’s voor voertuiggegevens dienen geupload te worden via FTP

•

Nieuws is niet dynamisch (dient aangepast te worden in html). Dit wordt gedeeltelijk opgevangen door de nieuwstikker, waar eenvoudig nieuws kan worden aan toegevoegd.

Robby Vermaele

44


Robby Vermaele

Appendix A

1


Appendix A

Algemeen

http:// www.collitax. be/

BVBA_overvi ew.jpg

Collitax.css

CollitaxGroep .htm

BVBA_overviExpress_over ew2.jpg view.jpg

Collitax.css

CollitaxBVBA .htm

Robby Vermaele

CollitaxExpre ss.htm

2


Appendix A

BVBA

CollitaxBVBA .htm

CollitaxBVBA _Top.htm

CollitaxBVBA _Main.htm CollitaxBVBA _Left.htm

Collitax.css trailerBlue_n obackground. jpg

Collitax2.css Collitax.css

CollitaxBVBA _Main.htm

Collitax.css CollitaxGroep .htm

BVBA_nieuw s.htm

Collitax.css

http:// www.trucks.v olvo.be/

BVBA_dienst en.htm

Collitax.css

BVBA_fotosit e_start.htm

BVBA_histori ek.htm

Collitax.css

BVBA_form.h tm

index.htm

BVBA_formSBVBA_formBlAngloTrailer. ThumbnailFr elect.htm ank.htm htm ame.htm

index.htm

ScrollItUp.cla ss CollitaxExpre ss.htm

BVBA_conta ct.htm Collitax.css Collitax.css

mailto:info@collitax. mailto:herve.buisset mailto:vinciane.colso mailto:martine.deboe mailto:sabine.desme mailto:dirk.platteau be @collitax.be [email protected] [email protected] [email protected] @collitax.be BVBA_form.h tm

controle.asp

BVBA_links.h tm

Collitax.css

mailto:info@collitax. be

http:// http:// http:// http:// http:// http:// http:// http:// http:// index.htm http:// www.sav.be/www.gandaofwww.myriadewww.hdp.be/www.wyco.bewww.daftruckwww.stokota. www.ics- www.reflectawww.vanhool fice.be/ .be/ / s.com/ be/ belgie.be/ lettering.com/ .be/

Robby Vermaele

3


Robby Vermaele

Appendix A

4


Appendix A

Front-end /login/ index.htm

controle.asp

keuze.asp

logerror.htm

telefoon.asp

passerror.ht m

query.asp

changepass. asp

dataOverzich t.asp

changepass2 .asp

dataView.as p

logout.asp

Robby Vermaele

5


Appendix A

Back-end /login/beheer/ index.htm

Admincontrol e.asp

keuze.asp

logerror.htm

Voer\ Voerbeheer.a sp

Robby Vermaele

Admin\ Adminbeheer .asp

Cust\ Custbeheer.a sp

passerror.ht m

Tel\ Telbeheer.as p

6


Appendix A

Algemeen beheer Deze sitemap is algemeen geldig voor het bewerken van de gegevens. “_” vervangen door juiste applicatie (Tel, Voer, Admin of Cust)

_/ _Beheer.asp

_Buttons.asp

_BeheerStart .asp

../ GenButtons. asp logout.asp

bewerk_1.as p

bewerk_1Co m.asp

bewerk_2.as p

bewerk_2Co m.asp

voegtoe_Inpu t.asp

voegtoe_Pro ces.asp

verwijder_.as p

bewerk_3.as p

Niet geldig in Adminbeheer

Robby Vermaele

7


Robby Vermaele

Appendix B

1


Appendix B

cfmail Description Sends a e-mail message that contains query output, using an SMTP server.

Syntax

Attributes

Attribute

Req/Opt

to

Required

Default

Description

Message recipient name(s).

•

Static address. For example, "[email protected]"

•

Variable that contains an address. For example, "#Form.Email#".

•

Name of a query column that contains an address. For example, "#EMail#". An e-mail message is sent for each returned row.

from

Required

E-mail message sender:

•

A static string; for example, "[email protected]"

•

A variable; for example, "#GetUser.EMailAddress#"

Robby Vermaele

2


Appendix B

cc

Optional

Address(es) to which to copy the message.

bcc

Optional

Address(es) to which to copy the message, without listing them in the message header.

subject

Required

Message subject. Can be dynamically generated. For example, to send messages that give customers status updates, "Status of Order Number #Order_ID#".

type

Optional

Extended type attributes for message. Informs receiving email client that message has embedded HTML tags to process. Used only by mail clients that support HTML.

•

HTML

maxRows

Optional

Maximum number of messages to send.

MIMEAttach

Optional

Path of file to attach to message. Attached file is MIMEencoded.

query

Optional

Name of cfquery from which to draw data for message(s). Use this attribute to send more than one message, or to send query results within a message.

group

Optional

CurrentRow

Query column to use when you group sets of records to send as a message. For example, to send a set of billing statements to a customer, group on "Customer_ID." Casesensitive. Eliminates adjacent duplicates when data is sorted by the specified field.

groupCaseSensitive

Optional

Yes

Boolean. Whether to consider case when grouping. If the query attribute specifies a query object that was generated by a case-insensitive SQL query, set this attribute to No, to keep the record set intact.

Robby Vermaele

3


startRow

Optional

server

Optional

Appendix B

1

Row in a query to start from.

SMTP server address to use for sending messages. Server must be specified here or in Administrator. A value here overrides the Administrator.

port

-1

TCP/IP port on which SMTP server listens for requests. This is normally 25.

mailerID

Optional

ColdFusion

Mailer ID to be passed in X-Mailer SMTP header, which

Application

identifies the mailer application.

Server

timeout

Optional

-1

Number of seconds to wait before timing out connection to SMTP server.

• spoolEnable

Optional

Yes

Yes: Saves a copy of the message until the sending operation is complete. May be slower than the No option.

•

No: Queues the message for sending, without storing a copy until the operation is complete.

Copyright © 2002, Macromedia Inc. All rights reserved.

Robby Vermaele

4


Appendix B

cffile action = "upload" Description Copies a file to a directory on the server.

Syntax

Attributes

Attribute

Req/Opt

Default

Description

action

Required

Type of file manipulation that the tag performs.

fileField

Required

Name of form field used to select the file. Do not use pound signs (#) to specify the field name.

destination

Required

Absolute pathname of directory or file on web server. ColdFusion 5 and earlier: trailing slash in directory path is required. ColdFusion MX: trailing slash in directory path is optional. On Windows, use backward slashes; on UNIX, use forward slashes.

nameConflict

Optional

Error

Action to take if filename is the same as that of a file in the directory.

•

Error: file is not saved. ColdFusion stops processing the page and returns an error.

•

Skip: file is not saved. This option permits custom behavior based on file properties.

•

Overwrite: replaces file.

•

MakeUnique: forms a unique filename for the upload; name is stored in the file object variable serverFile.

Robby Vermaele

5


accept

Optional

Appendix B

Limits the MIME types to accept. Comma-delimited list. For example, to permit JPG and Microsoft Word file uploads: accept = "image/jpg, application/msword" The browser uses file extension to determine file type.

mode

Optional

Applies only to Solaris and HP-UX. Permissions. Octal values of chmod command. Assigned to owner, group, and other, respectively. For example:

•

644: Assigns read/write permission to owner; read permission to group and other

•

attributes

Optional

777: Assigns read/write/execute permission to all

One attribute (Windows) or a comma-delimited list of attributes (other platforms) to set on the file. If omitted, the file's attributes are maintained. Each value must be specified explicitly. For example, if you specify attributes = "readOnly", all other attributes are overwritten.

•

readOnly

•

hidden

•

normal (if you use this option with other attributes, it is overridden by them)

Usage After a file upload is completed, you can get status information using file upload parameters. The status parameters use the cffile prefix; for example, cffile.clientDirectory. Status parameters can be used anywhere other ColdFusion parameters can be used. Note: The file prefix is deprecated, in favor of the cffile prefix. Do not use the file prefix in new applications. The following file upload status parameters are available after an upload.

Parameter

Description

attemptedServerFile

Initial name ColdFusion used when attempting to save a file

clientDirectory

Directory location of the file uploaded from the client's system

Robby Vermaele

6


clientFile

Name of the file uploaded from the client's system

clientFileExt

Extension of the uploaded file on the client system (without a period)

clientFileName

Name of the uploaded file on the client system (without an extension)

contentSubType

MIME content subtype of the saved file

contentType

MIME content type of the saved file

dateLastAccessed

Date and time the uploaded file was last accessed

fileExisted

Whether the file already existed with the same path (Yes or No)

fileSize

Size of the uploaded file

fileWasAppended

Whether ColdFusion appended uploaded file to a file (Yes or No)

fileWasOverwritten

Whether ColdFusion overwrote a file (Yes or No)

fileWasRenamed

Whether uploaded file renamed to avoid a name conflict (Yes or No)

fileWasSaved

Whether Cold Fusion saves a file (Yes or No)

oldFileSize

Size of a file that was overwritten in the file upload operation

serverDirectory

Directory of the file saved on the server

serverFile

Filename of the file saved on the server

serverFileExt

Extension of the uploaded file on the server (without a period)

serverFileName

Name of the uploaded file on the server (without an extension)

Robby Vermaele

Appendix B

7


timeCreated

Time the uploaded file was created

timeLastModified

Date and time of the last modification to the uploaded file

Appendix B

Tip: To refer to parameters, use the cffile prefix: for example, #cffile.fileExisted#. Note: File status parameters are read-only. They are set to the results of the most recent cffile operation. (If two cffile tags execute, the results of the second overwrite the first.)


Robby Vermaele

8


Appendix B

cffile action = "delete" Description Deletes a file on the server.

Syntax

See also cfdirectory

Attributes

Attribute

Req/Opt

action

Required

file

Required

Default

Description

Type of file manipulation that the tag performs.

Absolute pathname of file on web server. On Windows, use backward slashes; on UNIX, use forward slashes.


Robby Vermaele

9


Robby Vermaele

Appendix C

1


Client-side

Appendix C

Toevoegen telefoongegevens

Server-side

Beginpagina met invulformulier en overzicht

Gebruiker vult gegevens in en klikt op “Toevoegen”

Javascript aanwezig

Geen Javascript

Zijn alle velden ingevuld?

nee

Foutboodschap in beginpagina

nee


ja

Zijn alle velden ingevuld?

nee

Foutboodschap aan gebruiker (1/ meer velden leeg)

ja

Bestaat naam al in databank?

ja

Gegevens worden toegevoegd

Robby Vermaele

2


Appendix C

Client-side

Bewerken telefoongegevens

Server-side

Beginpagina met overzicht van gegevens

De gebruiker selecteert records en drukt op “Bewerk”

Geen Javascript

Javascript aanwezig

1/ meer records geselecteerd?

Ja 1/ meer records geselecteerd?

Nee

Nee

Pagina met boodschap aan gebruiker dat geen enkel record geselecteerd was

Boodschap aan gebruiker dat geen enkel record geselecteerd was

Gebruiker bewerkt gegevens en klikt op “Wijzig”

Ja Geselecteerde records worden getoond in formulier, klaar voor bewerken

Geen javascript

Javascript aanwezig

Ja

Lege velden?

Bericht aan gebruiker: lege velden niet toegelaten

2/ meer records met zelfde naam?

Ja

Bericht aan gebruiker: 2/ records met zelfde naam

Robby Vermaele

Nee

Nee

Lege velden?


Komt naam al voor in DB


Wijzigen gegevens + doorsturen naar beginpagina

3


Appendix C

Verwijderen telefoongegevens Client-side

Server-side

Beginpagina met overzicht

Gebruiker selecteert records en klikt op “Verwijderen”

Geen Javascript Javascript aanwezig

1/meer records geselecteerd?

ja 1/ meer records geselecteerd?

nee


ja

Gegevens worden verwijderd

nee

Foutboodschap aan gebruiker (geen records geselecteerd)

Robby Vermaele

4


Client-side

Appendix C

Toevoegen voertuiggegevens

Server-side



Javascript aanwezig

Geen Javascript

Is voertuignummer ingevuld?

nee


Ja


ja ja Is voertuignummer ingevuld?

nee

Foutboodschap aan gebruiker (voertuignr leeg)

Bestaat voertuignr al?

Nee

Gegevens worden toegevoegd (lege velden: standaardwaarden)

Robby Vermaele

5


Client-side

Appendix C

Bewerken voertuiggegevens

Server-side



Geen Javascript

Javascript aanwezig



Nee

Nee Pagina met boodschap aan gebruiker dat geen enkel record geselecteerd was



Ja

Geselecteerde records worden getoond in formulier, klaar voor bewerken

Geen javascript

Javascript aanwezig

Ja

Leeg voertuignr?

Bericht aan gebruiker: lege voertuignr niet toegelaten

2/ meer records met zelfde nr?

Ja

Bericht aan gebruiker: 2/ records met zelfde nr

Robby Vermaele

Nee

Nee

Leeg voertuignr?


Komt nr al voor in DB?


Wijzigen gegevens + doorsturen naar beginpagina

6


Appendix C

Verwijderen voertuiggegevens Client-side

Server-side






nee


ja


nee


Robby Vermaele

7


Appendix C

Toevoegen Klantengegevens Client-side

Server-side




BTW-nr en login ingevuld?

nee


Ja


Ja nee

BTW-nr en login ingevuld? Ja

Foutboodschap aan gebruiker

Bestaan BTW-nr en login al?

Ja Nee

Robby Vermaele

BTW-validatie

BTW-validatie

BTW-nr correct?

BTW-nr correct?

Nee

Ja

Foutboodschap aan gebruiker

Toevoegen gegevens

nee


8


Appendix C

Client-side

Bewerken Klantengegevens

Server-side



Geen Javascript

Javascript aanwezig



Nee

Ja

Nee

Geselecteerde records worden getoond in formulier, klaar voor bewerken

Pagina met boodschap aan gebruiker dat geen enkel record geselecteerd was



Geen javascript

Javascript aanwezig Lege BTW-nr of login?

Ja

Lege login of BTW-nr?

Bericht aan gebruiker: lege voertuignr niet toegelaten

Nee Bericht aan gebruiker: 2/ records met zelfde nr

Ja BTW-validatie


Ja


Nee

Nee 2/ meer records met zelfde login of nr?

Ja

Ja

Bestaan login of nr al in DB?

Nee

BTW-validatie

Foutboodschap in beginpagina Nee

Bericht aan gebruiker: BTW-nr ongeldig

Nee

BTW-nr correct?

BTW-nr correct? Ja

Robby Vermaele

Wijzigen gegevens

9


Appendix C

Verwijderen Klantengegevens Client-side

Server-side






nee


ja


nee


Robby Vermaele

10


Appendix C

Validatie BTW-nummer

Start

Is BTW-veld leeg?

Fout BTW-veld leeg

Ja

Internationaal BTW-nummer

Nee Nee

Ja

Zijn eerste 2 karakters “BE”?

MELDING: “wilt u int. BTW-nr ingeven?”

Nee

Int nr?

Nee

FOUT: 1ste 2 kar’s waren geen “BE”

Ja

13 karakters?

Nee

FOUT: telt geen 13 kar’s

Nee

FOUT: niet van vorm xxyyy.yyy.yyy

Dit gedeelte is enkel geldig in Javascript (client-side validation). Aan server-side is er dus geen extra vraag, en zal er metee geconcludeerd worden dat het om een internationaal nummer gaat...

Ja

“.” op plaats 6 en 10?

Ja

Neem eerste 7 cijfers van het BTW-nr en neem van dit getal de mod(97) => mod(7cijers, 97)

Ja

Is (97-mod(7cijers, 97)) = laatste 2 cijfers van het nummer?

Nee

FOUT: geen geldig cijfer

Ja

Geldig Belgisch BTW-nr

Robby Vermaele

11


Appendix C

Toevoegen Admingegevens Client-side

Server-side



Javascript aanwezig

Geen Javascript

Ja

Login en paswoord ingegeven?

nee


Ja nee

Login en paswoord ingegeven? Encryptie paswoord

Foutboodschap aan gebruiker Ja

Opslaan gegevens

Robby Vermaele

12


Appendix C

Verwijderen Klantengegevens Client-side

Server-side






nee


ja


nee


Robby Vermaele

13

Optimaliseren van de webstek van transportfirma Collitax

Recommend Documents