Förbättring av webbportal för examensarbetsförslag

Förbättring av webbportal för examensarbetsförslag Improving Web Portal for Degree Project proposals Kristoffer Risendal Examensarbete inom information- och programvarusystem, grundnivå Högskoleingenjör Degree Project in Information and Software System Stockholm, Sweden 2012 Kurs II121X, 15hp TRITA-ICT-EX-2012:256

Förbättring av webbportal för examensarbetsförslag Examensarbete/projektrapport inom Datateknik, II121X, 15HP Kungliga Tekniska Högskolan Skolan för informations- och kommunikationsteknik (ICT) Examinator: Anders Sjögren, as@kth.se Handledare: Anders Sjögren, KTH ICT, as@kth.se Författarens e- postadress: risendal@kth.se Utbildningsprogram: Högskoleingenjör Datateknik, 180HP Omfattning: 6039 ord

Sammanfattning I ett tidigare examensarbete på skolan för informations- och kommunikationsteknik på KTH utvecklades exjobbspoolen, en webbportal skapad med syftet att göra det möjligt för företag att annonsera ut examenarbeten som studenter på ICT- skolan kan söka. Men för att kunna börja använda exjobbspoolen behövdes vissa efterfrågade funktioner utvecklas och befintliga förbättras. För att en mer enhetlig känsla med resten av KTH:s hemsidor skulle uppnås samt att presentationen av sidans innehåll skulle visas på ett effektivare sätt behövdes även webbportalens layout göras om. Den här rapporten tar upp hur systemet har vidareutvecklats och varför valda metoder har använts. Arbetet har gjorts utifrån projektmetoden Feature- Driven Development och är konstruerat i HTML5, PHP, JavaScript, jquery och har en databas av typen PostgreSQL. Resultatet av projektet är en webbportal som ger möjligheten till företag eller institutioner att förmedla exjobb med önskad formatering. Det examensarbetet kan sedan sökas och bokas av studenter som har identifierats sig via KTHs- inloggningstjänst. Nyckelord: HTML5, CSS, PHP, Webbportal, PostgreSQL, jquery, JavaScript

Abstract In a previous project at the School of Information and Communication Technology at KTH, a web portal called exjobbspoolen was created with the aim of making it possible for companies to advertise graduate jobs that students at the School of ICT could apply for. But in order to start using this webportal some requested features had to be developed and some existing improved. For a more consistent feel with the rest of the KTH websites the layout also had to be redone. This report discusses how the system has been developed and why selected methods have been used. The projec have been driven based on Feature Driven Development, and is developed in HTML5, PHP, JavaScript, jquery and has a PostgreSQL database. The result of the project is a web portal that provides the ability for companies or institutions to submit graduate jobs with the desired formatting. The job can then be searched and booked by students who have been identified via the KTH- login service. Keywords: HTML5, CSS, PHP, Web portal, PostgreSQL, jquery, JavaScript

Förord Jag vill tacka Johan Fredriksson på ICTs IT- service för hjälpen med att sätta upp systemet på KTHs server samt min uppdragsgivare och examinator Anders Sjögren för hjälp och förtroende. Stockholm 2012-06- 06 Kristoffer Risendal

Innehållsförteckning Sammanfattning... 2 Abstract... 3 Förord... 4 Terminologi... 7 1 Inledning... 8 1.1 Bakgrund... 8 1.2 Syfte... 8 1.3 Problemanalys... 8 1.3.1 Listning av examensarbeten... 8 1.3.2 Presentation av inlagt examensarbete... 8 1.3.3 Ändra användargränssnittet... 8 1.3.4 Implementera status för ett examensarbete... 9 1.3.5 Städa systemet... 9 1.3.6 Identifiering innan bokning... 9 1.3.7 Förbättra administratörens vy och funktion... 9 1.4 Översikt... 10 2 Teoristudie... 11 2.1 HTML5... 11 2.2 CSS... 12 2.3 PHP... 13 2.4 PostgreSQL... 13 2.5 JavaScript... 13 2.6 jquery... 14 2.7 Utvecklingsmiljö... 14 2.8 Studie av det tidigare systemet... 15 3 Metod... 17 4 Konstruktion... 18 4.1 Användargränssnittet... 18 4.2 Databasen... 19 4.3 Lista examensarbeten... 19 4.4 Presentation av examensarbete... 21 4.5 Förmedla ett examensarbete... 23 4.6 Identifiera studenten... 24 4.7 Ett examensarbetes olika statusar... 25 4.8 Städning av systemet... 26 4.9 Förbättra administratörens vy och funktion... 26 5 Resultat... 29 6 Slutsats... 30

Källförteckning... 31 Bilaga A: Generell layout... 33 Bilaga B: Use Case- diagram... 35 Bilaga C: Databasmodell... 36 Bilaga D: Förhandsgranskning... 37 Bilaga E: Exjobbspoolens övriga vyer... 38 Bilaga F: Statusdiagram... 44

Terminologi FDD Står för Feature- driven development som är en iterativ mjukvaruutvecklingsprocess. Feature Snippet Regex CAS Utvald funktionalitet som ska utvecklas. En snippet eller code snippet är ett fragment av kod, används ofta för att visa förklarande delar av källkoden. Är en förkortning för Regular Expression och är en mängd tecken som används för att hitta texter som följer ett visst mönster. Står för Central Authentication Service. Används då användare ska autentiseras mot en CAS server 7

1 Inledning 1.1 Bakgrund 1.2 Syfte I ett tidigare examensarbete på skolan för informations- och kommunikationsteknik på KTH utvecklades exjobbspoolen, en webbportal skapad med syftet att göra det möjligt för företag att annonsera ut examenarbeten som studenter på ICT- skolan kan söka. Även om det redan fanns webbplatser som erbjöd liknande funktionalitet så fanns en efterfrågan. Att inrikta sig mot endast studenter som studerar på skolan i Kista var något som lockade till utveckling. Men för att kunna börja använda exjobbspoolen behövdes vissa efterfrågade funktioner utvecklas och befintliga förbättras. Därför påbörjades detta examensarbete som en del i utbildningen högskoleingenjör i datateknik. Projektets syfte är att ta fram ny nödvändig funktionalitet till exjobbspoolen enligt överenskommelse med Anders Sjögren på institutionen ICT- KTH i Kista. Även existerande funktioner som behöver förbättras ska undersökas och vidareutvecklas. Dessutom behöver användargränssnittet för webbportalen korrigeras för att en mer enhetlig känsla med resten av KTH:s hemsidor ska uppnås samt att presentationen av sidans innehåll ska visas på ett effektivare sätt. 1.3 Problemanalys 1.3.1 Listning av examensarbeten Som systemet är utvecklat för tillfället är valen av hur examensarbeten ska listas inte tillräckliga. Studenter ska kunna lista alla examensarbeten som finns tillgängliga i applikationen. Även andra önskvärda listningsalternativ ska finnas. 1.3.2 Presentation av inlagt examensarbete I nuvarande version av webbportalen presenteras ett inlagt examensarbete helt utan formatering, bara som en klump text. Det är i både studenten och företagets intresse att uppgiften ska presenteras på ett bra och överskådligt sätt. 1.3.3 Ändra användargränssnittet Användargränssnittet ska förbättras för att en mer enhetlig känsla med resten av KTH:s hemsidor ska uppnås samt att presentationen av sidans innehåll ska visas på effektivare sätt. 8

