85
729G28 Webbprogrammering och databaser Översikt Anders Märak Leffler Institutionen för datavetenskap 2013-11-22

729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

729G28 Webbprogrammering och databaser

Översikt

Anders Märak Leffler

Institutionen för datavetenskap

2013-11-22

Page 2: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Idag

• Introduktion till XHTML.

• Introduktion till CSS.

• Introduktion till PHP.

• Och enklare databaskopplingar.

2

• Något om hur man strukturerar kod.

Page 3: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Dagens mål är inte

Att ge

• en heltäckande bild av språken (omöjligt på 2h)

• ren utantillkunskap.

• allmän programmeringskunskap.

3

• ingående om objektorientering och dylikt.

Page 4: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Dagens mål är

Att ge

• en grund att fortsätta med under projektet.

• känsla för hur de olika delarna fungerar.

• struktur- och kodexempel.

4

• varningar om fällor på nätet.

• information att återvända till.

Page 5: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Allmänt om XHTML

• Strukturera och formattera saker för webben.

• Vår ordning:

• Tala om vad det är.

• Vad innehåller sidan?

• Beståndsdelar.

5

• Beståndsdelar.

• Tabeller.

• Formulär.

MARKERINGSYTA FÖR BILDER

När du gör egna slides, placera bilder och andra illustrationer inom dessa fält. Titta gärna i "baspresentationen" för exempel på hur placeringen kan göras.

Page 6: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Vad är detta? (tekniskt)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang ="sv" lang="sv">

<!-- Kod här -->

</html>

6

• Åt webbläsaren:

• tolka detta som XHTML 1.0 Transitional

• + en teknisk beskrivning (DTD:n)

• (+angivande av namnrymd)

Page 7: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Vad är detta? (head)<html xmlns="http://www.w3.org/1999/xhtml" xml:lang ="sv"

lang="sv">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="keywords" content="tv-serier,..." />

<meta name="description" content="De bästa TV-serierna, recenserade av en mästare" />serierna, recenserade av en mästare" />

<title>TV-serier vi minns</title>

</head>

...

</html>

7

• Hur kodas vår text? (så att åäö med mera blir rätt)

• title – Vad syns längst upp i webbläsaren?

• Metadata – för sökmotorer med flera.

Page 8: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Innehåll

<!DOCTYPE ... >

<html ...>

<head> ... </head>

<body>

<h1>TV-serierna!</h1>

<p>Välkommen till min sida!</p>

</body></body>

</html>

8

• <body></body> – Allt mellan taggarna är sidkropp

• <h1></h1> – rubrik, nivå 1

• <p></p> – paragraph. Textstycke.

Page 9: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

9

Page 10: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Om struktur

• Mönster: <p> ... </p>. Här börjar och slutar stycket.

• Självslutande: <br />, <meta ... />

• Vanlig källa till att dokument ej validerar.

• Varning! Kolla kodexempel från nätet: gamla HTML

10

tillät t ex <br>, utan /.

Page 11: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Om struktur (2)

• Skilj på struktur ("detta är ett stycke") och utseende ("vi vill ha luft innan och efter detta")!

• <h1>...</h1> är inte "stor text", det är rubrik nivå1.

• Tänk formatmallar.

11

Page 12: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Praktiska taggar

• <p></p> - stycke

• <h1></h1>, h2, h3... Rubriknivåer

• <a href="..." >...</a>

• <br /> radbrytning.

• <img src="..." title="..." alt="..:" /> - bild.

12

• <img src="..." title="..." alt="..:" /> - bild.

• <div>...</div> - division. Strukturmarkering (se CSS).

• <span>...</span> - span. Strukturmarkering (se CSS)

• ...och mycket mer.

Page 13: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Tabeller<table border="1">

<tr>

<th colspan="2">TV-serierna, hela listan</th>

</tr>

<tr>

<th>Serie</th>

<th>Betyg</th>

</tr>

<tr>

<td>The West Wing</td>

<td>5</td>

</tr>

</table>

13

