SVEUČILIŠTE U SPLITU

SVEUČILIŠNI ODJEL ZA STRUČNE STUDIJE

Specijalistički diplomski stručni studij informacijske tehnologije

Predmet: Naziv predmeta

ZAVRŠNI RAD

Kandidat: Matej Zlatunić

Naslov rada: Izrada aplikacije za pčelarstvo

Mentor: Ivica Ružić

Split, prosinac 2018.

Sadržaj
Sažetak ......................................................................................................................................... 3
Summary...................................................................................................................................... 3
1.Uvod ......................................................................................................................................... 5
2. Projekt SaxBee ........................................................................................................................ 7
2.1. Kratko o Pčelarstvu ........................................................................................................... 7
2.2. Motivacija za sustavom .................................................................................................... 7
2.3. Specifikacija zahtjeva ....................................................................................................... 7
2.4 Odabir programske podrške ............................................................................................... 8
3.Izrada projekta .......................................................................................................................... 9
3.1. Podatkovni sloj ................................................................................................................. 9
3.2. Koraci instalacije MS SQL servera................................................................................. 10
3.3. Izrada baze podataka ....................................................................................................... 15
3.3. Opis entiteta .................................................................................................................... 17
4. Aplikativni sloj ...................................................................................................................... 22
4.1. Izrada ASP.NET CORE aplikacije ................................................................................. 23
4.2. ORM i migracija relacijskog modela .............................................................................. 27
4.3. Controlleri ....................................................................................................................... 29
5. Prezentacijski sloj .................................................................................................................. 34
5.1. Izrada Angular aplikacije.................................................................................................... 35
5.2. Datoteke Angular aplikacije ............................................................................................... 36
5.3. Direktive Angular Aplikacije ..................................................................................... 39
6. Zaključak ............................................................................................................................... 40
Literatura ................................................................................................................................... 41
Popis slika .................................................................................................................................. 42
Popis tablica............................................................................................................................... 43

2
Sažetak

U ovom radu napravljena je sustav koji služi za upravljanje i organizaciju pčelarstva

unutar tvrtki ili zadruga pčelara. Cilj sustava je olakšati prijenos i spremanje informacija
unutar poslovnog procesa.

Sustav je napravljen kao Web aplikacija, to je tip aplikacije kojoj se pristupa preko
Internet pretraživaća koristeći Internet ili intranet mrežu. Korištena je troslojna arhitektura
aplikacije s prezentacijskim, aplikativnim i podatkovnim slojem. Podatkovni sloj čini
relacijska baza podataka MS SQL Server 2017 koja komunicira s aplikacijskim slojem (engl.
Middleware). Aplikativni sloj je napravljen korištenjem tehnologije .NET CORE 2.0, što je
prva tehnologija Microsoft tvrtke s podrškom za sve operacijske sustave. Zadnji prezentacijski
sloj koji upotrebljavaju korisnici web aplikacije je napravljen pomoću Javascript frameworka
Angular 6.

Summary

Beekeeping application development

This paper has developed a system for managing and organizing beekeeping within a
company or beekeeping cooperative. The purpose of the system is to facilitate the transfer and
storage of data within the business process.

The system is designed as a web application, a type of application that is accessed

through internet browsers over the Internet or intranet network. It has used three-tiered
application architecture with presentation, application, and data layer. The data layer is a
relational database MS SQL Server 2017 that communicates with the application layer
(Middleware). The software application is developed using the .NET CORE 2.0 technology,

3
which is the first Microsoft technology to support all operating systems. The last layer of web
application user presentation was created using Javascript frameworka Angular 6.

4
1.Uvod

Internet je tehnologija koja je revolucionirala dijeljenje informacija među ljudima.

Internet čine sva računala svijeta povezana u jednu globalnu mrežu koja komuniciraju preko
mrežnih protokola.

World Wide Web skraćeno Web je dio Interneta koji koriste ljudi za razmjenu
informaciju preko HTTP (engl. Hyper Text Transfer Protocol) protokola. Čovjek koji je
izumio moderni Internet je britanski računalni inženjer Tim Berners-Lee, koji je 1990. godine
shvatio da postoji mnogo informacija na različitim računalima kojima je mogao pristupiti
samo korištenjem dotičnog računala. Napisao je tri temeljne tehnologije interneta HTML
(engl. Hypertext Markup Language ), URI (engl. Universal Resource Identifier ) i HTTP.
HTML je označni jezik koji služi za prikaz informacija na web stranicama. URI je tehnologija
za prikaz unikantih adresa na internetu. HTTP je protokol koji se i danas u varijanti HTTPS
protokola (engl. Secure Hyper Text Transfer Protocol ) koristi za komunikaciju i prijenos
sadržaja između računala.

