Dynamische websites met ASP en PHP

38
© Kris Merckx voor http://www.ardeco.be en http://www.computerkit.be Voor meer info over software: COMPUTERKIT Algemene inleiding 1. + Internetprotocollen + 1. Websites, FTP en Browsers + 2. Websites en HTTP + 3. HTML-editors en WYSIWYG-HTML-editoren + 4. DYNAMISCHE WEBSITES + 5. Content Management + 6. Hypertext transfer protocol (in depth...) + Internetprotocollen en het wereldwijde web + 1. Hypertext Transfer Protocol + Standaardprotocol + 1. MIME voor het verzenden van multimedia via het web + 2. HTTP is statusloos + 3. HTTP-methodes + 4. Samenstelling van een URL + 5. 2. 2. HTML, statische pagina's + HTML-tags + 1. Metagegevens + headsectie en Dublin Core + 1. Zoekrobots zijn niet te misleiden + 2. robots.txt + 3. Problemen met framespagina's + 4. Brugpagina's (doorways) + 5. Code swapping + 6. Cloaking + 7. de KEI-index + 8. 2. 3. Interactie in statische pagina's + Scripttalen en programmeertalen + Het einde van HTML + 1. Compileren of interpreteren + 2. Volg de spelling- en de spraakkunstregels... + 3. 1. Javascript of Java? + Het verschil tussen JavaScript en Java + 1. Java is straffe koffie... + 2. Wat is JavaScript? + 3. 2. Flash en Director + 3. 4. Vorm en inhoud scheiden + Klassieke opmaak + 1. Cascading Style Sheets + 2. XML: Extended Markup Language + XHTML + 1. Formuleer uw eigen tags + 2. Kenmerken van XML + 3. 3. XML in samenwerking + XML, CSS en XSL + 1. XML en Javascript + 2. XML en Flash + 3. SMIL + 4. MathML + 5. Scalable Vector Graphics + 6. 4. 5. Dynamic HTML en DOM + Wat is DHTML? + 1. Browsers en DHTML + 2. Document Object Model + 3. 6. Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc... 1 van 38 19-02-2009 12:34

description

ASP, PHP, databanken, plugins

Transcript of Dynamische websites met ASP en PHP

Page 1: Dynamische websites met ASP en PHP

© Kris Merckx voor http://www.ardeco.be en http://www.computerkit.be Voor meer infoover software: COMPUTERKIT

Algemene inleiding1.+

Internetprotocollen +1.Websites, FTP en Browsers +2.Websites en HTTP +3.HTML-editors en WYSIWYG-HTML-editoren +4.DYNAMISCHE WEBSITES +5.Content Management +6.

Hypertext transfer protocol (in depth...) +Internetprotocollen en het wereldwijde web +1.Hypertext Transfer Protocol +

Standaardprotocol +1.MIME voor het verzenden van multimedia via het web +2.HTTP is statusloos +3.HTTP-methodes +4.Samenstelling van een URL +5.

2.

2.

HTML, statische pagina's +HTML-tags +1.Metagegevens +

headsectie en Dublin Core +1.Zoekrobots zijn niet te misleiden +2.robots.txt +3.Problemen met framespagina's +4.Brugpagina's (doorways) +5.Code swapping +6.Cloaking +7.de KEI-index +8.

2.

3.

Interactie in statische pagina's +Scripttalen en programmeertalen +

Het einde van HTML +1.Compileren of interpreteren +2.Volg de spelling- en de spraakkunstregels... +3.

1.

Javascript of Java? +Het verschil tussen JavaScript en Java +1.Java is straffe koffie... +2.Wat is JavaScript? +3.

2.

Flash en Director +3.

4.

Vorm en inhoud scheiden +Klassieke opmaak +1.Cascading Style Sheets +2.XML: Extended Markup Language +

XHTML +1.Formuleer uw eigen tags +2.Kenmerken van XML +3.

3.

XML in samenwerking +XML, CSS en XSL +1.XML en Javascript +2.XML en Flash +3.SMIL +4.MathML +5.Scalable Vector Graphics +6.

4.

5.

Dynamic HTML en DOM +Wat is DHTML? +1.Browsers en DHTML +2.Document Object Model +3.

6.

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

1 van 38 19-02-2009 12:34

Page 2: Dynamische websites met ASP en PHP

Dynamische pagina's +Wat zijn dynamische webpagina's? +1.Toepassingen +2.Hoe beginnen we eraan? +

Technieken +1.Informatie uitwisselen tussen pagina's +2.Informatie uitwisselen met GET en POST +3.Gegevens bewaren met sessies en cookies +4.Wachtwoordbeveiliging +5.

3.

Gegevensverwerking +Databanken +

Databanktypes +Structuren +Opslag van gegevens in een databank +Voorbeelden +

1.

Content Management Systemen +Gegevens tonen +Gegevens toevoegen +Mappen en bestanden maken +Gebruikersbeheer +WYSIWYG-editors +Gegevens aanpassen +Gegevens verwijderen +

2.

Bestanden lezen +3.Een online bestandenverkenner +4.

4.

7.

Interessante boeken en software +8.

1. Algemene inleiding ^

1.1 Internetprotocollen^

Het internet ondersteunt meerdere protocollen voor gegevensoverdracht.Het “ Transfer Protocol” (FTP) voorziet in een constante verbinding. Die verbinding wordtbeëindigd als er zich een fout voordoet bij de transfer, als er een time-out optreedt op de server ofals 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 vanuw browser een URL van een website opgeeft, stuurt de browser een aanvraag naar de server. Alsde 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 naareen 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 hunwebruimte op een webserver.Via een gebruikersnaam en wachtwoord krijgen ze toegang tot de bestanden op de server. Zo’nprogramma toont een lijst van de bestanden op de server en een lijst met de lokale bestanden. Viaeenvoudige “drag and drop”-mogelijkheden kan je bestanden tussen beide verplaatsen. Menspreekt van “uploaden” bij het doorsturen van bestanden naar de server en van “downloaden” inhet geval van het binnenhalen van bestanden naar de clientcomputer.

voorbeeld van een FTP-programma: smartFTP, WSftp, Filezilla (eenopensourceprogramma)

Naast http is bij de gewone internetgebruiker vooral het SMTP - of simple mail transfer protocol ingebruik

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

2 van 38 19-02-2009 12:34

Page 3: Dynamische websites met ASP en PHP

BrowsersInternet Explorer is momenteel de meest gebruikte browser doordat hij is ‘ingebakken’ in hetWindowsbesturingssysteem. 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 vanNetscape. Daarnaast wint ook Opera aan belang. Op KDE-Linuxdesktops zwaait Konqueror deplak. 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 hetHTTP-protocol. Dit is de manier waarop ‘jan en alleman’ het internet ook kent: het bezoeken vanwebsites via browsers.Webpagina’s zijn opgemaakt in HTML hetzij “hypertext markup language”, een basisopmaaktaaldie enkel beschrijft hoe een pagina er moet uitzien. Afbeeldingen, applets en dies meer, worden nietin 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 metverwijzingen 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 zoalsWindows 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 CorelWordPerfect, dan zal die naast HTML ook RichText-opmaakcodes wegschrijven.Daarom zijn de meeste moderne tekstverwerkers ook voorzien van een mogelijkheid omopgemaakte tekstdocumenten te converteren naar HTML.ASP is de servertoepas sing van de Active Desktop, waardoor server en client tot een dynamischgeheel moesten verweven worden door ActiveX-toepassingen.De meeste webdesigners maken echter gebruik van een WYSIWYG-editor zoals MacromediaDreamweaver 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 tepassen en/of te verwijderen. Daarom is zeer snel de nood ontstaan om websites te kunnenkoppelen aan databanken.HTML voorziet echter niet in die mogelijkheid. Daarom zijn er doorheen de jaren zowel commerciëleals ‘gratis’ toepassingen ontwikkeld voor databankgestuurde websites.Meest gebruikt is zonder twijfel PHP in een combinatie met een Linux- of UNIX-server en eenMySQLdatabank.Grotere toepassingen maken gebruik van een Oracle-databank en of CGI-toepassingengeschreven in C of Perl.Ook Microsoft kon niet te na blijven en ontwikkelde met die doeleinden voor ogen ASP oftewelActive Server Pages.

1.6 Content Management ^

Tal van PHP- en ASP-sites beschikken over een systeem van content management (CMS). De

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