Page 14: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Tabeller• <table></table> - detta är en tabell

• <tr></tr> - detta ingår på en rad i tabellen

• <th></th> - heading

• <td></td> - data

• Leta på nätet efter egenskaper.

14

• Leta på nätet efter egenskaper.

Page 15: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

15

Page 16: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Formulär

<form action="sida" method="post">

...

</form>

• När formuläret skickas, vart ska det skickas?

16

• Med vilken metod? POST/GET

• GET – skicka över URL. Rekommenderas ej.

Page 17: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

input: text, radio

<form action="sida" method="post">

<p>Namn: <input type="text" name="namn" /> </p>

<p>Glad?<br />

<input type="radio" name="trott" value="1" />Ja<br/ >

<input type="radio" name="trott" value="0" />Nej<br />

</p>

</form></form>

17

• text – inmatningsruta, fritext.

• Fältet kallas "namn". Nås senare (se PHP).

• radio – flera alternativ, välj ett.

• Allt kan anpassas – se dokumentation.

Page 18: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

select

<form action="sida" method="post">

...

<p>Jag läser <br />

<select name="program">

<option value="mat">Matematik</option>

<option value="kog" selected>KogVet</option>

<option value ="ovr"> Övrigt</option><option value ="ovr"> Övrigt</option>

</select>

</p>

</form>

18

• Flervalsmeny. Resultatet blir ett värde för fältet "program".

Page 19: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

input: checkbox

<form action="sida" method="post">

...

<p>Jag gillar <br />

<input type="checkbox" name="gillar" value="westwin g" />The West Wing<br/>

<input type="checkbox" name="gillar" value="firefly " />Firefly<br/>

<input type="checkbox" name="gillar" value="snuggle s" />Dr Snuggles<br/>

</p>

...

</form>

19

• Flerval/kryssrutor. Flera svarsalternativ möjliga.

Page 20: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

20

Page 21: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Allmänt XHTML

• Inte indenteringskänsligt (som Python med tab). Försök skriva tydligt ändå.

• Öppnar ni en tag (<b>), slut den också (</b>)!

• Lämna mycket formattering åt CSS.

• Återigen: strukturmarkeringar, inte hur-det-ser-ut.

21

Page 22: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Cascading style sheets (CSS)

• Anger hur det ser ut.

• Gör att man kan byta skepnad på sida snabbt.

• Vår ordning:

• Att formattera taggar.

22

• Att formattera taggar.

• Klasser och id.

• Att lyfta ut formatmallar.

Page 23: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Grundformattering<style type="text/css">

h1 {font-family: tahoma, arial, verdana;

font-size: large;

color: #FF0000;

border-width: 1pt;

border-style: dotted;

border - color: #000000;border - color: #000000;

margin-left: 5pt;

margin-right: 5pt;

padding-left: 5pt;

}

</style>

23

Page 24: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

24

Page 25: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Mer specifika egenskaper<style type="text/css">

h1 {...}

P { font-family: times; }

