Opzet van een internationale E-commerce site

Departement Provinciale Industriële Hogeschool

Opzet van een internationale E-commerce site

1

Eindwerk aangeboden door Vandenabeele Tomas voor het behalen van de graad van Gegradueerde in de Multimedia en Communicatie Technologie Academiejaar 2001-2002

Departement Provinciale Industriële Hogeschool

Opzet van een internationale E-commerce site

2

Eindwerk aangeboden door Vandenabeele Tomas voor het behalen van de graad van Gegradueerde in de Multimedia en Communicatie Technologie Academiejaar 2001-2002

Voorwoord Na een niet te onderschatten opleiding van 3 jaar Graduaat Multimedia en Communicatietechnologie is het zover. De laatste beproeving. Vele opdrachten zijn hieraan voorafgegaan en hebben allemaal bijgedragen tot het voltooien van mijn eindwerk. Dit eindwerk handelt over het opzetten van een E-commerce-site voor wereldwijde verkoop van tapijten. Om dit werk te kunnen schrijven heb ik dus zelf zo ‘n applicatie moeten verwezenlijken. Het resultaat is te bekijken op www.rugs-carpets.biz en verliep in opdracht van Boomtex. Dit werk kan een leidraad zijn voor ontwikkelaars die iets gelijkaardig willen doen. Dit eindwerk is het resultaat van een jaar hard werken. Dit heb ik mede te danken aan de steun en inzet van de mensen rondom mij. Eerst en vooral wil ik de heer Koen Devos bedanken die veel van zijn kostbare tijd heeft opgeofferd bij het uitdenken van oplossingen bij problemen en om de bedrijfsvisie goed over te brengen. Hij had het volste vertrouwen in mij en in de moeilijke momenten heeft hij me altijd gesteund. Ook wil ik mijn promotor, de heer Hans Ameel, bedanken die altijd voor me klaarstond wanneer ik met moeilijke dilemma’s zat en bij het oplossen van technische problemen. Vooral ook wil ik mijn ouders en vriendin bedanken die altijd optimistisch gebleven zijn en mij door dik en dun gesteund hebben. Graag zou ik ook mijn vrienden en collega-MCTstudenten willen bedanken voor de hulp en nodige ontspanning in het afgelopen schooljaar. Pierre Huyssentruyt en Ruth Bossuyt wil ik ook bedanken voor de technische informatie betreffende de tapijten, de steun en om mijn project geregeld te evalueren. Tenslotte wil ik het volledige MCT-team bedanken voor de prachtige, boeiende opleiding die wij dankzij u konden beleven. Vandenabeele Tomas

4

Inhoudstafel Voorwoord .................................................................................................................. 3 Inhoudstafel ................................................................................................................ 4 Inleiding ...................................................................................................................... 6 1 Voorstudie – Research......................................................................................... 7 1.1 Bruikbare technologieën en diensten ........................................................... 7 1.1.1 De database.......................................................................................... 7 1.1.2 Programmeerwerk................................................................................. 7 1.1.3 Domeinnaam......................................................................................... 7 1.1.4 Webserver............................................................................................. 8 1.1.5 Beveiliging en betaling .......................................................................... 8 1.1.6 Transport............................................................................................... 8 1.1.7 GUI en grafische elementen.................................................................. 8 1.1.8 Orderafhandeling .................................................................................. 9 2 Concept.............................................................................................................. 10 2.1 Intern .......................................................................................................... 10 2.2 Extern......................................................................................................... 10 2.3 Uitwerking .................................................................................................. 10 2.3.1 Database............................................................................................. 10 2.3.2 Programmeerwerk............................................................................... 10 2.3.3 Domeinnaam....................................................................................... 11 2.3.4 Keuze webserver en hosting ............................................................... 11 2.3.5 Beveiliging en betaling ........................................................................ 11 2.3.6 Transport............................................................................................. 11 2.3.7 Grafische User Interface ..................................................................... 12 2.3.8 Grafisch............................................................................................... 12 2.3.9 Orderafhandeling ................................................................................ 12 2.4 Grafische voorstelling van het concept....................................................... 13 2.5 Te realiseren workpackages ...................................................................... 14 2.5.1 De database........................................................................................ 14 2.5.2 Het programmeerwerk ........................................................................ 14 2.5.3 Externe partners.................................................................................. 14 2.5.4 GUI en grafisch ................................................................................... 15 2.5.5 Varia.................................................................................................... 15 2.6 Planning ..................................................................................................... 15 3 Implementatie .................................................................................................... 17 3.1 Domeinnaam en Hosting............................................................................ 17 3.1.1 Domeinnaam....................................................................................... 17 3.1.2 Hosting ................................................................................................ 18 3.1.3 MyDomain.com ................................................................................... 19 3.2 Transport.................................................................................................... 19 3.2.1 De FedExDatabase............................................................................. 20 3.3 De hoofddatabase ...................................................................................... 21 3.3.1 Verzamelen van informatie.................................................................. 21 3.3.2 Wat moet er nu in de database komen? ............................................. 23 3.3.3 Soorten Relaties.................................................................................. 23 3.3.4 Het ER-diagram .................................................................................. 24

5

3.3.5 De tabellen .......................................................................................... 24 3.3.6 Relationeel model ............................................................................... 26 3.3.7 Het opvullen/aanpassen van de database .......................................... 26 3.4 Bank Card Company .................................................................................. 28 3.5 Implementatie van de website .................................................................... 29 3.5.1 Iets over de gebruikte talen ................................................................. 29 3.5.2 Schematisch overzicht van de navigatie ............................................. 30 3.5.3 Vertalen van de navigatie naar een framestructuur............................. 33 3.5.4 Het uitvergroten van de afbeeldingen (Thumb.js) ............................... 33 3.5.5 Global.asa ........................................................................................... 35 3.5.6 Het winkelsysteem .............................................................................. 36 3.5.7 Accountbeheer .................................................................................... 42 3.5.8 Het betaalsysteem (in samenwerking met banksys) ........................... 45 3.5.9 Overige pagina’s ................................................................................. 51 3.6 Grafisch...................................................................................................... 51 Besluit....................................................................................................................... 53 Bijlage....................................................................................................................... 54 1. Aansluitingsaanvraag Bank Card Company ...................................................... 54 3. Index.css ........................................................................................................... 57 2. Code van de confirmatie (conf.asp)................................................................... 61 Figurenlijst ................................................................................................................ 64 Verklarende woordenlijst .......................................................................................... 65 Bronnenlijst............................................................................................................... 66

6

Inleiding Tegenwoordig bestaan er al heel wat bedrijven die aan verkoop op afstand doen. E-comerce is één van die mogelijkheden. Er worden vooral boeken, cd’s en software te koop aangeboden op het internet. Mede omdat daar veel beoordelingen worden over geschreven. Nu deze methode van verkopen al wat meer ingeburgerd raakt, bedacht de heer Koen Devos, mentor van mijn eindwerk, de idee om zijn producten(tapijten) te koop aan te bieden op internet. Het doel van dit eindwerk is het opzetten van een volledig uitgebouwde E-commerce site voor de wereldwijde verkoop van tapijten. Dit eindwerk is extern en wordt gemaakt voor Devos-Caby / Boomtex. Boomtex verkoopt in tegenstelling tot Devos-Caby rechtstreeks aan particulieren. Daar in E-commerce meestal aan particulieren verkocht wordt, valt mijn eindwerk onder de hoede van Boomtex. Aangezien de maatschappelijke zetel van Boomtex zich bij Devos-Caby bevindt, verliep de eindwerkperiode vooral bij Devos-Caby. Voor de implementatie van het geheel sta ik er alleen voor. De heer Koen Devos zal me wel met raad en daad bijstaan bij het nemen van kritische beslissingen. Op welke manier ik dit project tot een goed einde zal brengen, is bijna volledig vrij. Het moet gewoon financieel haalbaar zijn en winstgevend op een termijn van 2 jaar. Ook werd er gevraagd om de database in Access te maken zodanig dat de mensen binnen het bedrijf later zelf eventueel aanpassingen kunnen doen. Een andere vereiste is dat het op gehuurde webservers gebeurd zodanig dat er geen risico bestaat dat het bedrijfsnetwerk in de problemen komt door één of andere reden. Het moet voor eender wie mogelijk zijn om een bestelling te plaatsen, net zoals een boek of CD door eender wie kan besteld worden. Het is de bedoeling dat de klant in een heel korte tijd zijn bestelling kan maken. De vervoerskosten moeten onmiddellijk in rekening worden gebracht en de klant kan betalen met VISA of Mastercard. Wanneer de transactie geslaagd is wordt de betaling met de koerierdienst direct afgehandeld en kan die koerierdienst diezelfde dag nog om de bestelde producten komen. Bij de ontwikkeling zal ik vooral trachten gebruik te maken van ASP omdat ik hier al enige ervaring mee heb. Dit gecombineerd met clientside javascript en HTML zou moeten voldoende zijn om tot een krachtige toepassing te komen.

Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

7

1 Voorstudie – Research 1.1 Bruikbare technologieën en diensten 1.1.1 De database De database ontwikkelen in Access, MySQL of SQLserver? De database vormt als het ware de basis van de inhoud van het E-commerce project. Het bevat de klantgegevens en de gegevens van de verschillende producten. De connectie tussen webapplicatie en webserver moet vlot verlopen. De database moest vooropgesteld gemakkelijk aanpasbaar zijn voor mensen binnen het bedrijf met weinig PC-ervaring en mocht geen extra kost inbrengen. Er wordt nog bekeken of er een stock wordt bijgehouden omdat er zwaar zal moeten worden geïnvesteerd in voorraad en ruimte.

1.1.2 Programmeerwerk Programmeren in ASP (VB-Script, Java-Script of C-Script), ASP.Net, PHP of JSP? Hier moest ik rekening houden met mijn eigen kunnen en kennis en ging mijn voorkeur al van in het begin uit naar ASP en ASP.net omdat ik daar het meest voeling mee heb. Daarbij aansluitend komt dan ook de vraag welke editor er gebruikt zal worden. Er bestaan vele soorten editors, ik geef een korte toelichting bij 2 meest gebruikte (op MCT vlak): • Textpad: o Goedkope oplossing o Geen intellisense o Krachtige editor o Geen debug functie o Geen bibliotheken o Redelijk overzichtelijk • Microsoft Visual InterDev: o Intellisense o Debugging mogelijk o Onderdeel van Visual Studio o Bevat bibliotheken en een krachtige helpfunctie o Heel overzichtelijk

1.1.3 Domeinnaam .com of .biz? .be is uitgesloten daar we internationaal te werk gaan. Met de komst van de nieuwe extensie, .biz, zijn E-commerce sites niet meer aangewezen op .com alleen. Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

8

.biz Is een goed alternatief wanneer de vooropgestelde .com’s al bezet zijn. Het nadeel is dat .biz nog niet zo bekend is als .com en dus minder vertrouwen wekt.

1.1.4 Webserver Kiezen voor IIS of Apache? Mijn aangewezen PC bevat Windows 2000. De applicatie moet extern draaien. Niet op een eigen webserver dus, maar op een gehuurde server. Dit uit enerzijds uit veiligheidsoverwegingen en anderzijds om een snelle verbinding te garanderen. Dus ging ik op zoek naar betaalbare, veilige webservers.

1.1.5 Beveiliging en betaling De beveiliging van gevoelige informatie (onder andere kredietkaartgegevens) zelf voorzien of overlaten aan een externe firma? Hier moeten we er rekening mee houden dat het gaat om een internationaal project en dat uitstraling dus heel belangrijk is. Iedere blunder op vlak van beveiliging kan fataal zijn voor een beginnend E-commerce project. (nationale) Bedrijven die hiervoor kunnen instaan zijn: Ogone: • Goedkoop • Minder bekend (internationaal) • Niet uitbreidbaar naar SET en banxafe modules Banksys: • Redelijk duur • Bekend • SET – Banxafe mogelijkheden (zonder extra kosten)

1.1.6 Transport Ook hier heerst een verscheidenheid aan mogelijkheden (FedEx, De Post, DSL, …) Het bedrijf heeft al een relatie en voordelen met FedEx. Ook biedt FedEx een web-API aan om de orders rechtstreeks aan hen door te geven. Toch moeten we bekijken of het transport van de goederen vlot en efficiënt verloopt met FedEx. De klant zal er niet tevreden mee zijn wanneer hij 6 weken moet wachten op een tapijt (het zijn geen superexclusieve producten).

1.1.7 GUI en grafische elementen Hoe gaan we de grote bitmap-bestanden (een 120-tal) van circa 1 MB omzetten naar kleine gif-bestanden (2 keer Æ thumbnails)? Dit moet in één keer kunnen gebeuren met een batch. Het enige programma dat dit kan en waarvan ik kennis heb, is Adobe Photoshop.


9

De GUI moet overzichtelijk zijn en een internationale, zakelijke uitstraling hebben. Het is ook de bedoeling om in een mum van tijd te bestellen, zonder al te veel tussenstappen. Er mag in geen geval verwarring ontstaan bij de eindgebruiker.

1.1.8 Orderafhandeling Wordt er een dagelijks een update gedaan van de orderdatabase? Komt ieder order apart binnen per bestelling?


10

2 Concept 2.1 Intern • • •

Het bedrijf beschikt over een licentie van Office 2000. Het bedrijf beschikt over een licentie van CuteFTP Het bedrijf beschikt over een licentie van Photoshop.

Mijn toegewezen PC is een Pentium III, 1000MHz met 128 MB RAM en is uitgerust met IIS.

2.2 Extern Wat is er zeker van buitenaf nog nodig? • Een (beveiligde) webserver die niet aan het bedrijfsnetwerk hangt. • Transport van de goederen. • Een SSL – verbinding op de betaalpagina’s • Kredietkaartvalidering en processing

2.3 Uitwerking 2.3.1 Database Waarom wordt er nu zonder stock gewerkt? Wanneer we alle aangeboden tapijten in alle kleuren optellen komen we aan 111 stuks. Deze zijn beschikbaar in 6 verschillende maten, dat maakt al 666 stuks. Wanneer we constant 10 stuks in stock willen houden komen we aan een totaal van 6660 stuks. Da vergt een grote opslagruimte en een grote investering van Boomtex aan Devos-Caby. Aangezien er een Office 2000 licentie voor handen was, kies ik voor Access. De mensen binnen het bedrijf zijn vertrouwd met de Office omgeving en moest de database enorm uitbreiden kan er later eenvoudig geëmigreerd worden naar SQL server.

2.3.2 Programmeerwerk Ik programmeerde in Textpad (Visual InterDev enkel daarom aanschaffen zou zonde zijn van het geld). In school wordt textpad ook veel gebruikt. Daarom kan ik er goed mee overweg. Het spreekt voor zich dat ik geen softwarepakket dien te gebruiken voor mijn winkelwagentje (we zijn ten slotte mct’ers). Programmeren gebeurt in ASP (VBscript) omdat dit mij het meest vertrouwd is en omdat daar veel informatie over te vinden is ivm E-commerce. Aanvankelijk zou de dot net syntax gebruikt worden, maar daar deze nog in een betatestfase zat in het begin van het schooljaar heb ik dan maar ASP gekozen. Uiteraard zal hier ook HTML - Javascript en CSS nodig zijn. Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

