TOM HEINE NÄTT Snarveien til. MySQL og. Dreamweaver CS5. Bokmål

Størrelse: px
Begynne med side:

Download "TOM HEINE NÄTT Snarveien til. MySQL og. Dreamweaver CS5. Bokmål"

Transkript

1 TOM HEINE NÄTT Snarveien til MySQL og Dreamweaver CS5 Bokmål

2 Gyldendal Norsk Forlag as og Halden Dataservice as 2010 Redaktør: Formgiver: Omslagsdesign: Kjell Arne Iversen Kevin Sommer-Mathiesen Hild Mowinckel Trykk og innbinding: AIT Trykk Otta AS ISBN Alle henvendelser om utgivelsen kan rettes til Halden Dataservice as Storgata 4C 1767 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.

3 Forord Denne boka gir deg en grunnleggende innføring i hvordan du bruker Dreamweaver CS5 og MySQL for å utvikle 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 statiske og dynamiske websider med Dreamweaver CS5 og MySQL. Boka vil ta utgangspunkt i Dreamweaver CS5, 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. Boka er delt i to deler, der første del tar for seg Dreamweaver CS5 som er verktøy for å utvikle statiske websider. Andre halvdel ser på koblingen mellom Dreamweaver CS5 og MySQL for å lage dynamiske websider. Et utvalg øvingsoppgaver til bokas kapitler vil du finne på På samme nettadresse vil du finne øvingsfiler som benyttes i ulike øvelser og oppgaver. August 2010, Tom Heine Nätt

4 Innholdsfortegnelse (1) Innledning Planlegge et nytt webområde 8 Innhold 8 Struktur 8 Utseende 9 Kompatibilitet 9 Arbeidsområdet i Dreamweaver 9 Webområder 11 Opprette et webområde 12 Endre et webområde 13 Endre tegnsett 13 (2) Arbeide med websider Innledning 14 Skrive inn tekst og ulike typer linjeskift 14 Opprette en ny webside 15 Enkel formatering av websiden 16 Lagring av websider 17 Spesielt om lagring av førstesider 17 Lagre en webside for første gang 18 Forhåndsvise websiden i en nettleser 18 Ulike sidevisninger i Dreamweaver 19 (3) Hyperlinker Innledning 20 Opprette webområdet Mobilpartner 20 Ulike typer hyperlinker 21 Lage hyperlinker til websider 22 Hyperlink innenfor samme webområde 22 Hyperlinker til e-postadresser 23 Hyperlinker til eksterne websider 23 Importere filer til webområdet 24 Hyperlinker til filer og dokumenter 25 (4) Strukturere websider Innledning 26 Opprette webområdet Resultatservice 27 Formatering av tekst 28 Sette inn overskrifter og uthevinger 29 Lage en punktmerket eller nummerert liste 29 Sette inn punktmerker 29 Sette inn vannrette delelinjer 29 Arbeide med tabeller 30 Sette inn tabell 30 Markere hele eller deler av tabellen 31 Endre tabellens oppbygning 32 Bruk av bilder 33 JPG (JPEG) 33 GIF 33 PNG 33 Andre grafikkformater 33 Sette inn bilder 34 Angi grafikkegenskaper 36 Beskjære bilder 36 Bruk av multimedieanimasjoner 37 Sette inn et multimedieobjekt 37 (5) Formgi webområder Innledning 39 Eksterne stilark (External Stylesheets) 40 Interne stilark (Embedded Stylesheets) 40 Intern stilredigering (Inline Styles) 40 Opprette webområdet Frisk 41 Lage et stilark 42 Legge til flere stiler på et eksisterende stilark 44 Koble websider til et eksisterende stilark 45 Bruke egendefinerte stiler 46 Endre en eksisterende regel 48 (6) Mer om CSS Innledning 49 Opprette webområdet og testsiden 50 Legge til stilark for andre medier 54 Absoluttposisjonering 57 Mer om CSS 59

5 (7) Maler/templates Innledning 61 Opprette webområdet Vertigo Flyreiser 62 Lage en ny template 63 Fylle malen med innhold 64 Sette inn en editerbar region 66 Lage websider basert på malen 66 Endre en mal 69 Rammer 71 (8) Publisering Stavekontroll i Dreamweaver 72 Endre språk på stavekontroll 72 Foreta stavekontroll 73 Organisere webområdet 73 Enkel filbehandling i webområdet 73 Rapporter 73 Bruke rapporter 73 Sjekke kompatibilitet for nettlesere 74 Bruke kompatibilitetssjekk 74 Sjekke hyperlinker 75 Bruke hyperlinkvalidering 75 Legge inn nøkkelord 75 Publisere webområdet 77 Sette opp en FTP-server til webområdet 77 Publisere webområdet til webserveren 79 Oppdatere det eksterne webområdet 79 (9) HTML-koder Innledning 80 Det mest grunnleggende HTML-dokumentet 81 Enkel webside med notisblokk 81 Fordeler ved å kunne HTML 83 Mer om HTML-tagger 84 Editere HTML i Dreamweaver 84 De vanligste HTML-kodene 85 Tekst og avsnitt 85 Farger 86 Hyperlinker til dokumenter 87 Hyperlinker til e-postadresser 88 Grafikk 88 Tabeller 89 Validering av HTML-koder 89 W3C HTML validator 89 CSS-validering 90 Mer informasjon om HTML 90 (10) Introdukjon til dynamiske websider Statiske og dynamiske websider 94 WampServer 96 Installasjon av WampServer 96 Starte WampServer 99 Feil under oppstart av WampServer 100 Avslutte IIS 100 Avslutte andre MySQL-instanser 101 Teste WampServer 101 (11) Dynamiske websider i Dreamweaver Opprette et webområde 102 Lage din første dynamiske webside 104 Lære mer om PHP-koder 105 (12) Arbeide med MySQL Brukergrensesnitt til MySQL 106 Koble Query Browser til MySQL 107 Opprette et nytt prosjekt 109 Opprette databasetabeller 110 Legge inn data i databasetabeller 112 Flere databasetabeller 113 Slette rader 116 Opprette brukere 117 phpmyadmin 119 Datatyper i MySQL 120 (13) Koble Dreamweaver og MySQL Opprette webområdet sitatside 122 Koble til MySQL 122 Hente ut en tabelloversikt av dataene 123 Gyldighet av koblinger og datasett 124 (14) Hente ut data Koble flere tabeller 125 Presentere data ved hjelp av regioner 127 Legge til navigasjon på et datasett 129 Tilpassede datapresentasjoner 130

6 (15) Legge inn og oppdatere data Lage et enkelt innsettingsskjema 132 Innsettingsskjema med fremmednøkler 133 Slette data via en webside 135 Oppdatere data via en webside 138 (16) Gjestebok Opprette databasen og testdata 142 Opprette brukeren for gjesteboka 143 Opprette webområdet for gjesteboka 143 Koble til gjestebokdatabasen 144 Lage opplisting av hilsener 145 Legge til skjemaet 146 (17) Besøksstatistikk Opprette databasetabellen 150 Opprette brukeren for loggsystemet 150 Opprette webområdet 150 Opprette det dynamiske loggingbildet 151 Opprette testsider 154 Opprette en statistikkside 155 Vise 10 siste besøk 156 Sortere sider etter popularitet 157 Legge til grafer for popularitet 158 (18) Blogg Opprette databasetabellene 161 Opprette brukeren for bloggen 162 Lage et view for bloggvisning 163 Opprette webområdet for bloggen 164 Klargjøre bilder 165 Koble til bloggdatabasen 165 Lage opplisting av innlegg 166 Lage visning av ett innlegg 168 Koble opplisting og visning 171 Oppdatere antall visninger 172 Funksjonalitet for kommentarer 173 (19) Bildegalleri Opprette databasen 180 Opprette en bruker for databasen 183 Opprette webområdet 183 Legge inn data i databasen 184 Koble til databasen 184 Lage bildevisning 185 Lage gallerivisning 188 Lage galleriopplisting 191 (20) SQL SQL 193 SELECT 195 Filtrering 195 Sortering 196 Kombinere elementer 196 Aggregering 196 Gruppering 197 Funksjoner 198 Koble tabeller 199 INSERT 200 DELETE 200 UPDATE 201 View 201 (21) MySQL Workbench Tegne en datamodell 203 Fra datamodell til database 208 Eksportere en datamodell som grafikk 210

7 DEL 1 STATISKE WEBSIDER >>

8 8 Snarveien til MySQL og Dreamweaver CS5 >>1 Innledning I dette kapitlet skal vi lære: > å planlegge et nytt webområde > om arbeidsområdet i Dreamweaver > å skille mellom diskbaserte og serverbaserte webområder > å opprette nye webområder Planlegge et nytt webområde Før du starter arbeidet med å opprette et webområde med flere websider, bør du bruke litt tid på å planlegge webområdet. Webområdet skal være så brukervennlig som mulig samtidig som det skal være enkelt å oppdatere og vedlikeholde for utvikleren eller nettansvarlig. Under har vi oppsummert de viktigste momentene du bør være klar over før du starter arbeidet med et nytt webområde. Innhold Det er innholdet som er det viktigste i et webområde. Kvaliteten på informasjonen som publiseres, er i mange tilfeller avgjørende for leseren. Start derfor med å fokusere på innholdet. Vær nøye med rettskrivingen. Skrivefeil på websider virker forstyrrende, er lite attraktivt og kan gi webområdet et «amatørmessig» preg. Struktur Tenk nøye gjennom webstrukturen. Leseren bør unngå å klikke utallige ganger for å finne fram til rett informasjon. Samtidig skal webområdet være lett å oppdatere. Dersom brukeren må klikke mer enn 4-5 ganger for å finne informasjonen vedkommende ønsker, er sannsynligheten stor for at han i stedet avslutter og leter et annet sted. Tegn gjerne et oversiktskart i forkant av realiseringen.

9 1 INNLEDNING 9 Utseende Vær forsiktig med å bruke for mange grafiske effekter. Unngå å bruke store grafikkfiler da disse tar lang tid for nettleseren å laste ned. Bakgrunnsfarger, bakgrunnsgrafikk og tekstfarger må avbalanseres. Husk at det er informasjonen som er viktigst. Det er lurt å velge én eller to farger og bruke disse konsekvent i hele webområdet. Kompatibilitet Husk at en webside kan tolkes ulikt avhengig av hvilken nettleser som blir benyttet. Du bør derfor ikke bruke effekter som kun vil virke i bestemte nettlesere. Det er lurt å kontrollere websidene i flere nettlesere før de legges ut på nettet. Forsøk derfor i størst mulig grad å bruke standardelementer på websiden. Arbeidsområdet i Dreamweaver Når du har startet Dreamweaver, vil du se arbeidsområdet. Vi vil vise de ulike funksjonene etter hvert som vi tar dem i bruk En kort forklaring til de nummererte områdene finner du på neste side.

10 10 Snarveien til MySQL og Dreamweaver CS Vær klar over at arbeidsområdet kan endre utseende når man har jobbet med det. Man kan skjule, minimere, flytte og legge til paneler som om de skulle være vinduer. Skulle du være uheldig å gjøre endringer på arbeidsområdet som du ikke ønsket, kan du velge Window - Workspace Layout - Designer for å komme tilbake til de opprinnelige innstillingene. Vær klar over at du kan minimere og maksimere panelene ved å dobbeltklikke på panelnavnet. Vi kommer nærmere tilbake til de ulike delene av arbeidsområdet senere i boka, men vi gir en kort forklaring her. Menylinje: Det aller meste av Dreamweavers funksjonalitet finnes på disse menyene. Mange av funksjonene finnes også andre steder i programmet. Likevel vil vi i hovedsak benytte funksjonene på menylinja i denne boka, ettersom det er både lettere å forklare hvor man skal gjøre valg, og å huske hvor man finner igjen valgene. Insert-panelet: Det meste av elementene og formateringer på en webside har grafiske hurtigknapper på Insert-panelet. Insert-panelet er også delt inn i ulike seksjoner som grupperer sammen relaterte typer funksjoner og elementer. De fleste av funksjonene man finner på Insert-menyen i menylinja, vil du også finne igjen som en snarvei her. Properties-panelet: Når et element på en webside er valgt, vil man få opp egenskapene til elementet i dette panelet. Egenskapene kan også endres her. Files-panelet: Dette er en filutforsker for å få hurtig tilgang til filer. Dette panelet er spesielt nyttig hvis du vil ha oversikt over alle filene i webområdet. Start page: Her finner du de vanligste arbeidsoppgavene idet programmet starter (oppstartsbildet). Dette området vil endre seg til et dokumentvindu når vi åpner et dokument. CSS styles: Panel for å arbeide med stiler på en webside. Vi kommer tilbake til dette panelet når vi skal formgi websidene. Utover i boka kommer vi til å benytte flere av Dreamweavers paneler. Du kan hente frem disse panelene ved å velge dem på Window-menyen

11 1 INNLEDNING 11 Webområder Når vi arbeider med et nettsted, vil dette som oftest bestå av flere websider. I et editeringsverktøy er det derfor ofte hensiktsmessig å opprette et prosjekt som knytte alle disse websidene sammen under utviklingen. Dette prosjektet er det vanlig å kalle for et webområde. Når vi skal se på websidene i et webområde mens vi utvikler dem (såkalt testkjøring), har vi to muligheter. Vi kan enten navigere nettleseren til en fil på det lokale filsystemet, eller hente ut websiden gjennom en webserver. Vi vil i denne boka kalle dette for henholdsvis diskbaserte og serverbaserte webområder. Diskbasete webområder vil aksesseres i nettleseren gjennom adresser av denne typen: file:///c:/websites/test/index.html. Serverbaserte webområder vil benytte HTTP-protokollen for kommunikasjon, og derfor gi adresser som dette: index.html. Den største forskjellen du foreløpig vil merke på et diskbasert webområde og et serverbasert webområde, er altså hvordan du refererer til websider i nettleserens adresselinje. For å benytte deg av et serverbasert webområde må du ha tilgang til en webserver som kjører nødvendig programvare, eller ha installert en personlig webserver på din maskin. Grunnen til at man ofte ønsker å benytte seg av et serverbasert webområde, er at diskbaserte webområder ikke kan være dynamiske (f.eks. ha kobling til en database), noe vi skal arbeide med senere i boka. Vi vil i denne boka først benytte diskbaserte webområder, for så å gå over til serverbserverbaserte webområder i del to av boka som omhandler dynamiske websider.

12 12 Snarveien til MySQL og Dreamweaver CS5 Opprette et webområde Det første vi må gjøre når vi skal opprette et nytt nettsted, er å opprette et webområde. Alle websider vi senere oppretter, vil være samlet her. Det er viktig at du skiller på begrepene webside (engelsk: webpage) og webområde (engelsk: website). Det er ofte lett å forveksle det norske begrepet webside, som brukes i boka, og det engelske uttrykket website som brukes i Dreamweaver. 1 Velg Site-New Site... i menylinja. Alternativt kan du velge Create New Dreamweaver Site... på Start page 2 I dialogboksen som nå kommer opp velger du Site i kategoriene på venstre side. 3 Skriv inn Miljøgruppen som navn på webområdet ditt. 4 Angi så en ønsket plassering. Dette kan du velge selv, men prøv å unngå virituelle mapper slik som Skrivebord og Mine Dokumenter. Vi vil benytte C:\websites\miljogruppen 5 Avslutt dialogen ved å trykke Save 6 Som du nå ser i Files-panelet (bildet i margen), er webområdet (nettstedet) til Miljøgruppen opprettet, og du er klar for å lage websidene dette webområdet skal bestå av

13 1 INNLEDNING 13 Endre et webområde Dersom du trenger endre på instillingene til et webområde, kan du velge Site-Manage Sites..., finne det aktuelle webområdet og trykke Edit... Endre tegnsett Dreamweaver kommer som standard med Unicode (UTF-8) som tegnsett. Ideelt sett er dette det beste tegnsettet å benytte, men mange opplever alikevel problemer med dette. Spesielt når det kommer til kobling med databaser og import av tekst fra andre kilder. Om du får disse problemene er avhengig av oppsettet på maskinen/webserveren og de eksterne datakildene. Opplever du peoblemer med tegnsett i løpet av boka kan du endre tegnsettet til Western European (Vesteuropeisk). Merk deg at endringen kun gjelder nye dokumenter som blir opprettet. 1 Velg Edit - Preferences 2 Gå til kategorien New Document, og sett Default encoding til Western European/Vesteuropeisk

14 14 Snarveien til MySQL og Dreamweaver CS5 >>2 Arbeide med websider I dette kapitlet skal vi lære: > å opprette nye websider > om forskjellen på de ulike typene av linjeskift > å lagre websider > å forhåndsvise websider i en nettleser > om de ulike sidevisningene Innledning Hoveddelen av programvinduet i Dreamweaver benyttes til å arbeide med tekst og elementer på websiden. Du kan for eksempel skrive inn og redigere tekst, lage delelinjer, sette inn grafikk, lage tabeller, angi bakgrunner og hyperlinker. Skrive inn tekst og ulike typer linjeskift Tekstbehandlingsfunksjonen i Dreamweaver er tilnærmet lik andre tekstbehandlere, men i Dreamweaver finnes det flere ulike typer av linjeskift som du bør være spesielt oppmerksom på. Return-tasten brukes for å lage nye avsnitt. Hvis du trykker på Return, vil du se at det lages et stort mellomrom mellom linjene. For å oppnå et normalt linjeskift må du holde Shift-tasten nede mens du trykker Return.

15 2 ARBEIDE MED WEBSIDER 15 Opprette en ny webside 1 Sørg for at webområdet Miljøgruppen, som du opprettet i forrige kapittel er valgt som aktiv i Files-panelet 2 Velg File - New... 3 Velg deretter Blank Page, Page Type HTML og Layout <none> 4 Bytt til å kun vise det grafiske området ved å trykke på knappen Design 5 Skriv inn følgende tekst på siden:

16 16 Snarveien til MySQL og Dreamweaver CS5 Enkel formatering av websiden 1 Marker overskriften Velkommen til Miljøgruppen og velg Heading 1 under Format i egenskapspanelet nederst på skjermen 2 Marker firmanavnet Miljøgruppen nederst på siden, og formater dette til fet skrift ved å trykke på Bold-knappen i egenskapspanelet 4 Marker menypunktene fra Brukt datautstyr til Gjenbruk. Klikk så på knappen Unordered list i egenskapspanelet 5 Har du gjort alt riktig, skal siden se omtrent slik ut: 6 Skriv inn tittelen Velkommen til Miljøgruppen øverst i dokumentvinduet i DreamWeaver. Det er denne tittelen som vises øverst på tittellinja i nettleseren.

17 2 ARBEIDE MED WEBSIDER 17 Lagring av websider Når du har arbeidet med en side en stund, bør du sørge for å lagre arbeidet. Det er visse begrensninger du må passe på når du skal velge filnavn. Normalt skal du unngå bruk av norske spesialtegn (æ, ø og å). Unngå også å bruke mellomrom og tegn som punktum, komma, semikolon og lignende. Vi anbefaler også at du kun bruker små bokstaver i filnavnet ettersom mange webservere er såkalt case sensitive (dvs. små og store bokstaver er ikke samme tegn). Hvor mange tegn du kan ha i filnavnet, er avhengig av hvilken type webserver du skal publisere websidene til. Normalt vil det i dag være maksimalt 255 tegn. Sjekk med din webserver-leverandør for sikkerhets skyld. Alle websider må ha filendelsen htm eller html (med unntak av dynamiske websider som benytter asp, php, jsp og lignende). Dersom du ikke bruker denne filendelsen, vil det ofte ikke være mulig å vise websiden i en nettleser. Vi anbefaler å benytte html. Det er også en god vane å sette en tittel på websiden ved første gangs lagring. Tittelen vil vises i tittelfeltet i nettleseren. Det er en fordel å bruke litt tid på å lage beskrivende titler på sidene. Blant annet vil søkemotorene (for eksempel Google) liste opp sidenes titler i resultatoversiktene. Utskrift og bokmerking vil også basere seg på websidens tittel. Spesielt om lagring av førstesider Skal du lage en startside eller førsteside i et webområde, skal den alltid hete index.htm, index.html, default.htm eller default.html. Sjekk med din webserver-leverandør for mer informasjon. Årsaken til at dette må gjøres slik, er at du skal slippe å skrive hele webadressen til et webområde i nettleseren. Skal du for eksempel gå til Gyldendals hjemmeside, behøver du ikke å skrive index.html. Det er nok å skrive Siden index.html vises automatisk når denne adressen skrives. Dette styres av webserveren som webområdet er lagret på.

18 18 Snarveien til MySQL og Dreamweaver CS5 Lagre en webside for første gang 1 Velg File - Save. Gi websiden navnet index.html 2 Som du ser, får vi nå websiden inn under webområdet Miljøgruppen i Filespanelet Forhåndsvise websiden i en nettleser Det er fornuftig å kontrollere websiden i en nettleser etter at den er laget. Enkelte funksjoner på websider kan også kreve at de kjøres i en nettleser for å fungere. Ulike nettlesere kan tolke HTML-kodene ulikt. Websidene kan derfor i enkelte tilfeller se noe forskjellige ut i de ulike nettleserne. 1Velg File - Preview in Browser - <ønsket nettleser>. Husk å lagre eventuelle endringer først. Du kan legge til nettlesere i denne listen ved å velge File - Preview in Browser - Edit Browser List... 2 Nettleseren starter og viser websiden. Hvis du senere gjør endringer på websiden i Dreamweaver mens forhåndsvisningen er i gang, kan du trykke på knappen Oppdater eller tasten F5 i nettleseren for å se endringene

19 2 ARBEIDE MED WEBSIDER 19 Ulike sidevisninger i Dreamweaver Det finnes tre ulike måter å jobbe med websiden på i Dreamweaver. Du kan velge mellom Design, Code og Split. Disse visningsformatene brukes for at du skal ha full kontroll over de ulike delene av websiden. For å få tilgang til disse sidevisningene må du først ha åpnet en side for redigering. Sidevisningen Design I Design utformer du websiden grafisk. Visningen gir ikke alltid et korrekt bilde av hvordan websiden vil bli seende ut i en nettleser. Derfor bør du alltid kontrollere websiden i en nettleser før den publiseres. Sidevisningen Code Visningsformatet Code viser alle HTML-koder som ligger bak websiden. I denne boka gjør vi alle endringene i visningsformatet Design. Vi kommer imidlertid nærmere inn på hvordan du manuelt kan legge inn egne HTML-koder eller redigere eksisterende kode senere i boka. Sidevisningen Split Denne visningen er en hybrid mellom Design og Code. Selve HTMLkoden vises i øverste del av skjermen, mens en nedre del viser designet.

