Webbteknik II - 1DV449 Inledning Bakgrund till problemet

Webbteknik II - 1DV449
Laboration 1
Webbskrapning, XML, JSON, XSLT
John Häggerud
john.haggerud@lnu.se
Johan Leitet
johan.leitet@lnu.se
November 2012
Inledning
I denna första laboration i kursen är det meningen att du ska få arbeta med flertalet tekniker i en påhittad men
verklighetsbaserad situation. Du ska skrapa en webbplats på information och spara denna i både XML- och JSON-format.
Denna data ska du sedan kombinera med en annan XML-datakälla (en excelfil nedsparad i XML-format) och presentera i en
HTML-vy via XSLT. Dessutom ska det skrivas en parameterstyrd XSLT-mall som presenterar antingen en XHTML eller
SVG.
Bakgrund till problemet
Du har blivit kontaktad av en myndighetsperson som behöver hjälp med datainsamlandet av information om lokala
matproducenter. Informationen finns i dagsläget samlad på lite olika ställen och i olika format och personen behöver nu
din hjälp till att samla in och sammanställa informationen på ett bra sätt för att senare kunna jobba vidare med denna
information på ett enklare sätt.
I dagsläget finns informationen på två ställen. Dels i en statisk webbplats som “förra chefens son” skapat och dels i form
av en excelfil. Informationen beskriver ett antal lokala matproducenter och deras uppgifter. I dagsläget är det inte så många
producenter men det är viktigt att din lösning på problemet är generell då det i slutändan kommer rör sig om ett hundratals
producenter (i detta arbetsmaterial får du bara ett fåtal att jobba med)
1

Uppgift 1 - Webbskrapning
1.1 Uppgiften
I denna första uppgift är det tänkt att du ska skrapa en befintlig webbplats med ett antal undersidor. Du hittar webbplatsen
på: http://172.16.206.1/~thajo/1DV449/laboration01/ (OBS! Webbplatsen kräver att du är uppkopplad med vår VPN - Se
kursen webbplats)
Din uppgift blir helt enkelt att med lämplig teknik skrapa denna webbplats på följande information:
- Namn
- Adress
- Postnummer
- Ort
- Webbplats-URL
- URL till logobilder (placerade bakom vårt VPN)
- id (finns i länkarna till de olika producenterna och kommer matchas mot andra datakällor i senare uppgifter)
Din första uppgift blir att skriva ett script som skrapar webbplatsen och genererar dels ett välstrukturerat XML-dokument
och dels ett välstrukturerat JSON-Dokument.
1.2 Val av teknik
Du är helt fri att välja teknik för att lösa problemet beroende på dina förkunskaper. Vi kan bidra med ett webbkonto med
stöd för PHP (se kursens webbplats) men du är som sagt helt fri att välja teknik och arbetssätt så länge du löser problemen
enligt de krav som finns.
1.3 Krav för uppgift 1
●
●
●
●
Du ska skriva ett generellt (ska fungera för 1000-tals liknande producentsidor) serverscript som skrapar
webbplatsen på ovanstående information och samtidigt sparar ner detta till önskat format.
Resultatet ska bli två stycken filer, en i XML- och en i JSON-format, som uppfyller de regler som finns
respektive datautbytesformat.
Båda filerna ska skapas på en och samma körning av scriptet.
Scriptet ska vara körbart på en webbserver och triggas via ett HTTP-anrop (GET).
● Du ska ha reflekterat kring frågorna under punkt 1.4
2

