XtraMatLagning. August Ek och Oscar Johnson. TNM065 Dokumentstrukturer

Transkript

1 XtraMatLagning August Ek och Oscar Johnson TNM065 Dokumentstrukturer

2 Sammanfattning Syftet med det här projektet är att skapa en användarvänlig XML baserad webbtjänst som gör det enkelt att hitta recept beroende på vilka ingredienser man har hemma. Verktygen som används för att utveckla produkten är XML, XSL, PHP, Javascript och HTML/CSS. Genom att anpassa ett tänk med Model, View och Controller kunde innehåll sepereras från utseende och göra påbyggnad och modifierande av källkod till en lättare process. Webbsidan som skapades levde upp till förväntningarna och har givit insikt i om att XML/XSL metoden kan vara ett lämpligt sätt att skapa en webbtjänst beroende på den behandlade datans komplexitet och antalet utkanaler.

3 Inledning Bakgrund I dagens informationssamhälle är det inte svårt att få tag på information. Information finns i överflöde, om allting. Det som är svårt är att få tag i rätt information. Här kommer sökmotorer in och besparar människor mycket tid varje dag. Med internets utspridning har informationsflödet blivit stort på även vardagliga saker som matlagning. Ett vanligt problem är att komma på vad man ska laga till middag. Dels för att det är en fantasikrävande process och dels för att man måste vara praktisk. Med praktisk menas att personen som ska laga mat har alltid ett visst antal ingredienser till hands. Dessa måste användas innan dess bäst före datum går ut. Därför bör recepten var anpassade till det personen har till hand. Baconlindad ostfylld kycklingfilé är därför inte det bästa alternativet när du har kyckling, sallad, tomater och gurka hemma. Ett recept på en kycklingsallad hade då varit mer relevant. Att googla kycklingsallad recept i detta fall hade inte varit särskilt svårt, men det finns många gånger då kylskåpet inte är lika snällt mot dig. Syfte Syftet med detta projekt är att förenkla den vardagliga processen matlagning som tar upp mycket tid av en människas liv genom att erbjuda en receptsida med en smart sökfunktion. För att tjänsten ska passa som projektarbete i kursen TNM065 Dokumentstrukturer på Linköpings Universitet kommer tjänsten vara XML baserad. Avgränsningar Från utgångsläget var ambitionerna höga och det siktades på mycket funktionalitet. I retroperspektiv var detta överoptimism och många saker fick slopas. I början av processen planerades arbetet på ett sådant sätt att funktionalitet kunde läggas till i arbetets gång men att kärnan inte beroende på den funktionaliteten. Ett försök till att göra projektet modulärt. Därför blev användarfunktionaliteten en sak som hamnade på avgränsningar tills insikten om tid avgjorde om det fanns tid för implementation.

4 Metod För att implementera tjänsten krävdes förståelse av en del olika tekniker. Dels behövdes det en databas för att hantera recept och ingredienser men även en webbsida som med hjälp av ett tydligt användargränssnitt kunna leverara tjänsten till användaren. Sist men inte minst krävdes en koppling mellan dessa två som hanterar förfrågorna från webbsidan till databasen. 1 Genom att separera dessa tre delar i MVC (Model, View, Controller) kan man nå en högre höjd av flexibilitet i produkten och underlätta framtida påbyggnader. I figur 1 kan man se tolkningen av MVC för detta projekt. Model Datan i form av recept och ingredienser lagrades i en MySQL databas och skrevs sedan ut i XML. View Då projektet skulle implementeras som en webbsida användes HTML och CSS. Controller Javascript med jquery användes för att göra webbsidan användarvänligare och förfina View. Även AJAX användes för att få omedelbar respons på sökningar. PHP och XSL var kanalen mellan View och Model. PHP användes för att utforma förfrågningar till databasen samt genera XML. XSL användes för att transformera XML från databasen till HTML. Git har använts för utvecklingen av projektet, tillsammans med textredigeraren Sublime Text

5 Händelseförlopp För att lättare förstå hur applikationens olika delar samverkar visas här ett händelseförlopp (se figur 3) för en sökning i kronologisk ordning. 1. Användaren söker på ingredienser i sökfältet. AJAX anpassar HTML/CSS för att ge direkt återkoppling på interaktionen från användaren (se figur 2). 2. Datan skickas till en php fil som kontrollerar inputen och skapar en förfrågan till databasen. Resultatet skickas sedan vidare till en php fil som genererar ett XML dokument. XML:en kan ses i den bifogade bilagan. 3. XML:en transformeras slutligen med hjälp av XSL till HTML och visas för användaren. Användaren får nu välja om den vill se närmare på ett visst sökresultat eller göra en ny sökning (processen upprepas från steg 1). Figur 2. Användaren skriver in en bokstav i sökfältet och får genast förslag på ingredienser som hen kan tänkas mena. Detta sker via AJAX. Figur 3. Startpunken är Index där användaren gör en sökning. Datan skickas till search handler som hämtar data från databasen och skickar vidare till XML buildern som skapar ett XML. XML:et transformeras sedan via XSL till HTML.

