SVEUČILIŠTE U ZAGREBU

FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA

ZAVRŠNI RAD br. 2953

Internetski portal za praćenje procesnih

veličina fotonaponskog sustava

Luka Ečimović

Zagreb, srpanj 2013.

Sadržaj

1. Uvod .............................................................................................................................. 1

2. Zahtjevi .......................................................................................................................... 2

2.1 Zahtjevi ................................................................................................................... 2

2.2 Ciljevi aplikacije ..................................................................................................... 2

3. Tehnologije .................................................................................................................... 3

3.1 C# ............................................................................................................................ 3

3.2 MVC ....................................................................................................................... 3

3.2.1 Model ............................................................................................................... 4

3.2.2 View ................................................................................................................ 5

3.2.3 Controller ......................................................................................................... 8

3.3 Visual Studio 2012 ................................................................................................ 10

3.4 Baza podataka ....................................................................................................... 11

3.5 JavaScript .............................................................................................................. 11

3.5.1 jQuery datatable ............................................................................................. 11

3.5.2 Highcharts graf .............................................................................................. 12

4. Postupak izrade aplikacije ........................................................................................... 13

4.1 Odabir jezika i okružja .......................................................................................... 13

4.2 Odabir platforme ................................................................................................... 13

4.3 Početak i poteškoće ............................................................................................... 14

4.4 Kodiranje i odabir vanjskih komponenti .............................................................. 15

4.5 Završavanje ........................................................................................................... 21

5. Korištenje aplikacije .................................................................................................... 22

5.1 Pristup stranici za neautoriziranog korisnika ........................................................ 22

5.2 Registracija ........................................................................................................... 23

5.3 Izmjena korisnika i brisanje .................................................................................. 24

5.4 Manipulacija korisnika ......................................................................................... 25

5.5 Pristup mjerenjima ................................................................................................ 25

6. Zaključak ..................................................................................................................... 29

7. Literatura ..................................................................................................................... 31

8. Sažetak ......................................................................................................................... 32

9. Abstract ........................................................................................................................ 32

1

1. Uvod

U ovom radu bavit ćemo se izradom web-aplikacije koja ima stvarnu primjenu kod

stvarnog korisnika.

Do nedavno, moje iskustvo u programiranju svodilo se na obavljanje laboratorijskih vježbi,

zadaća i povremena eksperimentiranja u slobodno vrijeme. Pojmovi kao web platforma i

web aplikacija su zvučali kao nešto što me očekuje tek u dalekoj budućnosti.

Iz početničke perspektive, C# nadasve je ergonomičan, moćan jezik koji se prilično lako

uči, a Visual Studio je izuzetno funkcionalan alat koji nastoji inače redundantne dijelove

programiranja odvojiti od korisnika i dozvoljava mu da se posveti ključnim dijelovima.

Preostaje nam vidjeti kako se jedan ili više studenata, bez pretjeranog iskustva, snalazi u

stvaranju jedne web aplikacije, što sve moramo obaviti, kako to moramo obaviti te što smo

na kraju naučili i što bi eventualno napravili drugačije.

Krenut ćemo s funkcionalnim zahtjevima aplikacije, upoznati se s tehnologijama koje se

koriste, proći kroz izradu aplikacije, opisati njezin rad i na kraju izvesti zaključak.

2

2. Zahtjevi

2.1 Zahtjevi

Aplikacija omogućuje ispis i vizualizaciju mjerenja sa sustava fotoelektričnih ćelija u

sklopu Laboratorija za sustave obnovljivih izvora energije. Aplikacija također osigurava

mogućnost registracije korisnika s dvije razine pristupa. Neregistrirani korisnici nemaju

pravo pregleda podataka te ih se preusmjerava na zaslon za registraciju. Dvije razine prava

pregleda su običan korisnik i administrator. Običan korisnik ima uvid jedino u deset

najnovijih mjerenja te statistiku, dok administrator može pristupiti svim mjerenjima,

izmjenjivati ih, brisati te upravljati korisnicima. Sva mjerenja se pohranjuju u bazu

podataka. Baza podataka mora imati sigurnosnu kopiju (backup) na odvojenoj lokaciji.

2.2 Ciljevi aplikacije

Aplikacija kroz svoj rad odgovornim djelatnicima fakulteta i studentima omogućuje brz

uvid u stanje rada fotoelektrične mreže te njezine naponske mikro-mreže. Ovime se postiže

brz uvid u potencijalnu grešku ili zastoj u radu pojedinog modula, fotoeletrične ćelije ili

dijela mikro-mreže. Također možemo primjetiti postoji li opasnost za pojedini dio tako što

imamo uvid u njihove temperature. Uvid imamo i u izlaznu snagu mreže pa tako možemo

optimalnije upravljati dostupnim resursima.

Dugoročniji cilj aplikacije je pohrana i zaštita prikupljenih podataka u bazi podataka.

Podaci prikupljeni u velikom vremenskom razdoblju bit će korišteni za stvaranje modela

sunčeve dozračenosti te statistike o dostupnoj snazi foto-naponske mreže.

Podaci iz stvorenog modela i statistike mogu se iskoristiti za prilagodbe postojećih sustava

te stvaranje novih, optimalnijih i efikasnijih sustava prilagođenih uvjetima na mjestu

prikupljanja podataka.

3

3. Tehnologije

Svaki kompleksniji sustav koristi više tehnologija, jezika i arhitektura u pojedinim svojim

dijelovima. U našem slučaju su to programski jezici C#, HTML, JavaScript i CSS.

Moramo ponešto reći i o MVC arhitekturi, načinu pohrane podataka i alatima koje smo

koristili.

3.1 C#

C# je objektno orijentirani programski jezik, trenutno peti najkorišteniji jezik u svijetu.

Razvijen je u Microsoftu, a pojavio se tek 2000. godine. Voditelj razvojnog tima bio je

Anders Hejlsberg.

C# je dakle veoma nov jezik, no popularnost mu brzo raste jer je jednostavan, funkcionalan

i vrlo kvalitetno dizajniran. Dizajniran za .NET platformu, C# je prikladan za sve svrhe i

zamijenjuje C++ i Visual Basic.

Glavna konkurencija mu je Java, koja zadržava puno veću popularnost, no C# rješava

mnoge probleme koje Java još uvijek ima, stoga su razvijači programske podrške izrazito

zadovoljni korišenjem C#-a i zbog toga dobiva sve veći udio u svijetu razvoja softwarea.

3.2 MVC

Svrstavanje sličnih elemenata i razdvajanje na kategorije u prirodi je svakog ljudskog bića.

Tako ćemo lakše voditi računa o velikoj količini elemenata te se lako orijentirati kada nam

se posao preseli u drugi dio sustava.

Također želimo standardizirati komunikaciju između skupina ukoliko neki dio želimo

zamijeniti jer će se tako novi element odmah uklopiti u sustav.

Na taj je način osmišljen MVC.

MVC ili Model -View-Controller arhitektura omogućuje nam razdvajanje aplikacije u 3

nezavisna dijela čija su imena u nazivu arhitekture. S MVC-om ne postižemo samo bolju

organizaciju i zamjenjivost komponenti, nego će i veći broj programera lakše raditi na

istom sustavu.

4

MVC je prvi puta predstavljen u Smalltalku 76, da bi kao koncept bio prihvačen tek

desetak godina kasnije. Danas se MVC uglavnom koristi za izradu web aplikacija te je za

tu primjenu nastalo i nekoliko platformi poput ASP.NET MVC, Backbone.js,

RubyOnRails, nekoliko drugih Javascript i PHP platformi.

U našoj aplikaciji koristimo ASP.NET MVC4, Microsoftovu najnoviju verziju popularne

paltforme.

ASP.NET MVC se uglavnom koristi u poslovnim aplikacijama pa stoga nema primjera

popularnih stranica zabavnog sadržaja koje ga koriste.

3.2.1 Model Model predstavlja poslovnu logiku aplikacije, te se uglavnom odnosi na stvaranje modela

podataka iz baze ili drugog izvora kojem se predaju izmjene napravljene interakcijom sa

apliakcijom. Za model uglavnom radimo klase čija svojstva i atributi odgovaraju podacima

u relacijama baze podataka. U modelima se mogu nalaziti i metode za obradu i pretvorbu

podataka u prikladniji oblik za predaju ostalim elementima aplikacije, tj. kontroleru koji ih

predaje pogledima. Moderne arhitekture, jezici i razvojne okoline nam ugolavnom uz mvc

pružaju jednostavan način povezivanja modela i baze podataka te nam olakšava dohvat,

izmjenu i unos podataka, u potpunosti izbjegavajući SQL upite (npr. Entity Framework).

Slika 1 - Razred u kodu i tablica u bazi

S desne strane slike možemo vidjeti izgenerirani razred koji odgovara dizajnu relacije s

desne strane slike.

5

3.2.2 View View ili pogled, kao što ime govori, služi za prikaz podataka iz modela/baze i/ili drugih

podataka. Budući da se MVC uglavnom koristi u izradi web aplikacija, pogledi se

uglavnom svode na nekakav oblik .html dokumenata, koji u standardoj html sintaksi mogu

koristiti kod programskog jezika aplikacije. Time se osigurava željena interaktivnost i

automatizacija web stranice. U slučaju naše aplikacije koja je izrađena ASP.NET MVC4

tehnologijom, pogledi su .cshtml dokumeti koji mogu koristiti C# kod i Razor engine

sintaksu. Pogleda može biti više, te se različiti pogledi mogu koristiti za prikaz i

manipulaciju istih podataka.

Slika 2 - Glavni pogled aplikacije

6

<table id="Mjerenja" class="display"> <thead> <tr> <th>MjerenjeID</th> <th>Mjerenje1</th> <th>Mjerenje2</th> <th>Mjerenje3</th> <th>Mjerenje4</th> <th>Mjerenje5</th> <th>Mjerenje6</th> <th>Mjerenje7</th> <th>Mjerenje8</th> <th>Vrijeme</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="@item.MjerenjeID"> <td>@item.MjerenjeID</td> <td>@item.Mjerenje1</td> <td>@item.Mjerenje2</td> <td>@item.Mjerenje3</td> <td>@item.Mjerenje4</td> <td>@item.Mjerenje5</td> <td>@item.Mjerenje6</td> <td>@item.Mjerenje7</td> <td>@item.Mjerenje8</td> <td>@item.VrijemeDatum</td> @if (Roles.IsUserInRole("Admin")) { <td>

@Html.ActionLink("Edit", "Edit", new { id = item.MjerenjeID})

<a onclick="del(@item.MjerenjeID)" style="cursor:pointer">Delete</a>

</td> } </tr> } </tbody> </table>

Slika 3 - Isječak koda iz glavnog pogleda

Ovo je isječak iz Index.cshtml pogleda. Svaka interakcija s ovim obrađuje se u kontroleru

HomeController.cs.

Isječak je oblikovanje HTML tablice nad čijom strukturom pozivamo skriptu DataTables.

Skripta će oblikovati jQuerry element po toj tablici. Isječak također sadrži primjer Razor

sintakse.

Linije koje počinju s „@“ znakom izvršavaju C# kod unutar .cshtml datoteka.

7

Tako imamo fiksno zaglavlje tablice s imenima polja, pa u tijelu tablice umjesto fiksno

napisanih svih vrijednosti iz baze, foreach petlja prolazi kroz sve elemente objekta Model,

koji je zapravo lista koja se ovom pogledu proslijeđuje kao argument te sadrži sve unose iz

baze podataka. Petlja će u svakoj iteraciji varijabli item pridružiti jedan unos iz liste.

Pojedini unos, tj. varijabla item je tipa Mjerenje (definiran razred Mjerenje u modelu).

Unutar petlje vidimo kako se pojedina ćelija redka u tablici popunjava vrijednostima iz

varijable item, što je također primjer sintakse Razor. Također imamo naredbu grananja iz

C# koda, čija je svrha provjera razine pristupa trenutnog korisnika, te u slučaju da je

korisnik administrator, u redak se dodaju tipke Edit i Delete koje služe za izmjenu ili

uklanjanje unosa na koji se odnosi taj redak tablice.

Pogledi se mogu ugnježđivati, tj. postoje takozvani parcijalni pogledi koji mogu biti

sadržani unutar drugog pogleda ili sami sadržavati druge poglede. U aplikacijama, kada

želimo imati zaglavlje, podnožje ili nekakav izbornik isti na svim pogledima, tada

koristimo „layout“ parcijalne poglede koji sadrže željene elemente te se različiti pogledi

prikazuju unutar tog konstantnog pogleda.

U našoj aplikaciji koristimo samo jedan zajednički pogled koji ima statičko zaglavlje s

poveznicama na ostale poglede u aplikaciji.

Različita područja sustava mogu zahtjevati različite zajedničke poglede.

Različite zajedničke poglede pozivamo tako da u zaglavlju datoteke dodamo isječak koda

poput ovog:

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

gdje je Layout varijabla, a „_Layout.cshtml“ željeni

zajednički pogled.

Također, ako ne želimo da naš pogled ima jedan od

zajedničkih okvira, moramo napomenuti „Layout = null“ jer

je početna vrijednost postavljena za sve poglede na

„_Layout.cshtml“ datoteku.

Default layout ili okvir za naše poglede možemo postaviti u datoteci _ViewStart.cshtml.

Svi će okviri tada uzimati unutra navedeni okvir, osim ako se u zaglavlju pogleda ne

navede suprotno.

Slika 4 - Direktorij s pogledima

8

3.2.3 Controller Controller predstavlja prezentacijsku logiku aplikacije. Kontroler obrađuje sve uhvaćene

događaje nastale iz naše interakcije s pogledom, dohvaća podatke iz baze preko modela i

pomočnih frameworka te ih u prikladnom obliku proslijeđuje pogledu koji odgovara našem

upitu te ga aktivira. U slučaju samo manipulacije podacima, controller ne mijenja pogled,

ali po našim interakcijama s pogledom radi izmjene na modelu podataka.

Konroler je jedna .cs datoteka koja sadrži jedan Controller razred. Poslove često

razlažemo na nekoliko kontrolera, gdje se svaki bavi svojim problemskim područjem.

Moguće je sve napravit s jednim kontrolerom, ali to povećava međuovisnost komponenti i

kompleksnost koda. Cilj nam je postići laku zamjenjivost bilo kojeg dijela. Također,

kontroler obično sadrži poprilično velike količine koda pa nam je iz tog razloga također

bolje posao razdvojiti na više datoteka.

Primjer kontrolera ćemo pogledati na isječku jednog kontrolera iz naše aplikacije:

public class HomeController : Controller { Database1Entities1 mjerenjaDB = new Database1Entities1(); [Authorize] public ActionResult Index() { short limit = 10; var mjerenja = GetMjerenja(); mjerenja.Reverse(); if (!User.IsInRole("Admin")) { return View(mjerenja.Take(limit)); } return View(mjerenja); } // GET: /Home/Edit/id [Authorize(Roles = "Admin")] public ActionResult Edit(int id) { Mjerenje targetMjerenje = mjerenjaDB.Mjerenje.Find(id); return this.View(targetMjerenje); } // POST: /Home/Edit [HttpPost] public ActionResult Edit(Mjerenje targetMjerenje) { if (ModelState.IsValid) {

this.mjerenjaDB.Entry(targetMjerenje).State = System.Data.EntityState.Modified;

this.mjerenjaDB.SaveChanges(); return this.RedirectToAction("Index"); } return this.View(targetMjerenje); }

}

Slika 5 - Isječak koda iz kontrolera

9

U ovom odsječku vidimo samo dio klase HomeController, jer je definitivno prevelika da bi

ju mogli prikazati u cijelosti. Na početku odmah vidimo deklaraciju Entities objekta, iz

Entity Framoworka.

U primjeru vidimo nekoliko metoda u kontroleru.

public ActionResult Index() se obavlja kada se na našoj aplikaciji aktivira link Home koji

se nalazi u zaglavlju aplikacije koje je zajedničko svim pogledima. Metoda priprema

podatke, provjerava razinu pristupa trenutnog korisnika te aktivira pogled odgovarajućeg

imena, Index.cshtml, kojem su argument podaci u odgovarajučem obliku s obzirom na

razinu pristupa.

10

3.3 Visual Studio 2012

Visual Studio 2012 Ultimate je popularno Microsoftovo razvojno okruženje. Visual Studio

glavno je okružje za razvoj WinForms, WPF, ASP.NET WebForms i MVC aplikacija, s

podrškom i dodacima za druge programske jezike kao što su M, Python, Ruby i F#.

Prva verzija Visual Studija je nastala 1995. godine i služila je za C++ i Visual Basic

programiranje. Tek 2002. godine, tada četvrta po redu inačica razvojne okoline, dobiva

podršku za .NET framework.

Od prve inačice Visual Studija koristi se IntelliSense, Microsoftov alat za olakšavanje

posla programeru tijekom kodiranja. To radi tako što nudi moguće završetke ključnih

riječi, imena varijabli ili imena funkcija i klasi ćim je programer napisao prvo slovo imena,

te se ako izbor sužava sa svakim dodatnim slovom. IntelliSense također nudi rješenja

prilikom leksičkih i sintaksnih pogreški te dodavanja referenci koje fale.

Jedna od novijih mogućnosti Visual Studia je NuGet package manager.

NuGet programeru daje mogućnost dohvata, instalacije i reference raznih dodataka i

frameworka svoj projekt te s time programeru eliminira dugotrajan posao oko traženja,

instalacije i integriranja potrebnog software-a.

Slika 6 - Visual Studio 2012

Najpopularniji dodaci su Json.NET, Entity Framework, jQuerry i Oauth.

11

Moje iskustvo u korištenju Visual Studija samo mi potvrđuje glasinu da je to najbolje

razvojno okruženje na svijetu. Koristio sam većinu postoječih okruženja u različitim

jezicima, no Visual Studio mi je ponudio nevjerojatnu ergonomiju. Njegov Autocomplete

ostavlja dojam kao da čita misli, generiranje koda mi omogućuje izbjegavanje pisanja

redudantnog koda, i njegovo upravljanje dodacima drastično ubrzava i pojednostavljuje

traženje dodatne progamske podrške koju moram koristiti unutar aplikacije, te ga još i

automatski referencira.

3.4 Baza podataka

Koristi se lokalna baza (embedded database file) kojoj pristupa samo aplikacija, izvedena

je bez posebnog SQL servera. Prednosti ovog načina su brzina pristupa, jednostavnost

implementacije i performanse aplikacije/servera. Nedostaci su sigurnost i ručni backup.

Moguća izmjena je implementacija dedicated SQL servera koji će raditi poslove nad

bazom te kojem će aplikacija pristupati preko connection stringa. Prednosti ovoga su

povećana sigurnost, pouzdanost te mnoštvo ugrađenih mogućnosti za automatizaciju.

3.5 JavaScript

C# i HTML nisu dovoljni za veliku vizualnu raznolikost aplikacija, zato koristimo jQuery.

jQuery je velika JavaScript open-source biblioteka koja nam olakšava stvaranje raznih

vizualnih elemenata i hvatanje događaja. jQuery je najkorištenija JavaScript biblioteka te

jedan od najpopularnijih alata u izradi web aplikacija.

U našoj aplikaciji jQuery biblioteku koristimo za tablicu za prikaz podataka te za graf koji

stvara vizualizaciju tih podataka.

3.5.1 jQuery datatable Prvo se napravi html tablica koja prima podatke iz baze modela/baze pa se nad njom

poziva skripta za jquery datatable. Osim ljepšeg sučelja, datatable nudi i niz ugrađenih

kontrola i opcija za operacije nad podacima.

12

3.5.2 Highcharts graf Highcharts je biblioteka koja se može implementirati u više jezika koji se koriste za web

tehnologije. Mi koristimo DotNet Highcharts koji je prilagođen za sve .NET platforme.

Hightcharts grafkoristi jquery za prikaz složenih i oku ugodnih grafova raznih tipova.

Programer, pri pozivu grafa, mora samo odrediti formatiranja i tipove ulaznih podatak te ih

proslijediti odgovarajućim elementima grafa. Grafovi su interaktivni i nude korisniku

detaljan ispis vrijednosti ukoliko kursor miša postavi na krivulju.

Odabrao sam Highcharts jer sam tokom Internet pretrage naišao na pozitivna iskustva

korisnika i uvidio sam da je dosta popularan grafički element.

Slika 7 - Primjer korištenja Highcharts grafa

13

4. Postupak izrade aplikacije

Ovo poglavlje detaljno prolazi kroz odabir komponenti i postupak izrade aplikacije kako bi

se cijeli proces mogao replicirati. U konačnici su opisani postupci koji bi, nakon stečenih

novih saznanja, bili primjereniji.

4.1 Odabir jezika i okružja

Kada sam dobio zadatak za završni rad, po dogovoru s mentorom imao sam izbor između

dva programska jezika – C# ili Java. Pošto je sustav raspodijeljen na dva završna rada,

prvo sam se dogovorio s kolegom oko jezika. Oba jezika nude ogromne mogućnosti i

podršku korisnika na internetu i upoznati smo sa sintaksom oba jezika. Na kraju smo

odabrali C# jer ga bolje poznajemo pošto se dosta koristi tokom studiranja računarstva na

FER-u te smo upoznati s njegovom ergonomijom, alatima i platformama.

Logičan odabir okružja je Visual Studio 2012 Ultimate, za kojeg imamo licencu preko

Microsoft Acadamic Alliance-a. Visual Studio je i velik faktor u izboru jezika.

4.2 Odabir platforme

Dok Java ima velik izbor platformi, kao popularni Google Web Toolkit, Apache i Grails,

C# nam nudi dva uobičajena izbora – ASP.NET WebForms ili ASP.NET MVC.

Na početku ovog završnog rada, počela su i predavanja iz kolegija Razvoj primjenjene

programske podrške koji nudi idealan uvid u ovu dilemu.

Nakon opširne konzultacije s profesorom i temeljitog istraživanja po Internetu, odabiremo

ASP.NET MVC 4.

Istraživanje frameworka otkriva da je WebForms stariji framework te da je manje efikasan,

dok je MVC izrazito popularan i odgovara zahtjevima naše aplikacije.

Mentor, koji u ovom slučaju preuzima ulogu naručitelja programske podrške, zahtijeva da

aplikacija ima mogućnost nadogradnje i izmjene svojih funkcionalnosti i izgleda. Kako je

to jedan od ključnih ciljeva iza dizajna MVC arhitekture i frameworka, odabir je jasan.

14

4.3 Početak i poteškoće

Kada je napokon došao red za početak programiranja, pojavljuje se nekoliko novih dilema.

Otvaramo Visual Studio0 i novi projekt. Ovdje nam se nude različite kategorije platformi.

Odabiremo Visual C#, ASP.NET MVC 4 te određujemo naziv projekta. Sada nam se

otvara prozor s izborom više gotovih obrazaca za MVC 4 aplikacije. Odmah eliminiramo

opcije za mobilne, intranet i Facebook aplikacije jer one nemaju veze s našim zadatkom.

Od preostalih opcija možemo birati između dva prazna obrasca, te jednog koji je

funkcionalna bazna aplikacija, koja ima ugrađenu osnovnu manipulaciju korisnika,

poglede i kontrolere. Budući da nam je ovo prva ovakva aplikacija, odabiremo obogaćeni

obrazac.

Ovdje se pojavljuje potreba definiranja redoslijeda radnji.

Za manipulaciju korisnika imamo samo registraciju korisničkog imena i lozinke. U

zahtjevima je propisano da mora postojati dvorazinska sigurnost i registracija elektroničke

pošte. Možemo pokušati proširiti ugrađenu bazu korisnika ili je preseliti u novu bazu

podataka, koju ćemo koristiti i za mjerenja.

Kako ne bismo morali prepravljati previše elemenata i kako bismo racionalizirali posao, u

ugrađenu bazu dodajemo atribute za razinu pristupa i adresu elektroničke pošte.

Da bi to funkcioniralo, moramo još i proširiti connection string, za bazu korisnika, s novim

poljima i dodati polja za unos odgovarajućih vrijednosti u pogled za unos korisnika, te

konačno u kontroleru te podatke proslijediti u bazu.

15

4.4 Kodiranje i odabir vanjskih komponenti

Kako bi nastavili graditi aplikaciju, prvi korak je pristup podacima. Za to ćemo koristiti

Entity framework, pomoću kojeg ćemo izgenerirati model preko kojeg nam framework

sam vrši izmjene nad bazom podataka. Točnije, Entity framework i LINQ nam omogućuju

da C# sintaksom radimo izmjene nad bazom tako što će na temelju našeg koda generirati

SQL upite, čime izbjegavamo ručno pisanje upita.

Dilema se javlja oko smještaja baze. Pitanje je želimo li posvećeni SQL server ili ugrađenu

bazu podataka kojom aplikacija izravno manupulira. U idealnom slučaju radili bi

posvećeni SQL server kojem će aplikacija slati upite, no pošto nemamo server i na sustavu

radi više studenata, aplikacija mora biti prijenosna te se koristi ugrađena baza (embedded

database file). Ukoliko bi se baza podataka mijenjala, te se koristio SQL server, izmjena bi

bila jednostavna, budući da bismo samo morali ponovo izgenerirati model, no ovaj put bi

napravili spajanje na SQL server pomoću ugrađenog sučelja, upisivanjem adrese servera,

korisničkog imena i lozinke.

Izmjene u kodu u tom bi slučaju bile minimalne ili ih uopće ne bi bilo, ukoliko imenujemo

model i kontekst jednako kako su se i prije zvali.

Sada, kad smo riješili povezivanje s bazom možemo lako dobivati podatke u obliku liste,

filtrirati podatke na vrlo jednostavan način.

Slika 8 - Punjenje liste podaciam iz baze

Tu možemo vidjeti kako podatke iz baze prenosimo u listu. Kako bi te podatke mogli

koristiti u pogledu, moramo ih proslijediti kao argument pri pozivu pogleda.

Također možemo vidjeti kako se radi provjera razine pristupa korisnika, te se u slučaju

običnog korisnika proslijeđuje samo prvih 10 elemenata liste, ili cijela lista u slučaju

administratora.

16

Slika 9 - Poziv pogleda s mjerenjima

Dalje, moramo prikazati podatke iz baze. Najjednostavniji način bio bi najobičnija HTML

tablica. Sa stilom koji smo dobili početnom aplikacijom ta osnovna tablica ne bi ni

izgledala toliko loše, no moramo dodati kontrole za straničenje jer će podaci biti obilni,

kao i filtriranje po datumu jer nam je to u funkcionalnim zahtjevima.

U cilju racionalizacije količine posla, pronalazimo gotovu jQuerry tablicu s ugrađenim

kontrolama za straničenje i pretragom. Nakon isprobavanja nekoliko tablica, odabrano je

najjednostavnije rješenje za implementaciju. NuGet package manager pronalazi

DataTables biblioteku s tablicom. Prvi korak u implementaciji je osnovna HTML tablica,

te se DataTables poziva kao skripta. DataTables prima HTML tablicu te na temelju njene

strukture oblikuje jQuerry element koji zamjenjuje HTML tablicu. Tablica također ima

kontrolu za odabir broja unosa na pojedinoj stranici.

Ove elemente možemo vidjeti na sljedećoj slici i isječku koda.

17

Slika 10 - Tablica bez skripte i sa skritpom

Na gornjoj slici vidimo običnu HTML tablicu, a na donjoj JavaScript tablicu koja ju

zamijenjuje te dodaje kontrole straničenja i filtriranje.

Na sljedećoj slici možemo vidjeti isječak koda koji opisuje ove tablice.

18

@section head { @if (Roles.IsUserInRole("Admin")) { <script type="text/javascript"> $(document).ready(function () { $('#Mjerenja').dataTable({ "bFilter": true, "bSort": false, "sPaginationType": "full_numbers", "bStateSave": true }); }); </script> } else { <script type="text/javascript"> $(document).ready(function () { $('#Mjerenja').dataTable({ "bPaginate": false, "bFilter": false, "bSort": false }); }); </script> } } <table id="Mjerenja" class="display"> <thead> <tr> <th>MjerenjeID</th> <th>Mjerenje1</th> <th>Mjerenje2</th> <th>Mjerenje3</th> <th>Mjerenje4</th> <th>Mjerenje5</th> <th>Mjerenje6</th> <th>Mjerenje7</th> <th>Mjerenje8</th> <th>Vrijeme</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="@item.MjerenjeID"> <td>@item.MjerenjeID</td> <td>@item.Mjerenje1</td> <td>@item.Mjerenje2</td> <td>@item.Mjerenje3</td> <td>@item.Mjerenje4</td> <td>@item.Mjerenje5</td> <td>@item.Mjerenje6</td> <td>@item.Mjerenje7</td> <td>@item.Mjerenje8</td> <td>@item.VrijemeDatum</td>

19

@if (Roles.IsUserInRole("Admin")) { <td> @using (Html.BeginForm("Edit", "Home",new{id=item.MjerenjeID},FormMethod.Get)) { @Html.AntiForgeryToken() <button type="submit">Edit</button> }

@using (Html.BeginForm("Delete", "Home", new { id = item.MjerenjeID }))

{ @Html.AntiForgeryToken() <button onclick = "return confirm('Are you sure?')"type="submit">Delete</button> } </td> } </tr> }

</tbody> </table>

Slika 11 - Kod tablice

Na početku ovog isječka iz Index.cshtml pogleda možemo vidjeti neku vrstu grananja. Tu

provjeravamo razinu pristupa pomoću Roles.IsUserInRole(). Naredba provjerava ulogu

trenutnog korisnika i može se pozvati u bilo kojem dijelu aplikacije. Poziv funkcije za

JavaScript tablicu sadrži zadavanje određenih zastavica, poput straničenja, filtriranja,

sortiranja. U slučaju da korisnik nema administratorske ovlasti, onemogućimo staničenje i

filtriranje jer po zahtjevima, običan korisnik ne smije imati pristup svim mjerenjima, već

samo najsvježijima.

Lista iz koje dobivamo elemente sadrži sve unose iz baze. Kada imamo malu količinu

podataka, to je rješenje prilično brzo jer će onda kontrole tablice samo raditi pomicanje po

listi. Ukoliko je količina podataka velika, kontrole tablice trebale bi proširivati URI s

indeksom stranice i tako svaki put pozivati iz baze idući paket unosa, čija veličina ovisi o

odabiru na tablici.

No to nije sve što se treba napraviti. U zahtjevima je propisano da korisnik s administra-

torskim ovlastima može izmjenjivati ili brisati unose.

Kontrole za to dodat ćemo kao elemente u redak tablice. To možemo napraviti tako da

koristimo tipke ili ActionLink poveznice. Zbog velike količine podataka u pojedinom

unosu, pojedini redak je dosta širok. Zbog toga, kad stavimo tipke, redak se počinje širiti

20

vertikalno jer ne stane u okvire tablice. Tipke bi stoga mogli zamijeniti običnim

poveznicama, no tipke su, vizualno, puno elegantnije rješenje.

U odsječku koda na slici možemo vidjeti edit i delete kontrole na samom dnu, gdje se

dodaju kao zadnji elemnti u redak tablice, pod uvjetom da je ispunjen uvjet grananja, tj. da

korisnik ima administratorske ovlasti.

Kada pritisnemo kontrolu za edit ili delete pojavila bi se greška jer još nismo definirali

akcije koje će se odraditi prilikom njihovog korištenja.

U zadanom odsječku vidimo da će se korištenjem tipki edit i delete pozivati Home/Edit i

Home/Delete, stoga u odgovarajučem kontroleru moramo definirati metode za njih i po

potrebi poglede koji će se otvarati.

Za Edit nam je potreban pogled u obliku obrazca s poljima za unošenje pojedinih

vrijednosti atributa unosa. Visual studio i .NET framework nude nam mogućnost

automatskog generiranja cijelog koda pogleda. Jednostavno počnemo dodavati novi pogled

u folder Views i otvara nam se obrazac na kojem možemo odabrati neke opcije za početno

oblikovanje našeg novog pogleda. Odabiremo opciju Create a strongly-typed view što nam

omogućava nove opcije. Tada, u padajućoj listi pod imenom Model class, odabiremo

model koji će pogled koristiti. Tu će se nalaziti i tipovi podataka iz našeg Entity modela, ili

u ovom slučaju samo tip Mjerenje, kojeg i odabiremo. Konačno, pod padajučom listom

Scaffold template odabiremo uzorak koji nam treba za pogled, Edit. Time se stvorio

obrazac za izmjenu podataka u unosu koji ima sva potrebna polja i tipku za povratak,

programer ne mora ništa izmjenjivati.

Za opciju Delete nam ne treba pogled, nego je dovoljno samo u njegovoj metodi u

kontroleru odraditi brisanje iz baze. Ako bi korisnik slučajno pritisnuo tipku za brisanje,

prilikom definiranja tipke pozivamo dijalog za potvrdu odabira.

Prilikom poziva ovih akcija, identifikacijski broj mjerenja se proslijeđuje kao argument.

Još jedan od zahtjeva je grafički prikaz ili vizualizacija podataka, koja pomaže korisniku

da vidi trendove primjena vrijednosti na velikom vremenskom prozoru.

Stvaramo novi pogled čija je svrha isključivo prikaz grafa. Na taj način imamo manje

mogućnosti za konflikte između poziva skripti.

Dodajemo poveznicu na glavni prikaz, ispod tablice, te novu metodu u kontroleru.

Sada kad imamo novi pogled, te mu se može pristupati, te podatke treba nekako vizualno i

