W E B T E C H N O L O G I E

Transcriptie

1 KU Leuven Campus De Nayer Industrieel ingenieur Opleiding Elektronica-ICT 3e academisch bachelorjaar W E B T E C H N O L O G I E Academiejaar Lesgever: J. Vennekens Cursustekst ism. H. Crauwels

2 Inhoudsopgave 1 Overzicht: xhtml, css Extensible hypertext markup language Cascading style sheets PHP: include De server Apache server Het HTTP-protocol Dynamische webpagina s met Python Tekst-manipulaties met Python Nuttige string functies Reguliere expressies Toepassing: verwerking van form gegevens Overzicht van CGI omgevingsvariabelen INPUT elementen SELECT element TEXTAREA element Opmerkingen Testen van een CGI script Veiligheid PHP: Hypertext Preprocessor Inleiding Basis syntax Een eenvoudige form Een form bestaande uit meerdere pagina s Datums en tijden Werken met bestanden Cookies JavaScript Ontstaan De objecthiërarchie Variabelen, operatoren en functies De controlestructuren Zelf gemaakte objecten Events Types Eventhandlers Events emuleren Het window object Het document object Properties Methods Opmerkingen ADOdb bibliotheek voor PHP Intikken en uitvoeren van een query Database abstraction library Voorbeeld met specifieke mysql connectie Met gebruik van de abstractielaag ADODB I

3 6.5 Verwerken van de resultaten set Resultset in een twee-dimensionale array Functies: recordcount en fieldcount Data manipulatie: insert en delete Selectie vam beperkt aantal rijen Voorbereiden van een SQL statement Transacties Cached queries Genereren van html Omvorming naar specifieke formaten AJAX: Asynchronous Javascript And XML Werking Voorbeeld Het XMLHttpRequest object Voorbeeld: master-detail select boxen Andere mogelijkheden Beveiliging voor HTTP 83 9 XML: extensible Markup Language Definitie Inleiding Eigenschappen XML versus HTML XML syntax Elementen Namespaces Parsing Document Type Definition Verwerking DOM SAX XML presentatie CSS XSLT en XSL:FO Client of server Toepassingen van XML Referenties XML Schema Verantwoording Schema definitie Terminologie Enkelvoudige types Samengestelde types Lege inhoud Enkelvoudige inhoud Samengestelde inhoud Gemengde inhoud Attributen Groepen Uitbreidbare schema s II

4 11 XPath XPath Introduction XPath Nodes XPath Syntax XPath Axes XPath Operators XQuery Introduction XQuery Example XQuery FLWOR Expressions XQuery FLWOR + HTML XQuery Terms XQuery Syntax XQuery Adding Elements and Attributes XQuery Selecting and Filtering XSL: EXtensible Stylesheet Language Overview Introduction to XSLT Example study: How to transform XML into XHTML using XSLT Template Element Value-of Element For-each Element Sort Element If Element Choose Element Apply-templates Element XSLT Elements Reference XSLT Functions Voorbeeld Introduction to XSL-FO XSL-FO Documents XSL-FO Areas XSL-FO Output XSL-FO Flow XSL-FO Pages XSL-FO Lists XSL-FO Tables XSL-FO and XSLT XSL-FO Software Toepassingen van XML XTM SOAP XFORMS SMIL RDF CML A HTML 4 Block & Level Elements en Inline Elements 149 B XML opgaven 150 III

5 1 Overzicht: xhtml, css 1.1 Extensible hypertext markup language XHTML is een beschrijvende set van codes voor het indelen en de structuur van een webdocument. Een webpagina moet als een structurele verzameling van gegevens gezien worden. De belangrijkste structuurelementen van een pagina zijn: kopteksten, alineateksten, lijsten, afbeeldingen, hyperlinks en logische secties. De taak van XHTML is om de gegevens op een pagina logisch te structureren: bijvoorbeeld welke tekst is een koptekst, welke tekst een alinea en waar een afbeelding moet komen. Er zijn verschillende subtypes van XHTML, maar in deze cursus zal met de strengste vorm gewerkt worden: XHTML 1.0 Strict: webdocumenten die geen verouderde elementen bevatten en vrij zijn van alle opmaakkenmerken. In het XHTML bestand moet door middel van DOCTYPE het type aangegeven worden: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Omdat XHTML gebaseerd is op XML syntax, moet op de eerste lijn van een XHTML bestand een XML declaratie gegeven worden. Deze lijn bevat de XML versie en de character-encoding. In het voorbeeld wordt aangegeven dat het document conform de 1.0 specificatie van XML is en dat de ISO (Latin-1/West European) character set gebruikt wordt. De codes voor een koptekst bijvoorbeeld zijn <h1>... </h1>. Hoe deze koptekst in de browser weergegeven wordt, wordt bepaald door de basisinstellingen van de browser. Het is mogelijk om zelf, als ontwerper van de pagina, ook de weergave van de structuurelementen te bepalen. Maar dit gebeurt niet met XHTML. Hiervoor moet een aanvullende techniek gebruikt worden: CSS (Cascading Style Sheets) dient voor het opmaken van gegevens. Kenmerken van XHTML-documenten. Een XHTML-document is een kaal tekstbestand en bestaat uit pure ASCII-tekst. Het bevat geen codes voor bijvoorbeeld paginanummering, regelafstand of andere formatteringsaspecten. Daardoor is een webpagina platformonafhankelijk. Een XHTML-bestand bestaat uit tekst en tags: de tekst is de inhoud van de webpagina: datgene wat je via het web wil communiceren naar andere internetgebruikers; een tag is de code die u als ontwerper aanbrengt om de tekst te structureren (of vorm te geven); tags worden aangegeven door punthaken ( < en > ): <tagnaam>; de tagnaam wordt in kleine letters geschreven. Om een structuurelement aan te geven worden telkens twee tags gebruikt: een openingstag en een sluittag (gelijk aan de begintag, voorafgegaan door een slash, /). Bij veel tags kan een aantal extra elementen opgegeven worden waarmee de functionaliteit van een tag vergroot wordt: Zo n attribuut bestaat altijd uit een naam en een waarde, van elkaar gescheiden door een = teken. Een attribuut wordt altijd in de openingstag opgenomen. Een tag kan meerdere attributen hebben; deze attributen en de tagnaam worden van elkaar gescheiden door middel van een spatie. Tussen naam en waarde staan geen spaties; de naam wordt in kleine letters geschreven, de waarde tussen dubbele aanhalingstekens. Tussen begin- en eindtag staat normaal tekst die moet weergegeven worden. Er bestaan ook tags waarachter geen tekst volgt. De tag <img> dient om een afbeelding op een webpagina te plaatsen. Er is echter geen bijhorende tekst en de begintag zou dus direct moeten gevolgd worden door de 1