3 van 38 19-02-2009 12:34

Page 4: Dynamische websites met ASP en PHP

mogelijkheid tot het online wijzigen, invoeren en verwijderen van gegevens op de website biedtimmers 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 webontwikkelaarmeer ademruimte om te werken aan nieuwe projecten én een werkend content management-systeem 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 verderuitdiepen.

Protocollen zijn regels die een standaard vormen voor de communicatie tussen computers. HTTP ishet protocol voor gegevenstransport over het world wide web. Servers en browsers gebruiken httpom hypermedia (webdocumenten) te vervoeren via internet. In feite zijn het de HTTP-servers enclientbrowsers die het world wide web vormen.

We moeten dan ook goed opletten welke terminologie we gebruiken. Het WWW is een onderdeelvan het internet maar niet het internet zelf. Het WWW werd begin jaren '90 ontwikkeld door TimBerners Lee en Robert Caillou. Zij zijn de grondleggers van de meest populaire computertoepassingtot 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 vianetwerken tot een reusachtig grid zijn verbonden. Op het internet zijn diverse protocollengangbaar:

Protocol poortnummerhypertext transfer protocol (http) 80file transfer protocol (ftp) 21simple mail transfer protocol (smtp) 25trivial file transfer protocol (tftp) 69gopher protocol 70telnet protocol 23finger protocol 79

Daarnaast kennen we nog:

peer to peerIRCenz.

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 opLinux of UNIX. Google is de Linux-killerapp. Heel de zoekmachine draait op duizendenLinuxcomputers.

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 HTTPonontbeerlijk. Zoals hierboven reeds vermeld, is http een leveringsmechanisme voor afbeeldingen,

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

4 van 38 19-02-2009 12:34

Page 5: Dynamische websites met ASP en PHP

