PHP 2b - oefenen met HTML, PHP, en Forms

• Informatica
• WO
• Studiejaar 4,5

Fundament

D. Programmeren met PHP

Hoofdstuk 2.1 tmt 2.6

https://fundament-online.nl/leeromgeving/content.php?id=49121

Leerdoelen

Na deze les kun je (met PHP):

• een PHP/HTML pagina maken waarbij de gebruiker  met
   een form via POST methode gegevens kan invullen
• een PHP/HTML pagina maken en daarbij een "Undefined
   array key" fout kunt oplossen
• de invoer op je website ontsmetten
• W3Schools gebruiken om vraagstukken op te lossen

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

One step too far

Afgelopen les eindigden we met een opdracht (die we straks weer gaan doen)

Die opdracht bleek (gedeeltelijk) een stap te ver, dus nu eerst wat oefeningen waarbij we meer grip proberen te krijgen op  de combinatie tussen PHP en HTML

PHP en HTML 1/3

.htm, .html en .php zijn tekstbestanden 

de extensie bepaalt hoe de computer ze behandelt

het zijn tekstbestanden, zodat je ze met je IDE kunt lezen en bewerken

PHP en HTML 2/3

Je kunt PHP en HTML in gescheiden bestanden hebben, maar ook in een gedeeld .php bestand 

Let op: dat moet dan wel .php bestand zijn, 

Dus: een .php kan wel HTML staan, maar in .html geen PHP

PHP en HTML 3/3

Verschillende volgordes zijn mogelijk, bijvoorbeeld: 

                                                                       maar er zijn

                                                                       meer

                                                                       variaties

                                                                       mogelijk

Oh ja, de opdracht

De opdracht was om een formulier met HTML, PHP code en POST te maken... 

welke bestandsextensie moeten we dan dus gebruiken?

Oh ja, de opdracht

De opdracht was om een formulier met HTML, PHP code en POST te maken... 

welke bestandsextensie moeten we dan dus gebruiken?

.php omdat we HTML en PHP combineren

HTML Formulier 1/2

Eerst kunnen we in w3schools (want dat mochten we gebruiken) opzoeken hoe we een HTML formulier maken ...

en daar voorbeelden bekijken

HTML Formulier 2/2

Al snel zie ik voorbeelden en aan de linkerkant zie ik bij "HTML input types"  dat ik een type="email" kan aangeven

En ook hoe ik een "submit" knop kan maken

Dit is binnen 3 

minuten mijn

resultaat:

PHP Formulier 1/3

Nu hebben we HTML code voor het formulier, maar:

• daar moeten we nog POST van maken en 
• daar moeten we nog PHP voor schrijven (voor de echo)

Weer naar w3schools dus, nu op zoek naar POST

Ik ga naar PHP en zoek in de linkerkolom naar forms...

PHP Formulier 2/3

Daar zie ik al 

snel een goed 

voorbeeld: 

PHP Formulier 3/3

Op basis daarvan kun je zien dat <form>:

• een kenmerk method accepteert (POST in dit geval)
• een kenmerk action heeft, wat nu verwijst naar een .php
   bestand (maar in principe hoeft dat nu niet, omdat we
   niets specifieks doen,
   alleen gegevens ophalen)

PHP echo 1/2

Nu hebben we HTML code en PHP voor het formulier, maar:

• daar moeten we nog PHP voor schrijven (voor de echo)
  

Weer naar w3schools dus, nu op zoek naar echo uit een POST form

Ik lees verder op dezelfde pagina ("PHP Form Handling" lijkt me de juiste plek)...

PHP echo 2/2

a-ha!

welcome.php stond in de form

bij action, maar dat is dus

wat er uitgevoerd wordt als

het formulier wordt ingevuld... en het geeft het resultaat weer bij dit voorbeeld, wat zie je dat we kunnen gebruiken?

PHP echo 2/2

a-ha!

welcome.php stond in de form

bij action, maar dat is dus

wat er uitgevoerd wordt als

het formulier wordt ingevuld... en het geeft het resultaat weer bij dit voorbeeld, wat zie je dat we kunnen gebruiken?

<?php echo $_POST["name"]; ?>

PHP resultaat

                                         heeeeeey! PHP geeft foutmeldingen!

                                         maar de code werkt (in dit geval) wel...

Wat hebben we geleerd?

We hebben gezien:

1. welke bestandsextensie we gebruiken als we PHP en HTML willen combineren
2. gezien hoe HTML en PHP kunnen worden gecombineerd
3. gezien hoe je w3schools kunt doorzoeken
4. de informatie van w3schools kunt aanpassen voor jouw doeleinden

Und jetzt?

We moeten nog:

• de fout oplossen die we zagen: "Undefined array key"
• de rest van de opdracht maken (ontsmetten?)
• de website mooier maken, want die zag er wel héééél erg ouderwets uit

Opdracht # 1

Let op: geen gebruik van AI, wel w3schools.com

1. maak een php bestand aan: .\htdocs\02_01.php
2. vraag de bezoeker om naam en e-mail in te vullen
   
3. gebruik hiervoor de POST methode
4. geef via echo de invoer van de gebruiker weer
5. ontsmet de invoer en test het met XAMPP
6. los eventuele foutmeldingen op

Welke van deze PHP
variabelen is niet correct?

1. $this_Year
2. $_thisYear
3. $thisYear
4. $this-Year

Opdracht # 2

Let op: geen gebruik van AI, wel w3schools.com

1. zoek uit hoe je kunt valideren dat een correcte e-mail is ingevuld
2. maak de website mooier, bijvoorbeeld met uitlijning zodat alles beter leesbaar is, en met meer tekst zodat duidelijk is dat de invoer gelukt is... ga proberen!

Leerdoelen

Nu kun je:

• een PHP/HTML pagina maken waarbij de gebruiker met
   een form via POST methode gegevens kan invullen
• een PHP/HTML pagina maken en daarbij een "Undefined
   array key" fout kunt oplossen
• de invoer op je website ontsmetten
• W3Schools gebruiken om vraagstukken op te lossen

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6