Eindwerk aangeboden door Karel Nijs voor het behalen van de graad van Gegradueerde in de Multimedia en Communicatie Technologie Academiejaar 2002-2003
Department Provinciale Industriële Hogeschool
Website ES-International NV
Eindwerk aangeboden door Karel Nijs voor het behalen van de graad van Gegradueerde in de Multimedia en Communicatie Technologie Academiejaar 2002-2003
Dankwoord Wegens onverwachte omstandigheden ben ik later aan het laatste jaar MCT kunnen beginnen. Dit heeft zeer veel invloed gehad op het ontwikkelen en uitwerken van dit eindwerk. De graduaat Multimedia en Communicate Technologie opleiding berust op vier peilers: Office Automation, PC Technologie, Webtechnologie en Multimedia. Dit eindwerk is vooral gebaseerd op de Webtechnologie peiler: haast alle gezien technologieën worden hier zo efficient mogelijk toegepast. Toch vind dit eindwerk zijn integratie in alle peilers van de MCT opleiding, zoals zal blijken tijdens het lezen van deze scriptie. Ik zou langs deze weg de volgende personen willen bedanken: Roel Geraerts en Kurt Hensen van ES-International NV voor hun begrip tijdens mijn ziekte. Mijn eindwerk promoter Jan De Cooman voor zijn tips en steun in verband met het eindwerk. Els Gobbin, Ann Deraedt en Ronald Bastiaens voor het begeleiden van mijn terugkomst in school. Verder nog dank aan alle personen die ik misschien vergeten ben.
Inleiding Tijdens het schrijven van deze scriptie is er vaak vakjargon gebruikt, dit vakjargon heb ik voorzien van een speciale opmaak zodat het onmiddellijk herkenbaar is, bijvoorbeeld: ASP. Wanneer een woord zo opgemaakt is, kan de verklaring ervan in de woordelijst achteraan de scriptie teruggevonden worden. In deze scriptie wordt ook vaak verwezen naar adressen op het Internet, deze worden cursief weergegeven, bijvoorbeeld: http://www.es-int.com. Deze Internet adressen worden gebruikt ofwel voor mijn stellingen te staven, ofwel als bron, ofwel als referentie, ofwel voor meer informatie op te zoeken: wanneer ik alles tot in de puntjes zou moeten uitleggen, zou het raakvlak van deze scriptie te groot worden. Opmerkingen worden cursief in een aparte alinea weergegeven, bijvoorbeeld: Opmerking: het online zetten van …
Deze thesis in gemaakt met Ms Word XP. Het lettertype is Arial 11pt en hij is afgedrukt met een Hewlett Packard DeskJet 930C.
1 Opdrachtstelling
1 Opdrachtstelling 1.1
ES-International NV
ES-International NV profileert zich als een jong en dynamisch bedrijf op de Europese markt. Ze zijn gespecialiseerd in geavanceerde meet- en besturingssystemen. ES-International NV biedt de industrie een oplossing voor de industrie haar probleem, gaande van speciaal ontworpen meet-, stuur- of analyse software tot en met de juist gedimensioneerde hardware en interfacing die hiervoor nodig is. ES-International NV is actief op vele vlakken: • ontwikkeling van applicaties; • industriële automatisatie; • data verwerving; • Vision en Motion applicaties 1; • turn key oplossingen; • training en consulting; • industrie support; • netwerk en databases; • machine en materiaal ontwikkeling; • product ontwikkeling. De laatste jaren is ES-International NV enorm gegroeid door de enorme vraag naar deze technologische projecten alsook de trend van de industrie deze projecten te laten uitvoeren door toeleverlingsbedrijven zoals ES-International NV.
1.2
Nood aan een update
ES-International NV heeft veel klanten en deze moeten allemaal de nodige informatie terug kunnen vinden. Zoals eerder vermeldt, beschikt ES-International NV al over een website, maar het is tijd voor een update: de inhoud is verouderd en ze willen een uitbreiding van de website doorvoeren.
1
Meer informatie op: http://www.ni.com Karel Nijs Website ES-International NV
9
1 Opdrachtstelling
1.3
Doelstellingen
De doelstelling van de huidige site is gewoon informatie verschaffen. International NV wil nu de functie van de site uitbreiden.
ES-
ES-International NV wil een speciale sectie in de website laten ontwikkelen die enkel toegankelijk is voor bepaalde gebruikers, mits zij een inlog en paswoord verkregen hebben van ES-International NV. Op deze sectie wil ES-International NV bestanden uploaden of informatie beschikbaar stellen enkel voor deze klanten. Wanneer het contact met de klanten beëindigd is, worden de files gewoon verwijderd. Ook het gebruik van de site moet vergemakkelijkt worden: de huidige structuur is te rechtlijnig en de menu’s zijn soms onduidelijk. De gebruiker moet de mogelijkheid krijgen de site te doorzoeken op bepaalde termen zodat er vlugger de juiste informatie gevonden wordt. Omdat ES-International NV steeds bezig is met het ontwikkelen van applicaties en de resultaten hiervan beschikbaar wil stellen aan (potentiële) klanten, moet er de mogelijkheid zijn pagina’s of foto’s toe te voegen aan de website wanneer ES-International NV dat wil. Zij willen hiervoor zo weinig mogelijk beroep doen op externe personen. ES-International NV zou graag de trafiek van de website gemonitord hebben zodat ze een idee hebben vanwaar de meeste bezoekers afkomstig zijn en wat hun configuratie is.
1.4
Het doelpubliek
Het doelpubliek van ES-International NV bestaat uit de mensen die geïnteresseerd zijn in de applicaties die ES-International NV ontwikkelt, potientiële en bestaande klanten van ES-International NV.
1.4.1 De geïnteresseerden en potentiële klanten Dit is een zeer brede doelgroep omdat ES-International NV actief is op vele vlakken: van de medische wereld tot de auto industrie. Deze doelgroep is de belangrijkste voor ES-International NV.
1.4.2 De klanten Dit is een kleinere, selecte doelgroep: met bepaalde klanten houdt ES-International NV nog contact voor opvolging van de geleverde applicatie of voor eventueel documenten beschikbaar te stellen.
Karel Nijs
Website ES-International NV
10
1 Opdrachtstelling
1.5
Werksituatie
1.5.1 Het bedrijf ES-International NV is een klein bedrijfje met een vijftiental werknemers, gelegen in hartje Limburg, te Hasselt. Mijn stage heb ik niet in ES-International NV gelopen, maar ik heb wel in juni 2000 twee weken gewerkt als web developer. Ondanks de kleine vestiging van ES-International NV heeft ze een groot raakvlak: haar applicaties worden in vele ondernemingen gebruikt en we komen er haast dagelijk mee in contact zonder dat we het zelf weten. Een voorbeeld: het inline sorting system in vestigingen van de Delhaize voor het sorteren van bakken leeggoed is ontworpen door ESInternational NV.
Figuur 1 - Bakkensortering in Delhaize
Enkele belangrijke (en bekende) klanten van ESInternational NV zijn Delhaize, Océ Technologies, Solvay, Glaverbel, Agfa Gevaert, Phillips Industrial Activities, Bombardier, …
1.5.2 De opdrachtgever Ik ben in contact gekomen met ES-International NV nadat ik hun rond juni 2000 een email had gestuurd met de vraag of ze geïnteresseerd waren in een update van hun website, een spontane sollicitatie dus. Tijdens een vergadering eind juni 2000 heb ik leren kennismaken met Kurt Hensen en Roel Geraerts. ES-International NV wordt gerund door Kurt Hensen in samenwerking met Roel Geraerts. Tijdens het ontwerpen van de website heb ik het meeste contact gehad met Roel Geraerts, ofwel via e-mail ofwel telefonisch. Dit contact liep altijd vlot en probleemloos. Regelmatig werd er gevraagd een voorlopige versie van de website te tonen en dan werd deze bijgewerkt met de gemaakte opmerkingen.
1.5.3 De werksituatie De eerste weken heb in ES-International NV gewerkt, maar omwille van ziekte ben ik enkele maanden niet actief geweest en heb ik de draad pas stilaan terug kunnen oppakken in oktober. Vanaf toen heb ik telkens thuis op mijn PC gewerkt omdat mijn ziekte het niet toeliet buiten te komen.
Boekhouden-Informatica graduaat Multimedia & Communicatie Technologie lerarenopleiding (D-cursus)
Specialiteit
backend programming databases
Karel Nijs
Figuur 2 - Ontwikkelaar website
Website ES-International NV
12
2 Planning
2 Planning 2.1
Inleiding
Elk project moet voor grotere slaagkansen te hebben, een planning hebben. Door de planning kan doelen vooropstellen: het is altijd makkelijker een aantal kleine "lichtpunten" in de tunnel te zien en daar telkens naar toe te werken, dan je concentreren op één lichtpunt: het einde van de opdracht. Zoals eerder vermeld ben ik door ziekte enkele maanden non-actief geweest en heb ik mijn planning drastisch moeten aanpassen. Mijn ziek worden is echter niet de enige oorzaak van het mislukken van mijn planning: ik had nog nooit een ASP-site gemaakt. In het eerste jaar MCT heb ik, in samenwerking met Delanghe Klaus en Vermeyen Maarten, een eenvoudige HTML site met Javascript geïmplementeerd gemaakt. Bij het maken van deze site hadden we ook een planning moeten vooropstellen en zodoende heb ik geleerd de tijd voor ontwikkeling van een website in te schatten. Mijn planning voor deze website klopte voor het "gewone" HTML gedeelte, maar ik heb me verschat op het ASP gedeelte. Daarom heb ik na behandeling van mijn ziekte, mijn planning opnieuw opgesteld met meer tijd ingecalculeerd voor het maken van het ASP gedeelte. Na het voltooien van dit einwerk zal ik een overzicht opstellen van de besteedde tijd en dit vergelijken met de gemaakte planning. Zodoende heb ik in de toekomst een maatstaf voor het maken van mijn planning voor dit soort opdrachten.
2.2
De originele planning
2.2.1 Week 1 • • • •
huidige website inspecteren + problemen aanduiden; inhoud ordenen en nieuwe inhoud verzamelen; oude site overzetten naar nieuwe webruimte; brainstormen over interface;
Karel Nijs
Website ES-International NV
13
2 Planning
• informatie over webruimte opvragen; • opstellen project info document.
2.2.2 Week 2 • • • • • • •
menu's aanpassen en groeperen; interface uittekenen op papier; interface ontwerpen met grafisch programma; beeldinhoud (foto's) bewerken. interface verfijnen + afwerken; logo updaten; beginnen aan client gedeelte.
Deze planning is iets gedetailleerder omdat ik al reeds enkele weken aan de site gewerkt heb.
2.3.1 Week 1 tot 5 • • • • • • • • • • •
huidige website inspecteren + problemen aanduiden inhoud ordenen + nieuwe inhoud verzamelen oude site overzetten naar nieuwe webruimte brainstormen over interface informatie over webruimte opvragen; opstellen project info document; menu's aanpassen en groeperen; interface uittekenen op papier; interface ontwerpen met grafisch programma; beeldinhoud (foto's) bewerken; interface verfijnen en afwerken;
Karel Nijs
Website ES-International NV
14
2 Planning
• logo updaten; • maken Company-groep: o Info, o Mission, o Contact, o Activities; • maken News; • maken Products-groep: o Products, o Portfolio, o Examples; • maken Downloads; • maken Jobs; • maken Log-in.
2.3.3 Week 7 • testen client deel; • eventueel debuggen client deel; • client deel indienen bij ES-International NV voor spellingscontrole.
2.3.4 Week 8 • brainstormen over administartor gedeelte website; • databasediagram maken; • technologie uitzoeken voor werking administratordeel: o asp – xml – db, o php – xml – db, • interface + menu-structuur uitzoeken administrator deel; • nadenken over beveiliging administratorr deel.
2.3.5 Week 9 tot 12 • • • •
grondbeginselen beveiliging vastleggen; ontwerpen interface met grafisch programma; database ontwerpen; beginnen aan Modify-groep: o News, o Examples; • beginnen aan Database-groep: o Users, o Zoekmachine, o Logs; • beginnen aan Downloads; • logout-optie maken;
Karel Nijs
Website ES-International NV
15
2 Planning
• • • • •
brainstormen over special user1 gedeelte administrator deel site; interface en menu-structuur uitzoeken special user deel; ontwerpen interface met grafisch programma; Info pagina maken; Downloads pagina maken.
2.3.6 Week 13 tot 16 • • • •
debuggen website; stress testen website; eerste voorstelling aan ES-International NV; aanpassingen van ES-International NV doorvoeren;
2.3.7 Tegen 26 mei 2003 • schrijven scriptie; • voorbereiden voorstelling eindwerk.
1
de website is opgedeeld in drie delen: publiek, special user en administrator
Karel Nijs
Website ES-International NV
16
3 Research
3 Research 3.1
Inleiding
Geen project zonder research: je moet weten waaraan je begint. Door op de noden op voorhand goed te bestuderen, kan je een technologie kiezen en met deze het project starten. Bij ES-International NV heeft men een tijd geleden nagedacht over hoe hun doelpubliek te bereiken. Er zijn altijd verschillende keuzes: drukwerk, CD-ROM, video, website, … ES-International NV heeft de keuze gemaakt een website online te zetten waar iedereen, wanneer ze maar willen, informatie kan opvragen over hun bedrijf. Met het online zetten van een website, stellen zij gemakkelijk updatebare informatie ter beschikking: een CD-ROM is een definitief medium, eens in de handen van de klant kan zij niet meer aangepast worden.
3.2
Functionaliteit en doelstellingen
ES-International NV wil het uitzicht van de huidige website veranderen, ze geven de site van National Instruments (http://www.ni.com) aan als voorbeeld. Er moeten enkele inhoudswijzigingen gedaan worden. Opdat de gebruikers vlug informatie kunnen terug vinden, moet er een zoekfunctie beschikbaar zijn. Er moet een sectie zijn voor klanten van ES-International NV: hier moeten zij kunnen inloggen en kunnen beschikken over informatie en bestanden. De mogelijkheden van de webspace waar ES-International NV overbeschikt moeten afgetast worden.
Karel Nijs
Website ES-International NV
17
3 Research
3.3
Oplossingen
3.3.1 Webspace ES-International NV heeft altijd webspace gehad bij EUnet. Vlak nadat ik begonnen ben, is EUnet echter overgenomen door KPN (http://www.kpn.be). Dit hield in dat de website die momenteel online was, verplaatst moest worden naar andere webruimte. De eigenschappen van de nieuwe webruimte (http://jbas1256.kpn.be): • grootte: 23 MB1; • ondersteunt ASP 2.02; • mail object: CDONTS; • database: Ms Access. Er is de mogelijkheid dat KPN de UDL van de database beheerd, maar dit dan tegen betaling. Er kan als database ook gebruik gemaakt worden van Ms SQL Server databases, maar ook dit is extra te bestellen. Omdat ES-International NV geen onnodige upgrades wil doen, zoek ik uit of het mogelijk is de website te maken met de huidige webspace.
3.3.2 Database De server waar ES-International NV webspace heeft, is een Windows server: dit biedt twee mogelijkheden voor Database Management Systems3: Ms Access en Ms SQL Server, beiden Database Management Systems ontworpen door Microsoft. Ms Access De belangrijkste specificaties van een Ms Access database: • maximale database grootte: 2 GB4; • maximaal aantal karakters in een paswoord: 14; • maximaal aantal gebruikers: 255; • maximaal aantal velden in een tabel: 255. Voordelen van een Ms Access database: • wordt ondersteund door webruimte; • men is vertrouwd met de Microsoft toepassing; • eenvoudige installatie • eenvoudig voor aan te spreken; • geschikt voor gebruik van ASP; • geschikt voor de noden van deze website; • we beschikken over de nodige Ms Office licentie voor de database online te zetten; •
eventueel kan er een upgrade gedaan worden naar een Ms SQL Server database.
1
1 MB = 1024 KB er zijn verschillende ASP versies beschikbaar. Dit wordt verder besproken in 7.2.2 Versie 3 database beheer systeem 4 1 GB = 1024 MB Karel Nijs Website ES-International NV 2
18
3 Research
Nadelen van een Ms Access database: • maximaal 255 gebruikers (in realiteit zal dit aantal teruglopen tot 50); • niet geschikt voor groot database verkeer; • men moet over een Ms Office licentie beschikken voor de database online te zetten; • tragere toegangstijden; • Ms Access is een desktop database5. Ms SQL Server De belangrijkste specificaties van een Ms SQL Server database6: • maximale grootte: 1 048 516 Terabytes; • 32 767 databases; • per database twee biljoen tabellen; • 250 kolommen per tabel. Voordelen van een Ms SQL Server database: • schaalbaar: geschikt voor zowel grote als kleine databases; • ondersteunt complexe relatiestructuren; • er is een backup systeem aanwezig; • kan makkelijk meer gebruikers tegelijk aan. Nadelen van een Ms SQL Server database: • duurder dan Ms Access database; • moeilijker op gebied van query's, data types en in- en exporteren van data. Keuze: Voor een definitief besluit te trekken moeten we vooral rekening houden met de noden van het bedrijf, ES-International NV: • kleine database; • weinig database verkeer; • weinig concurrent users7; • geen onnodige kosten; • geen overdreven grote tabellen (met meer dan 350 kolommen). Met de voor- en nadelen in het achterhoofd en rekening houdend met de noden voor de website, heb ik gekozen voor gebruik te maken van een Ms Access database voor de website van ES-International NV: • omdat we, zoals eerder gezegd, onnodige upgrades proberen te vermijden; • een Ms Access database is enkel geschikt voor websites met weinig database verkeer. Omdat de site van ES-International NV de database enkel gaat gebruiken voor de zoekmachine, het inloggen op het administrator deel en het bijhouden van informatie voor de speciale gebruikers, is het niet nodig een upgrade te doen naar Ms SQL Server. • er kan eventueel later, wanneer de database uitgebreid wordt of wanneer er toch veel problemen voorkomen, een upgrade gedaan worden naar Ms SQL Server. 5
geschikt voor lokaal te werken, maar niet online meer informatie te vinden op: http://www.fintech.ru/Library/seussql/ch00.htm 7 gebruikers die gelijktijdig gebruik maken van de database Karel Nijs Website ES-International NV 6
19
3 Research
De opstelling van de database (de tabellen, relaties, …) wordt later in mijn scriptie verder uitgelegd.
3.3.3 Browser In de loop der jaren, sinds het begin van het Internet, zijn er steeds meer en meer browsers ontstaan. We maken hier een onderscheid tussen grote en kleine browsers, afhankelijke en onafhankelijke browsers. De twee grootste browsers zijn zonder meer Ms Internet Explorer8, ontworpen door Microsoft, en Netscape9, ontworpen door Netscape Communications Corporation. Verder zijn er nog een aantal kleinere en minder gebruikte browsers: Opera10, Mozilla11, Lynx12, NeoPlanet13, Apple Safari14, Bounce15, Mosiac16, … Omdat het zinloos is hier alle browsers op te noemen, verwijs ik naar de site http://www.w3.org/WAI/References/Browsing voor een lijst van alle momenteel beschikbare browsers met link naar hun home page. Een website compatibel voor alle browsers maken is iets onrealistisch: er zou meer tijd kruipen in het onderling compatibel maken, dit testen en debuggen, dan in het maken van de website zelf. Daarom gaan we een aantal browsers moeten kiezen die binnen het bereik van ons doelpubliek liggen. Strategie: • ES-International NV bepaald als eerste welke browsers zéker moeten werken voor hun site: zij kennen hun doelpubliek het beste (bv. de Lynx browser valt weg omdat dit een textbrowser is voor Linux systemen). Natuurlijk wil een bedrijf dat de website beschikbaar is voor zoveel mogelijk mensen (en hun browsers), daarom puntje twee; • op het Internet opzoeken welke de meest gebruikte browsers zijn en daar naartoe werken. Op het Internet is veel informatie te vinden over het gebruik van browsers: bijna elke site heeft namelijk een teller ingebouwd die ook de gegevens (bv. resolutie, browser, taal, …) van de surfer verwerkt. Bij het opzoeken van deze informatie moeten we op volgende dingen letten: • niet elke bron op het Internet is betrouwbaar: er is veel foute data beschikbaar. Het is belangrijk dat we kijken naar de credibility17 van de website en eigenaar(s); 8
Windows / Macintosh browser: http://www.microsoft.com/windows/ie/default.asp Windows / Macintosh / Linux browser: http://channels.netscape.com/ns/browsers/default.jsp 10 Windows / Linux browser: http://www.opera.com 11 Windows / Macintosh / Linux browser: http://www.mozilla.org 12 Linux tekst browser: http://lynx.browser.org 13 voorbeeld van afhankelijke browser, installeerd zich over Internet Explorer: http://www.neoplanet.com 14 Macintosh OS X browser: http://www.apple.com/safari 15 special kinder browser: http://www.bouncefilterware.com 16 Windows / Macintosh / Linux browser: http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic 17 geloofwaardigheid Karel Nijs Website ES-International NV 9
20
3 Research
•
niet alle gevonden data geldt voor onze site: de meeste beschikbare data is globaal en kan niet van toepassing zijn voor onze site.
Als bron heb ik gekozen voor TheCounter.com (http://www.thecounter.com/stats) omdat meerdere belangrijke sites op het internet, onder andere W3Schools.com (http://www.w3schools.com), deze site gebruiken als referentie. Omdat ik op het Internet geen kant-en-klare grafiek gevonden heb, heb ik er zelf één gemaakt in Ms Excell met de gegevens over het browsergebruik van januari 2002 tot en met januari 2003 van W3Schools.com. De originele gegevens (TheCounter.com): Browser Internet Explorer 6.x Internet Explorer 5.x Internet Explorer 4.x Netscape 4.x Netscape Compatibel
Jan 02 23 % 64 % 4% 4% 1%
Apr 02 32 % 55 % 3% 4% 1%
Jul 02 39 % 51 % 2% 3% 1%
Okt 02 45 % 46 % 2% 2% 1%
Jan 03 52 % 39 % 1% 1% 1%
Figuur 3 - Tabel gebruikte browsers Januari 2002 - 2003
De gegevens omgezet in grafiekvorm voor duidelijkheid:
70% 60% 50% IE 6.x 40%
IE 5.x
30%
IE 4.x NS 4.x
20%
NS Comp
10% 0% Jan 02
Apr 02
Jul 02
Okt 02
Jan 03
Figuur 4 - Grafiek gebruikte browsers Januari 2002 - 2003
Uit deze gegevens blijkt dat Internet Explorer momenteel de belangrijkste browser is op het Internet en een zeer overheersende positie heeft. Dit heeft mede te maken omdat tot een tijdje geleden (Microsoft heeft van de rechtbank uit moeten implementeren dat men
Karel Nijs
Website ES-International NV
21
3 Research
de standaard browser kon verwijderen18) Internet Explorer x.x19 in het Windows besturingssysteem ingebakken20 zat. Bij het ontwerpen van de website moeten we wel rekening houden met de verschillende versies van Internet Explorer die momenteel beschikbaar zijn en met de eventuele onderlinge verschillen. Alhoewel Netscape ten dode opgeschreven lijkt, wordt het wel nog veel gebruikt in de grafische wereld21 en de Linux gebruikers. Om ook deze gebruikers aan te kunnen spreken, gaan we de website Netscape compatibel maken. Bij het voorstellen van de browser strategie aan ES-International NV maakten zij als opmerking dat de site zeker Netscape compatibel moet zijn omdat vele klanten (onder andere Océ met al hun vestigingen ongeveer 70 000 potentiële bezoekers) toch gebruik maken van deze browser. Enkel voor het maken van het client gedeelte zal er rekening gehouden worden met de gevonden bemerkingen in verband met de browsers omdat we niet op voorhand weten welke browser precies onze bezoeker zal hebben. Het administrator gedeelte (waar ES-International NV de wijzigingen en updates van de content) kan doen, zal enkel Internet Explorer 5.5+ compatibel zijn omdat we hier precies weten met welke PC's dit deel benaderd zal worden.
3.3.4 Resolutie Niet elke PC heeft dezelfde beeldscherminstellingen: de waaier PC's die zich op het internet bevinden is zeer groot en de schermresoluties kunnen dus ver uiteen lopen. Wanneer je een website ontwerpt, mag je er niet vanuit gaan dat men dezelfde PC heeft als die waarop de website gemaakt wordt. Als ontwerper beschikt je namelijk vaak over een recente PC waar gemiddelde surfer niet over beschikt: vaak werken mensen op een verouderd systeem of op een openbaar beschikbaar systeem (bv. in de bibliotheek) waar zij niet kunnen beslissen over de configuratie. Voor de resolutie te bepalen voor de website van ES-International NV heb ik weer TheCounter.com als bron gekozen. Net zoals bij 3.3.3 Browser heb ik aan de hand van de brongegevens mijn eigen grafiek opgesteld. De originele gegevens (TheCounter.com): Scherm resolutie 1024x768 en + 800x600 640x480
Jan 02 39 % 52 % 4%
Apr 02 41 % 51 % 3%
Jul 02 44 % 50 % 3%
Okt 02 45 % 49 % 2%
Jan 03 46 % 47 % 3%
18
meer informatie hierover: http://abcnews.go.com/sections/tech/DailyNews/msdoj_consumers991108.html http://news.bbc.co.uk/1/hi/business/47669.stm 19 met x.x bedoelen we hier alle Internet Explorer versies 20 het wordt gratis bijgeleverd en we zijn verplicht het te gebruiken 21 het Macintosh platform gebruikt Netscape (en Mac versie van Internet Explorer) Karel Nijs Website ES-International NV
22
3 Research
andere / onbekend
5%
5%
3%
4%
5%
Figuur 5 - Gebruikte resoluties Januari 2002 - 2003
De gegevens omgezet in grafiekvorm voor duidelijkheid:
60% 50% 40% 1024x768 en + 800x600
30%
640x480 20%
andere / onbekend
10% 0% Jan 02
Apr 02
Jul 02
Okt 02
Jan 03
Figuur 6 - Grafiek gebruikte resoluties Januari 2002 - 2003
Uit de gegevens kunnen we afleiden dat de meeste gebruikte resolutie 800x600 is, met een stijgende trend naar 1024x768. Omdat we willen dat de site werkt voor zoveel mogelijk gebruikers, maar deze groep gebruikers ook niet willen benadelen (door bijvoorbeeld een té kleine resolutie te kiezen), heb ik gekozen voor een resolutie van 800x600 te handhaven. Gericht op de toekomst, werkt deze site perfect op resoluties 1024x768 en hoger: via scripting gaat de site namelijk zich aan passen aan de resolutie van de gebruiker (met dan als minimum 800x600).
3.3.5 Navigatiestructuur Voor het opstellen van de navigatiestructuur van de website was ik vrij. Ik moest wel, telkens als er een grote wijziging of een deel af was, ES-International NV op de hoogte brengen en hun goedkeuring krijgen voor de aanpassing definitief op te nemen in de website. Voor te komen tot de navigatiestructuur heb ik verschillende schetsen en concepten eerst op papier uitgewerkt alvorens ze te maken in Dreamweaver MX. Belangrijke elementen van de navigatie: • moet duidelijk zijn: elke gebruiker, ook gebruikers die voor het eerst op het Internet surfen, moet zijn weg op de website terug vinden; Karel Nijs
Website ES-International NV
23
3 Research
• •
logische positionering op het scherm: navigatie links of bovenaan de website is vertrouwd voor Windows gebruikers; de navigatie moet enkel de belangrijkste elementen bevatten: geen onnodige links opnemen in de navigatie.
Eisen door ES-International NV gesteld tijdens het ontwerpen van de navigatie: • pop-up menu (net zoals de menubalk in een Windows systeem); • dit pop-up menu wordt zichtbaar wanneer men met de muis over het menu item gaat, het is niet nodig te klikken; • het moet duidelijk zijn waar de speciale gebruikers kunnen inloggen; • de Search is overal op de website zichtbaar; • het telefoonnummer van ES-International NV is altijd zichtbaar.
3.3.6 Taal Omdat ES-International NV een zo groot mogelijk doelpubliek wil aanspreken, hebben ze besloten de website in het Engels te laten maken. De huidige website is ook in het Engels en aangezien een echte inhoudelijke update niet gedaan moet worden, moet er geen tijd gestoken worden in het vertalen van de pagina's. De hele website is dus Engelstalig, op twéé stukjes na: de Jobs-pagina en een nieuwsbericht in de News sectie: ES-International NV vondt het hier niet nodig deze pagina's te vertalen. Ze zullen eventueel later vertaald worden, maar dit is geen prioriteit voor hun.
3.4
Het 3 tier model Een applicatie kan altijd opgedeeld worden in verschillende onderdelen, in dit geval:
tieren. Bij een ideale applicatie is het data opslag gedeelte, het data verwerkings gedeelte en het GUI gedeelte in drie aparte tieren strikt gescheiden. Het data opslag gedeelte is de plaats waar we al onze gegevens (data) gaan wegschrijven (opslaan). Dit kan in een database zijn, maar ook evengoed in een tekstfile, een XML file, enz. Het data verwerkings gedeelte is de plaats waar de buisiness logic zich situeert. Met de buisiness logic gaan we de data verwerken. Dit varieert van de logica achter het wegschrijven van de data in de data tier tot het geven van een pop-up message box22 wanneer de gebruiker een veld op een formulier niet of foutief ingevuld heeft. Het GUI gedeelte zorgt voor het visuele van de applicatie: dit zijn bijvoorbeeld de labels van een formulier, de interface, … Visueel wordt dit als volgt voorgesteld: 22
berichtvenster Karel Nijs
Website ES-International NV
24
3 Research
Figuur 7 - Het 3 tier model
Zoals te zien is op het diagram, zijn bij 3 tier de verschillende lagen duidelijk van elkaar gescheiden. Voor het makkelijker te maken, heb ik de Data Access Tier hier de data opslag tier, de Business Logic Tier de data verwerkings tier en de Presentation Tier de GUI tier genoemd. De bedoeling van het 3 tier object model is dat men aanpassingen kan doen aan één van de lagen, zonder dat de andere lagen daar last van hebben. Het zou dus perfect mogelijk zijn de database in de data opslag tier te vervangen zonder dat de GUI tier hier last van zou hebben. Idealiter willen we een 3 tier applicatie bekomen. In klassieke ASP23 is dit echter niet volledig mogelijk: de verwerking van de data (in ASP code in dit geval) gaat doorsijpelen naar de GUI tier. Desondanks gaan we zoveel mogelijk met gescheiden tieren proberen te werken. In het kort het 3 tier model van onze website: • GUI (Presentation Tier): HTML / ASP; • data verwerking (Business Logic Tier): ASP; • data opslag (Data Access Tier): Ms Access.
23
er is nu ook ASP.NET: http://www.asp.net Karel Nijs Website ES-International NV
25
4 Data opslag: de database
4 Data opslag: de database 4.1
Inleiding
In dit hoofdstuk wordt het uitwerken van de database beschreven. Ik ga tonen waarom ik bepaalde keuzes heb genomen tijdens het opstellen van de database. Over al deze keuzes is nagedacht met de functionaliteiten van de website in het achterhoofd. Het kan natuurlijk zijn dat men tijdens de ontwikkeling erachter komt dat men verkeerd bezig is en dat men het over een andere boeg moet gooien, maar dat telt ook voor mij als leer- en/of werkervaring. Dit is echter niet de eerste database wat ik ontworpen heb: al vanaf het 5e jaar Secundair Onderwijs ben ik met Ms Access aan het werken en heb hierdoor al een zekere ervaring op gedaan. Maar met de nieuwe technieken en technologiën aangeleerd op het tweede jaar MCT, komt men voor andere en nieuwe problemen te staan waar misschien een andere oplossing uiteindelijk toch beter voor lijkt. Op zo'n moment heb ik altijd eerst goed nagedacht over de mogelijkheden, eventueel een andere oplossing voor de oorzaak proberen te bedenken en niet het niet onmiddellijk overeen andere boeg gegooid.
4.2
Database Management System
Als DBMS 1 heb ik, zoals beschreven in 3.3.2 Database, Ms Access gekozen omdat dit systeem naar mijn mening voldoet aan de noden van de website. Het werken in Ms Access is makkelijk voor mij omdat ik zelf over de nodige kennis beschik van het DBMS en er al enige ervaring mee heb vanop school en enkele projectjes thuis. ES-International NV beschikt over een licentie voor Ms Access te gebruiken (zij werken voor toepassingen ook met databases) en thuis heb ik ook een versie van Ms Access. Bij ES-International NV werken ze met Ms Access 2000, terwijl ik thuis echter werk met Ms Access XP2. Sinds Ms Office 2000 echter is conversie geen probleem meer tussen deze 1
Database Management System momenteel de laatste versie van het Ms Office pakket Karel Nijs Website ES-International NV 2
26
4 Data opslag: de database
programmaversies: Ms Access XP kan probleemloos databases, gemaakt met een oudere versie van Ms Office, openen en een Ms Access XP database kan nu ook probleemloos geopend worden in oudere Ms Office versies3. Dit heet "backward compatibility".
4.3
Tabellen
Na het opzoeken van informatie over verschillende DBMS'en zijn we tot de conclusie gekomen dat Ms Access niet geschikt is voor zwaar databaseverkeer en daarom gaan we dus de database niet te intensief gebruiken. Omdat ES-International NV de site updatable wil maken, moet de data op één of andere manier in een bepaald systeem met een bepaalde logica opgeslagen worden. De grote delen data, de echte content van de site, worden opgeslagen in XML. Dit wordt verder beschreven in 5 Data opslag: XML. Rekening houdend met de noden van de website, de conclusies genomen in verband met het DBMS en de complexiteit, kiezen we voor 4 tabellen aan te maken: • tblUsers, beschreven in 4.3.1 Tabel users; • tblUserInformation, beschreven in 4.3.2 Tabel user information; • tblSearch_keywords, beschreven in 4.3.3 Tabel search keywords; • tblLogs, beschreven in 4.3.4 Tabel logs; Opmerking: omdat de site Engelstalig is, is ook de hele achterliggende code, de benaming van de files alsook de benaming van de tabellen Engelstalig. Dit is gedaan omdat men zo makkelijker de link kan leggen tussen menu items, files en tabellen. Een voorbeeld: op het administrator gedeelte van de website is er in het "Database" menu een optie "Users" beschikbaar. De achterliggende pagina's heten "dat_users_toevoegen.asp", "dat_users_tonen.asp", … De tabellen waar deze informatie in is opgeslagen heten "tblUsers" en "tblUserInformation". Voor het maken van tabellen, variabelen, files, … heeft men ons de Leszynski4 notatie aangeleerd op school. Deze notatie houdt in dat men voor een tabelnaam, variabelenaam, filenaam, … een aantal (één tot drie) letters gaat zetten zodat de inhoud/waarde achter deze naam duidelijk wordt aan de hand van de eerste drie letters (dit komt later bij het bespreken van de scriptingtaal nog eens aan bod). Voor conform te zijn met deze notatie (en voor het eigen gemak), heb ik gekozen als prefix5 voor tabellen "tbl" te nemen. Bij de naamgeving van de velden in de tabellen is er ook telkens rekening gehouden met consistentie: alle velden beginnen met een hoofdletter en spaties worden vervangen door underscores6. 3
op Ms Access 98 na, meer informatie: http://www.microsoft.com/office/evaluation/indepth/compare.asp 4 Leszynski naming conventions: http://www.csun.edu/itr/guides/access/2000/beg03.html 5 voorvoegsel 6 platliggende streepje "_" Karel Nijs Website ES-International NV
27
4 Data opslag: de database
4.3.1 Tabel users Rekening houdend met de naming conventions en de naam van het menu item in het administrator gedeelte, heb ik deze tabel "tblUsers" genoemd. Deze tabel bevat alle gegevens omtrent het inloggen/aanmelden van de gebruikers op onze site. tblUsers Login Paswoord Datum_laatste_login Uur_laatste_login Uur_laatste_logout Figuur 8 - Tabel tblUsers
Het veld "Login" moet uniek zijn in de tabel, met dit veld gaan we de gebruiker identificieren. De informatie van de gebruiker wordt opgeslagen in een andere tabel: "tblUserInformation", deze wordt verder besproken in 4.3.2 Tabel user information. De velden "Datum_laatste_login", "Uur_laatste_login" en "Uur_laatste_logout" houden de gegevens van het laatste bezoek van elke administrator bij. Zo heeft ES-International NV al deels zicht over wie zich als laatste op het administrator gedeelte heeft begeven. Dit kan nodig zijn voor eventuele fouten en/of misbruiken vast te stellen. Het bijhouden van deze en andere gegevens als beveiliging komt later, in 4.3.4 Tabel logs, terug aan bod.
4.3.2 Tabel user information Rekening houdend met de naming conventions en de naam van het menu item in het administrator gedeelte, heb ik deze tabel "tblUserInformation" genoemd. Deze tabel bevat meer gedetailleerde informatie over de gebruikers. Voor elk record in de tabel, moet er een record zijn in de tabel "tblUsers". Dit dwingen we af door een relatie met referentiële integriteit (dit wordt verder uitgelegd in 4.4 ER-diagrammen). tblUserInformation Login Niveau Folder Naam Voornaam StraatNr Postcode Gemeente Land TelNr FaxNr Karel Nijs
Website ES-International NV
28
4 Data opslag: de database
GSMNr Email Website Figuur 9 - Tabel tblUserInformation
Net zoals in de tabel "tblUsers" is "Login" uniek: er mag namelijk maar één gebruiker met een bepaalde login bestaan, anders kunnen we hem niet terugvinden in ofwel "tblUsers" ofwel in "tblUserInformation". Het veld "Niveau" wordt gebruikt als beveiliging voor het administrator gedeelte, dit wordt verder uitgelegd in 7 Data verwerking: ASP. Het veld "Folder" duidt de folder aan die de gebruiker heeft op de server. Ook dit veld is uniek, maar ook dit wordt in 7 Data verwerking: ASP uitgelegd. De rest van de velden ("Naam", "Voornaam", "StraatNr", …) houden gewoon informatie over de gebruiker bij. De naamgeving spreekt voor zich.
4.3.3 Tabel search keywords Rekening houdend met de naming conventions en de naam van het menu item in het administrator gedeelte, heb ik deze tabel "tblSearch_keywords" genoemd. De tabel bevat de woorden waarop gezocht kan worden met de zoekmachine die beschikbaar is op de website. Zonder deze tabel, of wanneer deze tabel leeg is, kan er niet gezocht (of niets gevonden) worden met de zoekmachine. tblSearch_keywords ID Keywoord Situering Pagina Figuur 10 - Tabel tblSearch_keywords
Voor deze tabel zijn er geen relaties met andere tabellen nodig, maar omdat er altijd minstens één veld in de tabel uniek moet zijn7, heb ik een veld "ID" aangemaakt van het type "Autonummering". Wanneer men "Autonummering" als type instelt, wordt er automatisch een nummering aangemaakt in de tabel. Vanaf dan wordt er, telkens wanneer men een record toevoegd aan de tabel, automatisch een nummer8 in het gekozen veld ("ID") gegenereerd. In het veld "Keywoord" staat het woord waarop gezocht kan worden met de zoekmachine. Dit veld zou niet als uniek genomen kunnen worden omdat sommige sleutelwoorden op verschillende pagina's kunnen voorkomen. Het sleutelwoord "automation" bijvoor7
Ms Access vereist minstens één primary key, meer informatie: http://msdn.microsoft.com/library/default.asp?url=/library/enus/off2000/html/acconWhatKindPrimaryKeyDoINeedS.asp 8 dit is géén willekeurig nummer: Ms Access houdt het aantal record bij en verhoogt dit telkens met één Karel Nijs Website ES-International NV 29
4 Data opslag: de database
beeld komt voor in de secties "Company > Info" en "News > Advanced Monitoring Systems". Het veld "Situering" duidt de sectie aan waartoe het sleutelwoord behoort. Ook dit veld kan niet uniek zijn omdat er meerdere sleutelwoorden per sectie beschikbaar zijn. De situering "Company > Info" bijvoorbeeld heeft 16 opgegeven sleutelwoorden en komt dus ook 16 maal voor in de tabel. Het veld "Pagina" bevat het pad van de pagina waar het sleutelwoord te vinden is. Volgende dezelfde logica als voor het veld "Situering" kan dit veld niet uniek zijn. Omdat een bepaalde pagina altijd tot één sectie op de website behoord, zal deze minstens evenveel keer in de tabel staan als de sectie zelf. In ons voorbeeld staat "../HTML/comp_info.html" ook 16 maal in de tabel.
4.3.4 Tabel logs Rekening houdend met de naming conventions en de naam van het menu item in het administrator gedeelte, heb ik deze tabel "tblSearch_keywords" genoemd. tblLogs ID Login Datum Tijd Omschrijving Figuur 11 - Tabel tblLogs
Ook hier weer is het uniek veld "ID" van het type "Autonummering" omdat het ook bij deze tabel niet nodig is voor te linken naar een andere tabel. Het doel van deze tabel is overzicht te hebben van de activiteiten op het administrator gedeelte. Alle acties uitgevoerd door ingelogde personen, worden gelogd in de database. Het veld "Login" zorgt ervoor dat we altijd weten wie er iets heeft uitgevoerd. De velden "Datum" en "Tijd" geven ons het preciese tijdstip weer wanneer de actie uitgevoerd is. Het veld "Omschrijving" bevat een beknopte tot middellange omschrijving van de uitgevoerd actie. De omschrijving wordt in de scriptpagina's, beschreven in 7 Data verwerking: ASP, meegeven als waarde. Een voorbeeld van het gebruik van deze tabel: personeelslid X, verantwoordelijk voor de communicatie tussen klanten van ES-International NV, denkt dat de contacten met klant Y afgelopen zijn en wist zijn account in de database. Klant Y belt de support van ESInternational NV. De support dienst kan vaststellen dat personeelslid X een fout heeft begaan en maakt de account opnieuw aan. Karel Nijs
Website ES-International NV
30
4 Data opslag: de database
4.4
ER-diagrammen
In 4.3 Tabellen hebben we gesproken over relaties tussen verschillende tabellen. Dit wordt gedemonstreerd met onderstaande figuren.
Figuur 12 - ER diagram
Op bovenstaande figuur is duidelijk de één-op-één relatie te zien tussen de tabellen "tblUsers" en "tblUserInformation". Voor deze relatie is er referentiële integriteit afgedwongen. Dit wil zeggen dat er voor elke record in "tblUsers" één record in "tblUserInformation" mag zitten en dan beiden met elkaar verbonden/gelinkt zijn met een uniek sleutelwoord. In deze tabellen is het sleutelwoord het veld "Login". In de tabel "tblLogs" is er ook een veld "Login", dit veld is echter niet uniek in de tabel omdat er bijvoorbeeld meerdere records van dezelfde gebruiker zijn. De gegevens van de gebruiker kunnen wel eventueel nog opgevraagd worden aan de tabellen "tblUsers" en "tblUserInformation".
Figuur 13 - Demonstratie referentiële integriteit
Karel Nijs
Website ES-International NV
31
4 Data opslag: de database
Op bovenstaande figuur illustreer ik dat Ms Access de referentiële integriteit al herkent wanneer we in de tabel gaan kijken. De bijhorende gegevens uit tabel "tblUserInformation" worden al geplaatst bij de gegevens in tabel "tblUsers". Dit zelfde principe gaan we hanteren in de scipting van website: met de login, gegevens uit twee verschillende tabellen halen en deze zo gebruiken of bewerken. Opmerking: de logins en paswoorden zijn hier uit veiligheidsoverwegingen verwijderd.
4.5
UDL
In Windows kan men op verschillende manieren een database connectie verwezelijken: JDBC, ODBC, … Wanneer men op een Windows platform met OLE DB database werkt, maakt men connectie met de database via een UDL. Omdat er voor het gebruik en configuratie van UDL files betaald moet worden, heb ik voor connectie te maken met de database op de server eerst lokaal een UDL aangemaakt. Daarna heb ik deze file geopend in TextPad en de connectiestring die erin stond gekopieerd en geplakt in de code voor het maken van de database connectie.
4.6
Beveiliging
Omdat in de database de paswoorden bijgehouden worden voor alle gebruikers (ook deze met speciale rechten op de website) is het belangrijk de database goed te beveiligen. Daarom heb ik niet voor een logisch9 paswoord gekozen, maar voor een paswoord dat moeilijker te achterhalen is.
9
bijvoorbeeld naam webmaster, naam bedrijf, naam directeur, … Karel Nijs Website ES-International NV
32
5 Data opslag: XML
5 Data opslag: XML 5.1
Inleiding
In dit hoofdstuk wordt er uitgelegd waarom precies ik gebruik maak van XML, wat XML is, de beveiliging ervan, … Tijdens het tweede jaar MCT hebben we een semester lang XML gehad. De hiermee opgedane kennis was goed genoeg voor als basis te fungeren, maar net zoals bij de meeste vakken is de MCT'er verondersteld zich zelf verder te verdiepen indien het vakgebied hem meer interesseert. Met deze gedachte in het achterhoofd heb ik me in het tweede jaar MCT meer verdiept in XML en het gebruik daarvan. Sindsdien heb ik altijd gebruik gemaakt van XML (al dan niet in combinatie met HTML, ASP, Flash, …) bij het ontwerpen van websites.
5.2
Wat
XML is, net zoals HTML, een markup language: een taal geschikt voor tekst op te maken. Maar er is een belangrijk verschil tussen de twee talen: HTML is gemaakt voor tekst op te maken in functie van het uitzicht, terwijl XML dient voor de tekst zo goed mogelijk te beschrijven. In tegenstelling tot HTML heeft XML haar eigen tags1 die je zelf moet definiëren. Op een paar beperkingen2 na ben je dus volledig vrij om je tagnames te bepalen. XML wordt wel eens de verbeterde versie van HTML genoemd omdat ze de beperkingen van HTML wegneemt. Voordelen van HTML: • HTML is makkelijk leesbaar voor mensen; • er is de mogelijkheid te linken tussen verschillende HTML documenten.
1
een element in het HTML bestand, bijvoorbeeld: … http://www.w3schools.com/xml/xml_elements.asp Karel Nijs Website ES-International NV
2
33
5 Data opslag: XML
Nadelen van HTML: • de tagnames zeggen niets over de inhoud; • de interpretatie voor het verwerken van HTML documenten gebeurt te slordig: een HTML document kan er anders uitzien in verschillende browsers. XML is strenger dan HTML: HTML laat toe dat je sommige elementaire elementen van het HTML document weglaat en nog steeds de inhoud van het document kan bekijken. Een voorbeeld: een HTML pagina met enkel onderstaande regel code zou zonder probleem de figuur in de browser kunnen weergeven.
Bovenstaand voorbeeld is geen correcte XML syntax: er moet altijd één root bestaan en alle tags moeten afgesloten worden3. Volgens de XML vereisten zou deze pagina er minstens zo uit moeten zien:
De XML parser4 zal dit document wel nog niet kunnen weergeven: XML vereist een declaratietag bovenaan het document. Aan de hand van deze tag weet de parser wat de XML versie is en wat de tekst encodering5 is. Een volledig werkend XML document zou zijn:
Dit document kan nu wel niet meer weergegeven worden in de browser zoals een HTML document: de browser kijkt namelijk naar de eerste tag, in dit geval de XML versie en encodering declaratie, en laat de de rest van het document uitvoeren door de XML parser. Zoals eerder gezegd, dient XML voor data te beschrijven, we gaan dus in de browser niet de gewenste figuur te zien te krijgen, maar gewoon de boomstructuur van het XML document.
3
ofwel …, ofwel de parser valideerd en verwerkt het XML document 5 er is bijvoorbeeld een verschil tussen Westerse en Chinese encodering Karel Nijs Website ES-International NV
4
34
5 Data opslag: XML
5.3
Waarom
Waarom heb ik nu precies de combinatie van een Ms Access database en XML documenten gekozen bij het ontwerpen van deze site? In 3.3.2 Database hebben we besloten voor een Ms Access database te kiezen. Met dit in het achterhoofd weten we dat zo'n database niet al te zware trafiek aan kan: er kunnen maximaal 50 gebruikers actief zijn en de toegangstijden zijn redelijk traag. Omdat we willen dat de website voor zoveel mogelijk gebruikers tegelijk beschikbaar is en dat deze vlot werkt (niet extra lang wachten tot bepaalde pagina's geladen zijn), gaan we het database verkeer zoveel mogelijk beperken. Eén oplossing hiervoor is een tweede database aanmaken en deze ook online te zetten, maar dit is redelijk onpraktisch en het laden van de pagina's kan hiermee nog traag gaan. Bovendien gaan we zo de server extra belasten: er zouden namelijk per gebruiker twee database connecties zijn en dit zal, bij veel gebruikers online, de server (en dus ook de website) alleen maar vertragen. Een andere oplossing is de bestaande database behouden en de data van de webpagina's niet hierin opslaan, maar in aparte XML documenten. Zo wordt het database verkeer beperkt en is er een snelle databenadering van de XML data. Ik heb voor de laatste oplossing gekozen. Niet alle inhoud van de site moet dynamisch zijn: ES-International NV heeft speciale pagina's afgebakend die zeker dynamisch aanpasbaar zouden moeten zijn, de andere zijn makkelijk editeerbaar met DreamWeaver6. Omdat de inhoud van de site wel eens zou kunnen oplopen, heb ik niet gekozen om alle dynamische pagina's in één XML document te stoppen, maar allemaal in aparte XML documenten. De verwerking van één groot XML document zou lange tijd innemen als men hiervan maar één onderdeel tegelijk kan zien.
5.4
Benadering
Bij het maken van een website heeft men (meestal) de keuze tussen verschillende manieren om de data te benaderen. Ik ga deze manieren kort bespreken en verklaren waarom ik er wel of niet voor gekozen heb. Er bestaan hoogstwaarschijnlijk nog andere manieren voor data benadering die misschien zelfs nog wel beter kunnen zijn. Maar deze vallen dan buiten mijn kennisgebied wat niet per sé betekent dat ik ze niet zou kunnen: in principe is elke technologie met een beetje moed en wilskracht aan te leren. Een voorwaarde is natuurlijk wel dat men van het bestaan van deze technologie afweet en de webspace deze ondersteunt. Dit eindwerk met PHP en een MySQL7 database maken, zou ook perfect mogelijk zijn, ware het niet dat de webspace dit niet ondersteunt. 6
zie 8 Data weergave: HTML MySQL is een Linux DBMS Karel Nijs
7
Website ES-International NV
35
5 Data opslag: XML
Bij alle besproken opties wordt er telkens gebruik gemaakt van Javascript8 omdat deze taal geen speciaal platform vereist, (bijna helemaal) browser compatibel is en geen speciale webruimte nodig heeft.
5.4.1 Puur HTML Een eenvoudige, niet dynamische website bestaat uit statische HTML pagina's. Wanneer dit soort site voltooid is, moet de webmaster (of een ander persoon met HTML kennis) telkens gecontacteerd worden om de inhoud van de site te wijzigen. Voor dit type website heeft men geen speciale webruimte nodig.
5.4.2 DOM In HTML pagina's kan met men XML aanspreken via het Document Object Model. Het Document Object Model is ontwikkeld voor HTML pagina's dynamischer te maken: met het DOM kan men namelijk HTML pagina's (in bescheiden mate) animeren. Het is echter niet mogelijk de inhoud dynamisch te wijzigen (bv. een nieuw topic9 toevoegen aan een nieuws thread10) met enkel DOM en XML. Een voorbeeld van XML file initialisatie met DOM: <SCRIPT type="text/javascript"> var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load("dummie.xml"); // ....... verdere code;
Helaas wordt DOM nog niet standaard ondersteund door alle bestaande browsers, maar dit is niet echt een probleem omdat de grootste browsers DOM wel ondersteunen11. Voor DOM in combinatie met XML te gebruiken heeft men geen speciale webruimte nodig.
5.4.3 PHP Personal HomePage scripting samen met XML zou een andere oplossing zijn. PHP wordt de laatste jaren meer en meer gebruikt, toch heeft onze school12 ervoor gekozen minder aandacht te geven aan deze taal. Dit is hoogstwaarschijnlijk te wijten aan het feit dat de meeste huidige informatica richtingen vooral Windows geörienteerd zijn. De PHP scripting engine werkt wel onder Windows, maar werkt veel beter op een Linux platform.
8
http://www.javascript.com onderwerp 10 groep nieuwsberichten op een forum 11 meer informatie: http://www.xs4all.nl/~ppk/js/version5.html http://www.w3.org/2003/02/06-dom-support.html 12 Hogeschool West-Vlaanderen Departement PIH, http://www.pih.be Karel Nijs Website ES-International NV 9
36
5 Data opslag: XML
Een voorbeeld van het parsen van een XML document met PHP is redelijk omslachtig voor hier weer te geven. Er kan wel een voorbeeld gevonden worden op: http://www.zend.com/zend/art/parsing.php. Voor het gebruik van PHP pagina's heeft men ondersteunende webspace nodig. Helaas ondersteunt de webspace van ES-International NV dit niet.
5.4.4 ASP Via Active Server Pages in combinatie met XML is snelle databenadering mogelijk: er is geen delay meer van het werken met een database, enkel nog het parsen van de XML file. Maar dit wordt dan beperkt door de grootte van de XML files te beperken en ze in te delen per categorie zoals beschreven in 5.3 Waarom. ASP scripting leek voor mij de beste oplossing en daarom heb ik ook hiervoor gekozen. De webspace van ES-International NV ondersteunt ASP 2.0: dit houdt in dat alle door ES-International NV vooropgesteld eisen (wijzigen van pagina's, beveiliging, snel, …) mogelijk zijn.
5.4.5 Andere Flash in combinatie met ASP of PHP scripting zou ook mogelijk zijn, maar ESInternational NV heeft ervoor gekozen niet met Flash te werken (dit wordt verder besproken in 8.4 Flash). Ook JSP in combinatie met een database of XML is een optie, maar voor het laatste jaar MCT, kende ik de mogelijkheden van JSP nog niet. Met de nieuwe .net technologie ASP.NET is het ook mogelijk XML en/of databases aan te spreken. Deze taal wordt spijtig genoeg nog niet door alle servers ondersteund, alsook niet door de webspace van ES-International NV dus dit behoort al niet tot onze mogelijkheden.
5.5
Data eigenschappen
Het is mogelijk de data in een XML file op verschillende manieren te stockeren. Het is altijd verplicht een root element te hebben en in hierin gaan we verschillende nodes aan maken waarin we de data opslaan. Het is gemakkelijker dit voor te stellen in een boomstructuur: het root element is de top van de boom en de elementen binnen deze root de takken, waar de data in wordt opgeslagen.
Karel Nijs
Website ES-International NV
37
5 Data opslag: XML
Figuur 14 - XML elementen vs. attributen
Zo'n data island in de XML file kan op zijn beurt weer data bevatten. Op een forum bijvoorbeeld ben je niets met het feit dat er een bericht gepost is, je moet ook weten wie het gepost heeft, wanneer, wat de inhoud was, … Het is mogelijk deze data te stockeren in elementen of in attributen. Er is geen precieze afspraak rond deze opslag: men is vrij in keuze. Voor mijn project heb ik gekozen voor eigenschappen van data op te slaan in de attributen en de data zelf in elementen. Toegepast op het forum zouden de afzender, datum en tijd, … als attribuut en het bericht zelf als element opgeslagen worden.
5.6
Beveiliging
5.6.1 Inhoud Omdat de inhoud van de XML files van ES-International NV geen data bevat die niet publiekelijk getoond mag worden, is het niet nodig de XML files te beveiligen: de inhoud worden immers toch online getoond, maar dan in HTML layout.
5.6.2 Invoer Het is wel belangrijk de invoer van XML files te controleren. Dit kan vanuit verschillende standpunten bekeken worden: Praktisch: • de inhoud van het toe te voegen veld/attribuut moet voldoen aan de tekst encodering van het XML document: er mogen bv. geen Japanse letters voorkomen; • zoals in 5.2 Wat beschreven is, moeten XML elementen aan bepaalde voorwaarden voldoen; • waarden van XML attributen mogen geen dubbele aanhalingstekens bevatten; • sommige elementen moeten verplicht aanwezig zijn. De controle op het praktisch gebied gebeurd met een DTD. Met behulp van een DTD gaat men de eisen stellen aan de inhoud van een XML file. Bij ingave of wijziging gaat Karel Nijs
Website ES-International NV
38
5 Data opslag: XML
het XML document dan deze vereisten controleren en al dan niet zijn goedkeuring hiervoor geven. De DTD van de News sectie van ES-International NV:
]>
Een geldige versie van het XML document zou kunnen zijn: <paragraaf id="p1"> <paragraaf id="p2"> <paragraaf id="p3"> <page>
Zoals er in bovenstaand voorbeeld te zien is, is de inhoud van de tags (bv. van de titeltag: "Dit is de titel") geëncapsuleerd in CDATA tags. Deze dienen voor op de praktische fouten op te vangen. Nu kan er bijvoorbeeld als titel ingegeven worden: " Update beschikbaar!". Wanneer we deze titel gewoon zouden toevoegen zouden we deze situatie krijgen in ons XML-bestand:
Karel Nijs
Website ES-International NV
39
5 Data opslag: XML Update beschikbaar! ...
Zoals besproken in 5.2 Wat, is men verplicht elke tag in het XML document af te sluiten en gaat de XML parser een error geven op "
Logisch: • de in te voeren waardes (bv. een titel van een nieuwsbericht) mogen in sommige gevallen niet leeg zijn; • de in te voeren attributen (bv. de ID van een nieuwsbericht) mogen in sommige gevallen niet leeg zijn; • in sommige gevallen is het verplicht een cijfer in te geven (bv. bij de hoogte en breedte specificaties van een figuur); • … De controle van de logische inhoud van de XML file gebeurd aan de client side en wordt uitgevoerd met Javascript. Zoals we verder gaan zien, wordt er via een HTML-Javascript-ASP interface een formulier beschikbaar gesteld voor het personeel van ES-International NV waarop zij velden kunnen invullen waarvan de waardes in de XML file (bij de juiste tag) worden weggeschreven. De controle van de waardes van de tekstvakken wordt verder uitgelegd in 6 Data verwerking: Javascript.
5.7
In de praktijk
Hoe ziet dit er nu allemaal uit bij de website van ES-International NV? Voor twee delen van de website heb ik gekozen gebruik te maken van een XML file: de News sectie en de Product Examples sectie. De bedoeling van deze secties op de website is dat ES-International NV telkens het laatste nieuws in verband met hun bedrijf/ontwikkelingen online kan zetten en dat het makkelijk te updaten is. Met de mogelijkheden besproken in de vorige hoofdstukken in het achterhoofd heb ik gekozen voor deze data op te slaan in een XML file.
5.7.1 News De News sectie wordt op geslagen in de XML file "nieuws.xml". Opbouw Boomstructuur: Karel Nijs
Website ES-International NV
40
5 Data opslag: XML
•
news o item § § § § §
titel paragraaf link • name • page figuur1 figuur2
Aan het root element "news" hangen de verschillende, door ES-International NV geposte, nieuws items. Elk item heeft een ID attribuut. Deze ID is uniek in heel de child nodes van de root. Dit moet echter wel met met code gecontroleerd worden telkens we een nieuw item toevoegen want er is geen manier om een element uniek te maken in XML. Met dit ID attribuut kunnen we later de gewenste node uit de XML file halen en kan dit niet foutlopen omdat er dan ook maar één attribuut is met die bepaalde ID. Omdat er in de News sectie verschillende berichten gepost zijn of zullen worden, zijn er meerdere "item" children (en nu met een uniek ID) in het root element van de XML file. Elk "item" element heeft op zijn beurt nog een aantal childnodes: titel, paragraaf, link, figuur1 en figuur2. De inhoud van het "titel" element dient als titel van het nieuwsbericht. Omdat er maar één titel per nieuwsbericht kan zijn, is er ook maar één titel element (met als inhoud de titel) in het nieuws item toegelaten. Ook om deze reden is er geen ID nodig bij de titel tag. Per nieuwsbericht kan men drie paragrafen invullen. Eén paragraaf moet verplicht ingevuld worden, anders is de body13 van ons nieuwsbericht leeg. Omdat er meerdere paragrafen zijn, heeft elk "paragraaf" element een ID waarmee het later aangesproken kan worden. Opmerking: wanneer ik zeg dat dat een element niet verplicht is, dan bedoel ik dat de inhoud leeg mag zijn, niet dat het element weggelaten mag worden, dan zouden we immers in problemen komen in de opbouw van onze XSL en ASP pagina's in de rest van de website. Per nieuwsbericht kan men ook één hyperlink toevoegen. Omdat er maar één link is, gaat deze geen ID attribuut hebben. De doelpagina en de omschrijving van de hyperlink worden bijgehouden in twee elementen: name en page. Het "name" element dient voor de gebruiker meer informatie te geven omtrent de hyperlink, het "page" element dient voor de betreffende pagina in op te slaan.
13
inhoud van ons nieuwsbericht Karel Nijs
Website ES-International NV
41
5 Data opslag: XML
Bijvoorbeeld: wanneer "Hotmail, de gratis e-mail van Microsoft" als link zouden laten doorverwijzen naar "http://www.hotmail.com", dan is "Hotmail, de gratis e-mail van Microsoft" het "name" element en "http://www.hotmail.com" het "page" element. In elk bericht kunnen maximum twee figuren geplaatst worden. Het pad van deze figuren wordt bijgehouden in volgende tags: figuur1 en figuur2. Beide figuren hebben volgende attributen: breedte en hoogte. Deze attributen bepalen de grootte en de breedte van de figuur. Deze hoogte en breedte attributen zijn ingevoerd om de layout van de News sectie te handhaven. Zonder deze attributen zouden er bijvoorbeeld heel grote figuren (niet iedereen weet dat de grootte van een figuur makkelijk aanpasbaar en opvraagbaar is in elk operating system) geplaatst kunnen worden in de News sectie en deze zouden zo de pagina layout vernielen. Nu is het natuurlijk ook nog mogelijk om veel te grote waarden invullen voor figuur, maar dan moet de ES-International NV administrator dat ook bewust doen. Nu hebben we de situatie van twee aparte elementen waar de figuren in zitten, een andere optie was één figuur element met daarin twee elementen met de paden van de figuren. Uiteindelijk hebben we dan een element meer in onze XML file (dit resulteerd in grotere bestandsgrootte), maar is wel onze XML file overzichtelijker. Alternatieve boomstructuur: • news o item § titel § paragraaf § link § figuren • figuur1 • figuur2 Omdat ik het niet meteen noodzakelijk zag een apart element aan te maken met daarin de twee figuur elementen, heb ik gekozen voor ze gewoon apart in de XML file te zetten: we gaan immers toch nooit de XML file zelf gewoon bekijken, we willen de inhoud van de XML file in een opmaak gegoten zien. Dit wordt later beschreven in 9 Data weergave: XSL. De copyright vermelding Bovenaan elk document staat een copyright vermelding dat de beschikbare data eigendom is van ES-International NV. Dit is gedaan omdat de XML file altijd downloadbaar is via het net.
Karel Nijs
Website ES-International NV
42
5 Data opslag: XML
www.es-int.com
De DTD Omdat de DTD van de News sectie van de site al is weergegeven in 5.6.2 Invoer, ga ik hem hier enkel beschrijven.
Bovenaan de DTD staat er het root element, "news". "(item *)" duidt aan dat er meerdere item elementen mogen voorkomen in de XML file. Vervolgens is het "item" element gedeclareerd. Elk item moet één "titel, "link", "figuur1" en "figuur2" element hebben. Omdat het via een DTD niet mogelijk is enkel één element toe te laten, heb ik hier gekozen voor "?". "?" laat één voorkomen van het element tot of helemaal geen. Een andere, eerst gekozen optie, was "+". Dit zou inhouden dat een element één of meerdere keren mag voorkomen (in dit geval zouden er meerdere titel elementen toegelaten zijn per item). Met beide tekens, "+" of "?", kunnen we niet bereiken wat we willen: één titel element per news item. Of er nu meerdere titel elementen of helemaal geen zijn, het is in beide gevallen foutief. Bij beide tekens mag er wel telkens ook één element aanwezig zijn, dus maakt het niet uit welk teken we kiezen. "ATTLIST" specifieerd de attributen van bijbehorend element. In elk "ATTLIST" element van de DTD staan het element waarop we het moeten toepassen, het attribuut, het type en of het vereist is. Bijvoorbeeld: item: het element waar het attribuut bij hoort id: de naam van het attribuut ID: het type attribuut #REQUIRED: dit attribuut is vereist Een element is niet verplicht attributen en kinderen te hebben: het "titel" element bevat bijvoorbeeld gewoon de titeltekst en heeft geen kinderen of attributen. Hierom gaat er in het titel element van de DTD "(#PCDATA)" staan.
Karel Nijs
Website ES-International NV
43
5 Data opslag: XML
Willen we later toch kinderen toevoegen aan het titel element, dan plaatsen we deze kinderen gewoon waar er nu "#PCDATA" staat.
Het document Om dit alles eens voor te stellen, staat hieronder het betreffende XML document, zónder DTD en copyright vermelding omdat deze al vermeld zijn in De DTD en De copyright vermelding". <paragraaf id="p1"> <paragraaf id="p2"><paragraaf> <paragraaf id="p3"> <page>
5.7.2 Product examples De Product examples sectie wordt op geslagen in de XML file "prod_examples.xml". Omdat in 5.7.1 News de nieuws XML file uitvoerig beschreven is en de product voorbeelden XML file er sterk op lijkt, wordt deze vlugger besproken. Opbouw Boomstructuur: • examples o applicatie § titel § subtitel § uitleg1 § uitleg2 § figuur1 § figuur2 Als root element heb ik hier "examples" gekozen. Aan dit root element hangen de verschillende door ES-International NV toegevoegd voorbeelden in "applicatie" elementen.
Karel Nijs
Website ES-International NV
44
5 Data opslag: XML
Elk "applicatie" element heeft volgende kinderen: titel, subtitel, uitleg1, uitleg2, figuur1 en figuur2. De titel wordt bovenaan elk product voorbeeld geplaatst en zodoende is er maar één "titel" element aanwezig per "example" element. Het "subtitel" element bevat de subtitel van het voorbeeld, de subtitel is echter niet verplicht. De elementen "uitleg1" en "uitleg2" bevatten de uitleg behorende bij de figuren ("figuur1" en "figuur2"), is er maar één figuur, dan heeft enkel "uitleg1" een waarde, zijn er twee figuren, dan hebben beide uitleg elementen een waarde. Voor later de uitleg elementen aan te kunnen spreken, heb ik ze allebei een ID gegeven. Net zoals bij de News sectie, hebben de figuren een "breedte" en "hoogte" attribuut. Een ander optie voor de opbouw voor het XML zou kunnen zijn: • examples o applicatie § titel § subtitel § uitleg • uitleg1 o tekst o figuur • uitleg2 o tekst o figuur
De DTD Omdat de Product examples XML file sterk lijkt op de News XML file, komt de DTD ook in grote delen overeen, daarom bespreek ik ze gewoon. Bovenaan staat het root element "examples" (applicatie *): dit duidt aan dat er meerdere "applicatie" elementen mogen voorkomen in het XML document. Per "applicatie" en uitleg element is er een ID gespecifieerd. Elk figuur element heeft een "breedte" en "hoogte" attribuut. Het document Dit alles voorgesteld (zonder DTD en copyrightvermelding): <examples> Karel Nijs
Website ES-International NV
45
5 Data opslag: XML <subtitel>
Karel Nijs
Website ES-International NV
46
6 Data verwerking: Javascript
6 Data verwerking: Javascript 6.1
Inleiding Javascript behoort zowel tot de Business Logic Tier als de Presentation Tier.
Tijdens het maken van de website heb ik Javascript gebruikt om aan de client zijde formulier te controleren op correcte waardes, formulieren in te vullen, het genereren van ID's, het verzenden van de formulieren, … De eerste versie van de encodering van de paswoorden was oorspronkelijk zelfs in Javascript.
6.2
Javascript
Javascript is een veel gebruikte client side scripting taal. Javascript is ontwikkeld voor HTML pagina's dynamischer te maken en wordt tegenwoordig door alle browsers standaard ondersteund. Wat kunnen we nu precies met Javascript? • HTML elementen lezen en schrijven; • dynamisch HTML elementen naar het scherm schrijven; • reageren op gebeurtenissen (events); • programmeren in HTML pagina's; • formulier validatie. Javascript wordt geplaatst tussen volgende tags: <script type="text " language="javascript"> //code
Javascript kan in principe overal in het document gezet worden, maar omdat ik Javascript enkel gebruik voor formulier validatie of opvulling, ga ik Javascript altijd tussen de tags van de HTML pagina zetten.
Karel Nijs
Website ES-International NV
47
6 Data verwerking: Javascript
Het dynamisch schrijven van HTML door middel van Javascript ga ik niet gebruiken (tenzij dan in functies gedeclareerd bovenaan de pagina) omdat dan de pagina's nog onoverzichterlijker worden. Dit dynamisch uitschrijven van HTML ga ik trouwens altijd met ASP uitvoeren.
6.2.1 3 tier Het is mogelijk met Javascript mogelijk 3 tier te werken: door de scripts in aparte bestanden te plaatsen, scheiden we de Business Logic Tier van de Presentation Tier. Dit heeft echter wel een groot gevolg voor de performatie tijdens het programmeren: omdat het meeste programmeerwerk in TextPad uitgevoerd is, is het moeilijk werken wanneer er twee files geopend moeten zijn in plaats van één. Het programmeren van een formuliervalidatie houdt bijvoorbeeld in dat er veel naar het formulier gekeken gaat moeten worden om de juiste velden aan te spreken. Het zetten van de Javascript code in aparte files heeft wel als voordeel dat de HTML file een stuk overzichtelijker wordt en dat we bepaalde functies kunnen hergebruiken. Om deze reden heb ik tijdens het ontwikkelen van de website gewoon geprogrammeerd met de Javascript code vanboven in de HTML pagina, tussen de tags. Later heb ik dan deze Javascript code in aparte files gestoken en ze in de HTML pagina geïmporteerd. <script src="script.js">
6.3
Toepassingen
6.3.1 Preloader Een eerste Javascript toepassing die we tegenkomen is de preloader. De preloader van een website heeft als functie de tekeningen en figuren in te laden vóór ze getoond worden. Voor het weergeven van de frameset van de website ("index.html") worden de tekeningen die op de eerste pagina zichtbaar zijn met een preloader ingeladen.
Karel Nijs
Website ES-International NV
48
6 Data verwerking: Javascript var achtergrond_home = new Image(); preload(); function preload(){ achtergrond_home = "../PICS/achtergrond_home.jpg"; //andere figuren loadCheck(); } function loadCheck(){ if(achtergrond_home.complete == false){ var timeout = setTimeout("loadCheck()", 300); }else{ clearTimeout(timeout); } }
Op de rest van de site wordt er aan "smart preloading" gedaan: we gaan de afbeeldingen die op de volgende pagina waarschijnlijk getoond zullen worden al gaan inladen. Bij de Product Examples sectie bijvoorbeeld worden alle figuren van de voorbeelden ingeladen terwijl men het eerste voorbeeld opvraagt. Zo zijn de figuren ingeladen zonder dat de gebruiker het weet en kan hij ze onmiddellijk bekijken wanneer hij voor het bepaalde voorbeeld kiest.
6.3.2 Menu's Het menu dat getoond wordt als we bijvoorbeeld klikken op "Company" werkt ook met Javascript: wanneer er een optie in het menu gekozen wordt, dan wordt er geredirect naar de gewenste pagina. Ook de reactie van het menu op de muis is gemaakt met Javascript. Bij het laden van de HTML pagina's worden de menu's standaard op onzichtbaar gezet. De verdere werking van de menu's wordt besproken in 8.3 Menu's.
6.3.3 Formulier validatie Formulier validatie is zeer belangrijk bij deze website. Omdat formulier validatie niet geschikt is om volledig met server side scripting te doen, gaan we ze met client side Javascript doen. Wanneer we bijvoorbeeld met server side ASP zouden controleren of alle velden van een formulier ingevuld zijn en merken dat dit niet het geval is, dan gaan we een redirect terug naar het formulier doen. Wanneer we echter via ASP een redirect naar hetzelfde formulier doen, gaan de waardes van het formulier niet meer ingevuld zijn en gaan we alle velden opnieuw moeten invullen voor één foutief ingevuld veld. Company > Contact:
Karel Nijs
Website ES-International NV
49
6 Data verwerking: Javascript
Bij dit formulier zijn er een aantal velden verplicht in te vullen: wanneer één van deze velden niet ingevuld wordt, gaat er een berichtvenster getoond worden waar we de gebruiker dit melden. Modify > News > Nieuwsberichten toevoegen: Bij het invullen van deze pagina is het belangrijk dat de vereiste velden ingevuld worden, anders zal ofwel de data verkeerd getoond worden in de uiteindelijke output, ofwel zal de XML file een error genereren en zal de data nooit bekeken kunnen worden. Bij het invullen van een figuur is het belangrijk dat er een juist breedte en hoogte ingevoerd worden: de waarde mag niet 0 of een letter zijn. function isDigit (c){ return ((c >= "0") && (c <= "9")) } function isInteger (s){ var i; for (i = 0; i < s.length; i++){ var c = s.charAt(i); if (!isDigit(c)) return false; } }
return true;
Dezelfde logica geld voor de sectie Modify > Examples > Voorbeelden toevoegen: hier zijn ook een aantal velden verplicht in te vullen en gelden dezelfde regels voor de breedte en hoogte van de figuren. Database > Users > Gebruiker toevoegen: Bij deze sectie zijn er ook weer een aantal verplichte velden, maar hier moeten ook de twee opgegeven paswoorden overeen komen en langer zijn dan vijf karakters. if(txtPaswoord.value != txtPaswoord2.value) //foutmelding geven if(txtPaswoord.value.length < 5) //foutmelding geven
De gebruikers mogen ook enkel tot niveau 1 of 2 behoren. Pop-up openen: Voor het openen van de weergave vensters (bv. Database > Users > Gebruikers weergeven) wordt er ook gebruik gemaakt van Javascript omdat we nu een venster kunnen openen met eigen instellingen.
Karel Nijs
Website ES-International NV
50
6 Data verwerking: Javascript
function openen(){ var breedte = screen.availWidth; var hoogte = screen.availHeight; var x = (breedte - 790) / 2; var y = (hoogte - 550) / 2; var strOpties = "channelmode=no, directories=no, height=400, width=790, menubar=no, resizeable=no, scrollbars=yes, status=no, titlebar=no, toolbar=no, top=0, left=0";
}
var venster = window.open("pagina.html","opmerkingen",strOpties); venster.moveTo(x,y);
Andere: Er zijn waarschijnlijk nog andere Javascript functies die ik gebruikt heb voor dingen in te vullen of te valideren maar ze zijn het vermelden niet allemaal waard.
Karel Nijs
Website ES-International NV
51
7 Data verwerking: ASP
7 Data verwerking: ASP 7.1
Inleiding
ASP of Active Server Pages is een op het Internet veel gebruikte server scripting technologie voor het dynamisch aanmaken van websites. Vroeger was men altijd verplicht de data die men wilde tonen letterlijk te typen in een HTML file. Dit kan nu, mits men beschikt over de gepaste webruimte, vermeden worden. Er zijn verschillende mogelijkheden voor deze data op te slaan en van enkele van deze maak ik gebruik in dit eindwerk, namelijk databases en XML. Het is echter ook mogelijk de data te halen uit bestaande HTML files, tekst documenten, … In dit hoofdstuk gaat er uitgelegd worden hoe deze data benadering bij de site van ESInternational NV verwezelijkt is: er gaat uitleg gegeven worden bij het aanspreken van de data, de keuze en structuur van de pagina's, de achterliggende code, … Dit hoofdstuk is de praktische toepassing van de vaststellingen gemaakt tijdens de research en het voorontwerp van deze website, besproken in 3 Research. Het hoofdstuk bouwt verder op de gemaakte database in 4 Data opslag: de database en op de XML files van 5 Data opslag: XML.
7.2
ASP Wat houdt dat nu precies in, zo'n server scripting taal?
ASP pagina's kunnen met een gewone browser niet bekeken worden: de browser gaat deze input niet kunnen verwerken omdat deze enkel HTML (en varianten) herkent. Wanneer de browser een ASP pagina wil bezichtigen, gaat deze een request1 sturen naar de server waar de ASP pagina gehost is.
1
verzoek Karel Nijs
Website ES-International NV
52
7 Data verwerking: ASP
Deze server moet natuurlijk wel ASP scripting ondersteunen. Niet alle servers ondersteunen namelijk standaard ASP: wanneer we een ASP pagina op webspace zonder ondersteuning zouden uitvoeren, wordt de ASP code gewoon genegeerd en wordt de pagina niet ingevuld/beveiligd. Als de request voor een bepaalde pagina aankomt op de server wordt deze verwerkt door de (op de server) geïnstalleerde Internet Information Services (IIS)2. Deze dienst gaat dan de scripting code van de ASP pagina uitvoeren en het HTML resultaat doorsturen naar de client browser.
Figuur 15 - Request en response van een pagina
Op deze manier is het mogelijk de gebruiker gescripte webpagina's te geven zonder dat hij een browser nodig heeft die scripting ondersteunt: alle scripting gebeurt namelijk op de server. Wanneer een gebruiker een ASP pagina opvraagt, wordt er voor hem een session op de server aangemaakt. Deze session heeft op de server een uniek ID en in deze sessie kunnen er variabelen met bepaalde waardes gestoken worden. Later in de sessie kunnen we dan de sessie variabelen aanspreken en er waardes uit opvragen, wijzigen of wissen. Het is niet mogelijk om via een pagina die niet in dezelfde root staat de waarde van een bepaalde sessie variabele aan te passen of in te vullen. Dit maakt sessie variabelen zeer nuttig omdat we er nu de gegevens van de gebruiker kunnen instoppen. Voor de server niet te veel te belasten, gaat er zo weinig mogelijk gebruik gemaakt worden van sessie variabelen. Een sessie wordt beëindigd wanneer ofwel de sessie verloopt (standaard na 20min) ofwel de browser gesloten wordt. Dan wordt de sessie uit het geheugen van de server verwijderd en zijn de variabelen van die bepaalde sessie niet meer beschikbaar. Bij het ontwikkelen van de ASP pagina's heb ik de Server.TimeOut op standaard laten staan: dit lijkt me namelijk een goede tijdsduur. Voordelen van ASP: • dynamisch wijzigen van HTML pagina's; • database en andere data toegang; 2
andere: PWS, ChiliASP van Chilli!Soft, InstantASP, … Karel Nijs Website ES-International NV
53
7 Data verwerking: ASP
• • • • • • • • •
mogelijkheid tot bewerken van folders, bestanden, … op de server (mits permissies); mogelijkheid beveiliging te implementeren; bepaalde data laten weergeven op aanvraag door gebruiker; ASP files zijn te bekijken in elke browser; goed programmeren kan netwerk trafiek reduceren (bv. één file maken met de database connectie in en deze meerdere keren gebruiken); mogelijkheid tot twee tier werken (HTML is één tier); twee scripting talen beschikbaar (JScript en VBscript); er moet geen backend connectie gehouden worden omdat er niet object geörienteerd gewerkt wordt zoals met JSP; …
Nadelen van ASP: • er is (dure) speciale webruimte nodig; • niet mogelijk strikt 3 tier te werken; • niet object geörienteerd; • snelheid is afhankelijk van veiligheid (hoe veiliger, hoe trager: er moet een compromis gesloten worden); • er zijn verschillende versies: we zijn afhankelijk van de versie geïnstalleerd op de server; • we zijn beperkt tot de methodes en subroutines op de pagina zelf (we kunnen bijvoorbeeld geen externe klasses of subroutines aanspreken); • ASP code is moeilijk te lezen omdat deze vaak tussen de HTML code staat; • ASP debuggen is haast onmogelijk (dit probleem wordt opgelost in ASP.NET); • ASP kan enkel goed werken op een Windows platform (er zijn Unix ontwikkelingen op de markt).
7.2.1 IIS Omdat we niet met een eigen server werken, maar met gehoste webspace bij KPN, moeten we geen rekening houden met de geïnstalleerde ASP engine op de server. Wel moeten we de versie van de IIS weten, aan de hand van deze versie kunnen we namelijk de ASP versie afleiden. IIS 3.0 4.0 5.0
ASP 1.0 2.0 3.0
Figuur 16 - Versies IIS en ASP
Om de site lokaal te runnen en te testen, gaan we een eigen IIS server opzetten die we gaan benaderen via de localhost3.
7.2.2 Versie Zoals boven beschreven is de ASP versie afhankelijk van de IIS geïnstalleerd op de server Als we bijvoorbeeld nieuwe commando's gaan gebruiken in een oudere ASP versie, dan gaat deze die niet herkennen en een error genereren. 3
http://localhost/virtuele directory Karel Nijs Website ES-International NV
54
7 Data verwerking: ASP
KPN werkt met ASP 2.0 en er is geen upgrade naar ASP 3.0 gepland. In de toekomst zal waarschijnlijke een upgrade naar ASP.NET gemaakt worden, maar dit zou een heel nieuw ontwerp van de bestaande website betekenen.
7.2.3 3 tier Zoals eerder besproken in 3.4 Het 3 tier model, willen we onze applicatie zoveel mogelijk 3 tier houden. Dit gaan we proberen door de data, de verwerking van de data en de output van het resultaat gescheiden te houden. Ondanks dit niet perfect mogelijk is met ASP, gaan we het 3 tier model toch proberen te handhaven. Data Tier De Ms Access database zit in de onderste tier en is veilig gescheiden van de andere twee tieren. Business Logic Tier Hier gaat de ASP code zich grotendeels situeren: tijdens het maken van de website heb ik rekening gehouden met het 3 tier model en heb ik de pagina's waar de eigenlijke verwerking van de data gaat gebeuren zoveel mogelijk gescheiden gehouden van de HTML en XSL pagina's waar de output van de werking naar de gebruiker toe mee gebeurd. Presentation Tier De ASP code gaat helaas tot hier doorsijpelen. Zouden we deze laag ASP vrij kunnen houden, dan zou ons object model volledig 3 tier zijn. Het is echter niet mogelijk die met klassieke ASP te doen, met haar opvolger, ASP.NET, is dit echter wél mogelijk. Wanneer we bijvoorbeeld een pagina willen beveiligen met een paswoord, dan zal deze beveiling bovenaan de webpagina moeten staan. Een ASP pagina wordt namelijk van boven tot onder uitgevoerd (top to bottom) en dus gaat de ASP engine eerst de beveiling moeten passeren voor ze bij de output van de HTML pagina (bv. een lijst met gegevens van elke gebruiker) gaat komen: zodoende gaat de engine (on)geoorloofde toegang detecteren en de juiste actie ondernemen. Dit is nu slechts een kort voorbeeld van de werking van de beveiliging, deze wordt verder besproken in 7.5.1 Security.
7.2.4 Code intend Omdat ASP niet 3 tier werkt, gaat er heel wat ASP code tussen HTML code staan. Omdat dit moeilijk is te debuggen (of later opnieuw aan de site te werken), heb ik geprobeerd de code zoveel mogelijk te schikken, in te springen en met commentaarregels errond te schikken.
7.2.5 Debuggen Alle ASP code is geschreven in TextPad4 en dus is debuggen een hele opgave. 4
http://www.textpad.com Karel Nijs
Website ES-International NV
55
7 Data verwerking: ASP
Het debuggen is meestal verlopen door de variabelen of dummie regels tekst op een bepaald positie in de file uit te schrijven naar het scherm. Ook het opzoeken van de foutcode op het Internet is een veel gebruikte methode.
7.2.6 Scripting taal In ASP is het mogelijk code te schrijven in twee verschillende programmeertalen: JScript en VBscript. Aanvankelijk was ik begonnen de website te maken in JScript omdat ons dit zo aangeleerd is in de les, we hebben daar nooit met VBscript ge-experimenteerd. Na een tijd echter was ik verplicht over te schakelen op VBscript omdat ik met JScript te veel problemen had sommige functies te implementeren terwijl deze standaard in VBscript zitten. Voorbeeld: wanneer we een string willen trimmen in JScript gaan we hier speciaal een functie moeten voor schrijven: <% @language="javascript" %> <% function trim(str){ return(str.replace(/^\s*([\s\S]*\S+)\s*$|^\s*$/,'$1')); } var woord = " karel nijs woord = trim(woord); %>
";
In VBscript ziet dit er gewoon als volgt uit: <% @language="VBscript" %> <% Dim woord woord = Trim(" %>
karel nijs
")
Een volledige script reference is te vinden op: http://www.asp-help.com/scripting. Dit neemt natuurlijk niet weg dat we helemaal niet met Javascript gaan werken: de controle aan de client zijde van de website moet allemaal met Javascript gebeuren, de controle aan de server zijde gaan we volledig met VBscript uitvoeren. Aan de server zijde heb ik er bewust op gelet dat er geen code mengeling voorkomt: het is namelijk mogelijk de ene ASP pagina in JScript te schrijven en de andere in VBscript. Wil je in een andere taal programmeren dan JScript of VBscript, dan moet je hiervoor speciale script engines op de server installeren. Andere mogelijkheden zijn Perl, REXX, Python, … Karel Nijs
Website ES-International NV
56
7 Data verwerking: ASP
7.3
Fundament
Voor de werking van de gehele website kunnen uitleggen, moeten we eerst een aantal basis procedures overlopen.
7.3.1 Standaard Deze regel zegt tegen de ASP engine welke scripttaal er gebruikt is: <% @language="VBscript" %>
Verder moet ASP code altijd omgeven zijn door "<%" en "%>".
7.3.2 Database connectie Telkens we data uit de database willen opvragen, moet er hier voor een connectie gelegd worden tussen de database en onze pagina. Deze connectie gebeurd aan de server zijde. Zoals besproken in 4.5 UDL maken we connectie met de database via een UDL, maar omdat we voor het gebruik en beheer van de UDL file moeten betalen bij KPN, kopieer ik de code van de UDL via TextPad en neem ik ze over in de ASP code voor verbinding te maken met de database. Deze code gaat dan in een aparte file geplaatst worden zodat we deze regels code niet telkens opnieuw moeten typen wanneer we een database connectie willen hebben op de pagina (gemiddeld één op drie ASP pagina's in mijn eindwerk maakt connectie via deze file). Bovenaan elke pagina die gebruikt maakt van deze connectie file, gaat er deze regel staan:
Voor het sluiten van de database connectie heb ik ook een aparte file aangemaakt. Op zijn beurt gaat onderaan elke pagina met database connectie volgende regel staan:
De code: <% 'VARIABELEN Dim conConncectie Set conConnectie = Server.CreateObject("ADODB.Connection") strCon = "DRIVER=Microsoft Access Driver (*.mdb);UID=********;PWD=********;UserCommitSync=Yes; SafeTransactions=0;PageTimeout=5;MaxScanRows=8;MaxBufferSize=2048;FIL=MS Access;DriverId=25;" Karel Nijs
Website ES-International NV
57
7 Data verwerking: ASP strCon = strCon & "DefaultDir=;DBQ=" & Server.Mappath("database") & ";" conConnectie.Open strCon %>
Zoals je ziet, moet er bij een include ASP pagina geen "<% @language="VBscript" %>" staan: dit moet gezet worden op de oproepende pagina. De script talen van de gelinkte pagina's moeten met elkaar overeenkomen, zou de bronpagina in JScript en de include pagina in VBscript zijn, dan krijgen we een fout op de include pagina omdat JScript andere code syntax heeft. Met de connectiestring genomen uit de UDL maken we een ADODB connectie aan. Wanneer we deze connectie openen, is ze in de oproepende pagina beschikbaar onder de naam "conConnectie". De code voor de connectie te sluiten: <% 'ALLES SLUITEN conConnectie.Close Set Connectie = Nothing %>
Door na het sluiten van de connectie de connectie uit het geheugen te verwijderen, voorkomen we dat we de server onnodig gaan vertragen. Dit verwijderen komt overeen met de Garbage Collector in Java en ASP.NET, daar gebeurt dat echter automatisch.
7.3.3 XML transform De gebruiker heeft er niets aan als we de door ons aangemaakte XML files gewoon in de browser zouden tonen: de inhoud is niet geschikt om zo te lezen en de gebruiker gaat nooit de gewenste informatie vinden. Daarom gaan we met ASP en XSL de XML file omzetten naar HTML. De werking is niet zo moeilijk om te begrijpen: de ASP pagina gaat de XML file inlezen en deze vergelijken met de XSL file, overal waar de XSL file vraagt voor input van de XML file, gaat de XML inhoud geplaatst worden. Het uiteindelijke resultaat, in HTML formaat, wordt geschreven naar de browser. Nu heeft de gebruiker de gewenste inhoud, geschikt en opgemaakt zodat hij er duidelijk aan uit kan. De code: <% Response.buffer = true 'VARIABELEN Dim bronXML Dim bronXSL Dim fileXML Karel Nijs
Website ES-International NV
58
7 Data verwerking: ASP Dim fileXSL Dim transformatie bronXML = "../../XML/" & Request.Querystring("x") & ".xml" bronXSL = "../XML/" & Request.Querystring("y") & ".xsl" Set fileXML = Server.CreateObject("Msxml.DOMDocument") fileXML.async = false fileXML.load(Server.Mappath(bronXML)) Set styleXSL = Server.CreateObject("Msxml.DOMDocument") styleXSL.async = false styleXSL.load(Server.Mappath(bronXSL)) transformatie = fileXML.transformNode(styleXSL) Response.write(transformatie) Response.flush() %>
Zoals je ziet, worden de samen te voegen XML en XSL pagina gehaald uit de querystring. Via de querystring kan men variabelen en hun waardes meegeven door ze te plaatsen achter de op te roepen pagina. Vanaf Internet Explorer 4.0 kunnen er 2000 tekens tellende querystrings doorgegeven worden, maar voor alle veiligheid is het best dit aantal onder 1000 te houden5. Voorbeeld van een querystring: transform.asp?var1=waarde&var2=waarde De server van KPN ondersteunt het gebruik van Msxml2.DOMDocument niet, maar wel de vorige versie, Msxml.DOMDocument6. We gaan hierbij in de verdere ontwikkeling van de website rekening mee moeten houden (onder andere bij de product voorbeelden, XSL, …).
7.3.4 Beveiliging Ook de beveiliging komt bijna op iedere pagina terug, daarom gaan we deze ook via een include regel op elke pagina zetten. Het is belangrijk dat deze regel altijd als eerste regel komt na de ASP scripting taal declaratie: ASP wordt namelijk van boven naar beneden uitgevoerd en wanneer er bovenaan de pagina wordt gedetecteerd dat de gebruiker niet gerechtigd is, gaat de rest van de pagina niet meer uitgevoerd worden.
5
http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/Q20 8/4/27.ASP&NoWebContent=1 6 meer informatie: http://msdn.microsoft.com/library/default.asp?url=/library/enus/xmlsdk30/htm/xmrefguidprogidinformation.asp Karel Nijs Website ES-International NV 59
7 Data verwerking: ASP
Omdat het geen zin heeft hier de code van de beveiliging te zetten voor we weten hoe de beveiliging zelf in elkaar zit, verwijs ik naar de code in 7.5.1 Security.
7.4
Publiek gedeelte
7.4.1 De opstartpagina Wanneer we in de browser naar "http://www.es-int.com" surfen, dan wordt als opstartpagina (dit is de eerste pagina die geladen wordt) "default.asp" getoond. Op deze pagina staat de ook Netstat teller die de bezoekers en hun configuratie bijhoudt. Onderaan de pagina is er in ASP een redirect geschreven: Internet Explorer gebruikers worden gestuurd naar "splash.html" waar zij het geanimeerde logo kunnen zien. <% If InStr(1, Request.ServerVariables("HTTP_USER_AGENT"), "MSIE") Then Response.redirect("splash.html") Else Response.redirect("HTML/index.html") End If %>
Netscape of andere browser gebruikers worden rechtstreeks naar het gewone publieke deel doorgestuurd. Dit is gedaan omdat Netscape en andere browser soms het klikken van afbeeldingen niet ondersteunen en deze gebruikers zo anders de site niet kunnen bezichtigen. Omdat de redirect onderaan de pagina staat, wordt de Netstat teller eerst uitgevoerd voor we redirecten.
7.4.2 De zoekmachine De zoekmachine is altijd zichtbaar op de website: deze zoekmachine is speciaal geïmplementeerd zodat de gebruikers onmiddellijk toegang zouden vinden tot bepaalde data in plaats van er naar te zoeken op de website. Voorbeeld: als de gebruiker wil weten of ES-International NV PXI applicaties maakt en hij heeft geen zin voor te zoeken op de website, dan krijgt hij, na "PXI" in te tikken een lijst (9) terug met een aantal links naar pagina's waar dit voorkomt. De zoekmachine heeft volgende instellingen: • hij is niet hoofdlettergevoelig; • hij werkt altijd met de OR functie; • mogelijkheid tot alles weergeven; • hij zoekt in een lijst vooropgestelde sleutelwoorden. Door de zoekmachine niet hoofdlettergevoelig te maken, zorgen we dat de gebruiker zich niet moet houden aan de hoofd- en/of kleine letters van de zoektermen. Dit zorgt ervoor dat de gebruiker, onafhankelijk van de hoofd- en kleine letters van de zoekterm, telkens hetzelfde aantal pagina's krijgt bij een zoekopdracht. Karel Nijs
Website ES-International NV
60
7 Data verwerking: ASP
Toegepast op ons voorbeeld: door naar "pxi" te zoeken, krijgen we weer 9 gevonden items. De zoekmachine zoekt het ingevulde woord in een lijst met voorgedefinieerde sleutelwoorden. Via het administrator gedeelte van de website is het mogelijk sleutelwoorden met hun bijhorende pagina bij te voegen aan de tabel. Een andere methode zou het doorzoeken van alle HTML files zelf kunnen zijn, maar omdat er dan veel woorden die we liever niet opgenomen zouden willen zien ook opgenomen zouden worden (bv. "de", "anders", enz.), gaan we deze optie niet implementeren. Werking: De zoekmachine werkt (standaard) altijd met de OR functie. Tijdens het programmeren van de zoekmachine heb ik beide functies uitgeprobeerd en de OR functie leek me het beste voor deze website: er is namelijk nog maar een minimum aan sleutelwoorden opgegeven en omdat men met de AND functie de zoekresultaten versmald (er moet dan namelijk aan meer voorwaarden voldaan worden), gaan er bijna geen items gevonden worden. 'ALLE RECORDS TONEN If (strZoekWoord = "" OR strZoekWoord = "" OR strZoekWoord = "*") Then strZoekWoord = "%" End If strZoekWoord = Replace(strZoekWoord,"*","%") If (InStr(strZoekWoord," ")) Then strZoekWoord = Replace(strZoekWoord," ","%' OR Keywoord LIKE '") End If
De mogelijkheid voor alle waardes uit te tabel weer te geven is beschikbaar door ofwel een "*", een "%" ofwel helemaal niets in te tikken in het invulvak. Dit wordt opgevangen in de achterliggende code. Als de gebruikers alle woorden beginnend met een bepaalde letter willen opvragen, kunnen ze ofwel de letter volgend door "%" ofwel de letter volgend door "*" opgeven. Omdat we met een Ms Access database werken, moet er, wanneer er een "*" opgegeven wordt, deze vervangen worden door een "%".
Alle gevonden waardes worden in een recordset gestopt en deze recordset wordt dan met een lus overlopen en alle gevonden items worden weggeschreven naar de HTML pagina. De output: Het resultaat van de zoekopdracht zal uitgeschreven worden in een tabel. De gevonden sleutelwoorden worden alfabetisch getoond met de sectie en titel van de bijhorende pagina erlangs. Deze laatste is een hyperlink naar de betreffende pagina. Karel Nijs
Website ES-International NV
61
7 Data verwerking: ASP
Bovenaan de gevonden resultaten is er een titel die feedback geeft aan de gebruiker: "9 search results voor 'pxi'". Worden er geen resultaten gevonden in de database, gaat de gebruiker dit gemeld krijgen door een "No match found in database" subtitel.
7.4.3 Company > Contact Via de Company > Contact pagina kunnen gebruikers van de website contact opnemen met ES-International NV via e-mail. Op de website krijgen ze de mogelijkheid een formulier in te vullen met hun gegevens, hun interessegebied (bv. Automation) en eventueel een opmerking. Deze e-mail wordt dan via ASP verstuurd naar een door ES-International NV opgegeven e-mail adres. Werking: Na het invullen van het formulier (er zijn weer een aantal velden, bv. e-mail, verplicht) wordt het formulier gepost7 naar de "sendmail.asp" pagina. Voor dit deel van de website is het 3 tier model gehandhaaft: er is geen server code in de formulier pagina en de verwerking gebeurd op een aparte pagina. KPN stelt ons het CDONTS mail object8 ter beschikking, met dit mail object kunnen we zonder probleem via ASP e-mails sturen naar wie we willen en uit welke naam we willen. Alle waardes ingevuld in het formulier worden in een eenvoudige layout gegoten en de email wordt als gewone tekst verstuurd naar de opgegeven e-mail adressen. Het sturen van de e-mail: <% Set objCDOMail = Server.CreateObject("CDONTS.NewMail") objCDOMail.To = bestemmeling objCDOMail.From = strVan & " <" & strVanEmail & ">" objCDOMail.Subject = strOnderwerp objCDOMail.Body = strBody objCDOMail.Send Set objCDOMail = Nothing %>
Na het aanmaken van een e-mail object worden de velden van de e-mail allemaal ingevuld. Deze procedure is te vergelijken met het invullen van een echte e-mail in een email client. Na het versturen van de e-mail wordt het e-mail object uit het geheugen verwijderd en de actie in de database gelogd. De output:
7
verzenden via POST er is ook een JMail object, maar dan moet de server hiervoor wel geconfigureerd worden Karel Nijs Website ES-International NV 8
62
7 Data verwerking: ASP
Na het versturen van de e-mail wordt de gebruiker doorverwezen naar een pagina waarop hij feedback krijgt voor het sturen.
De verstuurde e-mail:
Figuur 17 - De ontvangen e-mail
Figuur 18 - De inhoud van de ontvangen e-mail
7.4.4 News De News sectie van de website is dynamisch updatebaar: ES-International NV kan telkens er iets speciaals gebeurd is (of telkens als er iets nieuws te vermelden valt) een bericht posten op de News sectie van de website: dit is namelijk het deel dat regelmatige bezoekers het eerst bekijken voor te controleren op updates.
Karel Nijs
Website ES-International NV
63
7 Data verwerking: ASP
Omdat de nieuws geberichten uit een XML file gehaald worden, worden deze, zoals beschreven in 6.3.3 XML transform, door middel van ASP in een XSL layout gestoken. Omdat we hier de scheiding van de 3 tieren wel hebben kunnen handhaven, wordt het weergeven van de inhoud van de XML file via XSL verder besproken in 9 Data weergave: XSL.
7.4.5 Product > Examples Bij de Product > Examples sectie van de website heb ik het 3 tier model niet kunnen handhaven: hier is de Business Logic Tier verwikkeld met de Presentation Tier. Dit gedeelte van de website bestaat uit twee frames: in het eerste frame wordt met behulp van de transform pagina de XML in de XSL layout weergegeven. In het tweede frame wordt het gekozen product weergegeven. Werkwijze: Met behulp van de transform pagina gaan we de toegevoegde product voorbeelden uit de XML file lezen en via XSL in een combobox plaatsen. Achter deze combobox zit het unieke ID van het product voorbeeld.
Figuur 19 - De combobox met product voorbeelden
Wanneer men een keuze maakt in de combobox, wordt deze doorgegeven aan het tweede frame via een querystring. In het tweede frame, bevindt zich de pagina "prod_examples.asp". Deze pagina gaat de ID van het gewenste voorbeeld uit de querystring halen en gaat de XML file overlopen totdat hij dit ID terugvindt. Eens het gewenste voorbeeld in de XML file gevonden is, worden de waardes van deze node in variabelen gestopt die later in de XML file worden uitgeschreven.
Karel Nijs
Website ES-International NV
64
7 Data verwerking: ASP <% '//XML DOCUMENT INLADEN Set fileXML = Server.CreateObject("MSXML.DOMDocument") fileXML.async = false status = fileXML.Load(Server.Mappath("../XML/prod_examples.xml")) If (not status) Then Response.redirect("../HTML/errorInXMLfile.html") Response.end() End If %>
Bij dit uitschrijven moet er wel errors opgevangen worden: het kan namelijk dat de XML file foutief of verwijderd is, dan gaat er een doorverwijzing gebeuren naar een vooraf gemaakte foutmeldings pagina "errorInXMLfile.html". Het invullen van de variabelen met de waardes uit de XML file: <% app = Request.QueryString("app") For i = 1 To (fileXML.documentElement.childNodes.length ) If (i = CInt(app)) Then 'VARIABELEN INVULLEN End If Next %>
Tijdens het uitschrijven van de variabelen wordt er speciaal gekeken naar de figuren: bij elke figuur van het voorbeeld wordt de zin "Click picture for detailed view" gezet en kan men op de figuur klikken voor een gedetailleerd overzicht. De geklikte figuur wordt dan in een aparte pop-up pagina geopend. Is er bijvoorbeeld geen tweede figuur (dit wordt via een IF9 structuur opgevangen), dan gaat er geen uitleg en hyperlink op de pagina geplaatst worden. Opmerkingen: speciaal voor de gebruikers die niet Internet Explorer gebruiken, is er hier onder elke foto de "Click picture for …" link gezet. Internet Explorer gebruikers hebben beide keuzes (link en figuur). Het uitschrijven van de variabelen:
<% Response.Write(titel) %>
De pagina met de gedetailleerde foto werkt ook volgens het querystring principe: als we op de betreffende foto (of link) klikken, dan wordt er via Javascript een functie opgeroe9
als … dan… voorwaarde Karel Nijs
Website ES-International NV
65
7 Data verwerking: ASP
pen die de betreffende foto opent in een met Javascript aangepast venster. Wanneer we deze foto gewoon met een hyperlink10 zouden openen, dan wordt de foto geopend in een venster een witte achtergrond en met een venstergrootte die Internet Explorer in haar geheugen staan heeft11. De output: Het resultaat van deze pagina's is een opgemaakte pagina met tekst en één figuur of twee klikbare figuren.
7.4.6 Downloads De laatste publiek toegankelijke ASP pagina is de Downloads pagina. Op deze pagina kunnen alle gebruikers de door ES-International NV beschikbaar gestelde download bekijken en eventueel downloaden. Werking: We kunnen de inhoud van de downloads map opvragen door middel van het FSO object. Met dit object gaan we een de downloads map opvragen en die in een folder object plaatsen, vervolgens kunnen we alle files die de folder bevat via een lus in de folder files collectie overlopen en het resultaat schrijven naar de HTML pagina. <% 'OBJECT INITIALISEREN Set objFSO = Server.CreateObject("Scripting.FileSystemObject") folderBestaat = objFSO.FolderExists(Server.Mappath(pad)) If (folderBestaat) Then Set objFolder = objFSO.GetFolder(Server.Mappath(pad)) Else Response.write("
Error: Folder not found
") Response.end() End If %>
Voor we de inhoud gaan opvragen, moeten we zeker weten of de folder bestaat op de server, dit gaan we doen met de FolderExists functie. Als deze folder daadwerkelijk bestaat, gaan we deze in een object steken, anders wordt er een foutmelding geschreven naar de HTML pagina. Als we het folder object geïnitialiseerd hebben (de folder bestaat dus op de server), dan wordt deze overlopen met een For Each12 lus en worden de files in de folder in een HTML layout gestopt.
10
de foto Internet Explorer is standaard ingesteld dat de laatste venster groottes onthouden worden 12 VOOR … ELK … IN … lus Karel Nijs Website ES-International NV 11
66
7 Data verwerking: ASP <% For Each filFile In objFolder.Files grootte = Round((filFile.Size / 1024),0) extentie = Right(filFile.Path,3) pad = folder & "/" & filFile.Name 'rest van de code Next %>
De subfolders van de downloads folder op de server worden niét overlopen: dit is omdat we anders in problemen komen met de beveiling van onze site. De output: Het opvragen van de inhoud van de downloads folder geeft een tabel weer met daarin de naam en extentie van de file, de grootte van de file in KB13 en een passend icoontje. Er zijn vier beschikbare icoontjes op de server: één voor Ms Word files, één voor Ms Excel files, één voor Acrobat Reader files en één dummy icoontje. Dit dummy icoontje wordt geplaatst wanneer er een andere extentie is dan ".wrd", ".xls" of ".pdf".
Figuur 20 - De Downloads sectie
Aanvankelijk was er geïmplementeerd dat wanneer de gebruiker met de linkermuisknop op de file klikt, er een melding gegeven wordt dat hij de file enkel kan opslaan. Deze optie is echter verwijderd omdat de file nog altijd kon geopend worden door me de rechtermuisknop "openen" te kiezen, de file wordt dan in hetzelfde venster geopend en de menu's geven fouten. Daarom wordt de file altijd in een nieuw venster geopend. Upload: Voor het online plaatsen van de figuren is er in het administrator gedeelte geen speciale pagina voorzien: aanvankelijk was het de bedoeling deze upload telkens te doen via een FTP programma. Voor het vergemakkelijken van het uploaden van deze files, heb ik een Windows batch script geschreven in dat het mogelijk maakt met maar één dubbelklik de files uit een bepaalde map te uploaden naar de downloads map op de server. Meer informatie over batch scripting is te vinden op: http://www.labmice.net/scripting/default.htm.
13
1 KB = 1024 bytes Karel Nijs
Website ES-International NV
67
7 Data verwerking: ASP
7.5
Administrator gedeelte
Dit is het belangrijkste deel van de website: hiermee wordt namelijk de hele website beheerd. Het administrator gedeelte bestaat uit nog eens twee delen: het administrator gedeelte zelf en het special user gedeelte. Beiden gebruiken dezelfde interface (oa. de navigatie en de login pagina's), maar verschillen sterk in mogelijkheden, daarom ga ik het special user gedeelte apart behandelen in 6.6 Special user gedeelte.
7.5.1 Security Het allerbelangrijkst (op de goede werking na) is de beveiliging van de administrator pagina's: we willen namelijk niet dat iemand anders op het administrator gedeelte zou kunnen inloggen en zomaar wat aan de inhoud van de site gaat wijzigen. Zoals eerder vermeld, is de database al beveiligd met een paswoord. Dit paswoord houdt al een eerste vlaag van misbruik tegen. Maar stel dat ze erin slagen de database te downloaden en ze te cracken, dan zouden de misbruikers met alle accounts toegang hebben tot de website (in de database zijn deze namelijk allemaal opgeslagen) en zijn ze in staat de hele inhoud van de website te vernielen. Voor we zo'n misbruik kunnen constateren, is het meestal al te laat en is de website vernield. Encodering: Wanneer men toch in staat zou zijn de database te downloaden en het paswoord te cracken, dan komt men voor een ander probleem te staan: de login en paswoorden in de database zijn namelijk geëncodeerd. Een codering zelf uitvinden is als het wiel opnieuw uitvinden, daarom heb ik een veel gebruikte bestaande codering gebruikt. Voor deze codering nog extra te beveiligen, worden er willekeurige strings achter geplakt. Ik ga deze encodering hier niet meer verder uit de doeken doen omdat ik anders onnodig de veiligheid van de website in gevaar breng. Opmerking: nergens in het administrator gedeelte worden de gebruikers met XSL uitgeschreven. Dit is omdat XSL enkel gebruikt kan worden om data uit XML files weer te geven en de gebruikers zijn opgeslagen in de database.
Levels: De security is opgebouwd uit verschillende levels: • Level 0: de webmaster of hoofdadministrator; • Level 1: het personeel van ES-International NV of gewone administrators; • Level 2: de speciale gebruikers (special users) door ES-International NV aangemaakt; • Level 3: de gewone gebruikers van deze website. De gewone surfer behoort tot Level 3. Karel Nijs
Website ES-International NV
68
7 Data verwerking: ASP
Een hoger level kan nooit wijzigingen aanbrengen in een lager level, ofwel: hoe lager het level, hoe meer rechten je hebt op de website. Tussen Level 0 en Level 1 is er bijna geen verschil: het enige verschil is dat er maar één administrator van Level 0 kan bestaan, dit is de webmaster of hoofdadministrator en dat deze niet gewijzigd of verwijderd kan worden. Deze functie is geïmplementeerd opdat ik later als webmaster altijd kan inloggen voor een mogelijk probleem te controleren. Het is niet de bedoeling continu verdere controle uit te oefenen op de website en zijn werking: dit is de taak van het personeel van ESInternational NV, ofwel Level 1. Level 1 is speciaal voor gemaakt voor het personeel van ES-International NV: de administrators van dit level kunnen namelijk de inhoud van de site, andere Level 1 administrators en de speciale gebruikers van Level 2 beheren. Level 2 gebruikers zijn geen administrators meer, maar wel special users: dit zijn klanten van ES-International NV die speciale rechten hebben gekregen op de website. De interface voor Level 0 en 1 administrators is identiek, de interface voor Level 2 gebruikers is echter aangepast: omdat deze gebruikers geen rechten mogen hebben voor in de database of XML files van de website te wijzigen, worden daarom deze menu's ook niet getoond. De Level 3 gebruikers zijn de gewone surfers op het Internet, omdat 90% van de bezoekers tot deze categorie behoort, wordt deze categorie als standaard beschouwd en wordt er nergens op gecontroleerd. In de database of ASP pagina's gaat er daarom ook nooit een verwijzing naar Level 3 gemaakt worden. Wanneer ik over "gebruikers" praat, bedoel ik altijd Level 3 gebruikers. Bovenaan elke administrator pagina wordt er gecontroleerd of de gebruiker ingelogd is en of dat hij rechten heeft voor de pagina te bekijken. Een Level 3 gebruiker heeft bijvoorbeeld geen rechten om de administrators pagina "userDownloads.asp" te zien, een Level 0, 1 of 2 gebruiker wel. Een Level 2 gebruiker heeft geen rechten om de administrators pagina "add_users.asp" te zien of uit te voeren, een Level 0 of 1 gebruiker wel. Wordt er toch ongeoorloofd gebruik vast gesteld, dan wordt de gebruiker doorverwezen naar het login formulier.
7.5.2 Inloggen Via een apart menu op de website kan me navigeren naar het login formulier van het administrator en special user gedeelte. Wanneer men op deze pagina komt, dan wordt de navigatiebalk automatisch aangepast: de gewone navigatiemenu's verdwijnen en in plaats daarvan komt er een melding "No Karel Nijs
Website ES-International NV
69
7 Data verwerking: ASP
menu available while not logged in" samen met een hyperlink naar de gewone site te staan. Na de gegevens op het login formulier ingevuld zijn, kan men inloggen door te klikken op de knop "Log in". Dit alles gebeurd op de ASP pagina "inlog_formulier.asp". Het controleren of de loginpoging een geldige is, gebeurd op de "inloggen.asp" pagina. Wanneer de login ongeldig is, wordt de gebruiker terug gestuurd naar het login formulier en krijgt hij hier een melding van de foutieve login, is het een geldige login, dan wordt de gebruiker doorverwezen naar de homepagina van het administrator gedeelte.
Werking: De werking van het inloggen wordt met een tekening gedemonstreerd:
Figuur 21 - Inloggen
Zoals er te zien is, wordt de poging uit de querystring gehaald. Wanneer het login formulier voor het eerst opgeroepen wordt, is "poging" nul, wanneer er een foutieve poging gedaan is, wordt het formulier opgeroepen met "poging" op één gezet. Zodoende wordt er een foutmelding gegeven. Het inloggen op de aparte pagina, "inloggen.asp":
Karel Nijs
Website ES-International NV
70
7 Data verwerking: ASP <% 'login encoderen en opslaan in strLogin 'paswoord encoderen en opslaan in strPaswoord strSQL = "SELECT tblUsers.Login, Paswoord, Niveau, Folder FROM tblUsers INNER JOIN tblUserInformation ON tblUsers.Login = tblUserInformation.Login WHERE tblUsers.Login='" & strLogin & "' AND Paswoord='" & strPaswoord & "'" rstUsers.Open strSQL, strCon, adOpenDynamic If (not rstUsers.BOF) Then rstUsers.moveFirst() Session("user") = Request.Form("txtLogin") Session("niveau") = rstUsers("Niveau") 'HIER KOMT CODE VOOR HET LOGGEN IN DE DATABASE 'HIER WORDT DE TABEL tblUsers GEUPDATE Response.Redirect("home.asp") Else 'BIJ FOUTE LOGIN Response.redirect("inlog_formulier.asp?i=1") End If %>
Met de ingevulde waardes van het login formulier worden de records in de tabel tblUsers doorzocht op een geldige overeenkomst (login én paswoord). Voor we deze echter kunnen gaan filteren in de database moet eerst het encoderings algoritme op beide velden toegepast worden. Worden er geen records gevonden, dan is er dus niet voldaan aan de IF voorwaarde en wordt de ELSE uitgevoerd en de gebruiker wordt teruggezonden naar het login formulier. Omdat we in de tabel met de login als Primary Key werken, kan er maar één login met passend paswoord gevonden worden. Wanneer dit record gevonden is, worden de sessie variabelen "login" en "level" gevuld met de juiste waardes. Deze sessievariabelen gaan we gebruiken telkens we een administrator pagina willen bekijken: hier zijn namelijk de "login" en "level" van belang. Na het opvullen van de sessie variabelen, gaan we in de database loggen dat er een gebruiker ingelogd is en in de tabel tblUsers gaan we de datum van de laatste in- en uitlog aanpassen en vervolgens worden we door verwezen naar de administrator home pagina ("home.asp").
7.5.3 Navigatie Niet ingelogd is er geen navigatie beschikbaar, maar wanneer we een geldige login hebben, wordt de navigatiebalk aangepast naar het level van de ingelogde gebruiker. Level 0 en 1 navigatie: Karel Nijs
Website ES-International NV
71
7 Data verwerking: ASP
Figuur 22 - Level 0 en 1 navigatie
Level 2 navigatie:
Figuur 23 - Level 2 navigatie
Werking: Voor de werking van de navigatiebalk gaan we de "level" variabele in het session attribuut van de ingelogde gebruiker gebruiker opvragen. Wanneer de gebruiker tot Level 2 behoort, gaan de administrator menu's niet weergegeven worden, maar wel de Level 2 menu's. Dit wordt toegepast met een IF structuur. De knop "Downloads" is terug te vinden in beide navigatie menu's, doch steekt er een andere hyperlink achter. De knop "Log-out" echter, is voor alle levels hetzelfde: er wordt gewoon doorverwezen naar de pagina voor het uitloggen.
7.5.4 Upload Bij het toevoegen van nieuws berichten en product voorbeelden kan er telkens een figuur opgegeven worden. Een optie hierbij was dat er via het ASPUpLoad object de mogelijkheid tot uploaden van de figuur naar een bepaalde map aangeboden werd. Dit zou namelijk het gebruiksgemak enorm verhogen omdat er nu telkens het relatieve pad van de figuur opgegeven moet worden en de figuur nog eens met een FTP client ge-upload moet worden. Helaas stelt het KPN deze upload modules enkel ter beschikking zonder dat we zelf het pad kunnen aanpassen. Met de aangepaste upload modules kan er enkel ge-upload worden naar de door KPN aangemaakt Upload map in de root van de server. Deze modules moeten trouwens ook altijd in de root van de website staan omdat anders de padverwijzing (die wij dus niet kunnen aanpassen) niet meer klopt. Tijdens het ontwerpen heb ik mij proberen te schikken naar deze voorwaarde van KPN, maar hier kwam ook nog eens bij dat ik geen bestanden zou kunnen uploaden naar submappen in deze Upload map. Alle bestanden (downloads, figuren, HTML files, …) die ge-upload zouden worden, zouden dan samen in één map op de server terecht komen. Het aanmaken van de folders van de administrators en speciale gebruikers van ESInternational NV zou dan ook omgevormd moeten worden zodat deze mappen in de Upload map aangemaakt worden. Maar ook hier is er weer een beperking opgelegd door KPN: we kunnen namelijk de rechten van de subfolders niet zomaar wijzigen. KPN heeft de rechten van alle folders standaard zo ingesteld, dat we er geen bewerkingen in kunnen doen via code: er kan geen database ge-update worden, het File Scripting Object kan niet gebruikt worden, … Karel Nijs
Website ES-International NV
72
7 Data verwerking: ASP
We kunnen de rechten van de mappen op de server ook niet zomaar aanpassen: deze optie heeft KPN uitgeschakeld. We moeten nu telkens wanneer we deze "speciale" bewerkingen willen toelaten op een folder, een e-mail sturen naar KPN en wachten tot zij de folder deze permissies geven. Vervolgens kan het gebruik van de website zijn gewone loop weer gaan. Om al deze problemen en wanorde te vermijden heb ik besloten het uploaden van de figuren door ES-International NV zelf te laten doen en hun duidelijk de relatieve padverwijzing uit te leggen.
7.5.5 Level 0 en 1: Modify > News Met het Modify menu kunnen de administrators wijzigingen aanbrengen aan de News en Product > Examples sectie van de website. Omdat deze twee secties van de website grotendeels overeen komen, ga ik enkel de News sectie grondig bespreken. Werking: Wanneer de administrator op de Modify > News main pagina is, wordt een menu beschikbaar gesteld met acties die de administrator kan uitvoeren op de pagina: de administrator kan de pagina bekijken, berichten toevoevoegen, wijzigen en verwijderen. News sectie bekijken: De eerste optie, de News sectie bekijken, opent gewoon de News pagina zoals ze te zien is op het publieke deel van de website. Deze functie is geïmplementeerd opdat de administrators onmiddellijk het resultaat van hun wijzigingen kunnen zien en eventueel nog vlug aanpassingen doorvoeren zodat hun vergissing of dergelijk niet lang zichtbaar zal zijn op de website. Berichten toevoegen: Voor nieuwe berichten toe te voegen, wordt de administrator doorgelinkt naar een formulier waar hij nieuwe berichten kan invullen. Het bericht ID wordt automatisch gegenereerd en de administrator kan dit dus niet wijzigen. Dit is gedaan voor het gebruiksgemak van de website te verhogen: in een vorige versie moest de administrator het ID opgeven en het probleem hierbij was dat de ID uniek moest zijn en hij alle huidige IDs moest overlopen. Het genereren van het ID gebeurt de eerste maal aan client zijde met Javascript: function genereerID(){ var datum = new Date(); document.forms[0].txtID.value = "nieuws_" + datum.getDate() + datum.getMonth() + datum.getYear(); document.forms[0].txtID.value = document.forms[0].txtID.value + "_" + Math.round(50 * Math.random()); }
Voor het genereren van het ID wordt er gebruik gemaakt van de datum en een random variabele. Mocht er per toeval nog een identieke ID gegenereerd worden, dan wordt dit opgevangen in de verwerkingspagina "add_news.asp".
Karel Nijs
Website ES-International NV
73
7 Data verwerking: ASP <% Randomize While(bestaat = true) id = id & Int(10 * Rnd + 48) bestaat = false For i = 0 To (fileXML.documentElement.childNodes.length - 1) If (fileXML.documentElement.childNodes(i).getAttribute("id") = id) Then bestaat = true Exit For End If Next Randomize Wend %>
Zoals in 5.7.1 News beschreven, zijn er enkele velden verplicht in te vullen, dit wordt ook aan de client zijde met Javascript gecontroleerd. Na het invullen en versturen van het formulier wordt het verwerkt in "add_news.asp". Deze pagina gaat de ingevulde waardes in de juiste elementen of attributen stoppen en dan het nieuws bericht (het "item" element) aan de News XML file toevoegen. Omdat ook een XML file door de parser van boven naar beneden gelezen wordt, gaat het eerste bericht altijd bovenaan de pagina te zien zijn. Dit effect willen we bereiken door de node bovenaan de XML tree toe te voegen. <% 'controle op toegang Set fileXML = Server.CreateObject("MSXML2.DOMDocument") fileXML.async = false status = fileXML.Load(Server.Mappath("../../XML/nieuws.xml")) 'controle op inladen XML file en uniek zijn van ID Set titelKnoop = fileXML.createElement("titel") Set titelTekst = fileXML.createCDataSection(titel) titelKnoop.appendChild(titelTekst) Set nieuweKnoop = fileXML.createElement("item") nieuweKnoop.appendChild(titelKnoop) nieuweKnoop.setAttribute "id",id fileXML.documentElement.insertBefore nieuweKnoop, ML.documentElement.childNodes(0)
fileX-
fileXML.save(Server.Mappath("../../XML/nieuws.xml")) 'de toevoeging in de database loggen 'terug naar Modify > News main pagina gaan %>
Karel Nijs
Website ES-International NV
74
7 Data verwerking: ASP
Bestaande berichten wijzigen: Via XSL worden alle bestaande berichten weergegeven. Wanneer we op de titel van een bepaald bericht klikken, wordt het ID van dit bericht doorgegeven aan het formulier op "modify_news.asp". Deze pagina haalt met het ID het juiste "item" element uit de News XML file en stopt de juiste node in een object. <% root = null id = Request.QueryString("id") For i = 0 To (fileXML.documentElement.childNodes.length - 1) If (fileXML.documentElement.childNodes(i).getAttribute("id") = id) Then Set root = fileXML.documentElement.childNodes(i) Exit For End If Next If (root is Nothing) Then Response.redirect("../HTML/errorInXMLfile.html") Response.end() End If %>
Voor het invullen van de tekstvakken op het formulier, halen we telkens het juiste element of attribuut uit de node.
Wanneer de wijzigingen aangebracht zijn, gaan we het formulier versturen en wordt het verwerkt met de "schrijf_verandering_news.asp" pagina. Deze pagina gaat weer met de ID de juiste node opzoeken in de XML files en de waardes van deze node updaten. Voor dit goed in zijn werk te laten gaan is het belangrijk dat de ID van het nieuws bericht uniek is. Ook weer na het aanbrengen van de wijzigingen wordt de actie gelogd in de database en gebruiker doorgestuurd naar de Modify > News main pagina.
Bestaande berichten verwijderen: Via XSL wordt er een lijst met alle nieuwsberichten aangemaakt, wanneer de administrator klikt op de titel van het bericht wordt het bericht uit de XML file verwijderd. Voor het definitieve verwijderen van het bericht wordt er eerst nog eens, door middel van client side Javascript, om bevestiging gevraagd. Dit is gedaan voor ongelukjes met klikken op te vangen.
Karel Nijs
Website ES-International NV
75
7 Data verwerking: ASP
Na het bevestigen wordt de ID van het nieuwsbericht doorgegeven aan de verwijderpagina, "erase_news.asp". Deze pagina gaat het juist nieuws item in de XML file opzoeken en hem onherdoenbaar verwijderen. Deze actie wordt weer gelogd in de database en er wordt geredirect naar de Modify > News main pagina.
7.5.6 Level 0 en 1: Modify > Examples De Modify > Examples pagina stelt de administrator het beheer van de Product > Examples sectie ter beschikking. Omdat het beheren van de product voorbeelden in grote delen overeenkomt met het beheren van de nieuws sectie, ga ik deze niet bespreken. Bij het beheer van deze sectie kwam vooral meer client side Javascript kijken omdat er met meer factoren rekening gehouden moet worden.
7.5.7 Level 0 en 1: Database > Users Met de Database > Users beheer sectie kan de toegang tot het administrator gedeelte beheerd worden. Dit is een belangrijk gedeelte omdat er goed moet nagedacht worden over de rechten die we de nieuwe gebruiker geven. Volgende opties zijn op de main pagina beschikbaar: gebruikers weergeven, toevoegen, wijzigen en verwijderen. Gebruikers weergeven: Net zoals bij Modify > News worden de speciale gebruikers weergegeven in een pop-up venster. Dit pop-up venster heeft echter een brede functionaliteit. Met een Do While lus worden alle gebruikers in de tabel tblUsers overlopen en worden hun waardes geschreven in de ASP file. <% Do
'decodering user If (Session("login") = user) Then 'decodering paswoord Response.write("
Enkel het paswoord van de ingelogde gebruiker is zichtbaar omdat de andere gebruikers in principe geen nood hebben het paswoord van de andere te weten. Karel Nijs
Website ES-International NV
76
7 Data verwerking: ASP
Voor elke gebruiker is er een "Alle informatie" link waarmee we alle informatie van een bepaalde gebruiker kunnen weergeven. Dit wordt allemaal weggeschreven in de pagina "dat_users_tonen_more.asp". De "dat_users_tonen_more.asp" pagina gaat met de ID van de gebruiker de tabel tblUserInformatie overlopen en alle velden uitschrijven in een HTML tabel. Hier wordt ook enkel het paswoord van de ingelogde gebruiker getoond. Bij de more pagina wordt de folder van de gekozen gebruiker ook getoond als hyperlink. Elke gebruiker heeft namelijk ook een folder waar er bestanden in staan, speciaal voor hem of haar daar geplaatst. De inhoud van deze pagina wordt ook weer dynamisch opgebouwd aan de hand van de inhoud van de folder van de gebruiker op de server, net zoals bij de Downloads sectie in het publieke deel van de site. Ook hier wordt er weer gebruik gemaakt met het File Scripting Object voor de inhoud van de map op de server op te vragen en te sturen naar de webpagina. Per bestand hebben we twee opties: downloaden of verwijderen. Bij het downloaden van een bestand gaat de ASP pagina "stream.asp" opgeroepen worden. Deze pagina is ingebouwd zodat we kunnen controleren wanneer een gebruiker een bepaald bestand gedownload heeft zodat we het hierna kunnen verwijderen van de server. De bestanden van een bepaalde gebruiker staan gewoon op de server en zijn in principe voor iedereen toegankelijk, mochten zij de mapstructuur kunnen achterhalen natuurlijk. Door het gebruiken van deze stream pagina brengen we ES-International NV op de hoogte wanneer een bepaalde gebruiker een bestand download en kunnen zij het bestand van de server verwijderen. Dit is geen veilige methode voor bestanden online te zetten die enkel en alleen beschikbaar mogen zijn voor één bepaalde gebruiker. Een betere oplossing zou zijn het gebruik van het stream object, maar omdat de server van KPN dit niet ondersteunt valt dit buiten onze keuzes. De veiligste methode is webspace aanvragen waar we een aantal FTP accounts kunnen aanmaken of zelf een server opzetten en dan zo de accounts beheren. Ook het downloaden van een bestand door een bepaalde gebruiker wordt in de database gelogd.
Een andere beschikbare optie in de Downloads folder van een gebruiker is het bestand van de server te verwijderen: met deze optie wordt via het File Scripting Object het gekozen bestand (weer na bevestiging met Javascript) van de server verwijderd. Dit verwijderen kan men niet ongedaan maken. Administrators van Level 1 kunnen geen bestanden verwijderen in de folder van de hoofdadministrator (Level 0). Dit is gedaan opdat de hoofdadministrator altijd basisbestanden ter beschikken zou kunnen stellen: bijvoorbeeld de CSS, een template, enz.
Karel Nijs
Website ES-International NV
77
7 Data verwerking: ASP
<% For Each filFile In objFolder.Files If (rstUsers("Niveau") = 0) Then If (rstUsers("Niveau") = Session("niveau")) Then 'administrator mag wissen Else 'administrator mag niet wissen End If Else 'administrator mag niet wissen End If Next %>
Ook het wissen van bestanden wordt weer gelogd in de database. Gebruikers toevoegen: Met deze optie in het Database > Users menu kunnen er nieuwe gebruikers aangemaakt worden. Hiermee kan men zowel gebruikers van Level 1 als van Level 2 aanmaken. Er kunnen géén gebruikers van Level 0 aangemaakt worden. Het is belangrijk dat de login van de aan te maken gebruiker uniek is: deze wordt namelijk als Primary Key gebruikt in de tabellen tblUsers en tblUserinformation. Op de pagina is er altijd de optie "Bezette logins weergeven", deze functie is eigenlijk hetzelfde als de "Gebruikers weergeven" optie in het main menu. Wanneer er, na opgeven van een bestaande login, in de verwerkingspagina "add_users.asp" gedetecteerd wordt dat de login al bestaat, wordt de gebruiker doorgestuurd naar een pagina waarop hem dit gemeld wordt. Hier kan de gebruiker dan op "vorige" klikken om nieuwe gegevens op te geven. Met klassieke ASP heb je hier wel als nadeel dat alle velden van het formulier gewist zullen zijn, dit is echter verbeterd in ASP.NET.
Karel Nijs
Website ES-International NV
78
7 Data verwerking: ASP <% Set rstUsers = Server.CreateObject("ADODB.RecordSet") 'de login encoderen strSQL = "SELECT Login FROM tblUsers" rstUsers.Open strSQL, strCon, adOpenDynamic rstUsers.moveFirst() Do
If (rstUsers("Login") = login) Then bestaat = true Exit Do End If rstUsers.moveNext() Loop While(not rstUsers.EOF) If (bestaat) Then Response.redirect("idbestaat.asp?z=administrators") Response.end() End If %>
Wanneer het formulier geldig ingevuld is (alle verplichte velden zijn juist ingevuld) en de login nog niet bestaat, wordt er in de tabellen een record toegevoegd voor de nieuwe gebruiker. Met de niet geëncodeerde login van de gebruiker en het level wordt een map aangemaakt op de server. In deze map kunnen dan later de downloads voor deze gebruiker geplaatst worden. Bestaat er al echter een map met deze naam (wat in principe onmogelijk is omdat de login uniek is), dan wordt er een While lus overlopen totdat we een unieke mapnaam gevonden hebben en we de map fysisch kunnen aanmaken op de server. <% bolDubbel = false Do
If (not bolDubbel) Then bolFolderBestaat = folderBestaat(strMapNaam) Else bolFolderBestaat = folderBestaat(strNieuweMapNaam) End If If (bolFolderBestaat) Then strNieuweMapNaam = strMapNaam & "." & intTeller bolDubbel = true End If
intTeller = intTeller + 1 Loop While(bolFolderBestaat) If (bolDubbel) Then Karel Nijs
Website ES-International NV
79
7 Data verwerking: ASP strMapNaam = strNieuweMapNaam End If 'map aanmaken op server 'in tabel tblUserInformation de folder updaten %>
Gebruikers wijzigen: Het wijzigen van gebruikers komt overeen met het toevoegen van de gebruiker, nu moet er echter wel geen login meer opgegeven worden: er is al een login en omdat deze als Primary Key gebruikt wordt in twee tabellen heb ik ervoor gekozen dat men deze niet kan wijzigen. Er wordt ook geen map meer aangemaakt op de server omdat er immer al een map bestaat voor deze gebruiker. Bij het aanmaken van de map bij "Gebruikers toevoegen" werd het level van de gebruiker aan de map vast gehecht. Wanneer we bij het wijzigen van de gebruiker het level zullen wijzigen, zal dit niét op de server gebeuren omdat de mapnaam op de server eerder indicatief is: de login is hier van belang. Bij het wijzigen van de gebruikers wordt er natuurlijk ook geen record meer toegevoegd aan de bestaande tabellen, maar wordt het bestaande record gewoon ge-update met de nieuwe waardes. Ook deze actie wordt weer gelogd in de database. Gebruikers verwijderen: De optie "Gebruikers verwijderen" gaat de gebruikers definitief uit de database verwijderen. Daarom is ook hier weer een Javascript bevestiging ingebouwd. Heeft de gebruiker een map op de server (normaal wel), dan wordt deze onherroepelijk mee verwijderd. Ook dit wordt weer met het File Scripting Object gedaan. <% Set objFSO = Server.CreateObject("Scripting.FileSystemObject") folderBestaat = objFSO.FolderExists(Server.Mappath(rstUsers("folder"))) If (folderBestaat AND rstUsers("folder") <> "") Then objFSO.DeleteFolder(Server.Mappath(folder & rstUsers("folder"))) End If %>
7.5.8 Level 0 en 1: Database > Zoekmachine Via het Database > Zoekmachine menu kunnen we de zoekmachine op het publieke deel van de site beheren. Volgende opties zijn beschikbaar: sleutelwoorden weergeven, toevoegen, wijzigen en verwijderen. Karel Nijs
Website ES-International NV
80
7 Data verwerking: ASP
Het beheren van de zoekmachine komt in grote lijnen overeen met het beheren van de gebruikers: in plaats van dat we in twee tabellen gaan werken, werken we hier in de tabel tblSearch_keywords en wordt er nu niets fysisch op de server gewijzigd.
Sleutelwoorden weergeven: Wanneer we deze optie selecteren in het Databae > Zoekmachine main menu, dan wordt er een pop-up geopend met daarin alle bestaande sleutelwoorden waarop er gezocht kan worden met de zoekmachine. De sleutel woorden zijn alfabetisch gerangschikt en bovenaan wordt het alfabet klikbaar weergegeven. Wanneer men bijvoorbeeld klikt op de letter "d", dan gaan alle sleutelwoorden beginnend met een "d" weergegeven worden en wordt de letter "d" in de navigatie niet meer klikbaar, maar wel vetjes weergegeven. <% For intTeller = Asc("a") To Asc("z") Step 1 strLetter = String(1,intTeller) If (strLetter = letterPagina) Then Response.write("" & strLetter & " ") Else Response.write("") Response.write(strLetter & " ") End If Next %>
Wanneer men bijvoorbeeld klikt op de letter "x", dan gaan er (voorlopig) geen sleutelwoorden gevonden worden en wordt de melding "Geen actieve sleutelwoorden met de letter 'x'" weergegeven. <% If (rstSearch.BOF and rstSearch.EOF) Then 'melden dat er geen sleutelwoorden gevonden zijn Response.end() End If rstSearch.moveFirst() Do
Sleutelwoorden toevoegen/wijzigen: Bij het wijzigen en toevoegen van de sleutelwoorden moet ik kort opmerken dat het zeer belangrijk is dat men het juiste pad opgeeft: het pad van het sleutelwoord moet namelijk relatief ten opzichte van het pad van "search.asp" opgegeven worden. Het personeel van ES-International NV zijn allemaal ingenieurs of informatici, maar toch zouden hier fouten tegen gemaakt kunnen worden, daarom heb ik bij deze optie een korte handleiding met enkele voorbeelden geschreven zodat er zeker geen vergissingen gemaakt kunnen worden.
7.5.9 Level 0 en 1: Database > Logs Tijdens het schrijven van deze scriptie heb ik al een aantal keer vermeld dat de uitgevoerde acties gelogd worden in de database. Dit deel van de website stelt de administrators ter beschikking de logs te beheren. Het main menu biedt volgende opties: logs weergeven en verwijderen en de statistieken van de main site bekijken.
Logs weergeven: Met deze optie kunnen alle logs in de tabel bekeken worden. Het venster van de logs wordt ook weer in pop-up geopend, maar is wel van grootte aanpasbaar: bij de vorige venster was het niet gewenst dat de gebruikers het venster zouden vergroten en daarom was dit ook uitgeschakeld, bij de logs echter, waar er veel data afgeprint wordt, is het een vereiste dat het venster op maximum grootte bekeken kan worden. Omdat het bekijken en controleren van de logs onoverzichtelijk is, heb ik ingebouwd dat de gebruiker kan instellen op welk veld (login, datum), in welke richting (stijgend, dalend) de logs gesorteerd worden en hoeveel logs er per pagina weergegeven worden.
Karel Nijs
Website ES-International NV
82
7 Data verwerking: ASP
Figuur 25 – Logs bekijken
Logs verwijderen: Wanneer we kiezen voor logs te verwijderen, dan worden we doorgestuurd naar "dat_logs_wissen.asp". Op deze pagina krijgen we een nieuw menu'tje waar we kunnen kiezen of we ofwel alle logs verwijderen, ofwel enkel de laatste x logs behouden. "x" is hier instelbaar via een tekstvak. Wanneer we kiezen voor "Alle logs verwijderen" worden alle logs onherdoenbaar uit de database verwijderd. Wanneer we kiezen voor enkel de laatste x logs te behouden, dan worden alle logs boven de laatste x met een While lus gewist. <% 'aantal logs opvragen 'alle logs opvragen rstLogs.moveFirst() teller = 1 teHouden = Request.QueryString("aantal") teVerwijderen = aantalRecords - teHouden Do
If (teller <= teVerwijderen OR teHouden = -1) Then 'log via ID uit de tabel verwijderen End If teller = teller + 1 rstLogs.moveNext()
Loop While(not rstLogs.EOF) %>
Statistieken main site bekijken: Met dit menu item wordt de counterpagina van de teller van het bezoekersaantal van de website in pop-up geopend. Op deze pagina kan ES-International NV de bezoekers geschiedenis van de site zijn.
Karel Nijs
Website ES-International NV
83
7 Data verwerking: ASP
7.5.10 Level 0 en 1: Downloads Op de Downloads sectie van het administrator gedeelte kan met de algemene downloads en de downloads van een bepaalde gebruiker bekijken. De algemene downloads zijn de downloads beschikbaar in de Downloads sectie op het publieke deel van de website. Wanneer men op een bepaalde gebruiker klikt, krijgt men zijn downloads of, met andere woorden, de inhoud van zijn/haar map op de server te zien. Deze pagina is een hergebruik van de pagina die we kunnen benaderen via het Database > Users menu. Bij beide download categorieën kan men de ofwel de bestanden downloaden, ofwel de bestanden verwijderen.
7.5.11 Level 2: Info Het eerste menu voor de Level 2 gebruikers is louter informatief: de loginnaam word weergegeven, de sessie ID, de connectie status een korte boodschap van ESInternational NV. Er is nog eens het e-mail adres voor assistentie vermeld zodat de gebruikers deze makkelijk terug vinden wanneer er problemen voorkomen.
7.5.12 Level 2: Downloads Op deze sectie van het Level 2 administrator gedeelte kan de gebruiker de algemene en de downloads speciaal voor hem online geplaatst, zien en downloaden. Bij deze sectie wordt er meer informatie per bestand weergegeven: de bestandsnaam en -extentie, de grootte en de aanmaakdatum. Omdat het een Level 2 gebruiker is, is er geen optie beschikbaar voor de bestanden te verwijderen: hij kan ze enkel downloaden. Tijdens het ontwikkelen van de website is er overwogen om de downloads enkel via de rechtermuisknop beschikbaar te maken zodat het pad toch meer verborgen blijft, maar zoals eerder vermeld kunnen de bestanden dan via "Openen…" in hetzelfde frame geopend worden en krijgen we menu errors. Verder zou ES-International NV ook zo niet op de hoogte gebracht kunnen worden wanneer een gebruiker één van zijn bestanden download.
7.5.13 Uitloggen Altijd beschikbaar in het administrator gedeelte, is de optie "Log-out". Wanneer ge gebruiker uitlogd dan wordt de pagina "uitloggen.asp" opgeroepen. Op deze pagina wordt het "Uur_laatste_logout" veld van de gebruiker in de tabel tblUsers geupdate met de huidige tijd. Hierna wordt het uitloggen gelogd in de tabel tblLogs en wordt de sessie afgesloten. Karel Nijs
Website ES-International NV
84
7 Data verwerking: ASP <% Session.Abandon() %>
Karel Nijs
Website ES-International NV
85
8 Data weergave: HTML
8 Data weergave: HTML 8.1
Inleiding
In het eerste jaar MCT werd ons handmatig HTML ontwikkelen aangeleerd. Dit had tot zijn gevolg dat we veel moesten typen in een gewone tekstverwerker zoals TextPad en dat we vaak, voor layout aanpassingen bijvoorbeeld, meerdere keren de pagina moesten bewerken, bekijken en opnieuw bewerken voor bijvoorbeeld een figuur exact gepositioneerd te krijgen. Met de uitvinding van WYSIWYG1 editors en de verdere ontwikkeling daarvan in de loop der jaren, is de ontwikkeling van website enorm vergemakkelijkt: nu kan zelfs iemand zonder elementaire kennis van HTML een website ontwikkelen. Dit heeft natuurlijk als nadeel dat er steeds minder vlug beroep gedaan wordt op echte webdesigners omdat de mensen zelf hun site willen ontwerpen. ES-International NV had bij deze website op het oog dat ze, na mijn dienst, verder de site konden onderhouden. Dit wordt gedeeltelijk verwezelijkt door het makkelijk onderhouden van de data door middel van de ASP administrator interface, maar ze wilden ook aanpassingen aan de layout kunnen doorvoeren. Om deze reden (en om de reden van het gebruiksgemak) heb ik gekozen voor het ontwerpen van de website met DreamWeaver2.
8.2
DreamWeaver
DreamWeaver, een professioneel website ontwikkelings pakket, maakt het ontwikkelen van website makkelijker omdat we via een interface gewoon de gewenste elementen op de pagina kunnen slepen en de data/opmaak kunnen beginnen door te voeren. In DreamWeaver zit er een optie zodat we tijdens het ontwerpen van de website in layout mode ook kunnen switchen naar de code: we nemen namelijk niet alles wat DreamWeaver ons voorsteld als OK aan.
1
What You See Is What You Get proefversie beschikbaar op http://www.macromedia.com Karel Nijs Website ES-International NV
2
86
8 Data weergave: HTML
In DreamWeaver is er een collectie aangemaakt met alle files in van de website. Wanneer ES-International NV nu het beheer van de layout van de site overneemt, kunnen zij makkelijk hun weg terug vinden dankzij deze optie.
8.3
Menu's
8.3.1 DIV De menu's van de website zijn opgebouwd met DIV tags. Een DIV is een veel gebruikte tag omdat we zo de website in lagen, layers, kunnen opdelen. DIV blokken worden nu door bijna alle browsers standaard ondersteund. Door het menu op een hogere laag te zetten dan de rest van de inhoud van de website zijn ze altijd zichtbaar, maar omdat we anders de menu's niet zouden kunnen lezen (DIV blokken zijn standaard doorzichtig), is er een afbeelding in de DIV geplaatst.
8.3.2 Frameset Tijdens het ontwerpen had ik ES-International NV enkele voorstellen gedaan voor de navigatiestructuur op de website, maar zij wilden echter het Windows menu als navigatie hebben. Omdat we met een frameset werken, kunnen we het menu niet laten openen over twee verschillende frames. Daarom heb ik ervoor gekozen op elke pagina waar het menu voorkomt, de DIV tags van het menu te zetten. Wanneer we dan bijvoorbeeld op Company klikken, dan verschijnt het menu dat in het frame daaronder staat. Daarom is het van belang dat op alle pagina's hetzelfde menu staat en dat er zeker geen andere webpagina's in het hoofdframe geopend worden. Dit heeft wel als nadeel dat we, telkens als we een wijziging doorvoeren aan het menu, dit menu op elke pagina moeten gaan updaten. De DIV blokken van het menu staan standaard op onzichtbaar: wanneer we over het gewenst menu item in de navigatiebalk zullen gaan, worden ze zichtbaar gemaakt. Een andere mogelijkheid om het menu te implementeren, zou werken met IFrames zijn. IFrames zijn frames in een soort DIV layout: je kan ze positioneren op de pagina waar je ook maar wilt. Helaas zijn IFrames nog niet standaard ondersteunt en ook DreamWeaver herkent geen IFrames zodat ES-International NV de website nog niet zelf zou kunnen onderhouden. De Product examples sectie van de website is ook weer opgedeeld in twee frames: één voor de combobox in te zetten en één voor de voorbeelden in weer te geven. Willen we dat het menu van de website altijd werkt, dan moet dit opgevangen worden: wanneer we bijvoorbeeld van uit de Product examples sectie de Company > Contact pagina opvragen, dan gaat ze het menu weergeven in de main frame. Maar nu bestaat het main frame opeens uit een frameset met nog eens twee frames! Als gevolg gaat er een Karel Nijs
Website ES-International NV
87
8 Data weergave: HTML
error gegenereerd worden en kunnen we niet navigeren vanuit de product voorbeelden pagina. Om dit probleem om te vangen, heb ik een Javascript functie geschreven die controleerd welke pagina zich in het main frame bevindt: is dit een gewone pagina, dan gaat het menu ook gewoon weergegeven worden. Is dit echter "prod_examples.html" (de product voorbeelden frameset), dan het menu weergegeven worden in het bovenste frame van de frameset. var adres = "" + self.parent.frames["middle"].location; var lengteAdres = adres.length; var lengtePagina = parseInt("19"); //prod_examples.html var lengte = lengteAdres - lengtePagina; var sub = adres.substr(lengte+1,lengtePagina); if(sub == "prod_examples.html") mijnKader = self.parent.frames["middle"].frames[0]; else mijnKader = self.parent.frames["middle"];
Voor de menu's weergegeven worden, wordt er gecontroleerd of de menu's daadwerkelijk bestaan in het main frame, anders zou er daar een vervelend Javascript error bericht getoond worden. Wanneer het menu niet gevonden wordt, wordt het main frame onmiddellijk geredirect naar "pageError.html". Deze pagina deelt mee dat er een fout in de menu's was en bevat zelf een werkende versie van de menu's zodat de gebruiker onmiddellijk verder kan navigeren. Aanvankelijk werkte het menu met een Javascript redirect die in een Case bovenaan in de script tags stond, maar omdat dit blijkbaar een bug is in de Internet Explorer 5.x, heb ik alle menu's laten werken met een "a" tag3 met als target het main frame. Pagina
Dit brengt met zich mee dat we, wanneer we bijvoorbeeld een pagina van naam veranderen, dit in alle menu's op alle pagina's moeten veranderen in plaats van op één centrale plaats. switch(keuze){ case 1: document.location = "pagina.html"; break; //… }
Voor het probleem en oplossing achter deze bug te zoeken, heb ik vruchteloos de Microsoft site doorzocht en mijn eindwerk promotor gecontacteerd. Ook het afschuimen van
3
de "a" tag wordt in HTML gebruikt om een hyperlink te definiëren Karel Nijs Website ES-International NV
88
8 Data weergave: HTML
de forums heeft enkel als resultaat opgeleverd dat er nog meer mensen in confrontatie met dit probleem gekomen zijn. De enige oplossing die me geschikt lijkt, is upgraden naar Internet Explorer 6, maar omdat het niet mogelijk is alle potentiële gebruikers van de website dit te verplichten, heb ik met "a" tags gewerkt.
8.3.3 Plaatsing Wanneer we het menu willen zien, dan zouden we dat natuurlijk graag telkens op dezelfde plaats op de website willen zien: we kunnen het ons niet permitteren om het menu van pagina tot pagina te laten verschillen. Omdat de menu's in het main frame van de website zitten, zijn ze ook afhankelijk van de scroll positie van dit frame: standaard staan de menu's altijd bovenaan de pagina, maar omdat we met de pagina kunnen scrollen, zullen ze buiten beeld komen te staan. De oplossing hiervoor was telkens de scroll positie van het main frame op te vragen en de top waarde van het DIV menu hier gelijk aan te stellen. mijnKader = self.parent.frames["middle"]; if(navigator.userAgent.indexOf('MSIE') > -1){ mijnKader.pull_down_1.style.top = mijnKader.document.body.scrollTop; }else{ mijnKader.document.getElementById("pull_down_1").style.top = mijnKader.document.body.scrollTop; }
Het is hier belangrijk dat we eerst de browser van de gebruiker opvragen om de website zeker nog Netscape compatibel te houden.
8.4
Flash
Tegenwoordig is Flash een veel gebruikt programma voor websites en applicaties mee te maken op het Internet. Tijdens de research bij het ontwikkelen van de website, is Flash ook als een mogelijke oplossing aan bod gekomen. Dan wel niet een volledige website, maar het is altijd aangenamen als een deel van de website (bv. de menu's) dynamischer wordt gemaakt. Flash gebruik op een website heeft wel als nadeel dat de bezoekers Flash geïnstalleerd moeten hebben. De installatie van de Flash player is gratis op de site van Macromedia4 en de meeste Internet Explorer gebruikers zullen Flash wel al geïnstalleerd hebben, maar sommige browsers ondersteunen Flash niet. 4
http://www.macromedia.com Karel Nijs
Website ES-International NV
89
8 Data weergave: HTML
Omdat het voor Flash verplicht is een licentie te kopen en voor het gebruiksgemak te verhogen, heeft ES-International NV besloten geen Flash te gebruiken in hun nieuwe website.
Karel Nijs
Website ES-International NV
90
9 Data weergave: XSL
9 Data weergave: XSL 9.1
Inleiding
Net zoals CSS de stylesheet is voor een HTML pagina, is XSL de stylesheet voor een XML pagina. In dit eindwerk heb ik gebruik gemaakt van XSL om XML data in een bepaalde layout weer te geven.
9.2
XSL
XSL, Extensible Stylesheet Language, is taal ontworpen voor style sheets weer te geven. XSL bestaat eigenlijk uit drie delen: • XSLT: voor XML files om te zetten; • XPath: voor delen van een XML file te definiëren; • XSL Formatting Objects: voor XML elementen in juist formaat om te zetten. Bij het ontwikkelen van mijn eindwerk heb ik gebruik gemaakt van XSLT en XPath. Voor een XML file om te zetten naar een XSL file maken we gebruik van een ASP transform pagina (zie 7.3.3 XML transform). Deze pagina gaat de bron XML file in de layout plaatsen van de XSL file. Daarna wordt het resultaat uitgeschreven naar de browser in HTML. XSL is strikter dan HTML en moet compatibel zijn met de nieuwe XHTML standaard. Volgende voorwaarden moeten voldaan zijn om een transformatie te laten slagen: • er moet voor beide files een geldig pad opgegeven worden; • de XML file moet voldoen aan zijn DTD; • de XSL file moet aan de XHTML standaard voldoen. Dit is echter niet de enige toepassing van XSLT: XML pagina's kunnen namelijk ook naar andere door de browser ondersteunde formaten omgezet worden (bijvoorbeeld naar een andere XML file).
Bovenaan elke XSL file moet er de XML declaratie staan: Karel Nijs
Website ES-International NV
91
9 Data weergave: XSL
De HTML file moet omgeven worden tussen volgende tags: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/">
Het is mogelijk andere namespaces op te geven bij het "xmlns:xsl" attribuut. Met andere namespaces zijn er andere opties mogelijk. Bij HTML elementen die niet tussen deze XSL elementen geplaatst worden, genereerd de XML parser een error. Wanneer we een HTML element willen laten herhalen voor bijvoorbeeld het aantal nodes dat de XML file bevat, dan gaan we op de plaats waar we de output willen hebben "<xsl:apply templates>" tags zetten. <xsl:apply-templates select="news/item"/>
In deze "xsl:apply templates" tag zetten we het XML element waarop het toegepast moet worden. In dit voorbeeld gaat de parser elk "item" element van het "news" element (hier toevallig de root) over lopen en daar een speciale opmaak op toepassen. Onder de bovenste "xsl:template" tag (waar de HTML pagina in zet) gaan we een nieuwe "xsl:template" aanmaken. Deze zal dan niet opnieuw de hele HTML pagina gaan opmaken, maar enkel het element waarvoor we kiezen (in ons voorbeeld: elk "item" element van het "news" element. <xsl:template match="news/item"> <xsl:value-of select="titel"/> <xsl:for-each select="paragraaf">
In onze voorbeeld template gaat per nieuws bericht de titel vetjes worden afgedrukt en elk "paragraaf" element binnen het "item" element zal in een paragraaf op de HTML pagina gezet worden. Alle "paragraaf" elementen worden met een For Each lus overlopen.
Karel Nijs
Website ES-International NV
92
9 Data weergave: XSL
Met een IF voorwaarde wordt gecontroleerd of het "figuur" element leeg is. Wanneer dit niet zo is, wordt de figuur weergegeven in de browser. We maken hier gebruik van de "xsl:attribute" tag van de bron van de figuur in te stellen.
9.3
Waarom
Waarom we precies XSL gebruiken kan kort gezegd worden: in het begin van deze scriptie heb ik uitgelegd waarom we gebruik maken van XML en wat de methodes zijn om de inhoud van de XML file in de browser te tonen. In dat hoofdstuk zijn we ook tot de conclusie gekomen dat XML in combinatie met ASP en XSL ons de beste keuze lijkt. We gaan namelijk via ASP de inhoud van de XML file simpel in de layout van de XSL file gieten.
9.4
Praktijk
9.4.1 News De News sectie van de website werkt met XML in combinatie met ASP en XSL. Wanneer we de betreffende pagina gaan opvragen, wordt er eigenlijk een request gedaan aan de ASP transformatie pagina voor beide documenten samen te voegen. self.parent.frames["middle"].location = "../ASP/transform.asp?x=nieuws";
Opbouw: De opbouw is al als demonstratie besproken in 9.2 XSL.
9.4.2 Product > Examples De combobox met product voorbeelden in het eerste frame van de Product examples sectie wordt ook met XSL uitgeschreven. <select name="cboCategory" id="cboCategory" onChange="openen()" size="1"> <xsl:apply-templates select="examples/applicatie"/>
We gaan de XML file, "prod_example.xml", overlopen en voor elk "applicatie" element een optie in de combobox maken. <xsl:template match="examples/applicatie">
Wanneer we dan kiezen voor een bepaalde optie wordt het event opgevangen met client side Javascript en wordt het juiste voorbeeld in de tweede frame geladen. function openen(){ self.parent.frames["mainFrame"].location = "../ASP/prod_examples.asp?app=" + document.frmAppExamples.cboCategory.value; }
In het tweede frame, waar de informatie en figuren van het gekozen voorbeeld komen, wordt dan met ASP de positie van het gewenste voorbeeld opgevangen en het voorbeeld weergegeven.
9.4.3 Modify Aan de administrator zijde van de website wordt er ook nog XSL gebruikt voor de bestaande nieuwsberichten en voorbeelden uit de XML files weer te geven. We gaan weer de XML tree overlopen en voor elk bericht/voorbeeld de titel in een hyperlink weergeven. De hyperlink heeft in het ene geval de actie van het gewenste bericht/voorbeeld in te laden in een formulier en in het andere geval het bericht/voorbeeld te verwijderen. <xsl:template match="examples/applicatie"> <xsl:attribute name="href"> modify_examples.asp?id=<xsl:value-of select="@id"/> <xsl:value-of select="titel"/>
Karel Nijs
Website ES-International NV
94
10 Optimalisatie
10 Optimalisatie 10.1 Inleiding Eens het de website af is, kan het debuggen en optimaliseren beginnen. Het debuggen is belangrijk omdat de website eerst goed getest moet worden voor ze online geplaatst wordt: we willen namelijk vermijden dat de gebruikers op error pagina's stoten bij gebruik. Omdat het testen en debuggen sterk aansluit bij het optimaliseren van de website, heb ik ze allen in mijn eindwerk opgenomen onder "Optimalisatie". Want is testen en debuggen eigenlijk niet het optimaliseren van de applicatie?
10.2 Gebieden Het optimaliseren is op verschillende gebieden doorgevoerd: code, design, werking, gebruiksgemak, …
10.2.1 Pagina's Het optimaliseren van de pagina's wordt eigenlijk al vanaf het begin doorgevoerd: tijdens het ontwerpen heb ik altijd rekening gehouden wat ik in welke folder plaats. Het administrator gedeelte is strik gescheiden van het publieke gedeelte. Ook de onderste laag van het 3 tier model, de Data Tier, is gescheiden van de webpagina's. Verder heb ik een aparte folders gehandhaafd voor elk type file: aparte folders voor figuren, HTML pagina's, ASP pagina's, XML, downloads, …
10.2.2 Browser Tijdens het ontwerpen van de website het ik telkens getest in Internet Explorer 6 omdat deze als enige en standaard browser geïnstalleerd stond op mijn systeem. Tijdens het optimaliseren echter, heb ik de website getest in Internet Explorer 5.0, Internet Explorer 5.5, Netscape 6 en Netscape 7. Met dit testen zijn er veel aanpassingen doorgevoerd geweest om de site met allen compatibel te houden. Karel Nijs
Website ES-International NV
95
10 Optimalisatie
10.2.3 Code De optimalisatie van de code bestond vooral uit het verwijderen van alle dummie code65 en het schikken van de code zodat ze wat leesbaarder wordt: wanneer men bijvoorbeeld eerst in TextPad een ASP pagina met HTML output in schrijft en deze daarna in DreamWeaver gaat openen, dan wordt de hele opmaak herschikt. Het optimaliseren van de code bestond ook uit het verwijderen van dubbele code: via "include" statements kon in de ASP pagina's veel code uitgespaard worden en met heb gebruik van externe Javascripts konden er ook functies hergebruikt worden. Een voorbeeld: de code voor een database connectie te maken telde 8 regels en deze kwam op 52 pagina's voor. Dit maakt 416 regels code. Bij het optimaliseren werd de code in een aparte include file gezet en de regel om naar deze pagina te verwijzen werd op elke pagina gezet: 8 + (52 * 1) = 60 regels code bleven er over.
10.2.4 Design In het begin van het ontwerpen van de site heb ik ook de layout van de website ontworpen, voor de verder ontwikkeling van de site heb ik mij vooral geconcentreerd op het administrator gedeelte en de goede werking daarvan. Na het afwerken van het administrator gedeelte heb ik, op advies van enkele andere ontwerpers, mijn interface eens opnieuw onder de loep genomen en enkel verbeteringen doorgevoerd. Vaak maken de details het geheel mooi, ook al zie je de details niet altijd meteen. Op verschillende pagina's heb ik bovenaan een "favicon" tag ingevoerd. Deze "favicon" tag gaat, wanneer de pagina toegevoegd wordt aan de Favorieten van de gebruiker, er een door ons opgegeven icoontje bijplaatsen.
Dit icoontje moet de maten 16x16 of 32x32 hebben voor op alle Windows platformen als icoon aanvaard te worden en moet in de root folder van onze website geplaatst worden. Opmerking: opdat dit icoontje geen fout zou genereren in de XSL files, moet de tag afgesloten worden met een "/".
Figuur 26 – FavIcon in adresbalk
Figuur 27 – FavIcon in Favorieten menu 65
code voor te testen en debuggen Karel Nijs Website ES-International NV
96
10 Optimalisatie
Bij het ontwerpen van de website werd mij ook gevraagd de bestaande voorbeelden van de Product examples sectie te behouden. Tijdens het optimaliseren heb ik deze foto's wat beter bewerkt en gezorgd dat ze geen afbraak doen aan de site. Ook de Product portfolio sectie was een doorn in het oog op de oude website: voor dit deel heb ik dan betere en recentere logo's gedownload van de klanten van ESInternational NV en in sommige gevallen zelfs de bedrijven gecontacteerd voor een werkbare versie van hun logo te verkrijgen.
10.2.5 Gebruiksgemak Tijdens het ontwerpen heb ik vaak met ES-International NV contact gehad om een voorlopige versie van de website te demonstreren. Met de aandachtspunten van hun heb ik voor elke pagina aan administrator zijde een korte handleiding geschreven die in pop-up geopend kan worden. Ook na overleg met mijn eindwerk promotor, Jan De Cooman, heb ik enkele wijzigingen in gebruiksgemak doorgevoerd.
10.2.6 Werking Opdat de website zoveel mogelijk bezoekers zou hebben, heb ik aan elke publieke pagina META tags toegevoegd. Met META kun je dingen zoals auteur, bedrijf, beschrijving, zoekwoorden, … opgeven. Deze META tags worden bovenaan de pagina, tussen de "head" tags gezet. <META http-equiv="content-type" content="text/html; charset=iso-8859-1"> <META name="author" content="Karel Nijs"> <META name="keywords" content="ES,international,alliance,monitoring systems,…"> <META name="description" content="ES-International is a company specialised in the Automation …">
Wanneer een zoekmachine de pagina gaat doorzoeken op een bepaald woord, dan gebeurd dit in de zoekwoorden, opgegeven in de META tags. De beschrijving die dan bij de zoekmachine getoond wordt, is de beschrijving opgegeven in de META tags.
Figuur 28 – ES-International NV in Google search engine
Karel Nijs
Website ES-International NV
97
10 Optimalisatie
Wanneer we willen dat een pagina niet opgenomen wordt door de zoekmachine, gaan we hiervoor een special tag en geen META tags invoegen. <META NAME="ROBOTS" CONTENT="NOINDEX">
Wanneer de robots op deze tag komen, gaat de pagina niet opgenomen worden in de zoekmachine. Het is ook goed dat deze pagina niet opgenomen wordt: wanneer iemand ze zou willen bezichtigen worden ze toch doorverwezen naar de pagina voor in te loggen.
10.2.7 Teller Zoals al eerder enkele malen vermeld, heb ik als teller een Netstat Basic teller gekozen. Netstat Basic tellers zijn gratis, bieden een grote hoeveelheid aan informatie aan over de bezoekers en hebben als enige voorwaarde dat het icoontje zichtbaar op de webpagina geplaatst moet worden. Omdat dit icoontje nogal in het oog springt en lelijk oogt, heb ik het geplaatst op de "Default.asp" pagina, omdat deze pagina onmiddellijk redirect bij het inladen, is het icoontje nooit zichtbaar, maar wordt er toch een bezoeker bijgeteld. De statistieken van deze teller zijn te bezichtigen via de Database > Logs sectie in het administrator gedeelte.
Karel Nijs
Website ES-International NV
98
Algemeen besluit
Algemeen besluit ES-International NV kan nu volop haar nieuwe site beginnen te gebruiken, al raad ik toch aan om in de toekomst van server provider te veranderen of zelf een server op te zetten. Wanneer we zelf een server zouden opzetten, dan moeten we ons niet houden aan de nu door KPN soms raar gestelde regels (bijvoorbeeld het niet kunnen wijzigen van de rechten van een map met een FTP client). Met onze eigen server zouden we ook de FTP account kunnen beheren en zo enkel aan de juiste personen toegang verlenen tot de bestanden. Deze website was fijn om te maken en ik hoop dat ik in de toekomst nog contact zal houden met ES-International NV en dit niet alleen op gebied van web development, maar ook om te overwegen om een server op te zetten.
Karel Nijs
Website ES-International NV
99
Figurenlijst
Figurenlijst FIGUUR 1 - BAKKENSORTERING IN DELHAIZE ................................................................................................... 11 FIGUUR 2 - ONTWIKKELAAR WEBSITE .............................................................................................................. 12 FIGUUR 3 - T ABEL GEBRUIKTE BROWSERS JANUARI 2002 - 2003 ....................................................................... 21 FIGUUR 4 - GRAFIEK GEBRUIKTE BROWSERS JANUARI 2002 - 2003 .................................................................... 21 FIGUUR 5 - GEBRUIKTE RESOLUTIES JANUARI 2002 - 2003 ................................................................................ 23 FIGUUR 6 - T ABEL GEBRUIKTE BROWSERS JANUARI 2002 - 2003 ....................................................................... 21 FIGUUR 7 - HET 3 TIER MODEL ......................................................................................................................... 25 FIGUUR 8 - T ABEL TBLUSERS ........................................................................................................................... 28 FIGUUR 9 - T ABEL TBLUSERINFORMATION ....................................................................................................... 29 FIGUUR 10 - T ABEL TBLSEARCH_KEYWORDS ................................................................................................... 29 FIGUUR 11 - T ABEL TBLLOGS .......................................................................................................................... 30 FIGUUR 12 - ER DIAGRAM ............................................................................................................................... 21 FIGUUR 13 - DEMONSTRATIE REFERENTIËLE INTEGRITEIT ................................................................................. 21 FIGUUR 14 - XML ELEMENTEN VS. ATTRIBUTEN ............................................................................................... 37 FIGUUR 15 - REQUEST EN RESPONSE VAN EEN PAGINA....................................................................................... 52 FIGUUR 16 - VERSIES IIS EN ASP..................................................................................................................... 54 FIGUUR 17 - DE ONTVANGEN E-MAIL................................................................................................................ 63 FIGUUR 18 - DE INHOUD VAN DE ONTVANGEN E-MAIL ....................................................................................... 62 FIGUUR 19 - DE COMBOBOX MET PRODUCT VOORBEELDEN ............................................................................... 63 FIGUUR 20 - DE DOWNLOADS SECTIE ............................................................................................................... 66 FIGUUR 21 - INLOGGEN .................................................................................................................................... 69 FIGUUR 22 - LEVEL 0 EN 1 NAVIGATIE .............................................................................................................. 72 FIGUUR 23 - LEVEL 2 NAVIGATIE ..................................................................................................................... 72 FIGUUR 24 - SLEUTEL WOORDEN BEKIJKEN....................................................................................................... 80 FIGUUR 25 - LOGS BEKIJKEN ............................................................................................................................ 21 FIGUUR 26 – FAVICON IN ADRESBALK .............................................................................................................. 96 FIGUUR 27 – FAVICON IN FAVORIETEN MENU ................................................................................................... 96
Karel Nijs
Website ES-International NV
100
Woordenlijst
Woordenlijst In chronologie van voorkomen: uploaden
online plaatsen van bestanden
ASP
Active Server Pages een scripting taal voor dynamische websites te ontwikkelen
MCT
Multimedia en Communicatie Techonologie
HTML
HyperText Markup Language standaard taal om websites in te ontwikkelen
Javascript
client side scripting taal. Standaard ondersteunt door bijna elke browser.
debuggen
het zoeken en verbeteren van fouten
CDONTS
dit is een Microsoft component gebruikt voor e-mails te zenden.
UDL
Universal Dat Link wordt gebruikt om een connectie met een database te leggen
home page
de website van een bepaald bedrijf of persoon
content
inhoud van de website
GUI
Global User Interface de werkomgeving die de gebruiker te zien krijgt
XML
Extensible Markup Language een taal gebruikt voor het beschrijven van data
record
rij met gegevens in een tabel
PHP
Personal HomePage scripting
Karel Nijs
Website ES-International NV
101
Woordenlijst
een scripting taal voor dynamische websites te ontwikkelen, de tegenhanger van ASP DTD
Document Type Definition de voorwaarden de opstelling van een XML file
ID
Identifier wordt gebruikt om een element aan te spreken
hosten
het aanbieden van webruimte online
string
een opeenvloging van letters, bv. "woord"
trimmen
de spaties voor- en achteraan de string verwijderen
ADODB
ActiveX Data Objects Database via deze Windows component kunnen we data benaderen
FSO
File System Object met dit object kunner er fysiche bewerkingen zoals files en folders aanmaken op de server uitgevoerd worden
cracken
inbreken of kraken
XSL
Extensible Stylesheet Language wordt gebruikt als CSS voor XML
CSS
Cascading Style Sheet de opmaak van een HTML pagina
Karel Nijs
Website ES-International NV
102
Bronnenlijst
Bronnenlijst Geschreven bronnen Boeken •
Brian Francis, Alex Homer, Chris Ulman, IE5 Dynamic HTML, wrox, 551 blz.
•
Mark Birbeck, Jason Diamond, Jon Duckett, Oli Gauti Gudmundsson, Pet Kobak, Evan Lenz, Steve Livingstone, Daniel Marcus, Stephen Mohr, Nikola Ozu, Jonathon Pinnock, Keith Visco, Andrew Watt, Kevin Williams, Zoran Zaev, Professional XML 2nd Edition, wrox, 1267 blz.
•
Richard Anderson, Chris Blexrud, Andrea Chiarelli, Daniel Esposito, Alex Homer, Dino Esposito, Brian Francis, Matthew Gibbs, Bill Kropog, Craig McQueen, George Reilly, Simon Robinson, John Schenken, Dean Sonderegger, Dave Sussman, Professional Active Server Pages 3.0, wrox, 1277 blz.
•
Arman Danesh, Teach Yourself JavaScript in a Week, Sams.net Publishing, 533 blz.
Cursussen
Karel Nijs
•
De Cooman Jan, 2000, JavaScript, slides
•
De Cooman Jan, 2001, Document Object Model, slides
•
De Cooman Jan, 2001, Extensible Markup Language, slides
