Druplot: interactief genereren van grafieken in Drupal

Transcriptie

1 Universiteit Gent Faculteit Ingenieurswetenschappen Vakgroep Elektronica en Informatiesystemen Voorzitter: prof. dr. ir. J. Van Campenhout Druplot: interactief genereren van grafieken in Drupal door Sylvie Detournay Promotor: prof. dr. ir. K. De Bosschere Begeleider: ir. Sean Rul Afstudeerwerk ingediend tot het behalen van de academische graad van Master in de toegepaste informatica Academiejaar

2 Dankwoord Vooreerst wil ik mijn promotor, Prof. dr. ir. Koen De Bosschere, bedanken voor de hulp die hij mij geboden heeft. Dankzij wie ik voortaan de opgedane kennis gedurende dit studiejaar concreet kan toepassen. Speciale dank aan mijn thesisbegeleider ir. Sean Rul voor de suggesties voor het realiseren van dit werk en ook voor het nalezen en verbetering van deze scriptie. Daarnaast wil ik ook nog alle mensen bedanken die mij rechtstreeks of onrechtstreeks geholpen hebben om deze scriptie te maken.

3 Toelating tot bruikleen De auteur geeft de toelating dit afstudeerwerk voor consultatie beschikbaar te stellen en delen van het afstudeerwerk te kopiëren voor persoonlijk gebruik. Elk ander gebruik valt onder de beperkingen van het auteursrecht, in het bijzonder met betrekking tot de verplichting de bron uitdrukkelijk te vermelden bij het aanhalen van de resultaten van dit afstudeerwerk. Sylvie Detournay, 6 september 2007

4 Druplot: interactief genereren van grafieken in Drupal door Sylvie Detournay Afstudeerwerk ingediend tot het behalen van de academische graad van Master in de toegepaste informatica Academiejaar Promotor: prof. dr. ir. K. De Bosschere Thesisbegeleider: ir. Sean Rul Faculteit Ingenieurswetenschappen Universiteit Gent Vakgroep: Elektronica en Informatiesystemen Voorzitter: prof. dr. ir. J. Van Campenhout Samenvatting Het doel van dit werk is een eenvoudige oplossing te brengen om grafieken vanuit databestanden te generen. Hiervoor werd een website met behulp van de drupal software gecreëerd. Aan de serverkant van deze website, wordt het programma gnuplot om grafieken te tekenen gebruikt. Deze website stelt twee methoden voor de aanmaak van grafieken voor: een geavanceerde methode voor de gebruikers die gnuplot kunnen gebruiken en een andere stap per stap methode die geen enkele voorkennis vereist. In de twee eerste hoofdstukken zullen het programma drupal en de gnuplot software uitgelegd worden. Vervolgens zullen de twee laatste hoofdstukken aan de bouw en het gebruik van de website besteed worden. Trefwoorden: drupal, gnuplot, php, mysql, CMS

5 Inhoudsopgave Inleiding 1 1 Drupal: een content management system Algemene werking van drupal Ontwikkelen met drupal Modules Nodes Gnuplot een programma om grafieken te generen Inleiding Voorbeeld Druplot module Inleiding Formulieren en modes Advanced mode Step by step mode Resultaat, wijzigingen en verwijderen Opslaan naar de databank Step by step mode De gnuplot functie Druplot node type Druplot node Conclusie 32 Bibliografie 33 i

6 Lijst van tabellen 3.1 Tabel Druplot Tabel druplotfiles Tabel druplotsbsproperties Tabel druplotstepbystep ii

7 Lijst van figuren 2.1 Voorbeeld van een grafiek die met gnuplot wordt gebouwd Voorbeeld van een grafiek die met gnuplot wordt gebouwd formulier voor advanced mode formulier van de step by step methode: stap formulier van de step by step methode: stap formulier van de step by step methode: stap formulier van de step by step: Step i (i > 2) formulier van de step by step: wijzig een stap result pagina druplot block Voorbeeld van een mogelijke toestand van de tabellen Formulier om een druplot node te maken View mode van een druplot node iii

