Prototip spletnega portala za gasilska druˇstva

(1)

Univerza v Ljubljani

Fakulteta za raˇ cunalniˇ stvo in informatiko

Tilen Moˇcnik

Prototip spletnega portala za gasilska druˇ stva

DIPLOMSKO DELO

VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE

RA ˇCUNALNIˇSTVO IN INFORMATIKA

Mentor : viˇs. pred. dr. Igor Roˇ zanc

Ljubljana, 2022

(2)

rezultatov diplomske naloge je potrebno pisno privoljenje avtorja, Fakultete za raˇcunalniˇstvo in informatiko ter mentorja.

Besedilo je oblikovano z urejevalnikom besedil L^ATEX.

(3)

Kandidat: Tilen Moˇcnik

Naslov: Prototip spletnega portala za gasilska druˇstva

Vrsta naloge: Diplomska naloga na visokoˇsolskem programu prve stopnje Raˇcunalniˇstvo in informatika

Mentor: viˇs. pred. dr. Igor Roˇzanc

Opis: V diplomski nalogi predstavite naˇcrtovanje in razvoj prototipa spletnega portala za gasilska druˇstva, ki je namenjen evidentiranju gasilcev, opreme, vozil in prostorov gasilskega druˇstva. V ta namen najprej opre- delite specifiˇcne zahteve in preuˇcite nekaj podobnih reˇsitev. Pri naˇcrtovanju zasnujte modularno reˇsitev, ki jo bo mogoˇce preprosto nadgrajevati in pove- zovati. Reˇsitev primerjajte z obstojeˇcimi reˇsitvami ter jo preverite v praksi na gasilskem druˇstvu.

(4)

(5)

Zahvala mentorju viˇs. pred. dr. Igor Roˇzanc za vso pomoˇc in za vse nasvete pri izdelavi diplomske naloge.

Zahvaljujem se tudi druˇzini za vso podporo.

(6)

(7)

Kazalo

Povzetek Abstract

1 Uvod 1

1.1 Motivacija . . . 1

1.2 Cilji . . . 2

1.3 Struktura diplomske naloge . . . 2

2 Podobne reˇsitve 3 2.1 Vulkan . . . 4

2.2 Itemit . . . 9

3 Uporabljena orodja in tehnologije 13 3.1 Tehnologije . . . 14

3.1.1 Jezik za oznaˇcevanje nadbesedila (HTML) . . . 14

3.1.2 Kaskadne slogovne predloge (CSS) . . . 15

3.1.3 Ogrodje Laravel . . . 17

3.1.4 Javascript ogrodje Vue.js . . . 22

3.1.5 Ogrodje Bootstrap . . . 23

3.1.6 Podatkovna baza MySQL . . . 25

3.2 Orodja . . . 26

3.2.1 Urejevalnik Visual Studio Code . . . 26

3.2.2 Orodje HeidiSQL . . . 27

(8)

3.2.5 Orodje PowerDesigner . . . 31

4 Razvoj portala Gasilski-dom.com 33 4.1 Opis problema . . . 34

4.1.1 Funkcionalne zahteve . . . 34

4.1.2 Nefunkcionalne zahteve . . . 35

4.2 Naˇcrt . . . 36

4.2.1 Vloge . . . 36

4.2.2 Moduli . . . 36

4.2.3 Podatkovni model . . . 37

4.2.4 Modeli v ogrodju Laravel . . . 37

4.3 Sestava spletnega portala . . . 39

4.3.1 Vstopna stran . . . 40

4.3.2 Registracija in prijava . . . 40

4.3.3 Nadzorna ploˇsˇca portala . . . 41

4.3.4 Spletna stran za urejanje gasilcev . . . 43

4.3.5 Spletni strani za urejanje vozil in prostorov . . . 43

4.3.6 Spletna stran za urejanje opreme . . . 44

4.4 Dodajanje skrbnikov druˇstva . . . 45

4.5 Zakljuˇcek . . . 47

5 Analiza 49 5.1 Kriteriji . . . 49

5.2 Ocene reˇsitev . . . 50

5.2.1 Vulkan . . . 50

5.2.2 Itemit . . . 50

5.2.3 Gasilski-dom.com . . . 51

5.3 Primerjava . . . 51

6 Sklepne ugotovitve 53

(9)

Viri 57

(10)

(11)

Seznam uporabljenih kratic

Kratica Angleˇsko Slovensko

GZS Gasilska Zveza Slovenije

DBMS Database Management System sistem za upravljanje podatkovnih baz

HTML Hyper Text Markup Language jezik za oznaˇcevanje nadbesedila CSS Cascading Style Sheets kaskadne slogovne predloge PHP Hypertext Preprocessor skriptni jezik

MVC Model View Controller model-pogled-krmilnik SPA Single Page Applications enostranske aplikacije

SQL Structured Query Language strukturirani povpraˇsevalni jezik

CSV Comma Separated Values datoteka z vrednostmi, loˇcenimi z vejico

SPIN Sistem za Poroˇcanje o Interven-

cijah in Nesreˇcah

GPS Global Positioning System globalni sistem pozicioniranja SASS Syntactically Awesome Style

Sheets

WHATWG Web Hypertext Application Te- chnology Working Group

delovna skupina za spletno tehnologijo

W3C World Wide Web Consoritum konzorcij svetovnega spleta

(12)

(13)

Povzetek

Naslov: Prototip spletnega portala za gasilska druˇstva Avtor: Tilen Moˇcnik

Diplomska naloga predstavlja naˇcrtovanje in razvoj prototipa spletnega portala, ki je namenjen evidentiranju gasilske opreme, gasilcev, vozil in prostorov gasilskih druˇstev v Sloveniji. Spletni portal je bil sprva namenjen le evidentiranju opreme ˇclanov gasilskega druˇstva. Po realizaciji zaˇcetne ideje pa je postalo jasno, da bi bilo uporabno slediti celotni opremi v gasilskem druˇstvu, zato smo dodali ˇse upravljanje z vozili in prostori. Portalu smo na koncu dodali ˇse izpis in izvoz podatkov gasilskih ˇclanov s preteˇcenimi zdravniˇskimi pregledi in vozil s preteˇcenimi tehniˇcnimi pregledi.

Spletni portal je zasnovan na MVC arhitekturi, za njegovo realizacijo pa smo uporabili PHP ogrodje Laravel, javascript knjiˇznico Vue.js in MySQL.

Primerjava s podobnimi reˇsitvami je pokazala, da obstojeˇci sistemi, ki podpi- rajo delo s podatki v gasilskih domovih, ne vkljuˇcujejo zadovoljivega sledenja opremi. Medtem pa so sistemi, ki so specializirani za sledenje opremi, pre- dragi in v veˇcini primerov tudi preobseˇzni za uporabo v gasilskih druˇstvih.

Prototip spletnega portala je trenutno v fazi aktivnega testiranja v gasilskem domu.

Kljuˇcne besede: gasilstvo, spletni portal, upravljanje druˇstva, Laravel, Vue.js.

(14)

(15)

Abstract

Title: Prototype of a web portal for fire departments Author: Tilen Moˇcnik

The thesis presents the planning and development of a web portal intended for the registration of firefighting equipment, firefighters, vehicles and premises of fire stations in Slovenia. Initially, the web portal was intended to record the equipment of members of the fire stations. After the implementation of this, it became clear it would be useful following all the equipment in the fire station as well, and a component part for vehicle and space management was added to the web portal. Finally, a printout and export of data of firefighters with expired medical examinations and vehicles with expired technical examinations were added too.

The web portal is designed using MVC architecture. It is implemented in PHP framework Laravel and uses javascript library Vue.js and MySQL.

A comparison with similar solutions showed that a system to support data handling in fire brigades does not include good enough equipment tracking.

Meanwhile, systems that specialize in tracking equipment are too expensive and in most cases too extensive to use in fire brigades. The prototype of the web portal is currently active testing in the fire station.

Keywords: firefighting, web portal, management, Laravel, Vue.js.

(16)

(17)

Poglavje 1 Uvod

Vpliv hitrega razvoja tehnologije je v zadnjih desetletjih moˇcno vplival na naˇs naˇcin ˇzivljenja. Hiter razvoj je vplival tudi na gasilstvo, kjer so se razvila nova orodja in strategije za posredovanja ob nesreˇcah. Tako na primer poteka reˇsevanje osebe iz vozila zaradi uporabe sodobnih pripomoˇckov danes nekoliko drugaˇce kakor je to potekalo v preteklosti. Poleg tega pa se ob nesreˇcah sreˇcujemo tudi s teˇzavami, ki jih moderna tehnologija prinaˇsa (npr. poˇzar baterije elektriˇcnega avtomobila, poˇzar stavbe s sonˇcnimi celicami itd.). Vse to je pripeljalo do tega, da imamo danes gasilci veˇc osebne in tudi skupne gasilske opreme. Veˇc opreme pa pomeni tudi veˇcji organizacijski zalogaj, ne nazadnje tudi s sledljivostjo vseh uporabljenih sredstev.

Leta 1999 je bil v ta namen zasnovan enotni informacijski sistem za vsa gasilska druˇstva v Sloveniji imenovan GAS2000 [11]. To je bil predhodnik portala Vulkan [48], ki je v uporabi ˇse danes.

1.1 Motivacija

Portal Vulkan sluˇzi kakor vmesnik med informatikom v gasilskem druˇstvu in podatkovno bazo, ki zajema podatke iz gasilskih druˇstev. Portal je nameˇsˇcen na centralnemu streˇzniku GZS [49]. Glavne funkcije sistema so upravljanje s ˇclani gasilskega druˇstva, upravljanje z opremo ter organizacija gasilskih

1

(18)

izobraˇzevanj in tekmovanj. Ceprav sistem podpira vse navedene funkcije,ˇ pa le-te ne omogoˇcajo dodeljevanja opreme posameznim gasilcem. To je bil prvi razlog, da smo zaˇceli razmiˇsljati o implementaciji lastnega portala, ki bi ustrezneje zadovljil potrebe gasilskega druˇstva.

1.2 Cilji