20 20 Snarveien til MySQL og Dreamweaver CS5 >>3 Hyperlinker I dette kapitlet skal vi lære: > om webområder som består av flere websider > å lage hyperlinker til websider > å lage hyperlinker til e-postadresser > å lage hyperlinker til nedlastbare filer > å legge til filer i et webområde Innledning Noe av det som gjør Internett så brukervennlig, er hyperlinkene. En hyperlink er i prinsippet bare en peker til et annet dokument, eller en lenke som vi vanligvis kaller det. For webutviklere er det imidlertid viktig å se forskjellen på ulike typer hyperlinker. Dette kapitlet gir deg en forklaring på de ulike typene hyperlinker, og det viser deg samtidig hvordan du kan opprette disse. Opprette webområdet Mobilpartner 1 Velg Site - New Site... 2 Fyll ut dialogboksen på samme måte som vi gjorde i kapittel 1, men benytt nå tittelen Mobilpartner og bruk katalogen mobilpartner 3 Velg File - New... 4 Velg deretter Blank Page, Page Type HTML og Layout <none>. Du får nå inn en webside i webområdet Mobilpartner

21 3 HYPERLINKER 21 5 Skriv inn følgende tekst, og formater overskriften med heading 1: 6 Gi websiden tittelen Velkommen til mobilpartner 7 Velg deretter File - Save og gi førstesiden navnet index.html Ulike typer hyperlinker Det finnes flere typer hyperlinker du kan opprette. Selv om framgangsmåten er mye lik, har de ulik funksjonalitet. Under finner du en oversikt over de mest brukte typene med en kort forklaring. Hyperlinker til websider Dette er den mest brukte typen hyperlink. Du lager en kobling til en annen webside slik at denne vises når du klikker på hyperlinken. Siden det lenkes til, kan enten være intern (en del av samme webområde) eller ekstern. Hyperlinker til e-postadresser Denne typen hyperlink benyttes når brukeren skal sende en e-post til en gitt adresse. Hyperlinken peker på en e-postadresse som automatisk hentes inn i brukerens e-postklient. Hyperlinker til filer og dokumenter Denne typen hyperlink brukes når man skal kunne laste ned filer til maskinen. Hyperlinken peker direkte på en fil. Dersom hyperlinken peker til et dokument (f.eks PDF), vil enkelte nettlesere åpne dokumentet direkte i nettleseren. Hyperlinker til ankere Denne typen hyperlink lager en kobling til et anker (plassering i dokumentet) internt på en webside, slik at man kan forflytte seg dit.

22 22 Snarveien til MySQL og Dreamweaver CS5 Lage hyperlinker til websider Det vanligste å gjøre, er å lage hyperlinker til websider i samme webområde, slik at man kan navigere rundt på webområdet. Hyperlink innenfor samme webområde 1 Lag et nytt dokument ved å velge File - New... og deretter velger du Blank Page av typen HTML og <none> som layout. Du får nå inn enda en webside i webområdet Mobilpartner 2 Gi dette nye dokumentet tittelen Mobilpartner - Bakgrunner, og skriv teksten Bakgrunner kommer her i selve dokumentet 3 Velg File - Save og lagre dette nye dokumentet som bakgrunner.html 4 Legg merke til at webområdet nå består av to websider, nemlig index.html og bakgrunner.html 5 Gå til websiden index.html ved å velge denne fanen i dokumentvinduet 6 Marker teksten Bakgrunner, og velg så Insert - Hyperlink 7 Trykk på browseknappen (mappen) til feltet Link, og velg bakgrunner.html i filvalgsdialogen som kommer opp 8 Avslutt med OK, og teksten Bakgrunner vil forvandle seg til en hyperlink som peker på websiden bakgrunner.html 9 Gjør tilsvarende prosedyre for Temaer med en webside kalt temaer.html 10 Gjør tilsvarende prosedyre for Ringetoner med en webside kalt ringetoner.html 11 Du kan nå teste websiden og hyperlinkene i nettleseren ved å velge File - Preview in Browser - <ønsket nettleser>

23 3 HYPERLINKER 23 Hyperlinker til e-postadresser Når du skal sette inn linker til e-postadresser kan det være en fordel at teksten på linken inneholder e-postadressen. På den måten kan brukeren selv avgjøre om man ønsker at nettleseren skal starte mailklienten, eller om man manuelt vil kopiere e-postadressen. Vær klar over at du øker sannsyneligheten for å motta spam betraktelig ved å legge ut e-postadressen din som link eller tekst på en webside. Det sikreste er å legge ut adressen som et bilde, uten link-funksjonaliteten. 1 Under de tre kategoriene på hovedsiden skriver du inn følgende tekst: Kundeservice: info@mobilpartner.no 2 Marker e-postadressen, og velg Insert - Link 3 La forslagene til tekst og epostadresse stå som de gjør, og klikk OK 4 Du kan nå teste hyperlinken ved å velge File - Preview in Browser - <ønsket nettleser> Hyperlinker til eksterne websider Vi kan også lage hyperlinker som peker til websider som ligger utenfor vårt eget webområde. Vi kaller dette eksterne websider. Når du lager disse, er det viktig at de peker til en komplett adresse (URL). Vær klar over at i noen tilfeller vil du ikke se den korrekte adressen til en webside i adressefeltet til nettleseren. Det er tilfellet når et webområde bruker rammer (frames) eller en form for serverteknologi som er tilstandsorientert (for eksempel nettbanker med innlogging).

24 24 Snarveien til MySQL og Dreamweaver CS5 Vi skal i denne øvelsen linke til telepriser.no, og åpne websiden i et nytt nettleservindu. Vær nøye med å ikke missbruke muligheten til å åpne nettadresser i nye vinduer, da dette ofte er veldig irriterende for brukeren. 1 Skriv inn teksten Finn billigste mobilabonement hos telepriser.no til slutt i dokumentet index.html 2 Marker deretter teksten telepriser.no og velg Insert - Hyperlink 3 I feltet Link skriver du og i Target velger du _blank (Åpner websiden i et nytt vindu) Importere filer til webområdet Hittil har vi vist hvordan vi lager hyperlinker til websider som allerede finnes innenfor webområdet eller som er publisert på andre nettsteder. Hvis du skal lage hyperlinker til dokumenter eller filer som ikke er lagret innenfor webområdet (men som er lagret på andre steder på maskinen din), bør de kopieres til webområdet først. 1 Høyreklikk på Site - Mobilpartner i Files-panelet, og velg Explore... 2 Du får nå opp et standard Windows filutforskervindu. I dette vinduet ligger alle de filene du allerede har i webområdet 3 Kopier filene Installasjonsveiledning Sony Ericsson.pdf og Installasjonsveiledning Nokia.pdf fra øvingsfilene for denne boka til denne mappen 4 Gå tilbake til Dreamweaver, og høyreklikk Site - Mobilpartner igjen, men denne gangen velger du Refresh Local Files 5 Som du ser i Files-panelet, har filene du la til blitt en del av webområdet

25 3 HYPERLINKER 25 Hyperlinker til filer og dokumenter I mange tilfeller kan det være aktuelt å la brukeren få laste ned filer til sin egen maskin. Større filer som skal lastes ned fra nettet bør være komprimerte (f.eks zip-filer) slik at overføringstiden blir kortest mulig. Du lager i prinsippet en hyperlink til en nedlastbar fil eller et dokument på samme måten som til en webside i webområder. Når du klikker på en hyperlink som peker til en nedlastbar fil, kan du i nettleseren velge om du skal kjøre/åpne filen eller lagre den på maskinen din. 1 Åpne index.html og skriv inn følgende tekst nederst på siden: Installasjonsveiledning for Nokia 2 Marker deretter teksten og velg Insert - Hyperlink 3 Klikk på browseknappen ved Link-feltet, og velg Installasjonsveiledning Nokia.pdf i listen 4 Gjør tilsvarende for Installasjonsveiledning Sony Ericsson.pdf 5 Lagre deretter endringene i index.html og velg File - Preview in Browser - <ønsket nettleser> 6 Klikk på hyperlinkene du har laget, og kontroller at de fungerer

26 26 Snarveien til MySQL og Dreamweaver CS5 >>4 Strukturere websider I dette kapitlet skal vi lære: > hvorfor struktur er viktig > mer om tekstformater og formateringer > å lage punktmerkede eller nummererte lister > å opprette tabeller > å sette inn bilder og multimedieanimasjoner Innledning Vanligvis når vi arbeider med ulike typer dokumenter er det lett å overse forskjellen på strukturen og utseendet/layouten til et dokument. I de senere versjoner av HTML (kodespråket for websider) er imidlertid dette skillet tydeliggjort. Man ønsker å skille innholdet og strukturen til en webside fra selve layouten. Dette gjør det mye enklere å presentere det samme innholdet på flere ulike måter (web, mobil, utskrift). Maskiner er også svært dårlige på å klare å finne data blandt stilig layout, så teknologier slik som søkemotorer osv. nyter også godt av å enkelt kunne fjerne layouten og kun fokusere på innholdet og strukturen. Dette skillet gjøres nå ved at HTML (HyperText Markup Language) kun fokuserer på innholdet og strukturen, mens alt av layout gjøres med CSS (Cascading Style Sheets). Vi skal i dette kapitelet ta for oss de grunnleggende strukturelementene i HTML, mens vi i neste kapittel kommer tilbake til denne delingen og ser på CSS og fordelene med dette. Vi skal starte kapitlet med å opprette webområdet Resultatservice. Nettstedet skal informere om resultatene fra en spørrekonkurranse.

27 4 STRUKTURERE WEBSIDER 27 Opprette webområdet Resultatservice 1 Velg Site - New Site... 2 Benytt tittelen Resultatservice og katalogen resultatservice 3 Velg deretter File - New..., Blank Page av typen HTML og <none> som layout 4 Skriv inn følgende tekst: 5 Foreta en endring av tittelen på websiden til Resultatservice - SuperQuiz 6 Velg deretter File - Save, og gi førstesiden navnet index.html

28 28 Snarveien til MySQL og Dreamweaver CS5 Formatering av tekst Du finner noen få grunnleggende formateringsegenskaper på egenskapspanelet. Disse er format, fet skrift, skråstilt skrift, punktmerket og nummerert liste. Klikker du på nedtrekkslisten til høyre for feltet Format, får du en oversikt over de tilgjengelige tekstformatene i Dreamweaver. Ved å bruke de ulike tekstformatene sørger du for å få en enhetlig formatering av teksten. Som du har sett tidligere, valgte vi heading 1 for å formatere overskriften i stedet for bold og en stor skriftstørrelse. Det er lett å tro at Format kun er en hurtig funksjon for å endre utseendet på teksten, men det er ikke helt korrekt. Format gir også teksten en mening i sammenhengen. Når vi markerer teksten med for eksempel heading 1, forteller vi ikke bare at vi ønsker en tekst som er stor og fet, men også at dette er hovedoverskriften på websiden. Heading går så helt ned til heading 6, som er den minst viktige overskriften på websiden. Dette vil for eksempel søkemotorer benytte for å skille ut viktige deler av websiden. Vanligvis benyttes tekstformatene Heading 1, Heading 2, Heading 3, Paragraph og Normal. Nedenfor følger en kort forklaring til de vanligste tekstformatene i Dreamweaver: Heading 1 6 brukes for å formatere overskrifter på ulike nivåer. 1 er den største overskriften, og benyttes til de viktigste hovedoverskriftene på websidene. I den andre enden av skalaen er 6 den minst viktige overskriften. Paragraph brukes for å definere et avsnitt. Normal er standard tekstformat for å vise ordinær tekst. Preformatted kjennetegnes ved at den ikke automatisk justeres i forhold til vinduets størrelse. Tekstformatet er derfor velegnet til for eksempel å presentere programkode hvor du vil unngå feilaktige linjeskift.

29 4 STRUKTURERE WEBSIDER 29 Sette inn overskrifter og uthevinger 1 Marker ordet Resultatservice i linje én 2 Gi denne overskriften formatet heading 1 gjennom å sette dette i egenskapspanelet 3 Gi på tilsvarende måte overskriftene Sponsorer og Resultater heading 2 som format 4 Marker teksten SuperQuiz, og gi denne en skråstilt formatering 5 Marker teksten Sist oppdatert: og gi denne en fet formatering 6 Websiden skulle nå se slik ut: Lage en punktmerket eller nummerert liste Ofte er det hensiktsmessig å bruke punktmerker eller nummerering for å øke lesbarheten på for eksempel lister og annen oppramsing. Som en generell regel skal nummerering kun benyttes der det er en bevisst rekkefølge på punktene. Sette inn punktmerker 1 Marker de to sponsorene 2 Klikk deretter på knappen for punktmarkering Sette inn vannrette delelinjer Ønsker du å dele inn websiden/teksten i seksjoner, kan du bruke vannrette delelinjer. 1 Plasser skrivemerket før teksten Sist oppdatert 2 Velg deretter Insert - HTML - Horizontal Rule

30 30 Snarveien til MySQL og Dreamweaver CS5 Arbeide med tabeller Tabeller i HTML skal per definisjon kun benyttes for å presentere data som gir en klar mening i tabellform. Alikevel ser man at tabeller til stadig blir benyttet for ulike layout-oppgaver. Vi skal i denne boka fokusere på at tabeller kun skal benyttes som en struktur, og i senere kapitler se hvordan CSS kan håndtere layout-delen. Sette inn tabell 1 Fjern teksten kommer under seksjonen Resultater, og la skrivemarkøren stå på denne plassen 2 Velg deretter Insert - Table 3 Anig at tabellen skal ha 2 kolonner og 3 rader, ingen spesiell bredde, 1 piksel i kantlinje og at både første kolonne og første rad inneholder beskrivelser 4 Klikk OK for å sette inn tabellen 5 Fyll tabellen med følgende data:

31 4 STRUKTURERE WEBSIDER 31 Markere hele eller deler av tabellen Du kan endre egenskaper for hele eller deler av en tabell. Dersom endringene du gjør, ikke skal gjelde for hele tabellen, må du markere den delen av tabellen endringene skal gjelde for. For å lettere kunne se markeringene er ikke data vist i skjermbildene under. 1 For å markere en kolonne peker du først over kolonnen, slik at musepekeren endrer form til en tykk loddrett pil. Deretter klikker du én gang 2 For å markere en rad peker du først til venstre for raden, slik at musepekeren endrer form til en høyrepil. Deretter klikker du én gang 3 For å markere hele tabellen peker du på øverste venstre hjørne, slik at musepekeren endrer form til en pil med en liten tabell. Deretter klikker du én gang 4 For å markere en celle plasserer du ganske enkelt markøren i cellen

32 32 Snarveien til MySQL og Dreamweaver CS5 Endre tabellens oppbygning Etter at vi har plassert inn en tabell vil vi ofte få behov for å legge til eller fjerne rader og kolonner. Alle endringer på en tabell gjøres ved å markere deler av tabellen, høyreklikke og velge et element under table-seksjonen av menyen som kommer til syne. 1 Marker kolonnen som nå innholder poengene 2 Høyreklikk og velg Table - Insert Rows or Columns... 3 Velg så å sette inn 2 kolonner etter valgte kolonne 4 Fyll så inn data i de nye kolonnene 5 Marker siste rad, høyreklikk og velg Table - Inset Rows or Columns... Sett så inn én rad i bunnen av tabellen 6 Skriv inn lagnavnet Loosers, og marker de tre cellene til å skrive inn poeng i 7 Høyreklikk tabellen mens disse tre cellene er valgt, og velg Table - Merge Cells. Skriv så inn teksten Diskvalifisert i den nye sammenslåtte cellen

33 4 STRUKTURERE WEBSIDER 33 De tre grafikkformatene som benyttes på internett er: JPEG eller JPG (Joint Photographic Expert Group) GIF (Graphic Interchange Format) PNG (Portable Network Graphics) Bruk av bilder Det kan kanskje virke rart å snakke om bilder og multimedia (neste seksjon) under et kapittel om struktur av websider, men faktisk er også disse elementene viktige data for websiden, og har flere struktur og innholdmessige egenskaper. På Internett brukes det i prinsippet tre ulike grafikkformater. De kan se like ut, men er ganske så forskjellige. Ulikhetene ligger blant annet i antall farger som grafikken kan vises i, måten grafikken blir lagret på og størrelsen på selve grafikkfilen. Jo større grafikkfilen er, desto lengre tid tar det for brukeren å laste ned bildet. Det er viktig at du som webutvikler vet hva som er forskjellen på de ulike formatene, og når de bør brukes. Under følger en kort oversikt: JPG (JPEG) Et JPG-bilde lagres vanligvis i 16,7 millioner farger. Formatet inneholder også en kraftfull komprimering spesiallaget for fotografiske bilder. JPG er så godt som standarden for fotografiske bilder på nettet, og er det vanligste formatet på bilder tatt med digitalkameraer. GIF Et bilde som er lagret i GIF-formatet kan maksimalt ha 256 farger. Det gjør at bildet blir mindre i filstørrelse, og derfor lastes raskere. På grunn av de begrensede fargene, egner GIF seg best til tegninger og grafikk, ikke fotografiske bilder. I tillegg kan et GIF-bilde være gjennomsiktig. GIFbilder kan også lagres slik at de gradvis kommer til syne etter hvert som de overføres fra serveren til nettleseren. Et GIF-bilde kan også være animert. PNG PNG, som uttales ping, er et format som har som målsetning å erstatte GIF. Formatet minner mye om JPG, men er spesialtilpasset formålet med grafikk på Internett. PNG har bedre komprimering og fargegjengivelse enn GIF, men støtter i seg selv ikke animasjoner. Andre grafikkformater Du kjenner sikkert til filformatet BMP (bitmap). BMP-formatet blir sjeldent brukt i websider da det gir veldig store filer og derfor blir for langsomt å laste ned over nettet. Det er heller ikke alle nettlesere som kan vise BMP-bilder. Det mest fornuftige er å konvertere en BMP-fil til GIF/PNG/JPG ved å bruke et grafikkprogram slik som Photoshop.

34 34 Snarveien til MySQL og Dreamweaver CS5 Sette inn bilder Det kan være lurt å ha lagret websiden slik at den har fått et filnavn og en plassering før du setter inn et bildet. På den måten blir det enklere for Dreamweaver lage relative filstier (selv om Dreamweaver som oftest også ordner dette ved en senere lagring). 1 Høyreklikk på Site - Resultatservice i Files-panelet og velg Explore... 2 Kopier bildet superquiz.png fra mappen med øvingsfiler og inn i mappen for webområdet 3 Lukk mappen for webområdet og høyreklikk igjen på Site - Resultatservice i Files-panelet, men denne gangen velger du Refresh Local Files. Du vil nå få opp bildet som en del av webområdet 4 Sett markøren før overskriften Resultatservice, og velg Insert - Image 5 Velg bildet superquiz.png i dialogboksen som kommer opp, og trykk OK

35 4 STRUKTURERE WEBSIDER 35 6 I neste dialogboks som kommer opp, skriver du inn Logo som en alternativ tekst for de som av en eller annen grunn ikke får sett bildet 7 Siden bør nå se omtrent slik ut:

36 36 Snarveien til MySQL og Dreamweaver CS5 Angi grafikkegenskaper Du kan endre egenskapene for de grafiske elementene som alt er plassert på en webside. Dette gjøres ved å markere elementet og gjøre instillingene på egenskapspanelet. Det er en rekke innstillinger du kan foreta, for eksempel å: velge rammetykkelse angi både vertikal og horisontal avstand angi størrelse endre alternativ tekst Også av interesse er de to knappene for å manipulere bildet. Her kan du velge å editere bildet i PhotoShop (dersom installert), eller benytte Dreamweavers mer begrensede innebyge editeringsverktøy for bilder Beskjære bilder Dreamweaver innholder også en smart og enkel funksjon for å beskjære bilder. 1 Sørg for at bildet er det valgte elementet på websiden 2 Klikk på crop-verktøyet på egenskapspanelet, og svar OK på eventuelle meldinger om at dette er en permanent endring på selve bildefila 3 Benytt hendlene for å fokusere det aktive området til kun å være selve logoen (fjerne mest mulig av det hvite rundt) 4 Når du er fornøyd, trykk return på tastaturet og bildet vil være beskåret

37 4 STRUKTURERE WEBSIDER 37 Bruk av multimedieanimasjoner Dersom du ønsker å bruke multimedieanimasjoner på websidene, kan du for eksempel sette inn et Flash-objekt. Multimedieanimasjonen må lages ferdig i et egnet verktøy før den kan settes inn i Dreamweaver. Du har nemlig begrensede muligheter for å gjøre endringer på slike objekter direkte i Dreamweaver. Sette inn et multimedieobjekt 1 På samme måte som vi gjorde med bildet, velger du nå Explore... på webområdets høyremeny, og kopierer filene logohq.swf og logoopg.swf fra mappen med øvingsfiler og inn i webområdet. Utfør deretter en Refresh Local Files 2 Sett markøren på en ny linje nederst i dokument, og velg Insert - Media - SWF. Velg så filen logohq.swf og klikk OK 3 I neste dialogboks skriver du Logo for Hansens Quizbøker som title på Flashanimasjonen og klikker OK 4 Du vil nå få satt inn Flash-objektet i websiden 5 I Dreamweaver er Flash-animasjoner som standard byttet ut med et grått område som angir hvor animasjonen er plassert. Dette er gjort for å spare maskinressurser under utviklingsfasen, samt gjøre websiden mer oversiktlig. Du kan teste animasjonen i Dreamweaver ved å klikke på animasjonen og velge Play i egenskapspanelet. Flash-animasjonen vil uansett vises som forventet i en normal nettleser.

38 38 Snarveien til MySQL og Dreamweaver CS5 6 La markøren stå etter Flash-animasjonen, på samme linje, og sett inn tilsvarende logo for Olsens Papir og Gaver med fila logoopg.swf 7 Lagre endringene ved å velge File - Save. Du vil muligens få spørsmål om å kopiere noen støttefiler for Flash-avspilling til webområdet. Her er det bare å trykke OK 8 Forhåndsvis websiden i nettleseren ved å velge File - Preview In Browser - <ønsket nettleser> 9 Siden bør nå se omtrent slik ut:

39 5 FORMGI WEBOMRÅDER 39 >>5 Formgi webområder I dette kapitlet skal vi lære: > å bruke CSS > om ulike selector-types > å endre bakgrunnsfarge > å endre skriftfarge Innledning HTML-koden gir i praksis liten mulighet for avansert formgiving. I den senere tid stiller man stadig strengere krav til visuelle effekter på en webside. Dette har medført at man har utviklet andre og mer dynamiske metoder for å løse dette problemet, slik som CSS (Cascading Style Sheets). I tillegg er det som nevnt i forrige kapitel et sterkt ønske om å skille struktur på en webside (HTML) og utseende (CSS). Gjør man dette, kan man enkelt endre utseende på en webside, og benytte samme utseende på flere websider. Det er imidlertid viktig å forstå at når du bruker CSS, så er det ikke bare slik at tekst og elementer formateres etter stilen du lager. Elementene blir også knyttet til denne stilen. Endrer man siden stilen, vil alle elementer som er tilknyttet også bli endret. Uten å vite det har du faktisk allerede brukt stiler, ettersom de ulike tekstformatene har standardstiler (som vi kan overstyre). Derfor fikk for eksempel en tekst merket med tekstformatet heading 1 automatisk en større skriftstørrelse. Ved hjelp av stilark kan utviklere kontrollere formateringene på de fleste elementer på websiden. Du kan definere stiler som angir formateringer på tekst, bakgrunner, lenker, tabeller, bilder og lignende. På neste side ser du en oversikt over de ulike måtene å arbeide med CSS.