6 sluittag </img>. Men spreekt hier van een leeg element. Hiervoor bestaat een verkorte notatie: op het einde van de begintag wordt direct een slash geplaatst, gevolgd door de punthaak ( />). Er zijn twee soorten structuurelementen: block-level en inline (zie ook appendix A): basistags: html, head, body, h1, h2, h3, h4, h5, h6, p, pre, blockquote, hr, br; linking: a met href en name attributen; prentjes: img en imagemap; lijsten: ul, ol, li, dl, dd, dt; tabellen: table, caption, th, tr, td, attributen rowspan en colspan; formulieren: form met attributen method, action en enctype; tekstvelden: button; input met types text, checkbox, radio, file, hidden, submit, reset, andere formulierelementen: select met option; textarea; fieldset met legend. Validatie. Om na te gaan of een pagina aan alle regels voldoet, kan zo n pagina gevalideerd worden. Het W3C heeft een valideringsservice op validator.w3.org. De Validation Markup Service controleert HTML- en XHTML-documenten op correctheid. Fouten worden gemeld en toegelicht. Specifieke CSS validering kan gebeuren op jigsaw.w3.org/css-validator. Een lokale valideringsservice (zowel XHTML als CSS) is te vinden op Cascading style sheets Een style sheet is een verzameling stijlregels, die bepalen hoe elementen in een document door de browser weergegeven moeten worden. De stijlregels kunnen bijvoorbeeld betrekking hebben op het lettertype, de lettergrootte, de kleur van de tekst, de achtergrondkleur en de uitlijning, maar ook op het inspringen en de plaats in het browservenster. Style sheets kunnen op verschillende manieren aan de elementen in een HTML-document gekoppeld worden: een inline stijl, een stijlblok en een extern stijlblad. Hiervoor kunnen onder meer de volgende elementen gebruikt worden: style, meta en link. Elke CSS-regel bestaat uit twee hoofdonderdelen: selector : bepaalt op welk element de regel van toepassing is: een HTML-element of een zelfbenoemd gebied van een pagina (bijvoorbeeld met <div> of <span>); declaratie : de instelling voor de opmaak van het element bestaat uit een eigenschap (keyword) en de waarde (value) van die eigenschap. Een selector kan uit één of meer declaraties bestaan; elke declaratie wordt afgesloten met een puntkomma (;). Eigenschap en waarde binnen een declaratie worden van elkaar gescheiden met een dubbelpunt (:). Een voorbeeld voor specificatie van het HTML-element body: body { background-color: silver; color: white; font-family: verdana, arial; } Enkele stijleigenschappen : 2

7 de box de margin de border de padding breedte en hoogte plaatsing van elementen regelhoogte indeling zwevende elementen positioneren lettertypen kleur en achtergrond tekst lijsten margin-top, margin-right, margin-bottom, margin-left en margin border-style, border-color, border-top-width, border-right-width, border-bottom-width, border-left-width, border-width, border-top, border-right, border-bottom, border-left en border padding-top, padding-right, padding-bottom, padding-left en padding width, height line-height en vertical-align display en white-space float en clear position, top, right, bottom, left, z-index, clip, overflow en visibility font-family, font-variant, font-style, font-weight, font-size en font color, background-color, background-image, background-repeat, background-attachment, background-position en background word-spacing, letter-spacing, text-decoration, text-transform, textalign en text-indent list-style-type, list-style-image, list-style-position en list-style Plaatsbepaling. Normaal wordt de inhoud van een HTML-document van boven naar beneden in de browser weergegeven. De volgorde waarin de elementen in de code staan, bepaalt de weergave op het beeldscherm. Bijvoorbeeld, twee tekstkolommen naast elkaar of aan de zijkanten geplaatste navigatiebalken is in pure XHTML onmogelijk. Een complexe weblay-out realiseren met tabellen is tegen de geest van het gescheiden houden van structuur (inhoud) en lay-out (opmaak), want een tabel is een structuurelement. Een deel van CSS is gericht op de plaatsing van inhoud (CSS-P) en kan bij voldoende doorzettingsvermogen aangewend worden om de gewenste layout te realiseren. Het visual formatting model bepaalt hoe elementen zich gedragen of met andere woorden de weergave: elk element maakt nul of meer blokken en elk type blok heeft zijn eigen weergave kenmerken. Koppen en alinea s worden normaal onder elkaar geplaatst terwijl hyperlinks en afbeeldingen naast elkaar gezet worden. Noteer dat het boxmodel (zie hoger) alleen de afmetingen van elementen behandelt. Het positioneringsschema bepaalt hoe de inhoud op het scherm wordt geplaatst: normaal, zwevend of absoluut. Daarnaast kan gebruik gemaakt worden van lagen (layer) waarbij tekst over een afbeelding kan gelegd worden zonder daarbij de hele afbeelding af te dekken. Een indexwaarde bepaalt in welke volgorde de inhoud op elkaar gelegd wordt. 1.3 PHP: include PHP is een server-side scripting taal (zie verder). Als alternatief voor server-side-include wordt in dit overzichtshoofdstuk toch al één PHP constructie vermeld. Je kan de inhoud van een bestand aan een PHP bestand toevoegen voordat deze op de server gestart wordt met de include of de require functie. Hiermee kan je headers, footers of andere elementen (bijv. menu s) gemakkelijk toevoegen aan verschillende pagina s. Het updaten van je site wordt een stuk gemakkelijker. Je kunt gedeelten die telkens worden weergegeven op je pagina s opslaan in een extern bestand en de inhoud van dit bestand laten inlezen in de betreffende pagina. Je kunt hier bijvoorbeeld denken aan een menu. Dit menu is hetzelfde voor iedere pagina. Als je iets wilt veranderen aan het menu, dan moet je alle HTML pagina s van je site wijzigen. Dat kost je een heleboel tijd natuurlijk, zeker als je site uit tientallen of zelfs honderden pagina s bestaat. 3