Cilj diplomske naloge je izdelava spletnega portala, ki bi omogoˇcal nadzor nad opremo, vozili in ˇclani druˇstva. To ˇzelimo doseˇci z uˇcinkovito evidenco teh elementov in moˇznostjo dodeljevanja opreme gasilcem, vozilom ali pro- storom v gasilskem domu. Poleg tega mora biti portal zasnovan modularno za nadaljne nadgradnje. Portal mora biti prav tako primeren za mobilne naprave, saj tako olajˇsamo delo informatikom pri popisu opreme v gasilskem domu. Med razvojem smo reˇsitev testirali sami, prototip pa nato namestili ˇse na raˇcunalniku v gasilskem domu, da bo tako na voljo za testiranje tudi ostalim uporabnikom.

Glavni cilj sistema ni nadomestiti sedanji sistem Vulkan, temveˇc odpraviti probleme ki jih ta ne reˇsuje oziroma jih ne reˇsuje dovolj dobro.

1.3 Struktura diplomske naloge

V diplomski naloga si bomo v drugem poglavju najprej ogledali podobne reˇsitve, ki ˇze obstajajo za ta problem. V tretjem poglavju je pregled vseh orodij in tehnologij, ki so uporabljene pri izdelavi diplomske naloge. Sledi predstavitev portala Gasilski-dom.com, kjer je podrobneje predstavljena izdelava in konˇcni izgled naˇsega portala. V petem primerjamo naˇso reˇsitev z ostalimi. V zakljuˇcenem so navedene moˇzne nadgradnje poratala, predvidena prihodnost projekta in zakljuˇcne misli.

(19)

Poglavje 2

Podobne reˇ sitve

Obstaja veˇc sistemov, ki so z doloˇcenega vidika podobni naˇsemu. Primeri takih sistemov so: SkyHook [42], Jira [17], AssetSonar [3] in drugi. Teh sistemov si ne bomo podrobneje ogledali, saj so si med seboj podobni. Ogle- dali si bomo predstavnika tovrstnih sitemov Itemit [16], ker ni namenjen doloˇcenemu podroˇcju in je odliˇcen predstavnik primera dosedaj implementi- ranih reˇsitev.

Poleg Itemit-a si bomo podrobneje pogledali ˇse sistem Vulkan. Vulkan [48]

smo za primerjavo izbrali zato, da izpostavimo obseˇznost sistemov ki se uporablja v gasilskih druˇstvih in da izpostavimo nekaj njegovih dobrih in slabih lastnosti. Itemit sistem spada v isto kategorijo sisteme, ki smo jih naˇstevali na zaˇcetku. To so plaˇcljivi sistemi namenjeni sledenju opreme. Itemit smo izbrali zato ker je namenjen za sledenje poljubnih predmetov, medtem ko je na primer AssetSonar specializiran za sledenje opreme uporabljene v infor- macijskih tehnologijah. Take vrste sistem smo izbrali za primerjavo zato, da lahko primerjamo naˇs sistem z sistemi, ki so na trgu in bi z njimi lahko reˇsili probleme sistema Vulkan.

3

(20)

Slika 2.1: Logotip sistema Vulkan

2.1 Vulkan

Sistem Vulkan [48] je bil razvit za potrebe Gasilske zveze Slovenije in sicer za vodenja evidence, obvladovanje dokumentov in naˇcrtovanje gasilskih usposabljanj in nabave opreme v prostovoljnih gasilskih organizacijah. Sistem je razvilo podjetje Logos [23] leta 2003, od takrat naprej pa ga vzdrˇzuje GZS.

Od izdaje pa do danes je bilo nekaj posodobitev. Zadnja je bila izdana 7. 7.

2021. Sistem je brezplaˇcen in namenjen za uporabo v vseh gasilskih druˇstvih.

Glavne fukcionalnosti sistema so:

• vodenje evidence gasilskih organizacij,

• vodenje evidence ˇclanstva,

• vodenje evidence opreme,

• vodenje podatkov o intervencijah,

• dokumentni sistem za upravljanje z dokumenti (kot so prijave na uspo- sabljanje in predlogi za odlikovanja in priznanja ter napredovanja) ter

• naˇcrtovanje potrebnih usposabljanj in ustrezne opremljenosti glede na kategorije gasilskih enot.

Celoten sistem je precej obseˇzen, za njim pa stoji ogromna podatkovna baza, v katero se polnijo podatki vseh prostovoljnih gasilskih druˇstev. Poleg sistema Vulkan pa ima GZS v lasti ˇse ˇsirˇsi javnosti bolj znan sistem SPIN [43], ki je namenjen beleˇzenju in pregledu nad nedavnimi intervencijami.

(21)

Diplomska naloga 5

Slika 2.2: Moduli sistema Vulkan

V nadaljevanju si bomo ogledali nekaj izbranih modulov sistema Vulkan, ki so zanimivi s staliˇsˇca naˇsega portala. Ta sistem si bomo ogledali nekoliko podrobneje od ostalih v nadaljevanju, saj ga gasilska druˇstva veliko upora- bljajo v praksi.

Vstopna stran

Na vstopni strani spletnega portala (slika 2.3) se v glavi nahaja:

Slika 2.3: Vstopna stran sistema Vulkan

• logotip sistema,

• podatki o prijavljenem uporabniku,

• glavni meni za navigacijo po sistemu,

(22)

• gumb za podporo in

• gumb za odjavo.

Glavni meni vsebuje le kategorije, do katerih ima uporabnik pravico do- stopati. V naˇsem primeru na sliki manjka kategorija Intervencije.

Gumb za podporo odpre meni z dostopom do ˇsifrantov, navodil in moˇznosti za menjavo gesla. ˇSifranti so loˇceni po kategorijah (ˇclani, oprema, itd.), saj jih je veliko in bi bilo iskanje brez tega zelo oteˇzeno. Navodila za uporabo spletnega portala so na voljo v PDF formatu, kar je prikladno, saj lahko tako datoteko odpremo v brskalniku. Menjava gesla, najprej zahteva vnos starega gesla, nato pa ˇse novega dvakrat.

V jedru spletne strani imamo navedene osnovne podatke o trenutno prijavljenem uporabniku, obvestila o zdravstenih pregledih, servisih opreme, razpisih, odprtih tekmovanjih ter obvestila o novostih v sistemu.

Noge sistem nima, prav tako tudi ne nobene moˇznosti stika za razvijalci, ˇce bi v sistemu odkrili napako ali pa bi potrebovali pomoˇc.

Clani ˇ

Kategorija ˇClani (slika 2.4) je namenjena urejanju in pregledovanju podatkov vseh gasilk in gasilcev v druˇstvu. Poleg osebnih podatkov se tu nahajajo ˇse podatki o delu, usposabljanjih, dobi ˇclanstva in podobno. Spletna stran je zgrajena tako, da ima na levi strani filter, ki nam pomaga pri iskanju podatkov v podatkovni bazi. Rezultati iskanja se izpisujejo pod filtrom. Na desni strani je veˇcje glavno polje, v katerem so na zaˇcetku navedeni ˇclani in ˇclanice PGD z neustreznimi podatki in mankajoˇcim/preteˇcenim zdravniˇskim pregledom. Ob kliku na izbranega posameznika v filtru se vsebina glavnega polja zamenja z njegovimi osebnimi podatki izbranega posameznika. Na enak naˇcin so zgrajeni tudi ostali meniji na portalu.

(23)

Diplomska naloga 7

Slika 2.4: Modul za urejanje ˇclanov v Vulkanu

Oprema

Sestava spletne strani za zavihek Oprema (slika 2.5) je enaka spletni strani za upravljanje ˇclanov. Ob dodajanju opreme moramo najprej izpolniti polje z vrsto opreme. To storimo tako, da v ˇsifrantu (slika 2.6) poiˇsˇcemo ustrezen vnos za opremo, ki jo dodajamo. ˇCe ustrezne opcije ni v ˇsifrantu, lahko tudi dodamo novo vrednost. Glede na izbiro v ˇsifrantu se nato generirajo polja, za vnos preostalih podatkov. Podatke o opremi lahko kasneje spreminjamo,

Slika 2.5: Primer glavnega menija za opremo

(24)

briˇsemo ali pa leto izloˇcimo iz uporabe.

Slika 2.6: ˇSifrant za vrsto opreme

Zakljuˇ cek

Portal obsega poleg navedenih ˇse sledeˇce module:

• organizacija,

• napredovanja,

• odlikovanja,

• usposabljanja,

(25)

Diplomska naloga 9

• tekmovanja in

• intervencije.

Princip uporabe teh modulov je zelo podoben opisanim. S tem portal zajema vsa pomembna podroˇcja gasilskega druˇstva.

V Sloveniji imamo trenutno 855 gasilskih druˇstev, kar pomeni tako skupno veˇc kakor 1500 uporabnikiov tega portala [24]. Z vsemi svojimi moduli je portal zelo obseˇzen, zato se redno organizirajo teˇcaji za delo z njim.

Glede na to da je portal Vulkan zelo razˇsirjen bi bilo za naˇs portal velika prednost, ˇce bi podatke iz Vulkana lahko prenesli v naˇs portal in se na ta naˇcin izognili prepisovanju opreme iz enega portala v drugega.

2.2 Itemit

Slika 2.7: Logotip programske opreme Itemit

Itemite [16] je programska oprema za sledenje in beleˇzenje fiziˇcnih objektov (npr. ura, raˇcunalnik, kljuˇci ipd.). Sistem je v angleˇskem jeziku in je namenjen tako za osebno uporabo kot tudi za uporabo v podjetjih. V ta namen ima tudi prilagojene ponudbe paketov za nakup letnih licenc. Pro- gramsko opremo je razvilo podjetje RedBite Solutions [38], ki ima sedeˇz v Cambridgu. Podjetje je nastalo leta 2006 in od takrat naprej razvija in vzdruˇzje ta sistem, ˇcigar zadnja razliˇcica (3.3.2) je bila izdana 22. 12. 2021.

V nadaljevanju bo prikazan postopek dodajanja opreme in funkcij programa v primeru zastonjske licence, ki omogoˇca beleˇzenje do 500 predmetov.

(26)

Oblika portala

Po prijavi v portal nas ta prusmeri na nadzorno ploˇsˇco za pregled opreme in zbirk. Tu nas priˇcaka sporoˇcilo dobrodoˇslice ob zaˇcetku uporabe portala. Ob vnosu prvega objekta to sporoˇcilo zamenja s seznamom vneˇsenih objektov (slika 2.8).

Slika 2.8: Primerjava nadzorne ploˇsˇce pred in po prvem vnosu

Portal je sestavljen iz sledeˇcih modulov, ki se nahajajo v glavi spletne strani:

