Handboek Annuleren

Informatie over webtoepassingen

Zoeken

Laatst bijgewerkt op 3 mei 2021

Opmerking:

De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Meer informatie vindt u in dit artikel.

Over webtoepassingen

Een webtoepassing is een website die pagina's bevat met gedeeltelijk of geheel onbepaalde inhoud. De uiteindelijke inhoud van een pagina wordt pas bepaald wanneer de bezoeker een pagina opvraagt bij de webserver. Omdat de uiteindelijke inhoud van de pagina per verzoek kan verschillen, omdat deze afhankelijk is van de acties van de bezoeker, wordt dit type pagina een dynamische pagina genoemd.

Webtoepassingen zijn bedoeld als oplossing voor diverse uitdagingen en problemen. In deze sectie worden veelvoorkomende toepassingen voor webtoepassingen beschreven en vindt u een eenvoudig voorbeeld.

Veelvoorkomende toepassingen voor webtoepassingen

Webtoepassingen kennen veel toepassingen voor zowel sitebezoekers als siteontwikkelaars, waaronder de volgende:

Bezoekers de mogelijkheid geven om snel en eenvoudig informatie te zoeken op een website met een uitgebreide inhoud.
Met dergelijke webtoepassingen kunnen bezoekers naar eigen inzicht inhoud doorzoeken en ordenen en door de inhoud navigeren. Voorbeelden hiervan zijn bedrijfsintranetten, Microsoft MSDN (www.msdn.microsoft.com) en Amazon.com (www.amazon.com).
Gegevens van sitebezoekers verzamelen, opslaan en analyseren.
In het verleden werden gegevens die in HTML-formulieren werden ingevoerd, als e-mailberichten naar werknemers of CGI-toepassingen verstuurd om te worden verwerkt. Een webtoepassing kan formuliergegevens rechtstreeks in een database opslaan en ook de gegevens uit een database ophalen en op het web gebaseerde rapporten maken voor analyse. Voorbeelden zijn pagina's voor online bankieren, winkelkassapagina's, onderzoeken en feedbackformulieren.
Updatewebsites hebben inhoud die continu verandert.
Dankzij een webtoepassing hoeft de webontwerper de HTML van de site niet voortdurend bij te werken. Contentproviders zoals nieuwsredacteuren voorzien de webtoepassing van inhoud, waarna de webtoepassing de site automatisch bijwerkt. Voorbeelden zijn The Economist (www.economist.com) en CNN (www.cnn.com).

Voorbeeld van webtoepassing

Janet is een professionele webontwerper en is altijd de Dreamweaver-gebruiker geweest die verantwoordelijk was voor het onderhoud van de intranet- en internetsites van een middelgroot bedrijf met 1000 werknemers. Op een dag komt Chris van Personeelszaken bij haar met een probleem. Personeelszaken beheert een fitnessprogramma dat werknemers punten toekent voor elke kilometer die de werknemer heeft gelopen, gefietst of gerend. Elke werknemer moet maandelijks zijn of haar totaal aantal kilometers via e-mail doorgeven aan Chris. Aan het einde van de maand verzamelt Chris alle e-mailberichten en geeft de werknemers een kleine bonus op basis van hun puntentotaal.

Het probleem van Chris is dat het fitnessprogramma iets te succesvol is geworden. Er doen momenteel zoveel werknemers mee dat Chris aan het einde van de maand wordt overstelpt met e-mailberichten. Chris vraagt Janet of er misschien een weboplossing bestaat.

Janet stelt een intranetwebtoepassing voor die de volgende taken uitvoert:

De werknemers kunnen hun kilometerstand op een webpagina invoeren via een eenvoudig HTML-formulier.
De kilometerstanden van de werknemers worden in een database opgeslagen.
Het programma berekent de fitnesspunten op basis van de kilometergegevens.
Werknemers kunnen hun maandelijkse voortgang volgen.
Chris heeft met één klik toegang tot het puntentotaal aan het einde van elke maand.
Janet heeft de toepassing vóór lunchtijd geschreven en geactiveerd met Dreamweaver, dat de gereedschappen bevat die nodig zijn om een dergelijke toepassing snel en eenvoudig samen te stellen.

De werking van een webtoepassing

Een webtoepassing is een verzameling statische en dynamische webpagina's. Een statische webpagina is een webpagina die niet verandert als een sitebezoeker de pagina opvraagt: de webserver verzendt de pagina ongewijzigd naar de desbetreffende webbrowser. Een dynamische webpagina daarentegen, wordt door de server gewijzigd voordat deze naar de desbetreffende browser wordt gestuurd. Vanwege de veranderlijke aard van de pagina wordt de pagina dynamisch genoemd.