8 In plaats daarvan kan het menu opgeslagen worden in een extern bestand en geinclude worden in de pagina. Wil je iets veranderen aan het menu? Dan hoef je nu alleen dit ene externe bestand waar het menu in staat te wijzigen. De veranderingen zie je daarna op alle pagina s van je site. Je bespaart hierdoor dus een hoop tijd. Verder wordt ook de totale schijfruimte die je site nodig heeft kleiner, doordat je sommige codes opslaat in één bestand en je ze niet meer in iedere pagina hoeft op te nemen. De include() functie neemt alle inhoud van een bepaald bestand en neemt dit op in de pagina waarin de include functie staat. Voorbeeld: <div class="menu">  <?php include("tweefunc.txt")?> </div> <div class="rechts">  </div> Hierbij worden de classes menu en rechts gebruikt om de webpagina in twee delen op te delen:.rechts.menu { margin-left: 180px; margin-bottom: 25px; background-color: #ccc; padding: 3px; color: red; font-size: 13pt; } { position: fixed; top: 80px; left:5px; width: 150px; border: solid 1px black; background-color: #9fc; padding: 3px; margin: 4px 2px 4px 2px; font-family: courier; } De inhoud van het bestand dat ingevoegd wordt: <ul> <li> <a href="incl.php">include <li> <a href="requ.php">require <li> <a href="inclf.php">include fout <li> <a href="requf.php">require fout <li> <a href="phpincl.php">uitleg </ul> </a> </li> </a> </li> </a> </li> </a> </li> </a> </li> In het voorbeeld is dit pure HTML, wel zonder html head en body tags. Om dit duidelijk te stellen wordt als suffix.txt gebruikt. Naast pure html kan natuurlijk ook javascript, php of andere constructies opgenomen worden. De require() functie is identiek aan de include() functie, alleen de foutafhandeling is anders. Wanneer het aangegeven bestand niet gevonden wordt, zal bij include een warning gegenereerd worden en zal de rest van de pagina getoond worden. Bij require wordt een error gegenereerd en zal de rest van de pagina niet getoond worden. Voorbeeld: <div class="menu"> <?php require("tweefunk.txt")?> </div> Het is aan te raden om altijd de require functie te gebruiken, omdat het meestal geen zin heeft om de rest van een pagina te tonen wanneer bepaalde bestanden niet gevonden worden. 4

9 2 De server 2.1 Apache server Het idee achter het HTTP-protocol waarmee clients en servers met elkaar praten, is ontwikkeld door mensen van het CERN (Europees Centrum voor Nuclair Onderzoek) in Geneve. Toen zij hun onderzoek over het delen van documenten tussen computers hadden afgerond, gaven ze het project over aan een Amerikaanse Universiteit (NSCA). Apache (< is de naam van een server die het HTTP protocol spreekt, en dus een zogenaamde webserver is. De naam Apache heeft een onduidelijke achtergrond: sommige mensen zeggen dat het een verbastering is van een *a pa*t*chy* (=gebrekkige) server, omdat het begin van de ontwikkeling veel patches (=verbeteringen) nodig waren om de server bruikbaar te maken. Andere mensen beweren dat het programma vernoemd is naar de Amerikaanse Apacheindianen, die zeer goed met onverwachte omstandigheden konden omgaan. Apache is veruit de meest gebruikte webserver voor het internet. Hij berust op versie 1.1 van het HTTP-protocol dat is vastgesteld door het World Wide Web Consortium < (W3C). Een onderzoek van Netcraft < uit juni 1999 wees uit dat meer dan 60 procent van alle webservers de Apache software gebruikt. The Netcraft Web Server Survey is a survey of Web Server software usage on Internet connected computers. We collect and collate as many hostnames providing an http service as we can find, and systematically poll each other with an HTTP request for the server name. In the January 2003 survey we received responses from 35,424,956 sites. Een webserver is de server kant in een client-server-model (letterlijke vertaling klant-dienstverlener ). Een webserver beantwoordt vragen van de webclient zoals Netscape of Lynx. De vragen die de webclient (of webbrowser) stelt zijn van de vorm: Heb jij die ene webpagina?. Het antwoord dat de webserver daarna geeft is van de vorm: Het artikel luidt:... of Ik kan de webpagina niet vinden Het HTTP-protocol Uiteraard praten de server en client niet in het Nederlands; ze gebruiken in plaats daarvan het HTTP-protocol (HyperText Transfer Protocol). De huidige versie is HTTP 1.1 en is gedefinieerd in RFC 2616 < Dit protocol is verdeeld in twee delen: de vraag van de client en het antwoord van de server. Het protocol is gebaseerd op tekst bestaande uit ASCII-tekens. 1. De vraag: dit is een regel tekst die verdeeld is in drie stukken: [vraagtype] [URL] [protocolversie] 1. [vraagtype]: mogelijke vraagtypen zijn: GET, POST, HEAD, PUT, DEL en TRACE. 2. [URL]: de URL (Uniform Request Locator) is de bestandsnaam en directory van de webpagina die je wilt opvragen. Voorbeeld: als je de webpagina wilt opvragen, is de URL in de clientvraag /Nederlands/index.html. 3. [protocolversie]: de protocolversie kan HTTP/1.0 en HTTP/1.1 zijn. Deze vereiste regel mag gevolgd worden door andere regels om de clientvraag toe te lichten, zoals we zullen zien in een HTTP/1.1 vraag. 2. Het antwoord: het antwoord van de server is opgebouwd uit een header (=kopregels) en een inhoud. 5

10 Een voorbeeld. We kunnen het gedrag van een webclient nabootsen met een telnet programma. De webserver is te bereiken via een serveradres en een poortnummer. In het volgende voorbeeld is het adres van de webserver / en het poortnummer is 80, het standaard poortnummer voor webservers. >telnet 80 Trying Connected to nova.linuxfocus.org. Escape character is ^]. GET / HTTP/1.0 <return> <return> HTTP/ OK Date: Mon, 27 Sep :23:20 GMT Server: Apache/1.3.3 (Unix) (Red Hat/Linux) Last-Modified: Sun, 26 Sep :40:44 GMT ETag: "4b ee4c8c" Accept-Ranges: bytes Content-Length: 5654 Connection: close Content-Type: text/html <PAGE HTML> De meeste gebruikte HTTP-methode is GET. Bij deze methode wordt de absolute padnaam van de gevraagde pagina en de gebruikte versie van HTTP meegegeven. De eerste regel van het antwoord geeft de gebruikte protocolversie (HTTP/1.1), een antwoordnummer (200) en tenslotte de tekst OK. Het antwoordnummer geeft informatie over de aard van het antwoord. Een nummer groter dan 400, geeft aan dat er een fout is opgetreden. De meest voorkomende fout, is de 404-fout, dat aangeeft dat de opgevraagde webpagina niet aanwezig is. Daarna volgen een aantal regels die (met de eerste regel) de header vormen. Deze regels geven telkens informatie in de vorm Naam: info. Zo geven de volgende regels een datum, de versie van de server en de datum van de laatste verandering van de webpagina (hierdoor kan de client nagaan of zijn cache nog geldig is). De regel die begint met Content-Length geeft de lengte van de inhoud van het antwoord waarin de echt informatie staat en Content-Type vertelt de client van welk MIME-type de teruggegeven informatie is (tekst, HTML, plaatjes...). Het antwoordnummer of statuscode is een getal van drie cijfers, waarbij het eerste cijfer de algemene antwoordcategorie identificeert: 1xx : slechts een informatie-boodschap; 2xx : succesvol; 3xx : herdirectie van de klant naar een andere URL; 4xx : een fout langs de klant zijde; 5xx : een fout langs de server zijde. De meest voorkomende status codes in een HTTP antwoord zijn: 100 Continue 200 Ok de aanvraag is succesvol en een document wordt teruggestuurd; (bij een HEAD wordt alleen de antwoord hoofding teruggestuurd) 204 No Content de aanvraag is succesvol maar geeft geen data om terug te sturen naar de klant 300 Moved Permanently 304 Not Modified 400 Bad Request een niet juist gevormd HTTP aanvraag is ontvangen 404 Not Found de URL aanvraag is niet gebonden 501 Not Implemented de klant gebruikte een niet-gekende methode in de aanvraag 500 Internal Server Error alle andere serverfouten 6

11 Laten we eens kijken of we een fout kunnen veroorzaken: >telnet 80 Trying Connected to nova.linuxfocus.org. Escape character is ^]. G0T / HTTP/1.0 <return> <return> HTTP/ Method Not Implemented Date: Mon, 27 Sep :22:03 GMT Server: Apache/1.3.3 (Unix) (Red Hat/Linux) Allow: GET, HEAD, OPTIONS, TRACE Connection: close Content-Type: text/html Zoals je ziet, geeft de header heel veel informatie. Het HTTP-protocol is erg eenvoudig zoals we ook in de volgende voorbeelden zullen zien: >telnet 80 Trying Connected to nova.linuxfocus.org. Escape character is ^]. GET / <return> Resultaat: [de inhoud van de webpagina index.html van de website wordt dan getoond ].. In het bovenstaande voorbeeld heb je met telnet via poort 80 contact gemaakt met de webserver van (IP adres ). De server wachtte vervolgens op een vraag en die gaf je door GET / te typen gevolgd door twee keer een carriage return. Er zijn twee carriage returns nodig omdat de lege regel na de GET-opdracht de server het teken geeft dat dit het eind van de vraag is. De server begint na dit signaal met het beantwoorden van de vraag en het sturen van het antwoord. Als het gesprek voorbij is, wordt de TCP/IP-verbinding door de server verbroken. Bij HTTP 1.0 zijn 16 headers mogelijk, maar geen enkele is verplicht. HTTP 1.1 definieert 46 headers, één daarvan (Host:) is verplicht bij een aanvraag. Omwille van NET-beleefdheid is het aangewezen om volgende headers op te nemen in een aanvraag: From : : adres van degene die de aanvraag doet; User-Agent : : identificatie van het programma dat de aanvraag doet, bijvoorbeeld User-agent: Mozilla/4.7 [en] (Win98; I) Host : : de internet-naam van de computer die de aanvraag doet. Omwille van de verplichte header wordt het iets ingewikkelder als we gebruik gaan maken van HTTP versie 1.1. Een gesprek dat er met HTTP/1.0 zo uit ziet: GET / HTTP/1.0 <return> <return> HTTP/ OK Date: Tue, 24 Aug :25:11 GMT Server: Apache/1.3.3 (Unix) (Red Hat/Linux) Last-Modified: Sun, 01 Aug :50:52 GMT ETag: "4b a4349c" Accept-Ranges: bytes Content-Length: 5218 Connection: close Content-Type: text/html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">... 7