1.3.4 Implementera status för ett examensarbete Varje examensarbete bör ha olika status. Exempel på dessa statusar kan vara: Inlagt då ett företag eller institution lägger in ett nytt exjobb i systemet, Publicerat då en administratör har godkänt och publicerat arbetet så att det är synligt för omvärlden, Bokat då en student har valt att boka examensarbetet, Accepterat då företaget/institutionen och studenten har kommit överens och tagit beslut att arbetet ska utföras. Ett publicerat arbete ska också han en deadline det vill säga en tid då det inte längre går att söka arbetet. Om ett arbete inte har sökts innan deadline ska det få status Utgånget eller liknande. 1.3.5 Städa systemet En funktion som städar systemet från arbeten som har passerat deadline eller som inte har publicerats eller som av annan anledning behövs tas bort behöver implementeras. Antingen ska funktionen köras ett antal gånger om året per automatik eller triggas av en administratör. 1.3.6 Identifiering innan bokning När en student vill boka ett exjobb måste systemet kontrollera att denna är inloggad via kth.se s inloggningstjänst för att på så sätt kunna identifiera studenten. I den nuvarande versionen kan vem som helst boka ett inlagt arbete, det finns alltså ingen referens till vem som har bokat. Detta medför svårigheter för företaget att komma i kontakt med studenten men möjliggör även sabotage. 1.3.7 Förbättra administratörens vy och funktion Administratörernas vy och innehållande funktionalitet är i behov av en generell förbättring. En administratör ska kunna ändra information om ett examensarbete, hantera vilka exjobb som blir publicerade, avboka exjobb, se annan nödvändig information om examensarbetena som finns i systemet samt radera inte längre önskvärda exjobb. Vyn som ska innehålla denna funktionalitet bör vara lätt att använda och visa informationen på ett lämpligt sätt. 9

1.4 Översikt Denna projektrapport består av sex kapitel. Nedan följer rapportens disposition och en kort beskrivning för varje kapitel. 1 Inledning Inledningen beskriver projektets syfte och bakgrund och innehåller dessutom en problemanalys 2 Teoristudie Detta kapitel tar upp relevant information för att öka läsarens förståelse för resten av innehållet. 3 Metod Här beskrivs med vilken metod arbetet har utförts. 4 Konstruktion Detta kapitel behandlar lösningar och analyser som utformats under examensarbetet. 5 Resultat Här presenteras resultatet av examensarbetet. 6 Slutsats Projektrapporten avslutas med de slutsatser som kan dras efter detta projekt. 10

2 Teoristudie Teoristudien tar upp relevant information för att öka läsarens förståelse för resten av innehållet i denna rapport. 2.1 HTML5 HTML står för Hypertext Markup Language och består av ett antal taggar som används för att beskriva en webbsidas innehåll. Meningen med dessa taggar är att beskriva innehållet i HTML- dokumentet, varje tagg består av ett nyckelord som omges av vinkelparenteser. De flesta taggar har en öppnings- och en slut tagg för att definiera var innehållet ska placeras [1]. HTML5 är den senaste versionen av HTML och kommer enligt w3schools bli den nya standarden [2]. I snippet 2.1 nedan visas hur ett minimalt HTML5- dokument med nödvändiga taggar byggs upp. <!DOCTYPE*html>*** <html>***** ***<head>* *******<title>dokumentets*titel</title>** ***</head>* ***<body>** *******Dokumentets*innehåll****** ***</body>* </html>! Snippet 2.1 - Minimalt HTML5- dokument. Källa: [1] 11

2.2 CSS CSS står för Cascading Style Sheets och används som stilmall för hur HTML- element ska visas i webbläsaren. Vanliga användningsområden är till exempel: ändra bakgrundsfärger, marginaler, fontstorlek och så vidare [3]. CSS kan skrivas antingen direkt i HTML- dokumentet eller som en separat CSS- fil. CSS- filen innehåller bara CSS och sparas med filändelsen.css. En sådan fil måste kopplas samman med HTML- dokumentet för att stilmallarna ska kunna användas. Detta görs i huvudet av HTML- dokumentet med hjälp av <link>- taggen som länkar samman det med CSS- filen. Att skriva CSS direkt HTML- dokumentet görs också det i huvudet, men här används istället <style>- taggen som i sin tur innehåller CSS- koden. Nedan vissas hur en <h1>- tagg kan modifieras både genom CSS i en separat fil och CSS skrivet direkt i HTML- dokumentet. <!DOCTYPE*html>* <html>** ***<head>** ******<title>dokumentets*titel</title>** ******<link*href="main.css"*rel="stylesheet"*media="screen"*/>* ***</head>*** ***<body>* *******<h1*class="search_h1">*sök*examensarbete*</h1>* ***</body>*** </html>* *.*.*.* * /**main.css**/***.search_h1{******* ****marginjbottom:22px;*** }*** Snippet 2.2 HTML med extern CSS- fil <!DOCTYPE*html>** <html>* ***<head>* ******<title>dokumentets*titel</title>* ******<style*type="text/css">* **********.search_h1{** ****************marginfbottom:22px;** **********}****** ******</style>** ***</head>* ***<body>* *******<h1*class="search_h1">*sök*examensarbete*</h1>** ***</body>*** </html>* Snippet 2.3 HMTL med CSS i <head> 12

