Internettechnieken op het RitaWeb

Internettechnieken op het RitaWeb Hugo Troch 10 februari 2003 1 Basistechnieken 1.1 Technologieën Een internettoepassing maakt gebruik van verschillende technologieën. Er is niet één paradigma, maar er moet gekozen worden tussen een overweldigend aanbod aan particuliere technologieën. Bij de opbouw van het RitaWeb werd gekozen voor een Windows-IIS-SQLserver-asp 1 aanpak gekozen. Een toepassing komt neer op het samenvoegen van een aantal html-pagina s, javascript-modules, asp-scripts, xml-bestanden en -bestanden. De gegevens die aangeboden worden, komen uit een SQL-server-databank. De scripttaal kan VB-script of javascript zijn, meestal wordt javascript gebruikt in de browser-toepassingen, de standaard-taal voor een asp-script is VBscript. Om de servers in de loop van de werkdag te ontlasten. werd er voor gekozen om een aantal basisbestanden (klaslijsten, leraarsinformatie, cijferlijsten, uurroosters... ) in xml-vorm s morgens aan te maken. Daarvoor wordt het programma webopbouw gebruikt, dat in Delphi geschreven werd. Deze gegevens worden als xml-bestanden bewaard in de map RitaWeb/XMLdatabank/XMLBestanden. Andere gegevens (afwezigheden, leerlingdossiers, bibliotheek,... ) worden rechtstreeks uit de databank gehaald. 1.2 Basisarchitectuur Een aanvraag voor een webpagina door de client wordt meestal afgehandeld door een indexpagina, die de gebruiker een menu aanbiedt. Dit menu is meestal samengesteld uit gegevens uit de databank. Een menukeuze van de gebruiker roept een pagina op, met gegevens die ook weer uit de databank komen. Gegevens Menu Index-pagina client Het belangrijkste probleem bij dit opzet is de communicatie tussen de applicatie en de databank. Dit kan op veel manieren gerealiseerd worden, elk met hun eigen voor- en nadelen. Om een dergelijk opzet te realiseren, moet men beschikken over volgende vaardigheden: 1. Basis html-kennis: basislay-out, hyperlinks, lijsten, tabellen. 2. Werken met frames. 1 In tegenstelling tot de Linux-Apache-MySql-Php aanpak. De LAMP-aanpak is het meest verspreid op het internet. De WISA-aanpak ligt meer voor de hand in een exclusieve windows-omgeving. Voor de architectuur maakt dit nauwelijks verschil 1

3. Werken met forms. 4. Werken met dynamic-html. Kennis van het object-model van een web-pagina. 5. Gebruik van javascript voor de sturing van dynamic-html-pagina s. 6. Kennis van SQL voor het aanspreken van een databank. 7. Elementaire kennis van het objectmodel van ADO, voor het gebruik van de databank. 8. Kennis van het object-model van asp. 9. Kennis van VBscript/javascript voor het schrijven van de asp-pagina s. 10. Basiskennis van xml-technieken. 11. Basiskennis van -transformaties. Bij het ontwerp is de kunst vooral om al deze elementen samen te voegen tot een zinvol geheel. Een echt gespecialiseerde en grondige kennis van de verschillende technologieën blijkt minder belangrijk dan een goed inzicht in de architectuur van de toepassingen. De aandacht gaat eerder naar de samenhang van de componenten dan naar de componenten zelf. 2 Technieken zonder rechtstreekse data-access 2.1 Gebruik bestandssysteem 2.1.1 Html-pagina s html & Javascript client De html-pagina s worden manueel opgesteld en op eenvoudig verzoek van de client getoond. Ze zijn georganiseerd in een virtuele mappenstructuur die gedeeltelijk samenvalt met de mappenstructuur van het bestandssysteem. Voorbeeld: (namen.html) <body> <table><tr> <td>jan</td> <td>piet</td> </tr></table> </body> Elke applicatie bevat enkele documenten van deze soort: index-pagina s, menu s, blanco-pagina s. Maar ook de studiecontracten, berichten van de directie, enz... zijn van deze vorm. Meestal betreft het hier documenten die opgesteld zijn met Word en door Word automatisch geconverteerd werden naar html. 2

