Kmom01: Bygg en webbplats

Kursmomentet visar hur du kommer igång med labbmiljön, dels via en installation på din egen dator och dels genom att publicera resultatet på driftsservern. Du kommer att utveckla din kod lokalt och därefter kopiera över resultatet till en driftsserver.

Du skall gå igenom ett par exempel på kodning i HTML, CSS och PHP och använda lärdomarna för att bygga en me-sida. Me-sidan är en enkel webbplats som innehåller en presentation av dig själv tillsammans med redovisningstexterna för kursmomenten.

Vi bygger webbplatsen tillsammans, steg för steg. Vi försöker bygga en struktur som går att återanvända för att bygga fler och större webbplatser.

När vi är klara med dagens övning så har du förhoppningsvis fått lite blodad tand på det som kursen handlar om. Tanken med övningen är att du skall bekanta dig med de tekniker (HTML, CSS, PHP) som kursen omfattar och få möjlighet att se hur de samverkar. I kommande kursmoment tittar vi mer ingående på respektive teknik. Använd tid till att studera kurslitteraturen. Se till att få en översikt av vad de olika böckerna erbjuder.

(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.)

#Labbmiljön

(ca: 2-4 studietimmar)

Det första du behöver göra är att installera en labbmiljö för kursen. Om detta är din första dbwebb-kurs så kan det innebära en hel del jobb och en del nya tekniker. Se till att du har gott om tid när du gör detta.

Om du vill ha en introduktion till det som händer i steg 2-4 så kikar du på videon “Mikael installerar dbwebb-cli som en del av labbmiljön”.

1. Du kan börja med att installera labbmiljön som behövs för kursen.

2. Fortsätt med sektionen för att installera kommandot dbwebb. Kommandot används under hela kursen för att jobba med kursmaterialet.

3. När du har installerat kommandot så fortsätter du med sektionen för att konfigurera kommandot dbwebb.

4. Du kan nu ladda ned (klona) ditt lokala kursrepo htmlphp som innehåller kursmaterial för kursen. Här kommer du att skriva all kod till övningar och uppgifter.

#Läsanvisningar

(ca: 4-8 studietimmar)

#Kurslitteratur

Läs följande:

1. HTML och CSS-boken

   • Inledning
   • Kapitel 1 Snabbstart
   • Kapitel 2 Grunderna i HTML

2. Webbutveckling med PHP och MySQL

   • Kapitel 1 Introduktion
   • Kapitel 2 Variabler (ej vektor, objekt, 2.4 Miljövariabler)
   • Kapitel 4 Operatorer

#Artiklar

Läs följande:

1. Del 1-5, 7 av artikeln Kom i gång med PHP på 20 steg

2. HTML - Gör din första sida med HTML5

3. CSS - Styla din sida med CSS och en extern stylesheet

#Video

Titta på följande:

1. Videoserien Lär dig PHP är tätt kopplat till kursmaterialet. Kika på de videor som börjar med 0 och 1.

#Lästips

Det finns inga extra lästips i detta kursmoment.

#Övningar & Uppgifter

(ca: 6-10 studietimmar)

#Övningar

Genomför följande övning för att träna dig och förbereda inför uppgifterna.

1. Jobba igenom övningen “Gör en me-sida med HTML, CSS och PHP”. Övningen innehåller grunderna i HTML, CSS och PHP och visar hur du bygger upp en enkel webbplats. Filerna du jobbar med kan du spara i me/kmom01/me.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “PHP lab 1: uttryck, datatyper och variabler”. Spara alla filerna i katalogen me/kmom01/lab1.

2. Gör uppgiften “Skapa en me-sida i kursen htmlphp”. Detta blir grunden till din me-sida i kursen. Spara alla filerna i katalogen me/kmom01/me1.

#Extra

Det finns inga extra uppgifter.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

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

• Vilken utvecklingsmiljö använder du?
• Är du bekant med HTML, CSS och PHP sedan tidigare?
• Gick det smärtfritt att installera labbmiljön eller fick du bekymmer?
• Är du bekant med terminalen och Unix-kommandon sedan tidigare?
• Gick det bra att komma i gång med kursmomentet, var det lagom, för litet, för stort?
• Gjorde du någon av extrauppgifterna? Berätta om det arbetet isåfall.

#Revision history