• vsi predmeti (angl. all items),

• zbirke (angl. collections),

• lokacije (angl. locations),

• opomniki (angl. reminders),

• rezervacije (angl. bookings),

• teˇzave (ngl. issues),

• naprave (angl. devices),

• poroˇcila (angl. reports) in

• uporabniki (angl. users).

(27)

Diplomska naloga 11 Na levi strani portala se nahaja meni, ki je prilagojen modulu, na katerem se nahajamo. Desno od njega je glavno okno, v katerem se nahaja vsebina posameznega modula. Na koncu je moˇznost stika s podporo, z izbiro ikone sporoˇcila v spodnjem levem delu portala.

Oprema

Slika 2.9: Primer vnosa opreme na portalu Itemit

Portal nam omogoˇca vnos doloˇcenega ˇstevila (odvisno od licence) elementov opreme. Ob vnosu novega elementa imamo na voljo vrsto atributov, ki ta element opreme definirajo. Poleg obveznega imena opreme, imamo ˇse sledeˇce moˇznosti (slika 2.9):

• vnos slike,

• doloˇcanje zbirk,

• nastavitev opomnika,

• dodajanje dodatnih podatkov v polje Information,

• dodajanje lokacije,

• dodajanje priponk,

(28)

• dodajanje komentarjev in

• sledenje preko GPS oziroma s pomoˇcjo QR kode.

Vso vneˇseno opremo lahko ˇze med samim vnosom porazdelimo v zbirke, ki ji tudi lahko doloˇcimo enake atribute. Zbirke ponujajo tudi dodatne in- formacije (recimo ˇstevilo elementov v zbirki) in drugo v modulu Report.

Opremo lahko tudi odstranjujemo oziroma arhiviramo.

Zakljuˇ cek

Programska oprema nam ponuja vrsto operacij za sledenje opreme, njeno urejanje in ˇse vrsto drugih operacij, ki so odvisne od naˇse licence. Ob more- bitnih teˇzavah nam ob strani stojijo tehniki podjetja RedBite Solutions, ki so na voljo na telefonski ˇstevilki ali na elektronskem poˇstnem naslovu. Tudi vrsta podpore je odvisna od vrste zakupljene licence.

Itemit smo izbrali za primerjavo z naˇsim sistemom zato, ker ˇzelimo imeti v konˇcnem izdelku podobne funkcionalnosti.

(29)

Poglavje 3

Uporabljena orodja in tehnologije

Izbira orodij in tehnologij za izdelavo spletnega portala je eden izmed prvih korakov pri izdelavi le-tega. Na izbiro vplivajo predvsem namen portala, velikost projekta, naˇse osebne izkuˇsenje in trenutne priljubljenosti orodja ali tehnologije. [22]

Za naˇs portal smo si izbrali PHP [34] ogrodje Laravel [20], ki je v tem trenutku ena izmed bolj priljubljenih med spletnimi razvijalci. Na izbiro je v veˇcji meri vplivalo tudi to, da se s tem ogrodjem v praksi ˇse nismo sreˇcali in smo ga ˇzeleli raziskati. Uporaba tovrstnih ogrodij razvijalcem omogoˇca laˇzji razvoj celotnega projekta, saj vsebujejo orodja za reˇsevanje pogostih razvojnih izzivov (npr. implementacija registracije in prijave uporabnikov).

Poleg PHP ogrodja smo se pri izdelavi portala morali odloˇciti tudi za izbiro Javascript ogrodja. Tu so trenutno najbolj priljubljeni Angular [1], React [37] in Vue [47]. Za Vue smo se odloˇcili navkljub trenutno najmanjˇsi priljubljenosti, vendar pa mu le-ta hitro naraˇsˇca. Tudi s tem ogrodjem se ˇse nismo sreˇcali v praksi, zato in smo ga ˇzeleli podrobneje spoznati. Za tem si bomo podrobneje ogledali ˇse ostala izbrana orodja za izdelavo portala, pri ˇcemer bomo vsakega tudi opisali.

13

(30)

3.1 Tehnologije

Za naˇs portal pa smo potemtakem izbrali sledeˇce tehnologije:

1. Jezik za oznaˇcevanje nadbesedila (angl. Hyper Text Markup Language - HTML) [15],

2. Kaskadne slogovne predloge (angl. Cascading Style Sheets - CSS) [9], 3. PHP ogrodje Laravel [20],

4. Javascript ogrodje Vue.js [47], 5. Javascript knjiˇznico Bootstrap [6] in

6. sistem za upravljanje podatkovnih zbirk v MySQL [30].

Poleg navedenih tehnologij so bile pri projektu prisotne tudi nekatere druge, vendar so te ˇze vkljuˇcene v ogrodja, ker jih ta potrebujejo za pravilno delovanje (npr. TypeScript [45]).

3.1.1 Jezik za oznaˇ cevanje nadbesedila (HTML)

Avtor

Trenutni ˇzivi standard (angl. Living Standard) za jezik za oznaˇcevanje nadbesedila (angl. Hyper Text Markup Language - HTML) [15] je naredila sku- pnost WHATWG [51], ki jo sestavljajo med drugim tudi lastniki svetovnih brskalnikov (Apple, Google, Mozilla in Microsoft).

Osnovne funkcionalnosti

HTML je osnova vsake spletne strani, saj s to tehnologijo definiramo elemente naˇse spletne strani. Spletna stran je sestavljena iz dveh delov HTML dokumenta. Prvi del je glava (angl. header), kjer je definirana oblika dokumenta (CSS) in ostali opisni (angl. meta) podatki spletne strani. Drugi del je telo (angl. body), ki zajema vse elemente spletne strani.

(31)

Diplomska naloga 15

Slika 3.1: Logotip HTML tehnologije

Razliˇcica

Trenutna razliˇcica HTML je HTML5, ki pa je tako imenovana ˇziva razliˇcica (angl. living version). To pomeni, da bodo tehnologijo ˇse naprej posodabljali, vendar pa je ne bodo oznaˇcevali s ˇstevilkami razliˇcice. Tako bo tudi HTML5 nekoˇc postal samo HTML.

Uporaba

Kljub uporabi ogrodij in knjiˇznic se na koncu programska koda pretvori v HTML dokumente za vsako od spletnih strani naˇsega portala. Tehnologijo smo uporabljali tudi med samim razvojem za definicijo strukture spletnih strani (odstavki, slike, povezave ipd.).

3.1.2 Kaskadne slogovne predloge (CSS)

Avtor

Specifikacija in vzdrˇzevanje kaskadnih slogovnih predlog (angl. Cascading Style Sheets - CSS) [9] je v rokah skupine CSS Working Group znotraj orga- nizacije World Wide Web Consoritum (W3C [50]). Specifikacijo uradno potr- dijo ˇclani W3C (podjetja kot so Adobe, IBM, Microsoft itd.), ki je zapiˇsemo kot CSS priporoˇcila.

(32)

Kaskadne slogovne predloge (angl. Cascading Style Sheets - CSS) [9] je tehnologija, ki se uporablja za oblikovanje HTML elementov. Definirana je lahko na tri naˇcine:

• v glavi HTML dokumenta,

• v znaˇcki HTML elementa ali

• v svoji datoteki.

Za uporabo najprej definiramo izborni del CSS elementa (angl. selector).

S tem definiramo, katerim HTML objektom bomo priredili lastnosti, ki jih nato navedemo v drugem delu. Drugi del obdajajo zaviti oklepaji in vsebuje navedene lastnosti in njihove vrednosti loˇcene z dvopiˇcjem. Vsako lastnost na koncu zakljuˇcimo s podpiˇcjem. Primer CSS elementa, ki besedilo znotraj HTML elementov z znaˇcko p pobarva z rdeˇco, je:

p {

color: red;

}

Slika 3.2: Logotip CSS tehnologije

(33)

Diplomska naloga 17 Razliˇcice

Decembra 1996 je izˇsla prva razliˇcica CSS. Ta je omogoˇcal nastavitev pisave, barve, ozadja, robov, odmikov in drugo. Maja 1998 je izˇsla druga razliˇcica, ki je omogoˇcala absolutno postavitev elementov, razliˇcne vrste ˇstevilˇcenja, razlome strani in drugo. Trenutno se uporablja razliˇcica 3, katere zaˇcetek sega v leto 1999. Razliˇcica 3 ni veˇc enoten dokument, temveˇc je razdeljena na module, ki se jih lahko nadgrajuje posamiˇcno [33].

Uporaba

Pri izgradnji naˇsega spletnega portala smo CSS vkljuˇcevali v znaˇcki HTML elementa in v svoji datoteki. Najveˇcji del oblikovne kode se je nahajal v svoji datoteki, zato smo ob tvorbi spletne strani le definirali pot do oblikovne datoteke v glavi HTML dokumenta. V naˇsem primeru smo jo klicali le enkrat, ker ima ogrodje Laravel posebno datoteko za doloˇcanje ogrodja spletne strani (glava, noga, meni, ipd.). V primeru manjˇsih popravkov smo obliko dodali kar v HTML elemenet.

3.1.3 Ogrodje Laravel

Avtor

Avtor ogrodja Laravel [20] je Taylor Otwell. Ogrodje je naredil iz ˇzelje po alternativi ogrodja CodeIgniter [8], saj to ni omogoˇcalo avtentikacije in avtorizacije uporabnikov.

Slika 3.3: Logotip tehnologije Laravel

(34)

Laravel [5][20] je ogrodje, ki je narejeno v jeziku PHP[34]. Ogrodje razvijalca razbremeni nalog, ki so potrebne pri implementaciji vsake (oziroma veˇcine) spletnih strani. V naˇsem portalu sta taki nalogi usmerjanje (angl. routing) in avtentikacija (angl. authentication) uporabnikov. Datoteke za nastavitve usmerjanja se v Laravelu nahajajo v imenikuroutes (slika 3.4). Avtentika- cijo dodamo z naslednjima ukazoma v konzolnem oknu projekta:

php artisan ui vue --auth php artisan migrate

Prvi ukaz poskrbi za kreiranje vseh potrebnih datotek in pogledov (angl.

views), medtem ko drugi ustvari vse potrebne tabele in povezave v podatkovni bazi.

Slika 3.4: Laravel drevesna struktura

Drevesna struktura Laravel projekta (slika 3.4) ima poleg imenikaroutes

(35)

