Inleiding

Welkom bij de cursus PhP. In deze cursus ga je leren wat je zoal kunt doen met de programmeertaal PHP. Deze cursus is natuurlijk niet uitputtend. De basiselementen zijn echter al voldoende om je grote en complexe zaken te laten programmeren.

In de cursus PhP zal regelmatig verwezen worden naar de theorie op w3schools.

Aan het einde van deze les weet je :

Hoe je PhP in een html document plaatst.
Hoe je met PhP een html document kan schrijven.
Hoe je met PhP een formulier gebruikt.
Hoe PhP van Javascript verschilt.

Eerste php document

Start

Er zijn vele strategiën om PhP in een HTML document te plaatsen. Hier krijg je een vorm aangeboden die code (geel deel in voorbeeld1) en uitvoer (groen deel in voorbeeld1) scheidt, ongeveer zoals je dat is aangegeleerd in de javascript module.

Neem de volgende code over in je favoriete code editor (VScode, Notepad++, ...) en bewaar het in een bestand voorbeeld1.php in de map met jouw naam in jouw klas op de server websrv2021. (Ben je geen leerling bij het RLO dan moet de code in iedergeval geplaats worden op een plek waar een webserver voorzien van PhP toegang heeft. Je kunt van je eigen computer ook een webserver maken, of je kunt online werken op de site van replit. ) Bestudeer de code, bekijk eventueel deze video en stel vragen als je iets niet snapt.

<?php
//voorbeeld1
//Met bovenstaand commando open je de PhP mode in een php document


/* Maak een string variabele aan genaamd uitvoer. 
   Let op in PHP moet er voor een variabele een $ teken staan
*/
$uitvoer = "Hallo maatje. Deze tekst heb ik voor je aangemaakt";



/* Met onderstaand echo commando kun je een stuk text tussen END en END;
   naar de client computer sturen
*/
echo <<<END
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>    
<title>Voorbeeld 1</title>
</head>
<body>
$uitvoer
</body>
</html>
END;

//einde van het PHP blok
?>

Start een browser en ga naar http://websrv2021 (Dit kan alleen op school) en zoek het zo juist opgeslagen bestand. Onze versie vind je hier. Klik met je rechter muis in je browser venster en bekijk de broncode. Als het goed is valt je op dat er van de code helemaal niets te zien is.
Bekijk ook eens de broncode in de browser van één van je javascript opdrachten. Je zult zien dat de javascript code wel in de broncode te zien is.
De uitvoer van PHP is dus een HTML document zonder PHP code. Je kunt ook javascript code laten schrijven door PHP code. Het is dan ook mogelijk om Javascript en PhP te combineren. Dit zullen we later in hoofdstuk Ajax gaan doen.

Een alternatief om je code te testen is https://phpfiddle.org. Om daar formulieren te gebruiken moet je de code in dit document als basis gebruiken.

Opdrachten

Zorg dat het script de volgende tekst toont: "Hallo ik ben ... Dit is mijn eerste PHP opdracht."

Geef de volgende code een plek in het bovenstaande voorbeeld. Geef meer commentaar.

$tekst1="Hallo maatje. ";
$tekst2="Deze tekst heb ik voor je aangemaakt.";
// Met . (concatenation operator) koppel je strings aan elkaar (is + in javascript)
$uitvoer = $tekst1."<br/>".$tekst2;

Inleveropdracht: Zorg dat het script in het voorbeeld veranderd wordt zodat de volgende tekst wordt getoond:
```
Hallo ik ben ...
Het is vandaag <weekdag> <dagnummer> <maand>.
Dit is mijn derde PHP opdracht.
```
Hiertoe kan je het volgende stukje code als voorzet gebruiken. Volg de link om andere info over $vandaag te krijgen. (PhP boek Instruct Hst 2 geeft ook nog informatie en uitleg)
```
$vandaag= getdate(); // $vandaag is een array
$maand = $vandaag['month'];
$uitvoer = "De huidige maand is $maand";
```
Probeer bovenstaande ook eens uit te voeren met de date(format,timestamp) functie.

Invoer gegevens in url

GET request

Als je deze link volgt dan zie je in de adresbalk na http://www.google.nl/search een ? staan met daarna een hele berg andere code. Het vraagteken geeft het begin aan van een code die de bezoeker (client) opstuurt naar de server en die een specifieke opdracht weergeeft. Het deel q=php geeft bijvoorbeeld aan dat we in het zoek invoerveld php hebben getypt. Deze vorm van vragen (request in het engels) aan de server noemen we een GET request. In het volgende voorbeeld laten we zien hoe je zo'n request verwerkt.

