Lærebog til emne 3. Kapitel 14 - 19

Indholdsfortegnelse

Kapitel 14. Introduktion til backend/serverside programmering

I hele modul 2 arbejdede vi med frontend kodning. Nu er turen kommet til backend, så i hele dette modul skal vi arbejde med backend kodning.

Inden du går i gang med kapitlet: Jeg har valgt sproget PHP til backend og MySQL til databasen. Du finder vejledning til installation af nødvendig software og daglig arbejdsgang i vejledning 7. PHP og MySQL

14.1 Det store overblik over kodesprog

Vores udgangspunkt for at kode er modellen her, som du efterhånden kender ret godt:

Du ved, at frontend kode er HTML, CSS og javaScript, og du har prøvet alle sprogene af. Du ved også, at frontend kode kan tolkes alene af en browser, og at brugerne kan se din frontend kode. De må gerne se noget af koden, f.eks. hvordan jeg opbygger sidens udseende.

Sådan bruges serverside/backend sprogene

Man kan i princippet bruge næsten hvilket som helst sprog backend. Man skal jo selv installere det, og det skal bare kunne arbejde sammen med frontend og med databaser
Nogle få sprog dominerer som backend sprog. Her er et overblik

SPROG	FORKLARING	DATABASE
C# (udtales c-sharp) /ASP.NET	C# er Microsofts sprog. Takket være en fænomenal editor Visual Studio er c# blevet super udbredt. Ikke kun til hjemmesider, men også til mange ERP systemer. C# og ASP.NET har normalt en MS-SQL database tilknyttet	MS-SQL. MS-SQL står for Microsoft
PHP	PHP står for “PHP: Hypertext Preprocessor” er et open-source sprog, udviklet af entusiaster og mulige Microsoft-hadere. Det er udviklet specielt til webapplikationer/hjemmesider. PHP kobles normalt sammen med databasen MySQL, som også er open-source. Den mest kendte hjemmeside med PHP i Danmark er TV2s hjemmeside, og Facebooks hjemmeside er også skrevet i PHP	MySQL
JavaScript	Du læste rigtigt. JavaScript stormer frem som backend-sprog. Man kalder systemet for NodeJS-	Ingen bestemt, men kan selvfølgelig med JSON
Phyton	Phyton bliver åbenbart mere og mere populært, fordi sproget er tættere på menneskesprog end de andre sprog	Ingen bestemt

Backend eller server-side sprogene ligner hinanden meget. Hvor HTML, CSS og javaScript er 3 helt forskellige sprog, så ligner serverside sprogene hinanden. Lærer du et sprog, vil du nemt kunne skifte til et andet sprog. Lige som det er nemt at lære portugisisk, hvis du i forvejen har lært spansk.

I bogen her koncenterer jeg mig om PHP og senere MySQL databaser. Grunden er, at jeg senere gerne vil arbejde med CMS systemet WordPress. WordPress er det mest udbredte CMS system i verden, og WordPress er skrevet i PHP.

Til toppen af siden.

14.2 Hvad kan et serverside sprog

PHP kan det samme som så mange andre dynamiske sprog. F.eks.

Generere dynamisk indhold
Åbne, læse, skrive i, lukke og slette filer
Opsamle data fra formularer
Arbejde med cookies
Kommuniker med din database, dvs. oprette, læse, opdatere og slette data (CRUD)
Kontrollere brugeradgang
Kryptere data
… og meget mere

Faktaboks. Du skal installere en server for at køre PHP lokalt

Som nævnt skal man have installeret en server for at kunne køre et backend eller server-side sprog. Det er også tilfældet. Du skal installere en Apache server, og det gør du uden de helt store sværdslag med programmet XAMPP.

I Vejledning 7. PHP og MySQL i Visual Studio Code viser jeg dig, hvordan du installerer XAMPP. Det er ikke så svært :-).

Når den er installeret, skal du aktivere nogle tillægsprogrammer i Visual Studio Code. Det er heller ikke så indviklet, som det lyder.

Til sidst skal du lære arbejdsgangen i forhold til at skrive og teste kode. Arbejdsgangen er ikke helt så elegant som med HTML, CSS og javaScript, men så længe du får hjælp til koden, så er det langt bedre end at skrive den i hånden.

Til toppen af siden.

14.3 Klargøring til at arbejde med PHP og MySQL

For at arbejde med PHP og senere MySQL databaser, skal du installere en lokal server. Serveren hedder Apache. Du finder vejledning til installation af nødvendig software og daglig arbejdsgang i vejledning 7. PHP og MySQL

14.4 Vi starter som sædvanligt hos W3schools

W3schools har en fyldig sektion kun med PHP kodning. Den tager vi hul på nu. Du finder sektionen på https://www.w3schools.com/php/default.asp.

Faktaboks: Få online hjælp til PHP

Organisationen bag sproget PHP har en hjemmeside, den hedder (selvfølgelig) https://www.php.net/. Jeg bruger W3schools meget flittigt i bogen her, men når du er ud over begynderstadiet, så vil https://www.php.net/ være god for dig også.

>Besøg gerne https://stackoverflow.com/, hvor du kan stille alle IT spørgsmål af ALLE typer sværhedsgrader.

14.4 Det første PHP kode, store/små bogstaver og kommentarer

Det første eksempel hos W3schools ser sådan ud:

Du lægger sikkert mærke til, at det her ligner HTML filer præcis, som du kender det. Vi kan flette PHP ind mellem HTML, CSS og javaScript som vi ønsker det. Der er dog nogle forskelle:

Filen skal gemmes under “efternavnet” .php, ikke .html
Den skal ligge i en mappe, som ligger på en aktiv PHP server
Man starter PHP med <?php og slutter med ?>. Præcis som man kan starte og slutte et javaScript med <script>……</script>
Echo = skrive på skærmen
En sætning afsluttes med et semikolon

PHP er ikke “case sensitiv”

At være “case sensitiv” betyder, at sproget betragter små og store bogstaver som forskellige. Du har oplevet det før. Hverken HTML, CSS eller javaScript er case sensitive, men det meget populære Microsoft sprog C# er.

HTML koden <p>Hej verden</p> virker lige så godt <P>Hej verden</P>
CSS koden color: lightblue; virker lige så godt som COLOR: LIGHTBLUE;
Til gengæld vil en reference til et stylesheet ikke virke, hvis filen ikke er stavet helt rigtigt. Hvis du har et stylesheet, der hedder “mystyles.css”, så virker sætningen herunder:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Til gengæld virker den ikke, hvis du bare laver et bogstav med store bogstaver i filnavnet
<link rel=”stylesheet” type=”text/css” href=”mYSTtyles.css”>
PHP er ikke case sensitiv, så alle 3 sætninger herunder virker

Det er en god idé grafisk at skrive både HTML, CSS, javaScript og PHP med småt, men du bestemmer i bund og grund selv.

Kommentarer

Meget simpelt: Sæt 2 skråstreger eller en havelåge foran linjen, så er linjen en kommentar. Læs mere på https://www.w3schools.com/php/php_comments.asp.

Til toppen af siden.

14.5 Variable

Eksemplet er hentet fra https://www.w3schools.com/php/php_variables.asp.

Du opretter (dvs. deklarerer) en variabel ved at skrive $ foran navnet
Det er god stil (separation of concerns) at deklarere (= oprette) variablene i starten af koden. Så har du et overblik over, hvilke variable, du har i spil
Giv din variabel et passende navn, men lad som sædvanligt være med at bruge danske bogstaver, mellemrum eller matematiske tegn. Eksempler
- $txt
- $x
- $7

Her er et eksempel: https://www.w3schools.com/php/phptryit.asp?filename=tryphp_var. Bemærk, at jeg bruger kommandoen “echo” for at skrive resultatet på skærmen. Du kan også bruge kommandoen “print”, men den er lidt anderledes. Se evt. https://www.w3schools.com/php/php_echo_print.asp

Tilføj overskriftLærebog til emne 3. Kapitel 14 – 19

Kapitel 14. Introduktion til backend/serverside programmering

I hele modul 2 arbejdede vi med frontend kodning. Nu er turen kommet til backend, så i hele dette modul skal vi arbejde med backend kodning.

14.1 Det store overblik over kodesprog

Vores udgangspunkt for at kode er modellen her, som du efterhånden kender ret godt:

Dette billede har en tom ALT-egenskab (billedbeskrivelse). Filnavnet er arkitektur-store-overblik-1024x655.png

Andre ting, f.eks. hvordan jeg håndterer forespørgsler, bruger databaser mv. vil jeg gerne holde for mig selv. Vi har derfor backend kode. Backend kode og for den sags skyld databaser og SQL skal installeres på en server.<figure class=”wp-block-table”><table class=”lightbrown”><tbody><tr><td><h4>MVC er en moderne programmeringsarkitektur</h4><p>Du kender efterhånden frontend-backend-database til ukendelighed, men det er faktisk ikke hele sandheden. I dag arbejder man med MVC, Model-View-Controller. View er frontend, Model er datakliden (databasen) men også adgangen ned i databasen fra backend. Controller er logikken, dvs. backend. Det ligner frontend – backend – database, men strukturen er mere dynamisk. Noget af Model hører hjemme under backend.</p><img class=”wp-image-1900″ style=”width: 300px;” alt=”Model – View – Controller” src=”https://bliv-klogere.ibc.dk/wp-content/uploads/2020/08/mvc.png”></td></tr></tbody></table></figure>

Sådan bruges serverside/backend sprogene

Man kan i princippet bruge næsten hvilket som helst sprog backend. Man skal jo selv installere det, og det skal bare kunne arbejde sammen med frontend og med databaser
Nogle få sprog dominerer som backend sprog. Her er et overblik

SPROG	FORKLARING	DATABASE
C# (udtales c-sharp) /ASP.NET	C# er Microsofts sprog. Takket være en fænomenal editor Visual Studio er c# blevet super udbredt. Ikke kun til hjemmesider, men også til mange ERP systemer. C# og ASP.NET har normalt en MS-SQL database tilknyttet	MS-SQL. MS-SQL står for Microsoft
PHP	PHP står for “PHP: Hypertext Preprocessor” er et open-source sprog, udviklet af entusiaster og mulige Microsoft-hadere. Det er udviklet specielt til webapplikationer/hjemmesider. PHP kobles normalt sammen med databasen MySQL, som også er open-source. Den mest kendte hjemmeside med PHP i Danmark er TV2s hjemmeside, og Facebooks hjemmeside er også skrevet i PHP	MySQL
JavaScript	Du læste rigtigt. JavaScript stormer frem som backend-sprog. Man kalder systemet for NodeJS-	Ingen bestemt, men kan selvfølgelig med JSON
Phyton	Phyton bliver åbenbart mere og mere populært, fordi sproget er tættere på menneskesprog end de andre sprog	Ingen bestemt