2.1.2 Html-vreemde documenten exe, pdf, ppt,... client Andere documenten dan html of asp kunnen opgevraagd worden door de browser. Ze worden getoond als de browser de juiste plug-in heeft. Anders kan de gebruiker ze downloaden en/of openen met een aangepast programma. De documentatie van RitaBank en RitaWeb is deels als pdf-document opgesteld. Er zijn enkele downloads van didactische software voorzien en power-point-introducties in ICT. Om correct te werken moet de juiste software geïnstalleerd zijn op de client. 2.1.3 Cgi Bestandssysteem cgi client Cgi is een ietwat verouderde, maar degelijke techniek, met weinig flexibiliteit, maar met veel mogelijkheden voor complexere algoritmen. Voorbeeld (in pascal): program cgi; {$APPTYPE CONSOLE} begin writeln( HTTP 1/0 ); writeln( Content-type: text/html ); writeln( ); writeln( <html><head><title>voorbeeld</title></head> ); writeln( </head><body> ); writeln( <table><tr> ). writeln( <td>jan</td> ); writeln( <td>piet</td> ); writeln( </tr></table> ); writeln( </body></html> ); end. Er wordt een menu on-the-fly aangemaakt met het CGI-programma geleblaadjes.exe (geschreven in Delphi). 3

2.1.4 Manueel xml xml client De xml-pagina s worden manueel opgesteld en op eenvoudig verzoek van de client getoond. De -stijl van het document wordt vermeld bovenaan het document. Voorbeeld De XML-pagina (namen.xml): <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/" href="namen."?> <namen> <n>jan</n> <n>piet</n> </namen> De XSL-pagina (namen.): <?xml version="1.0" encoding="iso-8859-1"?> <:stylesheet xmlns:="http://www.w3.org/tr/wd-" > <:template match="/"> <body> <table> <:apply-templates select="//n" /> </table> </body> </:template> <:template match="n"> <:value-of /> </:template> </:stylesheet> Checklists. 2.1.5 Xml-bestanden aanpassen met asp Het is mogelijk om via asp tekstbestanden op de server te manipuleren. Het is dus mogelijk om op aanvraag van de client, xml-bestanden te schrijven of aan te passen. xml & of dom asp client Deze techniek werkt goed met kleine xml-bestanden. Voor grotere bestanden blijkt hij onbetrouwbaar (timing-problemen) en is het beter om databank-technieken te gebruiken. 4

Voorbeeld: (namenxmlbestand.asp schrijft het bestand denamen.xml) @ language= "JavaScript" var fysischpad = Server.MapPath( denamen.xml ); var fsystem = Server.CreateObject("Scripting.FileSystemObject"); if (!fsystem.fileexists(fysischpad)) {fsystem.createtextfile(fysischpad);} var file = fsystem.getfile(fysischpad); var bestand = file.openastextstream(2,-2); with(bestand) {WriteLine( <?xml version="1.0" encoding="iso-8859-1"?> ); WriteLine( <namen> ); WriteLine( <n>jan</n> ); WriteLine( <n>piet</n> ); WriteLine( </namen> );} file.close; Deze techniek maakt geen gebruik van de databank en zal op termijn verdwijnen. De techniek wordt o.a. gebruikt bij fout- en probleemmelding. Het beheer van de webopbouw gebeurt ook op deze manier, maar er wordt een gewoon tekstbestand beschreven. 2.2 Xml-pagina s en webopbouw Een xml-document kan rechtstreeks in een browser getoond worden. Er is dan echter geen opmaak en de gegevens worden op zuiver hiërarchische wijze getoond. Daarom wordt voor de presentatie gebruik gemaakt van t of DOM. Het xml-document wordt dan omgezet naar een html-versie. De gegevens voor de xml-documenten worden s morgens uit de databank gehaald en in de juiste vorm gegoten door het programma webopbouw.exe. 2.2.1 Presentatietechnieken met t zonder asp Het doorgeven van parameters tussen de onderdelen van een applicatie is een speciaal probleem. Er werd voor gekozen om de parameters via een globale veranderlijke in het top-frame van de applicatie door te geven. Deze werkwijze staat een doorgedreven modulariteit in de weg. Webopbouw xml } client De t-technieken zijn het meest flexibel. Het stijldocument wordt gespecifieerd bovenaan het xml-document zelf. De maand- en semesterrapporten, loopbaan worden op deze manier gepresenteerd. Het betreft hier statische documenten met weinig gebruikersinteractie. 5

