VIGTIGT:

• Kapitel 14 – 15, som er teorien til emne 4 om databaser, er flyttet ned under emne 4 Databaser. Link: Lærebog til emne 4. Databaser. Kapitel 14 – 15.
• Kapitel 16 – 18, som er teorien til emne 5 om hjemmesider, er flyttet ned under del 5 Hjemmesider. Link: Lærebog til emne 5. Hjemmesider. Kapitel 16 – 18
• Du kan dog som hidtil også finde kapitlerne her på siden.

Kapitel 12. Kodebegreber

I dette kapitel skal du lære at genkende nogle kodebegreber, som optræder i næsten alle kodesprog. Man har begreber som variable, forgrening og betingelser, loops mv. i næsten alle kodesprog. Det svarer fuldstændigt til, at man har navneord, udsagnsord, tillægsord mv. i næsten alle talte sprog som f.eks. dansk, engelsk, tysk, spansk osv.

Når vi er færdige med kapitlet her, skal du kunne nedenstående begreber. Begreberne vil blive gennemgået en efter en i kapitlet.

BEGREB	KORT FORKLARING OG ANVENDELSE
Variabel	FORKLARING: En beholder, der kan rumme 1 og kun 1 værdi. Til gengæld kan du skifte indholdet lige så tit, du vil ANVENDELSE: Vi bruger variable meget i kodning. F.eks. når brugeren indtaster en værdi (det kunne være navn, adresse, password mv), så gemmer vi værdien i en variabel i backend, så vi kan arbejde med den dér
Sekvens	FORKLARING: Indholdet er ikke så vigtigt, det vigtige er, at koden afvikles i en bestemt rækkefølge ANVENDELSE: Sekvenser har, modsat andre kodebegreber, ikke en bestemt anvendelse.
Forgrening og betingelse	FORKLARING: Hvis en betingelse er opfyldt, så gør en ting. Ellers gør noget andet. If-else sætninger kan med andre ord træffe beslutninger ud fra et input (typisk en variabel). Det er altid en hvis-sætning i koden. På engelsk kalder man det en if-then-else sætning ANVENDELSE: Meget anvendt, f.eks. hvis du indtaster brugernavn og password, så skal programmet afgøre, om du kan logges ind eller ej.
Arrays og loops	FORKLARING: Et array er en række af variable, dvs. at et array kan rumme mange værdier. På dansk kan man kalde det en liste. Et loop er en handling, der udføres igen og igen, indtil man er færdig ANVENDELSE: Arrays bruges til at lave lister med, f.eks. en huskeseddel, en liste over elever i en klasse mv. Når man arbejder med arrays, bruger man loops til f.eks. at udskrive arrayet.
Funktioner	FORKLARING. Vi bruger det til at pakke en samlet klump kode ind med. Kald det gerne en stik-i-rend dreng, som man kan kode til at gøre alt muligt ANVENDELSE: Man kan sige, at funktioner ofte er den indkøbspose, som vi har vores kode i. Så kan vi holde styr på koden.
Events og funktioner	FORKLARING: En event er den begivenhed, der sætter funktionen i gang. F.eks. et klik på en knap. ANVENDELSE: Eventen skaber kontakt fra frontend til backend. Så når brugeren klikker, så sker der noget kodeafvikling i backend.
Kommentarer	FORKLARING: Mennesketekst inde i koden. Kommentarer påvirker ikke resten af koden. ANVENDELSE: Gør din kode forståelig for både dig selv og andre, næste gang du ser på koden

Overblik over kodebegreber, som du skal kunne.

Link til toppen af siden.

12.1 Rutediagrammer/flowcharts

Inden vi går i gang med koden, skal du lære rutediagrammer at kende. Rutediagrammer er enkle diagrammer over, hvilke “ruter” der er igennem programmet. De er gode til at skabe overblik, og man kan kode direkte efter et rutediagram. På engelsk hedder et rutediagram et “flowchart”.

Vi vil her arbejde med 5 enkelt elementer til rutediagrammer.

Her er et eksempel på et rutediagram for at logge på Facebook. Du kender det sikkert godt. Vi ser her bort fra muligheden af at have glemt adgangskoden eller oprette ny konto.

• Start: Brugeren vil logge på Facebook
• Input: Indtast email eller telefonnummer
• Input: Indtast password
• Handling: Log på
• Forgrening/betingelse: Findes brugeren
  • Handling: Hvis ja log på
  • Handling: Hvis nej nægt adgang, giv brugeren en fejlmeddelese og giv mulighed for at logge på igen
• Slut

Diagrammet ser sådan her ud. Jeg anbefaler, at du tegner med draw.io, men for overskuelighedens skyld har jeg brugt PowerPoint.

Se gerne videoerne. Elementet til input er dog ikke med i videoerne.

Se et worked example herunder. Jeg har brugt PowerPoint som værktøj i videoen, men jeg anbefaler online tegneværktøjer draw.io. Du bestemmer dog selv, hvilket værktøj, du vil bruge.

Link til toppen af siden.

12.2 Variable

Lær det her: “En variabel er en beholder, der kan rumme 1 og kun 1 værdi”. Til gengæld kan den skiftes ud lige så tit, man vil. Her er et par eksempler:

• Highscore i et spil
• Antal liv i et spil
• Din alder. Den bliver opdateret hvert år på din fødselsdag
• Målscore, tid, alt muligt inden for sportens verden
• Priser
• … osv. osv.

Her er der masser af variable. DeHviii (kælenavn for AGF’s hvidblusede fodboldhold) er foran med 2 – 0 mod Brøndby foran på et ret tavst BUNDby undskyld Brøndby Stadion. Vi har brug for 2 variable: 1 til AGF’s målscore og 1 til Brøndbys. For AGF’s vedkommende har vi allerede ændret variablens indhold 2 gange. I øvrigt ender kampen 3 – 0 til DeHviii. Det var en smuk dag den 25. august 2019 :-).

https://youtube.com/watch?v=ZucokMhvksA%3Ffeature%3Doembed

I AppLab definerer vi en variabel ved at skrive “var” + et navn. Vi sætter den gerne lig værdien af et indtastet felt.

I eksemplet her oprettes i linje 2 variablen “beløb”. I linje 3 oprettes en ny variabel “resultat” Variablen “resultat sættes” lig med det, som brugeren har indtastet i tekstfeltet “text_input1”. I linje 4 returneres variablen beløb til frontend og skrives i tekstfeltet label3.

Link til toppen af siden.

12.3 Sekvens

En sekvens er en rækkefølge. Det er ikke så vigtigt, hvad sekvensen handler om. Det vigtige er rækkefølgen. Her er Gurli Gymnasieelevs rækkefølge, når hun står op om morgenen:

1. Slå vækkeuret fra
2. Gå ud på badeværelset
3. Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
4. Gå i bad
5. Spise morgenmad
6. Pakke skoletasken
7. Komme ud af døren
8. Nå bussen
9. Tjekke mobilen

Hvad nu, hvis Gurli gør tingene i en anden rækkefølge. Så går det galt!