Neem de volgende code over in HTML-Kit en bewaar het in een bestand voorbeeld2.php in de map met jouw naam in jouw klas op de server websrv2021. Bestudeer de code, bekijk eventueel deze video en stel vragen als je iets niet snapt.

<?php
//voorbeeld2
// Met bovenstaand commando open je de PHP mode in een php document

// Maak een variabele waarin we het GET request gaan opslaan`
// Merkop dat hier voor de naam van de variabele mijgetvraag een "$" teken staat.
// Dit moet je bij het aanmaken en aanroepen van variabelen in php altijd doen
$mijngetvraag="Dit is een standaard voor als ik geen specifieke opdracht krijg";

// test of de optie 'getvraag' in de url aanwezig is. Die optie vind je in de array $_GET
// Ook php kent de if(){}else{} conditie structuur
// $_GET is een array. In deze vorm een zogenaamde associatieve array. Later komen we daar nog
// op terug. 
if( isset($_GET['getvraag']) ) // isset($arg) bepaalt of de variabele $arg een waarde heeft.
{
  $mijngetvraag=$_GET['getvraag']; // Als getvraag in de url aanwezig is dan vervangen 
                                   // we de oorspronkelijke tekst in
                                   // $mijngetvraag in de url opgegeven waarde 
}																	 

// Met . (concatenation operator) koppel je strings aan elkaar (is + in javascript)
$uitvoer = "Hallo maatje. Deze tekst heb ik van je binnen gekregen <br/>".$mijngetvraag;

/* Met onderstaand echo commando kun je een stuk text tussen <<<END en END;
   naar de client computer sturen
*/
echo <<<END
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>    
<title>Page title</title>
</head>
<body>
$uitvoer
</body>
</html>
END;
//einde van het PHP blok
?>

Start een browser en ga naar http://websrv2021 (Dit kan alleen op school) en zoek je het zo juist opgeslagen bestand. Onze versie vind je hier zonder getvraag en hier met een getvraag opdracht. Bekijk goed de adresbalk in de browser.

Opdrachten

Roep de bladzijde aan met de tekst "Deze kennis wil ik ook".
Zorg dat het bovenstaande PHP script luistert naar de opdracht "ikdoe" in plaats van "getvraag".

Invoer gegevens in formulier

GET request en Formulier

In het bovenstaande voorbeeld heb je gezien dat we een PHP script van informatie kunnen voorzien door achter het bestand een vraagteken kunnen plaatsten. Achter de vraagteken kunnen we een opdracht geven met een waarde (?opdracht=waarde). We zullen nu het voorbeeld uitbreiden zodat we met een formulier de opdracht kunnen opsturen.

Neem de volgende code over in HTML-Kit en bewaar het in een bestand voorbeeld3.php in de map met jouw naam in jouw klas op de server websrv2021. Bestudeer de code, bekijk eventueel deze video en stel vragen als je iets niet snapt.

<?php
//voorbeeld3
// Met bovenstaand commando open je de PHP mode in een php document

// Maak een variabele waarin we het GET request gaan opslaan
$mijngetvraag="Dit is een standaard voor als ik geen specifieke opdracht krijg";

//test of de optie in de url aanwezig is. Die informatie vind je in de array $_GET/
if( isset($_GET['getvraag']) ) 
{
  $mijngetvraag=$_GET['getvraag']; // Als getvraag aanwezig is dan vervangen we de tekst
}

$uitvoer = "Hallo maatje. Deze tekst heb ik van je binnen gekregen <br/>".$mijngetvraag;

/* Echo het html document naar de client*/
echo <<<END
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>    
<title>Page title</title>
<link href="voorbeeld.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- We definiëren hier een formulier in HTML. -->
<form action="voorbeeld3.php" method="GET">
<!-- action attribute verwijst naar het php document dat het formulier moet verwerken.
  In dit geval dus het zelfde document als het document die het formulier bevat.
--> 
<table>
<tr>
  <td>Voer een tekst in</td>
  <td>
    <!-- 
         Defineer een invoerveld net als in Javascript. 
         Echter hier gebruiken we het "name" attribuut inplaats van het "id"
         om naar de invoer te verwijzen.
    -->
    <input name="getvraag" value=""/></td>
  </td>