8 Inleiding In de wetenschappelijke wereld, dienen wij vaak resultaten vanuit een data bestand af te beelden. Wij moeten dan programma s zoals gnuplot gebruiken die in een console mode worden gebruikt. Een goede kennis van die programma s is dan nuttig om mooie grafieken te kunnen bouwen. Dit werk heeft het doel de opbouw van grafieken vanaf data bestanden te vergemakkelijken via een grafische web interface. En om vervolgens die grafieken te kunnen gebruiken om artikelen op de website te kunnen opstellen. Wij zullen twee methoden voorstellen om grafieken te schetsen. Een eerste methode, Advanced mode genaamd, zal bestemd zijn voor de ervaren gebruikers die een goede kennis van gnuplot hebben en die de instructies voor gnuplot goed kennen. Met deze methode, zal de gebruiker zelf zijn gnuplot instructies moeten invoeren. De andere methode van bouw is de Step by Step methode, hierbij zal de gebruiker stap per stap in de bouw van zijn grafiek worden gevolgd met behulp van formulieren. Hij zal geen enkele kennis van het programma gnuplot nodig hebben. De website die voor deze scriptie wordt ontwikkeld wordt druplot genoemd en bevindt zich op het volgende adres: sdtourna. Deze het wordt met behulp van Content Management System drupal gebouwd dat in het eerste hoofdstuk van deze scriptie zal worden uitgelegd. Deze website gebruikt eveneens het programma gnuplot in de achtergrond voor de bouw van grafieken. Een korte beschrijving van dit programma zal in het tweede hoofdstuk gegeven worden. In het derde hoofdstuk, zullen wij de werking van de druplot website bestuderen en zullen het gebruik omstandig uitleggen. Ten slotte in het vierde en laatste hoofdstuk, zullen wij verklaren hoe een artikel met een druplot grafiek kan worden geschreven. Alle broncode die voor deze scriptie werd ontwikkeld is beschikbaar op het volgende 1

9 adres sdtourna/?q=broncode. 2

10 Hoofdstuk 1 Drupal: een content management system Een CMS, Content Management System, is een webgebaseerd softwarepakket [10] dat gebruikt wordt om een website te ontwikkelen en dynamisch te updaten. Het laat verschillende personen toe om op hetzelfde artikel, project of document te werken. Een CMS maakt het mogelijk om op een eenvoudige manier artikelen of documenten toe te voegen, te wijzigen of te verwijderen. Drupal [1] is een CMS dat een zeer groot aantal modules bezit om de publicaties, de organisatie en de toegangsrechten van een gemeenschap van gebruikers te beheren. De tekst en de andere soorten inhoud worden opgeslagen in een databank. Die informatie wordt dynamisch afgehaald, samengesteld, en voorgesteld aan een gebruiker via een Web-browser wanneer hij een pagina opvraagt. 1.1 Algemene werking van drupal De artikelen of documenten in Drupal worden in individuele nodes opgeslagen. Voor sommige types van nodes is het mogelijk om commentaren aan een node (de commentaren zelf worden niet beschouwd als knopen) toe te voegen. De standaard lay-out van Drupal, bestaat uit drie kolommen. De centrumkolom wordt bedoeld als Kolom van de inhoud. Het toont typisch samenvattingen van de onlangs geposte nodes. Als er op een samenvatting van een node wordt geklikt, wordt de volledige inhoud 3

11 van de node met eventueel de commentaren in de centrumkolom getoond. De linker en rechter kolommen bevatten typisch blokken met verwante informatie. De blokken bevatten vaak verbindingen voor het navigeren naar andere nodes. Voor nieuwe installaties worden het login blok en een navigatieblok dat een menu van beschikbare acties bevat eerst getoond. Verschillende menupunten kunnen in het navigatieblok worden getoond afhankelijk van de rechten van de gebruikers. De verschillende blokken kunnen al dan niet getoond worden afhankelijk van wat de gebruiker doet en welke rechten hij heeft. 1.2 Ontwikkelen met drupal Drupal werkt op een web server [14] die PHP scripts kan uitvoeren. Drupal gebruikt de webtaal php en een databankserver die php ondersteunt [13] voor het opslaan van de gegevens. De twee belangrijkste concepten van drupal zijn de modules en de nodes die in de volgende paragrafen worden verklaard Modules Drupal is een modulair systeem dat flexibiliteit, aanpassingsvermogen, en continuïteit verstrekt en die de ontwikkelaars toelaat hun eigen website aan te passen. Een module is een eenvoudig bestand dat een reeks routines bevat die in PHP worden geschreven. Wanneer gebruikt, wordt de modulecode volledig binnen de context van de website uitgevoerd. De module kan tot bijna alle functies en tot alle variabelen en structuren van het hoofdprogramma toegang hebben. Een module is niet echt verschillend van een klassiek PHP bestand: het is meer een begrip dat automatisch tot goede designprincipes en een goed ontwikkelingsmodel leidt. Het modulaire aspect sluit beter aan bij het open-source ontwikkelingsmodel, zodat verschillende mensen tegelijkertijd in parallel kunnen werken. In drupal kunnen nieuwe eigenschappen worden uitgevoerd als modules. Extra modules kunnen worden ontwikkeld en toegevoegd aan de website. De modules kunnen door de administrator worden geactiveerd en beheerd. Een module kan nieuwe node types creëren, nieuwe menupunten toevoegen in het navigatieblok, nieuwe blokken vormen, 4