U kunt bijvoorbeeld een pagina ontwerpen om fitnessresultaten weer te geven, waarbij bepaalde informatie (zoals de naam en de resultaten) worden bepaald op het moment dat de pagina wordt opgevraagd door een bepaalde werknemer.

In de volgende secties wordt gedetailleerder beschreven hoe webtoepassingen werken.

Statische webpagina's verwerken

Een statische website bestaat uit een reeks gerelateerde HTML-pagina's en -bestanden die worden beheerd op een computer waarop een webserver wordt uitgevoerd.

Een webserver is software die webpagina's verwerkt in reactie op aanvragen van webbrowsers. Een paginaverzoek wordt gegenereerd wanneer een bezoeker op een koppeling op een webpagina klikt, een bladwijzer in een browser selecteert of een URL in het tekstvak Adres van de browser invoert.

De uiteindelijke inhoud van een statische webpagina wordt bepaald door de paginaontwerper en verandert niet op het moment dat de pagina wordt opgevraagd. Hieronder ziet u een voorbeeld:

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
    </body> 
</html>

Elke regel HTML-code van de pagina wordt door de ontwerper geschreven voordat de pagina op de server wordt geplaatst. Omdat de HTML niet meer verandert wanneer deze eenmaal op de server staat, wordt dit soort pagina een statische pagina genoemd.

Opmerking:

Strikt gesproken hoeft een “statische” pagina helemaal niet statisch te zijn. Een rollover-afbeelding of Flash-inhoud (een SWF-bestand) kan een statische pagina tot leven brengen. In deze documentatie wordt een pagina echter statisch genoemd als deze zonder wijzigingen naar de browser wordt verstuurd.

Wanneer de webserver een verzoek voor een statische pagina ontvangt, leest de server het verzoek, wordt de pagina gezocht en wordt deze naar de desbetreffende browser verzonden, zoals u in het volgende voorbeeld kunt zien:

A. De webbrowser vraagt een statische pagina op. B. De webserver zoekt en vindt de pagina. C. De webserver verzendt de pagina naar de betreffende browser.

In het geval van webtoepassingen zijn bepaalde coderegels onbepaald wanneer de bezoeker de pagina aanvraagt. Deze regels moeten door enkele mechanismen worden bepaald voordat de pagina naar de browser kan worden verzonden. Het mechanisme wordt in de volgende sectie besproken.

Dynamische pagina's verwerken

Wanneer een webserver een verzoek voor een statische webpagina ontvangt, verzendt de server de pagina rechtstreeks naar de desbetreffende browser. Wanneer de webserver echter een verzoek voor een dynamische pagina ontvangt, reageert de server anders: De server geeft de pagina door aan een speciaal stukje software dat voor de afhandeling van de pagina moet zorgen. Deze speciale software wordt een toepassingsserver genoemd.

De toepassingsserver leest de code op de pagina, verwerkt de pagina volgens de instructies in de code en verwijdert de code vervolgens van de pagina. Het resultaat is een statische pagina die de toepassingsserver weer teruggeeft aan de webserver, die de pagina op zijn beurt verzendt naar de browser die de pagina heeft opgevraagd. Als de pagina arriveert, ontvangt de browser alleen HTML. Hier volgt een weergave van het proces:

A. De webbrowser vraagt een dynamische pagina op. B. De webserver zoekt de pagina en geeft deze door aan de toepassingsserver. C. De toepassingsserver scant de pagina op instructies en voltooit de pagina. D. De toepassingsserver retourneert de voltooide pagina aan de webserver E. De webserver verzendt de voltooide pagina naar de betreffende browser.

Toegang krijgen tot een database

Door middel van een toepassingsserver kunt u bronnen aan de serverzijde gebruiken, bijvoorbeeld databases. Een dynamische pagina kan bijvoorbeeld de toepassingsserver de instructie geven om gegevens uit een database op te halen en deze in de HTML van de pagina in te voegen. Zie www.adobe.com/go/learn_dw_dbguide_nl voor meer informatie.

Door een database te gebruiken voor het opslaan van inhoud kunt u het ontwerp van uw website scheiden van de inhoud die u voor de gebruikers van de site wilt weergeven. U hoeft niet meer voor elke pagina een afzonderlijk HTML-bestand te maken, maar u kunt nu een pagina (of sjabloon) maken voor de verschillende soorten informatie die u wilt presenteren. Vervolgens kunt u de inhoud uploaden naar een database en deze inhoud vervolgens door de website laten ophalen als antwoord op een verzoek van de gebruiker. Tevens kunt u de informatie in één bron bijwerken en deze wijziging vervolgens door de gehele website doorvoeren zonder dat elke pagina handmatig moet gaan bewerken. U kunt Adobe Dreamweaver gebruiken om webformulieren te ontwerpen voor het invoegen, bijwerken of verwijderen van gegevens uit de database.