12 ziet er met HTTP/1.1 zo uit: GET / HTTP/1.1 <return> <return> HTTP/ Bad Request Date: Tue, 24 Aug :24:59 GMT Server: Apache/1.3.3 (Unix) (Red Hat/Linux) Connection: close Transfer-Encoding: chunked Content-Type: text/html <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <HTML><HEAD> <TITLE>400 Bad Request</TITLE> </HEADBODY> <H1>Bad Request</H1> Your browser sent a request that this server could not understand. <P> client sent HTTP/1.1 request without hostname (see RFC2068 section 9, and 14.23): </P> </BODY></HTML> Dezelfde vraag in versie 1.1 van het HTTP-protocol vereist dat er meer informatie met de vraag wordt meegezonden. De extra informatie die meegestuurd wordt, maakt de vraag specifieker en daarmee de inhoud van het gesprek nauwkeuriger en beter. Hieronder staat de correcte clientvraag in HTTP/1.1. De programmeurs van het Apache-project zijn zeer strict geweest in het naleven van de specificatie van dit protocol. Maar dit protocol maakt, hoewel stricter, ook meer mogelijk, zoals: authenticatie, virtuele websites (meerdere websites met hetzelfde IP-adres) en meer... Een voorbeeld: GET / HTTP/1.1 <return> Host: <return> [...] Zoals bij de meeste client-server systemen zal de server het volgende doen als hij een vraag ontvangt: hij start een apart process om de vraag te gaan beantwoorden; het parent process blijft luisteren naar nieuwe vragen terwijl de vorige vraag nog niet beantwoord is. het aparte, child process beantwoordt ondertussen de vraag en het process zal gestopt worden als de vraag beantwoord is. Het algemene principe is dat een webserver maar één antwoord kan geven aan de client die de vraag stelde. De client stuurt een vraag en krijgt daarop het antwoord. De webserver is hiermee een interface tussen de webclient die het document opvraagt dat bij een URL hoort, en het besturingssysteem waarop Apache draait. Andere namen die voor URL gebruikt worden, zijn URI en URN die een iets andere betekenis hebben, maar op precies hetzelfde neerkomen: een unieke naam voor een webpagina. Sommige clientvragen kunnen niet direct door de server beantwoord worden. In dat geval kan de server een ander programma starten die de vraag probeert op te lossen. Dit is precies hoe CGI-scripten (Common Gateway Interface) werken. Naast GET bestaan nog ander methodes, o.a.: 8

