Internettechnieken op het RitaWeb

Internettechnieken op het RitaWeb Hugo Troch 10 februari 2003

1

Basistechnieken

1.1

Technologie¨ en

Een internettoepassing maakt gebruik van verschillende technologie¨en. Er is niet ´e´en paradigma, maar er moet gekozen worden tussen een overweldigend aanbod aan particuliere technologie¨en. 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 xsl-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

PP

PP q 1 ³³ ³ ³³

?6 ±

°

-

Menu

PP

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 xsl-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¨en 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)

Jan

Piet

Toepassing: 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.

Toepassing: 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(’’); writeln(’’); writeln(’’). writeln(’’); writeln(’’); writeln(’

Jan

Piet

’); writeln(’’); end. Toepassing: Er wordt een menu ’on-the-fly’ aangemaakt met het CGI-programma geleBlaadjes.exe (geschreven in Delphi).

3

2.1.4

Manueel xml

xml

PP

xsl

³

De xml-pagina’s worden manueel opgesteld en » op eenvoudig verzoek van de client getoond. De xsl-stijl van het document wordt vermeld bovenaan het document. ¼

¾ PP P q client ³ 1 ³ ³³ ½ ³ ³ PP

Voorbeeld De XML-pagina (namen.xml): Jan Piet De XSL-pagina (namen.xsl): <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" > <xsl:template match="/"> <xsl:apply-templates select="//n" /> <xsl:template match="n"> <xsl:value-of /> Toepassing: 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 & xsl of dom 6? asp

PP

¾ PP q client 1 ³ ³³ ½ ³ ³ PP

³

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(’’); WriteLine(’’); WriteLine(’Jan’); WriteLine(’Piet’); WriteLine(’’);} file.close; %> Toepassing: 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¨erarchische wijze getoond. Daarom wordt voor de presentatie gebruik gemaakt van xslt 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 xslt 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- e°

±

°

¾ client ½

xml } xsl

De xslt-technieken zijn het meest »flexibel. Het stijldocument wordt gespecifieerd bovenaan het ¼xml-document zelf.

Toepassing: De maand- en semesterrapporten, loopbaan worden op deze manier gepresenteerd. Het betreft hier statische documenten met weinig gebruikersinteractie.

5

2.2.2

Xml en xslt in een html-pagina

²

¯

± ± ±

° ° - Webopbouw- e°

±

°

xml xsl

¾ } client html ½

Het stijldocument en xmldocument worden opgeroepen » vanuit het html-document. Dit laat toe om dezelfde gegevens op verschillende manieren te ¼ presenteren.

Voorbeeld: (namenXMLenXSL.html) <script> var Admin = new ActiveXObject("microsoft.XMLDOM"); var Stijl = new ActiveXObject("microsoft.XMLDOM"); function vulXMLAan() { Stijl.async = false; Stijl.load("namen.xsl") Gegevens.async=false; Gegevens.load("namen.xml"); tekst.innerHTML = Gegevens.transformNode (Stijl); } <span id="tekst"> Toepassing: 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- e- xml ? ° Javascript } & DOM

¾ client ½

De DOM-technieken worden via javascripts gebruikt op een html»pagina. Ze laten toe om het xmldocument interactief te manipu¼leren in de browser (zonder de server te belasten).

Voorbeeld: (namenXMLeiland.html) <script> var namen = new ActiveXObject("microsoft.XMLDOM"); function vulXMLAan() {namen.onreadystatechange = showTime; namen.load("namen.xml"); }

6

function showTime() {if(!((namen.readyState == ’complete’) || (namen.readyState == 4))){return}; var naam = namen.childNodes(2); tekst.innerHTML = ’’ + ’

’ + naam.childNodes(0).text + ’

’ + naam.childNodes(1).text + ’

’; } <span id="tekst"> Toepassing: 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 xslt. Bovendien zijn deze technologie¨en 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- e°

±

°

xml }xsl

asp

¾ client ½

Voorbeeld: (namenOpbouw.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’))) 7

Op de asp-pagina wordt het xml» document getransformeerd met behulp van het ¼ xsl-document.

{if(stijl.load(Server.MapPath(’namen.xsl’))) {Response.write(gegevens.transformNode(stijl))} else {Response.write(’

Fout1

’);} } else {Response.write(’

Fout2

’);} %> Toepassing: 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

²

¯

± ± ±

° ° °-

±

°

asp

¾ client ½

html

»

Als het resulterend htmldocument niet al te ingewikkeld ¼ is, valt de noodzaak voor een xml-tussenstap weg.