Nakon pojave prve Web stranice 6. kolovoza 1991. Internet nastavlja rast ubrzanim
korakom pojavom. Prema informacijama stranice www.internetworldstats.com 1995. godine
Internet je koristilo oko o 16 miliona korisnika, to jest 0,4% posto svjetske populacije. Zadnji
poznat podatak je da prosinca.2017 godine Internet koristi 54,4 % svjetske populacije to jest
oko 4 milijarde ljudi.

Nagli razvoj interneta je pridonio razvoju Internet tehnologija. U vrlo kratkom periodu
Web stranice s statičnim podacima su postale Web aplikacije s dinamičnim prikazom
multimedijskog sadržaja. Neke od najpoznatijih WEB tehnologija za razvoj dinamičnog
sadržaja su PHP framework i ASP.NET framework.

5
 Microsoft je Američka internacionalna tvrtka s sjedištem u Washington-u, 2002 godina
na tržište predstavljaju ASP.NET tehnologiju za Web aplikacija, dinamičke Web stranica i
Web servisa. ASP.NET koristi .NET framework pisan u jeziku C# za opću namjenu razvoja
računalne podrške. Prve inačice ASP.NET tehnologije su bile ograničene samo na Windows
okruženja do 2018 godine kada izlazi .NET CORE .

.NET CORE je besplatna inačica otvorenog koda s mogućnošću pokretanja na svim

operacijskim sustavima upotrebom komandne linije CoreCLR. Trenutno je na verziji 2.0 i
podržava sve web tehnologije standardnog .NET frameworka..

Tehnologije za klijentsku stranu se nisu mnogo mijenjale, koristi se isti set tehnologija
HTML, CSS i Javascript. Povećanjem kompleksnosti Web aplikacija je došlo do potrebe za
proširenjem funkcionalnosti klijentski tehnologije što je rezultiralo pojavom frameworka
pisanih u Javascripti i CSS-u kako bi se olakšao i ubrzao razvoj Web stranica i aplikacija.

6
2. Projekt SaxBee

2.1. Kratko o Pčelarstvu

Pčelarstvo je grana stočarstva u kojoj čovjek Pčelar uzgaja pčelinje zajednice

organizirane u jedinica nazivom pčelinjak s ciljem žetve pčelinjih proizvoda. Najpoznatiji
pčelin proizvod je med, ali pčela proizvodi vosak i matičnu mliječ. Pčelinji proizvodi su
poznati po iznimno ljekovitim svojstvima i upotrebljavaju se u svrhe proizvodnje lijekova,
voska i u prehrani.

2.2. Motivacija za sustavom

Motivacija za projektom informacijskog sustava za organizaciju i upravljanje

pčelarstvom kreće od činjenice da je pčelarstvo jako kompleksan zanat, koji zahtjeva mnogo
radnih sati i obuhvaća pregršt informacija koje pčelar mora zapamtiti ili zapisati..
Informacijski sustav bi pomogao čovjeku u organizaciji informacija o pčelinjacima, pčelinjih
zajednica i izvještajima o tome koje radnje su obavljene na pojedinom pčelinjaku odnosno
zajednicama.

2.3. Specifikacija zahtjeva

Zahtjeve koje će informacijski sustav ispunjavati su :

 Evidencija pčelinjaka
 Evidencija pčelara
 Evidencija pčelinjih zajednica
 Evidencija matica

7
 

2.4 Odabir programske podrške

Postoji više vrsta programske podrške.. Desktop računalni programi koji se instaliraju
na računala, mobilne aplikacije za pametne mobilne uređaje, te . Web aplikacije kojima se
pristupa putem Web pretraživača instaliranih na mobilnom uređaju ili računalu.

Pri odabiru programske podrške za projekt je potrebno je prvo proučiti specifikaciju

zahtjeva koje aplikacija treba ispuniti. Veliki čimbenik u odabiru je i definirani proračun za
izradu aplikacije. Korištenjem tehnologija otvorenog koda se smanjuje račun za licence, tako
da krajnji račun izrade aplikacije bude manji. Uraditi i procjenu radnih sati koliko je potrebno
da se aplikacija napravi kako bi se klijentu ispostavi rok isporuke. Praksa je da se definirani
broj radnih sati uveća za 25% ukoliko dode do komplikacija u projektu.

Nakon proučenih specifikacija za projekt sustava za evidenciju pčelarstva, odlučena je

upotreba tehnologija Web aplikacija. Web aplikaciju omogućuju najlakši prijenos informacija
do korisnika upotrebom bilo koje uređaja s Web pretraživačem uz pomoć Internet veze.

Za arhitekturu aplikacije će biti upotrijebljena troslojna arhitektura (Slika 1), koja

komunicira na način da klijent šalje upite o informacijama na poslužitelja gdje poslužitelj
komunicira s bazom podataka i prosljeđuje informacije natrag klijentu. Uloga poslužitelja je
biti most koji povezuje klijenta s bazom podataka

Slika 1. Troslojna arhitektura web aplikacije

8
3.Izrada projekta

3.1. Podatkovni sloj

Dobar temelj je bitan za dugotrajnu kuću, zato dobro definiran podatkovni model
rješava mnoge probleme proširivosti sustava i povlačenja informacija prema klijentu. Loše
postavljen model povećava radne sate potrebne za aplikaciju zbog dodatnog napora koje
razvojni inženjer mora utrošiti kako bi predstavio podatke klijentu

Za podatkovni sloj se koristi sustav za upravljanje relacijskim bazama podataka MS

SQL.Server razvijan od strane Microsoft tvrtke. s primarnom funkcijom spremanja podataka i
posluživanja podataka poslužiteljima.

MS SQL Server ima više inačica sustava kao što su Express, Enterprise i Developer.
Svaka inačica je napravljen za određen dio publike i ovisno o njihovim potrebama i
opterećenima sustava. Za sustav evidencije pčelarstva se koristi inačica MS SQL Express koja
je namijenjena manjim sustavima s maksimalnom veličinom od 10 gb.

9
3.2. Koraci instalacije MS SQL servera

Za instalaciju MS SQL sustava je potrebno skinuti server s službeni stranica Microsoft

tvrtke pod linkom: https://www.microsoft.com/en-us/sql-server/sql-server-editions-express

MS SQL server može biti instaliran na lokalno računalo ili na poslužitelja, u ovom
radu se instalira na računalo poslužitelja. U Cloud infrastrukturi je iznajmljen prostor u vidu
VPS (engl. Virtual private server) virtualno privatnog servera. Vps je virtualna mašina koja se
prodaju kao SAAS (engl. Software as a Service) gdje se mjesečnom pretplatom plaća
korištenje resursa na Cloud infrastrukturi.

Ovisno o tome da li je VPS Windows ili Linux poslužitelj ovisi način spajanja na
poslužitelja. Ukoliko je Linux poslužitelj može se koristiti program Putty s komandnim
sučeljem spajanje na server a ukoliko je Windows poslužitelj koristi se Aplikacija Remote
Desktop. Razlika između Windows i Linux poslužitelja je da se u Linuxu poslužiteljima
primarno koristi komandna linija za upravljanje sustavom, dok Windows poslužitelji koriste
grafičko sučelje (

Slika 2).

Slika 2. Primjer grafičkog sučelja Windows poslužitelja

10
 Nakon klika na .Exe file za pokretanjem instalacija MS SQL Servera Expres potrebno
je odabrati Basic opciju (Slika 3). Kako bi instalirani sustav za upravljanje relacijskim bazama
podataka s osnovnim opcijama.

Slika 3 Prvi korak instalacije MS SQL Servera Express

Nakon uspješne instalacije sustava za upravljanje bazama podataka na pojaviti će se

ekran s osnovnim opcijama i podacima za pristup bazi podataka (Slika 4).

Connection String je poseban niz podataka koji omogućuje aplikaciji spajanje na bazu
podataka, dani niz je potrebo kopirati u file Web.Config file aplikacije koja sadrži osnovne
postavke o aplikaciji. Upotrebom više Connection String-ova može kontrolirati kojoj bazi
pristupa aplikacija. Za ovaj rad je potreban samo jedan Connection string koji cemo kopirati i
spremiti za daljnju upotrebu.

11
 Slika 4. Uspješno instaliran MS SQL Server prikaz podataka servera

Nakon uspješno instaliranog sustava za upravljanje bazama podataka, potrebno je

instalirati program kojim će se pristupati bazi i oblikovati baza podataka prema zahtjevima
aplikacije. MS SQL Server ima posebnu aplikaciju za pristup bazi podataka pod nazivom
SSMS (engl . SQL SERVER MANAGEMENT STUDIO) koji je potrebno dodatno skinuti s
Microsoft-ovih službenih stranica na linku:
https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-
ssms?view=sql-server-2017

Otvaranjem exe. File za instalirane SSMS programa za upravljanje bazom aplikacije

potrebno je kliknuti na ikonicu INSTALL (Slika 5) čime počinje instalacija programa.

12
Slika 5. Početni ekran za instalaciju SSMS programa

Nakon uspješno instaliranog SSMS programa za pristup bazi podataka dobije se

sučelje za administraciju baze podataka (Slika 6)

13
Slika 6. Sučelje za Administraciju MS SQL SERVER SSMS

14
3.3. Izrada baze podataka

Prema specifikaciji zahtjeva modeliran je slijedeći relacijski model (Slika 7). Model
treba zadovoljiti spremanje informacija o pčelinjim zajednicama, košnicama podacima o
matici i informacije o korisnicima i njihovim ulogama u sustavu.

Slika 7. Relacijski model aplikacije za pčelarstvo

15
 Za kreiranje relacijskih tablica se ne koristi SQL jezik za modeliranje pod nazivom
DDL (engl. Dana Definition Language), nego se koristi tehnologija pod nazivom ORM (engl.
Object-relational mapping).

Upotreba ORM tehnologije omogućuje modeliranje baze preko klasa definiranih u