2.2.2 Xml en t in een html-pagina Webopbouw xml } html client Het stijldocument en xmldocument worden opgeroepen vanuit het html-document. Dit laat toe om dezelfde gegevens op verschillende manieren te presenteren. Voorbeeld: (namenxmlenxsl.html) <head> <script> var Admin = new ActiveXObject("microsoft.XMLDOM"); var Stijl = new ActiveXObject("microsoft.XMLDOM"); function vulxmlaan() { Stijl.async = false; Stijl.load("namen.") Gegevens.async=false; Gegevens.load("namen.xml"); tekst.innerhtml = Gegevens.transformNode (Stijl); } </script> </head> <body onload="vulxmlaan();"> <span id="tekst"> </span> </body> De videobanden en de documentatie van de RitaBank, worden op deze manier gepresenteerd. 2.2.3 Presentatietechnieken met dom zonder asp Het doorgeven van parameters tussen de onderdelen van een applicatie is een speciaal probleem. Er werd voor gekozen om de parameters via een globale veranderlijke in het top-frame van de applicatie door te geven. Deze werkwijze staat een doorgedreven modulariteit in de weg. html Webopbouw xml Javascript & DOM Voorbeeld: (namenxmleiland.html) } client <head> <script> var namen = new ActiveXObject("microsoft.XMLDOM"); function vulxmlaan() {namen.onreadystatechange = showtime; namen.load("namen.xml"); } De DOM-technieken worden via javascripts gebruikt op een html- Ze laten toe om het xml- pagina. document interactief te manipu- in de browser (zonder de leren server te belasten). 6

function showtime() {if(!((namen.readystate == complete ) (namen.readystate == 4))){return}; var naam = namen.childnodes(2); tekst.innerhtml = <table> + <tr><td> + naam.childnodes(0).text + </td><td> + naam.childnodes(1).text + </td></tr></table> ; } </script> </head> <body onload="vulxmlaan();"> <span id="tekst"></span> </body> Deze techniek wordt gebruikt bij het presenteren van de roosters, in de menu s voor klas- en leerlingkeuze, klasoverzichten, foto s zesdejaars, materiaal, leraars- en leerlingenfiches, inschrijving, studiekeuze, admoinistratieve gegevens, school- en klasfoto s enz.... Het betreft hier ofwel oudere documenten of documenten met veel gebruikers-interactie. Het is de meest gebruikte architectuur op het RitaWeb. 2.2.4 Presentatietechnieken met asp De technieken zonder asp, die hierboven beschreven werden, hebben drie nadelen: 1. Ze leggen veel beslag op de client, omdat het omvormen van het xml-document naar een html-document volledig ten laste van de client valt. 2. Niet elke browser ondersteunt de omvorming van een xml-document via DOM of t. Bovendien zijn deze technologieën niet gestandaardiseerd. 3. Het doorgeven van parameters tussen de html-pagina s is geen gelukkige optie. Het is mogelijk om deze beperkingen op te heffen, door de omvorming xml html op de server te laten gebeuren. Dat betekent dat de client een asp-document opvraagt, dat de parsing van het xml-document voor zijn rekening neemt. Daarmee lost men het probleem van de clientbelasting op. Bovendien kan men dan het gebrek aan standaardisatie opvangen, omdat men enkel moet rekening houden met de technologie op de server. Voor het doorgeven van parameters heeft html-asp twee solide mechanismen: het GET en het POST-model. Webopbouw xml Voorbeeld: (namenopbouw.asp) } asp @ language= "JScript" var gegevens = new ActiveXObject("microsoft.XMLDOM"); var stijl = new ActiveXObject("microsoft.XMLDOM"); gegevens.async = false; stijl.async = false; if (gegevens.load(server.mappath( namen.xml ))) client Op de asp-pagina wordt het xml- ge- document transformeerd met behulp van het -document. 7