12 nieuwe functionaliteiten toevoegen enz Nodes Het basis bouwblok van Drupal is een node. Het woord node betekent niet dat het een deel van één of ander netwerk is. Integendeel, een node moet als èèn stuk worden bekeken. Die node wordt door een lid of de administrator van de website toegevoegd. Een node kan deel van een forum, een blog, een boek, enz zijn. Er kunnen ook gemakkelijk nieuwe node types worden ontwikkeld. Elke node heeft een type, dat als Content Type wordt bedoeld. Het heeft een Node ID, een titel, een lichaam, een bouwdatum, ook een auteur en sommige andere eigenschappen. Het wordt samen met alle andere nodes in één grote tabel van de databank opgeslagen. De leden van de website hebben ook hun eigen tabel, en sommige van hen zijn auteurs van nodes. Zo hebben de nodes relaties met die tabel. Om die relaties te vinden, wordt de databank ondervraagd met behulp van SQL. Elke node kan ook een onbeperkt aantal commentaren hebben. worden opgeslagen in een afzonderlijke tabel. De commentaren Hoe de inhoud op het scherm daarna bekeken wordt, gebeurt door een Thema verwerker, die verwerker zal de gegevens vanuit de databank halen en op het scherm zetten. De Thema verwerker is niet hetzelfde als een Thema die de lay-out van de website specificeert. De Thema verwerker is een complexe reeks functies en scripts die code interpreteert, de databank ondervraagt en de stijl van de inhoud produceert. Die verwerker maakt van de dynamisch inhoud een output in HTML. De Thema verwerker maakt het gemakkelijk om modules te ontwikkelen. Bv, voor het schrijven van HTML formulieren moet de ontwikkelaar zich geen zorgen maken over de opmaak van de pagina van het formulier maar alleen over de functionaliteit. Drupal is een open source content management system en kan via de officiële website drupal.org [1] worden afgehaald. 5

13 Hoofdstuk 2 Gnuplot een programma om grafieken te generen 2.1 Inleiding Gnuplot [2] is een programma dat grafieken van numerieke functies in twee of drie dimensies kan produceren. Het programma werkt op veel computers en besturingssystemen. Daarnaast is het mogelijk om grafieken naar het scherm te verzenden of in bestanden weg te schrijven. Grafieken kunnen onder verschillende formaten (svg, eps, gif, png, tex, enz) gegenereerd worden zodat het mogelijk is om grafieken eenvoudig in uw documenten te integreren. De interface is eenvoudig, het is een console waarin men de instructies intikt ( plot sin (x) bijvoorbeeld). Gnuplot maakt het mogelijk om een groot aantal wiskundige functies te tekenen vanaf parametrische vergelijkingen in twee of drie dimensies. Het is eveneens mogelijk om functies te tekenen van een databestand, het is deze functionaliteit die ons in dit werk interesseert. Het is eveneens mogelijk om een massa eigenschappen voor de grafieken te in te stellen zoals de kleur van de functies, de labels van de assen, de titels, de legende, enz. Al deze opties zijn als commandolijnen in te voeren. Gnuplot maakt het ook mogelijk om een bestand met daarin een aantal commando s voor het tekenen van de functie uit te voeren. 6

