Kmom01: Kom igång med HTML, CSS och PHP

Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet.

#Kom igång med HTML, CSS och PHP

alternativt “Börja läsa boken, bekanta dig med labbmiljön och gör en me-sida”

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 webbplatser.

Resultatet av dagens övning skall laddas upp på driftservern och kan se ut som följande länk visar.

• http://dbwebb.se/htmlphp/me/kmom01/me.php

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.

Övningens upplägg är enligt följande:

1. Läsanvisningar (4-10h)
2. Övningar (4-10h)
3. Redovisning (1h)

Totalt omfattar kursmomentet ca 20 studietimmar. Du kan med fördel göra övningen i delar, 2-3 timmar per gång kan vara bra. Läs gärna igenom hela kursmomentet innan du börjar.

#Läsanvisningar inför kursmomentet

Se till att du har kurslitteraturen på plats. Varje kursmoment föregås av en läsanvisning.

#HTML & CSS: The Complete Reference

(fifth edition)

Detta är den huvudsakliga kurslitteraturen. Börja med att bläddra igenom boken och se hur den är strukturerad.

Läs följande kapitel.

• Part I, Ch 1: Traditional HTML and XHTML

Bläddra snabbt igenom följande kapitel, se vad kapitlet handlar om.

• Part II, Ch 4: Introduction to CSS

#Beginning HTML, XHTML, CSS and JavaScript

(1st edition)

Bläddra snabbt igenom följande kapitel. Läs översiktligt. Beroende på dina förkunskaper kan du välja att läsa mer detaljerat.

• Ch 1: Structuring Documents for the Web
• Ch 2: Links and Navigation

#Beginning PHP and MySQL 5, From Novice to Professional

(Fourth edition)

Läs snabbt och översiktligt följande kapitel:

• Ch 1: Introducing PHP (läs efter intresse)
• Ch 2: Configuring your environment (läs efter intresse)
• Ch 3: PHP Basics

#Nätet

Dessa används i olika omfattning under kursmomentet, använd dem som referens.

Wikipedia ger dig en översikt om HTML/HTML5 och CSS/CSS3.

• http://en.wikipedia.org/wiki/HTML
• http://en.wikipedia.org/wiki/HTML_5
• http://en.wikipedia.org/wiki/CSS
• http://en.wikipedia.org/wiki/CSS3#CSS_3

W3C driver standardiseringsarbetet. Ta en snabb titt på deras hemsida om webbdesign och applikationer.

• http://www.w3.org/standards/webdesign/

W3C har referensmanualer. Lär dig att hitta i dem. De är din bästa källa till korrekt information.

• HTML5: http://dev.w3.org/html5/spec/spec.html
• CSS2: http://www.w3.org/TR/CSS2/
• CSS3: http://www.w3.org/Style/CSS/current-work#CSS3

W3C har ett “cheatsheet” som snabbt ger dig information om HTML och CSS tag. Testa det. Det sparar tid.

• http://www.w3.org/2009/cheatsheet/

W3C validatorerna är viktiga verktyg för en webbutvecklare.

• HTML validator: http://validator.w3.org/
• CSS validator: http://jigsaw.w3.org/css-validator/
• HTML & CSS validator kombinerad: http://validator.w3.org/unicorn/

W3School har bra siter för HTML, CSS och PHP. De är enkla och bra att använda för referens, både för nybörjare och proffs.

• http://www.w3schools.com/html
• http://www.w3schools.com/html5
• http://www.w3schools.com/css
• http://www.w3schools.com/php/

PHP’s referensmanual ger oss all information vi behöver om PHP. Lär dig använda sökfunktionen för att hitta rätt PHP-funktioner.

• PHP-manualen: http://php.net/manual/en/index.php
• Kom igång med PHP: http://php.net/manual/en/getting-started.php

Wikipedia om PHP

• http://en.wikipedia.org/wiki/PHP

#Dagens övning startar här

Låt oss starta.

#1. HTML och CSS, PHP-skript och lite SQL