40 40 Snarveien til MySQL og Dreamweaver CS5 Eksterne stilark (External Stylesheets) Alle stilene lagres i et eget dokument kalt stilark (stylesheet) med filendelse css. På websidene lager du koblinger til dette stilarket slik at hver webside importerer og bruker de definerte formatene i stilarket. Dette er den mest dynamiske metoden. Interne stilark (Embedded Stylesheets) Bruker du denne metoden lagres ikke stilene i en egen fil. I stedet inkluderes stilene (som oftest) øverst i HTML-dokumentet. Stilene vil derfor kun gjelde for én enkelt webside. Dersom du ønsker å gjøre individuelle endringer på websiden i tillegg til stilene i et eksternt stilark, kan dette gjøres direkte på den aktuelle siden som et internt stilark. Stiler i det interne stilarket vil overstyre eventuelle formateringer for samme element i et eksternt stilark. Intern stilredigering (Inline Styles) Ved å bruke denne metoden endrer du egenskapene til bestemte elementer ved å sette CSS-koden direkte på taggene det gjelder i HTML-koden. Denne metoden krever som oftest at man editerer HTML-kodene manuelt, og gjør ofte dokumentet uoversiktelig. Vi skal i denne boka i all hovedsak benytte oss av eksterne stilark. Som et eksempel skal vi benytte fotballklubben Frisk, og ha flere websider som deler det samme stilarket. Dermed blir layouten kun definert én eneste gang, mens den ulike informasjonen nødvendigvis må lages på hver enkelt side.

41 5 FORMGI WEBOMRÅDER 41 Opprette webområdet Frisk 1 Velg Site - New Site... 2 Benytt tittelen Frisk og katalogen frisk 3 Velg deretter File - New..., Blank Page av typen HTML og <none> som layout 4 Skriv inn følgende tekst: 5 Marker overskriften Velkommen til Fotballklubben Frisk og velg tekstformatet heading 1 i egenskapspanelet 6 Marker deretter overskriften Om klubben og velg tekstformatet heading 2 7 Fortsett på samme måte og la overskriftene Ulike lag og Baner og anlegg også bli formatert med tekstformatet heading 2

42 42 Snarveien til MySQL og Dreamweaver CS5 8 Websiden bør nå se omtrent slik ut: 9 Gi websiden tittelen Fotballklubben Frisk 10 Velg File - Save, og lagre filen som index.html Lage et stilark Vi skal nå lage et nytt eksternt stilark for denne websiden. Vi kunne laget CSS-fila manuelt og så koblet den til websiden, men Dreamweaver kan også opprette og koble fila automatisk når vi genererer den første stilen. Vi skal i dette kapittelet benytte den automatiske metoden. 1 Sørg for at du har maksimert CSS Styles-panelet. Om du ikke finner panelet, kan du hente det fram via Window-menyen 2 Klikk på ikonet New CSS Rule nederst i panelet