14 2.2 Voorbeeld Wij gaan nu het gebruik van gnuplot verduidelijken met behulp van een voorbeeld [3]. Wij nemen als voorbeeld de bouw van een grafiek vanaf een databestand. Beschouw vogend data bestand test.dat: # X Y1 Y2 Y Merk op dat de kolommen van gegevens door witte ruimtes of door tabulaties worden gescheiden. De lijnen die met het karakter # beginnen worden als commentaarlijnen beschouwd en worden niet dus door gnuplot behandeld. Met het commando dat hieronder volgt, zullen we een grafiek vanaf de gegevens van het data bestand, test.dat, plotten. gnuplot> plot "test.dat" using 1:2 with lines,\ "test.dat" using 1:3 with lines,\ "test.dat" using 1:4 with lines 7

15 Met dit commando, hebben we drie functies opgebouwd. De drie functies hebben dezelfde X-waarde die gerepresenteerd wordt in de eerste kolom, kolom X, van het data bestand test.dat. De Y-waarden voor de drie functies zijn de drie laatste kolommen van het bestand, respectievelijk Y1 Y2 en Y3. Om een functie te plotten, wordt het sleutelwoord plot met de naam van het bestand tussen haakjes gebruikt en om de kolom van de gegevens te specifiëren, wordt het sleutelwoord using gebruikt. Het resultaat van dit voorbeeld wordt in Figuur 2.1 voorgesteld. Figuur 2.1: Voorbeeld van een grafiek die met gnuplot wordt gebouwd. Het is mogelijk de grafiek (Figuur 2.1) met het commando replot in drie commando s te bouwen. Verder, is het ook mogelijk om opties voor de titels, labels, legend, enz toe te voegen. We zullen dezelfde figuur tekenen als in Figuur 2.1 maar dit maal met meer versiering. Het stukje code volgt hieronder: gnuplot> plot "test.dat" using 1:2 title "1" with lines; replot "test.dat" using 1:4 title "2" with fsteps lc rgb "magenta"; replot "test.dat" using 1:3 title "3" with boxes lc rgb "dark-blue"; set title "test"; set xlabel "xlab"; set ylabel "ylab"; 8

16 set key inside; set key width 1; set key b l box; In de drie eerste rijen, wordt het sleutelwoord title gebruikt om de titel van de functie te bepalen, with om de stijl van de tekening te specifiëren en lc rgb om de kleur te kiezen. De vierde rij bevat de instructies om de titel van de grafiek en de labels van de assen te bepalen. In de laatste rij, worden de eigenschappen van de legende gespecifieerd. Het resultaat van die commando s wordt in Figuur 2.2 voorgesteld. Figuur 2.2: Voorbeeld van een grafiek die met gnuplot wordt gebouwd. Gnuplot heeft nog veel andere mogelijkheden maar in dit werk zullen we enkel de werking met een data bestand bestuderen. Gnuplot is copyrighted maar vrij beschikbaar, voor meer informatie zie 9

17 Hoofdstuk 3 Druplot module Druplot is een drupal-website die grafieken genereert op basis van een databestand door de gebruiker gespecifieerd. Die website maakt gebruik van drupal, een content management system (CM S). Om de gewenste functionaliteit te realiseren, werd een drupal-module (druplot01 genoemd) geschreven die gnuplot als backend gebruikt. Daarvoor moet gnuplot op de server geïnstalleerd zijn. De druplot-module heeft als bedoeling grafieken te construeren en die beelden op de server op te slaan. Met deze module kunnen de gebruikers ook de verschillende grafieken bekijken, verwijderen of wijzigen op een eenvoudige manier. Dan wordt een tweede module geschreven, de druplot node-type-module, die het toelaat artikelen met de gegenereerde grafieken op de website te posten. In dit hoofdstuk, zullen we de verwerking van de eerste module uitleggen en in het volgende hoofdstuk, zullen we uitleggen hoe de node-type-module de druplot-module gebruikt en hoe deze kan gebruikt worden voor het schrijven van artikelen met een grafiek. We beginnen nu met de algemene werking van de druplotmodule te verklaren. Daarna zullen we de verschillende delen van deze module uitvoerig beschrijven. 3.1 Inleiding Met de druplot-module, druplot01, wordt de gebruiker eerst verzocht verschillende formulieren in te vullen om een grafiek te genereren. Deze gegevens worden door de module naar de database geschreven en dan worden ze in een volledig gnuplot commando vertaald. Dit gnuplot commando wordt dan aan gnuplot door een pijp (via het php-commando popen ) doorgegeven en een svg-bestand van de figuur wordt door 10