grafische bestanden, video, geluid, hypertekst en andere gegevens op het web. De ontwikkelaarsvan het web realiseerden zich niet dat HTTP de ruggengraat zou gaan vormen van een groot aantalcommerciële toepassingen. Om aan de groeiende vraag naar veiligheidsstandaarden tegemoet tekomen, ontwikkelde Enterprise Integration Technologies in 1994 het Secure Hyptertext TransferProtocol (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 tegaan, gebruikt uw browser HTTP om toegang te krijgen tot de server waarop de bron zich bevindtdie u wilt ophalen.

Als u dus op een hyperlink klikt, gebruikt de browser de URL van de koppeling om de serverervan op te zoeken.

1.

De server ontvangt de aanvraag, zoekt het document en verstuurt het naar de browser2.De server (de host van de URL, dus niet uw internetprovider!) verbreekt de verbinding3.

Technische versie:

Clientbrowser verstuurt de aanvraag voor een document naar de server waarop hetdocument gehost is:De vraag bestaat uit 3 delen: de http-methode (hierover later meer), de URL van hetdocument, de http-versie:GET /default.asp HTTP/1.1

1.

De browser verstuurt bijkomende informatie (header) over zichzelf (kan uitgeschakeldworden in sommige browsers) vb. het browsertype, het besturingssysteem, de bestandtypesdie de browser kan weergeven...User-Agent: Mozilla:4.05(WinNT; I)Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

2.

De server reageert daarop met een http-header die de volgende informatie bevat: dehttp-versie, de statuscode en een bevestiging van ontvangstHTTP/1.1 200 OK

3.

Vervolgens stuurt de server headerinformatie over zichzelfEen windowsserver:HTTP/1.1 200 OKServer: Microsoft-IIS/5.0Date: Tue, 02 Mar 2004 20:13:08 GMTX-Powered-By: ASP.NETConnection: Keep-AliveContent-Length: 3945Content-Type: text/htmlSet-Cookie: ASPSESSIONIDQQQQSATT=KLFDCPHBMOHFFAHNMMIFOBHB; path=/Cache-control: private

Een Unixserver:HTTP/1.1 200 OKDate: Tue, 02 Mar 2004 20:14:13 GMTServer: Apache/1.3.29 (Unix) mod_gzip/1.3.26.1a mod_perl/1.28SLASH_LOG_DATA: shtmlX-Powered-By: Slash 2.003000X-Fry: No, no, I was just picking my nose.Connection: closeContent-Type: text/html; charset=iso-8859-1

4.

Als het verzoek van de client succesvol was, verstuurt de server de gevraagde data naar declient.

5.

De verbinding wordt verbroken.6.

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, alshet document niet meer op de server staat, als de site verhuisd is... Dan stuurt de server eenandere statuscode die in de browser wordt weergegeven met een foutmelding.

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

5 van 38 19-02-2009 12:34

Page 6: Dynamische websites met ASP en PHP

The page cannot befoundThe page you are looking for might havebeen removed, had its name changed, or istemporarily unavailable.Please try the following:

If you typed the page address in theAddress bar, make sure that it isspelled correctly.Open the www.ardeco.be home page,and then look for links to theinformation you want.Click the Back button to try anotherlink.

HTTP 404 - File not foundInternet InformationServices

Technical Information (for supportpersonnel)

More information:Microsoft Support

Een overzicht van alle statuscodes: http://www.december.com/html/spec/httpstat.htmlOp Apacheservers (Unix, Linux) kan je de foutpagina's ondervangen met je eigen foutpagina's. Deinstructies voor die "custom error pages" kan je opnemen in het bestand ".htaccess" in derootmap van je website. Op Windowsservers is dit ook mogelijk mits enige aanpassing in hetbestand "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 geenstandaard voor het uitwisselen van multimedia. Bovendien konden enkel teksten die opgemaaktwaren in VS-ASCII worden doorgestuurd.Multipurpose Internet Mail Extensions (MIME) is een technische specificatie voor de overdracht vanmultimediabestanden (afbeeldingen, geluid, tekst, video...) via internetmail. Een MIME-berichtbevat 2 onderdelen:

een header met informatie over het bestand dat volgt:Bestandstype Subtype (voorbeelden)Application (toepassing) msword, wordperfect, pdf...Audio (geluid) aiff, x-pn-realaudioImage (afbeelding) jpeg, tiff, gif, png...Message (bericht) RFC822Multipart digest, form-data, header-set, mixedText HTML, iuls, plain, richtext, tab-separated-valuesVideo avi, mpeg, quicktime

Voorbeeld van MIME-header: Content-type: application/msword

1.

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

6 van 38 19-02-2009 12:34

Page 7: Dynamische websites met ASP en PHP

Het eigenlijke bestand (entity body)2.

Zoals je hogerop hebt kunnen lezen, stuurt de client in zijn header een overzicht mee van deMIME-indelingen die door de browser kunnen weergegeven worden. Als de client de ontvangengegevens niet kan weergeven, dan kan hij eventueel een insteekmodule (plugin) downloadenwaarmee 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 aanvraagtvia de adresbalk van uw browser een verbinding dient gemaakt de worden. Eens de server hetgevraagde bestand heeft doorgestuurd, verbreekt de server de verbinding met de respectievelijkebrowser. 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 enweergegeven worden. Dit proces noemen we het "parsen" of "renderen" van het document.

Netscape en Mozilla gebruiken hiervoor de Gecko-engine, Konqueror en Safari deKTML-engine.

Bij de parsing komt de browser verwijzingen naar andere bestanden (zoals afbeeldingen enz.) in hetbestand tegen. In de eerste HTTP-versies moest ook hier telkens een nieuwe verbinding met dehostserver worden aangemaakt wat steeds leidde tot vertraging bij het aanleveren en weergevenvan 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 deverbinding echter standaard open tot ook alle gelinkte bestanden zijn binnengehaald. Pas daarnaverbreekt de browser of de server de verbinding.

Voordelen: http kan meerdere 'gelijktijdige' aanvragen van clienten verwerken want detransactie met die ene client is afgesloten.De webprogrammeurs moeten allerlei kunstgrepen uitvoeren om informatie van de clients tebewaren (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 dieaanvraag in te dienen.

Elke methode bestaat uit 3 delen:

de soort1.de URL van het document2.de http-versie3.

Bijvoorbeeld:GET / HTTP/1.1Host: www.hakendover.beConnection: closeAccept-Encoding: gzipAccept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, application/x-shockwave-flash, */*Accept-Language: en-us,nl-be;q=0.5User-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-

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

7 van 38 19-02-2009 12:34

Page 8: Dynamische websites met ASP en PHP

sniffer.net/

In het bovenstaande voorbeeld gebruikten we de HTTP-methode GET. Dat is destandaardmethode die een browser gebruikt bij het opvragen van een URL of een bestand. Deserver reageert met de statuscode, de headers van de MIME-berichten en de gevraagdegegevens.

Met de methode HEAD vragen we enkel de HEADER van een webdocument op, dus niet deENTITY BODY. Dit is zinvol als we informatie willen over de aanmaakdatum, het bestandstype of degrootte van het webdocument, het servertype...

De methode POST richt zich op een serverprogramma vb. een CGI-script, een ASP- ofPHP-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 beingrequested. Your CGI program will receive the encoded form input in the environment variableQUERY_STRING. The GET method is used to ask for a specific document - when you click on ahyperlink, GET is being used. GET should probably be used when a URL access will not change thestate of a database (by, for example, adding or deleting information) and POST should be usedwhen an access will cause a change. Many database searches have no visible side-effects and makeideal 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 conditionalGET method requests that the identified resource be transferred only if it has been modified sincethe 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=machttp://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.htmlMeer info over het URL-encoded-format: ??

2.2.5. Samenstelling van een URL ^

<soort>:<soortspecifiek gedeelte>

De volledige syntaxis voor een http-URL is:

<http://<host>:<poort>/<pad>?<zoekgedeelte>

Zoals hierboven reeds vermeld, is de query in het zoekveld achter de URL opgesteld in hetURL-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 tekensgebruikt. 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 basisopmaaktaaldie enkel beschrijft hoe een pagina er moet uitzien. Afbeeldingen, applets en dies meer, worden nietin 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 metverwijzingen naar andere teksten of bronnen.

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

8 van 38 19-02-2009 12:34

Page 9: Dynamische websites met ASP en PHP

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 inHTML-formaat. Bekijk de uitvoer in een browser.In de headsectie van het document wordt meta-informatie over het documentweggeschreven (keywords, author, title, description…) waardoor zoekrobots ofdatabases makkelijk een bepaalde pagina of website kunnen vinden.

De eigenlijke opmaak van de webpagina wordt weggeschreven in de “body” van het html-documenttussen 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 deonderstaande 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 markuplanguage) dat de opmaak van documenten beschrijft. Meer informatie en een uitgebreidehandleiding over HTML vindt u op http://www.handleidinghtml.nl/. De specificaties van HTML zijnopgesteld door het W3C (het World Wide Web Consortium), een organisatie van onafhankelijken envertegenwoordigers uit softwarefirma's. Momenteel zit HTML aan versie 4 en de taal zal en kan nietmeer verder ontwikkeld worden. Wat is hiervan de oorzaak?

Het grote nadeel van HTML is dat het opmaak en inhoud door elkaar haalt. De langverwachteopvolger XML moet dit euvel verhelpen. Inhoud en opmaak worden over verschillende documentengescheiden.Bijvoorbeeld: het XML-document (extended markup language) bevat de inhoud, eenXSL-bestand bevat de opmaakgegevens zoals gekozen lettertype, achtergrondkleur enz. Een

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

9 van 38 19-02-2009 12:34

Page 10: Dynamische websites met ASP en PHP

aanpassing aan de style sheet (=stijlsjabloon) zal de lay-out van alle gekoppelde pagina's meteenwijzigen 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 deopmaak van de verschillende onderdelen van een webpagina wordt weggeschreven.)

Een vergelijking van SGML en XML vind je op http://www.w3.org/TR/NOTE-sgml-xml.html

Voorlopig bestaat er een tussenoplossing: XHTML werd ontwikkeld als overgang tussen HTML enXML. XHTML hanteert een veel strengere syntaxis.Het dient gezegd dat ook binnen klassieke HTML reeds gebruik kan gemaakt worden vanstijlsjablonen 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 zijnpaginaoverschrijdende tags die bijvoorbeeld door zoekrobots worden gelezen bij het cachen ofbezoeken van uw site. Wilt u op uw website de juiste bezoekers krijgen en uiteraard ook veelbezoekers, 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 detalloze misbreuken op dat vlak, zijn er nog maar weinig zoekrobots die met de keywords rekeninghouden. Google bijvoorbeeld list wel de METADATA onder DESCRIPTION, naast de alt-attributen bijafbeeldingen en de tekst van de pagina zelf.Niet alle zoekrobots gaan op dezelfde manier tewerk. Bovendien veranderen de spiders ook vaakhun zoekalgoritme zodat misleiding eerder moeilijk is.

Een groep ontwikkelaars met de welluidende naam "Dublin Core" hebben specificaties ontwikkeldwat betreft METATAGS. Hun richtlijnen zijn goedgekeurd door het W3C

Een klein voorbeeld van Dublin Core-metatags: KLIKEen 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 commentaarregelsof metatags is niet meer zinvol. De meeste zoekrobots negeren die informatie en webmasters diedaarin iets te ver gaan, besparen zich beter de moeite. Vaak worden zulke pagina's gewoongenegeerd 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 hetattribuut "alt" van een afbeeldingstag is opgeslagen. Het verbergen van "keywords" in "alts" is duswel -voorlopig dan toch nog- zinvol.

<img src="foto.jpeg" alt="walt disney, mickey mouse, donald duck, tekenfilm"title="De tekenfilmsite">

*In het attribuut "alt" kan de webmaster een alternatieve slagzin noteren die moet getoondworden 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 afbeeldingbeweegt. Andere browsers doen dit niet. Wil je ook daar het zelfde effect bereiken, dan kan je bestook het attribuut "title" toevoegen.

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

10 van 38 19-02-2009 12:34

Page 11: Dynamische websites met ASP en PHP

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 zondermeer 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 jezulke bestanden veilig kan afsluiten van de surfer.

Toch bestaat er een manier om spiderbots doelbewust de toegang tot bepaalde mappen ofbestanden te verhinderen. Plaats in de rootmap van je site het bestand "robots.txt". De meestespiderbots 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: RoverdogDisallow: /

In het onderstaande voorbeeld verhinderen we de googlebot het bestand cheese.htm op te nemenin zijn listing:User-agent: googlebotDisallow: cheese.htm

Meer uitleg en tutorials vind je op http://www.robotstxt.org/wc/robots.htmlOok 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.htmlContactadressen 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 vansites slaan met behulp van Javascript informatie over de gebruiker tijdelijk op in een bovenliggendframe van een webpagina. Doordat zoekmachines standaard niet noodzakelijk het totale framelisten. De bezoekers komen via de zoekmachine op een enkel frame terecht waardoor het Javascriptniet meer functioneert.Een voorbeeld: - De pagina "index.html" bestaat uit twee frames d.w.z. twee afzonderlijkewebpagina's:

top.html - deze pagina is slechts 1 pixel hoog en wordt door de surfer niet opgemerkt. Hierinwordt een lijst van de producten bewaard die de surfer in zijn online winkelwagentje heeftopgeslagenwinkel.html - deze pagina krijgt de surfer te zien. Hierbinnen kan de bezoeker zijn productenkiezen

Google list enkel "winkel.html", met het gekende gevolg.

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

11 van 38 19-02-2009 12:34

Page 12: Dynamische websites met ASP en PHP

Voor dit veelvoorkomend probleem biedt Javascript een oplossing:

<script language="JavaScript"><!--if (top.location==self.location){ top.location.href="index.html";}//--></script>

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 tevinden. Zodra iemand een zoekterm intikt die (binnen hetzelfde semantische veld) nauw bij datthema aansluit, zal je pagina automatisch een hogere rangschikking in de resulterende lijstinnemen. Een voorbeeld: draait je pagina rond tuinbouw, dan weet de bot dat tot die pagina oobegrippen zoals "rotstuin", "planten", "bloemen", "vijver" enzovoort behoren. Staan die trefwoordeneffectief op je site, dan heeft je pagina recht op een hogere rangschikking. Ideaal zijn zoveelmogelijk verschillende begrippen uit hetzelfde betekenisveld. Anderzijds neem je het best niet teveel 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 beknoptehoeveelheid trefwoorden rond een bepaald thema bevatten. Via een "metarefresh" schakelt depagina dan automatisch door naar een voor de surfer aantrekkelijker pagina. Een te snelle refreshwordt 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 hetmoment 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 slechtererangschikking.

3.2.7 Cloaking ^

Omdat browsers maar ook zoekrobots werken via het HTTP-protocol en onderliggend via TCP/IP kanje van elke bezoeker de USER_AGENT en het IP-adres opvragen. Op die manier beschik je over demogelijkheid 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 enUSER_AGENT-benamingen van de zoekrobots. Want als bots zoals Google op de cloakingtechniekstuiten...!

Voor meer informatie:

http://www.spiderhunter.com/spiderlisthttp://www.ip-delivery.comhttp://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 jesite te kiezen. Best werk je met een KEI-index (Keyword Effectiveness Index): voor een optimaaltrefwoord koppelt die een hoge populariteit aan een lage concurrentie. Hoe hoger de KEI-waarde,

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

12 van 38 19-02-2009 12:34

Page 13: Dynamische websites met ASP en PHP

des te beter je trefwoord.Een aantal online tools kunnen een handje helpen:

http://www.netmechanic.comhttp://www.pwqsoft.comhttp://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 eenzeer eenvoudige opmaaktaal en dat is misschien precies de oorzaak van haar succes. Iedereen kande taal zonder al te veel inspanningen leren én de browsers staan fouten toe! Bij een klassiekeprogrammeertaal zijn afwijkingen of fouten niet toegestaan.HTML heeft daardoor echter ook heel wat beperkingen. Het maken van links en hyperlinks is zowatde 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 verderdoorontwikkeld. Alhoewel het stopzetten van een ontwikkeling in de computerwereld gelijk staatmet het sterven van een stille dood, denken we dat het gebruik van HTML nog niet meteen gaatstoppen. Immers, er bestaan heel wat andere manieren om interactie en dynamiek aan je paginatoe te voegen.

4.1.2 Compileren of interpreteren? ^

Een webpagina of een volledige website biedt niet dezelfde uitgebreide mogelijkheden als eenklassiek computerprogramma. Ingewikkelde rekenintensieve toepassingen, grafische techniekenenz. 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 andereprogrammeertaal (vb. C, C++, Fortran, Cobol...). Computers kennen doorgaans slechts 2toestanden nl. "aan" of "uit" en verstaan enkel lange reeksen van nullen of enen die door deprocessor worden uitgevoerd. Om het voor mensen wat leesbaarder te maken zijnprogrammeertalen 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 zetde programmeercodes om in de door de processor uit te voeren machinetaal. Of: een compilermaakt een voor de computer uitvoerbaar (op Windows: executable *.exe) programma.Klassieke webpagina's worden niet gecompileerd maar gewoonweg naar de clientbrowser verzondenen daar door de browser gerenderd. Het is echter wel mogelijk om een programmascript in eenwebpagina op te nemen.

Bijvoorbeeld:<script language= "Javascript"> hier komt het script</script>

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

13 van 38 19-02-2009 12:34

Page 14: Dynamische websites met ASP en PHP

Een script wordt niet gecompileerd maar geïnterpreteerd door een module in de browser of eenmodule op de server. Of het script gaat niet door een compiler maar door een interpreter die hetscript interpreteert en daarna uitvoert. Uiteraard blijven de mogelijkheden veel beperkter dan bijeen klassiek programma. En dat is maar goed ook want een online script moet niet dezelfdesysteemtoegang- 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 metNetscape en Microsoft. De officiële ECMA-262-standaard moet ervoor zorgen dat er wat meersamenhang is tussen de webscriptimplementaties van Netscape, Microsoft en andere. ECMA-262 isin 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 eeneigen 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 ECMAStandard 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 Assemblyof 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 regularexpressions, better string handling, new control statements, try/catch exception handling, tighterdefinition of errors, formatting for numeric output and minor changes in anticipation of forthcominginternationalisation facilities and future language growth. Work on the language is not complete.The technical committee is working on significant enhancements, including mechanisms for scriptsto be created and used across the Internet, and tighter coordination with other standards bodiessuch as groups within the World Wide Web Consortium and the Wireless Application ProtocolForum." (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 MacromediaFlash is bijvoorbeeld een implementatie van ECMA-script. Macromedia's highend-multimediatoolDirector had tot voor kort enkel zijn eigen scripttaal Lingo aan boord. Vanaf versie MX 2004 is erook Javascriptondersteuning in opgenomen. Dit wijst nog maar eens op de populariteit vanJavascript en ECMA-script en een webontwikkelaar kan dus ook niet zonder enige kennis vanJavascript.

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 eenprogrammeertaal.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 denamen 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 SunMicrosystems. In 1995 werd Java heel populair, maar doordat de taal zo ingewikkeld was, waren ermaar weinig mensen die er goed mee om konden gaan. Het bedrijf Netscape zag dat er behoeftewas aan een taal met veel van de mogelijkheden van Java, maar die wel eenvoudig te leren was endie verder direct door de browser uitgevoerd kon worden.In de tweede helft van 1995 begonnen Netscape en Sun een samenwerking die de creatie van

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

14 van 38 19-02-2009 12:34

Page 15: Dynamische websites met ASP en PHP

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 uiteindelijkenaam: 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. debedoeling van Sun Microsystems was om een programmeertaal te ontwikkelen waarvan deprogramma's zonder meer op elk computerplatform kunnen uitgevoerd worden. Bijprogrammeertalen als C en C++ moet een programma voor elk besturingssysteem afzonderlijkworden gecompileerd en vaak moeten ook hele stukken programmacode worden aangepast om zeop verschillende systemen (vb. MacOS, Windows...) te laten werken.Een Javacompiler vertaalt de programmacode naar bytecode en dus niet naar machinetaal. Diebytecode kan uitgevoerd worden door een soort van virtuele machine, de Java Virtual Machine (ofRuntime Environment), die op zijn beurt de bytecode vertaalt naar voor de computer begrijpelijkeinstructies. Voor elk besturingssysteem bestaat er uiteraard zo'n JVM. Zo'n JVM kan ook opgeroepenworden door een browser en aldus krijgen we de mogelijkheid om Javaprogramma's in de browseruit 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=320height=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: IntegratedDevelopment Environment) nodig. Een IDE bestaat uit de volgende onderdelen.

een java-editor1.een compiler2.een JVM3.

Voorbeelden van IDE's:

JBuilder van BorlandVisual J++ van MicrosoftVisual Café van SymantecKawa van TekToolsJDeveloper van OracleJava Workshop van SunVisual Age van IBMBluette 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 inom onze webpagina's interactief te maken.Voorbeelden van mogelijke toepassingen:

controle of een formulier is ingevuldcontrole schermresolutie om de surfer naar een aangepaste pagina te stureneen "rollover"-effect op een foto of link...

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

15 van 38 19-02-2009 12:34

Page 16: Dynamische websites met ASP en PHP

We verwijzen u voor een beperkte tutorial en de mogelijkheden van client-side JavaScript door naaronze Javascriptcursus.

Server-side JavaScript wordt uitgevoerd door een server waarna het resultaat wordtteruggestuurd 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. Hetvoordeel tegen pixelplaatjes is dat vectorafbeeldingen zonder kwaliteitsverlies kunnen vergrootworden en dat de bestandsomvang zeer klein blijft.Na de overname door Macromedia groeide het succes van Flash gestaag als een middel omanimaties op websites mogelijk te maken.Voordien werden (en dat is eigenlijk nog altijd zo) enkel geanimeerde gifafbeeldingen standaardondersteund door de browsers. Willen we dat onze browser flashanimaties weergeeft, dan dienenwe 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 deweergave. Een aantal browsers op het Linuxplatform loopt wat achter wat betreft de ondersteuningvan de nieuwste Flashplayers omdat de firma Macromedia zelf geen players voor dat platformontwikkelt.Veel mensen verwarren de Flashplayer (=plugin voor Flash) met de Shockwaveplayer (eveneensvan 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 aardvan 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 dynamischeserverscripttaal Coldfusion, maar even goed met ASP, PHP en XML. Sinds versie MX (6) is het ookmogelijk 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: "MacromediaFlash Communication Server MX 1.5 provides a complete development and deployment platform forincluding 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 featuressuch as streaming video, online webcam chat communities, live event broadcasts, and more to theirwebsites."(Bron: www.mensys.nl)

http://www.xi.be/igorhttp://www.flashkit.com

VOORBEELDEN VAN SITES IN FLASH

http://www.derbauer.dehttp://www.liquidjourney.comhttp://www.topdogs.be

5. Vorm en inhoud scheiden ^

5.1 Klassieke opmaak ^

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

16 van 38 19-02-2009 12:34

Page 17: Dynamische websites met ASP en PHP

In HTML staan de inhoud en de opmaakgegevens door elkaar. Dat is bijzonder lastig als je nadien delay-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 NewRoman, 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 bovenstaandecode in een HTML-pagina opnemen zien we enkel een tabel met twee kolommen en twee rijen. Jekan 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. Metbehulp 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 tussentabelcellen onderling m.a.w. dat alle tabelcellen er gelijk gaan uitzien. Maar ook dit probleem kanverholpen worden met CSS.We kunnen namelijk verschillende "klassen" definiëren. Standaard zien de tabelcellen eruit zoals inhet bovenstaande voorbeeld, maar we kunnen een klasse met de naam "white" definiëren op devolgende 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' ...>".

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

17 van 38 19-02-2009 12:34

Page 18: Dynamische websites met ASP en PHP

We slaan al deze gegevens op in het externe bestand met als naam bijvoorbeeld "extern.css". Alswe dit opmaakbestand willen gebruiken in een webpagina moeten we in de headsectie van hetdocument de regel "<link href="http://www.ardeco.be/css/extern.css" rel="stylesheet"type="text/css"> " toevoegen.

Interessante links:

http://www.webreference.com/authoring/style/sheets/layout/advanced/http://www.dynamicdeezign.com/csscur/lesson4.htmlhttp://www.designplace.org/tutorials.php?page=1&c_id=9http://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 wereeds vermeld dat HTML niet verder wordt doorontwikkeld. Bedoeling is HTML te vervangen doorXML oftewel eXtensible Markup Language. XHTML werd speciaal ontwikkeld om de overgang tussenHTML 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 eenvoudigstemanier om de overstap te maken om te beginnen je pagina's in geldige XHTML code teschrijven.Voor XHTML is een schone en logische code vereist. Hierdoor krijg je als het goed iscompactere 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 inverschillende browsers.

Voor meer info, http://www.khlim.be/~cdaniels/XHTML.html en http://www.w3.org/TR/xhtml11/xhtml11_dtd.htmlIn 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 eigenbestandstypes. MS Word bijvoorbeeld slaat zijn documenten op met de extensie *.doc. Datbestandstype is gesloten d.w.z. dat men enkel via "reverse engineering" achter de specificaties vandat bestandstype kan komen. Andere bestandstypes zijn open bijvoorbeeld het*.RTF-formaat isgedocumenteerd en door iedereen te integreren. Hetzelfde geldt voor tal van bitmapbestandstypeszoals *.JPEG en *.TIFF. HTML-bestanden zijn doorgaans als pure tekstdocumenten opgeslagen inUNICODE- of ASCII-formaat.

"ASCII stands for American Standard Code for Information Interchange. Computers can onlyunderstand numbers, so an ASCII code is the numerical representation of a character such as 'a' or

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

18 van 38 19-02-2009 12:34

Page 19: Dynamische websites met ASP en PHP

'@' or an action of some sort. ASCII was developed a long time ago and now the non-printingcharacters are rarely used for their original purpose. Below is the ASCII character table and thisincludes descriptions of the first 32 non-printing characters. ASCII was actually designed for usewith teletypes and so the descriptions are somewhat obscure. If someone says they want your CVhowever 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 theycan 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 diversecomputersystemen kan uitwisselen. Een zogenaamd *.txt-bestand bevat platte tekst enzogenaamde ASCII-codes. Voor niet-westerse taalsystemen is er UNICODE ontwikkeld.Nadeel van veel tekstformaten (*.rtf, *.doc, *.wpd, *.HTML...) is dat ze opmaak en gegevensvermengen. Bekijk maar eens de inhoud van een RTF-bestand.XML moet aan die impasse een einde maken. Dankzij het op SGML gebaseerde XML moetenbestanden universeel uitwisselbaar worden. Nog belangrijker is dat ze een strict onderscheid makentussen 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 iseen internationale reeks afspraken die het uitwisselen van gegevens tussen verschillende soortenbedrijven 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ërenDe namen van tags zijn hoofdlettergevoelig (case-sensitive) d.w.z. dat een openings- en eensluittag eenvormig moeten zijnEen XML-document voldoet aan strakke regelsJe kan een verwijzing opnemen naar een DTD (document type deifnition) d.i. een apartbestand waarin is opgenomen welke elementen in je XML-document moeten of kunnenvoorkomen. Een DTD bepaalt de "grammatica" van je XML-bestandEen 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>

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

19 van 38 19-02-2009 12:34

Page 20: Dynamische websites met ASP en PHP

<paginas> 320 </paginas> </boek></bibliotheek>

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 natuurlijkniets van opmaak te bemerken. Daarvoor moeten we onze toevlucht nemen tot een stijlsjabloonzoals CSS of XSL. We maakten reeds kennis met CSS en een CSS-stijl op een XML-bestandtoepassen 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 dediverse "nodes" en "objecten" in het XML-bestand rechtstreeks aan. In de toekomst zal deCSS-standaard opgevolgd worden door XSL, eXtensible Style Language. Zoals het begrip"extensible" (=uitbreidbaar) laat vermoeden hebben we hier veel meer controle over de opmaakvan de pagina's. XSL lijkt ook veel meer op een programmeertaal. Ze maakt het mogelijk dat weXML-gegevens filteren, sorteren enz.Een variant van XSL is XSL-FO die zal ingezet worden voor geformatteerde pagina's in bijvoorbeeldDTP-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:

<?xml version="1.0"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"><xsl:template><xsl:for-each select="bibliotheek/boek"><h1><xsl:value-of select="titel"/></h1><h2><xsl:value-of select="auteur"/></h2><b><xsl:value-of select="uitgever"/></b><br/><i><xsl:value-of select="paginas"/></i></xsl:for-each></xsl:template></xsl:stylesheet>

5.4.2 XML en Javascript ^

De ondersteuning voor XML laat nog vaak te wensen over bij veel browsers. In Internet Explorer ishet bijvoorbeeld mogelijk om XML-gegevens in een webpagina in te lezen met behulp vanJavascript. Microsoft voorziet ook in die mogelijkheid door het opnemen van Active X-controls in eenwebpagina. Het onderstaande voorbeeld beantwoordt aan de vooropgestelde standaarden van hetW3C.

<html><head>

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

20 van 38 19-02-2009 12:34

Page 21: Dynamische websites met ASP en PHP

<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>

</body></html>

5.4.3 XML en Flash ^

In Flash is het native mogelijk om met XML te werken. Een verregaande uitleg over Flash en XMLzou ons in dit bestek te ver leiden. Een combinatie van beide biedt ook heel wat mogelijkheden voorhet 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

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

21 van 38 19-02-2009 12:34

Page 22: Dynamische websites met ASP en PHP

nieuwe opmaaktaal. DHTML maakt het mogelijk om elementen in een webpagina te wijzigen tijdensde weergave. Bijvoorbeeld: je beweegt met je muis over een afbeelding en er komt een andereafbeelding tevoorschijn. Dat kan toch ook met Javascript hoor ik u al denken. Inderdaad, DHTML iseen verzameling van verschillende technieken en methoden om het uitzicht van HTML-elementen ineen webpagina nog tijdens de weergave in de browser te wijzigen. Hierdoor gaan webpagina's zichgedragen zoals normale computerapplicaties. Denk hierbij bijvoorbeeld aan een tekstverwerker: jekan de tekst selecteren, het uitzicht van de tekst veranderen door op knoppen te klikken, deverschillende programmafuncties zijn toegankelijk via een uitklapbaar menu.... We kennen het vanbij de meeste computerprogramma's, maar op webpagina's is dat met pure HTML niet mogelijk. Eenstandaardwebpagina is een "eindproduct", zoals bijvoorbeeld een krantenpagina. Op een DHTML-pagina kan de gebruiker 'wijzigingen' aanbrengen -maar dat wil daarom nog niet zeggen dat diewijzigingen ook worden doorgevoerd op de server. Een paar voorbeelden:

een uitklapmenu met toegang tot de verschillende onderdelen van een websitetekstopmaak in een textarea-formulierveldPowerpoint-achtige transities bij het overschakelen tussen webpagina's in Internet Explorerversleepbare objectengeanimeerde lagen...

DHTML is eigenlijk een combinatie van

HTMLJavascriptCascading Style SheetsVBscript (Microsoft)JScript (Microsoft)het gebruik van (HTML)-lagenhet Document Object Model (W3C)

DHTML is wat anders dan "dynamische webpagina's" in PHP of ASP. Bij deze laatste techniekenworden webpagina's dynamisch aangemaakt op de server. Met behulp van DHTML kunnen pagina'sworden hertekend in de browser zonder dat ze opnieuw moeten geladen worden of opgevraagd aande 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 hebbenontwikkeld. Internet Explorer biedt op dit vlak ontzettend veel mogelijkheden. Maar veel van dieIE-technieken kunnen niet weergegeven worden in andere browsers zoals Mozilla, Netscape ofKonqueror. Het World Wide Web Consortium (W3C), de organisatie die de verdere ontwikkeling vanhet web en webgeoriënteerde talen superviseert, tracht te komen tot een gemeenschappelijkestandaard die door de diverse browsers kan geïmplementeerd worden. Dit moet het voorwebontwikkelaars eenvoudiger maken om DHTML-applicaties te ontwikkelen zonder telkens voorelke 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 eenscripttaal zoals MS JScript of Javascript. Om bijvoorbeeld de weergave van een tekst in eenwelbepaalde paragraaf te kunnen veranderen:

<p id="Alinea" onClick="document.getElementById(‘Alinea’).firstChild.nodeValue=’<b>Uheeft op de paragraaf geklikt. </b>’">Dit is de tekst in een paragraaf</p>

Een werkend voorbeeld voor Microsoft Internet Explorer:

<html><head>

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

22 van 38 19-02-2009 12:34

Page 23: Dynamische websites met ASP en PHP

<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 ObjectModel van DHTML laat je toe elke HTML-tag via zijn attribuut "id" of "name" aan te spreken metbehulp van een scripttaal.Als we bijvoorbeeld een kop op onze pagina als id "kop" geven, dan kunnen we met behulp vanJavascript alle kenmerken zoals tekstkleur, lettertype, grootte, inhoud... realtime veranderen. Letop: de veranderingen worden niet doorgevoerd in de broncode van de pagina, maar wel in hetgerenderde beeld in de browser.Het DOM moeten we beschouwen als een soort van boomstructuur met betrekking tot de opbouwvan 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 iseen "childnode" van de bodytag. Bekijk de afbeelding. Bij een tabel zijn alle data (td) childnodesvan de parentnode "table". Bekijk de afbeelding.

"The Document Object Model evolved from the DHTML Object Model, but one may argue that it ismore like a revolution than an evolution. The DHTML Object Model lets you access and update HTMLobjects individually. Each HTML tag can be accessed and manipulated via its ID and NAMEattributes. Each object sports its own properties, methods, and events. You can use the propertiesto 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 amodel for the whole document, not just for a single HTML tag. The Document Object Modelrepresents a document as a tree. Every node of the tree represents an HTML tag, or a textual entryinside an HTML tag. The tree structure accurately describes the whole HTML document, includingrelationships 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 reasonbeing that each tag's object includes different properties, methods, and events. There are tens ofHTML tags and tens of properties, methods, and events per each. Most relevant textbooks includean object map that helps you find the right property, method, or event for your particular need. Youdon't need any manual to access and update an HTML page with the Document Object Model. Whenlooking at HTML code, you can figure out what the tree model of the page looks like, and how tonavigate to the properties you need. The Document Object Model allows you to update everytextual entry on the page, and only textual entries. To change a textual entry with the DHTMLObject Model, most objects support the innerHTML property which you can access and update. Tochange a textual entry with the Document Object Model, you just change the value of the relevanttree node with the nodeValue property.The Document Object Model allows you to navigate along the document tree, up and down, and tothe sides. You can use the child, parent, and sibling relationships to go from anywhere to anywhereon your page tree. The DHTML Object Model does not include a tree representation of the page andthus does not provide any navigation capabilities. Once you start with a tag's object, you cannot

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

23 van 38 19-02-2009 12:34

Page 24: Dynamische websites met ASP en PHP

move to other tags in its vicinity. Certain tags, such as the tag, provides specific properties andmethods to reach content elements, but the representation is not as consistent and intuitive as thatof the Document Object Model. In the case of thetag, for example, you need to look up in the manual and find out that the textual entry of the i,j cellcan be accessed via tableObj.rows[i].cells[j].innerHTML. You don't need any manual to access it viathe Document Object Model. Just look at the HTML code and you can access every field there withsimple 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 isexactly what it seems. They add new tags, delete existing tags, and move tags around thedocument. The DHTML Object Model does not let you modify the document. When using the DHTMLObject 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 notsupport event handling. The DHTML Object Model provides a wide spectrum of events and eventhandling 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 eenatttribuutknooppunt en de eigenlijke tekst of kop is een tekstknooppunt. Het element h1 heeftin 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 ingezetkan worden bij alle XML-compatibele talen. Het DOM is geen scripttaal op zich maar omschrijft hoescripttalen de verschillende elementen van een opmaaktaal dynamisch kunnen benaderen.Toch willen we weer eens wijzen op de verschllen tussen de verschillende browsers. InternetExplorer spant de kroon zowel qua mogelijkheden als qua incompatibiliteit.

Om goede DHTML te kunnen schrijven die crossbrowser en crossplatform werkt, verwijzen we udoor naar de specificaties op de volgende sites:

http://www.w3.org/DOM/http://www.w3schools.com/dom/default.asphttp://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 eventueelJavascripts, 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 indit geval van statische webpagina's. De informatie die in de pagina's is opgenomen zit verpakt inhet HTML-bestand. Willen we het uitzicht van de website veranderen, dan moeten we elke paginaopnieuw aanmaken.

Met dynamische webpagina's is dat niet het geval. De informatie over bijvoorbeeld producten wordtingevoerd in databanken. Met behulp van een scriptingtaal als PHP of ASP worden de webpagina'sgevuld met die gegevens uit de databank of worden de webpagina's dynamisch opgebouwd envervolgens naar de clients doorgestuurd.

7.2 Toepassingen ^

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

24 van 38 19-02-2009 12:34

Page 25: Dynamische websites met ASP en PHP

GastenboekenForumsOnline winkels (met winkelwagentje)'Roterende' reclamebannersNieuwssitesZoekmachines

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, eenMySQLdatabank 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-toepassingengeschreven in C of Perl.Ook Microsoft kon niet te na blijven en ontwikkelde met die doeleinden voor ogen ASP oftewelActive Server Pages.

Een beperkt overzicht:

ASP (ontwikkelaar: Microsoft):ASP staat voor Active Server Pages. ASP is een servertechniek ontwikkeld door Microsoft enaldus ook bedoeld voor Windowsservers. Toch is het ook in te zetten op een Linux-ofUNIX-server met behulp van Chillisoft-software. ASP is geen programmeertaal maar maakthet 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 standaardscriptingtalen voor ASP. Iedere programmeur kan naar keuze zijn geliefkoosdeprogrammeertaal gebruiken om een dynamische site te ontwikkelen (Visual Basic.NET, VisualC++.NET, C# enz.).ColdFusion (ontwikkelaar: Alliare/Macromedia):ASP en PHP zijn scriptgebaseerde omgevingen. PHP lijkt bijvoorbeeld heel sterk op Javascriptomdat het eveneens de ECMA-standaard volgt. ColdFusion is tag-gebaseerd. Dit wil zeggendat de HTML-tagset wordt uitgebreid met een reeks nieuwe tags. Zulke tags starten steedsmet 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 opJavascript en aldus ook op PERL en C. PHP is volledig ontwikkeld in opensource (GPL) met alsgevolg dat duizenden programmeurs wereldwijd meewerken aan allerlei uitbreidingen.Oorspronkelijk is PHP ontwikkeld voor UNIX en Linux, maar ondertussen zijn er versies voorzo wat alle servers. Waarschijnlijk is PHP momenteel de meest gebruikte en verspreideserverside scriptingtaal. PHP bestaat voor zo wat alle servers en platformen. Meestal zien wehet opduiken in combinatie met de (eveneens opensource) webserver ApacheJSP (ontwikkelaar: Sun)JSP staat voor Java Server Pages. Het is gebaseerd op de platformonafhankelijkeprogrammeertaal Java. Er zijn versies voor de webservers Apache, IBM Websphere en JRun(Alliaire, Macromedia).

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

25 van 38 19-02-2009 12:34

Page 26: Dynamische websites met ASP en PHP

ASP, PHP, Javascript en Actionscript

Variabelen:

Variabelen kunnen we op eenvoudige wijze definiëren:

VbScript Javascript/Actionscript PHP

Dim variabelenaam

of

variabelenaam

var variabelenaam

of

variabelenaam

$variabelenaam

Een dynamische pagina wordt "geschreven" op de server. D.w.z. we vullen de paginabijvoorbeeld dynamisch op met gegevens uit een databank. Omdat een browser enkel HTMLkan weergeven, moeten we met behulp van een scripttaal HTML gaan schrijven.

VbScript Javascript PHP

response.write("<b>Dit iseen vette tekst</b>")

document.write("<b>Dit iseen vette tekst</b>")

echo("<b>Dit is eenvette tekst</b>")

We vragen gegevens op die verzonden zijn met formulier (methode "POST") of met een URL(methode "GET").

VbScript Javascript/Actionscript PHP

variabele=request.form("variabele")

variabele=request.querystring("variabele")

$variabelenaam=$_POST["variabele"]

$variabelenaam=$_GET["variabele"]

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

26 van 38 19-02-2009 12:34

Page 27: Dynamische websites met ASP en PHP

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

27 van 38 19-02-2009 12:34

Page 28: Dynamische websites met ASP en PHP

PROGRAMMASTRUCTUREN

In Vbscript (ASP) beschik je over devolgende structuren om je programma’sop te bouwen:

sequentie: programma’s bestaanuit een opeenvolging vanopdrachten

1.

selectie: het programmaverloopkan afhankelijk gemaakt wordenvan een voorwaarde

2.

herhaling: een aantal statementskunnen herhaald worden.

3.

1. Sequentie

Een reeks opdrachten worden na elkaaruitgevoerd.

2. Selectie

2.1 Enkelvoudige selectie

De opdrachten worden slechts uitgevoerdafhankelijk van het vervullen van eenvoorwaarde.

If voorwaarde then InstructiesEnd If

2.2 Tweevoudige selectie

Als er andere instructies moetenuitgevoerd worden bij het al dan nietvervullen van de voorwaarde spreekt menvan tweevoudige selectie.

If voorwaarde then InstructiesElse InstructiesEnd If

2.3 Meervoudige selectie

Als je een keuze moet maken uit eengroter aantal alternatieven spreek je vanmeervoudige selectie.

Select Case variabelenaam Case expressielijst 1 Instructies Case expressielijst 2 Instructies … Case Else

In Javascript, PHP en Actionscript(Macromedia Flash) en andereECMA-compatibele scripttalen beschik jeover de volgende structuren om je programma’sop te bouwen:

sequentie: programma’s bestaan uit eenopeenvolging van opdrachten

1.

selectie: het programmaverloop kanafhankelijk gemaakt worden van eenvoorwaarde

2.

herhaling: een aantal statements kunnenherhaald worden.

3.

1. Sequentie

Een reeks opdrachten worden na elkaaruitgevoerd.

2. Selectie

2.1 Enkelvoudige selectie

De opdrachten worden slechts uitgevoerdafhankelijk van het vervullen van eenvoorwaarde.

If (voorwaarde){ Instructies}

2.2 Tweevoudige selectie

Als er andere instructies moeten uitgevoerdworden bij het al dan niet vervullen van devoorwaarde spreekt men van tweevoudigeselectie.

If (voorwaarde){ Instructies}else{ Instructies}

2.3 Meervoudige selectie

Als je een keuze moet maken uit een groteraantal alternatieven spreek je van meervoudigeselectie.

switch(variabelenaam){case expressielijst 1: instructies; break;case expressielijst 2:

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

28 van 38 19-02-2009 12:34

Page 29: Dynamische websites met ASP en PHP

InstructiesEnd Select

3. Herhaling

3.1 Voorwaardelijke herhaling metaanvangsvoorwaarde

De voorwaarde wordt getest vóór hetaanvangen van de lus. Het is mogelijk datde instructies nooit worden uitgevoerd.

Methode 1Do while voorwaarde InstructiesLoop

Methode 2Do Until voorwaarde InstructiesLoop

3.2 Voorwaardelijke herhaling metafbreekvoorwaarde

De voorwaarde wordt getest op het eindevan de lus. De lus wordt minstenseenmaal uitgevoerd.

Methode 1Do InstructiesLoop while voorwaarde

Methode 2Do InstructiesLoop Until voorwaarde

3.3 Begrensde herhaling

For intTeller = begin To einde [steptoename] InstructiesNext

instructies; break; ...default: instructies; }

rest volgt...

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 kennisop) Daar heb je geleerd dat webpagina's geen gegevens kunnen onthouden. Voor traditionele

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

29 van 38 19-02-2009 12:34

Page 30: Dynamische websites met ASP en PHP

webpagina's is dat ook niet nodig. Voor een online winkel is het bijvoorbeeld noodzakelijk dat weeerst ons winkelwagentje kunnen samenstellen (na het bladeren door allerlei pagina's metproducten) 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 erdoorheen 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 eenviertal manieren te omzeilen:

GETPOSTcookiessessions

7.3.3 Informatie uitwisselen met GET en POST ^

Met een HTML-pagina kunnen we gegevens opvragen uit een databank en zelfs gegevens versturennaar 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 gegevensontvangt via de methode "GET".In de onderstaande code sturen we via een link informatie door naar een ASP-pagina. We doen ditdoor 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>

<li><a href="wijzig.asp?wijzig=verslag">verwijder verslagen</a>

<li><a href="wijzig.asp?wijzig=user">verwijder gebruikers</a>

<li><a href="wijzig.asp?wijzig=bijs">verwijder bijscholingen</a>

<li><a href="wijzig.asp?wijzig=gezond">verwijder gezondheidstips</a>

<li><a href="http://www.gkto.be/apps/explorerpro/default.asp">verwijder bestanden</a></ul>

In de volgende pagina ontvangen we die gegevens. De gegevens worden in een variabele gestopten weer in de pagina geschreven. De gebruiker krijgt de gegevens te lezen die hij in de vorigepagina invulde. In de onderstaande ASP-voorbeelden maken we gebruik van VBscript. ASP kan ookgebruikt 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. Wesommen ze nog even op:

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

30 van 38 19-02-2009 12:34

Page 31: Dynamische websites met ASP en PHP

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 ofgebruikersnamen door te sturenDe 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 misbruiktkunnen worden.

Als die nadelen een echt probleem vormen (bijvoorbeeld bij een login-pagina), kan u beter uwtoevlucht nemen tot de methode POST.Hiervoor moeten we op de eerste pagina een formulier aanmaken. Op de volgende pagina vragenwe 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 omze weer aan de bezoeker te tonen.

Informatie posten met een formulierIn het onderstaande voorbeeld posten we gegevens met een HTML-formulier en met een ASP- ofPHP-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 gegevensjuist zijn. Als dit het geval is schrijven we de ingevulde gegevens in de pagina neer. Zoniet sturenwe 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 watmoeten we doen als we de gegevens van een gebruiker of bijvoorbeeld zijn taalkeuze over eenganse site (met meerdere pagina's) willen gebruiken?In dat geval kunnen we gebruik maken van cookies en sessies.

CookiesEen cookie bewaart gegevens op de computer van de client, de surfer of bezoeker. Het is eenhandige manier om bepaalde voorkeuren van de gebruiker gedurende lange tijd te bewaren. OpSkynet.be moet je bij je eerste bezoek kiezen tussen Nederlands en Frans. Eens die keuze gemaaktschrijft de webpagina een cookie weg op de harde schijf van de bezoeker. Een cookie krijgt eenunieke naam die we kunnen vullen met een waarde.We kunnnen als webmaster ook instellen hoe lang een cookie bewaard moet blijven. Uiteraard kande bezoeker de cookies van zijn browser ook ten allen tijde verwijderen.

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

31 van 38 19-02-2009 12:34

Page 32: Dynamische websites met ASP en PHP

Vele mensen zien cookies als een schending van hun privacy omdat ze het vreemd vinden eenwebsite hun keuze kan onthouden. Toch is een schadelijke toepassing van cookies niet echtmogelijk. Cookies kunnen bijvoorbeeld geen informatie doorsturen naar een webpagina vermits hetgeen programa's zijn. Webpagina's kunnen wel informatie uit een cookie opvragen, maar danmoeten ze wel de benaming van de cookievariabelen kennen.Bij veel browsers moet je het laten aanmaken van cookies expliciet goedkeuren (vb. Konqueror), bijandere kan je cookies standaard uitschakelen.We kunnen hieruit besluiten dat cookies enkel zinvol zijn om in een homepagina gegevens van declient op te vragen. Maak een ganse website echter niet afhankelijk van cookies.

SessionsEen server stuurt een opgevraagde pagina naar de client en vergeet meteen welke client met hemverbonden was. Als de surfer een minuut later weer een pagina opvraagt, weet de server niet meerdat 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 latentoekennen op basis van de headergegevens van de client. De webmaster kan in die sessie diversevariabelen stoppen zoals bijvoorbeeld een taalkeuze of een reeds eerder gecontroleerdegebruikersnaam 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 wede 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 weeropgevraagd 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 waardeer in die sessievariabele zit. Uiteraard is het ook belangrijk om te controleren of die sessievariabelesowieso is aangemaakt want anders weten onze webpagina's niet in welke taal ze zich moetenmanifesteren.

<%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 desessievariabele, in het andere geval stuurt ze de surfer naar de beginpagina waar hij een taal moetkiezen.De controle van de sessie dient in elke pagina te gebeuren. Handig is om die controle als een apartbestand op te slaan vb. sessie.asp en ze via een "include"-instructie in de andere pagina's op tenemen.We doen dit op de volgende manier:

<<!-- include file="sessie.asp" -->%>

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

32 van 38 19-02-2009 12:34

Page 33: Dynamische websites met ASP en PHP

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 doenis in programmeertalen als C en C++. Webservers kennen de extensie "inc" echter nieten 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 kangelezen worden. De server voert de ASP- of PHP-codes uit en stuurt ze als pure HTMLnaar de browser

PHP gaat iets anders te werk wat betreft sessies. In elke pagina waarin we gebruik willen makenvan sessievariabelen moeten we de sessie expliciet starten met de functie "session start()".

<?//start van de sessiesession_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 mailennaar ";}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 binnenkortvolledig 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 simpelom wachtwoordbeveiligde pagina's te maken.

<%'De bewaarde gebruikersnaam en wachtwoordusername="joske"pwd="marcske"

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

33 van 38 19-02-2009 12:34

Page 34: Dynamische websites met ASP en PHP

'De door de bezoeker ingevulde gegevens worden in variabelen gestopt.username2=request("username")pwd2=request("pwd")

'We schrijven even neer wat de bezoeker heeft ingevuldresponse.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%>

7.4 Gegevensverwerking ^

7.4.1 Databanken ^

De kracht van dynamische pagina's schuilt in de modulaire opbouw. Gegevens worden opgeslagenin databanken. Via een query (GET) vraagt de bezoeker gegevens op. Een server script ontvangt dequery en genereert een HTML-pagina die naar de browser van de client wordt doorgestuurd. Debeheerders van de website kunnen via een wachtwoordbeveiligde pagina informatie aan dedatabank toevoegen, records aanpassen of verwijderen.

Databanktypes ^

Flatfiledatabanken: alle gegevens worden in een tabel opgeslagenRelationele 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 vervangenworden 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 eeneenvoudige teksteditor openen en lezen. Databanken zijn in een binair formaat gecodeerd en nietzonder meer te openen.Server side scriptingtalen hebben daarvoor aparte modules/interfaces nodig om de gegevens uitdatabanken te kunnen inlezen.Om gegevens uit te lezen, in te voeren, te verwijderen of aan te passen maken we gebruik van hetdoor Oracle ontwikkelde SQL (Structured Query Language).

Voorbeelden ^

Naam: Platform: Doel:

IBM db/2via ODBC beschikbaar voorUNIX, Windows

grote bedrijfsdatabanken

Informix native ondersteund door PHP grote bedrijfsdatabanken

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

34 van 38 19-02-2009 12:34

Page 35: Dynamische websites met ASP en PHP

Accessvia ODBC beschikbaar voorWindows

kleinere databankgerelateerdewebsites

Microsoft SQLServer

native ondersteund door PHP,Windows

grote databanken

mSQLnative ondersteund door PHP,UNIX

kleine databanken

MySQLnative ondersteund door PHP,Windows en UNIX

meest gebruikte databank incombinatie met PHP

Oraclenative ondersteund door PHP,Windows en UNIX

zeer grote databanken

Oracle8, Oracle9inative ondersteund door PHP,Windows en UNIX

zeer grote databanken, ondersteuningvoor Java

PostgreSQLnative ondersteund door PHP,UNIX

commercieel, veel gebruikt incombinatie met PHP

Sybasenative ondersteund door PHP,Windows en UNIX

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 wede 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.movenextwend%>

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

35 van 38 19-02-2009 12:34

Page 36: Dynamische websites met ASP en PHP

We maken nu een gelijkaardige tabel aan in MySQL en vragen de gegevens op met de onderstaandePHP-pagina:

<?// variabelen initialiseren$username= "gebruikersnaam";$dbnaam="naamvandedatabank";$password= "wachtwoord";$host="localhost";$query="SELECT * FROM tbnieuws";

//indien ID is doorgegevenif(!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());

if(empty($_POST)){?><form><br><br>Ras:<select name="atikel"><?while (list($id, $titel) = mysql_fetch_row($result)){ echo("<option value=\"$id\">$titel</option>\n"); }?></select>

<br><br><input type="Submit" value="Opvragen">

<?}else{//als er gepost is, moet hij informatie over betreffende artikel uit databank halenen 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 hetgeval is, dan maakt hij een formulierveld aan met een uitklapmenu/selectiebox met daarin alle titelsuit 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 databankgepost naar dezelfde pagina.In dit geval wordt er informatie gepost naar de pagina en tekent het script geen formulier meer meteen selectiebox, maar geeft hij alle informatie uit het record met het geposte id.

B. Gegevens toevoegen ^

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

36 van 38 19-02-2009 12:34

Page 37: Dynamische websites met ASP en PHP

C. Mappen en bestanden maken ^

D. Gebruikersbeheer ^

E. WYSIWYG-editors ^

F. Gegevens aanpassen ^

G. Gegevens verwijderen ^

7.4.3 Bestanden lezen ^

Uitleg volgt

7.4.4 Een online bestandenverkenner ^

Uitleg volgt

8. Interessante boeken en software ^

BOEKEN

Stefan Munz, Wolfgang Nefzger, HTML en Web Publishing, ISBN 90-5167-482-1Jochen Naumann, Website Deluxe met PHP, MySQL en Apache, ISBN 90-430-0765-XPeter Kassenaar, Basiscursus PHP 4.2, ISBN 90-395-1954-4Harry Heijkoop, Basiscursus XML, ISBN 90-395-1586-7Christian Wenz e.a., Snel leren werken met ASP - dynamische websites, eenvoudiggeprogrammeerd, ISBN 90-430-0452-9Jennifer Niederst, Webdesign in a nutshell - a desktop quick reference, ISBN 0-596-00196-7Stephen Spainhour, Webmaster in a nutshell - a desktop quick reference, ISBN1-56592-325-1Steve Webster, PHP voor Flash - voor en door ontwerpers, ISBN 90-395-1976-5Hedwyg Van Den Elzen, Flash actionscript, ISBN 90-430-0476-7Torrone, Flash enabled, Flash design and development for devices, ISBN 0-7357-1177-1Johann Christian Hanke, Programmeren HTML, XML en Javascript, ISBN 90-5167-356-6Bob Van Duuren, Leer jezelf MAKKELIJK ... Flash MX ActionScript, ISBN 90-5940-010-0Sham Bhangal, Foundation Actionscript

Website over softwareboeken: http://www.boekensoft.com/zoeken.phpBeurs met sterk afgeprijsde (software)boeken: http://www.boekenfestijn.com/agenda.asp

SOFTWAREWe behandelen hier geen commerciële programma's voor website-ontwikkeling maar opensource-applicaties + freeware:

SCITE - teksteditor weblinkFileZilla - FTP-client weblinkNVU (New View) - WYSIWYG-HTML-editor weblinkGIMP 1+ - Photoshopkloon voor UNIX en Linux, ook beschikbaar voor Windows en Mac

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

37 van 38 19-02-2009 12:34

Page 38: Dynamische websites met ASP en PHP

weblinkXNview - beheer beeldbestanden weblink

Website met interessante freeware: http://www.snapfiles.com

Cursus dynamische websites http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc...

38 van 38 19-02-2009 12:34