Forberedelse
- Læs kapitel 18 Databehandling i formularer
Formål
- Knytte forbindelsen fra frontend formularer til backend
Fælles gennemgang
Fra sidst
– Forklar ud fra nedenstående, hvad en funktion er for noget
- Hvorfor er funktioner så fantastiske
- Hvad er en formular, se evt. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
- Hvor almindelige er formularer
- Hvad kan vi bruge et <input> felt til
- Hvad er en attribut
- Hvordan kan vi styre input fra formularer
Lektien til denne gang
- Hvor kommer PHP ind i billedet i forhold til formularer
- Gennemgå den her: https://www.w3schools.com/php/php_forms.asp. Hvordan modtager man data, hvad er forbindelsen mellem HTML og PHP (name attribut, action, post, $_POST[“name”]
Øvelser
Vigtigt inden du går i gang. Når du udvikler: Fail often, fail early. Lav mange småtest snarere end få store test. Så finder du fejlene hurtigere og kan tilsvarende hurtigere rette dem
29.1 Modtag data fra en formular med PHP
I afsnit 18.1 Et simpelt eksempel i bogen findes der et link til et eksempel hos W3schools https://www.w3schools.com/php/php_forms.asp. Siden med koden ser sådan her ud:
- Kopier koden over i VS-Code og få den til at virke. Bemærk, at der er 2 filer. Både en almindelig PHP fil, som du må kalde, hvad du vil, og filen welcome.php
- Det kræver, at du kan køre PHP på din computer. Dvs. at du skal have XAMPP serveren til at køre, og at koden skal placeres i mappen C:\xampp\htdocs, i hvert fald på PC. Se eventuelt vejledning7. PHP og MySQL
Selve opgaven
- Hvordan fungerer koden
- Hvordan modtager den data fra formularen
- Ændr i teksten, så brugeren ser alt tekst på dansk
- Tilføj en <h1> overskrift i welcome.php, så der står f.eks. “Tak for din besked”. Tilføj gerne et par yderligere høfligheder
- Tilføj 3 tekstfelter mere til Adresse, Postnummer og By. Få felterne til at virke, så du får indholdet af felterne skrevet i welcome.php
- Sæt til sidst attributten require på alle felter. Kan du få det til at virke, så du ikke kan sende formularen, før at alle felter er udfyldt
29.2 Validering på samme side
- Tag en kopi af koden nedenfor og sæt den ind i et PHP dokument
- Test koden af, hvad gør den. Se bort fra, at dokumentet ikke er så stylet
- Hvad gør koden “<form method=”post” action=”<?php echo $_SERVER[“PHP_SELF”];?>”>” tror du
- Hvad gør koden <?php echo $_POST[“name”]; ?>
- Udbyg formularen, så du får et felt til både “Fornavn” og “Efternavn”. Test at det virker. Du skal både rette i formularen og i linjerne nedenfor med “Welcome …..”, dvs. så data modtages
- Lav også felter til adresse, postnummer og by og vis, at du kan modtage disse data.
<html>
<body>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
29.3 Lav en formular
- Først skal du lave en formular med nedenstående felter til indmeldelse i en kundeklub
- Navn
- Adresse
- Postnummer
- By
- Alder. Laves med fald-ned menu, så man vælger mellem 0 – 19 år, 20 – 39 år, 40 – 59 år og +60 år
- Køn: Lav radio knapper, så brugerne kan vælge mellem “Hankøn”, “Hunkøn” og “Andet”
- Lav en tjekboks til “Modtag vores nyhedsbrev”
- Lav et text area felt til kommentarer
- Når den er færdig, skal du lave en modtagelse af data på samme side (se opgave 29.2). Det ender med, at du nederst på siden skriver:
- Dine data er:
- Navn (værdi),
- Adresse (værdi)
- Postnummer (værdi)
- By (værdi)
- Alder (værdi)
- Køn (værdi)
- Vil du have nyhedsbrevet (værdi, kan kun være ja eller nej)
Vigtigt: Gem dit arbejde, du kan risikere at skulle bruge det igen senere.
29.4 Validering af formularer
Nedenfor ser du en stump kode.
- Gem koden i et php dokument
- Test formularen af ved at glemme at udfylde alle felter.
- Du ser fejlmeddelser rettet mod brugerne. Prøv at forklare, hvordan det kan lade sig gøre. Bemærk kombinationen af html-koden <span> og php.
- Der mangler kode i forhold til at modtage de data, som brugeren har fyldt ud. Lav den kode (ligner $name= $_POST[“name”];, men det skal laves for alle felter)
- Lav kode, så brugerne får fejlmeddelser, hvis de ikke udfylder de nødvendige felter. Alle felter undtagen det store felt til fritekst er nødvendige felter
- Lav alt tekst til brugerne på dansk
- Lav en fald-ned menu, hvor brugerne kan vælge, hvor de kommer fra: Du skal have følgende muligheder i fald-ned menuen i den viste rækkefølge: “Storkøbenhavn”, “Sjælland med øer”, “Fyn med øer”, “Jylland”
- Hvad vil du gøre for at forhindre, at alle ikke vælger “Storkøbenhavn”
- Lav en tjekboks, hvor brugeren kan tilmelde sig et nyhedsbrev
- Ekstraopgave 1. Lav kode, som kan tjekke, om brugeren har udfyldt feltet til indtastning af navn kun med bogstaver. Dvs navnet “Jensine Jensen” er ok, men ikke “98Jensine #¤% Jensen”. Tip: Kik i lærebogen i afsnit 18.7 om validering af navn
- Ekstraopgave 2. Læs afsnit 19.2 om include() og require(). Anvend require() til at få ryddet op, så der ikke er så meget php kode.
- Ekstraopgave 3. Lav styling af din formular
<!DOCTYPE HTML>
<html>
<head>
<style>
span{
color: red;
}
</style>
</head>
<body>
<?php
// Set variables to zero
$name = $email = $gender = $comment = $website = null;
$nameErr = $genderErr = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if(empty($name)){
$nameErr = "* Please remember to write a name";
}
else{
$name= $_POST["name"];
}
if(empty($gender)){
$genderErr = "* Please remember to choose a gender";
}
else{
$gender = $_POST["gender"];
}
}
?>
<h1>PHP Form Validation Example</h1>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
<!-- the <span> code makes a small box just like <div>. But unlike <div>
<span> will not make a new line. <span> is not a blog tag -->
Name: <input type="text" name="name" ><span><?php echo $nameErr ?></span>
<br><br>
E-mail: <input type="text" name="email">
<br><br>
Website: <input type="text" name="website" >
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<span><?php echo $genderErr ?></span>
<br><br>
<input type="submit" name="formSubmit" value="Submit">
<input type="reset" value="reset">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>
29.5 (Tidligere opgave 29.3) en valutaomregner
- Kopier koden nedenfor og sæt den ind i et php dokument f.eks. i VS-Code
- Prøv koden af: Hvad kan den?
- Undersøg hvad PHP funktionen “empty” kan. Tip: Prøv at læse siden her hos W3schools: https://www.w3schools.com/php/func_var_empty.asp
- Prøv at lave fejl med vilje, f.eks. undlade at vælge fra fald-ned menuen. Kan du få programmet til at “crashe”? Noter ned, hvis det lykkes dig at få det til at lave fejl
- Hvordan sendes data (post eller get)
- Hvordan modtages data, dvs. hvordan kommer vi fra en indtastning i frontend til variable i backend, som PHP kan beregne på. Forklar med kommentarlinjer så tæt på koden som muligt.
- Hvorfor tror du, at jeg har indsat et punkt øverst i fald-ned menuen , der hedder “Vælg fra liste …”
- Hvordan ved den, hvilken omregning den skal lave: DKK -> Euro eller omvendt. Forklar med kommentarlinjer så tæt på koden som muligt
- Hvordan beregner den. Forklar med kommentarlinjer så tæt på koden som muligt
- Hvordan returneres resultatet til brugeren i frontend. Forklar med kommentarlinjer så tæt på koden som muligt
<!DOCTYPE html>
<html>
<body>
<?php
$valg = $belob = $resultat = 0;
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$valg = $_POST["valg"];
$belob = $_POST["belob"];
if($valg == "dkk-euro"){
$resultat = $belob / 7.5;
}
elseif($valg == "euro-dkk"){
$resultat = $belob * 7.5;
}
else{
$resultat = "Noget er gået galt i omregningen. Prøv venligst igen";
}
}
?>
<h1>Valutaomregner</h1>
<p>Indtast det ønskede beløb, som du vil omregne</p>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
<label for="valg">Vælg valuta omregning</label>
<select name="valg" id="method">
<option value="fejl">Vælg fra liste ...</option>
<option value="dkk-euro">DKK til EURO</option>
<option value="euro-dkk">EURO til DKK</option>
</select>
<br><br>
<label for="start_belob">Indtast beløb</label><br>
<input type="text" id="start_belob" name="belob" value="<?php if(isset($belob)){echo $belob;} ?>"><br><br>
<input type="submit" value="Omregn">
<input type="reset" value="Nulstil formualren"><br>
<hr>
<label for="resultat_belob">Det omregnede beløb</label><br>
<input type="text" id="resultat_beløb" name="resultat" value="<?php if(isset($resultat)){echo $resultat;} ?>"><br>
</form>
</body>
</html>29.6 Tilpas koden
Du skal nu lave nogle ændringer i koden:
- Den skal nu kunne omregne fra DKK til USD (US-doller) og omvendt + omregne fra DKK til Thailandske bath og omvendt. 1 bath = 0,2 danske kroner
- Prøv et nyt layout af, hvor du i stedet for at vælge fra en fald-ned menu vælger fra gensidigt udelukkende radio knapper. Kod løsningen
- Hvilken løsning af de 2 mener du er mest brugervenlig
29.7 Validering af input
Jeg har nu udvidet eksemplet fra før med noget input validering. I første runde skal du bare prøve koden af. Den ligner opgave 29.4.
- Kopier koden over i et PHP dokument og prøv koden af. Hvad kan koden?
- Prøv at lave bruger-fejl, både ved at glemme at vælge fra fald-ned menuen, ved at glemme at indtaste noget i indtastningsfeltet eller i stedet for tal at indtaste bogstaver
- Hvad sker der, hvis du laver fejl
- Er brugeren godt hjulpet med fejlmeddelser
- Fanger systemet alle slags fejl, som brugeren kan begå
Nu skal du studere koden nærmere
- Forklar hvordan brugeren kan give en fejlmeddelelse hvis brugeren:
- Ikke vælger noget i fald-ned menuen
- Glemmer at udfylde feltet til indtastning af beløb
- Udfylder feltet til indtastning af beløb forkert
- Ændr fejlmeddelelserne, så de bliver bare lidt høfligere.
- Småsvært men vigtigt spørgsmål: I linje 41 finder du en udkommateret linje. (// echo “linje 41, resultat er:” . $resultat . “, og beløb er:” . $belob;). Når du sætter koden ind i VS-Code, ser du hurtigt, hvor linje 41 er. Prøv at fjerne udkommateringen og se, hvad der sker. Hvad tror du, at linjen har været brugt til
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// Nulstil variable. Bemærk, at der er 2 nye variable i forhold til før
$valg = $belob = $resultat = $valgErr = $belobErr = null;
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$valg = test_input($_POST["valg"]);
$belob = test_input($_POST["belob"]);
// tjek først om der er valgt noget i fald-ned menuen
if($valg == "fejl"){
$valgErr = "Er du faldet i søvn? Få nu valgt det rigtige, syvsover!";
}
else{
$valgErr = null;
}
//behandl data fra input feltet
if(empty($_POST["belob"])){
$belobErr = "Det her er helt tosset, hvad tænker du på? Du har ikke indtastet noget i feltet. Man skulle tro, at du holdte med BUND-by!";
echo "her er " . $belobErr;
}
else{
$belobErr = null;
$belob = test_input($_POST["belob"]);
if(is_numeric($belob)== false){
$belobErr = "Hvis du virkeligt vil det her, så tag dig sammen og indtast et rigtigt beløb i stedet for at taste som en søvngænger :-)";
}
else{
if($valg == "dkk-euro"){
$resultat = $belob * 7.5;
// echo "linje 41, resultat er:" . $resultat . ", og beløb er:" . $belob;
}
elseif($valg == "euro-dkk"){
$resultat = $belob / 7.5;
}
}
}
}
// Find en forklaring på trim, stripslashes og htmlspecialchars på https://www.w3schools.com/php/php_form_validation.asp
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h1>Valutaomregner</h1>
<p>Indtast det ønskede beløb, som du vil omregne</p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<label for="valg">Vælg valuta omregning</label>
<!-- ny linje med span class="error" til at vise fejl-->
<span class="error">* <?php echo $valgErr;?></span>
<select name="valg" id="method">
<option value="fejl">Vælg fra liste ...</option>
<option value="dkk-euro">DKK til EURO</option>
<option value="euro-dkk">EURO til DKK</option>
</select>
<br><br>
<label for="start_belob">Indtast beløb*</label>
<!-- ny linje med span class="error" til at vise fejl-->
<span class="error"><?php echo $belobErr;?></span><br>
<input type="text" id="start_belob" name="belob" value="<?php if(isset($belob)){echo $belob;} ?>"><br><br>
<input type="submit" value="Omregn">
<input type="reset" value="Nulstil formualren"><br>
<hr>
<label for="resultat_belob">Det omregnede beløb</label><br>
<input type="text" id="resultat_beløb" name="resultat" value="<?php if(isset($resultat)){echo $resultat;} ?>"><br>
</form>
</body>
</html>29.6 Ekstra opgave
Prøv at gøre formularen fra opgave 29.5 pænere med noget velvalgt CSS. Du kan bare style i <head> sektionen.