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å:
- För webbsidan: följande taggar bör användas: html, head, body, a, h3, h4, img, p.
- För CSS-dokumentet: följande bör användas: margin, padding, background, text, font, border.
- Följande ska finnas med på webbsidan:
- en kort presentation av dig själv
- en bild som är relevant
- presentera minst 3 länkar till webbsidor relevanta för att presentera dig
- Det du kodar skall vara:
- korrekt HTML5
- korrekt CSS3
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
- Den nya webbsidan ska innehålla en bild, två rubriknivåer, en lista, en tabell, länk till en extern sida, samt vara uppdelad i två spalter.
- Följande ska finnas med på webbsidan:
- en meny (en <div>)
- den gamla webbsidan med menyn
- den nya webbsidan med menyn, och som är en presentation av något du gillar/är intresserad av (dvs ytterligare en <div>)
- layout i två spalter (ytterligare en <div>), fräscha gärna upp den gamla webbsidan också
- design som passar för innehåll
- Det du redovisar skall vara:
- korrekt HTML5
- korrekt CSS3
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.
Krav för godkänt
- Den nya webbsidan ska innehålla en klocka som uppdateras med hjälp av JavaScript, samt menyval som genom JavaScript förändrar utseendet på webbsidan. Dessutom ska webbsidan vara responsiv och anpassas i storlek efter skärmupplösning.
- Använd inte färdiga lösningar ni inte förstår eller jQuery (eller liknande) för att lösa denna laboration.
- Följande ska finnas med på webbsidan:
- de två gamla webbsidorna
- en klocka som uppdateras varje minut eller sekund
- menyval för att förändra webbsidornas utseende
- Det du redovisar skall vara:
- korrekt JavaScript
- korrekt HTML5
- korrekt CSS3
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
- Den nya webbsidan ska innehålla en bloggsida som visas och uppdateras med hjälp av PHP.
- Använd inte färdiga lösningar ni inte förstår eller jQuery (eller liknande) för att lösa denna laboration.
- Följande ska finnas med på webbsidan:
- en webbsida som gör det möjligt att skapa en ny bloggpost
- sidan ska innehålla något slags lösenordsskydd för att stoppa bottar och spammare. Det kan vara så enkelt som ett separat formulärfält där man måste skriva in ett magiskt lösenord för att posten ska accepteras. Lösenordet kan vara samma för alla användare, och det är OK om man måste ange lösenordet varje gång. Du behöver alltså inte skapa någon egentlig login-funktion.
- en dynamisk webbsida, skapad med PHP, som visar bloggposterna
- bloggposterna presenteras med rubrik (h3) och innehåll (p)
- menyval som tillåter de nya funktionerna
- de gamla webbsidorna (förstås)
- Det du redovisar skall vara:
- PHP med HTML-formulär, korrekt HTML5
- PHP med PHP-kod för att spara inlägg
- PHP med PHP-kod för att visa befintliga inlägg
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
- Den nya webbsidan ska innehålla en bloggsida som visas och uppdateras med hjälp av PHP. Webbsidan som presenterar bloggposterna ska ha funktionalitet för sortering av bloggposterna, samt en funktion för att skriva sökord.
- Använd inte färdiga lösningar ni inte förstår eller jQuery (eller liknande) för att lösa denna laboration.
- Följande ska finnas med på webbsidan:
- en webbsida som gör det möjligt att skapa en ny bloggpost
- sidan ska innehålla något slags lösenordsskydd för att stoppa bottar och spammare. Det kan vara så enkelt som ett separat formulärfält där man måste skriva in ett magiskt lösenord för att posten ska accepteras. Lösenordet kan vara samma för alla användare, och det är OK om man måste ange lösenordet varje gång. Du behöver alltså inte skapa någon egentlig login-funktion.
- en dynamisk webbsida som visar bloggposterna
- en urvalsfunktion för hur många poster som visas, till exempel de senaste 5 posterna, alla poster nyare än en vecka eller som postats efter ett visst datum
- sökfunktion för att visa alla poster som innehåller ett visst nyckelord som besökaren själv skriver in. Nyckelordet ska kunna förekomma antingen i rubriken eller i texten till posterna.
- bloggposterna presenteras i ordning från den nyaste till den äldsta
- bloggposterna presenteras med rubrik (h3) och innehåll (p) (åtminstone)
- menyval som tillåter de nya funktionerna
- de gamla webbsidorna (förstås)
- Det du redovisar skall vara:
- korrekt PHP,
- textfil med bloggposter
- korrekt JavaScript
- korrekt HTML5
- korrekt CSS3
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
- Den nya webbsidan ska innehålla en tabell som visar alla bitar som ingår i en sats.
- Tabellen ska visa textfält med antal av varje bit, färg, bild och namn på biten.
- Använd inte färdiga lösningar ni inte förstår eller jQuery (eller liknande) för att lösa denna laboration.
- Det du redovisar skall vara:
- korrekt PHP med SQL baserad på exemplen
- korrekt HTML5
- korrekt CSS3