prikazati. Pronalazim popularno besplatno riješenje, Highcharts, koji je dostupan preko

21

NuGet package managera i kojeg smo opisali ranije u tekstu.

Metoda u kontroleru bila je najveća poteškoća u ovom dijelu jer odabrani graf zahtjeva

specifično tipiranje podataka za koje je bilo poteškoća s eksplicitnim izmjenama tipova.

Kada posložimo sve liste podataka, instancira se graf, kojem pored ostalih postavki,

proslijeđujemo i liste s podacima. Objekt koji sadrži graf proslijeđuje se pogledu kao

argument.

Kako neregistrirani korisnici ne bi mogli pristupati podacima, redak prije definicije metode

za otvaranje zaštićenih pogleda dodajemo [Authorize] tagove.

// GET: /Home/Chart [Authorize] public ActionResult Chart()

Ili u slučaju kada samo administrator može pristupiti

// POST: /Home/Delete/id [HttpPost] [ValidateAntiForgeryToken] [Authorize(Roles = "Admin")] public ActionResult Delete(int id)

Kada neautorizirani korisnici pokušaju pristupiti pogledu s tagom [Authorize],

preusmjeruje ih se na autorizaciju. ASP.NET MVC nam time uvelike olakšava posao, te

nudi još mnogo sličnih pomagala.

4.5 Završavanje

Kada smo dovršili sve funkcionalne dijelove aplikacije, treba napraviti sitne popravke i

estetske korekcije. Kako zahtjevima nije točno određen izgled aplikacije, možemo nastaviti

koristiti ugrađenu temu, no neke je dijelove nužno zamijeniti. Potrebno je izmjeniti naslove

i tekstove pojedinih pogleda, logo i poveznice u zaglavlju aplikacije, koji će se prikazivati

na svakom pogledu.

22

5. Korištenje aplikacije

U ovom ćemo poglavlju opisati kako se koristi aplikacija i postupak pokriti slikama.

5.1 Pristup stranici za neautoriziranog korisnika

Korisnik pokreće stranicu te ga se umjesto ispisa mjerenja preusmjeruje na stranicu za

autorizaciju. Nakon toga korisnik se može prijaviti svojim korisničkin imenom i lozinkom

ukoliko je registriran.

Neregistrirani korisnik može registrirati novi korisnički račun te pristupiti osnovnim

podacima o stranici te kontakt podacima.

Nakon preusmjeravanja na stranicu za autorizaciju, korisnik unosi svoje korisničko ime i

lozinku te potvrđuje unos. Stranica se preusmjerava na naslovnu stranicu s mjerenjima.

Za pristup detaljnijim podacima, administrator mu mora odobriti veće ovlasti.

Slika 12 - Sučelje za autorizaciju

23

5.2 Registracija

Nakon preusmjeravanja na stranicu za autorizaciju, neregistrirani korisnik odabire opciju

za registraciju te se otvara stranica za registraciju. Korisnik unosi korisničko ime, adresu

elektroničke pošte, lozinku te ponovljenu lozinku i potvrđuje registraciju.

Slika 13 - Sučelje za registraciju novog korisnika

24

5.3 Izmjena korisnika i brisanje

Korisnik, nakon autorizacije, u gornjem lijevom kutu odabire poveznicu sa svojim

korisničkim imenom, koja ga preusmjerava na sučelje za izmjenu postavki svog

korisničkog računa. Korisnik može mijenjati lozinku ili brisati korisnički račun.

Slika 14 - Sučelje za izmjenu korisničkog računa

25

5.4 Manipulacija korisnika

Pored kontrole svojih postavki, korisnik s administratorskim ovlastima dodatno može

pristupiti ispisu svih korisnika, vidjeti sve njihove podatke, mijenjati njihovu razinu

ovlasti, mijenjati lozinke ili obrisati njihove korisničke račune.

Slika 15 - Ispis i manipulacija korisnika

5.5 Pristup mjerenjima

Korisnik je nakon autorizacije preusmjeren na glavni prikaz aplikacije na kojem je

prikazana tablica s mjerenjima.

Ukoliko korisnik nema administatorske ovlasti (obični korisnik) tablica prikazuje deset

najnovijih mjerenja te korisnik nema mogućnosti manipulacije mjerenjima.

Ukoliko korisnik ima administatorske ovlasti, tablica prikazuje deset najnovijih mjerenja,

korisnik ima mogućnost izbora broja mjerenja po stranici te navigacijom po stranicama

26

pristupiti svim mjerenjima. Korisnik može vršiti pretragu mjerenja po bilo kojem

parametru.

Korisnik s administratorskim ovlastima također može pristupiti grafu s vizualizacijom

mjerenja

Slika 16 - Ispis mjerenja za običnog korisnika

27

Slika 17 - Ispis mjerenja za administratora

28

Slika 18 - Vizualizacija mjerenja

29

6. Zaključak

Izrađujući ovu aplikaciju došao sam u situaciju za stjecanje mnogo novih znanja.

Učenje jezika C# prilično bio je poprilično brz i ugodno iznenađujuć proces. MVC

arhitektura veoma je lako shvatljiva kao koncept, no primjenjena u specifičnom kontekstu

može biti zbunjujuća za studenta ili programera koji se s tim nije prehodno susreo. U

različitim sustavima pozadinska mehanika i povezivanje elemenata MVC-a može

funkcionirati na drugačije načine (npr. ASP.NET MVC4 i RubyOnRails). Nakon što se

stekne osnovno shvaćanje specifičnog MVC sustava, nastavak učenja i rada je uvelike

olakšan te se nastavlja velikom brzinom.

Za kvalitetan odabir jezika, arhitekture i platforme potrebno je uložiti dosta truda u