6 Resultat Resultatet blev en webbsida som utgör den mesta funktionalitet som från början var planerad att kärnan skulle innefatta. Sidan innefattar en sökmotor med AJAX där man kan söka på recept och ingredienser. Den förstår också synonymer till ingrediensnamn, exempelvis förslår den gul lök om lök matas in. När alla ingredienser matats in trycker användaren på sök och recept med sökta ingredienser visas. Det recept som innehåller flest av de sökta ingredienserna visas högst upp i sökresultaten. Användaren kan efter inloggning lägga till egna recept och redigera alla recept. Självklart är det möjligt att lista alla recept eller kolla på ett specifikt recept. All funktionalitet med anpassade vyer är tillgängliga för både datorer och mobiltelefoner. Vyernas struktur bestäms av XSL transformationer och utseendet med css. Det finns en del javascript funktionalitet. Det finns en funktion för att visa fler/färre ingredienser på första sidan. Det används också för att lägga till flera ingredienser i lägg till recept vy:n. AJAX delen när man söker på ingredienser använder sig också av javascript. Diskussion för och nackdelar En fördel med att använda sig av XML med XSL T för webbsidor är framför allt att model separeras från view, detta enligt MVC modellen, vilket alltid är en önskad effekt. Control i form av XSL kan sedan ändras för att skapade önskade vyer över XML:en. Genom att isolera datan i form av XML går det snabbt att inse vilka resurser man har att arbeta med. Det går även att representera komplicerade datastrukturer på ett lätthanterligt sätt. Då man ofta strävar efter att minimera beroendet mellan olika delar i ett projekt löper man mindre risk för att ändringar i systemet påverkar andra delar än de modiferade genom att använda denna metod. Det går också att kontrollera data med hjälp av en DTD och därmed säkerställa att datan som behandlas är korrekt strukturerad. Detta kan vara användbart när man behöver att XML strukturen ska se ut på ett specifikt sätt för att få transformeras med XSL. Det kan även underlätta felsökning då man kan isolera bort felet från XML:en. En nackdel är att det ibland känns som en omväg att gå via XML och XSL för att skapa en vy. Det känns som att en query till en databas och sedan dynamisk generering av sidan via PHP hade räckt för ett identiskt resultat. Det blir även problematiskt att använda sig av Javascript när man använder sig av XSL då det inte går att inkludera Javascript koden i en XSL T. Javascript tycker vi är en essentiell och viktigt del i webbpublicering då den är viktig för interaktionshantering (bland annat att användaren trycker på en knapp).

7 Saker kan också bli väldigt överflödiga när man ska ha någon dynamik i utskriften. Till exempel blir det omfattande kod för exempelvis select tag:en i HTML då den ska markera det rätta valet (när man ändrar ett recept). Det måste göras till alla tillgänliga val. Eftersom XSL inte kan hantera variabler kan vi inte lagra alla val på något sätt och måste mata in dem för hand. Om vi bestämmer oss för att öka antalet mängder eller kategorier måste vi också ändra i samtliga XSL filer som behandlar det ändrade. Om man hade använt php istället hade det varit möjligt att lagra dessa i en string arrayoch sedan loop:a igen dessa. I vårt fall blev en XSL utmatning på en select 75 kodrader medan något motsvarande i php kanske hade blivit 10 rader (se figur 4 för ett utdrag). Slutligen kan man säga att det kan vara effektivt att bygga ett publiceringssystem på detta sätt. Det gäller dock att veta vilken typ av data som ska behandlas och vilka utkanaler man har till godo. Om datan som behandlas känns omständig och avancerad samtidigt som man har många utkanaler kan det vara lämpligt att använda sig av XML/XSL eller motsvarande medan det känns mindre lämpligt för mindre komplex data då det lätt blir en onödig och tidskrävande omväg. Figur 4 visar hur man med xsl kan bestämma om värdet ska vara markerat eller ej. under det är en motsvarighet med php.

8 Bilaga XML struktur

9 Köranvisningar Sidan är skapad för att vara så självförklarande och användarvänlig som möjligt men samtidigt är detta ingen kurs för användarvänlighet så därför kommer här lite klargörande bilder på hur navigationen fungerar. Nedan ser vi figur 5 som förklarar hur man kan navigera på sidan. Figur 5. De olika pílarna är en koppling mellan två sidor. Man kan exempelvis från Hem ta sig till Lägg till, Recept och Sökresultat. Det syns att hem har en central del och kan nås från alla vy:er.

10 Skärmdumpar Indexsidan Ovan ser vi indexsidan hem. Denna sida är den man kommer till när man går in på sidan. 1. Navigationspanel Finns alltid med oberoende på vart på sidan du är. Består av tre länkar: Hem, Lägg till recept och Logga in. 2. Logga in Här trycker du när du vill logga in. 3. Sökfält Här kan man söka på recept/ingredienser. Tryck enter för varje ingrediens och sedan på förstoringsglaset för att utföra sökningen. Även denna finns alltid med. 4. Receptlista/Sökresultat Här syns sökresultat, om ingen sökning utförts listas alla recept. 5. Visa fler/färre Knapp som expanderar eller gömmer ingredienser i ett recept.

11 Receptsidan Här syns information om ett specifikt recept. 1. Receptinformation Här syns information om recept så som namn, en kort beskrivning och antalet portioner. 2. Ändra Om man är inloggad har man möjlighet att ändra ett befintlig recept genom att trycka på den här knappen. 3. Ingredienser Här syns information om ingredienserna som behövs för receptet. 4. Instruktioner Visar hur man ska gå tillväga för att göra receptet.

12 Lägg till / Ändra recept Ovan syns lägg till och ändra receptvyn. Denna används när användaren vill lägga till ett nytt recept eller ändra ett befintligt. När man är klar trycker man på knappen skicka längst ner. 1. Lägg till ett nytt recept Här skriver man in information så som receptnamn, beskrivning, tillagningstid och instruktioner. 2. Lägg till ingrediens Här fyller man på med de ingredienserna som finns i receptet, man lägger till mängd, enhet, ingrediensnamn och kategori för varje ingrediens och om man skulle ha lagt till för många kan man enkelt ta bort genom att trycka på papperskorgen.