43 5 FORMGI WEBOMRÅDER 43 3 Angi Tag som selector type og h1 (heading1) som selector name. Velg også at du ønsker å definere regelen i et nytt stilark (New Style Sheet File), og trykk OK 4 I dialogboksen som kommer til syne velger du at fila skal lagres med navnet hovedstilark.css, og trykker Save 5 I neste vindu kan du sette egenskapene til den nye stilen. Velg feltet for farge (tekstfarge), og finn frem til en blågrønn farge (f.eks #099)

44 44 Snarveien til MySQL og Dreamweaver CS5 6 Trykk OK i dialogboksen, og alle heading 1 elementer på siden (kun ett foreløpig) får denne nye stilen. Legg også merke til at vi fikk inn den nye regelen/stilen i CSS Styles-panelet dersom du her velger All Legge til flere stiler på et eksisterende stilark Vi skal nå legge til flere stiler for ulike deler av dokumentet på stilarket vi alerede har generert. 1 Velg igjen New CSS Rule på CSS Styles-panelet 2 Benytt Compound som selector type og h1,h2,h3,h4,h5,h6 som selector name. Compound lar oss angi at flere tagger skal benytte samme stil 3 Siden vi alt har et stilark lar du hovedstilark.css stå som dokumentet der regelen skal defineres, og trykker OK 4 Velg kategorien type, og angi Times New Roman, Times, serif som fontfamily, og trykk OK 5 Velg igjen å legge til en ny CSS-regel 6 Benytt Tag som selector type, og body som selector name. Pass på at hovedstilark.css er plasseringen for regelen, og trykk OK 7 Under kategorien type velger du så Arial, Helvetica, sans-serif som fontfamily og en mørk blåtone (f.eks #033) som farge på teksten 8 Bytt til kategorien background og velg en gulbrun farge som background-color (f.eks #CC9) 9 Trykk OK for å legge til stilen

45 5 FORMGI WEBOMRÅDER Websiden bør nå se ut som følger: 11 Velg File - Save for å lagre endringene i fila 12 Legg merke til at det øverst i dokumentvinduet indikeres (med en stjerne) at websiden er avhengig av fila hovedstilark.css som ennå ikke er lagret. Ettersom mange websider kan være avhengig av det samme stilarket er Dreamweaver forsiktig med å automatisk lagre endringer du kanskje senere angrer på 13 Klikk derfor på hovedstilark.css for å vise denne, og velg File - Save. Klikk deretter på Source Code for å komme tilbake til selve websiden og klikk til slutt på knappen Design for å vise websiden i designmodus. Alternativet til denne noe tungvindte fremgangsmåten er å velge File - Save All Related Files Koble websider til et eksisterende stilark Neste oppgave vil være å knytte stilarket vi nå har laget til flere websider i webområdet. Dette gjøres for at reglene i stilarket skal hentes ut og gjøres gjeldende på websidene. 1 Velg File - New, og deretter Blank Page, page type HTML og layout <none> 2 Skriv inn teksten i margen 3 Gi websiden tittelen Kontakt oss 4 Velg deretter File - Save, og gi siden navnet kontakt.html 5 Sørg for at panelet CSS Styles er i full størrelse, og at All er valgte modus 6 Trykk på knappen Attach Style Sheet

46 46 Snarveien til MySQL og Dreamweaver CS5 7 Velg så stilarket hovedstilark.css som vi lagde tidligere, og trykk OK 8 Siden vil se omtrent slik ut, etter at den har fått knyttet til seg stilarket vi lagde: 9 Bruk formatet Heading 1 på overskriften Kontakt oss, og legg merke til hvordan CSS-stilen for overskrifter automatisk trår i kraft Bruke egendefinerte stiler Til nå har vi laget CSS-regler som samsvarer med visse forhåndsdefinerte elementer(tagger) i HTML-språket slik som body, h1-h6 osv. Vi kan også lage regler i CSS som vi siden kan knytte til deler av teksten uavhengig av de forhåndsdefinerte elementene. 1 Klikk på New CSS Rule i CSS Styles-panelet

47 5 FORMGI WEBOMRÅDER 47 2 I dialogboksen som nå kommer opp, velger du Class som selector type, gir denne navnet ledetekst, og trykker OK 3 Velg feltet for tekstfarge, og før pipetten du nå får opp over overskriften på websiden og klikk. Du vil nå bruke denne grønnfargen som farge på den nye stilen

48 48 Snarveien til MySQL og Dreamweaver CS5 4 Trykk OK. Legg merke til at du nå får opp CSSregelen ledetekst i listen over CSS-regler. At dette er en klasse indikeres med et punktum før navnet 5 Marker teksten Telefon: og velg ledetekst som Class i egenskapspanelet 6 Gjør på samme måte som foregående punkt for å formatere tekstene E-post:, Web: og Bankkonto: som ledetekster 7 Siden bør nå se omtrent slik ut: Endre en eksisterende regel 1 Dobbeltklikk på regelen.ledetekst i CSS Styles-panelet 2 Sett color til mørk rød (f.eks #900) og weight til bolder i dialogboksen 3 Avslutt med OK 4 Du har nå endret stilen ledetekst som tekstene Telefon, E-post osv. benytter. Legg merke til hvordan da utseendet på alle disse tekstene også endrer seg umiddelbart. Det er dette som er noe av hovedideen med stilark. Endringer man gjør ett sted, oppdateres alle steder der stilen er i bruk.

49 6 MER OM CSS 49 >>6 Mer om CSS I dette kapitlet skal vi lære: > om ulike medietyper > om absoluttposisjonerte elementer > mer om selector types og egenskapene man kan sette Innledning I forrige kapittel ble vi litt kjent med CSS. Vi fokuserte mye på at ved å ha et eksternt stilark, kunne vi benytte samme design på mange websider. Det finnes imidlertid en litt mindre kjent funksjon ved CSS, nemmelig at man kan ha ulike stilark for ulike medietyper. Dermed kan vi benytte et design dersom brukeren ser websiden på sin PC, og et annet dersom brukeren ser på websiden via mobiltelefon. Den samme informasjonen kan med andre ord ha flere ulike måter å vises på. Vi kan f.eks fjerne alle bilder som tar lang tid å laste i mobilversjonen, og lage en høyere kontrast dersom man velger å skrive ut en webside.

50 50 Snarveien til MySQL og Dreamweaver CS5 Vi skal i dette kapittelet lage en enkel side fylt med såkalt dummytekst for å illustrere dette prinsippet. Det å fylle en webside med dummytekst er en vanlig fremgangsmåte når man skal teste ut ulike design. Først når man er helt fornøyd med designet, bytter man ut dummyteksten med den virkelige informasjonen. En meget god kilde til dummytekst er nettstedet Denne genereatoren genererer tekst som skal se mest mulig ut som virkelig tekst med tanke på ordlengde osv. Opprette webområdet og testsiden 1 Velg Site - New Site... 2 Benytt tittelen TestCSS og katalogen testcss 3 Velg deretter File - New..., og benytt Blank Page av typen HTML og <none> som layout 4 Velg File - Save, og gi fila navnet index.html 5 Benytt en dummytekstgenerator (f.eks lipsum.com), og generer 15 paragrafer med tekst. Sett så inn denne teksten på websiden, og lag en overskrift av typen heading1 og tre-fire overskrifter av typen heading 2. Websiden vil nå se ut omtrent slik ut:

51 6 MER OM CSS 51 6 Høyreklikk på webområdet og velg Explore... for å åpne opp mappen til webområdet 7 Kopier fila kiwi.jpg fra mappen med øvingsfiler over i webområdet 8 Høyreklikk webområdet igjen, og velg Refresh Local Files for å oppdatere webområdevisningen i Dreamweaver 9 Lag en ny paragraf foran første avsnitt ved å sette inn et linjeskift. Sett så markøren på denne nye linja. Velg Insert - Image og sett inn bildet kiwi.jpg med alternativ tekst Kiwi 10 Klikk på bildet og sett ID til å være ingressbilde i egenskapspanelet. I motsetning til class er ID en unik identifikator for dette bestemte elementet 11 Velg å legge til en ny CSS-regel i CSS Styles-panelet 12 Velg ID som selector type og ingressbilde som selector name. Pass også på at du har angitt å definere regelen i et nytt stilark. Trykk OK, og gi stilarket navnet hovedstilark.css

52 52 Snarveien til MySQL og Dreamweaver CS5 13 Gå til kategorien box, og sett 350px som width og auto (automatisk skalering) som height. Sett også float til å være right. Legg til stilen ved å trykke OK 14 Legg til nok en regel med selector type satt til Tag og selector name satt til body. Pass på å definer regelen i hovedstilark.css 15 Velg her font-family til å være Tahoma, Geneva, sans-serif, samt font-size til å være larger under kategorien type

53 6 MER OM CSS Lag en siste ny regel som har selector type satt til Compound og selector name satt til p:first-letter. Sett så følgende egenskaper i katagorien type, og trykk OK 17 Websiden skulle nå se ut som følger:

54 54 Snarveien til MySQL og Dreamweaver CS5 Legge til stilark for andre medier Til nå har vi hatt bare ett stilark på websiden. Her har vi ikke fortalt noe om medietype, og derfor gjelder det som standard for alle medier. Vi skal nå lage et nytt stilark, som overstyrer dette hovedstilarket for mediet print(utskrift). Det er lettest å sette medietypen ved å først lage stilarkfila, og deretter knytte den til websiden. Tidligere har vi latt Dreamweaver automatisk lage koblingen og CSS dokumentet når vi definerer den første regelen. 1 Velg File - New, Blank Page og page type CSS. Trykk så Create 2 Du får nå opp editoren for å manuelt skrive CSS-regler med tekst 3 Velg File - Save, gi den nye fila navnet utskrift.css og lukk fanen for CSSdokumentet du laget 4 Mens du har websiden vi lagde aktiv, klikk på Attach Style Sheet i CSS Styles-panelet 5 I dialogboksen som dukker opp, angi utskrift.css som file, og print som media 6 Du får nå inn dette stilarket i CSS Styles-panelet. Legg merke til ordet print i parentes: 7 Velg å legge til en ny regel. Sett selector type til ID og selector name til ingressbilde. Angi så at regelen skal lagres i utskrift.css

55 6 MER OM CSS 55 8 Gå til kategorien positioning, og sett visibility to hidden for å skjule bildet ved utskrift. Legg til regelen ved å trykke OK 9 Lag nok en regel i utskrift.css, men dennegang for taggen body med følgende egenskaper: 10 Du skulle nå ha følgende regler definert:

56 56 Snarveien til MySQL og Dreamweaver CS5 11 Velg File - Save All Related Files for å lagre alle filer 12 Testkjør websiden i nettleseren din ved å velge File - Preview in Browser - <ønsket nettleser> 13 Kontroller at websiden følger hovedstilark.css 14 Velg å forhåndsvise utskriften i din nettleser (evtentuelt velg å skrive ut), og kontroller at websiden nå blir overstyrt av utskrift.css. Vær klar over at enkelete nettlesere har ikke denne funksjonen av CSS innebygget. I tillegg kan det være forskjeller i hvordan de hånterer det å skjule bildet

57 6 MER OM CSS 57 Absoluttposisjonering En lenge etterlengtet funksjon i webdesign har vært muligheten til å posisjonere elementer eksakt. Dette har blitt løst i CSS, og kalles absoluttposisjonering. CSS har også introdusert begrepet layers(lag) til websider ved å la deg sette en z-index på hvert absoluttposisjonerte element. Positive verdier for z-index vil legge elementet foran resten av innholdet på siden. Negative verdier vil legge elementet bak resten av innholdet. Absoluttposisjonering i CSS krever vanligvis at vi setter koordinatene til elementene manuelt med tallverdier. Dreamweaver har derfor laget en tilleggsfuksjon med navn AP Div som gjør at vi kan flytte og endre størrelse på elementer visuelt. 1 Sørg for at TestCSS er det aktive webområdet 2 Lag en ny webside gjennom å velge File - New, Blank Page, page type HTML og ingen layout 3 Velg File - Save, og gi fila navnet apdivtest.html 4 Lim inn fire paragrafer med dummytekst på websiden 5 Flytt markøren til slutten av teksten, og velg Insert - Layout Objects - AP Div. Du får nå inn en AP Div med blå ramme som kan fylles med innhold på samme måte som du legger innhold i websiden ellers

58 58 Snarveien til MySQL og Dreamweaver CS5 6 Sett markøren inne i AP Div-en og velg Insert - Image. Benytt så kiwi.jpg som vi tidligere har importert til webområdet 7 Skaler bildet til å være 400 i bredde og 300 i høyde 8 Ta tak i den lille blå firkanten i øverste venstre hjørne av AP Div-en, og flytt hele bildet til senter av teksten 9 Mens AP Div-en er markert, sett z-index til å være -1 i egenskapspanelet, for å legge bildet bak teksten. Deselekter deretter AP Div-en ved å trykke et annet sted på websiden for å se effekten

59 6 MER OM CSS 59 Mer om CSS Som du sikkert alt har sett, er det en mengde ulike egenskaper du kan sette på hver regel. Vi har i dette kapittelet kun benyttet noen få av disse. Det er utenfor bokas omfang å forklare hver enkelt egenskap i detalj, men vi vil her gi en kort oversikt over hva de ulike kategoriene med egenskaper innholder: Type: Utseende på tekst. Herunder skrifttype, skriftfarger og dekorasjoner. Background: Bakgrunn på elementet. Her kan du sette bakgrunnsfarger, bakgrunnsbilde osv. Block: Informasjon hvordan teksten i et avsnit skal vises. Valgene her går på linjehøyde, avstand mellom ord og bokstaver, justering (ventre, høyre og midtstilling) og indentering. Box: Her kan du sette ytre (margin) og indre (padding) marger for et element. Border: Kantlinjer for elementet. List: Dersom du benytter punkt- eller nummermarkerte lister kan du her endre punktmarkør og nummereringsstil. Positioning: Her kan du sette posisjonen og størrelsen til et element relativt til sin opprinnelige plassering eller absolutt i forhold til websiden. Extensions: Her kan du styre sideskift ved utskrift, samt musepeker og visuelle filtere for elementet. Vi har også så vidt sett på de ulike typene selectors i CSS. Kort oppsummert er dette hva du bør vite om typene slik Dreamweaver definerer dem: Tag: Vi forteller her om en bestemt tagg som alerede er definert i HTML. For mer informasjon om HTML og tagger, se eget kapittel senere i denne boka Class: Alle elementer på websiden som har satt denne klassen som Class i egenskapspanelet vil følge regelen vi definerer. Klasser indikeres med et punktum foran navnet i CSS Styles-panelet ID: Minner mye om Class, men per definisjon kan vi kun ha ett element per webside med en bestemt id (må være unik). ID-er indikeres med et hashtegn(#) foran navnet i CSS Styles-panelet

60 60 Snarveien til MySQL og Dreamweaver CS5 Compound: Dreamweavers samlebetegnelse på en mengde ulike måter å definere regler på. Her er noen av mulighetene: Ramse opp flere tagger som regelen skal gjelde for, adskilt med komma. F.eks: h1,h2,h3,h4,h5,h6 Fortelle noe om forholdet mellom flere tagger. For eksempel vil a img si at vi nå definerer en regel for bilder (img) som er en del av linker (a) Benytte såkalte pseudo-selectors. Vi angir med andre ord regler for kun enkelte versjoner av en tag/class/id på formen tag:pseudo-selector. De vanligste av disse er: :visited :hover :first-letter :first-line Benyttes sammen med a-taggen, og betyr da en link som er besøkt Når musepekeren er over elementet Første bokstav i elementet Første linje i elementet Dersom du ønsker mer informasjon om CSS er et bra sted å starte.

61 7 MALER/TEMPLATES 61 >>7 Maler/templates I dette kapitlet skal vi lære: > om hva en mal er > å opprette og benytte maler > hvorfor man ikke benytter rammer (frames) Innledning Ganske tidlig i nettets barndom var det ett spesielt problem som dukket opp. Man ønsket å lage webområder med et helhetlig design, der bilder, menyer, plassering og deler av innhold gjentok seg på mange websider. I første utkast til webområdet er ikke dette noe spesielt problem, ettersom man da lager en webside, og så hele tiden kopierer denne som utgangspunkt for de neste websidene. Problemet kommer dersom man på et senere tidspunkt ønsker å gjøre endringer, for eksempel på et menyvalg, og da må utføre endringen på samtlige sider i webområdet. Deler av dette problemet er løst med CSS, der man kan ha et felles stilark som forteller om plassering, fargevalg, størrelser osv. på elementer i alle websidene. Strukturen og innholdet kan derimot ikke CSS ta seg av på en like enkel måte. Dreamweaver har derfor valgt å løse dette ved hjelp av såkalte templates. Templates fungerer slik at du lager en mal for de elementene som alle websider i webområdet skal inneholde (f.eks. menyen og logoen på toppen/bunnen). I tillegg definerer du såkalte editable regions (editerbare regioner) som definerer hvilket område hver enkelt side skal fylle med innhold. Dersom du senere gjør endringer i malen, vil disse automatisk bli gjenspeilet i samtlige websider som benytter malen.

62 62 Snarveien til MySQL og Dreamweaver CS5 Vi skal i dette kapittelet lage en webside for et reisebyrå, Vertigo Flyreiser, der alle websidene er basert på en felles mal. Malen definerer en logo på toppen, samt en meny på venstre side. Ønsker du siden å legge til et nytt element i menyen, gjøres dette ganske greit i malen, og Dreamweaver oppdaterer selv alle websidene. Opprette webområdet Vertigo Flyreiser 1 Velg Site - New Site... 2 Benytt tittelen Vertigo og katalogen vertigoflyreiser

63 7 MALER/TEMPLATES 63 Lage en ny template Neste steg er å lage en ny template. I utgangspunktet vil det å arbeide med en template være helt det samme som å arbeide med en vanlig webside, bortsett i fra at vi legger inn editerbare regioner. 1 Velg File - New... 2 I dialogboksen velger du Blank Template av typen HTML template og <none> som layout. Trykk så på Create 3 Gi templaten tittelen Velkommen til Vertigo Flyreiser, på samme måte som du ville gjort med en normal webside 4 Velg File - Save. Se bort fra eventuelle advarsler om manglende editerbare regioner, du skal legge til disse senere 5 Du får nå en litt annerledes Save-dialog. Skriv inn Mal på websider som description og sidemal som save as, og trykk Save. Du vil nå ha lagret malen som sidemal.dwt. Dwt er Dreamweavers filendelse på maler (Dreamweaver Template) 6 Legg merke til at du nå også har fått en ny mappe kalt Templates i webområdet, som inneholder malen sidemal.dwt

64 64 Snarveien til MySQL og Dreamweaver CS5 Fylle malen med innhold 1 Høyreklikk på webområdet og velg Explore... for å åpne opp mappen til webområdet 2 Kopier følgende filer fra mappen med øvingsfiler over i webområdet: bunntekst.jpg, knapp-flygods.jpg, knapp-kontakt.jpg, knapp-prisliste.jpg, knapp-charter.jpg, knapp-omoss.jpg, knapp-destinasjoner.jpg og vertigoflyreiser-logo.jpg 3 Høyreklikk webområdet igjen, og velg Refresh Local Files for å oppdatere webområdevisningen i Dreamweaver 4 Velg Insert - Layout Objects - AP Div 5 Sørg for at den nye AP Div-en er valgt, og sett L(eft) og T(op) i egenskapspanelet til 0px. Sett også W(idth) til 780px og H(eight) til 115px 6 Plasser skrivemarkøren inne i AP Div-en og velg Insert - Image 7 Velg bildet vertigo-flyreiser-logo.jpg og benytt teksten Logo som alternativ tekst 8 Velg å sette inn nok en AP Div, og gi denne plasseringen L 0px og T 120px. La den også få en bredde på 170px, og en høyde på 150px 9 Plasser skrivemarkøren inne i AP Div-en og velg Insert - Image. Benytt bildet knapp-omoss.jpg, og den alternative teksten Om oss 10 Websiden burde nå se slik ut:

65 7 MALER/TEMPLATES Gjenta prosessen med å sette inn bilder i menyen slik at du får følgende meny: 12 Sett inn nok en AP Div, og gi denne plasseringen L 200px og T 120px. La denne få bredden 580px og høyden 350px (høyden vil endre seg etterhvert som vi fyller boksen med innhold) 13 Sett markøren inne i den nye AP Div-en, legg inn et par linjeskift og velg Insert - Image. Sett så inn bildet bunntekst.jpg og benytt Fra drøm til virkelighet som alternativ tekst 14 Websiden bør nå se slik ut:

66 66 Snarveien til MySQL og Dreamweaver CS5 Sette inn en editerbar region Siste steg i prosessen med å lage en template, er å sette inn en eller flere editerbare regioner. 1 Sett markøren øverst i AP Div-en midt på siden (før bunntekst-bildet), der innholdet skal komme 2 Velg Insert - Template Objects - Editable Region 3 Skriv Innhold som navn på regionen, og trykk OK 4 Legg merke til at vi nå fikk et editerbart område på websiden 5 Velg File - Save for å lagre den ferdige templaten Lage websider basert på malen Det som nå gjenstår, er å lage de faktiske websidene basert på malen. Det du da egentlig gjør, er å fylle ut alle editerbare regioner i selve malen. 1 Velg File - New... 2 Istedenfor Blank Page som vi har brukt hittil, velger du nå Page from Template 3 Velg deretter Vertigo som site og sidemal som template 4 Pass på at Update page when template changes er avkrysset, ellers mister malen noe av sin hensikt

67 7 MALER/TEMPLATES 67 5 Klikk på Create, og en ny webside vil nå bli generert ut i fra malen 6 Websiden du får opp ligner nå helt på malen du lagde, men det eneste stedet du får endre noe er i regionen Innhold

68 68 Snarveien til MySQL og Dreamweaver CS5 7 Skriv inn følgende tekst i Innhold-regionen (overskriftene er satt som heading 1 og heading 3): 8 Lagre dokumentet som index.html ved hjelp av File - Save 9 Lag nok en webside basert på samme mal ved å velge File - New, Page from Template og malen sidemal i Vertigo 10 Skriv følgende tekst (heading 1 på Kontakt oss og bold på småoverskriftene):

69 7 MALER/TEMPLATES Lagre dokumentet som kontakt.html Endre en mal Fordelen vi nå har, er at vi kan endre malen sidemal.dwt, og dette vil gjenspeiles i alle sider som er basert på malen. Hadde vi kopiert et design inn på hver side, måtte vi også gått på hver enkelt side og gjort endringene manuelt. Vi skal nå la knappen Om Oss linke til index.html og Kontakt Oss linke til kontakt.html. 1 Gå til malen sidemal.dwt 2 Marker bildet Om oss ved å klikke på det 3 Trykk på Browse-knappen til feltet Link i egenskapspanelet 4 Velg index.html i dialogboksen som kommer opp 5 Knappen vil nå være en hyperlink til hovedsiden 6 Gjør tilsvarende for bildet kontakt oss, med en lenke til kontakt.html 7 Velg å legge til en ny regel i CSS Styles-panelet 8 Sett Compound som selector type, og a img (bilder som befinner seg inne i en link-tagg) som selector name. Pass på at du definerer regelen i et nytt stilark, og trykk deretter OK

70 70 Snarveien til MySQL og Dreamweaver CS5 9 Gi det nye stilarket filnavnet hovedstil.css 10 Gå til kategorien border, og sett top til none, samtidig som same for all er krysset av 11 Trykk OK, og rammene rundt bilder som er linker blir borte 12 Lagre malen ved hjelp av File - Save 13 Svar Update på eventuelle spørsmål om du ønsker å utføre en oppdatering på alle websider som benytter malen, og Close i dialogboksen som forteller deg at oppdateringen er utført

71 7 MALER/TEMPLATES Velg File - Save All for å lagre alle åpne dokumenter 15 Bytt til index.html i dokumentvinduet. Velg så File - Preview in Browser - <ønsket nettleser> for å forhåndsvise websiden 16 Legg merke til hvordan endringene vi gjorde i malen, ble oppdatert i alle websidene, og nå gjør at vi kan navigere fram og tilbake mellom Om Oss og Kontakt Oss. Vi kunne gjort på tilsvarende måte som vist i dette kapitlet for å lage resten av websidene som dette webområdet trenger Rammer Tidligere var det vanlig å bruke såkalte rammer (frames) til å gjøre det vi nå har gjort i dette kapitlet med maler. Det er imidlertid mange problemer forbundet med rammer i forbindelse med utskrift, navigasjon, bokmerker, indeksering av søkemotorer og så videre. Dette gjør at de fleste i dag fraråder å benytte rammer så lenge vi har teknologier som maler og serverside-scripting som PHP og ASP. Av denne grunn tar vi heller ikke opp rammer som en del av denne boka, da Dreamweaver har et utmerket malsystem.

72 72 Snarveien til MySQL og Dreamweaver CS5 >>8 Publisering I dette kapitlet skal vi lære: > å foreta stavekontroll > å kontrollere hyperlinker > om ulike rapporter > å publisere og oppdatere et webområde Stavekontroll i Dreamweaver En viktig del av utviklingsprosessen er å sikre korrekt skrivemåte. I Dreamweaver følger det med en norsk ordliste, men det er britisk-engelsk som er satt som standard. Endre språk på stavekontroll 1 Velg Edit - Preferences 2 I dialogboksen som nå dukker opp, bytt til Norwegian (Bokmål) i feltet Spelling dictionary 3 Klikk OK, og språket på stavekontrollen er endret

73 8 PUBLISERING 73 Foreta stavekontroll 1 Velg Commands - Check Spelling 2 Stavekontrollen fungerer slik som du kjenner den fra programmer som for eksempel MS Word eller OpenOffice.org Writer Selv om Dreamweaver har innebygd en stavekontroll, er ikke denne av det beste slaget, og det er heller ikke noen kontroll av grammatikk. Det kan derfor være et tips å skrive teksten i en profesjonell tekstbehandler, og kopiere teksten inn i websiden når den er ferdig. Organisere webområdet Det kan være lurt å tenke nøye gjennom hvilken struktur du vil bruke i webområdet. Filene bør plasseres og organiseres i mapper slik at gjenfinning og vedlikehold av filene blir så enkelt som mulig. Filbehandlingsfunksjonen i Dreamweaver er mye lik den du kjenner fra Windows Utforsker. Enkel filbehandling i webområdet 1 For å opprette nye mapper høyreklikker du på webområdet og velger New Folder i hurtigmenyen. Skriv deretter inn mappens navn og trykk Enter 2 For å flytte en webside klikker du på filen og drar den til ønsket mappe. Slipp musepekeren og filen flyttes 3 For å kopiere en webside markerer du filen og taster Ctrl + C. For å lime inn en kopi taster du Ctrl + V. Filen får da navnet Copy of... 4 For å endre navn på en webside klikker du én gang på filen mens den er markert. Skriv inn nytt navn og avslutt med Enter (husk å få med filendelsen) Rapporter Det finnes flere ulike rapporter for webområdet i Dreamweaver, som du kan benytte. Blant annet finnes det rapporter for om websiden er tilpasset ulike brukere, om det er overflødig HTML-kode i websiden og lignende. Bruke rapporter 1 Sørg for at du har webområdet Vertigo aktivt 2 Velg Site - Reports...

74 74 Snarveien til MySQL og Dreamweaver CS5 3 Sørg for at Report on er satt til Entire Curent Local Site. Kryss av for alle rapportene under HTML Reports 4 Trykk Run. Du får nå opp Site Reports-panelet (som også kan vises/skjules med menyvalget Window - Results - Site Reports). Feil og potensielle problemer vil nå vises i listen Sjekke kompatibilitet for nettlesere Dessverre er det slik at ikke alle nettlesere følger standarden for websider like god. Det kan derfor være at elementer du har benyttet på siden ikke vil vises korrekt i alle nettlesere. Dreamweaver har imidlertid et kjekt verktøy for å sjekke dette, samt gi deg informasjon om mulige løsninger. Bruke kompatibilitetssjekk 1 Velg Sjekk Browser Compatibility fra Browser Compatibility-menyen i designvinduet

75 8 PUBLISERING 75 2 Resultatene av testen kommer nå opp i et eget panel. Man må da selv avgjøre hvilke nettlesere man skal ta hensyn til Sjekke hyperlinker Før du publiserer et webområde, bør du forsikre deg om at samtlige hyperlinker fungerer. Bruke hyperlinkvalidering 1 Sørg for at du har webområdet Vertigo aktivt 2 Velg Site - Check Links Sitewide... 3 Nå kommer Link Checker-panelet opp med informasjon om ugyldige lenker (Broken links) Legge inn nøkkelord De ulike søkemotorene på Internett benytter i mange tilfeller nøkkelord som er knyttet til de ulike websidene. For å gjøre sidene lettere å indeksere for søkerobotene kan du legge til disse nøkkelordene selv. Denne informasjonen blir kalt metainformasjon til websiden. Keywords brukes for å legge til nøkkelord, mens description brukes for å beskrive innholdet på webområdet. 1 Sørg for at du har webområdet Vertigo aktivt 2 Åpne malen sidemal.dwt 3 Velg Insert - HTML - Head Tags - Keywords 4 Legg så inn følgende nøkkelord i websiden:

76 76 Snarveien til MySQL og Dreamweaver CS5 5 Velg på tilsvarende måte Insert - HTML - Head Tags - Description, og legg inn følgende beskrivelse: 6 Da dette er metainformasjon til websiden, er det ikke mye mer du ser til dette i design-modus. Du kan imidlertid velge å skru på visningen av head content ved å velge View - Head Content 7 Du vil nå få en ny menylinje som viser de ulike head content elementene. Her finner du blant annet igjen keywords og description. Klikker du på et av dem kan du endre innholdet i elementet på egenskapspanelet

77 8 PUBLISERING 77 Publisere webområdet Før du kan publisere det lokale webområdet til en webserver, må du ha ordnet deg plass hos en slik tilbyder. Ofte ønsker du også et domenenavn. Vi vil i denne guiden vise hvordan du publiserer til en webserver gjennom FTP, som er den vanligste måten å overføre filene på. Dreamweaver støtter også andre metoder, men disse vil ikke bli vist i denne boka. Framgangsmåten er omtrent den samme. Før vi kan publisere til en server, må vi gjøre engangsjobben med å sette opp denne serveren i innstillingene til webområdet. Sette opp en FTP-server til webområdet 1 Velg Site - Manage Sites... 2 I dialogboksen velger du Vertigo, dersom dette er webområdet du vil publisere, og trykker Edit... 3 Velg steget Servers 4 Trykk for å legge til en ny server 5 Sørg for at Basic er valgt

78 78 Snarveien til MySQL og Dreamweaver CS5 6 Fyll ut informasjon om din webserver i feltene. Navnet på serveren velger du selv 7 Avslutt med Save 8 Serveren er nå registrert, og du kan lukke Site Setup for Vertigo ved å trykke Save Når vi nå har satt opp vår webserver i Dreamweaver, kan vi publisere websiden/webområdet.

79 8 PUBLISERING 79 Publisere webområdet til webserveren 1 Velg Site - Synchronize Sitewide... Det kan være at du må velge Remote server, så Local view igjen i Files-panelet for at Dreamweaver skal få med seg endringen og åpne for dette valget 2 I dialogboksen, sørg for å velge Entire Vertigo Site i nedtrekkslisten Synchronize 3 Klikk Preview... for å starte prosessen med å sjekke hvilke filer som trenger synkronisering 4 Etter en liten stund kommer det opp et forslag til hvilke filer som skal flyttes over 5 Trykk OK, og Dreamweaver vil publisere filene til webserveren Oppdatere det eksterne webområdet Dersom du nå gjør endringer lokalt, må du sørge for å oppdatere det eksterne webområdet gjennom en ny publiseringsprosess.

80 80 Snarveien til MySQL og Dreamweaver CS5 >>9 HTML-koder I dette kapitlet skal vi lære: > hva HTML er > hvorfor det er så viktig å kunne HTML > hvordan man redigerer HTML i Dreamweaver > å kjenne de vanligste HTML-taggene > om validering av websider > hvor man finner mer informasjon om HTML Innledning HTML er et såkalt markeringsspråk (markup language). Man skriver helt vanlig tekst, som man så markerer med såkalte tagger (markører) for å gi denne teksten spesiell betydning eller egenskaper. F.eks. vil følgende HTML-kode medføre at tallet 1045 får fete typer: Gratulerer du fikk <strong>1045</strong> poeng. Selv om vi ikke merker det, jobber programmer som Dreamweaver egentlig med HTML-koder. Når vi utfører en handling i den grafiske editoren, endrer Dreamweaver HTML-koden som ligger bak tilsvarende. Det er også HTML som er det nettleserne forstår. Nettleseren mottar HTML-koder fra webserveren og bygger opp den grafiske websiden på din maskin.

81 9 HTML-KODER 81 I virkeligheten trenger vi ikke noe annet enn en enkel teksteditor, slik som for eksempel Notisblokk i Windows for å lage websider. Det eneste editorer slik som Dreamweaver gjør, er at vi slipper å bekymre oss for kodene som ligger bak. Mange personer jobber også raskere i et grafisk WYSIWYG (What you see is what you get)-miljø. Selve navnet på språket, HTML, står for HyperText Markup Language. Begrepet HyperText refererer blant annet til det vi kjenner fra nettet som klikkbare lenker. Altså ideen om at en del av den ordinære teksten kan bringe oss videre til andre websider. Markup Language refererer som sagt til markeringen av tekst med tagger for å gi den spesiell betydning. Selve språket ble utviklet av Tim Berners-Lee på førsten av 1990-tallet, og er i dag en standard for å lage websider. Siden 1995 har HTML-språkets utvikling blitt styrt av World Wide Web Consortium (W3C) Det mest grunnleggende HTML-dokumentet La oss starte introduksjonen til HTML med et lite eksempel på hvordan du kan lage en enkel webside uten Dreamweaver. Vi skal her bruke Notisblokk til å lage websiden. Enkel webside med notisblokk 1 Åpne programmet Notisblokk (engelsk Notepad) fra startmenyen 2 Skriv inn følgende HTML-kode: 3 Lag en ny katalog som heter C:\websites\minwebside 4 Velg File - Save i Notisblokk 5 Sørg for å sette Save as type til All files. Bla deg fram til katalogen vi opprettet, og lagre filen som index.html

82 82 Snarveien til MySQL og Dreamweaver CS5 6 Åpne nettleseren din og skriv inn adressen file:///c:/websites/minwebside/ index.html 7 Som du ser, har du nå laget en webside helt uten bruk av en grafisk editor Hva forteller så kodene vi skrev inn, oss? Som vi så tidligere, består HTML av såkalte tagger som markerer egenskaper til tekst. Taggen <html>...</html> markerer selve HTML-dokumentet. Taggen <html> er så inndelt i to seksjoner. Først har vi <head>...</head> som inneholder metainformasjon om websiden, slik som <title>...</title> som markerer tittelen på websiden. Dernest består <html>-taggen av en <body>...</body>-seksjon som markerer den informasjonen som vi ser på selve websiden. Vi kommer senere tilbake til de andre taggene i <body>-delen av dokumentet vi her lagde.

83 9 HTML-KODER 83 Fordeler ved å kunne HTML Nå spør du seg sikkert om hvorfor du trenger å lære HTML-kodene, når vi har editorer slik som Dreamweaver, som tilsynelatende er mye enklere å bruke. Dette skal vi forsøke å gi en forklaring på her. De aller fleste som begynner med websider, benytter seg av en grafisk editor, slik som vi har gjort i denne boka. Dette er en fin måte å komme i gang med websider på, ettersom terskelen ikke er så høy som den ville vært om vi skulle lære oss kodene fra bunnen av. Det som er synd, er at mange aldri lærer seg HTML-koding. Det er faktisk veldig mange ganger man får brukt for å kunne editere HTML-kodene direkte, og her følger noen eksempler: Fikse på avanserte ting Når man får mer kompliserte websider, er det ofte vi ønsker å gjøre ting som ikke det finnes funksjonalitet for i editoren. Da må man inn i HTML-kodene, som ligger i bakgrunnen, og gjøre forandringene manuelt der. Lettere å lære seg editoren Når man skal lære seg de avanserte funksjonene av editoren, er dette mye enklere om man vet hva som egentlig skjer i bakgrunnen, og hvordan kodene som funksjonene er knyttet til, og genererer, ser ut. Lettere å bytte editorer Et vanlig problem, dersom man ønsker å bytte til en annen editor, er at det blir som å lære seg alt fra bunnen av. Kjenner man til HTML-kodene som alle editorene jobber med, vil det bli mye lettere å lære seg en ny editor i og med at man kjenner det som er felles. Ikke avhengig av en editorer Ved å kunne HTML-kodene er man heller ikke helt avhengig av en editor for å gjøre enkle oppdateringer på websider. Ofte er det enklere å bare starte for eksempel Notisblokk eller tilsvarende verktøy for å gjøre enkle oppdateringer i teksten på en webside. Dynamiske websider Dersom man ønsker å gå litt mer i dybden på dynamiske websider, er det et absolutt krav å kunne HTML-koder, ettersom programkoden man da må skrive skal generere denne HTML-koden selv.

84 84 Snarveien til MySQL og Dreamweaver CS5 Forstå hvordan andre websider er laget Den viktigste grunnen er kanskje likevel det at dersom man ønsker å forstå hvordan andre websider er bygget opp, og benytte noe av dette i sine egne websider, må man kunne HTML. Du kan enkelt se HTML-kodene som ligger bak en hvilken som helst webside på nettet ved å f.eks. velge Vis - Kildekode i nettleseren. Eksakt menyvalg vil variere noe alt etter hvilken nettleser man har, så sjekk i hjelpefilene til nettleseren. Det er selvsagt ikke slik at man skal være en hardbarket nerd og gjøre alt fra bunnen av. Editorer som Dreamweaver gjør de fleste rutinejobber mye enklere for oss. Likevel, som vi har sett i dette avsnittet, er det veldig viktig å kunne HTML-koder i tillegg til selve editoren. Mer om HTML-tagger Det finnes i praksis to ulike typer tagger i HTML. Den ene typen tagger er de som markerer et område med tekst og gir dette en spesiell mening. Disse taggene starter og avsluttes henholdsvis før og etter teksten. Den avsluttende taggen inneholder da en / for å markere avslutningen. Et eksempel på dette er f.eks <em>-taggen (for kursiv tekst): Dette er en <em>kursiv</em> tekst. Den andre formen for tagger er de som ikke markerer et område, men bare et punkt i teksten. Disse både starter og avslutter samtidig. Dette gjøres ved at taggen ender med en /. Typisk eksempel på dette er ny-linje markeringen ved <br />-taggen: Her er første linje <br />Her er andre linje. Det siste vi trenger å vite om HTML-tagger er at taggene kan ha attributter. Attributter, eller egenskaper, forteller noe om hvordan taggen skal oppføre seg. Et eksempel er <img />-taggen som setter inn et bilde: Her er et bilde <img src= mittbilde.jpg width= 500 height= 70 /> Som vi ser, har <img />-taggen i dette eksempelet tre attributter. Editere HTML i Dreamweaver Som vi har sett tidligere, er det to typer sidevisninger i Dreamweaver som lar deg arbeide med HTML-koden som ligger bak websiden. Vi kan enten velge Code for å bare se HTML-koden eller Split for å se både det grafiske og HTML-koden. Vi vil på det sterkeste anbefale deg å jobbe i sidevisningen Split, da dette lærer deg HTML-koden ettersom endringene du gjør i den grafiske delen, kommer til syne i koden. I tillegg vil det du gjør av endringer i HTMLkoden, øyeblikkelig gjenspeiles i den grafiske delen for en visuell kontroll.

85 9 HTML-KODER 85 De vanligste HTML-kodene I dette kapitlet skal vi også gi deg en oversikt over de mest grunnleggende HTML-kodene. Det er imidlertid viktig å være klar over at vi ikke kan gi noen grundig gjennomgang av hele HTML-språket. I steden vil vi gi en liten innføring, som ved hjelp av referansene til mer informasjon bakerst i kapitlet skulle hjelpe deg godt i gang med å lære deg hvordan man lager websider fra grunnen av. Tekst og avsnitt Overskrifter Det finnes innebygd ferdige overskrifter i HTML. I tillegg til å vise skriften i ulik stil og størrelse vil disse stilene også gi en strukturell mening til teksten, slik at nettlesere, søkemotorer osv. skjønner hva som er overskrifter, vanlig tekst og lignende. Alle overskrifter settes ved hjelp av taggene <h1>,<h2>,<h3>,<h4>,<h5> og <h6>. For eksempel kan vi lage en hovedoverskrift på følgende måte: <h1>min webside</h1> Fet skrift Fet skrift får vi ved å markere teksten ved hjelp av <strong>-taggen: <strong>fet tekst</strong> Kursiv For å få kursiv skrift markerer man teksten med <em>-taggen: <em>kursiv tekst</em> Linjeskift Linjeskift oppnår vi ved å bruke en <br /> tagg (breakline) for hvert sted vi ønsker linjeskift: Dette er første linje.<br /> Her kommer andre linje. Legg spesielt merke til at linjeskift laget med Enter-tasten i selve koden, ikke vil ha noen som helst betyding på websiden.

86 86 Snarveien til MySQL og Dreamweaver CS5 Formatere avsnitt Avsnitt formateres med <p>-taggen (paragraph). Det er generelt lurt å ikke benytte seg av linjeskift inne i et avsnitt (paragraf), slik at bredden på teksten heller justeres av bredden på nettleseren. Ofte kan det være fristende å lage tilsvarende effekt som et avsnitt (paragraf) gir, ved å bruke doble linjeskift. Likevel er dette sterkt frarådet. Man får mye mer kontroll på websiden om man kun jobber med avsnitt, og de er med på å gi websiden en struktur. Vi markerer et avsnitt (paragraf) slik: <p>dette er en tekst som faktisk er et avsnitt.</p> Horisontale delelinjer Horisontale delelinjer er ofte brukt for å skille ulike deler av en webside fra hverandre. For å lage en horisontal delelinje ved hjelp av HTML-koder setter man inn en <hr />-tagg der man ønsker linjen: Tekst før en linje <hr /> Tekst etter en linje Farger Heksadesimale fargekoder En heksadesimal fargekode er en tekstlig framstilling av en farge. Koden angir mengden rødt, grønt og blått (såkalt RGB) som fargen består av. Her benyttes et annet tallsystem enn det vi vanligvis bruker, nemlig det heksadesimale. For eksempel vil 255 i vårt titallsystem være ff i det heksadesimale. Dermed vil for eksempel fargen grønn, som består av minimalt (0) rødt, maksimalt (255) grønt og minimalt (0) blått medføre fargekoden #00ff00. Tegnet # foran sifrene angir at dette er heksadesimalt. Dersom den heksadesimale fargekoden består av tre par med like siffer, forkortes ofte koden til kun tre siffer. Dermed blir #aa33ff til #a3f Vi vil her vise hvordan du endrer farger på elementer ved hjelp av HTMLtagger, selv om dette ideelt burde gjøres med CSS. Å skrive CSS for hånd er imidlertid utenfor denne bokas omfang. Tekstfarger Å endre fargen på tekst ved hjelp av HTML-koder medfører at vi må markere teksten med en <font>-tagg, og sette attributtet color på denne taggen til ønsket heksadesimale fargekode: <font color= #3333ff >En tekst</font>

87 9 HTML-KODER 87 Bakgrunnsfarger på websiden Du kan på tilsvarende måte endre bakgrunnsfargen på en webside ved å sette attributtet bgcolor på <body>-taggen til en heksadesmial fargekode: <body bgcolor= #99cccc > Hyperlinker til dokumenter Alle former for hyperlinker uttrykkes i HTML ved hjelp av <a>-taggen (anchor-taggen). For å lage en hyperlink til en ekstern webside setter vi inn URL-en i href (hyperreferanse) attributtet: <a href= >Teksten som skal bli lenke...</a> I tillegg kan vi legge til en target attributt som forteller hvordan websiden skal åpnes. For eksempel vil _blank åpne websiden i et nytt vindu: <a href= targe= _blank >Teksten som skal bli lenke...</a> Dersom vi ønsker å lage en hyperlink til en webside på samme webområde, er det dumt å lage en absolutt URL til siden, ettersom denne da vil bli feil om vi flytter webområdet til en annen plassering. Vi kan da heller bruke en relativ URL. Som oftest ønsker vi da å lenke til en side i samme katalog, og kan da ganske enkelt bare skrive selve filnavnet. Nettleseren vil da skjønne at det er en fil i samme mappe det dreier seg om: <a href= kontakt.htm >Kontakt oss</a> Ønsker vi å referere til en side i en underkatalog, kan vi skrive filstien fra mappen der vi i utgangspunktet stod: <a href= undermappe/kontakt.htm >Kontakt oss</a> Ønsker vi å referere til en fil lenger opp i filstrukturen, kan vi benytte../ som forteller oss at vi ønsker å bevege oss til mappen over: <a href=../kontakt.htm >Kontakt oss</a>

88 88 Snarveien til MySQL og Dreamweaver CS5 Hyperlinker til e-postadresser Som vi har sett i denne boka, kan vi også lage hyperlinker av e-postadresser. Det er da ønskelig at standard e-post-program skal åpnes og gjøre klar en ny melding, når hyperlinken klikkes. <a>-taggen lages på samme måte, men i stedet for å ha en URL i hrefattributtet, skriver man mailto:post@domene.no: <a href= mailto:post@domene.no >Trykk her for å sende en e-post.</ a> Man kan også ferdigutfylle deler av e-posten ved å skrive mailto:post@ domene.no?subject=emne&body=melding som href: <a href= mailto:post@domene.no?subject=emne&body=melding >Try kk her for å sende en e-post.</a> Grafikk Du kan enkelt sette inn et bilde i din webside ved å bruke <img>-taggen. Det er viktig å merke seg at selve bildet ikke blir en del av HTMLdokumentet. Man setter inn tagger som forteller at her skal det stå et bilde med visse egenskaper og en referanse til hvor nettleseren kan hente bildet. Et eksempel på en <img>-tagg vil være følgende: <img src= bilde.jpg width= 30 height= 45 alt= Bilde av meg /> Legg merke til at <img>-taggen er en tagg som avslutter seg selv. Den markerer kun at her skal det stå et bilde. De viktigste attributtene til <img>-taggen er som følger: src Forteller hvor bildefilen befinner seg. På samme måte som href i hyperkoblinger, kan man velge om man vil oppgi en relativ eller absolutt URL. height Høyden på bildet målt i piksler. width Bredden på bildet målt i piksler.

89 9 HTML-KODER 89 alt En alternativ tekst som vil vises dersom bildet ikke kunne vises eller man har skrudd av bildevisning i nettleseren. Det er viktig å merke seg at det også finnes nettlesere som kun er tekstbaserte. Et typisk eksempel på disse, er nettlesere for svaksynte som leser opp en webside, og da også forklarer hvordan et bilde ser ut ved å bruke den alternative teksten. Derfor er det viktig å alltid sette en alternativ tekst på bilder. Tabeller Tabeller er en litt mer komplisert struktur. En tabell består av fire ulike tagger, nemlig <table>,<tr>, <td> og <th>. Det er lettest å forklare tabeller med et lite eksempel først: <table border= 1 > <tr><th>navn</th><th>poeng</th></tr> <tr><td>per</td><td>47</td></tr> <tr><td>karen</td><td>23</td></tr> <tr><td>ola</td><td>23</td></tr> </table> Enkelt forklart, benyttes <table>...</table> til å markere alle delene av tabellen. Taggen <tr>...</tr> (table row) markerer en rad i tabellen og taggen <td>...</td> (table data) markerer datafeltene (cellene) på hver rad. I tillegg har vi et alternativ til <td>, som heter <th> (table heading), som vi kan benytte i første rad av en tabell. Taggen <th> vil da lage spesielle celler som er å regne som kolonneoverskrifter i tabellen. Validering av HTML-koder Selv om de fleste nettlesere er veldig medgjørlige med feil og mangler i HTML-koden, er det likevel veldig viktig at koden ikke inneholder feil. Feil i koden kan medføre at websiden din vises helt uventet eller kanskje ikke i det hele tatt på enkelte nettlesere og enkelte typer systemer. W3C HTML validator W3C (World Wide Web Consortium), som er standardiseringsorganisasjonen for HTML, har også laget en tjeneste på nettet som kan sjekke HTML-koden din for strukturelle feil uavhengig av hvilken editor du benytter. Du finner validatoren på websiden Her har du tre ulike måter å validere koden din på:

90 90 Snarveien til MySQL og Dreamweaver CS5 Validate by URL Ved denne typen validering må man allerede ha lagt ut websiden sin på en eller annen offentlig webserver. Man kan deretter skrive inn URL-en (webadressen) til sin webside og så få kontrollert denne. Validate by File Upload Her kan man laste opp en *.htm eller *.html fil man driver og utvikler eller som ennå ikke er lagt på en webserver. Validate by Direct Input Her kan man lime inn HTML-kode gjennom klipp og lim. Vær oppmerksom på at man vil få feilmeldinger på at det ikke er et gyldig dokument dersom man ikke limer inn hele HTML-koden. CSS-validering Å skrive egen CSS-kode er ikke en del av denne boka, men om du skulle fatte interesse for dette, finnes det et tilsvarende verktøy for CSS-filer på adressen Mer informasjon om HTML Som nevnt i innledningen til dette kapitlet, er det umulig å bli fullært på HTML-koder i løpet av ett kapittel. Vi vil derfor her gi deg noen ressurser som kan være nyttige for å finne mer informasjon om HTML-koder. Dreamweavers innebygde oppslagsverk Velger du Window - Results - Reference får du opp et innebygget oppslagsverk i Dreamweaver. Velg her O RIELLY HTML Reference og ønsket tagg. Dette oppslagsverket inneholder også referanser til CSS, PHP, XML osv.

91 W3C Som nevnt tidligere er W3C standardiseringsorganisjonen for HTML. Det er altså de som styrer utviklingen av språket. På deres sider finner du tekniske spesifikasjoner av språket. Dette kan være noe detaljert for de fleste, men kjekt å slå opp i om man lurer på noe helt spesielt. Du finner den gamle, men foreløpig vanligste versjonen av HTML på linken Den nye versjonen som kalles XHTML finner du på linken W3Schools W3Schools baserer seg på å tilnærme seg HTML ved hjelp av guider (tutorials). Dette er kanskje det beste stedet for en nybegynner å starte. Google Som med alt annet, er Google også en stor ressurs i forbindelse med HTML. Her kan du for eksempel søke etter taggnavn HTML eller HTML tutorials og finne masse ressurser.

92 92 Snarveien til MySQL og Dreamweaver CS5

93 DEL 2 DYNAMISKE WEBSIDER >>

94 94 Snarveien til MySQL og Dreamweaver CS5 >>10 Introdukjon til dynamiske websider I dette kapittelet vil du lære om forskjellen mellom statiske og dynamiske websider om hva WampServer er hvordan du installerer WampServer 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 utseende, struktur og innhold fra ulike kilder idet brukeren besøker nettsidene. Dette kjenner vi igjen fra nettbutikker, nettaviser, webkameraer, blogger, sosiale nettverk osv. 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. I tillegg 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.

95 10 INTRODUKSJON TIL DYNAMISKE WEBSIDER 95 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, nemlig at programkoden utføres i nettleseren (clientside 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. 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. Den 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.

96 96 Snarveien til MySQL og Dreamweaver CS5 WampServer I denne boka skal vi som sagt benytte PHP som serverspråk og Apache som webserver. I tillegg 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 én 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 stadig i nye versjoner, så denne installasjonsveiledningen kan avvike noe. Veiledningen er basert på versjon 2.0i. 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 på Yes. Følg så installasjonsveiledningen gjennom velkomstbildet og godkjenningen av lisensavtalen.

97 10 INTRODUKSJON TIL DYNAMISKE WEBSIDER 97 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. Fortsett så installasjonen gjennom godkjenningen av valgene og selve kopieringen av filer.

98 98 Snarveien til MySQL og Dreamweaver CS5 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 Internett). Fjern til slutt den automatiske oppstarten av WampServer, da vi ønsker å lære prosessen for å gjøre dette manuelt, og trykk på Finish. Får du spørsmål om å tillate Apache gjennom din brannmur, velger du at du ønsker å dette (Unblock).

99 10 INTRODUKSJON TIL DYNAMISKE WEBSIDER 99 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. Du vil nok bli ganske skuffet over effekten av dette valget, for det skjedde tilsynelatende svært lite. Det 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 etter 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 tillegg 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.

100 100 Snarveien til MySQL og Dreamweaver CS5 Feil under oppstart av WampServer Dersom det nå skulle vise seg at ikke alle tjenestene kunne starte, er den mest sannsynlige årsaken at du alt har noen lignende 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 WampServers tjenester på venstremenyen til ikonet for WampServer. Elementet World Wide Web Publishing som det henvises til i teksten, kan ha ulike navn i ulike versjoner av Windows. 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/Webpubliseringstjeneste, 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 å stoppe IIS permanent velger du Properties/ Egenskaper på høyremenyen og setter måten tjenesten skal starte på, til manuell.

101 10 INTRODUKSJON TIL DYNAMISKE WEBSIDER 101 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. Alternativt kan du velge menyelementet Localhost på WampServer-menyen. Teste WampServer Etter at du er ferdig med å installere WampServer, er det på tide å teste den. Dette kan enkelt gjøres ved å åpne WampServers startside i en nettleser. Skriv derfor inn adressen i din nettleser, og kontroller at du får opp følgende webside:

102 102 Snarveien til MySQL og Dreamweaver CS5 >>11 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 Velg Site i menyen på venstre side og skriv inn dynamisktest som navn på webområdet og plasseringen c:\wamp\www\dynamisktest som Local Site Folder

103 11 DYNAMISKE WEBSIDER I DREAMWEAVER Velg Servers i menyen på venstre side, og trykk på + for å legge til en ny server 5 Skriv inn Testing Server som navn og velg Local/Network som tilkoblingsmetode under Basic 6 Fyll inn c:\wamp\www\dynamisktest som Server Folder og dynamisktest/ som Web URL

104 104 Snarveien til MySQL og Dreamweaver CS5 7 Bytt til Advanced og velg PHP MySQL som Server Model 8 Trykk Save for å legge til serveren 9 Fjern så krysset for Remote og huk av krysset for Testing 10 Trykk Save for å opprette webområdet 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

105 11 DYNAMISKE WEBSIDER I DREAMWEAVER Skriv inn følgende PHP-koder i dokumentet etter kolon: 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: 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:

106 106 Snarveien til MySQL og Dreamweaver CS5 >>12 Arbeide med MySQL 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/MySQLGUITools/ mysql-gui-tools-5.0-r17-win32. msi/from/pick#mirrors 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 kapittelet 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. På det tidspunktet da denne boka ble skrevet er MySQL i ferd med å legge ned utviklingen av Query Browser (såkalt End of Life), og integrere funksjonaliteten i et annet produkt kalt Workbench (fra og med versjon 5.2).

107 12 ARBEIDE MED SQL 107 Det vil bli vedlikeholdt en alternativ versjon av dette kapittelet på bokas nettsider der samme fremgangsmåte i nyeste versjon av Workbench presenteres.. Vi har allikevel valgt å holde på Query Browser som verktøy i denne utgaven av boka, da verktøyet inneholder færre funksjoner og har en bedre pedagogisk tilnærming. I tillegg er versjon 5.2 av Workbech fortsatt under utvikling da denne boka ble skrevet. 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. 1 Start MySQL Query Browser 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å på OK for å logge inn

108 108 Snarveien til MySQL og Dreamweaver CS5 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 nemlig 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 I noen installasjoner av Query Browser vil den avanserte visningen av SQL-editoren være standard. Gjelder dette din installasjon kan du bytte til den enkle visningen ved å fjerne markeringen på menypunktet View - Maximize Query Edit Arbeidsområdet i Query Browser består av følgende hovedelementer: 1. Resultatpanel 2. Prosjektpanel 3. SQL-editor

109 12 ARBEIDE MED SQL 109 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. 1 Sørg for at du er logget inn i MySQL via Query Browser 2 Høyreklikk på et blankt område i prosjektpanelet, og velg Create New Schema 3 Skriv inn sitatregister som navn på det nye prosjektet, og klikk på OK 4 Du har nå fått et nytt prosjekt (schema) inn i MySQL sammen med de to systemprosjektene som alt lå der

110 110 Snarveien til MySQL og Dreamweaver CS5 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 inneholder, 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

111 12 ARBEIDE MED SQL Trykk på tabulatortasten, 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 vi hele den første kolonnen ferdig laget for oss 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

112 112 Snarveien til MySQL og Dreamweaver CS5 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 resultatpanelet nå vise en tom tabell 5 Trykk på knappen under resultatpanelet for å starte editeringsmodus av tabellen 6 Fyll ut med 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 resultatpanelet for å overføre dataene

113 12 ARBEIDE MED SQL 113 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: 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 på 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 ut med følgende eksempeldata i tabellen person 7 Velg til slutt Apply Changes for å overføre dataene til MySQL

114 114 Snarveien til MySQL og Dreamweaver CS5 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 NULL-verdier, 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

115 12 ARBEIDE MED SQL 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 6 Velg så Apply Changes og Execute for å godkjenne endringen 7 Lukk så Table Editor ved å trykke Close 8 Dobbeltklikk på sitat-tabellen i prosjekteditoren, og trykk på 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 ut med riktig personid 11 Send endringene over til databasen ved å trykke på 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 Send endringene til databasen ved å klikke på Apply Changes og Execute 14 Lukk til slutt Table Editor dialogen ved å trykke på Close

116 116 Snarveien til MySQL og Dreamweaver CS5 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 lyserød bakgrunn 4 Trykk på knappen Apply Changes for å overføre endringene (slettingene) til databasen

117 12 ARBEIDE MED SQL 117 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. 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.

118 118 Snarveien til MySQL og Dreamweaver CS5 4 Klikk så på knappen Add new user nederst i bildet 5 Fyll ut med 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 da 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.

119 12 ARBEIDE MED SQL 119 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. 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:

120 120 Snarveien til MySQL og Dreamweaver CS5 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 kontaktet 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 ut 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, samt spesialtegn som tabulator og linjeskift 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:

121 13 KOBLE DREAMWEAVER OG MYSQL 121 >>13 Koble Dreamweaver og MySQL I dette kapittelet vil du lære hvordan du kobler Dreamweaver og en MySQL-database å hente ut et enkelt datasett 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 laget i forrige kapittel. For tilkoblingen skal vi benytte brukeren webgrensensitt.

122 122 Snarveien til MySQL og Dreamweaver CS5 Opprette webområdet sitatside 1 Opprett et nytt prosjekt i Dreamweaver gjennom å velge Site New Site 2 Skriv inn sitatside som navn på webområdet 3 I feltet Local Site Folder skriver du inn følgende plassering: c:\wamp\www\sitatside 4 Velg så Servers i menyen til venstre, og legg til en ny server ved hjelp av pluss-knappen. 5 Gi den nye serveren navnet Testing Server, og sett tilkoblingsmåten til å være Local/Network 6 Benytt c:\wamp\www\sitatside som Server Folder, og sitatside/ som Web URL 7 Angi at PHP MySQL skal være Server Model under Advanced-delen av dialogboksen, og legg til serveren ved å trykke Save 8 Fjern så krysset for Remote og huk av krysset for Testing 9 Opprett webområdet ved å trykke Save i dialogboksen Site Setup for sitatside 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. Du finner Databases-panelet under Windows-menyen dersom det ikke alt er synlig. 1 Velg File New 2 Velg deretter Blank Page, Page Type PHP og Layout <none> 3 Sørg for at Databases-panelet er aktivt 4 Velg pluss-knappen og deretter MySQL Connection 5 Fyll ut med 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 6 Trykk så på knappen Select

123 13 KOBLE DREAMWEAVER OG MYSQL Velg databasen/prosjektet sitatregister i listen som kommer opp. Bekreft ved å trykke på OK Tabelloversikt er en av mange mulige presentasjonsmåter i Dreamweaver. Vi skal ta for oss resten av presentasjonsmåtene i neste kapittel. 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 på OK 9 Avslutt dialogboksen MySQL Connection ved å trykke på OK. Du har nå fått en tilkobling med navn sitatkobling i webområdet 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 Sørg for at Bindings-panelet er synlig 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.

124 124 Snarveien til MySQL og Dreamweaver CS5 4 Trykk på Test for å se på resultatet, og kontroller at du får opp dataene fra databasen. Avslutt Test SQL Statement-vinduet ved å trykke på OK 5 Legg til datasettet ved å trykke på OK i dialogboksen Recordset 6 Du har da fått inn datasettet i websiden, men vi må gjøre noen flere valg for å fortelle hvordan vi ønsker å presentere dette for brukeren 7 Velg Insert Data Objects Dynamic Data Dynamic Table i hovedmenyen 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 File 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åde, er det imidlertid mulig å benytte copy/paste på et datasett mellom websidene etter følgende fremgangsmåte: 1 Høyreklikk på datasettet i Bindings-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-panelet og velg Paste

125 14 HENTE UT DATA 125 >>14 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 MySQLdatabase, 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-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...

126 126 Snarveien til MySQL og Dreamweaver CS5 6 Fyll ut sitaterkomplett som Name og sitatkobling som Connection 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 sitatets 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å i Bindings-panelet 12 Velg Insert Data Objects Dynamic Data Dynamic Table 13 Velg sitaterkomplett som datasett og at du ønsker å vise alle sitatene 14 Trykk på 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

127 14 HENTE UT DATA 127 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. 1 Sørg for å ha websiden sitateravansert.php åpen 2 Sørg for at Bindings-panelet er synlig 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-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 tekst, 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

128 128 Snarveien til MySQL og Dreamweaver CS5 13 Velg at du på denne posisjonen ønsker å sette inn teksten fra feltet tekst Dynamiske tekstfelt kan også lages ved å dra feltnavnet fra panelet Bindings og slippe det på ønsket plass i websiden 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

129 14 HENTE UT DATA 129 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 satte 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. 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 på 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. Det 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

130 130 Snarveien til MySQL og Dreamweaver CS5 Tilpassede datapresentasjoner Vi skal nå tilpasse dataene enda mer til vårt bruk ved å presentere kun ett tilfeldig sitat på en webside. Dette gjør vi 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-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 på 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 heading 1, kursiv 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å på oppdater i nettleseren flere ganger, og kontroller at sitatet forandrer seg

131 15 LEGGE INN OG OPPDATERE DATA 131 >>15 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 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.

132 132 Snarveien til MySQL og Dreamweaver CS5 Lage et enkelt innsettingsskjema 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 trykk 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

133 15 LEGGE INN OG OPPDATERE DATA 133 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 fremmednøkkel som peker på en annen databasetabell, må vi imidlertid forsikre oss om at brukeren fyller ut med en gyldig verdi. Dette gjør vi enklest ved å lage en nedtrekksliste med de gyldige verdiene i. Vi skal derfor lage et innsettingsskjema for databasetabellen sitat. I tillegg 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 Du kan nå se en oversikt over sitatene her 6 La teksten her peke til websiden sitateravansert.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 i Bindings-panelet

134 134 Snarveien til MySQL og Dreamweaver CS5 11 Gi datasettet navnet persondata, benytt sitatkobling som Connection og person som Table og velg kolonnene id og navn 12 Kontroller at du får ut riktige data, gjennom å trykke på Test-knappen 13 Trykk på OK for å avslutte testvisningen 14 Legg til datasettet gjennom å trykke på 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 22 Avslutt dialogboksen Menu Properties med knappen OK

135 15 LEGGE INN OG OPPDATERE DATA 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 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 linken 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 å slette person nummer to:

136 136 Snarveien til MySQL og Dreamweaver CS5 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 fila 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 på 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 å trykke på 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 på OK 13 Skriv inn teksten Slett i den nye kolonnen 14 Marker ordet Slett og velg Insert Hyperlink 15 Benytt browse-knappen i feltet Link, og i Select File-dialogen velger du Data sources under Select file name from

137 15 LEGGE INN OG OPPDATERE DATA Velg her feltet id fra datasettet persondata og trykk OK 17 Legg til teksten?slettid= før teksten Dreamweaver automatisk har skrevet i feltet Link, og trykk så OK 18 Velg Insert Data Objects Delete Record 19 Velg at det først skal sjekkes om URL-parameteren 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-parameteren slettid 20 Legg til slett-funksjonaliteten i websiden ved å trykke på OK 21 Velg File Save for å lagre endringene

138 138 Snarveien til MySQL og Dreamweaver CS5 22 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 23 Legg merke til at når du valgte å slette personen, inneholder plutselig URLen til websiden en parameter med denne personens id: 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 en 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-panelet. Sørg for at du har dialogboksen i Simple-modus 6 I seksjonen Filter velger du at id skal være lik URL-parameteren oppdaterid, for kun å hente ut data om den aktuelle personen

139 15 LEGGE INN OG OPPDATERE DATA Trykk på Test-knappen, oppgi tallet 1 som testverdi for oppdateridparameteret, og trykk på OK 8 Kontroller at du kun får ut opplysningene om personen med id 1 9 Avslutt testvinduet og legg til datasettet ved å trykke på OK i begge dialogboksene 10 Velg Insert Data Objects Update Record Record Update Form Wizard 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 på OK i dialogboksen Record Update Form 14 Marker knappen Update record, og sett teksten til Oppdater person gjennom å endre egenskapen Value på egenskapspanelet 15 Velg File Save for å lagre 16 Gå til websiden personadministrasjon.php

140 140 Snarveien til MySQL og Dreamweaver CS5 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 på OK 19 Skriv inn teksten Oppdater i den nye kolonnen 20 Marker ordet Oppdater og velg Insert Hyperlink 21 Benytt browse-knappen i feltet Link, og i Select File-dialogen velger du Data sources under Select file name from 22 Velg her feltet id fra datasettet persondata og trykk OK 23 Legg til teksten oppdaterperson.php?oppdaterid= før teksten Dreamweaver har skrevet i feltet, og trykk så OK 24 Velg File Save for å lagre 25 Testkjør websiden. Velg å oppdatere Thomas A. Edison, og fjern mellomnavnet hans. Kontroller at oppdateringen ble utført

141 16 GJESTEBOK 141 >>16 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 I dette eksempelet skal vi lage en enkel gjestebok. Gjesteboka skal bestå av et webskjema der de besøkende kan legge igjen hilsener, samt presentasjonen av hilsenene som alt er lagt til. Gjesteboka skal lagre sine data i en tabell som ser slik ut. Vi har her valgt å sette feltet tidsstempel alene som primærnøkkel, da det er høyst usannsynlig at to innlegg i gjesteboka 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.

142 142 Snarveien til MySQL og Dreamweaver CS5 Opprette databasen og testdata 1 Sørg for at WampServer er startet 2 Logg deg på MySQL-databasen gjennom QueryBrowser 3 Høyreklikk et blankt område i prosjektpanelet og velg Create New Schema 4 Gi det nye prosjektet navnet gjestebok, og trykk på OK 5 Høyreklikk på prosjektet i prosjektpanelet, 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 på Execute, og lukk så dialogboksen ved å trykke på Close 9 Dobbeltklikk på tabellnavnet hilsen i prosjektpanelet 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:

143 16 GJESTEBOK Send over dataene til selve databasen ved å trykke på -knappen 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. Importere teksten fra en fil Editere teksten i en egen enkel editor Se på teksten i et eget vindu Eksportere teksten til en fil Fjerne all tekst fra feltet (sette feltet til NULL) 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 ut med brukernavnet gjestebokweb 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 Local Site Folder skriver du inn følgende plassering: c:\wamp\www\gjestebokprosjekt 4 Velg så Servers i menyen til venstre, og legg til en ny server ved hjelp av pluss-knappen 5 Gi den nye serveren navnet Testing Server, og sett tilkoblingsmåten til å være Local/Network

144 144 Snarveien til MySQL og Dreamweaver CS5 6 Benytt c:\wamp\www\gjestebokprosjekt som Server Folder, og localhost/gjestebokprosjekt/ som Web URL 7 Angi at PHP MySQL skal være Server Model under Advanced-delen av dialogboksen, og legg til serveren ved å trykke Save 8 Fjern så krysset for Remote og huk av krysset for Testing 9 Opprett webområdet ved å trykke Save i dialogboksen Site Setup for gjestebokprosjekt 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 Databases-panelet er synlig 5 Velg pluss-knappen og deretter MySQL Connection 6 Fyll ut med 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 7 Trykk på knappen Select, og velg databasen/prosjektet gjestebok i lista som kommer opp. Bekreft ved å trykke på OK 8 Trykk på knappen Test, kontroller at du får en melding om at tilkoblingen var vellykket, og lukk meldingen med OK-knappen

145 16 GJESTEBOK Avslutt dialogen MySQL Connection ved å trykke på OK. Du har nå fått en tilkobling med navn gjestebokkobling i webområdet Lage opplisting av hilsener Vi skal nå lage en opplisting av alle hilsenene i databasen ved hjelp av en repeat-region. Vi definerer altså en mal på hvordan én hilsen 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ør vi enklest ved å skrive inn litt ekstra SQL under definisjonen av datasettet. 1 Gå til Bindings-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 på OK i testvinduet og i Recordset-vinduet 7 Skriv inn følgende tekst i websiden: 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 på OK

146 146 Snarveien til MySQL og Dreamweaver CS5 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 hilsenene som ligger i databasen på korrekt format Legge til skjemaet Neste steg i prosessen er å legge til et skjema som kan ta imot nye hilsener 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 PHPkoden som Dreamweaver skriver for oss. 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 på 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 hilsenen legges inn). La datafeltet tekst få visningstypen Text area

147 16 GJESTEBOK Sett inn skjemaet ved å trykke på OK 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: 9 Bytt tilbake til designmodus. Det kan være at du nå får en feilmelding angående analyzeserverbehavior. Du kan se bort fra denne, da den kun forteller deg at Dreamweaver ikke lenger selv har oversikt over all koden 10 Velg File - Save

148 148 Snarveien til MySQL og Dreamweaver CS5 11 Testkjør websiden. Legg inn en ny hilsen, og kontroller at den kommer inn i databasen og øverst i opplistingen

149 17 BESØKSSTATISTIKK 149 >>17 Besøksstatistikk I dette kapittelet vil du lære hvordan besøksfrekvens monitoreres hvordan man tegner søylediagram ut fra data mer om tilpassede SQL-spørringer og datasett Vi skal i dette eksempelet 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. Det 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 tillegg til å være den mest fleksible løsningen også er den som innebærer færrest nye elementer. 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. Selve besøksdataene skal lagres i en enkel databasetabell med navn logglinje. Tabellen vil benytte både tidsstempel 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.

150 150 Snarveien til MySQL og Dreamweaver CS5 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 prosjektpanelet, og velg Create New Schema 4 Gi det nye prosjektet navnet logging, og trykk på OK 5 Høyreklikk på det nye prosjektet i prosjektpanelet, 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 på 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 ut med 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 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

151 17 BESØKSSTATISTIKK I feltet Local Site Folder skriver du inn følgende plassering: c:\wamp\www\loggingprosjekt 4 Velg så Servers i menyen til venstre, og legg til en ny server ved hjelp av pluss-knappen 5 Gi den nye serveren navnet Testing Server, og sett tilkoblingsmåten til å være Local/Network 6 Benytt c:\wamp\www\loggingprosjekt som Server Folder, og localhost/loggingprosjekt/ som Web URL 7 Angi at PHP MySQL skal være Server Model under Advanced-delen av dialogboksen, og legg til serveren ved å trykke Save 8 Fjern så krysset for Remote og huk av krysset for Testing 9 Opprett webområdet ved å trykke Save i dialogboksen Site Setup for loggingprosjekt Opprette det dynamiske loggingbildet 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 diskré. 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 lagre det i mappa c:\wamp\www\loggingprosjekt 2 Velg File New 3 Velg deretter Blank Page, Page Type PHP og Layout <none> 4 Sørg for at Databases-panelet er synlig 5 Velg pluss-knappen og deretter MySQL Connection 6 Fyll ut med navnet loggingkobling, plasseringen localhost, brukernavnet logging og passordet drossap som tilkoblingsinformasjon 7 Velg så logging som database

152 152 Snarveien til MySQL og Dreamweaver CS5 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);?>

153 17 BESØKSSTATISTIKK Velg File Save, og gi fila navnet loggingbilde.php 12 Testkjør websiden/bildet. Du skal nå se bildet i din nettleser 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

154 154 Snarveien til MySQL og Dreamweaver CS5 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 på 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

155 17 BESØKSSTATISTIKK 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 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 fila navnet statistikk.php

156 156 Snarveien til MySQL og Dreamweaver CS5 Vise 10 siste besøk 1 Sørg for at siden statistikk.php er aktiv 2 Sørg for at Bindings-panelet er synlig 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 SQLsetning: 7 Test spørringen ved å trykke på Test-knappen 8 Legg til datasettet ved å trykke på 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

157 17 BESØKSSTATISTIKK 157 Sortere sider etter popularitet 1 Sørg for at siden statistikk.php er aktiv 2 Sørg for at Bindings-panelet er synlig 3 Velg pluss-knappen og så Recordset. Sørg for at du har Advanced-modus på dialogen 4 Gi datasettet navnet populaeresider, og hent dataene fra tilkoblingen loggingkobling 5 Skriv inn følgende SQL: 6 Testkjør spørringen, og se at du får et fornuftig resultat 7 Legg til datasettet ved å trykke på 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 trykk på OK 11 Velg File Save 12 Testkjør websiden, og kontroller at du får presentert dataene

158 158 Snarveien til MySQL og Dreamweaver CS5 Legge til grafer for 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. 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. 1 Lag et bilde på 1 x 1 piksel 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-panelet, og dobbeltklikk på datasettet populaeresider for å endre dette 5 Gjør om spørringen til følgende SQL. Vi henter her i tillegg 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 fornuftig resultat, der det er beregnet en faktor for hvor mye av besøket denne websiden står for 7 Trykk på 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 på OK

159 17 BESØKSSTATISTIKK 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. Skriv inn den tilleggsteksten som er understreket i bildet under.. Vi endrer i koden for å angi at bredden på bildet skal være faktoren ganget med 250, og at høyden skal være Velg File Save 14 Testkjør websiden, og kontroller at du får presentert dataene med liggende søyler

160 160 Snarveien til MySQL og Dreamweaver CS5 >>18 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 imot en URLparameter for å kunne avgjøre hvilket innlegg som skal presenteres. URLen til denne websiden vil derfor se ut som følger:

161 18 BLOGG 161 Opprette databasetabellene 1 Sørg for at WampServer er startet, og logg deg på MySQL-databasen 2 Høyreklikk i prosjektpanelet, og velg Create New Schema 3 Gi det nye prosjektet navnet blogg, og trykk på OK 4 Høyreklikk på prosjektet i prosjektpanelet, og velg Create New Table 5 Gi den nye tabellen navnet innlegg, og legg inn følgende kolonner: 6 Legg til tabellen ved å trykke på 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 på 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ærnøkkel, trykker du på den grønne lille diamanten foran kolonnenavnet

162 162 Snarveien til MySQL og Dreamweaver CS5 11 Lag fremmednøkkelen fk_visning_innlegg med følgende egenskaper: 12 Legg til tabellen ved å klikke på Apply Changes, og bekreft endringen ved å trykke på Execute. Lukk så dialogboksen 13 Kontroller at du har fått inn de tre tabellene i prosjektutforskeren 14 Dobbeltklikk på tabellen innlegg, og trykk så på Execute for å kjøre SQLsetningen 15 Velg Edit-modus og legg inn følgende testdata: 16 Send over dataene til databasen ved å trykke på 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 ut med 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

163 18 BLOGG 163 Lage et view for bloggvisning I dette prosjektet trenger vi et forholdsvis avansert datasett for å liste opp innleggene. I tillegg 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 SQLspørringer i teorien produserer en ny tabell, kan vi gi dette resultatet et navn og deretter benytte det som om det var 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 en 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. 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

164 164 Snarveien til MySQL og Dreamweaver CS5 4 Skriv inn følgende SQL i teksteditoren som dukker opp, og trykk på 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 ( ), og svar No på å lagre scriptet. 7 Dobbeltklikk på viewet bloggvisning i prosjektpanelet for automatisk å skrive en uthentingskommando, og trykk på Execute-knappen. Kontroller at du får ut informasjon om blogginnleggene, samt 0 visninger og 0 kommentarer (ingen visninger eller kommentarer er registrert ennå) Opprette webområdet for bloggen 1 Opprett et nytt webområde gjennom å velge Site New Site 2 Skriv inn bloggprosjekt som navn på webområdet 3 I feltet Local Site Folder skriver du inn følgende plassering: c:\wamp\www\bloggprosjekt 4 Velg så Servers i menyen til venstre, og legg til en ny server ved hjelp av pluss-knappen 5 Gi den nye serveren navnet Testing Server, og sett tilkoblingsmåten til å være Local/Network 6 Benytt c:\wamp\www\bloggprosjekt som Server Folder, og bloggprosjekt/ som Web URL

165 18 BLOGG Angi at PHP MySQL skal være Server Model under Advanced-delen av dialogboksen, og legg til serveren ved å trykke Save 8 Fjern så krysset for Remote og huk av krysset for Testing 9 Opprett webområdet ved å trykke Save i dialogboksen Site Setup for bloggprosjekt 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. 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 for at filene er navngitt slik du refererte dem i feltet bilde i testdataene for innlegg-tabellen. Vær også nøye med samsvar når det gjelder store og 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 Databases-panelet er synlig 4 Velg pluss-knappen og deretter MySQL Connection 5 Fyll ut med navnet bloggkobling, plasseringen localhost, brukernavnet blogg og passordet drossap. 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

166 166 Snarveien til MySQL og Dreamweaver CS5 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 innlegget står først. Foreløpig lar vi en Les mer -link stå ukoblet, men denne skal vi gjøre mer med siden. 1 Sørg for at Bindings-panelet er synlig 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 på 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 border 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 på 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 på OK, og legg til navigasjonsmenyen

167 18 BLOGG Ved å skrive inn tekst og benytte Insert Data Objects Dynamic Data Dynamic Text fyller du den andre kolonnen med følgende data og dynamiske tekstfelter. Ikke bryt den siste linja manuelt. Når innlegg. antallvisninger og innlegg.antallkommentarer blir erstattet med tall, vil linja bli kortere 12 Legg til formateringen heading 2 på tittel, kursiv på korttekst og fet skrift på antallvisninger og antallkommentarer 13 Sett markøren i kolonne én og velg Insert Image 14 I dialogboksen Select Image Source velger du Data sources for valget Select file name from 15 Velg så feltet bilde i datasettet innlegg 16 Ettersom bildene befinner seg i undermappen bilder i webområdet, må du legge til teksten bilder/ før det dynamiske filnavnet (feltet URL). Trykk så OK 17 Benytt teksten Artikkelbilde som alternativ tekst og trykk OK igjen

168 168 Snarveien til MySQL og Dreamweaver CS5 18 Marker bildet du nå har satt inn, og sett W(idth) til 125 i egenskapspanelet 19 Velg File Save, og gi fila navnet listinnlegg.php 20 Testkjør websiden, og kontroller at du får korrekt visning 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 i Bindings-panelet og så URL Vairable 5 Gi variabelen navnet innleggid, og trykk på OK for å legge den til

169 18 BLOGG 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-parameteren innleggid 7 Test spørringen gjennom å trykke på Test-knappen 8 Angi 1 som testverdi for parameteren innleggid. Kontroller at du får opp alle data for det bestemte innlegget 9 Legg til datasettet innleggvisning gjennom å klikke på OK i begge dialogboksene 10 Ved å skrive inn tekst og benytte Insert Data Objects Dynamic Data Dynamic Text fyller du 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

170 170 Snarveien til MySQL og Dreamweaver CS5 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 13 Sett markøren i den tomme tabellcellen og velg Insert Image 14 I dialogboksen Select Image Source velger du Data sources for valget Select file name from 15 Velg så feltet bilde i datasettet innleggvisning 16 Legg til teksten bilder/ før det dynamiske filnavnet (feltet URL), og trykk så OK 17 Benytt teksten Artikkelbilde som alternativ tekst og trykk OK igjen 18 Marker bildet du nå har satt inn, og sett W(idth) til 125 i egenskapspanelet 19 Velg File Save, og gi siden navnet visinnlegg.php 20 Testkjør websiden. Kontroller at du får meldingen Innlegget finnes ikke ettersom parameteren innleggid ikke er satt

171 18 BLOGG Legg til?innleggid=1 i URL en, og vis siden igjen. Kontroller at du nå får vist all informasjonen om innlegg nummer 1 Koble opplisting og visning Til slutt må vi koble Les mer...-linkene på opplistingssiden til visningssiden. Vi kan ikke her bare koble til visinnlegg.php, men må også få satt riktig verdi på parameteren innleggid. Samtidig gjør vi også bildet klikkbart og lar det peke til samme adresse. 1 Sørg for å ha websiden listinnlegg.php aktiv i Dreamweaver 2 Marker teksten Les mer, og velg Insert Hyperlink 3 Trykk på browse-knappen og velg Data sources for valget Select file name from i dialogboksen Select File 4 Velg feltet id i datasettet innlegg, og trykk OK 5 I dialogboksen Hyperlink legger du til teksten visinnlegg.php?innleggid= i feltet Link, før den teksten Dreamweaver automatisk har skrevet. Trykk så OK for å sette inn linken

172 172 Snarveien til MySQL og Dreamweaver CS5 6 Marker Les mer -linken, og kopier innholdet fra Link-egenskapen i egenskapspanelet. Pass på å få med hele innholdet 7 Marker det dynamiske bildet, og lim inn innholdet på utklippstavlen i feltet Link på egenskapspanelet. Både Les mer -linken og bildet peker da til samme nettressurs 8 Velg File Save for å lagre endringene 9 Testkjør websiden, og kontroller at linkene på teksten Les mer og på bildet fungerer, og at du kommer til riktig innlegg 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:

173 18 BLOGG 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 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. 1 Legg til en testkommentar for innlegg 1 i tabellen kommentar gjennom Query Browser. Husk også å overføre dataene til databasen ved å trykke på Apply Changes 2 Sørg for at visinnlegg.php er den aktive fila i Dreamweaver 3 Sørg for at Bindings-panelet er synlig

174 174 Snarveien til MySQL og Dreamweaver CS5 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 kommentaren 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 på 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: 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 på OK for å sette inn repeat-regionen

175 18 BLOGG 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 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

176 176 Snarveien til MySQL og Dreamweaver CS5 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 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 idet 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 på OK 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

177 18 BLOGG Kontroller at du nå har følgende innhold i websiden: 25 Gå til kodevisning for websiden 26 Finn koden som omhandler INSERT-setningen for kommentarer, og sett inn følgende tre tillegg: 27 Bytt tilbake til designmodus. Det kan være at du får en feilmelding angående analyzeserverbehavior. Se bort fra denne meldingen, da den kun forteller deg at Dreamweaver ikke lenger har kontroll over all koden 28 Velg File Save for å lagre endringene 29 Bytt til websiden listinnlegg.php

178 178 Snarveien til MySQL og Dreamweaver CS5 30 Testkjør websiden og kontroller at du kan legge til kommentarer på hvert av innleggene

179 19 BILDEGALLERI 179 >>19 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.

180 180 Snarveien til MySQL og Dreamweaver CS5 Datamodellen for bildegalleriet vil se ut som følger: 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 bildet 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 prosjektpanelet, og velg Create New Schema 4 Gi det nye prosjektet navnet bildegalleri, og trykk på OK 5 Høyreklikk på det nye prosjektet i prosjektpanelet, og velg Create New Table

181 19 BILDEGALLERI Gi den nye tabellen navnet fotograf, og legg inn følgende kolonner i tabellen: 7 Legg til tabellen ved å klikke på Apply Changes i Table Editordialogboksen, og bekrefte ved å trykke på 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

182 182 Snarveien til MySQL og Dreamweaver CS5 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 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 prosjektutforskeren

183 19 BILDEGALLERI 183 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 ut med 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 prosjekt i Dreamweaver gjennom å velge Site New Site 2 Skriv inn bildegalleri som navn på webområdet 3 I feltet Local Site Folder skriver du inn følgende plassering: c:\wamp\www\bildegalleri 4 Velg så Servers i menyen til venstre, og legg til en ny server ved hjelp av pluss-knappen 5 Gi den nye serveren navnet Testing Server, og sett tilkoblingsmåten til å være Local/Network 6 Benytt c:\wamp\www\bildegalleri som Server Folder, og bildegalleri/ som Web URL 7 Angi at PHP MySQL skal være Server Model under Advanced-delen av dialogboksen, og legg til serveren ved å trykke Save 8 Fjern så krysset for Remote og huk av krysset for Testing 9 Opprett webområdet ved å trykke Save i dialogboksen Site Setup for bildegalleri

184 184 Snarveien til MySQL og Dreamweaver CS5 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 å arbeide 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 mappa til webområdet) 3 Legg inn følgende fotografer i tabellen fotograf: 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 Databases-panelet er synlig 4 Velg pluss-knappen og deretter MySQL Connection 5 Fyll ut med 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 på OK

185 19 BILDEGALLERI 185 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 en parameter som heter id i URL-en. I tillegg til selve bildet vil websiden også vise informasjonen om bilde og fotograf. For eksempel kan bilde1.jpg vises ved å angi følgende URL: 1 Gå til fanen Bindings-panelet, og velg å legge til en URL Variable 2 Gi parameteren navnet id, og trykk på OK 3 Kontroller at du har fått inn en ny parameter under Bindings 4 Velg å lage et nytt Recordset fra panelet 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-parameteren id 6 Test spørringen. Du blir nå spurt om å oppgi en "testverdi" for URLparamteteren id. Fyll ut med bilde3.jpg 7 Kontroller at du får ut informasjon kun om 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:

186 186 Snarveien til MySQL og Dreamweaver CS5 9 Merk deg den spesielle verdien colname, som er en variabel som simpleversjonen av dialogen laget for oss. Denne vil hele tiden inneholde verdien vi filtrerer på, som automatisk hentes fra URL-parameteren 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 på 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 på OK 13 Marker det dynamiske elementet bildevisning.tittel, og sett formateringen til å være heading 1 14 Sett inn nok et nytt dynamisk tekstfelt på linja under overskriften, og bind dette til feltet beskrivelse. La beskrivelsen få en kursiv skrift 15 På en ny linje under beskrivelse skriver du inn ledetekstene Data: og Fotograf: på hver sin linje og gir dem fet skrift 16 Sett så inn dynamiske tekstfelt for hver av disse 17 Lag en ny linje mellom overskriften og beskrivelsen. Velg så Insert Image 18 I dialogboksen Select Image Source velger du Data sources for valget Select file name from 19 Velg så feltet filnavn i datasettet bildevisning 20 Legg til teksten bilder/ før det dynamiske filnavnet (feltet URL), og trykk så OK

187 19 BILDEGALLERI Velg å la alternativ tekst hente innholdet fra det dynamiske feltet tittel ved å sette teksten til <?php echo $row_bildevisning[ tittel ];?> og trykk OK igjen 22 Marker bildet du nå har satt inn, og sett W(idth) til 400 i egenskapspanelet 23 Legg inn en ny blank linje til slutt, der du skriver inn teksten Bildet finnes dessverre ikke 24 Marker alt innholdet på siden, unntatt den siste linja, og velg Insert - Data Objects - Show Region - Show If Recordset Not Empty 25 Knytt visningen til datasettet bildevisning, og trykk på OK 26 Marker setningen Bildet finnes dessverre ikke, og velg Insert Data Objects Show Region Show If Recordset Empty. Knytt igjen visningen til datasettet bildevisning 27 Velg File Save, og gi websiden navnet visbilde.php 28 Testkjør websiden. Sjekk at du får feilmeldingen, da intet bilde er angitt 29 Legg til parameteren 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

188 188 Snarveien til MySQL og Dreamweaver CS5 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 en 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. 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 Bindings-panelet, og kontroller at id-parameteren 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-parameteren 7 Test spørringen, og benytt 1 som "testverdi" for id-parameteren. Kontroller at du får ut informasjonen om galleriet 8 Legg til datasettet ved å trykke på 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 på 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 linje, 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

189 19 BILDEGALLERI 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 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 parameteren 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 dem som har en verdi for galleri som samsvarer med id-parameteren 20 Test spørringen og benytt 1 som "testverdi" for id-parameteren. 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 en parameter, vil du kun få ut No data

190 190 Snarveien til MySQL og Dreamweaver CS5 23 Legg til datasettet ved å trykke på OK 24 Lag en ny linje rett etter det dynamiske tekstfeltet galleriinfo.beskrivelse inne i show-regionen og velg Insert Image 25 I dialogboksen Select Image Source velger du Data sources for valget Select file name from 26 Velg så feltet filnavn i datasettet gallerivisning 27 Legg til teksten bilder/ før det dynamiske filnavnet, og trykk så OK 28 Velg å la alternativ tekst hente innholdet fra det dynamiske feltet tittel ved å sette teksten til <?php echo $row_gallerivisning[ tittel ];?> og trykk OK igjen 29 Marker bildet du nå har satt inn, og sett W(idth) til 100 i egenskapspanelet 30 Mens bildet er markert, sett Link-egenskapen for bildet til visbilde.php?id=<?php echo $row_gallerivisning[ filnavn ];?> 31 Mens bildet er markert, velg Insert Data Objects Repeat Region. Baser repeat-regionen på datasettet gallerivisning, velg å vise alle oppføringer, og trykk OK 32 Velg File Save for å lagre endringene 33 Testkjør websiden, og sjekk at du får feilmelding om at galleriet er ugyldig 34 Legg til parameteren 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

191 19 BILDEGALLERI 191 Lage galleriopplisting Vi skal til slutt lage en webside med navn listgallerier.php. Websiden skal liste opp alle galleriene i databasen, samt vise 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 tillegg 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 på 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 på Execute. Kontroller at du får ut informasjonen og et tilfeldig bilde 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 13 Test datasettet og sjekk at du får ut informasjonen. Lukk så testvinduet

192 192 Snarveien til MySQL og Dreamweaver CS5 14 Legg til datasettet ved å trykke på 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 to i tabellen, og velg Insert Data Objects Dynamic Data Dynamic Text. Benytt så feltet tittel fra datasettet gallerier, og trykk OK 18 Gi tittelfeltet heading 2 som format 19 Sett markøren i kolonne én, og velg Insert Image 20 I dialogboksen Select Image Source velger du Data sources for valget Select file name from 21 Velg så feltet tilfeldigbilde i datasettet gallerier 22 Legg til teksten bilder/ før det dynamiske filnavnet, og trykk så OK 23 Velg å la alternativ tekst hente innholdet fra det dynamiske feltet tittel ved å sette teksten til <?php echo $row_gallerier[ tittel ];?>, og trykk OK igjen 24 Marker bildet du nå har satt inn, og sett W(idth) til 75 i egenskapspanelet 25 Mens bildet er markert, sett Link-egenskapen for bildet til visgalleri.php?id=<?php echo $row_gallerier[ galleriid ];?> 26 Marker det dynamiske tekstfeltet gallerier.tittel og gi det samme verdi i Link-egenskapen som bildet, slik at begge to peker på samme nettressurs 27 Marker til slutt tabellraden (ikke hele tabellen), og velg Insert Data Objects Repeat Region. Bind denne til datasettet gallerier, og velg å ha med alle forekomster. Trykk deretter på OK 28 Velg File Save, og gi fila navnet listgallerier.php 29 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

193 20 SQL 193 >>20 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 at vi har forklart spesielt detaljert hvordan SQL er bygd 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. SQL Vær klar over at selv om SQL i utgangspunktet 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. 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, nemlig de for datadefinisjon og de for datamanipulasjon.

194 194 Snarveien til MySQL og Dreamweaver CS5 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 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. 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.

195 20 SQL 195 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; 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ø';

196 196 Snarveien til MySQL og Dreamweaver CS5 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). 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;

