Het internet ondersteunt meerdere protocollen voor gegevensoverdracht.
Het “
Transfer Protocol” (FTP) voorziet in een
constante verbinding. Die verbinding wordt beëindigd als er zich
een fout voordoet bij de transfer, als er een time-out optreedt op de
server of als de gebruiker de verbinding verbreekt. Men noemt dit een state-maintaining-verbinding.
Het http-protocol dat door webbrowsers wordt gebruikt
is “stateless”. Als u in de adresbalk van uw browser
een URL van een website opgeeft, stuurt de browser een aanvraag naar de
server. Als de browser de opgehaalde bestanden (HTML-pagina’s, foto’s,
swf-bestanden, Java-applets) ontvangen heeft, verbreekt de server de
verbinding. Telkenmale de surfer op een hyperlink naar een nieuw
bestand klikt, wordt er opnieuw een verbinding aangemaakt.
Webontwikkelaars gebruiken FTP-programma’s voor het doorsturen van
bestanden naar hun webruimte op een webserver.
Via een gebruikersnaam en wachtwoord krijgen ze toegang tot de
bestanden op de server. Zo’n programma toont een lijst van de bestanden
op de server en een lijst met de lokale bestanden. Via eenvoudige “drag
and drop”-mogelijkheden kan je bestanden tussen beide verplaatsen. Men
spreekt van “uploaden” bij het doorsturen van bestanden naar de server
en van “downloaden” in het geval van het binnenhalen van bestanden naar
de
clientcomputer.
Naast http is bij de gewone internetgebruiker vooral het SMTP -
of
simple mail transfer protocol in gebruik
Browsers Internet Explorer is momenteel de meest
gebruikte browser doordat hij is ‘ingebakken’ in het
Windowsbesturingssysteem. Jarenlang deed Internet Explorer een
nek-aan-nekrace met Netscape, maar die strijd is in
het nadeel van die laatste beslecht. Mozilla is
de opensource-variant van Netscape. Daarnaast wint ook Opera aan
belang. Op KDE-Linuxdesktops zwaait Konqueror
de plak. Apple bracht recentelijk de browser Safari
op de markt, gebaseerd op de Konquerorbroncode.
Minder bekend: de tekstgebaseerde browser Lynx, Omniweb…
Het meest gebruikte internetprotocol is momenteel zonder twijfel
het
HyperText Transfer Protocol, kortweg HTTP. Browsers zoals Netscape,
Konqueror of Internet Explorer maken gebruik van het HTTP-protocol. Dit
is de manier waarop ‘jan en alleman’ het internet ook kent: het
bezoeken van websites via browsers.
Webpagina’s zijn opgemaakt in HTML hetzij “hypertext
markup language”, een basisopmaaktaal die enkel beschrijft hoe
een pagina er moet uitzien. Afbeeldingen, applets en dies meer, worden
niet in het bestand opgenomen, maar gelinkt. De term “hypertext”
verwijst naar de mogelijkheid om “hyperlinks” op te nemen waardoor de
HTML een soort van “metataal” wordt met verwijzingen naar
andere teksten of bronnen.
Voor het ontwerpen van HTML-pagina’s kan je gebruik maken van een
standaard teksteditor zoals Windows Notepad. HTML-pagina’s bevatten
platte ASCII- of UNICODE-tekst.
M.a.w. als je HTML-codes intikt in een tekstverwerker zoals Wordpad, MS
Word of Corel
WordPerfect, dan zal die naast HTML ook RichText-opmaakcodes
wegschrijven.
Daarom zijn de meeste moderne tekstverwerkers ook voorzien van een
mogelijkheid om opgemaakte tekstdocumenten te converteren naar HTML.
ASP is de servertoepas sing van de Active Desktop, waardoor server en
client tot een dynamisch geheel moesten verweven worden door
ActiveX-toepassingen.
De meeste webdesigners maken echter gebruik van een WYSIWYG-editor
zoals Macromedia
Dreamweaver of Adobe
Golive waarin ze naast een codevenster voor het ingeven van HTML,
Javascript, Vbscript… ook beschikken over een WYSIWYG-venster (What you
see is what you get) waarin ze hun pagina’s net zoals in een
tekstverwerker kunnen samenstellen.
In het oog houden: NVU
(een opensource afgeleide van Netscape Composer)
HTML-editors: FirstPage
2000 met een uitgebreide set Javascripts en DHTML-templates
Grotere websites hebben nood aan een eenvoudiger manier om informatie
toe te voegen, aan te passen en/of te verwijderen. Daarom is zeer snel
de nood ontstaan om websites te kunnen koppelen aan databanken.
HTML voorziet echter niet in die mogelijkheid. Daarom zijn er doorheen
de jaren zowel commerciële als ‘gratis’ toepassingen ontwikkeld
voor
databankgestuurde websites.
Meest gebruikt is zonder twijfel PHP in een
combinatie met een Linux- of UNIX-server en een MySQLdatabank.
Grotere toepassingen maken gebruik van een Oracle-databank en
of CGI-toepassingen geschreven in C of Perl.
Ook Microsoft kon niet te na blijven en ontwikkelde met die doeleinden
voor ogen ASP oftewel Active Server Pages.
Tal van PHP- en ASP-sites beschikken over een systeem van
content management (CMS). De mogelijkheid tot het online
wijzigen, invoeren en verwijderen van gegevens op de website biedt
immers heel wat voordelen. Daar de klant zijn eigen site op vrij
eenvoudige wijze kan beheren, bespaart dit niet alleen tijd, maar op
langere termijn ook geld. Bovendien krijgt de webontwikkelaar meer
ademruimte om te werken aan nieuwe projecten én een werkend
content management-systeem kan heel snel geïmplementeerd worden op
een andere site.
In de inleiding hebben we het al kort over HTTP gehad. In dit hoofdstuk
zullen we het wat verder uitdiepen.
Protocollen zijn regels die een standaard vormen voor de communicatie
tussen computers. HTTP is het protocol voor gegevenstransport over het
world wide web. Servers en browsers gebruiken http om hypermedia
(webdocumenten) te vervoeren via internet. In feite zijn het de
HTTP-servers en clientbrowsers die het world wide web vormen.
We moeten dan ook goed opletten welke terminologie we gebruiken. Het
WWW is een onderdeel van het internet maar niet het internet zelf. Het
WWW werd begin jaren '90 ontwikkeld door Tim Berners Lee en Robert
Caillou. Zij zijn de grondleggers van de meest populaire
computertoepassing tot nog toe: het web. Bedoeling was een vlotte
gegevensuitwisseling tussen diverse systemen, platformen en computers
op het internet mogelijk te maken.
Onder internet verstaan we aldus de wereldwijde verzameling van servers
en clients die via netwerken tot een reusachtig grid zijn verbonden. Op
het internet zijn diverse protocollen gangbaar:
Protocol
poortnummer
hypertext transfer protocol (http)
80
file transfer protocol (ftp)
21
simple mail transfer protocol (smtp)
25
trivial file transfer protocol (tftp)
69
gopher protocol
70
telnet protocol
23
finger protocol
79
Daarnaast kennen we nog:
peer to peer
IRC
enz.
De basis van dit alles wordt gevormd door TCP/IP (transfer control
protocol en internet protocol).
Om tot een goed inzicht te komen in de werking van het WWW is een
basiskennis van HTTP onontbeerlijk. Zoals hierboven reeds vermeld, is
http een leveringsmechanisme voor afbeeldingen, grafische bestanden,
video, geluid, hypertekst en andere gegevens op het web. De
ontwikkelaars van het web realiseerden zich niet dat HTTP de
ruggengraat zou gaan vormen van een groot aantal commerciële
toepassingen. Om aan de groeiende vraag naar veiligheidsstandaarden
tegemoet te komen, ontwikkelde Enterprise Integration Technologies in
1994 het Secure Hyptertext Transfer Protocol (SHTTP).
Niettemin is HTTP nog steeds het standaardprotocol van het web.
Als je over het web surft, wisselt uw browser berichten uit met
webservers door middel van HTTP. Elke keer als u op een hyperlink klikt
in een webdocument om van de ene bron naar de andere te gaan, gebruikt
uw browser HTTP om toegang te krijgen tot de server waarop de bron zich
bevindt die u wilt ophalen.
Als u dus op een hyperlink klikt, gebruikt de browser de URL
van
de koppeling om de server ervan op te zoeken.
De server ontvangt de aanvraag, zoekt het document en verstuurt
het naar de browser
De server (de host van de URL, dus niet uw internetprovider!)
verbreekt de verbinding
Technische versie:
Clientbrowser verstuurt de aanvraag voor een
document naar de server waarop het document gehost is:
De vraag bestaat uit 3 delen: de http-methode (hierover later meer), de
URL van het document, de http-versie: GET /default.asp HTTP/1.1
De browser verstuurt bijkomende informatie
(header) over zichzelf (kan uitgeschakeld worden in sommige browsers)
vb. het browsertype, het besturingssysteem, de bestandtypes die de
browser kan weergeven... User-Agent: Mozilla:4.05(WinNT; I)
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
De server reageert daarop met een http-header die de volgende
informatie bevat: de http-versie, de statuscode en een bevestiging van
ontvangst HTTP/1.1 200 OK
Vervolgens stuurt de server headerinformatie over zichzelf
Een windowsserver: HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Date: Tue, 02 Mar 2004 20:13:08 GMT
X-Powered-By: ASP.NET
Connection: Keep-Alive
Content-Length: 3945
Content-Type: text/html
Set-Cookie: ASPSESSIONIDQQQQSATT=KLFDCPHBMOHFFAHNMMIFOBHB; path=/
Cache-control: private
Een Unixserver: HTTP/1.1 200 OK
Date: Tue, 02 Mar 2004 20:14:13 GMT
Server: Apache/1.3.29 (Unix) mod_gzip/1.3.26.1a mod_perl/1.28
SLASH_LOG_DATA: shtml
X-Powered-By: Slash 2.003000
X-Fry: No, no, I was just picking my nose.
Connection: close
Content-Type: text/html; charset=iso-8859-1
Als het verzoek van de client succesvol was, verstuurt de
server
de gevraagde data naar de client.
De server reageert niet altijd succesvol op de request van de client
vb. als de server gecrasht is, als het document niet meer op de server
staat, als de site verhuisd is... Dan stuurt de server een andere
statuscode die in de browser wordt weergegeven met een foutmelding.
The page cannot be found
The page
you are looking for might have been removed, had its name changed, or
is temporarily unavailable.
Please try the following:
If you typed the page address in the Address bar,
make sure that it is spelled correctly.
Open the
www.ardeco.be
home
page, and then
look for links to the information you want.
Een overzicht van alle statuscodes: http://www.december.com/html/spec/httpstat.html
Op Apacheservers (Unix, Linux) kan je de foutpagina's ondervangen met
je eigen foutpagina's. De instructies voor die "custom error
pages" kan je opnemen in het bestand ".htaccess"
in de rootmap van je website. Op Windowsservers is dit ook mogelijk
mits enige aanpassing in het bestand "global.asa" op
de server.
Een enkele verbinding van request tot en met antwoordpaar noemen we een
http-transactie.
2.2.2 MIME voor het verzenden van multimedia via het web ^
Bij het ontstaan van het web was het enkel mogelijk om tekstgegevens
door te geven. Er was geen standaard voor het uitwisselen van
multimedia. Bovendien konden enkel teksten die opgemaakt waren in
VS-ASCII worden doorgestuurd.
Multipurpose Internet Mail Extensions (MIME) is een technische
specificatie voor de overdracht van multimediabestanden (afbeeldingen,
geluid, tekst, video...) via internetmail. Een MIME-bericht bevat 2
onderdelen:
een header met informatie over het bestand dat volgt:
Bestandstype
Subtype (voorbeelden)
Application (toepassing)
msword, wordperfect, pdf...
Audio (geluid)
aiff, x-pn-realaudio
Image (afbeelding)
jpeg, tiff, gif, png...
Message (bericht)
RFC822
Multipart
digest, form-data, header-set, mixed
Text
HTML, iuls, plain, richtext, tab-separated-values
Video
avi, mpeg, quicktime
Voorbeeld van MIME-header: Content-type: application/msword
Het eigenlijke bestand (entity body)
Zoals je hogerop hebt kunnen lezen, stuurt de client in zijn header een
overzicht mee van de MIME-indelingen die door de browser kunnen
weergegeven worden. Als de client de ontvangen gegevens niet kan
weergeven, dan kan hij eventueel een insteekmodule (plugin) downloaden
waarmee de inhoud van het document weergegeven kan worden.
vb. Macromedia Flash-plugin, Macromedia Shockwave-plugin, SVG-viewer,
VRML-viewer...
In tegenstelling tot FTP (zie inleiding) is HTTP statusloos d.w.z.
dat er voor elke URL die u aanvraagt via de adresbalk van uw browser
een verbinding dient gemaakt de worden. Eens de server het gevraagde
bestand heeft doorgestuurd, verbreekt de server de verbinding met de
respectievelijke browser. HTTP gebruikt dus een TCP/IP-verbinding die
slechts één transactie lang open blijft.
Als de browser de webpagina of het html-bestand ontvangt, moet de
pagina gelezen en weergegeven worden. Dit proces noemen we het "parsen"
of "renderen" van het document.
Netscape en Mozilla gebruiken hiervoor de Gecko-engine,
Konqueror
en Safari de KTML-engine.
Bij de parsing komt de browser verwijzingen naar andere bestanden
(zoals afbeeldingen enz.) in het bestand tegen. In de eerste
HTTP-versies moest ook hier telkens een nieuwe verbinding met de
hostserver worden aangemaakt wat steeds leidde tot vertraging bij het
aanleveren en weergeven van de gegevens op de clientbrowser. Wilde men
dit vermijden dan moest de browser in zijn "header" de vraag
"Connection: Keep Alive" sturen naar de server. Vanaf HTTP 1.1 blijft
de verbinding echter standaard open tot ook alle gelinkte bestanden
zijn binnengehaald. Pas daarna verbreekt de browser of de server de
verbinding.
Voordelen: http kan meerdere 'gelijktijdige' aanvragen van
clienten
verwerken want de transactie met die ene client is afgesloten.
De webprogrammeurs moeten allerlei kunstgrepen uitvoeren om
informatie van de clients te bewaren (vb. ingevulde gegevens in een
webformulier)
Ze maken gebruik van sessies en cookies
om gegevens van clients te bewaren.
Controleer de request die uw browser verstuurt naar de door u ingegeven
URL: http://web-sniffer.net/
In het bovenstaande voorbeeld gebruikten we de HTTP-methode
GET. Dat is de standaardmethode die een browser gebruikt bij
het opvragen van een URL of een bestand. De server reageert met de statuscode,
de headers van de MIME-berichten en de gevraagde gegevens.
Met de methode HEAD vragen we enkel de
HEADER van een webdocument op, dus niet de ENTITY BODY. Dit is
zinvol als we informatie willen over de aanmaakdatum, het bestandstype
of de grootte van het webdocument, het servertype...
De methode POST richt zich op een serverprogramma
vb. een CGI-script, een ASP- of PHP-pagina... die dan bijvoorbeeld
gegevens doorstuurt om toe te voegen
aan een databank.
"Information from a form using the GET method is appended onto the end
of the action URI being requested. Your CGI program will receive the
encoded form input in the environment variable QUERY_STRING. The GET
method is used to ask for a specific document - when you click on a
hyperlink, GET is being used. GET should probably be used when a URL
access will not change the state of a database (by, for example, adding
or deleting information) and POST should be used when an access will
cause a change. Many database searches have no visible side-effects and
make ideal applications of query forms using GET. The semantics of the
GET method changes to a "conditional GET" if the request message
includes an If-Modified-Since header field. A conditional GET method
requests that the identified resource be transferred only if it has
been modified since the date given by the If-Modified-Since header. "
(Bron: http://www.wdvl.com/Internet/Protocols/HTTP/Request.html)
De query of de
zoekopdracht die de client meestuurt in de URL is opgesteld in het URL-encoded-format.
vb. http://www.computerkit.be/zoekvind.asp?keyword=mac
http://www.google.be/search?q=vch&ie=UTF-8&oe=UTF-8&hl=nl&meta=
http://www.aop.be/apps/ViewImg/View_Photo.asp?photoFile=products.asp&photoName=../../img_upload/conferentie/Artifort_Bridge-Tulip.jpg&Cat=conferentie&SortBy=fileName&daysOld=-1&searchText=&Page=1
Zoals hierboven reeds vermeld, is de query in het zoekveld achter de
URL opgesteld in het URL-encoded-format. Maar uiteindelijk geldt dat
ook voor de ganse URL.
Let er dus bij de naamgeving van webdocumenten steeds op dat u geen
spaties of vreemde tekens gebruikt. In URL-encoded-format worden
spaties bijvoorbeeld vervangen door %20.
Webpagina’s zijn opgemaakt in HTML hetzij “hypertext
markup language”, een basisopmaaktaal die enkel beschrijft hoe
een pagina er moet uitzien. Afbeeldingen, applets en dies meer, worden
niet in het bestand opgenomen, maar gelinkt. De term “hypertext”
verwijst naar de mogelijkheid om “hyperlinks” op te nemen waardoor de
HTML een soort van “metataal” wordt met verwijzingen naar
andere teksten of bronnen.
Voorbeeld van een html-pagina
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Titel van de pagina</title>
</head>
<body>
mijn tekst
<br>
<b>vette tekst</b>
<br>
<i>schuingedrukte tekst</i>
<br>
<b><i>Schuingedrukte en vette tekst</i></b>
<br>
<i><b>Schuingedrukte en vette tekst</b></i>
<br>
<br>
<img src="mijnafbeelding.jpg" alt="mooie foto" width=100
height=150>
</body>
</html>
Selecteer en kopieer de bovenstaande tekst in een leeg
kladblokdocument en sla het op in HTML-formaat. Bekijk de uitvoer in
een browser.
In de headsectie van het document wordt meta-informatie over het
document weggeschreven (keywords, author, title, description…) waardoor
zoekrobots of databases makkelijk een bepaalde pagina of website kunnen
vinden.
De eigenlijke opmaak van de webpagina wordt weggeschreven in de “body”
van het html-document tussen te begin- en eindtags <body> en
</body>.
Ook opmaakcodes als vetgedrukt en schuingedrukt staan tussen een begin-
en eindtag.
Vetgedrukt of “bold” (<b>...</b>) <b>vette tekst</b>
Schuingedrukt of italic <i>schuingedrukte tekst</i>
Willen we twee opmaakkenmerken m eegeven, dan moeten we tags
embedden of insluiten. Zoals u merkt, kan dat op twee manieren: <b><i>Schuingedrukte en vette
tekst</i></b> <i><b>Schuingedrukte en vette
tekst</b></i>
Browsers interpreteren foutieve html-codes vaak toch op de
juiste manier. Ook de onderstaande foutieve code zal bijvoorbeeld toch
op de juiste manier worden weergegeven. <i><b>Schuingedrukte en vette
tekst</i></b>
HTML is een afgeleide en vereenvoudigde versie van SGML
(standard generalized markup language) dat de opmaak van
documenten beschrijft. Meer informatie en een uitgebreide handleiding
over HTML vindt u op http://www.handleidinghtml.nl/. De specificaties
van HTML zijn opgesteld door het W3C (het World Wide
Web Consortium), een organisatie van onafhankelijken en
vertegenwoordigers uit softwarefirma's. Momenteel zit HTML aan versie 4
en de taal zal en kan niet meer verder ontwikkeld worden. Wat is
hiervan de oorzaak?
Het grote nadeel van HTML is dat het opmaak en inhoud door elkaar
haalt. De langverwachte opvolger XML moet dit euvel verhelpen. Inhoud
en opmaak worden over verschillende documenten gescheiden.
Bijvoorbeeld: het XML-document (extended markup language)
bevat de inhoud, een XSL-bestand bevat de opmaakgegevens zoals gekozen
lettertype, achtergrondkleur enz. Een aanpassing aan de style sheet
(=stijlsjabloon) zal de lay-out van alle gekoppelde pagina's meteen
wijzigen zonder dat we daarvoor aan de inhoud van de pagina's hoeven te
raken.
(XML maakt het mogelijk dat een gebruiker zijn eigen tags formuleert. XSL,
een bestand waarin de opmaak van de verschillende onderdelen van een
webpagina wordt weggeschreven.)
Voorlopig bestaat er een tussenoplossing: XHTML werd ontwikkeld als
overgang tussen HTML en XML. XHTML hanteert een veel strengere syntaxis.
Het dient gezegd dat ook binnen klassieke HTML reeds gebruik kan
gemaakt worden van stijlsjablonen in de vorm van CSS (Cascading Style
Sheet).
Een overzicht van alle HTML-tags vindt u op http://www.handleidinghtml.nl.
In de headsectie van een HTML-document kan je naast de titel ook
METADATA opnemen. Dat zijn paginaoverschrijdende tags die bijvoorbeeld
door zoekrobots worden gelezen bij het cachen of bezoeken van uw site.
Wilt u op uw website de juiste bezoekers krijgen en uiteraard ook veel
bezoekers, dan is een weloverwogen keuze van de metadata van zeer groot
belang.
Klassiek raadt men webontwikkelaars aan om vooral voor de nodige
keywords te zorgen. Door de talloze misbreuken op dat vlak, zijn er nog
maar weinig zoekrobots die met de keywords rekening houden. Google
bijvoorbeeld list wel de METADATA onder DESCRIPTION, naast de
alt-attributen bij afbeeldingen en de tekst van de pagina zelf.
Niet alle zoekrobots gaan op dezelfde manier tewerk. Bovendien
veranderen de spiders ook vaak hun zoekalgoritme zodat misleiding
eerder moeilijk is.
Een groep ontwikkelaars met de welluidende naam "Dublin Core" hebben
specificaties ontwikkeld wat betreft METATAGS. Hun richtlijnen zijn
goedgekeurd door het W3C
Zoekrobots zijn moeilijk te misleiden. Het eindeloos herhalen van
zoektermen in commentaarregels of metatags is niet meer zinvol. De
meeste zoekrobots negeren die informatie
en webmasters die daarin iets te ver gaan, besparen zich beter de
moeite. Vaak worden zulke pagina's gewoon genegeerd en zelfs niet
gelist.
Zoekrobots als Google houden over het algemeen zelfs weinig rekening
met de metatags "keywords". De Googlebot slaat vooral de titel van de
webpagina op en de informatie die in het attribuut "alt" van een
afbeeldingstag is opgeslagen. Het verbergen van "keywords" in "alts" is
dus wel -voorlopig dan toch nog- zinvol.
*In het attribuut "alt" kan de webmaster een
alternatieve slagzin noteren die moet getoond worden als de afbeelding
om een of andere reden niet kan weergegeven worden.
Internet Explorer toont die informatie ook als tooltiptekst als je met
de muis over de afbeelding beweegt. Andere browsers doen dit niet. Wil
je ook daar het zelfde effect bereiken, dan kan je best ook het
attribuut "title" toevoegen.
Last but not least: spiders zijn allergisch voor pagina's die
maandenlang ongewijzigd blijven.
Zoekrobots houden geen rekening met de specifieke eisen van de
webmaster. Zij listen vaak zonder meer de bestanden in de rootmap van
je website. Ook andere MIME-types als HTML worden gelist. Google
bijvoorbeeld toont ook Worddocumenten, PDF's, WordPerfectdocumenten,
Powerpointbestanden enz. en biedt daar vaak zelfs een HTML-versie van
aan. Denk dus niet dat je zulke bestanden veilig kan afsluiten van de
surfer.
Toch bestaat er een manier om spiderbots doelbewust de toegang tot
bepaalde mappen of bestanden te verhinderen. Plaats in de rootmap van
je site het bestand "robots.txt". De meeste spiderbots houden rekening
met de "toegangsrechten" die je hierin opneemt.
Met de onderstaande regels geef je alle robots het recht om alle
bestanden op je website te listen. User-agent: *
Disallow:
De onderstaande regels sluiten alle robots overal van uit: User-agent: *
Disallow: /
Met de onderstaande regels sluit je alle robots uit van de mappen
"images" en "cgi/bin": User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
Je kan ook verhinderen dat een specifieke robot je site kan listen: User-agent: Roverdog
Disallow: /
In het onderstaande voorbeeld verhinderen we de googlebot het
bestand cheese.htm op te nemen in zijn listing: User-agent: googlebot
Disallow: cheese.htm
Bovendien houden ze geen rekening met framespagina's. En dit is soms
erg problematisch. Tal van sites slaan met behulp van Javascript
informatie over de gebruiker tijdelijk op in een bovenliggend frame van
een webpagina. Doordat zoekmachines standaard niet noodzakelijk het
totale frame listen. De bezoekers komen via de zoekmachine op een enkel
frame terecht waardoor het Javascript niet meer functioneert.
Een voorbeeld:
- De pagina "index.html" bestaat uit twee frames d.w.z. twee
afzonderlijke webpagina's:
top.html - deze pagina is slechts 1 pixel hoog en wordt door de
surfer niet opgemerkt. Hierin wordt een lijst van de producten bewaard
die de surfer in zijn online winkelwagentje heeft opgeslagen
winkel.html - deze pagina krijgt de surfer te zien. Hierbinnen
kan de bezoeker zijn producten kiezen
Google list enkel "winkel.html", met het gekende gevolg.
Voor dit veelvoorkomend probleem biedt Javascript een oplossing:
<script language="JavaScript">
<!--
if (top.location==self.location){
top.location.href="index.html";
}
//-->
</script>
Trefwoorden zijn niet alles. "Zoekrobots trekken tegenwoordig
ook de kaart van de semantiek (betekenisleer). Concreet betekent dat
dat ze in jouw webpagina's een bepaald thema proberen te vinden. Zodra
iemand een zoekterm intikt die (binnen hetzelfde semantische veld) nauw
bij dat thema aansluit, zal je pagina automatisch een hogere
rangschikking in de resulterende lijst innemen. Een voorbeeld: draait
je pagina rond tuinbouw, dan weet de bot dat tot die pagina oo
begrippen zoals "rotstuin", "planten", "bloemen", "vijver" enzovoort
behoren. Staan die trefwoorden effectief op je site, dan heeft je
pagina recht op een hogere rangschikking. Ideaal zijn zoveel mogelijk
verschillende begrippen uit hetzelfde betekenisveld. Anderzijds neem je
het best niet te veel trefwoorden op éénzelfde pagina op
- anders komt de optimale densiteit in het gedrang."(Bron:
NVU Business Publications Ik heb een website - Zoekrobotica: in
Computermagazine, 2003)
Webdesigners bouwen daarom brugpagina's of doorways.
Dit zijn pagina's die een beknopte hoeveelheid trefwoorden rond een
bepaald thema bevatten. Via een "metarefresh"
schakelt de pagina dan automatisch door naar een voor de surfer
aantrekkelijker pagina. Een te snelle refresh wordt door de zoekrobots
echter evenzeer afgestraft. <meta http-equiv="refresh" content="1";URL="
startpagina.html">
Een andere techniek bestaat erin je brugpagina te vervangen door de
echte
pagina vanaf het moment dat de zoekrobot je pagina heeft gelist. Maar
ook hier schuilt een addertje onder het gras. Als een zoekrobot opnieuw
je pagina bezoekt en op de misleiding stuit, krijg je een slechtere
rangschikking.
Omdat browsers maar ook zoekrobots werken via het HTTP-protocol en
onderliggend via TCP/IP kan je van elke bezoeker de USER_AGENT en het
IP-adres opvragen. Op die manier beschik je over de mogelijkheid om
afhankelijk van de bezoeker een op maat geschreven gepaste pagina te
tonen. Deze techniek noemen we cloaking. Op
dynamische pagina's is dit snel op te lossen met een script (Perl, PHP,
ASP...).
Je moet er wel voor zorgen dat je je steeds bedient van een up-to-date
lijst van IP-adressen en USER_AGENT-benamingen van de zoekrobots. Want
als bots zoals Google op de cloakingtechniek stuiten...!
Veel keywords zijn veek te algemeen. Het is echter ook niet
evident
om de juiste keywords voor je site te kiezen. Best werk je met een
KEI-index (Keyword Effectiveness Index): voor een optimaal trefwoord
koppelt die een hoge populariteit aan een lage concurrentie. Hoe hoger
de KEI-waarde, des te beter je trefwoord.
Een aantal online tools kunnen een handje helpen:
HTML is geen programmeertaal. HTML beschrijft hoe de webpagina er moet
uitzien. Het is dus een zeer eenvoudige opmaaktaal en dat is misschien
precies de oorzaak van haar succes. Iedereen kan de taal zonder al te
veel inspanningen leren én de browsers staan fouten toe! Bij een
klassieke programmeertaal zijn afwijkingen of fouten niet toegestaan.
HTML heeft daardoor echter ook heel wat beperkingen. Het maken van
links en hyperlinks is zowat de enige interactie die je met zuivere
HTML aan een webpagina kan toevoegen.
Met versie 4 zijn we dan ook aan de laatste HTML-versie gekomen. De
taal wordt niet verder doorontwikkeld. Alhoewel het stopzetten van een
ontwikkeling in de computerwereld gelijk staat met het sterven van een
stille dood, denken we dat het gebruik van HTML nog niet meteen gaat
stoppen. Immers, er bestaan heel wat andere manieren om interactie en
dynamiek aan je pagina toe te voegen.
Een webpagina of een volledige website biedt niet dezelfde uitgebreide
mogelijkheden als een klassiek computerprogramma. Ingewikkelde
rekenintensieve toepassingen, grafische technieken enz. zijn niet
mogelijk. Met HTML is het bijvoorbeeld niet mogelijk om een rekenblad
te 'programmeren' en een HTML-Photoshop behoort ook niet tot de
mogelijkheden.
Een klassieke toepassing wordt geprogrammeerd in duizenden regels code
in een of andere programmeertaal (vb. C, C++, Fortran, Cobol...).
Computers kennen doorgaans slechts 2 toestanden nl. "aan" of "uit" en
verstaan enkel lange reeksen van nullen of enen die door de processor
worden uitgevoerd. Om het voor mensen wat leesbaarder te maken zijn
programmeertalen ontwikkeld. Dit zijn talen die wat meer op mensentaal
lijken.
Bijvoorbeeld het klassieke "Hello World" in C: #include <stdio.h>
int main(void)
{ puts("Hello World !");
return 0;
} Vooraleer we een programma kunnen gebruiken, moeten we het
compileren d.w.z. een compiler zet de programmeercodes om in de door de
processor uit te voeren machinetaal. Of: een compiler maakt een voor de
computer uitvoerbaar (op Windows: executable *.exe) programma.
Klassieke webpagina's worden niet gecompileerd maar gewoonweg naar de
clientbrowser verzonden en daar door de browser gerenderd. Het is
echter wel mogelijk om een programmascript in een webpagina op te
nemen.
Bijvoorbeeld: <script language= "Javascript">
hier komt het script </script>
Een script wordt niet gecompileerd maar geïnterpreteerd door een
module in de browser of een module op de server. Of het script gaat
niet door een compiler maar door een interpreter die het script
interpreteert en daarna uitvoert. Uiteraard blijven de mogelijkheden
veel beperkter dan bij een klassiek programma. En dat is maar goed ook
want een online script moet niet dezelfde systeemtoegang- en
mogelijkheden krijgen als een softwareprogramma.
4.1.3 Volg de spelling- en de spraakkunstregels...^
De European Computer Manufacturers Association (ECMA) werd in 1961 opgericht met als doel de "standardization of information and
communication systems". ECMAScript is een standaard scripttaal voor het web,
ontwikkeld
in een samenwerking met Netscape en Microsoft. De officiële
ECMA-262-standaard moet ervoor zorgen dat er wat meer samenhang is
tussen de webscriptimplementaties van Netscape, Microsoft en andere.
ECMA-262 is in grote lijnen gebaseerd op Netscapes Javascript. Brendan
Eich ontwierp de scripttaal Javascript en Netscape
2.0 was de eerste browser die Javascript ondersteunde. Microsoft
ontwikkelde een eigen implementatie onder de naam Jscript en nam het
voor het eerst op in Internet Explorer 3.0. "The development of this Standard
started in November 1996. The first edition of this ECMA Standard was
adopted by
the ECMA General Assembly of June
1997.
That ECMA Standard was submitted to
ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved
as international standard ISO/IEC 16262,
in April 1998. The ECMA General Assembly of June 1998 approved the
second edition of ECMA-262 to keep it
fully aligned with ISO/IEC 16262.
The current document defines the third edition of the Standard and
includes powerful regular expressions, better
string handling, new control statements, try/catch exception handling,
tighter definition of errors, formatting for
numeric output and minor changes in anticipation of forthcoming
internationalisation facilities and future
language growth. Work on the language is not complete. The technical
committee is working on significant
enhancements, including mechanisms for scripts to be created and used
across the Internet, and tighter coordination with other standards
bodies
such as groups within the World Wide Web Consortium and the Wireless
Application Protocol Forum."
(bron: http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf)
Veel scripttalen van latere oorsprong volgen de
ECMA-262-standaard. Actionscript
in Macromedia Flash is
bijvoorbeeld een
implementatie van ECMA-script. Macromedia's highend-multimediatool Director had tot voor kort enkel
zijn eigen scripttaal Lingo aan boord. Vanaf versie MX 2004 is er ook
Javascriptondersteuning in opgenomen.
Dit wijst nog maar eens op de populariteit van Javascript en
ECMA-script en een webontwikkelaar kan dus ook niet zonder enige kennis
van Javascript.
JavaScript is geen Java! Kort gezegd is het verschil dat JavaScript een
scriptingtaal is en Java
een programmeertaal.
Java is, omdat het een programmeertaal is, een stuk moeilijker te leren
dan JavaScript.
"Dat er veel verwarring is over de begrippen JavaScript en Java is goed
te begrijpen. Niet alleen de namen zijn verwarrend, ook de geschiedenis
van de beide talen is nauw met elkaar verbonden. JavaScript is namelijk
ontstaan toen Java populair werd. Da taal Java is ontwikkeld door Sun
Microsystems. In 1995 werd Java heel populair, maar doordat de taal zo
ingewikkeld was, waren er maar weinig mensen die er goed mee om konden
gaan. Het bedrijf Netscape zag dat er behoefte was aan een taal met
veel van de mogelijkheden van Java, maar die wel eenvoudig te leren was
en die verder direct door de browser uitgevoerd kon worden.
In de tweede helft van 1995 begonnen Netscape en Sun een samenwerking
die de creatie van JavaScript tot gevolg had. JavaScript heette eerst
"Mocha" en later werd het "Livescript" genoemd. Toen de samenwerking
tussen Netscape en Sun eenmaal een feit was, ontstond de uiteindelijke
naam: JavaScript."
(Bron: http://www.mijnhomepage.nl/javascript/overjavascript.php)
Toch is ook Java inzetbaar op het web. Java is als programmeertaal een
vreemde eend in de bijt. de bedoeling van Sun Microsystems was om een
programmeertaal te ontwikkelen waarvan de programma's zonder meer op
elk computerplatform kunnen uitgevoerd worden. Bij programmeertalen als
C en C++ moet een programma voor elk besturingssysteem afzonderlijk
worden gecompileerd en vaak moeten ook hele stukken programmacode
worden aangepast om ze op verschillende systemen (vb. MacOS,
Windows...) te laten werken.
Een Javacompiler vertaalt de programmacode naar bytecode en dus niet
naar
machinetaal. Die bytecode kan uitgevoerd worden door een soort van
virtuele machine, de Java Virtual Machine (of Runtime Environment), die
op zijn beurt de bytecode vertaalt naar voor de computer begrijpelijke
instructies. Voor elk besturingssysteem bestaat er uiteraard zo'n JVM.
Zo'n JVM kan ook opgeroepen worden door een browser en aldus krijgen we
de mogelijkheid om Javaprogramma's in de browser uit te voeren.
Zulk een Java-webprogramma noemen we een applet en kan opgenomen worden
in een webpagina.
<applet codebase="http://www.myweb.com/webcam/"
code="TinCam.class" width=320 height=240>
<param name="Refresh" value="5">
<param name="Picture" value="TinCam.jpg">
</applet>
Om Java-applets te schrijven hebben we een geïntegreerde
ontwikkelomgeving (IDE: Integrated Development Environment) nodig. Een
IDE bestaat uit de volgende onderdelen.
JavaScript is dus een scriptingtaal. Er bestaat client-side en
server-side
JavaScript. Client-side JavaScript wordt
direct uitgevoerd via de
browser van de
bezoeker. We zetten het in om onze webpagina's interactief te maken.
Voorbeelden van mogelijke toepassingen:
controle of een formulier is ingevuld
controle schermresolutie om de surfer naar een aangepaste
pagina
te sturen
een "rollover"-effect op een foto of link
...
We verwijzen u voor een beperkte tutorial en de mogelijkheden van
client-side JavaScript door naar onze Javascriptcursus.
Server-side JavaScript wordt
uitgevoerd door een server waarna het resultaat wordt teruggestuurd
naar
de browser van de bezoeker. Met server-side Javascript kunnen we onze
site "dynamisch" maken. Hierover later meer.
Flash is een commercieel product van de firma Macromedia. Versie 1
verscheen onder de naam "Future Splash Player", en maakte het mogelijk
tijdlijn-gebaseerde vectoranimaties te maken.
Het voordeel tegen pixelplaatjes is dat vectorafbeeldingen zonder
kwaliteitsverlies kunnen vergroot worden en dat de bestandsomvang zeer
klein blijft.
Na de overname door Macromedia groeide het succes van Flash gestaag als
een middel om animaties op websites mogelijk te maken.
Voordien werden (en dat is eigenlijk nog altijd zo) enkel geanimeerde
gifafbeeldingen standaard ondersteund door de browsers. Willen we dat
onze browser flashanimaties weergeeft, dan dienen we de Flashplugin
(=insteekmodule) te installeren.
Voor Internet Explorer is de plugin een ActiveX-module, op Mac/Apple is
de Flashplayer/plugin een Javamodule en aldus ook stukken trager in de
weergave. Een aantal browsers op het Linuxplatform loopt wat achter wat
betreft de ondersteuning van de nieuwste Flashplayers omdat de firma
Macromedia zelf geen players voor dat platform ontwikkelt.
Veel mensen verwarren de Flashplayer (=plugin voor Flash) met de
Shockwaveplayer (eveneens van Macromedia). Deze laatste is een plugin
voor de weergave van "films" en "animaties/programma's" gemaakt met de
multimediatool Macromedia Director.
De verwarring is begrijpelijk omdat het exportformaat dat Flash voor
het web gebruikt de extensie "swf" meekrijgt wat staat voor "shockwave
flash".
Ondertussen is Flash (MX) uitgegroeid tot een RAD (rapid application
development)-tool in de aard van Visual Basic. Met Flash is het
mogelijk om naast animaties ook spelletjes, programma's,
databankapplicaties enz. te ontwikkelen. Flash kan geïntegreerd
worden met de dynamische serverscripttaal Coldfusion, maar even goed
met ASP, PHP en XML. Sinds versie MX (6) is het ook mogelijk films op
te nemen in een flashpresentatie. Ondersteuning voor MP3 is al langer
aanwezig.
Flashfilms kunnen op een server samenwerken met de Flash
Communication Server: "Macromedia Flash Communication Server MX 1.5
provides a complete development and deployment platform for including
shared audio, video and live data in your websites and Rich Internet
Applications. Multi-way and multi-user video, audio and data streaming
lets developers quickly create features such as streaming video, online
webcam chat communities, live event broadcasts, and more to their
websites."
(Bron: www.mensys.nl)
In HTML staan de inhoud en de opmaakgegevens door elkaar. Dat is
bijzonder lastig als je nadien de lay-out van je webpagina's wil
wijzigen.
We geven een voorbeeld: <table width="80%" border="1" cellspacing="0"
cellpadding="0">
<tr>
<td width="51%" bgcolor="#996633"><font face="Arial,
Helvetica, sans-serif">
Dit is de
eerste tabelcel</font></td>
<td width="49%" bgcolor="#99CC66"><div
align="center"><font face="Arial, Helvetica, sans-serif">
Dit is de tweede tabelcel</font></div></td>
</tr>
<tr>
<td bordercolor="#9900CC" bgcolor="#996699"><font
face="Courier New, Courier, mono">
Dit is de derde tabelcel</font></td>
<td bordercolor="#993399" bgcolor="#999999"><div
align="right"><font face="Times New Roman, Times,
serif"><strong><em>
Dit is de vierde
tabelcel</em></strong></font></div></td>
</tr>
</table>
In het bovenstaande voorbeeld zijn de opmaakgegevens zoals lettertype,
vet, schuin, uitlijning, achtergrondkleur, lettergrootte enz. met de
eigenlijke tekst en tabel vermengd.
Bovendien zie je dezelfde kenmerken meerdere malen opnieuw opduiken.
Als we de bovenstaande code in een HTML-pagina opnemen zien we enkel
een tabel met twee kolommen en twee rijen. Je kan je al voorstellen wat
een uitgebreide webpagina aan HTML-tags zal bevatten!
Met CSS of Cascading Style Sheets kunnen we opmaakgegevens in een
extern bestand opslaan. Met behulp van dat bestand kunnen we bepalen
hoe tabellen, alinea's, teksten, links, de achtergrond,
browserelementen enz. er moeten uitzien.
In het onderstaande voorbeeld definiëren we hoe een tabelcel
("td") moet opgemaakt worden: td {
font-size:12px;
FONT-FAMILY: verdana, arial, sans-serif;
text-align:justify;
font-style:normal;
color:#000000;
padding-left:15px;
} Je merkt wellicht dat de notatie van CSS erg op de
Javascriptnotatie lijkt.
Het bovenstaande voorbeeld geeft de indruk dat we geen onderscheid
kunnen maken tussen tabelcellen onderling m.a.w. dat alle tabelcellen
er gelijk gaan uitzien. Maar ook dit probleem kan verholpen worden met
CSS.
We kunnen namelijk verschillende "klassen" definiëren. Standaard
zien de tabelcellen eruit zoals in het bovenstaande voorbeeld, maar we
kunnen een klasse met de naam "white" definiëren op de volgende
manier: td.white {
background:#FFFFFF;
color:#808080;
text-align:left;
font-style:normal;
font-family:Verdana, Arial, Serif;
font-size:11px;
padding-top:15px;
} Willen we de standaard klasse gebruiken geven in HTML enkel
"<td...>" op. Willen we de klasse "white" gebruiken, dan voegen
we
de volgende code
aan onze tags toe "<td class='white' ...>".
We slaan al deze gegevens op in het externe bestand met als naam
bijvoorbeeld "extern.css". Als we dit opmaakbestand willen
gebruiken in een webpagina moeten we in de headsectie van het document
de regel "<link href="http://www.ardeco.be/css/extern.css"
rel="stylesheet" type="text/css"> " toevoegen.
De meeste browsers interpreteren slordige HTML-code toch op de juiste
manier. Hogerop hebben we reeds vermeld dat HTML niet verder wordt
doorontwikkeld. Bedoeling is HTML te vervangen door XML oftewel
eXtensible Markup Language. XHTML werd speciaal ontwikkeld om de
overgang tussen HTML en XML minder zwaar te maken.
XHTML is daarom al een veel strictere opmaaktaal dan HTML.
We sommen de wijzigingen even voor u op:
Alle tags en attributen moeten in kleine letters staan.
Alle XHTML elementen moeten afgesloten worden.
Alle attribuutwaarden moeten gequote worden.
Het id-attribuut vervangt het name-attribuut.
Het script-element moet een type-definitie krijgen.
Documenten moet overeenkomstig de XML-regels opgesteld worden.
XHTML krijgt nog enkele verplichte bijkomende elementen.
XHTML biedt de volgende voorbeelden tegenover HTML:
Aangezien het web in de toekomst steeds meer op XML gebaseerd
zal zijn is de eenvoudigste manier om de overstap te maken om te
beginnen je pagina's in geldige XHTML code te schrijven.
Voor XHTML is een schone en logische code vereist. Hierdoor
krijg je als het goed is compactere pagina's met minder fouten.
XHTML zorgt ervoor dat webpagina's geschikter worden voor
draadloze apparaten, slechtzienden/blinden en dat er minder problemen
zullen zijn met de weergave in verschillende browsers.
De toekomst heet XML. Tot nog toe gebruiken de meeste
computerapplicaties hun eigen bestandstypes. MS Word bijvoorbeeld slaat
zijn documenten op met de extensie *.doc.
Dat bestandstype is gesloten d.w.z. dat men enkel via "reverse
engineering" achter de specificaties van dat bestandstype kan komen.
Andere bestandstypes zijn open bijvoorbeeld het*.RTF-formaat is
gedocumenteerd en door iedereen te integreren. Hetzelfde geldt voor tal
van bitmapbestandstypes zoals *.JPEG en *.TIFF.
HTML-bestanden zijn doorgaans als pure tekstdocumenten opgeslagen in
UNICODE- of ASCII-formaat.
"ASCII stands for American Standard Code for Information
Interchange.
Computers can only understand numbers, so an ASCII code is the
numerical representation of a character such as 'a' or '@' or an action
of some sort. ASCII was developed a long time ago and now the
non-printing characters are rarely used for their original purpose.
Below is the ASCII character table and this includes descriptions of
the first 32 non-printing characters. ASCII was actually designed for
use with teletypes and so the descriptions are somewhat obscure. If
someone says they want your CV however in ASCII format, all this means
is they want 'plain' text with no formatting such as tabs, bold or
underscoring - the raw format that any computer can understand. This is
usually so they can easily import the file into their own applications
without issues. Notepad.exe creates ASCII text, or in MS Word you can
save a file as 'text only'" (Bron: http://www.asciitable.com)
Gegevens opslaan in ASCII houdt in dat je de gegevens ook
makkelijk
tussen diverse computersystemen kan uitwisselen.
Een zogenaamd *.txt-bestand bevat platte tekst en zogenaamde
ASCII-codes. Voor niet-westerse taalsystemen is er UNICODE ontwikkeld.
Nadeel van veel tekstformaten (*.rtf, *.doc, *.wpd, *.HTML...) is dat
ze opmaak en gegevens vermengen. Bekijk maar eens de inhoud van een RTF-bestand.
XML moet aan die impasse een einde maken. Dankzij het op SGML
gebaseerde XML moeten bestanden universeel uitwisselbaar worden. Nog
belangrijker is dat ze een strict onderscheid maken tussen vorm en
inhoud. Voor een handleiding verwijzen we u door naar: http://canada.esat.kuleuven.ac.be/xmltutorial/hoofdstuk1.htm
XML is het toverwoord dat bestandsuitwisseling programma- en
platformonafhankelijk moet maken. In de industriële wereld moet
deze opmaaktaal EDI
aflossen. Electronic Data Interchange. Dat is een internationale reeks
afspraken die het uitwisselen van gegevens tussen verschillende soorten
bedrijven moest mogelijk maken.
Zoals je hierboven reeds hebt vernomen heeft XML een aantal voordelen
ten opzichte van HTML. Een voorbeeld van een XML-bestand.
Je kan je eigen tags definiëren
De namen van tags zijn hoofdlettergevoelig (case-sensitive)
d.w.z. dat een openings- en een sluittag eenvormig moeten zijn
Een XML-document voldoet aan strakke regels
Je kan een verwijzing opnemen naar een DTD (document type
deifnition) d.i. een apart bestand waarin is opgenomen welke elementen
in je XML-document moeten of kunnen voorkomen.
Een DTD bepaalt de "grammatica" van je XML-bestand
Een XML-bestand is een soort van "stamboom" waarin elk
onderdeel een "element" is.
Elementen en tags moeten goed "genest" worden.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE bibliotheek SYSTEM "bib1.dtd">
<bibliotheek>
<boek>
<titel> Mijn eerste boek</titel>
<uitgever> Standaard </uitgever>
<auteur> Jan Jansens </auteur>
<paginas> 300 </paginas>
</boek>
<boek>
<titel> Mijn tweede boek</titel>
<uitgever> Kluwer </uitgever>
<auteur> Jan Pieters </auteur>
<paginas> 320 </paginas>
</boek>
<boek>
<titel> Mijn derde boek</titel>
<uitgever> Kluwer </uitgever>
<auteur> Jan Pieters </auteur>
<paginas> 320 </paginas>
</boek>
<boek>
<titel> Mijn vierde boek</titel>
<uitgever> Kluwer </uitgever>
<auteur> Jan Pieters </auteur>
<paginas> 320 </paginas>
</boek>
</bibliotheek>
Als je een XML-bestand opent in een browser krijg je de ruwe XML-data
te lezen. Er is natuurlijk niets van opmaak te bemerken. Daarvoor
moeten we onze toevlucht nemen tot een stijlsjabloon zoals CSS of XSL.
We maakten reeds kennis met CSS en een CSS-stijl op een XML-bestand
toepassen is een fluitje van een cent. We maken een CSS-bestand met
bijvoorbeeld de naam "stijl.css" voegen simpelweg de volgende regel
toe aan ons XML-bestand:
<?xml-stylesheet href="stijl.css" type="text/css"?>
We hoeven in het XML-bestand nu geen "klassen" meer op te maken.
Via CSS spreken we de diverse "nodes" en "objecten" in het XML-bestand
rechtstreeks aan. In de toekomst zal de CSS-standaard opgevolgd worden
door XSL, eXtensible Style Language. Zoals het begrip "extensible"
(=uitbreidbaar) laat vermoeden hebben we hier veel meer controle over
de opmaak van de pagina's. XSL lijkt ook veel meer op een
programmeertaal. Ze maakt het mogelijk dat we XML-gegevens filteren,
sorteren enz.
Een variant van XSL is XSL-FO die zal ingezet worden voor
geformatteerde pagina's in bijvoorbeeld DTP-programma's.
Op de volgende manier kunnen we een XSL-stylesheet opnemen in het
XML-bestand.
<?xml-stylesheet href="stijl.xsl" type="text/css"?>
Het XSL-bestand ziet er zo uit:
De ondersteuning voor XML laat nog vaak te wensen over bij veel
browsers. In Internet Explorer is het bijvoorbeeld mogelijk om
XML-gegevens in een webpagina in te lezen met behulp van Javascript.
Microsoft voorziet ook in die mogelijkheid door het opnemen van Active
X-controls in een webpagina. Het onderstaande voorbeeld beantwoordt aan
de vooropgestelde standaarden van het W3C. <html>
<head>
<title>XML bladerprogramma</title>
<script language="Javascript">
function VolgendRecord(){
if(xmldso.recordset.absoluteposition<xmldso.recordset.recordcount){
xmldso.recordset.movenext;
}
else{
xmldso.recordset.movefirst;
}
}
function VorigRecord(){
if (xmldso.recordset.absoluteposition>1){
xmldso.recordset.moveprevious;
}
else{
document.forms(0).controls(0).disabled=true
}
}
</script>
</head>
<body>
<xml src="bib.xml" id="xmldso" async="false"></xml>
<table>
<tr><td><span datasrc="#xmldso"
datafld="titel"/></td></tr>
<tr><td><span datasrc="#xmldso"
datafld="uitgever"/></td></tr>
<tr><td><span datasrc="#xmldso"
datafld="auteur"/></td></tr>
<tr><td><span datasrc="#xmldso"
datafld="paginas"/></td></tr>
</table>
<form name="formulier">
<input type="button" value="Vorig boek" onclick="VorigRecord()">
<input type="button" value="Volgend boek"
onclick="VolgendRecord()">
<input type="button" value="Eerste"
onclick="xmldso.recordset.movefirst">
<input type="button" value="Laatste"
onclick="xmldso.recordset.movelast">
</form>
In Flash is het native mogelijk om met XML te werken. Een verregaande
uitleg over Flash en XML zou ons in dit bestek te ver leiden. Een
combinatie van beide biedt ook heel wat mogelijkheden voor het maken
van interactieve CD-roms.
Dynamische HTML of "Dynamic HTML" is geen verdere uitbreiding van HTML
en het is ook geen nieuwe opmaaktaal. DHTML maakt het mogelijk om
elementen in een webpagina te wijzigen tijdens de weergave.
Bijvoorbeeld: je beweegt met je muis over een afbeelding en er komt een
andere afbeelding tevoorschijn. Dat kan toch ook met Javascript hoor ik
u al denken. Inderdaad, DHTML is een verzameling van verschillende
technieken en methoden om het uitzicht van HTML-elementen in een
webpagina nog tijdens de weergave in de browser te wijzigen. Hierdoor
gaan webpagina's zich gedragen zoals normale computerapplicaties. Denk
hierbij bijvoorbeeld aan een tekstverwerker: je kan de tekst
selecteren, het uitzicht van de tekst veranderen door op knoppen te
klikken, de verschillende programmafuncties zijn toegankelijk via een
uitklapbaar menu.... We kennen het van bij de meeste
computerprogramma's, maar op webpagina's is dat met pure HTML niet
mogelijk. Een standaardwebpagina is een "eindproduct", zoals
bijvoorbeeld een krantenpagina. Op een DHTML-pagina kan de gebruiker
'wijzigingen' aanbrengen -maar dat wil daarom nog niet zeggen dat die
wijzigingen ook worden doorgevoerd op de server.
Een paar voorbeelden:
een uitklapmenu met toegang tot de verschillende onderdelen van
een website
tekstopmaak in een textarea-formulierveld
Powerpoint-achtige transities bij het overschakelen tussen
webpagina's in Internet Explorer
versleepbare objecten
geanimeerde lagen
...
DHTML is eigenlijk een combinatie van
HTML
Javascript
Cascading Style Sheets
VBscript (Microsoft)
JScript (Microsoft)
het gebruik van (HTML)-lagen
het Document Object Model (W3C)
DHTML is wat anders dan "dynamische webpagina's" in PHP of ASP. Bij
deze laatste technieken worden webpagina's dynamisch aangemaakt op de
server. Met behulp van DHTML kunnen pagina's worden hertekend in de
browser zonder dat ze opnieuw moeten geladen worden of opgevraagd aan
de server via de HTTP-methode 'GET'.
Weerom een groot probleem is dat de grote browsers hun eigen
implementaties van DHTML hebben ontwikkeld. Internet Explorer biedt op
dit vlak ontzettend veel mogelijkheden. Maar veel van die IE-technieken
kunnen niet weergegeven worden in andere browsers zoals Mozilla,
Netscape of Konqueror. Het World Wide Web Consortium (W3C), de
organisatie die de verdere ontwikkeling van het web en
webgeoriënteerde talen superviseert, tracht te komen tot een
gemeenschappelijke standaard die door de diverse browsers kan
geïmplementeerd worden. Dit moet het voor webontwikkelaars
eenvoudiger maken om DHTML-applicaties te ontwikkelen zonder telkens
voor elke browser afzonderlijke scripts te moeten schrijven.
Om de elementen op een webpagina te kunnen wijzigen tijdens de weergave
gebruikt men een scripttaal zoals MS JScript of Javascript. Om
bijvoorbeeld de weergave van een tekst in een welbepaalde paragraaf te
kunnen veranderen:
<p id="Alinea"
onClick="document.getElementById(‘Alinea’).firstChild.nodeValue=’<b>U
heeft op de paragraaf geklikt. </b>’">Dit is de tekst in een
paragraaf</p>
Een werkend voorbeeld voor Microsoft Internet Explorer:
<html>
<head>
<script language="Javascript">
function inhoud(soort){
document.bgColor="red";
document.all.Anker.innerHTML= "WIT";
document.all.header.style.color= "white";
document.all.Alinea.innerHTML="<b>U heeft op de
" + soort + "
geklikt.</b>";
/ /document.getElementById('Alinea').firstchild.nodeValue="U
heeft hier
geklikt.";
}
</script>
</head>
<body>
<h1 id="header" onclick='header.style.color="grey"'>Dit is een
kop</h1>
<p id="Alinea" onClick='inhoud("paragraaf")'>Dit is de tekst in
een paragraaf</p>
<a id="Anker" href="#" onclick='inhoud("knop")'>ROOD</a>
</body>
</html> Test dit voorbeeld
In elke HTML-tag kunnen we als attributen een "id" of een "name"
meegeven. Het Document Object Model van DHTML laat je toe elke HTML-tag
via zijn attribuut "id" of "name" aan te spreken met behulp van een
scripttaal.
Als we bijvoorbeeld een kop op onze pagina als id "kop" geven, dan
kunnen we met behulp van Javascript alle kenmerken zoals tekstkleur,
lettertype, grootte, inhoud... realtime veranderen. Let op: de
veranderingen worden niet doorgevoerd in de broncode van de pagina,
maar wel in het gerenderde beeld in de browser.
Het DOM moeten we beschouwen als een soort van boomstructuur met
betrekking tot de opbouw van een document. En elk beginpunt van een
vertakking noemen we een knooppunt of "node".
De bodytag van een webpagina kan gezien worden als een knooppunt en
elke onderliggende tag is een "childnode" van de bodytag. Bekijk de afbeelding. Bij een tabel
zijn alle data (td) childnodes van de parentnode "table". Bekijk de afbeelding.
"The Document Object Model evolved from the DHTML Object Model,
but one
may argue that it is more like a revolution than an evolution. The
DHTML Object Model lets you access and update HTML objects
individually. Each HTML tag can be accessed and manipulated via its ID
and NAME attributes. Each object sports its own properties, methods,
and events. You can use the properties to read and update local
attributes of the object. You can use the methods to manipulate the
object, and take advantage of the events to trigger pre-defined
consequences.
The Document Object Model is much more general than the DHTML Object
Model. It provides a model for the whole document, not just for a
single HTML tag. The Document Object Model represents a document as a
tree. Every node of the tree represents an HTML tag, or a textual entry
inside an HTML tag. The tree structure accurately describes the whole
HTML document, including relationships between tags and textual entries
on the page. A relationship may be of the type child, parent, or
sibling.
You need a manual to access and update an HTML page with the DHTML
Object Model. The reason being that each tag's object includes
different properties, methods, and events. There are tens of HTML tags
and tens of properties, methods, and events per each. Most relevant
textbooks include an object map that helps you find the right property,
method, or event for your particular need. You don't need any manual to
access and update an HTML page with the Document Object Model. When
looking at HTML code, you can figure out what the tree model of the
page looks like, and how to navigate to the properties you need. The
Document Object Model allows you to update every textual entry on the
page, and only textual entries. To change a textual entry with the
DHTML Object Model, most objects support the innerHTML property which
you can access and update. To change a textual entry with the Document
Object Model, you just change the value of the relevant tree node with
the nodeValue property.
The Document Object Model allows you to navigate along the document
tree, up and down, and to the sides. You can use the child, parent, and
sibling relationships to go from anywhere to anywhere on your page
tree. The DHTML Object Model does not include a tree representation of
the page and thus does not provide any navigation capabilities. Once
you start with a tag's object, you cannot move to other tags in its
vicinity. Certain tags, such as the tag, provides specific
properties and methods to reach content elements, but the
representation is not as consistent and intuitive as that of the
Document Object Model. In the case of the
tag, for example, you need to look up in the manual and find out
that the textual entry of the i,j cell can be accessed via
tableObj.rows[i].cells[j].innerHTML. You don't need any manual to
access it via the Document Object Model. Just look at the HTML code and
you can access every field there with simple navigation steps.
The Document Object Model lets you manipulate the document tree. You
can create new nodes, delete existing nodes, and move nodes around the
tree. The semantics of these operations is exactly what it seems. They
add new tags, delete existing tags, and move tags around the document.
The DHTML Object Model does not let you modify the document. When using
the DHTML Object Model, you are limited to the object you are working
with.
The Document Object Model has one deficiency with respect to the DHTML
Object Model: it does not support event handling. The DHTML Object
Model provides a wide spectrum of events and event handling
capabilities for the document's objects. Since you can't do much
without event handling, you'll have to keep your DHTML expertise
intact."
<h1 align="left" >Hallo Wereld</h1> In het bovenstaande voorbeeld is de h1-tag een elementknooppunt,
het attribuut "align" is een atttribuutknooppunt en de
eigenlijke tekst of kop is een tekstknooppunt.
Het element h1 heeft in dit voorbeeld 1 kindknooppunt nl. de tekst en 1
geassocieerd knooppunt nl. het attribuut "align".
Belangrijk bij deze specificaties is dat het DOM niet beperkt blijft
tot HTML, maar meer nog ingezet kan worden bij alle XML-compatibele
talen. Het DOM is geen scripttaal op zich maar omschrijft hoe
scripttalen de verschillende elementen van een opmaaktaal dynamisch
kunnen benaderen.
Toch willen we weer eens wijzen op de verschllen tussen de
verschillende browsers. Internet Explorer spant de kroon zowel qua
mogelijkheden als qua incompatibiliteit.
Om goede DHTML te kunnen schrijven die crossbrowser en crossplatform
werkt, verwijzen we u door naar de specificaties op de volgende sites:
Tot nog toe hadden we het enkel over client side-technieken.
HTML-pagina's (met eventueel Javascripts, XML, CSS enz.) worden via de
HTTP-methode GET op gevraagd bij de server, vervolgens doorgestuurd
naar de 'client'browser en daarna gerenderd weergegeven.
De webmaster maakt voor elk bericht, product of artikel een aparte
webpagina aan. We spreken in dit geval van statische webpagina's. De
informatie die in de pagina's is opgenomen zit verpakt in het
HTML-bestand. Willen we het uitzicht van de website veranderen, dan
moeten we elke pagina opnieuw aanmaken.
Met dynamische webpagina's is dat niet het geval. De informatie over
bijvoorbeeld producten wordt ingevoerd in databanken. Met behulp van
een scriptingtaal als PHP of ASP worden de webpagina's gevuld met die
gegevens uit de databank of worden de webpagina's dynamisch opgebouwd
en vervolgens naar de clients doorgestuurd.
Meest gebruikt is zonder twijfel PHP in een
combinatie met een Linux- of UNIX-server, een MySQLdatabank
en APACHE als serversoftware. We spreken van een LAMP-oplossing
(Linux, Apache,MySQL, PHP).
Grotere toepassingen maken gebruik van een Oracle-databank en
of CGI-toepassingen geschreven in C of Perl.
Ook Microsoft kon niet te na blijven en ontwikkelde met die doeleinden
voor ogen ASP oftewel Active Server Pages.
Een beperkt overzicht:
ASP (ontwikkelaar: Microsoft):
ASP staat voor Active Server Pages. ASP is een servertechniek
ontwikkeld door Microsoft en aldus ook bedoeld voor Windowsservers.
Toch is het ook in te zetten op een Linux-of UNIX-server met behulp
van Chillisoft-software. ASP is geen programmeertaal maar maakt het
mogelijk dat we via VBscript of Javascript op de server dynamische
pagina's genereren.
ASP.NET (ontwikkelaar: Microsoft):
ASP.NET is opvolger van ASP (versie 3). VBscript en Javascript zijn
afgevoerd als standaard scriptingtalen voor ASP. Iedere programmeur kan
naar keuze zijn geliefkoosde programmeertaal gebruiken om een
dynamische site te ontwikkelen (Visual Basic.NET, Visual C++.NET, C#
enz.).
ColdFusion (ontwikkelaar: Alliare/Macromedia): ASP en PHP zijn scriptgebaseerde omgevingen. PHP lijkt
bijvoorbeeld heel sterk op Javascript omdat het eveneens de
ECMA-standaard volgt. ColdFusion is tag-gebaseerd. Dit wil zeggen dat
de HTML-tagset wordt uitgebreid met een reeks nieuwe tags. Zulke tags
starten steeds met de beginletters "CF", bijvoorbeeld
<CFOUTPUT></CFOUTPUT>.
PHP (ontwikkelaar: opensource, Rasmus Lerdorf):
PHP staat voor Hypertext Proprocessor en de syntaxis van de taal lijkt
heel sterk op Javascript en aldus ook op PERL en C. PHP is volledig
ontwikkeld in opensource (GPL) met als gevolg dat duizenden
programmeurs wereldwijd meewerken aan allerlei uitbreidingen.
Oorspronkelijk is PHP ontwikkeld voor UNIX en Linux, maar ondertussen
zijn er versies voor zo wat alle servers. Waarschijnlijk is PHP
momenteel de meest gebruikte en verspreide serverside scriptingtaal.
PHP bestaat voor zo wat alle servers en platformen. Meestal zien we het
opduiken in combinatie met de (eveneens opensource) webserver Apache
JSP (ontwikkelaar: Sun)
JSP staat voor Java Server Pages. Het is gebaseerd op de
platformonafhankelijke programmeertaal Java. Er zijn versies voor de
webservers Apache, IBM Websphere en JRun (Alliaire, Macromedia).
Eerder in deze cursus hebben we het al gehad over de HTTP-methoden GET
en POST. (Fris je kennis op) Daar heb je geleerd
dat webpagina's geen gegevens kunnen onthouden. Voor traditionele
webpagina's is dat ook niet nodig. Voor een online winkel is het
bijvoorbeeld noodzakelijk dat we eerst ons winkelwagentje kunnen
samenstellen (na het bladeren door allerlei pagina's met producten) en
dat we pas nadien naar de "online-kassa" kunnen. Met HTML is dat niet
mogelijk. Client side Javascript zou in een aantal gevallen een
oplossing kunnen zijn. Gelukkig zijn er doorheen de jaren allerlei
technieken ontwikkeld die dit mogelijk maken: de hierboven genoemde
"server side scripting"-talen. Die omgevingen maken het mogelijk de
beperkingen van HTTP
op een viertal manieren te omzeilen:
Met een HTML-pagina kunnen we gegevens opvragen uit een databank en
zelfs gegevens versturen naar een databank. Hier voor maken we gebruik
van links en formulieren en de HTTP-methodes "GET" en "POST". Voor het
ontvangen en verwerken van die gegevens hebben we echter een "server
side scripting"-taal nodig zoals ASP of PHP.
Een voorbeeld van een
HTML-pagina die gegevens opvraagt en een ASP-pagina die gegevens
ontvangt via de methode "GET".
In de onderstaande code sturen we via een link informatie door naar een
ASP-pagina. We doen dit door een vraagteken te plaatsen achter de link
en vervolgens waarden door te sturen (=een query).
<ul>
<li><a href="wijzig.asp?wijzig=aank">verwijder
aankondigingen</a>
In de volgende pagina ontvangen we die gegevens. De gegevens
worden in
een variabele gestopt en weer in de pagina geschreven. De gebruiker
krijgt de gegevens te lezen die hij in de vorige pagina invulde. In de
onderstaande ASP-voorbeelden maken we gebruik van VBscript. ASP kan ook
gebruikt worden in combinatie met server side Javascript.
<%
wijzig = request.querystring("wijzig")
response.write(wijzig)
%> of
<%
wijzig = request("wijzig")
response.write(wijzig)
%>Hetzelfde voorbeeld maar dan met PHP:
<?
$wijzig = $_GET["wijzig"];
echo("$wijzig");
?>Zoals je eerder hebt vernomen zijn er heel wat nadelen
verbonden aan de methode GET. We sommen ze nog even op:
De gegevens worden doorgestuurd via de URL-balk en zijn dus af
te lezen in de browser. Hierdoor is GET niet de meest geschikte methode
om bijvoorbeeld wachtwoorden of gebruikersnamen door te sturen
De lengte van de querystring is beperkt tot ongeveer 256 tekens.
Een querystring moet gecodeerd zijn in het URL-encoded-format.
Elke GET-opdracht wordt opgeslagen in de logbestanden van de
server en zou misbruikt kunnen worden.
Als die nadelen een echt probleem vormen (bijvoorbeeld bij een
login-pagina), kan u beter uw toevlucht nemen tot de methode POST.
Hiervoor moeten we op de eerste pagina een formulier aanmaken. Op de
volgende pagina vragen we de gegevens weer op. We vragen in ASP de
geposte gegevens weer op met <%wijzig=request.post("wijzig")%>
in ASP en <?$wijzig=$_POST["wijzig"];?> in PHP.
Uiteraard moeten we dan
ook een formulierveld aanmaken met de benaming "wijzig". Met
"response.write()" in ASP en "echo();" in PHP kunnen we gegevens
in een webpagina schrijven om ze weer aan de bezoeker te tonen.
Informatie posten met een
formulier
In het onderstaande voorbeeld posten we gegevens met een HTML-formulier
en met een ASP- of PHP-pagina vragen we de gegevens weer op:
<form name="formulier" method="post"
action="controle.asp">
Vul uw gebruikersnaam in:<br>
<input type="text" name="gebruikersnaam">
Vul uw wachtwoord in:<br>
<input type="text" name="wachtwoord">
<input type="submit" value="controleer">
</form>
Met een ASP-pagina vragen we de gegevens weer op. We controleren of
de ingevulde gegevens juist zijn. Als dit het geval is schrijven we de
ingevulde gegevens in de pagina neer. Zoniet sturen we de bezoeker naar
de pagina "geentoegang.asp"
<%
gebruikersnaam = request.post("gebruikersnaam")
wachtwoord = request.post("wachtwoord")
if gebruikersnaam= "Jan" and wachtwoord="joske" then
response.write("Welkom " & gebruikersnaam
& " " & wachtwoord)
else
response.redirect("geentoegang.asp")
end if
%>
Uiteraard kunnen op dezelfde manier ook een PHP-pagina schrijven.
GET en POST zijn handige manieren om informatie tussen 2 pagina's uit
te wisselen. Maar wat moeten we doen als we de gegevens
van een gebruiker of bijvoorbeeld zijn taalkeuze over een ganse site
(met meerdere pagina's) willen gebruiken?
In dat geval kunnen we gebruik maken van cookies en sessies.
Cookies
Een cookie bewaart gegevens op de computer van de client, de surfer of
bezoeker. Het is een handige manier om bepaalde voorkeuren van de
gebruiker gedurende
lange tijd te bewaren. Op Skynet.be moet je bij je eerste bezoek kiezen
tussen Nederlands en Frans.
Eens die keuze gemaakt schrijft de webpagina een cookie weg op de harde
schijf van de bezoeker. Een cookie krijgt een unieke naam die we kunnen
vullen met een waarde.
We kunnnen als webmaster ook instellen hoe lang een cookie bewaard moet
blijven. Uiteraard kan de bezoeker de cookies van zijn browser ook ten
allen tijde verwijderen.
Vele mensen zien cookies als een schending van hun privacy omdat ze het
vreemd vinden een website hun keuze kan onthouden. Toch is een
schadelijke toepassing van cookies
niet echt mogelijk. Cookies kunnen bijvoorbeeld geen informatie
doorsturen naar een webpagina vermits het geen programa's zijn.
Webpagina's kunnen wel informatie uit een cookie
opvragen, maar dan moeten ze wel de benaming van de cookievariabelen
kennen.
Bij veel browsers moet je het laten aanmaken van cookies expliciet
goedkeuren (vb. Konqueror), bij andere kan je cookies standaard
uitschakelen.
We kunnen hieruit besluiten dat cookies enkel zinvol zijn om in een
homepagina gegevens van de client op te vragen. Maak een ganse website
echter niet afhankelijk van cookies.
Sessions
Een server stuurt een opgevraagde pagina naar de client en vergeet
meteen welke client met hem verbonden was. Als de surfer
een minuut later weer een pagina opvraagt, weet de server niet meer dat
diezelfde client een minuut eerder een andere pagina heeft
opgevraagd.
Met behulp van sessies kunnen we een server aan een bepaalde client een
uniek sessie-id laten toekennen op basis van de headergegevens van de
client.
De webmaster kan in die sessie diverse variabelen stoppen zoals
bijvoorbeeld een taalkeuze of een reeds eerder gecontroleerde
gebruikersnaam en wachtwoord.
In elke webpagina kunnen we dan bijvoorbeeld controleren welke waarde
er in de sessievariabele "taal" zit. Is dat "Nederland" dan tonen we de
pagina in het Nederlands, is dat "Frans" dan tonen we de pagina in het
Frans.
In het onderstaande voorbeeld tonen illustreren we het sessiemechanisme
voor een taalkeuze. Vooreerst maken we een homepagina (default.asp)
met een taalkeuze
met daarop 2 links:
<a href="home.asp?taal=NL">Nederlands</a><br>
<a href="home.asp?taal=FR">Frans</a>
De gegevens worden via de methode "GET" naar de pagina "home.asp"
verzonden, vervolgens weer opgevraagd en in een sessie gestopt:
<%
taal= request.querystring("taal")
session("taal")=taal
%>
De pagina "home.asp" heeft de waarde van de gekozen taal
weggescheven in de sessievariabele "taal".
Onze volgende opdracht is nu om in elke andere pagina van de website te
controleren welke waarde er in die sessievariabele zit. Uiteraard is
het ook
belangrijk om te controleren of die sessievariabele sowieso is
aangemaakt want anders weten onze webpagina's niet in welke taal ze
zich moeten manifesteren.
<%
if session("taal") <> "" then
taal= session("taal")
else
response.redirect("default.asp")
end if
%>
De bovenstaande code voor de controle van een sessie controleert
vooreerst of de sessie "taal" bestaat (leeg of niet leeg). Als de
sessie
bestaat, vult ze de waarde "taal" met de waarde uit de sessievariabele,
in het andere geval stuurt ze de surfer naar de beginpagina waar hij
een taal moet kiezen.
De controle van de sessie dient in elke pagina te gebeuren. Handig is
om die controle als een apart bestand op te slaan vb. sessie.asp en ze
via een "include"-instructie in de andere pagina's op te nemen.
We doen dit op de volgende manier:
<<!-- include file="sessie.asp" -->%>
PHP gaat iets anders te werk wat betreft sessies. In elke pagina waarin
we gebruik willen maken van sessievariabelen moeten we de sessie
expliciet starten met de functie "session start()".
<?
//start van de sessie
session_start();
//een switch om te controleren welke tekst er standaard in de
sessievariabele "tekst" wordt weggeschreven.
switch($_GET["lan"]){
case "nl": {
$tekst= "<br>De site staat binnenkort
online. Voor meer informatie kan u mailen naar ";
}
break;
case "en":{
$tekst= "<br>The site will be available
soon.";
$titel="The ultimate PetShop.";
}
break;
case "fr":{
$tekst= "<br>Le site sera disponible dans
quelques semaines.";
$titel="Le magasin des chiens";
}
break;
case "de":{
$tekst= "<br>Morgen konnen Sie die Seite
besuchen. ";
$titel="kleinehonden.be";
}
break;
default:{
$tekst= "<br>U krijgt de site in het
Nederlands.<br>De site staat binnenkort volledig online. Voor
meer informatie kan u mailen naar";
$titel="kleinehonden.be";
}
}
if (!isset($_SESSION["taal"])){
$_SESSION["tekst"]=$tekst;
$_SESSION["titel"]=$titel;
$_SESSION["taal"]=$_GET["lan"];
}
?> Met "!isset($_SESSION["taal"])" controleren we of de
sessie bestaat.
Met een combinatie van een formulierveld, een controlepagina en een
sessie is het nu ook simpel om wachtwoordbeveiligde pagina's te maken.
<%
'De bewaarde gebruikersnaam en wachtwoord
username="joske"
pwd="marcske"
'De door de bezoeker ingevulde gegevens worden in variabelen gestopt.
username2=request("username")
pwd2=request("pwd")
'We schrijven even neer wat de bezoeker heeft ingevuld
response.write("opgeslagen " & username &"<br>gepost: "
& username2)
'Controle van de ingevulde gegevens met de gewaarde gegevens.
if username2=username and pwd2=pwd then
session("username")=username
session("pwd")=pwd
response.redirect("safe.asp")
else
response.write("U heeft foutieve gegevens
ingevuld. Keer terug om te verbeteren. <a href='#'
onclick='history.back()'>terug</a>")
end if
%>
De kracht van dynamische pagina's schuilt in de modulaire opbouw.
Gegevens worden opgeslagen in databanken. Via een query (GET) vraagt
de bezoeker gegevens op. Een server script ontvangt de query en
genereert een HTML-pagina die naar de browser van de client wordt
doorgestuurd.
De beheerders van de website kunnen via een wachtwoordbeveiligde pagina
informatie aan de databank toevoegen, records aanpassen of verwijderen.
Flatfiledatabanken: alle gegevens worden in een tabel opgeslagen
Relationele databanken: de gegevens kunnen over meerdere tabellen
worden verdeeld. Tussen de tabellen kunnen relaties worden gedefinieerd
(voobeelden: Access, SQL-server, Filemaker, MySQL, PostgreSQL...)
Objectgeoriënteerde databanken: in de toekomst zullen de
relationele databanken vervangen worden door OO-databanken.
HTML-, XML- of TXT-bestanden zijn als pure ASCII-bestanden opgeslagen.
Je kan ze in een eenvoudige teksteditor openen en lezen.
Databanken zijn in een binair formaat gecodeerd en niet zonder meer te
openen.
Server side scriptingtalen hebben daarvoor aparte modules/interfaces
nodig om de gegevens uit databanken te kunnen inlezen.
Om gegevens uit te lezen, in te voeren, te verwijderen of aan te passen
maken we gebruik van het door Oracle ontwikkelde SQL
(Structured Query Language).
We maken een Access-databank met daarin 1 tabel met als naam tbnieuws.
In de tabel maken we de volgende records aan:
BENAMING
GEGEVENSTYPE
VELDLENGTE
id
autonummering
/
titel
Tekst
255
inleiding
Tekst
255
kernwoorden
Tekst
255
auteur
Tekst
255
datum
Tekst
10
artikel
Memo
/
Met de onderstaande ASP-pagina vragen we de gegevens uit de databank
op:
<%
dbpath= "nieuws.mdb"
connstring = "DRIVER=Microsoft Access Driver (*.mdb);DBQ=" &
Server.MapPath(dbPath)
set db = server.createobject("adodb.connection")
db.open connstring
sql_query="SELECT * FROM tbnieuws"
set artikels=db.execute(sql_query)
while not artikels.eof
response.write("<h1>" &
artikels("titel") & "</h1><br>")
response.write("<i>" &
artikels("inleiding") & "</i><br>")
response.write(artikels("artikel") &
"<br>")
artikels.movenext
wend
%> We maken nu een gelijkaardige tabel aan in MySQL en vragen de
gegevens op met de onderstaande PHP-pagina: <?
// variabelen initialiseren
$username= "gebruikersnaam";
$dbnaam="naamvandedatabank";
$password= "wachtwoord";
$host="localhost";
$query="SELECT * FROM tbnieuws";
//indien ID is doorgegeven
if(!empty($_POST)){
$query .= " WHERE id='" . $_POST["id"] . "'";
}
//verbinden met databank
$db=mysql_connect($host, $username, $password) or die (mysql_error());
mysql_select_db($dbnaam, $db) or die (mysql_error());
$result= mysql_query($query) or die (mysql_error());
<?
}
else
{
//als er gepost is, moet hij informatie over betreffende artikel uit
databank halen en een tabel tekenen.
while(list($id, $titel, $inleiding, $artikel, $auteur,
$datum)= mysql_fetch_row($result)){
echo("<h4><i>$titel</i></h4>
<i>$inleiding</i> <br><b>$atikel
<br><b>Auteur:</b> $auteur
<br><b>Datum:</b> $datum ");
}
echo("<hr> <a
href='rassen.php?'>Terug</a>");
}
mysql_close();
?>
<?if(empty($_POST)){
echo("</form>");
}?> Het bovenstaande PHP-script controleert of er informatie is gepost
naar de pagina. Als dat niet het geval is, dan maakt hij een
formulierveld aan met een uitklapmenu/selectiebox met daarin alle
titels uit de MySQL-databank. De gebruiker kan een van die titels
selecteren en vervolgens
op de "submitknop" klikken. Als waarde van de selelctiebox wordt de
"id" van de record in de databank gepost naar dezelfde pagina.
In dit geval wordt er informatie gepost naar de pagina en tekent het
script geen formulier meer met een selectiebox, maar geeft hij alle
informatie uit het record met het geposte id.