13 HEAD : zoals een GET, maar de server moet alleen de antwoord-hoofdingen terugsturen en geen document met data; dit is nuttig om karakteristieken van een resource te controleren, zonder het volledige dokument te downloaden. POST : wordt gebruikt om data naar de server te sturen, om daar op een of andere manier verwerkt te worden (zoals bij een CGI script). Verschillen met een GET vraag: er wordt met de aanvraag een blok met data meegestuurd; er zijn normaal een aantal extra hoofdingen om deze data te beschrijven, zoals Content-Type: en Content-Length:; de aanvraag URI duidt geen document aan dat moet teruggestuurd worden; het is meestal een programma dat de opgestuurde data zal verwerken; Het HTTP antwoord is meestal de uitvoer van het programma, dus geen statisch bestand. POST wordt meestal gebruikt om HTML-formulier gegevens door te sturen naar CGI scripts. In dat geval is de Content-Type: hoofding gewoonlijk gelijk aan application/x-www-form-urlencoded en geeft de Content-Length: hoofding de lengte van de URL-geëncodeerde formulier gegevens. Het CGI script ontvangt de body van de boodschap via STDIN en decodeert dan de gegevens. Een voorbeeld van het opsturen van formulier gegevens via POST: POST /cgi-bin/hcr/drie.pl HTTP/1.0 Content-Type: application/x-www-form-urlencoded Content-Length: 22 appel=peer&banaan=kers Met een POST aanvraag kan je naast formulier gegevens ook nog andere data versturen. Alleen moet je er voor zorgen dat de zender en het ontvangende programma overeenkomen omtrent het formaat. Merk op dat bij GET de formulier gegevens bij in de URL opgenomen worden: GET /cgi-bin/hcr/drie.pl?appel=peer&banaan=kers De logbestanden op webserver antje: /var/log/httpd.access_log /var/log/httpd.error_log 9

14 3 Dynamische webpagina s met Python 3.1 Tekst-manipulaties met Python Het WWW is een tekstgebaseerde omgeving: een HTTP-request en HTTP-response bestaan allebei uit tekst. Om goed te functioneren in een dergelijke omgeving, moeten onze Python programma s dus tekst kunnen manipuleren Nuttige string functies Strings in Python zijn objecten, die een heel aantal nuttige methodes aanbieden. Het is belangrijk om te weten dat String objecten immutable zijn: dwz. dat een string nooit in place veranderd wordt! Al deze methodes geven dus een nieuwe string terug en laten de oude ongemoeid. string.split(separator) deelt een string op. Bijvoorbeeld 11:55:00. split ( : ) produceert de lijst [ 11, 55, 00 ]. Als er geen separator wordt meegegeven, wordt er op witruimte gesplitst. separator.join(lijst) doe de omgekeerde operatie. :. join ([ 11, 55, 00 ]) geeft opnieuw 11:55:00. string.rstrip(letters) verwijdert alle letters die voorkomen in de string letters van het einde van de string. Er bestaat ook een lsplit die hetzelfde doet met het begin van de string. Bijvoorbeeld lstrip ( 0 ) produceert 1. Zonder argument wordt alle witruimte verwijderd. string.replace(oud,nieuw) vervangt in string alle voorkomens van oud door nieuw. Een optioneel derde argument n kan worden meegegeven om het aantal vervangingen te beperken tot n Reguliere expressies Verschillende programmeertalen, waaronder ook Python, maken gebruik van Reguliere expressies om strings te analyseren en te bewerken. Reguliere expressies zijn een erg krachtige, maar helaas ook wat complexe manier om patronen in strings te beschrijven. In Python dient de module re om met reguliere expressies te werken. import r e Reguliere expressies worden in de eerste plaats gebruikt om patronen te zoeken in strings. r e. search ( patroon, s t r i n g ) Deze expressie geeft de waarde waar als in de string het patroon voorkomt dat door de reguliere expressie omschreven is. Het patroon kan gewoon een woord zijn en dan moet dat woord exact in de string voorkomen. Bijvoorbeeld, om alle lijnen met het woord appel uit een bestand te filteren: for l i j n in open ( bestand. txt ) : i f r e. search ( appel, l i j n ) : print l i j n Meestal moet echter naar iets gezocht worden waaraan verschillende woorden kunnen voldoen. Dat iets wordt gedefinieerd mbv. een reguliere expressie (RE). Een RE bevat tekst-tekens en operator-tekens. De tekst-tekens komen overeen met de corresponderende tekens in de strings waarmee vergeleken wordt. Tekst-tekens zijn bijvoorbeeld de letters van het alfabet en de cijfers. De operator-tekens specificeren herhalingen, keuzes, klassen,... Men noemt deze ook meta-tekens. 10