Dette billede har en tom ALT-egenskab (billedbeskrivelse). Filnavnet er php.png — PHP’s logo

CMS står i øvrigt for Content Management System, og man bruger det til at skabe og vedligeholde hjemmesider med. Hvis du er i tvivl om, hvad et CMS system er, så repeter videoen her fra videoer 1. CMS og WordPress: <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/wVK9bxX8ask” frameborder=”0″ allowfullscreen=”” allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture”></iframe>

Til toppen af siden.

14.2 Hvad kan et serverside sprog

PHP kan det samme som så mange andre dynamiske sprog. F.eks.

Generere dynamisk indhold
Åbne, læse, skrive i, lukke og slette filer
Opsamle data fra formularer
Arbejde med cookies
Kommuniker med din database, dvs. oprette, læse, opdatere og slette data (CRUD)
Kontrollere brugeradgang
Kryptere data
… og meget mere

<figure class=”wp-block-table”><table class=”lightbrown”><tbody><tr><td><h4>Faktaboks. Du skal installere en server for at køre PHP lokalt</h4><p>Som nævnt skal man have installeret en server for at kunne køre et backend eller server-side sprog. Det er også tilfældet. Du skal installere en Apache server, og det gør du uden de helt store sværdslag med programmet XAMPP.</p><p>I vejledning MANGLER viser jeg dig, hvordan du installerer XAMPP. Det er ikke så svært :-).</p><p>Når den er installeret, skal du aktivere nogle tillægsprogrammer i Visual Studio Code. Det er heller ikke så indviklet, som det lyder.</p><p>Til sidst skal du lære arbejdsgangen i forhold til at skrive og teste kode. Arbejdsgangen er ikke helt så elegant som med HTML, CSS og javaScript, men så længe du får hjælp til koden, så er det langt bedre end at skrive den i hånden.</p></td></tr></tbody></table></figure>

Til toppen af siden.

14.3 Klargøring til at arbejde med PHP og MySQL

14.4 Vi starter som sædvanligt hos W3schools

W3schools har en fyldig sektion kun med PHP kodning. Den tager vi hul på nu. Du finder sektionen på https://www.w3schools.com/php/default.asp.

Dette billede har en tom ALT-egenskab (billedbeskrivelse). Filnavnet er w3schools-php-1024x504.png

Du kan editerer PHP online hos W3schools lige som du har gjort det med HTML, CSS og javaScript. Men det er kun fordi, at W3schools har installeret en ekstra server, der kan afvikle PHP. W3schools er skrevet i forløberen for C# og ASP.NET, som hedder ASP.<figure class=”wp-block-table”><table class=”lightbrown”><tbody><tr><td><h4>Faktaboks: Få online hjælp til PHP</h4><p>Organisationen bag sproget PHP har en hjemmeside, den hedder (selvfølgelig) <a href=”https://www.php.net/” target=”_blank” rel=”noreferrer noopener”>https://www.php.net/</a>. Jeg bruger W3schools meget flittigt i bogen her, men når du er ud over begynderstadiet, så vil https://www.php.net/ være god for dig også.</p><p>>Besøg gerne <a href=”https://stackoverflow.com/” target=”_blank” rel=”noreferrer noopener”>https://stackoverflow.com/</a>, hvor du kan stille alle IT spørgsmål af ALLE typer sværhedsgrader.</p></td></tr></tbody></table></figure>

14.4 Det første PHP kode, store/små bogstaver og kommentarer

Det første eksempel hos W3schools ser sådan ud:

Dette billede har en tom ALT-egenskab (billedbeskrivelse). Filnavnet er php1.png

Du lægger sikkert mærke til, at det her ligner HTML filer præcis, som du kender det. Vi kan flette PHP ind mellem HTML, CSS og javaScript som vi ønsker det. Der er dog nogle forskelle:

Filen skal gemmes under “efternavnet” .php, ikke .html
Den skal ligge i en mappe, som ligger på en aktiv PHP server
Man starter PHP med <?php og slutter med ?>. Præcis som man kan starte og slutte et javaScript med <script>……</script>
Echo = skrive på skærmen
En sætning afsluttes med et semikolon

PHP er ikke “case sensitiv”

HTML koden <p>Hej verden</p> virker lige så godt <P>Hej verden</P>
CSS koden color: lightblue; virker lige så godt som COLOR: LIGHTBLUE;
Til gengæld vil en reference til et stylesheet ikke virke, hvis filen ikke er stavet helt rigtigt. Hvis du har et stylesheet, der hedder “mystyles.css”, så virker sætningen herunder:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
Til gengæld virker den ikke, hvis du bare laver et bogstav med store bogstaver i filnavnet
<link rel=”stylesheet” type=”text/css” href=”mYSTtyles.css”>
PHP er ikke case sensitiv, så alle 3 sætninger herunder virker

Dette billede har en tom ALT-egenskab (billedbeskrivelse). Filnavnet er php2.png

Det er en god idé grafisk at skrive både HTML, CSS, javaScript og PHP med småt, men du bestemmer i bund og grund selv.

Kommentarer

Meget simpelt: Sæt 2 skråstreger eller en havelåge foran linjen, så er linjen en kommentar. Læs mere på https://www.w3schools.com/php/php_comments.asp.

Til toppen af siden.

Kapitel 15. Data, datatyper og kodestrukturer

For at komme videre med PHP er du nødt til at forstå noget om datatyper.

Du har mødt det før, faktisk allerede da du startede med Excel. Et eksempel. Hvis du skriver tallet 2020 i et felt i Excel, og det skal opfattes som tekst (f.eks. som et årstal), så er det nødvendigt at markere, at det er et tekstfelt. Hvis Excel opfatter et tal som tekst, så bliver teksten venstrestillet. Ellers er tal altid højrestillet.

Hvis et felt er markeret som et tekstfelt, så kan vi ikke lave beregninger med det. Det er heller ikke meningen med “2020”, da det er et årstal.

I javaScript har du også mødt det. Hvis du skal hente et tal ind fra et indtastningsfelt, og du er sikker på, at AppLap opfatter det som et tal, så brug getNumbers() frem for getText(). I eksemplet her (som er fra tidligere i bogen) er der brugt getText().

Både PHP og især javaScript er ret tolerant over for “udfyldende” datatyper, dvs. at man ikke behøves at være så nøjregnende med datatypen. Det gælder dog langt fra alle sprog og slet ikke databasesprog som SQL og MySQL. Vi kommer til SQL og MySQL i modulet om databaser.

Til toppen af siden.

15.2 Datatyper i PHP

Vha. datatyper kan du styre, f.eks. om et beløb skal vises med 0, 1 eller 2 decimaler. Her er en oversigt. Oversigten er fra https://www.w3schools.com/php/php_datatypes.asp

BETEGNELSE I PHP	DANSK OVERSÆTTELSE	FORKLARING
String	(tekst)-Streng	Bruges til tekster, f.eks. navne. Lige som i javaScript er tekst altid mellem gnyf’fer eller anførselstegn. Du må både bruge enkelt og dobbelt anførselstegn. BEgge herunder er gyldige $navn = “Erik Elev”; $navn = ‘Erik Elev’;
Integer	Heltal	1, 2, 3, -5, 1023 men aldrig med decimaler
Float eller double	Alle typer tal, også kommatal	Alle typer tal, f.eks. -123,234
Boolean	Boolsk varaibel	Enten sandt eller falsk. Spørgsmål som “Er du under 18 år”, “Vil du bestille frokost” vil være en boolsk variabel
Array	Array	En række med flere variable, så man har bedre styr på dem. Eksempel: $cars = array(“Volvo”,”BMW”,”Toyota”);
Object	Objekt	Et objekt er en udgave af en klasse. Hvis man siger, at en handelsskole-gymnasieklasse består af maks 30 elever, så kan man også i kodeverdenen kalde det for en “klasse”. Klasserne 1a, 1b, 1c, 2a, 2b osv er så alle objekter af klassen. Du har brugt klasser i CSS
NULL	NULL	Når variablen er helt tom, altså ikke talværdien “0” men en helt tom variabel
Resource	Resource	Resourcer er specielle PHP funktioner, f.eks. til at åbne en .zip fil

Faktaboks: Hvad er data casting

Lige som man har casting til X-faktor og lignende, så er der også casting i dynamisk programmering. Et eksempel: Årstal.Hvis jeg har en variabel, der hedder $year = 2020 (husk, du må ikke bruge æ, ø og år, så ingen “$år”), så er det egentlig et tal. Hvis jeg enten vil tvinge en variabel til at være noget streng, så kan jeg skrive koden “string” foran: “string $year;”.Så vil det altid være en streng..Hvis jeg har $year som et tal, så kan jeg tvinge (caste) det til at være en streng med kommandoen “$year = strval($year);”

PHP er et løst definderet sprog, og man behøves normalt ikke at bekymre sig så meget om at caste.

Til toppen af siden.

15.3 Strenge i PHP

Afsnittet her er fra https://www.w3schools.com/php/php_string.asp.

Her er nogle eksempler på funktioner i PHP, som arbejder med strenge.

Til toppen af siden.

15.4 Tal i PHP

Afsnittet her er fra https://www.w3schools.com/php/php_numbers.asp.

Her er nogle eksempler på funktioner i PHP, som arbejder med tal. Du kan f.eks. finde ud af, om en variabel er et tal eller ej. Det kan være ret nyttigt, hvis en bruger f.eks. skal indtaste sin alder og skiver “Jeg er ung” i stedet for at skrive antal år, vedkommende er gammel. Bruger du funktionen her, så kan du give vedkommende en fejlmeddelelse.

Her er nogle eksempler på funktioner i PHP, som arbejder med tal.

Til toppen af siden.

15.5 Konstanter

En konstant er en værdi, der aldrig ændrer sig. Vi har ikke brug for at ændre den. Modsætningen til en konstant er en variabel, som vi kan ændre lige så mange gange, som vi vil. Det kan f.eks. være et stykke tekst, som vi vil genbruge, eller hvis vi vil have en bestemt omregningsfaktor.

Læs mere på https://www.w3schools.com/php/php_constants.asp

15.6 Operatorer i PHP

En operator kan være f.eks. “+”, “-“, “*” og “/”, dvs. plus, minus, gange og dividere.Som i alle dynamiske programmer har du et mylder af operatorer til din rådighed.

