Historisk Dynamisk Danmarks Kort

Dynamisk Danmarks Kort & Historisk Dynamisk Danmarks Kort [Abdullah H Al-kasseb] [Studie nummer: s021181] [Løbenummer: IMM-Eng-2008-22]

Forord. Denne rapport er udarbejdet for søndagsavisen, rapporten omhandler opbygning og implementering af Dynamisk Danmarks kort (DDK) samtidig har Søndagsavisen bedt om at få lavet et Historisk Danmarks Kort (HDDK). Dynamisk Danmarks kort skal hjælpe søndagsavisens arbejde med at omlægge regionerne for avisens oplæg osv. samtidig kan Søndagsavisens kunder benytte DDK for at kunne informere sig om avisens oplæg for bestemte regioner. Der er yderligere tilføjet en søgefunktion samt en historik del. Søgefunktionen benyttes til at søge på postnummer, hvor området med den søgte postnummer skifter farve på Danmarks kortet. Historik delen (HDDK) benyttes hovedsageligt til søndagsavisens interne medarbejdere, denne del indeholder diverse data om oplægsantal og priser osv. For at holde DDK og HDDK lidt adskilt fra hinanden er det i rapporten valgt at beskrive hver del for sig. 2

INDHOLDSFORTEGNELSE DYNAMISK DANMARKS KORT &... 1 HISTORISK DYNAMISK DANMARKS KORT... 1 FORORD... 2 DDK / HDDK... 5 INDLEDNING... 5 DDK... 5 HDDK... 7 PROBLEMFORMULERING... 8 DDK... 8 HDDK... 10 DDK ANALYSE OG DESIGN... 12 DDK ANALYSE OG DESIGN-DEL 1:... 12 DDK APPLIKATION DIAGRAM... 14 DDK APPLIKATION DIAGRAM DEL-1... 14 ANALYSE OG DESIGN-DEL 2:... 15 DDK APPLIKATION DIAGRAM DEL-2... 17 HDDK ANALYSE OG DESIGN:... 18 HDDK ANALYSE OG DESIGN-DEL 1:... 18 HDDK APPLIKATION DIAGRAM DEL-1... 20 HDDK ANALYSE OG DESIGN-DEL 2:... 21 HDDK APPLIKATION DIAGRAM DEL-2... 22 PROJEKT TEKNOLOGIER DDK & HDDK:... 23 IMPLEMENTERING DDK:... 25 IMPLEMENTERING HDDK:... 32 BRUGE VEJLEDNING:... 37 DDK... 37 DDK ADMINISTRATION PROGRAMMET:... 37 HDDK... 37 HDDK ADMINISTRATION PROGRAMMET:... 37 TEST DDK / HDDK:... 38 KILDEANGIVELSE:... 38 KONKLUSION DDK / HDDK:... 39 DDK... 39 APPENDIKS DDK:... 40 FIGUR 1... 40 FIGUR 2... 41 3

FIGUR 3... 42 FIGUR 4... 43 FIGUR 5.... 44 FIGUR 6.... 45 FIGUR 7.... 45 FIGUR 8.... 46 FIGUR 9.... 47 FIGUR 10... 47 FIGUR 11... 48 FIGUR 12... 48 FIGUR 13... 49 FIGUR 14... 50 FIGUR 15... 51 FIGUR 16... 52 APPENDIKS DDK SOURCEKODE:... 53 DDK... 53 DDK ADMINISTRATIONSPROGRAM:... 75 APPENDIKS HDDK SOURCEKODE:... 79 HDDK:... 79 HDDK ADMINISTRATIONSPROGRAM:... 101 4

DDK / HDDK Indledning DDK Der er mange virksomheder som benytter Danmarkskortet på deres hjemmeside, nogen virksomheder benytter kortet som søgeredskab for at finde adresser eller post nummer samt rutteplanlægning, og andre benytter det til at planlægge deres service inden for et bestemt område. Virksomhedernes service kan opdeles i regioner, hvor en virksomhed kan definere en region som de har størst interesse i, på denne måde har virksomheden overblik over hvilken region / delregion deres hovedinteresser ligger i. Søndagsavisen bruger Danmarks kortet til at kontrollere deres oplag i de forskellige regioner i Danmark. Det er ikke kun personalet hos Søndagsavisen men også deres kunder som bruger disse oplysninger. Søndagsavisens kunder benytter disse oplysninger til f.eks. når en virksomhed vil indsætte deres reklame i Søndagsavisen. Søndagsavisen har et landskort på deres hjemmeside, linket til dette kort er følgende.: www.sondagsavisen.dk/site/laser/dinsondagsavisen/, den fungerer efter hensigten, men eftersom den er programmeret i HTML har den nogle begrænsninger. For den eksisterende hjemmeside kan følgende begrænsninger nævnes. På kortet er det ikke byerne men kun regionerne der vises. Den er meget besværlig at ændre på regionerne, f.eks. når en by skal tilføjes eller fjernes fra en region, da alt arbejdet skal gøres manuelt, kræver disse ændringer meget arbejdskræft. Begrundelsen for det store ressourceforbrug er den at de ændringer der er påtænkt ikke sker automatiseret vha. en database, men alle ændringer med hensyn til postnummer og kortet skal foregå ved at indtaste oplysningerne manuelt, samt ved at tegne kortet grafisk og indsætte det i HTML koden. Der findes ikke et Administrator system, alle ændringer foregår manuelt af teknisk personale. Der findes ikke nogen søgefunktion. Der findes ikke nogen historik funktion, til internt brug for Søndagsavisens personale. DDK som står for Dynamisk Danmarks Kort. DDK er opbygget og implementeret således at de mangler der har været på det ovennævnte system er afhjulpet, systemet er automatiseret vha. en database som indeholder 5

de nødvendige oplysninger, og ændringer af regionerne sker kontinuert på Danmarkskortet ved ændringer i databasen vha. administrations systemet, samtidig er der tilføjet en søgefunktion. Hele projektets vigtigste egenskab er at kunne foretage ændringer på Danmarkskortet på en nem måde. DDK er en Contant page der kan tilføjes til en Master Page på en hjemmeside, den skal tegnes med alle koordinater til hver eneste post nummer i Danmark. De basiske farver og tilhørerne oplysninger mht. post nummer, regioner og byer, disse data ligges i en database, databasen kontrolleres af et administrationssystem. DDK har forbindelse til databasen hvor alle oplysninger er til rådighed og hver gang administratoren laver ændringer vha. administrationssystemet på databasen, så ændres DDK hjemmesiden automatisk. DDK fungerer på følgerne måde. Når hjemmesiden åbnes i browseren hentes Danmarkskortet med farverne automatisk fra databasen på serveren. Kortet vises på browseren og brugeren kan benytte musen til at få diverse oplysninger. Markørens placering på kortet viser hvilket region man er i ved at regionen skifter farve til blå, og den by man peger på får farven rød. På kortets venstre side vises data for den pågældende region, by og postnummer osv. Når markøren bevæges væk fra kortet vil kortet få sin basiske farve og oplysningerne for den region som var blevet vist vil ikke være til syne mere. Søgefunktionen kan benyttes til at få markeret det område / by som postnummeret hører til ved at området får tildelt farven rød. Administrationssystemet kan søge og redigere i databasen. DDK og HDDK kan også benyttes af andre virksomheder, som benytter Danmarks kortet til at planlægning af deres service. 6

HDDK HDDK som står for Historisk Dynamisk Danmarks Kort. HDDK projektet er opbygget og implementeret således at den indeholder en database, databasen indeholder diverse følsomme data såsom oplægsantal samt priser osv. fra det tidligere år. HDDK er beregnet til internt brug for Søndagsavisens ledelse. HDDK s funktion er den at, brugeren vælger en periode/årstal og dermed tilføjes Danmarkskortet farver for regionerne til den pågældende periode. Når musemarkøren bevæges over kortet vises diverse oplysninger såsom oplægs antal priser osv. for den pågældende region, i forhold til den valgte periode. Søndagsavisens regioner på Danmarks kort ændres hvert 6 måned, Derfor har det været af interesse fra Søndagsavisens side at have en version af DDK, som kunne vise den historiske ændringer af regionerne, samt oplægsantallet og priser osv. HDDK versionen indeholder et års (DropDownList) som har forbindelse til en stor database, når en bruger vælger et årstal fra (DropDownList) en vil regionerne på Danmarkskortet blive farvelagt ifølge det årstal der er blevet valgt. Når musemarkøren bevæges over regionerne (OnMouseOver) så kan man se en tekst med millimeter pris, job millimeter pris, og oplag per region. Samtidig med oplysningerne vil regionsfarven tildeles farven blå. Når musemarkøren bevæges væk fra området (OnMouseOut) får området tildelt den tilhørende basiske farve igen. HDDK har også et meget simpelt administrationsprogram, som benyttes til at tilføre eller redigere databasen. 7

Problemformulering DDK Projektet består af 3 vigtige hovedpunkter: 1. Database: Består af 2 tabeller, den første tabel hedder AvisAntal. Avisantal skal have 8 kolonner, som indeholder oplysninger om hvert postnummer i Danmark. Kolonnerne er navngivet således.: PostNr, CityNavn, RegionName, DistDato, AntalBy, AntalLand, AntalIAlt og SelsKab. Den anden tabel hedder RegionColor, og den har tre koloner som indeholder farverne til hver region.: RegionID, Color og RegionNameId. 2. Administrator systemet er et C# program, i det program skal man kunne søge efter postnummer i databasen, og man skal på en nem måde kunne få informationerne for det søgte postnummer, informationerne vises på en Gridview, og man kan redigere informationerne og gemme dem på databasen igen, på en nem måde. 3. Kortet indeholder 4 punkter. Tegning: DDK skal tegnes med x antal regioner og del regioner, og enhver region eller del region skal have farve, derfor skal kortet deles op i områder. Hver område har x antal postnummer, og enhver postnummer skal tegnes med de tilhørende koordinater til postnummeret. Enhver postnummer skal have en Id, som kan bruges i projektet til at kontrollere hvilket region postnummeret tilhører. Basisfarver til regionerne findes kun i database og alle postnummer får tildelt deres farve fra databasen i forhold til regionerne. I denne del af koden hvor kortet bliver tegnet, må der ikke tildeles nogen farver til områderne, da ideen med projektet er at farverne skal ligge i databasen, og med Administrator systemet skal man kunne kontrollere farverne. Hermed får man muligheden for at flytte et postnummer til et andet region, ved at ændre (RegionName) til den tilhørende postnummer vha. Administrator systemet, dermed skifter basisfarver på Danmarkskortet, for det pågældende postnummeret automatisk til den farve, som den nye region har. 8

Forbindelse til database: Når kortet blev tegnet færdig, skal den have forbindelse til database, dvs. når siden bliver kaldt fra en klient skal Onload kalde den funktion som henter farverne fra databasen, og tildeler postnumrene til deres tilhørende regioner. Når funktionen OnMoseOver() bliver kaldt så skal den også have forbindelse til database for at hentes data. OnMoseOver(): Dette er en funktion som bliver aktiveret når musemarkøren placeres sted på kortet. Funktionens opgave er at skifte de basisfarven til området med postnummeret ud med rød, og regionen som postnummeret tilhører, får tildelt farven blå. Samtidig med farvelægning af kortet vises en Tooltip box på venstre side af kortet hvor Regions navnet, Bynavnet og postnummeret osv. vises for den med musemarkøren pegede område. OnMouseOut(): I tilfælde af at musemarkøren flyttes væk fra et postnummer og ikke peger på en anden region / postnummer, vil regionen og postnummeret som musemarkøren havde peget på få tildelt de basisfarver og Tooltip Box vil ikke blive vist mere. I tilfælde af at musemarkøren flyttes til at pege på et andet region / postnummer vil det forhenværende område få tildelt de basiske farver og det nye område som peges på få tildelt hhv. blå farve for region, og rød farve for postnummer samtidig med Tooltip box en få tildelt data for det nye område.. 9

HDDK HDDK Historisk Dynamisk Danmarks Kort er en Content page, som skal være dynamisk lige som den første version (DDK). Eftersom Danmarkskortet skal tegnes og farvelægges for brugerens valgte periode, skal der oprettes forbindelse til en database som indeholder data for den historiske udvikling, mht. regioner, priser og oplæg osv. for at tage et eksempel tilhørte postnummeret 2800 i år 2000 til region5 og har prisen (x), i år 2001 er postnummeret ændret til region 10 og har fået en pris (y) osv. Derfor har det været nødvendigt at definere postnummer til de forskellige regioner for det tilhørende årstal/ periode. Projektet består af 5 vigtige hovedpunkter. 1. Database: På databasen skal der være 3 forskellige tabeller: AvisAntal, RegionPrice og RegionColor. AvisAntal har 5 koloner: Id, C_postNr, PostName, Region, og StartDate. RegionPrice har 6 koloner: PriceId, StartDateId, RegionId, Oplag, JobMmPris og TextMmPris. RegionColor har 4 koloner: RegionColorId, RegionId, Color, og RegionName 2. Administrator system: Databasen skal indeholder rigtig mange data, eftersom alle postnummer skal defineres mht. deres regioner for hvert halve år. Søndagsavisen har ikke haft alle de data på computeren, derfor skulle der laves et program hvor brugeren kan tilføjer data til databasen på et simpelt og sikret måde. Til dette formål skal programmet indeholde to DropDownlist er, hver med sin GridView, samt have direkte forbindelse til Databasen. Den første DateDropDownList indeholder dato. Hvor brugen kan vælge en bestemt dato, for eksampel: 01-01-2000. Og når brugeren vælger en dato, så skal han/hun se de regioner (RegionId) som eksisterer for den valgte dato, samtidig med deres oplag og priser de bliver vist på med GridView. Brugeren skal også kunne tilføje eller redigere i: RegionId, Oplag, JobMMPris og TextMmPris. Den anden DropDownList er RegionDropDownList som indeholder regioner (RegionId), og den få Regionerne (RegionId) fra GridView til den første DropDownList som er navngivet DateDropDownList. Dvs. hver gang man vælge en dato fra DateDropDownList vil RegoinDropDownList får de regioner som findes i GridView til det valgte dato. Når brugeren vælger en region fra RegionDropDownList, så skal han/hun kunne se den valgte region med postnumre og det tilhørende bynavn. Brugeren skal også have muligheden for at redigere i listerne ved at tilføje post nummer eller bynavn. 10