15 RE metatekens ^ het begin van de lijn $ het einde van de lijn (vlak voor de \n ). om het even welk teken, behalve \n keuze: één van de gespecificeerde patronen [] een teken uit de gespecificeerde verzameling tekens () om expressies te groeperen (voor keuzes en terugreferenties) \ het volgende metateken wordt als gewoon teken geïnterpreteerd de speciale betekenis wordt teniet gedaan Alleen die lijnen die slechts het woord appel, peer of kers bevatten: for l i j n in open ( bestand. txt ) : i f r e. search ( ˆ( appel peer k e r s ) $, l i j n ) : print l i j n Naast de klassieke specifieke tekens (\n, \r, \t, \f) zijn een aantal extra teken-patronen gedefinieerd: Teken patronen \w een alfanumeriek teken (miv. _ ) \W een niet-alfanumeriek teken \s een witte-ruimte teken \S een niet-witte-ruimte teken \d een cijfer \D een niet-cijfer De search functie kan niet alleen gebruikt worden om te zien of een patroon gevonden is in een tekst, maar ook om te zien welke tekst overeenkwam met dit patroon. Als het patroon gevonden werd, dan wordt een MatchObject object teruggegeven, waarvan de methodes start() en end() teruggeven waar in de string het patroon gevonden werd. s t r i n g = xxx33dd445fff665 patroon = r (\ d){3} # Een raw string, om de backslash niet te moeten escapen m = r e. search ( patroon, s t r i n g ) print s t r i n g [m. s t a r t ( ) :m. end ( ) ] # --> 445 Het is ook mogelijk om alle matches te zoeken met finditer (te gebruiken in een lusje) of findall (geeft een lijst terug). s t r i n g = xxx33dd445fff665 patroon = r (\ d){3} # Een raw string, om de backslash niet te moeten escapen a l l e m a a l = r e. f i n d i t e r ( patroon, s t r i n g ) for m in a l l e m a a l : print s t r i n g [m. s t a r t ( ) :m. end ( ) ] # --> 445 en 665 print l e n ( r e. f i n d a l l ( patroon, s t r i n g ) ) # --> 2 Elke match kan ook nog eens een aantal groepen bevatten. Om een groep je maken, gebruik je ronde haakjes in het patroon. Elk deelpatroon dat tussen haakjes voorkomt, wordt een groep. Deze groepen zijn dan genummerd in volgorde van voorkomen (te beginnen bij 1, want 0 is de hele match). Met de group methode van het MatchObject kan je een bepaalde groep opvragen. Uit de datum (in standaard datum formaat, d.i. Sat Jan 31 20:51: ) de tijd bepalen: import time m = r e. search ( r (\ d\d ) : ( \ d\d ) : ( \ d\d ), time. ctime ( ) ) t i j d = { uur : m. group ( 1 ), min : m. group ( 2 ), s e c : m. group ( 3 ) } print t i j d # ---> { min : 20, sec : 55, uur : 20:55:25 } 11

16 Een RE bestaat dikwijls uit een herhaling van een bepaald patroon (bijv. een uur bestaat uit een opeenvolging van twee cijfers). Om deze herhaling niet expliciet te moeten definiëren, zijn er herhalingsoperatoren. RE herhalingsoperatoren * 0 of meerdere maal + 1 of meerdere maal? 0 of 1 maal {n} juist n maal {n,} tenminste n maal {n,m} tenminste n maal, maar niet meer dan m maal m = r e. search ( r (\w{ 3 } ). ( \ d { 2,4}), time. ctime ( ) ) dag = m. group ( 1 ) # juist drie letters j a a r = m. group ( 1 ) # twee tot vier cijfers Zoeken en vervangen. De functie re.sub(patroon, nieuwe, string) dient om in een string het patroon te vervangen door een nieuwe string. Deze vervanging gebeurt niet in place: de functie geeft de string terug die het resultaat is van de vervanging en laat de oorspronkelijke string onveranderd. De sub methode vervangt alle voorkomens van het gezochte patroon. Als optioneel vierde argument kan een getal n worden meegegeven om het aantal vervangingen te beperken tot n. t e k s t = De hond word gewassen en z i j n s t a a r t word b i j g e k n i p t. print r e. sub ( word, wordt, t e k s t ) Moest er in de tekst al een wordt met dt staan, dan zou deze vervangen worden door wordtt. Om dit te voorkomen, kunnen we dit proberen: t e k s t = De hond wordt gewassen en z i j n s t a a r t word b i j g e k n i p t. print r e. sub ( word [ ˆ t ], wordt, t e k s t ) Hiermee verdwijnt echter de spatie tussen word en bijgeknipt. We kunnen dit oplossen met een lookahead. Dit is iets van de vorm (?=...) en zal ervoor zorgen dat het patroon slechts match indien het door iets bepaalds gevolgd wordt, zonder echter de match zelf langer te maken. Er bestaat ook een negatieve lookahead (?!...) t e k s t = De hond word gewassen en z i j n s t a a r t wordt b i j g e k n i p t. print r e. sub ( word(?=[ˆ t ] ), wordt, t e k s t ) print r e. sub ( word (?! t ), wordt, t e k s t ) # Hetzelfde met negatieve lookahead In de vervangende tekst, kan je ook de notatie \i gebruiken om terug te verwijzen naar groep nummer i in het gematchte patroon. Hiermee krijgen we nog een derde alternatieve oplossing voor het voorgaande probleem: t e k s t = De hond word gewassen en z i j n s t a a r t wordt b i j g e k n i p t. print r e. sub ( word ( [ ˆ t ] ), r wordt \1, t e k s t ) We kunnen dit ook gebruiken om bv. een datum in Amerikaanse schrijfwijze om te zetten naar Europese schrijfwijze. datum = Nine e l e v e n gebeurde op 9/11/2001 print r e. sub ( r (\ d\d?)/(\ d\d?)/(\ d { 2,4}), r \2/\1/\3, datum ) In plaats van een string, kan het tweede argument van sub ook een functie zijn. Deze wordt dan opgeroepen voor elk voorkomen van het patroon die gevonden wordt, met het corresponderende MatchObject als argument. 12

