Informatie over webtoepassingen

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

Over webtoepassingen

Een web-app is een website met pagina's waarvan de content gedeeltelijk of volledig onbepaald is. De uiteindelijke content van een pagina wordt alleen bepaald wanneer de bezoeker een pagina opvraagt bij de webserver.Omdat de uiteindelijke content van de pagina bij elke aanvraag verschilt op basis van de acties van de bezoeker, wordt dit soort pagina een dynamische pagina genoemd.

Webapplicaties zijn gebouwd om verschillende uitdagingen en problemen aan te pakken.Deze sectie beschrijft veelvoorkomende toepassingen voor webapplicaties en geeft een eenvoudig voorbeeld.

Veelvoorkomende toepassingen voor webtoepassingen

Webapplicaties hebben veel gebruiksmogelijkheden voor zowel sitebezoekers als ontwikkelaars, waaronder de volgende:

• Laat bezoekers snel en gemakkelijk informatie vinden op een contentrijke website.

  Dit soort web-app geeft bezoekers de mogelijkheid om content te zoeken, organiseren en navigeren zoals zij dat willen. Voorbeelden zijn bedrijfsintranetten, Microsoft MSDN (www.msdn.microsoft.com), en Amazon.com (www.amazon.com).

• Gegevens van sitebezoekers verzamelen, opslaan en analyseren.

  Vroeger werden gegevens die werden ingevoerd in HTML-formulieren verzonden als e-mailberichten naar medewerkers of CGI-applicaties voor verwerking. Een webapplicatie kan formuliergegevens direct opslaan in een database en ook de gegevens ophalen en webgebaseerde rapporten maken voor analyse.Voorbeelden zijn pagina's voor online bankieren, afrekenpagina's van webwinkels, enquêtes en feedbackformulieren voor gebruikers.

• Updatewebsites hebben inhoud die continu verandert.

  Een webapplicatie bevrijdt de webdesigner van het voortdurend bijwerken van de HTML van de site.Contentproviders zoals nieuwsredacteuren leveren content aan de web-app, en de web-app werkt de website automatisch bij. Voorbeelden zijn the Economist (www.economist.com) en CNN (www.cnn.com).

Voorbeeld van webtoepassing

Janet is een professionele webdesigner en ervaren Dreamweaver-gebruiker die verantwoordelijk is voor het onderhouden van het intranet en de internetsites van een middelgroot bedrijf met duizend medewerkers. Op een dag komt Chris van Human Resources naar haar toe met een probleem. HR beheert een fitnessprogramma voor werknemers waarbij werknemers punten krijgen voor elke gelopen, gefietste of hardgelopen kilometer.Elke medewerker moet zijn of haar maandelijkse kilometertotalen rapporteren in een e-mail aan Chris. Aan het eind van de maand verzamelt Chris alle e-mailberichten en kent medewerkers kleine geldprijzen toe op basis van hun punten.

Het probleem van Chris is dat het fitnessprogramma iets te succesvol is geworden. Zo veel medewerkers nemen nu deel dat Chris overspoeld wordt met e-mails aan het eind van elke maand. Chris vraagt Janet of er een webgebaseerde oplossing bestaat.

Janet stelt een intranet-gebaseerde webapplicatie voor die de volgende taken uitvoert:

• Medewerkers laten hun kilometerstand invoeren op een webpagina met 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.

• Geeft Chris met één klik toegang tot punttotalen aan het einde van elke maand

  Janet krijgt de applicatie voor lunchtijd aan de praat met Dreamweaver, dat de tools heeft die ze nodig heeft om dit soort applicatie snel en eenvoudig te bouwen.

De werking van een webtoepassing

Een webapplicatie is een verzameling van statische en dynamische webpagina's.Een statische webpagina is er een die niet verandert wanneer een websitebezoeker deze opvraagt: De webserver stuurt de pagina naar de opvragende webbrowser zonder deze te wijzigen. Daarentegen wordt een dynamische webpagina door de server gewijzigd voordat deze naar de opvragende browser wordt gestuurd. Het veranderlijke karakter van de pagina is de reden waarom deze dynamisch wordt genoemd.

Je kunt bijvoorbeeld een pagina ontwerpen om fitnessresultaten weer te geven, terwijl bepaalde informatie (zoals naam van werknemer en resultaten) wordt bepaald wanneer de pagina door een bepaalde werknemer wordt opgevraagd.

De volgende secties beschrijven hoe web-apps in meer detail werken.