11

2.3.3 Domeinnaam Het registreren van een “.com” domeinnaam wordt wat bemoeilijkt doordat de aantrekkelijke namen onbeschikbaar zijn. Daarom zullen wij de komst van de “.biz” – extensie afwachten. De “.biz” – extentie slaat op “business” en komt in ons geval wel goed uit. Het zal in het begin wel wat moeilijk zijn om bekend te raken, maar dat komt wel.

2.3.4 Keuze webserver en hosting De keuze van de webserver was vooraf al bekend: IIS. Dit omdat ik meest met de Windows omgeving vertrouwd ben en er Windows 2000 op mijn aangewezen pc stond. Qua hosting bedrijven heb ik veel opties. Met Brinkster had ik al enige ervaring. Ook mensen uit de bedrijfswereld raden mij dit bedrijf sterk aan. Punten die mij extra beïnvloedden: • Goedkope oplossing (13$ setup; 13$ per maand) • FTP toegang • Databasebeveiliging en Access - ondersteuning • Uitbreidbaar met extra modules tegen betaling • 60 MB webruimte • snelle server • IIS • Uitstekende helpdesk

2.3.5 Beveiliging en betaling De kredietkaartvalidering en processing zullen we ook over laten aan een extern bedrijf. Dit omdat dit toch delicate zaken zijn om zelf te gaan valideren. Aanvankelijk zou Element daar voor instaan, maar hun modules hebben zij doorgegeven aan Banksys. Banksys laat vele betaalplatformen toe, en dit voor dezelfde prijs. Zij zorgen ook voor een beveiligde SSL verbinding wanneer de klant zijn kredietkaartgegevens invult, dus daarvoor moet ook al geen extra bedrijf meer voor worden gevonden. Om betalingen te mogen aanvaarden moeten wij eerst goedkeuring krijgen van Bank Card Company. Om die goedkeuring te krijgen, moeten nog een aantal formaliteiten doorlopen worden.

2.3.6 Transport Het transport van de tapijten gebeurt met FedEx omdat er al een contract loopt met FedEx onder Devos-Caby. De FedEX ship API zal waarschijnlijk niet worden gebruikt. Brinkster zal dit hoogst waarschijnlijk niet toelaten op hun servers. Ten tweede wordt er toch zonder stock gewerkt en dus moet er pas iets worden afgehaald wanneer het uit productie is (of in de stock van Devos-Caby aanwezig) en niet wanneer er besteld wordt.


12

De persoon van Devos-Caby die nu verantwoordelijk is voor FedEx zal de bestellingen van de E-commerce site er ook bijnemen. Wanneer een besteld product klaar is wordt dit van productie uit naar die persoon gemeld. De vervoersprijzen liggen vast in een excellblad, specifiek opgemaakt voor Devos-Caby. Die prijzen zijn afhankelijk van het land van bestemming, het gewicht en de grootte van het tapijt. Aan sommige landen kan of wil FedEx ook niet leveren (zoals bv Afghanistan). Het spreekt voor zich dat wij daarin moeten volgen en deze landen niet opnemen in onze bestelformulieren.

2.3.7 Grafische User Interface De GUI moet zeer duidelijk en vlot zijn aangezien ons beeld van de eindgebruiker eerder naar een ‘computerleek’ gaat dan naar een ‘computerfreak’. Ingewikkelde navigatiesystemen zijn hier dus niet van doen.

2.3.8 Grafisch De bronbestanden van de tapijten die ik binnenkrijg zijn bmp-bestanden in 5 kleuren (het aantal kleuren in een tapijt) deze kleuren moeten ‘door elkaar’ worden gesmeten uit veiligheidsoverwegingen. Concurrerende bedrijven mogen deze bestanden in geen geval in 5 kleuren te zien krijgen. Met Photoshop (waar er al een licentie van is binnen het bedrijf) zal ik de grote bmp-bestanden dus verkleinen en opslaan als gif-formaat en dit in meer dan 5 kleuren. Hiervoor wordt een macro opgenomen die dan wordt uitgevoerd op een map. Om de site vlot te laten laden, werken we met zoveel mogelijk HTML-objecten om niet te veel extra figuren in te moeten laden. De opmaak van de HTML gebeurt allemaal in één CSS document. Dit zorgt voor aanpasbaarheid en herbruikbaarheid.

2.3.9 Orderafhandeling Er zal, bij een geslaagde transactie, een orderbevestiging gestuurd worden via e-mail naar de klant. In die orderbevestiging zullen de details staan van de producten die hij besteld heeft. Diezelfde e-mail wordt in BCC naar de salesafdeling gestuurd, die dan rechtstreeks naar productie gaat. Achteraf moet dan, door dezelfde persoon die instaat voor FedEx, de betaling volbracht worden in de backoffice van Banksys.


13

2.4 Grafische voorstelling van het concept

Database • Structuur • Invulformulieren • Opvullen

Externe partners • Domeinnaam (VeriSign) • Hosting (Brinkster) • Transport (FedEx) • Betaling (Banksys)

Website • Structuur • Navigatie • Inhoud • GUI • Klantgegevens • Winkelwagentje • Bedrijfsinformatie • Opmaak

Grafisch • Bitmaps verkleinen • Navigatieverfraaiiing Orderafhandeling • Orderemail • Updaten van de database • Productie in gang zetten • Backoffice afhandeling • Transport

Figuur 1: Grafische voorstelling van ons project


14

2.5 Te realiseren workpackages 2.5.1 De database • • • • •

Verzamelen van alle mogelijke informatie die eventueel in de database zal moeten komen. Bekijken welke gegevens er zo allemaal in de database zullen moeten komen. Weer te geven gegevens en de te verwerken gegevens vertalen naar een gestructureerde database(tabellen en relationeel model). Formulieren maken met bijhorende query’s om op een eenvoudige manier de nieuwe producten in de database in te voegen (oude verwijderen). De gegevens in de tabellen brengen aan de hand van de gemaakte formulieren.

2.5.2 Het programmeerwerk Alles wordt geprogrammeerd in ASP (vbscript), HTML en javascript. • De navigatie schematisch uittekenen • Het maken van een winkelwagentje. o De productenpagina. o Het winkelwagentje. o De communicatie tussen beide pagina’s • Het maken van een functie om de producten groter te bekijken (thumbnails). • Het maken van een Signup/Login/Logout-gedeelte. • Validatie van de klantgegevens en paswoorden. • De pagina’s maken die moeten communiceren met de Banksys module. • Orderafhandelingspagina maken: email versturen naar de klant en de database updaten. • De navigatiepagina’s maken • De Home- en Companypagina’s maken

2.5.3 Externe partners • • • • •

Het registreren van 1 of eventueel meerdere ‘.biz’-domeinnamen. Opzetten van een Premium account bij Brinkster. Bespreken met FedEx of het geen probleem is om op de account van Devos-Caby uit te voeren onder Boomtex. Kijken of er eventueel tussenoplossingen mogelijk zijn met de FedEx ship API. De nodige documenten verzamelen bij Devos-Caby / Boomtex om door te sturen naar Bank Card Company. Een aanvraag indienen bij Banksys om een account op te zetten bij hen.


15

2.5.4 GUI en grafisch • • • • •

Aanmaken van een css-bestand dat in elke pagina opgevraagd kan worden Schrijven van 2 macro’s in Photoshop: o één voor de kleine weergaven(thumbnails) in ± 30 kleuren. o één voor de grote weergaven, ook in ± 30 kleuren. Aanpassen van de logo’s van Banksys en van Fedex zodanig dat ze in het geheel passen. Het tekenen van een logo en andere zaken (verfraaiing van de navigatie). Zorgen voor een consistent geheel (herkenbaarheid) in zowel het uitzicht van de GUI als in de te versturen mails.

2.5.5 Varia • • •

Verzamelen van bedrijfsinformatie om op de Company- en Homepage te zetten. Testen en laten testen door derden Bekijken hoe de backoffice in elkaar zit (de betalingsafhandeling).

2.6 Planning De volgorde van plannen kan evengoed lichtjes afwijken van deze hier. De volgorde die ik hier aangeef is enkel een richtlijn waaraan ik mij zal proberen te houden. 1. 2.

3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

Het vastleggen van de domeinnaam (namen). Verzamelen van de documenten die nodig zijn om goedkeuring te krijgen bij Bank Card Company. Deze documenten direct opsturen met de aansluitingsaanvraag (het kan lang duren vooraleer er goedkeuring komt) Contact opnemen met FedEx om een afspraak te regelen. Schematisch uittekenen van de navigatie. Verzamelen van alle gegevens die in de database zullen moeten komen. Weer te geven gegevens en de te verwerken gegevens vertalen naar een gestructureerde database(tabellen en relationeel model). Formulieren en query’s maken in Access om de tabellen op te vullen. De tabellen opvullen (met de aangemaakte formulieren). Excellblad van FedEx vertalen naar een Access database. Macro’s in Photoshop schrijven en ze laten batchen op de bmp’s. Het programmeren van de productenpagina, winkelwagentje en thumbnailfunctie. Programmeren van een SignUp/Login-gedeelte + validatie. Programmeren van een pagina voor mensen die hun paswoord vergeten zijn. Een Premium-account opzetten bij Brinkster. Een afspraak regelen met iemand van Banksys om wat meer informatie te verkrijgen in verband met hun betaalmodule. Schrijven van de orders naar de database (net voor betaling). Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

16

17. Schrijven van de pagina’s die met de Banksysmodule zullen moeten communiceren. 18. De orderafhandeling verzorgen(e-mail versturen naar de klant en naar Boomtex, winkelwagentje legen, database updaten). 19. De navigatie ineensteken. 20. De Home- en Companypagina maken. 21. Het CSS bestand overzichtelijk opstellen. Zorgen voor een eerder klassieke weergave door gebruik te maken van eenvoudige objecten en klassieke lettertypen. 22. Tekenen van een logo, bewerken van de Banksys en FedEx logo’s. 23. In de mate van het mogelijke, promotie maken voor de website. 24. Testen en laten testen van de applicatie. 25. Vereenvoudigen van de werkende code en commentaar voorzien.


17

3 Implementatie 3.1 Domeinnaam en Hosting 3.1.1 Domeinnaam Al van in het begin van het schooljaar kreeg ik weet van de nieuwe domeinextensie “.biz”. .biz Staat voor business zoals .com voor commercial staat. De nieuwe extensie kwam als geroepen omdat de aantrekkelijke .com’s al niet meer vrij waren. Het toekennen van de biz domeinen gebeurde wel vrij eigenaardig: Je kon van eind september 2001 een optie nemen op een .biz domein voor 2$. Daarbij moest je vertellen waarvoor je dit domein later zou gebruiken. Het was mogelijk dat meerdere bedrijven optie namen op hetzelfde biz-domein. Bij de lancering (gepland midden november 2002) zou dan, wanneer meerdere bedrijven optie zouden nemen op hetzelfde domein, willekeurig (at random!) de toekenning gebeuren. Ik nam, in samenspraak met Koen Devos, optie op 3 domeinnamen: www.rugs-carpets.biz, www.rugs-online.biz en www.carpetsonline.biz. Dit om zeker te spelen. Om veiligheidsredenen hebben we dit bij een erkend bedrijf gedaan: VeriSign Network Solutions. De lancering van de nieuwe extensie heeft wel nog op zich laten wachten tot begin maart. De uiteindelijke prijs per domeinnaam bedroeg dan 35$/jaar per domein. De domeinen waar we optie op namen waren bij de lancering nog allemaal vrij. Dus ofwel hebben geen andere bedrijven optie genomen op deze namen, ofwel hebben we geluk gehad. De opdrachtgever wenst alle 3 de namen te kopen, en dus was het enkel nog een kwestie van de transactie te vervolledigen. Na de transactie kregen we toegang tot een sectie waar we (nu nog altijd) onze domeinen kunnen beheren.

Figuur 2: Beheersectie .biz domeinnamen Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

18

3.1.2 Hosting De hosting doen we niet zelf, zoal reeds aangegeven.We doen hiervoor een beroep op Brinkster (www.brinkster.com). We hebben wel gewacht tot april om voor de betalende account te kiezen omdat tot dan alles nog in testfase zat. Om tot dan te testen heb ik beroep gedaan op IIS en op de gratis diensten van Brinkster. De opzet bij van een account bij Brinkster is heel simpel: invullen van enkele formaliteiten in webformulieren. Bij de opzet van de betalende account konden we dan kiezen om de bestanden vanop de gratis account te verhuizen naar de betalende. Ook mogen we een geregistreerde .com aangeven (een .biz was ook goed blijkbaar). We kozen voor www.rugscarpets.biz. Wel moesten we dan bij de beheersectie van onze domeinnamen de nameservers veranderen naar deze die we van Brinkster hebben opgekregen (NS1.EWEBCITY.COM en NS2.EWEBCITY.COM). Extra opties kunnen ook direct aangevraagd worden tegen een extra vergoeding per maand (SSL gebruik, SQL server database, extra ruimte, extra emailaccounts, extra domeinnaam ….) De standaardopzet kost 13$, per maand betalen we nog eens 13$. Onze site is gehost op een “redundant architecture”. Dat betekent dat er 2 servers zijn in plaats van één. Als nu één van de 2 servers een probleem heft, kan de andere dit opvangen. Elke server heeft de volgende kenmerken: • Dual Intel Pentium III 1 Ghz Processors • 500 MB ECC RAM • Windows 2000 Server • IIS 5 Andere zaken die inbegrepen zijn in de prijs: • 60 MB aan Webruimte • 6000 MB/maand Data Transfer (bandbreedte) • 25 POP3 Email Accounts op ons domein ([email protected]) • FTP gebruik mogelijk. (CuteFTP, WSFTP, …) • ASP.NET / .NET Framework v1, Mobile Internet Toolkit v1 (voor in de toekomst?) • ASP 3.0 ondersteuning (ADO, FileSystemObject, global.asa) • XML 4.0 Installed more info Wij hebben voorlopig nog geen extra features nodig. Om de andere geregistreerde namen te kunnen gebruiken heb ik gebruik gemaakt van MyDomain.com (zie verder). Het uploaden van bestanden kan webbased gebeuren of met FTP. Ik verkies FTP en gebruik hiervoor CuteFTP, waarvan het bedrijf een licentie in handen heeft. Een groot voordeel bij de Premium account tov de free account is volgens mij de database die op dezelfde hoogte staat al de webroot. Dit maakt de database een stuk veiliger. Probeer nu maar eens de locatie te vinden van de database… De databasedirectory is ook de enige directory waar de eindgebruiker schrijfrechten heeft. Bij het inloggen op de website van Brinkster kom je ook hier in een beheermodule waar je gegevens kan veranderen. Ik zal hier wat dieper ingaan Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

19