18 het grafische programma gegenereerd. Het svg-bestand is op de server opgeslagen en wordt daarna in een webpagina getoond. Vanaf deze stap, kan de gebruiker zijn grafiek wijzigen of verwijderen met behulp van formulieren. De module werkt in vier algemene fasen: verzamelen van de inputs die door de gebruiker worden verstrekt via de verschillende formulieren, opslaan van die gegevens op een aangepaste wijze in de database, opbouw van een volledig gnuplot commando op basis van deze gegevens en verwerking van dit commando door het gnuplot programma, opslaan van het svg-bestand op de server en afbeelden van die grafiek. In de volgende sectie, zullen we de eerste van de vier stappen uitleggen. De andere fasen zullen verder worden besproken. 3.2 Formulieren en modes Er bestaan twee verschillende manieren om een grafiek met druplot te genereren: een voor een geavanceerde gebruiker en een andere iterative methode die op een eenvoudige manier de gebruiker helpt om zijn grafiek te plotten. De eerste is advanced genoemd en de tweede is de Step by Step methode die de nodige informatie stap per stap verzamelt met behulp van formulieren Advanced mode De Advanced mode is, zoals zijn naam het aangeeft, bestemt voor geavanceerde gebruikers. In deze mode, bestaat er maar één formulier om een grafiek te genereren. Dit formulier bevat vier velden : een upload bestand veld, een tekstveld voor de titel van de grafiek, een tekstveld om het plot commando in te tikken, 11

19 Figuur 3.1: formulier voor advanced mode en een tekstveld om andere commando s in te voeren. Er zijn twee velden die door de gebruiker verplicht moeten ingevuld worden, namelijk het veld voor het databestand en dat voor het plotcommando. In het eerste veld, moet de gebruiker bladeren om zijn bestand te uploaden. In het derde veld, moet de gebruiker een correct gnuplot commando intikken. Dit commando moet beginnen met een plot en moet ook de naam van het upload bestand bevatten. De syntax van dit commando wordt niet door de module gecontroleerd omdat we veronderstellen dat de gebruiker een geavanceerde gebruiker is en dus weet wat hij doet. In het laaste veld, kan de gebruiker extra commando s uitvoeren, bijvoorbeeld, set commando s : set grid, enz. Die commando s worden ook niet nagekeken voor dezelfde reden als bij het vorige veld. Door de vele mogelijkheden van gnuplot was het niet mogelijk die instructies te controleren. Na de uitvoering van die velden, zal de gebruiker een grafiek verkrijgen. Het formulier is voorgesteld in Figuur 3.1 en het resultaat in de volgende sectie op Figuur 3.7 op pagina 19. We gaan nu, in de volgende sectie, de formulieren van de tweede methode bestuderen. 12

20 3.2.2 Step by step mode De gebruiker heeft geen voorkenis van gnuplot nodig om met deze methode een grafiek te genereren. De gnuplot instructies zijn helemaal door de module aangemaakt met behulp van specifieke gegevens die aan de gebruiker met de formulieren worden gevraagd. Met zo een methode is de kans op fouten minder groot. De step by step mode werkt in verschillende fasen die elk hun eigen formulier hebben. De gebruiker moet eerst drie formulieren invullen om een eerste representatie van zijn grafiek of een deel ervan te verkrijgen. Daarna kan hij doorgaan met zijn werk, ofwel zijn grafiek verder uitbreiden (dat wil zeggen een functie toevoegen), ofwel de grafiek wijzigen. Nu zullen we die stappen verklaren. Step 0: Specify the data file for your graph In het eerste formulier moet de gebruiker gewoon zijn data bestand uploaden met behulp van een browser. Deze stap is te vergelijken met het eerste veld van de advanced mode. De Figuur 3.2 toont die stap 0. Figuur 3.2: formulier van de step by step methode: stap 0 Stap 1: stel de algemene eigenschappen van de grafiek in Deze stap is niet verplicht, de gebruiker mag gewoon doorgaan zonder dit formulier in te vullen. Dan zullen de standaardeigenschappen van gnuplot worden gebruikt. Dit formulier, zoals gerepresenteerd in Figuur 3.3, bevat drie delen: Title, labels, tics,... 13

21 Figuur 3.3: formulier van de step by step methode: stap 1 14

