Kmom03: Formulär och CRUD

I detta kursmoment fortsätter vi med att utveckla våra GUI komponenter från tidigare kursmoment. Vi skapar lättanvända formulärfält med hjälp av HTML5 och kopplar ihop fälten i formulär som är lätta att använda på små skärmar där kontext och möjligheten att skriva snabbt och enkelt saknas.

I vår applikation lägger vi till möjligheten att skapa, uppdatera och ta bort data via formulär. Vi har i tidigare kursmoment arbetat enbart med vanilla JavaScript, men ska i detta kursmoment titta på hur vi kan använda oss av JavaScript ramverket mithril för att underlätta hämtning av data, rendering av HTML-element och de olika vyer.

Så här kan det se ut när vi är klara.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läsanvisningar

(ca: 6-10 studietimmar)

#Kurslitteratur

Läs följande:

1. Mobile HTML5.
   • Ch 4: HTML5 Web Forms

#Artiklar

1. Bekanta dig med dokumentationen för JavaScript ramverket mithril. Genomgången av en enkel app i en tutorial är ytterst relevant för det vi gör i detta kursmoment.

#Video

I nedanstående videoserie använder Emil sig av mithril versionen mithril@2.0.0-rc.4. Det var en såkallad release candidate av mithril 2.0.0. Senaste versionen av mithril är nu mithril 2.0.4 och vi kan installera med kommandot npm install mithril --save. Den stora ändringen från release candidate som användes 2019 är hur man skapar länkar. I videon ‘305b Länkar i mithril 2.0.4’ visar Emil hur man skapar länkar i mithril 2.0.4.

1. Det finns en videoserie kopplat till kursen, titta på videos som börjar på 3.

I spellistan finns 6 stycken videos som börjar med ‘Extra: 30*’ dessa är från en tidigare version av mithril (1.1.6) som användes i kursen 2018. De videos är till 90% fortfarande relevanta och vill man förkovra sig i ytterligare ett mithril exempel kan de vara sevärda.

#Lästips

• I forumet finns en tråd om val av JavaScript ramverk och vad man kan tänka på Hur tänka inför val av JavaScript ramverk?.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

Gör följande övningar för att träna inför uppgifterna.

1. Gör övningen “Kom igång med ramverket Mithril”. Spara eventuella testfiler i me/kmom03/nobel.

2. Läs igenom artikeln och gör övningarna i “Ett mobilanpassad formulär”. Spara eventuella testfiler i me/kmom03/formular.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Lager appen del 3”. Spara resultatet i me/kmom03/lager3.

#Extra

Det finns ingen extrauppgift.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

• Vilka faktorer spelar in när du ska designa ett formulär för mobila enheter?
• Hur känns övergången från vanilla JavaScript till ett JavaScript ramverk?
• Gjorde du extrauppgifterna i lager appen? Berätta isåfall om det arbetet.
• Vilken är din TIL för detta kmom?

#Revision history