4. PHP

Afdeling Informatica
Propedeuse, thema 1
Practicumopdrachten
HTML & PHP
Versie 1.2
September 2006
J. Baljé
1.





Opmerkingen vooraf
De bedoeling van dit thema is om je met verschillende aspecten van de Informaticastudie
te laten kennismaken. Je gaat dus de breedte in, niet de diepte. Met dit practicum krijg je
voldoende kennis om de leertaken te kunnen maken, maar je bent na dit thema nog geen
PHP programmeur. Het is dus heel normaal dat er na dit thema nog veel dingen zijn die
je niet weet!
Vanaf thema 3 leer je (als je voor Informatica of Technische Informatica kiest) grondig
programmeren in de populaire programmeertaal Java. Je hebt dan profijt van basiszaken
die je hier in thema 1 leert. Maar je zult ook merken dat in Java veel dingen weer net even
anders gaan. Programmeertalen verschillen nu eenmaal. Maar als je Java goed geleerd
hebt dan kun je andere talen snel oppikken.
Je komt in dit thema in aanraking met verschillende tools en talen waar je snel je weg in
moet vinden. Dat is kenmerkend voor de informatica, je komt vaak in aanraking met iets
nieuws.
Mocht je het leuk vinden om meer te weten dan kun je natuurlijk meer informatie zoeken.
Je kunt de gebruikte tutorials op w3schools grondiger doornemen, zelf een website
zoeken of een boek aanschaffen. Vraag desgewenst je docent om advies.
Als je al ervaring hebt met HTML en PHP dan kun je sneller door het practicum
heen. Overleg met je docent.
2.
Webtechnologie, statische en dynamische webpagina’s
Hoe werkt het opvragen van een webpagina nou eigenlijk? Wat is een client en wat is een
server? We geven hier een kort overzicht. Het is goed mogelijk dat je hier al van op de
hoogte bent. In dat geval kun je er snel doorheen en door naar de volgende sectie.
Internet en webpagina’s in het kort beschreven
Het huidige Internet wordt door de meeste mensen direct geassocieerd met het bezoeken
van webpagina’s. Als we iets verder kijken dan de webbrowser dan zien we dat het Internet
een verzameling van netwerken is. Al deze netwerken kunnen verschillend van opzet zijn. Ze
hebben echter één ding gemeenschappelijk, namelijk het communicatieprotocol TCP/IP.
In figuur 1 is een grafische weergave te zien hoe het fysieke pad van de thuis pc naar een
webserver er uit ziet. In het figuur zien we termen die je vaak tegenkomt bij netwerken, deze
zullen tijdens het college netwerken verderop in het kwartaal worden behandeld. Als we het
plaatje van links naar rechts bekijken dan zien we links een pc staan zoals deze (vanuit een
huissituatie) is aangesloten op het Internet. Op deze pc zal het TCP/IP protocol geïnstalleerd
en geconfigureerd moeten zijn om van het Internet gebruik te maken. Als we nu een
webbrowser opstarten (bv. FireFox of Internet Explorer) dan kunnen we webpagina’s
opvragen van de webserver zoals deze rechts in figuur 1 is weergegeven. Om de server te
benaderen moeten we allereerst een naam, URL (Uniform Resource Locator) genoemd,
ingeven van de desbetreffende server. In ons geval is dat www.hanze.nl. Aan de hand van
deze naam zal er een verbinding worden gelegd met de desbetreffende server. De pc is
hiermee een client geworden van de desbetreffende server. Algemeen kan men stellen dat
een server een dienst aan het netwerk levert en dat een client een afnemer is van een
dergelijke dienst.
Nadat we het adres van de server hebben ingevoerd zal de webbrowser op de achtergrond
aan de webserver vragen om zijn hoofdpagina aan ons op te sturen. De webbrowser en de
webserver communiceren met behulp van een eigen protocol. Dit protocol heet HTTP (hyper
text transfer protocol). Het HTTP protocol ligt bovenop het TCP/IP protocol. Als we in de URL
balk kijken van de webbrowser zal deze meestal de naam voorzien hebben van het
voorvoegsel http:// (in ons geval http://www.hanze.nl)
Op het moment dat de server de aanvraag van de webbrowser binnen krijgt zal deze zijn
index pagina terug sturen. Op het moment dat de index pagina op de client arriveert, zal de
webbrowser deze pagina tonen. De opmaak en data van deze pagina wordt geregeld door
HTML (Hyper text Markup Language).
Internet Service Provider(ISP)
Internet
Modem
Computer
Figuur 1
Modem
Router
Router
Web server
bv. www.hanze.nl
Nu we enige kennis hebben van het versturen en verwerken van webpagina’s op het Internet
gaan we ons verdiepen in PHP.
1. Lees paragraaf 1 van de beginnerscursus PHP.
Zoals je hebt gelezen bestaan er statische en dynamische webpagina’s. In dit practicum
zullen we eerst kijken naar statische webpagina’s (paragraaf 3). Daarna gaan we verder met
dynamische pagina’s. Maar het is belangrijk om je te realiseren dat een dynamisch
opgebouwde webpagina volledig HTML is op het moment dat het in de webbrowser wordt
getoond. Alleen is er een stap aan vooraf gegaan, waarbij de commando’s van een scripttaal
zijn omgezet naar HTML. Er bestaan verschillende scripttalen voor het maken van dynamische
webpagina’s. In dit thema zullen we kijken naar de scripttaal PHP (PHP Hypertext
Preprocessor) (paragraaf 4).
2. Leg bovenstaande zin uit: “… dat een dynamisch opgebouwde webpagina volledig HTML is
op het moment dat het in de webbrowser wordt getoond.”
3.
HTML
1. We gaan de basis van HTML bestuderen met behulp van de tutorials van W3schools. Ga
naar http://www.w3schools.com en klik “Learn HTML”.
2. Bestudeer de sectie HTML Introduction.
3. Bestudeer de sectie HTML Elements tot1 “Why do we use lowercase tags?”.
4. Bestudeer de sectie HTML Basic tags. Experimenteer vanaf hier telkens ook wat met de
Tryout editor.
5. Je kunt met behulp van de menuoptie ViewSource (of onder de rechtermuisknop) de
HTML code zien van de webpagina die je op dat moment in de webbrowser hebt. Doe
dat eens voor de tutorialpagina waar je bent. Kijk of je de tags uit de eerste tutorialsecties
kunt herkennen. Zijn er ook tags die je nog niet kent? Neem één onbekende tag en zoek
die op in de HTML reference (zie de link HTML tag list, links op de tutorialpagina).
6. Bestudeer de sectie HTML Links tot “The target attribute”. Bekijk onder “More examples”
het voorbeeld “Create a mailto link”.
7. Bestudeer de sectie HTML Tables tot “More examples”. Maak in de Tryout editor ook eens
een tabel zonder border.
8. Bestudeer de sectie HTML Forms.
9. Maak als oefening een webpagina voor een bedrijf dat bepaalde producten verkoopt
(vlaaienshop, computerzaak, …, wees creatief). Verwerk in die webpagina alle HTMLkennis die je hierboven geleerd hebt. Gebruik voor deze oefening nog een eenvoudige
teksteditor, desnoods kladblok.
 Maak een kop en een tekstje die het bedrijf beschrijft.
 Maak een tabel die een aantal producten uit het assortiment opsomt.
 Maak hyperlinks die naar aparte pagina’s gaan met uitgebreidere productbeschrijving.
 Maak onder aan de bladzijde een HTML form waarmee een gebruiker zijn naam,
