53
Diplomsko delo visokošolskega strokovnega študija Organizacija in management informacijskih sistemov SPLETNI PORTAL »AFRIŠKI BELOPRSI JEŽ« Mentor: izr. prof. dr. Uroš Rajkovič Kandidat: Dean Kosmač Kranj, februar 2017

SPLETNI PORTAL »AFRIKI BELOPRSI JE« - core.ac.uk · saj za razliko od naših ježev ne smejo v zimsko spanje (stanje hibernacije) saj bi le- ta za njih pomenila smrt. Zaradi predstave

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Diplomsko delo visokošolskega strokovnega študija Organizacija in management informacijskih sistemov

SPLETNI PORTAL »AFRIŠKI BELOPRSI JEŽ«

Mentor: izr. prof. dr. Uroš Rajkovič Kandidat: Dean Kosmač

Kranj, februar 2017

ZAHVALA Zahvaljujem se mentorju izr. prof. dr. Urošu Rajkoviču za sodelovanje. Posebna zasluga gre tudi vsem rejkam, ki so žrtvovale veliko časa in izkazale veliko zaupanja. Zahvaljujem se tudi svojim staršem, ki so me podpirali tekom študija, tako moralno kot finančno. Zahvaljujem se tudi podjetju Genis d.o.o., da mi je bil študij sploh omogočen.

POVZETEK

Tema diplomskega dela je raziskava delovanja rodovnikov in izdelava spletne rešitve. Pomanjkanje evidence na področju afriških beloprsih ježev v Sloveniji je pripeljalo do parjenja v sorodstvu, genskih bolezni in izgubljenih informacij o rodovnikih. Potrebno je bilo izdelati enostavno spletno rešitev, kjer smo rejcem omogočili vodenje rodovnikov preko spleta. Skupaj z rejkami smo raziskali rodovnike pri psih in na njihovi osnovi načrtovali funkcionalne specifikacije za afriške beloprse ježe. Zasnovali smo relacijsko bazo podatkov z orodjem PHPMyAdmin na MariaDB podatkovni bazi. S prototipnim pristopom smo zgradili spletno stran s pripadajočimi aplikacijami. Pri tem smo uporabili orodje Gedit za delo z tekstovnimi datotekami - pisanje kode. Za potrebe testiranja smo objavili spletno stran in k sodelovanju povabili največje tri rejce afriških beloprsih ježev v Sloveniji. Testiranje so sprejeli vsi trije rejci, trajalo je eno leto. Skladno s prototipnim pristopom smo aplikacijo po potrebi in željah dograjevali. Uspelo nam je izdelati živeč portal z 183 uporabniki in 4 rejci, ter skupno 194 ježi. Portal je prvi zadetek na iskalniku Google za iskalno geslo »afriški beloprsi jež«. Obenem smo s spletno stranjo dosegli večjo prepoznavnost te živalske vrste, kot tudi omogočanje doseganje čim boljših in genetsko pestrih legel. Ker novi lastniki legel lahko ustvarijo račun in dobijo prepis ježa, se vodijo tudi povratne informacije (slike, podatki o smrti in morebitnih boleznih), ki drugače ostanejo izgubljene.

KLJUČNE BESEDE:

- afriški beloprsi jež - elektronski rodovnik - družinsko drevo

ABSTRACT The intention of this work was to research pedigree charts and design a web solution. The lack of records in the field of african pygmy hedgehogs in Slovenia led to inbreeding, genetic diseases and lost information on their pedigrees. We created a simple web solution where hedgehog breeders can manage pedigree charts online. We researched the organization of dog pedigree charts and based on findings designed the functional specifications for african pygmy hedgehog pedigrees. We constructed entitiies using PHPMyAdmin tool on MariaDB database. We built a webpage with associated applications using a prototype approach using the Gedit tool for text files – code writing. We published the webpage online and, for the purpose of testing, invited three largest hedgehog breeders in Slovenia. All three breeders accepted the invitation to participate, the testing lasted one year. Consistent with our prototype approach we upgraded the application based on the needs of our users. We managed to create a living web portal with 183 users, 4 breeders and altogether 194 pygmy hedgehogs. Our webpage is the first link on Google search engine for the keyword »afriški beloprsi jež«. By having designed the webpage we achieved greater recognition of this animal species and also larger diversity of hedgehog litters. The new owners are now able to create an account and obtain the guardianship of their new pet hedgehog, therefore we get return informations, for example pictures and information on possible diseases, that would otherwise get lost.

KEYWORDS:

- african pygmy hedgehog - e-herd book - family tree

KAZALO

1. UVOD .................................................................................. 1

1.1. PREDSTAVITEV PROBLEMA .................................................... 1 1.2. PREDSTAVITEV OKOLJA ....................................................... 1 1.1. PREDPOSTAVKE IN OMEJITVE ................................................ 1 1.2. METODE DELA ................................................................... 1

2. TEORETIČNA IZHODIŠČA ............................................................ 2

2.1. PASJI RODOVNIKI ............................................................... 2 2.2. PRAVI JEŽI ....................................................................... 3 2.3. AFRIŠKI BELOPRSI JEŽ ......................................................... 4 2.4. NALOGA REJCA.................................................................. 5 2.5. OSNOVNI PODATKI ZA ZAPIS V RODOVNIKU ................................ 6

3. RAZVOJ PROTOTIPA ................................................................ 7

3.1. OPERACIJSKI SISTEM ........................................................... 7 3.2. PROGRAMSKA OPREMA ........................................................ 8 3.3. PODATKOVNI MODEL ........................................................... 9 3.4. PROGRAMSKA LOGIKA ........................................................ 12 3.5. UPORABNIŠKI VMESNIK ...................................................... 15

3.5.1. NAČRTOVANJE ............................................................. 15 3.5.2. IZVEDBA UPORABNIŠKEGA VMESNIKA PORTALA ....................... 20

4. TESTIRANJE PROTOTIPA ......................................................... 38

4.1. INTERNO TESTIRANJE ........................................................ 38 4.2. SPLETNA OPTIMIZACIJA ..................................................... 39 4.3. OBJAVA BETA VERZIJE NA SPLET .......................................... 40 4.4. UGOTOVITVE TESTIRANJ .................................................... 40 4.5. OBJAVA PRVE STABILNE VERZIJE .......................................... 41 4.6. PREDELAVA NA ANGULAR JS ............................................... 41

5. ZAKLJUČKI .......................................................................... 42

5.1. DOSEŽENI CILJI ................................................................ 42 5.2. ZADOVOLJSTVO UPORABNIKOV ............................................ 42 5.3. MOŽNOSTI ZA NADALJNJI RAZVOJ ........................................ 43

LITERATURA IN VIRI ........................................................................ 44 KAZALO SLIK ................................................................................ 46 KAZALO TABEL ............................................................................. 47 KRATICE IN AKRONIMI ..................................................................... 48

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 1

1. UVOD

1.1. PREDSTAVITEV PROBLEMA

V Sloveniji se je zadnje čase povečalo zanimanje za afriškega beloprsega ježa, kot hišnega ljubljenčka. Nekaj posameznikov je že pred leti uvozilo nekaj legel - predvsem iz Češke. Mladički so dobili nove lastnike, in ti so ponovno imeli mladičke. Ker se rodovniška drevesa niso vodila, so se v generaciji ali dveh izgubili podatki prednikov in pojavljati so se začela parjenja v sorodstvu. Zadnje leto je bilo v Sloveniji na Facebook skupini »Afriški beloprsi jež« (Facebook skupina, 2016) prijavljenih kar nekaj ježkov, ki so kazali znake degenerativne bolezni »Wobbly Hedgehog Syndrome«, kar je nekaj podobnega kot multipla skleroza pri ljudeh. Za preprečitev težavnega stanja bi bilo potrebno voditi enostaven rodovnik, s katerim bi lahko na daljši rok izkoreninili čim več genetskih bolezni in se trudili vzdrževati čim boljše krvne linije.

1.2. PREDSTAVITEV OKOLJA

Praktične informacije so bile pridobljene na podlagi internih raziskav obstoječega stanja, deloma iz lastnih izkušenj, deloma pa iz obstoječih rodovnikov (Kinološka zveza slovenije, 2016). Tehnično okolje je predstavljal osebni računalnik z operacijskim sistemom Ubuntu Server (Ubuntu server, 2016).

1.1. PREDPOSTAVKE IN OMEJITVE

Predpostavljamo, da bo vpis rodovnikov potekal podobno kot pri pasjih rodovnikih, s to razliko, da gre tukaj za spletno registracijo. Uporabniki naj bi vpisovali resnične podatke, in to počeli vestno. Tehničnih omejitev praktično ni, vsebinske omejitve naj bi bile vezane glede na pravice uporabnika.

1.2. METODE DELA

Raziskali smo rodovnike pri psih in na njihovi osnovi načrtovali funkcionalne specifikacije za afriške beloprse ježe. Zasnovali smo relacijsko bazo podatkov z orodjem PHPMyAdmin (phpmyadmin, 2016) na MariaDB podatkovni bazi (MariaDB, 2016). S prototipnim pristopom smo zgradili spletno stran s pripadajočimi aplikacijami. Pri tem smo uporabili orodje Gedit za delo s tekstovnimi datotekami - pisanje kode (Gedit, 2016). Za potrebe testiranja spletne rešitve smo objavili spletno stran in k sodelovanju povabili tri največje rejce afriških beloprskih ježev v Republiki Sloveniji. Vsi trije rejci so povabilo sprejeli, testiranje je trajalo 1 leto. Skladno s prototipnim pristopom smo aplikacijo dograjevali glede na potrebe in želje.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 2

2. TEORETIČNA IZHODIŠČA

Pred samim razvojem portala je bilo potrebno podrobno raziskati ključne, že obstoječe rešitve in teorije rodovniških dreves. Osnova nas je pripeljala do principov delovanja, ki smo jih prenesli na funkcije portala.

2.1. PASJI RODOVNIKI