Det er ikke meningen, at du skal lære operatorer udenad. Det er nok, at du ved, hvor de findes, og at du kan slå dem op. Du kan se meget mere på https://www.w3schools.com/php/php_operators.asp, hvor du også har mulighed for at prøve operatorerne af. Her et skærmdump fra de arimetiske operatorer eller på dansk: Basis købmandsregning.

Her er en oversigt over nogle af de vigtigste operatorer.

OPERATOR	DANSK OVERSÆTTELSE	EKSEMPEL
Arimetic	Arimetiske, dvs. basis regnearter	Plus, minus, gange, dividere og potens regning
Assignment	Tildelingsoperatorer	Primært et lighedstegn, men i stedet for x = x + y, så kan man også skrive x += y ==
Comparsion	Sammenligningsoperator	Kan sammenligne 2 tal. Hvis man skriver 2 == 3, dvs “er 2 lig med 3”, så vil man få svaret “false”. Kodning er anderledes end matematik, når man ser på brugen af lighedstegn
Increment / decrement	Stigning/fald	Vi arbejder tit med tællere i loops. Hvis man skriver ++$x, så stiger x med 1, hver gang vi kommer til tallet i loopet
Logical	Logiske operatorer	logiske operatorer som AND, OR. F.eks. “IF (x = 1 AND y = 2), dvs. begge skal være sande

Til toppen af siden.

15.7 De mystistke lighedstegn: =, == og ===

Fra matematik ved du, at 2 + 2 = 4. Du ved også, at 2 + x = 4, hvor du så kan regne dig frem til, at x = 2.

Indenfor kodning bruger vi lighedstegn anderledes. Et enkelt lighedstegn er, i modsætning til matematik, et dynamisk lighedstegn. Det vil sige, at regnestykket kan ændre sig undervejs.

Regnestykket her giver ingen mening i matematik: x = x + 1, men det gør det i kodning.

Hvis vi skriver $x = $x + 1;, så giver det god mening. F.eks. i loops. Hvis vi har loopet igennem noget kode, så stiger vores tæller med 1. Var det et racerløb over 80 omgange, så kunne $x være antal omgange, der så tæller op med 1 hver gang den førende bil passerer start/mållinjen.

Hvis vi ønsker et statisk lighedstegn, så bruger vi bare dobbelt lighedstegn. F.eks. $x == $y. Den evalueres til enten “sandt” eller falsk”.

Vi har endda 3 lighedstegn: $x === $y. Hvis den er sand, skal værdierne både være ens men også have samme type. Hvis den ene er string eller float, og den anden er en integer, så er $x == $y sand mens $x === $y er falsk. Læs selv mere på https://www.w3schools.com/php/php_operators.asp.

Til toppen af siden.

15.8 Forgrening og betingelse

En klassiker. Programmet skal kunne tage beslutninger. HVIS (du er over 17 år og 9 måneder) SÅ (må du tage kørekort). Vi bruger IF-sætninger/forgrening og betingelse igen og igen i alle dynamiske sprog.

I eksemplet sætter vi $t = date(“H”);, dvs. $t er så timen på dagen. Hvis timen er mindre end 20, så skriver koden “Have a nice day”. Ellers “Have a nice night”.

IF-ELSE

IF-ELSE-ELSEIF

IF og ELSE kan hjælpe os til at vælge mellem 2 forskellige muligheder. I eksemplet er tidspunktet enten under 20, eller også er det over.

Hvis vi ønsker 3 eller flere muligheder, så skal vi have ELSEIF på banen. I eksemplet er der 3 valgmuligheder, men vi kan i princippet have uendeligt mange. Har vi mange muligheder, så bruger vi en lidt anden slags kode. Se næste afsnit om SWITCH.

SWITCH

Hvis vi har mange valgmuligheder, som gensidigt udelukker hinanden, så kan vi bruge SWITCH i stedet for IF-sætninger. Hvis vi har f.eks. 20 valgmuligheder, og nr. 2 er rigtig, så er der ingen grund til at koden løber de resterende 18 igennem. Det vil kun gøre koden langsommere. Eksemplet er fra https://www.w3schools.com/php/php_switch.asp.

Ved SWITCH afbryder vi koden, når vi har fundet svaret. Det ser sådan ud:

Du læser koden således:

SWITCH ($favcolor) starter kommandoen og vil afgøre noget ud fra variablen $favcolor
CASE er første spørgsmål. Er variablen “red”
- Hvis ja, så ECHO noget på skærmen og BREAK, dvs. afbryd SWITCH og fortsæt koden
- Hvis nej, så fortsæt til næste CASE
DEFAULT: Hvis ingen af CASE rammer plet, så ECHO teksten ved DEFAULT på skærmen

Til toppen af siden.

15.8 Arrays

En variabel kan kun indeholde 1 værdi. Vi kan ofte få brug for at gemme en flok variable “i en fælles kasse”, i stedet for at have en masse enkeltstående variable. Eksempel: Det er fint at gemme navnene navnene på alle elever i en klasse i et array frem for separate variabele.

Faktaboks: Hvordan oversætter man ordet “array”

Egentlig betyder “array” en række. I daglig IT-snak oversætter man sjældent ordet, men hvis du endelig vil oversætte det, så er det nok bedst at oversætte det med “en liste”

Selvfølgelig findes der arrays i PHP. Eksemplet er fra https://www.w3schools.com/php/php_arrays.asp.

Lad os starte med 3 forskellige biler f.eks. hos en bilforhandler. Dem gemmer vi i hver sin variabel. Det ser sådan ud:

Det er bare ikke så praktisk, hvis vi beder programmet finde en af bilerne. Løsningen er at lave et array. Hvis vi knytter en udskrift til, så ser det sådan ud:

Du læser koden således:

Linje 2. $cars er arrayet, som vi danner. Vi danner det ud fra 3 værdier: “Volvo”, “BMW” og “Toyota”.
Linje 3. Værdierne i arrayet har positioner. Den første har position 0, den næste position 1 osv. Hvis du vil have den første, så skal du skrive $cars[0]. Positionen er i firkantet parantes

I praksis har vi noget kode, som kan løbe (“loope”) arrays igennem og udskrive for os i stedet for, at vi skriver positionerne manuelt. Mere om det i næste afsnit dvs, afsnit 15.10 Loops.

Kort om forskellige typer arrays

Du skal kende til forskellige typer arrays, men vi behøves ikke at gå dybt ned i det teknisk. Du skal dog vide at:

Det array, som du så først, er et “indekseret” array. Hver værdi i arrayet har et indeks. Vi starter med 0, så 1, 2 osv. Det array, som du så ovenfor, er et indekseret array. Du kan godt have 2 ens værdier, men indekseringen sikrer, at du kan kende forskel. Lige som en primærnøgle i en database. I næste sektion gennemgår jeg databaser.
I et indekseret array dannes arrayets nøgler (dvs. 0, 1, 2 osv.) automatisk. Hvis du gerne selv vil bestemme, hvad nøglerne skal hedde, så skal du lave et associativt array. Det er ikke så svært, som det lyder. Se arrayet herunder: I stedet for, at 0, 1, 2 osv. er nøglen, så bliver det navnene (Peter, Ben, Joe).

Du kan have multi-dimensionelle arrays. Det betyder, at hver række (vi siger, at det er et lodret array) har mere end 1 værdi. I virkeligheden bliver hver række et array i sig selv. Det ligner en tabel efterhånden. Se nedenfor

Sortering i arrays

I PHP kan du, selvfølgelig, sortere i Arrays. Du kan f.eks. bruge nedenstående muligheder. Læs mere på https://www.w3schools.com/php/php_arrays_sort.asp.

Til toppen af siden.

15.9 Loops

Loops hænger ofte sammen med arrays.

Hvis vi har et array, f.eks. med alle navne på elever i en klasse, kan vi loope det igennem for at udskrive alle navnene. Vi starter ved det første navn og slutter, når arrayet er loopet igennem.

Et loop er altså noget, vi gentager et antal gange, indtil vi er færdige. Lige som vasketøj, der looper rundt i tørretumbleren indtil, at det er tørt.

Alle dynamiske sprog har loops, lige som alle menneskesprog har navneord. Der findes forskellige slags loops. Her er en kort oversigt fra https://www.w3schools.com/php/php_looping.asp. Her er de 4 loops

NAVN	FORKLARING	LÆS MERE PÅ
WHILE	Looper igennem indtil en betingelse er opfyldt. Betingelsen står øverst	https://www.w3schools.com/php/php_looping_while.asp
DO … WHILE loop	Looper alle igennem første gang. Herefter fortsætter loopet så længe betingelsen for loopet er opfyldt. Betingelsen står nederst	https://www.w3schools.com/php/php_looping_do_while.asp
FOR	Looper igennem et bestemt antal gange. Hvis et array er f.eks. 5 variable langt, så looper den 5 gange. Vi skal altså kende antal loops på forhånd.	https://www.w3schools.com/php/php_looping_for.asp
FOREACH	Virker kun på arrays. Tager alt indhold i et array og udskriver dem som enkeltstående variable	https://www.w3schools.com/php/php_looping_foreach.asp
BREAK/CONTINUE	Udskriver værdier i et array som variable. Værdien “red” bliver til $red = red	https://www.w3schools.com/php/php_looping_break.asp

WHILE-loopet

WHILE loopet fortsætter indtil en betingelse er opfyldt. Se koden her fra https://www.w3schools.com/php/php_looping_while.asp

Forstå koden:

Vi har en variabel, $x = 1; Den er lig med 1
WHILE starter et loop. Den looper på betingelse af, at $x < 5
ECHO udskriver for hvert loop
$x++; betyder, at når koden når hertil, så lægger programmet 1 til. Den første gang, hvor $x = 1, der vil den nye x-værdi vokse med +1 og blive lig med 2.

DO-WHILE loopet

DO-WHILE tænker nærmest “modsat” forhold til WHILE loopet. Betingelsen WHILE står nederst i stedet for øverst. I nogle situationer kan det være en lille smule hurtigere, når betingelsen tjekkes. Se koden her fra https://www.w3schools.com/php/php_looping_do_while.asp

Forstå koden:

Vi har en variabel, $x = 1; Den er lig med 1
ECHO udskriver for hvert loop
$x++; betyder, at når koden når hertil, så lægger programmet 1 til. Den første gang, hvor $x = 1, der vil den nye x-værdi vokse med +1 og blive lig med 2
WHILE afgør, om loopet skal køre igen eller stoppe. Så længe at $x < 5, så fortsætter loopet

FOR loopet

