Webbserverprogrammering02 [wesweb02]

Moment03 - Datautbytesformat

Introduktion

I detta moment skall vi lära oss två tekniker för att utbyta data, JSON och XML. Att utbyta data innebär att vi kan importera och exportera data till/från en webbapplikation. I dessa två tekniker så kan vi också välja att lagra data i dessa format. Vi har tidigare lagrat data i databasen MySQL och några kanske dessutom har provat att lagra i textfiler, nu får du fler verktyg i din verktygslåda.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Webbserverns och dynamiska webbplatsers funktionalitet.
  • Utvecklingsprocessen för ett webbtekniskt projekt. Målsättningar, planering, systemering, kodning, optimering, dokumentation och uppföljning.
  • Funktionen i ett programmeringsspråk för dynamiska webbplatser.
  • Datalagring i relationsdatabas eller med annan teknik.
  • Datautbytesformat, till exempel XML (Extensive Markup Language) och JSON (Java Script Object Notation).
  • Teckenkodning. Begrepp, standarder och handhavande.
  • Kodning och dokumentation enligt vedertagen praxis för den teknik som används i sammanhanget.
  • Applikationsarkitektur och separation av olika slags logik.
  • Kvalitetssäkring av dynamiska webbapplikationers funktionalitet, säkerhet och kodkvalitet.

Momentets upplägg

Detta moment kommer att vara ganska så stort och jag har valt att blanda mindre delar teori med en hel del eget arbete. Jag har byggt tre tutorials som jag vill att ni jobbar med och genom det arbetet får kunskap och förståelse för hur teknikerna JSON, XML men också en ny databas SQLite fungerar.

Del 1 - SQLite

I tidigare kurser så har vi jobbat med MySQL som databas, det är en kraftfull databas som ofta används för webbapplikationer. Medan MySQL är en databasserver som följer med MAMP så är SQLite en filbaserad databas. Det innebär att hela databasen finns i en fil som är enkel att flytta mellan mappar, det är lätt att skapa den bland alla andra filer i din applikation. Om du vill göra en databasmodell på riktigt så går detta att göra i Vertabelo där du redan bör ha ett konto. För att jobba med MySQL så använder vi oss av phpMyAdmin som är en applikation som ligger på samma server som själva databasen, för att jobba med SQLite så behöver du ett fristående program. Jag rekommenderar tillägget SQLite manager i Mozilla Firefox, som är smidig att jobba med.

Tutorial del 1

Dags att börja arbeta. Gå till tutorial contact01 och följ instruktionerna. Uppgiften är att följa tutorial så att du har en fungerande applikation. I denna del finns det ingen uppgift att göra på egen hand.

Del 2 - JSON

JSON (JavaScript Object Notation) är ett textbaserat format för att representera data. JSON är ett enkelt sätt att strukturera data så att det är läsbart för en människa men också tillräckligt strukturerat för en applikation att processa.

Om vi skall lagra en kontakt som JSON så skriver vi detta på följande sätt;

{
	"name": "Johan Hällgren",
	"email": "johan@systemet.se"
}

Om vi istället vill lagra flera kontakter i en lista så skriver vi på detta sätt;

{
	"contacts":[
		{ "name": "Johan Hällgren", "email": "johan@systemet.se"},
		{ "name": "Anna", "email": "anna@systemet.se"},
		{ "name": "Bertil", "email": "bertil@systemet.se"}
	]
}

Det finns vissa saker som vi bör notera. Måsvingarna { } representerar ett objekt, det innebär att all kod från JSON är någon form av objekt. Vi kommer kika vidare på objektorientering i nästa moment så du behöver inte förstå innebörden av det just nu.
Klammrarna [ ] används för att visa att det är en array, eller lista med objekt. I det andra kodexemplet så är det alltså en array med kontakter som lagras och inom varje måsvinge så finns ett objekt. Definitionen av detta objekt kan läggas på en eller flera rader, attributen avskiljs med ett kommatecken på samma sätt som objekten gör.

Jobba med JSON

Det är relativt enkelt att jobba med JSON i PHP, det finns några få inbyggda funktioner som du behöver lära dig att använda. För den som vill läsa så finns det två bra länkar nedan;

Validera JSON

Tutorial del 2

Vi lär oss att använda JSON i en fortsättning av vår tutorial. Gå till tutorial contact02 och följ instruktionerna. Uppgiften är att följa tutorial så att du har en fungerande applikation.

Egen frivillig uppgift

Bygg vidare på applikationen contact02 genom att lägga till möjlighet att exportera och importera en specifik kontakt och inte alla.

Del 3 - XML

XML (eXtensisble Markup Language) är ett märkspråk som likt HTML använder element och attribut för att beskriva ett objekt. I HTML så skapar vi element som har ett värde vad det är i form av text <h1> för en rubrik på nivå 1, när det gäller XML så får du skapa dina egna element som tydligt skall beskriva innehållet i varje element.