Za osnovo našega portala smo raziskali delovanje najbolj razširjenih rodovnikov – pasjih. V Sloveniji podatke na področju pasjih rodovnikov ureja Kinološka Zveza (Kinološka zveza slovenija, 2016). Sam portal ima zanimivo zasnovo, saj ponuja osnovne informacije o psih in podatke o leglih. Najbolj pomemben del za nas je bil njihov izpisek (Slika 1). Na tej listini so informacije do 4. kolena sorodstvenih zvez in osnovne informacije (ime, barva, dlaka, pasma) o živali, za katero se rodovnik izdaja. Taka oblika zapisov se uporablja tudi pri Češkem klubu Afriških beloprsih ježev. Na osnovi teh informacij je nastal naš podatkovni model, z določenimi spremembami glede posebnih lastnosti pasme afriški beloprsi jež. Takšna oblika izpisa listine je bila kasneje uporabljena kot modul našega portala. Portal Kinološke Zveze je moderne izvedbe, vendar je za naš pogled vseboval nekaj minusov. Največji je gotovo čas nalaganja strani. Portal je na pomembnih straneh potreboval ogromno časa, da je prikazal spletno stran v celoti. Poleg tega je bil prikaz predvidenih legel zelo neorganiziran in nepregleden. Omenjene napake smo na našem portalu odpravili.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 3

Slika 1: Slika rodovnika Kinološke Zveze Slovenije (Kinološka zveza Slovenije, 2016).

2.2. PRAVI JEŽI

Pravi ježi (lat. Erinaceinae) so poddružina sesalcev, ki so jim skupne bodice na hrbtu. Obstaja 16 vrst pravih ježev, večina v Evropi in Afriki (Slika 2). Evolucijsko se zadnjih nekaj deset milijonov let niso spremenili. So vsejede živali, a je pri vseh največji delež mesne hrane. Samica je breja do dva meseca in skoti do šest mladičev. V divjini živijo do 7 let, v ujetništvu pa nekatere vrste celo do 15 let (Hedgehog Central, 2016). V Sloveniji sta naravno prisotna beloprsi in rjavoprsi jež. Tehtajo do 1 kg in se pri nas uvrščajo med ogrožene živali zaradi kmečke mehanizacije in pesticidov. Parjenje se prične marca in zaključi avgusta, zadnja leta pa tudi kasneje. V večini se prehranjujejo z žuželkami, deževniki in polži, občasno pa tudi mišje mladiče, ptičja jajca ali kače – saj ugriz naših strupenjač (gad in modras) ne predre čez njegove bodice. Največ jih videvamo v sezoni parjenja, pa tudi jeseni ko se redijo za zimsko hibernacijo in pripravljajo zavetje. Ježi lažji od 400g pri nas ne preživijo zime, obstaja celo društvo, ki omenjene ježe rešuje in jih do pomladi hrani. V stanju hibernacije se ježu telesna temperatura spusti na nekaj stopinj nad ničlo, srčni utrip pa se mu iz 190 (normalen srčni utrip) zniža na 20 utripov na minuto. Njihov edini obrambni mehanizem je, da se zvijejo v kepo – pri čemer uporabijo posebne mišice, ki napnejo bodice v vse smeri (drugače so bodice poležane nazaj). Nikoli ne grizejo iz obrambe in so zato prijetni hišni ljubljenčki. Ker je njihov obrambni mehanizem zelo učinkovit niso razvili občutka za tiho premikanje po okolici. Ježa namreč velikokrat zaznate tako, da ga slišite že

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 4

na daleč, saj za svojo velikost povzroča presenetljivo močan hrup (Hedgehog Central, 2016).

Slika 2: Slika dolgoušesnega ježa (Hemiechinus auritus) (Hedgehog Central, 2016).

2.3. AFRIŠKI BELOPRSI JEŽ

Afriški beloprsi jež je edina vrsta ježa, ki je pri nas dovoljena za hišnega ljubljenčka (Slika 3). Nastal je s križanjem afriškega (Atelerix albiventris) in alžirskega (Atelerix algirus) ježa. Od našega gozdnega ježa se razlikuje predvsem v velikosti. Tehtajo do največ 600 g in imajo bolj mehke bodice. Obstajajo v raznoraznih barvnih kombinacijah (92 osnovnih barv). Zaradi podobnega videza ga nekateri ljudje uvrščajo med glodavce, čeprav sodi v skupino sesalcev. Zaradi načrtnega parjenja so afriški beloprsi ježi veliko bolj zaupljivi do drugih pasem kot naši divji ježi. Povprečno živijo od 4-6 let, njihova življenjska doba pa se daljša s pridobivanjem vedno boljših rodovnikov. Samci so spolno zreli pri dveh, samičke pa pri treh mesecih. Za življenje nujno potrebujejo povprečno temperaturo prostora vsaj 21°C, saj za razliko od naših ježev ne smejo v zimsko spanje (stanje hibernacije) saj bi le-ta za njih pomenila smrt. Zaradi predstave iz risank mnogi ljudje napačno sklepajo, da se ježi prehranjujejo s sadjem, vendar so njihova glavna prehrana žuželke – spadajo med žužkojede. Tudi kravje mleko za ježe ni priporočljivo, saj lahko zaradi zaužite laktoze dobijo hudo drisko in poginejo. V domači reji se za hrano v večini uporabljajo mačji mesni briketi višje kakovosti, njihova sestava je podobna sestavi ježu naravne hrane. Kot posladek jim ponudimo mokarja ali črička, vendar ne preveč, saj so nagnjeni k nabiranju maščobnih zalog. So samotarji, zato vsaka žival potrebuje svojo kletko. Ker so to zelo aktivne nočne živali se priporočajo zelo velike kletke in obvezna uporaba kolesa. So precej snažni, in malo ter veliko potrebo

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 5

opravljajo v pesku za mačja stranišča. Nimajo nagnjenj k boleznim, obstajajo le legla s povečanim tveganjem za nastanek tumorjev in gen za bolezen WHS, ki se pri ježih izraža podobno, kot pri nas multipla skleroza. Gre za zaenkrat še, neozdravljivo bolezen (Hedgehog Central, 2016).

Slika 3: Afriški beloprsi jež (Vir: lasten, 2015).

2.4. NALOGA REJCA

Dober rejec v sklopu svojega dela odgovorne vzreje živali opravlja več različnih nalog. Začetna naloga rejca je, da poišče starše s kvalitetnimi lastnostmi. Če je potrebno, se po ježa odpravi tudi v tujino. Pozanima se o rejcu, kjer bo ježa pridobil, o pogojih v katerih bivajo (Slika 4). Izvedeti mora kar se da veliko o njihovih prednikih, in jih, če je to možno, predhodno tudi spoznati. Predvsem je pomembno, da izve popolne podatke o zdravju prednikov in morebitnih genetskih boleznih, ki so se pojavljale v liniji. Rejec mora vedno izbrati starše z znanim poreklom in rodovnikom, ter izdelano knjižico o zdravstvenem stanju. Naslednja naloga odgovornega rejca je ta, da po pridobitvi novega ježa oceni, če je le-ta primeren za nadaljnjo vzrejo. Oceni njegov karakter in zdravje. Če so vse lastnosti ustrezne ježu ob ustreznem času poišče primernega partnerja in izvede parjenje. Rejec mora voditi evidenco starosti živali in dnevnik parjenja, kjer so zapisani vsi podatki o dosedanjih paritvenih kombinacijah, datum parjenja, število mladičkov. Po kotitvi in oddaji mladičkov je potrebno oceniti lastnosti in karakter mladičkov, da lahko presodimo, kako se je obnesla določena paritvena kombinacija. Zelo pomembna naloga rejca pa je ta, da za svoje mladičke poišče primerne skrbnike, ki bodo sposobni za ježa dobro skrbeti. Z vsakim morebitnim kupcem se mora pred oddajo mladička temeljito pogovoriti in oceniti, ali je oseba primerna za skrbnika ježa. Ko se rejec in skrbnik dogovorita o oddaji oziroma prevzemu mladička, ga je rejec dolžan podučiti o skrbi za mladička in kasneje odraslega ježa. Pogovoriti se morata o opremi kletke in primerni hrani, ter o morebitnih

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 6

zdravstvenih težavah mladička. Rejec mora skrbniku zagotoviti tudi seznam veterinarjev v okolici, ki so sposobni nuditi pomoč v primeru težav z ježevim zdravjem. Rejec mora novemu lastniku razložiti osnove ravnanja z ježem, njegove navade in lastnosti, ter kako nadaljevati kvalitetno socializacijo mladička. Obveznost rejca je tudi, da je v primeru morebitnih vprašanj vedno na voljo.

Slika 4: Kletke ježev (Vir: lasten, 2015).

2.5. OSNOVNI PODATKI ZA ZAPIS V RODOVNIKU

Spletni portal »Afriški beloprsi jež« ima za zapis v elektronski rodovnik podoben podatkovni model kot pasji rodovniki, z razliko podatka o vrsti (pasmi), saj gre le za eno vrsto živali. Vnos je razdeljen na dve poglavji. Osnovni podatki, kot so

Ime,

datum rojstva,

oče,

mati in

barva.

Neobvezni ali Opcijski podatki npr.

leglo in

smrt1

1 Smrt se ne vpiše direktno ob vnosu podatkov, vendar ob samem dogodku.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 7

Obstajati mora kontrola vnosa podatkov. Pri vpisu legla je pri materi možen le vnos lastnih ježev, samci pa so lahko tuji in se čim bolj mešana legla spodbujajo. Zaradi prikaza legel vnaprej, ko se še ne ve točen datum kotitve pa smo uvedli začasno datumsko polje »Predviden datum kotitve«.

3. RAZVOJ PROTOTIPA

Z dovolj teoretičnimi osnovami sem se lotil izdelave samega jedra aplikacije. Cilj je bil izdelati celoten portal brez uporabe CMS sistema, saj je taka rešitev mnogo bolj prijazna uporabniku. Z uporabo modernih pristopov smo dosegli očesu prijazen uporabniški vmesnik.

3.1. OPERACIJSKI SISTEM

Za naš namen je bilo potrebno zagotoviti operacijski sistem strežnika, ki bo podpiral nadaljnje potrebe. Zaradi enostavnosti uporabe, stabilnosti in odprtokodne licence smo izbrali Ubuntu Server 14.04 LTS (Ubuntu server, 2016). Bitno sliko2 za namestitev operacijskega sistema smo prenesli iz uradne strani Ubuntu, kjer smo izbrali arhitekturo procesorja (32 ali 64 bitno verzijo). Sliko smo posneli na CD plošček in ga z inštalacijskim čarovnikom namestili na osebni računalnik.

