Alle henvendelser om forlagets utgivelser kan rettes til Gyldendal Undervisning Avdeling IT-fag Storgaten HALDEN

Transkript

1 Gyldendal Norsk Forlag AS 2009 Redaktør: Øystein Falch Design og layout: Kevin Sommer-Mathiesen Omslagsdesign:? Datagrafikk/illustrasjoner: Kevin Sommer-Mathiesen Trykk og innbinding: AIT Trykk Otta AS ISBN Alle henvendelser om forlagets utgivelser kan rettes til Gyldendal Undervisning Avdeling IT-fag Storgaten HALDEN Det må ikke kopieres fra denne boka i strid med åndsverkloven og fotografiloven eller i strid med avtaler om kopiering inngått med KOPINOR, Interesseorgan for rettighetshavere til åndsverk. Kopiering i strid med lov eller avtale kan medføre erstatningsansvar og inndragning og kan straffes med bøter eller fengsel.

2 Forord Denne boka gir deg en innføring i hvordan du bruker Dreamweaver CS3 og MySQL til å utvikle dynamiske websider. Adobe Dreamweaver er et verktøy for å lage og administrere både websider og webområder. MySQL er en av de mest brukte databaseteknologiene for dynamiske websider. Hvem er denne boka for? Denne boka er en del av et læremiddel for programfaget Informasjonsteknologi 1, men kan benyttes i all grunnleggende opplæring i dynamiske websider med Dreamweaver og MySQL. Boka krever at du har forkunnskaper om utvikling av statiske websider i Dreamweaver CS3, og at du kjenner grunnleggende databaseteori. En introduksjon til disse temaene kan du f.eks få gjennom bøkene "Snarveien til Dreamweaver CS3" og "IT1 Basisbok". Boka vil ta utgangspunkt i Dreamweaver CS3, og det forutsettes at du har tilgang til denne versjonen. De andre verktøyene vi skal benytte er fritt tilgjengelige for nedlasting, og vil bli beskrevet nærmere etter hvert som de blir introdusert i boka. Hvordan bruker du boka? Framstillingen av stoffet er kortfattet og bør leses av deg eller gjennomgås av instruktør. Du vil finne én eller flere øvinger i hvert kapittel som viser deg framgangsmåten trinn for trinn. Pass på at du har gått gjennom øvingene før du fortsetter videre i boka. Første halvdel av boka vil introdusere deg for de ulike teknikkene vi skal lære, mens andre halvdel vil ta deg gjennom større eksempler der teknikkene blir satt sammen til funksjonelle webområder. Et utvalg øvingsoppgaver til bokas kapitler vil du finne på August 2009, Tom Heine Nätt

3 Innholdsfortegnelse (01) Introduksjon Statiske og dynamiske websider 6 WampServer 8 Installasjon av WampServer 8 Starte WampServer 11 Feil under oppstart av WampServer 12 Avslutte IIS 12 Avslutte andre MySQL instanser 13 Teste WampServer 13 (02) Dynamiske websider i Dreamweaver Opprette et webområde 14 Lage din første dynamiske webside 16 Lære mer om PHP-koder 17 (03) Arbeide med SQL Brukergrensesnitt til MySQL 18 Koble Query Browser til MySQL 19 Opprette et nytt prosjekt 21 Opprette databasetabeller 22 Legge inn data i databasetabeller 24 Flere databasetabeller 25 Slette rader 28 Opprette brukere 29 phpmyadmin 31 Datatyper i MySQL 32 (04) Koble Dreamweaver og MySQL Opprette webområdet sitatside 34 Koble til MySQL 34 Hente ut en tabelloversikt av dataene 35 Gyldighet av koblinger og datasett 36 (05) Hente ut data Koble flere tabeller 37 Presentere data ved hjelp av regioner 39 Legge til navigasjon på et datasett 41 Tilpassede datapresentasjoner 42 (06) Legge inn og oppdatere data Lage et enkelt innsetningsskjema 44 Innsettingsskjema med fremmednøkler 45 Slette data via en webside 47 Oppdatere data via en webside 50 (07) Gjestebok Opprette databasen og testdata 53 Opprette brukeren for gjesteboka 54 Opprette webområdet for gjesteboka 54 Lage opplisting av hilsninger 56 Legge til skjemaet 57 (08) Besøksstatistikk Opprette databasetabellen 60 Opprette brukeren for loggsystemet 60 Opprette webområdet 61 Opprette det dynamiske logging-bildet 61 Opprette testsider 64 Opprette en statistikkside 65 Vise 10 siste besøk 66 Sortere sider etter popularitet 67 Legge til grafer på popularitet 68 (09) Blogg Opprette databasetabellene 71 Opprette brukeren for bloggen 72 Lage et view for bloggvisning 73 Opprette webområdet for bloggen 74 Klargjøre bilder 75 Koble til bloggdatabasen 75 Lage opplisting av innlegg 76 Lage visning av ett innlegg 78 Koble opplisting og visning 81 Oppdatere antall visninger 82 Funksjonalitet for kommentarer 83

4 (10) Bildegalleri Opprette databasen 89 Opprette en bruker for databasen 92 Opprette webområdet 92 Legge inn data i databasen 93 Koble til databasen 93 Lage bildevisning 94 Lage gallerivisning 97 Lage galleriopplisting 100 (11) SQL SQL 102 SELECT 104 Filtrering 104 Sortering 105 Kombinere elementer 105 Aggregering 105 Gruppering 106 Funksjoner 107 Koble tabeller 108 INSERT 109 DELETE 109 UPDATE 110 View 110 (12) MySQL Workbench Tegne en datamodell 112 Fra datamodell til database 117 Eksportere en datamodell som grafikk 119

5 6 Snarveien til MySQL og Dreamweaver CS3 1 INTRODUKSJON >>1 Introduksjon I dette kapittelet vil du lære om forskjellen mellom statiske og dynamiske websider om hva WampServer er hvordan du installerer WampServer Bruk av dynamiske websider gjør at brukerne kan styre hva som skal skje på websiden, slik at vi f.eks. kan legge til varer i en handlekurv eller administrere vår Facebookkonto. Statiske og dynamiske websider Tidligere var nettet i stor grad preget av såkalte statiske websider. Dette er websider som alltid vil ha samme innhold, om ikke forfatteren av websiden endrer den. Denne formen for websider egner seg greit til mindre webområder som kun er ment for å presentere informasjon der innholdet stort sett er konstant. I den senere tid har man imidlertid sett at statiske websider som oftest kommer til kort med hva man ønsker at en webside skal benyttes til. Derfor blir nå en stadig større andel av websidene dynamiske. Dynamiske websider lar oss lage websider som er lett å oppdatere, og som kan koble sammen utsende, struktur og innhold fra ulike kilder i det brukeren besøker nettsidene. Dette kjenner vi igjen fra nettbutikker, nettaviser, webkameraer, blogger, sosiale nettverk osv. I tilegg til denne enklere oppdateringen av websidene, gir også teknikken bak dynamiske websider brukeren mulighet til å styre websidene. Dette gjør at vi f.eks kan plassere produkter i en handlekurv, skrive kommentarer på en nyhetsartikkel, søke i søkemotorer eller legge nye venner til vår konto på f.eks Facebook.

