Kljuˇ cni izzivi programiranja

Kanban pogled

Programiranja tako imenovane “logike” te funkcionalnosti smo se lo-tili v jeziku JavaScript, saj ima vgrajen objekt za prenos podatkov po za-slonu s pomoˇcjo prijemanja in spuˇsˇcanja (drag and drop) elementov. Najveˇc teˇzav sta nam povzroˇcala koncept premikanja elementov s pomoˇcjo dogod-kov (event) in vkljuˇcitev uporabe objekta DataTransfer. Obenem nam je izziv predstavljalo dejstvo, da je elemente treba premikati v realnem ˇcasu in hkrati shranjevati posodobitve premikanja v zapisih podatkovne baze. Spo-daj je predstavljena naˇsa reˇsitev.

Najprej smo v jeziku HTML ustvarili tri obmoˇcja, kamor bomo naloge spuˇsˇcali in prijemali. Poimenovali smo jih Caka,ˇ V delu in Konˇcano. Vsa-kemu smo dodali dva dogodka (events): ondrop - ki, ˇce uporabnik spusti element v to obmoˇcje, pokliˇce funkcijo za izpust elementa - release in on-dragover, ki ob preletu tega obmoˇcja z elementom, pokliˇce funkcijo notify, ki prepreˇci prvotno obnaˇsanje brskalnika in omogoˇci izpustitev elementa, ˇce uporabnik to ˇzeli.

Nato smo ustvarili JavaScript funkcije:

• hold (za prijemanje elementov) – najprej smo v globalno spre-menljivko hold location zabeleˇzili ID-obmoˇcja od koder je bil element prijet, hkrati smo objektuDataTransfer- s funkcijosetData() sporoˇcili, kateri tip podatkov bomo prenaˇsali (ID prijetega elementa v besedilnem zapisu – text),

• release (za izpust elementov) – tukaj smo najprej podatke, shra-njene v objektuDataTransfer, shranili v spremenljivkovar datas pomoˇcjo funkcijegetData(). Nato smo prek urejanja dogodka (event) izpuˇsˇceni element pripeli v spuˇsˇceno obmoˇcje s klicem ev.currentTarget.appendCh-ild(document.getElementById(data)). Nato smo v spremenljivkostolpec

zapisali ID trenutnega obmoˇcja in iz HTML elementa div s pomoˇcjo funkcije getElementById pridobili ID elementa (naloge). Nato smo glede na stolpec - ustrezno spremenili barvo naloge in preverili, ali zaˇcetna lokacija stolpca (hold location) ni enaka novi lokaciji (kjer je bil element izpuˇsˇcen – released). V primeru uspeˇsne primerjave smo v datotekoindex.php poslali POST-zahtevo za spremembo stanja naloge v podatkovni bazi (glede na stolpec) s pomoˇcjo asinhrone metode na-vigator.sendBeacon(). V zahtevo smo priloˇzili ID trenutnega projekta, ID spreminjajoˇce se naloge in novi status naloge v obliki ˇstevila.

• uredi byName– v tej funkciji smo uredili barvo nalog v posameznih stolpcih ob nalaganju strani, saj so bile prvotne naloge postavljene v stolpce brez barve (direktno iz baze prek PHP-zanke).

Vse naloge smo v ustrezne stolpce razvrstili s pomoˇcjo jezika PHP. Najprej smo ustvarili tri tabele in v vsako tabelo ustrezno razvrstili naloge, glede na status. V naslednjem koraku smo jih ustvarili v ustreznem stolpcu (nad-elementu div) in vsakemu dodali dva dogodka (event),draggable – ki smo ga nastavili na true (resniˇcno), zato omogoˇci, da se element lahko premika, ter ondragstart – ki ob zaˇcetku premikanja elementa pokliˇce funkcijo hold().

Vzpostavitev dinamiˇcne spletne strani

Izziv nam je predstavljala funkcionalnost za vzpostavitev dinamiˇcne sple-tne strani. Odloˇcili smo se za pristop z AJAX (Asynchronous JavaScript And XML) in knjiˇznico jQuery, saj je ta pristop hiter in zanesljiv, hkrati omogoˇca nadzor in komunikacijo s streˇznikom v ozadju. Najveˇcja teˇzava je bila uporaba tega pristopa, saj ga do sedaj ˇse nisem uporabljal in sem se ga moral sproti uˇciti.

