Dashboardin toteuttaminen Moodle-lisäosaan hyödyntäen Gridstack.js-kirjastoa

(1)

d

Rosa Siuruainen

DASHBOARDIN TOTEUTTAMINEN MOODLE-LISÄOSAAN HYÖDYNTÄEN

GRIDSTACK.JS-KIRJASTOA

Opinnäytetyö

Liiketalouden ammattikorkeakoulututkinto Tietojenkäsittelyn koulutus

2022

(2)

Tutkintonimike Tradenomi (AMK)

Tekijä Rosa Siuruainen

Työn nimi Dashboardin toteuttaminen Moodle-lisäosaan hyödyntäen Grid- stack.js-kirjastoa

Toimeksiantaja Mediamaisteri Oy

Vuosi 2022

Sivut 43 sivua

Työn ohjaaja Janne Turunen

TIIVISTELMÄ

Tämän opinnäytetyön tarkoituksena on luoda modulaarinen ja dynaamisesti muokattava dashboard-näkymä Moodlen lisäosaan hyödyntäen kolmannen osapuolen Javascript-kirjastoa. Opinnäytetyössä esitellään Moodle ohjelmoin- titeknisestä näkökulmasta sekä kehitystyössä käytetyt tekniikat.

Moodle on avoimen lähdekoodin ohjelmisto, jolla voidaan luoda digitaalisia op- pimisympäristöjä. Moodlen toimintoja voidaan laajentaa lisäosien avulla.

Dashboard-näkymän kehittämiseen käytettiin PHP- ja Javascript-ohjelmointi- kieliä. Näistä esitellään erityisesti Moodle-ohjelmointiin liittyviä erityispiirteitä.

Käytettäväksi kirjastoksi valikoitui Gridstack.js, joka on luotu helpottamaan dy- naamisten drag and drop -tyyppisten näkymien luomista. Näkymän toteuttami- sessa hyödynnettiin Mustache-templatea, jonka avulla voidaan renderöidä dataa HTML-muotoon.

Dashboard-näkymä kehitettiin olemassa olevaan Moodlen lisäosaan.

Dashboardin muokkaamiseen luotiin erillinen näkymä, jossa käyttäjä voi muokata näkymää poistamalla tai lisäämällä elementtejä sekä muuttamalla niiden kokoa. Kaikki nämä toiminnot tapahtuvat drag and drop -periaatteella, eli raahaamalla. Käyttäjän luoma dashboardin asettelu tallennetaan tietokantaan, jotta käyttäjän ei tarvitse jatkuvasti luoda samaa näkymää uudelleen. Toimek- siantaja haluaa esittää dashboardilla dataa visuaalisessa muodossa hyödyn- täen Moodlen Charts API:a. Tämän toiminta dashboardilla testattiin luomalla muutamia testielementtejä.

Opinnäytetyön lopputuloksena syntyi toimeksiantajan toiveiden mukainen, dynaamisesti muokattava dashboard-näkymä. Näkymän kehittämistä jatketaan tämän opinnäytetyön ulkopuolella ja lopulta se on tarkoitus liittää mukaan kaupalliseen tuotteeseen.

Asiasanat: Moodle, ohjelmistokehitys, verkko-ohjelmointi, PHP, JavaScript, Gridstack.js

(3)

Degree Bachelor of Business Administration

Author Rosa Siuruainen

Thesis title Creating a dashboard for a Moodle plugin using the Gridstack.js library

Commissioned by Mediamaisteri Oy

Time 2022

Pages 43 pages

Supervisor Janne Turunen

ABSTRACT

The objective of this thesis was to create a modular and dynamic dashboard view for a Moodle plugin using a third-party Javascript library. This thesis in- troduced Moodle from a programming technical aspect as well as technolo- gies used in the development process.

Moodle is an open source software that can be used to create digital learning platforms. Plugins can be used to add additional features to Moodle. PHP and Javascript programming languages were used to develop the dashboard view.

Gridstack.js, which was designed to make creating dynamic drag-and-drop dashboards easier, was chosen as the library to be used in the development.

Mustache template, which can be used to render data as HTML, was utilized in creating the dashboard view.

The dashboard view was developed for an existing plugin. A separate view was created for editing the dashboard. In the editing view the user can edit the dashboard by deleting or adding elements or resizing them. All these functions are executed by dragging and dropping. The layout of the user’s dashboard is saved to a database so that the user doesn’t have to re-create the same view each time. The thesis commissioner wished to display data on the dashboard in a visual way using the Moodle Charts API. Its functionality on the dashboard was tested by creating a few test elements.

The result of this thesis was a dynamic dashboard view that was in accord- ance with the wishes of the commissioner. The dashboard view will be developed further after this thesis and the goal is to include it in a commercial prod- uct in the future.

Keywords: Moodle, software development, web development, PHP, JavaS- cript, Gridstack.js

(4)

1 JOHDANTO ... 5

2 MOODLE OHJELMOINTITEKNISESTI ... 6

2.1 Moodle ... 6

2.2 PHP ... 9

2.3 Javascript ... 12

2.4 Mustache ... 15

3 GRIDSTACK.JS... 17

4 DASHBOARD-NÄKYMÄN TOTEUTUS ... 20

4.1 Kehitystyön lähtökohdat ... 21

4.2 Kehitysympäristö ... 22

4.3 Gridstack.js:n käyttöönotto ... 23

4.4 Gridien ja elementtien luominen ... 26

4.5 Saatavilla olevien elementtien hakeminen ... 31

4.6 Tietojen tallennus tietokantaan ... 33

4.7 Käyttöliittymä ... 34

4.8 Lopputulokset ... 37

5 PÄÄTÄNTÖ ... 39

LÄHTEET ... 41

(5)

1 JOHDANTO

Opinnäytetyön tavoitteena on luoda dynaamisesti muokattava dashboard-nä- kymä Moodlen lisäosaan. Dashboard-näkymä rakentuu erilaisista moduuleista, joita käyttäjä voi joustavasti valita käyttöön tai pois. Tämän opinnäyte- työn tarkoituksena onkin tutkia, miten luodaan modulaarinen ja dynaamisesti muokattava dashboard-näkymä olemassa olevaan Moodlen lisäosaan hyö- dyntäen kolmannen osapuolen Javascript-kirjastoa.

Toimeksiantajana tälle opinnäytetyölle on Mediamaisteri Oy. Mediamaisterin päätuotteena on Moodleen pohjautuva digitaalinen oppimisalusta, jota laajen- tavat erilaiset siihen luodut lisäosat. Mediamaisterin toiveena on saada toimiva pohja dashboard-näkymälle, johon voidaan ryhtyä kehittämään erilaisia asia- kastarpeisiin vastaavia elementtejä. Elementtien luomisen jälkeen näkymä olisi tarkoitus sisällyttää asiakkaille asennettavaan tuotteeseen.

Raportin aluksi tarkastellaan Moodlea ohjelmointiteknisestä näkökulmasta.

Ensin esitellään Moodlea yleisemmällä tasolla. Tämän jälkeen käsitellään tarkemmin keskeisiä Moodle-ohjelmoinnin tekniikoita. Tekniikat esitellään ylei- sellä tasolla vain lyhyesti olettaen lukijalla olevan perustietämys ohjelmoinnista. Perusteiden sijaan tekniikoista esitellään Moodle-ohjelmoinnille erityisiä piirteitä.

Kolmannessa luvussa esitellään kehitystyössä käytettävä Gridstack.js-kirjasto.

Gridstack.js on Typescript-kirjasto, joka on suunniteltu helpottamaan dynaa- misten dashboardien luomista. Luvussa esitellään myös Typescript lyhyesti.

Luvussa käsitellään kirjaston käyttöönottoa sekä sen tärkeimpiä ominaisuuksia.

Raportin lopuksi esitellään dashboard-näkymän kehitysprosessi vaiheittain.

Aluksi käydään läpi kehitystyön lähtökohdat sisältäen toimeksiantajan ja kehi- tyksen kohteena olevan lisäosan esittelyn. Tämän jälkeen esitellään lyhyesti kehitysympäristö. Itse kehitystyön esittely alkaa kirjaston käyttöönotolla ja ete- nee vaiheittain huipentuen lopputulosten esittelyyn.

(6)

2 MOODLE OHJELMOINTITEKNISESTI

Tässä luvussa käsitellään Moodlea ohjelmointiteknisestä näkökulmasta. Ensin tutustutaan Moodleen yleisemmällä tasolla. Tämän jälkeen käydään läpi Moodle-ohjelmoinnin keskeisiä tekniikoita erityispiirteineen.

2.1 Moodle

Moodle on ohjelmisto, jolla voidaan toteuttaa digitaalisia oppimisalustoja. Se on suunniteltu tarjoamaan tehokkaita työkaluja niin opiskelemiseen kuin opet- tamiseenkin. Moodlella oli vuonna 2020 yli 213 miljoonaa käyttäjää ja se onkin maailmalla laajimmin käytössä oleva oppimisalusta. Moodlen käyttäminen on ilmaista, joskin kuluja syntyy tavanomaisista verkkopalvelun vaatimuksista kuten esimerkiksi palvelintilasta ja domainista. (Moodle 2020a; Wild 2017.)

Moodlen avulla toteutettu oppimisympäristö koostuu kursseista, jotka pitävät sisällään opettajien opiskelijoille luomaa sisältöä. Kurssi koostuu erilaisista ak- tiviteeteista, joita Moodlen perusasennuksesta löytyy 15 erilaista. Lisää erilaisia aktiviteetteja on mahdollista asentaa Moodlen lisäosakirjastosta tai kehit- tää niitä itse. Kurssisivun lisäksi Moodlessa on etusivu, jonka sisällön pääkäyt- täjä voi määritellä. Tällä sivulla voidaan esitellä esimerkiksi yleisesti kurssitar- jontaa tai vaikkapa näyttää käyttäjän omat kurssit. Etusivun lisäksi jokaisella käyttäjällä on oma työpöytä, jolla näytetään esimerkiksi kursseja, joilla käyttäjä on. Kuvassa 1 on esimerkki opiskelijan työpöydästä. Käyttäjä voi itse muokata omaa työpöytäänsä haluamansa kaltaiseksi. Etusivulle ja työpöydälle on mahdollista lisätä lohkoja, joita voidaan verrata esimerkiksi mobiililaitteista tuttuihin

