BOKMÃ…L
Informasjonsteknologi 1 følger læreplanen Informasjonsteknologi 1 (2006). © H. Aschehoug & Co. (W. Nygaard) 2016 1. utgave / 1. opplag 2016 Det må ikke kopieres fra denne boka i strid med åndsverkloven eller i strid med avtaler om kopiering inngått med Kopinor, interesseorgan for rettighetshavere til åndsverk. Kopiering i strid med lov eller avtale kan føre til erstatningsansvar og inndragning, og kan straffes med bøter eller fengsel. Redaktør: Dag-Erik Møller Grafisk formgiving og tekniske illustrasjoner: Lars Nersveen Omslagsillustrasjon: Lars Fiske Illustrasjoner: Lars Fiske Omslagsdesign: Mona Markeng Bilderedaktør: Nina Hovda Johannesen Grunnskrift: Latin Modern Roman 11 Papir: 100 g Arctic matt 1,0 Trykk: 07 Media – 07.no Innbinding: Bokbinderiet Johnsen AS, Skien ISBN 978-82-03-40081-0 www.aschehoug.no Bildet s. 21: Luís Flávio Loureiro dos Santos
Forord Læreboka Læreboka går gjennom grunnleggende HTML, CSS, PHP og MySQL. Dette er verktøy som lar deg kode dynamiske nettsider med god struktur og design. Boka inneholder teori, eksempler og varierte oppgaver. Hvert kapittel avsluttes med et sammendrag.
Elevnettstedet Elevnettstedet er fritt tilgjengelig og har samme kapittelinndeling som boka. Her finner du bl.a. undervisningsvideoer, ekstra oppgaver, prosjekter, løsninger til alle oppgavene i læreboka og nyttige lenker. Direktelenke: www.lokus.no/direkte/IT1 Du finner også videoene på læreverkets YouTube-kanal.
Lærernettstedet På lærernettstedet finner du bl.a. kapittelprøver, eksamensoppgaver, årsplan og en digital utgave av læreboka. Lærernettstedet finner du på Lokus.no.
Tilbakemeldinger Vi setter pris på alle tilbakemeldinger om læreverket, både læreboka og nettstedene. Ønsker du å gi kommentarer, kan du bruke adressen IT1@aschehoug.no.
Takk Jeg vil takke konsulentene Helge Grenborgen, Andreas Nakkerud, Johan Hake og Roger Antonsen for gode forslag og innspill. Jeg vil også takke elevene mine ved Blindern videregående skole. En stor takk rettes til redaktør DagErik Møller for tett og god oppfølging gjennom hele prosjektet. Jeg vil også takke Karianne og Ola for deres store tålmodighet og ubetingede støtte. 0100011101101111011001000010000001101011011011110110010001101001011011100110011100100001
... og god fornøyelse! Hilsen Lars Nersveen
4 INNHOLD
Innhold
1 Innledning 1.1 Programvare som brukes 1.2 Litt om filstruktur . . . 1.3 Til eleven . . . . . . . . 1.4 Til lĂŚreren . . . . . . .
i boka . . . . . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
11 11 12 12 12
2 Fra 0 og 1 til tekst, lyd og bilde 2.1 Hvorfor 0 og 1? . . . . . . . . . Bit og byte . . . . . . . Titallsystemet . . . . . Totallsystemet . . . . . Sekstentallsystemet . . . 2.2 Representasjon av tekst . . . . ASCII . . . . . . . . . . Unicode og UTF-8 . . . Glyfer . . . . . . . . . . 2.3 Representasjon av farge . . . . 2.4 Representasjon av bilde . . . . Punktgrafikk . . . . . . Vektorgrafikk . . . . . . Komprimering . . . . . 2.5 Representasjon av lyd . . . . . 2.6 Filer . . . . . . . . . . . . . . . Sammendrag . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
13 13 14 14 14 16 16 16 17 18 18 20 20 21 22 23 25 27
. . . . . . .
28 28 29 29 29 29 31 31
3 Digitalt utstyr 3.1 Datamaskiner og smarttelefoner . . . . . Hovedkort . . . . . . . . . . . . . Prosessor . . . . . . . . . . . . . Arbeidsminne . . . . . . . . . . . Lagringsmedium . . . . . . . . . 3.2 Maskinvare og programvare . . . . . . . 3.3 Standarder for maskin- og programvare
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
INNHOLD
Sammendrag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Internett 4.1 Internett . . . . . . . . . . . . . . . . . . . . . Nettverk . . . . . . . . . . . . . . . . . 4.2 Hvordan virker Internett? . . . . . . . . . . . Sending av informasjon . . . . . . . . 4.3 Internettstandarder (protokoller) . . . . . . . IP (Internettprotokollen) . . . . . . . TCP (Transmission Control Protocol) HTTP (Hypertext Transfer Protocol) Sammendrag . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
5
33
. . . . . . . . .
34 34 34 35 35 36 37 37 37 39
5 HTML og CSS – en introduksjon 5.1 Ditt første HTML-dokument . . Plassering av filer . . . . . 5.2 HTML-elementer . . . . . . . . . Avsnitt og linjeskift . . . Overskrifter . . . . . . . . 5.3 Hvordan bruker vi CSS? . . . . . 5.4 Tekst og bakgrunnsfarge . . . . . 5.5 Overskrifter . . . . . . . . . . . . Sammendrag . . . . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
40 40 41 42 42 43 44 47 48 51
6 Mer om HTML 6.1 Lister . . . . 6.2 Lenker . . . . 6.3 Tabeller . . . 6.4 Bilder . . . . 6.5 Lyd . . . . . 6.6 Video . . . . 6.7 Skjemaer . . Sammendrag . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
53 53 54 56 57 58 60 61 63
. . . . . . . . . .
64 64 66 69 70 71 72 73 75 76 77
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
7 Mer om CSS 7.1 Viktige CSS-egenskaper 7.2 Lister . . . . . . . . . . 7.3 Tabeller . . . . . . . . . 7.4 Lenker i tekst . . . . . . 7.5 Menyer . . . . . . . . . Loddrett meny . Vannrett meny . 7.6 Skjemaer . . . . . . . . 7.7 Bakgrunnsbilder . . . . Sammendrag . . . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
6 INNHOLD
8 Sidelayout med CSS 8.1 div-elementet og CSS-klasser 8.2 CSS flexbox . . . . . . . . . . 8.3 Layout med vannrett meny . 8.4 Layout med sidestilt meny . . 8.5 Andre muligheter . . . . . . . 8.6 Hvordan velge farger? . . . . Sammendrag . . . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
9 Bildebehandling 9.1 Opprette et dokument . . . . . . . . 9.2 Bildestørrelse . . . . . . . . . . . . . 9.3 Forminske og forstørre bilder . . . . 9.4 Beskjære bilder . . . . . . . . . . . . 9.5 Sette sammen bilder . . . . . . . . . 9.6 Tegne . . . . . . . . . . . . . . . . . Tegne ved å fylle markeringer Tegne ved hjelp av former . . Frihåndstegning . . . . . . . 9.7 Skrive tekst på bilder . . . . . . . . . 9.8 Fleksible headere . . . . . . . . . . . 9.9 Valg av filformat . . . . . . . . . . . Sammendrag . . . . . . . . . . . . . . . . 10 PHP 10.1 Hvordan bruker vi PHP? . . 10.2 Ditt første PHP-dokument . . 10.3 Variabler og operatorer . . . Variabler . . . . . . . Operatorer . . . . . . 10.4 PHP-kommandoen echo . . . 10.5 Valgsetninger . . . . . . . . . Sammenligne variabler if...else if...else . . . . 10.6 Løkker . . . . . . . . . . . . . while-løkker . . . . . . for-løkker . . . . . . . 10.7 Arrayer . . . . . . . . . . . . Indeksert array . . . . Assosiativ array . . . 10.8 Sending av variabler . . . . . 10.9 PHP og skjemaer . . . . . . . 10.10Inkludere filer . . . . . . . . . Sammendrag . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . .
78 78 80 81 84 87 87 89
. . . . . . . . . . . . .
90 90 91 92 93 93 94 94 95 96 97 98 99 101
. . . . . . . . . . . . . . . . . . .
103 103 104 107 107 107 109 110 110 111 113 113 114 116 116 118 119 120 123 125
INNHOLD
11 Planlegging og brukergrensesnitt 11.1 Brukergrensesnitt . . . . . . . . . . . Hva er et brukergrensesnitt? . Krav . . . . . . . . . . . . . . 11.2 Planlegging av nettsteder . . . . . . Målgruppe . . . . . . . . . . Innhold . . . . . . . . . . . . Skrifttyper og fargevalg . . . Skisse av layout . . . . . . . . 11.3 Validering av nettsider . . . . . . . . 11.4 Profesjonelle utviklingsstrategier . . Sammendrag . . . . . . . . . . . . . . . .
7
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
126 126 126 126 127 127 127 127 128 129 130 131
12 Databaser – en introduksjon 12.1 Introduksjon til databaser . . . . . . . . Hva er en database? . . . . . . . Tabeller . . . . . . . . . . . . . . Primærnøkler og kandidatnøkler Atomærkravet . . . . . . . . . . Sammendrag . . . . . . . . . . . . . . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
132 132 132 132 133 133 135
13 Datamodellering 13.1 Datamodeller . . . . . . . . . . . . . 13.2 Flere tabeller . . . . . . . . . . . . . Koblinger . . . . . . . . . . . Fremmednøkler . . . . . . . . én-til-mange . . . . . . . . . Kråkefotnotasjon . . . . . . . mange-til-mange . . . . . . . Hvorfor ikke én-til-én? . . . . 13.3 Normalisering . . . . . . . . . . . . . Første Normalform (1NF) . . Andre Normalform (2NF) . . Tredje Normalform (3NF) . . 13.4 Normaliseringseksempel . . . . . . . Brudd på første normalform . Brudd på andre normalform . Brudd på tredje normalform . Normalisert datamodell . . . Sammendrag . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
136 136 138 138 139 139 140 141 144 146 146 146 147 148 148 148 150 150 153
. . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
14 MySQL Workbench 154 14.1 Programmet MySQL Workbench . . . . . . . . . . . . . . . . . 154 14.2 Et nytt eksempel . . . . . . . . . . . . . . . . . . . . . . . . . . 155 14.3 Lage datamodell uten koblinger . . . . . . . . . . . . . . . . . . 155
8 INNHOLD
14.4 14.5 14.6 14.7
Lage datamodell med koblinger . . . . . . Lage database fra datamodell . . . . . . . Sette inn verdier i en tabell . . . . . . . . Sikkerhetskopi av databaser og levering av arbeider . . . . . . . . . . . . . . . . . . . Lagre sikkerhetskopi av database . Lagre datamodell som bilde . . . . Sammendrag . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 158 . . . . . . . . . . . . 161 . . . . . . . . . . . . 163 . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
166 166 168 169
15 Koble til database fra PHP 15.1 Tilkoblingsinformasjon . . . . . . . . . . . . . 15.2 Opprette en tilkobling . . . . . . . . . . . . . Undersøke om tilkoblingen virker . . . Undersøke om riktig tegnsett benyttes PHP include og MySQL-tilkobling . . Sammendrag . . . . . . . . . . . . . . . . . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
170 170 171 171 172 172 173
. . . . . . . . . . . . . . . . . . . . . . . .
175 176 176 177 177 178 178 178 179 179 179 180 181 182 182 183 184 184 186 187 188 188 189 192 193
16 Hente informasjon fra databaser (SELECT) 16.1 Hente ut fra én tabell . . . . . . . . . . . . . Koble til databasen . . . . . . . . . . . SQL-spørringen . . . . . . . . . . . . . Generell SELECT-spørring . . . . . . 16.2 SQL i MySQL Workbench . . . . . . . . . . . 16.3 Flere muligheter med SELECT . . . . . . . . Sortering . . . . . . . . . . . . . . . . Hente ut et utvalg . . . . . . . . . . . Kombinere utvalg og sortering . . . . 16.4 Lage et resultat . . . . . . . . . . . . . . . . . Skrive ut resultatet . . . . . . . . . . . Uten formatering . . . . . . . . . . . . Som en enkel liste . . . . . . . . . . . I en tabell . . . . . . . . . . . . . . . . På annen måte . . . . . . . . . . . . . 16.5 Hente ut fra flere tabeller . . . . . . . . . . . Et enkelt eksempel . . . . . . . . . . . Like kolonnenavn . . . . . . . . . . . . Tre tabeller . . . . . . . . . . . . . . . 16.6 Sending av variabler . . . . . . . . . . . . . . Sende én variabel . . . . . . . . . . . . Motta en variabel . . . . . . . . . . . Sende flere variabler . . . . . . . . . . Sammendrag . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
INNHOLD
9
17 Sette inn informasjon i databaser (INSERT) 17.1 Sette inn i en tabell . . . . . . . . . . . . . . Koble til databasen . . . . . . . . . . . SQL-spørringen . . . . . . . . . . . . . «Kjøre» spørringen . . . . . . . . . . . 17.2 Bruke et skjema for å sette inn verdier . . . . 17.3 Sette inn i en tabell med fremmednøkler . . . Sammendrag . . . . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
194 194 194 195 195 196 198 203
18 Slette informasjon fra databaser (DELETE) 18.1 Slette en rad fra en tabell . . . . . . . . . . . Koble til databasen . . . . . . . . . . . SQL-spørringen . . . . . . . . . . . . . 18.2 Bruke en knapp for å slette en rad . . . . . . Opprette knapp . . . . . . . . . . . . . Slette en rad . . . . . . . . . . . . . . Sammendrag . . . . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
204 204 204 204 205 205 207 209
19 Endre informasjon i databaser (UPDATE) 19.1 Endre informasjon i en tabell . . . . . . . . . Koble til databasen . . . . . . . . . . . SQL-spørringen . . . . . . . . . . . . . 19.2 Bruke et skjema for å endre verdier . . . . . . Opprette en knapp til skjemaet . . . . Hente ut riktig informasjon i skjemaet «Kjøre» spørringen . . . . . . . . . . . Sammendrag . . . . . . . . . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
210 210 210 210 211 211 212 213 215
20 Muligheter og utfordringer 20.1 Fritiden vår blir mer digital . . . . . 20.2 Digitale skiller . . . . . . . . . . . . Skiller i Norge . . . . . . . . Globale skiller . . . . . . . . 20.3 Fysisk erstattes av digitalt . . . . . . 20.4 Arbeidsplasser automatiseres . . . . 20.5 Kultur og språk i en digital verden . Minoritetsspråkpakten . . . . 20.6 Digitale trusler . . . . . . . . . . . . IKT-utstyr på avveie . . . . . Identitetstyveri (phishing) . . Uautorisert tilgang (hacking) «Denial of Service» . . . . . . Virusangrep . . . . . . . . . . Manglende sikkerhetskopi . . 20.7 Regelverk og etiske normer . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
216 217 217 218 219 220 221 223 225 226 226 227 228 228 229 229 230
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
10 INNHOLD
Lover og regelverk . . . . . . . . . . Etikk og normer . . . . . . . . . . . 20.8 Opphavsrett . . . . . . . . . . . . . . . . . . Opphavsrett . . . . . . . . . . . . . ProprietĂŚre lisenser . . . . . . . . . GNU General Public License (GPL) Apache og PHP . . . . . . . . . . . Creative Commons (CC) . . . . . . Sammendrag . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
230 230 231 231 231 232 232 233 235
Mer om HTML
53
Kapittel 6
Mer om HTML
Etter dette kapitlet skal du kunne • lage nettsteder med overskrifter, lister, lenker, tabeller, bilder, video, lyd og skjemaer • planlegge og organisere nettsteder med fokus på god og enkel brukervennlighet • organisere nettsteder slik at de får en hensiktsmessig filstruktur
I forrige kapittel så vi hvordan vi kan lage enkle HTML-dokumenter. I dette kapitlet skal vi se hvordan vi kan legge til flere elementer i HTML-dokumentene våre.
6.1
Lister pssst
I HTML kan vi lage to forskjellige lister. Den ene er uordnet og vises med kulepunkter, mens den andre er ordnet og vises med nummererte punkter. Det viktigste vi kommer til å bruke lister til, er å lage menyer. Ved hjelp av CSS kan vi lage flotte menyer fra alminnelige lister. Fordelen med å bruke en liste er at vi får en oversiktlig struktur som vi kan jobbe videre med. For å lage en uordnet liste bruker vi <ul>-elementet (unordered list), og for å lage en ordnet liste bruker vi <ol>-elementet (ordered list). I begge tilfellene angir vi alle listepunktene i <li>-elementet. Se kode 6.1 nedenfor og figur 6.1 (på neste side) for eksempler på bruk av begge. 1 2 3 4 5
< ol >
< li > Mount Everest </ li > < li > K2 </ li > < li > Kanchenjunga </ li > </ ol >
6 7
< ul >
Du finner videoer og andre ressurser på nettstedet på Lokus.
54 Mer om HTML
8 9 10 11
< li > Asterix </ li > < li > Obelix </ li > < li > Miraculix </ li > </ ul >
Kode 6.1: Nummerert og unummerert liste i HTML.
Figur 6.1: Resultatet av kode 6.1 i en nettleser.
Oppgaver I oppgavene i dette kapitlet skal du fortsette med filen index.html som du laget i forrige kapittel. Alternativt kan du opprette en ny mappe og lage en ny fil som du kaller index.html. 6.1 Lag en ordnet liste med fire punkter. Listens plassering og innhold velger du selv. 6.2 Lag en uordnet liste med fire punkter. Listens plassering og innhold velger du selv.
6.2
Lenker
En lenke er nok det viktigste HTML-elementet av dem alle. Internett er basert på at man kan trykke på en lenke på én side og komme til en helt annen side. Det er dette som kalles hypertekst. I en vanlig tekst må vi lese fra topp til bunn, mens i hypertekst kan vi hoppe fram og tilbake mellom forskjellige sider. Enkelte lenker kommer fortløpende i teksten, men vi vil ofte lage menyer som inneholder flere lenker. Når vi skal lage en meny, er det fornuftig å lage en liste der vi plasserer lenkene våre. En slik liste kan vi redigere ved hjelp av CSS, slik at vi også kan få den til å bli en vannrett meny. For å opprette en lenke bruker vi <a>-elementet. Dette er det første elementet vi skal se på der vi kan angi forskjellige attributter. I attributter kan vi angi
Mer om HTML
55
tilleggsinformasjon til et element. Vi kommer i utgangspunktet til å bruke to forskjellige attributter i <a>-elementet, nemlig href og target. Vi bruker href for å angi hva en lenke skal peke til (altså hvor nettleseren skal gå når vi klikker på den), mens vi bruker target for å angi hvor lenken skal åpnes. Vi bruker ikke target i interne lenker (det vil si lenker til andre sider på vårt eget nettsted), men vi bruker target="_blank" for å åpne en lenke i et nytt vindu eller en ny fane. Det gjør vi alltid med eksterne lenker. En ekstern lenke vil også alltid starte med http://. I kode 6.2 og figur 6.2 kan du se eksempler på lenker og en meny i en liste. 1
<a href = " http :// www . nrk . no " target = " _blank " > NRK </ a >
2 3
<a href = " meg . html " > Hvem er jeg ? </ a >
4 5
<a href = " filmer . html " > Mine favorittfilmer </ a >
6 7 8 9 10 11
< ul >
< li > <a href = " fil1 . html " > Lenke 1 </ a > </ li > < li > <a href = " fil2 . html " > Lenke 2 </ a > </ li > < li > <a href = " fil3 . html " > Lenke 3 </ a > </ li > </ ul >
Kode 6.2: Ekstern lenke til NRK, interne lenker og en liten meny.
Figur 6.2: Resultatet av kode 6.2 i en nettleser.
Oppgaver 6.3 Opprett en ny fil med navnet meg.html i samme mappe som index.html (som du laget lister i tidligere i kapitlet). 6.4 Lag en overskrift og en kort beskrivelse av deg selv i filen meg.html. 6.5 Lag en uordnet liste med to punkter øverst i index.html. Det første punktet skal være en lenke til en fritt valgt nettside som åpnes i et nytt vindu, den andre lenken skal gå til meg.html. 6.6 Lag en lenke som tar deg tilbake til index.html øverst i filen meg.html.
56 Mer om HTML
Absolutte og relative lenker Anta at du eier domenenavnet http://www.example.com med et tilhørende web-hotell. På dette domenet har du plassert din hovedfil (index.html) og en fil som heter meg.html. For å opprette en lenke fra index.html til meg.html kan du nå enten skrive <a href="http://www.example.com/meg.html">Om meg</a> eller du kan skrive <a href="meg.html">Om meg</a>. Den første varianten er det vi kaller en absolutt lenke, mens den andre varianten er det vi kaller en relativ lenke. Absolutte lenker anbefales ikke – av flere grunner. Hovedgrunnen blir tydelig dersom du skal flytte filene dine til et annet domene (f.eks. http://www.example.net). I dette tilfellet vil den absolutte lenken som er vist ovenfor, slutte å fungere, mens den relative vil fungere akkurat som før. Den er nemlig relativ (tilpasser seg) i forhold til index.html, den vil derfor fungere så lenge meg.html fremdeles ligger i samme mappe som index.html.
6.3
Tabeller
Mye av det vi skal gjøre i dette faget, krever bruk av tabeller. Et vanlig eksempel vil være at du skal skrive ut en liste over personer fra en database. Da vil det være naturlig å organisere disse personene i en tabell. En tabell defineres av <table>-elementet. En rad i en tabell angis med <tr>elementet (table row). Et felt eller en celle i første rad i en tabell angis gjerne med <th>-elementet (table header), mens et felt eller en celle i resten av radene angis med <td>-elementet (table data). Ved å benytte et annet element for den første raden blir det lettere å gi den et eget utseende med CSS. Du kan se et enkelt eksempel i kode 6.3 og figur 6.3. 1 2 3 4 5 6 7 8 9 10 11 12 13 14
< table > < tr >
< th > < th > < th > </ tr > < tr > < td > < td > < td > </ tr > < tr > < td > < td >
Navn </ th > Meter over havet ( moh .) </ th > F ø rst besteget </ th > Mount Everest </ td > 8848 </ td > 1953 </ td > K2 </ td > 8611 </ td >
Mer om HTML
15 16 17 18 19 20 21 22
< td > </ tr > < tr > < td > < td > < td > </ tr > </ table >
57
1954 </ td > Kanchenjunga </ td > 8586 </ td > 1955 </ td >
Kode 6.3: En enkel tabell.
Figur 6.3: Resultatet av kode 6.3 i en nettleser.
Oppgaver 6.7 Bruk Internett og finn tabellen for Premier League (engelsk fotball for menn). Lag en HTML-tabell som viser de tre øverste lagene og hvor mange poeng de har. 6.8 Utvid tabellen slik at de fem øverste lagene vises. Legg også til antall kamper som er spilt, og lagenes målforskjell.
6.4
Bilder
Bildeelementet i HTML er et annet eksempel på et element som består av bare én tagg. Koden for å inkludere et bilde kan du se i kode 6.4 (på neste side). I dette tilfellet finner ikke koden noe bilde; du kan se hva nettleseren da viser i figur 6.4 (så forstår du hvorfor det kan være lurt å angi alt-attributtet). Attributtene width og height skal brukes til å fortelle nettleseren hvor stort bildet er, slik at plassen kan reserveres før bildet lastes. Disse attributtene skal altså ikke brukes til å skalere et bilde (forstørre eller forminske). Standardenheten for bredde og høyde er piksler, vi trenger derfor ikke angi enhet dersom vi skriver bildets størrelse i piksler. Husk at svært mange bilder du finner på Internett, er beskyttet av opphavsrett. Dersom du skal publisere siden din på nett, er det derfor lurt å bruke bilder du har tatt selv.
58 Mer om HTML
1
< img src = " bildefil . png " alt = " Mitt bilde " width = " 200 " height = " 100 " >
Kode 6.4: Kode for å plassere bilder i HTML. Vi kan angi en beskrivelse, bredden og høyden til bildet.
Figur 6.4: Resultatet av kode 6.4 i en nettleser.
Vi benytter samme metode for å finne bilder som vi benytter for å finne filer i lenker. Det vil si at vi kan benytte absolutte og relative filbaner til bilder. Det er også her alltid anbefalt å benytte relative filbaner. Det er ikke uvanlig å ha flere bilder på et nettsted. Derfor kan det lønne seg å lage en egen mappe der vi plasserer bildene våre. I figur 6.5 (på neste side) kan du se ett bilde som er plassert i samme mappe som index.html (bilde1.png), og ett bilde som er plassert i mappen bilder (bilde2.png). For å plassere bilde1.png i index.html kan vi skrive: <img src="bilde1.png" alt="Bilde 1" width="400" height="50">
Og for å plassere bilde2.png i index.html kan vi skrive: <img src="bilder/bilde2.png" alt="Bilde 2" width="200" height="200">
Oppgaver 6.9 Legg til et bilde av noe du liker, i filen meg.html. Bildet skal plasseres i en mappe som du kaller bilder.
6.5
Lyd
Tidligere var det ikke støtte for å vise lyd og video direkte i en nettleser. I stedet måtte en såkalt «plug-in» benyttes. Det vil si et eget program som for eksempel Adobe Flash. Med HTML5 har det blitt mulig, og veldig enkelt, å inkludere lyd og video direkte i nettlesere.
Mer om HTML
C:\wamp\www
C:\wamp\www
nettsiden
nettsiden
index.html
bilde1.png
index.html
59
bilder
bilde2.png
Figur 6.5: To forskjellige plasseringer av bildefiler. Hvis et nettsted har mange bilder, er det lurt å plassere dem i en egen mappe.
For å legge til lyd benytter vi <audio>-elementet. Vi kan velge om lyden skal spilles av automatisk, om den skal gjentas, eller om brukeren selv skal kunne trykke på start og stopp. Automatisk avspilling bør unngås med mindre man lager en nettside der bakgrunnslyden spiller en viktig rolle. Inne i <audio>elementet må vi angi filbanen til lyden vi ønsker å spille av. Dette gjør vi på samme måte som vi gjør for bilder og interne lenker. Fordi det finnes mange lydformater, må vi også angi hva slags filtype vi ønsker å bruke. I kode 6.5 vises HTML-koden for å inkludere en lyd-fil med knapper (controls). Resultatet vises i figur 6.6. 1 2 3 4
< audio controls > < source src = " lydfiler / lydfil . mp3 " type = " audio / mpeg " > Din nettleser st ø tter ikke audio - elementet . </ audio >
Kode 6.5: Kode for å plassere lydfiler i HTML. Teksten skrives ut bare hvis nettleseren ikke støtter <audio>-elementet.
Figur 6.6: Lydavspilleren slik den vises i Google Chrome.
60 Mer om HTML
6.6
Video
For å legge til video benytter vi <video>-elementet. Dette elementet brukes nesten på samme måte som <audio>-elementet, men her kan vi også angi videoens bredde og høyde (med piksler som standardenhet). I kode 6.6 vises HTMLkoden for å inkludere en video-fil med knapper (controls). Resultatet vises i figur 6.7. 1 2 3 4
< video width = " 300 " height = " 250 " controls > < source src = " videofiler / videofil . mp4 " type = " video / mp4 " > Din nettleser st ø tter ikke video - elementet . </ video >
Kode 6.6: Kode for å plassere videofiler i HTML. Teksten skrives ut bare hvis nettleseren ikke støtter <video>-elementet.
Oppgaver Du finner lydklipp og videoklipp på nettstedet på Lokus. 6.10 Legg til et lydklipp på en av sidene dine (index.html eller meg.html). 6.11 Legg til et videoklipp på en av sidene dine (index.html eller meg.html).
Mer om HTML
61
Figur 6.7: Videoavspilleren slik den vises i Google Chrome.
6.7
Skjemaer
At en nettside er dynamisk, vil si at den inneholder interaksjon (søkefunksjoner, kommentarfelt, blogginnlegg, diskusjonsforum, registrering/innlogging m.m.). Skjemaer utgjør en viktig del av dynamiske nettsider. For å bruke skjemaer til interaksjon må vi bruke mer enn HTML, vi kan derfor foreløpig bare lage skjemaer uten noen form for funksjon, men senere i denne boka får du se hvordan du kan ta inn og bruke informasjon fra skjemaer. Du kan se oppsettet for et enkelt skjema i kode 6.7 (på neste side). Alle skjemaer plasseres i <form>-elementet. For hver ting vi ønsker å registere, lager vi et <input>-element som definerer hva brukeren skal skrive. Til slutt avslutter vi med å lage en knapp. Legg merke til at <input>-elementet ikke har noen avsluttende tagg. I <form>-elementet angir vi en method. Dersom vi vil sende skjemainformasjonen til en annen side, benytter vi også en action. Det er dette som gjør at det skjer noe i adressefeltet når du trykker på knappen. I kapitlet om PHP skal vi se på hvordan vi kan behandle informasjonen vi skriver inn i et skjema. I denne boka vil vi bare benytte noen av input-typene i skjemaene våre, men det finnes mange muligheter (for eksempel egne e-postfelter, datofelter, knapper, avkrysningsbokser og lister). Hvis du er interessert, kan du finne mer informasjon om skjemaer (og alt annet i IT-faget) ved å søke litt på nettet. Vi kommer til å bruke mer tid på skjemaer og oppbygningen av dem i senere kapitler.
62 Mer om HTML
1 2 3
< form method = " GET " > Ditt navn < input type = " text " name = " dittnavn " >
4 5 6
Hva er din favorittfilm ? < input type = " text " name = " favorittfilm " >
7 8 9
< input type = " submit " name = " sendinn " value = " Send inn " > </ form >
Kode 6.7: Et enkelt skjema i HTML.
Figur 6.8: Resultatet av kode 6.7 i en nettleser (med noen ekstra mellomrom lagt til, for å bedre visningen).
Oppgaver 6.12 Legg til kode 6.7 nederst på en av sidene dine (index.html eller meg.html). 6.13 Skriv inn informasjon i feltene og trykk på knappen. Se hva som skjer i adressefeltet etter at du har trykket på knappen. 6.14 Legg til et nytt felt i skjemaet der man også kan angi sin favorittfarge. 6.15 Legg også til en nedtrekksmeny («drop-down list») og radioknapper («radio buttons»). Bruk Internett for å finne ut hvordan disse brukes.
Mer om HTML
63
Sammendrag Ordnede (nummererte) lister angis med <ol>-elementet. Uordnede (kulepunkter) lister med <ul>-elementet. Listepunktene angir vi med <li>elementet i begge tilfeller. Lenker angis med <a>-elementet. Filbane angis i href-attributtet. Lenker kan enten åpnes i samme fane/vindu eller i ny fane / nytt vindu (med target="_blank"). Hvis vi skal lage en meny, kan det være lurt å plassere lenkene i en liste. Tabeller angis med <table>-elementet. Rader angis med <tr>-elementet. Overskriftsfelter angis med <th>-elementet, mens vanlige felter angis med <td>-elementet. Bilder angis med <img>-elementet. Vi må angi bildets filbane (src), en beskrivelse med alt-attributtet og bildets bredde (width) og høyde (height). Lyd angis med <audio>-elementet. Filbane og filtype angis i <source>elementet. Video angis med <video>-elementet. Filbane og filtype angis i <source>elementet. Skjemaer angis i <form>-elementet. Felter der informasjon skal skrives inn, angis med <input>-elementet (med type="text"). Knapper lages med <input type="submit">.
78 Sidelayout med CSS
Kapittel 8
Sidelayout med CSS
Etter dette kapitlet skal du kunne • strukturere nettsider med <div>-elementer og CSS • lage strukturer med vannrett meny og med sidestilt meny pssst Du finner videoer og andre ressurser på nettstedet på Lokus.
Hittil har alt innhold vi har laget, havnet på venstre side av nettsidene våre. I dette kapitlet skal vi se på hvordan vi kan strukturere sider og plassere innhold på en mer oversiktlig måte. I figur 8.1 vises tre vanlige layout-varianter for nettsider. Disse variantene vil bli presentert i detalj i dette kapitlet. I tillegg vil du få informasjon om hvordan du kan utvide dem ytterligere.
a
b
c
Figur 8.1: Tre forskjellige meny-plasseringer. Her er menyen plassert ovenfor innholdet (a), til venstre for innholdet (b) og til høyre for innholdet (c).
8.1
div-elementet og CSS-klasser
HTML-elementet <div> er et allsidig og mye brukt element. Vi kan tenke på et <div>-element som en boks/firkant som definerer et område på en nettside. Ved å bruke flere <div>-elementer kan vi lage ulike layouter. Et <div>-element er et «block»-element. Det vil si at de havner nedenfor hverandre på en nettside. Det motsatte er «inline»-elementer, som havner etter hverandre på samme linje.
Sidelayout med CSS
79
I kode 8.1 brukes fire <div>-elementer. Disse elementene har alle fått angitt en CSS-klasse (class). Vi kan definere så mange klasser vi måtte ønske. Egenskapene til klassen defineres i CSS-dokumentet. I dette tilfellet er CSS-koden i kode 8.2 benyttet. Her angir vi boksenes bredde i prosent (du kan også bruke piksler), mens høyden er angitt i piksler. I linjen margin: 5px auto; er elementets marger angitt. Dette betyr at topp- og bunnmarger blir 5px, mens sidemargene blir «auto». Ved å angi «auto» for sidemarger blir margene like store. Nettleseren finner ut hvor stor plass det er utenfor <div>-elementet, denne plassen deles på to og fordeles på høyre og venstre side av <div>-elementet. Det fører til at boksene våre blir vannrett midtstilt. Denne egenskapen kan benyttes på alle HTML-elementer. Det har tidligere vært vanskelig å midtstille innhold loddrett, men en «flexbox» (se neste delkapittel) gir oss nye verktøy som gjør dette lettere. Resultatet av disse kodene kan du se i figur 8.2 (på neste side). 1 2
< div class = " boks " > </ div >
3 4 5
< div class = " boks " > </ div >
6 7 8
< div class = " boks " > </ div >
9 10 11
< div class = " boks " > </ div >
Kode 8.1: Fire <div>-elementer som alle har CSS-klassen «boks».
1 2 3 4 5 6 7
. boks { width : 70%; /* boksens bredde i prosent */ height : 60 px ; /* boksens h ø yde i piksler */ margin : 5 px auto ; /* topp- og bunnmarg 5 px , sidemarg auto */ padding : 5 px ; /* avstand mellom bokskant og innhold */ background- color : #329632; /* gr ø nn */ }
Kode 8.2: CSS-klassen «boks». Legg merke til at den angis med et punktum først.
Vi kunne ha droppet klassen .boks i dette eksemplet siden alle <div>-elementene har fått samme utseende. Da hadde vi angitt utseende for elementet div i stedet for klassen .boks. Den store fordelen med klasser får vi når vi ønsker å endre utseende på flere <div>-elementer på ulike måter. Da kan vi skrive én klasse for hvert <div>-element. Et alternativ til klasser er å benytte id-er. Vi kan da skrive <div id=""> i stedet for å skrive <div class="">. Forskjellen på disse to er at en id er unik. Det vil si at vi ikke kan ha to <div>-elementer med samme id. Fordelen med en id er
80 Sidelayout med CSS
Figur 8.2: Resultatet av kode 8.1 og 8.2. Boksene havner nedenfor hverandre fordi <div> er et «block»-element.
nettopp at den er unik. Dette har vi stor glede av hvis vi skal bruke JavaScript, som er et naturlig neste språk å lære seg når du er ferdig med denne boka. Da kan vi manipulere HTML-elementer basert på id-en deres. For å gi utseende til et element via en id skriver vi #id i stedet for .klasse i CSS-dokumentet (emneknagg/«hashtag» i stedet for punktum).
Oppgaver 8.1 Legg til en klasse i kode 8.2 og gjør endringer i kode 8.1 slik at boks nummer tre får en annen farge enn de andre boksene. 8.2 Legg til flere bokser og klasser slik at du får én boks for hver av regnbuens farger («roggbif»).
8.2
CSS flexbox
Det har i lang tid vært utfordrende å lage bra layout på en enkel måte. Den vanligste framgangsmåten har involvert bruk av float-egenskapen. Den egentlige hensikten med denne egenskapen er å få plassert bilder sammen med tekst slik at teksten «flyter» rundt bildet. Det har derfor aldri vært meningen å bruke denne egenskapen til å lage layouter. Dette har de som lager HTML og CSS også vært klar over. Derfor har egenskapen display: flex; dukket opp i den nyeste versjonen av CSS. Dette kalles flexbox og lar oss på en enkel måte organisere boks-elementer på en nettside. Ideen illustreres i figur 8.3. Vi angir først et <div>-element som vil fungere som «innpakning» (grå på figuren). Denne «innpakningen» får CSS-egenskapen display: flex;, og blir dermed en flexbox. Videre bestemmer vi om bokser
Sidelayout med CSS
81
plassert i «innpakningen» skal legges etter hverandre (i en rad), eller nedenfor hverandre (i en kolonne), se figur 8.3. Deretter fyller vi «innpakningen» med så mange <div>-elementer vi ønsker. Innstillingene i disse <div>-elementene avgjør størrelsen og plasseringen av dem. Som nevnt har det tidligere vært vanskelig å midtstille innhold loddrett på nettsider. En flexbox gir oss nye muligheter her. Ved å legge til egenskapen justify-content: center; blir innholdet i en flexbox midtstilt vannrett. Ved å bruke align-items: center; midstilles innholdet loddrett. Bruk Internett for å finne ut mer om disse to egenskapene hvis du ønsker å utforske dem mer.
Figur 8.3: Illustrasjon av bruk av flex for å legge innhold i rader (til venstre) og i en kolonne (til høyre).
8.3
Layout med vannrett meny
Her skal vi se på en layout som består av en overskrift og en vannrett meny ovenfor selve innholdet (se første variant i figur 8.1). I det første eksemplet i dette kapitlet så vi på et oppsett der flere <div>-elementer ble plassert nedenfor hverandre. Ved å gi hver av disse <div>-elementene en egen CSS-klasse kan vi oppnå en layout med en vannrett meny. Vi skal likevel se på en annen framgangsmåte som gir mer fleksible muligheter. Det er ofte lurt å pakke alt innhold inn i et overordnet <div>-element. Da kan vi midtstille og angi bredde ett sted, og så kan vi la resten av <div>-elementene fylle «innpakningens» bredde. På den måten er det lett å endre sidens bredde uten å måtte endre alle elementene. I kode 8.3 (på neste side) vises HTMLkoden for et slikt oppsett. Her har vi angitt fire <div>-elementer med hver sin klasse. Tre av elementene («topptekst», «meny» og «innhold») er plassert inni elementet «innpakning».
82 Sidelayout med CSS
1
< div class = " innpakning " >
2 3 4 5
< div class = " topptekst " > Her kan du skrive en overskrift eller plassere et bilde . </ div >
6 7 8 9
< div class = " meny " > Her kan du lage en meny . </ div >
10 11 12 13
< div class = " innhold " > Her kan du skrive innholdet ditt . </ div >
14 15
</ div > <! - - innpakning -->
Kode 8.3: HTML-koden vi benytter for å få et oppsett med vannrett meny. Kommentaren nederst i koden brukes for å angi hvor det første <div>-elementet avsluttes.
I kode 8.4 vises CSS-koden vi skal benytte for å gi utseende til de fire klassene. Først gir vi egenskaper til «innpakningen». Vi angir en bredde, en bakgrunnsfarge og margin: auto; for å få en midtstilt nettside. Videre benytter vi display: flex; og flex-direction: column; for å gjøre om «innpakningen» til en flexbox med innholdet sitt i en kolonne (boksene havner nedenfor hverandre). Vi kan også angi en minimums- og maksimumsbredde for «innpakningen» dersom vi ønsker det. Til det benytter vi CSS-egenskapene min-width og max-width. Det vil føre til at «innpakningen» aldri blir mindre enn eller større enn angitte verdier. De tre andre <div>-elementene får en bakgrunnsfarge, en padding og en margin. Vi angir bare høyde for «topptekst». Det er fordi boksene «meny» og «innhold» vil tilpasse sin høyde til innholdet sitt. Legg merke til at vi ikke har angitt bredde for noen av disse elementene. Det skyldes at elementer i en flexbox med flex-direction: column; fyller ut all ledig bredde. I dette eksemplet er bredden til «innpakningen» satt til 800px, og da får alt innhold også denne bredden. Ved å angi bredden i prosent blir sidens bredde og innhold justert etter nettleseren. I figur 8.4 kan du se resultatet av disse kodene. 1 2 3 4 5 6 7 8 9 10
. innpakning { width : 800 px ; /* innpakningens bredde */ background- color : #404040; /* en m ø rk gr å farge */ margin : auto ; /* like stor h ø yre- og venstremarg */ display : flex ; /* angir at vi vil bruke flexbox */ flex- direction : column ; /* plasserer bokser i en kolonne */ } . topptekst { height : 120 px ; /* overskrift- / toppteksth ø yde */ background- color : #909090; /* en lys gr å farge */
Sidelayout med CSS
11 12 13 14 15 16 17 18 19 20 21 22 23
83
padding : 5 px ; /* avstand mellom bokskant og innhold */ margin : 5 px ; /* luft rundt overskrift- / topptekstboks */
} . meny { background- color : # f04605 ; /* oransje farge */ padding : 5 px ; /* avstand mellom bokskant og innhold */ margin : 5 px ; /* luft rundt menyboks */ } . innhold { background- color : #909090; /* en lys gr å farge */ padding : 5 px ; /* avstand mellom bokskant og innhold */ margin : 5 px ; /* luft rundt innholdsboks */ }
Kode 8.4: CSS-kode for vannrett meny.
Figur 8.4: Resultatet av kode 8.3 og 8.4 i en nettleser.
Når du har et slikt oppsett på plass, er det bare å plassere menyer, tabeller, bilder eller andre elementer inni de forskjellige <div>-elementene.
Oppgaver 8.3 Lag et HTML-dokument som inneholder koden fra kode 8.3. 8.4 Lag et CSS-dokument der du gir utseende til de fire <div>-elementene i HTMLkoden din. Prøv deg fram med de forskjellige egenskapene. 8.5 Hva skjer om du skalerer ned vinduets størrelse (gjør nettleservinduet mindre)? 8.6 Gjør om bredden til .innpakning til 70%. Hva skjer når du skalerer ned vinduets størrelse nå? 8.7 Gjør endringer i begge dokumentene slik at du også får en boks der du kan skrive litt bunntekst (altså en ny boks nedenfor «innhold»). 8.8 Legg inn en overskrift i «topptekst»-boksen. 8.9 Lag en vannrett meny i «meny»-boksen (bruk "#" i lenkene). 8.10 Legg inn noen overskrifter og litt fylltekst fra www.lipsum.com i «innhold»boksen. Husk å bruke avsnitt (<p>). 8.11 Skriv ditt eget navn i «bunntekst»-boksen.
84 Sidelayout med CSS
8.4
Layout med sidestilt meny
Et mye brukt alternativ til vannrett meny er sidestilte menyer. De kan plasseres på høyre, venstre eller begge sider av innholdet (se b og c i figur 8.1). I eksemplet med den vannrette menyen plasserte vi <div>-elementene våre i en kolonne. Her tar vi utgangspunkt i det samme oppsettet, men vi skal i stedet plassere <div>-elementene i en rad som brytes slik at de danner flere rader. HTML-koden for å lage sidestilt meny er identisk med koden vi brukte for å lage vannrett meny. Den er likevel gjengitt i kode 8.5 for oversiktens skyld. Den store forskjellen her er at vi ønsker å plassere «toppteksten» vår på en rad for seg selv, mens «meny» og «innhold» skal dele en rad. 1
< div class = " innpakning " >
2 3 4 5
< div class = " topptekst " > Her kan du skrive en overskrift eller plassere et bilde . </ div >
6 7 8 9
< div class = " meny " > Her kan du lage en meny . </ div >
10 11 12 13
< div class = " innhold " > Her kan du skrive innholdet ditt . </ div >
14 15
</ div > <! - - innpakning -->
Kode 8.5: HTML-koden vi benytter for å plassere en sidestilt meny. Dette er den samme koden som vi brukte i eksemplet med vannrett meny.
I kode 8.6 vises CSS-koden som benyttes for å gi utseende til klassene i kode 8.5. Vi starter med «innpakningen», som har fått en liten endring fra forrige eksempel. Vi har endret flex-direction fra column til row. I tillegg har vi lagt til egenskapen flex-wrap: wrap; for å godta at rader brytes. Hvis vi ikke har med denne, vil nettleseren forsøke å plassere alle boksene våre (topptekst, meny og innhold) på én rad. Videre har vi gjort noen små endringer i «topptekst», «meny» og «innhold». I «topptekst» har vi lagt til flex-basis: 100%; for å sørge for at boksen dekker en hel rad alene. I «meny» har vi lagt til flex-basis: 200px; for å sørge for at menyen har en bredde på 200px. Ved å angi flex-basis sørger vi for at en boks aldri blir mindre enn verdien vi angir (men den kan bli større). I «innhold» har vi lagt til flex: 1; for å sørge for at innholdsboksen fyller all ledig plass i raden den befinner seg i (samme rad som menyen). Egenskapen flex bestemmer om et element skal utvide seg eller ikke. Ved å bruke flex på flere elementer i samme rad vil alle utvide seg avhengig av verdien som settes. Dersom alle får verdien 1, blir elementene like store.
Sidelayout med CSS
85
Til slutt har de tre boksene «topptekst», «meny» og «innhold» fått angitt order. Denne kan vi unngå dersom vi ønsker at boksene skal havne i samme rekkefølge som i HTML-koden. Men dersom vi ønsker å la meny og innhold bytte plass, kan vi nå gjøre det lett ved å gi innhold order: 2; og meny order: 3;. Resultatet av disse kodene kan du se i figur 8.5. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
. innpakning { width : 800 px ; /* innpakningens bredde */ background- color : #404040; /* en m ø rk gr å farge */ margin : auto ; /* like stor h ø yre- og venstremarg */ display : flex ; /* angir at vi vil bruke flexbox */ flex- direction : row ; /* plasserer innholdet i en rad */ flex- wrap: wrap ; /* lar oss bryte rader */ } . topptekst { flex- basis : 100%; /* fyller innpakningens bredde */ height : 120 px ; /* overskrift- / toppteksth ø yde */ background- color : #909090; /* en lys gr å farge */ padding : 5 px ; /* avstand mellom bokskant og innhold */ margin : 5 px ; /* luft rundt overskrift- / topptekstboks */ order : 1; /* angir rekkef ø lgen p å boksene */ } . meny { flex- basis : 200 px ; /* aldri smalere enn 200 px */ background- color : #329632; /* gr ø nn */ padding : 5 px ; /* avstand mellom bokskant og innhold */ margin : 5 px ; /* luft rundt menyboks */ order : 2; /* angir rekkef ø lgen p å boksene */ } . innhold { background- color : #909090; /* en lys gr å farge */ flex: 1; /* fyller ut all ledig plass i bredden */ order : 3; /* angir rekkef ø lgen p å boksene */ padding : 5 px ; /* avstand mellom bokskant og innhold */ margin : 5 px ; /* luft rundt menyboks */ }
Kode 8.6: CSS-kode for sidestilt meny. Ved å endre order kan vi la elementene bytte plass.
Figur 8.5: Resultatet av kode 8.6 i en nettleser.
86 Sidelayout med CSS
Oppgaver 8.12 Lag et HTML-dokument som inneholder koden fra kode 8.5. 8.13 Lag et CSS-dokument der du gir utseende til de fire <div>-elementene i HTMLkoden din. Prøv deg fram med de forskjellige egenskapene. 8.14 Gjør endringer i begge dokumentene slik at du også får en boks der du kan skrive litt bunntekst (altså en ny boks nedenfor «innhold»). 8.15 Hva skjer om du skalerer ned vinduets størrelse (gjør nettleservinduet mindre)? 8.16 Gjør om bredden til .innpakning til 70%. Hva skjer når du skalererer ned vinduets størrelse nå? 8.17 Legg inn en overskrift i «topptekst»-boksen. 8.18 Lag en loddrett meny i «meny»-boksen (bruk "#" i lenkene). 8.19 Legg inn noen overskrifter og litt fylltekst fra www.lipsum.com i «innhold»boksen. Husk å bruke avsnitt (<p>). 8.20 Skriv ditt eget navn i «bunntekst»-boksen. 8.21 La «meny»-boksen og «innhold»-boksen bytte plass ved å endre på order i CSS-dokumentet.
Sidelayout med CSS
8.5
87
Andre muligheter
I dette kapitlet har vi sett på tre konkrete oppsett, men mulighetene er mange. For eksempel kan du lage en nettside som består av ni like store bokser fordelt på tre rader. En flexbox gir oss muligheten til å gjøre dette og mange andre ting på en enkel måte. Vi har bare sett på nettsider som ligger midtstilt i nettleseren. Et annet vanlig oppsett er nettsider som fyller hele nettleserens vindu. Dette kan vi oppnå ved å angi width: 100%; i «innpakning»-elementet. Dersom du ønsker å få innholdet helt ut til kanten, må du i tillegg sette margin: 0; og padding: 0; i både <body> og <html>-elementet. Alternativt kan du benytte *. Ved å angi egenskaper til «elementet» *, endres samtlige HTMLelementer. Det vil nok føre til at du må legge til margin og padding i enkelte andre elementer. Nye strukturelementer i HTML5 I dette kapitlet har vi benyttet oss av <div>-elementer med forskjellige klasser (for eksempel <div class="innhold">). Dette er en naturlig og grei måte å strukturere sider på, men det finnes også et alternativ som kom med HTML5. Her har elementer som <header>, <main> og <footer> blitt introdusert. De kan benyttes på samme måte som <div>-elementer og gis CSS-egenskaper hver for seg. De har ingen store fordeler for oss foreløpig, men de bidrar til å skape en god struktur, og det blir lettere for andre programmer å tolke hva nettsiden inneholder. Du kan lese mer om HTML5 på www.w3schools.com.
HTML5 logo hentet fra World Wide Web Consortium (W3C).
8.6
Hvordan velge farger?
Det er alltid lurt å tenke gjennom fargene man ønsker å bruke, før man starter på et nytt nettsted. På den måten kan man få farger som passer fint sammen. Det beste er å lage sine egne fargekombinasjoner, men det finnes også gode anbefalinger på området. I figur 8.6 (på neste side) vises fire eksempler på farger som passer godt sammen. Det finnes også mange nettsteder som tilbyr flotte fargekombinasjoner som kan benyttes. Du finner dem ved å gjøre et søk på «colour palette» (eng. for fargepalett).
88 Sidelayout med CSS
For å lage egne fargekombinasjoner kan bildebehandlingsprogrammer benyttes. De har et eget verktøy der man kan velge farger. Når du har valgt en farge du liker, kan du skrive ned den tilhørende heksadesimale fargekoden og bruke den i CSS-koden din.
#2B2B2B
#005A31
#558C89
#E44424
#DE1B1B
#A8CD1B
#74AFAD
#67BCDB
#F6F6F6
#CBE32D
#D9853B
#A2AB58
#E9E581
#F3FAB6
#ECECEA
#FFFFFF
Figur 8.6: Eksempler på farger som passer sammen.
Oppgaver 8.22 Prøv deg fram med forskjellige farger på nettsiden din. I tillegg til å bruke farger fra figur 8.6 bør du forsøke å finne noen farger selv. For eksempel kan du gjøre det i et bildebehandlingsprogram eller ved å søke på nettet.
Sidelayout med CSS
89
Sammendrag Vi bruker CSS og HTML-elementet <div> for å lage layout. Alle bokser/områder får sitt eget <div>-element med en egen CSS-klasse (class). I CSS-klassen angis størrelse, farge og andre egenskaper vi ønsker å gi til en boks. For å plassere bokser nedenfor hverandre og ved siden av hverandre benytter vi en flexbox (display: flex;) med egenskapen flex-direction satt til enten column (kolonne) eller row (rad).
Hente informasjon fra databaser (SELECT)
175
Kapittel 16
Hente informasjon fra databaser (SELECT)
Etter dette kapitlet skal du kunne • hente ut verdier fra en tabell i en database • hente ut verdier fra to tabeller samtidig • hente ut et utvalg fra en tabell i en database • sortere verdier som hentes ut • skrive ut resultater på nettsider • sende og motta variabler
SQL («Structured Query Language») er et eget språk, men siden vi bruker det i PHP-kode, kan det kanskje virke som om det er en del av PHP. Vi kommer til å benytte SQL til fire forskjellige formål: 1) hente ut informasjon fra databaser (dette kapitlet), 2) sette inn informasjon i databaser, 3) slette informasjon fra databaser og 4) endre informasjon i databaser. Du bruker det egentlig også når du jobber i MySQL Workbench. Når du lager tabeller, ser på innholdet i dem, eller setter inn nye verdier, skriver programmet automatisk SQL-kode for deg. Du kan se at ordet «Query» står på fanene øverst i programmet, der kan du også se hvilke spørringer (eng. queries) som kjøres. Du kan lære mye av å følge med litt ekstra der. Ordet spørring (eng. query) refererer til at vi sender en forespørsel til en database. Vi ønsker å gjennomføre en eller annen operasjon, og denne operasjonen sender vi i en spørring. I dette kapitlet skal vi se på SELECT-spørringen, som kan hente ut informasjon fra tabeller i en database.
pssst Du finner videoer og andre ressurser på nettstedet på Lokus.
176 Hente informasjon fra databaser (SELECT)
16.1
Hente ut fra én tabell
Koble til databasen Først må vi koble oss til databasen vår (som vi så på i forrige kapittel). Undersøk først at du har laget databasen tegneseriefigurer (som vi laget i kapittel 14). Det er denne databasen vi kommer til å bruke i de neste kapitlene. For oversiktens skyld gjengis koden som brukes for å koble seg til databasen, i kode 16.1. Vi har også tatt med all HTML-kode i dette eksemplet. Husk at denne filen må lagres i mappen www som du finner i mappen C:\wamp, eventuelt på et eksternt webhotell. Det er alltid lurt å opprette nye mapper for nye prosjekter, lag derfor en mappe du kaller select i mappen www. I denne mappen kan du lagre kode 16.1, kall gjerne filen for index.php. Legg merke til at vi har fjernet beskjeden «Koblingen virker» fra denne koden. For å åpne filen i en nettleser holder det ikke å åpne den som en vanlig HTMLfil. Vi må sørge for at den blir kjørt fra tjeneren vår (localhost). For å åpne filen må du først starte WampServer. Deretter kan du åpne en nettleser, skrive «localhost» i adressefeltet og trykke på enter. Nå kommer det opp et vindu der du kan se mappen du nettopp laget. Trykk på den og du får se nettsiden din (som foreløpig er tom). Alternativt kan du skrive localhost/select/ i nettleseren (eller localhost/select/filnavn.php dersom du kalte filen noe annet enn index.php). Resten av koden som gjennomgås i dette kapitlet, må du skrive innenfor <?phpog ?>-taggene, nedenfor tilkoblingskoden din. 1 2 3 4 5 6 7
<! doctype html > < html > < head > < title > SELECT - sp ø rringer </ title > < meta charset =" UTF -8" > </ head > < body >
8 9 10 11 12 13 14
<? php // T il ko bl ing si nf orm as jo n $tjener = " localhost " ; $brukernavn = " root " ; $passord = " " ; $database = " tegneseriefigurer " ;
15 16 17
// Opprette en kobling $kobling = new mysqli ( $tjener , $brukernavn , $passord , $database ) ;
18 19 20 21 22
// Sjekk om koblingen virker if ( $kobling - > connect_error ) { die ( " Noe gikk galt : " . $kobling - > connect_error ) ; }
Hente informasjon fra databaser (SELECT)
177
23 24 25 26
// Angi UTF -8 som tegnsett $kobling - > set_charset ( " utf8 " ) ; ?>
27 28 29
</ body > </ html >
Kode 16.1: Opprette en tilkobling.
SQL-spørringen Da er vi klare for å skrive spørringen vår, og det er i spørringen mye av magien skjer. Det er spørringen som avgjør hva som hentes ut fra databasen, og hvordan det hentes ut (for eksempel om det sorteres). Vi skal derfor se generelt på spørringer før vi går videre. Alle spørringene i dette kapitlet bruker databasen tegneseriefigurer. Det kan derfor være greit samtidig å se på datamodellen til denne databasen (som er gjengitt i figur 16.1).
Figur 16.1: Datamodellen til databasen vi bruker i dette kapitlet.
Generell SELECT-spørring En SELECT-spørring skrives generelt slik: SELECT kolonner FROM tabell
Det er vanlig å skrive SQL-kode med store bokstaver (for oversiktens skyld). I setningen ovenfor er det bare ordene med små bokstaver som vi ønsker å endre. Vi skal først se på eksempler der vi henter ut en liste over bladene vi har lagret i databasen vår. Vi kan enten hente ut alle kolonnene fra tabellen, slik: SELECT * FROM blad
Eller vi kan hente ut enkeltkolonner, slik: SELECT blad_id, bladnavn FROM blad
178 Hente informasjon fra databaser (SELECT)
Du kan trygt holde deg til den første varianten, der vi henter ut alle kolonner fra en tabell ved hjelp av *. Hvis ikke tabellen har mange kolonner og et stort antall rader, gjør det ikke noe om du henter ut mer enn du har bruk for (vi trenger nemlig ikke bruke alt vi henter ut). For store nettsider med mange brukere vil det ikke være like lurt å bruke *. Hvis nettsiden ofte henter store datamengder fra store databaser, kan den fort bruke opp sitt avsatte minne på tjeneren.
16.2
SQL i MySQL Workbench
Alle SQL-eksempler i dette og de tre neste kapitlene kan også kjøres/testes i programmet MySQL Workbench. Det eneste unntaket er kodene som inneholder PHP-variabler; i slike tilfeller må du erstatte PHP-variabelen med passende tall eller ord. For å skrive SQL-kode i MySQL Workbench må du først koble deg på din tilkobling (localhost under «MySQL Connections»). Deretter må du gjøre databasen du ønsker å jobbe med, aktiv ved å dobbeltklikke på navnet under «SCHEMAS» til venstre (eller høyreklikke og velge «Set as Default Schema»). Nå kan du skrive SQL-kode i vinduet der det står «Query 1». Hvis dette vinduet ikke vises kan du velge «File» > «New Query Tab». Skriv inn SQL-koden du ønsker å kjøre, og trykk på knappen med lynsymbolet («Execute the selected portion of the script or everything, if there is no selection»). Resultatet vises nedenfor koden din. Oppgaver 16.1 Prøv ut en spørring som henter alt fra tabellen blad i MySQL Workbench. 16.2 Skriv en spørring som henter alt fra tabellen figur.
16.3
Flere muligheter med SELECT
Sortering Det er ofte ønskelig å sortere det vi henter ut fra en database. Hvis du har en liste med navn, vil det være naturlig å sortere på etternavn. I vårt tilfelle finnes det kanskje ingen naturlig rekkefølge på bladene våre, men det er alltid oversiktlig å sortere noe på navn. For å sortere et resultat fra en spørring kan vi skrive: SELECT * FROM blad ORDER BY bladnavn
Hvis vi ikke skriver noe, blir bladene sortert etter primærnøkkelen. Hvis du ønsker å sortere «omvendt» (altså i synkende rekkefølge), kan du skrive:
Hente informasjon fra databaser (SELECT)
179
SELECT * FROM blad ORDER BY bladnavn DESC
DESC er en forkortelse for det engelske ordet «descending» som betyr avtagende/synkende.
Hente ut et utvalg Ofte ønsker vi bare å hente ut deler av en tabell. Hvis vi lager et nettsted der man kan søke på blader, og noen søker på «Asterix», ønsker vi bare å hente ut informasjon om Asterix. Det kan vi gjøre slik (legg merke til apostrofene): SELECT * FROM blad WHERE bladnavn='Asterix'
Vi kan også hente ut tall (da kan vi velge om vi vil ha med apostrofer): SELECT * FROM blad WHERE blad_id=2
Ofte vil vi bruke en variabel i en slik spørring. Vi kan for eksempel bruke variabelen $blad_id=3 slik: SELECT * FROM blad WHERE blad_id=$blad_id
Hvis vi har en tekstbit i en variabel ($bladnavn="Asterix"), må vi bruke apostrofer slik: SELECT * FROM blad WHERE bladnavn='$bladnavn'
I PHP-kapitlet leste du om «sending av variabler». Senere i dette kapitlet kan du se et eksempel på dette. I slike tilfeller bruker vi WHERE for å hente ut det vi ønsker.
Kombinere utvalg og sortering Det hender også at vi vil hente ut et utvalg og sortere det. Da kan vi kombinere WHERE og ORDER BY slik: SELECT * FROM figur WHERE blad_id=2 ORDER BY figurnavn
Her henter vi ut alle figurer fra figur-tabellen som har blad_id=2. Videre sorterer vi dem etter figurnavn.
16.4
Lage et resultat
Nå som vi har sett på noen varianter av SELECT-spørringen, kan vi se på et praktisk eksempel. Hvis du legger til koden fra kode 16.2 (på neste side) nedenfor tilkoblingen din, kan du se resultatet av en enkel spørring. I dette tilfellet får vi se hvor mange rader som finnes i tabellen vår.
180 Hente informasjon fra databaser (SELECT)
1 2
$sql = " SELECT * FROM blad " ; $resultat = $kobling - > query ( $sql ) ;
3 4
echo " Sp ø rringen $sql ga $resultat - > num_rows rader . " ;
Kode 16.2: Lage et resultat fra en enkel spørring.
I denne koden lager vi to variabler. Den ene variabelen ($sql) er rett og slett en tekstbit. Det er først når vi putter denne tekstbiten inn i funksjonen query, at noe skjer. Vi bruker variabelen $kobling som vi definerte da vi koblet oss til databasen for å utføre en spørring (med query og $sql). Resultatet lagrer vi i variabelen $resultat, og funksjonen num_rows viser oss hvor mange rader spørringen resulterer i (her 4 ettersom vi har registrert 4 blader).
Oppgaver Husk at SQL-spørringer kan prøves ut i MySQL Workbench. 16.3 Skriv en spørring som sorterer resultatet i stigende rekkefølge. Hva må du endre for å få sortert resultatet i synkende rekkefølge? 16.4 Skriv en spørring som bare henter informasjon om Obelix (hint: WHERE). 16.5 Lag et PHP-dokument der du kjører disse spørringene som i kode 16.2. Hvor mange rader gir de forskjellige spørringene?
Feilsøking Hvis du får en feilmelding i et PHP-dokument som inneholder en SELECTspørring, er det stor sannsynlighet for at feilen ligger i selve spørringen. Husk at du alltid kan skrive echo $sql; for å se hvordan spørringen faktisk ser ut, dette kan være til stor hjelp når du skal lete etter feil.
Skrive ut resultatet Nå er det ikke antall rader vi er mest interessert i når vi henter noe fra en database. Vi ønsker å se selve innholdet i tabellene våre. Dette innholdet kan vi skrive ut på mange forskjellige måter, og den viktigste måten i dette kurset er nok tabellformatet, men i teorien kan vi skrive ut resultat akkurat slik vi ønsker. Når vi skal skrive ut et resultat, må vi angi hvordan vi ønsker å formatere én rad fra resultatet. Deretter gjentar vi den formateringen for alle de andre radene. Nedenfor vises fire forskjellige måter å gjøre dette på.
Hente informasjon fra databaser (SELECT)
181
Uten formatering For å gå gjennom alle elementene i et resultat bruker vi ofte en while-løkke. Denne løkken henter ut én og én rad fra en tabell i en database. Hver rad blir plassert i en assosiativ array (forklart i kapittel 10), og nøklene i den assosiative arrayen blir kolonnenavnene fra tabellen. Det vil si at vi får nøklene blad_id og bladnavn dersom vi har hentet alt fra tabellen blad. Vi kan kalle den assosiative arrayen det vi måtte ønske, men det er passende å kalle den $rad fordi den inneholder rader. Selve arrayen henter vi ut fra resultatet vårt ($resultat) med funksjonen (fetch_assoc). I kode 16.3 kan du se et eksempel på bruk av en while-løkke for å skrive ut alt fra blad-tabellen. Legg merke til hvordan variablene fra den assosiative arrayen plasseres i midlertidige variabler med enklere navn, for å få en mer oversiktlig kode, og for å redusere muligheten for feil. I figur 16.2 kan du se resultatet, den eneste formateringen som er brukt, er mellomrom og linjeskift (<br>); i tillegg er den siste linjen fra kode 16.2 fjernet. 1 2 3
while ( $rad = $resultat - > fetch_assoc () ) { $blad_id = $rad [ " blad_id " ]; $bladnavn = $rad [ " bladnavn " ];
4 5 6
}
echo " $blad_id $bladnavn <br > " ;
Kode 16.3: Skrive ut et resultat på enkleste måte.
Figur 16.2: Resultatet av kode 16.3 (og kode 16.4) i en nettleser.
Du får det samme resultatet ved å skrive kode 16.4 i stedet, men det er vanskeligere å lese, og gir et mer uoversiktlig resultat. Legg merke til at anførselstegn ikke brukes rundt nøklene i arrayen $rad når elementene skrives ut mellom anførselstegnene til echo-uttrykket. 1 2 3
while ( $rad = $resultat - > fetch_assoc () ) { echo " $rad [ blad_id ] $rad [ bladnavn ] <br > " ; }
Kode 16.4: Kortere kode, men mindre oversiktlig.
182 Hente informasjon fra databaser (SELECT)
Som en enkel liste For å skrive ut resultatet vårt på en litt mer avansert måte er det viktig å forstå hvordan while-løkken fungerer. Hvor skal vi skrive <ul> og </ul> hvis vi ønsker å lage en punktliste av resultatene våre? Vi ønsker å plassere hver rad fra tabellen vår i et <li>-element, men vi ønsker ikke å lage et nytt <ul>-element for hver rad. Derfor plasserer vi <ul> og </ul> på utsiden av while-løkken, mens vi plasserer <li> inne i while-løkken. I kode 16.5 er dette gjort. I tillegg er det lagt til et punktum for å gi en ryddig utskrift. Resultatet kan du se i figur 16.3. 1
echo " <ul > " ; // Starter listen
2 3 4 5
while ( $rad = $resultat - > fetch_assoc () ) { $blad_id = $rad [ " blad_id " ]; $bladnavn = $rad [ " bladnavn " ];
6 7 8
}
echo " <li > $blad_id . $bladnavn </ li > " ;
9 10
echo " </ ul > " ; // Avslutter listen
Kode 16.5: Kode som lager liste av resultatet vårt.
Figur 16.3: Resultatet av kode 16.5 i en nettleser.
I en tabell Vi lager tabeller nesten på samme måte som vi lager lister. Vi må starte og avslutte tabellen utenfor while-løkken. I tillegg må vi lage en rad med overskrifter ovenfor while-løkken (vi ønsker ikke at overskriftene skal gjentas). Det vi ønsker å repetere, er rader i tabellen fra databasen, og det gjør vi ved å opprette rader inne i while-løkken. I kode 16.6 kan du se et eksempel, og i figur 16.4 kan du se resultatet. Alle eksemplene i dette kapitlet kan også få endret utseende med CSS (se kapittel 7) for finere utskrifter. 1 2 3 4 5
echo " < table > " ; // Starter tabellen echo " <tr > " ; // Lager en rad med overskrifter echo " <th > blad_id </ th > " ; echo " <th > bladnavn </ th > " ; echo " </ tr > " ;
Hente informasjon fra databaser (SELECT)
183
6 7 8 9
while ( $rad = $resultat - > fetch_assoc () ) { $blad_id = $rad [ " blad_id " ]; $bladnavn = $rad [ " bladnavn " ];
10 11 12 13 14 15
}
echo " <tr > " ; echo " <td > $blad_id </ td > " ; echo " <td > $bladnavn </ td > " ; echo " </ tr > " ;
16 17
echo " </ table > " ; // Avslutter tabellen
Kode 16.6: Kode som lager tabell av resultatet vårt.
Figur 16.4: Resultatet av kode 16.6 i en nettleser.
På annen måte Vi kan som nevnt formatere resultatet vårt slik vi måtte ønske. Så lenge du forstår hvordan while-løkken fungerer, kan du formatere resultatene på mange forskjellige måter. Vi kan også manipulere verdiene som hentes ut. Vi har for eksempel lagret informasjon i figur-tabellen om det året tegneseriefigurene våre dukket opp. Ved å bruke koden nedenfor kan vi regne ut «alderen» til de ulike figurene: $alder = date("Y")- $aarstall;
Her benyttes funksjonen date("Y"), som gir året vi er i nå. På denne måten kan vi skrive ut verdier som baserer seg på den informasjonen vi har lagret i databasen.
184 Hente informasjon fra databaser (SELECT)
Oppgaver 16.6 Foreløpig har vi sett på tabellen blad. Lag tre dokumenter der du skriver ut informasjon om figurene: a Uten formatering b Som en liste c I en tabell 16.7 Legg til en kolonne i tabellen med figurenes alder. 16.8 Gjør om sorteringen av figurene og se hvordan tabellen endrer seg.
16.5
Hente ut fra flere tabeller
Et enkelt eksempel Hittil har vi bare hentet informasjon fra tabellen blad. Nå skal vi se på en vanlig utfordring som oppstår når vi skal hente ut informasjon fra en tabell med en fremmednøkkel, i dette tilfellet tabellen figur. En enkel SELECT-spørring fra denne tabellen kan gi oss en tabell som den du kan se i figur 16.5.
Figur 16.5: Tabell med figurene våre.
Denne tabellen er ikke akkurat slik vi ønsker at den skal se ut. Det hadde vært mer oversiktlig om vi fikk inn bladenes navn i stedet for deres id, men vi har ikke lagret bladenes navn i figur-tabellen. Derfor må vi slå sammen de to tabellene våre (slik at vi kan få fatt i riktig blad fra blad-tabellen). For å få til det må vi lage en spørring med JOIN. Denne spørringen brukes slik:
Hente informasjon fra databaser (SELECT)
185
SELECT figurnavn, bladnavn FROM figur JOIN blad ON figur.blad_id=blad.blad_id
La oss se på denne spørringen bit for bit: SELECT figurnavn, bladnavn
Denne første biten angir kolonnene vi ønsker å hente ut, vi ønsker oss her kolonnene figurnavn (som finnes i tabellen figur) og bladnavn (som finnes i tabellen blad). Vi kan bruke * her også, men det kan fort føre til problemer. I akkurat dette tilfellet går det bra, men hvis tabellene har kolonner med like navn, vil det gå galt. FROM figur JOIN blad
I denne biten angir vi tabellene vi ønsker å hente informasjonen fra. Hovedtabellen vår er her figur, og i tillegg ønsker vi oss noe fra tabellen blad (nemlig bladenes navn). Vi skriver JOIN foran det andre tabellnavnet. ON figur.blad_id=blad.blad_id
Til slutt angir vi hvordan våre to tabeller skal kombineres. I alle tilfeller i dette kurset vil det her være snakk om en fremmednøkkel og en primær-nøkkel. I dette tilfellet kombinerer vi fremmednøkkelen blad_id fra tabellen figur (figur.blad_id) med primærnøkkelen blad_id fra tabellen blad (blad.blad_id). I kode 16.7 nedenfor ser du et eksempel på bruk av denne spørringen. Resultatet kan du se i figur 16.6 (på neste side). 1
2
$sql = " SELECT figurnavn , bladnavn FROM figur JOIN blad ON figur . blad_id = blad . blad_id " ; $resultat = $kobling - > query ( $sql ) ;
3 4 5 6 7 8
echo " < table > " ; // Starter tabellen echo " <tr > " ; // Lager en rad med overskrifter echo " <th > figurnavn </ th > " ; echo " <th > bladnavn </ th > " ; echo " </ tr > " ;
9 10 11 12
while ( $rad = $resultat - > fetch_assoc () ) { $figurnavn = $rad [ " figurnavn " ]; $bladnavn = $rad [ " bladnavn " ];
13 14 15 16
echo " <tr > " ; echo " <td > $figurnavn </ td > " ; echo " <td > $bladnavn </ td > " ;
186 Hente informasjon fra databaser (SELECT)
17 18
}
echo " </ tr > " ;
19 20
echo " </ table > " ; // Avslutter tabellen
Kode 16.7: Kombinering av to tabeller.
Figur 16.6: Resultatet av kode 16.7 i en nettleser.
Like kolonnenavn I noen tilfeller kan to tabeller inneholde kolonner med like navn. I vårt eksempel kunne vi ha hatt årstall også i blad-tabellen (året for bladets første utgivelse). Hvis vi da vil hente ut begge årstallene, får vi en konflikt. Dette kan vi ordne ved å angi midlertidige navn (et alias) til årstall-kolonnene slik: SELECT figurnavn, figur.aarstall AS figuraar, bladnavn, blad.aarstall AS bladaar FROM figur JOIN blad ON figur.blad_id=blad.blad_id
På denne måten får vi separert de to årstall-kolonnene, og gitt dem nye midlertidige navn. Vi spesifiserer først hvilken tabell vi skal hente kolonnen aarstall fra, før vi bruker ordet AS for å angi et nytt midlertidig navn. Når vi så skal hente ut disse fra $rad-arrayen, kan vi skrive: $figuraarstall = $rad["figuraar"]; $bladaarstall = $rad["bladaar"];
Hente informasjon fra databaser (SELECT)
187
Tre tabeller Foreløpig har vi bare sett på JOIN med to tabeller, men i situasjoner der vi har en mange-til-mange-kobling, får vi behov for å bruke JOIN med tre tabeller. I figur 16.7 vises datamodellen vi så på i kapittel 13. Hvis vi ønsker å skrive ut personenes fjellturer fra denne databasen, er det ikke nok å bruke JOIN på tabellene person og personfjell (vi får bare med fjell_id, ikke fjellenes navn). For å få med fjellenes navn må vi også bruke JOIN på tabellen fjell. Spørringen som lar oss slå sammen tabellene person og personfjell, ligner på den vi brukte for å slå sammen tabellen figur med tabellen blad, og ser slik ut: SELECT fornavn, etternavn, fjell_id FROM person JOIN personfjell ON person.person_id = personfjell.person_id
For å få med tabellen fjell fortsetter vi på samme måten. Vi legger til en ekstra JOIN på slutten, slik: SELECT fornavn, etternavn, fjell_id FROM person JOIN personfjell ON person.person_id = personfjell.person_id JOIN fjell ON personfjell.fjell_id = fjell.fjell_id
Her bruker vi altså først JOIN for å koble tabellen person med tabellen personfjell. Deretter bruker vi en ekstra JOIN for å koble disse to tabellene med tabellen fjell.
Figur 16.7: Datamodellen som organiserer personer og fjellturer (fra kapittel 13).
188 Hente informasjon fra databaser (SELECT)
Oppgaver Husk at SQL-spørringer kan prøves ut i MySQL Workbench. 16.9 Lag en JOIN-spørring som skriver ut figurene med tilhørende bladnavn i en tabell. 16.10 Legg til figurenes alder i den samme tabellen. 16.11 Sorter figurene etter figurnavn.
16.6
Sending av variabler
Sende én variabel Her kommer et av de beste virkemidlene vi har i PHP, nemlig sending av variabler. I figur 16.4 på side 183 kan du se utskriften vi laget fra tabellen blad. En naturlig videreutvikling av denne tabellen er å legge til en lenke som gjør at vi kan lære mer om bladene. I vårt tilfelle vil det si å få tilgang til figurene som hører til bladet vi trykker på. Det kan vi få til ved å gjøre en liten endring i kode 16.6, slik at navnene til bladene blir til lenker. Vi må da gjøre om linjen: echo "<td>$bladnavn</td>";
til echo "<td><a href='figurer.php?blad_id=$blad_id'>$bladnavn</a></td>";
Her lager vi egentlig en alminnelig lenke til filen figurer.php, men vi legger til litt ekstra informasjon (?blad_id=$blad_id). Dette gjør at vi får sendt med id-en til bladet vi trykket på. Det er også viktig at det er id-en vi sender (og ikke for eksempel bladets navn), siden tabellen figur bare har lagret bladets id (som fremmednøkkel). Legg merke til at vi bruker enkle apostrofer i HTMLkoden (a href) og ikke anførselstegn. Det skyldes som nevnt tidligere at et anførselstegn i HTML-koden vil avbryte echo-uttrykket vårt. I kode 16.8 kan du se koden slik den ser ut etter endringen (det er bare en liten endring), og i kode 16.9 kan du se et utsnitt av hvordan koden vises i en nettleser («Vis kilde»/«View source»). Legg merke til teksten som står i lenkene etter kjøring (all PHP-kode er erstattet av HTML-kode). 1 2 3 4 5
echo " < table > " ; // Starter tabellen echo " <tr > " ; // Lager en rad med overskrifter echo " <th > blad_id </ th > " ; echo " <th > bladnavn </ th > " ; echo " </ tr > " ;
6 7
while ( $rad = $resultat - > fetch_assoc () ) {
Hente informasjon fra databaser (SELECT)
189
$blad_id = $rad [ " blad_id " ]; $bladnavn = $rad [ " bladnavn " ];
8 9 10
echo " <tr > " ; echo " <td > $blad_id </ td > " ; echo " <td > < a href = ' figurer . php ? blad_id = $blad_id '> $bladnavn </ a > </ td > " ; echo " </ tr > " ;
11 12 13 14 15 16
}
17 18
echo " </ table > " ; // Avslutter tabellen
Kode 16.8: Lenker som sender en variabel.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
< tr >
< th > id </ th > < th > blad </ th > </ tr > < tr > < td >1 </ td > < td > <a href = ' figurer . php ? blad_id =1 ' > Donald Duck & Co </ a > </ td > </ tr > < tr > < td >2 </ td > < td > <a href = ' figurer . php ? blad_id =2 ' > Asterix </ a > </ td > </ tr > < tr > < td >3 </ td > < td > <a href = ' figurer . php ? blad_id =3 ' > Batman </ a > </ td > </ tr > < tr > < td >4 </ td > < td > <a href = ' figurer . php ? blad_id =4 ' > Pondus </ a > </ td > </ tr >
Kode 16.9: Litt av koden som vises i nettleseren når kode 16.8 kjøres.
Motta en variabel Vi lager en egen side for å motta variabelen som ble sendt. I koden ovenfor bestemte vi at den siden skal hete figurer.php. Hvis vi trykker på en av lenkene i koden ovenfor, vil vi komme til filen figurer.php med litt tilleggsinformasjon. I figur 16.8 (på neste side) kan du se hva nettleserens URL1 viser etter at vi har trykket på lenken «Asterix». Nå mangler vi bare en metode for å motta variabelen, slik at vi kan bruke den i en ny spørring. Det ble delvis gjennomgått i kapitlet om PHP (kapittel 10), men det er en viktig metode, så vi ser på det en gang til her. 1
URL står for «Uniform Resource Locator», en URL er en adresse til en ressurs (nettsteder i vårt tilfelle).
190 Hente informasjon fra databaser (SELECT)
Figur 16.8: Nettleserens URL ved sending av variabel.
Vi lager først et nytt dokument med et standard HTML-oppsett. Deretter legger vi til en liten PHP-bit som henter variabelen. I utgangspunktet holder det å skrive $_GET["blad_id"] for å få tak i variabelen, men som nevnt tidligere bør vi legge inn en test for å se om variabelen faktisk eksisterer. Dette gjør vi for å unngå feilmelding når vi går rett til figurer.php. I kode 16.10 kan du se hele koden til figurer.php, foreløpig er det eneste resultatet av koden tallet (id-en) som ble sendt. I tillegg er det lagt inn en liten feilmelding som skrives ut dersom variabelen ikke eksisterer. Funksjonen die avbryter kjøringen av siden umiddelbart, slik at alt vi gjør lenger ned i koden, ikke blir vist dersom variabelen ikke eksisterer. 1 2 3 4 5 6 7
<! doctype html > < html > < head > < title > SELECT - sp ø rringer </ title > < meta charset =" UTF -8" > </ head > < body >
8 9 10 11 12 13 14 15 16
<? php if ( isset ( $_GET [ " blad_id " ]) ) { $blad_id = $_GET [ " blad_id " ]; echo $blad_id ; } else { die ( " Du m å angi et blad . " ) ; } ?>
17 18 19
</ body > </ html >
Kode 16.10: Filen som mottar variabelen $blad_id.
Nå som vi har variabelen vår, kan vi bruke den i en spørring for å få ut figurene som tilhører bladet vi trykket på. Denne spørringen kan vi legge til nedenfor PHP-koden vi allerede har skrevet. Her må vi bruke WHERE i spørringen, slik som det står beskrevet tidligere i kapitlet. Kode 16.11 viser denne spørringen, og figur 16.9 (på side 192) viser resultatet i nettleseren. Legg merke til at setningen echo $blad_id; nå er fjernet; vi trenger ikke lenger skrive ut id-en som ble sendt. For å få et finere resultat kan du bruke det du lærte tidligere i dette kapitlet, og i kapitlene om HTML (kapittel 6) og CSS (kapittel 7).
Hente informasjon fra databaser (SELECT)
1 2 3 4 5 6 7
191
<! doctype html > < html > < head > < title > SELECT - sp ø rringer </ title > < meta charset =" UTF -8" > </ head > < body >
8 9 10 11 12 13 14
<? php if ( isset ( $_GET [ " blad_id " ]) ) { $blad_id = $_GET [ " blad_id " ]; } else { die ( " Du m å angi et blad . " ) ; }
15 16 17 18 19 20
// T il ko bl ing si nf orm as jo n $tjener = " localhost " ; $brukernavn = " root " ; $passord = " " ; $database = " tegneseriefigurer " ;
21 22 23
// Opprette en kobling $kobling = new mysqli ( $tjener , $brukernavn , $passord , $database ) ;
24 25 26 27 28
// Sjekk om koblingen virker if ( $kobling - > connect_error ) { die ( " Noe gikk galt : " . $kobling - > connect_error ) ; }
29 30 31
// Angi UTF -8 som tegnsett $kobling - > set_charset ( " utf8 " ) ;
32 33 34
$sql = " SELECT * FROM figurer WHERE blad_id = $blad_id " ; $resultat = $kobling - > query ( $sql ) ;
35 36 37 38
while ( $rad = $resultat - > fetch_assoc () ) { $figurnavn = $rad [ " figurnavn " ]; $aarstall = $rad [ " aarstall " ];
39 40 41 42
} ?>
echo " Figuren $figurnavn s å dagens lys i $aarstall . <br > " ;
43 44 45
</ body > </ html >
Kode 16.11: Bruk av mottatt variabel i spørring.
192 Hente informasjon fra databaser (SELECT)
Figur 16.9: Resultatet av kode 16.11 i en nettleser.
Sende flere variabler Det går an å sende mer enn én variabel. Vi kan derfor endre lenkene våre fra echo "<td><a href='figurer.php?blad_id=$blad_id'>$bladnavn</a></td>";
til echo "<td><a href='figurer.php?blad_id=$blad_id&bladnavn=$bladnavn'>
$bladnavn</a></td>";
Legg merke til at første variabel legges til etter et spørsmåltegn, mens eventuelle andre variabler legges til etter &-symbolet2 . Du mottar ekstra variabler på akkurat samme måte (ved å legge til flere variabler i figurer.php). Ved å bruke denne metoden får vi sendt med bladets navn, slik at vi kan få med en overskrift i figurer.php som angir navnet på bladet vi trykket på. I figur 16.10 kan du se et eksempel på en slik utskrift.
Figur 16.10: Resultatet ved sending av to variabler.
Oppgaver 16.12 Lag en nettside med oversikt over alle figurene. 16.13 Legg til lenker slik at du kommer til en side som presenterer riktig blad når du klikker på navnet til en figur.
HTML-validatoren foretrekker at vi skriver &amp; i stedet for &. Her har vi likevel valgt en forenkling der bare & brukes, slik at koden ikke skal bli for uoversiktlig. 2
Hente informasjon fra databaser (SELECT)
193
Sammendrag En SELECT-spørring lar oss hente ut informasjon fra en tabell i en database. En generell SELECT-spørring ser slik ut: SELECT kolonner FROM tabell
Ved å erstatte kolonner med * henter vi ut alt innhold i tabellen. Vi kan sortere det vi henter ut, ved å legge til ORDER BY kolonne i spørringen. Vi kan hente ut utvalg fra tabeller ved å bruke WHERE kolonne=verdi i spørringen. Resultatet fra en SELECT-spørring skrives ut ved hjelp av en while-løkke. Vi kan formatere utskriften på mange forskjellige måter. Vi kan hente ut informasjon fra flere tabeller som er koblet sammen med fremmednøkler, ved å bruke JOIN. En generell JOIN-spørring ser slik ut: SELECT kolonne1, kolonne2 FROM tabell1
JOIN tabell2 ON tabell1.fremmednøkkel=tabell2.primærnøkkel
Vi kan sende variabler til andre nettsider ved å legge dem til i lenker.