Voorbeeld:(namenDBankDirect.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) if (dataRec.EOF) {Response.write("

Er zijn geen namen.

")} else {Response.write(’’); while(!dataRec.EOF ) {var deNaam = Server.HTMLEncode(dataRec("naam")) Response.Write ("") dataRec.moveNext} Response.Write("

" + Server.HTMLEncode(dataRec("naam")) + "

") } %> Toepassing: 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 xslt 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 ² ¯ ± ± ±

° ° ° xml -

±

°

html

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 ja¼vascripts.

Voorbeeld: De HTML-pagina: (namenDBankXMLeiland.html) <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 = ’’ + ’

’ + naam.childNodes(0).text + ’

’ + naam.childNodes(1).text + ’

’; } <span id="tekst"> 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(’’); while(!dataRec.EOF ) {var deNaam = Server.HTMLEncode(dataRec("naam")) Response.Write ("" + Server.HTMLEncode(dataRec("naam")) + "") dataRec.moveNext}; 9

Response.Write(""); %> Toepassing: Deze techniek wordt gebruikt bij de afwezigen (leraars en leerlingen) en de openingsmarquee. 3.2.2

Xml-opbouw op de asp-pagina, xslt op de client

²

¯

± ± ±

° ° ° ruw -

±

asp

° xsl

@ xml¾ @ R @ client µ½ ¡ ¡ ¡

» ¼

Het gebruik van een apart xmlen xsl-document maakt het onderhoud van de toepassing zeer flexibel.

Voorbeeld: (namenDBankRuw.asp) <%@ <% var var var var

language= "JScript"%> dataCon = Server.CreateObject("ADODB.Connection"); dataRec = Server.CreateObject("ADODB.Recordset"); openStr = "driver={SQLserver};Data Source=diverse;uid=sa;pwd=;"; sqlStr = "SELECT * from namen";

dataCon.Open(openStr); dataRec.Open(sqlStr,dataCon); Response.write(’’); Response.write(’’); Response.write(’’); while(!dataRec.EOF ) {var deNaam = Server.HTMLEncode(dataRec("naam")) Response.Write ("" + Server.HTMLEncode(dataRec("naam")) + "") dataRec.moveNext}; Response.Write(""); %> Toepassing: De belangrijkste toepassing zijn de leerling- en refterpasjes.

10

3.2.3

Xml-opbouw in SQLserver, xslt op de client

²

¯

± ± ±

° ° ° xml -

±

°

asp

xsl

@ xml¾ @ R @ 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 = ’ + ’’ + ’’ updatetext #actieXML.XMLtekst @@ptrval null 0 @tekst open deCursor fetch next from deCursor into @naam while (@@fetch_status = 0) begin set @tekst = ’’ + @naam + ’’ updatetext #actieXML.XMLtekst @@ptrval null 0 @tekst fetch next from deCursor into @naam end set @tekst = ’’ 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

var openStr = "driver={SQLserver};Data Source=diverse;uid=sa;pwd=;"; dataCon.Open(openStr); var sqlStr = "EXECUTE maakNamenXML"; dataRec.Open(sqlStr,dataCon); Response.write(dataRec(’XMLTekst’)); %> Toepassing: De belangrijkste toepassing zijn de studiedossiers, afwezigen, wegOpHetNet. 3.2.4 Xml-opbouw en xslt op de asp-pagina ² ¯ ± ± ±

° ° °ruw

±

°

xsl

-

-

asp: ruw ↓ xml

¾ client ½

html

Voor minimale belasting van de client of bij query’s met veel ge» bruikersinteractie kan men het volledig proces gegevens → xml ¼ → html volledig in de asp-pagina laten gebeuren.

Voorbeeld: (namenDBankXML-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 = "SELECT * from namen"; var XMLTekst = ’’; dataCon.Open(openStr); dataRec.Open(sqlStr,dataCon); XMLTekst = ’’; XMLTekst = XMLTekst + ’’; while(!dataRec.EOF ) {var deNaam = Server.HTMLEncode(dataRec("naam")) XMLTekst = XMLTekst + "" + Server.HTMLEncode(dataRec("naam")) + "" dataRec.moveNext}; XMLTekst = XMLTekst + ""; dataRec.close var gegevens = Server.CreateObject("microsoft.XMLDOM"); var stijl = Server.CreateObject("microsoft.XMLDOM"); if(!gegevens.loadXML(XMLTekst)) {Response.write("

Fout 1

")} else {if (!stijl.load(Server.mapPath("namen.xsl"))) {Response.write("

Fout 2

")} else {Response.write(gegevens.transformNode(stijl))}}; %>

12

Toepassing: 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, xslt op de asp-pagina ² ¯ ± ± ±

°xml ° °

±

°

asp -

xsl

¾ html client ½

Bij ingewikkelde SQL-activiteit » en minimale belasting van de client kan men het proces gege- Voor¼ vens → xml → html verdelen tussen de asp-pagina en SQL-server.

beeld: (namenDBankXML-asp-XSL.asp) <%@ <% var var var var

language= "JScript"%> dataCon = Server.CreateObject("ADODB.Connection"); dataRec = Server.CreateObject("ADODB.Recordset"); openStr = "driver={SQLserver};Data Source=diverse;uid=sa;pwd=;"; 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("

Fout 1

")} else {if (!stijl.load(Server.mapPath("namen.xsl"))) {Response.write("

Fout 2

")} else {Response.write(gegevens.transformNode(stijl))} }; dataRec.close; dataCon.close; %> Toepassing:

De activiteitenkalender, IT-materiaal en vakrapportOverzicht zijn opgebouwd met dergelijke technieken.

13

3.3

Xml en xslt 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 xsl-document dan opgevraagd uit de databank. Het xml-document wordt omgezet naar de juiste html-versie en doorgestuurd naar de client. ²

¯

± ± ±

° ° ° -

± ²

° ¯

± ± ±

° ° °

±

°

xsl

}

-

asp

¾ client ½

html

xml

De gegevens voldoen niet meer aan het relationeel model en zijn dus moei» lijker aanspreekbaar in SQLserver. De complexi¼ teit 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("

Fout 1

"); var stijl = Server.CreateObject("microsoft.XMLDOM"); if (!stijl.loadXML(dataRec("xslTekst"))) {Response.write("

Fout 2

")} else {Response.write(gegevens.transformNode(stijl))}; dataRec.close; dataCon.close; %> Toepassing: Deze techniek wordt gebruikt bij de vakrapporten.

14