De instructie om gegevens uit een database op te halen, wordt een databasequery genoemd. Een query bestaat uit zoekcriteria die worden uitgedrukt in een databasetaal die SQL (Structured Query Language) wordt genoemd. De SQL-query wordt geschreven in scripts of tags op de server van de pagina.

Een toepassingsserver kan niet rechtstreeks met een database communiceren omdat de typische indeling van de database de gegevens onleesbaar weergeeft, net zoals een Microsoft Word-document onleesbaar is wanneer het in Kladblok of BBEdit wordt geopend. De toepassingsserver kan uitsluitend met de database communiceren met behulp van een databasestuurprogramma: software die als een vertaler tussen de toepassingsserver en de database fungeert.

Nadat het stuurprogramma de communicatie tot stand heeft gebracht, wordt de query voor de database uitgevoerd en wordt een recordset gemaakt. Een recordset is een reeks gegevens die uit een of meer tabellen in een database zijn gehaald. De recordset wordt geretourneerd aan de toepassingsserver, die de gegevens gebruikt om de pagina te voltooien.

Hier volgt een eenvoudige databasequery in SQL:

SELECT lastname, firstname, fitpoints 
FROM employees

Deze instructie maakt een recordset met drie kolommen en vult deze met rijen die de achternaam, voornaam en fitnesspunten bevatten van alle werknemers in de database. Zie www.adobe.com/go/learn_dw_sqlprimer_nl voor meer informatie.

In het volgende voorbeeld ziet u hoe de query voor de database wordt uitgevoerd en de gegevens naar de browser worden geretourneerd:

A. De webbrowser vraagt een dynamische pagina op. B. De webserver zoekt de pagina en geeft deze door aan de toepassingsserver. C. De toepassingsserver scant de pagina op instructies. D. De toepassingsserver verzendt de query naar het databasestuurprogramma. E. Het stuurprogramma voert de query uit op de database. F. De recordset wordt als resultaat geretourneerd aan het stuurprogramma. G. Het stuurprogramma geeft de recordset door aan de toepassingsserver. H. De toepassingsserver voegt de gegevens in op de pagina en geeft de pagina door aan de webserver. I. De webserver verzendt de voltooide pagina naar de betreffende browser.

U kunt bijna elke database met uw webtoepassing gebruiken, zolang u maar het juiste databasestuurprogramma op de server hebt geïnstalleerd.

Als u goedkopere toepassingen wilt samenstellen, kunt u een bestandsgebaseerde database gebruiken, zoals de databases die met Microsoft Access worden gemaakt. Als u robuuste toepassingen voor belangrijke zakelijke doeleinden moet maken, gebruikt u beter een servergebaseerde database, zoals de databases die met Microsoft SQL Server, Oracle 9i of MySQL worden gemaakt.

Als uw database zich op een ander systeem dan uw webserver bevindt, moet u zorgen voor een snelle verbinding tussen de twee systemen zodat uw webtoepassing snel en doeltreffend kan werken.

Dynamische pagina's schrijven

Als u een dynamische pagina wilt ontwerpen, moet u eerst de HTML schrijven en daarna de scripts of tags aan de serverzijde aan de HTML toevoegen om de pagina dynamisch te maken. Als u de resulterende code weergeeft, wordt de taal in de HTML van de pagina ingesloten weergegeven. Deze talen worden dan ook in HTML ingesloten programmeertalen genoemd. In het volgende eenvoudige voorbeeld wordt gebruik gemaakt van CFML (ColdFusion Markup Language):

Opmerking: ondersteuning voor CFML is verwijderd uit Dreamweaver CC en hoger.

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <!--- embedded instructions start here ---> 
        <cfset department="Sales"> 
        <cfoutput> 
        <p>Be sure to visit our #department# page.</p> 
        </cfoutput> 
        <!--- embedded instructions end here ---> 
    </body> 
</html>

Met de ingesloten instructies op deze pagina worden de volgende acties uitgevoerd:

Er wordt een variabele met de naam department gemaakt en hieraan wordt de tekenreeks "Sales" toegekend.
De waarde van de variabele, "Sales", wordt in de HTML-code ingevoegd.

De toepassingsserver retourneert de volgende pagina aan de webserver:

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <p>Be sure to visit our Sales page.</p> 
    </body> 
</html>

