Studentportal -utformad med innehållshanteringssystemet Joomla

Transkript

1 Examensarbete Studentportal -utformad med innehållshanteringssystemet Joomla Dennis Sangmo, Dennis Sangmo Ämne: Examensarbete Nivå: B Kurskod: 1DV40E

2 Abstrakt Projektet som ligger till grund för denna rapport handlar om, att skapa en studentportal till SHiK (Studentkåren Högskolan i Kalmar). SHiK hade en webbplats innan detta projektet startade men var i behov av en ny med fler funktioner som studenterna kunde ta del av. Några av dessa funktioner var bostad- och litteraturannonsering, ett länkarkiv, ett forum och möjligheten för att visa RSS- och Twitter flöden. Detta projekt är genomfört genom att använda ett välutvecklat CMS (Content Management System) vid namn Joomla, vilket i sin tur är byggd i PHP och javascript, och som databashanterare så används MySQL. Resultatet blev en webbplats med komplett funktionalitet enligt kraven. Abstract This raport is about creating a studentportal for SHiK (Studentkåren Högskolan i Kalmar). SHiK had a site before the start of this project but were in need of a new site with more functions that the students could use. Some examples of thies functions were flat- and literature-annoncement, a linkarchive, a forum and the possibility to display RSS- and Twitter feeds. This project is created by using a CMS (Content Management System) named Joomla, which is created with PHP and javascript, as database it uses MySQL. The resault is a site with full functionality according to the requirements. Dennis Sangmo - II -

3 Förord Projektet och denna rapport är ett arbete för kursen Examensarbete 15hp B-nivå och är en slutkurs som ingår i Webbprogrammeringsprogrammet på Linnéuniversitet i Kalmar. Det skall därför vara ett sätt att använda de kunskaper som förvärvats under de två senaste åren i praktiken. Det har varit speciellt intressant att arbeta under den tidspress som har varit vid utveckling av detta projekt. Inte minst på grund av den försenade starten utan även för all den tid som har lagts på att skriva denna rapport. Jag vill också tacka Martin Blomberg som har varit min handledare genom detta projekt. Jag vill också tack Studentkåren Högskolan i Kalmar med Per Samuelson som kontaktperson. Dennis Sangmo - III -

4 Innehållsförteckning 1. Introduktion 1 2. Bakgrund Verksamhetsbeskrivning Avgränsningar Mål Baskrav Genomförande Planeringsfas Analys av målgrupp Val av arbetsmiljö Grafisk design Val av teknik Joomla HTML PHP CSS MySQL Joomla Teknik Annonces komponent Kunena forum komponenten JTweets modul Simple RSS feed reader Modul Resultat Annonseringen Listan Kategorier Ny annons Forum Administrationsdel Twitter-flöde Flödeslistan Inställningar...13 Dennis Sangmo - IV -

5 5.4. Rss-flöde Flödeslistan Inställningar Reklam annonser Grafisk struktur Diskussion Källförteckning Elektroniska källor Bilagor Ordlista...19 Dennis Sangmo -V-

6 1. Introduktion Jag mottog uppdraget från skolan (Johan Leitet1) efter att SHiK (Studentkåren Högskolan i Kalmar2) hade varit i kontakt med honom. Det som SHiK är i behov av är en ny och mer välutvecklad webbplats för de studenter som studerar på Linnéuniversitet i Kalmar. Några av de viktigaste funktionerna som behövs är annonsering av bostäder och böcker, forum och ett länkarkiv. Det är också viktigt att kårstyrelsen skall kunna visa olika RSSordlista- och Twitterordlista-flöden så att studenterna kan läsa om händelser i andra bloggar. Efter att ha läst igenom SHiKs baskrav så förstod jag snabbt att det kommer vara ett bra val att använda sig av ett förskrivet CMSordlista som redan har väldigt många modulerordlista och komponenterordlista som passar in. Med tanke på att stora delar av funktionalitet redan finns skrivna så kommer jag att lägga stor fokus på att utveckla och designa webbplatsens grafiska profil. 1. Johan Leitet är Webbprogrammerings programansvarig

