TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert 17.02.2017 < >
2 Kapittel 1 Introduksjon til webutvikling 1.1 Hva husker du? Teori: Gå sammen to og to og besvar følgende spørsmål: 1. Hva er HTML en forkortelse for? 2. Hvilke seksjoner finner vi i et HTML-dokument (se nedenfor)? <!DOCTYPE html> <html> <head> </head> <body> </body> </html> <title> Vår første nettside</title> <meta charset="utf-8" /> <h1>velkommen til vår første nettside</h1> 3. I hvilken seksjon finner vi de taggene som blir synlig i nettleservinduet? 4. Hva gjør disse taggene: 1. <h1> </h1> 2. <p> </p> 5. Hvorfor bruker vi stilark (CSS)? 6. I hvilken seksjon plasserer vi metadata? Og hva er egentlig metadata? 7. <!DOCTYPE html> står først i HTML-dokumentet hva gjør denne taggen?
3 1.2 Dyreadopsjon html repetisjon Sørg for å opprette en undermappe i mappen Webutvikling/Kapittel1 som du kaller dyreadopsjon. Kopier følgende bildefiler hest.png, katt.png og hund.png inn i mappen dyreadopsjon. Opprett en oppstartsfil i mappen som du kaller index.html. Prøv å huske hvilke tagger du trenger (ved behov se sist i oppgaven) for å få resultatet under.
4 Opprett en ny side som heter katt.html med følgende innhold: Opprett en ny side som heter hund.html med følgende innhold Opprett siden hest.html med følgende innhold:
5 Endre i index.html slik som under. Legg inn hyperkoplinger til de html-filene du nettopp laget. Opprett stilarket stil.css og legg inn en kopling til dette stilarket i alle html-filene. Slik skal resultatet bli:
6 Tagger du vil få bruk for: Tagg <!DOCTYPE html> <html></html> <head></head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="filnavn.css" /> <body></body> Forklaring HTML5-standard Start og slutt på koden Seksjon med info til nettleser og søkemotorer Legge inn tittel i arkfanen på hver fil Tegnsett Sette inn lenke til et stilark Seksjon som blir synlig <h1></h1 <p></p> <img src="hest.png"> Nytt avsnitt Sette inn bilde <a href="hest.html">klikk her</a>
7 Kapittel 2 HTML og CSS 2.1 Pokemon GO 1. Opprett en mappe i kapittel1 som du gir navnet pokemon 2. Opprett en undermappe bilder i mappen pokemon I denne mappa legger du bilder av følgende Pokemon: Du skal også finne logoen til Pokeman GO og legge i bildemappa. Dette bildet skal ha navnet logo.jpg. 3. Opprett en ny fil som du lagrer i mappen pokemon med navnet index.html, og skriv inn følgende kode: Taggen <button> setter inn en menyknapp. Når du så også setter inn taggen <a>, sørger du for at denne knappen fungerer som en hyperlink slik at du kan hoppe til en side kalt pikachu.html.
8 Opprett en ny fil i samme mappe som du gir navnet pikachu.html, og skriv inn følgende kode: 4. Sørg for at begge filer er lagret og forhåndsvis begge i nettleseren. Du skal nå kunne bruke menyknappene for å hoppe fram og tilbake mellom sidene. 5. Du skal så opprette én side per pokemon og sørge for at det er en menyknapp for hver side i alle sider, inkludert index.html. Det betyr at taggen <body> i hver eneste fil skal inneholde følgende, bytt ut ** ** med riktig tekst:
9 6. Test at du kan hoppe fritt mellom alle sider. Du skal nå formatere samtlige sider og sørge for at bildene får en bredde på 200 px og at de får en ramme rundt med rødfargen fra pokemonballen. Alt innhold skal rykkes inn 20 piksler mot høyre. 7. Velg Fil > Ny i editoren og lagre som stilarkfil.css. 8. Skriv så inn følgende kode:
10
11 Kapittel 3 Strukturere websider 3.1 Reisebyrået «Ryk og Reis» Bruk kapittel 3 til oppslag for å finne nødvendige koder. Du skal lage et nettsted for et reisebyrå. Nettstedet skal presentere flere ulike reisemål med både tekst og bilde. 1. Opprett en mappe kalt reisebyrå i mappen kapittel3. 2. Opprett to undermapper, bilder og filmer. 3. I mappen bilder legger du bildene kajakk.jpg, skihopp.jpg, new york4.jpg og rovinj_by.jpg. 4. I mappen filmer legger du videotest.ogg. 5. Opprett en ny fil i notepad++ som du gir navnet index.html. 6. Skriv inn nødvendig kode for å få vist følgende innhold (husk å bruke tittellinjen): Som du ser, er deler av teksten formatert, og du trenger derfor et stilark. 7. Opprett en ny fil som du gir navnet feriestil.css, og skriv inn nødvendig kode slik at din index.html blir lik eksemplet over. 8. Gå så til index.html og sett inn bildene fra mappen bilder under teksten du allerede har. Bildene skal ha hvert sitt attributt slik at når du peker på bildet, kommer følgende tekster frem (tips: title): a. Norgesferie b. Skiferie i Sveits c. Storbyferie i New York d. Badeferie i Rovinj 9. Skriv inn nødvendig kode i stilarket ditt slik at bildene: - får en høyde på 300 piksler - får en felles bildetekst som sier «Pek på bildene for å få litt informasjon. Klikk på bildet for å gå til en side for å lese mer om reisemålet».
12 10. Sørg for at du står i index.html og legg til nødvendig kode slik at du får vist følgende tekst under bildene: 11. Legg så til kode slik at du får en strek før resten av teksten og avspilling av filmen videotest.ogg: 12. Endre igjen i stilarket slik at du får følgende resultat når du forhåndsviser index.html i nettleseren din:
13 Du skal nå sørge for at hvert bilde blir en hyperlink til en side som har informasjon om valgt destinasjon. 13. Lag en side for hver destinasjon og navngi de for eksempel slik: a. norge.html b. sveits.html c. newyork.html d. rovinj.html 14. Sørg for at hver av disse sidene har en mulighet for å komme tilbake til index.html og at de inneholder en tabell med informasjon om ulike reiser på valgt destinasjon. Finn på egne data, bruk gjerne internett for å finne relevant informasjon. 15. Formater tabellen i stilarket slik at den likner mest mulig på eksemplet som er vist under:
14 Kapittel 4 Formgi nettsider 4.1 Megafunpark utvidelse Før du går i gang er det en god ide å ha utført eksempelet «Interaktivtet» side 87-89 Oppgaven baserer seg på at du har utført oppgave Megafunpark s 100-102 Finn noen bilder av attraksjoner som kan brukes som illustrasjon til «The raptor» og «Dizzyrun» og lagre i kapittel4 Bruk semantisk tag og lag en meny som vist i eksempelet Interaktivitet (starter nederst s 87) Bakgrunnsfarge skal være lik tekstfargen på <h1> Når du peker på knappen, skal bakgrunnsfargen endres til fargen på <h2> Legg også på nødvendig kode i stilarket slik at man kun ser innhold til det menyvalget du har klikket på Bruk bildene, angi størrelse, ramme og legg på skyggeeffekter som vist på s. 105 Finn gjerne skyggefarge på https://www.w3.org/tr/css3-color/#svg-color
15 Kapittel 5 Mer om layout og design 5.1 Hvordan lage midtstilt nettsted som kan skaleres Hoveddelen skal utvides etter hvert som den fylles med innhold. Nettsiden skal alltid være midstilt uansett zoomverdi. Menyen skal lages som en unordered liste. 1. Opprett mappen layout i mappen kapittel5 2. Åpne malfila og lagre som index.html i denne mappa 3. Skriv inn følgende kode i index.html: Alt innhold på nettsiden legges inne i en <div> som vi gir navnet «wrapper» Inne i wrapperen ligger <header>, <nav> og <main> <ul> vil utgjøre menyen som vist over
16 4. Opprett en mappe bilder i mappen layout 5. Lagre bildet logo.png i bildemappen 6. Opprett en ny fil og gi den navnet stil.css. Husk å endre i index.html slik at den refererer til riktig stilfil 7. Skriv inn koden under i stil.css for å formatere «wrapperen» - den delen av koden som sørger for nettsidens størrelse og posisjonering 1 2 3 4 5 6 Forklaring: 1. Vi vil benytte flexbox som er den nye måten å posisjonere innhold på i CSS 2. Vi vil ha innholdet i «wrapperen» i hver sin rad (ikke kolonne) 3. Vi vil ha radene under hverandre 4. Heltrukken kantlinje, rød farge 5. Bredden på nettsiden er 970px 8. Skriv inn koden under i stil.css for å formatere <header>-del altså den delen som inneholder logoen Forklaring: 1 2 1. Vi vil benytte heltrukken kantlinje rundt logoen 2. Vi vil at størrelsen på logoen skal være 100% (=970 px i dette tilfelle) når nettsiden åpnes
17 9. Skriv inn koden under i stil.css for å formatere <nav>-delen, altså den delen om inneholder menyen Forklaring: 1 2 1. Vi vil benytte heltrukken kantlinje rundt menyen 2. Vi vil at størrelsen på menyen skal være 100% (=970 px i dette tilfelle) når nettsiden åpnes Skriv inn koden under i stil.css for å formatere den delen av nettsiden hvor innholdet skal være. Forklaring: 1 2 1. Flex: auto medfører at <main> endrer størrelse avhengig av innholdet 2. Uansett mengde innhold skal høyden være minimum 800 px 10. Vi skal nå formatere punktlisten slik at den fungerer bedre som en meny. Skriv inn koden under i stil.css. 1 2 3 Forklaring: 1. Fjerner kulepunkter 2. Fjerner marger 3. Sørger for at menyen dekker hele bredden av <nav>-delen
18 11. Vi skal nå formatere menyen videre. Merk at dette kun vil gjelde for punktlistelementer som fungerer som en hyperkobling (<a>). Husk at vi leser fra høyre mot venstre. Skriv inn koden som vist under i stil.css Forklaring: 1 2 3 4 5 1. Listen holder seg innenfor <nav>delen 2. Fjerner tekstformatering her sørger vi for at menyvalget ikke blir understreket, noe som ellers er standard for et <a>-element 3. Farge på menyen (http://www.w3schools.com/colors/c olors_names.asp) 4. Tekstfarge sort, størrelse 30px 5. Setter avstand 10px til kantlinja (topp, høyre, bunn og venstre) 1 1 2 Forklaring: 1. Når vi tar musepeker over et menyvalg, endres fargen til angitt hexakode (rødfargen fra logoen) Forklaring: 1. Sørger for at menyen blir horisontal 2. Hvert menyvalg dekker 25% av total størrelse som er tilgjengelig 12. Sørg for at du står i index.html i editoren. Endre <h1>-teksten til «Bestilling». Velg Fil > Lagre som og gi den navnet bestille.html Endre så <h1>-teksten til «Kontakt oss» og lagre som kontaktoss.html. Endre så <h1>-teksten til «Vareutvalg» og lagre som vareutvalg.html.
19 Du vil nå ha følgende filer i mappen layout: 5.2 Håndtere innhold som går utover skjermens høyde Løsning 1 (oppgave midstilt nettside): - Main utvides ved økt innhold vil gå utover det som vises i nettleservinduet - For å lese innhold som ikke vises, benyttes scrollbaren i nettleseren
20 Løsning 2: - Hele main vil alltid vises i nettleservinduet - Dersom innhold overskrider størrelsen på main, blir det satt inn en scrollbar i main Utfør følgende endringer i selectoren main i stilarket: main { border-style: solid; flex: auto; height: 820px; overflow-y:auto; } Sett fast størrelse på main Vis scrollbar dersom innholdet overstigerer størrelsen på main
21 5.3 Sportsforretningen Intersalg Du er ansatt i sportsforretningen Intersalg og har fått i oppdrag å lage et nytt nettsted for forretningen. Bruk kunnskapen du nå har tilegnet deg samt kapittel 1-5 i boka, og utfør følgende oppgaver: Opprett et nytt webområde og kall det for intersalg Opprett en hovedside hvor du kort presenterer firmaet Intersalg Bruk gjerne layoutoppsettet som vist på side 126-128 i boka Webutvikling Gi websiden tittelen Velkommen til Intersalg best på sportsutstyr. Lagre den som index.html På hovedsiden skal det være en enkel meny med følgende valg: Kontaktinformasjon, Om oss, Våre produkter og Samarbeidspartnere Lag gjerne menyen som vist i boka Webutvikling side 130-131 eller som vist i oppgave 5.1. Opprett et stilark hvor du eksempelvis formaterer valgt meny. Et annet eksempel er beskrivelse av skrifttyper som vist på side 95-97 i boka Webutvikling. Opprett videre en ny webside hvor du oppgir kontaktinformasjon til de ulike ansatte i forretningen. Lagre websiden som kontakt.html Lag en hyperlink til kontaktsiden fra menypunktet på hovedsiden Lagre også ferdig de andre websidene i webområdet (om oss, våre produkter og samarbeidspartnere), og opprett hyperlinker til disse fra menyen i samtlige websider Finn selv på tekst, filnavn og titler. Legg til punktmerkede og nummererte lister der det er naturlig. Testkjør websidene og sjekk at hyperlinkene fungerer Lag et banner for sportsbutikken i valgt bildebehandlingsprogram og legg denne på toppen av alle websidene Sett inn bilder og illustrasjoner som passer til en sportsbutikk, på de ulike websidene. Bruk gjerne posisjoneringsteknikken floating for plassering av bilder se i boka Webutvikling side117-188. Forhåndsvis nettstedet i en nettleser
22 5.4 Malerforretningen Fargeklatten Du er ansatt i malerforretningen Fargeklatten og har fått i oppdrag å lage et nytt nettsted for forretningen. Bruk kunnskapen du nå har tilegnet deg samt kapittel 1-5 i boka, og utfør følgende oppgaver: Opprett et nytt webområde og kall det for fargeklatten Bruk gjerne layoutoppsettet som vist på side 126-128 i boka Webutvikling Opprett en hovedside hvor du kort presenterer malerforretningen Fargeklatten Gi websiden tittelen Velkommen til Fargeklatten vi setter farge på tilværelsen, og lagre den som index.html På hovedsiden skal det være en meny med følgende valg: Kontaktinformasjon, Om oss, Våre produkter og Fargekart Lag gjerne menyen som vist i boka Webutvikling s 130-131 eller som vist i oppgave 5.1 Opprett et stilark hvor du eksempelvis formaterer valgt meny. Andre eksempler er formatering av tekst side 93-97 Opprett de aktuelle websidene og finn selv på aktuell tekst, filnavn og titler Lag hyperlinker til websidene fra menyen slik at linkene fungerer på alle nettsider Testkjør websidene og kontroller at hyperlinkene fungerer På nettsiden Våre produkter skal du benyttet en tabell - se i boka Webutvikling side 67-69 for tips til formatering av tabellen Lag en banner for malerforretningen og legg denne på toppen av alle websidene Sett inn bilder og illustrasjoner som passer til en malerforretning på de ulike websidene. Bruk gjerne posisjoneringsteknikken floating for plassering av bilder se i boka Webutvikling side 117-188. Sett også gjerne inn skyggeeffekt på bildene se side 105 i boka Webutvikling Forhåndsvis nettstedet i en nettleser
23 5.5 Serie Du har fått i oppdrag av en serieprodusent å lage et nettsted som presenterer en serie for norsk ungdom mellom 16 og 20 år. Du må gjerne få inspirasjon fra andre nettsider om samme serie, men du skal utvikle et nettsted med «ditt» brukergrensesnitt. Oppgavebeskrivelse Se s.126 -> for alternative oppsett Lag en collage som synliggjør det visuelle utrykket i valgt serie. Denne collagen skal danne utgangspunkt for det brukergrensesnittet du velger deg Lag så en fargepalett, bruk https://color.adobe.com/ med utgangspunkt i bildet fra punktet over Lag et bilde i et bildebehandlingsprogram som viser «din» fargepalett. Sett på fargekoden til hver farge, og skriv også hva den enkelte farge skal brukes til (for eksempel farge på bakgrunn, farge på tekster, bilderammer, logo osv.) Velg én eller flere fonter du vil bruke på nettstedet, og begrunn valget. Bruk gjerne en google-font, evt. last ned en egen font Lage et webområde/site på localhost på egen maskin, gi siten et passende navn. Siten skal kun inneholde de filene som trengs for å vise nettstedet på nett. Filene skal ha fornuftige navn og formater Presenter historien, persongalleriet og annen informasjon med både tekst og bilde Nettstedet skal også ha en egenutviklet logo som skal gå igjen på hver side, og logoen skal inneholde tekst og bilde Nettsidene skal bygges opp ved hjelp av wrapper og semantiske tagger (side 126-129). Samtlige nettsider skal ha det samme oppsettet Wrapper, semantiske tagger og andre tagger skal formateres i et eksternt stilark (CSS) Nettstedet skal ha et menysystem, bruk liste som formateres i stilarket (se side 130). Nettstedet skal ha et ikon (favicon) som lages i Photoshop eller ved hjelp av en favicon-generator. Kode til <head>-del: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> Bytt ut filnavn og type med det som passer ditt favicon. Hver enkelt nettside i webløsningen skal ha en egen tekst i tittellinja Alle bilder du bruker, skal bearbeides i valgt bildebehandlingsprogram, for eksempel ved tilpasning av bildestørrelse. Sørg for at filmseriens navn vises som en tekst på bildet Nettstedet skal inneholde minst én animasjon. En animert gif laget i valgt bildebehandlingsprogram settes inn som et vanlig bilde. Bruk følgende kode dersom
24 du har laget en animasjon i verktøy som Adobe Animate CC: <embed src="navn på animasjon.swf"> Forbered deg på å vise løsningen din for lærer hvor du viser det ferdige nettstedet viser collage og fargeprofilen i valgt bildebehandlingsprogram begrunner valg av font forklarer kode fra dine nettsider (både HTML og CSS) Favicon-generator http://www.favicon.cc/ http://www.favicon-generator.org/ Kapittel 11 i IT 1, basisbok om «lov om opphavsrett» Kapittel 12 i IT 1, basisbok om «brukergrensesnitt» Kapittel 1-5 i boka Webutvikling Til inspirasjon: Eksempel på en nettside for serie http://www.itv.com/downtonabbey/
25 Kapittel 6 Eksempel - Festival 6.1 Repetisjon Se side 54 i boka «Webutvikling» for å vise tagger som tekst 1. Lag en mappe som du kaller cheatsheet 2. Åpne fila mal.html 3. Velg Fil Lagre som og gi den navnet index.html 4. Skriv inn følgende kode:
26 5. I <nav> skal vi som vanlig sette inn en meny i form av en punktliste (to valg i første omgang): <nav> <ul> </ul> <li><a href="index.html">hjem</a></li> <li><a href="tagger.html">nyttige tagger</a></li> Finn selv på aktuelle menyvalg for tips se begynnelsen av oppgaven </nav> 6. I <header> skal du sette inn en overskrift: <header> <h1>webutvikling i IT1-faget skoleåret 2016-2017</h1> </header> 7. I <main> skal du skrive inn lett tekst og bruker den semantiske taggen <article>: <main> <article> <h1>presentasjon av meg selv</h1> <p>...skriv noe her...</p> </article> <article> <h1>læreplanmål i IT-1 faget</h1> <p>...presenter de tre læreplanmålene...</p> </article> <article> <h1>verktøy</h1> <p>...om de verktøyene du bruker i faget...</p> </article> </main> 8. Lagre som index.html og forhåndsvis i nettleser
27 Du er nå klar til å formatere utseende i et eksternt stilark: 9. Opprett en ny fil som du kaller stil.css 10. For å være sikker på at du bestemmer størrelsen på alle marger og padding setter du disse til 0 innledningsvis for alle elementer (*). Skriv inn følgende først i stilarket: 11. Du skal så beskrive «wrapper», body og de semantiske taggene du har tatt i bruk 12. I <header> har du lagt en overskrift (<h1>). Denne skal du nå formatere, men samtidig sørge for at dette ikke påvirker andre overskrifter på nettstedet. 13. Lagre og forhåndsvis i nettleser hvorfor blir teksten i <header> midstilt? Du er nå klar til å omgjøre punktlisten til en meny: 14. Skriv inn følgende beskrivelse av punktlisten i stilarket:
28 15. Forhåndsvis i nettleseren og se at du har en horisontal meny (alle valg på samme linje) 16. Endre i nav ul slik at det står du får linjebrudd for hvert menyvalg Bestem selv om du vil ha menyen slik den er nå, eller om du vil ha den horisontal (nowrap), altså på samme linje. 17. Til sist skal du legge til kode i stilarket som gjør at menyvalget endrer farge når du peker på det med musepekeren 18. Legg til innhold i alle sidene:
29 Tips: Hvis du vil ha inn bilder som teksten skal flyte rundt kan du bruke floating. - Sett inn bilde i HTML-dokumentet - Formater <img>-taggen i stilarket slik at teksten flyter rundt. Her har vi bestemt at bildet skal justere seg til høyre i forhold til teksten. I dette eksempelet har vi flere <article>-tagger som inneholder både tekst og bilde:
30 Kapittel 11 Arbeide med SQL 11.1 Oppgave inventar (oppgave med én tabell) Skolen ønsker en oversikt over hva slags inventar de har på skolen. Dette vil de registrere i en database slik at de kan søke etter og telle opp utstyr. Opprett en database/skjema inventar Opprett en tabell du kaller utstyr med følgende felt: Feltnavn Datatype Beskrivelse objektnr Tall (Heltall) Felt som skal fungere som teller, og den skal automatisk øke med én for hver registrering. Primærnøkkelfeltet for tabellen objektnavn Tekst (45) Tekstfelt avsatt med feltstørrelse 45 posisjoner. Feltet må alltid fylles ut, det kan ikke stå tomt beskrivelse Tekst Felt der hvert objekt kan beskrives med en lengre fritekst (for eksempel like mye tekst som på et A4-ark) regdato Dato Velg format dato Registrer minst 6 poster i tabellen Ta utgangspunkt i utstyr du ser i rommet du sitter i (stoler, pulter, tavle, skap, søppelbøtte, papirbøtte, prosjektor) Sørg for at du registrerer minst to like objekter, f.eks. to skap
31 11.2 SQL-øvinger Opprett en SQL-spørring ved å trykk på fram: i knapperaden. Lag følgende spørringer som viser Alle poster som er registrert i tabellen utstyr, ta med alle felt * SELECT * FROM utstyr; Alle poster som er registrert i tabellen utstyr, ta med kun objektnr og objektnavn SELECT objektnr, objektnavn FROM utstyr; Vis alle poster som er registrert i tabellen utstyr. Ta kun med feltene objektnavn og regdato. Sorter utlistingen slik at det objektet som er sist registrert, kommer sist SELECT objektnavn,regdato FROM utstyr ORDER BY regdato; Endre sorteringen slik at du får de som er registrert sist, øverst i lista SELECT objektnavn,regdato FROM utstyr ORDER BY regdato DESC; Vis alle poster i tabellen utstyr som har objektnavn som begynner på s, ta med kun objektnr og objektnavn SELECT objektnr, objektnavn FROM utstyr WHERE objektnavn LIKE 's%';
32 Vis alle poster i tabellen utstyr som har objektnavn som inneholder bokstaven s, ta med kun objektnr og objektnavn SELECT objektnr, objektnavn FROM utstyr WHERE objektnavn LIKE '%s%'; Vis alle poster som er registrert i 2017 SELECT objektnr, objektnavn, regdato FROM utstyr WHERE regdato >= '2017.01.01'; Sørg for at du har registrert minst to skap. Tell så opp hvor mange skap det finnes på skolen SELECT COUNT(objektnavn) FROM utstyr WHERE objektnavn = Skap ;
33 Kapittel 12 Koble dynamiske nettsider og MySQL 12.1 Forberedelse til dynamisk web 1. Åpne valgt editor og skriv inn følgende kode: 1 2 3 4 Forklaring: 1: lagringssted (her: wamp>www) 2: navn på bruker 3: passord (her: blankt) 4: navn på database 2. Lagre i mappen C eller D > wamp > www med navnet mal.php Bruk denne malfila i oppgavene fra kap 12 og utover i Webboka. 12.2 Bruk av «Kodegeneratoren» 1. Lagre mal.php i mappen wamp/www/kapittel12 med navnet sitaterenkel.php 2. Skriv inn følgende adresse i nettleseren din: http://localhost/kapittel12/sitaterenkel.php
34 Resultat: Du skal nå lage en tilkobling til tabellen sitat som viser feltene id og tekst. 3. Gå til nettsiden http://bok.it-fag.no/kodegenerator/ 4. Fyll inn data som vist under : 5. Trykk på generer og merk/kopier koden som kommer opp: 6. Sørg for at filen sitaterenkel.php er åpen i editoren og lim inn den kopierte kodesetningen som vist under:
35 Som du ser, har du fått generert akkurat den koden du trengte for å koble deg til ønsket database altså en enklere måte enn å skrive inn alt selv slik du gjorde da du laget malfila. Slett den innlimte kodesetningen du trenger bare én. Du skal nå lage en tilkobling til tabellen sitat i denne databasen og vise feltene id og tekst. I stedet for å skrive inn all koden selv skal du benytte kodegeneratoren. 7. Sørg for å stå i fila sitaterenkel.php i editoren, rett under php-koden som sørger for tilkoblingen til databasen: 8. Gå til nettsiden http://bok.it-fag.no/kodegenerator/ 9. Finn alternativet Plukke ut et datasett og skriv inn sql-setningen som vist i rødt på side 241 i boka «Webutvikling» (SELECT id, tekst FROM sitat): <?php 10. Klikk på Generer og merk/kopier koden som kommer opp 11. Lim inn koden som vist: $tilkobling = mysqli_connect("localhost","root","","sitatregister"); $sql = "SELECT id, tekst FROM sitat"; $datasett = $tilkobling->query($sql);?> 12. Åpne nettsiden i nettleseren og sjekk at du ikke får noen feilmeldinger 13. Fullfør oppgaven start på pkt 3 side 241
36 Kapittel 13 Hente ut data 13.1 Oppgave inventar (oppgave med to tabeller) Skolen ønsker en oversikt over hva slags inventar de har på skolen. Dette vil de registrere i en database slik at de kan søke etter og telle opp utstyr. De vil også registrere hvilket rom det enkelte utstyr står i og hva slags utstyr vi har i en etasje. Opprett en database som du gir navnet skoleinventar Opprett en tabell du kaller rom med følgende felt: Registrer følgende data: Opprett en tabell du kaller utstyr med følgende felt:
37 Registrer følgende data I tabellen: 13.2 SQL-øvinger Opprett en SQL-spørring ved å trykk på fram: i knapperaden. Lag følgende spørringer som viser Alle rom i bygget SELECT * FROM rom; Alle rom i første etasje SELECT * FROM rom WHERE etasje = 1; Objektnavn, beskrivelse og romnr for alt utstyr i alle rom SELECT objektnavn, beskrivelse, utstyr.romnr FROM utstyr;
38 Objektnavn, beskrivelse, romnr og etasje for alt utstyr i alle rom Siden du nå skal hente data fra to tabeller, må du si ifra at du bare vil se de dataene som er koblet sammen med fremmednøkkel (utstyr.romnr). SELECT objektnavn, beskrivelse, utstyr.romnr, etasje FROM utstyr,rom WHERE utstyr.romnr = rom.romnr; Forsøk så å fjerne siste setning i SQL-spørringen hva blir nå resultatet? Registrer noen flere rom i etasje 3 og 4. Registrer også noe utstyr i disse rommene. Fortsett å lage spørringer som viser: Objektavn, beskrivelse, romnr, etasje sortert på romnr SELECT objektnavn, beskrivelse, utstyr.romnr, etasje FROM utstyr,rom WHERE utstyr.romnr = rom.romnr ORDER BY romnr; Objektavn, beskrivelse, romnr, etasje i etasje 2 og 4, sortert på romnr SELECT objektnavn, beskrivelse, utstyr.romnr, etasje FROM utstyr,rom WHERE utstyr.romnr = rom.romnr AND (etasje = 2 OR etasje = 4) ORDER BY romnr;
39 Kapittel 14 Legge inn og oppdatere data 14.1 Database med tilhørende nettsted Denne oppgaven forutsetter at du har utført oppgavene i kapittel 11 tom 14. Database du skal lage her er svært lik databasen i disse kapitlene og du vil finne hjelp til å løse oppgavene i boka «Webutvikling». I kapittel 9 i IT 1, basisbok kan du lese om ulike sikkerhetstrusler. Tenk deg at en bedrift ønsker at du skal utvikle en database hvor de ansatte kan registrere ulike trusler de opplever. Registreringen skal skje fra et nettsted. Fra det samme nettstedet skal man kunne se alle truslene som er registrert. Opprette databasen og registrere testdata Bedriften ønsker økt fokus på IT-sikkerhet. De ønsker å registrere sikkerhetstrusler og ta ut oversikter over hva slags sikkerhetstrusler virksomheten utsettes for. IT-sjefen ønsker å opprette en database der alle hendelser knyttet til IT-sikkerhet skal registreres. Hver hendelse registreres som en trussel, og hver trussel skal knyttes til en kategori. 1. Se i kap 11 i webboka og implementer datamodellen gi databasen navnet sikkerhetsdatabase: 2. Registrer følgene kategorier: idkate Kategorinavn Kategoribeskrivelse gorier 1 Malware Kategorien for tilfeller av virus, spyware, trojaner, ormer og rootkit på PC 2 Botnett Kategorien for tilfeller der bedriftens pc er blir zoombier i et botnett 3 Hoax Kategori for falske sikkerhetstrusler 4 Malware mobil Kategori for tilfeller av virus på mobiltelefoner 5 Hacking Kategori for tilfeller det bedriften opplever hacker-angrep 6 Sosial engeenering Kategori for tilfeller der sikkerheten ble utfordret på grunn av menneskelig feil og svakheter 7 Email spoofing Kategori for tilfeller der ansatte oppdager at de mottar e-post fra «falske» avsendere 8 Phishing Kategori for tilfeller der ansatte oppdager at de er på falske nettsider (kopinettsider)
40 9 Account hijacking Kategorien for tilfeller der ansatte opplever at brukernavn og kontoer er blitt stjålet og misbrukt 10 Feil i programkode Kategori for tilfeller der det er blitt sikkerhetsbrudd som følge av programkodefeil internt eller eksternt 3. Finn deretter på noen trusler som du registrerer i tabellen trusler og knytt disse til en kategori Opprette ulike spørringer med SQL Opprett tre ulike spørringer i MySQL Workbench og lagre dem med fornuftige navn 1. Opprett en spørring i SQL som viser fram alle kategorier 2. Opprett en spørring i SQL som viser fram alle kategorier som begynner på bokstaven M 3. Opprett en spørring i SQL som viser fram alle kategorier med tilhørende trusler Opprett site og nettsider Opprett så nettsider som du kobler til denne databasen. Krav til løsningen: 1. Lage et webområde/site på localhost på egen maskin, gi siten et passende navn. Siten skal kun inneholde de filene som trengs for å vise nettstedet på nett. Filene skal ha fornuftige navn og formater. 2. Nettsidene skal inneholde bilder og passende tekst, og de skal utvikles i HTML og PHP. 3. Utvikle et banner eller logo i GIMP eller Photoshop som går igjen på alle nettsidene. Størrelsen må passe til de valg du gjør i forhold til design (bredde, høyde). 4. Nettsidene skal bygges opp ved hjelp av en wrapper og semantiske tagger. Samtlige nettsider skal ha det samme oppsettet med header, nav og main. Bruk gjerne oppsett som vist i oppgave Kap 5 - lage midstilt nettsted med header nav og main, Kap 6 - festivallight - repetisjon og malløsning eller som vist i kapittel 6 i webboka. 5. Nettsidene skal formateres i et eksternt stilark (CSS) 6. Nettstedet skal ha et menysystem du må gjerne benytte <ul> som vist i tidligere oppgaver 7. Nettstedet skal inneholdefølgende sider: a. En generell side som presenterer IT-portalen og de ansatte som jobber der b. En PHP-side som viser fram innholdet i tabellen trusler, det vil si alle trusler som er registrert med tilhørende kategori c. En PHP- side om gjør det mulig for ansatte å registrere trusler de opplever, og knytte den aktuelle trusselen til en allerede registrert kategori
41 Vedlegg benyttes ved behov Forklaring til sikkerhetsdatabaseoppgave Forstås slik: sikkerhetsdatabase SELECT idtrusler, trusselbeskrivelse, trusseldato, ansattnavn FROM trusler
42 Vise registrerte kategorier 1. Hente alle felt i tabellen kategorier som skal vises 2. Lage tabell og sette inn data fra tabellen kategorier Samme navn på datasett Husk å dobbeltsjekke at du bruker samme navn på felt som du har oppgitt som Column Name i MySQL!
43 Vise registrerte trusler Skriv inn koden under i body-delen slik at du får en tabell med 4 kolonner som skal vise de dataene som er lagret i databasen: Lager en overskriftsrad i tabellen Henter verdier fra tabellen trusler OBS!!! Navn må være helt like! Sjekk hvordan du har navngitt dine felt i tabellen «trusler» - navnene her må være helt like de som står i tabellen i MySQL Legg så til php-kode øverst i dokumentet slik at du får hentet de dataene som skal vises i tabellen:
Registrere en kategori Legg til følgende kode i HTML-delen: Oppgavesamling til «Webutvikling» 44 Sett inn et skjema med to felt og en knapp. Det navnet du bruker som id MÅ brukes når du så skal legge til kode for å lagre de dataene som skrives inn i feltene txtnavn txtbeskrivelse Legg så til følgende kode øverst i dokumentet slik at du kobler deg til databasen og setter inn de data som er fylt inn i feltene: Sjekk at din tabell heter «kategorier» og at du har navngitt feltene som her, nemlig «kategorinavn» og «beskrivelse»
45 Registrere trussel og angi kategori Legg til følgende kode i <body>-del slik at du får frem et skjema hvor du kan skrive inn verdier + åpne en listeboks og velge riktig kategori: Legg så til kode øverst i dokumentet slik at du får fylt opp listeboksen med registrerte kategorier: Gjør klar til å vise feltet «kategorinavn» i listeboksen og tar vare på nøkkelverdi («idkategorier») til valgt kategori sjekk at du har sammen feltnavn! Dobbeltsjekk at du har samme navn på tabell («kategorier») og samme feltnavn («idkategorier» og «kategorinavn».
46 Plasser deg foran?> i koden du nettopp skrev inn. Legg så til kode for å lagre data som skrives inn i feltene/velges fra listeboksen: Husk at du må bruke nøyaktig samme navn som du har valgt i MySQL Sjekk at du bruker sammen navn som du angav som id i <body>-delen I større font ser koden slik ut: if(isset($_post["submit"])) { $sql = sprintf("insert INTO trusler(trusselbeskrivelse, trusseldato, ansattnavn, idkategorier) VALUES('%s','%s','%s',%s)", $tilkobling->real_escape_string($_post["txttrusselbeskrivelse"]), $tilkobling->real_escape_string($_post["txttrusseldato"]), $tilkobling->real_escape_string($_post["txtansatt"]), $tilkobling->real_escape_string($_post["lstkategori"]) ); $tilkobling->query($sql); }
47 Totalt ser koden slik ut: