VEČSTANOVANJSKE OBJEKTE

Fakulteta za elektrotehniko, računalništvo in informatiko

Smetanova ulica 17 2000 Maribor, Slovenija

Gregor Lenič

SPLETNA APLIKACIJA ZA

VEČSTANOVANJSKE OBJEKTE

Diplomsko delo

Maribor, september 2015

SPLETNA APLIKACIJA ZA VEČSTANOVANJSKE

OBJEKTE

Diplomsko delo visokošolskega študijskega programa

Študent: Gregor Lenič

Študijski program: VS ŠP Informatika

Smer: Informatika in tehnologije komuniciranja

Mentor: Boštjan Šumak

Lektorica: Ksenija Pečnik, prof.

i

ii

ZAHVALA

Za vse nasvete in podporo za uspešno izdelavo

diplomske naloge se zahvaljujem mentorju Boštjanu

ŠUMAKU. Zahvalil bi se tudi mentorjema

praktičnega izobraževanja Boštjanu KODRIČU in

Borutu JAKOVCU, ker sta mi omogočila

izobraževanje, ki je bilo ključno za izdelavo

diplomske naloge.

Hkrati se bi rad zahvalil vsem domačim, ki so me

spodbujali in mi stali ob strani vse do konca.

iii

Spletna aplikacija za večstanovanjske objekte

Ključne besede: spletna aplikacija, spletno programiranje, spletne tehnologije, spletno

okolje.

UDK: 004.777:628.17(043.2)

Povzetek

V diplomski nalogi je predstavljena spletna aplikacija, ki se uporablja v večstanovanjskih

objektih za beleženje virov, kot so voda, elektrika in ogrevanje. Aplikacija omogoča

zanesljivo beleženje porabe vodnih virov in vsebuje opozorilni sistem, ki po elektronski pošti

pošilja obvestila. Prav tako vsebuje prikaz statistike, ki omogoča pregled porabe virov prek

izrisanih grafov in tortnih diagramov. V diplomskem delu je opisano načrtovanje aplikacije,

ki se je začelo z novico na spletnem portalu, ki govori o problemu stanovalcev v

večstanovanjskih objektih pri beleženju porabe virov. V nalogi so v več poglavjih opisane

različne spletne tehnologije, s katerimi je izgrajena aplikacija. Poglavja so razgrajena po

arhitekturi delovanja spletnega strežnika in vsebujejo tehnologije, kot so programski jezik

PHP, označevalni jezik HTML, programski jezik JavaScript, programska knjižnica jQuery,

aplikacijsko ogrodje ExtJS, poizvedovalni jezik SQL, spletni strežnik Apache, relacijska

podatkovna baza MySQL, metoda AJAX in slogovni jezik CSS. Naloga opisuje postopek

nameščanja spletnega okolja, ki omogoča delovanje in dostopnost aplikacije prek javnega

spleta. Končna aplikacija je v delujočem stanju in je pripravljena za uporabo, vendar ima

še prostor za nadaljnji razvoj, saj trenutno omogoča le beleženje porabe vodnih virov.

iv

Web application for residential buildings

Key words: web application, web programming, web tehnologies, web environment.

UDK: 004.777:628.17(043.2)

Abstract

The thesis presents a web application, which is used in multi-flat buildings for recording

resources such as water, electricity and heating. The application enables reliable recording

of consumption of water resources and includes a warning system that sends e-mail

notifications. It also contains statistics show that provides an overview of resource

consumption through the plotted graphs and pie charts. This thesis describes the planning

of the application, which began with the news on a web portal, which cites the problem in

apartment blocks for recording resource consumption. The paper describes the various web

technologies with which the application is built, and are divided into several chapters. The

chapters are built according to the architecture of a web server and include technologies

such as programming language PHP, markup language HTML, programming language

JavaScript, computer library jQuery, application framework ExtJS, query language SQL,

Apache web server, relational database MySQL, method of AJAX and CSS style laguage.

The task contains a procedure for installing the online environment that enables

performance and availability of applications over the public Internet. The final application

is in working condition and is ready for use, but still has room for further development, as

it currently only allows for recording consumption of water resources.

v

KAZALO

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

1.1 Opis področja in opredelitev problema ................................................................... 1

1.2 Cilj diplomske naloge ............................................................................................. 2

1.3 Struktura diplomske naloge .................................................................................... 3

2 TRIRAVENSKA APLIKACIJSKA ARHITEKTURA ................................................. 4

3 RAVEN POSLOVNE LOGIKE .................................................................................... 6

3.1 Odjemalec ............................................................................................................... 6

3.1.1 JavaScript ........................................................................................................ 7

3.1.2 jQuery .............................................................................................................. 8

3.1.3 Ajax ................................................................................................................. 8

3.1.4 HTML .............................................................................................................. 9

3.1.5 CSS .................................................................................................................. 9

3.1.6 Bootstrap ........................................................................................................ 10

3.1.7 ExtJS .............................................................................................................. 11

3.2 Strežnik ................................................................................................................. 16

3.2.1 PHP ................................................................................................................ 16

3.2.2 SQL ................................................................................................................ 17

3.3 Standardni protokoli ............................................................................................. 18

3.3.1 FTP ................................................................................................................ 18

3.3.2 SMTP ............................................................................................................. 20

3.4 Ostale storitve ....................................................................................................... 20

3.4.1 Spletno gostovanje ......................................................................................... 20

3.4.2 Cron job ......................................................................................................... 21

4 PODATKOVNI RAVEN ............................................................................................. 22

4.1 Podatkovna baza ................................................................................................... 22

4.1.1 MySQL .......................................................................................................... 23

5 PREDSTAVITVENA RAVEN ................................................................................... 24

5.1 Načrtovanje in funkcionalnosti ............................................................................. 24

5.2 ER-diagram ........................................................................................................... 26

5.3 Diagram primerov uporabe ................................................................................... 27

vi

5.4 Administrativne funkcionalnosti ........................................................................... 28

5.5 Uporabnikove funkcionalnosti .............................................................................. 31

5.6 Vzpostavitev spletne aplikacije ............................................................................ 33

5.7 Rezultati ................................................................................................................ 34

5.8 Nadaljnji razvoj ..................................................................................................... 35

6 ZAKLJUČEK ............................................................................................................... 36

VIRI IN LITERATURA ...................................................................................................... 37

vii

KAZALO SLIK

Slika 1: Primer merilnih naprav v večstanovanjskem objektu .............................................. 3

Slika 2: Triravenska arhitektura ............................................................................................ 4

Slika 3: Osnovne tehnologije poslovne logike ...................................................................... 6

Slika 4: Primer uporabe JavaScripta in ikona ........................................................................ 7

Slika 5: Primer proženja skripte jQuery ................................................................................ 8

Slika 6: Klicanje post metode s funkcijo jQuery ................................................................... 9

Slika 7: Primer uporabe označevalnega jezika HTML .......................................................... 9

Slika 8: Kaskadna stilska podloga ....................................................................................... 10

Slika 9: Bootstrap, prilagojen za mobilne naprave .............................................................. 10

Slika 10: Razširljiva knjižnica za JavaScript – Extended JavaScript .................................. 11

Slika 11: Primer kode podatkovne trgovine ExtJs .............................................................. 13

Slika 12: Primer mreže v ExtJS 4.2 ..................................................................................... 14

Slika 13: Primer kode panele ............................................................................................... 15

Slika 14: Primer PHP-programiranja in logo ...................................................................... 17

Slika 15: Prikaz podatkovne ravni ....................................................................................... 22

Slika 16: ER-diagram aplikacije .......................................................................................... 26

Slika 17: Diagram primerov uporabe .................................................................................. 27

Slika 18: Upravljanje objektov ............................................................................................ 28

Slika 19: Upravljanje pravic ................................................................................................ 29

Slika 20: Upravljanje elektronske pošte .............................................................................. 30

Slika 21: Upravljanje števcev .............................................................................................. 30

Slika 22: Upravljanje beleženja vode .................................................................................. 31

Slika 23: Upravljanje časa beleženja ................................................................................... 31

Slika 24: Pregled porabe vodnih virov ................................................................................ 32

Slika 25: Pregled osebnih podatkov .................................................................................... 33

viii

KRATICE

HTML jezik za označevanje nadbesedila

CSS kaskadne stilske podloge

OS operacijski sistem

PHP orodja za osebno spletno stran

ExtJS razširjeni JavaScript

FTP protokol za prenos datotek

SMTP protokol za prenos elektronske pošte

IP internet protokol

WAMP aplikacijski strežnik (Windows, Apache, Mysql, PHP)

Spletna aplikacija za večstanovanjske objekte (bloke)

1

1 UVOD

1.1 Opis področja in opredelitev problema

V večstanovanjskih objektih je potrebno beleženje porabe virov, kot so elektrika, voda in

ogrevanje. Beleženje je v določenih primerih že urejeno, saj se uporabljajo različne digitalne

merilne naprave, ki omogočajo avtomatizirano pridobivanje podatkov prek omrežja. Cena

tovrstne rešitve pa je zelo visoka, zato se po večstanovanjskih objektih e še vedno trudijo s

starim načinom beleženja porabe virov. V večini primerov, ki smo jih zasledili na spletu

([14][16]) ali zabeležili prek pogovora s stanovalci, smo ugotovili, da na analogni merilni

napravi preberejo porabo vode ter količino zapišejo na listek. Ta listek z informacijami

oddajo v poštni nabiralnik osebe, ki je zadolžena za vodenje beleženja virov. Nato ta oseba

vse ročno vpisuje v zvezek ali v razpredelnico v MS Excelu. Ta rešitev ni optimizirana, saj

pogosto pride do napak, kot so napake pri vnašanju, izračunavanju in statistiki. Ker trenutni

sistem ni optimiziran, smo se odločili, da razvijemo aplikacijo, ki vodi beleženje ter je

cenovno ugodnejša od obstoječih tehnologij, ki zahtevajo namestitev digitalnih merilnih

naprav, in jo povežemo z omrežjem. Ugotovili smo tudi, da v nekaterih objektih porabo

virov enakovredno porazdelijo po osebah, kar je nepravično do oseb, ki varčujejo in imajo

nizko porabo virov, saj morajo vsi stanovalci plačati enako vsoto. Sodobna rešitev za

problem že obstaja, vendar je draga in si je manjše ustanove enostavno ne morejo privoščiti.

Ta problem je rešen s pomočjo digitalnih merilnih naprav, ki same merijo porabo virov in jo

nato prek brezžičnega omrežja pošljejo na strežnik, pri čemer skoraj niso možne napake. Za

ta način pa je treba izdelati sistem, ki ima podoben značaj kot naša aplikacija in mora kot

naša omogočati urejanje podatkov prek fizične osebe.

Trenuten sistem ima veliko težav, kot so napake zadolženih oseb, napake pri izračunu,

neprimerno obveščanje osebja in neprimerno prenašanje podatkov. Najbolj izpostavljena

težava je pozabljanje stanovalcev o času beleženja, saj so obveščeni prek lista na oglasni


2

deski pri vhodnih vratih stanovanjskega objekta. Stanovalci to obvestilo enostavno

spregledajo ali pozabijo. Prav tako smo se odločili izboljšati oziroma rešiti to težavo s

spletnimi tehnologijami, ki bodo prek elektronskih obvestil obveščale stanovalce.

Naleteli smo tudi na težavo, ko stanovalci želijo vpogledati v statistiko porabe čez leto in

njene letne spremembe. Trenutna rešitev je ročno računanje lastne porabe virov, ki jo lahko

stanovalec pridobi iz zabeleženih podatkov, do katerih dostopa prek nadzorne osebe. Zaradi

nepraktičnosti te rešitve smo se odločili, da pregled nad porabo virov poenostavimo s

pomočjo grafov in s tem stanovalcem omogočimo lažji pregled nad statistiko.

1.2 Cilj diplomske naloge

Cilj diplomske naloge je izdelava spletne aplikacije, ki bo rešila zgoraj navedene težave in

stanovalcem olajšala delo ter zmanjšala ali popolnoma odstranila število napak oziroma

odstopanj, ki nastanejo pri tem neoptimiziranem procesu.

Cilj spletne aplikacije je uspešno vodenje in beleženje porabe vode, saj v marsikaterem

objektu uporabljajo analogne namesto digitalnih merilnih naprav, ki samostojno pošiljajo

podatke do sistema, ki opravlja beleženje porabe virov. Težavo bomo rešili tako, da bodo

stanovalci lahko v nekem časovnem območju vnesli porabo vode, kar bodo storili s pomočjo

spletnega portala, kamor bodo vnašali količine porabljene vode, ki je zapisana na merilni

napravi. Ta števila pa se bodo zabeležila v podatkovno bazo.

Za popis merilnih naprav v stanovanju bodo zadolženi stanovalci sami. Prav tako je potreben

nadzor celotne porabe vode v večstanovanjskem objektu, za kar bo zadolžena uradna oseba,

ki bo nadzorovala zunanje merilne naprave. Zunanja merilna naprava vodi do vseh ostalih

merilnih naprav, tako je na njihovi podlagi vidna dejanska poraba vode v stanovanjih, kar

pomeni, da prevara sistema ni mogoča.


3

Slika 1: Primer merilnih naprav v večstanovanjskem objektu

Vir: Lasten izdelek

Ena izmed funkcij spletne aplikacije bo opozorilni sistem, ki bo stanovalcem poslal

elektronsko pošto in jih primerno obvestil o beleženju. Opozorilni sistem bo upravljala

nadzorna oseba, saj bo spreminjala vsebino sporočila in določala njegov interval pošiljanja.

Prav tako bo imela možnost pošiljanja obvestil oziroma opozoril posameznikom in

zamudnikom.

Za lažji pregled nad dejansko porabo vode bomo stanovalcem omogočili pregled celotne

statistike, prek katere bodo lahko razbrali, kdaj je njihova poraba večja, in jo tako v prihodnje

zmanjšali.

1.3 Struktura diplomske naloge

Struktura diplomske naloge je sestavljena iz opisa tehnologij in rešitve težave. V drugem

poglavju so navedene tehnologije, ki so bile uporabljene za izdelavo spletne aplikacije. To

so različni programski jeziki, platforme, protokoli in ostale tehnologije. Po opisanih

tehnologijah sledi tretje poglavje, ki predstavlja postopek načrtovanja in obrazložitev vseh

funkcij, ki sestavljajo spletno aplikacijo. V četrtem poglavju so navedeni rezultati in cilji za

nadaljnji razvoj aplikacije, da bo ta v celoti podprla želje strank.


4

2 TRIRAVENSKA APLIKACIJSKA ARHITEKTURA

Triravenska aplikacijska arhitektura je porazdelitev uporabniških vsebin in funkcionalnosti

ter navaja njune medsebojne povezave. Zanjo je značilno, da ima razpoložljive vsebine in

komunikacijske prehode. Nastajajo uporabniški podatki, ki jih povezujemo iz drugih ločenih

lokalnih ali oddaljenih IT-sistemov. Dobro zasnovana informacijska arhitektura zagotavlja

najoptimalnejšo organizacijo vsebine in podatkov ter nudi enostavno upravljanje vsebin z

uporabo različnih sistemov.

Triravenska arhitektura se pogosto uporablja pri spletnih straneh, ki vsebujejo elektronska

poslovanja ali pa so večjega obsega. Arhitektura je sestavljena iz treh ravni: poslovne logike,

podatkovne in predstavitvene ravni [21].

Slika 2: Triravenska arhitektura

Vir: http://www.ditea.si/wp-content/uploads/2014/03/tehnologije-arhitektura.jpg


5

Raven poslovne logike

Raven poslovne logike skrbi za koordinacijo aplikacije in je najpomembnejši del triravenske

arhitekture. Tu se izvajajo različne kontrole in ukazi, kar pomeni, da se na tej ravni izvaja

velika količina programske kode. Na to raven uvrščamo različne tehnologije, ki smo jih

uporabili pri izdelavi aplikacije, kot so: PHP, JavaScript, jQuery, ExtJS itd.

Podatkovna raven

Podatkovna raven predstavlja pridobivanje, dodajanje in urejanje podatkov v podatkovni

bazi ter jih posreduje nazaj na raven poslovne logike, kjer se podatki ustrezno obdelajo in

pripravijo glede na zahtevo uporabnika.

Predstavitvena raven

Predstavitvena raven se uporablja za predstavitev aplikacije in se osredotoča na izdelek.

Vsebuje predstavitev načrtovanja, funkcionalnosti in poteka vzpostavitve spletne aplikacije.


6

3 RAVEN POSLOVNE LOGIKE

Težavo bomo rešili s pomočjo spletnih tehnologij, saj smo na tej ravni že izkušeni in je

primerna rešitev, ki omogoča stanovalcem upravljanje podatkov prek spletne aplikacije.

Obstaja veliko programskih jezikov, s katerimi bi lahko rešili problem, vendar je za našo

aplikacijo najprimernejše, da jo izdelamo s programskim jezikom JavaScript, saj je podprt z

vsemi današnjimi brskalniki. To je programski jezik, ki se izvaja na strani odjemalca in skrbi,

da se podatki pravilno prikažejo. Podatke pa pridobimo s pomočjo odprtokodnega

programskega jezika PHP, ki podatke črpa iz podatkovne baze ter jih s pomočjo internetnih

protokolov pošlje do odjemalca. Spletna aplikacija bo delovala na vseh sodobnih

brskalnikih, kot so na primer: Google Chrome, Mozilla Firefox, Opera, Microsoft Edge,

Safari in Internet Explorer.

Slika 3: Osnovne tehnologije poslovne logike

Vir: Lasten izdelek

3.1 Odjemalec

V omrežju so lahko računalniki v vlogi odjemalca ali v vlogi strežnika. Odjemalec je

računalnik, na katerem uporabnik dela. Odjemalec je prav tako sinonim za gosta in v svetu

računalništva pomeni delovanje spletne storitve na odjemalčevi napravi. To pomeni, da

storitev porablja procesne vire na odjemalčevi napravi in s tem strežnik ni obremenjen [12].


7

3.1.1 JavaScript

JavaScript je skriptni jezik, ki sodeluje z označevalnim jezikom HTML. Naredi ga

dinamičnega in omogoča večji nadzor nad brskalnikom. Omogoča izboljšanje in

posodobitev oblike, izdelovanje piškotkov itd. Sintaksa jezika JavaScript sledi

programskemu jeziku C, zato je izvedba odvisna od gostitelja in ni povezana s programskim

jezikom Java. JavaScript ima veliko prednosti, kot je na primer računanje različnih operacij

in generiranje HTML elementov brez osvežitve strani. Razvil ga je NetScape in ga še vedno

razvija.

Vzpostavitev delovanja jezika dosežemo z vključitvijo skripte v HTML in kličemo funkcije,

ki bodo stran dinamično spreminjale in naredile bolj razvidno.

JavaScript se uporablja tudi v različnih orodjih, kot so Adobe Acrobat in Adobe Reader.

Podprt je tudi s strani operacijskih sistemov, kot so Windows Microsoft in Mac OS X.

Razvoj jezika se je začel leta 1995, ko je podjetje Netscape najelo Brendana Eicha z

namenom, da razvije programski jezik, ki bi označevalnemu jeziku HTML pomagal pri

slikah, vtičnikih in ostalih težavah [2][10][23].

document.getElementById("id").innerHTML = "Pozdravljena JavaScript";

Slika 4: Primer uporabe JavaScripta in ikona

Vir: http://www.b2bweb.fr/wp-content/uploads/js-logo-badge-512.png


8

3.1.2 jQuery

jQuery je danes najbolj razširjena JavaScript knjižnica, saj jo uporablja večina spletnih strani

in je odprtokodna programska oprema, ki se vključi ter uporabi v jeziku JavaScript.

Zasnovana je tako, da omogoča lažjo navigacijo po elementih, zmožna je ustvarjati

animacije, na voljo ima sprožitev različnih dogodkov in omogoča razvijanje Ajax aplikacije

[24].

$(document).ready(function(){

$("p").click(function(){ $(this).hide();

}); });

Slika 5: Primer proženja skripte jQuery

Vir: http://www.phpteacheronline.com/wp-content/uploads/2015/08/jquery.png

3.1.3 Ajax

Ajax je asinhrona metoda pošiljanja podatkov, ki se na podlagi jezika JavaScript uporablja

za ustvarjanje interaktivnih spletnih aplikacij, in je skupek med seboj povezanih razvojnih

tehnologij. Beseda asinhrono pomeni, da Ajax izmenjuje podatke s strežnikom brez potrebe

po ponovnem nalaganju strani in tako deluje v ozadju. To omogoča razvoj hitrejše spletne

aplikacije, saj se znova naloži del spletne strani, na katerem je bil klican Ajax. Ta tehnologija

je bila prvič omenjena in skovana leta 2005, ko jo je Jesse James Garrett omenil v članku.

Tehnologije, na katerih temelji Ajax, so se začele razvijati že sredi 90. let, ko je podjetje

Microsoft v svoj brskalnik vključilo konstruktor iFrame [1].


9

$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

Slika 6: Klicanje post metode s funkcijo jQuery

3.1.4 HTML

HTML je označevalni jezik za izdelavo spletnih strani in predpostavlja osnovo spletnega

dokumenta. S pomočjo elementov se sestavi spletni dokument z določeno strukturo delov.

Ker je HTML označevalni jezik, ga lahko napišemo v kateremkoli urejevalniku besedil in

poženemo v vsakem spletnem brskalniku.

Trenutna najnovejša različica tega jezika je HTML5 z različnimi funkcijami in elementi.

Najbolj izstopata elementa <video> in <audio>, saj je vedno več spletnih strani, ki vsebujejo

zvočne oziroma videodokumente [9].

<!DOCTYPE html> <html> <head>

<title>Naslov strani</title> </head> <body>

<h1>To je naslov</h1> <p>To je tekst.</p>

</body> </html>

Slika 7: Primer uporabe označevalnega jezika HTML

Vir: https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-

HTML5_logo_and_wordmark.svg.png

3.1.5 CSS

CSS je slogovni jezik, ki je namenjen oblikovanju spletnih strani. Skrbi za postavitev in

prikaz vsebine HTML po programerjevih zahtevah. Mogoča je določitev barv, poravnav,

odmikov, pozicij, velikosti in drugih atributov [11].


10

CSS se je začel uveljavljati leta 1994, ko je bilo razvidno, da širše množice uporabnikov niso

bile zadovoljne z zmožnostmi označevalnega jezika HTML. Do danes je bilo več različic

CSS, danes pa se uporablja CSS 3 [22].

body { background-color: #d0e4fe;

}

Slika 8: Kaskadna stilska podloga

Vir: http://javascript.tutorialhorizon.com/files/2014/11/css3logo.png

3.1.6 Bootstrap

Bootstrap je ogrodje, ki sodeluje pri izdelavi spletnih strani. Poenostavi delo in je prilagojeno

za uporabo na mobilnih napravah, kar pomeni, da spletno stran naredi »responsive« oziroma

odzivno [4].

Odzivnost spletne strani

Uporabnost mobilnih naprav narašča, zato je vedno več povpraševanja po odzivnih spletnih

straneh, saj je pomembna privlačnost spletne strani uporabniku. Odzivnost pomeni

prilagoditev spletne strani na podlagi širine.

Slika 9: Bootstrap, prilagojen za mobilne naprave

Vir: Lasten izdelek


11

Značilnosti Bootstrapa

Bootstrap sta razvila Mark Otto in Jacob Thornton, zaposlena pri spletnem socialnem

omrežju Twitter. Izdala sta ga na spletnem portalu GitHub avgusta 2011 in je do 2014 postal

najuspešnejši projekt na portalu.

Bootstrap je za razvijalca prijazno okolje, saj je enostaven za uporabo in deluje na vseh

sodobnih brskalnikih. [4]

3.1.7 ExtJS

ExtJS je ogrodje, ki deluje na podlagi JavaScripta in se uporablja za izgradnjo interaktivnih

spletnih aplikacij, kar pomeni, da je možna izgradnja aplikacije, ki deluje na spletnem

brskalniku in je podobna namizni aplikaciji. Knjižnica je bila prvotno namenjena kot dodatek

za knjižnico YUI, ki jo je uporabljal Yahoo!. ExtJS lahko deluje s knjižnico jQuery in z

okvirjem Prototype JavaScript. Različica 1.1 je bila neodvisna od zunanjih knjižnic [7].

Knjižnica ExtJS nam omogoča izgraditi aplikacije, katerih uporabniški vmesnik vsebuje

različne menije, zavihke, podatkovne tabele, dinamične forme, odpirajoča se okna itd.

Knjižnica vsebuje različne postavitvene nastavitve, ki jih je enostavno uporabiti in z njimi

izdelati uporabniku prijazno aplikacijo. Na voljo so tudi različne stilne predloge, ki se

vključijo v glavo spletnega dokumenta in celotno aplikacijo spremenijo v privlačnejšo [17].

Slika 10: Razširljiva knjižnica za JavaScript – Extended JavaScript

Vir: http://d2ln1xbi067hum.cloudfront.net/course_offerings/logos/000/001/798/original/extjs.jpg?1435639865


12

Primerjava različic ogrodja ExtJS [8]:

različica 1.1 je začetna različica ExtJS, ki ni vsebovala toliko funkcij, kot jih imajo

sodobnejše različice. Ker je prva različica in se je ločila od knjižnice, za katero je bila

prvotno namenjena, je imela veliko pomanjkljivosti;

različica 2.0 je bila izdana konec leta 2007 in se je od predhodnice razlikovala v tem, da

je vsebovala vmesnik in lastnosti, ki so bolj podobne namiznim aplikacijam. Je različica,

s katero je prišla dokumentacija, ki je programerju pomagala pri razumevanju elementov,

dogodkov, atributov itd. Poleg dokumentacije so bili na voljo tudi različni vzorci in

primeri;

različica 3.0 je izšla približno dve leti pozneje kot predhodnica in je dobila podporo za

REST, ki je arhitekturni stil za kreiranje razširljivih spletnih storitev. Dodanih je bilo

tudi nekaj novih elementov. Bila je kompatibilna s predhodno različico (2.0), kar

pomeni, da so aplikacije, napisane v različici 2.0, delovale v tej različici;

različica 4.0 je tako kot predhodnica potrebovala dve leti za izdelavo in je vsebovala

popolnoma spremenjeno strukturo razreda. Spremenjeni so bili paketni podatki,

animacije in risanja, ki jih uporabljata grafiki SVG in VML. Vključuje tudi možnost

MVC (Model-pogled-kontrola) načina organizacije kode;

različica 5.0 je izšla sredi leta 2014 z veliko in pomembno spremembo: sposobnost

izdelovanja aplikacije za delovanje na napravah, ki imajo zaslon na dotik. Različica ima

podporo za vse sodobne in zastarele brskalnike in podpira brskalnike, ki delujejo na

mobilnih operacijskih sistemih, kot sta: Android in iOS.

3.1.7.1 ExtJS Store

Store oziroma podatkovna trgovina je razred, ki na odjemalčevi strani shrani podatke, ki jih

pridobi s pomočjo metode Ajax in elementa proxy, ter jih shrani v predpomnilnik. Prav tako

vsebuje funkcije za sortiranje in filtriranje.

Pri uporabi podatkovne trgovine je potrebna nastavitev modela in definicije elementa proxy.

S tem storitev pravilno črpa podatke.


13

var <?php echo $name.'UserStore';?>=new Ext.data.Store({ autoLoad: true, fields:[ { name: 'id_user' }, { name: 'email'}, { name: 'phone' }, { name: 'id_group' }, { name: 'group' }, { name: 'id_flat' }, { name: 'flat' }, { name: 'last_login', type: 'date', dateFormat: 'c'} ], proxy: { type: 'ajax', url: '<?php echo $ajax;?>', extraParams:{ action: 'getUsers', search: '' }, actionMethods: {create:'POST', read:'POST', update:'PUT', destroy:'DELETE'}, reader: { type: 'json', root: 'data' } } });

Slika 11: Primer kode podatkovne trgovine ExtJs

Vir: Lastna koda

3.1.7.2 ExtJS Grid

Grid ali mreža je način prikazovanja velike količine podatkov na odjemalčevi strani. V ExtJS

je mreža modificirana tabela, ki omogoča lažje pridobivanje podatkov in njihovo enostavno

sortiranje ter filtriranje.

Grid sestoji iz dveh komponent. »Store« (podatkovna trgovina) je komponenta, ki prek

»proxyja« pridobi podatke in jih posreduje v mrežo. Druga komponenta »columns« (stolpci)

je potrebna za usmeritev podatkov.


14

new Ext.grid.Panel({ id: '<?php echo $name."Grid";?>', store: <?php echo $name."Store";?>, width: '100%', height: 285, plugins: [ { ptype: 'cellediting', clicksToEdit: 2 } ], columns: [ { dataIndex:'id_flat_counter', text: 'ID', width: 50, hidden:true}, { dataIndex: 'month', text: 'Mesec', flex: 1}, { dataIndex: 'year', text: 'Leto' }, { dataIndex: 'value', text: 'Vrednost'}, { dataIndex: 'valueUse', text: 'Poraba'}, { dataIndex: 'date', text: 'Čas spremembe'} ] })

Slika 12: Primer mreže v ExtJS 4.2

Vir: Lasten izdelek

3.1.7.3 ExtJS Panel

Panela je okno, ki ima specifične funkcionalnosti in strukturne komponente ter je primerni

gradnik za aplikacije, usmerjene v uporabniške vmesnike.


15

Panela vsebuje različne gumbe in orodne vrstice tako zgoraj kot spodaj. Ima vgrajene

zložljive, razširljive in zapirljive funkcije. Panele vsebujejo postavitve (»layout«), ki

zagotavljajo pravilno postavitev notranjih komponent.

var form=new Ext.panel.Panel({ title: 'Osebni podatki', id: '<?php echo $name;?>', closable: true, iconCls: 'icon-personal-btn', border: false, layout: { type: 'hbox', align: 'stretch' }, items: [ ] });

Slika 13: Primer kode panele

Vir: Lastna koda

Form panel

Panela za obrazce je identična zgoraj razloženi paneli, vendar upravlja komponente, ki so

namenjene za obrazec. Ena izmed razlik je možnost dodajanja besedila pred vsako

komponento.

ExtJS xTypes

ExtJS vsebuje komponente, ki so definirane kot »xtype« in se ustvarijo v drugi komponenti.

Poznamo veliko komponent, najbolj znane so:

»button« je enostaven gumb, katerega najpomembnejši poslušalec je »click«,

»textfield« je besedilno okno, ki sprejme besedilo,

»combobox« je besedilno okno, v katerem se prek podatkovne trgovine shrani več

zapisov,

»numberfield« je identičen kot besedilno okno, z razliko, da sprejme samo števila.

Poleg ima tudi dva gumba, ki uporabniku omogočata število za eno povečati ali

zmanjšati.


16

3.1.7.4 ExtJS Layout

Postavitev je pomembna stvar pri programiranju, saj v veliko primerih povzroča težave.

ExtJS omogoča natančno postavljanje elementov in jih prilagaja glede na zaslon. Poznamo

več postavitvenih tipov, kot so: »border«, »columns«, »vbox« in »hbox«.

3.2 Strežnik

Strežnik je instanca, na kateri se izvaja programska oprema. Sprejema zahteve odjemalca in

mu posreduje informacije. Strežnik je prav tako naprava, ki izvrši to programsko opremo

[12].

3.2.1 PHP

PHP je odprtokodni programski jezik, ki se uporablja za razvoj dinamičnih spletnih vsebin.

Je strežniški skriptni jezik, njegovo delovanje lahko primerjamo z Microsoftovim sistemom

ASP.NET, le da PHP deluje tako na operacijskem sistemu Windows kot na operacijskih

sistemih Linux. Pogosto je zapisan v relaciji z jezikom HTML [27]. Strukturno je podoben

jezikom, kot so C in Perl, in omogoča razvijanje zapletenih programov brez dolgoročnega

učenja.

PHP je bil sprva napisan v programskem jeziku C in se je uporabljal kot zamenjava skript,

napisanih v Perlu. Nato je leta 1995 izšel kot »Personal Home Page Tool« in je danes znan

pod imenom »PHP Hypertext Preprocessor« [3].

Trenutna stabilna različica, ki se uporablja, je 5.6 in je od prejšnjih različic dobila veliko

popravkov in izboljšav. Začelo pa se je razvijanje različice 7.0, ki naj bi bila končana do

oktobra 2015 [26].


17

<?php echo "Moja prva PHP skripta!";

?>

Slika 14: Primer PHP programiranja in logo

Vir: http://php.net/manual/en/images/c0d23d2d6769e53e24a1b3136c064577-php_logo.png

3.2.2 SQL

SQL je strukturni povpraševalni jezik, ki se uporablja za delo s podatki v bazah. Je eden

izmed razširjenih povpraševalnih jezikov in se razvija od leta 1986. SQL je bil prvotno

namenjen samostojni interaktivni uporabi, nato pa so mu bile dodane lastnosti, ki omogočajo

njegovo uporabo iz različnih programskih jezikov, na primer: C, C++, COBOLO, Pascal

[13].

Osnovne operacije za uporabo jezika SQL:

»SELECT« – uporablja se za pridobivanje podatkov,

»INSERT« – služi za vnos novih zapisov v bazo,

»UPDATE« – uporablja se za posodabljanje že obstoječih zapisov,

»DELETE« – briše zapise iz baze.

Povpraševanje poleg zgoraj naštetih standardov uporablja še druge uporabne in potrebne

standarde [20]:

»FROM« – uporablja se za definiranje imena tabele, s katere se črpajo oziroma vstavljajo

podatki,

»WHERE« – vsebuje pogoje, da se pridobijo samo iskani podatki,

»JOIN« – povezuje tabele med sabo (poznamo tudi: LEFT JOIN, RIGHT JOIN itd.),

»GROUP BY« – grupira podatke po izbranih atributih,

»ORDER BY« – deluje kot sortiranje ter vsebuje opcije naraščanja in padanja (ASC,

DESC).


18

3.3 Standardni protokoli

Protokoli so zbirke pravil, ki upravljajo prenos podatkov med dvema napravama. Če sta med

sabo povezani dve ali več naprav, je treba zagotoviti, da te naprave uporabljajo enake

nastavitve sporazumevanja [12].

3.3.1 FTP

Pri izdelavi aplikacije smo se soočali tudi s tehnologijo FTP, ki smo jo uporabili za

pridobivanje datotek aplikacije, in zato, da smo aplikacijo lahko izdelovali na drugih

sistemih, kar je bilo zelo učinkovito, saj aplikacije ni bilo treba nameščati na več napravah.

FTP oziroma »File transfer protocol« je standardni protokol za prenos datotek med

različnimi sistemi. Protokol je identičen na vseh operacijskih sistemih in omogoča hitro

izmenjavanje datotek med različnimi operacijskimi sistemi. Spada pod aplikacijsko plast

sistema OSI oziroma pod peto plast protokolnega sklada TCP/IP.

FTP je osembitni protokol, ki deluje po principu strežnik–odjemalec in prenaša datoteke brez

dodatne obdelave. FTP-uporabniki lahko izvajajo storitev na podlagi uporabniškega imena

in gesla ali anonimno, če je strežnik tako konfiguriran.

FTP deluje aktivno ali pasivno, kar določa vzpostavitev podatkovne povezave. V obeh

primerih se na odjemalčevi strani ustvari protokol TCP-povezava na vratih 21, ki so privzeta

vrata za protokol FTP. V aktivnem načinu odjemalec poskuša pridobiti dohodne povezave,

ki strežniku pošljejo informacije, na katerih vratih se nahaja. To naredi prek vrat 20, ki so

strežniška vrata FTP. Strežnik nato odpre kanal z odjemalcem na svojih vratih 20, in če

odjemalec ni pod požarnim zidom, sprejme TCP-povezavo strežnika in vzpostavi povezavo.

V drugem primeru pa se sproži pasiven način, ki prek povezave pošlje ukaz in pridobi

strežniški IP in naslov vrat, s katerim se poveže s strežnikom [5][6].


19

Varne FTP-povezave

FTP ni bil oblikovan kot varen protokol in ima veliko varnostnih pomanjkljivosti. Leta 1999

je bil objavljen seznam, na katerem jih je bilo šest. Danes pa obstaja več načinov varne

povezave [5].

FTPS

FTPS je razširitev protokola FTP, ki omogoča šifriranje FTP-seje. Strežnik ima funkcijo

zavrnitve povezav, ki ne zahtevajo TLS kriptografskega protokola. Za ta protokol je bilo

določeno, da uporablja različna vrata kot navaden FTP. Čeprav je FTPS varen standard, je

precej zastarel in se ne uporablja pogosto [5].

SFTP

SFTP (varen podatkovni prenosni protokol) je podoben protokolu FTP, vendar je grajen na

drugačnih programskih tehnologijah. SFTP uporablja varnostni protokol SSH za prenos

datotek. Za razliko od FTP zašifrira tako komande kot podatke in prepreči, da bi se gesla in

informacije odkrito prenašale prek omrežja. SFTP ni zmožen delovati vzporedno s

programsko opremo FTP [5].

Zgodovina FTP

Izvirne specifikacije za FTP je napisal Abhay Bhushan in so bile javnosti dostopne sredi leta

1971. FTP je v začetnih letih deloval na NCP (mrežni kontrolni program), ki je predhodnik

protokola TCP in je bil pozneje leta 1980 s tem protokolom zamenjan. Leta 1998 pa je dobil

podporo najnovejšega protokola IPv6 [6].


20

FileZilla

FileZilla je programska oprema, ki se osredotoča na protokol FTP. Vsebuje strežniško

podporo ter podporo za odjemalca in deluje na vseh večjih operacijskih sistemih, kot so

Windows, Linux in OS X. Podpira FTP, FTPS in SFTP, kar pomeni, da je z njim mogoče

izvajanje vseh varnih razpoložljivih povezav. Na voljo je v 47 jezikih in ima veliko različnih

funkcij, ki olajšajo delo.

3.3.2 SMTP

SMTP je protokol za prenos elektronske pošte. Je standard, ki omogoča pošiljanje

elektronskih sporočil med različnimi sistemi in je povezan s protokoli TCP/IP [19].

Sendmail

Sendmail se uporablja za preusmerjanje elektronske pošte in podpira veliko metod, vključno

s SMTP, s katerim se elektronska pošta pošilja prek interneta.

Je potomec storitve delivermail, ki ga je napisal Eric Allman, in ga je mogoče namestiti na

operacijski sistem. Naslednja generacija programa se imenuje »Sendmail X«, vendar je bil

njegov razvoj ustavljen v korist novega projekta, imenovanega MeTa1 [18].

3.4 Ostale storitve

3.4.1 Spletno gostovanje

Spletno gostovanje je storitev, ki omogoča, da posamezniki ali organizacije naredijo svojo

spletno stran dostopno širšemu spletu. V našem primeru spletno aplikacijo gostujemo prek

osebnega računalnika, ki deluje za usmerjevalnikom. Za uspešno vzpostavitev spletnega

gostovanja je treba nastaviti različne nastavitve, kot je na primer Apache, ki deluje kot

strežnik in omogoča dostop do vsebine. Ker osebni računalnik leži za usmerjevalnikom, je

na njem treba odpreti vrata, ki dovolijo, da zunanje naprave lahko dostopajo do osebnega

računalnika oziroma do vsebine, ki jo želimo prikazovati.


21

Ko je strežnik pravilno nastavljen in lahko do njega dostopajo zunanje naprave, je treba v

prostor za URL vnesti IP-naslov izbranega omrežja ter zraven dopisati še vrata. Ker je

pisanje števil nepraktično, na spletu obstaja rešitev, ki omogočajo brezplačno registracijo

domene. Prek te storitve smo ustvarili domeno, ki uporabniku omogoča lažji dostop do naše

spletne strani.

3.4.2 Cron job

Programska oprema »Cron« je storitev, ki ob določenem času proži dogodke. Ti dogodki so

različni, a v našem primeru se sproži skripta PHP, ki preveri, ali je uporabnikom treba poslati

elektronsko pošto.

Opravilo se lahko proži večkrat in kadarkoli. V našem primeru se bo prožila ponoči, saj je

tedaj sistem najmanj obremenjen.

Za nastavitev opravila, ki proži skript PHP, je treba operacijskem sistemu sporočiti, kaj je

skripta PHP in katero storitev je treba uporabiti, da se uspešno izvede. Pod zaporedjem

ukazov Sistem/sistemska zaščita/napredno/spremenljivke okolja pod »path« na koncu

dodamo pot do programa PHP (npr.: »C:\WAMP\bin\php\php5.5.12«) in s tem je operacijski

sistem zmožen izvajanja skript PHP. Skript zaženemo prek datoteke »bat«, in to datoteko

nastavimo v opravilu kot datoteko, ki se proži. Ko se ob določenem času opravilo izvede, bo

to skript pognalo, in dokler je sistem vklopljen, se bo skript vedno znova prožil ob

določenem času [15].


22

4 PODATKOVNI RAVEN

4.1 Podatkovna baza

Podatkovna baza je model okolja, ki izvaja akcije in sprejema odločitve. Je orodje, ki

shranjuje, razvršča in vrača določeno informacijo, shranjeno v računalniškem sistemu.

Podatkovna baza je dostopna prek sistemov za upravljanje podatkovnih baz (v našem

primeru MySql) [12][13].

Slika 15: Prikaz podatkovne ravni

Vir: http://drenovec.tsckr.si/osnove/slike/model_okolja.gif


23

4.1.1 MySQL

MySQL je odprtokodni sistem za upravljanje s podatkovnimi bazami in je implementacija

relacijske podatkovne baze, ki deluje na podlagi jezika SQL. MySQL deluje po principu

odjemalec–strežnik, kar pomeni, da se namesti na strežnik kot sistem in porazdeli na več

strežnikov.

MySQL je od začetka veljal kot mSQL in se je uporabljal za izvajanje hitrih rutin nizke

stopnje na priključenih tabelah. Ker je njegovo delovanje počasno in ker se je razvil novi

vmesnik SQL, se je posodobljena različica preimenovala v MySQL [25].


24

5 PREDSTAVITVENA RAVEN

Spletna aplikacija Popisanci omogoča vodenje porabe virov v več stanovanjskih objektih

oziroma blokih. Aplikacija nudi veliko uporabnih funkcij, ki lahko in bodo pomagale olajšati

delo tako stanovalcem kot nadzornim osebam tega objekta. Poleg tega, da je aplikacija

uporabna, je zaradi knjižnice »ExtJS«, s pomočjo katere smo jo naredili, urejena in

enostavna.

5.1 Načrtovanje in funkcionalnosti

Pred izdelavo aplikacije smo se vprašali glede njene učinkovitosti in uporabnosti. Ko smo

na spletnem portalu Siol našli temo, da obstaja kar nekaj težav z beleženjem vode, smo

naredili korak naprej. V enem izmed stanovanjskih objektov smo povprašali glede njihovega

načina beleženja porabe vode, ki je ročno. Ugotovili smo, da je naša rešitev idealna in

praktična.

Pred načrtovanjem aplikacije smo si postavili naslednje cilje:

spletna aplikacija bo izdelana v »ExtJS« in »PHP« jeziku, saj smo na praktičnem

izobraževanju izdelovali aplikacije s temi jeziki in imamo z njimi največ izkušenj;

izdelek bo imel osnovne in vitalne funkcionalnosti, saj bi bilo za končno različico

treba vnesti več časa in surovin;

vseboval bo začetno stran, kjer bo povezava do prijavnega okna. Ta začetna stran bo

napisana v označevalnem jeziku HTML in jo bomo s pomočjo ogrodja Bootstrap

primerno oblikovali;

prijavno okno bo zahtevalo uporabniško ime in geslo. Uporabniško ime bo v našem

primeru elektronski naslov, geslo pa bo šifrirano s »PHP« funkcijo

»password_hash«. Aplikacija bo zgrajena z orodno vrstico v zgornjem delu okna,

vsebina pa bo zasedala večji del zaslona. V desnem kotu zgoraj bodo izpisani podatki


25

prijavljene osebe. V orodni vrstici levo bodo uporabniške funkcionalnosti, v desnem

pa administrativne, ki bodo uporabnikom nevidne oziroma zaklenjene;

administrativni del bo vseboval funkcionalnosti, primerne za vodenje sistema, kot

so: upravljanje uporabnikov, upravljanje objektov, dodeljevanje dostopov in pravic,

nadzor nad elektronskimi poštami in vse storitve, ki so potrebne za upravljanje

vodnih virov;

uporabniški del bo vseboval pregled nad beleženjem vode, kjer bosta tudi statistika

in zgodovina vseh beleženj njegovega stanovanja. V primeru obveznosti se bo

prikazal gumb, ki bo vodil do okna, kjer bo treba vnesti porabo za določen mesec v

letu. Vsak uporabnik bo imel dostop do svojih podatkov, ki jih bo lahko do določene

mere spreminjal.

Ko smo cilje opredelili, pa je bilo potrebno načrtovanje podatkovne baze, ki smo jo

načrtovali in prikazali s pomočjo programa »MySql Workbench«.


26

5.2 ER-diagram

Slika 16: ER-diagram aplikacije

Vir: Lasten izdelek


27

5.3 Diagram primerov uporabe

Spodaj prikazani diagram prikazuje vse funkcionalnosti izdelka in razvidno je, da ima

nadzorna oseba oziroma administrator na voljo enake funkcionalnosti kot uporabnik, saj

lahko nadzorna oseba sama stanuje v stanovanju in beleži lastno porabo virov.

Slika 17: Diagram primerov uporabe

Vir: Lasten izdelek


28

5.4 Administrativne funkcionalnosti

Upravljanje uporabnikov

Ena od pomembnejših funkcionalnosti je upravljanje uporabnikov. Ta funkcionalnost se deli

na več delov, ki vsebujejo osnovne funkcije, kot so pregled, urejanje, dodajanje in brisanje.

Vidne so različne informacije, na primer, kdaj je bil uporabnik nazadnje prijavljen v sistem.

Uporabniku se določi, v katero skupino spada (uporabnik ali administrator), in prikazuje,

katero stanovanje trenutno vodi (popisuje merilno napravo).

Upravljanje objektov

Pod upravljanje objektov spada več delov funkcionalnosti.

upravljanje blokov, ki omogoča njihov pregled, urejanje, dodajanje in brisanje;

upravljanje sektorjev, ki so deli bloka in poleg pregleda, urejanja, dodajanja in

brisanja vsebujejo še dodajanje bloka v sektor;

upravljanje stanovanj poleg vseh zgoraj navedenih funkcionalnosti vsebuje še

nadziranje uporabnikov. Ta funkcionalnost omogoča administratorju, da dodaja

oziroma odstranjuje uporabnike izbranemu stanovanju;

upravljanje stanovalcev, saj je zaradi poznejše statistike pomembno vedeti, koliko

ljudi živi v določenem stanovanju.

Slika 18: Upravljanje objektov

Vir: Lasten izdelek


29

Upravljanje dostopov in pravic

Pomembno dejstvo je, da pravice niso vezane na posamezne uporabnike, temveč na skupine,

saj je lažje nadzirati skupino ljudi kot pa vsakega posebej. Administrator ima možnost

dodajanja skupin in pravic. Nato lahko te pravice dodeli različnim skupinam.

Slika 19: Upravljanje pravic

Vir: Lasten izdelek

Upravljanje elektronskih pošt

Administrator upravlja tudi avtomatsko elektronsko pošto in si ustvarja predloge te

funkcionalnosti, ki jo pozneje tudi pošlje uporabnikom. Vsebino lahko ureja v urejevalniku

HTML, kar mu omogoča, da vsebino uredi s pomočjo označevalnega jezika HTML in

različnih stilov. Izbira tudi, katera pošta se pošlje samodejno, ko pride rok za beleženje virov.

Tu zadaj je skrita tudi funkcionalnost samodejnega pošiljanja elektronske pošte, ki se

imenuje »Cron job« in se sproži vsak dan ter preveri, ali mora poslati kakšno elektronsko

pošto.


30

Slika 20: Upravljanje elektronske pošte

Vir: Lasten izdelek

Upravljanje vodnih merilnih naprav

Vodne merilne naprave se delijo na stanovanjske in sektorske merilne naprave, za katere je

treba prilagoditi funkcionalnosti. Merilni napravi lahko določimo vrsto: sektorska ali

stanovanjska naprava. Sektorska naprava meri porabo vode v vseh stanovanjih, stanovanjska

pa porabo vode v posameznem stanovanju.

Slika 21: Upravljanje števcev

Vir: Lasten izdelek