7 2. Bakgrund Studentkåren Högskolan i Kalmar finns till så att alla studenter som studerar vid Linnéuniversitet i Kalmar skall få en så bra skolupplevelse som möjligt. Detta gör de genom att bevaka utbildningarna så att de uppfyller den kvalitet som studenterna har rätt att kräva av skolan. Men som många vet så är det också viktigt att de studerande trivs socialt och därför har Sexmästeriet (som är en del av kåren) i uppgift att göra studielivet trevligare och festligare. Studentkårens tidigare webbplats var också uppbyggd med cms-systemet vid namn Joomla. Detta kommer att underlätta om någon information måste flyttas till den nya webbplatsen. Där fanns möjlighet att sälja/köpa/hyra bostäder, då detta ofta behövs göras av studenter, men den funktionaliteten sköttes i form av ett forum, vilket ledde till dålig navigation och sökfunktion bland annonserna. Därför är ett av baskraven att annonseringen skall skötas med en mer anpassad funktionalitet Verksamhetsbeskrivning När detta projekt inleddes fanns där en tidigare webbplats som studentkåren och studenterna använde. Men den hade mest ett informativt syfte till studenterna Avgränsningar Inga avgränsningar har behövts göras i detta projekt, då det är lätt att utveckla till ett cms så som Joomla. -2-

8 3. Mål I stora drag så behöver studentkåren i Kalmar en ny webbplats där studenterna kommer att vara huvudanvändarna. Med tanke på att målgruppen främst består av en yngre generation så är designen på webbplatsen ett viktigt krav, den skall främst vara positivt tilltalande. Innan den studerande kan ta del av all funktionalitet så måste denne registrera sig och därför är det viktigt att det finns en välstrukturerad användardatabas. Om någon student glömmer eller mister sitt inloggningslösenord skall det kunna återupptas igen. För att ge studenterna möjlighet att ha kårrelaterade diskussioner med varandra kommer webbplatsen behöva ett forum som tillåter detta. Det är viktigt att forumet är lättadministrerat så att innehållskvaliteten och användandet kan hållas på en hög nivå. När studenterna skiftar skola är de oftast tvungna till att flytta. Därför behöver webbplatsen ett annonssystem för boplatser (första och andrahand), men även för kurslitteratur. Studenten skall själv skriva sina annonser och bifoga eventuella bilder samt kunna hantera och ta bort annonserna i framtiden. För att öka säkerheten och kvaliteten på annonserna så måste kårstyrelsen ha möjlighet att kunna kontrollera dem innan de visas publikt för andra studenter. Ett bra sätt att hålla användare involverade och uppdaterade är att publicera information från andra stora webbplatser som används. Studenterna skall därför kunna ta del av ett utvalt antal Twitter- och Facebook-kontos uppdateringsflöde på webbplatsen. De skall eventuellt också kunna ta del av uppdateringar från fristående bloggar genom rss-flöden. -3-

9 3.1. Baskrav Nedan visas baskraven i punktform. De är oförändrade. En lättöverskådlig, snygg hemsida som både känns fräsch och som kan upprätthållas länge Lätt att uppdatera och administrera Möjlighet till RSS-flöden, Twitter-flöden och Facebook-uppdateringar Interaktivitet för besökaren - möjlighet till inlägg i forum osv Platser för annonsering Bostadsförmedlingsportal och andrahandsbokhandel Länkgalleri -4-

10 4. Genomförande 4.1. Planeringsfas Analys av målgrupp I och med att webbplatsen skall göras till en studentkår var analysen av målgruppen inte svårt att genomföra. Det är främst studenter som kommer att använda webbplatsen och den största delen av studenterna är i åldrarna mellan år Val av arbetsmiljö Det förstods tidigt att det skulle vara en bra ide att göra detta arbete i ett redan utvecklat system och anpassa dess funktioner och utseende. WordPress3 (WP) var den utvecklingsmiljö som först testades. Strax efter dess installation och analys av möjligheterna som WP kunde erbjuda drogs slutsatsen att denna miljö inte skulle användas. WP används främst för att utveckla bloggar. Joomla var det andra system som testades, det är också det system som används i detta projekt. Ytterligare anledningar till, att Joomla valdes som utvecklingsgrund i detta arbete är för att SHiKs tidigare webbplats var uppbyggt i det. För att undvika en stor inlärningströskel vid systembyte, samt att Joomla uppdateras kontinuerligt i framtiden och har allt som man behöver veta väldokumenterat på internet, så valde jag att behålla den ursprungliga tekniken Grafisk design För att få en klarare syn på vilka olika strukturer, som oftast används på sidor som har samma målgrupp, så har jag efterforskat på olika existerande webbplatser. Genom att undersöka dessa student-webbplatser4 så har slutsatser gjorts angående vad som skall användas i detta projekt. Jag kom fram till, att det viktigaste är att designen är stilren och inte ger ett skrikigt intryck och därför kommer en grå-blå färgskala med detaljer i orange att användas. Slutligen fastslog jag att webbplatsen kommer ha en väldigt bred bredd på innehållsområdet, då många idag har en bredskärm. Dock skall inte bredden vara 100% utan fortfarande centrerad

