Examensarbete. MK Brinkarna. Thomas Rydström Ämne: Datavetenskap Nivå: B-uppsats 15hp Kurskod: 1dv40E

Transkript

1 Examensarbete MK Brinkarna Thomas Rydström Ämne: Datavetenskap Nivå: B-uppsats 15hp Kurskod: 1dv40E

2 Handledare: Daniel Toll, Linneuniversitetet i Kalmar, Institutionen för datavetenskap, fysik och matematik Examinator: Johan Leitet, Linneuniversitetet i Kalmar, Institutionen för datavetenskap, fysik och matematik Institutionen för datavetenskap, fysik och matematik Linneuniversitetet i Kalmar Thomas Rydström Sida II

3 Abstrakt En webbapplikation har skapats åt en motorklubb i Karlskrona vid namn Brinkarna. Webbsidans syfte är att sprida information till klubbens medlemmar, samt göra reklam för klubben för att kunna få fler medlemmar. Applikationen är utvecklad i CMS-programmet Joomla! som är uppbyggt med programmeringsspråket PHP. Designen och presentationen sköts med hjälp av CSS och XHTML, bilder med hjälp av programmet Photoshop CS4. Abstract A web application created for a motor club in Karlskrona named Brinkarna. The website has a purpose to disseminate information to club members, and promotion of the club and thus able to get more members. The application is developed by the CMS software Joomla! which is built with PHP programming language. The design and presentation is handled by CSS and XHTML, images using the Photoshop CS4. Thomas Rydström Sida I

4 Förord Projektet uppkom efter ett första möte med min handledare, då bollade vi hur vidare jag skulle göra ett eget projekt eller jobba mot en befintlig kund. Jag valde i att jobba mot en befintlig kund. Projektet hittade jag i exjobbspoolen på Linnéuniversitetet. Kunden är en motorklubb i Karlskrona som heter Brinkarna. Jag vill tacka Daniel Toll som varit handledare under examensarbetet. Han har varit ett bra stöd och bollplank under våra veckoträffar. Vill också tacka min sambo som har läst igenom mitt examensarbete. Thomas Rydström Sida II

5 Innehållsförteckning Abstrakt... I Abstract... I Förord...II 1. Introduktion Bakgrund Joomla! Moduler till Joomla! Modulsystemet i Joomla! Administration i Joomla! Meny system i Joomla! Joomla! artikelhantering Avgränsningar Mål Kravspecifikation Metod Valda tekniker Hypertext Preprocessor Extensible HyperText Markup Language Cascading Style Sheets Structured Query Language Projektmodell Uppgradering av PHP Uppgradering av Joomla! Webbsidans målgrupp Metoddiskussion Joomla! i jämförelse med Drupal Varför valdes Joomla! Genomförande Kundkontakt Thomas Rydström Sida III

6 5.2 Förberedelser inför projektet Webbapplikationen Mockup Joomla! installation Modul Överlämnande av webbapplikationen Resultat Startsidan - Modern webbapplikation Uppbyggnad Inloggning formulär Medlemsansökan Tävlingsformulär Forum Intervjuer av medlemmar Diskussion Källförteckning Elektroniska källor Personlig kommunikation Bilagor Bilaga 1: Förslag till Webbpage Bilaga 2: Administrationsgränssnitt Bilaga 3: Första publiceringen Bilaga 4: Förslag till layout Thomas Rydström Sida IV

7 1. Introduktion Detta projekt är ett examensarbete inom datavetenskap på 2-åriga webbprogrammeringsprogrammet, på Linnéuniversitetet i Kalmar. Arbetet går ut på att skapa en ny modern webbapplikation åt Motorklubben Brinkarna i Karlskrona. Den nuvarande webbsidan anses av klubben vara omodern och utanför sin tid. Webbapplikationen kommer att byggas med hjälp av ett CMS-system( 1 ) för att skapa en dynamisk webbsida som webbansvarige i MK Brinkarna sedan ska ta över och administrera. CMS-systemet som valts till detta projekt heter Joomla!( 2 ). 1 CMS: Content Management System (Innehållshanteringssystem) 2 Joomla!: [ ] 1