197 20 SQL 197 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'; 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;

198 198 Snarveien til MySQL og Dreamweaver CS5 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. 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:

199 20 SQL 199 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; Kjører vi denne spørringen, får vi imidlertid mange flere resultater enn de vi var ute etter. Det 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 begrensninger. 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;

200 200 Snarveien til MySQL og Dreamweaver CS5 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: 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;

201 20 SQL 201 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'; 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;

202 202 Snarveien til MySQL og Dreamweaver CS5 >>21 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 Denne boka vil benytte seg av versjon 5.1 av programmet, som var den nyeste versjonen da boka ble skrevet. 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. Du kan laste ned produktet fra MySQL sine nettsider:

203 21 MYSQL WORKBENCH 203 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:

204 204 Snarveien til MySQL og Dreamweaver CS5 1 Dobbelklikk på schemanavnet mydb 2 I egenskapspanelet som nå dukker opp gir du prosjektet schemanavnet kunderegister 3 Svar Yes på eventuelle spørsmål om Workbench skal endre alle forekomster av schemanavnet 4 Dobbeltklikk på ikonet Add Diagram. Du får nå opp det grafiske modelleringsverktøyet 5 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

205 21 MYSQL WORKBENCH Dobbeltklikk på den nye tabellen for å få opp egenskapspanelet 7 Gi tabellen navnet kunde 8 Velg fliken Columns, og legg til kolonnene vi ønsker at tabellen skal ha. Her setter vi også datatype samt eventuell informasjon om not null, autoincrement og defaultverdi. Merk deg at du kan dra kolonnene opp og ned for å endre rekkefølge på dem 9 Velg igjen Place a New Table-verktøyet, og lag nok en tabell 10 Dobbeltklikk på tabellen for å få opp egenskapene, og gi tabellen navnet poststed 11 Velg fliken Columns og legg til følgende kolonner: 12 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