Vi bruger FOR loopet, når vi på forhånd ved, hvor mange gange vi vil loope. Det ved vi f.eks. hvis vi vil udskrive eller på anden måde arbejde med et array. Her kan PHP give os længden på arrayet, så vi kender det på forhånd. Se https://www.w3schools.com/php/phptryit.asp?filename=tryphp_loop_for

Forstå koden:

Den første sætning FOR rummer det hele.
- Variablen $x sætter vi lig med 0
- Vi skal fortsætte loopet, så længe $x <= 10
- For hvert loop skal $x vokset med +1
ECHO udskriver for hvert loop

FOREACH loopet

FOREACH bruger vi kun til arrays. Vi bruger den, hvis vi vil udskrive et array som enkeltstående variable. Det ser sådan ud

Alle værdier i arrayet får det navn, som de har i arrayet. F.eks. får værdien “red” også navnet red. Dvs. at $red = red, $green = green osv.

Til toppen af siden.

Kapitel 16. Funktioner

En funktion er en “stik-i-rend” dreng. I dynamiske sprog som javaScript, PHP, Phyton og 100-vis af andre sprog bruger vi ustandselig funktiTil toppen af siden.oner.

Jeg vil forsøge at forklare dig, hvorfor funktioner er nærmest sygeligt vigtige for os i kodning. Grunden er ikke kun, at vi kan få koden til at udføre noget. Det kan vi faktisk godt klare uden funktioner. I sidste kapitel har du ikke skrevet en eneste funktion, og din kode virker alligevel.

Du kender PowerPoint. En PowerPoint er “sekventiel”. Vi starter med slide 1, så slide 2 osv. til vi er færdige. Vi har som udgangspunkt ikke mulighed for at springe fra slide 1 til slide 8 uden at klikke os forbi slide 2 – 7. Dvs. når vi lavede prototyper til hjemmesider, så kunne vi godt. Du lærte at lave en menustruktur, hvor du kunne linke fra slide 1 direkte til et andet slide efter eget valg. Hvis man kan hoppe rundt i rækkefølgen, så kalder man tilgangen for “indeks-sekventiel”.

Det er præcis, hvad en funktion kan gøre for os. Kæmpe store programmer som ERP (virksomhedsstyring) mv. er ikke skrevet sekventielt. Den er skrevet indeks-sekventielt. I stedet for 1 lang kode har man kode, der består dels af funktioner, dels af kode, som styrer hvilke funktioner, der skal kaldes. Man kan sige, at i stedet for en lang “smøre”, kommer vores kode kommer til at bestå af mindre, selvstændige enheder.

Et par fordele

Det gør koden mere overskuelig
Det er meget nemmere at isolere og finde fejl
Vi kan genbruge funktioner, dvs. vi får en slankere og mere smidig kode
“Separation of concerns”. Vi får skilt vores kode ad

Ind til nu har du kodet på den måde, at du starter ved kodelinje 1, herefter linje 2, så linje 3 osv. Nu skal du lære at kode indeks-sekventielt. Funktionen kan godt stå et sted, mens kaldet til funktionen står et helt andet sted.

Faktaboks. Forskellen på sekventiel og indeks-sekventiel

Hvis noget er sekventielt, så sker det i en bestemt rækkefølge. Tiden er sekventiel, når klokken er 9:59 er næste time kl. 10:00, vi kan ikke springe til kl. 12, hvis det passer os. Din kode vil i starten være sekventiel.

Indeks-sekventielt vil sige, at vi har forskellige startpunkter. Vi kan hoppe rundt i rækkefølgen. Hjemmesider er altid indeks-sekventielle.

Når du lærer grundkodning, kan du godt klare dig med sekventiel kode. Men allerede nu skal vi over til indeks-sekventiel kode. Vi bruger funktioner for at skabe indeks-sekventiel kodning.

Hvad så med events, spørger du? Mit svar er: Dem tager vi i næste kapitel, der handler om formularer. Knapper i formularer skaber ofte forbindelsen mellem frontend og backend kode, dvs. mellem HTML/CSS og her PHP.

Til toppen af siden.

16.1 Forstå funktioner

Som du tidligere har lært, udløses en funktion ofte af en event. Hvis du trænger til lidt repetition, så se afsnit 10.5 Funktioner og afsnit 10.6. Event og funktioner https://bliv-klogere.ibc.dk/index.php/laerebog-til-modul-2/#10_5_Funktioner.

Event er typisk, hvis en bruger klikker på en knap. Knappen kalder en funktion, der så laver de ønskede handlinger. Her er et eksempel på en funktion fra afsnit 10.5 og 10.6.

Først og fremmest: Hvis du trænger til lidt repetition, så se afsnit 10.5 Funktioner og 10.6 Funktioner og events. https://bliv-klogere.ibc.dk/index.php/laerebog-til-modul-2/#10_5_Funktioner.

En funktion består grundlæggende af følgende elementer:

Et navn på funktionen
Noget input
Kode inden i funktionen med mindre, at funktionen er indbygget i programmet
Noget output

Start med et helt simpelt eksempel. Vi har nu en stik-i-rend dreng, som lynhurtigt kan gå hen til en kaffemaskine og hente en kop kaffe. Hvis det var kode, kunne vi skrive ham sådan her.

kop kaffe = stik-i-rend-dreng(tom kop);

Du læser det sådan her: Du får en kop kaffe, hvis du kalder funktionen “stik-i-rend-dreng”. Han skal have en kop som input.

Faktaboks: Pseudo-kode

Pseudo-kode er det samme som kunstig kode. Man skriver ikke pseudo-kode for, at det skal virke. Man skriver det for at illustrere en struktur i koden. Koden ovenfor “kop kaffe” = stik-i-rend-dreng(tom kop) er et eksempel på pseudo-kode.

Pseudo-kode kan hjælpe dig med at skille kodestrukturen fra selve kodens indhold. Nogle programmører laver først pseudo-kode, så de har et overblik. Bagefter koder de selve koden.

Som du tidligere har lært, udløses en funktion ofte af en event. En event er typisk, hvis en bruger klikker på en knap. Knappen kalder en funktion, der så laver de ønskede handlinger. I spil sker der mange event, faktisk er der et event med en tilhørende funktion, hver gang der sker noget i spillet.

Her er et eksempel på en funktion fra afsnit 10.5 og 10.6.

Lige netop i javaScript behøves vi ikke navne på funktioner, men ellers så følger funktionen køreplanen fra før:

KØREPLAN	KODEN
Navn på funktionen	Lige netop i javaScript behøves vi ikke et navn, hvis vi kun bruger funktionen et sted i koden
Noget input	Vi har ikke data med over, men inputtet er, at der er sket en event
Noget inden i funktionen	Vi har 3 linjer. Den første henter data ind fra frontend, den næste laver en lille beregning og den sidste sender resultatet tilbage til frontend.
Et output	Der er et resultat af funktionen, dvs. et output. Den udfører en handling. I mange tilfælde returerer den også noget. Ovenfor returnerer funktionen variablen “belob” til en tekstboks i frontend, så brugeren kan læse resultatet af udregningen

Alt i alt: Det er egentlig historien fra CSS om igen. Genbrug alt, hvad genbruges kan, og brug “separation of concerns”.

Til toppen af siden.

16.2 Et visuelt eksempel

Det kan være vanskeligt at forstå, hvor nyttige funktioner i virkeligheden er. Her er et eksempel på noget kode. Se bort fra, hvis du ikke helt forstår koden, jeg gennemgår den i afsnit 16.5 Retur værdier fra funktiner https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#16_4_Brugerdefinerede_funktioner.

Jeg vil prøve at illustrere, hvad der sker i koden. Til venstre ser du, hvordan koden er bygget op omkring funktionen. Til højre ser du, hvordan koden ville se ud uden en funktion.

Forklaring: Til venstre er koden illustreret. Der er 3 kald til den samme funktion, som så laver en beregning hvis resultat returneres. Til højre som det ville se ud uden funktioner. Der vil få få 3 områder med éns kode. Meget mere kode og sværere at vedligeholde. Finder vi en fejl eller skal rette noget i udregningen, skal det gøres 3 gange i modellen til højre.

Det bliver endnu tydeligere, hvis jeg viser afviklingen af de 2 programmer.

Forklaring:

Vi starter koden, men da den øverste blå del er en funktion, hopper afviklingen direkte ned i det orange område. I den orange del afvikles koden sekventielt. Men inden i den orange del kalder koden på funktionen, der befinder sig i et selvstændigt og afgrænset område, dvs. den blå del.

Vi starter ved linje 1, springer så den blå del over og går nogle gange retur for at bruge funktionen. Denne måde at afvikle på kaldes indeks-sekventielt. Det svarer til, at man springer mellem numrene på en CD.

Koden til højre er sekventiel. Den afvikles uden spring undervejs. Start ved linje 1 og slut ved den sidste linje. Det er en gammeldags måde at gøre det på undtagen for små mængder kodning.

Til toppen af siden.

16.3 Indbyggede funktioner

Næsten alle sprog har lavet nogle funktioner på forhånd, som du bare kan bruge. Så slipper du for at skrive dem selv.

I afsnit 15.7 Forgrening og betingelse 1. IF-ELSE-ELSEIF https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#15_7_Forgrening_og_betingelse_1_IFELSEELSEIF mødte du en funktion. Koden date(H) var i stand til at hente timen på dagen, dvs. hvis klokken er 12:30 så er date(H) = 12. Du kan selvfølgelig også hente datoen, måneden og meget mere frem.

Denne type funktioner kalder vi for indbyggede funktioner. PHP har, lige som f.eks. Excel, en righolding samling af indbyggede funktioner. Du kan se en oversigt her: https://www.w3schools.com/php/php_ref_overview.asp. Et enkelt eksempel: Du kan finde kvadratroden af et tal ved at bruge sqrt(). Her er et

Til toppen af siden.

16.4 Brugerdefinerede funktioner

I PHP kan vi naturligvis skrive vores egne funktioner. Jeg kan faktisk ikke forestille mig et dynamisk sprog, hvor man ikke kan skrive funktioner. Det er

Her er et eksempel med en simpel PHP funktion. Funktionen kan tilføje et efternavn (“Refnæs”) og skrive fornavn + efternavn på skærmen. Den skal have et fornavn som input.

Forstå koden.

Vi har en funktion, som kan sætte efternavn på et fornavn
Funktionen genbruges 5 gange. Så i stedet for, at vi skal skrive den samme funktion 5 gange, så skriver vi den kun 1 gang. Genbrug er godt. Mere dovenskab, slankere kode og nemmere at finde fejlene
Bemærk også, at vi får skilt koden ad i funktion og struktur/kommandoer = separation of concerns
Koden er nu ikke længere sekventiel. men indeks-sekventiel. Når koden afvikles, springer PHP koden med funcion over og tager fat i de 5 kald: familyName();