1. Tjekke mobilen
2. Komme ud af døren
3. Spise morgenmad
4. Nå bussen
5. Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
6. Pakke skoletasken
7. Gå ud på badeværelset
8. Slå vækkeuret fra
9. Gå i bad

I kodning kan en sekvens bestå af alt mulig forskellig kode. Det skal bare gøres i den rigtige rækkefølge.

https://youtube.com/watch?v=EpOoWBoXUEQ%3Ffeature%3Doembed

Samme eksempel fra før. Hvis vi byttede rundt på rækkefølgen, så vil koden ikke fungere. Næsten alle programmer har sekvenser.

Link til toppen af siden.

12.4 Forgrening og betingelse

Forgrening og betingelse er det eneste sted i programmet, hvor man kan tage en beslutning. Hvis en betigelse er opfyldt, så gør …. Ellers gør sådan og sådan …

HVIS … SÅ …. ELLERS SÅ ….

I kodning bruger man en HVIS-sætning. På engelsk kaldes det en IF eller en IF-THEN-ELSE sætning. Et typisk eksempel kunne være, når man logger ind med brugernavn og adgangskode

1. Indtast dit brugernavn og adgangskode
2. HVIS (brugernavn og adgangskode er rigtige) SÅ (bliver du logget ind) ELLERS SÅ (prøv igen).

Link til toppen af siden.

12.5 Arrays og loops

Array betyder “række”. Det er en række fyldt med variable. Et eksempel: Hvis du vil have en elektronisk huskeseddel, så lav punkterne i et array i stedet for individuelle variable. Det gør det nemmere, når vi skal udskrive huskesedlen. Så vil programmet “loope” igennem huskesedlen og udskrive punkterne et for et, indtil alt er skrevet ud.

Du må gerne tænke på tivolier, når vi snakker loops. Folk står i arrays (rækker, dvs. køer) for at prøve loops. Man kan naturligvis have flere loops i et program lige som på billedet her:

Et eksempel mere: Peter Popmusik elsker at høre musik på Spotify. Han laver en playliste med hans 10 favoritnumre. I programmeringsmæssig forstand har han nu et array med 10 emner. Computeren kan så afspille dem en efter en i rækkefølge, fordi de står samlet i en række i array’et.

I AppLab ser det ud som vist nedenfor.

Her er arrayet allerede udfyldt med 4 variable: “müstli”, “mælk”, “rosiner” og “the”. I linje 3 har jeg en helt almindelig variabel var print = “”. Vi bruger kun firkantede parenteser, når vi laver et array og ikke en variabel.

Hvis vi skal loope, bruger vi en “for” løkke som vist med blå farve i linje 4 – 7. For-løkken løber arrayet huskeseddel igennem og skriver elementerne i arrayet “huskeseddel” til variablen print.

Resultatet af kodningen ovenfor. Hvis du vil se det selv, så åben linket her i AppLab: https://studio.code.org/projects/applab/D9eamV28solo71FdkIWpQ-0vKqE2HAVWw34ZCmIeAxo

Link til toppen af siden.

Denne mekanisme bruger vi, når vi laver et loop. Vi kan få fat i det 0’de element i arrayet huskeseddel …

… ved at skrive “huskeseddel[0]”.

Når vi laver et loop som vist herunder, så bruger vi altid en tæller. Her kaldes tælleren for “i”. Tælleren starter ved 0, og løber lige så længe, som arrayet er langt. Længden på arrayet kan programmet finde vha. kommandoen “huskeseddel.length”. “i++” betyder, at vi lægger 1 til den værdi som i har i forvejen.

På den måde får vi fat i alle elementerne vha kommandoen “huskeseddel[i]. Først er i = 0, så er i = 1, i = 2 osv.

Link til toppen af siden.

12.6 Funktioner

En funktion er en stik-i-rend dreng. Den kan udføre en handling, f. eks. lægge 2 og 2 sammen, lave en liste, alt muligt. Hvis vi nu siger, at vores stik-i-rend-dreng kan hente en appelsinvand, og han arbejder for Verdensfirmaet A/S. Hvis firmaet var et program, så ville vi have en funktion, som vi kunne kalde “Appelsinvand”. Så vil alle medarbejderne altid bare kunne kalde på “Appelsinvand”, og så kunne de få hentet en appelsinvand når som helst og hvor som helst. Alle dele i koden kan bruge en funktion.

I øvrigt er alt kode, undtagen kommentarer, er pakket ind i funktioner. -Funktioner kan sagtens bruge eller kalde andre funktioner.

https://youtube.com/watch?v=exBK2KTcxKk%3Ffeature%3Doembed

I App Lap er alt kode som udgangspunkt “pakket ind” i en funktion. Den grønne klamme, som rummer hele sekvensen, er en funktion. Bemærk at vi kan give funktionen et navn. Normalt bruger vi bare navnet “event”, som App Lab automatisk giver os. Men vi kunne kalde den for “valutaomregner” og så kalde den fra andre funktioner.

Link til toppen af siden.

12.7 Funktioner og events

Hvis brugeren klikker på noget i en app, så kalder man det en “hændelse” eller et “event”. I spil kan event også være, at man skyder fjenden, dør eller bare styrer sin figur i spillet. Et event kalder en funktion. Funktionen indeholder så kode (variable, sekvenser, forgrening og betingelser mv.), som kan udføre den ønskede handling.

https://youtube.com/watch?v=yi5ivNKt0lM%3Ffeature%3Doembed

En event er, når der “sker noget” i et spil eller en app. Her den kode, der skal afvikles, når eventen “Klik på button1” er sket. Bemærk at eventen kalder en funktion.

Link til toppen af siden.

12.8 Kommentarer

Kommentarer er mennesketekst, som man sætter ind i koden. Typisk bruger man det til at forklare, hvad der sker i koden. Hvis nu du selv kommer tilbage til din kode efter et par måneder, eller at andre skal forstå din kode, så er kommentarer nyttige.

I virksomheder, hvor de lever af at kode, har de strenge regler for, hvordan man laver kommentarer. Det gør, at programmørerne lettere kan forstå, hvad andre koder.

https://youtube.com/watch?v=2hre6b5guYA%3Ffeature%3Doembed

Her er en kommentar i AppLab. Den er med grå farve

Link til toppen af siden.

12.9 Sådan arbejder frontend og backend sammen

Når du skaber kode i App Lap, følger vi næsten altid det samme mønster.

• Vi starter med at oprette en begivenhed
• Begivenheden opretter en funktion
• Inden i funktion gør vi 3 ting
  • Henter data fra indtastningsfelter ind i variable
  • Beregner
  • Returnerer resultatet til backend

Det kan se sådan her ud.

Link til toppen af siden.

Kapitel 13. Arkitektur i programmer og databaser

Susanne Sulten og Arne Appeltit går på restaurant “Mad & Mæt”. Under måltidet betjener en høflig og velklædt tjener dem. De afgiver en ordre, og tjeneren går ud med ordren i køkkenet. Susanne og Arne har ikke adgang til køkkenet. Når dagen er slut, rydder de op i køkkenet, og “Mæt & Mad” lukker og slukker. Madopskrifter og lager af mad gemmer restauranten et sikkert sted, så det er klart til dagen efter.