De webserver verzendt de pagina naar de browser die deze heeft aangevraagd en deze geeft de pagina als volgt weer:

Informatie over Trio Motors

Trio Motors is een toonaangevende automobielfabrikant.

Bezoek onze Sales-pagina.

Bij het kiezen van een scripttaal of op tags gebaseerde taal die u wilt gebruiken, bent u afhankelijk van de servertechnologie die beschikbaar is op de server. Dit zijn de populairste talen voor de servertechnologieën die worden ondersteund door Dreamweaver:

Servertechnologie	Taal
ColdFusion	ColdFusion Markup Language (CFML)
Active Server Pages (ASP)	VBScript JavaScript
PHP	PHP

Dreamweaver kan de scripts of tags aan de serverzijde maken die nodig zijn om uw pagina's aan de praat te krijgen. U kunt ze echter ook handmatig schrijven in de coderingsomgeving van Dreamweaver.

Webtoepassingsterminologie

In deze sectie vindt u een definitie van regelmatig gebruikte termen met betrekking tot webtoepassingen.

Een toepassingsserver

Software die een webserver helpt bij de verwerking van webpagina's die scripts of tags bevatten aan de serverzijde. Wanneer een dergelijke pagina bij de server wordt aangevraagd, geeft de webserver de pagina door aan de toepassingsserver om te worden verwerkt voordat de pagina naar de browser wordt gestuurd. Zie De werking van een webtoepassing voor meer informatie.

Veelgebruikte toepassingsservers zijn ColdFusion en PHP.

Een database

Een verzameling gegevens die in tabellen zijn opgeslagen. Elke rij van een tabel bestaat uit één record en elke kolom bestaat uit een veld in de record, zoals u in het volgende voorbeeld kunt zien.

Een databasestuurprogramma

Software die als een vertaler tussen een webtoepassing en een database fungeert. Gegevens in een database worden in een eigen indeling opgeslagen. Met een databasestuurprogramma kan de webtoepassing gegevens lezen en manipuleren die anders onleesbaar zouden zijn.

Een databasemanagementsysteem

(DBMS of databasesysteem) Software die wordt gebruikt om databases te maken en te manipuleren. Veelvoorkomende databasesystemen zijn Microsoft Access, Oracle 9i en MySQL.

Een databasequery

De bewerking die een recordset uit een database haalt. Een query bestaat uit zoekcriteria die worden uitgedrukt in een databasetaal die SQL wordt genoemd. De query kan bijvoorbeeld stellen dat alleen bepaalde kolommen of alleen bepaalde records in de recordset mogen worden opgenomen.

Een dynamische pagina

Een webpagina die door een toepassingsserver wordt aangepast voordat de pagina naar een browser wordt verzonden.

Een recordset

Een reeks gegevens die uit een of meer tabellen in een database worden gehaald, zoals u in het volgende voorbeeld kunt zien.

Een relationele database

Een database met meer dan één tabel waarbij de tabellen gemeenschappelijke gegevens hebben. De volgende database is relationeel omdat de twee tabellen de kolom DepartmentID gemeenschappelijk hebben.

Een servertechnologie

De technologie die een toepassingsserver gebruikt om dynamische pagina's in runtime te wijzigen.

De ontwikkelomgeving van Dreamweaver ondersteunt de volgende servertechnologieën:

Adobe® ColdFusion®
Microsoft Active Server Pages (ASP)
PHP: Hypertext Preprocessor (PHP)
U kunt ook de coderingsomgeving van Dreamweaver gebruiken om pagina's te ontwikkelen voor servertechnologieën die hier niet worden genoemd.

Een statische pagina

Een webpagina die niet door een toepassingsserver wordt gewijzigd voordat de pagina naar een browser wordt verzonden. Zie Statische webpagina's verwerken voor meer informatie.

Een webtoepassing

Een website die pagina's bevat met gedeeltelijk of geheel onbepaalde inhoud. De uiteindelijke inhoud van deze pagina's wordt pas bepaald wanneer een bezoeker een pagina opvraagt bij de webserver. Omdat de uiteindelijke inhoud van de pagina per verzoek kan verschillen, omdat deze afhankelijk is van de acties van de bezoeker, wordt dit type pagina een dynamische pagina genoemd.

Een webserver

Software die webpagina's verzendt als antwoord op aanvragen van webbrowsers. Een paginaverzoek wordt gegenereerd wanneer een bezoeker op een koppeling op een webpagina in de browser klikt, een bladwijzer in de browser selecteert of een URL in het tekstvak Adres van de browser invoert.

Populaire webservers zijn onder meer Microsoft Internet Information Server (IIS) en Apache HTTP Server.

Verwante informatie

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?