6 Utvikling av dynamiske websider Selv om det er viktig å skille begrepene statiske og dynamiske websider, er faktisk ikke teknologiene så forskjellige. Mens statiske websider utelukkende består av HTML-koder, består de dynamiske websidene av en blanding mellom HTML-koder og programkode. Det er denne programkoden (f.eks. C#, PHP, Java, JavasScript osv.) som genererer den ferdige websiden. Faktisk er resultatet av programkoden i en dynamisk webside som utføres, en temporær statisk webside som består av utelukkende HTML-koder. Det eneste som kompliserer teknikken rundt dynamiske websider, er at programkoden et eller annet sted må bli utført. Her finnes det to mulige løsninger, nemmelig at programkoden utføres i nettleseren (client-side scripting) slik som f.eks JavaScript, eller at programkoden utføres i webserveren (server-side scripting) slik som f.eks PHP og C#. I denne boka skal vi fokusere på server-side scripting via PHP. Dette medfører at når nettleseren spør en webserver om å få se en webside, vil webserveren fullføre websiden gjennom å kjøre programkoden, og så gi HTML-koden tilbake til nettleseren. 7 1 INTRODUKSJON Så lenge vi har websidene våre på en ekstern webserver, har vi lite bekymringer med dette. Dersom vi derimot skal utvikle websidene lokalt på vår maskin, må vi installere en såkalt lokal webserver. En lokal webserver er faktisk ikke noe annet enn det samme produktet som kjører på andre webservere vi kjenner. Eneste forskjellen er at vi som oftest ikke har noe domenenavn (slik som f.eks. som identifiserer webserveren/ nettsidene. I denne boka skal vi benytte Apache som webserver. Dette er et open source prosjekt, og er derfor fritt tilgjengelig. Apache er også forholdsvis lett å installere, samtidig som den støtter de fleste teknologier slik som PHP, som vi skal benytte.

7 8 1 INTRODUKSJON Snarveien til MySQL og Dreamweaver CS3 WampServer I denne boka skal vi som sagt benytte PHP som serverspråk og Apache som webserver. I tilegg skal vi benytte MySQL som databasesystem. Dette er i utgangspunktet tre individuelle produkter, som vi vanligvis selv er ansvarlig for å få til å fungere sammen. Ettersom disse tre produktene er så vanlige å benytte sammen, er det imidlertid mange som har laget såkalte bundels der produktene er satt sammen til ett. Vi skal benytte en slik bundle som kalles WampServer (Windows-Apache-MySQL-PHP Server). Installerer vi WampServer har vi altså gjort hele jobben i en operasjon, og WampServer sørger selv for at de tre produktene fungerer sammen. WampServer tilbyr også et glimrende kontrollpanel for å enkelt styre alle de tre produktene. Installasjon av WampServer Ettersom WampServer er fritt tilgjengelig, og bygger på fritt tilgjengelig programvare, kan du laste ned programmet gratis fra denne siden: WampServer kommer statig i nye versjoner, så denne installasjonsveiledningen kan avvike noe. Veiledningen er basert på versjon 2.0f. Når du starter installasjonen vil du først få en advarsel om at du ikke bør oppgradere versjon 1 av WampServer til versjon 2. Har du versjon 1, bør du avinstallere denne først. Hvis ikke, er det bare å trykke Yes. Følg så installasjonsveiledningen gjennom velkomstbildet og godkjenningen av lisensavtalen.

8 Utvikling av dynamiske websider Du vil så få en forespørsel om hvor WampServer skal installeres. Det er en stor fordel om du plasserer WampServer i c:\wamp, slik som den foreslår. Om ikke dette er mulig, så kan du også velge alternative plasseringer, men vær forsiktig med mapper som er brukerstyrt og/eller virtuelle (slik som Mine Dokumenter osv). Resten av denne boka vil ta utgangspunkt i at WampServer er installert i c:\wamp. 9 1 INTRODUKSJON Fortsett så installasjonen gjennom godkjenningen av valgene, og selve kopieringen av filer.

9 10 1 INTRODUKSJON Snarveien til MySQL og Dreamweaver CS3 Når kopieringen av filer er fullført, vil installasjonsprosessen spørre deg om SMTP (Simple Mail Transfer Protocol)-innstillinger. Disse innstillingene er kun aktuelle dersom du skal programmere dynamiske websider som automatisk sender mail. Dette er ikke relevant for denne boka, og du kan la valgene stå som de gjør. Om du ønsker kan du imidlertid her sette inn den informasjonen som du har fått fra en ISP (tjenesteleverandør for Internet). Fjern til slutt den automatiske oppstarten av WampServer, da vi ønsker å lære prosessen for å gjøre dette manuelt, og trykk Finish. Får du spørsmål om å tillate Apache gjennom din brannmur, velger du at du ønsker å dette (Unblock).

10 Utvikling av dynamiske websider Starte WampServer Etter å ha installert WampServer er det på tide å starte den. Dette gjøres ved å velge elementet start WampServer i mappa WampServer på startmenyen INTRODUKSJON Du vil nok bli ganske skuffet over effekten av dette valget, for det skjedde tilsynelatende svært lite. Dette er fordi WampServer primært er en systemtjeneste til bruk for andre programmer, og ikke en grafisk applikasjon som brukeren skal arbeide med. Derfor har WampServer et meget begrenset brukergrensesnitt. Faktisk er det eneste du ser til WampServer et lite ikon som representerer en "måler" i system tray ved siden av klokka. Litt ettersom hvor bra oppstarten av WampServer gikk, vil dette ikonet presentere en av følgende tre statuser: Alt OK En eller flere av tjenestene (Apache, MySQL) kunne ikke starte Tjenestene i WampServer er stoppet Dersom alt gikk bra under oppstarten, kan du nå gjøre deg litt kjent med menyene til WampServer. Dersom du venstreklikker på ikonet til WampServer, får du opp en meny for administrasjon av tjenestene. Her kan du også starte de ulike nettsidene WampServer tilbyr. I tilegg finnes det også en snarvei til C:\wamp\www, gjennom menyvalget www directory. Høyreklikker du på ikonet til WampServer, får du opp administrasjonen av selve WampServer. Det viktigste valget her, vil være å avslutte WampServer gjennom Exit-kommandoen.

11 12 1 INTRODUKSJON Snarveien til MySQL og Dreamweaver CS3 Elementet World Wide Web Publishing som det henvises til i teksten, kan ha ulike navn i ulike versjoner av Windows. Feil under oppstart av WampServer Dersom det nå skulle vise seg at ikke alle tjenestene kunne starte, er den mest sannsynelige årsaken at du alt har noen lignendes tjenester kjørende. Dette vil da vanligvis være IIS eller en ekstra MySQL installasjon. Disse tjenestene må da stanses. Etter at tjenestene er stanset, velger du å restarte WampServer sine tjenester på venstremenyen til ikonet for WampServer. Avslutte IIS Dersom webserveren Microsoft Internet Information Services (IIS) er installert, må du stoppe denne for å frigi port 80 til WampServer. Du kan med andre ord bare ha én webserver kjørende på maskinen av gangen, dersom du ikke tilordner ulike portnummer. For å stoppe IIS går du til kontrollpanel og velger så administrative verktøy. Her velger du Services/Tjenester. I vinduet som kommer opp leter du deg frem til elementet World Wide Web Publishing, høyreklikker og velger Stop. Ved stopping av IIS så vær klar over at IIS kan være påkrevd av ulike verktøy for intranett osv. Merk deg at denne fremgangsmåten stopper IIS for denne sesjonen. Nesten gang du starter maskinen vil IIS igjen kjøre. For å permanent stoppe IIS velger du Properties/Egenskaper på høyremenyen, og setter måten tjenesten skal starte på til manuell.

12 Utvikling av dynamiske websider Avslutte andre MySQL instanser For å avslutte andre installasjoner av MySQL følger du samme fremgangsmåte som for å avslutte IIS, men velger isteden tjenesten med navnet MySQL. Vær imidlertid klar over at eventuelle andre installasjoner av MySQL kan være i bruk av applikasjoner du benytter. Teste WampServer Etter at du er ferdig med å installere WampServer, er det på tide å teste den. Dette kan enkelt gjøres ved å åpne WampServer sin startside i en nettleser. Skriv derfor inn adressen i din nettleser, og kontroller at du får opp følgende webside: 13 1 INTRODUKSJON Alternativt kan du velge menyelementet Localhost på WampServermenyen.

13 14 Snarveien til MySQL og Dreamweaver CS3 2 DYNAMISKE WEBSIDER I DW >>2 Dynamiske websider i Dreamweaver I dette kapittelet vil du lære hvordan du lager et prosjekt for WampServer å lage en enkel dynamisk webside om nettressurser for PHP Når vi skal lage prosjekter i Dreamweaver som skal benytte WampServer, må vi fortelle dette under opprettelsen av det nye webområdet. Fremgangsmåten som blir vist her kan benyttes for alle webområder med dynamisk innhold som skal vises gjennom WampServer. Det eneste du må endre er navnet og webadressene/filstiene så de reflekterer webområdet du skal opprette. Opprette et webområde 1 Sørg for at Dreamweaver er startet 2 Velg Site New Site i menylinja 3 Sørg for å velge Basic som metode i fanene 4 Skriv inn dynamisktest som navn på webområdet

14 Utvikling av dynamiske websider 5 I feltet for plassering av webområdet, skriver du inn følgende adresse: (localhost henviser til lokal webserver, som i vårt tilfelle er WampServer) 15 2 DYNAMISKE WEBSIDER I DW 6 I neste skjermbilde velger du at du ønsker å benytte en serverteknologi, og at denne skal være PHP MySQL 7 Velg så Edit and test locally. Skriv deretter inn plasseringen c:\wamp\ www\dynamisktest. Har du installert IIS på maskinen vil ofte Dreamweaver som standard foreslå en plassering i IIS sin webmappe. Du kan bare se bort i fra dette

15 16 2 DYNAMISKE WEBSIDER I DW Snarveien til MySQL og Dreamweaver CS3 8 Neste skjermbilde vil spørre deg om hvordan du viser data gjennom din lokale webserver i nettleseren. Siden c:\wamp\www er det samme som vil vår nye webside være tilgjengelig på adressen localhost/dynamisktest/. Vær nøye med å få med den siste slashen 9 Be for sikkerhets skyld Dreamweaver å teste adressen til det nye webområdet gjennom å trykke på knappen Test URL 10 Gå til neste skjermbilde, og velg at du ikke ønsker å benytte noen remote server på dette tidspunktet (dette kan du legge til senere) 11 Godkjenn opprettelsen av webområdet gjennom å trykke Done i det neste skjermbildet Lage din første dynamiske webside Vi skal nå fortsette på webområdet dynamisktest ved å legge til en dynamisk webside som viser dagens dato. Her vil vi skrive PHP-koden for å gjøre dette selv. Vi skal senere se at Dreamweaver kan skrive en stor andel av slik PHP-kode for oss. Spesielt når det gjelder databasekoblinger trenger vi som oftest ikke skrive en eneste linje PHP-kode selv. 1 Sørg for at webområdet dynamisktest er aktivt 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Skriv inn følgende tekst på websiden: Dagens dato er: 5 Mens markøren står etter kolonet i teksten, velger du Code som visningsmodus

16 Utvikling av dynamiske websider 6 Skriv inn følgende PHP-koder i dokumentet: 7 Velg File Save, og benytt filnavnet datotest.php 8 Testkjør websiden i nettleseren ved å velge File Preview in Browser - <ønsket nettleser> 9 Du skal nå få opp følgende webside: 17 2 DYNAMISKE WEBSIDER I DW 10 Velg å vise kildekoden til websiden i din nettleser. Som du ser har webserveren erstattet PHP-koden med dagens dato Merk deg at det å lage en slik webside uten PHP, eller en annen teknologi for dynamiske websider, ville være praktisk umulig. I så fall måtte man manuelt oppdatert den statiske websiden hver eneste dag Lære mer om PHP-koder Som vi har nevnt, skal vi ikke lære oss å skrive PHP-koder i denne boka, men la Dreamweaver skrive det meste av koden for oss. Det er derfor utenfor denne bokas rammer å beskrive PHP-koding i detalj. Dersom du synes PHP-koding virker interessant, og ønsker å lære å skrive slik kode selv, finnes det imidlertid mange nettressurser om temaet. Et godt sted å starte er W3Schools sine PHP-tutorials:

17 18 Snarveien til MySQL og Dreamweaver CS3 3 ARBEIDE MED SQL >>3 Arbeide med SQL I dette kapittelet vil du lære hvordan du installerer MySQL GUI tools å opprette prosjekter å lage tabeller hvordan du ser på innholdet i tabeller hvordan du modifiserer innholdet i tabeller om alternativet phpmyadmin Da denne boka ble skrevet, kunne man finne nedlastingen av GUI Tools på denne websiden. downloads/gui-tools/5.0.html Velg her versjonen som heter Windows (x86), gjennom å trykke på linken pick a mirror for denne versjonen. Du kan bli spurt om å registrere en konto, men MySQL har også et valg som heter No thanks, just take me to the downloads!, dersom du ikke ønsker å gjøre dette. Installasjonen av GUI Tools skulle være helt rett frem, og trenger ingen grundigere forklaring. Pass imidlertid på at du velger Complete installation. Brukergrensesnitt til MySQL Som tidligere nevnt er MySQL en tjeneste på maskinen på lik linje med Apache. Dette medfører at de har et begrenset grafisk brukergrensesnitt, da de er ment som tjenestetilbyder for andre programmer. Apache har sitt grafiske brukergrensesnitt gjennom nettleseren, der vi kan se og navigere mellom websider Apache presenterer. På samme måte trenger vi et grafisk brukergrensesnitt til MySQL. Her finnes det en mengde ulike alternativer. Alt fra kommandolinjeverktøy der vi kun benytter tekstlige kommandoer, til webbaserte løsninger. WampServer tilbyr begge disse ytterpunktene gjennom MySQL console og phpmyadmin. I dette kapitlet skal vi presentere en applikasjon som kalles MySQL Query Browser, for å få et litt mer tradisjonelt brukergrensesnitt. MySQL Query Browser er dessverre ikke en del av WampServer, så denne må lastes ned separat. Den inngår i den fritt tilgjengelige GUI Tools-pakka fra MySQL, og kan lastes ned fra organisasjonens hjemmesider.

18 Utvikling av dynamiske websider Koble Query Browser til MySQL Det er nå på tide å starte Query Browser, og koble oss til MySQLdatabasen, for å kunne se hvordan vår database ser ut. Sørg for at WampServer kjører, da det er MySQL-tjenesten i WampServer vi skal koble oss til med Query Browser ARBEIDE MED SQL 1 Start MySQL Query Broswer ved å velge dette på startmenyen 2 Når du starter Query Browser vil den spørre om informasjon for å logge inn i MySQL databasen. Benytt her localhost som Server Host, ettersom databasen ligger på samme maskin som Query Browser kjører. Benytt så root som Username, da dette er en standard administrasjonskonto som allerede finnes i databasen. Kontoen root har ikke noe passord som standard. Klikk så OK for å logge inn

19 20 3 ARBEIDE MED SQL Snarveien til MySQL og Dreamweaver CS3 3 Du vil nå mest sannsynlig få en advarsel om at det ikke er valgt noe Schema. Selv om det ikke er en helt korrekt oversettelse, kan du tenke på Schema som et prosjekt. Et databasesystem slik som MySQL kan nemmelig bestå av mange prosjekter, og Query Browser vet nå ikke hvilket prosjekt vi ønsker å benytte. Foreløpig har vi ikke opprettet noe eget prosjekt, og derfor må vi bare godta denne advarselen ved å trykke på Ignore 4 Du er nå logget inn i MySQL via Query Browser Arbeidsområdet i Query Browser består av følgende hovedelementer: 1. Resultat-panel 2. Prosjekt-panel 3. SQL-editor

20 Utvikling av dynamiske websider Opprette et nytt prosjekt Før vi går i gang med å lage databasetabeller, bør vi opprette et schema som samler sammen det vi lager til et prosjekt. I den første delen av denne boka skal vi arbeide med en database som inneholder sitater, og vi velger derfor å gi prosjektet navnet sitatregister. For hvert nye prosjekt du lager, bør du opprette et slikt schema ARBEIDE MED SQL 1 Sørg for at du er logget inn i MySQL via Query Browser 2 Høyreklikk på et blankt område i prosjekt-panelet, og velg Create New Schema 3 Skriv inn sitatregister som navn på det nye prosjektet, og klikk OK 4 Du har nå fått et nytt prosjekt (schema) inn i MySQL sammen med de to systemprosjektene som alt lå der

21 22 3 ARBEIDE MED SQL Snarveien til MySQL og Dreamweaver CS3 Opprette databasetabeller Før vi kan begynne å fylle databasen med data, må vi opprette en eller flere databasetabeller vi kan legge dataene inn i. Vi skal nå lage en tabell som inneholder sitater, med en id som primærnøkkel(identifikator) og selve sitatet som verdi. Det er vanlig å navngi tabeller basert på hva én rad i tabellen innholder, så derfor velger vi navnet sitat. Et utdrag av databasetabellen sitat kan se slik ut: id tekst 1 Believe those who are seeking the truth; doubt those who find it 2 Just because something doesn't do what you planned it to do doesn't mean it's useless 3 I have not failed. I've just found 10,000 ways that won't work Rent formelt kan vi ved hjelp av EER-modellering presentere tabellen slik som vist i margen. 1 Høyreklikk på prosjektet sitatregister, og velg Create New Table 2 Gi tabellen navnet sitat 3 Skriv inn id som Column Name for den første kolonnen i tabellen sitat

22 Utvikling av dynamiske websider 4 Trykk på tabulator-tasten, og Query Browser vil gjøre et forsøk på å fylle ut resten av innstillingene for deg. Ettersom dette er eneste kolonne vil den settes til primærnøkkel, not null og autoincrement (nummereres automatisk). Query Browser gjetter også på at datatypen skal være INTEGER (heltall). Dermed fikk vil hele den første kolonnen ferdig laget for oss 23 3 ARBEIDE MED SQL 5 Legg til en ny kolonne med navnet tekst. La også her Query Browser få gjøre ferdig kolonnedefinisjonen, men la datatypen være VARCHAR(255) slik at vi kan lagre opptil 255 tegn 6 Trykk så på Apply Changes, ettersom vi nå er ferdige med tabelldefinisjonen 7 Query Browser vil nå vise deg kommandoene den vil kjøre mot MySQL. Godta disse ved å velge Execute, og tabellen blir overført til databasen 8 Lukk så Table Editor ved å velge Close 9 Som du ser i prosjektpanelet, har vi nå fått inn tabellen vår i databasen

23 24 3 ARBEIDE MED SQL Snarveien til MySQL og Dreamweaver CS3 Legge inn data i databasetabeller Vanligvis ville vi laget en webside der administrasjonen av data kunne foregå. Det er allikevel kjekt å fylle databasen med litt testdata før vi kommer så langt. Vi skal derfor benytte Query Browser til å legge inn de tre sitatene fra eksempeldataene. 1 Høyreklikk på prosjektet sitatregister, og velg Make Default Schema. Dette vil informere Query Browser om at alle handlinger fra nå av primært dreier seg om sitatregister-prosjektet 2 Prosjektet sitatregister får nå navnet skrevet med fet skrift, for å markere at det er det aktive prosjektet 3 Dobbeltklikk på tabellen sitat. Dette vil føre til at følgende SQL-setning (kommandospråk for databaser) automatisk blir skrevet i SQL-editoren. Enkelt forklart står det nå at den skal hente ut all data fra sitat-tabellen SELECT * FROM sitat s; 4 Trykk på knappen Execute til høyre for SQL-editoren, for å utføre spørringen. Siden vi ikke har data i tabellen, vil resultat-panelet nå vise en tom tabell 5 Trykk på knappen under resultat-panelet for å starte editeringsmodus av tabellen 6 Fyll inn eksempeldataene for de tre radene 7 Radene markeres nå med grønn bakgrunn, ettersom de ennå ikke er overført til MySQL-databasen. Trykk derfor på knappen nederst i resultat-panelet for å overføre dataene

24 Utvikling av dynamiske websider Flere databasetabeller Etter en stund kommer vi nok frem til at det ville være praktisk å også ha med hvem sitatene kommer fra i databasen. Dette kunne gjøres ved å legge til en ekstra kolonne i tabellen sitat for navn, men en bedre løsning vil nok være å ha en egen tabell for personer. Deretter kan vi koble disse to tabellene sammen gjennom en relasjon. Tegnet med EER-modellering vil vår nye databasestruktur se slik ut: 25 3 ARBEIDE MED SQL Tabellen person kan se slik ut fylt med data: id navn periode 1 Andre Gide Thomas A. Edison Som du ser, registrerer vi id, navn og periode for hver person. 1 Høyreklikk prosjektet sitatregister og velg Create New Table 2 Legg inn navnet person, samt følgende tabellstruktur 3 Velg Apply Changes, og godkjenn utførelsen gjennom å velge Execute 4 Lukk deretter Table Editor gjennom å velge Close 5 Dobbeltklikk på tabellen person, og velg Execute for å kjøre SQLkommandoen Query Browser skriver for deg 6 Velg Edit-modus, og fyll inn følgende eksempeldata i tabellen person 7 Velg til slutt Apply Changes for å overføre dataene til MySQL

25 26 3 ARBEIDE MED SQL Snarveien til MySQL og Dreamweaver CS3 Vi må nå også gjøre en endring på sitat-tabellen for å kunne koble sitatene og personer. Vi ønsker med andre ord å lage en fremmednøkkel fra en ny kolonne i sitat-tabellen som vi kaller personid til id-kolonnen i persontabellen. Dette vil gjøre at vi kun får lov til å oppgi en personid i sitattabellen dersom personen alt er registrert i person-tabellen. 1 Høyreklikk på tabellen sitat, og velg Edit Table for å endre strukturen på denne tabellen 2 Legg til en tredje kolonne som heter personid. Denne kolonnen må tillate NULLverdier, ettersom vi har registrert sitater som ennå ikke har noen person knyttet til seg 3 For å få en relasjon mellom personid, og primærnøkkelen id i tabellen person, velger du fliken Foreign Keys i dialogen 4 Velg pluss-symbolet og skriv inn FK_sitat_person som navn

26 Utvikling av dynamiske websider 5 Velg tabellen person som Ref. Table. Sett så koblingen mellom kolonnen personid i sitat-tabellen, og id i person-tabellen. Merk deg at det er nedtrekkslister for å enkelt kunne velge hver av disse kolonnene 27 3 ARBEIDE MED SQL 6 Velg så Apply Changes og Execute for å godkjenne endringen 7 Lukk så Table Editor ved å trykke Close 8 Dobbeltklikk på sitat-tabellen i prosjekt-editoren, og trykk Execute 9 Som du ser har vi nå fått inn en ny kolonne i tabellen, der verdiene foreløpig er satt til NULL (databasebegrepet for ingen verdi) 10 Velg Edit-modus for tabellen, og fyll inn riktig personid 11 Send endringene over til databasen ved å trykke Apply Changes 12 For å sikre at et sitat i fremtiden ikke kan legges inn uten å være knyttet til en person, høyreklikker vi på tabellen sitat og velger Edit Table. Huk så av for at vi ikke tillater NULL-verdier for personid-feltet 13 Overfør endringene til databasen ved å klikke Apply Changes og Execute 14 Lukk til slutt Table Editor dialogen ved å trykke Close.

27 28 3 ARBEIDE MED SQL Snarveien til MySQL og Dreamweaver CS3 Slette rader Dersom du ønsker å slette en rad fra databasen, kan også dette gjøres fra Query Browser. Vi skal her slette et ekstra sitat vi har lagt til for Thomas Edison. Pass på at du etter denne øvelsen står igjen med de tre opprinnelige sitatene. 1 Sett tabellen i Edit-modus, slik du ville ha gjort for å legge til nye rader eller endre data 2 Høyreklikk på raden/radene du ønsker å slette og velg Delete Row(s) på menyen 3 Raden/radene blir nå markert med en lys rød bakgrunn 4 Trykk på knappen Apply Changes for å overføre endringene (slettingene) til databasen

28 Utvikling av dynamiske websider Opprette brukere Brukeren root som vi til nå har benyttet for å koble til MySQL har et par farer ved seg. Dette er en superbruker som har alle rettigheter i databasen. Derfor er det ofte hensiktsmessig å opprette en ny bruker for hvert prosjekt, som websidene vi senere skal lage benytter. Denne nye brukeren har da begrenset rettighetene sine til kun de operasjonene vi skal gjøre fra websiden. Vi skal fortsatt benytte brukeren root for å administrere MySQL gjennom Query Browser, men om noen skulle klare å få tak i kodene bak websidene vi lager, og dermed også brukernavnet og passordet som benyttes, kan de ikke gjøre så stor skade som de ville gjort med root-brukeren. Vi skal derfor opprette en ny bruker, med brukernavnet webgrensesnitt. Denne brukeren skal kun få lov til å hente ut (SELECT), sette inn (INSERT), endre (UPDATE) og slette (DELETE) data i tabellene som omfattes av prosjektet sitatregister. Disse innstillingene passer godt med det vi siden skal lage av funksjonalitet i websidene i de neste kapitlene. Brukeren skal også være passordbeskyttet med passordet drossap ARBEIDE MED SQL 1 Sørg for å være innlogget i Query Browser 2 Velg Tools MySQL Administrator fra menylinja 3 Velg her User Administration i menyen på venstre side av vinduet Du kan også starte verktøyet MySQL Administrator fra startmenyen, men da må du logge inn en ekstra gang. Litt avhengig av systemet du kjører, kan du her få en melding om at den ikke finner en konfigurasjonsfil. Denne meldingen er det bare å overse.

29 30 3 ARBEIDE MED SQL Snarveien til MySQL og Dreamweaver CS3 4 Klikk så på knappen Add new user nederst i bildet 5 Fyll inn webgrensesnitt som brukernavn og drossap i de to passordfeltene 6 Velg fanen Schema Privileges 7 Velg sitatregister som schema, og flytt over rettighetene SELECT, INSERT, UPDATE og DELETE til Assigned Privileges ved hjelp av pilene 8 Oversend den nye brukeren til MySQL ved å trykke på Apply Changes NB! I versjonen av MySQL Administrator som var ute når denne boka ble skrevet, får man enkelte ganger meldingen "Error while storing user information". Du kan se bort fra denne feilmeldingen, da endringene faktisk blir lagret.

30 Utvikling av dynamiske websider phpmyadmin Et alternativ til å benytte QueryBrowser er å benytte et verktøy kalt phpmyadmin. Dette er et webbasert administrasjonspanel/brukergrensesnitt for en MySQL-database, som kan startes fra menyen til WampServer. Du vil i phpmyadmin finne igjen alle funksjonene som er beskrevet i dette kapittelet, og flere til ARBEIDE MED SQL Noen tjenestetilbydere for websider/webserverplass vil ikke tilby tilkobling fra MySQL Query Browser til sin MySQL-database. De vil isteden tilby administrasjon av databasen via et phpmyadmin-grensesnitt. Dette grensesnittet finner du på en nettadresse som de vil opplyse om. Resten av denne boka vil benytte MySQL QueryBrowser i eksemplene. Det er imidlertid ingen ting i veien for å gjøre de samme operasjonene gjennom phpmyadmin, da begge disse kun er grensesnitt mot databasen. Du finner mer informasjon om phpmyadmin på deres nettsider:

31 32 3 ARBEIDE MED SQL Snarveien til MySQL og Dreamweaver CS3 Datatyper i MySQL Som du sikkert har lagt merke til når vi har opprettet tabeller i QueryBrowser, inneholder MySQL en rekke datatyper tilpasset ulike verdier. Når man velger datatype for en kolonne, er det viktig å velge en datatype som tar minst mulig lagringsplass, men samtidig tar vare på verdiene man ønsker. Vi skal her gi en kort oversikt over de mest brukte datatypene: BOOLEAN: Holder på verdiene true/false. Nyttig til å f.eks ta vare på informasjon som "ønsker å bli kontakter pr. e-post" INTEGER: Heltall mellom og FLOAT: Desimaltall (flyttall) DATETIME: Holder på dato og tid med formatet YYYY-MM-DD HH:MM:SS CHAR(X): Holder på X antall tegn. Dersom man ikke fyller antallet tegn, vil man få et antall whitespaces lagt til i teksten VARCHAR(X): Kan holde på et variabelt antall tegn, men ikke flere enn angitt ved X. Den største verdien X kan ha, er i 5.1 versjonen av MySQL 65,535. Allikevel er det av vanlig å gå over til datatypen TEXT, når X overskrider 255 TEXT: Holder på en større tekst Dette er kun et lite utvalg av datatypene, og de fleste datatypene kommer også i flere versjoner. Du finner mer informasjon om datatypene til MySQL i dokumentasjonen:

32 >>4 Utvikling av dynamiske websider Koble Dreamweaver og MySQL I dette kapittelet vil du lære hvordan du kobler Dreamweaver og en MySQL database å hente ut et enkelt datasett 33 4 KOBLE DREAMWEAVER OG MYSQL Før vi kan gjøre operasjoner mot en database fra en webside, må webområdet inneholde en kobling til databasen. Dreamweaver hjelper oss med å opprette denne koblingen, men vi må selv angi tilkoblingsinformasjonen for databasen. Dreamweaver kan koble til mange ulike databasetyper ved hjelp av mange ulike scriptingspråk. Vi skal i denne boka koble til en MySQL-database ved hjelp av PHP. Dersom du siden velger en annen database eller scriptingspråk, vil fremgangsmåten være meget lik. Det vil imidlertid være noen små forskjeller når det gjelder hvordan tilkoblingsinformasjonen oppgis, samt hva databasekomponentene heter og hvordan de ser ut. Vi skal nå opprette et nytt prosjekt som vi skal benytte i de påfølgende kapitlene, der vi skal koble oss til sitatregister-databasen vi lagde i forrige kapittel. For tilkoblingen skal vi benytte brukeren webgrensensitt.

33 34 4 KOBLE DREAMWEAVER OG MYSQL Snarveien til MySQL og Dreamweaver CS3 Opprette webområdet sitatside 1 Opprett et nytt webområde i Dreamweaver gjennom å velge Site New Site 2 Skriv inn sitatside som navn på webområdet 3 I feltet for plassering av webområdet, skriver du inn følgende adresse: 4 Velg så at du ønsker å benytte PHP MySQL som serverteknologi 5 Marker valget Edit and test locally, og skriv inn plasseringen c:\wamp\ www\sitatside 6 Benytt adressen som testing server 7 Velg at du ikke ønsker å benytte noen remote server 8 Opprett webområdet ved å klikke Done Koble til MySQL Før vi kan gjøre noen operasjoner mot databasen, må vi opprette en tilkobling. Dette gjøres for MySQL ved å oppgi maskinadresse, brukernavn, passord og prosjekt (schema). Merk deg at vi nå kun lager tilkoblingen. Selve uthentingen av data kommer senere. 1 Velg File New 2 Velg deretter Blank Page, Page Type PHP og Layout <none> 3 Sørg for at panelet Application er synlig, og at fanen Databases er valgt 4 Velg pluss-knappen og deretter MySQL Connection 5 Fyll inn navnet sitatkobling, plasseringen localhost, brukernavnet webgrensesnitt og passordet drossap som tilkoblingsinformasjon. Om du av en eller annen grunn ikke fikk laget brukeren webgrensesnitt, kan du også benytte root uten passord Du finner Application-panelet under Windows-menyen dersom det ikke alt er synlig. 6 Trykk så på knappen Select

34 Utvikling av dynamiske websider 7 Velg databasen/prosjektet sitatregister i listen som kommer opp. Bekreft ved å trykke OK 8 Trykk på knappen Test i vinduet MySQL Connection, og kontroller at du får en melding om at tilkoblingen var vellykket. Lukk testvinduet ved å trykke OK 9 Avslutt dialogboksen MySQL Connection ved å trykke OK. Du har nå fått en tilkobling med navn sitatkobling i webområdet 35 4 KOBLE DREAMWEAVER OG MYSQL Tabelloversikt er en av mange mulige presentasjonsmåter i Dreamweaver. Vi skal ta for oss resten av presentasjonsmåtene i neste kapittel. Hente ut en tabelloversikt av dataene Koblingen mot MySQL i seg selv er ikke spesielt interessant. Det er først når vi begynner å benytte denne koblingen til å hente ut eller endre data at vi får noen effekt av den. Derfor skal vi nå hente ut en tabelloversikt av sitatene fra databasen. Fremgangsmåten for å presentere data i tabellform består i å først lage et datasett med dataene vi ønsker å hente ut, og så knytte en dynamisk tabell mot dette datasettet. Det kan være nyttig å merke seg dette prinsippet om at man skiller datasett fra visningen. 1 Velg fanen Bindings i Application-panelet 2 Velg pluss-knappen og så Recordset 3 Gi datasettet navnet sitater, velg sitatkobling som Connection og velg så tabellen sitat. Velg også at du ønsker å angi kolonnene som skal benyttes, og at disse er id og tekst. Velg flere ved å holde Ctrl nede mens du markerer Dersom du tidligere har benyttet en utvidet/avansert versjon av en dialogboks i Dreamweaver, kan det være at du må trykke på knappen Simple for å bytte til den enkle versjonen av dialogboksen

35 36 4 KOBLE DREAMWEAVER OG MYSQL Snarveien til MySQL og Dreamweaver CS3 4 Trykk Test for å se på resultatet, og kontroller at du får opp dataene fra databasen. Avslutt Test SQL Statement-vinduet ved å trykke OK 5 Legg til datasettet ved å trykke OK i dialogboksen Recordset 6 Du har da fått inn datasettet i websiden, men vi må gjøre noen flere skritt for å fortelle hvordan vi ønsker å presentere dette for brukeren 7 Velg Insert Data Objects Dynamic Data Dynamic Table 8 Velg datasettet sitater, og at du ønsker å vise alle radene 9 Du får nå inn en dynamisk tabell i websiden der dataene vil bli presentert. Tabellen vil fylles med data når vi ser på siden gjennom en nettleser (testkjøring) 10 Velg File Save, og gi fila navnet sitaterenkel.php 11 Testkjør websiden i en nettleser gjennom Fil Preview in Browser. Kontroller at sitatene presenteres i tabellform, og at alle sitatene er med Gyldighet av koblinger og datasett Når du oppretter en kobling til en database i Dreamweaver, vil denne koblingen være gyldig for hele webområdet. Dermed kan du opprette flere websider i webområdet, der de alle benytter den samme koblingen. Datasettene (recordset) er derimot knyttet til hver enkel webside. Oppretter du en ny webside i webområdet, må du derfor lage et nytt datasett for denne websiden. Ønsker du å benytte eksakt samme datasett på flere websider i samme webområdet, er det imidlertid mulig å benytte copy/paste på et datasett mellom websidene etter følgende fremgangsmåte: 1 Høyreklikk på datasettet i Bindings-delen av Application-panelet mens den originale websiden er valgt, og velg Copy 2 Gå til den nye websiden du ønsker å benytte datasettet på, høyreklikk på det hvite området i Bindings-delen av Applcation-panelet og velg Paste

36 >>5 Utvikling av dynamiske websider Hente ut data 37 5 HENTE UT DATA I dette kapittelet vil du lære om de ulike måtene for datapresentasjon i Dreamweaver å koble data fra flere tabeller å basere et datasett på SQL-spørringer I forrige kapittel så vi på hvordan man kobler en webside til en MySQL database, samt hvordan man kunne hente ut en enkel tabellpresentasjon av dataene. Vi skal i dette kapittelet fortsette med å hente ut data fra databasen, men vi skal samtidig se på alternative presentasjonsformer for dataene på websiden, samt hvordan vi kan prosessere dataene ved hjelp av SQL. Dette kapittelet kommer ikke til å forklare SQL i spesiell detalj. Det finnes derimot et eget kapittel til slutt i denne boka som tar for seg det å skrive grunnleggende SQL-spørringer. Koble flere tabeller I vår database er nå dataene vi ønsker å presentere skilt i to databasetabeller, med navn sitat og person. Vi ønsker nå å lage et datasett der dataene fra disse to tabellene settes sammen. På den måten kan vi presentere både sitatet og navnet på personen som har skrevet dette. 1 Sørg for at prosjektet sitatside er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Gå til Bindings i Application-panelet, og velg å opprette et nytt recordset gjennom å trykke på pluss-knappen 5 Når vi skal hente ut data fra flere tabeller samtidig, kan vi ikke lenger benytte den enkle versjonen av dialogboksen Recordset. Gå derfor til den utvidede versjonen av dialogboksen ved å trykke på knappen Advanced... 6 Fyll ut sitaterkomplett som Name og sitatkobling som Connection

37 38 5 HENTE UT DATA Snarveien til MySQL og Dreamweaver CS3 7 Velg attributtet id i sitat-tabellen under Database items sin Tables-gren, og trykk på knappen SELECT. Dreamweaver starter nå å skrive en SQLspørring for oss 8 Gjør tilsvarende med attributtene tekst fra sitat-tabellen, samt navn og periode fra person-tabellen. Du skulle nå ha fått skrevet følgende spørring automatisk 9 Skriv så inn følgende ekstra linje i SQL-spørringen, for å angi at vi kun er interessert i de koblingene mellom sitater og personer, der sitatet sin personid er den samme som personen sin id 10 Trykk på Test-knappen, og verifiser at du får et korrekt resultat 11 Legg til datasettet i websiden ved å trykke på OK i både Test SQL Statement og Recordset dialogboksene. Datasettet vises nå under Bindings i Application-panelet 12 Velg Insert Data Objects Dynamic Data Dynamic Table 13 Velg sitaterkomplett som datasett, og at du ønsker å vise alle sitatene 14 Trykk OK, og du får plassert inn en dynamisk tabell som presenterer datasettet 15 Velg File Save, og gi websiden navnet sitateravansert.php 16 Testkjør websiden i en nettleser, og kontroller at du får ut dataene fra databasen

38 Utvikling av dynamiske websider Presentere data ved hjelp av regioner Foreløpig har vi kun presentert data fra databasen i tabellform. Ofte ønsker vi en annen og mer tilpasset presentasjonsform på websiden. Vi skal derfor lage en ny webside som viser det samme datasettet, men isteden benytter en såkalt Repeat-region. Istedenfor å opprette datasettet sitaterkomplett på nytt i den nye websiden vi skal lage, kopierer vi det med oss videre HENTE UT DATA 1 Sørg for å ha websiden sitateravansert.php åpen 2 Gå til Bindings i Application-panelet 3 Høyreklikk på datasettet sitaterkomplett, og velg Copy 4 Velg File New 5 Velg deretter Blank Page, Page Type PHP og Layout <none> 6 Gå til Bindings i Application-panlet på den nye siden, høyreklikk på et hvitt område i panelet, og velg Paste 7 Du skal nå ha fått inn datasettet sitaterkomplett også i denne websiden 8 Skriv inn følgende tekst i websiden: Sitatet: Ble skrevet av: Som levde i perioden: 9 Marker all teksten, og velg Insert Data Objects Repeat Region 10 Velg datasettet sitaterkomplett, og at den skal vise 5 sitater av gangen 11 Dreamweaver marker nå at teksten din skal gjenta seg for hvert sitat med en Repeat-region rundt teksten 12 Sett markøren etter teksten "Sitatet:", og velg Insert Data Objects Dynamic Data Dynamic Text

39 40 Snarveien til MySQL og Dreamweaver CS3 13 Velg at du på denne posisjonen ønsker å sette inn teksten fra feltet tekst 5 HENTE UT DATA 14 Dreamweaver markerer hvor dataene fra tekst skal stå med et dynamisk felt 15 Gjør tilsvarende operasjon for "Ble skrevet av:" og "Som levde i perioden:", slik at websiden blir seende ut som følger: 16 Velg File Save, og gi fila navnet sitaterregion.php 17 Testkjør, og kontroller resultatet 18 Avslutt testkjøringen, og formater ledetekstene i fet skrift 19 Formater det dynamiske feltet sitaterkomplett.tekst i kursiv skrift, samt legg til hermetegn foran og bak 20 Velg File Save for å lagre endringene 21 Testkjør websiden igjen, og kontroller resultatet

40 Utvikling av dynamiske websider Legge til navigasjon på et datasett Foreløpig har vi kun tre sitater i databasen vår, men dersom vi hadde hatt flere enn fem sitater (grensen vi satt på repeat-regionen) vil vi trenge en navigasjonsmeny for å bla oss frem og tilbake mellom resultatene. Denne navigasjonsmenyen minner om navigasjonsmenyen til f.eks resultatene for en søkemotor HENTE UT DATA 1 Sørg for at du har websiden sitaterregion.php fra forrige eksempel aktiv 2 Sett markøren på en linje etter Repeat-regionen 3 Velg Insert Data Objects Recordset Paging Recordset Navigation Bar 4 Velg datasettet sitaterkomplett, og at du ønsker å bruke bilder for navigering 5 Trykk OK for å sette inn navigasjonsmenyen 6 Velg File Save for å lage websiden 7 Testkjør websiden. Du vil ikke se navigasjonspanelet foreløpig, ettersom vi kun har tre sitater registrert 8 Legg til fire nye sitater gjennom Query Browser. Merk deg at du først må legge til eventuelle nye personer, før du kan referere til disse gjennom personid i sitat-tabellen. Dette er fordi tabellene er koblet med en fremmednøkkel 9 Velg File Save for å lage websiden 10 Testkjør websiden på nytt, og legg merke til navigasjonsmenyen nederst

41 42 5 HENTE UT DATA Snarveien til MySQL og Dreamweaver CS3 Tilpassede datapresentasjoner Vi skal nå tilpasse dataene enda mer til vårt bruk, ved å presentere kun ett tilfeldig sitat på en webside. Dette gjøres ved å utvide SQL-spørringen til datasettet med elementer som forteller systemet at det skal sortere sitatene i tilfeldig rekkefølge, for deretter å velge ut kun første sitat. 1 Velg File New 2 Velg deretter Blank Page, Page Type PHP og Layout <none> 3 Legg til et nytt recordset i Bindings på Applicaion-panelet 4 Gi dette datasettet navnet ettsitat og benytt koblingen sitatkobling 5 Skriv så inn følgende SQL-spørring 6 Legg til datasettet ved å trykke OK i dialogboksen Recordset 7 Sett markøren i den nye websiden, og velg Insert Data Objects Dynamic Data Dynamic Text 8 Legg her til det dynamiske feltet tekst 9 Formater skriften på dette feltet med størrelsen xx-large, kursiv, grå farge og hermetegn rundt 10 Sett inn tilsvarende dynamiske tekstfelt for navn og periode på en ny linje 11 Formater de nye feltene som vist under. Får du problemer med å sette inn mellomrom, kan du gå til kodevisning av websiden og legge inn 12 Velg File Save, og gi websiden navnet tilfeldigsitat.php 13 Testkjør, og se til at du får ut et sitat. Trykk så oppdater i nettleseren flere ganger, og kontroller at sitatet forandrer seg

42 >>6 Utvikling av dynamiske websider Legge inn og oppdatere data I dette kapittelet vil du lære om innsetting av data fra en webside om endring av data fra en webside om sletting av data fra en webside 43 6 LEGGE INN OG OPPDATERE DATA Til nå har vi sett på hvordan vi kan benytte Dreamweaver til å generere websider som henter ut data fra en database. Vi kan også lage websider som benyttes for å legge inn og endre data i en database gjennom et skjema på websiden. Vær imidlertid oppmerksom på den sikkerhetsrisikoen det er å la brukerne av websiden kunne endre, slette og oppdatere data. Slik funksjonalitet bør derfor ofte være lagt på en egen skjult administrasjonsside, som også helst bør være passordbeskyttet. Unntaket er selvsagt de gangene du faktisk ønsker at brukere skal utføre disse operasjonene, slik som innsetting av data i en gjestebok.

43 44 6 LEGGE INN OG OPPDATERE DATA Snarveien til MySQL og Dreamweaver CS3 Lage et enkelt innsetningsskjema Vi skal starte denne gjennomgangen med å lage et skjema for å legge til nye personer i databasen. Dette er vanligvis en ganske omfattende prosess, men heldigvis har Dreamweaver innebygd funksjonalitet for å generere slike skjemaer. 1 Sørg for at sitatside er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Sett markøren i den nye websiden, og velg Insert Data Objects Insert Record Record Insertion From Wizard 5 Benytt sitatkobling som tilkobling, og angi at dataene skal settes inn i tabellen person 6 Vi ønsker ikke å ha med id i selve skjemaet, da dette er satt til autoincrement i tabelldefinisjonen og skal styres av MySQL-databasen selv. Marker derfor feltet id i lista Form fields, og tryk på minus-knappen for å fjerne dette 7 Trykk på OK for å sette inn skjemaet: 8 Marker knappen Insert record, og sett egenskapen Value til Legg til person i egenskapspanelet 9 Velg File Save, og gi websiden navnet leggtilperson.php 10 Testkjør websiden, og forsøk å legge til nye personer. Kontroller via Query Browser at personene blir lagt til. Slik skjemaet er laget nå, vil du ikke få noen visuell tilbakemelding på en innsetting

44 Utvikling av dynamiske websider Innsettingsskjema med fremmednøkler Skjemaet vi laget i forrige eksempel var ganske enkelt, i og med at alle verdiene kunne skrives inn i tekstbokser. Dersom en databasetabell har en fremmesnøkkel som peker på en annen databasetabell må vi imidlertid forsikre oss om at brukeren fyller inn en gyldig verdi. Dette gjøres enklest ved å lage en nedtrekksliste med de gyldige verdiene i. Vi skal derfor lage et innsettingsskjema for databasetabellen sitat. I tilegg til nedtrekkslisten skal vi også linke til siden for å legge til personer, samt lage en statisk webside som bekrefter at sitatet ble lagt til. 1 Sørg for at sitatside er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type HTML og Layout <none> 4 Velg File Save, og gi filen navnet sitaterok.html 5 Skriv inn en melding til brukeren om at sitatet er blitt lagt til Sitatet er blitt lagt til i databasen 45 6 LEGGE INN OG OPPDATERE DATA Du kan nå se en oversikt over sitatene her 6 La teksten her peke til websiden sitateravanser.php gjennom å markere ordet og velge Insert - Hyperlink 7 Lag nok en webside ved å velge File New 8 Velg deretter Blank Page, Page Type PHP og Layout <none> 9 Velg File Save, og gi filen navnet leggtilsitat.php 10 Lag et nytt datasett av personene vi skal kunne velge, gjennom å legge til et Recordset under Bindings på Application-panelet

45 46 6 LEGGE INN OG OPPDATERE DATA Snarveien til MySQL og Dreamweaver CS3 11 Gi datasettet navnet persondata, benytt sitatkobling som Connection og skriv inn følgende SQL-spørring 12 Kontroller at du får ut riktige data, gjennom å trykke på Test-knappen 13 Trykk OK for å avslutte testvisningen 14 Legg til datasettet gjennom å trykk OK i dialogboksen Recordset 15 Velg Insert Data Objects Insert Record Record Insertion From Wizard 16 Velg tilkoblingen sitatkobling og benytt sitat som tabell 17 Velg websiden sitaterok.html som verdi i feltet After inserting, go to 18 Fjern feltet id gjennom å markere det og velge minus-knappen. Vi ønsker ikke dette feltet i skjemaet, da det er opprettet som autoincrement i MySQL 19 Marker feltet personid, og velg Menu i feltet Display as 20 Mens personid er valgt, trykk på knappen Menu Properties 21 I dialogboksen velger du at du ønsker å hente menyelementene fra en database, og setter datasettet til å være persondata. Sett også at etikettene skal hentes fra feltet navn og at verdiene skal hentes fra feltet id

46 Utvikling av dynamiske websider 22 Avslutt dialogboksen Menu Properties med knappen OK 23 Avslutt også dialogboksen Record Insertion Form, og sett inn skjemaet, ved å trykke på OK 24 Du har nå fått inn et skjema for sitater med et tekstfelt og en nedtrekksliste 25 Marker knappen Insert record, og gi denne teksten Legg til sitat ved å endre feltet Value i egenskapspanelet 26 Velg File Save for å lagre fila 27 Testkjør websiden, og legg til sitatet "The chief function of the body is to carry the brain around", som er skrevet av Thomas A. Edison 47 6 LEGGE INN OG OPPDATERE DATA 28 Kontroller at du får opp websiden med bekreftelsen på at sitatet ble lagt til 29 Verifiser via linken til sitatsiden at det nye sitatet ble lagt til i databasen Slette data via en webside Etter å ha lært å sette inn oppføringer i en database, må vi også ha mulighet til å slette dem. En vanlig måte å gjøre dette på, er å presentere alle oppføringene i tabellform, der siste kolonne har en link som sier "slett". Trykker man på denne linken fjernes innlegget fra databasen, og siden oppdateres. Man skulle tro dette var en enkel operasjon. Det kreves imidlertid noen små grep for å lage en link som utfører en handling. I all hovedsak går dette da ut på at linken peker til samme webside, men har med et parameter i liken som forteller hvilken id det er på oppføringen som skal slettes. Hver gang websiden vises, sjekkes det så på om denne parameteren er satt, og om det er den slettede oppføringen det refereres til. Typisk vil linken til en slik webside se ut som følger, for å slettet person nummer to:

47 48 6 LEGGE INN OG OPPDATERE DATA Snarveien til MySQL og Dreamweaver CS3 1 Sørg for at sitatside er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Velg File Save, og gi filen navnet personadministrasjon.php 5 Lag et nytt datasett med navn persondata, som inneholder alle data fra person-tabellen. Du kan her benytte Simpel-modus av dialogboksen 6 Kontroller at datasettet fungerer ved å trykke på Test-knappen 7 Avslutt testvinduet og legg til datasettet ved å trykke OK i de to dialogboksene 8 Velg Insert Data Objects Dynamic Data Dynamic Table 9 Velg datasettet persondata, og sørg for at alle oppføringer er satt til å vises 10 Sett inn den dynamiske tabellen ved å trykk OK 11 Legg til en ny kolonne til slutt i tabellen ved å markere kolonne tre, høyreklikke og så velge Table Insert Rows or Columns 12 Velg å legge til én kolonne etter den valgte kolonnen, og trykk OK 13 Skriv inn teksten Slett i den nye kolonnen

48 Utvikling av dynamiske websider 14 Vi blir nå dessverre nødt til å skrive litt PHP-kode for å lage slett-linken. Marker derfor ordet Slett, og velg kildekodemodus ved å trykke på visnings-knappen for dette. Skriv så inn følgende kode rundt ordet Slett. Vær nøye med å skrive denne koden helt riktig, og vær obs på at Dreamweaver ofte hjelper til med en autocomplete-funksjon mens du skriver 15 Gå tilbake til designmodus 16 Velg Insert Data Objects Delete Record 17 Velg at det først skal sjekkes om URL-parameteret slettid er satt, at sitatkobling skal benyttes som forbindelse og at tabellen det skal slettes fra er person. Velg deretter at primærnøkkelen er id, og at den id'en som skal slettes vil befinne seg i URL-parameteret slettid 49 6 LEGGE INN OG OPPDATERE DATA 18 Legg til slett-funksjonaliteten i websiden ved å trykke OK 19 Velg File Save for å lagre endringene 20 Testkjør websiden, og forsøk å slette Mark Twain eller en annen person du har lagt til. Vær klar over at du ikke kan slette en person som det er referert til i noen sitater, uten å fjerne denne referansen eller selve sitatet først 21 Legg merke til at når du valgte å slette personen, inneholder plutselig URL'en til websiden et parameter med denne personens id:

49 50 6 LEGGE INN OG OPPDATERE DATA Snarveien til MySQL og Dreamweaver CS3 Oppdatere data via en webside Vi skal nå fortsette på websiden personadministrasjon.php, og legge til funksjonalitet for å oppdatere informasjonen om en person. Vi ønsker å legge til en ny link ved siden av linken Slett, som sender oss videre til en side som inneholder et skjema for oppdatering. Siden for oppdatering tar imot et parameter som indikerer hvilken person som skal oppdateres gjennom URL'en, på samme måte som vi gjorde for å slette en bestemt person. 1 Sørg for at sitatside er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Velg File Save, og gi filen navnet oppdaterperson.php 5 Lag et nytt datasett med navn persondataindividuell fra Bindings-fanen i Application-panelet. Sørg for at du har dialogboksen i Simple-modus 6 I seksjonen Filter velger du at id skal være lik URL-parameteret oppdaterid, for å kun hente ut data om den aktuelle personen 7 Trykk på Test-knappen, oppgi tallet 1 som testverdi for oppdateridparameteret, og trykk OK 8 Kontroller at du kun får ut opplyningene om personen med id 1 9 Avslutt testvinduet og legg til datasettet ved å trykke OK i begge dialogboksene 10 Velg Insert Data Objects Update Record Record Update Form Wizard

50 Utvikling av dynamiske websider 11 Benytt sitatkobling som forbindelse, sett tabellen som skal oppdateres til å være person og velg persondataindividuell som datasettet eksisterende data skal hentes fra 12 Velg websiden personadministrasjon.php som den websiden nettleseren skal gå til etter en oppdatering 13 Sett inn oppdateringsskjemaet ved å trykke OK i dialogboksen Record Update Form 14 Marker knappen Update record, og sett teksten til Oppdater person gjennom å endre egenskapen Value på egenskaps-panelet 15 Velg File Save for å lagre 16 Gå til websiden personadministrasjon.php 17 Legg til en ny kolonne til slutt i tabellen ved å markere kolonne fire (den som inneholder linken Slett), høyreklikke og så velge Table Insert Rows or Columns 18 Velg så å legge til én kolonne etter den valgte kolonnen, og trykk OK 51 6 LEGGE INN OG OPPDATERE DATA 19 Skriv inn teksten Oppdater i den nye kolonnen 20 Igjen må vi skrive litt PHP-kode for å lage oppdater-linken. Marker derfor ordet Oppdater, og velg kildekodemodus. Skriv så inn følgende kode rundt ordet Oppdater. Vær nøye med å skrive denne koden helt riktig 21 Gå tilbake til designmodus 22 Velg File Save for å lagre 23 Testkjør websiden. Velg å oppdatere Thomas A. Edison, og fjern mellomnavnet hans. Kontroller at oppdateringen ble utført

51 52 Snarveien til MySQL og Dreamweaver CS3 7 GJESTEBOK >>7 Gjestebok I dette kapittelet vil du lære hvordan en gjestebok kan bygges opp mer om datatypen TEXT å sette inn tidsstempler på innlegg om å formatere dato og tid via SQL Gjesteboken skal lagre sine data i en tabell som ser slik ut. I dette eksempelet skal vi lage en enkel gjestebok. Gjesteboken skal bestå av et webskjema der de besøkende kan legge igjen hilsener, samt presentasjonen av hilsenene som alt er lagt til. Vi har her valgt å sette feltet tisdsstempel alene som primærnøkkel, da det er høyst usannsynlig at to innlegg i gjesteboken blir lagt til på eksakt samme tidspunkt. Feltene tittel og navn er satt til å være av typen VARCHAR, mens selve teksten lagrer vi som TEXT.

52 Utvikling av dynamiske websider Opprette databasen og testdata 1 Sørg for at WampServer er startet 2 Logg deg på MySQL-databasen gjennom QueryBrowser 3 Høyreklikk på et blankt område i Prosjekt-panelet, og velg Create New Schema 4 Gi det nye prosjektet navnet gjestebok, og trykk OK 53 7 GJESTEBOK 5 Høyreklikk på prosjektet i prosjekt-panelet, og velg Create New Table 6 Gi den nye tabellen navnet hilsen, og legg inn følgende felter i tabellen 7 Legg til tabellen ved å klikke på Apply Changes i Table Editor-dialogboksen 8 Bekreft ved å trykke Execute, og lukk så dialogboksen ved å trykke Close 9 Dobbeltklikk på tabellnavnet hilsen i prosjekt-panelet slik at spørringen for visning av innhold genereres. Trykk så på Execute-knappen 10 Aktiver editeringsmodus på tabellen ved å trykke på -knappen 11 Legg inn følgende testdata: 12 Send over dataene til selve databasen ved å trykke på -knappen

53 54 Snarveien til MySQL og Dreamweaver CS3 Merk deg at i QueryBrowser vil et felt av typen TEXT ha en del ekstra verktøy i form av små ikon. Hvor mange av verktøyene som vises, vil være avhengig av om du er i editeringsmodus eller ikke. 7 GJESTEBOK Importere teksten fra en fil Editere teksten i en egen enkel editor Fjerne all tekst fra feltet (sette feltet til NULL) Se på teksten i et eget vindu Eksportere teksten til en fil Opprette brukeren for gjesteboka 1 Sørg for å være innlogget i Query Browser 2 Velg Tools MySQL Administrator 3 Velg User Administration i menyen på venstre side av vinduet 4 Trykk på knappen Add new user 5 Fyll inn gjestebokweb som brukernavn og drossap i de to passordfeltene 6 Velg fanen Schema Privileges 7 Flytt over rettighetene SELECT, INSERT og DELETE for gjestebok-schemaet til Assigned Privileges ved hjelp av pilene 8 Oversend den nye brukeren til MySQL ved å trykke på Apply Changes Opprette webområdet for gjesteboka 1 Opprett et nytt prosjekt i Dreamweaver gjennom å velge Site New Site 2 Skriv inn gjestebokprosjekt som navn på webområdet 3 I feltet for plassering av webområdet skriver du inn følgende adresse: 4 Velg så at du ønsker å benytte PHP MySQL som serverteknologi 5 Marker valget Edit and test locally, og skriv inn plasseringen c:\wamp\ www\gjestebokprosjekt 6 Benytt adressen som testing server 7 Velg at du ikke ønsker å benytte noen remote server 8 Opprett webområdet ved å klikke Done

54 Utvikling av dynamiske websider Koble til gjestebokdatabasen 1 Sørg for at gjestebokprosjekt er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Sørg for at panelet Application er synlig, og at fanen Databases er valgt 5 Velg pluss-knappen og deretter MySQL Connection 6 Fyll inn navnet gjestebokkobling, plasseringen localhost, brukernavnet gjestebokweb og passordet drossap som tilkoblingsinformasjon. Om du av en eller annen grunn ikke fikk laget brukeren gjestebokweb kan du også benytte root uten passord 55 7 GJESTEBOK 7 Trykk på knappen Select, og velg databasen/prosjektet gjestebok i listen som kommer opp. Bekreft ved å trykke OK 8 Trykk på knappen Test, kontroller at du får en melding om at tilkoblingen var vellykket, og lukk meldingen med OK-knappen 9 Avslutt dialogen MySQL Connection ved å trykke OK. Du har nå fått en tilkobling med navn gjestebokkobling i webområdet

55 56 7 GJESTEBOK Snarveien til MySQL og Dreamweaver CS3 Lage opplisting av hilsninger Vi skal nå lage en opplistning av alle hilsningene i databasen ved hjelp av en repeat-region. Vi definerer altså en mal på hvordan én hilsning skal formateres, og benytter denne malen på alle postene i databasen. Vi skal også å splitte tidsstempelet i to ulike datafelter, samt formatere disse med norsk dato-/tidsformat. Dette gjøres enklest ved å skrive inn litt ekstra SQL under definisjonen av datasettet. 1 Velg Bindings i Application-panelet, pluss-knappen og så Recordset 2 Sørg for å velge den utvidede/avanserte versjonen av Recordset-dialogen 3 Gi settet navnet hilsener og velg så gjestebokkobling som tilkobling 4 Skriv inn følgende SQL-setning 5 Test spørringen ved å trykke på Test-knappen. Kontroller at du får ut alle data, og at de nye dato og tid-feltene er korrekt formatert 6 Legg til datasettet ved å trykke OK i testvinduet og i Recordset-vinduet 7 Skriv inn følgende tekst i websiden Avsender: Dato: 8 Merk teksten og velg Insert Data Objects Repeat Region. Velg hilsener som datasett, og velg at alle oppføringer vises 9 Lag en ny linje før teksten Avsender inni Repeat-regionen. La markøren stå på denne linja, og velg Insert Data Objects Dynamic Data Dynamic Text. Velg datafeltet tittel, og trykk OK 10 Gjør tilsvarende operasjon for de andre datafeltene, slik at regionen får følgende innhold 11 Marker datafeltet hilsener.tittel og velg heading 3 som format. Gi også ledetekstene Avsender: og Dato: fet skrift 12 Velg File Save, og gi fila navnet gjestebok.php 13 Testkjør websiden, og kontroller at du får ut korrekt resultat

56 Utvikling av dynamiske websider Legge til skjemaet Neste steg i prosessen er å legge til et skjema som kan ta i mot nye hilsninger fra de besøkende. I utgangspunktet skal alle data tas direkte fra brukeren og settes inn i databasen, men tidsstempelet må genereres idet brukeren sender inn dataene. For å få til dette må vi gjøre en liten endring i PHP-koden som Dreamweaver skriver for oss GJESTEBOK 1 Sett markøren før Repeat-regionen, og lag en ny linje. Om dette er vanskelig, så gå til kodevisning og sett markøren rett etter <body>-taggen, før du bytter til designmodus og trykker enter 2 Legg til en horisontal delelinje ved å velge Insert HTML Horizontal Rule 3 Sett markøren på linja før delelinja, og velg Insert Data Objects Insert Record Record Insertion Form Wizard 4 Fjern datafeltet tidsstempel fra lista ved å markere det og trykke på minusknappen, da vi ønsker å gjøre noe spesielt med dette feltet (settes til tidspunktet da hilsningen legges inn). La datafeltet tekst få visningstypen Text area 5 Sett inn skjemaet ved å trykke OK

57 58 Snarveien til MySQL og Dreamweaver CS3 6 Gi knappen en ny tekst ved å markere den, og endre egenskapen Value fra Insert record til Send hilsen 7 Gå til kodevisning for websiden 8 Finn koden som omhandler INSERT-setningen, og gjør følgende endring 7 GJESTEBOK 9 Bytt tilbake til designmodus. Det kan være at du nå får en feilmelding angående analyzeserverbehavior. Du kan se bort i fra denne, da den kun forteller deg at Dreamweaver ikke lenger selv har oversikt over all koden 10 Velg File - Save 11 Testkjør websiden. Legg inn en ny hilsen, og kontroller at den kommer inn i databasen og øverst i opplistningen

58 >>8 Utvikling av dynamiske websider Besøksstatistikk 59 8 BESØKSSTATISTIKK I dette kapittelet vil du lære hvordan besøksfrekvens monitoreres hvordan man tegner søylediagram ut i fra data mer om tilpassede SQL-spørringer og datasett Vi setter kolonnene webside og maskinadresse til å kunne inneholde NULL-verdier, da det ikke alltid er sikkert at en visning av loggbildet vil gi oss denne informasjonen. Vi skal i dette eksemplet lage en enkel besøksstatistikk som kan monitorere flere websider. Selve monitoreringen vil kreve et PHP-script som ikke Dreamweaver automatisk kan generere. Den mest interessante delen av dette prosjektet når det gjelder databaser vil være lagringen og presentasjonen av statistikken. Det finnes en mengde måter å monitorere besøksfrekvens på. Det er imidlertid to hovedmåter som skiller seg ut. Den ene vil basere seg på å inkludere litt programkode (f.eks PHP) i alle websider som skal monitoreres. Dette vil innebære at alle sider må være dynamiske, og at vi må oppdatere hver enkelt side dersom selve koden for monitorering skal endres. Den andre metoden innebærer at vi lager et dynamisk bilde. Dette vil si et bilde som ved lasting også utfører programkode. Dette bildet setter vi så inn på alle sider (både statiske og dynamiske) som skal monitoreres. Bildet vil når det da lastes lagre informasjon om besøket på websiden det er en del av. Vi skal i dette eksemplet gå for den siste løsningen, da dette i tilegg til å være den mest fleksible løsningen, også er den som innebærer færrest nye elementer. Selve besøksdataene skal lagres i en enkel databasetabell med navn logglinje. Tabellen vil benytte både tidstempel og ipadresse som primærnøkkel, slik at vi kan logge flere besøk av ulike personer på samme tid. Feltet webside vil inneholde URL'en til websiden som ble besøkt, ettersom vi ønsker å ha en felles logg for mange websider. Vi ønsker også å lagre en maskinadresse, som er en "lesbar" identifikasjon på maskinen. Denne adressen kan f.eks være pc23432.domenenavn.no.

59 60 8 BESØKSSTATISTIKK Snarveien til MySQL og Dreamweaver CS3 Opprette databasetabellen 1 Sørg for at WampServer er startet 2 Logg deg på MySQL-databasen gjennom QueryBrowser 3 Høyreklikk på et blankt område i prosjekt-panelet, og velg Create New Schema 4 Gi det nye prosjektet navnet logging, og trykk OK 5 Høyreklikk på det nye prosjektet i prosjekt-panelet, og velg Create New Table 6 Gi den nye tabellen navnet logglinje, og legg inn følgende felter. For å gjøre om en kolonne slik som ipadresse til å bli primærnøkkel, trykker du på den grønne lille diamanten foran kolonnenavnet 7 Legg til tabellen ved å klikke på Apply Changes i Table Editor-dialogboksen 8 Bekreft endringen ved å trykke Execute, og lukk så dialogboksen Opprette brukeren for loggsystemet 1 Sørg for å være innlogget i Query Browser 2 Velg Tools MySQL Administrator 3 Velg User Administration i menyen 4 Trykk så på knappen Add new user 5 Fyll inn logging som brukernavn og drossap i de to passordfeltene 6 Velg fanen Schema Privileges 7 Velg logging som schema, og flytt over rettighetene SELECT og INSERT til Assigned Privileges ved hjelp av pilene 8 Oversend den nye brukeren til MySQL ved å trykke på Apply Changes

60 Utvikling av dynamiske websider Opprette webområdet 1 Opprett et nytt webområde i Dreamweaver gjennom å velge Site New Site 2 Skriv inn loggingprosjekt som navn på webområdet 3 I feltet for plassering av webområdet, skriver du inn følgende adresse: 4 Velg så at du ønsker å benytte PHP MySQL som serverteknologi 5 Marker valget Edit and test locally, og skriv inn plasseringen c:\wamp\ www\loggingprosjekt 6 Benytt adressen som testing server 7 Velg at du ikke ønsker å benytte noen remote server 8 Opprett webområdet ved å klikke Done 61 8 BESØKSSTATISTIKK Opprette det dynamiske logging-bildet Det dynamiske bildet vi skal lage til dette prosjektet er egentlig en PHPfil som istedenfor å gi fra seg HTML-data når den kjøres, gir fra seg bildedata. Bildedataene hentes ved å lese en normal bildefil. Ettersom bildet skal settes inn på alle websider, er det en fordel at det er litt diskret. Vi kan enten lage et bilde på f.eks 1x1 piksel, eller lage en grafikk som vil passe inn mange steder. Vi skal her velge det siste alternativet, og lage en liten smiley. 1 Lag et lite bilde på 15x15 piksler av f.eks et smileyface i et bilde-/ grafikkprogram. Gi fila navnet loggingbilde.gif og lagr det i mappa c:\wamp\www\loggingprosjekt 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Velg fanen Databases i Application-panelet 5 Velg pluss-knappen og deretter MySQL Connection 6 Fyll inn navnet loggingkobling, plasseringen localhost, brukernavnet logging og passordet drossap som tilkoblingsinformasjon 7 Velg så logging som database

61 62 8 BESØKSSTATISTIKK Snarveien til MySQL og Dreamweaver CS3 8 Trykk på knappen Test, og kontroller at du får en melding om at tilkoblingen var vellykket 9 Avslutt dialogboksen MySQL Connection ved å trykke på OK. Du har nå fått en tilkobling med navn loggingkobling i webområdet 10 Gå til kildekodemodus for websiden, og erstatt all HTML-koden med følgende PHP-kode. Vær nøye med å skrive dette korrekt, da den minste feil vil medføre at loggingen ikke fungerer <?php require_once('connections/loggingkobling.php'); if ( isset($_server["http_referer"]) ) { $webside = "'". $_SERVER["HTTP_REFERER"]. "'" ; } else { $webside = "NULL"; } Du kan også hente denne koden fra bokas webside, så er du sikker på at ingen skrivefeil vil hindre koden i å fungere korrekt. if ( isset($_server["remote_host"]) ) { $maskinadresse = "'". $_SERVER["REMOTE_HOST"]. "'" ; } else { $maskinadresse = "NULL"; } $insertsql = sprintf("insert INTO logglinje (tidsstempel, ipadresse, webside, maskinadresse) VALUES (NOW(), '%s', %s, %s)",$_server["remote_addr"], $webside, $maskinadresse); mysql_select_db($database_loggingkobling, $loggingkobling); mysql_query($insertsql, $loggingkobling) or die(mysql_error()); header("content-type: image/gif"); $file = fopen("loggingbilde.gif","r"); while($linje=fgets($file)) { echo $linje; } fclose($file); mysql_close($loggingkobling);?>

62 Utvikling av dynamiske websider 11 Velg File Save, og gi fila navnet loggingbilde.php 12 Testkjør websiden/bildet. Du skal nå se bildet i din nettleser 63 8 BESØKSSTATISTIKK 13 Kontroller at du fikk en oppføring for visningen i Query Browser. Feltet webside vil her vise NULL, fordi det ikke var noen refererende webside i forespørselen. Maskinadressen vil også i de fleste tilfeller være NULL, da denne ikke fylles når websiden kjøres lokalt. Som oftest vil du få IPadressen når du kjører en lokal webserver, men dette kan avvike på enkelte systemer

63 64 8 BESØKSSTATISTIKK Snarveien til MySQL og Dreamweaver CS3 Opprette testsider 1 Velg File New 2 Velg deretter Blank Page, Page Type HTML og Layout <none> 3 Velg File Save, og gi siden navnet testside1.html 4 Skriv teksten Testside 1 formatert med heading 1 Testside 1 5 Lag en ny linje under overskriften og velg Insert Image 6 Selv om fila ikke vises, skriv inn filnavnet loggingbilde.php. Merk deg at vi setter inn PHP-fila, og ikke selve GIF-bildet 7 Trykk OK for å sette inn bildet. Oppgi loggingbilde som alternativ tekst 8 Du har nå fått satt inn bildet på websiden. Det vil imidlertid ikke vises i Dreamweaver, da dette er et dynamisk bilde 9 Velg File Save for å lagre endringene 10 Testkjør websiden, og kontroller at du får opp websiden med bildet

64 Utvikling av dynamiske websider 11 Kontroller også at du har fått en oppføring om visningen i databasen 12 Lag to nye testsider ved å følge samme prosedyre som for den første. Den ene kan være av typen HTML og hete testside2.html, den andre av typen PHP og hete testside3.php. Med disse testsidene får du kontrollert at både statiske og dynamiske websider kan logges 13 Testkjør de ulike websidene 3-4 ganger hver, i en rekkefølge du selv velger. Kontroller at du får oppføringer for hver visning i databasen 65 8 BESØKSSTATISTIKK Opprette en statistikkside Etter at vi har klart å logge visninger av ulike websider, er det på tide å lage en webside som kan presentere disse dataene. Vår webside skal vise de 10 siste besøkene samt grafer over hvor populære de ulike websidene er. 1 Sørg for at logging er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Skriv inn teksten Besøksstatistikk med heading 1 på websiden Besøksstatistikk 5 Velg File Save, og gi filen navnet statistikk.php

65 66 8 BESØKSSTATISTIKK Snarveien til MySQL og Dreamweaver CS3 Vise 10 siste besøk 1 Sørg for at siden statistikk.php er aktiv 2 Velg fanen Bindings i Application-panelet 3 Velg pluss-knappen og så Recordset 4 Vi ønsker først å hente ut de 10 siste besøkene man har hatt, sortert slik at siste besøk står først. For å få til dette må vi skrive noe SQL selv. Vi velger derfor Advanced-modus av dialogboksen 5 Gi settet navnet sistebesok, velg loggingkobling som tilkobling og velg så tabellen logglinje 6 Skriv inn følgende SQL-setning: 7 Test spørringen ved å trykke på Test-knappen. Sjekk at dataene stemmer 8 Legg til datasettet ved å trykke OK i Test-vinduet og i Recordset-vinduet 9 Skriv inn overskriften 10 siste besøk: i websiden med heading 2 som format 10 Sett markøren på en ny linje etter teksten på websiden, og velg Insert Data Objects- Dynamic Data Dynamic Table 11 Velg datasettet sistebesok og All records. Trykk så OK for å sette inn tabellen 12 Velg File Save 13 Testkjør websiden, og kontroller at du får presentert dataene

66 Utvikling av dynamiske websider Sortere sider etter popularitet 1 Sørg for at siden statistikk.php er aktiv 2 Velg fanen Bindings i Application-panelet 3 Velg pluss-knappen og så Recordset. Sørg for at du har Advanced-modus på dialogen 4 Gi datasettet navnet populaerewebsider, og hent dataene fra tilkoblingen loggingkobling 5 Skriv inn følgende SQL: 67 8 BESØKSSTATISTIKK 6 Testkjør spørringen, og se at du får et fornuftig resultat (resultatet vil være avhengig av antall visninger) 7 Legg til datasettet ved å trykke OK i Test-vinduet og i Recordset-vinduet 8 Skriv inn overskriften Websidepopularitet: i websiden med heading 2 under den dynamiske tabellen 9 Sett markøren på en ny linje, og velg Insert Data Objects- Dynamic Data Dynamic Table 10 Velg her datasettet populaeresider, visningen All records, og tykk OK 11 Velg File Save 12 Testkjør websiden, og kontroller at du får presentert dataene

67 68 8 BESØKSSTATISTIKK Snarveien til MySQL og Dreamweaver CS3 For å kunne tegne søyler som har et visst forhold til skjermbredden, og ikke vokser ut av høyrekanten på skjermen når man får nok visninger, trenger vi å regne ut et forhåndstall. Dette forhåndstallet skal fortelle oss hvor stor andel av det totale besøket denne ene websiden har stått for, og vil være et desimaltall mellom 0 og 1. Legge til grafer på popularitet For å presentere grafer for populariteten skal vi benytte et triks ved å strekke et ensfarget bilde til riktig størrelse for hver søyle. Dette bildet bør være så lite som mulig i opprinnelig størrelse, da det ikke blir kvalitetsforringelse av å strekke et ensfarget bilde. 1 Lag et bilde på 1 x 1 pixel i et bildeprogram, og fyll dette med en blå farge 2 Gi fila navnet pixel.gif, og plasser den i mappa c:\wamp\www\ loggingprosjekt 3 Sørg for at siden statistikk.php er aktiv i Dreamweaver 4 Gi til Bindings i Application-panelet, og dobbeltklikk på datasettet populaerewebsider for å endre dette 5 Gjør om spørringen til følgende SQL. Vi henter her i tilegg til de andre datafeltene ut antallet visninger på denne websiden delt på antallet visninger totalt, og kaller dette nye feltet for faktor SELECT webside, COUNT(*) as antall, COUNT(*) / (SELECT COUNT(*) FROM logglinje WHERE webside IS NOT NULL) as faktor FROM logglinje WHERE webside IS NOT NULL GROUP BY webside ORDER BY antall DESC 6 Testkjør spørringen og kontroller at du får ut et sannsynlig resultat, der det er beregnet en faktor for hvor mye av besøket denne websiden står for 7 Trykk OK for å oppdatere datasettet 8 Høyreklikk i siste kolonne i den dynamiske tabellen for websidepopularitet, og velg Table Insert Rows or Columns 9 Velg å sette inn én kolonne etter valgte kolonne, og trykk OK

68 Utvikling av dynamiske websider 10 Gi den nye kolonnen overskriften graf, og sett markøren i selve datafeltet 11 Velg Inset Image, og velg her pixel.gif. Gi bildet graf som alternativ tekst 12 Marker bildet og gå til kodevisning. Gjør følgende endringer i koden for å angi at bredden på bildet skal være faktoren ganget med 250, og at høyden alltid skal være BESØKSSTATISTIKK 13 Velg File Save 14 Testkjør websiden, og kontroller at du får presentert dataene med liggende søyler

69 70 Snarveien til MySQL og Dreamweaver CS3 >>9 Blogg 9 BLOGG I dette kapittelet vil du lære mer om prosjekter med flere tabeller om å håndtere bilder om å lage og benytte views å koble websider for opplisting og detaljert presentasjon bruk av show-regioner Vi skal i dette eksempelet lage en enkel blogg. Den versjonen av bloggen vi skal lage her vil kun hente data fra databasen, og altså ikke ha noen administrasjonspanel. Bloggen skal imidlertid ha mulighet for brukere til å legge til kommentarer, samt kunne logge visninger av innlegg. Vi kan tenke oss følgende datamodell for bloggen: Bloggen skal bestå av to ulike websider. En side for opplisting av alle innlegg, og en side som presenterer ett bestemt innlegg. Man skal kunne komme seg fra opplistingen til presentasjonen ved å trykke på et innlegg. Websiden som presenterer ett enkelt innlegg vil ta i mot et URLparameter for å kunne avgjøre hvilket innlegg som skal presenteres. URL'en til denne websiden vil derfor se ut som følger:

70 Utvikling av dynamiske websider Opprette databasetabellene 1 Sørg for at WampServer er startet og logg deg på MySQL-databasen 2 Høyreklikk i prosjekt-panelet, og velg Create New Schema 3 Gi det nye prosjektet navnet blogg, og trykk OK 4 Høyreklikk på prosjektet i prosjekt-panelet, og velg Create New Table 5 Gi den nye tabellen navnet innlegg, og legg inn følgende kolonner: 71 9 BLOGG 6 Legg til tabellen ved å trykke Apply Changes, Execute og så Close 7 Lag på samme måte tabellen kommentar med følgende kolonner: 8 Velg så fanen Foreign Keys i Table Editor, og legg til en ny fremmednøkkel med navnet fk_kommentar_innlegg ved å trykke på pluss-knappen. Sett så følgende egenskaper på fremmednøkkelen: 9 Send over kommentar-tabellen til databasen ved å trykke Apply Changes, Execute og så Close 10 Opprett så tabellen visning med følgende kolonner. For å gjøre om en kolonne slik som innleggid til å bli primærkøkkel, trykker du på den grønne lille diamanten foran kolonnenavnet

71 72 Snarveien til MySQL og Dreamweaver CS3 11 Lag fremmednøkkelen fk_visning_innlegg med følgende egenskaper: 9 BLOGG 12 Legg til tabellen ved å klikke på Apply Changes, og bekreft endringen ved å trykke Execute. Lukk så dialogboksen 13 Kontroller at du har fått inn de tre tabellene i prosjektuforskeren 14 Dobbeltklikk på tabellen innlegg, og trykk så Execute for å kjøre SQL setningen 15 Velg Edit-modus og legg inn følgende testdata 16 Send over dataene til databasen ved å trykke Apply Changes Opprette brukeren for bloggen 1 Sørg for å være innlogget i Query Browser 2 Velg Tools MySQL Administrator 3 Velg User Administration i menyen 4 Velg så knappen Add new user nederst i bildet 5 Fyll inn blogg som brukernavn og drossap i de to passordfeltene 6 Velg fanen Schema Privileges 7 Velg blogg som schema, og flytt over rettighetene SELECT og INSERT til Assigned Privileges ved hjelp av pilene 8 Oversend den nye brukeren til MySQL ved å trykke på Apply Changes

72 Utvikling av dynamiske websider Lage et view for bloggvisning I dette prosjektet trenger vi et forholdsvis avansert datasett for å liste opp innleggene. I tilegg til de opprinnelige feltene fra innlegg-tabellen, ønsker vi også tidsstempelet for når innlegget var oppdatert og modifisert på norsk format, en kortversjon av teksten på 50 tegn, samt felter for hvor mange visninger og hvor mange kommentarer et innlegg har. Vi kunne selvfølgelig ha skrevet SQL-setningen som produserer disse dataene når vi oppretter datasettet i Dreamweaver, men en mer oversiktlig løsning vil være å lage et såkalt view i databasen. Enkelt forklart er et view en virtuell tabell. Ettersom alle SQL-spørringer i teorien produserer en ny tabell, kan vi gi dette resultatet et navn, og deretter benytte det som en tabell i fremtidige spørringer. Vi lagrer med andre ord en spørring i databasen med et bestemt navn, og kan siden benytte dette viewet som om det hadde vært en virkelig tabell. Etter at vi har opprettet et view i databasen, kan vi benytte dette som hvilken som helst annen tabell i Dreamweaver. Fordelen er imidlertid at vi slipper å utføre dataprosesseringen, da denne allerede er gjort. Dette medfører at vi for eksempel kan klare oss med Simple-mode istedenfor Advanced-mode av Recordset-dialogen, og at vi dermed slipper å blande inn så mye SQL i opprettelsen av datasett BLOGG 1 Gå tilbake til Query Browser, høyreklikk på prosjektet blogg og velg Make Default Schema 2 Høyreklikk på prosjektet blogg igjen, og velg Create New View 3 Gi dette viewet navnet bloggvisning

73 74 9 BLOGG Snarveien til MySQL og Dreamweaver CS3 4 Skriv inn følgende SQL i teksteditoren som dukker opp, og trykk Execute CREATE VIEW `blogg`.`bloggvisning` AS SELECT id, tittel, DATE_FORMAT(opprettet,'%d/%m-%Y %H:%i') AS opprettet, opprettet AS opprettetoriginal, DATE_FORMAT(modifisert,'%d/%m-%Y %H:%i') AS modifisert, modifisert AS modifisertoriginal, tekst, bilde, SUBSTR(tekst,1,50) AS korttekst, (SELECT COUNT(*) FROM kommentar WHERE kommentar.innleggid = innlegg.id ) AS antallkommentarer, (SELECT COUNT(*) FROM visning WHERE visning.innleggid = innlegg.id ) AS antallvisninger FROM innlegg; 5 Kontroller at viewet kom inn under prosjektet blogg 6 Lukk Script-fanen bloggvisning som inneholder koden for viewet, ved å trykke på X-knappen ( ) 7 Dobbeltklikk på viewet bloggvisning i prosjekt-panelet for å automatisk skrive en uthentingskommando, og trykk på Execute-knappen. Kontroller at du får ut informasjon om bogginnleggene, samt 0 visninger og 0 kommentarer (ingen visninger eller kommentarer er registrert ennå) Opprette webområdet for bloggen 1 Opprett et nytt webområde i Dreamweaver gjennom å velge Site New Site 2 Skriv inn bloggprosjekt som navn på webområdet 3 I feltet for plassering av webområdet, skriver du inn følgende adresse: 4 Velg så at du ønsker å benytte PHP MySQL som serverteknologi 5 Marker valget Edit and test locally, og skriv inn plasseringen c:\wamp\www\bloggprosjekt 6 Benytt adressen som testing server 7 Velg at du ikke ønsker å benytte noen remote server 8 Opprett webområdet ved å klikke Done

74 Utvikling av dynamiske websider Klargjøre bilder Hvert blogginnlegg skal være knyttet til ett bilde. Som du ser på datamodellen, lagrer vi ikke selv bildene i databasen, men kun filnavnet. Bildefilene plasserer vi så i en egen mappe i prosjektet, for å unngå å blande dem med eventuelle andre bilder websiden vil bestå av BLOGG 1 Velg deg ut tre JPEG-bilder. Det er ikke så farlig hva bildene inneholder for denne testens skyld 2 Lag en ny mappe kalt bilder i webområdet c:\wamp\www\bloggprosjekt gjennom Windows Utforsker 3 Flytt bildene over i denne mappa 4 Sørg så for at filene er navngitt slik du refererte til dem i feltet bilde i testdataene for innlegg-tabellen. Vær også nøye med samsvar når det gjelder store/små bokstaver i filnavnet, da webservere som oftest skiller på dette Koble til bloggdatabasen 1 Velg File New 2 Velg deretter Blank Page, Page Type PHP og Layout <none> 3 Sørg for at fanen Databases er valgt i Application-panelet 4 Velg pluss-knappen og deretter MySQL Connection 5 Fyll inn navnet bloggkobling, plasseringen localhost, brukernavnet blogg og passordet drossap som tilkoblingsinformasjon. Velg så databasen blogg 6 Trykk på knappen Test, og kontroller at du får en melding om at tilkoblingen var vellykket 7 Legg til bloggkobling i webområdet ved å trykke OK i dialogboksen MySQL Connection

75 76 Snarveien til MySQL og Dreamweaver CS3 Lage opplisting av innlegg Vår første webside skal liste opp alle innleggene med bilde, tittel, kortversjonen av teksten, dato opprettet, antall visninger og antall kommentarer. Innleggene skal også være sortert på dato opprettet, slik at det nyeste innlegger står først. Foreløpig lar vi en Les mer -link stå ukoblet, men denne skal vi gjøre mer med siden. 9 BLOGG 1 Velg fanen Bindings i Application-panelet 2 Velg pluss-knappen og så Recordset 3 Ettersom vi ønsker å hente blogginnlegg samt antall kommentarer og visninger fra et ferdig view, vil vi klare oss med den enkle versjonen av Recordset-dialogboksen 4 Gi datasettet navnet innlegg og benytt bloggkobling som tilkobling. Velg så viewet bloggvisning som tabell og alle datafelter. Angi også at du ønsker å sorterere synkende på datafeltet opprettetoriginal 5 Test spørringen ved å trykke på Test-knappen. Verifiser så at du får ut riktige data, og lukk testvinduet igjen 6 Legg til datasettet ved å trykke OK i Recordset-dialogboksen 7 Sett inn en tabell med én rad og to kolonner på websiden, gjennom å velge Insert Table. Sett også cell spacing til å være 10 og boder thickness til å være 0 8 La tabellen bli 700 piksler bred, og la første kolonne være 130 piksler 9 Marker raden, ikke hele tabellen, og velg Insert Data Objects Repeat Region. Velg her innlegg som datasett, og at man skal vise 10 oppføringer av gangen. Klikk OK, og kontroller at Repeat-regionen markerer raden 10 Lag en ny linje etter tabellen, og velg Insert Data Objects Recordset Paging Recordset Navigation Bar. Velg så at du ønsker å knytte dette mot datasettet innlegg, og at du vil navigere med tekst. Klikk OK, og legg til navigasjonsmenyen

76 Utvikling av dynamiske websider 11 Ved å skrive inn tekst og benytte Insert Data Objects Dynamic Data Dynamic Text, fyll den andre kolonnen med følgende data og dynamiske tekstfelter. Ikke bryt den siste linjen manuelt. Når innlegg.antallvisninger og innlegg.antallkommentarer blir erstattet med tall, vil linjen bli kortere 77 9 BLOGG 12 Legg til formateringen heading 2 på tittel, kursiv på korttekst og fet skrift på antallvisninger og antallkommentarer 13 Sett markøren i kolonne en, og bytt til kilekodevisning. Gjør endringene som skal til for å få lagt inn følgende kode: 14 Gå tilbake til designmodus 16 Velg File Save, og gi fila navnet listinnlegg.php 17 Testkjør websiden, og kontroller at du får korrekt visning

77 78 9 BLOGG Snarveien til MySQL og Dreamweaver CS3 Lage visning av ett innlegg Neste steg i bloggprosjektet er å lage visningen av ett bestemt innlegg. Vi presenterer her alle dataene om innlegget, samt den fullstendige teksten. Som tidligere nevnt, avgjøres hvilket innlegg som skal vises ved en URLparameter som kalles innleggid. Vi skal i denne websiden også benytte oss av såkalte show-regioner for å kunne presentere en feilmelding dersom innleggid ikke er satt eller har en ugyldig verdi. Vi lager derfor en show-region som viser innlegget dersom datasettet for innlegget ikke er tomt, og en show-region som viser feilmeldingen dersom datasettet er tomt. 1 Sørg for at bloggprosjekt er det aktive webområdet 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Velg pluss-knappen på Bindings-fanen i Application-panelet og så URL Vairable 5 Gi variabelen navnet innleggid, og trykk OK for å legge den til 6 Velg igjen å legge til en ny binding, men denne gangen et Recordset. Gi datasettet navnet innleggvisning, og benytt tilkoblingen bloggkobling og viewet bloggvisning. Filtrer så visningen til å kun vise innlegget med samme id som URL-parameteret innleggid 7 Test spørringen gjennom å trykke på Test-knappen

78 Utvikling av dynamiske websider 8 Angi 1 som testverdi for parameteret innleggid. Kontroller at du får opp alle data for det bestemte innlegget 79 9 BLOGG 9 Legg til datasettet innleggvisning gjennom å klikke OK i begge dialogboksene 10 Ved å skrive inn tekst og benytte Insert Data Objects Dynamic Data Dynamic Text, fyll websiden med følgende data og dynamiske tekstfelter. Tabellen har samme egenskaper som den for siden listinnlegg.php. Horisontal delelinje finner du under Insert HTML Horizontal Rule. Datafeltet innleggvisning.tittel er formatert med heading 1 11 Marker teksten Innlegget finnes ikke, og velg Insert Data Objects Show Region Show If Recordset Empty. Bind show-regionen til datasettet innleggvisning 12 Marker resten av teksten på websiden, og velg Insert Data Objects Show Region Show If Recordset Not Empty. Bind også her showregionen til datasettet innleggvisning

79 80 Snarveien til MySQL og Dreamweaver CS3 13 Sett markøren in den tomme tabellcellen. Bytt til kodevisning og skriv inn følgende kode: 14 Bytt så tilbake til designvisning 9 BLOGG 15 Velg File Save, og gi siden navnet visinnlegg.php 16 Testkjør websiden. Kontroller at du får meldingen Innlegget finnes ikke ettersom parameteret innleggid ikke er satt 17 Legg til?innleggid=1 i URL'en, og vis siden igjen. Kontroller at du nå får vist all informasjonen om innlegg nummer 1

80 Utvikling av dynamiske websider Koble opplisting og visning Til slutt må vi koble Les mer..-linkene på opplistningssiden til visningssiden. Vi kan ikke her bare koble til visinnlegg.php, men må også få satt riktig verdi på parameteret innleggid. Vi må derfor lage linken i ved å skrive litt PHP-kode. Samtidig gjør vi også bildet klikkbart, og lar det peke til samme adresse BLOGG 1 Sørg for å ha websiden listinnlegg.php aktiv i Dreamweaver 2 Marker teksten Les mer, og gå til kodevisning 3 Gjør følgende endringer i koden 4 Finn HTML-koden som setter inn bildet, og gjør tilsvarende endringer her 5 Gå tilbake til designmodus 6 Velg File Save for å lagre endringene 7 Testkjør websiden, og kontroller at linkene på teksten Les mer og på bildet fungerer, og at du kommer til riktig innlegg

81 82 Snarveien til MySQL og Dreamweaver CS3 Oppdatere antall visninger Neste skritt vil være å skrive litt PHP-kode som automatisk lager en ny oppføring i databasetabellen visning hver gang et innlegg vises. Denne koden vil ikke være knyttet til noe grafisk element på websiden, da brukeren ikke skal trenge å gjøre noe for at visningen logges. 1 Sørg for at websiden visinnlegg.php er aktiv i Dreamweaver 2 Gå til kodevisning, og legg inn følgende kode rett etter første kodelinje 9 BLOGG 3 Gå tilbake til designmodus, og velg File Save for å lagre endringene 4 Gå til websiden listinnlegg.php og testkjør denne. Gå frem og tilbake mellom opplistingen og de ulike innleggene, og kontroller at antall visninger blir oppdatert. Det kan være at du må gjenoppfriske hovedsiden for å se de nye verdiene for antall visninger 5 Kontroller også at visningene blir korrekt registrert i databasetabellen visning

82 Utvikling av dynamiske websider Funksjonalitet for kommentarer Siste steg i prosessen med å lage bloggen vil være å legge til muligheten for å gi kommentarer på innleggene. Faktisk er kommentarer på et blogginnlegg og en gjestebok veldig likt. Det eneste som skiller de to, er at vi for en blogg også må lagre hvilket innlegg kommentaren tilhører BLOGG 1 Legg til en testkommentar for innlegg 1 i tabellen kommentar gjennom Query Browser. Husk også å overføre dataene til databasen ved å trykke Apply Changes 2 Sørg for at visinnlegg.php er den aktive fila i Dreamweaver 3 Velg fanen Bindings i Application-panelet 4 Velg pluss-knappen og så Recordset 5 Benytt først den enkle versjonen av dialogboksen, og gi datasettet navnet kommentarer. Angi så bloggkobling som tilkobling, og velg så kommentar som tabell. Legg også til en filtrering for å kun vise kommentarer som er for samme innlegg som parameteret innleggid angir. Velg til slutt synkende sortering på tidsstempel 6 For å få norsk format på tidsstempelet, bytter vi til den avanserte dialogboksen og endrer SQL-spørringen til å være følgende: 7 Da denne spørringen baserer seg på et filter, kan vi ikke få testkjørt den fra den avanserte dialogboksen. Trykk OK for å legge til datasettet 8 Legg til en horisontal delelinje, og skriv inn følgende tekst i websiden etter det dynamiske tekstfeltet innleggvisning.tekst og før slutten av showregionen:

83 84 Snarveien til MySQL og Dreamweaver CS3 9 Marker teksten Navn: og Dato:, og velg Insert Data Objects Repeat Region. Velg her kommentarer som datasett, og at man skal vise alle oppføringer. Trykk deretter OK for å sette inn repeat-regionen 9 BLOGG 10 Legg til følgende dynamiske datafelter ved hjelp av Insert Data Objects Dynamic Data Dynamic Text. Datafeltet kommentarer.tittel formateres med heading 3, og de to ledetekstene med fet skrift 11 Velg File Save for å lagre endringene 12 Bytt til websiden listinnlegg.php 13 Testkjør websiden, og kontroller at du får vist kommentaren på innlegg 1, samt at det vises at innlegget har én kommentar på hovedsiden

84 Utvikling av dynamiske websider 14 Dersom du ser på et innlegg som ikke har noen kommentarer ennå, vil du imidlertid oppdage at Navn og Dato vises uten verdier 15 Marker derfor hele repeat-regionen til kommentarfeltet, og velg Insert Data Objects Show Region Show If Recordset Not Empty. Bind så denne show-regionen mot datasettet kommentarer 16 Du får nå en show-region rundt repeat-regionen, slik at datafeltene og ledetekstene for kommentarene kun vises dersom det er kommentarer til stede 85 9 BLOGG 17 Sett markøren før show-regionen/repeat-regionen til kommentarene, og lag en ny linje 18 Sett markøren på linja, og velg Insert Data Objects Insert Record Record Insertion Form Wizard 19 Velg å benytte tilkoblingen bloggkobling og at vi skal sette inn data i tabellen kommentar 20 Fjern feltene id, tidsstempel og innleggid fra lista ved å velge minusknappen, da vi ønsker å gjøre noe spesielt med disse feltene (id skal tilordnes automatisk, tidsstempel settes i det kommentaren legges inn og innleggid skal settes til innleggets id med kode). La også feltet tekst få visningstypen Text area 21 Sett inn skjemaet ved å trykke OK

85 86 Snarveien til MySQL og Dreamweaver CS3 22 Marker hele det nye skjemaet, og sett Align til Default i egenskapspanelet for å justere mot venstre 23 Gi knappen en ny tekst ved å markere den og endre egenskapen Value fra Insert record til Send 24 Kontroller at du nå har følgende innhold i websiden 9 BLOGG 25 Gå til kodevisning for websiden 26 Finn koden som omhandler INSERT-setningen for kommentarer, og gjør følgende endringer 27 Bytt tilbake til designmodus. Det kan være at du får en feilmelding angående analyzeserverbehavior. Se bort i fra denne meldingen, da den kun forteller deg at ikke lenger Dreamweaver har kontroll over all koden 28 Velg File Save for å lagre endringene 29 Bytt til websiden listinnlegg.php

86 Utvikling av dynamiske websider 30 Testkjør websiden og kontroller at du kan legge til kommentarer på hvert av innleggene 87 9 BLOGG

87 88 Snarveien til MySQL og Dreamweaver CS3 10 BILDEGALLERI >>10 Bildegalleri I dette kapittelet vil du lære å jobbe med større databaser Vi skal i dette eksempelet lage et enkelt bildegalleri. Bildegalleriet skal være inndelt i ulike seksjoner(gallerier), og det skal også inneholde informasjon om bildene og fotograf. Vi skal gjøre prosessen så enkel som mulig, og derfor velger vi at alle bildene ligger i en bestemt mappe på webserveren, og at databasen kun lagrer filnavnet på hvert bilde.

88 Utvikling av dynamiske websider Datamodellen for bildegalleriet vil se ut som følger BILDEGALLERI Tabellen fotograf vil inneholde oppføringer om fotografer. Foreløpig består denne informasjonen kun av navnet. Tabellen galleri inneholder oppføringer om hvilke gallerier som skal finnes, samt informasjon om disse. Tabellen bilde inneholder informasjon om bildene, og vi benytter her filnavnet til bildet som primærnøkkel for å forsikre oss om at vi ikke registrerer det samme bilde flere ganger. Hvert bilde vil også ha en fremmednøkkel til bildets fotograf. Til slutt har vi tabellen galleribilde som kobler et bilde og et galleri sammen. Ved å lage dette som en egen tabell istedenfor å ha en referanse til et galleri i bilde-tabellen, gjør vi det mulig at et bilde kan være med i flere gallerier. Tabellen galleribilde er med andre ord en oppløsning av en mange-til-mange-relasjon mellom tabellene galleri og bilde. Opprette databasen 1 Sørg for at WampServer er startet 2 Logg deg på MySQL-databasen gjennom QueryBrowser 3 Høyreklikk på et blankt område i prosjekt-panelet, og velg Create New Schema 4 Gi det nye prosjektet navnet bildegalleri, og trykk OK 5 Høyreklikk på det nye prosjektet i prosjekt-panelet, og velg Create New Table

89 90 Snarveien til MySQL og Dreamweaver CS3 6 Gi den nye tabellen navnet fotograf, og legg inn følgende kolonner i tabellen: 10 BILDEGALLERI 7 Legg til tabellen ved å klikke på Apply Changes i Table Editordialogboksen, og bekrefte ved å trykke Execute. Lukk så dialogboksen 8 Lag nok en tabell med navn galleri og følgende kolonner, og legg til tabellen i databasen: 9 Opprett også tabellen bilde med følgende kolonner: 10 Mens du har dialogboksen for bilde-tabellen åpen, velg fanen Foreign Keys 11 Trykk her på pluss-knappen for å legge til en ny fremmednøkkel, og gi denne navnet fk_bilde_fotograf 12 Velg at denne skal referere til tabellen fotograf, og at koblingen skal være mellom kolonnene fotograf og fotografid

90 Utvikling av dynamiske websider 13 Legg til tabellen i databasen ved å trykke på Apply Changes, og bekrefte med Execute. Lukk så dialogboksen 14 Opprett den siste tabellen med navn galleribilde. Gi denne følgende kolonner. Du får satt kolonnen bilde til å være primærnøkkel ved å trykke på den lille grønne diamanten foran kolonnenavnet BILDEGALLERI 15 Velg fliken Foreign Keys, og legg til en ny fremmednøkkel med navnet fk_galleribilde_galleri 16 Sett denne fremmednøkkelen så galleri-kolonnen peker til galleriid i galleritabellen 17 Lag en tilsvarende fremmednøkkel for bilde-kolonnen, som skal peke til filnavn-kolonnen i bilde-tabellen 18 Legg til tabellen galleribilde ved å trykke på Apply Changes, og bekrefte med Execute. Lukk så dialogboksen 19 Verifiser at du har fått inn alle de fire tabellene i prosjekt-utforskeren

91 92 10 BILDEGALLERI Snarveien til MySQL og Dreamweaver CS3 Opprette en bruker for databasen 1 Sørg for å være innlogget i Query Browser 2 Velg Tools MySQL Administrator 3 Velg User Administration i menyen 4 Velg så knappen Add new user 5 Fyll inn galleri som brukernavn og drossap i de to passordfeltene 6 Velg fanen Schema Privileges 7 Flytt over SELECT-rettigheter for bildegalleri-schemaet til Assigned Privileges ved hjelp av pilene 8 Oversend den nye brukeren til MySQL ved å trykke på Apply Changes Opprette webområdet 1 Opprett et nytt webområde i Dreamweaver gjennom å velge Site New Site 2 Skriv inn bildegalleri som navn på webområdet 3 I feltet for plassering av webområdet, skriver du inn adressen 4 Velg så at du ønsker å benytte PHP MySQL som serverteknologi 5 Marker valget Edit and test locally, og skriv inn plasseringen c:\wamp\www\bildegalleri 6 Benytt adressen som testing server 7 Velg at du ikke ønsker å benytte noen remote server 8 Opprett webområdet ved å klikke Done

92 Utvikling av dynamiske websider Legge inn data i databasen Før vi begynner å lage websidene for galleriet, kan det være lurt å ha litt testdata i databasen. 1 Velg deg ut 5 bilder, og navngi disse bildene bilde1.jpg, bilde2.jpg, bilde3. jpg osv. Det er ingen begrensning på hva bildene kan hete, men det kan være greit å arbeider med de samme filnavnene som eksempelet benytter 2 Flytt eller kopier bildene over i c:\wamp\www\bildegalleri\bilder (altså en ny mappe som heter bilder i mappen til webområdet) 3 Legg inn følgende fotografer: BILDEGALLERI 4 Legg inn følgende bilder. Benytt gjerne data som passer til dine bilder, men la fotografreferansene stå som de gjør: 5 Opprett følgende gallerier: 6 Legg inn følgende koblinger mellom bilder og galleri i tabellen galleribilde: Koble til databasen 1 Velg File New 2 Velg deretter Blank Page, Page Type PHP og Layout <none> 3 Sørg for at fanen Databases er valgt i Application-panelet 4 Velg pluss-knappen og deretter MySQL Connection 5 Fyll inn navnet gallerikobling, plasseringen localhost, brukernavnet galleri og passordet drossap som tilkoblingsinformasjon 6 Velg så bildegalleri som database 7 Trykk på knappen Test, og kontroller at du får en melding om at tilkoblingen var vellykket 8 Legg til gallerikobling i webområdet ved å trykke OK

93 94 10 BILDEGALLERI Snarveien til MySQL og Dreamweaver CS3 Lage bildevisning Vi starter prosjektet med å lage en webside som skal hete visbilde.php. Denne websiden kan presentere ett bestemt bilde som blir angitt gjennom et parameter som heter id i URL'en. I tilegg til selve bildet, vil websiden også vise informasjonen om bildet og fotograf. F.eks kan bilde1.jpg vises ved å angi følgende URL: 1 Gå til fanen Bindings på Application-panelet, og velg å legge til en URL Variable 2 Gi parameteret navnet id, og trykk OK 3 Kontroller at du har fått inn et nytt parameter under Bindings 4 Velg å lage et nytt Recordset fra Bindings 5 Start med den enkle versjonen av dialogen, gi datasettet navnet bildevisning og sett koblingen til å være gallerikobling. Velg så å filtrere resultatet slik at vi kun viser de forekomstene der filnavn-verdien er det samme som URL-parameteret id 6 Test spørringen. Du blir nå spurt om å oppgi en "testverdi" for URLparamteteret id. Fyll inn bilde3.jpg 7 Kontroller at du får ut informasjon dette bildet. Lukk deretter testvinduet 8 Bytt til den avanserte delen av Recordset-dialogboksen. Legg til at vi også ønsker å hente informasjon om fotografer, og at vi vil ha datoen på norsk format, ved å endre SQL-setningen til følgende:

94 Utvikling av dynamiske websider 9 Merk deg den spesielle verdien colname, som er en variabel simpleversjonen av dialogen lagde for oss. Denne vil hele tiden inneholde verdien vi filtrerer på, som automatisk hentes fra URL-parameteret id 10 Det er dessverre ikke mulig å teste slike sammensatte spørringer ved å angi en URL-parameter, så en test vil bare gi No data. Test allikevel spørringen for å kontrollere at den har gyldig syntaks 11 Legg til spørringen ved å trykke OK i dialogboksen Recordset. Kontroller at den kommer opp under Bindings 12 Sett markøren i websiden, og velg Insert Data Objects Dynamic Data Dynamic Text. Velg så feltet tittel, og trykk OK 13 Marker det dynamiske elementet bildevisning.tittel, og sett formateringen til å være heading BILDEGALLERI 14 Sett inn nok et nytt dynamisk tekstfelt på linja under overskriften, og bind dette til beskrivelsesfeltet. La beskrivelsen få en kursiv skrift 15 På en ny linje under beskrivelse, skriv inn ledetekstene Data: og Fotograf: på hver sin linje, og gi dem fet skrift 16 Sett så inn dynamiske tekstfelt for hver av disse 17 Lag en ny linje mellom overskriften og beskrivelsen. La markøren stå her mens du går til kodemodus, og skriver følgende kode

95 96 Snarveien til MySQL og Dreamweaver CS3 18 Gå tilbake til designmodus. Legg til en ny blank linje til slutt, der du skriver inn teksten Bildet finnes dessverre ikke 19 Marker alt innholdet på siden, unntatt den siste linjen, og velg Insert Data Objects Show Region Show If Recordset Not Empty 20 Knytt visningen til datasettet bildevisning, og trykk OK 10 BILDEGALLERI 21 Marker setningen Bildet finnes dessverre ikke, og velg Insert Data Objects Show Region Show If Recordset Empty. Knytt igjen visningen til datasettet bildevisning 22 Velg File Save, og gi websiden navnet visbilde.php 23 Testkjør websiden. Sjekk at du får feilmeldingen, da intet bilde er angitt 24 Legg til parameteret id med verdien bilde1.jpg i adressen slik at denne blir og vis siden igjen. Kontroller at du nå får ut bildet, informasjonen og fotografen

96 Utvikling av dynamiske websider Lage gallerivisning Neste steg i prosessen med å lage et bildegalleri er å lage en webside som kan vise alle bildene et bestemt galleri består av. Denne websiden skal vi kalle visgalleri.php, og den vil ha et id-parameter for å vise et bestemt galleri. Dersom man trykker på et bilde på denne websiden, skal man bli videresendt til visbilde.php der det aktuelle bildet presenteres BILDEGALLERI 1 Sørg for at bildegalleri er det aktive webområdet 2 Velg File New 3 Velg Blank Page, Page Type PHP og Layout <none> 4 Gå til fanen Bindings på Application-panelet, og kontroller at idparameteret også er aktivt for denne websiden 5 Velg å lage et nytt Recordset 6 Velg den enkle versjonen av dialogen, og gi datasettet navnet galleriinfo. Benytt gallerikobling som tilkobling og galleri som tabell. Lag så et filter som kun plukker ut data med samme galleriid som id-parameteret 7 Test spørringen, og benytt 1 som "testverdi" for id-parameteret. Kontroller at du får ut informasjonen om galleriet 8 Legg til datasettet ved å trykke OK i Recordset-dialogen 9 Sett markøren i websiden, og velg Insert Data Objects Dynamic Data Dynamic Text. Velg så feltet tittel, og trykk OK 10 Marker det dynamiske tekstfeltet galleriinfo.tittel, og sett formateringen til å være heading 1 11 Sett så inn et dynamisk tekstfelt for beskrivelse på en ny line, og gi denne en kursiv skrift 12 Legg så til en ny linje til slutt som sier Galleriet finnes ikke 13 Marker de to dynamiske tekstfeltene, og velg Insert Data Objects Show Region Show If Recordset Not Empty. Bind show-regionen til datasettet galleriinfo

97 98 Snarveien til MySQL og Dreamweaver CS3 14 Marker så den siste linja som informerer om at galleriet ikke finnes, og velg Insert Data Objects Show Region Show If Recordset Empty. Bind også denne show-regionen til galleriinfo 10 BILDEGALLERI 15 Velg File Save, og gi websiden navnet visgalleri.php 16 Testkjør websiden, og sjekk at du får en melding om at galleriet ikke finnes 17 Legg til at parameteret id skal ha verdien 1 i adressen, og kontroller at du nå får informasjon om galleriet 18 Velg å lage ytterligere et Recordset 19 Start med den enkle versjonen av dialogen, og gi dette datasettet navnet gallerivisning. Benytt gallerikobling og galleribilde som henholdsvis tilkobling og tabell. Fortell at du kun er interessert i bilde-verdien fra galleribilde-tabellen, og at oppføringene skal filtreres til de som har en verdi for galleri som samsvarer med id-parameteret 20 Test spørringen og benytt 1 som "testverdi" for id-parameteret. Kontroller at du da får ut bildene som tilhører galleriet 21 Bytt til den avanserte visningen, og oppdater SQL-spørringen til å bli følgende: 22 Test spørringen, og se at du ikke får noen feilmeldinger. Da vi er i den avanserte versjonen av dialogen, og spørringen inneholder et parameter, vil du kun få ut No data 23 Legg til datasettet ved å trykke OK

98 Utvikling av dynamiske websider 24 Lag en ny linje rett etter det dynamiske tekstfeltet galleriinfo.beskrivelse inne i show-regionen, og velg Insert Data Objects Dynamic Data Dynamic Text. Velg feltet filnavn fra datasettet gallerivisning, og trykk OK BILDEGALLERI 25 Marker det dynamiske tekstfeltet gallerivisning.filnavn. Pass på å kun markere selve feltet 26 Velg Insert Data Objects Repeat Region. Baser repeat-regionen på datasettet gallerivisning, velg å vise alle oppføringer, og trykk OK 27 Mens den nye repeat-regionen er markert, bytt til kodevisning, og gjør endringene som skal til for å få følgende kode: 28 Bytt tilbake til designmodus, og kontroller at du har fått gjort om tekstfeltet til et dynamisk bilde med en link 29 Velg File Save for å lagre endringene 30 Testkjør websiden, og sjekk at du får feilmelding om at galleriet er ugyldig 31 Legg til parameteret id i adressen med 1 som verdi, og vis siden igjen. Kontroller at du får opp galleriet med tilhørende bilder, og at du blir sendt videre til bildevisning dersom du trykker på et bilde

99 BILDEGALLERI Snarveien til MySQL og Dreamweaver CS3 Lage galleriopplisting Vi skal til slutt lage en webside med navn listgallerier.php. Websiden skal liste opp alle galleriene i databasen, samt viser et tilfeldig valgt bilde fra hvert galleri. Dersom man velger et galleri skal man komme videre til visgalleri.php for det aktuelle galleriet. Ettersom det å hente ut et tilfeldig bilde for hvert galleri ikke er helt rett frem, velger vi å først lage et view for denne spørringen. På den måten blir det betydelig enklere å arbeide med datasettet i Dreamweaver. Viewet skal ha alle feltene til tabellen galleri, men i tilegg et felt med navn tilfeldigbilde. 1 Logg inn i Query Browser, høyreklikk på prosjektet bildegalleri og velg Make Default Schema 2 Høyreklikk på prosjektet bildegalleri igjen, og velg Create New View 3 Gi dette viewet navnet gallerimedbilde 4 Skriv inn følgende SQL-setning for viewet, og trykk Execute CREATE VIEW `bildegalleri`.`gallerimedbilde` AS SELECT galleriid, tittel, beskrivelse, (SELECT bilde FROM galleribilde WHERE galleribilde.galleri=galleri.galleriid ORDER BY rand() LIMIT 1) AS tilfeldigbilde FROM galleri; 5 Kontroller at viewet kom inn under prosjektet bildegalleri 6 Lukk fanen gallerimedbilde ( ) 7 Dobbeltklikk på viewet for å skrive en uthentingskommando, og trykk Execute. Kontroller at du får ut informasjonen og et tilfeldig bilde fra galleriet 8 Gå tilbake til Dreamweaver og sørg for at bildegalleri er det aktive webområdet 9 Velg File New 10 Velg så Blank Page, Page Type PHP og Layout <none> 11 Velg å lage et nytt Recordset 12 Benytt den enkle versjonen av dialogen, og gi datasettet navnet gallerier. Velg å hente ut data fra viewet gallerimedbilde gjennom tilkoblingen gallerikobling

100 Utvikling av dynamiske websider 13 Test datasettet og sjekk at du får ut informasjonen. Lukk så testvinduet 14 Legg til datasettet ved å trykke OK 15 Skriv inn teksten Gallerier med heading 1 på websiden 16 Lag en ny linje, og velg Insert Table. Velg her 1 rad og 2 kolonner. Sett border thickness til 0, og cell spacing til Sett markøren i kolonne én i tabellen, og velg Insert Data Objects Dynamic Data Dynamic Text. Benytt her datafeltet tilfeldigbilde 18 Sett på samme måte inn det dynamiske datafeltet tittel i kolonne to BILDEGALLERI 19 Gi tittelfeltet heading 2 som format 20 Marker datafeltet gallerier.tilfeldigbilde, og gå til kodevisning. Gjør endringene i koden slik at du får følgende: 21 Gå tilbake til designmodus og marker tabellraden (ikke hele tabellen). Velg så Insert Data Objects Repeat Region. Bind denne til datasettet gallerier, og velg å ha med alle forekomster. Trykk deretter OK 22 Velg File Save, og gi fila navnet listgallerier.php 23 Testkjør websiden, og kontroller at du får opp galleriene med et tilfeldig bilde fra hvert galleri. Test også at du kommer til visgalleri.php for det aktuelle galleriet, når du klikker på et bilde

101 102 Snarveien til MySQL og Dreamweaver CS3 >>11 SQL 11 SQL I dette kapittelet vil du lære mer om hva SQL er om SELECT-strukturen om INSERT-strukturen om UPDATE-strukturen om DELETE-strukturen om CREATE VIEW-strukturen Gjennom denne boka har du stiftet bekjentskap med å skrive såkalte spørringer. Dette har vært gjort i spørrespråket SQL, uten å forklare spesielt detaljert hvordan SQL er bygget opp. Dette kapittelet vil derfor forsøke å gi deg en meget kort introduksjon til å skrive SQL-spørringer. SQL er imidlertid et altfor omfattende tema for denne boka, så denne gjennomgangen vil derfor ha som mål å gi deg en enkel oversikt over de viktigste elementene. Vær klar over at selv om SQL i utgangspunkt er et standardisert språk for alle databaser, har mange databaser sine egne dialekter. Dette medfører at enkelte kommandoer du kan finne på nettet ikke uten videre fungerer i MySQL. SQL Structured Query Language, eller SQL som det vanligvis kalles, er et standardisert kommandospråk som benyttes mot en database. Språket inneholder i hovedsak to typer kommandoer, nemmelig de for datadefinisjon og de for datamanipulasjon.

102 Utvikling av dynamiske websider Datadefinisjon omhandler blant annet det å opprette og fjerne databaser, tabeller og views, mens datamanipulasjon omfatter innsetting, endring, sletting og uthenting av data. I dette kapittelet vil vi i konsentrere oss om de kommandoene vi har benyttet i boka. I alle de videre eksemplene vil vi benytte en tabell med navn maaling. For noen eksempler vil vi også benytte oss av tabellen maalestasjon som stasjonfeltet i maaling er fremmednøkkel til SQL Under vises et eksempel på data i tabellene. I virkeligheten ville de inneholde mange flere rader. Maaling: Maalestasjon: Du kan teste de ulike kommandoene som vises i dette kapittelet direkte i din database, dersom du først oppretter tabellene og fyller dem med testdata. Sett imidlertid prosjektet ditt som default schema, slik at SQLspørringene kun trenger inneholde tabellnavnet.

103 104 Snarveien til MySQL og Dreamweaver CS3 SELECT Kommandoen SELECT lar oss hente ut data fra en database. I sin enkleste form kan en SELECT-kommando se ut som følger: SELECT * FROM maaling; 11 SQL Her ber vi databasen om å få hentet ut data fra alle kolonner (indikeres med *) fra tabellen maaling. Vi kan også angi hvilke kolonner vi ønsker å hente ut ved å skrive disse atskilt med komma. SELECT tidspunkt, stasjon, beskrivelse FROM maaling; Filtrering Ofte har vi også lyst til å begrense hvilke rader vi skal hente ut. Dette kan vi gjøre ved å føye på en WHERE-betingelse til spørringen. SELECT tidspunkt, stasjon FROM maaling WHERE vindretning='nø'; Merk deg at verdier av typen tekst må omsluttes av enkle hermetegn i SQL-spørringer. WHERE kan også bestå av mer kompliserte logiske uttrykk, som er sammensatt av flere betingelser. SELECT * FROM maaling WHERE temperatur<5.0 AND vindretning='nø';

104 Utvikling av dynamiske websider Sortering Dersom vi ønsker å sortere dataene vi henter ut fra databasen, kan vi legge til elementet ORDER BY. Vi kan sortere resultatet på en bestemt kolonne stigende (ASC) eller synkende (DESC) SQL SELECT * FROM maaling ORDER BY tidspunkt ASC; Vi kan også sortere på flere felter. I følgende spørring vil vi primært sortere på stasjon i stigende alfabetisk rekkefølge, deretter på synkende tidspunkt innenfor en stasjon. SELECT * FROM maaling ORDER BY stasjon ASC, tidspunkt DESC; Kombinere elementer Elementene vi har sett på til nå lar seg også lett kombinere, slik at vi kan begrense antall rader og deretter sortere dem. SELECT tidspunkt, stasjon FROM maaling WHERE temperatur<5.0 ORDER BY vindstyrke DESC; Aggregering Vi kan også benytte såkalte aggregeringsfunksjoner for å beregne informasjon som ikke finnes direkte i databasetabellen. For eksempel kan vi hente ut antall rader i tabellen maaling på følgende måte. SELECT COUNT(*) FROM maaling; Ved hjelp av aggregeringsfunksjonene SUM, AVG, MAX og MIN kan vi også finne summen, gjennomsnittet, største og minste verdi i et felt. SELECT MAX(temperatur) FROM maaling;

105 106 Snarveien til MySQL og Dreamweaver CS3 Ved å legge på en betingelse kan vi også aggregere kun visse rader i tabellen, og for eksempel få ut maksimumstemperaturen for målinger gjort i Halden SELECT MAX(temperatur) FROM maaling WHERE stasjon='halden'; 11 SQL Gruppering Aggregering gjelder i utgangspunktet for hele tabellen, og vi får kun ut én verdi per aggregering. Vi kan imidlertid velge å gruppere sammen dataene i flere grupper, og så aggregere innenfor hver gruppe gjennom elementet GROUP BY. I følgende spørring vil vi få ut maksimumstemperaturen for hver enkelt stasjon. SELECT stasjon, MAX(temperatur) FROM maaling GROUP BY stasjon; Tilsvarende kan vi finne antall målinger for hver stasjon. SELECT stasjon, COUNT(*) FROM maaling GROUP BY stasjon; Vi kan også gruppere data som er filtrert, ved å legge på en WHEREbetingelse. SELECT stasjon, COUNT(*) FROM maaling WHERE temperatur<0 GROUP BY stasjon; Vi kan også gi den utregnede kolonnen et feltnavn. SELECT stasjon, COUNT(*) as 'antallkaldemaalinger' FROM maaling WHERE temperatur<0 GROUP BY stasjon;

106 Utvikling av dynamiske websider Funksjoner Ofte ønsker vi å utføre en formatering på verdiene i et felt idet vi henter ut dataene. Dette kan vi gjøre gjennom funksjoner. Dersom vi for eksempel ønsker å få dataene i feltet tidspunkt på et norsk format, kan vi benytte funksjonen DATE_FORMAT SQL SELECT stasjon, DATE_FORMAT(tidspunkt, '%d/%m-%y %H:%i%:%s') AS 'maaletidspunkt', temperatur FROM maaling; Her henter vi ut stasjon, tidspunkt formatert på norsk og temperatur. Det genererte feltet gir vi navnet maaletidspunkt. Du kan finne mer informasjon om formateringskodene som benyttes på følgende webadresse: html#function_date-format Dersom vi ønsker å hente ut deler av en tekst, kan vi benytte funksjonen SUBSTR. Denne funksjonen må vite tegnet den skal starte å klippe på, samt hvor mange tegn den skal klippe. Vi kan derfor hente ut de første 5 tegnene av beskrivelsen på følgende måte: SELECT SUBSTR(beskrivelse,1,5) AS 'forkortettekst' FROM maaling; Du kan finne mange flere funksjoner dersom du slår opp i MySQLmanualen:

107 108 Snarveien til MySQL og Dreamweaver CS3 Koble tabeller Dersom vi skal hente data fra flere tabeller, er det fristende å kun ramse opp tabellnavnene i FROM-delen SELECT tidspunkt, stasjon, latitude, longitude, temperatur FROM maaling, maalestasjon; 11 SQL Kjører vi denne spørringen får vi imidlertid mange flere resultater enn de vi var ute etter. Dette er fordi databasen ikke vet hvordan de to tabellene er relaterte, og derfor genererer alle mulige kombinasjoner av dataene i begge tabellene for å gjøre oss fornøyde. Vi må derfor fortelle i SQL-spørringen at vi kun er interesserte i de resultatkombinasjonene der maaling sin stasjon er den samme som maalestasjon sitt navn. Dersom vi skulle hente data fra flere enn to tabeller, måtte vi hatt med tilsvarende mange begrensinger. SELECT tidspunkt, stasjon, latitude, longitude, temperatur FROM maaling, maalestasjon WHERE stasjon=navn; Når vi arbeider med flere tabeller er det ofte hensiktsmessig å referere til feltnavnet ved å skrive tabellnavn.feltnavn. Dersom tabellene har felt som heter det samme, må vi også gjøre dette for å unngå tvetydigheter. SELECT tidspunkt, stasjon, latitude, longitude, temperatur, maaling.beskrivelse FROM maaling, maalestasjon WHERE maaling.stasjon=maalestasjon.navn; Vi kan også gi tabeller alias for å slippe å skrive så mye. SELECT tidspunkt, stasjon, latitude, longitude, temperatur, m.beskrivelse FROM maaling m, maalestasjon m2 WHERE m.stasjon=m2.navn;

108 Utvikling av dynamiske websider INSERT INSERT-kommandoer benyttes, som navnet tilsier, for å sette inn data i databasen. Strukturen er forholdsvis enkel, og har ikke så mange variasjoner som en SELECT-spørring. For å sette inn en ny registrering i maaling-tabellen, vil INSERTkommandoen se ut som følger SQL INSERT INTO maaling(tidspunkt, stasjon, temperatur, vindstyrke, vindretning, beskrivelse) VALUES(' :23:02', 'Halden',- 0.7,1.5,'SV','Sludd'); Ønsker man å sette inn tidspunktet akkurat nå, kan vi også benytte funksjonen NOW() istedenfor å skrive datoen og tiden selv. INSERT INTO maaling(tidspunkt, stasjon, temperatur, vindstyrke, vindretning, beskrivelse) VALUES(NOW(), 'Halden',-0.7,1.5,'SV','Sludd'); Dersom man oppgir data i alle felt i riktig rekkefølge kan feltnavnene droppes. INSERT INTO maaling VALUES(NOW(), 'Halden',-0.7,1.5,'SV','Sludd'); DELETE For å slette rader fra tabellen må vi kjøre en DELETE-kommando. Ønsker vi å fjerne alle målinger for Halden, kan vi gjøre følgende. DELETE FROM maaling WHERE maalestasjon='halden'; Det gjelder her å finne en betingelse til WHERE som kun gjelder for de radene man ønsker å slette. Dersom du virkelig ønsker å fjerne alle data kan imidlertid WHERE utelates. DELETE FROM maaling;

109 110 Snarveien til MySQL og Dreamweaver CS3 UPDATE For å oppdatere data i databasen kjører man en UPDATE-kommando. Ønsker vi for eksempel å oppdatere temperaturen til -5.7 på tidspunktet :17:01 i Halden, kan vi skrive følgende. UPDATE maaling SET temperatur=-5.7 WHERE tidspunkt=' :17:01' AND stasjon='halden'; 11 SQL Det som kompliserer en UPDATE-kommando er at du må finne en betingelse til WHERE (denne fungerer likt som WHERE under SELECT) som gjør at kun de radene du ønsker å oppdatere får en ny verdi. Her er det ofte fornuftig å bruke primærnøkkelen i tabellen, ettersom denne inneholder unike verdier for hver rad. Vi kan også gjøre relative oppdateringer. La oss si at vi finner ut at målestasjonen i Halden har vist 1 grad for lite. Da kan vi oppdatere alle målinger med følgende kommando. UPDATE maaling SET temperatur=temperatur+1 WHERE stasjon='halden'; View Som nevnt tidligere i boka, er et view enkelt forklart en spørring som har fått et navn. Et view skrives derfor på formen: CREATE VIEW navn AS select-spørring; Dersom du ønsker mer informasjon om SQL, er MySQL-manualen er godt sted å starte: refman/5.1/en/sql-syntax. html Dermed kan vi for eksempel lage et view over antall målinger på følgende måte: CREATE VIEW maalingteller SELECT stasjon, COUNT(*) as 'antallmaalinger' FROM maaling GROUP BY stasjon;

110 Utvikling av dynamiske websider >>12 MySQL Workbench MYSQL WORKBENCH I dette kapittelet vil du lære om hva MySQL Workbench er hvordan man lager modeller i MySQL Workbench hvordan man overfører en modell til MySQL MySQL Workbench er et modelleringsprogram for større databaseprosjekter. Programmet vil hjelpe deg med å visualisere prosessen rundt å designe databasen, samt å opprette den faktiske databasen i MySQL. Denne boka vil benytte seg av versjon 5.0 av programmet, som var den nyeste versjonen da denne boka ble skrevet. På tidspunktet da denne boka ble skrevet finnes MySQL Workbench i en gratis og en kommersiell versjon. Gratisversjonen mangler noen av de mer avanserte funksjonene, samt muligheten for en "live" oppdatering mellom datamodell og database. Til vårt bruk vil imidlertid denne gratisversjonen være mer enn nok. Du kan laste ned produktet fra MySQL sine nettsider:

111 MYSQL WORKBENCH Snarveien til MySQL og Dreamweaver CS3 Tegne en datamodell Etter å ha installert produktet kan du starte det fra menyvalget MySQL Workbench under mappa MySQL på startmenyen. Følgende skjermbilde vil da være det første som møter deg. Vi har mange måter å arbeide med datamodellen på. Vi kan velge å opprette tabeller og relasjoner via dialoger, importere SQL-kommandoer for tabeller eller tegne dem direkte i et diagram. Vi skal i denne boka begrense oss til det siste, og gå gjennom et enkelt eksempel for å opprette en datamodell for følgende kunderegister:

112 Utvikling av dynamiske websider 1 Dobbeltklikk på ikonet Add Diagram. Du får nå opp det grafiske modelleringsverktøyet MYSQL WORKBENCH 2 Høyreklikk på schemanavnet mydb i Catalog-panelet, og velg Rename. Gi så prosjektet navnet kunderegister 3 Velg Place a New Table-verktøyet i verktøykassen, og klikk på et ønsket sted i diagrammet. Du får da plassert ut en ny tabell med navnet table1

113 114 Snarveien til MySQL og Dreamweaver CS3 4 Dobbeltklikk på den nye tabellen for å få opp egenskapspanelet 12 MYSQL WORKBENCH 5 Gi tabellen navnet kunde 6 Velg fliken Columns, og legg til kolonnene vi ønsker at tabellen skal ha. Her setter vi også datatype samt evt. informasjon om not null, autoincrement og defaultverdi. Merk deg at du kan dra kolonnene opp og ned for å endre rekkefølge på dem 7 Velg igjen Place a New Table-verktøyet, og lag nok en tabell 8 Dobbeltklikk på tabellen for å få opp egenskapene, og gi tabellen navnet poststed 9 Velg fliken Columns og legg til følgende kolonner 10 Velg verktøyet Place a Relationship Using Existing Columns i verktøykassen. Du får nå beskjed om å klikke på den/de kolonnene som du ønsker skal være fremmednøkler

114 Utvikling av dynamiske websider 11 Marker kolonnen postnummer i kunde-tabellen, og klikke på knappen Pick Referenced Columns i informasjonsboksen for å bytte modus. Du får nå beskjed om å velge kolonnen det skal refereres til 12 Klikk så på postnummer i poststed-tabellen, og du har fått laget en referanse/relasjon/kobling mellom tabellene MYSQL WORKBENCH 13 Dobbeltklikk på kunde-tabellen for å se egenskapene til denne 14 Velg fliken Foreign Keys, og klikk på den eneste fremmednøkkelen som er registrert her, nemmelig fk_kunde_poststed 15 Visningen du nå ser kan du benytte som et alternativ til det grafiske pek-og-klikk verktøyet, eller for å sette mer avanserte egenskaper på eksisterende referanser 16 Velg igjen verktøyet Place a New Table

115 116 Snarveien til MySQL og Dreamweaver CS3 17 Opprett en ny tabell med navn kundekategori, og gi denne tabellen følgende kolonner: 12 MYSQL WORKBENCH 18 Velg verktøyet Place a Relationship Using Existing Columns, og benytt kundekategori i kunde-tabellen som fremmednøkkelkolonne 19 Klikk knappen Pick Referenced Columns i informasjonsboksen, og benytt kategoriid i kundekategori-tabellen som kolonne det refereres til 20 Du har nå laget en datamodell for kunderegisteret. Er du ikke fornøyd med plasseringen av tabellene, kan du enkelt flytte dem rundt i designområdet ved å benytte drag and drop-teknikken 21 Velg File Save for å lagre prosjektet som en MySQL Workbench Modell. Fila vil da få filendelsen *.mwb

116 I den kommersielle versjonen kan designverktøyet koble seg opp mot databasen direkte. I gratisversjonen må vi gå via en fil med SQLkommandoer. Utvikling av dynamiske websider Fra datamodell til database Etter at vi er ferdige med datamodellen, er det ønskelig å overføre denne til MySQL-databasen. 1 Velg File Export Forward Engineer SQL CREATE Script... 2 Sett output file til å være kunderegister.sql på et filområde du selv velger MYSQL WORKBENCH Dersom du skal erstatte en eksisterende database med en ny modell, kan du huke av for at du ønsker å generere DROP-statements slik at eventuelle eksisterende tabeller forsvinner. Vær imidlertid klar over at også eventuelle data vil forsvinne ved et slikt valg. 3 Trykk så Next. I den neste dialogen lar du valgene stå, og trykker Finish

117 118 Snarveien til MySQL og Dreamweaver CS3 4 Verifiser at du har fått generert fila på plasseringen du valgte. Fila vil nå inneholde en mengde SQL-kommandoer for å opprette databasen 12 MYSQL WORKBENCH 5 Start WampServer, om den ikke alt kjører, og logg deg inn i databasen via QueryBrowser