Diplomska naloga 19 tudi druge za naˇs projekt pomembne imenike. Za delovanje ogrodja so po- membni prav vsi, vendar si bomo podrobneje pogledali le najpomembnejˇse.

V podimenikih imenikaapp se nahajajo vsi modeli in nadzorniki (angl. controllers) za naˇs projekt. Modeli in nadzorniki so del arhitekture MVC (angl.

Model View Controller) [28], na kateri temelji Laravel. V imenikuconfig se nahajajo vse nastavitvene datoteke (nastavitve podatkovne baze, prijavljanja ipd.). V public se nahajajo vse za spletno stran potrebne datoteke (slike, skripte, oblikovne datoteke ipd.). Postavitve spletne strani in Vue.js [25]

datoteke so del imenikaresources. Ostali imeniki vsebujejo datoteke za delovanje ogrodja in nekatere funkcionalnosti, ki jih pri naˇsem projektu nismo uporabili. Tak primer je recimo imenik database/factories, ki omogoˇca avtomatizirano polnjenje tabel z nakljuˇcnimi podatki definiranega formata.

Arhitektura je zasnovana tako, da ima logiko in obliko spletnih strani loˇceno. Tako imamo tri komponente:

Modeli (angl. models) pripadajo logiˇcnemu delu spletne strani. Vsak od njih je vezan na tabelo v podatkovni bazi.

Slika 3.5: Primer kode modela v ogrodju Laravel

Pogledi (angl. views) s pomoˇcjo definicij HTML elementov in njihove oblike (CSS) doloˇcajo izgled spletnih strani.

(36)

Nadzorniki (angl. controllers) so vez med modeli in pogledi. Njihova naloga je, da pridobijo podatke iz modelov in jih posredujejo pogledom. Ker imamo lahko veˇc nadzornikov in akcij, potrebujemo tu ˇse usmerjevalno (angl.

route) datoteko. Ta poskrbi, da se za uporabnikove akcije uporabi ustrezen nadzornik z ustrezno metodo.

Slika 3.6: Primer kode nadzornika v ogrodju Laravel

Ob prejetem get ali post zahtevku usmerjevalnik poskrbi za izvedbo klica ustrezne akcije v ustreznem nadzorniku. Primer ene izmed vrstic v usmerjevalni datoteki:

(37)

Diplomska naloga 21 Route::get(’/getFirestations’,

[App\Http\Controllers\FirestationController::class, ’GetFirestations’]);

Ob vstopu na spletno stran usmerjevalna programska koda aktivira ustrezno metodo v ustreznem nadzorniku. Ta nato v svoji metodi po potrebi iz modelov pridobi podatke, jih vstavi v pogled in le-tega vrne uporabniku.

Laravel ogordje ima vgrajen tudi razvojni streˇznik, ki nam omogoˇca ogled spletnega portala na lokalni domeni. To razvijalcu omogoˇca izdelavo spletnega portala brez predhodnega urejanja gostovanja spletne strani in zakupa spletne domene.

Slika 3.7: MVC arhitektura

Razliˇcice

Prva razliˇcica Laravela je izˇsla junija 2011, zadnja 8. razliˇcica pa 8. septembra 2020. Vseh razliˇcic do sedaj je dvajset, planiran datum za izdajo naslednje pa je 26.2.2022.

(38)

Uporaba

Za uporabo Laravel ogrodja v naˇsem projektu smo se odloˇcili zato, ker je to priljubljeno ogrodje, ki nas razbremeni lastne implementacije avtentikacije in avtorizacije. Uporabili smo ˇze zasnovano drevesno strukturo projekta z imeniki in podimeniki.

3.1.4 Javascript ogrodje Vue.js

Avtor

Vue.js [47] je ustvaril Evan You, ki je bil programeer pri Googlu. Sprva je sodeloval pri Angular projektih, vendar se je kasneje odloˇcil zbrati skupaj dobre stvari Angular-ja in jih zdruˇziti v novo ogrodje. Nastal je Vue.js, ki ga ˇse vedno vzdˇzuje z oˇzjimi ˇclani njegove ekipe.

Slika 3.8: Logotip tehnologije Vue.js

Ogrodje je izpeljano iz platforme Node.js [32] in je namenjeno kreiranju eno- stranskih aplikacij (angl. Single Page Applications - SPA).

Programska koda ogrodja Vue.js je sestavljena iz dveh delov. Prvi del je datoteka z imenom app.js, ki vsebuje vse knjiˇznice (v naˇsem primeru BootstrapVue). Inicializira tudi vse Vue komponente skupaj z inicializacijo glavne Vue komponente, kateri nato dodajamo ostale. Drugi del so Vue datoteke, v katerih so definirane posamezne Vue.js komponente.

(39)

Diplomska naloga 23 Razliˇcice

Prva razliˇcica 0.6 je izˇsla decembra 2013, do danes pa je izˇslo ˇze 18 razliˇcic.

Zadnja razliˇcica 3.2 je izˇsla avgusta 2021.

Uporaba

Vue.js [47] je eno izmed treh trenutno najbolj uporabljenih javascript ogrodij.

V naˇsem projektu smo ga uporabili zgolj kot orodje za kreiranje zah- tevnejˇsih komponent, recimo tabele. Za te smo uporabili razˇsiritev ogordja Vue.js imenovano BootstrapVue[7]. S tem smo se izognili lastni implementaciji iskalnega okna, filtrov in ostalih funkcionalnosti tabel. Poleg tega ima BootstrapVue na voljo ˇse vrsto drugih komponent.

Prednost uporabe Vue.js je somostojnost komponent, ki jih lahko vkljuˇcimo v poljubno ˇstevilo spletnih strani z minimalnim podvajanjem kode (podvojeni so zgolj klici komponente). Vue.js smo dodali Laravel ogrodju z ukazoma:

$ php artisan ui vue

$ npm install && npm run dev

Vsa Vue.js programska koda se nahaja znotraj imenika resources v La- ravel ogrodju. Ob urejanju programske kode ogrodja Vue.js se je v konzolnem oknu izvajala tudi skripta, ki smo jo pognali z ukazom:

$ npm run watch

Ta skripta je programsko kodo ogrodja Vue.js prevedla in dodala v Laravel imenikpublic, saj sicer spremebe Vue.js kode na spletnem portalu ne bi bile vidne.

3.1.5 Ogrodje Bootstrap

Avtorji

Bootstrap [6] (na zaˇcetku imenovan Twitter Blueprint) sta zasnovovala Mark Otto and Jacob Thornton, ki sta bila takrat zaposlena na Twiterju. Za- snovala sta ga z namenom kreiranja veˇcje konsistentnosti med internetnimi

(40)

orodji, saj je bilo takrat mnogo razliˇcnih knjiˇznic za delo z uporabniˇskimi vmesniki. Ker je odprtokoden, se jima je kmalu pridruˇzilo nekaj sodelavcev, kasneje pa je bil projekt objavljen tudi na platformi Github [12].

Slika 3.9: logotip CSS ogrodja Bootstrap

Razliˇcice

Prva razliˇcica je izˇsla avgusta 2011, do danes je bilo objavljenih 5 razliˇcic.

Zadnja imenovana Bootstrap 5 je izˇsla 5.maja 2021.

Bootstrap[6] spada med CSS ogrodja, vendar vsebuje tudi HTML in javascript kodo. Ogrodje je zelo razˇsirjeno, saj omogoˇca gradnjo dinamiˇcnih spletnih strani, ki se prilagajajo razliˇcnim napravam.

Ena izmed glavnih lastnosti ogrodja je navidezna delitev spletne strani na 12 stolpcev in poljubno ˇstevilo vrstic. Elemente razporejamo po stolpcih in vrsticah tako, da jim dodeljujemo razreda row in col. Z razredom row definiramo vrstico, nato pa znotraj te naˇstejemo elemente z razredom col.