op de Email Manager. Daar kunnen we tot 25 POP3 accounts aanmaken. Ik heb er voorlopig 4 aangemaakt en 3 aliassen. Een alias is een account die automatisch naar een ander adres forward wanneer er iets naar gestuurd wordt. De alias [email protected] zorgt ervoor dat alle rugs-carpets.biz accounts ingevuld worden, ook al bestaat dit emailadres niet in onze email manager.

Figuur 3: Email Manager op de Brinkster site

3.1.3 MyDomain.com Dit is een gratis dienst op internet(www.mydomain.com) die aan redirecting doet. Dit kunnen we gebruiken om de andere geregistreerde domeinnamen te laten pointen naar www.rugs-carpets.biz. We kiezen er voor om standaard te redirecten. We kunnen ook aan “stealth” forwarding doen zodanig dat de ingetypte URL (www.rugs-online.com of www.carpets-online) in de adresbalk blijft staan. Dit wint volgens mij niet aan vertrouwen omdat dezelfde content terug te vinden zou zijn in 3 verschillende URL’s. De klanten kunnen dit verdacht vinden. In de beheermodule van VeriSign, waar de domeinnamen geregistreerd zijn, moeten we dan enkel nog de nameservers voor die 2 domeinen aanpassen naar deze die we hebben gekregen bij myDomain.com.

3.2 Transport Om een snelle levering te garanderen doen we best beroep op een professionele firma. Wij kozen FedEx omdat er al een contract loopt met Devos-Caby. Dagelijks is er wel iets te versturen en dus komt er iedere dag een koerier langs. Indien er niets te versturen valt wordt dit vooraf gemeld. Nu is het nog de vraag of we met hetzelfde contract kunnen versturen onder de naam van Boomtex. Na een gesprek met Chantal Roobrouck, Account Executive van FedEx, bleek dat dus mogelijk te zijn. De FedEx Ship API konden we wel niet gebruiken omdat: • dit op de webserver moet draaien (Brinkster staat geen installatie van API’s toe op hun webserver). Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

20

• •

dit niet combineerbaar blijkt te zijn met een ASP toepassing; maar daar wordt aan gewerkt. wij momenteel zonder stockbeheer gaan werken. Dus kunnen we niet weten of een besteld product al dan niet in stock aanwezig is. Er is geen reden om de producten direct te komen laden.

Oplossing: Bij een binnenkomende bestelling via e-mail wordt deze asap doorgegeven aan de productie. Eens de bestelling klaar is geeft de FedEx verantwoordelijke binnen Devos-Caby(Heidi Devos) deze orders door aan FedEx (webapplicatie). Op die manier worden ze diezelfde dag nog opgehaald door de FedEx koerier. De vervoersprijzen zijn al vastgelegd voor Devos-Caby in een excelldocument. Daar staan de prijzen in functie van het te vervoeren gewicht en in functie van het bestemmingsland. Soms wordt er gerekend met de reële gewichten, maar soms wordt er ook gerekend met het volumetrisch gewicht. Dit laatste is van toepassing bij producten die groot van omvang zijn maar toch niet veel wegen. De grootte brengt een extra kost in. Het volumetrisch gewicht wordt als volgt berekend: VM[kg] = (lengte[cm] x breedte[cm] x hoogte[cm]) / 6000. Wanneer het volumetrisch gewicht groter is dan het reëel gewicht, dan wordt het volumetrisch gewicht aangerekend. Wij moeten dus rekening houden met de breedte van het tapijt en de diameter van het tapijt als het opgerold is. Deze diameter kan wat verschillen omdat het tapijt niet altijd even hard zal opgerold zijn. We zullen hiervoor dus maximummaten moeten voor instellen. Wanneer men nu 3 grote tapijten bestelt, dan zullen deze niet apart verstuurd worden. Meestal rolt men deze tapijten in elkaar waardoor er minder volume ingenomen wordt en er dus hoogstwaarschijnlijk met het reëel volume zal gerekend worden. Het kan nu echter zijn dat één van deze 3 tapijten veel later aangekondigd wordt(door productieproblemen) dan de 2 andere die al in stock aanwezig zijn. In dat geval wordt er in 2 keer verzonden en zal er dus meer moeten betaald worden aan verzendingskosten. Deze omstandigheden zijn vooraf echter niet te voorspellen. Dus wanneer de klant op de website komt zal er altijd gerekend worden alsof de tapijten één per één wordt verstuurd (al worden ze per 3 verstuurd). Op die manier worden de verzendingskosten wel redelijk hoog voor verre landen, maar we zijn tenminste zeker dat ons bedrijf geen verlies doet op het vervoer. Om dit wat te compenseren zullen de prijzen per tapijt heel laag gehouden worden.

3.2.1 De FedExDatabase Deze is apart opgenomen omdat dit minimum 1 maal per jaar dient aangepast te worden en omdat deze pas moet gebruikt worden eens het bestemmingsland van de bestelling gekend is (op het einde van het proces). Er staan 2 tabellen in en deze worden opgevuld aan de hand van het meegeleverde Excelldocument: TblLanden o Landnaam Æ Tekst; Max. 64 kar. o LandID ÆAutonummer Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

21

o LandCode (zoneletter waar het land zich in bevindt) Æ tekst; Max. 2kar. TblGewichten o ID Æ Autonummer o Kilogram (bovengrens in kg x 10) Æ Numeriek o A, B … (Prijs per Landcode en per gewicht in Eurocent) Æ Numeriek De landcode is een letter die aangeeft in welke zone dat land zich bevindt. Aan de hand daarvan en van het gewicht wordt de prijs opgesteld. Het aantal kilogram werd met een factor 10 vermenigvuldigd; de prijs met 100 omdat kommagetallen problemen konden opleveren bij het opvragen in ASP. In deze database zijn geen relaties aanwezig.

3.3 De hoofddatabase Voor de opslag van de gegevens in mijn toepassing gebruik ik een relationele database. In een relationele database (zoals Access) kan je tussen de verschillende tabellen uit de database relaties leggen, zodat het mogelijk wordt om gegevens uit meerdere tabellen tezelfdertijd te gebruiken. In een niet-relationele database zou je om hetzelfde te bereiken een hele grote complexe tabel moeten maken, die moeilijk aan te spreken is en traag zal laden. Het spreekt voor zich dat je dan vele overtollige gegevens zou moeten bijhouden. Relaties zijn gebaseerd op overeenkomsten tussen de sleutelvelden waartussen de relatie gedefinieerd is. Meestal wordt de “Primary key” (unieke identificatie voor een record in de tabel) vergeleken met de “Foreign key” (verwijzende sleutel) van een andere tabel.

3.3.1 Verzamelen van informatie Er worden op de site 4 collecties verkocht: Fiesta, Chinese Garden, Laila de Luxe en Tibet. Iedere collectie heeft een andere samenstelling van textiel en heeft dus een andere prijs en een ander gewicht. Het gewicht wordt gegeven in kilogram per vierkante cm, de prijs in euro per vierkante meter. De prijs werd laag gehouden omdat we een beginnend internetbedrijf zijn en omdat de vervoerskosten tamelijk hoog zullen liggen. Hieronder een overzicht: KwaliteitNaam Gewicht (kg / cm²) Prijs (euro / m²) Fiesta 0,000197 12,2 Chinese Garden 0,00017 9,7 Laila de Luxe 0,000145 7 Tibet 0,000197 12,2

Per collectie zijn verschillende kleuropstellingen mogelijk. De kleuropstelling krijgt de naam mee van het hoofdkleur. De groene kleuropstelling van bijvoorbeeld Tibet is een andere dan de groene kleuropstelling van bijvoorbeeld Fiesta. Daarom wordt ook een nummer met die kleuropstelling per kwaliteit geassocieerd. Die nummers werden door Devos-Caby gegeven en worden ook gebruikt om de bitmaps te benoemen. Hieronder een overzicht van de verschillende kleuren per collectie met hun kleurnummer:


22

FIESTA KleurNaam Nr Ivory 1 Blue 2 Yellow 3 Orange 4 Navy 5 Green 6

CHINESE GARDEN KleurNaam Nr Red 2 Emerald Green 3 Brick 17 Hunter 18 Petrol Blue 23 Berber 27

Laila de Luxe KleurNaam

Nr

Red Emerald Green Brick Hunter Petrol Blue Berber

2 3 17 18 23 27

Tibet KleurNaam Nr Ivory 1 Havanna 2 Green 3 Brown 4

Het tapijtontwerp krijgt ook een nummer. En per ontwerp zijn dan alle kleuropstellingen mogelijk, gedefinieerd voor die kwaliteit (zie hierboven). Het nummer van het ontwerp begint per kwaliteit met hetzelfde nummer. Voor Fiesta is dat 6 (bvb: 6005), voor Chinese Garden 2 (bvb 2034), voor Laila de Luxe 3 (bvb 3019) en voor Tibet 5 (bvb 5508). De naamgeving van de bitmap gebeurt dan met een “_” tussen ontwerpnummer en kleurnummer. Bvb: 2038_23.bmp is een Chinese Garden ontwerp met als kleur: ‘Petrol Blue’. Per kwaliteit zijn dan nog verschillende afmetingen mogelijk. Die afmetingen komen soms terug in andere kwaliteiten. Dus niet iedere afmeting is terug te vinden in elke kwaliteit. Omdat we voor het vervoer moeten rekenen met het volumetrisch gewicht, heb ik ook nog op zoek moeten gaan achter de verschillende diameters per tapijtgrootte (het volume van een opgerold tapijt is nodig). Hieronder een overzicht van de afmetingen per kwaliteit: Fiesta Breedte (cm) Lengte (cm) Diameter (cm) 120 170 12 140 190 14 160 220 16 190 270 19 240 330 24

Laila de Luxe Breedte (cm) Lengte (cm) Diameter (cm) 120 160 11 140 190 14 160 220 16 185 270 19 230 320 23 270 370 27

Chinese Garden Breedte (cm) Lengte (cm) Diameter (cm) 120 170 12 140 190 14 160 220 16 185 275 19 225 330 24 280 380 27 Tibet Breedte (cm) Lengte (cm) Diameter (cm) 120 170 12 140 190 14 160 220 16 190 270 19 240 330 24

Van iedere bestelling moeten klantgegevens worden bijgehouden. Ook de leveringsdetails, die verschillend kunnen zijn van de klantgegevens, moeten worden opgeslagen. Na de transactie moet ook aangegeven worden in de database of deze al dan niet geslaagd is.


23

De landen waarnaar uitgevoerd kan worden, worden in een aparte database bewaard, zie 3.2.1.

3.3.2 Wat moet er nu in de database komen? •

• • • • • • •

•

•

De kwaliteitsnaam o Fiesta o Chinese Garden o Laila de Luxe o Tibet Het gewicht (kg / m²) per kwaliteit De prijs (€ / m²) per kwaliteit De afmetingen (lengte, breedte, diameter) per kwaliteit De beschikbare kleuropstellingen per kwaliteit De tapijtnummers (3019, 6005, 6016, …) De bronbestandsnaam per tapijt (bvb 6016_2.gif) o De afbeeldingen worden niet in de database opgeslagen omdat de database anders te groot zou worden De klantgegevens o Naam en Voornaam o Adres o Plaats en Postcode o Land en Landcode (volgens de FedEx normen) o Staat/Provincie o Telefoon- en faxnummer o Emailadres o Paswoord De Verzendgegevens o Een unieke verzendID o Orderdatum o Orderkosten o Totaalkosten (inclusief de verzendingskosten) o Munteenheid o Verzendnaam en voornaam o Verzendadres o Verzendplaats en postcode o Verzendland o Verzendstaat / Provincie o Succesvolle transactie? (ja / nee) Orderdetails o Welke tapijten in welke kleuren en afmetingen per VerzendID o Daar moet meegegeven worden voor welke klant het order bestemd is.

3.3.3 Soorten Relaties Er zijn verschillende types van relaties tussen twee tabellen. We spreken van een 1 op 1 relatie als één gegeven uit de ene tabel juist overeen komt met één gegeven uit de tabel die er in relatie mee ligt. Deze relaties komen niet zoveel voor omdat de gegevens even goed in één en dezelfde tabel zouden kunnen Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

24

zitten. Deze relaties worden dan ook gebruikt om een grote tabel te splitsen in twee kleinere tabellen. Een tweede soort relatie is een 1 op veel relatie. Het is het meest voorkomende type relatie in een database. Bij een 1 op veel relatie kan een record uit de ene tabel (tabel A), verwijzen naar veel gegevens uit de andere tabel (tabel B). Omgekeerd kan een record uit tabel B ten hoogste één overeenkomstige record in tabel A hebben. Ten slotte hebben we nog de veel op veel relaties. In een veel op veel relaties heeft een record uit tabel A meerdere overeenkomstige records in tabel B en omgekeerd. Om deze relaties op te vangen moet er een tussentabel gemaakt worden. Bvb de tabellen producten en orders: Dit is een veel op veel relatie die als tussentabel de orderinformatie zal bevatten.

3.3.4 Het ER-diagram Een ER-diagram toont ons de relatie tussen de verschillende entiteiten. Een entiteit kan bijvoorbeeld Tapijt, Klant, Kleur,… zijn. Het is iets dat betekenis heeft voor de gebruiker binnen zijn database. 1 N N N Tapijt Orders Klanten A B N C

Afmetingen

N

N D

1 Kwaliteit

N

1 E

Kleuren

Figuur 4: ER-diagram van onze database

Bespreking van de relaties: • relatie A: Meerdere tapijten kunnen gekoppeld zijn aan een order en meerdere orders kunnen gekoppeld worden aan een tapijt. • relatie B: Een klant kan meerdere orders zetten, een order is specifiek voor één klant. • relatie C: Een kwaliteit bevat meerdere tapijten, een tapijt hoort toe aan één kwaliteit. • relatie D: Meerdere kwaliteiten kunnen gekoppeld worden aan een afmeting, meerdere afmetingen kunnen gekoppeld worden aan een kwaliteit. • relatie E: Een kwaliteit bevat meerdere kleuren, een kleur hoort toe aan één kwaliteit (zie 3.3.1 voor meer uitleg)

3.3.5 De tabellen De primaire sleutels van de tabellen zijn vet gedrukt. • TblKwaliteit o Kwaliteitsnaam Æ Tekst; Max. 20 kar. o KwaliteitsID Æ Numeriek Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

25

•

•

•

•

•

•