Funktion med flere input

Vi kan sagtens sende flere inputs af sted til en funktion. Nedenfor sender vi $fname og $year med til funktionen.

Forstå koden.

Vi har en funktion, som kan udskrive en tekst, men hvor fornavn og fødselsår kan veksle fra linje til linje
Det nye er, at jeg ikke kun sender et fornavn af sted, jeg sender også et fødselsår med

Du kan sende lige så mange værdier til en funktion, som du har lyst til. Du kan endda sende et array til en funktion.

Til toppen af siden.

16.5 Retur værdier fra funktioner

Du har set funktioner, der ikke returner noget. Hvis du f.eks. skal skrive et array på skærmen, så skal du ikke returnere noget.

Hvis du skal udføre en udregning, som i eksemplet her fra afsnit 16.1 Forstå funktioner https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#16_1_Forstaa_funktioner, så ønsker normalt en returværdi. Her returnerer koden variablen “belob” til tekstboksen “resultat”.

Her er så et eksempel med PHP kode. Du kan se eksemlet på https://www.w3schools.com/php/php_functions.asp.

Forstå koden.

Koden “declare(strict_types=1); // strict requirement”. PHP kan sagtens skifte datatype uden at du beder den om at gøre det. Dvs. at en integer godt kan blive til tekst og omvendt. Hvis du bruger kodelinjen her, så kan integers, floats eller strings ikke pudselig skifter type. Så bare skriv koden og lad være med at tænke mere over det.
Men når vi bruger declare(strict_types=1);, så skal vi bruge datatyper som string, int, float mv. Se evt. afsnit 15.2 Datatyper i PHP: https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#15_2_Datatyper_i_PHP
Koden function sum(int $x, int $y) starter en funktion. For at den kan virke, skal du sende 2 int (heltal) med til funktionen
Den returnerer de 2 tal lagt sammen med koden return $z. $z er de 2 tal lagt sammen
Linjen “echo “5 + 10 = ” . sum(5, 10) . “<br>”; udskriver de 2 tal lagt sammen, fordi den kalder funktionen med “sum(5, 10).

Deklareret returværdi

Nogle gange kan vi have et ønske om, at returværdien har en bestemt datatype. I eksemplet vil jeg gerne have en float som returværdi.

Forstå koden.

Koden ligner meget den sidste kode
Den eneste forskel er koden . Når der står ” : float”, så betyder det, at returværdien på forhånd har datatypen float

Til toppen af siden.

16.6 Skal funktionerne placeres øverst eller nederst i koden

Du har allerede set, at vi kan slanke vores kode, når vi laver funktioner frem for bare at kode løs med sekventiel kode.

Teoretisk kan vi kan placere vores funktioner hvor som helst i koden, øverst eller nederst. Til gengæld er det en god idé at lægge PHP kode før HTML kode, især hvis PHP koden skal opdatere HTML koden som vi typisk ser i formularer. Du kan endda placere funktioner og PHP i separate filer med koden INCLUDE(), se afsnit 19.2 Separation of concerns med REQUIRE() og INCLUDE().

Til toppen af siden.

Kapitel 17. HTML formularer

I AppLab skabte du en forbindelse fra frontend til backend vha. events. Vi gør næsten det samme nu, men også kun næsten.

Lige som i AppLab vil vi typisk lave nogle felter til indtastning samt en knap, som så er eventen. Men modsat AppLap er vi ofte nødt til at pakke vores felter ind i en overordnet kode, som er en formular. Dvs. at alt indtastning og knapper findes i en blok i koden, der starter med <form> og slutter med </form>

Ud over det findes der bunker af formularer på hjemmesider, som vi bruger til alt muligt. Her er en formular til inmeldelse i AGF’s fanklub fra https://medlem.agf-fanclub.dk/indmeld.

Lad os kikke lidt nærmere på formularen. Der er både nogle felter til almindelig indtastning, men der er også fald-ned valgmuligheder (drop-down på engelsk). I kapitlet skal vi se på, hvordan du skaber formularer i “ren” HTML. Rene tekstfelter og fald-ned valgmuligheder er ikke de eneste muligheder, som du skal kende til.

Til toppen af siden.

17.1 Formularer med HTML

Min gennemgang af formularer tager udgangspunkt i W3schools afsnit om HTML Forms. Se https://www.w3schools.com/html/html_forms.asp.

Kapitlet her er ren HTML. Jeg har med vilje gemt det til nu, for formularer giver ikke meget mening, hvis man ikke kender til dynamiske sprog som javaScript og PHP.

Udgangspunktet er, at vi sætter en <form> kode ind i <body> området. Start med <form>, hav noget indhold og slut med </form>. <form> skal altid lægge inden i <body>. Bemærk, at <form> ikke ses i sig selv. Den er, lige som <div>, en beholder med synligt indhold. Du kan dog, lige som <div>, style den hvis du vil. Det ser sådan ud:

Til toppen af siden.

17.2 Formular attributter

Form attributter er de egenskaber, som man har til tagget <form>. Afsnittet er fra https://www.w3schools.com/html/html_forms_attributes.asp. Der er 3 vigtige attributter: action, target og metode.

Faktaboks. Attributter = egenskaber

Har du glemt, hvad en attribut er? En attribut kan du oversætte som en egenskab. Et billede kan have attributter som f.eks. width og height, <BODY> kan have attributter som background-color, margin osv osv. CSS er en lang liste af attributter

Action

Action er, hvad man skal gøre med formularens data. Se nedenstående kode:

Du møder attributten “action” allerede ud for tagget <form>, hvor der står <form action=”/action_page.php”>. Det betyder, at formularens indhold bliver sendt til filen “action_page.php”, så data kan blive behandlet dér. Meget praktisk måde at lave “separation of concerns” på
Bemærk: Hvis der ikke står noget under action, så bliver data sendt til siden selv

Target

Target er en ualmindelig praktisk attribut, som du også kan bruge til link. Den åbner ganske enkelt dit link i et nyt faneblad. Til link, der henviser til samme side, bruger vi den ikke. Men til link “ud af huset” bruger vi den gerne. Jeg bruger den næsten altid i mine link-henvisninger her på sitet. Den ser sådan ud:

Den er god til formularer, hvis vi f.eks. vil have en besked til brugeren. “Tak for din tilmelding til …, vi har sendt en kvittering til dig på min@mail.dk”, og beskeden skal skrives på et tomt faneblad.

Der findes lignende target-attributter, men target=”_blank” er langt den mest brugte. Se evt. linket https://www.w3schools.com/html/html_forms_attributes.asp, som selvfølgelig åbner i et nyt faneblad.

Method. GET eller POST

Når vi sender en formular, så kan vi gøre det på 2 måder. Enten gennem URL eller gennem HTTP protokollen. Den første metode har koden “get”, den anden har metoden “post”. Her et eksempel med “get”.

Hvis vi sender information gennem “get”, så er informationen frit tilgængelig. I nogle situationer er vores informationer ikke specielt hemmelige. Hvis jeg f.eks. har søgt AGF på Google, så er min søgning ikke specielt hemmelig. Du kan i hvert fald se den i URL’en i min browser, så Google har brugt “get”. “get” er en nem og effektiv metode.

Hvis formularen sender bare den mindste snert af personlig information, så skal du altid bruge “post”. Med “post” kan ingen udefra se, hvilke informationer der bliver sendt fra formularen.

Til toppen af siden.

17.3 Formular elementer

Du får brug for forskellige typer formular elementer. Her er en oversigt over de vigtigste, og hvad vi bruger dem til. Du finder det hele på https://www.w3schools.com/html/html_form_elements.asp.

<label> og <input>

De første 2 <form> tags, du skal møde, er <label> og <input>. Her er et eksempel fra https://www.w3schools.com/html/html_forms.asp.

Du har selvfølgelig gættet, at det hele er pakket ind i et <form> tag. En formular starter med <form>, og den slutter med </form>
<label for=”fname”>First name:</label>. En label er også en label på dansk, dvs. en betegnelse eller her et tekstfelt foran indtastningsfeltet. Attributten for=”fname” hentyder til, at label’en hører til input feltet “fname”.
<input type=”text” id=”fname” name=”fname” value=”John”><br>. Der findes flere typer input felter. Dette felt har typen “text”. Du kan kalde den et lille tekstfelt modsat et stort (text area), som er til lange tekster, og som du møder senere. Input feltet har også et id, for vi skal kunne identificere feltet, når vi skal til at evaluere koden i PHP
Attributten name=”fname” bruges til 2 ting. Dels til identifikation lige som id, dels til at sikre, at værdine sendes med, når formularen sendes
Value=”John” er forudfyldt indhold. Hvis du skriver noget andet i feltet, vil det, du skriver, blive feltets nye indhold

Bemærk: Feltet <input> kan både være tekstfelter, radio knapper, tjekbokse mv. Jeg gennemgår mere om <input> i afsnit 17.4 Input typer https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_4_Input_typer.

Input feltet kan have forskellige attributter, og det ser vi på i afnsit 17.5 Input attributter https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_attributter.

<select>

“Select” betyder “at vælge”. Bruger du <select>, kan du danne en fald-ned menu. Det ser sådan ud.

<select> og </select> starter og slutter hele fald-ned menuen
<option> og </option> starter og slutter hver enkelt valgmulighed. Her Volvo, Saab, Fiat og Audi
<option value=”volvo”>Volvo</option>. Systemet læser den værdi, der står i attributten value. De 2 kan godt være forskellige

<select> med attributten selected

Hvis du bruger attributten selected, så får du det ønskede element forvalgt til brugeren.

Andre attributter er “multible” og “size= …”. Multiple gør, at brugeren kan vælge flere muligheder og size, f.eks. “size=3” gør, at brugeren kun ser 3 muligheder, men kan skrolle for at se resten.

I afsnit 18.5 Data modtagelse for valgfelter gennemgår jeg koden for fald-ned menuer lidt dybere.

<textarea>

<textarea> bruges til at lave et fritekst felt. Her kan brugeren skrive lange beskeder eller bemærkninger, og feltet inviterer til at skrive mere end 1 linje. <textarea> er altså i modsætning til <input> felter, hvor man ønsker korte tekster. Eksempelvis fornavn og efternavn.

<botton>

<botton> laver ganske enkelt en knap. Du kan dog også bruge <input type=”submit”>, men mere om det i næste afsnit.

<fieldset> og <legend>

<fieldset> definerer et område med formular elementer, der hører sammen. Bagefter pakker vi elementerne i <fieldset> pænt ind med <legend>. Det er kun kosmetik, men det ser pænt ud!