22 In het eerste veld, kan de gebruiker de titel van de grafiek specifieren. De volgende velden zijn beschikbaar voor de eigenschappen van de assen (labels, tics, logscale) te bepalen. De tics zijn de markeringen die op de assen worden aangeduid, de gebruiker kan ervan het begin en het einde specifieren en ook het increment (de spatie tussen twee marks). Tenslotte, kan de gebruiker ook een grid laten plotten dat is getekend in overeenstemming met de eigenschappen van de tics. Legend properties : Er zijn vier mogelijkheden voor de legende: on om die laten plotten, off om die te verwijderen, de default mode om met de standaardeigenschappen te plotten en de custom mode om met zijn eigen speficaties te plotten. Als de gebruiker de custom mode kiest, wordt hij verwacht de volgende velden in te vullen: eerst moet hij kiezen voor een inside legende, binnen de grafiek of een outside legende die zal naast de grafiek geplot worden. Naast deze keuze, kan hij specifïeren waar de legende precies moet zitten. Er zijn verschillende mogelijkheden om die legende te plaatsen, voor de inside mode bestaan volgende opties : top/left top/center top/right center/left center center/right bottom/left bottom/center bottom/right en voor de outside mode : top/left center/left bottom/left left/top center/top right/top left/bottom center/bottom right/bottom top/right center/right bottom/right De gebruiker kan ook een kader rond de legende laten tekenen. More : in dit laaste veld, kan de gebruiker andere opties specifieren, die instructies worden niet door de module gecontroleerd voor dezelfde reden die in de vorige sectie ( advanced mode ) werd gegeven. 15

23 Step 2: plot a first function Dit is een van de belangrijkste stappen. In deze stap zal de gebruiker de eerste functie die hij wil plotten specifieren aan de hand van het data bestand. De representatie van die stap is voorgesteld in Figuur 3.4. In het eerste veld, title, kan de gebruiker de naam van zijn eerste functie specifieren, de default waarde is 1. Figuur 3.4: formulier van de step by step methode: stap 2 De tweede lijn van velden wordt gebruikt om de functie te bepalen. Eerst moet de gebruiker een kolom voor de x-waarden uit het data bestand kiezen via het select veld, of kan hij ook een functie van deze kolom gebruiken. Om dit te realiseren moet hij het tekstveld dat naast het kolomveld staat gebruiken, in dit veld is de kolom gesymboliseerd door een C. De twee volgende velden hebben dezelfde betekenis maar zijn bestemd voor de y-waarden. De default waarden voor die velden zijn de twee eerste kolommen van het databestand, de eerste voor de x-waarden en de tweede voor de y-waarden. De laatste drie select-velden zijn beschikbaar om de grafische stijl van de functie te specifieren: de stijl van het teken, de kleur van de lijn en de stijl van de punten als men een stippellijn kiest. 16

24 Step i: add a function (i > 2) Na het successvol doorlopen van de eerste drie stappen, krijgt de gebruiker een eerste preview van zijn grafiek waarin de eerste functie (specifieerd in stap 2) geplot is. Onder dit beeld, zijn er drie formulieren, gerepresenteerd op Figuur 3.6. Met het eerste formulier, Step i: add a function, kan de gebruiker verder werken met zijn data bestand en meerdere functies bouwen. Dit formulier is identiek met dat van Stap 2. Het tweede formulier, Modify: the general propreties of the graph, is hetzelfde formulier als dat van Stap 1. De gebruiker kan met dit formulier de eigenschapen van de grafiek aanpassen. Figuur 3.5: formulier van de step by step: Step i (i > 2) Het laaste formulier heeft als bedoeling de al geplotte functies te wijzigen of te verwijderen. Met dit formulier, kan de gebruiker een van de al geplote functies selecteren met het select veld, dan moet hij bevestigen of hij die functie wil wijzigen of verwijderen. Als hij voor het wijzigen van een functie heeft gekozen, krijgt hij een nieuw formulier analoog aan dat van Stap 2, getoond in Figuur