3. Kortet: Når HDDK siden bliver kaldt skal kortet tegnes med et antal postnummer i Danmark. Hvert postnummer skal hav et id, og det skal tegnes med sine koordinater uden farve dvs. sort. Alle farverne ligger på databasen i forhold til datoerne, når brugeren vælger en dato fra DropDowList på kortet, skal kortet tildeles farver fra databasen i forhold til den valgte dato. Regionerne og delregionerne på Danmarks kortet bliver tegnet på denne måde. 4. OnMoseOver(): Er en funktion og vil være aktiv når musemarkøren peger på et område på kortet. Funktionens opgave er at skifte region farven til blå, samtidige med at vise regions Oplag, Job millimeter pris, og tekst millimeter pris. i en TooltipBox på venstre side af kortet. Alle oplysninger bliver hentet fra databasen. 5. OnMouseOut(): når musemarkøren kommer udenfor kortet får alle regionerne deres basisfarver og Tooltip box vil forsvinde fra skærmen. I tilfælde af at musemarkøren flyttes til en anden region vil man have funktionen OnMoseOver() for den med markøren pegede område. 11

DDK Analyse og design Projektet består af en WebForm, 2 Web Services, 2 C# klasser, en SVG fil, og en JavaScript fil. Projektet har forbindelse til en database. I projektet er opdelt i to dele, den første del er.: når siden blev kaldt fra en klient, skal serveren returnere hele kortet, for dernæst at returnere de basisfarver, hvor farverne bliver tildelt i forhold til de tilhørende regioner. Den anden del er.: hver gang brugeren af klienten bevæger musemarkøren over kortet, skifter regionen og postnummeret på kortet farve, tilhørende data hentes fra databasen, derfor er analyse og designdelen opdelt i to dele. DDK Analyse og design-del 1: Det nedenstående Applikationdiagram del-1 viser hvordan koret bliver hentet og hvordan farverne bliver tildelt til kortet når hjemmesiden åbnes. På diagrammet er der tilføjet numre for at kunne følge rækkefølgen for operationerne. I DDK projektet findes tre kommunikationer, den første er mellem klienten og serveren, den anden er mellem serveren og database og den sidste er mellem administrationsprogram og databasen. Når klienten starter browseren med www.ddk... så bliver den første og den anden kommunikation udført i den rækkefølge som er angivet med numre. 1. Klienten sender Request til IIS en Internet Information Services på serveren. 2. I applikation Webform beder om at hente SVG filen (med Embed ). 3. Webformen modtager SVG filen (SVG filen indeholder Danmarks korts koordinater og har reference til JavaScript fil). 4. IIS en returnere XHTML kode, Danmarks korts koordinater uden farve og JavaScript. Se figur 1. 5. OnLoad i Klienten kalder på StartColor() funktionen, som sender asynkront 1 kald til Webservicen ColorService.asmx for at bede om farverne til kortet. 6. Web Service sender et kald til C# klasse Repository.cs for at bede om farverne. 7. C# klassen Repository.cs henter (SELCT) farverne fra databasen og sætter dem i en datatabel. 1 Kaldet udføres ved hjælp ad XMLHTTPREQUEST objektet. 12

8. Databasen returnerer farverne til C# klassen Repository.cs 9. C# klassen Repository.cs sender farverne til webservicen ColorService.asmx som datatabel. 10. Da JavaScript ikke kan modtage farverne med datatabel så vil Webservice ColorService.asmx sende farverne til en C# klasse XMLService.cs for at få oversat farverne fra datatabel til XML. 11. C# klasse XMLService.cs oversætter farverne fra datatabel til XML, og sender dem tilbage til Webservice ColorService.asmx. 12. Webservice ColorService.asmx vil sende farverne som XML til klienten. Se figur 2. Når Java script i klienten modtager farverne fra serveren, bliver farverne tildelt til de tilhørende koordinater på kortet. Hele operationen tager ca. ½ til 1 sekund. Den sidste kommunikation mellem Administration programmet og database, er blevet tegnet i diagrammet med numrene 1a, 2a osv. Administrationsprogrammet har forbindelse direkte til databasen, og hvis operatøren vil flytte et postnummer fra en region til en anden, så sker der følgende.: 1a. Programmet henter (SELECT) postnummer oplysningen fra database. 2a. Databasen returnerer postnummer oplysningen. 3a. Operatøren kan redigere region navnen til postnummer. 4a. Programmet Opdaterer Databasen. 13

DDK Applikation diagram DDK Applikation diagram del-1 14

Analyse og design-del 2: Det nedenstående Applikationsdiagram del-2 viser hvad der sker, og hvordan kommunikationen foregår for at hente data fra databasen, når brugeren til klienten bevæger musemarkøren over kortet DDK. Når musemarkøren er over et eller andet sted på kortet, så vil det postnummer, som musen peger på skifte farve til rød, samtidig med at hele regionen, som postnummeret høre til, skifte farve til blå, og endvidere vil de oplysninger som findes på databasen for det valgte postnummer blive vist på venstre side af kortet. Som nævnet før findes der tre kommunikationer i projektet. Da den sidste kommunikation blev forklaret tidligere i rapportens analyse og design del1, vil forklaringen herom udelades. Kommunikationen mellem klienten, server og database foregår som beskrevet forneden.: 1. Når musen er over et sted på kortet OnMouseOver vil JavaScript i Klienten sender en asynkron kald til Webservice i serveren, med et argument (postnummer), forespørgslen foregår ved at spørge om postnummer findes i databasen, hvis den findes så skal serveren returner de fundne data til argumentet (postnummer) samt de postnumre som findes i den samme region. 2. Webservice DataService.asmx sender et kaldt til C# klassen Respository.cs og beder om argumentets oplysninger (postnummers oplysninger). 3. C# klassen Respository.cs henter (SELECT) oplysningerne til argumentet(postnummer) fra databasen. 4. Databasen returnerer oplysningerne for argumentet til C# klassen Respository.cs. 5. C# klassen Respository.cs modtager oplysningerne fra databasen, og sætter dem i datatabel og sende dem videre til Webservice DataService.asmx. 6. Webservice DataService.asmx sender oplysningerne til C# kalssen XMLService.c for at få dem oversæt fra datatabel til XML. 7. C# kalssen XMLService.cs oversætter oplysningerne fra datatabel til XML og returnere dem tilbage til Web service DataService.asmx. 8. Webservice DataService.asmx sender et nyt kaldt til C# klassen Respository.cs og beder om alle postnumrene som tilhører til den samme region som argumentet (postnummer) høre til. 15