17 def telwoord ( match ) : telwoorden = [ nul, een, twee, d r i e, v i e r, v i j f, z e s, zeven, acht, negen ] return telwoorden [ i n t ( match. group ( 0 ) ) ] t e k s t = Als i k 3 b i g g e t j e s heb en i k e e t er 1 op, dan heb i k er nog 2. print r e. sub ( r \d, telwoord, t e k s t ) 3.2 Toepassing: verwerking van form gegevens Overzicht van CGI omgevingsvariabelen Een klassiek misverstand ivm CGI is dat men command-lijn opties en argumenten zou kunnen doorsturen naar het CGI programma. Dit is echter niet mogelijk omdat CGI de command lijn voor andere doeleinden gebruikt. Om aan het programma parameters door te geven, gebruikt CGI omgevingsvariabelen. De belangrijkste zijn: QUERY STRING: is gedefinieerd als alles wat volgt na de eerste? in de URL. Deze informatie kan toegevoegd worden ofwel door een ISINDEX document, of door een HTML form (met de GET actie). Het kan ook manueel ingesloten worden in de HTML anchor die de gateway refereert. Deze string is in het standaard URL formaat geëncodeerd: spaties zijn omgevormd in plussen en sommige speciale tekens zijn omgezet in een %HH hexadecimaal equivalent. Voordat de query string kan ontleed worden, moet deze dus eerst in het programma terug gedecodeerd worden. PATH INFO: CGI laat toe om extra informatie te embedden in de URL voor uw gateway die kan gebruikt worden om extra context-specifieke informatie over te brengen naar de scripts. Deze informatie is gewoonlijk beschikbaar als extra informatie na het pad van de gateway in de URL. Deze informatie wordt op geen enkele manier gecodeerd door de server. Een voorbeeld van gebruik van PATH_INFO is het overbrengen van locaties van bestanden naar het CGI programma. Bijvoorbeeld, een CGI programma op de server met naam /cgi-bin/joske dat bestanden uit de DocumentRoot van de server kan verwerken. Het moet mogelijk zijn om aan joske duidelijk te maken welk bestand moet verwerkt worden. Door extra pad informatie op het einde van de URL op te nemen zal joske de locatie van het document relatief tov DocumentRoot kennen via the PATH_INFO omgevingsvariabele. Ook gekend is het effectieve pad naar het document via de PATH_TRANSLATED omgevingsvariabele die door de server gegenereerd wordt. Bij een Python script zitten al deze variabelen in het woordenboek os.environ in de module os. 13

18 Naam betekenis SCRIPT_FILENAME The full pathname van de current CGI REQUEST_METHOD GET or POST QUERY_STRING de query string (voor de GET methode) CONTENT_LENGTH lengte van de input (voor de POST methode) HTTP_REFERER URL van de pagina die het script oproept HTTP_USER_AGENT browser type van de bezoeker REMOTE_ADDR IP adres van de bezoeker REMOTE_HOST hostnaam van de bezoeker REMOTE_PORT de poort waarop de bezoeker is geconnecteerd REMOTE_USER usernaam van de bezoeker DOCUMENT_ROOT root directory van de server HTTP_HOST hostnaam van de server SERVER_ADMIN adres van de webmaster van de server SERVER_NAME fully qualified domein naam van de server SERVER_PORT het poort nummer waarop de server luistert SERVER_SOFTWARE gebruikte server software (bijv. Apache 1.3) PATH het systeempad van de server Niet alle omgevingsvariabelen worden gezet voor iedere CGI. De meeste CGI scripts hebben ook slechts een beperkt aantal omgevingsvariabelen nodig. Het maken van een lijst van alle omgevingsvariabelen: s t a r t = """Content-Type: text/html <! DOCTYPE HTML PUBLIC "-// IETF// DTD HTML// EN"> <html > <head > <title >Hoi </title > </head > <body > <table > """ eind = </table ></body></html> print s t a r t import os env = os. environ for naam in env : print <t r ><td> + naam + </td><td> + env [ naam ] + </td></t r > INPUT elementen Perl script voor de verwerking van de gegevens uit de form met checkboxen en radio buttons. 1 #!/ usr/ bin/ python 3 class CGIParser : 5 def i n i t ( s e l f ) : s e l f. params = {} 7 for g e l i j k h e i d in CGIParser. g e t P a r a m e t e r L ijst ( ) : ( l i n k s, r e c h t s ) = CGIParser. p a r s e G e l i j k h e i d ( g e l i j k h e i d ) 9 s e l f. params [ l i n k s ] = r e c h t s 14

19 def p a r s e G e l i j k h e i d ( g e l i j k h e i d ) : 13 def hexchar ( h ) : return chr ( i n t ( h, 1 6 ) ) 15 def decodestring ( s t r i n g ) : import r e 17 s t r i n g = r e. sub ( \+,, s t r i n g ) s t r i n g = r e. sub ( %(\d {2}), lambda x : hexchar ( x. group ( 1 ) ), s t r i n g ) 19 return s t r i n g return map( decodestring, g e l i j k h e i d. s p l i t ( = ) ) 23 def g e t P a r a m e t erlijst ( ) : import os 25 i f os. environ [ REQUEST METHOD ] == GET : return os. environ [ QUERY STRING ]. s p l i t ( & ) 27 else : import sys 29 l i j s t = [ ] for l i n e in sys. s t d i n : 31 l i j s t. append ( l i n e ) return l i j s t 33 def getparameter ( s e l f, p ) : 35 return s e l f. params [ p ] 37 def main ( ) : pagina1 = """Content-Type: text/html 39 <! DOCTYPE HTML PUBLIC "-// IETF// DTD HTML// EN"> 41 <html > <head > 43 <title >Hoi </title > </head > 45 <body > 47 <p>we kregen: """ 49 pagina2 = """!</p> 51 </body > </html >""" 53 p a r s e r = CGIParser ( ) print pagina1 + p a r s e r. getparameter ( veld ) + pagina2 55 main ( ) De omzettingsprocedure moet de data splitsen op de ampersands. Voor elk paar dat bekomen wordt, moet zowel de naam als de waarde URL gedecodeerd worden: plussen terug omzetten in spaties en hexadecimale getallen in de corresponderende tekens. Daarna kan met de naam en de waarde om het even wat gedaan worden. We verzamelen ze hier nu in een woordenboek. 15

20 3.2.3 SELECT element Wanneer meer dan één selectie gekozen (bij multiple) is, worden meerdere paren naar het script doorgestuurd: frequ=dagelijkse+rapportering&frequ=maandelijkse+rapportering In het script zou nu in de associatieve array in het element met sleutel frequ twee waarden moeten bewaard worden. #!/usr/bin/python class CGIParser : def i n i t ( s e l f ) : s e l f. params = {} for g e l i j k h e i d in CGIParser. g e t P a r a m e t e r L ijst ( ) : ( l i n k s, r e c h t s ) = CGIParser. p a r s e G e l i j k h e i d ( g e l i j k h e i d ) i f l i n k s in s e l f. params : s e l f. params [ l i n k s ]. append ( r e c h t s ) else : s e l f. params [ l i n k s ] = [ r e c h t s def p a r s e G e l i j k h e i d ( g e l i j k h e i d ) : def hexchar ( h ) : return chr ( i n t ( h, 1 6 ) ) def decodestring ( s t r i n g ) : import r e s t r i n g = r e. sub ( \+,, s t r i n g ) s t r i n g = r e. sub ( %(\d {2}), lambda x : hexchar ( x. group ( 1 ) ), s t r i n g ) return s t r i n g return map( decodestring, g e l i j k h e i d. s p l i t ( = ) def g e t P a r a m e t erlijst ( ) : import os i f os. environ [ REQUEST METHOD ] == GET : return os. environ [ QUERY STRING ]. s p l i t ( & ) else : import sys l i j s t = [ ] for l i n e in sys. s t d i n : l i j s t. append ( l i n e ) return l i j s t def getparameter ( s e l f, p ) : return s e l f. params [ p ] [ 0 ] def getparametervalues ( s e l f, p ) : return s e l f. params [ p ] def main ( ) : pagina1 = """Content-Type: text/html 16