11 4.2. Val av teknik Joomla Joomla är ett CMS (Content Management System), vilket innebär att det är väldigt lätt att ändra sidans innehåll och på så sätt kunna skapa avancerade webbapplikationer. Den har också en öppen källkod vilket resulterar i, att den är lätt att utveckla nya komponenter eller moduler till. MVC-strukturenordlista används genom hela systemet även i alla komponenter och moduler och inte bara i grundstrukturen av Joomla. För att kunna skapa sitt eget utseende på webbplatsen använder Joomla ett mallsystem som möjliggör en full förändringsfaktor i strukturen och inte bara i CSS ordlistafilen. Joomla installeras med 3 utseendemallar och om man vill skapa en ny design kan man lägga till en fjärde utseendemall och använda den som standardmall. Joomla är byggd i det webbaserade programmeringsspråket PHPordlista och som databas används MySQLordlista. Om någon av de komponenter eller moduler som installeras använder sig av egna databastabeller, kommer dessa att skapas i databasen vid dess installationsprocess HTML Html används för att skriva webbplatsens struktur, vilket man i Joomlas fall gör främst i utseendemallen PHP Vid utveckling eller eventuell förändring av komponenter så används php då det är det språk som Joomla är skrivet i CSS Css används för att manipulera html-elements utseende, därför används det för att applicera en design på sidan. I Joomlas fall så används det främst vid utvecklingen av utseendemallen. -6-

12 MySQL Mysql är namnet på den databas som kommer att användas, vilket i sin tur kommer att styras av phpmyadminordlista. 10. Ordlista 8.1, punkt 15-7-

13 4.3. Joomla Teknik Annonces komponent Annonce5 är en komponent till Joomla som tillåter användarna, att skapa annonser, där administratörerna har full kontroll över materialet. I detta fall kommer en annonseringskomponent att användas till både bostads och bokhandel, tack vare ett kategorisystem. Ett kategorisystem som är fullt administrerbart för studentkårer på webbplatsens bakomliggande administrationsdel. För att kunna ge användarna en snabb vy på vad som annonseras finns det en modul som visar några av de senaste inlagda annonserna på startsidan Kunena forum komponenten Kunena6 är en välutvecklad forum-komponent som har ett lika bra användningsområde som administration. Forumets alla trådar och diskussioner kan delas in i olika kategorier, vilket inte bara underlättar för användaren utan även för kårstyrelsen när de sätter olika administrativa rättigheter. Rättigheter som ger dem möjlighet att exempelvis låsa eller ta bort diskussioner, med mera. Forumanvändarna har möjlighet att lägga till och ladda upp bilder och filer till trådarna de skriver JTweets modul JTweets7 är en modul, som gör det möjligt att visa en samlad lista av ett antal Twitter flöden på webbplatsen. Studentkåren har möjlighet att skriva en eller flera Twitternamn i modulens inställningar så resultatet blir en blandad flödeslista, som är sorterad efter senaste inlägget. Självfallet så presenteras listan med länkar till respektive Twitterprofil så läsaren kan själv prenumerera på flöden som föll denne i smaken. Denna modul är främst byggd med Javascriptordlista, för att vara mer specifik så används ramverket JQueryordlista. 5. Källa 2 6. Källa Källa 4

14 Simple RSS feed reader Modul Simple RSS Reed Reader 8 är en enkel modul som hämtar en eller flera RSS-flöden och sammanställer dem till en lista, som exempelvis kan visas på startsidan. I och med att detta var det enda som den behövde användas till har en lättviktig rss-läsare implementerats. 8. Källa 5-9-