{if(stijl.load(server.mappath( namen. ))) {Response.write(gegevens.transformNode(stijl))} else {Response.write( <h3>fout1</h3> );} } else {Response.write( <h3>fout2</h3> );} Deze techniek wordt gebruikt bij het archief. In een metabestand wordt gespecifieerd welk stijlbestand moet gebruikt worden voor welk xml-bestand. Nieuwe toepassingen, die gebruikt maakt van statische xml-bestanden, zullen best volgens deze architectuur geschreven worden. 3 Technieken met data-access Op een asp-pagina kan men via ADO rechtstreeks contact leggen met een databank op de server. Dit maakt het mogelijk om on-the-fly documenten op te stellen uit de databank. 3.1 asp en html html asp client Voorbeeld:(namenDBankDirect.asp) Als het resulterend htmldocument niet al te ingewikkeld is, valt de noodzaak voor een xml-tussenstap weg. @ language= "JScript" <body> var datacon = Server.CreateObject("ADODB.Connection"); var datarec = Server.CreateObject("ADODB.Recordset"); var openstr = "driver={sqlserver};data Source=diverse;uid=sa;pwd=;"; var sqlstr = "SELECT * from namen"; datacon.open(openstr); datarec.open(sqlstr,datacon) if (datarec.eof) {Response.write("<h3>Er zijn geen namen.</h3>")} else {Response.write( <table><tr> ); while(!datarec.eof ) {var denaam = Server.HTMLEncode(dataRec("naam")) Response.Write ("<td>" + Server.HTMLEncode(dataRec("naam")) + "</td>") datarec.movenext} Response.Write("</tr></table>") } </body> Deze techniek wordt gebruikt bij het opzoeken van boeken uit de bibliotheek. 8

3.2 Asp en xml Er kunnen xml-documenten samengesteld worden in de asp-pagina zelf, ofwel op de server met een stored procedure. De omvorming naar een html-document gebeurt dan via t of DOM, ofwel op de server (in het asp-document), ofwel op de client. 3.2.1 Xml-opbouw op de server, DOM op de client html xml asp xml Javascript & DOM } client De asp-pagina levert de xml op een data-eiland in de htmlpagina. De DOM-technieken presenteren de gegevens via javascripts. Voorbeeld: De HTML-pagina: (namendbankxmleiland.html) <head> <script> var namen = new ActiveXObject("microsoft.XMLDOM"); function vulxmlaan() {namen.onreadystatechange = showtime; namen.load("namendbankdom.asp"); } function showtime() {if(!((namen.readystate == complete ) (namen.readystate == 4))){return}; var naam = namen.childnodes(0); tekst.innerhtml = <table> + <tr><td> + naam.childnodes(0).text + </td><td> + naam.childnodes(1).text + </td></tr></table> ; } </script> </head> <body onload="vulxmlaan();"> <span id="tekst"></span> </body> De ASP-pagina: (namendbankxmleiland.asp) @ language= "JScript" var datacon = Server.CreateObject("ADODB.Connection"); var datarec = Server.CreateObject("ADODB.Recordset"); var openstr = "driver={sqlserver};data Source=diverse;uid=sa;pwd=;"; datacon.open(openstr); var sqlstr = "SELECT * from namen"; datarec.open(sqlstr,datacon) Response.write( <namen> ); while(!datarec.eof ) {var denaam = Server.HTMLEncode(dataRec("naam")) Response.Write ("<naam>" + Server.HTMLEncode(dataRec("naam")) + "</naam>") datarec.movenext}; 9

Response.Write("</namen>"); Deze techniek wordt gebruikt bij de afwezigen (leraars en leerlingen) en de openingsmarquee. 3.2.2 Xml-opbouw op de asp-pagina, t op de client ruw asp xml client Het gebruik van een apart xmlen -document maakt het onderhoud van de toepassing zeer flexibel. Voorbeeld: (namendbankruw.asp) @ language= "JScript" var datacon = Server.CreateObject("ADODB.Connection"); var datarec = Server.CreateObject("ADODB.Recordset"); var openstr = "driver={sqlserver};data Source=diverse;uid=sa;pwd=;"; var sqlstr = "SELECT * from namen"; datacon.open(openstr); datarec.open(sqlstr,datacon); Response.write( <?xml version="1.0" encoding="iso-8859-1"?> ); Response.write( <?xml-stylesheet type="text/" href="namen."?> ); Response.write( <namen> ); while(!datarec.eof ) {var denaam = Server.HTMLEncode(dataRec("naam")) Response.Write ("<n>" + Server.HTMLEncode(dataRec("naam")) + "</n>") datarec.movenext}; Response.Write("</namen>"); De belangrijkste toepassing zijn de leerlingen refterpasjes. 10

