TNMK30 - Elektronisk publicering, HT2021

Laborationer

Inför Laboration 1 - HTML och CSS

Uppgift

Presentera dig själv (till exempel intressen, var du bor, var du kommer från) på en webbsida. Först ska sidan byggas i korrekt HTML5. Sedan ska presentationen av sidan ändras med hjälp av en CSS-fil. Använd en validerare för att säkerställa att koden är korrekt.

Webbsidan ska läggas upp i din www-katalog.

Tänk på:


Laboration 1 - HTML och CSS

Uppgift

Bygg ut det du har förberett med en enkel meny och ytterligare en sida. Den nya sidan ska presentera en bok, film, författare, musikgrupp, skådespelare, konstnär eller liknande som du tycker om. Presentationen, din design, ska tydligt passa för innehållet.

Menyn ska antingen vara överst på sidan eller till vänster på sidan, och vara tillgänglig på båda sidorna. Ett tips är att använda olika <div> för att skilja innehållet i meny samt själva webbsidan. Innehållet ska vara genomtänkt och bygga på korrekt markup (rubriker ska vara h3 och h4, och så vidare).

Hur informationen delas upp i de två spalterna är upp till dig, till exempel kan information och huvuddelen av texten vara till vänster, medan spalten till höger kan innehålla bilden, länkar, och en tabell med kortfattade fakta.

Krav för godkänt


Laboration 2 - HTML och Javascript

Uppgift

Bygg ut föregående laboration med JavaScript-funktionalitet. JavaScript-funktionaliteten ska visa en klocka i menyn, samt förändra utseendet på webbsidan. För att lösa uppgiften behövs menyn uppdateras med en eller flera knappar som genom JavaScript förändrar utseendet på webbsidan. Tänk att sidan ska förändras för att underlätta läsningen av sidan, detta kan exempelvis innebära att kontrasterna förändras mellan text och bakgrundsfärg, eller att texten blir större, eller att teckensnittet byts ut. Denna nya funktionalitet ska förstås få genomslag på båda webbsidorna. Vidare ska webbsidan göras responsiv.

lab2extra.pdf

Krav för godkänt


Laboration 3 - PHP

Uppgift

Bygg ut föregående laboration med en ny undersida för nyheter eller bloggposter. Bloggposterna ska presenteras på sidan med rubrik och dagens datum (dvs det datum då de skrevs), och sparas i en och samma textfil. Den nya sidan ska skrivas i PHP och ska dynamiskt sätta samman HTML-koden för menyn etc, tillsammans med bloggposterna som läses in från textfilen.

Ytterligare en PHP-sida behövs. Denna sida tar hand om inloggning, att skriva in bloggposten, samt lägger till den nya posten i och sparar textfilen.

Båda de gamla webbsidorna behöver förstås uppdateras med menyval för inloggning, samt för att visa bloggposterna/nyhetssidan. Placera och namnge knapparna för enkel navigation och förståelse, för en besökare som inte är admin.

Extra information och stöd finns här: lab3-2017.pdf
Och här: lab3extra.pdf

Krav för godkänt


Laboration 4 - MySQL

Uppgift

Fördelarna med en databas är flera jämfört med en textfil. Dels går det lättare och snabbare att sortera och söka i poster med en databas, dels lagras data på ett strukturerat sätt som gör det lätt att lägga till, ändra och ta bort poster. En databas kan också hantera enorma mängder data för många användare, vilket är viktigt för större webtillämpningar. Det finns också fördelar som har att göra med säkerhet och tillgänglighet, och det blir dessutom lättare att ge flera användare tillgång till data för exempelvis moderering. En eller flera databaser av något slag används för de flesta större webbtillämpningar. Bygg därför om laboration 3 med databaskoppling denna gång i stället för PHP.

Extra information och stöd finns här: lab4-2017

Krav för godkänt


Laboration 5 - MySQL

Uppgift

I en verklig webbaserad databastillämpning har man sällan så enkla problem att man kan lösa dem med en enda tabell. Denna laboration handlar om att ställa frågor till en mer komplicerad databas, närmare bestämt den ni ska använda till projektet. Databasstrukturen finns i ett separat dokument (http://www.itn.liu.se/~stegu/TNMK30-2016/legodatabasen.pdf). Den ser komplicerad ut, men de flesta tabeller har väldigt speciella och begränsade syften. Huvudstrukturen i databasen är tre tabeller: parts, sets, och inventory. Strukturen är densamma som exemplen från föreläsning 6, fast med mycket mera data. Just det här är också en väldigt vanlig struktur på databaser: två tabeller som kopplas via en tredje tabell.

För frågor till databasen läs igenom denna webbsida, noggrant, till och med frågan om minifigurer: http://www.itn.liu.se/~stegu76/TNMK30-2016/lego_examples.php

Ni ansluter till databasen med mysqli och hostname "mysql.itn.liu.se" och user "lego" utan lösenord och med databasnamn "lego".
Läs mer här: http://php.net/manual/en/function.mysqli-connect.php.

Er uppgift är att göra en sida liknande denna: http://www.itn.liu.se/~stegu76/TNMK30-2016/listwithimages.php. Det vill säga: visa alla bitar i en viss sats (vilken bestämmer ni själva) med bilder i rätt färg. Exempelsidan är ful och utan stylesheet, men er sida ska se bra ut (dvs med CSS) och vara en del av i de övriga sidorna ni har gjort på laborationerna hittills under kursens gång.

Krav för godkänt