Om vi skall lagra en kontakt som XML, utifrån tidigare exempel, så skriver vi detta på följande sätt;

<?xml version="1.0" encoding="UTF-8"?>
<contact>
  <contactId>1</contactId>
  <name>Johan</name>
  <email>johan@systemet.se</email>
</contact>

I exemplet ovan så använder vi oss bara av element men det går också att använda sig av attribut

<?xml version="1.0" encoding="UTF-8"?>
<contact contactId="1">
  <name>Johan</name>
  <email>johan@systemet.se</email>
</contact>

Att använda det ena eller andra sättet är inte speciellt viktigt. Det viktigaste är att det är tydligt och att din xml-fil går att validera.

Det som finns på första raden i våra XML-filer kallas för XML Prolog, den är inte obligatorisk men om den skall finnas med så måste den ligga överst i filen. I prologen så ser du att vi talar om vilken version av XML som skall användas och även vilken teckenkodning som vi använder i dokumentet, detta underlättar för de processer som senare skall använda vår fil.

I bägge våra exempel ovan så finns det ett rotelement, <contact>-elementet. Det får bara finnas ett rotelement, skulle det vara så att vi vill skapa flera kontankter så måste vi skapa ett nytt rotelement som omsluter dessa kontakter. Då ser koden ut så här;

<?xml version="1.0" encoding="UTF-8"?>
<contactList>
  <contact contactId="1">
    <name>Johan</name>
    <email>johan@systemet.se</email>
  </contact>
  <contact contactId="2">
    <name>Anna</name>
    <email>anna@systemet.se</email>
  </contact>
  <contact contactId="3">
    <name>Bertil</name>
    <email>bertil@systemet.se</email>
  </contact>
</contactList>

Likheter & skillnader mellan XML och JSON

JSON och XML används bägge för samma typ av uppgifter, beskriva, lagra och transportera data. För oss männsikor så bör vi kunna läsa bägge formaten och förstå vad det är som beskrivs. Bägge kan lagra objekt i andra objekt men bara JSON kan lagra data i form av en array, vilket ofta är en enklare struktur. Den största skillnanden är dock hur vi använder de olika formaten. JSON är snabbare att skriva och läsa och det beror på att det är större krav på ett XML-dokument och det tar mer tid att omvandla detta då det behövs en XML-parser för att utföra den processen. Det är också detta som är XML's stora styrka, att kunna validera och säkerställa att dokumentet är validerat och ok innan någon form av import skall göras.

Sammantaget kan vi säga att bägge formaten har sin givna plats inom applikationsutveckling.

Ordlista XML

Jag skall försöka bygga ihop en vettig ordlista med det enklaste begreppen du behöver ha koll på för att jobba med XML. Eftersom engelska är huvudspråket så försöker iv hålla oss till de engelsak orden.

  • element - motsvarande som i html. Alla element måste stängas i XML, de måste också stängas i omvänd ordning från hur de skapas.
  • attribute - information inne i elementstaggen. Attribut måste vara omslutna av citationstecken.
  • node - enligt DOM så är allt i en XML-fil olika noder (nodes).
    • root node - varje dokument måste ha exakt en root node (rotelement), i våra exempel ovan så är <contact> vårt rotelement när vi endast har en kontakt medan <contactList> är rotelement när vi har en lista.
    • child node - varje element som ligger i ett annat element kallas för child node. <contact>-elementet är child node till <contactList>-elementet.
    • parent node - förälder elementet till ett barn. Vilket i vårt exempel innebär att <contactlist>-elementet då är parent node till <contact>.
    • sibling node - två element som har samma förälder. I vårt exempel är <contact>-elementen sibbling nodes eller syskon på svenska.
    • text node - är textinnehållet i ett element, Johan är text node i <jname>-elementet.

Tutorial del 3

Vi lär oss att använda XML i en fortsättning av vår tutorial. Gå till tutorial contact03 och följ instruktionerna. Uppgiften är att följa tutorial så att du har en fungerande applikation.

Egen frivillig uppgift

Bygg vidare på applikationen contact03 genom att lägga till möjlighet att exportera och importera en specifik kontakt och inte alla.

Del 4

Det finns många saker i denna applikation som kan göras bättre och göras färdigt. Detta kommer jag att göra vid ett senare tillfälle, utan tutorial men en färdig applikation som vi kan ha som referens för andra projekt.

Tankarna är att bl.a. kunna exportera till excel, ta bort enstaka kontakter i databasen, tömma hela databasen och kunna uppdatera information om befintliga kontakter. I en perfekt värld borde vi dessutom ta hand om eventuella dubbletter som läses in.

Men som sagt, det där är en senare uppgift.

Redovisning

Lägg upp dina applikationer på din webbplats, skriv en samlad utvärdering av de olika applikationerna på din wordpressida.