99% af alle apps og programmer fungerer på næsten samme måde. De er opdelt i 3 ret adskilte lag:

• Frontend eller præsentationslaget.
• Backend eller forretningslaget
• Databasen eller datalaget

Brugerne ser programmet i frontend eller præsentationslaget. Det svarer til det område, hvor kunderne kommer i restauranten. Det skal være så præsentabelt og indbydende som muligt

Når hjemmesidens brugere klikker på noget, så aktiverer klikket kodning i backend eller forretningslaget. Det svarer til, at tjeneren modtager bestilling på mad og afleverer den ude i køkkenet. Vi vil ikke have brugerne ind i backend, og vi vil heller ikke have restaurantens gæster ud i køkkenet

Vi kan godt gemme ting midlertidigt i både frontend og backend i f.eks. variable og cookies.

Men udgangspunktet er, at når vi slukker programmet, så slukker vi også for hukommelsen, og variablene slettes. Heldigvis har vi datalaget eller databasen. Her kan vi gemme oplysninger, f.eks. om kunder. Vi kan hente oplysningerne frem igen, selvom programmet har været slukket i et stykke tid. I restauranten gemmer vi opskrifter på nettet og har madvarer på frost, hvor de kan være gemt i lang tid

I figuren kan du se, hvordan lagene arbejder sammen. Frontend snakker med backend, der om nødvendigt henter ting ud af databasen og viser det til brugeren i frontend. Den stiplede linje viser, at vi kun vil have kunderne ind i frontend-området.

Hvis vi sætter det op i en tabel, ser det sådan ud. Jeg har tilladt mig at skrive nogle af de kodesprog på, som anvendes i laget.

LAG	BRUGES TIL	KODESPROG	HVIS DET VAR EN RESTAURANT
Frontend	Præsentationslag, ses af brugerne	Kun html, php og javaScript. Ingen andre sprog kan tolkes direkte i en browser	Kundeområdet
Backend	Forretningslogikken. Styre programmet og afvikler ordrer fra brugerne i frontend. Ingen adgang for kunder	Mest php og C# til hjemmesider, men også sprog som java, asp, vb.net m.fl.	Køkkenet, hvor retterne laves,
Database	Gemmer data, så de også er der efter, at programmet er slukket. Vi gemmer næsten alle data i tabeller lidt som i Excel	MySQL, hvis man skriver PHP. Ellers SQL ved C#	Det, vi gemmer, når personalet lukker restauranten. Madvarer, opskrifter mv.

Oversigt over de forskellige lag

Link til toppen af siden.

13.1 Et eksempel: Facebook

Et kik på Facebooks forside kan hurtigt forklare, hvad jeg mener.

Når vi ser Facebook, genkender vi hurtigt de mørkeblå og hvide farver. Det, vi ser, er selvfølgelig frontend. Hvis vi kikker op i højre hjørne, kan jeg logge ind med mit brugernavn og password. Hvis jeg indtaster brugernavn og password, overføres det indtastede til backend. Backend spørger videre ned i databasen, som jo har en oversigt over alle brugernavne og password på alle profiler i hele verden. Hvis jeg taster rigtigt, bliver jeg logget ind på min profil, ellers ikke.

Alt hvad jeg skaber på Facebook, fra tekst over billeder, videoer, likes …, alt bliver gemt i databasen. Hvis du begynder at tænke lidt over, hvor meget lagerplads Facebook har brug for, så er svaret: “Meget”.

Hvis du kan se et program/en app, så er der et frontend lag. Hvis du kan udføre noget i frontend, så har vi et backend lag. Hvis programmet kan huske noget fra sidst, du brugte programmet, så har programmet en database.

Link til toppen af siden.

13.2 Databaser

Hvad er en database? Det kan siges meget simpelt: En database er intet andet end en tabel.

Tabellen kan være opbygget på mange indviklede måder, og man kan dele tabellen op, hvis man vil. Men i bund og grund er en database bare en tabel og intet andet.

Link til toppen af siden.

Et eksempel: Niels Ny skifter skole

Niels Ny skifter til i en HHX klasse midt i skoleåret. Det er en ret stor klasse. Fagene, især informatik, er super interessante, lærerne er gode, de andre elever er flinke og han bliver allerede den første dag inviteret med til en klassefest.

Niels er dårlig til ansigter, så han skriver elevernes navne ned. Han har talt med 2 af eleverne: Lene og Lone

NAVN	HÅRFARVE	ØVRIGT
Lene	Rød	LIlle, går i modetøj tøj, dyrker fitness
Lone	Brun	Høj, kan lide at gå på café, griner meget

Har Niels Ny en database? Stort JA, Niels Ny har en lille men fuldt gyldig database.

Link til toppen af siden.

13.3 Normalisering

Niels Ny’s database er udmærket, og den fungerer fint for ham. I hvert fald indtil han har flere Lener og Loner på listen og ikke kan kende forskel.

For at vi kan arbejde professionelt med databaser, er vi nødt til gøre nogle ting ved dem. Denne proces kalder man for “normalisering. Jeg vil kort beskrive de vigtigste her. Bemærk, at du skal gøre dem i rækkefølge, og du må ikke starte på trin 2, før trin 1 er færdig. Du må heller ikke starte på trin 3, før trin 2 er færdig osv. Det kan vises sådan her:

Link til toppen af siden.

Trin 1. Primærnøgler og opdeling

Primærnøgler er et godt sted at starte vores normalisering. Her er en lille kundedatabase.

Vi har 2 kunder, “Kim Kunde” der tilfældigvis hedder det samme. Den ene er alletiders kunde, men den anden skylder os rigtigt mange penge. Vi vil kontakte den dårlige kunde og bede ham om at betale det, han skylder. Men vi skulle jo nødig tage fat i den forkerte.

De hedder det samme, og de kan teoretisk også have samme adresse, postnummer, telefonnummer osv. Så hvad gør vi her? Svaret er: Vi må finde på noget unikt, så vi kan identificere dem hver for sig.

Den danske stat bruger cpr-numre for at identificere danskerne. Men den mulighed har vi ikke altid, så vi tilføjer et kundenummer for hver kunde til vores tabel. Det er sådan set ligegyldigt, hvilke numre eller for den sags skyld bogstaver de enkelte kunder har. Bare hvert enkelt nummer er unikt. Et sådant unikt felt for hver kunde i tabellen kalder man en primærnøgle eller et ID. Jeg tilføjer feltet og sætter det forreste, for er praktisk at have primærnøglen forrest.

Alle registreringer i en database skal altid have en primærnøgle, dvs. noget unikt. Ellers kan vi ikke identificere vores registrering, og så bryder vores database sammen. Hvis vi ikke kan finde noget unikt i det, vi i forvejen har registreret, så må vi selv tilføje noget.

Link til toppen af siden.

Trin 2. Del dine data op

Det er en god ide at dele data op i tabellen. Jo bedre en opdeling, jo nemmere kan vi f.eks. finde og sortere data. Min kundedatabase nedenfor er i forvejen ganske fornuftigt opdelt.

