Inleiding - Doelstelling - Behoeftebeschrijving - Praktische uitwerkingen van webtechnologie - De UFSIA-BBQ-website iets verder uitgewerkt - Besluit
Na een algemene inleiding tot HTTP in een vorig hoofdstuk, zullen we dit protocol iets verder toelichten. Daarvoor nemen we zowel het informatieverzoek van de client aan de server, en het antwoord daarop even onder de loep.
Wanneer de clientbrowser een verzoek zendt naar de webserver, ziet dit verzoek er ongeveer uit als volgt (Homer, 1999, p. 49):
1/5/2002 10:03:30 Sent GET /bbq/main.asp?profiel=bedrijf
HTTP/1.1
Accept: application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
image/gif, image/x-xbitmap, image/jpeg, ...
...
Referer: http://extranet.ufsia.ac.be/bbq/default.asp
Cookie: ASPSESSIONIDGGQGGJFU=EJFLDEBBOODNEMJKIHAMNKBL
User-Agent: Mozilla/4.0 (compatible; MSIE5.0; WINDOWS 98)
Host: 146.175.51.86
...
De eerste regel specificeert naast het gevraagde document ook de request-methode (hier GET, met als Querystring profiel=bedrijf: FORM-tag). In de tweede regel vertelt de browser welke documenten het clientsysteem weet te verwerken, meerbepaald welke MIME-types het kan weergeven (Multipurpose Internet Mail Extensions (MIME)).
Daarnaast geeft de header bijkomende informatie over de referer, die vertelt welke pagina de oorsprong is van dit nieuwe verzoek, de User-agent, die informatie geeft over het type browser van de client, en het IP-adres.
In de Cookie-regel zendt de browser de variabelen mee die lokaal op het systeem opgeslagen waren in de cookie, horende bij het domein van de webapplicatie (Sessiemanagement).
1/5/2002 10:03:32 Received HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Content-type: text/html
Accept-Range: bytes
Content-length: 2934
Last-Modified: Wed 1 May 2002 10:03:32 GMT
Cookie: ASPSESSIONIDGGQGGJFU=EJFLDEBBOODNEMJKIHAMNKBL
De server reageert op een vergelijkbare manier. In de eerste regel geeft de server aan of het verzoek geslaagd is of niet. Na de declaratie van het HTTP-protocol vindt men de status-returncode. 200 OK wil zeggen dat het verzoek ingewilligd is.
Een belangrijke regel is de 'Content-type' definitie. Deze vertelt de browser(client)
welk type document (de zogenaamde MIME-types, zie Multipurpose
Internet Mail Extensions (MIME)) hij precies aangeleverd krijgt, zodat deze
gepast kan reageren. Zo zal deze desnoods andere applicaties oproepen om het
document weer te geven, zoals de Acrobat Reader (PDF-bestanden), MSWord, of
andere programma's.
Na de eigenlijke header volgt dan de precieze inhoud van het document, in dit
geval de HTML-code. De browser zal deze renderen en op het scherm afbeelden.
<HTML>
<HEAD>... sectie voor metagegevens, titel, definiëring javascriptfuncties
...</HEAD>
<BODY>... inhoud van de pagina...</BODY>
</HTML>
In plaats van de 200 OK statuscode terug te geven kan de HTTP-header echter vele andere codes terugzenden, elk met een eigen betekenis. Zo kan de server reageren met de boodschap dat deze pagina verhuisd is, niet meer gewijzigd sinds het laatste verzoek, niet toegankelijk met de huidige toegangsrechten, of met de opdracht een andere URL op te vragen (redirect), elk met een eigen (fout)code. De meest gekende uit dit rijtje is waarschijnlijk de 404: document not found...
Om de HTML-code te bekijken van een webpagina, zoals deze weergegeven wordt op de client, moet je niet veel moeite doen: het volstaat met de rechtermuistoets de broncode op te vragen. De aandachtige lezer beseft reeds dat deze code niet de code hoeft te zijn die de programmeur letterlijk heeft neergeschreven. Deze code is meestal het resultaat van een of andere verwerking op de server. In het geval van de BBQ-website, is deze code de output van de ASP-scripts ( VBScript).
Om een en ander te verduidelijken nemen we de html-code (licht gewijzigd en herschikt voor de duidelijkheid) van de hoofdpagina onder de loep, na het inloggen als student. Hoe deze pagina er op het scherm uitziet, laat de volgende afbeelding zien.
Zoals we reeds gezien hebben is HTML een 'markup'-taal, en bestaat een document uit verschillende elementen, die telkens begrensd zijn door een begin- en eindtag: <tag>inhoud van het element</tag>. Hierna volgt de code die verantwoordelijk is voor bovenstaand document.
<html>
Een geldig HTML-document bevat precies één root element dat alle andere omvat. Deze tag zorgt ervoor dat de browser het document-object (Document Object Model) kan samenstellen en dat het document kan weergegeven worden op het scherm. Deze HTML-tag zal aan het einde van het document ook weer gesloten worden. Vele browsers doen het overigens ook zonder deze tags,... (fouttolerante gedrag). Bij XML en XHTML is dit rootelement essentieel voor de geldigheid van het hele document, waarvan de structuur gedefinieerd werd in de een XML-schema (Wat is XML).
<head>
<title>www.ufsiabbq.com</title>
<meta name="description" content="De UFSIA-Afstudeer-BBQ:
de link tussen bedrijven en studenten, een exclusieve (pre)recruteringsactiviteit.">
<link rel="stylesheet" type="text/css" href="/bbq/standaard.css">
<SCRIPT SRC="/bbq/ssm.js" language="JavaScript1.2"></SCRIPT>
<SCRIPT LANGUAGE="Javascript">
<!--
window.status="www.ufsiabbq.com"
//-->
</SCRIPT>
</head>
In de kop van de pagina, wordt alle informatie geplaatst die niet direct zichtbaar zal zijn op het scherm.
<body>
Deze tag vertelt de browser alle HTML-elementen die hierop volgen, weer te geven op het scherm, en omvat dus de eigenlijke inhoud van de webpagina. Desalniettemin kunnen zich in de body nog scripts bevinden, die uiteraard niet zomaar weergegeven worden.
Met de HTML-tags wordt aan elk element een bepaalde betekenis gegeven, die gevolgen kan hebben voor de structuur en/of de opmaak ervan. Deze technologie is overigens vergelijkbaar met het 'opmaakprofiel' van MSWord. Zo betekent <H1 ALIGN="CENTER">Eerste Hoofdstuk</H1> eigenlijk niets meer dan 'Kop 1'. De browser zal de tekst automatisch groter afbeelden, terwijl de specificatie de tekst zal centreren.
Zo heeft elke browser een aantal typische reacties op elke HTML-tag. Zoals we reeds gezien hebben is het echter ook mogelijk aan elk van deze tags een eigen lay-out te koppelen aan de hand van de Cascading Style Sheets (Cascading Style Sheets (CSS)).
<h1>www.ufsiabbq.com</h1>
<h3>Welkom</h3>
<p><IMG align="right" alt="BBQ 2002" height="400"
src="images/bbq2002.jpg" width="280">Op de website van
'De Ufsia-afstudeer-BBQ'. Om gebruik te maken van de mogelijkheden van deze
site (inschrijven, je laten uitnodigen, ...) log je in met je <span class=extra>rolnummer</span>.
Is dit je eerste bezoek? Kies dan nu een paswoord om je gegevens te beschermen.
Alle studenten van de tweede cyclus TEW/HI(B), dus licenties en graadjaren,
kunnen inloggen!</p>
<BR>Wat kan je allemaal doen op deze website?<UL>
<LI>Inschrijven voor de <A href="bbq.asp">Ufsia-BBQ</a>
<LI>Je op de Ufsia-BBQ laten uitnodigen door <A href="links.asp">Bedrijven</a>
<LI>Als laatstejaar je CV invullen voor het <A href="cv.asp">CV-boek
2002</a>
<LI>Als laatstejaar je informatie invullen voor het <A href="fotboek.asp">Prisma-Fotoboek</A>
</UL>
<P>Wat je ook kan doen op deze site is een kijkje nemen in onze archieven:</P>
<UL>
<LI>Ons <A href="images/catalog/bbqarchief.asp">foto-archief</a>
van de BBQ 2001
<LI><A href="kanaalz.asp">Reportage KanaalZ</a>
<LI><A href="cv2001.asp">CV-boek 2001</a>
<LI>Archief <A href="bbq2001.asp">BBQ 2001</a>
<LI>Archief <A href="bbq2000.asp">BBQ 2000</a></LI>
</UL>
<SCRIPT LANGUAGE="JavaScript">
<!—
function controle(formulier){
...script dat controleert of de velden ingevuld zijn voor het formulier verzonden
wordt en hier voorlopig weggelaten wordt (JavaScript
en HTML)...
}
//-->
</SCRIPT>
<H3>Partners suggereren...</H3>
<P>Om van de BBQ een mega-event te kunnen maken, hebben we natuurlijk
een hele hoop bedrijfspartners nodig. Het zijn deze mensen die zullen deelnemen
aan de inviting-formule. Ken jij mensen of bedrijven die geïnteresseerd
zouden kunnen zijn? Wie weet word je er zelf door uitgenodigd? Laat het ons
weten:</P>
<CENTER>
HTML voorziet een zeer eenvoudige manier om tabellen op te maken. Het enige wat de programmeur moet doen is de inhoud van de tabel geven en de verschillende cellen aanduiden. De opmaak ervan wordt dan volledig door de browser gerealiseerd. Een voorbeeld maakt dit onmiddellijk duidelijk: <TABLE><TR><TH>Kop van de eerste kolom</TH><TH>Kop van de tweede colom</TH></TR><TR><TD>Inhoud van de eerste cel op nieuwe regel</TD><TD>Inhoud van de tweede cel</TD></TR></TABLE>.
Tabellen worden vaak gebruikt om enkele 'opmaaktrucjes' te verwezenlijken. Door de randen onzichtbaar te maken, ziet de gebruiker immers niet dat met tabellen gewerkt wordt, en kan men vaak eenvoudig tekst aliniëren (Login.asp).
Om enige interactiviteit mogelijk te maken, moet de gebruiker beschikken over een manier om informatie te kunnen invullen op een webpagina. Dit is waar het HTML-formulier ten tonele verschijnt.
</CENTER>
<P><font SIZE="-1">© Webmaster: <A href="contact.asp">Johan
De Belie</a></font></P>
</body>
</html>
Zoals reeds vermeld zijn de meeste browsers redelijk HTML-fouttolerant. De verschillende browsers reageren echter verschillende op 'spellingsfouten'. Zo hebben Netscape-browsers de neiging om zwaarder te tillen aan het weglaten van eindtags. Ook foute encapsulatie, wat wil zeggen dat de volgorde van de tags niet gerespecteerd wordt, ook wel nesting error genoemd (bijvoorbeeld <center><font color=yellow></center></font>), kan soms tot vreemde resultaten leiden.
HTML-tags zijn vooral geschikt voor het bepalen van de documentstructuur van een webpagina. In deze standaard werden zeer weinig bepalingen voor de lay-out gespecificeerd. De verschillende browserproducenten implementeerden verschillende extra tags in hun producten, zoals de <center>,<font>,<marquee>- tags, later gestandaardiseerd in de HTML 4-specificatie.
Een eerste oplossing werd gezocht in het omzetten van tekst naar afbeeldingen, zodat de webdesigner absoluut zeker was van de correcte weergave van zijn tekst. Een nadeel hierbij is natuurlijk dat afbeeldingen heel wat groter zijn dan tekst, en het inladen van een pagina aanzienlijk kunnen vertragen. Ook zullen hierdoor typische robot-functionaliteiten niet toegepast kunnen worden. (Bos, 1997, p.5)
Ook werd er vaak gebruik van tabellen om marges te verwezenlijken en het uitlijnen te vereenvoudigen. Dit helpt wel bij het opmaken van een webpagina, maar maakt de broncode er niet echt overzichtelijk door.
Oorspronkelijk,
in de negentigerjaren, had een webdesigner weinig impact op hoe hun pagina's
verschenen op het scherm van de gebruikers. Dankzij de HTML-tags konden ze de
structuur van hun pagina definiëren, en tekst in vet, cursief, of onderlijnd
plaatsen, maar meer was er niet bij. (Bos, 1997, p.56)
Met de komst van de stijlbladen werd het effectief mogelijk de lay-out van de pagina te gaan bepalen. Ook al is CSS geen alternatief voor PDF, en kunnen de verschillende browsers soms vreemd reageren op bepaalde CSS-code, het is zeker een stap in de goede richting. De structuurtags van HTML werden behouden, maar in dit apart document wordt aan elke tag een lay-out gekoppeld.
Cascading, aangezien binnen een stijlblad, alle elementen de karakteristieken van hun bovenliggende tags oververven. Zo zullen alle tags de eigenschappen van de <BODY>-tag overnemen, en eventueel bepaalde wijzigingen of extra aspecten implementeren.
In het ingekorte Stylesheet van de UFSIA-BBQ-site wordt een en ander duidelijk. De elementen krijgen hier dus hun specifieke opmaak, waar het body-element de meeste specificaties bevat. De andere elementen erven immers deze eigenschappen, zodat zij enkel de afwijkingen ten opzichte van het body-element moeten vermelden.
Naast elementen kunnen echter ook klassen gedefinieerd worden, die het mogelijk maken voor een zelfde element meerdere stijlen te definiëren. Zo zijn er meerdere tabelkoppen en tabelcellen gedefinieerd, die meer mogelijkheden bieden. In de HTML-code worden zij als volgt opgeroepen: <TH class="sub1"></TH> of <TD class="links"></TD>
Ook is het mogelijk klassen te definiëren zonder daar specifiek elementen aan te koppelen. De klasse 'extra' heeft zo als opmaakkenmerk 'vet' toegekend gekregen. Het oproepen gebeurt dan als volgt: <SPAN CLASS="extra">geaccentueerde tekst</SPAN>
In tegenstelling tot het 'span'-element, dat een 'inline'-element wordt genoemd, en kan gebruikt worden om enkele karakters een bepaalde opmaak te geven, definieert een 'div'-element hele alinea's, met eigen marges, positionering op de pagina. Het 'div'-element wordt ook wel een blokelement genoemd.
Na dit beknopte overzicht van CSS, volgt hierna een deel van het stijlblad van de UFSIA-BBQ-website. De meeste informatie wordt bij het BODY-element bepaald, aangezien de andere elementen hiervan zullen overerven. Op deze manier kunnen dus de afwijkingen ten opzichte van deze 'standaardstijl' bepaald worden.
Het gebruik van de verschillende klassen voor tabelkoppen wordt duidelijk bij het bekijken van de tags <TH> . Dankzij deze klassen zijn we in staat pagina's zoals statistieken.asp op het scherm weer te geven. Hier hebben deze verschillende klassen een belangrijke rol in het weergeven van een bepaalde hiërarchie.
BODY{
background-attachment : fixed;
background-color : black;
background-image : url(/bbq/images/ufsia.gif);
background-position : center;
background-repeat : no-repeat;
color : white;
font-family : Arial, sans-serif;
font-size : small;
margin: 10px 30px 20px 70px;
}
H1{
FONT-FAMILY: "Arial Black", sans-serif;
FONT-SIZE: xx-large;
TEXT-ALIGN: right
}
H2{
FONT-SIZE: x-large;
FONT-WEIGHT: 900;
TEXT-DECORATION: underline
}
H2.CENTER
{
TEXT-ALIGN: center
}
H3{
FONT-SIZE: large;
FONT-WEIGHT: 900;
TEXT-DECORATION: underline
}
H3.CENTER{
TEXT-ALIGN: center
}
H4
{
FONT-SIZE: medium;
FONT-WEIGHT: 900;
TEXT-DECORATION: underline
}
A {
font-weight : 600
}
A:link{
COLOR: silver;
TEXT-DECORATION: underline
}
TH{
BACKGROUND-COLOR: white;
COLOR: black
}
TH.sub1{
BACKGROUND-COLOR: white;
COLOR: gray
}
TH.sub2{
BACKGROUND-COLOR: gray;
COLOR: white
}
TD.links{
TEXT-ALIGN: left
}
TD.rechts{
TEXT-ALIGN: right
}
.extra{
font-weight : 600;
}
.mega{
font-weight : 600;
color : Red;
}
Schrijven over dynamische webapplicaties, zonder dé clientside-scriptingtaal uitvoeriger te behandelen, is ondenkbaar. In wat volgt probeer ik, zij het zeer beknopt, aan de hand van de BBQ-site toch de basistechnieken van Javascript te verduidelijken.
Alvorens de grondbeginselen te behandelen, merk ik alvast op dat, aangezien het hier om een clientside-taal gaat, het resultaat van de scripts niet altijd voorspelbaar is.
De werking van Javascript is gebaseerd op de objecten binnen de DOM-architectuur van een webbrowser. Deze objecten bestaan enerzijds uit properties, eigenschappen, statische variabelen en anderzijds uit een aantal methods, functies (Conallen, 1999, p. 29). Dit concept zal zo meteen verder uitgewerkt worden en aan de hand van enkele voorbeelden verduidelijkt worden. Wat opvalt bij het gebruik van objecten is ook de typische dot-notatie (bijvoorbeeld formulier.bedrijf.value.length) om deze methods en attributes te adresseren.
Als belangrijkste object, definieert de DOM-architectuur het document-object, dat naast een aantal eigen functies, alle andere objecten herbergt (Conallen, 1999, p. 32). Dit object zit op zijn beurt vervat in het window-object of browservenster, dat precies als container dient voor dit document en de eventueel andere objecten gekoppeld aan de webpagina (Binaire informatie)
Een en ander wordt zeker duidelijker bij het bekijken van onderstaande broncode, die een nieuw venster opent om een foto te laten zien van een van onze laatstejaars. Een nogal vreemde procedure, waarbij een nieuw document wordt geopend, zonder hiervoor gegevens van de server op te halen.
fotowindow=window.open('','venster','height=500,width=400');
fotowindow.document.open();
fotowindow.document.write("<HTML><HEAD><TITLE>"+nummer+"</title></HEAD><BODY
BGCOLOR="BLACK"><center><TABLE WIDTH="100%"
HEIGHT="100%"><TR><TD valign="middle" align="center">")
fotowindow.document.write('<IMG SRC="/bbq/cv/970141.jpg" width="354"
height="472"></TD></TR></TABLE></CENTER></BODY></HTML>');
fotowindow.document.close();
fotowindow.focus();
De eerste regel creëert een nieuw window-object, waarnaar verwezen zal worden met 'foto'. Waar normaal gezien de URL voor dit nieuwe venster opgegeven wordt, staat nu echter niets anders dan een lege string ''. Deze webpagina wordt dus gecreëerd door de client(browser), die ook de broncode zal schrijven aan de hand van de document.write()-methode.
Het leuke aan JavaScript is dat niet alle code onmiddellijk uitgevoerd moet worden. Javascript kan wachten op bepaalde gebeurtenissen op de clientmachine, en zo een 'voltooide' pagina toch nog dynamisch houden. Dit zijn de zogenaamde events. Enkele voorbeelden:
Aan elk van de verschillende objecten zijn verschillende 'events' gekoppeld, die elk hun eigen actie kunnen oproepen. Enkele voorbeelden:
Het is waarschijnlijk duidelijk geworden dat de vele geanimeerde menu's, vandaag te vinden op het net, hun werking aan deze concepten te danken hebben.
Javascript wordt over het algemeen tussen de HTML-code zelf geschreven, maar kan ook in een aparte pagina opgeslagen worden. Net zoals bij CSS maakt dit de HTML-code zelf overzichtelijker en profiteert men van het cachegedrag van de browser. Zo wordt bij de UFSIA-BBQ-site telkens hetzelfde script geladen om het snelmenu weer te geven: <SCRIPT SRC="/bbq/ssm.js" language="JavaScript1.2"></SCRIPT>.
Wanneer deze code in de HTML-code zelf wordt geschreven, wordt zij ook begrensd door de script-tags, met als parameter de taal waarin het script geschreven is (meestal JavaScript, maar eventueel ook VBScript), die de juiste scriptengine aan het werk zetten.
<SCRIPT LANGUAGE="JavaScript">
<!--
function controle(formulier){
if (formulier.bedrijf.value.length > 0 && formulier.email.value.length
> 0) return true
else window.alert('Vul beide velden in');
}
//-->
</SCRIPT>
Letterlijk vertaald gebeurt hier het volgende: bij haar aanroep wordt een argument aangereikt, terwijl de functie zal controleren of de lengte van de waarde van het attribuut 'bedrijf' van dit argument en de lengte van de waarde van het attribuut 'e-mail' van dit argument, groter is dan 0.
Wanneer we het aanroepen van deze functie erbij nemen: <FORM name="promo" method="post" action="promotie.asp" onsubmit="return controle(this);">, uit de code die hierboven reeds besproken werd, kunnen we dit omzetten in mensentaal: Bij het verzenden van de partnersuggestie, zal het script controleren of in het formulier de velden bedrijf en e-mail wel degelijk zijn ingevuld.
Wanneer zelfs CSS niet voldoet, zijn er natuurlijk nog andere mogelijkheden. Dankzij de Java Virtual Machine, die als plugin aan de browser gekoppeld kan worden, is het mogelijk eigen 'stukken software' uit te voeren op de client-pc, met een eigen interface. Ook de ActiveX-componenten bieden extra mogelijkheden. Voorwaarde telkens is dat de juiste plugin geïnstalleerd is.
Met
de komst van Flash, een product van Macromedia, werd het 'programmeren' van
mooie grafische interfaces kinderspel. Met behulp van een tijdlijn
en verschillende tekentools, kunnen heel wat effecten op een eenvoudige manier
'getekend' worden.
Deze 'half'-gecompileerde modules, zoals men ze ook wel durft noemen, worden door de Flash-plugin van de browser verder verwerkt en als 'object' in de pagina gekleefd. Dankzij het DOM kunnen deze bovendien verder met het HTML-document interageren. Met de volgende code werd de Flash-animatie in de welkomstpagina gegoten.
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH="100%" HEIGHT="100%"><PARAM NAME=movie VALUE="intro.swf"> <PARAM NAME=menu VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE="#000000"></OBJECT>
Deze code vertelt de browser dat het hier om een Flash-movie gaat, en zal de Flash-plugin aan het werk zetten. Wanneer de browser nog niet beschikt over deze plugin, kan hij deze downloaden via de vermelde URL.
Macromedia Flash heeft een aantal voordelen ten opzichte van andere grafische formaten. Flash maakt immers het gebruik van vectortekeningen mogelijk. Het voordeel van dit type formaat is dat bij uitvergroten ervan geen kwaliteitsverlies optreedt.
Daarnaast stelt flash de webdesigner in staat snel en eenvoudig animaties te ontwikkelen. Door eenvoudigweg de begin- en eindstand te definiëren berekent flash de tussenliggende frames.
Net zoals JavaScript in staat is de inhoud van een webpagina te manipuleren, is ActionScript in staat met de Flash-movie en de onderliggende movieclips om te gaan. Net als vele andere technieken, die ik reeds besproken heb, komen ook hier 'objecten' naar boven, samen met de dot-notatie (Object Oriented Programming (OOP)).
Een en ander wordt duidelijk bij het bekijken van de intro-flash van de BBQ-site, waar de gebruikers het profiel kiezen, waarmee ze door de site zullen navigeren. Binnen deze Flash-movie zijn er drie 'Movie Clip Symbols', die elk hun eigen tijdlijn hebben, en zelf een hele hoop 'Graphic Symbols' bevatten, die ze afwisselend laten verschijnen. Elk van deze movie clips bevat bovendien een 'onzichtbare' drukknop (in feite 3 instances van dezelfde drukknop), waar telkens de volgende actie aan gekoppeld is, zij het dan met wijziging van de parameter profiel (Screenshot Macromedia Flash).
on (release) {
getURL ("main.asp?profiel=vrij");
}
Naast de eigen gebruikersinterface die flash toelaat te ontwerpen, is het mogelijk, dankzij het Document Object Model, met de andere objecten op de webpagina te interageren. Zo laat ActionScript via een speciale functie toe een bepaalde JavaScript-actie te activeren.
Alvorens in te gaan op de kern van Active Server Pages kan het geen kwaad eerst de werking van een webserver, in het bijzonder in combinatie met de ASP-module te bekijken. Wanneer de webserver een aanvraag krijgt voor een webpagina met extensie asp, zal hij deze doorgeven aan de ASP-engine. (Homer, 1999, p.17)
In de eerste plaats zal deze controleren of er wel degelijk code aanwezig is die uitgevoerd moet worden, zoniet, kan de IIS de pagina onmiddellijk terugsturen naar de client. Indien dit wel het geval is, zal de ASP-engine deze code regel per regel verwerken, terwijl de zuivere HTML-code integraal wordt doorgegeven aan de IIS, die deze output terugzendt naar de client(browser).
ASP steunt op 6 intrinsieke objecten, die toelaten zowel te interageren met de client als de webserver zelf. (Homer, 1999, p.51)
Wanneer de server van de client een verzoek krijgt voor een pagina met extensie .asp, zal hij deze doorverwijzen naar de correcte script engine, die de broncode zal inlezen, en de stukken scripts verwerken. De output van deze scriptengine wordt meestal gebufferd, wat wil zeggen dat de webserver wacht met het verzenden van de uiteindelijk HTML-pagina tot de scriptengine zijn taak volbracht heeft. (zie verder)
Om een en ander te verduidelijken bekijken we de pagina main.asp, die we daarnet ook reeds behandeld hebben, eens vanuit de effectieve broncode, zoals deze op de server opgeslagen is en geïnterpreteerd wordt door de script-engine.
<%@ Language=VBScript%>
Deze eerste regel vertelt de ASP-engine welke interpreter hij moet gebruiken om het serverside script te interpreteren, telkens hij de speciale serverscript-tags (<%... script ... %>) tegenkomt. Men kan ook opteren om deze eerste regel weg te laten en bij elk scriptblok te specificeren om welk soort script het gaat, door gebruik te maken van de gekende script-tags (<script language="VBScript" RUNAT="server">... script ... </SCRIPT>). Meestal gebruikt men serverside VBScript, maar ook andere talen zijn mogelijk, zoals JScript, één van de JavaScript-dialecten.
Telkens wanneer de ASP-engine in de broncode de speciale serverscript-tags ontdekt, zal deze aan het werk gaan en de eventuele output naar de 'HTML-pagina in opmaak' zenden.
<%Response.Buffer=true
Voor de eerste maal wordt het Response-object gebruikt, waarvan de 'buffer'-eigenschap op true gezet wordt: de server kan op twee manieren informatie terugzenden naar de browser: met of zonder buffer. Wanneer deze uit staat, wil dit zeggen dat alle output rechtstreeks verzonden wordt, en dat de client de pagina opgebouwd ziet worden terwijl zij mogelijk nog verwerkt wordt op de server.
Standaard buffert de server echter de ASP-pagina's. Wanneer bijvoorbeeld midden op de pagina blijkt dat de gebruiker doorverwezen moet worden naar een andere pagina, is dit niet meer mogelijk zonder buffering. Dit doorverwijzen gebeurt immers in de HTTP-header (Server Response), die echter reeds verzonden is en niet meer gewijzigd kan worden.
' opvangen van het gekozen profiel en toewijzen aan de sessievariabele
"profiel"
' zowel post- (request.form) als get-methode (request.querystring) ondersteund.
if Request.Form("profiel") >< "" then Session("profiel")
= Request.Form("profiel") end if
if Request.QueryString("profiel") >< "" then Session("profiel")
= Request.Querystring("profiel") end if%>
Ook VBScript heeft de mogelijkheid de broncode te becommentariëren. Hiervoor wordt de enkele quote gebruikt. Alle tekst die op dezelfde regel volgt zal genegeerd worden door de script-engine.
De code die daarop volgt vangt de profielkeuze van de gebruiker op (student, bedrijf, pers, zie 2001-2002: www.ufsiabbq.com. De waarde van de variabele die via de post of get-methode (FORM-tag) naar dit script verzonden werd, wordt daarom opgevraagd via het Request-object en opgeslagen in het Sessie-object, zodat deze waarde voor alle volgende pagina's beschikbaar zou zijn.
<!-- #include virtual="/bbq/var.asp" -->
Dit is het zogenaamde include-commando en maakt het mogelijk vaak wederkerende code in zogenaamde include-files op te slaan. Deze regel kleeft de inhoud van deze file dan naadloos in het huidige bestand. Van deze technologie werd gretig gebruik gemaakt in de BBQ-website (bv inlogvenster, privacy-statement,... (De UFSIA-BBQ-Website iets verder uitgewerkt). In dit geval gaat het om een module die een aantal variabelen laadt.
<html>
<head>
<title>www.ufsiabbq.com</title>
<!-- #include virtual="/bbq/stijl.inc" -->
</head>
<body><h1>www.ufsiabbq.com</h1>
<h3>Welkom</h3>
Dit is de eerste effectieve output die naar de browser verzonden zal worden, en bestaat uit een stuk HTML-code, aangevuld met het bestand stijl.inc, die ook op elke pagina terugkomt en verantwoordelijk is voor het inladen van de CSS en het activeren van het snelmenu (Stijl.inc)
<%select case Session("profiel")
case "student"%>
<p><IMG align="right" alt="BBQ 2002" ...>Op
de website...
<%if not Session("rolnummer") >< "" then%>
Om gebruik te maken...</p>
<!-- #include virtual="/bbq/login.asp" -->
<%end if%>
Wat kan je allemaal doen op deze website?
<UL>...Opsomming van de mogelijkheden...</UL>
<P>Wat je ook kan doen op deze site is een kijkje nemen in onze archieven:</P>
<UL>...archieven...</UL>
<%case "vrij"%>
<ul><img SRC="images/bbq2002.jpg...>
...opsomming mogelijkheden...</ul>
<p>De Ufsia-BBQ is een exlusief...</p>
<p>Verbonden met deze BBQ is het <a href="cv.asp">CV-boek...</p>
<CENTER><OBJECT ...kanaalz flash...></OBJECT></CENTER>
<%case "bedrijf"%>
<ul><img SRC="images/bbq2002.jpg"...>
... opsomming mogelijkheden...</ul>
<P>U bent partner? Om studenten te selecteren... log in met uw code...</P>
<!-- #include virtual="/bbq/login.asp" -->
<p>De Ufsia-BBQ is een <a href="sponsoring.asp">exlusief
...</p>
<p>Verbonden met deze BBQ is het <a href="cv.asp">CV-boek...</P>
<p>... onze <a href="sponsoring.asp">sponsoringsvoorstellen...</a></p>
<CENTER><OBJECT ... kanaalz flash...></OBJECT></CENTER>
<%case "admin"%>
<P>U bent op de administratorpagina beland... </P>
<!-- #include virtual="/bbq/login.asp" -->
<%end select%>
<!-- #include virtual="/bbq/promo.asp" -->
<P><font SIZE="-1">© Webmaster: <A href="contact.asp">Johan
De Belie</a></font></P>
</body>
</html>
Wat hier meteen opvalt is de enorme vermenging van de ASP-scripts met de HTML-code.
Deze kunnen elkaar zonder problemen afwisselen. Het nadeel hierbij is echter
dat de code er niet onmiddellijk leesbaarder mee wordt en ze dreigt te vervallen
in 'spaghetticode'.
Dankzij de ASP-technieken en het gebruik van de Sessie-variabelen is het mogelijk
op eenzelfde pagina toch verschillende content te voorzien, met andere woorden
pagina's dynamisch te maken. Naargelang het profiel van de bezoeker, krijgt
deze zo een aangepaste pagina te zien.
In dit hoofdstuk behandelden we de specifieke technieken waarmee de BBQ-website werd verwezenlijkt.
Aan de clientzijde behandelden we de precieze werking van de HTML-code, in combinatie met JavaScript en Cascading StyleSheets. Ook zagen we hoe de Flash-intro precies vervaardigd en in de startpagina gegoten werd.
Aan de serverzijde steunt de werking van de webapplicatie op een Windows IIS, die in staat is de Active Server Pages te interpreteren en de uiteindelijke HTML-bestanden naar de client te zenden. Dankzij deze ASP-bestanden is het mogelijk echt dynamische pagina's te gebruiken, zodat voor de verschillende gebruikersprofielen (student, bedrijf, pers) geen aparte pagina's gemaakt moeten worden.
Naast gebruik van de populaire Request- en Response-objecten, werd overvloedig gebruik gemaakt van het Session-object om bij te houden wie precies in het systeem ingelogd is en enkele gegevens voor alle pagina's beschikbaar te maken.
Inleiding - Doelstelling - Behoeftebeschrijving - Praktische uitwerkingen van webtechnologie - De UFSIA-BBQ-website iets verder uitgewerkt - Besluit