aplikativnom dijelu. U objektno orijentiranim jezicima baza je predstavljena kao jedan objekt
s definicijama tablica, s time razvojni inženjer vrši upite upotrebom definiranih funkcija koje
ovise o vrstu ORM tehnologije koja se koristi.

Prednosti kod upotrebe ORM tehnologije je brzina pisanja upita i definiranja tablica na
bazi podataka. Za proširenje relacijskog modela potrebno je samo dodati nove atribute na
klase i upotrebom ORM funkcionalnosti preslikati na bazu podataka.

Mane kod upotreba ORM- tehnologije je brzina izvršenja upita. Upiti nisu optimizirani
za kao procedure, a specijalist za baze podataka nema nemogućnost optimizacije upita

Da li upotrijebiti ORM tehnologiju ovisi o projektu. Ukoliko je rok za isporuku

projekta vrlo kratak a brzina zanemariva preporučuje se upotreba tehnologije.

16
3.3. Opis entiteta

Entitet BeeGroup (Tablica 1) sadrži osnovne podatke o pčelinjaku, kao oznaka, ime i
opis pčelinjaka, sadrži ID korisnika koji je strani ključ na entitet AspNetUsers koji sadrži
registrirane korisnike aplikacije. Atribut Type je strani ključ za entitet BeeGroupTypes koji
sadrži opisane tipove pčelinjaka.

Tablica 1. Entitet BeeGroup

BeeGroup
Atribut Tip podatka Opis
ID int primarni ključ tablice
Mark nvachar(Max) proizvoljna oznaka pčelinjaka
Name nvachar(Max) proizvoljno ime pčelinjaka
BeeUserID nvachar(450) ID na korisnika
Description nvarchar(Max) opis pčelinjaka
Type int strani ključ na entitet BeeGroupType

Entitet BeeGroupType služi kao proširenje za BeeGroup Entitet ( Tablica 1), koji
sadrži proizvoljne tipove pčelinjih zajednica.

Tablica 2. Entitet BeeGroupType

BeeGroupType
Atribut Tip Podatka Opis
ID int primarni ključ tablice
Mark nvarchar(50) proizvoljna oznaka tipa pčelinjaka
Name nvarchar(50) proizvoljno ime tipa pčelinjaka

17
 Entitet BeeHive predstavlja pčelinje košnice jednog pčelinjaka, sadrži atribute koji
opisuju pčelinju zajednicu, pokazuju starost pčelinje zajednice te sadrži poveznice na entitete
BeeGroup (Tablica 1), BeeQueen (umetnuti tablicu), BeeHiveStatus, BeeHiveLegacy,
BeeHive Type-

Tablica 3. Entitet BeeHive

BeeHive
Atribut Tip podatka Opis
ID int primarni ključ tablice
Age datetime datum kreiranja zajednice
BeeQueenID int strani ključ na entitet BeeQueen
BeeGroupID int strani ključ na entitet BeeGroup
Legacy int strani ključ na entitet BeeHiveLegacy
Status int strani ključ na entitet BeeHiveStatus
Type int strani ključ na entitet BeeHiveType

Entitet BeeHiveLegacy prikazuje informacije o podrijetlu košnice odnosno BeeHive

entiteta. Sadrži podatke o proizvoljnoj oznaci i nazivu podrijetla.

Tablica 4. Entitet BeeHiveLegacy

BeeHiveLegacy
Atribut Tip podatka Opis
ID int primarni ključ tablice
Mark nvarchar(50) proizvoljna oznaka podrijetla
Name nvarchar(50) proizvoljno ime podrijetla

18
 Entitet BeeHiveStatus prikazuje informacije o stanju košnice odnosno BeeHive
entiteta. Sadrži informacije o proizvoljnoj oznaci i nazivu stanja.

Tablica 5. Entitet BeeHiveStatus

BeeHiveStatus
Atribut Tip podatka Opis
ID int primarni ključ tablice
Mark nvarchar(50) proizvoljna oznaka stanja
Name nvarchar(50) proizvoljno ime stanja

Entitet BeeHiveType prikazuje informacije o tipu košnice odnosno BeeHive

entiteta. Sadrži informacije o proizvoljnoj oznaci i nazivu tipa košnice.

Tablica 6. Entitet BeeHiveType

BeeHiveType
Atribut Tip podatka Opis
ID int primarni ključ tablice
Mark nvarchar(50) proizvoljna oznaka tipa
Name nvarchar(50) proizvoljno ime tipa

Sva tri entiteta BeeHiveType, BeeHiveStatus i BeeHiveLegacy su proširenje entiteta

BeeHive, s time se omogućuje proizvoljan unos i smanjuje redundancija podataka.

19
 Entitet BeeQueen prikazuje osnovne informacije o matici pčelinje košnice, kao oznaka,
naziv, opis te starost matice unutar pčelinje košnice.

Tablica 7. Entitet BeeQueen