2 Datoteka z končnico »*.iso«.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 8

3.2. PROGRAMSKA OPREMA

Podobno kot pri izboru strežnika smo tudi tukaj uporabili odprtokodne rešitve. Za čas razvoja so bile izbrane rešitve zadnje objavljene stabilne verzije. Programska oprema se deli na tri dele:

Sistemska programska oprema Gedit – program za delo z tekstovnimi

datotekami(pisanje kode) (Gedit, 2016)

Strežniška programska oprema:

o Apache2 – strežnik za svetovni splet za prikaz strani v HTML obliki

(Apache2, 2016) in

o MariaDB – SQL podatkovni strežnik (MariaDB, 2016).

Moduli in spletne aplikacije:

o PHP5 – modul za Apache2 strežnik, ki podpre prikaz dinamičnih strani

(PHP5, 2016),

o PHPMyAdmin – PHP aplikacija, za delo na podatkovni bazi

(phpmyadmin, 2016) in

o Smarty Template Engine – pogon za uporabo predlog (Smarty, 2016).

Programsko opremo se na operacijski sistem namesti z ukazom sudo apt-get install lamp-server^, kjer akronim LAMP pomeni »Linux Apache MySql PHP«3. Smarty pogon pa prenesemo v korensko datoteko, kjer ustvarimo spletišče, datoteki »template« in »cache« pa morata pravico za branje in pisanje (terminalni ukaz chmod 775).

3 MySQL strežnik je januarja 2008 nadomestil MariaDB podatkovni strežnik, da bi obdržali odprtokodno licenco. Temelji na zadnji odprtokodni različici MySQL strežnika, tekom časa pa je bil deležen že precej izboljšav.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 9

3.3. PODATKOVNI MODEL

Osnova za izgradnjo portala je bila podrobnejša analiza obstoječih modelov rodovnikov in na podlagi spoznanj pretvorba v podatkovne tabele. Podatki naj se ne bi podvajali, tabele pa naj bi bile med seboj povezane z primarnimi in tujimi ključi.

Slika 5: Podatkovni model aplikacije. Prva tabela, prikazana na Slika 5, je tabela z uporabniki, imenovana »user«. Uporabnik ob registraciji vnese podatke in se na ta način registrira v bazo. Geslo naj bi bilo kodirano s pomočjo ireverzibilne zgoščevalne funkcije. Zaradi dveh načinov vnašanja ježev, je bila uvedena tabela »litter« (leglo). Prvi način vpisa je »nepravi«. Če leglo ježa ni znano, kar pomeni, da ne poznamo podatkov legel ali le-ta ni obstajal – ga vpišemo v neznano leglo, za kar potrebujemo le tabelo »hedgehog«. Drugi, oziroma pravi način vnosa pa je, da se najprej vpiše najbolj sorodstveno oddaljene starše, za katere naredimo »nepravi« vpis, nadaljujemo pa z vpisovanjem »pravih« podatkov, ki vsebujejo tabelo »litter« (leglo). Tabela nosi podatke o rojstvu legla, zato te skupne podatke, vsi otroci tega legla dedujejo. Za kontaktiranje med uporabniki se uporablja tabela »contact«, za pomoč prikaza uporabniških slik ježev pa je nastala tabela »photo«, ki za določenega ježa pove pot do slik in nosi njihove osnovne informacije.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 10

OPISI ENTITET Tabela »User« vsebuje polja:

ID – ID ključ uporabnika

NAME – ime uporabnika

SURNAME – priimek uporabnika

ADDRESS – fizični naslov uporabnika

EMAIL – elektronski naslov uporabnika

PASSWORD – SHA-1 vrednost gesla

USER_LEVEL – nivo uporabnika (1 – navadni uporabnik, 2 – moderator, 3 -

administrator)

USER_TYPE – tip uporabnika (0 – navadni uporabnik, 1 - rejec)

ICON – bitna vrednost slike v PNG formatu

RATE – ocena uporabnika

Tabela »Hedgehog« ima polja:

ID – ID ključ ježa

NAME – ime ježa

GENDER – spol ježa (M – moški, F – ženski)

LITTER_ID – ID ključ legla

BIRTH_EMPTY – datum rojstva, ko gre za neznano leglo

DEATH – datum smrti

COLOR – barva ježa

MOTHER_ID – ID ključ matere, ko gre za neznano leglo

FATHER_ID – ID ključ očeta, ko gre za neznano leglo

USER_ID – ID lastnika

PLOT – opis ježa

ICON - bitna vrednost slike v PNG formatu

HEDGEHOG_CHARACTER – karakter ježa

STATE – status ježa (1 = normalno stanje, 2 = jež s prepisanim lastništvom)

OWNER – opisna vrednost lastnika, če ne obstaja v bazi uporabnikov

CERT – pot do certifikata v PDF obliki

Tabela »Litter« ima polja:

ID – ID ključ legla

NAME – ime legla

MOTHER_ID – ID ključ matere

FATHER_ID – ID ključ očeta

DATE_BREEDING – datum parjenja

DATE_EXPECTED – datum pričakovane kotitve

DATE_BIRTH – datum dejanske kotitve

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 11

Tabela »Contact« ima polja:

ID – ID ključ obvestila

NAME – ime osebe, ki obvešča

TELEPHONE – telefon osebe, ki obvešča

EMAIL – elektronski naslov osebe, ki obvešča

MESSAGE - sporočilo

DATE – datum sporočila

USER_ID – ID ključ uporabnika, ki sporočilo prejme

Tabela »Photo« ima polja:

ID – ID ključ fotografije

NAME – naslov fotografije

DATE – datum objave

HEDGEHOG_ID – ID ključ ježa

BAZNE PROCEDURE Za izvajanje procedur, ki bi na strani PHP jezika zahtevala preveč povezav, oziroma sistemskih sredstev, je bilo smiselno logiko napisati tako, da teče na sami bazi, mi pa dobimo vrnjen rezultat. Ugotavljanje, če ježa imata skupnega sorodnika, kateri to so, in v katerem kolenu je sorodstvena zveza, je procesno zahtevna operacija, katero sem tekom premisleka zamenjal iz rekurzivne v iterativni način preiskovanja. V ta namen so nastale 4 bazne procedure:

»hedgehog_father« in »hedgehog_mother«, ki kot vhodni parameter sprejme ID številko ježa, in zanj vrne ID številko očeta/matere, oziroma NULL, če oče/mati ne obstaja.

»Copy_tree« je edina rekurzivna metoda, ki za vhod sprejme ID številko ježa in v začasno tabelo zapiše vse znane starše za enega ježa, s pomočjo prvih dveh procedur.

»h_in_relation« pa sprejme ID številki dveh ježev, za katera poizvedujemo sorodstvo. Za vsakega se napolni svoja tabela, preko zgornje metode, na teh dveh tabelah pa se izvede SQL zahteva, ki vrne skupna sorodstva skupaj z sorodstveno razdaljo.

Primer izpisa bazne procedure h_in_relation: (Tabela 1 - primer je izveden na ježih, ki sta znotraj istega legla – imata isto mati ter očeta)

id d

35 1

86 1

33 2

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 12

31 2

88 2

89 2

100 3

24 3

39 3

91 3

92 3

93 3

95 4

94 4

96 5

105 5

Tabela 1: Primer izpisa preverjanja relacije (»ID« stolpec pove identifikacijsko številko ježa, »d« stolpec pa koleno sorodstvene zveze).

3.4. PROGRAMSKA LOGIKA

Zaradi boljše organizacije smo kodo organizirali v datoteke. Datoteka »libs« nosi glavne, oziroma skupne funkcionalnosti za portal. Tukaj sta najpomembnejši dve datoteki. Prva je »nastavitve.php«, ki nastavi spremenljivke, ki se navezujejo na bazo, Smarty nastavitve, ter osnovne šifrante aplikacije. Za delovanje potrebujemo nastaviti: Osnovne nastavitve: var $osnovna_pot = './'; //pot na katero se nanaša, privzeto je

enaka pot ali »./«

var $config_domena= 'beloprsi-jez.si'; //domena za portal

var $config_pot=''; //pot do aplikacije iz korena domene,

privzeto je enaka pot ali »«

Nastavitve baze: var $baza= 'hedgehog'; //ime podatkovne zbirke

var $streznik= 'localhost'; //ime strežnika, privzeto je isti

strežnik ali »localhost«

var $uporabnik=''; //ime uporabnika za dostop do baze

var $geslo= ''; //geslo uporabnika

var $save_path="img/"; //direktorijska pot, kamor se

shranjujejo slike

Druga datoteka je »funkcije.php«, ki deduje vse atribute prve datoteke. Razred »funkcije« je tudi osnova za prikaz vseh stvari. Strani morajo le pokazati do te

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 13

datoteke in jo inicializirati kot objekt za uporabo. Povezava z bazo in Smarty se tako avtomatično vzpostavita. Zaradi boljše preglednosti je PHP koda ločena od HTML kode za prikaz na brskalniku. PHP datoteke se nahajajo v korenski strukturi aplikacije, datoteke s predlogami za izgled pa z enakim imenom pod datoteko »templates« z končnico »*.tpl«. Primer klica razreda funkcije: $funkcije = new funkcije(); //inicializiramo razred funkcije

$funkcije->smarty->assign('hello','Hello world!'); //v Smarty

nastavimo variablo z ključem 'hello' na 'Hello world'

//can visit: admin

if($funkcije->user_level == 3) $funkcije->smarty-

>display('crop.tpl'); //če je prijavljen uporabnik

administrator, prikažemo predlogo »crop.tpl«