o Gewicht ( kg / m² ) Æ Numeriek; 6decimalen o Verkoopprijs ( € / m² ) Æ Numeriek; 2decimalen TblKleurKwaliteit o KwaliteitID Æ Numeriek o Kleurnaam Æ Tekst; Max. 22 kar. o KleurID Æ Numeriek TblAfmetingen o AfmetingID Æ Numeriek o Breedte ( cm ) Æ Numeriek o Lengte (cm ) Æ Numeriek o Diameter ( cm ) Æ Numeriek TblKwaliteitsgegevens (tussentabel) o AfmetingID Æ Numeriek o KwaliteitID Æ Numeriek o Gewicht (kg) Æ Numeriek; 2 decimalen o Prijs (€) Æ Numeriek TblTapijt o TapijtID Æ autonummer o TapijtNummer Æ Numeriek o KwaliteitID Æ Numeriek o Kleur Æ Tekst; Max. 22 kar. o Bron Æ Tekst; Max. 15 kar. TblKlanten o KlantID Æ autonummer o KlantNaam Æ Tekst; Max. 30 kar. o KlantVoornaam Æ Tekst; Max. 20 kar. o KlantAdres Æ Tekst; Max. 50 kar. o KlantPlaats Æ Tekst; Max. 30 kar. o KlantPostcode Æ Numeriek o KlantLand Æ Tekst; Max. 20 kar. o KlantStaat Æ Tekst; Max. 30 kar. o Klanttelefoonnumer Æ Tekst; Max. 20 rar. o KlantFaxnummer Æ Tekst; Max. 20 kar. o KlantEmail Æ tekst; Max 50 kar. o KlantPaswoord Æ tekst; Max. 15 kar o KlantLandcode Æ tekst; Max. 2 kar. TblOrders o VerzendID Æ autonummer o Orderdatum ÆDatum/Tijd o OrderKosten( € ) ÆNumeriek, 2 decimalen. o TotaalKosten( € ) ÆNumeriek, 2 decimalen. o Currency Æ Numeriek o VerzendNaam Æ Tekst; Max. 30 kar. o VerzendVoornaam Æ Tekst; Max. 20 kar. o VerzendAdres Æ Tekst; Max. 50 kar. o VerzendPlaats Æ Tekst; Max. 30 kar. o VerzendPostcode Æ Numeriek o VerzendLand Æ Tekst; Max. 20 kar. o VerzendStaat Æ Tekst; Max. 30 kar. o Betaald Æ Tekst; Max. 3 kar. Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

26

•

TblOrderInfo (tussentabel) o OrderID Æ Autonummer o TapijtID Æ Numeriek o KlantID Æ Numeriek o VerzendID Æ Numeriek o TapijtAfmeting Æ Tekst; Max. 10 kar.

3.3.6 Relationeel model Dit model is een vervolg op het ER-diagram en toont ons ook de relaties tussen de verschillende tabellen. In het relationeel model worden de n op n relaties vervangen door een ‘1 op n - n op 1’ - relatie. Er wordt dus een tussentabel ingevoerd. Hier worden ook alle attributen per tabel weergegeven. Het is in feite de volledige structuur van je database zoals die in Access is beschreven.

Figuur 5: Relationeel model

3.3.7 Het opvullen/aanpassen van de database Het invullen van de kwaliteiten, hun ID, het gewicht en de eenheidsprijs gebeurt manueel. De kleuren en afmetingen ook. Dit omdat deze gegevens standaard zijn en niet gauw zullen veranderen (en het maar een kleine moeite is ook ). Het opvullen van de gewichten per afmetingID / KwaliteitID (TblKwaliteitsgegevens) gebeurt aan de hand van een bijwerkquery:


27

Figuur 6: Query voor het berekenen van de gewichten per afmeting en kwaliteit

Idem voor het opvullen van de prijzen per afmetingID / KwaliteitID:

Figuur 7: Query voor het berekenen van de prijzen per afmeting en kwaliteit

De oppervlakte wordt door 10000 gedeeld omdat we van cm² naar m² moeten gaan. Het opvullen van de tapijttabel gebeurt door een tapijtnummer in te vullen op een formulier dat gebaseerd is op een Toevoegquery in Access. Aan de hand van het eerste cijfer van dat tapijtnummer kan door de query uitgemaakt worden over welke kwaliteit het gaat en zo de andere velden opvullen.

Figuur 8: Een nieuw tapijt opnemen in de database

De klantgegevens en orderdetails zullen uiteraard door query’s op de website ingevuld worden. Het verwijderen van een tapijt uit de collectie gebeurt op quasi dezelfde manier. Er kan op het formulier gebladerd worden door de verschillende


28

producten. Door een simpele klik op de verwijderknop wordt het tapijt in alle kleuren uit de collectie verwijderd door een verwijderquery.

Figuur 9: Een tapijt verwijderen uit de database

3.4 Bank Card Company Via het Internet uitgevoerde transacties worden als verkoop op afstand beschouwd aanzien en dus moeten wij ons aansluiten bij Bank Card Company. Om ons aan te sluiten moeten we een aansluitingsformulier invullen vergezeld van enkele documenten. In het aansluitingsformulier moeten een aantal juridische en administratieve zaken worden ingevuld. Ook wenst men te weten wat voor producten we zullen verkopen en tegen welke prijs ongeveer. Het aansluitingsformulier is terug te vinden in de bijlagen. De bijkomstige formulieren die in bijlage moeten verstuurd worden zijn: • een brochure of een catalogus van de aangeboden producten. • een kopie van de statuten van de maatschappij of een kopie van de inschrijving in het Handelsregister • een kopie van de laatste balans (of financieel plan) De brochure was rap gemaakt in Photoshop. Niet alle tapijten moesten erop komen, per dessin heb ik één kleur genomen (zolang we maar geen wapens of ander bezwarend materiaal verkopen ). De andere documenten hebben wat op zich laten wachten omdat de bedrijfsleiding van Boomtex deze documenten niet onmiddellijk ter beschikking had. Ook waren ze er niet gerust in om deze papieren zomaar vrij te geven. 2 weken na het versturen van deze papieren kregen we dan het bezoek van een vertegenwoordigster die nog enkele papieren mee had die ingevuld en ondertekend dienden te worden. Op die papieren werd onder andere aangegeven dat per VISA/MasterCard transactie een vergoeding aangerekend wordt van 2,5% op dat bedrag(zowel nationaal als internationaal). Verder worden geen aansluitingskosten gevraagd. Eens die papieren waren ondertekend waren was de aansluiting volbracht. Nu moet enkel nog de aansluitingsaanvraag en opzet van Banksys in orde gebracht worden om betalingen te mogen aanvaarden op internet.


29

3.5 Implementatie van de website 3.5.1 Iets over de gebruikte talen De webpagina’s maken vooral gebruik van HTML, Javascript en ASP. HTML is een taal die je in staat stelt webpagina’s te voorzien van een eenvoudige opmaak. HTML is clientside. Javascript is ook clientside maar is een scriptingtaal. Daardoor kunnen wij bepaalde routines gaan uitvoeren en zaken binnen webpagina’s dynamisch gaan aanpassen. ASP is dan weer een serverside technologie waarbij elke scriptingtaal kan worden gebruikt. Ik ben meest vertrouwd met vbscripting, daarom kies ik ervoor om met vbscript te werken. Via ASP kunnen we ook gebruik maken van ADO(ActiveX data objects). Dit is een manier om rap en consistent data uit bvb een database te halen. Op die manier zal het mogelijk zijn om onze data uit onze database te halen of data er naar toe te schrijven. Dit doen we door SQL commando’s naar onze database te sturen. SQL staat voor Structured Query Language en daarmee kan de inhoud van tabellen worden geselecteerd(SELECT), gemaakt(INSERT), verwijdert(DELETE) of verandert(UPDATE). Meestal zullen we aan de hand van enkele criteria data uit (verschillende) tabellen selecteren om dan te gebruiken in onze webapplicatie. Wanneer we data uit verschillende tabellen nodig hebben die onderling relaties hebben, zullen we dit moeten beschrijven met een “INNER JOIN” in de querystring. In de ASP pagina’s zal ik dikwijls gebruik maken van de Request methode. Dit is om data op te halen die naar een pagina is verstuurd. Deze data kan bvb verstuurd worden in de URL (pagina.asp?var=”inhoud”). Hetzelfde gebeurt wanneer we een formulier met GET versturen. Met Request.Querystring(“var”) kunnen we dan de waarde van de verstuurde data te weten komen. Een andere manier is het formulier met POST te versturen. De data komt dan niet in de URL terecht. Met Request.Form(“var”) kunnen we dan de verstuurde variabelen te weten komen. Ook zal ik veel gebruik maken van Sessievariabelen. Sessievariabelen zijn variabelen die over de gehele website gebruikt kunnen worden en die gebruikerspecifiek zijn. Standaard duurt een sessie 20 minuten en zal de webserver deze variabelen voor 20 min onthouden voor die gebruiker, ook al verlaat hij de webpagina. De combinatie van al deze talen zorgt voor een sterke dynamische toepassing die vlot aanpasbaar is.


30

3.5.2 Schematisch overzicht van de navigatie Home Home Shop Company Wat uitleg van het bedrijf, voorstelling collecties Login Fiesta Chinese Garden Logout (link naar shop, collectie Fiesta)

Shop Chinese

Laila de Luxe

Tibet

Winkelwagentje

Shop Lailla de Luxe Shop Tibet

Shop Home Fiesta | Chinese Garden | Laila de Luxe | Tibet Shop Company Login FIESTA COLLECTION Logout Tapijten, 3 per rij, afbeelding Clickable (thumbnail) Kleurkeuze Afmetingskeuze Prijs | Add to shopping basket

Winkelwagentje tapijtinfo Tap.gif Thumb Remove Total: ……Euro Check Out

Home Shop Company Login Logout

Login

Winkelwagentje Continue shopping

Loginname : … Password : …

tapijtinfo Tap.gif Thumb

Forgot passw Login

Sign In

Remove …

“KlantInformatie” : …… Sign Up

Validatie

Total: ……Euro

Validatie

Home

Shipping

Shop Company KlantInfo Login Logout

Winkelwagentje Continue shopping

Shipping Details ….

tapijtinfo Tap.gif Thumb

Pay Orders Remove …

Validatie

Total: ……Euro Shipping INCL.: ….


31

Pay Home Shop Company Pay Half-Set VISA/MASTERCARD Login

Winkelwagentje Continue shopping tapijtinfo Tap.gif Thumb

Logout Pay Full-SET VISA/MASTERCARD

… Total: ……Euro

Validatie

De navigatie met de banksysmodule wordt later verder uitgediept.

Banksys Module • Kredietkaartvalidering • Ordervalidering

Home Confirmation Winkelwagentje Shop Company Orders zijn geplaatst, Email met orderdetails wordt naar de klant en naar ons Login verstuurd. Logout Back

Home Home Shop Company Wat uitleg van het bedrijf, voorstelling collecties Login Logout

Fiesta

Chinese Garden

(link naar shop, collectie Fiesta)

Shop Chinese

Laila de Luxe

Tibet

Winkelwagentje

Shop Lailla de Luxe Shop Tibet


32

Logout Home Shop Company Uitgelogd Login Logout

Winkelwagentje

Back Æ keert terug naar de Home-pagina

Nu gaan we terug inloggen maar deze keer zullen we ons paswoord vergeten om die navigatie te bekijken. Home Login Shop Company Loginname : … Login Logout

Winkelwagentje

Password : …

Forgot passw Login

Sign In Validatie

“KlantInformatie” : …… Sign Up

Forgot password Home Shop Company Email address: ………. Login Logout

Winkelwagentje

Send password

Validatie Output Password has been sent / Password doesn’t exist in database Back Æ keert ook terug naar de Home-pagina

Home Company Shop Company Uitleg wie we zijn en wat we doen contactgegegevens Login Logout

Winkelwagentje

Figuur 10: Schematisch overzicht van de navigatie


33

3.5.3 Vertalen van de navigatie naar een framestructuur In default.asp zitten 3frames (kolommen). Links de navigatie; in het midden de inhoud en rechts het winkelwagentje default.asp nav.asp name = links

Home.asp name = midden

Cart.asp Name = rechts

Home Shop

Frames2.asp

Company

Company.asp

Login

Login.asp

Logout

Logout.asp

In Frames2.asp zitten ook 3 frames (rijen deze keer). Bovenaan de winkelnavigatie, in het midden de inhoud(producten en onderaan de info ivm bestelling en transport Frames2.asp; name = midden nav.asp name = links

shboven.asp; name = sboven

Cart.asp Name = rechts

shop.asp; name = sonder

nfo.asp; name = sooonder Figuur 11: Framestructuur van de website

3.5.4 Het uitvergroten van de afbeeldingen (Thumb.js) Dit script maakt het mogelijk om de tapijten die weergegeven worden, groter te bekijken. Het script is geschreven in javascript en krijgt de extensie .js mee (zoals u kan zien in de titel). Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

34

Hier gaat het in feite om één grote functie met als argumenten: de oorspronkelijke bron en de kwaliteitsID van het geklikte bestand. Bij het binnenkomen van de functie stuiten we op een switch-case routine die opsplitst volgens kwaliteitID. In die cases moeten we de kleurID van de bestandsnaam te weten komen om te weten welk kleur er moet worden getoond. Bvb als we “http://www.rugs-carpets.biz/Images/6005_2.gif” als bestandsnaam binnenkrijgen, moeten we daar de 2 uithalen om de kleurID te weten; de 6005 kunnen we gebruiken om in de titel te zetten. Dit doen we met behulp van stringfuncties. Met een volgende switch-case kennen we dan een kleurnaam toe aan de kleurID(zie 3.3.1) om in de titel te plaatsen. De vergrootte versie van het geklikte tapijt tonen we in een nieuw venster dat als naam ‘Kleur’ meekrijgt. Dit om maar maximum één extern venster open te zetten. Het venster is in feite een variabele(var v in ons geval) die we dan kunnen gebruiken om data naartoe te schrijven (v.document.write(“INHOUD”);). Dit doen we dan ook en plaatsen er HTMLinhoud in. De grote versies van de tapijten hebben dezelfde bestandsnaam maar met een “g” vooraan geplaatst. Deze bestanden bevinden zich in een parallelle directory en kunnen dus met de stringfuncties van daarnet gemakkelijk worden gevonden. Daarenboven bieden we nog een combobox aan die toelaat om de kleur te veranderen van het afgebeelde tapijt. De options krijgen als value de kleurID. Bij de onChange-event wordt nog een andere functie uitgevoerd om de bestandsnaam van het getoonde tapijt te veranderen en om de titel te veranderen. In deze functie maken we gebruik van DOM (Document Object Model). Code: function Groot(figuur, kwal){ …….Switch(kwal) …… //figuur is de volledige bronbestandsnaam //bvb: http://www.rugs-carpets.biz/Images/6005_2.gif begin=figuur.lastIndexOf("/"); ….. // afscheiden van de titel, 6005 in dit voorbeeld titel=figuur.substring(begin+1,begin+5); …. //het voorstuk samenstelen om straks gemakkelijker het bestand te kunnen //veranderen var prep = "GrootImage/g" + titel + "_"; prep = "'" + prep + "'"; …… //Oproepen van de functie bij de onChange-event v.document.write('
Choose design color: <SELECT name="kouleur" onChange="kleurke(' + prep + ',wijz.kouleur.value)">'); v.document.write(' ……’); ….. } function kleurke(prepo, kle){ if(kle != 0){ //wijz is de formnaam en kouleur de combobox var sell = wijz.kouleur.selectedIndex; //de bron van het getoonde tapijt aanpassen document.images.g.src = prepo + kle + ".gif"; //DOM code: eerst de kleurnaam opvragen om dan de titel dynamisch aan te passen var tit = document.documentElement.childNodes[1].childNodes[2].childNodes[1].childNodes[sell].firstChild.no deValue;


35 document.documentElement.childNodes[1].childNodes[0].childNodes[1].firstChild.nodeValue = tit; }

}