.viktig { font-weight: bold; color: #00FF00; }

#introparagraph { color: #0000BB; }

</style>

...

25

• Egenskaper åt allt av viss klass, .viktig.

• Egenskaper åt allt med visst (unikt) id, #introparagraph

• Kombinationer möjliga:

• h1.viktig (enbart för h1 med class="viktig")

• h1#uniktid (för h1 med id="uniktid")

...

<p class="viktig" id="introparagraph">Välkomna till min sida!</p>

Page 26: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

26

• viktig-klassen, så det borde vara fetstilt och grön text

• introparagraph-id har högre prioritet, så blå text istället.

• Cascading style sheets. Se arv av egenskaper.

Page 27: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Att lyfta ut CSS<head>

...

<link href="style/stil.css" rel="stylesheet" type="text/css" />

</head>

Där stil.css (i style-underkatalogen) innehåller exakt det som stod mellan <style ...> och </style>

27

• Bra idé: gör just mallar till mallar.

• Inga <style...>-behov, klipp-klistra.

• Slippa uppdatera alla filer vid ändring.

• Krav i slutinlämningen.

Page 28: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Att lyfta ut CSS (2)<head>

...

<link href="style/stil_skarm.css" rel="stylesheet" type="text/css" media="screen"/>

<link href="style/stil_proj.css" rel="stylesheet" type="text/css" media="projection"/>

<link href="style/stil_mobil.css" " rel="stylesheet " type ="text/css" media ="handheld"/>

28

• Olika utseende beroende på användningssätt.

• Påverkar bara presentation, inte innehåll (eller hur mycket data som måste laddas ned).

• Inte krav i denna kurs.

type ="text/css" media ="handheld"/>

</head>

Page 29: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Allmänt CSS

• Inget krav att ha både klass och id.

• Fundera på tag/klass/egenskap. Återkommer formatteringsbehovet mellan sidor?

• Användbart: <div></div> och <span></span>.

• Också standardiserat. Behöver valideras.

29

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

• Leta på nätet efter egenskaper. W3Schools bra resurs för CSS.

• Googla.

http://www.csszengarden.com.

Page 30: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

PHP – En översikt

• Generera webbsidor dynamiskt.

• Ordning:

• PHP-intro.

• PHP och XHTML i blandning.

• Automatisera.

30

• Automatisera.

• Arrayer.

• Upprepningar av olika slag.

• Vilket bygger upp mot:

• PHP+MySQL.

• Kodstruktur

Page 31: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

PHP

• Skriptspråk.

• Körs på serversidan (användaren ser ej koden).

• Filändelse .php – PHP-tolk körs först.

• Kan bäddas in i HTML. <?php ... ?>, om filnamn rätt.

31

Page 32: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Hello world<body>

<?php

$namn = "Katten ’Tesco’";

$fodd = 2004;

$alder = 2013 - $fodd;

$fodd = $namn;

print "<h1>Hej {$namn}</h1>";

32

print "<p>Du är " . $alder . "</p>.";

?>

</body>

Här har vi bara klippt ut body-delen. Man behöver såklart hela <!DOCTYPE ...

Page 33: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

33

Page 34: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Hello world (kommenterad)$namn = "Katten ’Tesco’";

$fodd = 2004;

$alder = 2013 - $fodd;

$fodd = $namn;

print "<h1>Hej {$namn}</h1>";

print "<p>Du är " . $alder . "</p>.";

34

• Variabelnamn börjar med $.

• De kan innehålla vad som helst (som i Python).

• Kan använda ’ inuti " " och vice versa. (jfr \", \’ )

• Kompakt: print ’xyz {$variabel} asd’

• Tydligare: print ’xyz’ . $var . ’asd’ (punkt betyder konkatenera/slå ihop)

Page 35: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Överkurs (för programmerare)$namn = "Katten ’Tesco’";

$fodd = 2004;

$alder = 2013 - $fodd;

$fodd = $namn;

print "<h1>Hej {$namn}</h1>";

print "<p>Du är " . $alder . "</p>.";

• Dynamiskt, ej statiskt ($fodd var tal, sedan sträng).

35

• Dynamiskt, ej statiskt ($fodd var tal, sedan sträng).

• Svagt typat, inte inferens modell Haskell (se funk.).

• Allmänt call-by-value (kontrast: Java).

• $alder = 2013 – 2004 = 9. Att $fodd är ”... ’Tesco’" när vi försöker skriva ut $alder spelar ingen roll.

• Referenser finns. http://www.php.net/manual/en/language.references.php.

Page 36: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Felutskrifter

• PHP ignorerar ofta varningar.

• Ex: användande av odefinierade variabler kan

<?php

ini_set('display_errors',1);

error_reporting(E_ALL);

?>

36

• Ex: användande av odefinierade variabler kan ge märkliga runtime-fenoment.

• Kod ovan slår på felrapportering.

• Fortfarande inget hinder mot "blanka" sidor.

http://php.net/manual/en/function.error-reporting.php

Page 37: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Hello world (med felhantering)<?php

ini_set('display_errors',1);

error_reporting(E_ALL);

?>

<body>

<?php

$namn = "Katten ’Tesco’";

37

$fodd = 2004;

$alder = 2013 - $fodd;

$fodd = $namn;

print $odefinierad_variabel; // <-- Nytt

print "<h1>Hej {$namn}</h1>";

print "<p>Du är " . $alder . "</p>.";

?>

</body>

Page 38: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

38

Page 39: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Att blanda PHP och XHTML<table border="1">

<tr><th colspan="2">TV-serierna, hela listan</th>

</tr>

<tr><th>Serie</th> <th>Betyg</th> </tr>

<?php

print '<tr>

<td>The West Wing</td>

39

<td>5</td>

</tr>';

?>

</table>

• OBS! Flera rader i strängen (inga krav på \, som i Python)

Page 40: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Samma sak i större skala<?php

print '<tr>

<td>The West Wing</td>

<td>5</td>

</tr>';

print '<tr>

<td>Firefly</td>

40

<td>Firefly</td>

<td>4</td>

</tr>’;

?>

• Ingen vinst än så länge.

• Klipp-klistra-programmering.

• Identifiera gemensamt mönster!

Page 41: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Samma sak i större skala (2)<?php

print '<tr>

<td> The West Wing </td>

<td> 5</td>

</tr>';

print '<tr>

<td> Firefly </td>

41

<td> Firefly </td>

<td> 4</td>

</tr>’;

?>

• Det gemensamma mönstret i utskrifterna har identifierats.

• Idé: funktion som utför det mönstret.

Page 42: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Samma sak i större skala(3)<?php

$namn = 'The West Wing'; $betyg = 5;

print '<tr>

<td>' . $namn . '</td>

<td>' . $betyg . '</td>

</tr>';

$namn = 'Firefly'; $betyg = 4;

42

$namn = 'Firefly'; $betyg = 4;

print '<tr>

<td>' . $namn . '</td>

<td>' . $betyg . '</td>

</tr>’;

?>

Page 43: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Funktioner<?php

// Formatterar tv-programsnamn och betyg

function format_show($namn, $betyg) {

return '<tr>

<td>' . $namn . '</td>

<td>' . $betyg . '</td>

</tr>';

43

}

?>

• Jämför "def format_show(namn, betyg):" i Python.

• Funktionen innehåller allt inom måsvingarna { }. (jfr indentering/"tabbar" i Python)

• return skickar tillbaka returvärdet.

• Kommentera! (// enradskommentar , /* ... */ flera)

Page 44: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Funktionen in action<?php

// Formatterar tv-programsnamn och betyg

function format_show($namn, $betyg) {

return '<tr>

<td>' . $namn . '</td>

<td>' . $betyg . '</td>

</tr>';

44

}

print format_show('The West Wing', 5);

print format_show('Firefly', 4);

print format_show('Dr Snuggles', 99999);

?>

• Anm. vi kunde också lagt print inuti funktionen.

Page 45: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

45

Page 46: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Överkurs: Synlighet för variabler

• Hur lokala variabler syns (scope) liknar Python3 lite.

• ...men inte exakt. global-statement.

• static-variabler.

• Läs dokumentationen!

46

• Läs dokumentationen!

http://www.php.net/manual/en/language.variables.scope.php

Page 47: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Arrayer$betygstabell[’The West Wing’] = 5;

$betygstabell[’Firefly’] = 4;

$betygstabell[’Dr Snuggles’] = 99999;

print $betygstabell[’Firefly’];

• Väldigt viktig datatyp när man sysslar med

47

http://php.net/manual/en/language.types.array.php

• Väldigt viktig datatyp när man sysslar med PHP+SQL.

• $arraynamn[ -nyckeln- ] = värdet.

• Fungerar lite som dictionary i Python.

• Testa print_r($arraynamn).

Page 48: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Arrayer + foreach<?php

$betygstabell[’The West Wing’] = 5;

$betygstabell[’Firefly’] = 4;

$betygstabell[’Dr Snuggles’] = 99999;

foreach ($betygstabell as $betyg) {

print $betyg . ’<br />’;

}

48

}

?>

• Python: gå igenom nycklarna i dictionaryt:for nyckel in betygstabell:

print(betygstabell[nyckel])

• PHP: gå genom värdena i arrayen.

Page 49: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

49

Page 50: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Att få med nyckel+data<?php

$betygstabell[’The West Wing’] = 5;

$betygstabell[’Firefly’] = 4;

$betygstabell[’Dr Snuggles’] = 99999;

foreach ($betygstabell as $program => $betyg ) {

print 'Program: ' . $program . ' har fått betyg ' . $betyg . '<br />';

50

}

?>

Page 51: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

51

Page 52: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Fler loopar: for<?php

$i = 123;

print 'Innan var värdet på $i: ' . $i . '<br/>';

for ($i = 0; $i < 3; $i++) {

print 'Varv ' . $i . '.<br />';

}

52

}

print 'SLUT! <br/>';

print 'Efteråt var värdet på $i: ' . $i . '<br/>';

?>

Page 53: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

53

Page 54: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

for nedbrutetfor ($i = 0; $i < 3; $i++) {

print 'Varv ' . $i . '.<br />';

}

• Sätt $i = 0.

• Kör ett varv om ($i < 3).

54

• Kör ett varv om ($i < 3).

• I slutet av varje varv, räkna upp $i med 1.

• I exemplet: sista varvet är $i = 2, vi kör print-raden, räknar upp $i till 3.

Page 55: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Överkurs (för programmeraren)

• Notera: $i är 3 efteråt (inte 2, som sista hela loopvarvet).

• Liknar C++-loopar lite.for (sätt variabel; villkor; uppdatera variabel) {

gör saker;}

• Viktig skillnad/fallgrop: loopvariabeln behåller sitt värde efteråt!• Viktig skillnad/fallgrop: loopvariabeln behåller sitt värde efteråt!

• $i var 123 innan, men skrevs över.

• Detta är precis som i Python.elem = 123

for elem in [0,1,2]:pass

print(elem) # Ger 2

55

Page 56: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Sista loopslaget: while$i = 0;

while ($i < 3) {

print 'Varv ' . $i . '.<br />';

$i++;

}

56

• Sätt $i = 0.

• Om $i < 3, kör ett varv. Pröva sedan igen.

• I slutet av varje varv, räkna upp $i med 1.

• Ger samma resultat som for-loopen ovan.

• Användbart i PHP+SQL!

Page 57: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Val (if)$i = 1500;

print 'Talet ' . $i . ' är ';

if ($i < 1000) {

print ' litet';

} else if ($i < 2000) {

print ' medelstort';

} else {

57

} else {

print ' jättestort!';

}

• Jämför Pythons if – elif – else.

• Måsvingar istället för indentering/tab.

• Vanlig fallgrop: krav på parenteser kring villkoret!

Page 58: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

58

Page 59: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

if i PHP+XHTML <?php

$i = 1500;

if ($i < 1000) {

?>

<h1>De små talen</h1>

<p>Matematiskt betraktas tal under 1000 som små...< /p>

<?php

59

<?php

} else {

?>

<h1>De stora talen</h1>

<p>Gratulerar! De stora talen är de viktigaste tale n.</p>

<?php

}

?>

Page 60: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

60

Page 61: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

if i PHP+XHTML

• Blandningen av (X)HTML och PHP helt tillåten.

• Man slipper skriva mängder print i PHP.

• PHP körs på serversidan.

• Det som inte finns med i "rätt" if-gren ignoreras.

• => Kan göra sidor som ser olika ut beroende på om man är inloggad • => Kan göra sidor som ser olika ut beroende på om man är inloggad eller ej.

61

Page 62: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

if i PHP+XHTML (2)

Potentiella felkällor

• Missade ?> och <?php.

• Missade slut-måsvingar efter sista fallet.

• Felaktiga måsvingar i PHP-delen överlag.

• Första grovfelsökning: • Första grovfelsökning:

• Om du kan dölja all HTML, är det giltig PHP då?(vissa editorer, modell Notepad++ kan detta)

62

Page 63: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

PHP och formulär

• Kan ta mot formulärdata.

• Formulärdata hamnar i array $_POST eller $_GET.

• $_GET innehåller information skickad via URL modell

.../minsida.php?namn=andma54&secret_passwd=1234

• Kan även hämtas med $_REQUEST.

63

Page 64: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

PHP och formulär

• isset($_POST[’fält’]) är sann om fältet har värde, annars ej.

• Ingen garanti för att indata är bra/av rätt typ.

64

Page 65: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

$_POST<?php

if (isset($_POST['tal'])) {

if (is_numeric($_POST['tal'])) {

$i = $_POST['tal'];

print '<p>Du matade in talet ' . $i . ' - ett särdeles bra tal.</p>';

} else {

65

print '<p>Det var inget tal</p>';

}

}

?>

<p>Mata in ett tal!</p>

<form action="" method="post"> <!-– Action denna sida-->

<input type="text" name="tal" />

<input type="submit" name="submit" />

</form>

Page 66: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

66

Page 67: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

67

Page 68: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

68

Page 69: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

PHP och databaser

• Mycket vanligt att använda PHP+MySQL-databas.

• Kräver PHP-extension (färdiginstallerat här).

• API - hur talar PHP med databassystemet?

• Standardvarianter: mysql, PDO, mysqli

• mysql vanligt förr. Fungerar för närvarande här. Gott om • mysql vanligt förr. Fungerar för närvarande här. Gott om exempel på nätet.

• ext/mysql försvinner efter PHP 5.5.0.

69

http://www.php.net/manual/en/mysqlinfo.api.choosing.php

Page 70: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

mysqli

• MySQLi på databassidan – nya ("nya") features.

• mysqli-API i PHP – lite snyggare.

• I princip likadant på den här nivån.

• Varning: kolla om exempel från böcker/internet använder funktioner som börjar på mysql_. De ska börja på mysqli_.

• I praktiken inget problem att översätta.

70

http://www.php.net/manual/en/ref.mysqli.php

Page 71: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Koppla upp sig$db = new mysqli("localhost", "andma54", "lösenord" ,

"andma54");

• Skapa nytt mysqli -objekt med databaskopplingen.

• Queries körs med $db->query( <queryn>);

71

• Fånga resultatet (ett mysqli_result –objekt).$resultat = $db->query(’select * from ’ . $valdtabell . ’;’);

• Använd det.

• Stäng det (frigör minne). $resultat->free();

Page 72: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Hämta resultat<?php

$db = new mysqli("localhost", "andma54", "lösenord" , "andma54");

$res = $db->query('select * from jbsupplier;');

while ($row = $res->fetch_assoc()) {

print_supplier($row);

}

72

$res->free();

?>

• Nytt: hämta nästa rad så länge som det går. Spara varje rad i $row.

• print_supplier – jämför TV-serie-exemplet.

• Hämtar ut en rad i taget ur resultatet. (Gör inte en jättestor databasslagning och dumpar allt.)

Page 73: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

73

Page 74: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Överkurs (för programmeraren)Varför skriver man så?

• I Python har tilldelningar i sig inget värde. Detta kraschar:x = (y = 5)

• I PHP, och många stora språk (som C++), är värdet av en lyckad tilldelning det värde som tilldelades. Med

$x = ($y = 5)

får alltså både $y och $x värdet 5. Först $y, sedan $x.

74

får alltså både $y och $x värdet 5. Först $y, sedan $x.

• while-loopen fortsätter så länge $row inte tilldelas något som räknas som icke-sant.

Page 75: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Hantera indata

• Data från användaren ej säkert.

• Alla "fasta" valalternativ kan manipuleras (select-menyer, dolda fält...), inte bara input-boxes.

75

Page 76: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

real_escape_string<?php

$namn = "Robert’); DROP TABLE Students; --";

print ’<p>Före: ’ . $namn . ’</p>’;

$db = new mysqli("localhost", "andma54", "lösenord" , "andma54");

$namn = $db->real_escape_string($namn);

print ’<p>Efter: ’ . $namn . ’</p>;

76

?>

• "Bobby Tables" hade fastnat om man kört medreal_escape_string.

• OBS! I mysqli är det [mysqli-objektet]->real_escape_string som gäller (ingen separat funktion som förr).

Page 77: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

77

Page 78: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Ytterligare problem: HTML<?php

// DÅLIG KOD

$namn = $_POST[’namn’];

$betyg = $_POST[’betyg’];

$query = "insert into tvserier values (,".$namn.",".$betyg.");’;

$db - >query($query);

78

?>

• En användare kan mata in HTML i formulär.

• Om det hamnar i databas, kan det när det presenteras

• förstöra utseende

• köra (valfria) JavaScript, lägga in embed...

• Vad händer om $_POST[’namn’] är ’<!-- ’?

Page 79: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

htmlspecialchars

$pot_html = htmlspecialchars($pot_html);

betyder "börja HTML-kommentar". Gör att resten av

79

• <!-- betyder "börja HTML-kommentar". Gör att resten av sidan kommenteras bort.

• htmlspecialchars gör om det till &lt;!—-

Page 80: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Allmänt

• Du kommer ganska långt med real_escape_string och htmlspecialchars. Ta för vana att använda dessa på indata!

• Den som vill kan till exempel kontrollera att data är av rätt

80

• Den som vill kan till exempel kontrollera att data är av rätt typ, matchar vissa mönster och så vidare.

Page 81: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Struktur

81

Page 82: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Allmänna strukturråd

Strukturera upp filer

• include(filnamn); gör att filen inkluderas.

• include(’includes/db.inc.php’); Lägg sedan hela databaskopplingen i denna fil.Slipper upprepa kod, och ha lösenord i klartext i alla filer som skickas in/folk läser över axeln.in/folk läser över axeln.

• Sidhuvud/sidfot (saker som är samma/liknande för alla sidor).

• Kan vara bra med variabler för title, keywords,... Fundera!

• Kodduplicering? Lyft ut till funktioner (jfr print_supplier).

• Överkurs (inte krav): högre ordningens funktioner.

82

Page 83: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Vanliga slarvfel

• PHP är nybörjarvänligt som språk.

• PHP är inte förlåtande felhanteringsmässigt.

• Vissa fel varnas för med error reporting, andra inte:

• Missat semikolon på slutet av raden.

• Missat ett <?php eller ?> någonstans i PHP+XHTML-blandning.• Missat ett <?php eller ?> någonstans i PHP+XHTML-blandning.

• Missat måsvingar.

• Börja med det ena av apostrof/citattecken, sluta med det andra$namn = "Anders’;

83

Page 84: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

Länkar, lästips

• PHP-dokumentationen på http://www.php.net

• Introduktion för vana programmerare.

• Språkreferens, så-funkar-kommandot.

• Om det ser grötigt ut – scrolla ned till exempelkoden. Ofta bra.

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

• Validera XHTML: http://validator.w3.org

• Google. http://www.google.com . (faktiskt!)

• w3schools.com, 725G54, TDDD52.

84

Page 85: 729G28 - HTML-CSS-PHP-MySQL - 2013729G28/info/729G28-2013-webbprog.pdfIdag • Introduktion till XHTML. • Introduktion till CSS. • Introduktion till PHP. • Och enklare databaskopplingar

www.liu.se

Tack till

• Ian Baker för hans fina PHP Hammer-bild (fri under Creative Commons Attribution 2.0-licens) https://secure.flickr.com/photos/raindrift/sets/72157629492908038/

•Randall Munroe (XKCD) för "Exploits of a Mom". (fri under Creative Commons Attribution-NonCommercial 2.5 Generic-licens)http://xkcd.com/327/