Najveˇc preglavic pri programiranju nam je povzroˇcalo asinhrono nalaga-nje spletnih strani, saj se komunikacija s streˇznikom odvija v ozadju, vrnjeno vsebino (html response) smo izpisovali v ospredju s pomoˇcjo ID - elementa div. To nam je v doloˇcenih primerih onemogoˇcilo, da bi dinamiˇcno prika-zane vsebine ˇse bolj razˇclenili z uporabo tega istega pristopa. Vsebina, ki jo

vraˇca html response se je s tem pokvarila - razen v preprostih primerih, ko se vraˇcajo preprosti nizi. Zaradi tega smo bili primorani v teh pod-vsebinah uporabljati bodisi vgrajeno PHP - HTML - obliko (form), ki se nadalje poˇslje prek standardnih zahtevPOST aliGET - ter tako kot v zgornjem primeru, funkcijo - navigator.sendBeacon().

Nalaganje datotek na streˇznik

Pri razvoju te funkcionalnosti nam je izziv predstavljalo, kako uporab-niku omogoˇciti nalaganje datotek in njihov dostop. Uporabili smo klasiˇcen pristop za prenos datotek s HTML-obrazcem (form) in mu dodali enctype (multipart/form-data), ki se uporablja za prenos datotek na streˇznik. Nato smo iz zahteve POST prevzeli podatke in jih preˇcistili. Ker za nalaganje datotek obstajata dve moˇznosti (projekti, ki jih naloˇzijo stranke in naloge, ki jih naloˇzijo uporabniki), smo glede na prijavljenega uporabnika in vrsto da-toteke za prenos (projektna ali od naloge) ustrezno ustvarili mape, ki imajo naziv ID-ja uporabnika, ki izvrˇsuje prenos datotek. Strankam se mape ustva-rijo na korenskem delu streˇznika, medtem ko uporabnikom v mapi task files.

Nato smo vsako datoteko preimenovali s pomoˇcjo funkcijerand() – (za zago-tavljanje dodatne plasti varnosti) in jih dodali na streˇznik v ustrezno mapo z vgrajeno funkcijomove uploaded file. Obenem smo v podatkovno bazo shra-nili ˇse ime (pot) do datoteke in jo kot URL dodali na prikaz datotek, s ˇcimer smo uporabnikom omogoˇcili dostop do shranjenih datotek.

Ker je omogoˇceno tudi urejanje projektov in nalog, smo morali omogoˇciti tudi urejanje datotek. Uporabnikom smo s pomoˇcjo UI jQuery poslali opo-zorilo, da se bodo stare datoteke prepisale, v primeru, da naloˇzijo nove.

Ponovno smo morali pogledati, ali mapa za uporabnika, ki ˇzeli naloˇziti da-toteko, ˇze obstaja (saj je moˇzno, da uporabnik prvotno datotek ni nalagal).

Nato smo postopek ponovili.

Izraˇcun poroˇcila o zaposlenosti uporabnikov

Izraˇcun poroˇcila nam je predstavljal izziv, saj nismo natanˇcno vedeli, kako bi se postopka lotili. Postopka smo se lotili tako, da smo prikazali ˇstevilo na-log (SQL-funkcija COUNT) v trenutnem dnevu in v prihajajoˇcem tednu (naslednjih sedmih dneh) za posameznega uporabnika – to smo pridobili s pomoˇcjo poizvedb v podatkovni bazi. Nato smo s pomoˇcjo poizvedbe, ki upo-rablja SQL - vgrajene metode SEC TO TIME (pretvorba sekund v ˇcasovni zapis), TIME TO SEC (pretvorba ˇcasovnega zapisa – time v sekunde) in AVG (povpreˇcje), pridobili povpreˇcen ˇcas, ki ga je uporabnik (zaposleni) po-rabil za vse naloge, ki jih je ˇze dokonˇcal. To sledi iz predpostavke, da doloˇceni uporabnik pri svojem delu po navadi dela s podobnimi ponavljajoˇcimi se na-logami, s ˇcimer je uporaba ˇcasovnega povpreˇcja nalog ustrezna. V primeru, da uporabnik zaˇcne z delom na daljˇsem projektu ali novem tipu nalog, bo takˇsen pristop dal slabe rezultate. Vendar smo iz lastnih izkuˇsenj ugotovili, da uporabniki po navadi delajo na ponavljajoˇcih se tipih nalog. ˇCe uporab-nik ni dokonˇcal ˇse nobene naloge, je zanj poroˇcilo nemogoˇce pripraviti, zato smo take primere izpustili.