Poleg tega pri razreducoldefiniramo tudi ˇstevilo stolpcev ˇcez katere se html elemenent razteza. To doseˇzemo tako, da razredu col dodamo ˇse pomiˇsljaj ter ˇstevilo od 1 do 12 (recimo elementu, za celotno vrstico bi dodelili razred col-12. Imamo tudi moˇznost, da prilagodimo ˇstevilo vrstic elementa za razliˇcne naprave. Z oznakami za velikosti naprav (sm, md, lg, xl inxxl).

Vkljuˇcimo jih tako, da jih vnesemo med besedo colin ˇstevilom stolpcev ˇcez katere se element razteza (recimo element se razteza ˇcez celoten zaslon na malih napravah doloˇcimo z: col-xs-12).

(41)

Diplomska naloga 25 Uporaba v projektu

V projektu smo uporabljali Bootstrap razrede za definiranje postavitve HTML elementov portala glede na velikost naprave, na kateri portal uporabljamo.

3.1.6 Podatkovna baza MySQL

Avtorji

Sistem za upravljanje podatkovnih baz MySQL [30] je ustvarilo ˇsvedsko podjetje MySQL AB leta 1995. Podjetje je nato zamenjalo nekaj lastnikov, dokler ga ni leta 2010 kupil Oracle, kateri ga ima ˇse vedno v lasti.

Slika 3.10: MySQL logotip

Razliˇcice

Od zaˇcetka pa do danes je bilo izdanih pribliˇzno 15 razliˇcic. Zadnja razliˇcica 8.0 je bila izdana aprila 2018.

MySQL [30] je priljubljen sistem za upravljanje podatkovnih baz (angl. database managment system - DBMS). Uporablja poizvedovalni jezik SQL (angl.

Structured Query Language), ki omogoˇca razvoj in upravljanje s podatkovno bazo, pisanje poizvedb in podobno.

Uporaba

Razvoj naˇsega projekta je z vidika podatkov za nas opravil kar PowerDesi- gner. Z njim smo na zaˇcetku naredili naˇcrt naˇse podatkovne baze z vsemi

(42)

tabelami, povezavami in kljuˇci. Orodje nam je nato zgeneriralo SQL skripto, ki smo jo vstavili v HeidiSQL ter pognali. Tako je bila podatkovna baza postavljena. To smo med razvojem s pomoˇcjo orodja PHPMyAdmin [35] ˇse dogradili, ji dodajali ter odstranjevali tabele in podobno.

3.2 Orodja

Med razvojem spletnega portala smo uporabljali izbrana orodja za delo z ˇze naˇstetimi tehnologijami. Orodja so lahko namenjena izkljuˇcno za delo z eno tehnologijo (npr. PyCharm [36] za izdelavo Python programov) ali pa za delo z veˇc (ponavadi smiselno povezanimi) tehnologijami (npr. Visual Studio Code [46]). Za izdelavo spletnega portala smo uporabili sledeˇca orodja:

1. Visual Studio Code [46]

2. HeidiSQL [14]

3. phpMyAdmin [35]

4. XAMPP [52]

5. PowerDesigner [40]

3.2.1 Urejevalnik Visual Studio Code

Avtorji

Orodje Visual Studio Code [46] je razvilo podjetje Microsoft in je po anketi razvijalcev daleˇc najbolj priljubljen urejevalnik, saj ga uporablja veˇc kot 70%

razvijalcev [31].

Razliˇcice

Prva razliˇcica je bila izdana aprila 2015. Zadnja stabilna razliˇcica (1.61.0) je priˇsla v uporabo oktobra 2021.

(43)

Diplomska naloga 27

Slika 3.11: Visual Studio Code logotip

Visual Studio Code [46] je priljubljen Microsoftov urejevalnik programske kode (angl. code editor). Omogoˇca namestetiv raznovrstnih dodatkov za delo s poljubno tehnologijo. Njegov glavni namen je omogoˇciti razvijalcem enostavno delo z ˇzeljeno tehnologijo.

Uporaba

Pri naˇsem projektu je bilo to najbolj uporabljeno orodje. V njegovem konzolnem oknu smo namestili vsa ogrodja ter sprogramirali konˇcni izdelek. Upo- rabljali smo ga za delo s sledeˇcimi tehnologijami: HTML, CSS, Vue.js in Laravel.

Orodje nam je zelo olajˇsalo programiranje, saj nam je pomagalo pri pisanju kode z predlogi, oznaˇcevalo napaˇcno napisano kodo, obarvalo izpise razliˇcne funkcionalnosti kode in podobno.

3.2.2 Orodje HeidiSQL

Avtorji

Z razvojem orodja HeidiSQL [14] je priˇcel Ansgar Becker leta 1999. Leta 2006 je orodje naredil odprtokodno (angl. open source), a kljub temu ˇse naprej sodeloval pri razvoju vse do danes.

(44)

Slika 3.12: Primeri pomoˇci ob pisanju kode

Slika 3.13: HeidiSQL logotip Razliˇcice

Orodje je izˇslo leta 1999. Do leta 2020, ko je bila izdana zadnja razliˇcica (11.0), je imelo ˇse veliko vmesnih razliˇcic.

HeidiSQL [14] je orodje, ki nam je v pomoˇc pri delu s podatkovno bazo.

Omogoˇca nam povezavo na podatkovno bazo, na kateri imamo nato podrob- nejˇsi pregled nad tabelami in pogledi. Omogoˇca tudi kreiranje novih podatkovnih baz, pisanje poizvedb nad tabelami, kreiranje proˇzilcev, kreiranje in upravljanje s sestavo in podatki v tabelah in pogledih, nastavljanje pra- vic uporabnikom baze in ˇse mnogo drugih funkcionalnosti. Orodje HeidiSQL

(45)

Diplomska naloga 29 podpira delo tudi z razliˇcnimi podatkovnimi bazami (MariaDB, MySQL, Mi- crosoft SQL, PostgreSQL in SQLite).

Uporaba

V naˇsem projektu smo ga uporabili za uvoz skripte iz orodja PowerDesigner [40] ter za zaˇcetno popravljanje vsebine tabel pred uporabo orodja phpMyAd- min [35].

3.2.3 Orodje phpMyAdmin

Avtorji

Nekdanji IT svetovalec Tobias Ratschiller je orodje phpMyAdmin [35] za- snoval leta 1998, a je kmalu prenehal z razvojem zaradi pomanjkanja ˇcasa.

Z nadaljnim razvojem projekta so nato leta 2001 nadaljevali Olivier M¨uller, Marc Delisle in Lo¨ıc Chapeaux.

Slika 3.14: Logotip orodja PhpMyAdmin

Razliˇcice

Projekt ima veliko razliˇcic z manjˇsimi popravki. Veˇcjih razliˇcic je bilo pet, zadnja od teh (5.0) je izˇsla 2019. Zadnja trenutna razliˇcica pa je 5.1.1.

Tudi PhpMyAdmin [35] je orodje za delo s podatkovnimi bazami. Od orodja HeidiSQL [14] se razlikuje po interaktivnosti, saj nam ni treba roˇcno pisati SQL kode, ampak to naredimo preko uporabniˇskega vmesnika. Orodje v

(46)

ozadju generira SQL kodo, ki je uporabniku dostopna v oknu, v katerem lahko izvaja ukaze na bazi z pisanjem SQL ukazov.

Uporaba

Z orodjem smo v projektu dodajali tabele, ki jih pri naˇcrtovanju nismo pred- videli. Orodje smo uporabljali tudi za vstavljanje testnih podatkov, povezovanje tujih kljuˇcev, dodajanje stolpcev v tabelah in pregled nad podatki v njih.

3.2.4 Razvojni paket XAMPP

Avtorji

Razvojni paket XAMPP [52] je nastal s strani projekta Apache friends, katere ustanovitelj je Kai ’Oswald’ Seidler. Gre za neprofitno skupino, ki promovira uporabo apache streˇznika in razvija orodje XAMPP.

Slika 3.15: logotip razvojnega paketa XAMPP

Razliˇcice

Prva razliˇcica orodja je izˇsla septembra 2002. Vsega skupaj je bilo osem veˇcjih razliˇcic. Zadnja stabilna razliˇcica (8.0.12) je izˇsla v oktobru 2021.

XAMPP [52] je programski paket, ki nam omogoˇca usklajeno uporabo modulov Apache [2], MySQL [30], FileZilla [10], Mercury [26] in Tomcat [44].

Orodje XAMP smo pri naˇsem projektu uporabili za zagon Apache [2] streˇznika

(47)

Diplomska naloga 31 in MySQL baze. Prednost uporabe orodja je, da se nam ni potrebno posebej ukvarjati s postavitvitjo Apache streˇznika in zagonom podatkovne baze ˇze na zaˇcetku projekta, saj orodje to stori za nas. Orodje nam tudi omogoˇca nastavitve posameznih modulov z uporabo uporabniˇskega vmesnika.

Uporaba

V naˇsem projektu smo orodje uporabili za gostovanje (angl. hosting) podatkovne baze.

3.2.5 Orodje PowerDesigner

Avtor

Izhaja iz orodja S-Designor, ki ga je ustvaril Xiao-Yun Wang v podjetju SDP Technologies. Podjetje je nekajkrat zamenjalo lastnika, dokler ga ni odkupilo podjetje SAP [39], ki ga ima ˇse vedno v lasti.

Slika 3.16: Logotip orodja PowerDesigner

Razliˇcice

Orodje je do sedaj imelo kar 26 veˇcjih razliˇcic, pri tem pa tudi velikokrat spremenilo ime. Zaˇcetna razliˇcica (AMC*Designor 2.0) je bile izdana leta 1989. Zadnjo razliˇcico je izdalo podjetje SAP leta 2020 in se imenuje Power- Designer 16.7.

(48)

PowerDesigne [40] je plaˇcljivo orodje, ki nam omogoˇca vizualno modelira- nje podatkovnih baz in drugih modulov (recimo izdelava primerov uporabe, izdelava toka podatkov in drugo).

Uporaba v projektu

Pri naˇsem projektu smo uporabili zastonjsko razliˇcico za zasnovo tabel in povezav znotraj podatkovne baze. Model smo pretvorili v skripto, ki smo jo nato uvozili z orodjem HeidiSQL.

(49)

Poglavje 4

Razvoj portala Gasilski-dom.com

V tem poglavju je predstavljen razvoj novega spletnega portala.

Slika 4.1: Nadzorna ploˇsˇca portala Gasilski-dom.com

33

(50)

4.1 Opis problema

Razlog za izdelavo novega spletnega portala Gasilski-dom.com izhaja iz ne- katerih kljuˇcnih pomankljivosti sistema Vulkan. Mednje sodi predvsem ne- podprto sledenje opremi v druˇstvu. Sedanji skrbnik je zato v sistemu Vulkan uvedel svoj sistem beleˇzenja lastniˇstva opreme (niz ˇstevil, loˇcenih z znakom

;) v okencih, ki so sicer namenjena za komentiranje. Tako sledenje opremi je zelo nerodno in ne omogoˇca iskanja, pa tudi ostali skrbniki ne moremo slediti, ker ne poznamo sistema. Vulkan tudi ni primeren za uporabo na mobilnih napravah, ker se ne prilagaja velikosti zaslona aktivne naprave. Portala za beleˇzenju opreme pa mora nujna omogooˇcati uporabo na pametnih telefo- nih. To je privedlo do ideje za nov sistem Gasilski-dom.com, ki bi dopenjeval dosedanji sitem Vulkan.

Pred priˇcetkom izdelave smo definirali nekaj funkcionalnih (kaj naj sistem vkljuˇcuje) in nefunkcionalnih (kako naj bo sistem implementiran) zahtev.

4.1.1 Funkcionalne zahteve

Dodajanje druˇstev

Portal mora omogoˇcati moˇznost dodajanja novih gasilskih druˇstev. Torej skrbniki lahko zaprosijo za sprejem za upravljanje doloˇcenega druˇstva ali pa ustvarijo novo.

Sledenje opremi

Portal mora omogoˇcati sledenje vsej opremi v gasilskem druˇstvu. Za vsak element opreme moramo imeti moˇznost dodajanja lastnika oziroma lokacije opreme.

Dodajanje opreme, gasilcev in lokacij

Portal mora omogoˇcati dodajanje novih elementov opreme, nove gasilce (katerim lahko dodelimo opremo) in dodajanje lokacij opreme (prostor, vozilo).

(51)

Diplomska naloga 35 Dodajanje skrbnikov

Portal mora omogoˇcati moˇznost dodajanja skrbnikov, saj je teh v druˇstvu lahko veˇc. Skrbnik se mora pred priˇcetkom dela ustrezno avtenticirati.

Atributi za gasilce in lokacije

Portal mora omogoˇcati dodajanje osnovnih atributov (ime, priimek, spol, ipd.) gasilcem in lokacijam na katerih se oprema nahaja. Lokacije morajo imeti atribute razliˇcne glede na vrsto lokacije (prostor ali vozilo).

Prilagodljivost za mobilne naprave

Portal se mora prilagajati poljubni napravi na kateri je uporabljen.

Izvoz podatko opreme s preteˇcenim rokom

Portal mora omogoˇcati izvoz opreme s preteˇcenim rokom uporabe. Poleg imena opreme mora biti razviden tudi lastnik opreme, oziroma njena lokacija.

Reˇsitev mora biti dostopna vsem

Portal mora biti dostopen vsem druˇstvom ne glede na njihovo velikost in finanˇcne sposobnosti.

4.1.2 Nefunkcionalne zahteve

Enostaven vmesnik

Portal mora imeti enostaven in privlaˇcen uporabniˇski vmesnik. Prilagojen za uporabo na vseh napravah.

Modularnost

Portal mora biti izdelan modularno zaradi nadgradenj v prihodnosti. Por- tal mora imeti moˇznost dodajanja novih modulov v primeru, da bi ˇzeleli odpraviti novo odkrite teˇzave v sistemu Vulkan.

(52)

Zaˇsˇcita pred vdori

Portal mora biti zaˇsˇciten pred vdori, saj so na njem shranjeni osebni podatki ˇclanov gasilskih druˇstev.

4.2 Naˇ crt

Po opredeljenih funkcionalnostih smo zaˇceli z naˇcrtovanjem portala.

4.2.1 Vloge

Portal mora loˇcevati med skrbniki, ki ˇse nimajo dodeljenega svojega druˇstva, in skrbniki, ki ˇze imajo dodeljeno druˇstvo. Tistim skrbnikom, ki ˇse nimajo druˇstva, moramo omogoˇciti ustvariti novo in moˇznost poˇsiljanja proˇsenj za sprejem v ˇze obstojeˇca druˇstva. Skrbnik, ki ustvari novo druˇstvo, postane tudi avtomatsko ˇclan le-tega. Skrbniki, ki ˇze imajo dodeljeno druˇstvo morajo imeti moˇznost sprejemanja in zavraˇcanja proˇsenj ostalih skrbnikov za skrbniˇstvom nad druˇstvom.

4.2.2 Moduli

Definirali smo glavne module, do katerih je mogoˇc dostop iz glavnega menija.

To so moduli:

• gasilski dom,

• gasilci,

• vozila,

• oprema in

• prostori v domu.

Vsak od navedenih modulov je samostojen, kar nam omogoˇca dodajanje novih modulov v prihodnosti. Vsak od modulov ima tudi lastne atribute in

(53)

Diplomska naloga 37 operacije, ki se izvajajo nad njim. Poleg teh modulov pa bomo morali dodati tudi moˇznost sprejemanja in zavraˇcanja proˇsenj za dodelitev skrbniˇstva nad portalom. Vendar pa to ne sodi med upravljanje z opremo. Zato bo dostop do tega modula moˇzen iz domaˇce strani, ne pa tudi iz glavnega menija.

Za vsakega od glavnih modulov smo tudi zasnovali glavno Vue.js komponento tabele, ki je prikazana na glavni strani modula. Doloˇciti smo morali atribute tabele v bazi uporabniku za prikaz, saj v Vue.js tabeli ni dovolj prostora za prikaz vseh.

4.2.3 Podatkovni model

Na tej toˇcki projekta smo se tudi odloˇcili, da bo novi portal za SUPB upo- rabljal MySQL [30], saj je cenovno ugoden in imamo z njim najveˇc izkuˇsenj.

Nato smo izdelali konceptualni model podatkovne baze v orodju PowerDesi- gner (slika 4.2).

Za zapis zapis in delo z gasilskimi druˇstvi smo ustvarili tabelofirestation.

Gasilcem in razliˇcnim lokacijam (vozila, prostori) ob dodajnju dodamo zapis tudi v tabelo equipment owner. To nam omogoˇca naknadno dodajanje objektov, ki si lahko lastijo opremo.

Vsak od modulov ima tudi svoj model, v katerem so shranjeni podatki, ki modul opisujejo.

4.2.4 Modeli v ogrodju Laravel

Po postavitvi modelov v podatkovni bazi moramo ustvariti modele v ogrodju Laravel. Primer ukaza, ki ustvari model Firestation skupaj z njegovim nadzornikom (angl. controller):

php artisan make:model Firestation --controller

Ti modeli so PHP razredi, na katere se lahko sklicujemo med pisanjem programske kode v nadzornikih, kadar ˇzelimo spreminjati podatke v podatkovni bazi (slika 3.6).

(54)

Slika 4.2: Konceptualni model podatkovne baze

(55)

Diplomska naloga 39

4.3 Sestava spletnega portala

V sploˇsnem imajo vse spletne strani tri glavne dele (slika 4.3).

Slika 4.3: Glavne komponente spletnih strani novega portala

To so glava, jedro in noga. Glava vsebuje znaˇcilno ozadje (angl. banner) spletne strani, menije za preklapljanje med stranimi z razliˇcnimi funkcional- nostmi in spuˇsˇcajoˇci seznam za upravljanje z uporabnikom spletne strani. Za glavo je jedro spletne strani, na katerem se nahaja vsebina posamezne spletne strani. Na koncu spletne strani se nahaja noga, v kateri je tudi e-poˇstni naslov v primeru, ˇce ˇzelimo kontaktirati razvijalce.

Spletne strani so sestavljene iz Laravel datotek imenovanih Blade [21].

To so PHP datoteke, ki so v Laravel ogrodju uporabljene za oblikovanje vsebine spletne strani. Velika prednost teh datotek je, da jih lahko med seboj kombiniramo. Tako smo v naˇsem projektu ustvarili eno Blade datoteko za okvir, v katerega vstavljamo ostale vsebine spletnih strani. Na ta naˇcin smo ob kreiranju nove spletne strani sprogramirali le vsebino telesa spletne strani, saj sta glava in noga na vseh straneh enaki. Tudi dodajanje vsebine v glavo in nogo spletne strani je preprosto, saj to storimo le na enem mestu in ne na vsaki spletni strani posebej.

Poleg Blade datotek nekatere spletne strani vsebujejo tudi Vue komponente, ki jih lahko na spletni strani odstranjujemo in dodajamo brez

(56)

osveˇzevanja spletne strani. V naˇsem portalu je tako izvedeno dodeljevanje lastniˇstva nad opremo. Ustvarjanje komponente lahko uporabimo na razliˇcnih spletnih straneh, a se tega zaenkrat nismo posluˇzevali. Za enostav- nejˇso implementacijo tabel ter glavne operacijo nad stolpci v njej (filtriranje, sortiranje) smo uporabili knjiˇznico BootstrapVue.

4.3.1 Vstopna stran

Slika 4.4: Vstopna stran portala Gasilski-dom.com

Vstopna stran je zelo pomembna, saj ustvari prvi vtis na obiskovalca (slika 4.4). V naˇsem primeru nismo vkljuˇcili nobene slike, saj je ˇze ozadje temna slika z ognjenimi iskrami. Vstopna stran je poleg strani za registracijo in prijavo tudi edina stran, ki ima prilagojene menije v glavi. Uporabnik mora namreˇc biti prijavljen, da mu lahko prikazujemo opremo, vozila in ostale stvari v njegovem druˇstvu. Neprijavljenega obiskovalca spletnega portala tu le pozdravimo, mu na hitro podamo glavne cilje tega portala in ga povabimo, da se nam pridruˇzi.

4.3.2 Registracija in prijava

Gre za podobni spletni strani. Prijavna spletna stran zahteva od uporabnika samo uporabniˇsko ime in geslo, medtem ko je potrebno ob registraciji nave-

(57)

Diplomska naloga 41

Slika 4.5: Stran za registracijo na portalu Gasilski-dom.com

sti ˇse e-poˇstni naslov in potrditi geslo z njegovim ponovnim vnosom. Sistem dvojnega vnosa gesla je na tem mestu varovalo pred tem, da bi se uporabnik zatipkal pri vnosu gesla. Zaradi varnosti v podatkovni bazi ne hranimo gesel, temveˇc le njihove zgoˇsˇcene vrednosti. Za zgoˇsˇcevanje Laravel ogrodje uporablja Bcrypt[4]. Ob registraciji mora uporabnik navesti tudi e-poˇstni naslov, saj bo ob registraciji na ta naslov prejel e-poˇstno sporoˇcilo za potrdi- tev registracije. Te funkcionalnosti naˇs portal trenutno ˇse nima, saj prototip ˇse ni na spletu. Ob objavi na spletu bo za poˇsiljanje e-poˇstnih sporoˇcil skr- belo ogrodje Laravel, ker ˇze vsebuje implementacijo poˇsiljanje potrditvenih sporoˇcil ob registraciji. Obrazec za registracijo in prijavo ima belo ozadje, da uporabnika pomembna vsebina spletne strani bolj pritegne.

4.3.3 Nadzorna ploˇ sˇ ca portala

Nadzorna ploˇsˇca portala je prva spletna stran, na katero uporabnik naleti po prijavi v sistem (slika 4.4).

Tu ima na voljo navigacijske gumbe, ki ga vodijo do ostalih podstrani portala.

Na nadzorni ploˇsˇci je tudi gumb za izvoz podatkov v JSON [18] datoteko.

JSON je je odprta standardna oblika datoteke in oblika izmenjave podatkov,

(58)

ki uporablja ˇcloveku berljivo besedilo za shranjevanje in prenos podatkovnih objektov, sestavljenih iz parov atribut-vrednost. Na ta naˇcin imamo moˇznost izvoza podatkov iz naˇsega sistema. To smo storili zaradi prenosljivosti podatkov, saj lahko tako podatke iz naˇsega sistema uporabljamo v drugih sistemih ali pa jih s pomoˇcjo orodij na internetu pretvorimo v nam bolj berljivo obliko.

Primer JSON izpisa opreme za testiranje portala je naslednji:

[ {

"EQUIPMENT_ID": 1,

"FIRESTATION_ID": 4,

"EQUIPNAME": "Jeklenka",

"SERIALNUMB": null,

"MADE_YEAR": 2010,

"EXPIRATION_DATE": "2022-01-22",

"created_at": null,

"updated_at": "2021-07-24T14:40:49.000000Z",

"owner": "Garaˇza"

}, {

"EQUIPMENT_ID": 6,

"FIRESTATION_ID": 4,

"EQUIPNAME": "Gasilska ˇcelada",

"SERIALNUMB": "155325334",

"MADE_YEAR": 2011,

"EXPIRATION_DATE": "2024-07-12",

"created_at": "2021-07-25T07:36:09.000000Z",

"updated_at": "2021-07-25T07:36:21.000000Z",

"owner": "Janez Novak"

} ]

(59)

Diplomska naloga 43

4.3.4 Spletna stran za urejanje gasilcev

Slika 4.6: Tabela za urejanje gasilcev z knjiˇznico BootstrapVue Spletna stran ima na sredini tabelo z gasilci v naˇsem druˇstvu. Stolpce lahko sortiramo naraˇsˇcajoˇce in padajoˇce. Imamo tudi iskalno okno, ki ob vnosu prikaˇze vse vrstice, kjer vsaj eden od stolpcev ustreza isklanemu nizu.

Celotne logike tabele nam ni bilo potrebno implementirati, saj je ˇze vsebo- vana v Vue [47] knjiˇznici BootstrapVue [7]. Nad tabelo so trije gumbi: za urejanje, za dodajanje in za odstranjevanje gasilk in gasilcev na spletnem portalu. Poleg tega imamo na voljo tudi gumb, ki nam prikaˇze vse gasilce s preteˇcenim zdravniˇskim pregledom. Te podatke nato lahko tudi izvozimo v JSON formatu.

4.3.5 Spletni strani za urejanje vozil in prostorov

Spletni strani za urejanje vozil (slika 4.7 in prostorov gasilskega doma sta po strukturi enaki strani za urejanje ˇclanov, a po vsebini povsem drugaˇcni.

Tabela za vozila ima poleg imena vozila ˇse polja z datumi prvega in zadnjega tehniˇcnega pregleda, medtem ko imamo pri prostorih kvadraturo. Spletna stran za urejanje vozil ima tudi moˇznost izpisa vozil s preteˇcenimi tehniˇcnimi pregledi in izvoz teh podatkov v JSON datoteko. Obe strani bi lahko po

(60)

Slika 4.7: Urejanje vozil

potrebi ˇse nadgradili. Primer ˇcesa je recimo oddajanje prostorov v gasilskem domu, saj imajo nekateri gasilski domovi dvorane, ki se jih lahko najame.

Ko je uporabnik zadovoljen s svojo izbiro, le to potrdi z gumbom dodeli.

4.3.6 Spletna stran za urejanje opreme

Spletna stran za urejanje opreme (slika 4.8) ima poleg operacij za urejanje ˇse dodaten gumb za dodeljevanje opreme. Ta gumb odpira spletno stran za dodeljevanje lastnikov opreme. Opremo si lahko lastijo gasilke in gasilci, vozila ali pa prostori gasilnega doma. V ta namen smo uporabili spustni seznam, ki odpira Vue komponente (v tem primeru tabele) glede na izbiro iz spustnega seznama (slika 4.10). Vse tabele so sestavljene na enak naˇcin kot tabele za urejanje modelov, zato vsebujejo polje za iskanje in razvrˇsˇcanje po stolpcih. Uporabnik izbere ˇzeljenega lastnika in ga potrdi z gumbom Dodeli. Na tej spletni strani lahko izpiˇsemo tudi vso opremo s preteˇcenimi roki uporabe. Te podatke lahko tudi izvozimo v JSON datoteko (slika 4.9).

(61)

Diplomska naloga 45

Slika 4.8: Urejanje opreme

4.4 Dodajanje skrbnikov druˇ stva

Ker je navadno v gasilskih druˇstvih veˇc spletnih skrbnikov, smo v portal Gasilski-dom.com dodali tudi to moˇznost. Uporabnika po registraciji (slika 4.11) priˇcaka spletna stran, na kateri si lahko izbere moˇznost tvorbe novega gasilskega doma ali pa poiˇsˇce ˇze ustvarjenega. Pri kreiranju novega gasilskega doma mora biti uporabnik pozoren na izbiro enoliˇcnega imena, ki ga ˇse ni v podatkovni bazi. Po izbiri imena portal uporabnika preusmeri na glavno

Slika 4.9: Javascript funkcija za izvoz podatkov preteˇcene opreme v datoteko v ogrodju Vue.js

(62)

Slika 4.10: Povezovanje opreme z lastnikom

Slika 4.11: Stran, ki priˇcaka uporabnika po registraciji

spletno stran gasilskega druˇstva in mu dodeli skrbniˇstvo nad novo nastalim gasilskim druˇstvom. ˇCe se uporabnik ˇzeli pridruˇziti gasilskemu domu, ima na voljo seznam ˇze obstojeˇcih gasilskih domov. Na ta naˇcin uporabnik lahko zaprosi za sprejem v veˇc razliˇcnih druˇstevih. Obveljala bo vˇclanitev v tisto druˇstvo, katerega skrbnik bo prvi sprejel njegovo proˇsnjo za vstop. Uporab-

(63)

Diplomska naloga 47 nik, ki se pridruˇzi ˇze obstojeˇcemu druˇstvu avtomatsko pridobi enake pravice kakor ostali skrbniki, ki so ˇze bili v druˇstvu.

4.5 Zakljuˇ cek

Celoten postopek dodajanja spletnih strani je bil dolgotrajen postopek. Kljub temu, da smo morali obliko spletnih strani definirati le enkrat, ima vsaka spletna stran svoje posebnosti, ki jih je bilo potrebno implementirati (na primer moˇznost dodelitve lastnika oziroma lokacije opremi). Po koncu implementacije zadnje od spletnih strani smo zaˇceli s testiranjem celotnega sistema, ter se nato posvetili analizi uporabe.

(64)

(65)

Poglavje 5 Analiza

V tem poglavju bomo primerjali, kako dobro trije izbrani sistemi (Itemit, Gasilski-dom.com in Vulkan) reˇsujejo problematiko sledenja opremi.

5.1 Kriteriji

Pri primerjavi vseh treh sistemov bomo upoˇstevali predvsem:

• Funkcionalnosti sistema. ˇCe sistem ne reˇsuje problema, so ostali kriteriji nepomembni, saj ga v tem primeru ni smiselno uporabljati za reˇsevanje navedenega problema.

• Ceno, saj mora biti sistem dostopen vsem gasilskim druˇstvom. ˇCe je sistem brezplaˇcen, to predstavlja veliko prednost. Tudi ˇce temu ni tako, ga pri konˇcni odloˇcitvi ˇse vedno upoˇstevamo.

• Kompatibilnost z mobilnimi napravami. Prednost sistema je, ˇce je ta prilagojen za delo na mobilnih napravah, saj tako omogoˇca laˇzji popis opreme.

• Dodatne prednosti sistema. V primeru da ima sistem dodatne funkcionalnosti, ki olajˇsajo delo je to pri odloˇcitvi potrebno upoˇstevati.

49

(66)

• Morebitne dodatne slabosti sistema, ki negativno vplivajo na njegov izbor.

5.2 Ocene reˇ sitev

5.2.1 Vulkan

Vulkan ˇze sam omogoˇca dodeljevanje opreme po gasilskih vozilih, a ne omogoˇca tudi dodeljevanja in sledenja opremi v prostorih oziroma opreme dodeljene gasilcem.

Sistem je brezplaˇcen in tako dostopen za vsa druˇstva.

Sistem je mogoˇce uporabljati tudi na mobilnih napravah, a je neroden, ker se ne prilagaja velikosti naprave.

Dodatna prednost uporabe tega sistema je, da so ga skrbniki v gasilskih druˇstvih ˇze vajeni, saj je v uporabi ˇze dlje ˇcasa in se ga uporablja tudi za vodenje ostalih evidenc druˇstva (napredovanj, odlikovanj, intervencij in podobno).

Dodatna slabost sistema Vulkan je, da je vnos in dodeljevanje opreme vozilom dolgotrajen in zahteven postopek.

5.2.2 Itemit

Itemit je odliˇcna reˇsitev za sledenje opremi, saj je njen vnos enostaven, na voljo imamo veliko parametrov, omogoˇceno je sledenje opremi in tudi zdruˇzevanje opreme v kategorije. Vsakemu kosu opreme lahko priloˇzimo sliko, kar pride zelo prav, ˇce ne poznamo vseh kosov opreme po imenu.

Uporaba te reˇsitve ˇzal ni primirna za manjˇsa gasilska druˇstva, saj je cena osnovne licence slabih 300€. To si veliko manjˇsih druˇstev ne more privoˇsˇciti.

Sistem je primeren tudi za uporabo na mobilnih napravah.

Prednosti uporabe te reˇsitve so, da ima poleg sledenja opremi tudi beleˇzenje lokacije opreme z vgrajenim GPS sistemom. Na opremo brez GPS pa lahko

(67)

Diplomska naloga 51 nalepimo QR kodo za sledenje. Za opremo se beleˇzi tudi statistika, do katere imamo dostop z licenˇcno razliˇcico.

Slabost sistema je, da je tudi ob nakupu licence omejeno zgornje ˇstevilo skrbnikov (z osnovno licenco so moˇzni trije). Slabost je tudi, da bi bilo potrebno ob uporabi tega sistema implementirati ˇse dodaten sistem, ki bi usklajeval podatke med opremo v Vulkanu in opremo v Itemitu.

5.2.3 Gasilski-dom.com

Portal Gasilski-dom.com reˇsuje problem sledenja opreme, saj je bil zasnovan prav s tem ciljem. Opremo lahko dodelimo gasilcu, vozilu ali pa prostoru v gasilskem domu. Poleg tega je sistem modularen in bi lahko glede na potrebe lahko dodali kakorˇsenkoli objekt, ki bi si lastil opremo.

Reˇsitev je brezplaˇcna, saj se zavedamo, da si manjˇsa gasilska druˇstva ne morejo privoˇsˇciti dodatnih stroˇskov s sistemi za sledenje opreme.

Sistem se prilagaja napravi na kateri je uporabljen.

Poleg sledenja opreme nam sam sistem omogoˇca tudi izvoz podatkov v obliki JSON, sledenje zdravniˇskih pregledov gasilcev in datum zadnjih tehniˇcnih pregledov vozil.

Slabost portala Gasilski-dom.com je ta, da nima ˇse reˇsitve za usklajevanje podatkov glede opreme, vozil, prostorov in ˇclanov z sistemom Vulkan.

5.3 Primerjava

Po primerjavi posameznih sistemov (slika 5.1) je razvidno, da sistem Vulkan ne reˇsuje naˇse teˇzave, medtem ko sta tako sistem Itemit kakor tudi Gasilski- dom.com primerna reˇsitev za sledenja opremi. Ne glede na to kateri sistem izberemo, bomo v druˇstvu ˇse vedno potrebovali tudi sistem Vulkan, za samo sledenje opremi pa je bolje uporabiti drug sistem. Sistem Itemit sam po sebi bolje reˇsuje sledenje opremi, a je za razliko od sistema Gasilski-dom.com plaˇcljiv. Poleg tega bi nastala teˇzava tudi v primeru, ˇce bi v sistemu Vulkan odkrili novo napako, saj bi v primeru uporabe sistema Itemit potrebovali

(68)

ˇse dodaten tretji sistem za reˇsevanje novo nastale teˇzave. Sistem Gasilski- dom.com je modularen in namenjen reˇsevanju pomankljivosti v sistemu Vul- kan, kar pomeni, da bi z njegovo nadgradnjo reˇsili to teˇzavo za vsa gasilska druˇstva.

Slika 5.1: Primerjava vseh treh sistemov

(69)

Poglavje 6

Sklepne ugotovitve

V sklopu diplomske naloge smo razvili prototip portala Gasilski-dom.com, ki reˇsuje problematiko sledenja opreme v sistemu Vulkan.

Portal je bil sprva zasnovan le za sledenje opremi, a je bil nadgrajen z nekaterimi drugimi funkcijami (upravljanje s prostori, izpis vseh vozil s preteˇcenimi tehniˇcnimi pregledi, itd.), kar omogoˇca njegova modularna za- snova.

Prototip sistema je ˇze prestal prvo fazo testiranja in je trenutno v fazi nadgrajevanja. V fazi testiranja smo skupaj s ˇse dvema skrbnikoma testirali vse osnovne funkcionalnosti sistema na realnih podatkih. Skrbnika sta po testiranju tudi navedla ˇzelje po dodatni nadgradnji sistema (slike opreme in uvoz podatkov).

Ob testiranju prototipa sta bila skrbnika zelo zadovoljna z reˇsitvijo sledenja opreme. Po pogovoru smo ugotovili, da bi bilo trenutno najbolj po- membno implementirati ˇse moˇznost uvoza podatkov iz sistema Vulkan, saj se tako izognemu prepisovanju opreme med sistemoma in tako laˇzje pritegnemo nove uporabnike.

Kljub temu da je trenutni prototip sistema funkcionalen, pa vidimo glavne prednosti sistema v moˇznostih prihodnjih nadgradenj. Trenutni plan nadalj- nega razvoja sistema vkljuˇcuje sledeˇce:

• Uvoz podatkov iz portala Vulkan 53

(70)

Ker so trenutno vsi podatki gasilskih druˇstvev zabeleˇzeni v portalu Vulkan, je prva kljuˇcna stvar za nadaljno uporabnost portala moˇznost uvoza podatkov iz sistema Vulkan. Tako bomo skrbnikom omogoˇcili, da lahko ob zaˇcetku uporabe portala hitro dodajo vso opremo, vozila in gasilce.

• Dodajanje kategorije opremi

Podobno kot portal Vulkan bomo tudi na portalu Gasilski-dom.com implementirali kategoriziranje opreme. To bo omogoˇcalo laˇzje filtriranje in iskanje opreme. Vnosi v ˇsifrantu bodo podobni kakor na portalu Vulkan, saj bomo morali ob uvozu podatkov iz Vulkana poskrbeti da se kategorije opreme ustrezno preslikale v ˇsifrant portala Gasilski- dom.com

• Ustvajanje razliˇcnih vrst skrbnikov

Implementirali bomo moˇznost dodajanja razliˇcnih skrbnikov na portalu. Tako bomo bomo imeli glavnega skrbnika, ki to avtomatsko postane ob kreiranju gasilskega druˇstva. Ostalim skrbnikom, ki so naknadno sprejeti v druˇstvo pa ob sprejemu glavni skrbnik lahko dodeli vlogo znotraj druˇstva (npr. skrbnik za vozni park).

• Dodatna polja za fotografije

Ideja se je pojavila med pogovorom z drugimi skbniki, ki so omenili, da bi bilo uporabno ob popisu nove opreme le-to tudi fotografirati in fotografijo dodati k opisu opreme. Ker je naˇs portal primeren tudi za mobilne naprave, bi lahko ob popisu nove opreme fotografijo dodali kar z fotoaparatom mobilne naprave.

• Beleˇzenje izvozov

Zaˇzeljeno bi bilo, da bi portal omogoˇcal tudi beleˇzenje izvozov vozil. To bomo naknadno dodali portalu kot nov modul, kjer se bo lahko upra- vljalo izvoze vozil na enak naˇcin kakor se upravlja prostore v gasilskem domu. Tu bomo poleg komponente tabele iz knjiˇznice BootstrapVue

(71)

Diplomska naloga 55 lahko uporabili tudi komponento koledarja za prikaz izvozov po dnevih v mesecu.

(72)

(73)

Viri

[1] Angular. url: https://angular.io/.

[2] Apache. url:https://httpd.apache.org/ (pridobljeno 6. 6. 2021).

[3] AssetSonar. url:https://www.assetsonar.com.

[4] Bcrypt. url: https://www.npmjs.com/package/bcrypt(pridobljeno 10. 8. 2021).

[5] Martin Bean.Laravel 5 Essentials. Packt, 2015.

[6] bootstrap. url: https://getbootstrap.com/(pridobljeno 7. 6. 2021).

[7] bootstrapVue.url:https://bootstrap-vue.org/(pridobljeno 7. 6. 2021).

[8] Codeigniter. url: https://codeigniter.com/.

[9] CSS W3C pregledna stran. url: https://www.w3.org/Style/CSS/

Overview.en.html(pridobljeno 6. 6. 2021).

[10] FileZilla.url:https://filezilla-project.org/(pridobljeno 12. 11. 2021).

[11] Gas2000. url: https://gasilec.net/komisija-za-informatiko/.

[12] Github. url:https://github.com/ (pridobljeno 10. 11. 2021).

[13] GZS.UPORABNIˇSKI PRIRO ˇCNIK ZA RA ˇCUNALNIˇSKI PROGRAM VULKAN. Accessed: 9.1.2022.

[14] HeidiSQL.url:https://www.heidisql.com/(pridobljeno 7. 6. 2021).

[15] HTML Living Standard. url: https : / / html . spec . whatwg . org/

(pridobljeno 6. 6. 2021).

[16] Itemite. url:https://itemit.com/.

57

(74)

[17] Jira. url: https://www.atlassian.com/software/jira/service- management.

[18] JSON. url: https : / / www . json . org / json - en . html (pridobljeno 12. 8. 2021).

[19] Matic Lahajnar.Spletna in mobilna aplikacija za upravljanje delovanja gasilskega druˇstva. Univerza v Ljubljani. 2020.

[20] Laravel. url:https://laravel.com/ (pridobljeno 6. 6. 2021).

[21] Laravel blade. url: https://laravel.com/docs/8.x/blade (pridobljeno 9. 8. 2021).

[22] Laravel popularity. url: https : / / kordes . dev / posts / ruby - on - rails-vs-django-vs-laravel-popularity.

[23] Logos. url: https://www.logos.si/.

[24] Logos Vulkan. url:https://www.logos.si/Home/Produkti_Vulkan.

[25] Callum Macrae. Vue.js: Up and Running. O’Reilly Media, 2018.

[26] Mercury.url:http://www.pmail.com/overviews/ovw_mercury.htm (pridobljeno 12. 11. 2021).

[27] MongoDB. url:https://www.mongodb.com/.

[28] MVC. url: https://towardsdatascience.com/everything- you- need-to-know-about-mvc-architecture-3c827930b4c1.

[29] MVC model. url: https : / / commons . wikimedia . org / wiki / File : Router-MVC-DB.svg (pridobljeno 6. 6. 2021).

[30] MySQL. url: https://www.mysql.com/ (pridobljeno 6. 6. 2021).

[31] Najbolj priljubljen urejevalnik.url:https://insights.stackoverflow.

com/survey/2021#section-most-popular-technologies-integrated- development-environment (pridobljeno 10. 11. 2021).

[32] NodeJs. url: https://nodejs.org/en/ (pridobljeno 7. 6. 2021).

[33] NSA css razliˇcice. url: https : / / nsa - splet . si / css / uvod / css - uvod-03-verzije.php.

(75)

Diplomska naloga 59 [34] PHP. url: https://www.php.net/(pridobljeno 6. 6. 2021).

[35] phpMyAdmin. url: https : / / www . phpmyadmin . net/ (pridobljeno 7. 6. 2021).

[36] PyCharm. url: https://www.jetbrains.com/pycharm/(pridobljeno 7. 6. 2021).

[37] React.url: https://reactjs.org/.

[38] RedBite Solutions. url: https://www.redbite.com/.

[39] SAP. url: https : / / www . sap . com / slovenia / index . html (pridobljeno 12. 11. 2021).

[40] SAP PowerDesigner.url:https://www.sap.com/products/powerdesigner- data-modeling-tools.html(pridobljeno 6. 6. 2021).

[41] Sass.url:https://sass-lang.com/.

[42] Skyhook. url: https://www.skyhook.com.

[43] Spin.url: https://spin3.sos112.si/javno/zemljevid.

[44] Tomcat.url:http://tomcat.apache.org/(pridobljeno 12. 11. 2021).

[45] TypeScript. url: https : / / www . typescriptlang . org/ (pridobljeno 7. 6. 2021).

[46] Visual Studio Code. url: https://code.visualstudio.com/ (pridobljeno 6. 6. 2021).

[47] Vue.js.url: https://vuejs.org/ (pridobljeno 6. 6. 2021).

[48] Vulkan. url: https://www.logos.si/Home/Produkti_Vulkan (pridobljeno 18. 6. 2021).

[49] Vulkan lokacija. url: http://www.gasilec-stara.net/operativa/

informatika.

[50] w3c. url: https://www.w3.org/.

[51] Whatwg.url: https://whatwg.org/.

(76)

[52] XAMPP. url: https://www.apachefriends.org/index.html (pridobljeno 6. 6. 2021).