AVTENTIKACIJA IN AVTORIZACIJA Uporabnik pri postopku registracije ustvari svoj vpis v bazo (tabela »user«). Za varno shranjevanje gesla v bazi skrbi kodirna funkcija »SHA-1«, ki vrne 40 znakoven šestnajstiški izhod. Ta izhod se zapiše v bazo. Pri vsaki prijavi se primerja SHA-1 vnesenega gesla preko prijave (FORM) z že vnesenim SHA-1 geslom iz baze (polje »password«). PHP koda tako ustvari sejo, na ta način da brskalniku ustvari piškotek z vrednostjo PHPSESSID. PHP skripta za vsako REST zahtevo preveri, če je uporabnik še v bazi podatkov z enakimi ter pridobi nivo uporabniških pravic, če se geslo na bazi ujema z tistim, ki je bilo prijavljeno na sejo, sicer sejo izbriše – uporabnik se odjavi. Seja je veljavna 24 ur. LOKALIZACIJA Osnovna verzija je imela pomanjkljivost, saj so se besedila v predlogah vnašala direktno v Smarty predlogo. Ta način je onemogočal nadaljnjo možnost po enostavni lokalizaciji portala. V ta namen je bil uveden nov način – besedila so se vodila v ločenih datotekah. Kot najboljšo opcijo v PHP jeziku se izkaže njegova vključena funkcija za ta namen – gettext(). Ustvari se nova PO datoteka, ki se vodi na podlagi ključ – vrednost. Poskrbeti moramo za unikatne ključe, kamor potem vnesemo vrednost glede na jezik. To datoteko moramo prevesti v MO datoteko, najlažje z orodjem POEdit (POEdit, 2016). Ustvari se mapirna tabela, ki omogoča najmanj časovno zahtevno iskanje vrednosti – za podani ključ se izračuna HASH funkcija in s tem novim ključem se lažje najde rezultat. Hierarhija datotek je v našem primeru »libs/locale/«, kjer sta dve mapi, »sl_SI« in »en_GB« s PO in MO datotekami. PHP funkcija kot vhod dobi izbran jezik in ključ besedila, ter vrne besedilo za tak ključ. Potrebno je bilo dodati še blokovno funkcijo4 za Smarty, ki se iz predloge lahko enostavno pokliče z ukazom »{translate}ključ{/translate}«. Jezik lahko uporabnik zamenja s klikom na zastavico (Slika 6). Pri tej akciji se mu v piškotek zapiše izbran jezik za trenutno sejo, privzet pa je slovenski jezik.

4 Blokovna funkcija je funkcija, ki se v predlogah pokliče za interakcijo z PHP funkcijami. Funkcija ima obliko »function smarty_block_translate($params, $content, &$smarty, &$repeat)« vrača pa niz.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 14

Slika 6: Lokalizacija portala.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 15

3.5. UPORABNIŠKI VMESNIK

Pred samo izdelavo smo skicirali približne prikaze za najbolj ključne strani portala. Tak način dela nam je omogočil bolj intuitivno gradnjo in hiter vpogled v sam izgled.

3.5.1. NAČRTOVANJE

Pri načrtovanju uporabniškega vmesnika smo največ uteži dali na prikaz prilagojen resoluciji naprave. Pri testiranju in razvoju je bilo skoraj polovico vseh obiskov iz mobilnih naprav. S takšnim načinom razvoja smo dosegli najboljšo uporabniško izkušnjo. VSTOPNA STRAN Vstopna stran je tista, ki odloča, ali bo obiskovalec na spletni strani ostal, ali pa mu za ogled ni vzbudila dovolj zanimanja in bo stran zapustil. Za interaktivni prikaz glavnih informacij portala smo izbrali modul za menjavanje skrbno izbranih slik z osnovnimi informacijami. Nad tem modulom je glava portala, ki vsebuje naslov z logotipom in meni (Slika 7).

Slika 7: Struktura uporabniškega vmesnika vstopne strani.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 16

STRANI Z INFORMACIJAMI Vse osnovne informacije naj bi imele enotno obliko. Enotna oblika prinaša večjo preglednost strani. Obsega zgolj naslov s poglavji besedila, vsakemu poglavju pa desno pripada slika (Slika 8).

Slika 8: Struktura uporabniškega vmesnika strani z informacijam.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 17

RODOVNIK Izgled samega rodovnika smo skušali čimbolj poenostaviti. Pasji rodovniki so izgledali precej dobro, vendar ne popolnoma primerni za zgolj eno vrsto (pasmo). V ta namen smo izrisali izgled, ki bi vseboval dva zavihka, ježe z znanimi legli in ježe iz tujih, neznanih legel (Slika 9). Za ježe z znanimi legli je bilo smiselno grafično ločiti posamezna legla. Osnovne informacije legla bi se nahajale na vrhu tega območja, v ostalem območju pa bi bile slike ježev z imeni. V nadaljevanju smo dodali tudi indikatorje za spol in rodovniške značke.

Slika 9: Struktura uporabniškega vmesnika izgleda rodovnika.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 18

PODROBNI PRIKAZ Ta stran vsebuje ježa z osnovnimi informacijami ter povezavo do družinskega drevesa in opcijsko PDF rodovnika (Slika 10). Zaradi samega stanja so vidne morebitne informacije o genskih boleznih, da je portal bolj živ, pa smo dodali še možnost nalaganja slik.

Slika 10: Slika podrobnega prikaza ježa.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 19

RODOVNIŠKO DREVO Kot prvi preizkus smo prikazali rodovniško drevo, ki je po obliki podobno našemu, človeškemu rodovniškemu drevesu. Preizkus ni dosegel želenih rezultatov. Zaradi na videz enakega, a popolno drugačnega zanimanja informacij rodovnika, je tu najbolj smiseln prikaz v obliki vertikalnega binarnega drevesa, prikazan na Slika 11. Prvi list predstavlja ježa, za katerega se zanimamo, vsaka naslednja stopnja vej pa predstavlja novo koleno sorodstvene zveze. Za samo interaktivnost smo predvideli obarvanje vej pri prehodu z miško in s klikom na list povezavo do ježa.

Slika 11: Slika prikaza rodovniškega drevesa.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 20

3.5.2. IZVEDBA UPORABNIŠKEGA VMESNIKA PORTALA

Portal se deli na dva dela: statične izobraževalne in informativne vsebine5, ki so vključene, da novim uporabnikom predstavijo osnovne informacij o ježih in o skrbi zanje. Drugi in glavni del pa je evidenca rodovnikov in obveščanje o novostih legel. Za lepšo predstavitev uporabniškega vmesnika smo uporabili ogrodje Twitter Bootstrap (Twitter Bootstrap, 2016s), ki ponuja veliko gradnikov, ki so lepo oblikovani in pripravljeni za HTML5, ter obliko, ki se prilagaja različnim napravam na podlagi prikazane resolucije ekrana. Na ta način smo najprej prišli do osnovne strani, ki je najbolj pomembna, saj je navadno za uporabnika to predstavitev portala (Slika 12).

Slika 12: Osnovna stran portala. Naslovna stran torej na kratko opisuje vse kar portal ponuja, skupaj s slikovnim gradivom, da je uporabniku takoj jasno, kaj predstavljamo.

5 Statične izobraževalne in informativne vsebine je prispevala Maša Lenasi.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 21

Struktura menuja:

O ježih – statične vsebine z informacijami: o Splošno o Kako skrbeti za ježa o Barve o Zdravje o Vzreja ježev o Koristne povezave o Pogosto zastavljena vprašanja o Veterinarska oskrba

Uporabniki – prikaz uporabnikov: o Rejci o Lastniki ježev

Rodovnik – prikaz rodovnika ježev

Pričakovana legla – pričakovana legla v prihodnjih 3 mesecih

Prijava o Registracija

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 22

DINAMIČNI MENI Prvotni cilj je bil, da glava strani (meni) nosi zgolj kazalo strani z logotipom. Izkazalo se je, da je meni idealen prostor za menjavo lokalizacije. V ta namen smo poleg logotipa dodali dve zastavici – slovensko in angleško. Ker ima portal veliko akcij z uporabniki je tukaj dodan tudi modul za delo z uporabniki. Če uporabnik ni prijavljen, se mu v meniju izpišeta opciji »Prijava« in »Registriraj«, sicer pa »Urejanje« in »Odjava«. Ker je bilo končno število vseh strani z informacijami preveliko in stvar ni bila pregledna, smo jih razvrstili v smiselne spustne menije. S prvo izvedbo smo bili zadovoljni vse dokler nismo stran obiskali z mobilnikom, kjer je bil meni zaradi premajhne resolucije ekrana prevelik in bi uporabnik mogel uporabiti drsne puščice. Pri dobrem pregledu API-ja Bootstrapa smo ugotovili, da obstaja modul, ki meni dinamično prilagaja. Če je resolucija premajhna za lep prikaz pa menu skrči in ga v celoti ponudi kot spustni menu (Slika 13). Na ta način pri ekranih z majhno resolucijo meni ne zasede veliko prostora, obenem pa dobro opravi svojo vlogo. Kjerkoli na portalu smo, lahko preko omenjenega menija enostavno preidemo na drugo temo, ki nas zanima (Slika 14).

Slika 13: Meni se skrči v spustni meni lociran na desni.

Slika 14: Ob razširitvi menija se nam odpre celotno kazalo strani. STRANI Z INFORMACIJAMI

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 23

Tako za neprijavljene, kot prijavljene uporabnike, portal ponuja strani z informacijami. Te strani poskrbijo, da novi uporabniki lažje izvejo informacije o samih živalih in s samimi vprašanji ne obremenjujejo rejcev. Portal je z omenjenimi stranmi dobil še dodatno vrednost, saj uporabniku daje občutek, da je pomembno, da se bo le-ta pred nakupom živali o njej čim bolj izobrazil. Nastala je enotna oblika, ki je popolnoma enaka vnaprej definirani strukturi uporabniškega vmesnika (Slika 15). Ker je to ena izmed najbolj enostavnih strani je bilo oblikovanje tu najlažje. Uporabili smo obliko enostavne forme z naslovom in desno poravnano fotografijo (Slika 16). Sama oblika se prilagaja resoluciji uporabnika – če je resolucija premajhna, slika skoči pod besedilo – s tem je dovolj prostora za besedilo, ki bi se v primeru desno ležeče slike lomilo v več vrstic. Da smo to dosegli smo uporabili enostavne gradnike. Vsak element je tako dobil vsaj 2 nova razreda za CSS oblikovanje, ki mu pogojujeta obnašanje glede na resolucijo. Obstajajo značke XS, MD in LG. XS pomeni zelo majhno resolucijo – mobilnik, MD se navadno uporablja za osebne računalnike z starejšimi zasloni in LG za novejše zaslone (resolucija več kot 1280x1024). Pripadajoča številka pove delež ene vrstice, ki jo bo element zasedel. Skupen seštevek vrstice je 12, kar bi pomenilo, da je 6 točno čez polovico zaslona. Dinamični prikaz lahko na tak način zelo enostavno prilagodimo, saj bi na velikih ekranih element zasedel na primer celo vrstico, na majhnih resolucijah pa samo tretjino. Ker so to strani s statičnimi podatki, ki se ne bodo veliko spreminjali, gre večinoma za statične HTML strani. Tak način je tudi hitrejši za strežnik, saj ne izvaja težkih kalkulacij.