Det ville dog være rart, hvis jeg kunne adskille navnet i fornavn og efternavn. Nyttigt, hvis jeg skal sende en pæn besked til en kunde, så vil jeg gerne kunne nøjes med at hente kundens fornavn fra databasen. Jeg ville også gerne kunne sorter kunder efter først efternavn, så fornavn

Man kan diskutere, om adressen då også skal deles op i vej og vejnummer. I praksis er det nok kun folk, som arbejder med alle adresser i et område, f.eks. postvæsen, elektricitetsforsyning m.v., der har sådan en opdeling.

Link til toppen af siden.

Redundans

Redundans betyder “overflødig”. Så hvis Bo Boss siger til Arne Arbejder, at han er “redundant”, så mister Arne nok sit job.

I databaser kan nogle registreringer være overflødige. Hvis vi kan undgå overflødige registreringer. vil vores database fylder mindre, og at den vil være er lettere at vedligeholde. Når vi arbejder med små databaser som i eksemplerne her, så betyder det ikke så meget. Men databaser kan sagtens runde 100.000 registreringer eller flere og så har det stor betydning. Tænk på, hvor mange registrering der er f.eks. på Netflix’ kundekatalog eller det danske CPR register eller hvis vi skal registrere alle bogføringer i en virksomhed.

Jagten på redundans går ud på at finde et felt, som ikke er uafhængigt. Dvs. et felt, hvor det på en eller anden måde er bestemt på forhånd, hvad der skal stå.

• Det første felt er kundenummer. Hvis vi ser bort fra, at alle felterne skal have et unikt indhold, så kan vi her skrive, hvad vi har lyst til
• Det samme gælder fornavn, efternavn, adresse og postnummer. Folks fornavn er uafhængigt af deres efternavn. Rikke Rabat kunne lige så godt hedde Rikke Rasmussen eller Rikke Ling-Hu-Chan. Adressen og postnummeret er også uafhængige felter
• Feltet by er ikke uafhængigt. Feltet er helt og holdent styret af feltet postnummer. Hvis postnummeret er “6000”, SKAL der stå “Kolding” i feltet by. Der kan ikke stå andet. 6000 Slagelse giver ikke mening, lige så lidt som “4200 Kolding” giver mening

Link til toppen af siden.

Når vi har fundet et afhængigt felt, skal vi dele tabellen op

Vi har nu fundet et felt, “by” der er afhængigt. I tabellen optræder Kolding 3 steder og Fredericia 2 steder. Det kan vi skære ned til, at begge byer kun forekommer 1 gang. Det ser sådan ud:

Nu står byerne Kolding og Fredericia kun nævnt 1 gang.

Overholder den nye tabel så reglerne for tabeller? Den skal jo have en primærnøgle. Det har den, feltet postnummer er unikt og kan fungere som primærnøgle. Samtidig har vi bevaret feltet i den gamle tabel. Når feltet findes i 2 tabeller, så kan vi bruge det ene felt til at slå op i den anden tabel.

• Når feltet er et unikt felt, der bruges til identifikation, kalder vi det for “primærnøgle”
• Hvis feltet er unikt, og vi samtidig bruger det til at slå op i en anden tabel, kalder vi det for en “fremmednøgle”. Feltet postnummer i den gamle tabel er en fremmednøgle.

Faktaboks: Byer skifter navne Det sker, at byer ændrer stavemøden. Tit er det for at søge byens rødder, eller måske for at gøre byen lettere at markedsføre i udlandet. Åbenrå er skiftet til Aabenraa, Grenå til Grenaa, Århus til Aarhus, Ålborg til Aalborg og Åkirkeby til Aakirkeby for at nævne nogle. Da f.eks. Århus skiftede til Aarhus, skulle man i databaserne kun ændre byens navn et sted, fordi man selvfølgelig har lavet opsplitningen som vist ovenfor. Der er nok 50.000 mennesker eller flere, der havde postadresse 8000 Århus C.

Link til toppen af siden.

13.4 Datatyper

Alle tabeller kan deles op efter tabelnavn, primærnøgle, felter og poster.

Betegnelse	Forklaring
Tabelnavn	Giver sig selv: Navnet på tabellen. Giv tabellen et sigende navn
Primærnøgle	Et felt, som er unikt for hver række. Svarer til et ID. Hvis der ikke er et unikt felt i rækken, må vi selv finde på et. Eksempel: Læger har cpr-nummeret på patienterne, det kan bruges som primærnøgle. Til gengæld skal vi selv finde på noget unikt, f.eks. et kundenummer, hvis vi vil registrere kunder
Felter	Betegnelsen for data: F.eks. Kundenummer, Fornavn, Efternavn.
Poster	En hel vandret række med komplette oplysninger. Her de komplette oplysninger om hver enkelt kunde

Datatyper

Du har allerede mødt datatyper. Når du programmerer, f.eks. i App Lab, er der forskel på nedenstående:

• 1 eller “1”
• resultat eller “resultat”

Hvis tekst eller tal er i anførselstegn som f.eks. “1”, så opfattes det som tekst. Hvis tallet 1 skrives uden anførselstegn, så er det et tal. Det vil sige, at hvis man skriver i programmet 1 + 1, så vil programmet kunne regne ud, at det giver 2. Hvis man skriver “1” + “1”, så vil det nærmere give “11”, hvis ellers programmet forstår det.

Tilsvarende: Skriver man resultat i et program, vil programmet opfatte resultat som en variabel. Skriver man i stedet “resultat”, så vil programmet opfatte det som tekst. Derfor giver følgende kode god mening, og koden vil skrive 2 på skærmen.

var resultat;
resultat = 1 + 1;
udskriv resultat;

Mens koden her vil give fejl eller skrive “11”

var resultat;
"resultat" = "1" + "1";
udskriv resultat;

Koden her vil bare skrive “resultat” og den fejl har de fleste prøvet at begå:

var resultat;
resultat = 1 + 1;
udskriv "resultat";

Vi har indtil videre 2 datatyper: Tal og tekst, og det er vigtigt at skelne: Tal er noget vi kan beregne med, mens vi ikke kan beregne med tekst. Skal et telefonnummer så være tal eller tekst? Klart tekst, det giver ingen mening at lægge 2 telefonnumre sammen.

Her er en leverandørdatabase, som er lavet i Access. Access er et databaseprogram, der hører med i den udvidede Officepakke. Du kender i forvejen Word, Excel og sikkert OneNote fra Microsofts Officepakke.

Alle databaser har som minimum datatyperne tekst, tal, ja/nej felt. Access har så nogle ekstra datatyper som det ses nedenfor. Et “OLE-objekt” er en fil, f.eks. et Word-dokument eller et billede.

13.5 Flade kontra relationelle databaser

• Hvis en database kun består af 1 tabel, så har vi en flad database
• Hvis en database består af 2 eller flere forbundne tabeller, så har vi en relationsdatabase

Relationsdatabaser er den mest almindelige databaseform. Hvis du arbejder i f.eks. et ERP system, kan du være sikker på, at der ligger en relationsdatabase bag.

Link til toppen af siden.