Denna kursen handlar om HTML och CSS. Kursen handlar också om PHP. PHP på ett skriptsätt. Integrerat i HTML-koden. Kursen handlar även om SQL och databaser. Att lagra viss information i databasen. För att ge webbplatsen mer dynamik. Dessutom handlar det om struktur och ordning och reda. Allt för att bygga välstrukturerade webbplatser. En struktur som går att återanvända. En struktur som går att kopiera och använda som grund när vi skapar nya webbplatser.

Ordning och reda, SQL, skriptbaserad PHP, och en rejäl genomgång av HTML och CSS. Det är ingredienserna till denna kursen.

Då kör vi.

Läs hela detta dokument, uppifrån och ned, gör som det beskrivs i dokumentet, stycke för stycke. Så är tanken. Vissa saker skall du själv koda, dessa benämns [UPPGIFT]. Vissa uppgifter är valbara, då står det [UPPGIFT VALBAR].

#2. Utvecklings- och driftmiljö

Först och främst behöver vi en miljö att jobba i. Låt oss börja med det. I denna kursen tänkte jag mig att vi jobbar mot en lokal miljö på våra egna datorer, när vi är klara så laddar vi upp en kopia till en driftsmiljö (www.student.bth.se). Det är ett vanligt sätt (ett av flera) att jobba med webbplatser.

[UPPGIFT]

Installera din egna lokala utvecklingsmiljö på din egna maskin.

• Installera webbläsare:
  http://dbwebb.se/kunskap/installera-webblasare

• Installera webbserver:
  http://dbwebb.se/kunskap/installera-en-egen-webbserver-for-utveckling

Du behöver inte installera MySQL om du inte vill, i denna kursen kommer vi att använda SQLite som databas. MySQL används i oophp-kursen.

• Installera en texteditor, jEdit:
  http://dbwebb.se/kunskap/installera-en-texteditor-jedit

• Flytta filer från den lokala utvecklingsmiljön till driftsmiljön med sftp.
  http://dbwebb.se/kunskap/flytta-filer-till-driftsmiljon-med-sftp-och-filezilla

Fint, då har vi en miljö för att utveckla och driftsätta webbplatser. Låt oss gå vidare och utveckla en enklare webbplats.

[UPPGIFT VALBAR]

• Skumläs lite mer om BTH’s labbmiljö, för dig som vill veta lite mer:
  http://dbwebb.se/kunskap/bth-s-labmiljo-for-webbprogrammering

#3. En webbplats om mig själv, min me-sida

I kursen används något som kallas för en me-sida. Me-sidan används för att presentera dig själv och för att redovisa kursmomenten. Låt oss börja med att skapa me-sidan, en webbplats om dig själv och för dina redovisningar.

Vi skall skapa HTML-koden, en extern stylesheet med CSS samt strukturera sidorna med hjälp av PHP. Dessutom vill vi bekanta oss med validatorer som hjälper att kontrollera att HTML- och CSS-koden är korrekt skriven. Vi vill snygga till webbplatsen med en logo och en navigeringsmeny.

En liten plan för dagen blir alltså följande:

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

Jobba med filerna lokalt och för sedan över den till driftsservern. När vi är klara med dagens övning så har du förhoppningsvis fått lite blodad tand på det som kursen handlar om.

#4. HTML och validator (me.php)

Då sätter vi tänderna i första punkten på listan.

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

#4.1 Grundstruktur med HTML

[UPPGIFT]

För att underlätta så tjuvstartar vi med en grundstruktur för HTML-koden. Grundstrukturen baseras på HTML5 och vi håller den så enkel det går. Iallafall tills vidare.

Skapa en tom sida, döp den till me.php. Fyll den med följande kod.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Me-sidan</title>
</head>
<body>
  <h1>htmlphp-me</h1>
  <p>Här kommer snart min egen fina me-sida.</p>
  <img src="img/me.jpg" alt="Bild på Mikael Roos">
