TDP013 Webbprogrammering och interaktivitet

AJAX & CORS

Lärandemål

Från kursplanen: Länk till kursplan

• Skapa avancerade webbsidor som inkluderar dynamiska information, interaktivitet och databasanslutning.
• Använda programmeringsspråk som JavaScript för att skapa interaktivt webbinnehåll.
• Använda tekniker som AJAX för att skapa interaktivt webbinnehåll.

Programmål - Innovativ Programmering

Från programplanen: Länk till programplanen

• 1. hantverk: den (ofta tysta) kunskap och individuell förmåga som studenten bygger upp genom att arbeta praktiskt med programmering, själv, i projekt och i community. Här betonas både att arbeta innovativt och mot beställare.
• 3. teknik: kunnande om den teknik som finns för programmering och datorer, med fokus på programmeringsspråk och plattformar.

Examensmål - Kandidatexamen

Från Högskoleförordningen (1993:100): Länk till förordningen

• visa kunskap och förståelse inom huvudområdet för utbildningen, inbegripet kunskap om områdets vetenskapliga grund, kunskap om tillämpliga metoder inom området, fördjupning inom någon del av området samt orientering om aktuella forskningsfrågor.
• visa förmåga att självständigt identifiera, formulera och lösa problem samt att genomföra uppgifter inom givna tidsramar

Syfte

Studenterna skapar en brygga mellan sin klient från laboration 1 och sin backend i laboration 2. Genom att använda AJAX med CORS-tekniken så kan klienten skicka och hämta meddelanden oavsett om klienten exekveras på samma domän som backend eller inte.

Genomförande

Laborationen görs i par enligt webreg. Studenterna använder JavaScript för att göra AJAX-anrop samt konfigurerar sin backend för att kunna hantera CORS-tekniken. Notera att om klient och server körs på samma domän kommer CORS inte vara strikt nödvändigt för att kommunikationen ska fungera men ni ska trots detta implementera stöd för CORS.

Krav

• Användaren ska kunna använda sidan precis som i labb 1 med skillnaden att meddelandena laddas in från databasen när sidan laddas om.
• När ett meddelandes läggs till ska endast nödvändiga delar av gränssnittet uppdateras.
• När ett meddelandes status ändras ska endast nödvändiga delar av gränssnittet uppdateras.
• Cookies behöver inte användas i labben.
• Meddelanden och deras status som visas för användaren ska reflektera datan som finns i MongoDB. Meddelanden som inte sparats i databasen ska heller inte synas på sidan.
• Klienten ska hantera all kommunikation med servern via AJAX och använda sig av CORS.
• Tester liknande de som implementerades i labb 2 ska även finnas för denna labb. Beskriv även hur ni testar stöd för CORS om ni inte inkluderat det i de automatiska testerna.
• Anrop ska valideras på på klient- och serversidan.
• Informationen i databasen ska finnas kvar om servern startas om.

Redovisning

Innan en labb rättas behöver ni redovisa er lösning för en assistent. Diskutera under redovisningen nedanstående reflektionsfrågor:

• Beskriv strukturen och flödet i er applikation och demonstrera att det fungerar.
• Hur fungerar CORS?
• Hur förhindrar ni att hela sidan laddas om när något ändras?
• Vad använder ni som ID:n för meddelanden? Hur ser ni till att alla meddelanden har ett unikt ID?
• Hur skyddar ni er mot injections?

Assistenten kan komma med följdfrågor men grundtanken är att ni med redovisningen visar att det är ni som skrivit koden och att ni förstår vad ni har gjort.

Redovisning på distans

Om ni inte skulle ha möjlighet att närvara för redovisning kan ni även välja att spela in en screencast på ca 5-10 minuter där ni kort besvarar frågorna ovan och visar er kod. Ladda då upp screencasten och mejla en länk till robin.keskisarkka@liu.se.

Inlämning

1. Lägg upp er och kod andra relevanta filer för labben till ert tilldelade repo på gitlab.liu.se.
2. Skapa en tag (använd formatet lab3-v.1.x) för er inlämning. Vid rättning är det alltid den senast taggade versionen för labben som rättas.

Rekommenderad deadline: 28:e september 2023 23:59 CEST

Sidansvarig: Anders Fröberg
Senast uppdaterad: 2023-09-12