Nadalje smo doloˇcili ˇcasovne limite (7 in 8 ur za dan, ter 38 in 40 ur za teden). Nato smo doloˇcili zasedenost (occupancy), ustrezno za dan (ˇstevilo nalog v dnevu ∗ povpreˇcen ˇcas za nalogo) in teden (ˇstevilo nalog v tednu

∗ povpreˇcen ˇcas za nalogo). V nadaljevanju smo zasedenosti doloˇcili faktor (premalo zaseden, ustrezno zaseden, preveˇc zaseden), ustrezno glede na to, ali je zasedenost pod prvo limito, med limitama ali nad zgornjo limito. Vsak faktor smo uporabniku tudi barvno ustrezno prikazali (modra – za premalo zasedenost, zelena – za ustrezno zasedenost, rdeˇca – za preveliko zasedenost).

Zavarovanje HTTP - metode GET

Za onemogoˇcanje nepooblaˇsˇcenih dostopov, do podatkov prek metode GET, smo morali poskrbeti za varnost aplikacije. Uporabili smo idejo pri-stopa, opisanega v [29], z dodanimi lastnimi izboljˇsavami.

V podatkovno bazo smo vsakemu zapisu, do katerega dostopamo z metodo

GET, dodali dve polji z nakljuˇcnimi desetimi oziroma ˇsestnajstimi biti, ki jih dodatno ˇse zakodiramo z metodo base64 encode (izbirnik in potrdilo).

Dolˇzino niza, ki smo ga dobili, smo izraˇcunali s formulo:

znaki= (biti+ 3−1)∗4/3.

V naˇsem primeru je to vrnilo 16 znakov zaizbirnik(selector) in 24 znakov za potrdilo(verificator). Vsak izbirnik je moral biti unikaten, saj smo z njegovo pomoˇcjo dostopali do zapisov v podatkovno bazo. Ob prejeti zahtevi GET, smo najprej pregledali, ali celoten niz ustreza regularnemu izrazu. Nato smo z izbirnikom pridobili zapis iz podatkovne baze in s funkcijohash equals primerjali podano potrdilo in potrdilo, pridobljeno iz baze, hkrati smo s tem pristopom prepreˇcili ˇcasovni napad (timing atack). V primeru ujemanja je URL veljaven, v nasprotnem primeru se zavrˇze in javi napako.

Glavno izboljˇsavo smo dodali pri preverjanju URL-naslovov za pridobi-tev podatkov o nalogah (saj se do nalog pri projektnem vodenju dostopa v najveˇcjem ˇstevilu in najpogosteje). Uporabili smo ˇstiri stopenjsko prever-janje. V URL smo dodali dva celotna niza izbirnikov in potrdil (prvi niz je nastal iz podatkov od projekta, v katerem je naloga, drugi iz podatkov ˇzelene naloge). Nato smo z regularnim izrazom preverili veljavnost nizov in v primeru veljavnosti najprej preverili veljavnost potrdila pri projektu. V primeru veljavnosti smo potrdilo naloge iz baze pridobili z dvema parame-troma (projektni ID in izbirnik naloge). ˇCe je takˇsna naloga obstajala, smo nato preveril ˇse njeno potrdilo. V primeru, da smo pri vseh primerjavah dosegli ujemanja, smo uporabniku dovolili dostop do naloge.

Teˇzave pri tem pristopu nam je predstavljalo tudi dejstvo, da smo iz na-kljuˇcnih bitov in kodiranja pridobili znake, ki niso bili ustrezni regularnemu izrazu, zato smo take znake v nizih zamenjali z znaki, ki ustrezajo pogoju v regularnem izrazu.