8 2. Bakgrund MK Brinkarna är en Motorklubb, som är en ideell förening som består av en styrelse samt ett 60-tal medlemmar. Klubbens har sitt säte i Karlskrona och har de senaste åren arrangerat tävlingar i Emmaboda för både dragracing och såkallad superstage (konbanekörning). Klubbens medlemmar har en äldre snittålder men de yngre åldrarna blir fler i klubben. MK Brinkarna är inte bundna till någon stereotyp inom motorhobbyn, alla är välkomna. Klubben har medlemmar som kör offroad, bygger/kör tävlingsbilar, originalrenoverar, bygger showbilar, amerikanare, européer, japsare, motorcyklar, osv. Mk Brinkarna har vid utgångsläget av examensarbetet en befintlig webbplats som används till att pressentera klubben, ett sätt att kommunicera med hjälp av ett forum samt pressentera klubbens evenemang. Under projektets gång ska sidan göras om till en mer modern webbsida. Vid projektets början var webbsidan grundstomme uppbyggd med frames, en meny och ett externt forum. Sidans utseende innan projektets början 2

9 2.1 Joomla! Joomla( 3 ) är ett CMS-system som installeras på en webbserver och är uppbyggt med ett administrationssystem, templates (färdiga vyer), menyer, artiklar och moduler. I programmet finns ett administrationsgränssnitt, som man når genom en inloggningsfunktion som är inbyggd i programmet. Under administrationssidan har administratören full kontroll över hur webbapplikationen organiseras. Den största orsaken till att många väljer joomla i förhållande till andra CMS, är att man lätt, i administrationsgränssnittet kommer igång med att publicera sin webbplats på en webbserver. Användaren väljer någon tillgänglig mall vid installationen eller väljer en av 1000-tals som är fria att ladda hem på nätet. Väljer användaren att göra egna mallar eller funktioner i joomla så krävs det kunskaper i XHTML, CSS och PHP. Programmet är uppbyggd med färdiginstallerade moduler som sköter om sidan och gör det lätt för en administratör eller användare att hålla sin webbsida dynamisk. En användare kan logga in med sitt användarnamn och skapa nya artiklar, lägga upp bilder eller bara titta på nyheterna som gäller för den inloggade användaren. Modulerna gör att användaren har kontroll över vad som händer på webbsidan. Genom att joomla har en öppen källkod kan administratören, webbutvecklaren göra egna moduler, beroende på vilka funktioner webbsidan behöver och modulerna läggs lätt till under programmets menyer. Om inte användaren vill göra egna, eller vill ha andra moduler än vad som fanns vid installationen, finns det många sidor på internet som har fria moduler att ladda hem, t.ex. forum, bildvisning, formulär till m.m. Den ovana hemmasnickaren som vill ha en personlig webbsida eller det lilla företaget, har med hjälp av CMS-programmet Joomla! stora fördelar att få en dynamisk hemsida som är lätt att sköta med hjälp av administrationsgränssnittet i joomla, om man använder de funktioner som andra webbutvecklare redan utvecklat till programmet. 3 3 Joomla dokumentation