15 5. Resultat 5.1. Annonseringen För att göra annonseringen möjlig på webbplatsen användes en komponent vid namn Annonce Listan Bild 1: Listobjekt från annonslistan Det första användaren ser, efter att de har autentiserat sig och klickat på menyvalet Annonser i huvudmenyn, är en lista på alla de senaste annonser som har lagts in i systemet. Det betyder att listinnehållet är en blandning av alla de olika kategoriernas annonser. Om användaren väljer att visa innehållet från en av kategorierna kommer självfallet listan uppdateras och bara visa de aktuella annonserna Kategorier Bild 2: Kategoriindelning Bild 2 illustrerar de kategorier som finns att tillhandahålla på webbplatsen. Det är bara administratörer, i detta fall kårstyrelsen, som har rättigheter att modifierar eller lägga till nya kategorier. Detta görs nämligen i det bakomliggande administrationslagret i Joomla

16 Ny annons Bild 3: Formulär för att skapa en ny annons Bild 3 illustrerar det formulär som måste fyllas i då en annons skall skapas i Bostad Andrahand. Den röda ramen visar hur egenskaperna för kategorien Bokhandel är annorlunda, vilket betyder att om studentkåren vill skapa en ny kategori i framtiden så kan de också ändra dess egenskaper så att de är relevanta. Annonsören kan också ladda upp upptill fem bilder som kopplas till annonsen

17 5.2. Forum Forumet utgörs av en komponent vid namn Kunena. Illustration 4: Forumets indelning i kategorier och diskussioner Forumets innehåll delas in i kategorier, diskussioner och trådar. Kategorierna kan innehålla en eller flera diskussioner som i sin tur kan innehålla en eller flera trådar. Det är trådarna som användarna har rättigheter till att skapa och skriva i. För att göra forumet mer personligt för studenterna har de möjlighet att ladda upp en egen avatarordlista, men de har också möjlighet för att använda någon av forumets standardavatarer Administrationsdel Kunena har en väldigt välutvecklat administration som endast kårstyrelsen kan komma åt genom den bakomliggande delen. Några exempel på vad styrelsen har rättigheter till är: Mindre generella konfigurationsändringar för säkerhet, uppladdning, ranking, utseende och profilbild. Full kontroll över forumets innehåll, kategorier, diskussion och trådar. Förändra rättigheter för användare utanför administrationsdelen Övervaka uppladdade bilder och filer. Lägga till och ta bort känsloikoner som användarna kan använda i sina texter

18 5.3. Twitter-flöde Flödeslistan På startsidans högra sida, i form av en kolumn med ett listobjekt per rad, visas Twitterflödet. Varje rad startar med en profilbild av den person som har skrivit inlägget och fortsätter med namn, tid och text. För att det inte skall bli en oändligt lång lista så visas endast de fem senaste inläggen Inställningar Bild 5: Twitterflödets inställningsparametrar Bild 5 illustrerar några av de bakomliggande inställningar som kan göras för modulen. Vi kan exempelvis se, att Twitter-kontona, som vi vill skall visas i listan fylls in i Twitter Username(s) med ett kommatecken som separerar dem

19 5.4. Rss-flöde Flödeslistan Modulen med rss-flöde har väldigt stora likheter med modulen med Twitter-flödet. Den stora skillnaden är, att de hämtar informationen från olika källor. På webbplatsens startsida finner vi tre sådana listor placerade som tre kolumner bredvid varandra, där alla hämtar information från olika källor Inställningar Bild 6: Rssflödets inställningsparametrar Rss-flödena, som matas in i modulens inställningar, separeras med ett enterslag. Illustreras i bild

20 5.5. Reklam annonser Bild 7: Rödmarkering är område för reklamannonser Den reklam-komponent som används i detta projekt är en komponenten som medföljer i Joomla vid dess installation. Varje reklamannons måste vara kopplad till en annonsör, som skall representera den person eller det företag som vill publicera reklamen på webbplatsen. Bland annonsörsuppgifterna finner man bland annat kontaktpersonens namn och epostadress

21 5.6 Grafisk struktur Bild 8: Webbplatsens grafiska struktur Bild 8 illustrerar den grafiska struktur som valdes att appliceras på webbplatsen. I detta fallet så är det startsidan som beskrivs. Annonsmodulen valdes att placeras relativt högt upp på sidan, ovanför rss-listorna och under huvudmenyn. Twitter-läsaren, som har placerats på den högra sidan, innehåller oftast korta meddelande på varje rad, vilket resulterar i att läsarens område är neddraget på bredden