</body>        
</html>

Använd denna grundstruktur när du gör dina sidor.

Leta reda på en fin bild på dig själv (me.jpg) och lägg den i en underkatalog som du döper till img.

Så här kan sidan se ut när du är klar.

• http://dbwebb.se/htmlphp/me/kmom01/try/me01.php

Bra. Då kan vi går vidare. Validerar sidan i validatorn tro?

#4.2 Validera enligt HTML5

[UPPGIFT]

För att kontrollera att det verkligen är HTML5 så kör vi den genom W3C’s HTML validator. Du når validatorn via följande länk.

• http://validator.w3.org/#validate_by_input

Kopiera in din HTML-kod, klicka på knappen och se vad som händer. Validerar din sida?

Ser bra ut hos mig.

Om du fick fel så försöker du rätta till felen. Läs vad varningarna betyder. Det är bra att ha lite koll.

#4.3 Länka till valideringsverktyget

[UPPGIFT]

För att förenkla framtida kontroller så lägger vi till en länk till validatorn, direkt i me-sidan. Det gör att vi hela tiden kan validera dokumentet med ett litet klick.

Skapa en footer till me-sidan och lägg in länken till validatorn där. Följande kod löser det.

  <hr>
  <div id="footer">
    <a href="http://validator.w3.org/check/referer">HTML5</a>
  </div>
</body>

För att det skall fungera måste din sida ligga på en webbserver som är publikt tillgänglig. Annars kommer validatorn inte åt din sida. Testa genom att ladda upp din me-sida till driftsmiljön.

Så här blev det för mig.

• http://dbwebb.se/htmlphp/me/kmom01/try/me02.php

Klicka på länken för att köra sidan i validatorn. Detta är ett mycket bra hjälpmedel. Kolla alltid med validatorn när du får problem. Det hjälper dig att hålla koll på din HTML-kod.

Du kan se källkoden till min me-sida på följande länk.

• http://dbwebb.se/htmlphp/me/kmom01/try/source.php?file=me02.php

#5. CSS och validator (me.php, stylesheet.css)

Bra, då stryker vi en punkt på listan och tar raskt tag i nästa.

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

#5.1 Styla me-sidan med CSS

[UPPGIFT]

Med CSS kan vi ge sidan färg och form. Vi kan styla HTML-elementen och bestämma var de skall visas på sidan och hur de skall se ut. CSS-koden lägger vi i en separat fil och länkar till den från HTML-koden.

Skapa en katalog som heter style och en fil som heter stylesheet.css. Lägg följande kod i filen.

html {background: #cc6666;}
body {
  margin: 8px auto;
  width: 934px;
  padding: 8px;
  background: #ffffcc;
  border: 1px dashed #000000;
  font-family: Georgia, serif;
  color: #333333;
}
h1 {
  text-transform: uppercase;
  border-bottom: 4px double #333333;
}
div#footer a {
  font: italic 0.8em Arial, Helvetica, sans-serif;
  text-decoration:none;
  color: #999999;
}
div#footer a:link    { }
div#footer a:visited { }
div#footer a:hover   { text-decoration:underline;  color: #333333; }
div#footer a:active  { }

Peka ut din stylesheet genom att lägga till följande kod i <head>-elementet i HTML-koden (me.php).

    <link rel="stylesheet" href="style/stylesheet.css">
</head>

Testa i din utvecklingsmiljö och ladda sedan upp allt till driftsmiljön. Så här blev det för mig.

• http://dbwebb.se/htmlphp/me/kmom01/try/me03.php

Visst kan man göra skillnad med en stylesheet och lite CSS-kod?

Källkoden till min variant av stylesheet.css och me.php hittar du via följande länkar.

• me.php:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me03.php
• stylesheet.css:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=style&file=stylesheet01.css

Bra, då tittar vi på validering av stylesheeten.

#5.2 Validering av CSS

[UPPGIFT]

W3C har en validator för CSS. Du når den via följande länk.