10 2.1.1 Moduler till Joomla! Plugins eller som det kallas i joomla, moduler finns både i gratis versioner och företag som säljer sina insticksmoduler till utvecklare och användare av programmet. På joomlas officiell webbplats( kan man hitta många moduler för nedladdning. I och med att joomla är ett stort CMS-program så finns det i dag många som utvecklar moduler, vilket gör att det överlag finns massor med gratis moduler att använda även om det finns en mängd olika moduler som installeras vid installationen Modulsystemet i Joomla! Modulerna i programmet styrs i administrationsvyn och kontrollerar innehållet på Webbapplikationen. <jdoc:include type="message" /> Modulernas kod skrivs in med hjälp av jdoc taggar i startsidan t.ex. index.php beroende på vad startsidan heter. Alla modulerna som man installerar i joomla går att redigera och göra om så modulen passar sin egen specifika webbsida. Modulerna kan placeras med en position på webbsidan med hjälp av ett id som sätts antingen till höger eller vänster (id= right, id= left ), detta id placeras i den div-tagg( 4 ) där man vill ha en viss funktion. I webbläsaren syns inte den kod som modulsystemet har utan tas bort av systemet när publiceringen sker för användaren. Modulerna styrs av menyerna i joomla, byter man webbsida sköter programmet om att placera de nya artiklarna eller modulerna på samma plats som den förra var på, varav sidan blir dynamisk. 4 Div-taggar används för att dela upp webbsidan i block, sektioner. 4

11 5 Figur 1. Modul huvudmeny

12 2.2 Administration i Joomla! Meny system i Joomla! Programmet har ett meny system som består av ikoner med beskrivande text och ett sökbart hjälpsystem. Det användaren mest kommer i kontakt med är artiklarna som är placerade uppe till vänster bland ikonerna. Det är där man skriver in texten som ska komma ut på webbsidan. Figur 1: Joomlas meny system på svenska Joomla! artikelhantering I artikel vyn ser användaren alla artiklar som är inskriva i programmet, vilka artiklar som är aktiverade, artiklar som finns på förstasidan, sektion och kategori artikeln tillhör. Här ser man vem som är författare till artikeln och när den skrevs. Här blir artikeln tilldelad ett id, som man vid publicerad kan se i adressfältet så man kan bokmärka just den artikeln. Om användaren är intresserad så kan man se hur många träffar en viss artikel fått. 6

13 7 Figur 1. Artiklar i artikel vyn.

14 Vid publicering av en artikel behöver användaren inte ha någon stor datorvana. Funktionerna i Joomla har de flesta funktionerna som ett ordbehandlingsprogram har t.ex. fetstil, textstorlek, positionering av text. Det finns möjlighet att skriva i html format om användaren vill skriva med XHTML. Figur 2. Ordbehandling för att skapa en artikel 8

15 2.3 Avgränsningar I slutfasen av projektet saknades information till webbsidan, vid kontakt med kunden beslutad de att informationen som saknades skulle fyllas i av webbansvarige i klubben. De krav som inte kommer att bli uppfyllda vid leveransen är, intervjuer med klubbmedlemmar, information runt bilder och information på sidor som klubbens historia, 60-års jubileet m.m. 9

16 3. Mål Projektets fastställda mål mellan kund och utvecklare är att under examenstidens 10 veckor ska utforma en modern och dynamisk webbapplikation, där webbansvarige på MK Brinkarna lätt ska kunna administrera, tillföra nya artiklar, nyheter och bilder. 3.1 Kravspecifikation Kraven som kom upp vid första mötet med MK Brinkarnas webbansvarig och som var givna vid projektets start var att sidan ska ha en modern layout. Deras befintliga webbsida var uppbyggd med hjälp av frames vilket inte de moderna webbsidorna som webbutvecklare utvecklar idag gör, istället kommer CSS (Cascading Style Sheets)( 5 ) att användas för att göra en layout på webb sidan. Html-standarden kommer att byggas med XHTML 1.0 Transitional( 6 ). Övriga krav som finns för projektet. Ska innehålla klubbens logo "Intervjuer" med några klubbmedlemmar med intresse av bilar Formulär för anmälan till klubbens evenemang Nyheter (ska vara enkelt för vem som helst att med rättighet lägga in på hemsidan med hjälp av inloggning) Hur man blir medlem, och ett ansökningsformulär Länksida Forum Utbilda kunden angående joomla 5 CSS: (stilmall) är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg. [ ] 6 XHTML: Extensible HyperText Markup Language, XHTML är ett s.k. "markup-language" vilket översatt betyder märkup-språk. Detta menas att du märker upp innehållet på en webbsida med taggar för att ange dessa som rubriker, stycken, tabeller, listor m.m. [ ] 10

17 4. Metod 4.1 Valda tekniker Hypertext Preprocessor PHP (Hypertext Preprocessor) är ett populärt skriptspråk för webbutveckling. Php används för att driva dynamiska webbplatser från t.ex. en databas. Php körs på en webbserver och producerar HTML-kod som visas för klienten. En användare ser inte php-koden Extensible HyperText Markup Language XHTML är en striktare version och en vidareutveckling av html som används för att skapa webbapplikationer och visas genom olika webbläsare. Xhtml beskriver för webbläsaren hur webbsidan ska publiceras för användaren. I xhtml används olika taggar för att beskriva t.ex. länkar, rubriker, bilder och text Cascading Style Sheets Cascading Style Sheets är ett program språk som förkortas CSS och beskriver hur html-element ska presenteras på en webbapplikation. När man separerar css och htmlkoden kan man spara mycket tid och arbete genom att återanvända css-filen på flera webbsidor. Med hjälp av css kan man styra webbsidors egenskaper t.ex. hur text och bilder ska placeras, färger på sidan samt teckensnitt och teckenstorlek Structured Query Language SQL (Structured Query Language) är ett standaliserat språk för att hämta och modifiera data i databaser och enligt ANSI-standarden (American National Standards Institute) skall sql uttalas ɛs kjuː ɛl. Sql är en standard som de flesta databaser använder. 11

18 4.2 Projektmodell Arbetsmodellen under examensarbetet kommer att vara Unified Process( 7 ). Projektet delas in i veckoplanering som kallas iterationer där faserna är: Förberedelse (Inception) Etablering (Elaboration) Konstruktion (Construction) Överlämning (Transition) Moment för en iteration i projektet: Handledarmöte: Ett kort möte där problem tas upp, risker diskuteras. Leverans och återkoppling: Systemet levereras till kund och kundens återkoppling ska omhändertas. Riskhantering: Vilka risker i projektet har uppkommit, vilka risker har hanterats från föregående iteration, vilka risker har förändrats från föregående iteration? Individuell tidsrapportering Ny iterationsplan: en ny plan för nästa iteration tas fram baserat på återkoppling från kund. 4.3 Uppgradering av PHP När man vill uppgradera sitt konto till en nyare php-version får man ta kontakt med webbhotellets supporteravdelning. Efter kontakten flyttas den nuvarande webbservern till en nyare server vilket kan ta upp till 48 timmar. Under uppgraderingen rekommenderas att inte använda filerna på webbservern. 7 Unified Process är en systemutvecklingsprocess för design och implementering av IT-system. 12

19 4.4 Uppgradering av Joomla! Vid uppgradering av programmet rekommenderas det att titta på 16], där informationen finns för att uppgradera en äldre version till den befintliga 1.5X versionen. 4.5 Webbsidans målgrupp MK Brinkarnas webbapplikation täcker en stor åldersgrupp beroende på att klubbmedlemmarnas ålder är mellan år. Webbsidan kommer i de flesta fall rikta sig till klubbmedlemmar och motorintresserade. 13