13.6 Hvad er en relation

Når vi laver opsplitninger af databasetabeller, laver vi en relation. Der findes 3 former for relationer :

RELATION	FORKLARING
1-til-1	1 person “A” er gift med 1 anden person “B”, og “B” kan også kun være gift med en “A”
1-til-mange	1 person kan have postadresse på 1 postnummer, men 1 postnummer kan godt have mange personer tilknyttet
mange-til-mange	1 vare kan købes af mange kunder, og 1 kunde kan købe mange varer

Link til toppen af siden.

Relationer

• Når vi har en 1-til-1 relation, splitter vi ikke tabellen op.
• Når vi har en 1-til-mange relation, så splitter vi tabellen op som vist
• Når vi har en mange-til-mange relation, er vi nødt til både at splitte tabellen op, men også at lave en mellemtabel

Store databaser kan være virkeligt komplicerede. For ikke at miste overblikket bruger vi E-R diagrammer til at illustrere dem. I E-R diagrammer viser vi tabeller som kasser og relationer som diamanter.

Link til toppen af siden.

1-til-1 relation

1-til-mange relation

Mange-til-mange relation

Hvis du skal tegne rutediagrammer, E-R diagrammer og lignende, så anbefaler jeg dig at bruge www.draw.io

Link til toppen af siden.

Kapitel 14. Kodning i databaser: SQL

Vi kan kun 4 ting med en database. Vi kalder det for CRUD:

• Create: Vi kan skabe nyt indhold i databasen
• Read: Vi kan læse indhold fra databasen
• Update: Vi kan opdatere indhold i databasen
• Delete: Vi kan slette indhold i databasen

Til alt kontakt med databaser bruger vi SQL kode. SQL står for “Structured Query Language”. SQL er et simpelt sprog, som lægger tæt op ad menneskesprog. Næsten uanset hvad du gør med en database, så er der SQL involveret. SQL findes sjovt nok i forskellige “dialekter”, f.eks. MySQL og MS-SQL. “MS” står for “Microsoft”, men kernen i sproget er ens for alle. Lige som der er navneord på både dansk, tysk, engelsk, spansk, russisk, indonesisk, wolof og hvilke sprog vi ellers kan komme på.

Link til toppen af siden.

14.1 Eksempler på SQL kode

Vores 2 tabeller fra før kalder vi nu “Kunder” og “PostnummerBy”:

Her er nogle eksempler på SQL kode

ØNSKE	SQL KODE
Hent alle data fra tabellen Kunder	SELECT * FROM Kunder;
Hent alle data i felterne FORNAVN og EFTERNAVN. Efternavnet skal stå først	SELECT EFTERNAVN, FORNAVN FROM Kunder;
Hent alle data i felterne FORNAVN og EFTERNAVN. Efternavnet skal stå først, og der skal sorteres efter efternavn	SELECT EFTERNAVN, FORNAVN FROM Kunder ORDER BY EFTERNAVN;
Hent alle oplysninger om kunder, der hedder “Kim”	SELECT * FROM Kunder WHERE FORNAVN = ‘Kim’;
Hent alle oplysninger fra begge tabeller	SELECT * FROM Kunder INNER JOIN Customers ON Orders.Postnummer=PostnummerBy.Postnummer;

Hvis man skal arbejde med kode, så er W3schools et fantastisk sted at starte. De skriver om mange sprog, de skriver simpelt, og man kan prøve det af. Selvfølgelig har de også noget om SQL. Hvis du vil vide mere om SQL, så hop ind på https://www.w3schools.com. Vi vil senere vende tilbage til W3schools, når vi skal kode html og css.

Nem import af data fra Excel til et databaseprogram Excels format er umuligt at importere i database-programmer, med mindre du arbejder med Access, og Access virker ikke på Mac. Til gengæld kan du Excel gemme din tabel i .csv formatet. Hvis du gemmer dit tabel i Excel (eller fra et andet regneark) i .csv formatet, så kan du importere dine tabeller uden problemer i alle databaseprogrammer, herunder SQLite. Jeg anvender SQLite i opgaverne til lærebogen her. I SQLite har en import-funktion under File > Import, og andre databaseprogrammer vil typisk have samme muligheder. Det gælder også, hvis du henter en .csv fil med landedata fra Verdensbanken, tal fra Danmarks Statistik eller andet.

Link til toppen af siden.

14.2 Hackning vha. SQL injections

Du ved nu, at man bruger SQL til at hente informationer ud af databaser med. Du ved også, at man kun kan 4 ting med en database: Create, Read, Update og Delete (CRUD).

SQL kommandoen “DROP DATABASE testDB” vil slette hele databasen “testDB”.

Formularer og søgefelter giver brugeren adgang til at arbejde med databasen. Hvis en bruger er ondsindet, kan brugeren forsøge at slette databasen ved at sætte SQL kode ind i et felt. Her har jeg sat kode ind i søgefeltet på hjemmesiden her:

Hvis man ikke passer på, så vil en bruger kunne slette min database på den her måde. Det kaldes SQLInjections, og det er en helt almindelig form for hackning.

Link til toppen af siden.

14.3 Opsummering på databaser

Det meste af det, som du skal kunne omkring databaser, har jeg opsummeret i videoen her. Det gælder emner som:

• Entiteter og relationer
• Normalisering
• Primærnøgler og fremmednøgler
• Redundans
• Relationer
• Basis SQL kode

Her er en video, der opsummerer databaser. Jeg gennemgår alt databaseteori helt forfra. Fra hvad en database er, og til hvordan man kommer frem til en funktionsdygtig database. Jeg gennemgår entiteter, relationer, normalisering, primær- og fremmednøgler, redundans samt relationer. Til sidst viser jeg dig lidt SQL kode, som man bruger til at kommunikere med databasen med.

Kapitel 15. Frontend kode 1. HTML

Frontend kode er kode, man bruger i frontend delen af en app. Du ved allerede fra kapitel 15, at vi bruger sproget SQL til databaser. Tilsvarende bruger vi kodesprogene HTML, CSS og JavaScript til at kode frontend løsninger. HTML, CSS og JavaScript kan som de eneste sprog læses direkte i en browser.

Vi bruger sprogene således:

• HTML (Hyper Text Markup Language) er vores fundament. Vi bruger det til at vise tekst og billeder og strukturere sidens layout og indhold
• CSS (Cascading Style Sheet) bruger vi kun til udseendet. Hvis en tekst skal have hvid farve og baggrunden skal være mørkeblå, så bruger vi CSS
• JavaScript bruger vi til at lave dynamisk indhold frontend. Dynamisk vil sige, at resultatet af koden kan ændre sig alt afhænig af situationen. Et eksempel er et javaScript, der f.eks. kan skrive “Godmorgen” til brugeren, hvis klokken er før 12 og “Godaften”, hvis klokken er over 18.

Du kan spørge, hvorfor man ikke samler det hele i et sprog. Svaret er, at der aldrig har været og aldrig kommer en samlet plan for det her. Alle hjemmesider bruger HTML, CSS og eventuelt JavaScript frontend.

Link til toppen af siden.