9. C# klassen Respository.cs henter (SELECT) postnumrene fra databasen. 10. Databasen returnerer dem til C# klassen Respository.cs. 11. C# klassen Respository.cs modtage postnumrene fra databasen, og sætter dem i datatabel og sender dem videre til Webservice DataService.asmx. 12. Webservice DataService.asmx sender postnumrene til C# klassen XMLService.c for at oversætte dem fra datatabel til XML. 13. C# kalssen XMLService.cs oversætter postnumrene fra datatabel til XML og returnerer dem tilbage til Webservice DataService.asmx. 14. Webservice DataService.asmx sender de modtagne data, som klienten havde bedt om (postnummers oplysninger og alle de postnumre som er i den samme region), til klienten som XML. Når Java script i klienten modtager de data, vil den vise postnummers oplysninger og skifte farve på regionen.(java script skifte også postnummer område farven til rød). Se figur 3. 16

DDK Applikation diagram del-2 17

HDDK Analyse og design: Projektet består af en Webform, 2 Web Services, 2 C# klasser, en SVG fil, og en JavaScript fil. Projektet har forbindelse til en database. Projektet er delt i to stages, den første er.: at siden bliver kaldt fra en klient og brugeren får muligheden til at se HDDK i en bestemt periode, ved at vælger en dato fra DropDownList. Hvor den valgte dato får serveren til at returnere farverne til alle postnumre i de forskellige regioner på den måde hver gang brugen ændre datoen ændres regionens størrelse. Den anden stage er at brugeren får mulighed til at fremhæve regionens blålige farve samt med at få oplysninger ved at køre musemarkøren over en region. Regionens oplysninger som kommer fra databasen indeholder følgende oplysninger tekst millimeter pris, job millimeter pris og oplag. Derfor er analyse og designdelen opdelt til to dele. HDDK Analyse og design-del 1: HDDK Applikation diagram del-1 i kommende afsnit viser at kommunikationen i HDDK mellem klienten og serveren og mellem serveren og databasen ligner meget kommunikationen i DDK. Derfor vil jeg nøjes med at forklare forskellen mellem HDDK og DDK. Der findes to forskellige punkter. Det første punkt er, når HDDK side bliver kaldt, vil brugeren modtage Webform der indeholde Java script kode og XHTML uden farver på kortet, og kortet bliver ved med at være sort indtil brugeren vælger en dato fra DropDownList, ved valg af en dato bliver funktionen StartColors() kaldt. (Se figur 4). Hvor StartColors() sørger for at fremkalde farverne fra databasen og deler dem over kortet. Med DDK, kortet bliver sendt til klienten uden farver, og efter et sekund får kortet farverne på, og det er fordi, funktionen StartColors() på DDK version blev kaldt automatisk med Onload. Det andet punkt er at StartColors() sender asynkrone kald uden argumenter, men i HDDK version StartColors() sendes asynkrone kald med et argument, og argumentet er den valgte dato. Det sker hver gang brugeren vælger en ny dato fra DropDownList. Se figur 5. Databasen skal indeholde alle Danmarks postnumre for hvert år i Søndagsavisens historie, og hvert år indeholder hvilket postnummer til tilhøre hvilken region og oplysninger om regionernes priser og oplag. Når man snakker om en gammel virksomhed som Søndagsavisen (30 år), så er der store data mængde, derfor blev der lavet et meget simpelt program (Administrator system) som har direkte forbindelse til databasen, hvor arbejderne på Søndagsavisen kan tilføjer alle de nødvendige data på databasen, simpelt og sikkert. For sikkerheds skyld har jeg valgt at tilføje datoerne manual kun en gang pr. år. Administratorsystemet har direkte forbindelse til databasen, hvor den henter (SELECT top 1) datoerne fra 18