BeeQueen
ID Tip Podatka Opis
Mark nvarchar(Max) proizvoljna oznaka matice
Name nvarchar(Max) proizvoljno ime matice
Description nvarchar(Max) proizvoljni opis matice
Age DateTime datum stavljanja matice u košnicu
Legacy int strani ključ na entitet BeeQueenLegacy
BornAge DateTime datum rođenja matice

Entitet BeeQueenLegacy prikazuje informacije o tipu košnice odnosno BeeQueen

entiteta. Sadrži informacije o proizvoljnoj oznaci i nazivu podrijetla matice .

Tablica 8. Entitet BeeQueenLegacy

BeeQueenLegacy
Atribut Tip podatka Opis
ID int primarni ključ tablice
Mark nvarchar(50) proizvoljna oznaka podrijetla matice
Name nvarchar(50) proizvoljno ime podrijetla matice

20
 Entiteti s prefiksom AspNet su tabele framework tehnologije ASP.NET Core Identity.
ASP.Net Core tehnologija nudi predefiniran framework za obradu podataka o korisnicima.
Može se opisati kao ORM samo s mogućnostima stvaranja korisnika, ažuriranja korisnika,
generiranja tokena za korisnika i njihovih uloga.

Predefinirane entitete za korisnike je potrebno proširiti vlastitim atributima ukoliko je

potrebno. U aplikaciji za evidenciju pčelarstva primarni Entitet AspNetUser za spremanje
informacija o korisnicima je proširen dodatnim atributima Entiteta BeeUser:

Tablica 9. BeeUser- proširenje Entiteta AspNetUsers

BeeUser – proširenje entiteta AspNetUser

Atribut Tip Podatka Opis
FirstName nvarchar(Max) ime korisnika
LastName nvarchar(Max) prezime korisnika
Adress nvarchar(Max) adresa korisnika
City nvarchar(Max) grad korisnika
Role nvarchar(Max) uloga korisnika

Entiteti AspNetUserTokens i AspNetUserClaims su prožirenja kombiniranog Entiteta

AspNetUser. Služe za pohranu informacija Token-ima i Tvrdnjama. Tokeni i Tvrdnje su

informacije koje služe za generiranje sigurnosnih tokena koji se koriste unutra aplikacije, kako
bi se provjerilo korisnik i koja su njegova prava unutar aplikacije.

21
4. Aplikativni sloj

Aplikativni sloj ili BLL (eng. Business Layer Logic) je dio aplikacije koji prima upite
s klijentske strane, oblikuje upit i prosljeđuje podatkovnom sloju. Nakon povratne informacije
podatkovnog sloja ponovno oblikuje informaciju i prosljeđuje klijentu. Može se opisati kao
most komunikacije između prezentacijskog sloja i podatkovnog sloja.
Logika oblikovanja informacija upita ne mora biti smještena u aplikativni sloj. Logiku
oblikovanja je moguće smjestiti i u prezentacijski ili podatkovni sloj. Stariji sustavi ili Legacy
sustavi imaju arhitekturu gdje je sva logika oblikovanja smještena u podatkovnom sloju. Dok
novije tehnologije za prezentacijski dio omogućuju razvijanje logiku i unutar klijentskog
dijela. Primjer takve tehnologije je Javascript Framework Angular.

U ovom radu za izradu aplikativnog sloja je korištena tehnologija :NET Core.

Trenutno je u inačici 2.1 ali u ovome radu se koristi inačica 2.0. Razlika između klasičnog
.NET framework-a i .NET core frameworka je slična primjeru Linux Kernel-a.

Linux kernel dolazi s glavnom jezgrom, na koju dodajemo komponente potrebne za

određeni rad ili funkcionalnost, s time se isključuje nepotreban kod u aplikacija. Tako se
dobije distribucija ograničenih funkcionalnosti ali dovoljnih za odrađivanje potrebitih.

Klasični ASP.NET je uključivao sve funkcionalnosti, od koje većina nije bila potrebita
za određene projekte, dok .NET core ima logiku Linux Kernela. Sadrži Core jezgru u koju
dodajemo funkcionalnosti potrebite za projekt i s time se smanjuje nepotreban kod u aplikaciji.

Optimizacija aplikacija je vrlo bitan čimbenik aplikacija u dobu digitalne

transformacije jer smanjuje troškove na hardware, manji troškovi za hardware privlače i kupce
s ograničenim proračunom. Jer više korisnika produžuje životni vijek tehnologije.

22
4.1. Izrada ASP.NET CORE aplikacije

Za izradu aplikacije se koristi razvojno okruženje Visual Studio Comunity 2017, to je

besplatna inačica razvojnog okruženja Visual Studio Tvrtke Microsoft s licencom za 1 do 4
razvojna inženjera.

Okruženje sadrži unaprijed napravljene šprance za projekte, u ovom radu se koristi

špranca .NET Core aplikacije s dodatkom Angular frameworka