22 6. Diskussion Jag startade detta projekt fyra veckor försent, då jag hoppades på att få ett lite mera geografiskt lokalt uppdrag. Men eftersom tiden var knapp valde jag ett av de uppdrag, som skolan hade kontakt med. Att använda sig av ett färdigutvecklat CMS som Joomla har både för- och nackdelar. Efter min mening är det ett otroligt händigt system att arbeta med då man får mycket välutvecklad funktionalitet gratis. Nackdelen är att jag ibland kan känner mig fastlåst eftersom jag är tvungen till, att arbeta efter Joomlas ramar. Det kan också vara lite problematiskt när jag skall hämta specifik information genom ramverket. Först måste jag ta reda på, vilket objekt som har den informationen jag söker, för att senare hitta den variabel eller funktion man skall anropa. Som tur är så finns det väldigt bra dokumentation för detta. Om jag gjort om arbetet idag skulle en hel del delar varit annorlunda. Först och främst så skulle jag inte använt mig av Joomla, eller ett CMS överhuvudtaget. Inte på grund av att det skulle passa bättre med någon annan utvecklingsgrund till detta projekt, utan mer av personliga själ. Jag har tidigare arbetat i Joomla och skulle finna mer intresse av att utveckla i någon annan miljö,men på grund av tidsbrist valde jag att hålla mig till Joomla. Att skapa en design som är positivt tilltalande för sin målgrupp är en uppgift som inte är lätt att möta. Många frågor uppstår kring detta krav. Hur bred skall sidan vara? Vilket färgschema skall användas? Osv. Personligen tycker jag att dessa frågor är bland de svåraste att svara på, men är förövrigt nöjd med slutresultatet

23 7. Källförteckning 7.1. Elektroniska källor 1. Joomlas Hemsida. ( )[ ] 2. Komponenten Annonce. (Annonce) [ ] 3. Komponenten Kunena ( [ ] 4. Komponenten JTweets (JTweets) [ ] 5. Komponenten Simple RSS Feed Reader (Simple RSS Feed Reader) [ ] 6. WordPress ( [ ] 7. Kristianstad Studentkår ( [ ] 8. Uppsala studentkår ( [ ] 9. Lunds studentkår ( [ ]

24 8. Bilagor 8.1. Ordlista 1. Avatar är ett annat ord för profilbild. Den bild som kommer relateras till dig och ditt konto. 2. SHiK (Studentkåren Högskolan i Kalmar) är en studentkår som ser till så att eleverna vid Linnéuniversitet i Kalmar får en bra skolgång. 3. RSS (Really Simple Syndication) är en lista av information ifrån en extern sida som är strukturerad efter en standard sätt så att andra kan ta emot och behandla den. Det används ofta vid nyhetsflöden så att användarna kan få de senaste nyheterna på det sätt de behagar. 4. Twitter är en kommunikations-webbapplikation som används av många som en mikroblogg. Det används också i många fall som ett vanligt nyhetsflöde. 5. PHP (Hypertext Preprocessor) är ett programmeringsspråk för webbutveckling som körs på servern innan klienten får se sidan. Därför kan man behandla och ändra strukturen på hemsidan på ett dynamiskt sätt. 6. CSS (Cascading Style Sheets) är ett stilspråk som modifierar utseendet på htmlelementen. 7. CMS (Content Management System) är ett ramverk med bra uppbyggd administration som gör det lätt att skapa hemsidor. 8. Joomla är ett exempel på CMS. Det är också det som används i det arbete som ligger i grund för denna rapport. 9. MVC (Model View Controller) är ett arkitekturmönster som går ut på att man alltid arbetar mot kontroller-delen, som hämtar information eller använder sig av funktioner i modellen. Till sist appliceras en vy på informationen för publicering. 10. Komponent (Component) är en paketerad funktion eller tjänst som utökar en webbplats som är baserad på Joomla. 11. Modul (Module) är en utbyggnad till en Joomla-baserad webbplats. En modul

25 innehåller oftast mindre information och kan därför placeras på en mindre del av en sida. Vissa moduler är kopplade till en komponent och kan då visa summerande information om den på till exempel startsidan. 12. Javascript är ett skriptspråk som förändrar eller modifierar information på en sida efter att användaren har laddat sidan. Vissa webbläsare och användare har inte Javascript aktiverat för att förminska hotet från attacker och därför är det viktigt att sidan fungerar utan Javascript. 13. JQuery är ett välutvecklat ramverk som gör det lättare för andra programmerare att utveckla i i Javascript. Innan man kan använda JQuery så måste man inkludera det på sin sida. 14. MySQL är en av världens mest använda databas med öppen källkod. 15. PhpMyAdmin är ett php-baserat system som har i uppgift att administrera en MySQL databas

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