Statische webpagina's verwerken

Een statische website bestaat uit een set gerelateerde HTML-pagina's en bestanden, gehost op een computer waarop een webserver draait.

Een webserver is software die webpagina's levert als reactie op verzoeken van webbrowsers. Een paginaaanvraag wordt gegenereerd wanneer een bezoeker op een koppeling op een webpagina klikt, een bladwijzer in een browser selecteert of een URL invoert in de adresbalk van een browser.

De uiteindelijke content van een statische webpagina wordt bepaald door de pagina- ontwerper en verandert niet wanneer de pagina wordt opgevraagd. Hier volgt een voorbeeld:

<html>

<head>

<title>Trio Motors Informatiepagina</title>

</head>

<body>

<h1>Over Trio Motors</h1>

<p>Trio Motors is een toonaangevende autofabrikant.</p>

    </body> 

</html>

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

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, vindt de pagina en stuurt deze naar de opvragende browser, zoals het volgende voorbeeld toont:

In het geval van web-apps zijn bepaalde regels code onbepaald wanneer de bezoeker de pagina opvraagt. Deze regels moeten worden bepaald door een mechanisme voordat de pagina naar de browser kan worden gestuurd. Het mechanisme wordt besproken in de volgende sectie.

Dynamische pagina's verwerken

Wanneer een webserver een aanvraag voor een statische webpagina ontvangt, stuurt de server de pagina rechtstreeks naar de aanvragende browser. Wanneer de webserver echter een aanvraag voor een dynamische pagina ontvangt, reageert deze anders: De server geeft de pagina door aan een speciaal stukje software dat verantwoordelijk is voor het voltooien van de pagina. Deze speciale software wordt een toepassingsserver genoemd.

De applicatieserver leest de code op de pagina, voltooit de pagina volgens de instructies in de code en verwijdert vervolgens de code van de pagina. Het resultaat is een statische pagina die de applicatieserver terugstuurt naar de webserver, die vervolgens de pagina naar de aanvragende browser stuurt. Het enige wat de browser krijgt wanneer de pagina aankomt is pure HTML. Hier volgt een weergave van het proces:

Toegang krijgen tot een database

Een applicatieserver stelt je in staat om te werken met server-side bronnen zoals databases. Een dynamische pagina kan bijvoorbeeld de applicatieserver de instructie geven om gegevens uit een database 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.

Het gebruik van een database om content op te slaan stelt je in staat om het ontwerp van je website te scheiden van de content die je aan websitebezoekers wilt tonen. In plaats van individuele HTML-bestanden te schrijven voor elke pagina, hoef je alleen maar een pagina—of sjabloon—te schrijven voor de verschillende soorten informatie die je wilt presenteren.Je kunt vervolgens content uploaden naar een database en de website die content laten ophalen als reactie op een gebruikersaanvraag. Je kunt ook informatie bijwerken in een enkele bron en die wijziging vervolgens doorvoeren in de hele website zonder elke pagina handmatig te hoeven bewerken. Je kunt Adobe Dreamweaver gebruiken om webformulieren te ontwerpen om gegevens uit de database in te voegen, bij te werken of te verwijderen.

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

Een applicatieserver kan niet rechtstreeks communiceren met een database omdat het gepatenteerde formaat van de database de gegevens onleesbaar maakt, op ongeveer dezelfde manier als een Microsoft Word-document dat in Kladblok of BBEdit wordt geopend onleesbaar kan zijn. De applicatieserver kan alleen communiceren met de database via de tussenkomst van een databasedriver: software die fungeert als tolk tussen de applicatieserver en de database.

Nadat de driver communicatie tot stand heeft gebracht, wordt de query uitgevoerd tegen de database en wordt een recordset aangemaakt. Een recordset is een set gegevens die uit een of meer tabellen in een database wordt gehaald. De recordset wordt teruggestuurd naar de applicatieserver, 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.

Het volgende voorbeeld toont het proces van het bevragen van een database en het terugsturen van gegevens naar de browser:

Je kunt bijna elke database gebruiken met je web-app, zolang de juiste databasedriver ervoor is geïnstalleerd op de server.

Als je van plan bent kleine goedkope applicaties te bouwen, kun je een bestandsgebaseerde database gebruiken, zoals een database die is gemaakt in Microsoft Access. Als je van plan bent robuuste bedrijfskritieke applicaties te bouwen, kun je een servergebaseerde database gebruiken, zoals een database die is gemaakt in Microsoft SQL Server, Oracle 9i of MySQL.