istraživanje mogućnosti i primjena različitih sustava. Ovisno o svrsi, smještaju i

zahtjevima, različite tehnologije mogu biti prikladne u raličitim uvjetima.

Jedan od zahtjeva je bio ostvarivanje mogućnosti za nadogradnju i unaprijeđivanje sustava.

No taj zahtjev je redudantan zbog samog dizajna korištene platforme. Osim urednog

pisanja koda i dizajna aplikacije, ne možemo ostaviti previše otvorenu mogućnost

nadogradnje aplikacije jer je, već po svojoj prirodi, MVC aplikacija izrazito otvorena za

izmjene. Novi student koji bi radio na razvoju aplikacije može lako dodati nove elemente u

poglede, ili ih potpuno zamijeniti. Može dodati potpuno nove module na aplikaciju, sa

svojim kontrolerima, te samo dodati poveznice na njih u zaglavlju aplikacije kako bi im

pristupili.

Po završetku rada s ovom aplikacijom i nakon stjecanja novih saznanja, došao sam do

zaključka da bi neki drugi postupci bili primjereniji za izvršavanje ovog zadatka.

Prvo bih zamijenio bazu podataka. Bolji izbor bio bi zaseban SQL server kojem bi

aplikacija pristupala. Model bi bio jednak i kod se ne bi morao izmjenjivati. Prednost

zasebnog servera je povećana sigurnost i pouzdanost, no i dodatno smanjena međuovisnost

komponenti. Server bi se također brinuo o sigurnosnim kopijama i posao održavanja bi se

dodatno mogao radvojiti. U idealnom slučaju, server apliakcije i baze podataka ne bi bili

na istom računalu i aplikacija ne bi stvarala ogromne količine podataka na svom serveru,

što bi u konačnici rezultiralo bržim i pouzdanijim sustavom.

30

Prilikom izrade aplikacije, ne bih odabrao gotovi uzorak aplikacije, nego bih odabrao

prazni MVC kostur koji sadrži samo osnovne elemente. Jedna baza podataka sadržavala bi

relacije za mjerenja i korisnike, te iz tog razloga ne bi bilo poteškoća s odabirom atributa

za korisnike, kao ni s izmjenama postojećeg koda. Koristio bih mogućnosti generiranja

koda za stvaranje sučelja i funkcionalnosti za manipulaciju korisnika i mjerenja te radio

potrebne izmjene na izgeneriranom kodu.

Kako prazan uzorak ne sadržava nikakve vizualne elemente, morao bih implementirati

nekakvu temu ili napraviti svoje CSS i jQuery elemente za estetiku aplikacije.

Poželjno bi bilo implementirati AJAX tablicu koja ima mogućnost samoosvježavanja kako

korisnik ne bi morao osvježavati stranicu kada se u bazi podataka pojave nova mjerenja.

Iako se veliki udio web aplikacija bazira na ASP.NET WebForms platformi te je druga

najzastupljenija tehnologija u svijetu, ASP.NET MVC platforma koristi se u malom udjelu.

Popularnije su također mnoge platforme bazirane na skriptnim jezicima poput PHPa,

Rubyja i Pythona. Iako sve ove platforme nude velike mogučnosti i podršku, smatram da

ASP.NET MVC zaslužuje veći udio u svijetu web aplikacija jer se bazira na C# jeziku,

sadržava u sebi mnoge elemente i mogućnosti koje se za ostale platforme moraju ručno

izvoditi. Ergonomija razvojnog okružja, generiranje koda i velika zaliha inženjera koji su

dizajnirali ovaj sustav su također prednosti ove platforme.

Kada bi ASP.NET MVC zauzimao veći udio weba, mnogi bi inženjeri stvarali nove

dodatke za ovu platformu, čime bi se oduzela jedna od prednosti ostalih platfomi i

opravdano bi postala jedna od najboljih platformi za web aplikacije.

31

7. Literatura

Josh Fischer, C# 4.0's New Features Explained, 16. 8. 2009.,

http://www.codeproject.com/Articles/37795/C-4-0-s-New-Features-Explained

Framework Usage Statistics, http://trends.builtwith.com/framework

Wikipedia, Model–view–controller,

http://en.wikipedia.org/wiki/Model-view-controller

McCracken, J. Test-Drive ASP.NET MVC. Prvo izdanje. SAD: Pragmatic

Bookshelf. 15. 6. 2010.

32

8. Sažetak

Cilj završnog rada bila je izrada web portala za ispis i vizualizaciju mjerenja sa sustava

fotoelektričnih ćelija u sklopu Laboratorija za sustave obnovljivih izvora energije.

Aplikacija je namijenjena korisnicima s dvije razine pristupa – običnim korisnicima i

administratorima, a kroz svoj rad odgovornim djelatnicima fakulteta i studentima treba

omogućiti brz uvid u stanje rada fotoelektrične mreže te njezine naponske mikro-mreže,

kao i trajnu pohranu podataka. U izradi aplikacije korišten je programski jezik C# na

platformi ASP.NET MVC 4, lokalna baza podataka i radno okružje Visual Studio 2012.

Aplikacija je ispunila postavljene zahtjeve, no otvorene su mogućnosti za proširenje

funkcionalnosti.

9. Abstract

The goal of this undergraduate thesis was to develop a web portal to be used to visualise

measurements from the photovoltaic cell network sensors, used by the Reusable Energy

Laboratory. The application implements two access layers for users - regular users and

administrators. Through its operation, the application allows the lab staff and students to

have a quick insight into the state and operation of the photovoltaic network, as well as a

solution for permanent data storage. The application was developed using the C#

programming language, on the ASP.NET MVC 4 framework, implementing an embedded

database, The work was done using the Visual Studio 2012 IDE. The application has

fullfilled its requirements, but it leaves space for future upgrades.