15.1 Introduktion til HTML og W3schools

HTML er som sagt nævnt for alle hjemmesider. Lad os kikke lidt på et eksempel, som du også kan se i videoen.

Lige som i videoen prøver jeg min kode af hos w3schools.com/html/default.asp, din bedste ven på nettet. Uundværlig for næsten alle, der arbejder med hjemmesider, og du kommer til at bruge W3schools meget.

Jeg har basis HTML kode ind til venstre. Så har jeg klikket på den grønne “Run” knap, og så ser jeg resultatet til højre. Resultatet er endnu kun sort-hvidt, når der skal farver på dvs. styling, så skal vi bruge sproget CSS. Mere om CSS i et senere afsnit.

Link til toppen af siden.

Forstå: <html>, <h1>, <p> tagsne

TAG	FORKLARING	W3SCHOOLS REFERENCE
<!DOCTYPE html>	Tagget fortæller, at vi bruger den seneste version af HTML	w3schools.com/html/html_basic.asp
<html>…</html>	Start og slut tag på alt HTML kode. Det fortæller browseren, at vi taler “html’sk”.	w3schools.com/html/html_basic.asp
<h1>…</h1>	<h1> betyder “heading 1” eller overskrift 1. Der findes op til 6 overskrifter. <h1> er den største. Du vil senere lære at skifte farve og størrelse på taggets indhold med CSS kode.	w3schools.com/html/html_basic.asp
<p>…</p>	<p> betyder”paragraf”. På dansk “brødtekst”	w3schools.com/html/html_basic.asp

Link til toppen af siden.

<head> og <body> er semantiske tags

Der er altid kun 1 “head” og 1 “body” tag på en html side. De 2 tags kaldes “semantiske tags”. De viser ikke noget i sig selv, men de bruges til at holde orden på resten. Man siger, at de udgør en “sektion”, f.eks. en head eller en body sektion.

Tænk på dem som bokse, man kan lægge forskellig kode i. Mennesker er også delt op i head og body. Modsat mennesker så er det kun indhold i <body> området altså “maven” af koden, som vi viser frem :-).

Link til toppen af siden.

17.2 Opsummering: De vigtigste regler for HTML kode

Her er en kort opsummering over de vigtigste regler for HTML kode. Hvis det virker som en stor mundfuld, så tag det roligt. Når du begynder at kode, vil de føles mere naturlige.

NR	REGEL	EKSEMPEL
1	Alle tags starter med “<” og slutter med “>”	<html>
2	Mange tags (alle i eksemplet) har et starttag og et sluttag. Sluttagget starter med en skråstreg	<h1>…</h1>
3	Tags er inde i hinanden. Vi siger, at der nestede eller flettede Det tag, man starter med sidst, afsutter man slutter man først	<head> <title>…</title> </head>
4	Vi starter og slutter med <html>	<html>. …. </html>
5	Vi har 2 områder. Et <head> område og et <body> område. Alle andre tags, bortset fra <html> ligger inde i disse tags	<head … </head> <body>…</body>
6	Alt sideindhold, med undtagelse af <title>, ligger i <body> tagget	<body><h1>…</h1> </body>
7	Tags kan være åbne. Dvs. at de har et starttag og et sluttag. De har et indhold imellem tagsne.	<h1>…</h1>
8	Tags kan også være lukkede. Så starter og slutter de i samme “< >”. <br> bruges til at lave et linjeskift, mens <img> bruges til at indsætte billeder med	<br> <img src…. >

Link til toppen af siden.

17.3 Gode råd, når du koder

Snart skal du i gang med at kode. Her er et par få, gode råd:

• “Test often fail early”. Test meget og ofte, så opdager du lettere dine fejl
• Jo mere irriteret du er, jo tættere er du på at finde fejlen
• Hold orden, så finder du nemmere dine fejl. Se nederst i afsnittet.
• Skriv HTML kode med småt. Ikke f.eks. <BODY><H1>…</H1></BODY> men <body><h1>…</h1></body>. Tagget <!DOCTYPE html> er en lille undtagelse.

Alle, jeg gentager ALLE laver fejl, når de koder. Det er en del af læringen, for fejlene er med til at gøre dig dygtig. Jeg påstår, at du ikke kan lave en fejl i HTML, som jeg ikke selv har prøvet at lave :-). I øvrigt er HTML et meget robust sprog. Du kan komme ud for, at det virker, selvom du har lavet et par småfejl.

Link til toppen af siden.

Vær doven. Hvis du holder orden, så finder du nemmere fejlene

Dovenskab lønner sig i kodning. Hvis du holder orden, finder du nemmere fejlene.

Selv om du måske ikke er et ordensmenneske, så hold orden, når du koder. Det lønner sig, du finder hurtigere dine fejl.

Jeg holder orden i HTML på den måde, at når jeg starter et nyt tag inde i et andet tag, så rykker jeg koden 2 pladser mod højre. Når jeg afslutter tagget, rykker jeg tilsvarende teksten 2 pladser mod venstre.

Link til toppen af siden.

17.4 Side, hjemmeside eller site

Desværre bruger man begreber omkring hjemmesider lidt i flæng.

• En SIDE er en enkelt HTML fil, som man kan se i en browser
• Et SITE er en komplet hjemmeside. Et site kan være masser af HTML filer, billeder og videoer, som hører til. På dansk kalder man et SITE for en hjemmeside

Link til toppen af siden.

17.5 Mere orden: “Separation of concerns”

Et site kan som sagt bestå af mange forskellige filer, ikke kun HTML filer.

Det er meget vigtigt, at du holder en skarp opdeling af dine filer. Princippet er så vigtigt, at det er en konvention (overordnet regel) for at lave hjemmesider. Princippet hedder “separation of concerns”.

NR	REGEL
1.	Alle filer skal ligge i 1 og kun 1 overordnet mappe. Det kalder vi for en projektmappe eller rod-mappen
2.	Separation of concerns. De forskellige typer filer skal ligge i hver deres mappe: Alle HTML filer skal ligge i projektmappen Alle billedfiler ligger vi en mappe, vi kalder for “billeder” eller “images” Alle CSS filer ligger vi en mappe, vi kalder for “css” eller “style2 osv. osv. med andre typer filer
3.	Du må kun bruge engelske bogstaver, når du navngiver filer og mapper. Du må heller ikke bruge hverken mellemrum eller tegn, der kan opfattes matematisk. Start altid med små bogstaver
4.	Den HTML side, du vil have som forside, skal altid hedde ”index.html”

Her er et eksempel:

• Jeg har lavet et site, der handler om Sydfyn. Det ligger i en projekt- eller rodmappe, som jeg har kaldt “Sydfyn”.
• Inde i mappen ligger mine 3 HTML filer direkte i projektmappen
• I mappen “images” ligger alle mine billeder
• I mappen “styles” ligger min(-e) CSS fil(-er). Vi kommer til CSS senere
• Ingen brug af æ, ø eller å. Ikke kalde en fil for “fåborg”, den skal hedde “faaborg”
• Min startside hedder index.html

Link til toppen af siden.

17.6 Mer’ HTML: Tabeller, billeder, lister, links