</tr>
<tr>
  <td colspan="2"><input type="submit" name="knop" value="Verstuur"/></td>
</tr>
</table>
</form>
<!-- We geven de uitvoer ook even een eigen plekje -->
<p class="uitvoer">
$uitvoer
</p>
</body>
</html>
END;
//einde van het PHP blok
?>

Start een browser en ga naar http://websrv2021 (Dit kan alleen op school) en zoek je het zo juist opgeslagen bestand. Onze versie vind je hier. Bekijk goed de adresbalk in de browser. Je ziet dat er nog een waarde wordt opgestuurd namelijk de waarde van de input "knop". Meervoudige informatie wordt gescheiden door het & teken.

Opdrachten

Inleveropdracht:
Zorg dat in het invoerveld naar je naam wordt gevraagd. Zorg dat de uitvoer wordt: Dag "de ingevoerde naam".
Inleveropdracht:
Zorg voor een tweede invoerveld genaamd "hobby" waar naar je hobby wordt gevraagd. Zorg dat er op een nieuwe regel in de uitvoer wordt aangegeven wat de ingevoerde hobby is.
Inleveropdracht:
Zorg voor een derde invoerveld genaamd "geboortedatum" waar naar je geboortedatum wordt gevraagd. Zorg dat er op een nieuwe regel in de uitvoer de geboortedatum wordt getoond.

Extra: graphics

Zorg voor een invoerveld genaamd "straal" waar naar de straal voor een cirkel wordt gevraagd. Laat de cirkel zien door de ingevoerde waarde in te vullen in de volgende svg code.
```
<svg height="100" width="100">
  <circle cx="50" cy="50" r="$straal" stroke="black" stroke-width="3" fill="red" />
</svg>
```
Zorg voor een invoerveld genaamd "zijde" waar naar de lengte van de zijde van een vierkant wordt gevraagd. Teken het vierkant met behulp van rectangle in svg code.
Verzin nog een eigen svg opdracht. Maak er wat moois van.

Vergelijk document met Javascript en PhP

Onderstaand zijn twee documenten geplaatst die beide dezelfde werking hebben. Bij PhP vindt de bewerking van de invoer op de server computer plaats. Bij Javascript vindt de bewerking van de invoer op de computer van de bezoeker plaats. In beide programma's is de werkelijke werking schuin gedrukt. Als je de documenten goed bestudeert zie je dat er niet heel veel verschil is.

PhP

Javascript

<?php
//begin programma code
  // invoer voor programma
  $invoer="";
  if( isset($_GET['invoer']) )
  {
    $invoer=$_GET['invoer'];
  }
  // bewerking van de invoer tot uitvoer
  $uitvoer="Je hebt als invoer '$invoer' gegeven";
//einde programma code
/* schrijf het html document waarin 
   de uitvoer wordt geplaatst inclusief het formulier
*/
echo <<<END
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>    
<title>Page title</title>
<link href="voorbeeld.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="voorbeeldvergelijkphp.php" method="GET">
  <table>
    <tr>
      <td>Voer een tekst in</td>
  	  <td><input name="invoer" value="$invoer"/></td>
    </tr>
    <tr>
      <td colspan="2">
  	    <input type="submit" name="knop" value="Verstuur"/>
  	  </td>
    </tr>
  </table>
</form>
<!-- We geven de uitvoer ook even een eigen plekje -->
<p class="uitvoer">
	 $uitvoer
</p>
</body>
</html>
END;
?>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>    
<title>Page title</title>
<link href="voorbeeld.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
//begin programma code
  function voeruit()
  {
   // invoer voor programma
   var invoer = document.getElementById('invoer').value;
   // bewerking van de invoer tot uitvoer
   var uitvoer= "Je hebt als invoer "+ invoer +" gegeven";
   // plaats uitvoer in document
   document.getElementById('uitvoer').innerHTML=uitvoer
  }
//einde programma code
//-->
</script>
</head>
<body>
<form onsubmit="voeruit(); return false;">
  <table>
    <tr>
      <td>Voer een tekst in</td>
      <td><input id="invoer" value=""/></td>
    </tr>
    <tr>
      <td colspan="2">
  	    <button onclick="voeruit()">Verstuur</button>
  	  </td>
    </tr>
  </table>
</form>
<!-- We geven de uitvoer ook even een eigen plekje -->
<p id="uitvoer" class="uitvoer">
</p>
</body>
</html>