database og viser dem på en DropDownList. (det er derfor datoerne blev tilføjet manual, så programmet kan hente (SELECT) dem. Se figur 6. Når man vælger et bestemt dato fra DropDownList og klikker på Search knappen, vil programmet hente all de regioner, som findes i det valgte år fra databasen (se figur 7), med deres priser og oplag. Dermed har brugeren mulighed til at redigere eller tilføjer regioner og deres oplysninger i databasen. Det gør man ved at klikke på knappen Add eller Edit. 19

HDDK Applikation diagram HDDK Applikation diagram del-1 20

HDDK Analyse og design-del 2: Det nedenstående Applikation HDDK diagram del-2 viser kommunikationen mellem klienten og serveren og hvordan informationerne flytter sig når brugeren bevæge musen over kortet HDDK. Når musen er over et sted på kortet vil OnMouseOver funktionen i Java script sende en asynkron kald til ISS en i serveren ligesom DDK s forbindelse, men forskellen er at kaldet vil blive sendt med to argumenter (postnummer, og den valgte dato). Dermed vil serveren returnere postnummerets regions oplysninger i den valgte dato, samt med alle de postnumre som ligger i den samme region. Se figur 8. Operationer og kommunikationen er det samme som DDK. Database og Administrator program blev forklaret i del 1. 21

HDDK Applikation diagram del-2 1 MouseOver(evt) sende asynkron kald til GetRegionPrice(id, dato) WS returner XML data IIS i Server Klient Applikation C# Klasse XMLService.cs 7 13 DT PNData XMlPNData DT Regions XMlRegions 12 6 14 InformationService. asmx WebService 8 2 C# Klasse Repository.cs 11 Returner Regins som DataTable GetRegions(id, dato) 5 Returner PNData som DataTable GetPriceAndPublication(id, dato) 3 9 SQL med id.dato PNData 10 SQL med id, dato Regions 4 3a Rediger Eller Tilføjer Data DataBase 2a SELECT * top 1 Date Return top 1 Date Opdater 4a 1a Administrationssystemet 22

Projekt Teknologier DDK & HDDK: I projektet blev der brugt flere forskellige programmerings sprog, herunder ses forklaring for disse. SVG.: Forkortelsen SVG står for Scalable Vector Graphics. SVG er en grafisk billedformat udviklet af World Wide Web Consortium (W3C). Dette billedformat er afledt af XML, og bruges til beskrivelse af vektorgrafik, dog kan almindelig rastergrafik også indsættes i et SVG-billede. SVG kan indlejres i normal HTML og behøver ikke at være indeholdt i en ekstern fil. Dette betyder også at SVG-billeder nemt kan genereres dynamisk, derfor bliver SVG brugt i projektet til at tegne kortet. JavaScript.: er et objektorienteret scriptsprog, der er bedst kendt som det sprog, de fleste moderne webbrowsere forstår. JavaScript brugt i projektet til mange forskellige opgave, den blev brugt i stor del af kort kontrol, så når hjemmesiden blev kaldt af en klient vil JavaScript søger for at kalder på Web Services for at får farverne og delle dem til post nummerer. JavaScript kontroller også OnMouseOver, OnMouseOut. AJAX. AJAX.: er en forkortelse for Asynchronous JavaScript And XML, AJAX programmering bygger på JavaScript og er ikke et nyt programmeringssprog, AJAX er en teknologi der gør det muligt at opdatere specifikke dele af en hjemmeside uden hele siden skal hentes igen, grund til at bruge AJAX i den her projekt, at Siden loader hurtigere, da det kun er af siden der skal hentes igen, Brugere af siden irriteres ikke ved at hele siden skal opdateres igen. Derfor blev projektet oprettet som ASP.NET AJAX-Enabled Web Application. C# Programmering og Web Services. C# udtales som (C Sharp), og det er et objektorienteret programmeringssprog, C# er baseret på programmeringssprog C++ og Java. C# bliver brugs i projektet til at oprette forbindelse til databasen, samt til at oversætte data fra DataTable til XML. Web Services bliver brugt som mellem led mellem JavaScript og C# klasser. til at modtager opkald fra JavaScript og returnere data til JavaScript. data fra database, som DataTable og oversætter de til XML, og sende dem vider til JavaScript file. XML. Forkortelsen XML dækker over exstensible Mark-up Language og er fastlagt af W3C. XML sproget minder meget om HTML i sin opbygning. I modsætning til HTML benyttes XML alene til at beskrive og ikke til at vise data. Derfor er XML ikke en afløser eller videreudvikling af HTML men en dynamisk standard for at definere datastrukturer. 23

I projektet bliver XML brugt til at transporter data (farverne, postnumre og regioners informationer) til JavaScript, dermed kan JavaScript arbejder vider på dem. 24

Implementering DDK: DDK Projektet blev oprettet som ASP. NET AJAX-Enabled Web Application i Visual Studio 2005. Projektet består af en webform, en SVG fil, to C# klasser, to Web services, og en java script fil. 1. Webform DDK.aspx. er en WebForm som indeholder XHTML kode, og den har 2 vigtige pointer WebForm en kan vise SVG filen LandKort.SVG, som indeholder hele kortet med Embed eller object. Her er der blevet brugt Embed. <embed src="landkort.svg" type="image/svg-xml" name="svgembed" viewastext="viewastext"/> WebForm en har reference til de 2 Web Services, som JavaScript sender asynkront kald til dem. <asp:servicereferencepath="dataservice.asmx"/> <asp:servicereference Path="ColorService.asmx"/> 2. Landkort.svg.: SVG filen indeholder designet af Danmarks kort. Kortet blev tegnet med Adobe Illustrator som eps fil. og derefter blev den konverteret til SVG fil. For at tegne en lille by på kortet for eksampel Lyngby vil den får det følgende koordinater: <polyline id="2800" points="543.406,158.487 547.797,159.197 547.25,161.026 543.377,160.542 542.191,175.048 537.773,179.81 528.886,186.834 522.942,189.479 520.013,176.875 525.148,176.632 528.882,162.458 531.99,163.546 534.141,162.006 535.603,160.541 540.115,161.161 542.416,159.815 543.406,158.487 " /> Polyline indeholer Id til byen, og den Id har jeg vælgt at være det samme som postnummer til byen. Og den indeholder også points som svare til de koordinater punkter. Id en bruges til at kontrollere koordinaterne ved at give dem de basisfarver, eller for at skifte farver på dem. Man kan også bruge Id en til at identificere hvilket postnummer tilhøre til hvilken region. 25

Når hjemmesiden bliver kaldt, vil Onload kalde på JavaScrip funktion StartColors(), som sørger for at give de basiske farver til kortet, det sker automatisk når hjemmesiden bliver kaldt af en klient. Men funktionerne OnMouseOver og OnMouseOut sker ikke automatisk, det sker kun når musen er over kortet eller forlader kortet. <polyline id="2800" points="543.406,158.487 547.797,159.197 547.25,161.026 543.377,160.542 542.191,175.048 537.773,179.81 528.886,186.834 522.942,189.479 520.013,176.875 525.148,176.632 528.882,162.458 531.99,163.546 534.141,162.006 535.603,160.541 540.115,161.161 542.416,159.815 543.406,158.487 " onmouseover="on_mouseover(evt)" onmouseout=" On_MouseOut(evt)"/> De ovenstående afsnitte gav et overblik over hvordan kortet blev tegnet. I de nedenstående afsnitte vil jeg gå dybere ind i logisk systemet, og kaster blik over hvordan det blev implementeret og hvordan det virker. 3. C# klassen Repository.cs.: har 3 funktioner: Function GetPostnummerData(id). Den funktion har et argument id" som svar til et postnummer. Funktionen brugs til at hente et bestemt postnummers oplysninger fra database. SELECT. FROM AvisAntal where C_postnr='" + id + "'" Function GetRegions(id). Har også den samme argument (id). Funktionen brugs til at hente alle de postnumre som hør til den samme region som argumentet tilhøre til. Function GetAllColors(). Bruges til at hente alle postnumre i Danmark med deres farve i forhold til hvilken region de tilhører til, fra databasen. select c_postnr, Color, RegionId from AvisAntal derestable, RegionColor vorestabel where derestable.avis = vorestabel.regionname" 4. C# klassen XMLService.cs har 3 funktioner: Function Translat(dataTable). Bruges til at oversætter data fra DataTable til XML. Funktionen opretter xmlducoment som indeholder elementer, der udfylder xmlducoment s elementer med de følgende data postnummer, by navn, og ReginName osv.. XML data vil se således sådan ud (se nedenunder): <root> <City> <Postnummer> pustnummer </Postnummer> 26

<bynavn> by navn </ bynavn > <RegionName> Region navn </RegionName>.. </City> </root> Function TranlatRegions(DataTable), Opretter xmlducoment som indeholder en element, og udfylder den med de modtagne data RegionId, for at oversætte data fra DataTable til xml. XML data vil se således sådan ud (se nedenunder): <Region> <RegionId> data.. </RegionId> </Region> Function TranslatColors(DataTable) Oversætter data fra DataTable til XML, og den opretter også xmlducoment som indeholder elementer, og udfylder dem med data såsom Color, Postnummer, ColorId, RegionId osv. XML data vil se således sådan ud (se nedenunder): <root> <Color> data </Color> <PostNr> data </ postnr > <ColorId> data </colorid> <RegionId> data </RegionId>. </root> 5. Web Service ColorService.asmx har en funktion: Function GetAllColor(). Har en objekt af klassen Repository.cs og objektet bruges til at kalde på en funktion fra klassen Repository.cs for at hente data fra databasen, og sender dem videre den XMLService.cs klassen for få dem oversat til XML, og får dem tilbage som XML data. Dermed er de klar til brug. 6. Web Service DataService.asmx har en funktion: Function GetAllColors(). Har en objekt af klassen Repository.cs og objektet bruges til at kalde på en metode fra klassen Repository.cs for at hente data fra database, og sender dem vider til klassen XMLService.cs og får dem oversat til XML, og får dem tilbage som XML data. Dermed er de klar til brug. 27

Hermed har vi et overblik over hvordan data bliver hentet fra databasen og oversat til XML. Nu skal vi se, hvordan hjemmesiden kan bruge XML data på kortet, og hvordan farverne vil blive opdelt over de forskellige regioner, og hvordan hjemmesiden kan vise oplysninger på en ToolTipBox. Som der blev nævnt før, at JavaScript kontrollere kortet. JavaScript har direkte forbindelse til de to Web Services ColorService.asmx og DataService.asmx. Alle de data som skal bruges i kortet er klar i de to Web services, så skal vi bar se hvordan kommunikationen er mellem JavaScript og de to web services og hvordan udføre Java scriptet de opgaver. 28

7. JavaScript: Til JavaScript er der blevet brugt HashTable og et par andre funktioner. En HashTable er en slags key-value Array, som man kan gemme et hvilket som helst objekt sammen med en unik nøgle. Denne nøgle bruges til at hente sit gemte objekt ud igen, dette forgår i meget kort tid. Her har jeg brugt HashTables for at gemme data når jeg får dem fra databasen, så kan de bruges senere, hvis der er bruge for dem, og på den måde spare man dobbelt arbejde ved at gå frem og tilbage fra og til databasen. I JavaScript blev der brugt 3 HashTables. Se figur 9. Den Første HashTable er RegionpostNr og den har en Key postnr og en Value Region, dvs at den kan indeholde hvert postnummer med sin region navn. Den anden er RegionPostNrList, og den har en Key Region og Value []postnummer, dvs. at den kan indeholde hver region med et array af sine postnumre. Den tredje HashTable er RegionColor og den har en Key Region og en Value Color, dvs at den kan indeholde regionerne med deres farver. Senere hen i implementeringen vil de blive beskrevet, hvad de Hashtabeller er brugt til. Som nævnt før, når siden bliver kaldt af en klient, vil funktionen Onload kalder på funktionen StartColors() for at tegne kortet med farverne. onload="startcolors()" Function StartColors(): Sender en asynkron kald til en metode i Web Service ColorService.asmx for at hente XML data og giver dem til funktionen XmlColorCallBack(). Function XMLColorCallBack(xmlDocument, eventargs): Gemmer data der kommer fra WebService i de tre HashTables, og fordeler dem ud over postnumrene. dvs. den tegner kortet med regionerne, hver en med sin farve. Se bilag 2. Function On_MouseOver(): Kalder på en metode i Web Service DataService.asmx for at hente XML data såsom (postnummer, City navn osv.) og bliver videre sendt til XMLCallBack(). Og XMLCallBack() sætter de data i Tooltip box. MouseOver() kalder på en JavaScript funktionen ShowTooltip(mousemove_event), for at aktivere ToolTip box og får den til at blive vist på skærmen. MouseOver() skifter farve på området til rød, og skifter hele regions farve til blå. Dvs. at når brugeren til klienten bevæger musen over et område, vil den funktion skifte områdets farve til rød, og for at den kan skifte hele regions farve til blå, skal den bruge HashTables. JavaScript bruger den første HashTables, for at finde ud af hvilket region postnummeret hører til. Den anden HashTable bruges til at finde ud af, hvilket postnumre der er i den samme region. Så kan funktionen On_MouseOver() give postnumrene blå farve. 29

Function xmlcallback(): som nævnt tidligere modtager denne funktion xml data såsom postnummer, by navn osv. og sætter dem i en Tooltip box. Function ShowTooltip(mousemove_event): Designer Tooltip box, den kan vises som felter, og felterne ændre størelsen i forhold til de data som skal vises. Og den aktiverer Tooltip box, så den kan vises på siden. Function On_MouseOut(): den funktion bliver aktiveret når musen bevæges ud af kortet, den kalder på funktionen HideTooltip() for at fjerne tooltip box, og giver regionen dens basisfarve igen. JavaScript bruger alle tre HashTables, den Første HashTable for at finde ud af hvilket region postnummer høre til, den anden HashTable til at finde alle de post nummerer som tilhører den samme region, og den tredje HashTable, til at finde ud af hvilket basisk farve regionen har haft. Function HideTooltip(): den funktion deaktiverer ToolTip box. Funktion SetColorToPostalCode() Bruges til at søge efter postnummer på kortet. Funktioen bilver ak brugeren trykke på Search knappen på hjemmesiden, og den tager tekst fra Textbox og tjekker at det indtastede postnummer en 4 sifret tal, ellers komme den med en fejl meddelelse (alert). Hvis indtasted postnummer er 4 sifret tal, så vil funktionen få værdien fra tekst box og søger efter den. Hvis postnum findes, så vil den få et rød farve (se figur 16), og hvis den ikke findes på kortet, så komme den med en meddelelse (alert). Indtil vider ved vi hvordan koret kan tegnes, hvordan den kan kontrollers, og hvordan data kan hentes fra databa I de næste to afsnitter, skal vi kigge på hvad databasen indeholder, og hvordan Administration programmet er implementeret og hvordan den virker. Database: som nævnt tidligere består databasen af 2 tabeller, den første tabel hedder AvisAntal, den anden tabel hedder RegionColor. Der bliver brugt to tabeller, fra AvisAntal tabellen kan programmet får postnummers oplysninger og hvilken region den tilhører, så den kan JOIN RegionName fra AvsiAntal med den anden tabel RegionColor for at se, hvilket farve denne region skal have. Se figur 10 30

Administrator programmet: Administratorsprogrammet er en Windows Applikation projekt, som indeholder en kalsse med brugergrænseflade som har.: combobox, en Gridview, en Søge knap, og en Rediger knap. ComboBox. har forbindelse til tabellen AvisAntal i databasen, hvor den henter (SELECT) postnumre med dropd list. Se figur 11. Når operatøren vælger et postnummer, eller skrive et post nummer i ComboBox, og klikker på søgeknappen, bliv GridView nulstillet (hvis der var noget data på GridView vil de blive slettet), og funktionen DataSearsh() bliver GridViewRegions.DataSource = null; DateSearsh(); Private void DataSearsh(): Henter postnummers information, og viser dem på Gridview. Se figur 12. Hvis administrator vil rediger postnummerinformationer, så kan han/hun rediger det på Gridview et, når der klik knappen Rediger bliver funktionen Update() kaldt, den funktion har SQL command som updater databasen med data som findes i GridView. I Administratorsystemet kan operatøren flytte et postnummer fra en regin til en anden, ved at skift regionsnavn. 31

Implementering HDDK: HDDK projektet blev oprettet som ASP. NET AJAX-Enabled Web Appication i Visual Studio 2005. Projektet består af: en Webform ASPX side, 2 C# klasser, 2 webservice, en JavaScript fil, og en SVG fil. 1. WebForm Forsid.aspx : WebForm indeholder XHTML kode samme som DDKs Webform med referencer til webservices og SVG filen, samt en DropDownList og en JavaScript funktion. JavaScript funktion returnerer den valgte dato fra DropDownlist. function GetSelectedDropDownValue() var len = document.form1.<%=datedropdown.clientid%>.length; var i = 0; var adate; for (i = 0; i < len; i++) if (document.form1.<%=datedropdown.clientid%>[i].selected) adate = document.form1.<%=datedropdown.clientid%>[i].value; return adate; Når siden bliver kald af en klient, og brugen til klienten vælge en dato, vil metoden OnInit(EventArgs e) i Webforms (C Sharp) Forsid.aspx.cs kalde på funktionen StartColors() for at tegne kortet med farverne. protected override void OnInit(EventArgs e) base.oninit(e); DateDropDown.Attributes.Add("onChange", "return StartColors();"); 2. Landkort.svg.: SVG filen indeholder designet af kortet, og det er den samme SVG fil som blev brugt i DDK. Når hjemmesiden blev kaldt, vil klienten modtage kortet uden farve dvs. sort, og når brugeren vælger en dato fra DropDownList, vil metoden OnInit(EvenArgs) i Forsid.aspx.cs kalde på JavaScript funktion (StartColors(dato)), dermed tildeles de basisfarver til kortet. dvs. 32

regionernes farver bliver ikke tildelt automatisk når siden bliver kaldt, farverne bliver tildelt når brugeren til klient vælger eller ændrer datoen. For at brugeren til klienten kan se oplag og priserne til regionen, skal musemarkøren placeres over regionen, dermed bliver funktionen OnMouseOver kaldt. Funktionen OnMouseOut bliver kaldt når musemarkøren flyttes væk fra regionen. Dermed får regionen sin basiske farve. 3. C# klasse Repository.cs : har 3 funktioner: Function GetColors(date). Den funktion henter post nummerer fra database med deres farve i forhold til hvilken region de hørere til, og med hensyn til argumentet (dato). SELECT C_postnr, Color, RegionId from AvisAntal derestable, RegionColor vorestabel where derestable.region = vorestabel.regionid AND derestable.startdate <= @colordate and derestable.id = ( select top 1 id from AvisAntal a where a.c_postnr = derestable.c_postnr and StartDate <= @colordate order by StartDate desc ) order by StartDate desc"; Function GetPNData(id, dato). Da priserne til regionerne skiftes fra år til år, vil den funktion hente data fra database med 2 argumenter, id" som svar til et postnummer, og ud fra Id kan man vide hvilken region der skal Select, og Dato som svar til det valgte dato fra DropDownList på HDDK siden. Dvs. funktionen bliver brugt for at hente en bestemt regions oplysninger fra databasen. SELECT RegionId, JobMmPris, TextMmPris from RegionPrice price where price.regionid = (select Region from Avisantal where c_postnr = @PostNr and startdate = @startdate) and price.startdateid = @startdate"; Function GetRegions(id, dato). Har to argumenter. Funktion bliver brugt for at hente alle de postnummer som ligger i argumenternes region (hvor argumenterne er postnummer og dato)). SELECT AvisAntal.C_postnr, RegionColor.RegionId FROM AvisAntal INNER JOIN RegionColor ON AvisAntal.Region = RegionColor.RegionId WHERE (AvisAntal.Region = (SELECT Region FROM AvisAntal AS AvisAntal_1 WHERE (C_postnr = @PostNr and startdate = @startdate)))"; 4. WebService InformationService.asmx har en funktion: Function GetRegionPrice(id, dato): Har en objekt af klassen Repository.cs som bliver brugt til at hente data fra 2 funktioner GetRegions(id, dato) og GetPNData(id, dato).. 33

Funktionen modtager data med datatable og sender dem videre til en anden C# klasse som hedder XMLService.cs. for at få dem oversat til XML. 5. WebService ColorService.asmx har en funktion: Function GetColorsForDate(dato): vha. en objekt af klassen Repository.cs kan funktionen modtage farverne fra Repository.cs som Datatable og sender dem videre til en anden C# klasse som hedder XMLService.cs. for at få dem oversat til XMl. 6. C# klasse XMLService.cs : opgaven i denne klasse er, at modtage data fra de to WebServices (InformationService.asmx og ColorService.asmx) som DataTable og oversætter dem til XML dokument og send dem tilbage. Klassen har 3 funktioner: Function Translate(dataTable) Function InsertData(dataTable, xmldata) Function TranslateColors(ColorData) JavaScript filen ShareFunction.js : I JavaScript bliver der brugt de samme HashTables og de samme JavaScript funktioner, som er nævnt i DDK JavaScript filen. 34

Database: Database består af 3 tabeller (se figur 13), den første tabel hedder AvisAntal. Den anden tabel hedder RegionPrice, meningen med de 2 tabeller er: Fra AvisAntal kan programmet hente (SELECT) et postnummer og se hvilken region postnummeret høre til, for en bestemt dato, og derefter får programmet mulighed for at JOIN RegionName i tabellen RegionPrice for at se oplag og priserne, til denne region for det bestemte dato. Den tredje Tabel er RegionColor indeholder kun farverne til regionerne. Når programmet henter (SELECT) et postnummer fra AvisAntal, og får oplyst hvilken region den tilhøre, så kan programmet JOIN RegionName i tabellen RegionColor, for får regionens farve. Administratorprogrammet: Administratorprogrammet er en Windows Applikation projekt, som har en brugergrænseflade der er inddelt i to afsnit. Det øverste afsnit benyttes til at redigere, søge eller tilføje Region navn, oplag og priser. Dette afsnit indeholder følgende.: en combobox, en Gridview, og tre knapper.: Search, Edit, Add ComboBox en (DateBox). har forbindelse til tabellen RegionPrice i databasen, og den indeholder de dato som findes på databasen. Se figur 7. Når man vælger et dato fra ComboBox, og klikker på knappen Search, vil Gridview blive nulstillet og funktionen DataSearch() bliver kaldt. DataSearch() funktionen søger på databasen for det valgte datos regioner, oplag og priser, og får dem vist på Gridview. Når data vises på Gridview vil brugeren få mulighed for at redigere eller tilføje ny data, og ved at klikke på knappen Edit eller Add, vil databasen blive opdateret med de nye data fra Gridview. Ved at klikke på de to knapper vil der blive kaldt to forskellige funktioner som indeholder SQL kommando for at opdater databasen. Det nederste afsnit benyttes til at redigere, søge eller tilføje postnummer og bynavn. Dette afsnit indeholder følgende.: en combobox, en Gridview, og tre knapper.: Search, Region Edit, Region Add. ComboBox en (RegionBox). har forbindelse til den første søjle (RegionId) i den øverste afsnits Gridview. Dvs. når man ændrer dato i ComboBox en (DataBox) i det øverste afsnit og klikker på Search knappen, opdateres ComboBox (RegionBox) i det nederste afsnit samtidig. Se figur 14. Når man vælger et region fra ComboBox en (RegionBox), og klikker på knappen Search, vil Gridview blive nulstillet og funktionen DataSearch() bliver kaldt. DataSearch() funktionen søger på databasen for det valgte regions postnumre og bynavne, og får dem vist på Gridview. Se figur 15. 35

Når data vises på Gridview vil brugeren få mulighed for at redigere eller tilføje ny data, og ved at klikke på knappen RegionEdit eller RegionAdd, vil databasen blive opdateret med de nye data fra Gridview. Ved at klikke på de to knapper vil der blive kaldt to forskellige funktioner som indeholder SQL kommando for at opdater databasen. I Administrator system kan operatøren tilføje alle de data som tilhører det Historisk Dynamisk Danmarks kort nemt og simpelt. 36

Bruge vejledning: DDK Brugeren til klienten kan bruge DDK meget nemt, ved at bevæge musemarkøren over kortet, når markøren peger på den by som brugeren er interesseret i bliver alle oplysningerne om byen og regionen vist. Hvis brugeren ikke ved hvor byen ligger henne på kortet, så kan brugeren søge efter postnummeret vha. søge feltet. Ved at klikke på søge feltet blive den aktiv og rammens farve ændres til rød, dermed kan det søgte postnummer indtastes i søgefeltet og søges ved at klikke på Search knappen, det område som der er søgt får tildelt farven rød. DDK Administration programmet: Operatøren kan flytte et postnummer fra en region til en anden, ved at vælge postnummeret fra DropdownList, fås postnummers oplysninger og derved muligheden for at ændre regions navn, ved ændring af regions navn flyttes dette postnummer til det nye region. HDDK Brugen kan se det Historisk Dynamisk Danmarks Kort ved at vælge en dato fra DropDownList på hjemmesiden, så vil kortet blive opdateret automatisk med hensyn til det valgte dato. Får at få vist regionernes oplysninger benyttes at musemarkøren pager på regionen. HDDK Administration programmet: Som blev nævnt før at programmet brugergrænseflade har to afsnit, fra den øverste afsnit kan brugeren vælge en dato fra ComBoBox (DateBox), og klikker på knappen Search for at få vist alle de regioner som findes på Danmarks kortet til den valgte dato, samt de tilhørende oplysninger, derefter kan brugeren tilføjer/rediger data. Når brugeren bliver færdige med at udfylde tabellen på brugergrænsefladen med diverse oplysninger (navn, oplag og priserne til regionerne til det valgte dato). I den nederste afsnit skal brugeren definer postnumre og by navne for hver region, og det kan gøres ved at vælge en region af gangen fra ComBoBox (RegionBox) fra den nederste afsnit og klikker på Search knappen, derefter kan brugeren tilføjer/rediger de postnumre og by navne for den valgte region. 37

Test DDK / HDDK: For DDK.: Figurerne 1, 2 og 3 viser at testen er blevet gennemført, og projektet er vellykket og virker efter hensigten. For HDDK.: Fra figur 8 ses det at byerne til en regionen ligger langt fra hinanden, begrundelsen hertil er den at databasen for HDDK er tomt. For at teste HDDK projektet har det været nødvendigt at tilføje data til databasen, de data som er blevet tilføjet er tilfældige, dermed den ovennævnte afstand mellem byerne for den samme region. Det bemærkes yderligere at testen er blevet gennemført med tilfredsstillende resultat og HDDK projektet virker efter hensigten. Kildeangivelse: SVG.: http://da.wikipedia.org/wiki/scalable_vector_graphics JavaScript.: http://da.wikipedia.org/wiki/javascript AJAX.: http://da.wikipedia.org/wiki/ajax_%28programmering%29 XML.: http://www.net-faq.dk/faq.pl?get=xml 38

Konklusion DDK / HDDK: DDK Det har været et vellykket projekt. I starten af projektet har der været en del problemer med opgaveformuleringen da virksomheden (Søndagsavisen) ikke har formuleret opgaven skriftligt. Opgavens omfang var uvist og at arbejde med billeder har været noget som jeg har måttet sætte mig ind i efter den mundtlige videregivelse af opgaven til mig. Endvidere er opgavens omfang blevet udvidet senere hen i projektperioden, ved at virksomheden har bedt om at få lavet en anden version til projektet som er HDDK, det er også lykkedes at færdiggøre den ekstra delprojekt, men testen har været lidt besværlig pga. den manglende mængde data i databasen. Til dette formål er der lavet et administrations program, hvor en medarbejder fra virksomheden kan indtaste de nødvendige data i databasen. Teknologierne som er benyttet til at løse opgaven har heller ikke været defineret i starten af projektet, det har været min opgave at finde ud af den bedste måde at løse opgaven, på en tilfredsstillende måde. Projektet er opbygget om en database hvor ændringer af data er nemt tilgængelige og det medfører at projektet kan benyttes af andre virksomheder, som har lignende interesser. Det er værd at bemærke at hjemmesiden bliver opdateret automatisk når data i databasen bliver redigeret, det medfører at hele hjemmesiden ikke skal oploades hver gang der er foretaget ændringer for diverse data. Projektet er blevet fuldendt succesfuldt, da alle funktioner og krav til projektet er velfungerende, selvom der har været noget tids tab pga. at jeg ikke kunne komme tilbage til Danmark fra mit hjemmeland (IRAK). 39

Appendiks DDK: Figur 1 Figur 1.: Danmarks korts koordinater uden farve 40

Figur 2 Figur 2.: Danmarks korts koordinater med basisfarver 41

Figur 3 Figur 3.: Fra kortet ses det at byen som musemarkøren har været over er Avlum, samtidig kan det ses at Avlum har postnummer 7490 og den hører til region Søndagsavisen 25 osv. 42

Figur 4 Figur 4.: Historisk Dynamisk Danmarks Kort skabelon (uden valgt dato). 43

Figur 5. Figur 5.: Historisk Dynamisk Danmarks Kort for perioden 01-01-2008, og det kan ses at alle regionerne ikke er farvelagt, dette skyldes det manglende data i databasen, for det ikke farvelagte regioner. 44

Figur 6. Figur 6.: HDDK Administrationsprogram. Figur 7. Figur 7.: HDDK Administrationsprogram henter data for perioden 01-01-2008. 45

Figur 8. Figur 8.: Historisk Dynamisk Danmarks kort med MouseOver test for perioden 01-01-2008. Se test HDDK for nærmere information her om. 46

Figur 9. Figur 9.: Hashtabellen for lagring af data hos klienten. Figur 10. Figur 10.: Database tabel med relationen en til mange. 47

Figur 11. Figur 12. 48

Figur 13. Figur 13.: HDDK databasen med relationer. 49

Figur 14. Figur 14.: viser ComboBox en (ReginBox) regionerne som kommer fra den første søjle i Gridview. 50

Figur 15. Figur 15. Viser de postnumre og by navne, som ligger i region 7, for perioden 01-07-2007 51