21 <! DOCTYPE HTML PUBLIC "-// IETF// DTD HTML// EN"> <html > <head > <title >Hoi </title > </head > <body > <p>we kregen: """ pagina2 = """!</p> </body > </html >""" p a r s e r = CGIParser ( ) print pagina1 + p a r s e r. getparameter ( veld ) + pagina2 main ( ) TEXTAREA element De POST methode gebruikt standard input om de data over te brengen en hier is geen beperking op de lengte van de input data. Daarom is deze methode meestal te verkiezen, alhoewel het enkele lijnen meer code vraagt. Door deze lijnen wat uit te breiden kan er ook een beperking geplaatst worden op de hoeveelheid data die door het script binnen genomen wordt. 1 def g e t P a r a m e t e r Lijst ( ) : import os 3 i f os. environ [ REQUEST METHOD ] == GET : return os. environ [ QUERY STRING ]. s p l i t ( & ) 5 else : import sys 7 import os n = i n t ( os. environ [ CONTENT LENGTH ] ) 9 i f ( n > ) : raise ValueError ( Input te g r o o t ) 11 return sys. s t d i n. read ( n ). s p l i t ( ) In het totaal wordt niet meer dan bytes binnengenomen en de waarde van elk paar kan hoogstens 8192 bytes lang zijn. 3.3 Opmerkingen CGI scripts moeten in een specifieke directory geïnstalleerd worden zodat de server ze kan vinden en uitvoeren. De plaats van de directory is door de webmaster bepaald, bijvoorbeeld /usr/local/httpd/cgi-bin Testen van een CGI script Om een CGI script te testen, moet een HTML document met form geïnstalleerd worden in de public_html directory van een gebruiker en het script zelf in de cgi-bin directory van de DocumentRoot directory van de webserver. Dan moet de browser opgestart worden en kan de form ingevuld worden zodat het script input krijgt. Om alleen het script zelf te testen zonder een webserver en een browser, kan de volgende methode gebruikt worden. Een aantal omgevingsvariabelen worden gezet, bijv. in de C-shell: 17

22 of setenv REQUEST_METHOD GET setenv QUERY_STRING "naam=joske+flup&adres=ginder+6" setenv REQUEST_METHOD POST setenv CONTENT_LENGTH 30 en het script kan gestart worden: script.py (bij GET) of script.py < inn (bij POST) waarbij inn een bestand is met de input voor het script (bijv. naam=joske+flup&adres=ginder+6) Veiligheid Omdat een CGI programma uitvoerbaar is, is het eigenlijk hetzelfde als om het even wie een programma laten uitvoeren op uw systeem, wat helemaal niet het veiligste is om te laten doen. Een mogelijk probleem is het gebruik van os.system, die een programma uitvoert alsof het ingetikt is op de commandlijn. Bijvoorbeeld een Python script met de volgende lijn: os. system ( / usr / bin / c a l + maand ) ; Op zich geen probleem: het effect is de kalender van de gespecificeerde maand in 1999 te tonen. Veronderstel echter dat de waarde voor de variabele maand afkomstig van de input van een gebruiker via een form. Een brave gebruiker zal natuurlijk op de juiste manier een maand en jaar ingeven. Maar een hacker heeft hier de mogelijkheid om de inhoud van het paswoord bestand van het server systeem over te halen naar zijn eigen systeem. De input die hij moet geven is ; cat /etc/passwd; echo" De informatie die nu naar de client gestuurd wordt, is de output van drie commands: system("/usr/bin/cal ; cat /etc/passwd; echo 1999"); D.i. de kalender van de huidige maand, de inhoud van het paswoord bestand en het getal Een andere, niet gewenste input is ; rm -rf *; echo". Zelfs als de server met vrij beperkte privileges draait, kunnen toch heel wat bestanden hierdoor verwijderd worden. Een echte ramp is het natuurlijk wanneer de webserver met root privileges draait. De eenvoudige GET methode houdt ook gevaren in. De data wordt doorgestuurd als laatste deel van de URL. Daardoor zal de volledige data opgenomen worden in de logfile van de webserver. Meestal kan deze logfile door iedereen gelezen worden. De GET methode is dus niet aangewezen wanneer een paswoord, kredietkaartgegevens of andere gevoelige informatie moet opgevraagd worden. In deze gevallen moet met de POST methode gewerkt worden. Beveiliging. Er moeten dus enkele veiligheidsvoorzieningen geïmplementeerd worden bij het gebruik van CGI programma s. Een voorbeeld hiervan heeft te maken met de directory waarin de CGI programma s verzameld zijn. Dit is een speciale directory die onder controle van de webmaster staat. Dus niet iedereen kan zomaar CGI programma s installeren. Hiervoor is toelating van de webmaster nodig. Bij veel verschillende webservers is dit de directory cgi-bin. Een CGI programma kan in om het even welke taal geschreven worden die op het systeem uitvoerbaar is. Voorbeelden zijn Python, C/C++, Fortran, PERL, TCL, een Unix shell, Visual Basic. Indien voor C of Fortran gekozen wordt, waarbij het programma moet gecompileerd worden, wordt meestal de broncode in de directory /cgi-src geplaatst. Veel CGI-ontwerpers verkiezen echter om CGI scripts te schrijven waarbij het script zelf in de /cgi-bin directory geplaatst moet worden. CGI scripts zijn gemakkelijker te debuggen, aan te passen en te onderhouden dan gecompileerde programma s. 18

Nog meer weergeven