• http://jigsaw.w3.org/css-validator/

Ladda upp din sida på driftsserver och validera den genom att ge validatorn länken till din me-sida. Valideras din stylesheet?

Funkar för mig.

Bra. Om du får fel så försök rätta till det.

#5.3 Länka till valideringsverktyget

[UPPGIFT]

För att underlätta validering av sidorna så lägger vi till en direktlänk. På samma sätt som vi gjorde med HTML-validatorn. Lägg till följande länk i din footer.

<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

Din webbserver behöver vara publik för att det skall fungera. Ladda upp sidorna på driftsservern för att testa validatorlänken.

Så här blev det för mig.

• http://dbwebb.se/htmlphp/me/kmom01/try/me04.php

Testa att validera sidan genom att klicka på CSS-länken. Glöm nu inte att validera dina sidor med jämna mellanrum. Dessa valideringsverktyg är extra bra att använda för felsökning. Gör det.

#5.4 Unicorn, ett valideringsverktyg “to rule them all”

[UPPGIFT]

Det finns ett valideringsverktyg som kör både HTML och CSS testerna i en körning. Dessutom kan det köra ytterligare kompletterande tester. Länka även till detta verktyget från din me-sida. Via följande länkar kan du klura ut hur jag gjorde. Gör likadant.

• Länk till validatorn Unicorn: http://validator.w3.org/unicorn/
• Mos me-sida med Unicorn-länk: http://dbwebb.se/htmlphp/me/kmom01/try/me05.php
• Källkoden till mos me-sida med Unicorn-länk http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me05.php

Bra, nu har vi en grundstruktur och enkelt tillgång till valideringsverktygen. Se till att länken till Unicorn fungerar och att sidan validerar.

#6. Snygga till med en header, logo och meny

Då stryker vi ytterligare en punkt och går raskt vidare med nästa.

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

#6.1 Gör en header till din me-sida

[UPPGIFT]

En webbplats innehåller ofta en header med en logo, titel på siten och en navigeringsmeny. Visst vore det trevligt om vår me-sida även innehåll detta?

Låt oss fixa till en header, innan vi går vidare. Följande kod hjälper oss på vägen.

HTML-kod:

<!-- Header -->
<div id="top">
    <img src="img/logo.png" alt="htmlphp logo" width=300 height=70>
</div>
<!-- Navigeringsmeny -->
<nav class="navmenu">
    <a href="me.php">Me</a>
    <a href="report.php">Redovisning</a>
</nav>

CSS-kod:

/* header --------------------------------------------------------
 */
div#top {}

/* navigation menu -----------------------------------------------
 */
