Innehållshanteringssystem
för webbsidor
Joakim Bollström
Högskolan på Åland
serienummer 24/2014
Informationsteknik
Mariehamn 2014
ISSN 1458-1531
Examensarbete
Högskolan på Åland
Utbildningsprogram:
Författare:
Arbetets namn:
Handledare:
Uppdragsgivare:
Informationsteknik
Joakim Bollström
Innehållshanteringssystem för webbsidor
Agneta Eriksson-Granskog
Designr – Jonas Öhblom
Abstrakt:
Mitt examensarbete handlar om att utveckla en webblösning med hjälp av
Hypertext
Markup Language, JavaScript, jQuery, Cascading Style Sheets och Hypertext Preprocessor
teknologier. Uppgiften utfördes på uppdrag av Designr och utgick från deras
kravspecifikation av en webbplattform där deras kunder kan hanterar sina hemsidor från ett
användarvänligt webbgränssnitt. Många liknande lösningar av denna typ finns, såsom
Drupal, Joomla och WordPress webbpubliceringssystem.
Nyckelord (sökord):
jQuery, JavaScript, HTML5, CSS, MySQL, PHP, AJAX, WYSIWYG
Högskolans serienummer: ISSN:
Språk:
Sidantal:
2014:24
1458-1531
Svenska
25
Inlämningsdatum:
Presentationsdatum:
Datum för godkännande:
27.5.2014
16.5.2014
27.5.2014
Degree Thesis
Högskolan på Åland / Åland University of Applied Sciences
Study program:
Author:
Title:
Academic Supervisor:
Technical Supervisor:
Information Technology
Joakim Bollström
Content Management System for Webpages
Agneta Eriksson-Granskog
Designr – Jonas Öhblom
Abstract:
My thesis is about developing a web solution using the Hypertext Markup Language,
JavaScript, jQuery, Cascading Style Sheets and Hypertext Preprocessor technologies. The
task was carried out on behalf of Designr and was based on their requirements of a web
platform where their customers can manage their websites from a user-friendly web
interface. There are many similar solutions of this type Drupal, Joomla and WordPress
publishing systems.
Key words:
jQuery, JavaScript, HTML5, CSS, MySQL, PHP, AJAX, WYSIWYG
Serial number:
ISSN:
Language:
Number of pages:
2014:24
1458-1531
Swedish
25
Handed in:
Date of presentation:
Approved on:
27.5.2014
16.5.2014
27.5.2014
INNEHÅLLSFÖRTECKNING
1 INLEDNING ................................................................................................................. 3
2.
3.
1.1.
Syfte ................................................................................................................... 3
1.2.
Backgrund .......................................................................................................... 3
1.3.
Metod ................................................................................................................. 4
1.4.
Avgränsningar .................................................................................................... 4
BAKGRUND ........................................................................................................... 5
2.1.
Uppdragsgivaren Designr .................................................................................. 5
2.2.
Kravspecifikation ............................................................................................... 5
2.3.
Funktionella krav ............................................................................................... 5
2.4.
Icke-funktionella krav ........................................................................................ 5
2.5.
Användarfallsdiagram ........................................................................................ 6
PROGRAMMERINGSSPRÅK OCH RAMVERK ................................................. 7
3.1.
Hypertext Markup Language (HTML) .............................................................. 7
3.2.
Cascading Style Sheet (CSS) ............................................................................. 8
3.3.
JavaScript (JS) ................................................................................................... 8
3.3.1.
Ckeditor ...................................................................................................... 9
3.3.2.
Asynchronous JavaScript and JSON (AJAX) ............................................ 9
3.4.
4.
jQuery .............................................................................................................. 10
3.4.1.
jQuery Validation ..................................................................................... 11
3.4.2.
jQuery UI .................................................................................................. 11
3.5.
Hypertext Preprocessor (PHP) ......................................................................... 11
3.6.
MySQL ............................................................................................................ 12
UTVECKLING ...................................................................................................... 13
4.1.
Struktur ............................................................................................................ 13
4.2.
Planering .......................................................................................................... 13
4.3.
Ajax anrop ramverk ......................................................................................... 14
4.4.
Grafiska gränssnittets funktionaliteter ............................................................. 15
4.5.
WYSIWYG-redigering .................................................................................... 15
4.5.1.
4.6.
Filöverföring .................................................................................................... 16
4.6.1.
5.
WYSIWYG-redigering sekvensdiagram .................................................. 16
Uppladdning av filer ................................................................................. 17
Resultat ................................................................................................................... 18
5.1.
Resultat ............................................................................................................ 18
5.2.
Förbättringar .................................................................................................... 18
5.2.1.
Grafiska Gränssnittet ................................................................................ 18
5.2.2.
Optimera kodbas ....................................................................................... 19
5.2.3.
Användarguide ......................................................................................... 19
6.
SAMMANFATTNING ........................................... Error! Bookmark not defined.
7.
KÄLLFÖRTECKNING ......................................................................................... 21
1 INLEDNING
1.1. Syfte
Syftet är att utveckla ett webbgränssnitt för att kunna editera hemsidor enligt
principen ”What You See Is What You Get” principen. Lösningen skall vara
relativt enkel så att användaren inte behöver kännedom i webbutveckling eller
programvara för att flytta filer till en server. Den färdiga produkten kommer att
användas av Designrs (2.1) kunder med en godtycklig webbläsare som erbjuder ett
gränssnitt för WYSIWYG-redigering och för att administrera dokument. Lösningen
kommer också att underlätta Designr-administratörer att snabbt redigera kundernas
hemsidor och ge support.
1.2. Backgrund
Företag, organisationer och privatpersoner alla som behöver egna hemsidor för att
representera sina företag online. Företag anlitar ofta en webbyrå som gör jobbet för
dem medan ett en privatperson använder sig av ett innehållshanteringssystem i form
av Wordpress till exempel. Ett innehållshanteringssystem eliminerar ofta kraven på
att kunna programmera men det uppstår också ett annat hinder. Ett
innehållshanteringssystem kan vara mycket komplicerat och kan ta tid att lära sig.
Därför har Designr önskat om en lösning på som skulle kunna tillämpas till alla
deras kunders hemsidor oberoende kodbas eller webhotelleverantör. Lösningen är
planerad att vara modulär så att man kan avkoppla koppla funktioner som inte
används eller sätta till nya när behoven ökar. Idén med att ha kunden att använda
webbläsaren för att använda tjänsten var ett naturligt val på grund av antagandet att
alla kunder har en webbläsare.
3
1.3. Metod
Kraven på lösningen kommer Designrs kravspesification men också från beslut
senare i utvecklingen. Information om teknologi som utnyttjas i lösningen är väl
dokumenterat på internet.
Applikationer som användas för att underlätta utvecklingen av lösningen är:
-
Adobe Dreamweaver, användarvänliga webbutvecklingsverktyg
-
SQLyog, modifiering av SQL-databaser från ett grafiskt gränssnitt
-
Filezila, FTP-klient för filöverföring
-
Google Chrome, Webbläsare för testning.
1.4. Avgränsningar
Innehållshanteringssystemet kommer inte att vara optimerat för användning på
mobilplattformer på grund av den begränsade skärmstorleken. Möjligheten är att
man skulle kunna bygga ett skilt webbgränssnitt för stöd för mobil och läsplattor
men för tillfället kommer det inte vara aktuellt.
Det grafiska är lämnat till ett minimum för det krävs inte för att lösningen skall
fungera som planerat. Det grafiska består av några ikoner samt ett simpelt
färgschema för att underlätta under utvecklings skedes.
4
2. BAKGRUND
2.1. Uppdragsgivaren Designr
Designr är ett företag med 6 anställda som skapar webb- och grafiska lösningar till
små och medelstora företag. Designr befinner sig i Ekenäs i södra Finland. Mycket
som man gör är specialtillverkat och använder sig inte av någon plattform så som
Wordpress eller Drupal. Därför har det nu givit mig till updrag att skapa en lösning
till detta behov.
2.2. Kravspecifikation
En kravspecifikation har i uppgift att förse användaren och utvecklaren med ett
gemensamt
dokument
på
hur
systemet
skall
fungera.
Dessutom
är
kravspecifikationen mycket viktig under sluttesten, där systemets funktionalitet
jämförs med de fördefinierade kraven. (Kravspecifkation, 2014)
2.3. Funktionella krav
Dessa är funktioner som kommer att implementeras i lösningen:
-
Logga in / Logga ut: Användaren måste kunna logga in med ett eget lösenord.
Lösenorden måste vara envägskrypterade med en slumpmässig text så att det är
säkert att lagra dem i en databas.
-
Editera hemsidan: Användaren skall kunna modifiera innehåll på sin sida.
-
Ladda upp: Det skall vara möiligt för användaren att sätta egna bilder på
hemsidan och då måste det först laddas till webbhotellet.
-
Radera filer: Användaren skall kunna radera gamla bilder.
-
Support: Användaren ska enkelt kunna få support via en e-postadress eller
inbyggd chat i systemet.
2.4. Icke-funktionella krav
Ett viktigt krav är att lösningen skall ha ett lätt användargränssnitt. Användaren
förväntas inte kunna någonting om webbutveckling eller servrar det enda han/hon
behöver känna till är hur man använder en webbläsare.
5
Andra viktiga punkter är att innehållshanteringssystemet skall var lösenords skyddat
samt kunna bli kopplat till ett E-mail konto för att ah entydiga inlogningsuppgifätr
för en större mängd användare. Och en modulärisk system design hjälper till för att
möjliggöra att i fortsättningen kunna utveckla systemet vidare för kommande behov.
2.5. Användarfallsdiagram
Diagrammet i figur 1 visar den huvudsakliga functionalitetn implementerat
innehållshanteringssystemet.
Figure 1 - Use case diagram for the user
6
i
3. PROGRAMMERINGSSPRÅK OCH RAMVERK
Kapitlet kommer att kort presentera de programmeringsspråk och ramverk som
används för programmet. Modern webbutveckling går ofta ut på att använda sig av
många programmeringsspråk.
3.1. Hypertext Markup Language (HTML)
HyperText Markup Language eller html, skapades för forskare att kunna dela filer.
Det har sedan blivit en standard för World Wide Web och att använda html för en
form att representera document på internet i form av hemsidor, bloggar och annan
data. HyperText Markup Language används för att ange dokumentets struktur i en
sådan form att en webläsare kan represetera html-sidan i ett läsbart tillstånd till
användaren. Detta gör man med hjälp av element-taggar eller tags, de har i regel
alltid en starttag och en sluttag. (W3C, 2014) (W3C, 2014)
I Figur 2 ser vi ett html-dokument
som inte är en kommentar utan ett
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title of the document</title>
</head>
<body>
<h1>A Minimum HTML5 Document</h1>
<p>
This is a paragraph
</p>
</body>
</html>
doctype-definition, W3C (World
Figur 2- Ett minimalt html5 dokument
som bestäms av <html>, detta är ett
minimerat upplägg för att kunna
visa webbsidan korrekt. Taggen
<!> kan användas till utvecklaren
för
att
lämna
kommentarer
i
kodbasen. Figur 2 har dock en
sådan tagg längst upp i dokumentet
Wide Web Consortium) har godkänt taggen <!> att också användas för
dokumenttyps-definition. (W3C, 1999) Just denna <!DOCTYPE html>-tagg är den
senaste standarden i webbutveckling HTML5. Doctype-taggen hjälper webbläsaren
att tolka sidan i rätt version för äldre standarder har kanske inte stöd för nya taggar
så som <audio>-och <video>-taggar. Ett html-tagg ska alltid innehålla en <head>
för allt som inte har en visuell betydelse så som JavaScript-kod och CSS-taggar och
en <body> för det visuella delan av sidan så som text, bilder och videotaggar. Med
7
denna information kan man skapa en mycket enkel hemsida men inte så dynamisk
och skalbar.
3.2. Cascading Style Sheet (CSS)
Cascading Style Sheet eller CSS har en stor betydelse i dagens webbutveckling,
när det gäller färg, teckensnitt, justering av text och
objekt m.m. En enda CSS-mall kan hantera flera htmldokument och det är då enkelt att modifiera stilarna
genom att ändra reglerna i CSS-mallen, se figur 3.
HTML5 och CSS3 har tagit ett steg längre och
Figure 3 - CSS struktur
möjliggjort formateringar och effekter som inte tidigare
fanns i HTML standarden. (W3C, 2011)
All formatering bör finnas i externa mallar vilket gör att mängden grafisk specifik
kod i själva dokumentet minskar och gör att sidorna laddas snabbare i webbläsaren.
Då samma mall används för varje dokument behöver inte webbläsaren läsa in CSSinstruktionerna på nytt varje gång en ny sida anropas.
Figur 4 visar ett exempel på fyra CSS instruktioner i en extern mallfil. CSS så
kallade selectors används för att välja vilken del av html-trädet en stil skall gälla.
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px; }
h1 { font-size: 24px; font-weight: normal; letter-spacing: 2px; }
.textformat1 { color: #336699; }
body p.textformat2 { color: #990000; }
Figure 4 - CSS regler
En selector kan välja alla element av en viss typ, från element med vissa attribut
bland annat id, class, etc. till delar beroende på hur de är placerade i förhållande till,
eller inkapslade i, andra i dokumentträdet.
3.3. JavaScript (JS)
JavaScript ger oss saker som animering, dynamiska förändringar och mer.
JavaScript kan också läsa input från våra I / O-enheter (t.ex. mus och tangentbord)
för att göra sidan mer interaktiv för användaren. Det är möjligt att konstruera
8
JavaScript-bibliotek som underlättar användningen av språket och snabbar upp
utvecklingen. (Mozilla Developer Network, 2014) (Web Developers Notes, 2014)
3.3.1. Ckeditor
Ckeditor är ett javascript-bibliotek som erbjuder WYSIWYG-support som
utnyttjas i Text editor modulen. Ckeditor fungerar som en översättare från
formaterad text till html. Bibliotek
stöder enkla funktioner så som fet,
kursiv och understryk, men också
punktlistor, typsnitt och tabeller.
Det går att läga till bilder men det
krävs att bilden redan är på
internet, hos ett webbhotell eller
filserver. (CKSource, 2014)
Figure 5 - Ckeditor GUI (CKSource, 2014)
Något som kommer att underlätta användningen för många är funktionen ”Paste
from Word” och som möjliggör att kopiera in ett Word-dokument och så
omformas det till html och publiceras sedan med hjälp av AJAX.
3.3.2. Asynchronous JavaScript and JSON (AJAX)
Asynchronous JavaScript eller AJAX är ett sätt att utföra ett anrop till en server i
bakgrunden. Som namnet säger görs anropet asynkront, i form av
XMLHttpRequest. Data objektet innehåller är godtycklig men måste vara ett xml
eller json formaterat som. Returndatat läses in från ett respons på ett
XMLHttpRequest. Denna teknologi stöder också returnvärden från servern i
format på html-, xml-, json- och textformaterade strängar. (Garrett, 2005)
Innehållshanteringssystemet kommer att använda sig av AJAX för all server
kommunikation och modifiera sidans innehåll med det data som servern
erbjuder. Detta gör att laddning av sidor är minimal eftersom bara en del av
sidans innehåll behövs uppdateras. stora mängder data kan nu laddas upp i
bakgrunden och inte störa användaren.
9
3.4. jQuery
jQuery är ett cross-browser JavaScript-bibliotek som har funktioner för att förenkla
utveckling i javascript. Bibliotek erbjuder funktioner som lätt kan påverka sidan
dynamiskt eller implementera lätta funktioner för användare. jQuery-bibliotek
stöder också möiligheten att utvidga standard funktionaliteten med hjälp av plugins
så som grafiska eller funktionella tillägg. (jQuery, 2014)
jQuery använder sig av en speciell syntax, i figur 6 till exempel har jQuery ett
grundobjekt som är ett $-tecken. Från det objektet kan man anropa funktioner precis
som klasser i java. Ett ( ) används
$(function() {
för att indikera en selector. De
$("body").on("submit", function(event){
används för att kunna modifiera en
var user = $('input[name="username"]').val();
var pass = $('input[name="password"]').val();
$.getJSON(“index.php”,{user:”+user+”,
pass:”+pass+”
});
});
del av html-koden med hjälp av
javascript. T.ex. $("body") är en
selector för en body-tagg. Nu kan
man ansluta en annan jQuery funktion till body-taggen, figur 6 On
Figure 6 - jQuery kod exempel
är en funktion som väntar på att en
viss händelse har inträffat t.ex. ”submit” och sedan kör funktionen som har givits.
Som andra parameter i detta fall är det en anonym funktion som skrivs rakt in i den
existerande funktionen. Allt detta är tillåtet för funktioner kan tilldelas variabler
eller skickas till andra funktioner som argument. Passning av funktioner som
argument är extremt vanligt i jQuery. I figur 6, efter att en förväntad händelse har
inträffat kommer koden att köras och använda sig av $.getJSON som skickar ett
XMLHttpRequest med data i form av ett json-objekt. Servern tar sedan och hanterar
anropet och returnerar passande respons. Responsen kan vara allt från text till filer
eller bilder. I detta fall kommer det att returneras ett statusvärde om inloggningen
har lyckats och ett meddelande som skrivs ut på sidan.
Det två viktigaste plugins som är implementerade i denna lösning är jQuery
Validation och jQuery UI plugins.
10
3.4.1. jQuery Validation
jQuery Validation är ett jQuery-tillägg med möjlighet att granska formulärvärden och sätta krav på vad skall gå att skriva i ett textfelt. Tillägget erbjuder
också mölighet att dynamiskt visa respons till användaren om textfält som inte
uppfyller ett specifikt krav så att det går att korrigera. (jQuery Validation Plugin,
2014)
Innehållshanteringssystemet kommer att innehålla flera textfält för att kunna
konfigurera olika värden så det är naturligt att använda sig av ett sådant tillägg
för att det stöder jQuery-biblioteket för motiverat genomförande.
3.4.2. jQuery UI
jQuery UI är ett jQuery-tillägg som ger abstraktioner för lågaktiv interaktion
som kan användas för att bygga interaktiva webbapplikationer. (jQuery, 2014)
jQuery UI kommer att vara tidsbesparande att använda för att slippa skapa egna
teman för innehållshanteringssystemet. Vissa komponenter som jQuery UI
erbjuder, är t.ex. knappar, listor, drop down-menyer, navigeringsfält, galler,
skjutreglage, sidövergångar och mycket mer.
3.5. Hypertext Preprocessor (PHP)
Hypertext Preprocessor eller PHP är ett server-side-skriptspråk som oftast används
till webbutveckling men också som ett programmeringsspråk för allmänt ändamål.
PHP används som en modul till webbserver t.ex för Apache Webserver, och som tar
hand om alla php script i ett *.php-dokument. (PHP, 2014)
PHP har ett brett utbud på funktionalitet i sig själv och mycket mer via olika tillägg,
som
erbjuder
både
högnivådatabasanrop
eller
lågnivåsockethandtag.
I
innehållshanteringssystem kommer många högnivåfunktioner användas, t.ex
databasanslutning och autentisering av användare samt ftp-anslutning för fil överföringar mellan server 2 server, och vissa lågnivåfunktioner så som filmanipulering.
11
Skriptspråket är inte komplicerat, fast för en som är ovan eller kommer från
traditionell programering kan det vara konstigt att det inte behövs datatyper eller
minnes-hantering. PHP hanterar och väljer själv sina datatyper och ofta är det inte
nödvändigt att spesifiera en. det är motiverat att inte göra det då att php kan
optimera vid runtime i stället.
För att använda sig av PHP i ett webb dokument krävs det att man börjar med ett
<?php ?> tagg så som i figur 7. Där görs ett echo-anrop som är en typ av utskriftsfunktion. Resultatet blir en paragraftagg med ”Hello World” som värde.
PHP taggar kan läggas vart som helst
i ett html-träd, till och med utanför
html-taggen. Beroende på vad man
vill göra så kan det vara bra att skilja
<!DOCTYPE html>
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>
html och PHP åt för att skilja business
Figure 7 - PHP Hellow world program
logic ifrån grafiska gränssnittet,
speciellt när det handlar om databasanslutningar och lösenord. Då vill man inte ta
risken att något läcker ut via ett falskt http-anrop eller vid ett oförväntat beteende.
3.6. MySQL
MySQL är en databas som är ett av Structured Query Language som används för att
upprätthålla data i en relationsdatabas. SQL går ut på att organisera information i
tabeller som lagras i en relationsdatabas, så som MySQL. För att hantera data
används Query-kommandon för att läsa, skriva och radea information.
Kommandona är strukturerade i fem delar: Vad skall göras? Vilka kolumner berörs
av detta kommando? Var i databasen och hur bestämma förändringen? Genom att på
detta sätt hantera data kan man distribuera information mycket lättare över olika
medier, så som web, mobil och applikationer. (Welling & Thomson, 2003)
MySQL är strukturerat på ett sådant vis att det innehåller databaser, som innehåller
allt från tabeller och lagrade funktioner för just denna databas. olika SQL databaser
kan skilja lite på strukturen men i stort sett har de alla samma grundfunktionalitet.
12
4. UTVECKLING
Detta kapitel beskriver hur och vad som används i utvecklingens olika skeden, allt
från planering till implementation. Kapitlet klargör också värför vissa beslut
favoriserades mer än andra.
4.1. Struktur
För att innehållshanteringssystemet skall kunna funktionera krävs det en databas och
en webbserver med någon form av CGI-integrering. Microsoft Internet Information
Services (IIS) valdes som webbserver eftersom Designrs web hosting är baserat på
Microsoft Widows Server 2008-teknologi, som erbjuder enkla administrationers
verktyg och ett grafiskt gränsnitt. Internet Information Services är också modulärt
vilket betyder att skala av det som inte behövs eller lägga till extra funktionalitet. I
detta fall lägger vi till php som en CGI-integrering. Som databas valdes MySQL
över Microsoft SQL Server. Detta beror på att php har klasser för MySQL-databaslösningar som har mera funktionalitet än php-standard SQL-implementation.
4.2. Planering
Efter
att
valet
av
php-integrering
gjordes
ett
diagram
på
hur
innehållshanteringssystemet tänkte fungera. Fokus på resurshantering och att
avgränsa kunddata från innehållshanteringssystemets server. Tanken var att erbjuda
lösningen som en extra tjänst åt kunder som inte kände till webbutveckling och
möjligen minska på behovet på support.
Ett problem uppstod dok när kundens web host server inte är på rätt plattform eller
updaterad till det nyaste. Tanken att distribuera innehållshanteringssystemet som en
utvecklingsplattform skulle motverka idén för modularitet och bugghantering skulle
bli en mycket krävande operation.
Problemet löstes med att använda ftp-moduler i php för att kommunicera med
externa webservrar, fördelen med ftp är att kompabilitetsproblem mellan en
webbserver och dess mjukvara minskar för att innehållshanteringssystemet inte
behöver installeras på end extern server utan man kan manipulera data från en
13
centraliserad server, där en utvecklare har lättare att implementera ny funktionalitet
och test för buggar i existerande kodbas.
Figur 8 visar strukturen på innehållshanteringssystemets moduler och hur de
kommunicerar med varandra.
Figure 8 - Innehållshanteringssystemets struktur diagram
4.3. Ajax anropsramverk
Innehållshanteringssystemet har två delar, ett grafiskt gränssnitt och ett PHP
backens. Därför är det viktigt att få dessa delar att kommunicera på ett entydigt sätt
med varandra. Lösningen är AJAX som snabbt och plattformsoberoende klarar av
skicka data med osynlig koppling mellan server och grafiskt gränssnittet. AJAXramverket har planerats att använda ett fast satt schema på hur kommunikationen till
PHP-servern skall utföras.
Figur 9 visar hur ett typiskt AJAX-anrop, json,
{
"PostTypeID": "files",
"PostTypeAction": "main",
"PostNodeData": {}
används för att formatera data till en hanterbar
struktur som formas om på server sidan.
PostTypeID bestämmer vilken modul och
PostTypeAction vilken funktion i modulen som
önskas. PostNodeData används då modulen
14
}
Figure 9 – AJAX-anrop
kräver någon indata för att hantera anropet, t.ex uppdatera text, upp- och nedladdning av filer, m.m. Returndatan på AJAX-anropet är strukturerat på likadant sätt
i ett json-objekt, kommunikationen är en tydlig och möjliggör utveckling på andra
plattformer.
4.4. Grafiska gränssnittets funktionaliteter
Grafiska gränssnittet är planerat att visualisera PHP backend-moduler så att en
användare kan hantera sina resurser. Funktionaliteten kan baseras på vilka moduler
som just denna användare behöver och som kan ändras vid behov. Detta upplägg
möjliggör för implementation av ny funktionalitet till det grafiska gränssnittet
oberoende om det är ett mobilt gränssnitt eller som i detta fall webbgränssnittet.
4.5. WYSIWYG-redigering
Ckeditor möjliggjorde Microsoft Word-liknande funktionalitet i webbläsaren.
Grafiska gränssnittet är enkelt att implementera till en webbsida fast scriptet inte är
på samma server som själva html-dokumenten. Ckeditor javascript-biblioteket
importeras genom en enkel scripttag som placeras i headtaggen. Även om
biblioteket har stöd för jQuery kan implementaionen tillsammans upplevas som
besvärlig. Problem kan då uppstå som får editorn att inte fungera som förväntat. Om
jQuery tillåts att skapa och kontrollera Ckeditor-objekten så fungerar det bättre än
att upprätthålla två bibliotek parallelt. Risken är att det blir konflikter och
funktionaliteten kraschar. Konfiguering av biblioteket görs från en extern fil så det
kan modifieras med php för att byta språk på verktyg och verktygstips etc. En av
inställningarna möjliggör uppdatering av textdata att göras via AJAX-anrop till
PHP-servern. Kraven är att PHP-servern klarar av att hantera sådan data och därför
utnyttjas jQuerys AJAX-objekt för att kunna skicka extra parameter till server, för
kontroll av vilka filer på en extern server som skall modifieras.
15
4.5.1. WYSIWYG-redigering sekvensdiagram
Ett sekvensdiagram är ett bra sätt att visa hur en viss funktionalitet är förväntad
att fungera. Figur 10 är ett sekvensdiagram över editering av ett html-document
över ”server 2 server”-uppkopplingen.
Figure 10 - WYSIWYG sekvensdiagram
Logiken kommer att hanteras av php på Entry Point för att minska på stress för
remote server. Beroende på modul så kan det bli mycket trafik eller högt
prosessorbehov. Ny funktionalitet kan implementeras utan att behöva modifiera
existerande kodbas och därmed vara säker på att äldre webbsidors moduler
fortsätter att fungera. Detta är ytterst viktigt för att olika sidor har olika behov och
strukturer
som
det
kan
bli
invecklat
att
inkluderar
i
ett
dynamiskt
innehållshanteringssystem.
4.6. Filöverföring
För att användaren skall kunna ladda upp eget material krävs det en filhanterare som
är som en ftp client doc inbyggd i webbgränssnittet. Användaren har förmodligen ett
webbhotell med inloggningsuppgifter till ett ftp-konto. Genom ftp-modulen kan
php kommunisera med denna server och hämta en lista på filer som existerar på en
extern ftp server. Denna information representeras för användaren i form av en lista
16
med filer och mappar, som kan navigeras med hjälp av länkar med spesifik data för
att begära en viss resurs.
Figur 11 visar ett exempel på en raderingshändelse som användaren har begärt och
fått en bekräftelse om att anropet slutfördes korrekt. Med implementaion av jQuery
UI har det skapats en interaktiv lista på filer och mappar. Valda filer kan sedan tas
bort eller flyttats till mappar för att organisera om filstrukturen efter användarens
behov.
Figure 11 - File module GUI
Filöverföringmodulen har AJAX-anrop som hämtar information för fillistan och
söker ikoner för bilder för navigering. Detta är implementerat som en liten
javascriptloop som itererar igenom listan och försöker hitta fil-format som är av
typen bild (t.ex png, jpg och gif). Scriptet skapar en lista på bilder som söks från
extern ftp-server med hjäpl av en php- ftp- modul. Fördelen med att ladda in
data asynkront minskar sidans belastning och körtid, iställer kan man göra flera
anrop med mindre payload.
4.6.1. Uppladdning av filer
Uppladdning av filer är automatisk men i figur 12 erbjuds också en manuell
lösning för speciella plattformer som inte stöder ”drag and drop”-teknologi. Add
files öppnar webbläsarens inbyggda
filhanterare, som kan användas för att
Figure 12 - fil modul kontroller
välja filer för uppladding. Start upload startar manuella uppladdningssättet. Med
Cancel upload kan användaren tömma upp laddning kön som Add files skapat.
17
5. RESULTAT
Innehållshanteringssystemet fyller kravspecifikationen som skapades tillsammans
med Designr. Vissa friheter har tagits med implementationssätt och gränsitet men vi
skulle ändå godkänna denna lösning som färdig för att ta i bruk.
Följande punkter är uppnådda resultat:
•
Innehållshanteringssystemet är enkelt att använda
•
Modularitet, möjliggör för nya moduler att läggas till vid behov och tas bort
•
Enkel WYSIWYG-redigering lösning
•
Möjlighet att ladda upp filer via webbläsaren
•
Flytande server 2 server kommunikation
•
Lösenordskyddad arkitektur
5.1. Resultat
Designr har visat stort intresse och kan tänkas erbjuda denna lösning som en tjänst
för deras kunder. Speciellt kunder som har behovet att uppdatera deras hemsidan
ofta, behöver nu
inte vänta på att Designr utvecklare gör det utan klarar av
uppdateringen själv.
Innehållshanteringssystemet i sig är inte komplext så en stor del av information kan
hittas från internet och andra medier. det är den enorma kodbasen som kan ställa till
med problem speciellt när en ändring söndrar något annat i kedjan. Därför var det
bra att avgränsa alla grafiska krav för det är något som också tar tid och erbjuder
mycket lite till lösningens syfte.
5.2. Förbättringar
Innan innehållshanteringssystemet kan publiceras till användare är det några punkter
som ännu skall fortsättas på. Det handlar om att göra det enklare för användaren och
administratorn att kunna använda lösingen.
5.2.1. Grafiska Gränssnittet
Några förbättringar till lösningen skulle vara det grafiska, färgval och gemensam
design på moduler. För detta behöver man en grafiker som skulle kunna rita upp
18
en skiss på menyer och knappar. En sådan ändring skulle inte påverka
funktionaliteten och därmed vara ganska problem fritt att Implementera.
5.2.2. Optimera kodbas
För innehållshanteringssystemet existerar det inte mycket dokumentation och
själva kodbasen är svårläslig. Vissa biggar existerar också bara för att det finns
gammal kod som inte fungerar som tänkt men som inte har modifierats, p.g.a.
risk för att det söndrar äldre functionalitet. En metod för att lösa detta är
testdriven utveckling för att garantera att enskilda funktioner kommer att
fortsätter fungera.
5.2.3. Användarguide
Användarguide ska utvecklas för både en användare och för administratorn. För
en användare borde det inte krävas så mycket, bara enkla instruktioner för
användning. För administration kräver det mera detaljer av systemet och dess
underliggande funktionalitet. Det ska också finnas info tillgängligt för
kommande utvecklare för att kunna skapa egna moduler och hur man
implementerar dem.
19
6. SLUTSATS
Att utveckla en sådant här webbtjänst där man berör många olika programmeringsspråk
så som JavaScript, AJAX, HTML5 och PHP är mera krävande. Det finns alltid mycket
att tänka på om det är sen grafiskt eller backend, vissa programmeringsspråk är bäst
lämpade för en viss uppgift. Man kan argumentera att den nuvarande kodbasen kan
förbättras, men i slutändan gör applikationen vad den var gjord för, ett användarvänligt
innehållshanteringssystem med möjlighet att utvidga funktionaliteten vid behov.
20
7. KÄLLFÖRTECKNING
CKSource. (2014). ckeditor.com. Hämtat från Ckeditor: http://ckeditor.com/ den 11 5
2014
Garrett, J. J. (den 18 2 2005). Ajax: A New Approach to Web Applications. Hämtat från
Wikipedia:
https://web.archive.org/web/20080702075113/http://www.adaptivepath.com/ide
as/essays/archives/000385.php den 24 5 2014
jQuery. (den 24 5 2014). jQuery. Hämtat från jQuery: http://jquery.com/ den 24 5 2014
jQuery. (den 26 5 2014). jQuery UI. Hämtat från jQuery UI: http://jqueryui.com/ den 26
5 2014
jQuery Validation Plugin. (den 21 5 2014). jQuery Validation Plugin. Hämtat från
jQuery Validation: http://jqueryvalidation.org/ den 21 5 2014
Kravspecifkation. (den 20 5 2014). Vad är en kravspecifikation? Hämtat från
Kravspecifikation: http://www.kravspecifikation.se/ den 20 5 2014
Mozilla Developer Network. (den 25 5 2014). JavaScript. Hämtat från Mozilla
Developer Network: https://developer.mozilla.org/en/docs/Web/JavaScript den
25 5 2014
PHP. (den 19 5 2014). PHP. Hämtat från PHP: Hypertext Preprocessor:
http://www.php.net/ den 19 5 2014
W3C. (den 1 5 1999). SGML document introducing you to SGML. Hämtat från
http://www.users.cloud9.net/~bradmcc/WhatIsSGML.html den 28 5 2014
W3C. (den 12 5 2011). Cascading Style Sheets (CSS) Snapshot 2010. Hämtat från
W3C: http://www.w3.org/TR/CSS/ den 19 5 2014
W3C. (den 19 5 2014). HTML & CSS. Hämtat från W3C:
http://www.w3.org/standards/webdesign/htmlcss den 19 5 2014
W3C. (den 19 5 2014). The global structure of an HTML document. Hämtat från W3C:
http://www.w3.org/TR/html401/struct/global.html den 19 5 2014
Web Developers Notes. (den 20 5 2014). Programming languages on the internet.
Hämtat från Web Developers Notes:
http://www.webdevelopersnotes.com/basics/languages_on_the_internet.php3
den 20 5 2014
Welling, L., & Thomson, L. (2003). PHP and MySQL Web Development. i L. Welling,
& L. Thomson, PHP and MySQL Web Development (s. 871). sams.
21
22