”widgetteihin”. Lohkoja voidaan sijoittaa sivun oikeaan tai vasempaan reunaan, ja ne voivat pitää sisällään laajasti erilaisia sisältöjä, esimerkiksi kalenterin tai RSS-syötteen. (Moodle 2019; Moodle 2020b.)

(7)

Kuva 1. Opiskelijan työpöytä

Moodle on saanut nimensä toimintansa mukaan. Moodle on akronyymi eng- lanninkielisistä sanoista modular object-oriented dynamic learning enviroment eli vapaasti suomennettuna modulaarinen objekteihin perustuva dynaaminen oppimisympäristö. Moodlen yksi pääpiirteistä on modulaarisuus. Se koostuu isommasta ohjelmiston ytimestä (core) ja sen ympärille rakennetuista pienem- mistä itsenäisistä moduuleista eli lisäosista. Tämä yksinkertaistaa ylläpitoa, sillä ominaisuuksia voidaan lisätä käymättä koko koodikokonaisuutta läpi.

Moodle perustuu avoimeen lähdekoodiin, eli sen lähdekoodi on kaikkien näh- tävillä ja sen kehitykseen voi osallistua periaatteessa kuka tahansa. Moodlen olemassa olevia toimintoja voidaan laajentaa helpoiten erilaisten lisäosien avulla. Moodlessa on lähes 60 erilaista lisäosan tyyppiä, joihin lisäosat lajitel- laan toimintojensa perusteella. Lisäosan vaatima koodirakenne riippuu sen tyypistä. Yleisimpiä lisäosatyyppejä ovat aktiviteetit ja aineistot, lohkot, teemat, kurssiformaatit, käyttäjäntunnistukset, kirjautumistavat ja local-lisäosat.

(Moodle 2018b; Moodle 2020a; Moodle 2021i; Wild 2017.)

Aktiviteetit ja aineistot ovat komponentteja, joista kurssi koostuu. Aineistoja ovat esimerkiksi erilaiset linkit ja sivut. Aktiviteetteja ovat esimerkiksi foorumit ja palautettavat tehtävät. Aktiviteetti-lisäosat ovat suurimpia lisäosia koodin määrässä mitattuna. Lohkot ovat elementtejä, joita voidaan sijoittaa pääasi- assa sivujen oikeaan tai vasempaan reunaan. Ne voivat sisältää millaista dataa tahansa, esimerkiksi tilastoja tai vaikkapa kalenterin. Teemoilla luodaan

(8)

Moodle-sivuston visuaalinen ilme. Teemoilla voidaan asettaa esimerkiksi vä- rejä, fontteja ja erilaisia bannereita. Kurssiformaatit määrittelevät kurssin ra- kenteen. Käyttäjäntunnistus-lisäosien avulla voidaan hallita sitä, miten käyttäjä kirjautuu sisään. Kirjautumistapa-lisäosat puolestaan hallitsevat sitä, miten käyttäjät kirjautuvat kursseille. Local-lisäosan avulla voidaan laajentaa Moodlea järjestelmätasolla sekä luoda yleisiä lisäosia, jotka eivät sovi mihin- kään muuhun lisäosakategoriaan. (Moodle 2018a; Moodle 2018b; Moodle 2021i.)

Jotta Moodle osaa asentaa lisäosan oikein, on jokaiselle lisäosatyypille määri- telty sijainti Moodlen juurihakemistossa, johon lisäosan hakemisto täytyy sijoittaa. Lisäosa tulee myös nimetä tietyllä tavalla. Lisäosan nimi koostuu etuliit- teestä, joka määräytyy lisäosan tyypin mukaan sekä varsinaisesta lisäosan ni- mestä. Nämä erotellaan toisistaan alaviivalla. Esimerkiksi local-tyyppinen lisä- osa tulee asentaa local-hakemistoon ja lisäosan nimen tulee olla local_lisä- osannimi. (Moodle 2018a; Moodle 2021d.)

Lisäosissa esiintyy useita tiedostoja, jotka toimivat jokaisessa lisäosassa samalla tavalla. Seuraavaksi esitellään muutamia niistä yleisimpiä. Version.php on pakollinen tiedosto, ja sen tulee sijaita lisäosan juurihakemistossa. Esi- merkki kyseisestä tiedostosta on kuvassa 2. Se sisältää ominaisuuksia, joita tarvitaan lisäosan asentamisen ja päivittämisen yhteydessä, kuten esimerkiksi lisäosan nimen, tyypin sekä versionumeron. (Moodle 2021i; Moodle 2021l.)

Kuva 2. Version.php-tiedosto, jossa on määritelty kaikki pakolliset tiedot

Kielitiedostot sijaitsevat lisäosan lang-hakemistossa kielen mukaan nimetyissä alihakemistoissa. Esimerkiksi suomenkieliset käännökset eli langstringit

(9)

sijoitetaan alihakemistoon fi. Kunkin kielen kielitiedosto nimetään samalla tavalla. Tiedoston nimeksi tulee antaa lisäosantyyppi_lisäosannimi.php. Englanti on Moodlen oletuskieli, joten englanninkielisten langstringien oletetaan löyty- vän lang-hakemistosta. Mikäli englanninkielinen langstring puuttuu, ei myös- kään haeta muun kielisiä versioita. Tämän johdosta ei ole esimerkiksi mahdollista lisätä ainoastaan suomenkielisiä langstringejä. (Moodle 2021i; Moodle 2021j.)

Tietokantarakenteita muokkaavat tiedostot sijoitetaan db-hakemistoon. Hyvä esimerkki tällaisesta tiedostosta on install.xml. Siinä määritellään lisäosan tie- tokannat, jotka luodaan lisäosan asennuksen yhteydessä. Tiedoston luomiseen tulee käyttää Moodlen käyttöliittymästä löytyvää XMLDB-editoria. In- stall.php on tiedosto, jonka sisältö suoritetaan lisäosan asennuksen yhtey- dessä heti tietokantojen luomisen jälkeen. Siinä voidaan esimerkiksi muuttaa eri asetusten arvoja tai suorittaa muita automaattisia toimintoja, joiden halutaan tapahtuvan lisäosan asennuksen yhteydessä. Upgrade.php puolestaan suoritetaan lisäosan päivityksen yhteydessä. Mikäli päivityksen yhteydessä halutaan tehdä muutoksia lisäosan tietokantoihin, voidaan koodin luomiseen käyttää XMLDB-editoria. (Moodle 2021h.)

2.2 PHP

Moodle on ohjelmoitu pääasiassa PHP:llä (lyhenne sanoista PHP: Hypertext Preprocessor), joka on avoimeen lähdekoodiin perustuva palvelinpohjainen ohjelmointikieli. PHP:n pääkäyttökohde on palvelinpään ohjelmointi, mutta sitä voidaan käyttää myös muihin tarkoituksiin kuten komentorivin skriptaukseen.

PHP:tä voi käyttää kaikilla yleisimmillä käyttöjärjestelmillä, esimerkiksi Li- nuxilla, Microsoft Windowsilla ja macOS:llä Ensimmäinen PHP:n versio PHP/FI julkaistiin vuonna 1995. Uusin käytössä oleva versio on tämän työn kirjoitushetkellä PHP 8.0. Moodle-ohjelmoinnissa on huomioitava kuitenkin se, että kaikki Moodlen versiot eivät tue kaikkia PHP-versioita. Esimerkiksi käy- tännön toteutuksessa asennettuna oleva Moodlen versio on 3.9, jossa PHP:n version tulee olla vähintään 7.2 ja enintään 7.4. (Mansikka 2018, 9; Moodle 2021g; What can PHP do? s.a.; What is PHP? s.a.)

(10)

PHP-ohjelmointikieltä sisältävä osa koodista aloitetaan aloitustagilla <?php ja lopetetaan lopetustagilla ?>. PHP-koodia voi siis kirjoittaa esimerkiksi HTML- koodin väliin. PHP on suosittu ohjelmointikieli, sillä se on yksinkertaisuutensa vuoksi helppo oppia ja siten sopii myös aloittelevalle ohjelmoijalle samalla tar- joten kuitenkin runsaasti ominaisuuksia edistyneempäänkin ohjelmointiin. (The What can PHP do? s.a.)

PHP-ohjelmoinnin erityispiirteet Moodlessa

Moodlen tarjoamat ohjelmointirajapinnat eli API:t ovat Moodlen lisäosien kehit- tämisessä keskeisessä roolissa. Ne mahdollistavat tiedon vaihtamisen

Moodlen coren ja lisäosan välillä. Moodlessa on käytettävissä yli 50 ohjel- mointirajapintaa. Ohjelmointirajapinnoista löytyy valmiita toimintoja, joita voidaan käyttää kyseiseen rajapintaan käsiksi pääsevän objektin avulla. Esimer- kiksi tietokantojen hallinnointiin on olemassa Data Manipulation -rajapinta, johon päästään käsiksi $DB-objektin kautta. Tämän objektin tarjoamien meto- dien avulla voidaan muun muassa hakea tietokannasta tietoa (kuva 3) tai muokata tietokannan sisältöä. (Moodle 2021c; Wild 2017.)

Kuva 3. Haetaan users-tietokannasta käyttäjän tiedot, jonka id on 1

Moodlen lisäosia ohjelmoitaessa kannattaa käyttää näitä rajapintoja aina kun se on mahdollista, sillä niissä on valmiiksi huomioitu monia ohjelmoinnin kannalta tärkeitä seikkoja. Esimerkiksi Data Manipulation -rajapinnan toiminnot huolehtivat SQL-injektioihin liittyvistä asioista, eikä ohjelmoijan tarvitse tehdä tätä työtä enää uudestaan ohjelmointivaiheessa. String-rajapinta taas puolestaan huolehtii automaattisesti tekstin muotoilusta ja hakee oikean käännöksen kielitiedostoista, mikäli sellainen on saatavilla. (Moodle 2021c; Wild 2017.)

Moodleen ohjelmoitaessa on huomioitava Moodlen määrittelemät linjaukset, joita PHP-koodien tulee noudattaa. Linjauksilla pyritään pitämään koodi yhte- näisenä, jotta se olisi helpommin luettavaa ja ymmärrettävää kaikille kehitys- yhteisön jäsenille. Standardin noudattaminen on myös edellytyksenä koodin hyväksymiselle, mikäli koodi halutaan tuoda Moodle-yhteisöön kaikkien

(11)

