Databases via internet. Zo werken Statische HTML-pagina’s.

Post on 24-May-2015

230 views 0 download

Transcript of Databases via internet. Zo werken Statische HTML-pagina’s.

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 HTML-document naar de client. Zijn browser zorgt er vervolgens voor dat de HTML-code wordt omgezet in een leesbare pagina.

webserver machine HTML-pagina's

gebruikers machine

http-verzoek voor een pagina HTML pagina

web server

browser

internet

http-verzoek voor een pagina HTML pagina

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.

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scriptsscriptmachine(PHP parser)

HTML verzoek +

formulierinvoer

HTML

database (MySQL)

andere bestanden

http-verzoek voor script + eventuele formulierinvoer

Verwerking

HTML pagina

weergave

Hoe maakt een script HTML-code

We beginnen eenvoudig. We kijken eerst hoe we een script kunnen uitvoeren dat een eenvoudige HTML-pagina maakt (zonder gebruik van gegevens uit een database). Daarna bekijken we de inhoud van het script.

Het starten van een script gebeurt via een http-verzoek: 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.

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scriptsscriptmachine(PHP parser)

HTML verzoek

HTML

http-verzoek voor script

Verwerking

HTML pagina

weergave

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scriptsscriptmachine(PHP parser)

HTML verzoek

HTML

http-verzoek voor script

Verwerking

HTML pagina

weergave

<?php

print("<HTML> \n");print("<BODY> \n");print("Hai \n");print("</BODY> \n");print("</HTML> \n");

?>

<?php

print("<HTML>");print("<BODY>");print("Hai");print("</BODY>");print("</HTML>");

?>

script1.php

Een PHP-script

<HTML> <BODY> Hai </BODY> </HTML>

HTML:Een belangrijk commando van de scripttaal is de schrijf-opdracht. In de scripttaal PHP is dat het commando: print .Daarmee wordt de HTML-code opgebouwd

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

<HTML><BODY>

<?phpprint("Hai");?>

</BODY><HTML>

<HTML> <BODY> Hai </BODY> </HTML>

script2.php

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

<HTML><BODY>

<?php$woord = "Hai";print("$woord");?>

</BODY><HTML>

<HTML> <BODY> Hai </BODY> </HTML>

script3.php

HTML:

De herhalings-opdracht is natuurlijk ook een oude bekende. Hij heeft dezelfde schrijfwijze als in Java

<HTML><BODY>

<?php$woord = "Hai";for($x=0 ; $x<10 ; $x++){ print("$woord ");}?>

</BODY><HTML>

<HTML> <BODY> HaiHaiHaiHaiHaiHaiHaiHaiHaiHai </BODY> </HTML>

script4.php

HTML:Herhalingen

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.

<HTML><BODY><?phpprint("<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>

script5.php Maak een HTML-tabel

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.

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scriptsscriptmachine(PHP parser)

HTML verzoek

HTML

http-verzoek voor pagina met formulier

HTML pagina

weergave

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scriptsscriptmachine(PHP parser)

HTML verzoek

HTML

http-verzoek voor pagina met formulier

HTML pagina

weergave

<HTML><BODY>

<FORM ACTION=”script6.php" METHOD="post"><INPUT TYPE="text" NAME=”woord" VALUE=""><input TYPE =submit VALUE ="Voer in"></ FORM >

</BODY><HTML>

<HTML><BODY>

<FORM ACTION=”script6.php" METHOD="post"><INPUT TYPE="text" NAME=”woord" VALUE=""><input TYPE =submit VALUE ="Voer in"></ FORM >

</BODY><HTML>

pagina1.htm

Pagina met formulierHier 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”

Formulier verzenden

ACTION=”script6.php"

NAME=”woord"

http-verzoek:

http://localhost/script6.phpformuliergegevens:

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:

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scriptsscriptmachine(PHP parser)

HTML verzoek

HTML

http-verzoek voor script + formuliergegevens

Verwerking

HTML pagina

weergave

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scriptsscriptmachine(PHP parser)

HTML verzoek

HTML

http-verzoek voor script

Verwerking

HTML pagina

weergave

<HTML><BODY><?phpprint("<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>

<HTML><BODY><?phpprint("<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>

script5.php Het formuliergegeven: “woord=Piet” zorgt ervoor dat er in het script een variabele $woord wordt gemaakt die als waarde “Piet” krijgt.

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.

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script

HTML pagina

web server (Apache)

browser

internet

(PHP)scripts

scriptmachine(PHP parser)

HTML verzoek +

formulierinvoer

HTML

database (MySQL)

http-verzoek voor script

Verwerking

HTML pagina

weergave

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulierinvoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scripts

scriptmachine(PHP parser)

HTML verzoek +

formulierinvoer

HTML

database (MySQL)

http-verzoek voor script + formulierinvoer

Verwerking

HTML pagina

weergave

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

script7.php

Er wordt een verbindinggemaakt met het database-programma

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

script7.php

Er wordt een database met de naam: “ledendatabase” geselecteerd

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

script7.php

Er wordt een query gemaakt die de hele tabel “leden” selecteert.

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

script7.php

De query wordt uitgevoerd en het resultaat wordt opgeslagen in de variabele $result

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

script7.php

Het aantal records en het aantal velden van het resultaat wordt opgevraagd

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

script7.php

De records worden opgevraagd en weergegeven in een HTML-tabel

<HTML><BODY BGCOLOR="#FFDDBB"><CENTER><?phpmysql_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>

script7.php

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:

<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>

pagina2.htm

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”

http-verzoek:

http://localhost/script8.php

formuliergegevens:

voornaam=Pietjeachternaam=Puk

<HTML><BODY>

<?phpmysql_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

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.

<HTML><BODY>

<?phpmysql_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.phpEr wordt een verbindinggemaakt met het database-programma

<HTML><BODY>

<?phpmysql_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.phpEr wordt een database met de naam: “ledendatabase” geselecteerd

<HTML><BODY>

<?phpmysql_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 Er wordt een query gemaakt die de nieuwe gegevens invoert

<HTML><BODY>

<?phpmysql_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.phpDe query wordt uitgevoerd.

Tenslotte kijken we nog een keer naar het schema waarin de weg: verzoek - verwerking - weergave wordt doorlopen.

webserver machine

HTML-pagina's

gebruikers machine

http-verzoek voor script + formulier invoer

HTML pagina

web server (Apache)

browser

internet

(PHP)scripts

scriptmachine(PHP parser)

HTML verzoek +

formulierinvoer

HTML

database (MySQL)

http-verzoek voor script + formulier invoer

Verwerking

HTML pagina

weergave