U razvojnom okruženju pod FILE -> NEW -> PROJECT odabrati aplikaciju ASP.NET
CORE APLICATION (Slika 8)

Slika 8. Novi ASP.NET CORE Application projekt

23
 Nakon odabira projekta se otvara prozor s šprancama za različite tipove projekta,
odabire se špranca Angular (Slika 9).

Slika 9. Odabir šprance za projekt aplikacije za pčelarstvo

24
 Slika 10. Primjer šprance .NET Core Angular Projekta

Datoteka Program.cs je izvršna datoteka za pokretanje aplikacije, sadrži glavnu main

funkciju za prvu funkciju koja se izvršava prilikom pokretanja programske podrške. Datoteka
Startup.cs je klasa u koju pridružujemo sve osnovne klase potrebne za aplikaciju ovisno o
tome koja arhitektura i metodologija koristi za aplikaciju. U ovom radu se koristi MVC
metodologija.

25
 MVC (engl. Model-View-Controller) je metodologija koja aplikaciju razdvaja u tri
zasebna dijela Model, Controller, View.

Modeli su klase koje sadržavaju opis atributa objekta koji se koristi u aplikaciji, u koji
če se spremati informacija i oblikovati po deklariranoj logici.(Slika 11)

Slika 11. Primjer modela aplikacije ABeeAp

Controller je klasa u kojoj su sadržane metode za oblikovanje modela i komunikaciju s

podaktovnim slojem . U ovom radu za komunikaciju koristi je Web Api tehnologija .Net
Frameworka. Web API je programsko sučelje za komunikaciju s poslužiteljem ili web
pretraživačem. Podržava komunikaciju preko REST tehnologije u JSON formatu ili SOAP
tehnologije u XML formatu.

View je kombinacija C# programskog jezika i HTML označnog jezika koje controller

oblikuje i prikazuje klijentskog strani. U ovom projektu koristi se samo Indeks.cshtml View u
koji sadrži paket s javascript datotekom što čini Angular aplikaciju koja se servira klijentu.

26
4.2. ORM i migracija relacijskog modela

Nakon postavljenog projekta prvo je potrebno namjestiti komunikaciju s bazom

podataka. Unošenjem Connection String-a . Connection string je dugi niz znakova koji
definiraju ime baze, ime servera i način autentikacije servera na bazu. Windows podržava
atribut Integrated Security što podrazumijeva autentikaciju preko domenskog računa.

Promjer connection stringa za ovaj rad:

"BeeExpressConnectionString":
"Server=localhost\\SQLEXPRESS;Database=AbeeApp;Trusted_Connection=True;Integrated
Security=True;MultipleActiveResultSets=true;"

Zatim je potrebno definirati klasu koja će sadržavati opis relacijskog modela opisanih u
poglavlju podatkovnog sloja. U radu je definirana klasa ApplicationDBContext, koja služi za
definiranje objekta pristupa bazi podataka.

ORM tehnologija koja se koristi u radu je Entity Framework Core skračeno EFCore. U
Entity Framework Core je već uključen unutar .Net Core 2.0 Frameworka, i naredbe se
izvršavaju preko komandne linije :

dotnet ef migrations add Initial

Postavlja presliku definiranih objekata za relacijski model. U obliku migracija. Svaka

nova izmjena na modelima unutar aplikacije zahtjeva novu migraciju. Da bi se promjene
prenijele na bazu podataka potrebno je unijeti komandnu naredbu:

dotnet ef database update

27
Nakon uspješno izvedene naredbe ORM je kreirao potrebne tabele na bazi podataka, i kreirao
objekt za pristup entitetima.

28
4.3. Controlleri

Za ispunjavanjem funkcionalnosti aplikacije za pčelarstvo su definirana dva controlera

s CRUD (engl. Create Read Update Delete) metodama za oblikovanje informacija.

Account controller sadrži CRUD operacije za oblikovanje i spremanje podataka o

korisnicima aplikacije. Metode kao logiranje, registracija, resetiranje šifre i dohvaćanje
podataka o korisniku. Neke od metoda su opisane u slikama.

Metoda imena Post služi za registraciju korisnika u sustav. Dolazni objekt je model
RegistrationViewModel. ViewModel su različiti od klasičnih modela po tome što ne moraju
sadržavati sve atribute Entiteta. To su paketi podataka komunikacije između klijenta i servera.
Metoda post je primjer CREATE funkcije za kreiranje podataka.

29
 Prvo se provjerava valjanost dolaznog modela ukoliko ispunjava sve potrebite atribute,
slijede funkcije mapiranja ViewModela u Model koji koristi ORM objekt UserManaget i
BeeContext. ORM objekti su objekti s predefiniranim funkcijama za komunikaciju s bazom
podataka.

Ukoliko funkcije za mapiranje i spremanje podataka vrate pozitivan rezultat potrebno

je pozvati funkciju ORM objekta SaveChanges() koja promjene sprema na bazu podataka.

