Innehållshanteringssystem för webbsidor

Storlek: px
Starta visningen från sidan:

Download "Innehållshanteringssystem för webbsidor"

Transkript

1 Innehållshanteringssystem för webbsidor Joakim Bollström Högskolan på Åland serienummer 24/2014 Informationsteknik Mariehamn 2014 ISSN

2 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: Svenska 25 Inlämningsdatum: Presentationsdatum: Datum för godkännande:

3 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: Swedish 25 Handed in: Date of presentation: Approved on:

4 INNEHÅLLSFÖRTECKNING 1 INLEDNING Syfte Backgrund Metod Avgränsningar BAKGRUND Uppdragsgivaren Designr Kravspecifikation Funktionella krav Icke-funktionella krav Användarfallsdiagram PROGRAMMERINGSSPRÅK OCH RAMVERK Hypertext Markup Language (HTML) Cascading Style Sheet (CSS) JavaScript (JS) Ckeditor Asynchronous JavaScript and JSON (AJAX) jquery jquery Validation jquery UI Hypertext Preprocessor (PHP) MySQL UTVECKLING Struktur Planering Ajax anrop ramverk Grafiska gränssnittets funktionaliteter... 15

5 4.5. WYSIWYG-redigering WYSIWYG-redigering sekvensdiagram Filöverföring Uppladdning av filer Resultat Resultat Förbättringar Grafiska Gränssnittet Optimera kodbas Användarguide SAMMANFATTNING... Error! Bookmark not defined. 7. KÄLLFÖRTECKNING... 21

6

7 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 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

8 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 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

9 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 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 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

10 Andra viktiga punkter är att innehållshanteringssystemet skall var lösenords skyddat samt kunna bli kopplat till ett 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 Användarfallsdiagram Diagrammet i figur 1 visar den huvudsakliga functionalitetn implementerat innehållshanteringssystemet. i Figure 1 - Use case diagram for the user 6

11 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 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 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 som inte är en kommentar utan ett doctype-definition, W3C (World <!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> Figur 2- Ett minimalt html5 dokument 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

12 denna information kan man skapa en mycket enkel hemsida men inte så dynamisk och skalbar 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 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

13 JavaScript-bibliotek som underlättar användningen av språket och snabbar upp utvecklingen. (Mozilla Developer Network, 2014) (Web Developers Notes, 2014) 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 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

14 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(); del av html-koden med hjälp av var pass = $('input[name="password"]').val(); $.getjson( index.php,{user: +user+, javascript. T.ex. $("body") är en pass: +pass+ }); selector för en body-tagg. Nu kan }); man ansluta en annan jquery - Figure 6 - jquery kod exempel funktion till body-taggen, figur 6 On ä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

15 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 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 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

16 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 paragraf- <!DOCTYPE html> tagg med Hello World som värde. <html> <head> PHP taggar kan läggas vart som helst <title>php Test</title> </head> i ett html-träd, till och med utanför <body> html-taggen. Beroende på vad man <?php echo '<p>hello World</p>';?> </body> vill göra så kan det vara bra att skilja </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 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

17 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 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 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

18 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, 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 { } "PostTypeID": "files", "PostTypeAction": "main", "PostNodeData": {} Figure 9 AJAX-anrop

19 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 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 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

20 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 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

21 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 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

22 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 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 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

23 en skiss på menyer och knappar. En sådan ändring skulle inte påverka funktionaliteten och därmed vara ganska problem fritt att Implementera 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 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

24 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