Der er flere elementer, som du skal lære at kende. Men de er alle attributter til <input>, så det tager vi i næste afsnit.

Til toppen af siden.

17.4 Input typer

<input> elementet kan helt utrolig mange ting. Her er et par udpluk:

Du har allerede set, at det kan fungere fint som et lille tekstfelt (modsat text area)
Fungere som knap, der sender data
Nulstille formularen
Fungere som tjekboks (flueben, du har flere valgmuligheder)
Fungere som radio buttons (knapper, du har kun 1 valgmulighed)

Her er den komplette liste fra https://www.w3schools.com/html/html_form_input_types.asp. Men bare rolig, vi skal ikke igennem dem allesammen!

Tekstboks og label

Tekstboks og label svarer til afsnit 17.3 Formular elementer https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_3_Formular_elementer, det første underafsnit om <input> og <label>. I næste afsnit 17.5 Input typer til tjek af det indtastede går jeg ned i den store hjælp, du kan få fra <input> og dens attributter. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede

Input boks og knap til at sende formularens data

Hvis du bruger attributten submit, så kan <input> fungere som knappen, der sender formularen.

Den nederste indramling er <input> med attributten <submit>
Bemærk attributten value. Men den kan du lave en tekst i knappen
Når brugeren klikker på submit, sker der en event. Formularen sender data til filen action-page.php, og det sikrer den øverste, indrammede kode i formularen

Knap til at nulstille formularen

Såre simpelt: Hvis du bruger koden <input type=”reset”>, så får du en knap, der kan nulstille formularen. Yderst praktisk og brugervenligt, og alle formularer bør have denne knap. Du kan se eksemplet nedenunder.

Bemærk, at knappen for reset har teksten “Nulstil”. Det på trods af, at jeg ikke har en value indtastet. Som default (dvs. standard) har knappen et navn, og da min browser har dansk som sprog, så får knappen en dansk tekst.

Radio knapper

Radio knapper er små, fine, runde knapper. De ligner knapper på en radio, deraf navnet. Brugeren kan klikke på dem, men brugeren kan kun vælge en mulighed. Hvis du ønsker flere valgmuligheder, så skal du bruge tjekbokse. Nedenfor er radio knapperne indrammet til højre.

Koden <input type=”radio” id=”male” name=”gender” value=”male”> laver knappen
Der er tilknyttet en label, så knappen får en etikette/læsbar tekst på: <label for=”male”>Male</label>

I afsnit 18.5 Data modtagelse for valgfelter gennemgår jeg koden for radio knapper lidt dybere.

Tjekbokse

Modsat radio knapper så har du flere valgmuligheder i tjekbokse. Her er et eksempel med tjekboksene rammet ind til højre.

Kodden <input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike”> laver en tjekboks
Selvfølgelig skal boksen have en label: <label for=”vehicle1″> I have a bike</label>

I afsnit 18.5 Data modtagelse for valgfelter gennemgår jeg koden for jekbokse menuer lidt dybere.

Til toppen af siden.

17.5 Input typer til tjek af det indtastede

Vi kan langt fra være sikker på, at brugeren altid indtaster, som vi ønsker det. Heldigvis kan vi få hjælp fra input boksen. Her et eksempel med email. Se evt. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email

I min formular bruger jeg den simple kode her: Bare det, at <input> får attributten type=”email”, er nok.

Nu tester jeg det af i en browser. Jeg skriver med vilje en forkert email adresse og klikker på knappen Submit. Så sker magien: Jeg får en fejlmeddelelse på skærmen.

Her er en oversigt over, hvad du kan bruge nogle input typer til.

Til toppen af siden.

17.6 Input attributter

Først et par nyttige attributter

Readonly, hvis brugeren ikke skal kunne skrive i et felt
Disabled, hvis et input felt ikke skal bruges. Det kan f.eks. være, at der er fejl, som du leder efter, eller at den måske senere skal i brug
Du kan sætte minimum, maksimum, 1 eller flere linjer og meget mere. Se https://www.w3schools.com/html/html_form_attributes.asp

Det er egentligt super simpelt. Du tilføjer bare ordet “required” til dit <input> felt.

Hvis brugeren så glemmer at udfylde feltet og trykker på knappen til send, så kommer der en fejl. Nemt og brugervenligt!

Faktabox. <input > attributter er ikke glad for ældre browsere

Du vil desværre opleve, at f.eks. required ikke virker i ældre versioner af internet explorer, og du kan mærkeligt nok også få problemer i Safari. Mærkeligt, fordi Safari er meget tæt på Chrome. Men: Attributterne gør ingen skade. Chrome er den mest populære browser, men Safari står for ca 1/3 af al browservisning. Så test af i forskellige browsere

Til toppen af siden.

17.7 Input og brugeradfærd

Du har garenteret set formularer, hvor du bliver spurgt, om du ønsker typisk et nyhedsbrev. Det ser sådan ud.

Modsat andre lande er det i Danmark ulovligt at sende nyhedsbreve automatisk til folk, uden at de har bedt om det. Alligevel ser man ofte feltet forudfyldt. Det er i princippet ulovligt, men man ser det ofte alligevel. Du vinger feltet af med attributten “checked”. Bortset fra attributten checked er det samme kode som før.

Ovenstående er et eksempel på, hvordan vi kan være lidt for smarte, når vi designer vores formularer. Omvendt kan vi også hjælpe brugeren og selv få bedre udfyldte formularer. Her er et eksempel mere med radio knapper.

Hvis jeg ville, kunne jeg sagtens sætte f.eks. den første racio knap Female til “Checked”. Så er den forudfyldt. Men ved ikke at forudfylde, kan jeg tvinge brugeren til at tage aktiv stilling til spørgsmålet, og det er lige præcis det, jeg vil. På den måde får jeg data, der er mere brugbare, end hvis jeg for høj graf forudfylder for brugeren. Med mindre, som med den forudfyldte tjekboks for nyhedsbrevet, direkte går efter at pådutte brugeren mit nyhedsbrev.

Et sidste eksempel er en fald-ned menu. Her er en typisk fald-ned menu. Menuen starter med Volvo. Problemet med den her menu er, at hvis nu brugeren ikke vælger noget, så har programmet automatisk valgt “Volvo” for vedkommende. Vi ved derfor ikke, om brugeren virkelig har valg Volvo frem for de andre bilmærker, eller om brugeren bare har sprunget punktet over.

Det er der heldigvis en elegant løsning på. Vi tilføjer et ekstra <option> linje, der hedder “Vælg fra liste”. Hvis vi så modtager en besked om at bilmærket er “Vælg fra liste”, så kan vi nemt returnere en fejlmeddelse til brugern og bede brugern om at tage stilling. Det ser sådan her ud:

Det er altid en god idé at sætte “Vælg fra liste …” eller lignende øverst i en fald-ned menu i en formular.

Til toppen af siden.

17.8 Opsummering. Kort oversigt over brug af formular elementer

Til toppen af siden.

Kapitel 18. Databehandling i formularer

I kapitel 17 lærte du at lave de smukkeste formularer. Nu skal du lære at databehandle formularer. Hvis vi igen ser på indmeldelsesblanketten fra AGF, så er der flere ting, der er værd at lægge mærke til ud over de smukke AGF klubfarver.

Der er stjerne ud for f.eks. Fornavn*. Det betyder, at feltet er obligatorisk. Vi kan bestemt ikke altid regne med, at folk husker at udfylde alle felter eller udfylder felterne rigtigt, så derfor har vi brug for kode, der kan tjekke, om det er gjort ordentligt.

Du har i sidste kapitel i afsnit 17.5 Input typer til tjek af det indtastede og 17.6 Input attributter set, at vi i et vist omfang kan bruge <input> til at validere input. Men du skal også lære at bruge PHP.

Til toppen af siden.

18.1 Et simpelt eksempel

Lad os kikke på et simpelt eksempel fra W3schools, hentet fra https://www.w3schools.com/php/php_forms.asp. Jeg har noget HTML kode, der laver en formular.

Bemærk koden <form action=”welcome.php” method=”post”>. Den sender formularen til filen welcome.php med metoden post. Det kan være praktisk, hvis vi ønsker at lede brugeren hen på en side med f.eks. “Tak for din tilmelding, du hører fra os-side”
Hvis du ikke kan huske metoderne get og post, så se afsnit 17.2 Formular attributter i det sidste afsnit, Method: GET eller POST. https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_2_Formular_attributter

Lad os kikke på php filen welcome.php. Jeg viser PHP filer i VS-code, for W3schools sætter ikke farver på