206 206 Snarveien til MySQL og Dreamweaver CS5 13 Marker kolonnen postnummer i kunde-tabellen, og klikk på knappen Pick Referenced Columns i informasjonsboksen for å bytte modus. Du får nå beskjed om å velge kolonnen det skal refereres til 14 Klikk så på postnummer i poststed-tabellen, og du har fått laget en referanse/relasjon/kobling mellom tabellene 15 Dobbeltklikk på kunde-tabellen for å se egenskapene til denne 16 Velg fliken Foreign Keys, og klikk på den eneste fremmednøkkelen som er registrert her, nemlig fk_kunde_poststed 17 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 18 Velg igjen verktøyet Place a New Table

207 21 MYSQL WORKBENCH Opprett en ny tabell med navn kundekategori, og gi denne tabellen følgende kolonner: 20 Velg verktøyet Place a Relationship Using Existing Columns, og benytt kundekategori i kunde-tabellen som fremmednøkkelkolonne 21 Klikk på knappen Pick Referenced Columns i informasjonsboksen, og benytt kategoriid i kundekategori-tabellen som kolonne det refereres til 22 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 23 Velg File Save for å lagre prosjektet som en MySQL Workbench Modell. Fila vil da få filendelsen *.mwb

208 208 Snarveien til MySQL og Dreamweaver CS5 Fra datamodell til database Etter at vi er ferdige med datamodellen, er det ønskelig å overføre denne til MySQL-databasen. 1 Velg Database Forward Engineer, Trykk Next i dialogboksen som da kommer til syne, uten å endre noen innstillinger 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. 2 I neste vindu har du anledning til å velge hvilke deler av modellen du vil eksportere. La valgene stå som de gjør og trykk Next her også

