Göm menyn

TDDD52 Webbprogrammering - grundkurs

2014

Laboration 6 - Profiler - Betyg 5

1. Syfte

  • Att själv ta ansvar för informationssökandet.
  • Att arbeta med större volym eller högre komplexitet.

2. Genomförande

Den här laborationen har två profiler som ni kan välja mellan. Den första profilen handlar om interaktivitet, här arbetar ni vidare på era laborationer 0-5 men arbetar med moderna bibliotek så som Bootstrap och jQuery. Den andra profilen handlar om volym, här jobbar ni på ett helt nytt, men egen definierat, projekt som skall uppfylla vissa komplexitetskrav och använda sig av Bootstrap.

Ni väljer således själva vilken profil ni vill genomföra.

3. Profil 1 - Interaktivitet och Varukorg

Mer och mer av den totala internet-trafiken kommer idag från mobila enheter så som smartphones och surfplattor. Detta är en trend som säkert kommer hålla i sig i flera år. Webbplatsen som ni utvecklat ser likadan ut oavsett om man använder en dator, mobil eller platta.

I denna profil skall vi uppnå bättre interaktivitet och det skall göras med hjälp av två mycket välkända bibliotek, Bootstrap och jQuery. Med hjälp av dessa skall följande uppnås:

  • Webbplatsen skall vara responsive, dvs den skall automatiskt anpassa sig efter skärmens storlek. Detta skall göras med Bootstrap.
  • Webbplatsens JavaScript skall utnyttja jQuery istället för att använda ren JavaScript.
  • Webbplatsens bildspel skall kännas mer interaktiv och framhävas med hjälp av en plugin till jQuery (lightBox eller lightBox 2).

Förutom detta skall ni också få till en varukorg på hemsidan.

3.1 Genomförande

  • Kopiera alla filer från "lab5" till "lab6" inklusive "admin" mappen.
  • Eftersom ni nu skall använda Bootstrap för att lyckas med er layout så kan ni ta bort nästan all kod ur er egna CSS.
  • Läs instruktioner för hur man laddar ner och installerar Bootstrap, jQuery och lightBox (eller lightBox2).
  • Titta noga igenom Bootstraps hemsida för att kolla vilka komponenter som finns tillgängliga.
  • Skriv om koden på era sidor så att de använder Bootstrap och jQuery.
  • Tänk på att när man arbetar med externa bibliotek så använder man deras dokumentation kontinuerligt, ingen läser och kommer ihåg allt om biblioteken, utan man använder dokumentationen som referens hela tiden.

3.2 Krav

  • Er sida skall endast använda Bootstrap för att hantera layout.
  • När man minskar webbläsarens fönster (för att imitera en surfplatta eller mobil) så ska layouten hänga med och sidan skall fortfarande vara användbar.
  • Ni får skriva minimalt med egen CSS kod, men i första hand skall ni använda Bootstraps komponenter. Er CSS kod skall inte göra något som Bootstrap redan kan.
  • I validate.js skall ni använda jQuery för att hitta element och deras värden samt att manipulera DOM trädet.
  • Istället för att använda animate.js för bildspelet ska ni använda lightBox/lightBox2. Se länkar nedan.
  • Varje produkt skall ha en "Lägg till i varukorg" knapp och någon metod för att välja antal.
  • På något vis skall man sedan kunna se sin varukorg (vilka produkter och antal samt pris och totalsumma).
  • Varukorgen skall inte försvinna när man byter sida, men skall inte förlita sig på PHP eller databasen, istället ska ni använda cookies för att hantera varukorgen.
  • Varukorgen implementeras således endast med HTML, CSS och JavaScript.

4. Profil 2 - Volym

Istället för att lära sig jQuery och Bootstrap ges möjlighet att få repetera de kunskaper man lärt sig i föregående laborationer. Tänk dock på att eftersom denna profil ger stor frihet så kan det innebära mer jobb.

4.1 Genomförande

  • Innan ni påbörjar projektet så skriv ner en mycket kort projektidé som ni vill arbeta med och presentera denna för godkännande till Marcus Bendtsen under någon laboration.
  • När ni presenterar er idé ska ni också visa ett ER-diagram som visar komplexiteten enligt kraven nedan.
  • När ni fått godkännande av Marcus Bendtsen kan ni påbörja utvecklandet.

4.2 Krav

  • Projektet skall använda HTML, CSS, JavaScript och PHP på samma nivå som under laboration 0-5.
  • Projektet skall ha en "publik" sida och en "admin" sida precis som i laboration 0-5.
  • Projektets kod skall ha samma goda kvalité och struktur som under laboration 0-5.
  • Databasen som används skall ha minst tre logiska tabeller där minst två på något sätt är ihopkopplade.

5. Redovisning

Inlämning: Mejla till er laborationsassistent när webbplatsen har blivit publicerad till www-pub, den skall finnas tillgänglig på båda studenters konto. I ämnesraden skriver ni "TDDD52 - Laboration 6 - Redovisning". I mejlet skriver ni länken till er publicerade webbplats, era namn, liu-id och epost-adresser.

Muntlig: Laborationsassistenten kan ställa frågor till er angående er inlämning om det är något som kräver förtydligande.

5.1 Deadline

Soft: 2013/03/08

Hard: 2013/03/08

6. Länkar


Sidansvarig: Jakob Bandelin
Senast uppdaterad: 2013-02-20