1.4 Att reflektera kring
●
●
●
Vilka olika sätt finns att skrapa webbplatsen på informationen som efterfrågas? Varför valde du det sättet du har
gjort det?
Vilket format känns enklast att jobba med synvinkel på att strukturera upp information? Varför?
Vad kan det finnas för risker med applikationer som innefattar automatiserad webbskrapning?
1.5 Tips och studiematerial
Webbskrapning:
http://lnu.diva-portal.org/smash/record.jsf?pid=diva2:430665( Uppsats B-nivå, tekniker för skrapning i PHP)
http://www.devblog.co/php-web-page-scraping-tutorial/ (webbskrapningstutorial)
http://lmgtfy.com/?q=web+scraping
XPath :
http://dret.net/lectures/xml-fall11/xpath-chapter.pdf
http://dret.net/lectures/xml-fall11/xpath-quickref.pdf
(Länkarna går till Erik Wild’s (http://dret.net/netdret/) sida där materialet är publicerat.)
XSLT:
W3C:s specifikation
Uppgift 2 - XSLT
2.1 Uppgiften
I denna uppgift är tanken att du ska använda den XML-fil som du skapade i förra uppgiften och skriva ett serverscript
som läser in den filen samt en XSLT-fil för att transformera fram en XHTML-sida. Tanken med XHTML-sidan är att
vi ska kombinera dels den data du skrapat och dels den data som du hittar i filen “positions.xml”. Denna fil innehåller
exporterad data i XML-format rörande samma producenter (positionsdata). Tack vare XSLT kan vi kombinera båda dessa
datastrukturer och visa upp i en och samma “output” (se bild 2.1)
BILD 2.1- Som du ser är det inget större krav på presentation men var noga med att det blir en korrekt utformad XHTMLsida
och att den innehåller rätt information då du ska plocka denna data och trycka in i en databas i nästa laboration.
3

2.2 Krav för uppgift 2
●
För att kombinera de båda dokumenten ska en, och endast en, XSLT-mall användas.
●
Inläsningen och transformeringen ska ske på serversidan och generera en XHTML-sida.
● XHTML-sidans utseende ska vara liknande Bild 2.1
● Reflektera kring frågorna i punkt 2.3
2.3 Att reflektera kring
●
●
På vilka andra sätt än XSLT kan man uppnå samma resultat? Fördelar, nackdelar?
Måste resultatdokumentet av en XSLT-tranformeringing vara en XML-applikation?
2.4 Tips och studiematerial
Ett problem man ställs inför i denna uppgift är att man får problem med xml-namespace. De intressanta cellerna i XMLdokumentet
som är exporterat från Excel har ett eget xml-namespace och prefix: xmlns:ss="urn:schemas-microsoftcom:office:spreadsheet"
Detta måste vi även inkludera i XSLT-mallen för att kunna använda XPath-uttryck och hämta ut
rätt data.
För att kunna kombinera två XSLT-mallar kans man använda XPath-funktionen document(url) - som tar URL:en till det
XML-dokument du vill läsa in. Du kan då spara detta i en XSLT-variabel: http://www.w3schools.com/xsl/el_variable.asp
Uppgift 3 - XSLT och SVG
4

3.1 Uppgiften
I denna uppgift är det tänkt att du genom att använda de tekniker som finns inom XSLT och generera två olika resultat
beroende på den parameter/querystring man skickar in till XSLT-mallen. I denna uppgift ska du generera antingen en
XHTML-sida eller en svg-fil eller båda - helt beroende på HTTP-anropet.
Till din hjälp får du en xml-fil som innehåller den data som din XSLT-mall ska använda sig av. Din uppgift blir att läsa in
XML-filen tillsammans med en XSLT-mall där din transformering ska ske. Detta ska göras vi ett serverscript. Anropar man
scriptet med querystringen ”render=xhtml”, ska en XHTML-sida liknande skärmdumpen nedan (bild 3.1) presenteras.
Bild 3.1 - XHTML
Anropar man scriptet med querystringen ”render=svg”, ska en svg-sida liknande skärmdumpen nedan (Bild 3.2) presenteras
(skärmdumpen är tagen när resultatet ses med webbläsaren Google Chrome).
Bild 3.2 - Transformering till svg. Anropar man scriptet med querystringen render=xhtml_svg, ska en kombinerad sida ses
där man först ser HTML-tabellen och där under ser svg-grafiken.
3.2 Krav
●
Resultatat ska vara en webbsida som man kan styra med en querystring
5

● Resultatet ska likna skärmdumparna ovan (Bild 3.1 och Bild 3.2)
3.3 Tips och studiematerial
http://www.w3schools.com/svg/default.asp
I denna uppgift kan det vara bra att använda sig av ”xsl:variable” (http://www.w3schools.com/xsl/el_variable.asp) och
XPath-funktionen ”position()” för att kunna rita upp rektanglarna/diagrammen på ett dynamiskt sätt under varandra.
Här är kraven för godkänt på laborationen uppfyllt. Nedan finns en extrauppgift för er som siktar på högre betyg.
Extrauppgift 4 - Webbskrapning II
3.1 - Uppgiften
För er som siktar på högre betyg finns en extrauppgift som är en variant på första uppgiften men som kräver att man skrapar
en webbplats med inloggning. Det är samma typ av data som i första uppgiften som ska skrapas men i denna variant
ligger sidorna bakom ett inloggningsformulär och kräver att webbskrapningsskriptet man skriver hanterar dels att posta
inloggningsuppgifter samt en sessions-cookie som används i varje anrop mot de inloggningsskyddade sidorna. I övrigt är
uppgiften som första uppgiften.
Inloggningsformuläret hittar du på adressen:
http://172.16.206.1/~thajo/1DV449/laboration01/producenter/secure/
Användarnamn: admin
Lösenord: p@ssw0rd
3.2 - Krav
●
●
●
Du ska skriva ett generellt (ska fungera för 1000-tals liknande producentsidor) serverscript som skrapar
webbplatsen på ovanstående information och samtidigt sparar ner detta till önskat format.
Resultatet ska bli två stycken filer, en i XML- och en i JSON-format, som uppfyller de regler som finns
respektive datautbytesformat.
Båda filerna ska skapas på en och samma körning av scriptet.
3.3 - Tips
● Kör du PHP är cURL något som kan förenkla skapandet av korrekta request (http://php.net/manual/en/
book.curl.php)
●
Testa webbplatsen i webbläsaren och se hur HTTP-anropen bör ske.
6