3.2.3 Xml-opbouw in SQLserver, t op de client xml asp xml client Als de query s in de databank complex zijn, kan men het xml-document beter opbouwen met een stored procedure in SQL-server. Dit verhoogt de flexibiliteit van de data-verzameling, maar gaat ten koste van de flexibiliteit van de presentatie. Voorbeeld: De stored procedure: create procedure maaknamenxml as set nocount on create table #actiexml(xmltekst text) insert into #actiexml(xmltekst) values ( ) declare @tekst varchar(8000) declare @@ptrval varbinary(16) select @@ptrval = textptr(xmltekst) from #actiexml declare @naam varchar(50) declare decursor cursor local for select naam from namen for read only set @tekst = <?xml version= 1.0?> + <?xml-stylesheet type="text/" href="namen."?> + <namen> updatetext #actiexml.xmltekst @@ptrval null 0 @tekst open decursor fetch next from decursor into @naam while (@@fetch_status = 0) begin set @tekst = <n> + @naam + </n> updatetext #actiexml.xmltekst @@ptrval null 0 @tekst fetch next from decursor into @naam end set @tekst = </namen> updatetext #actiexml.xmltekst @@ptrval null 0 @tekst close decursor deallocate decursor select * from #actiexml De ASP-pagina: (namendbankxml.asp) @ language= "JScript" var datacon = Server.CreateObject("ADODB.Connection"); var datarec = Server.CreateObject("ADODB.Recordset"); 11

De leerlingtotalen, tekorten leerlingen en de leerlingen die van klas veranderen in de loop van het schooljaar. 3.2.5 Xml-opbouw in SQL-server, t op de asp-pagina xml asp html client Bij ingewikkelde SQL-activiteit en minimale belasting van de client kan men het proces gegevens xml html verdelen tussen de asp-pagina en SQL-server. Voorbeeld: (namendbankxml-asp-xsl.asp) @ language= "JScript" var datacon = Server.CreateObject("ADODB.Connection"); var datarec = Server.CreateObject("ADODB.Recordset"); var openstr = "driver={sqlserver};data Source=diverse;uid=sa;pwd=;"; var sqlstr = "execute maaknamenxml"; datacon.open(openstr); datarec.open(sqlstr,datacon); var XMLTekst = datarec("xmltekst"); var gegevens = Server.CreateObject("microsoft.XMLDOM"); var stijl = Server.CreateObject("microsoft.XMLDOM"); if(!gegevens.loadxml(xmltekst)) {Response.write("<h3>Fout 1</h3>")} else {if (!stijl.load(server.mappath("namen."))) {Response.write("<h3>Fout 2</h3>")} else {Response.write(gegevens.transformNode(stijl))} }; datarec.close; datacon.close; De activiteitenkalender, IT-materiaal en vakrapportoverzicht zijn opgebouwd met dergelijke technieken. 13

3.3 Xml en t op SQL-server Het is ook mogelijk om de xml-documenten en de bijhorende stijldocumenten als tekst op te slaan in de databank. Op verzoek worden het xml-document en het bijhorende -document dan opgevraagd uit de databank. Het xml-document wordt omgezet naar de juiste html-versie en doorgestuurd naar de client. xml } asp html client De gegevens voldoen niet meer aan het relationeel model en zijn dus moeilijker aanspreekbaar in SQLserver. De complexiteit van de toepassing kan echter zeer hoog worden. Voorbeeld: (namendbanktext.asp) @ language= "JScript" var datacon = Server.CreateObject("ADODB.Connection") var datarec = Server.CreateObject("ADODB.Recordset") var openstr = "driver={sqlserver};data Source=diverse;uid=sa;pwd=;" datacon.open(openstr) sqlstr = "select * from XMLenXSLnamen" datarec.activeconnection = datacon; datarec.open(sqlstr); var gegevens = Server.CreateObject("microsoft.XMLDOM"); if (!gegevens.loadxml(datarec("xmltekst"))) {Response.write("<h3>Fout 1</h3>"); var stijl = Server.CreateObject("microsoft.XMLDOM"); if (!stijl.loadxml(datarec("tekst"))) {Response.write("<h3>Fout 2</h3>")} else {Response.write(gegevens.transformNode(stijl))}; datarec.close; datacon.close; Deze techniek wordt gebruikt bij de vakrapporten. 14