Slika 15: Primer oblikovanja dinamične postavitve

Slika 16: Primer statične strani z informacijami "Kako skrbeti za ježa"

.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 24

BARVE JEŽEV Ena izmed grafično najzahtevnejših strani je stran, ki nam pomaga pri določevanju barve našega ježa. Ker se ježe ne opisuje le glede barve bodic ampak glede kombinacij, je določanje barv za neizkušene rejce in uporabnike izjemno težko. Tako je nastala ideja o prikazu strani z tremi zavihki (Slika 17). Prvi zavihek bi nosil osnovne informacije o barvah ježa, kjer bi uporabnika tudi opozoril, na kaj vse mora gledati pri določevanju barve. Prvi zavihek je namenjen predvsem uporabnikom, druga dva pa sta bolj napredna in namenjena izkušenim uporabnikom in rejcem. Drugi zavihek je najobširnejši, saj nosi spisek informacij vseh možnih barvnih odtenkov. Ker je število teh odtenkov veliko in se z leti povečuje, je bilo tukaj smiselno urediti indeksiran prikaz. Na skrajni levi strani ekrana je tako razvrščen seznam barv, ki nam vedno ostanejo prikazane na vrhu strani (Slika 18). To nam ponuja izbor posameznih barv. Ob akciji miškinega klika pa nas ekran s kratko animacijo pomikanja zaslona vrže na izbrano barvo. Izpisani so določevalni kriteriji za posamezno barvo, zaradi boljšega razumevanja izrazov pa v naslovu še enkrat nosijo kratek opis (Slika 19).

Slika 17: Trije zavihki za določanje barv.

Slika 18: Indeksiran prikaz barvnih odtenkov.

Slika 19: Opis posameznih atributov.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 25

PRIKAZ REJCEV IN UPORABNIKOV Rejce in uporabnike je bilo smiselno ločiti v ločene prikaze, saj nas navadno zanima manj informacij o lastniku in več o rejcu. Zaradi narave samega portala smo se bolj poglobili v prikaz rejcev. Najprej moramo omeniti, da je bilo pred uvedbo portala samo stanje v Sloveniji zelo slabo, zasledili smo kar nekaj neodgovornih rejcev. Temu v izogib administrator našega portala skrbi, da o morebitnem novem rejcu zbere čimveč informacij in po temeljitem pregledu oceni ali uporabnik dosega potrebne kriterije. Šele nato uporabnika označi za rejca. Rejci z morebitno neodgovorno masovno vzrejo ali popolnoma neprimernimi pogoji za bivanje živali so bili odstranjeni iz portala. V ta namen je nastalo obvestilo »Vsi neustrezni rejci bodo odstranjeni, spodaj prikazanim je administrator pregledal podatke in odobril status«. Prikaz na Slika 20 prikazuje seznam rejcev, vsak rejec ima svojo vrstico. Posamezen rejec ima od statičnih podatkov prikazano osebno sliko, naslov ter možnost kontaktiranja preko portala. Kontakt preko portala je skoraj nepogrešljiva funkcija, saj smo po zadnjih podatkih ugotovili, da se skoraj vsi prvi kontakti zgodijo na tak način. Pod statičnimi podatki se avtomatično izpišejo vsi sedanji in morebitni pokojni ježi rejca. Tak način prikaza uporabniku ponudi vpogled to, za kakšen tip vzreje gre in za koliko ježev skrbi rejec. Prikaz samih uporabnikov, prikazan na sliki 21 je bolj preprost, saj ne potrebujemo toliko informacij. Tukaj gre za razporejanje treh uporabnikov v eno vrstico, saj je navadnih uporabnikov številčno več kot rejcev. Trenutno stanje je 188 uporabnikov in štirje rejci.

Slika 20: Prikaz rejcev.

Slika 21: Prikaz ostalih uporabnikov.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 26

PRIJAVA IN REGISTRACIJA Za registracijo mora uporabnik vnesti osnovne podatke. Zaradi varnosti pred zlorabo pred robotki6 je bil uporabljen postopek prepisa kode (Slika 22). Za preverjanje, da oseba ni robotek, sem uporabil skripto uporabnika »dapphp – secureimage« (Secure Image, 2016). Skripta deluje tako, da uporabniku na ekranu prikaže sliko, in v njej zapakirano skrito kodo, ki jo mora uporabnik prepisati. Zaradi slabih zmožnosti prepoznavanja besedila iz slike, je to kodo skoraj nemogoče strojno prebrati. Nadaljnja prijava poteka s kombinacijo elektronskega naslova in gesla (Slika 23).

Slika 22: Registracija.

Slika 23: Prijava.

6 Spam robotki – zlonamerne aplikacije, ki se registrirajo, da lahko na vnosnih obrazcih širijo reklamo za drugo dejavnost.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 27

OSNOVEN PRIKAZ RODOVNIKOV Prikaz rodovnika se deli na dve sekciji, ježe iz znanih legel in ježe iz neznanih legel. Prikaže se nam leglo in z njim podrejeni ježi (Slika 24). Ježi rodovniških staršev dobijo zlato značko. Besedilo je skrajšano na dolžino prostora vrstice pri prikazu. Namen te strani je enostaven pregled aktualnih legel. Celoten izgled se prilagaja resoluciji naprave, kar zagotovi preglednost informacij.

Slika 24: Osnoven prikaz rodovnikov.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 28

PRIKAZ PODROBNOSTI O JEŽU Na tem pregledu so izpisane vse informacije ježa, obsega pa tudi vso galerijo slik. Je sidrišče za uporabo bolj naprednih prikazov podrobnosti ježa (Slika 25).

Slika 25: Osnovne informacije ježa.

Interaktivni rodovnik se izriše zgolj z uporabo HTML in CSS. Uporabi se HTML značko nesortiranih seznamov (UL) ki ustvarijo binarno drevo prednikov. Za uporabo CSS atributov pa sem uporabil predlagane CSS atribute (CSS Family Tree, 2016). Rezultat je vertikalno binarno drevo, ki pa ni značilno za človeška družinska drevesa. Pri omenjenih družinskih drevesih so najmlajši potomci na dnu, tukaj pa na vrhu, saj nas vedno zanimajo le starši. Interakcija premikanja miške na območje ježa označi njegovo nadaljnjo sorodstvo, klik pa omogoča prikaz podrobnosti izbranega ježa (Slika 26).

Slika 26: Interaktivno družinsko drevo .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 29

Rejcem na portalu je omogočeno ustvarjanje rodovnika portala v obliki PDF datoteke (Slika 27). Ko se rodovnik ustvari, je viden vsem uporabnikom, ježu pa se izriše ustrezen status – zlata značka. PHP skripta pogleda v bazo za vse prednike ježa na podoben način kot pri interaktivnem rodovniku, le da je tukaj pregled horizontalno postavljen, kar je značilno za živalske rodovnike. Ustvarjanje rodovnika je popolnoma avtomatično, rejec klikne na akcijski gumb »Ustvari rodovnik portala«, strežnik pa ustvari PHP dokument. Za lažje oblikovanje sem uporabil odprtokodni PHP razred »tcpdf« (tcpdf, 2016). Izbral sem ga na podlagi enega izmed glavnih vrednosti »methods to publish some XHTML + CSS code, Javascript and Forms;« - kar pomeni, da sem lahko vso obliko naredil v HTML. Za najbolj zanesljivo oblikovanje se je izkazala uporaba tabel (<table>) z osnovnimi CSS atributi in nekaj funkcijami samega jedra ogrodja.

Slika 27: Družinsko drevo – dokument .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 30

UGOTAVLJANJE SORODSTVENE ZVEZE Za pomoč pri ugotavljanju sorodstvene zveze je bila uvedena funkcija, ki za dva poljubno izbrana ježa preveri morebitne skupne starše, in navede njihove podatke. Uporabnik izbere dva ježa za primerjavo, funkcija pa s pomočjo napisane bazne procedure vrne rezultat. Poišče vse skupne starše skupaj z sorodstveno oddaljenostjo. Običajno se pri živalih skupni predniki kontrolirajo vsaj 4 generacije nazaj. Rezultat je izpisan v opisni obliki, pove nam če sorodstvena zveza obstaja in katera je najbližja. Izpisana sta tudi rodovniška drevesa obeh ježev, skupni predniki pa so obarvani rdeče (Slika 28). Prva verzija procedure je rezultate primerjala popolnoma rekurzivno, kar pa bi ob velikem številu sorodstvenih zvez lahko privedla do obremenitve strežnika. V ta namen je nastala nova bazna procedura (»h_in_relation(h1_id, h2_id)«), ki je rekurzivno pridobila le zapise staršev obeh ježev, rezultat se je zapisal v dve začasni tabeli, rezultat pa se vrne kot konjunkcija tabel (z SQL ukazom JOIN). Ker se vsa logika dogaja na bazi poskrbimo za manj sistemskih rezusov.

Slika 28: Primerjava družinskih dreves .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 31

KONTAKTIRANJE Za kontaktiranje uporabnika ali administratorja strani se uporabi obrazec. Vnesti moramo svoje osnovne podatke in tako kot pri registraciji prepisati varnostno kodo (Slika 29). Uporabnik bo prejel elektronsko pošto z vsebino obvestila, obvestilo pa se shrani tudi na portalu, kjer je tudi najbolj enostaven način sporočanja med registriranimi uporabniki (Slika 30). Pri prejetih sporočilih je v menuju oznaka koliko novih sporočil je neprebranih. Sporočila je možno izbrisati, in če je uporabnik registriran, na sporočilo odgovoriti. Zapisi se vodijo v tabeli »contact«.

