Internetski portal za praćenje procesnih veličina fotonaponskog sustava

Transcription

1 SVEUČILIŠTE U ZAGREBU FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA ZAVRŠNI RAD br Internetski portal za praćenje procesnih veličina fotonaponskog sustava Luka Ečimović Zagreb, srpanj 2013.

2

3 Sadržaj 1. Uvod Zahtjevi Zahtjevi Ciljevi aplikacije Tehnologije C# MVC Model View Controller Visual Studio Baza podataka JavaScript jquery datatable Highcharts graf Postupak izrade aplikacije Odabir jezika i okružja Odabir platforme Početak i poteškoće Kodiranje i odabir vanjskih komponenti Završavanje Korištenje aplikacije Pristup stranici za neautoriziranog korisnika Registracija Izmjena korisnika i brisanje Manipulacija korisnika Pristup mjerenjima Zaključak Literatura Sažetak Abstract... 32

4 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. 1

5 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. 2

6 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 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. 3

7 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 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. 4

8 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 5

9 <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> (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> (Roles.IsUserInRole("Admin")) { "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 znakom izvršavaju C# kod unutar.cshtml datoteka. 6

10 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 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. Slika 4 - Direktorij s pogledima 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. 7

11 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 8

12 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. 9

13 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 godine i služila je za C++ i Visual Basic programiranje. Tek 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. 10

14 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 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. 11

15 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 12

16 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. 13

17 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. 14

18 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. 15

19 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. 16

20 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. 17

21 @section head (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> (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> 18

22 </tbody> (Roles.IsUserInRole("Admin")) { (Html.BeginForm("Edit", "Home",new{id=item.MjerenjeID},FormMethod.Get)) <button type="submit">edit</button> (Html.BeginForm("Delete", "Home", new { id = item.mjerenjeid })) <button onclick = "return confirm('are you sure?')"type="submit">delete</button> } </td> } </tr> } 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 administratorskim 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 19

23 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 20

24 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. 21

25 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 22

26 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 23

27 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 24

28 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 25

29 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 26

30 Slika 17 - Ispis mjerenja za administratora 27

31 Slika 18 - Vizualizacija mjerenja 28

32 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. 29

33 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. 30

34 7. Literatura Josh Fischer, C# 4.0's New Features Explained, , Framework Usage Statistics, Wikipedia, Model view controller, McCracken, J. Test-Drive ASP.NET MVC. Prvo izdanje. SAD: Pragmatic Bookshelf

35 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 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. 32