Linje 4. Koden <? php starter PHP kode
Linje 4. Vi har attributten POST på forms. Derfor skal vi også hente data med koden $_POST[[“name”]. er det id, vi bruger til at sikre, at vi får data fra netop det <input> felt, der har name= “name”
Linje 5. Samme historie. $_POST[“email”] henter indholdet fra <input> feltet, der har name=”email”

Resultatet ser ca. sådan ud, se den nederste firkant til venstre. Bemærk URL’en, det ligger på localhost. Hvis du vil arbejde med eksemplet i VS-code, så se gerne vejledning 7. PHP og MySQL på https://bliv-klogere.ibc.dk/index.php/vejledning-7-php-og-mysql/

Til toppen af siden.

18.2 Send data til samme side

I eksemplet i afsnit 18.1 sendte jeg data til en ny side. Hvis jeg ønsker at sende data til samme side, som formularen er på, behøves jeg ikke at kende sidens navn. Jeg kan bruge kommandoen $_SERVER[“PHP_SELF”]. Den er i stand til at læse navnet på den PHP fil, som formularen er på, og sende data til den. Den samlede kode øverst i formularen kommer til at se således ud:

Du ligger sikkert mærke til, at der står “htmlspcialchar” rundt om $_SERVER[“PHP_SELF”]. Det er for at undgå hackning, og det fortæller jeg mere om i næste afsnit

Til toppen af siden.

18.3 Undgå hackning i formularer

En af de nemmeste måder at hacke på er at gøre det igennem en formular. Forestil dig, at koden <?php destroyEverything() ?> er i stand til at ødelægge dit site. Hvis jeg indsætter det i en tekstboks i stedet for min navn i en PHP formular, så vil systemet opfatte det som PHP kode og udføre scriptet, når jeg sender det. Dette kaldes “injections”.

Vi kan undgå problemerne ved at bruge funktionen htmspcialchars(). Jeg har allerede vist koden i sidste afsnit, den så sådan ud. Eksemplet kan du også se hos W3schools på https://www.w3schools.com/php/php_form_validation.asp.

htmlspecialchars{$_SERVER[“PHP_SELV”]; sender data retur til afsendersiden, det ved du allerede, htmlspeciachars() gør det, at den erstatter specialkaraktere som f.eks. < med almindelige bogstaver, og så virker et kode injection ikke.

Til toppen af siden.

18.4 Data modtagelse

Lad os sige, at vi har en formular, som ser sådan ud.

HTML koden til formularen ser ud som nedenfor. Bemærk den indrammede linje, hvor formularen sendes som “POST” Du kan hente hele koden på https://tryphp.w3schools.com/showphp.php?filename=demo_form_validation_escapechar

Så langt, så godt. Næste skridt er, at vi modtager data. Det gør med PHP, og koden ligger før vores frontend HTML kode.

I den øverste firkant opretter vi varialene, og vi sætter dem alle lig 0. Så er de klar til brug! Det sker med koden $name = $email = $gender = $comment = $website = “”;

I den næste røde firkant modtager vi dels data (på “POST” maner) fra fomularen, dels sender vi data igennem funktionen i den nederste røde firkant. PHP modtager og genkender felterne gennem $_POST[name], hvis <input> feltet har attributten name = “name”. Det er ikke så indviklet, som det lyder.

Den sidste røde firkant indeholder funtionen test_input($data). Kort fortalt er den en klorvask, der vasker al overflødig input væk. Den gør 4 ting:

$data = trim($data); Smider alle overflødige karakterer væk, som f.eks. ny linje, mellemrum mv.
$data = stripslashes($data); Fjerner alle backslash, som kan bruges til kode
$data = htmlspecialchars($data); Erstatter alle matematisk lignende tegn som f.eks. <, (, +, – osv. med almindelige tegn
return $data; returnerer naturligvis de rensede data

Den sidste kodeblok handler udelukkende om at udskrive data, dvs. masser af ECHO.

Til toppen af siden.

18.5 Data modtagelse for valgfelter

II eksemplet ovenfor indgår der et valgfelt, nemlig Med “valgfelter” mener jeg 3 forskellige typer af felter: Fadio knapper, fald-ned bokse og tjekbokse.

Radio knapper

I formularen oven for indgår der radio knapper. Ud for “Gender” kan man vælge mellem “Male”, “Female” og “Other”. Mulighederne er gensidigt udelukkende. Hver “knap” har sin egen kodelinje. Attributten “value” er forskellig linje for linje, men “name” er den samme. På den måde ved HTML, at mulighederne er gensidigt udelukkende.

Når man så skal modtage data, sker det meget enkelt. Du laver bare en variabel, f.eks. $gender, nulstiller den, og i modtagelsen sætter du den lig med $_POST[“gender”].

Fald-ned menuer

Her er HTML koden til fald-ned menuer. Se evt. afsnit 17.3 Formular elementer.

Alle muligheder i en fald-ned menu er rammet ind af HTML koden <select>.

Hvis du skal have den valgte værdi, så skal du bare bruge attributten “name”. Her name=”cars”:

Tjekbokse

Her er HTML koden for tjekbokse fra afsnit 17.4 Input typer.

Her er der ikke noget problem, for tjekboksene er ikke gensidigt udelukkende. Bemærk, at ud for attributten “name” har de hver deres værdi, nemlig “vehicle1”, “vehicle2” og “vehicle3”. Vi kan behandle tjekboksene, som om de var individuelle tekstfelter. Koden her virker:

Til toppen af siden.

18.6 Validering af obligatoriske felter

Vores formular har masser af obligatoriske felter, markeret med *. Jeg har tidligere vist, at du med HTML kan validere input, men det duer som sagt ikke i alle browsere. Nu skal du se, hvordan PHP kan hjælpe os. Formularen ser stadigvæk sådan ud:

PHP delen af valideringen

Nu siger vi, at brugeren har klikket på knappen Submit. Data bliver nu sendt til PHP vha. “htmlspcialchar” og $_SERVER[“PHP_SELF”]. Se gerne afsnit 18.2 Send afsnit til samme side https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#18_2_Send_data_til_samme_side.

Her er et udpluk af koden.

I den første firkant opretter jeg bare variablene og nulstiller dem. Bare for en god ordens skyld, så de ikke bærer rundt på “gamle” værdier
I den næste røde firkant sætter jeg koden til at reagere, hvis jeg i formularen har brugt POST metoden
Den sidste, røde firkant er den interessante. For hver af de obligatoriske felter spørger jeg om feltet er tomt. Det gør jeg med koden empty($_POST[“name”]. Hvis ja, så sætter jeg en variabel $nameErr = den fejlmeldelelse, som jeg vil give til brugeren. Hvis nej, så er der indhold i variablen, så er den godkendt, og så sætter jeg den bare lig med en ny variabel. Den nye variabel kan jeg så skrive på skærmen, gemme i en database og i det hele taget bruge den, som jeg vil.

Vis fejlmeddelelser på skærmen

Hvis der er fejlmeddelelser, så skal vi have dem vist til brugeren. Det gør vi meget simpelt Kik på koden her

Jeg tilføjer HTML kode, nemlig <SPAN>…..</SPAN> til at vise fejlmeddelserne. <SPAN> er lige som <DIV>, det er bare en beholder. Forskellen er, at <SPAN> laver ikke et linjeskift, det gør <DIV>.

<SPAN> bliver ikke vist, hvis der ikke er et indhold. Men hvis variablen $nameErr pludselig har en værdi, så bliver den vist.

Jeg laver <SPAN> for alle felter, som skal have fejlmeddelelser.

Faktaboks. Koden her kan slankes

Som du sikkert har opdaget, er der en del genbrug af kode, når vi evaluerer. Vi kan godt bruge funktioner i stedet for at skrive ren sekventiel kode, og vi bør også gøre det. Her har dog jeg fulgt W3schools og har gjort eksemplerne så udførlige som muligt.

Til toppen af siden.

18.7 Validering af navn, email og URL

Naturligvis kan vi have et ønske om at validere for mere end blot om feltet er tomt. Her er 3 eksempler på validering, alle hentet fra https://www.w3schools.com/php/php_form_url_email.asp.

Grundlæggende fortager vi os præcis det samme som før.

Sender feltet til siden selv med
Nulstiller et antal variable, dvs. dem, der skal bruges til at sende data videre
Sender formularen gennem POST
Sender formularen til evaluering på siden selv, dvs. vi bruger “htmlspcialchar” og $_SERVER[“PHP_SELF”]
Vi skriver noget kode, der kan sende en fejlmeddelelse til brugeren.
Fejlmeddelsen vises i en PHP variabel $…Err som indholdet i <SPAN> kode

Det absolut eneste, der er nyt, er at jeg udvider scriptet. Før kunne scriptet kun finde ud af, om feltet var tomt eller ej.

Validering af navn

Det eneste nye ligger i den røde firkant
De første 4 linjer i den røde firkant kender du fra sidste afsnit. Den tjekker, om feltet er udfyldt. Hvis nej, så får du en fejl, hvis ja så skriver man feltets indhold i variablen $name
Det nye er linjen if(!preg_match( ……….)). Hvis udtrykket er sandt, så skal den skrive en fejlmeddelelse. Udråbstegnet ! betyder “forskellig fra”. Lad være med gå dybt ned i udtrykket if (!preg_match(“/^[a-zA-Z-‘ ]*$/”, $name)). Jo, den sidste del, “, $name”) er ikke så svar. Resten: Accepter, at det er sådan, kopier koden, hvis du har brug for den, og læs evt. i den næste faktaboks om RegEx udtryk.

Faktaboks: Hvad er RegEx

RegEx står for “regular expression”. Vi bruger det til at evaluere på f.eks. navne, telefonumre, URL, emails …, kort sagt alle lettere indviklede felter.

Koden PREG_MATCH(regEx udtryk, variabel) bruges til at finde ud af, om en variable lever op til de kriterier, man har i regEx udtrykket. Læs mere på https://www.w3schools.com/php/php_regex.asp

Validering af URL

Når vi skal validere en url, gør vi præcis det samme som før. Vi evaluerer først for, om feltet er tomt. Bagefter evaluerer vi med et regEx-udtryk for at tjekke, om feltet er rigtigt udfyldt. Lad være ed at lade dig forskrække af det alenlange udtryk. Jeg forstår det heller ikke, men det virker :-).

Validering af email

RegEx til email har et om muligt endnu værre regEx udtryk. Men: Vi har en anden måde at gøre det på. Det ser sådan ud:

Til toppen af siden.

Kapitel 19. Videre med PHP

Til sidst vil jeg kikke lidt på noget videregående PHP.

19.1 Datoer

Lige som i javaScript kan du få PHP til at arbejde med datoer. PHP kan f.eks.

Udskrive det øjeblikkelige tidspunkt
Hente tiden fra en bestemt tidszone
Lave et “timestamp” f.eks. med date(). Når man f.eks. registrerer noget i skal vi sige en kundedatabase, så er vi ofte interesseret i registreringstidspunkt. Hvis vi registrerer en kundebetaling, er det fint at vide, om vedkommende så har betalt til tiden eller ej

Har du brug for mere viden, kik hos W3schools: https://www.w3schools.com/php/php_date.asp.

Til toppen af siden.

19.2 Separation of concerns med REQUIRE() og INCLUDE()

I afsnit 16.6. Skal funktionerne placeres øverst eller nederst,h ar fortalt dig, at du kan placere funktioner både øverst og nederst i din PHP kode. Se evt. https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#16_6_Skal_funktionerne_laegge_oeverst_eller_nederst_i_koden

Der er dog en 3. mulighed, som er ret elegant. Vi kan inkludere PHP i PHP. Vi kan placere noget af koden i en fil for sig. Prøv at se det simple eksempel hos w3schools https://www.w3schools.com/php/php_includes.asp.

I eksemplet er koden til footeren placeret i en fil for sig, “footer.php”. Ved at placere kode i separate filer kan man reducere antal kodelinjer på den enkelte php fil.

Kan du genkende princippet med at gøre koden enklere :-). Vi kalder det for “separation of concerns”. Det er præcis den samme tankegang, vi bruger, når vi placerer CSS kode i et eksternt stylesheet. Se eventuelt afsnit 6.2 Hvor skal jeg lægge min CSS kode https://bliv-klogere.ibc.dk/index.php/laerebog-til-modul-2/#6_2_Hvor_skal_jeg_laegge_min_CSS_kode.

Tilsvarende kunne man lægge referencer ind til javaScript biblioteker, f.eks. FontAwesome. Se evt. kapitel 12. Frameworks/libraries https://bliv-klogere.ibc.dk/index.php/laerebog-til-modul-2/#Kapitel_12_Frameworks/libraries

Include() eller require() eller forskellen på mænd og badedyr

Include() og requiere() gør præcist det samme i PHP. Forskellen er, at hvis der er en fejl, vil include() fortsætte afviklingen så vidt muligt, mens require() vil skrive en stor, fed, larmende og for brugeren uforståelig fejl på skærmen. Badedyr bruger include(), mens brugere af mænds hjemmesider en gang imellem vil bande ret højt :-). Det første er som udgangspunkt at foretrække!