209 21 MYSQL WORKBENCH Neste dialogvindu gir deg en oversikt over hvilke kommandoer som vil bli kjørt i databasen. Du kan trykke Next her også 4 Fyll inn tilkoblingsinformasjonen for en administratorbruker til databasen. I de aller fleste tilfeller vil dette være ferdigutfylt med root og localhost. Trykk Execute for å starte overføringen

TOM HEINE NÄTT Snarveien til. Dreamweaver CS3. Bokmål

TOM HEINE NÄTT Snarveien til. Dreamweaver CS3. Bokmål TOM HEINE NÄTT Snarveien til Dreamweaver CS3 Bokmål Gyldendal Norsk Forlag AS 2007 Redaktør: Formgiver: Omslagsdesign: Øystein Falch Kevin Sommer-Mathiesen Hild Mowinckel Trykk og innbinding: AIT Trykk

Detaljer

Kursdokumentasjon for Dreamweaver

Kursdokumentasjon for Dreamweaver Kursdokumentasjon for Dreamweaver Skrevet av 2/13 1 Komme i gang med Dreamweaver... 3 2 Bruk av Dreamweaver... 4 2.1 Verktøylinja...5 2.2 Properties... 5 3 Sidens egenskaper... 6 4 Tekst... 7 4.1 Endre

Detaljer

Publisering av statiske og dynamiske websider til klasserom.net fra Dreamweaver og MySQL

Publisering av statiske og dynamiske websider til klasserom.net fra Dreamweaver og MySQL Publisering av statiske og dynamiske websider til klasserom.net fra Dreamweaver og MySQL 1. Om klassersom.net: Klasserom.net er en webhotell-løsning for skoler, hvor formålet er å gi elevene hvert sitt

Detaljer

Brukerveiledning for SI Norge. Publiseringsverktøy for klubbenes hjemmesider

Brukerveiledning for SI Norge. Publiseringsverktøy for klubbenes hjemmesider Brukerveiledning for SI Norge Publiseringsverktøy for klubbenes hjemmesider Innhold Hva finner du hvor?...s. 2 Ordliste..s. 3 Innlogging til Umbraco...s. 4 Opprette ny artikkel.s. 5 - Skrive tekst og laste

Detaljer

Administrering av SafariSøk

Administrering av SafariSøk Administrering av SafariSøk Administrering av SafariSøk Revisjonshistorie Revisjon $Revision: 1.6 $ $Date: 2003/08/05 12:44:02 $ Innholdsfortegnelse 1. Om programmet... 1 Generelt... 1 2. Fremgangsmåter...

Detaljer

Uansett hvilken håndbok du benytter vil fremgangsmåten være den samme. I denne veiledningen benytter vi personalhåndboken som eksempel.

Uansett hvilken håndbok du benytter vil fremgangsmåten være den samme. I denne veiledningen benytter vi personalhåndboken som eksempel. Velkommen som bruker av nettbaserte håndbøker fra Hovedorganisasjonen Virke. Våre nettbaserte håndbøker kan tilpasses din virksomhet. De er redigerbare, samtidig blir de automatisk oppdatert med nye lover

Detaljer

Brukermanual for nettpublisering. frivilligsentral.no

Brukermanual for nettpublisering. frivilligsentral.no Brukermanual for nettpublisering frivilligsentral.no Innholdsfortegnelse Introduksjon 3 1 - Innlogging 4 1.1 - Logge inn 4 1.1 - Logge ut 4 2 - Grensesnitt 5 2.1 - Menyfelt 5 2.2-3 - Opprette, lagre og

Detaljer

Publiseringsveiledning for www.tromsfylke.no

Publiseringsveiledning for www.tromsfylke.no Publiseringsveiledning for www.tromsfylke.no Sist oppdatert 09.07.2013 av Khalil Dahbi Innholdsliste 1. Side:... 3 a. Lage en ny side:... 3 b. Endre innstilling til en side:... 3 c. Slette en side:...

Detaljer

Slik lager du et web-område bestående av flere sammenhengende websider i. Frontpage 2003. Laget av Magnus Nohr Høgskolen i Østfold

Slik lager du et web-område bestående av flere sammenhengende websider i. Frontpage 2003. Laget av Magnus Nohr Høgskolen i Østfold Slik lager du et web-område bestående av flere sammenhengende websider i Frontpage 2003 Laget av Magnus Nohr Høgskolen i Østfold Innholdsfortegnelse 1 Opprett Web-område 3 2 Opprett en navigasjonsstruktur

Detaljer

Hvordan å lage og publisere ditt personlige visittkort

Hvordan å lage og publisere ditt personlige visittkort Hvordan å lage og publisere ditt personlige visittkort Av Asle Skauge Dette skal være en bruksanvisning som alle kan følge for å få lagt ut sitt personlige visittkort på internett. Hensikten med et slikt

Detaljer

BRUK AV TEKSTEDITOREN

BRUK AV TEKSTEDITOREN Dynamisk Internett-publisering med DM Web BRUK AV TEKSTEDITOREN BRUKERVEILEDNING 2007 Datamann AS er Brukermanualen er utarbeidet av Datamann AS Postboks 74 9551 ØKSFJORD Telefon 78 45 95 00 Telefaks 78

Detaljer

Brukerdokumentasjon for LabOra portal - forfattere

Brukerdokumentasjon for LabOra portal - forfattere Brukerdokumentasjon for LabOra portal - forfattere Skin: Dnnbest-Grey-Skin1024 Skin: Metro7 Custom LabOra web-portal er et web-basert publiseringsprogram for publisering av informasjon på hjemmesider.

Detaljer

Veileder i bruk av GoodReader

Veileder i bruk av GoodReader RISØR KOMMUNE Veileder i bruk av GoodReader Innhold 1. Laste ned dokument fra kommunens hjemmeside til GoodReader... 2 2. Bruke GoodReader... 7 3. Redigere filnavn... 8 4. Opprette kataloger / mapper...

Detaljer

CASCADING STYLESHEETS (CSS)

CASCADING STYLESHEETS (CSS) CASCADING STYLESHEETS (CSS) HVA ER CSS Stylesheets er en metode for å flytte selve formatteringen av et HTML dokument ut av selve dokumentet og over i et eksternt regelsett. Dette skyldes HTMLs manglende

Detaljer

Vedlikeholde nettstedet i Joomla 2.5 +

Vedlikeholde nettstedet i Joomla 2.5 + Vedlikeholde nettstedet i Joomla 2.5 + Innlogging: Klikk deg inn på din nettside. I menyen på ditt nettsted vil det være en link til logg inn eller adm. Klikk på denne og logg inn med det brukernavnet

Detaljer

>>21 Datamodellering i MySQL Workbench

>>21 Datamodellering i MySQL Workbench 21 MYSQL WORKBENCH 207 >>21 Datamodellering i MySQL Workbench I dette kapittelet vil du lære hvordan man lager datamodeller i MySQL Workbench hvordan man overfører en modell til MySQL I tillegg til å være

Detaljer

Brukerveiledning http://www.hovikif.no/ Bruk av siden. Når du går inn på siden får du opp følgende bilde:

Brukerveiledning http://www.hovikif.no/ Bruk av siden. Når du går inn på siden får du opp følgende bilde: Brukerveiledning http://www.hovikif.no/ Bruk av siden Når du går inn på siden får du opp følgende bilde: Øverst i høyre hjørne kan du endre størrelsen på teksten og søke etter lagrede artikler. De enkelte

Detaljer

Manual for innlegging av standard sideinnhold og nyheter via «backend»

Manual for innlegging av standard sideinnhold og nyheter via «backend» Manual for innlegging av standard sideinnhold og nyheter via «backend» 23.3.2006 Utarbeidet av: 2 Innlogging og beskrivelse av hovedelement i «backend» For å få tilgang til redigeringsmodul velges følgende

Detaljer

Administrasjon av saker. - Redigere saker med standard mal

Administrasjon av saker. - Redigere saker med standard mal Administrasjon av saker - Redigere saker med standard mal Admin V3 September 2015 INNLEDNING... 3 HVA ER EN ARTIKKEL?... 4 FANE: INNHOLD... 4 Felter i en standard artikkel... 5 LAGE EN NY ARTIKKEL... 6

Detaljer

Brukermanual - Joomla. Kopiering av materiale fra denne Bonefish manualen for bruk annet sted er ikke tillatt uten avtale 2010 Bonefish.

Brukermanual - Joomla. Kopiering av materiale fra denne Bonefish manualen for bruk annet sted er ikke tillatt uten avtale 2010 Bonefish. Brukermanual - Joomla Bonefish brukermanual - Joomla Gratulerer med ny nettside fra Bonefish. Du er nå blitt eier og administrator for din egen nettside, noe som gir deg visse forpliktelser ovenfor din

Detaljer

8 - Rapporter i M-STAS

8 - Rapporter i M-STAS 8 - Rapporter i M-STAS Innledning Denne brukerveiledningen tar sikte på å gi deg en generell innføring i hvordan du henter ut rapporter fra M-STAS. Selv om rapportene er forskjellige med hensyn til innhold

Detaljer

Del 1: Overgang fra gammel hjemmeside til ny hjemmeside

Del 1: Overgang fra gammel hjemmeside til ny hjemmeside Del 1: Overgang fra gammel hjemmeside til ny hjemmeside Instituttsider og personlige hjemmesider som ligger på HFs egen webserver skal nå fases ut.dette innebærer at alle som fortsatt har hjemmesider der,

Detaljer

POLITISKE SAKSDOKUMENTER:

POLITISKE SAKSDOKUMENTER: POLITISKE SAKSDOKUMENTER: FRA PAPIR TIL PC Installasjons- og brukerveiledning Sunndal kommune Side 1 of 20 Side 2 of 20 Innholdsfortegnelse 1 Laste ned PDF-XChange Viewer...5 2 Installere PDF-XChange Viewer...6

Detaljer

Brukermanual til Domenia Norges adminløsning

Brukermanual til Domenia Norges adminløsning Brukermanual til Domenia Norges adminløsning 1. Login For å logge inn på løsningen din skriver du inn domenenavnet ditt og /siteadmin (f.eks www.domenia.no/siteadmin ). Skriv inn brukernavn og passord

Detaljer

Innhold 1 Universelt utformete og tilgjengelige PDF dokumenter... 2 1.1 Hvorfor PDF?... 2 1.2 Gjør det lettere for deg selv... 2 2 Eksporter fra Word

Innhold 1 Universelt utformete og tilgjengelige PDF dokumenter... 2 1.1 Hvorfor PDF?... 2 1.2 Gjør det lettere for deg selv... 2 2 Eksporter fra Word Innhold 1 Universelt utformete og tilgjengelige PDF dokumenter... 2 1.1 Hvorfor PDF?... 2 1.2 Gjør det lettere for deg selv... 2 2 Eksporter fra Word til PDF... 2 3 Gjør tilgjengelighetsverktøyene synlige

Detaljer

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html 1 of 9 15.04.2015 14:15 Spry og behaviours Både Spry and Behaviours er basert på programmeringsspråket Javascript. Javascript kjører i nettleseren og ikke på webserver som PHP og Perl. På en lignende måte

Detaljer

AUTOCAD 2008. Artikkelserie. Tabeller

AUTOCAD 2008. Artikkelserie. Tabeller Odd-Sverre Kolstad AUTOCAD 2008 Artikkelserie Tabeller Gyldendal Norsk Forlag AS 2007 Omslag Marianne Thrap Redaktør: Rune Kjelvik Formgiver: Rune Kjelvik 1. opplag ISBN 978-82-05-37108-8 Alle henvendelser

Detaljer

2009 Thomas Haugland Rudfoss. PowerPoint 2007 En rask introduksjon

2009 Thomas Haugland Rudfoss. PowerPoint 2007 En rask introduksjon PowerPoint 007 En rask introduksjon Agenda PowerPoint vinduet PowerPoint vinduet Office Knappen Ny, åpne og lagre presentasjoner Skrive ut lysbilder, støtteark og notatark Egenskaper for presentasjonen

Detaljer

Labquality/NKK ELEKTRONISK RESULTATSKJEMA VIA INTERNET. Åpning av skjemaet. Logg inn på Participant services. Velg resultatskjemaet

Labquality/NKK ELEKTRONISK RESULTATSKJEMA VIA INTERNET. Åpning av skjemaet. Logg inn på Participant services. Velg resultatskjemaet ELEKTRONISK RESULTATSKJEMA VIA INTERNET Åpning av skjemaet Logg inn på Participant services 1. Åpne internett leseren din (IE7 eller senere er den mest egnede nettleseren) 2. Skriv i adressefeltet: http://www.labquality.fi

Detaljer

Følgende «tommelfinger-regler» bør (må) følges:

Følgende «tommelfinger-regler» bør (må) følges: Notat Denne «oppskriften» er basert på erfaringer om hva som går bra når en benytter Word til å lage navigasjonsdiagrammer. Det finnes sikkert andre måter som også gir et brukbart resultat. Det er bare

Detaljer

Oppgavesett videregående kurs i NVivo 9

Oppgavesett videregående kurs i NVivo 9 Oppgavesett videregående kurs i NVivo 9 Oppgave 1 Alt i en mappe Når man skal kode på lyd og video er det lurt å ha disse filene i samme mappa som NVivo-prosjektfila. Opprett en mappe på skrivebordet.

Detaljer

Velkommen som ny bruker av Uni Økonomi!

Velkommen som ny bruker av Uni Økonomi! Velkommen som ny bruker av Uni Økonomi! Som ny kunde har du fått tilsendt tilsendt epost som vist under, hvor du starter installasjonen av Uni Økonomi - ved å klikke på lenken som står etter "Gå til:"

Detaljer

Innstallasjon og oppsett av Wordpress

Innstallasjon og oppsett av Wordpress Del 1 - Installasjon og oppsett Innstallasjon og oppsett av Wordpress Wordpress har blitt en veldig populær publiseringsplattform for websider. Uten særlige tekniske ferdigheter kan man sette opp profesjonelle

Detaljer

5XQH.MHOYLN )URQW3DJHRJGDWDEDVHU

5XQH.MHOYLN )URQW3DJHRJGDWDEDVHU 5XQH.MHOYLN )URQW3DJHRJGDWDEDVHU Gyldendal Norsk Forlag ASA 2000 Dette materiellet er ment som et tillegg til læreboken FrontPage 2000 ISBN 82-05-26370-1. Tillegget bør leses i sammenheng med kapittel

Detaljer

Behandling av dokumenter i Microsoft Word. En rask innføring

Behandling av dokumenter i Microsoft Word. En rask innføring Behandling av dokumenter i Microsoft Word En rask innføring Forord Denne guiden er utformet av Orakeltjenesten ved Dragvoll som en enkel innføring i grunnleggende funksjoner i Word for å hjelpe studenter

Detaljer

Communicate SymWriter: R5. Brett og knapper

Communicate SymWriter: R5. Brett og knapper Communicate SymWriter: R5. Brett og knapper Innhold R5.1 Hva er et brett - en oversikt...2 R5.2 Lage et brett....................................................2 R5.3 Endre utseendet på et brett....6

Detaljer

Side 1. Sniggabo CMS brukermanual rev. 2

Side 1. Sniggabo CMS brukermanual rev. 2 Side 1 Sniggabo CMS brukermanual rev. 2 INNHOLDSFORTEGNELSE Logg inn... 3 Menylinje... 3 Artikkelliste... 4 Ny artikkel... 5 Aktiviteter... 8 Rediger aktivitet... 9 Dokumenter... 9 Nytt dokument... 10

Detaljer

Innhold. Bruker manual BlueprintEasy PDF tagger. versjon: P a g e

Innhold. Bruker manual BlueprintEasy PDF tagger.   versjon: P a g e Innhold INNHOLD... 1 INTRODUKSJON... 2 INSTALLASJON... 2 LAGE PRODUKT LISTER / BILDER... 2 VELG FIL LOKASJON (DIRECTORY)... 2 LAGE BILDER / IKONER / SYMBOLER... 2 EXCEL ARK / PRODUKT LISTE... 3 WEB LINK