20 4.6 Metoddiskussion Joomla! i jämförelse med Drupal Joomla och Drupal är båda ett CMS-system med open-source (öppen källkod). Båda programmen bygger sin struktur med programmeringsspråket PHP och är för närvarande de två största cms-programmen på marknaden. Generellt sett om man tittar på joomla och drupal så är det lättare att komma igång med joomla och lättare att underhålla, vilket gör att fler användare väljer joomla före drupal. Vill man ha lättare funktioner där man kan lägga till bilder, innehåll, eller logga in på sidan för att se innehållet så fungerar joomla utomordentligt. Däremot om man satsar på en större webbapplikation där versionshantering, dynamiska fält och rättigheter är viktigt så ska man satsa på drupal. Joomla 1.5 som används i denna webbapplikation är uppbyggd helt objektorienterat till skillnad från drupal, vilket vissa webbutvecklare föredrar. Valet av joomla var ett av förslagen som kom upp vid första handledarmötet av handledaren för projektet. Efter att ha tittat på tutorials, jämfört joomla och drupal så blev valet för projektet, cms-programmet joomla. Joomla valdes i projektet av den anledningen att efter projekt slut skall webbansvarige i MK Brinkarna lätt kunna administrera webbsidan och joomla har ett lättare administrations gränssnitt än drupal. Efter utbildningen som webbprogrammerare, kommer man sannolikt ha stor nytta av att fördjupat sig i ett cms-system när man utvecklar webbapplikationer åt olika organisationer Varför valdes Joomla! Den slutgiltiga anledningen till att joomla valdes var att webbansvarige på MK Brinkarna inte är så insatt i webbutveckling och joomla har ett lättarbetat gränssnitt. Webbhotellet uppgraderar äldre php-versioner till den senaste genom att webbansvarige skickar ett mail till deras suport. 14