Upravljanje beleženja vode stanovanj in sektorjev

Sistem opozarja administratorja (nadzorno osebo), kadar uporabnik v določenem obdobju ni

vnesel porabe vode v aplikacijo. Prav tako ga opozori v primeru, da stanovalec v sistem

vnese napačno količino.


31

Slika 22: Upravljanje beleženja vode

Vir: Lasten izdelek

Upravljanje časov beleženja

Prek te funkcionalnosti administrator nastavi čas beleženja virov vsakega objekta posebej.

Nastavita se lahko začetek in konec beleženja (na primer 1.8. – 10.8.). V primeru, da objekt

nima definiranega začetka in konca, se nastavita privzeti vrednosti.

Slika 23: Upravljanje časov beleženja

Vir: Lasten izdelek

5.5 Uporabnikove funkcionalnosti

Pregled porabe vodnih virov

Uporabnik ima možnost pregleda nad zgodovino porabe vodnih virov in v primeru, da je

beleženje aktivno, lahko sam vnaša porabo za tekoči mesec. Na voljo ima več pogledov:

eden izmed pogledov je prikaz vseh merilnih naprav za izbrani mesec, drug pogled pa je na

primer pregled ene merilne naprave čez leto, saj je tako preglednost večja in primernejša.

Poleg pregleda števil ima uporabnik na voljo različne grafe, ki količino porabljene vode

spremenijo v različne stolpe in tortne diagrame. V grafu je vidna poraba vseh merilnih


32

naprav ali pa vsake posebej. S tem si uporabnih lažje predstavlja, kdaj je njegova poraba

večja oziroma manjša.

Slika 24: Pregled porabe vodnih virov

Vir: Lasten izdelek

Obvezno beleženje virov

Obvezno beleženje virov je okno, ki se pojavi, ko nastopi čas beleženja. Če je ta zunaj

časovnega območja, potem uporabnik ne more dostopati do te funkcionalnosti. Funkcija

uporabnika opozori, da je beleženje aktivno, in v primeru, da uporabnik porabe virov še ni

vnesel, se gumb obarva rumeno, ko se bliža konec termina, pa je gumb rdeče barve. Kadar

uporabnik količino vode vnese pravočasno, se gumb obarva zeleno in ostane viden do konca

beleženja.

Pregled in urejanje osebnih podatkov

Aplikacija omogoča uporabniku pregled nad osebnimi informacijami. Osnovna

funkcionalnost je prikaz, ki uporabniku ponudi pregled nad svojimi nastavitvami, kot so:

prikaz dodeljene skupine, prikaz datuma vselitve ter grafični prikaz, v katerem objektu se

nahaja njegovo stanovanje. Prikazuje tudi vse sostanovalce in ima možnost spreminjanja

gesla.


33

Slika 25: Pregled osebnih podatkov

Vir: Lasten izdelek

5.6 Vzpostavitev spletne aplikacije

Spletna aplikacija Popisanci deluje s pomočjo okolja WAMP in osebnega računalnika.

Najprej smo aplikacijo vzpostavili lokalno, saj ni bilo potrebe posegati po spletnih storitvah.

Nato smo aplikacijo naredili dostopno tudi prek spleta.

Lotili smo se reševanja osnovnih sistemskih implementacij, kot so uporabniki in objekti. Z

delovanjem tega smo začeli funkcionalnosti med sabo povezovati tako, da se je

posameznemu uporabniku dodelil določen objekt. Nato je sledilo urejanje virov, ki se delijo

na dve vrsti: merilne naprave sektorja in merilne naprave stanovanja, saj je tako lažje

ugotoviti, ali se podatki ujemajo in ne pride do prevare.

Potem smo se lotili administrativnih funkcij beleženja, da lahko administrator uredi vsako

beleženje. Uredi lahko beleženje sektorja in beleženje stanovanja, saj lahko pride do napak.

Podatke lahko ureja ne glede na to, ali je beleženje aktivno ali ne. Pri nastavitvi časa

beleženja ima administrator možnost nastavitve začetka in konca beleženja za določen blok.

V primeru, da ni nastavljenega začetka in konca, se uporabijo privzete vrednosti, ki so

definirane v sistemu.

Uresničiti je bilo treba tudi uporabnikove cilje, ki so bili podobni administratorjevim.

Potrebne so bile predvsem omejitve, saj uporabniki ne morejo urejati ali brisati podatkov

zunaj aktivnega časa.


34

Nato je bilo treba implementirati skupine. Te skupine so imele definirane pravice in tako

smo ločili administratorja od navadnega uporabnika.

Funkcionalnost za pošiljanje elektronske pošte ni bila mogoča, saj aplikacija ni imela

dostopa do spleta. Zato smo celotno aplikacijo prenesli na stacionaren računalnik in jo

pravilno konfigurirali ter postavili na svetovni splet. Tu smo morali biti pozorni, saj je

naprava delovala za usmerjevalnikom in je bilo treba pravilno konfigurirati usmerjevalnik.

Ker je aplikacija z vsemi datotekami bila na drugem sistemu, smo do teh datotek morali

narediti dostop, kar smo rešili s protokolom FTP, ki smo ga izkoristili s pomočjo

odprtokodne programske opreme in ga pravilno konfigurirali. Tako smo dobili dostop do

datotek in omogočili njihovo urejanje prek ostalih naprav.

Aplikacijo smo primerno zavarovali z zaščitami, ki so jo varovale proti vdorni metodi

SQLinjection in pred različnimi vdori na silo.

Ko je aplikacija delovala na spletu, smo lahko implementirali pošiljanje elektronske pošte

tako, da se je na dan začetka beleženja uporabnikom poslala elektronska pošta in ga v tej

obveznosti obvestila.

5.7 Rezultati

Končna različica spletne aplikacije je bila poleg tega, da je rešila zastavljeno težavo, izvirno

zasnovana in izvedena. S to aplikacijo dokazujemo, da v večstanovanjskih objektih ni treba

porabiti veliko sredstev, saj bi za vzpostavitev naprednega sistema potrebovali več tisoč

evrov, naša aplikacija pa je cenovno vredna od 1.000 do 2.000 EUR in lahko z njo uspešno

vodijo beleženje porabe virov. Glavne slabosti rešitve so, da mora uporabnik imeti stalen

dostop do spletnega omrežja in osebnega računalnika. Težava nastane tudi pri upravljanju

aplikacije, pri čemer mora ustanova najeti osebo, ki bo vodila to aplikacijo, saj ni

avtomatizirana.

Tehnologije, ki smo jih uporabili, so med sabo brezhibno delovale in z njihovo pomočjo nam

je uspelo izdelati končno aplikacijo. Največjo težavo nam je povzročala storitev za pošiljanje


35

elektronske pošte, ker je sistem deloval na domačem omrežju, je bilo treba pošiljanje

elektronske pošte preusmeriti na storitev Gmail, ki je v lasti podjetja Google.

Obstaja možnost, da z izdelkom pridemo do zaslužka, saj je primerno in varno izdelan in

upošteva vsa pravila za uporabnika varno in prijazno aplikacijo.

Poleg uspešne aplikacije smo se naučili vzpostaviti spletni strežnik in izboljšali znanje o

uporabljenih tehnologijah.

5.8 Nadaljnji razvoj

Spletna aplikacija ima še nekaj pomanjkljivosti. Ena izmed večjih je beleženje ostalih virov,

kot na primer elektrike in plina. Možna je tudi storitev, s katero bi uporabniki imeli možnost

objavljanja raznih novic, komentarjev in mnenj. Za nadaljnji razvoj bi se lahko razvila

funkcionalnost za plačevanje stroškov prek aplikacije, kjer bi stanovalec s pomočjo bančne

kartice (Mastercard, Visa, Paypal) stroške poravnal kar prek spleta in bi tako sistem deloval

še hitreje. Ker pa bi bilo v to treba vnesti več časa in virov, pa smo se odločili, da za

diplomsko delo te storitve ne vključimo.

Velik napredek za prihodnjo uporabo bi bila prilagoditev celotne aplikacije na ExtJS 6, saj

podpira mobilne naprave in bi bila aplikacija bolj uporabna, saj bi lahko stanovalci do nje

dostopali tudi zunaj doma.


36

6 ZAKLJUČEK

