HTML - Helen Parkhurst
advertisement
Databases via internet
Zo werken
Statische
HTML-pagina’s
Een webserver kun je zien als een programma die
een verzameling HTML-documenten, zogenaamde
webpagina's beheert. Dit programma staat op een
computer die verbonden is met het internet (de
webserver machine). Iemand die zo'n pagina wil
bekijken (de client), kan met zijn browser via het
internet contact leggen met de server en een verzoek
sturen voor het bekijken van die pagina. De
webserver stuurt dan een kopie van het HTMLdocument naar de client. Zijn browser zorgt er
vervolgens voor dat de HTML-code wordt omgezet in
een leesbare pagina.
webserver
machine
HTML-pagina's
web
server
internet
http-verzoek
http-verzoek
voor
vooreen
eenpagina
pagina
HTML pagina
gebruikers
machine
browser
weergave
De inhoud van een
database bekijken via
een website
Wanneer je via een website gegevens uit een
database wilt bekijken, of daarin opslaan, dan is er
meer nodig. Er moet een klein programma, een
zogenaamd script worden uitgevoerd. Dit script
maakt contact met de database en zorgt voor het
ophalen (of opslaan) van de gegevens. Bovendien
moet het script deze gegevens omzetten in HTML,
omdat ze alleen in deze vorm kunnen worden
weergegeven in de browser.
andere bestanden
scriptmachine
(PHP
parser)
Verwerking
database
(MySQL)
verzoek +
formulierinvoer
HTML
HTML-pagina's
web server
(Apache)
webserver
machine
(PHP)scripts
HTML
internet
http-verzoek voor
http-verzoek voor
script + eventuele
script +
formulierinvoer
formulierinvoer
HTML
HTML
pagina
pagina
browser
weergave
gebruikers
machine
Hoe maakt een script
HTML-code
We beginnen eenvoudig. We kijken eerst hoe we een
script kunnen uitvoeren dat een eenvoudige HTMLpagina maakt (zonder gebruik van gegevens uit een
database).
Daarna bekijken we de inhoud van het script.
Het starten van een script gebeurt via een httpverzoek: in de browser wordt de URL (het internet
adres) van het script in de adresbalk ingetypt. De
webserver stuurt het verzoek door naar de
scriptmachine die het script ophaalt en verwerkt. De
uitvoer van deze verwerking is een HTML-pagina die
naar de client wordt teruggestuurd en wordt
weergegeven in de browser.
scriptmachine
(PHP
parser)
Verwerking
verzoek
HTML
HTML-pagina's
web server
(Apache)
webserver
machine
(PHP)scripts
HTML
internet
http-verzoek voor
voor
http-verzoek
script +
script
formulierinvoer
HTML
HTML
pagina
pagina
browser
weergave
gebruikers
machine
scriptmachine
(PHP parser)
(PHP)scripts
Verwerking
<?php
verzoek
webserver
machine
HTML
HTML-pagina's
print("<HTML>
\n");
web server
(Apache)
print("<BODY>
\n");
print("HaiHTML
\n");
print("</BODY> \n");
print("</HTML> internet
\n");
?>
http-verzoek voor
voor
http-verzoek
script +
script
formulierinvoer
HTML
HTML
pagina
pagina
browser
weergave
gebruikers
machine
Een PHP-script
script1.php
<?php
print("<HTML>");
print("<BODY>");
print("Hai");
print("</BODY>");
print("</HTML>");
?>
Een belangrijk commando
van de scripttaal is de
HTML:
schrijf-opdracht. In de
scripttaal<HTML>
PHP is dat het
<BODY>
commando:
print .
Hai
Daarmee
wordt de HTML</BODY>
code opgebouwd
</HTML>
Een script kan ook in HTML-code worden ingevoegd
(zoals bijvoorbeeld JavaScipt).
De HTML-code buiten het script veranderd niet. Op
de plaats van het script komt de HTML-code te staan
die door het scipt wordt gemaakt.
Kan ook binnen HTML
script2.php
<HTML>
<BODY>
<?php
print("Hai");
?>
</BODY>
<HTML>
HTML:
<HTML>
<BODY>
Hai
</BODY>
</HTML>
Enkele mogelijkheden
en voorbeelden
met PHP
Veel mogelijkheden die programmeertalen bieden,
bestaan ook in een scripttaal (hier: PHP) , zoals
bijvoorbeeld het werken met variabelen.
In PHP geef je een variabele aan met een woord dat
begint met een $-teken, bijvoorbeeld: $x, of $naam.
PHP is veel minder streng bij het gebruik van
variabelen dan een taal als Java. Variabelen hoeven
bijvoorbeeld niet eerst gedeclareerd te worden.
Werken met variabelen
script3.php
<HTML>
<BODY>
<?php
$woord = "Hai";
print("$woord");
?>
</BODY>
<HTML>
HTML:
<HTML>
<BODY>
Hai
</BODY>
</HTML>
De herhalings-opdracht is natuurlijk ook een oude
bekende. Hij heeft dezelfde schrijfwijze als in Java
Herhalingen
script4.php
<HTML>
<BODY>
<?php
$woord = "Hai";
for($x=0 ; $x<10 ; $x++)
{ print("$woord ");
}
?>
</BODY>
<HTML>
HTML:
<HTML>
<BODY>
Hai
Hai
Hai
Hai
Hai
Hai
Hai
Hai
Hai
Hai
</BODY>
</HTML>
Wanneer je scripts gebruikt om gegevens uit een
database op te halen, dan zul je dit vaak willen
weergeven in een tabel.
Het volgende script maakt een HTML-tabel.
Het maakt gebruik van de herhalingsopdracht.
script5.php
Maak een HTML-tabel
<HTML>
<BODY>
<?php
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<10 ; $x++)
{ print("<TR> \n");
for($y=0 ; $y<10 ; $y++)
{ print("<TD>hai</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</BODY>
<HTML>
Formulier gegevens
doorgeven en verwerken
met behulp van
(PHP)scripts
We willen niet alleen gegevens zichtbaar kunnen
maken op een website, maar ook gegevens kunnen
opsturen
Voor het opsturen van gegevens maken we gebruik
van HTML-formulieren. De gegevens van zo’n
formulier worden altijd verwerkt door een script op de
server.
In het volgende voorbeeld voorbeeld sturen we door
middel van een formulier een naam op. Deze naam
wordt door een scipt gebruikt om een pagina te
maken waarin die naam 100 keer in een tabel wordt
weergegeven.
Dit willen we maken:
Eerst een pagina met een
formulier:
Als eerste moeten we een HTML-pagina maken met
een formulier erop. Deze pagina kan gewoon als
statische pagina (zonder script) worden opgehaald.
scriptmachine
(PHP parser)
verzoek
HTML
HTML-pagina's
web server
(Apache)
webserver
machine
(PHP)scripts
HTML
internet
http-verzoek
http-verzoek voor
voor
pagina
met
script +
formulier
formulierinvoer
HTML
HTML
pagina
pagina
browser
weergave
gebruikers
machine
scriptmachine
(PHP parser)
verzoek
<HTML>
<BODY>
HTML
HTML-pagina's
web server
(Apache)
webserver
machine
(PHP)scripts
HTML
<FORM ACTION=”script6.php" METHOD="post">
internet
<INPUT TYPE="text" NAME=”woord" VALUE="">
http-verzoek
http-verzoek voor
voor
<input TYPE =submit
VALUE ="Voer
in">
HTML
HTML
pagina
met
script +
pagina
pagina
formulier
formulierinvoer
</ FORM >
</BODY>
<HTML>
browser
weergave
gebruikers
machine
Pagina met formulier
Hier zie je de HTML-code. Het formulier wordt gedefinieerd tussen
<FORM ...> en </FORM> De ingevulde gegevens worden onder de
naam “woord” opgestuurd naar het script:”script6.php”
pagina1.htm
<HTML>
<BODY>
<FORM ACTION=”script6.php" METHOD="post">
<INPUT TYPE="text" NAME=”woord" VALUE="">
<input TYPE =submit VALUE ="Voer in">
</ FORM >
</BODY>
<HTML>
Formulier verzenden
(
)
ACTION=”script6.php"
NAME=”woord"
http-verzoek:
http://localhost/script6.php
formuliergegevens:
woord=Piet
Nu naar het script voor
de verwerking:
Bij het drukken op de knop bij het formulier wordt er
een http-verzoek voor “script6.php” verstuurd naar
de server. Bovendien wordt de informatie uit het
formulier: “woord=Piet” meegestuurd:
scriptmachine
(PHP
parser)
Verwerking
verzoek
HTML
HTML-pagina's
web server
(Apache)
webserver
machine
(PHP)scripts
HTML
internet
http-verzoek voor
script +
formulierinvoer
formuliergegevens
HTML
HTML
pagina
pagina
browser
weergave
gebruikers
machine
scriptmachine
(PHP)scripts
<HTML>
(PHP parser)
Verwerking
<BODY>
verzoek
HTML
<?php
HTML-pagina's
print("<TABLE BORDER=1
\n");
web CELLPADDING=5>
server
(Apache)
for($x=0 ; $x<10 ; $x++)
webserver
{ print("<TR>
\n");
HTML
machine
for($y=0 ; $y<10 ; $y++)
{ print("<TD>$woord</TD> \n");
internet
}
http-verzoek
voor
print("</TR>
\n");
http-verzoek
voor
HTML
HTML
script
+
script
pagina
pagina
}
formulierinvoer
print("</TABLE> \n");
?>
browser
</BODY>
weergave
gebruikers
<HTML>
machine
script5.php
Het formuliergegeven: “woord=Piet”
zorgt ervoor dat er in het script een
variabele $woord wordt gemaakt die
als waarde “Piet” krijgt.
<HTML>
<BODY>
<?php
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<10 ; $x++)
{ print("<TR> \n");
for($y=0 ; $y<10 ; $y++)
{ print("<TD>$woord</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</BODY>
<HTML>
Het resultaat:
Gegevens uit een
database halen met
PHP
Nu gaan we met behulp van een script gegevens uit
een (MySQL) database halen. Er moet dan een
databaseprogramma op de servermachine zijn
geinstalleerd. We gaan er ook vanuit dat er database
genaamd: “ledendatabase” aanwezig is.
We kijken eerst nog even naar het schema waarin de
weg: verzoek - verwerking - weergave wordt
doorlopen.
Daarna kijken we in het script welke opdrachten
nodig zijn.
(PHP)scripts
scriptmachine
(PHP
parser)
Verwerking
database
(MySQL)
verzoek +
formulierinvoer
HTML
HTML-pagina's
web server
(Apache)
webserver
machine
HTML
internet
http-verzoek
http-verzoek
voor
voor
script
script
HTML
HTML
pagina
pagina
browser
weergave
gebruikers
machine
(PHP)scripts
<HTML>
scriptmachine
<BODY BGCOLOR="#FFDDBB">
database
(PHP
parser)
(MySQL)
Verwerking
<CENTER>
<?php
verzoek +
mysql_connect('localhost','root');
HTML-pagina's
HTML
formulierinvoer
mysql_select_db(’ledendatabase');
$query = "SELECT * FROM leden";web server
$result = mysql_query($query); (Apache)
$aantalrijen = mysql_num_rows($result);
webserver= mysql_num_fields($result);
$aantalvelden
HTML
machine
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
internet
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
http-verzoek voor
http-verzoek voor
{ print("<TD bgcolor=white>
$array[$y]</TD>
\n");
HTML
HTML
script +
script
+
}
pagina
pagina
formulierinvoer
formulierinvoer
print("</TR> \n");
}
print("</TABLE> \n");
?>
browser
</CENTER>
weergave
</BODY>
gebruikers
<HTML>
machine
script7.php
<HTML>
<BODY BGCOLOR="#FFDDBB">
<CENTER>
Er wordt een
<?php
verbinding
mysql_connect('localhost','root');
gemaakt met
mysql_select_db(’ledendatabase');
database$query = "SELECT * FROM leden";
$result = mysql_query($query);
programma
$aantalrijen = mysql_num_rows($result);
$aantalvelden = mysql_num_fields($result);
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
{ print("<TD bgcolor=white> $array[$y]</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</CENTER>
</BODY>
<HTML>
het
script7.php
<HTML>
<BODY BGCOLOR="#FFDDBB">
Er wordt een
<CENTER>
<?php
database met de
mysql_connect('localhost','root');
naam:
mysql_select_db(’ledendatabase');
“ledendatabase”
$query = "SELECT * FROM leden";
geselecteerd
$result = mysql_query($query);
$aantalrijen = mysql_num_rows($result);
$aantalvelden = mysql_num_fields($result);
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
{ print("<TD bgcolor=white> $array[$y]</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</CENTER>
</BODY>
<HTML>
script7.php
<HTML>
<BODY BGCOLOR="#FFDDBB">
Er wordt een query
<CENTER>
<?php
gemaakt die de hele
mysql_connect('localhost','root');
tabel “leden”
mysql_select_db(’ledendatabase');
selecteert.
$query = "SELECT * FROM leden";
$result = mysql_query($query);
$aantalrijen = mysql_num_rows($result);
$aantalvelden = mysql_num_fields($result);
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
{ print("<TD bgcolor=white> $array[$y]</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</CENTER>
</BODY>
<HTML>
script7.php
<HTML>
<BODY BGCOLOR="#FFDDBB">
De query wordt
<CENTER>
<?php
uitgevoerd en het
mysql_connect('localhost','root');
resultaat wordt
mysql_select_db(’ledendatabase');
opgeslagen in de
$query = "SELECT * FROM leden";
variabele $result
$result = mysql_query($query);
$aantalrijen = mysql_num_rows($result);
$aantalvelden = mysql_num_fields($result);
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
{ print("<TD bgcolor=white> $array[$y]</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</CENTER>
</BODY>
<HTML>
script7.php
<HTML>
<BODY BGCOLOR="#FFDDBB">
Het aantal records
<CENTER>
<?php
en het aantal velden
mysql_connect('localhost','root');
van het resultaat
mysql_select_db(’ledendatabase');
wordt opgevraagd
$query = "SELECT * FROM leden";
$result = mysql_query($query);
$aantalrijen = mysql_num_rows($result);
$aantalvelden = mysql_num_fields($result);
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
{ print("<TD bgcolor=white> $array[$y]</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</CENTER>
</BODY>
<HTML>
script7.php
<HTML>
<BODY BGCOLOR="#FFDDBB">
De records worden
<CENTER>
<?php
opgevraagd en
mysql_connect('localhost','root');
weergegeven in een
mysql_select_db(’ledendatabase');
HTML-tabel
$query = "SELECT * FROM leden";
$result = mysql_query($query);
$aantalrijen = mysql_num_rows($result);
$aantalvelden = mysql_num_fields($result);
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
{ print("<TD bgcolor=white> $array[$y]</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</CENTER>
</BODY>
<HTML>
script7.php
<HTML>
<BODY BGCOLOR="#FFDDBB">
<CENTER>
<?php
mysql_connect('localhost','root');
mysql_select_db(’ledendatabase');
$query = "SELECT * FROM leden";
$result = mysql_query($query);
$aantalrijen = mysql_num_rows($result);
$aantalvelden = mysql_num_fields($result);
print("<TABLE BORDER=1 CELLPADDING=5> \n");
for($x=0 ; $x<$aantalrijen ; $x++)
{ print("<TR> \n");
$array = mysql_fetch_array($result);
for($y=0 ; $y<$aantalvelden ; $y++)
{ print("<TD bgcolor=white> $array[$y]</TD> \n");
}
print("</TR> \n");
}
print("</TABLE> \n");
?>
</CENTER>
</BODY>
<HTML>
Gegevens opslaan in
een database met
PHP
We willen niet alleen gegevens kunnen opvragen uit
een database, maar ook gegevens kunnen opsturen
en toevoegen.
Voor het opsturen van gegevens maken we weer
gebruik van HTML-formulieren waarvan de gegevens
worden verwerkt door een script.
We bekijken een voorbeeld waarin we een persoon
(voornaam en achternaam) willen toevoegen aan de
ledendatabase in de tabel leden.
Eerst een pagina met een
formulier:
Pagina met formulier
Hier is de HTML-code van het formulier dat we gebruiken. De
ingevulde gegevens worden onder de namen “voornaam” en
“achternaam” opgestuurd naar het script:”script8.php”
pagina2.htm
<HTML>
<BODY>
<FORM ACTION=”script8.php" METHOD="post">
<INPUT TYPE="text" NAME=”voornaam" VALUE="">
<INPUT TYPE="text" NAME=”achternaam" VALUE="">
<input TYPE =submit VALUE ="Voer in">
</ FORM >
</BODY>
<HTML>
http-verzoek:
http://localhost/script8.php
formuliergegevens:
voornaam=Pietje
achternaam=Puk
script8.php
<HTML>
<BODY>
De formuliergegevens: “achternaam=Puk”
en “voornaam=Pietje” zorgen ervoor dat
er in het script de variabelen $voornaam
en $achternaam worden gemaakt en de
juiste waarden krijgen.
<?php
mysql_connect('localhost','root');
mysql_select_db('ledendatabase');
$query = "INSERT INTO leden(id,voornaam,achternaam)
VALUES('null','$voornaam','$achternaam')";
$result = mysql_query($query);
?>
De gegevens zijn toegevoegd aan de database.
</BODY>
</HTML>
}
script8.php
<HTML>
<BODY>
Er wordt een
verbinding
gemaakt met het
databaseprogramma
<?php
mysql_connect('localhost','root');
mysql_select_db('ledendatabase');
$query = "INSERT INTO leden(id,voornaam,achternaam)
VALUES('null','$voornaam','$achternaam')";
$result = mysql_query($query);
?>
De gegevens zijn toegevoegd aan de database.
</BODY>
</HTML>
}
script8.php
<HTML>
<BODY>
Er wordt een
database met de
naam:
“ledendatabase”
geselecteerd
<?php
mysql_connect('localhost','root');
mysql_select_db('ledendatabase');
$query = "INSERT INTO leden(id,voornaam,achternaam)
VALUES('null','$voornaam','$achternaam')";
$result = mysql_query($query);
?>
De gegevens zijn toegevoegd aan de database.
</BODY>
</HTML>
}
script8.php
<HTML>
<BODY>
Er wordt een query
gemaakt die de
nieuwe gegevens
invoert
<?php
mysql_connect('localhost','root');
mysql_select_db('ledendatabase');
$query = "INSERT INTO leden(id,voornaam,achternaam)
VALUES('null','$voornaam','$achternaam')";
$result = mysql_query($query);
?>
De gegevens zijn toegevoegd aan de database.
</BODY>
</HTML>
}
script8.php
<HTML>
<BODY>
De query wordt
uitgevoerd.
<?php
mysql_connect('localhost','root');
mysql_select_db('ledendatabase');
$query = "INSERT INTO leden(id,voornaam,achternaam)
VALUES('null','$voornaam','$achternaam')";
$result = mysql_query($query);
?>
De gegevens zijn toegevoegd aan de database.
</BODY>
</HTML>
}
Tenslotte kijken we nog een keer naar het schema
waarin de weg: verzoek - verwerking - weergave
wordt doorlopen.
(PHP)scripts
scriptmachine
(PHP
parser)
Verwerking
database
(MySQL)
verzoek +
formulierinvoer
HTML
HTML-pagina's
web server
(Apache)
webserver
machine
HTML
internet
http-verzoek
http-verzoek
voor
script +
voor
script
+
formulier
invoer
formulier invoer
HTML
HTML
pagina
pagina
browser
weergave
gebruikers
machine