Detaljer

Innhold. Bruker manual BlueprintEasy PDF tagger. versjon: P a g e

Innhold. Bruker manual BlueprintEasy PDF tagger.  versjon: P a g e Innhold INNHOLD... 1 INTRODUKSJON... 2 INSTALLASJON... 2 LAGE PRODUKT LISTER / BILDER... 2 VELG FIL LOKASJON (DIRECTORY)... 2 LAGE BILDER / IKONER / SYMBOLER... 2 EXCEL ARK / PRODUKT LISTE... 3 WEB LINK

Detaljer

NY PÅ NETT. Enkel tekstbehandling

NY PÅ NETT. Enkel tekstbehandling NY PÅ NETT Enkel tekstbehandling Innholdsfortegnelse Tekstbehandling... 3 Noen tips for tekstbehandling...3 Hvordan starte WordPad?... 4 Wordpad...4 Wordpad...5 Forflytte deg i dokumentet... 7 Skrive og

Detaljer

Webutvikling. Innholdsfortegnelse per Introduksjon til webutvikling. 2. HTML og CSS. 3. Strukturere websider

Webutvikling. Innholdsfortegnelse per Introduksjon til webutvikling. 2. HTML og CSS. 3. Strukturere websider Webutvikling Innholdsfortegnelse per 22.8.2016 1. Introduksjon til webutvikling Utviklingsmiljø Ditt første prosjekt Lage nettsiden med HTML Knytte til et stilark Lage side nummer to Koble hovedside og

Detaljer

IST Skole Vurdering - Foresatt

IST Skole Vurdering - Foresatt IST Skole Vurdering - Foresatt Velkommen til en ny skole! IST tar nå steget fra kun å levere programvare til å forenkle og utvikle alle skolens funksjoner. Våre løsninger tar hånd om prosessene fra den

Detaljer

Brukerveiledning mal for masteroppgaver ved Høgskolen i Hedmark

Brukerveiledning mal for masteroppgaver ved Høgskolen i Hedmark Brukerveiledning mal for masteroppgaver ved Høgskolen i Hedmark 1. Kontakt spørsmål og svar Dette er en generell veiledning for oppgaveskriving for de som bruker Microsoft Word. Veiledningen er særlig

Detaljer

Manual MicroBuild.no Engineering 24082012

Manual MicroBuild.no Engineering 24082012 24082012 Innholdsfortegnelse: 1. Registrering som bruker 2. Opprette prosjekt og åpne prosjekt 3. Legge til brukere i et prosjekt 4. Brukerinnstillinger 5. Designe skjermbilde - Fjerne og legge til strukturer

Detaljer

Installasjonsveiledning DDS-CAD 7.3

Installasjonsveiledning DDS-CAD 7.3 Installasjonsveiledning DDS-CAD 7.3 - Installasjonsveiledning versjon 7.3 Vær oppmerksom på: USB-dongler ikke skal plugges i maskinen før programmet er installert. Før installasjonen: Dette hefte beskriver

Detaljer

ActiveBuilder Brukermanual

ActiveBuilder Brukermanual ActiveBuilder Brukermanual Forfatter: TalkActive I/S Dato: Juni 2004 Versjon: R. 1.01 Språk: Norsk Copyright 2004 - Talk Active - all rights reserved. Innhold: 1. INNLEDNING...2 2. HURTIGSTART...3 3. OPPBYGGINGEN

Detaljer

Komme i gang med Skoleportalen

Komme i gang med Skoleportalen Generell brukerveiledning for Elevportalen Denne elevportalen er best egnet i nettleseren Internett Explorer. Dersom du opplever kompatibilitets-problemer kan det skyldes at du bruker en annen nettleser.

Detaljer

Brukerveiledning WISEflow

Brukerveiledning WISEflow Brukerveiledning WISEflow Pålogging WISEflow s.2 Installasjon og test av Flowlock- browser s.4 Innlevering av oppgaver/hjemmeeksamen via WISEflow s. 6 Hvordan slette cookies? s. 9 1 Pålogging WISEflow

Detaljer

Bytte til PowerPoint 2010

Bytte til PowerPoint 2010 I denne veiledningen Microsoft PowerPoint 2010 ser helt annerledes ut enn PowerPoint 2003, så vi har laget denne veiledningen for å gjøre det så enkelt som mulig for deg å lære forskjellene. Les videre

Detaljer

Lage klubbens webside i Rotary med verktøyet Webwiz 2.0

Lage klubbens webside i Rotary med verktøyet Webwiz 2.0 Lage klubbens webside i Rotary med verktøyet Webwiz 2.0 Versjon 1.0 av DICO 2250 25.04.2011 Det å lage en webside uten å ha kjennskap til dette fra før, kan virke vanskelig, men ikke fortvil. Det går alltid

Detaljer

Presentasjon. Datakortets modul 6 avgrenser ferdigheter i praktisk bruk av presentasjonsverktøy. Stadig flere ser mulighetene som ligger i

Presentasjon. Datakortets modul 6 avgrenser ferdigheter i praktisk bruk av presentasjonsverktøy. Stadig flere ser mulighetene som ligger i 92 Datakortets modul 6 avgrenser ferdigheter i praktisk bruk av presentasjonsverktøy. Stadig flere ser mulighetene som ligger i Presentasjon presentasjonsverktøyet PowerPoint når det gjelder presentasjon

Detaljer

Dobbelklikk på program-ikonet!

Dobbelklikk på program-ikonet! En hjemmeside kan lages i hvilket som helst enkelt tekstbehandlingsprogram (som f.eks. Notepad i Windows eller EnkelTekst på en Mac). Forutsetningen for å kunne gjøre dette er at man behersker html. Html

Detaljer

Kjenner du alle funksjonene på tastaturet?

Kjenner du alle funksjonene på tastaturet? Kjenner du alle funksjonene på tastaturet? Guide: Tastaturet Av Bjørn André Hagen 30. Januar 2008 17:45 Kilde: Tastatur layout Et tastatur har mange knapper man ikke bruker hver dag, vi skal prøve å forklare

Detaljer

Innhold. Bruker manual BlueprintEasy PDF tagger. versjon: P a g e

Innhold. Bruker manual BlueprintEasy PDF tagger.  versjon: P a g e Innhold INNHOLD... 1 INTRODUKSJON... 2 INSTALLASJON... 2 LAGE PRODUKT LISTER / BILDER... 2 VELG FIL LOKASJON (DIRECTORY)... 2 LAGE BILDER / IKONER / SYMBOLER... 2 EXCEL ARK / PRODUKT LISTE... 3 WEB LINK

Detaljer

ff Brukermanual ebladadmin Pro

ff Brukermanual ebladadmin Pro ebladadmin ebladadmin er en nettbasert publiseringsløsning for publisering av eblad (digitale magasiner, publikasjoner, DM, årsrapporter, tilbudsaviser, kataloger, produktpermer, bruksanvisninger, mm)

Detaljer

Digitale eller trykte utgaver av håndboken kan i sin helhet distribueres fritt til alle brukere av EPiServer CMS.

Digitale eller trykte utgaver av håndboken kan i sin helhet distribueres fritt til alle brukere av EPiServer CMS. Copyright Denne håndboken er beskyttet av opphavsrettsloven. Endring av innhold eller delvis kopiering av innhold er ikke tillatt uten tillatelse fra opphavsrettsinnehaveren.. Digitale eller trykte utgaver

Detaljer

OBLIG 1 - WEBUTVIKLING

OBLIG 1 - WEBUTVIKLING OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med funksjonalitet / bruk Uoversiktlig side For

Detaljer

Web Computing AS Brukerveiledning WebWiz 3.0. WebWiz 3.0. Brukerveiledning

Web Computing AS Brukerveiledning WebWiz 3.0. WebWiz 3.0. Brukerveiledning WebWiz 3.0 Brukerveiledning 1 Innholds fortegnelse advanced mode 1.0 Innledning s 3 2.0 Innlogging s 4 3.0 Legge ut nyheter s 6 3.1 Hvordan legge inn tekst s 6 3.2 Hvordan legge inn bilder s 9 3.3 Hvordan

Detaljer

Opprydding og Vedlikehold av Windows

Opprydding og Vedlikehold av Windows Opprydding og Vedlikehold av Windows Innledning Hvis du synes at PC en går tregt kan det være på sin plass med en diskopprydding. Windows selv og de fleste programmer som arbeider under Windows benytter

Detaljer

Bruksanvisning for administrasjon av www.lillehammerfk.no

Bruksanvisning for administrasjon av www.lillehammerfk.no Bruksanvisning for administrasjon av www.lillehammerfk.no Målet med lillehammerfk.no er å være en levende nettside for hele klubben. For å få til det, må de enkelte lagene selv legge til innhold på nettsiden.

Detaljer

WordPress. Brukerveiledning. Kjære kunde. Innlogging:

WordPress. Brukerveiledning. Kjære kunde. Innlogging: Brukerveiledning WordPress Sist oppdatert: 26.02.2014 Kjære kunde Her er en liten guide for å hjelpe deg gjennom det grunnleggende i Wordpress. Denne veilederen vil ta deg gjennom: Innlogging - s.1 Kontrollpanel

Detaljer

AUTOCAD 2008. Artikkelserie. Fra Color til Named og omvendt

AUTOCAD 2008. Artikkelserie. Fra Color til Named og omvendt Odd-Sverre Kolstad AUTOCAD 2008 Artikkelserie Fra Color til Named og omvendt Gyldendal Norsk Forlag AS 2007 Omslag Marianne Thrap Redaktør: Rune Kjelvik Formgiver: Rune Kjelvik 1. opplag ISBN 978-82-05-37108-8

Detaljer

Brukermanual for lr.no

Brukermanual for lr.no Brukermanual for lr.no mars 2009 - revidert november 2011 Innhold 1 Introduksjon... 2 2 Pålogging... 3 3 Medlem... 4 3.1 Legge til kommentarer... 4 4 Ansatt...... 5 4.1 Legge til nyhet... 5 4.2 Legge til

Detaljer

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress Sist oppdatert 05.06.2015 Innholdsfortegnelse 1. Hva er Wordpress?... 3 2. Hvordan logger jeg inn i kontrollpanelet?...

Detaljer

Bruksanvisning for publisering med ez publish 3.7.5

Bruksanvisning for publisering med ez publish 3.7.5 Bruksanvisning for publisering med ez publish 3.7.5 Bakgrunn for oppgraderingen Norsk Fysioterapeutforbund har oppgradert nettstedet www.fysio.no. Det er gått over tre år siden NFF lagde det nåværende

Detaljer

Businesscatalyst PAGES

Businesscatalyst PAGES Businesscatalyst 1. Gå til http://www.businesscatalyst.com/ og login med brukernavn og passord. Du kommer da til administrasjonspanelet der du kan organisere nettsiden. Her kan du også se hvordan nettsiden

Detaljer

Bruk av Corepublish bruksanvisning for avdelingene

Bruk av Corepublish bruksanvisning for avdelingene Bruk av Corepublish bruksanvisning for avdelingene 1. Å logge på Hent opp nettstedet din avdeling Åpne en ny fane eller vindu og hent opp publiseringsverktøyet Corepublish, http://www.fo.no/corepublish/

Detaljer

Dette er nytt i GM EPC

Dette er nytt i GM EPC Dette er nytt i GM EPC GMs neste versjon av EPC har utallige nye funksjoner for å gjøre det raskere og enklere å finne den riktige delen. Velg Brukerhåndbok på Hjelp-menyen i EPC for å få nærmere instruksjoner

Detaljer

Intro til WWW, HTML5 og CSS

Intro til WWW, HTML5 og CSS Intro til WWW, HTML5 og CSS Håkon Tolsby 20.08.2015 Håkon Tolsby 1 World Wide Web Webserver: Programvare som distribuerer websider og/eller maskin hvor programmet kjører Webbrowser (nettleser): Program

Detaljer

Utvidet brukerveiledning

Utvidet brukerveiledning Utvidet brukerveiledning for Akershus fylkeskommunes statistikkverktøy http://statistikk.akershus-fk.no Utarbeidet av Cathrine Bergjordet, analysestaben, AFK Sist oppdatert 14/3 2014 Viktige begreper og

Detaljer

Håkon Tolsby. 25.08.2014 Håkon Tolsby

Håkon Tolsby. 25.08.2014 Håkon Tolsby HTML5 og CSS Håkon Tolsby 25.08.2014 Håkon Tolsby 1 En webside min webside en html5 side dett er min første

Detaljer

Grunnleggende om websider og HTML-kode

Grunnleggende om websider og HTML-kode Grunnleggende om websider og HTML-kode Html er et språk / en standard som brukes for å gi instrukser til nettlesere om hvordan ulike elementer på en webside skal fortolkes og presenteres for en sluttbruker.

Detaljer

EndNote referansehåndteringsprogram. HiVe biblioteket

EndNote referansehåndteringsprogram. HiVe biblioteket EndNote referansehåndteringsprogram HiVe biblioteket Mappestruktur Mine dokumenter EndNote Bibliotek.enl Bibliotek.Data Styles APA 6th HiVe.ens 2 Om EndNote EndNote brukes til å holde orden på litteraturreferanser.

Detaljer

Brukerveiledning WordPress. Innlogging:

Brukerveiledning WordPress. Innlogging: Brukerveiledning WordPress Her er en liten guide for hjelpe deg gjennom det grunnleggende i Wordpress. Denne veilederen vil ta deg gjennom: Innlogging Lage en side Lage et innlegg Innlogging: For å logge

Detaljer

Brukerveiledning for http://nyhetsbrev.us/ For å opprette en ny bruker vennligst send en epost til post@wam.no

Brukerveiledning for http://nyhetsbrev.us/ For å opprette en ny bruker vennligst send en epost til post@wam.no Brukerveiledning for http://nyhetsbrev.us/ For å opprette en ny bruker vennligst send en epost til post@wam.no Innlogging 3.. Skriv inn url-adressen til nyhetsbrev.us i nettleseren. Du kan eventuellt skrive

Detaljer

PBL Barnehageweb. Brukerveiledning

PBL Barnehageweb. Brukerveiledning PBL Barnehageweb Brukerveiledning 1 1. Innledning Gratulerer med valget av nye PBL Barnehageweb! Med PBL Barnehageweb skal det være enkelt å lage en brukervennlig, moderne og profesjonell nettside for

Detaljer

versjon 1.1 Brukermanual

versjon 1.1 Brukermanual Side 1 05.11.2004 versjon 1.1 Brukermanual Side 2 05.11.2004 Beskrivelse av IKT-verktøy for strukturering og organisering av referanser til store mengder informasjon. GrandView er et program for strukturering

Detaljer

Importere referanser fra databaser

Importere referanser fra databaser Importere referanser fra databaser Databaser EndNote Sist oppdatert 19. november 2014 1 Innhold 1. Importere referanser... 3 1.1. Apple/IOS... 3 2. Importere referanser fra Oria... 4 3. Importere referanser

Detaljer

Bruk av OpenOffice.org 3 Writer

Bruk av OpenOffice.org 3 Writer Bruk av OpenOffice.org 3 Writer OpenOffice.org 3 er et gratis og bra alternativ til Microsoft Office (Word, Excel, Power Point osv.). 1 Oppstart av OpenOffice.org Trykk på Start etterfulgt av Programmer

Detaljer

Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted

Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted 1 Åpne Internett explorer. Gå til http://www.tana.kommune.no/admin/ Det enkleste er å lage en snarvei til skrivebordet. Når du har kommet

Detaljer

Administrasjon av kataloger - Oversikt over innstillinger på kataloger

Administrasjon av kataloger - Oversikt over innstillinger på kataloger Administrasjon av kataloger - Oversikt over innstillinger på kataloger COPYRIGHT Syzweb AS 2010 Alle Rettigheter Reservert Side 1 av 10 Innledning... 3 Hva er en katalog?... 4 Katalogtreet... 4 Opprette

Detaljer

Brukermanual. Support: Skytterkontoret Tlf: 02419, tast 2 support@dfs.no http://www.dfs.no/support. Velkommen til EPI-Server 7.

Brukermanual. Support: Skytterkontoret Tlf: 02419, tast 2 support@dfs.no http://www.dfs.no/support. Velkommen til EPI-Server 7. Velkommen til EPI-Server 7.5 (CMS) Levert av Skytterkontoret. EPI-Server 7.5 (CMS 7.5) er et publiseringssystem som gjør det enkelt for deg å oppdatere innholdet på dine Internettsider. I denne brukerdokumentasjonen

Detaljer

Brukerdokumentasjon PIM Bohus

Brukerdokumentasjon PIM Bohus Brukerdokumentasjon PIM Bohus Til Fra Bohus WebOn AS Dato: 10.08.2105 Vår ref: Camilla Hetty Osa Telefon: 41 56 51 59 E-post: camilla@webon.net Ver: 2.0 WebOn AS, Wirgenes vei 8 B, P.O. Box 2198, N-3103

Detaljer

Brukerveiledning for programmet HHR Animalia

Brukerveiledning for programmet HHR Animalia Brukerveiledning for programmet HHR Animalia Versjon 1.0 Rakkestad, 26.03.2014 Innholdsfortegnelse 1. Introduksjon... 3 2. Installasjon og oppgradering... 3 2.1 Nedlasting... 3 2.2 Oppdatering av operativsystem

Detaljer

Velkommen. til. en læringsstøttesystem som vil bli brukt i undervisningen

Velkommen. til. en læringsstøttesystem som vil bli brukt i undervisningen Velkommen til en læringsstøttesystem som vil bli brukt i undervisningen En enkel veiledning for studenter slik at de kan starte opp med å bruke it's learning. Internettadressen til it's learning er: http://www.its-learning.com

Detaljer

SymWriter: R6 Innstillinger, preferanser og verktøylinjer

SymWriter: R6 Innstillinger, preferanser og verktøylinjer SymWriter: R6 Innstillinger, preferanser og verktøylinjer Innhold R6.1 Startinnstillinger og utseende...3 R6.2 Tekst og bilder...................................................4 R6.3 Tale og staving...5

Detaljer

Huldt & Lillevik Lønn endringer

Huldt & Lillevik Lønn endringer Innholdsfortegnelse Huldt & Lillevik Lønn endringer... 2 Arbeidsområdet... 2 Endre størrelse på arbeidsområdet... 3 Verktøylinjen... 3 Bruke søkebilder... 3 Endring i skjermbilder... 5 Navigering i skjermbilder...

Detaljer

Kom i gang med Stata for Windows på UiO - hurtigstart for begynnere

Kom i gang med Stata for Windows på UiO - hurtigstart for begynnere Kom i gang med Stata for Windows på UiO - hurtigstart for begynnere Hensikten med denne introduksjonen er å lære hvordan man kommer raskt i gang med grunnleggende funksjoner i Stata. Teksten er tilpasset

Detaljer

INF1040 Oppgavesett 4: CSS

INF1040 Oppgavesett 4: CSS INF1040 Oppgavesett 4: CSS (Kapittel 5) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der nøyaktig ett

Detaljer

(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26.

(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26. (X)HTML, CSS og JavaScript Grunnleggende programmering i Java Monica Strand 26. november 2007 Gr. leggende Java 26. november 2007 1 HTML HTML = Hyper Text Markup Language Strukturerer tekstinnhold HTML

Detaljer

Fasit teorioppgaver. Kapittel 1: Bli kjent med Word. Oppstart. Maksimering. Hva skjer ved oppstart av Word?

Fasit teorioppgaver. Kapittel 1: Bli kjent med Word. Oppstart. Maksimering. Hva skjer ved oppstart av Word? OK Fasit teorioppgaver Kapittel 1: Bli kjent med Word Oppstart Hva skjer ved oppstart av Word? Det sist brukte dokumentet åpnes automatisk Et nytt tomt dokument åpnes Ingen dokumenter åpnes Maksimering

Detaljer

Hurtigguide. Joint Collaboration AS Drammensveien 173-177 0277 Oslo Tlf. 22 50 45 50 Fax. 22 50 35 00 www.joint.no firmapost@joint.

Hurtigguide. Joint Collaboration AS Drammensveien 173-177 0277 Oslo Tlf. 22 50 45 50 Fax. 22 50 35 00 www.joint.no firmapost@joint. Hurtigguide Joint Collaboration AS Drammensveien 173-177 0277 Oslo Tlf. 22 50 45 50 Fax. 22 50 35 00 www.joint.no firmapost@joint.no Org. nr. 983443117 NO INNHOLD 1 Hvorfor er det ulik farge og utseende

Detaljer

Brukerveiledning for student skoleeksamen HIST Oppdatert 27. oktober 2014

Brukerveiledning for student skoleeksamen HIST Oppdatert 27. oktober 2014 Brukerveiledning for student skoleeksamen HIST Oppdatert 27. oktober 2014 1 Innhold Innledning Pålogging Din oversikt over prøver og eksamener Valg av språk og skriftstørrelse m.m Besvare eksamen med sikker

Detaljer

Kjøre Wordpress på OSX

Kjøre Wordpress på OSX Kjøre Wordpress på OSX Alt etter hva du ønsker å bruke Webserveren til er det flere måter å gjøre dette på. Ønsker du kun en side som skal dele sider du lager manuelt, med PHP, GD etc eller med server

Detaljer

Layout og publisering

Layout og publisering Layout og publisering Målet for denne kursomgangen er at du skal: - Bli kjent med menyene i ArcMap - Gjøre enkle forandringer i et eksisterende prosjekt - Lage et kart basert på prosjektet, som kan skrives

Detaljer

Manusnett - brukerveiledning for forfatter

Manusnett - brukerveiledning for forfatter Manusnett - brukerveiledning for forfatter Innholdsfortegnelse Innholdsfortegnelse...1 Innledning...2 Innlogging...3 Sende inn et nytt manus...5 Behandle vurderte manus...11 Rettelser i Word...15 Endring

Detaljer

Installasjonsveiledning. DDS-CAD ByggMester

Installasjonsveiledning. DDS-CAD ByggMester Installasjonsveiledning DDS-CAD ByggMester Installasjonsveiledning versjon 7 Vær oppmerksom på: USB-dongler ikke skal plugges i maskinen før programmet er installert. Før installasjonen: Dette hefte beskriver

Detaljer

infotorg Enkel brukermanual

infotorg Enkel brukermanual infotorg Enkel brukermanual Innhold Innledning... 3 Logg inn... 3 Feilmelding... 3 Sperret bruker / Glemt passord... 4 Bytt passord... 5 Innstillinger og oppstartsregister... 5 Søk og Svar... 6 Velg tjeneste/register...

Detaljer

Brukerveiledning til personkortet

Brukerveiledning til personkortet Brukerveiledning personkort-versjon 10_150612.doc Brukerveiledning til personkortet Versjon 10 Oppdatert 15.6.2012 Av Odd-Arne Olsen, Ståle Liljedal, Bent Svinnung, Bjørn-Håkon Solberg, Jan Höper og Poul

Detaljer