1 Kris Merckx voor en Voor meer info over software: COMPUTERKIT Algemene inleiding + 1. Internetprotocollen + 2. Websites, FTP en Browsers + 3. Webs...
7. Dynamische pagina's + 1. Wat zijn dynamische webpagina's? + 2. Toepassingen + 3. Hoe beginnen we eraan? + 1. Technieken + 2. Informatie uitwisselen tussen pagina's + 3. Informatie uitwisselen met GET en POST + 4. Gegevens bewaren met sessies en cookies + 5. Wachtwoordbeveiliging + 4. Gegevensverwerking + 1. Databanken + Databanktypes + Structuren + Opslag van gegevens in een databank + Voorbeelden + 2. Content Management Systemen + Gegevens tonen + Gegevens toevoegen + Mappen en bestanden maken + Gebruikersbeheer + WYSIWYG-editors + Gegevens aanpassen + Gegevens verwijderen + 3. Bestanden lezen + 4. Een online bestandenverkenner + 8. Interessante boeken en software +
1. Algemene inleiding
^
1.1 Internetprotocollen^ 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.
1.2 Websites, FTP en Browsers ^ 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. voorbeeld van een opensourceprogramma)
FTP-programma:
smartFTP,
WSftp,
Filezilla
(een
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…
1.3 Websites en HTTP ^ 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.
1.4 HTML-editors en WYSIWYG-HTML-editoren. ^ 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
1.5 DYNAMISCHE WEBSITES ^ 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.
1.6 Content Management ^ 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 managementsysteem kan heel snel geïmplementeerd worden op een andere site.
2. Hypertext Transfer Protocol (in depth...)
^
2.1 Internetprotocollen en het wereldwijde web ^ 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). OPMERKING Wie beweert dat Linux geen toekomst heeft, zit fout. Een groot deel van de webservers werkt op Linux of UNIX. Google is de Linux-killerapp. Heel de zoekmachine draait op duizenden Linuxcomputers.
2.2 Hypertext Transfer Protocol ^ 2.2.1 Standaardprotocol ^ 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. 1. Als u dus op een hyperlink klikt, gebruikt de browser de URL van de koppeling om de server ervan op te zoeken. 2. De server ontvangt de aanvraag, zoekt het document en verstuurt het naar de browser 3. De server (de host van de URL, dus niet uw internetprovider!) verbreekt de verbinding Technische versie: 1. 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 2. 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, */* 3. 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 4. 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 5. Als het verzoek van de client succesvol was, verstuurt de server de gevraagde data naar de client. 6. De verbinding wordt verbroken. Wil je graag de HTTP-header van jouw site lezen: http://www.delorie.com/web/headers.html 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. Click the Back button to try another link.
HTTP 404 - File not found Internet Information Services Technical personnel)
Information
(for
support
More information: Microsoft Support 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: 1. 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
2. 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... 2.2.3 HTTP is statusloos ^ 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.
2.2.4. HTTP-methodes ^ Elke HTTP-transactie begint met een aanvraag. Er zijn verschillende manieren of methodes om die aanvraag in te dienen. Elke methode bestaat uit 3 delen: 1. de soort 2. de URL van het document 3. de http-versie Bijvoorbeeld: GET / HTTP/1.1 Host: www.hakendover.be Connection: close Accept-Encoding: gzip Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.mspowerpoint, application/vnd.ms-excel, application/msword, application/x-shockwaveflash, */* Accept-Language: en-us,nl-be;q=0.5 User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; CHWIE_BE70) Web-Sniffer/1.0.5 (web-sniffer.net) Referer: http://web-sniffer.net/
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-encodedformat. 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 Meer info over HTTP-methodes: http://www.wdvl.com/Internet/Protocols/HTTP/Request.html Meer info over het URL-encoded-format: ?? 2.2.5. Samenstelling van een URL ^ <soort>:<soortspecifiek gedeelte> De volledige syntaxis voor een http-URL is: :<poort>/<pad>? 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.
3. HTML, statische pagina's
^
3.1 HTML-tags ^ 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 Titel van de pagina mijn tekst vette tekst schuingedrukte tekst Schuingedrukte en vette tekst Schuingedrukte en vette tekst
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 en . Ook opmaakcodes als vetgedrukt en schuingedrukt staan tussen een begin- en eindtag. Vetgedrukt of “bold” (...) vette tekst Schuingedrukt of italic schuingedrukte tekst Willen we twee opmaakkenmerken m eegeven, dan moeten we tags embedden of insluiten. Zoals u merkt, kan dat op twee manieren: Schuingedrukte en vette tekstSchuingedrukte en vette tekst 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. Schuingedrukte en vette tekst
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.) Een vergelijking van SGML en XML vind je op http://www.w3.org/TR/NOTEsgml-xml.html 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.
3.2 Metagegevens ^ 3.2.1 headsectie en Dublin Core ^ 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 Een klein voorbeeld van Dublin Core-metatags: KLIK Een tutorial over het gebruik van metatags in het algemeen: http://www.i18nguy.com/markup /metatags.html 3.2.2 Zoekrobots zijn niet te misleiden ^ 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.
disney,
mickey
mouse,
donald
duck,
tekenfilm"
*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. 3.2.3 robots.txt ^ 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 Meer uitleg en tutorials vind je op http://www.robotstxt.org/wc/robots.html Ook in de metatags van een webpagina kan je de robots aansturen: http://www.i18nguy.com /markup/metatags.html Een lijst van de zoekrobots: http://www.robotstxt.org/wc/active/html/type.html Contactadressen en email zoekrobots: http://www.robotstxt.org/wc/active/html/contact.html 3.2.4 Problemen met framespagina's ^ 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"> 3.2.5 Brugpagina's (doorways) ^ 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"> 3.2.6 Code swapping ^ 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. 3.2.7 Cloaking ^ 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...! Voor meer informatie: http://www.spiderhunter.com/spiderlist http://www.ip-delivery.com http://www.robotstxt.org/wc/active/html/type.html 3.2.8 de KEI-index^ 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: http://www.netmechanic.com http://www.pwqsoft.com http://www.wordtracker.com
4. Interactie in statische pagina's
^
4.1 Scripttalen en programmeertalen^ 4.1.1 Het einde van HTML^ 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. 4.1.2 Compileren of interpreteren? ^ 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
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) Meer informatie: http://www.ecma-international.org/memento/history.htm http://www.ecma-international.org/memento
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.
4.2 Javascript of Java? ^ 4.2.1 Het verschil tussen JavaScript en Java ^ 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)
4.2.2 Java is straffe koffie... ^ 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.
code="TinCam.class"
width=320
Om Java-applets te schrijven hebben we een geïntegreerde ontwikkelomgeving (IDE: Integrated Development Environment) nodig. Een IDE bestaat uit de volgende onderdelen. 1. een java-editor 2. een compiler 3. een JVM Voorbeelden van IDE's: JBuilder van Borland Visual J++ van Microsoft Visual Café van Symantec Kawa van TekTools JDeveloper van Oracle Java Workshop van Sun Visual Age van IBM Bluette van Tucows 4.2.3 Wat is JavaScript? ^ 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.
4.3 Flash en Director ^ http://www.macromedia.com/software/flashplayer/productinfo/faq/#item-1 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 ActiveXmodule, 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) http://www.xi.be/igor http://www.flashkit.com VOORBEELDEN VAN SITES IN FLASH http://www.derbauer.de http://www.liquidjourney.com http://www.topdogs.be
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:
Dit is de eerste tabelcel
Dit is de tweede tabelcel
Dit is de derde tabelcel
<strong><em> Dit is de vierde tabelcel
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!
5.2 Cascading Style Sheets ^ 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 "" op. Willen we de klasse "white" gebruiken, dan voegen we de volgende code aan onze tags toe "
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 " " toevoegen. Interessante links: http://www.webreference.com/authoring/style/sheets/layout/advanced/ http://www.dynamicdeezign.com/csscur/lesson4.html http://www.designplace.org/tutorials.php?page=1&c_id=9 http://www.saila.com/usage/layouts/ http://www.w3schools.com/css/css_list.asp
5.3 XML: Extended Markup Language ^ 5.3.1 XHTML ^ 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. Voor meer info, http://www.khlim.be/~cdaniels/XHTML.html en http://www.w3.org/TR/xhtml11 /xhtml11_dtd.html In dit bestek is het ook interessant om de Doc Type Definitions eens van naderbij te bestuderen: DTD 5.3.2 Formuleer uw eigen tags ^ 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 5.3.3 Kenmerken van XML ^ 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. Mijn eerste boek Standaard Jan Jansens <paginas> 300 Mijn tweede boek Kluwer Jan Pieters <paginas> 320 Mijn derde boek Kluwer Jan Pieters <paginas> 320 Mijn vierde boek Kluwer Jan Pieters
5.4 XML in samenwerking ^ 5.4.1 XML, CSS en XSL ^ 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: 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.
Het XSL-bestand ziet er zo uit: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template> <xsl:for-each select="bibliotheek/boek">
5.4.2 XML en Javascript ^ 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.
XML bladerprogramma <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 } } <xml src="bib.xml" id="xmldso" async="false">
<span datasrc="#xmldso" datafld="titel"/>
<span datasrc="#xmldso" datafld="uitgever"/>
<span datasrc="#xmldso" datafld="auteur"/>
<span datasrc="#xmldso" datafld="paginas"/>
5.4.3 XML en Flash ^ 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. 5.4.4 SMIL ^ Uitleg volgt 5.4.5 MathML ^ Uitleg volgt 5.4.6 Scalable Vector Graphics ^ Uitleg volgt
6. Dynamic HTML en DOM
^
6.1. Wat is DHTML? ^ 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 DHTMLpagina 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'.
6.2. Browsers en DHTML ^ 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.
6.3. Document Object Model ^ 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:
Dit is de tekst in een paragraaf
Een werkend voorbeeld voor Microsoft Internet Explorer:
<script language="Javascript"> function inhoud(soort){ document.bgColor="red"; document.all.Anker.innerHTML= "WIT"; document.all.header.style.color= "white"; document.all.Alinea.innerHTML="U heeft op de " + soort + " geklikt."; / /document.getElementById('Alinea').firstchild.nodeValue="U heeft hier geklikt."; }
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."
Hallo Wereld
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: http://www.w3.org/DOM/ http://www.w3schools.com/dom/default.asp http://www.webreference.com/js/column40/ http://www.cross-browser.com/ http://mitchellfoster.com/
7. Dynamische pagina's
^
7.1 Wat zijn dynamische webpagina's? ^ 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.
7.3 Hoe beginnen we eraan? ^ 7.3.1 Technieken ^ 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 . 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).
ASP, PHP, Javascript en Actionscript Variabelen: Variabelen kunnen we op eenvoudige wijze definiëren: VbScript
Javascript/Actionscript
PHP
Dim variabelenaam
var variabelenaam
$variabelenaam
of
of
variabelenaam
variabelenaam
Een dynamische pagina wordt "geschreven" op de server. D.w.z. we vullen de pagina bijvoorbeeld dynamisch op met gegevens uit een databank. Omdat een browser enkel HTML kan weergeven, moeten we met behulp van een scripttaal HTML gaan schrijven. VbScript response.write("Dit een vette tekst")
Javascript is
document.write("Dit een vette tekst")
PHP is
echo("Dit is een vette tekst")
We vragen gegevens op die verzonden zijn met formulier (methode "POST") of met een URL (methode "GET"). VbScript
PROGRAMMASTRUCTUREN In Vbscript (ASP) beschik je over de volgende structuren om je programma’s op te bouwen: 1. sequentie: programma’s bestaan uit een opeenvolging van opdrachten 2. selectie: het programmaverloop kan afhankelijk gemaakt worden van een voorwaarde 3. herhaling: een aantal statements kunnen herhaald worden.
1. Sequentie Een reeks opdrachten worden na elkaar uitgevoerd.
2. Selectie 2.1
In Javascript, PHP en Actionscript (Macromedia Flash) en andere ECMA-compatibele scripttalen beschik je over de volgende structuren om je programma’s op te bouwen: 1. sequentie: programma’s bestaan uit een opeenvolging van opdrachten 2. selectie: het programmaverloop kan afhankelijk gemaakt worden van een voorwaarde 3. herhaling: een aantal statements kunnen herhaald worden.
1. Sequentie Een reeks uitgevoerd.
If voorwaarde then Instructies End If
elkaar
Enkelvoudige selectie
De opdrachten worden slechts afhankelijk van het vervullen voorwaarde.
uitgevoerd van een
If (voorwaarde){ Instructies }
Tweevoudige selectie 2.2
Als er andere instructies moeten uitgevoerd worden bij het al dan niet vervullen van de voorwaarde spreekt men van tweevoudige selectie. If voorwaarde then Instructies Else Instructies End If
Meervoudige selectie
Als je een keuze moet maken uit een groter aantal alternatieven spreek je van meervoudige selectie. Select Case variabelenaam Case expressielijst 1 Instructies Case expressielijst 2 Instructies … Case Else
28 van 38
na
2. Selectie 2.1
2.3
worden
Enkelvoudige selectie
De opdrachten worden slechts uitgevoerd afhankelijk van het vervullen van een voorwaarde.
2.2
opdrachten
Tweevoudige selectie
Als er andere instructies moeten uitgevoerd worden bij het al dan niet vervullen van de voorwaarde spreekt men van tweevoudige selectie.
If (voorwaarde){ Instructies } else{ Instructies } 2.3
Meervoudige selectie
Als je een keuze moet maken uit een groter aantal alternatieven spreek je van meervoudige selectie. switch(variabelenaam){ case expressielijst 1: instructies; break; case expressielijst 2:
3.1 Voorwaardelijke herhaling met aanvangsvoorwaarde
rest volgt...
De voorwaarde wordt getest vóór het aanvangen van de lus. Het is mogelijk dat de instructies nooit worden uitgevoerd. Methode 1 Do while voorwaarde Instructies Loop Methode 2 Do Until voorwaarde Instructies Loop
3.2 Voorwaardelijke herhaling met afbreekvoorwaarde De voorwaarde wordt getest op het einde van de lus. De lus wordt minstens eenmaal uitgevoerd. Methode 1 Do Instructies Loop while voorwaarde Methode 2 Do Instructies Loop Until voorwaarde
3.3
Begrensde herhaling
For intTeller = begin toename] Instructies Next
To einde [step
7.3.2 Informatie uitwisselen tussen pagina's ^ 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: GET POST cookies sessions 7.3.3 Informatie uitwisselen met GET en POST ^ 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).
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: 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 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: 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.
7.3.4 Gegevens bewaren met sessies en cookies ^ 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: Nederlands Frans 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: <%>
OPMERKING Let erop dat je je includebestanden steeds de extensie "asp" (of "php") geeft en nooit "inc". Dit is een veelvoorkomende fout daar dit ook een gebruikelijke manier van doen is in programmeertalen als C en C++. Webservers kennen de extensie "inc" echter niet en sturen de inhoud van het bestand als een puur tekstbetand door naar de browser. Het voordeel van server scripting is nu eenmaal dat de code niet door de surfer kan gelezen worden. De server voert de ASP- of PHP-codes uit en stuurt ze als pure HTML naar de browser 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()". De site staat binnenkort online. Voor meer informatie kan u mailen naar "; } break; case "en":{ $tekst= " The site will be available soon."; $titel="The ultimate PetShop."; } break; case "fr":{ $tekst= " Le site sera disponible dans quelques semaines."; $titel="Le magasin des chiens"; } break; case "de":{ $tekst= " Morgen konnen Sie die Seite besuchen. "; $titel="kleinehonden.be"; } break; default:{ $tekst= " U krijgt de site in het Nederlands. 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.
7.3.5 Wachtwoordbeveiliging ^ 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 &" 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. terug") end if %>
7.4 Gegevensverwerking ^ 7.4.1 Databanken ^ 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. Databanktypes ^ 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. Structuren ^ In databanken zijn gegevens opgeslagen in tabellen. Elke tabel bestaat uit records. Opslag van gegevens in een databank ^ 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). Voorbeelden ^
grote databanken kleine databanken meest gebruikte combinatie met PHP
databank
in
zeer grote databanken
gebruikt
in
zeer grote databanken
(Bron: Kassenaar, Peter Basiscursus PHP4.2)
7.4.2 Content Management Systemen ^ A. Gegevens tonen ^ 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("
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.