Uspešno je nastala aplikacija, ki pomaga pri vodenju večstanovanjskih objektov, saj je na

podlagi testiranja zanesljiva in je pripravljena na resničen primer oziroma bi se lahko začela

uporabljati v objektih, kjer imajo težavo z nadziranjem porabe vode. Projekt je bil zahteven,

saj je bilo sprva treba težavo dokazati in jo pozneje tudi načrtovati. Načrtovanje se je izkazalo

za uspešno in pomembno, saj nam je v razvoju omogočalo lažji in hitrejši razvoj spletne

aplikacije.

Pri izdelavi aplikacije smo se odločili za spletne tehnologije, saj smo na tem področju že

izkušeni in strank nismo želeli omejiti z raznimi namiznimi aplikacijami. Ker je ta aplikacija

namenjena za vodenje in vnašanje informacij, smo se odločili, da aplikacijo zgradimo s

pomočjo knjižnice Ext JavaScript, ki je ustvarjena za reševanje naših primerov.

Vsaka spletna aplikacija potrebuje tudi spletni strežnik, ki smo ga v našem primeru vodili s

programskim jezikom PHP, ki je odprtokodni jezik in sodeluje s programskim jezikom

JavaScript. PHP smo pridobili s pomočjo platforme WAMP, ki je poleg jezika PHP prinesla

tudi MySQL in tehnologiji Apache, ki sta vitalni za delovanje spletne aplikacije, saj MySQL

realizira podatkovno bazo, Apache pa deluje kot spletni strežnik.

Ko smo imeli vzpostavljeno spletno stran, smo začeli s programiranjem ter aplikacijo

zaporedno sestavljali s funkcionalnostmi, dokler nismo po več mesecih dela pridobili

izdelka, ki je bil od začetka načrtovan.

Spletna aplikacija ima možnosti nadgradnje in izboljšanja, saj trenutno beleži samo porabo

vode in ima določene pomanjkljivosti. Odprta je za inovacije in dodajanje funkcij, ki bi še

bolj olajšale delo in zmanjšale komplikacije.


37

VIRI IN LITERATURA

[1] Ajax Introduction. W3schools. Dostopno na:

http://www.w3schools.com/Ajax/ajax_intro.asp [29. 8. 2015].

[2] Baier, M. Naučimo se JavaScript. Šempeter pri Gorici: Flamingo Založba, d. o. o.,

2001.

[3] Bilke, P. Spoznajmo PHP in MySQL: Priročnik za začetnike. Šempeter pri Gorici:

Flamingo Založba, d. o. o., 2002, str. 5–60.

[4] Bootstrap get started. w3schools. Dostopno na:

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp [29. 8. 2015].

[5] Difference ftp sftp ftps. Southrivertech. Dostopno na:

http://www.southrivertech.com/whats-difference-ftp-sftp-ftps/ [29. 8. 2015].

[6] Differences between FTP FTPS and SFTP. Jscape. Dostopno na:

http://www.jscape.com/blog/bid/75602/Understanding-Key-Differences-Between-

FTP-FTPS-and-SFTP [29. 8. 2015].

[7] ExtJS.Way Back Machine. Dostopno na:

https://web.archive.org/web/20070222071857/http://www.extjs.com/ [29. 8. 2015].

[8] ExtJS sencha docs 4.2.2. Sencha. Dostopno na: http://docs.sencha.com/extjs/4.2.2/

[29. 8. 2015].

[9] HTML. Mrvar. Dostopno na: http://mrvar.fdv.uni-lj.si/sola/VIS2/html/htmlslo.htm

[29. 8. 2015].

[10] JavaScript how it all began. 2ality. Dostopno na:

http://www.2ality.com/2011/03/javascript-how-it-all-began.html [29. 8. 2015].

[11] Kaltenekar, M. Oblikovanje spletnih strani: HTML, CSS in JavaScript: hitri vodnik.

Ljubljana: Pasadena, 2006.

[12] Kraynak, J. Računalniški slovar. Ljubljana: Mladinska knjiga, 1994.

[13] Mahorič, T. Podatkovne baze. Ljubljana: BI-TIM, 2002.

[14] Montaža števca je draga. 24ur. Dostopno na: http://www.24ur.com/montaza-stevca-

je-draga-a-brez-njega-bo-poloznica-za-vodo-se-visja.html [29. 8. 2015].

[15] Newbie intro to cron. Unigeeks. Dostopno na:

http://www.unixgeeks.org/security/newbie/unix/cron-1.html [29. 8. 2015].

http://www.w3schools.com/Ajax/ajax_intro.asp

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

http://www.southrivertech.com/whats-difference-ftp-sftp-ftps/

http://www.jscape.com/blog/bid/75602/Understanding-Key-Differences-Between-FTP-FTPS-and-SFTP

http://www.jscape.com/blog/bid/75602/Understanding-Key-Differences-Between-FTP-FTPS-and-SFTP

https://web.archive.org/web/20070222071857/http:/www.extjs.com/

http://docs.sencha.com/extjs/4.2.2/

http://mrvar.fdv.uni-lj.si/sola/VIS2/html/htmlslo.htm

http://www.2ality.com/2011/03/javascript-how-it-all-began.html

http://www.24ur.com/montaza-stevca-je-draga-a-brez-njega-bo-poloznica-za-vodo-se-visja.html

http://www.24ur.com/montaza-stevca-je-draga-a-brez-njega-bo-poloznica-za-vodo-se-visja.html

http://www.unixgeeks.org/security/newbie/unix/cron-1.html


38

[16] Obračunavanje vode v večstanovanjskih objektih. Siol. Dostopno na:

http://www.siol.net/novice/gospodarstvo/2014/02/obracunavanje_vode_v_vectanova

njskih_objektih.aspx [29. 8. 2015].

[17] Sencha ExtJS. Sencha. Dostopno na:

https://www.sencha.com/products/extjs/#overview [29. 8. 2015].

[18] Sendmail definition. Tech target. Dostopno na:

http://searchenterpriselinux.techtarget.com/definition/sendmail [29. 8. 2015].

[19] SMTP definiton. Tech target. Dostopno na:

http://searchexchange.techtarget.com/definition/SMTP [29. 8. 2015].

[20] SQL overview. Tutorialspoint. Dostopno na: http://www.tutorialspoint.com/sql/sql-

overview.htm [29. 8. 2015].

[21] Tri-ravenjska arhitektura sistemov. Ditea. Dostopno na:

http://www.ditea.si/sl/tehnologije/ [29. 8. 2015].

[22] What is CSS. W3C. Dostopno na:

http://www.w3.org/standards/webdesign/htmlcss#whatcss [29. 8. 2015].

[23] What is JavaScript. Media Wiley. Dostopno na:

http://media.wiley.com/product_data/excerpt/88/07645790/0764579088.pdf [29. 8.

2015].

[24] What is jQuery?. jQuery. Dostopno na: https://jquery.com/ [29. 8. 2015].

[25] What is MySQL?. Dev MySQL. Dostopno na:

http://dev.mysql.com/doc/refman/5.1/en/what-is-mysql.html [29. 8. 2015].

[26] What is PHP?. PHP. Dostopno na: http://php.net/manual/en/intro-whatis.php

[29.8.2015]

[27] Zandstra, M. Naučite se PHP v 24 urah. Ljubljana: Pasadena, 2004.

http://www.siol.net/novice/gospodarstvo/2014/02/obracunavanje_vode_v_vectanovanjskih_objektih.aspx

http://www.siol.net/novice/gospodarstvo/2014/02/obracunavanje_vode_v_vectanovanjskih_objektih.aspx

https://www.sencha.com/products/extjs/#overview

http://searchenterpriselinux.techtarget.com/definition/sendmail

http://searchexchange.techtarget.com/definition/SMTP

http://www.tutorialspoint.com/sql/sql-overview.htm

http://www.tutorialspoint.com/sql/sql-overview.htm

http://www.ditea.si/sl/tehnologije/

http://www.w3.org/standards/webdesign/htmlcss#whatcss

http://media.wiley.com/product_data/excerpt/88/07645790/0764579088.pdf

https://jquery.com/

http://dev.mysql.com/doc/refman/5.1/en/what-is-mysql.html

http://php.net/manual/en/intro-whatis.php

Documents

VEČSTANOVANJSKE OBJEKTE