Als je database zich op een ander systeem bevindt dan je web server, zorg er dan voor dat je een snelle verbinding hebt tussen de twee systemen zodat je web-app snel en efficiënt 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: CFML-ondersteuning is verwijderd uit Dreamweaver en later.

<html>

<head>

<title>Trio Motors informatiepagina</title>

</head>

<body>

<h1>Over Trio Motors</h1>

<p>Trio Motors is een toonaangevende autofabrikant.</p>

<!--- ingesloten instructies beginnen hier --->

<cfset department="Verkoop">

<cfoutput>

<p>Bezoek zeker onze #department#-pagina.</p>

</cfoutput>

<!--- ingesloten instructies eindigen hier --->

    </body> 

</html>

De ingesloten instructies op deze pagina voeren de volgende acties uit:

De applicatieserver retourneert de volgende pagina naar de webserver:

<html>

<head>

<title>Trio Motors Informatiepagina</title>

</head>

<body>

<h1>Over Trio Motors</h1>

<p>Trio Motors is een toonaangevende autofabrikant.</p>

<p>Bezoek zeker onze verkooppagina.</p>

    </body> 

</html>

De webserver stuurt de pagina naar de aanvragende browser, die deze als volgt weergeeft:

Over Trio Motors

Trio Motors is een toonaangevende autofabrikant.

Bezoek zeker onze verkooppagina.

Je kiest een scripting- of tag-gebaseerde taal afhankelijk van de servertechnologie die beschikbaar is op je server.Dit zijn de populairste talen voor de servertechnologieën die worden ondersteund door Dreamweaver:

Dreamweaver kan de server-side scripts of tags maken die nodig zijn om je pagina's te laten werken, of je kunt ze handmatig schrijven in de Dreamweaver codeomgeving.

Webtoepassingsterminologie

Dit gedeelte definieert veelgebruikte termen die betrekking hebben op webapplicaties.

Software die een webserver helpt webpagina's te verwerken die server-side scripts of tags bevatten.Wanneer een dergelijke pagina wordt aangevraagd van de server, geeft de webserver de pagina door aan de applicatieserver voor verwerking voordat de pagina naar de browser wordt gestuurd.Zie Hoe een web app werkt voor meer informatie.

Veelgebruikte applicatieservers zijn ColdFusion en PHP.

Een verzameling gegevens die zijn opgeslagen in tabellen.Elke rij van een tabel vormt één record en elke kolom vormt een veld in het record, zoals weergegeven in het volgende voorbeeld:

Software die fungeert als tolk tussen een webapplicatie en een database.Gegevens in een database zijn opgeslagen in een eigen formaat. Een databasestuurprogramma stelt de webapplicatie in staat om gegevens te lezen en te bewerken die anders onleesbaar zouden zijn.

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

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

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

Een set gegevens die uit een of meer tabellen in een database zijn geëxtraheerd, zoals in het volgende voorbeeld:

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

De technologie die een applicatieserver gebruikt om dynamische pagina's tijdens runtime te wijzigen.

De Dreamweaver ontwikkelingsomgeving ondersteunt de volgende servertechnologieën:

• Adobe® ColdFusion®

• Microsoft Active Server Pages (ASP)

• PHP: Hypertext Preprocessor (PHP)

  Je kunt ook de Dreamweaver-coderingsomgeving gebruiken om pagina's te ontwikkelen voor andere servertechnologieën die niet worden vermeld.

Een webpagina die niet wordt gewijzigd door een applicatieserver voordat de pagina naar een browser wordt verzonden.Voor meer informatie zie Statische webpagina's verwerken.

Een website die pagina's bevat met gedeeltelijk of volledig onbepaalde content.De uiteindelijke content van deze pagina's wordt alleen bepaald wanneer een bezoeker een pagina opvraagt van de webserver.Omdat de uiteindelijke content van de pagina varieert per aanvraag op basis van de acties van de bezoeker, wordt dit type pagina een dynamische pagina genoemd.

Software die webpagina's verstuurt als reactie op verzoeken van webbrowsers.Een paginaverzoek wordt gegenereerd wanneer een bezoeker op een link klikt op een webpagina in de browser, een bladwijzer selecteert in de browser of een URL invoert in het adrestekstvak van de browser.

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

Verwante informatie

• Beginnersgids voor databases
• Een toepassingsserver kiezen