21 5. Genomförande 5.1 Kundkontakt En kontinuerlig kontakt har skett under projektets gång med kunden, huvudsakligen via , någon enstaka gång fysiskt vid genomgång av projektets webbapplikation. Några gånger under projektets gång blev det ett par större avbrott mellan kontakterna när kunden skulle få fram information till webbapplikationen, varav påtryckningar fick göras för att få kunden att få fram material till sidan. Vid sista kontakten på mail angående material till webbsidan kom svaret tillbaks att MK Brinkarna själva tar på sig ansvaret till att fylla på sidan med information. Det har även varit kontinuerliga kontakter med handledaren för att stämma av vad som gjort under veckan och planera efterkommande veckans arbete. 15

22 5.2 Förberedelser inför projektet Vid första mötet med kunden säkerhetsställdes en gemensam vision om hur webbapplikationens funktion och utseende skulle kunna se ut vid projektets slutfas. Magnus Törnqvist som är webbansvarig för MK Brinkarna kunde vid mötet ge uppgifter om var kunden hade sin befintliga domän( 7 ) brinkarna.se, som är belägen på webbhotellet( 8 ) I och med att kunden redan hade en domän och webbhotell gjorde projektets uppstart betydligt mycket lättare. Detta möte blev också lite negativt när det kom fram att klubben egentligen inte hade tänkt hur webbsidans layout skulle se ut. För att få ett förslag till layout till detta projekt fick vi titta på andra befintliga webbplatser som andra motorklubbar publicerat på internet. Kunden gav två förslag till layout (bilaga 4), och efter att tittat på flertalet motorklubbars webbsidor. Detta gjorde att det fanns en mall att utgå från i projektet. Vid upp starten av projektet fanns det inte några krav på hur webbapplikationens uppbyggnad, därav valdes CMS-systemet joomla, efter en utvärdering mellan två innehållshanteringssystem(cms) joomla och Drupal. 7 Domän: [ ] 8 Webbhotell: Ett webbhotell är en tjänst som möjliggör för den som inte vill upprätthålla en egen offentlig webbserver att publicera sig på World Wide Web. [ ] 16

23 5.3 Webbapplikationen Vid genomgången med webbansvarige på MK Brinkarna kom det fram att det fanns vissa krav på hur sidan skulle se ut. Klubbens färger som är i grönt och vitt skulle behållas på den nya webbapplikationen och klubbens logga skulle finnas på första sidan. 5.4 Mockup Vid första träffen med webbansvarige för MK Brinkarna, kom det fram att klubben inte hade något förslag till hur deras webbapplikation skulle se ut utan bara att den skulle ha ett modernt utseende varav vi fick titta på några andra motorklubbars webbplatser för att få ett förslag och uppslag till utseende. En första mockup(bilaga 1) gjordes med hjälp av joomla. MK Brinkarna bestämde att designen för webbplatsen kunde byggas med inspiration av mockupen. 5.5 Joomla! installation När det bestämdes att Joomla skulle bli det CMS-systemet som skulle användas på MK Brinkarnas applikation kontrollerades det om det var möjligt att installera programmet på det befintliga webbhotellet. Webbhotellet har stöd för Joomla och PHP. Webbhotellet surftown har ett system som heter 1-Click Toolbox, man kan säga att 1-Click Toolbox är en verktygslåda som gör det lättare att installera olika program på deras webbserver. Webbhotellet har förkonfigurerat inställningarna vid Joomla-installationen så alla inställningar i programmet inte behövs göras manuellt. I detta fall installeras Joomla med hjälp av en ikon på administrationsgränssnittet (bilaga2). Det som behövdes vid installationen, var att visa programmet under vilken domän programinstallationen skulle ligga. 17

24 5.6 Modul MK Brinkarnas webbapplikationen har en modul installerad som heter ccboard och är ett forum. Denna modul laddades ner från Överlämnande av webbapplikationen Vid överlämnandet av webbapplikationen till webbansvarige i MK Brinkarna hölls det en utbildning om hur joomla fungerar, så att den ansvarige i klubben kan underhålla webbsidan efter projektets slut. Webbansvarige i MK Brinkarna kom till Linnéuniversitetets datasal där utbildningen hölls samt ett dokument överlämnades som hjälp till att underhålla webbsidan, [ ]. 18