nav.navmenu {
    display: block;
    padding: 0.2em 1em 0 1em;
    background: #ffcc99;
    border-bottom: 2px solid #999999;
}
nav.navmenu a {
    padding: 0.3em 1em 0 1em;
    color: #555555;
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration:none;
}
nav.navmenu a:link    { }
nav.navmenu a:visited { }
nav.navmenu a:hover   { color: #111111; background: #999999; }
nav.navmenu a:active  { }

Du kan ordna en egen logo-bild eller bara låna min så länge. Ladda ned logo-bilden genom att högerklicka på den och välj “Spara bild som…”.

Så här blev det för mig.

• http://dbwebb.se/htmlphp/me/kmom01/try/me06.php

Glöm inte att kolla om sidan validerar. Du hittar min källkod på följande länkar.

• Me-sidan version 06:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me06.php
• Stylesheeten version 02:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=style&file=stylesheet02.css

Bra. Nu börjar det likna något. Då är vi redo att strukturera sidorna med PHP.

<!-- text som är en vacker kommentar -->

/* text som är en vacker kommentar */

#7. PHP (header.php, footer.php)

Bra, då stryker vi ytterligare en punkt på listan och tar raskt tag i nästa.

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

#7.1 Grundstruktur med PHP

Då har vi en grundstruktur på vår webbsida. Det är snart dax att göra en sida för redovisningstexterna (report.php). Men, innan vi gör det så skall vi strukturera lite. Ska vi bara kopiera me.php eller finns det ett bättre (och enkelt) sätt? Vissa delar av me-sidan innehåller information som gäller för hela webbplatsen (header och footer) och vissa delar är specifik för respektive sida. Kan vi använda PHP för att få en bra struktur på detta? Vi vill ju bara ändra på ett ställe när vi lägger till ny information? Vi vill verkligen inte sitta och ändra samma sak i flera filer.

Ett vanligt sätt är att lägga viss information i en sida som heter header.php och viss information i en sida som döps till footer.php. Dessa sidor kan sedan inkluderas när de behövs.

För att komma igång så visar jag hur man kan göra.

#7.2 Dela upp me.php i 3 delar

En snabb och enkel uppdelning av me.php, header.php och footer.php kan se ut som följer.

• Orginalet: http://dbwebb.se/htmlphp/me/kmom01/try/me06.php

Den övre delen av koden från me.php flyttas till filen header.php, inklusive logo och navigationsmenyn. Den nedre delen av filen me.php flyttas till filen footer.php. Jag väljer att skapa en ny underkatalog incl och lägger både header.php och footer.php i den katalogen. Det får bli en egen katalog för filer som inkluderas.

Med hjälp av PHP-konstruktionen include() så inkluderas header.php och footer.php i me.php.

<?php include("incl/header.php"); ?>

<?php är starttag för PHP-kod, ?> är sluttag. Allt mellan taggarna betraktas och hanteras som PHP-kod. Det är webbservern som parsar PHP-koden innan den lämnar ifrån sig den resulterande HTML-sidan.

Resultatet finns att skåda här (källkoden). Kolla källkoden i alla tre sidorna.

• Källkoden till me.php
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me07.php
• Källkoden till header.php
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=incl&file=header.php
• Källkoden till footer.php
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=incl&file=footer.php

Tekniskt funkar sidan som tidigare. Resultatet i webbläsaren blir precis som tidigare. Det är bara den bakomliggande strukturen av filer på servern som ändrades. Sidan finns att provköra på följande länk.

• http://dbwebb.se/htmlphp/me/kmom01/try/me07.php

[UPPGIFT]

Dela upp din sida på ovanstående sätt. Är du klar? Bra, då kan vi fortsätta.

#8. En sida för redovisningar (report.php)

Bra, då stryker vi ytterligare en punkt på listan och tar raskt tag i nästa.

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

#8.1 Testa grundstrukturen, fungerar den?

[UPPGIFT]

Då gör vi en ny sida genom att kopiera me.php. Döp sidan till report.php. Det är denna sidan som är till för dina redovisningstexter.

Så här blev det för mig. Klicka på menyvalet “Redovisning” så hamnar du på den nya sidan.

• http://dbwebb.se/htmlphp/me/kmom01/try/report01.php

Det blev bra va? Strukturen av källkoden till me-sidan och till redovisningssidan är densamma. Dubbelkolla genom att titta på källkoden.

• Me-sidan
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me08.php
• Redovisningssidan
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=report01.php

Du glömmer inte att validera sidorna va? Bra, men det finns ett litet bekymmer. Titeln på sidorna är samma. Den titel som visas överst i webbläsarens fönster, den titel som finns i HTML-elementet <title> i header.php. Det är inte bra. Låt se om det går att hantera med PHP.

#8.2 Variabel i PHP för att byta titel

[UPPGIFT]

Varje sida skall ha en egen beskrivande titel. Själva titeln sätts i HTML-elementet <title> i header.php. Men, det är ju me-sidan eller redovisningssidan som vet vilken titel det skall vara. Detta kan vi lösa med en variabel i PHP. Vi skapar en PHP-variabel $title som skall innehålla sidans titel. Vi ger variabeln ett värde i me.php respektive report.php. Därefter skriver vi ut variabelns värde i filen header.php. Låt mig visa hur man gör. Gör sedan likadant i dina egna filer.

I me.php definerar vi en variabel ($title) och tilldelar den sidans titel (“Min Me-sida om mig själv”). Alla PHP-uttryck skall avslutas med ett semikolon.

me.php

<?php
$title = "Min Me-sida om mig själv";
?>

• Källkod:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me09.php

Samma sak gör vi i filen report.php. Här använder vi en annan titel på sidan.

report.php

<?php
$title = "Mina redovisningar av kursmomenten";
?>

• Källkod:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=report02.php

I header.php skriver vi ut värdet av variabeln $title enligt följande.

Byt ut raden som innehåller nuvarande title-taggen mot PHP-kod som skriver ut värdet på variabeln $title.

Ursprunglig kod:

  <title>Me-sidan</title>

Ny kod:

  <title><?php echo $title; ?></title>

• Källkod:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=incl&file=header02.php

Du kan testa min lösning på följande länk.

• http://dbwebb.se/htmlphp/me/kmom01/try/me09.php

Bra jobbat. Se till att din egna me-sida klarar av detta och att den validerar. Glöm inte att validera.

#8.3 Felmeddelande i PHP

[UPPGIFT]

När webbservern processar PHP-koden kan den hitta fel och då skrivs ett felmeddelande ut. Felmeddelande i PHP kan vara av olika typer och ha olika grad av allvarlighet. Beroende på om det är en utvecklingsserver eller en driftsserver så brukar man konfigurera PHP att visa olika meddelanden. På driftsservern www.student.bth.se visas inte felmeddelande av typen NOTICE. Det är rätt vanligt att det är så på en driftsserver. Det är alltid bra att ha kontroll över vilka felmeddelanden som skrivs ut. Och framförallt att de verkligen skrivs ut.

Följande bilder visar på två vanliga felmeddelanden. Kan du klura ut vad de beror på? Svaren står i slutet av stycket.

• http://dbwebb.se/htmlphp/me/kmom01/try/me10.php

Kan du hitta felet genom att läsa felmeddelandet och studera källkoden?

• Källkoden:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me10.php

Svaret finner du längre ned i stycket.

Här kommer ett felmeddelande till, lite klurigare att se själva felmeddelandet (tips, titta i fliken där sidans titel brukar visas).

• http://dbwebb.se/htmlphp/me/kmom01/try/report03.php

Kan du hitta felet genom att läsa felmeddelandet och studera källkoden?

• Källkod:
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=report03.php

I sista exemplet kan det vara lite svårt att se felmeddelandet. I de fallen kan det vara bra att studera den HTML-kod som genererats. Högerklicka på webbläsaren och välj “Visa källkod…”. Kan du se felmeddelandet nu?

Hittade du felen? Följande rader var ändrade och gjorde att felet inträffade. Studera raderna och se om felmeddelandet stämde. Kom sedan ihåg. Felmeddelandena stämmer ofta. Ibland är det bara lite klurigt att hitta anledningen till dem.

Felet i me10.php. Anledningen är ett försök att inkludera en fil som inte finns.

<?php include("incl/nofooter.php"); ?>

Felet i report03.php. Anledningen är ett felaktigt variabelnamn, borde varit $title.

<?php
$notitle = "Mina redovisningar av kursmomenten";
?>

Det kommer att bli fler felmeddelanden innan kursen är slut, tro mig.

#8.4 Ta kontroll över felmeddelanden

[UPPGIFT]

Med PHP-funktionen error_reporting() går att ställa in vilka felmeddelanden som visas, oavsett hur PHP är konfigurerat på servern. Ett bra sätt är att lägga anropet i en egen fil, det blir då enkelt att ändra.

För detta syfte skapar vi en ny fil, incl/config.php. Följande PHP-kod stoppar vi in i filen.

<?php
error_reporting(-1);

Nu behöver vi inkludera denna fil i me-sidan respektive redovisningssidan. I följande exempel är detta gjort.

• Testkör me-siten.
  http://dbwebb.se/htmlphp/me/kmom01/try/me11.php
• Källkod till me-sidan (samma ändring är gjord i redovisningssidan)
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=&file=me11.php
• Källkod till config.php
  http://dbwebb.se/htmlphp/me/kmom01/try/source.php?dir=incl&file=config.php

Bra, ordning och reda. Felmeddelanden kommer vi ha stor nytta av framöver. Det är ett av de viktigaste verktygen för felsökning.

Vi börjar närma oss slutet för detta kursmoment.

#9. Snygga till och gör färdigt

Bra, då stryker vi ytterligare en punkt på listan och tar tag i den sista punkten på listan.

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

#9.1 Gör klart me-sidan

[UPPGIFT]

Nu återstår bara att göra klart din me-site och stoppa in lite information. Skriv en enklare presentationstext om dig själv. Så här blev det för mig.

• http://dbwebb.se/htmlphp/me/kmom01/me.php

Du behöver inte skriva lika mycket text som jag gjort. Skriv något som gör att lärarna och dina medstudenter kan se vem du är.

#9.2 Gör klart redovisningssidan

[UPPGIFT]

Redovisningssidan skriver du senare. Det är det sista du gör i varje kursmoment.

#9.3 Länka till source.php

[UPPGIFT]

I detta kursmomentet har vi använt PHP-filen source.php för att visa källkodsexemplen. För att det skall vara enkelt att hjälpa till med felsökning så är det viktigt att du har en kopia av source.php i din katalog. Behöver du hjälp så kommer den som hjälper dig att vilja titta på din källkod.

Du kan hämta kopian av source.php via följande länk.

• https://github.com/mosbth/Utility/blob/master/source.php

Ta koden och lägg den i en fil som du döper till source.php. Lägg source.php i samma katalog som du lägger me.php och report.php. Se till att länka till source.php i din footer. Som du kan se så har jag gjort det i min senaste variant av me-sidan.

• htmlphp/me/kmom01/me.php
• htmlphp/me/kmom01/source.php

#10. Avslutningsvis

Det är alltid skönt att stryka den sista punkten på listan.

1. HTML och validator (me.php)
2. CSS och validator (me.php, stylesheet.css)
3. Header med logo och meny
4. PHP (header.php, footer.php)
5. En sida för redovisningar (report.php)
6. Snygga till och gör färdigt

Hoppas att detta gav dig lite mersmak för dessa tekniker och hur de kan samverka när vi bygger webbplatser. I kommande kursmoment får vi mer tid att gå igenom teknikerna lite mer grundligt. I kursen kommer du ha en hel del nytta av kurslitteraturen. Många av svaren på dina frågor finner du där.

Fixa nu till din redovisningssida enligt instruktionen nedan och ladda upp din me-sida till driftsmiljön.

www/htmlphp/kmom01
            kmom02
            kmom03
            kmom04
            kmom05
            kmom06
            kmom10

#Redovisning

1. Läs kurslitteraturen inför kursmomentet.
2. Genomför momentets alla steg.
3. Skriv redovisningen på din me-sida. Skriv ett stycke (ca 15 meningar) om hur momentet funkade. Reflektera över svårigheter/problem/lösningar/resultatet, etc. Beskriv vilket operativsystem du sitter på och vilken/vilka webbläsare du normalt använder. Berätta även vilken utvecklingsmiljö du använder (editor, sftp-klient, etc). Om du använder den som rekommenderas så räcker det att säga det.
4. Kopiera texten och lämna in den på redovisningen (ITs) tillsammans med en länk till din me-sida. Läraren kommer snabbt kolla igenom dem. Betyg är G (godkänd) eller komplettera (komplettera -> gör om -> gör bättre). Betyget baseras på din redovisningstext samt att din me-sida fungerar.
5. Ta ytterligare en kopia av redovisningstexten och gör ett inlägg i forumet. Visa upp vad du gjort och berätta att du är klar. Lämna en länk till din me-sida.

#Revision history