Du har nu en grundviden om HTML, og du kan koden en basis side.

Tabeller

Tabeller er meget brugbare på hjemmesider. Vi bruger det til at strukturere indhold, hvis vi f.eks. vil have 2 billeder til at stå ved siden af hinanden. Mange gange ser brugerne slet ikke, at vi har sat en tabel op.

Der findes 4 tags, du skal kende

• <table> og </table> starter og slutter en tabel
• <tr> og </tr> starter og slutter en tabelrække. Vi bygger altid op i rækker, ikke i søjler
• <th> og </th> starter og slutter en tabel celle med en overskrift i. Teksten centreres og skrives med fed
• <td> og </td> starter og slutter en tabelcelle med almindelig tekst
• Alle rækker skal have lige mange enten <th> eller <td> celler
• Du kan slå celler sammen både vandret og lodret

Her er et eksempel. Bemærk strukturen og bemærk, at jeg har sat en lille attribut (border=”1″) på tabellen. Ellers ville stregen i tabellen være usynlig.

Læs mere inde på W3schools.asp under tabeller: https://www.w3schools.com/html/html_tables.asp

Link til toppen af siden.

Billeder

Hjemmesider bugner af billeder, så selvfølgelig skal du lære at indsætte et billede. Det er heller ikke så svært. Du skal bruge koden her <img src=”MIT BILLEDE.jpg” alt=”OVERSKRIFT PÅ BILLEDE”>. Mine STORE BOGSTAVER skal du erstatte, hvis du vil kopiere koden. Her er et indsat billede.

Det vigtige er koden src=”…..”. Inde i anfrselstegnene skal du angive billedets nøjagtige navn og angive nøjagtigt, i hvilken mappe billedet ligger. Hvis du kikker i afsnit Separation of concerns, så jeg har lagt mine billeder i mappen “images”. Hvis jeg vil have fat i et billede i mappen, der hedder “faaborgBy.jpg”, så bliver min kode <img src=”images/faaborgBy.jpg” alt=”Faaborg By”>.

Alt-tagget bruger man til at fortæller brugeren, hvad der på vej, hvis forbindelsen er dårlig og billedet ikke downloader hurtigt nok.

Se mere hos W3schools.com på w3schools.com/html/html_images.asp.

Link til toppen af siden.

Lister

Vi bruger gerne lister på hjemmesider. De findes i 2 grundudgaver. Enten med prikker, ellers med numre. Koden er enkel.

• Start og slut med <ul>…</ul>, hvis du ønsker en liste med prikker. <ul> står for “unordered list”
• Start og slut med <ol>…</ol>, hvis du ønsker en liste med numre. <ol> står for “ordered list”
• Hvis vil have indrykket en liste, skal du bare starte en ny liste inden i din liste

Læs mere om lister på w3schools.com/html/html_lists.asp. Link til toppen af siden.

Link til toppen af siden.

Links

Vi bruger naturligvis masser af hyperlinks eller bare links, når vi hopper fra den ene side til den anden. Koden kan se sådan ud: <a href=”www.w3schools.com>Link til W3schools</a>.

Vi starter med <a href=” …”>, og inden i anførselstegnene sætter vi adressen på det, vi vil linke til. Næste lige som med billeder. Du kan linke til emner både på nettet og på dit eget site. Vi afslutter med </a>. Inde i tagget skriver vi, hvad brugeren skal læse. I eksemplet ovenfor er det “Link til W3schools”. Det kan se sådan ud. Bemærk at HTML farver linket blåt til højre.

Du skal dog vide, at der findes flere slags links. Koden herunder laver et link til en email.
<a href=”mailto:lblj@ibc.dk”>Send email</a>. Læs mere på https://www.w3schools: w3schools.com/html/html_links.asp.

Link til toppen af siden.

17.7 Iframes

En iframe er en stump kode, som kan lave et “vindue” over mod notet indhold på nettet, som befinder sig et helt andet sted. I det lille eksempel her laver jeg en <iframe> eller et “vindue” til AGF’s hjemmeside. AGF’s hjemmeside ligger på www.agf.dk, men alligevel kan jeg se det på min hjemmeside.

Du kan se mere om iframes hos W3schools på w3schools.com/html/html_iframe.asp.

Du kan også indsætte videoer fra YouTube. Se evt. Vejledning 4. Indlejr en video fra YouTube. Du behøves ikke at forstå koden, bare følg vejledningen, kopier koden og sæt den ind.

Link til toppen af siden.

17.8 Undgå problemer med æ, ø og å

Nedenfor er der noget tekst med mange æ, ø og å’er.

Hvis du ser det i en browser, så kan du risikere nedenstående. Det er ikke noget kønt syn. Browserne forstår kun engelske bogstaver.

Der er hjælp at hente. Hvis du indsætter koden <meta charset=”utf-8″> i din <head> sektion, så kan browseren godt tolke danske bogstaver.

Nu virker det:

Der findes andre former for meta tags, men det kommer vi til i kapitel 18.

Link til toppen af siden.

Kapitel 18. Frontend kode 2. CSS

Vi kan lave meget med HTML, men hvad udseende angår, kan vi kan ikke lave andet end hvid baggrund og sort skrift. Vi har med andre ord ikke mulighed for at style i HTML.

Det har vi til gengæld i sproget Cascading Style Sheets eller bare CSS. CSS handler kun om styling, dvs. farver, skrifttyper, placeringer og meget mere. I videoen har jeg lavet en intro om CSS.

Her er en hjemmeside uden noget CSS:

Her er så den samme side med lidt CSS. Kønt er det ikke, men vi er på vej.

Link til toppen af siden.

18.1 CSS opbygning

CSS er ret simpelt i sin opbygning. Se evt. figuren ovenfor.

• Først skriver du det tag, det drejer sig om. F.eks. h1
• Så skriver du egenskaben. F.eks. background-color, color, text-align mv.
• Til sidst skriver du den værdi, egenskaben skal have. F.eks. “lightblue”
• Til aller sidst sætter du et semikolon

Her er en oversigt:

EKSEMPEL	KODE	FORKLARING
Skrift	h1{ font-family: Calibri; font-size: 30px; text-aling: center; }	Styler tagget <h1> med en skrifttype, størrelse og centrering
Farver	h1{ color: blue; } p{ color: #ffc0cc; }	Styler tagget <h1> med farven blå Styler tagget <p> med farven #ffc0c. Alle farver har en 6-cifret kode (se nedenfor)
Baggrund	body{ background-color: 000fff; background-image: url("images/mitBillede.png"; }	Styler tagget <body> med en baggrundsfarve og et baggrunds billede

Link til toppen af siden.

18.2 Hvor skal jeg lægge min CSS kode

Man kan lægge koden 3 steder.

• Ved selve tagget
• Øverst på den enkelte HTML side
• I en fil for sig selv, kaldet et eksternt stylesheet

Link til toppen af siden.

1. Metode. Ved selve tagget (inline CSS)

Her styler du ved selve tagget. Nyttigt, hvis du skal prøve noget af eller øve dig, men hvis du skal gøre det ved alle tags på alle sider, så får du et kodnings- og opateringshelvede:

Inline styling foregår ved, at du inde i selve start tagget skriver: style=”……..;”. Et eksempel:
– <h1 style”color:blue;text-align: center;”>This is a heading</h1>. Nu får <h1> blå farve og bliver centreret.

Link til toppen af siden.

2. Metode. Øverst på den enkelte HTML side (internal CSS)

Igen praktisk til test. Til forskel fra før kan vi nu style f.eks. alle <p> tags på en gang. Til gengæld vil det stadig være arbejdskrævende at gøre det på alle HTML sider.

Du skriver CSS’en oppe i <head> sektionen og pakker det ind i et tag, <style>. Selve CSS’en skriver vi selvfølgelig på samme måde som før.

Link til toppen af siden.

3. Metode. Den professionelle måde: Eksternt stylesheet

Kan du huske princippet om “separations of concerns”? Vi kan lave en fil kun med CSS, og så lave referencen til filen øverst på hver side. Vi følger vores princip på smukkeste vis, når vi adskiller HTML og CSS kode frem for at blande det sammen.

CSS’en filen, dvs. det eksterne stylesheet mystyle.css, kunne se sådan her ud:

Hvis vi så laver en præcis reference øverst på hver HTML side, så behøves vi kun at rette stylesheet 1 sted. Ændringen vil slå igennem på alle sider.

Referencen laver du i <head> sektionen. Den ser sådan ud:
– <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

Se figuren nedenfor

Link til toppen af siden.

18.4 Hvordan husker jeg dog alt det her?

Simpelt. Alt står inde på W3schools, og du skal nok lære det hen ad vejen, når du koder. Her er nogle referencer:

• CSS sprogets opbygning: w3schools.com/css/css_syntax.asp
• CSS farver: w3schools.com/css/css_colors.asp
• 3 måder at indsætte CSS på: w3schools.com/css/css_howto.asp

Link til toppen af siden. .

18.5 Gode råd til din kodning

• “Test often, fail early”. Hellere hyppige småtest end få store, du fanger fejlene bedre
• Udnyt hierarkiet i koden. Hvis du styler på <body>, styler du også på alle tags inden i body. F.eks. <h1>, <h2>, <p>, <ul> m.fl. Hvis du vil have en skrifttype, der f.eks. gælder overalt, så lav stylingen på <body> i stedet for <h1>, <h1>, <p> osv. enkeltvis
• Brug W3Schools så meget, som du kan

Link til toppen af siden.

18.6 Kik fremad

HTML og CSS i kombination har et utal af muligheder. Hvad siger du f.eks. til menuen her leveret fra https://www.w3schools.com/css/css_navbar.asp? Ren HTML og CSS.

Link til toppen af siden.

Kapitel 19. SEO/søgemaskine optimering

SEO betyder Search Engine Optimazion eller søgemaskine optimering. Den består af 2 dele

• Passiv optimering. Hvis man følger bestemte regler, så kommer man højere i søgemaskinerne
• Aktiv optimering. Når du aktivt går ind og betaler for, at du kommer højere i søgemaskinerne. Man køber såkaldte ad-words hos Google

Vi skal i kapitlet her kun kikke på passiv optimering.

Personligt har jeg en bekendt, som havde en lille hjemmeside med en super god adresse. Her solgte han små spil for måske 50 kr pr spil, og han solgte højest for måske for kr. 2.000 om året. Han blev kontaktet af en virksomhed, der udbyder online spil. Han endte med at sælge sit domænenavn for ca. kr. 300.000. Så meget kan de bedste adresser på internettet være værd.

Folk betaler enorme summer for annoncering hos Google. Google sælger ord som f.eks. “Charterferie” som ad-word på auktion. Den, som betaler mest, ligger øverst. Man betaler pr klik. De dyreste adwords i Danmark er Online casino. Google tjener 320 kr. hvis du klikker på den øverste annonce i søgningen. Hvis du har en webshop, kan du roligt regne med, at 5 – 10% af din omsætning ryger lige i Googles lommer. I 2019 omsatte Google for ca. 135 mia dollars.

Google har med andre ord en enorm magt på nettet. Alle bejler til Google- prinsessen lige som i historien om “Klodshans”. Allerede nu skal du lære lidt om, hvordan du kan optimere din hjemmeside til “Google prinsessen”, som jeg kalder hende.

Et par regler, som du allerede nu skal kende og overholde

• Hav en <title> på din hjemmeside
• Hav 1 og kun 1 <h1> tag
• Brug “alt” tagget til billederne
• Brug <meta description>
• Hav orden på indholdet i både og tagget. Dvs. at de søgeord, som du vil findes på, helst skal gå igen i både , url, <h1> og <meta description>. Samt også gerne i teksen uden, at det bliver for påtaget</p>
• Google Prinsessen hader gentagelser. Kopier aldrig en side helt og holdent, hun ser det øjeblikkeligt og du ryger nederst i søgemaskinen

Meta koder ses ikke af brugeren. Meta koder er rettet mod visning af siden og mod søgemaskiner. Det, du skriver i <meta name=”description” content=”….”> er det, som Google viser, når du søger.

Her har jeg søgt på AGF og superliga. Jeg har rammet det ind, som hjemmesiderne har skrevet i deres <meta name=”description” content=”…”> koder.

19.1 Et eksempel på søgemaskineoptimering

Jeg vil lave en fanside for AGF (hvad ellers?)Jeg udvælger et par ord, som jeg vil findes på. F.eks. “AGF”, “Fan”, “Superliga”. Her er min kode.

Kommentarer til koden. Bemærk at alle metatags skal placeres i sektionen lige som </p>. Hvis du vil læse mere om meta tags så brug linket her til W3schools: https://www.w3schools.com/tags/tag_meta.asp

LINJE	TAG	FORKLARING
5	<title>	Jeg har lavet en hel sætning. Alle mine 3 søgeord indgår i sætningen
6	<meta charset=”UTF-8″>	Sørger for, at du ikke får problemer med æ, ø og å
7	<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>	Hjælper din side til at se godt ud på både brede (pc/Mac) skærme og smalle (mobiltelefon) skærme
8	<meta name=”description” content=”…”>	Er den metakode, vi bruger til at beskrive sidens indhold over for søgemaskinerne. Lav en rigtig sætning, så indholdet præsenteres pænt i søgemaskinerne
10	<meta name=”keywords” content=”…”>	Nøgleord, som du ønsker at blive fundet på plus alle andre nøgleord, du vil findes på. Er ikke obligatorisk mere
11	<h1>AGF: Kåmsådehviiii</h1>	Alle sider skal have en <h1> overskrift. I overskriften skal nøgleordne helst indgå på en naturlig måde.
Øvrigt indhold	<p> og alle mulige andre tags på siden	Lad nøgleordne indgå med passende længe og på en naturlig måde.

Afslutning

— SLUT PRUT FINALE, DER ER IKKE MERE TEORI TIL INFORMATIK C, SOM DU SKAL LÆRE. Herfra handler det kun om eksamen og årsafslutning.

.

Link til toppen af siden.