emailadres en interesses kan doorgeven. Met die gegevens hoef je op dit moment
nog niets te doen. Zorg dat de submitknop de gebruiker doorstuurt naar een pagina
met de tekst “Bedankt voor uw belangstelling”.
Het is voldoende dat je demonstreert dat je de basis HTML beheerst. Maar als je wilt, mag
je er natuurlijk wat moois van maken. 
Het handmatig typen van HTML documenten is behoorlijk omslachtig. Er zijn dan ook veel
HTML-editors in omloop die het maken van HTML documenten vergemakkelijken. Eén van
die HTML-editors is Dreamweaver. Het komt er dan op neer dat je een document opmaakt
zoals je dat bijvoorbeeld in Microsoft Word gewend bent. “Achter de schermen” wordt dan
de benodigde HTML code gegenereerd. Dat levert een hoop tijdswinst op, maar voor de fijne
details moet je vaak toch nog even overschakelen naar de “code view” en handmatig wat
aanpassingen in de HTML uitvoeren. Dus je zult toch die basiskennis HTML moeten hebben.
1
‘Tot’ als ‘tot aan’ en niet als ‘tot en met’.
4.
PHP
Nu je basiskennis hebt van HTML, weet hoe een website werkt en PHP geïnstalleerd hebt,
ben je klaar voor de eerste kennismaking. We maken gebruik van de bijbehorende
beginnerscursus (zie Blackboard).
4.1 Intro
1. Lees paragraaf 1 en 2 door.
2. Het is gebruikelijk in de informatica om het leren van een nieuwe taal of omgeving te
beginnen met een “Hello World” testje. Dit op zich flauwe programmaatje is een test om
te kijken of alle onderdelen die je nodig hebt (de webserver, PHP, de juiste URL, … etc )
goed functioneren. Typ daarom het volgende stukje code in en voer het uit:
<html>
<body>
<?php
// Mijn eerste stukje PHP tussen de HTML code
echo "Hello World";
?>
</body>
</html>
Kopiëren en plakken in de editor is inderdaad sneller. Maar je zult zien dat het in het
begin heel leerzaam is om de kleine voorbeeldjes over te tikken. Je krijgt dan meer gevoel
voor de structuur van HTML en PHP. Zorg dat je elke detail van dit stukje code begrijpt.
Wat is HTML en wat is PHP-code? Hoe ziet het HTML- bestand eruit dat op basis van dit
PHP-bestand wordt gegenereerd? En wat krijg je in je browser te zien?
4.2 Variabelen
3. Lees paragraaf 3.
4. (Gehele getallen = integers) Typ het volgende stukje code in en voer het uit:
<html>
<body>
<?php
// Maak twee variabelen, tel ze bij elkaar op en
// stop het resultaat in de derde variabele
$getal1 = 10;
$getal2 = 15;
$som = $getal1 + $getal2;
// Laat het resultaat zien
echo "De som van $getal1 en $getal2 is $som.";
?>
</body>
</html>
5. (Decimale getallen = Doubles) Pas het vorige voorbeeldje aan door niet 10 en 15 te
gebruiken maar 3.1415 en 2.46.
6. (Strings) Het “aan elkaar plakken” van strings (stukjes tekst) gaat in PHP met behulp van
de . (punt). Dus “hallo” . “daar” levert “hallodaar”. (Als ik een spatie ertussen had
gewild dan had ik die achter hallo of vóór daar moeten zetten.)
Schrijf nu een PHP bestandje waarin je een variabele voor je voornaam en een variabele
voor je achternaam aanmaakt. Plak die twee aan elkaar in een derde variabele en zet het
resultaat op het scherm.
7. Maak 10 variabelen ($mijnvar1 t/m $mijnvar10) aan met willekeurige waarden. Schrijf een
stukje PHP die deze in een tabel zet met twee kolommen en 5 rijen. Je zult dan dus
HTML-tags op moeten nemen in je output.
8. (Arrays) Onderstaand stukje code maakt een array aan met 10 elementen. Zet nu de 10
arraywaarden in een tabel met behulp van je code uit de vorige opdracht.
<html>
<body>
<?php
// Maak een array met 10 waarden. Let op, in de informatica
// telt men meestal vanaf 0.
$mijnArray = array( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 );
// Zet de waarden van het array in een HTML tabel:
echo "…";
?>
</body>
</html>
4.3 Controle structuren
9. Lees de inleiding van hoofdstuk 4 tot aan 4.1 (dus logische operatoren en
vergelijkingsoperatoren).
10. (Logische operatoren) Voorspel wat er uit de volgende code komt. Voer het daarna uit en
kijk of je voorspelling klopt. Experimenteer daarna zelf ook nog met dit programmaatje
tot je het echt begrijpt.
<html>
<body>
<?php
// Maak telkens boolean variabelen aan en combineer die.
// Voorspel wat er uitkomt. Varieer zelf met de verschillende
// waarden en kijk wat er gebeurt.
$boolean1 = TRUE;
zetOpScherm( "Boolean1 is", $boolean1 );
$boolean2 = FALSE;
zetOpScherm( "Boolean2 is", $boolean2 );
// Mag deze student aan de Hanze studeren?
// Dan moet hij aan twee voorwaarden voldoen.
$juisteVooropleiding = TRUE;
$collegegeldBetaald = FALSE;
$antwoord = ( $juisteVooropleiding AND $collegegeldBetaald );
zetOpScherm( "Deze student mag hier studeren is", $antwoord );
// Je kunt dus ook && gebruiken
$antwoord = ( $juisteVooropleiding && $collegegeldBetaald );
zetOpScherm( "Deze student mag hier studeren is", $antwoord );
// Een bepaalde disco laat meisjes gratis naar binnen.
// Mag deze persoon naar binnen?
$ikBenEenMeisje = FALSE;
$ikHebEntreeBetaald = TRUE;
$antwoord = ( $ikBenEenMeisje OR $ikHebEntreeBetaald );
zetOpScherm( "Deze persoon mag naar binnen is", $antwoord );
// Je kunt dus ook || gebruiken
$antwoord = ( $ikBenEenMeisje || $ikHebEntreeBetaald );
zetOpScherm( "Deze persoon mag naar binnen is", $antwoord );
// Stoplicht
$lichtOpRood = FALSE;
$ikMagDoorrijden = !$lichtOpRood;
zetOpScherm( "Ik mag doorrijden is", $ikMagDoorrijden );
/////////////////////////////////////////////////////////////////
// Een eigengemaakte functie om de uitkomsten mooi op het scherm
// te zetten. Als je wilt weten hoe dit werkt, kijk dan naar
// de beginnerscursus (sectie 5). Je mag het ook eerst overslaan.
function zetOpScherm( $tekst, $boolean ){
// Gebruik een voorgedefinieerd PHP-functie om de boolean
// om te zetten in de tekst "true" of "false";
$booleanAlsTekst = var_export( $boolean, TRUE );
// Plak de handel aan elkaar. Eerst de tekst,
// dan een spatie, dan de boolean (met HTML-code om
// hem vet te maken) en dan een HTML-regelovergang.
// Anders zouden de volgende teksten op dezelfde
// regel komen.
$tekst = $tekst . " <b>" . $booleanAlsTekst . "</b><BR>";
// Nu kan de tekst naar het scherm.
echo $tekst;
}
?>
</body>
</html>
11. Maak een soortgelijk programma als de vorige opdracht om de werking van de
vergelijkingsoperatoren te testen. Het zijn er dus zes: gelijk, ongelijk, groter, kleiner,
groter-of-gelijk, kleiner-of-gelijk). Vergelijk gehele getallen met elkaar.
12. Lees paragraaf 4.1 (if en else).
13. Voorspel wat er uit de volgende code komt. Voer het daarna uit en kijk of je voorspelling
klopt. Experimenteer daarna zelf ook nog met dit programmaatje tot je het echt begrijpt.
<html>
<body>
<?php
// Mag deze student aan de Hanze studeren?
// Dan moet hij aan twee voorwaarden voldoen.
$juisteVooropleiding = TRUE;
$collegegeldBetaald = FALSE;
if ( $juisteVooropleiding && $collegegeldBetaald ){
echo "Ok, aan de slag!<BR>";
} else {
echo "Helaas, je mag niet beginnen.<BR>";
}
// Een bepaalde disco laat meisjes gratis naar binnen.
// Mag deze persoon naar binnen?
$ikBenEenMeisje = FALSE;
$ikHebEntreeBetaald = TRUE;
if ( $ikBenEenMeisje || $ikHebEntreeBetaald ){
echo "Komt u binnen.<BR>";
} else {
echo "U mag niet naar binnen.<BR>";
}
// Stoplicht
$lichtOpRood = FALSE;
if ( !$lichtOpRood ) {
echo "Ok, doorrijden.<BR>";
} else {
echo "Helaas, stoppen.<BR>";
}
// Mag je al stemmen?
$leeftijd = 19;
if ( $leeftijd >= 18 ) {
echo "Ok, je mag stemmen.<BR>";
} else {
echo "Helaas, nog even wachten.<BR>";
}
// Is het juiste wachtwoord
$wachtwoord = 1234;
$poging = 1234;
if ( $poging == $wachtwoord
echo "Het inloggen is
} else {
echo "Het inloggen is
}
ingevuld?
) {
gelukt.<BR>";
niet gelukt.<BR>";
// Een iets ingewikkelder voorbeeldje.
// Voor een bepaald medisch onderzoek zoekt men proefpersonen.
// Deze moeten kort en dik of lang en dun zijn. En 18 of ouder.
$leeftijd = 21;
$lengte = 192; // In cm.
$gewicht = 75;
if (
( $leeftijd >= 18 )
&& (
( ( $lengte < 160 )
|| ( ( $lengte > 190 )
)
) {
echo "U bent geschikt voor
} else {
echo "U bent niet geschikt
}
&& ( $gewicht > 90 ) )
&& ( $gewicht < 70 ) )
dit onderzoek.<BR>";
voor dit onderzoek.<BR>";
?>
</body>
</html>
14. Lees paragraaf 4.2.
15. Draai het volgende programmaatje en bestudeer de werking van de for-lus. Vul daarna
het tweede deel in. Daar moet je de arraywaarden weer in een HTML-tabel zetten. Maar
nu moet je gebruik maken van een for-lus.
<html>
<body>
<?php
// Maak een array met 10 waarden. Let op, in de informatica
// telt men meestal vanaf 0.
$mijnArray = array( 0, 4, 6, 9, 2, 5, 3, 7, 8, 1 );
// Zet de waarden van het array onder elkaar:
for ( $i=0; $i<count( $mijnArray ); $i++ ){
$waarde = $mijnArray[ $i ];
// Let op de subtiele slash, waarvoor is die?
echo "\$mijnArray[$i] = $waarde;<BR>";
}
// Zet de waarden van het array in een HTML tabel:
echo "…";
?>
</body>
</html>
16. Lees paragraaf 4.3. Voer het voorbeeldprogramma wat daarbij staat uit. Pas het daarna
aan zodat het op elke stap van de while-lus het aantal dozen in de vrachtwagen en de
vrije ruimte afdrukt op een regel op het scherm.
Overigens bevat het voorbeeldprogramma een fout. Wat is er fout? (Hint: varieer met de
vrije ruimte in de vrachtwagen.)
4.4 Functies
17. Lees paragraaf 5 tot en met 5.1.
18. Draai het volgende programmaatje. Zoek de functies min en max op in de manual op
http://nl2.php.net/manual/en/index.php Waar zou je de beschrijving van die functies
kunnen vinden?
<html>
<body>
<?php
// Maak een array met 10 waarden.
$mijnArray = array( 0, 4, 6, 9, 2, 5, 3, 7, 8, 1 );
// De voorgedefinieerde functies min en max uitproberen:
echo "Het minimum van 3 en -1 is " . min( 3, -1 ) . "<BR>";
echo "De kleinste waarde in het array is " . min( $mijnArray ) .
"<BR>";
echo "Het maximum van 3 en -1 is " . max( 3, -1 ) . "<BR>";
echo "De grootste waarde in het array is " . max( $mijnArray ) .
"<BR>";
?>
</body>
</html>
19. Pas het vorige programmaatje aan zodat je de werking van twee andere
voorgedefinieerde wiskundige functies demonstreert. Kies zelf welke functies je
demonstreert.
20. Lees paragraaf 5.2.
21. Draai onderstaand programmaatje en experimenteer er wat mee.
<html>
<body>
<?php
// Een eigen gemaakte functie
function optellen( $getal1, $getal2 ){
return $getal1 + $getal2;
}
// Gebruik je eigen functie
echo "De som van 3 en -1 is " . optellen( 3, -1 ) . "<BR>";
?>
</body>
</html>
22. Bedenk zelf een voorbeeld van een eigengemaakte functie en maak die.
Hiermee zijn we aan het eind gekomen van onze introductie in HTML en PHP. Als het goed is
dan:
 kun je een eenvoudige HTML-pagina opzetten,
 begrijp je nu hoe een PHP scriptpagina wordt omgezet in een HTML-pagina, die aan de
gebruiker wordt gepresenteerd,
 kun je nu eenvoudige PHP scripts lezen en de flow-of-control begrijpen,
 kun je nu eenvoudige aanpassingen verrichten op PHP scripts, en
 kun je zaken die je niet begrijpt opzoeken in de manual.
Nogmaals, er komt veel meer bij kijken als je als PHP-programmeur zelfstandig interessante
dynamische websites wilt gaan maken. Maar het begin is er .