Slika 29: Obrazec za kontaktiranje .

Slika 30: Pregled sporočil uporabnika .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 32

POGOSTO ZASTAVLJENA VPRAŠANJA Zaradi zmanjšanja potrebe po stiku med administratorjem in uporabnikom, smo uvedli zavihek pogosto zastavljena vprašanja. Delijo na dve skupini: prva so vprašanja navezujoča se na ježe same, druga pa vprašanja glede funkcionalnosti portala (Slika 31). Kot osnovo za vprašanja o ježih smo vzeli najbolj pogosto zastavljena vprašanja iz Facebook skupine »Afriški beloprsi jež« (Facebook skupina: Afriški beloprsi jež, 2016). Druga sekcija je za nas bolj zanimiva. Tu so razložena pravila rodovnika, saj so nekatere posebnosti vpisa v rodovnik lahko laiku neznane, uvedene pa so bile iz varnostnih razlogov. Kot na primer, da uporabnik ne more dodati legla z materjo drugega lastnika. Uporabniški vmesnik je razdeljen na dva zavihka, odgovore na vprašanja se lahko razširi in skrči.

Slika 31: Pogosto zastavljena vprašanja.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 33

ADMINISTRACIJA Prijavljenim uporabnikom se na desni strani menuja namesto opcije »Prijavi se« in »Registriraj se«, prikaže opcija »Urejanje«, ki ponuja naslednje funkcije: »Moja legla«, »Moji ježi«, »Moja sporočila«, »Profil«, ter gumb odjava (Slika 32).

Slika 32: Menu za administracijo .

MOJA LEGLA Opcija »Moja legla« (Slika 33) je najbolj smiselna za rejce, saj omogoča najenostavnejše vnašanje podatkov, a zahteva točno znane in vnaprej urejene podatke o starših legla. Legla lahko dodajamo, urejamo ali pa jim dodajamo ježe. Legla lahko briše le administrator. Določamo jim očeta in mater, datum parjenja, pričakovan datum kotitve. Ko se ježi skotijo vnesemo še točen datum rojstva, ki se sedaj prikazuje namesto pričakovanega datuma kotitve. Za vnos datumskih polj si pomagamo z kontrolo jQueryUI – Datepicker (jQueryUI Datepicker, 2016), ki omogoča uporabniku lažji vnos – ob kliku na polje se izriše aktivni koledar (Slika 34).

Slika 33: Obrazec za upravljanje z legli .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 34

Slika 34: Obrazec za urejanje podrobnosti legla .

DODAJANJE IN UREJANJE JEŽA Pri dodajanju ali urejanju ježa se nam odpre forma (Slika 35), ki nam omogoča lažji vnos in urejanje. Vpišemo ali izberemo vse podatke, ki so znani o ježu. Če je jež vnesen v leglo, podatki o starših, leglu in rojstvu ostanejo zaklenjeni. Genetsko prenosljive bolezni (v Sloveniji zaenkrat samo WHS) se morajo ob prvih simptomih bolezni označiti, da ne bi prišlo do nadaljnjega parjenja obolele linije in s tem širjenja bolezni. Tudi tukaj vnos podatkov o datumih poenostavi komponenta za vnos datumskih polj (jQueryUI Datepicker, 2016). Možno je naložiti rodovnik v PDF obliki – tudi takim ježem se prikaže ustrezen status (zlata značka). Slike ježa se ureja v posebnem pregledu »Urejanje slik«.

Slika 35: Obrazec za urejanje ježa .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 35

UREJANJE SLIK Ena izmed težjih nalog je bila uvedba galerije slik ježev, in njihovo urejanje. Manjše različice slik ježev naj bi bile imele statično razmerje stranic in enako resolucijo, da je izgled seznama boljši. Avtomatsko rezanje teh slik ni vračalo zadovoljivih rezultatov, saj logika ni mogla vedeti, kje je glavni objekt, ki ga na sliki želimo prikazati. Uporabnik bi na nek način moral sam izbrati statično področje na sliki, za katerega želi, da se iz slike izreže. V ta namen je nastala dvonivojska logika nalaganja. Prvi korak predstavlja nalaganje slikovne datoteke preko HTML značke »FORM« (Slika 36). Brskalnik je sposoben zapakirati izbrano sliko in jo preko metode POST poslati na strežnik. Strežnik sliko pograbi in jo najprej shrani v resoluciji, ki je po stranici omejena na največ 800 točk (izvorna slika).

Slika 36: Obrazec za urejanje slik .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 36

Po tem koraku se na spletnemu obrazcu prikaže naložena (Slika 37). Z uporabo jQuery knjižnice in modula jCrop (jCrop, 2016) se prikaže orodje za obrezovanje slik, podobnega izgleda, kot smo ga vajeni iz drugih aplikacij (kot so Facebook, Paint,…). Uporabnik s pomočjo miške izbere poljubno področje na sliki – lahko nariše nov kvadratek, ali poveča trenutnega, področje pa je zaklenjeno na razmerje stranic. V realnem času poleg slike uporabnik vidi, kako bo izrezana slika izgledala (Slika 37Slika 36). Ob potrditvi se ustvari statična manjša različica slike resolucije 210x160px (90% JPEG kompresija). jQuery funkcija napolni vrednosti koordinat spodnjega levega oglišča označenega območja relativno na večjo sliko na strežniku. Zraven se pripiše višina in širina območja, da nadalje PHP funkcija enostavno izreže novo sliko in jo zapiše v JPEG slikovno datoteko. Informacija o sliki ježa se zapiše v bazo (tabela »photo«). Na ta način imamo na strežniku dve verziji slike, manjša slika se prikaže direktno na strani, večja pa ob akciji klika miške. Jež ima lahko več slik, ki se pokažejo v obliki galerije, posebnost pa je identifikacijska slika ježa. To je slika, s katero se jež predstavlja na osnovnih seznamih. Slika je manjše resolucije in kvalitete (128x128px, 60% JPEG kvaliteta kompresije7). Zaradi povprečne izmerjene velikosti približno 5kb je bilo najbolj ugodno, da se slike shranijo kar v podatkovno bazo v entiteto ježa (tabela »Hedgehog«, polje »Icon«).

Slika 37: Obrezovanje fotografije .

7 Kjer velja 100% najbolj in 1% najmanj kvalitetna slika.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 37

PRENOS LASTNIŠTVA Če ježa podarimo drugemu, je potrebno to evidentirati. Uporabnik lahko svoje ježe prenese drugemu registriranemu uporabniku, posledično ga ne more več urejati. V primeru, da uporabnika ni v bazi, se omogoči polje za prosti vpis podatkov novega lastnika. Pri omenjeni akciji se zamenja polje »owner« (lastnik) s ključem novega uporabnika (Slika 38). Potreba po tej funkciji se je pokazala v fazi zunanjega testiranja, saj smo želeli mladiče legel prepisati novim uporabnikom, ki skrbijo za njihove nadaljnje informacije. Administrator zaradi varnostnih razlogov in napak vnosa lahko ureja vse ježe.

Slika 38: Obrazec za prenos lastništva . PROFIL Za spreminjanje osebnih podatkov je nastal obrazec »profil« (Slika 39). Na obrazcu si uporabnik lahko nastavi osebno fotografijo, spreminja osebne podatke in zamenja geslo, kar je najpomembnejša funkcija te strani. Za zamenjavo je potrebno novo geslo vnesti dvakrat, da se uporabnik ne zmoti pri vnosu. Slika se shrani v JPEG formatu z 60% kompresijo v resoluciji 128x128px na entiteto uporabnika (tabela »user«) v podatkovni tip BLOB – binarni veliki objekt (angl. Binary Large Object).

Slika 39: Obrazec za urejanje profila .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 38

4. TESTIRANJE PROTOTIPA

4.1. INTERNO TESTIRANJE

Kot orodje za analizo sem uporabil funkcijo iz knjižnice Smarty (Smarty, 2016), ki nam omogoča pregled vrednosti spremenljivk v novem oknu strani (Slika 40). Za ugotavljanje skritih pomanjkljivosti in napak je bilo potrebno določiti osnovne in robne kombinacije primerov vnosnih podatkov. Prva so bila tehnična testiranja. Potrebno je bilo naložiti slikovne datoteke najbolj popularnih formatov – JPEG, PNG in BMP, kot tudi neželenih formatov – EXE. Pri tekstovnih vnosih je bilo potrebno preveriti onemogočanje HTML značk in SQL injekcij (angl. SQL Injection) in preveriti delovanje posebnih znakov - šumnikov. Pri uporabniškem vmesniku je bilo potrebno preveriti pravilen prikaz podatkov, predvsem pri administracijskem delu, saj so tam nekatera polja varovana, ali pa so soodvisna. Pomembno je bilo, da uporabnik ne more urejati nobenih podatkov drugih uporabnikov. Izvedli smo še test pošiljanja osebnih sporočil in avtomatskega obvestila na e-pošto uporabnika. Sledilo je testiranje vsebinskega dela. Najprej smo izvedli osnovni scenarij – vpis ježa, nekaj testnih legel ter pripis novim lastnikom. Pomembno je bilo, katere podatke lahko nov lastnik ureja – ureja lahko le ime, opis, datum smrti ter dodaja slike ali prisotnost gena, ki povzroča bolezen. Drugi podatki so lastniku zaklenjeni. Sledile so vse kombinacije staršev – tujih legel in znanih legel, legla z tujim očetom, in ustrezno skrivanje pokojnih živali pri dodajanju novih legel glede na status legla. Na omenjenih testnih primerih sem izvajal teste zmogljivosti, kjer sem ugotovil, da je izvedba primerjave sorodstvenih ježev trajala predolgo.

Slika 40: Pregled spremenljivk .

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 39