saataville. Linjausten mukaan kaikkien PHP-koodia sisältävien tiedostojen tulee alkaa <?php-tagilla, GPL tekijänoikeusselosteella sekä docblock-osiolla (kuva 4). Docblock-osiossa tulee olla vähintään lisäosan nimi, tekijänoikeus ja lisenssin tiedot. (Moodle 2021b.)

Kuva 4. Tekijänoikeus-seloste ja docblock-osio

Moodleen ohjelmoitaessa PHP-koodin loppuun ei saa laittaa lopetustagia. Si- sennyksen on oltava neljä välilyöntiä. Poikkeuksena tähän on päätason koodi, jota ei sisennetä lainkaan. Koodirivien tulisi olla alle 180 merkkiä pitkiä, poikkeuksena tähän ovat kuitenkin kielitiedostojen langstringit. Mikäli koodirivin pi- tuus ylittää 180 merkkiä, tulee se jakaa useammalle riville niin, että seuraavat rivit sisennetään neljällä välilyönnillä. Rivien tulee päättyä LF-rivinvaihtoon, eikä rivien lopussa saa olla välilyöntejä. Tiedoston tulee päättyä yhteen LF-rivinvaihtoon. Luokkien, funktioiden, parametrien ja muuttujien nimien tulee olla pienellä kirjoitettuja englanninkielisiä sanoja, jotka ovat mahdollisimman yksinkertaisia ja kuvaavia. Luokkien ja funktioiden nimien koostuessa useammasta sanasta erotetaan sanat alaviivalla. Useasta sanasta koostuvat parametrien ja muuttujien nimet kirjoitetaan yhteen pienillä kirjaimilla. (Moodle 2021b.)

(12)

2.3 Javascript

Javascript on ohjelmointikieli, jota käytetään yleisimmin selaimissa. Javascript ei vaadi koodin kääntämistä, vaan se suoritetaan sellaisenaan. Javascript on yksi kolmesta web-ohjelmoinnin tärkeästä kielestä. Näihin lukeutuvat myös HTML (Hypertext Markup Language) ja CSS (Cascading Style Sheets). HTML määrittelee elementit ja perustiedot, jotka käyttäjälle näytetään. CSS puolestaan määrittelee elementeille tyylejä, joilla voidaan vaikuttaa sivun visuaali- seen ilmeeseen. Javascript täydentää edellä mainittuja mahdollistaen erilaisten toimintojen ja interaktiivisuuden luomisen sivulle. Javascript perustuu EMCAScript-standardiin. EMCAScriptistä julkaistaan uusia versioita säännölli- sesti Emca Internationalin toimesta. Ensimmäinen EMCAScript-versio ES1, julkaistiin vuonna 1997 ja viimeisin versio ES11 julkaistiin vuonna 2020. Stan- dardin muuttuessa myös Javascript kehittyy vastaamaan standardeja. (Lab- recque ym. 2019; MDN Web Docs 2021a.)

Ohjelmointia helpottamaan on luotu monia erilaisia Javascript-kirjastoja ja -oh- jelmistokehyksiä. Näitä voidaan kutsua myös paketeiksi. Ne sisältävät erilaisia valmiita toimintoja, joita ohjelmoija voi käyttää suoraan omassa projektissaan sen sijaan, että koko toiminto pitäisi ohjelmoida alusta alkaen. Hyvä esimerkki laajalti käytössä olevasta Javascript-kirjastosta on jQuery, joka mahdollistaa muun muassa erilaisten animaatioiden ja siirtymien luomisen. Usein kuullaan viitattavan myös vanilja Javascriptiin (vanilla.js), joka nimensä perusteella kuu- lostaa Javascript-kirjastolta, mutta todellisuudessa se ei sitä ole. Vanilja Ja- vascript -termiä käytetään viittaamaan puhtaaseen Javascriptiin, jossa ei ole käytössä ulkoisia koodeja tai työkaluja, kuten jQueryä. (Labrecque ym. 2019.)

Kirjastoja voidaan ottaa käyttöön muutamalla eri tavalla. Ensimmäinen näistä on CDN:n avulla. CDN on lyhenne sanoista Content Delivery Network. Se viit- taa ryhmään yhdessä toimivia, maantieteellisesti hajautettuja palvelimia, joiden tavoitteena on tarjota verkossa olevan sisällön siirto nopeasti. Tällöin kirjasto ladataan ohjelmaa ajettaessa, jolloin siitä saadaan käyttöön myös aina päivitetty versio. Paketti otetaan käyttöön laittamalla sen CDN-osoite HTML- tiedostoon script-tagien sisälle (kuva 5). (What is CDN? s.a.; Labrecque ym.

2019.)

(13)

Kuva 5. Kirjaston ottaminen mukaan CDN:n kautta

Kirjastoja voidaan ottaa käyttöön myös npm:n (lyhenne sanoista Node.js Package Manager) avulla. Npm on työkalu, joka huolehtii Javascript-pake- teista Node.js ympäristössä. Node.js puolestaan on ajoympäristö, jolla voidaan suorittaa Javascript-koodia palvelimella. Se perustuu avoimeen lähde- koodiin ja on alustariippumaton. Npm:n avulla kirjaston asentaminen onnistuu komentokehotteella käyttämällä komentoa npm install. Paketti säilötään node_modules-hakemistoon ja sovellusta rakentaessa (build) siellä sijaitsevat kirjastot liitetään mukaan sovellukseen. Iso osa uusista ohjelmointiprojekteista luodaan Node.js-ympäristössä ja tällöin myös kirjastojen asentamiseen käyte- tään npm:ää. Koska npm lataa paketin lähdekoodin projektin hakemistoon vain asentamishetkellä, täytyy sen päivittämisestä huolehtia itse. (Labrecque ym. 2019; Node.js s.a.)

Javascript-koodin erityispiirteet Moodlessa

Moodlen vaatimuksien mukaan Javascript-moduulit tulisi kirjoittaa puhtaalla Javascriptillä. JQueryn ja muiden Javascript-ohjelmistokehysten käyttöä tulee välttää. Moodlen versiosta 3.10 alkaen kaikki Javascript-koodi tulee kirjoittaa ES6-tyylillä. Javascript-koodi tulee myös aina paketoida moduuliksi. Tällä saadaan luotua pienempiä ja uudelleenkäytettäviä koodin osia. Kokonaisuuden purkaminen pienempiin osiin myös helpottaa virheiden etsimistä koodista.

Moodle tukee moduulien kirjoittamista Asynchronous Module Definition (AMD) -rajapinnan kautta. Tämä rajapinta määrittelee tavan moduulien määrittämi- seen siten, että moduuli ja sen riippuvuudet pystytään lataamaan asynkroni- sesti. Asynkronisen latauksen ansiosta voidaan suorittaa useita moduuleita samaan aikaan toisin kuin synkronisessa latauksessa, jossa jokainen moduuli ladattaisiin yksi kerrallaan. Tämä parantaa suorituskykyä ja käytettävyyttä erityisesti selainympäristössä. (Moodle 2021a; Moodle 2021f; Vranken 2020.)

Moduuli määritellään define()-metodin avulla. Mikäli moduuli käyttää joitakin muita moduuleita, annetaan ne kyseiselle metodille parametriksi. Moduuli palauttaa init()-funktion, jonka sisälle kirjoitetaan haluttu koodi. Esimerkki

(14)

yksinkertaisesta moduulista on nähtävissä kuvassa 6. Moduuli tulee sijoittaa lisäosan juurihakemistossa sijaitsevan amd-hakemiston alikansioon src.

Kuva 6. AMD-moduuli, joka käyttää myös Moodlen coren str-moduulia.

Lisäksi kaikki Javascript-koodit tulee minimoida. Minimoinnissa koodista poistetaan kaikki ylimääräiset merkit muuttamatta kuitenkaan sen toimintaa. Yli- määräisillä merkeillä tarkoitetaan esimerkiksi välilyöntejä ja puolipisteitä. Mini- moiminen pienentää tiedostokokoa ja nopeuttaa latausaikoja. Minimoitu versio koodista sijoitetaan amd-hakemiston alihakemistoon build. Minimoitujen tiedostojen nimi tulee myös muuttaa muotoon tiedosto.min.js, jotta tiedosto- nimestä käy ilmi sen olevan minimoitua koodia. (Why minify JavaScript code?

s.a.; Moodle 2021f.)

PHP-koodin puolelta tätä luotua moduulia voidaan nyt kutsua Page-rajapinnan avulla js_call_amd()-metodilla kuten kuvassa 7. Javascript-tiedostoja on myös mahdollista kutsua Mustache-templaten kautta. Mikäli kutsuttu funktio tarvit- see parametrejä, annetaan ne funktion nimen jälkeen. (Moodle 2021f.)

Kuva 7. Moduulin lisääminen Moodle-sivulle

Mikäli lisäosaan halutaan ottaa mukaan jokin kolmannen osapuolen Ja- vascript-kirjasto, täytyy sen olla AMD-muodossa ja sijaita lisäosan hakemistossa. Käyttöönotto aloitetaan määrittelemällä RequireJS käyttämään kolmannen osapuolen kirjastoa (kuva 8). Tämä tehdään src-hakemistoon sijoitetta- vassa tiedostossa, joka voidaan nimetä vapaasti. Tiedostoon määritellään polku kirjaston Javascript-tiedostoon ja nimet, joilla kirjastoihin viitataan.

(Moodle 2021e; Moodle 2021f.)

(15)

Kuva 8. RequireJS:n määritteleminen

Seuraavaksi kolmannen osapuolen kirjasto tulee määritellä AMD-moduuliksi.

Tämä tehdään luomalla moduulille kuvan 9 mukainen Javascript-tiedosto src- hakemistoon. Moduulille annetaan polku tiedostoon, jossa RequireJS:n määri- tykset on tehty sekä moduulin nimi. (Moodle 2021e.)

Kuva 9. Kolmannen osapuolen kirjaston määritteleminen moduuliksi

Tämän jälkeen kirjasto voidaan ottaa käyttöön muissa moduuleissa kuten kuvan 9 moduulissa otettiin käyttöön str-moduuli (Moodle 2021e).

2.4 Mustache

Moodle käyttää Mustache-templateja datan renderöimiseen HTML-muodossa.

