Internetski portal za praćenje procesnih veličina fotonaponskog ...
Transcript of Internetski portal za praćenje procesnih veličina fotonaponskog ...
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.