Iznad funkcije u anotaciji je potrebno navesti protokol koji se koristi u ovom slučaju je
to POST. Protok koji šalje podatke na server i vraća prema klijentu.

Metoda AllUsers() je primjer READ metode za dohvat podataka. Preko ORM objekta
_BeeContext se vrši upit na bazu o svim korisnicima i vraća u obliku liste natrag. Sva
komunikacije je u Json formatu.

30
 Primjer metode za ažuriranje korisnika. Koristi se POST metoda unatoč tomu što
HTTP protocol podržava i PUT metodu za ažuriranje podataka. U ovome primjeru metode se
ne koristi mapiranje, već se direktno atributi prepisuju na objekt context-a.

31
 Metoda DeleteById prikazuje primjer DELETE operacije za brisanje korisnika.
Ukoliko želimo obrisati korisnika koji je stranim ključem vezan na neki drugi objekt odnosno
entitet potrebno je prvo pronaći objekt na koji je vezan u ovom slučaju BeeGroup Entitet i
vezu izbrisati prebacivanjem vrijednosti atributa BeeGroup na vrijednost null.

32
 Bee controller CRUD metode za dohvat i oblikovanje informacija o pčelinjim
zajednicama, košnicama i maticama.

Primjeri metoda za oblikovanje informacija o pčelinjim zajednicama, košnicama i

maticama. Svim metodama definiram u Account i BeeControllerime je moguće pristupiti i iz
drugih aplikacija ukucavanjem točne putanje programskog sučelja web api.

33
5. Prezentacijski sloj

Prezentacijski sloj je najviši sloj aplikacije koji se poslužuje korisniku. Temeljne su tri
tehnologije koje služe za slaganje web stranica:

 HTML – označava elemente stranice

 CSS – uređuje elemente stranice po boji itd.
 Javascript – skriptni jezik namijenjen za dodavanje dinamičnosti web
stranicama

U početku javascript jezika razvojni inženjeri nisu ni slutili da će javascript postati

najrasprostranjeniji jezik na svijetu. Zamišljen je kao klijentski jezik za pretraživače ali
omogućuje i pisanje server-a uz alat node.js.

Typescript je nadskup javascript programskog jezika. I namijenjen je da riješi nedostatke

javascripte kao nemogućnost statičnog programiranja i provjere grešaka pri kompiliranju koda,
u slučaju Typescripta je to transpajliranje koda.

Kako je Typescript omogućio nove funkcionalnosti dolazi do pojave Javascript

frameworka na bazi Typescripta. Takav framework je Angular.

Angular je javaScript framework pisan za poslovne informacijske sustave. Pod poslovne

informacijske sustave se misli na sustave koji obrađuju veliku količine podataka. Nedostatak
Angular framework-a je velika krivulja učenja. Istiskuje mnogo napora od razvojnog inženjera
za upijanjem znanja.

34
5.1. Izrada Angular aplikacije

U ovome radu angular aplikacija je sadržana u folderu ClientApp. Folder App sadrži
datoteke koje se pakiraju u paket preko WebPack aplikacije u javascript datoteke. Web Pack je
program za pakiranje Javascript file-ova pri čemu ih minimizira i optimizira za rad u web
pretraživača. WebPack kreira dva paketa javascript datoteka:

 Vendor.js
 Main-client.js

Pozivanjem aplikacije za pčelarstvo poslužitelj šalje Html file s javascript datotekama

koje oblikuju stranicu na web pretraživača. Ova vrsta web aplikacije se naziva SPA skraćeno
od Single Page Aplication. Radi na principu da se ažuriraju preko Ajaxa samo dijelovi stranice
pri čemu nikada ne dolazi do punog slanja forma na poslužitelja. Time se dobije osjećaj rada u
aplikaciji kao na Desktop aplikaciji.

35
5.2. Datoteke Angular aplikacije

Komponente u Angular framework-u su dijelovi web stranice. Svaka komponenta se

sastoji od tri dijela:

 HTML komponente
 CSS komponente
 TypeScript komponente

Sve tri datoteke zajedno čine jednu cjelinu to jest komponentu koja predstavlja podatke
klijentu. Cilj komponenti je ponovno korištenje istih komponenti za različite funkcionalnosti
kako bi se smanjio obujam koda ali ispunili svi zahtjevi aplikacije

Slika 12. Primjer komponenti Aplikacije za pčelarstvo

36
 Sve komponente aplikacije je potrebno definirati u glavnom typescript file-u
App.module.ts. Modul u angularu je file koji objedinjuje sve korištene komponente, servise i
ostale datoteke.

Modul u angularu ne objedinjuje samo komponente već i druge datoteke. Servisi za

komunikaciju s aplikativnim slojem su također navedeni u modul datoteci pod providers
poglavljem.

Angular posjeduje i posebnu datoteku Pipe koja služi za formatiranje podataka koji se
prikazuju korisniku. Pipe se koristi za pisanje koda za filtriranje datoteka i prikaz podataka po
redoslijedu. Naziva je pipe jer je sintaksa ista kao za Linux komandu pipe.