Lad os se lidt på index.php, dvs. startfilen fra et WordPress tema. Alle temaer er bygget op på samme måde, ellers vil WordPress ikke acceptere dem. Temaerne bruger hverken include() eller require(). De har skrevet deres egne funktioner get_header(), get_sidebar() og get_footer(), men disse funktioner fungerer præcis som include() og require(). De skaber overblik i koden og adskilder vores bekymringer.

Til toppen af siden.

19.3 Cookies

Selvom vi med rette kan stille os særdeles skeptiske overfor især marketing cookies, så kan de også være ganske nyttige. Du skal nu lære dem nærmere at kende i 2 simple eksempler.

En cookie er en lille fil, der kan gemme oplysninger i et stykke tid. Faktisk minder en cookie meget om en variabel med et par forskelle: Den gemmer oplysningerne i det tidsrum, som du bestemmer og den kan gemme mere end 1 værdi.

Det er ret simpelt at lave en cookie, prøv at se eksemplet fra https://www.w3schools.com/php/php_cookies.asp. Vigtigt: Hvis du vil lave en cookie, skal du altid erklære den allerede efter koden <!DOCTYPE html>, dvs. før koden <html>.

$cookie_name = “user”. Vi giver cookien en navn
$cookie_value = “John Doe”. Vi giver også cookien en værdi
set cookie osv. fortæller, hvor længe cookien skal leve, og vi tæller i sekunder. Der går 86.400 sekunder på et døgn, så den cookie her lever i 30 døgn
Den lille skråstreg “/” betyder, at cookien gælder over hele dit websted, dvs. på alle filer

Vi kan så hente værdien af cookien, når vi ønsker. Vi kan også både ændre og slette værdien, hvis vi vil det.

Cookies som “vagt” ved et password beskyttet område

Vi siger, at vi laver en formular til at logge ind i et password beskyttet område. Formularen kan se sådan ud. Meget primitivt. Se indtil videre bort fra teksten “closed”. “closed” er værdien af den cookie, jeg har lavet. Bemærk: Du kan hente koden ned til det her under lektionerne.

Inde i koden har jeg defineret et password, som er “Informatik”. Hvis brugeren indtaster det rigtige, så vil cookien få en ny værdi, så den Hhar værdien “open”.

Du ser selve PHP koden her. Dvs. den del af koden, som laver cookiens værdi om til “open” ved korrekt indtastet password.

Hvad kan vi så bruge det til? Jo, vi kan gøre 2 ting.

Lave en kode, som leder brugeren over på en anden .php side, som så indeholder de beskyttede informationer. Det kan du gøre med koden header().

header("Location: protected-area-page.php");

Det næste er, at vi i toppen af den fil, vi dirrigere hen til, laver et tjek. Hvis cookien har værdien “open”, så må brugeren fortsætte. Ellers skriver vi bare på skærmen “Du har ikke adgang”. Det samme gælder, hvis cookien dør pga. “alderdom”. Meget nyttigt, hvis vi glemmer at logge ud.
Et tjek på, om cookien er ok, kan gøres ret simpelt. Se herunder.

Først tjekker jeg om cookien overhovedet findes. Det gør jeg med isset(…)
Så henter jeg værdien af cookien “adgang”
Hvis værdien af koden “adgang” != “open” (dvs. forskellig fra “open”), så afvikler jeg et lille javaScript
- JavaScriptet skriver en alert med besked til brugeren
- Bagefter omdirrigeres brugeren til formularen
Hvis ikke, så fortstætter koden bare

Det snedige ved scriptet er, at den passwordbeskyttede side altid er beskyttet, selv hvis brugeren indtaster URL’en direkte.

I praksis vil man have en database med brugernavne som PHP så undersøger, men det med databaser og PHP tager vi under næste emne.

Til toppen af siden.

19.4 AJAX i PHP

AJAX er både en fodboldklub og et rengøringsmiddel, men i kodeverdenen står det for Asynchronous JavaScript and XML. AJAX er ikke et selvstændigt sprog, det er en smart kombinaition af 2 teknologier: JavaScript og XML. XML ligner HTML, men man laver sine egne tags i stedet for.

Jeg vil ikke gå nærmere ind i, hvordan teknologien er skruet sammen. Det vigtige er, at du forstår, hvorfor det er smart, og AJAX nogenlunde kan.

Du har allerede nu set flere gange, at et program kan give en tilbagemelding. F.eks. kan du få en fejlmeddelse, hvis du indtaster forkert i et felt. Hvis du skriver “Jeg er doven” i et felt til indtastning af en email adresse, så får du en fejl.

“Problemet” er, at du først får fejlen, når du klikke på knappen “Send”. Opdateringen af siden sker først, når du klikker, der sker ingen løbende opdatering. Med AJAX kan man lave en “asynkron” opdatering. Det betyder, at det felt, du skriver i, opdateres.

Set med brugerens øjne får du en tilbagemelding med det samme, når feltet er udfyldt. Du skal ikke vente, til du har udfyldt en masse felter og så klikker på knappen “Send”. Det gør det selvfølgelig nemmere for brugeren at udfylde rigtigt med det samme. AJAX findes til flere sprog, også til PHP. Med andre ord. AJAX gør det muligt at opdatere dér, hvor du skriver, uden at opdatere resten af siden.

AJAX bruges overalt: Hvis jeg nu gerne vil på ferie til Maldiverne og indtaster “Maldi” hos Google, så er AJAX allerede i gang med at opdatere feltet og komme med løsningsforslag. Det sker, uden at du gør andet end at taste i feltet. Meget brugervenligt :-). Du kan naturligvæs læse meget mere om AJAX hos W3schools.

Til toppen af siden.

19.5 OOP/objektorienteret programmering

Objektorienteret programmering, fremover OOP, er en måde at tænke programmering på, som går igen i alle dynamiske sprog. JavaScript, PHP. C#, Java, Python, alt hvad du kan finde på.

Det går ud på at skrive mindre kode og genbruge mere af den kode, man skriver. Det gør vi gennem klasser og nedarvning i stor stil.

Du har faktisk smagt lidt på det. Nedenfor ser du kode, som kan gøre skriften rød i HTML.

I stedet for at skrive stylingen på hhv. <h1> og <p> kan vi udnytte, at både <h1> og <p> befinder sig inde i <body> og derfor nedarver egenskaberne fra <body>. Koden herunder giver det samme resultat bare med grøn skriftfarve, men den er slankere end oven over.

OOP er dog meget mere end det, selvom nedarvning spiller en meget stor rolle. Men man arbejder også med begreber som klasser og objekter. “Biler” kan være en klasse hvor medlemmerne har f.eks. egenskaberne “Bilmærke”, “Pris”, “Motorstørrelse”. Kort sagt egenskaber, der er fælles for alle biler.

Så kan vi lave f.eks. 2 underklasser af “Biler”. Det kan være “Lastbiler” og “Personbiler”. De egenskaber, som vi finder hos “Biler”, vil gå igen hos både “Lastbiler” og “Personbiler” (bilmærke, pris, motorstørrelse osv.). Men nu tilføjer vi yderligere egenskaber, som er specifikke for de 2 underklasser. F.eks. er det relevant at vide, hvor mange sæder der er i en personbil, hvilken type personbil der er tale om (sedan, pick-up, sportsvogn, SUV). Disse oplysninger er ligegyldige for lastbiler. Omvendt vil nogle andre egenskaber være vigtige for lastbiler, f.eks. type (lastbil, tankvogn, kranvogn), og disse typer er ikke relevante for personbiler.

Det går ud over bogen her at gå dybere ned i OOP. Men nu har jeg nævnt det, og hvis du skal videre med programmering, så vil du hurtigt komme til at arbejde med OOP. W3schools har en stor sektion om OOP på https://www.w3schools.com/PhP/php_oop_what_is.asp.

Til toppen af siden.

KOMMANDO	EKSEMPEL	FORKLARING
`strlen()`		Tæller længden på strengen, dvs. teksten
`str_word_count()`		Tæller antal ord i strengen
`strpos`()		Du kan søge efter en streng, f.eks. “world” og få den til at returnere enten “false”, hvis strengen ikke findes, ellers hvilken position, den er på.

KOMMANDO	EKSEMPEL	FORKLARING
`NaN()`		Det kan ikke lade sig gøre at tage kvadratroden af et negativt tal. NaN
`is_nummeric()`		Kan afgøre, om en variabel er et nummer eller ej.

INPUT TYPE	KODE	FORKLARING
Emal	<input type=”email”>	Kan validere, om brugeren har indtastet en valid email adresse
Dato	<input type=”date”>	Sikrer at brugeren indtaster en dato. Det ser sådan ud. Desværre understøtter Safari ikke koden.
Nummer	<input type=”number”>	Returnerer en fejl, hvis du ikke udfylder med et tal.
Restriktioner		Du kan lægge restriktioner på. F.eks. at der minimum skal være minimum 2 og maksimum 30 bogstaver, når du indtaster navn eller efternavn. Læs mere på https://www.w3schools.com/html/html_form_input_types.asp og læs i næste afsnit.
Password	<input type=”password”>	Med denne type vises password som en række stjerner. Ikke “Password” men ********

ELEMENT	VISNING	FORKLARING
Label		En label er bare en etikette. Etiketten står til venstre. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <label> og <input>
Input		Input feltet kan bruges til alt fra knapper til tekstfelter. God til korte felter, men den kan alt muligt inklusive at evaluere input og komme med fejlmeddelelser. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <label> og <input>
Text area		God til fritekst, hvis brugeren skal kunne skrive længere tekster. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <textarea>
Fald-ned menu		God til at tvinge brugeren til et valg, som man selv definerer. Kan bruges til både 1 eller flere valg. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <select>
Radio knapper		God til at synliggøre flere valgmuligheder, hvor brugeren så kun på vælge 1 af dem. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_4_Input_typer under radio knapper
Tjekboks		God til at synliggøre flere valgmuligheder, men her kan brugeren vælge flere af dem. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_4_Input_typer under tjekbokse
Fiedset og legend		Kan gøre din formular pænere og inddele i sektioner. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <fieldset> og <legend>