2.3 PHP PHP är ett open- source scriptspråk som framförallt används för att skapa webbsidor med dynamiskt innehåll. PHP körs inte i klientens webbläsare som till exempel JavaScript, ett PHP- script körs istället på servern där scriptet är placerat [4]. I snippet 2.4 nedan visas ett enkelt exempel på hur PHP används för att skriva ut information i ett HTML- dokument. <body>''''' <?php''''''' '''echo'"dokumentets'innehåll";''''?>''''' </body>'! Snippet 2.4 PHP- exempel. Källa: [4] 2.4 PostgreSQL PostgreSQL är en relationsdatabas som baseras på öppen källkod. PostgreSQL, som från början kallades Postgres, skapades av Michael Stonebraker 1986 [5]. Databasen har sedan dess utvecklats till att bli en av de ledande inom området. Den går att köra på alla de större operativsystemen (Linux, Unix och Windows) [6]. För att hämta och modifiera data i en PostgreSQL- databas används språket SQL. SQL står för Structured Query Language. 2.5 JavaScript JavaScript är ett scriptspråk som idag är mycket vanligt förekommande på webben. Vanliga användningsområden är formulärvalidering, manipulera HTML- element, skapa cookies eller göra något vid händelser till exempel visa ett meddelande vid knapptryckning [7]. JavaScript kan bäddas in direkt i HTML- filen genom <script> taggen men kan också sparas i en extern fil för att sedan länkas till i webbsidans huvud. Det går att avaktivera JavaScript i samtliga av de stora webbläsarna. På grund av att denna möjlighet finns bör till exempel validering av indata inte bara göras i webbläsaren genom JavaScript. Om valideringen görs där behöver det finnas en ytterligare validering som sker i lägre lager för att säkra att validering görs för alla användare. I artikeln A study of Internet users' cookie and javascript settings [8] framgår det enligt deras undersökning att mindre än 1 % av de ca 13 000 internetanvändare som besökte deras sida hade JavaScript avaktiverat. 13