25 7. KÄLLFÖRTECKNING CKSource. (2014). ckeditor.com. Hämtat från Ckeditor: den Garrett, J. J. (den ). Ajax: A New Approach to Web Applications. Hämtat från Wikipedia: as/essays/archives/ php den jquery. (den ). jquery. Hämtat från jquery: den jquery. (den ). jquery UI. Hämtat från jquery UI: den jquery Validation Plugin. (den ). jquery Validation Plugin. Hämtat från jquery Validation: den Kravspecifkation. (den ). Vad är en kravspecifikation? Hämtat från Kravspecifikation: den Mozilla Developer Network. (den ). JavaScript. Hämtat från Mozilla Developer Network: den PHP. (den ). PHP. Hämtat från PHP: Hypertext Preprocessor: den W3C. (den ). SGML document introducing you to SGML. Hämtat från den W3C. (den ). Cascading Style Sheets (CSS) Snapshot Hämtat från W3C: den W3C. (den ). HTML & CSS. Hämtat från W3C: den W3C. (den ). The global structure of an HTML document. Hämtat från W3C: den Web Developers Notes. (den ). Programming languages on the internet. Hämtat från Web Developers Notes: den Welling, L., & Thomson, L. (2003). PHP and MySQL Web Development. i L. Welling, & L. Thomson, PHP and MySQL Web Development (s. 871). sams. 21

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion Webbteknik En kort introduktion Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender 1 Historisk återblick 89 CERN Tim Berners Lee Ett plattformsoberoende sätt att sprida

Läs mer

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Innehålls förteckning

Innehålls förteckning Programmering Uppsats i skrivteknik Axxell Företagsekonomi i informationsteknik 19.3.2015 Respondent: Tomas Björklöf Opponent: Theo Wahlström Handledare: Katarina Wikström Innehålls förteckning 1. Inledning...3

Läs mer

Hemsideutveckling för Anjool AB

Hemsideutveckling för Anjool AB Beteckning: Akademin för teknik och miljö Hemsideutveckling för Anjool AB Christopher Gidlöf Maj 2012 Examensarbete 15hp B nivå Datavetenskap Internetteknologi Examinator: Carina Petterson Handledare:

Läs mer

Klient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning.

Klient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning. Klient/server Översikt Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning. Lektion 1: Webbtekniker från Microsoft Microsoft webbtekniker. ASP.NET. Klientsidan. Internet Information Server.

Läs mer

Content Management System. Publiceringssystem

Content Management System. Publiceringssystem Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor

Läs mer

WP-Edit. Robin Larsson Martin Davik. Examensarbete, grundnivå, 15 hp Datavetenskap Internetteknologprogrammet

WP-Edit. Robin Larsson Martin Davik. Examensarbete, grundnivå, 15 hp Datavetenskap Internetteknologprogrammet WP-Edit Robin Larsson Martin Davik 2014 Examensarbete, grundnivå, 15 hp Datavetenskap Internetteknologprogrammet Handledare: Anders Jackson Examinator: Carina Pettersson WP-Edit av Robin Larsson Martin

Läs mer

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering

Läs mer

Content Management System. Publiceringssystem

Content Management System. Publiceringssystem Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor

Läs mer

Nya webbservern Dvwebb.mah.se

Nya webbservern Dvwebb.mah.se Nya webbservern Dvwebb.mah.se Bakgrund: BIT (Bibliotek och IT) beslutar att ta ner Novell systemet 28/3 som är en katalogtjänst som styr bland annat alla studenter s.k. hemkataloger på Malmö högskola såväl

Läs mer

E12 "Evil is going on"

E12 Evil is going on E12 "Evil is going on" Föreläsning 12, HT2014 AJAX Kurs: 1dv403 Webbteknik I Johan Leitet E12 Evil is going on Dagens agenda AJAX XMLHttpRequest-objektet JSON Vad är AJAX? Asynchronous JavaScript and XML

Läs mer

CMS. - Content management system

CMS. - Content management system CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell

Läs mer

CMS, optimerade för programmerare Eller hur kan ett sådan skapas.

CMS, optimerade för programmerare Eller hur kan ett sådan skapas. Examensarbete CMS, optimerade för programmerare Eller hur kan ett sådan skapas. David Strömbom 2011-05-20 Ämne: Datavetenskap Nivå: B Kurskod: 1DV40E Abstrakt Denna rapport fokuserar på att undersöka några

Läs mer

Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet 2009-08-09

Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet 2009-08-09 Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet 2009-08-09 1. Introduktion till webbprogrammering Webbprogrammering består av ett antal

Läs mer

Webbserver och HTML-sidor i E1000 KI

Webbserver och HTML-sidor i E1000 KI 1 Funktion och användningsområde E1000-terminalen (E1032-E1151) kan användas som webbserver. En webbserver är ett program som hanterar filer som ska visas i en webbläsare som exempelvis Internet Explorer.

