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

(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 finns en längre beskrivning om kursens labbmiljö. Läs den om du är osäker på vad som skall göras, eller om detta är din första dbwebb-kurs.

Den korta varianten är att du behöver installera labbmiljön, uppdatera dbwebb-cli samt klona och initiera kursrepot.

# Gå till din katalog för dbwebb-kurser
dbwebb selfupdate
dbwebb clone htmlphp
cd htmlphp
dbwebb init

#Läs & Studera

(ca: 4-8 studietimmar)

#HTML & CSS

Läs följande för att bekanta dig med teknikerna.

1. Läs igenom följande sektion i guiden “Kom igång med HTML och CSS”.

   • Grunderna

2. Webbplatsen MDN innehåller referensdokumentation för HTML och CSS. Bekanta dig med MDN genom att kort och översiktligt kika på följande sidor, bara så du vet vilken information som finns där.

   • Learn web development
   • HTML: HyperText Markup Language
   • HTML reference
   • CSS: Cascading Style Sheets
   • CSS reference

#PHP

Läs följande för att bekanta dig med tekniken.

1. Läs igenom följande sektioner i guiden “Kom igång med programmering i PHP”.

   • Introduktion
   • Grunder och struktur

2. Det finns en videoserie som bygger på innehållet i guiden, kika gärna på den som ett komplement till guiden. Kika på de videor som är markerade “[Grunder]”.

   • Kom igång med programmering i PHP (2019)

3. I kursboken Webbutveckling med PHP och MySQL är följande kapitel relevanta att läsa igenom.

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

4. Bekanta dig kort med webbplatsen för PHP, bara så att du har varit där och ser hur den ser ut. Det som vi framförallt kommer att använda framöver är manualen för PHP, kika snabbt över dess innehållsförteckning så att du ser ungefär vad det handlar om. Du behöver inte studera något i detalj för tillfället.

#Videor

Det finns en samling videor som används i olika omfattning under kursens gång, du finner dem på Youtube.

#Ö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.

#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 eller har du kanske jobbat med liknande tekniker?
• Gick det bra att installera labbmiljön eller var det något som krånglade?
• Är du bekant med terminalen och Unix-kommandon sedan tidigare?
• Gick det bra att komma i gång med kursmomentet rent allmänt?
• Vilken är din TIL för detta kmom?

TIL är en akronym för “Today I Learned” vilket leksamt anspelar på att det finns alltid nya saker att lära sig, varje dag. Man brukar lyfta upp saker man lärt sig och där man kanske hajade till lite extra över dess nyttighet eller enkelhet, eller så var det bara en ny lärdom för dagen som man vill notera.

#Revision history