2.6 jquery jquery är ett JavaScriptbibliotek med funktioner som har tagits fram för att förenkla anrop och modifikation av element på hemsidor, skapa effekter och animationer samt hantera händelser som till exempel ett mus- klick[9]. Eller som de själva beskriver det: The Write Less, Do More, JavaScript Library [10]. För att använda jquery kan biblioteket antingen laddas ned det gratis från deras hemsida [10] eller länkas till den senaste versionen direkt i HTML- filen enligt följande rad: <script(src="http://code.jquery.com/jquery7latest.min.js"(type="text/javascript">( </script>! Snippet 2.5 Länka till senaste versionen av jquery 2.7 Utvecklingsmiljö Projektet utvecklas med följande verktyg och resurser: Apache http- server Apacheservern ligger på en stationär enhet, men kan också nås utifrån om arbete skulle behöva göras någon annanstans ifrån. Apacheservern installerades genom WAMP- Server[11]. WAMP- Server är en webbutvecklingsmiljö för Windows som inkluderar Apache, PHP och MySQL. PostgreSQL- databas Med installation av WAMP så medföljer det som standard en MySQL- databas, men eftersom att systemet senare ska använda sig av en PostgreSQL databas så behövs MySQL- databasen byttas ut mot denna. PHP PHP version 5.0.X var tvungen att användas, en nyare version är släppt och följde med WAMP distributionen. Men för att kunna använda PostgreSQL var en äldre version tvungen att användas. Adobe Dreamweaver CS5 Användes som texteditor under utvecklingen. Anledningen till att denna programvara valdes är att den förenklar vissa delar av arbetet som kommer att effektivisera hela utvecklingsprocessen. Dropbox Används för enklare versionshantering och möjligheten att nå källkoden oavsett var arbetet ska utföras. Apacheservern har projektmappen i Dropbox som root vilket gör att även om arbetet sker från en annan enhet kan ändringarna ses live på servern utan att uppladdning via FTP eller liknanden krävs. 14

2.8 Studie av det tidigare systemet I projektets inledning gjordes en studie av det tidigare systemet, hur det var uppdelat och vad varje del hade för funktion. Nedan presenteras kort hur de punkter som togs upp i problemanalysen fungerade i den tidigare versionen. Gränssnittet Gränssnittet är uppbyggt av ett antal HTML- och PHP- sidor. Inga separata CSS- filer finns för att strukturera sidorna. Vissa element har tilldelats storlek och ramar direkt i taggen men för övrigt finns det inga stilmallar. Förutom KTH- logotypen ger sidan inget direkt intryck om att användaren faktiskt befinner sig på en KTH- hemsida. I figuren 2.1 visas förstasidan av exjobbspoolen. Figur 2.1 Del av indexsidan från den ursprungliga versionen av exjobbspoolen Databasen Databasen består av tre tabeller. Alignments som representerar de kategorier som ett exjobb kan tillhöra. Examinators som innehåller e- postadresser, namn och ansvarsområde för examinatorer. Tabellen examinators agerar också administratortabell i systemet. Sista tabellen är xjobb_pool som innehåller all information om ett exjobb och dess förmedlare. Söka examensarbete Användaren tillåts söka ett examensarbete utifrån kategori. Det finns ingen möjlighet att söka i alla kategorier. Även ett textfält finns vars användningsområde är att söka efter ett specifikt företag som har förmedlat ett exjobb inom den valda kategorin. 15

Presentation av examensarbete De uppgifter som presenteras när en student har klickat på ett examensarbete som finns i listan efter sökning är kontaktperson, e- postadress, telefon, beskrivning och examinator. Beskrivningen presenteras utan styckesindelning. Administratörens vy och funktionalitet I webbportalens huvudmeny finns tre stycken olika länkar som leder till administrativ funktionalitet. Dessa länkar visas för alla användare. För att få tillgång till dessa krävs det dock att administratören autentiserar sig genom att logga in via KTHs inloggningstjänst. När användaren är autentiserad kan denna godkänna icke granskade exjobb, sätta ett exjobb till påbörjat, avslutat eller övergivet samt lägga till eller ta bort examinatorer som i det här fallet har administratörsrättigheter. När ett exjobb ska sättas till påbörjat eller övergivet händer inget med arbetet ifråga, det finns fortfarande kvar som publicerat och sökbart. Studentens identifiering Innan ett exjobb ska bokas sker ingen identifikation av användaren. Det är inte möjligt att veta om den som ska reservera ett examensarbete verkligen är en KTH- student. Vem som helst kan boka ett exjobb och på så sätt få det att vara otillgängligt i 3 dagar. 16

3 Metod Projektmetoden som har använts är FDD, Feature- driven development. FDD är uppbyggd av fem delprocesser. Målet med dessa är att utveckla de features som kunden har i sin kravspecifikation. En feature är i det här sammanhanget en från kunden utvald funktionalitet som ska tas fram. De fem delprocesserna är: 1. Skapa en modell av systemet som ska utvecklas. Det viktiga är att få en bra överblick av systemet och inte att få med varje feature eller detalj. 2. Skapa en feature- lista, en lista med alla funktioner som ska utvecklas. Vanligtvis innehåller den de features som krävs för att skapa ett helt nytt system, men då detta projekt bygger vidare på ett redan existerande system kommer endast de punkter som ska skapas eller vidareutvecklas att tas med. 3. Feature- planering. Här planeras hur och i vilken ordning punkterna i listan som skapades i tidigare steg ska utvecklas. 4. Feature- design. Den här punkten kan brytas ned i ytterligare tre delprocesser: genomgång, design och inspektion. 5. Feature- utveckling. Här utvecklas de features som tidigare har listats, planerats och designats. Källa: [12] I delprocess 1 togs ett use case- diagram fram för få en bra överblick av systemet som skulle utvecklas. Den kan hittas i bilaga B. Utifrån diagrammet framställdes en feature- lista och i vilken ordning de olika punkterna skulle göras fastställdes. Varje feature har utvecklats iterativt då senare utvecklade features ofta resulterade i förbättringar av tidigare arbete. Genom att använda FFD har det alltid varit tydligt vad som behöver göras och i vilken ordning. Att detta ska ha gynnat projektets resultat är utom tvivel. Att alltid ha en planering för vad som ska göras och när är nödvändigt när projekt av den här storleken ska utföras. 17

4 Konstruktion 4.1 Användargränssnittet Eftersom exjobbspoolen kommer att hittas under http://www.ict.kth.se/xjobb/ och på så sätt vara en del av KTHs hemsidor bör det vara tydligt att användaren fortfarande är kvar på kth.se. Användargränssnittet ska följa en mall på alla KTHs sidor, det ska helt enkelt inte kännas som att man har lämnat kth.se när navigering till exjobbspoolen sker. Således har sidans utseende försökt efterlikna kth.se s övriga sidor. Detta gjordes med hjälp av Google Chromes granska komponent - funktion som gör det lätt att se hur en HTML- sida har strukturerats upp med hjälp av element och CSS. Exempel på saker som kan ses med hjälp av detta verktyg är font- egenskaper för olika taggar, en div- taggs storlek, färger på bakgrund etcetera. Med hjälp av den informationen är det relativt lätt att återskapa en design med samma egenskap som KTHs övriga sidor. Innan utveckling av systemets features påbörjades så togs en generell layout fram som sedan kom att användas vid de olika sidornas utveckling. Se figur 4.1. Figur 4.1 Generell layout för Exjobbspoolen Layoutens uppbyggnad med HTML- och CSS- filer hittas i Bilaga A 18

4.2 Databasen En ny databas behövde framställas för att kunna uppfylla de krav som fanns i problemanalysen. Bland annat fanns inte längre något behov av examinatorer i systemet och skulle därför ersättas med en administratörstabell som kunde innehålla en vanlig- och en super- administratör. För att kunna implementera de statusar som exjobben skulle kunna ha behövdes också en del kolumner läggas till i tabellen för examensarbeten. Den information som hade något att göra med kontaktuppgifterna till den som förmedlade examensarbetet bröts ut till en egen tabell. Detta för att lättare kunna hämta information om bara annonsören. Den nya databasdesignen kan ses i sin helhet i bilaga C. 4.3 Lista examensarbeten Uppdragsgivaren efterfrågade att det skulle vara möjligt att lista examensarbeten efter ett antal olika alternativ. Innan har det endast varit möjligt att lista alla exjobb utifrån en kategori och göra en fritextsökning på vilket företag eller institution som har förmedlat examensarbetet. Att kunna lista alla exjobb som fanns tillgängliga ansågs som ett viktigt alternativ, tillsammans med att också kunna söka i beskrivning eller titel. Utifrån dessa önskemål utvecklades följande funktionalitet: Studenten kan välja att visa alla examensarbeten ur en specifik kategori eller alla examensarbeten i hela systemet. Detta val görs genom ett rullgardinselement i PHP- filen. Om en ytterligare filtrering efter ett ord eller mening vill göras anges det i ett textfält under. Textfiltreringen söker igenom det urval som angivits i rullgardinen efter namn och beskrivningar av exjobben. Användarvänlighetsmässigt är det snyggare att ladda in resultatet av sökningen utan någon som helst uppdatering av sidan. Detta implementeras med hjälp av AJAX och jquery enligt snippet 4.1 nedan. 19

<!##$jquery$##>$$$$ <script$src="http://code.jquery.com/jquery#latest.js"></script>$ <script$type="text/javascript">$$$$$$$$ $$$$$(function()${$$$$$ $$$$$$$$$$$("#search_button").click(function()${$$$$$$$$$$$ $$$$$$$$$$$$$$$//$getting$the$value$that$the$user$typed$$$$$$$$$ $$$$$$$$$$$$$$$var$searchstring$=$$("#search_box").val();$$ $$$$$$$$$$$$$$$var$category$=$$(".category_select").val();$$$$ $$$$$$$$$$$$$$$//$Create$the$search$string$$$$$$$$$ $$$$$$$$$$$$$$$var$data$=$'search='+$searchstring$+$'&category='$+$category$;$$$$ $$$$$$$$$$$$$$$if(searchstring.length$>=$0)${$$$$$ $$$$$$$$$$$$$$$$$$//$ajax$call$$$ $$$$$$$$$$$$$$$$$$$.ajax({$ $$$$$$$$$$$$$$$$$$$$$$$type:$"post",$ $$$$$$$$$$$$$$$$$$$$$$$url:$"search.php",$ $$$$$$$$$$$$$$$$$$$$$$$data:$data,$$$$ $$$$$$$$$$$$$$$$$$$$$$$beforesend:$function(html)${$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$("#results").html('');$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$("#results").hide();$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$("#searchresults").show();$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$(".word").html(searchstring);$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$(".searchcategory").html(category);$$$ $$$$$$$$$$$$$$$$$$$$$$$},$$$ $$$$$$$$$$$$$$$$$$$$$$$success:$function(html){$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$("#results").append(html).show('slow');$$ $$$$$$$$$$$$$$$$$$$$$$$}$$$$$ $$$$$$$$$$$$$$$$$});$ $$$$$$$$$$$$$$}$$$$$$ $$$$$$$$$$$$$$return$false;$$$ $$$$$$$$$$});$$$$$$$ $$$$});$$$$ $$$$$(document).ready(function()${$$ $$$$$$$$$$$("#search_button").trigger('click');$$ $$$$});$$$$$$ </script>$! Snippet 4.1 jquery och AJAX för att ladda in sökresultatet Ett problem som detta kan ställa till med är att om användaren inte har JavaScript aktiverat i webbläsaren kan ingen sökning göras. En lätt och vanlig lösning är att tala om för användaren att han eller hon behöver ha JavaScript påslaget för att kunna ha möjligheten att söka i exjobbspoolen. Men det bästa är självklart att utveckla tjänsten så att den fungerar oavsett. Detta kan göras genom att använda noscript- taggen, innehållet i taggen presenteras endast för användaren då JavaScript är avstängt i webbläsaren[13]. Innehållet kan vara ett annat sökformulär som inte använder sig av jquery och AJAX. Det ska dock ifrågasättas om det verkligen är värt att lägga ned tid och resurser på att utveckla extra funktionalitet för att hjälpa de användare som har valt att avaktivera JavaScript. Som introducerades i teoristudien är det troligen inte mycket mer än 1 % som har inaktiverat JavaScript. 20

4.4 Presentation av examensarbete I tidigare version av systemet presenterades beskrivningen för ett examensarbete enligt figur 4.2 Figur 4.2 Beskrivning av examensarbete i tidigare version Att läsa en text utan styckesindelning och som dessutom täcker hela bredden av webbläsarfönstret är inte det lättaste för ett mänskligt öga. Det är i både företagets och students vinning att examensarbetena presenteras på ett sådant sätt att det är lätt att läsa. I och med att denna beskrivning sparas och läses ifrån en kolumn i databasen behöver texten både formateras rätt då ett företag eller institution förmedlar exjobbet, samt läsas in rätt då den ska presenteras för studenter. En fråga som kan ställas i detta sammanhang är: kommer formateringen som en användare gjorde i textrutan att presenteras på samma sätt? Om svaret är ja så är det i alla fall positivt ur den aspekten att personen som gör inmatningen har möjligheten att göra en formatering av texten. Men meddelas det inte att denna möjlighet finns är det inte säkert att användaren ifråga utnyttjar denna funktionalitet. Därför behövs det på något sätt visas att detta går. Ett lösningsförslag är att bara informera användaren genom att skriva en liten förklarande text. Som till exempel: formatering i textrutan kommer sedan att användas vid presentation av examensarbetet. Men användaren kan ändå inte vara helt säker på hur allt kommer att visas, det är inte säkert att de helt säkert vet vad systemet menar med formatering. Ett bättre alternativ är helt enkelt låta person se med egna ögon hur det kommer att se ut efter publicering och kan sedan göra ändringar efter eget tycke. Detta kan liknas vid en förhandsgranskning av till exempel ett Microsoft Word- dokument där man lätt kan se hur det kommer se ut innan utskrift sker. Denna lösning implementerades genom att lägga till en förhandsgranskningsknapp till gränssnittet där ett exjobb ska förmedlas. För att förhandsvisa användes Fancybox [14] vilket är ett verktyg som använder sig av jquery för att visa innehåll och bilder flytande ovanför den ursprungliga hemsidan. När användaren har sett resultatet kan fancyboxen lätt stängas ned och formuläret kommer nu att visas igen. 21

Nedan visas hur detta implementerades i koden. I snippet 4.2 visas hur jquery och fancyboxens JavaScript- fil läses in samt hur förhandsvisningsknappen #previewlink kopplas ihop med funktionen. I snippet 4.1 presenteras hur man genom JavaScript hämtar värden från textfält och placerar denna information i HTML- element. Div- taggen med id preview_container är satt som display: none; i tillhörande CSS- fil och kommer inte synas förutom vid tillfället då användaren använder sig av förhandsgranskningen. <!##$Javascript$for$the$preview$##>$ <script$type="text/javascript">$$$ $$$$$("#previewlink").click(function$()${$$ $$$$$$$$$('#namepreview').html($('#name').val());$$$$$ $$$$$$$$$('#companypreview').html($('#company').val());$$$$$$$ $$$$$$$$$('#contactpreview').html($('#contact').val());$$$$$ $$$$$$$$$('#emailpreview').html($('#email').val());$$$ &&&&&&&&$('#phonepreview').html($('#phone').val());$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$('#descriptionpreview').html(nl2br($('#description').val(),true));$ $$$$});$ $$$$function$nl2br$(str,$is_xhtml)${$ $$$$$$$var$breaktag$=$(is_xhtml$ $typeof$is_xhtml$==='undefined')$?$$ $$$$$$'<br$/>'$:$'<br>';$$ $$$$$$$return$(str$+$'').replace(/([^>\r\n]?)(\r\n \n\r \r \n)/g,$$ $$$$$$$'$1'+$breakTag$+'$2');$$$$$$ $$$$}$$$ </script>$ $ <div$id="preview_container">$$ $$$$<div$id="preview">$$$ $$$$$$$$<h1$class="xjobb_info_h1"$id="namepreview">$</h1>$$$$$$ $$$$$$$$<h2$class="green_h2">$kontaktuppgifter$</h2>$$$ $$$$$$$$<div$id="contact_info">$$$$$$$$$$$$$$$$$ $$$$$$$$$$$<p$class="xjobb_info_h2"$>företag:$$ $$$$$$$$$$$<span$id="companypreview"></span>$</p>$$ $$$$$$$$$$$<p$class="xjobb_info_h2">kontaktperson:$$$$$ $$$$$$$$$$$<span$id="contactpreview">$</span>$</p>$ $$$$$$$$$$$<p$class="xjobb_info_h2">email:$$$$$$$$$$$$$$ $$$$$$$$$$$<span$id="emailpreview"><a$class="mail"></a>$</span>$</p>$$ $$$$$$$$$$$<p$class="xjobb_info_h2">telefon:$$$$$$$$$$$$ $$$$$$$$$$$<span$id="phonepreview">$$</span>$</p>$$$$$$ $$$$$$$$</div>$$ $$$$$$$$<h2$class="xjobb_description_h2">beskrivning:</h2>$$$ $$$$$$$$<p$id="descriptionpreview">$</p>$$$$$$$ $$$$<div>$ </div><!##$end$preview_container$##>$! Snippet 4.1 JavaScript och HTML för förhandsvisningslayout och innehåll 22

<!##$Javascript$##>$$$ <script$src="http://code.jquery.com/jquery#latest.js"></script>$$$ <script$type="text/javascript"$src="fancybox.js"></script>$ <script$type="text/javascript">$$ $$$$$(document).ready(function()${$$$$$ $$$$$$$$$$("#previewlink").fancybox({$$$$$$$ $$$$$$$$$$$$$$'titleposition'$:$'outside',$ $$$$$$$$$$$$$$'transitionin'$$:$'none',$$$ $$$$$$$$$$$$$$'transitionout'$:$'none',$ $$$$$$$$$$$$$$'autodimensions':$'true'$ $$$$$$$$$$});$$$$$ $$$$});$$ </script>! Snippet 4.2 jquery och Fancybox Att läsa in formateringen på rätt sätt är inte det enda som krävs för att beskrivningen ska visas på ett bra sätt. När formateringen sparas i databasen ligger radbrytningar som \n. För att få en radbrytning i HTML- dokumentet måste du ersätta detta med en <br\> tag. Detta görs enkelt med hjälp av nl2br( )funktionen som finns i PHP [15]. Ett exempel på hur denna förhandsgranskning kan se ut finns i bilaga D 4.5 Förmedla ett examensarbete Förutom förhandsgranskningen som togs upp i ovanstående punkt fanns ytterligare problem i den tidigare versionen. När ett examensarbete skulle förmedlas behövdes bland annat ingen emailadress fyllas i, och det visades inte heller för användaren vilka uppgifter som var obligatoriska. Valideringen av e- postadressen gjordes med hjälp av ett regex, som är en förkortning av regular expression. Regexs används oftast i situationer som denna, då det ska kontrolleras om en sträng följer ett visst mönster. I snippet 4.3 visas den php- kod som utför valideringen av variabeln $mail som är den sträng som användaren angav i mailtextfältet. Om en ogiltig e- postadress angavs skickas användaren tillbaka till formulärsidan där en felkod kommer visas och tala om vad som gick fel. Enklare validering av övriga obligatoriska uppgifter som måste anges av företaget eller institutionen sker samtidigt som valideringen av e- postadressen. <?php%%!!!if(!preg_match("/^[a+z0+9\å\ä\ö._+]+@[a+z0+9\å\ä\ö.+]+\.[a+z]{2,6}$/i",%$mail)){%%%!!!!!!!die(header('location:%../add/?error=emailerror'));%% %%%}%%?>! Snippet 4.3 Validering av e- postadress i add.php En alternativ och väldigt vanlig lösning till valideringsproblemet är att göra valideringen i webbläsaren med hjälp av JavaScript. Fördelen att göra på detta sätt är att man 23

slipper skicka data till servern innan validering och behöver således inte ta hand om den informationen som redan är inmatad i formuläret. Sker valideringen som i det här fallet på servern måste den informationen tas om hand för att användaren ska slippa mata in alla uppgifter på nytt om något fält inte går igenom valideringen. Den största nackdelen och också den orsak till att validering med JavaScript inte användes i denna del av projektet är att JavaScript går att stänga av i webbläsaren. Har användaren av någon orsak valt att inte tillåta JavaScript sker ingen validering och okontrollerad data sparas i databasen. 4.6 Identifiera studenten I den tidigare versionen kunde vem som helst boka ett publicerat arbete, det fanns alltså ingen referens till vem som har bokat och därför inte heller någon möjlighet att avboka. För att ett bokat arbete återigen ska vara sökbart var det enda alternativet att vänta i tre dagar då det återigen blev synligt. Eftersom att det endast ska vara studenter på KTH som tillåts söka de arbeten som är publicerade är det lämpligt att använda sig av KTHs inloggningstjänst. Detta är bra då studenten inte behöver registrera sig i ett ytterligare ett system. Innan bokningen kan göras måste studenten vara inloggad via KTHs inloggningstjänst och är han eller hon inte autentiserad kan ingen bokning genomföras. Inloggningen sker genom användning av student_login.php. Denna fil använder sig i sin tur av phpcas- biblioteket, CAS står för Central authentication service och används då användare ska autentiseras mot en CAS- server [16]. Figur 4.3 Hur phpcas fungerar. Källa: [16] 24

Studenten kan när som helst logga in genom att klicka på Logga in - länken som alltid visas i det översta högra hörnet då användaren inte är autentiserad. Om någon försöker boka ett exjobb innan autentisering används phpcas::forceauthentication( )funktionen som tvingar användaren att logga in för att kunna gå vidare. När ett examensarbete bokas sparas också studentens KTH- e- postadress i kolumnen student_reference i databastabellen exjob. På så sätt kommer alltid en bokning kunna kopplas till en student. Detta gör att missbruk av tjänsten blir lätt att avslöja då även administratörer har möjlighet att se vilka exjobb som har bokats, av vilken användare och när bokningen gjordes. 4.7 Ett examensarbetes olika statusar För att ett examensarbete ska presenteras på rätt plats i exjobbspoolen oavsett om det är bokat, påbörjat, publicerat, ej granskat eller avslutat behöver systemet hantera exjobben utifrån dessa statusar. Hur detta har lösts och implementerats beskrivs i detta avsnitt. Ett examensarbete skapas i systemet när ett företag eller institution förmedlar sina uppgifter via add/add.php. Per default sätts värdet i kolumnen status till 0 vilket indirekt ger hela exjobbet statusen inlagt men ej granskat. När ett exjobb har denna status visas det inte för någon annan än administratörerna, som kan se det som ej granskad. Det är först när en administrator har godkänt och publicerat det som kolumnen status får värdet 1 och får således statusen publicerad. När ett exjobb har nått detta läge är det sökbart för alla användare i systemet, det vill säga det kan hittas vid sökning i search/search.php. I och med att det går att hitta vid sökning är det också bokningsbart för studenter som har loggat in. När en student väljer att boka ett examensarbete, ge exjobbet status bokat, ändras värdet i kolumnen visible_from (timestamp) till tidpunkten för bokningen plus tre dagar. Arbetet kommer vara bokat i dessa tre dagar eller till dess att studenten eller en administratör avbokar det. När ett exjobb är bokat kan en student genom att gå till mina sidor ändra statusen till påbörjad. Tanken är att det ska ske då en student har kommit överens med företaget eller institutionen som har förmedlat examensarbetet. När detta sker ändras värdet på status i databasen till 2. En administratör är den enda som kan ändra tillbaka ett arbete från påbörjat till publicerat och således också gör det tillgängligt för sökningar av andra studenter. För att ett exjobb ska erhålla status avslutat måste studenten som bokat och angett det som påbörjat också markera arbetet som avslutat. I databasen sparas då värdet 3 i kolumnen för status. 25

4.8 Städning av systemet I problemanalysen efterfrågades det en funktion som skulle städa systemet. Denna skulle antingen köras per automatik efter ett visst schema eller triggas av en administratör. Detta för att inte gamla, icke publicerade och avklarade exjobb skulle finnas tillgängliga i systemet. Att utveckla ett script som körs per automatik på KTHs server fanns det inte rättigheter till, och troligen inte heller tid. Att en administratör ska behöva trycka på en knapp för att rensa systemet verkade inte heller som den bästa lösningen. Att utveckla systemet så att detta sköts av sig själv vore det bästa. Nedanstående punkter resulterar i att systemet städar sig självt. 1. När en administratör ska granska ett exjobb väljer den antingen att publicera eller radera det. 2. Ett arbete kan inte ligga hur länge som helst som publicerat eftersom det sätts en deadline då det skapas. 3. När en elev är klar med exjobbet ska den sätta det som avslutat och arbetet kommer inte längre visas i systemet. Något som kan ses som ett problem är att ansvaret för att sätta ett examensarbete som avslutat ligger hos studenten. Kommer denna verkligen att avsluta sitt exjobb? Administratörer har i vilket fall också möjligheten att sätta ett arbete som avslutat om det skulle bli ett problem. 4.9 Förbättra administratörens vy och funktion I den tidigare exjobbspoolen kunde alla användare av systemet se de länkar som ledde till administratörens funktionalitet. Oavsett om inte alla kunde använda dess så bör de endast vara synbara för administratörerna. Detta löstes genom att implementera administratörsinloggningen i samma login- länk som används av studenterna. En administratör loggar alltså in på samma sätt som en student, med skillnaden att då dennes KTH- alias (e- postadress) finns i databasen autentiseras han eller hon som en administratör. När autentiseringen som admin är klar kommer en länk till administratörsgränssnittet att visas där det för studenter finns en länk till Mina sidor. 26

Väl i administratörsgränssnittet är gammal och ny funktionalitet samlad. Vyn kan ses i bilaga E. Där kan följande fem tabeller med olika funktioner hittas: Ej granskade exjobb Här visas de exjobb som har förmedlats av ett företag men ännu inte godkänts av en administratör. En granska- knapp finns för varje arbete i tabellen. Vid granskning kan en administratör välja att publicera eller radera exjobbet. Bokade exjobb Här visas de exjobb som för tillfället är bokade i systemet. Administratören kan också se vem som har bokat och när bokningen går ut. Här finns också möjligheten att avboka varje exjobb. Publicerade exjobb Här visas de exjobb som är publicerade och som inte är bokade för tillfället eller har markerats som påbörjade. En administratör kan här välja att klicka på editera- knappen. Vid editering av ett exjobb har en administratör möjligheten att ändra uppgifter som kanske inte stämde från början. Det kan vara något som fel kontaktuppgifter eller stavfel i beskrivningen. Även exjobbets status kan ändras. Det kan sättas tillbaka till ej granskat eller markeras som avslutat om det skulle behövas tas bort från systemet. Påbörjade exjobb De exjobb som har markerats som påbörjade presenteras i denna tabell. Administratören kan här precis som i publicerade exjobbstabellen editera uppgifter. Även status kan ändras här. De valen som finns är att ändra tillbaka till publicerat eller markera som avslutat. Superadmin I systemet finns också en eller ett fåtal superadministratörer. Tabellen superadmin presenteras bara då administratören är av typen super, vilket bestäms av värdet i kolumnen superadmin i tabellen administrator i databasen. De funktioner som en superadmin men inte vanliga administratörer har tillgång till är: lägga till och ta bort kategorier samt lägga till och ta bort en administratör. Ta- bort- kategori- funktionen är utvecklad så att ingen kategori med exjobb knutna till densamma kan tas bort. Detta då ett exjobb alltid måste vara ansluten till en kategori. Eftersom inloggningen i systemet använder sig av KTHs inloggningstjänst kan endast administratörer med en kth- epostadress registreras. 27

Alla olika tabeller kan minimeras och maximeras för att öka användarvänligheten då det i vissa tabeller kommer att kunna finnas ett stort antal exjobb som gör vyn svår att arbeta med. Detta görs med en metod i jquery som heter toggle. Den gömmer och visar innehållet i ett element som den har kopplats till. I det här fallet körs toggle- funktionen varje gång det klickas på en tabellrubrik och tabellens innehåll visas eller göms efter varje klick. 28

5 Resultat Resultatet av detta examensarbete är en förbättrad version av webbportalen exjobbspoolen. Den tillhandahåller förutom det från tidigare version följande funktionalitet. ü Möjlighet för företag eller institution att innan förmedling av ett examensarbete förhandsgranska den information som ska skickas. ü En förbättrad presentation av ett examensarbete med formatering av informationen. ü Autentisering av studenter som ska boka ett exjobb. ü När en student bokar ett exjobb spara dennes e- postadress för att kunna paras ihop med en bokning. ü En student kan själv hantera avbokning och ange ett exjobb som påbörjat. ü Ett gränssnitt som är anpassat efter kth.se s övriga design. ü Sökning med möjlighet att visa alla tillgängliga examensarbeten samt söka efter fritext i namn och beskrivning. ü Sökresultatet presenteras utan omladdning av sidan. ü Förbättrad administratörsvy med nya funktioner som: avboka exjobb, lägga till och ta bort kategorier, editera uppgifter för ett arbete. Figurer på hur det färdiga systemet ser kan hittas i bilaga D och bilaga E. 29

6 Slutsats Webbportalen som utvecklats uppfyller i stor utsträckning de krav som ställdes av uppdragsgivaren. Troligen finns en del buggar som avslöjas först när systemet har använts ett tag, men jag tror att systemet skulle kunna användas utan större problem redan idag. Något som inte fanns med i problemanalysen men som kan vara bra att undersöka i framtiden är om det på något sätt går att koppla samman systemet med EXIT (Examiners In Information Technology). EXIT är ett system som ska ha funktionen att visa då examinatorer på ICT- skolan är lediga och vem som kan ansvara för ett specifikt exjobb. I och med att examinatorer inte längre har någon roll i exjobbspoolen anser jag att det vore bra om systemen på något sätt kunde bryggas för att lättare komma i kontakt med rätt examinator. Huruvida exjobbspoolen kommer att användas skarpt eller inte är vid skrivande stund svårt att veta. Detta eftersom att hela KTH nu har en egen exjobbsportal som kanske får ICTs version att verka överflödig. Oavsett om ICTs exjobbspool kommer att användas eller ej kan jag dra slutsatsen att det i vilket fall behövs ett liknande system på KTH. Att samla examensarbetsförslag på en plats hjälper både studenter, institution och företag att enklare hantera hela processen med examensarbetessökning. 30

Källförteckning [1] W3schools, HTML - Introduction http://www.w3schools.com/html/html_intro.asp Hämtad 2012-05- 28 [2] W3schools, HTML 5 - Introduction http://www.w3schools.com/html5/html5_intro.asp Hämtad 2012-05- 28 [3] W3schools, CSS - Introduction http://www.w3schools.com/css/css_intro.asp Hämtad 2012-05- 28 [4] The PHP Group, What is PHP http://php.net/manual/en/intro- whatis.php Hämtad 2012-05- 28 [5] The PostgreSQL Global Development Group, PostgreSQL - History, http://www.postgresql.org/about/history/ Hämtad 2012-05- 28 [6] The PostgreSQL Global Development Group, PostgreSQL - About, http://www.postgresql.org/about/ Hämtad 2012-05- 28 [7] W3schools, JavaScript - Introduction http://www.w3schools.com/js/js_intro.asp Hämtad 2012-05- 28 [8] Smorgasbork.com, A study of internet users cookie/js settings http://smorgasbork.com/component/content/article/84- a- study- of- internet- users- cookie- and- javascript- settings Hämtad 2012-03- 24 [9] Webbdesignguiden.se jquery http://www.webbdesignguiden.se/jquery- guiden/ Hämtad 2012-06- 02 [10] jquery.com, The write less do more JavaScript library http://jquery.com/ Hämtad 2012-03- 10 [11] WAMP- Server, Apache, PHP and MySQL on Windows http://www.wampserver.com/en/ Hämtad 2012-05- 28 31

[12] Martin Bauer, successful- development, http://www.sitepoint.com/successful- development/ Hämtad 2012-03- 20 [13] w3schools, noscript tag http://www.w3schools.com/tags/tag_noscript.asp Hämtad 2012-06- 02 [14] Fancybox, image and content displaying tool, http://www.fancybox.net Hämtad 2012-04- 19 [15] The PHP Group, nl2br function http://php.net/manual/en/function.nl2br.php Hämtad 2012-05- 29 [16] Wiki.jagsig.org, phpcas examples https://wiki.jasig.org/display/casc/phpcas+examples Hämtad 2012-05- 27 32

Bilaga A: Generell layout <!DOCTYPE*HTML>** <html*lang="sv">** ***<head>******* ******<!<<*Meta*information*<<>** ******<meta*charset="utf<8">*** ******<meta*http<equiv="content<type"*content="text/html;*charset=utf<8"*/>*** ******<!<<*Title*<<>**** ******<title>examensarbeten*i*kista</title>* ******<!<<*Favicon*<<>** ******<link*rel="shortcut*icon"*type="image/x<icon"*href="favicon.ico">**** ******<!<<*Stylesheets*<<>****** ******<link*href="resources/css/main.css"*rel="stylesheet"*media="screen"*/>** ***</head>* ***<body>**** ******<div*id="main_container">*** *********<header>**** ************<div*id="header"*class="clearfix">** *****************<div*id="header_logo">*<a*href="http://www.kth.se">** *******************<img*src="resources/images/logo.png"*alt="kth:s*logotyp">*</a>** *****************</div>*** *****************<div*id="header_title">** ********************<a*href="../index.html">*icts*exjobbspool*</a>* *****************</div>**** ************</div>*** *********</header><!<<*end*header*<<>*** *********<div*id="content_container"*class="clearfix">***** *************<div*id="left_content">*** ****************<h2*class="navigation_header">*navigering*</h2>** ****************<nav>****** ****************<ul*class="navigation">*** *******************<li*class="active">*<a*href="">start</a>*</li>* *******************<li>*<a*href="information/">information</a>*</li>*** *******************<li>*<a*href="search/">sök*examensarbete</a>*</li>**** *******************<li>*<a*href="add/">förmedla*examensarbete</a>*</li>***** *******************<li>*<a*href="#">examinatorer</a>*</li>*** ****************</ul>** ****************</nav>*** *************</div><!<<*end*left_content*<<>**** *************<div*id="right_content">****** ****************<h1>*huvudrubrik*</h1>******* *************</div><!<<*end*right_content*<<>**** *********</div><!<<*end*content_container*<<>**** *********<footer>***** *********<div*id="footer">*</div>************* *********</footer><!<<*end*footer*<<>** ******</div>*<!<<*end*main_container*<<>** ***</body>** </html>! Figur A1: template.html 33

@charset!"utf&8";! /*!CSS!Document!*/!! body{!!!!!!line&height:1;!text&align:center;!background:!#e4e4e4;!!!!border&top:!solid!11px!#1954a6;!! }!! ul{!!!!!list&style:none;!! }!!! a{!!!!!!margin:0;!padding:0;!font&size:100%;!vertical&align:baseline;!!!!!!background:transparent;!text&decoration:!none;!! }!! h1{!!!!!!font&size:!38px;!font&family:!'garamond!pro',garamond,'times!new!!!!!!roman',times,serif,'droid!sans';!color:!black;!font&weight:!normal;!!!!!border&bottom:!solid!1px!gray!line&height:!110%;!padding&bottom:!15px;!! }!! h2{!!color:!#1954a6;!font&family:!'helvetica!neue',helvetica,arial,sans&serif;!!!!!!!font&size:!18px;!line&height:!25px;!font&weight:!300;! }!!!! /*!Site!layout!*/!!! #main_container{!!!!!margin:!auto;!!width:!976px;!text&align:left;!!background:#fff;! }!!!!! /*!header!*/!!! #header{!!!!!min&height:!90px;!border&bottom:!3px!solid!#1954a6;!!margin:!0!38px!20px!38px;!!!!!!padding:!18px!0;!!display:!block;!position:relative;!! }!! /*!content!*/!! #content_container{!!!!!width:!975px;!!padding&bottom:!15px;! }!! #left_content{!!!!!margin&right:!10px;!float:!left;!width:!238px;!font&size:12px;!color:!gray;!!!!font&family:!'helvetica!neue',helvetica,arial,sans&serif;!! }!! #right_content{!!!!float:right;!width:!670px;!padding&right:38pxmin&height:350px;!!!!!padding&left:!10px;!! }!! /*!navigation!*/!!.navigation!ul{!padding&left:38px;!}!!.navigation!li{!!!!line&height:!1.231;!padding&top:!5px;!padding&bottom:!5px;!!!!border&bottom:!1px!solid!#e6ecf5;!! }!!.navigation!li.active{!!!!!color:!#1954a6;!font&weight:!bold;!background:!#e6ecf5;!!!!!border&bottom:!1px!solid!#fff;!border&top:!1px!solid!#fff;!!}!.navigation!li:hover{!background:!#e6ecf5;!}!!.navigation!a{!color:!inherit;!margin&left:!38px;!}!.navigation_header{!margin&left:!38px;!margin&bottom:!7px;!}! Figur A2: Utdrag från main.css 34

Bilaga B: Use Case-diagram Bilaga B: Use Case- diagram för de olika användarklasserna i exjobbspoolen 35

Bilaga C: Databasmodell Bilaga C - Databasmodell 36

Bilaga D: Förhandsgranskning Bilaga D Förhandsgranskning 37

Bilaga E: Exjobbspoolens övriga vyer Figur E1 Administrera 38

Figur E2 Studentens Mina sidor 39

Figur E3 Förmedla exjobb 40

Figur E4 Sök examensarbete 41

Figur E5 Exjobbsinformation 42

Figur E6 Information 43

Bilaga F: Statusdiagram Bilaga F - Statusdiagram 44