25 Figuur 3.6: formulier van de step by step: wijzig een stap 3.3 Resultaat, wijzigingen en verwijderen Voor de advanced mode, na het invullen van het formulier (beshreven in de vorige sectie) krijgt de gebruiker het resultaat van zijn opdracht in een webpagina, de result pagina, zoals voorgesteld op Figuur 3.7. Deze pagina bevat twee tabs : update en delete. De delete -tab is om de grafiek te verwijderen, na de druk op die knop, moet de gebruiker nogmaals deze bewerking bevestigen. De update -tab brengt de gebruiker naar een pagina die een tekst veld bevat waarin het volledige gnuplot commando geschreven staat, de gebruiker kan dit commando verbeteren of wijzigen. Met de step by step mode krijgt de gebruiker al een resultaat pagina vanaf stap 3 zelfs als de grafiek nog niet helemaal volledig is geplot. Die pagina lijkt op die van Figuur 3.7 maar onder de grafiek staan de drie formulieren van Figuur 3.5 en bevat twee andere tabs: New om een nieuwe grafiek aan te maken en een Delete tab om de grafiek te verwijderen. Vanaf het moment dat de gebruiker zijn result pagina krijgt wordt hiervan een link gemaakt in een druplot blok. Het druplot-blok is een blok dat verwijzigen bevat naar een result pagina van alle grafieken van de gebruiker. Deze result pagina is hetzelfde als die van de advanced mode op Figuur 3.7 behalve dat, in het geval van een grafiek die met de step by step mode wordt gebouwd, de update tab verwijst naar de pagina beschreven in de vorige paragraaf (dus van stap i 3.5). Dit blok is voorgesteld in Figuur 3.8. Met dit blok kan de gebruiker gemakkelijk al zijn grafieken beheren. 18

26 Figuur 3.7: result pagina 19

27 Figuur 3.8: druplot block In de volgende sectie, zullen we zien hoe de gegevens die door de gebruiker aan de druplot-module aangegeven werden in databank zijn opgeslagen. 3.4 Opslaan naar de databank Om de grafieken later te kunnen beheren en gebruiken, bv in een artikel (zie het volgende hoofdstuk), slaat de druplot-module een aantal gegevens over die beelden op in de databank. De druplot-module bevat verschillende tabellen die automatisch worden opgebouwd tijdens de installatie van de module. Ze zijn opgeslagen in de databank van drupal zelf. De druplot-module is gebaseerd op twee algemene tabellen druplot01 en druplotfiles die onafhankelijk van de constructiemode zijn. Die twee tabellen worden in de volgende paragrafen uitgelegd. druplot01 Druplot01 is de hoofdtabel van de druplot-module, voor elke grafiek correspondeert een unieke record (of rij) van deze tabel. Een schema is ervan voorgesteld in de Tabel 3.1. De attributen worden als volgt vastgesteld: id_order is de primaire sleutel [11] en dus de unieke referentie naar een bepaald record en de corresponderende grafiek. Dit attribuut wordt in het hele programma door de druplot-module als hoofdreferentie voor de grafieken gebruikt. title is ook een referentie om een grafiek te herkennen maar dit keer voor de gebruiker. Ze wordt bv gebruikt in het druplot blok om naar de grafiek te verwijzen. 20

28 Field id_order title dru_mode commandostr fres id_user_com Type int(10) varchar(32) varchar(32) text varchar(128) int(10) Tabel 3.1: Tabel Druplot01 dru_mode is de mode, ofwel advanced ofwel step by step, waarmee de grafiek wordt opgebouwd (zie sectie 3.2 in verband met de formulieren). commandostr bevat ofwel, voor de advanced mode, het volledige gnuplot commando ofwel, voor de step by step mode, de extra set commando s (zie more text veld in de formulier op Figuur 3.3). fres is de naam van het svg bestand van de grafiek. Deze naam is uniek en om cacheproblemen te vermijden wordt de bestandsnaam bij iedere wijziging van de grafiek veranderd. Die naam wordt op de volgende manier gevormd: willekeurignummer _result.svg. Dit bestand is in de files map van drupal opgeslagen. id_user_com is een vreemde sleutel [11] die verwijst naar de user tabel van drupal. Deze tabel wordt aan elke nieuw instelling van een grafiek aangevuld. Dit wil zeggen telkens als de gebruiker ofwel het advanced mode formulier heeft ingevuld en doorgestuurd ofwel voor de tweede stap in de step by step mode. Telkens als de grafiek wordt aangepast wordt het tegelijkertijd de correspondeerde record aangepast. druplotfiles De volgende tabel is de druplotfiles die informatie bevat over de databestanden. Voor elke grafiek correspondeert een databestand en dus een rij van deze tabel. Het schema van deze tabel wordt hieronder (Tabel 3.2) beschreven: 21