Läs mer

Kursplanering Utveckling av webbapplikationer

Kursplanering Utveckling av webbapplikationer Kursplanering Utveckling av webbapplikationer Fakta Ämne Programmering Poäng 40 Yh-poäng Kurskod YSYS-WEB Klass Systemutvecklare.NET Syfte och koppling till yrkesrollen För att kunna arbeta som systemutvecklare

Läs mer

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2) 1 Instruktioner Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 2. Logga in (SIDA 2) 3. Hem (SIDA 2) 4. Skapa/redigera sidor (SIDA 3) 41. Lägg till ny sida (SIDA 3) 42. Avancerat (SIDA 4) 5. Texteditor (SIDA

Läs mer

TNMK30 - Elektronisk publicering

TNMK30 - Elektronisk publicering Webben TNMK30 - Elektronisk publicering Vad är internet? Vad är internet? Vad är internet? Internet: sammankoppling av datornätverk. Används för bl.a. epost, chat, filöverföring, webbsidor. Kommunikation

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

Introduktion till MySQL

Introduktion till MySQL Introduktion till MySQL Vad är MySQL? MySQL är ett programmerings- och frågespråk för databaser. Med programmeringsspråk menas att du kan skapa och administrera databaser med hjälp av MySQL, och med frågespråk

Läs mer

Webbservrar, severskript & webbproduktion

Webbservrar, severskript & webbproduktion Webbprogrammering Webbservrar, severskript & webbproduktion 1 Vad är en webbserver En webbserver är en tjänst som lyssnar på port 80. Den hanterar tillgång till filer och kataloger genom att kommunicera

Läs mer

Slutrapport YUNSIT.se Portfolio/blogg

Slutrapport YUNSIT.se Portfolio/blogg Slutrapport YUNSIT.se Portfolio/blogg RICKARD HANSSON 2012-06-04 Abstrakt Rapporten du har i din hand kommer handla om mitt projektarbete som jag genomfört under tio veckor för utbildningen Utvecklare

Läs mer

Introduktion Till WordPress

Introduktion Till WordPress Introduktion Till WordPress Vad är WordPress? ett blogg- och innehållshanteringssystem skrivet i PHP och som använder databasen MySQL för datalagringen Wordpress har under åren utvecklats från ett bloggsystem

Läs mer

Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php

Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php Introlektion PHP är ett av de enklare språken att lära sig just pga. dess dynamiska struktur. Det används för att bygga upp båda stora och mindre system. Några vanliga system som använder sig av PHP är

Läs mer

Varför ska man använda ett CMS? Vilka är fördelarna och är det alltid bra? Kattis Lodén 2010-03-18

Varför ska man använda ett CMS? Vilka är fördelarna och är det alltid bra? Kattis Lodén 2010-03-18 Varför ska man använda ett CMS? Vilka är fördelarna och är det alltid bra? Kattis Lodén 2010-03-18 Innehåll Inledning... 3 Fakta... 4 Innehåll... 4 Texthantering... 4 Granskning och versionshantering...

Läs mer

Elektronisk publicering TNMK30

Elektronisk publicering TNMK30 Elektronisk publicering TNMK30 Förra gången Usability & interaktionsdesign Projektintroduktion Bildbehandling. Byte av handledare Istället för Martin Johansson Annsofi Pettersson, annpe655@student.liu.se

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

2009-08-20. Manual för Typo3 version 4.2

2009-08-20. Manual för Typo3 version 4.2 2009-08-20 Manual för Typo3 version 4.2 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.1.1

Läs mer

2007-03-28. Manual för Typo3 version 4.04

2007-03-28. Manual för Typo3 version 4.04 2007-03-28 Manual för Typo3 version 4.04 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.2 Redigera

Läs mer

Webbprogrammering TDDD52

Webbprogrammering TDDD52 Webbprogrammering TDDD52 ERD MySQL+PHP. Förra gången Idag Javascript jquery Progressive enhancement XML & AJAX Lab 4 och 5 Sammanfattning av kursen. Om databastabeller varje tabell ska beskriva en typ

Läs mer

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt

Läs mer

DOTNETNUKE SKOLNING Skapat: den 20 november 2012

DOTNETNUKE SKOLNING Skapat: den 20 november 2012 DOTNETNUKE SKOLNING Skapat: den 20 november 2012 CONTENTS WebbSidans Layout... 3 Inloggning... 3 Kontroller för administrering... 4 Växla visnings läge... 4 View Läge... 4 Edit Läge... 4 Layout Läge...

Läs mer

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET Olika slags datornätverk Förberedelse inför laboration 4. Historik Protokoll, / Adressering, namnservrar WWW, HTML Föreläsning 5 Internet LAN Local Area Network student.lth.se (ganska stort LAN) MAN Metropolitan

Läs mer

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma

Läs mer

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation

Läs mer

Game of 40. Regler och om sidan är in princip samma sak. Det som skiljer dem åt är att de inte har samma text.

Game of 40. Regler och om sidan är in princip samma sak. Det som skiljer dem åt är att de inte har samma text. Presentation av uppgiften Vi har fått i att skapa en webbapplikation med ett spelbart spel inbyt i sig. Eller som läraren formulerar sig: uppgiften är att skapa en webbapplikation där en eller flera spelare

Läs mer

Zimplit CMS Manual. Introduktion. Generell Information

Zimplit CMS Manual. Introduktion. Generell Information Zimplit CMS Manual Introduktion Detta dokument ger en överblick av Zimplit CMS (Content Management System) användargränssnitt och dess funktioner. (För mer information och hjälp-forum, se zimplit.org.)

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

En grundkurs i hemsidor och hur de är uppbyggda En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och

Läs mer

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src= http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js></script> AngularJS Skriven av: Isak Glans. Datum: 2015-04-29. Kurs: Webbutveckling. Lärare: Per Sahlin. Utbildning: Systemutvecklare i.net, Newtons Yrkeshögskola. 1 Sammanfattning Syftet med denna uppsats är att

Läs mer

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript? Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia

Läs mer

Webbprogrammering. Sahand Sadjadee

Webbprogrammering. Sahand Sadjadee Webbprogrammering Sahand Sadjadee Agenda Webb The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages

Läs mer

Karlstads Universitet, Datavetenskap 1

Karlstads Universitet, Datavetenskap 1 DAV B04 - Databasteknik KaU - Datavetenskap - DAV B04 - MGö 229 PHP Hypertext Preprocessor Scriptspråk på serversidan Innebär att webbservern översätter php-scripten innan sidan skickas till webbläsaren,

Läs mer

Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande:

Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande: WEBBUTVECKLING Ämnet webbutveckling behandlar de tekniker som används för att presentera och bearbeta information i webbläsaren samt utifrån dessa tekniker skapa och vidareutveckla statiska och dynamiska

Läs mer

Programbeskrivning. Chaos på Web. Version 1.0 2005-09-21

Programbeskrivning. Chaos på Web. Version 1.0 2005-09-21 2005-09-21 Programbeskrivning Chaos på Web Version 1.0 Chaos systems AB Tel. 08-410 415 00 e-post: info@chaos.se Solna strandväg 18, 6tr Fax. 08-29 06 66 http://www.chaos.se 171 54 SOLNA Reg. nr: 556476-6813

Läs mer

Webbprogrammering, grundkurs 725G54

Webbprogrammering, grundkurs 725G54 Webbprogrammering, grundkurs 725G54 Lab 4, 5 ERD PHP + MySQL Återblick Idag Sessions PHP och MySQL för samband Lab 6 725G54: Genomgång projektuppgift Avstämning av kursmål Om sessions På IDA måste ni göra

Läs mer

Föreläsning 4. CSS Stilmallar för webben

Föreläsning 4. CSS Stilmallar för webben Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll

Läs mer

Kort om World Wide Web (webben)

Kort om World Wide Web (webben) KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.

Läs mer

WEBBUTVECKLING Kursplanering

WEBBUTVECKLING Kursplanering Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,

Läs mer

Introduktion HTML och PHP 732G16 Databaser design och programmering

Introduktion HTML och PHP 732G16 Databaser design och programmering Introduktion HTML och PHP 732G16 Databaser design och programmering 08-04-22 Ingrid Alin Nilsson 1 Presentationen tar upp Lite grundläggande om HTML Grunderna i PHP Styrstrukturer Funktioner Filhantering

Läs mer

Innehåll. MySQL Grundkurs

Innehåll. MySQL Grundkurs MySQL Grundkurs Copyright 2014 Mahmud Al Hakim mahmud@dynamicos.se www.webbacademy.se Innehåll Introduktion till databaser Installera MySQL lokalt Webbserverprogrampaket (XAMPP) Introduktion till phpmyadmin

Läs mer

Användarhandledning Version 1.2

Användarhandledning Version 1.2 Användarhandledning Version 1.2 Innehåll Bakgrund... 2 Börja programmera i Xtat... 3 Allmänna tips... 3 Grunderna... 3 Kommentarer i språket... 4 Variabler... 4 Matematik... 5 Arrayer... 5 på skärmen...

Läs mer

Formulär, textsträngar och en del annat

Formulär, textsträngar och en del annat 1ME322 Webbteknik 2 Lektion 6 Formulär, textsträngar och en del annat Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me322 1 2018 Rune Körnefors rune.kornefors@lnu.se Agenda JavaScript Interaktion

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och

Läs mer

Installera din WordPress med 9 enkla steg

Installera din WordPress med 9 enkla steg Installera din WordPress med 9 enkla steg Den här artikeln förutsätter att du har satt upp en webbserver eller har köpt ett webbhotell där du kan placera din nya WordPress hemsida. Om du inte har det,

Läs mer

Skapa din egen MediaWiki

Skapa din egen MediaWiki Skapa din egen MediaWiki Inledning och syfte I detta moment skall du installera en egen wiki (Mediawiki), som du skall konfigurera. Du har möjligheten att använda en egen wiki på din dator eller webbhotell

Läs mer

Sjukhusbiblioteket i Karlstad, september 2012, Modifierad av Linköpings universitetsbibliotek tisdag den 11 december 2018

Sjukhusbiblioteket i Karlstad, september 2012, Modifierad av Linköpings universitetsbibliotek tisdag den 11 december 2018 Guide till Mendeley I denna guide utgår vi från en dator med Windows 10 och MS Word 2016 samt från en dator med macos 10.11 (El Capitan) och MS Word 2016. OBS!: Mendeley stödjer inte alltid de senaste

Läs mer

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Sidan 2 - Logga in Sidan 3 - Uppbyggnad av en sida Sidan 4 - Infoga länk Sidan 5 - Infoga bilaga Sidan 6 - Infoga bild Sidan 7-8 Vad betyder knapparna

Läs mer

Brasklapp: REV:s rådgivande verksamhet omfattar egentligen inte något detaljerat IT-stöd, men eftersom många väghållare har behov av att effektivt

Brasklapp: REV:s rådgivande verksamhet omfattar egentligen inte något detaljerat IT-stöd, men eftersom många väghållare har behov av att effektivt Brasklapp: REV:s rådgivande verksamhet omfattar egentligen inte något detaljerat IT-stöd, men eftersom många väghållare har behov av att effektivt kunna förmedla information vill vi med denna presentation

Läs mer

Inlämningsarbete Case. Innehåll Bakgrund bedömning inlämningsarbete... 2 Inlämnade arbeten... 4

Inlämningsarbete Case. Innehåll Bakgrund bedömning inlämningsarbete... 2 Inlämnade arbeten... 4 Inlämningsarbete Case Innehåll Bakgrund bedömning inlämningsarbete... 2 Inlämnade arbeten... 4 1 Bakgrund bedömning inlämningsarbete Syfte: Eftersom det står i betygskriterierna att för VG skall deltagaren

Läs mer

Webbtjänster med API er

Webbtjänster med API er Webbtjänster med API er Mål med lektionen! Veta kursmålen. Lite grunder om WCF Vem är jag? Mitt namn är Björn Jönsson och jobbar på Tahoe Solutions, ni når mig via mail: bjorn.jonsson@tahoesolutions.se

Läs mer

dit06omr@cs.umu.se 12 juni 2009 Projektplan Webb-baserat bokningssystem för flyg Kurs: Applikationsutveckling för internet, TFE

dit06omr@cs.umu.se 12 juni 2009 Projektplan Webb-baserat bokningssystem för flyg Kurs: Applikationsutveckling för internet, TFE Projektplan Webb-baserat bokningssystem för flyg Kurs: Applikationsutveckling för internet, TFE VT-09 Innehållsförteckning Inledning & problembeskrivning...1 Systembeskrivning...2 Affärsobjekt...2 Databasen...4

Läs mer

Installationsanvisningar VisiWeb. Ansvarig: Visi Closetalk AB Version: 2.3 Datum: 2009-12-14 Mottagare: Visi Web kund

Installationsanvisningar VisiWeb. Ansvarig: Visi Closetalk AB Version: 2.3 Datum: 2009-12-14 Mottagare: Visi Web kund Sida: 1(7) Installationsanvisningar VisiWeb Ansvarig: Visi Closetalk AB Version: 2.3 Datum: 2009-12-14 Mottagare: Visi Web kund Detta dokument Detta dokument beskriver hur man installerar VisiWeb på en

Läs mer

Välkommen! SA S PSA S Im I puls s Mobilite t t e 8 1

Välkommen! SA S PSA S Im I puls s Mobilite t t e 8 1 Välkommen! SAPSA Impuls Mobilitet 81 Impuls sponsorer 2012 Guldsponsorer SAPSA Impuls Mobilitet 81 Mobilitet 81: Mobil reseräkningsapp med möjlighet att fotografera kvittona Christer Ingemarsson Lena Kågedal

Läs mer

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Informationsinfrastruktur 7.5 hp Mattias Nordlindh Inledning Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Dokumentet består av

Läs mer

Översikt. Installation av EasyPHP 1. Ladda ner från http://www.easyphp.org/ Jag använder Release 5.3.4.0 2. Installera EasyPHP.

Översikt. Installation av EasyPHP 1. Ladda ner från http://www.easyphp.org/ Jag använder Release 5.3.4.0 2. Installera EasyPHP. Laboration 1 Översikt 1. Att komma igång med laborationsmiljön a. installera Aptana Studio 3 b. Installera EasyPHP 2. Testa lite programmering a. Testa enkla uppgifter b. Testa automatiskt 3. Skapa inloggningsformulär

Läs mer

PHP - Fortsättning. PHP och MySQL

PHP - Fortsättning. PHP och MySQL PHP - Fortsättning Copyright 2016 Mahmud Al Hakim mahmud@dynamicos.se www.webacademy.se PHP och MySQL Skapa en databasbaserad telefonkatalog Steg 1 Skapa en MySQL databas. Steg 2 Skapa en tabell i denna

Läs mer

JavaScript in SharePoint and not just for Apps. Wictor Wilén

JavaScript in SharePoint and not just for Apps. Wictor Wilén JavaScript in SharePoint and not just for Apps Wictor Wilén Wictor Wilén Agenda Varför JavaScript? JavaScript bibliotek SharePoint JS bibliotek JavaScript Client Side Object Model (JSOM/CSOM) REST Client

Läs mer

Referenshanteringsprogrammet

Referenshanteringsprogrammet Referenshanteringsprogrammet Åbo Akademis bibliotek referenshantering@abo.fi RefWorks Med hjälp av RefWorks kan du: Importera referenser från olika databaser och bibliotekskataloger och skapa en egen databas

Läs mer

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5 Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

Läs mer

Laboration 1 XML, XPath, XSLT och JSON

Laboration 1 XML, XPath, XSLT och JSON Webbteknik II, 1DV449 Laboration 1 XML, XPath, XSLT och JSON Author: John Häggerud & Johan Leitet Semester: HT 2011 Course code: 1DV449 Inledning I denna första laboration är det tanken att Du ska bekanta

Läs mer

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare,

Läs mer

Systembeskrivning.

Systembeskrivning. KTH Institutionen för Numerisk Analys och Datalogi Systembeskrivning RedInc www.nada.kth.se/projects/prom03/redinc Uppdragsgivare: Projektmedlemmar: Harald Kjellin Daniel Oscarsson Rikard Laxhammar Tommy

Läs mer

WD406F - Interaktiva medier I 7,5hp Moment: Web Usability Inlämningsuppgift 1ab. Wynona Ekesrydh 2010-12-13

WD406F - Interaktiva medier I 7,5hp Moment: Web Usability Inlämningsuppgift 1ab. Wynona Ekesrydh 2010-12-13 Här följer min reflektion över innehållet i Jonathan Lazars bok Web Usability, kapitel 1 2, 6 7. Webbanvändbarhet För att infrastrukturen ska fungera behövs system som på ett enkelt och effektivt sätt

Läs mer

Word Online Version 1.0 Skolkontoret

Word Online Version 1.0 Skolkontoret Word Online Version 1.0 Skolkontoret 1 Innehåll Vad är Word Online?... 3 Arbeta i Word Online... 4 Logga in... 4 Skapa ett Worddokument via OneDrive... 4 Öppna ett redan skapat Worddokument i Word Online...

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

Läs mer

Avancerade Webbteknologier

Avancerade Webbteknologier Projektledning, Business Knowledge Användbarhet & Layout Avancerade Webbteknologier Lkti Lektion 1 Kommunikation Tobias Landén tobias.landen@chas.se Avancerade webbteknologier del 1 (4 KY poäng) Syfte

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11 Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan

Läs mer

Programutvecklingsprojekt Projektgrupp Elvin. Detailed Design Document

Programutvecklingsprojekt Projektgrupp Elvin. Detailed Design Document Programutvecklingsprojekt 2003-04-24 Projektgrupp Elvin Detailed Design Document Björn Engdahl Fredrik Dahlström Mats Eriksson Staffan Friberg Thomas Glod Tom Eriksson engdahl@kth.se fd@kth.se d94-mae@nada.kth.se

Läs mer

Jesper Holmstedt STARTPAKET FÖR CMS-VERKTYG. MED INRIKTNING PÅ JOOMLA!

Jesper Holmstedt STARTPAKET FÖR CMS-VERKTYG. MED INRIKTNING PÅ JOOMLA! Jesper Holmstedt STARTPAKET FÖR CMS-VERKTYG. MED INRIKTNING PÅ JOOMLA! Enheten för företags ekonomi och turism. 2014 FÖRORD Mitt lärdomsprovs teoretiska del handlar om grunderna i olika sorters CMSverktyg,

Läs mer

Installation av Storegate Online Backup.

Installation av Storegate Online Backup. Installation av Storegate Online Backup. QBRITS Bastjänst inkluderar en backuptjänst för din lokala dator. Installationen av Storegate Online Backup är mycket enkel men det kan finnas vissa inställningar

Läs mer

emopluppen Användning av "Ant" Niklas Backlund Version: 1.4 ( 2002/04/26 07:27:52 UTC)

emopluppen Användning av Ant Niklas Backlund Version: 1.4 ( 2002/04/26 07:27:52 UTC) emopluppen Användning av "Ant" Version: 1.4 ( 2002/04/26 07:27:52 UTC) Niklas Backlund Sammanfattning Det här dokumentet handlar om programmet Ant, som är en byggmiljö för programutvecklingsprojekt. Dess

Läs mer

LEX INSTRUKTION REPLIKERING UPPGRADERING

LEX INSTRUKTION REPLIKERING UPPGRADERING LEX INSTRUKTION REPLIKERING UPPGRADERING Innehållsförteckning LEX INSTRUKTION REPLIKERING UPPGRADERING... 1 1 REPLIKERING AV LEXPROD.AES TILL LEXEXT.AES... 1 2 GENERERA SQL-SCRIPT FRÅN DEN EXISTERANDE

Läs mer

URVAL AV UTFÖRDA FRILANSJOBB

URVAL AV UTFÖRDA FRILANSJOBB URVAL AV UTFÖRDA FRILANSJOBB Här följer information om ett urval av utförda frilansjobb. CONTENT MANAGEMENT- OCH GROUPWARE RAMVERK Kund: Sundance MD&M En modulär flashapplikation med en PHP och MySQL backend

Läs mer

Frågor och svar Gränssnittsdesign/Webbutveckling

Frågor och svar Gränssnittsdesign/Webbutveckling Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96

Läs mer

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07 Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på

Läs mer

Introduk+on +ll programmering i JavaScript

Introduk+on +ll programmering i JavaScript Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,

Läs mer

KTH Programutvecklingsprojekt med mjukvarukonstruktion 2D1362. Projektpresentation

KTH Programutvecklingsprojekt med mjukvarukonstruktion 2D1362. Projektpresentation KTH Programutvecklingsprojekt med mjukvarukonstruktion 2D1362 Projektpresentation Fakturasystem Total Office Mobile Systems http://www.nada.kth.se/projects/prom04/fakturasystem/ Uppdragsgivare: Örjan Melin

Läs mer

Slutrapport för JMDB.COM. Johan Wibjer 2012-06-03

Slutrapport för JMDB.COM. Johan Wibjer 2012-06-03 Slutrapport för JMDB.COM Johan Wibjer 2012-06-03 Abstrakt Den här rapporten kommer handla om mitt projekt som har handlat om att gör en webb sida för ett personligt media bibliotek, hur jag har jobbar

Läs mer

Utveckling av Brooklyn Tigers webbplats

Utveckling av Brooklyn Tigers webbplats Beteckning: Akademin för teknik och miljö Utveckling av Brooklyn Tigers webbplats Kim Lundgren Juni 2011 Examensarbete, 15 högskolepoäng, B Datavetenskap Internetteknologi Examinator: Carina Pettersson

Läs mer

Innehållsförteckning. Adobe GoLive CS

Innehållsförteckning. Adobe GoLive CS Innehållsförteckning 1 Om GoLive CS... 1 Mappar och filstruktur...1 Vad är en webbsida?...1 Vad är speciellt för en webbsida?...2 Vad är en webbplats?...3 Vanliga fallgropar med webbdesign...3 Överföra

Läs mer

Idag. Webben, HTML och CSS. Live demo. Webbens funktion

Idag. Webben, HTML och CSS. Live demo. Webbens funktion Idag Webben, HTML och CSS Institutionen för system- och rymdteknik Luleå tekniska universitet Moment F om webben, HTML och CSS startar nu Dead-line: fredag 28 sep (dvs om en dryg vecka). Uppgift: Skriv,

Läs mer

TMP Consulting - tjänster för företag

TMP Consulting - tjänster för företag TMP Consulting - tjänster för företag Adress: http://tmpc.se Kontakta: info@tmpc.se TMP Consulting är ett bolag som utvecklar tekniska lösningar och arbetar med effektivisering och problemslösning i organisationer.

Läs mer

Lathund för Svenskt Näringsliv

Lathund för Svenskt Näringsliv Lathund för Svenskt Näringsliv OneDrive OneDrive... 3 Vad är fördelarna med OneDrive för dig som användare?... 3 Skapa OneDrive-konto... 4 Kom åt OneDrive på olika enheter... 6 Via appar på datorn... 6

Läs mer

Tillämpad programmering CASE 1: HTML. Ditt namn

Tillämpad programmering CASE 1: HTML. Ditt namn Tillämpad programmering CASE 1: HTML Ditt namn 18 [HTML] Din handledare vill se din skicklighet i att använda HTML-koden. Du ska utveckla en webbplats om ditt intresse, inriktning eller gymnasiearbete.

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Webbprogrammering, grundkurs 725G54

Webbprogrammering, grundkurs 725G54 Webbprogrammering, grundkurs 725G54 Återblick Foreign key Normalisering Javascript XML AJAX Mash-up API för webbprogrammering Google Maps API. Idag Projekt Idag Idag Projekt Adobe Flash Idag Projekt Adobe

Läs mer

Bilaga 1. Teknisk kravspecifikation

Bilaga 1. Teknisk kravspecifikation Bilaga 1 Teknisk kravspecifikation 5.5.2014 Webbplatsen 1. Allmänt Korsholms kommun arbetar aktivt för att vara en ledande tvåspråkig landskommun i Österbotten och har drygt 19 100 invånare varav 68,9

Läs mer