Metoda, ki je bila v prvi fazi uporabljena kot rekurzivni pregled sorodstvene zveze, se je izkazala za zelo potratno. Ta funkcija je za vsakega posameznika vedno znova pridobivala sorodstveno drevo tujega starša - rekurzivno. Potrebno je bilo izdelati rešitev, ki je vse znane sorodnike ježev pridobila le enkrat, jih zapisati v začasno tabelo. Nad tem dvema tabelama pa lahko izvajamo SQL ukaze – JOIN – nad indeksnimi polji ježev. Z uporabljeno metodo smo v enem primeru iz izvajanja ukaza iz 723 milisekund prišli na čas 61 milisekund. Uredili smo tudi poslovna pravila za prikaz in vnos podatkov.

4.2. SPLETNA OPTIMIZACIJA

Če želimo, da bi naše spletišče obiskalo čim več uporabnikov je potrebno poskrbeti, da bo naše spletišče čim bližje prvim zadetku iskanja preko spletnih iskalnikov. To dosežemo z več ukrepi. Prvi korak je pravilna uporaba HTML značk. Da bi to dosegli navadno uporabimo validator HTML kode, ki kodo pregleda in nas opozori na nepravilnosti. Popolnoma pravilna koda priskrbi večje možnosti, da bo naša stran na vrhu iskanja. Drugi korak je izbira pravih iskalnih ključev, izbira naslova opisa ter drugih meta značk. Te poskrbijo, kaj se bo pri iskanju uporabniku izpisalo v iskalnik. V ta namen smo dodali naslednje značke: Značka za opis: <meta name="description" content="Afriški beloprsi jež -

spletni portal za ljubitelje ježkov, najbolj prikupnih hišnih

ljubljenčkov. Vse, kar vas je o ježkih zanimalo. Vodenje

rodovnikov afriških beloprsih ježkov v Sloveniji ter informacije

o pričakovanih leglih.">

Značka za iskalne kluče: <meta name="keywords" content="Afriški beloprsi jež, Afriški,

beloprsi, jež, ježek, udomačeni jež, udomačeni, hišni

ljubljenček, žival, domača žival, rejci ježkov, rejci, ježkov,

ježka, ježki, nega, parjenje ježkov, parjenje, mladički,

mladiček, nakup ježka, kupiti ježka, prehrana ježka, prehrana,

vzreja ježkov, vzreja, reja ježkov, reja, vzrejanje ježkov,

vzrejanje">

Značka za avtorja: <meta name="author" content="Portal afriški beloprsi jež">

Poskrbeli smo tudi za čim več pojavitev našega portala po drugih spletiščih. V ta namen smo začasno sodelovali z drugimi podobnimi spletišči. Mi smo oglaševali njihov portal, oni pa nazaj našega. Z uporabo vseh zgoraj napisanih načinov nam je v nekaj mesecih uspelo priti do ključnega cilja, prvi zadetek v spletnem iskalniku Google.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 40

4.3. OBJAVA BETA VERZIJE NA SPLET

Ker smo bili s trenutno verzijo spletne aplikacije precej zadovoljni, je bilo portal smiselno objaviti na spletu. Link do spletne aplikacije smo dali na Facebook skupino »Afriški beloprsi jež« (Facebook skupina: Afriški beloprsi jež, 2016) in lastnike ter rejce pozvali k vpisu ježev. Naleteli smo na pozitiven odziv, saj se nam je pridružilo veliko uporabnikov ter rejcev. Spremljali smo komentarje, želje in morebitne napake, ki so jih javljali uporabniki, ter skušali portal še izboljšati. Največ komentarjev in pripomb sta prispevali rejki Katarina Dobršek In Barbara Narat Polanc. Dodali smo nekaj pogosto zastavljenih tehničnih vprašanj, ki uporabnikom razlagajo, kako naj bi potekalo urejanje ježev v posebnih primerih. Zaradi ugotovitve, da je večina uporabnikov funkcijo spregledala, smo sporočila dodali na same vnosne ekrane, da uporabnika vodijo preko postopka. Postopek smo tako poenostavili do te mere, da noben uporabnik ni več imel težav. V tej fazi je bilo večino popravkov na uporabniškem vmesniku, pri vsebinskem pa smo dodali še poseben status ježa – jež z rodovnikom iz tujine.

4.4. UGOTOVITVE TESTIRANJ

Portal »Afriški beloprsi jež« sem primerjal s portalom kinološkega društva, ki se prav tako ukvarja z rodovniki živali (Kinološka zveza Slovenije, 2016). Njihova uvodna stran ima povprečni čas nalaganja 3.2 sekunde, portal »Afriški beloprsi jež« pa zgolj 0.7 sekund. Pri pregledu malo bolj zahtevnih strani je bilo na kinološkem izmerjeno 4.4 sekunde (stran »sodniki«) pri portalu afriški beloprsi jež pa 0.6 sekund (stran »pregled uporabnikov«). Rezultati so bili izmerjeni na ADSL internetu ponudnika Telemach, hitrosti 10mbit/s. Odzivi našega portala bi bili lahko še boljši, saj so strojne komponente našega strežnika zastarele, prav tako pa povezava ni optimalna – optični internet operaterja T2, povezava 100/10 mbit. Taki časi so najverjetneje zato, ker njihov portal za osnovo uporablja Wordpress (Wordpress, 2016), naš portal pa za osnovo ne uporablja nikakršnega javnega CMS sistema. Vso kodo sem napisal sam in prilagodil funkcijo za najmanjšo časovno zahtevnost. Z nekaj truda smo dosegli tudi optimizacijo našega portala in visoko razvrstitev pri najbolj znanih svetovnih iskalnikih, saj smo prvi zadetek na spletnem brskalniku Google. Mesečno nam to prinese približno 550 sej, oziroma 2500 ogledov strani (Slika 41).

Slika 41: Statistika obiskov (Google analytics, 2016).

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 41

4.5. OBJAVA PRVE STABILNE VERZIJE

Prva stabilna verzija je presegla prvotna pričakovanja. Prav vse rejke so umaknile svoje oglase za oddajo ježev iz spletnih oglasnikov, saj so dobile dovolj zanimanja preko portala. Ustvarilo se je dodatno zanimanje za ježe, saj je bila to prva slovenska stran, ki je živali predstavila, hkrati pa morebitne kupce povezala z rejci. V veliko zadovoljstvo je bilo tudi generiranje rodovnikov portala, saj so rejci lahko tudi v pisni obliki dali oprijemljiv dokument s podatki ježa. Na Facebook skupino »Afriški beloprsi jež« (Facebook skupina: Afriški beloprsi jež, 2016) smo še zadnjič pozvali vse lastnike ježev, da napravijo vpis ježev, da bo sledljivost boljša. Tako smo dosegli tudi diskreditacijo ostalih ježev rejcev, ki podatkov o starših niso želeli deliti. Na ta način smo ohranili čiste linije zdravih ježev in rešili problem, zaradi katerega je portal nastal. 30.7.2016 pa je bilo rojeno prvo leglo druge generacije ježev, ki so bili skoteni v času obratovanja portala.

4.6. PREDELAVA NA ANGULAR JS

Naslednja večja faza obstoječe rešitve bo vključitev orodja AngularJS (AngularJS, 2016). Pri takem ogrodju še bolj ugodno vplivamo na čas nalaganja spletišča, kot tudi na razbremenitev strežnika. Strežnik nam podatke vrača kot spletne servise z JSON podatki. Ostala logika za prikaz in osnovno urejanje se samo enkrat prenese do brskalnika. Ocena zmanjšanja količine podatkov v eni seji je najmanj trideset odstotna. Z januarjem 2017 smo začeli portal na razvojnem okolju predelovati na Angular.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 42

5. ZAKLJUČKI

5.1. DOSEŽENI CILJI

Ker do sedaj ni obstajala evidenca parjenja ježev, je v Sloveniji prihajalo do parjenja med bližnjimi sorodniki. Ježi so podlegali genetskim boleznim, situacija se je iz meseca v mesec slabšala. Rejci so v Slovenijo pripeljali popolnoma nova legla, primerna za parjenja in genetsko zelo pestra. Potreba po kakovostni evidenci je bila tako še večja. Dosegli smo prvotno zastavljen cilj – digitalno vpisovanje rodovnika. Portal ponuja popolno rešitev urejanja rodovnikov afriških beloprsih ježev. Ravno tako služi rejcem kot izvrstno spletno orodje za vodenje evidence o podatkih njihovih ježev. Rejci lahko na portalu hranijo informacije o datumu rojstva, starosti ježa, njegovih potomcih in vse potrebne podatke o dosedanjih leglih. Spletni portal ponuja vse potrebne informacije, ki bi znale zanimati bodoče ali obstoječe lastnike ježev. Presenečeni smo bili nad številnim in pozitivnim odzivom obiskovalcev. Več ali manj vsi ježi, ki jih zasledimo na Facebook strani imajo zapis v portalu. Izpolnili smo tudi cilje naših ključnih uporabnikov – rejcev, ki s pomočjo portala lažje poskrbijo za genetsko pestrost, izboljšajo preventivo bolezni, ter predvsem lažje predstavijo ježe novim lastnikom. Poseben namen je dosegel tudi generator PDF rodovnikov, saj novim lastnikom prinese upravičen občutek verodostojnosti podatkov. S spletno optimizacijo smo dosegli prvi zadetek na iskalniku Google, kar je prineslo veliko novih uporabnikov. Trenutno je situacija taka, da je že samo preko portala povpraševanje o ježih večje, kot pa število novih živali. Zelo dober občutek imajo tudi rejci, saj novi lastniki redno objavljajo slike odraslih mladičev in s tem zagotovijo določene nujno potrebne povratne informacije.

5.2. ZADOVOLJSTVO UPORABNIKOV