3.5.5 Global.asa Het bestand global.asa is typisch voor een ASP toepassing. Hierin declareren we objecten, variabelen en gebeurtenis-handlers(in het bijzonder voor de gebeurtenisprocedures OnStart en OnEnd van de objecten Application en Session) die sessie of toepassingsbereik hebben. In ons geval zullen we enkel met het object Session werken (gebruikerspecifiek). Er kan maar één bestand global.asa zijn per virtuele map van ASP-toepassingen. Global.asa moet zich in de root bevinden van de toepassing om invloed te hebben op onze toepassing. Het bestand Global.asa kan procedures en functies bevatten. Deze procedures kunnen echter alleen aangeroepen worden door de gebeurtenisprcedures Session_OnStart, Session_OnEnd, Application_OnStart en Application_OnEnd (die trouwens alleen maar in global.asa kunnen staan). Wij zullen in onze toepassing in global.asa de databaseconnecties definiëren bij Session_OnStart. Dit heeft als gevolg dat, wannneer we zullen emigreren naar SQL server, we enkel de code in global.asa moeten aanpassen. Ook zullen we de timout wat verlengen (standaard staat dit op 20min; we verlengen dat naar 30 min). Bij Session_OnEnd zullen we de databaseconnectie (moeten!) sluiten. Code: Sub Session_OnStart Session.Timeout= 30 Dim sConnString Dim sMapPath Dim sMapPathFed Dim sMapPath2 Dim sConnStringFed Dim sConnString2 ‘adodb objecten creeren Set Session("objFed") = Server.CreateObject("ADODB.Connection") Set Session("objDC") = Server.CreateObject("ADODB.Connection") ‘opstellen van de connectiestring ‘we werken met een access database, dus moeten we deze driver gebruiken sConnString = "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" sMapPath = Server.MapPath("\") ‘Het lokaliseren van onze database ‘de database staat op een parallelle directory van de webrootdirectory sMapPathFed = Mid(sMapPath, 1, InStrRev(sMapPath,"\")-1) "\database\fedex.mdb;" sMapPath2 = Mid(sMapPath, 1, InStrRev(sMapPath,"\")-1) "\database\commerce.mdb;" sConnStringFed = sConnString & sMapPathFed sConnString2 = sConnString & sMapPath2 ‘ Connecties openen Session("objFed").Open sConnStringFed Session("objDC").Open sConnString2 End Sub

& &

Figuur 12: Zoeken databasedirectory


36 Sub Session_OnEnd ‘Connecties sluiten en onbestaand maken Session("objFed").Close Session("objDC").Close Set Session("objDC") = Nothing Set Session("objFed") = Nothing Session("kar") = "leeg" End Sub

3.5.6 Het winkelsysteem

Figuur 13: Screenshot van het winkelgedeelte

¾ De winkelpagina (shop.asp) Dit is zowat de belangrijkste pagina van heel het project. Bij aankomst op deze pagina wordt altijd een ID meegegeven (bvb shop.asp?id=2). Deze ID slaat op de kwaliteit, Chinese Garden in dit geval. Aan de hand van deze ID worden 2 selectiequery’s uitgevoerd die alle tapijtgegevens voor die kwaliteit uit de database filtert.


37

De eerste SQL heeft betrekking op de kwaliteit en is dus geldig voor elk tapijt in die kwaliteit. Code: SQL1 = "SELECT TblKwaliteitsgegevens.KwaliteitID AS kwalID, TblKwaliteitsgegevens.AfmetingID AS afmID, TblAfmetingen.Diameter As dia, TblAfmetingen.Breedte AS breedte, TblAfmetingen.Lengte AS lengte, TblKwaliteitsgegevens.Prijs AS prijs, TblKwaliteitsgegevens.Gewicht AS gewicht FROM TblAfmetingen INNER JOIN TblKwaliteitsgegevens ON TblAfmetingen.AfmetingID = TblKwaliteitsgegevens.AfmetingID WHERE (((TblKwaliteitsgegevens.KwaliteitID)= " & Request.QueryString("id") & " )) ORDER BY TblKwaliteitsgegevens.KwaliteitID, TblAfmetingen.Lengte"

Hier wordt de afmeting (lengte, breedte, diameter, id) met de bijhorende prijs uit de database gehaald. Ook het gewicht wordt er uit gehaald, om later de transportkosten te kunnen berekenen. De tweede en structuuraangevende SQL heeft betrekking tot elk tapijt. Code: SQL2 = "SELECT First(Tapijt_ID) AS tID, Tapijtnummer AS tnummer, First(KwaliteitID) AS tKwID, First(Kleur) AS tKleur, First(bron) AS tbron FROM TblTapijt WHERE KwaliteitID = " & Request.QueryString("id") & " GROUP BY tapijtnummer"

Deze SQL zal per tapijtnummer één kleur met overeenkomstig bronbestand en afmeting naar voor schuiven om deze dan vervolgens met een lus op de pagina te plaatsen in een tabel. De lus verloopt in 3 instanties, dit om een tabel met 3 cellen te creëren. Per cel die gecreëerd wordt, worden dan alle gegevens, verkregen door bovenstaande selectiequery’s uitgezet: • Het bronbestand. Dit is clickable en zal uitvergroot worden in een nieuw venster. Deze routine wordt opgeroepen in een extern javascript die gebruikt kan worden voor elk tapijt in elke kwaliteit(zie 33). Het bronbestand moet dynamisch kunnen veranderen, daarom geven we een unieke naam aan de : een letter, gevolgd door het huidig tapijtnummer. •

Het design nummer (huidig tapijtnummer).

•

Het kleur (waarden in een combobox). Om later de combobox te kunnen adresseren geven we deze als naam een letter, gevolgd door het huidige tapijtnummer. Om de combobox op te vullen, hebben we wel nog een extra selectiequery nodig. Alle kleuren met bijhorende bron en tapijtID (beiden als value voor de option meegeven met een scheidingsteken) moeten namelijk in de combobox geraken. Dit kan gebeuren met volgende SQL:

SQL3 = "SELECT Kleur, bron, Tapijt_ID As tapID FROM TblTapijt WHERE Tapijtnummer = " & objRS.Fields("tnummer")

Het opvullen van de combobox gebeurt met een lus doorheen de resultaten van SQL3: <% ‘doorloop de gevonden recordset tot het einde, parRS is de recordset met de SQL3 ‘waarden Do While Not parRS.EOF %> <% parRS.MoveNext Loop %>

Aan de hand van de value van de geselecteerde waarde kunnen we dan de bron van het getoonde tapijt veranderen (onChange – event van de combobox). De bron achterhalen we met een stringfunctie. •

Het gewicht en de diameter van het tapijt, gehaald uit SQL1. Deze gegevens zijn voor de eindgebruiker niet relevant en moeten dus ook niet getoond worden. Wel moeten deze gegevens dynamisch kunnen worden aangepast, daarom steken we ze in een onzichtbaar tekstvak. De naamgeving van de tekstvakken is opnieuw een letter, gevolgd door het huidige tapijtnummer (uit SQL2).

•

De prijs van het tapijt, gehaald uit SQL1. Hier is de prijs enkel nog maar afhankelijk van de grootte van het tapijt. Ook hier moet de waarde kunnen worden aangepast. De naamgeving van het tekstvak is opnieuw een letter, gevolgd door het huidige tapijtnummer (uit SQL2). De eigenschappen van het tekstveld zijn zo ingesteld dat er niet kan worden in getypt en geplakt(het is niet de bedoeling dat de klanten de prijzen kunnen aanpassen).

" TYPE="TEXT" ONFOCUS="this.blur();" READONLY value= "<%= prijs %> Euro">

•

De afmetingen mogelijk voor die kwaliteit. Deze steken we in een combobox, de naam is een letter gevolgd door het huidige tapijtnummer (SQL2). De waarden kunnen worden gehaald uit de recordset voor SQL1 (aflopen met een Do While-lus). De prijs, diameter en het gewicht zijn afhankelijk van de gekozen afmeting. Deze waarden zullen we dus meegeven met de ‘value’ van de <% afmRS.MoveNext Loop afmRS.MoveFirst %>

•

De add-knop. De naamgeving van de knop is opnieuw een letter, gevolgd door het huidige tapijtnummer (uit SQL2). Bij een klik op die knop( onClick – event) wordt er een javascriptfunctie opgeroepen. We sturen de eigenschappen van het gekozen tapijt als argumenten mee. In de opgeroepen functie zetten we die argumenten in een onzichtbare form onderaan (in aparte tekstvakken). Nadat we dat hebben gedaan gaan we die form submitten(met de POST-methode zodanig dat we niet alles in de URL moeten versturen). Die Submit gebeurt naar het winkelwagentje. Alle gegevens, behalve de prijs dan, worden doorgestuurd om op te vangen in het winkelwagentje. De prijs wordt niet doorgestuurd omdat dit gemakkelijk te kraken is. Aan de hand van de afmetingID en de tapijtID kunnen we dan de prijs opnieuw uit de database halen op de winkelwagenpagina. Code:

// ietem is de naam van de form, hetgeen erna komt is de naam van het tekstveld. function voegToe(num, affmID, afm, kleur, bron, kwal, kwalID, gew, diam, tapID){ ietem.tID.value = tapID; ietem.tNr.value = num; ietem.tAfID.value = affmID; ietem.tAf.value = afm; ietem.tKl.value = kleur; ietem.tBr.value = bron; ietem.tKw.value = kwal; ietem.tKwID.value = kwalID; ietem.tGe.value = gew; ietem.tDia.value = diam; ietem.eerst.value = 1; setTimeout("document.forms.ietem.submit();",100); }

¾ Het winkelwagentje (cart.asp) Deze is bijna in elke fase van het proces aanwezig. De inhoud is vooral gebaseerd op sessievariabelen. Iedere gebruiker heeft dus als het ware zijn persoonlijk winkelwagentje (zonder daar 2 euro te moeten insteken). We kunnen natuurlijk meer dan dat bijhouden van de gebruiker.


40

De gebruiker moet enkel maar zijn winkelwagentje zien wanneer er iets is toegevoegd uit de winkelpagina. Dit gaan we controleren aan de hand van de waarden die we doorgestuurd krijgen. Op de verborgen form in shop.asp, die gesubmit wordt bij een klik op “Add to shopping cart”, staat een tekstveld met naam “eerst”. Standaard staat deze waarde op 3; maar bij de uitvoer van de functie “voeg toe” wordt deze waarde op 1 gezet en vindt een post plaats naar cart.asp. Wanneer deze waarde dus op 1 staat mag er inhoud toegekend worden aan het winkelwagentje. Overzicht van de verschillende sessievariabelen gebruikt in cart.asp: • Session("objFed") en Session("objDC"): de connectiestring naar de gebruikte databases, al eerder uitgelegd in 3.5. • Session(“difAantal”): Dit is de sessievariabele die bijhoudt ‘hoeveel’ producten er zich bevinden in het winkelwagentje van de klant. Deze wordt verhoogd met 1 bij iedere refresh van de pagina. Het kan dus zijn dat deze verhoogd is met 1 zonder dat er op de “add” knop geklikt is geweest in shop.asp wat resulteert in een misse weergave van het aantal producten. Dit zullen we later wel opvangen. Deze variabele zullen we vooral gebruiken om de andere sessievariabelen een index mee te geven en om de lus te begrenzen die alle producten in het winkelwagentje laadt. • Session(“prijs” & Session(“diffAantal”)): De prijs voor een binnenkomend tapijt. Dit wordt echter niet meegestuurd vanop shop.asp omdat dit te gevaarlijk is. We kunnen de prijs achterhalen door een selectiequery uit te voeren op onze database die de prijs opzoekt voor een tapijtnummer (Request.Form(“tNr”)) met een bepaalde afmetingID (Request.Form(“tAfID”)). Code: SQL4= "SELECT TblTapijt.Tapijtnummer, TblAfmetingen.AfmetingID, TblKwaliteitsgegevens.Prijs as qPrijs FROM TblKlanten, (TblKwaliteit INNER JOIN (TblAfmetingen INNER JOIN TblKwaliteitsgegevens ON TblAfmetingen.AfmetingID = TblKwaliteitsgegevens.AfmetingID) ON TblKwaliteit.KwaliteitID = TblKwaliteitsgegevens.KwaliteitID) INNER JOIN TblTapijt ON TblKwaliteit.KwaliteitID = TblTapijt.KwaliteitID GROUP BY TblTapijt.Tapijtnummer, TblAfmetingen.AfmetingID, TblKwaliteitsgegevens.Prijs HAVING (((TblTapijt.Tapijtnummer)=" & Request.Form("tNr") & ") AND ((TblAfmetingen.AfmetingID)=" & Request.Form("tAfID") & "))"

• • • • • •

Session(“nummer” & Session(“difAantal”)) = Request.Form("tNr") Het tapijtnummer van het toegevoegde tapijt (bvb 6005). Session(“tID” & Session(“difAantal”)) = Request.Form("tNr") De ID van het tapijt in een bepaalde kleur. Nodig om later in de orderdatabase weg te schrijven. Session(“afmm” & Session(“difAantal”)) = Request.Form("tAf") De afmeting (bvb 120 x 170 cm) van het toegevoegde tapijt. Session(“kleur” & Session(“difAantal”)) = Request.Form("tKl") De kleur van het toegevoegde tapijt. Session(“bron” & Session(“difAantal”)) = Request.Form("tBr") De bronbestandsnaam (bvb 6005_2.gif) van het toegevoegde tapijt. Session(“kwal” & Session(“difAantal”)) = Request.Form("tKw") De kwaliteitsnaam (bvb Fiesta) van het toegevoegde tapijt.


41

• • • •

•

•

•

• • •

Session(“kwaID” & Session(“difAantal”)) = Request.Form("tKw") De kwaliteitsID van het toegevoegde tapijt, nodig om de thumbnail te vergroten met de externe javascriptfunctie. Session("Gewicht" & Session("difAantal")) =Request.Form("tGe") Het gewicht van het toegevoegde tapijt Session("Diameter" & Session("difAantal"))= Left(Request.Form("tDia"), 2) De diameter van het toegevoegde tapijt Session("Lengte" & Session("difAantal")) = Left(Session("affm" & Session("difAantal")), 3) De lengte van het toegevoegde tapijt. Dit zullen we nodig hebben om het volumetrisch gewicht te berekenen. Session("somtotaal"): De totaalprijs van de bestelling, inclusief de vervoersprijzen. Bij het doorlopen van de lus die alle items in de frame zet, wordt dit per item verhoogd met de prijs van het item en de vervoerskosten. Session(“verwijder”): wordt ingevuld met de index van een winkelwagen-item als er op een “Remove”-knop is geklikt in cart.asp. Indien deze variabele niet leeg is zal er bij het inladen van de pagina een functie worden uitgevoerd die alle sessievariabelen met die bepaalde index zal leegmaken (gelijkmaken met een lege string). Session(“pay”): Deze wordt op waarde 1 gezet wanneer men zich op de betaalpagina bevindt (de pagina waar men moet kiezen of men HalfSET of Full-SET moet betalen). Indien men zich op deze pagina bevindt zijn de orders net weggeschreven naar de database en is het niet wenselijk dat er nog producten uit het winkelwagentje verwijdert worden of dat er nog verder gewinkeld wordt. Met andere woorden, de “Remove” – knop en de “Continue shopping” - knop worden gedisabled. Session(“kar”): wordt op “vol” gezet indien er inhoud is in het winkelwagentje. Indien er geen inhoud is in het winkelwagentje staat deze op “leeg”. Session(“stotaal”): de totaalprijs van alle items zonder de vervoerskosten. Bij het doorlopen van de lus die alle items in de frame zet, wordt dit per item verhoogd met de prijs van het item. Session(“VolGew” & i): Het volume gewicht van het huidig item waarbij i de teller is van de lus die alle items in de frame zet(zie verder). Het volumegewicht van een object wordt als volgt berekend: (lengte x breedte x hoogte)/ 6000. De afmetingen worden in cm ingegeven. Indien het volumetrisch gewicht hoger is dan het reëel gewicht voor dat item; wordt vanaf dan verder gerekend met het volumetrisch gewicht (volgens de regels van FedEx). Code:

Session("VolGew" & i) = ((Session("Lengte" & i) * 1) * (Session("Diameter" & i) * 1) * (Session("Diameter" & i) * 1)) / 6000 ‘als het volume gewicht groter is dan het reëel gewicht, vervang reëel door volumegewicht If (Session("Volgew" & i) > (Session("Gewicht" & i ))*1) Then Session("Gewicht" & i) = Session("Volgew" & i) End If

•

Session(“check”): de landcode die overeenstemt met het land dat men gekozen heeft op de shipping-pagina. Deze code wordt dan gebruikt om in de FedEx database de transportprijs op te zoeken die hoort bij het gewicht(reëel of volumetrisch) en die landcode. Enkel wanneer Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

42

deze waarde niet leeg is, moet er maar opgezocht worden in de database. Code: If (Session("check")<>"")Then Set objRIS = Server.CreateObject("ADODB.Recordset") sSQL ="SELECT First(tblGewichten.KiloGram), tblGewichten." & Session("check") & " FROM tblGewichten GROUP BY tblGewichten." & Session("check") & " HAVING (((First(tblGewichten.KiloGram)) >" & formatNumber((Session("Gewicht" & i) * 1),1)*10 & "))" objRIS.Open sSQL , Session("objFed")

• •

Session(“iShip” & i) : De transportkosten voor het huidige (i – de) item. Session(“iTot” & i) : De totaalprijs voor het huidige (i – de) item. De prijs + transportkosten dus.

Tot zover de sessievariabelen op deze pagina. Nu gaan we wat dieper in op het vullen van het winkelwagentje. Ook hier maken we gebruik van een tabelstructuur. We laten de cellen vullen met behulp van een lus(loop). De lus loopt tot aan Session(“difAantal”), de index van de andere sessievariabelen. Sommige waarden zullen leeg zijn en dit moeten we opvangen met een if – statement; anders komen we met lege cellen te zitten. Code: <% i=0 do while i <= Session("difAantal") if Session("nummer" & i) <> "" Then ‘Vul de cel met de waarden per tapijt ‘… End If i=i+1 loop

Om de afbeeldingen van de tapijtjes in het winkelwagentje te vergroten, kan, zoals reeds aangehaald, gebruik worden gemaakt van de javascriptfunctie die in shop.asp ook al werd gebruikt. We geven hier ook een dynamische naam aan de figuur, zodat deze éénduidig bepaald is.

3.5.7 Accountbeheer • Login.asp Hier kan de gebruiker een nieuwe account aanmaken (Signup), inloggen of zijn paswoord laten mailen. Signup: Dit bestaat uit een form met een aantal tekstvakken en een combobox met de landen. De landen worden geselecteerd met een selectiequery op de FedExdatabase. De combobox wordt opnieuw met een lus gevuld. Als value krijgen de landen de zone (landcode genaamd in de database) mee waartoe het

Figuur 14: Logingedeelte


43

behoort en de landnaam zelf. Bepaalde tekstvelden zijn verplicht in te vullen, andere niet (telefonnummer en faxnummer) . Op de verplichte tekstvakken zal dus een validatie moeten gebeuren. De gegevens worden bij submit verstuurd naar de zelfde pagina, login.asp. De validatie verloopt redelijk simpel: er wordt gecontroleerd of er geen lege waarden meegegeven worden en of de postcode numeriek is. Wanneer alles in orde blijkt te zijn, worden de gegevens naar de hoofddatabase geschreven, tabel TblKlanten. Dit gebeurt met een ander type query. In plaats van SELECT moeten we nu INSERT gebruiken. Code: ‘recordsetobject creëren Set objRS3 = Server.CreateObject("ADODB.Recordset") ‘SQLstring: strSQL = "INSERT into TblKlanten( KlantNaam, KlantVoornaam, KlantAdres, KlantPlaats, KlantPostcode, KlantLand, KlantStaat, KlantTelefoonnr, KlantFaxnr, KlantEmail, KlantPaswoord, KlantLandcode) values ('" & Request.Form("snaam") & "','" & Request.Form("sfamnaam") & "','" & Request.Form("sadres") & "','" & Request.Form("sstad") & "','" & Request.Form("szip") & "','" & Right(Request.Form("sland"),Len(Request.Form("sland"))-2) & "','" & Request.Form("sstaat") & "','" & Request.Form("stel") & "','" & Request.Form("sfax") & "','" & Request.Form("semail") & "','" & Request.Form("spas") & "','" & Left(Request.Form("sland"),1) & "')" ‘uitvoeren van de query objRS3.Open strSQL , Session("objDC")

Bij succes wordt het emailadres al ingevuld in de login-sectie en kunnen we dus inloggen. Login: Deze form wordt gesubmit naar Dologin.asp. Daar vindt ook de validatie plaats, de controle van login(emailadres) en paswoord. Stel dat er mensen zijn die hun paswoord vergeten zijn, kunnen zij dat laten mailen op mailme.asp. Deze pagina maakt gebruik van de CDONTS. Dit staat voor Collaboration Data Objects voor Windows NT Server. Het is een verzameling van COM-objecten, werkend onder Windows NT, IIS en SMTP (of Microsoft Exchange). Via deze objecten kunnen we emailberichten verzenden en ontvangen vanuit onze toepassing zelf, zonder daarvoor exchange te moeten hebben (dan gebruikt het SMTP). We hebben een hulpbestand nodig op de server: Cdonts.dll (op de brinkster server staat dit reeds standaard geinstalleerd). En in global. asa moeten we de CDOtypebibliotheek declareren. Code uit global.asa:

Figuur 15: Verzenden van het paswoord


44

Wat doen we nu in mailme.asp? De klant vult zijn emailadres in op een formulier die bij submit gepost wordt naar hetzelfde bestand: mailme.asp. Bij submit wordt met een selectiequery op TblKlanten gecontroleerd of de klant al dan niet bestaat in onze database. Indien het emailadres bestaat, wordt er een email gestuurd met het overeenkomstig paswoord uit de selectiequery. Code: <% ‘mailobject creëren Set MailObject = Server.CreateObject("CDONTS.NewMail") ‘emailadres van de afzender MailObject.From = "" ‘emailadres van de ontvanger van de email MailObject.To = Request.Form("memail") ‘onderwerp van de email MailObject.Subject = "Re: Your rugs-carpets.biz password" ‘inhoud van de email, plain text standard, het paswoord wordt uit de database ‘gehaald met een selectiequery MailObject.Body = "Here is your http://www.rugs-carpets.biz password: " & objRS2.Fields("KlantPaswoord") & ". Thanks for shopping with us." ‘zenden van de email MailObject.Send ‘Leeg maken van het object Set MailObject = Nothing %>

Laten we nu terugkeren naar Login.asp en inloggen naar Dologin.asp. • Dologin.asp Met een selectiequery op het emailadres controleren we of het emailadres bestaat en of het opgegeven paswoord overeenstemt met het dat voor het ingevulde emailadres. Indien deze gegevens kloppen, maken we een sessievariabele aan die ervoor zorgt dat de klant niet meer moet inloggen indien hij nog zaken wil toevoegen aan zijn winkelwagentje. In de hierboven beschreven selectiequery halen we alle klantgegevens op en tonen deze in een tabel. Op deze pagina moet de klant zijn leveringsdetails opgeven(shipping details). Hij krijgt hier de mogelijkheid om dezelfde gegevens te gebruiken als zijn klantgegevens. De landen in de combobox op het formulier worden op dezelfde manier opgevuld als in Login.asp. Wanneer de klant het bestemmingsland verandert, zal de form gesubmit worden naar Cart.asp. Dit heeft als gevolg dat de vervoerskosten in het winkelwagentje in rekening zullen worden gebracht.


45

Figuur 16: Verzendgegevens invullen en transportkosten berekenen

Eens de leveringsgegevens zijn ingevuld en er inhoud zit in het winkelwagentje, kan de klant verder gaan naar de betaalpagina. Dit regelen we met een enable functie, die reageert op de onChange-event van de in te vullen tekstvakken op het leveringsformulier. De gegevens van het leveringsformulier worden, bij het klikken op de “Pay orders”-knop meegestuurd naar Pay.asp in de URL.

3.5.8 Het betaalsysteem (in samenwerking met banksys) Banksys Banksys staat in voor de kredietkaartvalidering en kredietkaartprocessing op onze website. Hun(standaard)pagina is voorzien van een SSL verbinding zodanig dat wij dit niet moeten integreren. Wij willen de klanten de mogelijkheid bieden om Full-SET en Half-SET te betalen met VISA/MasterCard(internationaal). SET is een protocol, ontwikkeld door VISA, MASTERCARD en hun partners als standaard voor veilige betalingen op internet. Bij SET maakt men gebruik van certificaten en en encryptietechnologie. Deze manier maakt het onmogelijk om de gevoelige data te kunnen onderscheppen. Full-SET: De klant moet over een SET-wallet beschikken. Deze SET-wallet hangt vast aan zijn kredietkaart en kan worden aangevraagd bij de bank. Hier zijn we zekerder van de authenticiteit van de klant en weten we dat deze zeker


46

zal betalen. Het is echter nog niet zo bekend bij de gewone burger en dus moeten we nog steeds de mogelijkheid bieden om Half-SET te betalen ook. Half-SET: In dit geval moet de kaarthouder niet beschikken over een SETwallet. De betaling gebeurt door middel van een SSL formulier. Hier is de data enkel maar beschermd aan de serverside, wat het een minder veilige betaalmethode maakt dan Full-SET. Toch is deze methode heel veilig en wordt ze nog steeds meest gebruikt. De kostprijs voor een account bij banksys is 875€ voor de opzet en 65€ per maand. Ook wordt er nog eens 0,4€ aangerekend per geslaagde transactie. Na een aantal telefoongesprekken met Stephan Vanhoof, account manager van Banksys, is er een afspraak geregeld in het bedrijf. Weer moesten een aantal formaliteiten worden ingevuld en ondertekend. Ook hadden zij een kopie van de statuten van de maatschappij of een kopie van de inschrijving in het Handelsregister nodig. Nadat dit in orde was, konden ze beginnen met de opzet van onze account. Na de opzet van onze account op hun servers krijgen we nog enkele noodzakelijke gegevens en moeten wij nog enkele noodzakelijke gegevens opsturen. Tot op heden is onze account nog niet volledig opgezet. Normaal gezien duurt deze opzet 5 werkdagen, maar bij ons duurt dit nu al 3 weken. Nog toe te kennen door banksys: MerchantID (ID van onze winkel) Paswoord backoffice(betalingen afhandelen) Behalve de winkelgegevens en ons kredietkaartgegevens had Banksys nog een aantal gegevens van onze website nodig en een ander, door ons toegekend, paswoord. Een aantal URL’s moesten worden gemaakt om te kunnen communiceren met de banksysmodule: à confirmatie URL: wordt uitgevoerd bij een volledig geslaagde transactie. Een aantal zaken kunnen we daarbij zelf nog integreren: versturen van een confirmatie-email, updaten van de database, …. (http://www.rugs-carpets.biz/conf.asp) à validatie URL: vergelijken van ons gegevens(database) met die van Banksys. (http://www.rugs-carpets.biz/validate.asp) à OK URL: als alles succesvol gebeurd is in de confirmatie zal de eindgebruiker naar deze URL verwezen worden. (http://www.rugs-carpets.biz/OK.asp) à NIET-OK URL: wanneer er ergens iets is misgegaan, zal de klant deze pagina te zien krijgen. (http://www.rugs-carpets.biz/NOK.asp) à Notification email: Het emailadres waar de log van de transactie wordt gestuurd ()


47

Pay.asp

Figuur 17: Keuze van betaling

Dit is de pagina waar er kan gekozen worden wat men zal gebruiken als betaalmiddel. De verzendgegevens worden van Dologin.asp naar deze pagina gestuurd. Bij aankomst op deze pagina worden de verzendgegevens in TblOrders opgeslagen met een toevoegquery. Met een lus worden dan de sessievariabelen uit het winkelwagentje naar de tabel TblOrderInfo geschreven. Dit gebeurt ook met een toevoegquery. Belangrijk hierbij is dat we voor beide query’s dezelfde VerzendID gebruiken. Daarom gaan we eerst de VerzendID van de laatste record halen uit de tabel TblOrders. Dit doen we met een selectiequery. Die waarde steken we dan in een variabele en verhogen we met 1. Die variabele wordt dan onze verzendID die we in beide toevoegquery’s zullen gebruiken. We zorgen er ook voor dat de Remove-knoppen in het winkelwagentje verdwijnen omdat de orders al weggeschreven zijn naar de database. Dit doen we door een sessievariabele (Session(“Pay”)) in te stellen op 1 en de rechterframe te refreshen. In cart.asp worden de removeknoppen getoond aan de hand van deze sessievariabele(zie 3.5.6). Er staan op Pay.asp 2 forms waarvan enkel de submitknoppen zichtbaar zijn. Éen form per betalingsmogelijkheid, dus 1 voor Half-SET te betalen en 1 om Full-SET te betalen. Code: ‘en


48

Op deze forms staan een aantal verborgen tekstvakken die namen dragen die ons zijn opgegeven door Banksys. Volgende tekstvakken moeten zeker op onze forms terug te vinden zijn: à : Commando dat nodig is in de banksysmodule. à : De ID van onze ‘winkel’. Zoals reeds gezegd hebben we deze nog niet ontvangen. à ">: De totaalprijs van hetgeen de klant heeft gekocht, inclusief de transportkosten (wordt gevraagd in Eurocent) à : Het verzendID die we voor de bestelling in de database hebben weggeschreven. à : een beschrijving van de bestelling, is minder van belang. à : de gebruikte munteenheid. 0978 is de Iso-code voor Euro. à : de taal die moet gebruikt worden op de betaalpagina. Doordat de site al volledig Engels is, zal hier ook Engels gebruikt worden. à : De logo’s van Half-SET en Full-SET worden als submit-knop gebruikt. Let er voor op dat hier geen parameter NAME=”…” wordt gebruikt, dit zal resulteren in een fout resultaat op de server van Banksys.

Betaling

Figuur 18: Banksys module

Eens de gebruiker een betalingsmethode heeft gekozen, komt hij dan op de betaalpagina van Banksys terecht. Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

49

De klant tikt zijn betalingsgegevens in en klikt hier terug op “Pay”. Vooraleer de betaling doorgevoerd wordt, worden de betalingsgegevens gecontroleerd en wordt ons validation-script (validation.asp) aangeroepen. Als dit validationscript een [OK] terugstuurt, dan zitten we al goed op weg voor een geslaagde transactie. Validation.asp Er worden van Banksys een aantal parameters meegestuurd in de URL: onze winkelID, de verzendID, de prijs en de munteenheid. Onze taak bestaat er dan in om de toegestuurde gegevens te vergelijken met deze die we hebben weggeschreven naar de database voor dat verzendID. Indien deze gegevens blijken te kloppen, moeten we een [OK] uitschrijven op die pagina, indien niet een [NOK] (dit doen we met een eenvoudige document.write(“[OK]”)). Nu wordt de klant naar onze OK.asp gestuurd. Op dit moment is de transactie nog steeds niet geslaagd. Er worden nog variabelen gestuurd naar onze confirmatie pagina. En wanneer daar de gegevens in orde blijken te zijn, kunnen we ervan uitgaan dat de transactie geslaagd is. conf.asp Hier worden alle parameters die we in het begin hebben opgesturd naar ons teruggestuurd(in de URL). Dit gebeurt samen met nog een aantal extra parameters: een paswoord dat bij de opzet door ons is gekozen, datum en uur van de transactie en het IP-nummer van de klant. Als het teruggestuurde paswoord hetzelfde is als ons paswoord kan de confirmatie doorgaan en kunnen we ervan uitgaan dat de betaling geslaagd is. In de confirmatie-sectie moeten we dan op de één of andere manier aangeven dat de transactie geslaagd is. Dit doen we met een bijwerkquery. We veranderen het veld “betaald” van de gekregen verzendID van “nee” naar “ja” in de tabel TblOrders van de hoofddatabase. Verder zijn we vrij. In ons geval gaan we een confirmatie-email versturen naar de klant en het winkelwagentje legen (session.Abandon). Met behulp van een selectiequery filteren we de orderdetails voor het gekregen VerzendID. Die gegevens kennen we, op dezelfde manier als in het winkelwagentje, toe aan een string met html-inhoud (code: zie bijlagen). Wel moeten we aan het mailobject nog vertellen dat er html-inhoud in de mail staat en dit dus zo moet verwerkt en verstuurd worden. We versturen ook een blinde kopie van de email naar onze sales-afdeling van Boomtex zodanig dat de productie kan beginnen. Code: MailObject.BCC = "" ‘aangeven waar de locatie is voor de bronbestanden (index.css) MailObject.ContentBase = "http://www.rugs-carpets.biz/" ‘aangeven waar de locatie is voor de bronfiguren MailObject.ContentLocation = "Imagesm/" ‘het mailformaat en body formaat instellen MailObject.MailFormat = cdoMailFormatMime MailObject.BodyFormat = cdoBodyFormatHTML


50

Figuur 19: Voorbeeld van een orderbevestiging

OK.asp Hier wordt enkel de VerzendID meegestuurd in de URL. Wanneer men toekomt op deze pagina is de confirmatie waarschijnlijk nog niet volledig gebeurd. Daarom wordt een tekst geplaatst met de melding dat de betaling nog in behandeling is. Om de 7 seconden wordt die pagina dan gerefresht om te zien of de confirmatie al is toegekomen. Dit controleren we aan de hand van het “betaald”-veld in de tabel TblOrders. We doen dit opnieuw met een selectiequery. Wanneer dat veld op “ja” komt te staan wordt de klant bedankt voor zijn bestelling en verteld dat een e-mail met de orderdetails verstuurd is. Dan krijgt hij de mogelijkheid om terug te keren naar de hoofdpagina Als onze integratie bij Banksys compleet is, dan krijgen we ook toegang tot de backoffice, waar we de orders kunnen bekijken en/of verwerken. Helaas hebben we daar het paswoord nog niet voor gekregen en kunnen we nog geen betalingen aanvaarden. Eerstdaags zou dit moeten in orde moeten komen.


51

NOK.asp Deze pagina krijgt de gebruiker te zien wanneer er iets is misgelopen tijdens de betaling. Hij wordt terug doorverwezen naar de winkelpagina waar hij een nieuwe bestelling kan plaatsen.

3.5.9 Overige pagina’s De overige pagina’s bevatten vooral links en nuttige informatie. Deze zijn opgebouwd uit simpele HTML code met hier en daar een javascript functie. De css-pagina wordt in iedere pagina opgeroepen en is opgenomen in de bijlagen.In logout.asp doe ik een Session.Abandon om alle sessievariabelen te wissen. De teksten op de home- en companypagina zijn door Koen geschreven.

3.6 Grafisch De bitmapbestanden die ik binnenkrijg hebben meestal een grote bestandsgrootte en staan in 5 kleuren. De opdrachtgever wil niet dat ze in diezelfde 5 kleuren op de website komen te staan. Dit uit veiligheidsoverwegingen qua namaak. Daarom zullen we kleuren toevoegen en opslaan als gif in 27 kleuren. Het is niet aangeraden om alle bestanden(111) manueel te gaan aanpassen. Daarom zullen we met een batch doen in Photoshop. We doen de uit te voeren acties één keer op 1 bitmap met de macro recorder. Dan met File Æ Automate Æ Batch laten we deze macro uitvoeren op alle bestanden. Hetzelfde doen we voor de grote versies (uitvergrootte thumbnails).

Figuur 20: Batch van de bitmapbestanden


52

Doordat we in de macro al op een bestaande directory hebben gesaved, moet er in de batch geen doeldirectory moeten worden aangegeven. Een brondirectory uiteraard wel. Verder werden nog een aantal typerende tapijten bewerkt in Photoshop om op de home-pagina te zetten.


53

Besluit

Door het maken van deze website heb ik veel bijgeleerd op allerhande vlakken. Vooral mijn ASP kennis is enorm gegroeid gedurende het ontwikkelingsproces. Vooraf is het belangrijk de database structuur goed en logisch in elkaar te steken zo we later niet in de problemen komen. Goede hosting, zoals Brinkster die aanbiedt, is hierbij ook belangrijk zodanig dat we een snelle datatransfer en een veilige structuur hebben. Bij de ontwikkeling van een E-commerce site komt er heel wat meer bij kijken dan enkel programmeerwerk. Externe partners zijn dus zeker van doen. De communicatie naar deze externe partners is heel belangrijk met het oog op een goede samenwerking. Soms vraagt de opdrachtgever ook zaken die technisch moeilijk of niet haalbaar zijn. Als ontwikkelaar moet je hierop inspelen door alternatieven te bedenken en tussenoplossingen aan te bieden. Het eindresultaat benadert goed het vooropgestelde eisenpakket, het is nu nog enkel wachten op enkele gegevens van Banksys vooraleer er grondig kan worden getest op effectieve betalingen. In de toekomst zouden toch nog wat zaken moeten gebeuren. Vooreerst denk ik aan de publiciteit en de marketing rond deze website. Grafisch kan er ook nog heel wat verbeterd worden. En indien de database te groot zou worden, zou deze kunnen geëmigreerd worden naar SQL server. Maar voorlopig gaat dit vlot. Doordat ik genoodzaakt was om zelfstandig te werken heb ik veel beslissingen zelf moeten/mogen nemen. Ik dank Koen Devos hiervoor om zoveel vertrouwen in mij te stellen.


54

Bijlage 1. Aansluitingsaanvraag Bank Card Company


55


56


57

3. Index.css body{ font-family: Arial; font-size: 12px; color: #cccccc; background-color: #2c2c2c; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#2c2c2c; scrollbar-shadow-color:#dddddd; scrollbar-face-color:#2d2d2d; scrollbar-highlight-color:#4f4f4f; scrollbar-3d-light-color:#888888; } h1 { font-family: Verdana; Font-weight: 600; font-size: 15px; color: #ffffff; } HR { height: 1px; } select, input { color: #cccccc; background-color: #2c2c2c; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-width: 1; border-bottom-width: 2; border-left-width: 1; border-right-width: 2; border-top-color: #4f4f4f; border-bottom-color: #dddddd; border-left-color: #4f4f4f; border-right-color: #dddddd; font-size: 11px; } button { color: #cccccc; background-color: #2c2c2c; border-top-style: 3D; border-bottom-style: 3D; border-left-style: 3D; border-right-style: 3D; border-top-width: 2; border-bottom-width: 3; border-left-width: 2; border-right-width: 3; border-top-color: #4f4f4f; border-bottom-color: #dddddd; border-left-color: #4f4f4f; border-right-color: #dddddd; font-size: 11px; }

A:link { COLOR: #aaaaaa; FONT-FAMILY: Verdana; FONT-SIZE: 13px; FONT-WEIGHT: 500; TEXT-DECORATION: none; } A:active { FONT-WEIGHT: 500; COLOR: #ffcccc; FONT-FAMILY: Verdana; FONT-SIZE: 13px; TEXT-DECORATION: none; } A:visited { COLOR: #aaaaaa; FONT-WEIGHT: 500; FONT-FAMILY: Verdana; FONT-SIZE: 13px; TEXT-DECORATION: none; } A:hover { FONT-WEIGHT: 500; COLOR: #ffffff; FONT-FAMILY: Verdana; FONT-SIZE: 13px; } td { font-family:Futura; font-size:11; } .logg { position: absolute; right: 10; color: ddddaa; font-family: Verdana; font-size: 11; } .skleur { width:100; height:50; position: relative; left:5; font-size: 11px; } .output { Color: #ddddaa; Font-size: 10 px; Font-family: Verdana; Font-weight: 550; }


58 .output2 { Color: #ddaaaa; Font-size: 10 px; Font-family: Verdana; Font-weight: 550; } .dubb { Position:relative; top: -101; } .gegg { background-color:#777777; border: 1; border-color: #f1f1f1; cell-spacing:50; cell-padding:30; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-TOP-STYLE: solid; font-size: 13; font-family: futura; color: #121212; } .gegg2 { background-color:#777777; border: 1; border-color: #f1f1f1; cell-spacing:50; cell-padding:30; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-TOP-STYLE: solid; font-size: 11; font-family: Verdana; color: #ededed; } .menu { font-size: 14; font-weight: 550; font-family: verdana; position: absolute; Top:55; Left:28; line-height:19px; color: white; } .menu1 { font-size: 14; font-weight: 550; font-family: verdana; position: absolute; Top:95; Left:20; line-height:19px; color: white; }

.menu2 { font-size: 14; font-weight: 550; font-family: verdana; position: absolute; Top:135; Left:15; line-height:19px; color: white; } .menu3 { font-size: 14; font-weight: 550; font-family: verdana; position: absolute; Top:210; Left:20; line-height:19px; color: white; } .menu4 { font-size: 14; font-weight: 550; font-family: verdana; position: absolute; Top:250; Left:27; line-height:19px; color: white; } .mnuVisa { position: absolute; bottom:2; Left:6; line-height:19px; background:#2c2c2c; } .mnu2 { font-size: 12; font-weight: 550; font-family: verdana; position: absolute; Top:66; Left:0; height: 17; line-height:19px; color: white; background:#777777; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-width: 1; border-bottom-width: 0; border-left-width: 0; border-right-width: 10; border-top-color: #ffffff; border-bottom-color: #ffffff; border-left-color: #ffffff; border-right-color: #ffffff; }


59 .rij { cursor:hand; border-right:1px solid white; border-top: 1px solid white; } .ritj { border-right:1px solid white; border-top: 1px solid white; } .rij2 { cursor:hand; border-bottom:1px solid white; border-right:1px solid white; } .gegg input, .gegg select { color: #111111; background-color: #c3c3c3; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-width: 1; border-bottom-width: 2; border-left-width: 1; border-right-width: 2; border-top-color: #4f4f4f; border-bottom-color: #dddddd; border-left-color: #4f4f4f; border-right-color: #dddddd; font-size: 11px; } .gegg button { color: #111111; background-color: #c3c3c3; border-top-style: 3D; border-bottom-style: 3D; border-left-style: 3D; border-right-style: 3D; border-top-width: 1; border-bottom-width: 2; border-left-width: 1; border-right-width: 2; border-top-color: #4f4f4f; border-bottom-color: #dddddd; border-left-color: #4f4f4f; border-right-color: #dddddd; font-size: 11px; } .klant { width: 450; font-size: 11px; font-family: verdana; font-weight: 550; color: white; }

.af { width:100; height:50; position: relative; left:4; font-size: 11px; } .titels { Font-size:13; font-weight: 700; font-family: futura; } .prijs { width: 49; height: 19; position: relative; left:7; font-size: 11px; } .mail { width: 175; height: 19; text-align: left; font-size: 11px; } .pwd { width: 70; height: 19; font-size: 11px; text-align: left; } .kleur { width:180; height:14; font-size: 15px } .dummyklein{ width:120; } .check { width:60; } .continue { width:150; } .navii { BACKGROUND-ATTACHMENT: fixed; BACKGROUND-POSITION: top left; BACKGROUND-REPEAT: no-repeat; } .prodtab { font-family: Futura; font-size: 19px; color: #eaeaea; }


60 .add { color: #cccccc; background: #2c2c2c; effect: solid; font-size: 11px; text-align: center; left: 5px; top:1; position: relative; width:35; height: 21; } .temp { color: #cccccc; background: #2c2c2c; effect: solid; } .space { position: relative; top: 6; } .space1 { position: relative; top: 12; } .space2 { position: relative; top: 17; } .cart{ border: 1; border-color: #aaaaaa; cell-spacing:0; cell-padding:0; BORDER-BOTTOM-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-TOP-STYLE: solid; font-size: 13; font-family: futura; color: #cccccc; } .nob { color: #cccccc; background-color: #2c2c2c; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-width: 0; border-bottom-width: 0; border-left-width: 0; border-right-width: 0; } .kwal { font-size: 14; font-family: futura; color: #ffffff; }

.hid { display: none; visible: no; border: none 0; background: inherit; color: #2c2c2c; } .home { font-family: Verdana; font-size: 11; width: 100%; } .cen { text-align:center; color: f1f1f1; font-family: Verdana; width:20%; } .links { text-align:left; color: d4d4d4; font-family: Verdana; width:80%; } .cen A:link { COLOR: #ccccdd; FONT-FAMILY: Verdana; FONT-SIZE: 12px; FONT-WEIGHT: 500; TEXT-DECORATION: none; } .cen A:active { FONT-WEIGHT: 500; COLOR: #ddcccc; FONT-FAMILY: Verdana; FONT-SIZE: 12px; TEXT-DECORATION: none; } .cen A:visited { COLOR: #ccccdd; FONT-WEIGHT: 500; FONT-FAMILY: Verdana; FONT-SIZE: 12px; TEXT-DECORATION: none; } .cen A:hover { FONT-WEIGHT: 500; COLOR: #ccccdd; FONT-FAMILY: Verdana; FONT-SIZE: 12px; TEXT-DECORATION: underline }


61

.copy { font-size: 11; font-weight: 550; font-family: verdana;

position: absolute; bottom:4; Right:4; color: 757575; }

2. Code van de confirmatie (conf.asp) <%@ language="VBScript"%> <% If Request("Password") = "DC8540BT" Then Dim objRS Dim objRS2 Dim MailObject Dim strBody Dim strCel Set objRS = Server.CreateObject("ADODB.Recordset") Set objRS2 = Server.CreateObject("ADODB.Recordset") Set objRS3 = Server.CreateObject("ADODB.Recordset") sSQL = "SELECT TblKlanten.KlantEmail As Email, TblOrders.VerzendID As OrderID, TblOrders.OrderDatum As Odatum, TblOrders.TotaalKosten As Prijs, TblOrders.VerzendNaam As Naam, TblOrders.VerzendVoorNaam As Voornaam, TblOrders.VerzendAdres As Adres, TblOrders.VerzendPlaats As Plaats, TblOrders.VerzendPostcode As Postcode, TblOrders.VerzendLand As Land, TblOrders.VerzendStaat As Staat FROM TblOrders INNER JOIN (TblKlanten INNER JOIN TblOrderInfo ON TblKlanten.KlantID = TblOrderInfo.KlantID) ON TblOrders.VerzendID = TblOrderInfo.VerzendID GROUP BY TblKlanten.KlantEmail, TblOrders.VerzendID, TblOrders.OrderDatum, TblOrders.TotaalKosten, TblOrders.VerzendNaam, TblOrders.VerzendVoorNaam, TblOrders.VerzendAdres, TblOrders.VerzendPlaats, TblOrders.VerzendPostcode, TblOrders.VerzendLand, TblOrders.VerzendStaat HAVING (((TblOrders.VerzendID)=" & Request("Ref") & "))" sSQL2 = "SELECT TblKwaliteit.KwaliteitNaam As Kwal, TblOrderInfo.VerzendID, TblTapijt.Tapijtnummer As Tapijt, TblTapijt.bron As Bron, TblTapijt.Kleur As Kleur, TblOrderInfo.TapijtAfmeting As Afm FROM TblKwaliteit INNER JOIN (TblTapijt INNER JOIN TblOrderInfo ON TblTapijt.Tapijt_ID = TblOrderInfo.TapijtID) ON TblKwaliteit.KwaliteitID = TblTapijt.KwaliteitID WHERE (((TblOrderInfo.VerzendID)=" & Request("Ref") & ")) ORDER BY TblKwaliteit.KwaliteitNaam" sSQL3 = "UPDATE TblOrders (((TblOrders.VerzendID)=" & Request("Ref") & "))"

SET

TblOrders.Betaald

=

'Ja'

WHERE

objRS.Open sSQL , Session("objDC"), 1, 1 objRS2.Open sSQL2 , Session("objDC"), 1, 1 objRS3.Open sSQL3 , Session("objDC"), 1, 1 If Not objRS.EOF Then Set MailObject = Server.CreateObject("CDONTS.NewMail") MailObject.From = "" MailObject.BCC = "" MailObject.To = objRS.Fields("Email") MailObject.Subject = "Your orders have been placed @ rugs-carpets.biz" strBody = "" & _ "Orders" strBody = strBody & "
Payment
Thank you for shopping www.rugs-carpets.biz
Your creditcard has been charged for " & Request("Amount") & " Euro (Shipping with Fedex included)

Your orders placed on " & objRS.Fields("ODatum") & ":

" Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

62 objRS2.MoveFirst strTabel = "" Do While Not objRS2.EOF ‘cel 1 strCel = "" ‘eerste cel bevat rijbegin strTabel = strTabel & "" & strCel objRS2.MoveNext If Not objRS2.EOF Then ‘cel 2 strCel = "" strTabel = strTabel & strCel objRS2.MoveNext End If If Not objRS2.EOF Then ‘cel3 strCel = "" ‘laatste cel bevat rijeinde strTabel = strTabel & strCel & "" objRS2.MoveNext End If loop objRS2.Close strBody = strBody & strTabel & "

Design : " & objRS2.Fields("Tapijt") & "

Quality : " & ObjRS2.Fields("Kwal") & "

Color : " & ObjRS2.Fields("Kleur") & "

Size : " & objRS2.Fields("Afm") & "
Design : " & objRS2.Fields("Tapijt") & "



Size : " & objRS2.Fields("Afm") & " Design : " & objRS2.Fields("Tapijt") & "



Size : " & objRS2.Fields("Afm") & "

Shipping Details
" strBody = strBody & "" strBody = strBody & "" strBody = strBody & "" strBody = strBody & "" strBody = strBody & "
Name: " & objRS.Fields("Voornaam") & " " & objRS.Fields("Naam") & "
Address: " & objRS.Fields("Adres") &_ "
Zip: " & objRS.Fields("Postcode") & "
City: " & objRS.Fields("Plaats") & "
State: " & objRS.Fields("Staat") & "
Country: " & objRS.Fields("Land") & "
Shipping takes place within max 10 days

Questions about your order? Contact " MailObject.ContentBase = "http://www.rugs-carpets.biz/" MailObject.ContentLocation = "Imagesm/" MailObject.MailFormat = cdoMailFormatMime MailObject.BodyFormat = cdoBodyFormatHTML MailObject.Body = strBody MailObject.Send Set MailObject = Nothing ‘ Dit is de URL die we normaal van BankSys terugkrijgen, dit order bestaat , gebruik om te testen ‘testURL Tomas 'http://www.rugscarpets.biz/conf.asp?Shop=Boomtex&Ref=5&Transact=59684&Amount=420.30&Devise=EUR&Password=DC854 0BT&Var1=&Var2=BCMC&Var3=&Var4=&Var5=&Var6=&Var7=&Var8=&Var9=&RemoteAddr=192.168.10.2 &DateTime=01/05/200201:08:59&Method=VISA/MC Vandenabeele Tomas – Graduaat Multimedia en Communicatietechnologie Ontwikkelen van een internationale E-commerce site

63

‘testURL Hans 'http://www.rugscarpets.biz/conf.asp?Shop=Boomtex&Ref=52&Transact=59684&Amount=435.66&Devise=EUR&Password=DC85 40BT&Var1=&Var2=BCMC&Var3=&Var4=&Var5=&Var6=&Var7=&Var8=&Var9=&RemoteAddr=192.168.10.2 &DateTime=12/05/200201:08:59&Method=VISA/MC Session.Abandon Session("tmpmail") = objRS.Fields("Email") objRS.Close Session("objDC").Close Set Session("objDC") = Nothing Set objRS3 = Nothing Set objRS2 = Nothing Set objRS = Nothing Else End If Else End if %>


64

Figurenlijst Figuur 1: Grafische voorstelling van ons project...................................................... 13 Figuur 2: Beheersectie .biz domeinnamen .............................................................. 17 Figuur 3: Email Manager op de Brinkster site.......................................................... 19 Figuur 4: ER-diagram van onze database ............................................................... 24 Figuur 5: Relationeel model..................................................................................... 26 Figuur 6: Query voor het berekenen van de gewichten per afmeting en kwaliteit.... 27 Figuur 7: Query voor het berekenen van de prijzen per afmeting en kwaliteit ......... 27 Figuur 8: Een nieuw tapijt opnemen in de database................................................ 27 Figuur 9: Een tapijt verwijderen uit de database...................................................... 28 Figuur 10: Schematisch overzicht van de navigatie.................................................. 32 Figuur 11: Framestructuur van de website ............................................................... 33 Figuur 12: Zoeken databasedirectory ....................................................................... 35 Figuur 13: Screenshot van het winkelgedeelte ......................................................... 36 Figuur 14: Logingedeelte .......................................................................................... 42 Figuur 15: Verzenden van het paswoord .................................................................. 43 Figuur 16: Verzendgegevens invullen en transportkosten berekenen ...................... 45 Figuur 17: Keuze van betaling .................................................................................. 47 Figuur 18: Banksys module ...................................................................................... 48 Figuur 19: Voorbeeld van een orderbevestiging ....................................................... 50 Figuur 20: Batch van de bitmapbestanden ............................................................... 51


65

Verklarende woordenlijst HTML CSS Javascript

ASP

IIS Intellisense SSL SET ADO SQL DOM

Hyper Text Markup Language. een taal die je in staat stelt tekst en multimediabestanden te voorzien van een eenvoudige structuur. Cascading Style Sheet; een uitbreiding op html om opmaak te voorzien. Dit kan in de htmlpagina zelf of in een externe pagina. (bestand.css) Een clientside scriptingtaal waardoor wij bepaalde routines kunnen gaan uitvoeren en zaken binnen webpagina’s dynamisch gaan aanpassen. Dit kaneveneens in de webpagina geïntegreerd zijn of als extern bestand bestaan. (bestand.js) Active Server Pages. Dit is een serverside technologie waarbij elke scriptingtaal kan worden gebruikt. Het groet voordeel hierbij is dat de code op de server wordt gecompileerd en onzichtbaar is voor de gebruiker. Internet Information Server. Een tool die het mogelijk maakt om een webserver op te zetten en om bestanden te delen over internet. Het automatisch aanvullen van de juiste code (zoals in visual basic) Secure Socket Layer. Een protocol die geëncrypteerde communicatie mogelijk maakt op het internet. Secure Electronic Transaction. Een protocol, ontwikkeld door VISA, MASTERCARD en hun partners als standaard voor veilige betalingen op internet.. ActiveX data Objects. Een interface, ontwikkeld door Microsoft voor het verzamelen van allerhande data. Dit is een manier om bvb rap en consistent data een database te halen. Structured Query Language. Daarmee kan de inhoud van tabellen worden geselecteerd(SELECT), gemaakt(INSERT), verwijdert(DELETE) of verandert(UPDATE). Document Object Model: Een W3C specificatie om toegang te krijgen tot de data (tags en inhoud) van webpagina’s en XML documenten.


66

Bronnenlijst BOEKEN Weissinger Keyton (1999), ‘ASP in een notendop’, Academic Service (origineel: O’Reilly & Associates), Schoonhoven Kroenke David Schoonhoven

(2000),

‘Leerboek

Databases’,

Academic

Service

URL’s 1. ASP - Databases Bijna dagelijks gebruik van http://groups.google.com (zoeken over een groot aantal newsgroups, met veelal succesvol resultaat) MSDN (2000), ‘25+ ASP Tips to Improve Performance and Style’, http://msdn.microsoft.com/library/default.asp?URL=/library/enus/dnasp/html/ASPtips.asp, (21-10-2001) Scott Mitchell (2002), ‘4GuysFromRolla.com - ASPFAQS.com : Databases, General’, http://www.aspfaqs.com/aspfaqs/ShowCategory.asp?CatID=8, (1010-2001) Carl Prothman (2001), ‘ADO connection String samples’, http://www.ableconsulting.com/ADO_Conn.htm, (15-10-2001) [asp101.com] (2002), ‘ASP 101 - Samples’, http://www.asp101.com/samples/viewasp.asp?file=shopping%2Easp, (7-122001) [] (2001), ‘ASP Crash Course’, http://www.comp.nus.edu.sg/~dbmslab/Software/aspintro.htm, (17-10-2001) Charles Carroll (1998 – 2000), ‘ASP Database Tutorials’, http://www.activeserverpages.com/database/, (9-10-2001) [Developersdex] (2002), ‘ASPdex - Sample Code – Databases’, http://www.developersdex.com/asp/default.asp?p=963, (9-11-2001) [InfoGenius] (2001), ‘Database - Aspin.com’, http://www.aspin.com/home/tutorial/database, (26-10-2001) Michael Brinkley (2001), ‘Online compacting of Access databases’, http://www.aspalliance.com/mbrink1111/compact.asp, (21-12-2001)


,

67

2. E-commerce [BCC] (2001), ‘BCC – SSL betalingen aanvaarden via internet’, http://www.bcc.be/nl/merchant/SSLpayments.cfm, (11-01-2002) [Verisign] (2001), ‘Building an E-Commerce Trust Infrastructure’, http://www.verisign.com/resources/gd/buildEcommerce/index.html, (26-102001) Herman Van Uytven (2000), ‘E-commerce gebruikersgids’, http://mailserv.cc.kuleuven.ac.be/ecommerce/ecommerce.htm, (22-10-2001) [programmersresource.com] (2001), ‘eCOMMERCE SITES’, http://www.programmersresource.com/ecomm/, (09-11-2001) Kevin Hakman (1999), ‘E-Commerce Tutorial’, http://hotwired.lycos.com/webmonkey/99/04/index0a.html, (22-10-2001) [Fedex] (2002), ‘Fedex - eBusiness Tools’, http://www.fedex.com/be/ebusiness/solutionspartners.html?link=2, (16-112001) [Gojasper] (2001), ‘Gojasper - E-commerce Industry’, http://www.gojasper.be/ecomindus, (11-01-2002) [NetBilling] (2001), ‘NetBilling – Questions’, http://www.netbilling.com/info.html, (09-11-2001) [GlobalSign] (2001), ‘ServerSign Certificaatprocedure’, http://secure.globalsign.net/phoenixng/request.cfm?id=1566442875&language =nl&reset=yes, (26-10-2001) Bill Gearhart (2001), ‘The ASP Emporium - JScript Source Code for creditcard_object.asp’, http://www.aspemporium.com/aspEmporium/src/js_srcview.asp?source=credit card_object.asp, (30-11-2001)


Design : " & objRS2.Fields("Tapijt") & " Quality : " & ObjRS2.Fields("Kwal") & " Color : " & ObjRS2.Fields("Kleur") & " Size : " & objRS2.Fields("Afm") & "
				Design : " & objRS2.Fields("Tapijt") & " Quality : " & ObjRS2.Fields("Kwal") & " Color : " & ObjRS2.Fields("Kleur") & " Size : " & objRS2.Fields("Afm") & "						Design : " & objRS2.Fields("Tapijt") & " Quality : " & ObjRS2.Fields("Kwal") & " Color : " & ObjRS2.Fields("Kleur") & " Size : " & objRS2.Fields("Afm") & "

Name:	" & objRS.Fields("Voornaam") & " " & objRS.Fields("Naam") & "
Address:	" & objRS.Fields("Adres") &_ "
Zip:	" & objRS.Fields("Postcode") & "
City:	" & objRS.Fields("Plaats") & "
State:	" & objRS.Fields("Staat") & "
Country:	" & objRS.Fields("Land") & "

Opzet van een internationale E-commerce site

Recommend Documents