Primjer upotrebe pipe komande za filtriranje sadržaja aplikacije za pčelarstvo.

37
 Slika 13. Angular AppModule aplikacije za pčelarstvo

Slika 13 Prikazuje AppModule datoteku s svim korištenim komponentama i servisima

aplikacije

38
5.3. Direktive Angular Aplikacije

Direktive u Angular framework-u služe za oblikovanje dom elemanata. Angular

framework ima predefinirane direktive ali daje mogučnost pisanja i Custom direktiva.U
ovome radu se koriste direktive *ngIF i *ngFOr za prikaz podataka.

*ngIF direktiva služi za prikaz dokumenta preko boolean varijable. Ukoliko je boolean
varijabla true element će biti prikazan, a u suprotnom neće.

Primjer korištenja *ngIf direktiva za kontroliranje prikaza gumbi za dodavanja ili za

ažuriranje pčelinje zajednice ovisno o tome iz kojeg contexta je otvorena komponenta.

Primjer korištenja *ngFor direktive kako bi se iscrtao tablicu od svih učitanih pčelinjih
zajednica. Na koju je vezana funkcija SelectBeeGroup() ukoliko se pokrene Click Event.

39
6. Zaključak

Razvoj web tehnologija je donio mnoge prednosti sustavima za upravljanje

informacijama poput web aplikacija. Trenutno svatko tko posjeduje pametni telefon, tablet ili
prijenosno računalo može pristupiti željenim informacijama iz bilo kojeg dijela svijeta.

Web aplikacija za evidenciju pčelarstva je samo jedna od mnogih web aplikacija što
pomažu čovjeka u bržem i efikasnijem izvršavanju poslovnih a i privatnih obveza.
Registracijom korisnika i pčelinjaka je omogućeno malim i srednjim poduzetnicima da
upravljaju efikasno svojim obrtom bez straha za gubljenjem informacija.

U vidu daljnjeg razvoja web aplikacije za pčelarstvo je povezivanje s IOT (engl.

Internet of things ) uređajima koji bi komunicirali s aplikacijom i prenosili informacija s
pčelinjaka na aplikaciju.

40
Literatura

1. The W3schools foundation , web izvor,

https://webfoundation.org/about/vision/history-of-the-web/, posjećeno 23.11.2018
2. Internet World Stats Usage And Population statistics , web izvor
https://www.internetworldstats.com/emarketing.htm, posjećeno 23.11.2018
3. O Pčelarstvu, web izvor, http://www.pcelarstvo.hr/ posjećeno 23.11.2018
4. .Net Core Wikipedia , web izvor, https://en.wikipedia.org/wiki/.NET_Core, posjećeno
27.11.2018
5. Dana Definition Language , web izvor
,https://en.wikipedia.org/wiki/Data_definition_language, posjećeno 27.11.2018
6. Angular documentation, web izvor, https://angular.io/docs/ , posjećeno 27.11.2018

41
Popis slika

Slika 1. Troslojna arhitektura web aplikacije .............................................................................. 8

Slika 2. Primjer grafičkog sučelja Windows poslužitelja .......................................................... 10
Slika 3 Prvi korak instalacije MS SQL Servera Express ........................................................... 11
Slika 4. Uspješno instaliran MS SQL Server prikaz podataka servera ..................................... 12
Slika 5. Početni ekran za instalaciju SSMS programa............................................................... 13
Slika 6. Sučelje za Administraciju MS SQL SERVER SSMS ................................................. 14
Slika 7. Relacijski model aplikacije za pčelarstvo .................................................................... 15
Slika 8. Novi ASP.NET CORE Application projekt ................................................................. 23
Slika 9. Odabir šprance za projekt aplikacije za pčelarstvo ...................................................... 24
Slika 10. Primjer šprance .NET Core Angular Projekta ............................................................ 25
Slika 11. Primjer modela aplikacije ABeeAp ............................................................................ 26
Slika 12. Primjer komponenti Aplikacije za pčelarstvo ............................................................ 36
Slika 13. Angular AppModule aplikacije za pčelarstvo ............................................................ 38

42
 Popis tablica

Tablica 1. Entitet BeeGroup ...................................................................................................... 17

Tablica 2. Entitet BeeGroupType .............................................................................................. 17
Tablica 3. Entitet BeeHive......................................................................................................... 18
Tablica 4. Entitet BeeHiveLegacy ............................................................................................. 18
Tablica 5. Entitet BeeHiveStatus ............................................................................................... 19
Tablica 6. Entitet BeeHiveType ................................................................................................ 19
Tablica 7. Entitet BeeQueen ...................................................................................................... 20
Tablica 8. Entitet BeeQueenLegacy .......................................................................................... 20
Tablica 9. BeeUser- proširenje Entiteta AspNetUsers .............................................................. 21

43