Najboljša oseba za povratne informacije je bila vsekakor Maša Lenasi, saj je sodelovala že v idejni in vsebinski zasnovi. Z svojimi štirimi ježi Zojo, Ruby, Lili in Oliverjem, ter pokojnima Sonicom ter Tails je vpisala že kar 13 legel. Podala mi je naslednje mnenje: Pri urejanju spletnega portala »Afriški beloprsi jež« sem sodelovala že od samega začetka. Ob ustanovitvi sem kot rejka prispevala potrebne vsebine, ki se nanašajo na oskrbo in prehrano ježa, opremo kletke, barve in lastnosti ježev. V času nastanka portala smo bili v Sloveniji aktivni le trije rejci afriških beloprsih ježev, zato je bilo dostopnih le malo informacij o ježih v slovenskem jeziku, kar je seveda predstavljalo težavo. Naslednja ovira s katero smo se srečali rejci je bilo pomanjkanje vodenja evidenc o rodovnikih afriških beloprsih ježev v Sloveniji. Spletni portal »Afriški beloprsi jež« je bil zasnovan kot odgovor na naše naraščajoče težave. Odkar smo ustanovili spletni portal »Afriški beloprsi jež« vodim boljšo evidenco o svojih ježih ter leglih. Podatki so vneseni hitro, ravno tako ni možnosti, da bi se kadarkoli izgubili. Sedaj lažje načrtujem svoja bodoča parjenja, saj imam na enem mestu zbrane vse potrebne podatke. Všeč mi je, da lahko spremljam razvoj svojih

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 43

oddanih mladičev, saj novi lastniki na portalu vestno sodelujejo in objavljajo fotografije. Največja prednost spletnega portala pa je seveda evidenca rodovnikov vseh ježev v Sloveniji. S tem je uporabnikom, predvsem pa rejcem, omogočen vpogled v zgodovino ježev in seznanitev z njihovimi predniki. Izbira primernega partnerja za parjenje je sedaj veliko lažja, dosegli smo tudi večjo genetsko raznolikost ježev v Sloveniji. Ravno tako pa bi se ob morebitnem izbruhu genetske bolezni WHS hitro odzvali in izsledili problematične ježe ter jih nemudoma odstranili iz nadaljnje vzreje.

5.3. MOŽNOSTI ZA NADALJNJI RAZVOJ

Portal se je izkazal za zelo uporabnega glede vpisa afriških beloprsih ježev. Enostavno bi bilo aplicirati celoten sistem za druge živalske vrste – na primer vpis pasjih rodovnikov, ali pa z malo širšo dopolnitvijo, vodenje rodovnika za več vrst živali – kot centralni evidenčni portal vseh rodovnikov. Glede na majhen vložek in velik doprinos je smiselna uvedba te rešitve ne glede na vrsto živali. V prihodnosti bo portal deležen še aplikacije foruma zaradi spodbujanja več komunikacije med uporabniki in rejci. V primeru zadostnih donacij pa je planirana selitev na boljši strežnik – najem. Kot že prej omenjeno je v postopku razvoj nove aplikacije s pomočjo orodij CakePHP(CakePHP, 2016) in AngularJS (AngularJS, 2016). Nova rešitev bo še lažja za urejanje in dodajanje novih sprememb, obenem pa bo razbremenila strežnik in privarčevala z podatkovnim prenosom.

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 44

LITERATURA IN VIRI

AngularJS: AngularJS is what HTML would have been, had it been designed for building web-apps – pridobljeno 8.9.2016 na: https://angularjs.org/

CakePHP: CakePHP (2016) - CakePHP is an open-source web, rapid development framework that makes building web applications simpler, faster and require less code. Pridobljeno 8.9.2016 na https://cakephp.org/

CSS Family tree: CSS Family tree (2016) - Learn to display organizational data or a family tree just using CSS, without any flash or javascript, Pridobljeno 8. 9. 2016 na https://tcpdf.org/

Datepicker | jQuery UI (2016 The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Pridobljeno 8. 9. 2016 na https://jqueryui.com/datepicker/

Facebook skupina: Afriški beloprsi jež (2016) - stran namenjena ljubiteljem in lastnikom ariških beloprsih ježkov, Pridobljeno 8. 9. 2016 na https://www.facebook.com/groups/605687552800951

Gedit: Gedit is the GNOME text editor. Pridobljeno 8. 9. 2016 na https://wiki.gnome.org/Apps/Gedit

Google analytics (2016). Pridobljeno 20. 12. 2016 na https://www.google.com/analytics/

Hedgehog Central: Hedgehog Central for hedgehog hobbyists and fanciers. Helpful information on care, keeping, colours, showing, the show standard, clubs, the IHA, rescues and more. Pridobljeno 8.9.2016 na http://www.hedgehogcentral.com/

Kinološka zveza slovenije (2016) - Kinološka zveza Slovenije: Vzreja, Kinološka tržnica, Novice, Obvestila Pridobljeno 8. 9. 2016 na http://www.kinoloska.si/

MariaDB: One of the most popular database servers. Made by the original developers of MySQL. (2016) – pridobljeno 8.9.2016 na https://mariadb.org/

PHP: PHP Manual - Manual (2016) Complete and hyperlinked manual documents and explains all elements of PHP. Includes FAQ section and user comments. Pridobljeno 8. 9. 2016 na http://php.net/manual/en

phpMyAdmin: phpMyAdmin. A tool written in PHP intended to handle the administration of MySQL over the WWW. Pridobljeno 8. 9. 2016 na https://www.phpmyadmin.net/

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 45

Poedit: Poedit Gettext Translations Editor (2016) Poedit translations editor. The best way to translate apps and sites. Pridobljeno 8. 9. 2016 na https://poedit.net/

Smarty: PHP Template Engine (2016) A library that allows the creation of HTML templates that are imported and used in PHP scripts to ease the process of web page design and includes caching. Pridobljeno 8. 9. 2016 na http://www.smarty.net/

TCPDF: TCPDF (2016) - Open source PHP class for generating PDF files on-the-fly without requiring external extensions, Pridobljeno 8. 9. 2016 na https://tcpdf.org/

Twitter Bootstrap - The world's most popular mobile-first and responsive front-end framework. (2016) Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Pridobljeno 8. 9. 2016 na https://getbootstrap.com/

Ubuntu Server: Ubuntu is an open source software platform that runs everywhere from the smartphone, the tablet and the PC to the server and the cloud. Pridobljeno 8. 9. 2016 na http://www.ubuntu.com/download/server

Wordpress: The easiest way to create a website or blog – pridobljeno 8.9.2016 na https://wordpress.com/

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 46

KAZALO SLIK

Slika 1: Slika rodovnika Kinološke Zveze (Kinološka zveza Slovenije, 2016). ........ 3 Slika 2: Slika dolgoušesnega ježa (Hedgehog Central, 2016). .......................... 4 Slika 3: Afriški beloprsi jež (Vir: lasten, 2015). .......................................... 5 Slika 4: Kletke ježev (Vir: lasten, 2015). .................................................. 6 Slika 5: Podatkovni model aplikacije. ..................................................... 9 Slika 6: Lokalizacija portala. ............................................................... 14 Slika 7: Struktura uporabniškega vmesnika vstopne strani. ........................... 15 Slika 8: Struktura uporabniškega vmesnika strani z informacijam. .................. 16 Slika 9: Struktura uporabniškega vmesnika izgleda rodovnika. ....................... 17 Slika 10: Slika podrobnega prikaza ježa. ................................................. 18 Slika 11: Slika prikaza rodovniškega drevesa. ........................................... 19 Slika 12: Osnovna stran portala. ........................................................... 20 Slika 13: Meni se skrči v spustni meni lociran na desni. ................................ 22 Slika 14: Ob razširitvi menija se nam odpre celotno kazalo strani. .................. 22 Slika 15: Primer oblikovanja dinamične postavitve ..................................... 23 Slika 16: Primer statične strani z informacijami "Kako skrbeti za ježa" ............. 23 Slika 17: Trije zavihki za določanje barv. ................................................ 24 Slika 18: Indeksiran prikaz barvnih odtenkov. ........................................... 24 Slika 19: Opis posameznih atributov. ..................................................... 24 Slika 20: Prikaz rejcev. ..................................................................... 25 Slika 21: Prikaz ostalih uporabnikov. ..................................................... 25 Slika 22: Registracija. ....................................................................... 26 Slika 23: Prijava. ............................................................................. 26 Slika 24: Osnoven prikaz rodovnikov. ..................................................... 27 Slika 25: Osnovne informacije ježa. ...................................................... 28 Slika 26: Interaktivno družinsko drevo . .................................................. 28 Slika 27: Družinsko drevo – dokument . .................................................. 29 Slika 28: Primerjava družinskih dreves . ................................................. 30 Slika 29: Obrazec za kontaktiranje . ...................................................... 31 Slika 30: Pregled sporočil uporabnika . ................................................... 31 Slika 31: Pogosto zastavljena vprašanja. ................................................. 32 Slika 32: Menu za administracijo . ........................................................ 33 Slika 33: Obrazec za upravljanje z legli . ................................................ 33 Slika 34: Obrazec za urejanje podrobnosti legla . ...................................... 34 Slika 35: Obrazec za urejanje ježa . ...................................................... 34 Slika 36: Obrazec za urejanje slik . ....................................................... 35 Slika 37: Obrezovanje fotografije . ....................................................... 36 Slika 38: Obrazec za prenos lastništva . .................................................. 37 Slika 39: Obrazec za urejanje profila . ................................................... 37 Slika 40: Pregled spremenljivk . ........................................................... 38 Slika 41: Statistika obiskov (Google analytics, 2016). .................................. 40

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 47

KAZALO TABEL

Tabela 1: Primer izpisa preverjanja relacije. ........................................... 12

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Dean Kosmač: Spletni portal »Afriški beloprsi jež« stran 48

KRATICE IN AKRONIMI

BITNA SLIKA datoteka končnice .iso, ponazarja bitno kopijo drevesne strukture

BLOB tip podatka na entiteti, ki sprejme bitno vrednost

CSS kaskadne stilske podloge

EXE poganljiva datoteka

HASH rezultat zgoščevalne funkcije

HTML5 jezik za označevanje nadbesedila verzije 5

ID identiteta, navadno v kontekstu relacije v podatkovni bazi

JQUERY javascript knjižnica

JSON notacija javascripta za objekte

LAMP Operacijski sistem Linux, strežnik Apache, baza MariaDB, PHP modul

PDF standard za izmenjavo elektronskih dokumentov

JPG najbolj razširjena slikovna formata

REST spletni servisi

SHA-1 Zgoščevalna funkcija

SQL strukturirani povpraševalni jezik za delo z podatkovnimi bazami

WHS Wobbly hedgehog syndrome

degenerativna bolezen, podobna človeški multipli sklerozi