Template on eräänlainen sabluuna, joka sisältää varatut kohdat eli placehol- der-tagit renderöitävälle datalle. Mustache perustuu ainoastaan tageihin eikä se sisällä lainkaan esimerkiksi if- ja else-lauseita. Tagit aloitetaan ja suljetaan kahdella aaltosulkeella, jotka muistuttavat muodoltaan viiksiä ja tästä Mus- tache (suomennettuna viikset) on myös saanut nimensä. Tageja on muutamia erilaisia. Yleisin näistä on muuttuja. Muuttuja-tagi {{arvo}} etsii avainta arvo templatelle annetusta kontekstista. Templatelle annetaan konteksti JSON-ob- jektina (kuva 10). (Moodle 2021k; Mustache(5) 2014.)

(16)

Kuva 10. Mustache-templatelle annettava konteksti

Mikäli avainta ei löydy, ei myöskään renderöidä mitään. Mikäli muuttuja halutaan renderöidä ns. ”unescaped HTML:nä”, laitetaan se kolmen aaltosulkeen sisään kahden sijasta. Unescaped HTML renderöi HTML-koodin sellaisenaan, kun oletuksena tietyt merkit muunnetaan HTML-entiteeteiksi. Osiota merkit- sevä tagi alkaa ristikkomerkillä {{#osio}} ja päättyy kauttaviivaan {{/osio}}. Mi- käli osioavaimen arvo on false tai tyhjä array, ei osiotagien välissä olevaa si- sältöä renderöidä. Mikäli avaimen arvona on array, jossa on sisältöä, tagien välissä oleva osio renderöidään jokaisen arrayn alkion kohdalla. Näin voidaan käydä läpi lista renderöitäviä elementtejä. Mikäli jokin osio halutaan rende- röidä, mikäli annetun avaimen arvo on false, tyhjä array tai mikäli avainta ei löydy ollenkaan, voidaan käyttää käänteisen osion tageja. Käänteinen osio aloitetaan tagillä {{^osio}} ja lopetetaan tagiin {{/osio}}. Kuvassa 11 on nähtä- vissä esimerkki edellisen kuvan kontekstia hyödyntävästä templatesta. (Mus- tache(5) 2014.)

Kuva 11. Mustache-template, jossa käytetään osiota ja käänteistä osiota

Lisäksi Moodle tarjoaa useita apumuuttujia helpottamaan datan renderöintiä.

Esimerkiksi kielitiedostoissa olevia langstringejä voidaan käyttää string-tagilla.

Muuttuja aloitetaan tagilla {{#str}} ja suljetaan tagilla {{/str}}. Avaimeksi annetaan halutun langstringin nimi ja lisäosan nimi eroteltuna pilkulla. Templatet tallennetaan lisäosan juuressa sijaitsevaan templates-hakemistoon. PHP-koodissa template renderöidään $OUTPUT-objektin render_from_template()-

(17)

metodilla, jolle annetaan parametriksi templaten nimi ja kontekstin sisältävä muuttuja. (Moodle 2021k.)

Moodlen tarjoama perusteema Boost perustuu Bootstrap 4 -ohjelmistokehyk- seen (Moodle 2016). Bootstrap yhdistää HTML-, CSS- ja Javascript-kieliä ja sen tavoitteena on helpottaa responsiivisten web-sovellusten kehittämistä.

Bootstrapin käyttö perustuu sen tarjoamiin tyyliluokkiin, joita HTML-elementeille asetetaan. (W3schools s.a.) Yhdistämällä bootstrapin tyyliluokat lisäosan Mustache-templateen saadaan ulkoasultaan yhtenäisiä tuotteita ja näin myös lisäosan värit noudattavat Moodle-sivun teeman värejä.

3 GRIDSTACK.JS

Gridstack.js on Typescript-kirjasto, joka on suunniteltu helpottamaan drag and drop -tyylisten näkymien luomista (Gridstack 2021). Typescript on ohjelmointikieli, joka perustuu Javascriptiin. Se sisältää kaikki Javascriptin ominaisuudet ja tuo mukanaan lisäominaisuuksia, kuten tyyppijärjestelmän, jonka mukaan kieli on nimettykin. Kaikki Javascript-koodi on suoraan yhteensopivaa Typesc- riptin kansa. (TypeScript 2022.)

Gridstack.js:n avulla voidaan luoda edistyneitä gridejä, joiden sisällä voidaan raahata ja skaalata niissä sijaitsevia elementtejä. Grid on eräänlainen kehys, jonka sisällä toiminta tapahtuu. Kuvassa 12 on nähtävissä esimerkki Grid- stackin avulla toteutetusta gridistä, jossa on elementtien poisto- ja lisäysmah- dollisuus. Gridstackissä käytetään puhdasta Javascriptiä, joten se soveltuu hyvin käytettäväksi Moodlessa. Gridstack asennetaan kuten muutkin kirjastot npm:n tai CDN:n avulla. (Gridstack.js 2022.)

(18)

Kuva 12. Esimerkki Gridstack.js:llä toteutetusta gridistä (Gridstack.js s.a.)

Gridille määritellään sijainti lisäämällä HTML-koodiin halutulle paikalle div-elementti, jonka luokaksi annetaan grid-stack. Itse grid luodaan Javascript-koodissa init()-metodilla. Metodi etsii elementin, josta löytyy grid-stack-luokka ja luo gridin siihen kohtaan. Useampi grid voidaan luoda kerralla metodilla ini- tAll(). Molemmille näistä metodeista voidaan antaa parametreiksi objekti, joka sisältää gridin ominaisuudet, kuten kuvassa 13 on tehty. Lisäksi metodille voidaan antaa toisena parametrinä string-muodossa luokka, jonka omaavaan elementtiin grid luodaan, mikäli halutaan poiketa oletuksesta (grid-stack). Gri- dille annettavien ominaisuuksien avulla voidaan esimerkiksi sallia elementtien raahaaminen gridiin sen ulkopuolelta (acceptWidgets), estää gridin katoami- nen, mikäli siinä ei ole sisältöä (minRow), asettaa rivin korkeus (cellHeight) ja asettaa marginaalit gridin sisällölle (margin). (Gridstack.js 2022; Gridstack.js 2021.)

Kuva 13. Gridin ominaisuuksien määritteleminen ja gridin luominen

(19)

Gridiin sijoitetaan elementtejä, joille voidaan myös määritellä monia ominaisuuksia, esimerkiksi mille kolumnille (x) ja riville (y) se halutaan sijoittaa sekä kuinka paljon tilaa se vie per rivi (w) tai kolumni (h). Content määrittelee elementin sisällön. Lisäksi elementille on mahdollista antaa id, jonka avulla elementti on helposti tunnistettavissa esimerkiksi silloin, kun se lisätään gridiin.

(Gridstack.js 2021.)

Gridiin sijoitettavat elementit voidaan luoda kolmella tavalla. Ensimmäinen tapa lisätä elementtejä on luoda array, jossa on lisättävät elementit ominaisuuksineen objekteina, ja tämän jälkeen antaa tämä array parametriksi metodille load(), joka lisää sille annetut elementit gridiin. Toinen tapa on dynaaminen luonti, jolloin elementti lisätään addWidget()-metodin avulla, jolle annetaan parametriksi objekti, joka sisältää elementin ominaisuudet. Nämä molemmat edellä mainitut tavat ovat nähtävissä kuvassa 14. (Gridstack.js 2021.)

Kuva 14. Elementtien lisääminen arraysta ja elementin lisääminen dynaamisesti

Kolmas tapa on luoda elementit DOM:n kautta. DOM on lyhenne sanoista document object model. Se on ohjelmointirajapinta, jonka avulla voidaan ma- nipuloida HTML- ja XML-dokumentteja esimerkiksi Javascriptin kautta. Gridiin luotavat elementit kirjoitetaan suoraan HTML-elementeiksi. Kukin elementti sijoitetaan grid-stack-item-luokalla varustettuun div-elementtiin ja itse elementin sisältö sijoitetaan grid-stack-item-content-luokan omaavan div-elementin si- sään (kuva 15). Javascript-koodissa grid luodaan metodilla init() kuten muu- toinkin ja samalla metodi luo myös gridin sisältä löydetyt elementit. Suurin osa gridien ja elementtien ominaisuuksista voidaan asettaa myös HTML-attribuutteina. Tällöin ominaisuuden nimen eteen lisätään etuliite gs- ja muutetaan ominaisuuden nimi kokonaan pieniksi kirjaimiksi ja erotetaan sanat toisistaan väliviivalla camelcasen sijaan. (Gridstack.js 2021; MDN Web Docs 2021b.)

(20)

Kuva 15. Elementtien luominen DOM:n avulla

Gridien muutoksia voidaan tarkastella tapahtumien (event) avulla, joita Grid- stackissä on valmiina 12 kappaletta. Tapahtuma voi olla esimerkiksi tilanne, jossa gridiin lisätään tai siitä poistetaan elementti, elementtiä aletaan raahaa- maan gridissä ja kun elementin kokoa muutetaan. Pääsääntöisesti tapahtumat palauttavat listan elementeistä, joita muutos koskee. (Gridstack.js 2021.) Ku- vasta 16 löytyy esimerkki tapahtumasta, jossa gridiin lisätään elementtejä. Ta- pahtuma palauttaa tapahtumaan liittyvät, eli tässä tapauksessa gridiin lisätyt elementit. Nämä elementit voidaan sitten käydä läpi ja tehdä niille tarvittavia toimintoja. Esimerkissä elementit vain tulostetaan konsoliin.

Kuva 16. Esimerkki tapahtumasta

Gridstackin ohjelmointirajapinnassa on myös runsaasti erilaisia metodeja, joiden avulla voidaan suorittaa erilaisia toimintoja, vaikkapa juuri näiden tapahtumien yhteydessä. Esimerkiksi save()-metodilla saadaan lista gridin sisältä- mistä elementeistä ominaisuuksineen. Tällaisesta listasta gridin elementit voidaan luoda uudestaan load()-metodin avulla. (Gridstack.js 2021.)

4 DASHBOARD-NÄKYMÄN TOTEUTUS

Tässä luvussa esitellään aluksi kehitystyön lähtökohdat ja sen kohteena oleva Moodlen lisäosa. Lisäksi esitellään projektin kehitysympäristö. Tämän jälkeen

(21)

käydään läpi kehitystyön eteneminen vaiheittain alkaen Gridstack.js-kirjaston käyttöönotosta ja päättyen lopputulosten esittelyyn.

4.1 Kehitystyön lähtökohdat

Tämän opinnäytetyön toimeksiantaja on Mediamaisteri Oy. Mediamaisterin päätuotteena on Moodleen pohjautuva digitaalinen oppimisalusta, johon Me- diamaisterin kehitystiimi kehittää uusia lisäosia ja ominaisuuksia asiakkaiden tarpeiden pohjalta. Mediamaisterin toiveena tältä opinnäytetyöltä on saada pohja uudelle dynaamiselle dashboard-näkymälle mRaportointi-lisäosalle.

mRaportointi on Mediamaisterin itse kehittämä Moodlen lisäosa, joka mahdollistaa entistä laajemman raportoinnin. Se on kehitetty vastaamaan asiakasyri- tysten ja -yhteisöjen tarpeeseen kerätä osastokohtaisia ja esimies-alais-tason raportteja kurssien suorituksista. mRaportoinnin avulla on mahdollista seurata helposti tietyn tiimin tai osaston kurssisuorituksia. Lisäosasta löytyy monia ominaisuuksia (yhteenveto, henkilöhaku, kohorttien yhteenveto, CSV, tiimin suorituksen työntekijöittäin, tiimin suoritukset kursseittain sekä aktiviteetit) ja lisää on tulossa jatkokehityksen myötä. (Mediamaisteri Oy s.a.; Haiku 2021.)

Ennen tätä opinnäytetyötä lisäosan tarjoamat raportit olivat tarkasteltavissa perinteisinä taulukoina, kuten kuvassa 17. Taulukon tiedot oli myös mahdollista ladata esimerkiksi csv-muodossa. Esiin oli kuitenkin noussut tarve pystyä esittämään kerättyä dataa entistä visuaalisemmin ja antaa käyttäjälle mahdollisuus luoda hänen omien tarpeidensa mukainen näkymä varustettuna hänen valitsemillaan elementeillä. Näkymän ei ole tarkoitus korvata aikaisemmin tuo- tettuja raportteja, vaan tuoda niiden rinnalle uusi tapa esittää dataa.

(22)

Kuva 17. Esimerkki mRaportoinnin raportista

Toiveena uuden näkymän käyttöliittymälle oli drag and drop -tyylinen näkymä, jossa käyttäjä voisi siirtää ja skaalata dashboardillaan olevia elementtejä ha- luamallaan tavalla. Lisäksi haluttiin hyödyntää Moodlen Charts API:a. Muutoin toteutuksen suhteen annettiin vapaat kädet. Tämän opinnäytetyön puitteissa ei ollut tarkoitus luoda valmiita elementtejä datan esittämiseen, vaan luoda pohja dashboardille sekä edellytykset uusien elementtien lisäämiselle.

4.2 Kehitysympäristö

Käytännön toteutuksen suunnittelun aloitin käytettävien tekniikoiden valitsemi- sella. Moodlessa suurin osa ohjelmoinnista tapahtuu PHP- ja Javascript-ohjel- mointikielillä. Työn tavoitteena oleva dashboard-näkymä olisi mahdollista ohjelmoida ilman minkäänlaista Javascript-kirjastoa, mutta halusin hyödyntää sen toteuttamiseen jotakin valmista kirjastoa, joka sisältää jo haluttuja toimintoja. Kirjaston valinnassa oli huomioitava Moodlen vaatimus puhtaasta Ja- vascriptistä ja jQueryn välttämisestä. Vaihtoehtojen tutkimisen jälkeen päädyin valitsemaan käytettäväksi kirjastoksi Gridstack.js:n.

Kehitysvaiheessa lisäosa oli asennettuna omaan Moodle-ympäristööni, joka oli asennettu Apache HTTP-palvelimelle. Näin pystyin testaamaan lisäosaa oi- keassa ympäristössä localhostin kautta. Moodle-asennusta ei käsitellä tarkemmin tässä opinnäytetyössä. Pohjaksi kehitystyölle otin uusimman

(23)

kirjoitushetkellä olleen version mRaportointi-lisäosasta Mediamaisterin GitLab- hakemistosta. Koodin editoimiseen käytin Visual Studio Code -koodieditoria.

Ennen kehitystyön aloittamista mRaportointi-lisäosa täytyi asentaa omaan Moodle-ympäristööni. Kloonasin lisäosan master-haaran Mediamaisterin Git- Lab-hakemistosta SSH-polun avulla. Moodlen lisäosien hakemistot on nimetty niin, että niiden nimestä selviää, mihin Moodlen hakemistoon ja millä nimellä ne täytyy sijoittaa, jotta ne toimivat oikein. Tässä tapauksessa lisäosan hakemiston nimi oli local_reports, joka kertoi, että lisäosa oli asennettava Moodlen local-hakemiston sisälle reports-hakemistoon. Mikäli tarvittavia kansioita ei ole olemassa, luodaan ne automaattisesti kloonauksen yhteydessä. Kun siirryin juuri luotuun reports-hakemistoon, oli Git Bash:n polun yhteydessä nähtä- vissä, että kyseessä oli hakemiston master-haara. Moodle asensi lisäosan seuraavalla kerralla, kun siirryin Moodlen admin-sivulle. Tässä vaiheessa loin vielä uuden haaran koodimuutoksia varten master-haaran pohjalta. Tämän tein sen takia, että minun oli mahdollista saada työtehtäväkseni jokin lisä- osaan liittyvän bugikorjaus tämän opinnäytetyön tekemisen aikana. Minun olisi siinä tapauksessa ollut helppo palata tekemään muutoksia master-haaraan, kun tämä projekti on turvassa toisessa haarassa.

4.3 Gridstack.js:n käyttöönotto

Ensimmäinen kehitystyön vaihe oli Gridstack.js:n käyttöönotto lisäosassa.

Koska ympäristönä on Moodle, eroaa käyttöönoton vaiheet Gridstackin doku- mentaatioissa esitetystä npm:n avulla tapahtuvasta käyttöönotosta. Aloitin ha- kemalla Gridstackin GitHub-hakemiston HTTPS-polun https://github.com/grid- stack/gridstack.js.git ja kloonaamalla sen lisäosan juureen gridstack.js-hake- mistoon. Tämän jälkeen siirryin gridstack.js-hakemistoon, jossa suoritin komennon npm install. Tämä komento asentaa kyseisen paketin sekä kaikki muut paketit, joista sen toiminta on riippuvaista. Suoritin vielä samassa hakemistossa komennon npm run-script build. Tämä komento kokoaa Grid-

stack.js:stä paketin. Ensimmäisellä yrityksellä tämä ei kuitenkaan onnistunut, sillä npm install -komento ei ollut asentanut vaadittua Yarnia. Asensin Yarnin toiminnolla npm install yarn -g ja suoritin npm run-script build -komennon uudelleen, tällä kertaa onnistuneesti.

(24)

Nyt kun Gridstackin koodi oli tuotu lisäosaan, täytyi se vielä tuoda mukaan Moodlen kooditiedostoihin. Tätä varten vaadittavat js- ja amd-hakemistot sekä amd-hakemiston alihakemistot src ja build olivat jo olemassa lisäosassa. Loin uuden gridstack-hakemiston js-hakemiston alle. Tämän jälkeen kopioin grid- stack.js/dist-hakemistosta gridstack-h5.js-tiedoston juuri luotuun gridstack-ha- kemistoon. Tämä tiedosto sisältää Gridstackin kaikki toiminnallisuudet. Koska tässä hakemistossa täytyy sijaita minimoitu versio koodista ja kyseinen koodi oli jo minimoitu, muutin vain tiedostonimen muotoon gridstack.min.js.

Seuraavaksi lisäsin amd-hakemistossa olevaan config.js-tiedostoon Grid- stackin tiedot (kuva 18). Tämä tiedosto konfiguroi RequireJS:n niin, että Grid- stackiä voidaan käyttää lisäosan kautta. Paths määrittelee polun Gridstackin Javascript-tiedostoon ja shim määrittelee, että kirjastoa kutsutaan nimellä grid- stack.

Kuva 18. Requirejs:n konfigurointi config.js-tiedostossa

Tämän jälkeen määrittelin Gridstackin AMD-moduuliksi luomalla amd/src-hakemistoon gridstack.js-tiedoston ja lisäämällä siihen kuvan 19 mukaisen sisäl- lön.

Kuva 19. Gridstack.js-tiedosto

Tässä vaiheessa kaikki tarvittavat määritellyt oli tehty ja Gridstackin toimintaa voitiin testata. Tätä varten loin kuvan 20 mukaisen tiedoston, jossa luodaan grid ja siihen elementtejä.

(25)

Kuva 20. Gridstacktest.js-tiedosto

Seuraavaksi loin local_reports-hakemiston juureen uuden tiedoston

dashboard.php, johon muodostin erittäin yksinkertaisen Moodle-sivun (kuva 21). Tässä PHP-koodissa kutsutaan edellisessä vaiheessa luotua gridstack- test.js-tiedostoa. Tämä koodi luo myös gridin näyttämiseen vaadittavan div- elementin, jossa on luokkana grid-stack.

Kuva 21. Dashboard.php-tiedosto

(26)

Lopuksi lisäsin kaikista luoduista Javascript-tiedostoista minimoidun version amd/build-hakemistoon. Lisäksi päivitin siellä ennestään olleet muokatut tie- dostot vastaamaan nykytilaa. Tämän jälkeen kopioin gridstack/dist-hakemistosta gridstack.css-tiedoston sisällön lisäosan tyylitiedostoon, jotta Gridstackin toimimiseen vaadittavat tyylimäärittelyt saadaan mukaan lisäosan tyyleihin.

Sen jälkeen poistin lisäosan juuressa sijainneen gridstack-hakemiston, koska kaikki tarpeelliset koodit olivat nyt tallessa js- ja amd-hakemistoissa. Tämän jälkeen pystyin testaamaan toimintaa paikallisella palvelimella. Kuten kuvasta 22 voidaan nähdä, olivat juuri luodut elementit nyt näkyvissä Moodle-sivulla eli Gridstack.js oli onnistuneesti otettu käyttöön.

Kuva 22. Gridstack.js:n avulla luodut elementit

4.4 Gridien ja elementtien luominen

Aluksi suunnittelin, kuinka toteuttaa elementtien lisääminen ja poistaminen dashboardilta. Dashboardilta poistettavia elementtejä ei haluta poistaa kokonaan, vaan ne täytyy pystyä lisäämään takaisin dashboardille. Tästä syystä päädyin ratkaisussa kahteen erilliseen gridiin. Toinen grid pitää sisällään saatavilla olevat elementit ja toinen on varsinainen dashboard. Dashboardin muokkaaminen tapahtuu raahaamalla elementtejä saatavilla olevien elementtien gridin ja dashboardin välillä.

Seuraavaksi lähdin luomaan testielementtejä tuotavaksi dashboardille, mutta ensimmäinen lähestymistapani osoittautui toimimattomaksi Moodlen Charts API:n kannalta. Tässä toimimattomassa toteutuksessa päädyin tekemään

(27)

elementtien hakemisen ajaxin avulla datan suuren määrän takia. Loin PHP- tiedoston, jossa luotiin yksinkertaisia testielementtejä. Nämä elementit jaettiin kahteen arrayhin sen mukaan kummassa gridissä ne oli tarkoitus näyttää. Ele- menttien sisällöt sisältävä array palautettiin gridstacktest.js-tiedostolle, jossa gridit ja niiden elementit luotiin addGrid()-metodin avulla. Tällä tavalla saatiin kyllä luotua elementit ja gridit, mutta päästessäni seuraavaan vaiheeseen koh- tasin ongelman. Nimittäin seuraavaksi täytyi selvittää, kuinka Moodlen Charts API:a voidaan hyödyntää Javascriptin kautta, sillä elementeissä halutaan esit- tää kyseisen rajapinnan tarjoamia kaavioita. Selvittelyn jälkeen kävikin ilmi, ettei kaavioita ole mahdollista renderöidä gridin elementteihin, mikäli elementit luodaan Javascript-koodissa. Tämä johtuu siitä, että luotu kaavio täytyy rende- röidä PHP-tiedostossa $OUTPUT->render()-metodilla, joka vaatii toimiakseen Moodle-sivun $OUTPUT->header():n ja $OUTPUT->footer():n niiden sisältä- mien skriptien vuoksi. Näiden mukaan tuominen jokaiseen elementtiin ei ollut mahdollista. Tämän takia kaaviot tulisi pystyä renderöimään dashboard.php- tiedoston kautta, sillä kyseisellä sivulla on vaadittu header ja footer valmiina.

PHP-tiedostossa renderöity kaavio on kuitenkin mahdollista välittää Mustache- templateen. Otin kehityksessä reilusti askeleita taaksepäin ja suunnittelin gridien luomisen ja tietojen välittämisen uudestaan.

Uudessa ratkaisussa päädyin luomaan elementit DOM:n avulla. Loin dashboard-näkymälle Mustache-templaten, jonka renderöin

dashboard.php:ssa $OUTPUT->render_from_template()-metodilla aiemman pelkän grid-stack-luokan sisältävän div-elementin sijaan. Templaten asette- lussa hyödynsin Bootstrapin grid-järjestelmää, jolla näkymästä saadaan hyvin myös responsiivinen. Koska templaten konteksti tulee sen renderöivästä PHP- tiedostosta ja tiesin välittäväni tiedot kahtena erillisenä arrayna, tein jo tässä vaiheessa molempiin grideihin osion, joka käy läpi kaikki alkiot kyseiseen gridiin liittyvässä arrayssa ja luo jokaiselle niistä templaten mukaisen elementin.

Esimerkiksi kuvassa 23 esitettyyn dashboard-gridiin renderöidään elementti jokaisen elementsondashboard-arrayn alkion kohdalla. Elementtien ominaisuudet, esimerkiksi sijainnin, sain helposti poimittua mukaan elementteihin, sillä Gridstack-elementin attribuutit voidaan antaa myös HTML-attribuutteina, kuten esimerkiksi leveys (gs-w) ja korkeus (gs-h). Näidenkin arvo voidaan poi- mia templatelle annettavasta kontekstista.

(28)

Kuva 23. Dashboard-gridin Mustache-template

Seuraavaksi kirjoitin Javascript-koodin, joka luo gridit. Koska templatessa on kaksi gridiä, luodaan ne initAll()-metodilla. Gridin ominaisuuksissa määritel- lään minimirivimäärän ja marginaalin lisäksi mahdollisuus raahata elementtejä gridiin sen ulkopuolelta ja poistetaan mahdollisuus siirtää ja skaalata element- tejä. Tästä lisää käyttöliittymän luomisen yhteydessä (luku 4.7). Gridit on mahdollista erotella toisistaan initAll()-metodin palauttamasta arraysta kuten kuvassa 24 on tehty.

Kuva 24. Gridien luominen ja erotteleminen toisistaan

Seuraavaksi loin elementeille luokan (kuva 25). Luokan ilmentymän eli elementin luomisen yhteydessä sille annetaan id, otsikko, sisältö ja renderöity kaavio. Samalla asetetaan oletusarvot korkeudelle ja leveydelle. Ominaisuuk- sien nimeämisessä käytin samaa tyyliä kuin Gridstack käyttää elementtien ominaisuuksien nimeämisessä, jolloin ne on helppo yhdistää toisiinsa Mus- tache-templatessa. Lisäksi loin luokalle kaksi metodia. Setsize()-metodilla

(29)

voidaan asettaa elementin koko ja setposition()-metodilla voidaan asettaa elementin sijainti gridissä.

Kuva 25. Dashboard_element-luokka

Tämän jälkeen päätin luoda testitarkoituksessa muutaman esimerkkielemen- tin, joissa hyödynnetään oikeaa Moodlesta peräisin olevaa dataa ja Charts API:a. Ensin oli kuitenkin suunniteltava, miten kaikki saatavilla olevat elementit saadaan haettua ja samalla pidettyä koodirakenne selkeänä. Päädyin luomaan lisäosan hakemistoon elements-hakemiston, johon sijoitetaan kaikkien saatavilla olevien elementtien koodit omina tiedostoinaan. Tiedostojen nimien tulee olla elementinnimi.php, elementin nimen ollessa sama kuin elementin id:nä käytettävä string. Näin toimimalla kaikki saatavilla olevat elementit voidaan hakea suoraan käymällä läpi hakemiston sisältämien tiedostojen nimet.

Lisäksi elementit on helppo yhdistää oikeisiin funktioihin nimen ollessa sama.

Loin hakemistoon kaksi tiedostoa eli elementtiä. Esimerkkinä elementin tietojen koostamisesta ja kaavion luomisesta käydään seuraavaksi läpi näistä toinen eli users.php.

Users.php-tiedostossa sijaitseva local_reports_users()-funktio luo piirakkakaa- vion sisältävän elementin, joka visualisoi käyttäjien kokonaismäärää ja sitä, kuinka suuri osa käyttäjistä on kirjautunut sisään oppimisympäristöön viimei- sen kuukauden aikana. Ensin lasketaan aikaleima nykyhetkestä kuukausi

(30)

taaksepäin. Kaikkien käyttäjien määrä voidaan hakea suoraan $DB-objektin metodilla count_records(), jolle annetaan parametreiksi haluttu tietokantataulu ja hakuehdot. Ehtona tässä tapauksessa on, että käyttäjää ei ole poistettu. Tä- män jälkeen lasketaan yhteismäärä niistä tietokannassa olevista käyttäjistä, joiden viimeinen kirjautuminen on tapahtunut aiemmin lasketun aikaleiman jäl- keen ja joita ei ole poistettu. Näiden käyttäjien hakemiseen käytetty SQL- lause, sijoitetaan metodin count_records_sql() parametriksi. Tietojen hakemiseen käytetty koodi on nähtävissä kuvassa 26.

Kuva 26. Tietojen hakeminen kaaviota varten

Seuraavaksi ohjelma luo saaduista tiedoista kaavion hyödyntäen Moodlen Charts API:a (kuva 27). Ensin luodaan uusi chart_pie-luokan ilmentymä. Tä- män jälkeen luodaan chart_series-luokan ilmentymä, jolle annetaan lukusarjan nimi ja itse luvut arrayna. Kaavion labelit annetaan arrayna $labels-muuttu- jaan. Tietojen lisäämiseen kaavioon käytetään Charts API:n metodeja. Sitten kaavio renderöidään omaan muuttujaansa, käyttäen $OUTPUT-objektin ren- der_chart()-metodia. Lisäksi määritellään vielä käyttäjien yhteismäärän sisältä- vän muuttuja. Näiden tietojen perusteella luodaan uusi dashboard_element- luokan ilmentymä. Lisäksi elementille asetetaan oletuskoko, hyödyntäen elementin setSize()-metodia. Lopuksi elementti palautetaan kutsujalle.

Kuva 27. Kaavion ja elementin luominen

(31)

4.5 Saatavilla olevien elementtien hakeminen

Seuraavaksi tarvittiin toiminto, joka hakee kaikki saatavilla olevat elementit.

Tähän tarkoitukseen loin get_all_elements()-funktion, jota dashboard.php-tiedosto kutsuu latauksensa yhteydessä. Tämä funktio hakee kaikki saatavilla olevat elementit elements-hakemistosta ja lisää ne omaan arrayhin poistaen tiedostonimistä .php-päätteen (kuva 28). Käyttäjän dashboardin kokoonpano eli elementit, niiden koko ja sijainti pitäisi pystyä tallentamaan tietokantaan.

Näin käyttäjän ei tarvitse joka sivulatauksen yhteydessä rakentaa omaa

dashboard-näkymäänsä uudelleen vaan edellinen tallennettu näkymä voidaan hakea suoraan tietokannasta. Tästä syystä funktio hakee myös kaikki käyttä- jän dashboardilla olevat elementit tietokannasta. Tässä vaiheessa tietokanta- haku ei vielä toimi, sillä tietokantaa ei ole vielä luotu. Tietokantarakenne oli kuitenkin suunniteltu, joten pystyin tässä vaiheessa jo kirjoittamaan myös tie- tokantahaun. Lisää tietokannan luomisesta tämän vaiheen jälkeen.

Kuva 28. Kaikkien saatavilla olevien elementtien hakeminen hakemistosta

Elementti luodaan kutsumalla elementin nimen omaavasta PHP-tiedostosta funktiota local_reports_elementinnimi() (kuva 29). Tässä käytetään muuttuja- funktiota, jotta elementin nimeä voidaan käyttää osana funktion nimeä. Funkti- olta palautuu luotu elementti.

Kuva 29. Elementtien luominen

(32)

Tämän jälkeen suoritetaan vertailu, jossa tarkastellaan, onko elementti käyttä- jän dashboardilla vai ei, eli löytyykö se tietokannasta haetuista elementeistä (kuva 30). Mikäli on, elementti lisätään dashboardelements-arrayhin ja mikäli ei, se lisätään availableelements-arrayhin. Elementin ollessa dashboardilla, asetetaan sille myös tietokannan tietoja vastaava koko ja sijainti hyödyntä- mällä elementin metodeja. Näin saadaan dashboardille sama asettelu, kuin käyttäjällä on viimeksi ollut.

Kuva 30. Tarkistetaan, onko elementti käyttäjän dashboardilla

Lopuksi palautetaan elementit arrayna kutsujalle eli dashboard.php:lle, joka välittää tiedot Mustache-templatelle (kuva 31).

Kuva 31. Saatujen elementtien käsitteleminen ja välittäminen Mustache-templatelle

(33)

4.6 Tietojen tallennus tietokantaan

Jotta dashboardin elementit voidaan tallentaa tietokantaan ja hakea sieltä, täytyi sitä varten luoda uusi tietokanta. Loin Moodlen XMLDB-editorilla lisä- osalle uuden tietokantataulun, johon tallennetaan käyttäjän id, elementin id, elementin sijainti ja elementin koko. Tietokantataulun tallennus käyttöliitty- mässä päivittää automaattisesti lisäosan db-hakemiston install.xml tiedoston, joka luo siinä määritellyt tietokantataulut lisäosan asennuksen yhteydessä (kuva 32).

Kuva 32. Install.xml uuden tietokantataulun osalta

Seuraavaksi lisäsin upgrade.php-tiedostoon tietokannan luonnin lisäosiin, jotka ovat versioltaan alle tämän uuden version (kuva 33). Näin uusi tietokantataulu luodaan myös aikaisemmin asennettuihin lisäosiin, joista se puuttuu.

Kuva 33. Upgrade.php

Tämän jälkeen pohja alkoi olla kunnossa, mutta itse tiedot tallentava toiminto puuttui vielä. Lisäsin templateen tallenna-painikkeen, jonka painalluksesta käyttäjän sen hetkinen dashboard-näkymä tallennetaan tietokantaan. Tallen- nus tapahtuu ainoastaan dashboard-gridissä oleville elementeille. Gridin

(34)

sisältö otetaan talteen Gridstackin save()-metodilla. Kyseisen metodin palaut- tama array dashboardilla olevista elementeistä lähetetään ajaxin avulla dashboard.ajax-tiedostolle, joka puolestaan kutsuu local_re-

ports_save_dashboard()-funktiota, jonka parametriksi elementit sisältävä array annetaan. Tallenna-napin toiminta on nähtävissä tarkemmin kuvassa 34.

Kuva 34. Tallenna-napin toiminta

Tietokantaan tallennetaan dashboardilla olevasta elementistä käyttäjän id, elementin id, sijainti kolumneina ja riveinä sekä koko. Mikäli elementti on tietokannan perusteella kyseisellä käyttäjällä jo dashboardilla, päivitetään kyseisen elementin rivi tietokannassa poistamisen ja uudelleen lisäämisen sijasta $DB- objektin update_records()-metodilla. Tämä siksi, että mikäli rivejä poistetaan paljon välistä, hidastavat puuttuvat rivit tietokantahakuja tietokannan ollessa suuri. Muutoin elementti lisätään $DB-objektin insert_records()-metodilla. Li- säksi käydään läpi tietokanta ja mikäli sieltä löytyy käyttäjän id:llä elementtejä, joita ei enää ole dashboardilla, poistetaan niiden rivit samalla tietokannasta

$DB-objektin delete_records()-metodilla. Mikäli tätä ei tehtäisi, tulisivat tietokantaan jääneet elementit seuraavalla kerralla jälleen näkyviin dashboardille.

4.7 Käyttöliittymä

Toimintojen ollessa valmiita oli aika keskittyä käyttöliittymään ja sen ulko- asuun. Tavoitteenani oli luoda käyttäjälle erillinen dashboardin muokkausnä- kymä. Muokkausnäkymän ollessa päällä, näytetään saatavilla olevien elementtien grid ja muutoin se on piilotettuna. Tätä tarkoitusta varten lisäsin templateen Muokkaa-painikkeen. Painikkeen painallus avaa muokkausnäky- män. Lisäsin muokkaustilaan myös otsikot grideille ja ohjetekstin dashboardin

(35)

muokkaukseen liittyen tuomaan selkeyttä. Muokkausnäkymän hallinta perustuu CSS-tyylimäärittelyihin, joissa käytetään elementin luokkaan perustuvaa valitsinta. Muokkaustilassa elementeille lisätään siis luokkia, joiden avulla voidaan piilottaa tai näyttää haluttuja elementtejä. Muokkausnäkymässä myös mahdollistetaan elementtien raahaaminen sekä skaalaaminen enableMove()- ja enableScale()-metodeilla. Rajaamalla tämä mahdollisuus vain muokkausnä- kymään ehkäistään tahattomien raahauksien tapahtuminen dashboardia tar- kastellessa. Muokkaa-painikkeen painalluksesta suoritettava koodi on nähtä- vissä kuvassa 35.

Kuva 35. Muokkaa-painikkeen toiminta

Muokkausnäkymässä näytetään myös aiemmin luotu Tallenna-painike, jonka toimintaa muutin siten, että painikkeen painallus tietojen tallentamisen lisäksi sulkee muokkaustilan. Lisäksi lisäsin Peruuta-painikkeen, jonka painallus sulkee muokkaustilan tallentamatta muutoksia. Molemmat painikkeet sulkevat muokkaustilan ottamalla mahdollisuuden siirtää ja skaalata dashboardin ele- menttejä jälleen pois päältä sekä lataavat sivun uudelleen. Näin ollen myös muokkaustilaan siirryttäessä tehdyt muutokset tyyliluokkiin palautuvat takaisin oletuksiin ja vain muokkaustilassa näkyvät elementit poistuvat näkyvistä. Tar- kempi Peruuta-painikkeen koodi on nähtävissä kuvassa 36.

(36)

Kuva 36. Peruuta-painikkeen toiminta

Saatavilla olevien elementtien gridin ulkoasua yksinkertaistaakseni toteutin gridin niin, että kun elementti on kyseisessä gridissä, näytetään siitä vain otsikko. Elementti myös näytetään pienempänä. Kun elementtiä aletaan raahaa- maan, tulee sen koko sisältö näkyviin. Tämän toteutin niin, että elementin otsikko tulostetaan omaan element-title-luokan omaavaan div-elementtiinsä ja kaikki muu elementin sisältö tulostetaan elementcontent-luokan sisältävän div- elementin sisään kuten kuvassa 23 esitellyssä templatessa. Tässäkin piilotta- minen perustuu CSS-tyyliluokkiin ja niiden näkyvyyden muutoksiin. Elementin koko on lisättävien elementtien gridissä aina vakio, vieden tilaa leveyssuun- nassa koko gridin ja pituussuunnassa yhden rivin. Elementtiä ei kuitenkaan haluta raahata dashboardille sen kokoisena. Elementin koko dashboardia varten saadaan templatessa määritellyistä data-attribuuteista. Raahaamisen al- kamisen yhteydessä päivitetään gridin update()-metodin avulla elementin koko vastaamaan data-attribuutteja. Raahaamisen alkaessa eli dragstart-tapahtuman yhteydessä tapahtuva koodi on kokonaisuudessaan nähtävissä kuvassa 37.

Kuva 37. Saatavilla olevien elementtien gridin dragstart-tapahtuma

Mikäli raahaaminen päättyy dashboardille, jää tehdyt muutokset voimaan. Mi- käli raahaaminen päättyy saatavilla olevien elementtien gridiin eli elementtiä ei laitettukaan dashboardille, suoritetaan kuvan 38 mukainen koodi. Siinä elementin koko muutetaan takaisin pieneksi ja siitä näytetään jälleen vain

(37)

otsikko. Lisäksi saatavilla olevien elementtien gridi pakataan kompaktiksi metodilla compact(), jotta elementtilistaukseen ei jää turhia aukkoja.

Kuva 38. Saatavilla olevien elementtien gridin dragstop-tapahtuma

Mikäli saatavilla olevien elementtien gridiin pudotetaan elementti, suoritetaan kuvan 39 mukainen koodi. Pudottamisella tarkoitetaan tilannetta, jossa gridiin lisätään elementti. Tässä tapauksessa tällainen tilanne syntyy, kun dashboardilta raahataan elementti kyseiseen gridiin. Tässä suoritetaan samat vaiheet kuin dragstop-tapahtuman yhteydessä.

Kuva 39. Saatavilla olevien elementtien gridin dropped-tapahtuma

Lopuksi tein vielä hieman hienosäätöä lisäosan CSS-tiedostoon, esimerkiksi elementtien varjostuksen ja asetin gridien taustavärit.

4.8 Lopputulokset

Kaikkien aikaisemmin kuvattujen vaiheiden jälkeen dashboard-näkymä oli val- mis. Kehitystyön lopputuloksena syntyi toimiva dashboard-näkymä, josta voidaan siirtyä muokkaustilaan Muokkaa näkymää -painikkeen painalluksella (kuva 40).

(38)

Kuva 40. Dashboard-näkymä

Muokkausnäkymässä näytetään saatavilla olevat elementit, ohjeistus sekä tallenna- ja peruuta-painikkeet (kuva 41).

Kuva 41. Muokkausnäkymä

Kun elementtiä raahataan kohti dashboardia, näytetään sen sisältö kokonaisuudessaan kuten kuvassa 42. Kun elementti palautuu saatavilla olevien elementtien gridiin, näytetään se jälleen pienenä. Elementtien liikuttaminen dashboardilla on sujuvaa, eikä esimerkiksi liikkeen nykimistä esiinny.

(39)

Kuva 42. Elementin raahaaminen saatavilla olevien elementtien gridistä

Jatkokehityksenä näkymästä kehitetään yhteensopiva mobiililaitteiden kanssa.

Lisäksi näkymän Internet Explorer -yhteensopivuutta pyritään parantamaan.

Näkymään aletaan luomaan asiakkaiden tarpeisiin vastaavia elementtejä.

Nämä aihepiirit kuitenkin rajattiin tämän opinnäytetyön ulkopuolelle.

Toimeksiantajan edustajan tarkasteltua työn lopputulosta ja sen koodia, hän totesi toteutuksen olevan järkevästi rakennettu ja ominaisuuksien olevan toi- votun mukaisia. Lisäksi kiitosta saivat lopputuloksen selkeys ja helppokäyttöi- syys. Myös toimeksiantaja näkee lopputuloksessa monia jatkokehitysmahdolli- suuksia, joiden pohjalta sitä lähdetään kehittämään entistä paremmaksi, kuten myös muiden lisäosien kanssa toimitaan.

5 PÄÄTÄNTÖ

Kehitystyön lopputuloksena syntyneen dashboard-näkymän toiminnot vastaa- vat toimeksiantajan toiveita ja ne saatiin toimimaan sulavasti. Kehitysprosessi itsessään oli haastava ja vaati paljon asioihin perehtymistä. Moodle tuo ohjel- mointityöhön oman lisänsä ja vaatiikin oman aikansa tulla sen asiantuntijaksi.

Minulla on hieman aikaisempaa työkokemusta toimeksiantajan palveluksesta, joten kokemus Moodle-ohjelmoimisesta ehdottomasti auttoi minua tämän työn parissa.

(40)

Sain työn toteuttamiseen ja käytettävien tekniikoiden valitsemiseen vapaat kä- det ja vaihtoehtojen tutkimisen myötä päädyin valitsemaan Gridstack.js:n.

Olen tyytyväinen valintaan, sillä kirjasto sisältää toivotut ominaisuudet ja sen dokumentaatiot ovat selkeitä. Tämä helpottaa lisäosan jatkokehittämistä myös muiden kuin minun toimestani. Kehitystyön aikana kysyin säännöllisesti pa- lautetta toimeksiantajalta ja joko jatkoin kehitystä hyväksi todetulla tiellä tai muutin toimintaa saamieni kommenttien mukaan.

Näin jälkikäteen voin todeta, että yksittäiset dashboardin toteutukseen liittyvät palaset olisi voinut testata paremmin etukäteen (esimerkiksi Charts API:n), niin olisi mahdollisesti vältytty siltä, että kehitystyössä joudutaan ottamaan as- kelia taaksepäin sen takia, että toteutustapa ei olekaan tuettu toisen palasen toimesta. Ongelmien kohtaaminen tosin on hyvä tilaisuus oppia ja oppimista tapahtuikin runsaasti. Työ oli kokonaisuudessaan erittäin opettavainen etenkin Javascriptin ja Moodlen yhdistämisen suhteen. Pääsin oppimaan paljon uutta ja hyödyntämään myös opiskeluiden aikana opittuja taitoja.

Minä sekä toimeksiantaja olemme tyytyväisiä työn lopputulokseen. Jatkamme yhdessä kollegoideni kanssa dashboardin kehitystyötä käyden läpi jatkokehi- tysideoita. Oli hienoa päästä tekemään tämän opinnäytetyön lopputuloksena kaupalliseen tuotteeseen tuleva ominaisuus. Tämän työn tekeminen myös vahvisti omaa näkemystäni omasta osaamisestani. Tästä on hyvä jatkaa kohti seuraavia haasteita, niin tämän kuin muidenkin projektien parissa.

(41)

LÄHTEET

Gridstack.js. s.a. Kuvakaappaus etusivulta. WWW-dokumentti. Saatavissa:

https://gridstackjs.com [viitattu 24.11.2021].

Gridstack.js. 2021. Gridstack.js API. WWW-dokumentti. Saatavissa: https://github.com/gridstack/gridstack.js/tree/master/doc [viitattu 10.1.2022].

Gridstack.js. 2022. Gridstack.js. WWW-dokumentti. Päivitetty 10.1.2022. Saa- tavissa: https://github.com/gridstack/gridstack.js/blob/master/README.md [viitattu 10.1.2022].

Haiku, M. 2021. Ohjelmistoasiantuntija. Haastattelu 4.11.2021. Mediamaisteri Oy.

Labrecque, J., Love, J., Rosenbaum, D., Turner, N., Mehla, G., Hosford, A., Sloot, F. & Kirkbride, P. 2019. The JavaScript Workshop. Birmingham: Packt.

E-kirja. Saatavissa: https://www.packtpub.com [viitattu 3.12.2021].

Mansikka, P. 2018. PHP – helposti. Helsinki: BoD – Books on Demand.

MDN Web Docs. 2021a. JavaScript language resources. WWW-dokumentti.

Päivitetty 22.10.2021. Saatavissa: https://developer.mozilla.org/en- US/docs/Web/JavaScript/Language_Resources [viitattu 10.1.2022].

MDN Web Docs. 2021b. Introduction to the DOM. WWW-dokumentti. Päivi- tetty 14.9.2021. Saatavissa: https://developer.mozilla.org/en-

US/docs/Web/API/Document_Object_Model/Introduction [viitattu 10.1.2022].

Moodle. 2016. Bootstrap. WWW-dokumentti. Päivitetty 1.12.2016. Saatavissa:

https://docs.moodle.org/dev/Bootstrap [viitattu 10.1.2022].

Moodle. 2018a. Local plugins. WWW-dokumentti. Päivitetty 14.6.2018. Saata- vissa: https://docs.moodle.org/dev/Local_plugins [viitattu 13.12.2021].

Moodle. 2018b. Moodle architecture. WWW-dokumentti. Päivitetty 22.8.2018.

Saatavissa: https://docs.moodle.org/dev/Moodle_architecture [viitattu 13.12.2021].

Moodle. 2019. Site appereance. WWW-dokumentti. Päivitetty 13.3.2019. Saa- tavissa: https://docs.moodle.org/311/en/Site_appearance [viitattu 13.12.2021].

Moodle. 2020a. About Moodle. WWW-dokumentti. Päivitetty 31.8.2020. Saa- tavissa: https://docs.moodle.org/311/en/About_Moodle [viitattu 14.11.2021].

Moodle. 2020b. Moodle key terms. WWW-dokumentti. Päivitetty 16.2.2020.

Saatavissa: https://docs.moodle.org/311/en/Moodle_key_terms [viitattu 14.11.2021].

Moodle. 2021a. Coding. WWW-dokumentti. Päivitetty 14.4.2021. Saatavissa:

https://docs.moodle.org/dev/Coding [viitattu 10.1.2022].

(42)

Moodle. 2021b. Coding style. WWW-dokumentti. Päivitetty 29.11.2021. Saata- vissa: https://docs.moodle.org/dev/Coding_style [viitattu 10.1.2022].

Moodle. 2021c. Core APIs. WWW-dokumentti. Päivitetty 14.7.2021. Saata- vissa: https://docs.moodle.org/dev/Core_APIs [viitattu 13.12.2021].

Moodle. 2021d. Frankenstyle. WWW-dokumentti. Päivitetty 14.7.2021. Saata- vissa: https://docs.moodle.org/dev/Frankenstyle [viitattu 13.12.2021].

Moodle. 2021e. Guide to adding third party jQuery for AMD. WWW-dokumentti. Päivitetty 15.7.2021. Saatavissa:

https://docs.moodle.org/dev/Guide_to_adding_third_party_jQuery_for_AMD [viitattu 10.1.2022].

Moodle. 2021f. Javascript Modules. WWW-dokumentti. Päivitetty 15.7.2021.

Saatavissa: https://docs.moodle.org/dev/Javascript_Modules [viitattu 10.1.2022].

Moodle. 2021g. Moodle and PHP. WWW-dokumentti. Päivitetty 17.8.2021.

Saatavissa: https://docs.moodle.org/dev/Moodle_and_PHP [viitattu 13.12.2021].

Moodle. 2021h. Plugin files. WWW-dokumentti. Päivitetty 2.9.2021. Saata- vissa: https://docs.moodle.org/dev/Plugin_files [viitattu 10.1.2022].

Moodle. 2021i. Plugin types. WWW-dokumentti. Päivitetty 17.8.2021. Saata- vissa: https://docs.moodle.org/dev/Plugin_types [viitattu 13.12.2021].

Moodle. 2021j. String API. WWW-dokumentti. Päivitetty 29.9.2021. Saata- vissa: https://docs.moodle.org/dev/String_API [viitattu 10.1.2022].

Moodle. 2021k. Templates. WWW-dokumentti. Päivitetty 18.8.2021. Saata- vissa: https://docs.moodle.org/dev/Templates [viitattu 10.1.2022].

Moodle. 2021l. Version.php. WWW-dokumentti. Päivitetty 8.10.2021. Saata- vissa: https://docs.moodle.org/dev/version.php [viitattu 10.1.2022].

Mediamaisteri Oy. s.a. mRaportointi. WWW-dokumentti. Saatavissa:

https://ohjeet.mediamaisteri.com/mraportointi [viitattu 14.11.2021].

Mustache(5). 2014. Mustache Manual. WWW-dokumentti. Saatavissa:

https://mustache.github.io/mustache.5.html [viitattu 10.1.2022].

Node.js. s.a. Introduction to Node.js. WWW-dokumentti. Saatavissa:

https://nodejs.dev/learn [viitattu 10.1.2022].

TypeScript. 2022. TypeScript for the New Programmer. WWW-dokumentti.

Päivitetty 6.1.2022. Saatavissa https://www.typescriptlang.org/docs/hand- book/typescript-from-scratch.html [viitattu 10.1.2022].

Vranken, A. 2020. AMD. WWW-dokumentti. Päivitetty: 24.11.2020. Saatavilla:

https://github.com/amdjs/amdjs-api/wiki/AMD [viitattu 10.1.2022].

(43)

W3schools. s.a. Bootstrap 4 Tutorial. WWW-dokumentti. Saatavissa:

https://www.w3schools.com/bootstrap4/default.asp [viitattu 10.1.2022].

What can PHP do?. s.a. The PHP Group. WWW-dokumentti. Saatavissa:

https://www.php.net/manual/en/intro-whatcando.php [viitattu 14.11.2021].

What is CDN?. s.a. Cloudflare. WWW-dokumentti. Saatavissa:

https://www.cloudflare.com/learning/cdn/what-is-a-cdn/ [viitattu 10.1.2022].

What is PHP?. s.a. The PHP Group. WWW-dokumentti. Saatavissa:

https://www.php.net/manual/en/intro-whatis.php [viitattu 14.11.2021].

Why minify JavaScript code?. s.a. Cloudflare. WWW-dokumentti. Saatavissa:

https://www.cloudflare.com/learning/performance/why-minify-javascript-code/

[viitattu 26.1.2022].

Wild, I. 2017. Moodle 3.x Developer’s Guide. Birmingham: Packt. E-kirja. Saa- tavissa: https://www.packtpub.com [viitattu 3.12.2021].