2. De basisprincipes van webprogrammering
Dit hoofdstuk is voornamelijk bedoeld om de belangrijkste principes van webprogrammering te introduceren, die losstaan van de specifieke technologie die wordt gebruikt om ze te implementeren. Het bevat talrijke voorbeelden die u best zelf uitprobeert om de filosofie achter webontwikkeling geleidelijk onder de knie te krijgen. Lezers die deze kennis al bezitten, kunnen direct doorgaan naar het volgende hoofdstuk.
De onderdelen van een webapplicatie zijn de volgende:
Nummer | Functie | Veelvoorkomende voorbeelden |
1 | OS Server | Unix, Linux, Windows |
2 | Webserver | Apache (Unix, Linux, Windows) IIS (Windows + .NET-platform) Node.js (Unix, Linux, Windows) |
3 | Codes die aan de serverzijde worden uitgevoerd. Dit kan gebeuren via servermodules of via programma's buiten de server (CGI). | JAVASCRIPT (Node.js) PHP (Apache, IIS) JAVA (Tomcat, Websphere, JBoss, Weblogic, ...) C#, VB.NET (IIS) |
4 | Database – Deze kan zich op dezelfde machine bevinden als het programma dat er gebruik van maakt, of op een andere machine via internet. | Oracle (Linux, Windows) MySQL (Linux, Windows) Postgres (Linux, Windows) SQL Server (Windows) |
5 | OS Client | Unix, Linux, Windows |
6 | Webbrowser | Chrome, Internet Explorer, Firefox, Opera, Safari, ... |
7 | Scripts die aan de clientzijde in de browser worden uitgevoerd. Deze scripts hebben geen toegang tot de schijven van de clientcomputer. | JavaScript (alle browsers) |
2.1. Gegevensuitwisseling in een webapplicatie met een formulier
Nummer | Rol |
1 | De browser vraagt voor de eerste keer een URL aan voor (http://machine/url). Er worden geen parameters doorgegeven. |
2 | De webserver stuurt de webpagina van deze URL naar de browser. Deze kan statisch zijn of dynamisch gegenereerd worden door een serverscript (SA) dat mogelijk gebruik heeft gemaakt van de inhoud van databases (SB, SC). In dit geval detecteert het script dat URL is opgevraagd zonder dat er parameters zijn doorgegeven en genereert het de startpagina. De browser ontvangt de pagina en geeft deze weer (CA). Scripts aan de kant van de browser (CB) hebben de door de server verzonden oorspronkelijke pagina mogelijk gewijzigd. Vervolgens wordt de webpagina gewijzigd door interacties tussen de gebruiker (CD) en de scripts (CB). Met name worden de formulieren ingevuld. |
3 | De gebruiker bevestigt de gegevens in het formulier, die vervolgens naar de webserver moeten worden verzonden. De browser vraagt de oorspronkelijke URL-pagina of, afhankelijk van de situatie, een andere pagina opnieuw op en stuurt tegelijkertijd de formulierwaarden naar de server. Hiervoor kan hij gebruikmaken van twee methoden, namelijk GET en POST. Bij ontvangst van het verzoek van de client activeert de server het script (SA) dat gekoppeld is aan de aangevraagde URL; dit script detecteert de parameters en verwerkt deze. |
4 | De server levert de programmatisch gegenereerde webpagina af (SA, SB, SC). Deze stap is identiek aan de vorige stap 2. De uitwisselingen verlopen nu volgens stap 2 en 3. |
2.2. Statische webpagina’s, dynamische webpagina’s
Een statische pagina wordt weergegeven door een bestand HTML. Een dynamische pagina is een HTML-pagina die „on-the-fly“ door de webserver wordt gegenereerd.
2.2.1. Statische pagina HTML (HyperText Markup Language)
Laten we een eerste webproject opzetten met Visual Studio Express 2012. We gebruiken de optie [Fichier / Nouveau projet]:
 |
- in [1] geven we aan dat we een lege ASP.NET-toepassing willen bouwen;
- in [2] de naam van de Visual Studio-oplossing; alle voorbeelden in dit document zullen in dezelfde oplossing staan;
- in [3], de bovenliggende map van het project dat zal worden aangemaakt;
- in [4], de naam van het project.
Bevestig.
 |
Het resulterende project wordt weergegeven in [5]. We gaan dit gebruiken om de belangrijkste principes van webprogrammering te illustreren.
Laten we beginnen met het aanmaken van een statische pagina HTML:
 |
- in [1], klik met de rechtermuisknop op het project en volg de opties;
 |
- in [2], geef de pagina een naam;
- naar [3], de pagina is toegevoegd.
De inhoud van de aangemaakte pagina is als volgt:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
</body>
</html>
- regels 2-10: de code wordt begrensd door de root-tag <html>;
- regels 3-6: de tag <head> omvat wat de koptekst van de pagina wordt genoemd;
- regels 7-9: de tag <body> omvat wat de hoofdtekst van de pagina wordt genoemd.
Laten we deze code als volgt aanpassen:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>essai 1 : une page statique</title>
</head>
<body>
<h1>Une page statique...</h1>
</body>
</html>
- regel 5: definieert de titel van de pagina – wordt weergegeven als titel van het browservenster waarin de pagina wordt weergegeven;
- regel 8: tekst in grote letters (<h1>).
Laten we deze pagina in een browser bekijken:
 |
- in [1] wordt gevraagd om de pagina weer te geven;
- in [2], de URL van de weergegeven pagina;
- in [3] is de titel van het venster – deze is geleverd door de tag <title> van de pagina;
- in [4], de hoofdtekst van de pagina – afkomstig van de tag <h1>.
Laten we eens kijken naar [1], de code die de browser heeft ontvangen:
 |
- in [2] heeft de browser de pagina HTML ontvangen die we hadden opgebouwd. Hij heeft deze geïnterpreteerd en er een grafische weergave van gemaakt.
2.2.2. Een pagina ASP.NET
Laten we nu een pagina ASP.NET maken. Dit is een pagina HTML die server-side code kan bevatten en die bepaalde delen van de pagina genereert. We volgen een vergelijkbare aanpak als bij het maken van de pagina HTML:
 |
- in [1] wordt een pagina ASP.NET aangeroepen vanuit een [Web Form];
 |
- in [2], krijgt de nieuwe pagina een naam;
- in [3] is de pagina aangemaakt.
De code van de aangemaakte pagina is als volgt:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
We zien hier tags HTML die we al eerder zijn tegengekomen. De tags met het attribuut [runat= "server "] zijn tags die door de server worden verwerkt en omgezet in zuivere HTML-tags. Wat we hierboven zien, is dus niet – zoals bij de vorige statische pagina – de HTML-code die de browser zal ontvangen. We spreken dan van een dynamische pagina: de HTML-stream die naar de server wordt verzonden, wordt gegenereerd door code die aan de serverzijde wordt uitgevoerd. Laten we de pagina als volgt aanpassen:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Démo asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
</div>
</form>
</body>
</html>
- regel 8: we geven de pagina een titel;
- regel 13: we geven tekst weer die door C#-code wordt gegenereerd. Deze code staat tussen de tags <% %>. Deze C#-code geeft de huidige tijd weer in de vorm uren:minuten:seconden.
Laten we deze pagina in een browser weergeven:
 |
- in [1] vragen we om de pagina weer te geven;
- in [2] is de URL van de weergegeven pagina;
- in [3] is de titel van het venster – afkomstig van de tag <title> van de pagina;
- in [4], de hoofdtekst van de pagina – afkomstig van de tag <h1>.
Als we de pagina verversen (F5), krijgen we een andere weergave (nieuwe tijd), terwijl de URL niet verandert. Dit is het dynamische aspect van de pagina: de inhoud kan in de loop van de tijd veranderen. Laten we nu eens kijken naar de code HTML die door de browser is ontvangen:
 |
- in [1] bekijken we de broncode van de pagina;
- in [2]: deze keer is de ontvangen code HTML niet degene die we zelf hebben samengesteld, maar degene die door de webserver is gegenereerd op basis van de informatie van onze pagina ASP.NET.
2.2.3. Conclusie
Uit het bovenstaande blijkt dat dynamische en statische pagina's fundamenteel van elkaar verschillen.
2.3. Scripts aan de kant van de browser
Een pagina HTML kan scripts bevatten die door de browser worden uitgevoerd. De belangrijkste scripttaal aan de browserzijde is momenteel (september 2013) JavaScript. Er zijn honderden bibliotheken in deze taal ontwikkeld om het leven van de ontwikkelaar te vergemakkelijken.
Laten we een nieuwe pagina HTML [1] maken in het reeds aangemaakte project:
 |
Laten we het bestand [HtmlPage2.html] bewerken met de volgende inhoud:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>exemple Javascript</title>
<script type="text/javascript">
function réagir() {
alert("Vous avez cliqué sur le bouton !");
}
</script>
</head>
<body>
<input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>
- regel 13: definieert een knop (attribuut type) met de tekst "Klik hier" (attribuut value). Wanneer je erop klikt, wordt de JavaScript-functie [réagir] uitgevoerd (attribuut onclick);
- regels 6-10: een JavaScript-script;
- regels 7-9: de functie [réagir];
- regel 8: geeft een dialoogvenster weer met de melding [Vous avez cliqué sur le bouton].
Laten we de pagina in een browser bekijken:
 |
- in [1], de weergegeven pagina;
- in [2], het dialoogvenster dat verschijnt wanneer je op de knop klikt.
Wanneer je op de knop klikt, vindt er geen communicatie met de server plaats. De JavaScript-code wordt door de browser uitgevoerd.
Met de vele beschikbare JavaScript-bibliotheken is het nu mogelijk om volwaardige applicaties in de browser te integreren. Men neigt dan naar de volgende architecturen:
 |
- 1-4: de server HTML is een server voor statische pagina’s HTML5 / CSS / JavaScript;
- 5-6: de geleverde pagina’s HTML5 / CSS / JavaScript communiceren rechtstreeks met een gegevensserver. Deze levert uitsluitend gegevens zonder opmaak HTML. Het is het JavaScript dat deze gegevens invoegt in HTML-pagina's die al in de browser aanwezig zijn.
In deze architectuur kan de JavaScript-code omvangrijk worden. Daarom wordt ernaar gestreefd deze in lagen te structureren, net zoals bij server-side code:
 |
- de laag [UI] is de laag die met de gebruiker communiceert;
- de laag [DAO] communiceert met de gegevensserver;
- de laag [métier] bevat de bedrijfsprocedures die noch met de gebruiker, noch met de gegevensserver communiceren. Deze laag hoeft niet te bestaan.
2.4. De communicatie tussen client en server
Laten we terugkeren naar ons oorspronkelijke schema waarin de actoren van een webapplicatie werden geïllustreerd:
We richten ons hier op de communicatie tussen de clientcomputer en de servercomputer. Deze communicatie vindt plaats via een netwerk en het is goed om de algemene structuur van de communicatie tussen twee computers op afstand nog eens in herinnering te brengen.
2.4.1. Het OSI-model
Het open netwerkmodel, OSI (Open Systems Interconnection Reference Model) genaamd, gedefinieerd door de ISO (International Standards Organisation), beschrijft een ideaal netwerk waarin de communicatie tussen computers kan worden weergegeven door een model met zeven lagen:
 |
Elke laag ontvangt diensten van de onderliggende laag en biedt haar eigen diensten aan de bovenliggende laag aan. Stel dat twee applicaties op verschillende machines A en B met elkaar willen communiceren: dat doen ze op het niveau van de Application-laag. Ze hoeven niet alle details van de werking van het netwerk te kennen: elke toepassing geeft de informatie die ze wil verzenden door aan de onderliggende laag: de laag Présentation. De toepassing hoeft dus alleen de regels voor de koppeling met de laag Présentation te kennen. Zodra de informatie zich in de laag Présentation bevindt, wordt deze volgens andere regels doorgegeven aan de laag Session en zo verder, totdat de informatie op het fysieke medium terechtkomt en fysiek naar de bestemmingsmachine wordt verzonden. Daar ondergaat de informatie het omgekeerde proces van wat er op de verzendende machine is gebeurd.
Op elke laag stuurt het verzendproces, dat verantwoordelijk is voor het verzenden van de informatie, deze naar een ontvangstproces op de andere machine die tot dezelfde laag behoort. Dit gebeurt volgens bepaalde regels die het protocol van de laag worden genoemd. We krijgen dus het volgende uiteindelijke communicatieschema:
 |
De rol van de verschillende lagen is als volgt:
Fysieke laag | Zorgt voor de overdracht van bits via een fysiek medium. In deze laag bevinden zich eindapparatuur voor gegevensverwerking (E.T.T.D.), zoals terminals of computers, evenals apparatuur voor het afsluiten van datacircuits (E.T.C.D.), zoals modulators/demodulators, multiplexers en concentrators. De aandachtspunten op dit niveau zijn:
|
Dataverbinding | Verbergt de fysieke kenmerken van de fysieke laag. Detecteert en corrigeert transmissiefouten. |
Netwerk | Regelt de route die de via het netwerk verzonden informatie moet volgen. Dit wordt de routage genoemd: het bepalen van de route die een stukje informatie moet volgen om bij de ontvanger aan te komen. |
Transport | Maakt communicatie tussen twee applicaties mogelijk, terwijl de voorgaande lagen alleen communicatie tussen machines toelieten. Een dienst die door deze laag wordt geleverd, kan multiplexing zijn: de transportlaag kan één en dezelfde netwerkverbinding (van machine naar machine) gebruiken om informatie van meerdere applicaties door te geven. |
Sessie | In deze laag vinden we diensten waarmee een applicatie een werksessie op een externe machine kan openen en in stand houden. |
Presentatie | Deze laag heeft tot doel de weergave van gegevens op de verschillende machines te uniformiseren. Zo worden gegevens afkomstig van machine A door de Présentation-laag van machine A in een standaardformaat 'verpakt' voordat ze over het netwerk worden verzonden. Zodra de gegevens de laag Présentation van de ontvangende machine B bereiken – die ze dankzij hun standaardformaat herkent – worden ze op een andere manier verpakt, zodat de applicatie op machine B ze kan herkennen. |
Toepassing | Op dit niveau bevinden zich de toepassingen die doorgaans dicht bij de gebruiker staan, zoals e-mail of bestandsoverdracht. |
2.4.2. Het model TCP/IP
Het model OSI is een ideaal model. De reeks protocollen TCP/IP komt hier dicht bij in de volgende vorm:
 |
- de netwerkinterface (de netwerkkaart van de computer) vervult de functies van de lagen 1 en 2 van het model OSI
- de laag IP (Internet Protocol) vervult de functies van laag 3 (netwerk)
- de laag TCP (Transfer Control Protocol) of UDP (User Datagram Protocol) vervult de functies van laag 4 (transport). Het protocol TCP zorgt ervoor dat de gegevenspakketten die door de computers worden uitgewisseld, daadwerkelijk op de plaats van bestemming aankomen. Als dat niet het geval is, stuurt het de verdwaalde pakketten terug. Het protocol UDP doet dit niet en het is dan aan de applicatieontwikkelaar om dit te doen. Daarom wordt op het internet, dat geen 100% betrouwbaar netwerk is, het protocol TCP het meest gebruikt. We spreken dan van een TCP-IP-netwerk.
- De applicatielaag omvat de functies van de niveaus 5 tot en met 7 van het OSI-model.
Webapplicaties bevinden zich in de Application-laag en maken dus gebruik van de TCP-IP-protocollen. De Application-lagen van de client- en servercomputers wisselen berichten uit die aan de lagen 1 tot en met 4 van het model worden toevertrouwd om naar de bestemming te worden doorgestuurd. Om elkaar te kunnen begrijpen, moeten de applicatielagen van beide computers dezelfde taal of hetzelfde protocol „spreken”. Dat van de webapplicaties heet HTTP (HyperText Transfer Protocol). Het is een tekstprotocol, c.a.d, waarbij de machines tekstregels over het netwerk uitwisselen om elkaar te begrijpen. Deze uitwisselingen zijn gestandaardiseerd, d.w.z. dat de client over een aantal berichten beschikt om de server precies aan te geven wat hij wil, en dat de server eveneens over een aantal berichten beschikt om de client zijn antwoord te geven. Deze berichtenuitwisseling heeft de volgende vorm:
Client --> Server
Wanneer de client een verzoek indient bij de webserver, stuurt hij
- tekstregels in het formaat HTTP om aan te geven wat hij wil;
- een lege regel;
- eventueel een document.
Server --> Client
Wanneer de server zijn antwoord naar de client stuurt, verzendt hij
- tekstregels in het formaat HTTP om aan te geven wat hij verstuurt;
- een lege regel;
- eventueel een document.
De uitwisselingen hebben dus in beide richtingen dezelfde vorm. In beide gevallen kan er een document worden verzonden, ook al komt het zelden voor dat een client een document naar de server stuurt. Maar het protocol HTTP voorziet hierin. Hierdoor kunnen bijvoorbeeld abonnees van een internetprovider diverse documenten uploaden naar hun persoonlijke website die bij deze provider wordt gehost. De uitgewisselde documenten kunnen van welke aard dan ook zijn. Laten we eens kijken naar een browser die een webpagina met afbeeldingen opvraagt:
- de browser maakt verbinding met de webserver en vraagt de gewenste pagina op. De opgevraagde bronnen worden op unieke wijze aangeduid door middel van URL (Uniform Resource Locator). De browser verstuurt alleen HTTP-headers en geen documenten.
- De server antwoordt. Hij stuurt eerst HTTP-headers waarin wordt aangegeven welk type antwoord hij verstuurt. Dit kan een foutmelding zijn als de opgevraagde pagina niet bestaat. Als de pagina wel bestaat, geeft de server in de HTTP-headers van zijn antwoord aan dat hij na deze headers een HTML-document (HyperText Markup Language) zal verzenden. Dit document bestaat uit een reeks tekstregels in het HTML-formaat. Een HTML-tekst bevat tags (markeringen) die de browser aanwijzingen geven over de manier waarop de tekst moet worden weergegeven.
- De client weet aan de hand van de HTTP-headers van de server dat hij een HTML-document zal ontvangen. Hij analyseert dit document en merkt wellicht dat het verwijzingen naar afbeeldingen bevat. Deze afbeeldingen staan niet in het document HTML. Daarom doet hij een nieuw verzoek aan dezelfde webserver om de eerste afbeelding op te vragen die hij nodig heeft. Dit verzoek is identiek aan dat in stap 1, behalve dat de opgevraagde bron anders is. De server verwerkt dit verzoek door de gevraagde afbeelding naar de client te sturen. Deze keer geven de headers in het antwoord aan dat het verzonden document een afbeelding is en geen document met de naam HTTP.
- De client haalt de verzonden afbeelding op. De stappen 3 en 4 worden herhaald totdat de client (meestal een browser) alle documenten heeft ontvangen die nodig zijn om de volledige pagina weer te geven.
2.4.3. Het HTTP-protocol
Laten we het protocol HTTP aan de hand van voorbeelden bekijken. Wat wisselen een browser en een webserver uit?
De webservice of HTTP-service is een TCP-IP-service die doorgaans op poort 80 draait. Het kan ook op een andere poort draaien. In dat geval zou de clientbrowser deze poort moeten specificeren in het URL-verzoek dat hij verstuurt. Een URL heeft de volgende algemene vorm:
protocol://[:port]-server/pad/info
waarbij
protocol | http voor de webservice. Een browser kan ook als client fungeren voor ftp-, news-, telnet- en andere diensten. |
machine | naam van de machine waarop de webservice draait |
poort | poort van de webservice. Als dit 80 is, kan het poortnummer worden weggelaten. Dit is het meest voorkomende geval |
pad | pad naar de opgevraagde bron |
info | aanvullende informatie die aan de server wordt verstrekt om het verzoek van de klant te verduidelijken |
Wat doet een browser wanneer een gebruiker vraagt om het laden van een URL?
- hij opent een verbinding TCP-IP met de machine en de poort die zijn aangegeven in het machine-gedeelte [:port] van de URL. Het openen van een TCP-IP-verbinding betekent dat er een „communicatiekanaal” tussen twee machines wordt gecreëerd. Zodra dit kanaal is gecreëerd, verloopt alle informatie-uitwisseling tussen de twee machines hierdoorheen. Het aanmaken van deze verbinding TCP-IP houdt nog niet het webprotocol HTTP in.
- Zodra de verbinding TCP-IP is aangemaakt, zal de client zijn verzoek naar de webserver sturen door tekstregels (commando’s) in het formaat HTTP te verzenden. Hij zal het pad/informatiegedeelte van de URL naar de server sturen
- De server antwoordt op dezelfde manier en via dezelfde pipe
- een van beide partijen besluit de verbinding te verbreken. Dit hangt af van het gebruikte protocol HTTP. Bij het protocol HTTP 1.0 sluit de server de verbinding na elk van zijn antwoorden. Dit dwingt een client die meerdere verzoeken moet doen om de verschillende documenten te verkrijgen waaruit een webpagina bestaat, om bij elk verzoek een nieuwe verbinding te openen, wat kosten met zich meebrengt. Met het protocol HTTP/1.1 kan de client de server opdragen de verbinding open te houden totdat hij aangeeft deze te sluiten. Hij kan dus alle documenten van een webpagina met één enkele verbinding ophalen en de verbinding zelf sluiten zodra het laatste document is ontvangen. De server detecteert deze sluiting en sluit de verbinding eveneens.
Om de communicatie tussen een client en een webserver te bekijken, gebruiken we de extensie [Advanced Rest Client] voor de Chrome-browser die we in paragraaf 1.3 hebben geïnstalleerd. We bevinden ons in de volgende situatie:
De webserver kan willekeurig zijn. We willen hier de communicatie in kaart brengen die tussen de browser en de webserver plaatsvindt. Eerder hebben we de volgende statische pagina HTML aangemaakt:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>essai 1 : une page statique</title>
</head>
<body>
<h1>Une page statique...</h1>
</body>
</html>
die we in een browser bekijken:
 |
We zien dat de opgevraagde URL: http://localhost:56376/HtmlPage1.html is. De machine van de webservice is dus localhost (=lokale machine) en de poort 56376. Laten we de applicatie [Advanced Rest Client] gebruiken om dezelfde URL op te vragen:
 |
- in [1] starten we de applicatie (in het tabblad [Applications] van een nieuw Chrome-tabblad);
- in [2] selecteer je de optie [Request];
- in [3], geef je de server op die je wilt opvragen: http://localhost:56376;
- in [4], geef je de gevraagde URL op: /HtmlPage1.html;
- in [5] worden eventuele parameters aan de URL toegevoegd. Hier zijn er geen;
- in [6] wordt de opdracht HTTP gespecificeerd die voor de aanvraag wordt gebruikt, in dit geval GET.
Dit levert de volgende query op:
 |
De aldus voorbereide aanvraag [7] wordt via [8] naar de server verzonden. Het verkregen antwoord is dan als volgt:
 |
We hebben hierboven al gezegd dat de communicatie tussen client en server de volgende vorm heeft:
- in [1] zien we de headers HTTP die door de browser in zijn verzoek zijn verzonden. Er was geen document om te verzenden;
- in [2] zien we de headers HTTP die door de server als antwoord zijn verzonden. In [3] zien we het document dat hij heeft verzonden.
In [3] herkennen we de statische pagina HTML die we op de webserver hebben geplaatst.
Laten we het verzoek HTTP van de browser eens bekijken:
- regel 1 is niet door de applicatie weergegeven;
- regel 2: de browser identificeert zich met de header [User-Agent];
- regel 3: de browser geeft aan dat hij een tekstdocument (text/plain) in het formaat UTF-8 naar de server verstuurt. In feite heeft de browser hier geen document verstuurd;
- regel 4: de browser geeft aan dat hij elk type document als antwoord accepteert;
- regel 5: de browser specificeert de geaccepteerde documentformaten;
- regel 6: de browser specificeert de gewenste talen in volgorde van voorkeur.
De server heeft hierop gereageerd door de volgende HTTP-headers te verzenden:
- regel 1: is niet weergegeven door de applicatie;
- regel 3: de server identificeert zich, in dit geval een IIS-server van Microsoft;
- regel 5: geeft de technologie aan die het antwoord heeft gegenereerd, in dit geval ASP.NET;
- regel 6: datum en tijdstip van het antwoord;
- regel 7: het type document dat door de server is verzonden. In dit geval een document met de naam HTML;
- regel 12: de grootte in bytes van het verzonden document HTML.
2.4.4. Conclusie
Aan de hand van enkele voorbeelden hebben we de structuur van het verzoek van een webclient en die van het antwoord van de webserver hierop ontdekt. De communicatie verloopt via het protocol HTTP, een reeks tekstcommando’s die door beide partijen worden uitgewisseld. Het verzoek van de client en het antwoord van de server hebben beide de volgende structuur:
De twee gebruikelijke commando’s om een bron op te vragen zijn GET en POST. Het commando GET gaat niet vergezeld van een document. Het commando POST gaat daarentegen wel vergezeld van een document, dat meestal een tekenreeks is die alle in het formulier ingevoerde waarden bevat. Met het commando HEAD kunnen alleen de kopteksten HTTP worden opgevraagd; dit commando gaat niet vergezeld van een document.
Op verzoek van een client stuurt de server een antwoord met dezelfde structuur. De opgevraagde bron wordt verzonden in het gedeelte [Document], tenzij het commando van de client HEAD was; in dat geval worden alleen de headers HTTP verzonden.
2.5. De basisprincipes van de taal HTML
Een webbrowser kan verschillende documenten weergeven, waarvan het meest voorkomende het HTML-document is (HyperText Markup Language). Dit is een tekst die is opgemaakt met tags in de vorm <balise>texte</balise>. Zo zal de tekst <B>important</B> de belangrijke tekst vetgedrukt weergeven. Er bestaan ook op zichzelf staande tags, zoals de tag <hr/>, die een horizontale lijn weergeeft. We zullen niet ingaan op de tags die in een HTML-tekst kunnen voorkomen. Er bestaat veel WYSIWYG-software waarmee je een webpagina kunt bouwen zonder ook maar één regel HTML-code te schrijven. Deze tools genereren automatisch de HTML-code van een lay-out die met de muis en vooraf gedefinieerde besturingselementen is gemaakt. Zo kun je (met de muis) een tabel in de pagina invoegen en vervolgens de door de software gegenereerde HTML-code bekijken om te ontdekken welke tags je moet gebruiken om een tabel in een webpagina te definiëren. Eenvoudiger kan het niet. Bovendien is kennis van de taal HTML onmisbaar, aangezien dynamische webapplicaties zelf de HTML-code moeten genereren die naar de webclients moet worden verzonden. Deze code wordt programmatisch gegenereerd en men moet natuurlijk weten wat er moet worden gegenereerd, zodat de client de gewenste webpagina te zien krijgt.
Kortom, het is helemaal niet nodig om de volledige taal HTML te beheersen om met webprogrammeren te beginnen. Deze kennis is echter wel noodzakelijk en kan worden opgedaan door het gebruik van WYSIWYG-software voor het bouwen van webpagina’s, zoals DreamWeaver en tientallen andere. Een andere manier om de fijne kneepjes van de taal HTML te ontdekken, is door op het web te surfen en de broncode te bekijken van pagina’s die interessante kenmerken vertonen die je nog niet kent.
2.5.1. Een voorbeeld
Laten we eens kijken naar het volgende voorbeeld, dat enkele elementen laat zien die in een webdocument kunnen voorkomen, zoals:
- een tabel;
- een afbeelding;
- een link.
 |
Een HTML-document heeft de volgende algemene vorm:
Het gehele document wordt omgeven door de tags <html>...</html>. Het bestaat uit twee delen:
- <head>...</head>: dit is het niet-weergegeven gedeelte van het document. Het geeft informatie aan de browser die het document gaat weergeven. Hierin staat vaak de tag <title>...</title>, die de tekst vastlegt die in de titelbalk van de browser wordt weergegeven. Er kunnen ook andere tags in staan, met name tags die de trefwoorden van het document definiëren, trefwoorden die vervolgens door zoekmachines worden gebruikt. In dit gedeelte kunnen ook scripts voorkomen, meestal geschreven in JavaScript of VBScript, die door de browser worden uitgevoerd.
- <body attributen>...</body>: dit is het gedeelte dat door de browser wordt weergegeven. De tags HTML in dit gedeelte geven aan de browser aan hoe het document er visueel „uit moet zien”. Elke browser interpreteert deze tags op zijn eigen manier. Twee browsers kunnen hetzelfde webdocument dus op verschillende manieren weergeven. Dit is doorgaans een van de grootste uitdagingen voor webontwerpers.
De code HTML van ons voorbeelddocument is als volgt:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>balises</title>
</head>
<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
<h1 style="text-align: center">Les balises HTML</h1>
<hr />
<table border="1">
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>cellule(1,1)</td>
<td style="width: 150px; text-align: center;">cellule(1,2)</td>
<td>cellule(1,3)</td>
</tr>
<tr>
<td>cellule(2,1)</td>
<td>cellule(2,2)</td>
<td>cellule(2,3</td>
</tr>
</tbody>
</table>
<table border="0">
<tr>
<td>Une image</td>
<td>
<img border="0" src="/images/cerisier.jpg"/></td>
</tr>
<tr>
<td>le site de l'ISTIA</td>
<td><a href="http://istia.univ-angers.fr">ici</a></td>
</tr>
</table>
</body>
</html>
Element | tags en voorbeelden HTML |
titel van het document | <title>tags</title> (regel 5) de tekst balises verschijnt in de titelbalk van de browser die het document weergeeft |
horizontale balk | <hr/>: geeft een horizontale streep weer (regel 10) |
tabel | <table attributen>....</table>: om de tabel te definiëren (regels 12, 32) <thead>...</thead>: om de kolomkoppen te definiëren (regels 13, 19) <tbody>...</tbody>: om de inhoud van de tabel te definiëren (regel 20, 31) <tr attributen>...</tr>: om een rij te definiëren (regels 21, 25) <td attributen>...</td>: om een cel te definiëren (regel 22) voorbeelden: <table border="1">...</table>: het attribuut border bepaalt de dikte van de rand van de tabel <td style="width: 150px; text-align: center;">cel(1,2)</td>: definieert een cel waarvan de inhoud cel(1,2) is. Deze inhoud wordt horizontaal gecentreerd (text-align: center). De cel heeft een breedte van 150 pixels (width: 150px) |
afbeelding | <img border="0" src="/images/cerisier.jpg"/> (regel 38): definieert een afbeelding zonder rand (border="0") waarvan het bronbestand /images/cerisier.jpg op de webserver staat (src="/images/cerisier.jpg"). Deze link staat in een webdocument dat is gegenereerd met de URL http://localhost:port/html/balises.htm. De browser zal dus de URL http://localhost:port/images/cerisier.jpg opvragen om de hier genoemde afbeelding te verkrijgen. |
link | <a href="http://istia.univ-angers.fr">hier</a> (regel 42): zorgt ervoor dat de tekst ici als link fungeert naar de pagina URL http://istia.univ-angers.fr. |
paginaachtergrond | <body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (regel 8): geeft aan dat de afbeelding die als paginabackground moet dienen, zich op de webserver bevindt in de map /images/standard.jpg. In het kader van ons voorbeeld zal de browser het bestand URL http://localhost:port/images/standard.jpg opvragen om deze achtergrondafbeelding op te halen. Bovendien wordt de hoofdtekst van het document weergegeven in een rechthoek met een hoogte van 400 pixels en een breedte van 400 pixels. |
Uit dit eenvoudige voorbeeld blijkt dat de browser, om het volledige document op te bouwen, drie verzoeken naar de server moet sturen:
- http://localhost:port/html/balises.htm om de broncode HTML van het document op te halen
- http://localhost:port/images/cerisier.jpg om de afbeelding cerisier.jpg op te halen
- http://localhost:port/images/standard.jpg om de achtergrondafbeelding standard.jpg op te halen
2.5.2. Een formulier HTML
Het volgende voorbeeld toont een formulier:
 |
De code HTML die deze weergave genereert, is als volgt:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>formulaire</title>
<script type="text/javascript">
function effacer() {
alert("Vous avez cliqué sur le bouton Effacer");
}
</script>
</head>
<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
<h1 style="text-align: center">Formulaire HTML</h1>
<form method="post" action="FormulairePost.aspx">
<table border="0">
<tr>
<td>Etes-vous marié(e)</td>
<td>
<input type="radio" value="Oui" name="R1" />Oui
<input type="radio" name="R1" value="non" checked="checked" />Non
</td>
</tr>
<tr>
<td>Cases à cocher</td>
<td>
<input type="checkbox" name="C1" value="un" />1
<input type="checkbox" name="C2" value="deux" checked="checked" />2
<input type="checkbox" name="C3" value="trois" />3
</td>
</tr>
<tr>
<td>Champ de saisie</td>
<td>
<input type="text" name="txtSaisie" size="20" value="qqs mots" />
</td>
</tr>
<tr>
<td>Mot de passe</td>
<td>
<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
</td>
</tr>
<tr>
<td>Boîte de saisie</td>
<td>
<textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
</td>
</tr>
<tr>
<td>combo</td>
<td>
<select size="1" name="cmbValeurs">
<option value="1">choix1</option>
<option selected="selected" value="2">choix2</option>
<option value="3">choix3</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix simple</td>
<td>
<select size="3" name="lst1">
<option selected="selected" value="1">liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix multiple</td>
<td>
<select size="3" name="lst2" multiple="multiple">
<option value="1" selected="selected">liste1</option>
<option value="2">liste2</option>
<option selected="selected" value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
</td>
</tr>
<tr>
<td>bouton</td>
<td>
<input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
</td>
</tr>
<tr>
<td>envoyer</td>
<td>
<input type="submit" value="Envoyer" name="cmdRenvoyer" />
</td>
</tr>
<tr>
<td>rétablir</td>
<td>
<input type="reset" value="Rétablir" name="cmdRétablir" />
</td>
</tr>
</table>
<input type="hidden" name="secret" value="uneValeur" />
</form>
</body>
</html>
De koppeling tussen de visuele weergave en de tag HTML is als volgt:
Besturingselement | tag HTML |
formulier | <form method="post" action="..."> |
invoerveld | <input type="text" name="txtSaisie" size="20" value="een paar woorden" /> |
verborgen invoerveld | <input type="password" name="txtMdp" size="20" value="unMotDePasse" /> |
invoerveld met meerdere regels | <textarea rows="2" name="areaSaisie" cols="20"> regel1 regel2 regel3 </textarea> |
keuzerondjes | <input type="radio" value="Ja" name="R1" />Ja <input type="radio" name="R1" value="nee" checked="checked" />Nee |
selectievakjes | <input type="checkbox" name="C1" value="één" />1 <input type="checkbox" name="C2" value="twee" checked="checked" />2 <input type="checkbox" name="C3" value="drie" />3 |
Keuzelijst | <select size="1" name="cmbValeurs"> <option value="1">keuze1</option> <option selected="selected" value="2">keuze 2</option> <option value="3">keuze 3</option> </select> |
lijst met één selectie | <select size="3" name="lst1"> <option selected="selected" value="1">lijst1</option> <option value="2">lijst2</option> <option value="3">lijst3</option> <option value="4">lijst4</option> <option value="5">lijst5</option> </select> |
lijst met meerdere selecties | <select size="3" name="lst2" multiple="multiple"> <option value="1">lijst1</option> <option value="2">lijst2</option> <option selected="selected" value="3">lijst3</option> <option value="4">lijst4</option> <option value="5">lijst5</option> </select> |
knop van het type 'submit' | <input type="submit" value="Verzenden" name="cmdRenvoyer" /> |
resetknop | <input type="reset" value="Terugzetten" name="cmdRétablir" /> |
knop van het type button | <input type="button" value="Wissen" name="cmdEffacer" onclick="effacer()" /> |
Laten we deze verschillende tags eens bekijken:
2.5.2.1. Het formulier-
formulier | |
tag HTML | <form name="..." method="..." action="...">...</form> |
attributen | name="frmexemple": naam van het formulier method="..." : methode die door de browser wordt gebruikt om de in het formulier verzamelde waarden naar de webserver te verzenden action="..." : URL waarnaar de in het formulier verzamelde waarden worden verzonden. Een webformulier wordt omgeven door de <form>...</form>-tags. Het formulier kan een naam hebben (name="xx"). Dit geldt voor alle besturingselementen die in een formulier voorkomen. Het doel van een formulier is om informatie te verzamelen die de gebruiker via het toetsenbord of de muis invoert, en deze naar een URL van een webserver te verzenden. Welke? Die waarnaar wordt verwezen in het attribuut action="URL". Als dit attribuut ontbreekt, worden de gegevens verzonden naar de URL van het document waarin het formulier zich bevindt. Een webclient kan twee verschillende methoden gebruiken, namelijk POST en GET, om gegevens naar een webserver te verzenden. Het attribuut method="méthode", waarbij method gelijk is aan GET of POST, van de tag <form> geeft aan de browser aan welke methode moet worden gebruikt om de in het formulier verzamelde informatie te verzenden naar de URL die is opgegeven door het attribuut action="URL". Wanneer het attribuut method niet is opgegeven, wordt standaard de methode GET gebruikt. |
2.5.2.2. De tekstinvoervelden
invoerveld | <input type="text" name="txtSaisie" size="20" value="een paar woorden" /> <input type="password" name="txtMdp" size="20" value="unMotDePasse" /> |
 |
tag HTML | <input type="..." name="..." size=".." value=".."/> De input-tag bestaat voor verschillende besturingselementen. Het is het attribuut type waarmee deze verschillende besturingselementen van elkaar kunnen worden onderscheiden. |
attributen | type="text": geeft aan dat het een invoerveld is type="password": de tekens in het invoerveld worden vervangen door sterretjes (*). Dit is het enige verschil met het normale invoerveld. Dit type besturingselement is geschikt voor het invoeren van wachtwoorden. size="20": aantal zichtbare tekens in het veld – dit belet niet dat er meer tekens worden ingevoerd name="txtSaisie": naam van het invoerveld value="een paar woorden": tekst die in het invoerveld wordt weergegeven. |
2.5.2.3. Invoervelden met meerdere regels
invoerveld met meerdere regels | <textarea rows="2" name="areaSaisie" cols="20"> regel1 regel 2 regel 3 </textarea> |
 |
tag HTML | <textarea ...>tekst</textarea> geeft een invoerveld voor meerdere regels weer met aanvankelijk tekst erin |
attributen | rows="2": aantal regels cols="'20" : aantal kolommen name="areaSaisie": naam van het besturingselement |
2.5.2.4. De keuzerondjes
keuzerondjes | <input type="radio" value="Ja" name="R1" />Ja <input type="radio" name="R1" value="nee" checked="checked" />Nee |
 |
tag HTML | <input type="radio" attribuut2="waarde2" ..../>tekst toont een keuzerondje met tekst ernaast. |
attributen | name="radio": naam van het besturingselement. Keuzerondjes met dezelfde naam vormen een groep die elkaar uitsluiten: er kan slechts één worden aangevinkt. value="waarde": waarde die aan de keuzeknop wordt toegewezen. Deze waarde mag niet worden verward met de tekst die naast de keuzeknop wordt weergegeven. Deze tekst is uitsluitend bedoeld voor weergave. checked="checked": als dit trefwoord aanwezig is, is de keuzeknop aangevinkt, anders niet. |
2.5.2.5. Selectievakjes
selectievakjes | <input type="checkbox" name="C1" value="één" />1 <input type="checkbox" name="C2" value="twee" checked="checked" />2 <input type="checkbox" name="C3" value="drie" />3 |
 |
tag HTML | <input type="checkbox" attribuut2="waarde2" ....>tekst toont een selectievakje met tekst ernaast. |
attributen | name="C1": naam van het besturingselement. Selectievakjes kunnen al dan niet dezelfde naam hebben. Selectievakjes met dezelfde naam vormen een groep van aan elkaar gekoppelde selectievakjes. value="waarde": waarde die aan het selectievakje wordt toegewezen. Deze waarde mag niet worden verward met de tekst die naast het selectievakje wordt weergegeven. Deze tekst is uitsluitend bedoeld voor weergave. checked="checked": als dit trefwoord aanwezig is, is het selectievakje aangevinkt, anders niet. |
2.5.2.6. De vervolgkeuzelijst (combo)
Combo | <select size="1" name="cmbValeurs"> <option value="1">keuze1</option> <option selected="selected" value="2">keuze2</option> <option value="3">keuze 3</option> </select> |
 |
tag HTML | <select size=".." name=".."> <option [selected="selected"] value=”v”>...</option> ... </select> geeft de teksten tussen de tags <option>...</option> |
attributen | name="cmbValeurs": naam van het besturingselement. size="1": aantal zichtbare lijstitems. size="1" maakt van de lijst het equivalent van een combobox. selected="selected": als dit trefwoord aanwezig is voor een lijstitem, wordt dit item geselecteerd weergegeven in de lijst. In ons voorbeeld hierboven verschijnt het lijstitem choix2 als het geselecteerde item van de combobox wanneer deze voor het eerst wordt weergegeven. value=”v”: als het element door de gebruiker wordt geselecteerd, wordt deze waarde [v] naar de server verzonden. Als dit attribuut ontbreekt, wordt de weergegeven en geselecteerde tekst naar de server verzonden. |
2.5.2.7. Lijst met één selectie
lijst met één selectie | <select size="3" name="lst1"> <option selected="selected" value="1">lijst1</option> <option value="2">lijst2</option> <option value="3">lijst3</option> <option value="4">lijst4</option> <option value="5">lijst5</option> </select> |
 |
tag HTML | <select size=".." name=".."> <option [selected="selected"]>...</option> ... </select> geeft de teksten tussen de tags <option>...</option> |
attributen | dezelfde als voor de vervolgkeuzelijst die slechts één item weergeeft. Dit besturingselement verschilt alleen van de vorige vervolgkeuzelijst door het attribuut size>1. |
2.5.2.8. Lijst met meerdere selecties
lijst met enkele selectie | <select size="3" name="lst2" multiple="multiple"> <option value="1" selected="selected">lijst1</option> <option value="2">lijst2</option> <option selected="selected" value="3">lijst3</option> <option value="4">lijst4</option> <option value="5">lijst5</option> </select> |
 |
tag HTML | <select size=".." name=".." multiple="multiple"> <option [selected="selected"]>...</option> ... </select> geeft in een lijst de teksten weer die tussen de tags <option>...</option> |
attributen | multiple: maakt het mogelijk meerdere elementen in de lijst te selecteren. In het bovenstaande voorbeeld zijn de elementen liste1 en liste3 beide geselecteerd. |
2.5.2.9. Knop van het type button
knop van het type button | <input type="button" value="Wissen" name="cmdEffacer" onclick="effacer()" /> |
 |
tag HTML | <input type="button" value="..." name="..." onclick="effacer()" ..../> |
attributen | type="button": definieert een knop. Er zijn nog twee andere soorten knoppen: de typen submit en reset. value="Wissen": de tekst die op de knop wordt weergegeven onclick="functie()": hiermee kan een functie worden gedefinieerd die moet worden uitgevoerd wanneer de gebruiker op de knop klikt. Deze functie maakt deel uit van de scripts die in het weergegeven webdocument zijn gedefinieerd. De bovenstaande syntaxis is een javascript-syntaxis. Als de scripts in VBScript zijn geschreven, moet onclick="functie" zonder de haakjes worden geschreven. De syntaxis blijft hetzelfde als er parameters aan de functie moeten worden doorgegeven: onclick="functie(val1, val2,...)" In ons voorbeeld roept een klik op de knop Effacer de volgende JavaScript-functie effacer aan: <script type="text/javascript"> function effacer() { alert("U hebt op de knop Wissen geklikt"); } </script> De functie effacer geeft een bericht weer:  |
2.5.2.10. Submit-knop
Submit-knop | <input type="submit" value="Verzenden" name="cmdRenvoyer" /> |
 |
tag HTML | <input type="submit" value="Verzenden" name="cmdRenvoyer" /> |
attributen | type="submit": definieert de knop als een knop om de gegevens van het formulier naar de webserver te verzenden. Wanneer de gebruiker op deze knop klikt, verzendt de browser de gegevens van het formulier naar de URL die is gedefinieerd in het attribuut action van de tag <form>, volgens de methode die is gedefinieerd door het attribuut method van diezelfde tag. value="Verzenden": de tekst die op de knop wordt weergegeven |
2.5.2.11. Resetknop
Resetknop | <input type="reset" value="Resetten" name="cmdRétablir" /> |
 |
tag HTML | <input type="reset" value="Terugzetten" name="cmdRétablir"/> |
attributen | type="reset": definieert de knop als een knop om het formulier te resetten. Wanneer de gebruiker op deze knop klikt, zet de browser het formulier terug in de staat waarin het werd ontvangen. value="Resetten" : de tekst die op de knop wordt weergegeven |
2.5.2.12. Verborgen veld
verborgen veld | <input type="hidden" name="secret" value="uneValeur" /> |
tag HTML | <input type="hidden" name="..." value="..."/> |
attributen | type="hidden": geeft aan dat het een verborgen veld is. Een verborgen veld maakt deel uit van het formulier, maar wordt niet aan de gebruiker getoond. Als de gebruiker echter aan zijn browser zou vragen om de broncode weer te geven, zou hij de tag <input type="hidden" value="..."> zien en dus ook de waarde van het verborgen veld. value="eenWaarde": waarde van het verborgen veld. Wat is het nut van het verborgen veld? Hiermee kan de webserver informatie bijhouden tijdens de verzoeken van een klant. Laten we eens kijken naar een online winkelapplicatie. De klant koopt een eerste artikel art1 in een hoeveelheid van q1 op een eerste pagina van een catalogus en gaat vervolgens naar een nieuwe pagina van de catalogus. Om te onthouden dat de klant q1 artikelen art1 heeft gekocht, kan de server deze twee gegevens in een verborgen veld van het webformulier op de nieuwe pagina plaatsen. Op deze nieuwe pagina koopt de klant de artikelen q2 en art2. Wanneer de gegevens van dit tweede formulier naar de server worden verzonden (submit), ontvangt de server niet alleen de informatie (q2,art2) maar ook (q1,art1), die eveneens als verborgen veld deel uitmaakt van het formulier. De webserver plaatst vervolgens de gegevens (q1,art1) en (q2,art2) in een nieuw verborgen veld en verstuurt een nieuwe cataloguspagina. En zo verder. |
2.5.3. Verzending van formulierwaarden naar een webserver door een webclient
In de vorige studie hebben we gezegd dat de webclient over twee methoden beschikt om de waarden van een formulier dat hij heeft weergegeven naar een webserver te verzenden: de methoden GET en POST. Laten we aan de hand van een voorbeeld het verschil tussen beide methoden bekijken.
2.5.3.1. -methode GET
Laten we een eerste test doen, waarbij in de code HTML van het document de tag <form> als volgt is gedefinieerd:
<form method="get" action="FormulaireGet.aspx">
 |
Wanneer de gebruiker op de knop [1] klikt, worden de in het formulier ingevoerde waarden verzonden naar de pagina ASP.NET [2]. Deze pagina doet niets met deze parameters en stuurt een lege pagina terug. We willen alleen weten hoe de browser de ingevoerde waarden naar de webserver doorstuurt. Hiervoor gebruiken we een debug-tool die beschikbaar is in Chrome. Deze activeren we door CTRL-I (hoofdletters) [3] in te typen:
 |
Aangezien we geïnteresseerd zijn in de netwerkcommunicatie tussen de browser en de webserver, openen we hierboven het tabblad [Network] en klikken we vervolgens op de knop [Envoyer] in het formulier. Dit is een knop van het type [submit] binnen een tag [form]. De browser reageert op de klik door de URL [FormulaireGet.aspx] op te vragen die is opgegeven in het attribuut [action] van de tag [form], met de methode GET die is opgegeven in het attribuut [method]. We krijgen dan de volgende informatie:
 |
De bovenstaande schermafbeelding toont ons de URL die door de browser wordt opgevraagd na het klikken op de knop [envoyer]. De browser vraagt inderdaad om de verwachte URL ([FormulaireGet.aspx]), maar voegt daarachter informatie toe die bestaat uit de waarden die in het formulier zijn ingevoerd. Voor meer informatie klikken we op de bovenstaande link:
 |
Boven [1, 2] zien we de headers HTTP die door de browser zijn verzonden. Deze zijn hier opgemaakt. Om de onbewerkte tekst van deze headers te bekijken, volgen we de link [view source] [3, 4]. De volledige tekst luidt als volgt:
We zien hier elementen terug die we eerder al zijn tegengekomen. Andere verschijnen voor het eerst:
Connection: keep-alive | de client vraagt de server om de verbinding niet te verbreken na het antwoord. Hierdoor kan hij dezelfde verbinding gebruiken voor een volgend verzoek. De verbinding blijft niet onbeperkt openstaan. De server verbreekt deze na een te lange periode van inactiviteit. |
Referer | de URL die in de browser werd weergegeven toen het nieuwe verzoek werd gedaan. |
De nieuwe regel is regel 1 in de informatie die volgt op de URL. We zien dat de keuzes die in het formulier zijn gemaakt, terug te vinden zijn in de URL. De waarden die de gebruiker in het formulier heeft ingevoerd, zijn doorgegeven in de opdracht GET URL?param1=waarde1¶m2=waarde2&... HTTP/1.1, waarbij de parami de namen (attribuut name) van de besturingselementen van het webformulier zijn en valeuri de waarden die daaraan zijn gekoppeld. Hieronder vindt u een tabel met drie kolommen:
- kolom 1: bevat de definitie van een besturingselement HTML uit het voorbeeld;
- kolom 2: toont hoe dit besturingselement in een browser wordt weergegeven;
- kolom 3: toont de waarde die door de browser naar de server wordt verzonden voor het besturingselement uit kolom 1, in de vorm zoals deze voorkomt in de GET-verzoek in het voorbeeld.
besturingselement HTML | weergave | teruggestuurde waarde(n) |
<input type="radio" value="Ja" name="R1"/>Ja <input type="radio" name="R1" value="nee" checked="checked"/>Nee |  | R1=Ja - de waarde van het attribuut value van de door de gebruiker aangevinkte keuzeknop. |
<input type="checkbox" name="C1" value="één"/>1 <input type="checkbox" name="C2" value="twee" checked="checked"/>2 <input type="checkbox" name="C3" value="drie"/>3 |  | C1=één C2=twee - waarden van de attributen value van de door de gebruiker aangevinkte selectievakjes |
<input type="text" name="txtSaisie" size="20" value="enkele woorden"/> |  | txtSaisie=programmering+Web - tekst die door de gebruiker in het invoerveld is getypt. De spaties zijn vervangen door het teken + |
<input type="password" name="txtMdp" size="20" value="unMotDePasse"/> |  | txtMdp=ditisgeheim - tekst die door de gebruiker in het invoerveld is getypt |
<textarea rows="2" name="areaSaisie" cols="20"> regel1 regel2 regel3 </textarea> |  | invoergebied=de+basisprincipes+van+de%0D%0A webprogrammering - tekst die door de gebruiker in het invoerveld is getypt. %OD%OA is het teken dat het einde van een regel aangeeft. De spaties zijn vervangen door het teken + |
<select size="1" name="cmbValeurs"> <option value='1'>keuze1</option> <option selected="selected" value='2'>keuze2</option> <option value='3'>keuze3</option> </select> |  | cmbWaarden=3 - attribuut [value] van het door de gebruiker geselecteerde element |
<select size="3" name="lst1"> <option selected="selected" value='1'>lijst1</option> <option value='2'>lijst2</option> <option value='3'>lijst3</option> <option value='4'>lijst4</option> <option value='5'>lijst5</option> </select> |  | lst1=3 - attribuut [value] van het door de gebruiker geselecteerde element |
<select size="3" name="lst2" multiple="multiple"> <option selected="selected" value='1'>lijst1</option> <option value='2'>lijst2</option> <option selected="selected" value='3'>lijst3</option> <option value='4'>lijst4</option> <option value='5'>lijst5</option> </select> |  | lst2=1 lst2=3 - attributen [value] van de door de gebruiker geselecteerde elementen |
<input type="submit" value="Verzenden" name="cmdRenvoyer"/> | cmdRenvoyer=Verzenden - naam en attribuut value van de knop waarmee de formuliergegevens naar de server zijn verzonden | |
<input type="hidden" name="secret" value="uneValeur"/> | secret=eenWaarde - attribuut value van het verborgen veld |
2.5.3.2. Methode POST
We passen het document HTML aan, zodat de browser nu de methode POST gebruikt om de formulierwaarden naar de webserver te verzenden:
<form method="post" action="FormulairePost.aspx">
We vullen het formulier in zoals bij de methode GET en verzenden de parameters naar de server met de knop [Envoyer]. Net zoals in de vorige paragraaf op pagina 34 hebben we in Chrome toegang tot de headers HTTP van het verzoek dat door de browser is verzonden:
Er verschijnen nieuwe elementen in het verzoek HTTP van de client:
POST URL HTTP/1.1 | de query GET is vervangen door een query POST. De parameters staan niet meer in deze eerste regel van de aanvraag. We zien dat ze nu (regel 14) na een lege regel achter de aanvraag HTTP staan. Hun codering is identiek aan die in de aanvraag GET. |
Content-Length | aantal "verzonden" tekens, c.a.d. Het aantal tekens dat de webserver moet lezen na ontvangst van de headers HTTP om het document op te halen dat de client naar de server stuurt. Het document in kwestie is hier de lijst met waarden van het formulier. |
Content-type | geeft het type document aan dat de client na de headers HTTP zal verzenden. Het type [application/x-www-form-urlencoded] geeft aan dat het een document is dat formulierwaarden bevat. |
Er zijn twee methoden om gegevens naar een webserver te verzenden: GET en POST. Is de ene methode beter dan de andere? We hebben gezien dat als de waarden van een formulier door de browser werden verzonden met de methode GET, de browser in het veld Adresse de gevraagde URL weergeeft in de vorm URL?param1=val1¶m2=val2&.... Dit kan als een voordeel of als een nadeel worden gezien:
- een voordeel als men de gebruiker de mogelijkheid wil bieden om deze geconfigureerde URL in zijn favoriete links op te nemen;
- een nadeel als men niet wil dat de gebruiker toegang heeft tot bepaalde informatie in het formulier, zoals bijvoorbeeld verborgen velden.
Vanaf nu zullen we in onze formulieren vrijwel uitsluitend de methode POST gebruiken.
2.6. Conclusion
In dit hoofdstuk zijn verschillende basisconcepten van webontwikkeling behandeld:
- de communicatie tussen client en server via het protocol HTTP;
- het ontwerpen van een document met behulp van de taal HTML;
- het ontwerpen van invoerformulieren.
Aan de hand van een voorbeeld hebben we gezien hoe een klant informatie naar de webserver kan sturen. We hebben niet uitgelegd hoe de server
- deze informatie kan ophalen;
- deze te verwerken;
- de klant een dynamisch antwoord kan sturen dat afhankelijk is van het resultaat van de verwerking.
Dit is het domein van webprogrammering, een onderwerp dat we in het volgende hoofdstuk behandelen met een inleiding tot de technologie ASP.NET MVC.