25 6. Resultat 6.1 Startsidan - Modern webbapplikation Vid starten av projektet efterfrågade kunden en modern webbapplikation som användare i olika åldrar kan använda sig av. Det skulle också tas i tankarna att användarna inte har någon direkt dataerfarenhet. Efter att ha publicerat första designen (bilaga 3), utvecklades sidan till dagens utseende. MK Brinkarna Startsida 6.2 Uppbyggnad Webbapplikationen är uppbyggd i 4 delar, varav en är bilden som ligger högst upp på sidan. Till vänster finns huvudmenyn och en inloggningsfunktion. På höger sida finns MK Brinkarnas logga, besökare som är online på sidan samt en sökfunktion. All information som man trycker fram genom huvudmenyn kommer att visas i mittsektionen av applikationen. 19

26 6.3 Inloggning På MK Brinkarna startsida finns en inloggningsfunktion där klubbmedlemmar ska kunna logga in med personliga inloggningsuppgifter. Efter inloggningen kommer det upp en användarmeny under den befintliga startmenyn, där webbansvarige i klubben kan lägga till information som bara berör den inloggade användaren. Inloggning 20

27 21 Inloggad användare

28 6.4 formulär Applikationen innehåller tre stycken E-postformulär. Formulären är länkade till phpscript som skickar mailet till den ansvarige i MK Brinkarna Medlemsansökan Medlemsansökan 22

29 6.4.2 Tävlingsformulär SuperStage Formulär 23

30 24 StreetRace Formulär

31 25

32 6.5 Forum MK Brinkarna forum är en modul som man kan hämta hem från För att kunna skriva i forumet måste man vara en registrerad användare. Forum 6.6 Intervjuer av medlemmar Ett av målen var att göra intervjuer med klubbmedlemmar om deras motor intresse, detta var något som hoppades över för att hinna med de vessäntliga delarna som att bygga upp strukturen av webbapplikationen. 26

33 7. Diskussion Innan projektet på börjades hade jag funderingar på att göra ett eget projekt, men efter funderingar efter första handledarmötet bestämde jag mig för att jobba mot en befintlig kund istället. I och med att jag jobbat mot en kund i ett tidigare projekt visste jag hur man skulle gå till väga med kontinuerliga kundkontakter, och få viktig feedback om utvecklingen med sidan. Tyvärr var inte kunden i detta projekt så intresserad att lägga ner den tiden som behövs för att hjälpa mig att färdigställa webbapplikationen efter den kravspecifikation som ställdes till mig. Detta ser jag både som positivt och negativt i min mening. Projektet blev inte klart i sin helhet vilket är negativt men samtidigt har jag fått en erfarenhet av en besvärlig kund som man kan ha nytta av i senare projekt. Denna webbapplikation är uppbyggd med hjälp av joomla, vilket gjorde att man var tvungen att sätta sig in i ett nytt system. Positivt med joomla är att de problemen jag utsattes för under projektet var väl dokumenterade, detta beror på att många webbutvecklare använder joomla. Jag kommer själva att använda joomla i framtiden när jag utvecklar nya webbapplikationer. Webbsidan är i bruk och kunden är nöjd med resultatet. Själv tycker jag att resultatet blev en webbapplikation som föreningen kan jobba vidare på med hjälp av den utbildningen som webbansvarige fick av mig i slutet av projektet. De har själva tänkt publicera den saknade informationen på webbsidan efter mitt överlämnande. 27

34 8. Källförteckning 8.1 Elektroniska källor [ ] [ ] Personlig kommunikation Andreas Lager (ordförande MK Brinkarna), Magnus Törnquist (lill-mange, web-ansv. MK Brinkarna), Daniel Toll, (Handledare, Linnéuniversitetet 28

35 9. Bilagor 9.1 Bilaga 1: Förslag till Webbpage 29

36 9.2 Bilaga 2: Administrationsgränssnitt 30

37 9.3 Bilaga 3: Första publiceringen 31

38 9.5 Bilaga 4: Förslag till layout Haninge Motorklubb 32

39 33 Kortedala motorklubb

40 Växjö / Kalmar Tel dfm@lnu.se Lnu.se/dfm